@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/components/Atoms/BadgeImage/BadgeImage.js

@@ -1,46 +1,35 @@
 "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.BadgeImage = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var hooks_1 = require("../../../hooks");
-var defaultStyles = function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const defaultStyles = () => {
     return (0, react_1.css)({
         maxHeight: '100%',
         maxWidth: '100%',
     });
 };
-exports.BadgeImage = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.BadgeImage = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         // default props
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('badgeImage', globalTheme, defaultProps, properties);
-    var label = props.label, url = props.url, tag = props.tag, className = props.className, internalClassName = props.internalClassName;
-    var _a = (0, hooks_1.useCustomComponentOverride)('badgeImage', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('badgeImage', globalTheme, defaultProps, properties);
+    const { label, url, tag, className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('badgeImage', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    return url ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("img", __assign({}, styling, { className: (0, classnames_1.default)('ss__badge-image', "ss__badge-image--".concat(tag), className, internalClassName), alt: label || "".concat(tag, " badge"), src: url })) })) : null;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return url ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("img", { ...styling, className: (0, classnames_1.default)('ss__badge-image', `ss__badge-image--${tag}`, className, internalClassName), alt: label || `${tag} badge`, src: url }) })) : null;
 });

package/dist/cjs/components/src/components/Atoms/BadgePill/BadgePill.js

@@ -1,29 +1,17 @@
 "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.BadgePill = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var hooks_1 = require("../../../hooks");
-var defaultStyles = function (_a) {
-    var color = _a.color, colorText = _a.colorText;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const defaultStyles = ({ color, colorText }) => {
     return (0, react_1.css)({
         display: 'inline-block',
         boxSizing: 'border-box',
@@ -37,21 +25,21 @@ var defaultStyles = function (_a) {
         borderRadius: '1em',
     });
 };
-exports.BadgePill = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.BadgePill = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         // default props
         color: 'rgba(58, 35, 173, 1)',
         colorText: '#fff',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('badgePill', globalTheme, defaultProps, properties);
-    var value = props.value, tag = props.tag, className = props.className, internalClassName = props.internalClassName;
-    var _a = (0, hooks_1.useCustomComponentOverride)('badgePill', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('badgePill', globalTheme, defaultProps, properties);
+    const { value, tag, className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('badgePill', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    return value ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__badge-pill', "ss__badge-pill--".concat(tag), className, internalClassName), children: (0, jsx_runtime_1.jsx)("span", { className: "ss__badge-pill__value", children: value }) })) })) : null;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return value ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__badge-pill', `ss__badge-pill--${tag}`, className, internalClassName), children: (0, jsx_runtime_1.jsx)("span", { className: "ss__badge-pill__value", children: value }) }) })) : null;
 });

package/dist/cjs/components/src/components/Atoms/BadgeRectangle/BadgeRectangle.js

@@ -1,29 +1,17 @@
 "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.BadgeRectangle = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var hooks_1 = require("../../../hooks");
-var defaultStyles = function (_a) {
-    var color = _a.color, colorText = _a.colorText;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const defaultStyles = ({ color, colorText }) => {
     return (0, react_1.css)({
         display: 'inline-block',
         boxSizing: 'border-box',
@@ -36,21 +24,21 @@ var defaultStyles = function (_a) {
         maxWidth: '100%',
     });
 };
-exports.BadgeRectangle = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.BadgeRectangle = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         // default props
         color: 'rgba(58, 35, 173, 1)',
         colorText: '#fff',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('badgeRectangle', globalTheme, defaultProps, properties);
-    var value = props.value, tag = props.tag, className = props.className, internalClassName = props.internalClassName;
-    var _a = (0, hooks_1.useCustomComponentOverride)('badgeRectangle', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('badgeRectangle', globalTheme, defaultProps, properties);
+    const { value, tag, className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('badgeRectangle', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    return value ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__badge-rectangle', "ss__badge-rectangle--".concat(tag), className, internalClassName), children: (0, jsx_runtime_1.jsx)("span", { className: "ss__badge-rectangle__value", children: value }) })) })) : null;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return value ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__badge-rectangle', `ss__badge-rectangle--${tag}`, className, internalClassName), children: (0, jsx_runtime_1.jsx)("span", { className: "ss__badge-rectangle__value", children: value }) }) })) : null;
 });

package/dist/cjs/components/src/components/Atoms/BadgeText/BadgeText.js

@@ -1,29 +1,17 @@
 "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.BadgeText = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var hooks_1 = require("../../../hooks");
-var defaultStyles = function (_a) {
-    var colorText = _a.colorText;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const defaultStyles = ({ colorText }) => {
     return (0, react_1.css)({
         display: 'inline-block',
         boxSizing: 'border-box',
@@ -35,20 +23,20 @@ var defaultStyles = function (_a) {
         maxWidth: '100%',
     });
 };
-exports.BadgeText = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.BadgeText = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         // default props
         colorText: '#000000',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('badgeText', globalTheme, defaultProps, properties);
-    var value = props.value, tag = props.tag, className = props.className, internalClassName = props.internalClassName;
-    var _a = (0, hooks_1.useCustomComponentOverride)('badgeText', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('badgeText', globalTheme, defaultProps, properties);
+    const { value, tag, className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('badgeText', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    return value ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__badge-text', "ss__badge-text--".concat(tag), className, internalClassName), children: (0, jsx_runtime_1.jsx)("span", { className: "ss__badge-text__value", children: value }) })) })) : null;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return value ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__badge-text', `ss__badge-text--${tag}`, className, internalClassName), children: (0, jsx_runtime_1.jsx)("span", { className: "ss__badge-text__value", children: value }) }) })) : null;
 });

package/dist/cjs/components/src/components/Atoms/Banner/Banner.js

@@ -1,30 +1,19 @@
 "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.Banner = 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 providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var hooks_1 = require("../../../hooks");
-var snap_store_mobx_1 = require("@athoscommerce/snap-store-mobx");
-var hooks_2 = require("preact/hooks");
-var defaultStyles = function () {
+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 providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const snap_store_mobx_1 = require("@athoscommerce/snap-store-mobx");
+const hooks_2 = require("preact/hooks");
+const defaultStyles = () => {
     return (0, react_1.css)({
         ' *': {
             boxSizing: 'border-box',
@@ -35,34 +24,33 @@ var defaultStyles = function () {
         },
     });
 };
-exports.Banner = (0, providers_1.withController)((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.Banner = (0, providers_1.withController)((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)('banner', globalTheme, defaultProps, properties);
-    var controller = props.controller, type = props.type, className = props.className, internalClassName = props.internalClassName;
-    var content = props.content || ((_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.merchandising.content);
-    var _c = (0, hooks_1.useCustomComponentOverride)('banner', props), overrideElement = _c.overrideElement, shouldRenderDefault = _c.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('banner', globalTheme, defaultProps, properties);
+    const { controller, type, className, internalClassName } = props;
+    const content = props.content || controller?.store?.merchandising.content;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('banner', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
     if (type === snap_store_mobx_1.ContentType.INLINE) {
-        console.warn("BannerType '".concat(snap_store_mobx_1.ContentType.INLINE, "' is not supported in <Banner /> component"));
+        console.warn(`BannerType '${snap_store_mobx_1.ContentType.INLINE}' is not supported in <Banner /> component`);
         return null;
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var banner = (_b = content === null || content === void 0 ? void 0 : content[type]) === null || _b === void 0 ? void 0 : _b[0];
-    var value = banner === null || banner === void 0 ? void 0 : banner.value;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const banner = content?.[type]?.[0];
+    const value = banner?.value;
     if (!type || !value) {
         return null;
     }
-    var Content = (0, hooks_2.useCallback)((0, providers_1.withTracking)(function (trackingProps) {
-        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__banner', "ss__banner--".concat(type), className, internalClassName) }, styling, { ref: trackingProps.trackingRef, dangerouslySetInnerHTML: {
+    const Content = (0, hooks_2.useCallback)((0, providers_1.withTracking)((trackingProps) => {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__banner', `ss__banner--${type}`, className, internalClassName), ...styling, ref: trackingProps.trackingRef, dangerouslySetInnerHTML: {
                 __html: typeof value === 'string' ? value : value.join(''),
-            } })));
+            } }));
     }), [value, type]);
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)(Content, __assign({}, props)) }));
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)(Content, { ...props }) }));
 }));

package/dist/cjs/components/src/components/Atoms/Breadcrumbs/Breadcrumbs.js

@@ -1,29 +1,18 @@
 "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.Breadcrumbs = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var Icon_1 = require("../Icon");
-var hooks_1 = require("../../../hooks");
-var defaultStyles = function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const Icon_1 = require("../Icon");
+const hooks_1 = require("../../../hooks");
+const defaultStyles = () => {
     return (0, react_1.css)({
         '& .ss__breadcrumbs__crumbs': {
             padding: '0',
@@ -35,48 +24,53 @@ var defaultStyles = function () {
         },
     });
 };
-exports.Breadcrumbs = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Breadcrumbs = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         separator: '>',
         treePath: globalTreePath,
         data: properties.controller
-            ? function (controller) {
-                var _a, _b, _c, _d;
+            ? (controller) => {
                 return [
                     { label: 'Search' },
-                    { label: "Results ".concat(((_b = (_a = controller === null || controller === void 0 ? void 0 : controller.store.search) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.string) ? "for \"".concat((_d = (_c = controller === null || controller === void 0 ? void 0 : controller.store.search) === null || _c === void 0 ? void 0 : _c.query) === null || _d === void 0 ? void 0 : _d.string, "\"") : '') },
+                    { label: `Results ${controller?.store.search?.query?.string ? `for "${controller?.store.search?.query?.string}"` : ''}` },
                 ];
             }
             : [{ label: 'Search' }],
     };
-    var props = (0, utilities_1.mergeProps)('breadcrumbs', globalTheme, defaultProps, properties);
-    var data = props.data, separator = props.separator, separatorIcon = props.separatorIcon, className = props.className, internalClassName = props.internalClassName, controller = props.controller, disableStyles = props.disableStyles, treePath = props.treePath;
-    var _a = (0, hooks_1.useCustomComponentOverride)('breadcrumbs', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('breadcrumbs', globalTheme, defaultProps, properties);
+    const { data, separator, separatorIcon, className, internalClassName, controller, disableStyles, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('breadcrumbs', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        icon: __assign(__assign({ internalClassName: 'ss__breadcrumbs__separator__icon' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+    const subProps = {
+        icon: {
+            internalClassName: 'ss__breadcrumbs__separator__icon',
+            // default props
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+            theme: props?.theme,
+            treePath,
+        },
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var _data;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    let _data;
     if (typeof data == 'function') {
         _data = data(controller);
     }
     else {
         _data = data;
     }
-    return _data ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__breadcrumbs', className, internalClassName), children: (0, jsx_runtime_1.jsx)("ul", { className: "ss__breadcrumbs__crumbs", children: _data
-                    .map(function (crumb) { return ((0, jsx_runtime_1.jsx)("li", { className: "ss__breadcrumbs__crumbs__crumb", children: crumb.url ? (0, jsx_runtime_1.jsx)("a", { href: crumb.url, children: crumb.label }) : crumb.label })); })
-                    .reduce(function (prev, curr) { return [
+    return _data ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__breadcrumbs', className, internalClassName), children: (0, jsx_runtime_1.jsx)("ul", { className: "ss__breadcrumbs__crumbs", children: _data
+                    .map((crumb) => ((0, jsx_runtime_1.jsx)("li", { className: "ss__breadcrumbs__crumbs__crumb", children: crumb.url ? (0, jsx_runtime_1.jsx)("a", { href: crumb.url, children: crumb.label }) : crumb.label })))
+                    .reduce((prev, curr) => [
                     prev,
-                    (0, jsx_runtime_1.jsxs)("li", { className: "ss__breadcrumbs__crumbs__separator", children: [separator !== false ? separator : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), separatorIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof separatorIcon == 'string' ? { icon: separatorIcon } : separatorIcon))))] }),
+                    (0, jsx_runtime_1.jsxs)("li", { className: "ss__breadcrumbs__crumbs__separator", children: [separator !== false ? separator : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), separatorIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof separatorIcon == 'string' ? { icon: separatorIcon } : separatorIcon) }))] }),
                     curr,
-                ]; }) }) })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
+                ]) }) }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
 });