@sonic-equipment/ui 0.0.37 → 0.0.38

package/dist/buttons/add-to-cart-button/add-to-cart-button.d.ts

@@ -2,7 +2,7 @@ type AddToCartState = 'initial' | 'spinner' | 'manual-input';
 interface AddToCartButtonProps {
     initialState?: AddToCartState;
     isDisabled?: boolean;
-    onChange?: (quantity: number) => void;
+    onChange: (quantity: number) => void;
     quantity: number;
 }
 export declare function AddToCartButton({ initialState, isDisabled, onChange, quantity, }: AddToCartButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/add-to-cart-button/add-to-cart-button.stories.d.ts

@@ -20,4 +20,5 @@ export declare const InitialState: Story;
 export declare const SpinnerState: Story;
 export declare const ManualInputState: Story;
 export declare const RightAligned: Story;
+export declare const Slow: Story;
 export declare const Connected: Story;

package/dist/index.d.ts

@@ -3663,7 +3663,7 @@ type AddToCartState = 'initial' | 'spinner' | 'manual-input';
 interface AddToCartButtonProps {
     initialState?: AddToCartState;
     isDisabled?: boolean;
-    onChange?: (quantity: number) => void;
+    onChange: (quantity: number) => void;
     quantity: number;
 }
 declare function AddToCartButton({ initialState, isDisabled, onChange, quantity, }: AddToCartButtonProps): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -591,7 +591,10 @@ function TextAlignedArrowIcon(props) {
 var styles$B = {"button":"button-module-V4meK","icon":"button-module-XaNWz","sm":"button-module-Pbwz7","md":"button-module-GVTEW","condensed":"button-module-GKHQc","lg":"button-module-nyNY8","primary":"button-module-tmyk8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","focus":"button-module--xzsY","active":"button-module-XMFzj","ghost":"button-module-f4UVe","right-arrow-icon":"button-module-ydQAo","secondary":"button-module--1bCH"};
 
 function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, icon, iconPosition = 'left', isDisabled, onPress, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
-    return (jsxs(Button$1, { className: clsx(className, styles$B.button, styles$B[variant], styles$B[size], styles$B[color], { [styles$B.condensed]: condensed }, { [styles$B.icon]: icon }, styles$B[_pseudo]), isDisabled: isDisabled, onPress: onPress, type: type, children: [icon && iconPosition === 'left' && (jsx("span", { className: styles$B.icon, children: icon })), children, withArrow && (jsx(TextAlignedArrowIcon, { className: styles$B['right-arrow-icon'] })), icon && iconPosition === 'right' && (jsx("span", { className: styles$B.icon, children: icon }))] }));
+    return (jsxs(Button$1, { className: clsx(className, styles$B.button, styles$B[variant], styles$B[size], styles$B[color], { [styles$B.condensed]: condensed }, { [styles$B.icon]: icon }, styles$B[_pseudo]), isDisabled: isDisabled, 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        onClick: e => e.preventDefault(), onPress: onPress, type: type, children: [icon && iconPosition === 'left' && (jsx("span", { className: styles$B.icon, children: icon })), children, withArrow && (jsx(TextAlignedArrowIcon, { className: styles$B['right-arrow-icon'] })), icon && iconPosition === 'right' && (jsx("span", { className: styles$B.icon, children: icon }))] }));
 }
 
 var styles$A = {"icon-button":"icon-button-module-4PDK-","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo"};
@@ -688,19 +691,13 @@ var styles$u = {"field":"number-field-module-gmnog","button-input-container":"nu
  */
 function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions = { style: 'decimal', useGrouping: false }, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel = false, size = 'lg', value, withButtons, }) {
     const inputRef = useRef(null);
-    const onFocusInput = useDebouncedCallback(() => {
-        if (!inputRef.current)
-            return;
-        inputRef.current.focus();
-        inputRef.current.selectionStart = inputRef.current.value.length || 0;
-    }, 500);
     return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$u.field, styles$u[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$u['button-input-container'], children: [withButtons && (jsx(Button$1, { isDisabled: isDisabled, 
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-expect-error
-                        onClick: e => e.preventDefault(), onPressEnd: onFocusInput, onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(TrashOutlinedIcon, {}) : jsx(MinusFilledIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, maxLength: maxLength, onKeyUp: e => onKeyUp?.(e), placeholder: placeholder, size: size }), withButtons && (jsx(Button$1, { isDisabled: isDisabled, 
+                        onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(TrashOutlinedIcon, {}) : jsx(MinusFilledIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, maxLength: maxLength, onFocus: e => (e.target.selectionStart = e.target.value.length || 0), onKeyUp: e => onKeyUp?.(e), placeholder: placeholder, size: size }), withButtons && (jsx(Button$1, { isDisabled: isDisabled, 
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-expect-error
-                        onClick: e => e.preventDefault(), onPressEnd: onFocusInput, onPressStart: e => e.target.focus(), slot: "increment", children: jsx(PlusFilledIcon, {}) }))] }), jsx(FieldError, {})] }));
+                        onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "increment", children: jsx(PlusFilledIcon, {}) }))] }), jsx(FieldError, {})] }));
 }
 
 function CartFilledIcon(props) {
@@ -711,9 +708,8 @@ var styles$t = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left
 
 function AddToCartButton({ initialState = 'initial', isDisabled = false, onChange, quantity, }) {
     const [currentState, setState] = useState(initialState);
-    const [manualInputQuantity, setManualInputQuantity] = useState(quantity);
+    const [manualInputQuantity, setManualInputQuantity] = useState(null);
     useEffect(() => {
-        /* Reset the state when the (initial) quantity changes to zero */
         setState(currentState => {
             if (currentState === 'initial' && quantity > 0)
                 return 'spinner';
@@ -721,27 +717,30 @@ function AddToCartButton({ initialState = 'initial', isDisabled = false, onChang
                 return 'initial';
             if (currentState === 'manual-input' && quantity === 0)
                 return 'initial';
+            if (currentState === 'manual-input' && manualInputQuantity === null)
+                return 'initial';
             return currentState;
         });
-    }, [currentState, quantity]);
+    }, [currentState, quantity, manualInputQuantity]);
+    useEffect(() => {
+        if (currentState === 'manual-input')
+            setManualInputQuantity(null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [quantity]);
     if (currentState === 'initial')
         return (jsx(InitialState, { isDisabled: isDisabled, onAddToCart: () => {
-                setState('spinner');
-                onChange?.(1);
+                onChange(1);
             } }));
     if (currentState === 'spinner')
         return (jsx(SpinnerState, { isDisabled: isDisabled, onChange: value => {
-                if (value === 0)
-                    setState('initial');
-                onChange?.(value);
+                onChange(value);
             }, onManualInput: value => {
                 setManualInputQuantity(value);
                 setState('manual-input');
             }, quantity: quantity }));
     return (jsx(ManualInputState, { isDisabled: isDisabled, onCancel: () => setState('spinner'), onConfirm: value => {
-            onChange?.(value);
-            setState(value === 0 ? 'initial' : 'spinner');
-        }, quantity: manualInputQuantity }));
+            onChange(value);
+        }, quantity: manualInputQuantity || 0 }));
 }
 function InitialState({ isDisabled, onAddToCart, }) {
     return (jsx(Button, { condensed: true, icon: jsx(CartFilledIcon, {}), isDisabled: isDisabled, onPress: onAddToCart, size: "md" }));
@@ -778,8 +777,10 @@ function SpinnerState({ isDisabled, onChange, onManualInput, quantity, }) {
             useGrouping: false,
         }, isDisabled: isDisabled, label: "Quantity", maxLength: 4, maxValue: 9999, minValue: 0, onChange: quantity => {
             setInternalQuantity(quantity);
-            if (quantity === 0)
+            if (quantity === 0) {
+                mounted.current = false;
                 return onChange(0);
+            }
             onDebouncedChange(quantity);
         }, onInput: e => {
             onManualInput(ensureNumber(e.target.value));
@@ -6609,7 +6610,7 @@ function Sidebar({ children }) {
     return (jsxs("aside", { className: clsx(styles$7.sidebar, {
             [styles$7['is-open']]: isOpen,
             [styles$7['is-closed']]: !isOpen,
-        }), children: [jsx("div", { className: styles$7.close, children: jsx(IconButton, { color: "secondary", onPress: toggle, children: jsx(CloseFilledIcon, {}) }) }), children] }));
+        }), children: [jsx("div", { className: styles$7.close, children: jsx(IconButton, { onPress: toggle, children: jsx(CloseFilledIcon, {}) }) }), children] }));
 }
 
 function FilterOutlinedIcon(props) {
@@ -6646,7 +6647,7 @@ function ProductListingPageContent() {
 }
 function ProductOverview() {
     const { hits: productHits } = useHits();
-    return (jsx(ProductOverviewGrid, { children: productHits.map(productHit => (jsx(ConnectedProductCart, { href: `/Product/${productHit.storefrontSlug}`, image: {
+    return (jsx(ProductOverviewGrid, { children: productHits.map(productHit => (jsx(ConnectedProductCart, { href: productHit.storefrontSlug, image: {
                 alt: productHit.name,
                 fit: 'contain',
                 src: productHit.images?.find(image => image.quality === 'medium')
@@ -6661,7 +6662,7 @@ function ProductOverview() {
 
 var styles$5 = {"overlay-background":"overlay-background-module-j7R7T","open":"overlay-background-module-DZWsP","close":"overlay-background-module-8pcWN"};
 
-function OverlayBackground({ isOpen, onClick }) {
+function OverlayBackground({ className, isOpen, onClick, }) {
     const [, setRender] = useState(isOpen);
     const nodeRef = useRef(null);
     useEffect(() => {
@@ -6683,7 +6684,7 @@ function OverlayBackground({ isOpen, onClick }) {
     return ReactDOM.createPortal(jsx("div", { ref: nodeRef, className: clsx(styles$5['overlay-background'], {
             [styles$5['open']]: isOpen,
             [styles$5['close']]: !isOpen,
-        }), onClick: onClick }), document.body);
+        }, className), onClick: onClick }), document.body);
 }
 
 function useIsBreakpoint(breakpoint) {
@@ -7043,10 +7044,12 @@ function useAlgoliaSearch() {
     };
 }
 
+var styles$3 = {"global-search-overlay-background-position":"global-search-module-mmXv1","search-wrapper":"global-search-module-d2g2F","search-root":"global-search-module-Sx8Lx"};
+
 const GlobalSearchDisclosureContext = createContext(null);
 function GlobalSearchContainer({ children, }) {
     const { close, isOpen, open, toggle } = useDisclosure(false);
-    return (jsx(TransitionGroup, { children: jsxs(GlobalSearchDisclosureContext.Provider, { value: { close, isOpen, open, toggle }, children: [jsx(Transition, { in: isOpen, timeout: 300, children: state => jsx("div", { className: state, children: children }) }), jsx(OverlayBackground, { isOpen: isOpen, onClick: toggle })] }) }));
+    return (jsx(TransitionGroup, { children: jsxs(GlobalSearchDisclosureContext.Provider, { value: { close, isOpen, open, toggle }, children: [jsx(Transition, { in: isOpen, timeout: 300, children: state => jsx("div", { className: state, children: children }) }), jsx(OverlayBackground, { className: styles$3['global-search-overlay-background-position'], isOpen: isOpen, onClick: toggle })] }) }));
 }
 
 const useGlobalSearchDisclosure = () => {
@@ -7065,7 +7068,7 @@ function ResetIcon(props) {
     return (jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm4.495 5.505a.7.7 0 0 0-.99 0L12 11.011 8.495 7.505a.7.7 0 0 0-.99 0l-.074.087a.7.7 0 0 0 .074.903L11.011 12l-3.506 3.505a.7.7 0 0 0 0 .99l.087.074a.7.7 0 0 0 .903-.074L12 12.988l3.505 3.507a.7.7 0 0 0 .99 0l.074-.087a.7.7 0 0 0-.074-.903L12.988 12l3.507-3.505a.7.7 0 0 0 0-.99z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles$3 = {"form":"search-input-module-xCCzd","input-container":"search-input-module-okP8k","icon":"search-input-module-GZbhK","label":"search-input-module-vKCm4","reset-btn":"search-input-module-lYseZ","input":"search-input-module-bELFK"};
+var styles$2 = {"form":"search-input-module-xCCzd","input-container":"search-input-module-okP8k","icon":"search-input-module-GZbhK","label":"search-input-module-vKCm4","reset-btn":"search-input-module-lYseZ","input":"search-input-module-bELFK"};
 
 function SearchInput({ autocomplete, formRef, inputRef, }) {
     const formProps = autocomplete?.getFormProps({
@@ -7075,7 +7078,7 @@ function SearchInput({ autocomplete, formRef, inputRef, }) {
         inputElement: inputRef.current,
     });
     const labelProps = autocomplete?.getLabelProps({});
-    return (jsx("form", { ref: formRef, className: styles$3.form, ...formProps, children: jsxs("div", { className: styles$3['input-container'], children: [jsx("label", { className: styles$3.label, ...labelProps, children: jsx(MagnifyingGlassIcon, { className: clsx(styles$3['icon-search'], styles$3.icon) }) }), jsx("input", { ref: inputRef, ...inputProps, className: styles$3.input }), inputProps?.value && (jsx(IconButton, { className: styles$3['reset-btn'], color: "secondary", onPress: () => formRef.current?.reset(), type: "reset", children: jsx(ResetIcon, {}) }))] }) }));
+    return (jsx("form", { ref: formRef, className: styles$2.form, ...formProps, children: jsxs("div", { className: styles$2['input-container'], children: [jsx("label", { className: styles$2.label, ...labelProps, children: jsx(MagnifyingGlassIcon, { className: clsx(styles$2['icon-search'], styles$2.icon) }) }), jsx("input", { ref: inputRef, ...inputProps, className: styles$2.input }), inputProps?.value && (jsx(IconButton, { className: styles$2['reset-btn'], color: "secondary", onPress: () => formRef.current?.reset(), type: "reset", children: jsx(ResetIcon, {}) }))] }) }));
 }
 
 function ConnectedSearchInput() {
@@ -7181,13 +7184,14 @@ function SuggestionsSection() {
 }
 function ProductResultsSection() {
     const { autocomplete, products: collection } = useAlgoliaSearch();
+    const [quantity, setQuantity] = useState(0);
     if (!collection)
         return null;
     const { items, source } = collection;
     return (jsxs("div", { children: [jsx("h3", { children: "Products" }), jsx("div", { style: { display: 'flex' }, ...autocomplete.getListProps({ source }), children: items.map(item => (jsx(ProductCard, { href: "#", ...autocomplete.getItemProps({
                         item,
                         source: source,
-                    }), addToCartButton: jsx(AddToCartButton, { quantity: 0 }), image: {
+                    }), addToCartButton: jsx(AddToCartButton, { onChange: setQuantity, quantity: quantity }), image: {
                         alt: item.name,
                         fit: 'contain',
                         src: item.images?.find(image => image.quality === 'medium')?.url ||
@@ -7200,16 +7204,16 @@ function ProductResultsSection() {
                     }, sku: item.ean, title: item.name }, item.id))) })] }));
 }
 
-var styles$2 = {"search-result-panel":"search-result-panel-module-KBrc9","entering":"search-result-panel-module-Us8rb","entered":"search-result-panel-module-7UxfH","exiting":"search-result-panel-module-3xEiy","exited":"search-result-panel-module-xSeC-"};
+var styles$1 = {"search-result-panel":"search-result-panel-module-KBrc9","entering":"search-result-panel-module-Us8rb","entered":"search-result-panel-module-7UxfH","exiting":"search-result-panel-module-3xEiy","exited":"search-result-panel-module-xSeC-"};
 
 function SearchResultPanel() {
     const { autocomplete, panelRef } = useAlgoliaSearch();
     const { isOpen } = useGlobalSearchDisclosure();
     // https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/#check-network-status
-    return (jsx(Transition, { in: isOpen, nodeRef: panelRef, timeout: 300, children: transitionState => (jsx("div", { ref: panelRef, className: clsx(styles$2['search-result-panel'], styles$2[transitionState]), ...autocomplete.getPanelProps({}), children: jsx(PanelContent, {}) })) }));
+    return (jsx(Transition, { in: isOpen, nodeRef: panelRef, timeout: 300, children: transitionState => (jsx("div", { ref: panelRef, className: clsx(styles$1['search-result-panel'], styles$1[transitionState]), ...autocomplete.getPanelProps({}), children: jsx(PanelContent, {}) })) }));
 }
 
-var styles$1 = {"search-container":"search-root-module-g9MP0","input":"search-root-module-X7N83","entering":"search-root-module-dQDFs","entered":"search-root-module-fXUUb","exiting":"search-root-module-ZFQys","exited":"search-root-module-gd9xY"};
+var styles = {"search-container":"search-root-module-g9MP0","input":"search-root-module-X7N83","entering":"search-root-module-dQDFs","entered":"search-root-module-fXUUb","exiting":"search-root-module-ZFQys","exited":"search-root-module-gd9xY"};
 
 function SearchRoot() {
     const { autocomplete, inputRef } = useAlgoliaSearch();
@@ -7224,11 +7228,9 @@ function SearchRoot() {
             inputRef.current.blur();
         }
     }, [inputRef, isOpen]);
-    return (jsx(Fragment, { children: jsx(Transition, { in: isOpen, timeout: 300, children: transitionState => (jsxs("div", { className: clsx(styles$1['search-container'], styles$1[transitionState]), ...autocomplete.getRootProps({}), children: [jsx("div", { className: styles$1.input, children: jsx(ConnectedSearchInput, {}) }), jsx("div", { className: styles$1.panel, children: jsx(SearchResultPanel, {}) })] })) }) }));
+    return (jsx(Fragment, { children: jsx(Transition, { in: isOpen, timeout: 300, children: transitionState => (jsxs("div", { className: clsx(styles['search-container'], styles[transitionState]), ...autocomplete.getRootProps({}), children: [jsx("div", { className: styles.input, children: jsx(ConnectedSearchInput, {}) }), jsx("div", { className: styles.panel, children: jsx(SearchResultPanel, {}) })] })) }) }));
 }
 
-var styles = {"search-wrapper":"global-search-module-d2g2F","search-root":"global-search-module-Sx8Lx"};
-
 /**
  * Global search using algolia autocomplete with a custom renderer
  * https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/
@@ -7238,7 +7240,7 @@ var styles = {"search-wrapper":"global-search-module-d2g2F","search-root":"globa
  * https://codesandbox.io/p/sandbox/github/algolia/autocomplete/tree/next/examples/two-column-layout
  */
 function GlobalSearch({ children, searchClient }) {
-    return (jsx(GlobalSearchContainer, { children: jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: jsxs("div", { className: styles['search-wrapper'], children: [children, jsx("div", { className: styles['search-root'], children: jsx(SearchRoot, {}) })] }) }) }));
+    return (jsx(GlobalSearchContainer, { children: jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: jsxs("div", { className: styles$3['search-wrapper'], children: [children, jsx("div", { className: styles$3['search-root'], children: jsx(SearchRoot, {}) })] }) }) }));
 }
 
 export { Accordion, AddProductToCurrentCartError, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, AlgoliaFilterSection, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, AvailabilityMessageType, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, Breadcrumb, Button, CartFilledIcon, CartOutlinedIcon, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, CurrencyPositioningType, DehashedOutlinedIcon, DeleteCartLineByIdError, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, FavoriteProvider, FetchCurrentCartLinesError, FetchProductListingPageDataError, FormattedMessage, GlobalSearch, GlobalSearchContainer, GlobalSearchDisclosureContext, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, Image, IntlProvider, LeftArrowFilledIcon, LinkButton, MultiSelect, NumberField, Page, PageContainer, ProductCard, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, RouteButton, RouteLink, RouteProvider, Select, ShowAll, Sidebar, SidebarDetectBreakpoint, SidebarProvider, TextAlignedArrowIcon, TextField, UpdateCartLineByIdError, VariantDisplayTypeValues, breakpoints$1 as breakpoints, createSonicSearchClient, useAddProductToCurrentCart, useAlgolia, useAlgoliaSearch, useBreakpoint, useCartEvents, useDebouncedCallback, useDeleteCartLineById, useDisclosure, useFavorite, useFetchCurrentCartLines, useFetchProductListingPageData, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useNavigate, useScrollLock, useUpdateCartLineById };

package/dist/overlay-background/overlay-background.d.ts

@@ -1,6 +1,7 @@
 interface OverlayBackgroundProps {
+    className?: string;
     isOpen: boolean;
     onClick: VoidFunction;
 }
-export declare function OverlayBackground({ isOpen, onClick }: OverlayBackgroundProps): React.ReactPortal | null;
+export declare function OverlayBackground({ className, isOpen, onClick, }: OverlayBackgroundProps): React.ReactPortal | null;
 export {};

package/dist/styles.css

@@ -211,8 +211,8 @@
 :root {
   --carousel-layer: 10;
   --sidebar-layer: 100;
-  --overlay-background-layer: 99;
   --search-layer: 200;
+  --header-layer: 15;
 }
 
 /* stylelint-disable max-nesting-depth */
@@ -2343,7 +2343,6 @@
 
 .overlay-background-module-j7R7T {
   position: fixed;
-  z-index: calc(var(--overlay-background-layer) - 1);
   -webkit-backdrop-filter: blur(4px);
           backdrop-filter: blur(4px);
   background-color: rgb(0 0 0 / 52%);
@@ -2415,6 +2414,20 @@
   }
 }
 
+.global-search-module-mmXv1 {
+  z-index: calc(var(--header-layer) - 1);
+}
+
+.global-search-module-d2g2F {
+  position: relative;
+  z-index: var(--search-layer);
+}
+
+.global-search-module-d2g2F .global-search-module-Sx8Lx {
+    position: relative;
+    z-index: -1;
+  }
+
 .search-input-module-xCCzd {
   box-sizing: border-box;
 }
@@ -2532,13 +2545,3 @@
     pointer-events: none;
     transform: translateY(-100%);
   }
-
-.global-search-module-d2g2F {
-  position: relative;
-  z-index: var(--search-layer);
-}
-
-  .global-search-module-d2g2F .global-search-module-Sx8Lx {
-    position: relative;
-    z-index: -1;
-  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "type": "module",
   "license": "MIT",
   "engines": {