@shopify/hydrogen 1.0.0-alpha.22 → 1.0.2

package/README.md

@@ -2,13 +2,13 @@
 
 Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.
 
-[Check out the docs](https://shopify.dev/beta/hydrogen)
+[Check out the docs](https://shopify.dev/custom-storefronts/hydrogen)
 
 ## Getting started
 
 **Requirements:**
 
-- Node v14+
+- Node.js version 16.5.0 or higher
 - Yarn
 
 ```bash

package/dist/esnext/FileSessionStorage.d.ts

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

package/dist/esnext/FileSessionStorage.js

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

package/dist/esnext/client.d.ts

@@ -1,7 +1,16 @@
 export * from './components';
 export * from './hooks';
-export * from './foundation/ShopifyProvider';
-export { useServerResponse } from './foundation/Hydration/Cache.client';
-export * from './foundation/ServerStateProvider';
-export { ServerStateRouter } from './foundation/Router/ServerStateRouter.client';
-export { Helmet } from 'react-helmet-async';
+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';

package/dist/esnext/client.js

@@ -1,7 +1,16 @@
 export * from './components';
 export * from './hooks';
-export * from './foundation/ShopifyProvider';
-export { useServerResponse } from './foundation/Hydration/Cache.client';
-export * from './foundation/ServerStateProvider';
-export { ServerStateRouter } from './foundation/Router/ServerStateRouter.client';
-export { Helmet } from 'react-helmet-async';
+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';

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

@@ -1,15 +1,20 @@
-import React, { ReactNode } from 'react';
-import { Props } from '../types';
-export interface AddToCartButtonProps {
+import { BaseButtonProps } from '../BaseButton';
+interface AddToCartButtonProps {
+    /** An array of cart line attributes that belong to the item being added to the cart. */
     attributes?: {
         key: string;
         value: string;
     }[];
-    variantID: string;
+    /** The ID of the variant. */
+    variantId?: string | null;
+    /** The item quantity. */
     quantity?: number;
-    children: ReactNode;
+    /** 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;
 }
-declare type PropsWeControl = 'onClick';
-export declare function AddToCartButton<TTag extends React.ElementType = 'button'>(props: Props<TTag, PropsWeControl> & AddToCartButtonProps): JSX.Element;
+/**
+ * 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 {};

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

@@ -1,44 +1,48 @@
-import React, { useEffect, useState } from 'react';
-import { useCartLinesAddCallback, useCart, useCartCreateCallback, } from '../CartProvider';
-import { useCartUI } from '../CartUIProvider';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useCart } from '../CartProvider';
+import { useProductOptions } from '../../hooks/useProductOptions';
+import { BaseButton } from '../BaseButton';
+/**
+ * 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 cartUI = useCartUI();
     const [addingItem, setAddingItem] = useState(false);
-    const { variantID, quantity = 1, attributes, children, onAdd, accessibleAddingToCartLabel, ...passthroughProps } = props;
-    const { status, id } = useCart();
-    const createCart = useCartCreateCallback();
-    const addLines = useCartLinesAddCallback();
+    const { variantId: explicitVariantId, quantity = 1, attributes, onClick, children, accessibleAddingToCartLabel, ...passthroughProps } = props;
+    const { status, linesAdd } = useCart();
+    const { selectedVariant } = useProductOptions();
+    const variantId = explicitVariantId ?? selectedVariant?.id ?? '';
+    const disabled = explicitVariantId === null ||
+        variantId === '' ||
+        selectedVariant === null ||
+        addingItem ||
+        passthroughProps.disabled;
     useEffect(() => {
         if (addingItem && status === 'idle') {
             setAddingItem(false);
-            cartUI === null || cartUI === void 0 ? void 0 : cartUI.openCart();
         }
-    }, [status, addingItem, cartUI]);
+    }, [status, addingItem]);
+    const handleAddItem = useCallback(() => {
+        setAddingItem(true);
+        linesAdd([
+            {
+                quantity,
+                merchandiseId: variantId,
+                attributes,
+            },
+        ]);
+    }, [linesAdd, quantity, variantId, attributes]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("button", { ...passthroughProps, disabled: addingItem || passthroughProps.disabled, onClick: () => {
-                setAddingItem(true);
-                if (!id) {
-                    createCart({
-                        lines: [
-                            {
-                                quantity: quantity,
-                                merchandiseId: variantID,
-                                attributes: attributes,
-                            },
-                        ],
-                    });
-                }
-                else {
-                    addLines([
-                        {
-                            quantity: quantity,
-                            merchandiseId: variantID,
-                            attributes: attributes,
-                        },
-                    ]);
-                }
-            } }, children),
-        React.createElement("p", { className: "sr-only", role: "alert", "aria-live": "assertive" }, addingItem
-            ? accessibleAddingToCartLabel !== null && accessibleAddingToCartLabel !== void 0 ? accessibleAddingToCartLabel : 'Adding product to your cart'
-            : null)));
+        React.createElement(BaseButton, { ...passthroughProps, disabled: disabled, onClick: onClick, defaultOnClick: handleAddItem }, children),
+        accessibleAddingToCartLabel ? (React.createElement("p", { style: {
+                position: 'absolute',
+                width: '1px',
+                height: '1px',
+                padding: '0',
+                margin: '-1px',
+                overflow: 'hidden',
+                clip: 'rect(0, 0, 0, 0)',
+                whiteSpace: 'nowrap',
+                borderWidth: '0',
+            }, role: "alert", "aria-live": "assertive" }, addingItem ? accessibleAddingToCartLabel : null)) : null));
 }

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

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

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

@@ -0,0 +1,14 @@
+import React, { ReactNode, Ref } from 'react';
+interface Props {
+    /** 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 */
+    defaultOnClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
+    /** A ref to the underlying button */
+    buttonRef?: Ref<HTMLButtonElement>;
+}
+export declare type BaseButtonProps = Omit<JSX.IntrinsicElements['button'], 'onClick' | 'children'> & Props;
+export declare function BaseButton({ onClick, defaultOnClick, children, buttonRef, ...passthroughProps }: BaseButtonProps): JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useCallback } from 'react';
+export function BaseButton({ onClick, defaultOnClick, children, buttonRef, ...passthroughProps }) {
+    const handleOnClick = useCallback((event) => {
+        if (onClick) {
+            const clickShouldContinue = onClick(event);
+            if ((typeof clickShouldContinue === 'boolean' &&
+                clickShouldContinue === false) ||
+                event?.defaultPrevented)
+                return;
+        }
+        defaultOnClick?.(event);
+    }, [defaultOnClick, onClick]);
+    return (React.createElement("button", { ...passthroughProps, ref: buttonRef, onClick: handleOnClick }, children));
+}

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { BaseButtonProps } from '../BaseButton';
+interface BuyNowButtonProps {
+    /** The item quantity. Defaults to 1. */
+    quantity?: number;
+    /** The ID of the variant. */
+    variantId: string;
+    /** An array of cart line attributes that belong to the item being added to the cart. */
+    attributes?: {
+        key: string;
+        value: string;
+    }[];
+}
+/** 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 {};

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

@@ -0,0 +1,27 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { useInstantCheckout } from '../CartProvider';
+import { BaseButton } from '../BaseButton';
+/** 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();
+    const [loading, setLoading] = useState(false);
+    const { quantity, variantId, onClick, attributes, children, ...passthroughProps } = props;
+    useEffect(() => {
+        if (checkoutUrl) {
+            window.location.href = checkoutUrl;
+        }
+    }, [checkoutUrl]);
+    const handleBuyNow = useCallback(() => {
+        setLoading(true);
+        createInstantCheckout({
+            lines: [
+                {
+                    quantity: quantity ?? 1,
+                    merchandiseId: variantId,
+                    attributes,
+                },
+            ],
+        });
+    }, [createInstantCheckout, quantity, variantId, attributes]);
+    return (React.createElement(BaseButton, { disabled: loading ?? passthroughProps.disabled, ...passthroughProps, onClick: onClick, defaultOnClick: handleBuyNow }, children));
+}

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

@@ -1 +1 @@
-export { BuyNowButton, BuyNowButtonProps, BuyNowButtonPropsWeControl, } from './BuyNowButton';
+export { BuyNowButton } from './BuyNowButton.client';

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

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

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

@@ -1,7 +1,11 @@
-import React, { ReactNode } from 'react';
-import { Props } from '../types';
+import { ReactNode } from 'react';
 declare type PropsWeControl = 'onClick';
-export declare function CartCheckoutButton<TTag extends React.ElementType = 'a'>(props: Props<TTag, PropsWeControl> & {
+/**
+ * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.
+ * It must be a descendent of a `CartProvider` component.
+ */
+export declare function CartCheckoutButton(props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & {
+    /** A `ReactNode` element. */
     children: ReactNode;
 }): JSX.Element;
 export {};

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

@@ -1,14 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { useCart, useCartCheckoutUrl } from '../CartProvider';
+import { useCart } from '../CartProvider';
+/**
+ * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.
+ * It must be a descendent of a `CartProvider` component.
+ */
 export function CartCheckoutButton(props) {
     const [requestedCheckout, setRequestedCheckout] = useState(false);
-    const { status } = useCart();
-    const url = useCartCheckoutUrl();
+    const { status, checkoutUrl } = useCart();
     const { children, ...passthroughProps } = props;
     useEffect(() => {
-        if (requestedCheckout && url && status === 'idle') {
-            window.location.href = url;
+        if (requestedCheckout && checkoutUrl && status === 'idle') {
+            window.location.href = checkoutUrl;
         }
-    }, [requestedCheckout, status, url]);
+    }, [requestedCheckout, status, checkoutUrl]);
     return (React.createElement("button", { ...passthroughProps, disabled: requestedCheckout || passthroughProps.disabled, onClick: () => setRequestedCheckout(true) }, children));
 }

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Money } from '../Money';
+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';
+    /** A function that takes an object return by the `useMoney` hook and returns a `ReactNode`. */
+    children?: React.ReactNode;
+}
+/**
+ * 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`.
+ * If `children` is a function, then it will pass down the render props provided by the parent component.
+ */
+export declare function CartCost(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartCostProps): JSX.Element | null;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useCart } from '../CartProvider';
+import { Money } from '../Money';
+/**
+ * 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`.
+ * If `children` is a function, then it will pass down the render props provided by the parent component.
+ */
+export function CartCost(props) {
+    const { cost } = useCart();
+    const { amountType = 'total', children, ...passthroughProps } = props;
+    let amount;
+    if (amountType == 'total') {
+        amount = cost?.totalAmount;
+    }
+    else if (amountType == 'subtotal') {
+        amount = cost?.subtotalAmount;
+    }
+    else if (amountType == 'tax') {
+        amount = cost?.totalTaxAmount;
+    }
+    else if (amountType == 'duty') {
+        amount = cost?.totalDutyAmount;
+    }
+    if (amount == null) {
+        return null;
+    }
+    return (React.createElement(Money, { ...passthroughProps, data: amount }, children));
+}

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

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

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

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

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

@@ -1,6 +1,9 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
-import { ImageSizeOptions } from '../../utilities';
-export declare function CartLineImage<TTag extends ElementType = 'img'>(props: Props<TTag> & {
-    options?: ImageSizeOptions;
-}): JSX.Element | null;
+import { type ShopifyImageProps } from '../Image';
+import type { Simplify } from 'type-fest';
+declare type PropsWeControl = 'data';
+/**
+ * The `CartLineImage` component renders an `Image` component for the cart line merchandise's image.
+ * It must be a descendent of a `CartLineProvider` component.
+ */
+export declare function CartLineImage(props: Simplify<Omit<ShopifyImageProps, PropsWeControl>>): JSX.Element | null;
+export {};

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

@@ -1,8 +1,11 @@
 import React from 'react';
 import { useCartLine } from '../CartLineProvider';
-import { Image as ImageComponent } from '../Image';
+import { Image } from '../Image';
+/**
+ * The `CartLineImage` component renders an `Image` component for the cart line merchandise's image.
+ * It must be a descendent of a `CartLineProvider` component.
+ */
 export function CartLineImage(props) {
     const cartLine = useCartLine();
-    const { options, ...passthroughProps } = props;
-    return cartLine.merchandise.image ? (React.createElement(ImageComponent, { ...passthroughProps, image: cartLine.merchandise.image, options: options })) : null;
+    return cartLine.merchandise.image ? (React.createElement(Image, { ...props, data: cartLine.merchandise.image })) : null;
 }

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

@@ -1,6 +1,12 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
-export interface CartLinePriceProps {
+import React from 'react';
+import { Money } from '../Money';
+interface CartLinePriceProps {
+    /** The type of price. Valid values:`regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
 }
-export declare function CartLinePrice<TTag extends ElementType>(props: Props<TTag> & CartLinePriceProps): JSX.Element | null;
+/**
+ * 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.
+ */
+export declare function CartLinePrice(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartLinePriceProps): JSX.Element | null;
+export {};

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

@@ -1,17 +1,18 @@
 import React from 'react';
 import { useCartLine } from '../CartLineProvider';
 import { Money } from '../Money';
+/**
+ * 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.
+ */
 export function CartLinePrice(props) {
     const cartLine = useCartLine();
     const { priceType = 'regular', ...passthroughProps } = props;
-    const price = priceType === 'regular'
-        ? cartLine.merchandise.priceV2
-        : cartLine.merchandise.compareAtPriceV2;
-    if (price == null) {
+    const moneyV2 = priceType === 'regular'
+        ? cartLine.cost.totalAmount
+        : cartLine.cost.compareAtAmountPerQuantity;
+    if (moneyV2 == null) {
         return null;
     }
-    return (React.createElement(Money, { ...passthroughProps, money: {
-            amount: price.amount * cartLine.quantity,
-            currencyCode: price.currencyCode,
-        } }, props.children));
+    return React.createElement(Money, { ...passthroughProps, data: moneyV2 });
 }

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

@@ -1,3 +1,8 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
-export declare function CartLineProductTitle<TTag extends ElementType>(props: Props<TTag>): JSX.Element;
+/**
+ * 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.
+ */
+export declare function CartLineProductTitle<TTag extends keyof JSX.IntrinsicElements = 'span'>(props: JSX.IntrinsicElements[TTag] & {
+    /** An HTML tag to be rendered as the base element wrapper. The default is `span`.  */
+    as?: TTag;
+}): JSX.Element;

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

@@ -1,5 +1,9 @@
 import React from 'react';
 import { useCartLine } from '../CartLineProvider';
+/**
+ * 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.
+ */
 export function CartLineProductTitle(props) {
     const cartLine = useCartLine();
     const { as, ...passthroughProps } = props;

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

@@ -1,6 +1,11 @@
 import { ReactNode } from 'react';
 import { Cart } from '../CartProvider';
+/**
+ * The `CartLineProvider` component creates a context for using a cart line.
+ */
 export declare function CartLineProvider({ children, line, }: {
+    /** Any `ReactNode` elements. */
     children: ReactNode;
+    /** A cart line object. */
     line: Cart['lines'][1];
 }): JSX.Element;

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

@@ -1,5 +1,8 @@
 import React from 'react';
 import { CartLineContext } from './context';
+/**
+ * The `CartLineProvider` component creates a context for using a cart line.
+ */
 export function CartLineProvider({ children, line, }) {
     return (React.createElement(CartLineContext.Provider, { value: line }, children));
 }

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

@@ -1,26 +1,36 @@
 export declare const CartLineContext: import("react").Context<({
     __typename?: "CartLine" | undefined;
-} & Pick<import("../../graphql/types/types").CartLine, "id" | "quantity"> & {
+} & Pick<import("../../storefront-api-types").CartLine, "id" | "quantity"> & {
     attributes: ({
         __typename?: "Attribute" | undefined;
-    } & Pick<import("../../graphql/types/types").Attribute, "key" | "value">)[];
+    } & Pick<import("../../storefront-api-types").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<{
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">> | undefined;
+    };
     merchandise: {
         __typename?: "ProductVariant" | undefined;
-    } & Pick<import("../../graphql/types/types").ProductVariant, "title" | "id" | "availableForSale" | "requiresShipping"> & {
-        compareAtPriceV2?: import("../../graphql/types/types").Maybe<{
+    } & Pick<import("../../storefront-api-types").ProductVariant, "id" | "title" | "availableForSale" | "requiresShipping"> & {
+        compareAtPriceV2?: import("../../storefront-api-types").Maybe<{
             __typename?: "MoneyV2" | undefined;
-        } & Pick<import("../../graphql/types/types").MoneyV2, "amount" | "currencyCode">> | undefined;
+        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">> | undefined;
         priceV2: {
             __typename?: "MoneyV2" | undefined;
-        } & Pick<import("../../graphql/types/types").MoneyV2, "amount" | "currencyCode">;
-        image?: import("../../graphql/types/types").Maybe<{
+        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">;
+        image?: import("../../storefront-api-types").Maybe<{
             __typename?: "Image" | undefined;
-        } & Pick<import("../../graphql/types/types").Image, "altText" | "originalSrc">> | undefined;
+        } & Pick<import("../../storefront-api-types").Image, "id" | "height" | "width" | "url" | "altText">> | undefined;
         product: {
             __typename?: "Product" | undefined;
-        } & Pick<import("../../graphql/types/types").Product, "title" | "handle">;
+        } & Pick<import("../../storefront-api-types").Product, "title" | "handle">;
         selectedOptions: ({
             __typename?: "SelectedOption" | undefined;
-        } & Pick<import("../../graphql/types/types").SelectedOption, "value" | "name">)[];
+        } & Pick<import("../../storefront-api-types").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';
+export { useCartLine } from '../../hooks/useCartLine';

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

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

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

@@ -1,3 +1,8 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
-export declare function CartLineQuantity<TTag extends ElementType>(props: Props<TTag>): JSX.Element;
+/**
+ * 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.
+ */
+export declare function CartLineQuantity<TTag extends keyof JSX.IntrinsicElements = 'span'>(props: JSX.IntrinsicElements[TTag] & {
+    /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
+    as?: TTag;
+}): JSX.Element;

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

@@ -1,5 +1,9 @@
 import React from 'react';
 import { useCartLine } from '../CartLineProvider';
+/**
+ * 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.
+ */
 export function CartLineQuantity(props) {
     const cartLine = useCartLine();
     const { as, ...passthroughProps } = props;

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

@@ -1,8 +1,13 @@
-import { ReactNode, ElementType } from 'react';
+import { ElementType } from 'react';
 import { Props } from '../types';
-declare type PropsWeControl = 'onClick' | 'adjust';
+import { BaseButtonProps } from '../BaseButton';
+declare type PropsWeControl = 'adjust';
+/**
+ * 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> & {
-    children: ReactNode;
+    /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */
     adjust?: 'increase' | 'decrease' | 'remove';
-}): JSX.Element;
+} & BaseButtonProps): JSX.Element;
 export {};