exports.id = 47658;
exports.ids = [47658];
exports.modules = {

/***/ 24868:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(16689);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
var _path;
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }

var SvgChevronDown = function SvgChevronDown(props) {
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
    width: 15,
    height: 15,
    viewBox: "0 0 15 15",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
    d: "M3.135 6.158a.5.5 0 0 1 .707-.023L7.5 9.565l3.658-3.43a.5.5 0 0 1 .684.73l-4 3.75a.5.5 0 0 1-.684 0l-4-3.75a.5.5 0 0 1-.023-.707Z",
    fill: "currentColor",
    fillRule: "evenodd",
    clipRule: "evenodd"
  })));
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgChevronDown);

/***/ }),

/***/ 80275:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(16689);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
var _path;
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }

var SvgMenuMoreHoriz = function SvgMenuMoreHoriz(props) {
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
    width: 24,
    height: 24,
    viewBox: "0 0 24 24",
    fill: "currentColor",
    xmlns: "http://www.w3.org/2000/svg"
  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
    d: "M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM19 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
    stroke: "currentColor",
    strokeWidth: 2,
    strokeLinecap: "round",
    strokeLinejoin: "round"
  })));
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgMenuMoreHoriz);

/***/ }),

/***/ 81318:
/***/ ((module) => {

// Exports
module.exports = {
	"sorter": "CollectionSorter_sorter__FUf1K",
	"sortTrigger": "CollectionSorter_sortTrigger__C17Do",
	"itemIcon": "CollectionSorter_itemIcon___37wK"
};


/***/ }),

/***/ 23848:
/***/ ((module) => {

// Exports
module.exports = {
	"pageContainer": "index_pageContainer__Pxtn3",
	"loadingContainer": "index_loadingContainer__WEZFc",
	"flow": "index_flow__rCTR5",
	"flowItem": "index_flowItem__GnXWz",
	"additionalVerticalGap": "index_additionalVerticalGap__nzYz6",
	"fullWidth": "index_fullWidth__1n4ux"
};


/***/ }),

/***/ 56321:
/***/ ((module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(20997);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _CollectionSorter_module_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(81318);
/* harmony import */ var _CollectionSorter_module_scss__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_CollectionSorter_module_scss__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _icons_chevron_down_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(24868);
/* harmony import */ var _utils_eventLogger__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(55943);
/* harmony import */ var src_components_dls_PopoverMenu_PopoverMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(99163);
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_utils_eventLogger__WEBPACK_IMPORTED_MODULE_2__, src_components_dls_PopoverMenu_PopoverMenu__WEBPACK_IMPORTED_MODULE_3__]);
([_utils_eventLogger__WEBPACK_IMPORTED_MODULE_2__, src_components_dls_PopoverMenu_PopoverMenu__WEBPACK_IMPORTED_MODULE_3__] = __webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__);





const CollectionSorter = ({ options , selectedOptionId , onChange , isSingleCollection , collectionId =null ,  })=>{
    const selectedOption = options.find((option)=>option.id === selectedOptionId);
    const onOpenChange = (isOpen)=>{
        const eventData = {
            collectionId
        };
        if (isSingleCollection) {
            if (isOpen) {
                (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_2__/* .logEvent */ .Kz)("collection_sorter_opened", eventData);
            } else {
                (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_2__/* .logEvent */ .Kz)("collection_sorter_closed", eventData);
            }
        } else if (isOpen) {
            (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_2__/* .logEvent */ .Kz)("collections_sorter_opened", eventData);
        } else {
            (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_2__/* .logEvent */ .Kz)("collections_sorter_closed", eventData);
        }
    };
    return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
        className: (_CollectionSorter_module_scss__WEBPACK_IMPORTED_MODULE_4___default().sorter),
        children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(src_components_dls_PopoverMenu_PopoverMenu__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {
            trigger: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("span", {
                className: (_CollectionSorter_module_scss__WEBPACK_IMPORTED_MODULE_4___default().sortTrigger),
                children: [
                    selectedOption.label,
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
                        className: (_CollectionSorter_module_scss__WEBPACK_IMPORTED_MODULE_4___default().itemIcon),
                        children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_icons_chevron_down_svg__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, {})
                    })
                ]
            }),
            onOpenChange: onOpenChange,
            children: options.map((option)=>/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(src_components_dls_PopoverMenu_PopoverMenu__WEBPACK_IMPORTED_MODULE_3__/* ["default"].Item */ .Z.Item, {
                    shouldCloseMenuAfterClick: true,
                    onClick: ()=>onChange(option.id),
                    children: option.label
                }, option.id))
        })
    });
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CollectionSorter);

__webpack_async_result__();
} catch(e) { __webpack_async_result__(e); } });

/***/ }),

/***/ 11817:
/***/ ((module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(20997);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16689);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(77843);
/* harmony import */ var _dls_Modal_Modal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(21948);
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_dls_Modal_Modal__WEBPACK_IMPORTED_MODULE_3__]);
_dls_Modal_Modal__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
/* eslint-disable react/no-array-index-key */ 



const ConfirmationModal = ()=>{
    const { onCancel , onConfirm , state  } = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__/* .useConfirmModal */ .t)();
    const actions = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(()=>{
        const returnedActions = [];
        if (state.confirmText && onConfirm) {
            returnedActions.push({
                label: state.confirmText,
                onClick: onConfirm
            });
        }
        if (state.cancelText && onCancel) {
            returnedActions.push({
                label: state.cancelText,
                onClick: onCancel,
                isCloseAction: true
            });
        }
        return returnedActions;
    }, [
        onCancel,
        onConfirm,
        state.cancelText,
        state.confirmText
    ]);
    const onClose = ()=>{
        if (onCancel) {
            onCancel();
        }
    };
    return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_dls_Modal_Modal__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {
        isOpen: !!state.open,
        onClickOutside: onClose,
        onEscapeKeyDown: onClose,
        children: [
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_dls_Modal_Modal__WEBPACK_IMPORTED_MODULE_3__/* ["default"].Body */ .Z.Body, {
                children: [
                    /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_dls_Modal_Modal__WEBPACK_IMPORTED_MODULE_3__/* ["default"].Header */ .Z.Header, {
                        children: [
                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_dls_Modal_Modal__WEBPACK_IMPORTED_MODULE_3__/* ["default"].Title */ .Z.Title, {
                                children: state.title
                            }),
                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_dls_Modal_Modal__WEBPACK_IMPORTED_MODULE_3__/* ["default"].Subtitle */ .Z.Subtitle, {
                                children: state.subtitle
                            })
                        ]
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("p", {
                        children: state.description
                    })
                ]
            }),
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_dls_Modal_Modal__WEBPACK_IMPORTED_MODULE_3__/* ["default"].Footer */ .Z.Footer, {
                children: actions.map((action, index)=>{
                    const { onClick , label  } = action;
                    if (action.isCloseAction) {
                        return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_dls_Modal_Modal__WEBPACK_IMPORTED_MODULE_3__/* ["default"].CloseAction */ .Z.CloseAction, {
                            onClick: onClick,
                            children: label
                        }, index);
                    }
                    return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_dls_Modal_Modal__WEBPACK_IMPORTED_MODULE_3__/* ["default"].Action */ .Z.Action, {
                        onClick: onClick,
                        children: label
                    }, index);
                })
            })
        ]
    });
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ConfirmationModal);

__webpack_async_result__();
} catch(e) { __webpack_async_result__(e); } });

/***/ }),

/***/ 77843:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "N": () => (/* binding */ useConfirm),
/* harmony export */   "t": () => (/* binding */ useConfirmModal)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(16689);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);

let memoryState = {
    open: false
};
const updateState = (newState)=>{
    memoryState = newState;
    listeners.forEach((listener)=>listener(memoryState));
};
const listeners = [];
/**
 * When this hook (useConfirmationModalInternal) is called.
 * We set `useState` in the component. So that it will trigger rerender when the state changes
 *
 * `setState` is registered to a global `listeners`.
 * Every time we `updateState`, this will update the  state in every components that subscribe
 * to the changes (listeners)
 */ const useConfirmModal = ()=>{
    const { 0: state , 1: setState  } = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(memoryState);
    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(()=>{
        listeners.push(setState);
        return ()=>{
            const index = listeners.indexOf(setState);
            if (index > -1) {
                listeners.splice(index, 1);
            }
        };
    }, [
        state
    ]);
    const closeConfirm = ()=>{
        updateState({
            ...state,
            open: false
        });
    };
    const onConfirm = ()=>{
        closeConfirm();
        resolveCallback(true);
    };
    const onCancel = ()=>{
        closeConfirm();
        resolveCallback(false);
    };
    return {
        state,
        onCancel,
        onConfirm
    };
};
let resolveCallback;
/**
 * This hook is meant to be consumed by other components
 * Check ConfirmationModal.stories.tsx for an example
 *
 * This hook return a callback, that's when called return a Promise<boolean>
 * if the user click "confirm", boolean will be true, otherwise it will be false
 */ const useConfirm = ()=>{
    const confirm = (state)=>{
        updateState({
            ...state,
            open: true
        });
        return new Promise((res)=>{
            resolveCallback = res;
        });
    };
    return confirm;
};


/***/ }),

/***/ 6059:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "l": () => (/* binding */ CollectionDetailSortOption),
/* harmony export */   "r": () => (/* binding */ CollectionListSortOption)
/* harmony export */ });
var CollectionDetailSortOption;
(function(CollectionDetailSortOption) {
    CollectionDetailSortOption["RecentlyAdded"] = "recentlyAdded";
    CollectionDetailSortOption["VerseKey"] = "verseKey";
})(CollectionDetailSortOption || (CollectionDetailSortOption = {}));
var CollectionListSortOption;
(function(CollectionListSortOption) {
    CollectionListSortOption["RecentlyUpdated"] = "recentlyUpdated";
    CollectionListSortOption["Alphabetical"] = "alphabetical";
})(CollectionListSortOption || (CollectionListSortOption = {}));


/***/ })

};
;
//# sourceMappingURL=47658.js.map