@sonic-equipment/ui 0.0.57 → 0.0.59

package/dist/index.d.ts

@@ -3899,7 +3899,7 @@ interface TextFieldProps {
  */
 declare function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel, size, value, }: TextFieldProps): react_jsx_runtime.JSX.Element;
 
-type TranslationId = "'{0}' in all products" | ' to your account to manage your lists.' | 'Add to list' | 'An unexpected error occured' | 'Cancel' | 'Create new list' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Double check your spelling' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Hide filters' | 'Incl. VAT' | 'List name already exists' | 'New list name' | 'Please Sign In' | 'Popular searches' | 'Products' | 'Quick access' | 'Recent searches' | 'Searching again using more general terms' | 'Select a list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, we could not find matches for' | 'Sort by' | 'Submit' | 'Suggestions' | 'Use fewer keywords' | 'You could try' | 'You must ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';
+type TranslationId = "'{0}' in all products" | ' to your account to manage your lists.' | 'Add to list' | 'An unexpected error occured' | 'Cancel' | 'Create new list' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Double check your spelling' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Hide filters' | 'Incl. VAT' | 'List name already exists' | 'New list name' | 'Please Sign In' | 'Popular searches' | 'Products' | 'Quick access' | 'Recent searches' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, we could not find matches for' | 'Sort by' | 'Submit' | 'Suggestions' | 'Use fewer keywords' | 'You could try' | 'You must ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';
 
 interface FormattedMessageProps {
     fallbackValue?: string;
@@ -3927,8 +3927,9 @@ declare function useFormattedMessage(): FormattedMessageFunction;
 
 interface ProductOverviewGridProps {
     children?: ReactNode;
+    isLoading?: boolean;
 }
-declare function ProductOverviewGrid({ children }: ProductOverviewGridProps): react_jsx_runtime.JSX.Element;
+declare function ProductOverviewGrid({ children, isLoading, }: ProductOverviewGridProps): react_jsx_runtime.JSX.Element;
 
 declare function LoadingOverlay(): react_jsx_runtime.JSX.Element;
 
@@ -4045,12 +4046,11 @@ interface AlgoliaPaginationProps {
 }
 declare function AlgoliaPagination({ onChange }: AlgoliaPaginationProps): react_jsx_runtime.JSX.Element;
 
-declare const createSonicSearchClient: ({ apiKey, appId, host, path, }: {
+declare const createSonicSearchClient: ({ apiKey, appId, host, }: {
     apiKey: string;
     appId: string;
     host: string | undefined;
-    path: string;
-}) => SearchClient;
+}) => algoliasearch.SearchClient;
 
 interface AlgoliaInsightsProviderGlobalState {
     index?: string | undefined;

package/dist/index.js

@@ -4,7 +4,8 @@ import React, { useState, useCallback, useEffect, useRef, createContext, useCont
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Link, Button as Button$1, Breadcrumbs, Breadcrumb as Breadcrumb$1, FieldError as FieldError$1, useContextProps, InputContext, Input as Input$1, Label as Label$1, NumberField as NumberField$1, Checkbox as Checkbox$1, Select as Select$1, SelectValue, Popover, ListBox, Section, Header, ListBoxItem, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1, ModalOverlay, Modal as Modal$1, Dialog as Dialog$1, Form } from 'react-aria-components';
 import clsx from 'clsx';
-import { useHierarchicalMenu, useCurrentRefinements, useClearRefinements, useRefinementList, useHits, useDynamicWidgets, usePagination, useInstantSearch, InstantSearch, Configure, useSortBy } from 'react-instantsearch';
+import { useHierarchicalMenu, useCurrentRefinements, useClearRefinements, useRefinementList, useHits, useDynamicWidgets, usePagination, useInstantSearch as useInstantSearch$1, InstantSearch, Configure, useSortBy } from 'react-instantsearch';
+import { useInstantSearch } from 'react-instantsearch-core';
 import aa from 'search-insights';
 import { history } from 'instantsearch.js/es/lib/routers/index.js';
 import { simple } from 'instantsearch.js/es/lib/stateMappings/index.js';
@@ -16,7 +17,7 @@ import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query
 import { createLocalStorageRecentSearchesPlugin, search } from '@algolia/autocomplete-plugin-recent-searches';
 import { TransitionGroup, Transition } from 'react-transition-group';
 
-const sandboxUrls = /local|insitesandbox.com|azurestaticapps|ui.sonic-equipment.com|sandbox|accept/i;
+const sandboxUrls = /local|insitesandbox.com|azurestaticapps|ui.sonic-equipment.com|sandbox|accept|test/i;
 const productionUrls = /sonic-equipment.com|production/i;
 let environmentUrl;
 function getEnvironment() {
@@ -882,22 +883,22 @@ function SolidHomeIcon(props) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M15.039782,22 C14.6690193,22 14.3684378,21.6994185 14.3684378,21.3286559 L14.3684378,15.6029043 L9.34495251,15.6029043 L9.34495251,21.3286559 C9.34495251,21.6994185 9.04437101,22 8.67345678,22 L3.67134415,22 C3.3005815,22 3,21.6994185 3,21.3286559 L3,9.79560307 C3,9.60127857 3.08412644,9.41665514 3.23055192,9.28917706 L11.4158271,2.16495603 C11.6686612,1.94501466 12.0447291,1.94501466 12.2975632,2.16495603 L20.4828384,9.28917706 C20.6292639,9.41665514 20.7133903,9.60127857 20.7133903,9.79560307 L20.7133903,21.3286559 C20.7133903,21.6994185 20.4128088,22 20.0418946,22 L15.039782,22 Z", fillRule: "evenodd" }) }));
 }
 
-var styles$S = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ"};
+var styles$R = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ"};
 
 function BreadcrumbShort({ links }) {
     const homeLink = links[0];
     const previousLink = links[links.length - 2];
-    return (jsx(Breadcrumbs, { className: styles$S.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles$S.breadcrumb, children: jsxs(RouteLink, { className: styles$S.link, isDisabled: false, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles$S.icon }), previousLink === undefined || previousLink === homeLink ? (jsx(SolidHomeIcon, { className: styles$S.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
+    return (jsx(Breadcrumbs, { className: styles$R.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles$R.breadcrumb, children: jsxs(RouteLink, { className: styles$R.link, isDisabled: false, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles$R.icon }), previousLink === undefined || previousLink === homeLink ? (jsx(SolidHomeIcon, { className: styles$R.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
 }
 function BreadcrumbLongItem({ index, isDisabled, link, }) {
-    return (jsx(Breadcrumb$1, { className: styles$S.breadcrumb, children: jsxs(RouteLink, { className: styles$S.link, href: link.href, isDisabled: isDisabled, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles$S['previous-icon'], styles$S.icon) }), link.label] }) }, index));
+    return (jsx(Breadcrumb$1, { className: styles$R.breadcrumb, children: jsxs(RouteLink, { className: styles$R.link, href: link.href, isDisabled: isDisabled, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles$R['previous-icon'], styles$R.icon) }), link.label] }) }, index));
 }
 function BreadcrumbLong({ links }) {
     const linksWithoutFirst = links.slice(1);
     const homeLink = links[0];
     if (!homeLink)
         return null;
-    return (jsxs(Breadcrumbs, { className: styles$S.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles$S.breadcrumb, children: jsx(RouteLink, { className: styles$S.link, href: homeLink.href, children: jsx(SolidHomeIcon, { className: clsx(styles$S['home-icon'], styles$S.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, index)))] }));
+    return (jsxs(Breadcrumbs, { className: styles$R.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles$R.breadcrumb, children: jsx(RouteLink, { className: styles$R.link, href: homeLink.href, children: jsx(SolidHomeIcon, { className: clsx(styles$R['home-icon'], styles$R.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, index)))] }));
 }
 function Breadcrumb({ links }) {
     const { lg } = useBreakpoint();
@@ -910,14 +911,14 @@ function GlyphsArrowBoldCapsRightIcon(props) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "11", viewBox: "0 0 11 11", width: "11", children: jsx("path", { d: "M2.31124163,11 C2.06716529,11 1.91839241,10.7730596 2.04771379,10.5980857 L6.08820761,5.13116556 C6.42092595,4.68081431 6.37243043,4.10595375 5.96732409,3.70073526 L2.70240329,0.432177991 C2.53178078,0.261409485 2.67540212,0 2.93972934,0 L5.48361239,0 C5.57518542,0 5.6619622,0.0340936243 5.72102726,0.0931942463 L8.14882304,2.52367916 C9.1607451,3.53657521 9.28198389,4.9729381 8.45036569,6.09787751 L4.91836426,10.876542 C4.86160851,10.9533653 4.7620417,11 4.65492523,11 L2.31124163,11 Z", fillRule: "evenodd" }) }));
 }
 
-var styles$R = {"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"};
+var buttonStyles = {"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$R.button, styles$R[variant], styles$R[size], styles$R[color], { [styles$R.condensed]: condensed }, { [styles$R.icon]: icon }, styles$R[_pseudo]), isDisabled: isDisabled, 
+    return (jsxs(Button$1, { className: clsx(className, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], { [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, buttonStyles[_pseudo]), isDisabled: isDisabled, 
         // Workaround for adobe/react-spectrum #963
         // 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$R.icon, children: icon })), children, withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: styles$R['right-arrow-icon'] })), icon && iconPosition === 'right' && (jsx("span", { className: styles$R.icon, children: icon }))] }));
+        onClick: e => e.preventDefault(), onPress: onPress, type: type, children: [icon && iconPosition === 'left' && (jsx("span", { className: buttonStyles.icon, children: icon })), children, withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), icon && iconPosition === 'right' && (jsx("span", { className: buttonStyles.icon, children: icon }))] }));
 }
 
 var styles$Q = {"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"};
@@ -6782,16 +6783,16 @@ function IntlProvider({ children, formatMessage, languageCode: _languageCode, })
     return (jsx(IntlContext.Provider, { value: { formatMessage, languageCode, updateLanguageCode }, children: children }));
 }
 
-var styles$v = {"product-grid":"product-overview-grid-module-bzys-","grid-item":"product-overview-grid-module-MlUVA"};
+var styles$v = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K"};
 
-function ProductOverviewGrid({ children }) {
-    return (jsx("div", { className: styles$v['product-grid'], children: Children.map(children, (child, index) => (jsx("div", { className: styles$v['grid-item'], children: child }, index))) }));
+function ProgressCircle({ className }) {
+    return (jsxs("svg", { className: clsx(styles$v['progress-circle'], className), viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [jsx("title", { children: "Spinner" }), jsxs("defs", { children: [jsx("pattern", { height: "100%", id: "pattern-1", patternUnits: "objectBoundingBox", width: "100%", children: jsx("use", { xlinkHref: "#image-2" }) }), jsx("image", { height: "24", id: "image-2", width: "24", xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAB7UlEQVRIDZ2VSaoCQQyG01rOoBtBr+YZXXsFL+BGEHcqDuCE89SPL480hdpiGYil3an/S1KDUavViq/Xq1wul8RPp5Ocz2dhPB6PiR8OB42RAHO5XE7D4zgW/PF4CM/u97tks1n1TCYjURSpB2hraALglw8BQGXOuQQSKk68y+fzL9lRBQAqAUIlVkUoxBUKBZ3sC1irbrdbUoX/PgTyAqDXmFVBBVRCFfYuGMBk67UvRCUA2FFAfgKUSiWhFTgQA9ESjLVgC7NWwEPNFYtFFUEICJnigAxCFbvd7jcAFVi/gbDoCALmOzCMAzebzUILEFculxVgOwcIDqRSqaiTBDadToMhziYDwBgNRmW0rdFoSLPZ1PeDwUDHbz+iTqejyv5VYHuekbVggavVqkLq9fq32hqnLTJxdgmijPQeYSqs1Woa3G63g8QJ1haZKMJkjDgLjLi/Nbvd7m8ARCxry9x2jyn2ej2ZTCb28+tRK/Azpy3vrN/vy2azeffq4zM9aLTFP1jPM4bDoWbPH06o6WXn9/lZgDMxGo1kuVwG/5uhlfkkTsB4PJb5fC7b7VYPH89C7P9GS5nBLYr4er2W/X6vhy4lNPXxR8BisdDWkD13Ee0KtVQAgqvVSncO2XNlc3WEWirAxLmmgf0K+ANZ6DTlvO5jwwAAAABJRU5ErkJggg==" })] }), jsx("g", { fill: "none", fillRule: "evenodd", id: "Page-1", stroke: "none", strokeWidth: "1", children: jsx("path", { d: "M12,0 C18.627417,0 24,5.372583 24,12 C24,14.7277828 23.0855773,17.3196292 21.4324752,19.4188392 C19.1717866,22.2895997 15.7255176,24 12,24 C11.2636203,24 10.6666667,23.4030463 10.6666667,22.6666667 C10.6666667,21.930287 11.2636203,21.3333333 12,21.3333333 C14.8994206,21.3333333 17.5771113,20.0043823 19.3374325,17.7690188 C20.6234737,16.1359252 21.3333333,14.1238938 21.3333333,12 C21.3333333,6.84534234 17.1546577,2.66666667 12,2.66666667 C6.84534234,2.66666667 2.66666667,6.84534234 2.66666667,12 C2.66666667,14.4546154 3.61656005,16.756214 5.28844833,18.485859 C5.80023235,19.015323 5.78589988,19.8594213 5.25643588,20.3712053 C4.72697187,20.8829893 3.88287357,20.8686569 3.37108955,20.3391928 C1.22326178,18.1171666 0,15.1531945 0,12 C0,5.372583 5.372583,0 12,0 Z", fill: "url(#pattern-1)", fillRule: "nonzero", id: "Spinner" }) })] }));
 }
 
-var styles$u = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K"};
+var styles$u = {"product-grid":"product-overview-grid-module-bzys-","loading-panel":"product-overview-grid-module-XikkF","fade-in":"product-overview-grid-module-A6CS7","progress-circle":"product-overview-grid-module-DWnnI","grid-item":"product-overview-grid-module-MlUVA"};
 
-function ProgressCircle({ className }) {
-    return (jsxs("svg", { className: clsx(styles$u['progress-circle'], className), viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [jsx("title", { children: "Spinner" }), jsxs("defs", { children: [jsx("pattern", { height: "100%", id: "pattern-1", patternUnits: "objectBoundingBox", width: "100%", children: jsx("use", { xlinkHref: "#image-2" }) }), jsx("image", { height: "24", id: "image-2", width: "24", xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAB7UlEQVRIDZ2VSaoCQQyG01rOoBtBr+YZXXsFL+BGEHcqDuCE89SPL480hdpiGYil3an/S1KDUavViq/Xq1wul8RPp5Ocz2dhPB6PiR8OB42RAHO5XE7D4zgW/PF4CM/u97tks1n1TCYjURSpB2hraALglw8BQGXOuQQSKk68y+fzL9lRBQAqAUIlVkUoxBUKBZ3sC1irbrdbUoX/PgTyAqDXmFVBBVRCFfYuGMBk67UvRCUA2FFAfgKUSiWhFTgQA9ESjLVgC7NWwEPNFYtFFUEICJnigAxCFbvd7jcAFVi/gbDoCALmOzCMAzebzUILEFculxVgOwcIDqRSqaiTBDadToMhziYDwBgNRmW0rdFoSLPZ1PeDwUDHbz+iTqejyv5VYHuekbVggavVqkLq9fq32hqnLTJxdgmijPQeYSqs1Woa3G63g8QJ1haZKMJkjDgLjLi/Nbvd7m8ARCxry9x2jyn2ej2ZTCb28+tRK/Azpy3vrN/vy2azeffq4zM9aLTFP1jPM4bDoWbPH06o6WXn9/lZgDMxGo1kuVwG/5uhlfkkTsB4PJb5fC7b7VYPH89C7P9GS5nBLYr4er2W/X6vhy4lNPXxR8BisdDWkD13Ee0KtVQAgqvVSncO2XNlc3WEWirAxLmmgf0K+ANZ6DTlvO5jwwAAAABJRU5ErkJggg==" })] }), jsx("g", { fill: "none", fillRule: "evenodd", id: "Page-1", stroke: "none", strokeWidth: "1", children: jsx("path", { d: "M12,0 C18.627417,0 24,5.372583 24,12 C24,14.7277828 23.0855773,17.3196292 21.4324752,19.4188392 C19.1717866,22.2895997 15.7255176,24 12,24 C11.2636203,24 10.6666667,23.4030463 10.6666667,22.6666667 C10.6666667,21.930287 11.2636203,21.3333333 12,21.3333333 C14.8994206,21.3333333 17.5771113,20.0043823 19.3374325,17.7690188 C20.6234737,16.1359252 21.3333333,14.1238938 21.3333333,12 C21.3333333,6.84534234 17.1546577,2.66666667 12,2.66666667 C6.84534234,2.66666667 2.66666667,6.84534234 2.66666667,12 C2.66666667,14.4546154 3.61656005,16.756214 5.28844833,18.485859 C5.80023235,19.015323 5.78589988,19.8594213 5.25643588,20.3712053 C4.72697187,20.8829893 3.88287357,20.8686569 3.37108955,20.3391928 C1.22326178,18.1171666 0,15.1531945 0,12 C0,5.372583 5.372583,0 12,0 Z", fill: "url(#pattern-1)", fillRule: "nonzero", id: "Spinner" }) })] }));
+function ProductOverviewGrid({ children, isLoading, }) {
+    return (jsxs("div", { className: styles$u['product-grid'], children: [Children.map(children, (child, index) => (jsx("div", { className: styles$u['grid-item'], children: child }, index))), isLoading && (jsx("div", { className: styles$u['loading-panel'], children: jsx(ProgressCircle, { className: styles$u['progress-circle'] }) }))] }));
 }
 
 var styles$t = {"loading-overlay":"loading-overlay-module-L67Gy"};
@@ -7357,9 +7358,11 @@ function useProductHits() {
 }
 
 function ProductOverview() {
+    const { status } = useInstantSearch();
+    const isLoading = status !== 'idle';
     const products = useProductHits();
     const { sendAddToCartFromProductListPageEvent, sendProductClickFromProductListPageEvent, } = useAlgoliaInsights();
-    return (jsx(ProductOverviewGrid, { children: products.map(product => (jsx(ConnectedProductCard, { href: product.storefrontSlug, image: {
+    return (jsx(ProductOverviewGrid, { isLoading: isLoading, children: products.map(product => (jsx(ConnectedProductCard, { href: product.storefrontSlug, image: {
                 fit: 'contain',
                 image: product.image,
                 title: product.name,
@@ -7542,7 +7545,7 @@ function createQueryStringRouting({ algoliaIndex, categoryPages, }) {
 }
 
 function AlgoliaInsightInstantSearchProvider({ children, }) {
-    const { results } = useInstantSearch();
+    const { results } = useInstantSearch$1();
     return (jsx(AlgoliaInsightsProvider, { value: {
             index: results.index,
             queryId: results.queryID,
@@ -7570,20 +7573,21 @@ const offlineSearchClient = {
     },
 };
 
-const createSonicSearchClient = ({ apiKey, appId, host, path, }) => {
+const createSonicSearchClient = ({ apiKey, appId, host, }) => {
     const searchClient = algoliasearch(appId, apiKey);
-    if (host) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        searchClient.search = async (requests) => {
-            const res = await fetch(`${config.PROXY_API_URL}${path}`, {
-                body: JSON.stringify({ requests }),
-                headers: { 'Content-Type': 'application/json' },
-                method: 'post',
-            });
-            return await res.json();
-        };
-    }
+    const read = searchClient.transporter.read;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    searchClient.transporter.hosts = [{ accept: 1, protocol: 'https', url: host }];
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    searchClient.transporter.timeouts = { connect: 3000, read: 3000, write: 3000 };
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    searchClient.transporter.read = (request) => {
+        request.path = `/api/v1/bff/${request.path.replace('*', 'x')}`;
+        return read(request);
+    };
     return searchClient;
 };
 
@@ -7706,7 +7710,6 @@ function ProductListingPage({ pageUrl, searchClient: _searchClient, }) {
             apiKey: config.ALGOLIA_API_KEY,
             appId: config.ALGOLIA_APP_ID,
             host: config.ALGOLIA_PROXY_HOST,
-            path: '/search',
         }), [_searchClient]);
     if (isError) {
         if (!isRequestError(error))
@@ -8011,7 +8014,6 @@ function AlgoliaSearchProvider({ children, searchClient: _searchClient, }) {
             apiKey: config.ALGOLIA_API_KEY,
             appId: config.ALGOLIA_APP_ID,
             host: config.ALGOLIA_PROXY_HOST,
-            path: '/autocomplete',
         }), [_searchClient]);
     const languageCode = useLanguageCode();
     const index = getAlgoliaIndex(environment, languageCode);
@@ -8207,10 +8209,10 @@ function SearchSection({ button, children, className, title, }) {
     return (jsxs("div", { className: clsx(styles$7['search-section'], className), children: [jsxs("div", { className: styles$7.header, children: [title && jsx("h2", { className: styles$7.title, children: title }), button && button] }), jsx("div", { className: styles$7.content, children: children })] }));
 }
 
-var styles$6 = {"content":"search-content-module-KIok6","left":"search-content-module-YRLIf","right":"search-content-module-qK5sg","product-results":"search-content-module-bcFCH","no-results-text":"search-content-module-H-FX2","title":"search-content-module-ywvOI","suggestions":"search-content-module-mhiBZ","list":"search-content-module-coPAt"};
+var styles$6 = {"section-container":"search-content-module-ZMwlB","content":"search-content-module-KIok6","left":"search-content-module-YRLIf","right":"search-content-module-qK5sg","button-container":"search-content-module-w-ORq","show-all-button":"search-content-module-bO1Q0","product-results":"search-content-module-bcFCH","no-results-text":"search-content-module-H-FX2","title":"search-content-module-ywvOI","suggestions":"search-content-module-mhiBZ","list":"search-content-module-coPAt"};
 
-function SectionContainer({ leftContent, rightContent, }) {
-    return (jsxs("div", { className: styles$6['content'], children: [jsx("div", { className: styles$6['left'], children: leftContent }), jsx("div", { className: styles$6['right'], children: rightContent })] }));
+function SectionContainer({ buttons, leftContent, rightContent, }) {
+    return (jsxs("div", { className: styles$6['section-container'], children: [jsxs("div", { className: styles$6['content'], children: [jsx("div", { className: styles$6['left'], children: leftContent }), jsx("div", { className: styles$6['right'], children: rightContent })] }), jsx("div", { className: styles$6['button-container'], children: buttons })] }));
 }
 
 function NoResults() {
@@ -8314,7 +8316,9 @@ function StrokeRecentIcon(props) {
 }
 
 function WithResults() {
-    return (jsx(SectionContainer, { leftContent: jsx(SuggestionsSection, {}), rightContent: jsx(ProductResultsSection, {}) }));
+    const { state } = useAlgoliaSearch();
+    const resultsCount = state.collections.reduce((acc, collection) => acc + collection.items.length, 0);
+    return (jsx("div", { children: jsx(SectionContainer, { buttons: jsxs(RouteButton, { className: clsx(styles$6['show-all-button'], buttonStyles.button, buttonStyles.secondary, buttonStyles.outline, buttonStyles.md), href: `/search?keyword=${state.query}`, children: [jsx(FormattedMessage, { id: "See all results" }), " (", resultsCount, ")", jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })] }), leftContent: jsx(SuggestionsSection, {}), rightContent: jsx(ProductResultsSection, {}) }) }));
 }
 function SuggestionsSection() {
     const { autocomplete, categories, querySuggestions, recentSearches } = useAlgoliaSearch();

package/dist/src/algolia/algolia-sonic-searchclient.d.ts

@@ -1,7 +1,5 @@
-import { SearchClient } from 'algoliasearch';
-export declare const createSonicSearchClient: ({ apiKey, appId, host, path, }: {
+export declare const createSonicSearchClient: ({ apiKey, appId, host, }: {
     apiKey: string;
     appId: string;
     host: string | undefined;
-    path: string;
-}) => SearchClient;
+}) => import("algoliasearch").SearchClient;

package/dist/src/global-search/search-result-panel/sections/section-container.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 interface SearchContentProps {
+    buttons?: ReactNode;
     leftContent: ReactNode;
     rightContent: ReactNode;
 }
-export declare function SectionContainer({ leftContent, rightContent, }: SearchContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionContainer({ buttons, leftContent, rightContent, }: SearchContentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/intl/translation-id.d.ts

@@ -1 +1 @@
-export type TranslationId = "'{0}' in all products" | ' to your account to manage your lists.' | 'Add to list' | 'An unexpected error occured' | 'Cancel' | 'Create new list' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Double check your spelling' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Hide filters' | 'Incl. VAT' | 'List name already exists' | 'New list name' | 'Please Sign In' | 'Popular searches' | 'Products' | 'Quick access' | 'Recent searches' | 'Searching again using more general terms' | 'Select a list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, we could not find matches for' | 'Sort by' | 'Submit' | 'Suggestions' | 'Use fewer keywords' | 'You could try' | 'You must ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';
+export type TranslationId = "'{0}' in all products" | ' to your account to manage your lists.' | 'Add to list' | 'An unexpected error occured' | 'Cancel' | 'Create new list' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Double check your spelling' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Hide filters' | 'Incl. VAT' | 'List name already exists' | 'New list name' | 'Please Sign In' | 'Popular searches' | 'Products' | 'Quick access' | 'Recent searches' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, we could not find matches for' | 'Sort by' | 'Submit' | 'Suggestions' | 'Use fewer keywords' | 'You could try' | 'You must ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';

package/dist/src/lists/product-overview-grid/product-overview-grid.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 export interface ProductOverviewGridProps {
     children?: ReactNode;
+    isLoading?: boolean;
 }
-export declare function ProductOverviewGrid({ children }: ProductOverviewGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductOverviewGrid({ children, isLoading, }: ProductOverviewGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/styles.css

@@ -1851,17 +1851,62 @@
     display: none;
   }
 
+.progress-circle-module-4nweP {
+  --width: var(--space-24);
+
+  width: var(--width);
+  height: var(--width);
+  animation: progress-circle-module-kCf7K 0.6s infinite linear;
+}
+
+@keyframes progress-circle-module-kCf7K {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .product-overview-grid-module-bzys- {
   --amount-of-columns: 1;
   --column-gap: 0;
   --row-gap: var(--space-16);
 
+  position: relative;
   display: grid;
   width: 100%;
   gap: var(--row-gap) var(--column-gap);
   grid-template-columns: repeat(var(--amount-of-columns), 1fr);
 }
 
+  .product-overview-grid-module-bzys- .product-overview-grid-module-XikkF {
+    position: absolute;
+    z-index: 100;
+    display: flex;
+    justify-content: center;
+    padding: 120px;
+    animation: product-overview-grid-module-A6CS7 0.3s ease-in-out forwards;
+    background-color: rgb(255 255 255 / 0%);
+    inset: 0;
+    pointer-events: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+
+  .product-overview-grid-module-bzys- .product-overview-grid-module-XikkF .product-overview-grid-module-DWnnI {
+      position: fixed;
+      top: 50vh;
+    }
+
+@keyframes product-overview-grid-module-A6CS7 {
+  from {
+    background-color: rgb(255 255 255 / 0%);
+  }
+
+  to {
+    background-color: rgb(255 255 255 / 80%);
+  }
+}
+
 .product-overview-grid-module-MlUVA {
   container-type: inline-size;
 }
@@ -1933,20 +1978,6 @@
       }
 }
 
-.progress-circle-module-4nweP {
-  --width: var(--space-24);
-
-  width: var(--width);
-  height: var(--width);
-  animation: progress-circle-module-kCf7K 0.6s infinite linear;
-}
-
-@keyframes progress-circle-module-kCf7K {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .loading-overlay-module-L67Gy {
   --header-height-desktop: 96px;
   --header-height-mobile: 54px;
@@ -2872,22 +2903,38 @@
     gap: var(--space-16);
   }
 
-.search-content-module-KIok6 {
+.search-content-module-ZMwlB {
   --padding-inline: var(--space-16);
   --padding-block: var(--space-20);
+}
 
+.search-content-module-KIok6 {
   display: grid;
   grid-template-columns: 1fr;
 }
 
-  .search-content-module-KIok6 .search-content-module-YRLIf {
+.search-content-module-KIok6 .search-content-module-YRLIf {
     display: block;
   }
 
-  .search-content-module-KIok6 .search-content-module-qK5sg {
+.search-content-module-KIok6 .search-content-module-qK5sg {
     display: block;
   }
 
+.search-content-module-w-ORq {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: var(--padding-block);
+  gap: var(--space-16);
+  padding-inline: var(--padding-inline);
+}
+
+@media (width < 768px) {
+    .search-content-module-w-ORq .search-content-module-bO1Q0 {
+      width: 100%;
+    }
+  }
+
 .search-content-module-bcFCH {
   --column-gap: var(--space-16);
   --card-width: 154px;

package/package.json

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