@searchspring/snap-preact-components 0.27.7 → 0.29.0

package/dist/esm/components/Atoms/Merchandising/InlineBanner.stories.js

@@ -17,11 +17,11 @@ export default {
     },
     argTypes: {
         banner: {
-            description: 'InlineBanner content store reference',
+            description: 'Banner object reference',
             type: { required: true },
             table: {
                 type: {
-                    summary: 'inline banner content store object',
+                    summary: 'inline banner store object',
                 },
             },
             control: { type: 'none' },
@@ -69,11 +69,10 @@ export default {
     ],
 };
 const snapInstance = Snapify.search({ id: 'InlineBanner', globals: { siteId: '8uyt2m', search: { query: { string: 'glasses' } } } });
-const Template = (args, { loaded: { controller } }) => {
-    const inlineBanners = controller?.store?.merchandising?.content?.inline;
-    return inlineBanners && h(InlineBanner, { banner: inlineBanners[0], ...args });
+export const Default = (args, { loaded: { controller } }) => {
+    const inlineBanners = controller?.store?.results?.filter((result) => result.type === 'banner').pop();
+    return inlineBanners && h(InlineBanner, { ...args, banner: inlineBanners });
 };
-export const Default = Template.bind({});
 Default.loaders = [
     async () => {
         await snapInstance.search();

package/dist/esm/components/Atoms/Overlay/Overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Overlay/Overlay.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAqBhD,wBAAgB,OAAO,CAAC,UAAU,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CA+B7D;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc;IACnD,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;CAC/D"}
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Overlay/Overlay.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAoB5D,wBAAgB,OAAO,CAAC,UAAU,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CA+B7D;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc;IACnD,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;CAC/D"}

package/dist/esm/components/Atoms/Overlay/Overlay.js

@@ -2,9 +2,7 @@ import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { useTheme, CacheProvider } from '../../../providers';
 const CSS = {
-    overlay: ({ color, transitionSpeed }) => 
-    //@ts-ignore
-    css({
+    overlay: ({ color, transitionSpeed }) => css({
         transition: `background ${transitionSpeed} ease 0s, left 0s ease ${transitionSpeed}`,
         position: 'fixed',
         zIndex: '10003',

package/dist/esm/components/Atoms/Overlay/Overlay.stories.d.ts

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { Overlay } from './Overlay';
+import { Overlay, OverlayProps } from './Overlay';
 declare const _default: {
     title: string;
     component: typeof Overlay;
@@ -119,5 +119,10 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
+export declare const Default: {
+    (args: OverlayProps): h.JSX.Element;
+    args: {
+        active: boolean;
+    };
+};
 //# sourceMappingURL=Overlay.stories.d.ts.map

package/dist/esm/components/Atoms/Overlay/Overlay.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Overlay/Overlay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIpC,wBA4DE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"Overlay.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Overlay/Overlay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIlD,wBA4DE;AAEF,eAAO,MAAM,OAAO;WAAU,YAAY;;;;CAA0B,CAAC"}

package/dist/esm/components/Atoms/Overlay/Overlay.stories.js

@@ -61,8 +61,7 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(Overlay, { ...args });
-export const Default = Template.bind({});
+export const Default = (args) => h(Overlay, { ...args });
 Default.args = {
     active: true,
 };

package/dist/esm/components/Atoms/Price/Price.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Price.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Price/Price.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAa1E,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CA4DzD;AAED,MAAM,WAAW,UAAW,SAAQ,oBAAoB;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}
+{"version":3,"file":"Price.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Price/Price.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAc1E,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CA4DzD;AAED,MAAM,WAAW,UAAW,SAAQ,oBAAoB;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/esm/components/Atoms/Price/Price.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import { useTheme, CacheProvider } from '../../../providers';
 const CSS = {
     price: ({ theme }) => css({
-        color: theme.colors?.primary,
+        color: theme?.colors?.primary,
         '&.ss__price--strike': {
             textDecoration: 'line-through',
             color: 'initial',

package/dist/esm/components/Atoms/Price/Price.stories.d.ts

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { Price } from './Price';
+import { Price, PriceProps } from './Price';
 declare const _default: {
     title: string;
     component: typeof Price;
@@ -197,7 +197,27 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
-export declare const lineThrough: any;
-export declare const CustomCurrency: any;
+export declare const Default: {
+    (args: PriceProps): h.JSX.Element;
+    args: {
+        value: number;
+    };
+};
+export declare const lineThrough: {
+    (args: PriceProps): h.JSX.Element;
+    args: {
+        value: number;
+        lineThrough: boolean;
+    };
+};
+export declare const CustomCurrency: {
+    (args: PriceProps): h.JSX.Element;
+    args: {
+        value: number;
+        symbol: string;
+        thousandsSeparator: string;
+        decimalSeparator: string;
+        symbolAfter: boolean;
+    };
+};
 //# sourceMappingURL=Price.stories.d.ts.map

package/dist/esm/components/Atoms/Price/Price.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Price.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Price/Price.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIhC,wBAoHE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAKzC,eAAO,MAAM,WAAW,KAAoB,CAAC;AAM7C,eAAO,MAAM,cAAc,KAAoB,CAAC"}
+{"version":3,"file":"Price.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Price/Price.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI5C,wBAoHE;AAEF,eAAO,MAAM,OAAO;WAAU,UAAU;;;;CAAwB,CAAC;AAKjE,eAAO,MAAM,WAAW;WAAU,UAAU;;;;;CAAwB,CAAC;AAMrE,eAAO,MAAM,cAAc;WAAU,UAAU;;;;;;;;CAAwB,CAAC"}

package/dist/esm/components/Atoms/Price/Price.stories.js

@@ -117,17 +117,16 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(Price, { ...args });
-export const Default = Template.bind({});
+export const Default = (args) => h(Price, { ...args });
 Default.args = {
     value: 1099.99,
 };
-export const lineThrough = Template.bind({});
+export const lineThrough = (args) => h(Price, { ...args });
 lineThrough.args = {
     value: 1199.99,
     lineThrough: true,
 };
-export const CustomCurrency = Template.bind({});
+export const CustomCurrency = (args) => h(Price, { ...args });
 CustomCurrency.args = {
     value: 999.99,
     symbol: ' €',

package/dist/esm/components/Atoms/Skeleton/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA0ChD,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA0BvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAyC5D,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA0BvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/esm/components/Atoms/Skeleton/Skeleton.stories.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 /** @jsx h */
 import { h } from 'preact';
+import { SkeletonProps } from './Skeleton';
 declare const _default: {
     title: string;
-    component: ((properties: import("./Skeleton").SkeletonProps) => JSX.Element) & {
+    component: ((properties: SkeletonProps) => JSX.Element) & {
         displayName: string;
     };
     parameters: {
@@ -137,9 +138,15 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
+export declare const Default: {
+    (args: SkeletonProps): h.JSX.Element;
+    args: {
+        width: string;
+        height: string;
+    };
+};
 export declare const Circle: {
-    (args: any): h.JSX.Element;
+    (args: SkeletonProps): h.JSX.Element;
     args: {
         width: string;
         height: string;

package/dist/esm/components/Atoms/Skeleton/Skeleton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":";AAAA,aAAa;AACb,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ3B,wBAiFE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAMzC,eAAO,MAAM,MAAM;;;;;;;CAAmC,CAAC"}
+{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":";AAAA,aAAa;AACb,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;yBAiB3C,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAiFE;AAEF,eAAO,MAAM,OAAO;WAAU,aAAa;;;;;CAA2B,CAAC;AAMvE,eAAO,MAAM,MAAM;WAAU,aAAa;;;;;;CAA2B,CAAC"}

package/dist/esm/components/Atoms/Skeleton/Skeleton.stories.js

@@ -78,8 +78,7 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(Skeleton, { ...args });
-export const Default = Template.bind({});
+export const Default = (args) => h(Skeleton, { ...args });
 Default.args = {
     width: '100px',
     height: '100px',

package/dist/esm/components/Molecules/Carousel/Carousel.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import SwiperCore from 'swiper/core';
 import { ComponentProps, BreakpointsProps } from '../../../types';
 export declare const defaultCarouselBreakpoints: {
     0: {
@@ -46,10 +47,10 @@ export interface CarouselProps extends ComponentProps {
     vertical?: boolean;
     pagination?: boolean;
     autoAdjustSlides?: boolean;
-    onClick?: (swiper: any, e: any) => void;
-    onNextButtonClick?: (e: any) => void;
-    onPrevButtonClick?: (e: any) => void;
-    onInit?: (swiper: any) => void;
-    children?: JSX.Element[];
+    onClick?: (swiper: SwiperCore, e: MouseEvent | TouchEvent | PointerEvent) => void;
+    onNextButtonClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onPrevButtonClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onInit?: (swiper: SwiperCore) => void;
+    children: JSX.Element[];
 }
 //# sourceMappingURL=Carousel.d.ts.map

package/dist/esm/components/Molecules/Carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA8HlE,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA8IvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,KAAA,EAAE,CAAC,KAAA,KAAK,IAAI,CAAC;IAC9B,iBAAiB,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACzB"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAQA,OAAO,UAAsC,MAAM,aAAa,CAAC;AAMjE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AA8H9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CAgJvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IAClF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACxB"}

package/dist/esm/components/Molecules/Carousel/Carousel.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
 import { useRef } from 'preact/hooks';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
@@ -13,7 +15,7 @@ const CSS = {
     carousel: ({ theme, vertical }) => css({
         display: 'flex',
         maxWidth: '100%',
-        maxHeight: vertical ? '100%' : null,
+        maxHeight: vertical ? '100%' : undefined,
         margin: 0,
         padding: 0,
         overflow: 'hidden',
@@ -68,7 +70,7 @@ const CSS = {
             overflow: 'hidden',
             listStyle: 'none',
             padding: 0,
-            zIndex: 1,
+            zIndex: '1',
         },
         '.swiper-container-vertical': {
             '.swiper-wrapper': {
@@ -80,7 +82,7 @@ const CSS = {
             position: 'relative',
             width: '100%',
             height: '100%',
-            zIndex: 1,
+            zIndex: '1',
             display: 'flex',
             transitionProperty: 'transform',
             boxSizing: 'content-box',
@@ -164,7 +166,9 @@ export const Carousel = observer((properties) => {
     const theme = { ...globalTheme, ...properties.theme };
     let props = {
         // default props
-        breakpoints: properties.vertical ? defaultVerticalCarouselBreakpoints : defaultCarouselBreakpoints,
+        breakpoints: properties.vertical
+            ? JSON.parse(JSON.stringify(defaultVerticalCarouselBreakpoints))
+            : JSON.parse(JSON.stringify(defaultCarouselBreakpoints)),
         pagination: false,
         loop: true,
         autoAdjustSlides: true,
@@ -214,7 +218,7 @@ export const Carousel = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return (children && (jsx(CacheProvider, null,
+    return children?.length ? (jsx(CacheProvider, null,
         jsx("div", { ref: rootComponentRef, ...styling, className: classnames('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className) },
             jsx("div", { className: classnames('ss__carousel__prev-wrapper', { 'ss__carousel__prev-wrapper--hidden': hideButtons }) },
                 jsx("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && ((e) => onPrevButtonClick(e)) }, prevButton || jsx(Icon, { icon: vertical ? 'angle-up' : 'angle-left', ...subProps.icon }))),
@@ -236,5 +240,5 @@ export const Carousel = observer((properties) => {
                 return jsx(SwiperSlide, null, child);
             })),
             jsx("div", { className: classnames('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }) },
-                jsx("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && ((e) => onNextButtonClick(e)) }, nextButton || jsx(Icon, { icon: vertical ? 'angle-down' : 'angle-right', ...subProps.icon })))))));
+                jsx("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && ((e) => onNextButtonClick(e)) }, nextButton || jsx(Icon, { icon: vertical ? 'angle-down' : 'angle-right', ...subProps.icon })))))) : (jsx(Fragment, null));
 });

package/dist/esm/components/Molecules/Carousel/Carousel.stories.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { h } from 'preact';
+import { CarouselProps } from './Carousel';
 declare const _default: {
     title: string;
-    component: ((properties: import("./Carousel").CarouselProps) => JSX.Element) & {
+    component: ((properties: CarouselProps) => JSX.Element) & {
         displayName: string;
     };
     parameters: {
@@ -146,7 +147,7 @@ declare const _default: {
             };
         };
         breakpoints: {
-            defaultValue: any;
+            defaultValue: undefined;
             description: string;
             table: {
                 type: {
@@ -215,12 +216,12 @@ declare const _default: {
 };
 export default _default;
 export declare const Colors: {
-    (props: any): h.JSX.Element;
+    (props: CarouselProps): h.JSX.Element;
     args: {
         pagination: boolean;
         hideButtons: boolean;
         loop: boolean;
     };
 };
-export declare const Icons: (props: any) => h.JSX.Element;
+export declare const Icons: (props: CarouselProps) => h.JSX.Element;
 //# sourceMappingURL=Carousel.stories.d.ts.map

package/dist/esm/components/Molecules/Carousel/Carousel.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASrC,wBAqJE;AAGF,eAAO,MAAM,MAAM;;;;;;;CAQlB,CAAC;AAOF,eAAO,MAAM,KAAK,+BAajB,CAAC"}
+{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,CAAC,EAAE,MAAM,QAAQ,CAAC;AAIrC,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;yBAmB3C,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAqJE;AAIF,eAAO,MAAM,MAAM;YAAW,aAAa;;;;;;CAQ1C,CAAC;AAOF,eAAO,MAAM,KAAK,UAAW,aAAa,kBAazC,CAAC"}

package/dist/esm/components/Molecules/Carousel/Carousel.stories.js

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
 import { Carousel } from './Carousel';
 import { Icon, iconPaths } from '../../Atoms/Icon';
-import { componentArgs } from '../../../utilities';
+import { componentArgs, shiftColor } from '../../../utilities';
 import Readme from './readme.md';
 export default {
     title: `Molecules/Carousel`,
@@ -161,27 +161,3 @@ export const Icons = (props) => {
             h("div", { style: "text-align: center" }, icon)));
     })));
 };
-function shiftColor(base, change) {
-    const colorRegEx = /^\#?[A-Fa-f0-9]{6}$/;
-    if (!base || !change) {
-        return '#000000';
-    }
-    if (!base.match(colorRegEx) || !change.match(colorRegEx)) {
-        return '#000000';
-    }
-    // remove '#'s
-    base = base.replace(/\#/g, '');
-    change = change.replace(/\#/g, '');
-    let newColor = '';
-    for (let i = 0; i < 3; i++) {
-        const basePiece = parseInt(base.substring(i * 2, i * 2 + 2), 16);
-        const changePiece = parseInt(change.substring(i * 2, i * 2 + 2), 16);
-        let newPiece;
-        newPiece = basePiece + changePiece;
-        newPiece = newPiece > 255 ? 255 : newPiece;
-        newPiece = newPiece.toString(16);
-        newPiece = newPiece.length < 2 ? '0' + newPiece : newPiece;
-        newColor += newPiece;
-    }
-    return `#${newColor}`;
-}

package/dist/esm/components/Molecules/Checkbox/Checkbox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentProps } from '../../../types';
 export declare const Checkbox: ((properties: CheckboxProps) => JSX.Element) & {
     displayName: string;
@@ -8,7 +9,7 @@ export interface CheckboxProps extends ComponentProps {
     disabled?: boolean;
     icon?: string;
     iconColor?: string;
-    onClick?: (e: Event) => void;
+    onClick?: (e: React.MouseEvent<HTMLInputElement | HTMLSpanElement, MouseEvent>) => void;
     size?: string;
     startChecked?: boolean;
     native?: boolean;

package/dist/esm/components/Molecules/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA0BhD,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CAqFvE,CAAC;AAKH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA0B5D,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CAuFvE,CAAC;AAKH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB"}

package/dist/esm/components/Molecules/Checkbox/Checkbox.js

@@ -12,7 +12,7 @@ const CSS = {
         justifyContent: 'center',
         height: size,
         width: size,
-        border: `1px solid ${color || theme.colors?.primary || '#333'}`,
+        border: `1px solid ${color || theme?.colors?.primary || '#333'}`,
         '&.ss__checkbox--disabled': {
             opacity: 0.7,
         },
@@ -47,7 +47,7 @@ export const Checkbox = observer((properties) => {
             ...globalTheme?.components?.icon,
             // inherited props
             ...defined({
-                color: iconColor || color || theme.colors?.primary,
+                color: iconColor || color || theme?.colors?.primary,
                 disableStyles,
                 icon,
                 size: size && `calc(${size} - 30%)`,
@@ -67,9 +67,10 @@ export const Checkbox = observer((properties) => {
     const clickFunc = (e) => {
         if (!disabled) {
             if (stateful) {
-                setCheckedState((prev) => {
-                    return !prev;
-                });
+                setCheckedState &&
+                    setCheckedState((prev) => {
+                        return !prev;
+                    });
             }
             onClick && onClick(e);
         }

package/dist/esm/components/Molecules/Checkbox/Checkbox.stories.d.ts

@@ -190,7 +190,18 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
-export declare const Disabled: any;
-export declare const Native: any;
+export declare const Default: (args: CheckboxProps) => h.JSX.Element;
+export declare const Disabled: {
+    (args: CheckboxProps): h.JSX.Element;
+    args: {
+        checked: boolean;
+        disabled: boolean;
+    };
+};
+export declare const Native: {
+    (args: CheckboxProps): h.JSX.Element;
+    args: {
+        native: boolean;
+    };
+};
 //# sourceMappingURL=Checkbox.stories.d.ts.map

package/dist/esm/components/Molecules/Checkbox/Checkbox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBA8GE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAEzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAM1C,eAAO,MAAM,MAAM,KAAoB,CAAC"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBA8GE;AAEF,eAAO,MAAM,OAAO,SAAU,aAAa,kBAA2B,CAAC;AAEvE,eAAO,MAAM,QAAQ;WAAU,aAAa;;;;;CAA2B,CAAC;AAMxE,eAAO,MAAM,MAAM;WAAU,aAAa;;;;CAA2B,CAAC"}

package/dist/esm/components/Molecules/Checkbox/Checkbox.stories.js

@@ -112,14 +112,13 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(Checkbox, { ...args });
-export const Default = Template.bind({});
-export const Disabled = Template.bind({});
+export const Default = (args) => h(Checkbox, { ...args });
+export const Disabled = (args) => h(Checkbox, { ...args });
 Disabled.args = {
     checked: true,
     disabled: true,
 };
-export const Native = Template.bind({});
+export const Native = (args) => h(Checkbox, { ...args });
 Native.args = {
     native: true,
 };

package/dist/esm/components/Molecules/ErrorHandler/ErrorHandler.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentProps } from '../../../types';
 import { ErrorType } from '@searchspring/snap-store-mobx';
 import type { AbstractController } from '@searchspring/snap-controller';
@@ -6,11 +7,11 @@ export declare const ErrorHandler: ((properties: ErrorHandlerProps) => JSX.Eleme
 };
 export interface ErrorHandlerProps extends ComponentProps {
     controller?: AbstractController;
-    error?: {
+    error: {
         code?: number;
         type: ErrorType;
         message: string;
     };
-    onRetryClick?: (e: Event) => void;
+    onRetryClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
 //# sourceMappingURL=ErrorHandler.d.ts.map

package/dist/esm/components/Molecules/ErrorHandler/ErrorHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorHandler.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/ErrorHandler/ErrorHandler.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAgExE,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAmG/E,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,KAAK,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,SAAS,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC"}
+{"version":3,"file":"ErrorHandler.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/ErrorHandler/ErrorHandler.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAgExE,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAkG/E,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,KAAK,EAAE;QACN,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,SAAS,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACtE"}

package/dist/esm/components/Molecules/ErrorHandler/ErrorHandler.js

@@ -27,7 +27,7 @@ const CSS = {
         '& .ss__error-handler__button': {
             backgroundColor: 'white',
             color: 'inherit',
-            borderColor: theme.colors?.primary,
+            borderColor: theme?.colors?.primary,
             width: ['150px', 'fit-content'],
             margin: '5px 10px',
             '.ss__icon': {
@@ -35,30 +35,30 @@ const CSS = {
             },
         },
         '&.ss__error-handler--error': {
-            backgroundColor: LightenDarkenColor(theme.colors?.message?.error || 'red', 180),
-            borderLeftColor: theme.colors?.message?.error || '#ff0000',
+            backgroundColor: LightenDarkenColor(theme?.colors?.message?.error || 'red', 180),
+            borderLeftColor: theme?.colors?.message?.error || '#ff0000',
             '.ss__error-handler__message': {
                 '.ss__icon': {
-                    fill: theme.colors?.message?.error || '#ff0000',
+                    fill: theme?.colors?.message?.error || '#ff0000',
                 },
             },
         },
         '&.ss__error-handler--warning': {
-            backgroundColor: LightenDarkenColor(theme.colors?.message?.warning || 'yellow', 180),
-            borderLeftColor: theme.colors?.message?.warning || '#ffff00',
+            backgroundColor: LightenDarkenColor(theme?.colors?.message?.warning || 'yellow', 180),
+            borderLeftColor: theme?.colors?.message?.warning || '#ffff00',
             '.ss__icon': {
-                fill: theme.colors?.message?.warning || '#ffff00',
+                fill: theme?.colors?.message?.warning || '#ffff00',
             },
             '.ss__error-handler__button': {
-                borderColor: theme.colors?.message?.warning || '#ffff00',
+                borderColor: theme?.colors?.message?.warning || '#ffff00',
             },
         },
         '&.ss__error-handler--info': {
-            backgroundColor: LightenDarkenColor(theme.colors?.message?.info || 'blue', 180),
-            borderLeftColor: theme.colors?.message?.info || '#0000ff',
+            backgroundColor: LightenDarkenColor(theme?.colors?.message?.info || 'blue', 180),
+            borderLeftColor: theme?.colors?.message?.info || '#0000ff',
             '.ss__error-handler__message': {
                 '.ss__icon': {
-                    fill: theme.colors?.message?.info || '#0000ff',
+                    fill: theme?.colors?.message?.info || '#0000ff',
                 },
             },
         },
@@ -109,8 +109,7 @@ export const ErrorHandler = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return (Object.values(ErrorType).includes(errorObject?.type) &&
-        errorObject?.message && (jsx(CacheProvider, null,
+    return Object.values(ErrorType).includes(errorObject?.type) && errorObject?.message ? (jsx(CacheProvider, null,
         jsx("div", { className: classnames('ss__error-handler', `ss__error-handler--${errorObject.type}`, className), ...styling }, (() => {
             switch (errorObject.type) {
                 case ErrorType.WARNING:
@@ -135,5 +134,5 @@ export const ErrorHandler = observer((properties) => {
                         jsx("b", null, "Info:\u00A0"),
                         errorObject.message));
             }
-        })()))));
+        })()))) : (jsx(Fragment, null));
 });