@shopify/hydrogen 0.11.1 → 0.12.0

package/dist/esnext/components/CartProvider/graphql/CartQuery.d.ts

@@ -1,14 +1,81 @@
+/**
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
+ * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
+ */
 import * as Types from '../../../graphql/types/types';
-import { CartFragmentFragment } from './CartFragment';
 export declare type CartQueryQueryVariables = Types.Exact<{
     id: Types.Scalars['ID'];
-    numCartLines?: Types.Maybe<Types.Scalars['Int']>;
-    country?: Types.Maybe<Types.CountryCode>;
+    numCartLines?: Types.InputMaybe<Types.Scalars['Int']>;
+    country?: Types.InputMaybe<Types.CountryCode>;
 }>;
 export declare type CartQueryQuery = {
     __typename?: 'QueryRoot';
 } & {
     cart?: Types.Maybe<{
         __typename?: 'Cart';
-    } & CartFragmentFragment>;
+    } & Pick<Types.Cart, 'id' | 'checkoutUrl' | 'note'> & {
+        buyerIdentity: {
+            __typename?: 'CartBuyerIdentity';
+        } & Pick<Types.CartBuyerIdentity, 'countryCode' | 'email' | 'phone'> & {
+            customer?: Types.Maybe<{
+                __typename?: 'Customer';
+            } & Pick<Types.Customer, 'id' | 'email' | 'firstName' | 'lastName' | 'displayName'>>;
+        };
+        lines: {
+            __typename?: 'CartLineConnection';
+        } & {
+            edges: Array<{
+                __typename?: 'CartLineEdge';
+            } & {
+                node: {
+                    __typename?: 'CartLine';
+                } & Pick<Types.CartLine, 'id' | 'quantity'> & {
+                    attributes: Array<{
+                        __typename?: 'Attribute';
+                    } & Pick<Types.Attribute, 'key' | 'value'>>;
+                    merchandise: {
+                        __typename?: 'ProductVariant';
+                    } & Pick<Types.ProductVariant, 'id' | 'availableForSale' | 'requiresShipping' | 'title'> & {
+                        compareAtPriceV2?: Types.Maybe<{
+                            __typename?: 'MoneyV2';
+                        } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>>;
+                        priceV2: {
+                            __typename?: 'MoneyV2';
+                        } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+                        image?: Types.Maybe<{
+                            __typename?: 'Image';
+                        } & Pick<Types.Image, 'id' | 'url' | 'altText' | 'width' | 'height'>>;
+                        product: {
+                            __typename?: 'Product';
+                        } & Pick<Types.Product, 'handle' | 'title'>;
+                        selectedOptions: Array<{
+                            __typename?: 'SelectedOption';
+                        } & Pick<Types.SelectedOption, 'name' | 'value'>>;
+                    };
+                };
+            }>;
+        };
+        estimatedCost: {
+            __typename?: 'CartEstimatedCost';
+        } & {
+            subtotalAmount: {
+                __typename?: 'MoneyV2';
+            } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+            totalAmount: {
+                __typename?: 'MoneyV2';
+            } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+            totalDutyAmount?: Types.Maybe<{
+                __typename?: 'MoneyV2';
+            } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>>;
+            totalTaxAmount?: Types.Maybe<{
+                __typename?: 'MoneyV2';
+            } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>>;
+        };
+        attributes: Array<{
+            __typename?: 'Attribute';
+        } & Pick<Types.Attribute, 'key' | 'value'>>;
+        discountCodes: Array<{
+            __typename?: 'CartDiscountCode';
+        } & Pick<Types.CartDiscountCode, 'code' | 'applicable'>>;
+    }>;
 };

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

@@ -1,8 +1,9 @@
-import { ShopPayButtonProps } from '../ShopPayButton';
+import React from 'react';
+import { ShopPayButton } from '../ShopPayButton';
 /**
  * The `CartShopPayButton` component renders a `ShopPayButton` for the items in the cart.
  * It must be a descendent of a `CartProvider` component.
  */
 export declare function CartShopPayButton({ 
 /** A string of classes to apply to the `div` that wraps the `shop-pay-button` web component. */
-className, }: Omit<ShopPayButtonProps, 'variantIds'>): JSX.Element;
+className, }: Omit<React.ComponentProps<typeof ShopPayButton>, 'variantIds'>): JSX.Element;

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

@@ -1,12 +1,10 @@
-import * as React from 'react';
 import { YouTube, Vimeo } from '../../utilities';
-import { Props } from '../types';
-import { ExternalVideo as ExternalVideoType } from '../../graphql/types/types';
-export interface ExternalVideoProps {
-    /** An object with the keys `host`, `embeddedUrl`, and `id`. Refer to the Storefront API's
+import type { ExternalVideoFragmentFragment } from './ExternalVideoFragment';
+interface ExternalVideoProps {
+    /** An object with the keys `host`, `embedUrl`, and `id`. Refer to the Storefront API's
      * [`ExternalVideo` type](/api/storefront/reference/products/externalvideo).
      */
-    data: Pick<ExternalVideoType, 'host' | 'embeddedUrl' | 'id'>;
+    data: ExternalVideoFragmentFragment;
     /** An object containing the options available for either
      * [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or
      * [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters).
@@ -18,9 +16,5 @@ declare type PropsWeControl = 'src';
  * The `ExternalVideo` component renders an embedded video for the Storefront
  * API's [`ExternalVideo` object](/api/storefront/reference/products/externalvideo).
  */
-export declare function ExternalVideo<TTag extends React.ElementType = 'iframe'>(props: Props<TTag, PropsWeControl> & ExternalVideoProps): JSX.Element;
-export declare namespace ExternalVideo {
-    var Fragment: string;
-}
-export declare const ExternalVideoFragment = "fragment ExternalVideoFragment on ExternalVideo {\n  id\n  embeddedUrl\n  host\n}\n\n";
+export declare function ExternalVideo(props: Omit<JSX.IntrinsicElements['iframe'], PropsWeControl> & ExternalVideoProps): JSX.Element;
 export {};

package/dist/esnext/components/ExternalVideo/ExternalVideo.js

@@ -1,14 +1,11 @@
-import * as React from 'react';
+import React from 'react';
 import { useEmbeddedVideoUrl } from '../../utilities';
-import { ExternalVideoFragment as Fragment } from '../../graphql/graphql-constants';
 /**
  * The `ExternalVideo` component renders an embedded video for the Storefront
  * API's [`ExternalVideo` object](/api/storefront/reference/products/externalvideo).
  */
 export function ExternalVideo(props) {
     const { data, options, id = data.id, frameBorder = '0', allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture', allowFullScreen = true, ...passthroughProps } = props;
-    const url = useEmbeddedVideoUrl(data.embeddedUrl, options);
+    const url = useEmbeddedVideoUrl(data.embedUrl, options);
     return (React.createElement("iframe", { ...passthroughProps, id: id, frameBorder: frameBorder, allow: allow, allowFullScreen: allowFullScreen, src: url }));
 }
-ExternalVideo.Fragment = Fragment;
-export const ExternalVideoFragment = Fragment;

package/dist/esnext/components/ExternalVideo/ExternalVideoFragment.d.ts

@@ -1,4 +1,8 @@
+/**
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
+ * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
+ */
 import * as Types from '../../graphql/types/types';
 export declare type ExternalVideoFragmentFragment = {
     __typename?: 'ExternalVideo';
-} & Pick<Types.ExternalVideo, 'id' | 'embeddedUrl' | 'host'>;
+} & Pick<Types.ExternalVideo, 'id' | 'embedUrl' | 'host'>;

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

@@ -1 +1 @@
-export { ExternalVideo, ExternalVideoProps, ExternalVideoFragment, } from './ExternalVideo';
+export { ExternalVideo } from './ExternalVideo';

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

@@ -1 +1 @@
-export { ExternalVideo, ExternalVideoFragment, } from './ExternalVideo';
+export { ExternalVideo } from './ExternalVideo';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Props } from '../types';
 import { ImageSizeOptions, ImageLoaderOptions } from '../../utilities';
-import { Image as ImageType } from '../../graphql/types/types';
+import type { ImageFragmentFragment } from './ImageFragment';
 export interface BaseImageProps {
     /** A custom function that generates the image URL. Parameters passed into this function includes
      * `src` and an `options` object that contains the provided `width`, `height` and `loaderOptions` values.
@@ -12,15 +12,15 @@ export interface BaseImageProps {
      */
     loaderOptions?: ImageLoaderOptions['options'];
 }
-export interface MediaImageProps extends BaseImageProps {
+interface MediaImageProps extends BaseImageProps {
     /** An object with the keys `url`, `altText`, `id`, `width` and `height`. Refer to the
      * Storefront API's [`Image` object](/api/storefront/reference/common-objects/image).
      */
-    data: Pick<ImageType, 'altText' | 'url' | 'id' | 'width' | 'height'>;
+    data: ImageFragmentFragment;
     /** An object of image size options for Shopify CDN images. */
     options?: ImageSizeOptions;
 }
-export interface ExternalImageProps extends BaseImageProps {
+interface ExternalImageProps extends BaseImageProps {
     /** A URL string. This string can be an absolute path or a relative path depending on the `loader`. */
     src: string;
     /** The integer value for the width of the image. This is a required prop when `src` is present. */
@@ -28,15 +28,11 @@ export interface ExternalImageProps extends BaseImageProps {
     /** The integer value for the height of the image. This is a required prop when `src` is present. */
     height: number;
 }
-export declare type ImageProps = MediaImageProps | ExternalImageProps;
+declare type ImageProps = MediaImageProps | ExternalImageProps;
 declare type PropsWeControl = 'src' | 'width' | 'height';
 /**
  * The `Image` component renders an image for the Storefront API's
  * [`Image` object](/api/storefront/reference/common-objects/image).
  */
 export declare function Image<TTag extends React.ElementType = 'img'>(props: Props<TTag, PropsWeControl> & ImageProps): JSX.Element;
-export declare namespace Image {
-    var Fragment: string;
-}
-export declare const ImageFragment = "fragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n\n";
 export {};

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { ImageFragment as Fragment } from '../../graphql/graphql-constants';
 import { shopifyImageLoader, getShopifyImageDimensions, } from '../../utilities';
 function convertShopifyImageData({ data, options, loader, loaderOptions, id: propId, alt, }) {
     const { url: src, altText, id } = data;
@@ -50,5 +49,3 @@ export function Image(props) {
         : imgProps.src;
     return (React.createElement("img", { id: (_a = imgProps.id) !== null && _a !== void 0 ? _a : '', loading: "lazy", alt: (_b = imgProps.alt) !== null && _b !== void 0 ? _b : '', ...passthroughProps, src: srcPath, width: (_c = imgProps.width) !== null && _c !== void 0 ? _c : undefined, height: (_d = imgProps.height) !== null && _d !== void 0 ? _d : undefined }));
 }
-Image.Fragment = Fragment;
-export const ImageFragment = Fragment;

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

@@ -1,3 +1,7 @@
+/**
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
+ * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
+ */
 import * as Types from '../../graphql/types/types';
 export declare type ImageFragmentFragment = {
     __typename?: 'Image';

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

@@ -1 +1 @@
-export { Image, ImageProps, ImageFragment, MediaImageProps } from './Image';
+export { Image } from './Image';

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

@@ -1 +1 @@
-export { Image, ImageFragment } from './Image';
+export { Image } from './Image';

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

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { useRouter } from '../Router';
+import { useRouter } from '../../foundation/Router/Router';
 import { createPath } from 'history';
 import { useNavigate } from '../../hooks/useNavigate';
 /**

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

@@ -1,6 +1,5 @@
-import { ReactNode, ElementType } from 'react';
+import { ReactNode } from 'react';
 import { PreloadOptions } from '../../types';
-import { Props } from '../types';
 export interface LocalizationProviderProps {
     /** A `ReactNode` element. */
     children: ReactNode;
@@ -19,4 +18,4 @@ export interface LocalizationProviderProps {
  * The `isoCode` of the `country` can be used in the Storefront API's
  * `@inContext` directive as the `country` value.
  */
-export declare function LocalizationProvider<TTag extends ElementType>(props: Props<TTag> & LocalizationProviderProps): JSX.Element;
+export declare function LocalizationProvider(props: LocalizationProviderProps): JSX.Element;

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

@@ -1,3 +1,7 @@
+/**
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
+ * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
+ */
 import * as Types from '../../graphql/types/types';
 export declare type LocalizationQueryVariables = Types.Exact<{
     [key: string]: never;

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

@@ -1,20 +1,13 @@
-import { MediaImageProps } from '../Image';
-import { VideoProps } from '../Video';
-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 & {
-    image: MediaImageProps['data'];
-};
-declare type ModelViewerMedia = Media & ModelViewerProps['data'];
-declare type ExternalVideoMedia = Media & ExternalVideoProps['data'];
-declare type VideoMedia = Media & VideoProps['data'];
+import React from 'react';
+import { Image } from '../Image';
+import { Video } from '../Video';
+import { ExternalVideo } from '../ExternalVideo';
+import type { MediaFileFragmentFragment } from './MediaFileFragment';
 export interface MediaFileProps {
     /** A [Media object](/api/storefront/reference/products/media). */
-    data: MediaImageMedia | ModelViewerMedia | ExternalVideoMedia | VideoMedia;
-    /** The options for the `Image`, `Video`, `ExternalVideo`, or `ModelViewer` components. */
-    options?: VideoProps['options'] | ExternalVideoProps['options'];
+    data: MediaFileFragmentFragment;
+    /** The options for the `Image`, `Video`, or `ExternalVideo` components. */
+    options?: React.ComponentProps<typeof Image>['options'] | React.ComponentProps<typeof Video>['options'] | React.ComponentProps<typeof ExternalVideo>['options'];
 }
 /**
  * The `MediaFile` component renders the media for the Storefront API's
@@ -23,8 +16,3 @@ export interface MediaFileProps {
  * `media` provided as a prop.
  */
 export declare function MediaFile({ data, options, ...passthroughProps }: MediaFileProps): JSX.Element | null;
-export declare namespace MediaFile {
-    var Fragment: string;
-}
-export declare const MediaFileFragment = "\nfragment MediaFileFragment on Media {\n  ... on MediaImage {\n    mediaContentType\n    image {\n      ...ImageFragment\n    }\n  }\n  ... on Video {\n    mediaContentType\n    ...VideoFragment\n  }\n  ... on ExternalVideo {\n    mediaContentType\n    ...ExternalVideoFragment\n  }\n  ... on Model3d {\n    mediaContentType\n    ...Model3DFragment\n  }\n}\n\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n\nfragment VideoFragment on Video {\n  id\n  previewImage {\n    url\n  }\n  sources {\n    mimeType\n    url\n  }\n}\n\nfragment ExternalVideoFragment on ExternalVideo {\n  id\n  embeddedUrl\n  host\n}\n\nfragment Model3DFragment on Model3d {\n  id\n  alt\n  mediaContentType\n  previewImage {\n    url\n  }\n  sources {\n    url\n  }\n}\n";
-export {};

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

@@ -1,9 +1,8 @@
-import * as React from 'react';
+import React from 'react';
 import { Image } from '../Image';
 import { Video } from '../Video';
 import { ExternalVideo } from '../ExternalVideo';
 import { ModelViewer } from '../ModelViewer';
-import { MediaFileFragment as Fragment } from '../../graphql/graphql-constants';
 /**
  * The `MediaFile` component renders the media for the Storefront API's
  * [Media object](/api/storefront/reference/products/media). It renders an `Image`, a
@@ -13,7 +12,12 @@ import { MediaFileFragment as Fragment } from '../../graphql/graphql-constants';
 export function MediaFile({ data, options, ...passthroughProps }) {
     switch (data.mediaContentType) {
         case 'IMAGE': {
-            return (React.createElement(Image, { ...passthroughProps, data: data.image, options: options }));
+            const dataImage = data.image;
+            if (!dataImage) {
+                console.warn(`No "image" property was found on the "data" prop for <MediaFile/>, for the "type='image'"`);
+                return null;
+            }
+            return (React.createElement(Image, { ...passthroughProps, data: dataImage, options: options }));
         }
         case 'VIDEO':
             return (React.createElement(Video, { ...passthroughProps, data: data, options: options }));
@@ -25,5 +29,3 @@ export function MediaFile({ data, options, ...passthroughProps }) {
             return null;
     }
 }
-MediaFile.Fragment = Fragment;
-export const MediaFileFragment = Fragment;

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

@@ -1,22 +1,36 @@
+/**
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
+ * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
+ */
 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 '../ModelViewer/Model3DFragment';
 export declare type MediaFileFragment_ExternalVideo_Fragment = {
     __typename?: 'ExternalVideo';
-} & Pick<Types.ExternalVideo, 'mediaContentType'> & ExternalVideoFragmentFragment;
+} & Pick<Types.ExternalVideo, 'mediaContentType' | 'id' | 'embedUrl' | 'host'>;
 export declare type MediaFileFragment_MediaImage_Fragment = {
     __typename?: 'MediaImage';
 } & Pick<Types.MediaImage, 'mediaContentType'> & {
     image?: Types.Maybe<{
         __typename?: 'Image';
-    } & ImageFragmentFragment>;
+    } & Pick<Types.Image, 'id' | 'url' | 'altText' | 'width' | 'height'>>;
 };
 export declare type MediaFileFragment_Model3d_Fragment = {
     __typename?: 'Model3d';
-} & Pick<Types.Model3d, 'mediaContentType'> & Model3DFragmentFragment;
+} & Pick<Types.Model3d, 'mediaContentType' | 'id' | 'alt'> & {
+    previewImage?: Types.Maybe<{
+        __typename?: 'Image';
+    } & Pick<Types.Image, 'url'>>;
+    sources: Array<{
+        __typename?: 'Model3dSource';
+    } & Pick<Types.Model3dSource, 'url'>>;
+};
 export declare type MediaFileFragment_Video_Fragment = {
     __typename?: 'Video';
-} & Pick<Types.Video, 'mediaContentType'> & VideoFragmentFragment;
+} & Pick<Types.Video, 'mediaContentType' | 'id'> & {
+    previewImage?: Types.Maybe<{
+        __typename?: 'Image';
+    } & Pick<Types.Image, 'url'>>;
+    sources: Array<{
+        __typename?: 'VideoSource';
+    } & Pick<Types.VideoSource, 'mimeType' | 'url'>>;
+};
 export declare type MediaFileFragmentFragment = MediaFileFragment_ExternalVideo_Fragment | MediaFileFragment_MediaImage_Fragment | MediaFileFragment_Model3d_Fragment | MediaFileFragment_Video_Fragment;

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

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

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

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

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

@@ -15,7 +15,3 @@ export interface MetafieldProps<TTag> {
  * Metafield's `value`. For more information, refer to the [Default Output](#default-output) section.
  */
 export declare function Metafield<TTag extends ElementType>(props: Props<TTag> & MetafieldProps<TTag>): JSX.Element | null;
-export declare namespace Metafield {
-    var Fragment: string;
-}
-export declare const MetafieldFragment = "\nfragment MetafieldFragment on Metafield {\n  id\n  type\n  namespace\n  key\n  value\n  createdAt\n  updatedAt\n  description\n  reference @include(if: $includeReferenceMetafieldDetails) {\n    __typename\n    ... on MediaImage {\n      id\n      mediaContentType\n      image {\n        ...ImageFragment\n      }\n    }\n  }\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { useShop } from '../../foundation';
 import { getMeasurementAsString } from '../../utilities';
 import { RawHtml } from '../RawHtml';
-import { MetafieldFragment as Fragment } from '../../graphql/graphql-constants';
 import { Image } from '../Image';
 /**
  * The `Metafield` component renders the value of a Storefront
@@ -61,5 +60,3 @@ export function Metafield(props) {
         }
     }
 }
-Metafield.Fragment = Fragment;
-export const MetafieldFragment = Fragment;

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

@@ -1,5 +1,8 @@
+/**
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
+ * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
+ */
 import * as Types from '../../graphql/types/types';
-import { ImageFragmentFragment } from '../Image/ImageFragment';
 export declare type MetafieldFragmentFragment = {
     __typename?: 'Metafield';
 } & Pick<Types.Metafield, 'id' | 'type' | 'namespace' | 'key' | 'value' | 'createdAt' | 'updatedAt' | 'description'> & {
@@ -8,7 +11,7 @@ export declare type MetafieldFragmentFragment = {
     } & Pick<Types.MediaImage, 'id' | 'mediaContentType'> & {
         image?: Types.Maybe<{
             __typename?: 'Image';
-        } & ImageFragmentFragment>;
+        } & Pick<Types.Image, 'id' | 'url' | 'altText' | 'width' | 'height'>>;
     }) | {
         __typename: 'Page';
     } | {

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

@@ -1,5 +1,3 @@
-import { ElementType } from 'react';
-import { Props } from '../../../types';
 import { Rating } from '../../../../types';
 export declare const STAR_EMPTY = "\u2606";
 export declare const STAR_FILLED = "\u2605";
@@ -8,7 +6,7 @@ export interface StarRatingProps<TTag> {
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
     as?: TTag;
 }
-export declare function StarRating<TTag extends ElementType>(props: Props<TTag> & StarRatingProps<TTag>): JSX.Element;
+export declare function StarRating<TTag extends keyof JSX.IntrinsicElements = 'div'>(props: JSX.IntrinsicElements[TTag] & StarRatingProps<TTag>): JSX.Element;
 export declare function Star({ percentFilled }: {
     percentFilled: number;
 }): JSX.Element;

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

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

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

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

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

@@ -1,3 +1,7 @@
+/**
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
+ * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
+ */
 import * as Types from '../../graphql/types/types';
 export declare type Model3DFragmentFragment = {
     __typename?: 'Model3d';

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

@@ -1,16 +1,11 @@
 import { ReactNode, ElementType } from 'react';
-import { Model3d as Model3DType, Model3dSource, Image } from '../../graphql/types/types';
 import { Props } from '../types';
-export interface ModelViewerProps {
+import type { Model3DFragmentFragment } from './Model3DFragment';
+interface ModelViewerProps {
     /** Any ReactNode elements. */
     children?: ReactNode;
     /** An object with the same fields as the [GraphQL fragment](#graphql-fragment). */
-    data: {
-        id?: Model3DType['id'];
-        alt: Model3DType['alt'];
-        previewImage?: Pick<Image, 'url'>;
-        sources: Pick<Model3dSource, 'url'>[];
-    };
+    data: Model3DFragmentFragment;
     /** A string of either `auto`, `lazy`, or `eager` to indicate the conditions for preloading. Refer to [`loading` in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-attributes-loading). */
     loading?: 'auto' | 'lazy' | 'eager';
     /** A url to display an image instead of the model, useful for showing the user something before a model is loaded and ready to render. If none is provided, [Model3d.previewImage](https://shopify.dev/api/storefront/reference/products/model3d#previewimage-2021-10) is used. Refer to [`poster` in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-attributes-poster). */
@@ -129,8 +124,4 @@ declare global {
  * the Storefront API's [`Model3d` object](/api/storefront/reference/products/model3d).
  */
 export declare function ModelViewer<TTag extends ElementType>(props: Props<TTag, PropsWeControl> & ModelViewerProps): JSX.Element | null;
-export declare namespace ModelViewer {
-    var Fragment: string;
-}
-export declare const Model3DFragment = "fragment Model3DFragment on Model3d {\n  id\n  alt\n  mediaContentType\n  previewImage {\n    url\n  }\n  sources {\n    url\n  }\n}\n\n";
 export {};

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

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useCallback, } from 'react';
 import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript';
-import { Model3DFragment as Fragment } from '../../graphql/graphql-constants';
 /**
  * The `ModelViewer` component renders a 3D model (with the `model-viewer` tag) for
  * the Storefront API's [`Model3d` object](/api/storefront/reference/products/model3d).
@@ -98,5 +97,3 @@ export function ModelViewer(props) {
     }
     return (React.createElement("model-viewer", { ref: callbackRef, ...passthroughProps, class: className, id: id, src: model.sources[0].url, alt: model.alt, "camera-controls": (_a = passthroughProps.cameraControls) !== null && _a !== void 0 ? _a : true, poster: passthroughProps.poster || ((_b = model.previewImage) === null || _b === void 0 ? void 0 : _b.url), autoplay: (_c = passthroughProps.autoplay) !== null && _c !== void 0 ? _c : true, loading: passthroughProps.loading, reveal: passthroughProps.reveal, ar: passthroughProps.ar, "ar-modes": passthroughProps.arModes, "ar-scale": passthroughProps.arScale, "ar-placement": passthroughProps.arPlacement, "ios-src": passthroughProps.iosSrc, "touch-action": passthroughProps.touchAction, "disable-zoom": passthroughProps.disableZoom, "orbit-sensitivity": passthroughProps.orbitSensitivity, "auto-rotate": passthroughProps.autoRotate, "auto-rotate-delay": passthroughProps.autoRotateDelay, "rotation-per-second": passthroughProps.rotationPerSecond, "interaction-policy": passthroughProps.interactionPolicy, "interaction-prompt": passthroughProps.interactionPrompt, "interaction-prompt-style": passthroughProps.interactionPromptStyle, "interaction-prompt-threshold": passthroughProps.interactionPromptThreshold, "camera-orbit": passthroughProps.cameraOrbit, "camera-target": passthroughProps.cameraTarget, "field-of-view": passthroughProps.fieldOfView, "max-camera-orbit": passthroughProps.maxCameraOrbit, "min-camera-orbit": passthroughProps.minCameraOrbit, "max-field-of-view": passthroughProps.maxFieldOfView, "min-field-of-view": passthroughProps.minFieldOfView, bounds: passthroughProps.bounds, "interpolation-decay": (_d = passthroughProps.interpolationDecay) !== null && _d !== void 0 ? _d : 100, "skybox-image": passthroughProps.skyboxImage, "environment-image": passthroughProps.environmentImage, exposure: passthroughProps.exposure, "shadow-intensity": (_e = passthroughProps.shadowIntensity) !== null && _e !== void 0 ? _e : 0, "shadow-softness": (_f = passthroughProps.shadowSoftness) !== null && _f !== void 0 ? _f : 0, "animation-name": passthroughProps.animationName, "animation-crossfade-duration": passthroughProps.animationCrossfadeDuration, "variant-name": passthroughProps.variantName, orientation: passthroughProps.orientation, scale: passthroughProps.scale }, children));
 }
-ModelViewer.Fragment = Fragment;
-export const Model3DFragment = Fragment;

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

@@ -1 +1 @@
-export { ModelViewer, ModelViewerProps } from './ModelViewer.client';
+export { ModelViewer } from './ModelViewer.client';

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

@@ -1,19 +1,14 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
-import { MoneyV2 } from '../../graphql/types/types';
-export interface MoneyProps<TTag> {
+import type { MoneyFragmentFragment } from './MoneyFragment';
+interface MoneyProps<TTag> {
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
     as?: TTag;
     /** A [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2). */
-    data: MoneyV2;
+    data: MoneyFragmentFragment;
 }
 /**
  * The `Money` component renders a string of the Storefront API's
  * [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) according to the
  * `defaultLocale` in the `shopify.config.js` file.
  */
-export declare function Money<TTag extends ElementType>(props: Props<TTag> & MoneyProps<TTag>): JSX.Element;
-export declare namespace Money {
-    var Fragment: string;
-}
-export declare const MoneyFragment = "fragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\n";
+export declare function Money<TTag extends keyof JSX.IntrinsicElements = 'div'>(props: JSX.IntrinsicElements[TTag] & MoneyProps<TTag>): JSX.Element;
+export {};

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useMoney } from '../../hooks';
-import { MoneyFragment as Fragment } from '../../graphql/graphql-constants';
 /**
  * The `Money` component renders a string of the Storefront API's
  * [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) according to the
@@ -12,5 +11,3 @@ export function Money(props) {
     const Wrapper = as !== null && as !== void 0 ? as : 'div';
     return React.createElement(Wrapper, { ...passthroughProps }, moneyObject.localizedString);
 }
-Money.Fragment = Fragment;
-export const MoneyFragment = Fragment;

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

@@ -1,3 +1,7 @@
+/**
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
+ * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
+ */
 import * as Types from '../../graphql/types/types';
 export declare type MoneyFragmentFragment = {
     __typename?: 'MoneyV2';

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

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

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

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

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

@@ -1,8 +1,8 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
+import React from 'react';
+import { RawHtml } from '../RawHtml';
 /**
  * The `ProductDescription` component renders a `RawHtml` component with
  * the product's [`descriptionHtml`](/api/storefront/reference/products/product).
  * It must be a descendent of the `ProductProvider` component.
  */
-export declare function ProductDescription<TTag extends ElementType = 'div'>(props: Props<TTag>): JSX.Element | null;
+export declare function ProductDescription(props: Omit<React.ComponentProps<typeof RawHtml>, 'string'>): JSX.Element | null;

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

@@ -1,7 +1,7 @@
-import { ElementType } from 'react';
-import { MoneyProps } from '../Money';
-import { Props } from '../types';
-export interface ProductPriceProps<TTag> extends Omit<MoneyProps<TTag>, 'data'> {
+import React from 'react';
+import { Money } from '../Money';
+import { UnitPrice } from '../UnitPrice';
+export interface ProductPriceProps {
     /** The type of price. Valid values: `regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
     /** The type of value. Valid values: `min` (default), `max` or `unit`. */
@@ -13,4 +13,4 @@ export interface ProductPriceProps<TTag> extends Omit<MoneyProps<TTag>, 'data'>
  * 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 declare function ProductPrice<TTag extends ElementType>(props: Props<TTag> & ProductPriceProps<TTag>): JSX.Element | null;
+export declare function ProductPrice<TTag extends keyof JSX.IntrinsicElements>(props: (Omit<React.ComponentProps<typeof UnitPrice>, 'data' | 'measurement'> | Omit<React.ComponentProps<typeof Money>, 'data'>) & ProductPriceProps): JSX.Element | null;