@dropins/tools 0.21.1-beta1 → 0.21.2-alpha1

package/components/IllustratedMessage/IllustratedMessage.stories.jsx

@@ -0,0 +1,90 @@
+import { IllustratedMessage as component, } from '@adobe/elsie/components/IllustratedMessage';
+import { Placeholder } from '@adobe/elsie/icons';
+import { Button, Icon } from '@adobe/elsie/components';
+import { expect } from '@storybook/jest';
+import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
+/**
+ * Use IllustratedMessages to display an illustration and a message, usually for an empty state or an error page.
+ */
+const meta = {
+    title: 'Components/IllustratedMessage',
+    component,
+    argTypes: {
+        icon: {
+            description: 'Icon to display in the IllustratedMessage.',
+            table: {
+                type: { summary: 'FunctionComponent', required: false },
+            },
+            options: Object.keys(IconsList),
+            mapping: IconsList,
+            control: { type: 'select', defaultValue: 'Placeholder' },
+        },
+        heading: {
+            description: 'Heading text to display in the IllustratedMessage.',
+            control: { type: 'text' },
+            type: { name: 'string', required: false },
+        },
+        headingLevel: {
+            description: 'Heading level to display in the IllustratedMessage.',
+            control: { type: 'select', default: 2 },
+            options: [1, 2, 3, 4, 5, 6],
+            type: { name: 'string', required: false },
+        },
+        message: {
+            description: 'Message to display in the IllustratedMessage.',
+            options: ['Short', 'Long'],
+            mapping: {
+                Short: <div>Short message</div>,
+                Long: (<div>
+            Illustrated message with an extremely extremely long message
+          </div>),
+            },
+            control: {
+                type: 'select',
+                labels: {
+                    Short: 'Short message',
+                    Long: 'Long message',
+                },
+            },
+            table: {
+                type: { summary: 'FunctionComponent', required: false },
+            },
+        },
+        action: {
+            description: 'Action to display in the IllustratedMessage.',
+            control: { type: 'function' },
+            table: {
+                type: { summary: 'FunctionComponent', required: false },
+            },
+        },
+        variant: {
+            description: 'Variant to display in the IllustratedMessage.',
+            control: { type: 'radio', default: 'secondary' },
+            options: ['primary', 'secondary'],
+            type: { name: 'string', required: false },
+        },
+    },
+};
+export default meta;
+export const IllustratedMessage = {
+    args: {
+        icon: <Icon source={Placeholder} size="80"/>,
+        heading: 'Illustrated Message heading',
+        headingLevel: 3,
+        message: <p>Illustrated Message text content</p>,
+        action: <Button>Illustrated Message action</Button>,
+        variant: 'secondary',
+    },
+    play: async () => {
+        const illustratedMessage = document.querySelector('div[class*="dropin-illustrated-message"]');
+        await expect(illustratedMessage).toBeVisible();
+        const icon = illustratedMessage.querySelector('.dropin-illustrated-message__icon');
+        await expect(icon).toBeVisible();
+        const heading = illustratedMessage.querySelector('.dropin-illustrated-message__heading');
+        await expect(heading).toBeVisible();
+        const message = illustratedMessage.querySelector('.dropin-illustrated-message__message');
+        await expect(message).toBeVisible();
+        const action = illustratedMessage.querySelector('.dropin-illustrated-message__action');
+        await expect(action).toBeVisible();
+    },
+};

package/components/IllustratedMessage/IllustratedMessage.test.d.ts

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

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

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

package/components/IllustratedMessage/IllustratedMessage.test.jsx

@@ -0,0 +1,42 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render } from '@adobe/elsie/lib/tests';
+import { IllustratedMessage } from '@adobe/elsie/components/IllustratedMessage';
+import { Button } from '@adobe/elsie/components';
+describe('Base/Components/IllustratedMessage', () => {
+    test('renders', () => {
+        const { container } = render(<IllustratedMessage />);
+        expect(!!container).toEqual(true);
+        expect(container).toMatchSnapshot();
+        const component = container.querySelector('.dropin-illustrated-message');
+        expect(component).not.toBeNull();
+    });
+    test('renders with icon, heading and message', () => {
+        const { container } = render(<IllustratedMessage icon={<svg />} heading={'heading'} message={<p>message</p>} action={<Button>action</Button>}/>);
+        expect(!!container).toEqual(true);
+        expect(container).toMatchSnapshot();
+        const icon = container.querySelector('.dropin-illustrated-message__icon');
+        expect(icon).not.toBeNull();
+        const heading = container.querySelector('.dropin-illustrated-message__heading');
+        expect(heading).not.toBeNull();
+        const message = container.querySelector('.dropin-illustrated-message__message');
+        expect(message).not.toBeNull();
+        const action = container.querySelector('.dropin-illustrated-message__action');
+        expect(action).not.toBeNull();
+    });
+    test('renders H1 when heading level is 1', () => {
+        const { container } = render(<IllustratedMessage heading={'heading'} headingLevel={1}/>);
+        expect(!!container).toEqual(true);
+        expect(container).toMatchSnapshot();
+        const heading = container.querySelector('.dropin-illustrated-message__heading');
+        expect(heading?.tagName).toEqual('H1');
+    });
+    test('renders H2 when heading level is unknown', () => {
+        const { container } = render(
+        // @ts-ignore
+        <IllustratedMessage heading={'heading'} headingLevel={0}/>);
+        expect(!!container).toEqual(true);
+        expect(container).toMatchSnapshot();
+        const heading = container.querySelector('.dropin-illustrated-message__heading');
+        expect(heading?.tagName).toEqual('H2');
+    });
+});

package/components/IllustratedMessage/index.d.ts

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

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

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

package/components/IllustratedMessage/index.js

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

package/components/Image/Image.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { ResolveImageUrlOptions } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/Image/Image.css';
+export interface ImageProps extends HTMLAttributes<HTMLDivElement> {
+    params?: ResolveImageUrlOptions;
+    src: string;
+    onLoad?: (e: any) => void;
+}
+export declare const Image: FunctionComponent<ImageProps>;
+//# sourceMappingURL=Image.d.ts.map

package/components/Image/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAqB,MAAM,eAAe,CAAC;AAClE,OAAO,EAGL,sBAAsB,EACvB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,yCAAyC,CAAC;AAEjD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3B;AACD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CA0C/C,CAAC"}

package/components/Image/Image.jsx

@@ -0,0 +1,26 @@
+import { useMemo, useState } from 'preact/compat';
+import { classes, generateSrcset, } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/Image/Image.css';
+export const Image = ({ className, src, params, loading = 'lazy', srcSet, onLoad, ...props }) => {
+    const [loaded, setLoaded] = useState(false);
+    const _srcSet = useMemo(() => {
+        // If srcSet is provided, use it
+        if (srcSet)
+            return srcSet;
+        // If src is not provided, return "undefined"
+        if (!src || !params)
+            return;
+        // Otherwise, generate srcSet based on params
+        return generateSrcset(src, { ...params });
+    }, [params, src, srcSet]);
+    // Add class at image onLoad
+    const onLoadHandler = (e) => {
+        setLoaded(true);
+        onLoad?.(e);
+    };
+    return (<img {...props} className={classes([
+            'dropin-image',
+            ['dropin-image--loaded', loaded],
+            className,
+        ])} loading={loading} onLoad={onLoadHandler} src={src} srcSet={_srcSet}/>);
+};

package/components/Image/Image.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { ImageProps } from '@adobe/elsie/components/Image';
+/**
+ * Use Images to display visual content like photos and illustrations.
+ */
+declare const meta: Meta<ImageProps>;
+export default meta;
+type Story = StoryObj<ImageProps>;
+export declare const Primary: Story;
+export declare const WithParams: Story;
+//# sourceMappingURL=Image.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Image/Image.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAS,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAMlE;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CA+B1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC"}

package/components/Image/Image.stories.jsx

@@ -0,0 +1,66 @@
+import { Image } from '@adobe/elsie/components/Image';
+import { expect } from '@storybook/jest';
+const defaultWidth = 384;
+const defaultHeight = 288;
+/**
+ * Use Images to display visual content like photos and illustrations.
+ */
+const meta = {
+    title: 'Components/Image',
+    component: Image,
+    argTypes: {
+        width: {
+            description: 'Image width',
+            type: 'number',
+        },
+        height: {
+            description: 'Image height',
+            type: 'number',
+        },
+        loading: {
+            description: 'Loading strategy',
+            control: {
+                type: 'select',
+            },
+            table: {
+                defaultValue: {
+                    summary: 'lazy',
+                },
+            },
+            options: ['lazy', 'eager'],
+        },
+        params: {
+            description: 'Parameters appened to the image URL',
+            control: {
+                type: 'object',
+            },
+        },
+    },
+};
+export default meta;
+export const Primary = {
+    args: {
+        src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`,
+        alt: 'Some alternative text',
+        loading: 'lazy',
+        width: defaultWidth,
+        height: defaultHeight,
+    },
+    play: async () => {
+        const elem = document.querySelector('.dropin-image');
+        await expect(elem).toBeVisible();
+        // Without this wait test failing intermittently as Simulate loading delay (adjust the timeout as needed)
+        await new Promise((resolve) => setTimeout(resolve, 3500));
+        await expect(elem).toHaveClass('dropin-image--loaded');
+    },
+};
+export const WithParams = {
+    args: {
+        src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`,
+        params: { width: defaultWidth },
+        alt: 'Some alternative text',
+        loading: 'lazy',
+        width: defaultWidth,
+        height: defaultHeight,
+    },
+};

package/components/Image/Image.test.d.ts

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

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

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

package/components/Image/Image.test.jsx

@@ -0,0 +1,82 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { render, waitFor } from '@adobe/elsie/lib/tests';
+import { Image } from '@adobe/elsie/components/Image';
+import { fireEvent } from '@storybook/testing-library';
+describe('Image', () => {
+    test('renders plain', () => {
+        // @ts-ignore
+        const { container } = render(<Image />);
+        const elem = container.querySelector('.dropin-image');
+        expect(elem).toMatchInlineSnapshot(`
+      <img
+        class="dropin-image"
+        loading="lazy"
+      />
+    `);
+    });
+});
+describe('onLoad of image', () => {
+    test('adds class', async () => {
+        const onLoadHandler = jest.fn();
+        const { container } = render(<Image src="/test.jpg" onLoad={onLoadHandler}/>);
+        const elem = container.querySelector('.dropin-image');
+        expect(elem.classList.contains('dropin-image--loaded')).toEqual(false);
+        await waitFor(() => {
+            fireEvent.load(elem);
+        });
+        expect(onLoadHandler).toHaveBeenCalledTimes(1);
+        expect(elem.classList.contains('dropin-image--loaded')).toEqual(true);
+        expect(elem).toMatchInlineSnapshot(`
+      <img
+        class="dropin-image dropin-image--loaded"
+        loading="lazy"
+        src="/test.jpg"
+      />
+    `);
+    });
+});
+describe('renders with src', () => {
+    test('renders', () => {
+        const { container } = render(<Image src="/test2.jpg"/>);
+        const elem = container.querySelector('.dropin-image');
+        expect(elem).toMatchInlineSnapshot(`
+      <img
+        class="dropin-image"
+        loading="lazy"
+        src="/test2.jpg"
+      />
+    `);
+    });
+});
+describe('renders with properties and custom srcSet', () => {
+    test('renders', () => {
+        const { container } = render(<Image src="/test3.jpg" alt="This is a test" width="900" height="600" loading="eager" srcSet="/test3.jpg 900w, /test3.jpg 1200w, /test3.jpg 1800w"/>);
+        const elem = container.querySelector('.dropin-image');
+        expect(elem).toMatchInlineSnapshot(`
+      <img
+        alt="This is a test"
+        class="dropin-image"
+        height="600"
+        loading="eager"
+        src="/test3.jpg"
+        srcset="/test3.jpg 900w, /test3.jpg 1200w, /test3.jpg 1800w"
+        width="900"
+      />
+    `);
+    });
+    test('renders with params', () => {
+        const { container } = render(<Image src="/test4.jpg" params={{ width: 900 }}/>);
+        const elem = container.querySelector('.dropin-image');
+        expect(elem).toMatchInlineSnapshot(`
+      <img
+        class="dropin-image"
+        loading="lazy"
+        src="/test4.jpg"
+        srcset="/test4.jpg?auto=webp&quality=80&crop=false&fit=cover&width=360 768w,
+      /test4.jpg?auto=webp&quality=80&crop=false&fit=cover&width=480 1024w,
+      /test4.jpg?auto=webp&quality=80&crop=false&fit=cover&width=640.3125 1366w,
+      /test4.jpg?auto=webp&quality=80&crop=false&fit=cover&width=900 1920w"
+      />
+    `);
+    });
+});

package/components/Image/index.d.ts

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

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

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

package/components/Image/index.js

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

package/components/ImageSwatch/ImageSwatch.d.ts

@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/ImageSwatch/ImageSwatch.css';
+export interface ImageSwatchProps extends Omit<HTMLAttributes<HTMLInputElement>, 'label'> {
+    name?: string;
+    label?: string;
+    groupAriaLabel?: string;
+    id?: string;
+    src: string;
+    alt?: string;
+    value?: string;
+    disabled?: boolean;
+    selected?: boolean;
+    outOfStock?: boolean;
+    multi?: boolean;
+    onValue?: (value: any) => void;
+    onUpdateError?: (error: Error) => void;
+}
+export declare const ImageSwatch: FunctionComponent<ImageSwatchProps>;
+//# sourceMappingURL=ImageSwatch.d.ts.map

package/components/ImageSwatch/ImageSwatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSwatch.d.ts","sourceRoot":"","sources":["../../../src/components/ImageSwatch/ImageSwatch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAe,MAAM,eAAe,CAAC;AAE5D,OAAO,qDAAqD,CAAC;AAI7D,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAsF3D,CAAC"}

package/components/ImageSwatch/ImageSwatch.jsx

@@ -0,0 +1,49 @@
+import { useCallback } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/ImageSwatch/ImageSwatch.css';
+import { Image } from '@adobe/elsie/components/Image';
+import { useText } from '@adobe/elsie/i18n';
+export const ImageSwatch = ({ className, name, value, id, label, groupAriaLabel, src, alt, disabled = false, selected = false, outOfStock = false, multi = false, onValue, onUpdateError, ...props }) => {
+    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 handleAriaLabel = () => {
+        if (outOfStock)
+            return `${groupAriaLabel}: ${label} ${outOfStockLabel}`;
+        if (selected)
+            return `${groupAriaLabel}: ${label} ${selectedLabel}`;
+        return `${groupAriaLabel}: ${label} ${swatchLabel}`;
+    };
+    return (<label className={classes(['dropin-image-swatch__container', 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-image-swatch',
+            ['dropin-image-swatch--selected', selected],
+            ['dropin-image-swatch--disabled', disabled],
+            className,
+        ])}/>
+
+      <span className={classes([
+            'dropin-image-swatch__span',
+            ['dropin-image-swatch__span--out-of-stock', outOfStock],
+            className,
+        ])}>
+        <Image src={src} className={classes(['dropin-image-swatch__content'])} params={{ width: 100, fit: 'bounds', crop: true }} alt={alt} loading={'lazy'} onError={(e) => (e.target.style.display = 'none')}/>
+      </span>
+    </label>);
+};

package/components/ImageSwatch/ImageSwatch.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { ImageSwatchProps } from '@adobe/elsie/components/ImageSwatch';
+/**
+ * Use Image Swatches to display thumbnails of photos or illustrations.
+ */
+declare const meta: Meta<ImageSwatchProps>;
+export default meta;
+type Story = StoryObj<ImageSwatchProps>;
+/**
+ * ```ts
+ * import { ImageSwatch } from '@adobe/elsie/components/ImageSwatch';
+ * ```
+ */
+export declare const DefaultImageSwatch: Story;
+export declare const ImageSwatchSelected: Story;
+export declare const ImageSwatchDisabled: Story;
+export declare const OutOfStockImageSwatch: Story;
+export declare const SelectedOutOfStockImageSwatch: Story;
+export declare const MultiImageSwatch: Story;
+//# sourceMappingURL=ImageSwatch.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSwatch.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ImageSwatch/ImageSwatch.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAIxD,OAAO,EAEL,gBAAgB,EACjB,MAAM,qCAAqC,CAAC;AAK7C;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CA2EhC,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,KA4BjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAkBjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAcnC,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,KAe3C,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAqB9B,CAAC"}