@shopify/hydrogen 1.0.2 → 1.3.0

package/README.md

@@ -8,7 +8,7 @@ Hydrogen is a React framework and SDK that you can use to build fast and dynamic
 
 **Requirements:**
 
-- Node.js version 16.5.0 or higher
+- Node.js version 16.14.0 or higher
 - Yarn
 
 ```bash

package/dist/esnext/FileSessionStorage.d.ts

@@ -1 +1 @@
-export { FileSessionStorage } from './foundation/FileSessionStorage/FileSessionStorage';
+export { FileSessionStorage } from './foundation/FileSessionStorage/FileSessionStorage.js';

package/dist/esnext/FileSessionStorage.js

@@ -1 +1 @@
-export { FileSessionStorage } from './foundation/FileSessionStorage/FileSessionStorage';
+export { FileSessionStorage } from './foundation/FileSessionStorage/FileSessionStorage.js';

package/dist/esnext/client.d.ts

@@ -1,16 +1,16 @@
-export * from './components';
-export * from './hooks';
-export { useServerProps } from './foundation/useServerProps';
-export { useShop } from './foundation/useShop';
-export { ServerPropsProvider, ServerPropsContext, type ServerProps, type ServerPropsContextValue, } from './foundation/ServerPropsProvider';
-export { useUrl } from './foundation/useUrl';
-export { Head } from './foundation/Head';
-export * from './utilities';
-export { gql } from './utilities/graphql-tag';
-export { ClientAnalytics } from './foundation/Analytics';
-export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
-export { useNavigate } from './foundation/useNavigate/useNavigate';
-export { fetchSync } from './foundation/fetchSync/client/fetchSync';
-export { suspendFunction, preloadFunction } from './utilities/suspense';
-export { PerformanceMetrics } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client';
-export { PerformanceMetricsDebug } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client';
+export * from './components/index.js';
+export * from './hooks/index.js';
+export { useServerProps } from './foundation/useServerProps/index.js';
+export { useShop } from './foundation/useShop/index.js';
+export { ServerPropsProvider, ServerPropsContext, type ServerProps, type ServerPropsContextValue, } from './foundation/ServerPropsProvider/index.js';
+export { useUrl } from './foundation/useUrl/index.js';
+export { Head } from './foundation/Head/index.js';
+export * from './utilities/index.js';
+export { gql } from './utilities/graphql-tag.js';
+export { ClientAnalytics } from './foundation/Analytics/index.js';
+export { useRouteParams } from './foundation/useRouteParams/useRouteParams.js';
+export { useNavigate } from './foundation/useNavigate/useNavigate.js';
+export { fetchSync } from './foundation/fetchSync/client/fetchSync.js';
+export { suspendFunction, preloadFunction } from './utilities/suspense.js';
+export { PerformanceMetrics } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client.js';
+export { PerformanceMetricsDebug } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client.js';

package/dist/esnext/client.js

@@ -1,16 +1,16 @@
-export * from './components';
-export * from './hooks';
-export { useServerProps } from './foundation/useServerProps';
-export { useShop } from './foundation/useShop';
-export { ServerPropsProvider, ServerPropsContext, } from './foundation/ServerPropsProvider';
-export { useUrl } from './foundation/useUrl';
-export { Head } from './foundation/Head';
-export * from './utilities';
-export { gql } from './utilities/graphql-tag';
-export { ClientAnalytics } from './foundation/Analytics';
-export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
-export { useNavigate } from './foundation/useNavigate/useNavigate';
-export { fetchSync } from './foundation/fetchSync/client/fetchSync';
-export { suspendFunction, preloadFunction } from './utilities/suspense';
-export { PerformanceMetrics } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client';
-export { PerformanceMetricsDebug } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client';
+export * from './components/index.js';
+export * from './hooks/index.js';
+export { useServerProps } from './foundation/useServerProps/index.js';
+export { useShop } from './foundation/useShop/index.js';
+export { ServerPropsProvider, ServerPropsContext, } from './foundation/ServerPropsProvider/index.js';
+export { useUrl } from './foundation/useUrl/index.js';
+export { Head } from './foundation/Head/index.js';
+export * from './utilities/index.js';
+export { gql } from './utilities/graphql-tag.js';
+export { ClientAnalytics } from './foundation/Analytics/index.js';
+export { useRouteParams } from './foundation/useRouteParams/useRouteParams.js';
+export { useNavigate } from './foundation/useNavigate/useNavigate.js';
+export { fetchSync } from './foundation/fetchSync/client/fetchSync.js';
+export { suspendFunction, preloadFunction } from './utilities/suspense.js';
+export { PerformanceMetrics } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client.js';
+export { PerformanceMetricsDebug } from './foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client.js';

package/dist/esnext/components/AddToCartButton/AddToCartButton.client.d.ts

@@ -1,4 +1,5 @@
-import { BaseButtonProps } from '../BaseButton';
+import React from 'react';
+import { BaseButtonProps } from '../BaseButton/index.js';
 interface AddToCartButtonProps {
     /** An array of cart line attributes that belong to the item being added to the cart. */
     attributes?: {
@@ -11,10 +12,12 @@ interface AddToCartButtonProps {
     quantity?: number;
     /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */
     accessibleAddingToCartLabel?: string;
+    /** The selling plan ID of the subscription variant */
+    sellingPlanId?: string;
 }
 /**
  * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
  * It must be a descendent of the `CartProvider` component.
  */
-export declare function AddToCartButton(props: AddToCartButtonProps & BaseButtonProps): JSX.Element;
+export declare function AddToCartButton<AsType extends React.ElementType = 'button'>(props: AddToCartButtonProps & BaseButtonProps<AsType>): JSX.Element;
 export {};

package/dist/esnext/components/AddToCartButton/AddToCartButton.client.js

@@ -1,14 +1,14 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useCart } from '../CartProvider';
-import { useProductOptions } from '../../hooks/useProductOptions';
-import { BaseButton } from '../BaseButton';
+import { useCart } from '../CartProvider/index.js';
+import { useProductOptions } from '../../hooks/useProductOptions/index.js';
+import { BaseButton } from '../BaseButton/index.js';
 /**
  * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
  * It must be a descendent of the `CartProvider` component.
  */
 export function AddToCartButton(props) {
     const [addingItem, setAddingItem] = useState(false);
-    const { variantId: explicitVariantId, quantity = 1, attributes, onClick, children, accessibleAddingToCartLabel, ...passthroughProps } = props;
+    const { variantId: explicitVariantId, quantity = 1, attributes, sellingPlanId, onClick, children, accessibleAddingToCartLabel, ...passthroughProps } = props;
     const { status, linesAdd } = useCart();
     const { selectedVariant } = useProductOptions();
     const variantId = explicitVariantId ?? selectedVariant?.id ?? '';
@@ -29,9 +29,10 @@ export function AddToCartButton(props) {
                 quantity,
                 merchandiseId: variantId,
                 attributes,
+                sellingPlanId,
             },
         ]);
-    }, [linesAdd, quantity, variantId, attributes]);
+    }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);
     return (React.createElement(React.Fragment, null,
         React.createElement(BaseButton, { ...passthroughProps, disabled: disabled, onClick: onClick, defaultOnClick: handleAddItem }, children),
         accessibleAddingToCartLabel ? (React.createElement("p", { style: {

package/dist/esnext/components/AddToCartButton/index.d.ts

@@ -1 +1 @@
-export { AddToCartButton } from './AddToCartButton.client';
+export { AddToCartButton } from './AddToCartButton.client.js';

package/dist/esnext/components/AddToCartButton/index.js

@@ -1 +1 @@
-export { AddToCartButton } from './AddToCartButton.client';
+export { AddToCartButton } from './AddToCartButton.client.js';

package/dist/esnext/components/BaseButton/BaseButton.client.d.ts

@@ -1,14 +1,16 @@
 import React, { ReactNode, Ref } from 'react';
-interface Props {
+export interface CustomBaseButtonProps<AsType> {
+    /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */
+    as?: AsType;
     /** Any ReactNode elements. */
     children: ReactNode;
     /** Click event handler. Default behaviour triggers unless prevented */
     onClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
-    /** A default onClick behaviour */
+    /** A default onClick behavior */
     defaultOnClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
     /** A ref to the underlying button */
     buttonRef?: Ref<HTMLButtonElement>;
+    disabled?: boolean;
 }
-export declare type BaseButtonProps = Omit<JSX.IntrinsicElements['button'], 'onClick' | 'children'> & Props;
-export declare function BaseButton({ onClick, defaultOnClick, children, buttonRef, ...passthroughProps }: BaseButtonProps): JSX.Element;
-export {};
+export declare type BaseButtonProps<AsType extends React.ElementType> = CustomBaseButtonProps<AsType> & Omit<React.ComponentPropsWithoutRef<AsType>, keyof CustomBaseButtonProps<AsType>>;
+export declare function BaseButton<AsType extends React.ElementType = 'button'>(props: BaseButtonProps<AsType>): JSX.Element;

package/dist/esnext/components/BaseButton/BaseButton.client.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { useCallback } from 'react';
-export function BaseButton({ onClick, defaultOnClick, children, buttonRef, ...passthroughProps }) {
+import React, { useCallback } from 'react';
+export function BaseButton(props) {
+    const { as, onClick, defaultOnClick, children, buttonRef, ...passthroughProps } = props;
     const handleOnClick = useCallback((event) => {
         if (onClick) {
             const clickShouldContinue = onClick(event);
@@ -11,5 +11,6 @@ export function BaseButton({ onClick, defaultOnClick, children, buttonRef, ...pa
         }
         defaultOnClick?.(event);
     }, [defaultOnClick, onClick]);
-    return (React.createElement("button", { ...passthroughProps, ref: buttonRef, onClick: handleOnClick }, children));
+    const Component = as || 'button';
+    return (React.createElement(Component, { ref: buttonRef, onClick: handleOnClick, ...passthroughProps }, children));
 }

package/dist/esnext/components/BaseButton/index.d.ts

@@ -1 +1 @@
-export { BaseButton, BaseButtonProps } from './BaseButton.client';
+export { BaseButton, BaseButtonProps } from './BaseButton.client.js';

package/dist/esnext/components/BaseButton/index.js

@@ -1 +1 @@
-export { BaseButton } from './BaseButton.client';
+export { BaseButton } from './BaseButton.client.js';

package/dist/esnext/components/BuyNowButton/BuyNowButton.client.d.ts

@@ -1,4 +1,5 @@
-import { BaseButtonProps } from '../BaseButton';
+import React from 'react';
+import { BaseButtonProps } from '../BaseButton/index.js';
 interface BuyNowButtonProps {
     /** The item quantity. Defaults to 1. */
     quantity?: number;
@@ -11,5 +12,5 @@ interface BuyNowButtonProps {
     }[];
 }
 /** The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. */
-export declare function BuyNowButton(props: BuyNowButtonProps & BaseButtonProps): JSX.Element;
+export declare function BuyNowButton<AsType extends React.ElementType = 'button'>(props: BuyNowButtonProps & BaseButtonProps<AsType>): JSX.Element;
 export {};

package/dist/esnext/components/BuyNowButton/BuyNowButton.client.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { useInstantCheckout } from '../CartProvider';
-import { BaseButton } from '../BaseButton';
+import { useInstantCheckout } from '../CartProvider/index.js';
+import { BaseButton } from '../BaseButton/index.js';
 /** The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. */
 export function BuyNowButton(props) {
     const { createInstantCheckout, checkoutUrl } = useInstantCheckout();

package/dist/esnext/components/BuyNowButton/index.d.ts

@@ -1 +1 @@
-export { BuyNowButton } from './BuyNowButton.client';
+export { BuyNowButton } from './BuyNowButton.client.js';

package/dist/esnext/components/BuyNowButton/index.js

@@ -1 +1 @@
-export { BuyNowButton } from './BuyNowButton.client';
+export { BuyNowButton } from './BuyNowButton.client.js';

package/dist/esnext/components/CartCheckoutButton/CartCheckoutButton.client.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useCart } from '../CartProvider';
+import { useCart } from '../CartProvider/index.js';
 /**
  * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.
  * It must be a descendent of a `CartProvider` component.

package/dist/esnext/components/CartCheckoutButton/index.d.ts

@@ -1 +1 @@
-export { CartCheckoutButton } from './CartCheckoutButton.client';
+export { CartCheckoutButton } from './CartCheckoutButton.client.js';

package/dist/esnext/components/CartCheckoutButton/index.js

@@ -1 +1 @@
-export { CartCheckoutButton } from './CartCheckoutButton.client';
+export { CartCheckoutButton } from './CartCheckoutButton.client.js';

package/dist/esnext/components/CartCost/CartCost.client.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Money } from '../Money';
+import { Money } from '../Money/index.js';
 export interface CartCostProps {
     /** A string type that defines the type of cost needed. Valid values: `total`, `subtotal`, `tax`, or `duty`. */
     amountType?: 'total' | 'subtotal' | 'tax' | 'duty';

package/dist/esnext/components/CartCost/CartCost.client.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useCart } from '../CartProvider';
-import { Money } from '../Money';
+import { useCart } from '../CartProvider/index.js';
+import { Money } from '../Money/index.js';
 /**
  * The `CartCost` component renders a `Money` component with the
  * cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`.

package/dist/esnext/components/CartCost/index.d.ts

@@ -1 +1 @@
-export { CartCost } from './CartCost.client';
+export { CartCost } from './CartCost.client.js';

package/dist/esnext/components/CartCost/index.js

@@ -1 +1 @@
-export { CartCost } from './CartCost.client';
+export { CartCost } from './CartCost.client.js';

package/dist/esnext/components/CartLineImage/CartLineImage.client.d.ts

@@ -1,4 +1,4 @@
-import { type ShopifyImageProps } from '../Image';
+import { type ShopifyImageProps } from '../Image/index.js';
 import type { Simplify } from 'type-fest';
 declare type PropsWeControl = 'data';
 /**

package/dist/esnext/components/CartLineImage/CartLineImage.client.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useCartLine } from '../CartLineProvider';
-import { Image } from '../Image';
+import { useCartLine } from '../CartLineProvider/index.js';
+import { Image } from '../Image/index.js';
 /**
  * The `CartLineImage` component renders an `Image` component for the cart line merchandise's image.
  * It must be a descendent of a `CartLineProvider` component.

package/dist/esnext/components/CartLineImage/index.d.ts

@@ -1 +1 @@
-export { CartLineImage } from './CartLineImage.client';
+export { CartLineImage } from './CartLineImage.client.js';

package/dist/esnext/components/CartLineImage/index.js

@@ -1 +1 @@
-export { CartLineImage } from './CartLineImage.client';
+export { CartLineImage } from './CartLineImage.client.js';

package/dist/esnext/components/CartLinePrice/CartLinePrice.client.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Money } from '../Money';
+import { Money } from '../Money/index.js';
 interface CartLinePriceProps {
     /** The type of price. Valid values:`regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';

package/dist/esnext/components/CartLinePrice/CartLinePrice.client.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useCartLine } from '../CartLineProvider';
-import { Money } from '../Money';
+import { useCartLine } from '../CartLineProvider/index.js';
+import { Money } from '../Money/index.js';
 /**
  * The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or
  * compare at price. It must be a descendent of a `CartLineProvider` component.

package/dist/esnext/components/CartLinePrice/index.d.ts

@@ -1 +1 @@
-export { CartLinePrice } from './CartLinePrice.client';
+export { CartLinePrice } from './CartLinePrice.client.js';

package/dist/esnext/components/CartLinePrice/index.js

@@ -1 +1 @@
-export { CartLinePrice } from './CartLinePrice.client';
+export { CartLinePrice } from './CartLinePrice.client.js';

package/dist/esnext/components/CartLineProductTitle/CartLineProductTitle.client.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useCartLine } from '../CartLineProvider';
+import { useCartLine } from '../CartLineProvider/index.js';
 /**
  * The `CartLineProductTitle` component renders a `span` element (or the type of HTML element specified by
  * the `as` prop) with the cart line merchandise's title. It must be a descendent of a `CartLineProvider` component.

package/dist/esnext/components/CartLineProductTitle/index.d.ts

@@ -1 +1 @@
-export { CartLineProductTitle } from './CartLineProductTitle.client';
+export { CartLineProductTitle } from './CartLineProductTitle.client.js';

package/dist/esnext/components/CartLineProductTitle/index.js

@@ -1 +1 @@
-export { CartLineProductTitle } from './CartLineProductTitle.client';
+export { CartLineProductTitle } from './CartLineProductTitle.client.js';

package/dist/esnext/components/CartLineProvider/CartLineProvider.client.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Cart } from '../CartProvider';
+import { Cart } from '../CartProvider/index.js';
 /**
  * The `CartLineProvider` component creates a context for using a cart line.
  */

package/dist/esnext/components/CartLineProvider/CartLineProvider.client.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CartLineContext } from './context';
+import { CartLineContext } from './context.js';
 /**
  * The `CartLineProvider` component creates a context for using a cart line.
  */

package/dist/esnext/components/CartLineProvider/context.d.ts

@@ -1,36 +1,36 @@
 export declare const CartLineContext: import("react").Context<({
     __typename?: "CartLine" | undefined;
-} & Pick<import("../../storefront-api-types").CartLine, "id" | "quantity"> & {
+} & Pick<import("../../storefront-api-types.js").CartLine, "id" | "quantity"> & {
     attributes: ({
         __typename?: "Attribute" | undefined;
-    } & Pick<import("../../storefront-api-types").Attribute, "key" | "value">)[];
+    } & Pick<import("../../storefront-api-types.js").Attribute, "key" | "value">)[];
     cost: {
         __typename?: "CartLineCost" | undefined;
     } & {
         totalAmount: {
             __typename?: "MoneyV2" | undefined;
-        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">;
-        compareAtAmountPerQuantity?: import("../../storefront-api-types").Maybe<{
+        } & Pick<import("../../storefront-api-types.js").MoneyV2, "currencyCode" | "amount">;
+        compareAtAmountPerQuantity?: import("../../storefront-api-types.js").Maybe<{
             __typename?: "MoneyV2" | undefined;
-        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">> | undefined;
+        } & Pick<import("../../storefront-api-types.js").MoneyV2, "currencyCode" | "amount">> | undefined;
     };
     merchandise: {
         __typename?: "ProductVariant" | undefined;
-    } & Pick<import("../../storefront-api-types").ProductVariant, "id" | "title" | "availableForSale" | "requiresShipping"> & {
-        compareAtPriceV2?: import("../../storefront-api-types").Maybe<{
+    } & Pick<import("../../storefront-api-types.js").ProductVariant, "id" | "title" | "availableForSale" | "requiresShipping"> & {
+        compareAtPriceV2?: import("../../storefront-api-types.js").Maybe<{
             __typename?: "MoneyV2" | undefined;
-        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">> | undefined;
+        } & Pick<import("../../storefront-api-types.js").MoneyV2, "currencyCode" | "amount">> | undefined;
         priceV2: {
             __typename?: "MoneyV2" | undefined;
-        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">;
-        image?: import("../../storefront-api-types").Maybe<{
+        } & Pick<import("../../storefront-api-types.js").MoneyV2, "currencyCode" | "amount">;
+        image?: import("../../storefront-api-types.js").Maybe<{
             __typename?: "Image" | undefined;
-        } & Pick<import("../../storefront-api-types").Image, "id" | "height" | "width" | "url" | "altText">> | undefined;
+        } & Pick<import("../../storefront-api-types.js").Image, "id" | "height" | "width" | "url" | "altText">> | undefined;
         product: {
             __typename?: "Product" | undefined;
-        } & Pick<import("../../storefront-api-types").Product, "title" | "handle">;
+        } & Pick<import("../../storefront-api-types.js").Product, "title" | "handle">;
         selectedOptions: ({
             __typename?: "SelectedOption" | undefined;
-        } & Pick<import("../../storefront-api-types").SelectedOption, "name" | "value">)[];
+        } & Pick<import("../../storefront-api-types.js").SelectedOption, "name" | "value">)[];
     };
 }) | null>;

package/dist/esnext/components/CartLineProvider/index.d.ts

@@ -1,2 +1,2 @@
-export { CartLineProvider } from './CartLineProvider.client';
-export { useCartLine } from '../../hooks/useCartLine';
+export { CartLineProvider } from './CartLineProvider.client.js';
+export { useCartLine } from '../../hooks/useCartLine/index.js';

package/dist/esnext/components/CartLineProvider/index.js

@@ -1,2 +1,2 @@
-export { CartLineProvider } from './CartLineProvider.client';
-export { useCartLine } from '../../hooks/useCartLine';
+export { CartLineProvider } from './CartLineProvider.client.js';
+export { useCartLine } from '../../hooks/useCartLine/index.js';

package/dist/esnext/components/CartLineQuantity/CartLineQuantity.client.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useCartLine } from '../CartLineProvider';
+import { useCartLine } from '../CartLineProvider/index.js';
 /**
  * The `CartLineQuantity` component renders a `span` element (or the type of HTML element
  * specified by the `as` prop) with the cart line's quantity. It must be a descendent of a `CartLineProvider` component.

package/dist/esnext/components/CartLineQuantity/index.d.ts

@@ -1 +1 @@
-export { CartLineQuantity } from './CartLineQuantity.client';
+export { CartLineQuantity } from './CartLineQuantity.client.js';

package/dist/esnext/components/CartLineQuantity/index.js

@@ -1 +1 @@
-export { CartLineQuantity } from './CartLineQuantity.client';
+export { CartLineQuantity } from './CartLineQuantity.client.js';

package/dist/esnext/components/CartLineQuantityAdjustButton/CartLineQuantityAdjustButton.d.ts

@@ -1,13 +1,12 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
-import { BaseButtonProps } from '../BaseButton';
-declare type PropsWeControl = 'adjust';
+import React from 'react';
+import { BaseButtonProps } from '../BaseButton/index.js';
+interface CartLineQuantityAdjustButtonProps {
+    /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */
+    adjust?: 'increase' | 'decrease' | 'remove';
+}
 /**
  * The `CartLineQuantityAdjustButton` component renders a button that adjusts the cart line's quantity when pressed.
  * It must be a descendent of a `CartLineProvider` component.
  */
-export declare function CartLineQuantityAdjustButton<TTag extends ElementType = 'button'>(props: Props<TTag, PropsWeControl> & {
-    /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */
-    adjust?: 'increase' | 'decrease' | 'remove';
-} & BaseButtonProps): JSX.Element;
+export declare function CartLineQuantityAdjustButton<AsType extends React.ElementType = 'button'>(props: CartLineQuantityAdjustButtonProps & BaseButtonProps<AsType>): JSX.Element;
 export {};

package/dist/esnext/components/CartLineQuantityAdjustButton/CartLineQuantityAdjustButton.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
-import { useCart } from '../CartProvider';
-import { useCartLine } from '../CartLineProvider';
-import { BaseButton } from '../BaseButton';
+import { useCart } from '../CartProvider/index.js';
+import { useCartLine } from '../CartLineProvider/index.js';
+import { BaseButton } from '../BaseButton/index.js';
 /**
  * The `CartLineQuantityAdjustButton` component renders a button that adjusts the cart line's quantity when pressed.
  * It must be a descendent of a `CartLineProvider` component.

package/dist/esnext/components/CartLineQuantityAdjustButton/index.d.ts

@@ -1 +1 @@
-export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton';
+export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton.js';

package/dist/esnext/components/CartLineQuantityAdjustButton/index.js

@@ -1 +1 @@
-export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton';
+export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton.js';

package/dist/esnext/components/CartLines/CartLines.client.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, ElementType } from 'react';
-import { Props } from '../types';
+import { Props } from '../types.js';
 export interface CartLinesProps {
     /** A `ReactNode` element. Valid values: `ul` or `undefined`. If `ul`, then each child will
      * be wrapped with a `li` element.

package/dist/esnext/components/CartLines/CartLines.client.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
-import { useCart } from '../CartProvider';
-import { CartLineProvider } from '../CartLineProvider';
+import { useCart } from '../CartProvider/index.js';
+import { CartLineProvider } from '../CartLineProvider/index.js';
 /**
  * The `CartLines` component iterates over each cart line and renders its `children` within
  * a `CartLineProvider` for each cart line.

package/dist/esnext/components/CartLines/index.d.ts

@@ -1 +1 @@
-export { CartLines } from './CartLines.client';
+export { CartLines } from './CartLines.client.js';

package/dist/esnext/components/CartLines/index.js

@@ -1 +1 @@
-export { CartLines } from './CartLines.client';
+export { CartLines } from './CartLines.client.js';

package/dist/esnext/components/CartProvider/CartProvider.client.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { CartBuyerIdentityInput, CountryCode } from '../../storefront-api-types';
-import { CartFragmentFragment } from './graphql/CartFragment';
+import { CartBuyerIdentityInput, CountryCode } from '../../storefront-api-types.js';
+import { CartFragmentFragment } from './graphql/CartFragment.js';
 /**
  * The `CartProvider` component creates a context for using a cart. It creates a cart object and callbacks
  * that can be accessed by any descendent component using the `useCart` hook and related hooks. It also carries out

package/dist/esnext/components/CartProvider/CartProvider.client.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useCallback, useReducer, useMemo, useRef, } from 'react';
-import { flattenConnection } from '../../utilities/flattenConnection';
-import { CartLineAdd, CartCreate, CartLineRemove, CartLineUpdate, CartNoteUpdate, CartBuyerIdentityUpdate, CartAttributesUpdate, CartDiscountCodesUpdate, CartQuery, defaultCartFragment, } from './cart-queries';
-import { CountryCode, } from '../../storefront-api-types';
-import { useCartFetch } from './hooks.client';
-import { CartContext } from './context';
-import { CART_ID_STORAGE_KEY } from './constants';
-import { ClientAnalytics } from '../../foundation/Analytics/ClientAnalytics';
+import { flattenConnection } from '../../utilities/flattenConnection/index.js';
+import { CartLineAdd, CartCreate, CartLineRemove, CartLineUpdate, CartNoteUpdate, CartBuyerIdentityUpdate, CartAttributesUpdate, CartDiscountCodesUpdate, CartQuery, defaultCartFragment, } from './cart-queries.js';
+import { CountryCode, } from '../../storefront-api-types.js';
+import { useCartFetch } from './hooks.client.js';
+import { CartContext } from './context.js';
+import { CART_ID_STORAGE_KEY } from './constants.js';
+import { ClientAnalytics } from '../../foundation/Analytics/ClientAnalytics.js';
 function cartReducer(state, action) {
     switch (action.type) {
         case 'cartFetch': {
@@ -219,6 +219,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
                     addedCartLines: cart.lines,
                     cart: data.cartCreate.cart,
+                    prevCart: null,
                 });
             }
             dispatch({
@@ -258,6 +259,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
                     addedCartLines: lines,
                     cart: data.cartLinesAdd.cart,
+                    prevCart: state.cart,
                 });
                 dispatch({
                     type: 'resolve',
@@ -289,6 +291,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 ClientAnalytics.publish(ClientAnalytics.eventNames.REMOVE_FROM_CART, true, {
                     removedCartLines: lines,
                     cart: data.cartLinesRemove.cart,
+                    prevCart: state.cart,
                 });
                 dispatch({
                     type: 'resolve',
@@ -320,6 +323,8 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 ClientAnalytics.publish(ClientAnalytics.eventNames.UPDATE_CART, true, {
                     updatedCartLines: lines,
                     oldCart: state.cart,
+                    cart: data.cartLinesUpdate.cart,
+                    prevCart: state.cart,
                 });
                 dispatch({
                     type: 'resolve',
@@ -432,6 +437,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 ClientAnalytics.publish(ClientAnalytics.eventNames.DISCOUNT_CODE_UPDATED, true, {
                     updatedDiscountCodes: discountCodes,
                     cart: data.cartDiscountCodesUpdate.cart,
+                    prevCart: state.cart,
                 });
                 dispatch({
                     type: 'resolve',