@shopify/hydrogen 0.11.0-experimental.1 → 0.11.1-experimental.0

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ImageFragment as Fragment } from '../../graphql/graphql-constants';
 import { shopifyImageLoader, getShopifyImageDimensions, } from '../../utilities';
-function convertShopifyImageData({ image, options, loader, loaderOptions, id: propId, alt, }) {
-    const { url: src, altText, id } = image;
-    const { width, height } = getShopifyImageDimensions(image, options);
+function convertShopifyImageData({ data, options, loader, loaderOptions, id: propId, alt, }) {
+    const { url: src, altText, id } = data;
+    const { width, height } = getShopifyImageDimensions(data, options);
     return {
         src,
         id: propId ? propId : id,
@@ -20,16 +20,16 @@ function convertShopifyImageData({ image, options, loader, loaderOptions, id: pr
  */
 export function Image(props) {
     var _a, _b, _c, _d;
-    const { image, options, src, id, alt, width, height, loader, loaderOptions, ...passthroughProps } = props;
-    if (!image && !src) {
-        throw new Error('Image component: requires either an `image` or `src` prop');
+    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 (!image && src && (!width || !height)) {
+    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 = image
+    const imgProps = data
         ? convertShopifyImageData({
-            image,
+            data,
             options,
             loader,
             loaderOptions,

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

@@ -1,4 +1,15 @@
-import { ReactNode } from 'react';
+import { ReactNode, ElementType } from 'react';
+import { PreloadOptions } from '../../types';
+import { Props } from '../types';
+export interface LocalizationProviderProps {
+    /** A `ReactNode` element. */
+    children: ReactNode;
+    /** Whether to preload the query. Defaults to `false`. Specify `true` to
+     * [preload the query](/custom-storefronts/hydrogen/framework/preloaded-queries) for the URL
+     * or `'*'` to preload the query for all requests.
+     */
+    preload: PreloadOptions;
+}
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's
  * [`localization`](/api/storefront/reference/common-objects/queryroot) field
@@ -8,6 +19,4 @@ import { ReactNode } from 'react';
  * The `isoCode` of the `country` can be used in the Storefront API's
  * `@inContext` directive as the `country` value.
  */
-export declare function LocalizationProvider({ children }: {
-    children: ReactNode;
-}): JSX.Element;
+export declare function LocalizationProvider<TTag extends ElementType>(props: Props<TTag> & LocalizationProviderProps): JSX.Element;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import LocalizationClientProvider from './LocalizationClientProvider.client';
 import { useShopQuery } from '../../hooks/useShopQuery';
 import { Localization } from '../../graphql/graphql-constants';
+import { CacheDays } from '../../framework/CachingStrategy';
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's
  * [`localization`](/api/storefront/reference/common-objects/queryroot) field
@@ -11,10 +12,11 @@ import { Localization } from '../../graphql/graphql-constants';
  * The `isoCode` of the `country` can be used in the Storefront API's
  * `@inContext` directive as the `country` value.
  */
-export function LocalizationProvider({ children }) {
+export function LocalizationProvider(props) {
     const { data: { localization }, } = useShopQuery({
         query: Localization,
-        cache: { maxAge: 60 * 60, staleWhileRevalidate: 60 * 60 * 23 },
+        cache: CacheDays(),
+        preload: props.preload,
     });
-    return (React.createElement(LocalizationClientProvider, { localization: localization }, children));
+    return (React.createElement(LocalizationClientProvider, { localization: localization }, props.children));
 }

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

@@ -4,13 +4,15 @@ import { ExternalVideoProps } from '../ExternalVideo';
 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 ModelViewerMedia = Media & ModelViewerProps['model'];
-declare type ExternalVideoMedia = Media & ExternalVideoProps['video'];
-declare type VideoMedia = Media & VideoProps['video'];
+declare type MediaImageMedia = Media & {
+    image: MediaImageProps['data'];
+};
+declare type ModelViewerMedia = Media & ModelViewerProps['data'];
+declare type ExternalVideoMedia = Media & ExternalVideoProps['data'];
+declare type VideoMedia = Media & VideoProps['data'];
 export interface MediaFileProps {
     /** A [Media object](/api/storefront/reference/products/media). */
-    media: MediaImageMedia | ModelViewerMedia | ExternalVideoMedia | VideoMedia;
+    data: MediaImageMedia | ModelViewerMedia | ExternalVideoMedia | VideoMedia;
     /** The options for the `Image`, `Video`, `ExternalVideo`, or `ModelViewer` components. */
     options?: VideoProps['options'] | ExternalVideoProps['options'];
 }
@@ -20,7 +22,7 @@ export interface MediaFileProps {
  * `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;
+export declare function MediaFile({ data, options, ...passthroughProps }: MediaFileProps): JSX.Element | null;
 export declare namespace MediaFile {
     var Fragment: string;
 }

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

@@ -10,17 +10,17 @@ import { MediaFileFragment as Fragment } from '../../graphql/graphql-constants';
  * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `mediaContentType` of the
  * `media` provided as a prop.
  */
-export function MediaFile({ media, options, ...passthroughProps }) {
-    switch (media.mediaContentType) {
+export function MediaFile({ data, options, ...passthroughProps }) {
+    switch (data.mediaContentType) {
         case 'IMAGE': {
-            return (React.createElement(Image, { ...passthroughProps, image: media.image, options: options }));
+            return (React.createElement(Image, { ...passthroughProps, data: data.image, options: options }));
         }
         case 'VIDEO':
-            return (React.createElement(Video, { ...passthroughProps, video: media, options: options }));
+            return (React.createElement(Video, { ...passthroughProps, data: data, options: options }));
         case 'EXTERNAL_VIDEO':
-            return (React.createElement(ExternalVideo, { ...passthroughProps, video: media, options: options }));
+            return (React.createElement(ExternalVideo, { ...passthroughProps, data: data, options: options }));
         case 'MODEL_3D':
-            return (React.createElement(ModelViewer, { ...passthroughProps, model: media }));
+            return (React.createElement(ModelViewer, { ...passthroughProps, data: data }));
         default:
             return null;
     }

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

@@ -3,7 +3,7 @@ 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;
+    data: ParsedMetafield;
     /** An HTML tag to be rendered as the base element wrapper. The default value varies depending on [metafield.type](/apps/metafields/types). */
     as?: ElementType;
 }

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

@@ -13,51 +13,51 @@ import { Image } from '../Image';
  */
 export function Metafield(props) {
     var _a;
-    const { metafield, children, as, ...passthroughProps } = props;
+    const { data, children, as, ...passthroughProps } = props;
     const { locale } = useShop();
-    if (metafield.value == null) {
-        console.warn(`No metafield value for ${metafield}`);
+    if (data.value == null) {
+        console.warn(`No metafield value for ${data}`);
         return null;
     }
-    switch (metafield.type) {
+    switch (data.type) {
         case 'date': {
             const Wrapper = as !== null && as !== void 0 ? as : 'time';
-            return (React.createElement(Wrapper, { ...passthroughProps }, metafield.value.toLocaleDateString(locale)));
+            return (React.createElement(Wrapper, { ...passthroughProps }, data.value.toLocaleDateString(locale)));
         }
         case 'date_time': {
             const Wrapper = as !== null && as !== void 0 ? as : 'time';
-            return (React.createElement(Wrapper, { ...passthroughProps }, metafield.value.toLocaleString(locale)));
+            return (React.createElement(Wrapper, { ...passthroughProps }, data.value.toLocaleString(locale)));
         }
         case 'weight':
         case 'dimension':
         case 'volume': {
             const Wrapper = as !== null && as !== void 0 ? as : 'span';
-            return (React.createElement(Wrapper, { ...passthroughProps }, getMeasurementAsString(metafield.value, locale)));
+            return (React.createElement(Wrapper, { ...passthroughProps }, getMeasurementAsString(data.value, locale)));
         }
         case 'rating': {
             const Wrapper = as !== null && as !== void 0 ? as : 'span';
-            return (React.createElement(Wrapper, { ...passthroughProps }, metafield.value.value));
+            return (React.createElement(Wrapper, { ...passthroughProps }, data.value.value));
         }
         case 'single_line_text_field': {
-            return (React.createElement(RawHtml, { ...passthroughProps, as: as !== null && as !== void 0 ? as : 'span', string: metafield.value }));
+            return (React.createElement(RawHtml, { ...passthroughProps, as: as !== null && as !== void 0 ? as : 'span', string: data.value }));
         }
         case 'multi_line_text_field': {
-            return (React.createElement(RawHtml, { ...passthroughProps, as: as !== null && as !== void 0 ? as : 'span', string: metafield.value.split('\n').join('<br/>') }));
+            return (React.createElement(RawHtml, { ...passthroughProps, as: as !== null && as !== void 0 ? as : 'span', string: data.value.split('\n').join('<br/>') }));
         }
         case 'url':
-            return (React.createElement("a", { href: metafield.value, ...passthroughProps }, metafield.value));
+            return (React.createElement("a", { href: data.value, ...passthroughProps }, data.value));
         case 'json':
             const Wrapper = as !== null && as !== void 0 ? as : 'span';
-            return (React.createElement(Wrapper, { ...passthroughProps }, JSON.stringify(metafield.value)));
+            return (React.createElement(Wrapper, { ...passthroughProps }, JSON.stringify(data.value)));
         case 'file_reference': {
-            if (((_a = metafield.reference) === null || _a === void 0 ? void 0 : _a.__typename) === 'MediaImage') {
-                const ref = metafield.reference;
-                return ref.image ? (React.createElement(Image, { image: ref.image, ...passthroughProps })) : null;
+            if (((_a = data.reference) === null || _a === void 0 ? void 0 : _a.__typename) === 'MediaImage') {
+                const ref = data.reference;
+                return ref.data ? (React.createElement(Image, { data: ref.data, ...passthroughProps })) : null;
             }
         }
         default: {
             const Wrapper = as !== null && as !== void 0 ? as : 'span';
-            return (React.createElement(Wrapper, { ...passthroughProps }, metafield.value.toString()));
+            return React.createElement(Wrapper, { ...passthroughProps }, data.value.toString());
         }
     }
 }

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

@@ -5,7 +5,7 @@ export interface ModelViewerProps {
     /** Any ReactNode elements. */
     children?: ReactNode;
     /** An object with the same fields as the [GraphQL fragment](#graphql-fragment). */
-    model: {
+    data: {
         id?: Model3DType['id'];
         alt: Model3DType['alt'];
         previewImage?: Pick<Image, 'url'>;

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

@@ -11,7 +11,7 @@ export function ModelViewer(props) {
     const callbackRef = useCallback((node) => {
         setModelViewer(node);
     }, []);
-    const { model, id = model.id, children, className, ...passthroughProps } = props;
+    const { data: model, id = model.id, children, className, ...passthroughProps } = props;
     const modelViewerLoadedStatus = useLoadScript('https://unpkg.com/@google/model-viewer@v1.8.0/dist/model-viewer.min.js', {
         module: true,
     });

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

@@ -5,7 +5,7 @@ export interface MoneyProps {
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
     as?: ElementType;
     /** A [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2). */
-    money: MoneyV2;
+    data: MoneyV2;
 }
 /**
  * The `Money` component renders a string of the Storefront API's

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

@@ -7,8 +7,8 @@ import { MoneyFragment as Fragment } from '../../graphql/graphql-constants';
  * `defaultLocale` in the `shopify.config.js` file.
  */
 export function Money(props) {
-    const { money, as, ...passthroughProps } = props;
-    const moneyObject = useMoney(money);
+    const { data, as, ...passthroughProps } = props;
+    const moneyObject = useMoney(data);
     const Wrapper = as !== null && as !== void 0 ? as : 'div';
     return React.createElement(Wrapper, { ...passthroughProps }, moneyObject.localizedString);
 }

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

@@ -10,10 +10,12 @@ export interface ProductMetafieldProps extends Omit<MetafieldProps, 'metafield'>
      * product's metafield.
      */
     namespace: string;
+    /** The ID of the variant. If provided, then use the metafield corresponding to the variant ID instead of the product's metafield. */
+    variantId?: string;
 }
 /**
  * The `ProductMetafield` component renders a
  * [`Metafield`](/api/hydrogen/components/primitive/metafield) component with the product metafield.
  * It must be a descendent of a `ProductProvider` component.
  */
-export declare function ProductMetafield<TTag extends ElementType>(props: Props<TTag> & ProductMetafieldProps): JSX.Element | null;
+export declare function ProductMetafield<TTag extends ElementType>(props: Props<TTag> & Omit<ProductMetafieldProps, 'data'>): JSX.Element | null;

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import { Metafield } from '../Metafield';
 import { useProduct } from '../../hooks/useProduct/useProduct';
+import { flattenConnection } from '../../utilities';
 /**
  * The `ProductMetafield` component renders a
  * [`Metafield`](/api/hydrogen/components/primitive/metafield) component with the product metafield.
  * It must be a descendent of a `ProductProvider` component.
  */
 export function ProductMetafield(props) {
+    var _a, _b, _c;
     const product = useProduct();
     if (product == null) {
         throw new Error('Expected a ProductProvider context, but none was found');
@@ -15,11 +17,26 @@ export function ProductMetafield(props) {
         console.warn('No metafields available for product');
         return null;
     }
-    const { namespace, keyName, ...passthroughProps } = props;
-    const field = product.metafields.find((metafield) => metafield.namespace === namespace && metafield.key === keyName);
+    const { namespace, keyName, variantId, ...passthroughProps } = props;
+    const metafields = variantId
+        ? flattenConnection((_c = (_b = (_a = product.variants) === null || _a === void 0 ? void 0 : _a.find(({ id }) => id === variantId)) === null || _b === void 0 ? void 0 : _b.metafields) !== null && _c !== void 0 ? _c : {})
+        : product.metafields;
+    const field = metafields === null || metafields === void 0 ? void 0 : metafields.find((metafield) => metafield.namespace === namespace && metafield.key === keyName);
     if (field === null || field === undefined) {
-        console.warn(`Product does not have a value for metafield. ProductID:${product.id} namespace:${namespace} keyName:${keyName}`);
+        const message = 'does not have a value for metafield.';
+        const productOrVariant = variantId ? `Variant` : 'Product';
+        const logItems = {
+            variantId: variantId,
+            ProductId: product.id,
+            namespace,
+            keyName,
+        };
+        console.warn([
+            productOrVariant,
+            message,
+            ...Object.entries(logItems).map(([key, val]) => `${key}: ${val}`),
+        ].join(' '));
         return null;
     }
-    return React.createElement(Metafield, { metafield: field, ...passthroughProps });
+    return React.createElement(Metafield, { data: field, ...passthroughProps });
 }

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

@@ -1,11 +1,13 @@
 import { ElementType } from 'react';
 import { MoneyProps } from '../Money';
 import { Props } from '../types';
-export interface ProductPriceProps extends Omit<MoneyProps, 'money'> {
+export interface ProductPriceProps extends Omit<MoneyProps, 'data'> {
     /** The type of price. Valid values: `regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
-    /** The type of value. Valid values: `min` (default) or `max`. */
-    valueType?: 'max' | 'min';
+    /** The type of value. Valid values: `min` (default), `max` or `unit`. */
+    valueType?: 'max' | 'min' | 'unit';
+    /** The ID of the variant. */
+    variantId?: string;
 }
 /**
  * The `ProductPrice` component renders a `Money` component with the product

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

@@ -1,36 +1,57 @@
 import React from 'react';
 import { Money } from '../Money';
 import { useProduct } from '../ProductProvider';
+import { UnitPrice } from '../UnitPrice';
 /**
  * The `ProductPrice` component renders a `Money` component with the product
  * [`priceRange`](/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.
  */
 export function ProductPrice(props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g;
     const product = useProduct();
-    const { priceType = 'regular', valueType = 'min', ...passthroughProps } = props;
+    const { priceType = 'regular', variantId, valueType = 'min', ...passthroughProps } = props;
     if (product == null) {
         throw new Error('Expected a ProductProvider context, but none was found');
     }
     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.id === variantId)
+        : null;
     if (priceType === 'compareAt') {
-        if (valueType === 'max') {
-            price = (_a = product.compareAtPriceRange) === null || _a === void 0 ? void 0 : _a.maxVariantPrice;
+        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)) {
+                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;
         }
         else {
-            price = (_b = product.compareAtPriceRange) === null || _b === void 0 ? void 0 : _b.minVariantPrice;
+            price = (_e = product === null || product === void 0 ? void 0 : product.compareAtPriceRange) === null || _e === void 0 ? void 0 : _e.minVariantPrice;
         }
     }
     else {
-        if (valueType === 'max') {
-            price = (_c = product.priceRange) === null || _c === void 0 ? void 0 : _c.maxVariantPrice;
+        if (variantId && variant) {
+            price = variant.priceV2;
+            if (valueType === 'unit') {
+                price = variant.unitPrice;
+                measurement = variant.unitPriceMeasurement;
+            }
+        }
+        else if (valueType === 'max') {
+            price = (_f = product.priceRange) === null || _f === void 0 ? void 0 : _f.maxVariantPrice;
         }
         else {
-            price = (_d = product.priceRange) === null || _d === void 0 ? void 0 : _d.minVariantPrice;
+            price = (_g = product.priceRange) === null || _g === void 0 ? void 0 : _g.minVariantPrice;
         }
     }
     if (price == null) {
         return null;
     }
-    return React.createElement(Money, { ...passthroughProps, money: price });
+    if (measurement) {
+        return (React.createElement(UnitPrice, { ...passthroughProps, data: price, measurement: measurement }));
+    }
+    return React.createElement(Money, { ...passthroughProps, data: price });
 }

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ProductProviderProps } from './ProductProvider.client';
+interface ProductOptionsProviderProps {
+    children: React.ReactNode;
+    initialVariantId: ProductProviderProps['initialVariantId'];
+}
+export declare function ProductOptionsProvider({ children, initialVariantId, }: ProductOptionsProviderProps): JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ProductOptionsContext } from './context';
+import { useProductOptions } from '../../hooks';
+import { useProduct } from '../../hooks/useProduct';
+export function ProductOptionsProvider({ children, initialVariantId, }) {
+    const product = useProduct();
+    const productOptions = useProductOptions({
+        variants: product.variantsConnection,
+        initialVariantId: initialVariantId,
+    });
+    return (React.createElement(ProductOptionsContext.Provider, { value: productOptions }, children));
+}

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

@@ -1,18 +1,19 @@
 import { ReactNode } from 'react';
 import { useProductOptions } from '../../hooks';
 import { Product } from './types';
-/**
- * The `ProductProvider` component sets up a context with product details. Descendents of
- * this component can use the `useProduct` hook and the related `ProductX` or `SelectedVariantX` hooks.
- */
-export declare function ProductProvider({ children, product, initialVariantId, }: {
+export interface ProductProviderProps {
     /** A `ReactNode` element. */
     children: ReactNode;
     /** A [Product object](/api/storefront/reference/products/product). */
-    product: Product;
+    data: Product;
     /** The initially selected variant. This is required only if you're using a `SelectedVariantX` hook in the `ProductProvider` component.*/
     initialVariantId?: Parameters<typeof useProductOptions>['0']['initialVariantId'];
-}): JSX.Element;
+}
+/**
+ * The `ProductProvider` component sets up a context with product details. Descendents of
+ * this component can use the `useProduct` hook and the related `ProductX` or `SelectedVariantX` hooks.
+ */
+export declare function ProductProvider({ children, data: product, initialVariantId, }: ProductProviderProps): JSX.Element;
 export declare namespace ProductProvider {
     var Fragment: string;
 }

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

@@ -1,17 +1,14 @@
 import React, { useMemo } from 'react';
-import { useProductOptions, useParsedMetafields } from '../../hooks';
+import { useParsedMetafields } from '../../hooks';
 import { flattenConnection } from '../../utilities';
 import { ProductContext } from './context';
 import { ProductProviderFragment as Fragment } from '../../graphql/graphql-constants';
+import { ProductOptionsProvider } from './ProductOptionsProvider.client';
 /**
  * The `ProductProvider` component sets up a context with product details. Descendents of
  * this component can use the `useProduct` hook and the related `ProductX` or `SelectedVariantX` hooks.
  */
-export function ProductProvider({ children, product, initialVariantId, }) {
-    const { variants, options, selectedVariant, setSelectedVariant, selectedOptions, setSelectedOption, setSelectedOptions, isOptionInStock, selectedSellingPlan, selectedSellingPlanAllocation, setSelectedSellingPlan, sellingPlanGroups, } = useProductOptions({
-        variants: product.variants,
-        initialVariantId: initialVariantId,
-    });
+export function ProductProvider({ children, data: product, initialVariantId, }) {
     const metafields = useParsedMetafields(product.metafields);
     const providerValue = useMemo(() => {
         return {
@@ -20,7 +17,9 @@ export function ProductProvider({ children, product, initialVariantId, }) {
             metafieldsConnection: product.metafields,
             media: product.media ? flattenConnection(product.media) : undefined,
             mediaConnection: product.media,
-            variants: variants,
+            variants: product.variants
+                ? flattenConnection(product.variants)
+                : undefined,
             variantsConnection: product.variants,
             images: product.images ? flattenConnection(product.images) : undefined,
             imagesConnection: product.images,
@@ -28,35 +27,10 @@ export function ProductProvider({ children, product, initialVariantId, }) {
                 ? flattenConnection(product.collections)
                 : undefined,
             collectionsConnection: product.collections,
-            options,
-            selectedVariant,
-            setSelectedVariant,
-            selectedOptions,
-            setSelectedOption,
-            setSelectedOptions,
-            isOptionInStock,
-            selectedSellingPlan,
-            selectedSellingPlanAllocation,
-            setSelectedSellingPlan,
-            sellingPlanGroups,
         };
-    }, [
-        isOptionInStock,
-        metafields,
-        options,
-        product,
-        selectedOptions,
-        selectedSellingPlan,
-        selectedSellingPlanAllocation,
-        selectedVariant,
-        sellingPlanGroups,
-        setSelectedOption,
-        setSelectedOptions,
-        setSelectedSellingPlan,
-        setSelectedVariant,
-        variants,
-    ]);
-    return (React.createElement(ProductContext.Provider, { value: providerValue }, children));
+    }, [metafields, product]);
+    return (React.createElement(ProductContext.Provider, { value: providerValue },
+        React.createElement(ProductOptionsProvider, { initialVariantId: initialVariantId }, children)));
 }
 ProductProvider.Fragment = Fragment;
 export const ProductProviderFragment = Fragment;

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

@@ -1,16 +1,20 @@
 import { ProductOptionsHookValue } from '../../hooks';
-import { GraphQLConnection, ParsedMetafield, RawMetafield } from '../../types';
+import { ParsedMetafield } from '../../types';
 import { ProductProviderFragmentFragment } from './ProductProviderFragment';
 import { Product } from './types';
 import { Collection, Image } from '../../graphql/types/types';
+import type { Variant } from '../../hooks/useProductOptions';
 export declare const ProductContext: import("react").Context<ProductContextType | null>;
-export declare type ProductContextType = Omit<Product, 'media' | 'metafields' | 'images' | 'collections' | 'variants' | 'sellingPlanGroups' | 'options'> & ProductOptionsHookValue & {
+export declare type ProductContextType = Omit<Product, 'media' | 'metafields' | 'images' | 'collections' | 'variants' | 'sellingPlanGroups' | 'options'> & {
     media?: ProductProviderFragmentFragment['media']['edges'][0]['node'][];
-    mediaConnection?: ProductProviderFragmentFragment['media'];
+    mediaConnection?: Product['media'];
     metafields?: ParsedMetafield[];
-    metafieldsConnection?: GraphQLConnection<RawMetafield>;
+    metafieldsConnection?: Product['metafields'];
     images?: Partial<Image>[];
-    imagesConnection?: GraphQLConnection<Partial<Image>>;
+    imagesConnection?: Product['images'];
     collections?: Partial<Collection>[];
-    collectionsConnection?: GraphQLConnection<Partial<Collection>>;
+    collectionsConnection?: Product['collections'];
+    variants?: Partial<Variant>[];
+    variantsConnection?: Product['variants'];
 };
+export declare const ProductOptionsContext: import("react").Context<ProductOptionsHookValue | null>;

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useShop } from '../../foundation';
-import { Helmet } from '../../client';
+import { Head } from '../../client';
 import { TitleSeo } from './TitleSeo.client';
 import { DescriptionSeo } from './DescriptionSeo.client';
 import { TwitterSeo } from './TwitterSeo.client';
@@ -8,7 +8,7 @@ export function DefaultPageSeo({ title, description, url, titleTemplate, lang, }
     const { locale } = useShop();
     const fallBacklang = locale.split(/[-_]/)[0];
     return (React.createElement(React.Fragment, null,
-        React.createElement(Helmet, { defaultTitle: title, titleTemplate: titleTemplate !== null && titleTemplate !== void 0 ? titleTemplate : `%s - ${title}` },
+        React.createElement(Head, { defaultTitle: title, titleTemplate: titleTemplate !== null && titleTemplate !== void 0 ? titleTemplate : `%s - ${title}` },
             React.createElement("html", { lang: lang !== null && lang !== void 0 ? lang : fallBacklang }),
             React.createElement("meta", { property: "og:type", content: "website" }),
             React.createElement("meta", { property: "og:site_name", content: title }),

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Helmet } from '../../client';
+import { Head } from '../../client';
 export function DescriptionSeo({ description }) {
     if (!description) {
         return null;
     }
-    return (React.createElement(Helmet, null,
+    return (React.createElement(Head, null,
         React.createElement("meta", { name: "description", content: description }),
         React.createElement("meta", { property: "og:description", content: description })));
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Helmet } from '../../client';
+import { Head } from '../../client';
 import { TitleSeo } from './TitleSeo.client';
 import { DescriptionSeo } from './DescriptionSeo.client';
 export function HomePageSeo({ title, description, url }) {
@@ -16,7 +16,7 @@ export function HomePageSeo({ title, description, url }) {
         url,
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Helmet, null,
+        React.createElement(Head, null,
             React.createElement("meta", { property: "og:url", content: url }),
             React.createElement("script", { type: "application/ld+json" }, JSON.stringify(organizationSchema)),
             React.createElement("script", { type: "application/ld+json" }, JSON.stringify(webSiteSchema))),

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Helmet } from '../../client';
+import { Head } from '../../client';
 export function ImageSeo({ url, width, height, altText }) {
-    return (React.createElement(Helmet, null,
+    return (React.createElement(Head, null,
         url && React.createElement("meta", { property: "og:image", content: url }),
         url && React.createElement("meta", { property: "og:image:secure_url", content: url }),
         width && React.createElement("meta", { property: "og:image:width", content: `${width}` }),