@shopify/hydrogen-react 2022.10.1 → 2022.10.3

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

@@ -766,7 +766,85 @@ query CartQuery($id: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ)
 ${cartFragment}
 `;
   const SFAPI_VERSION = "2022-10";
-  var _jsxFileName$b = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ShopifyProvider.tsx";
+  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 {
+      getShopifyDomain(overrideProps) {
+        var _a;
+        return `https://${(_a = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _a : storeDomain}.myshopify.com`;
+      },
+      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, _d;
+        if (!publicStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.publicStorefrontToken)) {
+          throw new Error(
+            `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`
+          );
+        }
+        const finalContentType = (_b = (_a = overrideProps == null ? void 0 : overrideProps.contentType) != null ? _a : contentType) != null ? _b : "json";
+        return getPublicTokenHeadersRaw(
+          finalContentType,
+          storefrontApiVersion,
+          (_d = (_c = overrideProps == null ? void 0 : overrideProps.publicStorefrontToken) != null ? _c : publicStorefrontToken) != null ? _d : ""
+        );
+      }
+    };
+  }
+  function getPublicTokenHeadersRaw(contentType, storefrontApiVersion, accessToken) {
+    return {
+      "content-type": contentType === "graphql" ? "application/graphql" : "application/json",
+      "X-SDK-Variant": "hydrogen-ui",
+      "X-SDK-Variant-Source": "react",
+      "X-SDK-Version": storefrontApiVersion,
+      "X-Shopify-Storefront-Access-Token": accessToken
+    };
+  }
+  var _jsxFileName$f = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ShopifyProvider.tsx";
   const ShopifyContext = React.createContext({
     storeDomain: "test.myshopify.com",
     storefrontToken: "abc123",
@@ -777,7 +855,13 @@ ${cartFragment}
     language: {
       isoCode: "EN"
     },
-    locale: "EN-US"
+    locale: "EN-US",
+    getStorefrontApiUrl() {
+      return "";
+    },
+    getPublicTokenHeaders() {
+      return {};
+    }
   });
   function ShopifyProvider({
     children,
@@ -789,16 +873,27 @@ ${cartFragment}
     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]);
+    const finalConfig = React.useMemo(() => {
+      const storeDomain = shopifyConfig.storeDomain.replace(/^https?:\/\//, "");
+      return {
+        ...shopifyConfig,
+        storeDomain,
+        getPublicTokenHeaders(overrideProps) {
+          var _a;
+          return getPublicTokenHeadersRaw(overrideProps.contentType, shopifyConfig.storefrontApiVersion, (_a = overrideProps.storefrontToken) != null ? _a : shopifyConfig.storefrontToken);
+        },
+        getStorefrontApiUrl(overrideProps) {
+          var _a, _b;
+          return `https://${(_a = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _a : storeDomain}/api/${(_b = overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) != null ? _b : shopifyConfig.storefrontApiVersion}/graphql.json`;
+        }
+      };
+    }, [shopifyConfig]);
     return /* @__PURE__ */ React__default.default.createElement(ShopifyContext.Provider, {
       value: finalConfig,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
-        lineNumber: 49,
+        fileName: _jsxFileName$f,
+        lineNumber: 69,
         columnNumber: 5
       }
     }, children);
@@ -811,7 +906,6 @@ ${cartFragment}
     return shopContext;
   }
   const CART_ID_STORAGE_KEY = "shopifyCartId";
-  const STOREFRONT_API_PUBLIC_TOKEN_HEADER = "X-Shopify-Storefront-Access-Token";
   const SHOPIFY_STOREFRONT_ID_HEADER = "Shopify-Storefront-Id";
   const SHOPIFY_STOREFRONT_Y_HEADER = "Shopify-Storefront-Y";
   const SHOPIFY_STOREFRONT_S_HEADER = "Shopify-Storefront-S";
@@ -842,21 +936,17 @@ ${cartFragment}
   }
   function useCartFetch() {
     const {
-      storeDomain,
-      storefrontApiVersion,
-      storefrontToken,
-      storefrontId
+      storefrontId,
+      getPublicTokenHeaders,
+      getStorefrontApiUrl
     } = useShop();
     return React.useCallback(({
       query,
       variables
     }) => {
-      const headers = {
-        "Content-Type": "application/json",
-        "X-SDK-Variant": "hydrogen",
-        "X-SDK-Version": storefrontApiVersion,
-        [STOREFRONT_API_PUBLIC_TOKEN_HEADER]: storefrontToken
-      };
+      const headers = getPublicTokenHeaders({
+        contentType: "json"
+      });
       if (storefrontId) {
         headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
       }
@@ -865,7 +955,7 @@ ${cartFragment}
         headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];
         headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];
       }
-      return fetch(`https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`, {
+      return fetch(getStorefrontApiUrl(), {
         method: "POST",
         headers,
         body: JSON.stringify({
@@ -878,7 +968,7 @@ ${cartFragment}
           errors: error.toString()
         };
       });
-    }, [storeDomain, storefrontApiVersion, storefrontToken, storefrontId]);
+    }, [getPublicTokenHeaders, storefrontId, getStorefrontApiUrl]);
   }
   function useCartActions({
     numCartLines,
@@ -1312,7 +1402,7 @@ ${cartFragment}
   function isCartFetchResultEvent(event) {
     return event.type === "RESOLVE" || event.type === "ERROR" || event.type === "CART_COMPLETED";
   }
-  var _jsxFileName$a = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/CartProvider.tsx";
+  var _jsxFileName$e = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/CartProvider.tsx";
   const CartContext = React.createContext(null);
   function useCart() {
     const context = React.useContext(CartContext);
@@ -1625,7 +1715,7 @@ ${cartFragment}
       value: cartContextValue,
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$e,
         lineNumber: 425,
         columnNumber: 5
       }
@@ -1791,101 +1881,440 @@ fragment ImageFragment on Image {
   height
 }
 `;
-  var _jsxFileName$9 = "/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`);
+  var _jsxFileName$d = "/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'`);
     }
-    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]);
+    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;
       }
-      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,
+      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$9,
-        lineNumber: 56,
+        fileName: _jsxFileName$d,
+        lineNumber: 201,
         columnNumber: 5
       }
-    });
+    }, children);
   }
-  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());
+  function useProduct() {
+    const context = React.useContext(ProductOptionsContext);
+    if (!context) {
+      throw new Error(`'useProduct' must be a child of <ProductProvider />`);
     }
-    crop && newUrl.searchParams.append("crop", crop);
-    return newUrl.toString();
+    return context;
   }
-  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;
+  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 addImageSizeParametersToUrl(params);
+    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 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)) {
+  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$c = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/BaseButton.tsx";
+  function BaseButton(props) {
+    const {
+      as,
+      onClick,
+      defaultOnClick,
+      children,
+      buttonRef,
+      ...passthroughProps
+    } = props;
+    const handleOnClick = React.useCallback((event) => {
+      if (onClick) {
+        const clickShouldContinue = onClick(event);
+        if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
+          return;
+      }
+      defaultOnClick == null ? void 0 : defaultOnClick(event);
+    }, [defaultOnClick, onClick]);
+    const Component = as || "button";
+    return /* @__PURE__ */ React__default.default.createElement(Component, {
+      ref: buttonRef,
+      onClick: handleOnClick,
+      ...passthroughProps,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 59,
+        columnNumber: 5
+      }
+    }, children);
+  }
+  var _jsxFileName$b = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/AddToCartButton.tsx";
+  function AddToCartButton(props) {
+    var _a;
+    const [addingItem, setAddingItem] = React.useState(false);
+    const {
+      variantId: explicitVariantId,
+      quantity = 1,
+      attributes,
+      sellingPlanId,
+      onClick,
+      children,
+      accessibleAddingToCartLabel,
+      ...passthroughProps
+    } = props;
+    const {
+      status,
+      linesAdd
+    } = useCart();
+    const {
+      selectedVariant
+    } = useProduct();
+    const variantId = (_a = explicitVariantId != null ? explicitVariantId : selectedVariant == null ? void 0 : selectedVariant.id) != null ? _a : "";
+    const disabled = explicitVariantId === null || variantId === "" || selectedVariant === null || addingItem || passthroughProps.disabled;
+    React.useEffect(() => {
+      if (addingItem && status === "idle") {
+        setAddingItem(false);
+      }
+    }, [status, addingItem]);
+    const handleAddItem = React.useCallback(() => {
+      setAddingItem(true);
+      linesAdd([{
+        quantity,
+        merchandiseId: variantId || "",
+        attributes,
+        sellingPlanId
+      }]);
+    }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);
+    return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(BaseButton, {
+      ...passthroughProps,
+      disabled,
+      onClick,
+      defaultOnClick: handleAddItem,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 71,
+        columnNumber: 7
+      }
+    }, children), accessibleAddingToCartLabel ? /* @__PURE__ */ React__default.default.createElement("p", {
+      style: {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        padding: "0",
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        borderWidth: "0"
+      },
+      role: "alert",
+      "aria-live": "assertive",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 80,
+        columnNumber: 9
+      }
+    }, addingItem ? accessibleAddingToCartLabel : null) : null);
+  }
+  var _jsxFileName$a = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/BuyNowButton.tsx";
+  function BuyNowButton(props) {
+    const {
+      cartCreate,
+      checkoutUrl
+    } = useCart();
+    const [loading, setLoading] = React.useState(false);
+    const {
+      quantity,
+      variantId,
+      onClick,
+      attributes,
+      children,
+      ...passthroughProps
+    } = props;
+    React.useEffect(() => {
+      if (checkoutUrl) {
+        window.location.href = checkoutUrl;
+      }
+    }, [checkoutUrl]);
+    const handleBuyNow = React.useCallback(() => {
+      setLoading(true);
+      cartCreate({
+        lines: [{
+          quantity: quantity != null ? quantity : 1,
+          merchandiseId: variantId,
+          attributes
+        }]
+      });
+    }, [cartCreate, quantity, variantId, attributes]);
+    return /* @__PURE__ */ React__default.default.createElement(BaseButton, {
+      disabled: loading != null ? loading : passthroughProps.disabled,
+      ...passthroughProps,
+      onClick,
+      defaultOnClick: handleBuyNow,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$a,
+        lineNumber: 53,
+        columnNumber: 5
+      }
+    }, children);
+  }
+  var _jsxFileName$9 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/CartCheckoutButton.tsx";
+  function CartCheckoutButton(props) {
+    const [requestedCheckout, setRequestedCheckout] = React.useState(false);
+    const {
+      status,
+      checkoutUrl
+    } = useCart();
+    const {
+      children,
+      ...passthroughProps
+    } = props;
+    React.useEffect(() => {
+      if (requestedCheckout && checkoutUrl && status === "idle") {
+        window.location.href = checkoutUrl;
+      }
+    }, [requestedCheckout, status, checkoutUrl]);
+    return /* @__PURE__ */ React__default.default.createElement(BaseButton, {
+      ...passthroughProps,
+      disabled: requestedCheckout || passthroughProps.disabled,
+      onClick: () => setRequestedCheckout(true),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 28,
+        columnNumber: 5
+      }
+    }, children);
+  }
+  const storefrontApiCustomScalars = {
+    DateTime: "string",
+    Decimal: "string",
+    HTML: "string",
+    URL: "string",
+    Color: "string",
+    UnsignedInt64: "string"
+  };
+  var _jsxFileName$8 = "/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$8,
+        lineNumber: 56,
+        columnNumber: 5
+      }
+    });
+  }
+  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
@@ -1905,7 +2334,7 @@ fragment ImageFragment on Image {
     }
     return { width: null, height: null };
   }
-  var _jsxFileName$8 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/Image.tsx";
+  var _jsxFileName$7 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/Image.tsx";
   function Image({
     data,
     width,
@@ -1974,7 +2403,7 @@ fragment ImageFragment on Image {
       decoding,
       __self: this,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$7,
         lineNumber: 150,
         columnNumber: 5
       }
@@ -2010,7 +2439,7 @@ fragment ImageFragment on Image {
       scale
     })} ${size}w`).join(", ");
   }
-  var _jsxFileName$7 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/Video.tsx";
+  var _jsxFileName$6 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/Video.tsx";
   function Video(props) {
     var _a, _b;
     const {
@@ -2037,7 +2466,7 @@ fragment ImageFragment on Image {
       poster: posterUrl,
       __self: this,
       __source: {
-        fileName: _jsxFileName$7,
+        fileName: _jsxFileName$6,
         lineNumber: 42,
         columnNumber: 5
       }
@@ -2052,7 +2481,7 @@ fragment ImageFragment on Image {
         type: source.mimeType,
         __self: this,
         __source: {
-          fileName: _jsxFileName$7,
+          fileName: _jsxFileName$6,
           lineNumber: 54,
           columnNumber: 11
         }
@@ -2105,7 +2534,7 @@ fragment ImageFragment on Image {
     }, [url, stringifiedOptions, options]);
     return status;
   }
-  var _jsxFileName$6 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ModelViewer.tsx";
+  var _jsxFileName$5 = "/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);
@@ -2243,13 +2672,13 @@ fragment ImageFragment on Image {
       scale: passthroughProps.scale,
       __self: this,
       __source: {
-        fileName: _jsxFileName$6,
+        fileName: _jsxFileName$5,
         lineNumber: 222,
         columnNumber: 5
       }
     }, children);
   }
-  var _jsxFileName$5 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/MediaFile.tsx";
+  var _jsxFileName$4 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/MediaFile.tsx";
   function MediaFile({
     data,
     mediaOptions,
@@ -2269,8 +2698,8 @@ fragment ImageFragment on Image {
           data: data.image,
           __self: this,
           __source: {
-            fileName: _jsxFileName$5,
-            lineNumber: 50,
+            fileName: _jsxFileName$4,
+            lineNumber: 54,
             columnNumber: 9
           }
         });
@@ -2282,8 +2711,8 @@ fragment ImageFragment on Image {
           data,
           __self: this,
           __source: {
-            fileName: _jsxFileName$5,
-            lineNumber: 59,
+            fileName: _jsxFileName$4,
+            lineNumber: 63,
             columnNumber: 9
           }
         });
@@ -2295,8 +2724,8 @@ fragment ImageFragment on Image {
           data,
           __self: this,
           __source: {
-            fileName: _jsxFileName$5,
-            lineNumber: 64,
+            fileName: _jsxFileName$4,
+            lineNumber: 68,
             columnNumber: 9
           }
         });
@@ -2308,8 +2737,8 @@ fragment ImageFragment on Image {
           data,
           __self: this,
           __source: {
-            fileName: _jsxFileName$5,
-            lineNumber: 73,
+            fileName: _jsxFileName$4,
+            lineNumber: 78,
             columnNumber: 9
           }
         });
@@ -2322,7 +2751,7 @@ fragment ImageFragment on Image {
       }
     }
   }
-  var _jsxFileName$4 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/Metafield.tsx";
+  var _jsxFileName$3 = "/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 {
@@ -2353,7 +2782,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 68,
             columnNumber: 9
           }
@@ -2365,7 +2794,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 76,
             columnNumber: 9
           }
@@ -2379,7 +2808,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 86,
             columnNumber: 9
           }
@@ -2391,7 +2820,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 94,
             columnNumber: 9
           }
@@ -2406,7 +2835,7 @@ fragment ImageFragment on Image {
           },
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 102,
             columnNumber: 9
           }
@@ -2421,7 +2850,7 @@ fragment ImageFragment on Image {
           },
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 111,
             columnNumber: 9
           }
@@ -2434,7 +2863,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 122,
             columnNumber: 9
           }
@@ -2446,7 +2875,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 133,
             columnNumber: 9
           }
@@ -2461,7 +2890,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 144,
             columnNumber: 9
           }
@@ -2474,7 +2903,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 154,
             columnNumber: 9
           }
@@ -2482,7 +2911,7 @@ fragment ImageFragment on Image {
           key: `${ref != null ? ref : ""}-${index2}`,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 158,
             columnNumber: 13
           }
@@ -2496,7 +2925,7 @@ fragment ImageFragment on Image {
             ...passthroughProps,
             __self: this,
             __source: {
-              fileName: _jsxFileName$4,
+              fileName: _jsxFileName$3,
               lineNumber: 167,
               columnNumber: 11
             }
@@ -2508,7 +2937,7 @@ fragment ImageFragment on Image {
             ...passthroughProps,
             __self: this,
             __source: {
-              fileName: _jsxFileName$4,
+              fileName: _jsxFileName$3,
               lineNumber: 172,
               columnNumber: 11
             }
@@ -2516,7 +2945,7 @@ fragment ImageFragment on Image {
             data: ref.previewImage,
             __self: this,
             __source: {
-              fileName: _jsxFileName$4,
+              fileName: _jsxFileName$3,
               lineNumber: 173,
               columnNumber: 13
             }
@@ -2528,7 +2957,7 @@ fragment ImageFragment on Image {
             data: ref,
             __self: this,
             __source: {
-              fileName: _jsxFileName$4,
+              fileName: _jsxFileName$3,
               lineNumber: 178,
               columnNumber: 16
             }
@@ -2541,13 +2970,16 @@ fragment ImageFragment on Image {
       ...passthroughProps,
       __self: this,
       __source: {
-        fileName: _jsxFileName$4,
+        fileName: _jsxFileName$3,
         lineNumber: 185,
         columnNumber: 5
       }
     }, (_i = parsedMetafield.value) == null ? void 0 : _i.toString());
   }
   function parseMetafield(metafield) {
+    {
+      console.info(`'parseMetafield()' will have a breaking change in a future version; its behavior will match that of 'metafieldParser()'`);
+    }
     if (!metafield) {
       {
         console.warn(`'parseMetafield' was not passed any value for the 'metafield' argument`);
@@ -2563,6 +2995,9 @@ fragment ImageFragment on Image {
     };
   }
   function parseMetafieldValue(metafield) {
+    {
+      console.info(`'parseMetafieldValue()' will be removed in a future version`);
+    }
     if (!metafield) {
       return null;
     }
@@ -2690,6 +3125,103 @@ fragment ImageFragment on Image {
         throw new Error(`Unit not supported: ${unit}`);
     }
   }
+  function metafieldParser(metafield) {
+    var _a, _b, _c, _d;
+    if (!metafield.type) {
+      const noTypeError = `metafieldParser(): The 'type' field is required in order to parse the Metafield.`;
+      {
+        throw new Error(noTypeError);
+      }
+    }
+    switch (metafield.type) {
+      case "boolean":
+        return {
+          ...metafield,
+          parsedValue: metafield.value === "true"
+        };
+      case "collection_reference":
+      case "file_reference":
+      case "page_reference":
+      case "product_reference":
+      case "variant_reference":
+        return {
+          ...metafield,
+          parsedValue: metafield.reference
+        };
+      case "color":
+      case "multi_line_text_field":
+      case "single_line_text_field":
+      case "url":
+        return {
+          ...metafield,
+          parsedValue: metafield.value
+        };
+      case "dimension":
+      case "money":
+      case "json":
+      case "rating":
+      case "volume":
+      case "weight":
+      case "list.color":
+      case "list.dimension":
+      case "list.number_integer":
+      case "list.number_decimal":
+      case "list.rating":
+      case "list.single_line_text_field":
+      case "list.url":
+      case "list.volume":
+      case "list.weight": {
+        let parsedValue = null;
+        try {
+          parsedValue = parseJSON((_a = metafield.value) != null ? _a : "");
+        } catch (err) {
+          const parseError = `metafieldParser(): attempted to JSON.parse the 'metafield.value' property, but failed.`;
+          {
+            throw new Error(parseError);
+          }
+        }
+        return {
+          ...metafield,
+          parsedValue
+        };
+      }
+      case "date":
+      case "date_time":
+        return {
+          ...metafield,
+          parsedValue: new Date((_b = metafield.value) != null ? _b : "")
+        };
+      case "list.date":
+      case "list.date_time": {
+        const jsonParseValue = parseJSON((_c = metafield == null ? void 0 : metafield.value) != null ? _c : "");
+        return {
+          ...metafield,
+          parsedValue: jsonParseValue.map((dateString) => new Date(dateString))
+        };
+      }
+      case "number_decimal":
+      case "number_integer":
+        return {
+          ...metafield,
+          parsedValue: Number(metafield.value)
+        };
+      case "list.collection_reference":
+      case "list.file_reference":
+      case "list.page_reference":
+      case "list.product_reference":
+      case "list.variant_reference":
+        return {
+          ...metafield,
+          parsedValue: flattenConnection((_d = metafield.references) != null ? _d : void 0)
+        };
+      default: {
+        const typeNotFoundError = `metafieldParser(): the 'metafield.type' you passed in is not supported. Your type: "${metafield.type}". If you believe this is an error, please open an issue on GitHub.`;
+        {
+          throw new Error(typeNotFoundError);
+        }
+      }
+    }
+  }
   function useMoney(money) {
     const {
       locale
@@ -2756,7 +3288,7 @@ fragment ImageFragment on Image {
       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";
+  var _jsxFileName$2 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/Money.tsx";
   function Money({
     data,
     as,
@@ -2785,7 +3317,7 @@ fragment ImageFragment on Image {
       ...passthroughProps,
       __self: this,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$2,
         lineNumber: 65,
         columnNumber: 5
       }
@@ -2794,7 +3326,7 @@ fragment ImageFragment on Image {
   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";
+  var _jsxFileName$1 = "/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 {
@@ -2844,7 +3376,7 @@ fragment ImageFragment on Image {
         measurement,
         __self: this,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$1,
           lineNumber: 81,
           columnNumber: 7
         }
@@ -2855,171 +3387,12 @@ fragment ImageFragment on Image {
       data: price,
       __self: this,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$1,
         lineNumber: 85,
         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({
@@ -3086,73 +3459,9 @@ fragment ImageFragment on Image {
   }
   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.AddToCartButton = AddToCartButton;
+  exports2.BuyNowButton = BuyNowButton;
+  exports2.CartCheckoutButton = CartCheckoutButton;
   exports2.CartProvider = CartProvider;
   exports2.ExternalVideo = ExternalVideo;
   exports2.Image = Image;
@@ -3167,8 +3476,10 @@ fragment ImageFragment on Image {
   exports2.Video = Video;
   exports2.createStorefrontClient = createStorefrontClient;
   exports2.flattenConnection = flattenConnection;
+  exports2.metafieldParser = metafieldParser;
   exports2.parseMetafield = parseMetafield;
   exports2.parseMetafieldValue = parseMetafieldValue;
+  exports2.storefrontApiCustomScalars = storefrontApiCustomScalars;
   exports2.useCart = useCart;
   exports2.useMoney = useMoney;
   exports2.useProduct = useProduct;