@athoscommerce/snap-preact 1.0.0

package/dist/esm/components/src/components/Atoms/Banner/Banner.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath, withTracking, withController } from '../../../providers';
+import { mergeProps, mergeStyles } from '../../../utilities';
+import { ContentType } from '@athoscommerce/snap-store-mobx';
+import { useCallback } from 'preact/hooks';
+const defaultStyles = () => {
+    return css({
+        ' *': {
+            boxSizing: 'border-box',
+        },
+        '& iframe, img': {
+            maxWidth: '100%',
+            height: 'auto',
+        },
+    });
+};
+export const Banner = withController(observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('banner', globalTheme, defaultProps, properties);
+    const { controller, type, className, internalClassName } = props;
+    const content = props.content || controller?.store?.merchandising.content;
+    if (type === ContentType.INLINE) {
+        console.warn(`BannerType '${ContentType.INLINE}' is not supported in <Banner /> component`);
+        return null;
+    }
+    const styling = mergeStyles(props, defaultStyles);
+    const banner = content?.[type]?.[0];
+    const value = banner?.value;
+    if (!type || !value) {
+        return null;
+    }
+    const Content = useCallback(withTracking((trackingProps) => {
+        return (_jsx("div", { className: classnames('ss__banner', `ss__banner--${type}`, className, internalClassName), ...styling, ref: trackingProps.trackingRef, dangerouslySetInnerHTML: {
+                __html: typeof value === 'string' ? value : value.join(''),
+            } }));
+    }), [value, type]);
+    return (_jsx(CacheProvider, { children: _jsx(Content, { ...props }) }));
+}));

package/dist/esm/components/src/components/Atoms/Banner/index.d.ts

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

package/dist/esm/components/src/components/Atoms/Banner/index.d.ts.map

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

package/dist/esm/components/src/components/Atoms/Banner/index.js

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

package/dist/esm/components/src/components/Atoms/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps } from '../../../types';
+import { SearchController } from '@athoscommerce/snap-controller';
+import { IconProps, IconType } from '../Icon';
+export declare const Breadcrumbs: ((properties: BreadcrumbsProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export type BreadcrumbsProps = {
+    controller?: SearchController;
+} & BreadcrumbsTemplatesLegalProps & ComponentProps<BreadcrumbsProps>;
+export type BreadcrumbsTemplatesLegalProps = {
+    data?: {
+        label: string;
+        url?: string;
+    }[] | ((controller?: SearchController) => {
+        label: string;
+        url?: string;
+    }[]);
+    separator?: string | JSX.Element | false;
+    separatorIcon?: IconType | Partial<IconProps> | false;
+};
+//# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/esm/components/src/components/Atoms/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAepD,eAAO,MAAM,WAAW,gBAAyB,gBAAgB;;CAuE/D,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG;IAC9B,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC9B,GAAG,8BAA8B,GACjC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAElC,MAAM,MAAM,8BAA8B,GAAG;IAC5C,IAAI,CAAC,EACF;QACA,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;KACZ,EAAE,GACH,CAAC,CAAC,UAAU,CAAC,EAAE,gBAAgB,KAAK;QACpC,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;KACZ,EAAE,CAAC,CAAC;IACR,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACzC,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;CACtD,CAAC"}

package/dist/esm/components/src/components/Atoms/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Icon } from '../Icon';
+const defaultStyles = () => {
+    return css({
+        '& .ss__breadcrumbs__crumbs': {
+            padding: '0',
+            display: 'flex',
+        },
+        '& .ss__breadcrumbs__crumbs__crumb, & .ss__breadcrumbs__crumbs__separator': {
+            padding: '0 5px',
+            display: 'inline-block',
+        },
+    });
+};
+export const Breadcrumbs = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        separator: '>',
+        treePath: globalTreePath,
+        data: properties.controller
+            ? (controller) => {
+                return [
+                    { label: 'Search' },
+                    { label: `Results ${controller?.store.search?.query?.string ? `for "${controller?.store.search?.query?.string}"` : ''}` },
+                ];
+            }
+            : [{ label: 'Search' }],
+    };
+    const props = mergeProps('breadcrumbs', globalTheme, defaultProps, properties);
+    const { data, separator, separatorIcon, className, internalClassName, controller, disableStyles, treePath } = props;
+    const subProps = {
+        icon: {
+            internalClassName: 'ss__breadcrumbs__separator__icon',
+            // default props
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    let _data;
+    if (typeof data == 'function') {
+        _data = data(controller);
+    }
+    else {
+        _data = data;
+    }
+    return _data ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__breadcrumbs', className, internalClassName), children: _jsx("ul", { className: "ss__breadcrumbs__crumbs", children: _data
+                    .map((crumb) => (_jsx("li", { className: "ss__breadcrumbs__crumbs__crumb", children: crumb.url ? _jsx("a", { href: crumb.url, children: crumb.label }) : crumb.label })))
+                    .reduce((prev, curr) => [
+                    prev,
+                    _jsxs("li", { className: "ss__breadcrumbs__crumbs__separator", children: [separator !== false ? separator : _jsx(_Fragment, {}), separatorIcon && (_jsx(Icon, { ...subProps.icon, ...(typeof separatorIcon == 'string' ? { icon: separatorIcon } : separatorIcon) }))] }),
+                    curr,
+                ]) }) }) })) : (_jsx(_Fragment, {}));
+});

package/dist/esm/components/src/components/Atoms/Breadcrumbs/index.d.ts

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

package/dist/esm/components/src/components/Atoms/Breadcrumbs/index.d.ts.map

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

package/dist/esm/components/src/components/Atoms/Breadcrumbs/index.js

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

package/dist/esm/components/src/components/Atoms/Button/Button.d.ts

@@ -0,0 +1,28 @@
+import { ComponentChildren } from 'preact';
+import { ComponentProps } from '../../../types';
+import { IconProps, IconType } from '../Icon';
+import { Lang } from '../../../hooks';
+export declare const Button: ((properties: ButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type ButtonProps = {
+    lang?: Partial<ButtonLang>;
+    name?: ButtonNames;
+} & ButtonTemplatesLegalProps & ComponentProps<ButtonProps>;
+export type ButtonTemplatesLegalProps = {
+    backgroundColor?: string;
+    borderColor?: string;
+    color?: string;
+    icon?: IconType | Partial<IconProps> | boolean;
+    content?: string | JSX.Element;
+    children?: ComponentChildren;
+    disabled?: boolean;
+    native?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    disableA11y?: boolean;
+};
+export interface ButtonLang {
+    button?: Lang<never>;
+}
+export type ButtonNames = 'close' | 'apply' | 'clear' | 'slideout' | 'sidebar-toggle' | 'see-more' | 'next' | 'prev' | 'pause' | 'pagination' | 'pagination-current' | 'close-search' | 'clear-search' | 'submit-search' | 'reset-facet';
+//# sourceMappingURL=Button.d.ts.map

package/dist/esm/components/src/components/Atoms/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAM9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAyC/C,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAwFrD,CAAC;AAMH,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;CACnB,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,MAAM,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,MAAM,MAAM,WAAW,GACpB,OAAO,GACP,OAAO,GACP,OAAO,GACP,UAAU,GACV,gBAAgB,GAChB,UAAU,GACV,MAAM,GACN,MAAM,GACN,OAAO,GACP,YAAY,GACZ,oBAAoB,GACpB,cAAc,GACd,cAAc,GACd,eAAe,GACf,aAAa,CAAC"}

package/dist/esm/components/src/components/Atoms/Button/Button.js

@@ -0,0 +1,85 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useA11y } from '../../../hooks/useA11y';
+import { cloneWithProps, defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Icon } from '../Icon';
+import { useLang } from '../../../hooks';
+import deepmerge from 'deepmerge';
+import Color from 'color';
+const defaultStyles = ({ native, color, backgroundColor, borderColor, theme }) => {
+    const lightenedPrimaryColorObj = new Color(backgroundColor || color || theme?.variables?.colors?.primary || undefined).lightness(95);
+    // no styling on native
+    if (native) {
+        return css({});
+    }
+    return css({
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '5px',
+        padding: '5px 10px',
+        position: 'relative',
+        color: color || theme?.variables?.colors?.primary,
+        outline: 0,
+        backgroundColor: backgroundColor || '#fff',
+        border: `1px solid ${borderColor || color || theme?.variables?.colors?.primary || '#333'}`,
+        '&:not(.ss__button--disabled):hover': {
+            cursor: 'pointer',
+            backgroundColor: lightenedPrimaryColorObj.hex() || '#f8f8f8',
+        },
+        '&.ss__button--disabled': {
+            opacity: 0.7,
+            '&:hover': {
+                cursor: 'default',
+            },
+        },
+        '.ss__button__content': {
+            width: '100%',
+        },
+        label: {
+            cursor: 'pointer',
+        },
+    });
+};
+export const Button = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        disableA11y: false,
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('button', globalTheme, defaultProps, properties);
+    const { content, children, disabled, native, onClick, disableA11y, disableStyles, className, internalClassName, icon, lang, treePath, style: _, styleScript: __, themeStyleScript: ___, ...additionalProps } = props;
+    const subProps = {
+        icon: {
+            internalClassName: 'ss__button__icon',
+            // default props
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    const elementProps = {
+        ...styling,
+        className: classnames('ss__button', { 'ss__button--native': native, 'ss__button--disabled': disabled }, className, internalClassName),
+        disabled,
+        onClick: (e) => !disabled && onClick && onClick(e),
+        ...additionalProps,
+    };
+    const a11yProps = {
+        ref: (e) => useA11y(e),
+    };
+    //initialize lang
+    const defaultLang = {};
+    //deep merge with props.lang
+    const langs = deepmerge(defaultLang, lang || {});
+    const mergedLang = useLang(langs, {});
+    return content || children || icon || lang?.button?.value ? (_jsx(CacheProvider, { children: native ? (_jsxs("button", { ...elementProps, children: [_jsxs("span", { className: "ss__button__content", ...mergedLang.button?.all, children: [cloneWithProps(content, { treePath }), cloneWithProps(children, { treePath })] }), icon && _jsx(Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) })] })) : (_jsxs("div", { ...(!disableA11y ? a11yProps : {}), role: 'button', "aria-disabled": disabled, ...elementProps, ...mergedLang.button?.attributes, children: [content || children || mergedLang.button?.value ? (_jsxs("span", { className: "ss__button__content", ...mergedLang.button?.value, children: [cloneWithProps(content, { treePath }), cloneWithProps(children, { treePath })] })) : undefined, icon && _jsx(Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) })] })) })) : null;
+});

package/dist/esm/components/src/components/Atoms/Button/index.d.ts

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

package/dist/esm/components/src/components/Atoms/Button/index.d.ts.map

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

package/dist/esm/components/src/components/Atoms/Button/index.js

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

package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.d.ts

@@ -0,0 +1,26 @@
+import { ComponentChildren } from 'preact';
+import { ComponentProps } from '../../../types';
+export declare const Dropdown: ((properties: DropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export type DropdownProps = DropdownTemplatesLegalProps & ComponentProps<DropdownProps>;
+export type DropdownTemplatesLegalProps = {
+    button: string | JSX.Element;
+    content?: string | JSX.Element;
+    children?: ComponentChildren;
+    disabled?: boolean;
+    open?: boolean;
+    disableClick?: boolean;
+    disableOverlay?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onToggle?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, showContent: boolean) => void;
+    startOpen?: boolean;
+    toggleOnHover?: boolean;
+    disableClickOutside?: boolean;
+    focusTrapContent?: boolean;
+    disableA11y?: boolean;
+    usePortal?: boolean;
+};
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAQ9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA+B7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAkNzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,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,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.js

@@ -0,0 +1,169 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createPortal } from 'preact/compat';
+import { useState, useRef, useEffect } from 'preact/hooks';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useClickOutside } from '../../../hooks';
+import { cloneWithProps, mergeProps, mergeStyles } from '../../../utilities';
+import { useA11y } from '../../../hooks/useA11y';
+const defaultStyles = ({ disableOverlay }) => {
+    return css({
+        position: 'relative',
+        '&.ss__dropdown--open, &.ss__dropdown__portal--open': {
+            '& .ss__dropdown__content': {
+                position: disableOverlay ? 'relative' : undefined,
+                visibility: 'visible',
+                opacity: 1,
+            },
+        },
+        '.ss__dropdown__button': {
+            cursor: `${disableOverlay ? 'default' : 'pointer'}`,
+        },
+        '.ss__dropdown__content': {
+            backgroundColor: '#fff',
+            position: 'absolute',
+            minWidth: '100%',
+            visibility: 'hidden',
+            opacity: 0,
+            top: 'auto',
+            left: 0,
+        },
+    });
+};
+export const Dropdown = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        startOpen: false,
+        disableA11y: false,
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('dropdown', globalTheme, defaultProps, properties);
+    const { button, content, children, disabled, open, toggleOnHover, onMouseEnter, onMouseLeave, disableClick, onClick, onToggle, focusTrapContent, startOpen, disableClickOutside, disableA11y, className, internalClassName, treePath, usePortal, } = props;
+    let dropdownOpen, setDropdownOpen;
+    const stateful = open === undefined;
+    if (stateful) {
+        [dropdownOpen, setDropdownOpen] = useState(startOpen);
+    }
+    else {
+        dropdownOpen = open;
+    }
+    // state to track touch interactions
+    const [isTouchInteraction, setIsTouchInteraction] = useState(false);
+    const buttonRef = useRef(null);
+    const contentRef = useRef(null);
+    const [coords, setCoords] = useState({ top: 0, left: 0, width: 0 });
+    let innerRef;
+    if (!disableClickOutside) {
+        innerRef = useClickOutside((e) => {
+            if (usePortal && contentRef.current && contentRef.current.contains(e.target)) {
+                return;
+            }
+            if (dropdownOpen) {
+                if (!disabled) {
+                    stateful && setDropdownOpen && setDropdownOpen(false);
+                    onToggle && onToggle(e, false);
+                }
+            }
+        });
+    }
+    useEffect(() => {
+        if (usePortal && dropdownOpen) {
+            const updateCoords = () => {
+                if (buttonRef.current) {
+                    const rect = buttonRef.current.getBoundingClientRect();
+                    setCoords({
+                        top: rect.bottom + window.scrollY,
+                        left: rect.left + window.scrollX,
+                        width: rect.width,
+                    });
+                }
+            };
+            updateCoords();
+            window.addEventListener('resize', updateCoords);
+            window.addEventListener('scroll', updateCoords, true);
+            return () => {
+                window.removeEventListener('resize', updateCoords);
+                window.removeEventListener('scroll', updateCoords, true);
+            };
+        }
+    }, [usePortal, dropdownOpen]);
+    const toggleOpenDropdown = (e, state) => {
+        if (stateful) {
+            setDropdownOpen &&
+                setDropdownOpen((prev) => {
+                    const newState = state ?? !prev;
+                    if (newState != prev) {
+                        onToggle && onToggle(e, newState);
+                    }
+                    return newState;
+                });
+        }
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    const hoverProps = {
+        onMouseEnter: (toggleOnHover || onMouseEnter) &&
+            ((e) => {
+                // skip if it's a touch interaction
+                if (isTouchInteraction)
+                    return;
+                if (toggleOnHover && !disabled) {
+                    toggleOpenDropdown(e, true);
+                }
+                onMouseEnter && onMouseEnter(e);
+            }),
+        onMouseLeave: (toggleOnHover || onMouseLeave) &&
+            ((e) => {
+                // skip if it's a touch interaction
+                if (isTouchInteraction)
+                    return;
+                if (toggleOnHover && !disabled) {
+                    toggleOpenDropdown(e, false);
+                }
+                onMouseLeave && onMouseLeave(e);
+            }),
+    };
+    const contentElement = (_jsxs("div", { className: `ss__dropdown__content`, ref: (e) => {
+            contentRef.current = e;
+            if (!disableA11y) {
+                useA11y(e, 0, Boolean(focusTrapContent), (e) => {
+                    if (stateful) {
+                        toggleOpenDropdown(e);
+                    }
+                    else {
+                        onClick && onClick(e);
+                    }
+                });
+            }
+        }, children: [cloneWithProps(content, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath }), cloneWithProps(children, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath })] }));
+    return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__dropdown', { 'ss__dropdown--open': dropdownOpen }, className, internalClassName), ref: innerRef, ...hoverProps, children: [_jsx("div", { className: "ss__dropdown__button", ref: (e) => {
+                        buttonRef.current = e;
+                        if (!disableA11y)
+                            useA11y(e);
+                    }, "aria-expanded": dropdownOpen, role: "button", onTouchStart: () => {
+                        // mark this as a touch interaction to avoid hover state conflicts
+                        setIsTouchInteraction(true);
+                    }, onClick: (e) => {
+                        if (!disabled && !disableClick) {
+                            toggleOpenDropdown(e);
+                            onClick && onClick(e);
+                        }
+                        // reset touch interaction after a short delay
+                        // this gives time for the click handler to complete before allowing hover events again
+                        setTimeout(() => {
+                            setIsTouchInteraction(false);
+                        }, 300);
+                    }, children: cloneWithProps(button, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath }) }), !usePortal
+                    ? (content || children) && contentElement
+                    : dropdownOpen &&
+                        (content || children) &&
+                        createPortal(_jsx("div", { className: classnames('ss__dropdown__portal', className, internalClassName, { 'ss__dropdown__portal--open': dropdownOpen }), css: styling.css, style: {
+                                position: 'absolute',
+                                top: coords.top,
+                                left: coords.left,
+                                width: coords.width,
+                                zIndex: 9999,
+                            }, children: contentElement }), document.body)] }) }));
+});

package/dist/esm/components/src/components/Atoms/Dropdown/index.d.ts

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

package/dist/esm/components/src/components/Atoms/Dropdown/index.d.ts.map

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

package/dist/esm/components/src/components/Atoms/Dropdown/index.js

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

package/dist/esm/components/src/components/Atoms/FormattedNumber/FormattedNumber.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from '../../../types';
+export declare function FormattedNumber(properties: FormattedNumberProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export type FormattedNumberProps = FormattedNumberTemplatesLegalProps & ComponentProps<FormattedNumberProps>;
+export type FormattedNumberTemplatesLegalProps = {
+    value: number;
+    symbol?: string;
+    decimalPlaces?: number;
+    padDecimalPlaces?: boolean;
+    thousandsSeparator?: string;
+    decimalSeparator?: string;
+    symbolAfter?: boolean;
+    raw?: boolean;
+};
+//# sourceMappingURL=FormattedNumber.d.ts.map

package/dist/esm/components/src/components/Atoms/FormattedNumber/FormattedNumber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedNumber.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/FormattedNumber/FormattedNumber.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAO7D,wBAAgB,eAAe,CAAC,UAAU,EAAE,oBAAoB,oDAuC/D;AAED,MAAM,MAAM,oBAAoB,GAAG,kCAAkC,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AAE7G,MAAM,MAAM,kCAAkC,GAAG;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,OAAO,CAAC;CACd,CAAC"}

package/dist/esm/components/src/components/Atoms/FormattedNumber/FormattedNumber.js

@@ -0,0 +1,34 @@
+import { Fragment as _Fragment, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import { filters } from '@athoscommerce/snap-toolbox';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { mergeProps, mergeStyles } from '../../../utilities';
+const defaultStyles = () => {
+    return css({});
+};
+export function FormattedNumber(properties) {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        symbol: '',
+        decimalPlaces: 3,
+        padDecimalPlaces: true,
+        thousandsSeparator: '',
+        decimalSeparator: '.',
+        symbolAfter: true,
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('formattedNumber', globalTheme, defaultProps, properties);
+    const { value, symbol, decimalPlaces, padDecimalPlaces, thousandsSeparator, decimalSeparator, symbolAfter, className, internalClassName, raw } = props;
+    const formattedNumber = filters.formatNumber(value, {
+        symbol,
+        decimalPlaces,
+        padDecimalPlaces,
+        thousandsSeparator,
+        decimalSeparator,
+        symbolAfter,
+    });
+    const styling = mergeStyles(props, defaultStyles);
+    return raw ? (_jsx(_Fragment, { children: formattedNumber })) : (_jsx(CacheProvider, { children: _jsx("span", { className: classnames('ss__formatted-number', className, internalClassName), ...styling, children: formattedNumber }) }));
+}

package/dist/esm/components/src/components/Atoms/FormattedNumber/index.d.ts

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

package/dist/esm/components/src/components/Atoms/FormattedNumber/index.d.ts.map

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

package/dist/esm/components/src/components/Atoms/FormattedNumber/index.js

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

package/dist/esm/components/src/components/Atoms/Icon/Icon.d.ts

@@ -0,0 +1,28 @@
+import { ComponentChildren } from 'preact';
+import { ComponentProps } from '../../../types';
+import { IconType } from './paths';
+export declare function Icon(properties: IconProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export type SVGPathElement = {
+    type: string;
+    attributes: {
+        [attribute: string]: string;
+    };
+};
+export type IconProps = {
+    name?: IconNames;
+} & IconTemplatesLegalProps & ComponentProps<IconProps>;
+export type IconTemplatesLegalProps = {
+    color?: string;
+    fill?: string;
+    stroke?: string;
+    icon?: IconType | false;
+    title?: string;
+    path?: string | SVGPathElement[];
+    children?: ComponentChildren;
+    size?: string | number;
+    width?: string | number;
+    height?: string | number;
+    viewBox?: string;
+};
+export type IconNames = 'bundle-cart' | 'bundle-selector' | 'bundle-cart-separator' | 'next' | 'prev' | 'active' | 'inactive' | 'star--empty' | 'star--full' | 'selection' | 'open' | 'close' | 'option' | 'expand' | 'collapse' | 'overflow-more' | 'overflow-less';
+//# sourceMappingURL=Icon.d.ts.map

package/dist/esm/components/src/components/Atoms/Icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAM9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAa9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2DA8DzC;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QACX,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;KAC5B,CAAC;CACF,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAClB,aAAa,GACb,iBAAiB,GACjB,uBAAuB,GACvB,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,GACV,aAAa,GACb,YAAY,GACZ,WAAW,GACX,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,eAAe,GACf,eAAe,CAAC"}