@dropins/tools 0.21.2-alpha3 → 0.21.2-alpha389

package/components/Picker/Picker.jsx

@@ -1,81 +0,0 @@
-import { Icon } from '@adobe/elsie/components';
-import '@adobe/elsie/components/Picker/Picker.css';
-import { ChevronDown } from '@adobe/elsie/icons';
-import { classes } from '@adobe/elsie/lib';
-import { useEffect, useState } from 'preact/compat';
-import { useRef } from 'preact/hooks';
-export const Picker = ({ name, value = null, options, variant = 'primary', floatingLabel, size = 'medium', handleSelect = () => { }, disabled = false, error = false, placeholder, defaultOption, icon, className, ...props }) => {
-    const id = props?.id || name || `dropin-picker-${Math.random().toString(36)}`;
-    // find the first option that is not disabled
-    const firstAvailableeOption = options?.find((option) => !option.disabled);
-    const [selectedValue, setSelectedValue] = useState({
-        value,
-        text: defaultOption?.text || placeholder || firstAvailableeOption?.text,
-        icon,
-    });
-    useEffect(() => {
-        const selected = options?.find((option) => option.value === value);
-        setSelectedValue(selected ?? {
-            value: defaultOption?.value ||
-                (placeholder || floatingLabel
-                    ? null
-                    : firstAvailableeOption?.value),
-            text: defaultOption?.text || placeholder || firstAvailableeOption?.text,
-            icon,
-        });
-    }, [value, options, placeholder, icon, defaultOption, floatingLabel]);
-    const handleOptionClick = (event) => {
-        const { options, value } = event.target;
-        for (const element of options) {
-            if (element.selected) {
-                setSelectedValue({ value, text: element.text, icon });
-                handleSelect(event);
-            }
-        }
-    };
-    const optionsListItems = options?.map((option) => {
-        const { value, text, disabled } = option;
-        const selected = value === selectedValue.value;
-        return (<option value={value} key={value} selected={selected} disabled={disabled} className={classes(['dropin-picker__option'])}>
-        {text}
-      </option>);
-    });
-    const placeholderOptionRef = useRef(null);
-    // @ts-ignore
-    const selected = !placeholderOptionRef.current?.selected || !!defaultOption;
-    return (<div className={classes([
-            className,
-            'dropin-picker',
-            `dropin-picker__${size}`,
-            ['dropin-picker__floating', !!floatingLabel],
-            ['dropin-picker__selected', selected],
-            ['dropin-picker__error', error],
-            ['dropin-picker__disabled', disabled],
-            ['dropin-picker__icon', icon],
-        ])}>
-      {icon && (
-        // @ts-ignore
-        <icon.type {...icon.props} className={'dropin-picker__icon--placeholder'}/>)}
-
-      <select id={id} className={classes([
-            'dropin-picker__select',
-            `dropin-picker__select--${variant}`,
-            `dropin-picker__select--${size}`,
-            ['dropin-picker__select--floating', !!floatingLabel],
-        ])} name={name} aria-label={name} disabled={disabled} onChange={handleOptionClick} {...props}>
-        {!defaultOption && (floatingLabel || placeholder) && (<option value={''} key={value} ref={placeholderOptionRef} className={classes([
-                'dropin-picker__option dropin-picker__placeholder',
-            ])}>
-            {floatingLabel ?? placeholder}
-          </option>)}
-
-        {optionsListItems}
-      </select>
-
-      <Icon source={ChevronDown} size="24" stroke="2" className="dropin-picker__chevronDown"/>
-
-      {floatingLabel && selected && (<label htmlFor={id} className={classes(['dropin-picker__floatingLabel', !!floatingLabel])}>
-          {floatingLabel}
-        </label>)}
-    </div>);
-};

package/components/Picker/Picker.stories.d.ts

@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/preact';
-import { PickerProps } from '@adobe/elsie/components/Picker';
-/**
- * Use Pickers to let users select values or items from predefined lists.
- */
-declare const meta: Meta<PickerProps>;
-export default meta;
-interface StoryProps extends PickerProps {
-    handleSubmit?: (e: Event) => void;
-}
-type Story = StoryObj<StoryProps>;
-/**
- * ```ts
- * import { Picker } from '@/checkout/components/Picker';
- * ```
- */
-export declare const Primary: Story;
-export declare const SecondaryWithIcon: Story;
-export declare const PlaceholderText: Story;
-export declare const FloatingLabel: Story;
-export declare const FloatingLabelWithDefaultOption: Story;
-//# sourceMappingURL=Picker.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Picker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Picker/Picker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAU,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAKrE;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CAsF3B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,UAAU,UAAW,SAAQ,WAAW;IACtC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC;AAED,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC;;;;GAIG;AAEH,eAAO,MAAM,OAAO,EAAE,KAwCrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA2B/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAuB7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsB3B,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KA0B5C,CAAC"}

package/components/Picker/Picker.stories.jsx

@@ -1,236 +0,0 @@
-import { Picker } from '@adobe/elsie/components/Picker';
-import { userEvent, within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-import { Placeholder } from '@adobe/elsie/icons';
-/**
- * Use Pickers to let users select values or items from predefined lists.
- */
-const meta = {
-    title: 'Components/Picker',
-    component: Picker,
-    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: 'Variant of the picker',
-            control: { type: 'radio' },
-            type: 'string',
-            defaultValue: { summary: 'primary' },
-            options: ['primary', 'secondary'],
-        },
-        size: {
-            description: 'Size of the picker',
-            control: 'radio',
-            options: ['medium', 'large'],
-            defaultValue: { summary: 'medium' },
-        },
-        floatingLabel: {
-            description: 'Floating label text',
-            type: {
-                required: false,
-                name: 'string',
-            },
-        },
-        placeholder: {
-            description: 'Placeholder text (will be overridden by floatingLabel if provided)',
-            type: {
-                required: false,
-                name: 'string',
-            },
-        },
-        defaultOption: {
-            description: 'Default available option from the options array',
-            type: {
-                required: false,
-                /* @ts-ignore */
-                name: 'object',
-            },
-        },
-        error: {
-            description: 'Whether or not the field has an error',
-            type: 'boolean',
-            defaultValue: {
-                summary: false,
-            },
-        },
-        options: {
-            description: 'Array of options',
-            type: {
-                required: true,
-                /* @ts-ignore */
-                name: 'Array',
-            },
-        },
-        disabled: {
-            description: 'Whether or not the field is disabled',
-            type: 'boolean',
-            defaultValue: {
-                summary: false,
-            },
-        },
-        icon: {
-            description: 'Icon to display in the Picker',
-        },
-        handleSelect: {
-            description: 'Callback function for when a value is selected',
-            type: 'function',
-            defaultValue: {
-                summary: '() => {}',
-            },
-            action: 'Value Selected',
-        },
-    },
-    decorators: [(Story) => <div style={{ width: '300px' }}>{Story()}</div>],
-};
-export default meta;
-/**
- * ```ts
- * import { Picker } from '@/checkout/components/Picker';
- * ```
- */
-export const Primary = {
-    args: {
-        name: 'pickerField',
-        variant: 'primary',
-        defaultOption: {
-            value: 'option1',
-            text: 'A Option 1',
-        },
-        placeholder: 'Select an option',
-        options: [
-            {
-                value: 'option1',
-                text: 'A Option 1',
-            },
-            {
-                value: 'option2',
-                text: 'B Option 2',
-                disabled: true,
-            },
-            {
-                value: 'option3',
-                text: 'C Option 3',
-            },
-        ],
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        userEvent.click(canvas.getByText('A Option 1'));
-        expect(canvas.getByText('A Option 1')).toBeVisible();
-        expect(canvas.getByText('B Option 2')).toBeVisible();
-        const select = document.querySelector('.dropin-picker__select');
-        userEvent.selectOptions(select, 'option3');
-        expect(select.textContent).toContain('C Option 3');
-    },
-};
-export const SecondaryWithIcon = {
-    name: 'Secondary with icon',
-    args: {
-        name: 'pickerField',
-        variant: 'secondary',
-        defaultOption: {
-            value: 'option2',
-            text: 'B Option 2',
-        },
-        placeholder: 'Select an option',
-        icon: <Placeholder />,
-        options: [
-            {
-                value: 'option1',
-                text: 'A Option 1',
-            },
-            {
-                value: 'option2',
-                text: 'B Option 2',
-            },
-            {
-                value: 'option3',
-                text: 'C Option 3',
-                disabled: true,
-            },
-        ],
-    },
-};
-export const PlaceholderText = {
-    name: 'Secondary with placeholder',
-    args: {
-        name: 'pickerField',
-        variant: 'primary',
-        placeholder: 'Select an option',
-        icon: <Placeholder />,
-        options: [
-            {
-                value: 'option1',
-                text: 'A Option 1',
-            },
-            {
-                value: 'option2',
-                text: 'B Option 2',
-            },
-            {
-                value: 'option3',
-                text: 'C Option 3',
-                disabled: true,
-            },
-        ],
-    },
-};
-export const FloatingLabel = {
-    name: 'Floating label',
-    args: {
-        name: 'pickerField',
-        variant: 'primary',
-        floatingLabel: 'Floating label',
-        options: [
-            {
-                value: 'option1',
-                text: 'A Option 1',
-            },
-            {
-                value: 'option2',
-                text: 'B Option 2',
-            },
-            {
-                value: 'option3',
-                text: 'C Option 3',
-                disabled: true,
-            },
-        ],
-    },
-};
-export const FloatingLabelWithDefaultOption = {
-    name: 'Floating label with default option',
-    args: {
-        name: 'pickerField',
-        variant: 'primary',
-        floatingLabel: 'Floating label',
-        defaultOption: {
-            value: 'option2',
-            text: 'B Option 2',
-        },
-        options: [
-            {
-                value: 'option1',
-                text: 'A Option 1',
-            },
-            {
-                value: 'option2',
-                text: 'B Option 2',
-            },
-            {
-                value: 'option3',
-                text: 'C Option 3',
-                disabled: true,
-            },
-        ],
-    },
-};

package/components/Picker/Picker.test.d.ts

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

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

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

package/components/Picker/Picker.test.jsx

@@ -1,190 +0,0 @@
-/** https://preactjs.com/guide/v10/preact-testing-library/ */
-import { fireEvent, render, screen } from '@adobe/elsie/lib/tests';
-import { Picker } from '@adobe/elsie/components';
-import { Placeholder } from '@adobe/elsie/icons';
-describe('Selection controls/Picker', () => {
-    const DEFAULT_PROPS = {
-        name: 'testPicker',
-        placeholder: 'Select an option',
-        options: [
-            {
-                value: 'option1',
-                text: 'Option 1',
-            },
-            {
-                value: 'option2',
-                text: 'Option 2',
-                disabled: true,
-            },
-            {
-                value: 'option3',
-                text: 'Option 3',
-            },
-        ],
-        handleSelect: jest.fn(),
-    };
-    const Second_Props = {
-        name: 'secondPicker',
-        options: [
-            {
-                value: 'option5',
-                text: 'Option 5',
-            },
-            {
-                value: 'option6',
-                text: 'Option 6',
-                disabled: true,
-            },
-            {
-                value: 'option3',
-                text: 'Option 3',
-            },
-        ],
-        handleSelect: jest.fn(),
-    };
-    describe('renders', () => {
-        test.each([
-            { name: 'primary', props: { ...DEFAULT_PROPS, variant: 'primary' } },
-            { name: 'secondary', props: { ...DEFAULT_PROPS, variant: 'secondary' } },
-            { name: 'medium', props: { ...DEFAULT_PROPS, size: 'medium' } },
-            { name: 'large', props: { ...DEFAULT_PROPS, size: 'large' } },
-        ])('$name component', ({ props }) => {
-            const { container } = render(<Picker {...DEFAULT_PROPS}/>);
-            expect(!!container).toEqual(true);
-            expect(container).toMatchSnapshot();
-            // Test that the component container is rendered
-            const component = container.querySelector('.dropin-picker');
-            expect(component).toBeTruthy();
-            // Test that the placeholder is rendered
-            const placeholder = screen.getByText(props.placeholder?.toString());
-            expect(placeholder).toBeTruthy();
-            // Test that the variant class is applied
-            const variantField = container.querySelector(`.dropin-picker__selected--${props.variant}`);
-            expect(variantField).toBeDefined();
-            // Test that the size class is applied
-            const sizeField = container.querySelector(`.dropin-picker__select--${props.size}`);
-            expect(sizeField).toBeDefined();
-        });
-    });
-    describe('when options are provided', () => {
-        test('options exist and placeholder is selected by default', () => {
-            const { container } = render(<Picker {...DEFAULT_PROPS}/>);
-            const options = container.querySelectorAll('.dropin-picker__option');
-            // Placeholder option is included
-            expect(options.length).toBe(4);
-            expect(screen.getByText(DEFAULT_PROPS.placeholder?.toString()).selected).toBe(true);
-        });
-        test('user to change default option', () => {
-            render(<Picker {...DEFAULT_PROPS}/>);
-            const select = screen.getByRole('combobox');
-            fireEvent.change(select, { target: { value: 'option2' } });
-            expect(screen.getByText('Option 2').selected).toBe(true);
-            expect(screen.getByRole('option', { name: 'Option 2' })
-                .selected).toBe(true);
-            expect(select.value).toBe('option2');
-            expect(screen.getByRole('option', { name: 'Option 3' })
-                .selected).toBe(false);
-        });
-    });
-    describe('when floating label is provided', () => {
-        test('floating label is displayed as placeholder', () => {
-            const { container } = render(<Picker {...DEFAULT_PROPS} floatingLabel={'Floating label'}/>);
-            const selectedContent = container.querySelector('.dropin-picker__placeholder');
-            expect(selectedContent?.textContent).toBe('Floating label');
-        });
-        test('floating label is displayed when option is selected', () => {
-            const { container } = render(<Picker {...DEFAULT_PROPS} floatingLabel={'Floating label'}/>);
-            const select = screen.getByRole('combobox');
-            fireEvent.change(select, { target: { value: 'option2' } });
-            const label = container.querySelector('.dropin-picker__floatingLabel');
-            expect(label.textContent).toBe('Floating label');
-            expect(label).not.toBeNull();
-        });
-    });
-    describe('when icon is provided', () => {
-        test('icon is displayed', () => {
-            const { container } = render(<Picker {...DEFAULT_PROPS} icon={<Placeholder />}/>);
-            const icon = container.querySelector('.dropin-picker__icon--placeholder');
-            expect(icon).not.toBeNull();
-        });
-    });
-    describe('when handleSelect is called', () => {
-        test('calls the handleSelect callback with the correct value', () => {
-            jest.resetAllMocks();
-            render(<Picker {...DEFAULT_PROPS}/>);
-            // Test that the handleSelect callback is not called on initial render
-            expect(DEFAULT_PROPS.handleSelect).not.toHaveBeenCalled();
-            const select = screen.getByRole('combobox');
-            fireEvent.change(select, { target: { value: 'option2' } });
-            expect(DEFAULT_PROPS.handleSelect).toHaveBeenCalled();
-        });
-        test('handleSelect is undefined', () => {
-            jest.resetAllMocks();
-            const DEFAULT_PROPS = {
-                placeholder: 'Select an option',
-                options: [
-                    {
-                        value: 'option1',
-                        text: 'Option 1',
-                    },
-                    {
-                        value: 'option2',
-                        text: 'Option 2',
-                        disabled: true,
-                    },
-                    {
-                        value: 'option3',
-                        text: 'Option 3',
-                    },
-                ],
-                handleSelect: undefined,
-            };
-            render(<Picker {...DEFAULT_PROPS}/>);
-            const select = screen.getByRole('combobox');
-            fireEvent.change(select, { target: { value: 'option2' } });
-            expect(screen.getByText('Option 2').selected).toBe(true);
-            expect(screen.getByRole('option', { name: 'Option 2' })
-                .selected).toBe(true);
-            expect(select.value).toBe('option2');
-        });
-    });
-    describe('display priority sequence with defaultOption and placeholder', () => {
-        test('display priority sequence', () => {
-            // when defaultOption is not provided, placeholder is displayed
-            render(<Picker {...DEFAULT_PROPS}/>);
-            expect(screen.getByText('Select an option')).toBeTruthy();
-            // when defaultOption is provided, defaultOption is displayed
-            const { container } = render(<Picker {...DEFAULT_PROPS} defaultOption={{
-                    value: 'option3',
-                    text: 'Option 3',
-                }}/>);
-            const selected = container.querySelector('.dropin-picker__select');
-            expect(selected?.textContent).toContain('Option 3');
-        });
-        test('when defaultOption and placeholder are not provided, first option is displayed', () => {
-            const { container } = render(<Picker {...Second_Props}/>);
-            const selectedContent = container.querySelector('.dropin-picker__select');
-            expect(selectedContent?.textContent).toContain('Option 5');
-        });
-        test('when defaultOption is provided, it is selected by default', () => {
-            render(<Picker {...DEFAULT_PROPS} defaultOption={{
-                    value: 'option3',
-                    text: 'Option 3',
-                }}/>);
-            expect(screen.getByText('Option 3').selected).toBe(true);
-        });
-    });
-    describe('when defaultOption is provided with floating label', () => {
-        test('defaultOption is displayed', () => {
-            const { container } = render(<Picker {...DEFAULT_PROPS} defaultOption={{
-                    value: 'option3',
-                    text: 'Option 3',
-                }} floatingLabel={'Floating label'}/>);
-            const selected = container.querySelector('.dropin-picker__select');
-            expect(selected?.textContent).toContain('Option 3');
-            // Test that the floating label is displayed
-            const label = container.querySelector('.dropin-picker__floatingLabel');
-            expect(label.textContent).toBe('Floating label');
-        });
-    });
-});

package/components/Picker/index.d.ts

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

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

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

package/components/Picker/index.js

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

package/components/Price/Price.d.ts

@@ -1,17 +0,0 @@
-import { FunctionComponent } from 'preact';
-import { HTMLAttributes } from 'preact/compat';
-import '@adobe/elsie/components/Price/Price.css';
-export interface PriceProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'size'> {
-    amount?: number;
-    currency?: string;
-    locale?: string;
-    formatOptions?: {
-        [key: string]: any;
-    };
-    variant?: 'default' | 'strikethrough';
-    weight?: 'bold' | 'normal';
-    sale?: boolean;
-    size?: 'small' | 'medium' | 'large';
-}
-export declare const Price: FunctionComponent<PriceProps>;
-//# sourceMappingURL=Price.d.ts.map

package/components/Price/Price.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Price.d.ts","sourceRoot":"","sources":["../../../src/components/Price/Price.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAW,MAAM,eAAe,CAAC;AAExD,OAAO,yCAAyC,CAAC;AAEjD,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE;QACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,eAAe,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CA2C/C,CAAC"}

package/components/Price/Price.jsx

@@ -1,24 +0,0 @@
-import { useMemo } from 'preact/compat';
-import { classes } from '@adobe/elsie/lib';
-import '@adobe/elsie/components/Price/Price.css';
-export const Price = ({ amount = 0, currency, locale = undefined, variant = 'default', weight = 'bold', className, children, sale = false, formatOptions = {}, size = 'small', ...props }) => {
-    const formatter = useMemo(() => new Intl.NumberFormat(locale, {
-        style: 'currency',
-        currency: currency || 'USD',
-        // These options are needed to round to whole numbers if that's what you want.
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-        ...formatOptions,
-    }), [locale, currency, formatOptions]);
-    const formattedAmount = useMemo(() => formatter.format(amount), [amount, formatter]);
-    return (<span {...props} className={classes([
-            'dropin-price',
-            `dropin-price--${variant}`,
-            `dropin-price--${size}`,
-            `dropin-price--${weight}`,
-            ['dropin-price--sale', sale],
-            className,
-        ])}>
-      {formattedAmount}
-    </span>);
-};

package/components/Price/Price.stories.d.ts

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/preact';
-import { PriceProps } from '@adobe/elsie/components/Price';
-/**
- * Use Price components to display the cost of an item or service.
- */
-declare const meta: Meta<PriceProps>;
-export default meta;
-type Story = StoryObj<PriceProps>;
-/**
- * ```ts
- * import { Price } from '@adobe/elsie/components/Price';
- * ```
- */
-export declare const Primary: Story;
-export declare const SpecialDefault: Story;
-export declare const HighContrast: Story;
-//# sourceMappingURL=Price.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Price.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Price/Price.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAS,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAIlE;;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;;;;GAIG;AAEH,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAC"}