@shopify/hydrogen 0.0.0-unstable-20220314172608

package/README.md

@@ -0,0 +1,29 @@
+# Hydrogen
+
+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/custom-storefronts/hydrogen)
+
+## Getting started
+
+**Requirements:**
+
+- Node.js version 16.5.0 or higher
+- Yarn
+
+```bash
+yarn
+yarn dev
+```
+
+## Building for production
+
+```bash
+yarn build
+```
+
+Then, you can run a local `server.js` using the production build with:
+
+```bash
+yarn serve
+```

package/client.d.ts

@@ -0,0 +1 @@
+export * from './dist/esnext/client';

package/client.js

@@ -0,0 +1 @@
+export * from './dist/esnext/client';

package/dist/esnext/client.d.ts

@@ -0,0 +1,9 @@
+export * from './components';
+export * from './hooks';
+export * from './foundation/useServerState';
+export * from './foundation/useShop';
+export * from './foundation/ServerStateProvider';
+export { Head } from './foundation/Head';
+export * from './utilities';
+export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
+export { useNavigate } from './foundation/useNavigate/useNavigate';

package/dist/esnext/client.js

@@ -0,0 +1,9 @@
+export * from './components';
+export * from './hooks';
+export * from './foundation/useServerState';
+export * from './foundation/useShop';
+export * from './foundation/ServerStateProvider';
+export { Head } from './foundation/Head';
+export * from './utilities';
+export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
+export { useNavigate } from './foundation/useNavigate/useNavigate';

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+interface AddToCartButtonProps {
+    /** An array of cart line attributes that belong to the item being added to the cart. */
+    attributes?: {
+        key: string;
+        value: string;
+    }[];
+    /** The ID of the variant. */
+    variantId?: string | null;
+    /** The item quantity. */
+    quantity?: number;
+    /** Any ReactNode elements. */
+    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';
+/**
+ * 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: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & AddToCartButtonProps): JSX.Element;
+export {};

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

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { useCart } from '../CartProvider';
+import { useProduct } from '../ProductProvider';
+/**
+ * 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) {
+    var _a, _b;
+    const [addingItem, setAddingItem] = useState(false);
+    const { variantId: explicitVariantId, quantity = 1, attributes, children, accessibleAddingToCartLabel, ...passthroughProps } = props;
+    const { status, linesAdd } = useCart();
+    const product = useProduct();
+    const variantId = (_b = explicitVariantId !== null && explicitVariantId !== void 0 ? explicitVariantId : (_a = product === null || product === void 0 ? void 0 : product.selectedVariant) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '';
+    const disabled = explicitVariantId === null ||
+        variantId === '' ||
+        (product === null || product === void 0 ? void 0 : product.selectedVariant) === null ||
+        addingItem ||
+        passthroughProps.disabled;
+    useEffect(() => {
+        if (addingItem && status === 'idle') {
+            setAddingItem(false);
+        }
+    }, [status, addingItem]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { ...passthroughProps, disabled: disabled, onClick: () => {
+                setAddingItem(true);
+                linesAdd([
+                    {
+                        quantity: quantity,
+                        merchandiseId: variantId,
+                        attributes: attributes,
+                    },
+                ]);
+            } }, 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

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

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

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

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+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;
+    }[];
+    /** Any `ReactNode` elements. */
+    children: ReactNode;
+}
+declare type PropsWeControl = 'onClick';
+/** The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. */
+export declare function BuyNowButton(props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & BuyNowButtonProps): JSX.Element;
+export {};

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+declare type PropsWeControl = 'onClick';
+/**
+ * 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

@@ -0,0 +1,17 @@
+import React, { useEffect, useState } from 'react';
+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, checkoutUrl } = useCart();
+    const { children, ...passthroughProps } = props;
+    useEffect(() => {
+        if (requestedCheckout && checkoutUrl && status === 'idle') {
+            window.location.href = checkoutUrl;
+        }
+    }, [requestedCheckout, status, checkoutUrl]);
+    return (React.createElement("button", { ...passthroughProps, disabled: requestedCheckout || passthroughProps.disabled, onClick: () => setRequestedCheckout(true) }, children));
+}

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

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

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

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Money } from '../Money';
+export interface CartEstimatedCostProps {
+    /** 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 `CartEstimatedCost` 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 CartEstimatedCost<TTag extends keyof JSX.IntrinsicElements>(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartEstimatedCostProps): JSX.Element | null;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useCart } from '../CartProvider';
+import { Money } from '../Money';
+/**
+ * The `CartEstimatedCost` 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 CartEstimatedCost(props) {
+    const { estimatedCost } = useCart();
+    const { amountType = 'total', children, ...passthroughProps } = props;
+    let amount;
+    if (amountType == 'total') {
+        amount = estimatedCost === null || estimatedCost === void 0 ? void 0 : estimatedCost.totalAmount;
+    }
+    else if (amountType == 'subtotal') {
+        amount = estimatedCost === null || estimatedCost === void 0 ? void 0 : estimatedCost.subtotalAmount;
+    }
+    else if (amountType == 'tax') {
+        amount = estimatedCost === null || estimatedCost === void 0 ? void 0 : estimatedCost.totalTaxAmount;
+    }
+    else if (amountType == 'duty') {
+        amount = estimatedCost === null || estimatedCost === void 0 ? void 0 : estimatedCost.totalDutyAmount;
+    }
+    if (amount == null) {
+        return null;
+    }
+    return (React.createElement(Money, { ...passthroughProps, data: amount }, children));
+}

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

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

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Image } from '../Image';
+import { ImageSizeOptions } from '../../utilities';
+declare type PropsWeControl = 'data' | 'options';
+/**
+ * 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: Omit<React.ComponentProps<typeof Image>, PropsWeControl> & {
+    options?: ImageSizeOptions;
+}): JSX.Element | null;
+export {};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useCartLine } from '../CartLineProvider';
+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(Image, { ...passthroughProps, data: cartLine.merchandise.image, options: options })) : null;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+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) {
+        return null;
+    }
+    return (React.createElement(Money, { ...passthroughProps, data: {
+            amount: `${parseFloat(price.amount) * cartLine.quantity}`,
+            currencyCode: price.currencyCode,
+        } }));
+}

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+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;
+    const Wrapper = as ? as : 'span';
+    return (React.createElement(Wrapper, { ...passthroughProps }, cartLine.merchandise.product.title));
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const CartLineContext = createContext(null);

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+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;
+    const Wrapper = as ? as : 'span';
+    return React.createElement(Wrapper, { ...passthroughProps }, cartLine.quantity);
+}

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useCart } from '../CartProvider';
+import { useCartLine } from '../CartLineProvider';
+/**
+ * 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 function CartLineQuantityAdjustButton(props) {
+    const { status, linesRemove, linesUpdate } = useCart();
+    const cartLine = useCartLine();
+    const { children, adjust, ...passthroughProps } = props;
+    return (React.createElement("button", { disabled: status !== 'idle', onClick: () => {
+            if (adjust === 'remove') {
+                linesRemove([cartLine.id]);
+                return;
+            }
+            const quantity = adjust === 'decrease' ? cartLine.quantity - 1 : cartLine.quantity + 1;
+            if (quantity <= 0) {
+                linesRemove([cartLine.id]);
+                return;
+            }
+            linesUpdate([{ id: cartLine.id, quantity }]);
+        }, ...passthroughProps }, children));
+}

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { ReactNode, ElementType } from 'react';
+import { Props } from '../types';
+export interface CartLinesProps {
+    /** A `ReactNode` element. Valid values: `ul` or `undefined`. If `ul`, then each child will
+     * be wrapped with a `li` element.
+     */
+    as?: 'ul';
+    /** A `ReactNode` element */
+    children: ReactNode;
+}
+/**
+ * The `CartLines` component iterates over each cart line and renders its `children` within
+ * a `CartLineProvider` for each cart line.
+ */
+export declare function CartLines<TTag extends ElementType>(props: Props<TTag> & CartLinesProps): JSX.Element;

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

@@ -0,0 +1,17 @@
+import React, { Fragment } from 'react';
+import { useCart } from '../CartProvider';
+import { CartLineProvider } from '../CartLineProvider';
+/**
+ * The `CartLines` component iterates over each cart line and renders its `children` within
+ * a `CartLineProvider` for each cart line.
+ */
+export function CartLines(props) {
+    const { lines } = useCart();
+    const { as, children, ...passthroughProps } = props;
+    const Wrapper = as !== null && as !== void 0 ? as : Fragment;
+    const ChildWrapper = Wrapper === 'ul' ? 'li' : Fragment;
+    return (React.createElement(Wrapper, { ...passthroughProps }, lines.map((line) => {
+        return (React.createElement(ChildWrapper, { key: line.id },
+            React.createElement(CartLineProvider, { line: line }, children)));
+    })));
+}

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

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

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

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

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { CartFragmentFragment } from './graphql/CartFragment';
+/**
+ * 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
+ * any callback props when a relevant action is performed. For example, if a `onLineAdd` callback is provided,
+ * then the callback will be called when a new line item is successfully added to the cart.
+ *
+ * The `CartProvider` component must be a descendent of the `ShopifyProvider` component.
+ * You must use this component if you want to use the `useCart` hook or related hooks, or if you would like to use the `AddToCartButton` component.
+ */
+export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, }: {
+    /** Any `ReactNode` elements. */
+    children: React.ReactNode;
+    numCartLines?: number;
+    /** A callback that is invoked when the process to create a cart begins, but before the cart is created in the Storefront API. */
+    onCreate?: () => void;
+    /** A callback that is invoked when the process to add a line item to the cart begins, but before the line item is added to the Storefront API. */
+    onLineAdd?: () => void;
+    /** A callback that is invoked when the process to remove a line item to the cart begins, but before the line item is removed from the Storefront API. */
+    onLineRemove?: () => void;
+    /** A callback that is invoked when the process to update a line item in the cart begins, but before the line item is updated in the Storefront API. */
+    onLineUpdate?: () => void;
+    /** A callback that is invoked when the process to add or update a note in the cart begins, but before the note is added or updated in the Storefront API. */
+    onNoteUpdate?: () => void;
+    /** A callback that is invoked when the process to update the buyer identity begins, but before the buyer identity is updated in the Storefront API. */
+    onBuyerIdentityUpdate?: () => void;
+    /** A callback that is invoked when the process to update the cart attributes begins, but before the attributes are updated in the Storefront API. */
+    onAttributesUpdate?: () => void;
+    /** A callback that is invoked when the process to update the cart discount codes begins, but before the discount codes are updated in the Storefront API. */
+    onDiscountCodesUpdate?: () => void;
+    /**
+     * A cart object from the Storefront API to populate the initial state of the provider.
+     */
+    data?: CartFragmentFragment;
+}): JSX.Element;