@shopify/hydrogen 0.1.0

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

@@ -0,0 +1,19 @@
+import { ImageProps } from '../Image';
+import { VideoProps } from '../Video';
+import { ExternalVideoProps } from '../ExternalVideo';
+import { Model3DProps } from '../Model3D';
+import { Media as MediaType } from '../../graphql/types/types';
+export declare type Media = Pick<MediaType, 'mediaContentType'>;
+declare type ImageMedia = Media & ImageProps;
+declare type Model3DMedia = Media & Model3DProps['model'];
+declare type ExternalVideoMedia = Media & ExternalVideoProps['video'];
+declare type VideoMedia = Media & VideoProps['video'];
+export interface Props {
+    media: ImageMedia | Model3DMedia | ExternalVideoMedia | VideoMedia;
+    options?: ImageProps['options'] | VideoProps['options'] | ExternalVideoProps['options'];
+}
+export declare function MediaFile({ media, options, ...passthroughProps }: Props): JSX.Element | null;
+export declare namespace MediaFile {
+    var Fragment: string;
+}
+export {};

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Image } from '../Image';
+import { Video } from '../Video';
+import { ExternalVideo } from '../ExternalVideo';
+import { Model3D } from '../Model3D';
+import { MediaFileFragment } from '../../graphql/graphql-constants';
+export function MediaFile({ media, options, ...passthroughProps }) {
+    switch (media.mediaContentType) {
+        case 'IMAGE': {
+            return (React.createElement(Image, { ...passthroughProps, image: media.image, options: options }));
+        }
+        case 'VIDEO':
+            return (React.createElement(Video, { ...passthroughProps, video: media, options: options }));
+        case 'EXTERNAL_VIDEO':
+            return (React.createElement(ExternalVideo, { ...passthroughProps, video: media, options: options }));
+        case 'MODEL_3D':
+            return React.createElement(Model3D, { ...passthroughProps, model: media });
+        default:
+            return null;
+    }
+}
+MediaFile.Fragment = MediaFileFragment;

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

@@ -0,0 +1,22 @@
+import * as Types from '../../graphql/types/types';
+import { ImageFragmentFragment } from '../Image/ImageFragment';
+import { VideoFragmentFragment } from '../Video/VideoFragment';
+import { ExternalVideoFragmentFragment } from '../ExternalVideo/ExternalVideoFragment';
+import { Model3DFragmentFragment } from '../Model3D/Model3DFragment';
+export declare type MediaFileFragment_ExternalVideo_Fragment = {
+    __typename?: 'ExternalVideo';
+} & Pick<Types.ExternalVideo, 'mediaContentType'> & ExternalVideoFragmentFragment;
+export declare type MediaFileFragment_MediaImage_Fragment = {
+    __typename?: 'MediaImage';
+} & Pick<Types.MediaImage, 'mediaContentType'> & {
+    image?: Types.Maybe<{
+        __typename?: 'Image';
+    } & ImageFragmentFragment>;
+};
+export declare type MediaFileFragment_Model3d_Fragment = {
+    __typename?: 'Model3d';
+} & Pick<Types.Model3d, 'mediaContentType'> & Model3DFragmentFragment;
+export declare type MediaFileFragment_Video_Fragment = {
+    __typename?: 'Video';
+} & Pick<Types.Video, 'mediaContentType'> & VideoFragmentFragment;
+export declare type MediaFileFragmentFragment = MediaFileFragment_ExternalVideo_Fragment | MediaFileFragment_MediaImage_Fragment | MediaFileFragment_Model3d_Fragment | MediaFileFragment_Video_Fragment;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export { MediaFile, Props as MediaFileProps } from './MediaFile';

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

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

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

@@ -0,0 +1,8 @@
+import { ElementType, ReactElement } from 'react';
+import { Props } from '../types';
+import { ParsedMetafield } from '../../types';
+export interface MetafieldProps {
+    metafield: ParsedMetafield;
+    children?: (value: ParsedMetafield) => ReactElement;
+}
+export declare function Metafield<TTag extends ElementType>(props: Props<TTag> & MetafieldProps): JSX.Element | null;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useShop } from '../../foundation';
+import { getMeasurementAsString } from '../../utilities';
+import { StarRating } from './components/StarRating';
+import { RawHtml } from '../RawHtml';
+export function Metafield(props) {
+    const { metafield, children, as, ...passthroughProps } = props;
+    const { locale } = useShop();
+    if (metafield.value == null) {
+        console.warn(`No metafield value for ${metafield}`);
+        return null;
+    }
+    if (typeof children === 'function') {
+        return children(metafield);
+    }
+    switch (metafield.type) {
+        case 'date': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'time';
+            return (React.createElement(Wrapper, { ...passthroughProps }, metafield.value.toLocaleDateString(locale)));
+        }
+        case 'date_time': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'time';
+            return (React.createElement(Wrapper, { ...passthroughProps }, metafield.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)));
+        }
+        case 'rating': {
+            return (React.createElement(StarRating, { rating: metafield.value, ...passthroughProps }));
+        }
+        case 'single_line_text_field': {
+            return (React.createElement(RawHtml, { ...passthroughProps, as: as !== null && as !== void 0 ? as : 'span', string: metafield.value }));
+        }
+        case 'multi_line_text_field': {
+            return (React.createElement(RawHtml, { ...passthroughProps, as: as, string: metafield.value.split('\n').join('<br/>') }));
+        }
+        case 'url':
+            return (React.createElement("a", { href: metafield.value, ...passthroughProps }, metafield.value));
+        case 'json':
+            const Wrapper = as !== null && as !== void 0 ? as : 'span';
+            return (React.createElement(Wrapper, { ...passthroughProps }, JSON.stringify(metafield.value)));
+        default: {
+            const Wrapper = as !== null && as !== void 0 ? as : 'span';
+            return (React.createElement(Wrapper, { ...passthroughProps }, metafield.value.toString()));
+        }
+    }
+}

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

@@ -0,0 +1,4 @@
+import * as Types from '../../graphql/types/types';
+export declare type MetafieldFragmentFragment = {
+    __typename?: 'Metafield';
+} & Pick<Types.Metafield, 'id' | 'type' | 'namespace' | 'key' | 'value' | 'createdAt' | 'updatedAt' | 'description'>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+import { ElementType } from 'react';
+import { Props } from '../../../types';
+import { Rating } from '../../../../types';
+export declare const STAR_EMPTY = "\u2606";
+export declare const STAR_FILLED = "\u2605";
+export interface StarRatingProps {
+    rating: Rating;
+}
+export declare function StarRating<TTag extends ElementType>(props: Props<TTag> & StarRatingProps): JSX.Element;
+export declare function Star({ percentFilled }: {
+    percentFilled: Number;
+}): JSX.Element;

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

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+export const STAR_EMPTY = '☆';
+export const STAR_FILLED = '★';
+export function StarRating(props) {
+    const { as, rating, ...passthroughProps } = props;
+    const starsArray = useMemo(() => {
+        const ratingMin = Math.floor(rating.scale_min);
+        const ratingMax = Math.floor(rating.scale_max);
+        const ratingInteger = Math.floor(rating.value);
+        const ratingPercent = (rating.value % 1) * 100;
+        const stars = [];
+        for (let i = ratingMin; i <= ratingMax; i++) {
+            if (i <= ratingInteger) {
+                stars.push(React.createElement(Star, { key: i, percentFilled: 100 }));
+            }
+            else if (i > ratingInteger + 1) {
+                stars.push(React.createElement(Star, { key: i, percentFilled: 0 }));
+            }
+            else {
+                stars.push(React.createElement(Star, { key: i, percentFilled: ratingPercent }));
+            }
+        }
+        return stars;
+    }, [rating.scale_min, rating.scale_max, rating.value]);
+    const Wrapper = as !== null && as !== void 0 ? as : 'div';
+    return React.createElement(Wrapper, { ...passthroughProps }, starsArray);
+}
+export function Star({ percentFilled }) {
+    if (percentFilled === 100) {
+        return React.createElement("span", null, STAR_FILLED);
+    }
+    if (percentFilled === 0) {
+        return React.createElement("span", null, STAR_EMPTY);
+    }
+    return (React.createElement("span", { style: {
+            position: 'relative',
+            display: 'inline-block',
+        } },
+        React.createElement("span", null, STAR_EMPTY),
+        React.createElement("span", { style: {
+                display: 'inline-block',
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                width: `${percentFilled}%`,
+                overflow: 'hidden',
+            } }, STAR_FILLED)));
+}

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

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

package/dist/esnext/components/Metafield/components/StarRating/index.js

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+export { Metafield } from './Metafield.client';
+export { MetafieldType } from './types';
+export { MetafieldFragmentFragment } from './MetafieldFragment';

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

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

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

@@ -0,0 +1,4 @@
+import { Metafield } from '../../graphql/types/types';
+export declare type MetafieldType = Omit<Partial<Metafield>, 'value'> & {
+    value?: string | number | boolean | Date | Record<string, any>;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,25 @@
+import { ReactNode, ElementType } from 'react';
+import { Model3d as Model3DType, Model3dSource, Image } from '../../graphql/types/types';
+import { Props } from '../types';
+export interface Model3DProps {
+    children?: ReactNode;
+    model: {
+        id?: Model3DType['id'];
+        alt: Model3DType['alt'];
+        previewImage?: Pick<Image, 'originalSrc'>;
+        sources: Pick<Model3dSource, 'url'>[];
+    };
+}
+declare type PropsWeControl = 'src' | 'alt' | 'poster';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'model-viewer': any;
+        }
+    }
+}
+export declare function Model3D<TTag extends ElementType = 'div'>(props: Props<TTag, PropsWeControl> & Model3DProps): JSX.Element | null;
+export declare namespace Model3D {
+    var Fragment: string;
+}
+export {};

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

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import { loadScript } from '../../utilities';
+import { Model3DFragment } from '../../graphql/graphql-constants';
+// TODO: Support binding to `model-viewer` events?
+export function Model3D(props) {
+    var _a, _b, _c;
+    const { model, id = model.id, children, ...passthroughProps } = props;
+    const [modelViewerLoaded, setModelViewerLoaded] = useState(false);
+    useEffect(() => {
+        // The ModelViewer library depends on `window` so
+        // we cannot use it server side, so we instead load
+        // it dynamically
+        async function loadModelViewer() {
+            const loaded = await loadScript('https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js', {
+                module: true,
+            });
+            if (!loaded) {
+                console.warn('model-viewer library did not load');
+            }
+            setModelViewerLoaded(true);
+        }
+        loadModelViewer();
+    }, []);
+    if (!modelViewerLoaded) {
+        // TODO: What do we want to display while the model-viewer library loads?
+        return null;
+    }
+    return (React.createElement("model-viewer", { ...passthroughProps, id: id, src: model.sources[0].url, alt: model.alt, "camera-controls": (_a = passthroughProps.cameraControls) !== null && _a !== void 0 ? _a : true, poster: (_b = model.previewImage) === null || _b === void 0 ? void 0 : _b.originalSrc, autoplay: (_c = passthroughProps.autoplay) !== null && _c !== void 0 ? _c : true }, children));
+}
+Model3D.Fragment = Model3DFragment;

package/dist/esnext/components/Model3D/Model3DFragment.d.ts

@@ -0,0 +1,11 @@
+import * as Types from '../../graphql/types/types';
+export declare type Model3DFragmentFragment = {
+    __typename?: 'Model3d';
+} & Pick<Types.Model3d, 'id' | 'alt' | 'mediaContentType'> & {
+    previewImage?: Types.Maybe<{
+        __typename?: 'Image';
+    } & Pick<Types.Image, 'originalSrc'>>;
+    sources: Array<{
+        __typename?: 'Model3dSource';
+    } & Pick<Types.Model3dSource, 'url'>>;
+};

package/dist/esnext/components/Model3D/Model3DFragment.js

@@ -0,0 +1 @@
+export {};

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+import { MoneyV2 } from '../../graphql/types/types';
+export interface MoneyProps {
+    money: MoneyV2;
+}
+export declare function Money<TTag extends ElementType>(props: Props<TTag> & MoneyProps): JSX.Element;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useMoney } from '../../hooks';
+export function Money(props) {
+    const { money, children, as, ...passthroughProps } = props;
+    const moneyObject = useMoney(money);
+    const Wrapper = as !== null && as !== void 0 ? as : 'div';
+    return (React.createElement(Wrapper, { ...passthroughProps }, typeof children === 'function'
+        ? children(moneyObject)
+        : moneyObject.localizedString));
+}

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+export declare function ProductDescription<TTag extends ElementType = 'div'>(props: Props<TTag>): JSX.Element | null;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { RawHtml } from '../RawHtml';
+import { useProduct } from '../ProductProvider';
+export function ProductDescription(props) {
+    const product = useProduct();
+    if (product == null) {
+        throw new Error('Expected a ProductProvider context, but none was found');
+    }
+    return product.descriptionHtml ? (React.createElement(RawHtml, { string: product.descriptionHtml, ...props })) : null;
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+export interface ProductMetafieldProps {
+    keyName: string;
+    namespace: string;
+}
+export declare function ProductMetafield<TTag extends ElementType>(props: Props<TTag> & ProductMetafieldProps): JSX.Element | null;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Metafield } from '../Metafield';
+import { useProduct } from '../ProductProvider';
+export function ProductMetafield(props) {
+    const product = useProduct();
+    if (product == null) {
+        throw new Error('Expected a ProductProvider context, but none was found');
+    }
+    if (product.metafields == null) {
+        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);
+    return field ? React.createElement(Metafield, { metafield: field, ...passthroughProps }) : null;
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+export interface ProductPriceProps {
+    priceType?: 'regular' | 'compareAt';
+    valueType?: 'max' | 'min';
+}
+export declare function ProductPrice<TTag extends ElementType>(props: Props<TTag> & ProductPriceProps): JSX.Element | null;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Money } from '../Money';
+import { useProduct } from '../ProductProvider';
+export function ProductPrice(props) {
+    var _a, _b, _c, _d;
+    const product = useProduct();
+    const { priceType = 'regular', valueType = 'min', ...passthroughProps } = props;
+    if (product == null) {
+        throw new Error('Expected a ProductProvider context, but none was found');
+    }
+    let price;
+    if (priceType === 'compareAt') {
+        if (valueType === 'max') {
+            price = (_a = product.compareAtPriceRange) === null || _a === void 0 ? void 0 : _a.maxVariantPrice;
+        }
+        else {
+            price = (_b = product.compareAtPriceRange) === null || _b === void 0 ? void 0 : _b.minVariantPrice;
+        }
+    }
+    else {
+        if (valueType === 'max') {
+            price = (_c = product.priceRange) === null || _c === void 0 ? void 0 : _c.maxVariantPrice;
+        }
+        else {
+            price = (_d = product.priceRange) === null || _d === void 0 ? void 0 : _d.minVariantPrice;
+        }
+    }
+    if (price == null) {
+        return null;
+    }
+    return (React.createElement(Money, { ...passthroughProps, money: price }, props.children));
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { Product } from './types';
+export declare function ProductProvider({ children, product, initialVariantId, }: {
+    children: ReactNode;
+    product: Product;
+    initialVariantId: string;
+}): JSX.Element;

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

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react';
+import { useProductOptions, useParsedMetafields } from '../../hooks';
+import { flattenConnection } from '../../utilities';
+import { ProductContext } from './context';
+export function ProductProvider({ children, product, initialVariantId, }) {
+    const { variants, options, selectedVariant, setSelectedVariant, selectedOptions, setSelectedOption, setSelectedOptions, isOptionInStock, selectedSellingPlan, selectedSellingPlanAllocation, setSelectedSellingPlan, sellingPlanGroups, } = useProductOptions({
+        // TODO: Fix this type to not need `as any`
+        variants: product.variants,
+        initialVariantId: initialVariantId,
+    });
+    const metafields = useParsedMetafields(product.metafields);
+    const providerValue = useMemo(() => {
+        return {
+            ...product,
+            metafields,
+            metafieldsConnection: product.metafields,
+            media: product.media ? flattenConnection(product.media) : undefined,
+            mediaConnection: product.media,
+            variants: variants,
+            variantsConnection: product.variants,
+            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));
+}

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

@@ -0,0 +1,96 @@
+import * as Types from '../../graphql/types/types';
+import { MediaFileFragment_ExternalVideo_Fragment, MediaFileFragment_MediaImage_Fragment, MediaFileFragment_Model3d_Fragment, MediaFileFragment_Video_Fragment } from '../MediaFile/MediaFileFragment';
+import { MetafieldFragmentFragment } from '../Metafield/MetafieldFragment';
+export declare type ProductProviderFragmentFragment = {
+    __typename?: 'Product';
+} & Pick<Types.Product, 'availableForSale' | 'createdAt' | 'description' | 'descriptionHtml' | 'handle' | 'id' | 'onlineStoreUrl' | 'productType' | 'publishedAt' | 'requiresSellingPlan' | 'tags' | 'title' | 'totalInventory' | 'updatedAt' | 'vendor'> & {
+    compareAtPriceRange: {
+        __typename?: 'ProductPriceRange';
+    } & {
+        maxVariantPrice: {
+            __typename?: 'MoneyV2';
+        } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+        minVariantPrice: {
+            __typename?: 'MoneyV2';
+        } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+    };
+    media: {
+        __typename?: 'MediaConnection';
+    } & {
+        edges: Array<{
+            __typename?: 'MediaEdge';
+        } & {
+            node: ({
+                __typename?: 'ExternalVideo';
+            } & MediaFileFragment_ExternalVideo_Fragment) | ({
+                __typename?: 'MediaImage';
+            } & MediaFileFragment_MediaImage_Fragment) | ({
+                __typename?: 'Model3d';
+            } & MediaFileFragment_Model3d_Fragment) | ({
+                __typename?: 'Video';
+            } & MediaFileFragment_Video_Fragment);
+        }>;
+    };
+    metafields: {
+        __typename?: 'MetafieldConnection';
+    } & {
+        edges: Array<{
+            __typename?: 'MetafieldEdge';
+        } & {
+            node: {
+                __typename?: 'Metafield';
+            } & MetafieldFragmentFragment;
+        }>;
+    };
+    priceRange: {
+        __typename?: 'ProductPriceRange';
+    } & {
+        maxVariantPrice: {
+            __typename?: 'MoneyV2';
+        } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+        minVariantPrice: {
+            __typename?: 'MoneyV2';
+        } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+    };
+    variants: {
+        __typename?: 'ProductVariantConnection';
+    } & {
+        edges: Array<{
+            __typename?: 'ProductVariantEdge';
+        } & {
+            node: {
+                __typename?: 'ProductVariant';
+            } & Pick<Types.ProductVariant, 'id' | 'title' | 'availableForSale'> & {
+                image?: Types.Maybe<{
+                    __typename?: 'Image';
+                } & Pick<Types.Image, 'originalSrc' | 'altText' | 'id'>>;
+                unitPriceMeasurement?: Types.Maybe<{
+                    __typename?: 'UnitPriceMeasurement';
+                } & Pick<Types.UnitPriceMeasurement, 'measuredType' | 'quantityUnit' | 'quantityValue' | 'referenceUnit' | 'referenceValue'>>;
+                unitPrice?: Types.Maybe<{
+                    __typename?: 'MoneyV2';
+                } & Pick<Types.MoneyV2, 'amount' | 'currencyCode'>>;
+                priceV2: {
+                    __typename?: 'MoneyV2';
+                } & Pick<Types.MoneyV2, 'amount' | 'currencyCode'>;
+                compareAtPriceV2?: Types.Maybe<{
+                    __typename?: 'MoneyV2';
+                } & Pick<Types.MoneyV2, 'amount' | 'currencyCode'>>;
+                selectedOptions: Array<{
+                    __typename?: 'SelectedOption';
+                } & Pick<Types.SelectedOption, 'name' | 'value'>>;
+                metafields: {
+                    __typename?: 'MetafieldConnection';
+                } & {
+                    edges: Array<{
+                        __typename?: 'MetafieldEdge';
+                    } & {
+                        node: {
+                            __typename?: 'Metafield';
+                        } & MetafieldFragmentFragment;
+                    }>;
+                };
+            };
+        }>;
+    };
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,13 @@
+import { ProductOptionsHookValue } from '../../hooks';
+import { ParsedMetafield } from '../../types';
+import { ProductProviderFragmentFragment } from './ProductProviderFragment';
+import { Product } from './types';
+export declare const ProductContext: import("react").Context<ProductContextType | null>;
+export declare type ProductContextType = Omit<Product, 'variants' | 'media' | 'metafields'> & Omit<ProductOptionsHookValue, 'variants'> & {
+    media?: ProductProviderFragmentFragment['media']['edges'][0]['node'][];
+    mediaConnection?: ProductProviderFragmentFragment['media'];
+    variants?: ProductProviderFragmentFragment['variants']['edges'][0]['node'][];
+    variantConnection?: ProductProviderFragmentFragment['variants'];
+    metafields?: ParsedMetafield[];
+    metafieldsConnection?: ProductProviderFragmentFragment['metafields'];
+};

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

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

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

@@ -0,0 +1 @@
+export declare function useProduct(): import("./context").ProductContextType | null;

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

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { ProductContext } from './context';
+export function useProduct() {
+    const context = useContext(ProductContext);
+    return context;
+}

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

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