@athoscommerce/snap-preact 1.9.0 → 1.10.0

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

@@ -1,57 +1,47 @@
 "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.SearchHeader = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var classnames_1 = __importDefault(require("classnames"));
-var hooks_1 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var defaultStyles = function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = () => {
     return (0, react_1.css)({});
 };
-exports.SearchHeader = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var landingPage = ((_a = properties.controller) === null || _a === void 0 ? void 0 : _a.store.merchandising.landingPage) || ((_b = properties.merchandising) === null || _b === void 0 ? void 0 : _b.landingPage);
-    var pagination = ((_c = properties.controller) === null || _c === void 0 ? void 0 : _c.store.pagination) || properties.pagination;
-    var search = ((_d = properties.controller) === null || _d === void 0 ? void 0 : _d.store.search) || properties.query;
-    var defaultProps = {
-        titleText: "Search result".concat((pagination === null || pagination === void 0 ? void 0 : pagination.totalResults) == 1 ? '' : 's', " ").concat((search === null || search === void 0 ? void 0 : search.query) ? "for \"<span class=\"ss__search-header__results-query\">".concat(search.query.string, "</span>\"") : ''),
-        correctedQueryText: "No results found for \"<em>".concat((_e = search === null || search === void 0 ? void 0 : search.originalQuery) === null || _e === void 0 ? void 0 : _e.string, "</em>\", showing results for \"<em>").concat((_f = search === null || search === void 0 ? void 0 : search.query) === null || _f === void 0 ? void 0 : _f.string, "</em>\" instead."),
-        didYouMeanText: "Did you mean <a href=".concat((_g = search === null || search === void 0 ? void 0 : search.didYouMean) === null || _g === void 0 ? void 0 : _g.url.href, ">").concat((_h = search === null || search === void 0 ? void 0 : search.didYouMean) === null || _h === void 0 ? void 0 : _h.string, "</a>?"),
-        noResultsText: "".concat((search === null || search === void 0 ? void 0 : search.query)
-            ? "<span>\n\t\t\tNo results for \"<span class=\"ss__search-header__results-query\">".concat(search.query.string, "</span>\" found.\n\t\t</span>")
-            : "<span>No results found.</span>"),
-        expandedSearchText: "We couldn't find an exact match for \"<span class=\"ss__search-header__results-query\">".concat((_j = search === null || search === void 0 ? void 0 : search.query) === null || _j === void 0 ? void 0 : _j.string, "</span>\", but here's something similar:"),
+exports.SearchHeader = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const landingPage = properties.controller?.store.merchandising.landingPage || properties.merchandising?.landingPage;
+    const pagination = properties.controller?.store.pagination || properties.pagination;
+    const search = properties.controller?.store.search || properties.query;
+    const defaultProps = {
+        titleText: `Search result${pagination?.totalResults == 1 ? '' : 's'} ${search?.query ? `for "<span class="ss__search-header__results-query">${search.query.string}</span>"` : ''}`,
+        correctedQueryText: `No results found for "<em>${search?.originalQuery?.string}</em>", showing results for "<em>${search?.query?.string}</em>" instead.`,
+        didYouMeanText: `Did you mean <a href=${search?.didYouMean?.url.href}>${search?.didYouMean?.string}</a>?`,
+        noResultsText: `${search?.query
+            ? `<span>
+			No results for "<span class="ss__search-header__results-query">${search.query.string}</span>" found.
+		</span>`
+            : `<span>No results found.</span>`}`,
+        expandedSearchText: `We couldn't find an exact match for "<span class="ss__search-header__results-query">${search?.query?.string}</span>", but here's something similar:`,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('searchHeader', globalTheme, defaultProps, properties);
-    var className = props.className, internalClassName = props.internalClassName, titleText = props.titleText, subtitleText = props.subtitleText, correctedQueryText = props.correctedQueryText, noResultsText = props.noResultsText, didYouMeanText = props.didYouMeanText, expandedSearchText = props.expandedSearchText, hideTitleText = props.hideTitleText, hideSubtitleText = props.hideSubtitleText, hideCorrectedQueryText = props.hideCorrectedQueryText, hideNoResultsText = props.hideNoResultsText, hideExpandedSearchText = props.hideExpandedSearchText, hideDidYouMeanText = props.hideDidYouMeanText;
-    var _r = (0, hooks_1.useCustomComponentOverride)('searchHeader', props), overrideElement = _r.overrideElement, shouldRenderDefault = _r.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('searchHeader', globalTheme, defaultProps, properties);
+    const { className, internalClassName, titleText, subtitleText, correctedQueryText, noResultsText, didYouMeanText, expandedSearchText, hideTitleText, hideSubtitleText, hideCorrectedQueryText, hideNoResultsText, hideExpandedSearchText, hideDidYouMeanText, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('searchHeader', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         titleText: {
             value: titleText,
         },
@@ -72,10 +62,10 @@ exports.SearchHeader = (0, mobx_react_lite_1.observer)(function (properties) {
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_1.useLang)(lang, {
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_1.useLang)(lang, {
         pagination: pagination,
         search: search,
-    });
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("header", __assign({}, styling, { className: (0, classnames_1.default)('ss__search-header', className, internalClassName), children: landingPage ? ((0, jsx_runtime_1.jsx)("h3", { className: (0, classnames_1.default)('ss__search-header__title', 'ss__search-header__title--landing-page'), children: landingPage.title })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(pagination === null || pagination === void 0 ? void 0 : pagination.totalResults) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideExpandedSearchText && (search === null || search === void 0 ? void 0 : search.matchType) && search.matchType == 'expanded' ? ((0, jsx_runtime_1.jsx)("h3", __assign({ className: (0, classnames_1.default)('ss__search-header__title', 'ss__search-header__title--expanded'), "aria-atomic": "true", "aria-live": "polite" }, (_k = mergedLang.expandedSearchText) === null || _k === void 0 ? void 0 : _k.all))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})), !hideTitleText && ((search === null || search === void 0 ? void 0 : search.matchType) !== 'expanded' || hideExpandedSearchText) && ((0, jsx_runtime_1.jsx)("h3", __assign({ className: (0, classnames_1.default)('ss__search-header__title', 'ss__search-header__title--results'), "aria-atomic": "true", "aria-live": "polite" }, (_l = mergedLang.titleText) === null || _l === void 0 ? void 0 : _l.all))), (search === null || search === void 0 ? void 0 : search.originalQuery) && !hideCorrectedQueryText && ((0, jsx_runtime_1.jsx)("h5", __assign({ className: (0, classnames_1.default)('ss__search-header__subtitle', 'ss__search-header__subtitle--corrected'), "aria-atomic": "true", "aria-live": "polite" }, (_m = mergedLang.correctedQueryText) === null || _m === void 0 ? void 0 : _m.all)))] })) : ((pagination === null || pagination === void 0 ? void 0 : pagination.totalResults) === 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__search-header__no-results-wrapper", children: [!hideNoResultsText && ((0, jsx_runtime_1.jsx)("h3", __assign({ className: (0, classnames_1.default)('ss__search-header__title', 'ss__search-header__title--no-results'), "aria-atomic": "true", "aria-live": "polite" }, (_o = mergedLang.noResultsText) === null || _o === void 0 ? void 0 : _o.all))), (search === null || search === void 0 ? void 0 : search.didYouMean) && !hideDidYouMeanText && ((0, jsx_runtime_1.jsx)("h5", __assign({ className: (0, classnames_1.default)('ss__search-header__subtitle', 'ss__search-header__subtitle--dym'), "aria-atomic": "true", "aria-live": "polite" }, (_p = mergedLang.didYouMeanText) === null || _p === void 0 ? void 0 : _p.all)))] }))), (subtitleText || lang.subtitleText.value) && !hideSubtitleText && ((0, jsx_runtime_1.jsx)("h5", __assign({ className: (0, classnames_1.default)('ss__search-header__subtitle'), "aria-atomic": "true", "aria-live": "polite" }, (_q = mergedLang.subtitleText) === null || _q === void 0 ? void 0 : _q.all)))] })) })) }));
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("header", { ...styling, className: (0, classnames_1.default)('ss__search-header', className, internalClassName), children: landingPage ? ((0, jsx_runtime_1.jsx)("h3", { className: (0, classnames_1.default)('ss__search-header__title', 'ss__search-header__title--landing-page'), children: landingPage.title })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [pagination?.totalResults ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideExpandedSearchText && search?.matchType && search.matchType == 'expanded' ? ((0, jsx_runtime_1.jsx)("h3", { className: (0, classnames_1.default)('ss__search-header__title', 'ss__search-header__title--expanded'), "aria-atomic": "true", "aria-live": "polite", ...mergedLang.expandedSearchText?.all })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})), !hideTitleText && (search?.matchType !== 'expanded' || hideExpandedSearchText) && ((0, jsx_runtime_1.jsx)("h3", { className: (0, classnames_1.default)('ss__search-header__title', 'ss__search-header__title--results'), "aria-atomic": "true", "aria-live": "polite", ...mergedLang.titleText?.all })), search?.originalQuery && !hideCorrectedQueryText && ((0, jsx_runtime_1.jsx)("h5", { className: (0, classnames_1.default)('ss__search-header__subtitle', 'ss__search-header__subtitle--corrected'), "aria-atomic": "true", "aria-live": "polite", ...mergedLang.correctedQueryText?.all }))] })) : (pagination?.totalResults === 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__search-header__no-results-wrapper", children: [!hideNoResultsText && ((0, jsx_runtime_1.jsx)("h3", { className: (0, classnames_1.default)('ss__search-header__title', 'ss__search-header__title--no-results'), "aria-atomic": "true", "aria-live": "polite", ...mergedLang.noResultsText?.all })), search?.didYouMean && !hideDidYouMeanText && ((0, jsx_runtime_1.jsx)("h5", { className: (0, classnames_1.default)('ss__search-header__subtitle', 'ss__search-header__subtitle--dym'), "aria-atomic": "true", "aria-live": "polite", ...mergedLang.didYouMeanText?.all }))] }))), (subtitleText || lang.subtitleText.value) && !hideSubtitleText && ((0, jsx_runtime_1.jsx)("h5", { className: (0, classnames_1.default)('ss__search-header__subtitle'), "aria-atomic": "true", "aria-live": "polite", ...mergedLang.subtitleText?.all }))] })) }) }));
 });

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

@@ -1,30 +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.Skeleton = 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 width = _a.width, height = _a.height, round = _a.round, backgroundColor = _a.backgroundColor, animatedColor = _a.animatedColor;
-    var animation = (0, react_1.keyframes)({
+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 = ({ width, height, round, backgroundColor, animatedColor }) => {
+    const animation = (0, react_1.keyframes)({
         from: {
             transform: 'translateX(-100%)',
         },
@@ -50,27 +38,27 @@ var defaultStyles = function (_a) {
             right: '0',
             height: '100%',
             backgroundRepeat: 'no-repeat',
-            backgroundImage: "linear-gradient(90deg, ".concat(backgroundColor, ", ").concat(animatedColor, ", ").concat(backgroundColor, ")"),
+            backgroundImage: `linear-gradient(90deg, ${backgroundColor}, ${animatedColor}, ${backgroundColor})`,
             transform: 'translateX(-100%)',
-            animation: "".concat(animation, " 1.5s linear infinite"),
+            animation: `${animation} 1.5s linear infinite`,
             animationTimingFunction: 'ease-in-out',
         },
     });
 };
-exports.Skeleton = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Skeleton = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         backgroundColor: '#ebebeb',
         animatedColor: '#f5f5f5',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('skeleton', globalTheme, defaultProps, properties);
-    var className = props.className, internalClassName = props.internalClassName;
-    var _a = (0, hooks_1.useCustomComponentOverride)('skeleton', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('skeleton', globalTheme, defaultProps, properties);
+    const { className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('skeleton', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__skeleton', className, internalClassName) })) }));
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__skeleton', className, internalClassName) }) }));
 });

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

@@ -1,47 +1,24 @@
 "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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TemplateSelect = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-exports.TemplateSelect = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b;
-    var snap = properties.snap, templatesStore = properties.templatesStore, target = properties.target, controller = properties.controller, otherProps = __rest(properties, ["snap", "templatesStore", "target", "controller"]);
-    var loading = templatesStore.loading;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+exports.TemplateSelect = (0, mobx_react_lite_1.observer)((properties) => {
+    const { snap, templatesStore, target, controller, ...otherProps } = properties;
+    const { loading } = templatesStore;
     if (!target) {
-        controller.log.error("Target was not provided!");
+        controller.log.error(`Target was not provided!`);
         return null;
     }
-    var Component = templatesStore.library.getComponent(target.type, target.component);
-    var themeLocation = (_a = templatesStore === null || templatesStore === void 0 ? void 0 : templatesStore.themes) === null || _a === void 0 ? void 0 : _a[target.theme.location];
-    var themeStore = themeLocation && themeLocation[target.theme.name];
-    var theme = themeStore === null || themeStore === void 0 ? void 0 : themeStore.theme;
-    if (!loading && !theme && !((_b = templatesStore.settings) === null || _b === void 0 ? void 0 : _b.editMode)) {
-        var error = "Theme \"".concat(target.theme.name, "\" not found in library for target \"").concat(target.selector, "\"");
+    const Component = templatesStore.library.getComponent(target.type, target.component);
+    const themeLocation = templatesStore?.themes?.[target.theme.location];
+    const themeStore = themeLocation && themeLocation[target.theme.name];
+    const theme = themeStore?.theme;
+    if (!loading && !theme && !templatesStore.settings?.editMode) {
+        const error = `Theme "${target.theme.name}" not found in library for target "${target.selector}"`;
         controller.log.error(error);
     }
     // ensuring that theme and component are ready to render
-    return !loading && theme && Component ? ((0, jsx_runtime_1.jsx)(providers_1.SnapProvider, { snap: snap, children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(providers_1.ControllerProvider, { controller: controller, children: (0, jsx_runtime_1.jsx)("div", { className: "ss__template-select", children: (0, jsx_runtime_1.jsx)(Component, __assign({ controller: controller }, otherProps)) }) }) }) })) : null;
+    return !loading && theme && Component ? ((0, jsx_runtime_1.jsx)(providers_1.SnapProvider, { snap: snap, children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(providers_1.ControllerProvider, { controller: controller, children: (0, jsx_runtime_1.jsx)("div", { className: "ss__template-select", children: (0, jsx_runtime_1.jsx)(Component, { controller: controller, ...otherProps }) }) }) }) })) : null;
 });

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

@@ -1,28 +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.CalloutBadge = 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)({
         display: 'flex',
         justifyContent: 'center',
@@ -30,36 +19,38 @@ var defaultStyles = function () {
         gap: '5px',
     });
 };
-var BadgeRenderer = function (_a) {
-    var badge = _a.badge, badgeComponentMap = _a.badgeComponentMap, treePath = _a.treePath;
-    var BadgeComponent = (0, hooks_1.useComponent)(badgeComponentMap, badge.component).ComponentOverride;
+const BadgeRenderer = ({ badge, badgeComponentMap, treePath }) => {
+    const { ComponentOverride: BadgeComponent } = (0, hooks_1.useComponent)(badgeComponentMap, badge.component);
     if (!BadgeComponent) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(BadgeComponent, __assign({}, badge, badge.parameters, { treePath: treePath }));
+    return (0, jsx_runtime_1.jsx)(BadgeComponent, { ...badge, ...badge.parameters, treePath: treePath });
 };
-exports.CalloutBadge = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b;
-    var globalTheme = (0, providers_1.useTheme)();
-    var snap = (0, providers_1.useSnap)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.CalloutBadge = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const snap = (0, providers_1.useSnap)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         // default props
         tag: 'callout',
         limit: 1,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('calloutBadge', globalTheme, defaultProps, properties);
-    var result = props.result, tag = props.tag, renderEmpty = props.renderEmpty, limit = props.limit, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _c = (0, hooks_1.useCustomComponentOverride)('calloutBadge', props), overrideElement = _c.overrideElement, shouldRenderDefault = _c.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('calloutBadge', globalTheme, defaultProps, properties);
+    const { result, tag, renderEmpty, limit, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('calloutBadge', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var badgeComponentMap = __assign(__assign(__assign({}, utilities_1.defaultBadgeComponentMap), (((_a = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _a === void 0 ? void 0 : _a.library.import.component.badge) || {})), props.componentMap);
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var badges = (_b = result === null || result === void 0 ? void 0 : result.display.badges) === null || _b === void 0 ? void 0 : _b.atLocation(tag).slice(0, limit);
-    if (renderEmpty || (badges === null || badges === void 0 ? void 0 : badges.length)) {
-        return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__callout-badge', "ss__callout-badge--".concat(tag === null || tag === void 0 ? void 0 : tag.replace('/', '-')), className, internalClassName), children: badges.map(function (badge, badgeIndex) { return ((0, jsx_runtime_1.jsx)(BadgeRenderer, { badge: badge, badgeComponentMap: badgeComponentMap, treePath: treePath }, "".concat(badge.component, "-").concat(badgeIndex))); }) })) }));
+    const badgeComponentMap = {
+        ...utilities_1.defaultBadgeComponentMap,
+        ...(snap?.templates?.library.import.component.badge || {}),
+        ...props.componentMap,
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const badges = result?.display.badges?.atLocation(tag).slice(0, limit);
+    if (renderEmpty || badges?.length) {
+        return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__callout-badge', `ss__callout-badge--${tag?.replace('/', '-')}`, className, internalClassName), children: badges.map((badge, badgeIndex) => ((0, jsx_runtime_1.jsx)(BadgeRenderer, { badge: badge, badgeComponentMap: badgeComponentMap, treePath: treePath }, `${badge.component}-${badgeIndex}`))) }) }));
     }
     return null;
 });