@sonic-equipment/ui 0.0.20 → 0.0.21

package/dist/index.js

@@ -1,27 +1,28 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useEffect, createContext, useContext, Children, cloneElement, useRef, useCallback } from 'react';
-import { Button as Button$1, FieldError as FieldError$1, useContextProps, InputContext, Input as Input$1, Label as Label$1, NumberField as NumberField$1, Link, Checkbox as Checkbox$1, Select as Select$1, SelectValue, Popover, ListBox, ListBoxItem, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1 } from 'react-aria-components';
+import { forwardRef, useState, useEffect, createContext, useContext, Children, cloneElement, useRef, useCallback, createElement } from 'react';
+import { Button as Button$1, FieldError as FieldError$1, useContextProps, InputContext, Input as Input$1, Label as Label$1, NumberField as NumberField$1, Link, Checkbox as Checkbox$1, Select as Select$1, SelectValue, Popover, ListBox, Section, Header, ListBoxItem, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1 } from 'react-aria-components';
 import clsx from 'clsx';
+import { useCurrentRefinements, useClearRefinements, useRefinementList, useHits, useDynamicWidgets, usePagination, useSortBy } from 'react-instantsearch';
 
 function RightArrowFilledIcon(props) {
     return (jsx("svg", { height: "11", viewBox: "0 0 6 11", width: "6", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M.267 11a.263.263 0 0 1-.226-.402l3.463-5.467a1.2 1.2 0 0 0-.103-1.43L.602.432A.262.262 0 0 1 .805 0h2.181c.078 0 .153.034.203.093l2.081 2.43a3 3 0 0 1 .259 3.575L2.5 10.877a.267.267 0 0 1-.225.123H.266z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles$n = {"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 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"};
 
 function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, icon, iconPosition = 'left', isDisabled, onPress, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
     if (children && icon)
         console.warn('Button should not have both children and icon. Icon has precedence.');
-    return (jsxs(Button$1, { className: clsx(className, styles$n.button, styles$n[variant], styles$n[size], styles$n[color], { [styles$n.condensed]: condensed }, { [styles$n.icon]: icon }, styles$n[_pseudo]), isDisabled: isDisabled, onPress: onPress, type: type, children: [icon && iconPosition === 'left' && (jsx("span", { className: styles$n.icon, children: icon })), children, withArrow && (jsx(RightArrowFilledIcon, { className: styles$n['right-arrow-icon'] })), icon && iconPosition === 'right' && (jsx("span", { className: styles$n.icon, children: icon }))] }));
+    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, onPress: onPress, type: type, children: [icon && iconPosition === 'left' && (jsx("span", { className: styles$r.icon, children: icon })), children, withArrow && (jsx(RightArrowFilledIcon, { className: styles$r['right-arrow-icon'] })), icon && iconPosition === 'right' && (jsx("span", { className: styles$r.icon, children: icon }))] }));
 }
 
-var styles$m = {"field-error":"field-error-module-FXnIg"};
+var styles$q = {"field-error":"field-error-module-FXnIg"};
 
 function FieldError({ children }) {
-    return (jsx(FieldError$1, { className: styles$m['field-error'], children: children }));
+    return (jsx(FieldError$1, { className: styles$q['field-error'], children: children }));
 }
 
-var styles$l = {"input-container":"input-module-2woJR","shadow-input":"input-module-pNKEt","lg":"input-module-Dx2qC","md":"input-module-sH6e7","focus":"input-module-hEEuy","growing-input":"input-module-6HwY4"};
+var styles$p = {"input-container":"input-module-2woJR","shadow-input":"input-module-pNKEt","lg":"input-module-Dx2qC","md":"input-module-sH6e7","focus":"input-module-hEEuy","growing-input":"input-module-6HwY4"};
 
 /**
  * This component is used to create an input that grows as the user types.
@@ -36,33 +37,33 @@ const Input = forwardRef(({ _pseudo = 'none', autoGrow, size = 'lg', ...inputPro
     const handleChange = (event) => isControlled
         ? onChange?.(event)
         : setUncontrolledValue(event.target.value);
-    return (jsx("div", { className: clsx(styles$l['input-container'], styles$l[size], styles$l[_pseudo]), children: jsxs("div", { className: clsx({ [styles$l['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ref: ref, onChange: handleChange }), autoGrow && jsx("span", { className: styles$l['shadow-input'], children: value })] }) }));
+    return (jsx("div", { className: clsx(styles$p['input-container'], styles$p[size], styles$p[_pseudo]), children: jsxs("div", { className: clsx({ [styles$p['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ref: ref, onChange: handleChange }), autoGrow && jsx("span", { className: styles$p['shadow-input'], children: value })] }) }));
 });
 Input.displayName = 'Input';
 
-var styles$k = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
+var styles$o = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
 
 function Label({ children, isRequired }) {
     if (!children)
         return null;
-    return (jsxs(Label$1, { className: styles$k.label, children: [children, isRequired && jsx("span", { className: styles$k.required, children: "*" })] }));
+    return (jsxs(Label$1, { className: styles$o.label, children: [children, isRequired && jsx("span", { className: styles$o.required, children: "*" })] }));
 }
 
-var styles$j = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh"};
+var styles$n = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh"};
 
 /**
  * This component is used to create a number field.
  * This field can also grow when a user types in text.
  */
-function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions = { style: 'decimal', useGrouping: false }, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel = true, size = 'lg', value, withButtons, }) {
-    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$j.field, styles$j[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$j['button-input-container'], children: [withButtons && jsx(Button$1, { slot: "decrement", children: "-" }), jsx(Input, { autoGrow: autoGrow, maxLength: maxLength, placeholder: placeholder, size: size }), withButtons && jsx(Button$1, { slot: "increment", children: "+" })] }), jsx(FieldError, {})] }));
+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, }) {
+    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$n.field, styles$n[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$n['button-input-container'], children: [withButtons && jsx(Button$1, { slot: "decrement", children: "-" }), jsx(Input, { autoGrow: autoGrow, maxLength: maxLength, placeholder: placeholder, size: size }), withButtons && jsx(Button$1, { slot: "increment", children: "+" })] }), jsx(FieldError, {})] }));
 }
 
 function CartFilledIcon(props) {
     return (jsx("svg", { height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M7.896 16.666a2.603 2.603 0 1 1 0 5.207 2.603 2.603 0 0 1 0-5.207zm8.925 0a2.603 2.603 0 1 1 0 5.207 2.603 2.603 0 0 1 0-5.207zM7.896 18.1c-.645 0-1.17.524-1.17 1.169s.525 1.17 1.17 1.17a1.171 1.171 0 0 0 0-2.34zm8.925 0c-.645 0-1.17.524-1.17 1.169s.525 1.17 1.17 1.17a1.171 1.171 0 0 0 0-2.34zM4.589 3c.016 0 .032.004.048.005a.714.714 0 0 1 .146.025l.05.016a.7.7 0 0 1 .083.037l.04.021a.712.712 0 0 1 .076.053l.035.03a.699.699 0 0 1 .168.223.703.703 0 0 1 .061.209c.002.014.007.027.008.042l.207 2.646h15.776c.027.001.05.006.073.008.026.003.052.004.077.01.022.004.036.011.05.016.03.008.058.016.085.028.02.009.037.02.056.03.022.012.044.024.065.038.019.013.035.029.053.044.017.015.036.029.052.046.015.016.028.034.042.051.015.019.03.037.044.057.011.018.02.038.03.057.012.021.024.042.033.065.009.022.014.044.021.067.006.022.014.043.018.066.006.027.007.054.009.081.001.018.005.035.005.053-.001.031-.005.054-.008.077-.003.026-.004.052-.01.077l-1.39 6.054-.004.017a.698.698 0 0 1-.033.1l-.008.024a.716.716 0 0 1-.06.11l-.024.03a.707.707 0 0 1-.057.07l-.035.033a.695.695 0 0 1-.175.117l-.048.022a.723.723 0 0 1-.083.026c-.014.003-.027.008-.041.01a.707.707 0 0 1-.134.014H6.096l.112 1.427H19.41a.717.717 0 0 1 0 1.434H5.544a.714.714 0 0 1-.14-.015c-.015-.003-.03-.008-.044-.012-.03-.008-.06-.016-.087-.027-.018-.008-.034-.017-.05-.026-.024-.012-.048-.023-.07-.037-.016-.011-.03-.024-.046-.036-.02-.016-.04-.03-.058-.048-.015-.014-.027-.03-.04-.044-.017-.02-.033-.038-.048-.058-.012-.017-.021-.034-.032-.052a.678.678 0 0 1-.035-.065c-.009-.02-.016-.04-.023-.06a.715.715 0 0 1-.033-.136l-.008-.045-.904-11.571H2.717a.717.717 0 1 1 0-1.434z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles$i = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
+var styles$m = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
 
 function AddToCartButton({ initialState = 'initial', onChange, quantity, }) {
     const [currentState, setState] = useState(initialState);
@@ -124,17 +125,17 @@ function ManualInputState({ onCancel, onConfirm, quantity, }) {
         e.key === 'Enter' && onConfirm(updatedQuantity);
         e.key === 'Escape' && onCancel();
     };
-    return (jsxs("div", { className: styles$i['manual-input-container'], children: [jsx("div", { className: styles$i['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity, formatOptions: {
+    return (jsxs("div", { className: styles$m['manual-input-container'], children: [jsx("div", { className: styles$m['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity, formatOptions: {
                     maximumFractionDigits: 0,
                     style: 'decimal',
                     useGrouping: false,
                 }, label: "Quantity", maxLength: 4, maxValue: 9999, minValue: 0, name: "quantity", onChange: setQuantity, onKeyUp: onKeyUp, showLabel: false, size: "md" }), jsx(Button, { condensed: true, onPress: () => onConfirm(updatedQuantity), size: "md", children: "OK" })] }));
 }
 
-var styles$h = {"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"};
+var styles$l = {"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"};
 
-function IconButton({ children, className, color = 'primary', onPress, size = 'md', }) {
-    return (jsx(Button$1, { className: clsx(styles$h['icon-button'], styles$h[size], styles$h[color], className), onPress: onPress, children: children }));
+function IconButton({ children, className, color = 'primary', isDisabled, onPress, size = 'md', }) {
+    return (jsx(Button$1, { className: clsx(styles$l['icon-button'], styles$l[size], styles$l[color], className), isDisabled: isDisabled, onPress: onPress, children: children }));
 }
 
 function FavoriteFilledIcon(props) {
@@ -145,29 +146,29 @@ function FavoriteOutlinedIcon(props) {
     return (jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M7.333 3.33c-2.206 0-4 1.793-4 3.997 0 .857.316 1.71.967 2.604L12 20.223l7.705-10.299c.646-.888.962-1.74.962-2.597a4.003 4.003 0 0 0-4-3.996c-1.813 0-3.545 1.232-4.028 2.865a.666.666 0 0 1-1.278 0C10.878 4.563 9.146 3.33 7.333 3.33M12 22c-.21 0-.408-.1-.534-.267L3.227 10.72C2.411 9.599 2 8.46 2 7.327A5.336 5.336 0 0 1 7.333 2c1.892 0 3.669.982 4.667 2.468C12.998 2.982 14.775 2 16.667 2 19.607 2 22 4.39 22 7.327c0 1.133-.411 2.272-1.222 3.387l-8.245 11.019A.667.667 0 0 1 12 22", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles$g = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q"};
+var styles$k = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q"};
 
 function FavoriteButton({ isFavorite, onPress }) {
-    return (jsx(IconButton, { className: clsx(styles$g['favorite-button'], {
-            [styles$g['is-favorite']]: isFavorite,
+    return (jsx(IconButton, { className: clsx(styles$k['favorite-button'], {
+            [styles$k['is-favorite']]: isFavorite,
         }), color: "secondary", onPress: onPress, children: isFavorite ? jsx(FavoriteFilledIcon, {}) : jsx(FavoriteOutlinedIcon, {}) }));
 }
 
-var styles$f = {"link-button":"link-button-module-6i75g"};
+var styles$j = {"link-button":"link-button-module-6i75g"};
 
 function LinkButton({ children, className, href, isDisabled, onPress, target, }) {
     if (href) {
-        return (jsx(Link, { className: clsx(styles$f['link-button'], className), href: href, isDisabled: isDisabled, onPress: onPress, target: target, children: children }));
+        return (jsx(Link, { className: clsx(styles$j['link-button'], className), href: href, isDisabled: isDisabled, onPress: onPress, target: target, children: children }));
     }
-    return (jsx(Button$1, { className: clsx(styles$f['link-button'], className), isDisabled: isDisabled, onPress: onPress, type: "button", children: children }));
+    return (jsx(Button$1, { className: clsx(styles$j['link-button'], className), isDisabled: isDisabled, onPress: onPress, type: "button", children: children }));
 }
 
-var styles$e = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
+var styles$i = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
 
 function Tag({ children }) {
     if (!children)
         return null;
-    return (jsxs("div", { className: styles$e.tag, children: [jsx("div", { className: styles$e.body, children: children }), jsx("svg", { className: styles$e.shape, height: "16", viewBox: "0 0 8 16", width: "8", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M.925 0H0v16h5.412l2.463-8.429c.362-1.238-.08-2.576-1.094-3.315L.925 0z", fill: "currentColor", fillRule: "nonzero" }) })] }));
+    return (jsxs("div", { className: styles$i.tag, children: [jsx("div", { className: styles$i.body, children: children }), jsx("svg", { className: styles$i.shape, height: "16", viewBox: "0 0 8 16", width: "8", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M.925 0H0v16h5.412l2.463-8.429c.362-1.238-.08-2.576-1.094-3.315L.925 0z", fill: "currentColor", fillRule: "nonzero" }) })] }));
 }
 
 const IntlContext = createContext({
@@ -193,7 +194,7 @@ const useFormattedMessage = () => {
 
 const FormattedMessage = ({ id, replacementValues, }) => useFormattedMessage()(id, replacementValues);
 
-var styles$d = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","vat":"product-price-module-96DoG"};
+var styles$h = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","vat":"product-price-module-96DoG"};
 
 const formatPrice = (price) => new Intl.NumberFormat('en-US', {
     maximumFractionDigits: 2,
@@ -205,16 +206,16 @@ function ProductPrice({ className, current, includeVat, original, }) {
     const originalPriceCurrency = original ? formatPrice(original) : null;
     const currentPriceCurrency = formatPrice(current);
     const [wholes, decimals] = currentPriceCurrency.split('.');
-    return (jsxs("div", { className: clsx(className, styles$d['product-price']), children: [!!original && (jsx("span", { className: styles$d['original-price'], children: originalPriceCurrency })), jsxs("div", { className: styles$d['current-price-wrapper'], children: [jsxs("div", { className: styles$d['current-price'], children: [jsx("span", { className: styles$d.wholes, children: wholes }), jsx("span", { className: styles$d.dot, children: "." }), jsx("span", { className: styles$d.decimals, children: decimals })] }), jsx("span", { className: styles$d.vat, children: includeVat ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
+    return (jsxs("div", { className: clsx(className, styles$h['product-price']), children: [!!original && (jsx("span", { className: styles$h['original-price'], children: originalPriceCurrency })), jsxs("div", { className: styles$h['current-price-wrapper'], children: [jsxs("div", { className: styles$h['current-price'], children: [jsx("span", { className: styles$h.wholes, children: wholes }), jsx("span", { className: styles$h.dot, children: "." }), jsx("span", { className: styles$h.decimals, children: decimals })] }), jsx("span", { className: styles$h.vat, children: includeVat ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
 }
 
-var styles$c = {"product-sku":"product-sku-module-ITb8x"};
+var styles$g = {"product-sku":"product-sku-module-ITb8x"};
 
 function ProductSku({ sku }) {
-    return jsx("p", { className: styles$c['product-sku'], children: sku });
+    return jsx("p", { className: styles$g['product-sku'], children: sku });
 }
 
-var styles$b = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe"};
+var styles$f = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe"};
 
 const breakpointToWidth = {
     lg: 1440,
@@ -239,19 +240,19 @@ function Image({ alt, className, fallbackSrc = '/images/fallback.svg', fit = 'co
     const handleError = () => {
         setCurrentSrc(fallbackSrc);
     };
-    return (jsx("img", { alt: alt, className: clsx(styles$b.image, styles$b[fit], className), height: height, loading: loading, onError: handleError, sizes: sizes, src: currentSrc, srcSet: srcSet, title: title, width: width }));
+    return (jsx("img", { alt: alt, className: clsx(styles$f.image, styles$f[fit], className), height: height, loading: loading, onError: handleError, sizes: sizes, src: currentSrc, srcSet: srcSet, title: title, width: width }));
 }
 
-var styles$a = {"product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
+var styles$e = {"product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
 
 function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, image: { alt, fit, src, title: imageTitle }, onClick, price, sku, tag, title, }) {
-    return (jsxs("div", { className: styles$a['product-card'], onClick: onClick, children: [jsx("div", { className: styles$a.image, children: jsx(Image, { alt: alt, fit: fit, src: src, title: imageTitle }) }), jsx("div", { className: styles$a['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$a.content, children: [jsxs("div", { className: styles$a.top, children: [jsx("div", { className: styles$a.tag, children: tag && jsx(Tag, { children: tag }) }), jsx("h2", { className: styles$a.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$a.bottom, children: [jsx("div", { className: styles$a.price, children: jsx(ProductPrice, { current: price.current, includeVat: price.includeVat, original: price.original }) }), jsx("div", { className: styles$a['add-to-cart-button'], children: AddToCartButton })] })] })] }));
+    return (jsxs("div", { className: styles$e['product-card'], onClick: onClick, children: [jsx("div", { className: styles$e.image, children: jsx(Image, { alt: alt, fit: fit, src: src, title: imageTitle }) }), jsx("div", { className: styles$e['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$e.content, children: [jsxs("div", { className: styles$e.top, children: [jsx("div", { className: styles$e.tag, children: tag && jsx(Tag, { children: tag }) }), jsx("h2", { className: styles$e.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$e.bottom, children: [jsx("div", { className: styles$e.price, children: jsx(ProductPrice, { current: price.current, includeVat: price.includeVat, original: price.original }) }), jsx("div", { className: styles$e['add-to-cart-button'], children: AddToCartButton })] })] })] }));
 }
 
-var styles$9 = {"accordion":"accordion-module-9WvAH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","is-open":"accordion-module-W0F1z"};
+var styles$d = {"accordion":"accordion-module-9WvAH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","indented":"accordion-module-6CcEH","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","is-open":"accordion-module-W0F1z"};
 
-function Accordion({ children, color = 'black', hasLineSeparator = true, size = 'md', }) {
-    return (jsx("div", { className: clsx(styles$9.accordion, styles$9[color], styles$9[size], hasLineSeparator && styles$9['with-seperators']), children: children &&
+function Accordion({ children, color = 'black', hasLineSeparator = true, indented, size = 'md', }) {
+    return (jsx("div", { className: clsx({ [styles$d.indented]: indented }, styles$d.accordion, styles$d[color], styles$d[size], hasLineSeparator && styles$d['with-seperators']), children: children &&
             Children.map(children, child => {
                 return cloneElement(child, { size });
             }) }));
@@ -261,7 +262,7 @@ function ChevronDownSlim(props) {
     return (jsx("svg", { viewBox: "0 0 16 17", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "m8 12.648-6.667-6.7a3.11 3.11 0 0 1 .466-.75c.202-.245.444-.477.726-.698l5.459 5.546L13.328 4.5c.288.226.543.459.764.699.222.24.413.489.575.75L8 12.648z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles$8 = {"show-all":"show-all-module-BDp21","panel":"show-all-module-bEdda","content":"show-all-module-RF--F","has-transparency":"show-all-module-30y7l","button":"show-all-module-58e7Q","icon":"show-all-module-fqncI","is-open":"show-all-module-hQeGI"};
+var styles$c = {"show-all":"show-all-module-BDp21","panel":"show-all-module-bEdda","content":"show-all-module-RF--F","has-transparency":"show-all-module-30y7l","button":"show-all-module-58e7Q","icon":"show-all-module-fqncI","is-open":"show-all-module-hQeGI"};
 
 const ShowAll = ({ children, hasTransparency = true, initialHeight = 0, isOpen, onToggle, }) => {
     const showAllRef = useRef(null);
@@ -270,38 +271,38 @@ const ShowAll = ({ children, hasTransparency = true, initialHeight = 0, isOpen,
             return;
         showAllRef.current.style.setProperty('--initital-height', `${initialHeight}px`);
     }, [initialHeight]);
-    return (jsxs("div", { ref: showAllRef, className: clsx(styles$8['show-all'], {
-            [styles$8['is-open']]: isOpen,
-        }), children: [jsx("div", { className: styles$8.panel, children: jsx("div", { className: clsx(styles$8.content, {
-                        [styles$8['has-transparency']]: hasTransparency,
-                    }), children: children }) }), jsxs(LinkButton, { className: styles$8.button, onPress: () => onToggle(!isOpen), children: [jsx(ChevronDownSlim, { className: styles$8.icon }), isOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] })] }));
+    return (jsxs("div", { ref: showAllRef, className: clsx(styles$c['show-all'], {
+            [styles$c['is-open']]: isOpen,
+        }), children: [jsx("div", { className: styles$c.panel, children: jsx("div", { className: clsx(styles$c.content, {
+                        [styles$c['has-transparency']]: hasTransparency,
+                    }), children: children }) }), jsxs(LinkButton, { className: styles$c.button, onPress: () => onToggle(!isOpen), children: [jsx(ChevronDownSlim, { className: styles$c.icon }), isOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] })] }));
 };
 
-var styles$7 = {"multi-select":"multi-select-module-DC7Ix","filter-items":"multi-select-module-cwVFb","hidden":"multi-select-module-o7yHU","filter-item":"multi-select-module-OW-NK"};
+var styles$b = {"multi-select":"multi-select-module-DC7Ix","filter-items":"multi-select-module-cwVFb","hidden":"multi-select-module-o7yHU","filter-item":"multi-select-module-OW-NK"};
 
 function MultiSelect({ amountShown = 3, isOpen = false, onChange, onToggleOpen, options, render, }) {
     const shownOptions = options.slice(0, amountShown);
     const hiddenOptions = options.slice(amountShown);
-    return (jsxs("div", { className: styles$7['multi-select'], children: [jsx("div", { className: styles$7['filter-items'], children: shownOptions.map(option => (jsxs("div", { className: styles$7['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }), hiddenOptions?.length > 0 && (jsx(ShowAll, { hasTransparency: false, isOpen: isOpen, onToggle: onToggleOpen, children: jsx("div", { className: clsx(styles$7['filter-items'], styles$7['hidden']), children: hiddenOptions.map(option => (jsxs("div", { className: styles$7['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }) }))] }));
+    return (jsxs("div", { className: styles$b['multi-select'], children: [jsx("div", { className: styles$b['filter-items'], children: shownOptions.map(option => (jsxs("div", { className: styles$b['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }), hiddenOptions?.length > 0 && (jsx(ShowAll, { hasTransparency: false, isOpen: isOpen, onToggle: onToggleOpen, children: jsx("div", { className: clsx(styles$b['filter-items'], styles$b['hidden']), children: hiddenOptions.map(option => (jsxs("div", { className: styles$b['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }) }))] }));
 }
 
-var styles$6 = {"checkbox":"checkbox-module-YNVdd","box":"checkbox-module-UKoyf","checkmark":"checkbox-module-pHIwh","focus":"checkbox-module-v23jy","active":"checkbox-module-7UG-b","color-checkbox":"checkbox-module-nEhvW"};
+var styles$a = {"checkbox":"checkbox-module-YNVdd","box":"checkbox-module-UKoyf","checkmark":"checkbox-module-pHIwh","focus":"checkbox-module-v23jy","active":"checkbox-module-7UG-b","color-checkbox":"checkbox-module-nEhvW"};
 
 function Checkbox({ _pseudo = 'none', children, className, isDisabled, isSelected, onChange, value, }) {
-    return (jsxs(Checkbox$1, { className: clsx(className, styles$6.checkbox, styles$6[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$6.box, children: jsx("svg", { "aria-hidden": "true", className: styles$6.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
+    return (jsxs(Checkbox$1, { className: clsx(className, styles$a.checkbox, styles$a[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$a.box, children: jsx("svg", { "aria-hidden": "true", className: styles$a.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
 }
 
 function ColorCheckbox({ _pseudo = 'none', children, className, color, isDisabled, isSelected, onChange, value, }) {
-    return (jsxs(Checkbox$1, { className: clsx(className, styles$6.checkbox, styles$6['color-checkbox'], styles$6[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
+    return (jsxs(Checkbox$1, { className: clsx(className, styles$a.checkbox, styles$a['color-checkbox'], styles$a[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
             '--selected-color': color,
-        }, value: value, children: [jsx("div", { className: styles$6.box }), children] }));
+        }, value: value, children: [jsx("div", { className: styles$a.box }), children] }));
 }
 
 function CheckmarkFilledIcon(props) {
     return (jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M10.864 17c-.2 0-.378-.045-.534-.135a1.588 1.588 0 0 1-.446-.407L6.278 12.22c-.185-.233-.278-.474-.278-.722 0-.264.087-.488.262-.672a.86.86 0 0 1 .651-.276c.156 0 .299.033.429.101s.258.188.384.361l3.094 3.71 5.42-8.19c.216-.354.483-.531.802-.531.245 0 .466.08.663.243A.785.785 0 0 1 18 6.88c0 .12-.028.243-.084.367a2.53 2.53 0 0 1-.194.356l-5.934 8.844c-.23.369-.538.553-.924.553z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles$5 = {"select":"select-module-ui-Wc","button":"select-module-aMQIQ","chevron":"select-module-00uRU","focus":"select-module-XMc0P","popover":"select-module-z8cWq","listbox":"select-module-S21ba","item":"select-module-LgEJO","check":"select-module-lQFw3"};
+var styles$9 = {"select":"select-module-ui-Wc","button":"select-module-aMQIQ","chevron":"select-module-00uRU","focus":"select-module-XMc0P","popover":"select-module-z8cWq","listbox":"select-module-S21ba","header":"select-module-4Bm2j","item":"select-module-LgEJO","check":"select-module-lQFw3"};
 
 function Select({ disabled = false, label, onChange, options, selectedOption, showLabel = true, }) {
     const selectRef = useRef(null);
@@ -316,10 +317,10 @@ function Select({ disabled = false, label, onChange, options, selectedOption, sh
         window.addEventListener('resize', updateWidth);
         return () => window.removeEventListener('resize', updateWidth);
     }, []);
-    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: styles$5.select, isDisabled: disabled, onSelectionChange: selected => onChange(selected), selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$5.button, children: [jsx(SelectValue, {}), jsx(ChevronDownSlim, { "aria-hidden": "true", className: styles$5.chevron })] }), jsx(Popover, { className: styles$5.popover, placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$5.listbox, children: Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$5.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(CheckmarkFilledIcon, { className: styles$5.check }) })), jsx("span", { slot: "label", children: value })] }, key))) }) })] }));
+    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: styles$9.select, isDisabled: disabled, onSelectionChange: selected => onChange(selected), placeholder: label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$9.button, children: [jsx(SelectValue, {}), jsx(ChevronDownSlim, { "aria-hidden": "true", className: styles$9.chevron })] }), jsx(Popover, { className: styles$9.popover, placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$9.listbox, children: jsxs(Section, { children: [jsx(Header, { className: styles$9.header, children: label }), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$9.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(CheckmarkFilledIcon, { className: styles$9.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
 }
 
-var styles$4 = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
+var styles$8 = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
 
 /**
  * This component is used to create a textarea that can grow as the user types.
@@ -354,7 +355,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
         }
         updateHeight();
     }, [ref, autoGrow, updateHeight, size]);
-    return (jsx("div", { className: styles$4['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
+    return (jsx("div", { className: styles$8['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
                 ref.current =
                     node;
                 textAreaRef.current = node;
@@ -365,15 +366,15 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
 });
 TextArea.displayName = 'TextArea';
 
-var styles$3 = {"field":"text-field-module-JeaK0"};
+var styles$7 = {"field":"text-field-module-JeaK0"};
 
 /**
  * This component is used to create a text field.
  * It can be used as a single line input or as a textarea.
  * This field can also grow when a user types in text.
  */
-function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, onChange, onInput, onKeyUp, placeholder, rows, showLabel = true, size = 'lg', value, }) {
-    return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$3.field, styles$3[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, onChange: value => {
+function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, onChange, onInput, onKeyUp, placeholder, rows, showLabel = false, size = 'lg', value, }) {
+    return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$7.field, styles$7[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, onChange: value => {
             onChange?.(value);
         }, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), isMultiline ? (jsx(TextArea, { autoGrow: autoGrow, placeholder: placeholder, rows: rows, size: size })) : (jsx(Input, { autoGrow: autoGrow, placeholder: placeholder, size: size })), jsx(FieldError, {})] }));
 }
@@ -394,16 +395,267 @@ function IntlProvider({ children, formatMessage }) {
     return (jsx(IntlContext.Provider, { value: { formatMessage }, children: children }));
 }
 
-var styles$2 = {"product-grid":"product-overview-grid-module-bzys-","grid-item":"product-overview-grid-module-MlUVA"};
+var styles$6 = {"product-grid":"product-overview-grid-module-bzys-","grid-item":"product-overview-grid-module-MlUVA"};
 
 function ProductOverviewGrid({ children }) {
-    return (jsx("div", { className: styles$2['product-grid'], children: Children.map(children, (child, index) => (jsx("div", { className: styles$2['grid-item'], children: child }, index))) }));
+    return (jsx("div", { className: styles$6['product-grid'], children: Children.map(children, (child, index) => (jsx("div", { className: styles$6['grid-item'], children: child }, index))) }));
+}
+
+function ChevronDownBold(props) {
+    return (jsx("svg", { viewBox: "0 0 14 15", width: "14", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M6.986 11.837 1.166 5.98c.206-.376.542-.798 1.008-1.268.205-.206.41-.394.615-.563a2.91 2.91 0 0 1 .476-.338l.168-.112 3.553 3.576 3.581-3.605c.392.226.811.564 1.26 1.014.204.207.39.413.559.62l.251.32c.045.06.083.113.112.158l.084.17-5.847 5.885z", fill: "currentColor", fillRule: "evenodd" }) }));
+}
+
+function AccordionItem({ _pseudo = 'none', children, className, id, isDisabled = false, isOpen: isOpenProp = false, size, title, }) {
+    const [isOpen, setIsOpen] = useState(isOpenProp);
+    const panelId = `panel-${id}`;
+    return (jsxs("div", { className: clsx(className, styles$d['accordion-item'], {
+            [styles$d['is-open']]: isOpen,
+        }), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$d.button, styles$d[_pseudo]), disabled: isDisabled, id: id, onClick: () => setIsOpen(!isOpen), type: "button", children: [title, jsx("span", { className: styles$d.icon, children: size === 'lg' ? jsx(ChevronDownBold, {}) : jsx(ChevronDownSlim, {}) })] }) }), jsx("div", { "aria-labelledby": id, className: styles$d.panel, id: panelId, role: "region", children: jsx("div", { className: styles$d.content, children: children }) })] }));
 }
 
 function CloseFilledIcon(props) {
     return (jsx("svg", { viewBox: "0 0 32 33", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "m10.667 11.14 10.666 10.58m0-10.58L10.667 21.72", fill: "none", fillRule: "evenodd", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.867" }) }));
 }
 
+var styles$5 = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","xxl":"heading-module-Kn3ZN","xl":"heading-module--hZs-","l":"heading-module-WrJRY","m":"heading-module-hTexc","s":"heading-module-7W29m","xs":"heading-module-SgaLB","xxs":"heading-module-33en7"};
+
+const sizeToTag = {
+    l: 'h3',
+    m: 'h4',
+    s: 'h5',
+    xl: 'h2',
+    xs: 'h6',
+    xxl: 'h1',
+    xxs: 'h7',
+};
+function Heading({ children, className, italic, size = 'xxl', tag, uppercase, }) {
+    return createElement(tag || sizeToTag[size], {
+        className: clsx(className, styles$5.heading, styles$5[size], {
+            [styles$5.uppercase]: uppercase,
+            [styles$5.italic]: italic,
+        }),
+    }, children);
+}
+
+var styles$4 = {"active-filters":"active-filters-module-1qLjB","header":"active-filters-module-UKKDu","title":"active-filters-module-h29rI","active-filter-item":"active-filters-module-Rrmhy","category":"active-filters-module-u9TTE","active-filter-value":"active-filters-module-CIuPU"};
+
+const ActiveFilters = ({ onClearAllFilters, onClearFilter, selectedFilterCategories, }) => {
+    if (selectedFilterCategories.length === 0)
+        return null;
+    return (jsxs("div", { className: styles$4['active-filters'], children: [jsxs("div", { className: styles$4.header, children: [jsx(Heading, { className: styles$4.title, size: "m", children: jsx(FormattedMessage, { id: "Chosen filters" }) }), jsx(LinkButton, { onPress: onClearAllFilters, children: jsx(FormattedMessage, { id: "Clear filters" }) })] }), selectedFilterCategories.map((category, index) => (jsx("section", { className: styles$4.category, children: category.filters.map(filter => (jsxs("div", { className: styles$4['active-filter-item'], children: [jsxs("span", { children: [jsxs("span", { children: [category.label, ": "] }), jsx("span", { className: styles$4['active-filter-value'], children: filter.label })] }), jsx(IconButton, { color: "secondary", onPress: () => onClearFilter(category.label, filter), children: jsx(CloseFilledIcon, {}) })] }, `${category.label}-${filter.value}`))) }, `${category.label}-${index}`)))] }));
+};
+
+function AlgoliaActiveFilters() {
+    const { items, refine } = useCurrentRefinements();
+    const { refine: clearAllFilters } = useClearRefinements();
+    const selectedFilterCategories = items
+        .sort((a, b) => (a.label.localeCompare(b.label) ? 1 : -1))
+        .map((category) => ({
+        filters: category.refinements.sort((a, b) => 
+        // TODO: Investigate how to sort numerical
+        a.value.toString().localeCompare(b.value.toString()) ? 1 : -1),
+        label: category.label,
+    }));
+    function onClearFilter(categoryLabel, filter) {
+        selectedFilterCategories
+            .filter(category => category.label === categoryLabel)
+            .flatMap(category => category.filters)
+            .filter(f => f.value === filter.value)
+            .forEach(refine);
+    }
+    return (jsx(ActiveFilters, { onClearAllFilters: clearAllFilters, onClearFilter: onClearFilter, selectedFilterCategories: selectedFilterCategories }));
+}
+
+var styles$3 = {"filter-panel":"filter-panel-module-8oxI1","scroll-container":"filter-panel-module-w0hhZ","categories-section":"filter-panel-module-AHlq3","category":"filter-panel-module-TMp3J","count":"filter-panel-module-ykW1a","categories":"filter-panel-module-xvhRz","categories-header":"filter-panel-module-hJVR0","button":"filter-panel-module-hMmIb"};
+
+function AlgoliaCategories() {
+    const categories = [{ count: 123, href: '#', id: '123', name: 'Hand tools' }];
+    return (jsx("div", { children: categories?.length > 0 && (jsxs("section", { className: styles$3['categories-section'], children: [jsx("h4", { className: styles$3['categories-header'], children: "Categories" }), jsx("div", { className: styles$3.categories, children: categories.map(({ count, href, id, name }) => (jsxs("a", { className: styles$3['category'], href: href, children: [jsx("span", { children: name }), ' ', jsxs("span", { className: styles$3.count, children: ["(", count, ")"] })] }, id))) })] })) }));
+}
+
+const useDisclosure = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    const toggle = useCallback(() => {
+        setIsOpen(prevIsOpen => !prevIsOpen);
+    }, []);
+    return {
+        close,
+        isClosed: !isOpen,
+        isOpen,
+        open,
+        toggle,
+    };
+};
+
+function AlgoliaMultiSelect({ attribute }) {
+    const { items, refine } = useRefinementList({
+        attribute,
+        limit: 100,
+        operator: 'or',
+        showMoreLimit: 100,
+    });
+    const { isOpen, toggle } = useDisclosure();
+    const options = items.map(item => ({
+        amount: item.count,
+        isSelected: item.isRefined,
+        label: item.label,
+        value: item.value,
+    }));
+    return (jsx(MultiSelect, { amountShown: 3, isOpen: isOpen, onChange: option => refine(option.value), onToggleOpen: toggle, options: options, render: ({ onChange, option }) => (jsx(Checkbox, { isSelected: option.isSelected, onChange: () => onChange(option.value), value: option.value, children: option.label })) }));
+}
+
+function AlgoliaResultsCount() {
+    const { results } = useHits();
+    const t = useFormattedMessage();
+    if (!results)
+        return null;
+    const count = results.nbHits;
+    return `${count} ${count === 1 ? t('article') : t('articles')}`;
+}
+
+function AlgoliaFilterPanel({ onShowProducts, }) {
+    const { attributesToRender } = useDynamicWidgets();
+    const t = useFormattedMessage();
+    return (jsx("div", { className: styles$3['filter-panel'], children: jsxs("div", { className: styles$3['scroll-container'], children: [jsx(AlgoliaCategories, {}), jsx(AlgoliaActiveFilters, {}), attributesToRender.length > 0 && (jsx("section", { children: attributesToRender.map((attribute, index) => (jsx(Accordion, { children: jsx(AccordionItem, { id: `attribute-${index}`, title: t(attribute), children: jsx(AlgoliaMultiSelect, { attribute: attribute }) }) }, `attribute-${index}`))) })), jsx("div", { className: styles$3.button, children: jsxs(Button, { withArrow: true, onPress: onShowProducts, size: "md", children: [jsx(FormattedMessage, { id: "Show" }), " ", jsx(AlgoliaResultsCount, {})] }) })] }) }));
+}
+
+function ChevronLeftFilledIcon(props) {
+    return (jsx("svg", { height: "13", viewBox: "0 0 13 13", width: "13", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "m3.889 6 5.025-5c.19.082.378.198.562.35.184.15.359.332.524.544L5.84 5.988 10 9.996c-.17.216-.344.407-.524.573-.18.166-.367.31-.562.431L3.889 6z", fill: "currentColor", fillRule: "evenodd" }) }));
+}
+
+function ChevronRightFilledIcon(props) {
+    return (jsx("svg", { height: "13", viewBox: "0 0 13 13", width: "13", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "m9.111 6-5.025 5a2.332 2.332 0 0 1-.562-.35A3.459 3.459 0 0 1 3 10.107l4.16-4.094L3 2.004c.17-.216.344-.407.524-.573.18-.166.367-.31.562-.431l5.025 5z", fill: "currentColor", fillRule: "evenodd" }) }));
+}
+
+var styles$2 = {"pagination":"pagination-module-k4OgY","page-number-container":"pagination-module-oq89A"};
+
+function Pagination({ currentPage, onChange, totalPages }) {
+    return (jsxs("div", { className: styles$2.pagination, children: [jsx(IconButton, { isDisabled: currentPage === 1, onPress: () => onChange(currentPage - 1), children: jsx(ChevronLeftFilledIcon, {}) }), jsxs("div", { className: styles$2['page-number-container'], children: [jsx(NumberField, { autoGrow: true, label: "current-page", maxValue: totalPages, minValue: 1, onChange: onChange, value: currentPage }), jsx(FormattedMessage, { id: "of" }), jsx("div", { children: totalPages })] }), jsx(IconButton, { isDisabled: currentPage >= totalPages, onPress: () => onChange(currentPage + 1), children: jsx(ChevronRightFilledIcon, {}) })] }));
+}
+
+function AlgoliaPagination() {
+    const { currentRefinement, nbPages, refine } = usePagination();
+    return (jsx(Pagination, { currentPage: currentRefinement + 1, onChange: pageNumber => refine(pageNumber - 1), totalPages: nbPages }));
+}
+
+function AlgoliaSortBy() {
+    const { options: algoliaOptions, refine } = useSortBy({
+        items: [
+            { label: 'Name', value: 'dev_sonic_products_en' },
+            { label: 'Height', value: 'dev_sonic_products_en_height' },
+        ],
+    });
+    if (algoliaOptions.length === 0)
+        return null;
+    const options = algoliaOptions.reduce((acc, option) => {
+        acc[option.value] = option.label;
+        return acc;
+    }, {});
+    return (jsx(Select, { label: "Sort", onChange: value => refine(String(value)), options: options, selectedOption: "dev_sonic_products_en", showLabel: false }));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function useDebouncedCallback(func, delay) {
+    const timeoutId = useRef();
+    return function debounced(...args) {
+        clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(() => {
+            func(...args);
+        }, delay);
+    };
+}
+
+const GlobalStateProviderContext = createContext(undefined);
+function useGlobalState(key, initialState) {
+    const state = useContext(GlobalStateProviderContext).get(key, initialState);
+    const [rerenderState, setRerenderState] = useState(state.value);
+    useEffect(() => {
+        state.addEventListener('stateChanged', setRerenderState);
+        return () => {
+            state.removeEventListener('stateChanged', setRerenderState);
+        };
+    }, [state]);
+    return [rerenderState, (value) => (state.value = value)];
+}
+
+function useCart() {
+    const [state] = useGlobalState('cart');
+    if (!state) {
+        throw new Error('useCart must be used together with the ReduxCartProvider');
+    }
+    return state;
+}
+function useProductCartLine(productId) {
+    const { addToCart, currentCart, isLoaded, isLoading, loadCurrentCart, removeCartLine, updateCartLine, } = useCart();
+    return {
+        addToCart,
+        cartLine: currentCart?.cartLines?.find(cl => cl.productId === productId),
+        currentCart,
+        isLoaded,
+        isLoading,
+        loadCurrentCart,
+        removeCartLine,
+        updateCartLine,
+    };
+}
+
+const ConnectedAddToCartButton = ({ productId }) => {
+    const [quantity, setQuantity] = useState(0);
+    const { addToCart, cartLine: _cartLine, isLoaded, isLoading, loadCurrentCart, removeCartLine, updateCartLine, } = useProductCartLine(productId);
+    const [cartLine, setCartLineState] = useState(_cartLine);
+    const setCartLineStateDebounced = useDebouncedCallback(setCartLineState, 4000);
+    useEffect(() => {
+        if (isLoading || isLoaded)
+            return;
+        loadCurrentCart();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        setQuantity(cartLine?.qtyOrdered || 0);
+    }, [cartLine]);
+    useEffect(() => {
+        /* Debounce updating the internal cart line state.
+         * This is necessary when a user mutates the cart multiple times in quick succession.
+         * A response from the server may take a while to come back, so we need to wait for it.
+         * If we don't debounce, the cart line state will be updated multiple times, causing the UI to flicker.
+         */
+        if (!cartLine) {
+            setCartLineState(_cartLine);
+        }
+        else {
+            setCartLineStateDebounced(_cartLine);
+        }
+    }, [_cartLine, cartLine, setCartLineStateDebounced]);
+    const updateCart = useDebouncedCallback((quantity) => {
+        if (cartLine) {
+            if (quantity === 0) {
+                removeCartLine({ cartLineId: cartLine.id });
+            }
+            else {
+                updateCartLine({ ...cartLine, qtyOrdered: quantity });
+            }
+        }
+        else {
+            addToCart({ productId, quantity });
+        }
+    }, 300);
+    const handleChange = (quantity) => {
+        setQuantity(quantity);
+        updateCart(quantity);
+    };
+    return jsx(AddToCartButton, { onChange: handleChange, quantity: quantity });
+};
+
+function ConnectedProductCart({ productId, ...props }) {
+    return (jsx(ProductCard, { ...props, addToCartButton: jsx(ConnectedAddToCartButton, { productId: productId }) }));
+}
+
 const SidebarContext = createContext({
     isOpen: false,
     toggle: () => { },
@@ -421,7 +673,7 @@ var styles$1 = {"sidebar":"sidebar-module-fSa9Q","close":"sidebar-module-2puGC",
 
 function Sidebar({ children }) {
     const { isOpen, toggle } = useSidebar();
-    return (jsxs("aside", { className: clsx(styles$1.sidebar, { [styles$1['is-open']]: isOpen }), children: [jsx("div", { className: styles$1.close, children: jsx(IconButton, { color: "secondary", onPress: toggle, children: jsx(CloseFilledIcon, {}) }) }), jsx("div", { children: children })] }));
+    return (jsxs("aside", { className: clsx(styles$1.sidebar, { [styles$1['is-open']]: isOpen }), children: [jsx("div", { className: styles$1.close, children: jsx(IconButton, { color: "secondary", onPress: toggle, children: jsx(CloseFilledIcon, {}) }) }), children] }));
 }
 
 function FilterOutlinedIcon(props) {
@@ -433,28 +685,38 @@ const ToggleSidebarButton = () => {
     return (jsx(Button, { color: "secondary", icon: jsx(FilterOutlinedIcon, {}), onPress: toggle, size: "sm", variant: "outline", children: jsx(FormattedMessage, { id: "Show filters" }) }));
 };
 
-function Filter({ children, title }) {
-    return (jsxs("div", { children: [jsx("div", { children: jsx("h3", { children: title }) }), jsx("div", { children: children })] }));
-}
-
-function ColorFilter({ onChange, options, value }) {
-    return (jsx(Filter, { title: "Color", children: jsx("ul", { children: options.map(option => (jsx("li", { children: jsx(Checkbox, { isSelected: value.includes(option.value), onChange: isSelected => onChange(isSelected
-                        ? [...value, option.value]
-                        : value.filter(v => v !== option.value)), value: option.value, children: option.label }) }, option.value))) }) }));
-}
+var styles = {"product-listing":"product-listing-module-EmEFw","header":"product-listing-module-JEjsa","action-bar":"product-listing-module-rFNcR","count":"product-listing-module-1seez","product-grid-container":"product-listing-module-hZuKD","product-grid":"product-listing-module-RRbLO","pagination":"product-listing-module-kkOfB"};
 
-var styles = {"product-listing":"product-listing-module-EmEFw","action-bar":"product-listing-module-rFNcR","count":"product-listing-module-1seez","product-grid-container":"product-listing-module-hZuKD"};
-
-const sortOptions = {
-    new: 'New',
-    popular: 'Popular',
-    price_asc: 'Price: Low - High',
-    price_desc: 'Price: High - Low',
-    recommended: 'Recommended',
-};
-function ProductListing({ activeFilters, filters, isLoading = false, onFilterChange, onSortChange, productCard: ProductCard, products, }) {
-    const t = useFormattedMessage();
-    return (jsxs("div", { className: styles['product-listing'], children: [jsx("h1", { children: "Product listing" }), jsxs("section", { className: styles['action-bar'], children: [jsx(ToggleSidebarButton, {}), jsx("span", { className: styles.count, children: "124 articles" }), jsx(Select, { label: t('Sort'), onChange: key => onSortChange(key), options: sortOptions, selectedOption: "new", showLabel: false })] }), jsx("section", { children: isLoading ? (jsx("p", { children: "Loading..." })) : (jsxs("div", { className: styles['product-grid-container'], children: [jsx(Sidebar, { children: jsxs("div", { children: [jsx("h2", { children: "Filter" }), jsx(ColorFilter, { onChange: colors => onFilterChange({ colors }), options: filters.color.options, value: activeFilters.colors })] }) }), jsx(ProductOverviewGrid, { children: products.map(product => (jsx(ProductCard, {}, product.id))) })] })) })] }));
+function ProductListing({ isLoading = false }) {
+    const { toggle } = useSidebar();
+    const { hits: productHits } = useHits();
+    return (jsxs("div", { className: styles['product-listing'], children: [jsx("div", { className: styles.header, children: jsx(Heading, { italic: true, uppercase: true, size: "xl", tag: "h1", children: "Pliers" }) }), jsxs("section", { className: styles['action-bar'], children: [jsx(ToggleSidebarButton, {}), jsx("span", { className: styles.count, children: jsx(AlgoliaResultsCount, {}) }), jsx(AlgoliaSortBy, {})] }), jsx("section", { children: isLoading ? (jsx("p", { children: "Loading..." })) : (jsxs("div", { className: styles['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { onShowProducts: toggle }) }), jsx("div", { className: styles['product-grid'], children: jsx(ProductOverviewGrid, { children: productHits.map(productHit => (jsx(ConnectedProductCart, { image: {
+                                        alt: productHit.name,
+                                        fit: 'contain',
+                                        sizes: { lg: 288, md: 204, sm: 122 },
+                                        src: productHit.images?.find(image => image.quality === 'large')?.url || '',
+                                        srcSet: [
+                                            {
+                                                url: productHit.images?.find(image => image.quality === 'small')?.url || '',
+                                                width: 122,
+                                            },
+                                            {
+                                                url: productHit.images?.find(image => image.quality === 'medium')?.url || '',
+                                                width: 204,
+                                            },
+                                            {
+                                                url: productHit.images?.find(image => image.quality === 'large')?.url || '',
+                                                width: 288,
+                                            },
+                                        ],
+                                        title: productHit.name,
+                                    }, 
+                                    // eslint-disable-next-line no-console
+                                    onClick: () => console.log('clicked'), price: {
+                                        current: productHit.discountedPrice,
+                                        includeVat: false,
+                                        original: productHit.price,
+                                    }, productId: productHit.id, sku: productHit.ean, tag: "new", title: productHit.name }, productHit.id))) }) }), jsx("div", { className: styles.pagination, children: jsx(AlgoliaPagination, {}) })] })) })] }));
 }
 
 function createProductListingSearchParams(state) {