@dropins/tools 0.21.2-alpha2 → 0.21.2-alpha389

package/components/InLineAlert/InLineAlert.test.jsx

@@ -1,77 +0,0 @@
-/** https://preactjs.com/guide/v10/preact-testing-library/ */
-import { render } from '@adobe/elsie/lib/tests';
-import { InLineAlert, } from '@adobe/elsie/components/InLineAlert';
-// mock icons
-jest.mock('@adobe/elsie/icons', () => ({
-    CheckWithCircle: jest.fn(({ className }) => (<svg className={className} id="CheckWithCircle"/>)),
-    Close: jest.fn(({ className }) => <svg className={className} id="Close"/>),
-    WarningFilled: jest.fn(({ className }) => (<svg className={className} id="WarningFilled"/>)),
-}));
-describe('Base/Components/InLineAlert', () => {
-    const defaultProps = {
-        heading: 'InLineAlert heading',
-        description: 'InLineAlert description',
-        type: 'error',
-        icon: <div>icon</div>,
-        onDismiss: jest.fn(),
-    };
-    test('renders', () => {
-        const { container } = render(<InLineAlert {...defaultProps}/>);
-        const element = container.querySelector('.dropin-in-line-alert');
-        expect(!!container).toEqual(true);
-        expect(container).toMatchSnapshot();
-        expect(element).not.toBeNull();
-        const icon = container.querySelector('.dropin-in-line-alert__icon');
-        expect(icon).not.toBeNull();
-    });
-    test('renders warning variant if no variant is provided', () => {
-        const { container } = render(<InLineAlert {...defaultProps} type={undefined}/>);
-        const element = container.querySelector('.dropin-in-line-alert--warning');
-        const icon = container.querySelector('.dropin-in-line-alert__icon');
-        expect(!!container).toEqual(true);
-        expect(element).not.toBeNull();
-        expect(icon).not.toBeNull();
-    });
-    test('renders additional action', () => {
-        const additionalAction = {
-            label: 'Additional action',
-            onClick: jest.fn(),
-        };
-        const { container } = render(<InLineAlert {...defaultProps} additionalActions={[additionalAction]}/>);
-        const element = container.querySelector('.dropin-in-line-alert__additional-action');
-        expect(!!container).toEqual(true);
-        expect(element).not.toBeNull();
-        element.click();
-        expect(additionalAction.onClick).toHaveBeenCalled();
-    });
-    test('renders multiple additional actions', () => {
-        const additionalActions = [
-            {
-                label: 'Additional action 1',
-                onClick: jest.fn(),
-            },
-            {
-                label: 'Additional action 2',
-                onClick: jest.fn(),
-            },
-        ];
-        const { container } = render(<InLineAlert {...defaultProps} additionalActions={additionalActions}/>);
-        const elements = container.querySelectorAll('.dropin-in-line-alert__additional-action'
-        // eslint-disable-next-line
-        );
-        expect(!!container).toEqual(true);
-        expect(elements.length).toEqual(2);
-        elements.forEach((element, index) => {
-            element.click();
-            expect(additionalActions[index].onClick).toHaveBeenCalled();
-        });
-    });
-    describe('Interactions:', () => {
-        test('calls onDismiss when dismiss button is clicked', () => {
-            const { container } = render(<InLineAlert {...defaultProps}/>);
-            const dismissButton = container.querySelector('.dropin-in-line-alert__dismiss-button');
-            dismissButton.click();
-            expect(defaultProps.onDismiss).toHaveBeenCalled();
-        });
-    });
-});

package/components/InLineAlert/index.d.ts

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

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

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

package/components/InLineAlert/index.js

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

package/components/Incrementer/Incrementer.d.ts

@@ -1,17 +0,0 @@
-import { FunctionComponent } from 'preact';
-import { HTMLAttributes } from 'preact/compat';
-import '@adobe/elsie/components/Incrementer/Incrementer.css';
-export interface IncrementerProps extends Omit<HTMLAttributes<HTMLInputElement>, 'size'> {
-    name?: string;
-    size?: 'medium' | 'large';
-    onValue?: (value: any) => void;
-    onUpdateError?: (error: Error) => void;
-    error?: boolean;
-    success?: boolean;
-    min?: number;
-    max?: number;
-    disabled?: boolean;
-    maxLength?: number;
-}
-export declare const Incrementer: FunctionComponent<IncrementerProps>;
-//# sourceMappingURL=Incrementer.d.ts.map

package/components/Incrementer/Incrementer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Incrementer.d.ts","sourceRoot":"","sources":["../../../src/components/Incrementer/Incrementer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAK/C,OAAO,qDAAqD,CAAC;AAE7D,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAkJ3D,CAAC"}

package/components/Incrementer/Incrementer.jsx

@@ -1,87 +0,0 @@
-import { useState, useEffect, useCallback } from 'preact/hooks';
-import { classes, debounce } from '@adobe/elsie/lib';
-import { Add, Minus } from '@adobe/elsie/icons';
-import { Icon } from '@adobe/elsie/components/Icon';
-import { Localizer, Text } from '@adobe/elsie/i18n';
-import '@adobe/elsie/components/Incrementer/Incrementer.css';
-export const Incrementer = ({ name, value = '1', className, disabled, error, success, min, max, onValue, onUpdateError, size = 'medium', ...props }) => {
-    const [currentValue, setCurrentValue] = useState(Number(value));
-    const minValue = Number(min);
-    const maxValue = Number(max);
-    useEffect(() => {
-        setCurrentValue(Number(value));
-    }, [value]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const debouncedOnValueHandler = useCallback(debounce(async (newValue) => {
-        if (onValue) {
-            try {
-                await onValue(newValue);
-            }
-            catch (e) {
-                if (onUpdateError) {
-                    onUpdateError(e);
-                }
-            }
-        }
-    }, 200), [onValue, onUpdateError]);
-    const handleIncrementer = (_value) => {
-        let newValue = _value;
-        if (_value < minValue)
-            newValue = minValue;
-        if (_value > maxValue)
-            newValue = maxValue;
-        debouncedOnValueHandler(newValue);
-        setCurrentValue(newValue);
-    };
-    return (<div className={classes([
-            'dropin-incrementer',
-            `dropin-incrementer--${size}`,
-            className,
-        ])}>
-      <div className={classes([
-            'dropin-incrementer__content',
-            `dropin-incrementer__content--${size}`,
-            [`dropin-incrementer__content--error`, error],
-            [`dropin-incrementer__content--success`, success],
-            [`dropin-incrementer__content--disabled`, disabled],
-        ])}>
-        {/* Minus Button */}
-        <div className={classes([
-            'dropin-incrementer__button-container',
-            [`dropin-incrementer__button-container--disabled`, disabled],
-        ])}>
-          <Localizer>
-            <button type="button" className={classes([
-            'dropin-incrementer__decrease-button',
-            [`dropin-incrementer__decrease-button--disabled`, disabled],
-        ])} onClick={() => handleIncrementer(currentValue - 1)} disabled={disabled || currentValue < minValue + 1} aria-label={(<Text id="Dropin.Incrementer.decreaseLabel"/>)}>
-              <Icon source={Minus} size="16" stroke="1" viewBox="4 2 20 20" className="dropin-incrementer__down"/>
-            </button>
-          </Localizer>
-        </div>
-
-        {/* Input Field */}
-        <input className="dropin-incrementer__input" max={max} min={min} step={1} type="number" name={name} value={currentValue} disabled={disabled} onChange={(e) => {
-            const newValue = e.currentTarget.value;
-            if (newValue !== '') {
-                handleIncrementer(Number(newValue));
-            }
-        }} {...props}/>
-
-        <div className={classes([
-            'dropin-incrementer__button-container',
-            [`dropin-incrementer__button-container--disabled`, disabled],
-        ])}>
-          {/* Plus/Add button */}
-          <Localizer>
-            <button type="button" className={classes([
-            'dropin-incrementer__increase-button',
-            [`dropin-incrementer__increase-button--disabled`, disabled],
-        ])} onClick={() => handleIncrementer(currentValue + 1)} disabled={disabled || currentValue > maxValue - 1} aria-label={(<Text id="Dropin.Incrementer.increaseLabel"/>)}>
-              <Icon source={Add} size="16" stroke="1" viewBox="4 2 20 20" className="dropin-incrementer__add"/>
-            </button>
-          </Localizer>
-        </div>
-      </div>
-    </div>);
-};

package/components/Incrementer/Incrementer.stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/preact';
-import { IncrementerProps } from '@adobe/elsie/components/Incrementer';
-/**
- * Use Incrementers to let users increase or decrease a value.
- */
-declare const meta: Meta<IncrementerProps>;
-export default meta;
-type Story = StoryObj<IncrementerProps>;
-export declare const Primary: Story;
-//# sourceMappingURL=Incrementer.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Incrementer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Incrementer/Incrementer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAEL,gBAAgB,EACjB,MAAM,qCAAqC,CAAC;AAK7C;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAuBhC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAgDrB,CAAC"}

package/components/Incrementer/Incrementer.stories.jsx

@@ -1,68 +0,0 @@
-import { Incrementer, } from '@adobe/elsie/components/Incrementer';
-import { action } from '@storybook/addon-actions';
-import { userEvent, within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-/**
- * Use Incrementers to let users increase or decrease a value.
- */
-const meta = {
-    title: 'Components/Incrementer',
-    component: Incrementer,
-    argTypes: {
-        name: {
-            description: 'Field name (used for mapping the value in a form)',
-            type: {
-                required: false,
-                name: 'string',
-            },
-        },
-        value: {
-            description: 'Field value',
-            type: 'string',
-        },
-        size: {
-            description: 'medium | large',
-            defaultValue: { summary: 'medium' },
-            options: ['medium', 'large'],
-            control: { type: 'radio' },
-            type: 'string',
-        },
-    },
-};
-export default meta;
-export const Primary = {
-    args: {
-        size: 'medium',
-        onValue: action('onValue'),
-        name: 'incrementerField',
-        value: '0',
-        min: 0,
-        max: 100,
-        disabled: false,
-        'aria-label': 'Quantity',
-    },
-    play: async () => {
-        const canvasElement = document.querySelector('#storybook-root');
-        const canvas = within(canvasElement);
-        const decreaseButton = document.querySelector('button[aria-label="Decrease Quantity"]');
-        const inputField = document.querySelector('input');
-        const increaseButton = document.querySelector('button[aria-label="Increase Quantity"]');
-        // Without this wait test failing intermittently as click event is triggerning before even element fully loaded
-        await new Promise((resolve) => setTimeout(resolve, 500));
-        await userEvent.click(increaseButton);
-        await expect(await canvas.findByDisplayValue('1')).toBeTruthy();
-        await userEvent.click(decreaseButton);
-        await expect(await canvas.findByDisplayValue('0')).toBeTruthy();
-        await userEvent.type(inputField, '99');
-        await expect(await canvas.findByDisplayValue('99')).toBeTruthy();
-        await userEvent.click(increaseButton);
-        await expect(await canvas.findByDisplayValue('100')).toBeTruthy();
-        await userEvent.click(increaseButton);
-        await expect(await canvas.findByDisplayValue('100')).toBeTruthy();
-        await userEvent.click(decreaseButton);
-        await expect(await canvas.findByDisplayValue('99')).toBeTruthy();
-        await userEvent.clear(inputField);
-        await userEvent.type(inputField, '0');
-        await expect(await canvas.findByDisplayValue('0')).toBeTruthy();
-    },
-};

package/components/Incrementer/Incrementer.test.d.ts

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

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

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

package/components/Incrementer/Incrementer.test.jsx

@@ -1,112 +0,0 @@
-/** https://preactjs.com/guide/v10/preact-testing-library/ */
-import { render, fireEvent } from '@adobe/elsie/lib/tests';
-import { Incrementer, } from '@adobe/elsie/components/Incrementer';
-jest.useFakeTimers();
-describe('Base/Components/Incrementer', () => {
-    const DEFAULT_PROPS = {
-        name: 'testIncrementer',
-    };
-    test('renders', () => {
-        const { container } = render(<Incrementer {...DEFAULT_PROPS}/>);
-        const elem = container.querySelector('.dropin-incrementer');
-        expect(!!elem).toEqual(true);
-    });
-    test('triggers onChange with empty value()', () => {
-        const mockFn = jest.fn();
-        const { container } = render(<Incrementer {...DEFAULT_PROPS} onValue={mockFn}/>);
-        const field = container.querySelector('.dropin-incrementer__input');
-        fireEvent.input(field, {
-            target: { value: '' },
-        });
-        jest.runAllTimers();
-        expect(mockFn).toHaveBeenCalledTimes(0);
-    });
-    test('renders the correct shape', () => {
-        const { container } = render(<Incrementer {...DEFAULT_PROPS} aria-label="Item Quantity"/>);
-        const elem = container.querySelector('.dropin-incrementer');
-        expect(elem).toMatchSnapshot();
-    });
-    test('only allow value changes between min and max range.', () => {
-        const { container } = render(<Incrementer {...DEFAULT_PROPS} value="0" min={1} max={2}/>);
-        const input = container.querySelector('.dropin-incrementer__input');
-        const increase = container.querySelector('.dropin-incrementer__increase-button');
-        const decrease = container.querySelector('.dropin-incrementer__decrease-button');
-        jest.runAllTimers();
-        // Increase
-        fireEvent.click(increase); // 1
-        expect(input.value).toEqual('1');
-        fireEvent.click(increase); // 2 (reached max limit)
-        expect(input.value).toEqual('2');
-        expect(increase.disabled).toEqual(true);
-        // Decrease
-        fireEvent.click(decrease); // 1
-        expect(input.value).toEqual('1');
-        fireEvent.click(decrease); // 1 (reached min limit)
-        expect(input.value).toEqual('1');
-        expect(decrease.disabled).toEqual(true);
-    });
-    test('if value is greater than maxValue test.', () => {
-        const { container } = render(<Incrementer {...DEFAULT_PROPS} value="4" min={0} max={5}/>);
-        const input = container.querySelector('.dropin-incrementer__input');
-        const increase = container.querySelector('.dropin-incrementer__increase-button');
-        jest.runAllTimers();
-        // Increase
-        fireEvent.click(increase); // 1
-        expect(input.value).toEqual('5');
-        fireEvent.click(increase); // 2 (reached max limit)
-        expect(input.value).toEqual('5');
-        expect(increase.disabled).toEqual(true);
-    });
-    test('handles input update error with error handler given', () => {
-        const mockFn = jest.fn(() => {
-            throw new Error('Mock error!');
-        });
-        const mockErrorHandler = jest.fn();
-        const { container } = render(<Incrementer {...DEFAULT_PROPS} onValue={mockFn} onUpdateError={mockErrorHandler}/>);
-        const field = container.querySelector('.dropin-incrementer__input');
-        fireEvent.input(field, { target: { value: '1' } });
-        jest.runAllTimers();
-        expect(field.value).toEqual('1');
-        expect(mockErrorHandler).toHaveBeenCalledTimes(1);
-        expect(mockErrorHandler.mock.calls[0][0]).toMatchInlineSnapshot(`[Error: Mock error!]`);
-    });
-    test('handles quantity update error with no error handler given', () => {
-        const mockFn = jest.fn(() => {
-            throw new Error('Mock error!');
-        });
-        const { container } = render(<Incrementer {...DEFAULT_PROPS} value="3" onValue={mockFn}/>);
-        const field = container.querySelector('.dropin-incrementer__input');
-        fireEvent.input(field, { target: { value: '2' } });
-        expect(mockFn).not.toHaveBeenCalled();
-        jest.runAllTimers();
-        expect(mockFn).toHaveBeenCalledTimes(1);
-        expect(field.value).toEqual('2');
-    });
-    test('throws error when handleIncrementer() is called with an error', () => {
-        const mockFn = jest.fn(() => {
-            throw new Error('Mock error!');
-        });
-        const mockErrorHandler = jest.fn();
-        const { container } = render(<Incrementer {...DEFAULT_PROPS} onValue={mockFn} onUpdateError={mockErrorHandler}/>);
-        const field = container.querySelector('.dropin-incrementer__input');
-        fireEvent.input(field, { target: { value: 1 } });
-        expect(mockFn).not.toHaveBeenCalled();
-        expect(mockFn).toThrow('Mock error!');
-        jest.runAllTimers();
-        expect(mockFn).toHaveBeenCalledTimes(2);
-    });
-    test('reach the max value range', () => {
-        const { container } = render(<Incrementer {...DEFAULT_PROPS} value="0" min={1} max={2}/>);
-        const input = container.querySelector('.dropin-incrementer__input');
-        const decrease = container.querySelector('.dropin-incrementer__decrease-button');
-        jest.runAllTimers();
-        // Decrease
-        fireEvent.click(decrease); // 1
-        expect(input.value).toEqual('1');
-        fireEvent.click(decrease); // 1 (reached min limit)
-        expect(input.value).toEqual('1');
-        expect(decrease.disabled).toEqual(true);
-        fireEvent.change(input, { target: { value: '0' } });
-        expect(input.value).toEqual('0');
-    });
-});

package/components/Incrementer/index.d.ts

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

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

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

package/components/Incrementer/index.js

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

package/components/Input/Input.d.ts

@@ -1,19 +0,0 @@
-import '@adobe/elsie/components/Input/Input.css';
-import { FunctionComponent, VNode } from 'preact';
-import { HTMLAttributes } from 'preact/compat';
-export interface InputProps extends Omit<HTMLAttributes<HTMLInputElement>, 'size' | 'icon'> {
-    id?: string;
-    name?: string;
-    variant?: 'primary' | 'secondary';
-    disabled?: boolean;
-    error?: boolean;
-    floatingLabel?: string;
-    onUpdateError?: (error: Error) => void;
-    onValue?: (value: any) => void;
-    size?: 'medium' | 'large';
-    success?: boolean;
-    icon?: VNode<HTMLAttributes<SVGSVGElement>>;
-    maxLength?: number;
-}
-export declare const Input: FunctionComponent<InputProps>;
-//# sourceMappingURL=Input.d.ts.map

package/components/Input/Input.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,yCAAyC,CAAC;AAGjD,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CAoI/C,CAAC"}

package/components/Input/Input.jsx

@@ -1,73 +0,0 @@
-import { Icon } from '@adobe/elsie/components/Icon';
-import '@adobe/elsie/components/Input/Input.css';
-import { CheckWithCircle, WarningWithCircle } from '@adobe/elsie/icons';
-import { VComponent, classes, debounce } from '@adobe/elsie/lib';
-import { useCallback } from 'preact/hooks';
-export const Input = ({ name, value, variant = 'primary', className, disabled, error, floatingLabel, onValue, onUpdateError, size = 'medium', icon, maxLength, success, ...props }) => {
-    const id = props?.id || name || `dropin-input-${Math.random().toString(36)}`;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const debouncedOnValueHandler = useCallback(debounce(async (newValue) => {
-        if (onValue) {
-            try {
-                await onValue(newValue);
-            }
-            catch (e) {
-                if (onUpdateError) {
-                    onUpdateError(e);
-                }
-            }
-        }
-    }, 200), [onValue, onUpdateError]);
-    const handleOnValue = (e) => {
-        const input = e.target;
-        debouncedOnValueHandler(input.value.trim());
-    };
-    return (<div className={classes([
-            'dropin-input-container',
-            `dropin-input-container--${variant}`,
-            [`dropin-input-container--floating`, !!floatingLabel],
-            ['dropin-input-container--disabled', disabled],
-        ])}>
-      {icon && (<VComponent node={icon} className={classes([
-                'dropin-input__field-icon--left',
-                icon.props.className,
-            ])}/>)}
-      <div className="dropin-input-label-container">
-        {/* Input */}
-        <input id={id} onChange={handleOnValue} type="text" maxLength={maxLength} name={name} value={value} {...props} className={classes([
-            'dropin-input',
-            `dropin-input--${size}`,
-            `dropin-input--${variant}`,
-            [`dropin-input--error`, !!error],
-            [`dropin-input--success`, !!success],
-            ['dropin-input--disabled', disabled],
-            [`dropin-input--floating`, !!floatingLabel],
-            [`dropin-input--icon-left`, !!icon],
-            className,
-        ])} disabled={disabled}/>
-
-        {/* Floating Label */}
-        {floatingLabel && (<label htmlFor={id} className={classes([
-                [`dropin-input__label--floating`, !!floatingLabel],
-                [`dropin-input__label--floating--icon-left`, !!icon],
-                [`dropin-input__label--floating--error`, !!error],
-            ])}>
-            {floatingLabel}
-          </label>)}
-      </div>
-
-      {error && (<div className={classes([
-                'dropin-input__field-icon--right',
-                'dropin-input__field-icon--error',
-            ])}>
-          <Icon source={WarningWithCircle} size="16" stroke="2" className="dropin-input--warning-icon" viewBox="-1 -1 26 26"/>
-        </div>)}
-
-      {success && (<div className={classes([
-                'dropin-input__field-icon--right',
-                'dropin-input__field-icon--success',
-            ])}>
-          <Icon source={CheckWithCircle} size="16" stroke="2" className="dropin-input--success-icon" viewBox="-1 -1 26 26"/>
-        </div>)}
-    </div>);
-};

package/components/Input/Input.stories.d.ts

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/preact';
-import { InputProps } from '@adobe/elsie/components/Input';
-/**
- * Use Input to let users enter and edit text.
- */
-declare const meta: Meta<InputProps>;
-export default meta;
-type Story = StoryObj<InputProps>;
-export declare const Primary: Story;
-export declare const Secondary: Story;
-//# sourceMappingURL=Input.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAS,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAOlE;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAuD1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC"}

package/components/Input/Input.stories.jsx

@@ -1,115 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Input } from '@adobe/elsie/components/Input';
-import { Cart } from '@adobe/elsie/icons';
-import { Icon } from '@adobe/elsie/components/Icon';
-import { userEvent, within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
-/**
- * Use Input to let users enter and edit text.
- */
-const meta = {
-    title: 'Components/Input',
-    component: Input,
-    argTypes: {
-        name: {
-            description: 'Field name (used for mapping the value in a form)',
-            type: {
-                required: false,
-                name: 'string',
-            },
-        },
-        value: {
-            description: 'Field value',
-            type: 'string',
-        },
-        variant: {
-            description: 'Button variant: `primary`, or `secondary`',
-            defaultValue: { summary: 'primary' },
-            type: 'string',
-            options: ['primary', 'secondary'],
-            control: { type: 'radio' },
-        },
-        size: {
-            options: ['medium', 'large'],
-            control: { type: 'radio' },
-        },
-        placeholder: {
-            description: 'placeholder text',
-            control: 'text',
-        },
-        floatingLabel: {
-            description: 'enable floating label',
-            control: 'text',
-        },
-        disabled: {
-            description: 'disable input field',
-            control: 'boolean',
-        },
-        error: {
-            description: 'enable error handling',
-            control: 'boolean',
-        },
-        success: {
-            description: 'enable success handling',
-            control: 'boolean',
-        },
-        icon: {
-            description: 'left ornamental icon',
-            options: Object.keys(IconsList),
-            mapping: IconsList,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-export default meta;
-export const Primary = {
-    args: {
-        name: 'inputField',
-        value: '',
-        variant: 'primary',
-        size: 'medium',
-        floatingLabel: '',
-        placeholder: 'Placeholder',
-        disabled: false,
-        error: false,
-        success: false,
-        onValue: action('onValue'),
-        maxLength: 20,
-        icon: <Icon source={Cart}/>,
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const inputField = document.querySelector('input');
-        await userEvent.type(inputField, 'Storybook Test Text! input max length');
-        await expect(await canvas.findByDisplayValue('Storybook Test Text!')).toBeTruthy();
-        await userEvent.clear(inputField);
-        await expect(await canvas.findByDisplayValue('')).toBeTruthy();
-    },
-};
-export const Secondary = {
-    args: {
-        name: 'inputField',
-        value: 'Storybook Test Text!',
-        variant: 'secondary',
-        size: 'medium',
-        floatingLabel: '',
-        placeholder: 'Placeholder',
-        disabled: false,
-        error: false,
-        success: false,
-        onValue: action('onValue'),
-        maxLength: 20,
-        icon: <Icon source={Cart}/>,
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const inputField = document.querySelector('input');
-        await userEvent.type(inputField, 'Storybook Test Text! input max length');
-        await expect(await canvas.findByDisplayValue('Storybook Test Text!')).toBeTruthy();
-        await userEvent.clear(inputField);
-        await expect(await canvas.findByDisplayValue('')).toBeTruthy();
-    },
-};

package/components/Input/Input.test.d.ts

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

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

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