@athoscommerce/snap-preact 1.5.1-beta.112 → 1.5.1

package/dist/esm/components/src/themes/snapnco/components/molecules/select.js

@@ -1,9 +1,15 @@
 import { css } from '@emotion/react';
-import Color from 'color';
+import { colord } from 'colord';
+const setLightness = (colorValue, lightness) => {
+    const hsl = colord(colorValue).toHsl();
+    return colord({ ...hsl, l: lightness });
+};
 // CSS in JS style script for the Select component
 const selectStyleScript = ({ backgroundColor, theme }) => {
     const variables = theme?.variables;
-    const transparentSecondary = new Color(theme?.variables?.colors?.secondary || undefined).opaquer(0.2);
+    const baseSecondary = colord(theme?.variables?.colors?.secondary || '#000');
+    const transparentSecondary = baseSecondary.alpha(Math.min(baseSecondary.alpha() + 0.2, 1));
+    const transparentSecondaryHover = setLightness(transparentSecondary.toHex(), 95).toRgbString();
     return css({
         '.ss__dropdown': {
             '.ss__select__dropdown__button': {
@@ -53,10 +59,10 @@ const selectStyleScript = ({ backgroundColor, theme }) => {
                 gap: '6px',
                 color: variables?.colors?.secondary,
                 '&.ss__select__select__option--selected': {
-                    backgroundColor: `${transparentSecondary.rgb().lightness(95)}` || `rgba(109,113,117,.06)`,
+                    backgroundColor: transparentSecondaryHover || `rgba(109,113,117,.06)`,
                 },
                 '&:hover': {
-                    backgroundColor: `${transparentSecondary.rgb().lightness(95)}` || `rgba(109,113,117,.06)`,
+                    backgroundColor: transparentSecondaryHover || `rgba(109,113,117,.06)`,
                 },
             },
         },

package/dist/esm/components/src/themes/snapnco/components/templates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/snapnco/components/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAkBhE,eAAO,MAAM,SAAS,EAAE,uBAiEvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/snapnco/components/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAiBhE,eAAO,MAAM,SAAS,EAAE,uBA6DvB,CAAC"}

package/dist/esm/components/src/themes/snapnco/components/templates/index.js

@@ -12,10 +12,8 @@ import { searchCollapsible } from './searchCollapsible';
 import { autocompleteSlideout } from './autocompleteSlideout';
 import { autocompleteModal } from './autocompleteModal';
 import { autocompleteFixed } from './autocompleteFixed';
-import { chat } from './chat';
 export const templates = {
     default: {
-        ...chat.default,
         ...autocompleteSlideout.default,
         ...autocompleteModal.default,
         ...autocompleteFixed.default,
@@ -31,7 +29,6 @@ export const templates = {
         ...searchHorizontal.default,
     },
     mobile: {
-        ...chat.mobile,
         ...autocompleteSlideout.mobile,
         ...autocompleteModal.mobile,
         ...autocompleteFixed.mobile,
@@ -47,7 +44,6 @@ export const templates = {
         ...searchHorizontal.mobile,
     },
     tablet: {
-        ...chat.tablet,
         ...autocompleteSlideout.tablet,
         ...autocompleteModal.tablet,
         ...autocompleteFixed.tablet,
@@ -63,7 +59,6 @@ export const templates = {
         ...searchHorizontal.tablet,
     },
     desktop: {
-        ...chat.desktop,
         ...autocompleteSlideout.desktop,
         ...autocompleteModal.desktop,
         ...autocompleteFixed.desktop,

package/dist/esm/components/src/themes/snapnco/snapnco.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snapnco.d.ts","sourceRoot":"","sources":["../../../../../../components/src/themes/snapnco/snapnco.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAkB,MAAM,iBAAiB,CAAC;AAkBhE,eAAO,MAAM,OAAO,EAAE,aAKrB,CAAC"}
+{"version":3,"file":"snapnco.d.ts","sourceRoot":"","sources":["../../../../../../components/src/themes/snapnco/snapnco.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAkB,MAAM,iBAAiB,CAAC;AAiBhE,eAAO,MAAM,OAAO,EAAE,aAMrB,CAAC"}

package/dist/esm/components/src/themes/snapnco/snapnco.js

@@ -7,7 +7,6 @@ const snapncoVariables = {
         desktop: 1299,
     },
     colors: {
-        text: '#222222',
         primary: '#202223',
         secondary: '#6d7175',
         accent: '#3a23ad',
@@ -18,4 +17,5 @@ export const snapnco = {
     variables: snapncoVariables,
     components,
     responsive,
+    type: 'templates',
 };

package/dist/esm/components/src/themes/snappy/components/molecules/checkbox.js

@@ -1,18 +1,18 @@
 import { css } from '@emotion/react';
-import Color from 'color';
+import { colord } from 'colord';
 // CSS in JS style script for the Checkbox component
 const checkboxStyleScript = ({ color, theme }) => {
     const variables = theme?.variables;
-    const backgroundColorObj = new Color(color || variables?.colors.primary || undefined);
-    const backgroundTextColorObj = backgroundColorObj.isDark() ? new Color('#fff') : new Color('#000');
+    const backgroundColorObj = colord(color || variables?.colors?.primary || '#000');
+    const backgroundTextColorObj = backgroundColorObj.isDark() ? colord('#fff') : colord('#000');
     return css({
-        border: `2px solid ${backgroundColorObj.hex()}`,
+        border: `2px solid ${backgroundColorObj.toHex()}`,
         borderRadius: '3px',
         '&.ss__checkbox--active': {
-            backgroundColor: backgroundColorObj.hex(),
+            backgroundColor: backgroundColorObj.toHex(),
             '.ss__icon': {
-                fill: backgroundTextColorObj.hex(),
-                stroke: backgroundTextColorObj.hex(),
+                fill: backgroundTextColorObj.toHex(),
+                stroke: backgroundTextColorObj.toHex(),
             },
         },
         '&.ss__checkbox--disabled': {

package/dist/esm/components/src/themes/snappy/components/molecules/facetGridOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"facetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/snappy/components/molecules/facetGridOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,mCAAmC,EAAE,MAAM,mDAAmD,CAAC;AAEpI,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AA2BvD,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,kBAAkB,EAAE,qBAAqB,EAAE,mCAAmC,CAQ3H,CAAC"}
+{"version":3,"file":"facetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/snappy/components/molecules/facetGridOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,mCAAmC,EAAE,MAAM,mDAAmD,CAAC;AAEpI,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAuBvD,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,kBAAkB,EAAE,qBAAqB,EAAE,mCAAmC,CAQ3H,CAAC"}

package/dist/esm/components/src/themes/snappy/components/molecules/facetGridOptions.js

@@ -1,20 +1,17 @@
 import { css } from '@emotion/react';
-import Color from 'color';
+import { colord } from 'colord';
 // CSS in JS style script for the FacetGridOptions component
 const facetGridOptionsStyleScript = ({ theme }) => {
     const variables = theme?.variables;
-    const backgroundColorObj = new Color(variables?.colors.primary || undefined);
-    const colorObj = backgroundColorObj.isDark() ? new Color('#fff') : new Color('#000');
+    const backgroundColorObj = colord(variables?.colors?.primary || '#000');
+    const colorObj = backgroundColorObj.isDark() ? colord('#fff') : colord('#000');
     return css({
-        a: {
-            color: theme?.variables?.colors?.text,
-        },
         '& .ss__facet-grid-options__option': {
-            border: `1px solid ${backgroundColorObj.hex()}`,
+            border: `1px solid ${backgroundColorObj.toHex()}`,
             borderRadius: '3px',
             '&.ss__facet-grid-options__option--filtered': {
-                background: backgroundColorObj.hex(),
-                color: colorObj.hex(),
+                background: backgroundColorObj.toHex(),
+                color: colorObj.toHex(),
             },
             '&:hover:not(.ss__facet-grid-options__option--filtered)': {
                 cursor: 'pointer',

package/dist/esm/components/src/themes/snappy/components/molecules/facetPaletteOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"facetPaletteOptions.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/snappy/components/molecules/facetPaletteOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,sCAAsC,EAAE,MAAM,sDAAsD,CAAC;AAC7I,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AA2DvD,eAAO,MAAM,mBAAmB,EAAE,cAAc,CAAC,qBAAqB,EAAE,wBAAwB,EAAE,sCAAsC,CAevI,CAAC"}
+{"version":3,"file":"facetPaletteOptions.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/snappy/components/molecules/facetPaletteOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,sCAAsC,EAAE,MAAM,sDAAsD,CAAC;AAC7I,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAwDvD,eAAO,MAAM,mBAAmB,EAAE,cAAc,CAAC,qBAAqB,EAAE,wBAAwB,EAAE,sCAAsC,CAevI,CAAC"}

package/dist/esm/components/src/themes/snappy/components/molecules/facetPaletteOptions.js

@@ -1,10 +1,7 @@
 import { css } from '@emotion/react';
 // CSS in JS style script for the FacetPaletteOptions component
-const facetPaletteStyleScript = ({ theme }) => {
+const facetPaletteStyleScript = ({}) => {
     return css({
-        a: {
-            color: theme?.variables?.colors?.text,
-        },
         '.ss__facet-palette-options__option': {
             '&:hover': {
                 cursor: 'pointer',

package/dist/esm/components/src/themes/snappy/components/molecules/loadMore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loadMore.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/snappy/components/molecules/loadMore.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAC;AAE5G,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AA6BvD,eAAO,MAAM,QAAQ,EAAE,cAAc,CAAC,UAAU,EAAE,aAAa,EAAE,2BAA2B,CAM3F,CAAC"}
+{"version":3,"file":"loadMore.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/snappy/components/molecules/loadMore.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAC;AAE5G,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAmCvD,eAAO,MAAM,QAAQ,EAAE,cAAc,CAAC,UAAU,EAAE,aAAa,EAAE,2BAA2B,CAM3F,CAAC"}

package/dist/esm/components/src/themes/snappy/components/molecules/loadMore.js

@@ -1,10 +1,14 @@
 import { css } from '@emotion/react';
-import Color from 'color';
+import { colord } from 'colord';
+const setLightness = (colorValue, lightness) => {
+    const hsl = colord(colorValue).toHsl();
+    return colord({ ...hsl, l: lightness });
+};
 // CSS in JS style script for the LoadMore component
 const loadMoreStyleScript = ({ color, backgroundColor, theme }) => {
     const variables = theme?.variables;
-    const barColour = new Color(color || variables?.colors.accent || undefined);
-    const backgroundColour = backgroundColor ? new Color(backgroundColor || undefined) : barColour.lightness(90);
+    const barColour = colord(color || variables?.colors?.accent || '#000');
+    const backgroundColour = backgroundColor ? colord(backgroundColor || '#fff') : setLightness(barColour.toHex(), 90);
     return css({
         '.ss__button': {
             '.ss__button__content': {
@@ -15,9 +19,9 @@ const loadMoreStyleScript = ({ color, backgroundColor, theme }) => {
         },
         '.ss__load-more__progress': {
             '.ss__load-more__progress__indicator': {
-                background: backgroundColour.hex(),
+                background: backgroundColour.toHex(),
                 '.ss__load-more__progress__indicator__bar': {
-                    background: barColour.hex(),
+                    background: barColour.toHex(),
                 },
             },
         },

package/dist/esm/components/src/themes/snappy/components/molecules/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/snappy/components/molecules/select.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAEtG,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAoEvD,eAAO,MAAM,MAAM,EAAE,cAAc,CAAC,QAAQ,EAAE,WAAW,EAAE,yBAAyB,CAQnF,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/snappy/components/molecules/select.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAEtG,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AA4EvD,eAAO,MAAM,MAAM,EAAE,cAAc,CAAC,QAAQ,EAAE,WAAW,EAAE,yBAAyB,CAQnF,CAAC"}

package/dist/esm/components/src/themes/snappy/components/molecules/select.js

@@ -1,9 +1,15 @@
 import { css } from '@emotion/react';
-import Color from 'color';
+import { colord } from 'colord';
+const setLightness = (colorValue, lightness) => {
+    const hsl = colord(colorValue).toHsl();
+    return colord({ ...hsl, l: lightness });
+};
 // CSS in JS style script for the Select component
 const selectStyleScript = ({ backgroundColor, theme }) => {
     const variables = theme?.variables;
-    const transparentSecondary = new Color(theme?.variables?.colors?.secondary || undefined).opaquer(0.2);
+    const baseSecondary = colord(theme?.variables?.colors?.secondary || '#000');
+    const transparentSecondary = baseSecondary.alpha(Math.min(baseSecondary.alpha() + 0.2, 1));
+    const transparentSecondaryHover = setLightness(transparentSecondary.toHex(), 95).toRgbString();
     return css({
         '.ss__dropdown': {
             '.ss__select__dropdown__button': {
@@ -53,10 +59,10 @@ const selectStyleScript = ({ backgroundColor, theme }) => {
                 gap: '6px',
                 color: variables?.colors?.secondary,
                 '&.ss__select__select__option--selected': {
-                    backgroundColor: `${transparentSecondary.rgb().lightness(95)}` || `rgba(109,113,117,.06)`,
+                    backgroundColor: transparentSecondaryHover || `rgba(109,113,117,.06)`,
                 },
                 '&:hover': {
-                    backgroundColor: `${transparentSecondary.rgb().lightness(95)}` || `rgba(109,113,117,.06)`,
+                    backgroundColor: transparentSecondaryHover || `rgba(109,113,117,.06)`,
                 },
             },
         },

package/dist/esm/components/src/themes/snappy/components/templates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/snappy/components/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAkBhE,eAAO,MAAM,SAAS,EAAE,uBAiEvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/themes/snappy/components/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAiBhE,eAAO,MAAM,SAAS,EAAE,uBA6DvB,CAAC"}

package/dist/esm/components/src/themes/snappy/components/templates/index.js

@@ -12,10 +12,8 @@ import { searchCollapsible } from './searchCollapsible';
 import { autocompleteSlideout } from './autocompleteSlideout';
 import { autocompleteModal } from './autocompleteModal';
 import { autocompleteFixed } from './autocompleteFixed';
-import { chat } from './chat';
 export const templates = {
     default: {
-        ...chat.default,
         ...autocompleteSlideout.default,
         ...autocompleteModal.default,
         ...autocompleteFixed.default,
@@ -31,7 +29,6 @@ export const templates = {
         ...searchHorizontal.default,
     },
     mobile: {
-        ...chat.mobile,
         ...autocompleteSlideout.mobile,
         ...autocompleteModal.mobile,
         ...autocompleteFixed.mobile,
@@ -47,7 +44,6 @@ export const templates = {
         ...searchHorizontal.mobile,
     },
     tablet: {
-        ...chat.tablet,
         ...autocompleteSlideout.tablet,
         ...autocompleteModal.tablet,
         ...autocompleteFixed.tablet,
@@ -63,7 +59,6 @@ export const templates = {
         ...searchHorizontal.tablet,
     },
     desktop: {
-        ...chat.desktop,
         ...autocompleteSlideout.desktop,
         ...autocompleteModal.desktop,
         ...autocompleteFixed.desktop,

package/dist/esm/components/src/themes/snappy/snappy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snappy.d.ts","sourceRoot":"","sources":["../../../../../../components/src/themes/snappy/snappy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAkB,MAAM,iBAAiB,CAAC;AAkBhE,eAAO,MAAM,MAAM,EAAE,aAKpB,CAAC"}
+{"version":3,"file":"snappy.d.ts","sourceRoot":"","sources":["../../../../../../components/src/themes/snappy/snappy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAkB,MAAM,iBAAiB,CAAC;AAiBhE,eAAO,MAAM,MAAM,EAAE,aAMpB,CAAC"}

package/dist/esm/components/src/themes/snappy/snappy.js

@@ -7,7 +7,6 @@ const snappyVariables = {
         desktop: 1299,
     },
     colors: {
-        text: '#222222',
         primary: '#202223',
         secondary: '#6d7175',
         accent: '#3a23ad',
@@ -18,4 +17,5 @@ export const snappy = {
     variables: snappyVariables,
     components,
     responsive,
+    type: 'templates',
 };

package/dist/esm/components/src/themes/themeComponents/searchCollapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchCollapsible.d.ts","sourceRoot":"","sources":["../../../../../../components/src/themes/themeComponents/searchCollapsible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,oCAAoC,EAAE,MAAM,8CAA8C,CAAC;AAC5H,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,eAAO,MAAM,oCAAoC,EAAE,cAAc,CAAC,mBAAmB,EAAE,sBAAsB,EAAE,oCAAoC,CAmHjJ,CAAC"}
+{"version":3,"file":"searchCollapsible.d.ts","sourceRoot":"","sources":["../../../../../../components/src/themes/themeComponents/searchCollapsible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,oCAAoC,EAAE,MAAM,8CAA8C,CAAC;AAC5H,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,eAAO,MAAM,oCAAoC,EAAE,cAAc,CAAC,mBAAmB,EAAE,sBAAsB,EAAE,oCAAoC,CAkDjJ,CAAC"}

package/dist/esm/components/src/themes/themeComponents/searchCollapsible.js

@@ -1,33 +1,6 @@
 export const searchCollapsibleThemeComponentProps = {
     default: {
         searchCollapsible: {
-            layoutOptions: [
-                {
-                    value: 1,
-                    label: '4 wide',
-                    default: true,
-                    icon: 'layout-grid-4',
-                    overrides: {
-                        components: {
-                            'searchCollapsible results': {
-                                columns: 4,
-                            },
-                        },
-                    },
-                },
-                {
-                    value: 2,
-                    label: '3 wide',
-                    icon: 'layout-grid-3',
-                    overrides: {
-                        components: {
-                            'searchCollapsible results': {
-                                columns: 3,
-                            },
-                        },
-                    },
-                },
-            ],
             hideToggleSidebarButton: false,
             toggleSidebarStartClosed: true,
         },
@@ -35,17 +8,7 @@ export const searchCollapsibleThemeComponentProps = {
             icon: 'filters',
         },
         'searchCollapsible toolbar.top': {
-            layout: [
-                ['banner.header'],
-                // ['_', 'searchHeader', '_'],
-                ['banner.banner'],
-                ['button.sidebar-toggle', 'searchHeader', '_', 'perPage', 'sortBy', 'layoutSelector'],
-            ],
-        },
-        'searchCollapsible layoutSelector': {
-            type: 'list',
-            hideLabel: true,
-            hideOptionLabels: true,
+            layout: [['banner.header'], ['searchHeader'], ['banner.banner'], ['button.sidebar-toggle', 'paginationInfo', '_', 'perPage', 'sortBy']],
         },
         'searchCollapsible toolbar.middle': {
             layout: [],
@@ -59,47 +22,21 @@ export const searchCollapsibleThemeComponentProps = {
     },
     mobile: {
         'searchCollapsible toolbar.top': {
-            layout: [['banner.header'], ['_', 'searchHeader', '_'], ['banner.banner'], ['mobileSidebar', '_', 'paginationInfo', '_', 'layoutSelector']],
+            layout: [['banner.header'], ['searchHeader', '_']],
+        },
+        'searchCollapsible toolbar.middle': {
+            layout: [['paginationInfo', '_'], ['mobileSidebar', '_', 'sortBy'], ['banner.banner']],
         },
         'searchCollapsible results': {
             columns: 2,
         },
-        searchCollapsible: {
-            layoutOptions: [
-                {
-                    value: 3,
-                    label: '3 wide',
-                    icon: 'layout-grid-3',
-                    overrides: {
-                        components: {
-                            'searchCollapsible results': {
-                                columns: 3,
-                            },
-                        },
-                    },
-                },
-                {
-                    value: 4,
-                    label: '2 wide',
-                    default: true,
-                    icon: 'layout-grid-2',
-                    overrides: {
-                        components: {
-                            'searchCollapsible results': {
-                                columns: 2,
-                            },
-                        },
-                    },
-                },
-            ],
-        },
     },
     tablet: {
         'searchCollapsible toolbar.top': {
-            layout: [
-                ['_', 'searchHeader', '_'],
-                ['mobileSidebar', '_', 'paginationInfo', '_', 'layoutSelector'],
-            ],
+            layout: [['banner.header'], ['searchHeader', '_']],
+        },
+        'searchCollapsible toolbar.middle': {
+            layout: [['paginationInfo', '_'], ['mobileSidebar', '_', 'sortBy'], ['banner.banner']],
         },
         'searchCollapsible results': {
             columns: 3,

package/dist/esm/components/src/themes/themeComponents/searchHorizontal.js

@@ -4,10 +4,10 @@ export const searchHorizontalThemeComponentProps = {
             hideSidebar: true,
         },
         'searchHorizontal toolbar.top': {
-            layout: [['searchHeader'], ['banner.header']],
+            layout: [['_', 'searchHeader', '_'], ['banner.header']],
         },
         'searchHorizontal toolbar.middle': {
-            layout: [['filterSummary'], ['facetsHorizontal'], ['paginationInfo', '_', 'sortBy', 'perPage'], ['banner.banner']],
+            layout: [['filterSummary'], ['facetsHorizontal', '_', 'sortBy'], ['banner.banner'], ['paginationInfo', '_']],
         },
         'searchHorizontal toolbar.bottom': {
             layout: [['banner.footer'], ['_', 'pagination', '_']],
@@ -20,11 +20,11 @@ export const searchHorizontalThemeComponentProps = {
         },
     },
     mobile: {
-        'searchHorizontal toolbar.middle': {
-            layout: [['paginationInfo', '_', 'mobileSidebar'], ['sortBy', 'perPage'], ['banner.banner']],
+        'searchHorizontal toolbar.top': {
+            layout: [['banner.header'], ['searchHeader', '_']],
         },
-        'searchHorizontal facetsHorizontal': {
-            limit: 4,
+        'searchHorizontal toolbar.middle': {
+            layout: [['paginationInfo', '_'], ['mobileSidebar', '_', 'sortBy'], ['banner.banner']],
         },
         'searchHorizontal results': {
             columns: 2,

package/dist/esm/components/src/utilities/Colour/Colour.d.ts

@@ -12,22 +12,11 @@ export declare class Colour {
     opacity(offset: number): Colour;
     transparency(offset: number): Colour;
     opaque(offset: number): Colour;
-    /** Returns a hex string mixed linearly toward black. `amount` (0-1) is the proportion
-     * of black in the result — 0.9 yields a near-black with a slight tint of the original.
-     * Uses linear RGB mixing so light inputs reliably produce darker outputs. */
-    darkenHex(amount?: number): string;
-    /** Returns a hex string mixed linearly toward white. `amount` (0-1) is the proportion
-     * of white in the result — 0.9 yields a near-white with a slight tint of the original.
-     * Uses linear RGB mixing so dark inputs reliably produce paler outputs. */
-    lightenHex(amount?: number): string;
     static isRgb(color: string): boolean;
     static isHex(color: string): boolean;
     static hexToRgb(hex: string): string;
     static rgbToHex(rgb: string): string;
     static opacity(color: string | undefined, offset: number): string | undefined;
-    /** Linear RGB mix between two hex colors. `amount` (0-1) is the proportion of `towardHex`
-     * in the result. Returns the source `hex` unchanged when either input is invalid. */
-    static mixToward(hex: string | undefined, towardHex: string, amount: number): string;
     static brightness(color: string | undefined, offset: number): string | undefined;
 }
 //# sourceMappingURL=Colour.d.ts.map

package/dist/esm/components/src/utilities/Colour/Colour.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Colour.d.ts","sourceRoot":"","sources":["../../../../../../components/src/utilities/Colour/Colour.ts"],"names":[],"mappings":"AAqBA,qBAAa,MAAM;IAClB,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,QAAQ,CAAqB;IAErC,IAAW,GAAG,IAAI,MAAM,GAAG,SAAS,CAOnC;IAED,IAAW,GAAG,IAAI,MAAM,GAAG,SAAS,CAOnC;IAED,IAAW,QAAQ,IAAI,MAAM,GAAG,SAAS,CAoBxC;gBAEW,KAAK,EAAE,MAAM,GAAG,SAAS;IAuBrC,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAI7B,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAK/B,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAK9B,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAI/B,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAKpC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAK9B;;iFAE6E;IAC7E,SAAS,CAAC,MAAM,GAAE,MAAY,GAAG,MAAM;IAIvC;;+EAE2E;IAC3E,UAAU,CAAC,MAAM,GAAE,MAAY,GAAG,MAAM;IAIxC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAOpC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIpC,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAgBpC,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAoBpC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IA+B7E;yFACqF;IACrF,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM;IAqBpF,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;CAoChF"}
+{"version":3,"file":"Colour.d.ts","sourceRoot":"","sources":["../../../../../../components/src/utilities/Colour/Colour.ts"],"names":[],"mappings":"AAqBA,qBAAa,MAAM;IAClB,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,QAAQ,CAAqB;IAErC,IAAW,GAAG,IAAI,MAAM,GAAG,SAAS,CAOnC;IAED,IAAW,GAAG,IAAI,MAAM,GAAG,SAAS,CAOnC;IAED,IAAW,QAAQ,IAAI,MAAM,GAAG,SAAS,CAoBxC;gBAEW,KAAK,EAAE,MAAM,GAAG,SAAS;IAuBrC,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAI7B,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAK/B,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAK9B,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAI/B,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAKpC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAK9B,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAOpC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIpC,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAgBpC,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAoBpC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IA+B7E,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;CAoChF"}

package/dist/esm/components/src/utilities/Colour/Colour.js

@@ -99,18 +99,6 @@ export class Colour {
             return this;
         return new Colour(Colour.opacity(this.hex, -offset));
     }
-    /** Returns a hex string mixed linearly toward black. `amount` (0-1) is the proportion
-     * of black in the result — 0.9 yields a near-black with a slight tint of the original.
-     * Uses linear RGB mixing so light inputs reliably produce darker outputs. */
-    darkenHex(amount = 0.3) {
-        return Colour.mixToward(this.hex, '#000000', amount);
-    }
-    /** Returns a hex string mixed linearly toward white. `amount` (0-1) is the proportion
-     * of white in the result — 0.9 yields a near-white with a slight tint of the original.
-     * Uses linear RGB mixing so dark inputs reliably produce paler outputs. */
-    lightenHex(amount = 0.3) {
-        return Colour.mixToward(this.hex, '#ffffff', amount);
-    }
     static isRgb(color) {
         return Boolean(color.match(/^rgba?\([0-9]{1,3}[\s,\,]+[0-9]{1,3}[\s,\,]+[0-9]{1,3}[\s,\,]*\)$/i) ||
             color.match(/^rgba?\([0-9]{1,3}[\s,\,]+[0-9]{1,3}[\s,\,]+[0-9]{1,3}[\s,\,]+0?\.?[0-9]+%?[\s,\,]*\)$/i));
@@ -179,24 +167,6 @@ export class Colour {
         }
         return hexValue;
     }
-    /** Linear RGB mix between two hex colors. `amount` (0-1) is the proportion of `towardHex`
-     * in the result. Returns the source `hex` unchanged when either input is invalid. */
-    static mixToward(hex, towardHex, amount) {
-        if (!hex || !Colour.isHex(hex) || !Colour.isHex(towardHex))
-            return hex || '';
-        const clamped = Math.max(0, Math.min(1, amount));
-        const sourceR = parseInt(hex.slice(1, 3), 16);
-        const sourceG = parseInt(hex.slice(3, 5), 16);
-        const sourceB = parseInt(hex.slice(5, 7), 16);
-        const targetR = parseInt(towardHex.slice(1, 3), 16);
-        const targetG = parseInt(towardHex.slice(3, 5), 16);
-        const targetB = parseInt(towardHex.slice(5, 7), 16);
-        const mix = (s, t) => Math.round(s * (1 - clamped) + t * clamped);
-        const r = mix(sourceR, targetR).toString(16).padStart(2, '0');
-        const g = mix(sourceG, targetG).toString(16).padStart(2, '0');
-        const b = mix(sourceB, targetB).toString(16).padStart(2, '0');
-        return `#${r}${g}${b}`;
-    }
     static brightness(color, offset) {
         let isRgb = false;
         if (color && Colour.isRgb(color)) {

package/dist/esm/components/src/utilities/mergeProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mergeProps.d.ts","sourceRoot":"","sources":["../../../../../components/src/utilities/mergeProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK3D,wBAAgB,UAAU,CAAC,qBAAqB,SAAS,cAAc,EACtE,aAAa,EAAE,MAAM,EACrB,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,OAAO,CAAC,qBAAqB,CAAC,EAC5C,KAAK,EAAE,qBAAqB,GAC1B,qBAAqB,CAiMvB;AAqCD,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAW1D;AAED,wBAAgB,eAAe,CAAC,eAAe,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAyD5F"}
+{"version":3,"file":"mergeProps.d.ts","sourceRoot":"","sources":["../../../../../components/src/utilities/mergeProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EAAE,KAAK,EAAiB,eAAe,EAAE,MAAM,cAAc,CAAC;AAK1E,wBAAgB,UAAU,CAAC,qBAAqB,SAAS,cAAc,EACtE,aAAa,EAAE,MAAM,EACrB,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,OAAO,CAAC,qBAAqB,CAAC,EAC5C,KAAK,EAAE,qBAAqB,GAC1B,qBAAqB,CAiMvB;AAqCD,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAW1D;AAED,wBAAgB,eAAe,CAAC,eAAe,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAyD5F"}

package/dist/esm/components/src/utilities/mergeProps.js

@@ -28,7 +28,7 @@ export function mergeProps(componentType, globalTheme, defaultProps, props) {
     let mergedProps = {
         ...defaultProps,
     };
-    if (!globalTheme?.name) {
+    if (globalTheme?.type !== 'templates') {
         // add globalTheme props if they exist
         const globalComponent = globalTheme?.components && globalTheme.components[componentType];
         if (globalComponent) {

package/dist/esm/components/src/utilities/snapify.d.ts

@@ -1,9 +1,8 @@
-import { SearchController, AutocompleteController, RecommendationController, ChatController } from '@athoscommerce/snap-controller';
-import type { SearchControllerConfig, AutocompleteControllerConfig, RecommendationControllerConfig, ChatControllerConfig } from '@athoscommerce/snap-controller';
+import { SearchController, AutocompleteController, RecommendationController } from '@athoscommerce/snap-controller';
+import type { SearchControllerConfig, AutocompleteControllerConfig, RecommendationControllerConfig } from '@athoscommerce/snap-controller';
 export declare class Snapify {
     static recommendation(config: RecommendationControllerConfig): RecommendationController;
     static autocomplete(config: AutocompleteControllerConfig): AutocompleteController;
-    static chat(config: ChatControllerConfig): ChatController;
     static search(config: SearchControllerConfig): SearchController;
 }
 //# sourceMappingURL=snapify.d.ts.map

package/dist/esm/components/src/utilities/snapify.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snapify.d.ts","sourceRoot":"","sources":["../../../../../components/src/utilities/snapify.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAUpI,OAAO,KAAK,EACX,sBAAsB,EACtB,4BAA4B,EAC5B,8BAA8B,EAC9B,oBAAoB,EACpB,MAAM,gCAAgC,CAAC;AAqBxC,qBAAa,OAAO;IACnB,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,8BAA8B,GAAG,wBAAwB;IAkBvF,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,4BAA4B,GAAG,sBAAsB;IAmBjF,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,oBAAoB,GAAG,cAAc;IAmBzD,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,sBAAsB,GAAG,gBAAgB;CAkB/D"}
+{"version":3,"file":"snapify.d.ts","sourceRoot":"","sources":["../../../../../components/src/utilities/snapify.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAUpH,OAAO,KAAK,EAAE,sBAAsB,EAAE,4BAA4B,EAAE,8BAA8B,EAAE,MAAM,gCAAgC,CAAC;AAqB3I,qBAAa,OAAO;IACnB,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,8BAA8B,GAAG,wBAAwB;IAkBvF,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,4BAA4B,GAAG,sBAAsB;IAmBjF,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,sBAAsB,GAAG,gBAAgB;CAkB/D"}

package/dist/esm/components/src/utilities/snapify.js

@@ -1,7 +1,7 @@
 import { configure as configureMobx } from 'mobx';
-import { SearchController, AutocompleteController, RecommendationController, ChatController } from '@athoscommerce/snap-controller';
+import { SearchController, AutocompleteController, RecommendationController } from '@athoscommerce/snap-controller';
 import { Client } from '@athoscommerce/snap-client';
-import { SearchStore, AutocompleteStore, RecommendationStore, ChatStore } from '@athoscommerce/snap-store-mobx';
+import { SearchStore, AutocompleteStore, RecommendationStore } from '@athoscommerce/snap-store-mobx';
 import { UrlManager, UrlTranslator, reactLinker } from '@athoscommerce/snap-url-manager';
 import { EventManager } from '@athoscommerce/snap-event-manager';
 import { Profiler } from '@athoscommerce/snap-profiler';
@@ -42,20 +42,6 @@ export class Snapify {
         cntrlr.init();
         return cntrlr;
     }
-    static chat(config) {
-        const id = config.id;
-        if (controllers[id]) {
-            return controllers[id];
-        }
-        const cntrlr = (controllers[id] = createChatController({ client, controller: config }));
-        cntrlr.on('afterStore', async ({ controller }, next) => {
-            controller.log.debug('controller', controller);
-            controller.log.debug('store', controller.store.toJSON());
-            await next();
-        });
-        cntrlr.init();
-        return cntrlr;
-    }
     static search(config) {
         const id = config.id;
         if (controllers[id]) {
@@ -97,19 +83,6 @@ function createRecommendationController(config) {
     });
     return cntrlr;
 }
-function createChatController(config) {
-    const urlManager = new UrlManager(new UrlTranslator(), reactLinker);
-    const cntrlr = new ChatController(config.controller, {
-        client: new Client(config.client.globals, config.client.config),
-        store: new ChatStore({ ...config.controller, siteId: config.client.globals.siteId }, { urlManager }),
-        urlManager,
-        eventManager: new EventManager(),
-        profiler: new Profiler(),
-        logger: new Logger(),
-        tracker: new Tracker(config.client.globals),
-    });
-    return cntrlr;
-}
 function createAutocompleteController(config) {
     const urlManager = new UrlManager(new UrlTranslator(), reactLinker).detach();
     const cntrlr = new AutocompleteController(config.controller, {

package/dist/esm/src/Snap.d.ts

@@ -5,7 +5,7 @@ import { AppMode } from '@athoscommerce/snap-toolbox';
 import { ControllerTypes } from '@athoscommerce/snap-controller';
 import { EventManager } from '@athoscommerce/snap-event-manager';
 import type { ClientConfig, ClientGlobals } from '@athoscommerce/snap-client';
-import type { Controllers, AbstractController, SearchControllerConfig, ChatControllerConfig, AutocompleteControllerConfig, FinderControllerConfig, RecommendationControllerConfig, ControllerConfigs, ContextVariables } from '@athoscommerce/snap-controller';
+import type { Controllers, AbstractController, SearchControllerConfig, AutocompleteControllerConfig, FinderControllerConfig, RecommendationControllerConfig, ControllerConfigs, ContextVariables } from '@athoscommerce/snap-controller';
 import type { TrackerConfig, TrackerGlobals } from '@athoscommerce/snap-tracker';
 import type { Target, OnTarget } from '@athoscommerce/snap-toolbox';
 import type { UrlTranslatorConfig } from '@athoscommerce/snap-url-manager';
@@ -55,7 +55,6 @@ export type SnapConfig = {
     };
     controllers?: {
         search?: SnapConfigControllerDefinition<SearchControllerConfig>[];
-        chat?: SnapConfigControllerDefinition<ChatControllerConfig>[];
         autocomplete?: SnapConfigControllerDefinition<AutocompleteControllerConfig>[];
         finder?: SnapConfigControllerDefinition<FinderControllerConfig>[];
         recommendation?: SnapConfigControllerDefinition<RecommendationControllerConfig>[];