@athoscommerce/snap-preact 1.0.0

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

@@ -0,0 +1,366 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useRef, useEffect } from 'preact/hooks';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import deepmerge from 'deepmerge';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { cloneWithProps, defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
+const defaultStyles = ({ vertical, theme }) => {
+    return css({
+        display: 'flex',
+        maxWidth: '100%',
+        maxHeight: vertical ? '100%' : undefined,
+        margin: 0,
+        padding: 0,
+        overflow: 'hidden',
+        '.swiper-notification': {
+            position: 'absolute',
+            left: '100000000000000px',
+        },
+        '&.ss__carousel-vertical': {
+            flexDirection: 'column',
+            '.swiper-slide': {
+                /* Center slides vertically */
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+            },
+            '.swiper-container': {
+                flexDirection: 'row',
+            },
+            '.swiper-pagination': {
+                width: 'auto',
+                order: 0,
+                flexDirection: 'column',
+                margin: 0,
+                padding: '10px',
+            },
+            '.swiper-pagination-bullet': {
+                margin: '4px',
+            },
+        },
+        '.swiper-pagination-bullet-active': {
+            background: theme?.variables?.colors?.primary || 'inherit',
+        },
+        '.ss__carousel__next-wrapper, .ss__carousel__prev-wrapper': {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            '&.ss__carousel__next-wrapper--hidden, &.ss__carousel__prev-wrapper--hidden': {
+                display: 'none',
+            },
+        },
+        '.ss__carousel__next, .ss__carousel__prev': {
+            padding: '5px',
+            cursor: 'pointer',
+            lineHeight: 0,
+            '&.swiper-button-disabled': {
+                opacity: '0.3',
+                cursor: 'default',
+            },
+        },
+        '.swiper': {
+            display: 'flex',
+            flexDirection: 'column',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            position: 'relative',
+            overflow: 'hidden',
+            listStyle: 'none',
+            padding: 0,
+            zIndex: '1',
+            width: '100%',
+        },
+        '.swiper-vertical > .swiper-wrapper': {
+            flexDirection: 'column',
+        },
+        '.swiper-wrapper': {
+            order: 0,
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            zIndex: '1',
+            display: 'flex',
+            transitionProperty: 'transform',
+            boxSizing: 'content-box',
+        },
+        '.swiper-slide': {
+            flexShrink: 0,
+            width: '100%',
+            height: '100%',
+            position: 'relative',
+            transitionProperty: 'transform',
+        },
+        '.swiper-pagination': {
+            display: 'flex',
+            justifyContent: 'center',
+            marginTop: '10px',
+            width: '100%',
+            order: 1,
+            transition: '.3s opacity',
+        },
+        '.swiper-pagination-bullet': {
+            width: '8px',
+            height: '8px',
+            display: 'inline-block',
+            borderRadius: '50%',
+            background: '#000',
+            opacity: '.2',
+            cursor: 'pointer',
+            margin: '0 4px',
+            '&.swiper-pagination-bullet-active': {
+                opacity: '0.8',
+                background: theme?.variables?.colors?.primary || '#000',
+            },
+        },
+        '.swiper-slide-invisible-blank': {
+            visibility: 'hidden',
+        },
+        '.swiper-horizontal': {
+            touchAction: 'pan-y',
+        },
+        '.swiper-vertical': {
+            touchAction: 'pan-x',
+        },
+        '.swiper-scrollbar': {
+            position: 'absolute',
+            bottom: '0',
+            left: '0',
+            width: '100%',
+            height: '2px',
+            backgroundColor: '#d9d9d9',
+            '&:empty': {
+                display: 'none',
+            },
+            '.swiper-scrollbar-drag': {
+                position: 'relative',
+                height: '100%',
+                backgroundColor: theme?.variables?.colors?.primary || '#000',
+            },
+        },
+    });
+};
+export const defaultCarouselBreakpoints = {
+    0: {
+        slidesPerView: 1,
+        slidesPerGroup: 1,
+        spaceBetween: 0,
+    },
+    480: {
+        slidesPerView: 2,
+        slidesPerGroup: 2,
+        spaceBetween: 10,
+    },
+    768: {
+        slidesPerView: 3,
+        slidesPerGroup: 3,
+        spaceBetween: 10,
+    },
+    1024: {
+        slidesPerView: 4,
+        slidesPerGroup: 4,
+        spaceBetween: 10,
+    },
+    1200: {
+        slidesPerView: 5,
+        slidesPerGroup: 5,
+        spaceBetween: 10,
+    },
+};
+export const defaultVerticalCarouselBreakpoints = {
+    0: {
+        slidesPerView: 1,
+        slidesPerGroup: 1,
+        spaceBetween: 0,
+    },
+};
+export const Carousel = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        breakpoints: properties.vertical
+            ? JSON.parse(JSON.stringify(defaultVerticalCarouselBreakpoints))
+            : JSON.parse(JSON.stringify(defaultCarouselBreakpoints)),
+        pagination: false,
+        slidesPerGroup: 5,
+        slidesPerView: 5,
+        spaceBetween: 10,
+        loop: true,
+        autoAdjustSlides: false,
+        treePath: globalTreePath,
+    };
+    let props = mergeProps('carousel', globalTheme, defaultProps, properties);
+    let displaySettings;
+    //no breakpoint props allowed in templates
+    if (!(properties.theme?.name || globalTheme.name) && props.breakpoints) {
+        Object.keys(props.breakpoints).forEach((breakpoint) => {
+            const breakPointProps = props.breakpoints[breakpoint];
+            // make certain props numbers
+            if (breakPointProps.slidesPerView)
+                breakPointProps.slidesPerView = Number(breakPointProps.slidesPerView) || 1;
+            if (breakPointProps.slidesPerGroup)
+                breakPointProps.slidesPerGroup = Number(breakPointProps.slidesPerGroup) || 1;
+        });
+        displaySettings = useDisplaySettings(props.breakpoints);
+        if (displaySettings && Object.keys(displaySettings).length) {
+            const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
+            if (props.autoAdjustSlides && props.children.length < displaySettings.slidesPerView) {
+                displaySettings.slidesPerView = props.children.length;
+                displaySettings.slidesPerGroup = props.children.length;
+            }
+            props = {
+                ...props,
+                ...displaySettings,
+                theme,
+            };
+        }
+    }
+    const { children, loop, nextButton, prevButton, hideButtons, vertical, onInit, onBeforeInit, onAfterInit, onNextButtonClick, onPrevButtonClick, onClick, disableStyles, style: _, styleScript: __, themeStyleScript: ___, modules, className, internalClassName, treePath, ...additionalProps } = props;
+    let pagination = props.pagination;
+    let navigation = props.navigation;
+    let scrollbar = props.scrollbar;
+    const subProps = {
+        icon: {
+            // default props
+            internalClassName: 'ss__carousel__icon',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const swiperModulesUnfiltered = Array.isArray(modules)
+        ? [Navigation, Pagination, Scrollbar, A11y].concat(modules)
+        : [Navigation, Pagination, Scrollbar, A11y];
+    //remove any duplicates, in case user passes in Navigation or Pagination
+    const swiperModules = swiperModulesUnfiltered.filter((module, pos) => swiperModulesUnfiltered.indexOf(module) === pos);
+    const navigationPrevRef = useRef(null);
+    const navigationNextRef = useRef(null);
+    const rootComponentRef = useRef(null);
+    const styling = mergeStyles(props, defaultStyles);
+    useEffect(() => {
+        //backwards compatability for legacy styles
+        if (rootComponentRef.current) {
+            const rootElem = rootComponentRef.current;
+            const swiperElem = rootElem.querySelector('.swiper');
+            swiperElem?.classList.add('swiper-container', 'swiper-container-pointer-events');
+            swiperElem?.classList.contains('swiper-vertical') && swiperElem.classList.add('swiper-container-vertical');
+            swiperElem?.classList.contains('swiper-horizontal') && swiperElem.classList.add('swiper-container-horizontal');
+        }
+        //add usable class to last visible slide.
+        attachClasstoLastVisibleSlide();
+    }, [properties]);
+    if (pagination) {
+        if (typeof pagination == 'object') {
+            pagination = {
+                clickable: true,
+                ...pagination,
+            };
+        }
+        else {
+            pagination = {
+                clickable: true,
+            };
+        }
+    }
+    if (navigation && typeof navigation == 'object') {
+        navigation = {
+            nextEl: '.ss_carousel_DNE',
+            prevEl: '.ss_carousel_DNE',
+            ...navigation,
+        };
+    }
+    else {
+        navigation = {
+            nextEl: '.ss_carousel_DNE',
+            prevEl: '.ss_carousel_DNE',
+        };
+    }
+    if (scrollbar) {
+        if (typeof scrollbar == 'object') {
+            scrollbar = {
+                enabled: true,
+                ...scrollbar,
+            };
+        }
+        else {
+            scrollbar = {
+                enabled: true,
+            };
+        }
+    }
+    const attachClasstoLastVisibleSlide = () => {
+        if (rootComponentRef.current) {
+            const swiperElem = rootComponentRef.current;
+            const slides_visible = swiperElem?.querySelectorAll('.swiper-slide-visible');
+            slides_visible.forEach((element, idx) => {
+                element.classList.remove('swiper-last-visible-slide');
+                if (idx == slides_visible.length - 1) {
+                    element.classList.add('swiper-last-visible-slide');
+                }
+            });
+        }
+    };
+    delete additionalProps.breakpoints;
+    return children?.length ? (_jsx(CacheProvider, { children: _jsxs("div", { ref: rootComponentRef, ...styling, className: classnames('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className, internalClassName), children: [_jsx("div", { className: classnames('ss__carousel__prev-wrapper', { 'ss__carousel__prev-wrapper--hidden': hideButtons }), children: _jsx("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && ((e) => onPrevButtonClick(e)), children: prevButton || _jsx(Icon, { icon: vertical ? 'angle-up' : 'angle-left', ...subProps.icon, name: 'prev' }) }) }), _jsx(Swiper, { centerInsufficientSlides: true, onBeforeInit: (swiper) => {
+                        //@ts-ignore : someone should refactor this
+                        swiper.params.navigation.prevEl = navigationPrevRef.current ? navigationPrevRef.current : undefined;
+                        //@ts-ignore : someone should refactor this
+                        swiper.params.navigation.nextEl = navigationNextRef.current ? navigationNextRef.current : undefined;
+                        if (onBeforeInit) {
+                            onBeforeInit(swiper);
+                        }
+                    }, onInit: (swiper) => {
+                        if (onInit) {
+                            onInit(swiper);
+                        }
+                    }, onAfterInit: (swiper) => {
+                        //@ts-ignore : someone should refactor this
+                        swiper.navigation.onPrevClick = (e) => {
+                            e.preventDefault();
+                            if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind)
+                                return;
+                            swiper.slidePrev();
+                            swiper.emit('navigationPrev');
+                        };
+                        //@ts-ignore : someone should refactor this
+                        swiper.navigation.onNextClick = (e) => {
+                            e.preventDefault();
+                            if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind)
+                                return;
+                            swiper.slideNext();
+                            swiper.emit('navigationNext');
+                        };
+                        if (onAfterInit) {
+                            onAfterInit(swiper);
+                        }
+                    }, onClick: (swiper, e) => {
+                        onClick && onClick(swiper, e);
+                    }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7, loopAddBlankSlides: false, modules: swiperModules, ...additionalProps, ...displaySettings, controller: undefined, navigation: navigation, pagination: pagination, scrollbar: scrollbar, onResize: (swiper) => {
+                        if (additionalProps.onResize) {
+                            additionalProps.onResize();
+                        }
+                        swiper.updateSlidesClasses();
+                        attachClasstoLastVisibleSlide();
+                    }, onTransitionEnd: () => {
+                        if (additionalProps.onTransitionEnd) {
+                            additionalProps.onTransitionEnd();
+                        }
+                        attachClasstoLastVisibleSlide();
+                    }, children: children.map((child) => {
+                        if (child != null) {
+                            return _jsx(SwiperSlide, { children: cloneWithProps(child, { treePath }) });
+                        }
+                        else {
+                            return null;
+                        }
+                    }) }), _jsx("div", { className: classnames('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }), children: _jsx("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && ((e) => onNextButtonClick(e)), children: nextButton || _jsx(Icon, { icon: vertical ? 'angle-down' : 'angle-right', ...subProps.icon, name: 'next' }) }) })] }) })) : null;
+});

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { ComponentProps } from '../../../types';
+import { IconProps, IconType } from '../../Atoms/Icon';
+import { Lang } from '../../../hooks';
+export declare const Checkbox: ((properties: CheckboxProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export type CheckboxProps = {
+    lang?: Partial<CheckboxLang>;
+} & CheckboxTemplatesLegalProps & ComponentProps<CheckboxProps>;
+export type CheckboxTemplatesLegalProps = {
+    checked?: boolean;
+    color?: string;
+    disabled?: boolean;
+    icon?: IconType | Partial<IconProps>;
+    iconColor?: string;
+    onClick?: (e: React.MouseEvent<HTMLInputElement | HTMLSpanElement, MouseEvent>) => void;
+    size?: string | number;
+    startChecked?: boolean;
+    native?: boolean;
+    disableA11y?: boolean;
+};
+export interface CheckboxLang {
+    checkbox: Lang<{
+        checkedState: boolean;
+        disabled: boolean;
+    }>;
+}
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AA4B/C,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAyIzD,CAAC;AAMH,MAAM,MAAM,aAAa,GAAG;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC7B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxF,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC5B,QAAQ,EAAE,IAAI,CAAC;QACd,YAAY,EAAE,OAAO,CAAC;QACtB,QAAQ,EAAE,OAAO,CAAC;KAClB,CAAC,CAAC;CACH"}

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useState } from 'preact/hooks';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { Icon } from '../../Atoms/Icon';
+import { useA11y } from '../../../hooks/useA11y';
+import { useLang } from '../../../hooks';
+import deepmerge from 'deepmerge';
+const defaultStyles = ({ size, color, theme, native }) => {
+    const pixelSize = isNaN(Number(size)) ? size : `${size}px`;
+    if (!native) {
+        return css({
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: pixelSize,
+            width: pixelSize,
+            border: `1px solid ${color || theme?.variables?.colors?.primary || '#333'}`,
+            '&.ss__checkbox--disabled': {
+                opacity: 0.7,
+            },
+            '& .ss__checkbox__empty': {
+                display: 'inline-block',
+                width: `calc(${size} - 30%)`,
+                height: `calc(${size} - 30%)`,
+            },
+        });
+    }
+    else {
+        return css({});
+    }
+};
+export const Checkbox = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        size: '12px',
+        startChecked: false,
+        disableA11y: false,
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('checkbox', globalTheme, defaultProps, properties);
+    const { checked, color, disabled, icon, iconColor, onClick, size, startChecked, native, disableA11y, disableStyles, className, internalClassName, theme, treePath, lang, style: _, styleScript: __, themeStyleScript: ___, name: ____, ...additionalProps } = props;
+    const pixelSize = isNaN(Number(size)) ? size : `${size}px`;
+    const subProps = {
+        icon: {
+            // default props
+            internalClassName: 'ss__checkbox__icon',
+            icon: 'check-thin',
+            // inherited props
+            ...defined({
+                color: iconColor || color || theme?.variables?.colors?.primary,
+                disableStyles,
+                icon,
+                size: pixelSize && `calc(${pixelSize} - 30%)`,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    let checkedState, setCheckedState;
+    const stateful = checked === undefined;
+    if (stateful) {
+        [checkedState, setCheckedState] = useState(startChecked);
+    }
+    else {
+        checkedState = checked;
+    }
+    const clickFunc = (e) => {
+        if (!disabled) {
+            if (stateful) {
+                setCheckedState &&
+                    setCheckedState((prev) => {
+                        return !prev;
+                    });
+            }
+            onClick && onClick(e);
+        }
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        checkbox: {},
+    };
+    //deep merge with props.lang
+    const _lang = deepmerge(defaultLang, lang || {});
+    const mergedLang = useLang(_lang, {
+        checkedState,
+        disabled,
+    });
+    return (_jsx(CacheProvider, { children: native ? (_jsx("input", { ...styling, className: classnames('ss__checkbox', 'ss__checkbox--native', { 'ss__checkbox--disabled': disabled, 'ss__checkbox--active': checkedState }, className, internalClassName), type: "checkbox", "aria-checked": checkedState, onClick: (e) => clickFunc(e), disabled: disabled, checked: checkedState })) : (_jsx("span", { ...styling, className: classnames('ss__checkbox', { 'ss__checkbox--disabled': disabled, 'ss__checkbox--active': checkedState }, className, internalClassName), onClick: (e) => clickFunc(e), ref: (e) => (!disableA11y ? useA11y(e) : null), "aria-disabled": disabled, role: "checkbox", "aria-checked": checkedState, ...additionalProps, ...mergedLang.checkbox.all, children: checkedState ? (_jsx(Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) })) : (_jsx("span", { className: "ss__checkbox__empty" })) })) }));
+});

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { ComponentProps } from '../../../types';
+export declare const CustomComponentWrapper: ((properties: CustomComponentWrapperProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export interface CustomComponentWrapperProps extends ComponentProps {
+    type: string;
+    name: string;
+    children: any;
+}
+//# sourceMappingURL=CustomComponentWrapper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomComponentWrapper.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/CustomComponentWrapper/CustomComponentWrapper.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAQ7D,eAAO,MAAM,sBAAsB,gBAAyB,2BAA2B;;CAuBrF,CAAC;AAEH,MAAM,WAAW,2BAA4B,SAAQ,cAAc;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,GAAG,CAAC;CACd"}

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import { observer } from 'mobx-react-lite';
+import { cloneWithProps, mergeProps, mergeStyles } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+import { useTreePath } from '../../../providers/treePath';
+const defaultStyles = () => {
+    return css({});
+};
+export const CustomComponentWrapper = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const componentType = properties.type.charAt(0).toUpperCase() + properties.type.slice(1).toLowerCase();
+    const defaultProps = {
+        treePath: properties.children.props.treePath || globalTreePath || undefined,
+    };
+    const props = mergeProps(`customComponent-${componentType}`, globalTheme, defaultProps, properties);
+    const { children } = props;
+    const styling = mergeStyles(props, defaultStyles);
+    const path = styling['ss-path'];
+    return (_jsx(CacheProvider, { children: _jsx("div", { ...styling, children: cloneWithProps(children, { treePath: path, theme: globalTheme }) }) }));
+});

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+import { ComponentProps } from '../../../types';
+import { ErrorType } from '@athoscommerce/snap-store-mobx';
+import type { AbstractController } from '@athoscommerce/snap-controller';
+import { Lang } from '../../../hooks';
+export declare const ErrorHandler: ((properties: ErrorHandlerProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type ErrorHandlerProps = {
+    controller?: AbstractController;
+    error?: {
+        code?: number;
+        type: ErrorType;
+        message: string;
+    };
+    lang?: Partial<ErrorHandlerLang>;
+} & ErrorHandlerTemplatesLegalProps & ComponentProps<ErrorHandlerProps>;
+export type ErrorHandlerTemplatesLegalProps = {
+    onRetryClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+};
+export interface ErrorHandlerLang {
+    warningText: Lang<{
+        controller: AbstractController;
+    }>;
+    infoText: Lang<{
+        controller: AbstractController;
+    }>;
+    errorText: Lang<{
+        controller: AbstractController;
+    }>;
+    reloadText: Lang<{
+        controller: AbstractController;
+    }>;
+}
+//# sourceMappingURL=ErrorHandler.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorHandler.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ErrorHandler/ErrorHandler.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAyG/C,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAgHjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,KAAK,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,SAAS,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACjC,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACtE,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAChC,WAAW,EAAE,IAAI,CAAC;QACjB,UAAU,EAAE,kBAAkB,CAAC;KAC/B,CAAC,CAAC;IACH,QAAQ,EAAE,IAAI,CAAC;QACd,UAAU,EAAE,kBAAkB,CAAC;KAC/B,CAAC,CAAC;IACH,SAAS,EAAE,IAAI,CAAC;QACf,UAAU,EAAE,kBAAkB,CAAC;KAC/B,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,UAAU,EAAE,kBAAkB,CAAC;KAC/B,CAAC,CAAC;CACH"}