@athoscommerce/snap-preact 1.0.0

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

@@ -0,0 +1,188 @@
+"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.Result = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var hooks_1 = require("preact/hooks");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var Image_1 = require("../../Atoms/Image");
+var Price_1 = require("../../Atoms/Price");
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+var types_1 = require("../../../types");
+var CalloutBadge_1 = require("../../Molecules/CalloutBadge");
+var OverlayBadge_1 = require("../../Molecules/OverlayBadge");
+var Rating_1 = require("../Rating");
+var Button_1 = require("../../Atoms/Button");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var hooks_2 = require("../../../hooks");
+var VariantSelection_1 = require("../VariantSelection");
+var defaultStyles = function () {
+    return (0, react_1.css)({
+        '&.ss__result--grid': {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            '& .ss__result__image-wrapper': {
+                flex: '1 0 auto',
+                minHeight: '0%',
+            },
+        },
+        '&.ss__result--list': {
+            display: 'flex',
+            flexDirection: 'row',
+            '& .ss__result__image-wrapper': {
+                flex: '0 0 33%',
+            },
+            '& .ss__result__details': {
+                flex: '1 1 auto',
+                textAlign: 'left',
+                marginLeft: '20px',
+                padding: 0,
+            },
+        },
+        '& .ss__result__image-wrapper': {
+            position: 'relative',
+            '& .ss__result__badge': {
+                background: 'rgba(255, 255, 255, 0.5)',
+                padding: '10px',
+            },
+        },
+        '& .ss__result__details': {
+            padding: '10px',
+            textAlign: 'center',
+            '& .ss__result__details__title': {
+                marginBottom: '10px',
+            },
+            '& .ss__result__details__pricing': {
+                marginBottom: '10px',
+                '& .ss__result__price': {
+                    fontSize: '1.2em',
+                },
+                '& .ss__price--strike': {
+                    fontSize: '80%',
+                },
+            },
+        },
+    });
+};
+exports.Result = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        layout: types_1.ResultsLayout.grid,
+        treePath: globalTreePath,
+        addToCartButtonText: 'Add To Cart',
+        addToCartButtonSuccessText: 'Added!',
+        addToCartButtonSuccessTimeout: 2000,
+        hideAddToCartButton: true,
+        hideRating: true,
+    };
+    var props = (0, utilities_1.mergeProps)('result', globalTheme, defaultProps, properties);
+    var result = props.result, hideBadge = props.hideBadge, hideTitle = props.hideTitle, hidePricing = props.hidePricing, hideImage = props.hideImage, detailSlot = props.detailSlot, fallback = props.fallback, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, layout = props.layout, onClick = props.onClick, controller = props.controller, hideVariantSelections = props.hideVariantSelections, hideAddToCartButton = props.hideAddToCartButton, onAddToCartClick = props.onAddToCartClick, addToCartButtonText = props.addToCartButtonText, addToCartButtonSuccessText = props.addToCartButtonSuccessText, addToCartButtonSuccessTimeout = props.addToCartButtonSuccessTimeout, hideRating = props.hideRating, trackingRef = props.trackingRef, treePath = props.treePath;
+    var core = ((_a = result === null || result === void 0 ? void 0 : result.display) === null || _a === void 0 ? void 0 : _a.mappings.core) || ((_b = result === null || result === void 0 ? void 0 : result.mappings) === null || _b === void 0 ? void 0 : _b.core);
+    var _e = (0, hooks_1.useState)(false), addedToCart = _e[0], setAddedToCart = _e[1];
+    var subProps = {
+        variantSelection: __assign(__assign({ 
+            // global theme
+            internalClassName: 'ss__result__variant-selection' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        price: __assign(__assign({ 
+            // global theme
+            internalClassName: 'ss__result__price' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        calloutBadge: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__result__callout-badge', result: result }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        overlayBadge: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__result__overlay-badge', result: result, controller: controller }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        image: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__result__image', alt: (core === null || core === void 0 ? void 0 : core.name) || '', src: (core === null || core === void 0 ? void 0 : core.imageUrl) || '' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            fallback: fallback,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        rating: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__result__rating', value: (core === null || core === void 0 ? void 0 : core.rating) || 0, count: Number((core === null || core === void 0 ? void 0 : core.ratingCount) || 0) }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        button: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__result__button--addToCart', onClick: function (e) {
+                setAddedToCart(true);
+                if (onAddToCartClick) {
+                    onAddToCartClick(e, result);
+                }
+                controller === null || controller === void 0 ? void 0 : controller.addToCart([result]);
+                setTimeout(function () { return setAddedToCart(false); }, addToCartButtonSuccessTimeout);
+            } }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+    };
+    var displayName = core === null || core === void 0 ? void 0 : core.name;
+    if (props.truncateTitle) {
+        displayName = snap_toolbox_1.filters.truncate((core === null || core === void 0 ? void 0 : core.name) || '', props.truncateTitle.limit, props.truncateTitle.append);
+    }
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    //initialize lang
+    var defaultLang = {
+        addToCartButtonText: {
+            value: addedToCart ? addToCartButtonSuccessText : addToCartButtonText,
+        },
+    };
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    var mergedLang = (0, hooks_2.useLang)(lang, {
+        result: result,
+        controller: controller,
+    });
+    var isOnSale = Boolean((core === null || core === void 0 ? void 0 : core.msrp) && (core === null || core === void 0 ? void 0 : core.price) && (core === null || core === void 0 ? void 0 : core.price) < (core === null || core === void 0 ? void 0 : core.msrp));
+    return core ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("article", __assign({}, styling, { className: (0, classnames_1.default)('ss__result', "ss__result--".concat(layout), { 'ss__result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__image-wrapper", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: function (e) {
+                            onClick && onClick(e);
+                        }, children: !hideBadge ? ((0, jsx_runtime_1.jsx)(OverlayBadge_1.OverlayBadge, __assign({}, subProps.overlayBadge, { controller: controller, children: (0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image)) }))) : ((0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image))) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "ss__result__details", children: [!hideBadge && ((0, jsx_runtime_1.jsx)(CalloutBadge_1.CalloutBadge, __assign({}, subProps.calloutBadge, { controller: controller }))), !hideTitle && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__title", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: function (e) {
+                                    onClick && onClick(e);
+                                }, dangerouslySetInnerHTML: {
+                                    __html: displayName || '',
+                                } }) })), !hideRating && (0, jsx_runtime_1.jsx)(Rating_1.Rating, __assign({}, subProps.rating)), !hidePricing && core.price && core.price > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__pricing", children: isOnSale ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Price_1.Price, __assign({}, subProps.price, { value: core.msrp, lineThrough: true, name: 'msrp' })), "\u00A0", (0, jsx_runtime_1.jsx)(Price_1.Price, __assign({}, subProps.price, { value: core.price, name: 'price' }))] })) : ((0, jsx_runtime_1.jsx)(Price_1.Price, __assign({}, subProps.price, { value: core.price }))) })) : null, (0, utilities_1.cloneWithProps)(detailSlot, { result: result, treePath: treePath }), !hideVariantSelections && ((_c = result.variants) === null || _c === void 0 ? void 0 : _c.selections.length) && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__variant-selection", children: (_d = result.variants) === null || _d === void 0 ? void 0 : _d.selections.map(function (selection) {
+                                return (0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, __assign({}, subProps.variantSelection, { selection: selection }));
+                            }) })), !hideAddToCartButton && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__add-to-cart-wrapper", children: (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { content: addToCartButtonText }, mergedLang.addToCartButtonText.all)) }))] })] })) })) : null;
+});

package/dist/cjs/components/src/components/Molecules/Result/index.d.ts

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

package/dist/cjs/components/src/components/Molecules/Result/index.d.ts.map

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

package/dist/cjs/components/src/components/Molecules/Result/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("./Result"), exports);

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

@@ -0,0 +1,34 @@
+import { ComponentProps } from '../../../types';
+import { MutableRef } from 'preact/hooks';
+import { ButtonProps } from '../../Atoms/Button';
+import { Lang, LangAttributes } from '../../../hooks/useLang';
+export declare const SearchInput: ((properties: SearchInputProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export type SearchInputProps = {
+    lang?: Partial<SearchInputLang>;
+    inputRef?: MutableRef<HTMLInputElement | null>;
+    value?: string;
+} & SearchInputTemplatesLegalProps & ComponentProps<SearchInputProps>;
+export type SearchInputTemplatesLegalProps = {
+    placeholderText?: string;
+    submitSearchButton?: Buttons;
+    clearSearchButton?: Buttons;
+    closeSearchButton?: Buttons;
+    inputName?: string;
+    disabled?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    disableA11y?: boolean;
+};
+type Buttons = Partial<ButtonProps> | false;
+export interface SearchInputLang {
+    placeholderText?: LangAttributes<never>;
+    closeSearchButton?: Lang<never>;
+    clearSearchButton?: Lang<never>;
+    submitSearchButton?: Lang<never>;
+}
+export {};
+//# sourceMappingURL=SearchInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAY,UAAU,EAA0B,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAU,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,cAAc,EAAW,MAAM,wBAAwB,CAAC;AAmCvE,eAAO,MAAM,WAAW,gBAAyB,gBAAgB;;CA+L/D,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,UAAU,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,8BAA8B,GACjC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAElC,MAAM,MAAM,8BAA8B,GAAG;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,OAAO,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC;AAQ5C,MAAM,WAAW,eAAe;IAC/B,eAAe,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACxC,iBAAiB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,iBAAiB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;CACjC"}

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

@@ -0,0 +1,147 @@
+"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 jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var utilities_1 = require("../../../utilities");
+var providers_1 = require("../../../providers");
+var hooks_1 = require("preact/hooks");
+var Button_1 = require("../../Atoms/Button");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var useLang_1 = require("../../../hooks/useLang");
+var defaultStyles = function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (0, react_1.css)({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: "1px solid ".concat(((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) || '#ccc'),
+        '& .ss__icon': {
+            padding: '5px',
+        },
+        '& .ss__search-input__input': {
+            width: '100%',
+            outline: 'none',
+            border: '0',
+            boxSizing: 'border-box',
+        },
+        '& .ss__search-input__button--close-search-button': {
+            padding: '0px',
+            border: '0px',
+        },
+        '& .ss__search-input__icons': {
+            display: 'flex',
+            alignItems: 'center',
+            '& .ss__button': {
+                padding: '0px',
+                border: '0px',
+            },
+        },
+    });
+};
+exports.SearchInput = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        placeholderText: 'Search',
+        treePath: globalTreePath,
+        submitSearchButton: {
+            icon: 'search-thin',
+        },
+        clearSearchButton: {
+            icon: 'close-thin',
+        },
+    };
+    var props = (0, utilities_1.mergeProps)('searchInput', globalTheme, defaultProps, properties);
+    props.submitSearchButton = __assign(__assign(__assign({}, defaultProps.submitSearchButton), props.submitSearchButton), properties === null || properties === void 0 ? void 0 : properties.submitSearchButton);
+    props.clearSearchButton = __assign(__assign(__assign({}, defaultProps.clearSearchButton), props.clearSearchButton), properties === null || properties === void 0 ? void 0 : properties.clearSearchButton);
+    props.closeSearchButton = __assign(__assign(__assign({}, defaultProps.closeSearchButton), props.closeSearchButton), properties === null || properties === void 0 ? void 0 : properties.closeSearchButton);
+    var placeholderText = props.placeholderText, value = props.value, submitSearchButton = props.submitSearchButton, closeSearchButton = props.closeSearchButton, clearSearchButton = props.clearSearchButton, inputRef = props.inputRef, inputName = props.inputName, onChange = props.onChange, onClick = props.onClick, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, disabled = props.disabled, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var inputValue;
+    var setInputValue;
+    var stateful = value === undefined;
+    if (stateful) {
+        _a = (0, hooks_1.useState)(''), inputValue = _a[0], setInputValue = _a[1];
+    }
+    else {
+        inputValue = value;
+    }
+    var subProps = {
+        submitSearchButton: __assign(__assign(__assign(__assign({}, submitSearchButton), { internalClassName: 'ss__search-input__button--submit-search-button', name: 'submit-search' }), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        clearSearchButton: __assign(__assign(__assign(__assign({}, clearSearchButton), { internalClassName: 'ss__search-input__button--clear-search-button', name: 'clear-search', onClick: function (e) {
+                if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+                    //reset the input value
+                    (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current).value = '';
+                    //manually trigger the input event so our event listeners in useAcRenderedInput hook get triggered
+                    //and update pre-existing search inputs with new value
+                    (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current).dispatchEvent(new Event('input', { bubbles: true }));
+                }
+                setInputValue && setInputValue('');
+                (clearSearchButton === null || clearSearchButton === void 0 ? void 0 : clearSearchButton.onClick) && clearSearchButton.onClick(e);
+            } }), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        closeSearchButton: __assign(__assign(__assign(__assign({}, closeSearchButton), { internalClassName: 'ss__search-input__button--close-search-button', name: 'close-search' }), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+    };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    //initialize lang
+    var defaultLang = {
+        placeholderText: {
+            attributes: {
+                placeholder: placeholderText,
+            },
+        },
+        closeSearchButton: {
+            attributes: {
+                'aria-label': 'Close Search',
+            },
+        },
+        clearSearchButton: {
+            attributes: {
+                'aria-label': 'Clear Search',
+            },
+        },
+        submitSearchButton: {
+            attributes: {
+                'aria-label': 'Submit Search',
+            },
+        },
+    };
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    var mergedLang = (0, useLang_1.useLang)(lang, {});
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__search-input', { 'ss__input--disabled': disabled }, className, internalClassName), onClick: function (e) { return !disabled && onClick && onClick(e); }, children: [closeSearchButton && (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.closeSearchButton, mergedLang.closeSearchButton.all)), (0, jsx_runtime_1.jsx)("input", __assign({ type: "text", className: "ss__search-input__input" }, mergedLang.placeholderText.attributes, { value: inputValue, name: inputName, ref: inputRef, onKeyDown: function (e) { return onKeyDown && onKeyDown(e); }, onKeyUp: function (e) { return onKeyUp && onKeyUp(e); }, onChange: function (e) {
+                        if (setInputValue) {
+                            setInputValue(e.target.value || '');
+                        }
+                        onChange && onChange(e);
+                    }, disabled: disabled })), (0, jsx_runtime_1.jsxs)("div", { className: "ss__search-input__icons", children: [clearSearchButton && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) ? (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.clearSearchButton, mergedLang.clearSearchButton.all)) : null, submitSearchButton && (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.submitSearchButton, mergedLang.submitSearchButton.all))] })] })) }));
+});

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

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

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

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

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

@@ -0,0 +1,43 @@
+import { ComponentProps, ListOption } from '../../../types';
+import { IconProps, IconType } from '../../Atoms/Icon';
+import { Lang } from '../../../hooks';
+export declare const Select: ((properties: SelectProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type SelectProps = {
+    lang?: Partial<SelectLang>;
+} & SelectTemplatesLegalProps & ComponentProps<SelectProps>;
+export type SelectTemplatesLegalProps = {
+    options: ListOption[];
+    backgroundColor?: string;
+    borderColor?: string;
+    color?: string;
+    clearSelection?: string;
+    disableClickOutside?: boolean;
+    disabled?: boolean;
+    hideLabelOnSelection?: boolean;
+    iconColor?: string;
+    iconClose?: IconType | Partial<IconProps>;
+    iconOpen?: IconType | Partial<IconProps>;
+    label?: string | JSX.Element;
+    hideLabel?: boolean;
+    native?: boolean;
+    onSelect?: (e: React.ChangeEvent<HTMLSelectElement> | React.MouseEvent<HTMLElement>, option?: ListOption) => void;
+    selected?: ListOption;
+    separator?: string | JSX.Element;
+    startOpen?: boolean;
+    stayOpenOnSelection?: boolean;
+    hideSelection?: boolean;
+    hideIcon?: boolean;
+    hideOptionIcons?: boolean;
+    hideOptionLabels?: boolean;
+};
+export interface SelectLang {
+    buttonLabel: Lang<{
+        options: ListOption[];
+        selectedOptions: ListOption[];
+        label: string;
+        open: boolean;
+    }>;
+}
+//# sourceMappingURL=Select.d.ts.map

package/dist/cjs/components/src/components/Molecules/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Select/Select.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAmE/C,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAqRrD,CAAC;AAQH,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAC3B,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,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,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClH,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,WAAW,EAAE,IAAI,CAAC;QACjB,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,OAAO,CAAC;KACd,CAAC,CAAC;CACH"}