@searchspring/snap-preact-components 0.27.8 → 0.30.0

package/dist/cjs/components/Molecules/Result/Result.stories.js

@@ -178,12 +178,12 @@ exports.default = {
         } }, utilities_1.componentArgs),
 };
 var snapInstance = snapify_1.Snapify.search({ id: 'Result', globals: { siteId: '8uyt2m' } });
-var Template = function (args, _a) {
+var Default = function (args, _a) {
     var _b;
     var controller = _a.loaded.controller;
-    return (0, preact_1.h)(Result_1.Result, __assign({ result: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.results[0] }, args));
+    return ((0, preact_1.h)(Result_1.Result, __assign({}, args, { result: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.results[0] })));
 };
-exports.Default = Template.bind({});
+exports.Default = Default;
 exports.Default.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -198,7 +198,12 @@ exports.Default.loaders = [
         });
     }); },
 ];
-exports.hideSections = Template.bind({});
+var hideSections = function (args, _a) {
+    var _b;
+    var controller = _a.loaded.controller;
+    return ((0, preact_1.h)(Result_1.Result, __assign({}, args, { result: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.results[0] })));
+};
+exports.hideSections = hideSections;
 exports.hideSections.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -218,7 +223,12 @@ exports.hideSections.args = {
     hideTitle: true,
     hidePricing: true,
 };
-exports.truncateTitle = Template.bind({});
+var truncateTitle = function (args, _a) {
+    var _b;
+    var controller = _a.loaded.controller;
+    return ((0, preact_1.h)(Result_1.Result, __assign({}, args, { result: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.results[0] })));
+};
+exports.truncateTitle = truncateTitle;
 exports.truncateTitle.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {

package/dist/cjs/components/Molecules/SearchInput/SearchInput.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
+export declare const SearchInput: ((properties: SearchInputProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface SearchInputProps extends ComponentProps {
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    hideIcon?: boolean;
+}
+//# sourceMappingURL=SearchInput.d.ts.map

package/dist/cjs/components/Molecules/SearchInput/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/SearchInput/SearchInput.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAuB5D,eAAO,MAAM,WAAW,gBAAyB,gBAAgB,KAAG,WAAW;;CAqD7E,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACvD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}

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

@@ -0,0 +1,75 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchInput = void 0;
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var Icon_1 = require("../../Atoms/Icon/Icon");
+var utilities_1 = require("../../../utilities");
+var providers_1 = require("../../../providers");
+var CSS = {
+    searchInput: function (_a) {
+        var _b;
+        var theme = _a.theme;
+        return (0, react_1.css)({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            border: "1px solid ".concat(((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) || '#ccc'),
+            '& .ss__icon': {
+                padding: '5px',
+            },
+            '& .ss__search-input__input': {
+                width: '100%',
+                outline: 'none',
+                border: '0',
+                boxSizing: 'border-box',
+            },
+        });
+    },
+};
+exports.SearchInput = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d;
+    var globalTheme = (0, providers_1.useTheme)();
+    var theme = __assign(__assign({}, globalTheme), properties.theme);
+    var props = __assign(__assign(__assign({ 
+        // default props
+        placeholder: 'Search', hideIcon: false }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.searchInput), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.searchInput);
+    var placeholder = props.placeholder, onChange = props.onChange, hideIcon = props.hideIcon, disableStyles = props.disableStyles, style = props.style, className = props.className;
+    var subProps = {
+        icon: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__search-input__icon' }, (_d = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _d === void 0 ? void 0 : _d.icon), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
+    };
+    var styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.searchInput({ theme: theme }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__search-input', className) }),
+            !hideIcon && (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: "search" })),
+            (0, react_1.jsx)("input", { type: "text", className: "ss__search-input__input", onChange: function (e) {
+                    onChange && onChange(e);
+                }, placeholder: placeholder }))));
+});

package/dist/cjs/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/cjs/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/cjs/components/Molecules/SearchInput/SearchInput.stories.js

@@ -0,0 +1,70 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var preact_1 = require("preact");
+var blocks_1 = require("@storybook/addon-docs/blocks");
+var SearchInput_1 = require("./SearchInput");
+var utilities_1 = require("../../../utilities");
+var readme_md_1 = __importDefault(require("./readme.md"));
+exports.default = {
+    title: "Molecules/SearchInput",
+    component: SearchInput_1.SearchInput,
+    parameters: {
+        docs: {
+            page: function () { return ((0, preact_1.h)("div", null,
+                (0, preact_1.h)(readme_md_1.default, null),
+                (0, preact_1.h)(blocks_1.ArgsTable, { story: blocks_1.PRIMARY_STORY }))); },
+        },
+    },
+    decorators: [
+        function (Story) { return ((0, preact_1.h)("div", { style: {
+                maxWidth: '900px',
+                height: '300px',
+            } },
+            (0, preact_1.h)(Story, null))); },
+    ],
+    argTypes: __assign({ 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' },
+        } }, utilities_1.componentArgs),
+};
+var Default = function (args) { return (0, preact_1.h)(SearchInput_1.SearchInput, __assign({}, args)); };
+exports.Default = Default;

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

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

package/dist/cjs/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/cjs/components/Molecules/SearchInput/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SearchInput"), exports);

package/dist/cjs/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/cjs/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/cjs/components/Molecules/Select/Select.js

@@ -38,8 +38,7 @@ var Icon_1 = require("../../Atoms/Icon");
 var CSS = {
     select: function (_a) {
         var _b, _c;
-        var color = _a.color, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, label = _a.label, selection = _a.selection, theme = _a.theme;
-        //@ts-ignore
+        var color = _a.color, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, theme = _a.theme;
         return (0, react_1.css)({
             display: 'inline-flex',
             color: color,
@@ -59,7 +58,7 @@ var CSS = {
                 listStyle: 'none',
                 padding: '0',
                 marginTop: '-1px',
-                border: "1px solid ".concat(borderColor || color || ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary) || '#333'),
+                border: "1px solid ".concat(borderColor || color || ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) || '#333'),
                 '& .ss__select__select__option': {
                     cursor: 'pointer',
                     padding: '6px 8px',
@@ -68,7 +67,7 @@ var CSS = {
                         fontWeight: 'bold',
                     },
                     '&:hover': {
-                        backgroundColor: ((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.hover) || '#f8f8f8',
+                        backgroundColor: ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.hover) || '#f8f8f8',
                     },
                 },
             },
@@ -92,7 +91,7 @@ exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
             disabled: disabled,
         })), { 
             // component theme overrides
-            theme: props.theme }),
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
         button: __assign(__assign(__assign({ 
             // default props
             className: 'ss__select__dropdown__button' }, (_f = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _f === void 0 ? void 0 : _f.button), (0, utilities_1.defined)({
@@ -103,7 +102,7 @@ exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
             borderColor: borderColor,
         })), { 
             // component theme overrides
-            theme: props.theme }),
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
         icon: __assign(__assign(__assign({ 
             // default props
             className: 'ss__select__dropdown__button__icon' }, (_g = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _g === void 0 ? void 0 : _g.icon), (0, utilities_1.defined)({
@@ -112,13 +111,13 @@ exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
             size: '14px',
         })), { 
             // component theme overrides
-            theme: props.theme }),
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
     };
     // only single selection support for now
     var selection = selected;
     var setSelection;
     // open state
-    var _h = (0, hooks_1.useState)(startOpen), open = _h[0], setOpen = _h[1];
+    var _h = (0, hooks_1.useState)(Boolean(startOpen)), open = _h[0], setOpen = _h[1];
     // selection state
     var stateful = selection === undefined;
     if (stateful) {
@@ -136,7 +135,7 @@ exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
         ], options, true);
     }
     var makeSelection = function (e, option) {
-        option = option.value ? option : undefined;
+        option = (option === null || option === void 0 ? void 0 : option.value) ? option : undefined;
         if (option != selection) {
             onSelect && onSelect(e, option);
         }
@@ -151,15 +150,13 @@ exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
             styling.css = [CSS.native(), style];
         }
         else {
-            styling.css = [CSS.select({ color: color, backgroundColor: backgroundColor, borderColor: borderColor, label: label, selection: selection || '', theme: theme }), style];
+            styling.css = [CSS.select({ color: color, backgroundColor: backgroundColor, borderColor: borderColor, theme: theme }), style];
         }
     }
     else if (style) {
         styling.css = [style];
     }
-    return (options &&
-        (typeof options == 'object' || Array.isArray(options)) &&
-        options.length && ((0, react_1.jsx)(providers_1.CacheProvider, null,
+    return Array.isArray(options) && options.length ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
         (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__select', { 'ss__select--disabled': disabled }, className) }), native ? ((0, react_1.jsx)(preact_1.Fragment, null,
             label && !hideLabelOnSelection && ((0, react_1.jsx)("span", { className: "ss__select__label" },
                 label,
@@ -187,5 +184,5 @@ exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
             (0, react_1.jsx)("ul", { className: "ss__select__select" }, options.map(function (option) { return ((0, react_1.jsx)("li", { className: (0, classnames_1.default)('ss__select__select__option', {
                     'ss__select__select__option--selected': (selection === null || selection === void 0 ? void 0 : selection.value) === option.value,
                 }), onClick: function (e) { return !disabled && makeSelection(e, option); } },
-                (0, react_1.jsx)("span", null, option.label))); }))))))));
+                (0, react_1.jsx)("span", null, option.label))); }))))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 });

package/dist/cjs/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/cjs/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/cjs/components/Molecules/Select/Select.stories.js

@@ -258,11 +258,11 @@ var ObservableSelect = (0, mobx_react_1.observer)(function (_a) {
             selectedOption && selectedOption.url.go();
         } })));
 });
-var Template = function (args, _a) {
+var Default = function (args, _a) {
     var controller = _a.loaded.controller;
     return (0, preact_1.h)(ObservableSelect, { args: args, controller: controller });
 };
-exports.Default = Template.bind({});
+exports.Default = Default;
 exports.Default.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -280,7 +280,11 @@ exports.Default.loaders = [
 exports.Default.args = {
     label: 'Sort By',
 };
-exports.Native = Template.bind({});
+var Native = function (args, _a) {
+    var controller = _a.loaded.controller;
+    return (0, preact_1.h)(ObservableSelect, { args: args, controller: controller });
+};
+exports.Native = Native;
 exports.Native.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {

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

@@ -1,9 +1,11 @@
 /// <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;
-    active: boolean;
+    children?: ComponentChildren;
+    active?: boolean;
     buttonContent?: string | JSX.Element;
     width?: string;
     displayAt?: string;

package/dist/cjs/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,CA0E/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,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/cjs/components/Molecules/Slideout/Slideout.js

@@ -15,6 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Slideout = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
 var hooks_1 = require("preact/hooks");
 var react_1 = require("@emotion/react");
 var classnames_1 = __importDefault(require("classnames"));
@@ -60,10 +62,10 @@ function Slideout(properties) {
             transitionSpeed: transitionSpeed,
         })), { 
             // component theme overrides
-            theme: props.theme }),
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
     };
     // state
-    var _e = (0, hooks_1.useState)(active), isActive = _e[0], setActive = _e[1];
+    var _e = (0, hooks_1.useState)(Boolean(active)), isActive = _e[0], setActive = _e[1];
     var toggleActive = function () {
         setActive(!isActive);
         document.body.style.overflow = isActive ? 'hidden' : '';
@@ -79,9 +81,9 @@ function Slideout(properties) {
     else if (style) {
         styling.css = [style];
     }
-    return (isVisible && ((0, react_1.jsx)(providers_1.CacheProvider, null,
+    return isVisible ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
         buttonContent && ((0, react_1.jsx)("div", { className: "ss__slideout__button", onClick: function () { return toggleActive(); } }, buttonContent)),
         (0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__slideout', className, { 'ss__slideout--active': isActive }) }, styling), (0, utilities_1.cloneWithProps)(children, { toggleActive: toggleActive, active: isActive })),
-        (0, react_1.jsx)(Overlay_1.Overlay, __assign({}, subProps.overlay, { active: isActive, onClick: toggleActive })))));
+        (0, react_1.jsx)(Overlay_1.Overlay, __assign({}, subProps.overlay, { active: isActive, onClick: toggleActive })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 }
 exports.Slideout = Slideout;

package/dist/cjs/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;
@@ -62,9 +62,6 @@ declare const _default: {
         };
         active: {
             description: string;
-            type: {
-                required: boolean;
-            };
             table: {
                 type: {
                     summary: string;
@@ -170,5 +167,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/cjs/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,wBA4FE;AAEF,eAAO,MAAM,OAAO;WAAU,aAAa;;;;CAI1C,CAAC"}

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

@@ -31,8 +31,7 @@ exports.default = {
         },
     },
     argTypes: __assign({ active: {
-            description: 'Slideout is active',
-            type: { required: true },
+            description: 'Initial state of the slideout.',
             table: {
                 type: {
                     summary: 'boolean',
@@ -102,9 +101,9 @@ exports.default = {
             control: { type: 'color' },
         } }, utilities_1.componentArgs),
 };
-var _HelloWorld = function (args) { return ((0, preact_1.h)(Slideout_1.Slideout, __assign({}, args),
+var Default = function (args) { return ((0, preact_1.h)(Slideout_1.Slideout, __assign({}, args),
     (0, preact_1.h)("div", null, "props.children will be rendered here"))); };
-exports.Default = _HelloWorld.bind({});
+exports.Default = Default;
 exports.Default.args = {
     active: true,
 };