oolib 2.168.1 → 2.168.3

package/dist/components/Dropdowns/comps/OptionsShell/index.js

@@ -56,7 +56,7 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
                     position: "absolute",
                     bottom: yOrientation === "top" ? undefined : 0,
                     top: yOrientation === "top" ? 0 : undefined,
-                } }, children)))) : (react_1.default.createElement(framer_motion_1.AnimatePresence, null, showOptions ? (react_1.default.createElement(Modal_1.Modal, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S },
+                } }, children)))) : (react_1.default.createElement(framer_motion_1.AnimatePresence, null, showOptions ? (react_1.default.createElement(Modal_1.Modal, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S, dynamicHeaderHeight: true },
         SelectComp && SelectComp,
         react_1.default.createElement(styled_1.StyledModalOptionsWrapper, { invert: invert, ref: ref }, children),
         showDoneButton && (react_1.default.createElement("div", { style: {

package/dist/components/Dropdowns/comps/OptionsSingle/index.js

@@ -35,7 +35,6 @@ var TextInputs_1 = require("../../../TextInputs");
 var TextLoader_1 = require("../../../LoadersAndProgress/TextLoader");
 var useKeyboardControl_1 = require("../../utils/useKeyboardControl");
 var useSetYOrientation_1 = require("../../utils/useSetYOrientation");
-var VirtualizedWrapper_1 = require("../VirtualizedWrapper");
 /**
  * if used independently, must be used inside a 'position: relative/absolute' div.
  */
@@ -84,13 +83,13 @@ var OptionsSingle = function (_a) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, SelectComp: SelectComp, handleHideOptions: handleHideOptions, label: label, optionsModalLabel: optionsModalLabel, invert: invert, relativeToRef: relativeToRef, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, alignDropdown: alignDropdown, S: S },
             isSearchable && genSearchBar(),
-            options.length === 0 ? (react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })) : (react_1.default.createElement(VirtualizedWrapper_1.VirtualizedWrapper, { options: options, lightboxHeight: lightboxHeight, searchString: searchString }, function (option, index, style) { return (react_1.default.createElement(styled_1.StyledOption, { key: option.value, invert: invert, isSelected: !option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value, isFocussed: focussedOp === index, className: "OKE-Dropdown__option", ref: function (el) {
+            options.length === 0 ? (react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })) : (react_1.default.createElement(react_1.Fragment, null, options.map(function (option, index) { return (react_1.default.createElement(styled_1.StyledOption, { key: option.value, invert: invert, isSelected: !option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value, isFocussed: focussedOp === index, className: "OKE-Dropdown__option", ref: function (el) {
                     return focussedOp === index && el && scrollFocussedOpIntoView(el);
                 }, onClick: function (e) {
                     if (!option.loading)
                         handleSelect(option);
                     setSearchString && setSearchString("");
-                }, S: S, style: style && style }, option.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : (react_1.default.createElement(OptionContent_1.OptionContent, { option: option, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: options.length === index + 1 ? observerRef : null })))); })),
+                }, S: S }, option.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : (react_1.default.createElement(OptionContent_1.OptionContent, { option: option, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: options.length === index + 1 ? observerRef : null })))); }))),
             genCreateTagButton && genCreateTagButton(options))));
 };
 exports.OptionsSingle = OptionsSingle;

package/dist/components/Modals/Modal/comps/ModalHeaderStyle1/index.d.ts

@@ -1,9 +1,10 @@
-export function ModalHeaderStyle1({ title, linkTo, onClose, setAnimPos, initAnimPos, invert }: {
+export function ModalHeaderStyle1({ title, linkTo, onClose, setAnimPos, initAnimPos, invert, dynamicHeaderHeight }: {
     title: any;
     linkTo: any;
     onClose: any;
     setAnimPos: any;
     initAnimPos: any;
     invert: any;
+    dynamicHeaderHeight?: boolean;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/Modals/Modal/comps/ModalHeaderStyle1/index.js

@@ -10,8 +10,8 @@ var OKELink_1 = require("../../../../OKELink");
 var Typo_1 = require("../../../../Typo");
 var styled_1 = require("../../styled");
 var ModalHeaderStyle1 = function (_a) {
-    var title = _a.title, linkTo = _a.linkTo, onClose = _a.onClose, setAnimPos = _a.setAnimPos, initAnimPos = _a.initAnimPos, invert = _a.invert;
-    return (react_1.default.createElement(styled_1.StyledModalLargeHeader, { invert: invert },
+    var title = _a.title, linkTo = _a.linkTo, onClose = _a.onClose, setAnimPos = _a.setAnimPos, initAnimPos = _a.initAnimPos, invert = _a.invert, _b = _a.dynamicHeaderHeight, dynamicHeaderHeight = _b === void 0 ? false : _b;
+    return (react_1.default.createElement(styled_1.StyledModalLargeHeader, { invert: invert, dynamicHeaderHeight: dynamicHeaderHeight },
         react_1.default.createElement("div", { style: {
                 display: "flex",
                 gap: "2.5rem",

package/dist/components/Modals/Modal/index.d.ts

@@ -14,6 +14,7 @@ export interface genHeaderProps {
         opacity: number;
     };
     invert: boolean;
+    dynamicHeaderHeight?: boolean;
 }
 export interface ModalProps {
     title: string;
@@ -34,6 +35,7 @@ export interface ModalProps {
     showConfirmBtn?: boolean;
     alignActions?: alignActionsType;
     disableHeader?: boolean;
+    dynamicHeaderHeight?: boolean;
 }
 /**
  * @component Renders a modal component with customizable title, content, and actions.
@@ -57,6 +59,7 @@ export interface ModalProps {
  * @prop {boolean} [showConfirmBtn]: A boolean indicating whether to render the confirm button. Defaults to false.
  * @prop {('left' | 'right' | 'center')} [alignActions]: The alignment of the action buttons. Defaults to "right".
  * @prop {boolean} [disableHeader]: A boolean indicating whether to render the header. Defaults to false.
+ * @prop {boolean} [dynamicHeaderHeight]: A boolean indicating whether the header (style1) should take a fixed height of 4rem or increase height flexibly as per the text within it. Defaults to false.
  * @return {ReactElement} The rendered modal component.
  */
 export declare const Modal: React.FunctionComponent<ModalProps>;

package/dist/components/Modals/Modal/index.js

@@ -67,15 +67,16 @@ var Divider_1 = require("../../Divider");
  * @prop {boolean} [showConfirmBtn]: A boolean indicating whether to render the confirm button. Defaults to false.
  * @prop {('left' | 'right' | 'center')} [alignActions]: The alignment of the action buttons. Defaults to "right".
  * @prop {boolean} [disableHeader]: A boolean indicating whether to render the header. Defaults to false.
+ * @prop {boolean} [dynamicHeaderHeight]: A boolean indicating whether the header (style1) should take a fixed height of 4rem or increase height flexibly as per the text within it. Defaults to false.
  * @return {ReactElement} The rendered modal component.
  */
 var Modal = function (_a) {
-    var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle, _d = _a.fitToContentHeight, fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.showActionPanel, showActionPanel = _e === void 0 ? false : _e, _f = _a.onCloseText, onCloseText = _f === void 0 ? "Close" : _f, onConfirm = _a.onConfirm, _g = _a.showCloseBtn, showCloseBtn = _g === void 0 ? true : _g, _h = _a.onConfirmText, onConfirmText = _h === void 0 ? "Confirm" : _h, _j = _a.showConfirmBtn, showConfirmBtn = _j === void 0 ? true : _j, _k = _a.alignActions, alignActions = _k === void 0 ? "right" : _k, _l = _a.disableHeader, disableHeader = _l === void 0 ? false : _l;
+    var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle, _d = _a.fitToContentHeight, fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.showActionPanel, showActionPanel = _e === void 0 ? false : _e, _f = _a.onCloseText, onCloseText = _f === void 0 ? "Close" : _f, onConfirm = _a.onConfirm, _g = _a.showCloseBtn, showCloseBtn = _g === void 0 ? true : _g, _h = _a.onConfirmText, onConfirmText = _h === void 0 ? "Confirm" : _h, _j = _a.showConfirmBtn, showConfirmBtn = _j === void 0 ? true : _j, _k = _a.alignActions, alignActions = _k === void 0 ? "right" : _k, _l = _a.disableHeader, disableHeader = _l === void 0 ? false : _l, _m = _a.dynamicHeaderHeight, dynamicHeaderHeight = _m === void 0 ? false : _m;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var handleClose = function () { return onClose(); };
     var initAnimPos = { marginTop: "100dvh", opacity: 0 };
     var endAnimPos = { marginTop: 0, opacity: 1 };
-    var _m = (0, react_1.useState)(endAnimPos), animPos = _m[0], setAnimPos = _m[1];
+    var _o = (0, react_1.useState)(endAnimPos), animPos = _o[0], setAnimPos = _o[1];
     (0, react_1.useEffect)(function () {
         document.body.style.overflow = "hidden";
         return function () { document.body.style.overflow = "unset"; };
@@ -86,7 +87,7 @@ var Modal = function (_a) {
             style2: ModalHeaderStyle2_1.ModalHeaderStyle2,
         };
         var Comp = headerStyles[headerStyle];
-        return (react_1.default.createElement(Comp, { title: title, subtitle: subtitle, setAnimPos: setAnimPos, linkTo: linkTo, onClose: onClose, initAnimPos: initAnimPos, invert: invert }));
+        return (react_1.default.createElement(Comp, { title: title, subtitle: subtitle, setAnimPos: setAnimPos, linkTo: linkTo, onClose: onClose, initAnimPos: initAnimPos, invert: invert, dynamicHeaderHeight: dynamicHeaderHeight }));
     };
     var takeFullScreenOnScroll = ["style1"].indexOf(headerStyle) !== -1
         ? true

package/dist/components/Modals/Modal/styled.d.ts

@@ -18,6 +18,7 @@ export declare const StyledModalLargeBgColor: import("styled-components").Styled
 export declare const StyledModalLargeContentWrapper: import("styled-components").StyledComponent<"div", any, StyledModalLargeContentWrapperProps, never>;
 export declare const StyledModalLargeHeader: import("styled-components").StyledComponent<"header", any, {
     invert?: boolean;
+    dynamicHeaderHeight?: boolean;
 }, never>;
 export declare const StyledModalBodyWrapper: import("styled-components").StyledComponent<"div", any, StyledModalBodyWrapperProps, never>;
 export declare const StyledModalLargeBody: import("styled-components").StyledComponent<"div", any, StyledModalLargeBodyProps, never>;

package/dist/components/Modals/Modal/styled.js

@@ -43,9 +43,12 @@ exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templat
     var desktopWidth = _a.desktopWidth;
     return desktopWidth;
 });
-exports.StyledModalLargeHeader = styled_components_1.default.header(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  /* width: 100%; */\n  height: 4rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 2rem;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n"], ["\n  background-color: ", ";\n  /* width: 100%; */\n  height: 4rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 2rem;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n"])), function (_a) {
+exports.StyledModalLargeHeader = styled_components_1.default.header(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  /* width: 100%; */\n  height: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.5rem 2rem;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n"], ["\n  background-color: ", ";\n  /* width: 100%; */\n  height: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.5rem 2rem;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n"])), function (_a) {
     var invert = _a.invert;
     return (invert ? themes_1.colors.greyColor90 : greyColor5);
+}, function (_a) {
+    var dynamicHeaderHeight = _a.dynamicHeaderHeight;
+    return (dynamicHeaderHeight ? 'unset' : '4rem');
 });
 exports.StyledModalBodyWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: ", ";\n"])), function (_a) {
     var takeFullScreenOnScroll = _a.takeFullScreenOnScroll, overflowVisible = _a.overflowVisible;

package/dist/stories/v2/components/TabBar.stories.js

@@ -80,8 +80,8 @@ exports.default = {
 };
 var TabBar_ = function (args) {
     var options = [
-        { display: "display 1", value: "value1" },
-        { display: "display 2", value: "value2" },
+        { display: "display 1", value: "value1", icon: 'Funnel' },
+        { display: "display 2", value: "value2", icon: 'ListDashes' },
         { display: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", value: "value3" },
         { display: "display 3", value: "value4" },
         { display: "display 4", value: "value5" },

package/dist/v2/components/TabBar/index.js

@@ -25,6 +25,7 @@ var mixins_1 = require("../../../themes/mixins");
 var Typo2_1 = require("../Typo2");
 var phosphor_react_1 = require("phosphor-react");
 var colors_1 = require("../../themes/colors");
+var icons_1 = require("../../../icons");
 var Base = function (_a) {
     var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, errorTabs = _a.errorTabs, disabledTabs = _a.disabledTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString, _c = _a.black, black = _c === void 0 ? false : _c, M = _a.M, S = _a.S, _size = _a.size //use any one of these 3
     ;
@@ -34,6 +35,13 @@ var Base = function (_a) {
     var handleClick = function (v) {
         onChange && onChange(id, saveValueAsString ? v.value : v);
     };
+    var genIconInTab = function (iconName) {
+        var IconComp = icons_1.icons[iconName];
+        if (!IconComp)
+            return null;
+        //else
+        return react_1.default.createElement(IconComp, { weight: 'bold', size: 16 });
+    };
     return (react_1.default.createElement(index_styled_1.TabBarStyled, { size: size, style: style },
         react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
             !scrollIsAtStart && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { left: true },
@@ -45,7 +53,9 @@ var Base = function (_a) {
                     var tabIsActive = value && op.value === value.value;
                     return (react_1.default.createElement(index_styled_1.TabBarTabWrapper, { tabBarStyle: tabBarStyle, key: op.value, active: tabIsActive, error: tabHasError, disabled: tabIsDisabled, black: black },
                         react_1.default.createElement(index_styled_1.TabBarTabStyled, { size: size, active: tabIsActive, error: tabHasError, disabled: tabIsDisabled, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); }, black: black },
-                            react_1.default.createElement(index_styled_1.STYLED_TYPO, { capitalize: true }, op.display),
+                            react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '0.4rem' } },
+                                op.icon && genIconInTab(op.icon),
+                                op.display && react_1.default.createElement(index_styled_1.STYLED_TYPO, { capitalize: true }, op.display)),
                             tabHasError && react_1.default.createElement(index_styled_1.StyledDot, { active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle }))));
                 }))),
             !scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { right: true },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.168.1",
+  "version": "2.168.3",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -71,11 +71,11 @@
     "typescript": "^5.4.3"
   },
   "peerDependencies": {
+    "date-fns": "^2.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.28.0",
-    "styled-components": "^5.3.3",
-    "date-fns": "^2.0.0"
+    "styled-components": "^5.3.3"
   },
   "config": {
     "commitizen": {
@@ -107,7 +107,6 @@
     "phosphor-react": "^1.4.1",
     "react-datepicker": "^7.6.0",
     "react-player": "^2.12.0",
-    "react-virtualized": "^9.22.5",
     "recharts": "^2.12.7"
   }
 }

package/dist/components/Dropdowns/comps/VirtualizedWrapper/index.d.ts

@@ -1,7 +0,0 @@
-export function VirtualizedWrapper({ children, options, lightboxHeight, searchString }: {
-    children: any;
-    options: any;
-    lightboxHeight: any;
-    searchString: any;
-}): React.JSX.Element;
-import React from 'react';

package/dist/components/Dropdowns/comps/VirtualizedWrapper/index.js

@@ -1,66 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VirtualizedWrapper = void 0;
-var react_1 = __importStar(require("react"));
-var styled_1 = require("./styled");
-var react_virtualized_1 = require("react-virtualized");
-var VirtualizedWrapper = function (_a) {
-    var children = _a.children, options = _a.options, lightboxHeight = _a.lightboxHeight, searchString = _a.searchString;
-    // Create a cache for measuring row heights
-    var cache = (0, react_1.useRef)(new react_virtualized_1.CellMeasurerCache({
-        fixedWidth: true,
-        defaultHeight: 50, // default height for each row before height is calculated
-    }));
-    (0, react_1.useEffect)(function () {
-    }, [options.length, searchString]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, options.length > 30 ?
-        react_1.default.createElement(styled_1.StyledOptionsShellWrapper, { lightboxHeight: lightboxHeight },
-            react_1.default.createElement(react_virtualized_1.AutoSizer, null, function (_a) {
-                var width = _a.width, height = _a.height;
-                return (react_1.default.createElement(react_virtualized_1.List, { width: width, height: height, rowHeight: cache.current.rowHeight, deferredMeasurementCache: cache.current, rowCount: options.length, rowRenderer: function (_a) {
-                        var key = _a.key, index = _a.index, style = _a.style, parent = _a.parent;
-                        var option = options[index];
-                        return (react_1.default.createElement(react_virtualized_1.CellMeasurer, { key: key, cache: cache.current, parent: parent, columnIndex: 0, rowIndex: index }, children(option, index, style)));
-                    } }));
-            }))
-        :
-            options.map(function (option, index) { return (children(option, index)); })));
-};
-exports.VirtualizedWrapper = VirtualizedWrapper;
-// ################ AutoSizer #######
-// The AutoSizer component is used to automatically calculate and adjust 
-// the size of its child components based on the available space. 
-// It wraps around the List component to dynamically resize the list based on the dimensions of its parent container.
-// ################  List ########## 
-// The List component is a virtualized list that efficiently renders a 
-// large number of items by only rendering the visible items on the screen. 
-// It accepts a rowCount prop to specify the total number of items in the list, 
-// and a rowRenderer prop to define how each item should be rendered.
-// ################  Cell Measurer #############
-// The CellMeasurer component is used within the rowRenderer function 
-// to measure the dimensions of each item in the list. 
-// It calculates the height and width of each cell and provides this information to the List component, 
-// allowing it to efficiently render the list with variable-sized items.

package/dist/components/Dropdowns/comps/VirtualizedWrapper/styled.d.ts

@@ -1 +0,0 @@
-export const StyledOptionsShellWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/Dropdowns/comps/VirtualizedWrapper/styled.js

@@ -1,45 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledOptionsShellWrapper = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-var mixins_1 = require("../../../../themes/mixins");
-exports.StyledOptionsShellWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    \n    width: 100%;\n    \n    ", " {\n        width: 36rem;\n    }\n    height: ", ";\n\n"], ["\n    \n    width: 100%;\n    \n    ", " {\n        width: 36rem;\n    }\n    height: ", ";\n\n"])), (0, mixins_1.mediaQuery)("md"), function (_a) {
-    var lightboxHeight = _a.lightboxHeight;
-    switch (lightboxHeight) {
-        case 'large':
-            return '33rem';
-        case 'small':
-            return '20rem';
-        case 'medium':
-        default:
-            return '24rem';
-    }
-});
-var templateObject_1;