@dropins/tools 0.21.1-beta1 → 0.21.2-alpha1

package/components/TextSwatch/TextSwatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextSwatch.d.ts","sourceRoot":"","sources":["../../../src/components/TextSwatch/TextSwatch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EACL,cAAc,EAKf,MAAM,eAAe,CAAC;AAEvB,OAAO,mDAAmD,CAAC;AAG3D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA8FzD,CAAC"}

package/components/TextSwatch/TextSwatch.jsx

@@ -0,0 +1,56 @@
+import { useState, useEffect, useRef, useCallback, } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/TextSwatch/TextSwatch.css';
+import { useText } from '@adobe/elsie/i18n';
+export const TextSwatch = ({ className, name, value, label, groupAriaLabel, id, disabled = false, selected = false, outOfStock = false, multi = false, onValue, onUpdateError, ...props }) => {
+    // i18n
+    const outOfStockLabel = useText('Dropin.Swatches.outOfStock.label').label;
+    const selectedLabel = useText('Dropin.Swatches.selected.label').label;
+    const swatchLabel = useText('Dropin.Swatches.swatch.label').label;
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const spanRef = useRef(null);
+    const onValueHandler = useCallback(async (newValue) => {
+        if (onValue) {
+            try {
+                await onValue(newValue);
+            }
+            catch (e) {
+                if (onUpdateError) {
+                    onUpdateError(e);
+                }
+            }
+        }
+    }, [onValue, onUpdateError]);
+    const handleOnValue = (e) => {
+        const input = e.target;
+        onValueHandler(input.value);
+    };
+    const handleAriaLabel = () => {
+        if (outOfStock)
+            return `${groupAriaLabel}: ${label} ${outOfStockLabel}`;
+        if (selected)
+            return `${groupAriaLabel}: ${label} ${selectedLabel}`;
+        return `${groupAriaLabel}: ${label} ${swatchLabel}`;
+    };
+    useEffect(() => {
+        if (spanRef.current &&
+            spanRef.current.scrollWidth > spanRef.current.clientWidth) {
+            setIsOverflowing(true);
+        }
+    }, [label]);
+    return (<div className="dropin-text-swatch__container" {...(isOverflowing ? { 'data-tooltip': label } : {})}>
+      <input type={multi ? 'checkbox' : 'radio'} name={name} id={id} value={value} aria-label={handleAriaLabel()} checked={selected} disabled={disabled} onChange={handleOnValue} {...props} className={classes([
+            'dropin-text-swatch',
+            ['dropin-text-swatch--selected', selected],
+            ['dropin-text-swatch--disabled', disabled],
+            className,
+        ])}/>
+      <label htmlFor={id} ref={spanRef} className={classes([
+            'dropin-text-swatch__label',
+            ['dropin-text-swatch__label--out-of-stock', outOfStock],
+            className,
+        ])}>
+        {label}
+      </label>
+    </div>);
+};

package/components/TextSwatch/TextSwatch.stories.d.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { TextSwatchProps } from '@adobe/elsie/components/TextSwatch';
+/**
+ * Use Text Swatches to display text selections, like sizes or categories.
+ */
+declare const meta: Meta<TextSwatchProps>;
+export default meta;
+type Story = StoryObj<TextSwatchProps>;
+/**
+ * ```ts
+ * import { TextSwatch } from '@adobe/elsie/components/TextSwatch';
+ * ```
+ */
+export declare const DefaultTextSwatch: Story;
+export declare const TextSwatchWithLongText: Story;
+export declare const SelectedTextSwatch: Story;
+export declare const DisabledTextSwatch: Story;
+export declare const OutOfStockTextSwatch: Story;
+export declare const SelectedOutOfStockTextSwatch: Story;
+export declare const MultiTextSwatch: Story;
+//# sourceMappingURL=TextSwatch.stories.d.ts.map

package/components/TextSwatch/TextSwatch.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextSwatch.stories.d.ts","sourceRoot":"","sources":["../../../src/components/TextSwatch/TextSwatch.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAIxD,OAAO,EAEL,eAAe,EAChB,MAAM,oCAAoC,CAAC;AAE5C;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CA8D/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEvC;;;;GAIG;AAEH,eAAO,MAAM,iBAAiB,EAAE,KAsB/B,CAAC;AAQF,eAAO,MAAM,sBAAsB,EAAE,KAwCpC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAqBhC,CAAC;AACF,eAAO,MAAM,kBAAkB,EAAE,KAgBhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAYlC,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAY1C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAC"}

package/components/TextSwatch/TextSwatch.stories.jsx

@@ -0,0 +1,211 @@
+import { action } from '@storybook/addon-actions';
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { TextSwatch, } from '@adobe/elsie/components/TextSwatch';
+/**
+ * Use Text Swatches to display text selections, like sizes or categories.
+ */
+const meta = {
+    title: 'Components/TextSwatch',
+    component: TextSwatch,
+    argTypes: {
+        name: {
+            description: 'Field name (used for mapping the value in a form)',
+            type: {
+                required: false,
+                name: 'string',
+            },
+        },
+        label: {
+            description: 'Field label',
+            type: {
+                required: true,
+                name: 'string',
+            },
+        },
+        groupAriaLabel: {
+            description: 'Label name for the swatch group',
+            type: {
+                required: true,
+                name: 'string',
+            },
+        },
+        id: {
+            description: 'Field id',
+            type: {
+                required: true,
+                name: 'string',
+            },
+        },
+        value: {
+            description: 'Field value',
+            type: {
+                required: false,
+                name: 'string',
+            },
+        },
+        disabled: {
+            description: 'Whether or not the text swatch is disabled',
+            type: {
+                required: false,
+                name: 'boolean',
+            },
+        },
+        selected: {
+            description: 'Whether or not the text swatch is active',
+            type: {
+                required: false,
+                name: 'boolean',
+            },
+        },
+        multi: {
+            description: 'Whether or not the text swatch allows multiple selection',
+            type: {
+                required: false,
+                name: 'boolean',
+            },
+        },
+    },
+};
+export default meta;
+/**
+ * ```ts
+ * import { TextSwatch } from '@adobe/elsie/components/TextSwatch';
+ * ```
+ */
+export const DefaultTextSwatch = {
+    name: 'Text Swatch',
+    args: {
+        name: 'textSwatchField',
+        label: 'Option',
+        groupAriaLabel: 'Text Swatches',
+        id: 'mediumOption',
+        value: 'option',
+        selected: false,
+        disabled: false,
+        outOfStock: false,
+        onValue: action('onValue'),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const textSwatch = await canvas.findByRole('radio');
+        const labelElement = document.querySelector('.dropin-text-swatch__label');
+        expect(labelElement).toBeVisible();
+        await expect(textSwatch).not.toBeChecked();
+    },
+};
+const swatchStyle = `
+  .dropin-text-swatch__label {
+    max-width: 100px;
+  }
+`;
+export const TextSwatchWithLongText = {
+    name: 'Long Text Swatch',
+    render: (args) => (<div>
+      <style dangerouslySetInnerHTML={{ __html: swatchStyle }}/>
+      <TextSwatch {...args}/>
+    </div>),
+    args: {
+        name: 'textSwatchField',
+        label: 'Long Text Swatch',
+        groupAriaLabel: 'Text Swatches',
+        id: 'mediumOption',
+        value: 'long text swatch',
+        selected: false,
+        disabled: false,
+        outOfStock: false,
+        onValue: action('onValue'),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const textSwatch = await canvas.findByRole('radio');
+        const labelElement = document.querySelector('.dropin-text-swatch__label');
+        expect(labelElement).toBeVisible();
+        userEvent.hover(textSwatch);
+        // Without this wait test failing
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        const divWithTooltip = document.querySelector('div[data-tooltip]');
+        expect(divWithTooltip.getAttribute('data-tooltip')).toBe('Long Text Swatch');
+    },
+};
+export const SelectedTextSwatch = {
+    args: {
+        name: 'textSwatchField',
+        label: 'Option',
+        groupAriaLabel: 'Text Swatches',
+        id: 'mediumOption',
+        value: 'option',
+        selected: true,
+        disabled: false,
+        outOfStock: false,
+        onValue: action('onValue'),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const textSwatch = await canvas.findByRole('radio');
+        const labelElement = document.querySelector('.dropin-text-swatch__label');
+        expect(labelElement).toBeVisible();
+        await expect(textSwatch).toBeChecked();
+    },
+};
+export const DisabledTextSwatch = {
+    args: {
+        name: 'textSwatchField',
+        label: 'Option',
+        groupAriaLabel: 'Text Swatches',
+        id: 'mediumOption',
+        value: 'option',
+        selected: false,
+        disabled: true,
+        outOfStock: false,
+        onValue: action('onValue'),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(await canvas.findByRole('radio')).toBeDisabled();
+    },
+};
+export const OutOfStockTextSwatch = {
+    args: {
+        name: 'textSwatchField',
+        label: 'Option',
+        groupAriaLabel: 'Text Swatches',
+        id: 'mediumOption',
+        value: 'option',
+        selected: false,
+        disabled: false,
+        outOfStock: true,
+        onValue: action('onValue'),
+    },
+};
+export const SelectedOutOfStockTextSwatch = {
+    args: {
+        name: 'textSwatchField',
+        label: 'Option',
+        groupAriaLabel: 'Text Swatches',
+        id: 'mediumOption',
+        value: 'option',
+        selected: true,
+        disabled: false,
+        outOfStock: true,
+        onValue: action('onValue'),
+    },
+};
+export const MultiTextSwatch = {
+    args: {
+        name: 'multiTextSwatchField',
+        label: 'Option',
+        id: 'multiOption',
+        value: 'option',
+        selected: false,
+        disabled: false,
+        outOfStock: false,
+        multi: true,
+        onValue: action('onValue'),
+    },
+    render: (args) => (<div style="display: flex; flex-wrap:wrap; gap: 25px">
+      <TextSwatch {...args} id={'optionS'} value={'S'} label={'S'}/>
+      <TextSwatch {...args} id={'optionM'} value={'M'} label={'M'}/>
+      <TextSwatch {...args} id={'optionL'} value={'L'} label={'L'}/>
+    </div>),
+};

package/components/TextSwatch/TextSwatch.test.d.ts

@@ -0,0 +1,3 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+export {};
+//# sourceMappingURL=TextSwatch.test.d.ts.map

package/components/TextSwatch/TextSwatch.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextSwatch.test.d.ts","sourceRoot":"","sources":["../../../src/components/TextSwatch/TextSwatch.test.tsx"],"names":[],"mappings":"AAAA,6DAA6D"}

package/components/TextSwatch/TextSwatch.test.jsx

@@ -0,0 +1,85 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render, fireEvent, waitFor } from '@adobe/elsie/lib/tests';
+import { TextSwatch } from '@adobe/elsie/components/TextSwatch';
+describe('Base/Components/TextSwatch', () => {
+    test('renders', () => {
+        const { container } = render(<TextSwatch label="Option" id="mediumOption" name="textSwatchField" value="option"/>);
+        expect(!!container).toEqual(true);
+    });
+    test('Renders the correct shape for default props', () => {
+        const { container } = render(<TextSwatch label="Option" id="mediumOption" name="textSwatchField" value="option"/>);
+        // Ensure the component with default properties matches the snapshot
+        const elem = container.querySelector('.dropin-text-swatch');
+        expect(elem).toMatchSnapshot();
+    });
+    test('Renders the textSwatch in selected state', () => {
+        const { container } = render(<TextSwatch label="Option" id="mediumOption" name="textSwatchField" value="option" selected={true}/>);
+        // Ensure the textSwatch is selected
+        const selected = container.querySelector('.dropin-text-swatch');
+        expect(selected.classList.contains('dropin-text-swatch--selected')).toEqual(true);
+    });
+    test('Renders the textSwatch in disabled state', () => {
+        const { container } = render(<TextSwatch label="Option" id="mediumOption" name="textSwatchField" value="option" disabled={true}/>);
+        // Ensure the textSwatch is disabled
+        const elem = container.querySelector('.dropin-text-swatch');
+        expect(elem.classList.contains('dropin-text-swatch--disabled')).toEqual(true);
+    });
+    test('Does not break when onValue() is not provided', () => {
+        const { container } = render(<TextSwatch label="Option" id="mediumOption" name="textSwatchField" value="option"/>);
+        const textSwatch = container.querySelector('.dropin-text-swatch');
+        fireEvent.click(textSwatch);
+        expect(!!container).toEqual(true);
+    });
+    test('Triggers onValue()', async () => {
+        const mockFn = jest.fn();
+        const { container } = render(<TextSwatch label="Option" id="mediumOption" name="textSwatchField" value="value" onValue={mockFn}/>);
+        const textSwatch = container.querySelector('.dropin-text-swatch');
+        fireEvent.click(textSwatch);
+        await waitFor(() => expect(mockFn).toHaveBeenCalledWith('value'));
+    });
+    test('Calls onUpdateError() when onValue() throws an error', async () => {
+        const mockFn = jest.fn();
+        const mockError = new Error('onValue() error');
+        const { container } = render(<TextSwatch label="Option" id="mediumOption" name="textSwatchField" value="value" onValue={() => {
+                throw mockError;
+            }} onUpdateError={mockFn}/>);
+        const textSwatch = container.querySelector('.dropin-text-swatch');
+        fireEvent.click(textSwatch);
+        await waitFor(() => expect(mockFn).toHaveBeenCalled());
+        await waitFor(() => expect(mockFn).toHaveBeenCalledWith(mockError));
+    });
+    test('Calls onUpdateError() when onValue() returns a rejected promise', async () => {
+        const mockFn = jest.fn(() => {
+            throw new Error('Mock error!');
+        });
+        const { container } = render(<TextSwatch label="Option" id="mediumOption" name="textSwatchField" value="value" onValue={mockFn}/>);
+        const textSwatch = container.querySelector('.dropin-text-swatch');
+        fireEvent.click(textSwatch);
+        await waitFor(() => expect(mockFn).toHaveBeenCalled());
+    });
+    test('Triggers data-tooltip when textSwatch label is too long', () => {
+        // Mock values for scrollWidth and clientWidth
+        Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
+            configurable: true,
+            value: 200,
+        });
+        Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+            configurable: true,
+            value: 100,
+        });
+        const { container } = render(<TextSwatch label="Long Text Swatch" id="mediumOption" name="textSwatchField" value="value"/>);
+        const divWithTooltip = container.querySelector('div[data-tooltip]');
+        expect(divWithTooltip).toBeTruthy();
+        expect(divWithTooltip.getAttribute('data-tooltip')).toBe('Long Text Swatch');
+    });
+    test("Render textSwatch with 'out of stock' state", () => {
+        const { container } = render(<TextSwatch label="Option" id="mediumOption" name="textSwatchField" value="value" outOfStock={true}/>);
+        const textSwatch = container.querySelector('.dropin-text-swatch__label');
+        expect(textSwatch.classList.contains('dropin-text-swatch__label--out-of-stock')).toEqual(true);
+    });
+    test("Render textSwatch with 'multi' state", () => {
+        const { container } = render(<TextSwatch label="Option" id="mediumOption" name="textSwatchField" value="value" multi={true}/>);
+        const textSwatch = container.querySelector('.dropin-text-swatch');
+        expect(textSwatch.type === 'checkbox').toEqual(true);
+    });
+});

package/components/TextSwatch/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@adobe/elsie/components/TextSwatch/TextSwatch';
+export { TextSwatch as default } from '@adobe/elsie/components/TextSwatch/TextSwatch';
+//# sourceMappingURL=index.d.ts.map

package/components/TextSwatch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextSwatch/index.ts"],"names":[],"mappings":"AAAA,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,MAAM,+CAA+C,CAAC"}

package/components/TextSwatch/index.js

@@ -0,0 +1,2 @@
+export * from '@adobe/elsie/components/TextSwatch/TextSwatch';
+export { TextSwatch as default } from '@adobe/elsie/components/TextSwatch/TextSwatch';

package/components/UIProvider/UIProvider.d.ts

@@ -0,0 +1,18 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { Lang } from '@adobe/elsie/i18n';
+import '@adobe/elsie/components/UIProvider/UIProvider.css';
+import '@adobe/elsie/components/UIProvider/normalize.css';
+export declare const UIContext: import("preact").Context<{
+    locale: string;
+}>;
+type LangDefinitions = {
+    [key: string]: any;
+};
+export interface UIProviderProps extends HTMLAttributes<HTMLDivElement> {
+    lang?: Lang;
+    langDefinitions?: LangDefinitions;
+}
+export declare const UIProvider: FunctionComponent<UIProviderProps>;
+export {};
+//# sourceMappingURL=UIProvider.d.ts.map

package/components/UIProvider/UIProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIProvider.d.ts","sourceRoot":"","sources":["../../../src/components/UIProvider/UIProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAA0B,MAAM,eAAe,CAAC;AAEvE,OAAO,EAAyC,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEhF,OAAO,mDAAmD,CAAC;AAC3D,OAAO,kDAAkD,CAAC;AAE1D,eAAO,MAAM,SAAS;YACZ,MAAM;EAGd,CAAC;AAEH,KAAK,eAAe,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAC;AAE9C,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAgCzD,CAAC"}

package/components/UIProvider/UIProvider.jsx

@@ -0,0 +1,26 @@
+import { createContext, useMemo } from 'preact/compat';
+import { classes, deepmerge } from '@adobe/elsie/lib';
+import { IntlProvider, getDefinitionByLanguage } from '@adobe/elsie/i18n';
+import '@adobe/elsie/components/UIProvider/UIProvider.css';
+import '@adobe/elsie/components/UIProvider/normalize.css';
+export const UIContext = createContext({
+    locale: 'en-US',
+});
+export const UIProvider = ({ lang = 'en_US', langDefinitions = {}, className, children, ...props }) => {
+    const definitions = useMemo(() => {
+        // Merge default definition with selected definition
+        const selectedDefinitions = deepmerge(langDefinitions.default, langDefinitions[lang] ?? {});
+        // Merge SDK default definitions with custom definitions
+        return deepmerge(getDefinitionByLanguage(lang), // SDK default definitions
+        selectedDefinitions // Custom definitions
+        );
+    }, [lang, langDefinitions]);
+    const locale = lang.replace('_', '-');
+    return (<UIContext.Provider value={{ locale }}>
+      <IntlProvider definition={definitions}>
+        <div {...props} className={classes(['dropin-design', className])}>
+          {children}
+        </div>
+      </IntlProvider>
+    </UIContext.Provider>);
+};

package/components/UIProvider/UIProvider.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=UIProvider.test.d.ts.map

package/components/UIProvider/UIProvider.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIProvider.test.d.ts","sourceRoot":"","sources":["../../../src/components/UIProvider/UIProvider.test.tsx"],"names":[],"mappings":""}

package/components/UIProvider/UIProvider.test.jsx

@@ -0,0 +1,9 @@
+import { render } from '@adobe/elsie/lib/tests';
+import { UIProvider } from '@adobe/elsie/components';
+describe('BaseProvider/UIProvider', () => {
+    test('renders', () => {
+        const { container } = render(<UIProvider />);
+        const elem = container.querySelector('.dropin-design');
+        expect(!!elem).toEqual(true);
+    });
+});

package/components/UIProvider/index.d.ts

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

package/components/UIProvider/index.d.ts.map

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

package/components/UIProvider/index.js

@@ -0,0 +1 @@
+export * from '@adobe/elsie/components/UIProvider/UIProvider';

package/components/index.d.ts

@@ -0,0 +1,34 @@
+export * from '@adobe/elsie/components/Skeleton';
+export * from '@adobe/elsie/components/UIProvider';
+export * from '@adobe/elsie/components/Incrementer';
+export * from '@adobe/elsie/components/Input';
+export * from '@adobe/elsie/components/Image';
+export * from '@adobe/elsie/components/Divider';
+export * from '@adobe/elsie/components/Icon';
+export * from '@adobe/elsie/components/Price';
+export * from '@adobe/elsie/components/RadioButton';
+export * from '@adobe/elsie/components/Image';
+export * from '@adobe/elsie/components/Divider';
+export * from '@adobe/elsie/components/Icon';
+export * from '@adobe/elsie/components/Button';
+export * from '@adobe/elsie/components/Picker';
+export * from '@adobe/elsie/components/Field';
+export * from '@adobe/elsie/components/ActionButton';
+export * from '@adobe/elsie/components/ActionButtonGroup';
+export * from '@adobe/elsie/components/Card';
+export * from '@adobe/elsie/components/Checkbox';
+export * from '@adobe/elsie/components/ColorSwatch';
+export * from '@adobe/elsie/components/TextSwatch';
+export * from '@adobe/elsie/components/ProgressSpinner';
+export * from '@adobe/elsie/components/ImageSwatch';
+export * from '@adobe/elsie/components/Accordion';
+export * from '@adobe/elsie/components/InLineAlert';
+export * from '@adobe/elsie/components/Modal';
+export * from '@adobe/elsie/components/CartItem';
+export * from '@adobe/elsie/components/PriceSummary';
+export * from '@adobe/elsie/components/CartList';
+export * from '@adobe/elsie/components/PriceRange';
+export * from '@adobe/elsie/components/Breadcrumbs';
+export * from '@adobe/elsie/components/AlertBanner';
+export * from '@adobe/elsie/components/IllustratedMessage';
+//# sourceMappingURL=index.d.ts.map

package/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC;AACnD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,4CAA4C,CAAC"}

package/components/index.js

@@ -0,0 +1,33 @@
+export * from '@adobe/elsie/components/Skeleton';
+export * from '@adobe/elsie/components/UIProvider';
+export * from '@adobe/elsie/components/Incrementer';
+export * from '@adobe/elsie/components/Input';
+export * from '@adobe/elsie/components/Image';
+export * from '@adobe/elsie/components/Divider';
+export * from '@adobe/elsie/components/Icon';
+export * from '@adobe/elsie/components/Price';
+export * from '@adobe/elsie/components/RadioButton';
+export * from '@adobe/elsie/components/Image';
+export * from '@adobe/elsie/components/Divider';
+export * from '@adobe/elsie/components/Icon';
+export * from '@adobe/elsie/components/Button';
+export * from '@adobe/elsie/components/Picker';
+export * from '@adobe/elsie/components/Field';
+export * from '@adobe/elsie/components/ActionButton';
+export * from '@adobe/elsie/components/ActionButtonGroup';
+export * from '@adobe/elsie/components/Card';
+export * from '@adobe/elsie/components/Checkbox';
+export * from '@adobe/elsie/components/ColorSwatch';
+export * from '@adobe/elsie/components/TextSwatch';
+export * from '@adobe/elsie/components/ProgressSpinner';
+export * from '@adobe/elsie/components/ImageSwatch';
+export * from '@adobe/elsie/components/Accordion';
+export * from '@adobe/elsie/components/InLineAlert';
+export * from '@adobe/elsie/components/Modal';
+export * from '@adobe/elsie/components/CartItem';
+export * from '@adobe/elsie/components/PriceSummary';
+export * from '@adobe/elsie/components/CartList';
+export * from '@adobe/elsie/components/PriceRange';
+export * from '@adobe/elsie/components/Breadcrumbs';
+export * from '@adobe/elsie/components/AlertBanner';
+export * from '@adobe/elsie/components/IllustratedMessage';

package/docs/Design/designBlocks.d.ts

@@ -0,0 +1,21 @@
+export function Block({ style, children }: {
+    style: any;
+    children: any;
+}): import("preact").JSX.Element;
+export function DesignSwatchGroup({ property, prefix, tokens, swatchStyles, groupStyles, children, }: {
+    property: any;
+    prefix: any;
+    tokens: any;
+    swatchStyles: any;
+    groupStyles: any;
+    children: any;
+}): any;
+export function DesignSwatch({ style, children, ...restProps }: {
+    [x: string]: any;
+    style: any;
+    children: any;
+}): import("preact").JSX.Element;
+export function TokenDefinitions({ tokenData }: {
+    tokenData: any;
+}): import("preact").JSX.Element;
+//# sourceMappingURL=designBlocks.d.ts.map

package/docs/Design/designBlocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"designBlocks.d.ts","sourceRoot":"","sources":["../../../src/docs/Design/designBlocks.jsx"],"names":[],"mappings":"AAEO;;;iCAcN;AAEM;;;;;;;QAkCN;AAEM;;;;iCAkBN;AAEM;;iCAYN"}

package/docs/Design/designBlocks.jsx

@@ -0,0 +1,59 @@
+import { Source } from '@storybook/blocks';
+export const Block = ({ style, children }) => (
+// Renders content in a block that has a light background
+<div style={{
+        background: 'var(--color-neutral-50)',
+        color: 'black',
+        display: 'grid',
+        gridGap: 'var(--spacing-sm)',
+        padding: 'var(--spacing-sm)',
+        ...style,
+    }}>
+    {children}
+  </div>);
+export const DesignSwatchGroup = ({ property, prefix, tokens, swatchStyles, groupStyles, children, }) => {
+    // Renders a group of token swatches
+    const group = prefix
+        ? tokens.filter((entry) => entry.startsWith(prefix))
+        : tokens;
+    return group.map((entry) => {
+        const styleOverride = {};
+        styleOverride[property] = `var(${entry})`;
+        return (<div key={entry} style={{
+                display: 'flex',
+                alignItems: 'center',
+                font: 'var(--type-body-1-strong-font)',
+                letterSpacing: 'var(--type-body-1-strong-spacing)',
+                margin: 'var(--spacing-xxsmall)',
+                ...groupStyles,
+            }}>
+        <DesignSwatch style={{ ...swatchStyles, ...styleOverride }}>
+          {children}
+        </DesignSwatch>
+        <pre style={{ marginLeft: 'var(--spacing-small)' }}>var({entry});</pre>
+      </div>);
+    });
+};
+export const DesignSwatch = ({ style, children, ...restProps }) => {
+    // Renders a token swatch
+    return (<div style={{
+            width: '3rem',
+            height: '3rem',
+            background: 'var(--color-informational-200)',
+            border: '1px solid var(--color-neutral-400)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            ...style,
+        }}>
+      {children}
+    </div>);
+};
+export const TokenDefinitions = ({ tokenData }) => {
+    const tokenDefinitions = tokenData.map((token) => {
+        const { name, value, comment } = token;
+        return `${name}: ${value}; ${comment ? `/* ${comment} */` : ''}`;
+    });
+    return (<Source language="css" code={`.dropin-design {\n  ${tokenDefinitions.join('\n  ')}
+}`}/>);
+};

package/docs/Design/getTokenData.d.ts

@@ -0,0 +1,7 @@
+export interface TokenData {
+    name: string;
+    value: string;
+    comment?: string;
+}
+export declare const getTokenData: (data: any) => TokenData[];
+//# sourceMappingURL=getTokenData.d.ts.map