@dropins/tools 0.21.2-alpha3 → 0.21.2-alpha389

package/components/CartItem/CartItem.d.ts

@@ -1,25 +0,0 @@
-import { FunctionComponent, VNode } from 'preact';
-import { HTMLAttributes } from 'preact/compat';
-import '@adobe/elsie/components/CartItem/CartItem.css';
-export interface CartItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'loading'> {
-    ariaLabel?: string;
-    image: VNode;
-    title: VNode;
-    price: VNode;
-    taxIncluded?: boolean;
-    total: VNode;
-    sku: VNode;
-    quantity?: number;
-    description?: VNode;
-    configurations?: {
-        [key: string]: any;
-    };
-    warning?: VNode;
-    alert?: VNode;
-    loading?: boolean;
-    updating?: boolean;
-    onRemove?: () => void;
-    onQuantity?: (value: number) => void;
-}
-export declare const CartItem: FunctionComponent<CartItemProps>;
-//# sourceMappingURL=CartItem.d.ts.map

package/components/CartItem/CartItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CartItem.d.ts","sourceRoot":"","sources":["../../../src/components/CartItem/CartItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,cAAc,EAAc,MAAM,eAAe,CAAC;AAa3D,OAAO,+CAA+C,CAAC;AAEvD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,EAAE,KAAK,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,cAAc,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACxC,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CA+OrD,CAAC"}

package/components/CartItem/CartItem.jsx

@@ -1,124 +0,0 @@
-import { useContext } from 'preact/compat';
-import { classes, VComponent } from '@adobe/elsie/lib';
-import { Button, CartItemSkeleton, Icon, Incrementer, UIContext, ProgressSpinner, } from '@adobe/elsie/components';
-import { useText } from '@adobe/elsie/i18n';
-import { Trash } from '@adobe/elsie/icons';
-import '@adobe/elsie/components/CartItem/CartItem.css';
-export const CartItem = ({ className, children, ariaLabel, image, title, price, taxIncluded = false, total, sku, configurations, warning, alert, quantity = 1, description, loading = false, updating = false, onQuantity, onRemove, ...props }) => {
-    const { locale } = useContext(UIContext);
-    const labels = useText({
-        each: 'Dropin.CartItem.each.label',
-        quantity: 'Dropin.CartItem.quantity.label',
-        remove: 'Dropin.CartItem.remove.label',
-        removeDefault: 'Dropin.CartItem.removeDefault.label',
-        taxIncluded: 'Dropin.CartItem.taxIncluded.label',
-        updating: 'Dropin.CartItem.updating.label',
-        updatingDefault: 'Dropin.ProgressSpinner.updating.label',
-    });
-    if (loading)
-        return <CartItemSkeleton />;
-    return (<div {...props} className={classes([
-            'dropin-cart-item',
-            ['dropin-cart-item--updating', updating],
-            className,
-        ])}>
-      {updating && (<ProgressSpinner className={classes(['dropin-cart-item__spinner'])} ariaLabel={ariaLabel
-                ? labels.updating?.replace('{product}', ariaLabel)
-                : labels.updatingDefault}/>)}
-      <div className="dropin-cart-item__wrapper">
-        {/* Image */}
-        <VComponent node={image} className={classes(['dropin-cart-item__image'])}/>
-
-        {/* Title */}
-        <VComponent node={title} className={classes([
-            'dropin-cart-item__title',
-            ['dropin-cart-item__title--edit', !!onQuantity || !!onRemove],
-        ])}/>
-
-        {/* Description */}
-        {description && (<VComponent node={description} className={classes(['dropin-cart-item__description'])}/>)}
-
-        {/* SKU */}
-        <VComponent node={sku} className={classes(['dropin-cart-item__sku'])}/>
-        {/* Configurations */}
-        {configurations && (<ul className={classes(['dropin-cart-item__configurations'])}>
-            {Object.entries(configurations).map(([key, value]) => (<li key={key} className={classes(['dropin-cart-item__configurations__item'])}>
-                {key}:{' '}
-                <strong className={classes([
-                    'dropin-cart-item__configurations__item__value',
-                ])}>
-                  {value}
-                </strong>
-              </li>))}
-          </ul>)}
-
-        {/* Price */}
-        <span className={classes(['dropin-cart-item__price'])}>
-          {!onQuantity && (<span className="dropin-cart-item__price__quantity">
-              {quantity.toLocaleString(locale)} x{' '}
-            </span>)}
-
-          <VComponent node={price} role="text"/>
-
-          {quantity > 1 && (<>
-              &nbsp;
-              {labels.each}
-            </>)}
-
-          {taxIncluded && (<span data-testid="tax-message" className="dropin-cart-item__price-tax-message">
-              &nbsp;
-              {labels.taxIncluded}
-            </span>)}
-        </span>
-
-        {/* Quantity */}
-        <div className={classes([
-            'dropin-cart-item__quantity',
-            ['dropin-cart-item__quantity--edit', !!onQuantity],
-        ])}>
-          {onQuantity ? (<Incrementer className={classes(['dropin-cart-item__quantity__incrementer'])} value={quantity} min={1} onValue={(value) => onQuantity?.(Number(value))} name="quantity" aria-label={labels.quantity} disabled={updating}/>) : (<span className={classes(['dropin-cart-item__quantity__value'])}>
-              {labels.quantity}:{' '}
-              <strong className="dropin-cart-item__quantity__number">
-                {Number(quantity).toLocaleString(locale)}
-              </strong>
-            </span>)}
-
-          {/* Warning */}
-          {warning && (<VComponent node={warning} className={classes([
-                'dropin-cart-item__warning',
-                'dropin-cart-item__warning--quantity',
-            ])}/>)}
-
-          {/* Alert */}
-          {alert && (<VComponent node={alert} className={classes([
-                'dropin-cart-item__alert',
-                'dropin-cart-item__alert--quantity',
-            ])}/>)}
-        </div>
-
-        {/* Warning */}
-        {warning && (<VComponent node={warning} className={classes(['dropin-cart-item__warning'])}/>)}
-
-        {/* Alert */}
-        {alert && (<VComponent node={alert} className={classes(['dropin-cart-item__alert'])}/>)}
-
-        {/* Total */}
-        <div className={classes([
-            'dropin-cart-item__total',
-            ['dropin-cart-item__total--edit', !!onRemove],
-        ])}>
-          <VComponent node={total} role="text"/>
-
-          {taxIncluded && (<span data-testid="tax-message" className={classes(['dropin-cart-item__total-tax-message'])}>
-              &nbsp;
-              {labels.taxIncluded}
-            </span>)}
-        </div>
-      </div>
-
-      {/* Remove Item */}
-      {onRemove && (<Button className={classes(['dropin-cart-item__remove'])} variant="tertiary" onClick={() => onRemove?.()} icon={<Icon source={Trash} size="24" stroke="2" viewBox="0 0 24 24" aria-label={ariaLabel
-                    ? labels.remove?.replace('{product}', ariaLabel)
-                    : labels.removeDefault}/>} disabled={updating}/>)}
-    </div>);
-};

package/components/CartItem/CartItem.stories.d.ts

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/preact';
-import { CartItemProps } from '@adobe/elsie/components';
-/**
- * Use CartItems to display a product item in Cart.
- */
-declare const meta: Meta<CartItemProps>;
-export default meta;
-type Story = StoryObj<CartItemProps>;
-/**
- * ```tsx
- * <CartItem
- *  ariaLabel="Short Name"
- *  image={<Image src="https://picsum.photos/132/184" width="132" height="184" alt="Some alternative text" loading="lazy" />}
- *  title={<div>Product Name</div>}
- *  description={<div>Secondary product information such as brand name, description, etc.</div>}
- *  sku={<div>SKU: 59YK7</div>}
- *  quantity={1}
- *  price={<Price amount={53.99} weight="normal" />}
- *  total={<>
- *    <Price amount={59.98} variant="strikethrough" />
- *    <Price amount={55.95} sale />
- *  </>}
- *  warning={<span> Only 5 left!</span>}
- *  alert={<span><Icon source={WarningWithCircle} size={'16'} /> Out of stock!</span>}
- *  configurations={{ Color: 'Blue', Size: 'L' }}
- *  onRemove={() => console.log('onRemove')}
- *  onQuantity={(value) => console.log('onQuantity', value)}
- * />
- * ```
- */
-export declare const CartItem: Story;
-/**
- * ```tsx
- * <CartItem
- *  ariaLabel="Short Name"
- *  image={<Image src="https://picsum.photos/132/184" width="132" height="184" alt="Some alternative text" loading="lazy" />}
- *  title={<div>Product Name</div>}
- *  description={<div>Secondary product information such as brand name, description, etc.</div>}
- *  sku={<div>SKU: 59YK7</div>}
- *  quantity={1}
- *  price={<Price amount={53.99} weight="normal" />}
- *  total={<>
- *    <Price amount={59.98} variant="strikethrough" />
- *    <Price amount={55.95} sale />
- *  </>}
- *  warning={<span> Only 5 left!</span>}
- *  alert={<span><Icon source={WarningWithCircle} size={'16'} /> Out of stock!</span>}
- *  configurations={{ Color: 'Blue', Size: 'L' }}
- * />
- * ```
- */
-export declare const ReadOnly: Story;
-export declare const Skeleton: Story;
-//# sourceMappingURL=CartItem.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CartItem.stories.d.ts","sourceRoot":"","sources":["../../../src/components/CartItem/CartItem.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAIxD,OAAO,EAIL,aAAa,EAGd,MAAM,yBAAyB,CAAC;AAGjC;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,aAAa,CAyM7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAsEtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAqBtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}

package/components/CartItem/CartItem.stories.jsx

@@ -1,309 +0,0 @@
-import { within, userEvent } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-import { Price, Image, CartItem as component, CartItemSkeleton, Icon, } from '@adobe/elsie/components';
-import { WarningWithCircle } from '@adobe/elsie/icons';
-/**
- * Use CartItems to display a product item in Cart.
- */
-const meta = {
-    title: 'Components/CartItem',
-    component,
-    parameters: {
-        layout: 'padded', // centered | fullscreen
-    },
-    argTypes: {
-        image: {
-            control: {
-                type: 'select',
-                labels: {
-                    Image: 'Image',
-                },
-            },
-            description: 'Product image.',
-            options: ['Image'],
-            mapping: {
-                Image: (<Image src="https://picsum.photos/132/184" width="132" height="184" alt="Some alternative text" loading="lazy"/>),
-            },
-            table: { defaultValue: { summary: 'null' } },
-        },
-        title: {
-            control: {
-                type: 'select',
-                labels: {
-                    Short: 'Short Name',
-                    Long: 'Long Name',
-                },
-            },
-            description: 'A title of the product.',
-            options: ['Short', 'Long'],
-            mapping: {
-                Short: <div>Short Name</div>,
-                Long: <div>Product with an extremely extremely long name</div>,
-            },
-            table: { defaultValue: { summary: 'null' } },
-        },
-        description: {
-            control: {
-                type: 'select',
-                labels: {
-                    Description: 'Description',
-                },
-            },
-            description: 'Description of the product.',
-            options: ['Description'],
-            mapping: {
-                Description: (<div>
-            Secondary product information such as brand name, description, etc.
-          </div>),
-            },
-            table: { defaultValue: { summary: 'null' } },
-        },
-        sku: {
-            control: {
-                type: 'select',
-                labels: {
-                    none: 'none',
-                    Sku: 'SKU: 59YK7',
-                },
-            },
-            description: 'A sku of the product.',
-            options: ['none', 'Sku'],
-            mapping: {
-                none: null,
-                Sku: <div>SKU: 59YK7</div>,
-            },
-            table: { defaultValue: { summary: 'null' } },
-        },
-        quantity: {
-            control: {
-                type: 'number',
-            },
-            description: 'The quantity of the product.',
-            table: { defaultValue: { summary: '1' } },
-        },
-        price: {
-            control: {
-                type: 'select',
-                labels: {
-                    Price: 'Item Price',
-                },
-            },
-            description: 'The price of each item.',
-            options: ['Price'],
-            mapping: {
-                Price: <Price amount={53.99} weight="normal"/>,
-            },
-            table: { defaultValue: { summary: 'null' } },
-        },
-        total: {
-            control: {
-                type: 'select',
-                labels: {
-                    Total: 'Total',
-                },
-            },
-            description: 'The total price of the product.',
-            options: ['Total'],
-            mapping: {
-                Total: (<>
-            <Price amount={59.98} variant="strikethrough"/>
-            <Price amount={55.95} sale/>
-          </>),
-            },
-            table: { defaultValue: { summary: 'null' } },
-        },
-        taxIncluded: {
-            control: {
-                type: 'boolean',
-            },
-            description: 'Render tax included message.',
-            table: { defaultValue: { summary: 'false' } },
-        },
-        configurations: {},
-        warning: {
-            control: {
-                type: 'select',
-                labels: {
-                    none: 'none',
-                    RunningOut: 'Only 1 left in stock',
-                },
-            },
-            description: 'A warning message.',
-            options: ['none', 'RunningOut'],
-            mapping: {
-                none: null,
-                RunningOut: <span> Only 5 left!</span>,
-            },
-            table: { defaultValue: { summary: 'null' } },
-        },
-        alert: {
-            control: {
-                type: 'select',
-                labels: {
-                    none: 'none',
-                    RunningOut: 'Out of stock',
-                },
-            },
-            description: 'Alert message.',
-            options: ['none', 'RunningOut'],
-            mapping: {
-                none: null,
-                RunningOut: (<span>
-            <Icon source={WarningWithCircle} size={'16'} aria-hidden={true}/>{' '}
-            Out of stock!
-          </span>),
-            },
-            table: { defaultValue: { summary: 'null' } },
-        },
-        loading: {
-            control: {
-                type: 'boolean',
-            },
-            description: 'Loading state.',
-            table: { defaultValue: { summary: 'false' } },
-        },
-        updating: {
-            control: {
-                type: 'boolean',
-            },
-            description: 'Updating state.',
-            table: { defaultValue: { summary: 'false' } },
-        },
-        onQuantity: {
-            description: 'Quantity update handler.',
-            table: {
-                type: { summary: 'function' },
-            },
-            action: 'onQuantity',
-        },
-        onRemove: {
-            description: 'Add a remove handler.',
-            table: {
-                type: { summary: 'function' },
-            },
-            action: 'onRemove',
-        },
-        ariaLabel: {
-            control: {
-                type: 'text',
-            },
-            description: 'Name for the component.',
-            table: { defaultValue: { summary: 'null' } },
-        },
-    },
-};
-export default meta;
-/**
- * ```tsx
- * <CartItem
- *  ariaLabel="Short Name"
- *  image={<Image src="https://picsum.photos/132/184" width="132" height="184" alt="Some alternative text" loading="lazy" />}
- *  title={<div>Product Name</div>}
- *  description={<div>Secondary product information such as brand name, description, etc.</div>}
- *  sku={<div>SKU: 59YK7</div>}
- *  quantity={1}
- *  price={<Price amount={53.99} weight="normal" />}
- *  total={<>
- *    <Price amount={59.98} variant="strikethrough" />
- *    <Price amount={55.95} sale />
- *  </>}
- *  warning={<span> Only 5 left!</span>}
- *  alert={<span><Icon source={WarningWithCircle} size={'16'} /> Out of stock!</span>}
- *  configurations={{ Color: 'Blue', Size: 'L' }}
- *  onRemove={() => console.log('onRemove')}
- *  onQuantity={(value) => console.log('onQuantity', value)}
- * />
- * ```
- */
-export const CartItem = {
-    args: {
-        ariaLabel: 'Short Name',
-        image: 'Image',
-        title: 'Short',
-        price: 'Price',
-        total: 'Total',
-        sku: 'Sku',
-        quantity: 1,
-        description: 'Description',
-        warning: 'none',
-        alert: 'none',
-        loading: false,
-        updating: false,
-        configurations: {
-            Color: 'Blue',
-            Size: 'L',
-            Multiple: '1, 2, 3',
-        },
-    },
-    play: async () => {
-        const canvasElement = document.querySelector('#storybook-root');
-        const canvas = within(canvasElement);
-        const itemImage = document.querySelector('.dropin-cart-item__image');
-        expect(itemImage).toBeVisible();
-        const itemTitle = document.querySelector('.dropin-cart-item__title');
-        expect(itemTitle).toBeVisible();
-        const itemSku = document.querySelector('.dropin-cart-item__sku');
-        expect(itemSku).toBeVisible();
-        const itemConfigurations = document.querySelector('.dropin-cart-item__configurations');
-        expect(itemConfigurations).toBeVisible();
-        const itemPrice = document.querySelector('.dropin-cart-item__price');
-        expect(itemPrice).toBeVisible();
-        const quantityStepper = document.querySelector('.dropin-cart-item__quantity');
-        expect(quantityStepper).toBeVisible();
-        const itemTotal = document.querySelector('.dropin-cart-item__total');
-        expect(itemTotal).toBeVisible();
-        const increaseButton = document.querySelector('button[aria-label="Increase Quantity"]');
-        const decreaseButton = document.querySelector('button[aria-label="Decrease 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('2')).toBeTruthy();
-        await userEvent.click(decreaseButton);
-        await expect(await canvas.findByDisplayValue('1')).toBeTruthy();
-    },
-};
-/**
- * ```tsx
- * <CartItem
- *  ariaLabel="Short Name"
- *  image={<Image src="https://picsum.photos/132/184" width="132" height="184" alt="Some alternative text" loading="lazy" />}
- *  title={<div>Product Name</div>}
- *  description={<div>Secondary product information such as brand name, description, etc.</div>}
- *  sku={<div>SKU: 59YK7</div>}
- *  quantity={1}
- *  price={<Price amount={53.99} weight="normal" />}
- *  total={<>
- *    <Price amount={59.98} variant="strikethrough" />
- *    <Price amount={55.95} sale />
- *  </>}
- *  warning={<span> Only 5 left!</span>}
- *  alert={<span><Icon source={WarningWithCircle} size={'16'} /> Out of stock!</span>}
- *  configurations={{ Color: 'Blue', Size: 'L' }}
- * />
- * ```
- */
-export const ReadOnly = {
-    args: {
-        ariaLabel: 'Short Name',
-        image: 'Image',
-        title: 'Short',
-        price: 'Price',
-        total: 'Total',
-        sku: 'Sku',
-        quantity: 1,
-        description: 'Description',
-        warning: 'none',
-        alert: 'none',
-        loading: false,
-        updating: false,
-        configurations: {
-            Color: 'Blue',
-            Size: 'L',
-        },
-        onQuantity: undefined,
-        onRemove: undefined,
-    },
-};
-export const Skeleton = {
-    render: () => <CartItemSkeleton />,
-};

package/components/CartItem/CartItem.test.d.ts

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

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

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

package/components/CartItem/CartItem.test.jsx

@@ -1,71 +0,0 @@
-/** https://preactjs.com/guide/v10/preact-testing-library/ */
-import { fireEvent, render, screen } from '@adobe/elsie/lib/tests';
-import { CartItem } from '@adobe/elsie/components/CartItem';
-jest.useFakeTimers();
-describe('Base/Components/CartItem', () => {
-    test('renders', () => {
-        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>}/>);
-        expect(container.innerHTML).toMatchInlineSnapshot(`"<div class=\\"dropin-design\\"><div class=\\"dropin-cart-item\\"><div class=\\"dropin-cart-item__wrapper\\"><img class=\\"dropin-cart-item__image\\"><div class=\\"dropin-cart-item__title\\">Title</div><div class=\\"dropin-cart-item__sku\\">SKU</div><span class=\\"dropin-cart-item__price\\"><span class=\\"dropin-cart-item__price__quantity\\">1 x </span><div role=\\"text\\">$9.99</div></span><div class=\\"dropin-cart-item__quantity\\"><span class=\\"dropin-cart-item__quantity__value\\">Quantity: <strong class=\\"dropin-cart-item__quantity__number\\">1</strong></span></div><div class=\\"dropin-cart-item__total\\"><div role=\\"text\\">$9.99</div></div></div></div></div>"`);
-    });
-    test('renders with configurations', () => {
-        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} configurations={{ Color: 'Blue', size: 'L' }}/>);
-        const $configurations = container.querySelector('.dropin-cart-item__configurations');
-        expect($configurations?.innerHTML).toMatchInlineSnapshot(`"<li class=\\"dropin-cart-item__configurations__item\\">Color: <strong class=\\"dropin-cart-item__configurations__item__value\\">Blue</strong></li><li class=\\"dropin-cart-item__configurations__item\\">size: <strong class=\\"dropin-cart-item__configurations__item__value\\">L</strong></li>"`);
-    });
-    test('renders with description', () => {
-        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} description={<div>Description</div>}/>);
-        const $description = container.querySelector('.dropin-cart-item__description');
-        expect($description?.innerHTML).toMatchInlineSnapshot(`"Description"`);
-    });
-    test('onQuantity', () => {
-        const onQuantity = jest.fn();
-        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} onQuantity={onQuantity}/>);
-        const increase = container.querySelector('.dropin-incrementer__increase-button');
-        expect(increase).toBeTruthy();
-        fireEvent.click(increase);
-        jest.runAllTimers();
-        expect(onQuantity).toHaveBeenCalledWith(2);
-    });
-    test('onRemove', () => {
-        const onRemove = jest.fn();
-        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} onRemove={onRemove}/>);
-        const remove = container.querySelector('.dropin-cart-item__remove');
-        expect(remove).toBeTruthy();
-        fireEvent.click(remove);
-        expect(onRemove).toHaveBeenCalled();
-    });
-    test('renders with warning', () => {
-        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} warning={<span>warning</span>}/>);
-        const $warning = container.querySelectorAll('.dropin-cart-item__warning');
-        expect($warning.length).toBe(2);
-        expect($warning[0]?.innerHTML).toMatchInlineSnapshot(`"warning"`);
-    });
-    test('renders with alert', () => {
-        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} alert={<span>alert</span>}/>);
-        const $alert = container.querySelectorAll('.dropin-cart-item__alert');
-        expect($alert.length).toBe(2);
-        expect($alert[0]?.innerHTML).toMatchInlineSnapshot(`"alert"`);
-    });
-    test('renders skeleton', () => {
-        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} warning={<span>warning</span>} loading/>);
-        expect(container.innerHTML).toMatchInlineSnapshot(`"<div class=\\"dropin-design\\"><div class=\\"dropin-cart-item dropin-cart-item-skeleton\\"><div style=\\"--row-gap-spacing: var(--spacing-medium);\\" role=\\"status\\" aria-label=\\"Loading...\\" class=\\"dropin-skeleton dropin-cart-item__skeleton dropin-cart-item__wrapper\\"><div class=\\"dropin-cart-item__image\\"><div class=\\"dropin-skeleton-row dropin-skeleton--row__content dropin-skeleton-row__row dropin-skeleton-row__row-small dropin-cart-item__skeleton__item\\"></div></div><div class=\\"dropin-cart-item__title\\"><div class=\\"dropin-skeleton-row dropin-skeleton--row__content dropin-skeleton-row__row dropin-skeleton-row__row-small dropin-cart-item__skeleton__item\\"></div></div><div class=\\"dropin-cart-item__sku\\"><div class=\\"dropin-skeleton-row dropin-skeleton--row__content dropin-skeleton-row__row dropin-skeleton-row__row-small dropin-cart-item__skeleton__item\\"></div></div><div class=\\"dropin-cart-item__price\\"><div class=\\"dropin-skeleton-row dropin-skeleton--row__content dropin-skeleton-row__row dropin-skeleton-row__row-small dropin-cart-item__skeleton__item\\"></div></div><div class=\\"dropin-cart-item__quantity\\"><div class=\\"dropin-skeleton-row dropin-skeleton--row__content dropin-skeleton-row__row dropin-skeleton-row__row-small dropin-cart-item__skeleton__item\\"></div></div><div class=\\"dropin-cart-item__total\\"><div class=\\"dropin-skeleton-row dropin-skeleton--row__content dropin-skeleton-row__row dropin-skeleton-row__row-small dropin-cart-item__skeleton__item\\"></div></div></div></div></div>"`);
-    });
-    test('renders messages with taxIncluded', () => {
-        render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} taxIncluded/>);
-        const $taxIncluded = screen.getAllByTestId('tax-message');
-        expect($taxIncluded.length).toBe(2);
-    });
-    test('renders "each" label', () => {
-        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} quantity={2}/>);
-        const $each = container.querySelector('.dropin-cart-item__price');
-        expect($each?.innerHTML).toMatchInlineSnapshot(`"<span class=\\"dropin-cart-item__price__quantity\\">2 x </span><div role=\\"text\\">$9.99</div>&nbsp;each"`);
-    });
-    test('renders progress spinner when updating', () => {
-        const { container } = render(<CartItem image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>} updating/>);
-        expect(container.innerHTML).toMatchInlineSnapshot(`"<div class=\\"dropin-design\\"><div class=\\"dropin-cart-item dropin-cart-item--updating\\"><div aria-live=\\"polite\\" role=\\"status\\" aria-label=\\"Item is updating\\" class=\\"dropin-cart-item__spinner dropin-progress-spinner dropin-progress-spinner--shape-size-small dropin-progress-spinner--shape-stroke-4\\"></div><div class=\\"dropin-cart-item__wrapper\\"><img class=\\"dropin-cart-item__image\\"><div class=\\"dropin-cart-item__title\\">Title</div><div class=\\"dropin-cart-item__sku\\">SKU</div><span class=\\"dropin-cart-item__price\\"><span class=\\"dropin-cart-item__price__quantity\\">1 x </span><div role=\\"text\\">$9.99</div></span><div class=\\"dropin-cart-item__quantity\\"><span class=\\"dropin-cart-item__quantity__value\\">Quantity: <strong class=\\"dropin-cart-item__quantity__number\\">1</strong></span></div><div class=\\"dropin-cart-item__total\\"><div role=\\"text\\">$9.99</div></div></div></div></div>"`);
-    });
-    test('renders with aria-label', () => {
-        const { container } = render(<CartItem ariaLabel={'Cart Item'} image={<img />} title={<div>Title</div>} price={<div>$9.99</div>} total={<div>$9.99</div>} sku={<div>SKU</div>}/>);
-        expect(container.innerHTML).toMatchInlineSnapshot(`"<div class=\\"dropin-design\\"><div class=\\"dropin-cart-item\\"><div class=\\"dropin-cart-item__wrapper\\"><img class=\\"dropin-cart-item__image\\"><div class=\\"dropin-cart-item__title\\">Title</div><div class=\\"dropin-cart-item__sku\\">SKU</div><span class=\\"dropin-cart-item__price\\"><span class=\\"dropin-cart-item__price__quantity\\">1 x </span><div role=\\"text\\">$9.99</div></span><div class=\\"dropin-cart-item__quantity\\"><span class=\\"dropin-cart-item__quantity__value\\">Quantity: <strong class=\\"dropin-cart-item__quantity__number\\">1</strong></span></div><div class=\\"dropin-cart-item__total\\"><div role=\\"text\\">$9.99</div></div></div></div></div>"`);
-    });
-});

package/components/CartItem/CartItemSkeleton.d.ts

@@ -1,3 +0,0 @@
-import { FunctionComponent } from 'preact';
-export declare const CartItemSkeleton: FunctionComponent;
-//# sourceMappingURL=CartItemSkeleton.d.ts.map

package/components/CartItem/CartItemSkeleton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CartItemSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/CartItem/CartItemSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG3C,eAAO,MAAM,gBAAgB,EAAE,iBAyB9B,CAAC"}

package/components/CartItem/CartItemSkeleton.jsx

@@ -1,25 +0,0 @@
-import { Skeleton, SkeletonRow } from '@adobe/elsie/components';
-export const CartItemSkeleton = () => {
-    return (<div className="dropin-cart-item dropin-cart-item-skeleton">
-      <Skeleton className="dropin-cart-item__skeleton dropin-cart-item__wrapper">
-        <div className="dropin-cart-item__image">
-          <SkeletonRow className="dropin-cart-item__skeleton__item"/>
-        </div>
-        <div className="dropin-cart-item__title">
-          <SkeletonRow className="dropin-cart-item__skeleton__item"/>
-        </div>
-        <div className="dropin-cart-item__sku">
-          <SkeletonRow className="dropin-cart-item__skeleton__item"/>
-        </div>
-        <div className="dropin-cart-item__price">
-          <SkeletonRow className="dropin-cart-item__skeleton__item"/>
-        </div>
-        <div className="dropin-cart-item__quantity">
-          <SkeletonRow className="dropin-cart-item__skeleton__item"/>
-        </div>
-        <div className="dropin-cart-item__total">
-          <SkeletonRow className="dropin-cart-item__skeleton__item"/>
-        </div>
-      </Skeleton>
-    </div>);
-};

package/components/CartItem/CartItemSkeleton.test.d.ts

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

package/components/CartItem/CartItemSkeleton.test.d.ts.map

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