@athoscommerce/snap-preact 1.1.5 → 1.2.0

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

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 const defaultStyles = () => {
     return css({
         maxHeight: '100%',
@@ -12,13 +13,20 @@ const defaultStyles = () => {
 };
 export const BadgeImage = observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         // default props
         treePath: globalTreePath,
     };
     const props = mergeProps('badgeImage', globalTheme, defaultProps, properties);
-    const { label, url, tag, className, internalClassName } = props;
+    const { label, url, tag, className, internalClassName, customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.badgeImage || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const styling = mergeStyles(props, defaultStyles);
     return url ? (_jsx(CacheProvider, { children: _jsx("img", { ...styling, className: classnames('ss__badge-image', `ss__badge-image--${tag}`, className, internalClassName), alt: label || `${tag} badge`, src: url }) })) : null;
 });

package/dist/esm/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/esm/components/src/components/Atoms/BadgePill/BadgePill.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 const defaultStyles = ({ color, colorText }) => {
     return css({
         display: 'inline-block',
@@ -20,6 +21,7 @@ const defaultStyles = ({ color, colorText }) => {
 };
 export const BadgePill = observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         // default props
@@ -28,7 +30,13 @@ export const BadgePill = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('badgePill', globalTheme, defaultProps, properties);
-    const { value, tag, className, internalClassName } = props;
+    const { value, tag, className, internalClassName, customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.badgePill || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const styling = mergeStyles(props, defaultStyles);
     return value ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__badge-pill', `ss__badge-pill--${tag}`, className, internalClassName), children: _jsx("span", { className: "ss__badge-pill__value", children: value }) }) })) : null;
 });

package/dist/esm/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/esm/components/src/components/Atoms/BadgeRectangle/BadgeRectangle.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 const defaultStyles = ({ color, colorText }) => {
     return css({
         display: 'inline-block',
@@ -19,6 +20,7 @@ const defaultStyles = ({ color, colorText }) => {
 };
 export const BadgeRectangle = observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         // default props
@@ -27,7 +29,13 @@ export const BadgeRectangle = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('badgeRectangle', globalTheme, defaultProps, properties);
-    const { value, tag, className, internalClassName } = props;
+    const { value, tag, className, internalClassName, customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.badgeRectangle || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const styling = mergeStyles(props, defaultStyles);
     return value ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__badge-rectangle', `ss__badge-rectangle--${tag}`, className, internalClassName), children: _jsx("span", { className: "ss__badge-rectangle__value", children: value }) }) })) : null;
 });

package/dist/esm/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/esm/components/src/components/Atoms/BadgeText/BadgeText.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 const defaultStyles = ({ colorText }) => {
     return css({
         display: 'inline-block',
@@ -18,6 +19,7 @@ const defaultStyles = ({ colorText }) => {
 };
 export const BadgeText = observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         // default props
@@ -25,7 +27,13 @@ export const BadgeText = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('badgeText', globalTheme, defaultProps, properties);
-    const { value, tag, className, internalClassName } = props;
+    const { value, tag, className, internalClassName, customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.badgeText || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const styling = mergeStyles(props, defaultStyles);
     return value ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__badge-text', `ss__badge-text--${tag}`, className, internalClassName), children: _jsx("span", { className: "ss__badge-text__value", children: value }) }) })) : null;
 });

package/dist/esm/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/esm/components/src/components/Atoms/Banner/Banner.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { observer } from 'mobx-react-lite';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath, withTracking, withController } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, withTracking, withController, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 import { ContentType } from '@athoscommerce/snap-store-mobx';
 import { useCallback } from 'preact/hooks';
 const defaultStyles = () => {
@@ -19,13 +20,20 @@ const defaultStyles = () => {
 };
 export const Banner = withController(observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         treePath: globalTreePath,
     };
     const props = mergeProps('banner', globalTheme, defaultProps, properties);
-    const { controller, type, className, internalClassName } = props;
+    const { controller, type, className, internalClassName, customComponent } = props;
     const content = props.content || controller?.store?.merchandising.content;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.banner || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     if (type === ContentType.INLINE) {
         console.warn(`BannerType '${ContentType.INLINE}' is not supported in <Banner /> component`);
         return null;

package/dist/esm/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/esm/components/src/components/Atoms/Breadcrumbs/Breadcrumbs.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/reac
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { defined, mergeProps, mergeStyles } from '../../../utilities';
 import { Icon } from '../Icon';
+import { useComponent } from '../../../hooks';
 const defaultStyles = () => {
     return css({
         '& .ss__breadcrumbs__crumbs': {
@@ -19,6 +20,7 @@ const defaultStyles = () => {
 };
 export const Breadcrumbs = observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         separator: '>',
@@ -33,7 +35,13 @@ export const Breadcrumbs = observer((properties) => {
             : [{ label: 'Search' }],
     };
     const props = mergeProps('breadcrumbs', globalTheme, defaultProps, properties);
-    const { data, separator, separatorIcon, className, internalClassName, controller, disableStyles, treePath } = props;
+    const { data, separator, separatorIcon, className, internalClassName, controller, disableStyles, treePath, customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.breadcrumbs || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const subProps = {
         icon: {
             internalClassName: 'ss__breadcrumbs__separator__icon',

package/dist/esm/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/esm/components/src/components/Atoms/Button/Button.js

@@ -1,12 +1,12 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { useA11y } from '../../../hooks/useA11y';
 import { cloneWithProps, defined, mergeProps, mergeStyles } from '../../../utilities';
 import { Icon } from '../Icon';
-import { useLang } from '../../../hooks';
+import { useLang, useComponent } from '../../../hooks';
 import deepmerge from 'deepmerge';
 import Color from 'color';
 const defaultStyles = ({ native, color, backgroundColor, borderColor, theme }) => {
@@ -45,13 +45,20 @@ const defaultStyles = ({ native, color, backgroundColor, borderColor, theme }) =
 };
 export const Button = observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         disableA11y: false,
         treePath: globalTreePath,
     };
     const props = mergeProps('button', globalTheme, defaultProps, properties);
-    const { content, children, disabled, native, onClick, disableA11y, disableStyles, className, internalClassName, icon, lang, treePath, style: _, styleScript: __, themeStyleScript: ___, ...additionalProps } = props;
+    const { content, children, disabled, native, onClick, disableA11y, disableStyles, className, internalClassName, icon, lang, treePath, customComponent, style: _, styleScript: __, themeStyleScript: ___, ...additionalProps } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.button || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const subProps = {
         icon: {
             internalClassName: 'ss__button__icon',

package/dist/esm/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/esm/components/src/components/Atoms/Dropdown/Dropdown.js

@@ -1,11 +1,11 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createPortal } from 'preact/compat';
 import { useState, useRef, useEffect } from 'preact/hooks';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
-import { useClickOutside } from '../../../hooks';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
+import { useClickOutside, useComponent } from '../../../hooks';
 import { cloneWithProps, mergeProps, mergeStyles } from '../../../utilities';
 import { useA11y } from '../../../hooks/useA11y';
 const defaultStyles = ({ disableOverlay }) => {
@@ -34,6 +34,7 @@ const defaultStyles = ({ disableOverlay }) => {
 };
 export const Dropdown = observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         startOpen: false,
@@ -41,7 +42,13 @@ export const Dropdown = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('dropdown', globalTheme, defaultProps, properties);
-    const { button, content, children, disabled, open, toggleOnHover, onMouseEnter, onMouseLeave, disableClick, onClick, onToggle, focusTrapContent, startOpen, disableClickOutside, disableA11y, className, internalClassName, treePath, usePortal, } = props;
+    const { button, content, children, disabled, open, toggleOnHover, onMouseEnter, onMouseLeave, disableClick, onClick, onToggle, focusTrapContent, startOpen, disableClickOutside, disableA11y, className, internalClassName, treePath, usePortal, customComponent, } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.dropdown || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     let dropdownOpen, setDropdownOpen;
     const stateful = open === undefined;
     if (stateful) {

package/dist/esm/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/esm/components/src/components/Atoms/FormattedNumber/FormattedNumber.js

@@ -1,14 +1,16 @@
-import { Fragment as _Fragment, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import { filters } from '@athoscommerce/snap-toolbox';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 const defaultStyles = () => {
     return css({});
 };
 export function FormattedNumber(properties) {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         symbol: '',
@@ -20,7 +22,13 @@ export function FormattedNumber(properties) {
         treePath: globalTreePath,
     };
     const props = mergeProps('formattedNumber', globalTheme, defaultProps, properties);
-    const { value, symbol, decimalPlaces, padDecimalPlaces, thousandsSeparator, decimalSeparator, symbolAfter, className, internalClassName, raw } = props;
+    const { value, symbol, decimalPlaces, padDecimalPlaces, thousandsSeparator, decimalSeparator, symbolAfter, className, internalClassName, raw, customComponent, } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.formattedNumber || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const formattedNumber = filters.formatNumber(value, {
         symbol,
         decimalPlaces,

package/dist/esm/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/esm/components/src/components/Atoms/Icon/Icon.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { iconPaths } from './paths';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 const defaultStyles = ({ color, fill, stroke, theme, width, height, size }) => {
     return css({
         color: color || fill || theme?.variables?.colors?.primary,
@@ -16,6 +17,7 @@ const defaultStyles = ({ color, fill, stroke, theme, width, height, size }) => {
 };
 export function Icon(properties) {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         size: '16px',
@@ -23,7 +25,13 @@ export function Icon(properties) {
         treePath: globalTreePath,
     };
     const props = mergeProps('icon', globalTheme, defaultProps, properties);
-    const { color, icon, fill, path, children, size, width, title, height, viewBox, disableStyles, className, internalClassName, style: _, styleScript: __, themeStyleScript: ___, name: ____, treePath: _____, ...otherProps } = props;
+    const { color, icon, fill, path, children, size, width, title, height, viewBox, disableStyles, className, internalClassName, customComponent, style: _, styleScript: __, themeStyleScript: ___, name: ____, treePath: _____, ...otherProps } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.icon || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const iconPath = iconPaths[icon] || path;
     const pathType = typeof iconPath;
     const styling = mergeStyles(props, defaultStyles);

package/dist/esm/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/esm/components/src/components/Atoms/Image/Image.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { useState, useEffect, useRef } from 'preact/hooks';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 export const FALLBACK_IMAGE_URL = '//cdn.athoscommerce.net/snap/images/fallback.png';
 const defaultStyles = ({ height }) => {
     return css({
@@ -26,6 +27,7 @@ const defaultStyles = ({ height }) => {
 };
 export function Image(properties) {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         fallback: FALLBACK_IMAGE_URL,
@@ -33,7 +35,13 @@ export function Image(properties) {
         treePath: globalTreePath,
     };
     const props = mergeProps('image', globalTheme, defaultProps, properties);
-    const { alt, src, fallback, title, hoverSrc, lazy, onMouseOver, onMouseOut, onError, onLoad, onClick, className, internalClassName } = props;
+    const { alt, src, fallback, title, hoverSrc, lazy, onMouseOver, onMouseOut, onError, onLoad, onClick, className, internalClassName, customComponent, } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.image || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const [visibile, setVisibile] = useState(false);
     const [isHovering, setHover] = useState(false);
     const prevSrcRef = useRef('');

package/dist/esm/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/esm/components/src/components/Atoms/InlineBanner/InlineBanner.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath, withController, withTracking } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, withController, withTracking, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
 import { useA11y } from '../../../hooks/useA11y';
 import { ResultsLayout } from '../../../types';
 import { observer } from 'mobx-react-lite';
+import { useComponent } from '../../../hooks';
 const defaultStyles = ({ width }) => {
     return css({
         height: '100%',
@@ -29,6 +30,7 @@ const defaultStyles = ({ width }) => {
 };
 export const InlineBanner = withController(withTracking(observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         layout: ResultsLayout.grid,
@@ -36,7 +38,13 @@ export const InlineBanner = withController(withTracking(observer((properties) =>
         treePath: globalTreePath,
     };
     const props = mergeProps('inlineBanner', globalTheme, defaultProps, properties);
-    const { banner, className, internalClassName, disableA11y, layout, onClick } = props;
+    const { banner, className, internalClassName, disableA11y, layout, onClick, customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.inlineBanner || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const styling = mergeStyles(props, defaultStyles);
     return banner && banner.value ? (_jsx(CacheProvider, { children: _jsx("div", { onClick: (e) => {
                 onClick && onClick(e, banner);

package/dist/esm/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/esm/components/src/components/Atoms/LoadingBar/LoadingBar.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { observer } from 'mobx-react-lite';
 import { css, keyframes } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 const defaultStyles = ({ color, height, backgroundColor, theme }) => {
     const animation = keyframes({
         from: { left: '-200px', width: '30%' },
@@ -37,13 +38,20 @@ const defaultStyles = ({ color, height, backgroundColor, theme }) => {
 };
 export const LoadingBar = observer((properties) => {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         height: '5px',
         treePath: globalTreePath,
     };
     const props = mergeProps('loadingBar', globalTheme, defaultProps, properties);
-    const { active, className, internalClassName } = props;
+    const { active, className, internalClassName, customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.loadingBar || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const styling = mergeStyles(props, defaultStyles);
     return active ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__loading-bar', className, internalClassName), children: _jsx("div", { className: "ss__loading-bar__bar" }) }) })) : null;
 });

package/dist/esm/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/esm/components/src/components/Atoms/Overlay/Overlay.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
 import { useA11y } from '../../../hooks';
 const defaultStyles = ({ transitionSpeed, color }) => {
     return css({
@@ -22,6 +23,7 @@ const defaultStyles = ({ transitionSpeed, color }) => {
 };
 export function Overlay(properties) {
     const globalTheme = useTheme();
+    const snap = useSnap();
     const globalTreePath = useTreePath();
     const defaultProps = {
         color: 'rgba(0,0,0,0.8)',
@@ -29,7 +31,13 @@ export function Overlay(properties) {
         treePath: globalTreePath,
     };
     const props = mergeProps('overlay', globalTheme, defaultProps, properties);
-    const { active, onClick, disableA11y, className, internalClassName } = props;
+    const { active, onClick, disableA11y, className, internalClassName, customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.overlay || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
     const styling = mergeStyles(props, defaultStyles);
     return (_jsx(CacheProvider, { children: _jsx("div", { onClick: (e) => onClick && active && onClick(e), ref: (e) => (!disableA11y ? useA11y(e, active ? 0 : -1) : null), className: classnames('ss__overlay', { 'ss__overlay--active': active }, className, internalClassName), ...styling }) }));
 }

package/dist/esm/components/src/components/Atoms/PaginationInfo/PaginationInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationInfo.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/PaginationInfo/PaginationInfo.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAM/C,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAoDrE,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG;IACjC,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnC,GAAG,iCAAiC,GACpC,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,sBAAsB,KAAK,MAAM,CAAC,CAAC;CAC/D,CAAC;AAEF,MAAM,WAAW,kBAAkB;IAClC,QAAQ,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;CACvC;AAED,UAAU,sBAAsB;IAC/B,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACnC"}
+{"version":3,"file":"PaginationInfo.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/PaginationInfo/PaginationInfo.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAyB,MAAM,gBAAgB,CAAC;AAO7D,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CA4DrE,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG;IACjC,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnC,GAAG,iCAAiC,GACpC,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,sBAAsB,KAAK,MAAM,CAAC,CAAC;CAC/D,CAAC;AAEF,MAAM,WAAW,kBAAkB;IAClC,QAAQ,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;CACvC;AAED,UAAU,sBAAsB;IAC/B,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACnC"}