@sonic-equipment/ui 0.0.20 → 0.0.22

package/dist/index.js

@@ -1,27 +1,245 @@
+import { useState, useEffect, useRef, useCallback, createContext, useContext, forwardRef, Children, cloneElement, createElement } from 'react';
 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 { Button as Button$1, Link, 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 } from 'react-aria-components';
 import clsx from 'clsx';
+import { useCurrentRefinements, useClearRefinements, useRefinementList, useHits, useDynamicWidgets, usePagination, useSortBy, InstantSearch, Configure } from 'react-instantsearch';
+import require$$5 from '@algolia/client-search';
+import * as http from 'http';
+import { Agent } from 'http';
+import * as https from 'https';
+import { Agent as Agent$1 } from 'https';
+import { parse } from 'url';
+
+const useBreakpoint = () => {
+    const [device, setDevice] = useState({
+        isDesktop: false,
+        isMobile: true,
+        isTablet: false,
+    });
+    useEffect(() => {
+        const handleResize = () => {
+            setDevice({
+                isDesktop: window.innerWidth >= 1024,
+                isMobile: window.innerWidth < 768,
+                isTablet: window.innerWidth >= 768 && window.innerWidth < 1024,
+            });
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return device;
+};
+
+// 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 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,
+    };
+};
+
+const useScrollLock = (lock) => {
+    useEffect(() => {
+        if (lock) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = 'auto';
+        }
+    }, [lock]);
+};
+
+class EventEmitter {
+    constructor() {
+        Object.defineProperty(this, "listeners", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.listeners = new Map();
+    }
+    addEventListener(event, listener) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, []);
+        }
+        this.listeners.get(event).push(listener);
+    }
+    removeEventListener(event, listener) {
+        const listeners = this.listeners.get(event);
+        if (!listeners)
+            return;
+        const index = listeners.indexOf(listener);
+        if (index !== -1) {
+            listeners.splice(index, 1);
+        }
+    }
+    trigger(event, data) {
+        const listeners = this.listeners.get(event);
+        if (!listeners)
+            return;
+        listeners.forEach(listener => listener(data));
+    }
+}
+
+class State extends EventEmitter {
+    constructor(state) {
+        super();
+        Object.defineProperty(this, "_state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this._state = state;
+    }
+    get value() {
+        return this._state;
+    }
+    set value(newState) {
+        this._state = newState;
+        this.trigger('stateChanged', this._state);
+    }
+}
+class GlobalState {
+    constructor(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    states) {
+        Object.defineProperty(this, "states", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: states
+        });
+    }
+    get(key, initialState) {
+        return (this.states.current[key] ||
+            (this.states.current[key] = new State(initialState)));
+    }
+    set(key, state) {
+        this.states.current[key] = state;
+    }
+}
+const GlobalStateProviderContext = createContext(undefined);
+function GlobalStateProvider({ children, }) {
+    const internalState = useRef({});
+    const globalState = useRef(new GlobalState(internalState));
+    return (jsx(GlobalStateProviderContext.Provider, { value: globalState.current, children: children }));
+}
+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 CartProvider(props) {
+    const [, updateState] = useGlobalState('cart', props);
+    useEffect(() => {
+        updateState(props);
+    }, [props, updateState]);
+    return null;
+}
+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,
+    };
+}
 
 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$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"};
+
+function IconButton({ children, className, color = 'primary', isDisabled, onPress, size = 'md', }) {
+    return (jsx(Button$1, { className: clsx(styles$q['icon-button'], styles$q[size], styles$q[color], className), isDisabled: isDisabled, onPress: onPress, children: children }));
+}
+
+function FavoriteFilledIcon(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: "M12 22a.667.667 0 0 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.244 11.019A.667.667 0 0 1 12 22", fill: "currentColor", fillRule: "evenodd" }) }));
+}
+
+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$p = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q"};
+
+function FavoriteButton({ isFavorite, onPress }) {
+    return (jsx(IconButton, { className: clsx(styles$p['favorite-button'], {
+            [styles$p['is-favorite']]: isFavorite,
+        }), color: "secondary", onPress: onPress, children: isFavorite ? jsx(FavoriteFilledIcon, {}) : jsx(FavoriteOutlinedIcon, {}) }));
+}
+
+var styles$o = {"link-button":"link-button-module-6i75g"};
+
+function LinkButton({ children, className, href, isDisabled, onPress, target, }) {
+    if (href) {
+        return (jsx(Link, { className: clsx(styles$o['link-button'], className), href: href, isDisabled: isDisabled, onPress: onPress, target: target, children: children }));
+    }
+    return (jsx(Button$1, { className: clsx(styles$o['link-button'], className), isDisabled: isDisabled, onPress: onPress, type: "button", children: children }));
 }
 
-var styles$m = {"field-error":"field-error-module-FXnIg"};
+var styles$n = {"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$n['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$m = {"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 +254,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$m['input-container'], styles$m[size], styles$m[_pseudo]), children: jsxs("div", { className: clsx({ [styles$m['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ref: ref, onChange: handleChange }), autoGrow && jsx("span", { className: styles$m['shadow-input'], children: value })] }) }));
 });
 Input.displayName = 'Input';
 
-var styles$k = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
+var styles$l = {"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$l.label, children: [children, isRequired && jsx("span", { className: styles$l.required, children: "*" })] }));
 }
 
-var styles$j = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh"};
+var styles$k = {"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$k.field, styles$k[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$k['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$j = {"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,50 +342,66 @@ 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$j['manual-input-container'], children: [jsx("div", { className: styles$j['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"};
-
-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 FavoriteFilledIcon(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: "M12 22a.667.667 0 0 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.244 11.019A.667.667 0 0 1 12 22", fill: "currentColor", fillRule: "evenodd" }) }));
-}
-
-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"};
-
-function FavoriteButton({ isFavorite, onPress }) {
-    return (jsx(IconButton, { className: clsx(styles$g['favorite-button'], {
-            [styles$g['is-favorite']]: isFavorite,
-        }), color: "secondary", onPress: onPress, children: isFavorite ? jsx(FavoriteFilledIcon, {}) : jsx(FavoriteOutlinedIcon, {}) }));
-}
-
-var styles$f = {"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(Button$1, { className: clsx(styles$f['link-button'], className), isDisabled: isDisabled, onPress: onPress, type: "button", children: children }));
-}
+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 });
+};
 
-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 +427,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 +439,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 +473,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 +495,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 +504,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 +550,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 +588,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 +599,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 +628,155 @@ 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))) })] })) }));
+}
+
+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 }));
+}
+
+function ConnectedProductCart({ productId, ...props }) {
+    return (jsx(ProductCard, { ...props, addToCartButton: jsx(ConnectedAddToCartButton, { productId: productId }) }));
+}
+
 const SidebarContext = createContext({
     isOpen: false,
     toggle: () => { },
@@ -421,7 +794,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 +806,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","action-bar":"product-listing-module-rFNcR","count":"product-listing-module-1seez","product-grid-container":"product-listing-module-hZuKD"};
+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"};
 
-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) {
@@ -476,4 +859,1436 @@ function parseProductListingSearchParams(params) {
     };
 }
 
-export { Accordion, AddToCartButton, Button, CartFilledIcon, CartOutlinedIcon, Checkbox, ColorCheckbox, DehashedOutlinedIcon, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, FormattedMessage, HashedOutlinedIcon, IconButton, Image, IntlProvider, LinkButton, MultiSelect, NumberField, ProductCard, ProductListing, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, Select, ShowAll, Sidebar, TextField, createProductListingSearchParams, parseProductListingSearchParams, useFormattedMessage };
+function AlgoliaProductList() {
+    const r = useHits();
+    const { hits } = r;
+    r.results?.nbHits;
+    return (jsxs("div", { children: [jsx("h2", { children: "Product List" }), hits.map(hit => (jsxs("div", { children: [jsx("h3", { children: hit.name }), jsxs("div", { children: ["W x H x L: ", hit.width, " x ", hit.height, " x ", hit.length] })] }, hit.objectID)))] }));
+}
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+        return Reflect.construct(f, arguments, this.constructor);
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+var algoliasearch$3 = {exports: {}};
+
+// @todo Add logger on options to debug when caches go wrong.
+function createFallbackableCache(options) {
+    const caches = [...options.caches];
+    const current = caches.shift(); // eslint-disable-line functional/immutable-data
+    if (current === undefined) {
+        return createNullCache();
+    }
+    return {
+        get(key, defaultValue, events = {
+            miss: () => Promise.resolve(),
+        }) {
+            return current.get(key, defaultValue, events).catch(() => {
+                return createFallbackableCache({ caches }).get(key, defaultValue, events);
+            });
+        },
+        set(key, value) {
+            return current.set(key, value).catch(() => {
+                return createFallbackableCache({ caches }).set(key, value);
+            });
+        },
+        delete(key) {
+            return current.delete(key).catch(() => {
+                return createFallbackableCache({ caches }).delete(key);
+            });
+        },
+        clear() {
+            return current.clear().catch(() => {
+                return createFallbackableCache({ caches }).clear();
+            });
+        },
+    };
+}
+
+function createNullCache() {
+    return {
+        get(_key, defaultValue, events = {
+            miss: () => Promise.resolve(),
+        }) {
+            const value = defaultValue();
+            return value
+                .then(result => Promise.all([result, events.miss(result)]))
+                .then(([result]) => result);
+        },
+        set(_key, value) {
+            return Promise.resolve(value);
+        },
+        delete(_key) {
+            return Promise.resolve();
+        },
+        clear() {
+            return Promise.resolve();
+        },
+    };
+}
+
+var cacheCommon_esm = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    createFallbackableCache: createFallbackableCache,
+    createNullCache: createNullCache
+});
+
+var require$$0 = /*@__PURE__*/getAugmentedNamespace(cacheCommon_esm);
+
+function createInMemoryCache(options = { serializable: true }) {
+    // eslint-disable-next-line functional/no-let
+    let cache = {};
+    return {
+        get(key, defaultValue, events = {
+            miss: () => Promise.resolve(),
+        }) {
+            const keyAsString = JSON.stringify(key);
+            if (keyAsString in cache) {
+                return Promise.resolve(options.serializable ? JSON.parse(cache[keyAsString]) : cache[keyAsString]);
+            }
+            const promise = defaultValue();
+            const miss = (events && events.miss) || (() => Promise.resolve());
+            return promise.then((value) => miss(value)).then(() => promise);
+        },
+        set(key, value) {
+            // eslint-disable-next-line functional/immutable-data
+            cache[JSON.stringify(key)] = options.serializable ? JSON.stringify(value) : value;
+            return Promise.resolve(value);
+        },
+        delete(key) {
+            // eslint-disable-next-line functional/immutable-data
+            delete cache[JSON.stringify(key)];
+            return Promise.resolve();
+        },
+        clear() {
+            cache = {};
+            return Promise.resolve();
+        },
+    };
+}
+
+var cacheInMemory_esm = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    createInMemoryCache: createInMemoryCache
+});
+
+var require$$1 = /*@__PURE__*/getAugmentedNamespace(cacheInMemory_esm);
+
+function createAuth(authMode, appId, apiKey) {
+    const credentials = {
+        'x-algolia-api-key': apiKey,
+        'x-algolia-application-id': appId,
+    };
+    return {
+        headers() {
+            return authMode === AuthMode.WithinHeaders ? credentials : {};
+        },
+        queryParameters() {
+            return authMode === AuthMode.WithinQueryParameters ? credentials : {};
+        },
+    };
+}
+
+function createRetryablePromise(callback) {
+    let retriesCount = 0; // eslint-disable-line functional/no-let
+    const retry = () => {
+        retriesCount++;
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve(callback(retry));
+            }, Math.min(100 * retriesCount, 1000));
+        });
+    };
+    return callback(retry);
+}
+
+function createWaitablePromise(promise, wait = (_response, _requestOptions) => {
+    return Promise.resolve();
+}) {
+    // eslint-disable-next-line functional/immutable-data
+    return Object.assign(promise, {
+        wait(requestOptions) {
+            return createWaitablePromise(promise
+                .then(response => Promise.all([wait(response, requestOptions), response]))
+                .then(promiseResults => promiseResults[1]));
+        },
+    });
+}
+
+// eslint-disable-next-line functional/prefer-readonly-type
+function shuffle(array) {
+    let c = array.length - 1; // eslint-disable-line functional/no-let
+    // eslint-disable-next-line functional/no-loop-statement
+    for (c; c > 0; c--) {
+        const b = Math.floor(Math.random() * (c + 1));
+        const a = array[c];
+        array[c] = array[b]; // eslint-disable-line functional/immutable-data, no-param-reassign
+        array[b] = a; // eslint-disable-line functional/immutable-data, no-param-reassign
+    }
+    return array;
+}
+function addMethods(base, methods) {
+    if (!methods) {
+        return base;
+    }
+    Object.keys(methods).forEach(key => {
+        // eslint-disable-next-line functional/immutable-data, no-param-reassign
+        base[key] = methods[key](base);
+    });
+    return base;
+}
+function encode$1(format, ...args) {
+    // eslint-disable-next-line functional/no-let
+    let i = 0;
+    return format.replace(/%s/g, () => encodeURIComponent(args[i++]));
+}
+
+const version = '4.23.3';
+
+const destroy = (base) => {
+    return () => {
+        return base.transporter.requester.destroy();
+    };
+};
+
+const AuthMode = {
+    /**
+     * If auth credentials should be in query parameters.
+     */
+    WithinQueryParameters: 0,
+    /**
+     * If auth credentials should be in headers.
+     */
+    WithinHeaders: 1,
+};
+
+var clientCommon_esm = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AuthMode: AuthMode,
+    addMethods: addMethods,
+    createAuth: createAuth,
+    createRetryablePromise: createRetryablePromise,
+    createWaitablePromise: createWaitablePromise,
+    destroy: destroy,
+    encode: encode$1,
+    shuffle: shuffle,
+    version: version
+});
+
+const MethodEnum = {
+    Delete: 'DELETE',
+    Get: 'GET',
+    Post: 'POST',
+    Put: 'PUT',
+};
+
+var requesterCommon_esm = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    MethodEnum: MethodEnum
+});
+
+function createMappedRequestOptions(requestOptions, timeout) {
+    const options = requestOptions || {};
+    const data = options.data || {};
+    Object.keys(options).forEach(key => {
+        if (['timeout', 'headers', 'queryParameters', 'data', 'cacheable'].indexOf(key) === -1) {
+            data[key] = options[key]; // eslint-disable-line functional/immutable-data
+        }
+    });
+    return {
+        data: Object.entries(data).length > 0 ? data : undefined,
+        timeout: options.timeout || timeout,
+        headers: options.headers || {},
+        queryParameters: options.queryParameters || {},
+        cacheable: options.cacheable,
+    };
+}
+
+const CallEnum = {
+    /**
+     * If the host is read only.
+     */
+    Read: 1,
+    /**
+     * If the host is write only.
+     */
+    Write: 2,
+    /**
+     * If the host is both read and write.
+     */
+    Any: 3,
+};
+
+const HostStatusEnum = {
+    Up: 1,
+    Down: 2,
+    Timeouted: 3,
+};
+
+// By default, API Clients at Algolia have expiration delay
+// of 5 mins. In the JavaScript client, we have 2 mins.
+const EXPIRATION_DELAY = 2 * 60 * 1000;
+function createStatefulHost(host, status = HostStatusEnum.Up) {
+    return {
+        ...host,
+        status,
+        lastUpdate: Date.now(),
+    };
+}
+function isStatefulHostUp(host) {
+    return host.status === HostStatusEnum.Up || Date.now() - host.lastUpdate > EXPIRATION_DELAY;
+}
+function isStatefulHostTimeouted(host) {
+    return (host.status === HostStatusEnum.Timeouted && Date.now() - host.lastUpdate <= EXPIRATION_DELAY);
+}
+
+function createStatelessHost(options) {
+    if (typeof options === 'string') {
+        return {
+            protocol: 'https',
+            url: options,
+            accept: CallEnum.Any,
+        };
+    }
+    return {
+        protocol: options.protocol || 'https',
+        url: options.url,
+        accept: options.accept || CallEnum.Any,
+    };
+}
+
+function createRetryableOptions(hostsCache, statelessHosts) {
+    return Promise.all(statelessHosts.map(statelessHost => {
+        return hostsCache.get(statelessHost, () => {
+            return Promise.resolve(createStatefulHost(statelessHost));
+        });
+    })).then(statefulHosts => {
+        const hostsUp = statefulHosts.filter(host => isStatefulHostUp(host));
+        const hostsTimeouted = statefulHosts.filter(host => isStatefulHostTimeouted(host));
+        /**
+         * Note, we put the hosts that previously timeouted on the end of the list.
+         */
+        const hostsAvailable = [...hostsUp, ...hostsTimeouted];
+        const statelessHostsAvailable = hostsAvailable.length > 0
+            ? hostsAvailable.map(host => createStatelessHost(host))
+            : statelessHosts;
+        return {
+            getTimeout(timeoutsCount, baseTimeout) {
+                /**
+                 * Imagine that you have 4 hosts, if timeouts will increase
+                 * on the following way: 1 (timeouted) > 4 (timeouted) > 5 (200)
+                 *
+                 * Note that, the very next request, we start from the previous timeout
+                 *
+                 *  5 (timeouted) > 6 (timeouted) > 7 ...
+                 *
+                 * This strategy may need to be reviewed, but is the strategy on the our
+                 * current v3 version.
+                 */
+                const timeoutMultiplier = hostsTimeouted.length === 0 && timeoutsCount === 0
+                    ? 1
+                    : hostsTimeouted.length + 3 + timeoutsCount;
+                return timeoutMultiplier * baseTimeout;
+            },
+            statelessHosts: statelessHostsAvailable,
+        };
+    });
+}
+
+const isNetworkError = ({ isTimedOut, status }) => {
+    return !isTimedOut && ~~status === 0;
+};
+const isRetryable = (response) => {
+    const status = response.status;
+    const isTimedOut = response.isTimedOut;
+    return (isTimedOut || isNetworkError(response) || (~~(status / 100) !== 2 && ~~(status / 100) !== 4));
+};
+const isSuccess = ({ status }) => {
+    return ~~(status / 100) === 2;
+};
+const retryDecision = (response, outcomes) => {
+    if (isRetryable(response)) {
+        return outcomes.onRetry(response);
+    }
+    if (isSuccess(response)) {
+        return outcomes.onSuccess(response);
+    }
+    return outcomes.onFail(response);
+};
+
+function retryableRequest(transporter, statelessHosts, request, requestOptions) {
+    const stackTrace = []; // eslint-disable-line functional/prefer-readonly-type
+    /**
+     * First we prepare the payload that do not depend from hosts.
+     */
+    const data = serializeData(request, requestOptions);
+    const headers = serializeHeaders(transporter, requestOptions);
+    const method = request.method;
+    // On `GET`, the data is proxied to query parameters.
+    const dataQueryParameters = request.method !== MethodEnum.Get
+        ? {}
+        : {
+            ...request.data,
+            ...requestOptions.data,
+        };
+    const queryParameters = {
+        'x-algolia-agent': transporter.userAgent.value,
+        ...transporter.queryParameters,
+        ...dataQueryParameters,
+        ...requestOptions.queryParameters,
+    };
+    let timeoutsCount = 0; // eslint-disable-line functional/no-let
+    const retry = (hosts, // eslint-disable-line functional/prefer-readonly-type
+    getTimeout) => {
+        /**
+         * We iterate on each host, until there is no host left.
+         */
+        const host = hosts.pop(); // eslint-disable-line functional/immutable-data
+        if (host === undefined) {
+            throw createRetryError(stackTraceWithoutCredentials(stackTrace));
+        }
+        const payload = {
+            data,
+            headers,
+            method,
+            url: serializeUrl(host, request.path, queryParameters),
+            connectTimeout: getTimeout(timeoutsCount, transporter.timeouts.connect),
+            responseTimeout: getTimeout(timeoutsCount, requestOptions.timeout),
+        };
+        /**
+         * The stackFrame is pushed to the stackTrace so we
+         * can have information about onRetry and onFailure
+         * decisions.
+         */
+        const pushToStackTrace = (response) => {
+            const stackFrame = {
+                request: payload,
+                response,
+                host,
+                triesLeft: hosts.length,
+            };
+            // eslint-disable-next-line functional/immutable-data
+            stackTrace.push(stackFrame);
+            return stackFrame;
+        };
+        const decisions = {
+            onSuccess: response => deserializeSuccess(response),
+            onRetry(response) {
+                const stackFrame = pushToStackTrace(response);
+                /**
+                 * If response is a timeout, we increaset the number of
+                 * timeouts so we can increase the timeout later.
+                 */
+                if (response.isTimedOut) {
+                    timeoutsCount++;
+                }
+                return Promise.all([
+                    /**
+                     * Failures are individually send the logger, allowing
+                     * the end user to debug / store stack frames even
+                     * when a retry error does not happen.
+                     */
+                    transporter.logger.info('Retryable failure', stackFrameWithoutCredentials(stackFrame)),
+                    /**
+                     * We also store the state of the host in failure cases. If the host, is
+                     * down it will remain down for the next 2 minutes. In a timeout situation,
+                     * this host will be added end of the list of hosts on the next request.
+                     */
+                    transporter.hostsCache.set(host, createStatefulHost(host, response.isTimedOut ? HostStatusEnum.Timeouted : HostStatusEnum.Down)),
+                ]).then(() => retry(hosts, getTimeout));
+            },
+            onFail(response) {
+                pushToStackTrace(response);
+                throw deserializeFailure(response, stackTraceWithoutCredentials(stackTrace));
+            },
+        };
+        return transporter.requester.send(payload).then(response => {
+            return retryDecision(response, decisions);
+        });
+    };
+    /**
+     * Finally, for each retryable host perform request until we got a non
+     * retryable response. Some notes here:
+     *
+     * 1. The reverse here is applied so we can apply a `pop` later on => more performant.
+     * 2. We also get from the retryable options a timeout multiplier that is tailored
+     * for the current context.
+     */
+    return createRetryableOptions(transporter.hostsCache, statelessHosts).then(options => {
+        return retry([...options.statelessHosts].reverse(), options.getTimeout);
+    });
+}
+
+function createTransporter(options) {
+    const { hostsCache, logger, requester, requestsCache, responsesCache, timeouts, userAgent, hosts, queryParameters, headers, } = options;
+    const transporter = {
+        hostsCache,
+        logger,
+        requester,
+        requestsCache,
+        responsesCache,
+        timeouts,
+        userAgent,
+        headers,
+        queryParameters,
+        hosts: hosts.map(host => createStatelessHost(host)),
+        read(request, requestOptions) {
+            /**
+             * First, we compute the user request options. Now, keep in mind,
+             * that using request options the user is able to modified the intire
+             * payload of the request. Such as headers, query parameters, and others.
+             */
+            const mappedRequestOptions = createMappedRequestOptions(requestOptions, transporter.timeouts.read);
+            const createRetryableRequest = () => {
+                /**
+                 * Then, we prepare a function factory that contains the construction of
+                 * the retryable request. At this point, we may *not* perform the actual
+                 * request. But we want to have the function factory ready.
+                 */
+                return retryableRequest(transporter, transporter.hosts.filter(host => (host.accept & CallEnum.Read) !== 0), request, mappedRequestOptions);
+            };
+            /**
+             * Once we have the function factory ready, we need to determine of the
+             * request is "cacheable" - should be cached. Note that, once again,
+             * the user can force this option.
+             */
+            const cacheable = mappedRequestOptions.cacheable !== undefined
+                ? mappedRequestOptions.cacheable
+                : request.cacheable;
+            /**
+             * If is not "cacheable", we immediatly trigger the retryable request, no
+             * need to check cache implementations.
+             */
+            if (cacheable !== true) {
+                return createRetryableRequest();
+            }
+            /**
+             * If the request is "cacheable", we need to first compute the key to ask
+             * the cache implementations if this request is on progress or if the
+             * response already exists on the cache.
+             */
+            const key = {
+                request,
+                mappedRequestOptions,
+                transporter: {
+                    queryParameters: transporter.queryParameters,
+                    headers: transporter.headers,
+                },
+            };
+            /**
+             * With the computed key, we first ask the responses cache
+             * implemention if this request was been resolved before.
+             */
+            return transporter.responsesCache.get(key, () => {
+                /**
+                 * If the request has never resolved before, we actually ask if there
+                 * is a current request with the same key on progress.
+                 */
+                return transporter.requestsCache.get(key, () => {
+                    return (transporter.requestsCache
+                        /**
+                         * Finally, if there is no request in progress with the same key,
+                         * this `createRetryableRequest()` will actually trigger the
+                         * retryable request.
+                         */
+                        .set(key, createRetryableRequest())
+                        .then(response => Promise.all([transporter.requestsCache.delete(key), response]), err => Promise.all([transporter.requestsCache.delete(key), Promise.reject(err)]))
+                        .then(([_, response]) => response));
+                });
+            }, {
+                /**
+                 * Of course, once we get this response back from the server, we
+                 * tell response cache to actually store the received response
+                 * to be used later.
+                 */
+                miss: response => transporter.responsesCache.set(key, response),
+            });
+        },
+        write(request, requestOptions) {
+            /**
+             * On write requests, no cache mechanisms are applied, and we
+             * proxy the request immediately to the requester.
+             */
+            return retryableRequest(transporter, transporter.hosts.filter(host => (host.accept & CallEnum.Write) !== 0), request, createMappedRequestOptions(requestOptions, transporter.timeouts.write));
+        },
+    };
+    return transporter;
+}
+
+function createUserAgent(version) {
+    const userAgent = {
+        value: `Algolia for JavaScript (${version})`,
+        add(options) {
+            const addedUserAgent = `; ${options.segment}${options.version !== undefined ? ` (${options.version})` : ''}`;
+            if (userAgent.value.indexOf(addedUserAgent) === -1) {
+                // eslint-disable-next-line functional/immutable-data
+                userAgent.value = `${userAgent.value}${addedUserAgent}`;
+            }
+            return userAgent;
+        },
+    };
+    return userAgent;
+}
+
+function deserializeSuccess(response) {
+    // eslint-disable-next-line functional/no-try-statement
+    try {
+        return JSON.parse(response.content);
+    }
+    catch (e) {
+        throw createDeserializationError(e.message, response);
+    }
+}
+function deserializeFailure({ content, status }, stackFrame) {
+    // eslint-disable-next-line functional/no-let
+    let message = content;
+    // eslint-disable-next-line functional/no-try-statement
+    try {
+        message = JSON.parse(content).message;
+    }
+    catch (e) {
+        // ..
+    }
+    return createApiError(message, status, stackFrame);
+}
+
+// eslint-disable-next-line functional/prefer-readonly-type
+function encode(format, ...args) {
+    // eslint-disable-next-line functional/no-let
+    let i = 0;
+    return format.replace(/%s/g, () => encodeURIComponent(args[i++]));
+}
+
+function serializeUrl(host, path, queryParameters) {
+    const queryParametersAsString = serializeQueryParameters(queryParameters);
+    // eslint-disable-next-line functional/no-let
+    let url = `${host.protocol}://${host.url}/${path.charAt(0) === '/' ? path.substr(1) : path}`;
+    if (queryParametersAsString.length) {
+        url += `?${queryParametersAsString}`;
+    }
+    return url;
+}
+function serializeQueryParameters(parameters) {
+    const isObjectOrArray = (value) => Object.prototype.toString.call(value) === '[object Object]' ||
+        Object.prototype.toString.call(value) === '[object Array]';
+    return Object.keys(parameters)
+        .map(key => encode('%s=%s', key, isObjectOrArray(parameters[key]) ? JSON.stringify(parameters[key]) : parameters[key]))
+        .join('&');
+}
+function serializeData(request, requestOptions) {
+    if (request.method === MethodEnum.Get ||
+        (request.data === undefined && requestOptions.data === undefined)) {
+        return undefined;
+    }
+    const data = Array.isArray(request.data)
+        ? request.data
+        : { ...request.data, ...requestOptions.data };
+    return JSON.stringify(data);
+}
+function serializeHeaders(transporter, requestOptions) {
+    const headers = {
+        ...transporter.headers,
+        ...requestOptions.headers,
+    };
+    const serializedHeaders = {};
+    Object.keys(headers).forEach(header => {
+        const value = headers[header];
+        // @ts-ignore
+        // eslint-disable-next-line functional/immutable-data
+        serializedHeaders[header.toLowerCase()] = value;
+    });
+    return serializedHeaders;
+}
+
+function stackTraceWithoutCredentials(stackTrace) {
+    return stackTrace.map(stackFrame => stackFrameWithoutCredentials(stackFrame));
+}
+function stackFrameWithoutCredentials(stackFrame) {
+    const modifiedHeaders = stackFrame.request.headers['x-algolia-api-key']
+        ? { 'x-algolia-api-key': '*****' }
+        : {};
+    return {
+        ...stackFrame,
+        request: {
+            ...stackFrame.request,
+            headers: {
+                ...stackFrame.request.headers,
+                ...modifiedHeaders,
+            },
+        },
+    };
+}
+
+function createApiError(message, status, transporterStackTrace) {
+    return {
+        name: 'ApiError',
+        message,
+        status,
+        transporterStackTrace,
+    };
+}
+
+function createDeserializationError(message, response) {
+    return {
+        name: 'DeserializationError',
+        message,
+        response,
+    };
+}
+
+function createRetryError(transporterStackTrace) {
+    return {
+        name: 'RetryError',
+        message: 'Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.',
+        transporterStackTrace,
+    };
+}
+
+var transporter_esm = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    CallEnum: CallEnum,
+    HostStatusEnum: HostStatusEnum,
+    createApiError: createApiError,
+    createDeserializationError: createDeserializationError,
+    createMappedRequestOptions: createMappedRequestOptions,
+    createRetryError: createRetryError,
+    createStatefulHost: createStatefulHost,
+    createStatelessHost: createStatelessHost,
+    createTransporter: createTransporter,
+    createUserAgent: createUserAgent,
+    deserializeFailure: deserializeFailure,
+    deserializeSuccess: deserializeSuccess,
+    isStatefulHostTimeouted: isStatefulHostTimeouted,
+    isStatefulHostUp: isStatefulHostUp,
+    serializeData: serializeData,
+    serializeHeaders: serializeHeaders,
+    serializeQueryParameters: serializeQueryParameters,
+    serializeUrl: serializeUrl,
+    stackFrameWithoutCredentials: stackFrameWithoutCredentials,
+    stackTraceWithoutCredentials: stackTraceWithoutCredentials
+});
+
+const createAnalyticsClient = options => {
+    const region = options.region || 'us';
+    const auth = createAuth(AuthMode.WithinHeaders, options.appId, options.apiKey);
+    const transporter = createTransporter({
+        hosts: [{ url: `analytics.${region}.algolia.com` }],
+        ...options,
+        headers: {
+            ...auth.headers(),
+            ...{ 'content-type': 'application/json' },
+            ...options.headers,
+        },
+        queryParameters: {
+            ...auth.queryParameters(),
+            ...options.queryParameters,
+        },
+    });
+    const appId = options.appId;
+    return addMethods({ appId, transporter }, options.methods);
+};
+
+const addABTest = (base) => {
+    return (abTest, requestOptions) => {
+        return base.transporter.write({
+            method: MethodEnum.Post,
+            path: '2/abtests',
+            data: abTest,
+        }, requestOptions);
+    };
+};
+
+const deleteABTest = (base) => {
+    return (abTestID, requestOptions) => {
+        return base.transporter.write({
+            method: MethodEnum.Delete,
+            path: encode$1('2/abtests/%s', abTestID),
+        }, requestOptions);
+    };
+};
+
+const getABTest = (base) => {
+    return (abTestID, requestOptions) => {
+        return base.transporter.read({
+            method: MethodEnum.Get,
+            path: encode$1('2/abtests/%s', abTestID),
+        }, requestOptions);
+    };
+};
+
+const getABTests = (base) => {
+    return (requestOptions) => {
+        return base.transporter.read({
+            method: MethodEnum.Get,
+            path: '2/abtests',
+        }, requestOptions);
+    };
+};
+
+const stopABTest = (base) => {
+    return (abTestID, requestOptions) => {
+        return base.transporter.write({
+            method: MethodEnum.Post,
+            path: encode$1('2/abtests/%s/stop', abTestID),
+        }, requestOptions);
+    };
+};
+
+var clientAnalytics_esm = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    addABTest: addABTest,
+    createAnalyticsClient: createAnalyticsClient,
+    deleteABTest: deleteABTest,
+    getABTest: getABTest,
+    getABTests: getABTests,
+    stopABTest: stopABTest
+});
+
+var require$$2 = /*@__PURE__*/getAugmentedNamespace(clientAnalytics_esm);
+
+var require$$3 = /*@__PURE__*/getAugmentedNamespace(clientCommon_esm);
+
+const createPersonalizationClient = options => {
+    const region = options.region || 'us';
+    const auth = createAuth(AuthMode.WithinHeaders, options.appId, options.apiKey);
+    const transporter = createTransporter({
+        hosts: [{ url: `personalization.${region}.algolia.com` }],
+        ...options,
+        headers: {
+            ...auth.headers(),
+            ...{ 'content-type': 'application/json' },
+            ...options.headers,
+        },
+        queryParameters: {
+            ...auth.queryParameters(),
+            ...options.queryParameters,
+        },
+    });
+    return addMethods({ appId: options.appId, transporter }, options.methods);
+};
+
+const getPersonalizationStrategy = (base) => {
+    return (requestOptions) => {
+        return base.transporter.read({
+            method: MethodEnum.Get,
+            path: '1/strategies/personalization',
+        }, requestOptions);
+    };
+};
+
+const setPersonalizationStrategy = (base) => {
+    return (personalizationStrategy, requestOptions) => {
+        return base.transporter.write({
+            method: MethodEnum.Post,
+            path: '1/strategies/personalization',
+            data: personalizationStrategy,
+        }, requestOptions);
+    };
+};
+
+var clientPersonalization_esm = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    createPersonalizationClient: createPersonalizationClient,
+    getPersonalizationStrategy: getPersonalizationStrategy,
+    setPersonalizationStrategy: setPersonalizationStrategy
+});
+
+var require$$4 = /*@__PURE__*/getAugmentedNamespace(clientPersonalization_esm);
+
+function createNullLogger() {
+    return {
+        debug(_message, _args) {
+            return Promise.resolve();
+        },
+        info(_message, _args) {
+            return Promise.resolve();
+        },
+        error(_message, _args) {
+            return Promise.resolve();
+        },
+    };
+}
+
+const LogLevelEnum = {
+    Debug: 1,
+    Info: 2,
+    Error: 3,
+};
+
+var loggerCommon_esm = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LogLevelEnum: LogLevelEnum,
+    createNullLogger: createNullLogger
+});
+
+var require$$6$1 = /*@__PURE__*/getAugmentedNamespace(loggerCommon_esm);
+
+var recommend$3 = {exports: {}};
+
+/* eslint functional/prefer-readonly-type: 0 */
+const agentOptions = { keepAlive: true };
+const defaultHttpAgent = new Agent(agentOptions);
+const defaultHttpsAgent = new Agent$1(agentOptions);
+function createNodeHttpRequester({ agent: userGlobalAgent, httpAgent: userHttpAgent, httpsAgent: userHttpsAgent, requesterOptions = {}, } = {}) {
+    const httpAgent = userHttpAgent || userGlobalAgent || defaultHttpAgent;
+    const httpsAgent = userHttpsAgent || userGlobalAgent || defaultHttpsAgent;
+    return {
+        send(request) {
+            return new Promise(resolve => {
+                const url = parse(request.url);
+                const path = url.query === null ? url.pathname : `${url.pathname}?${url.query}`;
+                const options = {
+                    ...requesterOptions,
+                    agent: url.protocol === 'https:' ? httpsAgent : httpAgent,
+                    hostname: url.hostname,
+                    path,
+                    method: request.method,
+                    headers: {
+                        ...(requesterOptions && requesterOptions.headers ? requesterOptions.headers : {}),
+                        ...request.headers,
+                    },
+                    ...(url.port !== undefined ? { port: url.port || '' } : {}),
+                };
+                const req = (url.protocol === 'https:' ? https : http).request(options, response => {
+                    // eslint-disable-next-line functional/no-let
+                    let contentBuffers = [];
+                    response.on('data', chunk => {
+                        contentBuffers = contentBuffers.concat(chunk);
+                    });
+                    response.on('end', () => {
+                        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                        clearTimeout(connectTimeout);
+                        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                        clearTimeout(responseTimeout);
+                        resolve({
+                            status: response.statusCode || 0,
+                            content: Buffer.concat(contentBuffers).toString(),
+                            isTimedOut: false,
+                        });
+                    });
+                });
+                const createTimeout = (timeout, content) => {
+                    return setTimeout(() => {
+                        req.abort();
+                        resolve({
+                            status: 0,
+                            content,
+                            isTimedOut: true,
+                        });
+                    }, timeout * 1000);
+                };
+                const connectTimeout = createTimeout(request.connectTimeout, 'Connection timeout');
+                // eslint-disable-next-line functional/no-let
+                let responseTimeout;
+                req.on('error', error => {
+                    clearTimeout(connectTimeout);
+                    clearTimeout(responseTimeout);
+                    resolve({ status: 0, content: error.message, isTimedOut: false });
+                });
+                req.once('response', () => {
+                    clearTimeout(connectTimeout);
+                    responseTimeout = createTimeout(request.responseTimeout, 'Socket timeout');
+                });
+                if (request.data !== undefined) {
+                    req.write(request.data);
+                }
+                req.end();
+            });
+        },
+        destroy() {
+            httpAgent.destroy();
+            httpsAgent.destroy();
+            return Promise.resolve();
+        },
+    };
+}
+
+var requesterNodeHttp_esm = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    createNodeHttpRequester: createNodeHttpRequester
+});
+
+var require$$8 = /*@__PURE__*/getAugmentedNamespace(requesterNodeHttp_esm);
+
+var require$$9 = /*@__PURE__*/getAugmentedNamespace(transporter_esm);
+
+var require$$6 = /*@__PURE__*/getAugmentedNamespace(requesterCommon_esm);
+
+var cacheCommon$1 = require$$0;
+var cacheInMemory$1 = require$$1;
+var clientCommon$1 = require$$3;
+var loggerCommon$1 = require$$6$1;
+var requesterNodeHttp$1 = require$$8;
+var transporter$1 = require$$9;
+var requesterCommon = require$$6;
+
+const createRecommendClient = options => {
+    const appId = options.appId;
+    const auth = clientCommon$1.createAuth(options.authMode !== undefined ? options.authMode : clientCommon$1.AuthMode.WithinHeaders, appId, options.apiKey);
+    const transporter$1$1 = transporter$1.createTransporter({
+        hosts: [
+            { url: `${appId}-dsn.algolia.net`, accept: transporter$1.CallEnum.Read },
+            { url: `${appId}.algolia.net`, accept: transporter$1.CallEnum.Write },
+        ].concat(clientCommon$1.shuffle([
+            { url: `${appId}-1.algolianet.com` },
+            { url: `${appId}-2.algolianet.com` },
+            { url: `${appId}-3.algolianet.com` },
+        ])),
+        ...options,
+        headers: {
+            ...auth.headers(),
+            ...{ 'content-type': 'application/x-www-form-urlencoded' },
+            ...options.headers,
+        },
+        queryParameters: {
+            ...auth.queryParameters(),
+            ...options.queryParameters,
+        },
+    });
+    const base = {
+        transporter: transporter$1$1,
+        appId,
+        addAlgoliaAgent(segment, version) {
+            transporter$1$1.userAgent.add({ segment, version });
+        },
+        clearCache() {
+            return Promise.all([
+                transporter$1$1.requestsCache.clear(),
+                transporter$1$1.responsesCache.clear(),
+            ]).then(() => undefined);
+        },
+    };
+    return clientCommon$1.addMethods(base, options.methods);
+};
+
+const getRecommendations = base => {
+    return (queries, requestOptions) => {
+        const requests = queries.map(query => ({
+            ...query,
+            // The `threshold` param is required by the endpoint to make it easier
+            // to provide a default value later, so we default it in the client
+            // so that users don't have to provide a value.
+            threshold: query.threshold || 0,
+        }));
+        return base.transporter.read({
+            method: requesterCommon.MethodEnum.Post,
+            path: '1/indexes/*/recommendations',
+            data: {
+                requests,
+            },
+            cacheable: true,
+        }, requestOptions);
+    };
+};
+
+const getFrequentlyBoughtTogether = base => {
+    return (queries, requestOptions) => {
+        return getRecommendations(base)(queries.map(query => ({
+            ...query,
+            fallbackParameters: {},
+            model: 'bought-together',
+        })), requestOptions);
+    };
+};
+
+const getRelatedProducts = base => {
+    return (queries, requestOptions) => {
+        return getRecommendations(base)(queries.map(query => ({
+            ...query,
+            model: 'related-products',
+        })), requestOptions);
+    };
+};
+
+const getTrendingFacets = base => {
+    return (queries, requestOptions) => {
+        const requests = queries.map(query => ({
+            ...query,
+            model: 'trending-facets',
+            // The `threshold` param is required by the endpoint to make it easier
+            // to provide a default value later, so we default it in the client
+            // so that users don't have to provide a value.
+            threshold: query.threshold || 0,
+        }));
+        return base.transporter.read({
+            method: requesterCommon.MethodEnum.Post,
+            path: '1/indexes/*/recommendations',
+            data: {
+                requests,
+            },
+            cacheable: true,
+        }, requestOptions);
+    };
+};
+
+const getTrendingItems = base => {
+    return (queries, requestOptions) => {
+        const requests = queries.map(query => ({
+            ...query,
+            model: 'trending-items',
+            // The `threshold` param is required by the endpoint to make it easier
+            // to provide a default value later, so we default it in the client
+            // so that users don't have to provide a value.
+            threshold: query.threshold || 0,
+        }));
+        return base.transporter.read({
+            method: requesterCommon.MethodEnum.Post,
+            path: '1/indexes/*/recommendations',
+            data: {
+                requests,
+            },
+            cacheable: true,
+        }, requestOptions);
+    };
+};
+
+const getLookingSimilar = base => {
+    return (queries, requestOptions) => {
+        return getRecommendations(base)(queries.map(query => ({
+            ...query,
+            model: 'looking-similar',
+        })), requestOptions);
+    };
+};
+
+const getRecommendedForYou = base => {
+    return (queries, requestOptions) => {
+        const requests = queries.map(query => ({
+            ...query,
+            model: 'recommended-for-you',
+            threshold: query.threshold || 0,
+        }));
+        return base.transporter.read({
+            method: requesterCommon.MethodEnum.Post,
+            path: '1/indexes/*/recommendations',
+            data: {
+                requests,
+            },
+            cacheable: true,
+        }, requestOptions);
+    };
+};
+
+function recommend$2(appId, apiKey, options) {
+    const commonOptions = {
+        appId,
+        apiKey,
+        timeouts: {
+            connect: 2,
+            read: 5,
+            write: 30,
+        },
+        requester: requesterNodeHttp$1.createNodeHttpRequester(),
+        logger: loggerCommon$1.createNullLogger(),
+        responsesCache: cacheCommon$1.createNullCache(),
+        requestsCache: cacheCommon$1.createNullCache(),
+        hostsCache: cacheInMemory$1.createInMemoryCache(),
+        userAgent: transporter$1.createUserAgent(clientCommon$1.version)
+            .add({ segment: 'Recommend', version: clientCommon$1.version })
+            .add({ segment: 'Node.js', version: process.versions.node }),
+    };
+    return createRecommendClient({
+        ...commonOptions,
+        ...options,
+        methods: {
+            destroy: clientCommon$1.destroy,
+            getFrequentlyBoughtTogether,
+            getRecommendations,
+            getRelatedProducts,
+            getTrendingFacets,
+            getTrendingItems,
+            getLookingSimilar,
+            getRecommendedForYou,
+        },
+    });
+}
+/* eslint-disable functional/immutable-data */
+recommend$2.version = clientCommon$1.version;
+recommend$2.getFrequentlyBoughtTogether = getFrequentlyBoughtTogether;
+recommend$2.getRecommendations = getRecommendations;
+recommend$2.getRelatedProducts = getRelatedProducts;
+recommend$2.getTrendingFacets = getTrendingFacets;
+recommend$2.getTrendingItems = getTrendingItems;
+recommend$2.getLookingSimilar = getLookingSimilar;
+recommend$2.getRecommendedForYou = getRecommendedForYou;
+
+var recommend_cjs = recommend$2;
+
+/* eslint-disable functional/immutable-data, import/no-commonjs */
+
+const recommend$1 = recommend_cjs;
+
+/**
+ * The Common JS build is the default entry point for the Node environment. Keep in
+ * in mind, that for the browser environment, we hint the bundler to use the UMD
+ * build instead as specified on the key `browser` of our `package.json` file.
+ */
+recommend$3.exports = recommend$1;
+
+/**
+ * In addition, we also set explicitly the default export below making
+ * this Common JS module in compliance with es6 modules specification.
+ */
+recommend$3.exports.default = recommend$1;
+
+var recommendExports = recommend$3.exports;
+
+var cacheCommon = require$$0;
+var cacheInMemory = require$$1;
+var clientAnalytics = require$$2;
+var clientCommon = require$$3;
+var clientPersonalization = require$$4;
+var clientSearch = require$$5;
+var loggerCommon = require$$6$1;
+var recommend = recommendExports;
+var requesterNodeHttp = require$$8;
+var transporter = require$$9;
+
+function algoliasearch$2(appId, apiKey, options) {
+    const commonOptions = {
+        appId,
+        apiKey,
+        timeouts: {
+            connect: 2,
+            read: 5,
+            write: 30,
+        },
+        requester: requesterNodeHttp.createNodeHttpRequester(),
+        logger: loggerCommon.createNullLogger(),
+        responsesCache: cacheCommon.createNullCache(),
+        requestsCache: cacheCommon.createNullCache(),
+        hostsCache: cacheInMemory.createInMemoryCache(),
+        userAgent: transporter.createUserAgent(clientCommon.version).add({
+            segment: 'Node.js',
+            version: process.versions.node,
+        }),
+    };
+    const searchClientOptions = { ...commonOptions, ...options };
+    const initPersonalization = () => (clientOptions) => {
+        return clientPersonalization.createPersonalizationClient({
+            ...commonOptions,
+            ...clientOptions,
+            methods: {
+                getPersonalizationStrategy: clientPersonalization.getPersonalizationStrategy,
+                setPersonalizationStrategy: clientPersonalization.setPersonalizationStrategy,
+            },
+        });
+    };
+    return clientSearch.createSearchClient({
+        ...searchClientOptions,
+        methods: {
+            search: clientSearch.multipleQueries,
+            searchForFacetValues: clientSearch.multipleSearchForFacetValues,
+            multipleBatch: clientSearch.multipleBatch,
+            multipleGetObjects: clientSearch.multipleGetObjects,
+            multipleQueries: clientSearch.multipleQueries,
+            copyIndex: clientSearch.copyIndex,
+            copySettings: clientSearch.copySettings,
+            copyRules: clientSearch.copyRules,
+            copySynonyms: clientSearch.copySynonyms,
+            moveIndex: clientSearch.moveIndex,
+            listIndices: clientSearch.listIndices,
+            getLogs: clientSearch.getLogs,
+            listClusters: clientSearch.listClusters,
+            multipleSearchForFacetValues: clientSearch.multipleSearchForFacetValues,
+            getApiKey: clientSearch.getApiKey,
+            addApiKey: clientSearch.addApiKey,
+            listApiKeys: clientSearch.listApiKeys,
+            updateApiKey: clientSearch.updateApiKey,
+            deleteApiKey: clientSearch.deleteApiKey,
+            restoreApiKey: clientSearch.restoreApiKey,
+            assignUserID: clientSearch.assignUserID,
+            assignUserIDs: clientSearch.assignUserIDs,
+            getUserID: clientSearch.getUserID,
+            searchUserIDs: clientSearch.searchUserIDs,
+            listUserIDs: clientSearch.listUserIDs,
+            getTopUserIDs: clientSearch.getTopUserIDs,
+            removeUserID: clientSearch.removeUserID,
+            hasPendingMappings: clientSearch.hasPendingMappings,
+            generateSecuredApiKey: clientSearch.generateSecuredApiKey,
+            getSecuredApiKeyRemainingValidity: clientSearch.getSecuredApiKeyRemainingValidity,
+            destroy: clientCommon.destroy,
+            clearDictionaryEntries: clientSearch.clearDictionaryEntries,
+            deleteDictionaryEntries: clientSearch.deleteDictionaryEntries,
+            getDictionarySettings: clientSearch.getDictionarySettings,
+            getAppTask: clientSearch.getAppTask,
+            replaceDictionaryEntries: clientSearch.replaceDictionaryEntries,
+            saveDictionaryEntries: clientSearch.saveDictionaryEntries,
+            searchDictionaryEntries: clientSearch.searchDictionaryEntries,
+            setDictionarySettings: clientSearch.setDictionarySettings,
+            waitAppTask: clientSearch.waitAppTask,
+            customRequest: clientSearch.customRequest,
+            initIndex: base => (indexName) => {
+                return clientSearch.initIndex(base)(indexName, {
+                    methods: {
+                        batch: clientSearch.batch,
+                        delete: clientSearch.deleteIndex,
+                        findAnswers: clientSearch.findAnswers,
+                        getObject: clientSearch.getObject,
+                        getObjects: clientSearch.getObjects,
+                        saveObject: clientSearch.saveObject,
+                        saveObjects: clientSearch.saveObjects,
+                        search: clientSearch.search,
+                        searchForFacetValues: clientSearch.searchForFacetValues,
+                        waitTask: clientSearch.waitTask,
+                        setSettings: clientSearch.setSettings,
+                        getSettings: clientSearch.getSettings,
+                        partialUpdateObject: clientSearch.partialUpdateObject,
+                        partialUpdateObjects: clientSearch.partialUpdateObjects,
+                        deleteObject: clientSearch.deleteObject,
+                        deleteObjects: clientSearch.deleteObjects,
+                        deleteBy: clientSearch.deleteBy,
+                        clearObjects: clientSearch.clearObjects,
+                        browseObjects: clientSearch.browseObjects,
+                        getObjectPosition: clientSearch.getObjectPosition,
+                        findObject: clientSearch.findObject,
+                        exists: clientSearch.exists,
+                        saveSynonym: clientSearch.saveSynonym,
+                        saveSynonyms: clientSearch.saveSynonyms,
+                        getSynonym: clientSearch.getSynonym,
+                        searchSynonyms: clientSearch.searchSynonyms,
+                        browseSynonyms: clientSearch.browseSynonyms,
+                        deleteSynonym: clientSearch.deleteSynonym,
+                        clearSynonyms: clientSearch.clearSynonyms,
+                        replaceAllObjects: clientSearch.replaceAllObjects,
+                        replaceAllSynonyms: clientSearch.replaceAllSynonyms,
+                        searchRules: clientSearch.searchRules,
+                        getRule: clientSearch.getRule,
+                        deleteRule: clientSearch.deleteRule,
+                        saveRule: clientSearch.saveRule,
+                        saveRules: clientSearch.saveRules,
+                        replaceAllRules: clientSearch.replaceAllRules,
+                        browseRules: clientSearch.browseRules,
+                        clearRules: clientSearch.clearRules,
+                    },
+                });
+            },
+            initAnalytics: () => (clientOptions) => {
+                return clientAnalytics.createAnalyticsClient({
+                    ...commonOptions,
+                    ...clientOptions,
+                    methods: {
+                        addABTest: clientAnalytics.addABTest,
+                        getABTest: clientAnalytics.getABTest,
+                        getABTests: clientAnalytics.getABTests,
+                        stopABTest: clientAnalytics.stopABTest,
+                        deleteABTest: clientAnalytics.deleteABTest,
+                    },
+                });
+            },
+            initPersonalization,
+            initRecommendation: () => (clientOptions) => {
+                searchClientOptions.logger.info('The `initRecommendation` method is deprecated. Use `initPersonalization` instead.');
+                return initPersonalization()(clientOptions);
+            },
+            getRecommendations: recommend.getRecommendations,
+            getFrequentlyBoughtTogether: recommend.getFrequentlyBoughtTogether,
+            getLookingSimilar: recommend.getLookingSimilar,
+            getRecommendedForYou: recommend.getRecommendedForYou,
+            getRelatedProducts: recommend.getRelatedProducts,
+            getTrendingFacets: recommend.getTrendingFacets,
+            getTrendingItems: recommend.getTrendingItems,
+        },
+    });
+}
+// eslint-disable-next-line functional/immutable-data
+algoliasearch$2.version = clientCommon.version;
+
+var algoliasearch_cjs = algoliasearch$2;
+
+/* eslint-disable functional/immutable-data, import/no-commonjs */
+
+const algoliasearch$1 = algoliasearch_cjs;
+
+/**
+ * The Common JS build is the default entry point for the Node environment. Keep in
+ * in mind, that for the browser environment, we hint the bundler to use the UMD
+ * build instead as specified on the key `browser` of our `package.json` file.
+ */
+algoliasearch$3.exports = algoliasearch$1;
+
+/**
+ * In addition, we also set explicitly the default export below making
+ * this Common JS module in compliance with es6 modules specification.
+ */
+algoliasearch$3.exports.default = algoliasearch$1;
+
+var algoliasearchExports = algoliasearch$3.exports;
+
+// eslint-disable-next-line functional/immutable-data, import/no-commonjs
+var lite = algoliasearchExports;
+
+var algoliasearch = /*@__PURE__*/getDefaultExportFromCjs(lite);
+
+const onlineSearchClient = algoliasearch('testing9VXJ0U4GSV', 'f3c57c730433f5cf7825b62545eccb05');
+const searchClient = ({ online }) => ({
+    search(queries, requestOptions) {
+        if (online)
+            return onlineSearchClient
+                .search(queries, requestOptions)
+                .then(result => {
+                // eslint-disable-next-line no-console
+                console.log('search', result);
+                return result;
+            });
+        return fetch('data/algolia.json').then(response => response.json());
+    },
+    async searchForFacetValues(queries, requestOptions) {
+        if (online)
+            return onlineSearchClient
+                .searchForFacetValues(queries, requestOptions)
+                .then(result => {
+                // eslint-disable-next-line no-console
+                console.log('searchForFacetValues', result);
+                return result;
+            });
+        return [];
+    },
+});
+
+const AlgoliaContext = createContext({
+    online: false,
+    setOnline: () => { },
+    toggleOnline: () => { },
+});
+function AlgoliaProvider({ children, online: _online = false, }) {
+    const [online, setOnline] = useState(_online);
+    return (jsx(AlgoliaContext.Provider, { value: {
+            online,
+            setOnline,
+            toggleOnline: () => setOnline(online => !online),
+        }, children: jsxs(InstantSearch, { future: {
+                persistHierarchicalRootCount: true,
+                preserveSharedStateOnUnmount: true,
+            }, indexName: "dev_sonic_products_en", searchClient: searchClient({ online }), children: [jsx(Configure, { analytics: false, filters: "categoryPageId: Toolbox", hitsPerPage: 9, maxValuesPerFacet: 100 }), children] }) }));
+}
+function useAlgolia() {
+    return useContext(AlgoliaContext);
+}
+
+export { Accordion, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, AlgoliaMultiSelect, AlgoliaPagination, AlgoliaProductList, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, Button, CartFilledIcon, CartOutlinedIcon, CartProvider, Checkbox, ColorCheckbox, ConnectedAddToCartButton, DehashedOutlinedIcon, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, FormattedMessage, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, Image, IntlProvider, LinkButton, MultiSelect, NumberField, ProductCard, ProductListing, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, Select, ShowAll, Sidebar, TextField, createProductListingSearchParams, parseProductListingSearchParams, useAlgolia, useBreakpoint, useCart, useDebouncedCallback, useDisclosure, useFormattedMessage, useGlobalState, useProductCartLine, useScrollLock };