@shopify/hydrogen-react 2022.7.0

package/dist/umd/hydrogen-react.dev.js

@@ -0,0 +1,1472 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react")) : typeof define === "function" && define.amd ? define(["exports", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.hydrogenreact = {}, global.React));
+})(this, function(exports2, React) {
+  "use strict";
+  const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+  function _interopNamespace(e) {
+    if (e && e.__esModule)
+      return e;
+    const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+    if (e) {
+      for (const k in e) {
+        if (k !== "default") {
+          const d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: () => e[k]
+          });
+        }
+      }
+    }
+    n.default = e;
+    return Object.freeze(n);
+  }
+  const React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
+  const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+  var _jsxFileName$a = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ExternalVideo.tsx";
+  function ExternalVideo(props) {
+    var _a, _b;
+    const {
+      data,
+      options,
+      id = data.id,
+      frameBorder = "0",
+      allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+      allowFullScreen = true,
+      loading = "lazy",
+      ...passthroughProps
+    } = props;
+    if (!data.embedUrl) {
+      throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);
+    }
+    let finalUrl = data.embedUrl;
+    if (options) {
+      const urlObject = new URL(data.embedUrl);
+      for (const key of Object.keys(options)) {
+        urlObject.searchParams.set(key, options[key]);
+      }
+      finalUrl = urlObject.toString();
+    }
+    return /* @__PURE__ */ React__default.default.createElement("iframe", {
+      ...passthroughProps,
+      id: id != null ? id : data.embedUrl,
+      title: (_b = (_a = data.alt) != null ? _a : data.id) != null ? _b : "external video",
+      frameBorder,
+      allow,
+      allowFullScreen,
+      src: finalUrl,
+      loading,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$a,
+        lineNumber: 56,
+        columnNumber: 5
+      }
+    });
+  }
+  function flattenConnection(connection) {
+    if (connection.nodes) {
+      return connection.nodes;
+    }
+    if (connection.edges) {
+      return connection.edges.map((edge) => {
+        if (!(edge == null ? void 0 : edge.node)) {
+          throw new Error("Connection edges must contain nodes");
+        }
+        return edge.node;
+      });
+    }
+    {
+      console.warn(
+        `The connection did not contain either "nodes" or "edges.node". A empty array will be returned in its place.`
+      );
+    }
+    return [];
+  }
+  const PRODUCTION_CDN_HOSTNAMES = [
+    "cdn.shopify.com",
+    "cdn.shopifycdn.net",
+    "shopify-assets.shopifycdn.com",
+    "shopify-assets.shopifycdn.net"
+  ];
+  const LOCAL_CDN_HOSTNAMES = ["spin.dev"];
+  const ALL_CDN_HOSTNAMES = [...PRODUCTION_CDN_HOSTNAMES, ...LOCAL_CDN_HOSTNAMES];
+  const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];
+  function addImageSizeParametersToUrl({
+    src,
+    width,
+    height,
+    crop,
+    scale
+  }) {
+    const newUrl = new URL(src);
+    const multipliedScale = scale != null ? scale : 1;
+    if (width) {
+      let finalWidth;
+      if (typeof width === "string") {
+        finalWidth = (IMG_SRC_SET_SIZES[0] * multipliedScale).toString();
+      } else {
+        finalWidth = (Number(width) * multipliedScale).toString();
+      }
+      newUrl.searchParams.append("width", finalWidth);
+    }
+    if (height && typeof height === "number") {
+      newUrl.searchParams.append("height", (height * multipliedScale).toString());
+    }
+    crop && newUrl.searchParams.append("crop", crop);
+    return newUrl.toString();
+  }
+  function shopifyImageLoader(params) {
+    const newSrc = new URL(params.src);
+    const isShopifyServedImage = ALL_CDN_HOSTNAMES.some(
+      (allowedHostname) => newSrc.hostname.endsWith(allowedHostname)
+    );
+    if (!isShopifyServedImage || !params.width && !params.height && !params.crop && !params.scale) {
+      return params.src;
+    }
+    return addImageSizeParametersToUrl(params);
+  }
+  function getShopifyImageDimensions({
+    data: sfapiImage,
+    loaderOptions,
+    elementProps
+  }) {
+    var _a, _b, _c, _d, _e, _f;
+    let aspectRatio = null;
+    if ((sfapiImage == null ? void 0 : sfapiImage.width) && (sfapiImage == null ? void 0 : sfapiImage.height)) {
+      aspectRatio = (sfapiImage == null ? void 0 : sfapiImage.width) / (sfapiImage == null ? void 0 : sfapiImage.height);
+    }
+    if ((loaderOptions == null ? void 0 : loaderOptions.width) || (loaderOptions == null ? void 0 : loaderOptions.height)) {
+      return {
+        width: (_a = loaderOptions == null ? void 0 : loaderOptions.width) != null ? _a : aspectRatio && typeof loaderOptions.height === "number" ? Math.round(aspectRatio * loaderOptions.height) : null,
+        height: (_b = loaderOptions == null ? void 0 : loaderOptions.height) != null ? _b : aspectRatio && typeof loaderOptions.width === "number" ? Math.round(aspectRatio * loaderOptions.width) : null
+      };
+    }
+    if ((elementProps == null ? void 0 : elementProps.width) || (elementProps == null ? void 0 : elementProps.height)) {
+      return {
+        width: (_c = elementProps == null ? void 0 : elementProps.width) != null ? _c : aspectRatio && typeof elementProps.height === "number" ? Math.round(aspectRatio * elementProps.height) : null,
+        height: (_d = elementProps == null ? void 0 : elementProps.height) != null ? _d : aspectRatio && typeof elementProps.width === "number" ? Math.round(aspectRatio * elementProps.width) : null
+      };
+    }
+    if ((sfapiImage == null ? void 0 : sfapiImage.width) || (sfapiImage == null ? void 0 : sfapiImage.height)) {
+      return {
+        width: (_e = sfapiImage == null ? void 0 : sfapiImage.width) != null ? _e : null,
+        height: (_f = sfapiImage == null ? void 0 : sfapiImage.height) != null ? _f : null
+      };
+    }
+    return { width: null, height: null };
+  }
+  var _jsxFileName$9 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/Image.tsx";
+  function Image({
+    data,
+    width,
+    height,
+    loading,
+    loader = shopifyImageLoader,
+    loaderOptions,
+    widths,
+    decoding = "async",
+    ...rest
+  }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (!data.url) {
+      const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${(_a = data.id) != null ? _a : "no ID provided"}`;
+      {
+        throw new Error(missingUrlError);
+      }
+    }
+    if (!data.altText && !rest.alt) {
+      console.warn(`<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${(_b = data.id) != null ? _b : data.url}`);
+    }
+    const {
+      width: imgElementWidth,
+      height: imgElementHeight
+    } = getShopifyImageDimensions({
+      data,
+      loaderOptions,
+      elementProps: {
+        width,
+        height
+      }
+    });
+    if (!imgElementWidth || !imgElementHeight) {
+      console.warn(`<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${(_c = data.id) != null ? _c : data.url}`);
+    }
+    let finalSrc = data.url;
+    if (loader) {
+      finalSrc = loader({
+        ...loaderOptions,
+        src: data.url,
+        width: imgElementWidth,
+        height: imgElementHeight
+      });
+      if (typeof finalSrc !== "string" || !finalSrc) {
+        throw new Error(`<Image/>: 'loader' did not return a valid string. Image: ${(_d = data.id) != null ? _d : data.url}`);
+      }
+    }
+    const maxWidth = width && imgElementWidth && width < imgElementWidth ? width : imgElementWidth;
+    const finalSrcset = (_e = rest.srcSet) != null ? _e : internalImageSrcSet({
+      ...loaderOptions,
+      widths,
+      src: data.url,
+      width: maxWidth,
+      height: imgElementHeight,
+      loader
+    });
+    return /* @__PURE__ */ React__namespace.createElement("img", {
+      id: (_f = data.id) != null ? _f : "",
+      alt: (_h = (_g = data.altText) != null ? _g : rest.alt) != null ? _h : "",
+      loading: loading != null ? loading : "lazy",
+      ...rest,
+      src: finalSrc,
+      width: imgElementWidth != null ? imgElementWidth : void 0,
+      height: imgElementHeight != null ? imgElementHeight : void 0,
+      srcSet: finalSrcset,
+      decoding,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 150,
+        columnNumber: 5
+      }
+    });
+  }
+  function internalImageSrcSet({
+    src,
+    width,
+    crop,
+    scale,
+    widths,
+    loader,
+    height
+  }) {
+    const hasCustomWidths = widths && Array.isArray(widths);
+    if (hasCustomWidths && widths.some((size) => isNaN(size))) {
+      throw new Error(`<Image/>: the 'widths' must be an array of numbers. Image: ${src}`);
+    }
+    let aspectRatio = 1;
+    if (width && height) {
+      aspectRatio = Number(height) / Number(width);
+    }
+    let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;
+    if (!hasCustomWidths && width && width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]) {
+      setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);
+    }
+    const srcGenerator = loader ? loader : addImageSizeParametersToUrl;
+    return setSizes.map((size) => `${srcGenerator({
+      src,
+      width: size,
+      height: crop ? Number(size) * aspectRatio : void 0,
+      crop,
+      scale
+    })} ${size}w`).join(", ");
+  }
+  var _jsxFileName$8 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/Video.tsx";
+  function Video(props) {
+    var _a, _b;
+    const {
+      data,
+      previewImageOptions,
+      id = data.id,
+      playsInline = true,
+      controls = true,
+      sourceProps = {},
+      ...passthroughProps
+    } = props;
+    const posterUrl = shopifyImageLoader({
+      src: (_b = (_a = data.previewImage) == null ? void 0 : _a.url) != null ? _b : "",
+      ...previewImageOptions
+    });
+    if (!data.sources) {
+      throw new Error(`<Video/> requires a 'data.sources' array`);
+    }
+    return /* @__PURE__ */ React__default.default.createElement("video", {
+      ...passthroughProps,
+      id,
+      playsInline,
+      controls,
+      poster: posterUrl,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 42,
+        columnNumber: 5
+      }
+    }, data.sources.map((source) => {
+      if (!((source == null ? void 0 : source.url) && (source == null ? void 0 : source.mimeType))) {
+        throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);
+      }
+      return /* @__PURE__ */ React__default.default.createElement("source", {
+        ...sourceProps,
+        key: source.url,
+        src: source.url,
+        type: source.mimeType,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$8,
+          lineNumber: 54,
+          columnNumber: 11
+        }
+      });
+    }));
+  }
+  const SCRIPTS_LOADED = {};
+  function loadScript(src, options) {
+    const isScriptLoaded = SCRIPTS_LOADED[src];
+    if (isScriptLoaded) {
+      return isScriptLoaded;
+    }
+    const promise = new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      if (options == null ? void 0 : options.module) {
+        script.type = "module";
+      } else {
+        script.type = "text/javascript";
+      }
+      script.src = src;
+      script.onload = () => {
+        resolve(true);
+      };
+      script.onerror = () => {
+        reject(false);
+      };
+      if ((options == null ? void 0 : options.in) === "head") {
+        document.head.appendChild(script);
+      } else {
+        document.body.appendChild(script);
+      }
+    });
+    SCRIPTS_LOADED[src] = promise;
+    return promise;
+  }
+  function useLoadScript(url, options) {
+    const [status, setStatus] = React.useState("loading");
+    const stringifiedOptions = JSON.stringify(options);
+    React.useEffect(() => {
+      async function loadScriptWrapper() {
+        try {
+          setStatus("loading");
+          await loadScript(url, options);
+          setStatus("done");
+        } catch (error) {
+          setStatus("error");
+        }
+      }
+      loadScriptWrapper();
+    }, [url, stringifiedOptions, options]);
+    return status;
+  }
+  var _jsxFileName$7 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ModelViewer.tsx";
+  function ModelViewer(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    const [modelViewer, setModelViewer] = React.useState(void 0);
+    const callbackRef = React.useCallback((node) => {
+      setModelViewer(node);
+    }, []);
+    const {
+      data,
+      children,
+      className,
+      ...passthroughProps
+    } = props;
+    const modelViewerLoadedStatus = useLoadScript("https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js", {
+      module: true
+    });
+    React.useEffect(() => {
+      if (!modelViewer) {
+        return;
+      }
+      if (passthroughProps.onError)
+        modelViewer.addEventListener("error", passthroughProps.onError);
+      if (passthroughProps.onLoad)
+        modelViewer.addEventListener("load", passthroughProps.onLoad);
+      if (passthroughProps.onPreload)
+        modelViewer.addEventListener("preload", passthroughProps.onPreload);
+      if (passthroughProps.onModelVisibility)
+        modelViewer.addEventListener("model-visibility", passthroughProps.onModelVisibility);
+      if (passthroughProps.onProgress)
+        modelViewer.addEventListener("progress", passthroughProps.onProgress);
+      if (passthroughProps.onArStatus)
+        modelViewer.addEventListener("ar-status", passthroughProps.onArStatus);
+      if (passthroughProps.onArTracking)
+        modelViewer.addEventListener("ar-tracking", passthroughProps.onArTracking);
+      if (passthroughProps.onQuickLookButtonTapped)
+        modelViewer.addEventListener("quick-look-button-tapped", passthroughProps.onQuickLookButtonTapped);
+      if (passthroughProps.onCameraChange)
+        modelViewer.addEventListener("camera-change", passthroughProps.onCameraChange);
+      if (passthroughProps.onEnvironmentChange)
+        modelViewer.addEventListener("environment-change", passthroughProps.onEnvironmentChange);
+      if (passthroughProps.onPlay)
+        modelViewer.addEventListener("play", passthroughProps.onPlay);
+      if (passthroughProps.onPause)
+        modelViewer.addEventListener("ar-status", passthroughProps.onPause);
+      if (passthroughProps.onSceneGraphReady)
+        modelViewer.addEventListener("scene-graph-ready", passthroughProps.onSceneGraphReady);
+      return () => {
+        if (modelViewer == null) {
+          return;
+        }
+        if (passthroughProps.onError)
+          modelViewer.removeEventListener("error", passthroughProps.onError);
+        if (passthroughProps.onLoad)
+          modelViewer.removeEventListener("load", passthroughProps.onLoad);
+        if (passthroughProps.onPreload)
+          modelViewer.removeEventListener("preload", passthroughProps.onPreload);
+        if (passthroughProps.onModelVisibility)
+          modelViewer.removeEventListener("model-visibility", passthroughProps.onModelVisibility);
+        if (passthroughProps.onProgress)
+          modelViewer.removeEventListener("progress", passthroughProps.onProgress);
+        if (passthroughProps.onArStatus)
+          modelViewer.removeEventListener("ar-status", passthroughProps.onArStatus);
+        if (passthroughProps.onArTracking)
+          modelViewer.removeEventListener("ar-tracking", passthroughProps.onArTracking);
+        if (passthroughProps.onQuickLookButtonTapped)
+          modelViewer.removeEventListener("quick-look-button-tapped", passthroughProps.onQuickLookButtonTapped);
+        if (passthroughProps.onCameraChange)
+          modelViewer.removeEventListener("camera-change", passthroughProps.onCameraChange);
+        if (passthroughProps.onEnvironmentChange)
+          modelViewer.removeEventListener("environment-change", passthroughProps.onEnvironmentChange);
+        if (passthroughProps.onPlay)
+          modelViewer.removeEventListener("play", passthroughProps.onPlay);
+        if (passthroughProps.onPause)
+          modelViewer.removeEventListener("ar-status", passthroughProps.onPause);
+        if (passthroughProps.onSceneGraphReady)
+          modelViewer.removeEventListener("scene-graph-ready", passthroughProps.onSceneGraphReady);
+      };
+    }, [modelViewer, passthroughProps.onArStatus, passthroughProps.onArTracking, passthroughProps.onCameraChange, passthroughProps.onEnvironmentChange, passthroughProps.onError, passthroughProps.onLoad, passthroughProps.onModelVisibility, passthroughProps.onPause, passthroughProps.onPlay, passthroughProps.onPreload, passthroughProps.onProgress, passthroughProps.onQuickLookButtonTapped, passthroughProps.onSceneGraphReady]);
+    if (modelViewerLoadedStatus !== "done") {
+      return null;
+    }
+    if (!((_b = (_a = data.sources) == null ? void 0 : _a[0]) == null ? void 0 : _b.url)) {
+      const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;
+      {
+        throw new Error(sourcesUrlError);
+      }
+    }
+    if (!data.alt) {
+      console.warn(`<ModelViewer/> requires the 'data.alt' prop for accessibility`);
+    }
+    return /* @__PURE__ */ React__default.default.createElement("model-viewer", {
+      ref: callbackRef,
+      ...passthroughProps,
+      className,
+      id: (_c = passthroughProps.id) != null ? _c : data.id,
+      src: data.sources[0].url,
+      alt: (_d = data.alt) != null ? _d : null,
+      "camera-controls": (_e = passthroughProps.cameraControls) != null ? _e : true,
+      poster: (_g = passthroughProps.poster || ((_f = data.previewImage) == null ? void 0 : _f.url)) != null ? _g : null,
+      autoplay: (_h = passthroughProps.autoplay) != null ? _h : true,
+      loading: passthroughProps.loading,
+      reveal: passthroughProps.reveal,
+      ar: passthroughProps.ar,
+      "ar-modes": passthroughProps.arModes,
+      "ar-scale": passthroughProps.arScale,
+      "ar-placement": passthroughProps.arPlacement,
+      "ios-src": passthroughProps.iosSrc,
+      "touch-action": passthroughProps.touchAction,
+      "disable-zoom": passthroughProps.disableZoom,
+      "orbit-sensitivity": passthroughProps.orbitSensitivity,
+      "auto-rotate": passthroughProps.autoRotate,
+      "auto-rotate-delay": passthroughProps.autoRotateDelay,
+      "rotation-per-second": passthroughProps.rotationPerSecond,
+      "interaction-policy": passthroughProps.interactionPolicy,
+      "interaction-prompt": passthroughProps.interactionPrompt,
+      "interaction-prompt-style": passthroughProps.interactionPromptStyle,
+      "interaction-prompt-threshold": passthroughProps.interactionPromptThreshold,
+      "camera-orbit": passthroughProps.cameraOrbit,
+      "camera-target": passthroughProps.cameraTarget,
+      "field-of-view": passthroughProps.fieldOfView,
+      "max-camera-orbit": passthroughProps.maxCameraOrbit,
+      "min-camera-orbit": passthroughProps.minCameraOrbit,
+      "max-field-of-view": passthroughProps.maxFieldOfView,
+      "min-field-of-view": passthroughProps.minFieldOfView,
+      bounds: passthroughProps.bounds,
+      "interpolation-decay": (_i = passthroughProps.interpolationDecay) != null ? _i : 100,
+      "skybox-image": passthroughProps.skyboxImage,
+      "environment-image": passthroughProps.environmentImage,
+      exposure: passthroughProps.exposure,
+      "shadow-intensity": (_j = passthroughProps.shadowIntensity) != null ? _j : 0,
+      "shadow-softness": (_k = passthroughProps.shadowSoftness) != null ? _k : 0,
+      "animation-name": passthroughProps.animationName,
+      "animation-crossfade-duration": passthroughProps.animationCrossfadeDuration,
+      "variant-name": passthroughProps.variantName,
+      orientation: passthroughProps.orientation,
+      scale: passthroughProps.scale,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 222,
+        columnNumber: 5
+      }
+    }, children);
+  }
+  var _jsxFileName$6 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/MediaFile.tsx";
+  function MediaFile({
+    data,
+    mediaOptions,
+    ...passthroughProps
+  }) {
+    switch (data.__typename) {
+      case "MediaImage": {
+        if (!data.image) {
+          const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;
+          {
+            throw new Error(noDataImage);
+          }
+        }
+        return /* @__PURE__ */ React__default.default.createElement(Image, {
+          ...passthroughProps,
+          ...mediaOptions == null ? void 0 : mediaOptions.image,
+          data: data.image,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$6,
+            lineNumber: 51,
+            columnNumber: 9
+          }
+        });
+      }
+      case "Video": {
+        return /* @__PURE__ */ React__default.default.createElement(Video, {
+          ...passthroughProps,
+          ...mediaOptions == null ? void 0 : mediaOptions.video,
+          data,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$6,
+            lineNumber: 60,
+            columnNumber: 9
+          }
+        });
+      }
+      case "ExternalVideo": {
+        return /* @__PURE__ */ React__default.default.createElement(ExternalVideo, {
+          ...passthroughProps,
+          ...mediaOptions == null ? void 0 : mediaOptions.externalVideo,
+          data,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$6,
+            lineNumber: 65,
+            columnNumber: 9
+          }
+        });
+      }
+      case "Model3d": {
+        return /* @__PURE__ */ React__default.default.createElement(ModelViewer, {
+          ...passthroughProps,
+          ...mediaOptions == null ? void 0 : mediaOptions.modelViewer,
+          data,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$6,
+            lineNumber: 74,
+            columnNumber: 9
+          }
+        });
+      }
+      default: {
+        const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to correctly render the correct component for this media. Rendering 'null' by default`;
+        {
+          throw new Error(typenameMissingMessage);
+        }
+      }
+    }
+  }
+  const SFAPI_VERSION = "2022-07";
+  var _jsxFileName$5 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ShopifyProvider.tsx";
+  const ShopifyContext = React.createContext({
+    storeDomain: "test.myshopify.com",
+    storefrontToken: "abc123",
+    storefrontApiVersion: SFAPI_VERSION,
+    country: {
+      isoCode: "US"
+    },
+    language: {
+      isoCode: "EN"
+    },
+    locale: "EN-US"
+  });
+  function ShopifyProvider({
+    children,
+    shopifyConfig
+  }) {
+    if (!shopifyConfig) {
+      throw new Error(`The 'shopifyConfig' prop must be passed to '<ShopifyProvider/>'`);
+    }
+    if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {
+      console.warn(`This version of Hydrogen-UI is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen-UI and the Storefront API.`);
+    }
+    const finalConfig = React.useMemo(() => ({
+      ...shopifyConfig,
+      storeDomain: shopifyConfig.storeDomain.replace(/^https?:\/\//, "")
+    }), [shopifyConfig]);
+    return /* @__PURE__ */ React__default.default.createElement(ShopifyContext.Provider, {
+      value: finalConfig,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 49,
+        columnNumber: 5
+      }
+    }, children);
+  }
+  function useShop() {
+    const shopContext = React.useContext(ShopifyContext);
+    if (!shopContext) {
+      throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);
+    }
+    return shopContext;
+  }
+  var _jsxFileName$4 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/Metafield.tsx";
+  function Metafield(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const {
+      data,
+      as,
+      ...passthroughProps
+    } = props;
+    const {
+      locale
+    } = useShop();
+    const parsedMetafield = React.useMemo(() => parseMetafield(data), [data]);
+    if (!parsedMetafield) {
+      const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;
+      {
+        throw new Error(noDataPropWarning);
+      }
+    }
+    if (parsedMetafield.value === null || parsedMetafield.value === void 0) {
+      const noValueWarning = `<Metafield/>: No metafield value for metafield ${(_a = parsedMetafield.id) != null ? _a : parsedMetafield.key}. Rendering 'null'`;
+      {
+        throw new Error(noValueWarning);
+      }
+    }
+    switch (parsedMetafield.type) {
+      case "date": {
+        const Wrapper2 = as != null ? as : "time";
+        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
+          ...passthroughProps,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$4,
+            lineNumber: 68,
+            columnNumber: 9
+          }
+        }, parsedMetafield.value.toLocaleDateString(locale));
+      }
+      case "date_time": {
+        const Wrapper2 = as != null ? as : "time";
+        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
+          ...passthroughProps,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$4,
+            lineNumber: 76,
+            columnNumber: 9
+          }
+        }, parsedMetafield.value.toLocaleString(locale));
+      }
+      case "weight":
+      case "dimension":
+      case "volume": {
+        const Wrapper2 = as != null ? as : "span";
+        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
+          ...passthroughProps,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$4,
+            lineNumber: 86,
+            columnNumber: 9
+          }
+        }, getMeasurementAsString(parsedMetafield.value, locale));
+      }
+      case "rating": {
+        const Wrapper2 = as != null ? as : "span";
+        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
+          ...passthroughProps,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$4,
+            lineNumber: 94,
+            columnNumber: 9
+          }
+        }, parsedMetafield.value.value);
+      }
+      case "single_line_text_field": {
+        const Wrapper2 = as != null ? as : "span";
+        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
+          ...passthroughProps,
+          dangerouslySetInnerHTML: {
+            __html: parsedMetafield.value
+          },
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$4,
+            lineNumber: 102,
+            columnNumber: 9
+          }
+        });
+      }
+      case "multi_line_text_field": {
+        const Wrapper2 = as != null ? as : "div";
+        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
+          ...passthroughProps,
+          dangerouslySetInnerHTML: {
+            __html: parsedMetafield.value.split("\n").join("<br/>")
+          },
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$4,
+            lineNumber: 111,
+            columnNumber: 9
+          }
+        });
+      }
+      case "url": {
+        const protocolLessUrl = new URL(parsedMetafield.value);
+        return /* @__PURE__ */ React__default.default.createElement("a", {
+          href: protocolLessUrl.href.replace(protocolLessUrl.protocol, ""),
+          ...passthroughProps,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$4,
+            lineNumber: 122,
+            columnNumber: 9
+          }
+        }, parsedMetafield.value);
+      }
+      case "json": {
+        const Wrapper2 = as != null ? as : "span";
+        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
+          ...passthroughProps,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$4,
+            lineNumber: 133,
+            columnNumber: 9
+          }
+        }, JSON.stringify(parsedMetafield.value));
+      }
+      case "product_reference":
+      case "variant_reference":
+      case "page_reference": {
+        const Wrapper2 = as != null ? as : "span";
+        const ref = parsedMetafield.reference;
+        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
+          ...passthroughProps,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$4,
+            lineNumber: 144,
+            columnNumber: 9
+          }
+        }, (_c = (_b = ref == null ? void 0 : ref.title) != null ? _b : ref == null ? void 0 : ref.id) != null ? _c : "");
+      }
+      case "list.single_line_text_field": {
+        const Wrapper2 = as != null ? as : "ul";
+        const refArray = parsedMetafield.references ? flattenConnection(parsedMetafield.references) : [];
+        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
+          ...passthroughProps,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$4,
+            lineNumber: 155,
+            columnNumber: 9
+          }
+        }, refArray.map((ref, index) => /* @__PURE__ */ React__default.default.createElement("li", {
+          key: `${ref != null ? ref : ""}-${index}`,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$4,
+            lineNumber: 159,
+            columnNumber: 13
+          }
+        }, ref)));
+      }
+      case "file_reference": {
+        if (((_d = parsedMetafield.reference) == null ? void 0 : _d.__typename) === "MediaImage") {
+          const ref = parsedMetafield.reference;
+          return ref.image ? /* @__PURE__ */ React__default.default.createElement(Image, {
+            data: ref.image,
+            ...passthroughProps,
+            __self: this,
+            __source: {
+              fileName: _jsxFileName$4,
+              lineNumber: 168,
+              columnNumber: 11
+            }
+          }) : null;
+        } else if (((_e = parsedMetafield.reference) == null ? void 0 : _e.__typename) === "GenericFile") {
+          const ref = parsedMetafield.reference;
+          return ref.previewImage ? /* @__PURE__ */ React__default.default.createElement("a", {
+            href: (_g = (_f = parsedMetafield.reference) == null ? void 0 : _f.url) != null ? _g : "",
+            ...passthroughProps,
+            __self: this,
+            __source: {
+              fileName: _jsxFileName$4,
+              lineNumber: 173,
+              columnNumber: 11
+            }
+          }, /* @__PURE__ */ React__default.default.createElement(Image, {
+            data: ref.previewImage,
+            __self: this,
+            __source: {
+              fileName: _jsxFileName$4,
+              lineNumber: 174,
+              columnNumber: 13
+            }
+          })) : null;
+        } else if (((_h = parsedMetafield.reference) == null ? void 0 : _h.__typename) === "Video") {
+          const ref = parsedMetafield.reference;
+          return /* @__PURE__ */ React__default.default.createElement(Video, {
+            ...passthroughProps,
+            data: ref,
+            __self: this,
+            __source: {
+              fileName: _jsxFileName$4,
+              lineNumber: 179,
+              columnNumber: 16
+            }
+          });
+        }
+      }
+    }
+    const Wrapper = as != null ? as : "span";
+    return /* @__PURE__ */ React__default.default.createElement(Wrapper, {
+      ...passthroughProps,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 186,
+        columnNumber: 5
+      }
+    }, (_i = parsedMetafield.value) == null ? void 0 : _i.toString());
+  }
+  function parseMetafield(metafield) {
+    if (!metafield) {
+      {
+        console.warn(`'parseMetafield' was not passed any value for the 'metafield' argument`);
+      }
+      return null;
+    }
+    if (metafield.value === null || metafield.value === void 0) {
+      console.warn(`'parseMetafield()' was passed ${metafield.value} for 'metafield.value'`);
+    }
+    return {
+      ...metafield,
+      value: parseMetafieldValue(metafield)
+    };
+  }
+  function parseMetafieldValue(metafield) {
+    if (!metafield) {
+      return null;
+    }
+    if (metafield.value === null || metafield.value === void 0) {
+      {
+        console.warn(`'parseMetafieldValue()' was passed ${metafield.value} for 'metafield.value'`);
+      }
+      return metafield.value;
+    }
+    switch (metafield.type) {
+      case "boolean":
+        return metafield.value === "true";
+      case "number_integer":
+        return parseInt(metafield.value);
+      case "number_decimal":
+        return parseFloat(metafield.value);
+      case "date":
+      case "date_time":
+        return new Date(metafield.value);
+      case "json":
+      case "weight":
+      case "dimension":
+      case "volume":
+      case "rating":
+        return parseJSON(metafield.value);
+      case "color":
+      case "single_line_text_field":
+      case "multi_line_text_field":
+      case "product_reference":
+      case "page_reference":
+      case "variant_reference":
+      case "file_reference":
+      case "url":
+      default:
+        return metafield.value;
+    }
+  }
+  function parseJSON(json) {
+    if (String(json).includes("__proto__")) {
+      return JSON.parse(json, (k, v) => {
+        if (k !== "__proto__")
+          return v;
+      });
+    }
+    return JSON.parse(json);
+  }
+  const UNIT_MAPPING = {
+    mm: "millimeter",
+    cm: "centimeter",
+    m: "meter",
+    in: "inch",
+    ft: "foot",
+    yd: "yard",
+    ml: "milliliter",
+    l: "liter",
+    us_fl_oz: "fluid-ounce",
+    us_gal: "gallon",
+    kg: "kilogram",
+    g: "gram",
+    lb: "pound",
+    oz: "ounce"
+  };
+  function getMeasurementAsString(measurement, locale = "en-us", options = {}) {
+    let measure = {
+      value: measurement.value,
+      unit: UNIT_MAPPING[measurement.unit]
+    };
+    if (measure.unit == null) {
+      measure = convertToSupportedUnit(measurement.value, measurement.unit);
+    }
+    return new Intl.NumberFormat(locale, {
+      ...options,
+      unit: measure.unit,
+      style: "unit"
+    }).format(measure.value);
+  }
+  function convertToSupportedUnit(value, unit) {
+    switch (unit) {
+      case "cl":
+        return {
+          value: value / 1e3,
+          unit: "liter"
+        };
+      case "m3":
+        return {
+          value: value * 1e3,
+          unit: "liter"
+        };
+      case "us_pt":
+        return {
+          value: value * 0.125,
+          unit: "gallon"
+        };
+      case "us_qt":
+        return {
+          value: value * 0.5,
+          unit: "gallon"
+        };
+      case "us_oz":
+        return {
+          value: value / 128,
+          unit: "gallon"
+        };
+      case "imp_pt":
+        return {
+          value: value / 6.661,
+          unit: "gallon"
+        };
+      case "imp_qt":
+        return {
+          value: value / 3.331,
+          unit: "gallon"
+        };
+      case "imp_gal":
+        return {
+          value: value / 1.201,
+          unit: "gallon"
+        };
+      case "imp_fl_oz":
+        return {
+          value: value * 0.96076,
+          unit: "fluid-ounce"
+        };
+      default:
+        throw new Error(`Unit not supported: ${unit}`);
+    }
+  }
+  function useMoney(money) {
+    const {
+      locale
+    } = useShop();
+    if (!locale) {
+      throw new Error(`useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`);
+    }
+    const amount = parseFloat(money.amount);
+    const options = React.useMemo(() => ({
+      style: "currency",
+      currency: money.currencyCode
+    }), [money.currencyCode]);
+    const defaultFormatter = useLazyFormatter(locale, options);
+    const nameFormatter = useLazyFormatter(locale, {
+      ...options,
+      currencyDisplay: "name"
+    });
+    const narrowSymbolFormatter = useLazyFormatter(locale, {
+      ...options,
+      currencyDisplay: "narrowSymbol"
+    });
+    const withoutTrailingZerosFormatter = useLazyFormatter(locale, {
+      ...options,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
+    const withoutCurrencyFormatter = useLazyFormatter(locale);
+    const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
+    const isPartCurrency = (part) => part.type === "currency";
+    const lazyFormatters = React.useMemo(() => ({
+      original: () => money,
+      currencyCode: () => money.currencyCode,
+      localizedString: () => defaultFormatter().format(amount),
+      parts: () => defaultFormatter().formatToParts(amount),
+      withoutTrailingZeros: () => amount % 1 === 0 ? withoutTrailingZerosFormatter().format(amount) : defaultFormatter().format(amount),
+      withoutTrailingZerosAndCurrency: () => amount % 1 === 0 ? withoutTrailingZerosOrCurrencyFormatter().format(amount) : withoutCurrencyFormatter().format(amount),
+      currencyName: () => {
+        var _a, _b;
+        return (_b = (_a = nameFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : money.currencyCode;
+      },
+      currencySymbol: () => {
+        var _a, _b;
+        return (_b = (_a = defaultFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : money.currencyCode;
+      },
+      currencyNarrowSymbol: () => {
+        var _a, _b;
+        return (_b = (_a = narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : "";
+      },
+      amount: () => defaultFormatter().formatToParts(amount).filter((part) => ["decimal", "fraction", "group", "integer", "literal"].includes(part.type)).map((part) => part.value).join("")
+    }), [money, amount, nameFormatter, defaultFormatter, narrowSymbolFormatter, withoutCurrencyFormatter, withoutTrailingZerosFormatter, withoutTrailingZerosOrCurrencyFormatter]);
+    return React.useMemo(() => new Proxy(lazyFormatters, {
+      get: (target, key) => {
+        var _a;
+        return (_a = Reflect.get(target, key)) == null ? void 0 : _a.call(null);
+      }
+    }), [lazyFormatters]);
+  }
+  function useLazyFormatter(locale, options) {
+    return React.useMemo(() => {
+      let memoized;
+      return () => memoized != null ? memoized : memoized = new Intl.NumberFormat(locale, options);
+    }, [locale, options]);
+  }
+  var _jsxFileName$3 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/Money.tsx";
+  function Money({
+    data,
+    as,
+    withoutCurrency,
+    withoutTrailingZeros,
+    measurement,
+    measurementSeparator = "/",
+    ...passthroughProps
+  }) {
+    if (!isMoney(data)) {
+      throw new Error(`<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`);
+    }
+    const moneyObject = useMoney(data);
+    const Wrapper = as != null ? as : "div";
+    let output = moneyObject.localizedString;
+    if (withoutCurrency || withoutTrailingZeros) {
+      if (withoutCurrency && !withoutTrailingZeros) {
+        output = moneyObject.amount;
+      } else if (!withoutCurrency && withoutTrailingZeros) {
+        output = moneyObject.withoutTrailingZeros;
+      } else {
+        output = moneyObject.withoutTrailingZerosAndCurrency;
+      }
+    }
+    return /* @__PURE__ */ React__default.default.createElement(Wrapper, {
+      ...passthroughProps,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 65,
+        columnNumber: 5
+      }
+    }, output, measurement && measurement.referenceUnit && /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, measurementSeparator, measurement.referenceUnit));
+  }
+  function isMoney(maybeMoney) {
+    return typeof maybeMoney.amount === "string" && !!maybeMoney.amount && typeof maybeMoney.currencyCode === "string" && !!maybeMoney.currencyCode;
+  }
+  var _jsxFileName$2 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ProductPrice.tsx";
+  function ProductPrice(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const {
+      priceType = "regular",
+      variantId,
+      valueType = "min",
+      data: product,
+      ...passthroughProps
+    } = props;
+    if (product == null) {
+      throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);
+    }
+    let price;
+    let measurement;
+    const variant = variantId ? (_b = flattenConnection((_a = product == null ? void 0 : product.variants) != null ? _a : {}).find((variant2) => (variant2 == null ? void 0 : variant2.id) === variantId)) != null ? _b : null : null;
+    if (priceType === "compareAt") {
+      if (variantId && variant) {
+        if (((_c = variant.compareAtPriceV2) == null ? void 0 : _c.amount) === ((_d = variant.priceV2) == null ? void 0 : _d.amount)) {
+          return null;
+        }
+        price = variant.compareAtPriceV2;
+      } else if (valueType === "max") {
+        price = (_e = product == null ? void 0 : product.compareAtPriceRange) == null ? void 0 : _e.maxVariantPrice;
+      } else {
+        price = (_f = product == null ? void 0 : product.compareAtPriceRange) == null ? void 0 : _f.minVariantPrice;
+      }
+    } else {
+      if (variantId && variant) {
+        price = variant.priceV2;
+        if (valueType === "unit") {
+          price = variant.unitPrice;
+          measurement = variant.unitPriceMeasurement;
+        }
+      } else if (valueType === "max") {
+        price = (_g = product.priceRange) == null ? void 0 : _g.maxVariantPrice;
+      } else {
+        price = (_h = product.priceRange) == null ? void 0 : _h.minVariantPrice;
+      }
+    }
+    if (!price) {
+      return null;
+    }
+    if (measurement) {
+      return /* @__PURE__ */ React__default.default.createElement(Money, {
+        ...passthroughProps,
+        data: price,
+        measurement,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 82,
+          columnNumber: 7
+        }
+      });
+    }
+    return /* @__PURE__ */ React__default.default.createElement(Money, {
+      ...passthroughProps,
+      data: price,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 86,
+        columnNumber: 10
+      }
+    });
+  }
+  var _jsxFileName$1 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ProductProvider.tsx";
+  const ProductOptionsContext = React.createContext(null);
+  function ProductProvider({
+    children,
+    data: product,
+    initialVariantId: explicitVariantId
+  }) {
+    const variants = React.useMemo(() => {
+      var _a;
+      return flattenConnection((_a = product.variants) != null ? _a : {});
+    }, [product.variants]);
+    if (!isProductVariantArray(variants)) {
+      throw new Error(`<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`);
+    }
+    const options = React.useMemo(() => getOptions(variants), [variants]);
+    const [selectedVariant, setSelectedVariant] = React.useState(() => getVariantBasedOnIdProp(explicitVariantId, variants));
+    const [selectedOptions, setSelectedOptions] = React.useState(() => getSelectedOptions(selectedVariant));
+    React.useEffect(() => {
+      const newSelectedVariant = getVariantBasedOnIdProp(explicitVariantId, variants);
+      setSelectedVariant(newSelectedVariant);
+      setSelectedOptions(getSelectedOptions(newSelectedVariant));
+    }, [explicitVariantId, variants]);
+    const setSelectedOption = React.useCallback((name, value2) => {
+      setSelectedOptions((selectedOptions2) => {
+        const opts = {
+          ...selectedOptions2,
+          [name]: value2
+        };
+        setSelectedVariant(getSelectedVariant(variants, opts));
+        return opts;
+      });
+    }, [setSelectedOptions, variants]);
+    const isOptionInStock = React.useCallback((option, value2) => {
+      var _a;
+      const proposedVariant = getSelectedVariant(variants, {
+        ...selectedOptions,
+        ...{
+          [option]: value2
+        }
+      });
+      return (_a = proposedVariant == null ? void 0 : proposedVariant.availableForSale) != null ? _a : true;
+    }, [selectedOptions, variants]);
+    const sellingPlanGroups = React.useMemo(() => {
+      var _a;
+      return flattenConnection((_a = product.sellingPlanGroups) != null ? _a : {}).map((sellingPlanGroup) => {
+        var _a2;
+        return {
+          ...sellingPlanGroup,
+          sellingPlans: flattenConnection((_a2 = sellingPlanGroup == null ? void 0 : sellingPlanGroup.sellingPlans) != null ? _a2 : {})
+        };
+      });
+    }, [product.sellingPlanGroups]);
+    const [selectedSellingPlan, setSelectedSellingPlan] = React.useState(void 0);
+    const selectedSellingPlanAllocation = React.useMemo(() => {
+      var _a, _b;
+      if (!selectedVariant || !selectedSellingPlan) {
+        return;
+      }
+      if (!((_a = selectedVariant.sellingPlanAllocations) == null ? void 0 : _a.nodes) && !((_b = selectedVariant.sellingPlanAllocations) == null ? void 0 : _b.edges)) {
+        throw new Error(`<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`);
+      }
+      return flattenConnection(selectedVariant.sellingPlanAllocations).find((allocation) => {
+        var _a2;
+        return ((_a2 = allocation == null ? void 0 : allocation.sellingPlan) == null ? void 0 : _a2.id) === selectedSellingPlan.id;
+      });
+    }, [selectedVariant, selectedSellingPlan]);
+    const value = React.useMemo(() => ({
+      variants,
+      variantsConnection: product.variants,
+      options,
+      selectedVariant,
+      setSelectedVariant,
+      selectedOptions,
+      setSelectedOption,
+      setSelectedOptions,
+      isOptionInStock,
+      selectedSellingPlan,
+      setSelectedSellingPlan,
+      selectedSellingPlanAllocation,
+      sellingPlanGroups,
+      sellingPlanGroupsConnection: product.sellingPlanGroups
+    }), [isOptionInStock, options, product.sellingPlanGroups, product.variants, selectedOptions, selectedSellingPlan, selectedSellingPlanAllocation, selectedVariant, sellingPlanGroups, setSelectedOption, variants]);
+    return /* @__PURE__ */ React__default.default.createElement(ProductOptionsContext.Provider, {
+      value,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 201,
+        columnNumber: 5
+      }
+    }, children);
+  }
+  function useProduct() {
+    const context = React.useContext(ProductOptionsContext);
+    if (!context) {
+      throw new Error(`'useProduct' must be a child of <ProductProvider />`);
+    }
+    return context;
+  }
+  function getSelectedVariant(variants, choices) {
+    var _a, _b;
+    if (!variants.length || ((_b = (_a = variants == null ? void 0 : variants[0]) == null ? void 0 : _a.selectedOptions) == null ? void 0 : _b.length) !== Object.keys(choices).length) {
+      return;
+    }
+    return variants == null ? void 0 : variants.find((variant) => {
+      return Object.entries(choices).every(([name, value]) => {
+        var _a2;
+        return (_a2 = variant == null ? void 0 : variant.selectedOptions) == null ? void 0 : _a2.some((option) => (option == null ? void 0 : option.name) === name && (option == null ? void 0 : option.value) === value);
+      });
+    });
+  }
+  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) => {
+        var _a2, _b, _c, _d;
+        memo[(_a2 = opt == null ? void 0 : opt.name) != null ? _a2 : ""] = memo[(_b = opt == null ? void 0 : opt.name) != null ? _b : ""] || /* @__PURE__ */ new Set();
+        memo[(_c = opt == null ? void 0 : opt.name) != null ? _c : ""].add((_d = opt == null ? void 0 : opt.value) != null ? _d : "");
+      });
+      return memo;
+    }, {});
+    return Object.keys(map).map((option) => {
+      return {
+        name: option,
+        values: Array.from(map[option])
+      };
+    });
+  }
+  function getVariantBasedOnIdProp(explicitVariantId, variants) {
+    if (explicitVariantId) {
+      const foundVariant = variants.find((variant) => (variant == null ? void 0 : variant.id) === explicitVariantId);
+      if (!foundVariant) {
+        console.warn(`<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`);
+      }
+      return foundVariant;
+    }
+    if (explicitVariantId === null) {
+      return null;
+    }
+    if (explicitVariantId === void 0) {
+      return variants.find((variant) => variant == null ? void 0 : variant.availableForSale) || variants[0];
+    }
+  }
+  function getSelectedOptions(selectedVariant) {
+    return (selectedVariant == null ? void 0 : selectedVariant.selectedOptions) ? selectedVariant.selectedOptions.reduce((memo, optionSet) => {
+      var _a, _b;
+      memo[(_a = optionSet == null ? void 0 : optionSet.name) != null ? _a : ""] = (_b = optionSet == null ? void 0 : optionSet.value) != null ? _b : "";
+      return memo;
+    }, {}) : {};
+  }
+  function isProductVariantArray(maybeVariantArray) {
+    if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {
+      return false;
+    }
+    return true;
+  }
+  var _jsxFileName = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ShopPayButton.tsx";
+  const SHOPJS_URL = "https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js";
+  function ShopPayButton({
+    variantIds,
+    className,
+    variantIdsAndQuantities,
+    width
+  }) {
+    const {
+      storeDomain
+    } = useShop();
+    const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);
+    let ids;
+    if (variantIds && variantIdsAndQuantities) {
+      throw new Error(DoublePropsErrorMessage);
+    }
+    if (variantIds) {
+      ids = variantIds.reduce((prev, curr) => {
+        const bareId = getIdFromGid(curr);
+        if (bareId) {
+          prev.push(bareId);
+        }
+        return prev;
+      }, []);
+    } else if (variantIdsAndQuantities) {
+      ids = variantIdsAndQuantities.reduce((prev, curr) => {
+        var _a;
+        const bareId = getIdFromGid(curr == null ? void 0 : curr.id);
+        if (bareId) {
+          prev.push(`${bareId}:${(_a = curr == null ? void 0 : curr.quantity) != null ? _a : 1}`);
+        }
+        return prev;
+      }, []);
+    } else {
+      throw new Error(MissingPropsErrorMessage);
+    }
+    const style = width ? {
+      "--shop-pay-button-width": width
+    } : void 0;
+    return /* @__PURE__ */ React__default.default.createElement("div", {
+      className,
+      style,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 91,
+        columnNumber: 5
+      }
+    }, shopPayLoadedStatus === "done" && /* @__PURE__ */ React__default.default.createElement("shop-pay-button", {
+      "store-url": `https://${storeDomain}`,
+      variants: ids.join(","),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 93,
+        columnNumber: 9
+      }
+    }));
+  }
+  function getIdFromGid(id) {
+    if (!id)
+      return;
+    return id.split("/").pop();
+  }
+  const MissingPropsErrorMessage = `You must pass in either "variantIds" or "variantIdsAndQuantities" to ShopPayButton`;
+  const DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;
+  function createStorefrontClient({
+    storeDomain,
+    privateStorefrontToken,
+    publicStorefrontToken,
+    storefrontApiVersion,
+    contentType
+  }) {
+    if (storefrontApiVersion !== SFAPI_VERSION) {
+      console.warn(
+        `StorefrontClient: The Storefront API version that you're using is different than the version this build of Hydrogen-UI is targeting. You may run into unexpected errors if these versions don't match. Received verion: "${storefrontApiVersion}"; expected version ${SFAPI_VERSION}`
+      );
+    }
+    if (!privateStorefrontToken && !globalThis.document) {
+      console.warn(
+        `StorefrontClient: Using a private storefront token is recommended for server environments.  Refer to the authentication https://shopify.dev/api/storefront#authentication documentation for more details. `
+      );
+    }
+    if (privateStorefrontToken && globalThis) {
+      console.warn(
+        `StorefrontClient: You are attempting to use a private token in an environment where it can be easily accessed by anyone. This is a security risk; please use the public token and the 'publicStorefrontToken' prop`
+      );
+    }
+    return {
+      getStorefrontApiUrl(overrideProps) {
+        var _a, _b;
+        return `https://${(_a = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _a : storeDomain}.myshopify.com/api/${(_b = overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) != null ? _b : storefrontApiVersion}/graphql.json`;
+      },
+      getPrivateTokenHeaders(overrideProps) {
+        var _a, _b, _c;
+        if (!privateStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.privateStorefrontToken)) {
+          throw new Error(
+            `StorefrontClient: You did not pass in a 'privateStorefrontToken' while using 'getPrivateTokenHeaders()'`
+          );
+        }
+        if (!(overrideProps == null ? void 0 : overrideProps.buyerIp)) {
+          console.warn(
+            `StorefrontClient: it is recommended to pass in the 'buyerIp' property which improves analytics and data in the admin.`
+          );
+        }
+        const finalContentType = (_a = overrideProps == null ? void 0 : overrideProps.contentType) != null ? _a : contentType;
+        return {
+          "content-type": finalContentType === "graphql" ? "application/graphql" : "application/json",
+          "X-SDK-Variant": "hydrogen-ui",
+          "X-SDK-Variant-Source": "react",
+          "X-SDK-Version": storefrontApiVersion,
+          "Shopify-Storefront-Private-Token": (_c = (_b = overrideProps == null ? void 0 : overrideProps.privateStorefrontToken) != null ? _b : privateStorefrontToken) != null ? _c : "",
+          ...(overrideProps == null ? void 0 : overrideProps.buyerIp) ? { "Shopify-Storefront-Buyer-IP": overrideProps.buyerIp } : {}
+        };
+      },
+      getPublicTokenHeaders(overrideProps) {
+        var _a, _b, _c;
+        if (!publicStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.publicStorefrontToken)) {
+          throw new Error(
+            `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`
+          );
+        }
+        const finalContentType = (_a = overrideProps == null ? void 0 : overrideProps.contentType) != null ? _a : contentType;
+        return {
+          "content-type": finalContentType === "graphql" ? "application/graphql" : "application/json",
+          "X-SDK-Variant": "hydrogen-ui",
+          "X-SDK-Variant-Source": "react",
+          "X-SDK-Version": storefrontApiVersion,
+          "X-Shopify-Storefront-Access-Token": (_c = (_b = overrideProps == null ? void 0 : overrideProps.publicStorefrontToken) != null ? _b : publicStorefrontToken) != null ? _c : ""
+        };
+      }
+    };
+  }
+  exports2.ExternalVideo = ExternalVideo;
+  exports2.Image = Image;
+  exports2.MediaFile = MediaFile;
+  exports2.Metafield = Metafield;
+  exports2.ModelViewer = ModelViewer;
+  exports2.Money = Money;
+  exports2.ProductPrice = ProductPrice;
+  exports2.ProductProvider = ProductProvider;
+  exports2.ShopPayButton = ShopPayButton;
+  exports2.ShopifyProvider = ShopifyProvider;
+  exports2.Video = Video;
+  exports2.createStorefrontClient = createStorefrontClient;
+  exports2.flattenConnection = flattenConnection;
+  exports2.parseMetafield = parseMetafield;
+  exports2.parseMetafieldValue = parseMetafieldValue;
+  exports2.useMoney = useMoney;
+  exports2.useProduct = useProduct;
+  exports2.useShop = useShop;
+  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+});
+//# sourceMappingURL=hydrogen-react.dev.js.map