@shopify/hydrogen 0.17.3 → 0.20.0

package/dist/esnext/components/CartProvider/{hooks.js → hooks.client.js}

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useShop } from '../../foundation';
 import { flattenConnection } from '../../utilities';
 import { CartCreate } from './cart-queries';
+import { useCart } from '../../hooks/useCart';
 export function useCartFetch() {
     const { storeDomain, storefrontApiVersion, storefrontToken } = useShop();
     return React.useCallback(({ query, variables, }) => {
@@ -28,6 +29,7 @@ export function useCartFetch() {
     }, [storeDomain, storefrontApiVersion, storefrontToken]);
 }
 export function useInstantCheckout() {
+    const { cartFragment } = useCart();
     const [cart, updateCart] = useState();
     const [checkoutUrl, updateCheckoutUrl] = useState();
     const [error, updateError] = useState();
@@ -35,7 +37,7 @@ export function useInstantCheckout() {
     const createInstantCheckout = React.useCallback(async (cartInput) => {
         var _a, _b;
         const { data, error } = await fetch({
-            query: CartCreate,
+            query: CartCreate(cartFragment),
             variables: {
                 input: cartInput,
             },
@@ -55,6 +57,6 @@ export function useInstantCheckout() {
             });
             updateCheckoutUrl(dataCart.checkoutUrl);
         }
-    }, [fetch]);
+    }, [cartFragment, fetch]);
     return { cart, checkoutUrl, error, createInstantCheckout };
 }

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

@@ -1,4 +1,4 @@
 export { CartProvider } from './CartProvider.client';
-export { useCartFetch, useInstantCheckout } from './hooks';
+export { useCartFetch, useInstantCheckout } from './hooks.client';
 export { useCart } from '../../hooks/useCart';
 export type { State, Status, Cart, CartWithActions, CartAction } from './types';

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

@@ -1,3 +1,3 @@
 export { CartProvider } from './CartProvider.client';
-export { useCartFetch, useInstantCheckout } from './hooks';
+export { useCartFetch, useInstantCheckout } from './hooks.client';
 export { useCart } from '../../hooks/useCart';

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

@@ -42,6 +42,8 @@ export interface CartWithActions extends Cart {
     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;
+    /** The fragment used to query the cart object for all queries and mutations. */
+    cartFragment: string;
 }
 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. */

package/dist/esnext/components/{DevTools.js → DevTools.client.js}

@@ -19,9 +19,9 @@ export default function DevTools() {
     const entry = perfData[0];
     let activePanelContent = null;
     switch (activePanel) {
-        case 'warnings':
+        case 'warnings': {
             const warningsMarkup = warnings
-                ? warnings.map((war, i) => React.createElement("li", { key: war + i }, war))
+                ? warnings.map((war, i) => React.createElement("li", { key: war + i }, war)) // eslint-disable-line react/no-array-index-key
                 : null;
             activePanelContent = (React.createElement(React.Fragment, null,
                 React.createElement(PanelHeading, null, "Overfetched graphQL fields"),
@@ -31,6 +31,7 @@ export default function DevTools() {
                         fontSize: '0.9em',
                     } }, warningsMarkup)));
             break;
+        }
         case 'network':
             activePanelContent = (React.createElement(React.Fragment, null,
                 React.createElement(PanelHeading, null, "Metrics"),

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

@@ -1,40 +1,84 @@
-import React from 'react';
-import { ImageSizeOptions, ImageLoaderOptions } from '../../utilities';
+import * as React from 'react';
 import type { Image as ImageType } from '../../storefront-api-types';
-import type { PartialDeep, Merge, MergeExclusive } from 'type-fest';
-export interface BaseImageProps {
-    /** A custom function that generates the image URL. Parameters passed into this function includes
-     * `src` and an `options` object that contains the provided `width`, `height` and `loaderOptions` values.
-     */
-    loader?(props: ImageLoaderOptions): string;
-    /** An object of `loader` function options. For example, if the `loader` function requires a `scale` option,
-     * then the value can be a property of the `loaderOptions` object (for example, `{scale: 2}`).
-     */
-    loaderOptions?: ImageLoaderOptions['options'];
-}
-interface MediaImagePropsBase extends BaseImageProps {
+import type { PartialDeep, Simplify, SetRequired } from 'type-fest';
+declare type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+declare type ImageProps<GenericLoaderOpts> = Simplify<ShopifyImageProps | ExternalImageProps<GenericLoaderOpts>>;
+export declare function Image<GenericLoaderOpts>(props: ImageProps<GenericLoaderOpts>): JSX.Element;
+export declare type ShopifyLoaderOptions = {
+    crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+    scale?: 2 | 3;
+    width?: HtmlImageProps['width'] | ImageType['width'];
+    height?: HtmlImageProps['height'] | ImageType['height'];
+};
+export declare type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & {
+    src: ImageType['url'];
+}>;
+export declare type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {
     /** An object with fields that correspond to the Storefront API's
      * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
+     * The `data` prop is required if `src` isn't used, but both props shouldn't be used
+     * at the same time. If both `src` and `data` are passed, then `data` takes priority.
      */
     data: PartialDeep<ImageType>;
-    /** An object of image size options for Shopify CDN images. */
-    options?: ImageSizeOptions;
-}
-interface ExternalImagePropsBase extends BaseImageProps {
-    /** A URL string. This string can be an absolute path or a relative path depending on the `loader`. */
-    src: string;
-    /** The integer value for the width of the image. This is a required prop when `src` is present. */
-    width: number;
-    /** The integer value for the height of the image. This is a required prop when `src` is present. */
-    height: number;
-}
-declare type BaseElementProps = React.ImgHTMLAttributes<HTMLImageElement>;
-declare type MediaImageProps = Merge<BaseElementProps, MediaImagePropsBase>;
-declare type ExternalImageProps = Merge<BaseElementProps, ExternalImagePropsBase>;
-declare type ImageProps = MergeExclusive<MediaImageProps, ExternalImageProps>;
-/**
- * The `Image` component renders an image for the Storefront API's
- * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
- */
-export declare function Image(props: ImageProps): JSX.Element;
+    /** A custom function that generates the image URL. Parameters passed in
+     * are either `ShopifyLoaderParams` if using the `data` prop, or the
+     * `LoaderOptions` object that you pass to `loaderOptions`.
+     */
+    loader?: (params: ShopifyLoaderParams) => string;
+    /** An object of `loader` function options. For example, if the `loader` function
+     * requires a `scale` option, then the value can be a property of the
+     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
+     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
+     * prop is used, the data shape is whatever you define it to be, and this shape
+     * will be passed to `loader`.
+     */
+    loaderOptions?: ShopifyLoaderOptions;
+    /**
+     * 'src' shouldn't be passed when 'data' is used.
+     */
+    src?: never;
+};
+declare type LoaderProps<GenericLoaderOpts> = {
+    /** A URL string. This string can be an absolute path or a relative path depending
+     * on the `loader`. The `src` prop is required if `data` isn't used, but both
+     * props shouldn't be used at the same time. If both `src` and `data` are passed,
+     * then `data` takes priority.
+     */
+    src: HtmlImageProps['src'];
+    /** The integer or string value for the width of the image. This is a required prop
+     * when `src` is present.
+     */
+    width: HtmlImageProps['width'];
+    /** The integer or string value for the height of the image. This is a required prop
+     * when `src` is present.
+     */
+    height: HtmlImageProps['height'];
+    /** An object of `loader` function options. For example, if the `loader` function
+     * requires a `scale` option, then the value can be a property of the
+     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
+     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
+     * prop is used, the data shape is whatever you define it to be, and this shape
+     * will be passed to `loader`.
+     */
+    loaderOptions?: GenericLoaderOpts;
+};
+declare type ExternalImageProps<GenericLoaderOpts> = SetRequired<HtmlImageProps, 'src' | 'width' | 'height'> & {
+    /** A custom function that generates the image URL. Parameters passed in
+     * are either `ShopifyLoaderParams` if using the `data` prop, or the
+     * `LoaderOptions` object that you pass to `loaderOptions`.
+     */
+    loader?: (params: LoaderProps<GenericLoaderOpts>) => string;
+    /** An object of `loader` function options. For example, if the `loader` function
+     * requires a `scale` option, then the value can be a property of the
+     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
+     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
+     * prop is used, the data shape is whatever you define it to be, and this shape
+     * will be passed to `loader`.
+     */
+    loaderOptions?: GenericLoaderOpts;
+    /**
+     * 'data' shouldn't be passed when 'src' is used.
+     */
+    data?: never;
+};
 export {};

package/dist/esnext/components/Image/Image.js

@@ -1,54 +1,59 @@
-import React from 'react';
-import { shopifyImageLoader, getShopifyImageDimensions, } from '../../utilities';
-/**
- * The `Image` component renders an image for the Storefront API's
- * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
- */
+import * as React from 'react';
+import { getShopifyImageDimensions, shopifyImageLoader } from '../../utilities';
 export function Image(props) {
-    var _a, _b, _c, _d;
-    const { data, options, src, id, alt, width, height, loader, loaderOptions, ...passthroughProps } = props;
-    if (!data && !src) {
-        throw new Error('Image component: requires either an `data` or `src` prop.');
-    }
-    if (!data && src && (!width || !height)) {
-        throw new Error(`Image component: when 'src' is provided, 'width' and 'height' are required and needs to be valid values (i.e. greater than zero). Provided values: 'src': ${src}, 'width': ${width}, 'height': ${height}`);
-    }
-    const imgProps = data
-        ? convertShopifyImageData({
-            data,
-            options,
-            loader,
-            loaderOptions,
-            id,
-            alt,
-        })
-        : {
-            src,
-            id,
-            alt,
-            width,
-            height,
-            loader,
-            loaderOptions: { width, height, ...loaderOptions },
-        };
-    const srcPath = imgProps.loader
-        ? imgProps.loader({ src: imgProps.src, options: imgProps.loaderOptions })
-        : imgProps.src;
-    return (React.createElement("img", { id: (_a = imgProps.id) !== null && _a !== void 0 ? _a : '', loading: "lazy", alt: (_b = imgProps.alt) !== null && _b !== void 0 ? _b : '', ...passthroughProps, src: srcPath, width: (_c = imgProps.width) !== null && _c !== void 0 ? _c : undefined, height: (_d = imgProps.height) !== null && _d !== void 0 ? _d : undefined }));
+    if (!props.data && !props.src) {
+        throw new Error(`<Image/>: requires either a 'data' or 'src' prop.`);
+    }
+    if (props.data && props.src) {
+        console.warn(`<Image/>: using both 'data' and 'src' props is not supported; using the 'data' prop by default`);
+    }
+    if (props.data) {
+        return React.createElement(ShopifyImage, { ...props });
+    }
+    else {
+        return React.createElement(ExternalImage, { ...props });
+    }
+}
+function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoader, loaderOptions, ...rest }) {
+    var _a, _b, _c;
+    if (!data.url) {
+        throw new Error(`<Image/>: the 'data' prop requires the 'url' property`);
+    }
+    if (!data.altText && !rest.alt) {
+        console.warn(`<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. ${data.id ? `Image ID: ${data.id}` : ''}`);
+    }
+    const { width: finalWidth, height: finalHeight } = getShopifyImageDimensions(data, loaderOptions);
+    if (!finalWidth || !finalHeight) {
+        console.warn(`<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties`);
+    }
+    let finalSrc = data.url;
+    if (loader) {
+        finalSrc = loader({
+            ...loaderOptions,
+            src: data.url,
+            width: finalWidth,
+            height: finalHeight,
+        });
+    }
+    /* eslint-disable hydrogen/prefer-image-component */
+    return (React.createElement("img", { id: (_a = data.id) !== null && _a !== void 0 ? _a : '', alt: (_c = (_b = data.altText) !== null && _b !== void 0 ? _b : rest.alt) !== null && _c !== void 0 ? _c : '', loading: loading !== null && loading !== void 0 ? loading : 'lazy', ...rest, src: finalSrc, width: finalWidth !== null && finalWidth !== void 0 ? finalWidth : undefined, height: finalHeight !== null && finalHeight !== void 0 ? finalHeight : undefined }));
+    /* eslint-enable hydrogen/prefer-image-component */
 }
-function convertShopifyImageData({ data, options, loader, loaderOptions, id: propId, alt, }) {
-    const { url: src, altText, id } = data;
-    if (!src) {
-        throw new Error(`<Image/> requires 'data.url' when using the 'data' prop`);
-    }
-    const { width, height } = getShopifyImageDimensions(data, options);
-    return {
-        src,
-        id: propId ? propId : id,
-        alt: alt ? alt : altText,
-        width,
-        height,
-        loader: loader ? loader : shopifyImageLoader,
-        loaderOptions: { ...options, ...loaderOptions },
-    };
+function ExternalImage({ src, width, height, alt, loader, loaderOptions, loading, ...rest }) {
+    if (!width || !height) {
+        throw new Error(`<Image/>: when 'src' is provided, 'width' and 'height' are required and need to be valid values (i.e. greater than zero). Provided values: 'src': ${src}, 'width': ${width}, 'height': ${height}`);
+    }
+    if (!alt) {
+        console.warn(`<Image/>: when 'src' is provided, 'alt' should also be provided`);
+    }
+    let finalSrc = src;
+    if (loader) {
+        finalSrc = loader({ src, width, height, ...loaderOptions });
+        if (typeof finalSrc !== 'string' || !finalSrc) {
+            throw new Error(`<Image/>: 'loader' did not return a valid string`);
+        }
+    }
+    /* eslint-disable hydrogen/prefer-image-component */
+    return (React.createElement("img", { ...rest, src: finalSrc, width: width, height: height, alt: alt !== null && alt !== void 0 ? alt : '', loading: loading !== null && loading !== void 0 ? loading : 'lazy' }));
+    /* eslint-enable hydrogen/prefer-image-component */
 }

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

@@ -1 +1,2 @@
 export { Image } from './Image';
+export type { ShopifyLoaderParams, ShopifyLoaderOptions, ShopifyImageProps, } from './Image';

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

@@ -30,12 +30,21 @@ export const Link = React.forwardRef(function Link(props, ref) {
             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, {
+            navigate(to, {
                 replace,
                 clientState,
             });
         }
-    }, [reloadDocument, target, _replace, to, clientState, onClick, location]);
+    }, [
+        reloadDocument,
+        target,
+        _replace,
+        to,
+        clientState,
+        onClick,
+        location,
+        navigate,
+    ]);
     const signalPrefetchIntent = () => {
         /**
          * startTransition to yield to more important updates

package/dist/esnext/components/LocalizationProvider/LocalizationClientProvider.client.js

@@ -1,18 +1,5 @@
-import React, { useMemo, useState, useCallback } from 'react';
+import React from 'react';
 import { LocalizationContext } from './LocalizationContext.client';
-import { useServerProps } from '../../foundation/useServerProps';
 export default function LocalizationClientProvider({ localization, children, }) {
-    const { setServerProps } = useServerProps();
-    const [country, setCountry] = useState(localization.country);
-    const setter = useCallback((country) => {
-        setCountry(country);
-        setServerProps('country', country);
-    }, [setServerProps]);
-    const contextValue = useMemo(() => {
-        return {
-            country,
-            setCountry: setter,
-        };
-    }, [country, setter]);
-    return (React.createElement(LocalizationContext.Provider, { value: contextValue }, children));
+    return (React.createElement(LocalizationContext.Provider, { value: localization }, children));
 }

package/dist/esnext/components/LocalizationProvider/LocalizationContext.client.d.ts

@@ -2,6 +2,5 @@ import type { LocalizationQuery } from './LocalizationProvider.server';
 export declare type Localization = LocalizationQuery['localization'];
 export interface LocalizationContextValue {
     country?: Localization['country'];
-    setCountry(country: Localization['country']): void;
 }
 export declare const LocalizationContext: import("react").Context<LocalizationContextValue | null>;

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { PreloadOptions } from '../../types';
-import { Country, Currency } from '../../storefront-api-types';
+import { Country } from '../../storefront-api-types';
 export interface LocalizationProviderProps {
     /** A `ReactNode` element. */
     children: ReactNode;
@@ -28,10 +28,6 @@ export declare type LocalizationQuery = {
     } & {
         country: {
             __typename?: 'Country';
-        } & Pick<Country, 'isoCode' | 'name'> & {
-            currency: {
-                __typename?: 'Currency';
-            } & Pick<Currency, 'isoCode'>;
-        };
+        } & Pick<Country, 'isoCode' | 'name'>;
     };
 };

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

@@ -3,6 +3,7 @@ import LocalizationClientProvider from './LocalizationClientProvider.client';
 import { useShop } from '../../foundation/useShop';
 import { useShopQuery } from '../../hooks/useShopQuery';
 import { CacheDays } from '../../framework/CachingStrategy';
+import { useSession } from '../../foundation/useSession/useSession';
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's
  * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field
@@ -14,13 +15,21 @@ import { CacheDays } from '../../framework/CachingStrategy';
  */
 export function LocalizationProvider(props) {
     const { languageCode } = useShop();
+    const { countryCode, countryName } = useSession();
     const { data: { localization }, } = useShopQuery({
-        query: query,
+        query,
         variables: { language: languageCode },
         cache: CacheDays(),
         preload: props.preload,
     });
-    return (React.createElement(LocalizationClientProvider, { localization: localization }, props.children));
+    return (React.createElement(LocalizationClientProvider, { localization: countryCode
+            ? {
+                country: {
+                    name: countryName,
+                    isoCode: countryCode,
+                },
+            }
+            : localization }, props.children));
 }
 const query = `
 query Localization($language: LanguageCode)
@@ -29,9 +38,6 @@ query Localization($language: LanguageCode)
     country {
       isoCode
       name
-      currency {
-        isoCode
-      }
     }
   }
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image } from '../Image';
+import { type ShopifyImageProps } from '../Image';
 import { Video } from '../Video';
 import { ExternalVideo } from '../ExternalVideo';
 import type { MediaEdge as MediaEdgeType } from '../../storefront-api-types';
@@ -8,7 +8,7 @@ export interface MediaFileProps {
     /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */
     data: PartialDeep<MediaEdgeType['node']>;
     /** The options for the `Image`, `Video`, or `ExternalVideo` components. */
-    options?: React.ComponentProps<typeof Image>['options'] | React.ComponentProps<typeof Video>['options'] | React.ComponentProps<typeof ExternalVideo>['options'];
+    options?: ShopifyImageProps | React.ComponentProps<typeof Video>['previewImageOptions'] | React.ComponentProps<typeof ExternalVideo>['options'];
 }
 /**
  * The `MediaFile` component renders the media for the Storefront API's

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

@@ -17,10 +17,10 @@ export function MediaFile({ data, options, ...passthroughProps }) {
                 console.warn(`No "image" property was found on the "data" prop for <MediaFile/>, for the "type='image'"`);
                 return null;
             }
-            return (React.createElement(Image, { ...passthroughProps, data: dataImage, options: options }));
+            return (React.createElement(Image, { ...passthroughProps, data: dataImage, loaderOptions: options }));
         }
         case 'VIDEO':
-            return (React.createElement(Video, { ...passthroughProps, data: data, options: options }));
+            return (React.createElement(Video, { ...passthroughProps, data: data, previewImageOptions: options }));
         case 'EXTERNAL_VIDEO':
             return (React.createElement(ExternalVideo, { ...passthroughProps, data: data, options: options }));
         case 'MODEL_3D':

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

@@ -52,18 +52,17 @@ export function Metafield(props) {
         }
         case 'url':
             return (React.createElement("a", { href: data.value, ...passthroughProps }, data.value));
-        case 'json':
+        case 'json': {
             const Wrapper = as !== null && as !== void 0 ? as : 'span';
             return (React.createElement(Wrapper, { ...passthroughProps }, JSON.stringify(data.value)));
+        }
         case 'file_reference': {
             if (((_a = data.reference) === null || _a === void 0 ? void 0 : _a.__typename) === 'MediaImage') {
                 const ref = data.reference;
                 return ref.image ? (React.createElement(Image, { data: ref.image, ...passthroughProps })) : null;
             }
         }
-        default: {
-            const Wrapper = as !== null && as !== void 0 ? as : 'span';
-            return React.createElement(Wrapper, { ...passthroughProps }, data.value.toString());
-        }
     }
+    const Wrapper = as !== null && as !== void 0 ? as : 'span';
+    return React.createElement(Wrapper, { ...passthroughProps }, data.value.toString());
 }

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, } from 'react';
-import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript';
+import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript.client';
 /**
  * The `ModelViewer` component renders a 3D model (with the `model-viewer` tag) for
  * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).

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

@@ -5,11 +5,15 @@ interface MoneyProps<TTag> {
     as?: TTag;
     /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */
     data: PartialDeep<MoneyV2>;
+    /** Whether to remove the currency symbol from the output. */
+    withoutCurrency?: boolean;
+    /** Whether to remove trailing zeros (fractional money) from the output. */
+    withoutTrailingZeros?: boolean;
 }
 /**
  * The `Money` component renders a string of the Storefront API's
  * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
- * `defaultLocale` in the `shopify.config.js` file.
+ * `defaultLocale` in [the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
  */
 export declare function Money<TTag extends keyof JSX.IntrinsicElements = 'div'>(props: JSX.IntrinsicElements[TTag] & MoneyProps<TTag>): JSX.Element;
 export {};

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

@@ -3,11 +3,24 @@ import { useMoney } from '../../hooks';
 /**
  * The `Money` component renders a string of the Storefront API's
  * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
- * `defaultLocale` in the `shopify.config.js` file.
+ * `defaultLocale` in [the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
  */
 export function Money(props) {
-    const { data, as, ...passthroughProps } = props;
+    const { data, as, withoutCurrency, withoutTrailingZeros, ...passthroughProps } = props;
     const moneyObject = useMoney(data);
     const Wrapper = as !== null && as !== void 0 ? as : 'div';
-    return React.createElement(Wrapper, { ...passthroughProps }, moneyObject.localizedString);
+    let output = moneyObject.localizedString;
+    if (withoutCurrency || withoutTrailingZeros) {
+        if (withoutCurrency && !withoutTrailingZeros) {
+            output = moneyObject.amount;
+        }
+        else if (!withoutCurrency && withoutTrailingZeros) {
+            output = moneyObject.withoutTrailingZeros;
+        }
+        else {
+            // both
+            output = moneyObject.withoutTrailingZerosAndCurrency;
+        }
+    }
+    return React.createElement(Wrapper, { ...passthroughProps }, output);
 }

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

@@ -26,7 +26,7 @@ export function ProductMetafield(props) {
         const message = 'does not have a value for metafield.';
         const productOrVariant = variantId ? `Variant` : 'Product';
         const logItems = {
-            variantId: variantId,
+            variantId,
             ProductId: product.id,
             namespace,
             keyName,

package/dist/esnext/components/ProductProvider/ProductOptionsProvider.client.js

@@ -6,7 +6,7 @@ export function ProductOptionsProvider({ children, initialVariantId, }) {
     const product = useProduct();
     const productOptions = useProductOptions({
         variants: product.variantsConnection,
-        initialVariantId: initialVariantId,
+        initialVariantId,
     });
     return (React.createElement(ProductOptionsContext.Provider, { value: productOptions }, children));
 }

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

@@ -7,9 +7,13 @@ export interface ProductProviderProps {
     children: ReactNode;
     /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */
     data: PartialDeep<ProductType>;
-    /** The initially selected variant. If this is missing, then `selectedVariantId`
-     * in the returned `object` from the `useProduct` hook uses the first available variant
-     * or the first variant (if none are available).
+    /** The initially selected variant.
+     * The following logic applies to `initialVariantId`:
+     * If `initialVariantId` is provided, then it's used, even if it's out of stock.
+     * If `initialVariantId` is provided, but is `null`, then no variant is used.
+     * If nothing is passed to `initialVariantId`, and you're in a `ProductProvider`, then `selectedVariant.id` is used.
+     * If nothing is passed to `initialVariantId` and you're not in a `ProductProvider`, then the first available or in-stock variant is used.
+     * If nothing is passed to `initialVariantId`, you're not in a `ProductProvider`, and no variants are in stock, then the first variant is used.
      */
     initialVariantId?: Parameters<typeof useProductOptions>['0']['initialVariantId'];
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useShop } from '../../foundation/useShop';
-import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript';
+import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript.client';
 const URL = 'https://cdn.shopify.com/shopifycloud/shop-js/v0.8/client.js';
 /**
  * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
@@ -34,7 +34,11 @@ export function ShopPayButton({ variantIds, className, variantIdsAndQuantities,
     else {
         throw new Error(MissingPropsErrorMessage);
     }
-    return (React.createElement("div", { className: className, tabIndex: 1 }, shopPayLoadedStatus === 'done' && (React.createElement("shop-pay-button", { "store-url": `https://${storeDomain}`, variants: ids.join(',') }))));
+    return (
+    /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+    React.createElement("div", { className: className, tabIndex: 0 }, shopPayLoadedStatus === 'done' && (React.createElement("shop-pay-button", { "store-url": `https://${storeDomain}`, variants: ids.join(',') })))
+    /* eslint-enable jsx-a11y/no-noninteractive-tabindex */
+    );
 }
 /**
  * Takes a string in the format of "gid://shopify/ProductVariant/41007289630776" and returns a string of the ID part at the end: "41007289630776"

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

@@ -1,11 +1,11 @@
-import { ImageSizeOptions } from '../../utilities';
+import { shopifyImageLoader } from '../../utilities';
 import type { Video as VideoType } from '../../storefront-api-types';
 import type { PartialDeep } from 'type-fest';
 interface VideoProps {
     /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/latest/objects/video). */
     data: PartialDeep<VideoType>;
-    /** An object of image size options for the video's `previewImage`. */
-    options?: ImageSizeOptions;
+    /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */
+    previewImageOptions?: Parameters<typeof shopifyImageLoader>[0];
 }
 /**
  * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).