@shopify/hydrogen 0.21.0 → 0.23.0

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { getShopifyImageDimensions, shopifyImageLoader } from '../../utilities';
+import { getShopifyImageDimensions, shopifyImageLoader, addImageSizeParametersToUrl, } from '../../utilities';
 export function Image(props) {
     if (!props.data && !props.src) {
         throw new Error(`<Image/>: requires either a 'data' or 'src' prop.`);
     }
-    if (props.data && props.src) {
+    if (__HYDROGEN_DEV__ && 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) {
@@ -14,17 +14,17 @@ export function Image(props) {
         return React.createElement(ExternalImage, { ...props });
     }
 }
-function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoader, loaderOptions, ...rest }) {
-    var _a, _b, _c;
+function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoader, loaderOptions, widths, ...rest }) {
+    var _a, _b, _c, _d, _e, _f, _g;
     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}` : ''}`);
+    if (__HYDROGEN_DEV__ && !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. ${`Image: ${(_a = data.id) !== null && _a !== void 0 ? _a : data.url}`}`);
     }
     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`);
+    if ((__HYDROGEN_DEV__ && !finalWidth) || !finalHeight) {
+        console.warn(`<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. ${`Image: ${(_b = data.id) !== null && _b !== void 0 ? _b : data.url}`}`);
     }
     let finalSrc = data.url;
     if (loader) {
@@ -34,18 +34,36 @@ function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoade
             width: finalWidth,
             height: finalHeight,
         });
+        if (typeof finalSrc !== 'string' || !finalSrc) {
+            throw new Error(`<Image/>: 'loader' did not return a valid string. ${`Image: ${(_c = data.id) !== null && _c !== void 0 ? _c : data.url}`}`);
+        }
     }
+    // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width
+    // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original
+    const maxWidth = width && finalWidth && width < finalWidth ? width : finalWidth;
+    const finalSrcset = (_d = rest.srcSet) !== null && _d !== void 0 ? _d : internalImageSrcSet({
+        ...loaderOptions,
+        widths,
+        src: data.url,
+        width: maxWidth,
+        loader,
+    });
     /* 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 }));
+    return (React.createElement("img", { id: (_e = data.id) !== null && _e !== void 0 ? _e : '', alt: (_g = (_f = data.altText) !== null && _f !== void 0 ? _f : rest.alt) !== null && _g !== void 0 ? _g : '', 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, srcSet: finalSrcset }));
     /* eslint-enable hydrogen/prefer-image-component */
 }
-function ExternalImage({ src, width, height, alt, loader, loaderOptions, loading, ...rest }) {
+function ExternalImage({ src, width, height, alt, loader, loaderOptions, widths, loading, ...rest }) {
+    var _a, _b;
     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`);
+    if (__HYDROGEN_DEV__ && !alt) {
+        console.warn(`<Image/>: when 'src' is provided, 'alt' should also be provided. ${`Image: ${src}`}`);
     }
+    if (widths &&
+        Array.isArray(widths) &&
+        widths.some((size) => isNaN(size)))
+        throw new Error(`<Image/>: the 'widths' property must be an array of numbers`);
     let finalSrc = src;
     if (loader) {
         finalSrc = loader({ src, width, height, ...loaderOptions });
@@ -53,7 +71,40 @@ function ExternalImage({ src, width, height, alt, loader, loaderOptions, loading
             throw new Error(`<Image/>: 'loader' did not return a valid string`);
         }
     }
+    let finalSrcset = (_a = rest.srcSet) !== null && _a !== void 0 ? _a : undefined;
+    if (!finalSrcset && loader && widths) {
+        // Height is a requirement in the LoaderProps, so  to keep the aspect ratio, we must determine the height based on the default values
+        const heightToWidthRatio = parseInt(height) / parseInt(width);
+        finalSrcset = (_b = widths === null || widths === void 0 ? void 0 : widths.map((width) => parseInt(width, 10))) === null || _b === void 0 ? void 0 : _b.map((width) => `${loader({
+            ...loaderOptions,
+            src,
+            width,
+            height: Math.floor(width * heightToWidthRatio),
+        })} ${width}w`).join(', ');
+    }
     /* 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' }));
+    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', srcSet: finalSrcset }));
     /* eslint-enable hydrogen/prefer-image-component */
 }
+// based on the default width sizes used by the Shopify liquid HTML tag img_tag plus a 2560 width to account for 2k resolutions
+// reference: https://shopify.dev/api/liquid/filters/html-filters#image_tag
+const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];
+function internalImageSrcSet({ src, width, crop, scale, widths, loader, }) {
+    const hasCustomWidths = widths && Array.isArray(widths);
+    if (hasCustomWidths && widths.some((size) => isNaN(size)))
+        throw new Error(`<Image/>: the 'widths' must be an array of numbers`);
+    let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;
+    if (!hasCustomWidths &&
+        width &&
+        width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1])
+        setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);
+    const srcGenerator = loader ? loader : addImageSizeParametersToUrl;
+    return setSizes
+        .map((size) => `${srcGenerator({
+        src,
+        width: size,
+        crop,
+        scale,
+    })} ${size}w`)
+        .join(', ');
+}

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

@@ -10,6 +10,8 @@ export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEle
     reloadDocument?: boolean;
     /** Whether to prefetch the link source when the user signals intent. Defaults to `true`. For more information, refer to [Prefetching a link source](https://shopify.dev/custom-storefronts/hydrogen/framework/routes#prefetching-a-link-source). */
     prefetch?: boolean;
+    /** Whether to emulate natural browser behavior and restore scroll position on navigation. Defaults to `true`. */
+    scroll?: boolean;
 }
 /**
  * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all

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

@@ -18,7 +18,7 @@ export const Link = React.forwardRef(function Link(props, ref) {
      */
     const [shouldPrefetch, setShouldPrefetch] = useState(false);
     const [maybePrefetch, setMaybePrefetch] = useState(false);
-    const { reloadDocument, target, replace: _replace, to, onClick, clientState, prefetch = true, } = props;
+    const { reloadDocument, target, replace: _replace, to, onClick, clientState, prefetch = true, scroll = true, } = props;
     const internalClick = useCallback((e) => {
         if (onClick)
             onClick(e);
@@ -32,18 +32,20 @@ export const Link = React.forwardRef(function Link(props, ref) {
             const replace = !!_replace || createPath(location) === createPath({ pathname: to });
             navigate(to, {
                 replace,
+                scroll,
                 clientState,
             });
         }
     }, [
+        onClick,
         reloadDocument,
         target,
         _replace,
-        to,
-        clientState,
-        onClick,
         location,
+        to,
         navigate,
+        clientState,
+        scroll,
     ]);
     const signalPrefetchIntent = () => {
         /**
@@ -91,6 +93,7 @@ export const Link = React.forwardRef(function Link(props, ref) {
                 'clientState',
                 'reloadDocument',
                 'prefetch',
+                'scroll',
             ]), ref: ref, onClick: internalClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, href: props.to }, props.children),
         shouldPrefetch && React.createElement(Prefetch, { pathname: to })));
 });

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

@@ -2,7 +2,7 @@ import React from 'react';
 import LocalizationClientProvider from './LocalizationClientProvider.client';
 import { useShop } from '../../foundation/useShop';
 import { useShopQuery } from '../../hooks/useShopQuery';
-import { CacheDays } from '../../framework/CachingStrategy';
+import { CacheDays } from '../../foundation/Cache/strategies';
 import { useSession } from '../../foundation/useSession/useSession';
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's

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

@@ -12,8 +12,9 @@ import { ModelViewer } from '../ModelViewer';
 export function MediaFile({ data, options, ...passthroughProps }) {
     switch (data.mediaContentType) {
         case 'IMAGE': {
-            const dataImage = data.image;
-            if (!dataImage) {
+            const dataImage = data
+                .image;
+            if (!dataImage || !dataImage.url) {
                 console.warn(`No "image" property was found on the "data" prop for <MediaFile/>, for the "type='image'"`);
                 return null;
             }

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { Product, ProductVariant as ProductVariantType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+declare type InitialVariantId = ProductVariantType['id'] | null;
+interface ProductOptionsProviderProps {
+    /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */
+    data: PartialDeep<Product>;
+    /** A `ReactNode` element. */
+    children: React.ReactNode;
+    /**
+     * The initially selected variant.
+     * The following logic applies to `initialVariantId`:
+     * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.
+     * 2. If `initialVariantId` is provided but is `null`, then no variant is used.
+     * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.
+     * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.
+     */
+    initialVariantId?: InitialVariantId;
+}
+export declare function ProductOptionsProvider({ children, data: product, initialVariantId: explicitVariantId, }: ProductOptionsProviderProps): JSX.Element;
+export {};

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

@@ -0,0 +1,140 @@
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import { ProductOptionsContext } from './context';
+import { getSelectedVariant, getOptions, } from '../../hooks/useProductOptions/helpers';
+export function ProductOptionsProvider({ children, data: product, initialVariantId: explicitVariantId, }) {
+    var _a, _b;
+    // The flattened variants
+    const variants = useMemo(() => { var _a; return (_a = product.variants) === null || _a === void 0 ? void 0 : _a.nodes; }, [(_a = product.variants) === null || _a === void 0 ? void 0 : _a.nodes]);
+    if (!isProductVariantArray(variants)) {
+        throw new Error(`<ProductOptionsProvider/> requires product.variants.nodes`);
+    }
+    // All the options available for a product, based on all the variants
+    const options = useMemo(() => getOptions(variants), [variants]);
+    /**
+     * Track the selectedVariant within the provider.
+     */
+    const [selectedVariant, setSelectedVariant] = useState(() => getVariantBasedOnIdProp(explicitVariantId, variants));
+    /**
+     * Track the selectedOptions within the provider. If a `initialVariantId`
+     * is passed, use that to select initial options.
+     */
+    const [selectedOptions, setSelectedOptions] = useState(() => getSelectedOptions(selectedVariant));
+    /**
+     * When the initialVariantId changes, we need to make sure we
+     * update the selected variant and selected options. If not,
+     * then the selected variant and options will reference incorrect
+     * values.
+     */
+    useEffect(() => {
+        const newSelectedVariant = getVariantBasedOnIdProp(explicitVariantId, variants);
+        setSelectedVariant(newSelectedVariant);
+        setSelectedOptions(getSelectedOptions(newSelectedVariant));
+    }, [explicitVariantId, variants]);
+    /**
+     * Allow the developer to select an option.
+     */
+    const setSelectedOption = useCallback((name, value) => {
+        setSelectedOptions((selectedOptions) => ({
+            ...selectedOptions,
+            [name]: value,
+        }));
+    }, [setSelectedOptions]);
+    const isOptionInStock = useCallback((option, value) => {
+        var _a;
+        const proposedVariant = getSelectedVariant(variants, {
+            ...selectedOptions,
+            ...{ [option]: value },
+        });
+        return (_a = proposedVariant === null || proposedVariant === void 0 ? void 0 : proposedVariant.availableForSale) !== null && _a !== void 0 ? _a : true;
+    }, [selectedOptions, variants]);
+    const sellingPlanGroups = useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = product.sellingPlanGroups) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.map((sellingPlanGroup) => {
+            var _a, _b;
+            return ({
+                ...sellingPlanGroup,
+                sellingPlans: (_b = (_a = sellingPlanGroup === null || sellingPlanGroup === void 0 ? void 0 : sellingPlanGroup.sellingPlans) === null || _a === void 0 ? void 0 : _a.nodes) !== null && _b !== void 0 ? _b : [],
+            });
+        });
+    }, [(_b = product.sellingPlanGroups) === null || _b === void 0 ? void 0 : _b.nodes]);
+    /**
+     * Track the selectedSellingPlan within the hook. If `initialSellingPlanId`
+     * is passed, use that as an initial value. Look it up from the `selectedVariant`, since
+     * that is also a requirement.
+     */
+    const [selectedSellingPlan, setSelectedSellingPlan] = useState(undefined);
+    const selectedSellingPlanAllocation = useMemo(() => {
+        var _a, _b;
+        if (!selectedVariant || !selectedSellingPlan) {
+            return;
+        }
+        if (!((_a = selectedVariant.sellingPlanAllocations) === null || _a === void 0 ? void 0 : _a.nodes)) {
+            throw new Error(`<ProductOptionsProvider/>: You must include 'sellingPlanAllocations.nodes' in your variants in order to calculate selectedSellingPlanAllocation`);
+        }
+        return (_b = selectedVariant.sellingPlanAllocations.nodes) === null || _b === void 0 ? void 0 : _b.find((allocation) => { var _a; return ((_a = allocation === null || allocation === void 0 ? void 0 : allocation.sellingPlan) === null || _a === void 0 ? void 0 : _a.id) === selectedSellingPlan.id; });
+    }, [selectedVariant, selectedSellingPlan]);
+    const value = useMemo(() => ({
+        variants,
+        variantsConnection: product.variants,
+        options,
+        selectedVariant,
+        setSelectedVariant,
+        selectedOptions,
+        setSelectedOption,
+        setSelectedOptions,
+        isOptionInStock,
+        selectedSellingPlan,
+        setSelectedSellingPlan,
+        selectedSellingPlanAllocation,
+        sellingPlanGroups,
+        sellingPlanGroupsConnection: product.sellingPlanGroups,
+    }), [
+        isOptionInStock,
+        options,
+        product.sellingPlanGroups,
+        product.variants,
+        selectedOptions,
+        selectedSellingPlan,
+        selectedSellingPlanAllocation,
+        selectedVariant,
+        sellingPlanGroups,
+        setSelectedOption,
+        variants,
+    ]);
+    return (React.createElement(ProductOptionsContext.Provider, { value: value }, children));
+}
+function getVariantBasedOnIdProp(explicitVariantId, variants) {
+    // get the initial variant based on the logic outlined in the comments for 'initialVariantId' above
+    // * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.
+    if (explicitVariantId) {
+        const foundVariant = variants.find((variant) => (variant === null || variant === void 0 ? void 0 : variant.id) === explicitVariantId);
+        if (!foundVariant) {
+            console.warn(`<ProductOptionsProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`);
+        }
+        return foundVariant;
+    }
+    // * 2. If `initialVariantId` is provided but is `null`, then no variant is used.
+    if (explicitVariantId === null) {
+        return null;
+    }
+    // * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.
+    // * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.
+    if (explicitVariantId === undefined) {
+        return variants.find((variant) => variant === null || variant === void 0 ? void 0 : variant.availableForSale) || variants[0];
+    }
+}
+function getSelectedOptions(selectedVariant) {
+    return (selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.selectedOptions)
+        ? selectedVariant.selectedOptions.reduce((memo, optionSet) => {
+            var _a, _b;
+            memo[(_a = optionSet === null || optionSet === void 0 ? void 0 : optionSet.name) !== null && _a !== void 0 ? _a : ''] = (_b = optionSet === null || optionSet === void 0 ? void 0 : optionSet.value) !== null && _b !== void 0 ? _b : '';
+            return memo;
+        }, {})
+        : {};
+}
+function isProductVariantArray(maybeVariantArray) {
+    if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {
+        return false;
+    }
+    return true;
+}

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

@@ -0,0 +1,2 @@
+import { ProductOptionsHookValue } from '../../hooks';
+export declare const ProductOptionsContext: import("react").Context<ProductOptionsHookValue | null>;

package/dist/esnext/components/{ProductProvider → ProductOptionsProvider}/context.js

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

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

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

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

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

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

@@ -1,6 +1,9 @@
 import React from 'react';
+import type { Product } from '../../storefront-api-types';
 import { Money } from '../Money';
+import type { PartialDeep } from 'type-fest';
 export interface ProductPriceProps {
+    data: PartialDeep<Product>;
     /** The type of price. Valid values: `regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
     /** The type of value. Valid values: `min` (default), `max` or `unit`. */
@@ -10,6 +13,6 @@ export interface ProductPriceProps {
 }
 /**
  * The `ProductPrice` component renders a `Money` component with the product
- * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range. It must be a descendent of the `ProductProvider` component.
+ * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
  */
-export declare function ProductPrice<TTag extends keyof JSX.IntrinsicElements>(props: Omit<React.ComponentProps<typeof Money>, 'data' | 'measurement'> & ProductPriceProps): JSX.Element | null;
+export declare function ProductPrice(props: Omit<React.ComponentProps<typeof Money>, 'data' | 'measurement'> & ProductPriceProps): JSX.Element | null;

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

@@ -1,34 +1,32 @@
 import React from 'react';
 import { Money } from '../Money';
-import { useProduct } from '../ProductProvider';
 /**
  * The `ProductPrice` component renders a `Money` component with the product
- * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range. It must be a descendent of the `ProductProvider` component.
+ * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
  */
 export function ProductPrice(props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const product = useProduct();
-    const { priceType = 'regular', variantId, valueType = 'min', ...passthroughProps } = props;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const { priceType = 'regular', variantId, valueType = 'min', data: product, ...passthroughProps } = props;
     if (product == null) {
-        throw new Error('Expected a ProductProvider context, but none was found');
+        throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);
     }
     let price;
     let measurement;
     const variant = variantId
-        ? (_a = product === null || product === void 0 ? void 0 : product.variants) === null || _a === void 0 ? void 0 : _a.find((variant) => (variant === null || variant === void 0 ? void 0 : variant.id) === variantId)
+        ? (_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.variants) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.find((variant) => (variant === null || variant === void 0 ? void 0 : variant.id) === variantId)) !== null && _c !== void 0 ? _c : null
         : null;
     if (priceType === 'compareAt') {
         if (variantId && variant) {
-            if (((_b = variant.compareAtPriceV2) === null || _b === void 0 ? void 0 : _b.amount) === ((_c = variant.priceV2) === null || _c === void 0 ? void 0 : _c.amount)) {
+            if (((_d = variant.compareAtPriceV2) === null || _d === void 0 ? void 0 : _d.amount) === ((_e = variant.priceV2) === null || _e === void 0 ? void 0 : _e.amount)) {
                 return null;
             }
             price = variant.compareAtPriceV2;
         }
         else if (valueType === 'max') {
-            price = (_d = product === null || product === void 0 ? void 0 : product.compareAtPriceRange) === null || _d === void 0 ? void 0 : _d.maxVariantPrice;
+            price = (_f = product === null || product === void 0 ? void 0 : product.compareAtPriceRange) === null || _f === void 0 ? void 0 : _f.maxVariantPrice;
         }
         else {
-            price = (_e = product === null || product === void 0 ? void 0 : product.compareAtPriceRange) === null || _e === void 0 ? void 0 : _e.minVariantPrice;
+            price = (_g = product === null || product === void 0 ? void 0 : product.compareAtPriceRange) === null || _g === void 0 ? void 0 : _g.minVariantPrice;
         }
     }
     else {
@@ -40,10 +38,10 @@ export function ProductPrice(props) {
             }
         }
         else if (valueType === 'max') {
-            price = (_f = product.priceRange) === null || _f === void 0 ? void 0 : _f.maxVariantPrice;
+            price = (_h = product.priceRange) === null || _h === void 0 ? void 0 : _h.maxVariantPrice;
         }
         else {
-            price = (_g = product.priceRange) === null || _g === void 0 ? void 0 : _g.minVariantPrice;
+            price = (_j = product.priceRange) === null || _j === void 0 ? void 0 : _j.minVariantPrice;
         }
     }
     if (!price) {

package/dist/esnext/components/Seo/NoIndexSeo.client.d.ts

@@ -0,0 +1,3 @@
+import type { DefaultPage } from './seo-types';
+import type { PartialDeep } from 'type-fest';
+export declare function NoIndexPageSeo({ title, titleTemplate, lang, }: PartialDeep<DefaultPage>): JSX.Element;

package/dist/esnext/components/Seo/NoIndexSeo.client.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useShop } from '../../foundation';
+import { Head } from '../../client';
+export function NoIndexPageSeo({ title, titleTemplate, lang, }) {
+    const { languageCode: fallBacklang } = useShop();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Head, { defaultTitle: title !== null && title !== void 0 ? title : '', titleTemplate: titleTemplate !== null && titleTemplate !== void 0 ? titleTemplate : `%s - ${title}` },
+            React.createElement("html", { lang: lang !== null && lang !== void 0 ? lang : fallBacklang }),
+            React.createElement("meta", { name: "robots", content: "noindex" }))));
+}

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

@@ -2,6 +2,7 @@ import { type ComponentProps } from 'react';
 import { ProductSeo } from './ProductSeo.client';
 import { CollectionSeo } from './CollectionSeo.client';
 import { PageSeo } from './PageSeo.client';
+import { NoIndexPageSeo } from './NoIndexSeo.client';
 import type { DefaultPage as DefaultPageType, HomePage as HomePageType } from './seo-types';
 declare type Props = {
     type: 'defaultSeo';
@@ -18,6 +19,9 @@ declare type Props = {
 } | {
     type: 'page';
     data: ComponentProps<typeof PageSeo>;
+} | {
+    type: 'noindex';
+    data: ComponentProps<typeof NoIndexPageSeo>;
 };
 /**
  * The `Seo` component renders SEO information on a webpage.

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

@@ -5,6 +5,7 @@ import { HomePageSeo } from './HomePageSeo.client';
 import { ProductSeo } from './ProductSeo.client';
 import { CollectionSeo } from './CollectionSeo.client';
 import { PageSeo } from './PageSeo.client';
+import { NoIndexPageSeo } from './NoIndexSeo.client';
 /**
  * The `Seo` component renders SEO information on a webpage.
  */
@@ -21,6 +22,8 @@ export function Seo(props) {
             return React.createElement(CollectionSeo, { ...props.data });
         case 'page':
             return React.createElement(PageSeo, { ...props.data });
+        case 'noindex':
+            return React.createElement(NoIndexPageSeo, { ...props.data });
         default:
             console.warn('The <Seo/> only accepts type prop with values of defaultSeo, homepage, product, collection, or page.');
             return null;

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

@@ -20,7 +20,7 @@ export { CartShopPayButton } from './CartShopPayButton';
 export { CartEstimatedCost } from './CartEstimatedCost';
 export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
 export type { State, Status, Cart, CartWithActions, CartAction, } from './CartProvider';
-export { ProductProvider, useProduct } from './ProductProvider';
+export { ProductOptionsProvider, useProductOptions, } from './ProductOptionsProvider';
 export { ProductPrice } from './ProductPrice';
 export { BuyNowButton } from './BuyNowButton';
 export { ShopPayButton } from './ShopPayButton';

package/dist/esnext/components/index.js

@@ -18,7 +18,7 @@ export { CartCheckoutButton } from './CartCheckoutButton';
 export { CartShopPayButton } from './CartShopPayButton';
 export { CartEstimatedCost } from './CartEstimatedCost';
 export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
-export { ProductProvider, useProduct } from './ProductProvider';
+export { ProductOptionsProvider, useProductOptions, } from './ProductOptionsProvider';
 export { ProductPrice } from './ProductPrice';
 export { BuyNowButton } from './BuyNowButton';
 export { ShopPayButton } from './ShopPayButton';

package/dist/esnext/config.d.ts

@@ -1,3 +1,3 @@
-import type { HydrogenConfig } from './types';
-export declare const defineConfig: (params: HydrogenConfig) => HydrogenConfig;
-export type { HydrogenConfig };
+import type { InlineHydrogenConfig } from './types';
+export declare const defineConfig: (params: InlineHydrogenConfig) => InlineHydrogenConfig;
+export type { InlineHydrogenConfig as HydrogenConfig };