@dropins/tools 0.21.2-alpha3 → 0.21.2-alpha389

package/components/ColorSwatch/ColorSwatch.jsx

@@ -1,57 +0,0 @@
-import { useCallback } from 'preact/compat';
-import { classes } from '@adobe/elsie/lib';
-import '@adobe/elsie/components/ColorSwatch/ColorSwatch.css';
-import { useText } from '@adobe/elsie/i18n';
-export const ColorSwatch = ({ className, name, value, id, label, groupAriaLabel, size = 'medium', color, 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 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 isValidColor = (color) => {
-        const colorStyle = new Option().style;
-        colorStyle.color = color;
-        return colorStyle.color !== ''; // Returns true if the browser accepts this as a valid color
-    };
-    const defaultColor = 'var(--color-gray-300);';
-    const validColor = color && isValidColor(color) ? color : defaultColor;
-    const handleAriaLabel = () => {
-        if (outOfStock)
-            return `${groupAriaLabel}: ${label} ${outOfStockLabel}`;
-        if (selected)
-            return `${groupAriaLabel}: ${label} ${selectedLabel}`;
-        return `${groupAriaLabel}: ${label} ${swatchLabel}`;
-    };
-    return (<label className={classes([
-            'dropin-color-swatch__container',
-            `dropin-color-swatch__container--${size}`,
-            className,
-        ])}>
-      <input type={multi ? 'checkbox' : 'radio'} name={name} id={id} value={value} aria-label={handleAriaLabel()} checked={selected} disabled={disabled} onChange={handleOnValue} {...props} className={classes([
-            'dropin-color-swatch',
-            ['dropin-color-swatch--selected', selected],
-            ['dropin-color-swatch--disabled', disabled],
-            className,
-        ])}/>
-      <span style={{ '--bg-color': validColor }} className={classes([
-            'dropin-color-swatch__span',
-            ['dropin-color-swatch__span--out-of-stock', outOfStock],
-            className,
-        ])}/>
-    </label>);
-};

package/components/ColorSwatch/ColorSwatch.stories.d.ts

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/preact';
-import { ColorSwatchProps } from '@adobe/elsie/components/ColorSwatch';
-/**
- * Use Color Swatches to display fills — such as colors, gradients, and textures — that can be applied to an object.
- */
-declare const meta: Meta<ColorSwatchProps>;
-export default meta;
-type Story = StoryObj<ColorSwatchProps>;
-/**
- * ```ts
- * import { ColorSwatch } from '@adobe/elsie/components/ColorSwatch';
- * ```
- */
-export declare const DefaultColorSwatch: Story;
-export declare const SelectedColorSwatch: Story;
-export declare const DisabledColorSwatch: Story;
-export declare const OutOfStockColorSwatch: Story;
-export declare const SelectedOutOfStockColorSwatch: Story;
-export declare const MultiColorSwatch: Story;
-//# sourceMappingURL=ColorSwatch.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorSwatch.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ColorSwatch/ColorSwatch.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAIxD,OAAO,EAEL,gBAAgB,EACjB,MAAM,qCAAqC,CAAC;AAE7C;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CA8EhC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAExC;;;;GAIG;AAEH,eAAO,MAAM,kBAAkB,EAAE,KAuBhC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA0BjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAkBjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAcnC,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,KAc3C,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC"}

package/components/ColorSwatch/ColorSwatch.stories.jsx

@@ -1,206 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-import { ColorSwatch, } from '@adobe/elsie/components/ColorSwatch';
-/**
- * Use Color Swatches to display fills — such as colors, gradients, and textures — that can be applied to an object.
- */
-const meta = {
-    title: 'Components/ColorSwatch',
-    component: ColorSwatch,
-    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: false,
-                name: 'string',
-            },
-        },
-        size: {
-            description: 'Size of the color swatch',
-            type: {
-                required: false,
-                name: 'string',
-            },
-            defaultValue: { summary: 'medium' },
-            options: ['medium', 'large'],
-            control: { type: 'radio' },
-        },
-        color: {
-            description: 'Color of the swatch',
-            type: {
-                required: false,
-                name: 'string',
-            },
-        },
-        value: {
-            description: 'Field value',
-            type: {
-                required: false,
-                name: 'string',
-            },
-        },
-        disabled: {
-            description: 'Whether or not the color swatch is disabled',
-            type: {
-                required: false,
-                name: 'boolean',
-            },
-        },
-        selected: {
-            description: 'Whether or not the color swatch is active',
-            type: {
-                required: false,
-                name: 'boolean',
-            },
-        },
-        multi: {
-            description: 'Whether or not the color swatch allows multiple selection',
-            type: {
-                required: false,
-                name: 'boolean',
-            },
-        },
-    },
-};
-export default meta;
-/**
- * ```ts
- * import { ColorSwatch } from '@adobe/elsie/components/ColorSwatch';
- * ```
- */
-export const DefaultColorSwatch = {
-    args: {
-        name: 'colorSwatchField',
-        id: 'graySwatch',
-        label: 'gray',
-        groupAriaLabel: 'Color Swatch',
-        value: 'gray',
-        size: 'medium',
-        color: '#E8E8E8',
-        selected: false,
-        disabled: false,
-        outOfStock: false,
-        onValue: action('onValue'),
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const textSwatch = await canvas.findByRole('radio');
-        const spanElement = document.querySelector('.dropin-color-swatch__span');
-        expect(spanElement).toBeVisible();
-        await expect(textSwatch).not.toBeChecked();
-    },
-};
-export const SelectedColorSwatch = {
-    args: {
-        name: 'colorSwatchField',
-        id: 'graySwatch',
-        value: 'gray',
-        label: 'gray',
-        groupAriaLabel: 'Color Swatch',
-        size: 'medium',
-        color: '#E8E8E8',
-        selected: true,
-        disabled: false,
-        outOfStock: false,
-        onValue: action('onValue'),
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const textSwatch = await canvas.findByRole('radio');
-        const spanElement = document.querySelector('.dropin-color-swatch__span');
-        expect(spanElement).toBeVisible();
-        await expect(textSwatch).toBeChecked();
-        await expect(canvas.getByLabelText('Color Swatch: gray swatch selected')).toBeChecked();
-    },
-};
-export const DisabledColorSwatch = {
-    args: {
-        name: 'colorSwatchField',
-        id: 'graySwatch',
-        value: 'gray',
-        label: 'gray',
-        groupAriaLabel: 'Color Swatch',
-        size: 'medium',
-        color: '#E8E8E8',
-        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 OutOfStockColorSwatch = {
-    args: {
-        name: 'colorSwatchField',
-        id: 'graySwatch',
-        label: 'gray',
-        groupAriaLabel: 'Color Swatch',
-        value: 'gray',
-        size: 'medium',
-        color: '#E8E8E8',
-        selected: false,
-        disabled: false,
-        outOfStock: true,
-        onValue: action('onValue'),
-    },
-};
-export const SelectedOutOfStockColorSwatch = {
-    args: {
-        name: 'colorSwatch_Field',
-        id: 'graySwatch',
-        value: 'gray',
-        label: 'gray',
-        groupAriaLabel: 'Color Swatch',
-        size: 'medium',
-        color: '#E8E8E8',
-        selected: true,
-        disabled: false,
-        outOfStock: true,
-        onValue: action('onValue'),
-    },
-};
-export const MultiColorSwatch = {
-    args: {
-        name: 'colorSwatchField',
-        id: 'graySwatch',
-        value: 'gray',
-        size: 'medium',
-        color: '#E8E8E8',
-        selected: false,
-        disabled: false,
-        outOfStock: false,
-        multi: true,
-        onValue: action('onValue'),
-        'aria-label': 'Grey Color Swatch',
-    },
-    render: (args) => (<div style="display: flex; flex-wrap:wrap; gap: 25px">
-      <ColorSwatch {...args} id={'colorSwatch1'} value={'green'} color={'green'}/>
-      <ColorSwatch {...args} id={'colorSwatch2'} value={'blue'} color={'blue'}/>
-      <ColorSwatch {...args} id={'colorSwatch3'} value={'yellow'} color={'yellow'}/>
-    </div>),
-};

package/components/ColorSwatch/ColorSwatch.test.d.ts

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

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

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

package/components/ColorSwatch/ColorSwatch.test.jsx

@@ -1,87 +0,0 @@
-/** https://preactjs.com/guide/v10/preact-testing-library/ */
-import { render, fireEvent, waitFor } from '@adobe/elsie/lib/tests';
-import { ColorSwatch } from '@adobe/elsie/components/ColorSwatch';
-describe('Base/Components/ColorSwatch', () => {
-    test('renders', () => {
-        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="Gray" value="gray" size="medium" color="#E8E8E8"/>);
-        expect(!!container).toEqual(true);
-    });
-    test('Renders the correct shape for default props', () => {
-        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8"/>);
-        // Ensure the component with default properties matches the snapshot
-        const elem = container.querySelector('.dropin-color-swatch');
-        expect(elem).toMatchSnapshot();
-    });
-    test('Renders the colorSwatch in selected state', () => {
-        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8" selected={true}/>);
-        // Ensure the colorSwatch is selected
-        const selected = container.querySelector('.dropin-color-swatch');
-        expect(selected.classList.contains('dropin-color-swatch--selected')).toEqual(true);
-    });
-    test('Renders the colorSwatch in disabled state', () => {
-        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8" disabled={true}/>);
-        // Ensure the colorSwatch is disabled
-        const disabled = container.querySelector('.dropin-color-swatch');
-        expect(disabled.classList.contains('dropin-color-swatch--disabled')).toEqual(true);
-    });
-    test('colorSwatch default size is medium', () => {
-        const { container } = render(<ColorSwatch name="colorSwatchField" label="gray" id="graySwatch" value="gray" color="#E8E8E8"/>);
-        // Ensure the colorSwatch is medium
-        const medium = container.querySelector('.dropin-color-swatch__container');
-        expect(medium.classList.contains('dropin-color-swatch__container--medium')).toEqual(true);
-    });
-    test('Renders the colorSwatch in large size', () => {
-        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="large" color="#E8E8E8"/>);
-        // Ensure the colorSwatch is large
-        const large = container.querySelector('.dropin-color-swatch__container');
-        expect(large.classList.contains('dropin-color-swatch__container--large')).toEqual(true);
-    });
-    test('Does not break when onValue() is not provided', () => {
-        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8"/>);
-        const colorSwatch = container.querySelector('.dropin-color-swatch');
-        fireEvent.click(colorSwatch);
-        expect(!!container).toEqual(true);
-    });
-    test('Triggers onValue()', async () => {
-        const mockFn = jest.fn();
-        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8" onValue={mockFn}/>);
-        const colorSwatch = container.querySelector('.dropin-color-swatch');
-        fireEvent.click(colorSwatch);
-        await waitFor(() => expect(mockFn).toHaveBeenCalledWith('gray'));
-    });
-    test('Calls onUpdateError() when onValue() throws an error', async () => {
-        const mockFn = jest.fn();
-        const mockError = new Error('onValue() error');
-        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8" onValue={() => {
-                throw mockError;
-            }} onUpdateError={mockFn}/>);
-        const colorSwatch = container.querySelector('.dropin-color-swatch');
-        fireEvent.click(colorSwatch);
-        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(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8" onValue={mockFn}/>);
-        const colorSwatch = container.querySelector('.dropin-color-swatch');
-        fireEvent.click(colorSwatch);
-        await waitFor(() => expect(mockFn).toHaveBeenCalled());
-    });
-    test('Renders default color when color prop is not valid string', () => {
-        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="not a valid color"/>);
-        const colorSwatch = container.querySelector('.dropin-color-swatch__span');
-        expect(colorSwatch.style.getPropertyValue('--bg-color')).toEqual('var(--color-gray-300);');
-    });
-    test('Renders out of stock color when outOfStock prop is true', () => {
-        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" label="gray" value="gray" size="medium" color="#E8E8E8" outOfStock={true}/>);
-        const colorSwatch = container.querySelector('.dropin-color-swatch__span');
-        expect(colorSwatch.classList.contains('dropin-color-swatch__span--out-of-stock')).toEqual(true);
-    });
-    test('Renders when multi prop is true', () => {
-        const { container } = render(<ColorSwatch name="colorSwatchField" id="graySwatch" value="gray" size="medium" color="#E8E8E8" multi={true}/>);
-        const colorSwatch = container.querySelector('.dropin-color-swatch');
-        expect(colorSwatch.type === 'checkbox').toEqual(true);
-    });
-});

package/components/ColorSwatch/index.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ColorSwatch/index.ts"],"names":[],"mappings":"AAAA,cAAc,iDAAiD,CAAC;AAChE,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,MAAM,iDAAiD,CAAC"}

package/components/ColorSwatch/index.js

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

package/components/Divider/Divider.d.ts

@@ -1,8 +0,0 @@
-import { FunctionComponent } from 'preact';
-import { HTMLAttributes } from 'preact/compat';
-import '@adobe/elsie/components/Divider/Divider.css';
-export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
-    variant?: 'primary' | 'secondary';
-}
-export declare const Divider: FunctionComponent<DividerProps>;
-//# sourceMappingURL=Divider.d.ts.map

package/components/Divider/Divider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,6CAA6C,CAAC;AAErD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,aAAa,CAAC;IACjE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACnC;AAED,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAcnD,CAAC"}

package/components/Divider/Divider.jsx

@@ -1,9 +0,0 @@
-import { classes } from '@adobe/elsie/lib';
-import '@adobe/elsie/components/Divider/Divider.css';
-export const Divider = ({ variant = 'primary', className, }) => {
-    return (<hr role="separator" className={classes([
-            'dropin-divider',
-            `dropin-divider--${variant}`,
-            className,
-        ])}/>);
-};

package/components/Divider/Divider.stories.d.ts

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/preact';
-import { DividerProps } from '@adobe/elsie/components/Divider';
-/**
- * Use Dividers to separate and group content or build rhythm and structure.
- */
-declare const meta: Meta<DividerProps>;
-export default meta;
-type Story = StoryObj<DividerProps>;
-export declare const Primary: Story;
-export declare const Secondary: Story;
-//# sourceMappingURL=Divider.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Divider.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAW,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAIxE;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CAW5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC"}

package/components/Divider/Divider.stories.jsx

@@ -1,43 +0,0 @@
-import { Divider } from '@adobe/elsie/components/Divider';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-/**
- * Use Dividers to separate and group content or build rhythm and structure.
- */
-const meta = {
-    title: 'Components/Divider',
-    component: Divider,
-    argTypes: {
-        variant: {
-            description: 'Divider variant: `primary` or `secondary`',
-            defaultValue: { summary: 'primary' },
-            options: ['primary', 'secondary'],
-            control: { type: 'radio' },
-        },
-    },
-};
-export default meta;
-export const Primary = {
-    args: {
-        variant: 'primary',
-    },
-    render: ({ variant }) => (<div style="width: 400px">
-      <Divider variant={variant}/>
-    </div>),
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        await expect(await canvas.findByRole('separator')).toBeVisible();
-    },
-};
-export const Secondary = {
-    args: {
-        variant: 'secondary',
-    },
-    render: ({ variant }) => (<div style="width: 400px">
-      <Divider variant={variant}/>
-    </div>),
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        await expect(await canvas.findByRole('separator')).toBeVisible();
-    },
-};

package/components/Divider/Divider.test.d.ts

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

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

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

package/components/Divider/Divider.test.jsx

@@ -1,19 +0,0 @@
-import { render } from '@adobe/elsie/lib/tests';
-import { Divider } from '@adobe/elsie/components';
-//test rendering of divider
-describe('Base/Divider', () => {
-    test('renders', () => {
-        const { container } = render(<Divider />);
-        const elem = container.querySelector('.dropin-divider');
-        expect(elem.classList.contains('dropin-divider')).toEqual(true);
-    });
-    //test rendering of divider with variant
-    test('renders with variant', () => {
-        const { container } = render(<Divider variant="primary"/>);
-        const elem = container.querySelector('.dropin-divider');
-        expect(elem.classList.contains('dropin-divider--primary')).toEqual(true);
-        const { container: container2 } = render(<Divider variant="secondary"/>);
-        const elem2 = container2.querySelector('.dropin-divider');
-        expect(elem2.classList.contains('dropin-divider--secondary')).toEqual(true);
-    });
-});

package/components/Divider/index.d.ts

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

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

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

package/components/Divider/index.js

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

package/components/Field/Field.d.ts

@@ -1,14 +0,0 @@
-import '@adobe/elsie/components/Field/Field.css';
-import { FunctionComponent, VNode } from 'preact';
-import { HTMLAttributes } from 'preact/compat';
-export interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
-    label?: string;
-    error?: string;
-    hint?: string;
-    success?: string;
-    disabled?: boolean;
-    children?: VNode;
-    size?: 'medium' | 'large';
-}
-export declare const Field: FunctionComponent<FieldProps>;
-//# sourceMappingURL=Field.d.ts.map

package/components/Field/Field.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CA0D/C,CAAC"}

package/components/Field/Field.jsx

@@ -1,29 +0,0 @@
-import '@adobe/elsie/components/Field/Field.css';
-import { classes } from '@adobe/elsie/lib';
-export const Field = ({ className, label, error, hint, success, size = 'medium', disabled = false, children, ...props }) => {
-    const id = children?.props?.id ?? `dropin-field-${Math.random().toString(36)}`;
-    const ChildComponent = children && typeof children.type !== 'string' ? children.type : null;
-    return (<div {...props} className={classes(['dropin-field', className])}>
-      {label && (<label className={classes([
-                'dropin-field__label',
-                ['dropin-field__label--disabled', disabled],
-                `dropin-field__label--${size}`,
-            ])} htmlFor={id}>
-          {label}
-        </label>)}
-
-      <div className={classes(['dropin-field__content'])}>
-        {ChildComponent && children && (<ChildComponent {...children.props} id={id} key={children.key} disabled={disabled} size={size} error={!!error} success={!!success && !error}/>)}
-      </div>
-
-      <div className={classes([
-            'dropin-field__hint',
-            [`dropin-field__hint--${size}`, size],
-            ['dropin-field__hint--error', !!error],
-            ['dropin-field__hint--success', !!success && !error],
-            ['dropin-field__hint--disabled', !!disabled],
-        ])}>
-        {error || success || hint}
-      </div>
-    </div>);
-};

package/components/Field/Field.stories.d.ts

@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/preact';
-import { FieldProps } from '@adobe/elsie/components';
-/**
- * Use Field Labels to wrap form inputs with titles and help text.
- */
-declare const meta: Meta<FieldProps>;
-export default meta;
-type Story = StoryObj<FieldProps>;
-/**
- * ```ts
- * import { Field } from '@adobe/elsie/components/Field';
- * import { Input } from '@adobe/elsie/components/Input';
- * ```
- */
-export declare const InputField: Story;
-/**
- * ```ts
- * import { Field } from '@adobe/elsie/components/Field';
- * import { Incrementer } from '@adobe/elsie/components/Incrementer';
- * ```
- */
-export declare const IncrementerField: Story;
-/**
- * ```ts
- * import { Field } from '@adobe/elsie/components/Field';
- * import { Picker } from '@adobe/elsie/components/Picker';
- * ```
- */
-export declare const PickerField: Story;
-export declare const CheckboxField: Story;
-/**
- * ```ts
- * import { Field } from '@adobe/elsie/components/Field';
- * import { TextSwatch } from '@adobe/elsie/components/TextSwatch';
- * ```
- */
-//# sourceMappingURL=Field.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Field/Field.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAEL,UAAU,EAKX,MAAM,yBAAyB,CAAC;AAIjC;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAoC1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,KAqBxB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAmD9B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,KAiDzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC;AAEF;;;;;GAKG"}