@athoscommerce/snap-preact 1.9.0 → 1.10.0

package/dist/cjs/components/src/components/Molecules/FacetSlider/FacetSlider.js

@@ -1,34 +1,21 @@
 "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.FacetSlider = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var react_ranger_1 = require("react-ranger");
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var utilities_2 = require("../../../utilities");
-var hooks_2 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var defaultStyles = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var railColor = _a.railColor, trackColor = _a.trackColor, handleColor = _a.handleColor, valueTextColor = _a.valueTextColor, handleDraggingColor = _a.handleDraggingColor, showTicks = _a.showTicks, stickyHandleLabel = _a.stickyHandleLabel, tickTextColor = _a.tickTextColor, theme = _a.theme;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const react_ranger_1 = require("react-ranger");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const utilities_2 = require("../../../utilities");
+const hooks_2 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = ({ railColor, trackColor, handleColor, valueTextColor, handleDraggingColor, showTicks, stickyHandleLabel, tickTextColor, theme, }) => {
     return (0, react_1.css)({
         display: 'flex',
         flexDirection: 'column',
@@ -62,18 +49,18 @@ var defaultStyles = function (_a) {
             },
         },
         '& .ss__facet-slider__rail': {
-            background: railColor || ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) || '#333',
+            background: railColor || theme?.variables?.colors?.primary || '#333',
             height: '100%',
         },
         '& .ss__facet-slider__segment': {
-            background: trackColor || ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.secondary) || '#ccc',
+            background: trackColor || theme?.variables?.colors?.secondary || '#ccc',
             height: '100%',
         },
         '& .ss__facet-slider__handles': {
             textAlign: 'center',
             '& button': {
                 '& .ss__facet-slider__handle': {
-                    background: handleColor || ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _f === void 0 ? void 0 : _f.colors) === null || _g === void 0 ? void 0 : _g.primary) || '#333',
+                    background: handleColor || theme?.variables?.colors?.primary || '#333',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -103,7 +90,7 @@ var defaultStyles = function (_a) {
                         cursor: 'pointer',
                     },
                     '&.ss__facet-slider__handle--active': {
-                        background: handleDraggingColor || handleColor || ((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _h === void 0 ? void 0 : _h.colors) === null || _j === void 0 ? void 0 : _j.primary) || '#000',
+                        background: handleDraggingColor || handleColor || theme?.variables?.colors?.primary || '#000',
                         '& label.ss__facet-slider__handle__label': {
                             background: '#fff',
                             padding: '0 5px',
@@ -142,40 +129,38 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.FacetSlider = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
-        tickSize: ((_a = properties.facet) === null || _a === void 0 ? void 0 : _a.step) ? ((_b = properties.facet) === null || _b === void 0 ? void 0 : _b.step) * 10 : 20,
+exports.FacetSlider = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        tickSize: properties.facet?.step ? properties.facet?.step * 10 : 20,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('facetSlider', globalTheme, defaultProps, properties);
-    var showTicks = props.showTicks, facet = props.facet, stickyHandleLabel = props.stickyHandleLabel, separateHandles = props.separateHandles, onChange = props.onChange, onDrag = props.onDrag, className = props.className, internalClassName = props.internalClassName;
-    var _v = (0, hooks_2.useCustomComponentOverride)('facetSlider', props), overrideElement = _v.overrideElement, shouldRenderDefault = _v.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('facetSlider', globalTheme, defaultProps, properties);
+    const { showTicks, facet, stickyHandleLabel, separateHandles, onChange, onDrag, className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('facetSlider', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var tickSize = props.tickSize;
+    let { tickSize } = props;
     if (isNaN(Number(tickSize)) || Number(tickSize) <= 0) {
         // fallback to default (causes chrome to crash)
-        tickSize = ((_c = properties.facet) === null || _c === void 0 ? void 0 : _c.step) ? ((_d = properties.facet) === null || _d === void 0 ? void 0 : _d.step) * 10 : 20;
+        tickSize = properties.facet?.step ? properties.facet?.step * 10 : 20;
     }
     else {
         tickSize = Number(tickSize);
     }
-    var _w = (0, hooks_1.useState)([(_e = facet.active) === null || _e === void 0 ? void 0 : _e.low, (_f = facet.active) === null || _f === void 0 ? void 0 : _f.high]), values = _w[0], setValues = _w[1];
-    var _x = (0, hooks_1.useState)([(_g = facet.active) === null || _g === void 0 ? void 0 : _g.low, (_h = facet.active) === null || _h === void 0 ? void 0 : _h.high]), active = _x[0], setActive = _x[1];
+    const [values, setValues] = (0, hooks_1.useState)([facet.active?.low, facet.active?.high]);
+    const [active, setActive] = (0, hooks_1.useState)([facet.active?.low, facet.active?.high]);
     // Helper function to ensure min and max values are not equal
-    var ensureValueSeparation = function (val) {
-        var _a, _b;
+    const ensureValueSeparation = (val) => {
         if (!separateHandles || !facet.step) {
             return val;
         }
-        var minVal = val[0], maxVal = val[1];
-        var rangeMin = (_a = facet.range) === null || _a === void 0 ? void 0 : _a.low;
-        var rangeMax = (_b = facet.range) === null || _b === void 0 ? void 0 : _b.high;
-        var step = facet.step;
+        const [minVal, maxVal] = val;
+        const rangeMin = facet.range?.low;
+        const rangeMax = facet.range?.high;
+        const step = facet.step;
         // If values are equal, separate them by one step
         if (minVal === maxVal) {
             // Determine which value to adjust based on range boundaries
@@ -194,73 +179,61 @@ exports.FacetSlider = (0, mobx_react_lite_1.observer)(function (properties) {
         }
         return val;
     };
-    if (((((_j = facet.active) === null || _j === void 0 ? void 0 : _j.low) || ((_k = facet.active) === null || _k === void 0 ? void 0 : _k.low) === 0) && ((_l = facet.active) === null || _l === void 0 ? void 0 : _l.high) && values[0] != ((_m = facet.active) === null || _m === void 0 ? void 0 : _m.low)) || values[1] != ((_o = facet.active) === null || _o === void 0 ? void 0 : _o.high)) {
-        setActive([(_p = facet.active) === null || _p === void 0 ? void 0 : _p.low, (_q = facet.active) === null || _q === void 0 ? void 0 : _q.high]);
-        setValues([(_r = facet.active) === null || _r === void 0 ? void 0 : _r.low, (_s = facet.active) === null || _s === void 0 ? void 0 : _s.high]);
+    if (((facet.active?.low || facet.active?.low === 0) && facet.active?.high && values[0] != facet.active?.low) || values[1] != facet.active?.high) {
+        setActive([facet.active?.low, facet.active?.high]);
+        setValues([facet.active?.low, facet.active?.high]);
     }
-    var _y = (0, react_ranger_1.useRanger)({
+    const { getTrackProps, ticks, segments, handles } = (0, react_ranger_1.useRanger)({
         values: active,
-        onChange: function (val) {
-            var _a;
-            var adjustedVal = ensureValueSeparation(val);
+        onChange: (val) => {
+            const adjustedVal = ensureValueSeparation(val);
             setActive(adjustedVal);
             // onChange called prior to urlManager changes to allow for mutation in function
             onChange && onChange(adjustedVal);
-            if ((_a = facet === null || facet === void 0 ? void 0 : facet.services) === null || _a === void 0 ? void 0 : _a.urlManager) {
+            if (facet?.services?.urlManager) {
                 if (adjustedVal[0] == facet.range.low && adjustedVal[1] == facet.range.high) {
-                    facet.services.urlManager.remove('page').remove("filter.".concat(facet.field)).go();
+                    facet.services.urlManager.remove('page').remove(`filter.${facet.field}`).go();
                 }
                 else {
-                    facet.services.urlManager.remove('page').set("filter.".concat(facet.field), { low: adjustedVal[0], high: adjustedVal[1] }).go();
+                    facet.services.urlManager.remove('page').set(`filter.${facet.field}`, { low: adjustedVal[0], high: adjustedVal[1] }).go();
                 }
             }
             onChange && onChange(val);
         },
-        onDrag: function (val) {
-            var adjustedVal = ensureValueSeparation(val);
+        onDrag: (val) => {
+            const adjustedVal = ensureValueSeparation(val);
             setActive(adjustedVal);
             onDrag && onDrag(adjustedVal);
         },
-        min: (_t = facet.range) === null || _t === void 0 ? void 0 : _t.low,
-        max: (_u = facet.range) === null || _u === void 0 ? void 0 : _u.high,
+        min: facet.range?.low,
+        max: facet.range?.high,
         stepSize: facet.step,
         tickSize: tickSize,
-    }), getTrackProps = _y.getTrackProps, ticks = _y.ticks, segments = _y.segments, handles = _y.handles;
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    return facet.range && facet.active && facet.step ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__facet-slider', className, internalClassName) }, getTrackProps(), styling, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facet-slider__slider", children: [showTicks &&
-                            ticks.map(function (_a) {
-                                var value = _a.value, getTickProps = _a.getTickProps;
-                                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "ss__facet-slider__tick" }, getTickProps(), { children: (0, jsx_runtime_1.jsx)("div", { className: "ss__facet-slider__tick__label", children: value }) })));
-                            }), segments.map(function (_a, idx) {
-                            var getSegmentProps = _a.getSegmentProps;
-                            return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "".concat(idx === 1 ? 'ss__facet-slider__rail' : 'ss__facet-slider__segment') }, getSegmentProps())));
-                        }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__facet-slider__handles', children: handles.map(function (_a, idx) {
-                                var _b, _c, _d, _e, _f, _g, _h;
-                                var value = _a.value, active = _a.active, getHandleProps = _a.getHandleProps;
+    });
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return facet.range && facet.active && facet.step ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__facet-slider', className, internalClassName), ...getTrackProps(), ...styling, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facet-slider__slider", children: [showTicks &&
+                            ticks.map(({ value, getTickProps }) => ((0, jsx_runtime_1.jsx)("div", { className: "ss__facet-slider__tick", ...getTickProps(), children: (0, jsx_runtime_1.jsx)("div", { className: "ss__facet-slider__tick__label", children: value }) }))), segments.map(({ getSegmentProps }, idx) => ((0, jsx_runtime_1.jsx)("div", { className: `${idx === 1 ? 'ss__facet-slider__rail' : 'ss__facet-slider__segment'}`, ...getSegmentProps() }))), (0, jsx_runtime_1.jsx)("div", { className: 'ss__facet-slider__handles', children: handles.map(({ value, active, getHandleProps }, idx) => {
                                 //initialize lang
-                                var defaultLang = {
+                                const defaultLang = {
                                     sliderHandle: {
                                         attributes: {
-                                            'aria-label': "".concat(facet.label, " button, current value ").concat(value, ", ").concat(((_b = facet.range) === null || _b === void 0 ? void 0 : _b.low) ? "min value ".concat((_c = facet.range) === null || _c === void 0 ? void 0 : _c.low, ",") : "", " ").concat(((_d = facet.range) === null || _d === void 0 ? void 0 : _d.high) ? "max value ".concat((_e = facet.range) === null || _e === void 0 ? void 0 : _e.high) : ""),
+                                            'aria-label': `${facet.label} button, current value ${value}, ${facet.range?.low ? `min value ${facet.range?.low},` : ``} ${facet.range?.high ? `max value ${facet.range?.high}` : ``}`,
                                         },
                                     },
                                 };
                                 //deep merge with props.lang
-                                var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-                                var mergedLang = (0, hooks_2.useLang)(lang, {
-                                    facet: facet,
-                                    value: value,
-                                });
-                                return ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button" }, getHandleProps({
-                                    style: {
-                                        appearance: 'none',
-                                        border: 'none',
-                                        background: 'transparent',
-                                        outline: 'none',
-                                    },
-                                }), (_f = mergedLang.sliderHandle) === null || _f === void 0 ? void 0 : _f.all, { ref: function (e) { return (0, hooks_2.useA11y)(e); }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__facet-slider__handle', { 'ss__facet-slider__handle--active': active }), children: stickyHandleLabel && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)('ss__facet-slider__handle__label', 'ss__facet-slider__handle__label--sticky', "ss__facet-slider__handle__label--".concat(idx), { 'ss__facet-slider__handle__label--pinleft': idx == 0 && value == ((_g = facet === null || facet === void 0 ? void 0 : facet.range) === null || _g === void 0 ? void 0 : _g.low) }, { 'ss__facet-slider__handle__label--pinright': idx == 1 && value == ((_h = facet === null || facet === void 0 ? void 0 : facet.range) === null || _h === void 0 ? void 0 : _h.high) }), children: (0, utilities_2.sprintf)(facet.formatValue, value) })) }) })));
-                            }) })] }), !stickyHandleLabel && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__facet-slider__labels', children: handles.map(function (_a, idx) {
-                        var value = _a.value;
-                        return ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)('ss__facet-slider__label', "ss__facet-slider__label--".concat(idx)), children: (0, utilities_2.sprintf)(facet.formatValue, value) }));
-                    }) }))] })) })) : null;
+                                const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                                const mergedLang = (0, hooks_2.useLang)(lang, {
+                                    facet,
+                                    value,
+                                }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+                                return ((0, jsx_runtime_1.jsx)("button", { type: "button", ...getHandleProps({
+                                        style: {
+                                            appearance: 'none',
+                                            border: 'none',
+                                            background: 'transparent',
+                                            outline: 'none',
+                                        },
+                                    }), ...mergedLang.sliderHandle?.all, ref: (e) => (0, hooks_2.useA11y)(e), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__facet-slider__handle', { 'ss__facet-slider__handle--active': active }), children: stickyHandleLabel && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)('ss__facet-slider__handle__label', 'ss__facet-slider__handle__label--sticky', `ss__facet-slider__handle__label--${idx}`, { 'ss__facet-slider__handle__label--pinleft': idx == 0 && value == facet?.range?.low }, { 'ss__facet-slider__handle__label--pinright': idx == 1 && value == facet?.range?.high }), children: (0, utilities_2.sprintf)(facet.formatValue, value) })) }) }));
+                            }) })] }), !stickyHandleLabel && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__facet-slider__labels', children: handles.map(({ value }, idx) => ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)('ss__facet-slider__label', `ss__facet-slider__label--${idx}`), children: (0, utilities_2.sprintf)(facet.formatValue, value) }))) }))] }) })) : null;
 });

package/dist/cjs/components/src/components/Molecules/Filter/Filter.js

@@ -1,31 +1,20 @@
 "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.Filter = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var Button_1 = require("../../Atoms/Button");
-var Icon_1 = require("../../Atoms/Icon");
-var hooks_1 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var defaultStyles = function (_a) {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const Button_1 = require("../../Atoms/Button");
+const Icon_1 = require("../../Atoms/Icon");
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = ({}) => {
     return (0, react_1.css)({
         textDecoration: 'none',
         display: 'inline-flex',
@@ -43,56 +32,66 @@ var defaultStyles = function (_a) {
     });
 };
 // TODO: look into urlManager and how it connects in this case, left the href out for the time being
-exports.Filter = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Filter = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('filter', globalTheme, defaultProps, properties);
-    var filter = props.filter, facetLabel = props.facetLabel, valueLabel = props.valueLabel, url = props.url, hideFacetLabel = props.hideFacetLabel, onClick = props.onClick, icon = props.icon, separator = props.separator, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _c = (0, hooks_1.useCustomComponentOverride)('filter', props), overrideElement = _c.overrideElement, shouldRenderDefault = _c.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('filter', globalTheme, defaultProps, properties);
+    const { filter, facetLabel, valueLabel, url, hideFacetLabel, onClick, icon, separator, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('filter', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var link = ((_a = filter === null || filter === void 0 ? void 0 : filter.url) === null || _a === void 0 ? void 0 : _a.link) || (url === null || url === void 0 ? void 0 : url.link);
-    var value = (filter === null || filter === void 0 ? void 0 : filter.value.label) || valueLabel;
-    var label = (filter === null || filter === void 0 ? void 0 : filter.facet.label) || facetLabel;
-    var subProps = {
-        button: __assign(__assign({ 
+    const link = filter?.url?.link || url?.link;
+    const value = filter?.value.label || valueLabel;
+    const label = filter?.facet.label || facetLabel;
+    const subProps = {
+        button: {
             // default props
-            internalClassName: 'ss__filter__button', disableA11y: true }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__filter__button',
+            disableA11y: true,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        icon: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        icon: {
             // default props
-            icon: 'close-thin', internalClassName: 'ss__filter__button__icon', size: '10px' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            icon: icon,
-        })), { 
+            icon: 'close-thin',
+            internalClassName: 'ss__filter__button__icon',
+            size: '10px',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                icon,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
+            theme: props.theme,
+            treePath,
+        },
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         filter: {
             attributes: {
-                'aria-label': !label ? value : "remove selected ".concat(label, " filter ").concat(value),
+                'aria-label': !label ? value : `remove selected ${label} filter ${value}`,
             },
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_1.useLang)(lang, {
-        label: label,
-        value: value,
-    });
-    return value ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("a", __assign({}, styling, { className: (0, classnames_1.default)('ss__filter', className, internalClassName), onClick: function (e) {
-                (link === null || link === void 0 ? void 0 : link.onClick) && link.onClick(e);
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_1.useLang)(lang, {
+        label,
+        value,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return value ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("a", { ...styling, className: (0, classnames_1.default)('ss__filter', className, internalClassName), onClick: (e) => {
+                link?.onClick && link.onClick(e);
                 onClick && onClick(e);
-            }, href: link === null || link === void 0 ? void 0 : link.href, tabIndex: 0 }, (_b = mergedLang.filter) === null || _b === void 0 ? void 0 : _b.all, { children: (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({}, subProps.button, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon))), !hideFacetLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__filter__label", children: [label, separator && (0, jsx_runtime_1.jsx)("span", { className: "ss__filter__label__separator", children: separator })] })), (0, jsx_runtime_1.jsx)("span", { className: "ss__filter__value", children: value })] })) })) })) : null;
+            }, href: link?.href, tabIndex: 0, ...mergedLang.filter?.all, children: (0, jsx_runtime_1.jsxs)(Button_1.Button, { ...subProps.button, children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) }), !hideFacetLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__filter__label", children: [label, separator && (0, jsx_runtime_1.jsx)("span", { className: "ss__filter__label__separator", children: separator })] })), (0, jsx_runtime_1.jsx)("span", { className: "ss__filter__value", children: value })] }) }) })) : null;
 });