@athoscommerce/snap-preact 1.0.0

package/dist/cjs/components/src/hooks/useDisplaySettings.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDisplaySettings = void 0;
+exports.useDisplaySettings = useDisplaySettings;
+var hooks_1 = require("preact/hooks");
+var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+var useDeepCompareEffect_1 = require("./useDeepCompareEffect");
+function useDisplaySettings(breakpointsObj) {
+    if (!breakpointsObj || !Object.keys(breakpointsObj).length)
+        return;
+    // Call getDisplaySettings right away to prevent flashing
+    var _a = (0, hooks_1.useState)((0, exports.getDisplaySettings)(breakpointsObj)), displaySettings = _a[0], setDisplaySettings = _a[1];
+    var debouncedHandleResize;
+    var resetResizeListener = function () {
+        function handleResize() {
+            // Set display settings to state
+            setDisplaySettings((0, exports.getDisplaySettings)(breakpointsObj));
+        }
+        // Add event listener
+        debouncedHandleResize = (0, snap_toolbox_1.debounce)(function () {
+            handleResize();
+        }, 50);
+        window.addEventListener('resize', debouncedHandleResize);
+    };
+    (0, hooks_1.useEffect)(function () {
+        resetResizeListener();
+        // Remove event listener on cleanup
+        return function () { return window.removeEventListener('resize', debouncedHandleResize); };
+    }, []);
+    // when breakpointsObj changes (due to computed values)
+    (0, useDeepCompareEffect_1.useDeepCompareEffect)(function () {
+        setDisplaySettings((0, exports.getDisplaySettings)(breakpointsObj));
+        resetResizeListener();
+    }, [breakpointsObj]);
+    return displaySettings;
+}
+var getDisplaySettings = function (breakpoints) {
+    var breakpointsSettings;
+    var currentScreenWidth = window.innerWidth;
+    var sortedList = Object.keys(breakpoints)
+        .map(function (str) { return +str; })
+        .sort(function (a, b) { return a - b; })
+        .map(function (vp) {
+        var _a;
+        return (_a = {}, _a[vp] = breakpoints[vp], _a);
+    });
+    if (sortedList.length) {
+        //loop through and find the desired breakpoints setting
+        for (var i = 0; i < sortedList.length; i++) {
+            var entry = sortedList[i];
+            var breakpoint = parseInt(Object.keys(entry)[0]);
+            var isLastEntry = i + 1 === sortedList.length;
+            var isFirstEntry = i === 0;
+            if (isLastEntry || (isFirstEntry && currentScreenWidth < breakpoint)) {
+                // last entry or a '0' value breakpoint was not provided
+                breakpointsSettings = sortedList[i][breakpoint];
+                break;
+            }
+            else {
+                var nextBreakpoint = parseInt(Object.keys(sortedList[i + 1])[0]);
+                if (currentScreenWidth >= breakpoint && currentScreenWidth < nextBreakpoint) {
+                    breakpointsSettings = sortedList[i][breakpoint];
+                    break;
+                }
+            }
+        }
+        return breakpointsSettings;
+    }
+    return breakpointsSettings;
+};
+exports.getDisplaySettings = getDisplaySettings;

package/dist/cjs/components/src/hooks/useFuncDebounce.d.ts

@@ -0,0 +1,2 @@
+export declare const useFuncDebounce: (func: () => any, delay: number) => void;
+//# sourceMappingURL=useFuncDebounce.d.ts.map

package/dist/cjs/components/src/hooks/useFuncDebounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFuncDebounce.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useFuncDebounce.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,SAAU,MAAM,GAAG,SAAS,MAAM,SAgB7D,CAAC"}

package/dist/cjs/components/src/hooks/useFuncDebounce.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFuncDebounce = void 0;
+var hooks_1 = require("preact/hooks");
+var useFuncDebounce = function (func, delay) {
+    // Use a ref to store the function
+    var funcRef = (0, hooks_1.useRef)(func);
+    funcRef.current = func;
+    (0, hooks_1.useEffect)(function () {
+        var handler = setTimeout(function () {
+            funcRef.current();
+        }, delay);
+        return function () {
+            clearTimeout(handler);
+        };
+    }, [func, delay]); // re-call effect if func or delay changes
+    // No return value because we're debouncing a function, not a value
+};
+exports.useFuncDebounce = useFuncDebounce;

package/dist/cjs/components/src/hooks/useIntersection.d.ts

@@ -0,0 +1,3 @@
+import { MutableRef } from 'preact/hooks';
+export declare const useIntersection: (ref: MutableRef<HTMLElement | null>, rootMargin?: string, fireOnce?: boolean) => boolean;
+//# sourceMappingURL=useIntersection.d.ts.map

package/dist/cjs/components/src/hooks/useIntersection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersection.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useIntersection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/D,eAAO,MAAM,eAAe,QAAS,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,qDAyBlE,CAAC"}

package/dist/cjs/components/src/hooks/useIntersection.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIntersection = void 0;
+var hooks_1 = require("preact/hooks");
+var useIntersection = function (ref, rootMargin, fireOnce) {
+    if (rootMargin === void 0) { rootMargin = '0px'; }
+    if (fireOnce === void 0) { fireOnce = false; }
+    // State and setter for storing whether element is visible
+    var _a = (0, hooks_1.useState)(false), isIntersecting = _a[0], setIntersecting = _a[1];
+    (0, hooks_1.useEffect)(function () {
+        var observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            // Update our state when observer callback fires
+            setIntersecting(entry.isIntersecting);
+            if (fireOnce && entry.isIntersecting) {
+                observer.unobserve(ref.current);
+            }
+        }, {
+            rootMargin: rootMargin,
+        });
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return function () {
+            observer.unobserve(ref.current);
+        };
+    }, []); // Empty array ensures that effect is only run on mount and unmount
+    return isIntersecting;
+};
+exports.useIntersection = useIntersection;

package/dist/cjs/components/src/hooks/useIntersectionAdvanced.d.ts

@@ -0,0 +1,12 @@
+import { MutableRef } from 'preact/hooks';
+export interface UseIntersectionOptions {
+    rootMargin?: string;
+    fireOnce?: boolean;
+    threshold?: number | number[];
+    minVisibleTime?: number;
+}
+export declare const useIntersectionAdvanced: (ref: MutableRef<HTMLElement | null>, options?: UseIntersectionOptions) => {
+    inViewport: boolean;
+    updateRef: (el: HTMLElement | null) => void;
+};
+//# sourceMappingURL=useIntersectionAdvanced.d.ts.map

package/dist/cjs/components/src/hooks/useIntersectionAdvanced.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersectionAdvanced.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useIntersectionAdvanced.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,UAAU,EAAE,MAAM,cAAc,CAAC;AAEpF,MAAM,WAAW,sBAAsB;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,eAAO,MAAM,uBAAuB,QAC9B,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,YAC1B,sBAAsB,KAC7B;IAAE,UAAU,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CA+HpE,CAAC"}

package/dist/cjs/components/src/hooks/useIntersectionAdvanced.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIntersectionAdvanced = void 0;
+var hooks_1 = require("preact/hooks");
+var VISIBILITY_POLL_INTERVAL = 250;
+var useIntersectionAdvanced = function (ref, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.rootMargin, rootMargin = _a === void 0 ? '0px' : _a, _b = options.fireOnce, fireOnce = _b === void 0 ? false : _b, _c = options.threshold, threshold = _c === void 0 ? 0 : _c, _d = options.minVisibleTime, minVisibleTime = _d === void 0 ? 0 : _d;
+    // State and setter for storing whether element is visible
+    var _e = (0, hooks_1.useState)(false), isIntersecting = _e[0], setIntersecting = _e[1];
+    // Timer reference to track visibility duration
+    var visibleTimerRef = (0, hooks_1.useRef)(null);
+    // Track when the element started being visible
+    var visibleStartRef = (0, hooks_1.useRef)(null);
+    var _f = (0, hooks_1.useState)(0), counter = _f[0], setCounter = _f[1];
+    var updateRef = (0, hooks_1.useCallback)(function (el) {
+        ref.current = el;
+        setCounter(function (c) { return c + 1; });
+    }, []);
+    (0, hooks_1.useEffect)(function () {
+        setIntersecting(false);
+        var observer = null;
+        var pollInterval = null;
+        if (!window.IntersectionObserver || !ref.current) {
+            return;
+        }
+        var clearPoll = function () {
+            if (pollInterval) {
+                window.clearInterval(pollInterval);
+                pollInterval = null;
+            }
+        };
+        var handleVisible = function () {
+            // Start tracking visibility time if minVisibleTime is set
+            if (minVisibleTime > 0) {
+                visibleStartRef.current = Date.now();
+                // Clear any existing timer
+                if (visibleTimerRef.current) {
+                    window.clearTimeout(visibleTimerRef.current);
+                }
+                // Set up a timer for the minimum visibility duration
+                visibleTimerRef.current = window.setTimeout(function () {
+                    setIntersecting(true);
+                    if (fireOnce && ref.current && observer) {
+                        observer.unobserve(ref.current);
+                    }
+                }, minVisibleTime);
+            }
+            else {
+                // If no minimum time required, update state immediately
+                setIntersecting(true);
+                if (fireOnce && ref.current && observer) {
+                    observer.unobserve(ref.current);
+                }
+            }
+        };
+        var handleHidden = function () {
+            // Element is no longer visible
+            if (visibleTimerRef.current) {
+                // Clear the timer if element goes out of view before minimum time
+                window.clearTimeout(visibleTimerRef.current);
+            }
+            visibleTimerRef.current = null;
+            visibleStartRef.current = null;
+            setIntersecting(false);
+        };
+        observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            if (entry.isIntersecting) {
+                if (ref.current && elementIsVisible(ref.current)) {
+                    clearPoll();
+                    handleVisible();
+                }
+                else {
+                    // Element is intersecting but not visible (e.g. opacity 0)
+                    // Treat as hidden but start polling for visibility
+                    handleHidden();
+                    if (!pollInterval) {
+                        pollInterval = window.setInterval(function () {
+                            if (!ref.current) {
+                                clearPoll();
+                                return;
+                            }
+                            if (elementIsVisible(ref.current)) {
+                                clearPoll();
+                                handleVisible();
+                            }
+                        }, VISIBILITY_POLL_INTERVAL);
+                    }
+                }
+            }
+            else {
+                // Element is no longer intersecting
+                clearPoll();
+                handleHidden();
+            }
+        }, {
+            rootMargin: rootMargin,
+            threshold: threshold,
+        });
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return function () {
+            setIntersecting(false);
+            clearPoll();
+            if (visibleTimerRef.current) {
+                window.clearTimeout(visibleTimerRef.current);
+            }
+            // Clean up observer
+            if (observer && ref.current) {
+                observer.unobserve(ref.current);
+            }
+        };
+    }, [ref, counter]);
+    return { inViewport: isIntersecting, updateRef: updateRef };
+};
+exports.useIntersectionAdvanced = useIntersectionAdvanced;
+function elementIsVisible(el) {
+    if (el && 'checkVisibility' in el) {
+        return el.checkVisibility({ contentVisibilityAuto: true, opacityProperty: true, visibilityProperty: true });
+    }
+    return true;
+}

package/dist/cjs/components/src/hooks/useLang.d.ts

@@ -0,0 +1,45 @@
+export type LangAttributesObj = {
+    [textId: string]: LangAttributesObjAttributes;
+};
+type ValType = {
+    'ss-lang': string;
+    dangerouslySetInnerHTML: {
+        __html: string;
+    };
+};
+type AttType = {
+    'ss-lang': string;
+    'aria-label'?: string;
+    'aria-valuetext'?: string;
+    title?: string;
+    placeholder?: string;
+    alt?: string;
+};
+export type LangAttributesObjAttributes = {
+    value?: ValType;
+    attributes?: AttType;
+    all?: Partial<ValType> & Partial<AttType> & {
+        'ss-lang': string;
+    };
+};
+export type LangType<P> = string | ((data: P) => string);
+export interface LangObjType {
+    [name: string]: Lang<any>;
+}
+export interface Lang<T> extends Partial<LangValue<T>>, Partial<LangAttributes<T>> {
+}
+export interface LangValue<T> {
+    value: LangType<T>;
+}
+export interface LangAttributes<T> {
+    attributes: {
+        'aria-label'?: LangType<T>;
+        'aria-valuetext'?: LangType<T>;
+        title?: LangType<T>;
+        alt?: LangType<T>;
+        placeholder?: LangType<T>;
+    };
+}
+export declare const useLang: (lang: LangObjType, data?: any) => LangAttributesObj;
+export {};
+//# sourceMappingURL=useLang.d.ts.map

package/dist/cjs/components/src/hooks/useLang.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLang.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useLang.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC/B,CAAC,MAAM,EAAE,MAAM,GAAG,2BAA2B,CAAC;CAC9C,CAAC;AAEF,KAAK,OAAO,GAAG;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C,CAAC;AAEF,KAAK,OAAO,GAAG;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AACF,MAAM,MAAM,2BAA2B,GAAG;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;CAClE,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC3B,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;CAC1B;AAGD,MAAM,WAAW,IAAI,CAAC,CAAC,CAAE,SAAQ,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;CAAG;AAarF,MAAM,WAAW,SAAS,CAAC,CAAC;IAC3B,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;CACnB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAChC,UAAU,EAAE;QACX,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;QAC3B,gBAAgB,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;QAC/B,KAAK,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;QACpB,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;QAClB,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;KAC1B,CAAC;CACF;AAED,eAAO,MAAM,OAAO,SAAU,WAAW,SAAS,GAAG,KAAG,iBA2EvD,CAAC"}

package/dist/cjs/components/src/hooks/useLang.js

@@ -0,0 +1,87 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLang = void 0;
+var useLang = function (lang, data) {
+    var returnObj = {};
+    Object.keys(lang).forEach(function (key) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var currentLangSettings = lang && lang[key];
+        var currentObj = {};
+        if (currentLangSettings) {
+            if (currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.value) {
+                if (typeof currentLangSettings.value == 'function') {
+                    currentObj.value = {
+                        'ss-lang': key,
+                        dangerouslySetInnerHTML: { __html: currentLangSettings.value(data) },
+                    };
+                }
+                else {
+                    currentObj.value = {
+                        'ss-lang': key,
+                        dangerouslySetInnerHTML: { __html: currentLangSettings.value },
+                    };
+                }
+            }
+            if ((currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.attributes) && Object.keys(currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.attributes).length) {
+                currentObj.attributes = {
+                    'ss-lang': key,
+                };
+                if ((_a = currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.attributes) === null || _a === void 0 ? void 0 : _a['aria-label']) {
+                    if (typeof ((_b = currentLangSettings.attributes) === null || _b === void 0 ? void 0 : _b['aria-label']) == 'function') {
+                        currentObj.attributes['aria-label'] = currentLangSettings.attributes['aria-label'](data);
+                    }
+                    else {
+                        currentObj.attributes['aria-label'] = currentLangSettings.attributes['aria-label'];
+                    }
+                }
+                if ((_c = currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.attributes) === null || _c === void 0 ? void 0 : _c['aria-valuetext']) {
+                    if (typeof ((_d = currentLangSettings.attributes) === null || _d === void 0 ? void 0 : _d['aria-valuetext']) == 'function') {
+                        currentObj.attributes['aria-valuetext'] = currentLangSettings.attributes['aria-valuetext'](data);
+                    }
+                    else {
+                        currentObj.attributes['aria-valuetext'] = currentLangSettings.attributes['aria-valuetext'];
+                    }
+                }
+                if ((_e = currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.attributes) === null || _e === void 0 ? void 0 : _e.title) {
+                    if (typeof ((_f = currentLangSettings.attributes) === null || _f === void 0 ? void 0 : _f.title) == 'function') {
+                        currentObj.attributes['title'] = currentLangSettings.attributes['title'](data);
+                    }
+                    else {
+                        currentObj.attributes['title'] = currentLangSettings.attributes['title'];
+                    }
+                }
+                if ((_g = currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.attributes) === null || _g === void 0 ? void 0 : _g.alt) {
+                    if (typeof ((_h = currentLangSettings.attributes) === null || _h === void 0 ? void 0 : _h.alt) == 'function') {
+                        currentObj.attributes['alt'] = currentLangSettings.attributes['alt'](data);
+                    }
+                    else {
+                        currentObj.attributes['alt'] = currentLangSettings.attributes['alt'];
+                    }
+                }
+                if ((_j = currentLangSettings === null || currentLangSettings === void 0 ? void 0 : currentLangSettings.attributes) === null || _j === void 0 ? void 0 : _j.placeholder) {
+                    if (typeof ((_k = currentLangSettings.attributes) === null || _k === void 0 ? void 0 : _k.placeholder) == 'function') {
+                        currentObj.attributes['placeholder'] = currentLangSettings.attributes['placeholder'](data);
+                    }
+                    else {
+                        currentObj.attributes['placeholder'] = currentLangSettings.attributes['placeholder'];
+                    }
+                }
+            }
+            currentObj.all = __assign(__assign(__assign({}, currentObj.value), currentObj.attributes), { 'ss-lang': key });
+        }
+        returnObj[key] = currentObj;
+    });
+    return returnObj;
+};
+exports.useLang = useLang;

package/dist/cjs/components/src/hooks/useLayoutOptions.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '../providers';
+export declare const useLayoutOptions: (props: any, globalTheme: Theme) => void;
+//# sourceMappingURL=useLayoutOptions.d.ts.map

package/dist/cjs/components/src/hooks/useLayoutOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutOptions.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useLayoutOptions.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAGrC,eAAO,MAAM,gBAAgB,UAAW,GAAG,eAAe,KAAK,SAiE9D,CAAC"}

package/dist/cjs/components/src/hooks/useLayoutOptions.js

@@ -0,0 +1,74 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayoutOptions = void 0;
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var useControllerStorage_1 = require("./useControllerStorage");
+var useLayoutOptions = function (props, globalTheme) {
+    var layoutOptions = (props === null || props === void 0 ? void 0 : props.layoutOptions) || [];
+    // handle layoutOptions and selected option
+    var _a = (0, useControllerStorage_1.useControllerStorage)(props.controller, 'layoutOptions', layoutOptions.filter(function (option) { return option.default; }).pop()), selectedLayout = _a[0], setSelectedLayout = _a[1];
+    // verify selectedLayout is in layoutOptions - if not set it to the default one
+    try {
+        if (!layoutOptions.some(function (option) { return JSON.stringify(option) == JSON.stringify(selectedLayout); })) {
+            var newSelection = layoutOptions.filter(function (option) { return option.default; }).pop();
+            setSelectedLayout(newSelection);
+        }
+    }
+    catch (err) {
+        props.controller.log('invalid layoutOptions provided to component', props.inherits ? " '".concat(props.inherits, "'") : '');
+    }
+    props.theme = props.theme || {};
+    props.theme.components = __assign(__assign({}, (props.theme.components || {})), { layoutSelector: {
+            options: layoutOptions,
+            onSelect: function (e, option) {
+                if (option) {
+                    setSelectedLayout(option);
+                }
+            },
+            selected: selectedLayout,
+        } });
+    var shouldUseOverrides = false;
+    if (globalTheme.components && props.treePath) {
+        // pull out the template (top level parent) component from the treePath to use in filtering out globalTheme overrides
+        var templateComponent_1 = props.treePath.split(' ')[0];
+        // we only want to use overrides if one of the toolbars is actually rendering the layoutSelector
+        Object.keys(globalTheme.components).forEach(function (key) {
+            var _a;
+            var paths = key.split(' ');
+            var componentTypeAndName = (_a = paths.splice(-1).pop()) !== null && _a !== void 0 ? _a : '';
+            var componentType = componentTypeAndName.split('.')[0];
+            if (globalTheme.components &&
+                componentType == 'toolbar' &&
+                (paths[0] == templateComponent_1 ||
+                    paths[0] == "*".concat(templateComponent_1) ||
+                    paths[0] == "*(M)".concat(templateComponent_1) ||
+                    paths[0] == "*(T)".concat(templateComponent_1) ||
+                    paths[0] == "*(D)".concat(templateComponent_1) ||
+                    !paths.length)) {
+                var toolbarConfig = globalTheme.components[key];
+                if ((toolbarConfig === null || toolbarConfig === void 0 ? void 0 : toolbarConfig.layout) && toolbarConfig.layout.toString().indexOf('layoutSelector') > -1) {
+                    shouldUseOverrides = true;
+                }
+            }
+        });
+    }
+    // grab overrides out of the "selected" or default layoutOptions and merge it in
+    if ((selectedLayout === null || selectedLayout === void 0 ? void 0 : selectedLayout.overrides) && shouldUseOverrides) {
+        props.theme = (0, deepmerge_1.default)(props.theme, { components: selectedLayout.overrides.components });
+    }
+};
+exports.useLayoutOptions = useLayoutOptions;

package/dist/cjs/components/src/hooks/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+export declare function useMediaQuery(query: string, runOnCleanup?: () => void): boolean;
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/cjs/components/src/hooks/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAgB/E"}

package/dist/cjs/components/src/hooks/useMediaQuery.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaQuery = useMediaQuery;
+var hooks_1 = require("preact/hooks");
+function useMediaQuery(query, runOnCleanup) {
+    if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined')
+        return false;
+    var mediaQuery = window.matchMedia(query);
+    var _a = (0, hooks_1.useState)(!!mediaQuery.matches), match = _a[0], setMatch = _a[1];
+    (0, hooks_1.useEffect)(function () {
+        var handler = function () { return setMatch(!!mediaQuery.matches); };
+        mediaQuery.addListener(handler);
+        return function () {
+            runOnCleanup instanceof Function && runOnCleanup();
+            mediaQuery.removeListener(handler);
+        };
+    }, []);
+    return match;
+}

package/dist/cjs/components/src/hooks/useTracking.d.ts

@@ -0,0 +1,15 @@
+import { Banner, BannerContent, ContentType, Product } from '@athoscommerce/snap-store-mobx';
+import type { SearchController, AutocompleteController, RecommendationController } from '@athoscommerce/snap-controller';
+import { type MutableRef } from 'preact/hooks';
+interface UseTrackingProps {
+    controller: SearchController | AutocompleteController | RecommendationController;
+    result: Product;
+    banner?: Banner;
+    type?: ContentType;
+    content?: BannerContent;
+}
+export declare function useTracking({ controller, result, banner, type, content }: UseTrackingProps): {
+    trackingRef: MutableRef<HTMLElement | null>;
+};
+export {};
+//# sourceMappingURL=useTracking.d.ts.map

package/dist/cjs/components/src/hooks/useTracking.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTracking.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAA8B,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1D,UAAU,gBAAgB;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,gBAAgB,GAAG;IAAE,WAAW,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,CA4C5I"}

package/dist/cjs/components/src/hooks/useTracking.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTracking = useTracking;
+var hooks_1 = require("preact/hooks");
+var utilities_1 = require("../utilities");
+var withTracking_1 = require("../providers/withTracking");
+function useTracking(_a) {
+    var controller = _a.controller, result = _a.result, banner = _a.banner, type = _a.type, content = _a.content;
+    if (!controller) {
+        console.warn('Warning: No controller provided to useTracking');
+    }
+    if (!result) {
+        console.warn('Warning: No result provided to useTracking');
+    }
+    if (!result && !banner && (!type || !content)) {
+        console.warn('Warning: No result or banner provided to withTracking');
+    }
+    var _b = (0, utilities_1.createImpressionObserver)(), ref = _b.ref, inViewport = _b.inViewport;
+    (0, hooks_1.useEffect)(function () {
+        if (inViewport) {
+            // TODO: add support for disabling tracking events via config like in ResultTracker
+            if (type && content && !result && ['search', 'autocomplete'].includes((controller === null || controller === void 0 ? void 0 : controller.type) || '')) {
+                controller === null || controller === void 0 ? void 0 : controller.track.banner.impression(content[type][0]);
+            }
+            else if (!(result === null || result === void 0 ? void 0 : result.bundleSeed)) {
+                controller === null || controller === void 0 ? void 0 : controller.track.product.impression((result || banner));
+            }
+        }
+    }, [inViewport]);
+    (0, hooks_1.useEffect)(function () {
+        var currentRef = ref.current;
+        if (currentRef) {
+            var handleClick_1 = function (e) {
+                if (type && content && !result && ['search', 'autocomplete'].includes((controller === null || controller === void 0 ? void 0 : controller.type) || '')) {
+                    controller === null || controller === void 0 ? void 0 : controller.track.banner.click(e, content[type][0]);
+                }
+                else {
+                    controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, (result || banner));
+                }
+            };
+            currentRef.setAttribute(withTracking_1.TRACKING_ATTRIBUTE, 'true');
+            currentRef.addEventListener('click', handleClick_1);
+            return function () {
+                currentRef.removeEventListener('click', handleClick_1);
+            };
+        }
+    }, [controller, result, banner, type, content]);
+    return { trackingRef: ref };
+}