@athoscommerce/snap-preact 1.0.0

package/dist/esm/components/src/components/Molecules/LayoutSelector/LayoutSelector.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps, ListOption } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare const LayoutSelector: ((properties: LayoutSelectorProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type LayoutSelectorProps = {
+    lang?: Partial<LayoutSelectorLang>;
+    options?: ListOption[];
+    selected?: ListOption;
+} & LayoutSelectorTemplatesLegalProps & ComponentProps<LayoutSelectorProps>;
+export type LayoutSelectorTemplatesLegalProps = {
+    onSelect?: (e: React.MouseEvent<HTMLElement> | React.ChangeEvent<HTMLElement>, option?: ListOption) => void;
+    label?: string;
+    hideLabel?: boolean;
+    hideOptionLabels?: boolean;
+    type?: 'dropdown' | 'list' | 'radio';
+    showSingleOption?: boolean;
+};
+export interface LayoutSelectorLang {
+    label: Lang<{
+        options: ListOption[];
+        selectedOptions: ListOption[];
+    }>;
+}
+//# sourceMappingURL=LayoutSelector.d.ts.map

package/dist/esm/components/src/components/Molecules/LayoutSelector/LayoutSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutSelector.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/LayoutSelector/LayoutSelector.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAIzE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAYtC,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAqIrE,CAAC;AAOH,MAAM,MAAM,mBAAmB,GAAG;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACtB,GAAG,iCAAiC,GACpC,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,kBAAkB;IAClC,KAAK,EAAE,IAAI,CAAC;QACX,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Molecules/LayoutSelector/LayoutSelector.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Select } from '../Select';
+import { List } from '../List';
+import { RadioList } from '../RadioList';
+import deepmerge from 'deepmerge';
+const defaultStyles = ({}) => {
+    return css({
+        '.ss__button__content': {
+            display: 'flex',
+            alignItems: 'center',
+        },
+    });
+};
+export const LayoutSelector = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        label: 'Layout',
+        type: 'dropdown',
+        showSingleOption: false,
+        selected: properties.options && properties.options.length ? properties.options[0] : undefined,
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('layoutSelector', globalTheme, defaultProps, properties);
+    const { options, selected, type, onSelect, showSingleOption, hideLabel, hideOptionLabels, disableStyles, className, internalClassName, treePath } = props;
+    let label = props.label;
+    const subProps = {
+        Select: {
+            hideOptionLabels,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        RadioList: {
+            hideOptionLabels,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        List: {
+            multiSelect: false,
+            horizontal: true,
+            hideOptionCheckboxes: true,
+            hideOptionLabels,
+            requireSelection: true,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        label: {
+            value: label,
+        },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    if (hideLabel) {
+        delete lang.label.value;
+        label = undefined;
+    }
+    if (hideOptionLabels) {
+        const optionsWithNoIcons = options?.filter((option) => !option.icon);
+        if (optionsWithNoIcons?.length) {
+            console.warn('Warning - found layout options with no visible label or icon', optionsWithNoIcons);
+        }
+    }
+    // options can be an Array or ObservableArray - but should have length
+    return (options && options.length > 1) || (options?.length === 1 && showSingleOption) ? (_jsxs(CacheProvider, { children: [type?.toLowerCase() == 'dropdown' && (_jsx(Select, { ...styling, className: classnames('ss__layout__select', className, internalClassName), ...subProps.Select, label: label, options: options, selected: selected, onSelect: (e, option) => {
+                    onSelect && onSelect(e, option);
+                }, lang: {
+                    buttonLabel: lang.label,
+                } })), type?.toLowerCase() == 'list' && (_jsx(List, { ...styling, className: classnames('ss__layout__list', className, internalClassName), ...subProps.List, onSelect: (e, option) => {
+                    onSelect && onSelect(e, option);
+                }, options: options, selected: selected, titleText: label, lang: {
+                    title: lang.label,
+                } })), type?.toLowerCase() == 'radio' && (_jsx(RadioList, { ...styling, className: classnames('ss__layout__radioList', className, internalClassName), ...subProps.RadioList, onSelect: (e, option) => {
+                    onSelect && onSelect(e, option);
+                }, options: options, selected: selected, titleText: label, lang: {
+                    title: lang.label,
+                } }))] })) : null;
+});

package/dist/esm/components/src/components/Molecules/LayoutSelector/index.d.ts

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

package/dist/esm/components/src/components/Molecules/LayoutSelector/index.d.ts.map

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

package/dist/esm/components/src/components/Molecules/LayoutSelector/index.js

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

package/dist/esm/components/src/components/Molecules/List/List.d.ts

@@ -0,0 +1,28 @@
+import { ComponentProps, ListOption } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare function List(properties: ListProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export type ListProps = {
+    lang?: Partial<ListLang>;
+} & ListTemplatesLegalProps & ComponentProps<ListProps>;
+export type ListTemplatesLegalProps = {
+    options: ListOption[];
+    multiSelect?: boolean;
+    hideOptionCheckboxes?: boolean;
+    hideOptionLabels?: boolean;
+    hideOptionIcons?: boolean;
+    onSelect?: (e: React.MouseEvent<HTMLElement>, option: ListOption, selected: ListOption[]) => void;
+    titleText?: string;
+    hideTitleText?: boolean;
+    disabled?: boolean;
+    horizontal?: boolean;
+    native?: boolean;
+    selected?: ListOption | ListOption[];
+    requireSelection?: boolean;
+};
+export interface ListLang {
+    title?: Lang<{
+        options: ListOption[];
+        selectedOptions: ListOption[];
+    }>;
+}
+//# sourceMappingURL=List.d.ts.map

package/dist/esm/components/src/components/Molecules/List/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/List/List.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,IAAI,EAAoB,MAAM,gBAAgB,CAAC;AAmDxD,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2DAyKzC;AAED,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Molecules/List/List.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useState } from 'preact/hooks';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import deepmerge from 'deepmerge';
+import { filters } from '@athoscommerce/snap-toolbox';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Checkbox } from '../Checkbox';
+import { useA11y, useLang } from '../../../hooks';
+import { Icon } from '../../Atoms/Icon';
+const defaultStyles = ({ horizontal }) => {
+    return css({
+        display: 'flex',
+        flexDirection: horizontal ? 'row' : 'column',
+        alignItems: horizontal ? 'center' : undefined,
+        justifyItems: 'flex-start',
+        gap: '5px',
+        '.ss__list__options': {
+            border: 'none',
+            listStyle: 'none',
+            padding: '0px',
+            margin: '0px',
+            display: 'flex',
+            flexDirection: horizontal ? 'row' : 'column',
+            alignItems: horizontal ? 'center' : undefined,
+            justifyItems: 'flex-start',
+            gap: '5px',
+        },
+        '.ss__list__option': {
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '5px',
+            '.ss__list__option__label , .ss__list__option__icon': {
+                cursor: 'pointer',
+            },
+        },
+        '&.ss__list--disabled, .ss__list__option--disabled': {
+            cursor: 'none',
+            pointerEvents: 'none',
+            opacity: 0.5,
+        },
+        '&.ss__list--disabled, .ss__list__option--unavailable': {
+            cursor: 'pointer',
+            opacity: 0.5,
+        },
+        '.ss__list__option--selected': {
+            fontWeight: 'bold',
+        },
+    });
+};
+export function List(properties) {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('list', globalTheme, defaultProps, properties);
+    const { titleText, onSelect, native, multiSelect, hideOptionLabels, hideOptionIcons, hideOptionCheckboxes, disabled, hideTitleText, options, requireSelection, disableStyles, className, internalClassName, treePath, } = props;
+    let selected = props.selected;
+    const subProps = {
+        checkbox: {
+            // default props
+            native: native,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        icon: {
+            // default props
+            internalClassName: 'ss__list__option__icon',
+            size: '16px',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    if (selected && !Array.isArray(selected)) {
+        selected = [selected];
+    }
+    // selection state
+    const [selection, setSelection] = useState(selected || []);
+    // original selection state
+    const [originalSelected] = useState(selected || []);
+    // reset selection if 'selected' prop changes
+    try {
+        if (selected) {
+            const originalSelectedstr = JSON.stringify(originalSelected);
+            const selectedstr = JSON.stringify(selected);
+            const selectionstr = JSON.stringify(selection);
+            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
+                setSelection(selected);
+            }
+        }
+    }
+    catch (e) {
+        // noop
+    }
+    const makeSelection = (e, option) => {
+        let newArray;
+        if (multiSelect) {
+            if (selection.find((select) => select.value === option.value)) {
+                newArray = [...selection];
+                newArray.splice(newArray.findIndex((select) => select.value === option.value), 1);
+                if (newArray.length == 0 && requireSelection) {
+                    newArray = [option];
+                }
+            }
+            else {
+                newArray = [...selection, option];
+            }
+        }
+        else {
+            if (!requireSelection && selection.find((select) => select.value === option.value)) {
+                newArray = [];
+            }
+            else {
+                newArray = [option];
+            }
+        }
+        if (onSelect) {
+            onSelect(e, option, newArray);
+        }
+        setSelection(newArray);
+    };
+    //initialize lang
+    const defaultLang = {};
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    const mergedLang = useLang(lang, {
+        options,
+        selectedOptions: selection,
+    });
+    return typeof options == 'object' && options?.length ? (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__list', { 'ss__list--native': native, 'ss__list--disabled': disabled }, className, internalClassName), children: [(titleText || lang?.title?.value) && !hideTitleText && (_jsx("h5", { className: "ss__list__title", ...mergedLang.title?.all, children: titleText })), _jsx("ul", { className: `ss__list__options`, role: "listbox", "aria-label": titleText, children: options.map((option) => {
+                        const selected = selection.some((select) => select.value == option.value);
+                        return (_jsxs("li", { className: classnames(`ss__list__option ss__list__option--${filters.handleize(option.value?.toString())}`, {
+                                'ss__list__option--selected': selected,
+                                'ss__list__option--disabled': option?.disabled,
+                                'ss__list__option--unavailable': option?.available === false,
+                            }), ref: (e) => useA11y(e), onClick: (e) => !disabled && !option?.disabled && makeSelection(e, option), title: option.label, role: "option", "aria-selected": selected, "aria-disabled": option.disabled || option?.available === false, children: [!hideOptionCheckboxes && _jsx(Checkbox, { ...subProps.checkbox, checked: selected, disableA11y: true, "aria-label": option.label }), option.icon && !hideOptionIcons && (_jsx(Icon, { ...subProps.icon, ...(typeof option.icon == 'string' ? { icon: option.icon } : option.icon) })), !hideOptionLabels && (option.label || !option.icon) && (_jsx("label", { className: "ss__list__option__label", children: option.label || option.value }))] }));
+                    }) })] }) })) : null;
+}

package/dist/esm/components/src/components/Molecules/List/index.d.ts

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

package/dist/esm/components/src/components/Molecules/List/index.d.ts.map

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

package/dist/esm/components/src/components/Molecules/List/index.js

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

package/dist/esm/components/src/components/Molecules/LoadMore/LoadMore.d.ts

@@ -0,0 +1,37 @@
+import { ComponentProps } from '../../../types';
+import { Lang } from '../../../hooks';
+import type { SearchPaginationStore } from '@athoscommerce/snap-store-mobx';
+import type { SearchController } from '@athoscommerce/snap-controller';
+import { IconProps, IconType } from '../../Atoms/Icon';
+export declare const LoadMore: ((properties: LoadMoreProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type LoadMoreProps = {
+    pagination?: SearchPaginationStore;
+    controller?: SearchController;
+    lang?: Partial<LoadMoreLang>;
+} & LoadMoreTemplatesLegalProps & ComponentProps<LoadMoreProps>;
+export type LoadMoreTemplatesLegalProps = {
+    autoFetch?: boolean;
+    intersectionOffset?: string;
+    loading?: boolean;
+    loadMoreText?: string;
+    color?: string;
+    backgroundColor?: string;
+    progressIndicatorWidth?: string;
+    progressIndicatorSize?: string;
+    hideProgressIndicator?: boolean;
+    hideProgressText?: boolean;
+    loadingIcon?: IconType | Partial<IconProps>;
+    loadingLocation?: 'button' | 'outside';
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+};
+export interface LoadMoreLang {
+    loadMoreButton: Lang<{
+        pagination: SearchPaginationStore;
+    }>;
+    progressText: Lang<{
+        pagination: SearchPaginationStore;
+    }>;
+}
+//# sourceMappingURL=LoadMore.d.ts.map

package/dist/esm/components/src/components/Molecules/LoadMore/LoadMore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadMore.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/LoadMore/LoadMore.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAA4B,MAAM,gBAAgB,CAAC;AAChE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAqD7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAkKzD,CAAC;AAOH,MAAM,MAAM,aAAa,GAAG;IAC3B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC7B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC5C,eAAe,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACrE,CAAC;AAEF,MAAM,WAAW,YAAY;IAC5B,cAAc,EAAE,IAAI,CAAC;QACpB,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Molecules/LoadMore/LoadMore.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { useRef, useState } from 'preact/hooks';
+import { css, keyframes } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import deepmerge from 'deepmerge';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useIntersection, useLang } from '../../../hooks';
+import { Button } from '../../Atoms/Button';
+import { Icon } from '../../Atoms/Icon';
+import { useFuncDebounce } from '../../../hooks';
+const defaultStyles = ({ pagination, progressIndicatorWidth, progressIndicatorSize, color, backgroundColor, theme }) => {
+    return css({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '20px',
+        '& .ss__load-more__button--disabled': {
+            opacity: 0.7,
+            pointerEvents: 'none',
+            '&:hover': {
+                cursor: 'default',
+            },
+        },
+        '& .ss__load-more__button--hidden': {
+            display: 'none',
+        },
+        '& .ss__button': {
+            alignItems: 'center',
+        },
+        '& .ss__load-more__icon': {
+            marginLeft: '5px',
+            animation: `${keyframes({
+                '0%': { transform: `rotate(0deg)` },
+                '100%': { transform: `rotate(360deg)` },
+            })} linear 1s infinite`,
+        },
+        '&.ss__load-more': {
+            '& .ss__load-more__progress': {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '5px',
+                '& .ss__load-more__progress__indicator': {
+                    width: progressIndicatorWidth,
+                    background: backgroundColor || theme?.variables?.colors?.secondary || '#f8f8f8',
+                    borderRadius: progressIndicatorSize,
+                    '& .ss__load-more__progress__indicator__bar': {
+                        width: pagination ? `${(pagination.end / pagination.totalResults) * 100}%` : '',
+                        background: color || theme?.variables?.colors?.primary || '#ccc',
+                        borderRadius: progressIndicatorSize,
+                        height: progressIndicatorSize,
+                    },
+                },
+                '& .ss__load-more__progress__text': {
+                    textAlign: 'center',
+                },
+            },
+        },
+    });
+};
+export const LoadMore = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        loadMoreText: 'Load More',
+        loadingLocation: 'button',
+        loadingIcon: 'spinner',
+        progressIndicatorWidth: '300px',
+        progressIndicatorSize: '5px',
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('loadMore', globalTheme, defaultProps, properties);
+    const { pagination, controller, onClick, autoFetch, intersectionOffset, loading, loadMoreText, hideProgressIndicator, hideProgressText, loadingLocation, loadingIcon, disableStyles, className, internalClassName, treePath, } = props;
+    const store = pagination || controller?.store?.pagination;
+    const isLoading = typeof loading == 'boolean' ? loading : controller?.store?.loading;
+    const isButtonDisabled = (isLoading && loadingLocation === 'button') || !Boolean(store?.next);
+    const subProps = {
+        button: {
+            // default props
+            internalClassName: classnames('ss__load-more__button', { 'ss__load-more__button--hidden': isLoading && loadingLocation === 'outside' }, { 'ss__load-more__button--disabled': isButtonDisabled }),
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        icon: {
+            // default props
+            internalClassName: 'ss__load-more__icon',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    if (!store) {
+        return null;
+    }
+    const styling = mergeStyles({ ...props, pagination: store }, defaultStyles);
+    const autoProps = {};
+    if (autoFetch) {
+        const loadMoreRef = useRef(null);
+        autoProps.ref = loadMoreRef;
+        const loadMoreInViewport = useIntersection(loadMoreRef, intersectionOffset || '0px');
+        const [preventLoading, setPreventLoading] = useState(true);
+        if (isLoading) {
+            setPreventLoading(true);
+        }
+        else {
+            useFuncDebounce(() => {
+                setPreventLoading(false);
+            }, 500);
+        }
+        if (loadMoreInViewport && store.next && !preventLoading) {
+            store.next.url.go({ history: 'replace' });
+        }
+    }
+    //initialize lang
+    const defaultLang = {
+        loadMoreButton: {
+            value: loadMoreText,
+            attributes: {
+                'aria-label': loadMoreText,
+            },
+        },
+        progressText: {
+            value: `You've viewed ${store?.end} of ${store?.totalResults} products`,
+        },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    const mergedLang = useLang(lang, {
+        pagination: store,
+    });
+    return store.totalResults ? (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, ...autoProps, className: classnames('ss__load-more', { 'ss__load-more--loading': isLoading }, { 'ss__load-more--autoFetch': autoFetch }, className, internalClassName), children: [!autoFetch && (_jsxs(_Fragment, { children: [_jsxs(Button, { onClick: (e) => {
+                                store.next?.url.go({ history: 'replace' });
+                                onClick && onClick(e);
+                            }, ...subProps.button, ...mergedLang.loadMoreButton.attributes, children: [_jsx("span", { ...mergedLang.loadMoreButton.value, children: loadMoreText }), loadingIcon && isLoading && loadingLocation === 'button' ? (_jsx(Icon, { ...subProps.icon, ...(typeof loadingIcon == 'string' ? { icon: loadingIcon } : loadingIcon) })) : null] }), loadingIcon && isLoading && loadingLocation === 'outside' && (_jsx(Icon, { ...subProps.icon, ...(typeof loadingIcon == 'string' ? { icon: loadingIcon } : loadingIcon) }))] })), (!hideProgressIndicator || !hideProgressText) && (_jsx("div", { className: 'ss__load-more__progress', children: _jsxs(_Fragment, { children: [!hideProgressIndicator && (_jsx("div", { className: 'ss__load-more__progress__indicator', children: _jsx("div", { className: `ss__load-more__progress__indicator__bar` }) })), !hideProgressText && (_jsx("div", { "aria-atomic": "true", "aria-live": "polite", className: 'ss__load-more__progress__text', ...mergedLang.progressText?.all }))] }) }))] }) })) : null;
+});

package/dist/esm/components/src/components/Molecules/LoadMore/index.d.ts

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

package/dist/esm/components/src/components/Molecules/LoadMore/index.d.ts.map

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

package/dist/esm/components/src/components/Molecules/LoadMore/index.js

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

package/dist/esm/components/src/components/Molecules/Modal/Modal.d.ts

@@ -0,0 +1,22 @@
+import { ComponentChildren } from 'preact';
+import { ComponentProps } from '../../../types';
+export declare const Modal: ((properties: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export type ModalProps = ModalTemplatesLegalProps & ComponentProps<ModalProps>;
+export type ModalTemplatesLegalProps = {
+    button?: string | JSX.Element;
+    lockScroll?: boolean;
+    buttonSelector?: string | Element;
+    content?: string | JSX.Element;
+    children?: ComponentChildren;
+    disabled?: boolean;
+    open?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    startOpen?: boolean;
+    disableClickOutside?: boolean;
+    disableA11y?: boolean;
+    overlayColor?: string;
+    onOverlayClick?: (event: React.MouseEvent<HTMLDivElement, Event>) => void;
+};
+//# sourceMappingURL=Modal.d.ts.map

package/dist/esm/components/src/components/Molecules/Modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAuC7D,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CAqKnD,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,wBAAwB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAE/E,MAAM,MAAM,wBAAwB,GAAG;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC"}