@shopify/hydrogen-react 0.0.0-next-81b4528 → 0.0.0-next-a09da91

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$d = "/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$d,
         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$c = "/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$c,
         lineNumber: 425,
         columnNumber: 5
       }
@@ -1791,7 +1791,267 @@ fragment ImageFragment on Image {
   height
 }
 `;
-  var _jsxFileName$9 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ExternalVideo.tsx";
+  var _jsxFileName$b = "/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$b,
+        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$a = "/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$a,
+        lineNumber: 59,
+        columnNumber: 5
+      }
+    }, children);
+  }
+  var _jsxFileName$9 = "/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$9,
+        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$9,
+        lineNumber: 80,
+        columnNumber: 9
+      }
+    }, addingItem ? accessibleAddingToCartLabel : null) : null);
+  }
+  var _jsxFileName$8 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ExternalVideo.tsx";
   function ExternalVideo(props) {
     var _a, _b;
     const {
@@ -1826,7 +2086,7 @@ fragment ImageFragment on Image {
       loading,
       __self: this,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$8,
         lineNumber: 56,
         columnNumber: 5
       }
@@ -1905,7 +2165,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 +2234,7 @@ fragment ImageFragment on Image {
       decoding,
       __self: this,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$7,
         lineNumber: 150,
         columnNumber: 5
       }
@@ -2010,7 +2270,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 +2297,7 @@ fragment ImageFragment on Image {
       poster: posterUrl,
       __self: this,
       __source: {
-        fileName: _jsxFileName$7,
+        fileName: _jsxFileName$6,
         lineNumber: 42,
         columnNumber: 5
       }
@@ -2052,7 +2312,7 @@ fragment ImageFragment on Image {
         type: source.mimeType,
         __self: this,
         __source: {
-          fileName: _jsxFileName$7,
+          fileName: _jsxFileName$6,
           lineNumber: 54,
           columnNumber: 11
         }
@@ -2105,7 +2365,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 +2503,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,7 +2529,7 @@ fragment ImageFragment on Image {
           data: data.image,
           __self: this,
           __source: {
-            fileName: _jsxFileName$5,
+            fileName: _jsxFileName$4,
             lineNumber: 54,
             columnNumber: 9
           }
@@ -2282,7 +2542,7 @@ fragment ImageFragment on Image {
           data,
           __self: this,
           __source: {
-            fileName: _jsxFileName$5,
+            fileName: _jsxFileName$4,
             lineNumber: 63,
             columnNumber: 9
           }
@@ -2295,7 +2555,7 @@ fragment ImageFragment on Image {
           data,
           __self: this,
           __source: {
-            fileName: _jsxFileName$5,
+            fileName: _jsxFileName$4,
             lineNumber: 68,
             columnNumber: 9
           }
@@ -2308,7 +2568,7 @@ fragment ImageFragment on Image {
           data,
           __self: this,
           __source: {
-            fileName: _jsxFileName$5,
+            fileName: _jsxFileName$4,
             lineNumber: 78,
             columnNumber: 9
           }
@@ -2322,7 +2582,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 +2613,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 68,
             columnNumber: 9
           }
@@ -2365,7 +2625,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 76,
             columnNumber: 9
           }
@@ -2379,7 +2639,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 86,
             columnNumber: 9
           }
@@ -2391,7 +2651,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 94,
             columnNumber: 9
           }
@@ -2406,7 +2666,7 @@ fragment ImageFragment on Image {
           },
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 102,
             columnNumber: 9
           }
@@ -2421,7 +2681,7 @@ fragment ImageFragment on Image {
           },
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 111,
             columnNumber: 9
           }
@@ -2434,7 +2694,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 122,
             columnNumber: 9
           }
@@ -2446,7 +2706,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 133,
             columnNumber: 9
           }
@@ -2461,7 +2721,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 144,
             columnNumber: 9
           }
@@ -2474,7 +2734,7 @@ fragment ImageFragment on Image {
           ...passthroughProps,
           __self: this,
           __source: {
-            fileName: _jsxFileName$4,
+            fileName: _jsxFileName$3,
             lineNumber: 154,
             columnNumber: 9
           }
@@ -2482,7 +2742,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 +2756,7 @@ fragment ImageFragment on Image {
             ...passthroughProps,
             __self: this,
             __source: {
-              fileName: _jsxFileName$4,
+              fileName: _jsxFileName$3,
               lineNumber: 167,
               columnNumber: 11
             }
@@ -2508,7 +2768,7 @@ fragment ImageFragment on Image {
             ...passthroughProps,
             __self: this,
             __source: {
-              fileName: _jsxFileName$4,
+              fileName: _jsxFileName$3,
               lineNumber: 172,
               columnNumber: 11
             }
@@ -2516,7 +2776,7 @@ fragment ImageFragment on Image {
             data: ref.previewImage,
             __self: this,
             __source: {
-              fileName: _jsxFileName$4,
+              fileName: _jsxFileName$3,
               lineNumber: 173,
               columnNumber: 13
             }
@@ -2528,7 +2788,7 @@ fragment ImageFragment on Image {
             data: ref,
             __self: this,
             __source: {
-              fileName: _jsxFileName$4,
+              fileName: _jsxFileName$3,
               lineNumber: 178,
               columnNumber: 16
             }
@@ -2541,7 +2801,7 @@ fragment ImageFragment on Image {
       ...passthroughProps,
       __self: this,
       __source: {
-        fileName: _jsxFileName$4,
+        fileName: _jsxFileName$3,
         lineNumber: 185,
         columnNumber: 5
       }
@@ -2859,7 +3119,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,
@@ -2888,7 +3148,7 @@ fragment ImageFragment on Image {
       ...passthroughProps,
       __self: this,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$2,
         lineNumber: 65,
         columnNumber: 5
       }
@@ -2897,7 +3157,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 {
@@ -2947,7 +3207,7 @@ fragment ImageFragment on Image {
         measurement,
         __self: this,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$1,
           lineNumber: 81,
           columnNumber: 7
         }
@@ -2958,171 +3218,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({
@@ -3256,6 +3357,7 @@ fragment ImageFragment on Image {
       }
     };
   }
+  exports2.AddToCartButton = AddToCartButton;
   exports2.CartProvider = CartProvider;
   exports2.ExternalVideo = ExternalVideo;
   exports2.Image = Image;