@athoscommerce/snap-preact 1.0.0

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

@@ -0,0 +1,70 @@
+import { ComponentChild } from 'preact';
+import type { Swiper as SwiperTypes } from 'swiper';
+import type { SwiperOptions } from 'swiper/types';
+import type { PaginationOptions } from 'swiper/types/modules/pagination';
+import type { NavigationOptions } from 'swiper/types/modules/navigation';
+import type { ScrollbarOptions } from 'swiper/types/modules/scrollbar';
+import { ComponentProps, BreakpointsProps } from '../../../types';
+export declare const defaultCarouselBreakpoints: {
+    0: {
+        slidesPerView: number;
+        slidesPerGroup: number;
+        spaceBetween: number;
+    };
+    480: {
+        slidesPerView: number;
+        slidesPerGroup: number;
+        spaceBetween: number;
+    };
+    768: {
+        slidesPerView: number;
+        slidesPerGroup: number;
+        spaceBetween: number;
+    };
+    1024: {
+        slidesPerView: number;
+        slidesPerGroup: number;
+        spaceBetween: number;
+    };
+    1200: {
+        slidesPerView: number;
+        slidesPerGroup: number;
+        spaceBetween: number;
+    };
+};
+export declare const defaultVerticalCarouselBreakpoints: {
+    0: {
+        slidesPerView: number;
+        slidesPerGroup: number;
+        spaceBetween: number;
+    };
+};
+export declare const Carousel: ((properties: CarouselProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type CarouselProps = {
+    breakpoints?: BreakpointsProps;
+} & CarouselTemplatesLegalProps & ComponentProps<CarouselProps>;
+export type CarouselTemplatesLegalProps = {
+    prevButton?: JSX.Element | string;
+    nextButton?: JSX.Element | string;
+    hideButtons?: boolean;
+    loop?: boolean;
+    vertical?: boolean;
+    pagination?: boolean | PaginationOptions;
+    navigation?: boolean | NavigationOptions;
+    scrollbar?: boolean | ScrollbarOptions;
+    autoAdjustSlides?: boolean;
+    onClick?: (swiper: SwiperTypes, e: MouseEvent | TouchEvent | PointerEvent) => void;
+    onNextButtonClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onPrevButtonClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onBeforeInit?: (swiper: SwiperTypes) => void;
+    onInit?: (swiper: SwiperTypes) => void;
+    onAfterInit?: (swiper: SwiperTypes) => void;
+    modules?: any[];
+    children: ComponentChild[];
+    onResize?: () => void;
+    onTransitionEnd?: () => void;
+    slidesPerView?: number | 'auto';
+} & Omit<SwiperOptions, 'breakpoints' | 'slidesPerView'>;
+//# sourceMappingURL=Carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAW3C,OAAO,KAAK,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,MAAM,gBAAgB,CAAC;AAiJ/E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CA+QzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG;IAC3B,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IACnF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,GAAG,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,eAAe,CAAC,CAAC"}

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

@@ -0,0 +1,379 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Carousel = exports.defaultVerticalCarouselBreakpoints = exports.defaultCarouselBreakpoints = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var hooks_1 = require("preact/hooks");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var react_2 = require("swiper/react");
+var utilities_1 = require("../../../utilities");
+var modules_1 = require("swiper/modules");
+var Icon_1 = require("../../Atoms/Icon/Icon");
+var providers_1 = require("../../../providers");
+var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
+var defaultStyles = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var vertical = _a.vertical, theme = _a.theme;
+    return (0, react_1.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: ((_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) || '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: ((_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) || '#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: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _f === void 0 ? void 0 : _f.colors) === null || _g === void 0 ? void 0 : _g.primary) || '#000',
+            },
+        },
+    });
+};
+exports.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,
+    },
+};
+exports.defaultVerticalCarouselBreakpoints = {
+    0: {
+        slidesPerView: 1,
+        slidesPerGroup: 1,
+        spaceBetween: 0,
+    },
+};
+exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        breakpoints: properties.vertical
+            ? JSON.parse(JSON.stringify(exports.defaultVerticalCarouselBreakpoints))
+            : JSON.parse(JSON.stringify(exports.defaultCarouselBreakpoints)),
+        pagination: false,
+        slidesPerGroup: 5,
+        slidesPerView: 5,
+        spaceBetween: 10,
+        loop: true,
+        autoAdjustSlides: false,
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('carousel', globalTheme, defaultProps, properties);
+    var displaySettings;
+    //no breakpoint props allowed in templates
+    if (!(((_a = properties.theme) === null || _a === void 0 ? void 0 : _a.name) || globalTheme.name) && props.breakpoints) {
+        Object.keys(props.breakpoints).forEach(function (breakpoint) {
+            var 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 = (0, useDisplaySettings_1.useDisplaySettings)(props.breakpoints);
+        if (displaySettings && Object.keys(displaySettings).length) {
+            var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
+            if (props.autoAdjustSlides && props.children.length < displaySettings.slidesPerView) {
+                displaySettings.slidesPerView = props.children.length;
+                displaySettings.slidesPerGroup = props.children.length;
+            }
+            props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
+        }
+    }
+    var children = props.children, loop = props.loop, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, vertical = props.vertical, onInit = props.onInit, onBeforeInit = props.onBeforeInit, onAfterInit = props.onAfterInit, onNextButtonClick = props.onNextButtonClick, onPrevButtonClick = props.onPrevButtonClick, onClick = props.onClick, disableStyles = props.disableStyles, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, modules = props.modules, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, additionalProps = __rest(props, ["children", "loop", "nextButton", "prevButton", "hideButtons", "vertical", "onInit", "onBeforeInit", "onAfterInit", "onNextButtonClick", "onPrevButtonClick", "onClick", "disableStyles", "style", "styleScript", "themeStyleScript", "modules", "className", "internalClassName", "treePath"]);
+    var pagination = props.pagination;
+    var navigation = props.navigation;
+    var scrollbar = props.scrollbar;
+    var subProps = {
+        icon: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__carousel__icon' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+    };
+    var swiperModulesUnfiltered = Array.isArray(modules)
+        ? [modules_1.Navigation, modules_1.Pagination, modules_1.Scrollbar, modules_1.A11y].concat(modules)
+        : [modules_1.Navigation, modules_1.Pagination, modules_1.Scrollbar, modules_1.A11y];
+    //remove any duplicates, in case user passes in Navigation or Pagination
+    var swiperModules = swiperModulesUnfiltered.filter(function (module, pos) { return swiperModulesUnfiltered.indexOf(module) === pos; });
+    var navigationPrevRef = (0, hooks_1.useRef)(null);
+    var navigationNextRef = (0, hooks_1.useRef)(null);
+    var rootComponentRef = (0, hooks_1.useRef)(null);
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    (0, hooks_1.useEffect)(function () {
+        //backwards compatability for legacy styles
+        if (rootComponentRef.current) {
+            var rootElem = rootComponentRef.current;
+            var swiperElem = rootElem.querySelector('.swiper');
+            swiperElem === null || swiperElem === void 0 ? void 0 : swiperElem.classList.add('swiper-container', 'swiper-container-pointer-events');
+            (swiperElem === null || swiperElem === void 0 ? void 0 : swiperElem.classList.contains('swiper-vertical')) && swiperElem.classList.add('swiper-container-vertical');
+            (swiperElem === null || swiperElem === void 0 ? void 0 : 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 = __assign({ clickable: true }, pagination);
+        }
+        else {
+            pagination = {
+                clickable: true,
+            };
+        }
+    }
+    if (navigation && typeof navigation == 'object') {
+        navigation = __assign({ 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 = __assign({ enabled: true }, scrollbar);
+        }
+        else {
+            scrollbar = {
+                enabled: true,
+            };
+        }
+    }
+    var attachClasstoLastVisibleSlide = function () {
+        if (rootComponentRef.current) {
+            var swiperElem = rootComponentRef.current;
+            var slides_visible_1 = swiperElem === null || swiperElem === void 0 ? void 0 : swiperElem.querySelectorAll('.swiper-slide-visible');
+            slides_visible_1.forEach(function (element, idx) {
+                element.classList.remove('swiper-last-visible-slide');
+                if (idx == slides_visible_1.length - 1) {
+                    element.classList.add('swiper-last-visible-slide');
+                }
+            });
+        }
+    };
+    delete additionalProps.breakpoints;
+    return (children === null || children === void 0 ? void 0 : children.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: rootComponentRef }, styling, { className: (0, classnames_1.default)('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className, internalClassName), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__prev-wrapper', { 'ss__carousel__prev-wrapper--hidden': hideButtons }), children: (0, jsx_runtime_1.jsx)("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && (function (e) { return onPrevButtonClick(e); }), children: prevButton || (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ icon: vertical ? 'angle-up' : 'angle-left' }, subProps.icon, { name: 'prev' })) }) }), (0, jsx_runtime_1.jsx)(react_2.Swiper, __assign({ centerInsufficientSlides: true, onBeforeInit: function (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: function (swiper) {
+                        if (onInit) {
+                            onInit(swiper);
+                        }
+                    }, onAfterInit: function (swiper) {
+                        //@ts-ignore : someone should refactor this
+                        swiper.navigation.onPrevClick = function (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 = function (e) {
+                            e.preventDefault();
+                            if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind)
+                                return;
+                            swiper.slideNext();
+                            swiper.emit('navigationNext');
+                        };
+                        if (onAfterInit) {
+                            onAfterInit(swiper);
+                        }
+                    }, onClick: function (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: function (swiper) {
+                        if (additionalProps.onResize) {
+                            additionalProps.onResize();
+                        }
+                        swiper.updateSlidesClasses();
+                        attachClasstoLastVisibleSlide();
+                    }, onTransitionEnd: function () {
+                        if (additionalProps.onTransitionEnd) {
+                            additionalProps.onTransitionEnd();
+                        }
+                        attachClasstoLastVisibleSlide();
+                    }, children: children.map(function (child) {
+                        if (child != null) {
+                            return (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, utilities_1.cloneWithProps)(child, { treePath: treePath }) });
+                        }
+                        else {
+                            return null;
+                        }
+                    }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }), children: (0, jsx_runtime_1.jsx)("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && (function (e) { return onNextButtonClick(e); }), children: nextButton || (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ icon: vertical ? 'angle-down' : 'angle-right' }, subProps.icon, { name: 'next' })) }) })] })) })) : null;
+});

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

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

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

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

@@ -0,0 +1,123 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var hooks_1 = require("preact/hooks");
+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 Icon_1 = require("../../Atoms/Icon");
+var useA11y_1 = require("../../../hooks/useA11y");
+var hooks_2 = require("../../../hooks");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var defaultStyles = function (_a) {
+    var _b, _c;
+    var size = _a.size, color = _a.color, theme = _a.theme, native = _a.native;
+    var pixelSize = isNaN(Number(size)) ? size : "".concat(size, "px");
+    if (!native) {
+        return (0, react_1.css)({
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: pixelSize,
+            width: pixelSize,
+            border: "1px solid ".concat(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) || '#333'),
+            '&.ss__checkbox--disabled': {
+                opacity: 0.7,
+            },
+            '& .ss__checkbox__empty': {
+                display: 'inline-block',
+                width: "calc(".concat(size, " - 30%)"),
+                height: "calc(".concat(size, " - 30%)"),
+            },
+        });
+    }
+    else {
+        return (0, react_1.css)({});
+    }
+};
+exports.Checkbox = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a;
+    var _b, _c;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        size: '12px',
+        startChecked: false,
+        disableA11y: false,
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('checkbox', globalTheme, defaultProps, properties);
+    var checked = props.checked, color = props.color, disabled = props.disabled, icon = props.icon, iconColor = props.iconColor, onClick = props.onClick, size = props.size, startChecked = props.startChecked, native = props.native, disableA11y = props.disableA11y, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, theme = props.theme, treePath = props.treePath, lang = props.lang, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, ____ = props.name, additionalProps = __rest(props, ["checked", "color", "disabled", "icon", "iconColor", "onClick", "size", "startChecked", "native", "disableA11y", "disableStyles", "className", "internalClassName", "theme", "treePath", "lang", "style", "styleScript", "themeStyleScript", "name"]);
+    var pixelSize = isNaN(Number(size)) ? size : "".concat(size, "px");
+    var subProps = {
+        icon: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__checkbox__icon', icon: 'check-thin' }, (0, utilities_1.defined)({
+            color: iconColor || 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),
+            disableStyles: disableStyles,
+            icon: icon,
+            size: pixelSize && "calc(".concat(pixelSize, " - 30%)"),
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+    };
+    var checkedState, setCheckedState;
+    var stateful = checked === undefined;
+    if (stateful) {
+        _a = (0, hooks_1.useState)(startChecked), checkedState = _a[0], setCheckedState = _a[1];
+    }
+    else {
+        checkedState = checked;
+    }
+    var clickFunc = function (e) {
+        if (!disabled) {
+            if (stateful) {
+                setCheckedState &&
+                    setCheckedState(function (prev) {
+                        return !prev;
+                    });
+            }
+            onClick && onClick(e);
+        }
+    };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    //initialize lang
+    var defaultLang = {
+        checkbox: {},
+    };
+    //deep merge with props.lang
+    var _lang = (0, deepmerge_1.default)(defaultLang, lang || {});
+    var mergedLang = (0, hooks_2.useLang)(_lang, {
+        checkedState: checkedState,
+        disabled: disabled,
+    });
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: native ? ((0, jsx_runtime_1.jsx)("input", __assign({}, styling, { className: (0, classnames_1.default)('ss__checkbox', 'ss__checkbox--native', { 'ss__checkbox--disabled': disabled, 'ss__checkbox--active': checkedState }, className, internalClassName), type: "checkbox", "aria-checked": checkedState, onClick: function (e) { return clickFunc(e); }, disabled: disabled, checked: checkedState }))) : ((0, jsx_runtime_1.jsx)("span", __assign({}, styling, { className: (0, classnames_1.default)('ss__checkbox', { 'ss__checkbox--disabled': disabled, 'ss__checkbox--active': checkedState }, className, internalClassName), onClick: function (e) { return clickFunc(e); }, ref: function (e) { return (!disableA11y ? (0, useA11y_1.useA11y)(e) : null); }, "aria-disabled": disabled, role: "checkbox", "aria-checked": checkedState }, additionalProps, mergedLang.checkbox.all, { children: checkedState ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon)))) : ((0, jsx_runtime_1.jsx)("span", { className: "ss__checkbox__empty" })) }))) }));
+});

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

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

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