@shopify/hydrogen 0.12.0 → 0.13.2

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

@@ -2,7 +2,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';
+import * as Types from '../../../storefront-api-types';
 export declare type CartAttributesUpdateMutationVariables = Types.Exact<{
     attributes: Array<Types.AttributeInput> | Types.AttributeInput;
     cartId: Types.Scalars['ID'];

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

@@ -2,7 +2,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';
+import * as Types from '../../../storefront-api-types';
 export declare type CartBuyerIdentityUpdateMutationVariables = Types.Exact<{
     cartId: Types.Scalars['ID'];
     buyerIdentity: Types.CartBuyerIdentityInput;

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

@@ -2,7 +2,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';
+import * as Types from '../../../storefront-api-types';
 export declare type CartCreateMutationVariables = Types.Exact<{
     input: Types.CartInput;
     numCartLines?: Types.InputMaybe<Types.Scalars['Int']>;

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

@@ -2,7 +2,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';
+import * as Types from '../../../storefront-api-types';
 export declare type CartDiscountCodesUpdateMutationVariables = Types.Exact<{
     cartId: Types.Scalars['ID'];
     discountCodes?: Types.InputMaybe<Array<Types.Scalars['String']> | Types.Scalars['String']>;

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

@@ -2,7 +2,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';
+import * as Types from '../../../storefront-api-types';
 export declare type CartFragmentFragment = {
     __typename?: 'Cart';
 } & Pick<Types.Cart, 'id' | 'checkoutUrl' | 'note'> & {

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

@@ -2,7 +2,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';
+import * as Types from '../../../storefront-api-types';
 export declare type CartLineAddMutationVariables = Types.Exact<{
     cartId: Types.Scalars['ID'];
     lines: Array<Types.CartLineInput> | Types.CartLineInput;

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

@@ -2,7 +2,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';
+import * as Types from '../../../storefront-api-types';
 export declare type CartLineRemoveMutationVariables = Types.Exact<{
     cartId: Types.Scalars['ID'];
     lines: Array<Types.Scalars['ID']> | Types.Scalars['ID'];

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

@@ -2,7 +2,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';
+import * as Types from '../../../storefront-api-types';
 export declare type CartLineUpdateMutationVariables = Types.Exact<{
     cartId: Types.Scalars['ID'];
     lines: Array<Types.CartLineUpdateInput> | Types.CartLineUpdateInput;

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

@@ -2,7 +2,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';
+import * as Types from '../../../storefront-api-types';
 export declare type CartNoteUpdateMutationVariables = Types.Exact<{
     cartId: Types.Scalars['ID'];
     note?: Types.InputMaybe<Types.Scalars['String']>;

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

@@ -2,7 +2,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';
+import * as Types from '../../../storefront-api-types';
 export declare type CartQueryQueryVariables = Types.Exact<{
     id: Types.Scalars['ID'];
     numCartLines?: Types.InputMaybe<Types.Scalars['Int']>;

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

@@ -1,4 +1,4 @@
-import { CartInput } from '../../graphql/types/types';
+import { CartInput } from '../../storefront-api-types';
 import { Cart } from './types';
 export declare function useCartFetch(): <T, K>({ query, variables, }: {
     query: string;

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useShop } from '../../foundation';
 import { flattenConnection } from '../../utilities';
-import { CartCreate } from '../../graphql/graphql-constants';
+import { CartCreate } from './cart-queries';
 export function useCartFetch() {
     const { storeDomain, storefrontApiVersion, storefrontToken } = useShop();
     return React.useCallback(({ query, variables, }) => {
@@ -9,6 +9,8 @@ export function useCartFetch() {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
+                'X-SDK-Variant': 'hydrogen',
+                'X-SDK-Version': storefrontApiVersion,
                 'X-Shopify-Storefront-Access-Token': storefrontToken,
             },
             body: JSON.stringify({
@@ -47,6 +49,7 @@ export function useInstantCheckout() {
             const dataCart = data.cartCreate.cart;
             updateCart({
                 ...dataCart,
+                // @ts-expect-error While the cart still uses fragments, there will be a TS error here until we remove those fragments and get the type in-line
                 lines: flattenConnection(dataCart.lines),
                 note: (_b = dataCart.note) !== null && _b !== void 0 ? _b : undefined,
             });

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

@@ -1,4 +1,4 @@
-import { CartInput, CartLineInput, CartLineUpdateInput, MutationCartNoteUpdateArgs, CartBuyerIdentityInput, MutationCartAttributesUpdateArgs } from '../../graphql/types/types';
+import { CartInput, CartLineInput, CartLineUpdateInput, MutationCartNoteUpdateArgs, CartBuyerIdentityInput, MutationCartAttributesUpdateArgs } from '../../storefront-api-types';
 import { CartFragmentFragment } from './graphql/CartFragment';
 export declare type Status = State['status'];
 export interface Cart {

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

@@ -1,10 +1,11 @@
 import { YouTube, Vimeo } from '../../utilities';
-import type { ExternalVideoFragmentFragment } from './ExternalVideoFragment';
+import type { ExternalVideo as ExternalVideoType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
 interface ExternalVideoProps {
-    /** An object with the keys `host`, `embedUrl`, and `id`. Refer to the Storefront API's
-     * [`ExternalVideo` type](/api/storefront/reference/products/externalvideo).
+    /**
+     * An object with fields that correspond to the Storefront API's [ExternalVideo object](/api/storefront/reference/products/externalvideo).
      */
-    data: ExternalVideoFragmentFragment;
+    data: PartialDeep<ExternalVideoType>;
     /** 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).
@@ -14,7 +15,7 @@ interface ExternalVideoProps {
 declare type PropsWeControl = 'src';
 /**
  * The `ExternalVideo` component renders an embedded video for the Storefront
- * API's [`ExternalVideo` object](/api/storefront/reference/products/externalvideo).
+ * API's [ExternalVideo object](/api/storefront/reference/products/externalvideo).
  */
 export declare function ExternalVideo(props: Omit<JSX.IntrinsicElements['iframe'], PropsWeControl> & ExternalVideoProps): JSX.Element;
 export {};

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

@@ -2,10 +2,13 @@ import React from 'react';
 import { useEmbeddedVideoUrl } from '../../utilities';
 /**
  * The `ExternalVideo` component renders an embedded video for the Storefront
- * API's [`ExternalVideo` object](/api/storefront/reference/products/externalvideo).
+ * 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;
+    if (!data.embedUrl) {
+        throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);
+    }
     const url = useEmbeddedVideoUrl(data.embedUrl, options);
-    return (React.createElement("iframe", { ...passthroughProps, id: id, frameBorder: frameBorder, allow: allow, allowFullScreen: allowFullScreen, src: url }));
+    return (React.createElement("iframe", { ...passthroughProps, id: id !== null && id !== void 0 ? id : data.embedUrl, frameBorder: frameBorder, allow: allow, allowFullScreen: allowFullScreen, src: url }));
 }

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

@@ -1,26 +1,26 @@
 import React from 'react';
-import { Props } from '../types';
 import { ImageSizeOptions, ImageLoaderOptions } from '../../utilities';
-import type { ImageFragmentFragment } from './ImageFragment';
+import type { Image as ImageType } from '../../storefront-api-types';
+import type { PartialDeep, Merge, MergeExclusive } from 'type-fest';
 export interface BaseImageProps {
     /** A custom function that generates the image URL. Parameters passed into this function includes
      * `src` and an `options` object that contains the provided `width`, `height` and `loaderOptions` values.
      */
     loader?(props: ImageLoaderOptions): string;
     /** An object of `loader` function options. For example, if the `loader` function requires a `scale` option,
-     * then the value can be a property of the `loaderOptions` object (eg. `{scale: 2}`).
+     * then the value can be a property of the `loaderOptions` object (for example, `{scale: 2}`).
      */
     loaderOptions?: ImageLoaderOptions['options'];
 }
-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).
+interface MediaImagePropsBase extends BaseImageProps {
+    /** An object with fields that correspond to the Storefront API's
+     * [Image object](/api/storefront/reference/common-objects/image).
      */
-    data: ImageFragmentFragment;
+    data: PartialDeep<ImageType>;
     /** An object of image size options for Shopify CDN images. */
     options?: ImageSizeOptions;
 }
-interface ExternalImageProps extends BaseImageProps {
+interface ExternalImagePropsBase extends BaseImageProps {
     /** A URL string. This string can be an absolute path or a relative path depending on the `loader`. */
     src: string;
     /** The integer value for the width of the image. This is a required prop when `src` is present. */
@@ -28,11 +28,13 @@ interface ExternalImageProps extends BaseImageProps {
     /** The integer value for the height of the image. This is a required prop when `src` is present. */
     height: number;
 }
-declare type ImageProps = MediaImageProps | ExternalImageProps;
-declare type PropsWeControl = 'src' | 'width' | 'height';
+declare type BaseElementProps = React.ImgHTMLAttributes<HTMLImageElement>;
+declare type MediaImageProps = Merge<BaseElementProps, MediaImagePropsBase>;
+declare type ExternalImageProps = Merge<BaseElementProps, ExternalImagePropsBase>;
+declare type ImageProps = MergeExclusive<MediaImageProps, ExternalImageProps>;
 /**
  * The `Image` component renders an image for the Storefront API's
- * [`Image` object](/api/storefront/reference/common-objects/image).
+ * [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 function Image(props: ImageProps): JSX.Element;
 export {};

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

@@ -1,21 +1,8 @@
 import React from 'react';
 import { shopifyImageLoader, getShopifyImageDimensions, } from '../../utilities';
-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,
-        alt: alt ? alt : altText,
-        width,
-        height,
-        loader: loader ? loader : shopifyImageLoader,
-        loaderOptions: { ...options, ...loaderOptions },
-    };
-}
 /**
  * The `Image` component renders an image for the Storefront API's
- * [`Image` object](/api/storefront/reference/common-objects/image).
+ * [Image object](/api/storefront/reference/common-objects/image).
  */
 export function Image(props) {
     var _a, _b, _c, _d;
@@ -49,3 +36,19 @@ 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 }));
 }
+function convertShopifyImageData({ data, options, loader, loaderOptions, id: propId, alt, }) {
+    const { url: src, altText, id } = data;
+    if (!src) {
+        throw new Error(`<Image/> requires 'data.url' when using the 'data' prop`);
+    }
+    const { width, height } = getShopifyImageDimensions(data, options);
+    return {
+        src,
+        id: propId ? propId : id,
+        alt: alt ? alt : altText,
+        width,
+        height,
+        loader: loader ? loader : shopifyImageLoader,
+        loaderOptions: { ...options, ...loaderOptions },
+    };
+}

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

@@ -1,7 +1,5 @@
 import React from 'react';
-export interface LinkProps
-/** All properties available to an `<a>` element are available. See [anchor element documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes).*/
- extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
     /** The destination URL that the link points to. This is the `href` attribute of the underlying `<a>` element. */
     to: string;
     /** Whether to update the state object or URL of the current history entry. Refer to the [history.replaceState documentation](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState). */
@@ -12,7 +10,8 @@ export interface LinkProps
     reloadDocument?: boolean;
 }
 /**
- * The `Link` component lets users navigate from one page to another.
- * It renders an accessible `<a>` element.
+ * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all
+ * properties available to the `<a>` element are also available to the `Link` component.
+ * For more information, refer to the [`<a>` element documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes).
  */
 export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

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

@@ -1,10 +1,11 @@
 import React, { useCallback } from 'react';
-import { useRouter } from '../../foundation/Router/Router';
+import { useRouter } from '../../foundation/Router/BrowserRouter.client';
 import { createPath } from 'history';
-import { useNavigate } from '../../hooks/useNavigate';
+import { useNavigate } from '../../foundation/useNavigate/useNavigate';
 /**
- * The `Link` component lets users navigate from one page to another.
- * It renders an accessible `<a>` element.
+ * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all
+ * properties available to the `<a>` element are also available to the `Link` component.
+ * For more information, refer to the [`<a>` element documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes).
  */
 export const Link = React.forwardRef(function Link(props, ref) {
     const navigate = useNavigate();

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

@@ -4,7 +4,6 @@ import { useServerState } from '../../foundation/useServerState';
 export default function LocalizationClientProvider({ localization, children, }) {
     const { setServerState } = useServerState();
     const [country, setCountry] = useState(localization.country);
-    const [availableCountries] = useState(localization.availableCountries);
     const setter = useCallback((country) => {
         setCountry(country);
         setServerState('country', country);
@@ -13,8 +12,7 @@ export default function LocalizationClientProvider({ localization, children, })
         return {
             country,
             setCountry: setter,
-            availableCountries,
         };
-    }, [country, setter, availableCountries]);
+    }, [country, setter]);
     return (React.createElement(LocalizationContext.Provider, { value: contextValue }, children));
 }

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

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

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

@@ -12,9 +12,9 @@ export interface LocalizationProviderProps {
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's
  * [`localization`](/api/storefront/reference/common-objects/queryroot) field
- * for the `isoCode` and `name` of the `country` and `availableCountries` and keeps this information in a context.
+ * for the `isoCode` and `name` of the `country` and keeps this information in a context.
  *
- * Any descendents of this provider can use the `useCountry` and `useAvailableCountries` hooks.
+ * Any descendents of this provider can use the `useCountry` hook.
  * The `isoCode` of the `country` can be used in the Storefront API's
  * `@inContext` directive as the `country` value.
  */

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

@@ -1,22 +1,33 @@
 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
- * for the `isoCode` and `name` of the `country` and `availableCountries` and keeps this information in a context.
+ * for the `isoCode` and `name` of the `country` and keeps this information in a context.
  *
- * Any descendents of this provider can use the `useCountry` and `useAvailableCountries` hooks.
+ * Any descendents of this provider can use the `useCountry` hook.
  * The `isoCode` of the `country` can be used in the Storefront API's
  * `@inContext` directive as the `country` value.
  */
 export function LocalizationProvider(props) {
     const { data: { localization }, } = useShopQuery({
-        query: Localization,
+        query: query,
         cache: CacheDays(),
         preload: props.preload,
     });
     return (React.createElement(LocalizationClientProvider, { localization: localization }, props.children));
 }
+const query = `query Localization {
+  localization {
+    country {
+      isoCode
+      name
+      currency {
+        isoCode
+      }
+    }
+  }
+}
+`;

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

@@ -2,7 +2,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';
+import * as Types from '../../storefront-api-types';
 export declare type LocalizationQueryVariables = Types.Exact<{
     [key: string]: never;
 }>;
@@ -19,12 +19,5 @@ export declare type LocalizationQuery = {
                 __typename?: 'Currency';
             } & Pick<Types.Currency, 'isoCode'>;
         };
-        availableCountries: Array<{
-            __typename?: 'Country';
-        } & Pick<Types.Country, 'isoCode' | 'name'> & {
-            currency: {
-                __typename?: 'Currency';
-            } & Pick<Types.Currency, 'isoCode'>;
-        }>;
     };
 };

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

@@ -1,3 +1,2 @@
 export { LocalizationProvider } from './LocalizationProvider.server';
 export { useCountry } from '../../hooks/useCountry/useCountry';
-export { useAvailableCountries } from '../../hooks/useAvailableCountries/useAvailableCountries';

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

@@ -1,3 +1,2 @@
 export { LocalizationProvider } from './LocalizationProvider.server';
 export { useCountry } from '../../hooks/useCountry/useCountry';
-export { useAvailableCountries } from '../../hooks/useAvailableCountries/useAvailableCountries';

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

@@ -2,10 +2,11 @@ import React from 'react';
 import { Image } from '../Image';
 import { Video } from '../Video';
 import { ExternalVideo } from '../ExternalVideo';
-import type { MediaFileFragmentFragment } from './MediaFileFragment';
+import type { MediaEdge as MediaEdgeType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
 export interface MediaFileProps {
-    /** A [Media object](/api/storefront/reference/products/media). */
-    data: MediaFileFragmentFragment;
+    /** An object with fields that correspond to the Storefront API's [Media object](/api/storefront/reference/products/media). */
+    data: PartialDeep<MediaEdgeType['node']>;
     /** The options for the `Image`, `Video`, or `ExternalVideo` components. */
     options?: React.ComponentProps<typeof Image>['options'] | React.ComponentProps<typeof Video>['options'] | React.ComponentProps<typeof ExternalVideo>['options'];
 }

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

@@ -2,7 +2,7 @@ import { ElementType } from 'react';
 import { Props } from '../types';
 import { ParsedMetafield } from '../../types';
 export interface MetafieldProps<TTag> {
-    /** A [Metafield object](/api/storefront/reference/common-objects/metafield) from the Storefront API. */
+    /** An object with fields that correspond to the Storefront API's [Metafield object](/api/storefront/reference/common-objects/metafield). */
     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?: TTag;
@@ -12,6 +12,6 @@ export interface MetafieldProps<TTag> {
  * API's [Metafield object](/api/storefront/reference/common-objects/metafield).
  *
  * Renders a smart default of the
- * Metafield's `value`. For more information, refer to the [Default Output](#default-output) section.
+ * 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;

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

@@ -1,14 +1,13 @@
 import React from 'react';
 import { useShop } from '../../foundation';
 import { getMeasurementAsString } from '../../utilities';
-import { RawHtml } from '../RawHtml';
 import { Image } from '../Image';
 /**
  * The `Metafield` component renders the value of a Storefront
  * API's [Metafield object](/api/storefront/reference/common-objects/metafield).
  *
  * Renders a smart default of the
- * Metafield's `value`. For more information, refer to the [Default Output](#default-output) section.
+ * Metafield's `value`. For more information, refer to the [Default output](#default-output) section.
  */
 export function Metafield(props) {
     var _a;
@@ -38,10 +37,14 @@ export function Metafield(props) {
             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: data.value }));
+            const Wrapper = as !== null && as !== void 0 ? as : 'span';
+            return (React.createElement(Wrapper, { ...passthroughProps, dangerouslySetInnerHTML: { __html: data.value } }));
         }
         case 'multi_line_text_field': {
-            return (React.createElement(RawHtml, { ...passthroughProps, as: as !== null && as !== void 0 ? as : 'span', string: data.value.split('\n').join('<br/>') }));
+            const Wrapper = as !== null && as !== void 0 ? as : 'div';
+            return (React.createElement(Wrapper, { ...passthroughProps, dangerouslySetInnerHTML: {
+                    __html: data.value.split('\n').join('<br/>'),
+                } }));
         }
         case 'url':
             return (React.createElement("a", { href: data.value, ...passthroughProps }, data.value));
@@ -51,7 +54,7 @@ export function Metafield(props) {
         case 'file_reference': {
             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;
+                return ref.image ? (React.createElement(Image, { data: ref.image, ...passthroughProps })) : null;
             }
         }
         default: {

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

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