@searchspring/snap-preact-components 0.28.0 → 0.29.0

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

@@ -37,8 +37,7 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(Breadcrumbs, { ...args });
-export const categoryPage = Template.bind({});
+export const categoryPage = (args) => h(Breadcrumbs, { ...args });
 categoryPage.args = {
     data: [
         {
@@ -59,7 +58,7 @@ categoryPage.args = {
     ],
     separator: '/',
 };
-export const SearchPage = Template.bind({});
+export const SearchPage = (args) => h(Breadcrumbs, { ...args });
 SearchPage.args = {
     data: [
         {

package/dist/esm/components/Atoms/Button/Button.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+/** @jsx jsx */
+import { ComponentChildren } from 'preact';
 import { ComponentProps } from '../../../types';
 export declare const Button: ((properties: ButtonProps) => JSX.Element) & {
     displayName: string;
@@ -8,9 +10,9 @@ export interface ButtonProps extends ComponentProps {
     borderColor?: string;
     color?: string;
     content?: string | JSX.Element;
-    children?: any;
+    children?: ComponentChildren;
     disabled?: boolean;
     native?: boolean;
-    onClick?: (e: Event) => void;
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Button/Button.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA6BhD,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAkDnE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC7B"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Button/Button.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA6B5D,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAmDnE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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;CACjE"}

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
@@ -7,13 +9,13 @@ const CSS = {
         display: 'inline-flex',
         padding: '5px 10px',
         position: 'relative',
-        color: color || theme.colors?.primary,
+        color: color || theme?.colors?.primary,
         outline: 0,
         backgroundColor: backgroundColor || '#fff',
-        border: `1px solid ${borderColor || color || theme.colors?.primary || '#333'}`,
+        border: `1px solid ${borderColor || color || theme?.colors?.primary || '#333'}`,
         '&:hover': {
             cursor: 'pointer',
-            backgroundColor: theme.colors?.hover || '#f8f8f8',
+            backgroundColor: theme?.colors?.hover || '#f8f8f8',
         },
         '&.ss__button--disabled': {
             opacity: 0.7,
@@ -56,9 +58,9 @@ export const Button = observer((properties) => {
         disabled,
         onClick: (e) => !disabled && onClick && onClick(e),
     };
-    return ((content || children) && (jsx(CacheProvider, null, native ? (jsx("button", { ...elementProps },
+    return content || children ? (jsx(CacheProvider, null, native ? (jsx("button", { ...elementProps },
         content,
         children)) : (jsx("div", { ...elementProps },
         content,
-        children)))));
+        children)))) : (jsx(Fragment, null));
 });

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { h } from 'preact';
+import { ButtonProps } from './Button';
 declare const _default: {
     title: string;
-    component: ((properties: import("./Button").ButtonProps) => JSX.Element) & {
+    component: ((properties: ButtonProps) => JSX.Element) & {
         displayName: string;
     };
     parameters: {
@@ -163,7 +164,24 @@ 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: ButtonProps): h.JSX.Element;
+    args: {
+        content: string;
+    };
+};
+export declare const Disabled: {
+    (args: ButtonProps): h.JSX.Element;
+    args: {
+        content: string;
+        disabled: boolean;
+    };
+};
+export declare const Native: {
+    (args: ButtonProps): h.JSX.Element;
+    args: {
+        content: string;
+        native: boolean;
+    };
+};
 //# sourceMappingURL=Button.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Button/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ3B,wBA4FE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAKzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAM1C,eAAO,MAAM,MAAM,KAAoB,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Button/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI/C,wBA4FE;AAEF,eAAO,MAAM,OAAO;WAAU,WAAW;;;;CAAyB,CAAC;AAKnE,eAAO,MAAM,QAAQ;WAAU,WAAW;;;;;CAAyB,CAAC;AAMpE,eAAO,MAAM,MAAM;WAAU,WAAW;;;;;CAAyB,CAAC"}

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

@@ -93,17 +93,16 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(Button, { ...args });
-export const Default = Template.bind({});
+export const Default = (args) => h(Button, { ...args });
 Default.args = {
     content: 'Button',
 };
-export const Disabled = Template.bind({});
+export const Disabled = (args) => h(Button, { ...args });
 Disabled.args = {
     content: 'Button',
     disabled: true,
 };
-export const Native = Template.bind({});
+export const Native = (args) => h(Button, { ...args });
 Native.args = {
     content: 'Button',
     native: true,

package/dist/esm/components/Atoms/Dropdown/Dropdown.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+/** @jsx jsx */
+import { ComponentChildren } from 'preact';
 import { ComponentProps } from '../../../types';
 export declare const Dropdown: ((properties: DropdownProps) => JSX.Element) & {
     displayName: string;
@@ -6,12 +8,12 @@ export declare const Dropdown: ((properties: DropdownProps) => JSX.Element) & {
 export interface DropdownProps extends ComponentProps {
     button: string | JSX.Element;
     content?: string | JSX.Element;
-    children?: any;
+    children?: ComponentChildren;
     disabled?: boolean;
     open?: boolean;
     disableOverlay?: boolean;
-    onClick?: (event: Event) => void;
-    onToggle?: (event: Event, showContent: boolean) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onToggle?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, showContent: boolean) => void;
     startOpen?: boolean;
     disableClickOutside?: boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA8BhD,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CAsFvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC9B"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAgB,MAAM,QAAQ,CAAC;AAOzD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA8B5D,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA4FvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,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,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,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,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC9B"}

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

@@ -10,7 +10,7 @@ const CSS = {
         position: 'relative',
         '&.ss__dropdown--open': {
             '& .ss__dropdown__content': {
-                position: disableOverlay ? 'relative' : null,
+                position: disableOverlay ? 'relative' : undefined,
                 visibility: 'visible',
                 opacity: 1,
             },
@@ -48,21 +48,24 @@ export const Dropdown = observer((properties) => {
     else {
         showContent = open;
     }
-    const innerRef = !disableClickOutside &&
-        useClickOutside((e) => {
+    let innerRef;
+    if (!disableClickOutside) {
+        innerRef = useClickOutside((e) => {
             if (showContent) {
                 if (!disabled) {
-                    stateful && setShowContent(false);
+                    stateful && setShowContent && setShowContent(false);
                     onToggle && onToggle(e, false);
                 }
             }
         });
+    }
     const toggleShowContent = (e) => {
         if (stateful) {
-            setShowContent((prev) => {
-                onToggle && onToggle(e, !prev);
-                return !prev;
-            });
+            setShowContent &&
+                setShowContent((prev) => {
+                    onToggle && onToggle(e, !prev);
+                    return !prev;
+                });
         }
     };
     const styling = {};

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { h } from 'preact';
+import { DropdownProps } from './Dropdown';
 declare const _default: {
     title: string;
-    component: ((properties: import("./Dropdown").DropdownProps) => JSX.Element) & {
+    component: ((properties: DropdownProps) => JSX.Element) & {
         displayName: string;
     };
     parameters: {
@@ -187,9 +188,40 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
-export declare const ExternalState: any;
-export declare const JSXContent: any;
-export declare const JSXChildren: any;
-export declare const StringChildren: any;
+export declare const Default: {
+    (args: DropdownProps): h.JSX.Element;
+    args: {
+        button: string;
+        content: string;
+    };
+};
+export declare const ExternalState: {
+    (args: DropdownProps): h.JSX.Element;
+    args: {
+        button: string;
+        content: string;
+        open: boolean;
+    };
+};
+export declare const JSXContent: {
+    (args: DropdownProps): h.JSX.Element;
+    args: {
+        button: string;
+        content: h.JSX.Element;
+    };
+};
+export declare const JSXChildren: {
+    (args: DropdownProps): h.JSX.Element;
+    args: {
+        button: string;
+        content: h.JSX.Element;
+    };
+};
+export declare const StringChildren: {
+    (args: DropdownProps): h.JSX.Element;
+    args: {
+        button: string;
+        content: string;
+    };
+};
 //# sourceMappingURL=Dropdown.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAS3B,wBAgHE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAQzC,eAAO,MAAM,aAAa,KAAqB,CAAC;AAShD,eAAO,MAAM,UAAU,KAAqB,CAAC;AAQ7C,eAAO,MAAM,WAAW,KAAqB,CAAC;AAQ9C,eAAO,MAAM,cAAc,KAAqB,CAAC"}
+{"version":3,"file":"Dropdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBAgHE;AAEF,eAAO,MAAM,OAAO;WAAU,aAAa;;;;;CAA2B,CAAC;AAMvE,eAAO,MAAM,aAAa;WAAU,aAAa;;;;;;CAA2B,CAAC;AAO7E,eAAO,MAAM,UAAU;WAAU,aAAa;;;;;CAA2B,CAAC;AAM1E,eAAO,MAAM,WAAW;WAAU,aAAa;;;;;CAA6D,CAAC;AAM7G,eAAO,MAAM,cAAc;WAAU,aAAa;;;;;CAA6D,CAAC"}

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

@@ -114,33 +114,28 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(Dropdown, { ...args });
-export const Default = Template.bind({});
+export const Default = (args) => h(Dropdown, { ...args });
 Default.args = {
     button: 'button text',
     content: 'content text',
 };
-const Template2 = (args) => h(Dropdown, { ...args });
-export const ExternalState = Template2.bind({});
+export const ExternalState = (args) => h(Dropdown, { ...args });
 ExternalState.args = {
     button: 'button text',
     content: 'content text',
     open: true,
 };
-const Template3 = (args) => h(Dropdown, { ...args });
-export const JSXContent = Template3.bind({});
+export const JSXContent = (args) => h(Dropdown, { ...args });
 JSXContent.args = {
     button: 'button text',
     content: h(Badge, { content: 'jsx content - (note this component receieved the open state as a prop)' }),
 };
-const Template4 = (args) => h(Dropdown, { button: args.button }, args.content);
-export const JSXChildren = Template4.bind({});
+export const JSXChildren = (args) => h(Dropdown, { button: args.button }, args.content);
 JSXChildren.args = {
     button: 'button text',
     content: h(Badge, { content: 'jsx content - (note this component receieved the open state as a prop)' }),
 };
-const Template5 = (args) => h(Dropdown, { button: args.button }, args.content);
-export const StringChildren = Template5.bind({});
+export const StringChildren = (args) => h(Dropdown, { button: args.button }, args.content);
 StringChildren.args = {
     button: 'button text',
     content: 'string content - (note this component receieved the open state as a prop)',

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

@@ -1 +1 @@
-{"version":3,"file":"FormattedNumber.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/FormattedNumber/FormattedNumber.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAMhD,wBAAgB,eAAe,CAAC,UAAU,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CA6C7E;AACD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC3D,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"}
+{"version":3,"file":"FormattedNumber.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/FormattedNumber/FormattedNumber.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAM5D,wBAAgB,eAAe,CAAC,UAAU,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CA8C7E;AACD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC3D,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"}

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

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { FormattedNumber } from './FormattedNumber';
+import { FormattedNumber, FormattedNumberProps } from './FormattedNumber';
 declare const _default: {
     title: string;
     component: typeof FormattedNumber;
@@ -179,7 +179,26 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
-export declare const Temperature: any;
-export declare const Length: any;
+export declare const Default: {
+    (args: FormattedNumberProps): h.JSX.Element;
+    args: {
+        value: number;
+    };
+};
+export declare const Temperature: {
+    (args: FormattedNumberProps): h.JSX.Element;
+    args: {
+        value: number;
+        symbol: string;
+        decimalPlaces: number;
+    };
+};
+export declare const Length: {
+    (args: FormattedNumberProps): h.JSX.Element;
+    args: {
+        value: number;
+        symbol: string;
+        decimalPlaces: number;
+    };
+};
 //# sourceMappingURL=FormattedNumber.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormattedNumber.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/FormattedNumber/FormattedNumber.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIpD,wBAsGE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAKzC,eAAO,MAAM,WAAW,KAAoB,CAAC;AAO7C,eAAO,MAAM,MAAM,KAAoB,CAAC"}
+{"version":3,"file":"FormattedNumber.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/FormattedNumber/FormattedNumber.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI1E,wBAsGE;AAEF,eAAO,MAAM,OAAO;WAAU,oBAAoB;;;;CAAkC,CAAC;AAKrF,eAAO,MAAM,WAAW;WAAU,oBAAoB;;;;;;CAAkC,CAAC;AAOzF,eAAO,MAAM,MAAM;WAAU,oBAAoB;;;;;;CAAkC,CAAC"}

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

@@ -103,18 +103,17 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(FormattedNumber, { ...args });
-export const Default = Template.bind({});
+export const Default = (args) => h(FormattedNumber, { ...args });
 Default.args = {
     value: 1099.99,
 };
-export const Temperature = Template.bind({});
+export const Temperature = (args) => h(FormattedNumber, { ...args });
 Temperature.args = {
     value: 100,
     symbol: ' °C',
     decimalPlaces: 2,
 };
-export const Length = Template.bind({});
+export const Length = (args) => h(FormattedNumber, { ...args });
 Length.args = {
     value: 100,
     symbol: ' mm',

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAY9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAyCvD;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAY9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAyCvD;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB"}

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

@@ -1,10 +1,12 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { useTheme, CacheProvider } from '../../../providers';
 import { iconPaths } from './paths';
 const CSS = {
     icon: ({ color, height, width, size, theme }) => css({
-        fill: color || theme.colors?.primary,
+        fill: color || theme?.colors?.primary,
         width: width || size,
         height: height || size,
         position: 'relative',
@@ -32,7 +34,7 @@ export function Icon(properties) {
     else if (style) {
         styling.css = [style];
     }
-    return (iconPath && (jsx(CacheProvider, null,
-        jsx("svg", { ...styling, className: classnames('ss__icon', icon ? `ss__icon--${icon}` : null, className), viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", width: disableStyles && (width || size), height: disableStyles && (height || size) },
-            jsx("path", { fill: disableStyles && color, d: iconPath })))));
+    return iconPath ? (jsx(CacheProvider, null,
+        jsx("svg", { ...styling, className: classnames('ss__icon', icon ? `ss__icon--${icon}` : null, className), viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", width: disableStyles ? width || size : undefined, height: disableStyles ? height || size : undefined },
+            jsx("path", { fill: disableStyles ? color : undefined, d: iconPath })))) : (jsx(Fragment, null));
 }

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

@@ -1,6 +1,5 @@
 import { h } from 'preact';
-import { Icon } from './Icon';
-import { IconProps } from '../../../types';
+import { Icon, IconProps } from './Icon';
 declare const _default: {
     title: string;
     component: typeof Icon;
@@ -170,7 +169,14 @@ export declare const Custom: {
         size: string;
     };
 };
-export declare const CustomPath: any;
+export declare const CustomPath: {
+    (props: IconProps): JSX.Element;
+    args: {
+        path: string;
+        size: string;
+        viewBox: string;
+    };
+};
 export declare const Gallery: {
     (): JSX.Element;
     parameters: {

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK3C,wBA0FE;AAIF,eAAO,MAAM,OAAO;YAAW,SAAS,GAAG,WAAW;;;;CAAuB,CAAC;AAK9E,eAAO,MAAM,MAAM;YAAW,SAAS,GAAG,WAAW;;;;;;CAAuB,CAAC;AAO7E,eAAO,MAAM,UAAU,KAAoB,CAAC;AAQ5C,eAAO,MAAM,OAAO;QAAO,WAAW;;;;;;;;;;CAarC,CAAC"}
+{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKzC,wBA0FE;AAEF,eAAO,MAAM,OAAO;YAAW,SAAS,GAAG,WAAW;;;;CAAuB,CAAC;AAK9E,eAAO,MAAM,MAAM;YAAW,SAAS,GAAG,WAAW;;;;;;CAAuB,CAAC;AAO7E,eAAO,MAAM,UAAU;YAAW,SAAS,GAAG,WAAW;;;;;;CAAuB,CAAC;AAOjF,eAAO,MAAM,OAAO;QAAO,WAAW;;;;;;;;;;CAarC,CAAC"}

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

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
 import { Icon } from './Icon';
 import { iconPaths } from './paths';
-import { componentArgs } from '../../../utilities';
+import { componentArgs, shiftColor } from '../../../utilities';
 import Readme from '../Icon/readme.md';
 export default {
     title: `Atoms/Icon`,
@@ -92,7 +92,6 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (props) => h(Icon, { ...props });
 export const Default = (props) => h(Icon, { ...props });
 Default.args = {
     icon: 'cogs',
@@ -103,7 +102,7 @@ Custom.args = {
     icon: 'cog',
     size: '60px',
 };
-export const CustomPath = Template.bind({});
+export const CustomPath = (props) => h(Icon, { ...props });
 CustomPath.args = {
     path: 'M12.9,13.8C12.9,13.8,12.9,13.8,12.9,13.8c-0.1,0.1-0.3,0.2-0.5,0.2C4.5,17.9,1.9,28.8,6.6,38.5l28.6-13.8 c0,0,0,0,0,0c0.2-0.1,0.3-0.1,0.5-0.2C43.5,20.6,46.2,9.7,41.5,0L12.9,13.8zM8.6,42.1C8.6,42.1,8.6,42.1,8.6,42.1c-0.1,0.1-0.3,0.1-0.5,0.2C0.3,46.1-2.4,57,2.3,66.7l28.6-13.8 c0,0,0,0,0,0c0.2-0.1,0.3-0.1,0.5-0.2c7.9-3.8,10.5-14.8,5.8-24.4L8.6,42.1z',
     size: '70px',
@@ -125,27 +124,3 @@ Gallery.parameters = {
         showPanel: false,
     },
 };
-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/Atoms/Image/Image.d.ts

@@ -7,11 +7,11 @@ export interface ImageProps extends ComponentProps {
     src: string;
     fallback?: string;
     hoverSrc?: string;
-    onMouseOver?: (e: MouseEvent) => void;
-    onMouseOut?: (e: MouseEvent) => void;
-    onError?: (e: Event) => void;
-    onLoad?: (e: Event) => void;
-    onClick?: (e: MouseEvent) => void;
+    onMouseOver?: (e: React.MouseEvent<HTMLImageElement>) => void;
+    onMouseOut?: (e: React.MouseEvent<HTMLImageElement>) => void;
+    onError?: (e: React.MouseEvent<HTMLImageElement>) => void;
+    onLoad?: (e: React.MouseEvent<HTMLImageElement>) => void;
+    onClick?: (e: React.MouseEvent<HTMLImageElement>) => void;
     lazy?: boolean;
 }
 //# sourceMappingURL=Image.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Image/Image.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,eAAO,MAAM,kBAAkB,6DAA6D,CAAC;AAmB7F,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CA8DzD;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;CACf"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Image/Image.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,eAAO,MAAM,kBAAkB,6DAA6D,CAAC;AAmB7F,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CA8DzD;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,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"}

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

@@ -10,7 +10,7 @@ const CSS = {
         justifyContent: 'center',
         height: 'auto',
         '& img': {
-            visibility,
+            visibility: visibility,
             flexShrink: '0',
             objectFit: 'contain',
             maxWidth: '100%',
@@ -53,7 +53,7 @@ export function Image(properties) {
                     setVisibility('visible');
                     onLoad && onLoad(e);
                 }, onClick: (e) => onClick && onClick(e), onError: (e) => {
-                    e.target.src = fallback;
+                    e.target.src = fallback || '';
                     onError && onError(e);
                 }, onMouseOver: (e) => {
                     hoverSrc && setHover(true);

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

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { Image } from './Image';
+import { Image, ImageProps } from './Image';
 declare const _default: {
     title: string;
     component: typeof Image;
@@ -178,8 +178,34 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
-export declare const BrokenImg: any;
-export declare const ManualFallBack: any;
-export declare const onhover: any;
+export declare const Default: {
+    (args: ImageProps): h.JSX.Element;
+    args: {
+        src: string;
+        alt: string;
+    };
+};
+export declare const BrokenImg: {
+    (args: ImageProps): h.JSX.Element;
+    args: {
+        src: string;
+        alt: string;
+    };
+};
+export declare const ManualFallBack: {
+    (args: ImageProps): h.JSX.Element;
+    args: {
+        src: string;
+        alt: string;
+        fallback: string;
+    };
+};
+export declare const onhover: {
+    (args: ImageProps): h.JSX.Element;
+    args: {
+        src: string;
+        alt: string;
+        hoverSrc: string;
+    };
+};
 //# sourceMappingURL=Image.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,KAAK,EAAsB,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKpD,wBA2HE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAMzC,eAAO,MAAM,SAAS,KAAoB,CAAC;AAM3C,eAAO,MAAM,cAAc,KAAoB,CAAC;AAOhD,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,KAAK,EAAsB,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;;;;;yBAmBtD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA2HE;AAEF,eAAO,MAAM,OAAO;WAAU,UAAU;;;;;CAAkD,CAAC;AAM3F,eAAO,MAAM,SAAS;WAAU,UAAU;;;;;CAAkD,CAAC;AAM7F,eAAO,MAAM,cAAc;WAAU,UAAU;;;;;;CAAkD,CAAC;AAOlG,eAAO,MAAM,OAAO;WAAU,UAAU;;;;;;CAAkD,CAAC"}

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

@@ -120,24 +120,23 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(Image, { ...args, style: { width: '100%' } });
-export const Default = Template.bind({});
+export const Default = (args) => h(Image, { ...args, style: { width: '100%' } });
 Default.args = {
     src: searchResponse.results[6].mappings.core.imageUrl,
     alt: searchResponse.results[6].mappings.core.name,
 };
-export const BrokenImg = Template.bind({});
+export const BrokenImg = (args) => h(Image, { ...args, style: { width: '100%' } });
 BrokenImg.args = {
     src: 'intentionally_broken_image.jpg',
     alt: searchResponse.results[6].mappings.core.name,
 };
-export const ManualFallBack = Template.bind({});
+export const ManualFallBack = (args) => h(Image, { ...args, style: { width: '100%' } });
 ManualFallBack.args = {
     src: 'intentionally_broken_image.jpg',
     alt: searchResponse.results[5].mappings.core.name,
     fallback: searchResponse.results[5].mappings.core.imageUrl,
 };
-export const onhover = Template.bind({});
+export const onhover = (args) => h(Image, { ...args, style: { width: '100%' } });
 onhover.args = {
     src: searchResponse.results[6].mappings.core.imageUrl,
     alt: searchResponse.results[6].mappings.core.name,