@shopify/hydrogen-react 2026.4.0 → 2026.4.2

package/dist/node-dev/ModelViewer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModelViewer.mjs","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'model-viewer': PartialDeep<\n        ModelViewerElement,\n        {recurseIntoArrays: true}\n      >;\n    }\n  }\n}\n\ntype ModelViewerProps = Omit<\n  PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n  'src'\n> &\n  ModelViewerBaseProps;\n\ntype ModelViewerBaseProps = {\n  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2026-04/objects/model3d). */\n  data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n  /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */\n  onError?: (event: Event) => void;\n  /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */\n  onLoad?: (event: Event) => void;\n  /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */\n  onPreload?: (event: Event) => void;\n  /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */\n  onModelVisibility?: (event: Event) => void;\n  /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */\n  onProgress?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */\n  onArStatus?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */\n  onArTracking?: (event: Event) => void;\n  /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */\n  onQuickLookButtonTapped?: (event: Event) => void;\n  /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */\n  onCameraChange?: (event: Event) => void;\n  /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange).  */\n  onEnvironmentChange?: (event: Event) => void;\n  /**  The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */\n  onPlay?: (event: Event) => void;\n  /**  The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */\n  onPause?: (event: Event) => void;\n  /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */\n  onSceneGraphReady?: (event: Event) => void;\n};\n\n/**\n * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n *\n * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n *\n * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps): JSX.Element | null {\n  const [modelViewer, setModelViewer] = useState<undefined | HTMLElement>(\n    undefined,\n  );\n  const callbackRef = useCallback((node: HTMLElement) => {\n    setModelViewer(node);\n  }, []);\n  const {data, children, className, ...passthroughProps} = props;\n\n  const modelViewerLoadedStatus = useLoadScript(\n    'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n    {\n      module: true,\n    },\n  );\n\n  useEffect(() => {\n    const hydrogenEventListener = {\n      error: passthroughProps.onError,\n      load: passthroughProps.onLoad,\n      preload: passthroughProps.onPreload,\n      'model-visibility': passthroughProps.onModelVisibility,\n      progress: passthroughProps.onProgress,\n      'ar-status': passthroughProps.onArStatus,\n      'ar-tracking': passthroughProps.onArTracking,\n      'quick-look-button-tapped': passthroughProps.onQuickLookButtonTapped,\n      'camera-change': passthroughProps.onCameraChange,\n      'environment-change': passthroughProps.onEnvironmentChange,\n      play: passthroughProps.onPlay,\n      pause: passthroughProps.onPause,\n      'scene-graph-ready': passthroughProps.onSceneGraphReady,\n    };\n\n    if (!modelViewer) {\n      return;\n    }\n    Object.entries(hydrogenEventListener).forEach(\n      ([eventName, callbackFunc]) => {\n        if (callbackFunc) {\n          modelViewer.addEventListener(eventName, callbackFunc);\n        }\n      },\n    );\n\n    return (): void => {\n      if (modelViewer == null) {\n        return;\n      }\n      Object.entries(hydrogenEventListener).forEach(\n        ([eventName, callbackFunc]) => {\n          if (callbackFunc) {\n            modelViewer.removeEventListener(eventName, callbackFunc);\n          }\n        },\n      );\n    };\n  }, [\n    modelViewer,\n    passthroughProps.onArStatus,\n    passthroughProps.onArTracking,\n    passthroughProps.onCameraChange,\n    passthroughProps.onEnvironmentChange,\n    passthroughProps.onError,\n    passthroughProps.onLoad,\n    passthroughProps.onModelVisibility,\n    passthroughProps.onPause,\n    passthroughProps.onPlay,\n    passthroughProps.onPreload,\n    passthroughProps.onProgress,\n    passthroughProps.onQuickLookButtonTapped,\n    passthroughProps.onSceneGraphReady,\n  ]);\n\n  if (modelViewerLoadedStatus !== 'done') {\n    // TODO: What do we want to display while the model-viewer library loads?\n    return null;\n  }\n\n  if (!data.sources?.[0]?.url) {\n    const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(sourcesUrlError);\n    } else {\n      console.error(sourcesUrlError);\n      return null;\n    }\n  }\n\n  if (__HYDROGEN_DEV__ && !data.alt) {\n    console.warn(\n      `<ModelViewer/> requires the 'data.alt' prop for accessibility`,\n    );\n  }\n\n  return (\n    <model-viewer\n      ref={callbackRef}\n      {...passthroughProps}\n      // @ts-expect-error src should exist\n      // @eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      class={className}\n      id={passthroughProps.id ?? data.id}\n      src={data.sources[0].url}\n      alt={data.alt ?? null}\n      camera-controls={passthroughProps.cameraControls ?? true}\n      poster={(passthroughProps.poster || data.previewImage?.url) ?? null}\n      autoplay={passthroughProps.autoplay ?? true}\n      loading={passthroughProps.loading}\n      reveal={passthroughProps.reveal}\n      ar={passthroughProps.ar}\n      ar-modes={passthroughProps.arModes}\n      ar-scale={passthroughProps.arScale}\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      ar-placement={passthroughProps.arPlacement}\n      ios-src={passthroughProps.iosSrc}\n      touch-action={passthroughProps.touchAction}\n      disable-zoom={passthroughProps.disableZoom}\n      orbit-sensitivity={passthroughProps.orbitSensitivity}\n      auto-rotate={passthroughProps.autoRotate}\n      auto-rotate-delay={passthroughProps.autoRotateDelay}\n      // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      rotation-per-second={passthroughProps.rotationPerSecond}\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      interaction-policy={(passthroughProps as any).interactionPolicy}\n      interaction-prompt={passthroughProps.interactionPrompt}\n      interaction-prompt-style={passthroughProps.interactionPromptStyle}\n      interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n      camera-orbit={passthroughProps.cameraOrbit}\n      camera-target={passthroughProps.cameraTarget}\n      field-of-view={passthroughProps.fieldOfView}\n      max-camera-orbit={passthroughProps.maxCameraOrbit}\n      min-camera-orbit={passthroughProps.minCameraOrbit}\n      max-field-of-view={passthroughProps.maxFieldOfView}\n      min-field-of-view={passthroughProps.minFieldOfView}\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      bounds={(passthroughProps as any).bounds}\n      interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n      skybox-image={passthroughProps.skyboxImage}\n      environment-image={passthroughProps.environmentImage}\n      exposure={passthroughProps.exposure}\n      shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n      shadow-softness={passthroughProps.shadowSoftness ?? 0}\n      animation-name={passthroughProps.animationName}\n      animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n      variant-name={passthroughProps.variantName}\n      orientation={passthroughProps.orientation}\n      scale={passthroughProps.scale}\n    >\n      {children}\n    </model-viewer>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ModelViewer.mjs","names":[],"sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'model-viewer': PartialDeep<\n        ModelViewerElement,\n        {recurseIntoArrays: true}\n      >;\n    }\n  }\n}\n\ntype ModelViewerProps = Omit<\n  PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n  'src'\n> &\n  ModelViewerBaseProps;\n\ntype ModelViewerBaseProps = {\n  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2026-04/objects/model3d). */\n  data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n  /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */\n  onError?: (event: Event) => void;\n  /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */\n  onLoad?: (event: Event) => void;\n  /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */\n  onPreload?: (event: Event) => void;\n  /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */\n  onModelVisibility?: (event: Event) => void;\n  /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */\n  onProgress?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */\n  onArStatus?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */\n  onArTracking?: (event: Event) => void;\n  /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */\n  onQuickLookButtonTapped?: (event: Event) => void;\n  /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */\n  onCameraChange?: (event: Event) => void;\n  /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange).  */\n  onEnvironmentChange?: (event: Event) => void;\n  /**  The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */\n  onPlay?: (event: Event) => void;\n  /**  The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */\n  onPause?: (event: Event) => void;\n  /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */\n  onSceneGraphReady?: (event: Event) => void;\n};\n\n/**\n * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n *\n * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n *\n * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n * @publicDocs\n */\nexport function ModelViewer(props: ModelViewerProps): JSX.Element | null {\n  const [modelViewer, setModelViewer] = useState<undefined | HTMLElement>(\n    undefined,\n  );\n  const callbackRef = useCallback((node: HTMLElement) => {\n    setModelViewer(node);\n  }, []);\n  const {data, children, className, ...passthroughProps} = props;\n\n  const modelViewerLoadedStatus = useLoadScript(\n    'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n    {\n      module: true,\n    },\n  );\n\n  useEffect(() => {\n    const hydrogenEventListener = {\n      error: passthroughProps.onError,\n      load: passthroughProps.onLoad,\n      preload: passthroughProps.onPreload,\n      'model-visibility': passthroughProps.onModelVisibility,\n      progress: passthroughProps.onProgress,\n      'ar-status': passthroughProps.onArStatus,\n      'ar-tracking': passthroughProps.onArTracking,\n      'quick-look-button-tapped': passthroughProps.onQuickLookButtonTapped,\n      'camera-change': passthroughProps.onCameraChange,\n      'environment-change': passthroughProps.onEnvironmentChange,\n      play: passthroughProps.onPlay,\n      pause: passthroughProps.onPause,\n      'scene-graph-ready': passthroughProps.onSceneGraphReady,\n    };\n\n    if (!modelViewer) {\n      return;\n    }\n    Object.entries(hydrogenEventListener).forEach(\n      ([eventName, callbackFunc]) => {\n        if (callbackFunc) {\n          modelViewer.addEventListener(eventName, callbackFunc);\n        }\n      },\n    );\n\n    return (): void => {\n      if (modelViewer == null) {\n        return;\n      }\n      Object.entries(hydrogenEventListener).forEach(\n        ([eventName, callbackFunc]) => {\n          if (callbackFunc) {\n            modelViewer.removeEventListener(eventName, callbackFunc);\n          }\n        },\n      );\n    };\n  }, [\n    modelViewer,\n    passthroughProps.onArStatus,\n    passthroughProps.onArTracking,\n    passthroughProps.onCameraChange,\n    passthroughProps.onEnvironmentChange,\n    passthroughProps.onError,\n    passthroughProps.onLoad,\n    passthroughProps.onModelVisibility,\n    passthroughProps.onPause,\n    passthroughProps.onPlay,\n    passthroughProps.onPreload,\n    passthroughProps.onProgress,\n    passthroughProps.onQuickLookButtonTapped,\n    passthroughProps.onSceneGraphReady,\n  ]);\n\n  if (modelViewerLoadedStatus !== 'done') {\n    // TODO: What do we want to display while the model-viewer library loads?\n    return null;\n  }\n\n  if (!data.sources?.[0]?.url) {\n    const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(sourcesUrlError);\n    } else {\n      console.error(sourcesUrlError);\n      return null;\n    }\n  }\n\n  if (__HYDROGEN_DEV__ && !data.alt) {\n    console.warn(\n      `<ModelViewer/> requires the 'data.alt' prop for accessibility`,\n    );\n  }\n\n  return (\n    <model-viewer\n      ref={callbackRef}\n      {...passthroughProps}\n      // @ts-expect-error src should exist\n      // @eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      class={className}\n      id={passthroughProps.id ?? data.id}\n      src={data.sources[0].url}\n      alt={data.alt ?? null}\n      camera-controls={passthroughProps.cameraControls ?? true}\n      poster={(passthroughProps.poster || data.previewImage?.url) ?? null}\n      autoplay={passthroughProps.autoplay ?? true}\n      loading={passthroughProps.loading}\n      reveal={passthroughProps.reveal}\n      ar={passthroughProps.ar}\n      ar-modes={passthroughProps.arModes}\n      ar-scale={passthroughProps.arScale}\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      ar-placement={passthroughProps.arPlacement}\n      ios-src={passthroughProps.iosSrc}\n      touch-action={passthroughProps.touchAction}\n      disable-zoom={passthroughProps.disableZoom}\n      orbit-sensitivity={passthroughProps.orbitSensitivity}\n      auto-rotate={passthroughProps.autoRotate}\n      auto-rotate-delay={passthroughProps.autoRotateDelay}\n      // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      rotation-per-second={passthroughProps.rotationPerSecond}\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      interaction-policy={(passthroughProps as any).interactionPolicy}\n      interaction-prompt={passthroughProps.interactionPrompt}\n      interaction-prompt-style={passthroughProps.interactionPromptStyle}\n      interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n      camera-orbit={passthroughProps.cameraOrbit}\n      camera-target={passthroughProps.cameraTarget}\n      field-of-view={passthroughProps.fieldOfView}\n      max-camera-orbit={passthroughProps.maxCameraOrbit}\n      min-camera-orbit={passthroughProps.minCameraOrbit}\n      max-field-of-view={passthroughProps.maxFieldOfView}\n      min-field-of-view={passthroughProps.minFieldOfView}\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      bounds={(passthroughProps as any).bounds}\n      interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n      skybox-image={passthroughProps.skyboxImage}\n      environment-image={passthroughProps.environmentImage}\n      exposure={passthroughProps.exposure}\n      shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n      shadow-softness={passthroughProps.shadowSoftness ?? 0}\n      animation-name={passthroughProps.animationName}\n      animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n      variant-name={passthroughProps.variantName}\n      orientation={passthroughProps.orientation}\n      scale={passthroughProps.scale}\n    >\n      {children}\n    </model-viewer>\n  );\n}\n"],"mappings":"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"}

package/dist/node-dev/Money.js

@@ -1,43 +1,58 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const useMoney = require("./useMoney.js");
-function Money({
-  data,
-  as,
-  withoutCurrency,
-  withoutTrailingZeros,
-  measurement,
-  measurementSeparator = "/",
-  ...passthroughProps
-}) {
-  if (!isMoney(data)) {
-    throw new Error(
-      `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`
-    );
-  }
-  const moneyObject = useMoney.useMoney(data);
-  const Wrapper = as ?? "div";
-  let output = moneyObject.localizedString;
-  if (withoutCurrency || withoutTrailingZeros) {
-    if (withoutCurrency && !withoutTrailingZeros) {
-      output = moneyObject.amount;
-    } else if (!withoutCurrency && withoutTrailingZeros) {
-      output = moneyObject.withoutTrailingZeros;
-    } else {
-      output = moneyObject.withoutTrailingZerosAndCurrency;
-    }
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { ...passthroughProps, children: [
-    output,
-    measurement && measurement.referenceUnit && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      measurementSeparator,
-      measurement.referenceUnit
-    ] })
-  ] });
+require("./_virtual/_rolldown/runtime.js");
+const require_useMoney = require("./useMoney.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Money.tsx
+/**
+* The `Money` component renders a string of the [Storefront API's MoneyV2 object](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2)
+* or the [Customer Account API's MoneyV2 object](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2)
+* according to the `locale` in the `ShopifyProvider` component.
+* &nbsp;
+* @see {@link https://shopify.dev/api/hydrogen/components/money}
+* @example basic usage, outputs: $100.00
+* ```ts
+* <Money data={{amount: '100.00', currencyCode: 'USD'}} />
+* ```
+* &nbsp;
+*
+* @example without currency, outputs: 100.00
+* ```ts
+* <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutCurrency />
+* ```
+* &nbsp;
+*
+* @example without trailing zeros, outputs: $100
+* ```ts
+* <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutTrailingZeros />
+* ```
+* &nbsp;
+*
+* @example with per-unit measurement, outputs: $100.00 per G
+* ```ts
+* <Money
+*   data={{amount: '100.00', currencyCode: 'USD'}}
+*   measurement={{referenceUnit: 'G'}}
+*   measurementSeparator=" per "
+* />
+* ```
+* @publicDocs
+*/
+function Money({ data, as, withoutCurrency, withoutTrailingZeros, measurement, measurementSeparator = "/", ...passthroughProps }) {
+	if (!isMoney(data)) throw new Error(`<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`);
+	const moneyObject = require_useMoney.useMoney(data);
+	const Wrapper = as ?? "div";
+	let output = moneyObject.localizedString;
+	if (withoutCurrency || withoutTrailingZeros) if (withoutCurrency && !withoutTrailingZeros) output = moneyObject.amount;
+	else if (!withoutCurrency && withoutTrailingZeros) output = moneyObject.withoutTrailingZeros;
+	else output = moneyObject.withoutTrailingZerosAndCurrency;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, {
+		...passthroughProps,
+		children: [output, measurement && measurement.referenceUnit && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [measurementSeparator, measurement.referenceUnit] })]
+	});
 }
 function isMoney(maybeMoney) {
-  return typeof maybeMoney.amount === "string" && !!maybeMoney.amount && typeof maybeMoney.currencyCode === "string" && !!maybeMoney.currencyCode;
+	return typeof maybeMoney.amount === "string" && !!maybeMoney.amount && typeof maybeMoney.currencyCode === "string" && !!maybeMoney.currencyCode;
 }
+//#endregion
 exports.Money = Money;
-//# sourceMappingURL=Money.js.map
+
+//# sourceMappingURL=Money.js.map

package/dist/node-dev/Money.js.map

@@ -1 +1 @@
-{"version":3,"file":"Money.js","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {\n  MoneyV2 as StorefrontApiMoneyV2,\n  UnitPriceMeasurement,\n} from './storefront-api-types.js';\nimport type {MoneyV2 as CustomerAccountApiMoneyV2} from './customer-account-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\n/**\n * Supports MoneyV2 from both Storefront API and Customer Account API.\n * The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures Money component works with data from either API.\n */\ntype MoneyV2 = StorefrontApiMoneyV2 | CustomerAccountApiMoneyV2;\n\nexport interface MoneyPropsBase<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/docs/api/storefront/2026-04/objects/MoneyV2) or [Customer Account API's MoneyV2 object](https://shopify.dev/docs/api/customer/2026-04/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/2026-04/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  MoneyPropsBase<ComponentGeneric> &\n    (ComponentGeneric extends keyof React.JSX.IntrinsicElements\n      ? Omit<\n          React.ComponentPropsWithoutRef<ComponentGeneric>,\n          keyof MoneyPropsBase<ComponentGeneric>\n        >\n      : React.ComponentPropsWithoutRef<ComponentGeneric>);\n\n/**\n * The `Money` component renders a string of the [Storefront API's MoneyV2 object](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2)\n * or the [Customer Account API's MoneyV2 object](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2)\n * according to the `locale` in the `ShopifyProvider` component.\n * &nbsp;\n * @see {@link https://shopify.dev/api/hydrogen/components/money}\n * @example basic usage, outputs: $100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} />\n * ```\n * &nbsp;\n *\n * @example without currency, outputs: 100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutCurrency />\n * ```\n * &nbsp;\n *\n * @example without trailing zeros, outputs: $100\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutTrailingZeros />\n * ```\n * &nbsp;\n *\n * @example with per-unit measurement, outputs: $100.00 per G\n * ```ts\n * <Money\n *   data={{amount: '100.00', currencyCode: 'USD'}}\n *   measurement={{referenceUnit: 'G'}}\n *   measurementSeparator=\" per \"\n * />\n * ```\n */\nexport function Money<ComponentGeneric extends React.ElementType = 'div'>({\n  data,\n  as,\n  withoutCurrency,\n  withoutTrailingZeros,\n  measurement,\n  measurementSeparator = '/',\n  ...passthroughProps\n}: MoneyProps<ComponentGeneric>): JSX.Element {\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":["useMoney","jsxs","Fragment"],"mappings":";;;;AA0EO,SAAS,MAA0D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA8C;AAC5C,MAAI,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,QAAM,cAAcA,SAAAA,SAAS,IAAI;AACjC,QAAM,UAAU,MAAM;AAEtB,MAAI,SAAS,YAAY;AAEzB,MAAI,mBAAmB,sBAAsB;AAC3C,QAAI,mBAAmB,CAAC,sBAAsB;AAC5C,eAAS,YAAY;AAAA,IACvB,WAAW,CAAC,mBAAmB,sBAAsB;AACnD,eAAS,YAAY;AAAA,IACvB,OAAO;AAEL,eAAS,YAAY;AAAA,IACvB;AAAA,EACF;AAEA,SACEC,2BAAAA,KAAC,SAAA,EAAS,GAAG,kBACV,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,iBAC1BA,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACA,YAAY;AAAA,IAAA,EAAA,CACf;AAAA,EAAA,GAEJ;AAEJ;AAGA,SAAS,QACP,YACuB;AACvB,SACE,OAAO,WAAW,WAAW,YAC7B,CAAC,CAAC,WAAW,UACb,OAAO,WAAW,iBAAiB,YACnC,CAAC,CAAC,WAAW;AAEjB;;"}
+{"version":3,"file":"Money.js","names":[],"sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {\n  MoneyV2 as StorefrontApiMoneyV2,\n  UnitPriceMeasurement,\n} from './storefront-api-types.js';\nimport type {MoneyV2 as CustomerAccountApiMoneyV2} from './customer-account-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\n/**\n * Supports MoneyV2 from both Storefront API and Customer Account API.\n * The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures Money component works with data from either API.\n */\ntype MoneyV2 = StorefrontApiMoneyV2 | CustomerAccountApiMoneyV2;\n\nexport interface MoneyPropsBase<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/docs/api/storefront/2026-04/objects/MoneyV2) or [Customer Account API's MoneyV2 object](https://shopify.dev/docs/api/customer/2026-04/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/2026-04/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  MoneyPropsBase<ComponentGeneric> &\n    (ComponentGeneric extends keyof React.JSX.IntrinsicElements\n      ? Omit<\n          React.ComponentPropsWithoutRef<ComponentGeneric>,\n          keyof MoneyPropsBase<ComponentGeneric>\n        >\n      : React.ComponentPropsWithoutRef<ComponentGeneric>);\n\n/**\n * The `Money` component renders a string of the [Storefront API's MoneyV2 object](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2)\n * or the [Customer Account API's MoneyV2 object](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2)\n * according to the `locale` in the `ShopifyProvider` component.\n * &nbsp;\n * @see {@link https://shopify.dev/api/hydrogen/components/money}\n * @example basic usage, outputs: $100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} />\n * ```\n * &nbsp;\n *\n * @example without currency, outputs: 100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutCurrency />\n * ```\n * &nbsp;\n *\n * @example without trailing zeros, outputs: $100\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutTrailingZeros />\n * ```\n * &nbsp;\n *\n * @example with per-unit measurement, outputs: $100.00 per G\n * ```ts\n * <Money\n *   data={{amount: '100.00', currencyCode: 'USD'}}\n *   measurement={{referenceUnit: 'G'}}\n *   measurementSeparator=\" per \"\n * />\n * ```\n * @publicDocs\n */\nexport function Money<ComponentGeneric extends React.ElementType = 'div'>({\n  data,\n  as,\n  withoutCurrency,\n  withoutTrailingZeros,\n  measurement,\n  measurementSeparator = '/',\n  ...passthroughProps\n}: MoneyProps<ComponentGeneric>): JSX.Element {\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,SAAgB,MAA0D,EACxE,MACA,IACA,iBACA,sBACA,aACA,uBAAuB,KACvB,GAAG,oBACyC;AAC5C,KAAI,CAAC,QAAQ,KAAK,CAChB,OAAM,IAAI,MACR,0EACD;CAEH,MAAM,cAAc,iBAAA,SAAS,KAAK;CAClC,MAAM,UAAU,MAAM;CAEtB,IAAI,SAAS,YAAY;AAEzB,KAAI,mBAAmB,qBACrB,KAAI,mBAAmB,CAAC,qBACtB,UAAS,YAAY;UACZ,CAAC,mBAAmB,qBAC7B,UAAS,YAAY;KAGrB,UAAS,YAAY;AAIzB,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;EAAS,GAAI;YAAb,CACG,QACA,eAAe,YAAY,iBAC1B,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,sBACA,YAAY,cACZ,EAAA,CAAA,CAEG;;;AAKd,SAAS,QACP,YACuB;AACvB,QACE,OAAO,WAAW,WAAW,YAC7B,CAAC,CAAC,WAAW,UACb,OAAO,WAAW,iBAAiB,YACnC,CAAC,CAAC,WAAW"}

package/dist/node-dev/Money.mjs

@@ -1,43 +1,57 @@
-import { jsxs, Fragment } from "react/jsx-runtime";
 import { useMoney } from "./useMoney.mjs";
-function Money({
-  data,
-  as,
-  withoutCurrency,
-  withoutTrailingZeros,
-  measurement,
-  measurementSeparator = "/",
-  ...passthroughProps
-}) {
-  if (!isMoney(data)) {
-    throw new Error(
-      `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`
-    );
-  }
-  const moneyObject = useMoney(data);
-  const Wrapper = as ?? "div";
-  let output = moneyObject.localizedString;
-  if (withoutCurrency || withoutTrailingZeros) {
-    if (withoutCurrency && !withoutTrailingZeros) {
-      output = moneyObject.amount;
-    } else if (!withoutCurrency && withoutTrailingZeros) {
-      output = moneyObject.withoutTrailingZeros;
-    } else {
-      output = moneyObject.withoutTrailingZerosAndCurrency;
-    }
-  }
-  return /* @__PURE__ */ jsxs(Wrapper, { ...passthroughProps, children: [
-    output,
-    measurement && measurement.referenceUnit && /* @__PURE__ */ jsxs(Fragment, { children: [
-      measurementSeparator,
-      measurement.referenceUnit
-    ] })
-  ] });
+import { Fragment, jsxs } from "react/jsx-runtime";
+//#region src/Money.tsx
+/**
+* The `Money` component renders a string of the [Storefront API's MoneyV2 object](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2)
+* or the [Customer Account API's MoneyV2 object](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2)
+* according to the `locale` in the `ShopifyProvider` component.
+* &nbsp;
+* @see {@link https://shopify.dev/api/hydrogen/components/money}
+* @example basic usage, outputs: $100.00
+* ```ts
+* <Money data={{amount: '100.00', currencyCode: 'USD'}} />
+* ```
+* &nbsp;
+*
+* @example without currency, outputs: 100.00
+* ```ts
+* <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutCurrency />
+* ```
+* &nbsp;
+*
+* @example without trailing zeros, outputs: $100
+* ```ts
+* <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutTrailingZeros />
+* ```
+* &nbsp;
+*
+* @example with per-unit measurement, outputs: $100.00 per G
+* ```ts
+* <Money
+*   data={{amount: '100.00', currencyCode: 'USD'}}
+*   measurement={{referenceUnit: 'G'}}
+*   measurementSeparator=" per "
+* />
+* ```
+* @publicDocs
+*/
+function Money({ data, as, withoutCurrency, withoutTrailingZeros, measurement, measurementSeparator = "/", ...passthroughProps }) {
+	if (!isMoney(data)) throw new Error(`<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`);
+	const moneyObject = useMoney(data);
+	const Wrapper = as ?? "div";
+	let output = moneyObject.localizedString;
+	if (withoutCurrency || withoutTrailingZeros) if (withoutCurrency && !withoutTrailingZeros) output = moneyObject.amount;
+	else if (!withoutCurrency && withoutTrailingZeros) output = moneyObject.withoutTrailingZeros;
+	else output = moneyObject.withoutTrailingZerosAndCurrency;
+	return /* @__PURE__ */ jsxs(Wrapper, {
+		...passthroughProps,
+		children: [output, measurement && measurement.referenceUnit && /* @__PURE__ */ jsxs(Fragment, { children: [measurementSeparator, measurement.referenceUnit] })]
+	});
 }
 function isMoney(maybeMoney) {
-  return typeof maybeMoney.amount === "string" && !!maybeMoney.amount && typeof maybeMoney.currencyCode === "string" && !!maybeMoney.currencyCode;
+	return typeof maybeMoney.amount === "string" && !!maybeMoney.amount && typeof maybeMoney.currencyCode === "string" && !!maybeMoney.currencyCode;
 }
-export {
-  Money
-};
-//# sourceMappingURL=Money.mjs.map
+//#endregion
+export { Money };
+
+//# sourceMappingURL=Money.mjs.map

package/dist/node-dev/Money.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Money.mjs","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {\n  MoneyV2 as StorefrontApiMoneyV2,\n  UnitPriceMeasurement,\n} from './storefront-api-types.js';\nimport type {MoneyV2 as CustomerAccountApiMoneyV2} from './customer-account-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\n/**\n * Supports MoneyV2 from both Storefront API and Customer Account API.\n * The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures Money component works with data from either API.\n */\ntype MoneyV2 = StorefrontApiMoneyV2 | CustomerAccountApiMoneyV2;\n\nexport interface MoneyPropsBase<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/docs/api/storefront/2026-04/objects/MoneyV2) or [Customer Account API's MoneyV2 object](https://shopify.dev/docs/api/customer/2026-04/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/2026-04/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  MoneyPropsBase<ComponentGeneric> &\n    (ComponentGeneric extends keyof React.JSX.IntrinsicElements\n      ? Omit<\n          React.ComponentPropsWithoutRef<ComponentGeneric>,\n          keyof MoneyPropsBase<ComponentGeneric>\n        >\n      : React.ComponentPropsWithoutRef<ComponentGeneric>);\n\n/**\n * The `Money` component renders a string of the [Storefront API's MoneyV2 object](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2)\n * or the [Customer Account API's MoneyV2 object](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2)\n * according to the `locale` in the `ShopifyProvider` component.\n * &nbsp;\n * @see {@link https://shopify.dev/api/hydrogen/components/money}\n * @example basic usage, outputs: $100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} />\n * ```\n * &nbsp;\n *\n * @example without currency, outputs: 100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutCurrency />\n * ```\n * &nbsp;\n *\n * @example without trailing zeros, outputs: $100\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutTrailingZeros />\n * ```\n * &nbsp;\n *\n * @example with per-unit measurement, outputs: $100.00 per G\n * ```ts\n * <Money\n *   data={{amount: '100.00', currencyCode: 'USD'}}\n *   measurement={{referenceUnit: 'G'}}\n *   measurementSeparator=\" per \"\n * />\n * ```\n */\nexport function Money<ComponentGeneric extends React.ElementType = 'div'>({\n  data,\n  as,\n  withoutCurrency,\n  withoutTrailingZeros,\n  measurement,\n  measurementSeparator = '/',\n  ...passthroughProps\n}: MoneyProps<ComponentGeneric>): JSX.Element {\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":[],"mappings":";;AA0EO,SAAS,MAA0D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA8C;AAC5C,MAAI,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,QAAM,cAAc,SAAS,IAAI;AACjC,QAAM,UAAU,MAAM;AAEtB,MAAI,SAAS,YAAY;AAEzB,MAAI,mBAAmB,sBAAsB;AAC3C,QAAI,mBAAmB,CAAC,sBAAsB;AAC5C,eAAS,YAAY;AAAA,IACvB,WAAW,CAAC,mBAAmB,sBAAsB;AACnD,eAAS,YAAY;AAAA,IACvB,OAAO;AAEL,eAAS,YAAY;AAAA,IACvB;AAAA,EACF;AAEA,SACE,qBAAC,SAAA,EAAS,GAAG,kBACV,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,iBAC1B,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACA,YAAY;AAAA,IAAA,EAAA,CACf;AAAA,EAAA,GAEJ;AAEJ;AAGA,SAAS,QACP,YACuB;AACvB,SACE,OAAO,WAAW,WAAW,YAC7B,CAAC,CAAC,WAAW,UACb,OAAO,WAAW,iBAAiB,YACnC,CAAC,CAAC,WAAW;AAEjB;"}
+{"version":3,"file":"Money.mjs","names":[],"sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {\n  MoneyV2 as StorefrontApiMoneyV2,\n  UnitPriceMeasurement,\n} from './storefront-api-types.js';\nimport type {MoneyV2 as CustomerAccountApiMoneyV2} from './customer-account-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\n/**\n * Supports MoneyV2 from both Storefront API and Customer Account API.\n * The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures Money component works with data from either API.\n */\ntype MoneyV2 = StorefrontApiMoneyV2 | CustomerAccountApiMoneyV2;\n\nexport interface MoneyPropsBase<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/docs/api/storefront/2026-04/objects/MoneyV2) or [Customer Account API's MoneyV2 object](https://shopify.dev/docs/api/customer/2026-04/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/2026-04/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  MoneyPropsBase<ComponentGeneric> &\n    (ComponentGeneric extends keyof React.JSX.IntrinsicElements\n      ? Omit<\n          React.ComponentPropsWithoutRef<ComponentGeneric>,\n          keyof MoneyPropsBase<ComponentGeneric>\n        >\n      : React.ComponentPropsWithoutRef<ComponentGeneric>);\n\n/**\n * The `Money` component renders a string of the [Storefront API's MoneyV2 object](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2)\n * or the [Customer Account API's MoneyV2 object](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2)\n * according to the `locale` in the `ShopifyProvider` component.\n * &nbsp;\n * @see {@link https://shopify.dev/api/hydrogen/components/money}\n * @example basic usage, outputs: $100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} />\n * ```\n * &nbsp;\n *\n * @example without currency, outputs: 100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutCurrency />\n * ```\n * &nbsp;\n *\n * @example without trailing zeros, outputs: $100\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutTrailingZeros />\n * ```\n * &nbsp;\n *\n * @example with per-unit measurement, outputs: $100.00 per G\n * ```ts\n * <Money\n *   data={{amount: '100.00', currencyCode: 'USD'}}\n *   measurement={{referenceUnit: 'G'}}\n *   measurementSeparator=\" per \"\n * />\n * ```\n * @publicDocs\n */\nexport function Money<ComponentGeneric extends React.ElementType = 'div'>({\n  data,\n  as,\n  withoutCurrency,\n  withoutTrailingZeros,\n  measurement,\n  measurementSeparator = '/',\n  ...passthroughProps\n}: MoneyProps<ComponentGeneric>): JSX.Element {\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,SAAgB,MAA0D,EACxE,MACA,IACA,iBACA,sBACA,aACA,uBAAuB,KACvB,GAAG,oBACyC;AAC5C,KAAI,CAAC,QAAQ,KAAK,CAChB,OAAM,IAAI,MACR,0EACD;CAEH,MAAM,cAAc,SAAS,KAAK;CAClC,MAAM,UAAU,MAAM;CAEtB,IAAI,SAAS,YAAY;AAEzB,KAAI,mBAAmB,qBACrB,KAAI,mBAAmB,CAAC,qBACtB,UAAS,YAAY;UACZ,CAAC,mBAAmB,qBAC7B,UAAS,YAAY;KAGrB,UAAS,YAAY;AAIzB,QACE,qBAAC,SAAD;EAAS,GAAI;YAAb,CACG,QACA,eAAe,YAAY,iBAC1B,qBAAA,UAAA,EAAA,UAAA,CACG,sBACA,YAAY,cACZ,EAAA,CAAA,CAEG;;;AAKd,SAAS,QACP,YACuB;AACvB,QACE,OAAO,WAAW,WAAW,YAC7B,CAAC,CAAC,WAAW,UACb,OAAO,WAAW,iBAAiB,YACnC,CAAC,CAAC,WAAW"}

package/dist/node-dev/ProductPrice.js

@@ -1,64 +1,48 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const Money = require("./Money.js");
-const flattenConnection = require("./flatten-connection.js");
+require("./_virtual/_rolldown/runtime.js");
+const require_flatten_connection = require("./flatten-connection.js");
+const require_Money = require("./Money.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ProductPrice.tsx
+/**
+* The `ProductPrice` component renders a `Money` component with the product
+* [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
+* @publicDocs
+*/
 function ProductPrice(props) {
-  var _a, _b, _c, _d, _e, _f;
-  const {
-    priceType = "regular",
-    variantId,
-    valueType = "min",
-    data: product,
-    ...passthroughProps
-  } = props;
-  if (product == null) {
-    throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);
-  }
-  let price;
-  let measurement;
-  const variant = variantId ? flattenConnection.flattenConnection((product == null ? void 0 : product.variants) ?? {}).find(
-    (variant2) => (variant2 == null ? void 0 : variant2.id) === variantId
-  ) ?? null : null;
-  const variantPriceProperty = valueType === "max" ? "maxVariantPrice" : "minVariantPrice";
-  if (priceType === "compareAt") {
-    if (variantId && variant) {
-      price = variant.compareAtPrice;
-    } else {
-      price = (_a = product == null ? void 0 : product.compareAtPriceRange) == null ? void 0 : _a[variantPriceProperty];
-    }
-    let priceAsNumber;
-    if (variantId && variant) {
-      priceAsNumber = parseFloat(((_b = variant.price) == null ? void 0 : _b.amount) ?? "0");
-    } else {
-      priceAsNumber = parseFloat(
-        ((_d = (_c = product == null ? void 0 : product.priceRange) == null ? void 0 : _c[variantPriceProperty]) == null ? void 0 : _d.amount) ?? "0"
-      );
-    }
-    const compareAtPriceAsNumber = parseFloat((price == null ? void 0 : price.amount) ?? "0");
-    if (priceAsNumber >= compareAtPriceAsNumber) {
-      return null;
-    }
-  } else {
-    if (variantId && variant) {
-      price = variant.price;
-      if (valueType === "unit") {
-        price = variant.unitPrice;
-        measurement = variant.unitPriceMeasurement;
-      }
-    } else if (valueType === "max") {
-      price = (_e = product.priceRange) == null ? void 0 : _e.maxVariantPrice;
-    } else {
-      price = (_f = product.priceRange) == null ? void 0 : _f.minVariantPrice;
-    }
-  }
-  if (!price) {
-    return null;
-  }
-  if (measurement) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Money.Money, { ...passthroughProps, data: price, measurement });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Money.Money, { ...passthroughProps, data: price });
+	const { priceType = "regular", variantId, valueType = "min", data: product, ...passthroughProps } = props;
+	if (product == null) throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);
+	let price;
+	let measurement;
+	const variant = variantId ? require_flatten_connection.flattenConnection(product?.variants ?? {}).find((variant) => variant?.id === variantId) ?? null : null;
+	const variantPriceProperty = valueType === "max" ? "maxVariantPrice" : "minVariantPrice";
+	if (priceType === "compareAt") {
+		if (variantId && variant) price = variant.compareAtPrice;
+		else price = product?.compareAtPriceRange?.[variantPriceProperty];
+		let priceAsNumber;
+		if (variantId && variant) priceAsNumber = parseFloat(variant.price?.amount ?? "0");
+		else priceAsNumber = parseFloat(product?.priceRange?.[variantPriceProperty]?.amount ?? "0");
+		const compareAtPriceAsNumber = parseFloat(price?.amount ?? "0");
+		if (priceAsNumber >= compareAtPriceAsNumber) return null;
+	} else if (variantId && variant) {
+		price = variant.price;
+		if (valueType === "unit") {
+			price = variant.unitPrice;
+			measurement = variant.unitPriceMeasurement;
+		}
+	} else if (valueType === "max") price = product.priceRange?.maxVariantPrice;
+	else price = product.priceRange?.minVariantPrice;
+	if (!price) return null;
+	if (measurement) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Money.Money, {
+		...passthroughProps,
+		data: price,
+		measurement
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Money.Money, {
+		...passthroughProps,
+		data: price
+	});
 }
+//#endregion
 exports.ProductPrice = ProductPrice;
-//# sourceMappingURL=ProductPrice.js.map
+
+//# sourceMappingURL=ProductPrice.js.map

package/dist/node-dev/ProductPrice.js.map

@@ -1 +1 @@
-{"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, type MoneyPropsBase} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nexport interface ProductPriceProps {\n  /** A Storefront API [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<\n  ComponentGeneric extends React.ElementType = 'div',\n>(\n  props: ProductPriceProps &\n    Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>,\n): JSX.Element | null {\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  const variantPriceProperty =\n    valueType === 'max' ? 'maxVariantPrice' : 'minVariantPrice';\n\n  if (priceType === 'compareAt') {\n    if (variantId && variant) {\n      price = variant.compareAtPrice;\n    } else {\n      price = product?.compareAtPriceRange?.[variantPriceProperty];\n    }\n\n    let priceAsNumber: number;\n    if (variantId && variant) {\n      priceAsNumber = parseFloat(variant.price?.amount ?? '0');\n    } else {\n      priceAsNumber = parseFloat(\n        product?.priceRange?.[variantPriceProperty]?.amount ?? '0',\n      );\n    }\n\n    const compareAtPriceAsNumber = parseFloat(price?.amount ?? '0');\n\n    if (priceAsNumber >= compareAtPriceAsNumber) {\n      return null;\n    }\n  } else {\n    if (variantId && variant) {\n      price = variant.price;\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\n// This is only for documentation purposes, and it is not used in the code.\nexport interface ProductPricePropsForDocs<\n  AsType extends React.ElementType = 'div',\n>\n  extends\n    Omit<MoneyPropsBase<AsType>, 'data' | 'measurement'>,\n    ProductPriceProps {}\n"],"names":["flattenConnection","variant","Money","jsx"],"mappings":";;;;;AAwBO,SAAS,aAGd,OAEoB;;AACpB,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,GAAG;AAAA,EAAA,IACD;AAEJ,MAAI,WAAW,MAAM;AACnB,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEA,MAAI;AACJ,MAAI;AAEJ,QAAM,UAAU,YACXA,kBAAAA,mBAAkB,mCAAS,aAAY,CAAA,CAAE,EAAE;AAAA,IAC1C,CAACC,cAAYA,qCAAS,QAAO;AAAA,EAAA,KAC1B,OACL;AAEJ,QAAM,uBACJ,cAAc,QAAQ,oBAAoB;AAE5C,MAAI,cAAc,aAAa;AAC7B,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAAA,IAClB,OAAO;AACL,eAAQ,wCAAS,wBAAT,mBAA+B;AAAA,IACzC;AAEA,QAAI;AACJ,QAAI,aAAa,SAAS;AACxB,sBAAgB,aAAW,aAAQ,UAAR,mBAAe,WAAU,GAAG;AAAA,IACzD,OAAO;AACL,sBAAgB;AAAA,UACd,8CAAS,eAAT,mBAAsB,0BAAtB,mBAA6C,WAAU;AAAA,MAAA;AAAA,IAE3D;AAEA,UAAM,yBAAyB,YAAW,+BAAO,WAAU,GAAG;AAE9D,QAAI,iBAAiB,wBAAwB;AAC3C,aAAO;AAAA,IACT;AAAA,EACF,OAAO;AACL,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAChB,UAAI,cAAc,QAAQ;AACxB,gBAAQ,QAAQ;AAChB,sBAAc,QAAQ;AAAA,MACxB;AAAA,IACF,WAAW,cAAc,OAAO;AAC9B,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAC9B,OAAO;AACL,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAC9B;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,MAAI,aAAa;AACf,0CACGC,MAAAA,OAAA,EAAO,GAAG,kBAAkB,MAAM,OAAO,aAA0B;AAAA,EAExE;AAEA,SAAOC,2BAAAA,IAACD,MAAAA,OAAA,EAAO,GAAG,kBAAkB,MAAM,OAAO;AACnD;;"}
+{"version":3,"file":"ProductPrice.js","names":[],"sources":["../../src/ProductPrice.tsx"],"sourcesContent":["import type {\n  MoneyV2,\n  UnitPriceMeasurement,\n  Product,\n} from './storefront-api-types.js';\nimport {Money, type MoneyProps, type MoneyPropsBase} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nexport interface ProductPriceProps {\n  /** A Storefront API [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 * @publicDocs\n */\nexport function ProductPrice<\n  ComponentGeneric extends React.ElementType = 'div',\n>(\n  props: ProductPriceProps &\n    Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>,\n): JSX.Element | null {\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  const variantPriceProperty =\n    valueType === 'max' ? 'maxVariantPrice' : 'minVariantPrice';\n\n  if (priceType === 'compareAt') {\n    if (variantId && variant) {\n      price = variant.compareAtPrice;\n    } else {\n      price = product?.compareAtPriceRange?.[variantPriceProperty];\n    }\n\n    let priceAsNumber: number;\n    if (variantId && variant) {\n      priceAsNumber = parseFloat(variant.price?.amount ?? '0');\n    } else {\n      priceAsNumber = parseFloat(\n        product?.priceRange?.[variantPriceProperty]?.amount ?? '0',\n      );\n    }\n\n    const compareAtPriceAsNumber = parseFloat(price?.amount ?? '0');\n\n    if (priceAsNumber >= compareAtPriceAsNumber) {\n      return null;\n    }\n  } else {\n    if (variantId && variant) {\n      price = variant.price;\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\n// This is only for documentation purposes, and it is not used in the code.\n/** @publicDocs */\nexport interface ProductPricePropsForDocs<\n  AsType extends React.ElementType = 'div',\n>\n  extends\n    Omit<MoneyPropsBase<AsType>, 'data' | 'measurement'>,\n    ProductPriceProps {}\n"],"mappings":";;;;;;;;;;AAyBA,SAAgB,aAGd,OAEoB;CACpB,MAAM,EACJ,YAAY,WACZ,WACA,YAAY,OACZ,MAAM,SACN,GAAG,qBACD;AAEJ,KAAI,WAAW,KACb,OAAM,IAAI,MAAM,wDAAwD;CAG1E,IAAI;CACJ,IAAI;CAEJ,MAAM,UAAU,YACX,2BAAA,kBAAkB,SAAS,YAAY,EAAE,CAAC,CAAC,MACzC,YAAY,SAAS,OAAO,UAC9B,IAAI,OACL;CAEJ,MAAM,uBACJ,cAAc,QAAQ,oBAAoB;AAE5C,KAAI,cAAc,aAAa;AAC7B,MAAI,aAAa,QACf,SAAQ,QAAQ;MAEhB,SAAQ,SAAS,sBAAsB;EAGzC,IAAI;AACJ,MAAI,aAAa,QACf,iBAAgB,WAAW,QAAQ,OAAO,UAAU,IAAI;MAExD,iBAAgB,WACd,SAAS,aAAa,uBAAuB,UAAU,IACxD;EAGH,MAAM,yBAAyB,WAAW,OAAO,UAAU,IAAI;AAE/D,MAAI,iBAAiB,uBACnB,QAAO;YAGL,aAAa,SAAS;AACxB,UAAQ,QAAQ;AAChB,MAAI,cAAc,QAAQ;AACxB,WAAQ,QAAQ;AAChB,iBAAc,QAAQ;;YAEf,cAAc,MACvB,SAAQ,QAAQ,YAAY;KAE5B,SAAQ,QAAQ,YAAY;AAIhC,KAAI,CAAC,MACH,QAAO;AAGT,KAAI,YACF,QACE,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAD;EAAO,GAAI;EAAkB,MAAM;EAAoB;EAAe,CAAA;AAI1E,QAAO,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAD;EAAO,GAAI;EAAkB,MAAM;EAAS,CAAA"}

package/dist/node-dev/ProductPrice.mjs

@@ -1,64 +1,47 @@
-import { jsx } from "react/jsx-runtime";
-import { Money } from "./Money.mjs";
 import { flattenConnection } from "./flatten-connection.mjs";
+import { Money } from "./Money.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/ProductPrice.tsx
+/**
+* The `ProductPrice` component renders a `Money` component with the product
+* [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
+* @publicDocs
+*/
 function ProductPrice(props) {
-  var _a, _b, _c, _d, _e, _f;
-  const {
-    priceType = "regular",
-    variantId,
-    valueType = "min",
-    data: product,
-    ...passthroughProps
-  } = props;
-  if (product == null) {
-    throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);
-  }
-  let price;
-  let measurement;
-  const variant = variantId ? flattenConnection((product == null ? void 0 : product.variants) ?? {}).find(
-    (variant2) => (variant2 == null ? void 0 : variant2.id) === variantId
-  ) ?? null : null;
-  const variantPriceProperty = valueType === "max" ? "maxVariantPrice" : "minVariantPrice";
-  if (priceType === "compareAt") {
-    if (variantId && variant) {
-      price = variant.compareAtPrice;
-    } else {
-      price = (_a = product == null ? void 0 : product.compareAtPriceRange) == null ? void 0 : _a[variantPriceProperty];
-    }
-    let priceAsNumber;
-    if (variantId && variant) {
-      priceAsNumber = parseFloat(((_b = variant.price) == null ? void 0 : _b.amount) ?? "0");
-    } else {
-      priceAsNumber = parseFloat(
-        ((_d = (_c = product == null ? void 0 : product.priceRange) == null ? void 0 : _c[variantPriceProperty]) == null ? void 0 : _d.amount) ?? "0"
-      );
-    }
-    const compareAtPriceAsNumber = parseFloat((price == null ? void 0 : price.amount) ?? "0");
-    if (priceAsNumber >= compareAtPriceAsNumber) {
-      return null;
-    }
-  } else {
-    if (variantId && variant) {
-      price = variant.price;
-      if (valueType === "unit") {
-        price = variant.unitPrice;
-        measurement = variant.unitPriceMeasurement;
-      }
-    } else if (valueType === "max") {
-      price = (_e = product.priceRange) == null ? void 0 : _e.maxVariantPrice;
-    } else {
-      price = (_f = product.priceRange) == null ? void 0 : _f.minVariantPrice;
-    }
-  }
-  if (!price) {
-    return null;
-  }
-  if (measurement) {
-    return /* @__PURE__ */ jsx(Money, { ...passthroughProps, data: price, measurement });
-  }
-  return /* @__PURE__ */ jsx(Money, { ...passthroughProps, data: price });
+	const { priceType = "regular", variantId, valueType = "min", data: product, ...passthroughProps } = props;
+	if (product == null) throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);
+	let price;
+	let measurement;
+	const variant = variantId ? flattenConnection(product?.variants ?? {}).find((variant) => variant?.id === variantId) ?? null : null;
+	const variantPriceProperty = valueType === "max" ? "maxVariantPrice" : "minVariantPrice";
+	if (priceType === "compareAt") {
+		if (variantId && variant) price = variant.compareAtPrice;
+		else price = product?.compareAtPriceRange?.[variantPriceProperty];
+		let priceAsNumber;
+		if (variantId && variant) priceAsNumber = parseFloat(variant.price?.amount ?? "0");
+		else priceAsNumber = parseFloat(product?.priceRange?.[variantPriceProperty]?.amount ?? "0");
+		const compareAtPriceAsNumber = parseFloat(price?.amount ?? "0");
+		if (priceAsNumber >= compareAtPriceAsNumber) return null;
+	} else if (variantId && variant) {
+		price = variant.price;
+		if (valueType === "unit") {
+			price = variant.unitPrice;
+			measurement = variant.unitPriceMeasurement;
+		}
+	} else if (valueType === "max") price = product.priceRange?.maxVariantPrice;
+	else price = product.priceRange?.minVariantPrice;
+	if (!price) return null;
+	if (measurement) return /* @__PURE__ */ jsx(Money, {
+		...passthroughProps,
+		data: price,
+		measurement
+	});
+	return /* @__PURE__ */ jsx(Money, {
+		...passthroughProps,
+		data: price
+	});
 }
-export {
-  ProductPrice
-};
-//# sourceMappingURL=ProductPrice.mjs.map
+//#endregion
+export { ProductPrice };
+
+//# sourceMappingURL=ProductPrice.mjs.map