@athoscommerce/snap-preact 1.0.0

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

@@ -0,0 +1,213 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = 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 providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var Dropdown_1 = require("../../Atoms/Dropdown");
+var Button_1 = require("../../Atoms/Button");
+var Icon_1 = require("../../Atoms/Icon");
+var useA11y_1 = require("../../../hooks/useA11y");
+var hooks_2 = require("../../../hooks");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var color_1 = __importDefault(require("color"));
+var defaultStyles = function (_a) {
+    var _b, _c, _d, _e;
+    var color = _a.color, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, theme = _a.theme, native = _a.native;
+    var lightenedPrimary = new color_1.default(backgroundColor || color || ((_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) || undefined).lightness(95);
+    if (!native) {
+        return (0, react_1.css)({
+            display: 'inline-flex',
+            color: color,
+            '&.ss__select--disabled': {
+                opacity: 0.7,
+            },
+            '.ss__select__selection__icon': {
+                margin: '0px 5px 0px 0px',
+            },
+            '.ss__button__content': {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '5px',
+            },
+            '.ss__select__select': {
+                position: 'relative',
+                zIndex: '10000',
+                backgroundColor: backgroundColor || '#fff',
+                listStyle: 'none',
+                padding: '0',
+                marginTop: '-1px',
+                border: "1px solid ".concat(borderColor || color || ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.primary) || '#333'),
+                '.ss__select__dropdown__button': {
+                    alignItems: 'center',
+                },
+                '.ss__select__select__option': {
+                    cursor: 'pointer',
+                    padding: '6px 8px',
+                    color: 'initial',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '5px',
+                    '&.ss__select__select__option--selected': {
+                        fontWeight: 'bold',
+                    },
+                    '&:hover': {
+                        backgroundColor: lightenedPrimary.hex() || '#f8f8f8',
+                    },
+                },
+            },
+        });
+    }
+    else {
+        return (0, react_1.css)({
+            '.ss__select__select': {
+                paddingRight: '10px',
+                appearance: 'none',
+                '&::-ms-expand': {
+                    display: 'none',
+                },
+            },
+        });
+    }
+};
+exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        iconOpen: 'angle-down',
+        iconClose: 'angle-up',
+        separator: ': ',
+        startOpen: false,
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('select', globalTheme, defaultProps, properties);
+    var backgroundColor = props.backgroundColor, borderColor = props.borderColor, color = props.color, clearSelection = props.clearSelection, disableClickOutside = props.disableClickOutside, disabled = props.disabled, hideLabel = props.hideLabel, hideLabelOnSelection = props.hideLabelOnSelection, iconColor = props.iconColor, iconClose = props.iconClose, iconOpen = props.iconOpen, label = props.label, native = props.native, onSelect = props.onSelect, selected = props.selected, separator = props.separator, startOpen = props.startOpen, hideIcon = props.hideIcon, hideOptionIcons = props.hideOptionIcons, hideOptionLabels = props.hideOptionLabels, hideSelection = props.hideSelection, stayOpenOnSelection = props.stayOpenOnSelection, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var options = props.options;
+    var subProps = {
+        dropdown: __assign(__assign({ internalClassName: 'ss__select__dropdown' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            disabled: disabled,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        button: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__select__dropdown__button' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            disabled: disabled,
+            color: color,
+            backgroundColor: backgroundColor,
+            borderColor: borderColor,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        icon: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__select__dropdown__button__icon' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            color: iconColor || color,
+            size: '12px',
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+    };
+    // open state
+    var _b = (0, hooks_1.useState)(Boolean(startOpen)), open = _b[0], setOpen = _b[1];
+    // selection state
+    var _c = (0, hooks_1.useState)(selected), selection = _c[0], setSelection = _c[1];
+    // original selection state
+    var originalSelected = (0, hooks_1.useState)(selected)[0];
+    // reset selection if 'selected' prop changes
+    try {
+        if (selected) {
+            var originalSelectedstr = JSON.stringify(originalSelected);
+            var selectedstr = JSON.stringify(selected);
+            var selectionstr = JSON.stringify(selection);
+            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
+                setSelection(selected);
+            }
+        }
+    }
+    catch (e) {
+        // noop
+    }
+    if (selection && clearSelection) {
+        options = __spreadArray([
+            {
+                label: clearSelection,
+                value: '',
+            }
+        ], options, true);
+    }
+    var makeSelection = function (e, option) {
+        if (option != selection) {
+            onSelect && onSelect(e, option);
+        }
+        setSelection(option);
+        !stayOpenOnSelection && setOpen(false);
+    };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    var selectedOptions = options.filter(function (option) { return (selection === null || selection === void 0 ? void 0 : selection.value) === option.value; });
+    //initialize lang
+    var defaultLang = {
+        buttonLabel: {
+            value: label,
+            attributes: {
+                'aria-label': "".concat(label, " dropdown, ").concat(options.length, " options ").concat(selectedOptions.length ? ", Currently selected option is ".concat(selectedOptions[0].label) : ''),
+            },
+        },
+    };
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    var mergedLang = (0, hooks_2.useLang)(lang, {
+        options: options,
+        selectedOptions: selectedOptions,
+        label: label,
+        open: open,
+    });
+    // options can be an Array or ObservableArray - but should have length
+    return typeof options == 'object' && (options === null || options === void 0 ? void 0 : options.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__select', { 'ss__select--native': native }, { 'ss__select--disabled': disabled }, className, internalClassName), children: native ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(label || lang.buttonLabel.value) && !hideLabel && !hideLabelOnSelection && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__select__label", children: [(0, jsx_runtime_1.jsx)("label", __assign({}, (_a = mergedLang.buttonLabel) === null || _a === void 0 ? void 0 : _a.all)), separator && (0, jsx_runtime_1.jsx)("span", { className: "ss__select__label__separator", children: separator })] })), (0, jsx_runtime_1.jsxs)("select", { className: "ss__select__select", disabled: disabled || undefined, onChange: function (e) {
+                            var selectElement = e.target;
+                            var selectedOptionElement = selectElement.options[selectElement.selectedIndex];
+                            var selectedOption = options
+                                .filter(function (option, index) {
+                                return option.label == selectedOptionElement.text && (option.value == selectedOptionElement.value || option.value == index);
+                            })
+                                .pop();
+                            !disabled && makeSelection(e, selectedOption);
+                        }, children: [!selection && clearSelection && ((0, jsx_runtime_1.jsx)("option", { className: "ss__select__select__option", selected: true, value: "", children: clearSelection })), options.map(function (option, index) {
+                                var _a;
+                                return ((0, jsx_runtime_1.jsx)("option", { className: "ss__select__select__option", selected: (selection === null || selection === void 0 ? void 0 : selection.value) === option.value, value: (_a = option.value) !== null && _a !== void 0 ? _a : index, children: option.label }));
+                            })] }), !hideIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { name: 'open' }, (typeof iconOpen == 'string' ? { icon: iconOpen } : iconOpen))))] })) : ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { disableClickOutside: disableClickOutside, open: open, onToggle: function (e, state) { return setOpen(function (prev) { return state !== null && state !== void 0 ? state : !prev; }); }, onClick: function () { return setOpen(function (prev) { return !prev; }); }, disableA11y: true, button: (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({}, subProps.button, { children: [(label || lang.buttonLabel.value) && !hideLabelOnSelection && !hideLabel && ((0, jsx_runtime_1.jsxs)("span", __assign({ className: "ss__select__label" }, mergedLang.buttonLabel.attributes, { children: [(0, jsx_runtime_1.jsx)("label", __assign({}, mergedLang.buttonLabel.value)), separator && selection && (0, jsx_runtime_1.jsx)("span", { className: "ss__select__label__separator", children: separator })] }))), selection && !hideSelection && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selection.icon && !hideOptionIcons && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { className: "ss__select__selection__icon", name: 'selection' }, (typeof selection.icon == 'string' ? { icon: selection.icon } : selection.icon)))), !hideOptionLabels && (0, jsx_runtime_1.jsx)("span", { className: "ss__select__selection", children: selection === null || selection === void 0 ? void 0 : selection.label })] })), !hideIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { name: open ? 'open' : 'close' }, (open
+                            ? __assign({}, (typeof iconClose == 'string' ? { icon: iconClose } : iconClose)) : __assign({}, (typeof iconOpen == 'string' ? { icon: iconOpen } : iconOpen))))))] })), children: (0, jsx_runtime_1.jsx)("ul", { className: "ss__select__select", role: "listbox", "aria-label": typeof label == 'string' ? label : '', ref: function (e) { return (0, useA11y_1.useA11y)(e, -1, true, function () { return setOpen(false); }); }, children: options.map(function (option) { return ((0, jsx_runtime_1.jsxs)("li", { ref: function (e) { return (0, useA11y_1.useA11y)(e); }, "aria-disabled": option.disabled, title: option.label, 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); }, role: "option", "aria-selected": (selection === null || selection === void 0 ? void 0 : selection.value) === option.value, children: [option.icon && !hideOptionIcons && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { name: 'option', className: "ss__select__select__option__icon", treePath: "".concat(treePath, " dropdown") }, (typeof option.icon == 'string' ? { icon: option.icon } : option.icon)))), !hideOptionLabels && (0, jsx_runtime_1.jsx)("span", { children: option.label })] })); }) }) }))) })) })) : null;
+});

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { ComponentChildren } from 'preact';
+import { ComponentProps } from '../../../types';
+export declare const Slideout: ((properties: SlideoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type SlideoutProps = SlideoutTemplatesLegalProps & ComponentProps<SlideoutProps>;
+export type SlideoutTemplatesLegalProps = {
+    buttonContent?: string | JSX.Element;
+    children?: ComponentChildren;
+    active?: boolean;
+    noButtonWrapper?: boolean;
+    width?: string;
+    displayAt?: string;
+    transitionSpeed?: string;
+    overlayColor?: string;
+    slideDirection?: SlideDirectionType;
+    rerender?: boolean;
+    buttonSelector?: string | Element;
+};
+export type SlideDirectionType = 'top' | 'right' | 'bottom' | 'left';
+//# sourceMappingURL=Slideout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAS9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA+B7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAwHzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,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;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}

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

@@ -0,0 +1,125 @@
+"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.Slideout = 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 utilities_1 = require("../../../utilities");
+var providers_1 = require("../../../providers");
+var hooks_2 = require("../../../hooks");
+var Overlay_1 = require("../../Atoms/Overlay");
+var defaultStyles = function (_a) {
+    var slideDirection = _a.slideDirection, transitionSpeed = _a.transitionSpeed, width = _a.width;
+    return (0, react_1.css)({
+        display: 'block',
+        position: 'fixed',
+        transition: "".concat(slideDirection ? slideDirection : 'left', " ").concat(transitionSpeed),
+        left: slideDirection == 'left' ? "-".concat(width) : slideDirection != 'right' ? '0' : 'initial',
+        right: slideDirection == 'right' ? "-".concat(width) : 'initial',
+        bottom: slideDirection == 'bottom' ? "-100vh" : 'initial',
+        top: slideDirection == 'top' ? "-100vh" : slideDirection == 'bottom' ? 'initial' : '0',
+        height: '100%',
+        zIndex: '10004',
+        width: (width === null || width === void 0 ? void 0 : width.endsWith('%')) && parseInt(width.split('%')[0]) > 90 ? width : '90%',
+        maxWidth: width,
+        padding: '10px',
+        background: '#fff',
+        boxSizing: 'border-box',
+        overflowY: 'auto',
+        '&.ss__slideout--active': {
+            left: slideDirection == 'left' ? '0' : slideDirection != 'right' ? '0' : 'initial',
+            right: slideDirection == 'right' ? '0' : 'initial',
+            bottom: slideDirection == 'bottom' ? '0' : 'initial',
+            top: slideDirection == 'top' ? '0' : slideDirection == 'bottom' ? 'initial' : '0',
+        },
+    });
+};
+exports.Slideout = (0, mobx_react_lite_1.observer)(function (properties) {
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        active: false,
+        displayAt: '',
+        slideDirection: 'left',
+        width: '300px',
+        overlayColor: 'rgba(0,0,0,0.8)',
+        transitionSpeed: '0.25s',
+        treePath: globalTreePath,
+        rerender: true,
+    };
+    var props = (0, utilities_1.mergeProps)('slideout', globalTheme, defaultProps, properties);
+    var children = props.children, active = props.active, rerender = props.rerender, buttonContent = props.buttonContent, buttonSelector = props.buttonSelector, noButtonWrapper = props.noButtonWrapper, displayAt = props.displayAt, transitionSpeed = props.transitionSpeed, overlayColor = props.overlayColor, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var subProps = {
+        overlay: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__slideout__overlay' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            color: overlayColor,
+            transitionSpeed: transitionSpeed,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+    };
+    // state
+    var _a = (0, hooks_1.useState)(Boolean(active)), isActive = _a[0], setActive = _a[1];
+    var _b = (0, hooks_1.useState)(Boolean(active)), renderContent = _b[0], setRenderContent = _b[1];
+    var toggleActive = function () {
+        if (isActive) {
+            setActive(false);
+            if (rerender) {
+                setTimeout(function () {
+                    setRenderContent(false);
+                }, 250);
+            }
+        }
+        else {
+            setActive(true);
+            setRenderContent(true);
+        }
+        document.body.style.overflow = isActive ? 'hidden' : '';
+    };
+    //this is used to update active state if active prop is changed from parent component.
+    (0, hooks_1.useEffect)(function () {
+        setRenderContent(Boolean(active));
+        if (isActive !== active) {
+            setActive(Boolean(active));
+        }
+    }, [active]);
+    var isVisible = (0, hooks_2.useMediaQuery)(displayAt, function () {
+        document.body.style.overflow = '';
+    });
+    document.body.style.overflow = isVisible && isActive ? 'hidden' : '';
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    (0, hooks_1.useEffect)(function () {
+        if (buttonSelector) {
+            var button = void 0;
+            if (typeof buttonSelector == 'string') {
+                button = document.querySelector(buttonSelector);
+            }
+            else {
+                button = buttonSelector;
+            }
+            if (button) {
+                button.addEventListener('click', function () { return toggleActive(); });
+            }
+        }
+    }, []);
+    return isVisible || !rerender ? ((0, jsx_runtime_1.jsxs)(providers_1.CacheProvider, { children: [buttonContent &&
+                (noButtonWrapper ? ((0, utilities_1.cloneWithProps)(buttonContent, { toggleActive: toggleActive, active: isActive, treePath: treePath })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__slideout__button", onClick: function () { return toggleActive(); }, children: (0, utilities_1.cloneWithProps)(buttonContent, { active: isActive, treePath: treePath }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' } }, styling, { children: renderContent && (0, utilities_1.cloneWithProps)(children, { toggleActive: toggleActive, active: isActive, treePath: treePath }) })), (0, jsx_runtime_1.jsx)(Overlay_1.Overlay, __assign({}, subProps.overlay, { active: isActive, onClick: toggleActive }))] })) : null;
+});

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

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

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

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

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

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

@@ -0,0 +1,64 @@
+import { ComponentProps } from '../../../types';
+import { Lang } from '../../../hooks';
+import { LangAttributes } from '../../../hooks/useLang';
+export declare function Slideshow(properties: SlideshowProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export interface SlideshowLang {
+    pauseButton: Lang<{
+        isPlaying: boolean;
+        isNextDisabled: boolean;
+        isPrevDisabled: boolean;
+    }>;
+    paginationButton: LangAttributes<{
+        index: number;
+        totalDots: number;
+    }>;
+    nextButton: Lang<{
+        isPlaying: boolean;
+        isNextDisabled: boolean;
+        isPrevDisabled: boolean;
+    }>;
+    prevButton: Lang<{
+        isPlaying: boolean;
+        isNextDisabled: boolean;
+        isPrevDisabled: boolean;
+    }>;
+    slide: LangAttributes<{
+        hasClickHandler: boolean;
+        imageAlt: string;
+        index: number;
+        slidesLength: number;
+    }>;
+    srInstructions: Lang<{
+        touchDragging: boolean;
+    }>;
+}
+export interface SlideshowSlide {
+    src?: string;
+    alt?: string;
+    onClick?: (slide: SlideshowSlide, index: number) => void;
+    content?: JSX.Element;
+}
+export type SlideshowProps = {
+    lang?: Partial<SlideshowLang>;
+} & SlideshowTemplatesLegalProps & ComponentProps<SlideshowProps>;
+export type SlideshowTemplatesLegalProps = {
+    slides: (string | SlideshowSlide)[];
+    fallbackImage?: string;
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+    showNavigation?: boolean;
+    overlayNavigation?: boolean;
+    alwaysShowNavigation?: boolean;
+    centerInsufficientSlides?: boolean;
+    showPagination?: boolean;
+    loop?: boolean;
+    slidesToShow?: number;
+    slidesToMove?: number;
+    gap?: number;
+    slideImageAlt?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    touchDragging?: boolean;
+    dragThreshold?: number;
+};
+//# sourceMappingURL=Slideshow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideshow/Slideshow.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAqJxD,wBAAgB,SAAS,CAAC,UAAU,EAAE,cAAc,oDAsmBnD;AAED,MAAM,WAAW,aAAa;IAC7B,WAAW,EAAE,IAAI,CAAC;QACjB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,gBAAgB,EAAE,cAAc,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,KAAK,EAAE,cAAc,CAAC;QACrB,eAAe,EAAE,OAAO,CAAC;QACzB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;IACH,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,OAAO,CAAC;KACvB,CAAC,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9B,GAAG,4BAA4B,GAC/B,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}