@shopify/hydrogen-react 2022.10.0 → 2022.10.2

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

@@ -766,7 +766,7 @@ 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";
+  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",
@@ -797,7 +797,7 @@ ${cartFragment}
       value: finalConfig,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 49,
         columnNumber: 5
       }
@@ -1312,7 +1312,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 +1625,7 @@ ${cartFragment}
       value: cartContextValue,
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$e,
         lineNumber: 425,
         columnNumber: 5
       }
@@ -1791,7 +1791,338 @@ fragment ImageFragment on Image {
   height
 }
 `;
-  var _jsxFileName$9 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ExternalVideo.tsx";
+  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'`);
+    }
+    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$d,
+        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$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);
+  }
+  var _jsxFileName$8 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ExternalVideo.tsx";
   function ExternalVideo(props) {
     var _a, _b;
     const {
@@ -1826,7 +2157,7 @@ fragment ImageFragment on Image {
       loading,
       __self: this,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$8,
         lineNumber: 56,
         columnNumber: 5
       }
@@ -1905,7 +2236,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 +2305,7 @@ fragment ImageFragment on Image {
       decoding,
       __self: this,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$7,
         lineNumber: 150,
         columnNumber: 5
       }
@@ -2010,7 +2341,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 +2368,7 @@ fragment ImageFragment on Image {
       poster: posterUrl,
       __self: this,
       __source: {
-        fileName: _jsxFileName$7,
+        fileName: _jsxFileName$6,
         lineNumber: 42,
         columnNumber: 5
       }
@@ -2052,7 +2383,7 @@ fragment ImageFragment on Image {
         type: source.mimeType,
         __self: this,
         __source: {
-          fileName: _jsxFileName$7,
+          fileName: _jsxFileName$6,
           lineNumber: 54,
           columnNumber: 11
         }
@@ -2105,7 +2436,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 +2574,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 +2600,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 +2613,8 @@ fragment ImageFragment on Image {
           data,
           __self: this,
           __source: {
-            fileName: _jsxFileName$5,
-            lineNumber: 59,
+            fileName: _jsxFileName$4,
+            lineNumber: 63,
             columnNumber: 9
           }
         });
@@ -2295,8 +2626,8 @@ fragment ImageFragment on Image {
           data,
           __self: this,
           __source: {
-            fileName: _jsxFileName$5,
-            lineNumber: 64,
+            fileName: _jsxFileName$4,
+            lineNumber: 68,
             columnNumber: 9
           }
         });
@@ -2308,8 +2639,8 @@ fragment ImageFragment on Image {
           data,
           __self: this,
           __source: {
-            fileName: _jsxFileName$5,
-            lineNumber: 73,
+            fileName: _jsxFileName$4,
+            lineNumber: 78,
             columnNumber: 9
           }
         });
@@ -2322,7 +2653,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 +2684,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 68,
             columnNumber: 9
           }
@@ -2365,7 +2696,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 76,
             columnNumber: 9
           }
@@ -2379,7 +2710,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 86,
             columnNumber: 9
           }
@@ -2391,7 +2722,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 94,
             columnNumber: 9
           }
@@ -2406,7 +2737,7 @@ fragment ImageFragment on Image {
           },
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 102,
             columnNumber: 9
           }
@@ -2421,7 +2752,7 @@ fragment ImageFragment on Image {
           },
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 111,
             columnNumber: 9
           }
@@ -2434,7 +2765,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 122,
             columnNumber: 9
           }
@@ -2446,7 +2777,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 133,
             columnNumber: 9
           }
@@ -2461,7 +2792,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 144,
             columnNumber: 9
           }
@@ -2474,7 +2805,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 154,
             columnNumber: 9
           }
@@ -2482,7 +2813,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 +2827,7 @@ fragment ImageFragment on Image {
             ...passthroughProps,
             __self: this,
             __source: {
-              fileName: _jsxFileName$4,
+              fileName: _jsxFileName$3,
               lineNumber: 167,
               columnNumber: 11
             }
@@ -2508,7 +2839,7 @@ fragment ImageFragment on Image {
             ...passthroughProps,
             __self: this,
             __source: {
-              fileName: _jsxFileName$4,
+              fileName: _jsxFileName$3,
               lineNumber: 172,
               columnNumber: 11
             }
@@ -2516,7 +2847,7 @@ fragment ImageFragment on Image {
             data: ref.previewImage,
             __self: this,
             __source: {
-              fileName: _jsxFileName$4,
+              fileName: _jsxFileName$3,
               lineNumber: 173,
               columnNumber: 13
             }
@@ -2528,7 +2859,7 @@ fragment ImageFragment on Image {
             data: ref,
             __self: this,
             __source: {
-              fileName: _jsxFileName$4,
+              fileName: _jsxFileName$3,
               lineNumber: 178,
               columnNumber: 16
             }
@@ -2541,13 +2872,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 +2897,9 @@ fragment ImageFragment on Image {
     };
   }
   function parseMetafieldValue(metafield) {
+    {
+      console.info(`'parseMetafieldValue()' will be removed in a future version`);
+    }
     if (!metafield) {
       return null;
     }
@@ -2690,6 +3027,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 +3190,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 +3219,7 @@ fragment ImageFragment on Image {
       ...passthroughProps,
       __self: this,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$2,
         lineNumber: 65,
         columnNumber: 5
       }
@@ -2794,7 +3228,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 +3278,7 @@ fragment ImageFragment on Image {
         measurement,
         __self: this,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$1,
           lineNumber: 81,
           columnNumber: 7
         }
@@ -2855,171 +3289,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({
@@ -3095,7 +3370,7 @@ fragment ImageFragment on Image {
   }) {
     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}`
+        `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) {
@@ -3153,6 +3428,9 @@ fragment ImageFragment on Image {
       }
     };
   }
+  exports2.AddToCartButton = AddToCartButton;
+  exports2.BuyNowButton = BuyNowButton;
+  exports2.CartCheckoutButton = CartCheckoutButton;
   exports2.CartProvider = CartProvider;
   exports2.ExternalVideo = ExternalVideo;
   exports2.Image = Image;
@@ -3167,6 +3445,7 @@ fragment ImageFragment on Image {
   exports2.Video = Video;
   exports2.createStorefrontClient = createStorefrontClient;
   exports2.flattenConnection = flattenConnection;
+  exports2.metafieldParser = metafieldParser;
   exports2.parseMetafield = parseMetafield;
   exports2.parseMetafieldValue = parseMetafieldValue;
   exports2.useCart = useCart;