@searchspring/snap-preact-components 0.27.7 → 0.29.0

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

@@ -0,0 +1,65 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { defined } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    searchInput: ({ theme }) => css({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: `1px solid ${theme?.colors?.primary || '#ccc'}`,
+        '& .ss__icon': {
+            padding: '5px',
+        },
+        '& .ss__search-input__input': {
+            width: '100%',
+            outline: 'none',
+            border: '0',
+            boxSizing: 'border-box',
+        },
+    }),
+};
+export const SearchInput = observer((properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    let props = {
+        // default props
+        placeholder: 'Search',
+        hideIcon: false,
+        // global theme
+        ...globalTheme?.components?.searchInput,
+        //props
+        ...properties,
+        ...properties.theme?.components?.searchInput,
+    };
+    const { placeholder, onChange, hideIcon, disableStyles, style, className } = props;
+    const subProps = {
+        icon: {
+            // default props
+            className: 'ss__search-input__icon',
+            // global theme
+            ...globalTheme?.components?.icon,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+        },
+    };
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.searchInput({ theme }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__search-input', className) },
+            !hideIcon && jsx(Icon, { ...subProps.icon, icon: "search" }),
+            jsx("input", { type: "text", className: "ss__search-input__input", onChange: (e) => {
+                    onChange && onChange(e);
+                }, placeholder: placeholder }))));
+});

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

@@ -0,0 +1,109 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { SearchInputProps } from './SearchInput';
+declare const _default: {
+    title: string;
+    component: ((properties: SearchInputProps) => JSX.Element) & {
+        displayName: string;
+    };
+    parameters: {
+        docs: {
+            page: () => h.JSX.Element;
+        };
+    };
+    decorators: ((Story: any) => h.JSX.Element)[];
+    argTypes: {
+        className: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableStyles: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        style: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        theme: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        onChange: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        hideIcon: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        placeholder: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: SearchInputProps) => h.JSX.Element;
+//# sourceMappingURL=SearchInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;yBAkBpD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA0DE;AACF,eAAO,MAAM,OAAO,SAAU,gBAAgB,kBAA8B,CAAC"}

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

@@ -0,0 +1,57 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { SearchInput } from './SearchInput';
+import { componentArgs } from '../../../utilities';
+import Readme from './readme.md';
+export default {
+    title: `Molecules/SearchInput`,
+    component: SearchInput,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    decorators: [
+        (Story) => (h("div", { style: {
+                maxWidth: '900px',
+                height: '300px',
+            } },
+            h(Story, null))),
+    ],
+    argTypes: {
+        onChange: {
+            description: 'Onchange Callback',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onChange',
+        },
+        hideIcon: {
+            description: 'Hides icon',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        placeholder: {
+            defaultValue: 'Search',
+            description: 'Display placeholder text',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'Search' },
+            },
+            control: { type: 'text' },
+        },
+        ...componentArgs,
+    },
+};
+export const Default = (args) => h(SearchInput, { ...args });

package/dist/esm/components/Molecules/SearchInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SearchInput';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Molecules/SearchInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/SearchInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/esm/components/Molecules/SearchInput/index.js

@@ -0,0 +1 @@
+export * from './SearchInput';

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

@@ -23,7 +23,7 @@ export interface SelectProps extends ComponentProps {
     iconOpen?: IconType | string;
     label?: string | JSX.Element;
     native?: boolean;
-    onSelect?: (e: Event, option: Option) => void;
+    onSelect?: (e: React.ChangeEvent<HTMLSelectElement>, option: Option | undefined) => void;
     selected?: Option;
     separator?: string | JSX.Element;
     startOpen?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Select/Select.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAmB,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyC7D,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAuNnE,CAAC;AAQH,oBAAY,MAAM,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC,YAAY,EAAE,MAAM,GAAG,GAAG,CAAC;CAC5B,CAAC;AACF,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC9B"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Select/Select.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,OAAO,EAAmB,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAwC7D,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAqNnE,CAAC;AAQH,oBAAY,MAAM,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC,YAAY,EAAE,MAAM,GAAG,GAAG,CAAC;CAC5B,CAAC;AACF,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACzF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC9B"}

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

@@ -10,9 +10,7 @@ import { Dropdown } from '../../Atoms/Dropdown';
 import { Button } from '../../Atoms/Button';
 import { Icon } from '../../Atoms/Icon';
 const CSS = {
-    select: ({ color, backgroundColor, borderColor, label, selection, theme }) => 
-    //@ts-ignore
-    css({
+    select: ({ color, backgroundColor, borderColor, theme }) => css({
         display: 'inline-flex',
         color: color,
         '&.ss__select--disabled': {
@@ -31,7 +29,7 @@ const CSS = {
             listStyle: 'none',
             padding: '0',
             marginTop: '-1px',
-            border: `1px solid ${borderColor || color || theme.colors?.primary || '#333'}`,
+            border: `1px solid ${borderColor || color || theme?.colors?.primary || '#333'}`,
             '& .ss__select__select__option': {
                 cursor: 'pointer',
                 padding: '6px 8px',
@@ -40,7 +38,7 @@ const CSS = {
                     fontWeight: 'bold',
                 },
                 '&:hover': {
-                    backgroundColor: theme.colors?.hover || '#f8f8f8',
+                    backgroundColor: theme?.colors?.hover || '#f8f8f8',
                 },
             },
         },
@@ -75,7 +73,7 @@ export const Select = observer((properties) => {
                 disabled,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
         button: {
             // default props
@@ -91,7 +89,7 @@ export const Select = observer((properties) => {
                 borderColor,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
         icon: {
             // default props
@@ -105,14 +103,14 @@ export const Select = observer((properties) => {
                 size: '14px',
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
     };
     // only single selection support for now
     let selection = selected;
     let setSelection;
     // open state
-    const [open, setOpen] = useState(startOpen);
+    const [open, setOpen] = useState(Boolean(startOpen));
     // selection state
     const stateful = selection === undefined;
     if (stateful) {
@@ -131,7 +129,7 @@ export const Select = observer((properties) => {
         ];
     }
     const makeSelection = (e, option) => {
-        option = option.value ? option : undefined;
+        option = option?.value ? option : undefined;
         if (option != selection) {
             onSelect && onSelect(e, option);
         }
@@ -146,15 +144,13 @@ export const Select = observer((properties) => {
             styling.css = [CSS.native(), style];
         }
         else {
-            styling.css = [CSS.select({ color, backgroundColor, borderColor, label, selection: selection || '', theme }), style];
+            styling.css = [CSS.select({ color, backgroundColor, borderColor, theme }), style];
         }
     }
     else if (style) {
         styling.css = [style];
     }
-    return (options &&
-        (typeof options == 'object' || Array.isArray(options)) &&
-        options.length && (jsx(CacheProvider, null,
+    return Array.isArray(options) && options.length ? (jsx(CacheProvider, null,
         jsx("div", { ...styling, className: classnames('ss__select', { 'ss__select--disabled': disabled }, className) }, native ? (jsx(Fragment, null,
             label && !hideLabelOnSelection && (jsx("span", { className: "ss__select__label" },
                 label,
@@ -179,5 +175,5 @@ export const Select = observer((properties) => {
             jsx("ul", { className: "ss__select__select" }, options.map((option) => (jsx("li", { className: classnames('ss__select__select__option', {
                     'ss__select__select__option--selected': selection?.value === option.value,
                 }), onClick: (e) => !disabled && makeSelection(e, option) },
-                jsx("span", null, option.label)))))))))));
+                jsx("span", null, option.label)))))))))) : (jsx(Fragment, null));
 });

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { h } from 'preact';
 import { SelectProps } from './Select';
+import type { SearchController } from '@searchspring/snap-controller';
 declare const _default: {
     title: string;
     component: ((properties: SelectProps) => JSX.Element) & {
@@ -310,6 +311,31 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
-export declare const Native: any;
+export declare const Default: {
+    (args: SelectProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+    args: {
+        label: string;
+    };
+};
+export declare const Native: {
+    (args: SelectProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+    args: {
+        label: string;
+        native: boolean;
+    };
+};
 //# sourceMappingURL=Select.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Select/Select.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM/C,wBA4ME;AAqBF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAazC,eAAO,MAAM,MAAM,KAAoB,CAAC"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Select/Select.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAK/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEtE,wBA4ME;AAiBF,eAAO,MAAM,OAAO;WAAU,WAAW;;wBAAsD,gBAAgB;;;;;;;;;CAE9G,CAAC;AAcF,eAAO,MAAM,MAAM;WAAU,WAAW;;wBAAsD,gBAAgB;;;;;;;;;;CAE7G,CAAC"}

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

@@ -214,10 +214,9 @@ const ObservableSelect = observer(({ args, controller }) => {
             selectedOption && selectedOption.url.go();
         } }));
 });
-const Template = (args, { loaded: { controller } }) => {
+export const Default = (args, { loaded: { controller } }) => {
     return h(ObservableSelect, { args: args, controller: controller });
 };
-export const Default = Template.bind({});
 Default.loaders = [
     async () => {
         await snapInstance.search();
@@ -229,7 +228,9 @@ Default.loaders = [
 Default.args = {
     label: 'Sort By',
 };
-export const Native = Template.bind({});
+export const Native = (args, { loaded: { controller } }) => {
+    return h(ObservableSelect, { args: args, controller: controller });
+};
 Native.loaders = [
     async () => {
         await snapInstance.search();

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+/** @jsx jsx */
+import { ComponentChildren } from 'preact';
 import { ComponentProps } from '../../../types';
 export declare function Slideout(properties: SlideoutProps): JSX.Element;
 export interface SlideoutProps extends ComponentProps {
-    children?: JSX.Element;
+    children?: ComponentChildren;
     active: boolean;
     buttonContent?: string | JSX.Element;
     width?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAyBhD,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAuE/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED,oBAAY,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAyB5D,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAyE/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED,oBAAY,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
 import { useState } from 'preact/hooks';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
@@ -28,7 +30,6 @@ export function Slideout(properties) {
     const globalTheme = useTheme();
     const props = {
         // default props
-        active: false,
         displayAt: '',
         slideDirection: 'left',
         width: '300px',
@@ -55,7 +56,7 @@ export function Slideout(properties) {
                 transitionSpeed,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
     };
     // state
@@ -64,7 +65,7 @@ export function Slideout(properties) {
         setActive(!isActive);
         document.body.style.overflow = isActive ? 'hidden' : '';
     };
-    const isVisible = useMediaQuery(displayAt, () => {
+    let isVisible = useMediaQuery(displayAt, () => {
         document.body.style.overflow = '';
     });
     document.body.style.overflow = isVisible && isActive ? 'hidden' : '';
@@ -75,8 +76,8 @@ export function Slideout(properties) {
     else if (style) {
         styling.css = [style];
     }
-    return (isVisible && (jsx(CacheProvider, null,
+    return isVisible ? (jsx(CacheProvider, null,
         buttonContent && (jsx("div", { className: "ss__slideout__button", onClick: () => toggleActive() }, buttonContent)),
         jsx("div", { className: classnames('ss__slideout', className, { 'ss__slideout--active': isActive }), ...styling }, cloneWithProps(children, { toggleActive, active: isActive })),
-        jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: toggleActive }))));
+        jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: toggleActive }))) : (jsx(Fragment, null));
 }

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Slideout.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIrD,wBA6FE;AAQF,eAAO,MAAM,OAAO,KAAuB,CAAC"}
+{"version":3,"file":"Slideout.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIrD,wBA6FE;AAEF,eAAO,MAAM,OAAO;WAAU,aAAa;;;;CAI1C,CAAC"}

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

@@ -94,9 +94,8 @@ export default {
         ...componentArgs,
     },
 };
-const _HelloWorld = (args) => (h(Slideout, { ...args },
+export const Default = (args) => (h(Slideout, { ...args },
     h("div", null, "props.children will be rendered here")));
-export const Default = _HelloWorld.bind({});
 Default.args = {
     active: true,
 };

package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts

@@ -27,7 +27,7 @@ export interface AutocompleteProps extends ComponentProps {
     breakpoints?: BreakpointsProps;
     controller: AutocompleteController;
     width?: string;
-    onFacetOptionClick?: (e: any) => void;
-    onTermClick?: (e: any) => void;
+    onFacetOptionClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    onTermClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 }
 //# sourceMappingURL=Autocomplete.d.ts.map

package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAQ5E,OAAO,EAAc,cAAc,EAAgB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA2J5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAyX/E,CAAC;AAkCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;CAC1B"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAS5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAmJ5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CA0X/E,CAAC;AAkCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClF,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3E"}