@athoscommerce/snap-preact 1.1.5 → 1.2.0

package/dist/cjs/components/src/components/Atoms/BadgeImage/BadgeImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeImage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/BadgeImage/BadgeImage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAU7D,eAAO,MAAM,UAAU,gBAAyB,eAAe;;CAyB7D,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,6BAA6B,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAC9F,MAAM,MAAM,6BAA6B,GAAG;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC"}
+{"version":3,"file":"BadgeImage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/BadgeImage/BadgeImage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAY7D,eAAO,MAAM,UAAU,gBAAyB,eAAe;;CAiC7D,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,6BAA6B,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAC9F,MAAM,MAAM,6BAA6B,GAAG;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC"}

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

@@ -21,6 +21,7 @@ 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 () {
     return (0, react_1.css)({
         maxHeight: '100%',
@@ -28,14 +29,22 @@ var defaultStyles = function () {
     });
 };
 exports.BadgeImage = (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
         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 label = props.label, url = props.url, tag = props.tag, className = props.className, internalClassName = props.internalClassName, 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.badgeImage) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     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;
 });

package/dist/cjs/components/src/components/Atoms/BadgePill/BadgePill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BadgePill.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/BadgePill/BadgePill.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAiB7D,eAAO,MAAM,SAAS,gBAAyB,cAAc;;CAwB3D,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,4BAA4B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAC3F,MAAM,MAAM,4BAA4B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC"}
+{"version":3,"file":"BadgePill.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/BadgePill/BadgePill.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAmB7D,eAAO,MAAM,SAAS,gBAAyB,cAAc;;CAgC3D,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,4BAA4B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAC3F,MAAM,MAAM,4BAA4B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC"}

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

@@ -21,6 +21,7 @@ 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;
     return (0, react_1.css)({
@@ -37,7 +38,9 @@ var defaultStyles = function (_a) {
     });
 };
 exports.BadgePill = (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
@@ -46,7 +49,13 @@ exports.BadgePill = (0, mobx_react_lite_1.observer)(function (properties) {
         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 value = props.value, tag = props.tag, className = props.className, internalClassName = props.internalClassName, 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.badgePill) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     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;
 });

package/dist/cjs/components/src/components/Atoms/BadgeRectangle/BadgeRectangle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeRectangle.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/BadgeRectangle/BadgeRectangle.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAiB7D,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAwBrE,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,iCAAiC,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAC1G,MAAM,MAAM,iCAAiC,GAAG;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC"}
+{"version":3,"file":"BadgeRectangle.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/BadgeRectangle/BadgeRectangle.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAmB7D,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAgCrE,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,iCAAiC,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAC1G,MAAM,MAAM,iCAAiC,GAAG;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC"}

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

@@ -21,6 +21,7 @@ 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;
     return (0, react_1.css)({
@@ -36,7 +37,9 @@ var defaultStyles = function (_a) {
     });
 };
 exports.BadgeRectangle = (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
@@ -45,7 +48,13 @@ exports.BadgeRectangle = (0, mobx_react_lite_1.observer)(function (properties) {
         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 value = props.value, tag = props.tag, className = props.className, internalClassName = props.internalClassName, 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.badgeRectangle) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     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;
 });

package/dist/cjs/components/src/components/Atoms/BadgeText/BadgeText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeText.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/BadgeText/BadgeText.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAgB7D,eAAO,MAAM,SAAS,gBAAyB,cAAc;;CAuB3D,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,4BAA4B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAC3F,MAAM,MAAM,4BAA4B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC"}
+{"version":3,"file":"BadgeText.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/BadgeText/BadgeText.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAkB7D,eAAO,MAAM,SAAS,gBAAyB,cAAc;;CA+B3D,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,4BAA4B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAC3F,MAAM,MAAM,4BAA4B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC"}

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

@@ -21,6 +21,7 @@ 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;
     return (0, react_1.css)({
@@ -35,7 +36,9 @@ var defaultStyles = function (_a) {
     });
 };
 exports.BadgeText = (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
@@ -43,7 +46,13 @@ exports.BadgeText = (0, mobx_react_lite_1.observer)(function (properties) {
         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 value = props.value, tag = props.tag, className = props.className, internalClassName = props.internalClassName, 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.badgeText) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     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;
 });

package/dist/cjs/components/src/components/Atoms/Banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Banner/Banner.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAC/F,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAe7D,eAAO,MAAM,MAAM,KA+ClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACzB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;IACvD,IAAI,CAAC,EAAE,WAAW,CAAC;CACnB,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,EAAE,WAAW,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Banner/Banner.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAC/F,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAe7D,eAAO,MAAM,MAAM,KAuDlB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACzB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;IACvD,IAAI,CAAC,EAAE,WAAW,CAAC;CACnB,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,EAAE,WAAW,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC"}

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

@@ -21,8 +21,9 @@ 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_1 = require("preact/hooks");
+var hooks_2 = require("preact/hooks");
 var defaultStyles = function () {
     return (0, react_1.css)({
         ' *': {
@@ -35,26 +36,33 @@ var defaultStyles = function () {
     });
 };
 exports.Banner = (0, providers_1.withController)((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 = {
         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 controller = props.controller, type = props.type, className = props.className, internalClassName = props.internalClassName, customComponent = props.customComponent;
     var content = props.content || ((_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.merchandising.content);
+    if (customComponent) {
+        var ComponentOverride = (0, hooks_1.useComponent)(((_b = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _b === void 0 ? void 0 : _b.library.import.component.banner) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     if (type === snap_store_mobx_1.ContentType.INLINE) {
         console.warn("BannerType '".concat(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 banner = (_c = content === null || content === void 0 ? void 0 : content[type]) === null || _c === void 0 ? void 0 : _c[0];
     var value = banner === null || banner === void 0 ? void 0 : banner.value;
     if (!type || !value) {
         return null;
     }
-    var Content = (0, hooks_1.useCallback)((0, providers_1.withTracking)(function (trackingProps) {
+    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: {
                 __html: typeof value === 'string' ? value : value.join(''),
             } })));

package/dist/cjs/components/src/components/Atoms/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAepD,eAAO,MAAM,WAAW,gBAAyB,gBAAgB;;CAuE/D,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG;IAC9B,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC9B,GAAG,8BAA8B,GACjC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAElC,MAAM,MAAM,8BAA8B,GAAG;IAC5C,IAAI,CAAC,EACF;QACA,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;KACZ,EAAE,GACH,CAAC,CAAC,UAAU,CAAC,EAAE,gBAAgB,KAAK;QACpC,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;KACZ,EAAE,CAAC,CAAC;IACR,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACzC,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;CACtD,CAAC"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAiBpD,eAAO,MAAM,WAAW,gBAAyB,gBAAgB;;CA+E/D,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG;IAC9B,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC9B,GAAG,8BAA8B,GACjC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAElC,MAAM,MAAM,8BAA8B,GAAG;IAC5C,IAAI,CAAC,EACF;QACA,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;KACZ,EAAE,GACH,CAAC,CAAC,UAAU,CAAC,EAAE,gBAAgB,KAAK;QACpC,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;KACZ,EAAE,CAAC,CAAC;IACR,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACzC,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;CACtD,CAAC"}

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

@@ -22,6 +22,7 @@ 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 () {
     return (0, react_1.css)({
         '& .ss__breadcrumbs__crumbs': {
@@ -35,7 +36,9 @@ var defaultStyles = function () {
     });
 };
 exports.Breadcrumbs = (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 = {
         separator: '>',
@@ -51,7 +54,13 @@ exports.Breadcrumbs = (0, mobx_react_lite_1.observer)(function (properties) {
             : [{ 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 data = props.data, separator = props.separator, separatorIcon = props.separatorIcon, className = props.className, internalClassName = props.internalClassName, controller = props.controller, disableStyles = props.disableStyles, 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.breadcrumbs) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     var subProps = {
         icon: __assign(__assign({ internalClassName: 'ss__breadcrumbs__separator__icon' }, (0, utilities_1.defined)({
             disableStyles: disableStyles,

package/dist/cjs/components/src/components/Atoms/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAM9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAyC/C,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAwFrD,CAAC;AAMH,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;CACnB,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,MAAM,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,MAAM,MAAM,WAAW,GACpB,OAAO,GACP,OAAO,GACP,OAAO,GACP,UAAU,GACV,gBAAgB,GAChB,UAAU,GACV,MAAM,GACN,MAAM,GACN,OAAO,GACP,YAAY,GACZ,oBAAoB,GACpB,cAAc,GACd,cAAc,GACd,eAAe,GACf,aAAa,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAM9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,IAAI,EAAyB,MAAM,gBAAgB,CAAC;AA0C7D,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAiGrD,CAAC;AAMH,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;CACnB,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,MAAM,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,MAAM,MAAM,WAAW,GACpB,OAAO,GACP,OAAO,GACP,OAAO,GACP,UAAU,GACV,gBAAgB,GAChB,UAAU,GACV,MAAM,GACN,MAAM,GACN,OAAO,GACP,YAAY,GACZ,oBAAoB,GACpB,cAAc,GACd,cAAc,GACd,eAAe,GACf,aAAa,CAAC"}

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

@@ -74,15 +74,22 @@ var defaultStyles = function (_a) {
     });
 };
 exports.Button = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     var globalTheme = (0, providers_1.useTheme)();
+    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         disableA11y: false,
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('button', globalTheme, defaultProps, properties);
-    var content = props.content, children = props.children, disabled = props.disabled, native = props.native, onClick = props.onClick, disableA11y = props.disableA11y, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, icon = props.icon, lang = props.lang, treePath = props.treePath, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, additionalProps = __rest(props, ["content", "children", "disabled", "native", "onClick", "disableA11y", "disableStyles", "className", "internalClassName", "icon", "lang", "treePath", "style", "styleScript", "themeStyleScript"]);
+    var content = props.content, children = props.children, disabled = props.disabled, native = props.native, onClick = props.onClick, disableA11y = props.disableA11y, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, icon = props.icon, lang = props.lang, treePath = props.treePath, customComponent = props.customComponent, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, additionalProps = __rest(props, ["content", "children", "disabled", "native", "onClick", "disableA11y", "disableStyles", "className", "internalClassName", "icon", "lang", "treePath", "customComponent", "style", "styleScript", "themeStyleScript"]);
+    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.button) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     var subProps = {
         icon: __assign(__assign({ internalClassName: 'ss__button__icon' }, (0, utilities_1.defined)({
             disableStyles: disableStyles,
@@ -100,5 +107,5 @@ exports.Button = (0, mobx_react_lite_1.observer)(function (properties) {
     //deep merge with props.lang
     var langs = (0, deepmerge_1.default)(defaultLang, lang || {});
     var mergedLang = (0, hooks_1.useLang)(langs, {});
-    return content || children || icon || ((_a = lang === null || lang === void 0 ? void 0 : lang.button) === null || _a === void 0 ? void 0 : _a.value) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: native ? ((0, jsx_runtime_1.jsxs)("button", __assign({}, elementProps, { children: [(0, jsx_runtime_1.jsxs)("span", __assign({ className: "ss__button__content" }, (_b = mergedLang.button) === null || _b === void 0 ? void 0 : _b.all, { children: [(0, utilities_1.cloneWithProps)(content, { treePath: treePath }), (0, utilities_1.cloneWithProps)(children, { treePath: treePath })] })), icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon)))] }))) : ((0, jsx_runtime_1.jsxs)("div", __assign({}, (!disableA11y ? a11yProps : {}), { role: 'button', "aria-disabled": disabled }, elementProps, (_c = mergedLang.button) === null || _c === void 0 ? void 0 : _c.attributes, { children: [content || children || ((_d = mergedLang.button) === null || _d === void 0 ? void 0 : _d.value) ? ((0, jsx_runtime_1.jsxs)("span", __assign({ className: "ss__button__content" }, (_e = mergedLang.button) === null || _e === void 0 ? void 0 : _e.value, { children: [(0, utilities_1.cloneWithProps)(content, { treePath: treePath }), (0, utilities_1.cloneWithProps)(children, { treePath: treePath })] }))) : undefined, icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon)))] }))) })) : null;
+    return content || children || icon || ((_b = lang === null || lang === void 0 ? void 0 : lang.button) === null || _b === void 0 ? void 0 : _b.value) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: native ? ((0, jsx_runtime_1.jsxs)("button", __assign({}, elementProps, { children: [(0, jsx_runtime_1.jsxs)("span", __assign({ className: "ss__button__content" }, (_c = mergedLang.button) === null || _c === void 0 ? void 0 : _c.all, { children: [(0, utilities_1.cloneWithProps)(content, { treePath: treePath }), (0, utilities_1.cloneWithProps)(children, { treePath: treePath })] })), icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon)))] }))) : ((0, jsx_runtime_1.jsxs)("div", __assign({}, (!disableA11y ? a11yProps : {}), { role: 'button', "aria-disabled": disabled }, elementProps, (_d = mergedLang.button) === null || _d === void 0 ? void 0 : _d.attributes, { children: [content || children || ((_e = mergedLang.button) === null || _e === void 0 ? void 0 : _e.value) ? ((0, jsx_runtime_1.jsxs)("span", __assign({ className: "ss__button__content" }, (_f = mergedLang.button) === null || _f === void 0 ? void 0 : _f.value, { children: [(0, utilities_1.cloneWithProps)(content, { treePath: treePath }), (0, utilities_1.cloneWithProps)(children, { treePath: treePath })] }))) : undefined, icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon)))] }))) })) : null;
 });

package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAQ9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA+B7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAkNzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAQ9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAgC7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CA2NzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

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

@@ -52,7 +52,9 @@ var defaultStyles = function (_a) {
 };
 exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
     var _a;
+    var _b;
     var globalTheme = (0, providers_1.useTheme)();
+    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         startOpen: false,
@@ -60,7 +62,13 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('dropdown', globalTheme, defaultProps, properties);
-    var button = props.button, content = props.content, children = props.children, disabled = props.disabled, open = props.open, toggleOnHover = props.toggleOnHover, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, disableClick = props.disableClick, onClick = props.onClick, onToggle = props.onToggle, focusTrapContent = props.focusTrapContent, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, usePortal = props.usePortal;
+    var button = props.button, content = props.content, children = props.children, disabled = props.disabled, open = props.open, toggleOnHover = props.toggleOnHover, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, disableClick = props.disableClick, onClick = props.onClick, onToggle = props.onToggle, focusTrapContent = props.focusTrapContent, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, usePortal = props.usePortal, customComponent = props.customComponent;
+    if (customComponent) {
+        var ComponentOverride = (0, hooks_2.useComponent)(((_b = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _b === void 0 ? void 0 : _b.library.import.component.dropdown) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     var dropdownOpen, setDropdownOpen;
     var stateful = open === undefined;
     if (stateful) {
@@ -70,10 +78,10 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
         dropdownOpen = open;
     }
     // state to track touch interactions
-    var _b = (0, hooks_1.useState)(false), isTouchInteraction = _b[0], setIsTouchInteraction = _b[1];
+    var _c = (0, hooks_1.useState)(false), isTouchInteraction = _c[0], setIsTouchInteraction = _c[1];
     var buttonRef = (0, hooks_1.useRef)(null);
     var contentRef = (0, hooks_1.useRef)(null);
-    var _c = (0, hooks_1.useState)({ top: 0, left: 0, width: 0 }), coords = _c[0], setCoords = _c[1];
+    var _d = (0, hooks_1.useState)({ top: 0, left: 0, width: 0 }), coords = _d[0], setCoords = _d[1];
     var innerRef;
     if (!disableClickOutside) {
         innerRef = (0, hooks_2.useClickOutside)(function (e) {

package/dist/cjs/components/src/components/Atoms/FormattedNumber/FormattedNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormattedNumber.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/FormattedNumber/FormattedNumber.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAO7D,wBAAgB,eAAe,CAAC,UAAU,EAAE,oBAAoB,oDAuC/D;AAED,MAAM,MAAM,oBAAoB,GAAG,kCAAkC,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AAE7G,MAAM,MAAM,kCAAkC,GAAG;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,OAAO,CAAC;CACd,CAAC"}
+{"version":3,"file":"FormattedNumber.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/FormattedNumber/FormattedNumber.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAS7D,wBAAgB,eAAe,CAAC,UAAU,EAAE,oBAAoB,oDA0D/D;AAED,MAAM,MAAM,oBAAoB,GAAG,kCAAkC,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AAE7G,MAAM,MAAM,kCAAkC,GAAG;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,OAAO,CAAC;CACd,CAAC"}

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

@@ -21,11 +21,14 @@ var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
 var classnames_1 = __importDefault(require("classnames"));
 var providers_1 = require("../../../providers");
 var utilities_1 = require("../../../utilities");
+var hooks_1 = require("../../../hooks");
 var defaultStyles = function () {
     return (0, react_1.css)({});
 };
 function FormattedNumber(properties) {
+    var _a;
     var globalTheme = (0, providers_1.useTheme)();
+    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         symbol: '',
@@ -37,7 +40,13 @@ function FormattedNumber(properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('formattedNumber', globalTheme, defaultProps, properties);
-    var value = props.value, symbol = props.symbol, decimalPlaces = props.decimalPlaces, padDecimalPlaces = props.padDecimalPlaces, thousandsSeparator = props.thousandsSeparator, decimalSeparator = props.decimalSeparator, symbolAfter = props.symbolAfter, className = props.className, internalClassName = props.internalClassName, raw = props.raw;
+    var value = props.value, symbol = props.symbol, decimalPlaces = props.decimalPlaces, padDecimalPlaces = props.padDecimalPlaces, thousandsSeparator = props.thousandsSeparator, decimalSeparator = props.decimalSeparator, symbolAfter = props.symbolAfter, className = props.className, internalClassName = props.internalClassName, raw = props.raw, 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.formattedNumber) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     var formattedNumber = snap_toolbox_1.filters.formatNumber(value, {
         symbol: symbol,
         decimalPlaces: decimalPlaces,

package/dist/cjs/components/src/components/Atoms/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAM9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAc9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2DA8DzC;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QACX,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;KAC5B,CAAC;CACF,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAClB,aAAa,GACb,iBAAiB,GACjB,uBAAuB,GACvB,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,GACV,aAAa,GACb,YAAY,GACZ,WAAW,GACX,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,eAAe,GACf,eAAe,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAM9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAgB9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2DAuEzC;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QACX,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;KAC5B,CAAC;CACF,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAClB,aAAa,GACb,iBAAiB,GACjB,uBAAuB,GACvB,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,GACV,aAAa,GACb,YAAY,GACZ,WAAW,GACX,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,eAAe,GACf,eAAe,CAAC"}

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

@@ -32,6 +32,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var providers_1 = require("../../../providers");
 var paths_1 = require("./paths");
 var utilities_1 = require("../../../utilities");
+var hooks_1 = require("../../../hooks");
 var defaultStyles = function (_a) {
     var _b, _c, _d, _e;
     var color = _a.color, fill = _a.fill, stroke = _a.stroke, theme = _a.theme, width = _a.width, height = _a.height, size = _a.size;
@@ -45,7 +46,9 @@ var defaultStyles = function (_a) {
     });
 };
 function Icon(properties) {
+    var _a;
     var globalTheme = (0, providers_1.useTheme)();
+    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         size: '16px',
@@ -53,7 +56,13 @@ function Icon(properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('icon', globalTheme, defaultProps, properties);
-    var color = props.color, icon = props.icon, fill = props.fill, path = props.path, children = props.children, size = props.size, width = props.width, title = props.title, height = props.height, viewBox = props.viewBox, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, ____ = props.name, _____ = props.treePath, otherProps = __rest(props, ["color", "icon", "fill", "path", "children", "size", "width", "title", "height", "viewBox", "disableStyles", "className", "internalClassName", "style", "styleScript", "themeStyleScript", "name", "treePath"]);
+    var color = props.color, icon = props.icon, fill = props.fill, path = props.path, children = props.children, size = props.size, width = props.width, title = props.title, height = props.height, viewBox = props.viewBox, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, customComponent = props.customComponent, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, ____ = props.name, _____ = props.treePath, otherProps = __rest(props, ["color", "icon", "fill", "path", "children", "size", "width", "title", "height", "viewBox", "disableStyles", "className", "internalClassName", "customComponent", "style", "styleScript", "themeStyleScript", "name", "treePath"]);
+    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.icon) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     var iconPath = paths_1.iconPaths[icon] || path;
     var pathType = typeof iconPath;
     var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);

package/dist/cjs/components/src/components/Atoms/Image/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Image/Image.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,eAAO,MAAM,kBAAkB,qDAAqD,CAAC;AAuBrF,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,oDAwD3C;AAED,MAAM,MAAM,UAAU,GAAG,wBAAwB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAE/E,MAAM,MAAM,wBAAwB,GAAG;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC9D,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;CACf,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Image/Image.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAK7D,eAAO,MAAM,kBAAkB,qDAAqD,CAAC;AAuBrF,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,oDA+E3C;AAED,MAAM,MAAM,UAAU,GAAG,wBAAwB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAE/E,MAAM,MAAM,wBAAwB,GAAG;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC9D,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;CACf,CAAC"}

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

@@ -22,6 +22,7 @@ var react_1 = require("@emotion/react");
 var classnames_1 = __importDefault(require("classnames"));
 var providers_1 = require("../../../providers");
 var utilities_1 = require("../../../utilities");
+var hooks_2 = require("../../../hooks");
 exports.FALLBACK_IMAGE_URL = '//cdn.athoscommerce.net/snap/images/fallback.png';
 var defaultStyles = function (_a) {
     var height = _a.height;
@@ -44,7 +45,9 @@ var defaultStyles = function (_a) {
     });
 };
 function Image(properties) {
+    var _a;
     var globalTheme = (0, providers_1.useTheme)();
+    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         fallback: exports.FALLBACK_IMAGE_URL,
@@ -52,9 +55,15 @@ function Image(properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('image', globalTheme, defaultProps, properties);
-    var alt = props.alt, src = props.src, fallback = props.fallback, title = props.title, hoverSrc = props.hoverSrc, lazy = props.lazy, onMouseOver = props.onMouseOver, onMouseOut = props.onMouseOut, onError = props.onError, onLoad = props.onLoad, onClick = props.onClick, className = props.className, internalClassName = props.internalClassName;
-    var _a = (0, hooks_1.useState)(false), visibile = _a[0], setVisibile = _a[1];
-    var _b = (0, hooks_1.useState)(false), isHovering = _b[0], setHover = _b[1];
+    var alt = props.alt, src = props.src, fallback = props.fallback, title = props.title, hoverSrc = props.hoverSrc, lazy = props.lazy, onMouseOver = props.onMouseOver, onMouseOut = props.onMouseOut, onError = props.onError, onLoad = props.onLoad, onClick = props.onClick, className = props.className, internalClassName = props.internalClassName, 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.image) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
+    var _b = (0, hooks_1.useState)(false), visibile = _b[0], setVisibile = _b[1];
+    var _c = (0, hooks_1.useState)(false), isHovering = _c[0], setHover = _c[1];
     var prevSrcRef = (0, hooks_1.useRef)('');
     (0, hooks_1.useEffect)(function () {
         prevSrcRef.current = src;

package/dist/cjs/components/src/components/Atoms/InlineBanner/InlineBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/InlineBanner/InlineBanner.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAe,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAwBpH,eAAO,MAAM,YAAY,KAwCxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,MAAM,EAAE,MAAM,CAAC;CACf,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,OAAO,aAAa,GAAG,aAAa,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC"}
+{"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/InlineBanner/InlineBanner.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAe,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AA0BpH,eAAO,MAAM,YAAY,KAgDxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,MAAM,EAAE,MAAM,CAAC;CACf,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,OAAO,aAAa,GAAG,aAAa,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC"}

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

@@ -23,6 +23,7 @@ var utilities_1 = require("../../../utilities");
 var useA11y_1 = require("../../../hooks/useA11y");
 var types_1 = require("../../../types");
 var mobx_react_lite_1 = require("mobx-react-lite");
+var hooks_1 = require("../../../hooks");
 var defaultStyles = function (_a) {
     var width = _a.width;
     return (0, react_1.css)({
@@ -46,7 +47,9 @@ var defaultStyles = function (_a) {
     });
 };
 exports.InlineBanner = (0, providers_1.withController)((0, providers_1.withTracking)((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 = {
         layout: types_1.ResultsLayout.grid,
@@ -54,7 +57,13 @@ exports.InlineBanner = (0, providers_1.withController)((0, providers_1.withTrack
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('inlineBanner', globalTheme, defaultProps, properties);
-    var banner = props.banner, className = props.className, internalClassName = props.internalClassName, disableA11y = props.disableA11y, layout = props.layout, onClick = props.onClick;
+    var banner = props.banner, className = props.className, internalClassName = props.internalClassName, disableA11y = props.disableA11y, layout = props.layout, onClick = props.onClick, 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.inlineBanner) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     return banner && banner.value ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) {
                 onClick && onClick(e, banner);

package/dist/cjs/components/src/components/Atoms/LoadingBar/LoadingBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingBar.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/LoadingBar/LoadingBar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAqC7D,eAAO,MAAM,UAAU,gBAAyB,eAAe;;CAsB7D,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,6BAA6B,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAE9F,MAAM,MAAM,6BAA6B,GAAG;IAC3C,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}
+{"version":3,"file":"LoadingBar.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/LoadingBar/LoadingBar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAuC7D,eAAO,MAAM,UAAU,gBAAyB,eAAe;;CA8B7D,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,6BAA6B,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAE9F,MAAM,MAAM,6BAA6B,GAAG;IAC3C,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

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

@@ -21,6 +21,7 @@ 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 defaultStyles = function (_a) {
     var _b, _c, _d, _e;
     var color = _a.color, height = _a.height, backgroundColor = _a.backgroundColor, theme = _a.theme;
@@ -55,14 +56,22 @@ var defaultStyles = function (_a) {
     });
 };
 exports.LoadingBar = (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 = {
         height: '5px',
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('loadingBar', globalTheme, defaultProps, properties);
-    var active = props.active, className = props.className, internalClassName = props.internalClassName;
+    var active = props.active, className = props.className, internalClassName = props.internalClassName, 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.loadingBar) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     return active ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__loading-bar', className, internalClassName), children: (0, jsx_runtime_1.jsx)("div", { className: "ss__loading-bar__bar" }) })) })) : null;
 });

package/dist/cjs/components/src/components/Atoms/Overlay/Overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Overlay/Overlay.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAqB7D,wBAAgB,OAAO,CAAC,UAAU,EAAE,YAAY,oDA0B/C;AAED,MAAM,MAAM,YAAY,GAAG,0BAA0B,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;AAErF,MAAM,MAAM,0BAA0B,GAAG;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC"}
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Overlay/Overlay.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAuB7D,wBAAgB,OAAO,CAAC,UAAU,EAAE,YAAY,oDAkC/C;AAED,MAAM,MAAM,YAAY,GAAG,0BAA0B,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;AAErF,MAAM,MAAM,0BAA0B,GAAG;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC"}

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

@@ -21,6 +21,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var providers_1 = require("../../../providers");
 var utilities_1 = require("../../../utilities");
 var hooks_1 = require("../../../hooks");
+var hooks_2 = require("../../../hooks");
 var defaultStyles = function (_a) {
     var transitionSpeed = _a.transitionSpeed, color = _a.color;
     return (0, react_1.css)({
@@ -39,7 +40,9 @@ var defaultStyles = function (_a) {
     });
 };
 function Overlay(properties) {
+    var _a;
     var globalTheme = (0, providers_1.useTheme)();
+    var snap = (0, providers_1.useSnap)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var defaultProps = {
         color: 'rgba(0,0,0,0.8)',
@@ -47,7 +50,13 @@ function Overlay(properties) {
         treePath: globalTreePath,
     };
     var props = (0, utilities_1.mergeProps)('overlay', globalTheme, defaultProps, properties);
-    var active = props.active, onClick = props.onClick, disableA11y = props.disableA11y, className = props.className, internalClassName = props.internalClassName;
+    var active = props.active, onClick = props.onClick, disableA11y = props.disableA11y, className = props.className, internalClassName = props.internalClassName, 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.overlay) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
     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({ onClick: function (e) { return onClick && active && onClick(e); }, ref: function (e) { return (!disableA11y ? (0, hooks_1.useA11y)(e, active ? 0 : -1) : null); }, className: (0, classnames_1.default)('ss__overlay', { 'ss__overlay--active': active }, className, internalClassName) }, styling)) }));
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) { return onClick && active && onClick(e); }, ref: function (e) { return (!disableA11y ? (0, hooks_2.useA11y)(e, active ? 0 : -1) : null); }, className: (0, classnames_1.default)('ss__overlay', { 'ss__overlay--active': active }, className, internalClassName) }, styling)) }));
 }