@athoscommerce/snap-preact 1.1.4 → 1.2.0

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

@@ -98,8 +98,9 @@ var defaultStyles = function (_a) {
     }
 };
 exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a;
+    var _a, _b;
     var globalTheme = (0, providers_1.useTheme)();
+    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         iconOpen: 'angle-down',
@@ -109,8 +110,14 @@ exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('select', globalTheme, defaultProps, properties);
-    var backgroundColor = props.backgroundColor, borderColor = props.borderColor, color = props.color, clearSelection = props.clearSelection, disableClickOutside = props.disableClickOutside, disabled = props.disabled, hideLabel = props.hideLabel, hideLabelOnSelection = props.hideLabelOnSelection, iconColor = props.iconColor, iconClose = props.iconClose, iconOpen = props.iconOpen, label = props.label, native = props.native, onSelect = props.onSelect, selected = props.selected, separator = props.separator, startOpen = props.startOpen, hideIcon = props.hideIcon, hideOptionIcons = props.hideOptionIcons, hideOptionLabels = props.hideOptionLabels, hideSelection = props.hideSelection, stayOpenOnSelection = props.stayOpenOnSelection, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var backgroundColor = props.backgroundColor, borderColor = props.borderColor, color = props.color, clearSelection = props.clearSelection, disableClickOutside = props.disableClickOutside, disabled = props.disabled, hideLabel = props.hideLabel, hideLabelOnSelection = props.hideLabelOnSelection, iconColor = props.iconColor, iconClose = props.iconClose, iconOpen = props.iconOpen, label = props.label, native = props.native, onSelect = props.onSelect, selected = props.selected, separator = props.separator, startOpen = props.startOpen, hideIcon = props.hideIcon, hideOptionIcons = props.hideOptionIcons, hideOptionLabels = props.hideOptionLabels, hideSelection = props.hideSelection, stayOpenOnSelection = props.stayOpenOnSelection, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, customComponent = props.customComponent;
     var options = props.options;
+    if (customComponent) {
+        var ComponentOverride = (0, hooks_2.useComponent)(((_a = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _a === void 0 ? void 0 : _a.library.import.component.select) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     var subProps = {
         dropdown: __assign(__assign({ internalClassName: 'ss__select__dropdown' }, (0, utilities_1.defined)({
             disableStyles: disableStyles,
@@ -140,9 +147,9 @@ exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
             theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
     };
     // open state
-    var _b = (0, hooks_1.useState)(Boolean(startOpen)), open = _b[0], setOpen = _b[1];
+    var _c = (0, hooks_1.useState)(Boolean(startOpen)), open = _c[0], setOpen = _c[1];
     // selection state
-    var _c = (0, hooks_1.useState)(selected), selection = _c[0], setSelection = _c[1];
+    var _d = (0, hooks_1.useState)(selected), selection = _d[0], setSelection = _d[1];
     // original selection state
     var originalSelected = (0, hooks_1.useState)(selected)[0];
     // reset selection if 'selected' prop changes
@@ -194,7 +201,7 @@ exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
         open: open,
     });
     // options can be an Array or ObservableArray - but should have length
-    return typeof options == 'object' && (options === null || options === void 0 ? void 0 : options.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__select', { 'ss__select--native': native }, { 'ss__select--disabled': disabled }, className, internalClassName), children: native ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(label || lang.buttonLabel.value) && !hideLabel && !hideLabelOnSelection && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__select__label", children: [(0, jsx_runtime_1.jsx)("label", __assign({}, (_a = mergedLang.buttonLabel) === null || _a === void 0 ? void 0 : _a.all)), separator && (0, jsx_runtime_1.jsx)("span", { className: "ss__select__label__separator", children: separator })] })), (0, jsx_runtime_1.jsxs)("select", { className: "ss__select__select", disabled: disabled || undefined, onChange: function (e) {
+    return typeof options == 'object' && (options === null || options === void 0 ? void 0 : options.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__select', { 'ss__select--native': native }, { 'ss__select--disabled': disabled }, className, internalClassName), children: native ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(label || lang.buttonLabel.value) && !hideLabel && !hideLabelOnSelection && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__select__label", children: [(0, jsx_runtime_1.jsx)("label", __assign({}, (_b = mergedLang.buttonLabel) === null || _b === void 0 ? void 0 : _b.all)), separator && (0, jsx_runtime_1.jsx)("span", { className: "ss__select__label__separator", children: separator })] })), (0, jsx_runtime_1.jsxs)("select", { className: "ss__select__select", disabled: disabled || undefined, onChange: function (e) {
                             var selectElement = e.target;
                             var selectedOptionElement = selectElement.options[selectElement.selectedIndex];
                             var selectedOption = options

package/dist/cjs/components/src/components/Molecules/Slideout/Slideout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAS9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA+B7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAwHzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAS9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAgC7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAiIzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}

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

@@ -51,7 +51,9 @@ var defaultStyles = function (_a) {
     });
 };
 exports.Slideout = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a;
     var globalTheme = (0, providers_1.useTheme)();
+    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         active: false,
@@ -64,7 +66,13 @@ exports.Slideout = (0, mobx_react_lite_1.observer)(function (properties) {
         rerender: true,
     };
     var props = (0, utilities_1.mergeProps)('slideout', globalTheme, defaultProps, properties);
-    var children = props.children, active = props.active, rerender = props.rerender, buttonContent = props.buttonContent, buttonSelector = props.buttonSelector, noButtonWrapper = props.noButtonWrapper, displayAt = props.displayAt, transitionSpeed = props.transitionSpeed, overlayColor = props.overlayColor, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var children = props.children, active = props.active, rerender = props.rerender, buttonContent = props.buttonContent, buttonSelector = props.buttonSelector, noButtonWrapper = props.noButtonWrapper, displayAt = props.displayAt, transitionSpeed = props.transitionSpeed, overlayColor = props.overlayColor, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, customComponent = props.customComponent;
+    if (customComponent) {
+        var ComponentOverride = (0, hooks_2.useComponent)(((_a = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _a === void 0 ? void 0 : _a.library.import.component.slideout) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     var subProps = {
         overlay: __assign(__assign({ 
             // default props
@@ -77,8 +85,8 @@ exports.Slideout = (0, mobx_react_lite_1.observer)(function (properties) {
             theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
     };
     // state
-    var _a = (0, hooks_1.useState)(Boolean(active)), isActive = _a[0], setActive = _a[1];
-    var _b = (0, hooks_1.useState)(Boolean(active)), renderContent = _b[0], setRenderContent = _b[1];
+    var _b = (0, hooks_1.useState)(Boolean(active)), isActive = _b[0], setActive = _b[1];
+    var _c = (0, hooks_1.useState)(Boolean(active)), renderContent = _c[0], setRenderContent = _c[1];
     var toggleActive = function () {
         if (isActive) {
             setActive(false);

package/dist/cjs/components/src/components/Molecules/Slideshow/Slideshow.d.ts

@@ -53,6 +53,7 @@ export type SlideshowTemplatesLegalProps = {
     showPagination?: boolean;
     loop?: boolean;
     slidesToShow?: number;
+    slideWidth?: number;
     slidesToMove?: number;
     gap?: number;
     slideImageAlt?: string;

package/dist/cjs/components/src/components/Molecules/Slideshow/Slideshow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideshow/Slideshow.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAqJxD,wBAAgB,SAAS,CAAC,UAAU,EAAE,cAAc,oDAsmBnD;AAED,MAAM,WAAW,aAAa;IAC7B,WAAW,EAAE,IAAI,CAAC;QACjB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,gBAAgB,EAAE,cAAc,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,KAAK,EAAE,cAAc,CAAC;QACrB,eAAe,EAAE,OAAO,CAAC;QACzB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;IACH,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,OAAO,CAAC;KACvB,CAAC,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9B,GAAG,4BAA4B,GAC/B,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}
+{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideshow/Slideshow.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAyB,MAAM,gBAAgB,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AA4JxD,wBAAgB,SAAS,CAAC,UAAU,EAAE,cAAc,oDAupBnD;AAED,MAAM,WAAW,aAAa;IAC7B,WAAW,EAAE,IAAI,CAAC;QACjB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,gBAAgB,EAAE,cAAc,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,KAAK,EAAE,cAAc,CAAC;QACrB,eAAe,EAAE,OAAO,CAAC;QACzB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;IACH,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,OAAO,CAAC;KACvB,CAAC,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9B,GAAG,4BAA4B,GAC/B,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

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

@@ -27,7 +27,7 @@ var hooks_2 = require("../../../hooks");
 var deepmerge_1 = __importDefault(require("deepmerge"));
 var defaultStyles = function (_a) {
     var _b, _c;
-    var theme = _a.theme, _d = _a.slidesToShow, slidesToShow = _d === void 0 ? 1 : _d, _e = _a.gap, gap = _e === void 0 ? 16 : _e, _f = _a.overlayNavigation, overlayNavigation = _f === void 0 ? false : _f, showNavigation = _a.showNavigation;
+    var theme = _a.theme, _d = _a.slidesToShow, slidesToShow = _d === void 0 ? 1 : _d, slideWidth = _a.slideWidth, _e = _a.gap, gap = _e === void 0 ? 16 : _e, _f = _a.overlayNavigation, overlayNavigation = _f === void 0 ? false : _f, showNavigation = _a.showNavigation;
     return (0, react_1.css)({
         position: 'relative',
         overflow: 'hidden',
@@ -51,23 +51,24 @@ var defaultStyles = function (_a) {
                 justifyContent: 'center',
             },
         },
-        '.ss__slideshow__slide': {
-            maxWidth: "calc((100% - ".concat(slidesToShow * gap, "px) / ").concat(slidesToShow, ")"),
-            minWidth: "calc((100% - ".concat(slidesToShow * gap, "px) / ").concat(slidesToShow, ")"),
-            marginLeft: "calc(".concat(gap, "px / 2)"),
-            marginRight: "calc(".concat(gap, "px / 2)"),
-            position: 'relative',
+        '.ss__slideshow__slide': __assign(__assign({}, (slideWidth
+            ? {
+                maxWidth: "".concat(slideWidth, "px"),
+                minWidth: "".concat(slideWidth, "px"),
+            }
+            : {
+                maxWidth: "calc((100% - ".concat(slidesToShow * gap, "px) / ").concat(slidesToShow, ")"),
+                minWidth: "calc((100% - ".concat(slidesToShow * gap, "px) / ").concat(slidesToShow, ")"),
+            })), { marginLeft: "calc(".concat(gap, "px / 2)"), marginRight: "calc(".concat(gap, "px / 2)"), position: 'relative', 
             // Prevent text selection during drag
-            userSelect: 'none',
-            img: {
+            userSelect: 'none', img: {
                 width: '100%',
                 height: '100%',
                 objectFit: 'cover',
                 display: 'block',
                 // Prevent image dragging
                 pointerEvents: 'none',
-            },
-        },
+            } }),
         '.ss__slideshow__slide--content': {
             display: 'flex',
             alignItems: 'center',
@@ -154,8 +155,9 @@ var defaultStyles = function (_a) {
     });
 };
 function Slideshow(properties) {
-    var _a;
+    var _a, _b;
     var globalTheme = (0, providers_1.useTheme)();
+    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         treePath: globalTreePath,
@@ -165,7 +167,7 @@ function Slideshow(properties) {
         showNavigation: true,
         showPagination: true,
         centerInsufficientSlides: true,
-        slidesToShow: 4,
+        slidesToShow: properties.slideWidth ? undefined : 4,
         slidesToMove: 1,
         gap: 10,
         ariaLabel: 'slideshow',
@@ -173,7 +175,13 @@ function Slideshow(properties) {
         dragThreshold: 50,
     };
     var props = (0, utilities_1.mergeProps)('slideshow', globalTheme, defaultProps, properties);
-    var className = props.className, slides = props.slides, fallbackImage = props.fallbackImage, autoPlay = props.autoPlay, autoPlayInterval = props.autoPlayInterval, showNavigation = props.showNavigation, showPagination = props.showPagination, loop = props.loop, alwaysShowNavigation = props.alwaysShowNavigation, slidesToShow = props.slidesToShow, slideImageAlt = props.slideImageAlt, centerInsufficientSlides = props.centerInsufficientSlides, ariaLabel = props.ariaLabel, ariaLabelledBy = props.ariaLabelledBy, disableStyles = props.disableStyles, treePath = props.treePath, overlayNavigation = props.overlayNavigation, dragThreshold = props.dragThreshold;
+    var className = props.className, slides = props.slides, fallbackImage = props.fallbackImage, autoPlay = props.autoPlay, autoPlayInterval = props.autoPlayInterval, showNavigation = props.showNavigation, showPagination = props.showPagination, loop = props.loop, alwaysShowNavigation = props.alwaysShowNavigation, slidesToShow = props.slidesToShow, slideImageAlt = props.slideImageAlt, centerInsufficientSlides = props.centerInsufficientSlides, ariaLabel = props.ariaLabel, ariaLabelledBy = props.ariaLabelledBy, disableStyles = props.disableStyles, slideWidth = props.slideWidth, gap = props.gap, treePath = props.treePath, overlayNavigation = props.overlayNavigation, dragThreshold = props.dragThreshold, customComponent = props.customComponent;
+    if (customComponent) {
+        var ComponentOverride = (0, hooks_2.useComponent)(((_a = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _a === void 0 ? void 0 : _a.library.import.component.slideshow) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     var touchDragging = props.touchDragging;
     var subProps = {
         Image: __assign(__assign({ 
@@ -212,16 +220,33 @@ function Slideshow(properties) {
     if (!slidesToMove) {
         slidesToMove = 1;
     }
-    var _b = (0, hooks_1.useState)(0), currentIndex = _b[0], setCurrentIndex = _b[1];
-    var _c = (0, hooks_1.useState)(autoPlay), isPlaying = _c[0], setIsPlaying = _c[1];
+    var _c = (0, hooks_1.useState)(0), currentIndex = _c[0], setCurrentIndex = _c[1];
+    var _d = (0, hooks_1.useState)(autoPlay), isPlaying = _d[0], setIsPlaying = _d[1];
+    var _e = (0, hooks_1.useState)(0), containerWidth = _e[0], setContainerWidth = _e[1];
     var intervalRef = (0, hooks_1.useRef)(null);
     var slideshowRef = (0, hooks_1.useRef)(null);
     var trackRef = (0, hooks_1.useRef)(null);
+    // Track container width for slideWidth-based visible slide calculation
+    (0, hooks_1.useEffect)(function () {
+        var _a;
+        var container = (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!container)
+            return;
+        var observer = new ResizeObserver(function (entries) {
+            for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                var entry = entries_1[_i];
+                setContainerWidth(entry.contentRect.width);
+            }
+        });
+        observer.observe(container);
+        setContainerWidth(container.offsetWidth);
+        return function () { return observer.disconnect(); };
+    }, []);
     // Touch/Drag state
-    var _d = (0, hooks_1.useState)(false), isDragging = _d[0], setIsDragging = _d[1];
-    var _e = (0, hooks_1.useState)(0), startX = _e[0], setStartX = _e[1];
-    var _f = (0, hooks_1.useState)(0), currentX = _f[0], setCurrentX = _f[1];
-    var _g = (0, hooks_1.useState)(0), dragOffset = _g[0], setDragOffset = _g[1];
+    var _f = (0, hooks_1.useState)(false), isDragging = _f[0], setIsDragging = _f[1];
+    var _g = (0, hooks_1.useState)(0), startX = _g[0], setStartX = _g[1];
+    var _h = (0, hooks_1.useState)(0), currentX = _h[0], setCurrentX = _h[1];
+    var _j = (0, hooks_1.useState)(0), dragOffset = _j[0], setDragOffset = _j[1];
     // Normalize slides to SlideshowSlide format
     var normalizedSlides = slides.map(function (slide, index) {
         if (typeof slide === 'string') {
@@ -249,7 +274,11 @@ function Slideshow(properties) {
     });
     // slide calculations
     var totalSlides = normalizedSlides.length;
-    var visibleSlides = Math.min(slidesToShow, totalSlides);
+    // When slideWidth is provided, compute how many slides fit in the container;
+    // otherwise fall back to the slidesToShow prop.
+    // Include gap in the calculation since each slide takes (slideWidth + gap) pixels
+    var computedSlidesToShow = slideWidth && containerWidth > 0 ? Math.max(1, Math.floor(containerWidth / (slideWidth + (gap !== null && gap !== void 0 ? gap : 0)))) : slidesToShow !== null && slidesToShow !== void 0 ? slidesToShow : 4;
+    var visibleSlides = Math.min(computedSlidesToShow, totalSlides);
     var maxIndex = Math.max(0, totalSlides - visibleSlides);
     // Calculate slide groups for pagination
     var slideGroups = [];
@@ -260,7 +289,7 @@ function Slideshow(properties) {
     var currentDotIndex = slideGroups.findIndex(function (groupStart) { return currentIndex >= groupStart && currentIndex < groupStart + slidesToMove; });
     // Auto-play functionality
     (0, hooks_1.useEffect)(function () {
-        if (isPlaying && normalizedSlides.length > slidesToShow && !isDragging) {
+        if (isPlaying && normalizedSlides.length > computedSlidesToShow && !isDragging) {
             intervalRef.current = setInterval(function () {
                 setCurrentIndex(function (prevIndex) {
                     var nextIndex = prevIndex + slidesToMove;
@@ -287,7 +316,7 @@ function Slideshow(properties) {
                 clearInterval(intervalRef.current);
             }
         }
-    }, [isPlaying, autoPlayInterval, normalizedSlides.length, slidesToShow, slidesToMove, loop, maxIndex, isDragging]);
+    }, [isPlaying, autoPlayInterval, normalizedSlides.length, computedSlidesToShow, slidesToMove, loop, maxIndex, isDragging]);
     // if all slides are visible, turn off touch dragging.
     if (totalSlides <= visibleSlides) {
         touchDragging = false;
@@ -317,8 +346,8 @@ function Slideshow(properties) {
         if (!isDragging || !touchDragging)
             return;
         var diff = currentX - startX;
-        var containerWidth = ((_b = (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
-        var slideWidthPx = containerWidth / visibleSlides;
+        var trackContainerWidth = ((_b = (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
+        var slideWidthPx = trackContainerWidth / visibleSlides;
         var threshold = Math.min(dragThreshold, slideWidthPx * 0.3); // 30% of slide width or dragThreshold, whichever is smaller
         if (Math.abs(diff) > threshold) {
             if (diff > 0 && (loop || currentIndex > 0)) {
@@ -333,7 +362,7 @@ function Slideshow(properties) {
         setIsDragging(false);
         setDragOffset(0);
         // Resume autoplay if it was playing
-        if (isPlaying && normalizedSlides.length > slidesToShow) {
+        if (isPlaying && normalizedSlides.length > computedSlidesToShow) {
             intervalRef.current = setInterval(function () {
                 setCurrentIndex(function (prevIndex) {
                     var nextIndex = prevIndex + slidesToMove;
@@ -372,7 +401,7 @@ function Slideshow(properties) {
         }
     };
     var handleMouseLeave = function () {
-        if (isPlaying && normalizedSlides.length > slidesToShow && !isDragging) {
+        if (isPlaying && normalizedSlides.length > computedSlidesToShow && !isDragging) {
             intervalRef.current = setInterval(function () {
                 setCurrentIndex(function (prevIndex) {
                     var nextIndex = prevIndex + slidesToMove;
@@ -470,13 +499,29 @@ function Slideshow(properties) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
     // Simplified transform calculation
-    var slidePercentage = 100 / visibleSlides; // Each visible slide takes this % of container
-    var translateX = -(currentIndex * slidePercentage);
-    // Apply drag offset
-    if (isDragging && trackRef.current) {
-        var containerWidth = ((_a = trackRef.current.parentElement) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
-        var dragPercentage = (dragOffset / containerWidth) * 100;
-        translateX += dragPercentage;
+    var translateX;
+    var translateUnit;
+    if (slideWidth) {
+        // Fixed-width mode: translate by pixel amounts (slideWidth + gap per slide)
+        var slideStepPx = slideWidth + (gap !== null && gap !== void 0 ? gap : 0);
+        translateX = -(currentIndex * slideStepPx);
+        translateUnit = 'px';
+        // Apply drag offset
+        if (isDragging) {
+            translateX += dragOffset;
+        }
+    }
+    else {
+        // Percentage mode: each slide takes an equal share of the container
+        var slidePercentage = 100 / visibleSlides;
+        translateX = -(currentIndex * slidePercentage);
+        translateUnit = '%';
+        // Apply drag offset
+        if (isDragging && trackRef.current) {
+            var containerWidth_1 = ((_b = trackRef.current.parentElement) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
+            var dragPercentage = (dragOffset / containerWidth_1) * 100;
+            translateX += dragPercentage;
+        }
     }
     // Determine if navigation should be disabled
     var isPrevDisabled = !loop && currentIndex === 0;
@@ -514,8 +559,8 @@ function Slideshow(properties) {
             // @ts-ignore - ignore
             onKeyDown: handleKeyDown, tabIndex: 0, children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "ss__slideshow__sr-only" }, mergedLang.srInstructions.all)), (0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__container", children: (0, jsx_runtime_1.jsx)("div", { ref: trackRef, className: (0, classnames_1.default)('ss__slideshow__track', {
                             'ss__slideshow__track--dragging': isDragging,
-                            'ss__slideshow__track--centered': centerInsufficientSlides && totalSlides <= slidesToShow,
-                        }), style: { transform: "translateX(".concat(translateX, "%)") }, role: "group", "aria-label": "Slide group ".concat(currentIndex, " of ").concat(totalDots), 
+                            'ss__slideshow__track--centered': centerInsufficientSlides && totalSlides <= computedSlidesToShow,
+                        }), style: { transform: "translateX(".concat(translateX).concat(translateUnit, ")") }, role: "group", "aria-label": "Slide group ".concat(currentIndex, " of ").concat(totalDots), 
                         // Touch events
                         // @ts-ignore - touch events
                         onTouchStart: touchDragging ? function (event) { return handleDragStart(event.touches[0]); } : undefined, 
@@ -543,7 +588,7 @@ function Slideshow(properties) {
                         // Mouse events (for desktop dragging)
                         // @ts-ignore - mouse events
                         onMouseMove: touchDragging ? handleMouseMove : undefined, children: normalizedSlides.map(function (slide, index) {
-                            var isVisible = index >= currentIndex && index < currentIndex + slidesToShow;
+                            var isVisible = index >= currentIndex && index < currentIndex + computedSlidesToShow;
                             var hasClickHandler = !!slide.onClick;
                             var hasContent = !!slide.content;
                             var imageAlt = slide.alt || slideImageAlt || "Image ".concat(index + 1);
@@ -566,7 +611,7 @@ function Slideshow(properties) {
                                     'ss__slideshow__slide--clickable': hasClickHandler,
                                     'ss__slideshow__slide--content': hasContent,
                                 }), role: hasClickHandler ? 'button' : hasContent ? 'presentation' : 'img', "aria-hidden": !isVisible, tabIndex: hasClickHandler && isVisible ? 0 : -1, onClick: hasClickHandler ? function () { return handleSlideClick(slide, index); } : undefined, onKeyDown: hasClickHandler ? function (e) { return handleSlideKeyDown(e, slide, index); } : undefined, children: hasContent ? slide.content : (0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.Image, { src: slide.src || fallbackImage, alt: isVisible ? imageAlt : '' })) }), index));
-                        }) }) }), Boolean(alwaysShowNavigation || (showNavigation && normalizedSlides.length > slidesToShow)) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__navigation ss__slideshow__navigation--prev", children: (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ icon: "angle-left", className: 'ss__slideshow__prev', disabled: isPrevDisabled }, mergedLang.prevButton.all, subProps.PrevButton, { onClick: goToPrevious })) }), (0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__navigation ss__slideshow__navigation--next", children: (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: 'ss__slideshow__next', icon: "angle-right", disabled: isNextDisabled }, mergedLang.nextButton.all, subProps.NextButton, { onClick: goToNext })) })] })), showPagination && totalSlides > visibleSlides && ((0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__pagination", role: "tablist", "aria-label": "Slide navigation", children: slideGroups.map(function (_, index) {
+                        }) }) }), Boolean(alwaysShowNavigation || (showNavigation && normalizedSlides.length > computedSlidesToShow)) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__navigation ss__slideshow__navigation--prev", children: (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ icon: "angle-left", className: 'ss__slideshow__prev', disabled: isPrevDisabled }, mergedLang.prevButton.all, subProps.PrevButton, { onClick: goToPrevious })) }), (0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__navigation ss__slideshow__navigation--next", children: (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: 'ss__slideshow__next', icon: "angle-right", disabled: isNextDisabled }, mergedLang.nextButton.all, subProps.NextButton, { onClick: goToNext })) })] })), showPagination && totalSlides > visibleSlides && ((0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__pagination", role: "tablist", "aria-label": "Slide navigation", children: slideGroups.map(function (_, index) {
                         var defaultLang = {
                             paginationButton: {
                                 attributes: {

package/dist/cjs/components/src/components/Molecules/SortBy/SortBy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortBy.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/SortBy/SortBy.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGvE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAYtC,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CA0HrD,CAAC;AAQH,MAAM,MAAM,WAAW,GAAG;IACzB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAC3B,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,KAAK,EAAE,IAAI,CAAC;QACX,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}
+{"version":3,"file":"SortBy.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/SortBy/SortBy.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGvE,OAAO,EAAE,IAAI,EAAgB,MAAM,gBAAgB,CAAC;AAapD,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAkIrD,CAAC;AAQH,MAAM,MAAM,WAAW,GAAG;IACzB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAC3B,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,KAAK,EAAE,IAAI,CAAC;QACX,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}

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

@@ -24,6 +24,7 @@ var utilities_1 = require("../../../utilities");
 var Select_1 = require("../Select");
 var RadioList_1 = require("../RadioList");
 var List_1 = require("../List");
+var hooks_1 = require("../../../hooks");
 var deepmerge_1 = __importDefault(require("deepmerge"));
 var defaultStyles = function () {
     return (0, react_1.css)({
@@ -34,8 +35,9 @@ var defaultStyles = function () {
     });
 };
 exports.SortBy = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b;
+    var _a, _b, _c;
     var globalTheme = (0, providers_1.useTheme)();
+    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         label: 'Sort By',
@@ -43,9 +45,15 @@ exports.SortBy = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('sortBy', globalTheme, defaultProps, properties);
-    var sorting = props.sorting, type = props.type, controller = props.controller, hideLabel = props.hideLabel, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var sorting = props.sorting, type = props.type, controller = props.controller, hideLabel = props.hideLabel, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, customComponent = props.customComponent;
     var label = props.label;
-    var store = sorting || ((_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.sorting);
+    if (customComponent) {
+        var ComponentOverride = (0, hooks_1.useComponent)(((_a = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _a === void 0 ? void 0 : _a.library.import.component.sortBy) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
+    var store = sorting || ((_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.sorting);
     var subProps = {
         Select: __assign(__assign({}, (0, utilities_1.defined)({
             disableStyles: disableStyles,
@@ -77,7 +85,7 @@ exports.SortBy = (0, mobx_react_lite_1.observer)(function (properties) {
         label = undefined;
     }
     // options can be an Array or ObservableArray - but should have length
-    return (store === null || store === void 0 ? void 0 : store.current) && typeof (store === null || store === void 0 ? void 0 : store.options) == 'object' && ((_b = store.options) === null || _b === void 0 ? void 0 : _b.length) ? ((0, jsx_runtime_1.jsxs)(providers_1.CacheProvider, { children: [(type === null || type === void 0 ? void 0 : type.toLowerCase()) == 'dropdown' && ((0, jsx_runtime_1.jsx)(Select_1.Select, __assign({}, styling, { className: (0, classnames_1.default)('ss__sortby', 'ss__sortby__select', className, internalClassName) }, subProps.Select, { label: label, options: store.options, selected: store.current, onSelect: function (e, selection) {
+    return (store === null || store === void 0 ? void 0 : store.current) && typeof (store === null || store === void 0 ? void 0 : store.options) == 'object' && ((_c = store.options) === null || _c === void 0 ? void 0 : _c.length) ? ((0, jsx_runtime_1.jsxs)(providers_1.CacheProvider, { children: [(type === null || type === void 0 ? void 0 : type.toLowerCase()) == 'dropdown' && ((0, jsx_runtime_1.jsx)(Select_1.Select, __assign({}, styling, { className: (0, classnames_1.default)('ss__sortby', 'ss__sortby__select', className, internalClassName) }, subProps.Select, { label: label, options: store.options, selected: store.current, onSelect: function (e, selection) {
                     var _a;
                     (_a = selection === null || selection === void 0 ? void 0 : selection.url) === null || _a === void 0 ? void 0 : _a.go();
                 }, lang: {

package/dist/cjs/components/src/components/Molecules/Swatches/Swatches.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Swatches.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Swatches/Swatches.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,gBAAgB,EAAe,MAAM,gBAAgB,CAAC;AAG7F,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAK1C,OAAO,EAA6B,cAAc,EAAE,MAAM,cAAc,CAAC;AA2DzE,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,2DAwLjD;AAED,MAAM,MAAM,aAAa,GAAG;IAC3B,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5E,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;CAC5B,CAAC"}
+{"version":3,"file":"Swatches.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Swatches/Swatches.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,gBAAgB,EAAe,MAAM,gBAAgB,CAAC;AAI7F,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAK1C,OAAO,EAA6B,cAAc,EAAE,MAAM,cAAc,CAAC;AA2DzE,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,2DAiMjD;AAED,MAAM,MAAM,aAAa,GAAG;IAC3B,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5E,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;CAC5B,CAAC"}

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

@@ -80,7 +80,9 @@ var defaultStyles = function (_a) {
     });
 };
 function Swatches(properties) {
+    var _a;
     var globalTheme = (0, providers_1.useTheme)();
+    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultCarouselBreakpoints = {
         0: {
@@ -118,7 +120,13 @@ function Swatches(properties) {
         var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
         props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
     }
-    var onSelect = props.onSelect, disabled = props.disabled, options = props.options, hideLabels = props.hideLabels, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, type = props.type, slideshow = props.slideshow, grid = props.grid, treePath = props.treePath;
+    var onSelect = props.onSelect, disabled = props.disabled, options = props.options, hideLabels = props.hideLabels, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, type = props.type, slideshow = props.slideshow, grid = props.grid, treePath = props.treePath, customComponent = props.customComponent;
+    if (customComponent) {
+        var ComponentOverride = (0, hooks_1.useComponent)(((_a = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _a === void 0 ? void 0 : _a.library.import.component.swatches) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     var subProps = {
         slideshow: __assign(__assign(__assign({ 
             // default props
@@ -146,7 +154,7 @@ function Swatches(properties) {
     var selected = props.selected;
     var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     // selection state
-    var _a = (0, hooks_2.useState)(selected || undefined), selection = _a[0], setSelection = _a[1];
+    var _b = (0, hooks_2.useState)(selected || undefined), selection = _b[0], setSelection = _b[1];
     var makeSelection = function (e, option) {
         if (onSelect) {
             onSelect(e, option);

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

@@ -342,10 +342,15 @@ var TemplateTargetSettings = (0, mobx_react_lite_1.observer)(function (props) {
     var configTarget = ((_b = (_a = config[type]) === null || _a === void 0 ? void 0 : _a[recsType]) === null || _b === void 0 ? void 0 : _b["".concat(recsType.charAt(0).toUpperCase() + recsType.slice(1))]) || ((_d = (_c = config[type]) === null || _c === void 0 ? void 0 : _c.targets) === null || _d === void 0 ? void 0 : _d[0]);
     var libraryComponents = templatesStore.library.components;
     var libraryTemplates = recsType ? (_e = libraryComponents[type]) === null || _e === void 0 ? void 0 : _e[recsType] : libraryComponents[type];
-    var libraryResultComponents = libraryComponents === null || libraryComponents === void 0 ? void 0 : libraryComponents.result;
-    var DEAFULT_RESULT_COMPONENT = 'Result';
+    // const libraryResultComponents = libraryComponents?.result;
+    // const DEFAULT_RESULT_COMPONENT = 'Result';
     var activeTarget = templatesStore.getTarget(feature, configTarget.selector);
     var showTemplateReset = Boolean(activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.component) && (activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.component) !== (configTarget === null || configTarget === void 0 ? void 0 : configTarget.component);
-    var showResultTemplateReset = ((activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.resultComponent) || DEAFULT_RESULT_COMPONENT) != ((configTarget === null || configTarget === void 0 ? void 0 : configTarget.resultComponent) || DEAFULT_RESULT_COMPONENT);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "template-target-settings", children: [(0, jsx_runtime_1.jsx)("h3", { children: type.charAt(0).toUpperCase() + type.slice(1) + (recsType ? " (".concat(recsType, ")") : '') }), !recsType && ((0, jsx_runtime_1.jsxs)("div", { className: "option", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "".concat(idPrefix, "-target"), children: "Target" }), (0, jsx_runtime_1.jsx)("div", { className: "reset" }), (0, jsx_runtime_1.jsx)("div", { className: "value", children: (0, jsx_runtime_1.jsx)("input", { id: "".concat(idPrefix, "-target"), type: "text", placeholder: '', disabled: true, value: configTarget.selector }) })] })), (0, jsx_runtime_1.jsx)(Dropdown_1.DropdownControl, { label: 'Template', description: '', showReset: showTemplateReset, options: Object.keys(libraryTemplates), onReset: function () { return activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.setComponent(configTarget === null || configTarget === void 0 ? void 0 : configTarget.component); }, disabled: false, value: activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.component, onChange: function (value) { return activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.setComponent("".concat(value)); } }, "".concat(idPrefix, "-template")), (0, jsx_runtime_1.jsx)(Dropdown_1.DropdownControl, { label: 'Result Template', description: '', showReset: showResultTemplateReset, options: Object.keys(libraryResultComponents), onReset: function () { return activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.setResultComponent((configTarget === null || configTarget === void 0 ? void 0 : configTarget.resultComponent) || DEAFULT_RESULT_COMPONENT); }, disabled: false, value: activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.resultComponent, onChange: function (value) { return activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.setResultComponent("".concat(value)); } }, "".concat(idPrefix, "-result-template"))] }));
+    // const firstLetterOfComponent = configTarget.component.charAt(0).toLowerCase();
+    // const restOfComponent = configTarget.component.slice(1);
+    // const camelCaseComponent = firstLetterOfComponent + restOfComponent;
+    // const currentTargetActiveResultComponent = config?.theme?.overrides[`${camelCaseComponent} result`]?.customComponent || config?.theme?.overrides[`result`]?.customComponent || DEFAULT_RESULT_COMPONENT;
+    // const showResultTemplateReset =
+    // 	(currentTargetActiveResultComponent || DEFAULT_RESULT_COMPONENT) != (currentTargetActiveResultComponent ||DEFAULT_RESULT_COMPONENT);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "template-target-settings", children: [(0, jsx_runtime_1.jsx)("h3", { children: type.charAt(0).toUpperCase() + type.slice(1) + (recsType ? " (".concat(recsType, ")") : '') }), !recsType && ((0, jsx_runtime_1.jsxs)("div", { className: "option", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "".concat(idPrefix, "-target"), children: "Target" }), (0, jsx_runtime_1.jsx)("div", { className: "reset" }), (0, jsx_runtime_1.jsx)("div", { className: "value", children: (0, jsx_runtime_1.jsx)("input", { id: "".concat(idPrefix, "-target"), type: "text", placeholder: '', disabled: true, value: configTarget.selector }) })] })), (0, jsx_runtime_1.jsx)(Dropdown_1.DropdownControl, { label: 'Template', description: '', showReset: showTemplateReset, options: Object.keys(libraryTemplates), onReset: function () { return activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.setComponent(configTarget === null || configTarget === void 0 ? void 0 : configTarget.component); }, disabled: false, value: activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.component, onChange: function (value) { return activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.setComponent("".concat(value)); } }, "".concat(idPrefix, "-template"))] }));
 });

package/dist/cjs/components/src/components/Molecules/Terms/Terms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Terms.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Terms/Terms.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAEtD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAkE3C,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CAoFnD,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;CAClB,GAAG,wBAAwB,GAC3B,cAAc,CAAC,UAAU,CAAC,CAAC;AAE5B,MAAM,MAAM,wBAAwB,GAAG;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC7E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,SAAS;IACzB,IAAI,CAAC,EAAE,IAAI,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;QACtB,IAAI,EAAE,IAAI,CAAC;KACX,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;CACH;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC"}
+{"version":3,"file":"Terms.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Terms/Terms.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAGtD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAkE3C,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CA4FnD,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;CAClB,GAAG,wBAAwB,GAC3B,cAAc,CAAC,UAAU,CAAC,CAAC;AAE5B,MAAM,MAAM,wBAAwB,GAAG;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC7E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,SAAS;IACzB,IAAI,CAAC,EAAE,IAAI,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;QACtB,IAAI,EAAE,IAAI,CAAC;KACX,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;CACH;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC"}

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

@@ -81,8 +81,9 @@ var emIfyTerm = function (term, search) {
     return "<em>".concat(term, "</em>");
 };
 exports.Terms = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b;
+    var _a, _b, _c;
     var globalTheme = (0, providers_1.useTheme)();
+    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         vertical: true,
@@ -90,9 +91,15 @@ exports.Terms = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('terms', globalTheme, defaultProps, properties);
-    var title = props.title, onTermClick = props.onTermClick, limit = props.limit, previewOnHover = props.previewOnHover, emIfy = props.emIfy, className = props.className, internalClassName = props.internalClassName, controller = props.controller;
+    var title = props.title, onTermClick = props.onTermClick, limit = props.limit, previewOnHover = props.previewOnHover, emIfy = props.emIfy, className = props.className, internalClassName = props.internalClassName, controller = props.controller, customComponent = props.customComponent;
     var currentInput = (_b = (_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.input;
     var terms = props.terms;
+    if (customComponent) {
+        var ComponentOverride = (0, hooks_1.useComponent)(((_c = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _c === void 0 ? void 0 : _c.library.import.component.terms) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     var termClickEvent = function (e, term) {
         onTermClick && onTermClick(e, term);

package/dist/cjs/components/src/components/Molecules/VariantSelection/VariantSelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariantSelection.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/VariantSelection/VariantSelection.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AA2D/F,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CA+KzE,CAAC;AASH,MAAM,MAAM,qBAAqB,GAAG;IACnC,SAAS,EAAE,oBAAoB,CAAC;CAChC,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACtF,CAAC"}
+{"version":3,"file":"VariantSelection.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/VariantSelection/VariantSelection.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AA4D/F,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CAuLzE,CAAC;AASH,MAAM,MAAM,qBAAqB,GAAG;IACnC,SAAS,EAAE,oBAAoB,CAAC;CAChC,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACtF,CAAC"}

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

@@ -72,7 +72,9 @@ var dropdownContentStyles = function () {
     });
 };
 exports.VariantSelection = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a;
     var globalTheme = (0, providers_1.useTheme)();
+    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         // default props
@@ -80,7 +82,13 @@ exports.VariantSelection = (0, mobx_react_lite_1.observer)(function (properties)
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('variantSelection', globalTheme, defaultProps, properties);
-    var selection = props.selection, onSelect = props.onSelect, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var selection = props.selection, onSelect = props.onSelect, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, customComponent = props.customComponent;
+    if (customComponent) {
+        var ComponentOverride = (0, hooks_1.useComponent)(((_a = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _a === void 0 ? void 0 : _a.library.import.component.variantSelection) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     var type = props.type;
     if (!type) {
         if (selection.type == 'swatch') {

package/dist/cjs/components/src/components/Organisms/Autocomplete/Autocomplete.d.ts

@@ -1,7 +1,7 @@
 import type { AutocompleteController, RecommendationControllerConfig } from '@athoscommerce/snap-controller';
 import type { Term } from '@athoscommerce/snap-store-mobx';
 import { IconProps } from '../../Atoms/Icon/Icon';
-import { ComponentProps, BreakpointsProps, ResultComponent } from '../../../types';
+import { ComponentProps, BreakpointsProps, JSXComponent } from '../../../types';
 import { Lang } from '../../../hooks';
 import { IconType } from '../../Atoms/Icon';
 export declare const Autocomplete: ((properties: AutocompleteProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
@@ -11,6 +11,7 @@ export type AutocompleteProps = {
     lang?: Partial<AutocompleteLang>;
     controller: AutocompleteController;
     breakpoints?: BreakpointsProps;
+    resultComponent?: JSXComponent | JSX.Element;
 } & AutocompleteTemplatesLegalProps & ComponentProps<AutocompleteProps>;
 export type AutocompleteTemplatesLegalProps = {
     input: Element | string;
@@ -40,7 +41,6 @@ export type AutocompleteTemplatesLegalProps = {
     noResultsSlot?: JSX.Element | JSX.Element[];
     linkSlot?: JSX.Element | JSX.Element[];
     width?: string;
-    resultComponent?: ResultComponent;
     onFacetOptionClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
     onTermClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
     templates?: {