@jars-labs/jars-components 1.0.9 → 1.0.11

package/dist/{index-Bsn_EcYJ.js → index-COG80HZJ.js}

@@ -85,8 +85,7 @@ var Icon = function (_a) {
                 var parent_1 = svgRef.current.parentElement;
                 var isParentContent = false;
                 while (parent_1) {
-                    if (parent_1.classList.contains('mantine-Accordion-root') ||
-                        parent_1.classList.contains('mantine-Tabs-panel')) {
+                    if (parent_1.classList.contains('mantine-Accordion-root')) {
                         isParentContent = true;
                         break;
                     }
@@ -161,7 +160,7 @@ var Animation = function (_a) {
     var refVector = useRef(null);
     var _b = useState(null), lottie = _b[0], setLottie = _b[1];
     useEffect(function () {
-        import('./lottie-uxb8tIPw.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
+        import('./lottie-BBj9Bhzx.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
     }, []);
     useEffect(function () {
         if (lottie && refVector.current) {
@@ -338,7 +337,7 @@ var Info = function (props) {
     return (jsxs(Icon, __assign({}, props, { children: [jsx("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M11.999 8C11.861 8 11.749 8.112 11.75 8.25C11.75 8.388 11.862 8.5 12 8.5C12.138 8.5 12.25 8.388 12.25 8.25C12.25 8.112 12.138 8 11.999 8" }), jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 21V21C7.029 21 3 16.971 3 12V12C3 7.029 7.029 3 12 3V3C16.971 3 21 7.029 21 12V12C21 16.971 16.971 21 12 21Z", clipRule: "evenodd" }), jsx("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 12V17" })] })));
 };
 
-var styles$j = {"text":"Text-module_text__3xRq3","h1":"Text-module_h1__RkLfx","h2":"Text-module_h2__fAm7L","h3":"Text-module_h3__o11c2","h4":"Text-module_h4__RIwZg","m":"Text-module_m__nlfmp","s":"Text-module_s__t9q3d","xs":"Text-module_xs__ZU2jV","xxs":"Text-module_xxs__hmZHQ","bold":"Text-module_bold__N75tZ","medium":"Text-module_medium__Q8kf4","regular":"Text-module_regular__-EdPk"};
+var styles$j = {"text":"Text-module_text__3xRq3","h1":"Text-module_h1__RkLfx","h2":"Text-module_h2__fAm7L","h3":"Text-module_h3__o11c2","h4":"Text-module_h4__RIwZg","m":"Text-module_m__nlfmp","s":"Text-module_s__t9q3d","xs":"Text-module_xs__ZU2jV","xxs":"Text-module_xxs__hmZHQ","bold":"Text-module_bold__N75tZ","medium":"Text-module_medium__Q8kf4","regular":"Text-module_regular__-EdPk","title0":"Text-module_title0__NvhiO","title0-mobile":"Text-module_title0-mobile__y1sTi","title1":"Text-module_title1__Oa54p","title1-500":"Text-module_title1-500__Md7EO","title1-500-mobile":"Text-module_title1-500-mobile__Y78Lk","l-medium":"Text-module_l-medium__U22ra","l-regular":"Text-module_l-regular__ihWaL","xxxl-medium":"Text-module_xxxl-medium__O3TD0","xxl-medium":"Text-module_xxl-medium__DWGly","xl-medium":"Text-module_xl-medium__cobLu","base-regular":"Text-module_base-regular__TwXtn","base-medium":"Text-module_base-medium__-4t3q","m-regular":"Text-module_m-regular__Lx6ru","m-medium":"Text-module_m-medium__upYpJ","s-light":"Text-module_s-light__oSwjg","xs-light":"Text-module_xs-light__rLaCR","xxs-normal":"Text-module_xxs-normal__TQEfr","xxs-light":"Text-module_xxs-light__4hw2o","xxs-bold":"Text-module_xxs-bold__LiO7o","title2":"Text-module_title2__vmM-P","title3":"Text-module_title3__r5irn","headline":"Text-module_headline__bgILl","headline-xxl":"Text-module_headline-xxl__uINnx","subheader":"Text-module_subheader__3CmmH","subheader-bold":"Text-module_subheader-bold__nUCe5","input":"Text-module_input__uD4E2"};
 
 var elementType = {
     h1: 'h1',
@@ -469,18 +468,20 @@ var Autocomplete = function (_a) {
                     store.openDropdown();
                 }
                 if (event.currentTarget.value === '') {
+                    store.resetSelectedOption();
                     store.closeDropdown();
                 }
             }, value: searchValue, holdSpace: false, leftSection: jsx(Search, {}), rightSection: jsx(ActionIcon, { radius: "sm", variant: "light", onClick: function () {
                     onSearchChange('');
                     onOptionSubmit === null || onOptionSubmit === undefined ? undefined : onOptionSubmit('');
+                    store.resetSelectedOption();
                     store.closeDropdown();
                 }, style: { visibility: searchValue ? 'visible' : 'hidden' }, children: jsx(Close, {}) }), onKeyDown: function (event) {
                 if (event.key === 'Enter' && options.length !== 1) {
                     handleOptionSubmit(searchValue);
                     store.toggleDropdown();
                 }
-                else if (event.key === 'Enter') {
+                else if (event.key === 'Enter' && !loading) {
                     handleOptionSubmit(options[0]);
                     store.toggleDropdown();
                 }
@@ -525,7 +526,7 @@ var badgeVariantMap = {
 var sizeMap$1 = {
     small: {
         textVariant: 'xxs',
-        padding: '4px 12px',
+        padding: '8px 12px',
     },
     medium: {
         textVariant: 'xs',
@@ -533,7 +534,7 @@ var sizeMap$1 = {
     },
     large: {
         textVariant: 's',
-        padding: '10px 16px',
+        padding: '8px 16px',
     },
 };
 var Badge = forwardRef(function (_a, ref) {
@@ -542,7 +543,7 @@ var Badge = forwardRef(function (_a, ref) {
     var backgroundColor = (_b = badgeVariantMap[variant]) === null || _b === undefined ? undefined : _b.backgroundColor;
     var color = (_c = badgeVariantMap[variant]) === null || _c === undefined ? undefined : _c.color;
     var sizeStyles = sizeMap$1[size || 'small'];
-    return (jsxs(Flex, { gap: 8, w: 'fit-content', bg: backgroundColor, p: sizeStyles.padding, style: __assign(__assign({}, style), { borderRadius: 999, alignItems: 'center' }), ref: ref, children: [icon, jsx(Text, { variant: sizeStyles.textVariant, weight: "regular", color: color, style: { lineHeight: 'normal' }, children: label })] }));
+    return (jsxs(Flex, { gap: 8, w: 'fit-content', bg: backgroundColor, p: sizeStyles.padding, style: __assign(__assign({}, style), { borderRadius: 999, alignItems: 'center' }), ref: ref, children: [icon, jsx(Text, { variant: sizeStyles.textVariant, color: color, children: label })] }));
 });
 
 var styles$i = {"button":"Button-module_button__7BLGt","label":"Button-module_label__447Ll","button-flex":"Button-module_button-flex__bzVRB","button--filled":"Button-module_button--filled__BKGu2","label-color--filled":"Button-module_label-color--filled__wJHlw","label-color--filled--disabled":"Button-module_label-color--filled--disabled__BbMbV","button--outlined":"Button-module_button--outlined__QZysw","label-color--outlined":"Button-module_label-color--outlined__seGi5","label-color--outlined--disabled":"Button-module_label-color--outlined--disabled__qXPjI","button--underlined":"Button-module_button--underlined__BsY5s","label-color--underlined":"Button-module_label-color--underlined__ymMfq","label-color--underlined--disabled":"Button-module_label-color--underlined--disabled__TBDd8","button--underlined-neutral":"Button-module_button--underlined-neutral__30A91","label-color--underlined-neutral":"Button-module_label-color--underlined-neutral__1xWMY","label-color--underlined-neutral--disabled":"Button-module_label-color--underlined-neutral--disabled__RQKW7","button--delete":"Button-module_button--delete__Xqpbl","label-color--delete":"Button-module_label-color--delete__iPB3X","label-color--delete--disabled":"Button-module_label-color--delete--disabled__lJkM6","button--small":"Button-module_button--small__3npYU","button--medium":"Button-module_button--medium__WRSIQ","button--large":"Button-module_button--large__bGVS1"};
@@ -881,7 +882,7 @@ var IncrementNumber = function (props) {
     return (jsxs("div", { className: styles$a['flex'], children: [props.disableDecrease ? (jsx("div", { style: { width: 24 } })) : (jsx("button", { className: styles$a['increment-button'], onClick: function () { return props.handleDecrease(props.value); }, children: jsx("img", { src: props.minusIconPath, width: 24, height: 24, alt: "-", style: {
                         maxWidth: '100%',
                         height: 'auto',
-                    } }) })), jsx(Text, { variant: "m", weight: "regular", style: { minWidth: 120 }, children: formatter.format(props.value) }), props.disableIncrease ? (jsx("div", { style: { width: 24 } })) : (jsx("button", { className: styles$a['increment-button'], onClick: function () { return props.handleIncrease(props.value); }, children: jsx("img", { src: props.plusIconPath, width: 24, height: 24, alt: "+", style: {
+                    } }) })), jsx(Text, { variant: "m-regular", style: { minWidth: 120 }, children: formatter.format(props.value) }), props.disableIncrease ? (jsx("div", { style: { width: 24 } })) : (jsx("button", { className: styles$a['increment-button'], onClick: function () { return props.handleIncrease(props.value); }, children: jsx("img", { src: props.plusIconPath, width: 24, height: 24, alt: "+", style: {
                         maxWidth: '100%',
                         height: 'auto',
                     } }) }))] }));
@@ -978,7 +979,8 @@ var Modal = function (_a) {
 
 var LinkModal = function (props) {
     var _a = t.useState(false), modalIsOpen = _a[0], setModalIsOpen = _a[1];
-    return (jsxs(Fragment, { children: [jsx("a", { onClick: function () { return setModalIsOpen(!modalIsOpen); }, children: jsx(Text, { variant: "xs", weight: "regular", color: "var(--color-primary-300)", style: {
+    return (jsxs(Fragment, { children: [jsx("a", { onClick: function () { return setModalIsOpen(!modalIsOpen); }, children: jsx(Text, { variant: "xs-light", style: {
+                        color: 'var(--color-primary-300)',
                         textDecoration: 'underline',
                     }, children: props.label }) }), jsx(Modal, { isOpen: modalIsOpen, onClose: function () { return setModalIsOpen(false); }, children: props.children })] }));
 };
@@ -1029,8 +1031,8 @@ var Umbrello = function (props) {
 };
 
 var NavBar = function (_a) {
-    var children = _a.children;
-    return (jsxs(Flex, { p: "24px 120px", bg: "var(--color-white)", align: "center", justify: "space-between", children: [jsx("a", { href: "/dashboard/management-companies", children: jsx(Umbrello, { fill: "var(--color-neutral-600)", width: "200", height: "40", viewBox: "0 0 200 40" }) }), children] }));
+    var children = _a.children, logo = _a.logo, homePath = _a.homePath, rest = __rest(_a, ["children", "logo", "homePath"]);
+    return (jsxs(Flex, __assign({ p: "24px 120px", bg: "var(--color-white)", align: "center", justify: "space-between", component: "nav" }, rest, { children: [jsx("a", { href: homePath || '/', children: logo || (jsx(Umbrello, { fill: "var(--color-neutral-600)", width: "200", height: "40", viewBox: "0 0 200 40" })) }), children] })));
 };
 
 var Pagination = function (_a) {
@@ -1163,7 +1165,7 @@ var StatusBadge = function (props) {
     var _a, _b;
     var backgroundColor = ((_a = variantMap[props.variant]) === null || _a === undefined ? undefined : _a.backgroundColor) || 'var(--color-neutral-400)';
     var color = ((_b = variantMap[props.variant]) === null || _b === undefined ? undefined : _b.color) || 'var(--color-jet-black)';
-    return (jsxs("div", { style: __assign(__assign({}, props.style), { backgroundColor: backgroundColor, padding: "".concat(props.small ? 0 : 6, "px 14px"), borderRadius: 999, width: 'fit-content', display: 'flex', alignItems: 'center', gap: 8 }), children: [props.icon, jsx(Text, { variant: "s", weight: "regular", style: {
+    return (jsxs("div", { style: __assign(__assign({}, props.style), { backgroundColor: backgroundColor, padding: "".concat(props.small ? 0 : 6, "px 14px"), borderRadius: 999, width: 'fit-content', display: 'flex', alignItems: 'center', gap: 8 }), children: [props.icon, jsx(Text, { variant: "input", style: {
                     color: color,
                     lineHeight: '16px',
                     margin: '8px 0',
@@ -1291,7 +1293,7 @@ var Tooltip = function (_a) {
         }, offset: 4, children: children })));
 };
 
-var multiselectStyles = {"input":"Multiselect-module_input__lwmrJ","disabled":"Multiselect-module_disabled__DyqLt","pill":"Multiselect-module_pill__NwXcT"};
+var multiselectStyles = {"input":"Multiselect-module_input__lwmrJ","inputFocused":"Multiselect-module_inputFocused__rm-OP","disabled":"Multiselect-module_disabled__DyqLt","pill":"Multiselect-module_pill__NwXcT"};
 
 /**
  * MultiSelect component, use it to select multiple options from a list of options
@@ -1303,99 +1305,160 @@ var multiselectStyles = {"input":"Multiselect-module_input__lwmrJ","disabled":"M
  * @param {string} placeholder - The placeholder of the select
  * @param {string} error - The error message to display
  * @param {string} description - The description to display
+ * @param {boolean} disabled - Whether the select is disabled
+ * @param {number} maxPills - The maximum number of pills to display, the rest will be displayed as a single pill with the number of remaining items
  *
  * @returns {React.ReactElement} The MultiSelect component
  *
  */
 var Multiselect = function (_a) {
-    var data = _a.data, onApply = _a.onApply, error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, onBlur = _a.onBlur, _b = _a.disabled, disabled = _b === undefined ? false : _b;
+    var data = _a.data, onApply = _a.onApply, error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, onBlur = _a.onBlur, _b = _a.disabled, disabled = _b === undefined ? false : _b, _c = _a.maxPills, maxPills = _c === undefined ? 3 : _c;
     var dataKey = useMemo(function () { return data.map(function (o) { return o.value; }).join('_'); }, [data]);
-    return (jsx(MultiselectInternal, { data: data, onApply: onApply, error: error, description: description, label: label, placeholder: placeholder, onBlur: onBlur, disabled: disabled }, dataKey));
+    return (jsx(MultiselectInternal, { data: data, onApply: onApply, error: error, description: description, label: label, placeholder: placeholder, onBlur: onBlur, disabled: disabled, maxPills: maxPills }, dataKey));
 };
 /**
- * Private component that holds the local state (`temporaryOptions`)
+ * The internal component that maintains:
+ * - committedOptions (pills shown when dropdown is closed)
+ * - temporaryOptions (draft selection while dropdown is open)
+ * - searchTerm (to filter the dropdown’s list)
  */
 var MultiselectInternal = function (_a) {
-    var data = _a.data, onApply = _a.onApply, error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, onBlur = _a.onBlur, disabled = _a.disabled;
-    var _b = useState(data), temporaryOptions = _b[0], setTemporaryOptions = _b[1];
-    var _c = useState(false), isFocused = _c[0], setIsFocused = _c[1];
-    var _d = useState(false), isHovered = _d[0], setIsHovered = _d[1];
-    var hasSelectedOptions = temporaryOptions.some(function (option) { return option.selected; });
-    // Handlers
-    var handleOptionClick = function (option) {
-        var newOptions = temporaryOptions.map(function (selectedOption) {
-            if (selectedOption.value === option.value) {
-                return __assign(__assign({}, selectedOption), { selected: !selectedOption.selected });
-            }
-            return selectedOption;
+    var data = _a.data, onApply = _a.onApply, error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, onBlur = _a.onBlur, disabled = _a.disabled, maxPills = _a.maxPills;
+    // Final selection that shows up as pills when closed / after Apply
+    var _b = useState(data), committedOptions = _b[0], setCommittedOptions = _b[1];
+    // Draft selection while dropdown is open
+    var _c = useState(data), temporaryOptions = _c[0], setTemporaryOptions = _c[1];
+    var _d = useState(''), searchTerm = _d[0], setSearchTerm = _d[1];
+    var _e = useState(false), isFocused = _e[0], setIsFocused = _e[1];
+    var _f = useState(false), isHovered = _f[0], setIsHovered = _f[1];
+    var hasSelectedOptions = committedOptions.some(function (opt) { return opt.selected; });
+    /* -----------------------------------
+     * Handlers
+     * ----------------------------------- */
+    var handleBlur = function () {
+        setIsFocused(false);
+        onBlur === null || onBlur === undefined ? undefined : onBlur();
+    };
+    /** Toggle a checkbox in the *draft* list */
+    var handleDraftToggle = function (option) {
+        setTemporaryOptions(function (prev) {
+            return prev.map(function (o) {
+                return o.value === option.value ? __assign(__assign({}, o), { selected: !o.selected }) : o;
+            });
         });
-        setTemporaryOptions(newOptions);
     };
+    /** Click "Apply" => copy draft to pills (committed) and call onApply */
     var handleApply = function (closeDropdown) {
+        setCommittedOptions(temporaryOptions);
         onApply(temporaryOptions);
         closeDropdown();
     };
+    /** Click "Clear" => reset the *draft* selection (not pills yet) */
     var handleClear = function () {
-        var newOptions = data.map(function (option) { return (__assign(__assign({}, option), { selected: false })); });
-        setTemporaryOptions(newOptions);
+        var reset = data.map(function (o) { return (__assign(__assign({}, o), { selected: false })); });
+        setTemporaryOptions(reset);
     };
-    var handleBlur = function () {
-        setIsFocused(false);
-        if (onBlur) {
-            onBlur();
-        }
-    };
-    var handleDeselect = function (optionId) {
-        var newOptions = temporaryOptions.map(function (option) {
-            if (option.value === optionId) {
-                return __assign(__assign({}, option), { selected: false });
-            }
-            return option;
+    /** Clicking the "X" on a pill => remove from *committed* immediately */
+    var handleDeselectPill = function (optionId) {
+        var newCommitted = committedOptions.map(function (o) {
+            return o.value === optionId ? __assign(__assign({}, o), { selected: false }) : o;
         });
-        setTemporaryOptions(newOptions);
-        onApply(newOptions);
+        setCommittedOptions(newCommitted);
+        setTemporaryOptions(newCommitted);
+        onApply(newCommitted);
     };
-    // Sections
-    var PillListSection = function (_a) {
-        var store = _a.store;
-        var selected = temporaryOptions.filter(function (option) { return option.selected; });
-        return (jsx("div", { style: {
-                display: 'flex',
-                flexGrow: 1,
-                gap: 8,
-                alignItems: 'center',
-            }, children: selected.length === 0 ? (jsx(Text, { variant: "s", children: store.dropdownOpened ? placeholder : label })) : (jsxs(Flex, { gap: 8, align: "center", wrap: "wrap", children: [selected.slice(0, 3).map(function (option) { return (jsxs("span", { className: multiselectStyles.pill, onClick: function (e) {
-                            handleOptionClick(option);
-                            e.stopPropagation();
-                        }, children: [jsx(Text, { variant: "xs", children: option.label }), jsx(ActionIcon$1, { variant: "transparent", onClick: function (e) {
-                                    handleDeselect(option.value);
-                                    e.stopPropagation();
-                                }, children: jsx(Close, { height: "20px", width: "20px" }) })] }, option.value)); }), selected.length > 3 && (jsx(Tooltip, { label: selected
-                            .slice(3)
-                            .map(function (option) { return option.label; })
-                            .join(', '), children: jsx("span", { className: multiselectStyles.pill, children: jsxs(Text, { variant: "xs", children: ["+ ", selected.length - 3] }) }, selected.length) }))] })) }));
+    /* -----------------------------------
+     * Search / Filtering
+     * ----------------------------------- */
+    var filteredTempOptions = useMemo(function () {
+        if (!searchTerm.trim())
+            return temporaryOptions;
+        return temporaryOptions.filter(function (o) {
+            return o.label.toLowerCase().includes(searchTerm.toLowerCase());
+        });
+    }, [searchTerm, temporaryOptions]);
+    // Build the actual dropdown checkboxes from the filtered list
+    var dropdownOptions = useMemo(function () {
+        var allSelected = filteredTempOptions.length > 0 &&
+            filteredTempOptions.every(function (o) { return o.selected; });
+        var selectAllOption = (jsx(Dropdown.Option, { value: "select_all", py: 12, onClick: function (e) { return e.stopPropagation(); }, children: jsx(Checkbox, { label: "Select All", checked: allSelected, onChange: function (e) {
+                    e.stopPropagation();
+                    setTemporaryOptions(function (prev) {
+                        return prev.map(function (item) { return (__assign(__assign({}, item), { selected: !allSelected })); });
+                    });
+                }, w: "100%" }) }, "select_all"));
+        // Now build the rest of the normal checkboxes
+        var normalOptions = filteredTempOptions.map(function (option) { return (jsx(Dropdown.Option, { value: option.value, py: 12, disabled: option.disabled, 
+            // Don’t close on click
+            onClick: function (e) { return e.stopPropagation(); }, children: jsx(Checkbox, { label: option.label, checked: option.selected, disabled: option.disabled, onChange: function (e) {
+                    e.stopPropagation();
+                    handleDraftToggle(option);
+                }, w: "100%" }, option.value) }, option.value)); });
+        var emptyOptions = (jsx(Dropdown.Option, { value: "No options found", style: { cursor: 'not-allowed', pointerEvents: 'none' }, children: "No matches found, try something else." }));
+        return normalOptions.length > 0
+            ? __spreadArray([selectAllOption], normalOptions, true) : [emptyOptions];
+    }, [filteredTempOptions]);
+    /* -----------------------------------
+     * Sections
+     * ----------------------------------- */
+    /**
+     * The main "input" area, showing:
+     * - Pills (from committedOptions) if the dropdown is closed (or open),
+     *   but we specifically adjust layout if open.
+     * - If the dropdown is open, also show a search input alongside the pills.
+     */
+    var PillAndSearchSection = function (_a) {
+        var store = _a.store, _b = _a.maxPills, maxPills = _b === undefined ? 3 : _b;
+        var selected = committedOptions.filter(function (opt) { return opt.selected; });
+        var dropdownOpened = store.dropdownOpened;
+        var allSelected = selected.length === data.length;
+        var searchInputRef = useRef(null);
+        useEffect(function () {
+            var _a;
+            if (dropdownOpened) {
+                (_a = searchInputRef.current) === null || _a === undefined ? undefined : _a.focus();
+            }
+        }, [dropdownOpened]);
+        // If the dropdown is closed and everything is selected => single "All {placeholder}" pill
+        if (!dropdownOpened && allSelected) {
+            return (jsx(Flex, { gap: 8, align: "center", wrap: "wrap", style: { flexGrow: 1, minHeight: 32 }, children: jsxs("span", { className: multiselectStyles.pill, children: [jsxs(Text, { variant: "xs", children: ["All ", placeholder] }), jsx(ActionIcon$1, { variant: "transparent", onClick: function (e) {
+                                e.stopPropagation();
+                                var newCommitted = committedOptions.map(function (o) { return (__assign(__assign({}, o), { selected: false })); });
+                                setCommittedOptions(newCommitted);
+                                setTemporaryOptions(newCommitted);
+                                onApply(newCommitted);
+                            }, children: jsx(Close, { height: "20px", width: "20px", stroke: "var(--color-neutral-600)" }) })] }) }));
+        }
+        // Otherwise, render original logic:
+        return (jsxs(Flex, { gap: 8, align: "center", wrap: "wrap", style: { flexGrow: 1, minHeight: 32 }, children: [selected.length === 0 && !dropdownOpened && (jsx(Text, { variant: "s", children: label })), selected.slice(0, maxPills).map(function (option) { return (jsxs("span", { className: multiselectStyles.pill, children: [jsx(Text, { variant: "xs", children: option.label }), jsx(ActionIcon$1, { variant: "transparent", onClick: function (e) {
+                                e.stopPropagation();
+                                handleDeselectPill(option.value);
+                            }, children: jsx(Close, { height: "20px", width: "20px", stroke: "var(--color-neutral-600)" }) })] }, option.value)); }), selected.length > maxPills && (jsx(Tooltip, { label: selected
+                        .slice(maxPills, selected.length)
+                        .map(function (o) { return o.label; })
+                        .join(', '), position: "bottom", children: jsx("span", { className: multiselectStyles.pill, children: jsxs(Text, { variant: "xs", children: ["+", selected.length - maxPills] }) }, "more") })), dropdownOpened && (jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search ".concat(placeholder, "..."), value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, style: {
+                        flexGrow: 1,
+                        minWidth: 80,
+                        border: '1px solid var(--color-gray-200)',
+                        borderRadius: 4,
+                        padding: '4px 8px',
+                        outline: 'none',
+                    }, onClick: function (e) { return e.stopPropagation(); } }))] }));
     };
     var ErrorSection = (jsxs(Flex, { className: styles$k.error, gap: 4, ml: 16, mt: 8, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$k.errorText), children: error })] }));
     var DescriptionSection = (jsx(Flex, { className: styles$k.description, gap: 4, ml: 16, mt: 8, style: { visibility: description ? 'visible' : 'hidden' }, children: jsx(Text, { variant: "xs", children: description }) }));
-    var options = useMemo(function () {
-        return temporaryOptions.map(function (option) {
-            return (jsx(Dropdown.Option, { value: option.value, py: 12, disabled: option.disabled, onClick: function (e) {
-                    e.stopPropagation();
-                }, children: jsx(Checkbox, { label: option.label, checked: option.selected, disabled: option.disabled, onChange: function (e) {
-                        handleOptionClick(option);
-                        e.stopPropagation();
-                    }, w: "100%" }, option.value) }, option.value));
-        });
-    }, [temporaryOptions]);
-    return (jsx(Dropdown, { options: options, maxHeight: 300, footer: function (store) { return (jsxs(Flex, { justify: "flex-end", py: 8, gap: 8, children: [jsx(Button, { variant: "outlined", label: "Clear", size: "small", onClick: handleClear }), jsx(Button, { variant: "filled", label: "Apply", size: "small", onClick: function () { return handleApply(store.closeDropdown); } })] })); }, children: function (store) {
+    var dropdownFooter = function (store) { return (jsxs(Flex, { justify: "flex-end", py: 8, gap: 8, children: [jsx(Button, { variant: "outlined", label: "Clear", size: "small", onClick: handleClear }), jsx(Button, { variant: "filled", label: "Apply", size: "small", onClick: function () { return handleApply(store.closeDropdown); } })] })); };
+    return (jsx(Dropdown, { options: dropdownOptions, maxHeight: 300, footer: dropdownFooter, children: function (store) {
             var _a, _b;
-            return (jsxs("div", { className: styles$k.container, children: [(store.dropdownOpened || hasSelectedOptions) && (jsx("label", { className: classNames(styles$k.label, (_a = {},
+            var floatLabel = store.dropdownOpened || hasSelectedOptions;
+            return (jsxs("div", { className: styles$k.container, children: [floatLabel && (jsx("label", { className: classNames(styles$k.label, (_a = {},
                             _a[styles$k.labelError] = error && !isFocused,
                             _a[styles$k.labelFocused] = isFocused || isHovered,
                             _a)), children: label })), jsxs(Box, { className: classNames(styles$k.input, multiselectStyles.input, (_b = {},
                             _b[styles$k.inputError] = error && !isFocused,
+                            _b[multiselectStyles.inputFocused] = isFocused || store.dropdownOpened,
                             _b[multiselectStyles.disabled] = disabled,
-                            _b)), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: function () { return store.toggleDropdown(); }, onFocus: function () { return setIsFocused(true); }, onBlur: handleBlur, tabIndex: 0, children: [jsx(PillListSection, { store: store }), jsx(Chevron, { rotate: store.dropdownOpened ? 90 : 270 })] }), error ? ErrorSection : DescriptionSection] }));
+                            _b)), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: function () { return store.toggleDropdown(); }, onFocus: function () { return setIsFocused(true); }, onBlur: handleBlur, tabIndex: 0, children: [jsx(PillAndSearchSection, { store: store, maxPills: maxPills }), jsx(Chevron, { rotate: store.dropdownOpened ? 90 : 270 })] }), error ? ErrorSection : DescriptionSection] }));
         } }));
 };
 
@@ -1413,7 +1476,7 @@ var Attachment = function (props) {
 
 var Bell = function (_a) {
     var _b = _a.width, width = _b === undefined ? '32px' : _b, _c = _a.height, height = _c === undefined ? '32px' : _c, _d = _a.viewBox, viewBox = _d === undefined ? '0 0 32 32' : _d, _e = _a.alert, alert = _e === undefined ? false : _e;
-    return (jsxs(Icon, { width: width, height: height, viewBox: viewBox, children: [jsx("path", { d: "M14.1429 27.8572H17.5714", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M22.7143 15C22.7143 13.1813 21.9919 11.4372 20.7059 10.1512C19.4199 8.86527 17.6758 8.14282 15.8572 8.14282C14.0385 8.14282 12.2944 8.86527 11.0084 10.1512C9.72247 11.4372 9.00002 13.1813 9.00002 15V21C9.00002 21.6819 8.72909 22.3361 8.24686 22.8183C7.76463 23.3005 7.11057 23.5714 6.42859 23.5714H25.2857C24.6038 23.5714 23.9496 23.3005 23.4674 22.8183C22.9852 22.3361 22.7143 21.6819 22.7143 21V15Z", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M4.71429 14.777C4.71522 13.1453 5.10435 11.5372 5.84956 10.0855C6.59476 8.63384 7.67464 7.38032 9.00001 6.42847", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M25.8648 10.0855C25.1196 8.63384 24.0396 7.38032 22.7143 6.42847", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), alert && (jsx("circle", { cx: "22.2857", cy: "9.14282", r: "5.5", fill: "var(--color-primary-300)", stroke: "white" }))] }));
+    return (jsxs(Icon, { width: width, height: height, viewBox: viewBox, children: [jsx("path", { d: "M14.1429 27.8572H17.5714", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M22.7143 15C22.7143 13.1813 21.9919 11.4372 20.7059 10.1512C19.4199 8.86527 17.6758 8.14282 15.8572 8.14282C14.0385 8.14282 12.2944 8.86527 11.0084 10.1512C9.72247 11.4372 9.00002 13.1813 9.00002 15V21C9.00002 21.6819 8.72909 22.3361 8.24686 22.8183C7.76463 23.3005 7.11057 23.5714 6.42859 23.5714H25.2857C24.6038 23.5714 23.9496 23.3005 23.4674 22.8183C22.9852 22.3361 22.7143 21.6819 22.7143 21V15Z", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M4.71429 14.777C4.71522 13.1453 5.10435 11.5372 5.84956 10.0855C6.59476 8.63384 7.67464 7.38032 9.00001 6.42847", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M25.8648 10.0855C25.1196 8.63384 24.0396 7.38032 22.7143 6.42847", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), alert && (jsx("circle", { cx: "22.2857", cy: "9.14282", r: "5.5", fill: "#7B34D6", stroke: "white" }))] }));
 };
 
 var Cat = function (props) {
@@ -1535,4 +1598,4 @@ var World = function (_a) {
 };
 
 export { Document as $, Accordion as A, Badge as B, Card as C, DateInput as D, EnterCodeInput as E, FileInput as F, Multiselect as G, Alert as H, IncrementNumber as I, Arrow as J, Attachment as K, Link as L, Message as M, NavBar as N, AvatarPlaceholder as O, PasswordInput as P, Bell as Q, RadioButton as R, SegmentedControl as S, Table as T, Calendar as U, Cat as V, Chevron as W, Clock as X, Close as Y, Cloud as Z, Delete as _, AccordionItem as a, Dog as a0, EyeHide as a1, EyeShow as a2, Fingerprint as a3, Google as a4, Grid as a5, HappyFace as a6, House as a7, HouseTime as a8, Identification as a9, Info as aa, Location as ab, Mail as ac, Menu as ad, MenuTouched as ae, Notification as af, Open as ag, Pets as ah, Phone as ai, Plaid as aj, Plus as ak, Remove as al, Search as am, ThreeDots as an, ThumbsDown as ao, Tick as ap, Umbrello as aq, Upload as ar, Visa as as, Warning as at, World as au, capitalizeFirstSentenceLetter as av, AccordionControl as b, AccordionPanel as c, ActionIcon as d, Animation as e, Autocomplete as f, getDefaultExportFromCjs as g, badgeVariantMap as h, Button as i, cardStatusVariantMap as j, CardStatus as k, Checkbox as l, Dropdown as m, FileUpload as n, Input as o, LinkModal as p, Loader as q, Modal as r, Pagination as s, Select as t, StatusBadge as u, Tabs as v, Text as w, Textarea as x, ToastContainer as y, Tooltip as z };
-//# sourceMappingURL=index-Bsn_EcYJ.js.map
+//# sourceMappingURL=index-COG80HZJ.js.map