@shopify/hydrogen-react 2026.4.1 → 2026.4.2

package/dist/browser-prod/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","sources":["../../src/Image.tsx"],"sourcesContent":["/* eslint-disable eslint-comments/disable-enable-pair */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport * as React from 'react';\nimport type {PartialDeep} from 'type-fest';\nimport type {Image as ImageType} from './storefront-api-types.js';\n\n/*\n * An optional prop you can use to change the\n * default srcSet generation behaviour\n */\ntype SrcSetOptions = {\n  /** The number of sizes to generate */\n  intervals: number;\n  /** The smallest image size */\n  startingWidth: number;\n  /** The increment by which to increase for each size, in pixels */\n  incrementSize: number;\n  /** The size used for placeholder fallback images */\n  placeholderWidth: number;\n};\n\ntype NormalizedProps = {\n  alt: string;\n  aspectRatio: string | undefined;\n  height: string;\n  src: string | undefined;\n  width: string;\n};\n\nexport type LoaderParams = {\n  /** The base URL of the image */\n  src?: ImageType['url'];\n  /** The URL param that controls width */\n  width?: number;\n  /** The URL param that controls height */\n  height?: number;\n  /** The URL param that controls the cropping region */\n  crop?: Crop;\n};\n\nexport type Loader = (params: LoaderParams) => string;\n\n/*\n * @TODO: Expand to include focal point support; and/or switch this to be an SF API type\n */\ntype Crop = 'center' | 'top' | 'bottom' | 'left' | 'right';\n\n/** @publicDocs */\nexport type HydrogenImageProps = React.ComponentPropsWithRef<'img'> &\n  HydrogenImageBaseProps;\n\ntype HydrogenImageBaseProps = {\n  /** The aspect ratio of the image, in the format of `width/height`.\n   *\n   * @example\n   * ```\n   * <Image data={productImage} aspectRatio=\"4/5\" />\n   * ```\n   */\n  aspectRatio?: string;\n  /** The crop position of the image.\n   *\n   * @remarks\n   * In the event that AspectRatio is set, without specifying a crop,\n   * the Shopify CDN won't return the expected image.\n   *\n   * @defaultValue `center`\n   */\n  crop?: Crop;\n  /** Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2026-04/objects/Image) object. Must be an Image object.\n   *\n   * @example\n   * ```\n   * import {IMAGE_FRAGMENT, Image} from '@shopify/hydrogen';\n   *\n   * export const IMAGE_QUERY = `#graphql\n   * ${IMAGE_FRAGMENT}\n   * query {\n   *   product {\n   *     featuredImage {\n   *       ...Image\n   *     }\n   *   }\n   * }`\n   *\n   * <Image\n   *   data={productImage}\n   *   sizes=\"(min-width: 45em) 50vw, 100vw\"\n   *   aspectRatio=\"4/5\"\n   * />\n   * ```\n   *\n   * Image: {@link https://shopify.dev/api/storefront/reference/common-objects/image}\n   */\n  data?: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A function that returns a URL string for an image.\n   *\n   * @remarks\n   * By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide\n   * your own function to use a another provider, as long as they support URL based image transformations.\n   */\n  loader?: Loader;\n  /** An optional prop you can use to change the default srcSet generation behaviour */\n  srcSetOptions?: SrcSetOptions;\n};\n\n/**\n * A Storefront API GraphQL fragment that can be used to query for an image.\n */\nexport const IMAGE_FRAGMENT = `#graphql\n  fragment Image on Image {\n    altText\n    url\n    width\n    height\n  }\n`;\n\n/**\n * Hydrogen’s Image component is a wrapper around the HTML image element.\n * It supports the same props as the HTML `img` element, but automatically\n * generates the srcSet and sizes attributes for you. For most use cases,\n * you’ll want to set the `aspectRatio` prop to ensure the image is sized\n * correctly.\n *\n * @remarks\n * - `decoding` is set to `async` by default.\n * - `loading` is set to `lazy` by default.\n * - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop\n * - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop\n *\n * @example\n * A responsive image with a 4:5 aspect ratio:\n * ```\n * <Image\n *   data={product.featuredImage}\n *   aspectRatio=\"4/5\"\n *   sizes=\"(min-width: 45em) 40vw, 100vw\"\n * />\n * ```\n * @example\n * A fixed size image:\n * ```\n * <Image\n *   data={product.featuredImage}\n *   width={100}\n *   height={100}\n * />\n * ```\n *\n * {@link https://shopify.dev/docs/api/hydrogen-react/components/image}\n * @publicDocs\n */\nexport const Image = React.forwardRef<HTMLImageElement, HydrogenImageProps>(\n  (\n    {\n      alt,\n      aspectRatio,\n      crop = 'center',\n      data,\n      decoding = 'async',\n      height = 'auto',\n      loader = shopifyLoader,\n      loading = 'lazy',\n      sizes,\n      src,\n      srcSetOptions = {\n        intervals: 15,\n        startingWidth: 200,\n        incrementSize: 200,\n        placeholderWidth: 100,\n      },\n      width = '100%',\n      ...passthroughProps\n    },\n    ref,\n  ) => {\n    /*\n     * Gets normalized values for width, height from data  prop\n     */\n    const normalizedData = React.useMemo(() => {\n      /* Only use data width if height is also set */\n      const dataWidth: number | undefined =\n        data?.width && data?.height ? data?.width : undefined;\n\n      const dataHeight: number | undefined =\n        data?.width && data?.height ? data?.height : undefined;\n\n      return {\n        width: dataWidth,\n        height: dataHeight,\n        unitsMatch: Boolean(unitsMatch(dataWidth, dataHeight)),\n      };\n    }, [data]);\n\n    /*\n     * Gets normalized values for width, height, src, alt, and aspectRatio props\n     * supporting the presence of `data` in addition to flat props.\n     */\n    const normalizedProps = React.useMemo(() => {\n      const nWidthProp: string | number = width || '100%';\n      const widthParts = getUnitValueParts(nWidthProp.toString());\n      const nWidth = `${widthParts.number}${widthParts.unit}`;\n\n      const autoHeight = height === undefined || height === null;\n      const heightParts = autoHeight\n        ? null\n        : getUnitValueParts(height.toString());\n\n      const fixedHeight = heightParts\n        ? `${heightParts.number}${heightParts.unit}`\n        : '';\n\n      const nHeight = autoHeight ? 'auto' : fixedHeight;\n\n      const nSrc: string | undefined = src || data?.url;\n\n      if (__HYDROGEN_DEV__ && !nSrc) {\n        console.warn(\n          `No src or data.url provided to Image component.`,\n          passthroughProps?.key || '',\n        );\n      }\n\n      const nAlt: string = data?.altText && !alt ? data?.altText : alt || '';\n\n      const nAspectRatio: string | undefined = aspectRatio\n        ? aspectRatio\n        : normalizedData.unitsMatch\n          ? [\n              getNormalizedFixedUnit(normalizedData.width),\n              getNormalizedFixedUnit(normalizedData.height),\n            ].join('/')\n          : undefined;\n\n      return {\n        width: nWidth,\n        height: nHeight,\n        src: nSrc,\n        alt: nAlt,\n        aspectRatio: nAspectRatio,\n      };\n    }, [\n      width,\n      height,\n      src,\n      data,\n      alt,\n      aspectRatio,\n      normalizedData,\n      passthroughProps?.key,\n    ]);\n\n    const {intervals, startingWidth, incrementSize, placeholderWidth} =\n      srcSetOptions;\n\n    /*\n     * This function creates an array of widths to be used in srcSet\n     */\n    const imageWidths = React.useMemo(() => {\n      return generateImageWidths(\n        width,\n        intervals,\n        startingWidth,\n        incrementSize,\n      );\n    }, [width, intervals, startingWidth, incrementSize]);\n\n    const fixedWidth = isFixedWidth(normalizedProps.width);\n\n    if (__HYDROGEN_DEV__ && !sizes && !fixedWidth) {\n      console.warn(\n        [\n          'No sizes prop provided to Image component,',\n          'you may be loading unnecessarily large images.',\n          `Image used is ${\n            src || data?.url || passthroughProps?.key || 'unknown'\n          }`,\n        ].join(' '),\n      );\n    }\n\n    /*\n     * We check to see whether the image is fixed width or not,\n     * if fixed, we still provide a srcSet, but only to account for\n     * different pixel densities.\n     */\n    if (fixedWidth) {\n      return (\n        <FixedWidthImage\n          aspectRatio={aspectRatio}\n          crop={crop}\n          decoding={decoding}\n          height={height}\n          imageWidths={imageWidths}\n          loader={loader}\n          loading={loading}\n          normalizedProps={normalizedProps}\n          passthroughProps={passthroughProps}\n          ref={ref}\n          width={width}\n          data={data}\n        />\n      );\n    } else {\n      return (\n        <FluidImage\n          aspectRatio={aspectRatio}\n          crop={crop}\n          decoding={decoding}\n          imageWidths={imageWidths}\n          loader={loader}\n          loading={loading}\n          normalizedProps={normalizedProps}\n          passthroughProps={passthroughProps}\n          placeholderWidth={placeholderWidth}\n          ref={ref}\n          sizes={sizes}\n          data={data}\n        />\n      );\n    }\n  },\n);\n\ntype FixedImageExludedProps =\n  | 'data'\n  | 'loader'\n  | 'loaderOptions'\n  | 'sizes'\n  | 'srcSetOptions'\n  | 'widths';\n\ntype FixedWidthImageProps = Omit<HydrogenImageProps, FixedImageExludedProps> &\n  Pick<HydrogenImageBaseProps, 'data'> & {\n    loader: Loader;\n    passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n    normalizedProps: NormalizedProps;\n    imageWidths: number[];\n    ref: React.Ref<HTMLImageElement>;\n  };\n\nconst FixedWidthImage = React.forwardRef<\n  HTMLImageElement,\n  FixedWidthImageProps\n>(\n  (\n    {\n      aspectRatio,\n      crop,\n      decoding,\n      height,\n      imageWidths,\n      loader = shopifyLoader,\n      loading,\n      normalizedProps,\n      passthroughProps,\n      width,\n      data,\n    },\n    ref,\n  ) => {\n    const fixed = React.useMemo(() => {\n      const intWidth: number | undefined = getNormalizedFixedUnit(width);\n      const intHeight: number | undefined = getNormalizedFixedUnit(height);\n\n      /*\n       * The aspect ratio for fixed width images is taken from the explicitly\n       * set prop, but if that's not present, and both width and height are\n       * set, we calculate the aspect ratio from the width and height—as\n       * long as they share the same unit type (e.g. both are 'px').\n       */\n      const fixedAspectRatio = aspectRatio\n        ? aspectRatio\n        : unitsMatch(normalizedProps.width, normalizedProps.height)\n          ? [intWidth, intHeight].join('/')\n          : normalizedProps.aspectRatio\n            ? normalizedProps.aspectRatio\n            : undefined;\n\n      /*\n       * The Sizes Array generates an array of all the parts\n       * that make up the srcSet, including the width, height, and crop\n       */\n      const sizesArray =\n        imageWidths === undefined\n          ? undefined\n          : generateSizes(imageWidths, fixedAspectRatio, crop, {\n              width: data?.width ?? undefined,\n              height: data?.height ?? undefined,\n            });\n\n      const fixedHeight = intHeight\n        ? intHeight\n        : fixedAspectRatio && intWidth\n          ? intWidth * (parseAspectRatio(fixedAspectRatio) ?? 1)\n          : undefined;\n\n      const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n      const src = loader({\n        src: normalizedProps.src,\n        width: intWidth,\n        height: fixedHeight,\n        crop: normalizedProps.height === 'auto' ? undefined : crop,\n      });\n\n      return {\n        width: intWidth,\n        aspectRatio: fixedAspectRatio,\n        height: fixedHeight,\n        srcSet,\n        src,\n      };\n    }, [\n      aspectRatio,\n      crop,\n      data,\n      height,\n      imageWidths,\n      loader,\n      normalizedProps,\n      width,\n    ]);\n\n    return (\n      <img\n        ref={ref}\n        alt={normalizedProps.alt}\n        decoding={decoding}\n        height={fixed.height}\n        loading={loading}\n        src={fixed.src}\n        srcSet={fixed.srcSet}\n        width={fixed.width}\n        style={{\n          aspectRatio: fixed.aspectRatio,\n          ...passthroughProps.style,\n        }}\n        {...passthroughProps}\n      />\n    );\n  },\n);\n\ntype FluidImageExcludedProps =\n  | 'data'\n  | 'width'\n  | 'height'\n  | 'loader'\n  | 'loaderOptions'\n  | 'srcSetOptions';\n\ntype FluidImageProps = Omit<HydrogenImageProps, FluidImageExcludedProps> &\n  Pick<HydrogenImageBaseProps, 'data'> & {\n    imageWidths: number[];\n    loader: Loader;\n    normalizedProps: NormalizedProps;\n    passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n    placeholderWidth: number;\n    ref: React.Ref<HTMLImageElement>;\n  };\n\nconst FluidImage = React.forwardRef<HTMLImageElement, FluidImageProps>(\n  (\n    {\n      crop,\n      decoding,\n      imageWidths,\n      loader = shopifyLoader,\n      loading,\n      normalizedProps,\n      passthroughProps,\n      placeholderWidth,\n      sizes,\n      data,\n    },\n    ref,\n  ) => {\n    const fluid = React.useMemo(() => {\n      const sizesArray =\n        imageWidths === undefined\n          ? undefined\n          : generateSizes(imageWidths, normalizedProps.aspectRatio, crop, {\n              width: data?.width ?? undefined,\n              height: data?.height ?? undefined,\n            });\n\n      const placeholderHeight =\n        normalizedProps.aspectRatio && placeholderWidth\n          ? placeholderWidth *\n            (parseAspectRatio(normalizedProps.aspectRatio) ?? 1)\n          : undefined;\n\n      const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n\n      const src = loader({\n        src: normalizedProps.src,\n        width: placeholderWidth,\n        height: placeholderHeight,\n        crop,\n      });\n\n      return {\n        placeholderHeight,\n        srcSet,\n        src,\n      };\n    }, [crop, data, imageWidths, loader, normalizedProps, placeholderWidth]);\n\n    return (\n      <img\n        ref={ref}\n        alt={normalizedProps.alt}\n        decoding={decoding}\n        height={fluid.placeholderHeight}\n        loading={loading}\n        sizes={sizes}\n        src={fluid.src}\n        srcSet={fluid.srcSet}\n        width={placeholderWidth}\n        {...passthroughProps}\n        style={{\n          width: normalizedProps.width,\n          aspectRatio: normalizedProps.aspectRatio,\n          ...passthroughProps.style,\n        }}\n      />\n    );\n  },\n);\n\n/**\n * The shopifyLoader function is a simple utility function that takes a src, width,\n * height, and crop and returns a string that can be used as the src for an image.\n * It can be used with the Hydrogen Image component or with the next/image component.\n * (or any others that accept equivalent configuration)\n * @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`\n * @param width - The width of the image, e.g. `100`\n * @param height - The height of the image, e.g. `100`\n * @param crop - The crop of the image, e.g. `center`\n * @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`\n *\n * @example\n * ```\n * shopifyLoader({\n *   src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',\n *   width: 100,\n *   height: 100,\n *   crop: 'center',\n * })\n * ```\n */\nconst PLACEHOLDER_DOMAIN = 'https://placeholder.shopify.com';\nexport function shopifyLoader({src, width, height, crop}: LoaderParams) {\n  if (!src) {\n    return '';\n  }\n\n  const url = new URL(src, PLACEHOLDER_DOMAIN);\n\n  if (width) {\n    url.searchParams.append('width', Math.round(width).toString());\n  }\n\n  if (height) {\n    url.searchParams.append('height', Math.round(height).toString());\n  }\n\n  if (crop) {\n    url.searchParams.append('crop', crop);\n  }\n  return url.href.replace(PLACEHOLDER_DOMAIN, '');\n}\n\n/**\n * Checks whether the width and height share the same unit type\n * @param width - The width of the image, e.g. 100% | 10px\n * @param height - The height of the image, e.g. auto | 100px\n * @returns Whether the width and height share the same unit type (boolean)\n */\nfunction unitsMatch(\n  width: string | number = '100%',\n  height: string | number = 'auto',\n): boolean {\n  return (\n    getUnitValueParts(width.toString()).unit ===\n    getUnitValueParts(height.toString()).unit\n  );\n}\n\n/**\n * Given a CSS size, returns the unit and number parts of the value\n * @param value - The CSS size, e.g. 100px\n * @returns The unit and number parts of the value, e.g. \\{unit: 'px', number: 100\\}\n */\nfunction getUnitValueParts(value: string): {unit: string; number: number} {\n  const unit = value.replace(/[0-9.]/g, '');\n  const number = parseFloat(value.replace(unit, ''));\n\n  return {\n    unit: unit === '' ? (number === undefined ? 'auto' : 'px') : unit,\n    number,\n  };\n}\n\n/**\n * Given a value, returns the width of the image as an integer in pixels\n * @param value - The width of the image, e.g. 16px | 1rem | 1em | 16\n * @returns The width of the image in pixels, e.g. 16, or undefined if the value is not a fixed unit\n */\nfunction getNormalizedFixedUnit(value?: string | number): number | undefined {\n  if (value === undefined) {\n    return;\n  }\n\n  const {unit, number} = getUnitValueParts(value.toString());\n\n  switch (unit) {\n    case 'em':\n      return number * 16;\n    case 'rem':\n      return number * 16;\n    case 'px':\n      return number;\n    case '':\n      return number;\n    default:\n      return;\n  }\n}\n\n/**\n * This function checks whether a width is fixed or not.\n * @param width - The width of the image, e.g. 100 | '100px' | '100em' | '100rem'\n * @returns Whether the width is fixed or not\n */\nfunction isFixedWidth(width: string | number): boolean {\n  const fixedEndings = /\\d(px|em|rem)$/;\n  return typeof width === 'number' || fixedEndings.test(width);\n}\n\n/**\n * This function generates a srcSet for Shopify images.\n * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg\n * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\\{width: 200, height: 200, crop: 'center'\\}, \\{width: 400, height: 400, crop: 'center'\\}]\n * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters\n * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'\n */\nexport function generateSrcSet(\n  src?: string,\n  sizesArray?: Array<{width?: number; height?: number; crop?: Crop}>,\n  loader: Loader = shopifyLoader,\n): string {\n  if (!src) {\n    return '';\n  }\n\n  if (sizesArray?.length === 0 || !sizesArray) {\n    return src;\n  }\n\n  return sizesArray\n    .map(\n      (size, i) =>\n        `${loader({\n          src,\n          width: size.width,\n          height: size.height,\n          crop: size.crop,\n        })} ${sizesArray.length === 3 ? `${i + 1}x` : `${size.width ?? 0}w`}`,\n    )\n    .join(`, `);\n}\n\n/**\n * This function generates an array of sizes for Shopify images, for both fixed and responsive images.\n * @param width - The CSS width of the image\n * @param intervals - The number of intervals to generate\n * @param startingWidth - The starting width of the image\n * @param incrementSize - The size of each interval\n * @returns An array of widths\n */\nexport function generateImageWidths(\n  width: string | number = '100%',\n  intervals: number,\n  startingWidth: number,\n  incrementSize: number,\n): number[] {\n  const responsive = Array.from(\n    {length: intervals},\n    (_, i) => i * incrementSize + startingWidth,\n  );\n\n  const fixed = Array.from(\n    {length: 3},\n    (_, i) => (i + 1) * (getNormalizedFixedUnit(width) ?? 0),\n  );\n\n  return isFixedWidth(width) ? fixed : responsive;\n}\n\n/**\n * Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1/1`, not `0.5`, or `auto`\n * @param aspectRatio - The aspect ratio of the image, e.g. `1/1`\n * @returns The aspect ratio as a number, e.g. `0.5`\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}\n */\nexport function parseAspectRatio(aspectRatio?: string): number | undefined {\n  if (!aspectRatio) return;\n  const [width, height] = aspectRatio.split('/');\n  return 1 / (Number(width) / Number(height));\n}\n\n// Generate data needed for Imagery loader\nexport function generateSizes(\n  imageWidths?: number[],\n  aspectRatio?: string,\n  crop: Crop = 'center',\n  sourceDimensions?: {width?: number; height?: number},\n):\n  | {\n      width: number;\n      height: number | undefined;\n      crop: Crop;\n    }[]\n  | undefined {\n  if (!imageWidths) return;\n  return imageWidths\n    .map((width: number) => {\n      return {\n        width,\n        height: aspectRatio\n          ? width * (parseAspectRatio(aspectRatio) ?? 1)\n          : undefined,\n        crop,\n      };\n    })\n    .filter(({width, height}) => {\n      if (sourceDimensions?.width && width > sourceDimensions.width) {\n        return false;\n      }\n\n      if (\n        sourceDimensions?.height &&\n        height &&\n        height > sourceDimensions.height\n      ) {\n        return false;\n      }\n\n      return true;\n    });\n  /*\n    Given:\n      ([100, 200], 1/1, 'center')\n    Returns:\n      [{width: 100, height: 100, crop: 'center'},\n      {width: 200, height: 200, crop: 'center'}]\n  */\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Image.mjs","names":[],"sources":["../../src/Image.tsx"],"sourcesContent":["/* eslint-disable eslint-comments/disable-enable-pair */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport * as React from 'react';\nimport type {PartialDeep} from 'type-fest';\nimport type {Image as ImageType} from './storefront-api-types.js';\n\n/*\n * An optional prop you can use to change the\n * default srcSet generation behaviour\n */\ntype SrcSetOptions = {\n  /** The number of sizes to generate */\n  intervals: number;\n  /** The smallest image size */\n  startingWidth: number;\n  /** The increment by which to increase for each size, in pixels */\n  incrementSize: number;\n  /** The size used for placeholder fallback images */\n  placeholderWidth: number;\n};\n\ntype NormalizedProps = {\n  alt: string;\n  aspectRatio: string | undefined;\n  height: string;\n  src: string | undefined;\n  width: string;\n};\n\nexport type LoaderParams = {\n  /** The base URL of the image */\n  src?: ImageType['url'];\n  /** The URL param that controls width */\n  width?: number;\n  /** The URL param that controls height */\n  height?: number;\n  /** The URL param that controls the cropping region */\n  crop?: Crop;\n};\n\nexport type Loader = (params: LoaderParams) => string;\n\n/*\n * @TODO: Expand to include focal point support; and/or switch this to be an SF API type\n */\ntype Crop = 'center' | 'top' | 'bottom' | 'left' | 'right';\n\n/** @publicDocs */\nexport type HydrogenImageProps = React.ComponentPropsWithRef<'img'> &\n  HydrogenImageBaseProps;\n\ntype HydrogenImageBaseProps = {\n  /** The aspect ratio of the image, in the format of `width/height`.\n   *\n   * @example\n   * ```\n   * <Image data={productImage} aspectRatio=\"4/5\" />\n   * ```\n   */\n  aspectRatio?: string;\n  /** The crop position of the image.\n   *\n   * @remarks\n   * In the event that AspectRatio is set, without specifying a crop,\n   * the Shopify CDN won't return the expected image.\n   *\n   * @defaultValue `center`\n   */\n  crop?: Crop;\n  /** Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2026-04/objects/Image) object. Must be an Image object.\n   *\n   * @example\n   * ```\n   * import {IMAGE_FRAGMENT, Image} from '@shopify/hydrogen';\n   *\n   * export const IMAGE_QUERY = `#graphql\n   * ${IMAGE_FRAGMENT}\n   * query {\n   *   product {\n   *     featuredImage {\n   *       ...Image\n   *     }\n   *   }\n   * }`\n   *\n   * <Image\n   *   data={productImage}\n   *   sizes=\"(min-width: 45em) 50vw, 100vw\"\n   *   aspectRatio=\"4/5\"\n   * />\n   * ```\n   *\n   * Image: {@link https://shopify.dev/api/storefront/reference/common-objects/image}\n   */\n  data?: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A function that returns a URL string for an image.\n   *\n   * @remarks\n   * By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide\n   * your own function to use a another provider, as long as they support URL based image transformations.\n   */\n  loader?: Loader;\n  /** An optional prop you can use to change the default srcSet generation behaviour */\n  srcSetOptions?: SrcSetOptions;\n};\n\n/**\n * A Storefront API GraphQL fragment that can be used to query for an image.\n */\nexport const IMAGE_FRAGMENT = `#graphql\n  fragment Image on Image {\n    altText\n    url\n    width\n    height\n  }\n`;\n\n/**\n * Hydrogen’s Image component is a wrapper around the HTML image element.\n * It supports the same props as the HTML `img` element, but automatically\n * generates the srcSet and sizes attributes for you. For most use cases,\n * you’ll want to set the `aspectRatio` prop to ensure the image is sized\n * correctly.\n *\n * @remarks\n * - `decoding` is set to `async` by default.\n * - `loading` is set to `lazy` by default.\n * - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop\n * - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop\n *\n * @example\n * A responsive image with a 4:5 aspect ratio:\n * ```\n * <Image\n *   data={product.featuredImage}\n *   aspectRatio=\"4/5\"\n *   sizes=\"(min-width: 45em) 40vw, 100vw\"\n * />\n * ```\n * @example\n * A fixed size image:\n * ```\n * <Image\n *   data={product.featuredImage}\n *   width={100}\n *   height={100}\n * />\n * ```\n *\n * {@link https://shopify.dev/docs/api/hydrogen-react/components/image}\n * @publicDocs\n */\nexport const Image = React.forwardRef<HTMLImageElement, HydrogenImageProps>(\n  (\n    {\n      alt,\n      aspectRatio,\n      crop = 'center',\n      data,\n      decoding = 'async',\n      height = 'auto',\n      loader = shopifyLoader,\n      loading = 'lazy',\n      sizes,\n      src,\n      srcSetOptions = {\n        intervals: 15,\n        startingWidth: 200,\n        incrementSize: 200,\n        placeholderWidth: 100,\n      },\n      width = '100%',\n      ...passthroughProps\n    },\n    ref,\n  ) => {\n    /*\n     * Gets normalized values for width, height from data  prop\n     */\n    const normalizedData = React.useMemo(() => {\n      /* Only use data width if height is also set */\n      const dataWidth: number | undefined =\n        data?.width && data?.height ? data?.width : undefined;\n\n      const dataHeight: number | undefined =\n        data?.width && data?.height ? data?.height : undefined;\n\n      return {\n        width: dataWidth,\n        height: dataHeight,\n        unitsMatch: Boolean(unitsMatch(dataWidth, dataHeight)),\n      };\n    }, [data]);\n\n    /*\n     * Gets normalized values for width, height, src, alt, and aspectRatio props\n     * supporting the presence of `data` in addition to flat props.\n     */\n    const normalizedProps = React.useMemo(() => {\n      const nWidthProp: string | number = width || '100%';\n      const widthParts = getUnitValueParts(nWidthProp.toString());\n      const nWidth = `${widthParts.number}${widthParts.unit}`;\n\n      const autoHeight = height === undefined || height === null;\n      const heightParts = autoHeight\n        ? null\n        : getUnitValueParts(height.toString());\n\n      const fixedHeight = heightParts\n        ? `${heightParts.number}${heightParts.unit}`\n        : '';\n\n      const nHeight = autoHeight ? 'auto' : fixedHeight;\n\n      const nSrc: string | undefined = src || data?.url;\n\n      if (__HYDROGEN_DEV__ && !nSrc) {\n        console.warn(\n          `No src or data.url provided to Image component.`,\n          passthroughProps?.key || '',\n        );\n      }\n\n      const nAlt: string = data?.altText && !alt ? data?.altText : alt || '';\n\n      const nAspectRatio: string | undefined = aspectRatio\n        ? aspectRatio\n        : normalizedData.unitsMatch\n          ? [\n              getNormalizedFixedUnit(normalizedData.width),\n              getNormalizedFixedUnit(normalizedData.height),\n            ].join('/')\n          : undefined;\n\n      return {\n        width: nWidth,\n        height: nHeight,\n        src: nSrc,\n        alt: nAlt,\n        aspectRatio: nAspectRatio,\n      };\n    }, [\n      width,\n      height,\n      src,\n      data,\n      alt,\n      aspectRatio,\n      normalizedData,\n      passthroughProps?.key,\n    ]);\n\n    const {intervals, startingWidth, incrementSize, placeholderWidth} =\n      srcSetOptions;\n\n    /*\n     * This function creates an array of widths to be used in srcSet\n     */\n    const imageWidths = React.useMemo(() => {\n      return generateImageWidths(\n        width,\n        intervals,\n        startingWidth,\n        incrementSize,\n      );\n    }, [width, intervals, startingWidth, incrementSize]);\n\n    const fixedWidth = isFixedWidth(normalizedProps.width);\n\n    if (__HYDROGEN_DEV__ && !sizes && !fixedWidth) {\n      console.warn(\n        [\n          'No sizes prop provided to Image component,',\n          'you may be loading unnecessarily large images.',\n          `Image used is ${\n            src || data?.url || passthroughProps?.key || 'unknown'\n          }`,\n        ].join(' '),\n      );\n    }\n\n    /*\n     * We check to see whether the image is fixed width or not,\n     * if fixed, we still provide a srcSet, but only to account for\n     * different pixel densities.\n     */\n    if (fixedWidth) {\n      return (\n        <FixedWidthImage\n          aspectRatio={aspectRatio}\n          crop={crop}\n          decoding={decoding}\n          height={height}\n          imageWidths={imageWidths}\n          loader={loader}\n          loading={loading}\n          normalizedProps={normalizedProps}\n          passthroughProps={passthroughProps}\n          ref={ref}\n          width={width}\n          data={data}\n        />\n      );\n    } else {\n      return (\n        <FluidImage\n          aspectRatio={aspectRatio}\n          crop={crop}\n          decoding={decoding}\n          imageWidths={imageWidths}\n          loader={loader}\n          loading={loading}\n          normalizedProps={normalizedProps}\n          passthroughProps={passthroughProps}\n          placeholderWidth={placeholderWidth}\n          ref={ref}\n          sizes={sizes}\n          data={data}\n        />\n      );\n    }\n  },\n);\n\ntype FixedImageExludedProps =\n  | 'data'\n  | 'loader'\n  | 'loaderOptions'\n  | 'sizes'\n  | 'srcSetOptions'\n  | 'widths';\n\ntype FixedWidthImageProps = Omit<HydrogenImageProps, FixedImageExludedProps> &\n  Pick<HydrogenImageBaseProps, 'data'> & {\n    loader: Loader;\n    passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n    normalizedProps: NormalizedProps;\n    imageWidths: number[];\n    ref: React.Ref<HTMLImageElement>;\n  };\n\nconst FixedWidthImage = React.forwardRef<\n  HTMLImageElement,\n  FixedWidthImageProps\n>(\n  (\n    {\n      aspectRatio,\n      crop,\n      decoding,\n      height,\n      imageWidths,\n      loader = shopifyLoader,\n      loading,\n      normalizedProps,\n      passthroughProps,\n      width,\n      data,\n    },\n    ref,\n  ) => {\n    const fixed = React.useMemo(() => {\n      const intWidth: number | undefined = getNormalizedFixedUnit(width);\n      const intHeight: number | undefined = getNormalizedFixedUnit(height);\n\n      /*\n       * The aspect ratio for fixed width images is taken from the explicitly\n       * set prop, but if that's not present, and both width and height are\n       * set, we calculate the aspect ratio from the width and height—as\n       * long as they share the same unit type (e.g. both are 'px').\n       */\n      const fixedAspectRatio = aspectRatio\n        ? aspectRatio\n        : unitsMatch(normalizedProps.width, normalizedProps.height)\n          ? [intWidth, intHeight].join('/')\n          : normalizedProps.aspectRatio\n            ? normalizedProps.aspectRatio\n            : undefined;\n\n      /*\n       * The Sizes Array generates an array of all the parts\n       * that make up the srcSet, including the width, height, and crop\n       */\n      const sizesArray =\n        imageWidths === undefined\n          ? undefined\n          : generateSizes(imageWidths, fixedAspectRatio, crop, {\n              width: data?.width ?? undefined,\n              height: data?.height ?? undefined,\n            });\n\n      const fixedHeight = intHeight\n        ? intHeight\n        : fixedAspectRatio && intWidth\n          ? intWidth * (parseAspectRatio(fixedAspectRatio) ?? 1)\n          : undefined;\n\n      const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n      const src = loader({\n        src: normalizedProps.src,\n        width: intWidth,\n        height: fixedHeight,\n        crop: normalizedProps.height === 'auto' ? undefined : crop,\n      });\n\n      return {\n        width: intWidth,\n        aspectRatio: fixedAspectRatio,\n        height: fixedHeight,\n        srcSet,\n        src,\n      };\n    }, [\n      aspectRatio,\n      crop,\n      data,\n      height,\n      imageWidths,\n      loader,\n      normalizedProps,\n      width,\n    ]);\n\n    return (\n      <img\n        ref={ref}\n        alt={normalizedProps.alt}\n        decoding={decoding}\n        height={fixed.height}\n        loading={loading}\n        src={fixed.src}\n        srcSet={fixed.srcSet}\n        width={fixed.width}\n        style={{\n          aspectRatio: fixed.aspectRatio,\n          ...passthroughProps.style,\n        }}\n        {...passthroughProps}\n      />\n    );\n  },\n);\n\ntype FluidImageExcludedProps =\n  | 'data'\n  | 'width'\n  | 'height'\n  | 'loader'\n  | 'loaderOptions'\n  | 'srcSetOptions';\n\ntype FluidImageProps = Omit<HydrogenImageProps, FluidImageExcludedProps> &\n  Pick<HydrogenImageBaseProps, 'data'> & {\n    imageWidths: number[];\n    loader: Loader;\n    normalizedProps: NormalizedProps;\n    passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n    placeholderWidth: number;\n    ref: React.Ref<HTMLImageElement>;\n  };\n\nconst FluidImage = React.forwardRef<HTMLImageElement, FluidImageProps>(\n  (\n    {\n      crop,\n      decoding,\n      imageWidths,\n      loader = shopifyLoader,\n      loading,\n      normalizedProps,\n      passthroughProps,\n      placeholderWidth,\n      sizes,\n      data,\n    },\n    ref,\n  ) => {\n    const fluid = React.useMemo(() => {\n      const sizesArray =\n        imageWidths === undefined\n          ? undefined\n          : generateSizes(imageWidths, normalizedProps.aspectRatio, crop, {\n              width: data?.width ?? undefined,\n              height: data?.height ?? undefined,\n            });\n\n      const placeholderHeight =\n        normalizedProps.aspectRatio && placeholderWidth\n          ? placeholderWidth *\n            (parseAspectRatio(normalizedProps.aspectRatio) ?? 1)\n          : undefined;\n\n      const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n\n      const src = loader({\n        src: normalizedProps.src,\n        width: placeholderWidth,\n        height: placeholderHeight,\n        crop,\n      });\n\n      return {\n        placeholderHeight,\n        srcSet,\n        src,\n      };\n    }, [crop, data, imageWidths, loader, normalizedProps, placeholderWidth]);\n\n    return (\n      <img\n        ref={ref}\n        alt={normalizedProps.alt}\n        decoding={decoding}\n        height={fluid.placeholderHeight}\n        loading={loading}\n        sizes={sizes}\n        src={fluid.src}\n        srcSet={fluid.srcSet}\n        width={placeholderWidth}\n        {...passthroughProps}\n        style={{\n          width: normalizedProps.width,\n          aspectRatio: normalizedProps.aspectRatio,\n          ...passthroughProps.style,\n        }}\n      />\n    );\n  },\n);\n\n/**\n * The shopifyLoader function is a simple utility function that takes a src, width,\n * height, and crop and returns a string that can be used as the src for an image.\n * It can be used with the Hydrogen Image component or with the next/image component.\n * (or any others that accept equivalent configuration)\n * @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`\n * @param width - The width of the image, e.g. `100`\n * @param height - The height of the image, e.g. `100`\n * @param crop - The crop of the image, e.g. `center`\n * @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`\n *\n * @example\n * ```\n * shopifyLoader({\n *   src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',\n *   width: 100,\n *   height: 100,\n *   crop: 'center',\n * })\n * ```\n */\nconst PLACEHOLDER_DOMAIN = 'https://placeholder.shopify.com';\nexport function shopifyLoader({src, width, height, crop}: LoaderParams) {\n  if (!src) {\n    return '';\n  }\n\n  const url = new URL(src, PLACEHOLDER_DOMAIN);\n\n  if (width) {\n    url.searchParams.append('width', Math.round(width).toString());\n  }\n\n  if (height) {\n    url.searchParams.append('height', Math.round(height).toString());\n  }\n\n  if (crop) {\n    url.searchParams.append('crop', crop);\n  }\n  return url.href.replace(PLACEHOLDER_DOMAIN, '');\n}\n\n/**\n * Checks whether the width and height share the same unit type\n * @param width - The width of the image, e.g. 100% | 10px\n * @param height - The height of the image, e.g. auto | 100px\n * @returns Whether the width and height share the same unit type (boolean)\n */\nfunction unitsMatch(\n  width: string | number = '100%',\n  height: string | number = 'auto',\n): boolean {\n  return (\n    getUnitValueParts(width.toString()).unit ===\n    getUnitValueParts(height.toString()).unit\n  );\n}\n\n/**\n * Given a CSS size, returns the unit and number parts of the value\n * @param value - The CSS size, e.g. 100px\n * @returns The unit and number parts of the value, e.g. \\{unit: 'px', number: 100\\}\n */\nfunction getUnitValueParts(value: string): {unit: string; number: number} {\n  const unit = value.replace(/[0-9.]/g, '');\n  const number = parseFloat(value.replace(unit, ''));\n\n  return {\n    unit: unit === '' ? (number === undefined ? 'auto' : 'px') : unit,\n    number,\n  };\n}\n\n/**\n * Given a value, returns the width of the image as an integer in pixels\n * @param value - The width of the image, e.g. 16px | 1rem | 1em | 16\n * @returns The width of the image in pixels, e.g. 16, or undefined if the value is not a fixed unit\n */\nfunction getNormalizedFixedUnit(value?: string | number): number | undefined {\n  if (value === undefined) {\n    return;\n  }\n\n  const {unit, number} = getUnitValueParts(value.toString());\n\n  switch (unit) {\n    case 'em':\n      return number * 16;\n    case 'rem':\n      return number * 16;\n    case 'px':\n      return number;\n    case '':\n      return number;\n    default:\n      return;\n  }\n}\n\n/**\n * This function checks whether a width is fixed or not.\n * @param width - The width of the image, e.g. 100 | '100px' | '100em' | '100rem'\n * @returns Whether the width is fixed or not\n */\nfunction isFixedWidth(width: string | number): boolean {\n  const fixedEndings = /\\d(px|em|rem)$/;\n  return typeof width === 'number' || fixedEndings.test(width);\n}\n\n/**\n * This function generates a srcSet for Shopify images.\n * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg\n * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\\{width: 200, height: 200, crop: 'center'\\}, \\{width: 400, height: 400, crop: 'center'\\}]\n * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters\n * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'\n */\nexport function generateSrcSet(\n  src?: string,\n  sizesArray?: Array<{width?: number; height?: number; crop?: Crop}>,\n  loader: Loader = shopifyLoader,\n): string {\n  if (!src) {\n    return '';\n  }\n\n  if (sizesArray?.length === 0 || !sizesArray) {\n    return src;\n  }\n\n  return sizesArray\n    .map(\n      (size, i) =>\n        `${loader({\n          src,\n          width: size.width,\n          height: size.height,\n          crop: size.crop,\n        })} ${sizesArray.length === 3 ? `${i + 1}x` : `${size.width ?? 0}w`}`,\n    )\n    .join(`, `);\n}\n\n/**\n * This function generates an array of sizes for Shopify images, for both fixed and responsive images.\n * @param width - The CSS width of the image\n * @param intervals - The number of intervals to generate\n * @param startingWidth - The starting width of the image\n * @param incrementSize - The size of each interval\n * @returns An array of widths\n */\nexport function generateImageWidths(\n  width: string | number = '100%',\n  intervals: number,\n  startingWidth: number,\n  incrementSize: number,\n): number[] {\n  const responsive = Array.from(\n    {length: intervals},\n    (_, i) => i * incrementSize + startingWidth,\n  );\n\n  const fixed = Array.from(\n    {length: 3},\n    (_, i) => (i + 1) * (getNormalizedFixedUnit(width) ?? 0),\n  );\n\n  return isFixedWidth(width) ? fixed : responsive;\n}\n\n/**\n * Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1/1`, not `0.5`, or `auto`\n * @param aspectRatio - The aspect ratio of the image, e.g. `1/1`\n * @returns The aspect ratio as a number, e.g. `0.5`\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}\n */\nexport function parseAspectRatio(aspectRatio?: string): number | undefined {\n  if (!aspectRatio) return;\n  const [width, height] = aspectRatio.split('/');\n  return 1 / (Number(width) / Number(height));\n}\n\n// Generate data needed for Imagery loader\nexport function generateSizes(\n  imageWidths?: number[],\n  aspectRatio?: string,\n  crop: Crop = 'center',\n  sourceDimensions?: {width?: number; height?: number},\n):\n  | {\n      width: number;\n      height: number | undefined;\n      crop: Crop;\n    }[]\n  | undefined {\n  if (!imageWidths) return;\n  return imageWidths\n    .map((width: number) => {\n      return {\n        width,\n        height: aspectRatio\n          ? width * (parseAspectRatio(aspectRatio) ?? 1)\n          : undefined,\n        crop,\n      };\n    })\n    .filter(({width, height}) => {\n      if (sourceDimensions?.width && width > sourceDimensions.width) {\n        return false;\n      }\n\n      if (\n        sourceDimensions?.height &&\n        height &&\n        height > sourceDimensions.height\n      ) {\n        return false;\n      }\n\n      return true;\n    });\n  /*\n    Given:\n      ([100, 200], 1/1, 'center')\n    Returns:\n      [{width: 100, height: 100, crop: 'center'},\n      {width: 200, height: 200, crop: 'center'}]\n  */\n}\n"],"mappings":";;;;;;AA6GA,IAAa,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4C9B,IAAa,QAAQ,MAAM,YAEvB,EACE,KACA,aACA,OAAO,UACP,MACA,WAAW,SACX,SAAS,QACT,SAAS,eACT,UAAU,QACV,OACA,KACA,gBAAgB;CACd,WAAW;CACX,eAAe;CACf,eAAe;CACf,kBAAkB;CACnB,EACD,QAAQ,QACR,GAAG,oBAEL,QACG;CAIH,MAAM,iBAAiB,MAAM,cAAc;EAEzC,MAAM,YACJ,MAAM,SAAS,MAAM,SAAS,MAAM,QAAQ,KAAA;EAE9C,MAAM,aACJ,MAAM,SAAS,MAAM,SAAS,MAAM,SAAS,KAAA;AAE/C,SAAO;GACL,OAAO;GACP,QAAQ;GACR,YAAY,QAAQ,WAAW,WAAW,WAAW,CAAC;GACvD;IACA,CAAC,KAAK,CAAC;CAMV,MAAM,kBAAkB,MAAM,cAAc;EAE1C,MAAM,aAAa,mBADiB,SAAS,QACG,UAAU,CAAC;EAC3D,MAAM,SAAS,GAAG,WAAW,SAAS,WAAW;EAEjD,MAAM,aAAa,WAAW,KAAA,KAAa,WAAW;EACtD,MAAM,cAAc,aAChB,OACA,kBAAkB,OAAO,UAAU,CAAC;EAExC,MAAM,cAAc,cAChB,GAAG,YAAY,SAAS,YAAY,SACpC;AAwBJ,SAAO;GACL,OAAO;GACP,QAxBc,aAAa,SAAS;GAyBpC,KAvB+B,OAAO,MAAM;GAwB5C,KAfmB,MAAM,WAAW,CAAC,MAAM,MAAM,UAAU,OAAO;GAgBlE,aAduC,cACrC,cACA,eAAe,aACb,CACE,uBAAuB,eAAe,MAAM,EAC5C,uBAAuB,eAAe,OAAO,CAC9C,CAAC,KAAK,IAAI,GACX,KAAA;GAQL;IACA;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAAkB;EACnB,CAAC;CAEF,MAAM,EAAC,WAAW,eAAe,eAAe,qBAC9C;CAKF,MAAM,cAAc,MAAM,cAAc;AACtC,SAAO,oBACL,OACA,WACA,eACA,cACD;IACA;EAAC;EAAO;EAAW;EAAe;EAAc,CAAC;AAqBpD,KAnBmB,aAAa,gBAAgB,MAAM,CAoBpD,QACE,oBAAC,iBAAD;EACe;EACP;EACI;EACF;EACK;EACL;EACC;EACQ;EACC;EACb;EACE;EACD;EACN,CAAA;KAGJ,QACE,oBAAC,YAAD;EACe;EACP;EACI;EACG;EACL;EACC;EACQ;EACC;EACA;EACb;EACE;EACD;EACN,CAAA;EAIT;AAmBD,IAAM,kBAAkB,MAAM,YAK1B,EACE,aACA,MACA,UACA,QACA,aACA,SAAS,eACT,SACA,iBACA,kBACA,OACA,QAEF,QACG;CACH,MAAM,QAAQ,MAAM,cAAc;EAChC,MAAM,WAA+B,uBAAuB,MAAM;EAClE,MAAM,YAAgC,uBAAuB,OAAO;EAQpE,MAAM,mBAAmB,cACrB,cACA,WAAW,gBAAgB,OAAO,gBAAgB,OAAO,GACvD,CAAC,UAAU,UAAU,CAAC,KAAK,IAAI,GAC/B,gBAAgB,cACd,gBAAgB,cAChB,KAAA;EAMR,MAAM,aACJ,gBAAgB,KAAA,IACZ,KAAA,IACA,cAAc,aAAa,kBAAkB,MAAM;GACjD,OAAO,MAAM,SAAS,KAAA;GACtB,QAAQ,MAAM,UAAU,KAAA;GACzB,CAAC;EAER,MAAM,cAAc,YAChB,YACA,oBAAoB,WAClB,YAAY,iBAAiB,iBAAiB,IAAI,KAClD,KAAA;AAUN,SAAO;GACL,OAAO;GACP,aAAa;GACb,QAAQ;GACR,QAZa,eAAe,gBAAgB,KAAK,YAAY,OAAO;GAapE,KAZU,OAAO;IACjB,KAAK,gBAAgB;IACrB,OAAO;IACP,QAAQ;IACR,MAAM,gBAAgB,WAAW,SAAS,KAAA,IAAY;IACvD,CAAC;GAQD;IACA;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,OAAD;EACO;EACL,KAAK,gBAAgB;EACX;EACV,QAAQ,MAAM;EACL;EACT,KAAK,MAAM;EACX,QAAQ,MAAM;EACd,OAAO,MAAM;EACb,OAAO;GACL,aAAa,MAAM;GACnB,GAAG,iBAAiB;GACrB;EACD,GAAI;EACJ,CAAA;EAGP;AAoBD,IAAM,aAAa,MAAM,YAErB,EACE,MACA,UACA,aACA,SAAS,eACT,SACA,iBACA,kBACA,kBACA,OACA,QAEF,QACG;CACH,MAAM,QAAQ,MAAM,cAAc;EAChC,MAAM,aACJ,gBAAgB,KAAA,IACZ,KAAA,IACA,cAAc,aAAa,gBAAgB,aAAa,MAAM;GAC5D,OAAO,MAAM,SAAS,KAAA;GACtB,QAAQ,MAAM,UAAU,KAAA;GACzB,CAAC;EAER,MAAM,oBACJ,gBAAgB,eAAe,mBAC3B,oBACC,iBAAiB,gBAAgB,YAAY,IAAI,KAClD,KAAA;AAWN,SAAO;GACL;GACA,QAXa,eAAe,gBAAgB,KAAK,YAAY,OAAO;GAYpE,KAVU,OAAO;IACjB,KAAK,gBAAgB;IACrB,OAAO;IACP,QAAQ;IACR;IACD,CAAC;GAMD;IACA;EAAC;EAAM;EAAM;EAAa;EAAQ;EAAiB;EAAiB,CAAC;AAExE,QACE,oBAAC,OAAD;EACO;EACL,KAAK,gBAAgB;EACX;EACV,QAAQ,MAAM;EACL;EACF;EACP,KAAK,MAAM;EACX,QAAQ,MAAM;EACd,OAAO;EACP,GAAI;EACJ,OAAO;GACL,OAAO,gBAAgB;GACvB,aAAa,gBAAgB;GAC7B,GAAG,iBAAiB;GACrB;EACD,CAAA;EAGP;;;;;;;;;;;;;;;;;;;;;;AAuBD,IAAM,qBAAqB;AAC3B,SAAgB,cAAc,EAAC,KAAK,OAAO,QAAQ,QAAqB;AACtE,KAAI,CAAC,IACH,QAAO;CAGT,MAAM,MAAM,IAAI,IAAI,KAAK,mBAAmB;AAE5C,KAAI,MACF,KAAI,aAAa,OAAO,SAAS,KAAK,MAAM,MAAM,CAAC,UAAU,CAAC;AAGhE,KAAI,OACF,KAAI,aAAa,OAAO,UAAU,KAAK,MAAM,OAAO,CAAC,UAAU,CAAC;AAGlE,KAAI,KACF,KAAI,aAAa,OAAO,QAAQ,KAAK;AAEvC,QAAO,IAAI,KAAK,QAAQ,oBAAoB,GAAG;;;;;;;;AASjD,SAAS,WACP,QAAyB,QACzB,SAA0B,QACjB;AACT,QACE,kBAAkB,MAAM,UAAU,CAAC,CAAC,SACpC,kBAAkB,OAAO,UAAU,CAAC,CAAC;;;;;;;AASzC,SAAS,kBAAkB,OAA+C;CACxE,MAAM,OAAO,MAAM,QAAQ,WAAW,GAAG;CACzC,MAAM,SAAS,WAAW,MAAM,QAAQ,MAAM,GAAG,CAAC;AAElD,QAAO;EACL,MAAM,SAAS,KAAM,WAAW,KAAA,IAAY,SAAS,OAAQ;EAC7D;EACD;;;;;;;AAQH,SAAS,uBAAuB,OAA6C;AAC3E,KAAI,UAAU,KAAA,EACZ;CAGF,MAAM,EAAC,MAAM,WAAU,kBAAkB,MAAM,UAAU,CAAC;AAE1D,SAAQ,MAAR;EACE,KAAK,KACH,QAAO,SAAS;EAClB,KAAK,MACH,QAAO,SAAS;EAClB,KAAK,KACH,QAAO;EACT,KAAK,GACH,QAAO;EACT,QACE;;;;;;;;AASN,SAAS,aAAa,OAAiC;AAErD,QAAO,OAAO,UAAU,YADH,iBAC4B,KAAK,MAAM;;;;;;;;;AAU9D,SAAgB,eACd,KACA,YACA,SAAiB,eACT;AACR,KAAI,CAAC,IACH,QAAO;AAGT,KAAI,YAAY,WAAW,KAAK,CAAC,WAC/B,QAAO;AAGT,QAAO,WACJ,KACE,MAAM,MACL,GAAG,OAAO;EACR;EACA,OAAO,KAAK;EACZ,QAAQ,KAAK;EACb,MAAM,KAAK;EACZ,CAAC,CAAC,GAAG,WAAW,WAAW,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,KAAK,SAAS,EAAE,KACpE,CACA,KAAK,KAAK;;;;;;;;;;AAWf,SAAgB,oBACd,QAAyB,QACzB,WACA,eACA,eACU;CACV,MAAM,aAAa,MAAM,KACvB,EAAC,QAAQ,WAAU,GAClB,GAAG,MAAM,IAAI,gBAAgB,cAC/B;CAED,MAAM,QAAQ,MAAM,KAClB,EAAC,QAAQ,GAAE,GACV,GAAG,OAAO,IAAI,MAAM,uBAAuB,MAAM,IAAI,GACvD;AAED,QAAO,aAAa,MAAM,GAAG,QAAQ;;;;;;;;;AAUvC,SAAgB,iBAAiB,aAA0C;AACzE,KAAI,CAAC,YAAa;CAClB,MAAM,CAAC,OAAO,UAAU,YAAY,MAAM,IAAI;AAC9C,QAAO,KAAK,OAAO,MAAM,GAAG,OAAO,OAAO;;AAI5C,SAAgB,cACd,aACA,aACA,OAAa,UACb,kBAOY;AACZ,KAAI,CAAC,YAAa;AAClB,QAAO,YACJ,KAAK,UAAkB;AACtB,SAAO;GACL;GACA,QAAQ,cACJ,SAAS,iBAAiB,YAAY,IAAI,KAC1C,KAAA;GACJ;GACD;GACD,CACD,QAAQ,EAAC,OAAO,aAAY;AAC3B,MAAI,kBAAkB,SAAS,QAAQ,iBAAiB,MACtD,QAAO;AAGT,MACE,kBAAkB,UAClB,UACA,SAAS,iBAAiB,OAE1B,QAAO;AAGT,SAAO;GACP"}

package/dist/browser-prod/MediaFile.mjs

@@ -1,67 +1,48 @@
-import { jsx } from "react/jsx-runtime";
+import { ExternalVideo } from "./ExternalVideo.mjs";
 import { Image } from "./Image.mjs";
 import { Video } from "./Video.mjs";
-import { ExternalVideo } from "./ExternalVideo.mjs";
 import { ModelViewer } from "./ModelViewer.mjs";
-function MediaFile({
-  data,
-  mediaOptions,
-  ...passthroughProps
-}) {
-  switch (data.__typename) {
-    case "MediaImage": {
-      if (!data.image) {
-        const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;
-        {
-          console.warn(noDataImage);
-          return null;
-        }
-      }
-      return /* @__PURE__ */ jsx(
-        Image,
-        {
-          ...passthroughProps,
-          ...mediaOptions == null ? void 0 : mediaOptions.image,
-          data: data.image
-        }
-      );
-    }
-    case "Video": {
-      return /* @__PURE__ */ jsx(Video, { ...passthroughProps, ...mediaOptions == null ? void 0 : mediaOptions.video, data });
-    }
-    case "ExternalVideo": {
-      return /* @__PURE__ */ jsx(
-        ExternalVideo,
-        {
-          ...passthroughProps,
-          ...mediaOptions == null ? void 0 : mediaOptions.externalVideo,
-          data
-        }
-      );
-    }
-    case "Model3d": {
-      return (
-        // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment
-        /* @__PURE__ */ jsx(
-          ModelViewer,
-          {
-            ...passthroughProps,
-            ...mediaOptions == null ? void 0 : mediaOptions.modelViewer,
-            data
-          }
-        )
-      );
-    }
-    default: {
-      const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;
-      {
-        console.error(`${typenameMissingMessage}  Rendering 'null' by default`);
-        return null;
-      }
-    }
-  }
+import { jsx } from "react/jsx-runtime";
+//#region src/MediaFile.tsx
+/**
+* The `MediaFile` component renders the media for the Storefront API's
+* [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a
+* `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.
+* @publicDocs
+*/
+function MediaFile({ data, mediaOptions, ...passthroughProps }) {
+	switch (data.__typename) {
+		case "MediaImage":
+			if (!data.image) {
+				console.warn(`<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`);
+				return null;
+			}
+			return /* @__PURE__ */ jsx(Image, {
+				...passthroughProps,
+				...mediaOptions?.image,
+				data: data.image
+			});
+		case "Video": return /* @__PURE__ */ jsx(Video, {
+			...passthroughProps,
+			...mediaOptions?.video,
+			data
+		});
+		case "ExternalVideo": return /* @__PURE__ */ jsx(ExternalVideo, {
+			...passthroughProps,
+			...mediaOptions?.externalVideo,
+			data
+		});
+		case "Model3d": return /* @__PURE__ */ jsx(ModelViewer, {
+			...passthroughProps,
+			...mediaOptions?.modelViewer,
+			data
+		});
+		default:
+			console.error(`<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.  Rendering 'null' by default`);
+			return null;
+	}
 }
-export {
-  MediaFile
-};
-//# sourceMappingURL=MediaFile.mjs.map
+//#endregion
+export { MediaFile };
+
+//# sourceMappingURL=MediaFile.mjs.map

package/dist/browser-prod/MediaFile.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MediaFile.mjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {Image, type HydrogenImageProps} from './Image.js';\nimport {Video} from './Video.js';\nimport {ExternalVideo} from './ExternalVideo.js';\nimport {ModelViewer} from './ModelViewer.js';\nimport type {MediaEdge as MediaEdgeType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n  HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\n/**\n * MediaFile renders an `Image`, `Video`, `ExternalVideo`, or `ModelViewer` component. Use the `mediaOptions` prop to customize the props sent to each of these components.\n * @publicDocs */\nexport interface MediaFileProps extends BaseProps {\n  /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */\n  data: PartialDeep<MediaEdgeType['node'], {recurseIntoArrays: true}>;\n  /** The options for the `Image`, `Video`, `ExternalVideo`, or `ModelViewer` components. */\n  mediaOptions?: MediaOptions;\n}\n\ntype MediaOptions = {\n  /** Props that will only apply when an `<Image />` is rendered */\n  image?: Omit<HydrogenImageProps, 'data'>;\n  /** Props that will only apply when a `<Video />` is rendered */\n  video?: Omit<React.ComponentProps<typeof Video>, 'data'>;\n  /** Props that will only apply when an `<ExternalVideo />` is rendered */\n  externalVideo?: Omit<\n    React.ComponentProps<typeof ExternalVideo>['options'],\n    'data'\n  >;\n  /** Props that will only apply when a `<ModelViewer />` is rendered */\n  modelViewer?: Omit<typeof ModelViewer, 'data'>;\n};\n\n/**\n * The `MediaFile` component renders the media for the Storefront API's\n * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a\n * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.\n * @publicDocs\n */\nexport function MediaFile({\n  data,\n  mediaOptions,\n  ...passthroughProps\n}: MediaFileProps): JSX.Element | null {\n  switch (data.__typename) {\n    case 'MediaImage': {\n      if (!data.image) {\n        const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;\n        if (__HYDROGEN_DEV__) {\n          throw new Error(noDataImage);\n        } else {\n          console.warn(noDataImage);\n          return null;\n        }\n      }\n\n      return (\n        <Image\n          {...passthroughProps}\n          {...mediaOptions?.image}\n          data={data.image}\n        />\n      );\n    }\n    case 'Video': {\n      return (\n        <Video {...passthroughProps} {...mediaOptions?.video} data={data} />\n      );\n    }\n    case 'ExternalVideo': {\n      return (\n        <ExternalVideo\n          {...passthroughProps}\n          {...mediaOptions?.externalVideo}\n          data={data}\n        />\n      );\n    }\n    case 'Model3d': {\n      return (\n        // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\n        <ModelViewer\n          {...passthroughProps}\n          {...mediaOptions?.modelViewer}\n          data={data}\n        />\n      );\n    }\n    default: {\n      const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;\n      if (__HYDROGEN_DEV__) {\n        throw new Error(typenameMissingMessage);\n      } else {\n        console.error(`${typenameMissingMessage}  Rendering 'null' by default`);\n        return null;\n      }\n    }\n  }\n}\n"],"names":[],"mappings":";;;;;AAyCO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,UAAQ,KAAK,YAAA;AAAA,IACX,KAAK,cAAc;AACjB,UAAI,CAAC,KAAK,OAAO;AACf,cAAM,cAAc;AAGb;AACL,kBAAQ,KAAK,WAAW;AACxB,iBAAO;AAAA,QACT;AAAA,MACF;AAEA,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG,6CAAc;AAAA,UAClB,MAAM,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IAGjB;AAAA,IACA,KAAK,SAAS;AACZ,iCACG,OAAA,EAAO,GAAG,kBAAmB,GAAG,6CAAc,OAAO,MAAY;AAAA,IAEtE;AAAA,IACA,KAAK,iBAAiB;AACpB,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG,6CAAc;AAAA,UAClB;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAAA,IACA,KAAK,WAAW;AACd;AAAA;AAAA,QAEE;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG,6CAAc;AAAA,YAClB;AAAA,UAAA;AAAA,QAAA;AAAA;AAAA,IAGN;AAAA,IACA,SAAS;AACP,YAAM,yBAAyB;AAGxB;AACL,gBAAQ,MAAM,GAAG,sBAAsB,+BAA+B;AACtE,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"MediaFile.mjs","names":[],"sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {Image, type HydrogenImageProps} from './Image.js';\nimport {Video} from './Video.js';\nimport {ExternalVideo} from './ExternalVideo.js';\nimport {ModelViewer} from './ModelViewer.js';\nimport type {MediaEdge as MediaEdgeType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n  HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\n/**\n * MediaFile renders an `Image`, `Video`, `ExternalVideo`, or `ModelViewer` component. Use the `mediaOptions` prop to customize the props sent to each of these components.\n * @publicDocs */\nexport interface MediaFileProps extends BaseProps {\n  /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */\n  data: PartialDeep<MediaEdgeType['node'], {recurseIntoArrays: true}>;\n  /** The options for the `Image`, `Video`, `ExternalVideo`, or `ModelViewer` components. */\n  mediaOptions?: MediaOptions;\n}\n\ntype MediaOptions = {\n  /** Props that will only apply when an `<Image />` is rendered */\n  image?: Omit<HydrogenImageProps, 'data'>;\n  /** Props that will only apply when a `<Video />` is rendered */\n  video?: Omit<React.ComponentProps<typeof Video>, 'data'>;\n  /** Props that will only apply when an `<ExternalVideo />` is rendered */\n  externalVideo?: Omit<\n    React.ComponentProps<typeof ExternalVideo>['options'],\n    'data'\n  >;\n  /** Props that will only apply when a `<ModelViewer />` is rendered */\n  modelViewer?: Omit<typeof ModelViewer, 'data'>;\n};\n\n/**\n * The `MediaFile` component renders the media for the Storefront API's\n * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a\n * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.\n * @publicDocs\n */\nexport function MediaFile({\n  data,\n  mediaOptions,\n  ...passthroughProps\n}: MediaFileProps): JSX.Element | null {\n  switch (data.__typename) {\n    case 'MediaImage': {\n      if (!data.image) {\n        const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;\n        if (__HYDROGEN_DEV__) {\n          throw new Error(noDataImage);\n        } else {\n          console.warn(noDataImage);\n          return null;\n        }\n      }\n\n      return (\n        <Image\n          {...passthroughProps}\n          {...mediaOptions?.image}\n          data={data.image}\n        />\n      );\n    }\n    case 'Video': {\n      return (\n        <Video {...passthroughProps} {...mediaOptions?.video} data={data} />\n      );\n    }\n    case 'ExternalVideo': {\n      return (\n        <ExternalVideo\n          {...passthroughProps}\n          {...mediaOptions?.externalVideo}\n          data={data}\n        />\n      );\n    }\n    case 'Model3d': {\n      return (\n        // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\n        <ModelViewer\n          {...passthroughProps}\n          {...mediaOptions?.modelViewer}\n          data={data}\n        />\n      );\n    }\n    default: {\n      const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;\n      if (__HYDROGEN_DEV__) {\n        throw new Error(typenameMissingMessage);\n      } else {\n        console.error(`${typenameMissingMessage}  Rendering 'null' by default`);\n        return null;\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAyCA,SAAgB,UAAU,EACxB,MACA,cACA,GAAG,oBACkC;AACrC,SAAQ,KAAK,YAAb;EACE,KAAK;AACH,OAAI,CAAC,KAAK,OAAO;AAKb,YAAQ,KAJU,yGAIO;AACzB,WAAO;;AAIX,UACE,oBAAC,OAAD;IACE,GAAI;IACJ,GAAI,cAAc;IAClB,MAAM,KAAK;IACX,CAAA;EAGN,KAAK,QACH,QACE,oBAAC,OAAD;GAAO,GAAI;GAAkB,GAAI,cAAc;GAAa;GAAQ,CAAA;EAGxE,KAAK,gBACH,QACE,oBAAC,eAAD;GACE,GAAI;GACJ,GAAI,cAAc;GACZ;GACN,CAAA;EAGN,KAAK,UACH,QAEE,oBAAC,aAAD;GACE,GAAI;GACJ,GAAI,cAAc;GACZ;GACN,CAAA;EAGN;AAKI,WAAQ,MAAM,kLAAyD;AACvE,UAAO"}

package/dist/browser-prod/ModelViewer.mjs

@@ -1,138 +1,120 @@
-import { jsx } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from "react";
 import { useLoadScript } from "./load-script.mjs";
+import { useCallback, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ModelViewer.tsx
+/**
+* The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for
+* the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).
+*
+* The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type="module">` tag when the `<ModelViewer />` component is rendered
+*
+* ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.
+* @publicDocs
+*/
 function ModelViewer(props) {
-  var _a, _b, _c;
-  const [modelViewer, setModelViewer] = useState(
-    void 0
-  );
-  const callbackRef = useCallback((node) => {
-    setModelViewer(node);
-  }, []);
-  const { data, children, className, ...passthroughProps } = props;
-  const modelViewerLoadedStatus = useLoadScript(
-    "https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js",
-    {
-      module: true
-    }
-  );
-  useEffect(() => {
-    const hydrogenEventListener = {
-      error: passthroughProps.onError,
-      load: passthroughProps.onLoad,
-      preload: passthroughProps.onPreload,
-      "model-visibility": passthroughProps.onModelVisibility,
-      progress: passthroughProps.onProgress,
-      "ar-status": passthroughProps.onArStatus,
-      "ar-tracking": passthroughProps.onArTracking,
-      "quick-look-button-tapped": passthroughProps.onQuickLookButtonTapped,
-      "camera-change": passthroughProps.onCameraChange,
-      "environment-change": passthroughProps.onEnvironmentChange,
-      play: passthroughProps.onPlay,
-      pause: passthroughProps.onPause,
-      "scene-graph-ready": passthroughProps.onSceneGraphReady
-    };
-    if (!modelViewer) {
-      return;
-    }
-    Object.entries(hydrogenEventListener).forEach(
-      ([eventName, callbackFunc]) => {
-        if (callbackFunc) {
-          modelViewer.addEventListener(eventName, callbackFunc);
-        }
-      }
-    );
-    return () => {
-      if (modelViewer == null) {
-        return;
-      }
-      Object.entries(hydrogenEventListener).forEach(
-        ([eventName, callbackFunc]) => {
-          if (callbackFunc) {
-            modelViewer.removeEventListener(eventName, callbackFunc);
-          }
-        }
-      );
-    };
-  }, [
-    modelViewer,
-    passthroughProps.onArStatus,
-    passthroughProps.onArTracking,
-    passthroughProps.onCameraChange,
-    passthroughProps.onEnvironmentChange,
-    passthroughProps.onError,
-    passthroughProps.onLoad,
-    passthroughProps.onModelVisibility,
-    passthroughProps.onPause,
-    passthroughProps.onPlay,
-    passthroughProps.onPreload,
-    passthroughProps.onProgress,
-    passthroughProps.onQuickLookButtonTapped,
-    passthroughProps.onSceneGraphReady
-  ]);
-  if (modelViewerLoadedStatus !== "done") {
-    return null;
-  }
-  if (!((_b = (_a = data.sources) == null ? void 0 : _a[0]) == null ? void 0 : _b.url)) {
-    const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;
-    {
-      console.error(sourcesUrlError);
-      return null;
-    }
-  }
-  return /* @__PURE__ */ jsx(
-    "model-viewer",
-    {
-      ref: callbackRef,
-      ...passthroughProps,
-      class: className,
-      id: passthroughProps.id ?? data.id,
-      src: data.sources[0].url,
-      alt: data.alt ?? null,
-      "camera-controls": passthroughProps.cameraControls ?? true,
-      poster: (passthroughProps.poster || ((_c = data.previewImage) == null ? void 0 : _c.url)) ?? null,
-      autoplay: passthroughProps.autoplay ?? 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": passthroughProps.interpolationDecay ?? 100,
-      "skybox-image": passthroughProps.skyboxImage,
-      "environment-image": passthroughProps.environmentImage,
-      exposure: passthroughProps.exposure,
-      "shadow-intensity": passthroughProps.shadowIntensity ?? 0,
-      "shadow-softness": passthroughProps.shadowSoftness ?? 0,
-      "animation-name": passthroughProps.animationName,
-      "animation-crossfade-duration": passthroughProps.animationCrossfadeDuration,
-      "variant-name": passthroughProps.variantName,
-      orientation: passthroughProps.orientation,
-      scale: passthroughProps.scale,
-      children
-    }
-  );
+	const [modelViewer, setModelViewer] = useState(void 0);
+	const callbackRef = useCallback((node) => {
+		setModelViewer(node);
+	}, []);
+	const { data, children, className, ...passthroughProps } = props;
+	const modelViewerLoadedStatus = useLoadScript("https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js", { module: true });
+	useEffect(() => {
+		const hydrogenEventListener = {
+			error: passthroughProps.onError,
+			load: passthroughProps.onLoad,
+			preload: passthroughProps.onPreload,
+			"model-visibility": passthroughProps.onModelVisibility,
+			progress: passthroughProps.onProgress,
+			"ar-status": passthroughProps.onArStatus,
+			"ar-tracking": passthroughProps.onArTracking,
+			"quick-look-button-tapped": passthroughProps.onQuickLookButtonTapped,
+			"camera-change": passthroughProps.onCameraChange,
+			"environment-change": passthroughProps.onEnvironmentChange,
+			play: passthroughProps.onPlay,
+			pause: passthroughProps.onPause,
+			"scene-graph-ready": passthroughProps.onSceneGraphReady
+		};
+		if (!modelViewer) return;
+		Object.entries(hydrogenEventListener).forEach(([eventName, callbackFunc]) => {
+			if (callbackFunc) modelViewer.addEventListener(eventName, callbackFunc);
+		});
+		return () => {
+			if (modelViewer == null) return;
+			Object.entries(hydrogenEventListener).forEach(([eventName, callbackFunc]) => {
+				if (callbackFunc) modelViewer.removeEventListener(eventName, callbackFunc);
+			});
+		};
+	}, [
+		modelViewer,
+		passthroughProps.onArStatus,
+		passthroughProps.onArTracking,
+		passthroughProps.onCameraChange,
+		passthroughProps.onEnvironmentChange,
+		passthroughProps.onError,
+		passthroughProps.onLoad,
+		passthroughProps.onModelVisibility,
+		passthroughProps.onPause,
+		passthroughProps.onPlay,
+		passthroughProps.onPreload,
+		passthroughProps.onProgress,
+		passthroughProps.onQuickLookButtonTapped,
+		passthroughProps.onSceneGraphReady
+	]);
+	if (modelViewerLoadedStatus !== "done") return null;
+	if (!data.sources?.[0]?.url) {
+		console.error(`<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`);
+		return null;
+	}
+	return /* @__PURE__ */ jsx("model-viewer", {
+		ref: callbackRef,
+		...passthroughProps,
+		class: className,
+		id: passthroughProps.id ?? data.id,
+		src: data.sources[0].url,
+		alt: data.alt ?? null,
+		"camera-controls": passthroughProps.cameraControls ?? true,
+		poster: (passthroughProps.poster || data.previewImage?.url) ?? null,
+		autoplay: passthroughProps.autoplay ?? 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": passthroughProps.interpolationDecay ?? 100,
+		"skybox-image": passthroughProps.skyboxImage,
+		"environment-image": passthroughProps.environmentImage,
+		exposure: passthroughProps.exposure,
+		"shadow-intensity": passthroughProps.shadowIntensity ?? 0,
+		"shadow-softness": passthroughProps.shadowSoftness ?? 0,
+		"animation-name": passthroughProps.animationName,
+		"animation-crossfade-duration": passthroughProps.animationCrossfadeDuration,
+		"variant-name": passthroughProps.variantName,
+		orientation: passthroughProps.orientation,
+		scale: passthroughProps.scale,
+		children
+	});
 }
-export {
-  ModelViewer
-};
-//# sourceMappingURL=ModelViewer.mjs.map
+//#endregion
+export { ModelViewer };
+
+//# sourceMappingURL=ModelViewer.mjs.map

package/dist/browser-prod/ModelViewer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModelViewer.mjs","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'model-viewer': PartialDeep<\n        ModelViewerElement,\n        {recurseIntoArrays: true}\n      >;\n    }\n  }\n}\n\ntype ModelViewerProps = Omit<\n  PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n  'src'\n> &\n  ModelViewerBaseProps;\n\ntype ModelViewerBaseProps = {\n  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2026-04/objects/model3d). */\n  data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n  /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */\n  onError?: (event: Event) => void;\n  /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */\n  onLoad?: (event: Event) => void;\n  /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */\n  onPreload?: (event: Event) => void;\n  /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */\n  onModelVisibility?: (event: Event) => void;\n  /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */\n  onProgress?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */\n  onArStatus?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */\n  onArTracking?: (event: Event) => void;\n  /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */\n  onQuickLookButtonTapped?: (event: Event) => void;\n  /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */\n  onCameraChange?: (event: Event) => void;\n  /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange).  */\n  onEnvironmentChange?: (event: Event) => void;\n  /**  The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */\n  onPlay?: (event: Event) => void;\n  /**  The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */\n  onPause?: (event: Event) => void;\n  /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */\n  onSceneGraphReady?: (event: Event) => void;\n};\n\n/**\n * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n *\n * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n *\n * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n * @publicDocs\n */\nexport function ModelViewer(props: ModelViewerProps): JSX.Element | null {\n  const [modelViewer, setModelViewer] = useState<undefined | HTMLElement>(\n    undefined,\n  );\n  const callbackRef = useCallback((node: HTMLElement) => {\n    setModelViewer(node);\n  }, []);\n  const {data, children, className, ...passthroughProps} = props;\n\n  const modelViewerLoadedStatus = useLoadScript(\n    'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n    {\n      module: true,\n    },\n  );\n\n  useEffect(() => {\n    const hydrogenEventListener = {\n      error: passthroughProps.onError,\n      load: passthroughProps.onLoad,\n      preload: passthroughProps.onPreload,\n      'model-visibility': passthroughProps.onModelVisibility,\n      progress: passthroughProps.onProgress,\n      'ar-status': passthroughProps.onArStatus,\n      'ar-tracking': passthroughProps.onArTracking,\n      'quick-look-button-tapped': passthroughProps.onQuickLookButtonTapped,\n      'camera-change': passthroughProps.onCameraChange,\n      'environment-change': passthroughProps.onEnvironmentChange,\n      play: passthroughProps.onPlay,\n      pause: passthroughProps.onPause,\n      'scene-graph-ready': passthroughProps.onSceneGraphReady,\n    };\n\n    if (!modelViewer) {\n      return;\n    }\n    Object.entries(hydrogenEventListener).forEach(\n      ([eventName, callbackFunc]) => {\n        if (callbackFunc) {\n          modelViewer.addEventListener(eventName, callbackFunc);\n        }\n      },\n    );\n\n    return (): void => {\n      if (modelViewer == null) {\n        return;\n      }\n      Object.entries(hydrogenEventListener).forEach(\n        ([eventName, callbackFunc]) => {\n          if (callbackFunc) {\n            modelViewer.removeEventListener(eventName, callbackFunc);\n          }\n        },\n      );\n    };\n  }, [\n    modelViewer,\n    passthroughProps.onArStatus,\n    passthroughProps.onArTracking,\n    passthroughProps.onCameraChange,\n    passthroughProps.onEnvironmentChange,\n    passthroughProps.onError,\n    passthroughProps.onLoad,\n    passthroughProps.onModelVisibility,\n    passthroughProps.onPause,\n    passthroughProps.onPlay,\n    passthroughProps.onPreload,\n    passthroughProps.onProgress,\n    passthroughProps.onQuickLookButtonTapped,\n    passthroughProps.onSceneGraphReady,\n  ]);\n\n  if (modelViewerLoadedStatus !== 'done') {\n    // TODO: What do we want to display while the model-viewer library loads?\n    return null;\n  }\n\n  if (!data.sources?.[0]?.url) {\n    const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(sourcesUrlError);\n    } else {\n      console.error(sourcesUrlError);\n      return null;\n    }\n  }\n\n  if (__HYDROGEN_DEV__ && !data.alt) {\n    console.warn(\n      `<ModelViewer/> requires the 'data.alt' prop for accessibility`,\n    );\n  }\n\n  return (\n    <model-viewer\n      ref={callbackRef}\n      {...passthroughProps}\n      // @ts-expect-error src should exist\n      // @eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      class={className}\n      id={passthroughProps.id ?? data.id}\n      src={data.sources[0].url}\n      alt={data.alt ?? null}\n      camera-controls={passthroughProps.cameraControls ?? true}\n      poster={(passthroughProps.poster || data.previewImage?.url) ?? null}\n      autoplay={passthroughProps.autoplay ?? true}\n      loading={passthroughProps.loading}\n      reveal={passthroughProps.reveal}\n      ar={passthroughProps.ar}\n      ar-modes={passthroughProps.arModes}\n      ar-scale={passthroughProps.arScale}\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      ar-placement={passthroughProps.arPlacement}\n      ios-src={passthroughProps.iosSrc}\n      touch-action={passthroughProps.touchAction}\n      disable-zoom={passthroughProps.disableZoom}\n      orbit-sensitivity={passthroughProps.orbitSensitivity}\n      auto-rotate={passthroughProps.autoRotate}\n      auto-rotate-delay={passthroughProps.autoRotateDelay}\n      // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      rotation-per-second={passthroughProps.rotationPerSecond}\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      interaction-policy={(passthroughProps as any).interactionPolicy}\n      interaction-prompt={passthroughProps.interactionPrompt}\n      interaction-prompt-style={passthroughProps.interactionPromptStyle}\n      interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n      camera-orbit={passthroughProps.cameraOrbit}\n      camera-target={passthroughProps.cameraTarget}\n      field-of-view={passthroughProps.fieldOfView}\n      max-camera-orbit={passthroughProps.maxCameraOrbit}\n      min-camera-orbit={passthroughProps.minCameraOrbit}\n      max-field-of-view={passthroughProps.maxFieldOfView}\n      min-field-of-view={passthroughProps.minFieldOfView}\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      bounds={(passthroughProps as any).bounds}\n      interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n      skybox-image={passthroughProps.skyboxImage}\n      environment-image={passthroughProps.environmentImage}\n      exposure={passthroughProps.exposure}\n      shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n      shadow-softness={passthroughProps.shadowSoftness ?? 0}\n      animation-name={passthroughProps.animationName}\n      animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n      variant-name={passthroughProps.variantName}\n      orientation={passthroughProps.orientation}\n      scale={passthroughProps.scale}\n    >\n      {children}\n    </model-viewer>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ModelViewer.mjs","names":[],"sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'model-viewer': PartialDeep<\n        ModelViewerElement,\n        {recurseIntoArrays: true}\n      >;\n    }\n  }\n}\n\ntype ModelViewerProps = Omit<\n  PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n  'src'\n> &\n  ModelViewerBaseProps;\n\ntype ModelViewerBaseProps = {\n  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2026-04/objects/model3d). */\n  data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n  /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */\n  onError?: (event: Event) => void;\n  /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */\n  onLoad?: (event: Event) => void;\n  /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */\n  onPreload?: (event: Event) => void;\n  /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */\n  onModelVisibility?: (event: Event) => void;\n  /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */\n  onProgress?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */\n  onArStatus?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */\n  onArTracking?: (event: Event) => void;\n  /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */\n  onQuickLookButtonTapped?: (event: Event) => void;\n  /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */\n  onCameraChange?: (event: Event) => void;\n  /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange).  */\n  onEnvironmentChange?: (event: Event) => void;\n  /**  The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */\n  onPlay?: (event: Event) => void;\n  /**  The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */\n  onPause?: (event: Event) => void;\n  /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */\n  onSceneGraphReady?: (event: Event) => void;\n};\n\n/**\n * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n *\n * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n *\n * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n * @publicDocs\n */\nexport function ModelViewer(props: ModelViewerProps): JSX.Element | null {\n  const [modelViewer, setModelViewer] = useState<undefined | HTMLElement>(\n    undefined,\n  );\n  const callbackRef = useCallback((node: HTMLElement) => {\n    setModelViewer(node);\n  }, []);\n  const {data, children, className, ...passthroughProps} = props;\n\n  const modelViewerLoadedStatus = useLoadScript(\n    'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n    {\n      module: true,\n    },\n  );\n\n  useEffect(() => {\n    const hydrogenEventListener = {\n      error: passthroughProps.onError,\n      load: passthroughProps.onLoad,\n      preload: passthroughProps.onPreload,\n      'model-visibility': passthroughProps.onModelVisibility,\n      progress: passthroughProps.onProgress,\n      'ar-status': passthroughProps.onArStatus,\n      'ar-tracking': passthroughProps.onArTracking,\n      'quick-look-button-tapped': passthroughProps.onQuickLookButtonTapped,\n      'camera-change': passthroughProps.onCameraChange,\n      'environment-change': passthroughProps.onEnvironmentChange,\n      play: passthroughProps.onPlay,\n      pause: passthroughProps.onPause,\n      'scene-graph-ready': passthroughProps.onSceneGraphReady,\n    };\n\n    if (!modelViewer) {\n      return;\n    }\n    Object.entries(hydrogenEventListener).forEach(\n      ([eventName, callbackFunc]) => {\n        if (callbackFunc) {\n          modelViewer.addEventListener(eventName, callbackFunc);\n        }\n      },\n    );\n\n    return (): void => {\n      if (modelViewer == null) {\n        return;\n      }\n      Object.entries(hydrogenEventListener).forEach(\n        ([eventName, callbackFunc]) => {\n          if (callbackFunc) {\n            modelViewer.removeEventListener(eventName, callbackFunc);\n          }\n        },\n      );\n    };\n  }, [\n    modelViewer,\n    passthroughProps.onArStatus,\n    passthroughProps.onArTracking,\n    passthroughProps.onCameraChange,\n    passthroughProps.onEnvironmentChange,\n    passthroughProps.onError,\n    passthroughProps.onLoad,\n    passthroughProps.onModelVisibility,\n    passthroughProps.onPause,\n    passthroughProps.onPlay,\n    passthroughProps.onPreload,\n    passthroughProps.onProgress,\n    passthroughProps.onQuickLookButtonTapped,\n    passthroughProps.onSceneGraphReady,\n  ]);\n\n  if (modelViewerLoadedStatus !== 'done') {\n    // TODO: What do we want to display while the model-viewer library loads?\n    return null;\n  }\n\n  if (!data.sources?.[0]?.url) {\n    const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(sourcesUrlError);\n    } else {\n      console.error(sourcesUrlError);\n      return null;\n    }\n  }\n\n  if (__HYDROGEN_DEV__ && !data.alt) {\n    console.warn(\n      `<ModelViewer/> requires the 'data.alt' prop for accessibility`,\n    );\n  }\n\n  return (\n    <model-viewer\n      ref={callbackRef}\n      {...passthroughProps}\n      // @ts-expect-error src should exist\n      // @eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      class={className}\n      id={passthroughProps.id ?? data.id}\n      src={data.sources[0].url}\n      alt={data.alt ?? null}\n      camera-controls={passthroughProps.cameraControls ?? true}\n      poster={(passthroughProps.poster || data.previewImage?.url) ?? null}\n      autoplay={passthroughProps.autoplay ?? true}\n      loading={passthroughProps.loading}\n      reveal={passthroughProps.reveal}\n      ar={passthroughProps.ar}\n      ar-modes={passthroughProps.arModes}\n      ar-scale={passthroughProps.arScale}\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      ar-placement={passthroughProps.arPlacement}\n      ios-src={passthroughProps.iosSrc}\n      touch-action={passthroughProps.touchAction}\n      disable-zoom={passthroughProps.disableZoom}\n      orbit-sensitivity={passthroughProps.orbitSensitivity}\n      auto-rotate={passthroughProps.autoRotate}\n      auto-rotate-delay={passthroughProps.autoRotateDelay}\n      // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      rotation-per-second={passthroughProps.rotationPerSecond}\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      interaction-policy={(passthroughProps as any).interactionPolicy}\n      interaction-prompt={passthroughProps.interactionPrompt}\n      interaction-prompt-style={passthroughProps.interactionPromptStyle}\n      interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n      camera-orbit={passthroughProps.cameraOrbit}\n      camera-target={passthroughProps.cameraTarget}\n      field-of-view={passthroughProps.fieldOfView}\n      max-camera-orbit={passthroughProps.maxCameraOrbit}\n      min-camera-orbit={passthroughProps.minCameraOrbit}\n      max-field-of-view={passthroughProps.maxFieldOfView}\n      min-field-of-view={passthroughProps.minFieldOfView}\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      bounds={(passthroughProps as any).bounds}\n      interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n      skybox-image={passthroughProps.skyboxImage}\n      environment-image={passthroughProps.environmentImage}\n      exposure={passthroughProps.exposure}\n      shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n      shadow-softness={passthroughProps.shadowSoftness ?? 0}\n      animation-name={passthroughProps.animationName}\n      animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n      variant-name={passthroughProps.variantName}\n      orientation={passthroughProps.orientation}\n      scale={passthroughProps.scale}\n    >\n      {children}\n    </model-viewer>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAgEA,SAAgB,YAAY,OAA6C;CACvE,MAAM,CAAC,aAAa,kBAAkB,SACpC,KAAA,EACD;CACD,MAAM,cAAc,aAAa,SAAsB;AACrD,iBAAe,KAAK;IACnB,EAAE,CAAC;CACN,MAAM,EAAC,MAAM,UAAU,WAAW,GAAG,qBAAoB;CAEzD,MAAM,0BAA0B,cAC9B,2EACA,EACE,QAAQ,MACT,CACF;AAED,iBAAgB;EACd,MAAM,wBAAwB;GAC5B,OAAO,iBAAiB;GACxB,MAAM,iBAAiB;GACvB,SAAS,iBAAiB;GAC1B,oBAAoB,iBAAiB;GACrC,UAAU,iBAAiB;GAC3B,aAAa,iBAAiB;GAC9B,eAAe,iBAAiB;GAChC,4BAA4B,iBAAiB;GAC7C,iBAAiB,iBAAiB;GAClC,sBAAsB,iBAAiB;GACvC,MAAM,iBAAiB;GACvB,OAAO,iBAAiB;GACxB,qBAAqB,iBAAiB;GACvC;AAED,MAAI,CAAC,YACH;AAEF,SAAO,QAAQ,sBAAsB,CAAC,SACnC,CAAC,WAAW,kBAAkB;AAC7B,OAAI,aACF,aAAY,iBAAiB,WAAW,aAAa;IAG1D;AAED,eAAmB;AACjB,OAAI,eAAe,KACjB;AAEF,UAAO,QAAQ,sBAAsB,CAAC,SACnC,CAAC,WAAW,kBAAkB;AAC7B,QAAI,aACF,aAAY,oBAAoB,WAAW,aAAa;KAG7D;;IAEF;EACD;EACA,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EAClB,CAAC;AAEF,KAAI,4BAA4B,OAE9B,QAAO;AAGT,KAAI,CAAC,KAAK,UAAU,IAAI,KAAK;AAKzB,UAAQ,MAJc,+HAIQ;AAC9B,SAAO;;AAUX,QACE,oBAAC,gBAAD;EACE,KAAK;EACL,GAAI;EAGJ,OAAO;EACP,IAAI,iBAAiB,MAAM,KAAK;EAChC,KAAK,KAAK,QAAQ,GAAG;EACrB,KAAK,KAAK,OAAO;EACjB,mBAAiB,iBAAiB,kBAAkB;EACpD,SAAS,iBAAiB,UAAU,KAAK,cAAc,QAAQ;EAC/D,UAAU,iBAAiB,YAAY;EACvC,SAAS,iBAAiB;EAC1B,QAAQ,iBAAiB;EACzB,IAAI,iBAAiB;EACrB,YAAU,iBAAiB;EAC3B,YAAU,iBAAiB;EAE3B,gBAAc,iBAAiB;EAC/B,WAAS,iBAAiB;EAC1B,gBAAc,iBAAiB;EAC/B,gBAAc,iBAAiB;EAC/B,qBAAmB,iBAAiB;EACpC,eAAa,iBAAiB;EAC9B,qBAAmB,iBAAiB;EAGpC,uBAAqB,iBAAiB;EAEtC,sBAAqB,iBAAyB;EAC9C,sBAAoB,iBAAiB;EACrC,4BAA0B,iBAAiB;EAC3C,gCAA8B,iBAAiB;EAC/C,gBAAc,iBAAiB;EAC/B,iBAAe,iBAAiB;EAChC,iBAAe,iBAAiB;EAChC,oBAAkB,iBAAiB;EACnC,oBAAkB,iBAAiB;EACnC,qBAAmB,iBAAiB;EACpC,qBAAmB,iBAAiB;EAEpC,QAAS,iBAAyB;EAClC,uBAAqB,iBAAiB,sBAAsB;EAC5D,gBAAc,iBAAiB;EAC/B,qBAAmB,iBAAiB;EACpC,UAAU,iBAAiB;EAC3B,oBAAkB,iBAAiB,mBAAmB;EACtD,mBAAiB,iBAAiB,kBAAkB;EACpD,kBAAgB,iBAAiB;EACjC,gCAA8B,iBAAiB;EAC/C,gBAAc,iBAAiB;EAC/B,aAAa,iBAAiB;EAC9B,OAAO,iBAAiB;EAEvB;EACY,CAAA"}