@athoscommerce/snap-preact 1.0.0

package/dist/esm/components/src/themes/themeComponents/searchHorizontal.js

@@ -0,0 +1,46 @@
+export const searchHorizontalThemeComponentProps = {
+    default: {
+        searchHorizontal: {
+            hideSidebar: true,
+        },
+        'searchHorizontal toolbar.top': {
+            layout: [['searchHeader'], ['banner.header']],
+        },
+        'searchHorizontal toolbar.middle': {
+            layout: [['filterSummary'], ['facetsHorizontal'], ['paginationInfo', '_', 'sortBy', 'perPage'], ['banner.banner']],
+        },
+        'searchHorizontal toolbar.bottom': {
+            layout: [['banner.footer'], ['_', 'pagination', '_']],
+        },
+        'searchHorizontal facetsHorizontal': {
+            limit: 9,
+        },
+        'searchHorizontal mobileSidebar': {
+            layout: ['filterSummary', 'facets', 'banner.left'],
+        },
+    },
+    mobile: {
+        'searchHorizontal toolbar.middle': {
+            layout: [['paginationInfo', '_', 'mobileSidebar'], ['sortBy', 'perPage'], ['banner.banner']],
+        },
+        'searchHorizontal facetsHorizontal': {
+            limit: 4,
+        },
+        'searchHorizontal results': {
+            columns: 2,
+        },
+    },
+    tablet: {
+        'searchHorizontal facetsHorizontal': {
+            limit: 5,
+        },
+        'searchHorizontal results': {
+            columns: 3,
+        },
+    },
+    desktop: {
+        'searchHorizontal facetsHorizontal': {
+            limit: 7,
+        },
+    },
+};

package/dist/esm/components/src/toolbox/createHoverProps/createHoverProps.d.ts

@@ -0,0 +1,8 @@
+export declare const createHoverProps: (callback?: () => void, options?: {
+    delay?: number;
+    focusElem?: boolean;
+}) => {
+    onMouseEnter: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    onMouseLeave: () => void;
+};
+//# sourceMappingURL=createHoverProps.d.ts.map

package/dist/esm/components/src/toolbox/createHoverProps/createHoverProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createHoverProps.d.ts","sourceRoot":"","sources":["../../../../../../components/src/toolbox/createHoverProps/createHoverProps.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,cAAe,MAAM,IAAI,YAAW;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE;sBAIpF,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC;;CAWlE,CAAC"}

package/dist/esm/components/src/toolbox/createHoverProps/createHoverProps.js

@@ -0,0 +1,15 @@
+export const createHoverProps = (callback, options = { delay: 333, focusElem: true }) => {
+    let delayTimeout;
+    return {
+        onMouseEnter: (e) => {
+            clearTimeout(delayTimeout);
+            delayTimeout = window.setTimeout(() => {
+                options.focusElem && e.target.focus();
+                callback && callback();
+            }, options.delay || 333);
+        },
+        onMouseLeave: () => {
+            clearTimeout(delayTimeout);
+        },
+    };
+};

package/dist/esm/components/src/toolbox/index.d.ts

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

package/dist/esm/components/src/toolbox/index.d.ts.map

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

package/dist/esm/components/src/toolbox/index.js

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

package/dist/esm/components/src/types.d.ts

@@ -0,0 +1,84 @@
+import type { SerializedStyles } from '@emotion/react';
+import { h } from 'preact';
+import type { ThemeMinimal, Theme } from './providers/theme';
+import type { AbstractController } from '@athoscommerce/snap-controller';
+import type { UrlManager } from '@athoscommerce/snap-url-manager';
+import type { Product } from '@athoscommerce/snap-store-mobx';
+import { IconProps, IconType } from './components/Atoms/Icon';
+import { MutableRef } from 'preact/hooks';
+import type { Snap, SnapTemplates } from '../../src';
+import type { CSSObject } from '@emotion/serialize';
+import { RecommendationProps } from './components/Templates/Recommendation';
+import { RecommendationGridProps } from './components/Templates/RecommendationGrid';
+import { RecommendationBundleProps } from './components/Templates/RecommendationBundle';
+import { RecommendationBundleEasyAddProps } from './components/Templates/RecommendationBundleEasyAdd';
+import { RecommendationBundleListProps } from './components/Templates/RecommendationBundleList';
+import { RecommendationBundleVerticalProps } from './components/Templates/RecommendationBundleVertical';
+export type StyleScript<Props> = (props: Props) => SerializedStyles;
+export interface ComponentProps<Props = any> {
+    className?: string;
+    internalClassName?: string;
+    disableStyles?: boolean;
+    style?: CSSObject;
+    styleScript?: StyleScript<Props>;
+    themeStyleScript?: StyleScript<Props>;
+    theme?: Theme;
+    controller?: AbstractController;
+    snap?: Snap | SnapTemplates;
+    ref?: MutableRef<any> | React.RefObject<any> | ((e: any) => void);
+    name?: string;
+    treePath?: string;
+}
+export type ListOption = {
+    value: string | number;
+    label?: string;
+    disabled?: boolean;
+    default?: boolean;
+    icon?: IconType | Partial<IconProps>;
+    overrides?: ThemeMinimal;
+    url?: UrlManager;
+    available?: boolean;
+};
+export type ResultComponent<Props extends Record<string, any> = object> = (props: {
+    controller: AbstractController;
+    result: Product;
+    theme?: Theme;
+    treePath?: string;
+} & Props) => h.JSX.Element | null;
+export type RecommendationBundleComponentNames = 'RecommendationBundle' | 'RecommendationBundleEasyAdd' | 'RecommendationBundleList' | 'RecommendationBundleVertical' | 'RecommendationBundle';
+export type RecommendationBundleComponentProps = RecommendationBundleProps | RecommendationBundleEasyAddProps | RecommendationBundleListProps | RecommendationBundleVerticalProps | RecommendationBundleProps;
+export type RecommendationComponentNames = 'Recommendation' | 'RecommendationGrid';
+export type RecommendationComponentProps = RecommendationProps | RecommendationGridProps;
+export declare enum ResultsLayout {
+    grid = "grid",
+    list = "list"
+}
+export declare enum FacetDisplay {
+    GRID = "grid",
+    PALETTE = "palette",
+    LIST = "list",
+    SLIDER = "slider",
+    HIERARCHY = "hierarchy",
+    TOGGLE = "toggle"
+}
+export type BreakpointsProps = {
+    [key: number]: BreakpointsEntry;
+};
+export type BreakpointsEntry = {
+    [property: string]: any;
+};
+export type StylingCSS = Array<CSSObject | SerializedStyles | undefined>;
+export type RootNodeProperties = {
+    css?: StylingCSS;
+    'ss-name'?: string;
+    'ss-path'?: string;
+};
+export type SwatchOption = ListOption & {
+    backgroundImageUrl?: string;
+    background?: string;
+};
+export type JSXComponent = (props: any) => h.JSX.Element | null;
+export type ComponentMap = {
+    [componentName: string]: (args?: any) => Promise<JSXComponent> | JSXComponent;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/components/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../components/src/types.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/src/types.js

@@ -0,0 +1,15 @@
+export var ResultsLayout;
+(function (ResultsLayout) {
+    ResultsLayout["grid"] = "grid";
+    ResultsLayout["list"] = "list";
+})(ResultsLayout || (ResultsLayout = {}));
+// TODO: should be added to the Facet type
+export var FacetDisplay;
+(function (FacetDisplay) {
+    FacetDisplay["GRID"] = "grid";
+    FacetDisplay["PALETTE"] = "palette";
+    FacetDisplay["LIST"] = "list";
+    FacetDisplay["SLIDER"] = "slider";
+    FacetDisplay["HIERARCHY"] = "hierarchy";
+    FacetDisplay["TOGGLE"] = "toggle";
+})(FacetDisplay || (FacetDisplay = {}));

package/dist/esm/components/src/utilities/Colour/Colour.d.ts

@@ -0,0 +1,22 @@
+export declare class Colour {
+    private value;
+    private rgbValue;
+    private hexValue;
+    get hex(): string | undefined;
+    get rgb(): string | undefined;
+    get contrast(): string | undefined;
+    constructor(value: string | undefined);
+    shift(offset: number): Colour;
+    lighten(offset: number): Colour;
+    darken(offset: number): Colour;
+    opacity(offset: number): Colour;
+    transparency(offset: number): Colour;
+    opaque(offset: number): Colour;
+    static isRgb(color: string): boolean;
+    static isHex(color: string): boolean;
+    static hexToRgb(hex: string): string;
+    static rgbToHex(rgb: string): string;
+    static opacity(color: string | undefined, offset: number): string | undefined;
+    static brightness(color: string | undefined, offset: number): string | undefined;
+}
+//# sourceMappingURL=Colour.d.ts.map

package/dist/esm/components/src/utilities/Colour/Colour.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Colour.d.ts","sourceRoot":"","sources":["../../../../../../components/src/utilities/Colour/Colour.ts"],"names":[],"mappings":"AAqBA,qBAAa,MAAM;IAClB,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,QAAQ,CAAqB;IAErC,IAAW,GAAG,IAAI,MAAM,GAAG,SAAS,CAOnC;IAED,IAAW,GAAG,IAAI,MAAM,GAAG,SAAS,CAOnC;IAED,IAAW,QAAQ,IAAI,MAAM,GAAG,SAAS,CAoBxC;gBAEW,KAAK,EAAE,MAAM,GAAG,SAAS;IAuBrC,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAI7B,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAK/B,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAK9B,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAI/B,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAKpC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAK9B,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAOpC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIpC,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAgBpC,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAoBpC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IA+B7E,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;CAoChF"}

package/dist/esm/components/src/utilities/Colour/Colour.js

@@ -0,0 +1,219 @@
+/*
+    Colour Class - for shifting hex colors
+    * requires hexadecimal color
+    * can add transparency
+    * can lighten and darken via shift
+
+    red = new Colour('#ff0000');
+
+    // get hex value
+    const redHex = red.hex;
+
+    // get rgb value
+    const redRgb = red.rgb;
+
+    // to lighten and make more transparent
+    const lightAndClear = red.lighten(20).transparency(50).hex;
+
+    // to darken and make opaque
+    const lightAndClear = red.darken(20).opaque(50).hex;
+*/
+export class Colour {
+    get hex() {
+        if (this.hexValue) {
+            return this.hexValue;
+        }
+        // when invalid color provided to constructor
+        return this.value;
+    }
+    get rgb() {
+        if (this.rgbValue) {
+            return this.rgbValue;
+        }
+        // when invalid color provided to constructor
+        return this.value;
+    }
+    get contrast() {
+        if (this.hexValue) {
+            // determine if text should be black or white by common algorithm
+            const red = parseInt(this.hexValue.slice(1, 3), 16);
+            const green = parseInt(this.hexValue.slice(3, 5), 16);
+            const blue = parseInt(this.hexValue.slice(5, 7), 16);
+            const normalized = [red / 255, green / 255, blue / 255];
+            const calculation = normalized.map((color) => {
+                if (color <= 0.03928) {
+                    return color / 12.92;
+                }
+                return Math.pow((color + 0.055) / 1.055, 2.4);
+            });
+            const luminosity = 0.2126 * calculation[0] + 0.7152 * calculation[1] + 0.0722 * calculation[2];
+            return luminosity <= 0.179 ? '#ffffff' : '#000000';
+        }
+        // when invalid color provided to constructor
+        return this.value;
+    }
+    constructor(value) {
+        this.value = value;
+        if (value) {
+            if (value.match(/^#[a,b,c,d,e,f,0-9]{3}$/i)) {
+                // convert 3 digit hex to 6 digit hex
+                value = `#${value[1].repeat(2)}${value[2].repeat(2)}${value[3].repeat(2)}`;
+            }
+            if (Colour.isHex(value)) {
+                // store hex value after verification
+                this.hexValue = value;
+                // store rgb value after transformation
+                this.rgbValue = Colour.hexToRgb(value);
+            }
+            else if (Colour.isRgb(value)) {
+                // store rgb after verification
+                this.rgbValue = value;
+                // store hex value after transformation
+                this.hexValue = Colour.rgbToHex(value);
+            }
+        }
+    }
+    shift(offset) {
+        return new Colour(Colour.brightness(this.hex, offset));
+    }
+    lighten(offset) {
+        if (offset < 0)
+            return this;
+        return new Colour(Colour.brightness(this.hex, offset));
+    }
+    darken(offset) {
+        if (offset < 0)
+            return this;
+        return new Colour(Colour.brightness(this.hex, -offset));
+    }
+    opacity(offset) {
+        return new Colour(Colour.opacity(this.hex, offset));
+    }
+    transparency(offset) {
+        if (offset < 0)
+            return this;
+        return new Colour(Colour.opacity(this.hex, offset));
+    }
+    opaque(offset) {
+        if (offset < 0)
+            return this;
+        return new Colour(Colour.opacity(this.hex, -offset));
+    }
+    static isRgb(color) {
+        return Boolean(color.match(/^rgba?\([0-9]{1,3}[\s,\,]+[0-9]{1,3}[\s,\,]+[0-9]{1,3}[\s,\,]*\)$/i) ||
+            color.match(/^rgba?\([0-9]{1,3}[\s,\,]+[0-9]{1,3}[\s,\,]+[0-9]{1,3}[\s,\,]+0?\.?[0-9]+%?[\s,\,]*\)$/i));
+    }
+    static isHex(color) {
+        return Boolean(color.match(/^#[a,b,c,d,e,f,0-9]{6}$/i) || color.match(/^#[a,b,c,d,e,f,0-9]{8}$/i));
+    }
+    static hexToRgb(hex) {
+        if (!Colour.isHex(hex))
+            throw 'invalid hex supplied';
+        const red = parseInt(hex.slice(1, 3), 16);
+        const green = parseInt(hex.slice(3, 5), 16);
+        const blue = parseInt(hex.slice(5, 7), 16);
+        const alpha = parseInt(hex.slice(7, 9), 16);
+        if (Number.isInteger(alpha)) {
+            // convert alpha to fraction and round
+            return `rgba(${red}, ${green}, ${blue}, ${round(alpha / 255)})`;
+        }
+        return `rgb(${red}, ${green}, ${blue})`;
+    }
+    static rgbToHex(rgb) {
+        if (!Colour.isRgb(rgb))
+            throw 'invalid rgb supplied';
+        const [r, g, b, a] = (rgb.match(/[0-9]?\.?[0-9]+%?/g) || []).map((d, index) => {
+            if (index == 3) {
+                // handle alpha percentage
+                if (d.match(/%/)) {
+                    d = (Number(d.replace('%', '').trim()) / 100).toString();
+                }
+                let fraction = Number(d);
+                if (Number.isNaN(fraction) || fraction > 1)
+                    fraction = 1;
+                if (fraction < 0)
+                    fraction = 0;
+                d = Math.floor(fraction * 255).toString();
+            }
+            return Number(d).toString(16).padStart(2, '0');
+        });
+        return `#${r}${g}${b}${a ? a : ''}`;
+    }
+    static opacity(color, offset) {
+        let isRgb = false;
+        if (color && Colour.isRgb(color)) {
+            isRgb = true;
+            color = Colour.rgbToHex(color);
+        }
+        if (!color || !Colour.isHex(color) || !Number.isInteger(offset))
+            return color;
+        // normalize the offset
+        if (offset > 255)
+            offset = 255;
+        if (offset < -255)
+            offset = -255;
+        const alpha = color.slice(7, 9) || 'ff';
+        const alphaValue = parseInt(alpha, 16);
+        let a = alphaValue - offset;
+        if (a > 255)
+            a = 255;
+        else if (a < 0)
+            a = 0;
+        // padout with zeros to ensure 2 digit alpha
+        const newAlpha = a.toString(16).padStart(2, '0');
+        const hexValue = `${color.slice(0, 7)}${newAlpha}`;
+        if (isRgb) {
+            return Colour.hexToRgb(hexValue);
+        }
+        return hexValue;
+    }
+    static brightness(color, offset) {
+        let isRgb = false;
+        if (color && Colour.isRgb(color)) {
+            isRgb = true;
+            color = Colour.rgbToHex(color);
+        }
+        if (!color || !Colour.isHex(color) || !Number.isInteger(offset))
+            return color;
+        // normalize the offset
+        if (offset > 255)
+            offset = 255;
+        if (offset < -255)
+            offset = -255;
+        // remove the # and ignore alpha characters
+        const value = color.slice(1, 7);
+        const num = parseInt(value, 16);
+        let red = (num & 0x0000ff) + offset;
+        if (red > 255)
+            red = 255;
+        else if (red < 0)
+            red = 0;
+        let green = ((num >> 8) & 0x00ff) + offset;
+        if (green > 255)
+            green = 255;
+        else if (green < 0)
+            green = 0;
+        let blue = (num >> 16) + offset;
+        if (blue > 255)
+            blue = 255;
+        else if (blue < 0)
+            blue = 0;
+        // padout with zeros to ensure 6 digits in conversion and tack on alpha characters
+        const hexValue = `#${(red | (green << 8) | (blue << 16)).toString(16).padStart(6, '0')}${color.slice(7, 9)}`;
+        if (isRgb) {
+            return Colour.hexToRgb(hexValue);
+        }
+        return hexValue;
+    }
+}
+function round(number) {
+    // rounding to the nearest hundredth (eg. 0.77)
+    const flooredNumber = Math.floor(number);
+    const decimal = number - flooredNumber;
+    // no decimal, nothing else to do
+    if (!decimal)
+        return number;
+    const tenths = Math.floor(decimal * 10) * 10;
+    const hundredths = Math.round(number * 100 - tenths);
+    return flooredNumber + (tenths + hundredths) / 100;
+}

package/dist/esm/components/src/utilities/cloneWithProps.d.ts

@@ -0,0 +1,2 @@
+export declare const cloneWithProps: (input: any, props?: any) => any;
+//# sourceMappingURL=cloneWithProps.d.ts.map

package/dist/esm/components/src/utilities/cloneWithProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cloneWithProps.d.ts","sourceRoot":"","sources":["../../../../../components/src/utilities/cloneWithProps.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,UAAW,GAAG,UAAU,GAAG,KAAG,GAkBxD,CAAC"}

package/dist/esm/components/src/utilities/cloneWithProps.js

@@ -0,0 +1,23 @@
+import { cloneElement } from 'preact';
+export const cloneWithProps = (input, props) => {
+    if (!input) {
+        return;
+    }
+    else if (typeof input == 'function') {
+        return input(props);
+    }
+    else if (typeof input == 'string' || typeof input == 'number' || typeof input == 'boolean') {
+        return input;
+    }
+    else if (Array.isArray(input)) {
+        return input.map((entry) => {
+            return cloneWithProps(entry, props);
+        });
+    }
+    else if (typeof input?.type == 'string') {
+        // don't want to clone native elements
+        return input;
+    }
+    // clone element and it's children if it has them
+    return cloneElement(input, props, input.props?.children && cloneWithProps(input.props.children, props));
+};

package/dist/esm/components/src/utilities/componentArgs.d.ts

@@ -0,0 +1,58 @@
+export declare const componentArgs: {
+    className: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            category: string;
+            defaultValue: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    disableStyles: {
+        defaultValue: boolean;
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            category: string;
+            defaultValue: {
+                summary: boolean;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    style: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            category: string;
+        };
+        control: {
+            type: string;
+        };
+    };
+    theme: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            category: string;
+        };
+        control: {
+            type: string;
+        };
+    };
+};
+//# sourceMappingURL=componentArgs.d.ts.map

package/dist/esm/components/src/utilities/componentArgs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentArgs.d.ts","sourceRoot":"","sources":["../../../../../components/src/utilities/componentArgs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CzB,CAAC"}

package/dist/esm/components/src/utilities/componentArgs.js

@@ -0,0 +1,45 @@
+export const componentArgs = {
+    className: {
+        description: 'Class name appended to root element of component',
+        table: {
+            type: {
+                summary: 'string',
+            },
+            category: 'default Props',
+            defaultValue: { summary: 'ss__${component-name}' },
+        },
+        control: { type: 'text' },
+    },
+    disableStyles: {
+        defaultValue: false,
+        description: 'Disable all default styling',
+        table: {
+            type: {
+                summary: 'boolean',
+            },
+            category: 'default Props',
+            defaultValue: { summary: false },
+        },
+        control: { type: 'boolean' },
+    },
+    style: {
+        description: 'Inline style',
+        table: {
+            type: {
+                summary: 'string, object',
+            },
+            category: 'default Props',
+        },
+        control: { type: 'text' },
+    },
+    theme: {
+        description: 'Specify specific sub component props',
+        table: {
+            type: {
+                summary: 'object',
+            },
+            category: 'default Props',
+        },
+        control: { type: 'none' },
+    },
+};

package/dist/esm/components/src/utilities/componentNameToClassName.d.ts

@@ -0,0 +1,2 @@
+export declare const componentNameToClassName: (name: string) => string;
+//# sourceMappingURL=componentNameToClassName.d.ts.map

package/dist/esm/components/src/utilities/componentNameToClassName.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentNameToClassName.d.ts","sourceRoot":"","sources":["../../../../../components/src/utilities/componentNameToClassName.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB,SAAU,MAAM,WAGpD,CAAC"}

package/dist/esm/components/src/utilities/componentNameToClassName.js

@@ -0,0 +1,4 @@
+export const componentNameToClassName = (name) => {
+    // eg. searchHorizontal -> search-horizontal
+    return name.replace(/([A-Z])/g, (match) => '-' + match.toLowerCase());
+};

package/dist/esm/components/src/utilities/createImpressionObserver.d.ts

@@ -0,0 +1,8 @@
+import { type MutableRef } from 'preact/hooks';
+import { UseIntersectionOptions } from '../hooks';
+export declare function createImpressionObserver(options?: UseIntersectionOptions): {
+    ref: MutableRef<HTMLElement | null>;
+    inViewport: boolean;
+    updateRef: (el: HTMLElement | null) => void;
+};
+//# sourceMappingURL=createImpressionObserver.d.ts.map

package/dist/esm/components/src/utilities/createImpressionObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createImpressionObserver.d.ts","sourceRoot":"","sources":["../../../../../components/src/utilities/createImpressionObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAU,MAAM,cAAc,CAAC;AACvD,OAAO,EAA2B,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAI3E,wBAAgB,wBAAwB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG;IAC3E,GAAG,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC5C,CAaA"}

package/dist/esm/components/src/utilities/createImpressionObserver.js

@@ -0,0 +1,18 @@
+import { useRef } from 'preact/hooks';
+import { useIntersectionAdvanced } from '../hooks';
+const IMPRESSION_VISIBILITY_THRESHOLD = 0.7;
+const IMPRESSION_MIN_VISIBLE_TIME = 1000;
+export function createImpressionObserver(options) {
+    const ref = useRef(null);
+    const { inViewport, updateRef } = useIntersectionAdvanced(ref, {
+        ...options,
+        fireOnce: true,
+        threshold: IMPRESSION_VISIBILITY_THRESHOLD,
+        minVisibleTime: IMPRESSION_MIN_VISIBLE_TIME,
+    });
+    return {
+        ref,
+        inViewport,
+        updateRef,
+    };
+}

package/dist/esm/components/src/utilities/defaultBadgeComponentMap.d.ts

@@ -0,0 +1,3 @@
+import { ComponentMap } from '../types';
+export declare const defaultBadgeComponentMap: ComponentMap;
+//# sourceMappingURL=defaultBadgeComponentMap.d.ts.map

package/dist/esm/components/src/utilities/defaultBadgeComponentMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultBadgeComponentMap.d.ts","sourceRoot":"","sources":["../../../../../components/src/utilities/defaultBadgeComponentMap.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,eAAO,MAAM,wBAAwB,EAAE,YAKtC,CAAC"}

package/dist/esm/components/src/utilities/defaultBadgeComponentMap.js

@@ -0,0 +1,10 @@
+import { BadgeText } from '../components/Atoms/BadgeText';
+import { BadgePill } from '../components/Atoms/BadgePill';
+import { BadgeRectangle } from '../components/Atoms/BadgeRectangle';
+import { BadgeImage } from '../components/Atoms/BadgeImage';
+export const defaultBadgeComponentMap = {
+    BadgeText: () => BadgeText,
+    BadgePill: () => BadgePill,
+    BadgeRectangle: () => BadgeRectangle,
+    BadgeImage: () => BadgeImage,
+};

package/dist/esm/components/src/utilities/defined.d.ts

@@ -0,0 +1,6 @@
+type DefinedProps = {
+    [key: string]: any;
+};
+export declare function defined(properties: Record<string, any>): DefinedProps;
+export {};
+//# sourceMappingURL=defined.d.ts.map

package/dist/esm/components/src/utilities/defined.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defined.d.ts","sourceRoot":"","sources":["../../../../../components/src/utilities/defined.ts"],"names":[],"mappings":"AAAA,KAAK,YAAY,GAAG;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB,CAAC;AAEF,wBAAgB,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,YAAY,CAUrE"}