oolib 2.190.3 → 2.191.0

package/dist/v2/components/Dropdowns/comps/OptionsMulti/index.js

@@ -36,30 +36,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionsMulti = void 0;
 var react_1 = __importStar(require("react"));
 var OptionsShell_1 = require("../OptionsShell");
-var colors_1 = require("../../../../themes/colors");
 var useSetYOrientation_1 = require("../../utils/useSetYOrientation");
 var useKeyboardControl_1 = require("../../utils/useKeyboardControl");
-var NoOptionResultsComp_1 = require("../NoOptionResultsComp");
-var OptionContent_1 = require("../OptionContent");
-var styled_1 = require("../OptionsSingle/styled");
-var CheckboxButton_1 = require("../../../RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton");
-var Divider_1 = require("../../../Divider");
-var TextInputs_1 = require("../../../TextInputs");
-var Typo_1 = require("../../../../../components/Typo");
-var TextLoader_1 = require("../../../../../components/LoadersAndProgress/TextLoader");
-var greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white;
-var CheckboxButtonShell = function (_a) {
-    var children = _a.children, isSelected = _a.isSelected, invert = _a.invert;
-    return (react_1.default.createElement("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            position: "relative",
-        } },
-        react_1.default.createElement(react_1.Fragment, null,
-            react_1.default.createElement("div", { className: "OKE-Dropdown__checkboxClickArea" }),
-            react_1.default.createElement(CheckboxButton_1.CheckboxButton, { invert: invert, isSelected: isSelected, className: "OKE-Dropdown__checkboxClickArea-box" })),
-        children));
-};
+var List_1 = require("../../../List");
+var __1 = require("../../../../..");
+var getValue_1 = require("../../utils/getValue");
 var OptionsMulti = function (_a) {
     var 
     //from root
@@ -68,7 +49,7 @@ var OptionsMulti = function (_a) {
     relativeToRef = _a.relativeToRef, //the element that this lightbox is being rendered against. i.e top or bottom
     showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, handleSelect = _a.handleSelect, options = _a.options, isSearchable = _a.isSearchable, label = _a.label, optionsModalLabel = _a.optionsModalLabel, //label is just a fallback for optionsModalLabel. Don't know why both are needed
     searchString = _a.searchString, setSearchString = _a.setSearchString, SelectComp = _a.SelectComp, // for mobile
-    isTagsStyle = _a.isTagsStyle, genCreateTagButton = _a.genCreateTagButton, invert = _a.invert, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, searchbarPlaceholder = _a.searchbarPlaceholder, alignDropdown = _a.alignDropdown;
+    isTagsStyle = _a.isTagsStyle, genCreateTagButton = _a.genCreateTagButton, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, searchbarPlaceholder = _a.searchbarPlaceholder, alignDropdown = _a.alignDropdown, matchSelectInputWidth = _a.matchSelectInputWidth;
     //INIT ORIENTATION STATE AND CUSTOM HOOK
     var optionsRef = (0, react_1.useRef)(null);
     var yOrientation = (0, useSetYOrientation_1.useSetYOrientation)({
@@ -100,59 +81,20 @@ var OptionsMulti = function (_a) {
         searchString: searchString,
         id: id,
     }), scrollFocussedOpIntoView = _b.scrollFocussedOpIntoView, focussedOp = _b.focussedOp;
-    var opIsSelected = function (thisOpData) {
-        return value === null || value === void 0 ? void 0 : value.some(function (d) { return d.value === thisOpData.value; });
-    };
     var _c = (0, react_1.useState)(true), searchBarFocus = _c[0], setSearchBarFocus = _c[1];
     (0, react_1.useEffect)(function () {
         setSearchBarFocus(showOptions);
     }, [showOptions]);
-    var createOption = function (d) {
-        return isTagsStyle ? (react_1.default.createElement(OptionContent_1.OptionContent, { option: d, optionsClassName: optionsClassName, invert: invert })) : (react_1.default.createElement(CheckboxButtonShell, { invert: invert, isSelected: opIsSelected(d) },
-            react_1.default.createElement(OptionContent_1.OptionContent, { option: d, optionsClassName: optionsClassName, invert: invert, S: S })));
-    };
     var createSelectedOptions = function () {
-        return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && (react_1.default.createElement("div", { style: {
-                borderBottom: "1px solid ".concat(greyColor40),
-            } },
-            react_1.default.createElement(Typo_1.LABEL, { invert: invert, style: { padding: "2rem", paddingBottom: 0 }, color: colors_1.colors.greyColor70 }, "selected"),
-            selectedOptions.map(function (d) {
-                return (react_1.default.createElement(styled_1.StyledOption, { invert: invert, key: d.value, isSelected: opIsSelected(d), S: S, onClick: function (e) {
-                        if (!d.loading) {
-                            handleSelect(d);
-                            setSearchString("");
-                            setSearchBarFocus(true); //refocus on searchbar after select
-                        }
-                    }, 
-                    //this is important cuz if we dont, then the option will have the light blue background of the 'selected' state
-                    //is a bit hacky, but will do for now.
-                    style: { backgroundColor: invert ? colors_1.colors.greyColor90 : white } }, createOption(d)));
-            })));
+        return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { style: { padding: "0.4rem 0.8rem" } },
+                react_1.default.createElement(__1.UI_TAG, null, "Selected")),
+            react_1.default.createElement(List_1.List, { key: value, options: selectedOptions, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: handleSelect, setSearchString: setSearchString, optionsClassName: optionsClassName, setFocusSelectTagsInput: setFocusSelectTagsInput, S: S, isMulti: true, style: { padding: "0" }, disableShadow: true }),
+            react_1.default.createElement("div", { style: { margin: "0.4rem 0rem" } },
+                react_1.default.createElement(__1.Divider, { style: { borderBottom: "0.1rem solid ".concat(__1.colors2.grey20) } }))));
     };
-    var genSearchBar = function () { return (react_1.default.createElement("div", { style: {
-            position: "sticky",
-            top: 0,
-            zIndex: 1,
-            background: invert ? colors_1.colors.greyColor90 : colors_1.colors.white,
-        } },
-        react_1.default.createElement("div", { style: { padding: "1rem" }, onBlur: function () { return setSearchBarFocus(false); }, tabIndex: 0 },
-            react_1.default.createElement(TextInputs_1.TextInput, { placeholder: searchbarPlaceholder, forceFocus: searchBarFocus, invert: invert, type: "text", icon: "MagnifyingGlass", value: searchString, onChange: function (k, v) { return setSearchString(v); }, S: S })),
-        react_1.default.createElement(Divider_1.Divider, { invert: invert }))); };
-    return (react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, handleHideOptions: handleHideOptions, SelectComp: SelectComp, label: label, optionsModalLabel: optionsModalLabel, invert: invert, showDoneButton: true, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, relativeToRef: relativeToRef, S: S, alignDropdown: alignDropdown },
-        isSearchable && genSearchBar(),
-        !isTagsStyle && createSelectedOptions(),
-        options.length === 0 ? (react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })) : (options.map(function (d, i) {
-            return (react_1.default.createElement(styled_1.StyledOption, { key: d.value, invert: invert, isSelected: opIsSelected(d), isFocussed: focussedOp === i, className: "OKE-Dropdown__option", ref: function (el) {
-                    return focussedOp === i && el && scrollFocussedOpIntoView(el);
-                }, onClick: function (e) {
-                    if (!d.loading) {
-                        handleSelect(d);
-                        setSearchBarFocus(true);
-                        setSearchString("");
-                        setFocusSelectTagsInput && setFocusSelectTagsInput(true);
-                    }
-                }, S: S }, d.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : (createOption(d))));
-        })),
+    return (react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, handleHideOptions: handleHideOptions, SelectComp: SelectComp, label: label, optionsModalLabel: optionsModalLabel, showDoneButton: true, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, relativeToRef: relativeToRef, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth },
+        react_1.default.createElement(List_1.List, { options: options, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: handleSelect, optionsClassName: optionsClassName, S: S, grouped: (0, getValue_1.isGroupedData)(options), isMulti: true, disableShadow: true, isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, children: !isTagsStyle && createSelectedOptions() }),
         genCreateTagButton && genCreateTagButton(options)));
 };
 exports.OptionsMulti = OptionsMulti;

package/dist/v2/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/index.d.ts

@@ -1,7 +1,6 @@
-export function OptionsAnimateWrapper({ relativeToRef, showOptions, invert, yOrientation, fixPos, optionsAnchor, children, lightboxStyle, alignDropdown, optionsToggleAnimationDuration }: {
+export function OptionsAnimateWrapper({ relativeToRef, showOptions, yOrientation, fixPos, optionsAnchor, children, lightboxStyle, alignDropdown, optionsToggleAnimationDuration }: {
     relativeToRef: any;
     showOptions: any;
-    invert: any;
     yOrientation: any;
     fixPos: any;
     optionsAnchor: any;

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

@@ -51,7 +51,7 @@ var useStyleUpdateAfterToggleTransition_1 = require("../../../../../../../utils/
 var OptionsAnimateWrapper = function (_a) {
     var _b;
     var _c;
-    var relativeToRef = _a.relativeToRef, showOptions = _a.showOptions, invert = _a.invert, yOrientation = _a.yOrientation, fixPos = _a.fixPos, optionsAnchor = _a.optionsAnchor, children = _a.children, lightboxStyle = _a.lightboxStyle, alignDropdown = _a.alignDropdown, optionsToggleAnimationDuration = _a.optionsToggleAnimationDuration;
+    var relativeToRef = _a.relativeToRef, showOptions = _a.showOptions, yOrientation = _a.yOrientation, fixPos = _a.fixPos, optionsAnchor = _a.optionsAnchor, children = _a.children, lightboxStyle = _a.lightboxStyle, alignDropdown = _a.alignDropdown, optionsToggleAnimationDuration = _a.optionsToggleAnimationDuration;
     var selectCompRect = (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
     var viewportWidth = document.documentElement.clientWidth; // excludes scrollbar
     var optionsDisplay = (0, useStyleUpdateAfterToggleTransition_1.useStyleUpdateAfterToggleTransition)({
@@ -60,8 +60,8 @@ var OptionsAnimateWrapper = function (_a) {
         toggleState: showOptions,
         transitionDuration: optionsToggleAnimationDuration
     }).style;
-    var lightboxOffsetFromSelect = 6;
-    return (react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { invert: invert, showOptions: showOptions, optionsToggleAnimationDuration: optionsToggleAnimationDuration, style: __assign(__assign(__assign({}, (lightboxStyle || {})), { display: optionsDisplay, zIndex: 100000 }), (fixPos
+    var lightboxOffsetFromSelect = 4;
+    return (react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { showOptions: showOptions, optionsToggleAnimationDuration: optionsToggleAnimationDuration, style: __assign(__assign(__assign({}, (lightboxStyle || {})), { display: optionsDisplay, zIndex: 100000 }), (fixPos
             ? __assign(__assign({ position: "fixed", top: "".concat(fixPos.y - (yOrientation === "top" ? ((selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) + lightboxOffsetFromSelect) || -(lightboxOffsetFromSelect) : -(lightboxOffsetFromSelect)), "px") }, (alignDropdown === "right"
                 ? {
                     right: "".concat(viewportWidth - fixPos.right, "px")

package/dist/v2/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/styled.js

@@ -12,11 +12,14 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var mixins_1 = require("../../../../../../../themes/mixins");
 var themes_1 = require("../../../../../../themes");
 /** for lightbox shell */
-exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 'auto';\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width:'100%';\n  overflow: hidden;\n  ", ";\n  opacity: ", ";\n\n  //could be turned into a global\n  padding: 0 0.4rem;\n  background-color: ", ";\n  border-radius: 0.6rem;\n  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);\n"], ["\n  height: 'auto';\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width:'100%';\n  overflow: hidden;\n  ", ";\n  opacity: ", ";\n\n  //could be turned into a global\n  padding: 0 0.4rem;\n  background-color: ", ";\n  border-radius: 0.6rem;\n  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);\n"])), function (_a) {
+exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  /* width:100%; */\n  overflow: hidden;\n  ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n\n\n  background-color: ", ";\n  border-radius: 0.6rem;\n  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);\n"], ["\n  height: auto;\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  /* width:100%; */\n  overflow: hidden;\n  ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n\n\n  background-color: ", ";\n  border-radius: 0.6rem;\n  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);\n"])), function (_a) {
     var optionsToggleAnimationDuration = _a.optionsToggleAnimationDuration;
-    return (0, mixins_1.transition)("opacity ".concat(optionsToggleAnimationDuration / 1000, "s ease-out"));
+    return (0, mixins_1.transition)("opacity ".concat(optionsToggleAnimationDuration / 2000, "s ease-out"));
 }, function (_a) {
     var showOptions = _a.showOptions;
     return showOptions ? '1' : '0';
+}, function (_a) {
+    var showOptions = _a.showOptions;
+    return showOptions ? 'auto' : 'none';
 }, themes_1.colors.white);
 var templateObject_1;

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

@@ -34,9 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionsShell = void 0;
-var framer_motion_1 = require("framer-motion");
 var react_1 = __importStar(require("react"));
-var themes_1 = require("../../../../themes");
 var Buttons_1 = require("../../../Buttons");
 var styled_1 = require("./styled");
 var OptionsAnimateWrapper_1 = require("./comps/OptionsAnimateWrapper");
@@ -44,17 +42,19 @@ var styled_components_1 = require("styled-components");
 var usePopOutOfOverflowHiddenParent_1 = require("../../../../../utils/usePopOutOfOverflowHiddenParent");
 var _EXPORTS_1 = require("../../../../../utils/_EXPORTS");
 var mixins_1 = require("../../../../../themes/mixins");
+var themes_1 = require("../../../../themes");
 var DefaultMobileShell = function (_a) {
     var children = _a.children;
     return (react_1.default.createElement("div", { style: { top: 0, left: 0, height: '100dvh', width: '100dvw', position: 'fixed', zIndex: '100000000', background: 'rgba(0,0,0,0.5)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' } }, children));
 };
 exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
-    var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, invert = _a.invert, showDoneButton = _a.showDoneButton, _b = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _b === void 0 ? false : _b, relativeToRef = _a.relativeToRef, S = _a.S, alignDropdown = _a.alignDropdown;
+    var _b;
+    var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, showDoneButton = _a.showDoneButton, _c = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _c === void 0 ? false : _c, relativeToRef = _a.relativeToRef, S = _a.S, alignDropdown = _a.alignDropdown, matchSelectInputWidth = _a.matchSelectInputWidth;
     var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
     var isDesktop = screenWidth >= (0, mixins_1.getBreakPoint)("sm");
     var currentTheme = (0, styled_components_1.useTheme)();
     var MobileShell = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.MobileShell) || DefaultMobileShell;
-    var _c = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _c.fixPos, applyFixedPos = _c.applyFixedPos, removeFixedPos = _c.removeFixedPos, trackerRef = _c.trackerRef;
+    var _d = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _d.fixPos, applyFixedPos = _d.applyFixedPos, removeFixedPos = _d.removeFixedPos, trackerRef = _d.trackerRef;
     (0, react_1.useEffect)(function () {
         if (popOutOfOverflowHiddenParent) {
             if (showOptions)
@@ -66,36 +66,22 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
     var optionsToggleAnimationDuration = 300;
     return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
         popOutOfOverflowHiddenParent && react_1.default.createElement("div", { ref: trackerRef }),
-        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, { options: options, optionsRef: ref, relativeToRef: relativeToRef, showOptions: showOptions, invert: invert, yOrientation: yOrientation, fixPos: fixPos, optionsAnchor: optionsAnchor, children: children, lightboxStyle: lightboxStyle, alignDropdown: alignDropdown, optionsToggleAnimationDuration: optionsToggleAnimationDuration },
-            react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: "StyledOptionsWrapper", showOptions: showOptions, optionsToggleAnimationDuration: optionsToggleAnimationDuration, ref: ref, invert: invert, lightboxHeight: lightboxHeight, 
+        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, { options: options, optionsRef: ref, relativeToRef: relativeToRef, showOptions: showOptions, yOrientation: yOrientation, fixPos: fixPos, optionsAnchor: optionsAnchor, children: children, lightboxStyle: lightboxStyle, alignDropdown: alignDropdown, optionsToggleAnimationDuration: optionsToggleAnimationDuration },
+            react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: "StyledOptionsWrapper", showOptions: showOptions, optionsToggleAnimationDuration: optionsToggleAnimationDuration, ref: ref, lightboxHeight: lightboxHeight, matchSelectInputWidth: matchSelectInputWidth, selectRefwidth: (_b = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width, 
                 // className={className}
                 style: {
                 // position: "absolute",
                 // bottom: yOrientation === "top" ? undefined : 0,
                 // top: yOrientation === "top" ? 0 : undefined,
-                } }, children)))) : (
-    // <AnimatePresence>
-    //   {showOptions ? (
-    //     <Modal
-    //       fitToContentHeight
-    //       title={optionsModalLabel || label}
-    //       onClose={handleHideOptions}
-    //       invert={invert}
-    //       S={S}
-    //       dynamicHeaderHeight
-    //     >
-    react_1.default.createElement(react_1.Fragment, null, showOptions ? (react_1.default.createElement(MobileShell, { onClose: handleHideOptions, title: optionsModalLabel || label },
+                } }, children)))) : (react_1.default.createElement(react_1.Fragment, null, showOptions ? (react_1.default.createElement(MobileShell, { onClose: handleHideOptions, title: optionsModalLabel || label },
         SelectComp && SelectComp,
-        react_1.default.createElement(styled_1.StyledModalOptionsWrapper, { invert: invert, ref: ref }, children),
+        react_1.default.createElement(styled_1.StyledModalOptionsWrapper, { ref: ref }, children),
         showDoneButton && (react_1.default.createElement("div", { style: {
-                backgroundColor: invert ? themes_1.colors.greyColor90 : themes_1.colors.white,
-                padding: "1rem 2rem",
+                backgroundColor: themes_1.colors.white,
+                padding: "1rem 0.8rem",
                 position: "sticky",
                 bottom: "0",
+                width: "100%"
             } },
-            react_1.default.createElement(Buttons_1.ButtonPrimary, { children: "Done", width: "100%", onClick: handleHideOptions, S: S }))))) : null)
-    //     </Modal>
-    //   ) : null}
-    // </AnimatePresence>
-    );
+            react_1.default.createElement(Buttons_1.ButtonPrimary, { children: "Done", style: { width: "100%" }, onClick: handleHideOptions, S: S }))))) : null));
 });

package/dist/v2/components/Dropdowns/comps/OptionsShell/styled.js

@@ -23,9 +23,12 @@ exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateOb
     var isOpen = _a.isOpen;
     return isOpen ? '1px' : 0;
 });
-exports.StyledOptionsWrapper = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    z-index: 100000; //show remove if we do animation thing\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    width: 100%;\n    min-width: max-content;\n    max-width: 36rem;\n    overflow: auto;\n    margin-top: ", ";\n    ", "\n    max-height: ", ";\n"], ["\n    z-index: 100000; //show remove if we do animation thing\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    width: 100%;\n    min-width: max-content;\n    max-width: 36rem;\n    overflow: auto;\n    margin-top: ", ";\n    ", "\n    max-height: ", ";\n"
+exports.StyledOptionsWrapper = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    z-index: 100000; //show remove if we do animation thing\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    width: 100%;\n    min-width: ", ";\n    max-width: 36rem;\n    overflow: auto;\n    margin-top: ", ";\n    ", "\n    max-height: ", ";\n\n    ::-webkit-scrollbar { \n      width: 0.5rem;// for vertical bars\n      height: 0.2rem; //for horizontal bars \n    }\n    \n    ::-webkit-scrollbar-track {\n        background-color: ", ";\n    }\n    \n    ::-webkit-scrollbar-thumb {\n      background-color: ", ";\n      border-radius: 0.4rem;\n    }\n    \n    ::-webkit-scrollbar-thumb:hover {\n        background-color: ", ";\n      \n    }\n    \n    ", "{\n      ::-webkit-scrollbar { \n        width: 0.5rem;\n        height: 0.7rem;\n      }\n      ::-webkit-scrollbar-thumb {\n        border-radius: 0.5rem;\n      }\n    }\n"], ["\n    z-index: 100000; //show remove if we do animation thing\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    width: 100%;\n    min-width: ", ";\n    max-width: 36rem;\n    overflow: auto;\n    margin-top: ", ";\n    ", "\n    max-height: ", ";\n\n    ::-webkit-scrollbar { \n      width: 0.5rem;// for vertical bars\n      height: 0.2rem; //for horizontal bars \n    }\n    \n    ::-webkit-scrollbar-track {\n        background-color: ", ";\n    }\n    \n    ::-webkit-scrollbar-thumb {\n      background-color: ", ";\n      border-radius: 0.4rem;\n    }\n    \n    ::-webkit-scrollbar-thumb:hover {\n        background-color: ", ";\n      \n    }\n    \n    ", "{\n      ::-webkit-scrollbar { \n        width: 0.5rem;\n        height: 0.7rem;\n      }\n      ::-webkit-scrollbar-thumb {\n        border-radius: 0.5rem;\n      }\n    }\n"
     /** for modal shell */
 ])), function (_a) {
+    var matchSelectInputWidth = _a.matchSelectInputWidth, selectRefwidth = _a.selectRefwidth;
+    return matchSelectInputWidth ? "".concat(selectRefwidth, "px") : "max-content";
+}, function (_a) {
     var showOptions = _a.showOptions;
     return showOptions ? 'unset' : '-2rem';
 }, function (_a) {
@@ -35,17 +38,14 @@ exports.StyledOptionsWrapper = styled_components_1.default.ul(templateObject_2 |
     var lightboxHeight = _a.lightboxHeight;
     switch (lightboxHeight) {
         case 'large':
-            return '33rem';
+            return '40rem';
         case 'small':
             return '20rem';
         case 'medium':
         default:
-            return '24rem';
+            return '30rem';
     }
-});
+}, themes_1.colors.grey5, themes_1.colors.grey40, themes_1.colors.grey80, (0, mixins_1.mediaQuery)('md'));
 /** for modal shell */
-exports.StyledModalOptionsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding-left: 0;\n  cursor: pointer;\n  background-color: ", ";\n  width: 100%;\n  min-width: max-content;\n  min-width: -moz-max-content;\n  /* overflow: auto; */\n"], ["\n  position: relative;\n  padding-left: 0;\n  cursor: pointer;\n  background-color: ", ";\n  width: 100%;\n  min-width: max-content;\n  min-width: -moz-max-content;\n  /* overflow: auto; */\n"])), function (_a) {
-    var invert = _a.invert;
-    return invert ? themes_1.colors.greyColor90 : themes_1.colors.white;
-});
+exports.StyledModalOptionsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding-left: 0;\n  cursor: pointer;\n  background-color: ", ";\n  width: 100%;\n  min-width: max-content;\n  min-width: -moz-max-content;\n  /* overflow: auto; */\n"], ["\n  position: relative;\n  padding-left: 0;\n  cursor: pointer;\n  background-color: ", ";\n  width: 100%;\n  min-width: max-content;\n  min-width: -moz-max-content;\n  /* overflow: auto; */\n"])), themes_1.colors.white);
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/v2/components/Dropdowns/comps/OptionsSingle/index.d.ts

@@ -1,4 +1,4 @@
-export function OptionsSingle({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, genCreateTagButton, invert, popOutOfOverflowHiddenParent, enableUseSetYOrientation, S, observerRef, searchbarPlaceholder, alignDropdown }: {
+export function OptionsSingle({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, genCreateTagButton, popOutOfOverflowHiddenParent, enableUseSetYOrientation, S, observerRef, searchbarPlaceholder, alignDropdown, matchSelectInputWidth, }: {
     lightboxHeight: any;
     lightboxStyle: any;
     optionsAnchor: any;
@@ -17,12 +17,12 @@ export function OptionsSingle({ lightboxHeight, lightboxStyle, optionsAnchor, va
     setSearchString: any;
     SelectComp: any;
     genCreateTagButton: any;
-    invert: any;
     popOutOfOverflowHiddenParent: any;
     enableUseSetYOrientation?: boolean;
     S: any;
     observerRef: any;
-    searchbarPlaceholder: any;
+    searchbarPlaceholder?: string;
     alignDropdown: any;
+    matchSelectInputWidth: any;
 }): React.JSX.Element;
 import React from "react";

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

@@ -35,16 +35,11 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionsSingle = void 0;
 var react_1 = __importStar(require("react"));
-var NoOptionResultsComp_1 = require("../NoOptionResultsComp");
-var OptionContent_1 = require("../OptionContent");
 var OptionsShell_1 = require("../OptionsShell");
-var styled_1 = require("./styled");
-var themes_1 = require("../../../../themes");
-var Divider_1 = require("../../../Divider");
-var TextInputs_1 = require("../../../TextInputs");
 var useKeyboardControl_1 = require("../../utils/useKeyboardControl");
 var useSetYOrientation_1 = require("../../utils/useSetYOrientation");
-var TextLoader_1 = require("../../../../../components/LoadersAndProgress/TextLoader");
+var List_1 = require("../../../List");
+var getValue_1 = require("../../utils/getValue");
 /**
  * if used independently, must be used inside a 'position: relative/absolute' div.
  */
@@ -55,11 +50,8 @@ var OptionsSingle = function (_a) {
     //from Dropdown
     relativeToRef = _a.relativeToRef, //the element that this lightbox is being rendered against. i.e top or bottom
     showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, handleSelect = _a.handleSelect, options = _a.options, isSearchable = _a.isSearchable, label = _a.label, optionsModalLabel = _a.optionsModalLabel, //label is just a fallback for optionsModalLabel. Don't know why both are needed
-    searchString = _a.searchString, setSearchString = _a.setSearchString, SelectComp = _a.SelectComp, genCreateTagButton = _a.genCreateTagButton, invert = _a.invert, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, _b = _a.enableUseSetYOrientation, enableUseSetYOrientation = _b === void 0 ? true : _b, // if using this component standalone, this should be set to false ( if relativeToRef is not being passed thru)
-    S = _a.S, observerRef = _a.observerRef, searchbarPlaceholder = _a.searchbarPlaceholder, alignDropdown = _a.alignDropdown
-    //disabled only with this is being used for the RTEEmbedLightbox. Also this might be temp.
-    //ensure this is set to false, if you are not passing a 'relativeToRef'
-    ;
+    searchString = _a.searchString, setSearchString = _a.setSearchString, SelectComp = _a.SelectComp, genCreateTagButton = _a.genCreateTagButton, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, _b = _a.enableUseSetYOrientation, enableUseSetYOrientation = _b === void 0 ? true : _b, // if using this component standalone, this should be set to false ( if relativeToRef is not being passed thru)
+    S = _a.S, observerRef = _a.observerRef, _c = _a.searchbarPlaceholder, searchbarPlaceholder = _c === void 0 ? "Search" : _c, alignDropdown = _a.alignDropdown, matchSelectInputWidth = _a.matchSelectInputWidth;
     //INIT ORIENTATION STATE AND CUSTOM HOOK
     var optionsRef = (0, react_1.useRef)(null);
     var yOrientation = (0, useSetYOrientation_1.useSetYOrientation)({
@@ -68,7 +60,7 @@ var OptionsSingle = function (_a) {
         relativeToRef: relativeToRef,
         enabled: enableUseSetYOrientation,
     }).yOrientation;
-    var _c = (0, useKeyboardControl_1.useKeyboardControl)({
+    var _d = (0, useKeyboardControl_1.useKeyboardControl)({
         showOptions: showOptions,
         optionsWrapperRef: optionsRef,
         handleHideOptions: handleHideOptions,
@@ -76,30 +68,14 @@ var OptionsSingle = function (_a) {
         options: options,
         searchString: searchString,
         id: id,
-    }), scrollFocussedOpIntoView = _c.scrollFocussedOpIntoView, focussedOp = _c.focussedOp;
-    var _d = (0, react_1.useState)(true), searchBarFocus = _d[0], setSearchBarFocus = _d[1];
+    }), scrollFocussedOpIntoView = _d.scrollFocussedOpIntoView, focussedOp = _d.focussedOp;
+    var _e = (0, react_1.useState)(true), searchBarFocus = _e[0], setSearchBarFocus = _e[1];
     (0, react_1.useEffect)(function () {
         setSearchBarFocus(showOptions);
     }, [showOptions]);
-    var genSearchBar = function () { return (react_1.default.createElement("div", { style: {
-            position: "sticky",
-            top: 0,
-            zIndex: 1,
-            background: invert ? themes_1.colors.greyColor90 : themes_1.colors.white,
-        } },
-        react_1.default.createElement("div", { style: { padding: "1rem" } },
-            react_1.default.createElement(TextInputs_1.TextInput, { placeholder: searchbarPlaceholder, invert: invert, forceFocus: searchBarFocus, type: "text", icon: "MagnifyingGlass", value: searchString, onChange: function (k, v) { return setSearchString(v); }, S: S })),
-        react_1.default.createElement(Divider_1.Divider, { invert: invert }))); };
     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(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 }, 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 })))); }))),
+        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, relativeToRef: relativeToRef, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth, S: S },
+            react_1.default.createElement(List_1.List, { options: options, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: handleSelect, optionsClassName: optionsClassName, S: S, observerRef: observerRef, grouped: (0, getValue_1.isGroupedData)(options), isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus }),
             genCreateTagButton && genCreateTagButton(options))));
 };
 exports.OptionsSingle = OptionsSingle;

package/dist/v2/components/Dropdowns/comps/OptionsSingle/styled.js

@@ -39,26 +39,27 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledOption = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-var themes_1 = require("../../../../themes");
 var getDynamicColors_1 = require("../../../../themes/utils/getDynamicColors");
-var __1 = require("../../../../..");
-exports.StyledOption = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    padding: ", ";\n    border-radius: 0.4rem;\n    ", "\n    \n\n    background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", "\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", "\n      } \n\n    &:hover{\n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", ";\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", ";\n      } \n    }\n\n   \n\n    &:first-of-type {\n      margin-top: 0.4rem;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0.4rem;\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-right: 1rem;\n      flex-shrink: 0;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    padding: ", ";\n    border-radius: 0.4rem;\n    ", "\n    \n\n    background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", "\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", "\n      } \n\n    &:hover{\n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", ";\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", ";\n      } \n    }\n\n   \n\n    &:first-of-type {\n      margin-top: 0.4rem;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0.4rem;\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-right: 1rem;\n      flex-shrink: 0;\n    }\n"])), function (_a) {
+var themes_1 = require("../../../../themes");
+exports.StyledOption = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    padding: ", ";\n    border-radius: 0.4rem;\n    gap: 20rem;\n    ", "\n    \n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", "\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", "\n      } \n\n    &:hover{\n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", ";\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", ";\n      } \n    }\n\n   \n\n    &:first-of-type {\n      margin-top: 0.4rem;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0.4rem;\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-top: 0.2rem;\n      flex-shrink: 0;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    padding: ", ";\n    border-radius: 0.4rem;\n    gap: 20rem;\n    ", "\n    \n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", "\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", "\n      } \n\n    &:hover{\n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", ";\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", ";\n      } \n    }\n\n   \n\n    &:first-of-type {\n      margin-top: 0.4rem;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0.4rem;\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-top: 0.2rem;\n      flex-shrink: 0;\n    }\n"])), function (_a) {
     var S = _a.S;
-    return S ? '0.5rem 2rem' : ' 1rem';
+    return S ? '0.5rem 0.8rem' : '0.8rem';
 }, function (_a) {
     var S = _a.S;
     return !S
         ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n       \n        min-height: 3.8rem;\n      "], ["\n       \n        min-height: 3.8rem;\n      "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      /* height: 3rem; */\n      "], ["\n      /* height: 3rem; */\n      "])));
 }, function (_a) {
-    var isFocussed = _a.isFocussed, isSelected = _a.isSelected, theme = _a.theme, invert = _a.invert;
-    return isSelected
-        ? (invert ? themes_1.colors.greyColor70 : (0, getDynamicColors_1.getSecondaryContainer)(theme === null || theme === void 0 ? void 0 : theme.colors))
-        : isFocussed
-            ? (invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5)
-            : (invert ? themes_1.colors.greyColor90 : themes_1.colors.white);
-}, __1.colors2.grey80, __1.colors2.grey80, function (_a) {
+    var isFocussed = _a.isFocussed, isSelected = _a.isSelected, theme = _a.theme;
+    if (isSelected) {
+        var secondaryContainer = (0, getDynamicColors_1.getSecondaryContainer)(theme === null || theme === void 0 ? void 0 : theme.colors);
+        return "".concat(secondaryContainer, " !important"); // 66 in hex is 40% opacity
+    }
+    else {
+        return isFocussed ? themes_1.colors.grey5 : themes_1.colors.white;
+    }
+}, themes_1.colors.grey80, themes_1.colors.grey80, function (_a) {
     var theme = _a.theme;
-    return (0, getDynamicColors_1.getSecondaryContainer)(theme === null || theme === void 0 ? void 0 : theme.colors);
+    return "".concat((0, getDynamicColors_1.getSecondaryContainer)(theme === null || theme === void 0 ? void 0 : theme.colors), "66");
 }, function (_a) {
     var theme = _a.theme;
     return (0, getDynamicColors_1.getOnSecondary)(theme === null || theme === void 0 ? void 0 : theme.colors);

package/dist/v2/components/Dropdowns/comps/SearchBar/index.d.ts

@@ -0,0 +1,8 @@
+export function SearchBar({ searchbarPlaceholder, searchBarFocus, searchString, setSearchString, setSearchBarFocus }: {
+    searchbarPlaceholder: any;
+    searchBarFocus: any;
+    searchString: any;
+    setSearchString: any;
+    setSearchBarFocus: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/v2/components/Dropdowns/comps/SearchBar/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBar = void 0;
+var react_1 = __importDefault(require("react"));
+var TextInputs_1 = require("../../../TextInputs");
+var SearchBar = function (_a) {
+    var searchbarPlaceholder = _a.searchbarPlaceholder, searchBarFocus = _a.searchBarFocus, searchString = _a.searchString, setSearchString = _a.setSearchString, setSearchBarFocus = _a.setSearchBarFocus;
+    return (react_1.default.createElement("div", { style: {
+            position: "sticky",
+            top: 0,
+            zIndex: 1,
+            padding: "4px 0",
+            background: "white"
+        }, onBlur: function () { return setSearchBarFocus(false); }, tabIndex: 0 },
+        react_1.default.createElement("div", { style: { paddingBottom: "4px" } },
+            react_1.default.createElement(TextInputs_1.TextInput, { placeholder: searchbarPlaceholder, forceFocus: searchBarFocus, type: "text", icon: "MagnifyingGlass", value: searchString, onChange: function (k, v) { return setSearchString(v); }, S: true }))));
+};
+exports.SearchBar = SearchBar;

package/dist/v2/components/Dropdowns/comps/SelectDropdown/index.d.ts

@@ -1,5 +1,4 @@
-export function SelectDropdown({ invert, value, placeholder, genCustomSelectComp, selectClassName, showOptions, disableSelectTextUpdate, selectConfig, selectStyleOverride, S, disabled, }: {
-    invert: any;
+export function SelectDropdown({ value, placeholder, genCustomSelectComp, selectClassName, showOptions, disableSelectTextUpdate, selectConfig, variant, selectStyleOverride, S, disabled, }: {
     value: any;
     placeholder: any;
     genCustomSelectComp: any;
@@ -7,6 +6,7 @@ export function SelectDropdown({ invert, value, placeholder, genCustomSelectComp
     showOptions: any;
     disableSelectTextUpdate: any;
     selectConfig?: string;
+    variant: any;
     selectStyleOverride: any;
     S: any;
     disabled: any;

package/dist/v2/components/Dropdowns/comps/SelectDropdown/index.js

@@ -10,17 +10,16 @@ var Caret_1 = require("../Caret");
 var genIcon_1 = require("../../utils/genIcon");
 var styled_1 = require("./styled");
 var genColor_1 = require("../../utils/genColor");
-var Typo_1 = require("../../../../../components/Typo");
 var Typo2_1 = require("../../../Typo2");
 var SelectDropdown = function (_a) {
     var 
     //from root
-    invert = _a.invert, value = _a.value, placeholder = _a.placeholder, genCustomSelectComp = _a.genCustomSelectComp, selectClassName = _a.selectClassName, 
+    value = _a.value, placeholder = _a.placeholder, genCustomSelectComp = _a.genCustomSelectComp, selectClassName = _a.selectClassName, 
     //from Dropdown
     showOptions = _a.showOptions, 
     //used only for filters, where we dont remove the placeholder even when an option is selected, instead we sustain the blue underline
     // && header where we dont update the menu title if one of its options is selected
-    disableSelectTextUpdate = _a.disableSelectTextUpdate, _b = _a.selectConfig, selectConfig = _b === void 0 ? "all" : _b, selectStyleOverride = _a.selectStyleOverride, //used curr only in access control table & header dropdowns
+    disableSelectTextUpdate = _a.disableSelectTextUpdate, _b = _a.selectConfig, selectConfig = _b === void 0 ? "all" : _b, variant = _a.variant, selectStyleOverride = _a.selectStyleOverride, //used curr only in access control table & header dropdowns
     S = _a.S, disabled = _a.disabled;
     var dropdownSelectText = (0, setDropdownSelectText_1.setDropdownSelectText)({
         placeholder: placeholder,
@@ -35,21 +34,20 @@ var SelectDropdown = function (_a) {
         return selectConfig.indexOf(elem) !== -1 ? true : false;
     };
     var TypoComp = S ? Typo2_1.UI_BODY_SM_DF : Typo2_1.UI_BODY_SM_DF;
-    var genSelectComp = function () { return (react_1.default.createElement(styled_1.StyledSelectWrapper, { tabIndex: 0, invert: invert, S: S, isPlaceholder: !value, disabled: disabled, style: selectStyleOverride },
-        react_1.default.createElement("div", { style: { zIndex: 1 } },
-            react_1.default.createElement("div", { style: { display: "flex", gap: "1rem", alignItems: "center" } },
-                showElem('color') && (0, genColor_1.genColor)({ color: value === null || value === void 0 ? void 0 : value.color }),
-                showElem("icon") && (0, genIcon_1.genIcon)({ icon: value === null || value === void 0 ? void 0 : value.icon, invert: invert, S: S }),
-                showElem("display") && (react_1.default.createElement(TypoComp
+    var genSelectComp = function () { return (react_1.default.createElement(styled_1.StyledSelectWrapper, { tabIndex: 0, S: S, isPlaceholder: (Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.length) < 1) || !value, disabled: disabled, style: selectStyleOverride, variant: variant, showOptions: showOptions, id: "StyledSelectWrapper" },
+        react_1.default.createElement("div", { style: { display: "flex", gap: "1rem", alignItems: "center", zIndex: 1 } },
+            showElem('color') && (0, genColor_1.genColor)({ color: value === null || value === void 0 ? void 0 : value.color }),
+            showElem("icon") && (0, genIcon_1.genIcon)({ icon: value === null || value === void 0 ? void 0 : value.icon, S: S }),
+            showElem("display") && (react_1.default.createElement(TypoComp
+            // semibold={
+            //   dropdownSelectText.desc && showElem("desc") ? true : undefined
+            // }
+            , { 
                 // semibold={
                 //   dropdownSelectText.desc && showElem("desc") ? true : undefined
                 // }
-                , { 
-                    // semibold={
-                    //   dropdownSelectText.desc && showElem("desc") ? true : undefined
-                    // }
-                    className: "".concat(selectClassName || "", " ").concat(!value && placeholder) }, dropdownSelectText.display)))),
-        react_1.default.createElement(Caret_1.Caret, { showOptions: showOptions, invert: invert, disabled: disabled }))); };
+                className: "".concat(selectClassName || "", " ").concat(!value && placeholder) }, dropdownSelectText.display))),
+        react_1.default.createElement(Caret_1.Caret, { showOptions: showOptions, disabled: disabled }))); };
     return genCustomSelectComp ? genCustomSelectComp() : genSelectComp();
 };
 exports.SelectDropdown = SelectDropdown;

package/dist/v2/components/Dropdowns/comps/SelectDropdown/styled.js

@@ -40,23 +40,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledSelectWrapper = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../../../themes");
-var utilsOolib_1 = require("../../../../../utilsOolib");
-var mixins_1 = require("../../../../../themes/mixins");
 var globalStyles_1 = require("../../../../themes/globalStyles");
-exports.StyledSelectWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  min-height: 4rem;\n  \n  \n\n  ", "\n  ", "\n\n  ", ";\n  ", "\n", "\n  ", "\n  ", "\n    ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  min-height: 4rem;\n  \n  \n\n  ", "\n  ", "\n\n  ", ";\n  ", "\n", "\n  ", "\n  ", "\n    ", "\n"])), function (_a) {
+exports.StyledSelectWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  min-height: 4rem;\n  \n  ", "\n  ", "\n\n  ", ";\n  \n  ", "\n  \n  ", "\n  ", ";\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  min-height: 4rem;\n  \n  ", "\n  ", "\n\n  ", ";\n  \n  ", "\n  \n  ", "\n  ", ";\n  ", "\n"])), function (_a) {
     var S = _a.S;
-    return S && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    min-height: auto;\n    height: 3rem;\n  "], ["\n    min-height: auto;\n    height: 3rem;\n  "])));
+    return S ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      min-height: auto;\n      height: 3.6rem;\n    "], ["\n      min-height: auto;\n      height: 3.6rem;\n    "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        min-height: auto;\n        height: 4.5rem;\n    "], ["\n        min-height: auto;\n        height: 4.5rem;\n    "])));
 }, function (_a) {
     var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    pointer-events: none;\n  "], ["\n    pointer-events: none;\n  "])));
+    return disabled && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    pointer-events: none;\n  "], ["\n    pointer-events: none;\n  "])));
 }, function (_a) {
     var isPlaceholder = _a.isPlaceholder;
     return isPlaceholder ? globalStyles_1.globalInputElemPlaceholderColor : globalStyles_1.globalInputElemTextColor;
-}, globalStyles_1.globalInputElemDisabledStyling_v2, globalStyles_1.globalInputElemPadding_v2, globalStyles_1.globalInputElemBaseBorderStyling_v2, function (_a) {
-    var disabled = _a.disabled;
-    return !disabled && globalStyles_1.globalInputElemHover_v2;
 }, function (_a) {
+    var variant = _a.variant;
+    return variant === "ghost" ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        border-radius: 6px;\n        &:hover {\n          background-color  : ", ";\n        }\n\n        ", "\n\n      "], ["\n        border-radius: 6px;\n        &:hover {\n          background-color  : ", ";\n        }\n\n        ", "\n\n      "])), themes_1.colors.grey10, function (_a) {
+        var showOptions = _a.showOptions;
+        return showOptions ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n             ", "\n          "], ["\n             ", "\n          "])), globalStyles_1.globalInputElemBaseBorderStyling_v2) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          \n          "], ["\n          \n          "])));
+    }) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        ", ";\n        ", ";\n      "], ["\n        ", ";\n        ", ";\n      "])), globalStyles_1.globalInputElemBaseBorderStyling_v2, globalStyles_1.globalInputElemHover_v2);
+}, globalStyles_1.globalInputElemDisabledStyling_v2, globalStyles_1.globalInputElemPadding_v2, function (_a) {
     var disabled = _a.disabled;
     return !disabled && globalStyles_1.globalInputElemFocused_v2;
 });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/v2/components/Dropdowns/comps/SelectTagsInput/index.d.ts

@@ -1,5 +1,4 @@
-export function SelectTagsInput({ invert, id, value, disabled, handleSelect, searchString, setSearchString, placeholder, setFocusSelectTagsInput, focusSelectTagsInput, single_multi, showOptions, S, tagColor, style }: {
-    invert: any;
+export function SelectTagsInput({ id, value, disabled, handleSelect, searchString, setSearchString, placeholder, setFocusSelectTagsInput, focusSelectTagsInput, single_multi, showOptions, S, tagColor, style }: {
     id: any;
     value: any;
     disabled: any;