@shopify/hydrogen-react 2022.7.0 → 2022.10.0

package/dist/prod/Metafield.cjs.map

@@ -1 +1 @@
-{"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      // @ts-expect-error references currently only exists on 'unstable' SFAPI, but as soon as it does exist we can remove this ts-expect-error because I believe 'list.single_line_text_field' will also only be availabe in the same setting and we also handle if it doesn't exist\n      const refArray = parsedMetafield.references\n        ? // @ts-expect-error references currently only exists on 'unstable' SFAPI, but as soon as it does exist we can remove this ts-expect-error\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 */\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 (!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 */\nexport function parseMetafieldValue(\n  metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): ParsedMetafield['value'] {\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: {value: number; unit: string} = {\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) {\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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"}
+{"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 */\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 (!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 */\nexport function parseMetafieldValue(\n  metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): ParsedMetafield['value'] {\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: {value: number; unit: string} = {\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) {\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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"}

package/dist/prod/Metafield.js.map

@@ -1 +1 @@
-{"version":3,"file":"Metafield.js","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      // @ts-expect-error references currently only exists on 'unstable' SFAPI, but as soon as it does exist we can remove this ts-expect-error because I believe 'list.single_line_text_field' will also only be availabe in the same setting and we also handle if it doesn't exist\n      const refArray = parsedMetafield.references\n        ? // @ts-expect-error references currently only exists on 'unstable' SFAPI, but as soon as it does exist we can remove this ts-expect-error\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 */\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 (!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 */\nexport function parseMetafieldValue(\n  metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): ParsedMetafield['value'] {\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: {value: number; unit: string} = {\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) {\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":";;;;;;AAiCO,SAASA,UACdC,OACA;;AACM,QAAA;AAAA,IAACC;AAAAA,IAAMC;AAAAA,OAAOC;AAAAA,EAAoBH,IAAAA;AAClC,QAAA;AAAA,IAACI;AAAAA,MAAUC,QAAjB;AAEMC,QAAAA,kBAAkBC,QAAQ,MAAMC,eAAeP,IAAD,GAAQ,CAACA,IAAD,CAA7B;AAE/B,MAAI,CAACK,iBAAiB;AACpB,UAAMG,oBAAqB;AAGpB;AACLC,cAAQC,KAAKF,iBAAb;AAAA,IACD;AACM,WAAA;AAAA,EACR;AAED,MAAIH,gBAAgBM,UAAU,QAAQN,gBAAgBM,UAAUC,QAAW;AACzE,UAAMC,iBAAkB,mDACtBR,qBAAgBS,OAAhBT,YAAsBA,gBAAgBU;AAIjC;AACLN,cAAQC,KAAKG,cAAb;AAAA,IACD;AACM,WAAA;AAAA,EACR;AAED,UAAQR,gBAAgBW,MAAxB;AAAA,IACE,KAAK,QAAQ;AACX,YAAMC,WAAUhB,kBAAM;AACtB,iCACGgB,UAAD;AAAA,QAAA,GAAaf;AAAAA,QAAb,UACIG,gBAAgBM,MAAeO,mBAAmBf,MAAnD;AAAA,MAAA,CAFL;AAAA,IAKD;AAAA,IACD,KAAK,aAAa;AAChB,YAAMc,WAAUhB,kBAAM;AACtB,iCACGgB,UAAD;AAAA,QAAA,GAAaf;AAAAA,QAAb,UACIG,gBAAgBM,MAAeQ,eAAehB,MAA/C;AAAA,MAAA,CAFL;AAAA,IAKD;AAAA,IACD,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK,UAAU;AACb,YAAMc,WAAUhB,kBAAM;AACtB,iCACGgB,UAAD;AAAA,QAAA,GAAaf;AAAAA,QAAb,UACGkB,uBAAuBf,gBAAgBM,OAAsBR,MAAvC;AAAA,MAAA,CAF3B;AAAA,IAKD;AAAA,IACD,KAAK,UAAU;AACb,YAAMc,WAAUhB,kBAAM;AACtB,iCACGgB,UAAD;AAAA,QAAA,GAAaf;AAAAA,QAAb,UACIG,gBAAgBM,MAAiBA;AAAAA,MAAAA,CAFvC;AAAA,IAKD;AAAA,IACD,KAAK,0BAA0B;AAC7B,YAAMM,WAAUhB,kBAAM;AACtB,iCACGgB,UAAD;AAAA,QAAA,GACMf;AAAAA,QACJ,yBAAyB;AAAA,UAACmB,QAAQhB,gBAAgBM;AAAAA,QAAzB;AAAA,MAAA,CAH7B;AAAA,IAMD;AAAA,IACD,KAAK,yBAAyB;AAC5B,YAAMM,WAAUhB,kBAAM;AACtB,iCACGgB,UAAD;AAAA,QAAA,GACMf;AAAAA,QACJ,yBAAyB;AAAA,UACvBmB,QAAShB,gBAAgBM,MAAiBW,MAAM,IAAxC,EAA8CC,KAAK,OAAnD;AAAA,QADe;AAAA,MAAA,CAH7B;AAAA,IAQD;AAAA,IACD,KAAK,OAAO;AACV,YAAMC,kBAAkB,IAAIC,IAAIpB,gBAAgBM,KAAhD;AACA,iCACE,KAAA;AAAA,QACE,MAAMa,gBAAgBE,KAAKC,QAAQH,gBAAgBI,UAAU,EAAvD;AAAA,QADR,GAEM1B;AAAAA,QAFN,UAIGG,gBAAgBM;AAAAA,MAAAA,CALrB;AAAA,IAQD;AAAA,IACD,KAAK,QAAQ;AACX,YAAMM,WAAUhB,kBAAM;AACtB,iCACGgB,UAAD;AAAA,QAAA,GAAaf;AAAAA,QAAb,UACG2B,KAAKC,UAAUzB,gBAAgBM,KAA/B;AAAA,MAAA,CAFL;AAAA,IAKD;AAAA,IACD,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK,kBAAkB;AACrB,YAAMM,WAAUhB,kBAAM;AACtB,YAAM8B,MAAM1B,gBAAgB2B;AAC5B,iCACGf,UAAD;AAAA,QAAA,GAAaf;AAAAA,QAAb,WAAgC6B,sCAAKE,UAALF,YAAcA,2BAAKjB,OAAnBiB,YAAyB;AAAA,MAAA,CAD3D;AAAA,IAGD;AAAA,IACD,KAAK,+BAA+B;AAClC,YAAMd,WAAUhB,kBAAM;AAEtB,YAAMiC,WAAW7B,gBAAgB8B,aAE5BC,kBAAkB/B,gBAAgB8B,UAAjB,IAClB;AACJ,iCACGlB,UAAD;AAAA,QAAA,GAAaf;AAAAA,QAAb,UACGgC,SAASG,IAAI,CAACN,KAAKO,8BAGlB,MAAA;AAAA,UAAA,UAAmCP;AAAAA,QAAAA,GAAzB,GAAEA,oBAAO,MAAMO,OAAzB,CAHD;AAAA,MAAA,CAFL;AAAA,IASD;AAAA,IACD,KAAK,kBAAkB;AACjBjC,YAAAA,qBAAgB2B,cAAhB3B,mBAA2BkC,gBAAe,cAAc;AAC1D,cAAMR,MAAM1B,gBAAgB2B;AACrBD,eAAAA,IAAIS,QACTC,oBAAC,OAAD;AAAA,UAAO,MAAMV,IAAIS;AAAAA,UAAjB,GAA4BtC;AAAAA,QAA5B,CAAA,IACE;AAAA,MACKG,aAAAA,qBAAgB2B,cAAhB3B,mBAA2BkC,gBAAe,eAAe;AAClE,cAAMR,MAAM1B,gBAAgB2B;AACrBD,eAAAA,IAAIW,eACTD,oBAAA,KAAA;AAAA,UAAG,OAAMpC,2BAAgB2B,cAAhB3B,mBAA2BsC,QAA3BtC,YAAkC;AAAA,UAA3C,GAAmDH;AAAAA,UAAnD,8BACG,OAAD;AAAA,YAAO,MAAM6B,IAAIW;AAAAA,UAAAA,CAAjB;AAAA,QADF,CAAA,IAGE;AAAA,MACKrC,aAAAA,qBAAgB2B,cAAhB3B,mBAA2BkC,gBAAe,SAAS;AAC5D,cAAMR,MAAM1B,gBAAgB2B;AAC5B,mCAAQ,OAAD;AAAA,UAAA,GAAW9B;AAAAA,UAAkB,MAAM6B;AAAAA,QAAAA,CAA1C;AAAA,MACD;AAAA,IACF;AAAA,EArHH;AAwHA,QAAMd,UAAUhB,kBAAM;AACtB,6BACG,SAAD;AAAA,IAAA,GAAaC;AAAAA,IAAb,WAAgCG,qBAAgBM,UAAhBN,mBAAuBuC;AAAAA,EAAvB,CADlC;AAGD;AAOM,SAASrC,eAEdsC,WACgE;AAChE,MAAI,CAACA,WAAW;AAMP,WAAA;AAAA,EACR;AAUM,SAAA;AAAA,IACL,GAAGA;AAAAA,IACHlC,OAAOmC,oBAAoBD,SAAD;AAAA,EAAA;AAE7B;AAKM,SAASC,oBACdD,WAC0B;AAC1B,MAAI,CAACA,WAAW;AACP,WAAA;AAAA,EACR;AAED,MAAIA,UAAUlC,UAAU,QAAQkC,UAAUlC,UAAUC,QAAW;AAM7D,WAAOiC,UAAUlC;AAAAA,EAClB;AAED,UAAQkC,UAAU7B,MAAlB;AAAA,IACE,KAAK;AACH,aAAO6B,UAAUlC,UAAU;AAAA,IAC7B,KAAK;AACIoC,aAAAA,SAASF,UAAUlC,KAAX;AAAA,IACjB,KAAK;AACIqC,aAAAA,WAAWH,UAAUlC,KAAX;AAAA,IACnB,KAAK;AAAA,IACL,KAAK;AACI,aAAA,IAAIsC,KAAKJ,UAAUlC,KAAnB;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACIuC,aAAAA,UAAUL,UAAUlC,KAAX;AAAA,IAClB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAOkC,UAAUlC;AAAAA,EAzBrB;AA2BD;AAKM,SAASuC,UAAUC,MAAc;AACtC,MAAIC,OAAOD,IAAD,EAAOE,SAAS,WAAtB,GAAoC;AACtC,WAAOxB,KAAKyB,MAAMH,MAAM,CAACI,GAAGC,MAAM;AAChC,UAAID,MAAM;AAAoBC,eAAAA;AAAAA,IAAAA,CADzB;AAAA,EAGR;AAEM3B,SAAAA,KAAKyB,MAAMH,IAAX;AACR;AAED,MAAMM,eAAuC;AAAA,EAE3CC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,GAAG;AAAA,EACHC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EAEJC,IAAI;AAAA,EACJC,GAAG;AAAA,EACHC,UAAU;AAAA,EACVC,QAAQ;AAAA,EAERC,IAAI;AAAA,EACJC,GAAG;AAAA,EACHC,IAAI;AAAA,EACJC,IAAI;AAjBuC;AAoBtC,SAASnD,uBACdoD,aACArE,SAAS,SACTsE,UAAoC,CAAA,GACpC;AACA,MAAIC,UAAyC;AAAA,IAC3C/D,OAAO6D,YAAY7D;AAAAA,IACnBgE,MAAMlB,aAAae,YAAYG;AAAAA,EAAAA;AAG7BD,MAAAA,QAAQC,QAAQ,MAAM;AACxBD,cAAUE,uBAAuBJ,YAAY7D,OAAO6D,YAAYG,IAAhC;AAAA,EACjC;AAEM,SAAA,IAAIE,KAAKC,aAAa3E,QAAQ;AAAA,IACnC,GAAGsE;AAAAA,IACHE,MAAMD,QAAQC;AAAAA,IACdI,OAAO;AAAA,EAHF,CAAA,EAIJC,OAAON,QAAQ/D,KAJX;AAKR;AAED,SAASiE,uBAAuBjE,OAAegE,MAAc;AAC3D,UAAQA,MAAR;AAAA,IACE,KAAK;AACI,aAAA;AAAA,QACLhE,OAAOA,QAAQ;AAAA,QACfgE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLhE,OAAOA,QAAQ;AAAA,QACfgE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLhE,OAAOA,QAAQ;AAAA,QACfgE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLhE,OAAOA,QAAQ;AAAA,QACfgE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLhE,OAAOA,QAAQ;AAAA,QACfgE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLhE,OAAOA,QAAQ;AAAA,QACfgE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLhE,OAAOA,QAAQ;AAAA,QACfgE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLhE,OAAOA,QAAQ;AAAA,QACfgE,MAAM;AAAA,MAAA;AAAA,IAEV,KAAK;AACI,aAAA;AAAA,QACLhE,OAAOA,QAAQ;AAAA,QACfgE,MAAM;AAAA,MAAA;AAAA,IAEV;AACQ,YAAA,IAAIM,MAAO,uBAAsBN,MAAjC;AAAA,EA/CV;AAiDD;"}
+{"version":3,"file":"Metafield.js","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 */\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 (!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 */\nexport function parseMetafieldValue(\n  metafield: PartialDeep<MetafieldType, {recurseIntoArrays: true}> | null\n): ParsedMetafield['value'] {\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: {value: number; unit: string} = {\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) {\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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"}

package/dist/prod/ModelViewer.cjs

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const react = require("react");
+const require$$0 = require("react");
 const loadScript = require("./load-script.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 function ModelViewer(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-  const [modelViewer, setModelViewer] = react.useState(void 0);
-  const callbackRef = react.useCallback((node) => {
+  const [modelViewer, setModelViewer] = require$$0.useState(void 0);
+  const callbackRef = require$$0.useCallback((node) => {
     setModelViewer(node);
   }, []);
   const {
@@ -18,7 +18,7 @@ function ModelViewer(props) {
   const modelViewerLoadedStatus = loadScript.useLoadScript("https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js", {
     module: true
   });
-  react.useEffect(() => {
+  require$$0.useEffect(() => {
     if (!modelViewer) {
       return;
     }

package/dist/prod/ModelViewer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModelViewer.cjs","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\ntype PropsWeControl = 'src';\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  PropsWeControl\n> & {\n  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/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 */\nexport function ModelViewer(props: ModelViewerProps) {\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    if (!modelViewer) {\n      return;\n    }\n    if (passthroughProps.onError)\n      modelViewer.addEventListener('error', passthroughProps.onError);\n    if (passthroughProps.onLoad)\n      modelViewer.addEventListener('load', passthroughProps.onLoad);\n    if (passthroughProps.onPreload)\n      modelViewer.addEventListener('preload', passthroughProps.onPreload);\n    if (passthroughProps.onModelVisibility)\n      modelViewer.addEventListener(\n        'model-visibility',\n        passthroughProps.onModelVisibility\n      );\n    if (passthroughProps.onProgress)\n      modelViewer.addEventListener('progress', passthroughProps.onProgress);\n    if (passthroughProps.onArStatus)\n      modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n    if (passthroughProps.onArTracking)\n      modelViewer.addEventListener(\n        'ar-tracking',\n        passthroughProps.onArTracking\n      );\n    if (passthroughProps.onQuickLookButtonTapped)\n      modelViewer.addEventListener(\n        'quick-look-button-tapped',\n        passthroughProps.onQuickLookButtonTapped\n      );\n    if (passthroughProps.onCameraChange)\n      modelViewer.addEventListener(\n        'camera-change',\n        passthroughProps.onCameraChange\n      );\n    if (passthroughProps.onEnvironmentChange)\n      modelViewer.addEventListener(\n        'environment-change',\n        passthroughProps.onEnvironmentChange\n      );\n    if (passthroughProps.onPlay)\n      modelViewer.addEventListener('play', passthroughProps.onPlay);\n    if (passthroughProps.onPause)\n      modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n    if (passthroughProps.onSceneGraphReady)\n      modelViewer.addEventListener(\n        'scene-graph-ready',\n        passthroughProps.onSceneGraphReady\n      );\n\n    return () => {\n      if (modelViewer == null) {\n        return;\n      }\n      if (passthroughProps.onError)\n        modelViewer.removeEventListener('error', passthroughProps.onError);\n      if (passthroughProps.onLoad)\n        modelViewer.removeEventListener('load', passthroughProps.onLoad);\n      if (passthroughProps.onPreload)\n        modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n      if (passthroughProps.onModelVisibility)\n        modelViewer.removeEventListener(\n          'model-visibility',\n          passthroughProps.onModelVisibility\n        );\n      if (passthroughProps.onProgress)\n        modelViewer.removeEventListener(\n          'progress',\n          passthroughProps.onProgress\n        );\n      if (passthroughProps.onArStatus)\n        modelViewer.removeEventListener(\n          'ar-status',\n          passthroughProps.onArStatus\n        );\n      if (passthroughProps.onArTracking)\n        modelViewer.removeEventListener(\n          'ar-tracking',\n          passthroughProps.onArTracking\n        );\n      if (passthroughProps.onQuickLookButtonTapped)\n        modelViewer.removeEventListener(\n          'quick-look-button-tapped',\n          passthroughProps.onQuickLookButtonTapped\n        );\n      if (passthroughProps.onCameraChange)\n        modelViewer.removeEventListener(\n          'camera-change',\n          passthroughProps.onCameraChange\n        );\n      if (passthroughProps.onEnvironmentChange)\n        modelViewer.removeEventListener(\n          'environment-change',\n          passthroughProps.onEnvironmentChange\n        );\n      if (passthroughProps.onPlay)\n        modelViewer.removeEventListener('play', passthroughProps.onPlay);\n      if (passthroughProps.onPause)\n        modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n      if (passthroughProps.onSceneGraphReady)\n        modelViewer.removeEventListener(\n          'scene-graph-ready',\n          passthroughProps.onSceneGraphReady\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      // @ts-expect-error ref should exist\n      ref={callbackRef}\n      {...passthroughProps}\n      className={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      // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\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      rotation-per-second={passthroughProps.rotationPerSecond}\n      interaction-policy={passthroughProps.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      bounds={passthroughProps.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":["ModelViewer","props","modelViewer","setModelViewer","useState","undefined","callbackRef","useCallback","node","data","children","className","passthroughProps","modelViewerLoadedStatus","useLoadScript","module","useEffect","onError","addEventListener","onLoad","onPreload","onModelVisibility","onProgress","onArStatus","onArTracking","onQuickLookButtonTapped","onCameraChange","onEnvironmentChange","onPlay","onPause","onSceneGraphReady","removeEventListener","sources","url","sourcesUrlError","console","error","id","alt","cameraControls","poster","previewImage","autoplay","loading","reveal","ar","arModes","arScale","arPlacement","iosSrc","touchAction","disableZoom","orbitSensitivity","autoRotate","autoRotateDelay","rotationPerSecond","interactionPolicy","interactionPrompt","interactionPromptStyle","interactionPromptThreshold","cameraOrbit","cameraTarget","fieldOfView","maxCameraOrbit","minCameraOrbit","maxFieldOfView","minFieldOfView","bounds","interpolationDecay","skyboxImage","environmentImage","exposure","shadowIntensity","shadowSoftness","animationName","animationCrossfadeDuration","variantName","orientation","scale"],"mappings":"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"}
+{"version":3,"file":"ModelViewer.cjs","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\ntype PropsWeControl = 'src';\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  PropsWeControl\n> & {\n  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/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 */\nexport function ModelViewer(props: ModelViewerProps) {\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    if (!modelViewer) {\n      return;\n    }\n    if (passthroughProps.onError)\n      modelViewer.addEventListener('error', passthroughProps.onError);\n    if (passthroughProps.onLoad)\n      modelViewer.addEventListener('load', passthroughProps.onLoad);\n    if (passthroughProps.onPreload)\n      modelViewer.addEventListener('preload', passthroughProps.onPreload);\n    if (passthroughProps.onModelVisibility)\n      modelViewer.addEventListener(\n        'model-visibility',\n        passthroughProps.onModelVisibility\n      );\n    if (passthroughProps.onProgress)\n      modelViewer.addEventListener('progress', passthroughProps.onProgress);\n    if (passthroughProps.onArStatus)\n      modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n    if (passthroughProps.onArTracking)\n      modelViewer.addEventListener(\n        'ar-tracking',\n        passthroughProps.onArTracking\n      );\n    if (passthroughProps.onQuickLookButtonTapped)\n      modelViewer.addEventListener(\n        'quick-look-button-tapped',\n        passthroughProps.onQuickLookButtonTapped\n      );\n    if (passthroughProps.onCameraChange)\n      modelViewer.addEventListener(\n        'camera-change',\n        passthroughProps.onCameraChange\n      );\n    if (passthroughProps.onEnvironmentChange)\n      modelViewer.addEventListener(\n        'environment-change',\n        passthroughProps.onEnvironmentChange\n      );\n    if (passthroughProps.onPlay)\n      modelViewer.addEventListener('play', passthroughProps.onPlay);\n    if (passthroughProps.onPause)\n      modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n    if (passthroughProps.onSceneGraphReady)\n      modelViewer.addEventListener(\n        'scene-graph-ready',\n        passthroughProps.onSceneGraphReady\n      );\n\n    return () => {\n      if (modelViewer == null) {\n        return;\n      }\n      if (passthroughProps.onError)\n        modelViewer.removeEventListener('error', passthroughProps.onError);\n      if (passthroughProps.onLoad)\n        modelViewer.removeEventListener('load', passthroughProps.onLoad);\n      if (passthroughProps.onPreload)\n        modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n      if (passthroughProps.onModelVisibility)\n        modelViewer.removeEventListener(\n          'model-visibility',\n          passthroughProps.onModelVisibility\n        );\n      if (passthroughProps.onProgress)\n        modelViewer.removeEventListener(\n          'progress',\n          passthroughProps.onProgress\n        );\n      if (passthroughProps.onArStatus)\n        modelViewer.removeEventListener(\n          'ar-status',\n          passthroughProps.onArStatus\n        );\n      if (passthroughProps.onArTracking)\n        modelViewer.removeEventListener(\n          'ar-tracking',\n          passthroughProps.onArTracking\n        );\n      if (passthroughProps.onQuickLookButtonTapped)\n        modelViewer.removeEventListener(\n          'quick-look-button-tapped',\n          passthroughProps.onQuickLookButtonTapped\n        );\n      if (passthroughProps.onCameraChange)\n        modelViewer.removeEventListener(\n          'camera-change',\n          passthroughProps.onCameraChange\n        );\n      if (passthroughProps.onEnvironmentChange)\n        modelViewer.removeEventListener(\n          'environment-change',\n          passthroughProps.onEnvironmentChange\n        );\n      if (passthroughProps.onPlay)\n        modelViewer.removeEventListener('play', passthroughProps.onPlay);\n      if (passthroughProps.onPause)\n        modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n      if (passthroughProps.onSceneGraphReady)\n        modelViewer.removeEventListener(\n          'scene-graph-ready',\n          passthroughProps.onSceneGraphReady\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      // @ts-expect-error ref should exist\n      ref={callbackRef}\n      {...passthroughProps}\n      className={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      // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\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      rotation-per-second={passthroughProps.rotationPerSecond}\n      interaction-policy={passthroughProps.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      bounds={passthroughProps.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":["ModelViewer","props","modelViewer","setModelViewer","useState","undefined","callbackRef","useCallback","node","data","children","className","passthroughProps","modelViewerLoadedStatus","useLoadScript","module","useEffect","onError","addEventListener","onLoad","onPreload","onModelVisibility","onProgress","onArStatus","onArTracking","onQuickLookButtonTapped","onCameraChange","onEnvironmentChange","onPlay","onPause","onSceneGraphReady","removeEventListener","sources","url","sourcesUrlError","console","error","id","alt","cameraControls","poster","previewImage","autoplay","loading","reveal","ar","arModes","arScale","arPlacement","iosSrc","touchAction","disableZoom","orbitSensitivity","autoRotate","autoRotateDelay","rotationPerSecond","interactionPolicy","interactionPrompt","interactionPromptStyle","interactionPromptThreshold","cameraOrbit","cameraTarget","fieldOfView","maxCameraOrbit","minCameraOrbit","maxFieldOfView","minFieldOfView","bounds","interpolationDecay","skyboxImage","environmentImage","exposure","shadowIntensity","shadowSoftness","animationName","animationCrossfadeDuration","variantName","orientation","scale"],"mappings":"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"}

package/dist/prod/Money.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Money.cjs","sources":["../../src/Money.tsx"],"sourcesContent":["import React, {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface CustomProps<ComponentGeneric extends React.ElementType> {\n  /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n  as?: ComponentGeneric;\n  /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */\n  data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n  /** Whether to remove the currency symbol from the output. */\n  withoutCurrency?: boolean;\n  /** Whether to remove trailing zeros (fractional money) from the output. */\n  withoutTrailingZeros?: boolean;\n  /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/latest/objects/unitpricemeasurement). */\n  measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n  /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */\n  measurementSeparator?: ReactNode;\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type MoneyProps<ComponentGeneric extends React.ElementType> =\n  CustomProps<ComponentGeneric> &\n    Omit<\n      React.ComponentPropsWithoutRef<ComponentGeneric>,\n      keyof CustomProps<ComponentGeneric>\n    >;\n\n/**\n * The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the\n * `locale` in the `ShopifyProvider` component.\n */\nexport function Money<ComponentGeneric extends React.ElementType>({\n  data,\n  as,\n  withoutCurrency,\n  withoutTrailingZeros,\n  measurement,\n  measurementSeparator = '/',\n  ...passthroughProps\n}: MoneyProps<ComponentGeneric>) {\n  if (!isMoney(data)) {\n    throw new Error(\n      `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`\n    );\n  }\n  const moneyObject = useMoney(data);\n  const Wrapper = as ?? 'div';\n\n  let output = moneyObject.localizedString;\n\n  if (withoutCurrency || withoutTrailingZeros) {\n    if (withoutCurrency && !withoutTrailingZeros) {\n      output = moneyObject.amount;\n    } else if (!withoutCurrency && withoutTrailingZeros) {\n      output = moneyObject.withoutTrailingZeros;\n    } else {\n      // both\n      output = moneyObject.withoutTrailingZerosAndCurrency;\n    }\n  }\n\n  return (\n    <Wrapper {...passthroughProps}>\n      {output}\n      {measurement && measurement.referenceUnit && (\n        <>\n          {measurementSeparator}\n          {measurement.referenceUnit}\n        </>\n      )}\n    </Wrapper>\n  );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n  maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>\n): maybeMoney is MoneyV2 {\n  return (\n    typeof maybeMoney.amount === 'string' &&\n    !!maybeMoney.amount &&\n    typeof maybeMoney.currencyCode === 'string' &&\n    !!maybeMoney.currencyCode\n  );\n}\n"],"names":["Money","data","as","withoutCurrency","withoutTrailingZeros","measurement","measurementSeparator","passthroughProps","isMoney","Error","moneyObject","useMoney","Wrapper","output","localizedString","amount","withoutTrailingZerosAndCurrency","referenceUnit","_Fragment","maybeMoney","currencyCode"],"mappings":";;;;AAiCO,SAASA,MAAkD;AAAA,EAChEC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,uBAAuB;AAAA,KACpBC;AAP6D,GAQjC;AAC3B,MAAA,CAACC,QAAQP,IAAD,GAAQ;AACZ,UAAA,IAAIQ,MACP,yEADG;AAAA,EAGP;AACKC,QAAAA,cAAcC,kBAASV,IAAD;AAC5B,QAAMW,UAAUV,kBAAM;AAEtB,MAAIW,SAASH,YAAYI;AAEzB,MAAIX,mBAAmBC,sBAAsB;AACvCD,QAAAA,mBAAmB,CAACC,sBAAsB;AAC5CS,eAASH,YAAYK;AAAAA,IAAAA,WACZ,CAACZ,mBAAmBC,sBAAsB;AACnDS,eAASH,YAAYN;AAAAA,IAAAA,OAChB;AAELS,eAASH,YAAYM;AAAAA,IACtB;AAAA,EACF;AAED,yCACG,SAAD;AAAA,IAAA,GAAaT;AAAAA,IAAb,UAAA,CACGM,QACAR,eAAeA,YAAYY,iDAC1BC,qBAAA;AAAA,MAAA,UAAA,CACGZ,sBACAD,YAAYY,aAFf;AAAA,IAAA,CAHJ,CAAA;AAAA,EAAA,CADF;AAWD;AAGD,SAAST,QACPW,YACuB;AACvB,SACE,OAAOA,WAAWJ,WAAW,YAC7B,CAAC,CAACI,WAAWJ,UACb,OAAOI,WAAWC,iBAAiB,YACnC,CAAC,CAACD,WAAWC;AAEhB;;"}
+{"version":3,"file":"Money.cjs","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface CustomProps<ComponentGeneric extends React.ElementType> {\n  /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n  as?: ComponentGeneric;\n  /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */\n  data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n  /** Whether to remove the currency symbol from the output. */\n  withoutCurrency?: boolean;\n  /** Whether to remove trailing zeros (fractional money) from the output. */\n  withoutTrailingZeros?: boolean;\n  /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/latest/objects/unitpricemeasurement). */\n  measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n  /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */\n  measurementSeparator?: ReactNode;\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type MoneyProps<ComponentGeneric extends React.ElementType> =\n  CustomProps<ComponentGeneric> &\n    Omit<\n      React.ComponentPropsWithoutRef<ComponentGeneric>,\n      keyof CustomProps<ComponentGeneric>\n    >;\n\n/**\n * The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the\n * `locale` in the `ShopifyProvider` component.\n */\nexport function Money<ComponentGeneric extends React.ElementType>({\n  data,\n  as,\n  withoutCurrency,\n  withoutTrailingZeros,\n  measurement,\n  measurementSeparator = '/',\n  ...passthroughProps\n}: MoneyProps<ComponentGeneric>) {\n  if (!isMoney(data)) {\n    throw new Error(\n      `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`\n    );\n  }\n  const moneyObject = useMoney(data);\n  const Wrapper = as ?? 'div';\n\n  let output = moneyObject.localizedString;\n\n  if (withoutCurrency || withoutTrailingZeros) {\n    if (withoutCurrency && !withoutTrailingZeros) {\n      output = moneyObject.amount;\n    } else if (!withoutCurrency && withoutTrailingZeros) {\n      output = moneyObject.withoutTrailingZeros;\n    } else {\n      // both\n      output = moneyObject.withoutTrailingZerosAndCurrency;\n    }\n  }\n\n  return (\n    <Wrapper {...passthroughProps}>\n      {output}\n      {measurement && measurement.referenceUnit && (\n        <>\n          {measurementSeparator}\n          {measurement.referenceUnit}\n        </>\n      )}\n    </Wrapper>\n  );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n  maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>\n): maybeMoney is MoneyV2 {\n  return (\n    typeof maybeMoney.amount === 'string' &&\n    !!maybeMoney.amount &&\n    typeof maybeMoney.currencyCode === 'string' &&\n    !!maybeMoney.currencyCode\n  );\n}\n"],"names":["Money","data","as","withoutCurrency","withoutTrailingZeros","measurement","measurementSeparator","passthroughProps","isMoney","Error","moneyObject","useMoney","Wrapper","output","localizedString","amount","withoutTrailingZerosAndCurrency","referenceUnit","_Fragment","maybeMoney","currencyCode"],"mappings":";;;;AAiCO,SAASA,MAAkD;AAAA,EAChEC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,uBAAuB;AAAA,KACpBC;AAP6D,GAQjC;AAC3B,MAAA,CAACC,QAAQP,IAAD,GAAQ;AACZ,UAAA,IAAIQ,MACP,yEADG;AAAA,EAGP;AACKC,QAAAA,cAAcC,kBAASV,IAAD;AAC5B,QAAMW,UAAUV,kBAAM;AAEtB,MAAIW,SAASH,YAAYI;AAEzB,MAAIX,mBAAmBC,sBAAsB;AACvCD,QAAAA,mBAAmB,CAACC,sBAAsB;AAC5CS,eAASH,YAAYK;AAAAA,IAAAA,WACZ,CAACZ,mBAAmBC,sBAAsB;AACnDS,eAASH,YAAYN;AAAAA,IAAAA,OAChB;AAELS,eAASH,YAAYM;AAAAA,IACtB;AAAA,EACF;AAED,yCACG,SAAD;AAAA,IAAA,GAAaT;AAAAA,IAAb,UAAA,CACGM,QACAR,eAAeA,YAAYY,iDAC1BC,qBAAA;AAAA,MAAA,UAAA,CACGZ,sBACAD,YAAYY,aAFf;AAAA,IAAA,CAHJ,CAAA;AAAA,EAAA,CADF;AAWD;AAGD,SAAST,QACPW,YACuB;AACvB,SACE,OAAOA,WAAWJ,WAAW,YAC7B,CAAC,CAACI,WAAWJ,UACb,OAAOI,WAAWC,iBAAiB,YACnC,CAAC,CAACD,WAAWC;AAEhB;;"}

package/dist/prod/Money.js.map

@@ -1 +1 @@
-{"version":3,"file":"Money.js","sources":["../../src/Money.tsx"],"sourcesContent":["import React, {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface CustomProps<ComponentGeneric extends React.ElementType> {\n  /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n  as?: ComponentGeneric;\n  /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */\n  data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n  /** Whether to remove the currency symbol from the output. */\n  withoutCurrency?: boolean;\n  /** Whether to remove trailing zeros (fractional money) from the output. */\n  withoutTrailingZeros?: boolean;\n  /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/latest/objects/unitpricemeasurement). */\n  measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n  /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */\n  measurementSeparator?: ReactNode;\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type MoneyProps<ComponentGeneric extends React.ElementType> =\n  CustomProps<ComponentGeneric> &\n    Omit<\n      React.ComponentPropsWithoutRef<ComponentGeneric>,\n      keyof CustomProps<ComponentGeneric>\n    >;\n\n/**\n * The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the\n * `locale` in the `ShopifyProvider` component.\n */\nexport function Money<ComponentGeneric extends React.ElementType>({\n  data,\n  as,\n  withoutCurrency,\n  withoutTrailingZeros,\n  measurement,\n  measurementSeparator = '/',\n  ...passthroughProps\n}: MoneyProps<ComponentGeneric>) {\n  if (!isMoney(data)) {\n    throw new Error(\n      `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`\n    );\n  }\n  const moneyObject = useMoney(data);\n  const Wrapper = as ?? 'div';\n\n  let output = moneyObject.localizedString;\n\n  if (withoutCurrency || withoutTrailingZeros) {\n    if (withoutCurrency && !withoutTrailingZeros) {\n      output = moneyObject.amount;\n    } else if (!withoutCurrency && withoutTrailingZeros) {\n      output = moneyObject.withoutTrailingZeros;\n    } else {\n      // both\n      output = moneyObject.withoutTrailingZerosAndCurrency;\n    }\n  }\n\n  return (\n    <Wrapper {...passthroughProps}>\n      {output}\n      {measurement && measurement.referenceUnit && (\n        <>\n          {measurementSeparator}\n          {measurement.referenceUnit}\n        </>\n      )}\n    </Wrapper>\n  );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n  maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>\n): maybeMoney is MoneyV2 {\n  return (\n    typeof maybeMoney.amount === 'string' &&\n    !!maybeMoney.amount &&\n    typeof maybeMoney.currencyCode === 'string' &&\n    !!maybeMoney.currencyCode\n  );\n}\n"],"names":["Money","data","as","withoutCurrency","withoutTrailingZeros","measurement","measurementSeparator","passthroughProps","isMoney","Error","moneyObject","useMoney","Wrapper","output","localizedString","amount","withoutTrailingZerosAndCurrency","referenceUnit","_Fragment","maybeMoney","currencyCode"],"mappings":";;AAiCO,SAASA,MAAkD;AAAA,EAChEC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,uBAAuB;AAAA,KACpBC;AAP6D,GAQjC;AAC3B,MAAA,CAACC,QAAQP,IAAD,GAAQ;AACZ,UAAA,IAAIQ,MACP,yEADG;AAAA,EAGP;AACKC,QAAAA,cAAcC,SAASV,IAAD;AAC5B,QAAMW,UAAUV,kBAAM;AAEtB,MAAIW,SAASH,YAAYI;AAEzB,MAAIX,mBAAmBC,sBAAsB;AACvCD,QAAAA,mBAAmB,CAACC,sBAAsB;AAC5CS,eAASH,YAAYK;AAAAA,IAAAA,WACZ,CAACZ,mBAAmBC,sBAAsB;AACnDS,eAASH,YAAYN;AAAAA,IAAAA,OAChB;AAELS,eAASH,YAAYM;AAAAA,IACtB;AAAA,EACF;AAED,8BACG,SAAD;AAAA,IAAA,GAAaT;AAAAA,IAAb,UAAA,CACGM,QACAR,eAAeA,YAAYY,sCAC1BC,UAAA;AAAA,MAAA,UAAA,CACGZ,sBACAD,YAAYY,aAFf;AAAA,IAAA,CAHJ,CAAA;AAAA,EAAA,CADF;AAWD;AAGD,SAAST,QACPW,YACuB;AACvB,SACE,OAAOA,WAAWJ,WAAW,YAC7B,CAAC,CAACI,WAAWJ,UACb,OAAOI,WAAWC,iBAAiB,YACnC,CAAC,CAACD,WAAWC;AAEhB;"}
+{"version":3,"file":"Money.js","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface CustomProps<ComponentGeneric extends React.ElementType> {\n  /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n  as?: ComponentGeneric;\n  /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */\n  data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n  /** Whether to remove the currency symbol from the output. */\n  withoutCurrency?: boolean;\n  /** Whether to remove trailing zeros (fractional money) from the output. */\n  withoutTrailingZeros?: boolean;\n  /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/latest/objects/unitpricemeasurement). */\n  measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n  /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */\n  measurementSeparator?: ReactNode;\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type MoneyProps<ComponentGeneric extends React.ElementType> =\n  CustomProps<ComponentGeneric> &\n    Omit<\n      React.ComponentPropsWithoutRef<ComponentGeneric>,\n      keyof CustomProps<ComponentGeneric>\n    >;\n\n/**\n * The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the\n * `locale` in the `ShopifyProvider` component.\n */\nexport function Money<ComponentGeneric extends React.ElementType>({\n  data,\n  as,\n  withoutCurrency,\n  withoutTrailingZeros,\n  measurement,\n  measurementSeparator = '/',\n  ...passthroughProps\n}: MoneyProps<ComponentGeneric>) {\n  if (!isMoney(data)) {\n    throw new Error(\n      `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`\n    );\n  }\n  const moneyObject = useMoney(data);\n  const Wrapper = as ?? 'div';\n\n  let output = moneyObject.localizedString;\n\n  if (withoutCurrency || withoutTrailingZeros) {\n    if (withoutCurrency && !withoutTrailingZeros) {\n      output = moneyObject.amount;\n    } else if (!withoutCurrency && withoutTrailingZeros) {\n      output = moneyObject.withoutTrailingZeros;\n    } else {\n      // both\n      output = moneyObject.withoutTrailingZerosAndCurrency;\n    }\n  }\n\n  return (\n    <Wrapper {...passthroughProps}>\n      {output}\n      {measurement && measurement.referenceUnit && (\n        <>\n          {measurementSeparator}\n          {measurement.referenceUnit}\n        </>\n      )}\n    </Wrapper>\n  );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n  maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>\n): maybeMoney is MoneyV2 {\n  return (\n    typeof maybeMoney.amount === 'string' &&\n    !!maybeMoney.amount &&\n    typeof maybeMoney.currencyCode === 'string' &&\n    !!maybeMoney.currencyCode\n  );\n}\n"],"names":["Money","data","as","withoutCurrency","withoutTrailingZeros","measurement","measurementSeparator","passthroughProps","isMoney","Error","moneyObject","useMoney","Wrapper","output","localizedString","amount","withoutTrailingZerosAndCurrency","referenceUnit","_Fragment","maybeMoney","currencyCode"],"mappings":";;AAiCO,SAASA,MAAkD;AAAA,EAChEC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,uBAAuB;AAAA,KACpBC;AAP6D,GAQjC;AAC3B,MAAA,CAACC,QAAQP,IAAD,GAAQ;AACZ,UAAA,IAAIQ,MACP,yEADG;AAAA,EAGP;AACKC,QAAAA,cAAcC,SAASV,IAAD;AAC5B,QAAMW,UAAUV,kBAAM;AAEtB,MAAIW,SAASH,YAAYI;AAEzB,MAAIX,mBAAmBC,sBAAsB;AACvCD,QAAAA,mBAAmB,CAACC,sBAAsB;AAC5CS,eAASH,YAAYK;AAAAA,IAAAA,WACZ,CAACZ,mBAAmBC,sBAAsB;AACnDS,eAASH,YAAYN;AAAAA,IAAAA,OAChB;AAELS,eAASH,YAAYM;AAAAA,IACtB;AAAA,EACF;AAED,8BACG,SAAD;AAAA,IAAA,GAAaT;AAAAA,IAAb,UAAA,CACGM,QACAR,eAAeA,YAAYY,sCAC1BC,UAAA;AAAA,MAAA,UAAA,CACGZ,sBACAD,YAAYY,aAFf;AAAA,IAAA,CAHJ,CAAA;AAAA,EAAA,CADF;AAWD;AAGD,SAAST,QACPW,YACuB;AACvB,SACE,OAAOA,WAAWJ,WAAW,YAC7B,CAAC,CAACI,WAAWJ,UACb,OAAOI,WAAWC,iBAAiB,YACnC,CAAC,CAACD,WAAWC;AAEhB;"}

package/dist/prod/ProductPrice.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProductPrice.cjs","sources":["../../src/ProductPrice.tsx"],"sourcesContent":["import React from 'react';\nimport type {\n  MoneyV2,\n  UnitPriceMeasurement,\n  Product,\n} from './storefront-api-types.js';\nimport {Money, type MoneyProps} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\ninterface ProductPriceProps {\n  /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** The type of price. Valid values: `regular` (default) or `compareAt`. */\n  priceType?: 'regular' | 'compareAt';\n  /** The type of value. Valid values: `min` (default), `max` or `unit`. */\n  valueType?: 'max' | 'min' | 'unit';\n  /** The ID of the variant. */\n  variantId?: string;\n}\n\n/**\n * The `ProductPrice` component renders a `Money` component with the product\n * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.\n */\nexport function ProductPrice<ComponentGeneric extends React.ElementType>(\n  props: ProductPriceProps &\n    Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>\n) {\n  const {\n    priceType = 'regular',\n    variantId,\n    valueType = 'min',\n    data: product,\n    ...passthroughProps\n  } = props;\n\n  if (product == null) {\n    throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);\n  }\n\n  let price: Partial<MoneyV2> | undefined | null;\n  let measurement: Partial<UnitPriceMeasurement> | undefined | null;\n\n  const variant = variantId\n    ? flattenConnection(product?.variants ?? {}).find(\n        (variant) => variant?.id === variantId\n      ) ?? null\n    : null;\n\n  if (priceType === 'compareAt') {\n    if (variantId && variant) {\n      if (variant.compareAtPriceV2?.amount === variant.priceV2?.amount) {\n        return null;\n      }\n      price = variant.compareAtPriceV2;\n    } else if (valueType === 'max') {\n      price = product?.compareAtPriceRange?.maxVariantPrice;\n    } else {\n      price = product?.compareAtPriceRange?.minVariantPrice;\n    }\n  } else {\n    if (variantId && variant) {\n      price = variant.priceV2;\n      if (valueType === 'unit') {\n        price = variant.unitPrice;\n        measurement = variant.unitPriceMeasurement;\n      }\n    } else if (valueType === 'max') {\n      price = product.priceRange?.maxVariantPrice;\n    } else {\n      price = product.priceRange?.minVariantPrice;\n    }\n  }\n\n  if (!price) {\n    return null;\n  }\n\n  if (measurement) {\n    return (\n      <Money {...passthroughProps} data={price} measurement={measurement} />\n    );\n  }\n\n  return <Money {...passthroughProps} data={price} />;\n}\n"],"names":["ProductPrice","props","priceType","variantId","valueType","data","product","passthroughProps","Error","price","measurement","variant","flattenConnection","variants","find","id","compareAtPriceV2","amount","priceV2","compareAtPriceRange","maxVariantPrice","minVariantPrice","unitPrice","unitPriceMeasurement","priceRange","Money"],"mappings":";;;;;AAyBO,SAASA,aACdC,OAEA;;AACM,QAAA;AAAA,IACJC,YAAY;AAAA,IACZC;AAAAA,IACAC,YAAY;AAAA,IACZC,MAAMC;AAAAA,OACHC;AAAAA,EACDN,IAAAA;AAEJ,MAAIK,WAAW,MAAM;AACb,UAAA,IAAIE,MAAO,uDAAX;AAAA,EACP;AAEGC,MAAAA;AACAC,MAAAA;AAEJ,QAAMC,UAAUR,aACZS,uBAAAA,mBAAkBN,wCAASO,aAATP,YAAqB,CAAA,CAAtB,EAA0BQ,KACxCH,CAAAA,cAAYA,qCAASI,QAAOZ,SAD/B,MAAAS,YAEK,OACL;AAEJ,MAAIV,cAAc,aAAa;AAC7B,QAAIC,aAAaQ,SAAS;AACxB,YAAIA,aAAQK,qBAARL,mBAA0BM,cAAWN,aAAQO,YAARP,mBAAiBM,SAAQ;AACzD,eAAA;AAAA,MACR;AACDR,cAAQE,QAAQK;AAAAA,IAAAA,WACPZ,cAAc,OAAO;AAC9BK,eAAQH,wCAASa,wBAATb,mBAA8Bc;AAAAA,IAAAA,OACjC;AACLX,eAAQH,wCAASa,wBAATb,mBAA8Be;AAAAA,IACvC;AAAA,EAAA,OACI;AACL,QAAIlB,aAAaQ,SAAS;AACxBF,cAAQE,QAAQO;AAChB,UAAId,cAAc,QAAQ;AACxBK,gBAAQE,QAAQW;AAChBZ,sBAAcC,QAAQY;AAAAA,MACvB;AAAA,IAAA,WACQnB,cAAc,OAAO;AAC9BK,eAAQH,aAAQkB,eAARlB,mBAAoBc;AAAAA,IAAAA,OACvB;AACLX,eAAQH,aAAQkB,eAARlB,mBAAoBe;AAAAA,IAC7B;AAAA,EACF;AAED,MAAI,CAACZ,OAAO;AACH,WAAA;AAAA,EACR;AAED,MAAIC,aAAa;AACf,0CACGe,MAAAA,OAAD;AAAA,MAAA,GAAWlB;AAAAA,MAAkB,MAAME;AAAAA,MAAO;AAAA,IAAA,CAD5C;AAAA,EAGD;AAED,wCAAQgB,MAAAA,OAAD;AAAA,IAAA,GAAWlB;AAAAA,IAAkB,MAAME;AAAAA,EAAAA,CAA1C;AACD;;"}
+{"version":3,"file":"ProductPrice.cjs","sources":["../../src/ProductPrice.tsx"],"sourcesContent":["import type {\n  MoneyV2,\n  UnitPriceMeasurement,\n  Product,\n} from './storefront-api-types.js';\nimport {Money, type MoneyProps} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\ninterface ProductPriceProps {\n  /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** The type of price. Valid values: `regular` (default) or `compareAt`. */\n  priceType?: 'regular' | 'compareAt';\n  /** The type of value. Valid values: `min` (default), `max` or `unit`. */\n  valueType?: 'max' | 'min' | 'unit';\n  /** The ID of the variant. */\n  variantId?: string;\n}\n\n/**\n * The `ProductPrice` component renders a `Money` component with the product\n * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.\n */\nexport function ProductPrice<ComponentGeneric extends React.ElementType>(\n  props: ProductPriceProps &\n    Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>\n) {\n  const {\n    priceType = 'regular',\n    variantId,\n    valueType = 'min',\n    data: product,\n    ...passthroughProps\n  } = props;\n\n  if (product == null) {\n    throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);\n  }\n\n  let price: Partial<MoneyV2> | undefined | null;\n  let measurement: Partial<UnitPriceMeasurement> | undefined | null;\n\n  const variant = variantId\n    ? flattenConnection(product?.variants ?? {}).find(\n        (variant) => variant?.id === variantId\n      ) ?? null\n    : null;\n\n  if (priceType === 'compareAt') {\n    if (variantId && variant) {\n      if (variant.compareAtPriceV2?.amount === variant.priceV2?.amount) {\n        return null;\n      }\n      price = variant.compareAtPriceV2;\n    } else if (valueType === 'max') {\n      price = product?.compareAtPriceRange?.maxVariantPrice;\n    } else {\n      price = product?.compareAtPriceRange?.minVariantPrice;\n    }\n  } else {\n    if (variantId && variant) {\n      price = variant.priceV2;\n      if (valueType === 'unit') {\n        price = variant.unitPrice;\n        measurement = variant.unitPriceMeasurement;\n      }\n    } else if (valueType === 'max') {\n      price = product.priceRange?.maxVariantPrice;\n    } else {\n      price = product.priceRange?.minVariantPrice;\n    }\n  }\n\n  if (!price) {\n    return null;\n  }\n\n  if (measurement) {\n    return (\n      <Money {...passthroughProps} data={price} measurement={measurement} />\n    );\n  }\n\n  return <Money {...passthroughProps} data={price} />;\n}\n"],"names":["ProductPrice","props","priceType","variantId","valueType","data","product","passthroughProps","Error","price","measurement","variant","flattenConnection","variants","find","id","compareAtPriceV2","amount","priceV2","compareAtPriceRange","maxVariantPrice","minVariantPrice","unitPrice","unitPriceMeasurement","priceRange","Money"],"mappings":";;;;;AAwBO,SAASA,aACdC,OAEA;;AACM,QAAA;AAAA,IACJC,YAAY;AAAA,IACZC;AAAAA,IACAC,YAAY;AAAA,IACZC,MAAMC;AAAAA,OACHC;AAAAA,EACDN,IAAAA;AAEJ,MAAIK,WAAW,MAAM;AACb,UAAA,IAAIE,MAAO,uDAAX;AAAA,EACP;AAEGC,MAAAA;AACAC,MAAAA;AAEJ,QAAMC,UAAUR,aACZS,uBAAAA,mBAAkBN,wCAASO,aAATP,YAAqB,CAAA,CAAtB,EAA0BQ,KACxCH,CAAAA,cAAYA,qCAASI,QAAOZ,SAD/B,MAAAS,YAEK,OACL;AAEJ,MAAIV,cAAc,aAAa;AAC7B,QAAIC,aAAaQ,SAAS;AACxB,YAAIA,aAAQK,qBAARL,mBAA0BM,cAAWN,aAAQO,YAARP,mBAAiBM,SAAQ;AACzD,eAAA;AAAA,MACR;AACDR,cAAQE,QAAQK;AAAAA,IAAAA,WACPZ,cAAc,OAAO;AAC9BK,eAAQH,wCAASa,wBAATb,mBAA8Bc;AAAAA,IAAAA,OACjC;AACLX,eAAQH,wCAASa,wBAATb,mBAA8Be;AAAAA,IACvC;AAAA,EAAA,OACI;AACL,QAAIlB,aAAaQ,SAAS;AACxBF,cAAQE,QAAQO;AAChB,UAAId,cAAc,QAAQ;AACxBK,gBAAQE,QAAQW;AAChBZ,sBAAcC,QAAQY;AAAAA,MACvB;AAAA,IAAA,WACQnB,cAAc,OAAO;AAC9BK,eAAQH,aAAQkB,eAARlB,mBAAoBc;AAAAA,IAAAA,OACvB;AACLX,eAAQH,aAAQkB,eAARlB,mBAAoBe;AAAAA,IAC7B;AAAA,EACF;AAED,MAAI,CAACZ,OAAO;AACH,WAAA;AAAA,EACR;AAED,MAAIC,aAAa;AACf,0CACGe,MAAAA,OAAD;AAAA,MAAA,GAAWlB;AAAAA,MAAkB,MAAME;AAAAA,MAAO;AAAA,IAAA,CAD5C;AAAA,EAGD;AAED,wCAAQgB,MAAAA,OAAD;AAAA,IAAA,GAAWlB;AAAAA,IAAkB,MAAME;AAAAA,EAAAA,CAA1C;AACD;;"}

package/dist/prod/ProductPrice.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductPrice.js","sources":["../../src/ProductPrice.tsx"],"sourcesContent":["import React from 'react';\nimport type {\n  MoneyV2,\n  UnitPriceMeasurement,\n  Product,\n} from './storefront-api-types.js';\nimport {Money, type MoneyProps} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\ninterface ProductPriceProps {\n  /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** The type of price. Valid values: `regular` (default) or `compareAt`. */\n  priceType?: 'regular' | 'compareAt';\n  /** The type of value. Valid values: `min` (default), `max` or `unit`. */\n  valueType?: 'max' | 'min' | 'unit';\n  /** The ID of the variant. */\n  variantId?: string;\n}\n\n/**\n * The `ProductPrice` component renders a `Money` component with the product\n * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.\n */\nexport function ProductPrice<ComponentGeneric extends React.ElementType>(\n  props: ProductPriceProps &\n    Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>\n) {\n  const {\n    priceType = 'regular',\n    variantId,\n    valueType = 'min',\n    data: product,\n    ...passthroughProps\n  } = props;\n\n  if (product == null) {\n    throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);\n  }\n\n  let price: Partial<MoneyV2> | undefined | null;\n  let measurement: Partial<UnitPriceMeasurement> | undefined | null;\n\n  const variant = variantId\n    ? flattenConnection(product?.variants ?? {}).find(\n        (variant) => variant?.id === variantId\n      ) ?? null\n    : null;\n\n  if (priceType === 'compareAt') {\n    if (variantId && variant) {\n      if (variant.compareAtPriceV2?.amount === variant.priceV2?.amount) {\n        return null;\n      }\n      price = variant.compareAtPriceV2;\n    } else if (valueType === 'max') {\n      price = product?.compareAtPriceRange?.maxVariantPrice;\n    } else {\n      price = product?.compareAtPriceRange?.minVariantPrice;\n    }\n  } else {\n    if (variantId && variant) {\n      price = variant.priceV2;\n      if (valueType === 'unit') {\n        price = variant.unitPrice;\n        measurement = variant.unitPriceMeasurement;\n      }\n    } else if (valueType === 'max') {\n      price = product.priceRange?.maxVariantPrice;\n    } else {\n      price = product.priceRange?.minVariantPrice;\n    }\n  }\n\n  if (!price) {\n    return null;\n  }\n\n  if (measurement) {\n    return (\n      <Money {...passthroughProps} data={price} measurement={measurement} />\n    );\n  }\n\n  return <Money {...passthroughProps} data={price} />;\n}\n"],"names":["ProductPrice","props","priceType","variantId","valueType","data","product","passthroughProps","Error","price","measurement","variant","flattenConnection","variants","find","id","compareAtPriceV2","amount","priceV2","compareAtPriceRange","maxVariantPrice","minVariantPrice","unitPrice","unitPriceMeasurement","priceRange"],"mappings":";;;AAyBO,SAASA,aACdC,OAEA;;AACM,QAAA;AAAA,IACJC,YAAY;AAAA,IACZC;AAAAA,IACAC,YAAY;AAAA,IACZC,MAAMC;AAAAA,OACHC;AAAAA,EACDN,IAAAA;AAEJ,MAAIK,WAAW,MAAM;AACb,UAAA,IAAIE,MAAO,uDAAX;AAAA,EACP;AAEGC,MAAAA;AACAC,MAAAA;AAEJ,QAAMC,UAAUR,aACZS,wBAAkBN,wCAASO,aAATP,YAAqB,CAAA,CAAtB,EAA0BQ,KACxCH,CAAAA,cAAYA,qCAASI,QAAOZ,SAD/B,MAAAS,YAEK,OACL;AAEJ,MAAIV,cAAc,aAAa;AAC7B,QAAIC,aAAaQ,SAAS;AACxB,YAAIA,aAAQK,qBAARL,mBAA0BM,cAAWN,aAAQO,YAARP,mBAAiBM,SAAQ;AACzD,eAAA;AAAA,MACR;AACDR,cAAQE,QAAQK;AAAAA,IAAAA,WACPZ,cAAc,OAAO;AAC9BK,eAAQH,wCAASa,wBAATb,mBAA8Bc;AAAAA,IAAAA,OACjC;AACLX,eAAQH,wCAASa,wBAATb,mBAA8Be;AAAAA,IACvC;AAAA,EAAA,OACI;AACL,QAAIlB,aAAaQ,SAAS;AACxBF,cAAQE,QAAQO;AAChB,UAAId,cAAc,QAAQ;AACxBK,gBAAQE,QAAQW;AAChBZ,sBAAcC,QAAQY;AAAAA,MACvB;AAAA,IAAA,WACQnB,cAAc,OAAO;AAC9BK,eAAQH,aAAQkB,eAARlB,mBAAoBc;AAAAA,IAAAA,OACvB;AACLX,eAAQH,aAAQkB,eAARlB,mBAAoBe;AAAAA,IAC7B;AAAA,EACF;AAED,MAAI,CAACZ,OAAO;AACH,WAAA;AAAA,EACR;AAED,MAAIC,aAAa;AACf,+BACG,OAAD;AAAA,MAAA,GAAWH;AAAAA,MAAkB,MAAME;AAAAA,MAAO;AAAA,IAAA,CAD5C;AAAA,EAGD;AAED,6BAAQ,OAAD;AAAA,IAAA,GAAWF;AAAAA,IAAkB,MAAME;AAAAA,EAAAA,CAA1C;AACD;"}
+{"version":3,"file":"ProductPrice.js","sources":["../../src/ProductPrice.tsx"],"sourcesContent":["import type {\n  MoneyV2,\n  UnitPriceMeasurement,\n  Product,\n} from './storefront-api-types.js';\nimport {Money, type MoneyProps} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\ninterface ProductPriceProps {\n  /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** The type of price. Valid values: `regular` (default) or `compareAt`. */\n  priceType?: 'regular' | 'compareAt';\n  /** The type of value. Valid values: `min` (default), `max` or `unit`. */\n  valueType?: 'max' | 'min' | 'unit';\n  /** The ID of the variant. */\n  variantId?: string;\n}\n\n/**\n * The `ProductPrice` component renders a `Money` component with the product\n * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.\n */\nexport function ProductPrice<ComponentGeneric extends React.ElementType>(\n  props: ProductPriceProps &\n    Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>\n) {\n  const {\n    priceType = 'regular',\n    variantId,\n    valueType = 'min',\n    data: product,\n    ...passthroughProps\n  } = props;\n\n  if (product == null) {\n    throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);\n  }\n\n  let price: Partial<MoneyV2> | undefined | null;\n  let measurement: Partial<UnitPriceMeasurement> | undefined | null;\n\n  const variant = variantId\n    ? flattenConnection(product?.variants ?? {}).find(\n        (variant) => variant?.id === variantId\n      ) ?? null\n    : null;\n\n  if (priceType === 'compareAt') {\n    if (variantId && variant) {\n      if (variant.compareAtPriceV2?.amount === variant.priceV2?.amount) {\n        return null;\n      }\n      price = variant.compareAtPriceV2;\n    } else if (valueType === 'max') {\n      price = product?.compareAtPriceRange?.maxVariantPrice;\n    } else {\n      price = product?.compareAtPriceRange?.minVariantPrice;\n    }\n  } else {\n    if (variantId && variant) {\n      price = variant.priceV2;\n      if (valueType === 'unit') {\n        price = variant.unitPrice;\n        measurement = variant.unitPriceMeasurement;\n      }\n    } else if (valueType === 'max') {\n      price = product.priceRange?.maxVariantPrice;\n    } else {\n      price = product.priceRange?.minVariantPrice;\n    }\n  }\n\n  if (!price) {\n    return null;\n  }\n\n  if (measurement) {\n    return (\n      <Money {...passthroughProps} data={price} measurement={measurement} />\n    );\n  }\n\n  return <Money {...passthroughProps} data={price} />;\n}\n"],"names":["ProductPrice","props","priceType","variantId","valueType","data","product","passthroughProps","Error","price","measurement","variant","flattenConnection","variants","find","id","compareAtPriceV2","amount","priceV2","compareAtPriceRange","maxVariantPrice","minVariantPrice","unitPrice","unitPriceMeasurement","priceRange"],"mappings":";;;AAwBO,SAASA,aACdC,OAEA;;AACM,QAAA;AAAA,IACJC,YAAY;AAAA,IACZC;AAAAA,IACAC,YAAY;AAAA,IACZC,MAAMC;AAAAA,OACHC;AAAAA,EACDN,IAAAA;AAEJ,MAAIK,WAAW,MAAM;AACb,UAAA,IAAIE,MAAO,uDAAX;AAAA,EACP;AAEGC,MAAAA;AACAC,MAAAA;AAEJ,QAAMC,UAAUR,aACZS,wBAAkBN,wCAASO,aAATP,YAAqB,CAAA,CAAtB,EAA0BQ,KACxCH,CAAAA,cAAYA,qCAASI,QAAOZ,SAD/B,MAAAS,YAEK,OACL;AAEJ,MAAIV,cAAc,aAAa;AAC7B,QAAIC,aAAaQ,SAAS;AACxB,YAAIA,aAAQK,qBAARL,mBAA0BM,cAAWN,aAAQO,YAARP,mBAAiBM,SAAQ;AACzD,eAAA;AAAA,MACR;AACDR,cAAQE,QAAQK;AAAAA,IAAAA,WACPZ,cAAc,OAAO;AAC9BK,eAAQH,wCAASa,wBAATb,mBAA8Bc;AAAAA,IAAAA,OACjC;AACLX,eAAQH,wCAASa,wBAATb,mBAA8Be;AAAAA,IACvC;AAAA,EAAA,OACI;AACL,QAAIlB,aAAaQ,SAAS;AACxBF,cAAQE,QAAQO;AAChB,UAAId,cAAc,QAAQ;AACxBK,gBAAQE,QAAQW;AAChBZ,sBAAcC,QAAQY;AAAAA,MACvB;AAAA,IAAA,WACQnB,cAAc,OAAO;AAC9BK,eAAQH,aAAQkB,eAARlB,mBAAoBc;AAAAA,IAAAA,OACvB;AACLX,eAAQH,aAAQkB,eAARlB,mBAAoBe;AAAAA,IAC7B;AAAA,EACF;AAED,MAAI,CAACZ,OAAO;AACH,WAAA;AAAA,EACR;AAED,MAAIC,aAAa;AACf,+BACG,OAAD;AAAA,MAAA,GAAWH;AAAAA,MAAkB,MAAME;AAAAA,MAAO;AAAA,IAAA,CAD5C;AAAA,EAGD;AAED,6BAAQ,OAAD;AAAA,IAAA,GAAWF;AAAAA,IAAkB,MAAME;AAAAA,EAAAA,CAA1C;AACD;"}

package/dist/prod/ProductProvider.cjs

@@ -1,30 +1,30 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const react = require("react");
+const require$$0 = require("react");
 const flattenConnection = require("./flatten-connection.cjs");
 const jsxRuntime = require("react/jsx-runtime");
-const ProductOptionsContext = react.createContext(null);
+const ProductOptionsContext = require$$0.createContext(null);
 function ProductProvider({
   children,
   data: product,
   initialVariantId: explicitVariantId
 }) {
-  const variants = react.useMemo(() => {
+  const variants = require$$0.useMemo(() => {
     var _a;
     return flattenConnection.flattenConnection((_a = product.variants) != null ? _a : {});
   }, [product.variants]);
   if (!isProductVariantArray(variants)) {
     throw new Error(`<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`);
   }
-  const options = react.useMemo(() => getOptions(variants), [variants]);
-  const [selectedVariant, setSelectedVariant] = react.useState(() => getVariantBasedOnIdProp(explicitVariantId, variants));
-  const [selectedOptions, setSelectedOptions] = react.useState(() => getSelectedOptions(selectedVariant));
-  react.useEffect(() => {
+  const options = require$$0.useMemo(() => getOptions(variants), [variants]);
+  const [selectedVariant, setSelectedVariant] = require$$0.useState(() => getVariantBasedOnIdProp(explicitVariantId, variants));
+  const [selectedOptions, setSelectedOptions] = require$$0.useState(() => getSelectedOptions(selectedVariant));
+  require$$0.useEffect(() => {
     const newSelectedVariant = getVariantBasedOnIdProp(explicitVariantId, variants);
     setSelectedVariant(newSelectedVariant);
     setSelectedOptions(getSelectedOptions(newSelectedVariant));
   }, [explicitVariantId, variants]);
-  const setSelectedOption = react.useCallback((name, value2) => {
+  const setSelectedOption = require$$0.useCallback((name, value2) => {
     setSelectedOptions((selectedOptions2) => {
       const opts = {
         ...selectedOptions2,
@@ -34,7 +34,7 @@ function ProductProvider({
       return opts;
     });
   }, [setSelectedOptions, variants]);
-  const isOptionInStock = react.useCallback((option, value2) => {
+  const isOptionInStock = require$$0.useCallback((option, value2) => {
     var _a;
     const proposedVariant = getSelectedVariant(variants, {
       ...selectedOptions,
@@ -44,7 +44,7 @@ function ProductProvider({
     });
     return (_a = proposedVariant == null ? void 0 : proposedVariant.availableForSale) != null ? _a : true;
   }, [selectedOptions, variants]);
-  const sellingPlanGroups = react.useMemo(() => {
+  const sellingPlanGroups = require$$0.useMemo(() => {
     var _a;
     return flattenConnection.flattenConnection((_a = product.sellingPlanGroups) != null ? _a : {}).map((sellingPlanGroup) => {
       var _a2;
@@ -54,8 +54,8 @@ function ProductProvider({
       };
     });
   }, [product.sellingPlanGroups]);
-  const [selectedSellingPlan, setSelectedSellingPlan] = react.useState(void 0);
-  const selectedSellingPlanAllocation = react.useMemo(() => {
+  const [selectedSellingPlan, setSelectedSellingPlan] = require$$0.useState(void 0);
+  const selectedSellingPlanAllocation = require$$0.useMemo(() => {
     var _a, _b;
     if (!selectedVariant || !selectedSellingPlan) {
       return;
@@ -68,7 +68,7 @@ function ProductProvider({
       return ((_a2 = allocation == null ? void 0 : allocation.sellingPlan) == null ? void 0 : _a2.id) === selectedSellingPlan.id;
     });
   }, [selectedVariant, selectedSellingPlan]);
-  const value = react.useMemo(() => ({
+  const value = require$$0.useMemo(() => ({
     variants,
     variantsConnection: product.variants,
     options,
@@ -90,7 +90,7 @@ function ProductProvider({
   });
 }
 function useProduct() {
-  const context = react.useContext(ProductOptionsContext);
+  const context = require$$0.useContext(ProductOptionsContext);
   if (!context) {
     throw new Error(`'useProduct' must be a child of <ProductProvider />`);
   }