@shopify/hydrogen-react 0.0.0-next-585a03d → 0.0.0-next-32f1381

package/dist/{prod/Image.mjs.map → node-prod/Image.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","sources":["../../src/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getShopifyImageDimensions,\n  shopifyImageLoader,\n  addImageSizeParametersToUrl,\n  IMG_SRC_SET_SIZES,\n} from './image-size.js';\nimport type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep, Simplify} from 'type-fest';\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type ShopifyLoaderOptions = {\n  crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';\n  scale?: 2 | 3;\n  width?: HtmlImageProps['width'] | ImageType['width'];\n  height?: HtmlImageProps['height'] | ImageType['height'];\n};\nexport type ShopifyLoaderParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n  }\n>;\nexport type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {\n  /** An object with fields that correspond to the Storefront API's\n   * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).\n   * The `data` prop is required.\n   */\n  data: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A custom function that generates the image URL. Parameters passed in\n   * are `ShopifyLoaderParams`\n   */\n  loader?: (params: ShopifyLoaderParams) => string;\n  /** An object of `loader` function options. For example, if the `loader` function\n   * requires a `scale` option, then the value can be a property of the\n   * `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.\n   */\n  loaderOptions?: ShopifyLoaderOptions;\n  /**\n   * `src` isn't used, and should instead be passed as part of the `data` object\n   */\n  src?: never;\n  /**\n   * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.\n   */\n  widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n};\n\n/**\n * The `Image` component renders an image for the Storefront API's\n * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.\n *\n * An image's width and height are determined using the following priority list:\n * 1. The width and height values for the `loaderOptions` prop\n * 2. The width and height values for bare props\n * 3. The width and height values for the `data` prop\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing\n * value will remain as `null`\n */\nexport function Image({\n  data,\n  width,\n  height,\n  loading,\n  loader = shopifyImageLoader,\n  loaderOptions,\n  widths,\n  decoding = 'async',\n  ...rest\n}: ShopifyImageProps) {\n  if (!data.url) {\n    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${\n      data.id ?? 'no ID provided'\n    }`;\n\n    if (__HYDROGEN_DEV__) {\n      throw new Error(missingUrlError);\n    } else {\n      console.error(missingUrlError);\n    }\n\n    return null;\n  }\n\n  if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {\n    console.warn(\n      `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  const {width: imgElementWidth, height: imgElementHeight} =\n    getShopifyImageDimensions({\n      data,\n      loaderOptions,\n      elementProps: {\n        width,\n        height,\n      },\n    });\n\n  if (__HYDROGEN_DEV__ && (!imgElementWidth || !imgElementHeight)) {\n    console.warn(\n      `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  let finalSrc = data.url;\n\n  if (loader) {\n    finalSrc = loader({\n      ...loaderOptions,\n      src: data.url,\n      width: imgElementWidth,\n      height: imgElementHeight,\n    });\n    if (typeof finalSrc !== 'string' || !finalSrc) {\n      throw new Error(\n        `<Image/>: 'loader' did not return a valid string. Image: ${\n          data.id ?? data.url\n        }`\n      );\n    }\n  }\n\n  // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width\n  // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original\n  const maxWidth =\n    width && imgElementWidth && width < imgElementWidth\n      ? width\n      : imgElementWidth;\n  const finalSrcset =\n    rest.srcSet ??\n    internalImageSrcSet({\n      ...loaderOptions,\n      widths,\n      src: data.url,\n      width: maxWidth,\n      height: imgElementHeight,\n      loader,\n    });\n\n  /* eslint-disable hydrogen/prefer-image-component */\n  return (\n    <img\n      id={data.id ?? ''}\n      alt={data.altText ?? rest.alt ?? ''}\n      loading={loading ?? 'lazy'}\n      {...rest}\n      src={finalSrc}\n      width={imgElementWidth ?? undefined}\n      height={imgElementHeight ?? undefined}\n      srcSet={finalSrcset}\n      decoding={decoding}\n    />\n  );\n  /* eslint-enable hydrogen/prefer-image-component */\n}\n\ntype InternalShopifySrcSetGeneratorsParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n    widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n    loader?: (params: ShopifyLoaderParams) => string;\n  }\n>;\nfunction internalImageSrcSet({\n  src,\n  width,\n  crop,\n  scale,\n  widths,\n  loader,\n  height,\n}: InternalShopifySrcSetGeneratorsParams) {\n  const hasCustomWidths = widths && Array.isArray(widths);\n  if (hasCustomWidths && widths.some((size) => isNaN(size as number))) {\n    throw new Error(\n      `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`\n    );\n  }\n\n  let aspectRatio = 1;\n  if (width && height) {\n    aspectRatio = Number(height) / Number(width);\n  }\n\n  let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;\n  if (\n    !hasCustomWidths &&\n    width &&\n    width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]\n  ) {\n    setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);\n  }\n  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;\n  return setSizes\n    .map(\n      (size) =>\n        `${srcGenerator({\n          src,\n          width: size,\n          // height is not applied if there is no crop\n          // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size\n          height: crop ? Number(size) * aspectRatio : undefined,\n          crop,\n          scale,\n        })} ${size}w`\n    )\n    .join(', ');\n}\n"],"names":["Image","data","width","height","loading","loader","shopifyImageLoader","loaderOptions","widths","decoding","rest","url","missingUrlError","id","console","error","imgElementWidth","imgElementHeight","getShopifyImageDimensions","elementProps","finalSrc","src","Error","maxWidth","finalSrcset","srcSet","internalImageSrcSet","altText","alt","undefined","crop","scale","hasCustomWidths","Array","isArray","some","size","isNaN","aspectRatio","Number","setSizes","IMG_SRC_SET_SIZES","length","filter","srcGenerator","addImageSizeParametersToUrl","map","join"],"mappings":";;AA6DO,SAASA,MAAM;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,KACRC;AATiB,GAUA;;AAChB,MAAA,CAACT,KAAKU,KAAK;AACPC,UAAAA,kBAAmB,kEACvBX,UAAKY,OAALZ,YAAW;AAKN;AACLa,cAAQC,MAAMH,eAAd;AAAA,IACD;AAEM,WAAA;AAAA,EACR;AAUK,QAAA;AAAA,IAACV,OAAOc;AAAAA,IAAiBb,QAAQc;AAAAA,MACrCC,0BAA0B;AAAA,IACxBjB;AAAAA,IACAM;AAAAA,IACAY,cAAc;AAAA,MACZjB;AAAAA,MACAC;AAAAA,IAFY;AAAA,EAAA,CAHS;AAiB3B,MAAIiB,WAAWnB,KAAKU;AAEpB,MAAIN,QAAQ;AACVe,eAAWf,OAAO;AAAA,MAChB,GAAGE;AAAAA,MACHc,KAAKpB,KAAKU;AAAAA,MACVT,OAAOc;AAAAA,MACPb,QAAQc;AAAAA,IAAAA,CAJO;AAMjB,QAAI,OAAOG,aAAa,YAAY,CAACA,UAAU;AAC7C,YAAM,IAAIE,MACP,6DACCrB,UAAKY,OAALZ,YAAWA,KAAKU,KAFd;AAAA,IAKP;AAAA,EACF;AAID,QAAMY,WACJrB,SAASc,mBAAmBd,QAAQc,kBAChCd,QACAc;AACAQ,QAAAA,eACJd,UAAKe,WAALf,YACAgB,oBAAoB;AAAA,IAClB,GAAGnB;AAAAA,IACHC;AAAAA,IACAa,KAAKpB,KAAKU;AAAAA,IACVT,OAAOqB;AAAAA,IACPpB,QAAQc;AAAAA,IACRZ;AAAAA,EAAAA,CANiB;AAUrB,6BACE,OAAA;AAAA,IACE,KAAIJ,UAAKY,OAALZ,YAAW;AAAA,IACf,MAAKA,gBAAK0B,YAAL1B,YAAgBS,KAAKkB,QAArB3B,YAA4B;AAAA,IACjC,SAASG,4BAAW;AAAA,IAHtB,GAIMM;AAAAA,IACJ,KAAKU;AAAAA,IACL,OAAOJ,4CAAmBa;AAAAA,IAC1B,QAAQZ,8CAAoBY;AAAAA,IAC5B,QAAQL;AAAAA,IACR;AAAA,EAAA,CAVJ;AAcD;AASD,SAASE,oBAAoB;AAAA,EAC3BL;AAAAA,EACAnB;AAAAA,EACA4B;AAAAA,EACAC;AAAAA,EACAvB;AAAAA,EACAH;AAAAA,EACAF;AAP2B,GAQa;AACxC,QAAM6B,kBAAkBxB,UAAUyB,MAAMC,QAAQ1B,MAAd;AAClC,MAAIwB,mBAAmBxB,OAAO2B,KAAMC,UAASC,MAAMD,IAAD,CAA3B,GAA8C;AAC7D,UAAA,IAAId,MACP,8DAA6DD,KAD1D;AAAA,EAGP;AAED,MAAIiB,cAAc;AAClB,MAAIpC,SAASC,QAAQ;AACnBmC,kBAAcC,OAAOpC,MAAD,IAAWoC,OAAOrC,KAAD;AAAA,EACtC;AAEGsC,MAAAA,WAAWR,kBAAkBxB,SAASiC;AAC1C,MACE,CAACT,mBACD9B,SACAA,QAAQuC,kBAAkBA,kBAAkBC,SAAS,IACrD;AACAF,eAAWC,kBAAkBE,OAAQP,CAASA,SAAAA,QAAQlC,KAA3C;AAAA,EACZ;AACK0C,QAAAA,eAAevC,SAASA,SAASwC;AACvC,SAAOL,SACJM,IACEV,CACE,SAAA,GAAEQ,aAAa;AAAA,IACdvB;AAAAA,IACAnB,OAAOkC;AAAAA,IAGPjC,QAAQ2B,OAAOS,OAAOH,IAAD,IAASE,cAAcT;AAAAA,IAC5CC;AAAAA,IACAC;AAAAA,EAAAA,CAPa,KAQTK,OAXL,EAaJW,KAAK,IAbD;AAcR;"}
+{"version":3,"file":"Image.cjs","sources":["../../src/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getShopifyImageDimensions,\n  shopifyImageLoader,\n  addImageSizeParametersToUrl,\n  IMG_SRC_SET_SIZES,\n} from './image-size.js';\nimport type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep, Simplify} from 'type-fest';\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type ShopifyLoaderOptions = {\n  crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';\n  scale?: 2 | 3;\n  width?: HtmlImageProps['width'] | ImageType['width'];\n  height?: HtmlImageProps['height'] | ImageType['height'];\n};\nexport type ShopifyLoaderParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n  }\n>;\nexport type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {\n  /** An object with fields that correspond to the Storefront API's\n   * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).\n   * The `data` prop is required.\n   */\n  data: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A custom function that generates the image URL. Parameters passed in\n   * are `ShopifyLoaderParams`\n   */\n  loader?: (params: ShopifyLoaderParams) => string;\n  /** An object of `loader` function options. For example, if the `loader` function\n   * requires a `scale` option, then the value can be a property of the\n   * `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.\n   */\n  loaderOptions?: ShopifyLoaderOptions;\n  /**\n   * `src` isn't used, and should instead be passed as part of the `data` object\n   */\n  src?: never;\n  /**\n   * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.\n   */\n  widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n};\n\n/**\n * The `Image` component renders an image for the Storefront API's\n * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.\n *\n * An image's width and height are determined using the following priority list:\n * 1. The width and height values for the `loaderOptions` prop\n * 2. The width and height values for bare props\n * 3. The width and height values for the `data` prop\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing\n * value will remain as `null`\n */\nexport function Image({\n  data,\n  width,\n  height,\n  loading,\n  loader = shopifyImageLoader,\n  loaderOptions,\n  widths,\n  decoding = 'async',\n  ...rest\n}: ShopifyImageProps) {\n  if (!data.url) {\n    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${\n      data.id ?? 'no ID provided'\n    }`;\n\n    if (__HYDROGEN_DEV__) {\n      throw new Error(missingUrlError);\n    } else {\n      console.error(missingUrlError);\n    }\n\n    return null;\n  }\n\n  if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {\n    console.warn(\n      `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  const {width: imgElementWidth, height: imgElementHeight} =\n    getShopifyImageDimensions({\n      data,\n      loaderOptions,\n      elementProps: {\n        width,\n        height,\n      },\n    });\n\n  if (__HYDROGEN_DEV__ && (!imgElementWidth || !imgElementHeight)) {\n    console.warn(\n      `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  let finalSrc = data.url;\n\n  if (loader) {\n    finalSrc = loader({\n      ...loaderOptions,\n      src: data.url,\n      width: imgElementWidth,\n      height: imgElementHeight,\n    });\n    if (typeof finalSrc !== 'string' || !finalSrc) {\n      throw new Error(\n        `<Image/>: 'loader' did not return a valid string. Image: ${\n          data.id ?? data.url\n        }`\n      );\n    }\n  }\n\n  // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width\n  // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original\n  const maxWidth =\n    width && imgElementWidth && width < imgElementWidth\n      ? width\n      : imgElementWidth;\n  const finalSrcset =\n    rest.srcSet ??\n    internalImageSrcSet({\n      ...loaderOptions,\n      widths,\n      src: data.url,\n      width: maxWidth,\n      height: imgElementHeight,\n      loader,\n    });\n\n  /* eslint-disable hydrogen/prefer-image-component */\n  return (\n    <img\n      id={data.id ?? ''}\n      alt={data.altText ?? rest.alt ?? ''}\n      loading={loading ?? 'lazy'}\n      {...rest}\n      src={finalSrc}\n      width={imgElementWidth ?? undefined}\n      height={imgElementHeight ?? undefined}\n      srcSet={finalSrcset}\n      decoding={decoding}\n    />\n  );\n  /* eslint-enable hydrogen/prefer-image-component */\n}\n\ntype InternalShopifySrcSetGeneratorsParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n    widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n    loader?: (params: ShopifyLoaderParams) => string;\n  }\n>;\nfunction internalImageSrcSet({\n  src,\n  width,\n  crop,\n  scale,\n  widths,\n  loader,\n  height,\n}: InternalShopifySrcSetGeneratorsParams) {\n  const hasCustomWidths = widths && Array.isArray(widths);\n  if (hasCustomWidths && widths.some((size) => isNaN(size as number))) {\n    throw new Error(\n      `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`\n    );\n  }\n\n  let aspectRatio = 1;\n  if (width && height) {\n    aspectRatio = Number(height) / Number(width);\n  }\n\n  let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;\n  if (\n    !hasCustomWidths &&\n    width &&\n    width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]\n  ) {\n    setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);\n  }\n  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;\n  return setSizes\n    .map(\n      (size) =>\n        `${srcGenerator({\n          src,\n          width: size,\n          // height is not applied if there is no crop\n          // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size\n          height: crop ? Number(size) * aspectRatio : undefined,\n          crop,\n          scale,\n        })} ${size}w`\n    )\n    .join(', ');\n}\n"],"names":["Image","data","width","height","loading","loader","shopifyImageLoader","loaderOptions","widths","decoding","rest","url","missingUrlError","id","console","error","imgElementWidth","imgElementHeight","getShopifyImageDimensions","elementProps","finalSrc","src","Error","maxWidth","finalSrcset","srcSet","internalImageSrcSet","altText","alt","undefined","crop","scale","hasCustomWidths","Array","isArray","some","size","isNaN","aspectRatio","Number","setSizes","IMG_SRC_SET_SIZES","length","filter","srcGenerator","addImageSizeParametersToUrl","map","join"],"mappings":";;;;AA6DO,SAASA,MAAM;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC,UAAAA;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,KACRC;AATiB,GAUA;;AAChB,MAAA,CAACT,KAAKU,KAAK;AACPC,UAAAA,kBAAmB,kEACvBX,UAAKY,OAALZ,YAAW;AAKN;AACLa,cAAQC,MAAMH,eAAd;AAAA,IACD;AAEM,WAAA;AAAA,EACR;AAUK,QAAA;AAAA,IAACV,OAAOc;AAAAA,IAAiBb,QAAQc;AAAAA,MACrCC,oCAA0B;AAAA,IACxBjB;AAAAA,IACAM;AAAAA,IACAY,cAAc;AAAA,MACZjB;AAAAA,MACAC;AAAAA,IAFY;AAAA,EAAA,CAHS;AAiB3B,MAAIiB,WAAWnB,KAAKU;AAEpB,MAAIN,QAAQ;AACVe,eAAWf,OAAO;AAAA,MAChB,GAAGE;AAAAA,MACHc,KAAKpB,KAAKU;AAAAA,MACVT,OAAOc;AAAAA,MACPb,QAAQc;AAAAA,IAAAA,CAJO;AAMjB,QAAI,OAAOG,aAAa,YAAY,CAACA,UAAU;AAC7C,YAAM,IAAIE,MACP,6DACCrB,UAAKY,OAALZ,YAAWA,KAAKU,KAFd;AAAA,IAKP;AAAA,EACF;AAID,QAAMY,WACJrB,SAASc,mBAAmBd,QAAQc,kBAChCd,QACAc;AACAQ,QAAAA,eACJd,UAAKe,WAALf,YACAgB,oBAAoB;AAAA,IAClB,GAAGnB;AAAAA,IACHC;AAAAA,IACAa,KAAKpB,KAAKU;AAAAA,IACVT,OAAOqB;AAAAA,IACPpB,QAAQc;AAAAA,IACRZ;AAAAA,EAAAA,CANiB;AAUrB,wCACE,OAAA;AAAA,IACE,KAAIJ,UAAKY,OAALZ,YAAW;AAAA,IACf,MAAKA,gBAAK0B,YAAL1B,YAAgBS,KAAKkB,QAArB3B,YAA4B;AAAA,IACjC,SAASG,4BAAW;AAAA,IAHtB,GAIMM;AAAAA,IACJ,KAAKU;AAAAA,IACL,OAAOJ,4CAAmBa;AAAAA,IAC1B,QAAQZ,8CAAoBY;AAAAA,IAC5B,QAAQL;AAAAA,IACR;AAAA,EAAA,CAVJ;AAcD;AASD,SAASE,oBAAoB;AAAA,EAC3BL;AAAAA,EACAnB;AAAAA,EACA4B;AAAAA,EACAC;AAAAA,EACAvB;AAAAA,EACAH;AAAAA,EACAF;AAP2B,GAQa;AACxC,QAAM6B,kBAAkBxB,UAAUyB,MAAMC,QAAQ1B,MAAd;AAClC,MAAIwB,mBAAmBxB,OAAO2B,KAAMC,UAASC,MAAMD,IAAD,CAA3B,GAA8C;AAC7D,UAAA,IAAId,MACP,8DAA6DD,KAD1D;AAAA,EAGP;AAED,MAAIiB,cAAc;AAClB,MAAIpC,SAASC,QAAQ;AACnBmC,kBAAcC,OAAOpC,MAAD,IAAWoC,OAAOrC,KAAD;AAAA,EACtC;AAEGsC,MAAAA,WAAWR,kBAAkBxB,SAASiC;AAC1C,MACE,CAACT,mBACD9B,SACAA,QAAQuC,UAAkBA,kBAAAA,4BAAkBC,SAAS,IACrD;AACAF,eAAWC,UAAkBE,kBAAAA,OAAQP,CAASA,SAAAA,QAAQlC,KAA3C;AAAA,EACZ;AACK0C,QAAAA,eAAevC,SAASA,SAASwC;AACvC,SAAOL,SACJM,IACEV,CACE,SAAA,GAAEQ,aAAa;AAAA,IACdvB;AAAAA,IACAnB,OAAOkC;AAAAA,IAGPjC,QAAQ2B,OAAOS,OAAOH,IAAD,IAASE,cAAcT;AAAAA,IAC5CC;AAAAA,IACAC;AAAAA,EAAAA,CAPa,KAQTK,OAXL,EAaJW,KAAK,IAbD;AAcR;;"}

package/dist/node-prod/Image.js

@@ -0,0 +1,99 @@
+import { getShopifyImageDimensions, shopifyImageLoader, IMG_SRC_SET_SIZES, addImageSizeParametersToUrl } from "./image-size.js";
+import { jsx } from "react/jsx-runtime";
+function Image({
+  data,
+  width,
+  height,
+  loading,
+  loader = shopifyImageLoader,
+  loaderOptions,
+  widths,
+  decoding = "async",
+  ...rest
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  if (!data.url) {
+    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${(_a = data.id) != null ? _a : "no ID provided"}`;
+    {
+      console.error(missingUrlError);
+    }
+    return null;
+  }
+  const {
+    width: imgElementWidth,
+    height: imgElementHeight
+  } = getShopifyImageDimensions({
+    data,
+    loaderOptions,
+    elementProps: {
+      width,
+      height
+    }
+  });
+  let finalSrc = data.url;
+  if (loader) {
+    finalSrc = loader({
+      ...loaderOptions,
+      src: data.url,
+      width: imgElementWidth,
+      height: imgElementHeight
+    });
+    if (typeof finalSrc !== "string" || !finalSrc) {
+      throw new Error(`<Image/>: 'loader' did not return a valid string. Image: ${(_b = data.id) != null ? _b : data.url}`);
+    }
+  }
+  const maxWidth = width && imgElementWidth && width < imgElementWidth ? width : imgElementWidth;
+  const finalSrcset = (_c = rest.srcSet) != null ? _c : internalImageSrcSet({
+    ...loaderOptions,
+    widths,
+    src: data.url,
+    width: maxWidth,
+    height: imgElementHeight,
+    loader
+  });
+  return /* @__PURE__ */ jsx("img", {
+    id: (_d = data.id) != null ? _d : "",
+    alt: (_f = (_e = data.altText) != null ? _e : rest.alt) != null ? _f : "",
+    loading: loading != null ? loading : "lazy",
+    ...rest,
+    src: finalSrc,
+    width: imgElementWidth != null ? imgElementWidth : void 0,
+    height: imgElementHeight != null ? imgElementHeight : void 0,
+    srcSet: finalSrcset,
+    decoding
+  });
+}
+function internalImageSrcSet({
+  src,
+  width,
+  crop,
+  scale,
+  widths,
+  loader,
+  height
+}) {
+  const hasCustomWidths = widths && Array.isArray(widths);
+  if (hasCustomWidths && widths.some((size) => isNaN(size))) {
+    throw new Error(`<Image/>: the 'widths' must be an array of numbers. Image: ${src}`);
+  }
+  let aspectRatio = 1;
+  if (width && height) {
+    aspectRatio = Number(height) / Number(width);
+  }
+  let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;
+  if (!hasCustomWidths && width && width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]) {
+    setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);
+  }
+  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;
+  return setSizes.map((size) => `${srcGenerator({
+    src,
+    width: size,
+    height: crop ? Number(size) * aspectRatio : void 0,
+    crop,
+    scale
+  })} ${size}w`).join(", ");
+}
+export {
+  Image
+};
+//# sourceMappingURL=Image.js.map

package/dist/node-prod/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sources":["../../src/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getShopifyImageDimensions,\n  shopifyImageLoader,\n  addImageSizeParametersToUrl,\n  IMG_SRC_SET_SIZES,\n} from './image-size.js';\nimport type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep, Simplify} from 'type-fest';\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type ShopifyLoaderOptions = {\n  crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';\n  scale?: 2 | 3;\n  width?: HtmlImageProps['width'] | ImageType['width'];\n  height?: HtmlImageProps['height'] | ImageType['height'];\n};\nexport type ShopifyLoaderParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n  }\n>;\nexport type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {\n  /** An object with fields that correspond to the Storefront API's\n   * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).\n   * The `data` prop is required.\n   */\n  data: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A custom function that generates the image URL. Parameters passed in\n   * are `ShopifyLoaderParams`\n   */\n  loader?: (params: ShopifyLoaderParams) => string;\n  /** An object of `loader` function options. For example, if the `loader` function\n   * requires a `scale` option, then the value can be a property of the\n   * `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.\n   */\n  loaderOptions?: ShopifyLoaderOptions;\n  /**\n   * `src` isn't used, and should instead be passed as part of the `data` object\n   */\n  src?: never;\n  /**\n   * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.\n   */\n  widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n};\n\n/**\n * The `Image` component renders an image for the Storefront API's\n * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.\n *\n * An image's width and height are determined using the following priority list:\n * 1. The width and height values for the `loaderOptions` prop\n * 2. The width and height values for bare props\n * 3. The width and height values for the `data` prop\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing\n * value will remain as `null`\n */\nexport function Image({\n  data,\n  width,\n  height,\n  loading,\n  loader = shopifyImageLoader,\n  loaderOptions,\n  widths,\n  decoding = 'async',\n  ...rest\n}: ShopifyImageProps) {\n  if (!data.url) {\n    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${\n      data.id ?? 'no ID provided'\n    }`;\n\n    if (__HYDROGEN_DEV__) {\n      throw new Error(missingUrlError);\n    } else {\n      console.error(missingUrlError);\n    }\n\n    return null;\n  }\n\n  if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {\n    console.warn(\n      `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  const {width: imgElementWidth, height: imgElementHeight} =\n    getShopifyImageDimensions({\n      data,\n      loaderOptions,\n      elementProps: {\n        width,\n        height,\n      },\n    });\n\n  if (__HYDROGEN_DEV__ && (!imgElementWidth || !imgElementHeight)) {\n    console.warn(\n      `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  let finalSrc = data.url;\n\n  if (loader) {\n    finalSrc = loader({\n      ...loaderOptions,\n      src: data.url,\n      width: imgElementWidth,\n      height: imgElementHeight,\n    });\n    if (typeof finalSrc !== 'string' || !finalSrc) {\n      throw new Error(\n        `<Image/>: 'loader' did not return a valid string. Image: ${\n          data.id ?? data.url\n        }`\n      );\n    }\n  }\n\n  // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width\n  // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original\n  const maxWidth =\n    width && imgElementWidth && width < imgElementWidth\n      ? width\n      : imgElementWidth;\n  const finalSrcset =\n    rest.srcSet ??\n    internalImageSrcSet({\n      ...loaderOptions,\n      widths,\n      src: data.url,\n      width: maxWidth,\n      height: imgElementHeight,\n      loader,\n    });\n\n  /* eslint-disable hydrogen/prefer-image-component */\n  return (\n    <img\n      id={data.id ?? ''}\n      alt={data.altText ?? rest.alt ?? ''}\n      loading={loading ?? 'lazy'}\n      {...rest}\n      src={finalSrc}\n      width={imgElementWidth ?? undefined}\n      height={imgElementHeight ?? undefined}\n      srcSet={finalSrcset}\n      decoding={decoding}\n    />\n  );\n  /* eslint-enable hydrogen/prefer-image-component */\n}\n\ntype InternalShopifySrcSetGeneratorsParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n    widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n    loader?: (params: ShopifyLoaderParams) => string;\n  }\n>;\nfunction internalImageSrcSet({\n  src,\n  width,\n  crop,\n  scale,\n  widths,\n  loader,\n  height,\n}: InternalShopifySrcSetGeneratorsParams) {\n  const hasCustomWidths = widths && Array.isArray(widths);\n  if (hasCustomWidths && widths.some((size) => isNaN(size as number))) {\n    throw new Error(\n      `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`\n    );\n  }\n\n  let aspectRatio = 1;\n  if (width && height) {\n    aspectRatio = Number(height) / Number(width);\n  }\n\n  let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;\n  if (\n    !hasCustomWidths &&\n    width &&\n    width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]\n  ) {\n    setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);\n  }\n  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;\n  return setSizes\n    .map(\n      (size) =>\n        `${srcGenerator({\n          src,\n          width: size,\n          // height is not applied if there is no crop\n          // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size\n          height: crop ? Number(size) * aspectRatio : undefined,\n          crop,\n          scale,\n        })} ${size}w`\n    )\n    .join(', ');\n}\n"],"names":["Image","data","width","height","loading","loader","shopifyImageLoader","loaderOptions","widths","decoding","rest","url","missingUrlError","id","console","error","imgElementWidth","imgElementHeight","getShopifyImageDimensions","elementProps","finalSrc","src","Error","maxWidth","finalSrcset","srcSet","internalImageSrcSet","altText","alt","undefined","crop","scale","hasCustomWidths","Array","isArray","some","size","isNaN","aspectRatio","Number","setSizes","IMG_SRC_SET_SIZES","length","filter","srcGenerator","addImageSizeParametersToUrl","map","join"],"mappings":";;AA6DO,SAASA,MAAM;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,KACRC;AATiB,GAUA;;AAChB,MAAA,CAACT,KAAKU,KAAK;AACPC,UAAAA,kBAAmB,kEACvBX,UAAKY,OAALZ,YAAW;AAKN;AACLa,cAAQC,MAAMH,eAAd;AAAA,IACD;AAEM,WAAA;AAAA,EACR;AAUK,QAAA;AAAA,IAACV,OAAOc;AAAAA,IAAiBb,QAAQc;AAAAA,MACrCC,0BAA0B;AAAA,IACxBjB;AAAAA,IACAM;AAAAA,IACAY,cAAc;AAAA,MACZjB;AAAAA,MACAC;AAAAA,IAFY;AAAA,EAAA,CAHS;AAiB3B,MAAIiB,WAAWnB,KAAKU;AAEpB,MAAIN,QAAQ;AACVe,eAAWf,OAAO;AAAA,MAChB,GAAGE;AAAAA,MACHc,KAAKpB,KAAKU;AAAAA,MACVT,OAAOc;AAAAA,MACPb,QAAQc;AAAAA,IAAAA,CAJO;AAMjB,QAAI,OAAOG,aAAa,YAAY,CAACA,UAAU;AAC7C,YAAM,IAAIE,MACP,6DACCrB,UAAKY,OAALZ,YAAWA,KAAKU,KAFd;AAAA,IAKP;AAAA,EACF;AAID,QAAMY,WACJrB,SAASc,mBAAmBd,QAAQc,kBAChCd,QACAc;AACAQ,QAAAA,eACJd,UAAKe,WAALf,YACAgB,oBAAoB;AAAA,IAClB,GAAGnB;AAAAA,IACHC;AAAAA,IACAa,KAAKpB,KAAKU;AAAAA,IACVT,OAAOqB;AAAAA,IACPpB,QAAQc;AAAAA,IACRZ;AAAAA,EAAAA,CANiB;AAUrB,6BACE,OAAA;AAAA,IACE,KAAIJ,UAAKY,OAALZ,YAAW;AAAA,IACf,MAAKA,gBAAK0B,YAAL1B,YAAgBS,KAAKkB,QAArB3B,YAA4B;AAAA,IACjC,SAASG,4BAAW;AAAA,IAHtB,GAIMM;AAAAA,IACJ,KAAKU;AAAAA,IACL,OAAOJ,4CAAmBa;AAAAA,IAC1B,QAAQZ,8CAAoBY;AAAAA,IAC5B,QAAQL;AAAAA,IACR;AAAA,EAAA,CAVJ;AAcD;AASD,SAASE,oBAAoB;AAAA,EAC3BL;AAAAA,EACAnB;AAAAA,EACA4B;AAAAA,EACAC;AAAAA,EACAvB;AAAAA,EACAH;AAAAA,EACAF;AAP2B,GAQa;AACxC,QAAM6B,kBAAkBxB,UAAUyB,MAAMC,QAAQ1B,MAAd;AAClC,MAAIwB,mBAAmBxB,OAAO2B,KAAMC,UAASC,MAAMD,IAAD,CAA3B,GAA8C;AAC7D,UAAA,IAAId,MACP,8DAA6DD,KAD1D;AAAA,EAGP;AAED,MAAIiB,cAAc;AAClB,MAAIpC,SAASC,QAAQ;AACnBmC,kBAAcC,OAAOpC,MAAD,IAAWoC,OAAOrC,KAAD;AAAA,EACtC;AAEGsC,MAAAA,WAAWR,kBAAkBxB,SAASiC;AAC1C,MACE,CAACT,mBACD9B,SACAA,QAAQuC,kBAAkBA,kBAAkBC,SAAS,IACrD;AACAF,eAAWC,kBAAkBE,OAAQP,CAASA,SAAAA,QAAQlC,KAA3C;AAAA,EACZ;AACK0C,QAAAA,eAAevC,SAASA,SAASwC;AACvC,SAAOL,SACJM,IACEV,CACE,SAAA,GAAEQ,aAAa;AAAA,IACdvB;AAAAA,IACAnB,OAAOkC;AAAAA,IAGPjC,QAAQ2B,OAAOS,OAAOH,IAAD,IAASE,cAAcT;AAAAA,IAC5CC;AAAAA,IACAC;AAAAA,EAAAA,CAPa,KAQTK,OAXL,EAaJW,KAAK,IAbD;AAcR;"}

package/dist/{prod/MediaFile.js → node-prod/MediaFile.cjs}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Image = require("./Image.js");
-const Video = require("./Video.js");
-const ExternalVideo = require("./ExternalVideo.js");
-const ModelViewer = require("./ModelViewer.js");
+const Image = require("./Image.cjs");
+const Video = require("./Video.cjs");
+const ExternalVideo = require("./ExternalVideo.cjs");
+const ModelViewer = require("./ModelViewer.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 function MediaFile({
   data,
@@ -56,4 +56,4 @@ function MediaFile({
   }
 }
 exports.MediaFile = MediaFile;
-//# sourceMappingURL=MediaFile.js.map
+//# sourceMappingURL=MediaFile.cjs.map

package/dist/{prod/MediaFile.mjs.map → node-prod/MediaFile.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"MediaFile.mjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {Image, type ShopifyImageProps} 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>;\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`, or `ExternalVideo` components. */\n  mediaOptions?: {\n    /** Props that will only apply when an `<Image />` is rendered */\n    image: Omit<ShopifyImageProps, '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/**\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 */\nexport function MediaFile({\n  data,\n  mediaOptions,\n  ...passthroughProps\n}: MediaFileProps) {\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 correctly render the correct component for this media. Rendering 'null' by default`;\n      if (__HYDROGEN_DEV__) {\n        throw new Error(typenameMissingMessage);\n      } else {\n        console.error(typenameMissingMessage);\n        return null;\n      }\n    }\n  }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","console","warn","video","externalVideo","modelViewer","typenameMissingMessage","error"],"mappings":";;;;;AAmCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AAHqB,GAIP;AACjB,UAAQF,KAAKG,YAAb;AAAA,IACE,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AAGd;AACLC,kBAAQC,KAAKF,WAAb;AACO,iBAAA;AAAA,QACR;AAAA,MACF;AAED,iCACG,OAAD;AAAA,QAAA,GACMH;AAAAA,QADN,GAEMD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CAJf;AAAA,IAOD;AAAA,IACD,KAAK,SAAS;AACZ,iCACG,OAAD;AAAA,QAAA,GAAWF;AAAAA,QAAX,GAAiCD,6CAAcO;AAAAA,QAAO;AAAA,MAAA,CADxD;AAAA,IAGD;AAAA,IACD,KAAK,iBAAiB;AACpB,iCACG,eAAD;AAAA,QAAA,GACMN;AAAAA,QADN,GAEMD,6CAAcQ;AAAAA,QAClB;AAAA,MAAA,CAJJ;AAAA,IAOD;AAAA,IACD,KAAK,WAAW;AACd,iCAEG;WACKP;AAAAA,QADN,GAEMD,6CAAcS;AAAAA,QAClB;AAAA,MAAA,CAHF;AAAA,IAMH;AAAA,IACD,SAAS;AACP,YAAMC,yBAA0B;AAGzB;AACLL,gBAAQM,MAAMD,sBAAd;AACO,eAAA;AAAA,MACR;AAAA,IACF;AAAA,EApDH;AAsDD;"}
+{"version":3,"file":"MediaFile.cjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {Image, type ShopifyImageProps} 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>;\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`, or `ExternalVideo` components. */\n  mediaOptions?: {\n    /** Props that will only apply when an `<Image />` is rendered */\n    image: Omit<ShopifyImageProps, '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/**\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 */\nexport function MediaFile({\n  data,\n  mediaOptions,\n  ...passthroughProps\n}: MediaFileProps) {\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 correctly render the correct component for this media. Rendering 'null' by default`;\n      if (__HYDROGEN_DEV__) {\n        throw new Error(typenameMissingMessage);\n      } else {\n        console.error(typenameMissingMessage);\n        return null;\n      }\n    }\n  }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","console","warn","Image","Video","video","ExternalVideo","externalVideo","ModelViewer","modelViewer","typenameMissingMessage","error"],"mappings":";;;;;;;AAmCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AAHqB,GAIP;AACjB,UAAQF,KAAKG,YAAb;AAAA,IACE,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AAGd;AACLC,kBAAQC,KAAKF,WAAb;AACO,iBAAA;AAAA,QACR;AAAA,MACF;AAED,4CACGG,MAAAA,OAAD;AAAA,QAAA,GACMN;AAAAA,QADN,GAEMD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CAJf;AAAA,IAOD;AAAA,IACD,KAAK,SAAS;AACZ,4CACGK,MAAAA,OAAD;AAAA,QAAA,GAAWP;AAAAA,QAAX,GAAiCD,6CAAcS;AAAAA,QAAO;AAAA,MAAA,CADxD;AAAA,IAGD;AAAA,IACD,KAAK,iBAAiB;AACpB,4CACGC,cAAAA,eAAD;AAAA,QAAA,GACMT;AAAAA,QADN,GAEMD,6CAAcW;AAAAA,QAClB;AAAA,MAAA,CAJJ;AAAA,IAOD;AAAA,IACD,KAAK,WAAW;AACd,4CAEGC,YAAAA;WACKX;AAAAA,QADN,GAEMD,6CAAca;AAAAA,QAClB;AAAA,MAAA,CAHF;AAAA,IAMH;AAAA,IACD,SAAS;AACP,YAAMC,yBAA0B;AAGzB;AACLT,gBAAQU,MAAMD,sBAAd;AACO,eAAA;AAAA,MACR;AAAA,IACF;AAAA,EApDH;AAsDD;;"}

package/dist/node-prod/MediaFile.js

@@ -0,0 +1,59 @@
+import { Image } from "./Image.js";
+import { Video } from "./Video.js";
+import { ExternalVideo } from "./ExternalVideo.js";
+import { ModelViewer } from "./ModelViewer.js";
+import { jsx } from "react/jsx-runtime";
+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 /* @__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 correctly render the correct component for this media. Rendering 'null' by default`;
+      {
+        console.error(typenameMissingMessage);
+        return null;
+      }
+    }
+  }
+}
+export {
+  MediaFile
+};
+//# sourceMappingURL=MediaFile.js.map

package/dist/node-prod/MediaFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaFile.js","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {Image, type ShopifyImageProps} 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>;\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`, or `ExternalVideo` components. */\n  mediaOptions?: {\n    /** Props that will only apply when an `<Image />` is rendered */\n    image: Omit<ShopifyImageProps, '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/**\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 */\nexport function MediaFile({\n  data,\n  mediaOptions,\n  ...passthroughProps\n}: MediaFileProps) {\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 correctly render the correct component for this media. Rendering 'null' by default`;\n      if (__HYDROGEN_DEV__) {\n        throw new Error(typenameMissingMessage);\n      } else {\n        console.error(typenameMissingMessage);\n        return null;\n      }\n    }\n  }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","console","warn","video","externalVideo","modelViewer","typenameMissingMessage","error"],"mappings":";;;;;AAmCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AAHqB,GAIP;AACjB,UAAQF,KAAKG,YAAb;AAAA,IACE,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AAGd;AACLC,kBAAQC,KAAKF,WAAb;AACO,iBAAA;AAAA,QACR;AAAA,MACF;AAED,iCACG,OAAD;AAAA,QAAA,GACMH;AAAAA,QADN,GAEMD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CAJf;AAAA,IAOD;AAAA,IACD,KAAK,SAAS;AACZ,iCACG,OAAD;AAAA,QAAA,GAAWF;AAAAA,QAAX,GAAiCD,6CAAcO;AAAAA,QAAO;AAAA,MAAA,CADxD;AAAA,IAGD;AAAA,IACD,KAAK,iBAAiB;AACpB,iCACG,eAAD;AAAA,QAAA,GACMN;AAAAA,QADN,GAEMD,6CAAcQ;AAAAA,QAClB;AAAA,MAAA,CAJJ;AAAA,IAOD;AAAA,IACD,KAAK,WAAW;AACd,iCAEG;WACKP;AAAAA,QADN,GAEMD,6CAAcS;AAAAA,QAClB;AAAA,MAAA,CAHF;AAAA,IAMH;AAAA,IACD,SAAS;AACP,YAAMC,yBAA0B;AAGzB;AACLL,gBAAQM,MAAMD,sBAAd;AACO,eAAA;AAAA,MACR;AAAA,IACF;AAAA,EApDH;AAsDD;"}

package/dist/{prod/Metafield.js → node-prod/Metafield.cjs}

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const require$$0 = require("react");
-const ShopifyProvider = require("./ShopifyProvider.js");
-const Image = require("./Image.js");
-const Video = require("./Video.js");
-const flattenConnection = require("./flatten-connection.js");
+const react = require("react");
+const ShopifyProvider = require("./ShopifyProvider.cjs");
+const Image = require("./Image.cjs");
+const Video = require("./Video.cjs");
+const flattenConnection = require("./flatten-connection.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 function Metafield(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
@@ -16,7 +16,7 @@ function Metafield(props) {
   const {
     locale
   } = ShopifyProvider.useShop();
-  const parsedMetafield = require$$0.useMemo(() => parseMetafield(data), [data]);
+  const parsedMetafield = react.useMemo(() => parseMetafield(data), [data]);
   if (!parsedMetafield) {
     const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;
     {
@@ -285,4 +285,4 @@ exports.getMeasurementAsString = getMeasurementAsString;
 exports.parseJSON = parseJSON;
 exports.parseMetafield = parseMetafield;
 exports.parseMetafieldValue = parseMetafieldValue;
-//# sourceMappingURL=Metafield.js.map
+//# sourceMappingURL=Metafield.cjs.map

package/dist/{prod/Metafield.mjs.map → node-prod/Metafield.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Metafield.mjs","sources":["../../src/Metafield.tsx"],"sourcesContent":["import {type ElementType, useMemo, type ComponentPropsWithoutRef} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {Image} from './Image.js';\nimport type {\n  MediaImage,\n  Page,\n  ProductVariant,\n  Product,\n  GenericFile,\n  Video as VideoType,\n  Metafield as MetafieldType,\n} from './storefront-api-types.js';\nimport {Video} from './Video.js';\nimport {flattenConnection} from './flatten-connection.js';\nimport type {PartialDeep, JsonValue} from 'type-fest';\n\ninterface BaseProps<ComponentGeneric extends ElementType> {\n  /** An object with fields that correspond to the Storefront API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield). */\n  data: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null;\n  /** An HTML tag or React component to be rendered as the base element wrapper. The default value varies depending on [metafield.type](https://shopify.dev/apps/metafields/types). */\n  as?: ComponentGeneric;\n}\n\nexport type MetafieldProps<ComponentGeneric extends ElementType> =\n  ComponentPropsWithoutRef<ComponentGeneric> & BaseProps<ComponentGeneric>;\n\n/**\n * The `Metafield` component renders the value of a Storefront\n * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).\n * Relies on the `locale` property of the `useShop()` hook, so it must be a desendent of `<ShopifyProvider/>`\n *\n * Renders a smart default of the Metafield's `value`. For more information, refer to the [Default output](#default-output) section.\n */\nexport function Metafield<ComponentGeneric extends ElementType>(\n  props: MetafieldProps<ComponentGeneric>\n) {\n  const {data, as, ...passthroughProps} = props;\n  const {locale} = useShop();\n\n  const parsedMetafield = useMemo(() => parseMetafield(data), [data]);\n\n  if (!parsedMetafield) {\n    const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(noDataPropWarning);\n    } else {\n      console.warn(noDataPropWarning);\n    }\n    return null;\n  }\n\n  if (parsedMetafield.value === null || parsedMetafield.value === undefined) {\n    const noValueWarning = `<Metafield/>: No metafield value for metafield ${\n      parsedMetafield.id ?? parsedMetafield.key\n    }. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(noValueWarning);\n    } else {\n      console.warn(noValueWarning);\n    }\n    return null;\n  }\n\n  switch (parsedMetafield.type) {\n    case 'date': {\n      const Wrapper = as ?? 'time';\n      return (\n        <Wrapper {...passthroughProps}>\n          {(parsedMetafield.value as Date).toLocaleDateString(locale)}\n        </Wrapper>\n      );\n    }\n    case 'date_time': {\n      const Wrapper = as ?? 'time';\n      return (\n        <Wrapper {...passthroughProps}>\n          {(parsedMetafield.value as Date).toLocaleString(locale)}\n        </Wrapper>\n      );\n    }\n    case 'weight':\n    case 'dimension':\n    case 'volume': {\n      const Wrapper = as ?? 'span';\n      return (\n        <Wrapper {...passthroughProps}>\n          {getMeasurementAsString(parsedMetafield.value as Measurement, locale)}\n        </Wrapper>\n      );\n    }\n    case 'rating': {\n      const Wrapper = as ?? 'span';\n      return (\n        <Wrapper {...passthroughProps}>\n          {(parsedMetafield.value as Rating).value}\n        </Wrapper>\n      );\n    }\n    case 'single_line_text_field': {\n      const Wrapper = as ?? 'span';\n      return (\n        <Wrapper\n          {...passthroughProps}\n          dangerouslySetInnerHTML={{__html: parsedMetafield.value as string}}\n        />\n      );\n    }\n    case 'multi_line_text_field': {\n      const Wrapper = as ?? 'div';\n      return (\n        <Wrapper\n          {...passthroughProps}\n          dangerouslySetInnerHTML={{\n            __html: (parsedMetafield.value as string).split('\\n').join('<br/>'),\n          }}\n        />\n      );\n    }\n    case 'url': {\n      const protocolLessUrl = new URL(parsedMetafield.value as string);\n      return (\n        <a\n          href={protocolLessUrl.href.replace(protocolLessUrl.protocol, '')}\n          {...passthroughProps}\n        >\n          {parsedMetafield.value as string}\n        </a>\n      );\n    }\n    case 'json': {\n      const Wrapper = as ?? 'span';\n      return (\n        <Wrapper {...passthroughProps}>\n          {JSON.stringify(parsedMetafield.value)}\n        </Wrapper>\n      );\n    }\n    case 'product_reference':\n    case 'variant_reference':\n    case 'page_reference': {\n      const Wrapper = as ?? 'span';\n      const ref = parsedMetafield.reference as Page | ProductVariant | Product;\n      return (\n        <Wrapper {...passthroughProps}>{ref?.title ?? ref?.id ?? ''}</Wrapper>\n      );\n    }\n    case 'list.single_line_text_field': {\n      const Wrapper = as ?? 'ul';\n\n      const refArray = parsedMetafield.references\n        ? (flattenConnection(parsedMetafield.references) as string[])\n        : [];\n      return (\n        <Wrapper {...passthroughProps}>\n          {refArray.map((ref, index) => (\n            // there's no unique way to identify these strings, so we do our best by combining the string with the index for the key\n            // eslint-disable-next-line react/no-array-index-key\n            <li key={`${ref ?? ''}-${index}`}>{ref}</li>\n          ))}\n        </Wrapper>\n      );\n    }\n    case 'file_reference': {\n      if (parsedMetafield.reference?.__typename === 'MediaImage') {\n        const ref = parsedMetafield.reference as MediaImage;\n        return ref.image ? (\n          <Image data={ref.image} {...passthroughProps} />\n        ) : null;\n      } else if (parsedMetafield.reference?.__typename === 'GenericFile') {\n        const ref = parsedMetafield.reference as GenericFile;\n        return ref.previewImage ? (\n          <a href={parsedMetafield.reference?.url ?? ''} {...passthroughProps}>\n            <Image data={ref.previewImage} />\n          </a>\n        ) : null;\n      } else if (parsedMetafield.reference?.__typename === 'Video') {\n        const ref = parsedMetafield.reference as VideoType;\n        return <Video {...passthroughProps} data={ref} />;\n      }\n    }\n  }\n\n  const Wrapper = as ?? 'span';\n  return (\n    <Wrapper {...passthroughProps}>{parsedMetafield.value?.toString()}</Wrapper>\n  );\n}\n\n/**\n * The `parseMetafield` utility transforms a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield)\n * into a new object whose `values` have been parsed according to the metafield `type`.\n * If the metafield is `null`, then it returns `null` back.\n *\n * Note that `parseMetafield()` will have a breaking change in a future version; it will change to behave like `metafieldParser()`.\n */\nexport function parseMetafield(\n  /** A [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield) or null */\n  metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): PartialDeep<ParsedMetafield, {recurseIntoArrays: true}> | null {\n  if (__HYDROGEN_DEV__) {\n    console.info(\n      `'parseMetafield()' will have a breaking change in a future version; its behavior will match that of 'metafieldParser()'`\n    );\n  }\n\n  if (!metafield) {\n    if (__HYDROGEN_DEV__) {\n      console.warn(\n        `'parseMetafield' was not passed any value for the 'metafield' argument`\n      );\n    }\n    return null;\n  }\n  if (\n    __HYDROGEN_DEV__ &&\n    (metafield.value === null || metafield.value === undefined)\n  ) {\n    console.warn(\n      `'parseMetafield()' was passed ${metafield.value} for 'metafield.value'`\n    );\n  }\n\n  return {\n    ...metafield,\n    value: parseMetafieldValue(metafield),\n  };\n}\n\n/**\n * The `parseMetafieldValue` function parses a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `value` from a string into a sensible type corresponding to the [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `type`.\n * @deprecated `parseMetafieldValue()` is unsupported and will be removed in a future version.\n */\nexport function parseMetafieldValue(\n  metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): ParsedMetafield['value'] {\n  if (__HYDROGEN_DEV__) {\n    console.info(`'parseMetafieldValue()' will be removed in a future version`);\n  }\n\n  if (!metafield) {\n    return null;\n  }\n\n  if (metafield.value === null || metafield.value === undefined) {\n    if (__HYDROGEN_DEV__) {\n      console.warn(\n        `'parseMetafieldValue()' was passed ${metafield.value} for 'metafield.value'`\n      );\n    }\n    return metafield.value;\n  }\n\n  switch (metafield.type) {\n    case 'boolean':\n      return metafield.value === 'true';\n    case 'number_integer':\n      return parseInt(metafield.value);\n    case 'number_decimal':\n      return parseFloat(metafield.value);\n    case 'date':\n    case 'date_time':\n      return new Date(metafield.value);\n    case 'json':\n    case 'weight':\n    case 'dimension':\n    case 'volume':\n    case 'rating':\n      return parseJSON(metafield.value);\n    case 'color':\n    case 'single_line_text_field':\n    case 'multi_line_text_field':\n    case 'product_reference':\n    case 'page_reference':\n    case 'variant_reference':\n    case 'file_reference':\n    case 'url':\n    default:\n      return metafield.value;\n  }\n}\n\n/**\n * Parses a JSON string while preventing prototype injection attacks.\n */\nexport function parseJSON(json: string) {\n  if (String(json).includes('__proto__')) {\n    return JSON.parse(json, (k, v) => {\n      if (k !== '__proto__') return v;\n    });\n  }\n\n  return JSON.parse(json);\n}\n\nconst UNIT_MAPPING: Record<string, string> = {\n  // Dimension\n  mm: 'millimeter',\n  cm: 'centimeter',\n  m: 'meter',\n  in: 'inch',\n  ft: 'foot',\n  yd: 'yard',\n  // Volume\n  ml: 'milliliter',\n  l: 'liter',\n  us_fl_oz: 'fluid-ounce',\n  us_gal: 'gallon',\n  // Weight\n  kg: 'kilogram',\n  g: 'gram',\n  lb: 'pound',\n  oz: 'ounce',\n};\n\nexport function getMeasurementAsString(\n  measurement: Measurement,\n  locale = 'en-us',\n  options: Intl.NumberFormatOptions = {}\n) {\n  let measure: Measurement = {\n    value: measurement.value,\n    unit: UNIT_MAPPING[measurement.unit],\n  };\n\n  if (measure.unit == null) {\n    measure = convertToSupportedUnit(measurement.value, measurement.unit);\n  }\n\n  return new Intl.NumberFormat(locale, {\n    ...options,\n    unit: measure.unit,\n    style: 'unit',\n  }).format(measure.value);\n}\n\nfunction convertToSupportedUnit(value: number, unit: string): Measurement {\n  switch (unit) {\n    case 'cl':\n      return {\n        value: value / 1000,\n        unit: 'liter',\n      };\n    case 'm3':\n      return {\n        value: value * 1000,\n        unit: 'liter',\n      };\n    case 'us_pt':\n      return {\n        value: value * 0.125,\n        unit: 'gallon',\n      };\n    case 'us_qt':\n      return {\n        value: value * 0.5,\n        unit: 'gallon',\n      };\n    case 'us_oz':\n      return {\n        value: value / 128,\n        unit: 'gallon',\n      };\n    case 'imp_pt':\n      return {\n        value: value / 6.661, // approximate conversion\n        unit: 'gallon',\n      };\n    case 'imp_qt':\n      return {\n        value: value / 3.331, // approximate conversion\n        unit: 'gallon',\n      };\n    case 'imp_gal':\n      return {\n        value: value / 1.201, // approximate conversion\n        unit: 'gallon',\n      };\n    case 'imp_fl_oz':\n      return {\n        value: value * 0.96076, // approximate conversion\n        unit: 'fluid-ounce',\n      };\n    default:\n      throw new Error(`Unit not supported: ${unit}`);\n  }\n}\n\ntype ParsedMetafield = Omit<\n  PartialDeep<MetafieldType, {recurseIntoArrays: true}>,\n  'value'\n> & {\n  value?: string | number | boolean | JsonValue | Date | Rating | Measurement;\n};\n\nexport interface Rating {\n  value: number;\n  scale_min: number;\n  scale_max: number;\n}\n\ninterface Measurement {\n  unit: string;\n  value: number;\n}\n"],"names":["Metafield","props","data","as","passthroughProps","locale","useShop","parsedMetafield","useMemo","parseMetafield","noDataPropWarning","console","warn","value","undefined","noValueWarning","id","key","type","Wrapper","toLocaleDateString","toLocaleString","getMeasurementAsString","__html","split","join","protocolLessUrl","URL","href","replace","protocol","JSON","stringify","ref","reference","title","refArray","references","flattenConnection","map","index","__typename","image","_jsx","previewImage","url","toString","metafield","parseMetafieldValue","parseInt","parseFloat","Date","parseJSON","json","String","includes","parse","k","v","UNIT_MAPPING","mm","cm","m","in","ft","yd","ml","l","us_fl_oz","us_gal","kg","g","lb","oz","measurement","options","measure","unit","convertToSupportedUnit","Intl","NumberFormat","style","format","Error"],"mappings":"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"}
+{"version":3,"file":"Metafield.cjs","sources":["../../src/Metafield.tsx"],"sourcesContent":["import {type ElementType, useMemo, type ComponentPropsWithoutRef} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {Image} from './Image.js';\nimport type {\n  MediaImage,\n  Page,\n  ProductVariant,\n  Product,\n  GenericFile,\n  Video as VideoType,\n  Metafield as MetafieldType,\n} from './storefront-api-types.js';\nimport {Video} from './Video.js';\nimport {flattenConnection} from './flatten-connection.js';\nimport type {PartialDeep, JsonValue} from 'type-fest';\n\ninterface BaseProps<ComponentGeneric extends ElementType> {\n  /** An object with fields that correspond to the Storefront API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield). */\n  data: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null;\n  /** An HTML tag or React component to be rendered as the base element wrapper. The default value varies depending on [metafield.type](https://shopify.dev/apps/metafields/types). */\n  as?: ComponentGeneric;\n}\n\nexport type MetafieldProps<ComponentGeneric extends ElementType> =\n  ComponentPropsWithoutRef<ComponentGeneric> & BaseProps<ComponentGeneric>;\n\n/**\n * The `Metafield` component renders the value of a Storefront\n * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).\n * Relies on the `locale` property of the `useShop()` hook, so it must be a desendent of `<ShopifyProvider/>`\n *\n * Renders a smart default of the Metafield's `value`. For more information, refer to the [Default output](#default-output) section.\n */\nexport function Metafield<ComponentGeneric extends ElementType>(\n  props: MetafieldProps<ComponentGeneric>\n) {\n  const {data, as, ...passthroughProps} = props;\n  const {locale} = useShop();\n\n  const parsedMetafield = useMemo(() => parseMetafield(data), [data]);\n\n  if (!parsedMetafield) {\n    const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(noDataPropWarning);\n    } else {\n      console.warn(noDataPropWarning);\n    }\n    return null;\n  }\n\n  if (parsedMetafield.value === null || parsedMetafield.value === undefined) {\n    const noValueWarning = `<Metafield/>: No metafield value for metafield ${\n      parsedMetafield.id ?? parsedMetafield.key\n    }. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(noValueWarning);\n    } else {\n      console.warn(noValueWarning);\n    }\n    return null;\n  }\n\n  switch (parsedMetafield.type) {\n    case 'date': {\n      const Wrapper = as ?? 'time';\n      return (\n        <Wrapper {...passthroughProps}>\n          {(parsedMetafield.value as Date).toLocaleDateString(locale)}\n        </Wrapper>\n      );\n    }\n    case 'date_time': {\n      const Wrapper = as ?? 'time';\n      return (\n        <Wrapper {...passthroughProps}>\n          {(parsedMetafield.value as Date).toLocaleString(locale)}\n        </Wrapper>\n      );\n    }\n    case 'weight':\n    case 'dimension':\n    case 'volume': {\n      const Wrapper = as ?? 'span';\n      return (\n        <Wrapper {...passthroughProps}>\n          {getMeasurementAsString(parsedMetafield.value as Measurement, locale)}\n        </Wrapper>\n      );\n    }\n    case 'rating': {\n      const Wrapper = as ?? 'span';\n      return (\n        <Wrapper {...passthroughProps}>\n          {(parsedMetafield.value as Rating).value}\n        </Wrapper>\n      );\n    }\n    case 'single_line_text_field': {\n      const Wrapper = as ?? 'span';\n      return (\n        <Wrapper\n          {...passthroughProps}\n          dangerouslySetInnerHTML={{__html: parsedMetafield.value as string}}\n        />\n      );\n    }\n    case 'multi_line_text_field': {\n      const Wrapper = as ?? 'div';\n      return (\n        <Wrapper\n          {...passthroughProps}\n          dangerouslySetInnerHTML={{\n            __html: (parsedMetafield.value as string).split('\\n').join('<br/>'),\n          }}\n        />\n      );\n    }\n    case 'url': {\n      const protocolLessUrl = new URL(parsedMetafield.value as string);\n      return (\n        <a\n          href={protocolLessUrl.href.replace(protocolLessUrl.protocol, '')}\n          {...passthroughProps}\n        >\n          {parsedMetafield.value as string}\n        </a>\n      );\n    }\n    case 'json': {\n      const Wrapper = as ?? 'span';\n      return (\n        <Wrapper {...passthroughProps}>\n          {JSON.stringify(parsedMetafield.value)}\n        </Wrapper>\n      );\n    }\n    case 'product_reference':\n    case 'variant_reference':\n    case 'page_reference': {\n      const Wrapper = as ?? 'span';\n      const ref = parsedMetafield.reference as Page | ProductVariant | Product;\n      return (\n        <Wrapper {...passthroughProps}>{ref?.title ?? ref?.id ?? ''}</Wrapper>\n      );\n    }\n    case 'list.single_line_text_field': {\n      const Wrapper = as ?? 'ul';\n\n      const refArray = parsedMetafield.references\n        ? (flattenConnection(parsedMetafield.references) as string[])\n        : [];\n      return (\n        <Wrapper {...passthroughProps}>\n          {refArray.map((ref, index) => (\n            // there's no unique way to identify these strings, so we do our best by combining the string with the index for the key\n            // eslint-disable-next-line react/no-array-index-key\n            <li key={`${ref ?? ''}-${index}`}>{ref}</li>\n          ))}\n        </Wrapper>\n      );\n    }\n    case 'file_reference': {\n      if (parsedMetafield.reference?.__typename === 'MediaImage') {\n        const ref = parsedMetafield.reference as MediaImage;\n        return ref.image ? (\n          <Image data={ref.image} {...passthroughProps} />\n        ) : null;\n      } else if (parsedMetafield.reference?.__typename === 'GenericFile') {\n        const ref = parsedMetafield.reference as GenericFile;\n        return ref.previewImage ? (\n          <a href={parsedMetafield.reference?.url ?? ''} {...passthroughProps}>\n            <Image data={ref.previewImage} />\n          </a>\n        ) : null;\n      } else if (parsedMetafield.reference?.__typename === 'Video') {\n        const ref = parsedMetafield.reference as VideoType;\n        return <Video {...passthroughProps} data={ref} />;\n      }\n    }\n  }\n\n  const Wrapper = as ?? 'span';\n  return (\n    <Wrapper {...passthroughProps}>{parsedMetafield.value?.toString()}</Wrapper>\n  );\n}\n\n/**\n * The `parseMetafield` utility transforms a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield)\n * into a new object whose `values` have been parsed according to the metafield `type`.\n * If the metafield is `null`, then it returns `null` back.\n *\n * Note that `parseMetafield()` will have a breaking change in a future version; it will change to behave like `metafieldParser()`.\n */\nexport function parseMetafield(\n  /** A [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield) or null */\n  metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): PartialDeep<ParsedMetafield, {recurseIntoArrays: true}> | null {\n  if (__HYDROGEN_DEV__) {\n    console.info(\n      `'parseMetafield()' will have a breaking change in a future version; its behavior will match that of 'metafieldParser()'`\n    );\n  }\n\n  if (!metafield) {\n    if (__HYDROGEN_DEV__) {\n      console.warn(\n        `'parseMetafield' was not passed any value for the 'metafield' argument`\n      );\n    }\n    return null;\n  }\n  if (\n    __HYDROGEN_DEV__ &&\n    (metafield.value === null || metafield.value === undefined)\n  ) {\n    console.warn(\n      `'parseMetafield()' was passed ${metafield.value} for 'metafield.value'`\n    );\n  }\n\n  return {\n    ...metafield,\n    value: parseMetafieldValue(metafield),\n  };\n}\n\n/**\n * The `parseMetafieldValue` function parses a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `value` from a string into a sensible type corresponding to the [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `type`.\n * @deprecated `parseMetafieldValue()` is unsupported and will be removed in a future version.\n */\nexport function parseMetafieldValue(\n  metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): ParsedMetafield['value'] {\n  if (__HYDROGEN_DEV__) {\n    console.info(`'parseMetafieldValue()' will be removed in a future version`);\n  }\n\n  if (!metafield) {\n    return null;\n  }\n\n  if (metafield.value === null || metafield.value === undefined) {\n    if (__HYDROGEN_DEV__) {\n      console.warn(\n        `'parseMetafieldValue()' was passed ${metafield.value} for 'metafield.value'`\n      );\n    }\n    return metafield.value;\n  }\n\n  switch (metafield.type) {\n    case 'boolean':\n      return metafield.value === 'true';\n    case 'number_integer':\n      return parseInt(metafield.value);\n    case 'number_decimal':\n      return parseFloat(metafield.value);\n    case 'date':\n    case 'date_time':\n      return new Date(metafield.value);\n    case 'json':\n    case 'weight':\n    case 'dimension':\n    case 'volume':\n    case 'rating':\n      return parseJSON(metafield.value);\n    case 'color':\n    case 'single_line_text_field':\n    case 'multi_line_text_field':\n    case 'product_reference':\n    case 'page_reference':\n    case 'variant_reference':\n    case 'file_reference':\n    case 'url':\n    default:\n      return metafield.value;\n  }\n}\n\n/**\n * Parses a JSON string while preventing prototype injection attacks.\n */\nexport function parseJSON(json: string) {\n  if (String(json).includes('__proto__')) {\n    return JSON.parse(json, (k, v) => {\n      if (k !== '__proto__') return v;\n    });\n  }\n\n  return JSON.parse(json);\n}\n\nconst UNIT_MAPPING: Record<string, string> = {\n  // Dimension\n  mm: 'millimeter',\n  cm: 'centimeter',\n  m: 'meter',\n  in: 'inch',\n  ft: 'foot',\n  yd: 'yard',\n  // Volume\n  ml: 'milliliter',\n  l: 'liter',\n  us_fl_oz: 'fluid-ounce',\n  us_gal: 'gallon',\n  // Weight\n  kg: 'kilogram',\n  g: 'gram',\n  lb: 'pound',\n  oz: 'ounce',\n};\n\nexport function getMeasurementAsString(\n  measurement: Measurement,\n  locale = 'en-us',\n  options: Intl.NumberFormatOptions = {}\n) {\n  let measure: Measurement = {\n    value: measurement.value,\n    unit: UNIT_MAPPING[measurement.unit],\n  };\n\n  if (measure.unit == null) {\n    measure = convertToSupportedUnit(measurement.value, measurement.unit);\n  }\n\n  return new Intl.NumberFormat(locale, {\n    ...options,\n    unit: measure.unit,\n    style: 'unit',\n  }).format(measure.value);\n}\n\nfunction convertToSupportedUnit(value: number, unit: string): Measurement {\n  switch (unit) {\n    case 'cl':\n      return {\n        value: value / 1000,\n        unit: 'liter',\n      };\n    case 'm3':\n      return {\n        value: value * 1000,\n        unit: 'liter',\n      };\n    case 'us_pt':\n      return {\n        value: value * 0.125,\n        unit: 'gallon',\n      };\n    case 'us_qt':\n      return {\n        value: value * 0.5,\n        unit: 'gallon',\n      };\n    case 'us_oz':\n      return {\n        value: value / 128,\n        unit: 'gallon',\n      };\n    case 'imp_pt':\n      return {\n        value: value / 6.661, // approximate conversion\n        unit: 'gallon',\n      };\n    case 'imp_qt':\n      return {\n        value: value / 3.331, // approximate conversion\n        unit: 'gallon',\n      };\n    case 'imp_gal':\n      return {\n        value: value / 1.201, // approximate conversion\n        unit: 'gallon',\n      };\n    case 'imp_fl_oz':\n      return {\n        value: value * 0.96076, // approximate conversion\n        unit: 'fluid-ounce',\n      };\n    default:\n      throw new Error(`Unit not supported: ${unit}`);\n  }\n}\n\ntype ParsedMetafield = Omit<\n  PartialDeep<MetafieldType, {recurseIntoArrays: true}>,\n  'value'\n> & {\n  value?: string | number | boolean | JsonValue | Date | Rating | Measurement;\n};\n\nexport interface Rating {\n  value: number;\n  scale_min: number;\n  scale_max: number;\n}\n\ninterface Measurement {\n  unit: string;\n  value: number;\n}\n"],"names":["Metafield","props","data","as","passthroughProps","locale","useShop","parsedMetafield","useMemo","parseMetafield","noDataPropWarning","console","warn","value","undefined","noValueWarning","id","key","type","Wrapper","toLocaleDateString","toLocaleString","getMeasurementAsString","__html","split","join","protocolLessUrl","URL","href","replace","protocol","JSON","stringify","ref","reference","title","refArray","references","flattenConnection","map","index","__typename","image","_jsx","Image","previewImage","url","Video","toString","metafield","parseMetafieldValue","parseInt","parseFloat","Date","parseJSON","json","String","includes","parse","k","v","UNIT_MAPPING","mm","cm","m","in","ft","yd","ml","l","us_fl_oz","us_gal","kg","g","lb","oz","measurement","options","measure","unit","convertToSupportedUnit","Intl","NumberFormat","style","format","Error"],"mappings":"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"}