@sonic-equipment/ui 0.0.21 → 0.0.22

package/dist/index.js

@@ -1,8 +1,194 @@
+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, createElement } from 'react';
-import { Button as Button$1, FieldError as FieldError$1, useContextProps, InputContext, Input as Input$1, Label as Label$1, NumberField as NumberField$1, Link, Checkbox as Checkbox$1, Select as Select$1, SelectValue, Popover, ListBox, Section, Header, ListBoxItem, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1 } from 'react-aria-components';
+import { 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 } from 'react-instantsearch';
+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" }) }));
@@ -16,13 +202,44 @@ function Button({ _pseudo = 'none', children, className, color = 'primary', cond
     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 = {"field-error":"field-error-module-FXnIg"};
+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$n = {"field-error":"field-error-module-FXnIg"};
 
 function FieldError({ children }) {
-    return (jsx(FieldError$1, { className: styles$q['field-error'], children: children }));
+    return (jsx(FieldError$1, { className: styles$n['field-error'], children: children }));
 }
 
-var styles$p = {"input-container":"input-module-2woJR","shadow-input":"input-module-pNKEt","lg":"input-module-Dx2qC","md":"input-module-sH6e7","focus":"input-module-hEEuy","growing-input":"input-module-6HwY4"};
+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.
@@ -37,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$p['input-container'], styles$p[size], styles$p[_pseudo]), children: jsxs("div", { className: clsx({ [styles$p['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ref: ref, onChange: handleChange }), autoGrow && jsx("span", { className: styles$p['shadow-input'], children: value })] }) }));
+    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$o = {"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$o.label, children: [children, isRequired && jsx("span", { className: styles$o.required, children: "*" })] }));
+    return (jsxs(Label$1, { className: styles$l.label, children: [children, isRequired && jsx("span", { className: styles$l.required, children: "*" })] }));
 }
 
-var styles$n = {"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 = false, size = 'lg', value, withButtons, }) {
-    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$n.field, styles$n[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$n['button-input-container'], children: [withButtons && jsx(Button$1, { slot: "decrement", children: "-" }), jsx(Input, { autoGrow: autoGrow, maxLength: maxLength, placeholder: placeholder, size: size }), withButtons && jsx(Button$1, { slot: "increment", children: "+" })] }), jsx(FieldError, {})] }));
+    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$m = {"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);
@@ -125,43 +342,59 @@ function ManualInputState({ onCancel, onConfirm, quantity, }) {
         e.key === 'Enter' && onConfirm(updatedQuantity);
         e.key === 'Escape' && onCancel();
     };
-    return (jsxs("div", { className: styles$m['manual-input-container'], children: [jsx("div", { className: styles$m['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity, formatOptions: {
+    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$l = {"icon-button":"icon-button-module-4PDK-","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo"};
-
-function IconButton({ children, className, color = 'primary', isDisabled, onPress, size = 'md', }) {
-    return (jsx(Button$1, { className: clsx(styles$l['icon-button'], styles$l[size], styles$l[color], className), isDisabled: isDisabled, onPress: onPress, children: children }));
-}
-
-function FavoriteFilledIcon(props) {
-    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$k = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q"};
-
-function FavoriteButton({ isFavorite, onPress }) {
-    return (jsx(IconButton, { className: clsx(styles$k['favorite-button'], {
-            [styles$k['is-favorite']]: isFavorite,
-        }), color: "secondary", onPress: onPress, children: isFavorite ? jsx(FavoriteFilledIcon, {}) : jsx(FavoriteOutlinedIcon, {}) }));
-}
-
-var styles$j = {"link-button":"link-button-module-6i75g"};
-
-function LinkButton({ children, className, href, isDisabled, onPress, target, }) {
-    if (href) {
-        return (jsx(Link, { className: clsx(styles$j['link-button'], className), href: href, isDisabled: isDisabled, onPress: onPress, target: target, children: children }));
-    }
-    return (jsx(Button$1, { className: clsx(styles$j['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$i = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
 
@@ -473,26 +706,6 @@ function AlgoliaCategories() {
     return (jsx("div", { children: categories?.length > 0 && (jsxs("section", { className: styles$3['categories-section'], children: [jsx("h4", { className: styles$3['categories-header'], children: "Categories" }), jsx("div", { className: styles$3.categories, children: categories.map(({ count, href, id, name }) => (jsxs("a", { className: styles$3['category'], href: href, children: [jsx("span", { children: name }), ' ', jsxs("span", { className: styles$3.count, children: ["(", count, ")"] })] }, id))) })] })) }));
 }
 
-const useDisclosure = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const open = useCallback(() => {
-        setIsOpen(true);
-    }, []);
-    const close = useCallback(() => {
-        setIsOpen(false);
-    }, []);
-    const toggle = useCallback(() => {
-        setIsOpen(prevIsOpen => !prevIsOpen);
-    }, []);
-    return {
-        close,
-        isClosed: !isOpen,
-        isOpen,
-        open,
-        toggle,
-    };
-};
-
 function AlgoliaMultiSelect({ attribute }) {
     const { items, refine } = useRefinementList({
         attribute,
@@ -560,98 +773,6 @@ function AlgoliaSortBy() {
     return (jsx(Select, { label: "Sort", onChange: value => refine(String(value)), options: options, selectedOption: "dev_sonic_products_en", showLabel: false }));
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function useDebouncedCallback(func, delay) {
-    const timeoutId = useRef();
-    return function debounced(...args) {
-        clearTimeout(timeoutId.current);
-        timeoutId.current = setTimeout(() => {
-            func(...args);
-        }, delay);
-    };
-}
-
-const GlobalStateProviderContext = createContext(undefined);
-function useGlobalState(key, initialState) {
-    const state = useContext(GlobalStateProviderContext).get(key, initialState);
-    const [rerenderState, setRerenderState] = useState(state.value);
-    useEffect(() => {
-        state.addEventListener('stateChanged', setRerenderState);
-        return () => {
-            state.removeEventListener('stateChanged', setRerenderState);
-        };
-    }, [state]);
-    return [rerenderState, (value) => (state.value = value)];
-}
-
-function useCart() {
-    const [state] = useGlobalState('cart');
-    if (!state) {
-        throw new Error('useCart must be used together with the ReduxCartProvider');
-    }
-    return state;
-}
-function useProductCartLine(productId) {
-    const { addToCart, currentCart, isLoaded, isLoading, loadCurrentCart, removeCartLine, updateCartLine, } = useCart();
-    return {
-        addToCart,
-        cartLine: currentCart?.cartLines?.find(cl => cl.productId === productId),
-        currentCart,
-        isLoaded,
-        isLoading,
-        loadCurrentCart,
-        removeCartLine,
-        updateCartLine,
-    };
-}
-
-const ConnectedAddToCartButton = ({ productId }) => {
-    const [quantity, setQuantity] = useState(0);
-    const { addToCart, cartLine: _cartLine, isLoaded, isLoading, loadCurrentCart, removeCartLine, updateCartLine, } = useProductCartLine(productId);
-    const [cartLine, setCartLineState] = useState(_cartLine);
-    const setCartLineStateDebounced = useDebouncedCallback(setCartLineState, 4000);
-    useEffect(() => {
-        if (isLoading || isLoaded)
-            return;
-        loadCurrentCart();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    useEffect(() => {
-        setQuantity(cartLine?.qtyOrdered || 0);
-    }, [cartLine]);
-    useEffect(() => {
-        /* Debounce updating the internal cart line state.
-         * This is necessary when a user mutates the cart multiple times in quick succession.
-         * A response from the server may take a while to come back, so we need to wait for it.
-         * If we don't debounce, the cart line state will be updated multiple times, causing the UI to flicker.
-         */
-        if (!cartLine) {
-            setCartLineState(_cartLine);
-        }
-        else {
-            setCartLineStateDebounced(_cartLine);
-        }
-    }, [_cartLine, cartLine, setCartLineStateDebounced]);
-    const updateCart = useDebouncedCallback((quantity) => {
-        if (cartLine) {
-            if (quantity === 0) {
-                removeCartLine({ cartLineId: cartLine.id });
-            }
-            else {
-                updateCartLine({ ...cartLine, qtyOrdered: quantity });
-            }
-        }
-        else {
-            addToCart({ productId, quantity });
-        }
-    }, 300);
-    const handleChange = (quantity) => {
-        setQuantity(quantity);
-        updateCart(quantity);
-    };
-    return jsx(AddToCartButton, { onChange: handleChange, quantity: quantity });
-};
-
 function ConnectedProductCart({ productId, ...props }) {
     return (jsx(ProductCard, { ...props, addToCartButton: jsx(ConnectedAddToCartButton, { productId: productId }) }));
 }
@@ -738,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 };