@shopify/hydrogen 0.10.0-experimental.4 → 0.11.0-experimental.1

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 v14+
+- Node.js version 16.5.0 or higher
 - Yarn
 
 ```bash

package/dist/esnext/client.d.ts

@@ -2,8 +2,6 @@ export * from './components';
 export * from './hooks';
 export * from './foundation/useServerState';
 export * from './foundation/useShop';
-export * from './foundation/ShopifyProvider';
 export * from './foundation/ServerStateProvider';
-export { ServerStateRouter } from './foundation/Router/ServerStateRouter.client';
-export { Helmet, HelmetProvider } from 'react-helmet-async';
+export { Helmet } from './foundation/Helmet';
 export * from './utilities';

package/dist/esnext/client.js

@@ -2,8 +2,6 @@ export * from './components';
 export * from './hooks';
 export * from './foundation/useServerState';
 export * from './foundation/useShop';
-export * from './foundation/ShopifyProvider';
 export * from './foundation/ServerStateProvider';
-export { ServerStateRouter } from './foundation/Router/ServerStateRouter.client';
-export { Helmet, HelmetProvider } from 'react-helmet-async';
+export { Helmet } from './foundation/Helmet';
 export * from './utilities';

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useCartLinesAddCallback, useCart, useCartCreateCallback, } from '../CartProvider';
+import { useCart } from '../CartProvider';
 /**
  * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
  * It must be a descendent of the `CartProvider` component.
@@ -7,9 +7,7 @@ import { useCartLinesAddCallback, useCart, useCartCreateCallback, } from '../Car
 export function AddToCartButton(props) {
     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 { status, id, cartCreate, linesAdd } = useCart();
     useEffect(() => {
         if (addingItem && status === 'idle') {
             setAddingItem(false);
@@ -19,7 +17,7 @@ export function AddToCartButton(props) {
         React.createElement("button", { ...passthroughProps, disabled: addingItem || passthroughProps.disabled, onClick: () => {
                 setAddingItem(true);
                 if (!id) {
-                    createCart({
+                    cartCreate({
                         lines: [
                             {
                                 quantity: quantity,
@@ -30,7 +28,7 @@ export function AddToCartButton(props) {
                     });
                 }
                 else {
-                    addLines([
+                    linesAdd([
                         {
                             quantity: quantity,
                             merchandiseId: variantId,

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

@@ -1,18 +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/CartLineAttributes/CartLineAttributes.client.d.ts

@@ -12,6 +12,10 @@ interface AttributesRenderProps {
  * cart line's attributes. It must be a descendent of a `CartLineProvider` component.
  */
 export declare function CartLineAttributes<TTag extends ElementType>(props: Props<TTag> & {
+    /** A `ReactNode` element. Valid values: `ul` or `undefined`. If `ul`, then each child will
+     * be wrapped with a `li` element.
+     */
+    as?: ElementType;
     /** A function that takes an object as an argument and returns a `ReactNode`. */
     children: (props: AttributesRenderProps) => ReactElement;
 }): JSX.Element;

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

@@ -1,6 +1,7 @@
 import { ElementType } from 'react';
+import { MoneyProps } from '../Money';
 import { Props } from '../types';
-export interface CartLinePriceProps {
+export interface CartLinePriceProps extends Omit<MoneyProps, 'money'> {
     /** The type of price. Valid values:`regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
 }

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

@@ -17,5 +17,5 @@ export function CartLinePrice(props) {
     return (React.createElement(Money, { ...passthroughProps, money: {
             amount: price.amount * cartLine.quantity,
             currencyCode: price.currencyCode,
-        } }, props.children));
+        } }));
 }

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

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

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

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

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

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

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

@@ -11,6 +11,10 @@ interface SelectedOptionsRenderProps {
  * for each of the cart line merchandise's selected options. It must be a descendent of a `CartLineProvider` component.
  */
 export declare function CartLineSelectedOptions<TTag extends ElementType>(props: Props<TTag> & {
+    /** A `ReactNode` element. Valid values: `ul` or `undefined`. If `ul`, then each child will
+     * be wrapped with a `li` element.
+     */
+    as?: ElementType;
     /** A function that takes an object as an argument and returns a `ReactNode`. */
     children: (props: SelectedOptionsRenderProps) => ReactElement;
 }): JSX.Element;

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

@@ -1,16 +1,15 @@
 import { ReactNode, ElementType } from 'react';
-import { Cart } from '../CartProvider';
 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 or a function that takes a cart line as an argument and returns a `ReactNode`. */
-    children: ReactNode | ((line: Cart['lines'][1]) => ReactNode);
+    /** A `ReactNode` element */
+    children: ReactNode;
 }
 /**
  * The `CartLines` component iterates over each cart line and renders its `children` within
- * a `CartLineProvider` for each cart line. It also provides render props in the case where `children` is a function.
+ * 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

@@ -1,9 +1,9 @@
-import React, { cloneElement, Fragment } from 'react';
+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. It also provides render props in the case where `children` is a function.
+ * a `CartLineProvider` for each cart line.
  */
 export function CartLines(props) {
     const { lines } = useCart();
@@ -12,8 +12,6 @@ export function CartLines(props) {
     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 }, typeof children === 'function'
-                ? cloneElement(children(line))
-                : children)));
+            React.createElement(CartLineProvider, { line: line }, children)));
     })));
 }

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

@@ -13,21 +13,21 @@ export declare function CartProvider({ children, numCartLines, onCreate, onLineA
     /** Any `ReactNode` elements. */
     children: React.ReactNode;
     numCartLines?: number;
-    /** A callback that is run automatically when a cart is created. */
+    /** 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 run automatically when a new cart line is added. */
+    /** 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 run automatically when a cart line is removed. */
+    /** 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 run automatically when a cart line is updated. */
+    /** 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 run automatically when the cart note is updated. */
+    /** 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 run automatically when the cart's buyer identity is updated. */
+    /** 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 run automatically when the cart's buyer identity is updated. */
+    /** 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 run automatically when the cart's discount codes are updated. */
+    /** 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.

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

@@ -429,6 +429,11 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 }),
             status: state.status,
             error: 'error' in state ? state.error : undefined,
+            totalQuantity: 'cart' in state
+                ? state.cart.lines.reduce((previous, current) => {
+                    return previous + current.quantity;
+                }, 0)
+                : 0,
             cartCreate,
             linesAdd(lines) {
                 addLineItem(lines, state);

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

@@ -3,9 +3,9 @@ import { useShop } from '../../foundation';
 import { flattenConnection } from '../../utilities';
 import { CartCreate } from '../../graphql/graphql-constants';
 export function useCartFetch() {
-    const { storeDomain, graphqlApiVersion, storefrontToken } = useShop();
+    const { storeDomain, storefrontApiVersion, storefrontToken } = useShop();
     return React.useCallback(({ query, variables, }) => {
-        return fetch(`https://${storeDomain}/api/${graphqlApiVersion}/graphql.json`, {
+        return fetch(`https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
@@ -23,7 +23,7 @@ export function useCartFetch() {
                 error: error.toString(),
             };
         });
-    }, [storeDomain, graphqlApiVersion, storefrontToken]);
+    }, [storeDomain, storefrontApiVersion, storefrontToken]);
 }
 export function useInstantCheckout() {
     const [cart, updateCart] = useState();

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

@@ -1,14 +1,4 @@
 export { CartProvider } from './CartProvider.client';
 export { useCartFetch, useInstantCheckout } from './hooks';
 export { useCart } from '../../hooks/useCart';
-export { useCartAttributesUpdateCallback } from '../../hooks/useCartAttributesUpdateCallback';
-export { useCartBuyerIdentityUpdateCallback } from '../../hooks/useCartBuyerIdentityUpdateCallback';
-export { useCartNoteUpdateCallback } from '../../hooks/useCartNoteUpdateCallback';
-export { useCartCheckoutUrl } from '../../hooks/useCartCheckoutUrl';
-export { useCartCreateCallback } from '../../hooks/useCartCreateCallback';
-export { useCartDiscountCodesUpdateCallback } from '../../hooks/useCartDiscountCodesUpdateCallback';
-export { useCartLinesAddCallback } from '../../hooks/useCartLinesAddCallback';
-export { useCartLinesRemoveCallback } from '../../hooks/useCartLinesRemoveCallback';
-export { useCartLinesTotalQuantity } from '../../hooks/useCartLinesTotalQuantity';
-export { useCartLinesUpdateCallback } from '../../hooks/useCartLinesUpdateCallback';
 export type { State, Status, Cart, CartWithActions, CartAction } from './types';

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

@@ -1,13 +1,3 @@
 export { CartProvider } from './CartProvider.client';
 export { useCartFetch, useInstantCheckout } from './hooks';
 export { useCart } from '../../hooks/useCart';
-export { useCartAttributesUpdateCallback } from '../../hooks/useCartAttributesUpdateCallback';
-export { useCartBuyerIdentityUpdateCallback } from '../../hooks/useCartBuyerIdentityUpdateCallback';
-export { useCartNoteUpdateCallback } from '../../hooks/useCartNoteUpdateCallback';
-export { useCartCheckoutUrl } from '../../hooks/useCartCheckoutUrl';
-export { useCartCreateCallback } from '../../hooks/useCartCreateCallback';
-export { useCartDiscountCodesUpdateCallback } from '../../hooks/useCartDiscountCodesUpdateCallback';
-export { useCartLinesAddCallback } from '../../hooks/useCartLinesAddCallback';
-export { useCartLinesRemoveCallback } from '../../hooks/useCartLinesRemoveCallback';
-export { useCartLinesTotalQuantity } from '../../hooks/useCartLinesTotalQuantity';
-export { useCartLinesUpdateCallback } from '../../hooks/useCartLinesUpdateCallback';

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

@@ -1,40 +1,70 @@
 import { CartInput, CartLineInput, CartLineUpdateInput, MutationCartNoteUpdateArgs, CartBuyerIdentityInput, MutationCartAttributesUpdateArgs } from '../../graphql/types/types';
 import { CartFragmentFragment } from './graphql/CartFragment';
-export declare type Status = 'uninitialized' | 'fetching' | 'creating' | 'updating' | 'idle';
+export declare type Status = State['status'];
 export interface Cart {
+    /** The cart's ID if it has been created through the Storefront API. */
     id?: string;
+    /** The cart lines. */
     lines: CartFragmentFragment['lines']['edges'][1]['node'][];
+    /** The checkout URL for the cart, if the cart has been created in the Storefront API. */
     checkoutUrl?: string;
+    /** The cart's note. */
     note?: string;
+    /** The cart's buyer identity. */
     buyerIdentity?: CartFragmentFragment['buyerIdentity'];
+    /** The cart's attributes. */
     attributes: CartFragmentFragment['attributes'];
+    /** The discount codes applied to the cart. */
     discountCodes?: CartFragmentFragment['discountCodes'];
+    /** The estimate cost for the cart, including the subtotal, total, taxes, and duties. */
     estimatedCost?: CartFragmentFragment['estimatedCost'];
 }
 export interface CartWithActions extends Cart {
+    /** The status of the cart. This returns 'uninitialized' when the cart is not yet created, `creating` when the cart is being created, `fetching` when an existing cart is being fetched, `updating` when the cart is updating, and `idle` when the cart isn't being created or updated. */
     status: Status;
+    /** If an error occurred on the previous cart action, then `error` will exist and `cart` will be put back into the last valid status it was in. */
     error?: string;
+    /** A callback that creates a cart. Expects the same input you would provide to the Storefront API's `cartCreate` mutation. */
     cartCreate: (cart: CartInput) => void;
+    /** A callback that adds lines to the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesAdd` mutation. If a cart doesn't already exist, then it will create the cart for you. */
     linesAdd: (lines: CartLineInput[]) => void;
+    /** A callback that removes lines from the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesRemove` mutation. Only lines that are included in the `lines` parameter will be in the cart afterwards. */
     linesRemove: (lines: string[]) => void;
+    /** A callback that updates lines in the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesUpdate` mutation. If a line item is not included in the `lines` parameter, it will still exist in the cart and will not be changed. */
     linesUpdate: (lines: CartLineUpdateInput[]) => void;
+    /** A callback that updates the note in the cart. Expects the same `note` input that you would provide to the Storefront API's `cartNoteUpdate` mutation. */
     noteUpdate: (note: MutationCartNoteUpdateArgs['note']) => void;
+    /** A callback that updates the buyer identity in the cart. Expects the same `buyerIdentity` input that you would provide to the Storefront API's `cartBuyerIdentityUpdate` mutation. */
     buyerIdentityUpdate: (buyerIdenity: CartBuyerIdentityInput) => void;
+    /** A callback that updates the cart attributes. Expects the same `attributes` input that you would provide to the Storefront API's `cartAttributesUpdate` mutation. */
     cartAttributesUpdate: (attributes: MutationCartAttributesUpdateArgs['attributes']) => void;
+    /** A callback that updates the cart's discount codes. Expects the same `codes` input that you would provide to the Storefront API's `cartDiscountCodesUpdate` mutation. */
     discountCodesUpdate: (discountCodes: string[]) => void;
+    /** The total number of items in the cart, across all lines. If there are no lines, then the value is 0. */
+    totalQuantity: number;
 }
-export declare type State = {
+export declare type State = 
+/** A cart has not been created yet, or an error occurred when a cart was attempting to be created or fetched. */
+{
     status: 'uninitialized';
     error?: string;
-} | {
+}
+/** An existing cart is being fetched from the Storefront API. */
+ | {
     status: 'fetching';
-} | {
+}
+/** A new cart is being created through the Storefront API. */
+ | {
     status: 'creating';
-} | {
+}
+/** The cart is in the process of being updated. */
+ | {
     status: 'updating';
     cart: Cart;
     lastValidCart: Cart;
-} | {
+}
+/** The cart has been created and no action is currently happening. */
+ | {
     status: 'idle';
     cart: Cart;
     error?: string;

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

@@ -9,8 +9,11 @@ export function CartShopPayButton({
 /** A string of classes to apply to the `div` that wraps the `shop-pay-button` web component. */
 className, }) {
     const { lines } = useCart();
-    const ids = useMemo(() => {
-        return lines.map((line) => line.merchandise.id);
+    const idsAndQuantities = useMemo(() => {
+        return lines.map((line) => ({
+            id: line.merchandise.id,
+            quantity: line.quantity,
+        }));
     }, [lines]);
-    return React.createElement(ShopPayButton, { className: className, variantIds: ids });
+    return (React.createElement(ShopPayButton, { className: className, variantIdsAndQuantities: idsAndQuantities }));
 }

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

@@ -1 +1,18 @@
-export declare function Link(props: any): JSX.Element;
+import React from 'react';
+export interface LinkProps
+/** All properties available to an `<a>` element are available. See [anchor element documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes).*/
+ extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    /** The destination URL that the link points to. This is the `href` attribute of the underlying `<a>` element. */
+    to: string;
+    /** Whether to update the state object or URL of the current history entry. Refer to the [history.replaceState documentation](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState). */
+    replace?: boolean;
+    /** The custom client state with the navigation. */
+    clientState?: any;
+    /** Whether to reload the whole document on navigation. */
+    reloadDocument?: boolean;
+}
+/**
+ * The `Link` component lets users navigate from one page to another.
+ * It renders an accessible `<a>` element.
+ */
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

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

@@ -1,5 +1,43 @@
-import React from 'react';
-import { Link as RRLink } from 'react-router-dom';
-export function Link(props) {
-    return import.meta.env.SSR ? (React.createElement("a", { href: props.to, ...props, to: null })) : (React.createElement(RRLink, { ...props }));
+import React, { useCallback } from 'react';
+import { useRouter } from '../Router';
+import { createPath } from 'history';
+import { useNavigate } from '../../hooks/useNavigate';
+/**
+ * The `Link` component lets users navigate from one page to another.
+ * It renders an accessible `<a>` element.
+ */
+export const Link = React.forwardRef(function Link(props, ref) {
+    const navigate = useNavigate();
+    const { location } = useRouter();
+    const { reloadDocument, target, replace: _replace, to, onClick, clientState, } = props;
+    const internalClick = useCallback((e) => {
+        if (onClick)
+            onClick(e);
+        if (!reloadDocument && // do regular browser stuff
+            e.button === 0 && // Ignore everything but left clicks
+            (!target || target === '_self') && // Let browser handle "target=_blank"
+            !isModifiedEvent(e) // Ignore modifier key clicks
+        ) {
+            e.preventDefault();
+            // If the URL hasn't changed, the regular <a> will do a replace
+            const replace = !!_replace || createPath(location) === createPath({ pathname: to });
+            navigate(props.to, {
+                replace,
+                clientState,
+            });
+        }
+    }, [reloadDocument, target, _replace, to, clientState, onClick, location]);
+    return (React.createElement("a", { ...without(props, ['to', 'replace', 'clientState', 'reloadDocument']), ref: ref, onClick: internalClick, href: props.to }, props.children));
+});
+function isModifiedEvent(event) {
+    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
+function without(obj, props) {
+    const newObj = {};
+    for (const key of Object.keys(obj)) {
+        if (!props.includes(key)) {
+            newObj[key] = obj[key];
+        }
+    }
+    return newObj;
 }

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.d.ts

@@ -6,7 +6,7 @@ import { ReactNode } from 'react';
  *
  * Any descendents of this provider can use the `useCountry` and `useAvailableCountries` hooks.
  * The `isoCode` of the `country` can be used in the Storefront API's
- * [`@inContext`](/api/storefront/reference/directives/incontext) directive as the `country` value.
+ * `@inContext` directive as the `country` value.
  */
 export declare function LocalizationProvider({ children }: {
     children: ReactNode;

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.js

@@ -9,7 +9,7 @@ import { Localization } from '../../graphql/graphql-constants';
  *
  * Any descendents of this provider can use the `useCountry` and `useAvailableCountries` hooks.
  * The `isoCode` of the `country` can be used in the Storefront API's
- * [`@inContext`](/api/storefront/reference/directives/incontext) directive as the `country` value.
+ * `@inContext` directive as the `country` value.
  */
 export function LocalizationProvider({ children }) {
     const { data: { localization }, } = useShopQuery({

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

@@ -1,23 +1,23 @@
 import { MediaImageProps } from '../Image';
 import { VideoProps } from '../Video';
 import { ExternalVideoProps } from '../ExternalVideo';
-import { Model3DProps } from '../Model3D';
+import { ModelViewerProps } from '../ModelViewer';
 import { Media as MediaType } from '../../graphql/types/types';
 export declare type Media = Pick<MediaType, 'mediaContentType'>;
 declare type MediaImageMedia = Media & MediaImageProps;
-declare type Model3DMedia = Media & Model3DProps['model'];
+declare type ModelViewerMedia = Media & ModelViewerProps['model'];
 declare type ExternalVideoMedia = Media & ExternalVideoProps['video'];
 declare type VideoMedia = Media & VideoProps['video'];
 export interface MediaFileProps {
     /** A [Media object](/api/storefront/reference/products/media). */
-    media: MediaImageMedia | Model3DMedia | ExternalVideoMedia | VideoMedia;
-    /** The options for the `Image`, `Video`, `ExternalVideo`, or `Model3D` components. */
+    media: MediaImageMedia | ModelViewerMedia | ExternalVideoMedia | VideoMedia;
+    /** The options for the `Image`, `Video`, `ExternalVideo`, or `ModelViewer` components. */
     options?: VideoProps['options'] | ExternalVideoProps['options'];
 }
 /**
  * The `MediaFile` component renders the media for the Storefront API's
  * [Media object](/api/storefront/reference/products/media). It renders an `Image`, a
- * `Video`, an `ExternalVideo`, or a `Model3D` depending on the `mediaContentType` of the
+ * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `mediaContentType` of the
  * `media` provided as a prop.
  */
 export declare function MediaFile({ media, options, ...passthroughProps }: MediaFileProps): JSX.Element | null;

package/dist/esnext/components/MediaFile/MediaFile.js

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { Image } from '../Image';
 import { Video } from '../Video';
 import { ExternalVideo } from '../ExternalVideo';
-import { Model3D } from '../Model3D';
+import { ModelViewer } from '../ModelViewer';
 import { MediaFileFragment as Fragment } from '../../graphql/graphql-constants';
 /**
  * The `MediaFile` component renders the media for the Storefront API's
  * [Media object](/api/storefront/reference/products/media). It renders an `Image`, a
- * `Video`, an `ExternalVideo`, or a `Model3D` depending on the `mediaContentType` of the
+ * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `mediaContentType` of the
  * `media` provided as a prop.
  */
 export function MediaFile({ media, options, ...passthroughProps }) {
@@ -20,7 +20,7 @@ export function MediaFile({ media, options, ...passthroughProps }) {
         case 'EXTERNAL_VIDEO':
             return (React.createElement(ExternalVideo, { ...passthroughProps, video: media, options: options }));
         case 'MODEL_3D':
-            return React.createElement(Model3D, { ...passthroughProps, model: media });
+            return (React.createElement(ModelViewer, { ...passthroughProps, model: media }));
         default:
             return null;
     }

package/dist/esnext/components/MediaFile/MediaFileFragment.d.ts

@@ -2,7 +2,7 @@ import * as Types from '../../graphql/types/types';
 import { ImageFragmentFragment } from '../Image/ImageFragment';
 import { VideoFragmentFragment } from '../Video/VideoFragment';
 import { ExternalVideoFragmentFragment } from '../ExternalVideo/ExternalVideoFragment';
-import { Model3DFragmentFragment } from '../Model3D/Model3DFragment';
+import { Model3DFragmentFragment } from '../ModelViewer/Model3DFragment';
 export declare type MediaFileFragment_ExternalVideo_Fragment = {
     __typename?: 'ExternalVideo';
 } & Pick<Types.ExternalVideo, 'mediaContentType'> & ExternalVideoFragmentFragment;

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

@@ -1,21 +1,17 @@
-import { ElementType, ReactElement } from 'react';
+import { ElementType } from 'react';
 import { Props } from '../types';
 import { ParsedMetafield } from '../../types';
 export interface MetafieldProps {
     /** A [Metafield object](/api/storefront/reference/common-objects/metafield) from the Storefront API. */
     metafield: ParsedMetafield;
-    /** A render function that takes a `Metafield` object as an argument. Refer to [Render props](#render-props). */
-    children?: (value: ParsedMetafield) => ReactElement;
+    /** An HTML tag to be rendered as the base element wrapper. The default value varies depending on [metafield.type](/apps/metafields/types). */
+    as?: ElementType;
 }
 /**
  * The `Metafield` component renders the value of a Storefront
  * API's [Metafield object](/api/storefront/reference/common-objects/metafield).
  *
- * When a render function is provided, it passes the Metafield object with a value
- * that was parsed according to the Metafield's `type` field. For more information,
- * refer to the [Render props](#render-props) section.
-
- * When no render function is provided, it renders a smart default of the
+ * Renders a smart default of the
  * Metafield's `value`. For more information, refer to the [Default Output](#default-output) section.
  */
 export declare function Metafield<TTag extends ElementType>(props: Props<TTag> & MetafieldProps): JSX.Element | null;