pixelize-design-library 2.4.1-beta.10 → 2.4.1-beta.12

package/dist/Components/NavigationBar/NavigationBar.js

@@ -18,6 +18,8 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         justifyContent: "center",
         borderRadius: "md",
         cursor: "pointer",
+        border: "none",
+        bg: "transparent",
         transition: "background 0.15s",
         _hover: { bg: "blackAlpha.50" },
     };
@@ -40,7 +42,7 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         _focus: { bg: menuHoverBg, color: theme.colors.primary[700] },
         _active: { bg: menuHoverBg, color: theme.colors.primary[700] },
     };
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: "blackAlpha.100", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", ...iconButtonStyle, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)((_g = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _g === void 0 ? void 0 : _g.secondary, (_j = (_h = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _h === void 0 ? void 0 : _h.backgroundColor) === null || _j === void 0 ? void 0 : _j.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", bg: theme.colors.backgroundColor.light, 
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: "blackAlpha.100", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)((_g = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _g === void 0 ? void 0 : _g.secondary, (_j = (_h = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _h === void 0 ? void 0 : _h.backgroundColor) === null || _j === void 0 ? void 0 : _j.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", bg: theme.colors.backgroundColor.light, 
                                         // Chakra's MenuItem renders `background: var(--menu-bg)` at rest; its MenuList
                                         // baseStyle hardcodes that var to "#fff" (gated behind `_dark`, which this theme-swap
                                         // app never triggers). The `bg` prop above only recolors the list itself, not the

package/dist/Components/OrgSwitcher/OrgSwitcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrgSwitcher.d.ts","sourceRoot":"","sources":["../../../src/Components/OrgSwitcher/OrgSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAoBzD,OAAO,EAGL,gBAAgB,EAGjB,MAAM,oBAAoB,CAAC;AAkD5B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4N3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"OrgSwitcher.d.ts","sourceRoot":"","sources":["../../../src/Components/OrgSwitcher/OrgSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAoBjF,OAAO,EAGL,gBAAgB,EAGjB,MAAM,oBAAoB,CAAC;AAkD5B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoR3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -31,6 +31,9 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const [query, setQuery] = (0, react_1.useState)("");
     const searchRef = (0, react_1.useRef)(null);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const optionRefs = (0, react_1.useRef)([]);
+    const firstOptionRef = (0, react_1.useRef)(null);
     const selected = (0, react_1.useMemo)(() => organizations.find((o) => o.id === value), [organizations, value]);
     const showSearch = isSearchable !== null && isSearchable !== void 0 ? isSearchable : organizations.length >= searchThreshold;
     const filtered = (0, react_1.useMemo)(() => {
@@ -39,6 +42,31 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
         const q = query.toLowerCase();
         return organizations.filter((o) => o.name.toLowerCase().includes(q));
     }, [organizations, query]);
+    (0, react_1.useEffect)(() => setActiveIndex(0), [query, isOpen]);
+    const focusOption = (0, react_1.useCallback)((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    // Roving tabindex: only the active row is a tab stop, arrow keys move focus between
+    // options — mirrors CompactSelect's established listbox keyboard pattern in this repo.
+    const handleListKeyDown = (0, react_1.useCallback)((e) => {
+        if (filtered.length === 0)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const step = e.key === "ArrowDown" ? 1 : -1;
+            focusOption((activeIndex + step + filtered.length) % filtered.length);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            focusOption(0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            focusOption(filtered.length - 1);
+        }
+    }, [activeIndex, filtered.length, focusOption]);
     // boxborder[800], not raw gray[200]: this styles a real `<button>` (Flex as="button" below),
     // so its border is a control boundary — WCAG 1.4.11 needs >=3.0 against any named surface up
     // to `muted` (lightest); gray[200] fails there in dark mode.
@@ -61,12 +89,17 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: onOpen, onClose: () => {
             onClose();
             setQuery("");
-        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "10px", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [selected ? ((0, jsx_runtime_1.jsx)(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "8px", bg: theme.colors.gray[100], color: theme.colors.gray[400], flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 14 }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.primary[500], flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.gray[400], flexShrink: 0 }))] }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { minW: menuMinWidth, w: "auto", 
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "10px", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [selected ? ((0, jsx_runtime_1.jsx)(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "8px", bg: theme.colors.gray[100], color: theme.colors.gray[400], flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 14 }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.primary[500], flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.gray[400], flexShrink: 0 }))] }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { minW: menuMinWidth, w: "auto", 
                 // Chakra's PopoverContent baseStyle defaults bg to var(--popper-bg), which is hardcoded
                 // to colors.white and only repointed under Chakra's own `_dark` — dead code here since
                 // this app toggles dark mode by swapping the palette, not Chakra's colorMode. Without an
                 // explicit bg the panel always rendered white regardless of the active theme.
-                bg: theme.colors.backgroundColor.light, borderRadius: "12px", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.gray[400] }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "8px" })] }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { maxH: "320px", overflowY: "auto", py: 1, children: [filtered.map((org) => {
+                bg: theme.colors.backgroundColor.light, borderRadius: "12px", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.gray[400] }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+                                            if (e.key === "ArrowDown" && filtered.length > 0) {
+                                                e.preventDefault();
+                                                focusOption(0);
+                                            }
+                                        }, borderRadius: "8px" })] }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "listbox", "aria-label": "Organizations", maxH: "320px", overflowY: "auto", py: 1, onKeyDown: handleListKeyDown, children: [filtered.map((org, idx) => {
                                     const isActive = org.id === value;
                                     // Active row's hover repeated its own resting `primary[50]` fill — a zero-delta
                                     // hover, invisible by construction. `resolveHoverTint` walks a fill away from a
@@ -75,7 +108,11 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
                                     const rowHoverBg = isActive
                                         ? (0, outlineRung_1.resolveHoverTint)(theme.colors.primary[50], theme.colors.primary[50])
                                         : (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[50], theme.colors.backgroundColor.light);
-                                    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "10px", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [(0, jsx_runtime_1.jsx)(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.primary[500], flexShrink: 0 }))] }, org.id));
+                                    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", role: "option", "aria-selected": isActive, ref: (el) => {
+                                            optionRefs.current[idx] = el;
+                                            if (idx === 0)
+                                                firstOptionRef.current = el;
+                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [(0, jsx_runtime_1.jsx)(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.primary[500], flexShrink: 0 }))] }, org.id));
                                 }), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 exports.default = OrgSwitcher;

package/dist/Components/ProductCard/ProductPrice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductPrice.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductCard/ProductPrice.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAY3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAKvD,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AA6CF,QAAA,MAAM,YAAY,GAAI,wCAAwC,iBAAiB,4CAiQ9E,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ProductPrice.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductCard/ProductPrice.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAY3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAMvD,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AA6CF,QAAA,MAAM,YAAY,GAAI,wCAAwC,iBAAiB,4CAqQ9E,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/ProductCard/ProductPrice.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const rafThrottle_1 = require("../../Utils/rafThrottle");
 const sizeConfig = {
     xs: {
         font: "xs",
@@ -77,14 +78,19 @@ const ProductPrice = ({ options, size, onSelect, rightSlot }) => {
                 });
             }
         };
-        if (isOpen) {
-            updatePosition();
-            window.addEventListener("resize", updatePosition);
-            window.addEventListener("scroll", updatePosition, true); // listen to scroll on every scrollable ancestor
-        }
+        if (!isOpen)
+            return;
+        updatePosition();
+        const onReposition = (0, rafThrottle_1.rafThrottle)(updatePosition);
+        window.addEventListener("resize", onReposition);
+        window.addEventListener("scroll", onReposition, {
+            capture: true, // every scrollable ancestor, not just the window
+            passive: true,
+        });
         return () => {
-            window.removeEventListener("resize", updatePosition);
-            window.removeEventListener("scroll", updatePosition, true);
+            onReposition.cancel();
+            window.removeEventListener("resize", onReposition);
+            window.removeEventListener("scroll", onReposition, true);
         };
     }, [isOpen]);
     (0, react_1.useEffect)(() => {

package/dist/Components/ProgressBar/ProgressBar.d.ts

@@ -1,3 +1,3 @@
 import { ProgressBarProps } from "./ProgressBarProps";
-export default function ProgressBar({ size, isIndeterminate, color, hasStripe, height, value, isAnimated, max, min, variant, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export default function ProgressBar({ size, isIndeterminate, color, hasStripe, height, value, isAnimated, max, min, variant, ...aria }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ProgressBar.d.ts.map

package/dist/Components/ProgressBar/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/Components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EACnC,IAAI,EACJ,eAAe,EACf,KAAiB,EACjB,SAAS,EACT,MAAM,EACN,KAAK,EACL,UAAU,EACV,GAAG,EACH,GAAG,EACH,OAAO,GACP,EAAE,gBAAgB,2CAgBlB"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/Components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EACnC,IAAI,EACJ,eAAe,EACf,KAAiB,EACjB,SAAS,EACT,MAAM,EACN,KAAK,EACL,UAAU,EACV,GAAG,EACH,GAAG,EACH,OAAO,EACP,GAAG,IAAI,EACP,EAAE,gBAAgB,2CAiBlB"}

package/dist/Components/ProgressBar/ProgressBar.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ProgressBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-function ProgressBar({ size, isIndeterminate, color = "primary", hasStripe, height, value, isAnimated, max, min, variant, }) {
+function ProgressBar({ size, isIndeterminate, color = "primary", hasStripe, height, value, isAnimated, max, min, variant, ...aria }) {
     //  const theme = useCustomTheme();
-    return ((0, jsx_runtime_1.jsx)(react_1.Progress, { size: size, isIndeterminate: isIndeterminate, colorScheme: color, hasStripe: hasStripe, height: height, value: value, isAnimated: isAnimated, max: max, min: min, variant: variant }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Progress, { ...aria, size: size, isIndeterminate: isIndeterminate, colorScheme: color, hasStripe: hasStripe, height: height, value: value, isAnimated: isAnimated, max: max, min: min, variant: variant }));
 }

package/dist/Components/ProgressBar/ProgressBarProps.d.ts

@@ -1,5 +1,5 @@
 import { ProgressProps } from "@chakra-ui/react";
-export type ProgressBarProps = Pick<ProgressProps, "size" | "isIndeterminate" | "value" | "height" | "hasStripe" | "isAnimated" | "max" | "min"> & {
+export type ProgressBarProps = Pick<ProgressProps, "size" | "isIndeterminate" | "value" | "height" | "hasStripe" | "isAnimated" | "max" | "min" | "aria-label" | "aria-labelledby" | "aria-valuetext" | "id"> & {
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary" | "secondary";
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
     size?: "lg" | "md" | "sm" | "xs";

package/dist/Components/ProgressBar/ProgressBarProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarProps.d.ts","sourceRoot":"","sources":["../../../src/Components/ProgressBar/ProgressBarProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAE,IAAI,CAAC,aAAa,EAAC,MAAM,GAAC,iBAAiB,GAAC,OAAO,GAAC,QAAQ,GAAC,WAAW,GAAC,YAAY,GAAC,KAAK,GAAC,KAAK,CAAC,GAAC;IAC7H,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,YAAY,GAAC,SAAS,GAAC,WAAW,CAAC;IAC1J,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;IAC9D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACpC,CAAA"}
+{"version":3,"file":"ProgressBarProps.d.ts","sourceRoot":"","sources":["../../../src/Components/ProgressBar/ProgressBarProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,MAAM,MAAM,gBAAgB,GAAE,IAAI,CAAC,aAAa,EAAC,MAAM,GAAC,iBAAiB,GAAC,OAAO,GAAC,QAAQ,GAAC,WAAW,GAAC,YAAY,GAAC,KAAK,GAAC,KAAK,GAAC,YAAY,GAAC,iBAAiB,GAAC,gBAAgB,GAAC,IAAI,CAAC,GAAC;IAClL,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,YAAY,GAAC,SAAS,GAAC,WAAW,CAAC;IAC1J,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;IAC9D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACpC,CAAA"}

package/dist/Components/ScrollToTop/ScrollToTop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToTop.d.ts","sourceRoot":"","sources":["../../../src/Components/ScrollToTop/ScrollToTop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,MAAM,WAAW,gBAAgB;IAC/B,2EAA2E;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+F3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ScrollToTop.d.ts","sourceRoot":"","sources":["../../../src/Components/ScrollToTop/ScrollToTop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAO3D,MAAM,WAAW,gBAAgB;IAC/B,2EAA2E;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqG3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/ScrollToTop/ScrollToTop.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const rafThrottle_1 = require("../../Utils/rafThrottle");
 const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300, duration = 600, useWindow = false, bottom = "2rem", right = "2rem", }) => {
     var _a;
     const [visible, setVisible] = (0, react_1.useState)(false);
@@ -53,12 +54,16 @@ const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300
         const scroller = getScroller();
         if (!scroller)
             return;
-        scroller.addEventListener("scroll", handleScroll);
+        const onScroll = (0, rafThrottle_1.rafThrottle)(handleScroll);
+        scroller.addEventListener("scroll", onScroll, { passive: true });
         handleScroll();
-        return () => scroller.removeEventListener("scroll", handleScroll);
+        return () => {
+            onScroll.cancel();
+            scroller.removeEventListener("scroll", onScroll);
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [useWindow, threshold]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: anchorRef, position: "relative", children: [children, (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel, placement: "left", children: (0, jsx_runtime_1.jsx)(react_2.Box, { onClick: scrollToTop, role: "button", "aria-label": tooltipLabel, position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[500], color: theme.colors.white, boxShadow: "0 4px 14px rgba(0,0,0,0.25)", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)", _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: anchorRef, position: "relative", children: [children, (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel, placement: "left", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[500], color: theme.colors.white, boxShadow: "0 4px 14px rgba(0,0,0,0.25)", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)", _hover: {
                         bg: (_a = theme.colors.primary[600]) !== null && _a !== void 0 ? _a : theme.colors.primary[500],
                         transform: "translateY(-2px) scale(1.05)",
                         boxShadow: "0 6px 20px rgba(0,0,0,0.3)",

package/dist/Components/SearchSelect/SearchSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchSelect.d.ts","sourceRoot":"","sources":["../../../src/Components/SearchSelect/SearchSelect.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,iBAAiB,EAAW,MAAM,qBAAqB,CAAC;AA2BjE,QAAA,MAAM,YAAY,GAAI,sUA8BnB,iBAAiB,4CAovBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SearchSelect.d.ts","sourceRoot":"","sources":["../../../src/Components/SearchSelect/SearchSelect.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,iBAAiB,EAAW,MAAM,qBAAqB,CAAC;AA4BjE,QAAA,MAAM,YAAY,GAAI,sUA8BnB,iBAAiB,4CAq9BnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/SearchSelect/SearchSelect.js

@@ -49,6 +49,7 @@ const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const SelectTruncatedLabel_1 = __importDefault(require("./SelectTruncatedLabel"));
 const searchSelectSize_1 = require("./searchSelectSize");
 const Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
+const rafThrottle_1 = require("../../Utils/rafThrottle");
 const normalizeSingleValue = (val) => {
     if (typeof val === "object" && val !== null && "id" in val && "label" in val) {
         return val;
@@ -62,13 +63,15 @@ const normalizeMultiValue = (val) => {
     return [];
 };
 const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading = false, isLoading = false, loadingText = "Loading...", placeholder = "Select", value, searchQuery = "", isMultiple = false, isRequired = false, error = false, errorMessage, helperText, width = "100%", height, size = "md", chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll = false, pagination, insideSelect, isRemoveAllIcon, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
     const insideSelectBoxHeight = height !== null && height !== void 0 ? height : s.insideSelectDefaultHeight;
     const [inputValue, setInputValue] = (0, react_1.useState)(searchQuery);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [hasMore, setHasMore] = (0, react_1.useState)(true);
     const inputRef = (0, react_1.useRef)(null);
+    const triggerButtonRef = (0, react_1.useRef)(null);
+    const toggleButtonRef = (0, react_1.useRef)(null);
     const containerRef = (0, react_1.useRef)(null);
     const controlRef = (0, react_1.useRef)(null);
     const dropdownMenuRef = (0, react_1.useRef)(null);
@@ -84,12 +87,27 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
         width: 0,
     });
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    // `searchselect-dropdown-portal` is also the DOM id an existing outside-click check and
+    // several tests look up directly — kept as a literal constant, not derived from `baseId`,
+    // so those keep working unchanged.
+    const generatedId = (0, react_1.useId)();
+    const baseId = id || generatedId;
+    const listboxId = "searchselect-dropdown-portal";
+    const getOptionId = (index) => `${baseId}-option-${index}`;
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(-1);
+    const pendingFocusRestoreRef = (0, react_1.useRef)(false);
+    // Which trigger element actually has DOM focus right now, if any. Opening the menu from the
+    // toggle button (or the closed single-value button) doesn't move focus into Input — it stays
+    // wherever it was — so which element is the combobox's ARIA host must follow real focus, not
+    // just "Input is mounted now": falling back to render-condition guessing there would put
+    // aria-activedescendant on an unfocused Input while the still-focused toggle button gets none.
+    const [focusedTrigger, setFocusedTrigger] = (0, react_1.useState)(null);
     (0, react_2.useOutsideClick)({
         ref: containerRef,
         handler: (e) => {
             // The options dropdown is portaled to <body>, so a click on it is "outside"
             // the container — ignore those so selecting an option doesn't close first.
-            const dropdown = document.getElementById("searchselect-dropdown-portal");
+            const dropdown = document.getElementById(listboxId);
             if (dropdown && dropdown.contains(e.target))
                 return;
             setIsOpen(false);
@@ -158,6 +176,162 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
         }
         setInputValue("");
     };
+    const activeOptionId = isOpen && activeIndex >= 0 && filteredOptions[activeIndex]
+        ? getOptionId(activeIndex)
+        : undefined;
+    // Exactly one of {Input, the closed single-select trigger button, the toggle-dropdown
+    // button} is the field's authoritative combobox host at any moment — mirrors the render
+    // conditions below (Input when it's mounted, else the closed single-select trigger button,
+    // else the toggle-dropdown button, which is present in every other state bar `isLoading`/a
+    // custom `rightIcon` override — both flagged as residual gaps, not fixed here). Only that
+    // one element gets `role="combobox"` + `aria-activedescendant`: axe's `aria-allowed-attr`
+    // correctly rejects `aria-activedescendant` on a plain (button-role) element, so the other,
+    // non-primary trigger(s) that happen to render alongside it (e.g. the toggle button next to
+    // the closed single-value button) only get the plain disclosure attributes below.
+    // Real focus wins when we have it; otherwise fall back to guessing from render state (nothing
+    // has been focused yet, e.g. on first render).
+    const primaryTarget = focusedTrigger !== null && focusedTrigger !== void 0 ? focusedTrigger : (isOpen || inputValue || !selectedValues.length
+        ? "input"
+        : !isMultiple && selectedValues.length === 1
+            ? "button"
+            : "toggle");
+    const disclosureA11yProps = {
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-controls": isOpen ? listboxId : undefined,
+    };
+    const comboboxA11yProps = (target) => {
+        const isPrimary = primaryTarget === target;
+        if (isPrimary) {
+            return { role: "combobox", ...disclosureA11yProps, "aria-activedescendant": activeOptionId };
+        }
+        // Native <input>'s implicit role is "textbox", which — unlike "button" — doesn't validly
+        // support aria-expanded/haspopup/controls at all (axe's aria-allowed-attr correctly rejects
+        // it): only expose disclosure state on Input once it's actually the focused combobox host.
+        // The trigger/toggle buttons keep native role="button" either way, which does support them.
+        return target === "input" ? {} : disclosureA11yProps;
+    };
+    // Opens only — matches SelectV2's convention of a first ArrowDown/Enter/Space that opens with
+    // nothing highlighted yet, and a second keypress that moves onto the first/last option.
+    const openMenu = () => {
+        setCustomSelectOpen(false);
+        setIsOpen(true);
+    };
+    const moveActive = (delta) => {
+        setActiveIndex((prev) => {
+            if (!filteredOptions.length)
+                return -1;
+            if (prev < 0)
+                return delta > 0 ? 0 : filteredOptions.length - 1;
+            return (prev + delta + filteredOptions.length) % filteredOptions.length;
+        });
+    };
+    const restoreFocus = () => {
+        pendingFocusRestoreRef.current = true;
+    };
+    // ArrowDown/Up open the closed control and then move the aria-activedescendant highlight
+    // (wrapping at both ends, matching SelectV2's convention). Home/End are skipped while the
+    // event target is the text input so they still move the text cursor, not the highlight.
+    //
+    // Only reacts when the key originated on one of the three combobox trigger elements, not
+    // merely bubbled up to this Box from some other focusable descendant — a Tag's own "Remove"
+    // button lives inside this same Box, and without this guard its Enter/Space presses were
+    // being intercepted here (e.g. re-opening the menu) instead of reaching Tag's click handler.
+    const handleControlKeyDown = (e) => {
+        const target = e.target;
+        const isKnownTrigger = target === inputRef.current ||
+            target === triggerButtonRef.current ||
+            target === toggleButtonRef.current;
+        if (!isKnownTrigger)
+            return;
+        const isTextInputTarget = target.tagName === "INPUT";
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                if (!isOpen) {
+                    openMenu();
+                }
+                else {
+                    moveActive(1);
+                }
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                if (!isOpen) {
+                    openMenu();
+                }
+                else {
+                    moveActive(-1);
+                }
+                break;
+            case "Home":
+                if (isOpen && filteredOptions.length && !isTextInputTarget) {
+                    e.preventDefault();
+                    setActiveIndex(0);
+                }
+                break;
+            case "End":
+                if (isOpen && filteredOptions.length && !isTextInputTarget) {
+                    e.preventDefault();
+                    setActiveIndex(filteredOptions.length - 1);
+                }
+                break;
+            case "Enter":
+                if (!isOpen) {
+                    e.preventDefault();
+                    openMenu();
+                }
+                else if (activeIndex >= 0 && filteredOptions[activeIndex]) {
+                    e.preventDefault();
+                    handleSelect(filteredOptions[activeIndex]);
+                    if (!isMultiple)
+                        restoreFocus();
+                }
+                break;
+            case " ":
+            case "Spacebar":
+                if (!isOpen && !isTextInputTarget) {
+                    e.preventDefault();
+                    openMenu();
+                }
+                break;
+            case "Escape":
+                if (isOpen) {
+                    e.preventDefault();
+                    setIsOpen(false);
+                    setActiveIndex(-1);
+                    restoreFocus();
+                }
+                break;
+            default:
+                break;
+        }
+    };
+    // Clamps/clears the highlight whenever the menu closes or the filtered list changes size
+    // (e.g. typing), rather than leaving it pointing at a now out-of-range or stale option.
+    (0, react_1.useEffect)(() => {
+        if (!isOpen) {
+            setActiveIndex(-1);
+            return;
+        }
+        setActiveIndex((prev) => (prev >= 0 && prev < filteredOptions.length ? prev : -1));
+    }, [isOpen, filteredOptions.length]);
+    // A keyboard-driven close (Escape, or Enter selecting in single-select) can unmount the
+    // focused Input as the control collapses to the trigger button, which silently drops focus to
+    // <body>. Only step in when that actually happened — focus staying right where it was (e.g.
+    // Escape pressed on the toggle button, which never unmounts) must be left alone: forcing focus
+    // onto Input here would fire its own onFocus handler and reopen the menu right after closing it.
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d;
+        if (!pendingFocusRestoreRef.current)
+            return;
+        pendingFocusRestoreRef.current = false;
+        const active = document.activeElement;
+        const focusWasLost = !active || active === document.body || !((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(active));
+        if (!focusWasLost)
+            return;
+        (_d = ((_c = (_b = triggerButtonRef.current) !== null && _b !== void 0 ? _b : inputRef.current) !== null && _c !== void 0 ? _c : toggleButtonRef.current)) === null || _d === void 0 ? void 0 : _d.focus();
+    });
     const selectedIdsSet = (0, react_1.useMemo)(() => new Set(selectedValues.map((v) => v.id)), [selectedValues]);
     const isSelected = (0, react_1.useCallback)((id) => selectedIdsSet.has(id), [selectedIdsSet]);
     const isValidIcon = (icon) => react_1.default.isValidElement(icon);
@@ -237,11 +411,16 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
         if (!customSelectOpen)
             return;
         updateInsideSelectPos();
-        window.addEventListener("scroll", updateInsideSelectPos, true);
-        window.addEventListener("resize", updateInsideSelectPos);
+        const onReposition = (0, rafThrottle_1.rafThrottle)(updateInsideSelectPos);
+        window.addEventListener("scroll", onReposition, {
+            capture: true,
+            passive: true,
+        });
+        window.addEventListener("resize", onReposition);
         return () => {
-            window.removeEventListener("scroll", updateInsideSelectPos, true);
-            window.removeEventListener("resize", updateInsideSelectPos);
+            onReposition.cancel();
+            window.removeEventListener("scroll", onReposition, true);
+            window.removeEventListener("resize", onReposition);
         };
     }, [customSelectOpen, updateInsideSelectPos]);
     // Anchor the main options menu to the control (viewport-fixed). Prefer below;
@@ -278,15 +457,20 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
         if (!isOpen)
             return;
         updateDropdownPos();
-        // `true` (capture) catches scrolling inside any ancestor (e.g. modal body).
-        window.addEventListener("scroll", updateDropdownPos, true);
-        window.addEventListener("resize", updateDropdownPos);
+        const onReposition = (0, rafThrottle_1.rafThrottle)(updateDropdownPos);
+        // capture catches scrolling inside any ancestor (e.g. modal body).
+        window.addEventListener("scroll", onReposition, {
+            capture: true,
+            passive: true,
+        });
+        window.addEventListener("resize", onReposition);
         return () => {
-            window.removeEventListener("scroll", updateDropdownPos, true);
-            window.removeEventListener("resize", updateDropdownPos);
+            onReposition.cancel();
+            window.removeEventListener("scroll", onReposition, true);
+            window.removeEventListener("resize", onReposition);
         };
     }, [isOpen, updateDropdownPos]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: containerRef, width: width, position: "relative", children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation !== null && isInformation !== void 0 ? isInformation : information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: informationMessage !== null && informationMessage !== void 0 ? informationMessage : information === null || information === void 0 ? void 0 : information.informationMessage })), (0, jsx_runtime_1.jsx)(react_2.InputGroup, { size: size, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "div", ref: controlRef, w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, border: "0.063rem solid", borderColor: error
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: containerRef, width: width, position: "relative", children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: baseId, isRequired: isRequired, isInformation: isInformation !== null && isInformation !== void 0 ? isInformation : information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: informationMessage !== null && informationMessage !== void 0 ? informationMessage : information === null || information === void 0 ? void 0 : information.informationMessage })), (0, jsx_runtime_1.jsx)(react_2.InputGroup, { size: size, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "div", ref: controlRef, w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, border: "0.063rem solid", borderColor: error
                         ? theme.colors.semantic.error[500]
                         : focused
                             ? theme.colors.primary[500]
@@ -296,7 +480,7 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                             : `0 0 0 0.125rem ${(_d = theme.colors.boxShadow) === null || _d === void 0 ? void 0 : _d.primary}`
                         : error
                             ? `0 0 0 0.125rem ${(_e = theme.colors.boxShadow) === null || _e === void 0 ? void 0 : _e.error}`
-                            : "none", transition: "box-shadow 0.2s, border-color 0.2s", onClick: () => {
+                            : "none", transition: "box-shadow 0.2s, border-color 0.2s", onKeyDown: handleControlKeyDown, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onClick: () => {
                         setCustomSelectOpen(false);
                         setIsOpen(true);
                     }, children: [insideSelect && (() => {
@@ -334,21 +518,25 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                                     ? item.label.slice(0, chip.maxText) + "…"
                                     : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? () => handleRemove(item === null || item === void 0 ? void 0 : item.id) : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: s.tagSize }, item.id)))
                             : selectedValues.length === 1 &&
-                                !isOpen && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => {
+                                !isOpen && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", ref: triggerButtonRef, id: primaryTarget === "button" ? baseId : undefined, ...comboboxA11yProps("button"), "aria-label": !label ? String((_g = (_f = selectedValues[0]) === null || _f === void 0 ? void 0 : _f.label) !== null && _g !== void 0 ? _g : "") : undefined, onFocus: () => setFocusedTrigger("button"), onBlur: () => setFocusedTrigger((prev) => (prev === "button" ? null : prev)), onClick: () => {
                                     setCustomSelectOpen(false);
                                     setIsOpen(true);
-                                }, fontSize: s.fieldFontSize, color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0, display: "flex", alignItems: "center", flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: String(selectedValues[0].label), maxWidth: "calc(100% - 2rem)", fontSize: s.fieldFontSize }) })), (chip === null || chip === void 0 ? void 0 : chip.maxChips) && isMultiple && selectedValues.length > chip.maxChips && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: `+ ${selectedValues.length - chip.maxChips}`, colorScheme: "gray", size: s.tagSize }, "extra-count")), (isOpen || inputValue || !selectedValues.length) && ((0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, variant: "unstyled", size: size, h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, flex: "1", 
+                                }, fontSize: s.fieldFontSize, color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0, display: "flex", alignItems: "center", flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: String(selectedValues[0].label), maxWidth: "calc(100% - 2rem)", fontSize: s.fieldFontSize }) })), (chip === null || chip === void 0 ? void 0 : chip.maxChips) && isMultiple && selectedValues.length > chip.maxChips && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: `+ ${selectedValues.length - chip.maxChips}`, colorScheme: "gray", size: s.tagSize }, "extra-count")), (isOpen || inputValue || !selectedValues.length) && ((0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, id: primaryTarget === "input" ? baseId : undefined, "aria-autocomplete": "list", ...comboboxA11yProps("input"), variant: "unstyled", size: size, h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, flex: "1", 
                             // minW="5rem"
                             minW: "0", value: inputValue, onChange: (e) => setInputValue(e.target.value), onFocus: () => {
                                 setFocused(true);
+                                setFocusedTrigger("input");
                                 setCustomSelectOpen(false);
                                 setIsOpen(true);
-                            }, onBlur: () => setFocused(false), placeholder: selectedValues.length && !isOpen ? "" : placeholder })), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
+                            }, onBlur: () => {
+                                setFocused(false);
+                                setFocusedTrigger((prev) => (prev === "input" ? null : prev));
+                            }, placeholder: selectedValues.length && !isOpen ? "" : placeholder })), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
                                             bg: "transparent",
                                             _hover: { bg: "transparent" },
                                             _active: { bg: "transparent" },
                                             _focus: { boxShadow: "none", bg: "transparent" },
-                                        } }) })), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? ((0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: s.iconButtonSize, onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", onClick: (e) => {
+                                        } }) })), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? ((0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: s.iconButtonSize, onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", ref: toggleButtonRef, id: primaryTarget === "toggle" ? baseId : undefined, ...comboboxA11yProps("toggle"), onFocus: () => setFocusedTrigger("toggle"), onBlur: () => setFocusedTrigger((prev) => (prev === "toggle" ? null : prev)), onClick: (e) => {
                                         e.preventDefault();
                                         e.stopPropagation();
                                         setIsOpen((prev) => {
@@ -356,6 +544,13 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                                                 setCustomSelectOpen(false);
                                             return !prev;
                                         });
-                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: setDropdownMenuRef, id: "searchselect-dropdown-portal", position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.gray[200], borderRadius: "sm", bg: theme.colors.background[50], boxShadow: "md", display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.gray[100]}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200], children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500], children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: () => handleSelect(option), display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.gray[100]}`, children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: option.label }))] }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.background[50], display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] }, children: [addNew.icon || (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: s.addNewIconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: addNew.text || "Add New" })] }))] }) })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }));
+                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-multiselectable": isMultiple || undefined, position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.gray[200], borderRadius: "sm", bg: theme.colors.background[50], boxShadow: "md", display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.gray[100]}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200], children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500], children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option, index) => {
+                                        var _a, _b, _c;
+                                        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: getOptionId(index), role: "option", "aria-selected": isSelected(option.id), py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: index === activeIndex
+                                                ? (_c = (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a.opacity) === null || _b === void 0 ? void 0 : _b[8]) !== null && _c !== void 0 ? _c : theme.colors.gray[100]
+                                                : isSelected(option.id)
+                                                    ? theme.colors.gray[100]
+                                                    : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: () => handleSelect(option), onMouseEnter: () => setActiveIndex(index), display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.gray[100]}`, children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: option.label }))] }, option.id));
+                                    }), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.background[50], display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] }, children: [addNew.icon || (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: s.addNewIconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: addNew.text || "Add New" })] }))] }) })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }));
 };
 exports.default = SearchSelect;

package/dist/Components/SelectSearch/SelectSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectSearch.d.ts","sourceRoot":"","sources":["../../../src/Components/SelectSearch/SelectSearch.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAiB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAuFvE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAO,EACP,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,EAAE,EACF,IAAI,EACJ,KAAK,EACL,UAAU,EACV,eAAe,EACf,WAAuB,EACvB,QAAQ,EACR,WAA6B,EAC7B,WAAkB,EAClB,aAAqB,EACrB,kBAAkB,EAClB,SAAS,EACT,iBAAiB,EACjB,gBAAwB,EACxB,UAAkB,EAClB,mBAAmB,EACnB,KAAa,EACb,SAAiB,EACjB,YAAoB,EACpB,YAAY,EAGZ,UAAkB,EAClB,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAiU7B"}
+{"version":3,"file":"SelectSearch.d.ts","sourceRoot":"","sources":["../../../src/Components/SelectSearch/SelectSearch.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAiB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAgHvE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAO,EACP,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,EAAE,EACF,IAAI,EACJ,KAAK,EACL,UAAU,EACV,eAAe,EACf,WAAuB,EACvB,QAAQ,EACR,WAA6B,EAC7B,WAAkB,EAClB,aAAqB,EACrB,kBAAkB,EAClB,SAAS,EACT,iBAAiB,EACjB,gBAAwB,EACxB,UAAkB,EAClB,mBAAmB,EACnB,KAAa,EACb,SAAiB,EACjB,YAAoB,EACpB,YAAY,EAGZ,UAAkB,EAClB,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CA6Z7B"}