@shopify/hydrogen-react 2025.1.2 → 2025.1.4

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

@@ -1 +1 @@
-{"version":3,"file":"ModelViewer.js","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/2025-01/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      // @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      // 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      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":["useState","useCallback","useLoadScript","useEffect","jsx"],"mappings":";;;;;AA+DO,SAAS,YAAY,OAA6C;;AACjE,QAAA,CAAC,aAAa,cAAc,IAAIA,MAAA;AAAA,IACpC;AAAA,EAAA;AAEI,QAAA,cAAcC,kBAAY,CAAC,SAAsB;AACrD,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAE,CAAA;AACL,QAAM,EAAC,MAAM,UAAU,WAAW,GAAG,iBAAoB,IAAA;AAEzD,QAAM,0BAA0BC,WAAA;AAAA,IAC9B;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,IACV;AAAA,EAAA;AAGFC,QAAAA,UAAU,MAAM;AACd,UAAM,wBAAwB;AAAA,MAC5B,OAAO,iBAAiB;AAAA,MACxB,MAAM,iBAAiB;AAAA,MACvB,SAAS,iBAAiB;AAAA,MAC1B,oBAAoB,iBAAiB;AAAA,MACrC,UAAU,iBAAiB;AAAA,MAC3B,aAAa,iBAAiB;AAAA,MAC9B,eAAe,iBAAiB;AAAA,MAChC,4BAA4B,iBAAiB;AAAA,MAC7C,iBAAiB,iBAAiB;AAAA,MAClC,sBAAsB,iBAAiB;AAAA,MACvC,MAAM,iBAAiB;AAAA,MACvB,OAAO,iBAAiB;AAAA,MACxB,qBAAqB,iBAAiB;AAAA,IAAA;AAGxC,QAAI,CAAC,aAAa;AAChB;AAAA,IACF;AACO,WAAA,QAAQ,qBAAqB,EAAE;AAAA,MACpC,CAAC,CAAC,WAAW,YAAY,MAAM;AAC7B,YAAI,cAAc;AACJ,sBAAA,iBAAiB,WAAW,YAAY;AAAA,QACtD;AAAA,MACF;AAAA,IAAA;AAGF,WAAO,MAAY;AACjB,UAAI,eAAe,MAAM;AACvB;AAAA,MACF;AACO,aAAA,QAAQ,qBAAqB,EAAE;AAAA,QACpC,CAAC,CAAC,WAAW,YAAY,MAAM;AAC7B,cAAI,cAAc;AACJ,wBAAA,oBAAoB,WAAW,YAAY;AAAA,UACzD;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EACF,GACC;AAAA,IACD;AAAA,IACA,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,EAAA,CAClB;AAED,MAAI,4BAA4B,QAAQ;AAE/B,WAAA;AAAA,EACT;AAEA,MAAI,GAAC,gBAAK,YAAL,mBAAe,OAAf,mBAAmB,MAAK;AAC3B,UAAM,kBAAkB;AACF;AACd,YAAA,IAAI,MAAM,eAAe;AAAA,IAIjC;AAAA,EACF;AAEwB,MAAA,CAAC,KAAK,KAAK;AACzB,YAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAGE,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG;AAAA,MAGJ,OAAO;AAAA,MACP,IAAI,iBAAiB,MAAM,KAAK;AAAA,MAChC,KAAK,KAAK,QAAQ,CAAC,EAAE;AAAA,MACrB,KAAK,KAAK,OAAO;AAAA,MACjB,mBAAiB,iBAAiB,kBAAkB;AAAA,MACpD,SAAS,iBAAiB,YAAU,UAAK,iBAAL,mBAAmB,SAAQ;AAAA,MAC/D,UAAU,iBAAiB,YAAY;AAAA,MACvC,SAAS,iBAAiB;AAAA,MAC1B,QAAQ,iBAAiB;AAAA,MACzB,IAAI,iBAAiB;AAAA,MACrB,YAAU,iBAAiB;AAAA,MAC3B,YAAU,iBAAiB;AAAA,MAG3B,gBAAc,iBAAiB;AAAA,MAC/B,WAAS,iBAAiB;AAAA,MAC1B,gBAAc,iBAAiB;AAAA,MAC/B,gBAAc,iBAAiB;AAAA,MAC/B,qBAAmB,iBAAiB;AAAA,MACpC,eAAa,iBAAiB;AAAA,MAC9B,qBAAmB,iBAAiB;AAAA,MAGpC,uBAAqB,iBAAiB;AAAA,MACtC,sBAAoB,iBAAiB;AAAA,MACrC,sBAAoB,iBAAiB;AAAA,MACrC,4BAA0B,iBAAiB;AAAA,MAC3C,gCAA8B,iBAAiB;AAAA,MAC/C,gBAAc,iBAAiB;AAAA,MAC/B,iBAAe,iBAAiB;AAAA,MAChC,iBAAe,iBAAiB;AAAA,MAChC,oBAAkB,iBAAiB;AAAA,MACnC,oBAAkB,iBAAiB;AAAA,MACnC,qBAAmB,iBAAiB;AAAA,MACpC,qBAAmB,iBAAiB;AAAA,MACpC,QAAQ,iBAAiB;AAAA,MACzB,uBAAqB,iBAAiB,sBAAsB;AAAA,MAC5D,gBAAc,iBAAiB;AAAA,MAC/B,qBAAmB,iBAAiB;AAAA,MACpC,UAAU,iBAAiB;AAAA,MAC3B,oBAAkB,iBAAiB,mBAAmB;AAAA,MACtD,mBAAiB,iBAAiB,kBAAkB;AAAA,MACpD,kBAAgB,iBAAiB;AAAA,MACjC,gCAA8B,iBAAiB;AAAA,MAC/C,gBAAc,iBAAiB;AAAA,MAC/B,aAAa,iBAAiB;AAAA,MAC9B,OAAO,iBAAiB;AAAA,MAEvB;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
+{"version":3,"file":"ModelViewer.js","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/2025-01/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":["useState","useCallback","useLoadScript","useEffect","jsx"],"mappings":"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"}

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/2025-01/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      // @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      // 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      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":[],"mappings":"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"}
+{"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/2025-01/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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"}

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 {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\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/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/2025-01/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\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-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":";;;;AA+DO,SAAS,MAA0D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA8C;AACxC,MAAA,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACM,QAAA,cAAcA,kBAAS,IAAI;AACjC,QAAM,UAAU,MAAM;AAEtB,MAAI,SAAS,YAAY;AAEzB,MAAI,mBAAmB,sBAAsB;AACvC,QAAA,mBAAmB,CAAC,sBAAsB;AAC5C,eAAS,YAAY;AAAA,IAAA,WACZ,CAAC,mBAAmB,sBAAsB;AACnD,eAAS,YAAY;AAAA,IAAA,OAChB;AAEL,eAAS,YAAY;AAAA,IACvB;AAAA,EACF;AAGE,SAAAC,2BAAA,KAAC,SAAS,EAAA,GAAG,kBACV,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,iBAEvBA,2BAAA,KAAAC,WAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACA,YAAY;AAAA,IAAA,GACf;AAAA,EAEJ,EAAA,CAAA;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","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\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/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/2025-01/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\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-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":";;;;AA+DO,SAAS,MAA0D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA8C;AACxC,MAAA,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EAAA;AAEI,QAAA,cAAcA,kBAAS,IAAI;AACjC,QAAM,UAAU,MAAM;AAEtB,MAAI,SAAS,YAAY;AAEzB,MAAI,mBAAmB,sBAAsB;AACvC,QAAA,mBAAmB,CAAC,sBAAsB;AAC5C,eAAS,YAAY;AAAA,IAAA,WACZ,CAAC,mBAAmB,sBAAsB;AACnD,eAAS,YAAY;AAAA,IAAA,OAChB;AAEL,eAAS,YAAY;AAAA,IAAA;AAAA,EACvB;AAIA,SAAAC,2BAAA,KAAC,SAAS,EAAA,GAAG,kBACV,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,iBAEvBA,2BAAA,KAAAC,WAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACA,YAAY;AAAA,IAAA,EACf,CAAA;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;;"}

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 {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\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/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/2025-01/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\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-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":";;AA+DO,SAAS,MAA0D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA8C;AACxC,MAAA,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACM,QAAA,cAAc,SAAS,IAAI;AACjC,QAAM,UAAU,MAAM;AAEtB,MAAI,SAAS,YAAY;AAEzB,MAAI,mBAAmB,sBAAsB;AACvC,QAAA,mBAAmB,CAAC,sBAAsB;AAC5C,eAAS,YAAY;AAAA,IAAA,WACZ,CAAC,mBAAmB,sBAAsB;AACnD,eAAS,YAAY;AAAA,IAAA,OAChB;AAEL,eAAS,YAAY;AAAA,IACvB;AAAA,EACF;AAGE,SAAA,qBAAC,SAAS,EAAA,GAAG,kBACV,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,iBAEvB,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACA,YAAY;AAAA,IAAA,GACf;AAAA,EAEJ,EAAA,CAAA;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","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\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/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/2025-01/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\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-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":";;AA+DO,SAAS,MAA0D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA8C;AACxC,MAAA,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EAAA;AAEI,QAAA,cAAc,SAAS,IAAI;AACjC,QAAM,UAAU,MAAM;AAEtB,MAAI,SAAS,YAAY;AAEzB,MAAI,mBAAmB,sBAAsB;AACvC,QAAA,mBAAmB,CAAC,sBAAsB;AAC5C,eAAS,YAAY;AAAA,IAAA,WACZ,CAAC,mBAAmB,sBAAsB;AACnD,eAAS,YAAY;AAAA,IAAA,OAChB;AAEL,eAAS,YAAY;AAAA,IAAA;AAAA,EACvB;AAIA,SAAA,qBAAC,SAAS,EAAA,GAAG,kBACV,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,iBAEvB,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACA,YAAY;AAAA,IAAA,EACf,CAAA;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;"}

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> extends Omit<MoneyPropsBase<AsType>, 'data' | 'measurement'>,\n    ProductPriceProps {}\n"],"names":["flattenConnection","variant","Money","jsx"],"mappings":";;;;;AAwBO,SAAS,aAGd,OAEoB;;AACd,QAAA;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,GAAG;AAAA,EACD,IAAA;AAEJ,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEI,MAAA;AACA,MAAA;AAEJ,QAAM,UAAU,YACZA,kBAAA,mBAAkB,mCAAS,aAAY,CAAE,CAAA,EAAE;AAAA,IACzC,CAACC,cAAYA,qCAAS,QAAO;AAAA,EAAA,KAC1B,OACL;AAEE,QAAA,uBACJ,cAAc,QAAQ,oBAAoB;AAE5C,MAAI,cAAc,aAAa;AAC7B,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAAA,IAAA,OACX;AACG,eAAA,wCAAS,wBAAT,mBAA+B;AAAA,IACzC;AAEI,QAAA;AACJ,QAAI,aAAa,SAAS;AACxB,sBAAgB,aAAW,aAAQ,UAAR,mBAAe,WAAU,GAAG;AAAA,IAAA,OAClD;AACW,sBAAA;AAAA,UACd,8CAAS,eAAT,mBAAsB,0BAAtB,mBAA6C,WAAU;AAAA,MAAA;AAAA,IAE3D;AAEA,UAAM,yBAAyB,YAAW,+BAAO,WAAU,GAAG;AAE9D,QAAI,iBAAiB,wBAAwB;AACpC,aAAA;AAAA,IACT;AAAA,EAAA,OACK;AACL,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAChB,UAAI,cAAc,QAAQ;AACxB,gBAAQ,QAAQ;AAChB,sBAAc,QAAQ;AAAA,MACxB;AAAA,IAAA,WACS,cAAc,OAAO;AAC9B,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAAA,OACvB;AACL,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAC9B;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACH,WAAA;AAAA,EACT;AAEA,MAAI,aAAa;AACf,0CACGC,MAAO,OAAA,EAAA,GAAG,kBAAkB,MAAM,OAAO,YAA0B,CAAA;AAAA,EAExE;AAEA,SAAQC,2BAAAA,IAAAD,MAAAA,OAAA,EAAO,GAAG,kBAAkB,MAAM,MAAO,CAAA;AACnD;;"}
+{"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> extends Omit<MoneyPropsBase<AsType>, 'data' | 'measurement'>,\n    ProductPriceProps {}\n"],"names":["flattenConnection","variant","Money","jsx"],"mappings":";;;;;AAwBO,SAAS,aAGd,OAEoB;;AACd,QAAA;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,GAAG;AAAA,EAAA,IACD;AAEJ,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,uDAAuD;AAAA,EAAA;AAGrE,MAAA;AACA,MAAA;AAEJ,QAAM,UAAU,YACXA,kBAAA,mBAAkB,mCAAS,aAAY,CAAE,CAAA,EAAE;AAAA,IAC1C,CAACC,cAAYA,qCAAS,QAAO;AAAA,OAC1B,OACL;AAEE,QAAA,uBACJ,cAAc,QAAQ,oBAAoB;AAE5C,MAAI,cAAc,aAAa;AAC7B,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAAA,IAAA,OACX;AACG,eAAA,wCAAS,wBAAT,mBAA+B;AAAA,IAAoB;AAGzD,QAAA;AACJ,QAAI,aAAa,SAAS;AACxB,sBAAgB,aAAW,aAAQ,UAAR,mBAAe,WAAU,GAAG;AAAA,IAAA,OAClD;AACW,sBAAA;AAAA,UACd,8CAAS,eAAT,mBAAsB,0BAAtB,mBAA6C,WAAU;AAAA,MACzD;AAAA,IAAA;AAGF,UAAM,yBAAyB,YAAW,+BAAO,WAAU,GAAG;AAE9D,QAAI,iBAAiB,wBAAwB;AACpC,aAAA;AAAA,IAAA;AAAA,EACT,OACK;AACL,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAChB,UAAI,cAAc,QAAQ;AACxB,gBAAQ,QAAQ;AAChB,sBAAc,QAAQ;AAAA,MAAA;AAAA,IACxB,WACS,cAAc,OAAO;AAC9B,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAAA,OACvB;AACL,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAAA;AAAA,EAC9B;AAGF,MAAI,CAAC,OAAO;AACH,WAAA;AAAA,EAAA;AAGT,MAAI,aAAa;AACf,0CACGC,MAAAA,OAAO,EAAA,GAAG,kBAAkB,MAAM,OAAO,aAA0B;AAAA,EAAA;AAIxE,SAAQC,2BAAAA,IAAAD,MAAAA,OAAA,EAAO,GAAG,kBAAkB,MAAM,OAAO;AACnD;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ProductPrice.mjs","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> extends Omit<MoneyPropsBase<AsType>, 'data' | 'measurement'>,\n    ProductPriceProps {}\n"],"names":["variant"],"mappings":";;;AAwBO,SAAS,aAGd,OAEoB;;AACd,QAAA;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,GAAG;AAAA,EACD,IAAA;AAEJ,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEI,MAAA;AACA,MAAA;AAEJ,QAAM,UAAU,YACZ,mBAAkB,mCAAS,aAAY,CAAE,CAAA,EAAE;AAAA,IACzC,CAACA,cAAYA,qCAAS,QAAO;AAAA,EAAA,KAC1B,OACL;AAEE,QAAA,uBACJ,cAAc,QAAQ,oBAAoB;AAE5C,MAAI,cAAc,aAAa;AAC7B,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAAA,IAAA,OACX;AACG,eAAA,wCAAS,wBAAT,mBAA+B;AAAA,IACzC;AAEI,QAAA;AACJ,QAAI,aAAa,SAAS;AACxB,sBAAgB,aAAW,aAAQ,UAAR,mBAAe,WAAU,GAAG;AAAA,IAAA,OAClD;AACW,sBAAA;AAAA,UACd,8CAAS,eAAT,mBAAsB,0BAAtB,mBAA6C,WAAU;AAAA,MAAA;AAAA,IAE3D;AAEA,UAAM,yBAAyB,YAAW,+BAAO,WAAU,GAAG;AAE9D,QAAI,iBAAiB,wBAAwB;AACpC,aAAA;AAAA,IACT;AAAA,EAAA,OACK;AACL,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAChB,UAAI,cAAc,QAAQ;AACxB,gBAAQ,QAAQ;AAChB,sBAAc,QAAQ;AAAA,MACxB;AAAA,IAAA,WACS,cAAc,OAAO;AAC9B,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAAA,OACvB;AACL,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAC9B;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACH,WAAA;AAAA,EACT;AAEA,MAAI,aAAa;AACf,+BACG,OAAO,EAAA,GAAG,kBAAkB,MAAM,OAAO,YAA0B,CAAA;AAAA,EAExE;AAEA,SAAQ,oBAAA,OAAA,EAAO,GAAG,kBAAkB,MAAM,MAAO,CAAA;AACnD;"}
+{"version":3,"file":"ProductPrice.mjs","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> extends Omit<MoneyPropsBase<AsType>, 'data' | 'measurement'>,\n    ProductPriceProps {}\n"],"names":["variant"],"mappings":";;;AAwBO,SAAS,aAGd,OAEoB;;AACd,QAAA;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,GAAG;AAAA,EAAA,IACD;AAEJ,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,uDAAuD;AAAA,EAAA;AAGrE,MAAA;AACA,MAAA;AAEJ,QAAM,UAAU,YACX,mBAAkB,mCAAS,aAAY,CAAE,CAAA,EAAE;AAAA,IAC1C,CAACA,cAAYA,qCAAS,QAAO;AAAA,OAC1B,OACL;AAEE,QAAA,uBACJ,cAAc,QAAQ,oBAAoB;AAE5C,MAAI,cAAc,aAAa;AAC7B,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAAA,IAAA,OACX;AACG,eAAA,wCAAS,wBAAT,mBAA+B;AAAA,IAAoB;AAGzD,QAAA;AACJ,QAAI,aAAa,SAAS;AACxB,sBAAgB,aAAW,aAAQ,UAAR,mBAAe,WAAU,GAAG;AAAA,IAAA,OAClD;AACW,sBAAA;AAAA,UACd,8CAAS,eAAT,mBAAsB,0BAAtB,mBAA6C,WAAU;AAAA,MACzD;AAAA,IAAA;AAGF,UAAM,yBAAyB,YAAW,+BAAO,WAAU,GAAG;AAE9D,QAAI,iBAAiB,wBAAwB;AACpC,aAAA;AAAA,IAAA;AAAA,EACT,OACK;AACL,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAChB,UAAI,cAAc,QAAQ;AACxB,gBAAQ,QAAQ;AAChB,sBAAc,QAAQ;AAAA,MAAA;AAAA,IACxB,WACS,cAAc,OAAO;AAC9B,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAAA,OACvB;AACL,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAAA;AAAA,EAC9B;AAGF,MAAI,CAAC,OAAO;AACH,WAAA;AAAA,EAAA;AAGT,MAAI,aAAa;AACf,+BACG,OAAO,EAAA,GAAG,kBAAkB,MAAM,OAAO,aAA0B;AAAA,EAAA;AAIxE,SAAQ,oBAAA,OAAA,EAAO,GAAG,kBAAkB,MAAM,OAAO;AACnD;"}

package/dist/node-dev/ProductProvider.js

@@ -133,17 +133,20 @@ function getSelectedVariant(variants, choices) {
   });
 }
 function getOptions(variants) {
-  const map = variants.reduce((memo, variant) => {
-    var _a;
-    if (!variant.selectedOptions) {
-      throw new Error(`'getOptions' requires 'variant.selectedOptions'`);
-    }
-    (_a = variant == null ? void 0 : variant.selectedOptions) == null ? void 0 : _a.forEach((opt) => {
-      memo[(opt == null ? void 0 : opt.name) ?? ""] = memo[(opt == null ? void 0 : opt.name) ?? ""] || /* @__PURE__ */ new Set();
-      memo[(opt == null ? void 0 : opt.name) ?? ""].add((opt == null ? void 0 : opt.value) ?? "");
-    });
-    return memo;
-  }, {});
+  const map = variants.reduce(
+    (memo, variant) => {
+      var _a;
+      if (!variant.selectedOptions) {
+        throw new Error(`'getOptions' requires 'variant.selectedOptions'`);
+      }
+      (_a = variant == null ? void 0 : variant.selectedOptions) == null ? void 0 : _a.forEach((opt) => {
+        memo[(opt == null ? void 0 : opt.name) ?? ""] = memo[(opt == null ? void 0 : opt.name) ?? ""] || /* @__PURE__ */ new Set();
+        memo[(opt == null ? void 0 : opt.name) ?? ""].add((opt == null ? void 0 : opt.value) ?? "");
+      });
+      return memo;
+    },
+    {}
+  );
   return Object.keys(map).map((option) => {
     return {
       name: option,

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

@@ -1 +1 @@
-{"version":3,"file":"ProductProvider.js","sources":["../../src/ProductProvider.tsx"],"sourcesContent":["import {\n  useMemo,\n  useState,\n  useEffect,\n  useCallback,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  SelectedOption as SelectedOptionType,\n  SellingPlan,\n  SellingPlanAllocation,\n  Product,\n  ProductVariant as ProductVariantType,\n  ProductVariantConnection,\n  SellingPlan as SellingPlanType,\n  SellingPlanAllocation as SellingPlanAllocationType,\n  SellingPlanGroup as SellingPlanGroupType,\n  SellingPlanGroupConnection,\n} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nconst ProductOptionsContext = createContext<ProductHookValue | null>(null);\n\ntype InitialVariantId = ProductVariantType['id'] | null;\n\ninterface ProductProviderProps {\n  /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** A `ReactNode` element. */\n  children: React.ReactNode;\n  /**\n   * The initially selected variant.\n   * The following logic applies to `initialVariantId`:\n   * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n   * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n   * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n   * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n   */\n  initialVariantId?: InitialVariantId;\n}\n\n/**\n * `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook.\n *\n * It helps manage selected options and variants for a product.\n */\nexport function ProductProvider({\n  children,\n  data: product,\n  initialVariantId: explicitVariantId,\n}: ProductProviderProps): JSX.Element {\n  // The flattened variants\n  const variants = useMemo(\n    () => flattenConnection(product.variants ?? {}),\n    [product.variants],\n  );\n\n  if (!isProductVariantArray(variants)) {\n    throw new Error(\n      `<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`,\n    );\n  }\n\n  // All the options available for a product, based on all the variants\n  const options = useMemo(() => getOptions(variants), [variants]);\n\n  /**\n   * Track the selectedVariant within the provider.\n   */\n  const [selectedVariant, setSelectedVariant] = useState<\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null\n  >(() => getVariantBasedOnIdProp(explicitVariantId, variants));\n\n  /**\n   * Track the selectedOptions within the provider. If a `initialVariantId`\n   * is passed, use that to select initial options.\n   */\n  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>(() =>\n    getSelectedOptions(selectedVariant),\n  );\n\n  /**\n   * When the initialVariantId changes, we need to make sure we\n   * update the selected variant and selected options. If not,\n   * then the selected variant and options will reference incorrect\n   * values.\n   */\n  useEffect(() => {\n    const newSelectedVariant = getVariantBasedOnIdProp(\n      explicitVariantId,\n      variants,\n    );\n    setSelectedVariant(newSelectedVariant);\n    setSelectedOptions(getSelectedOptions(newSelectedVariant));\n  }, [explicitVariantId, variants]);\n\n  /**\n   * Allow the developer to select an option.\n   */\n  const setSelectedOption = useCallback(\n    (name: string, value: string) => {\n      setSelectedOptions((selectedOptions) => {\n        const opts = {...selectedOptions, [name]: value};\n        setSelectedVariant(getSelectedVariant(variants, opts));\n        return opts;\n      });\n    },\n    [setSelectedOptions, variants],\n  );\n\n  const isOptionInStock = useCallback(\n    (option: string, value: string) => {\n      const proposedVariant = getSelectedVariant(variants, {\n        ...selectedOptions,\n        ...{[option]: value},\n      });\n\n      return proposedVariant?.availableForSale ?? true;\n    },\n    [selectedOptions, variants],\n  );\n\n  const sellingPlanGroups = useMemo(\n    () =>\n      flattenConnection(product.sellingPlanGroups ?? {}).map(\n        (sellingPlanGroup) => ({\n          ...sellingPlanGroup,\n          sellingPlans: flattenConnection(sellingPlanGroup?.sellingPlans ?? {}),\n        }),\n      ),\n    [product.sellingPlanGroups],\n  );\n\n  /**\n   * Track the selectedSellingPlan within the hook. If `initialSellingPlanId`\n   * is passed, use that as an initial value. Look it up from the `selectedVariant`, since\n   * that is also a requirement.\n   */\n  const [selectedSellingPlan, setSelectedSellingPlan] = useState<\n    PartialDeep<SellingPlan, {recurseIntoArrays: true}> | undefined\n  >(undefined);\n\n  const selectedSellingPlanAllocation = useMemo<\n    PartialDeep<SellingPlanAllocation, {recurseIntoArrays: true}> | undefined\n  >(() => {\n    if (!selectedVariant || !selectedSellingPlan) {\n      return;\n    }\n\n    if (\n      !selectedVariant.sellingPlanAllocations?.nodes &&\n      !selectedVariant.sellingPlanAllocations?.edges\n    ) {\n      throw new Error(\n        `<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`,\n      );\n    }\n\n    return flattenConnection(selectedVariant.sellingPlanAllocations).find(\n      (allocation) => allocation?.sellingPlan?.id === selectedSellingPlan.id,\n    );\n  }, [selectedVariant, selectedSellingPlan]);\n\n  const value = useMemo<ProductHookValue>(\n    () => ({\n      product,\n      variants,\n      variantsConnection: product.variants,\n      options,\n      selectedVariant,\n      setSelectedVariant,\n      selectedOptions,\n      setSelectedOption,\n      setSelectedOptions,\n      isOptionInStock,\n      selectedSellingPlan,\n      setSelectedSellingPlan,\n      selectedSellingPlanAllocation,\n      sellingPlanGroups,\n      sellingPlanGroupsConnection: product.sellingPlanGroups,\n    }),\n    [\n      product,\n      isOptionInStock,\n      options,\n      selectedOptions,\n      selectedSellingPlan,\n      selectedSellingPlanAllocation,\n      selectedVariant,\n      sellingPlanGroups,\n      setSelectedOption,\n      variants,\n    ],\n  );\n\n  return (\n    <ProductOptionsContext.Provider value={value}>\n      {children}\n    </ProductOptionsContext.Provider>\n  );\n}\n\n/**\n * Provides access to the context value provided by `<ProductProvider />`. Must be a descendent of `<ProductProvider />`.\n */\nexport function useProduct(): ProductHookValue {\n  const context = useContext(ProductOptionsContext);\n\n  if (!context) {\n    throw new Error(`'useProduct' must be a child of <ProductProvider />`);\n  }\n\n  return context;\n}\n\nfunction getSelectedVariant(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n  choices: SelectedOptions,\n): PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined {\n  /**\n   * Ensure the user has selected all the required options, not just some.\n   */\n  if (\n    !variants.length ||\n    variants?.[0]?.selectedOptions?.length !== Object.keys(choices).length\n  ) {\n    return;\n  }\n\n  return variants?.find((variant) => {\n    return Object.entries(choices).every(([name, value]) => {\n      return variant?.selectedOptions?.some(\n        (option) => option?.name === name && option?.value === value,\n      );\n    });\n  });\n}\n\nfunction getOptions(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n): OptionWithValues[] {\n  const map = variants.reduce((memo, variant) => {\n    if (!variant.selectedOptions) {\n      throw new Error(`'getOptions' requires 'variant.selectedOptions'`);\n    }\n    variant?.selectedOptions?.forEach((opt) => {\n      memo[opt?.name ?? ''] = memo[opt?.name ?? ''] || new Set();\n      memo[opt?.name ?? ''].add(opt?.value ?? '');\n    });\n\n    return memo;\n  }, {} as Record<string, Set<string>>);\n\n  return Object.keys(map).map((option) => {\n    return {\n      name: option,\n      values: Array.from(map[option]),\n    };\n  });\n}\n\nfunction getVariantBasedOnIdProp(\n  explicitVariantId: InitialVariantId | undefined,\n  variants: Array<\n    PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined\n  >,\n):\n  | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n  | undefined\n  | null {\n  // get the initial variant based on the logic outlined in the comments for 'initialVariantId' above\n  // * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n  if (explicitVariantId) {\n    const foundVariant = variants.find(\n      (variant) => variant?.id === explicitVariantId,\n    );\n    if (!foundVariant) {\n      console.warn(\n        `<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`,\n      );\n    }\n    return foundVariant;\n  }\n  // * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n  if (explicitVariantId === null) {\n    return null;\n  }\n  // * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n  // * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n  if (explicitVariantId === undefined) {\n    return variants.find((variant) => variant?.availableForSale) || variants[0];\n  }\n}\n\nfunction getSelectedOptions(\n  selectedVariant:\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null,\n): SelectedOptions {\n  return selectedVariant?.selectedOptions\n    ? selectedVariant.selectedOptions.reduce<SelectedOptions>(\n        (memo, optionSet) => {\n          memo[optionSet?.name ?? ''] = optionSet?.value ?? '';\n          return memo;\n        },\n        {},\n      )\n    : {};\n}\n\nfunction isProductVariantArray(\n  maybeVariantArray:\n    | (PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined)[]\n    | undefined,\n): maybeVariantArray is PartialDeep<\n  ProductVariantType,\n  {recurseIntoArrays: true}\n>[] {\n  if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {\n    return false;\n  }\n\n  return true;\n}\n\nexport interface OptionWithValues {\n  name: SelectedOptionType['name'];\n  values: SelectedOptionType['value'][];\n}\n\ntype UseProductObjects = {\n  /** The raw product from the Storefront API */\n  product: Product;\n  /** An array of the variant `nodes` from the `VariantConnection`. */\n  variants: ProductVariantType[];\n  variantsConnection?: ProductVariantConnection;\n  /** An array of the product's options and values. */\n  options: OptionWithValues[];\n  /** The selected variant. */\n  selectedVariant?: ProductVariantType | null;\n  selectedOptions: SelectedOptions;\n  /** The selected selling plan. */\n  selectedSellingPlan?: SellingPlanType;\n  /** The selected selling plan allocation. */\n  selectedSellingPlanAllocation?: SellingPlanAllocationType;\n  /** The selling plan groups. */\n  sellingPlanGroups?: (Omit<SellingPlanGroupType, 'sellingPlans'> & {\n    sellingPlans: SellingPlanType[];\n  })[];\n  sellingPlanGroupsConnection?: SellingPlanGroupConnection;\n};\n\ntype UseProductFunctions = {\n  /** A callback to set the selected variant to the variant passed as an argument. */\n  setSelectedVariant: (\n    variant: PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | null,\n  ) => void;\n  /** A callback to set the selected option. */\n  setSelectedOption: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value'],\n  ) => void;\n  /** A callback to set multiple selected options at once. */\n  setSelectedOptions: (options: SelectedOptions) => void;\n  /** A callback to set the selected selling plan to the one passed as an argument. */\n  setSelectedSellingPlan: (\n    sellingPlan: PartialDeep<SellingPlanType, {recurseIntoArrays: true}>,\n  ) => void;\n  /** A callback that returns a boolean indicating if the option is in stock. */\n  isOptionInStock: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value'],\n  ) => boolean;\n};\n\ntype ProductHookValue = PartialDeep<\n  UseProductObjects,\n  {recurseIntoArrays: true}\n> &\n  UseProductFunctions;\n\nexport type SelectedOptions = {\n  [key: string]: string;\n};\n"],"names":["createContext","useMemo","flattenConnection","useState","useEffect","useCallback","value","selectedOptions","_a","jsx","useContext"],"mappings":"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"}
+{"version":3,"file":"ProductProvider.js","sources":["../../src/ProductProvider.tsx"],"sourcesContent":["import {\n  useMemo,\n  useState,\n  useEffect,\n  useCallback,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  SelectedOption as SelectedOptionType,\n  SellingPlan,\n  SellingPlanAllocation,\n  Product,\n  ProductVariant as ProductVariantType,\n  ProductVariantConnection,\n  SellingPlan as SellingPlanType,\n  SellingPlanAllocation as SellingPlanAllocationType,\n  SellingPlanGroup as SellingPlanGroupType,\n  SellingPlanGroupConnection,\n} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nconst ProductOptionsContext = createContext<ProductHookValue | null>(null);\n\ntype InitialVariantId = ProductVariantType['id'] | null;\n\ninterface ProductProviderProps {\n  /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** A `ReactNode` element. */\n  children: React.ReactNode;\n  /**\n   * The initially selected variant.\n   * The following logic applies to `initialVariantId`:\n   * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n   * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n   * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n   * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n   */\n  initialVariantId?: InitialVariantId;\n}\n\n/**\n * `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook.\n *\n * It helps manage selected options and variants for a product.\n */\nexport function ProductProvider({\n  children,\n  data: product,\n  initialVariantId: explicitVariantId,\n}: ProductProviderProps): JSX.Element {\n  // The flattened variants\n  const variants = useMemo(\n    () => flattenConnection(product.variants ?? {}),\n    [product.variants],\n  );\n\n  if (!isProductVariantArray(variants)) {\n    throw new Error(\n      `<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`,\n    );\n  }\n\n  // All the options available for a product, based on all the variants\n  const options = useMemo(() => getOptions(variants), [variants]);\n\n  /**\n   * Track the selectedVariant within the provider.\n   */\n  const [selectedVariant, setSelectedVariant] = useState<\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null\n  >(() => getVariantBasedOnIdProp(explicitVariantId, variants));\n\n  /**\n   * Track the selectedOptions within the provider. If a `initialVariantId`\n   * is passed, use that to select initial options.\n   */\n  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>(() =>\n    getSelectedOptions(selectedVariant),\n  );\n\n  /**\n   * When the initialVariantId changes, we need to make sure we\n   * update the selected variant and selected options. If not,\n   * then the selected variant and options will reference incorrect\n   * values.\n   */\n  useEffect(() => {\n    const newSelectedVariant = getVariantBasedOnIdProp(\n      explicitVariantId,\n      variants,\n    );\n    setSelectedVariant(newSelectedVariant);\n    setSelectedOptions(getSelectedOptions(newSelectedVariant));\n  }, [explicitVariantId, variants]);\n\n  /**\n   * Allow the developer to select an option.\n   */\n  const setSelectedOption = useCallback(\n    (name: string, value: string) => {\n      setSelectedOptions((selectedOptions) => {\n        const opts = {...selectedOptions, [name]: value};\n        setSelectedVariant(getSelectedVariant(variants, opts));\n        return opts;\n      });\n    },\n    [setSelectedOptions, variants],\n  );\n\n  const isOptionInStock = useCallback(\n    (option: string, value: string) => {\n      const proposedVariant = getSelectedVariant(variants, {\n        ...selectedOptions,\n        ...{[option]: value},\n      });\n\n      return proposedVariant?.availableForSale ?? true;\n    },\n    [selectedOptions, variants],\n  );\n\n  const sellingPlanGroups = useMemo(\n    () =>\n      flattenConnection(product.sellingPlanGroups ?? {}).map(\n        (sellingPlanGroup) => ({\n          ...sellingPlanGroup,\n          sellingPlans: flattenConnection(sellingPlanGroup?.sellingPlans ?? {}),\n        }),\n      ),\n    [product.sellingPlanGroups],\n  );\n\n  /**\n   * Track the selectedSellingPlan within the hook. If `initialSellingPlanId`\n   * is passed, use that as an initial value. Look it up from the `selectedVariant`, since\n   * that is also a requirement.\n   */\n  const [selectedSellingPlan, setSelectedSellingPlan] = useState<\n    PartialDeep<SellingPlan, {recurseIntoArrays: true}> | undefined\n  >(undefined);\n\n  const selectedSellingPlanAllocation = useMemo<\n    PartialDeep<SellingPlanAllocation, {recurseIntoArrays: true}> | undefined\n  >(() => {\n    if (!selectedVariant || !selectedSellingPlan) {\n      return;\n    }\n\n    if (\n      !selectedVariant.sellingPlanAllocations?.nodes &&\n      !selectedVariant.sellingPlanAllocations?.edges\n    ) {\n      throw new Error(\n        `<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`,\n      );\n    }\n\n    return flattenConnection(selectedVariant.sellingPlanAllocations).find(\n      (allocation) => allocation?.sellingPlan?.id === selectedSellingPlan.id,\n    );\n  }, [selectedVariant, selectedSellingPlan]);\n\n  const value = useMemo<ProductHookValue>(\n    () => ({\n      product,\n      variants,\n      variantsConnection: product.variants,\n      options,\n      selectedVariant,\n      setSelectedVariant,\n      selectedOptions,\n      setSelectedOption,\n      setSelectedOptions,\n      isOptionInStock,\n      selectedSellingPlan,\n      setSelectedSellingPlan,\n      selectedSellingPlanAllocation,\n      sellingPlanGroups,\n      sellingPlanGroupsConnection: product.sellingPlanGroups,\n    }),\n    [\n      product,\n      isOptionInStock,\n      options,\n      selectedOptions,\n      selectedSellingPlan,\n      selectedSellingPlanAllocation,\n      selectedVariant,\n      sellingPlanGroups,\n      setSelectedOption,\n      variants,\n    ],\n  );\n\n  return (\n    <ProductOptionsContext.Provider value={value}>\n      {children}\n    </ProductOptionsContext.Provider>\n  );\n}\n\n/**\n * Provides access to the context value provided by `<ProductProvider />`. Must be a descendent of `<ProductProvider />`.\n */\nexport function useProduct(): ProductHookValue {\n  const context = useContext(ProductOptionsContext);\n\n  if (!context) {\n    throw new Error(`'useProduct' must be a child of <ProductProvider />`);\n  }\n\n  return context;\n}\n\nfunction getSelectedVariant(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n  choices: SelectedOptions,\n): PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined {\n  /**\n   * Ensure the user has selected all the required options, not just some.\n   */\n  if (\n    !variants.length ||\n    variants?.[0]?.selectedOptions?.length !== Object.keys(choices).length\n  ) {\n    return;\n  }\n\n  return variants?.find((variant) => {\n    return Object.entries(choices).every(([name, value]) => {\n      return variant?.selectedOptions?.some(\n        (option) => option?.name === name && option?.value === value,\n      );\n    });\n  });\n}\n\nfunction getOptions(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n): OptionWithValues[] {\n  const map = variants.reduce(\n    (memo, variant) => {\n      if (!variant.selectedOptions) {\n        throw new Error(`'getOptions' requires 'variant.selectedOptions'`);\n      }\n      variant?.selectedOptions?.forEach((opt) => {\n        memo[opt?.name ?? ''] = memo[opt?.name ?? ''] || new Set();\n        memo[opt?.name ?? ''].add(opt?.value ?? '');\n      });\n\n      return memo;\n    },\n    {} as Record<string, Set<string>>,\n  );\n\n  return Object.keys(map).map((option) => {\n    return {\n      name: option,\n      values: Array.from(map[option]),\n    };\n  });\n}\n\nfunction getVariantBasedOnIdProp(\n  explicitVariantId: InitialVariantId | undefined,\n  variants: Array<\n    PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined\n  >,\n):\n  | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n  | undefined\n  | null {\n  // get the initial variant based on the logic outlined in the comments for 'initialVariantId' above\n  // * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n  if (explicitVariantId) {\n    const foundVariant = variants.find(\n      (variant) => variant?.id === explicitVariantId,\n    );\n    if (!foundVariant) {\n      console.warn(\n        `<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`,\n      );\n    }\n    return foundVariant;\n  }\n  // * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n  if (explicitVariantId === null) {\n    return null;\n  }\n  // * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n  // * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n  if (explicitVariantId === undefined) {\n    return variants.find((variant) => variant?.availableForSale) || variants[0];\n  }\n}\n\nfunction getSelectedOptions(\n  selectedVariant:\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null,\n): SelectedOptions {\n  return selectedVariant?.selectedOptions\n    ? selectedVariant.selectedOptions.reduce<SelectedOptions>(\n        (memo, optionSet) => {\n          memo[optionSet?.name ?? ''] = optionSet?.value ?? '';\n          return memo;\n        },\n        {},\n      )\n    : {};\n}\n\nfunction isProductVariantArray(\n  maybeVariantArray:\n    | (PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined)[]\n    | undefined,\n): maybeVariantArray is PartialDeep<\n  ProductVariantType,\n  {recurseIntoArrays: true}\n>[] {\n  if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {\n    return false;\n  }\n\n  return true;\n}\n\nexport interface OptionWithValues {\n  name: SelectedOptionType['name'];\n  values: SelectedOptionType['value'][];\n}\n\ntype UseProductObjects = {\n  /** The raw product from the Storefront API */\n  product: Product;\n  /** An array of the variant `nodes` from the `VariantConnection`. */\n  variants: ProductVariantType[];\n  variantsConnection?: ProductVariantConnection;\n  /** An array of the product's options and values. */\n  options: OptionWithValues[];\n  /** The selected variant. */\n  selectedVariant?: ProductVariantType | null;\n  selectedOptions: SelectedOptions;\n  /** The selected selling plan. */\n  selectedSellingPlan?: SellingPlanType;\n  /** The selected selling plan allocation. */\n  selectedSellingPlanAllocation?: SellingPlanAllocationType;\n  /** The selling plan groups. */\n  sellingPlanGroups?: (Omit<SellingPlanGroupType, 'sellingPlans'> & {\n    sellingPlans: SellingPlanType[];\n  })[];\n  sellingPlanGroupsConnection?: SellingPlanGroupConnection;\n};\n\ntype UseProductFunctions = {\n  /** A callback to set the selected variant to the variant passed as an argument. */\n  setSelectedVariant: (\n    variant: PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | null,\n  ) => void;\n  /** A callback to set the selected option. */\n  setSelectedOption: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value'],\n  ) => void;\n  /** A callback to set multiple selected options at once. */\n  setSelectedOptions: (options: SelectedOptions) => void;\n  /** A callback to set the selected selling plan to the one passed as an argument. */\n  setSelectedSellingPlan: (\n    sellingPlan: PartialDeep<SellingPlanType, {recurseIntoArrays: true}>,\n  ) => void;\n  /** A callback that returns a boolean indicating if the option is in stock. */\n  isOptionInStock: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value'],\n  ) => boolean;\n};\n\ntype ProductHookValue = PartialDeep<\n  UseProductObjects,\n  {recurseIntoArrays: true}\n> &\n  UseProductFunctions;\n\nexport type SelectedOptions = {\n  [key: string]: string;\n};\n"],"names":["createContext","useMemo","flattenConnection","useState","useEffect","useCallback","value","selectedOptions","_a","jsx","useContext"],"mappings":"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"}

package/dist/node-dev/ProductProvider.mjs

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useMemo, useState, useEffect, useCallback, useContext } from "react";
+import { useMemo, useState, useEffect, useCallback, createContext, useContext } from "react";
 import { flattenConnection } from "./flatten-connection.mjs";
 const ProductOptionsContext = createContext(null);
 function ProductProvider({
@@ -131,17 +131,20 @@ function getSelectedVariant(variants, choices) {
   });
 }
 function getOptions(variants) {
-  const map = variants.reduce((memo, variant) => {
-    var _a;
-    if (!variant.selectedOptions) {
-      throw new Error(`'getOptions' requires 'variant.selectedOptions'`);
-    }
-    (_a = variant == null ? void 0 : variant.selectedOptions) == null ? void 0 : _a.forEach((opt) => {
-      memo[(opt == null ? void 0 : opt.name) ?? ""] = memo[(opt == null ? void 0 : opt.name) ?? ""] || /* @__PURE__ */ new Set();
-      memo[(opt == null ? void 0 : opt.name) ?? ""].add((opt == null ? void 0 : opt.value) ?? "");
-    });
-    return memo;
-  }, {});
+  const map = variants.reduce(
+    (memo, variant) => {
+      var _a;
+      if (!variant.selectedOptions) {
+        throw new Error(`'getOptions' requires 'variant.selectedOptions'`);
+      }
+      (_a = variant == null ? void 0 : variant.selectedOptions) == null ? void 0 : _a.forEach((opt) => {
+        memo[(opt == null ? void 0 : opt.name) ?? ""] = memo[(opt == null ? void 0 : opt.name) ?? ""] || /* @__PURE__ */ new Set();
+        memo[(opt == null ? void 0 : opt.name) ?? ""].add((opt == null ? void 0 : opt.value) ?? "");
+      });
+      return memo;
+    },
+    {}
+  );
   return Object.keys(map).map((option) => {
     return {
       name: option,

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

@@ -1 +1 @@
-{"version":3,"file":"ProductProvider.mjs","sources":["../../src/ProductProvider.tsx"],"sourcesContent":["import {\n  useMemo,\n  useState,\n  useEffect,\n  useCallback,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  SelectedOption as SelectedOptionType,\n  SellingPlan,\n  SellingPlanAllocation,\n  Product,\n  ProductVariant as ProductVariantType,\n  ProductVariantConnection,\n  SellingPlan as SellingPlanType,\n  SellingPlanAllocation as SellingPlanAllocationType,\n  SellingPlanGroup as SellingPlanGroupType,\n  SellingPlanGroupConnection,\n} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nconst ProductOptionsContext = createContext<ProductHookValue | null>(null);\n\ntype InitialVariantId = ProductVariantType['id'] | null;\n\ninterface ProductProviderProps {\n  /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** A `ReactNode` element. */\n  children: React.ReactNode;\n  /**\n   * The initially selected variant.\n   * The following logic applies to `initialVariantId`:\n   * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n   * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n   * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n   * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n   */\n  initialVariantId?: InitialVariantId;\n}\n\n/**\n * `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook.\n *\n * It helps manage selected options and variants for a product.\n */\nexport function ProductProvider({\n  children,\n  data: product,\n  initialVariantId: explicitVariantId,\n}: ProductProviderProps): JSX.Element {\n  // The flattened variants\n  const variants = useMemo(\n    () => flattenConnection(product.variants ?? {}),\n    [product.variants],\n  );\n\n  if (!isProductVariantArray(variants)) {\n    throw new Error(\n      `<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`,\n    );\n  }\n\n  // All the options available for a product, based on all the variants\n  const options = useMemo(() => getOptions(variants), [variants]);\n\n  /**\n   * Track the selectedVariant within the provider.\n   */\n  const [selectedVariant, setSelectedVariant] = useState<\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null\n  >(() => getVariantBasedOnIdProp(explicitVariantId, variants));\n\n  /**\n   * Track the selectedOptions within the provider. If a `initialVariantId`\n   * is passed, use that to select initial options.\n   */\n  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>(() =>\n    getSelectedOptions(selectedVariant),\n  );\n\n  /**\n   * When the initialVariantId changes, we need to make sure we\n   * update the selected variant and selected options. If not,\n   * then the selected variant and options will reference incorrect\n   * values.\n   */\n  useEffect(() => {\n    const newSelectedVariant = getVariantBasedOnIdProp(\n      explicitVariantId,\n      variants,\n    );\n    setSelectedVariant(newSelectedVariant);\n    setSelectedOptions(getSelectedOptions(newSelectedVariant));\n  }, [explicitVariantId, variants]);\n\n  /**\n   * Allow the developer to select an option.\n   */\n  const setSelectedOption = useCallback(\n    (name: string, value: string) => {\n      setSelectedOptions((selectedOptions) => {\n        const opts = {...selectedOptions, [name]: value};\n        setSelectedVariant(getSelectedVariant(variants, opts));\n        return opts;\n      });\n    },\n    [setSelectedOptions, variants],\n  );\n\n  const isOptionInStock = useCallback(\n    (option: string, value: string) => {\n      const proposedVariant = getSelectedVariant(variants, {\n        ...selectedOptions,\n        ...{[option]: value},\n      });\n\n      return proposedVariant?.availableForSale ?? true;\n    },\n    [selectedOptions, variants],\n  );\n\n  const sellingPlanGroups = useMemo(\n    () =>\n      flattenConnection(product.sellingPlanGroups ?? {}).map(\n        (sellingPlanGroup) => ({\n          ...sellingPlanGroup,\n          sellingPlans: flattenConnection(sellingPlanGroup?.sellingPlans ?? {}),\n        }),\n      ),\n    [product.sellingPlanGroups],\n  );\n\n  /**\n   * Track the selectedSellingPlan within the hook. If `initialSellingPlanId`\n   * is passed, use that as an initial value. Look it up from the `selectedVariant`, since\n   * that is also a requirement.\n   */\n  const [selectedSellingPlan, setSelectedSellingPlan] = useState<\n    PartialDeep<SellingPlan, {recurseIntoArrays: true}> | undefined\n  >(undefined);\n\n  const selectedSellingPlanAllocation = useMemo<\n    PartialDeep<SellingPlanAllocation, {recurseIntoArrays: true}> | undefined\n  >(() => {\n    if (!selectedVariant || !selectedSellingPlan) {\n      return;\n    }\n\n    if (\n      !selectedVariant.sellingPlanAllocations?.nodes &&\n      !selectedVariant.sellingPlanAllocations?.edges\n    ) {\n      throw new Error(\n        `<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`,\n      );\n    }\n\n    return flattenConnection(selectedVariant.sellingPlanAllocations).find(\n      (allocation) => allocation?.sellingPlan?.id === selectedSellingPlan.id,\n    );\n  }, [selectedVariant, selectedSellingPlan]);\n\n  const value = useMemo<ProductHookValue>(\n    () => ({\n      product,\n      variants,\n      variantsConnection: product.variants,\n      options,\n      selectedVariant,\n      setSelectedVariant,\n      selectedOptions,\n      setSelectedOption,\n      setSelectedOptions,\n      isOptionInStock,\n      selectedSellingPlan,\n      setSelectedSellingPlan,\n      selectedSellingPlanAllocation,\n      sellingPlanGroups,\n      sellingPlanGroupsConnection: product.sellingPlanGroups,\n    }),\n    [\n      product,\n      isOptionInStock,\n      options,\n      selectedOptions,\n      selectedSellingPlan,\n      selectedSellingPlanAllocation,\n      selectedVariant,\n      sellingPlanGroups,\n      setSelectedOption,\n      variants,\n    ],\n  );\n\n  return (\n    <ProductOptionsContext.Provider value={value}>\n      {children}\n    </ProductOptionsContext.Provider>\n  );\n}\n\n/**\n * Provides access to the context value provided by `<ProductProvider />`. Must be a descendent of `<ProductProvider />`.\n */\nexport function useProduct(): ProductHookValue {\n  const context = useContext(ProductOptionsContext);\n\n  if (!context) {\n    throw new Error(`'useProduct' must be a child of <ProductProvider />`);\n  }\n\n  return context;\n}\n\nfunction getSelectedVariant(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n  choices: SelectedOptions,\n): PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined {\n  /**\n   * Ensure the user has selected all the required options, not just some.\n   */\n  if (\n    !variants.length ||\n    variants?.[0]?.selectedOptions?.length !== Object.keys(choices).length\n  ) {\n    return;\n  }\n\n  return variants?.find((variant) => {\n    return Object.entries(choices).every(([name, value]) => {\n      return variant?.selectedOptions?.some(\n        (option) => option?.name === name && option?.value === value,\n      );\n    });\n  });\n}\n\nfunction getOptions(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n): OptionWithValues[] {\n  const map = variants.reduce((memo, variant) => {\n    if (!variant.selectedOptions) {\n      throw new Error(`'getOptions' requires 'variant.selectedOptions'`);\n    }\n    variant?.selectedOptions?.forEach((opt) => {\n      memo[opt?.name ?? ''] = memo[opt?.name ?? ''] || new Set();\n      memo[opt?.name ?? ''].add(opt?.value ?? '');\n    });\n\n    return memo;\n  }, {} as Record<string, Set<string>>);\n\n  return Object.keys(map).map((option) => {\n    return {\n      name: option,\n      values: Array.from(map[option]),\n    };\n  });\n}\n\nfunction getVariantBasedOnIdProp(\n  explicitVariantId: InitialVariantId | undefined,\n  variants: Array<\n    PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined\n  >,\n):\n  | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n  | undefined\n  | null {\n  // get the initial variant based on the logic outlined in the comments for 'initialVariantId' above\n  // * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n  if (explicitVariantId) {\n    const foundVariant = variants.find(\n      (variant) => variant?.id === explicitVariantId,\n    );\n    if (!foundVariant) {\n      console.warn(\n        `<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`,\n      );\n    }\n    return foundVariant;\n  }\n  // * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n  if (explicitVariantId === null) {\n    return null;\n  }\n  // * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n  // * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n  if (explicitVariantId === undefined) {\n    return variants.find((variant) => variant?.availableForSale) || variants[0];\n  }\n}\n\nfunction getSelectedOptions(\n  selectedVariant:\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null,\n): SelectedOptions {\n  return selectedVariant?.selectedOptions\n    ? selectedVariant.selectedOptions.reduce<SelectedOptions>(\n        (memo, optionSet) => {\n          memo[optionSet?.name ?? ''] = optionSet?.value ?? '';\n          return memo;\n        },\n        {},\n      )\n    : {};\n}\n\nfunction isProductVariantArray(\n  maybeVariantArray:\n    | (PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined)[]\n    | undefined,\n): maybeVariantArray is PartialDeep<\n  ProductVariantType,\n  {recurseIntoArrays: true}\n>[] {\n  if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {\n    return false;\n  }\n\n  return true;\n}\n\nexport interface OptionWithValues {\n  name: SelectedOptionType['name'];\n  values: SelectedOptionType['value'][];\n}\n\ntype UseProductObjects = {\n  /** The raw product from the Storefront API */\n  product: Product;\n  /** An array of the variant `nodes` from the `VariantConnection`. */\n  variants: ProductVariantType[];\n  variantsConnection?: ProductVariantConnection;\n  /** An array of the product's options and values. */\n  options: OptionWithValues[];\n  /** The selected variant. */\n  selectedVariant?: ProductVariantType | null;\n  selectedOptions: SelectedOptions;\n  /** The selected selling plan. */\n  selectedSellingPlan?: SellingPlanType;\n  /** The selected selling plan allocation. */\n  selectedSellingPlanAllocation?: SellingPlanAllocationType;\n  /** The selling plan groups. */\n  sellingPlanGroups?: (Omit<SellingPlanGroupType, 'sellingPlans'> & {\n    sellingPlans: SellingPlanType[];\n  })[];\n  sellingPlanGroupsConnection?: SellingPlanGroupConnection;\n};\n\ntype UseProductFunctions = {\n  /** A callback to set the selected variant to the variant passed as an argument. */\n  setSelectedVariant: (\n    variant: PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | null,\n  ) => void;\n  /** A callback to set the selected option. */\n  setSelectedOption: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value'],\n  ) => void;\n  /** A callback to set multiple selected options at once. */\n  setSelectedOptions: (options: SelectedOptions) => void;\n  /** A callback to set the selected selling plan to the one passed as an argument. */\n  setSelectedSellingPlan: (\n    sellingPlan: PartialDeep<SellingPlanType, {recurseIntoArrays: true}>,\n  ) => void;\n  /** A callback that returns a boolean indicating if the option is in stock. */\n  isOptionInStock: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value'],\n  ) => boolean;\n};\n\ntype ProductHookValue = PartialDeep<\n  UseProductObjects,\n  {recurseIntoArrays: true}\n> &\n  UseProductFunctions;\n\nexport type SelectedOptions = {\n  [key: string]: string;\n};\n"],"names":["value","selectedOptions","_a"],"mappings":"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"}
+{"version":3,"file":"ProductProvider.mjs","sources":["../../src/ProductProvider.tsx"],"sourcesContent":["import {\n  useMemo,\n  useState,\n  useEffect,\n  useCallback,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  SelectedOption as SelectedOptionType,\n  SellingPlan,\n  SellingPlanAllocation,\n  Product,\n  ProductVariant as ProductVariantType,\n  ProductVariantConnection,\n  SellingPlan as SellingPlanType,\n  SellingPlanAllocation as SellingPlanAllocationType,\n  SellingPlanGroup as SellingPlanGroupType,\n  SellingPlanGroupConnection,\n} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nconst ProductOptionsContext = createContext<ProductHookValue | null>(null);\n\ntype InitialVariantId = ProductVariantType['id'] | null;\n\ninterface ProductProviderProps {\n  /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** A `ReactNode` element. */\n  children: React.ReactNode;\n  /**\n   * The initially selected variant.\n   * The following logic applies to `initialVariantId`:\n   * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n   * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n   * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n   * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n   */\n  initialVariantId?: InitialVariantId;\n}\n\n/**\n * `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook.\n *\n * It helps manage selected options and variants for a product.\n */\nexport function ProductProvider({\n  children,\n  data: product,\n  initialVariantId: explicitVariantId,\n}: ProductProviderProps): JSX.Element {\n  // The flattened variants\n  const variants = useMemo(\n    () => flattenConnection(product.variants ?? {}),\n    [product.variants],\n  );\n\n  if (!isProductVariantArray(variants)) {\n    throw new Error(\n      `<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`,\n    );\n  }\n\n  // All the options available for a product, based on all the variants\n  const options = useMemo(() => getOptions(variants), [variants]);\n\n  /**\n   * Track the selectedVariant within the provider.\n   */\n  const [selectedVariant, setSelectedVariant] = useState<\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null\n  >(() => getVariantBasedOnIdProp(explicitVariantId, variants));\n\n  /**\n   * Track the selectedOptions within the provider. If a `initialVariantId`\n   * is passed, use that to select initial options.\n   */\n  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>(() =>\n    getSelectedOptions(selectedVariant),\n  );\n\n  /**\n   * When the initialVariantId changes, we need to make sure we\n   * update the selected variant and selected options. If not,\n   * then the selected variant and options will reference incorrect\n   * values.\n   */\n  useEffect(() => {\n    const newSelectedVariant = getVariantBasedOnIdProp(\n      explicitVariantId,\n      variants,\n    );\n    setSelectedVariant(newSelectedVariant);\n    setSelectedOptions(getSelectedOptions(newSelectedVariant));\n  }, [explicitVariantId, variants]);\n\n  /**\n   * Allow the developer to select an option.\n   */\n  const setSelectedOption = useCallback(\n    (name: string, value: string) => {\n      setSelectedOptions((selectedOptions) => {\n        const opts = {...selectedOptions, [name]: value};\n        setSelectedVariant(getSelectedVariant(variants, opts));\n        return opts;\n      });\n    },\n    [setSelectedOptions, variants],\n  );\n\n  const isOptionInStock = useCallback(\n    (option: string, value: string) => {\n      const proposedVariant = getSelectedVariant(variants, {\n        ...selectedOptions,\n        ...{[option]: value},\n      });\n\n      return proposedVariant?.availableForSale ?? true;\n    },\n    [selectedOptions, variants],\n  );\n\n  const sellingPlanGroups = useMemo(\n    () =>\n      flattenConnection(product.sellingPlanGroups ?? {}).map(\n        (sellingPlanGroup) => ({\n          ...sellingPlanGroup,\n          sellingPlans: flattenConnection(sellingPlanGroup?.sellingPlans ?? {}),\n        }),\n      ),\n    [product.sellingPlanGroups],\n  );\n\n  /**\n   * Track the selectedSellingPlan within the hook. If `initialSellingPlanId`\n   * is passed, use that as an initial value. Look it up from the `selectedVariant`, since\n   * that is also a requirement.\n   */\n  const [selectedSellingPlan, setSelectedSellingPlan] = useState<\n    PartialDeep<SellingPlan, {recurseIntoArrays: true}> | undefined\n  >(undefined);\n\n  const selectedSellingPlanAllocation = useMemo<\n    PartialDeep<SellingPlanAllocation, {recurseIntoArrays: true}> | undefined\n  >(() => {\n    if (!selectedVariant || !selectedSellingPlan) {\n      return;\n    }\n\n    if (\n      !selectedVariant.sellingPlanAllocations?.nodes &&\n      !selectedVariant.sellingPlanAllocations?.edges\n    ) {\n      throw new Error(\n        `<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`,\n      );\n    }\n\n    return flattenConnection(selectedVariant.sellingPlanAllocations).find(\n      (allocation) => allocation?.sellingPlan?.id === selectedSellingPlan.id,\n    );\n  }, [selectedVariant, selectedSellingPlan]);\n\n  const value = useMemo<ProductHookValue>(\n    () => ({\n      product,\n      variants,\n      variantsConnection: product.variants,\n      options,\n      selectedVariant,\n      setSelectedVariant,\n      selectedOptions,\n      setSelectedOption,\n      setSelectedOptions,\n      isOptionInStock,\n      selectedSellingPlan,\n      setSelectedSellingPlan,\n      selectedSellingPlanAllocation,\n      sellingPlanGroups,\n      sellingPlanGroupsConnection: product.sellingPlanGroups,\n    }),\n    [\n      product,\n      isOptionInStock,\n      options,\n      selectedOptions,\n      selectedSellingPlan,\n      selectedSellingPlanAllocation,\n      selectedVariant,\n      sellingPlanGroups,\n      setSelectedOption,\n      variants,\n    ],\n  );\n\n  return (\n    <ProductOptionsContext.Provider value={value}>\n      {children}\n    </ProductOptionsContext.Provider>\n  );\n}\n\n/**\n * Provides access to the context value provided by `<ProductProvider />`. Must be a descendent of `<ProductProvider />`.\n */\nexport function useProduct(): ProductHookValue {\n  const context = useContext(ProductOptionsContext);\n\n  if (!context) {\n    throw new Error(`'useProduct' must be a child of <ProductProvider />`);\n  }\n\n  return context;\n}\n\nfunction getSelectedVariant(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n  choices: SelectedOptions,\n): PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined {\n  /**\n   * Ensure the user has selected all the required options, not just some.\n   */\n  if (\n    !variants.length ||\n    variants?.[0]?.selectedOptions?.length !== Object.keys(choices).length\n  ) {\n    return;\n  }\n\n  return variants?.find((variant) => {\n    return Object.entries(choices).every(([name, value]) => {\n      return variant?.selectedOptions?.some(\n        (option) => option?.name === name && option?.value === value,\n      );\n    });\n  });\n}\n\nfunction getOptions(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n): OptionWithValues[] {\n  const map = variants.reduce(\n    (memo, variant) => {\n      if (!variant.selectedOptions) {\n        throw new Error(`'getOptions' requires 'variant.selectedOptions'`);\n      }\n      variant?.selectedOptions?.forEach((opt) => {\n        memo[opt?.name ?? ''] = memo[opt?.name ?? ''] || new Set();\n        memo[opt?.name ?? ''].add(opt?.value ?? '');\n      });\n\n      return memo;\n    },\n    {} as Record<string, Set<string>>,\n  );\n\n  return Object.keys(map).map((option) => {\n    return {\n      name: option,\n      values: Array.from(map[option]),\n    };\n  });\n}\n\nfunction getVariantBasedOnIdProp(\n  explicitVariantId: InitialVariantId | undefined,\n  variants: Array<\n    PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined\n  >,\n):\n  | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n  | undefined\n  | null {\n  // get the initial variant based on the logic outlined in the comments for 'initialVariantId' above\n  // * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n  if (explicitVariantId) {\n    const foundVariant = variants.find(\n      (variant) => variant?.id === explicitVariantId,\n    );\n    if (!foundVariant) {\n      console.warn(\n        `<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`,\n      );\n    }\n    return foundVariant;\n  }\n  // * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n  if (explicitVariantId === null) {\n    return null;\n  }\n  // * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n  // * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n  if (explicitVariantId === undefined) {\n    return variants.find((variant) => variant?.availableForSale) || variants[0];\n  }\n}\n\nfunction getSelectedOptions(\n  selectedVariant:\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null,\n): SelectedOptions {\n  return selectedVariant?.selectedOptions\n    ? selectedVariant.selectedOptions.reduce<SelectedOptions>(\n        (memo, optionSet) => {\n          memo[optionSet?.name ?? ''] = optionSet?.value ?? '';\n          return memo;\n        },\n        {},\n      )\n    : {};\n}\n\nfunction isProductVariantArray(\n  maybeVariantArray:\n    | (PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined)[]\n    | undefined,\n): maybeVariantArray is PartialDeep<\n  ProductVariantType,\n  {recurseIntoArrays: true}\n>[] {\n  if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {\n    return false;\n  }\n\n  return true;\n}\n\nexport interface OptionWithValues {\n  name: SelectedOptionType['name'];\n  values: SelectedOptionType['value'][];\n}\n\ntype UseProductObjects = {\n  /** The raw product from the Storefront API */\n  product: Product;\n  /** An array of the variant `nodes` from the `VariantConnection`. */\n  variants: ProductVariantType[];\n  variantsConnection?: ProductVariantConnection;\n  /** An array of the product's options and values. */\n  options: OptionWithValues[];\n  /** The selected variant. */\n  selectedVariant?: ProductVariantType | null;\n  selectedOptions: SelectedOptions;\n  /** The selected selling plan. */\n  selectedSellingPlan?: SellingPlanType;\n  /** The selected selling plan allocation. */\n  selectedSellingPlanAllocation?: SellingPlanAllocationType;\n  /** The selling plan groups. */\n  sellingPlanGroups?: (Omit<SellingPlanGroupType, 'sellingPlans'> & {\n    sellingPlans: SellingPlanType[];\n  })[];\n  sellingPlanGroupsConnection?: SellingPlanGroupConnection;\n};\n\ntype UseProductFunctions = {\n  /** A callback to set the selected variant to the variant passed as an argument. */\n  setSelectedVariant: (\n    variant: PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | null,\n  ) => void;\n  /** A callback to set the selected option. */\n  setSelectedOption: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value'],\n  ) => void;\n  /** A callback to set multiple selected options at once. */\n  setSelectedOptions: (options: SelectedOptions) => void;\n  /** A callback to set the selected selling plan to the one passed as an argument. */\n  setSelectedSellingPlan: (\n    sellingPlan: PartialDeep<SellingPlanType, {recurseIntoArrays: true}>,\n  ) => void;\n  /** A callback that returns a boolean indicating if the option is in stock. */\n  isOptionInStock: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value'],\n  ) => boolean;\n};\n\ntype ProductHookValue = PartialDeep<\n  UseProductObjects,\n  {recurseIntoArrays: true}\n> &\n  UseProductFunctions;\n\nexport type SelectedOptions = {\n  [key: string]: string;\n};\n"],"names":["value","selectedOptions","_a"],"mappings":";;;AAuBA,MAAM,wBAAwB,cAAuC,IAAI;AAyBlE,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,MAAM;AAAA,EACN,kBAAkB;AACpB,GAAsC;AAEpC,QAAM,WAAW;AAAA,IACf,MAAM,kBAAkB,QAAQ,YAAY,EAAE;AAAA,IAC9C,CAAC,QAAQ,QAAQ;AAAA,EACnB;AAEI,MAAA,CAAC,sBAAsB,QAAQ,GAAG;AACpC,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EAAA;AAII,QAAA,UAAU,QAAQ,MAAM,WAAW,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAKxD,QAAA,CAAC,iBAAiB,kBAAkB,IAAI,SAI5C,MAAM,wBAAwB,mBAAmB,QAAQ,CAAC;AAMtD,QAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAA0B,MACtE,mBAAmB,eAAe;AAAA,EACpC;AAQA,YAAU,MAAM;AACd,UAAM,qBAAqB;AAAA,MACzB;AAAA,MACA;AAAA,IACF;AACA,uBAAmB,kBAAkB;AAClB,uBAAA,mBAAmB,kBAAkB,CAAC;AAAA,EAAA,GACxD,CAAC,mBAAmB,QAAQ,CAAC;AAKhC,QAAM,oBAAoB;AAAA,IACxB,CAAC,MAAcA,WAAkB;AAC/B,yBAAmB,CAACC,qBAAoB;AACtC,cAAM,OAAO,EAAC,GAAGA,kBAAiB,CAAC,IAAI,GAAGD,OAAK;AAC5B,2BAAA,mBAAmB,UAAU,IAAI,CAAC;AAC9C,eAAA;AAAA,MAAA,CACR;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,QAAQ;AAAA,EAC/B;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,QAAgBA,WAAkB;AAC3B,YAAA,kBAAkB,mBAAmB,UAAU;AAAA,QACnD,GAAG;AAAA,QACH,GAAG,EAAC,CAAC,MAAM,GAAGA,OAAK;AAAA,MAAA,CACpB;AAED,cAAO,mDAAiB,qBAAoB;AAAA,IAC9C;AAAA,IACA,CAAC,iBAAiB,QAAQ;AAAA,EAC5B;AAEA,QAAM,oBAAoB;AAAA,IACxB,MACE,kBAAkB,QAAQ,qBAAqB,CAAA,CAAE,EAAE;AAAA,MACjD,CAAC,sBAAsB;AAAA,QACrB,GAAG;AAAA,QACH,cAAc,mBAAkB,qDAAkB,iBAAgB,CAAE,CAAA;AAAA,MACtE;AAAA,IACF;AAAA,IACF,CAAC,QAAQ,iBAAiB;AAAA,EAC5B;AAOA,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAEpD,MAAS;AAEL,QAAA,gCAAgC,QAEpC,MAAM;;AACF,QAAA,CAAC,mBAAmB,CAAC,qBAAqB;AAC5C;AAAA,IAAA;AAGF,QACE,GAAC,qBAAgB,2BAAhB,mBAAwC,UACzC,GAAC,qBAAgB,2BAAhB,mBAAwC,QACzC;AACA,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAGK,WAAA,kBAAkB,gBAAgB,sBAAsB,EAAE;AAAA,MAC/D,CAAC,eAAA;;AAAe,iBAAAE,MAAA,yCAAY,gBAAZ,gBAAAA,IAAyB,QAAO,oBAAoB;AAAA;AAAA,IACtE;AAAA,EAAA,GACC,CAAC,iBAAiB,mBAAmB,CAAC;AAEzC,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,oBAAoB,QAAQ;AAAA,MAC5B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,6BAA6B,QAAQ;AAAA,IAAA;AAAA,IAEvC;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEA,SACG,oBAAA,sBAAsB,UAAtB,EAA+B,OAC7B,SACH,CAAA;AAEJ;AAKO,SAAS,aAA+B;AACvC,QAAA,UAAU,WAAW,qBAAqB;AAEhD,MAAI,CAAC,SAAS;AACN,UAAA,IAAI,MAAM,qDAAqD;AAAA,EAAA;AAGhE,SAAA;AACT;AAEA,SAAS,mBACP,UACA,SACwE;;AAIxE,MACE,CAAC,SAAS,YACV,gDAAW,OAAX,mBAAe,oBAAf,mBAAgC,YAAW,OAAO,KAAK,OAAO,EAAE,QAChE;AACA;AAAA,EAAA;AAGK,SAAA,qCAAU,KAAK,CAAC,YAAY;AAC1B,WAAA,OAAO,QAAQ,OAAO,EAAE,MAAM,CAAC,CAAC,MAAM,KAAK,MAAM;;AACtD,cAAOA,MAAA,mCAAS,oBAAT,gBAAAA,IAA0B;AAAA,QAC/B,CAAC,YAAW,iCAAQ,UAAS,SAAQ,iCAAQ,WAAU;AAAA;AAAA,IACzD,CACD;AAAA,EAAA;AAEL;AAEA,SAAS,WACP,UACoB;AACpB,QAAM,MAAM,SAAS;AAAA,IACnB,CAAC,MAAM,YAAY;;AACb,UAAA,CAAC,QAAQ,iBAAiB;AACtB,cAAA,IAAI,MAAM,iDAAiD;AAAA,MAAA;AAE1D,+CAAA,oBAAA,mBAAiB,QAAQ,CAAC,QAAQ;AACpC,cAAA,2BAAK,SAAQ,EAAE,IAAI,MAAK,2BAAK,SAAQ,EAAE,KAAK,oBAAI,IAAI;AACzD,cAAK,2BAAK,SAAQ,EAAE,EAAE,KAAI,2BAAK,UAAS,EAAE;AAAA,MAAA;AAGrC,aAAA;AAAA,IACT;AAAA,IACA,CAAA;AAAA,EACF;AAEA,SAAO,OAAO,KAAK,GAAG,EAAE,IAAI,CAAC,WAAW;AAC/B,WAAA;AAAA,MACL,MAAM;AAAA,MACN,QAAQ,MAAM,KAAK,IAAI,MAAM,CAAC;AAAA,IAChC;AAAA,EAAA,CACD;AACH;AAEA,SAAS,wBACP,mBACA,UAMO;AAGP,MAAI,mBAAmB;AACrB,UAAM,eAAe,SAAS;AAAA,MAC5B,CAAC,aAAY,mCAAS,QAAO;AAAA,IAC/B;AACA,QAAI,CAAC,cAAc;AACT,cAAA;AAAA,QACN;AAAA,MACF;AAAA,IAAA;AAEK,WAAA;AAAA,EAAA;AAGT,MAAI,sBAAsB,MAAM;AACvB,WAAA;AAAA,EAAA;AAIT,MAAI,sBAAsB,QAAW;AAC5B,WAAA,SAAS,KAAK,CAAC,YAAY,mCAAS,gBAAgB,KAAK,SAAS,CAAC;AAAA,EAAA;AAE9E;AAEA,SAAS,mBACP,iBAIiB;AACV,UAAA,mDAAiB,mBACpB,gBAAgB,gBAAgB;AAAA,IAC9B,CAAC,MAAM,cAAc;AACnB,YAAK,uCAAW,SAAQ,EAAE,KAAI,uCAAW,UAAS;AAC3C,aAAA;AAAA,IACT;AAAA,IACA,CAAA;AAAA,EAAC,IAEH,CAAC;AACP;AAEA,SAAS,sBACP,mBAME;AACF,MAAI,CAAC,qBAAqB,CAAC,MAAM,QAAQ,iBAAiB,GAAG;AACpD,WAAA;AAAA,EAAA;AAGF,SAAA;AACT;"}

package/dist/node-dev/RichText.components.js

@@ -31,10 +31,8 @@ function Text({
 }) {
   if (node.bold && node.italic)
     return /* @__PURE__ */ jsxRuntime.jsx("em", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: node.value }) });
-  if (node.bold)
-    return /* @__PURE__ */ jsxRuntime.jsx("strong", { children: node.value });
-  if (node.italic)
-    return /* @__PURE__ */ jsxRuntime.jsx("em", { children: node.value });
+  if (node.bold) return /* @__PURE__ */ jsxRuntime.jsx("strong", { children: node.value });
+  if (node.italic) return /* @__PURE__ */ jsxRuntime.jsx("em", { children: node.value });
   return node.value;
 }
 function RichTextLink({

package/dist/node-dev/RichText.components.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.components.js","sources":["../../src/RichText.components.tsx"],"sourcesContent":["import {createElement, type ReactNode} from 'react';\n\nexport type CustomComponents = {\n  /** The root node of the rich text. Defaults to `<div>` */\n  root?: typeof Root;\n  /** Customize the headings. Each heading has a `level` property from 1-6. Defaults to `<h1>` to `<h6>` */\n  heading?: typeof Heading;\n  /** Customize paragraphs. Defaults to `<p>` */\n  paragraph?: typeof Paragraph;\n  /** Customize how text nodes. They can either be bold or italic. Defaults to `<em>`, `<strong>` or text. */\n  text?: typeof Text;\n  /** Customize links. Defaults to a React Router `<Link>` component in Hydrogen and a `<a>` in Hydrogen React. */\n  link?: typeof RichTextLink;\n  /** Customize lists. They can be either ordered or unordered. Defaults to `<ol>` or `<ul>` */\n  list?: typeof List;\n  /** Customize list items. Defaults to `<li>`. */\n  listItem?: typeof ListItem;\n};\n\nexport const RichTextComponents = {\n  root: Root,\n  heading: Heading,\n  paragraph: Paragraph,\n  text: Text,\n  link: RichTextLink,\n  list: List,\n  'list-item': ListItem,\n};\n\nfunction Root({\n  node,\n}: {\n  node: {\n    type: 'root';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <div>{node.children}</div>;\n}\n\nfunction Heading({\n  node,\n}: {\n  node: {\n    type: 'heading';\n    level: number;\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return createElement(`h${node.level ?? '1'}`, null, node.children);\n}\n\nfunction Paragraph({\n  node,\n}: {\n  node: {\n    type: 'paragraph';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <p>{node.children}</p>;\n}\n\nfunction Text({\n  node,\n}: {\n  node: {\n    type: 'text';\n    italic?: boolean;\n    bold?: boolean;\n    value?: string;\n  };\n}): ReactNode {\n  if (node.bold && node.italic)\n    return (\n      <em>\n        <strong>{node.value}</strong>\n      </em>\n    );\n\n  if (node.bold) return <strong>{node.value}</strong>;\n  if (node.italic) return <em>{node.value}</em>;\n\n  return node.value;\n}\n\nfunction RichTextLink({\n  node,\n}: {\n  node: {\n    type: 'link';\n    url: string;\n    title?: string;\n    target?: string;\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return (\n    <a href={node.url} title={node.title} target={node.target}>\n      {node.children}\n    </a>\n  );\n}\n\nfunction List({\n  node,\n}: {\n  node: {\n    type: 'list';\n    listType: 'unordered' | 'ordered';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  const List = node.listType === 'unordered' ? 'ul' : 'ol';\n  return <List>{node.children}</List>;\n}\n\nfunction ListItem({\n  node,\n}: {\n  node: {\n    type: 'list-item';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <li>{node.children}</li>;\n}\n"],"names":["jsx","createElement","List"],"mappings":";;;;AAmBO,MAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aAAa;AACf;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAKc;AACL,SAAAA,2BAAAA,IAAC,OAAK,EAAA,UAAA,KAAK,SAAS,CAAA;AAC7B;AAEA,SAAS,QAAQ;AAAA,EACf;AACF,GAMc;AACL,SAAAC,oBAAc,IAAI,KAAK,SAAS,GAAG,IAAI,MAAM,KAAK,QAAQ;AACnE;AAEA,SAAS,UAAU;AAAA,EACjB;AACF,GAKc;AACL,SAAAD,2BAAAA,IAAC,KAAG,EAAA,UAAA,KAAK,SAAS,CAAA;AAC3B;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAOc;AACR,MAAA,KAAK,QAAQ,KAAK;AACpB,0CACG,MACC,EAAA,UAAAA,2BAAAA,IAAC,UAAQ,EAAA,UAAA,KAAK,MAAM,CAAA,EACtB,CAAA;AAGJ,MAAI,KAAK;AAAa,WAAAA,2BAAAA,IAAC,UAAQ,EAAA,UAAA,KAAK,MAAM,CAAA;AAC1C,MAAI,KAAK;AAAe,WAAAA,2BAAAA,IAAC,MAAI,EAAA,UAAA,KAAK,MAAM,CAAA;AAExC,SAAO,KAAK;AACd;AAEA,SAAS,aAAa;AAAA,EACpB;AACF,GAQc;AACZ,SACGA,2BAAAA,IAAA,KAAA,EAAE,MAAM,KAAK,KAAK,OAAO,KAAK,OAAO,QAAQ,KAAK,QAChD,UAAA,KAAK,SACR,CAAA;AAEJ;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAMc;AACZ,QAAME,QAAO,KAAK,aAAa,cAAc,OAAO;AACpD,SAAQA,2BAAAA,IAAAA,OAAA,EAAM,UAAA,KAAK,SAAS,CAAA;AAC9B;AAEA,SAAS,SAAS;AAAA,EAChB;AACF,GAKc;AACL,SAAAF,2BAAAA,IAAC,MAAI,EAAA,UAAA,KAAK,SAAS,CAAA;AAC5B;;"}
+{"version":3,"file":"RichText.components.js","sources":["../../src/RichText.components.tsx"],"sourcesContent":["import {createElement, type ReactNode} from 'react';\n\nexport type CustomComponents = {\n  /** The root node of the rich text. Defaults to `<div>` */\n  root?: typeof Root;\n  /** Customize the headings. Each heading has a `level` property from 1-6. Defaults to `<h1>` to `<h6>` */\n  heading?: typeof Heading;\n  /** Customize paragraphs. Defaults to `<p>` */\n  paragraph?: typeof Paragraph;\n  /** Customize how text nodes. They can either be bold or italic. Defaults to `<em>`, `<strong>` or text. */\n  text?: typeof Text;\n  /** Customize links. Defaults to a React Router `<Link>` component in Hydrogen and a `<a>` in Hydrogen React. */\n  link?: typeof RichTextLink;\n  /** Customize lists. They can be either ordered or unordered. Defaults to `<ol>` or `<ul>` */\n  list?: typeof List;\n  /** Customize list items. Defaults to `<li>`. */\n  listItem?: typeof ListItem;\n};\n\nexport const RichTextComponents = {\n  root: Root,\n  heading: Heading,\n  paragraph: Paragraph,\n  text: Text,\n  link: RichTextLink,\n  list: List,\n  'list-item': ListItem,\n};\n\nfunction Root({\n  node,\n}: {\n  node: {\n    type: 'root';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <div>{node.children}</div>;\n}\n\nfunction Heading({\n  node,\n}: {\n  node: {\n    type: 'heading';\n    level: number;\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return createElement(`h${node.level ?? '1'}`, null, node.children);\n}\n\nfunction Paragraph({\n  node,\n}: {\n  node: {\n    type: 'paragraph';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <p>{node.children}</p>;\n}\n\nfunction Text({\n  node,\n}: {\n  node: {\n    type: 'text';\n    italic?: boolean;\n    bold?: boolean;\n    value?: string;\n  };\n}): ReactNode {\n  if (node.bold && node.italic)\n    return (\n      <em>\n        <strong>{node.value}</strong>\n      </em>\n    );\n\n  if (node.bold) return <strong>{node.value}</strong>;\n  if (node.italic) return <em>{node.value}</em>;\n\n  return node.value;\n}\n\nfunction RichTextLink({\n  node,\n}: {\n  node: {\n    type: 'link';\n    url: string;\n    title?: string;\n    target?: string;\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return (\n    <a href={node.url} title={node.title} target={node.target}>\n      {node.children}\n    </a>\n  );\n}\n\nfunction List({\n  node,\n}: {\n  node: {\n    type: 'list';\n    listType: 'unordered' | 'ordered';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  const List = node.listType === 'unordered' ? 'ul' : 'ol';\n  return <List>{node.children}</List>;\n}\n\nfunction ListItem({\n  node,\n}: {\n  node: {\n    type: 'list-item';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <li>{node.children}</li>;\n}\n"],"names":["jsx","createElement","List"],"mappings":";;;;AAmBO,MAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aAAa;AACf;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAKc;AACL,SAAAA,2BAAAA,IAAC,OAAK,EAAA,UAAA,KAAK,SAAS,CAAA;AAC7B;AAEA,SAAS,QAAQ;AAAA,EACf;AACF,GAMc;AACL,SAAAC,MAAA,cAAc,IAAI,KAAK,SAAS,GAAG,IAAI,MAAM,KAAK,QAAQ;AACnE;AAEA,SAAS,UAAU;AAAA,EACjB;AACF,GAKc;AACL,SAAAD,2BAAAA,IAAC,KAAG,EAAA,UAAA,KAAK,SAAS,CAAA;AAC3B;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAOc;AACR,MAAA,KAAK,QAAQ,KAAK;AACpB,0CACG,MACC,EAAA,UAAAA,2BAAA,IAAC,UAAQ,EAAA,UAAA,KAAK,OAAM,EACtB,CAAA;AAGJ,MAAI,KAAK,KAAM,QAAQA,2BAAA,IAAA,UAAA,EAAQ,eAAK,OAAM;AAC1C,MAAI,KAAK,OAAQ,QAAQA,2BAAA,IAAA,MAAA,EAAI,eAAK,OAAM;AAExC,SAAO,KAAK;AACd;AAEA,SAAS,aAAa;AAAA,EACpB;AACF,GAQc;AACZ,SACGA,2BAAAA,IAAA,KAAA,EAAE,MAAM,KAAK,KAAK,OAAO,KAAK,OAAO,QAAQ,KAAK,QAChD,UAAA,KAAK,UACR;AAEJ;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAMc;AACZ,QAAME,QAAO,KAAK,aAAa,cAAc,OAAO;AACpD,SAAQA,2BAAAA,IAAAA,OAAA,EAAM,UAAA,KAAK,SAAS,CAAA;AAC9B;AAEA,SAAS,SAAS;AAAA,EAChB;AACF,GAKc;AACL,SAAAF,2BAAAA,IAAC,MAAI,EAAA,UAAA,KAAK,SAAS,CAAA;AAC5B;;"}

package/dist/node-dev/RichText.components.mjs

@@ -29,10 +29,8 @@ function Text({
 }) {
   if (node.bold && node.italic)
     return /* @__PURE__ */ jsx("em", { children: /* @__PURE__ */ jsx("strong", { children: node.value }) });
-  if (node.bold)
-    return /* @__PURE__ */ jsx("strong", { children: node.value });
-  if (node.italic)
-    return /* @__PURE__ */ jsx("em", { children: node.value });
+  if (node.bold) return /* @__PURE__ */ jsx("strong", { children: node.value });
+  if (node.italic) return /* @__PURE__ */ jsx("em", { children: node.value });
   return node.value;
 }
 function RichTextLink({

package/dist/node-dev/RichText.components.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.components.mjs","sources":["../../src/RichText.components.tsx"],"sourcesContent":["import {createElement, type ReactNode} from 'react';\n\nexport type CustomComponents = {\n  /** The root node of the rich text. Defaults to `<div>` */\n  root?: typeof Root;\n  /** Customize the headings. Each heading has a `level` property from 1-6. Defaults to `<h1>` to `<h6>` */\n  heading?: typeof Heading;\n  /** Customize paragraphs. Defaults to `<p>` */\n  paragraph?: typeof Paragraph;\n  /** Customize how text nodes. They can either be bold or italic. Defaults to `<em>`, `<strong>` or text. */\n  text?: typeof Text;\n  /** Customize links. Defaults to a React Router `<Link>` component in Hydrogen and a `<a>` in Hydrogen React. */\n  link?: typeof RichTextLink;\n  /** Customize lists. They can be either ordered or unordered. Defaults to `<ol>` or `<ul>` */\n  list?: typeof List;\n  /** Customize list items. Defaults to `<li>`. */\n  listItem?: typeof ListItem;\n};\n\nexport const RichTextComponents = {\n  root: Root,\n  heading: Heading,\n  paragraph: Paragraph,\n  text: Text,\n  link: RichTextLink,\n  list: List,\n  'list-item': ListItem,\n};\n\nfunction Root({\n  node,\n}: {\n  node: {\n    type: 'root';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <div>{node.children}</div>;\n}\n\nfunction Heading({\n  node,\n}: {\n  node: {\n    type: 'heading';\n    level: number;\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return createElement(`h${node.level ?? '1'}`, null, node.children);\n}\n\nfunction Paragraph({\n  node,\n}: {\n  node: {\n    type: 'paragraph';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <p>{node.children}</p>;\n}\n\nfunction Text({\n  node,\n}: {\n  node: {\n    type: 'text';\n    italic?: boolean;\n    bold?: boolean;\n    value?: string;\n  };\n}): ReactNode {\n  if (node.bold && node.italic)\n    return (\n      <em>\n        <strong>{node.value}</strong>\n      </em>\n    );\n\n  if (node.bold) return <strong>{node.value}</strong>;\n  if (node.italic) return <em>{node.value}</em>;\n\n  return node.value;\n}\n\nfunction RichTextLink({\n  node,\n}: {\n  node: {\n    type: 'link';\n    url: string;\n    title?: string;\n    target?: string;\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return (\n    <a href={node.url} title={node.title} target={node.target}>\n      {node.children}\n    </a>\n  );\n}\n\nfunction List({\n  node,\n}: {\n  node: {\n    type: 'list';\n    listType: 'unordered' | 'ordered';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  const List = node.listType === 'unordered' ? 'ul' : 'ol';\n  return <List>{node.children}</List>;\n}\n\nfunction ListItem({\n  node,\n}: {\n  node: {\n    type: 'list-item';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <li>{node.children}</li>;\n}\n"],"names":["List"],"mappings":";;AAmBO,MAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aAAa;AACf;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAKc;AACL,SAAA,oBAAC,OAAK,EAAA,UAAA,KAAK,SAAS,CAAA;AAC7B;AAEA,SAAS,QAAQ;AAAA,EACf;AACF,GAMc;AACL,SAAA,cAAc,IAAI,KAAK,SAAS,GAAG,IAAI,MAAM,KAAK,QAAQ;AACnE;AAEA,SAAS,UAAU;AAAA,EACjB;AACF,GAKc;AACL,SAAA,oBAAC,KAAG,EAAA,UAAA,KAAK,SAAS,CAAA;AAC3B;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAOc;AACR,MAAA,KAAK,QAAQ,KAAK;AACpB,+BACG,MACC,EAAA,UAAA,oBAAC,UAAQ,EAAA,UAAA,KAAK,MAAM,CAAA,EACtB,CAAA;AAGJ,MAAI,KAAK;AAAa,WAAA,oBAAC,UAAQ,EAAA,UAAA,KAAK,MAAM,CAAA;AAC1C,MAAI,KAAK;AAAe,WAAA,oBAAC,MAAI,EAAA,UAAA,KAAK,MAAM,CAAA;AAExC,SAAO,KAAK;AACd;AAEA,SAAS,aAAa;AAAA,EACpB;AACF,GAQc;AACZ,SACG,oBAAA,KAAA,EAAE,MAAM,KAAK,KAAK,OAAO,KAAK,OAAO,QAAQ,KAAK,QAChD,UAAA,KAAK,SACR,CAAA;AAEJ;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAMc;AACZ,QAAMA,QAAO,KAAK,aAAa,cAAc,OAAO;AACpD,SAAQA,oBAAAA,OAAA,EAAM,UAAA,KAAK,SAAS,CAAA;AAC9B;AAEA,SAAS,SAAS;AAAA,EAChB;AACF,GAKc;AACL,SAAA,oBAAC,MAAI,EAAA,UAAA,KAAK,SAAS,CAAA;AAC5B;"}
+{"version":3,"file":"RichText.components.mjs","sources":["../../src/RichText.components.tsx"],"sourcesContent":["import {createElement, type ReactNode} from 'react';\n\nexport type CustomComponents = {\n  /** The root node of the rich text. Defaults to `<div>` */\n  root?: typeof Root;\n  /** Customize the headings. Each heading has a `level` property from 1-6. Defaults to `<h1>` to `<h6>` */\n  heading?: typeof Heading;\n  /** Customize paragraphs. Defaults to `<p>` */\n  paragraph?: typeof Paragraph;\n  /** Customize how text nodes. They can either be bold or italic. Defaults to `<em>`, `<strong>` or text. */\n  text?: typeof Text;\n  /** Customize links. Defaults to a React Router `<Link>` component in Hydrogen and a `<a>` in Hydrogen React. */\n  link?: typeof RichTextLink;\n  /** Customize lists. They can be either ordered or unordered. Defaults to `<ol>` or `<ul>` */\n  list?: typeof List;\n  /** Customize list items. Defaults to `<li>`. */\n  listItem?: typeof ListItem;\n};\n\nexport const RichTextComponents = {\n  root: Root,\n  heading: Heading,\n  paragraph: Paragraph,\n  text: Text,\n  link: RichTextLink,\n  list: List,\n  'list-item': ListItem,\n};\n\nfunction Root({\n  node,\n}: {\n  node: {\n    type: 'root';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <div>{node.children}</div>;\n}\n\nfunction Heading({\n  node,\n}: {\n  node: {\n    type: 'heading';\n    level: number;\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return createElement(`h${node.level ?? '1'}`, null, node.children);\n}\n\nfunction Paragraph({\n  node,\n}: {\n  node: {\n    type: 'paragraph';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <p>{node.children}</p>;\n}\n\nfunction Text({\n  node,\n}: {\n  node: {\n    type: 'text';\n    italic?: boolean;\n    bold?: boolean;\n    value?: string;\n  };\n}): ReactNode {\n  if (node.bold && node.italic)\n    return (\n      <em>\n        <strong>{node.value}</strong>\n      </em>\n    );\n\n  if (node.bold) return <strong>{node.value}</strong>;\n  if (node.italic) return <em>{node.value}</em>;\n\n  return node.value;\n}\n\nfunction RichTextLink({\n  node,\n}: {\n  node: {\n    type: 'link';\n    url: string;\n    title?: string;\n    target?: string;\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return (\n    <a href={node.url} title={node.title} target={node.target}>\n      {node.children}\n    </a>\n  );\n}\n\nfunction List({\n  node,\n}: {\n  node: {\n    type: 'list';\n    listType: 'unordered' | 'ordered';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  const List = node.listType === 'unordered' ? 'ul' : 'ol';\n  return <List>{node.children}</List>;\n}\n\nfunction ListItem({\n  node,\n}: {\n  node: {\n    type: 'list-item';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <li>{node.children}</li>;\n}\n"],"names":["List"],"mappings":";;AAmBO,MAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aAAa;AACf;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAKc;AACL,SAAA,oBAAC,OAAK,EAAA,UAAA,KAAK,SAAS,CAAA;AAC7B;AAEA,SAAS,QAAQ;AAAA,EACf;AACF,GAMc;AACL,SAAA,cAAc,IAAI,KAAK,SAAS,GAAG,IAAI,MAAM,KAAK,QAAQ;AACnE;AAEA,SAAS,UAAU;AAAA,EACjB;AACF,GAKc;AACL,SAAA,oBAAC,KAAG,EAAA,UAAA,KAAK,SAAS,CAAA;AAC3B;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAOc;AACR,MAAA,KAAK,QAAQ,KAAK;AACpB,+BACG,MACC,EAAA,UAAA,oBAAC,UAAQ,EAAA,UAAA,KAAK,OAAM,EACtB,CAAA;AAGJ,MAAI,KAAK,KAAM,QAAQ,oBAAA,UAAA,EAAQ,eAAK,OAAM;AAC1C,MAAI,KAAK,OAAQ,QAAQ,oBAAA,MAAA,EAAI,eAAK,OAAM;AAExC,SAAO,KAAK;AACd;AAEA,SAAS,aAAa;AAAA,EACpB;AACF,GAQc;AACZ,SACG,oBAAA,KAAA,EAAE,MAAM,KAAK,KAAK,OAAO,KAAK,OAAO,QAAQ,KAAK,QAChD,UAAA,KAAK,UACR;AAEJ;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAMc;AACZ,QAAMA,QAAO,KAAK,aAAa,cAAc,OAAO;AACpD,SAAQA,oBAAAA,OAAA,EAAM,UAAA,KAAK,SAAS,CAAA;AAC9B;AAEA,SAAS,SAAS;AAAA,EAChB;AACF,GAKc;AACL,SAAA,oBAAC,MAAI,EAAA,UAAA,KAAK,SAAS,CAAA;AAC5B;"}