oolib 2.168.2 → 2.168.4

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

@@ -45,6 +45,40 @@ var ModalHeaderStyle2_1 = require("./comps/ModalHeaderStyle2");
 var styled_1 = require("./styled");
 var Buttons_1 = require("../../Buttons");
 var Divider_1 = require("../../Divider");
+var useFreezePageBehind = function () {
+    (0, react_1.useEffect)(function () {
+        // Store original values
+        var originalStyle = window.getComputedStyle(document.body);
+        var originalOverflow = originalStyle.overflow;
+        var originalPosition = originalStyle.position;
+        var originalWidth = originalStyle.width;
+        var originalHeight = originalStyle.height;
+        var originalTop = document.body.style.top;
+        // Get current scroll position
+        var scrollY = window.scrollY;
+        // Apply multiple techniques to prevent scrolling
+        document.body.style.overflow = 'hidden';
+        document.body.style.position = 'fixed';
+        document.body.style.width = '100%';
+        document.body.style.height = '100%';
+        document.body.style.top = "-".concat(scrollY, "px");
+        // Touch events backup for iOS
+        var preventDefault = function (e) { return e.preventDefault(); };
+        document.addEventListener('touchmove', preventDefault, { passive: false });
+        return function () {
+            // Restore original styles
+            document.body.style.overflow = originalOverflow;
+            document.body.style.position = originalPosition;
+            document.body.style.width = originalWidth;
+            document.body.style.height = originalHeight;
+            document.body.style.top = originalTop;
+            // Restore scroll position
+            window.scrollTo(0, scrollY);
+            // Remove touch event listener
+            document.removeEventListener('touchmove', preventDefault);
+        };
+    }, []);
+};
 /**
  * @component Renders a modal component with customizable title, content, and actions.
  *
@@ -67,26 +101,28 @@ 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];
-    (0, react_1.useEffect)(function () {
-        document.body.style.overflow = "hidden";
-        return function () { document.body.style.overflow = "unset"; };
-    }, []);
+    var _o = (0, react_1.useState)(endAnimPos), animPos = _o[0], setAnimPos = _o[1];
+    // useEffect(() => {
+    //   document.body.style.overflow = "hidden";
+    //   return () => { document.body.style.overflow = "unset" };
+    // }, []);
+    useFreezePageBehind();
     var genHeader = function () {
         var headerStyles = {
             style1: ModalHeaderStyle1_1.ModalHeaderStyle1,
             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

@@ -33,7 +33,7 @@ var themes_1 = require("../../../themes");
 var framer_motion_1 = require("framer-motion");
 var styled_components_1 = __importStar(require("styled-components"));
 var black_opacity80 = themes_1.colors.black_opacity80, white = themes_1.colors.white, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15;
-exports.StyledModalLargeBg = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  z-index: 999999999;\n  overflow-y: auto;\n  overflow-x: hidden;\n  ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"], ["\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  z-index: 999999999;\n  overflow-y: auto;\n  overflow-x: hidden;\n  ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
+exports.StyledModalLargeBg = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100vw;\n  height: 100dvh;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  z-index: 999999999;\n  overflow-y: auto;\n  overflow-x: hidden;\n  ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"], ["\n  width: 100vw;\n  height: 100dvh;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  z-index: 999999999;\n  overflow-y: auto;\n  overflow-x: hidden;\n  ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
 exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100dvh;\n"], ["\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100dvh;\n"])), black_opacity80);
 exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    /* min-height: 50dvh; */\n    max-height: 90dvh;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border-radius: 0.2rem;\n    margin: 0 auto;\n  }\n"], ["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    /* min-height: 50dvh; */\n    max-height: 90dvh;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border-radius: 0.2rem;\n    margin: 0 auto;\n  }\n"])), white, function (_a) {
     var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
@@ -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/Oolib/components/Dropdowns.stories.js

@@ -250,7 +250,8 @@ var Dropdowns = function (args) {
                             var _a;
                             return (__assign(__assign({}, prev), (_a = {}, _a[args.selection] = v, _a)));
                         });
-                    }, selectConfig: args.showIconInSelectArea ? ["display", "icon"] : args.showColorInSelectArea ? ["display", "color"] : ["display"], label: "Dropdown Component", sublabel: "Select single or multiple options in dropdown based on Selection Type", popOutOfOverflowHiddenParent: args.popOutOfOverflowHiddenParent }))))));
+                    }, selectConfig: args.showIconInSelectArea ? ["display", "icon"] : args.showColorInSelectArea ? ["display", "color"] : ["display"], label: "Dropdown Component", sublabel: "Select single or multiple options in dropdown based on Selection Type", popOutOfOverflowHiddenParent: args.popOutOfOverflowHiddenParent }))),
+            react_1.default.createElement("div", { style: { height: '1000px', background: 'red' } }))));
 };
 exports.Dropdowns = Dropdowns;
 // export const Button_Primary = (args) => (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.168.2",
+  "version": "2.168.4",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -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;