@dropins/tools 0.21.1 → 0.21.2-alpha1

package/components/Picker/Picker.jsx

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,236 @@
+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

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

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

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

package/components/Picker/Picker.test.jsx

@@ -0,0 +1,190 @@
+/** 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

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

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

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

package/components/Picker/index.js

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

package/components/Price/Price.d.ts

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1 @@
+{"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"}