@shopify/hydrogen-react 2022.10.7 → 2023.1.4

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

@@ -1,11 +1,8 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react")) : typeof define === "function" && define.amd ? define(["exports", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.hydrogenreact = {}, global.React));
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react")) : typeof define === "function" && define.amd ? define(["exports", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.storefrontkitreact = {}, global.React));
 })(this, function(exports2, React) {
   "use strict";
-  const _interopDefaultLegacy = (e2) => e2 && typeof e2 === "object" && "default" in e2 ? e2 : { default: e2 };
-  function _interopNamespace(e2) {
-    if (e2 && e2.__esModule)
-      return e2;
+  function _interopNamespaceDefault(e2) {
     const n2 = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
     if (e2) {
       for (const k in e2) {
@@ -21,8 +18,7 @@
     n2.default = e2;
     return Object.freeze(n2);
   }
-  const React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
-  const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+  const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
   /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
   
@@ -144,7 +140,7 @@
     } };
     return y;
   }
-  var l = function(t2, n2) {
+  var l$1 = function(t2, n2) {
     return t2.actions.forEach(function(e2) {
       var r2 = e2.exec;
       return r2 && r2(t2.context, n2);
@@ -152,7 +148,7 @@
   };
   function v(t2) {
     var r2 = t2.initialState, i2 = n.NotStarted, o2 = /* @__PURE__ */ new Set(), c2 = { _machine: t2, send: function(e2) {
-      i2 === n.Running && (r2 = t2.transition(r2, e2), l(r2, u$1(e2)), o2.forEach(function(t3) {
+      i2 === n.Running && (r2 = t2.transition(r2, e2), l$1(r2, u$1(e2)), o2.forEach(function(t3) {
         return t3(r2);
       }));
     }, subscribe: function(t3) {
@@ -165,7 +161,7 @@
         r2 = { value: u2.value, actions: [], context: u2.context, matches: a(u2.value) };
       } else
         r2 = t2.initialState;
-      return i2 = n.Running, l(r2, e), c2;
+      return i2 = n.Running, l$1(r2, e), c2;
     }, stop: function() {
       return i2 = n.Stopped, o2.clear(), c2;
     }, get state() {
@@ -176,9 +172,25 @@
     return c2;
   }
   var index = React.useLayoutEffect;
-  var withSelector = { exports: {} };
+  var withSelectorExports = {};
+  var withSelector = {
+    get exports() {
+      return withSelectorExports;
+    },
+    set exports(v2) {
+      withSelectorExports = v2;
+    }
+  };
   var withSelector_production_min = {};
-  var shim = { exports: {} };
+  var shimExports = {};
+  var shim = {
+    get exports() {
+      return shimExports;
+    },
+    set exports(v2) {
+      shimExports = v2;
+    }
+  };
   var useSyncExternalStoreShim_production_min = {};
   /**
    * @license React
@@ -194,7 +206,7 @@
     if (hasRequiredUseSyncExternalStoreShim_production_min)
       return useSyncExternalStoreShim_production_min;
     hasRequiredUseSyncExternalStoreShim_production_min = 1;
-    var e2 = React__default.default;
+    var e2 = React;
     function h(a2, b) {
       return a2 === b && (0 !== a2 || 1 / a2 === 1 / b) || a2 !== a2 && b !== b;
     }
@@ -252,8 +264,8 @@
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
-        var React2 = React__default.default;
-        var ReactSharedInternals = React2.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+        var React$1 = React;
+        var ReactSharedInternals = React$1.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
         function error(format) {
           {
             {
@@ -283,13 +295,13 @@
           return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
         }
         var objectIs = typeof Object.is === "function" ? Object.is : is;
-        var useState = React2.useState, useEffect = React2.useEffect, useLayoutEffect = React2.useLayoutEffect, useDebugValue = React2.useDebugValue;
+        var useState = React$1.useState, useEffect = React$1.useEffect, useLayoutEffect = React$1.useLayoutEffect, useDebugValue = React$1.useDebugValue;
         var didWarnOld18Alpha = false;
         var didWarnUncachedGetSnapshot = false;
         function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
           {
             if (!didWarnOld18Alpha) {
-              if (React2.startTransition !== void 0) {
+              if (React$1.startTransition !== void 0) {
                 didWarnOld18Alpha = true;
                 error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release.");
               }
@@ -354,7 +366,7 @@
         var canUseDOM = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
         var isServerEnvironment = !canUseDOM;
         var shim2 = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore;
-        var useSyncExternalStore$2 = React2.useSyncExternalStore !== void 0 ? React2.useSyncExternalStore : shim2;
+        var useSyncExternalStore$2 = React$1.useSyncExternalStore !== void 0 ? React$1.useSyncExternalStore : shim2;
         useSyncExternalStoreShim_development.useSyncExternalStore = useSyncExternalStore$2;
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
@@ -366,7 +378,7 @@
   var hasRequiredShim;
   function requireShim() {
     if (hasRequiredShim)
-      return shim.exports;
+      return shimExports;
     hasRequiredShim = 1;
     (function(module2) {
       if (process.env.NODE_ENV === "production") {
@@ -375,7 +387,7 @@
         module2.exports = requireUseSyncExternalStoreShim_development();
       }
     })(shim);
-    return shim.exports;
+    return shimExports;
   }
   /**
    * @license React
@@ -391,7 +403,7 @@
     if (hasRequiredWithSelector_production_min)
       return withSelector_production_min;
     hasRequiredWithSelector_production_min = 1;
-    var h = React__default.default, n2 = requireShim();
+    var h = React, n2 = requireShim();
     function p(a2, b) {
       return a2 === b && (0 !== a2 || 1 / a2 === 1 / b) || a2 !== a2 && b !== b;
     }
@@ -462,14 +474,14 @@
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
-        var React2 = React__default.default;
+        var React$1 = React;
         var shim2 = requireShim();
         function is(x, y) {
           return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
         }
         var objectIs = typeof Object.is === "function" ? Object.is : is;
         var useSyncExternalStore = shim2.useSyncExternalStore;
-        var useRef = React2.useRef, useEffect = React2.useEffect, useMemo = React2.useMemo, useDebugValue = React2.useDebugValue;
+        var useRef = React$1.useRef, useEffect = React$1.useEffect, useMemo = React$1.useMemo, useDebugValue = React$1.useDebugValue;
         function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual2) {
           var instRef = useRef(null);
           var inst;
@@ -635,35 +647,39 @@
       var unsubscribe = service.subscribe(handleStoreChange).unsubscribe;
       return unsubscribe;
     }, [service]);
-    var storeSnapshot = withSelector.exports.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+    var storeSnapshot = withSelectorExports.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
     return [storeSnapshot, service.send, service];
   }
   function flattenConnection(connection) {
     if (!connection) {
-      const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead`;
+      const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead.`;
       {
         throw new Error(noConnectionErr);
       }
     }
-    if (connection.nodes) {
+    if ("nodes" in connection) {
       return connection.nodes;
     }
-    if (connection.edges) {
+    if ("edges" in connection && Array.isArray(connection.edges)) {
       return connection.edges.map((edge) => {
         if (!(edge == null ? void 0 : edge.node)) {
-          throw new Error("Connection edges must contain nodes");
+          throw new Error(
+            "flattenConnection(): Connection edges must contain nodes"
+          );
         }
         return edge.node;
       });
     }
     {
       console.warn(
-        `The connection did not contain either "nodes" or "edges.node". A empty array will be returned in its place.`
+        `flattenConnection(): The connection did not contain either "nodes" or "edges.node". Returning an empty array.`
       );
     }
     return [];
   }
-  const CartLineAdd = (cartFragment) => `
+  const CartLineAdd = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartLineAdd(
     $cartId: ID!
     $lines: [CartLineInput!]!
@@ -678,8 +694,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartCreate = (cartFragment) => `
+`
+  );
+  const CartCreate = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartCreate(
     $input: CartInput!
     $numCartLines: Int = 250
@@ -693,8 +712,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartLineRemove = (cartFragment) => `
+`
+  );
+  const CartLineRemove = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartLineRemove(
     $cartId: ID!
     $lines: [ID!]!
@@ -709,8 +731,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartLineUpdate = (cartFragment) => `
+`
+  );
+  const CartLineUpdate = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartLineUpdate(
     $cartId: ID!
     $lines: [CartLineUpdateInput!]!
@@ -725,8 +750,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartNoteUpdate = (cartFragment) => `
+`
+  );
+  const CartNoteUpdate = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartNoteUpdate(
     $cartId: ID!
     $note: String
@@ -741,8 +769,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartBuyerIdentityUpdate = (cartFragment) => `
+`
+  );
+  const CartBuyerIdentityUpdate = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartBuyerIdentityUpdate(
     $cartId: ID!
     $buyerIdentity: CartBuyerIdentityInput!
@@ -757,8 +788,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartAttributesUpdate = (cartFragment) => `
+`
+  );
+  const CartAttributesUpdate = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartAttributesUpdate(
     $attributes: [AttributeInput!]!
     $cartId: ID!
@@ -773,8 +807,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartDiscountCodesUpdate = (cartFragment) => `
+`
+  );
+  const CartDiscountCodesUpdate = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartDiscountCodesUpdate(
     $cartId: ID!
     $discountCodes: [String!]
@@ -789,8 +826,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartQuery = (cartFragment) => `
+`
+  );
+  const CartQuery = (cartFragment) => (
+    /* GraphQL */
+    `
   query CartQuery(
     $id: ID!
     $numCartLines: Int = 250
@@ -802,8 +842,11 @@
   }
 
   ${cartFragment}
-`;
-  const defaultCartFragment = `
+`
+  );
+  const defaultCartFragment = (
+    /* GraphQL */
+    `
   fragment CartFragment on Cart {
     id
     checkoutUrl
@@ -846,17 +889,9 @@
               compareAtPrice {
                 ...MoneyFragment
               }
-              # @deprecated remove in next major
-              compareAtPriceV2 {
-                ...MoneyFragment
-              }
               price {
                 ...MoneyFragment
               }
-              # @deprecated remove in next major
-              priceV2 {
-                ...MoneyFragment
-              }
               requiresShipping
               title
               image {
@@ -911,15 +946,9 @@
     width
     height
   }
-`;
-  const SFAPI_VERSION = "2022-10";
-  const warnings = /* @__PURE__ */ new Set();
-  const warnOnce = (string) => {
-    if (!warnings.has(string)) {
-      console.warn(string);
-      warnings.add(string);
-    }
-  };
+`
+  );
+  const SFAPI_VERSION = "2023-01";
   function createStorefrontClient({
     storeDomain,
     privateStorefrontToken,
@@ -929,7 +958,7 @@
   }) {
     if (storefrontApiVersion !== SFAPI_VERSION) {
       warnOnce(
-        `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 React 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) {
@@ -944,15 +973,13 @@
     }
     return {
       getShopifyDomain(overrideProps) {
-        var _a;
-        return `https://${(_a = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _a : storeDomain}.myshopify.com`;
+        return (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain;
       },
       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`;
+        const finalDomainUrl = (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain;
+        return `${finalDomainUrl}${finalDomainUrl.endsWith("/") ? "" : "/"}api/${(overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) ?? 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()'`
@@ -963,53 +990,55 @@
             `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;
+        const finalContentType = (overrideProps == null ? void 0 : overrideProps.contentType) ?? contentType;
         return {
+          // default to json
           "content-type": finalContentType === "graphql" ? "application/graphql" : "application/json",
-          "X-SDK-Variant": "hydrogen-ui",
+          "X-SDK-Variant": "hydrogen-react",
           "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 : "",
+          "Shopify-Storefront-Private-Token": (overrideProps == null ? void 0 : overrideProps.privateStorefrontToken) ?? privateStorefrontToken ?? "",
           ...(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";
+        const finalContentType = (overrideProps == null ? void 0 : overrideProps.contentType) ?? contentType ?? "json";
         return getPublicTokenHeadersRaw(
           finalContentType,
           storefrontApiVersion,
-          (_d = (_c = overrideProps == null ? void 0 : overrideProps.publicStorefrontToken) != null ? _c : publicStorefrontToken) != null ? _d : ""
+          (overrideProps == null ? void 0 : overrideProps.publicStorefrontToken) ?? publicStorefrontToken ?? ""
         );
       }
     };
   }
   function getPublicTokenHeadersRaw(contentType, storefrontApiVersion, accessToken) {
     return {
+      // default to json
       "content-type": contentType === "graphql" ? "application/graphql" : "application/json",
-      "X-SDK-Variant": "hydrogen-ui",
+      "X-SDK-Variant": "hydrogen-react",
       "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 warnings = /* @__PURE__ */ new Set();
+  const warnOnce = (string) => {
+    if (!warnings.has(string)) {
+      console.warn(string);
+      warnings.add(string);
+    }
+  };
   const ShopifyContext = React.createContext({
     storeDomain: "test",
     storefrontToken: "abc123",
     storefrontApiVersion: SFAPI_VERSION,
-    country: {
-      isoCode: "US"
-    },
-    language: {
-      isoCode: "EN"
-    },
-    locale: "EN-US",
+    countryIsoCode: "US",
+    languageIsoCode: "EN",
     getStorefrontApiUrl() {
       return "";
     },
@@ -1022,57 +1051,41 @@
   });
   function ShopifyProvider({
     children,
-    shopifyConfig
+    ...shopifyConfig
   }) {
-    if (!shopifyConfig) {
-      throw new Error(`The 'shopifyConfig' prop must be passed to '<ShopifyProvider/>'`);
+    if (!shopifyConfig.countryIsoCode || !shopifyConfig.languageIsoCode || !shopifyConfig.storeDomain || !shopifyConfig.storefrontToken || !shopifyConfig.storefrontApiVersion) {
+      throw new Error(
+        `Please provide the necessary props to '<ShopifyProvider/>'`
+      );
     }
     if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {
-      console.warn(`<ShopifyProvider/>: 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.`);
+      console.warn(
+        `<ShopifyProvider/>: This version of Hydrogen React 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 React and the Storefront API.`
+      );
     }
     const finalConfig = React.useMemo(() => {
-      const storeDomain = shopifyConfig.storeDomain.replace(/^https?:\/\//, "");
-      if (storeDomain.includes(".myshopify.com")) {
-        {
-          console.warn(`<ShopifyProvider/>: passing a 'storeDomain' prop that includes '.myshopify.com' will be unsupported in the future. Passing only the subdomain (for example, if the URL is 'test.myshopify.com', passing in 'test') will be the supported way going forward.`);
-        }
-      }
       function getShopifyDomain(overrideProps) {
-        var _a;
-        let subDomain = (_a = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _a : storeDomain;
-        subDomain = subDomain.replace(".myshopify.com", "");
-        return `https://${subDomain}.myshopify.com`;
+        return (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? shopifyConfig.storeDomain;
       }
       return {
         ...shopifyConfig,
-        storeDomain,
         getPublicTokenHeaders(overrideProps) {
-          var _a;
-          return getPublicTokenHeadersRaw(overrideProps.contentType, shopifyConfig.storefrontApiVersion, (_a = overrideProps.storefrontToken) != null ? _a : shopifyConfig.storefrontToken);
+          return getPublicTokenHeadersRaw(
+            overrideProps.contentType,
+            shopifyConfig.storefrontApiVersion,
+            overrideProps.storefrontToken ?? shopifyConfig.storefrontToken
+          );
         },
         getShopifyDomain,
         getStorefrontApiUrl(overrideProps) {
-          var _a, _b, _c;
-          if ((_a = overrideProps == null ? void 0 : overrideProps.storeDomain) == null ? void 0 : _a.includes(".myshopify.com")) {
-            {
-              console.warn(`<ShopifyProvider/>: passing a 'storeDomain' prop that includes '.myshopify.com' will be unsupported in the future. Passing only the subdomain (for example, if the URL is 'test.myshopify.com', passing in 'test') will be the supported way going forward.`);
-            }
-          }
-          return `${getShopifyDomain({
-            storeDomain: (_b = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _b : storeDomain
-          })}/api/${(_c = overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) != null ? _c : shopifyConfig.storefrontApiVersion}/graphql.json`;
+          const finalDomainUrl = getShopifyDomain({
+            storeDomain: (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? shopifyConfig.storeDomain
+          });
+          return `${finalDomainUrl}${finalDomainUrl.endsWith("/") ? "" : "/"}api/${(overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) ?? shopifyConfig.storefrontApiVersion}/graphql.json`;
         }
       };
     }, [shopifyConfig]);
-    return /* @__PURE__ */ React__default.default.createElement(ShopifyContext.Provider, {
-      value: finalConfig,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$f,
-        lineNumber: 99,
-        columnNumber: 5
-      }
-    }, children);
+    return /* @__PURE__ */ React.createElement(ShopifyContext.Provider, { value: finalConfig }, children);
   }
   function useShop() {
     const shopContext = React.useContext(ShopifyContext);
@@ -1110,41 +1123,82 @@
         (s2 = t2.trim().toLowerCase()) && (s2 === "httponly" || s2 === "secure") && (r2[s2] = true);
     return r2;
   }
+  function l(a2, r2, e2 = {}) {
+    let t2 = a2 + "=" + encodeURIComponent(r2);
+    return e2.expires && (t2 += "; Expires=" + new Date(e2.expires).toUTCString()), e2.maxage != null && e2.maxage >= 0 && (t2 += "; Max-Age=" + (e2.maxage | 0)), e2.domain && (t2 += "; Domain=" + e2.domain), e2.path && (t2 += "; Path=" + e2.path), e2.samesite && (t2 += "; SameSite=" + e2.samesite), (e2.secure || e2.samesite === "None") && (t2 += "; Secure"), e2.httponly && (t2 += "; HttpOnly"), t2;
+  }
+  const tokenHash = "xxxx-4xxx-xxxx-xxxxxxxxxxxx";
+  function buildUUID() {
+    let hash = "";
+    try {
+      const crypto = window.crypto;
+      const randomValuesArray = new Uint16Array(31);
+      crypto.getRandomValues(randomValuesArray);
+      let i2 = 0;
+      hash = tokenHash.replace(/[x]/g, (c2) => {
+        const r2 = randomValuesArray[i2] % 16;
+        const v2 = c2 === "x" ? r2 : r2 & 3 | 8;
+        i2++;
+        return v2.toString(16);
+      }).toUpperCase();
+    } catch (err) {
+      hash = tokenHash.replace(/[x]/g, (c2) => {
+        const r2 = Math.random() * 16 | 0;
+        const v2 = c2 === "x" ? r2 : r2 & 3 | 8;
+        return v2.toString(16);
+      }).toUpperCase();
+    }
+    return `${hexTime()}-${hash}`;
+  }
+  function hexTime() {
+    let dateNumber = 0;
+    let perfNumber = 0;
+    dateNumber = new Date().getTime() >>> 0;
+    try {
+      perfNumber = performance.now() >>> 0;
+    } catch (err) {
+      perfNumber = 0;
+    }
+    const output = Math.abs(dateNumber + perfNumber).toString(16).toLowerCase();
+    return output.padStart(8 - output.length, "0");
+  }
+  function getShopifyCookies(cookies) {
+    const cookieData = u(cookies);
+    return {
+      [SHOPIFY_Y]: cookieData[SHOPIFY_Y] || "",
+      [SHOPIFY_S]: cookieData[SHOPIFY_S] || ""
+    };
+  }
   function useCartFetch() {
-    const {
-      storefrontId,
-      getPublicTokenHeaders,
-      getStorefrontApiUrl
-    } = useShop();
-    return React.useCallback(({
-      query,
-      variables
-    }) => {
-      const headers = getPublicTokenHeaders({
-        contentType: "json"
-      });
-      if (storefrontId) {
-        headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
-      }
-      const cookieData = u(document.cookie);
-      if (cookieData[SHOPIFY_Y] && cookieData[SHOPIFY_S]) {
+    const { storefrontId, getPublicTokenHeaders, getStorefrontApiUrl } = useShop();
+    return React.useCallback(
+      ({
+        query,
+        variables
+      }) => {
+        const headers = getPublicTokenHeaders({ contentType: "json" });
+        if (storefrontId) {
+          headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
+        }
+        const cookieData = getShopifyCookies(document.cookie);
         headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];
         headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];
-      }
-      return fetch(getStorefrontApiUrl(), {
-        method: "POST",
-        headers,
-        body: JSON.stringify({
-          query: query.toString(),
-          variables
-        })
-      }).then((res) => res.json()).catch((error) => {
-        return {
-          data: void 0,
-          errors: error.toString()
-        };
-      });
-    }, [getPublicTokenHeaders, storefrontId, getStorefrontApiUrl]);
+        return fetch(getStorefrontApiUrl(), {
+          method: "POST",
+          headers,
+          body: JSON.stringify({
+            query: query.toString(),
+            variables
+          })
+        }).then((res) => res.json()).catch((error) => {
+          return {
+            data: void 0,
+            errors: error.toString()
+          };
+        });
+      },
+      [getPublicTokenHeaders, storefrontId, getStorefrontApiUrl]
+    );
   }
   function useCartActions({
     numCartLines,
@@ -1152,155 +1206,212 @@
     countryCode = "US"
   }) {
     const fetchCart = useCartFetch();
-    const cartFetch = React.useCallback((cartId) => {
-      return fetchCart({
-        query: CartQuery(cartFragment),
-        variables: {
-          id: cartId,
-          numCartLines,
-          country: countryCode
-        }
-      });
-    }, [fetchCart, cartFragment, numCartLines, countryCode]);
-    const cartCreate = React.useCallback((cart) => {
-      return fetchCart({
-        query: CartCreate(cartFragment),
-        variables: {
-          input: cart,
-          numCartLines,
-          country: countryCode
-        }
-      });
-    }, [cartFragment, countryCode, fetchCart, numCartLines]);
-    const cartLineAdd = React.useCallback((cartId, lines) => {
-      return fetchCart({
-        query: CartLineAdd(cartFragment),
-        variables: {
-          cartId,
-          lines,
-          numCartLines,
-          country: countryCode
-        }
-      });
-    }, [cartFragment, countryCode, fetchCart, numCartLines]);
-    const cartLineUpdate = React.useCallback((cartId, lines) => {
-      return fetchCart({
-        query: CartLineUpdate(cartFragment),
-        variables: {
-          cartId,
-          lines,
-          numCartLines,
-          country: countryCode
-        }
-      });
-    }, [cartFragment, countryCode, fetchCart, numCartLines]);
-    const cartLineRemove = React.useCallback((cartId, lines) => {
-      return fetchCart({
-        query: CartLineRemove(cartFragment),
-        variables: {
-          cartId,
-          lines,
-          numCartLines,
-          country: countryCode
-        }
-      });
-    }, [cartFragment, countryCode, fetchCart, numCartLines]);
-    const noteUpdate = React.useCallback((cartId, note) => {
-      return fetchCart({
-        query: CartNoteUpdate(cartFragment),
-        variables: {
-          cartId,
-          note,
-          numCartLines,
-          country: countryCode
-        }
-      });
-    }, [fetchCart, cartFragment, numCartLines, countryCode]);
-    const buyerIdentityUpdate = React.useCallback((cartId, buyerIdentity) => {
-      return fetchCart({
-        query: CartBuyerIdentityUpdate(cartFragment),
-        variables: {
-          cartId,
-          buyerIdentity,
-          numCartLines,
-          country: countryCode
-        }
-      });
-    }, [cartFragment, countryCode, fetchCart, numCartLines]);
-    const cartAttributesUpdate = React.useCallback((cartId, attributes) => {
-      return fetchCart({
-        query: CartAttributesUpdate(cartFragment),
-        variables: {
-          cartId,
-          attributes,
-          numCartLines,
-          country: countryCode
-        }
-      });
-    }, [cartFragment, countryCode, fetchCart, numCartLines]);
-    const discountCodesUpdate = React.useCallback((cartId, discountCodes) => {
-      return fetchCart({
-        query: CartDiscountCodesUpdate(cartFragment),
-        variables: {
-          cartId,
-          discountCodes,
-          numCartLines,
-          country: countryCode
-        }
-      });
-    }, [cartFragment, countryCode, fetchCart, numCartLines]);
-    return React.useMemo(() => ({
-      cartFetch,
-      cartCreate,
-      cartLineAdd,
-      cartLineUpdate,
-      cartLineRemove,
-      noteUpdate,
-      buyerIdentityUpdate,
-      cartAttributesUpdate,
-      discountCodesUpdate,
-      cartFragment
-    }), [cartFetch, cartCreate, cartLineAdd, cartLineUpdate, cartLineRemove, noteUpdate, buyerIdentityUpdate, cartAttributesUpdate, discountCodesUpdate, cartFragment]);
+    const cartFetch = React.useCallback(
+      (cartId) => {
+        return fetchCart({
+          query: CartQuery(cartFragment),
+          variables: {
+            id: cartId,
+            numCartLines,
+            country: countryCode
+          }
+        });
+      },
+      [fetchCart, cartFragment, numCartLines, countryCode]
+    );
+    const cartCreate = React.useCallback(
+      (cart) => {
+        return fetchCart({
+          query: CartCreate(cartFragment),
+          variables: {
+            input: cart,
+            numCartLines,
+            country: countryCode
+          }
+        });
+      },
+      [cartFragment, countryCode, fetchCart, numCartLines]
+    );
+    const cartLineAdd = React.useCallback(
+      (cartId, lines) => {
+        return fetchCart({
+          query: CartLineAdd(cartFragment),
+          variables: {
+            cartId,
+            lines,
+            numCartLines,
+            country: countryCode
+          }
+        });
+      },
+      [cartFragment, countryCode, fetchCart, numCartLines]
+    );
+    const cartLineUpdate = React.useCallback(
+      (cartId, lines) => {
+        return fetchCart({
+          query: CartLineUpdate(cartFragment),
+          variables: {
+            cartId,
+            lines,
+            numCartLines,
+            country: countryCode
+          }
+        });
+      },
+      [cartFragment, countryCode, fetchCart, numCartLines]
+    );
+    const cartLineRemove = React.useCallback(
+      (cartId, lines) => {
+        return fetchCart({
+          query: CartLineRemove(cartFragment),
+          variables: {
+            cartId,
+            lines,
+            numCartLines,
+            country: countryCode
+          }
+        });
+      },
+      [cartFragment, countryCode, fetchCart, numCartLines]
+    );
+    const noteUpdate = React.useCallback(
+      (cartId, note) => {
+        return fetchCart({
+          query: CartNoteUpdate(cartFragment),
+          variables: {
+            cartId,
+            note,
+            numCartLines,
+            country: countryCode
+          }
+        });
+      },
+      [fetchCart, cartFragment, numCartLines, countryCode]
+    );
+    const buyerIdentityUpdate = React.useCallback(
+      (cartId, buyerIdentity) => {
+        return fetchCart({
+          query: CartBuyerIdentityUpdate(cartFragment),
+          variables: {
+            cartId,
+            buyerIdentity,
+            numCartLines,
+            country: countryCode
+          }
+        });
+      },
+      [cartFragment, countryCode, fetchCart, numCartLines]
+    );
+    const cartAttributesUpdate = React.useCallback(
+      (cartId, attributes) => {
+        return fetchCart({
+          query: CartAttributesUpdate(cartFragment),
+          variables: {
+            cartId,
+            attributes,
+            numCartLines,
+            country: countryCode
+          }
+        });
+      },
+      [cartFragment, countryCode, fetchCart, numCartLines]
+    );
+    const discountCodesUpdate = React.useCallback(
+      (cartId, discountCodes) => {
+        return fetchCart({
+          query: CartDiscountCodesUpdate(cartFragment),
+          variables: {
+            cartId,
+            discountCodes,
+            numCartLines,
+            country: countryCode
+          }
+        });
+      },
+      [cartFragment, countryCode, fetchCart, numCartLines]
+    );
+    return React.useMemo(
+      () => ({
+        cartFetch,
+        cartCreate,
+        cartLineAdd,
+        cartLineUpdate,
+        cartLineRemove,
+        noteUpdate,
+        buyerIdentityUpdate,
+        cartAttributesUpdate,
+        discountCodesUpdate,
+        cartFragment
+      }),
+      [
+        cartFetch,
+        cartCreate,
+        cartLineAdd,
+        cartLineUpdate,
+        cartLineRemove,
+        noteUpdate,
+        buyerIdentityUpdate,
+        cartAttributesUpdate,
+        discountCodesUpdate,
+        cartFragment
+      ]
+    );
   }
   function invokeCart(action, options) {
     return {
-      entry: [...(options == null ? void 0 : options.entryActions) || [], i({
-        lastValidCart: (context) => context == null ? void 0 : context.cart
-      }), "onCartActionEntry", "onCartActionOptimisticUI", action],
+      entry: [
+        ...(options == null ? void 0 : options.entryActions) || [],
+        i({
+          lastValidCart: (context) => context == null ? void 0 : context.cart
+        }),
+        "onCartActionEntry",
+        "onCartActionOptimisticUI",
+        action
+      ],
       on: {
         RESOLVE: {
           target: (options == null ? void 0 : options.resolveTarget) || "idle",
-          actions: [i({
-            prevCart: (context) => context == null ? void 0 : context.lastValidCart,
-            cart: (_, event) => {
-              var _a;
-              return (_a = event == null ? void 0 : event.payload) == null ? void 0 : _a.cart;
-            },
-            rawCartResult: (_, event) => {
-              var _a;
-              return (_a = event == null ? void 0 : event.payload) == null ? void 0 : _a.rawCartResult;
-            },
-            errors: (_) => void 0
-          })]
+          actions: [
+            i({
+              prevCart: (context) => context == null ? void 0 : context.lastValidCart,
+              cart: (_, event) => {
+                var _a;
+                return (_a = event == null ? void 0 : event.payload) == null ? void 0 : _a.cart;
+              },
+              rawCartResult: (_, event) => {
+                var _a;
+                return (_a = event == null ? void 0 : event.payload) == null ? void 0 : _a.rawCartResult;
+              },
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              errors: (_) => void 0
+            })
+          ]
         },
         ERROR: {
           target: (options == null ? void 0 : options.errorTarget) || "error",
-          actions: [i({
-            prevCart: (context) => context == null ? void 0 : context.lastValidCart,
-            cart: (context) => context == null ? void 0 : context.lastValidCart,
-            errors: (_, event) => {
-              var _a;
-              return (_a = event == null ? void 0 : event.payload) == null ? void 0 : _a.errors;
-            }
-          })]
+          actions: [
+            i({
+              prevCart: (context) => context == null ? void 0 : context.lastValidCart,
+              cart: (context) => context == null ? void 0 : context.lastValidCart,
+              errors: (_, event) => {
+                var _a;
+                return (_a = event == null ? void 0 : event.payload) == null ? void 0 : _a.errors;
+              }
+            })
+          ]
         },
         CART_COMPLETED: {
           target: "cartCompleted",
           actions: i({
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             prevCart: (_) => void 0,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             cart: (_) => void 0,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             lastValidCart: (_) => void 0,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             rawCartResult: (_) => void 0,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             errors: (_) => void 0
           })
         }
@@ -1317,10 +1428,12 @@
     },
     CART_SET: {
       target: "idle",
-      actions: [i({
-        rawCartResult: (_, event) => event.payload.cart,
-        cart: (_, event) => cartFromGraphQL(event.payload.cart)
-      })]
+      actions: [
+        i({
+          rawCartResult: (_, event) => event.payload.cart,
+          cart: (_, event) => cartFromGraphQL(event.payload.cart)
+        })
+      ]
     }
   };
   const UPDATING_CART_EVENTS = {
@@ -1364,16 +1477,10 @@
           on: INITIALIZING_CART_EVENTS
         },
         idle: {
-          on: {
-            ...INITIALIZING_CART_EVENTS,
-            ...UPDATING_CART_EVENTS
-          }
+          on: { ...INITIALIZING_CART_EVENTS, ...UPDATING_CART_EVENTS }
         },
         error: {
-          on: {
-            ...INITIALIZING_CART_EVENTS,
-            ...UPDATING_CART_EVENTS
-          }
+          on: { ...INITIALIZING_CART_EVENTS, ...UPDATING_CART_EVENTS }
         },
         cartFetching: invokeCart("cartFetchAction", {
           errorTarget: "initializationError"
@@ -1422,10 +1529,7 @@
           var _a;
           if (event.type !== "CART_FETCH")
             return;
-          const {
-            data,
-            errors
-          } = await cartFetch((_a = event == null ? void 0 : event.payload) == null ? void 0 : _a.cartId);
+          const { data, errors } = await cartFetch((_a = event == null ? void 0 : event.payload) == null ? void 0 : _a.cartId);
           const resultEvent = eventFromFetchResult(event, data == null ? void 0 : data.cart, errors);
           send(resultEvent);
         },
@@ -1433,88 +1537,117 @@
           var _a;
           if (event.type !== "CART_CREATE")
             return;
-          const {
-            data,
+          const { data, errors } = await cartCreate(event == null ? void 0 : event.payload);
+          const resultEvent = eventFromFetchResult(
+            event,
+            (_a = data == null ? void 0 : data.cartCreate) == null ? void 0 : _a.cart,
             errors
-          } = await cartCreate(event == null ? void 0 : event.payload);
-          const resultEvent = eventFromFetchResult(event, (_a = data == null ? void 0 : data.cartCreate) == null ? void 0 : _a.cart, errors);
+          );
           send(resultEvent);
         },
         cartLineAddAction: async (context, event) => {
           var _a, _b;
           if (event.type !== "CARTLINE_ADD" || !((_a = context == null ? void 0 : context.cart) == null ? void 0 : _a.id))
             return;
-          const {
-            data,
+          const { data, errors } = await cartLineAdd(
+            context.cart.id,
+            event.payload.lines
+          );
+          const resultEvent = eventFromFetchResult(
+            event,
+            (_b = data == null ? void 0 : data.cartLinesAdd) == null ? void 0 : _b.cart,
             errors
-          } = await cartLineAdd(context.cart.id, event.payload.lines);
-          const resultEvent = eventFromFetchResult(event, (_b = data == null ? void 0 : data.cartLinesAdd) == null ? void 0 : _b.cart, errors);
+          );
           send(resultEvent);
         },
         cartLineUpdateAction: async (context, event) => {
           var _a, _b;
           if (event.type !== "CARTLINE_UPDATE" || !((_a = context == null ? void 0 : context.cart) == null ? void 0 : _a.id))
             return;
-          const {
-            data,
+          const { data, errors } = await cartLineUpdate(
+            context.cart.id,
+            event.payload.lines
+          );
+          const resultEvent = eventFromFetchResult(
+            event,
+            (_b = data == null ? void 0 : data.cartLinesUpdate) == null ? void 0 : _b.cart,
             errors
-          } = await cartLineUpdate(context.cart.id, event.payload.lines);
-          const resultEvent = eventFromFetchResult(event, (_b = data == null ? void 0 : data.cartLinesUpdate) == null ? void 0 : _b.cart, errors);
+          );
           send(resultEvent);
         },
         cartLineRemoveAction: async (context, event) => {
           var _a, _b;
           if (event.type !== "CARTLINE_REMOVE" || !((_a = context == null ? void 0 : context.cart) == null ? void 0 : _a.id))
             return;
-          const {
-            data,
+          const { data, errors } = await cartLineRemove(
+            context.cart.id,
+            event.payload.lines
+          );
+          const resultEvent = eventFromFetchResult(
+            event,
+            (_b = data == null ? void 0 : data.cartLinesRemove) == null ? void 0 : _b.cart,
             errors
-          } = await cartLineRemove(context.cart.id, event.payload.lines);
-          const resultEvent = eventFromFetchResult(event, (_b = data == null ? void 0 : data.cartLinesRemove) == null ? void 0 : _b.cart, errors);
+          );
           send(resultEvent);
         },
         noteUpdateAction: async (context, event) => {
           var _a, _b;
           if (event.type !== "NOTE_UPDATE" || !((_a = context == null ? void 0 : context.cart) == null ? void 0 : _a.id))
             return;
-          const {
-            data,
+          const { data, errors } = await noteUpdate(
+            context.cart.id,
+            event.payload.note
+          );
+          const resultEvent = eventFromFetchResult(
+            event,
+            (_b = data == null ? void 0 : data.cartNoteUpdate) == null ? void 0 : _b.cart,
             errors
-          } = await noteUpdate(context.cart.id, event.payload.note);
-          const resultEvent = eventFromFetchResult(event, (_b = data == null ? void 0 : data.cartNoteUpdate) == null ? void 0 : _b.cart, errors);
+          );
           send(resultEvent);
         },
         buyerIdentityUpdateAction: async (context, event) => {
           var _a, _b;
           if (event.type !== "BUYER_IDENTITY_UPDATE" || !((_a = context == null ? void 0 : context.cart) == null ? void 0 : _a.id))
             return;
-          const {
-            data,
+          const { data, errors } = await buyerIdentityUpdate(
+            context.cart.id,
+            event.payload.buyerIdentity
+          );
+          const resultEvent = eventFromFetchResult(
+            event,
+            (_b = data == null ? void 0 : data.cartBuyerIdentityUpdate) == null ? void 0 : _b.cart,
             errors
-          } = await buyerIdentityUpdate(context.cart.id, event.payload.buyerIdentity);
-          const resultEvent = eventFromFetchResult(event, (_b = data == null ? void 0 : data.cartBuyerIdentityUpdate) == null ? void 0 : _b.cart, errors);
+          );
           send(resultEvent);
         },
         cartAttributesUpdateAction: async (context, event) => {
           var _a, _b;
           if (event.type !== "CART_ATTRIBUTES_UPDATE" || !((_a = context == null ? void 0 : context.cart) == null ? void 0 : _a.id))
             return;
-          const {
-            data,
+          const { data, errors } = await cartAttributesUpdate(
+            context.cart.id,
+            event.payload.attributes
+          );
+          const resultEvent = eventFromFetchResult(
+            event,
+            (_b = data == null ? void 0 : data.cartAttributesUpdate) == null ? void 0 : _b.cart,
             errors
-          } = await cartAttributesUpdate(context.cart.id, event.payload.attributes);
-          const resultEvent = eventFromFetchResult(event, (_b = data == null ? void 0 : data.cartAttributesUpdate) == null ? void 0 : _b.cart, errors);
+          );
           send(resultEvent);
         },
         discountCodesUpdateAction: async (context, event) => {
           var _a, _b;
           if (event.type !== "DISCOUNT_CODES_UPDATE" || !((_a = context == null ? void 0 : context.cart) == null ? void 0 : _a.id))
             return;
-          const {
-            data,
+          const { data, errors } = await discountCodesUpdate(
+            context.cart.id,
+            event.payload.discountCodes
+          );
+          const resultEvent = eventFromFetchResult(
+            event,
+            (_b = data == null ? void 0 : data.cartDiscountCodesUpdate) == null ? void 0 : _b.cart,
             errors
-          } = await discountCodesUpdate(context.cart.id, event.payload.discountCodes);
-          const resultEvent = eventFromFetchResult(event, (_b = data == null ? void 0 : data.cartDiscountCodesUpdate) == null ? void 0 : _b.cart, errors);
+          );
           send(resultEvent);
         },
         ...onCartActionEntry && {
@@ -1541,22 +1674,15 @@
     return React.useMemo(() => [state, send, service], [state, send, service]);
   }
   function cartFromGraphQL(cart) {
-    var _a;
     return {
       ...cart,
       lines: flattenConnection(cart == null ? void 0 : cart.lines),
-      note: (_a = cart.note) != null ? _a : void 0
+      note: cart.note ?? void 0
     };
   }
   function eventFromFetchResult(cartActionEvent, cart, errors) {
     if (errors) {
-      return {
-        type: "ERROR",
-        payload: {
-          errors,
-          cartActionEvent
-        }
-      };
+      return { type: "ERROR", payload: { errors, cartActionEvent } };
     }
     if (!cart) {
       return {
@@ -1581,7 +1707,6 @@
   function isCartFetchResultEvent(event) {
     return event.type === "RESOLVE" || event.type === "ERROR" || event.type === "CART_COMPLETED";
   }
-  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);
@@ -1657,16 +1782,16 @@
       onCartActionOptimisticUI(context, event) {
         var _a2, _b2, _c2, _d2;
         if (!context.cart)
-          return {
-            ...context
-          };
+          return { ...context };
         switch (event.type) {
           case "CARTLINE_REMOVE":
             return {
               ...context,
               cart: {
                 ...context.cart,
-                lines: (_b2 = (_a2 = context == null ? void 0 : context.cart) == null ? void 0 : _a2.lines) == null ? void 0 : _b2.filter((line) => (line == null ? void 0 : line.id) && !event.payload.lines.includes(line == null ? void 0 : line.id))
+                lines: (_b2 = (_a2 = context == null ? void 0 : context.cart) == null ? void 0 : _a2.lines) == null ? void 0 : _b2.filter(
+                  (line) => (line == null ? void 0 : line.id) && !event.payload.lines.includes(line == null ? void 0 : line.id)
+                )
               }
             };
           case "CARTLINE_UPDATE":
@@ -1675,9 +1800,9 @@
               cart: {
                 ...context.cart,
                 lines: (_d2 = (_c2 = context == null ? void 0 : context.cart) == null ? void 0 : _c2.lines) == null ? void 0 : _d2.map((line) => {
-                  const updatedLine = event.payload.lines.find(({
-                    id
-                  }) => id === (line == null ? void 0 : line.id));
+                  const updatedLine = event.payload.lines.find(
+                    ({ id }) => id === (line == null ? void 0 : line.id)
+                  );
                   if (updatedLine && updatedLine.quantity) {
                     return {
                       ...line,
@@ -1689,9 +1814,7 @@
               }
             };
         }
-        return {
-          ...context
-        };
+        return { ...context };
       },
       onCartActionComplete(context, event) {
         const cartActionEvent = event.payload.cartActionEvent;
@@ -1736,12 +1859,7 @@
           try {
             const cartId = window.localStorage.getItem(CART_ID_STORAGE_KEY);
             if (cartId) {
-              cartSend({
-                type: "CART_FETCH",
-                payload: {
-                  cartId
-                }
-              });
+              cartSend({ type: "CART_FETCH", payload: { cartId } });
             }
           } catch (error) {
             console.warn("error fetching cartId");
@@ -1756,25 +1874,32 @@
         return;
       cartSend({
         type: "BUYER_IDENTITY_UPDATE",
-        payload: {
-          buyerIdentity: {
-            countryCode,
-            customerAccessToken
-          }
-        }
+        payload: { buyerIdentity: { countryCode, customerAccessToken } }
       });
-    }, [countryCode, customerAccessToken, countryChanged, customerOverridesCountryCode, cartSend]);
-    const onCartReadySend = React.useCallback((cartEvent) => {
-      if (!cartReady.current) {
-        return console.warn("Cart isn't ready yet");
-      }
-      cartSend(cartEvent);
-    }, [cartSend]);
+    }, [
+      countryCode,
+      customerAccessToken,
+      countryChanged,
+      customerOverridesCountryCode,
+      cartSend
+    ]);
+    const onCartReadySend = React.useCallback(
+      (cartEvent) => {
+        if (!cartReady.current) {
+          return console.warn("Cart isn't ready yet");
+        }
+        cartSend(cartEvent);
+      },
+      [cartSend]
+    );
     React.useEffect(() => {
       var _a2, _b2, _c2;
       if (((_b2 = (_a2 = cartState == null ? void 0 : cartState.context) == null ? void 0 : _a2.cart) == null ? void 0 : _b2.id) && storageAvailable("localStorage")) {
         try {
-          window.localStorage.setItem(CART_ID_STORAGE_KEY, (_c2 = cartState.context.cart) == null ? void 0 : _c2.id);
+          window.localStorage.setItem(
+            CART_ID_STORAGE_KEY,
+            (_c2 = cartState.context.cart) == null ? void 0 : _c2.id
+          );
         } catch (error) {
           console.warn("Failed to save cartId to localStorage", error);
         }
@@ -1789,50 +1914,46 @@
         }
       }
     }, [cartCompleted]);
-    const cartCreate = React.useCallback((cartInput) => {
-      var _a2, _b2;
-      if (countryCode && !((_a2 = cartInput.buyerIdentity) == null ? void 0 : _a2.countryCode)) {
-        if (cartInput.buyerIdentity == null) {
-          cartInput.buyerIdentity = {};
+    const cartCreate = React.useCallback(
+      (cartInput) => {
+        var _a2, _b2;
+        if (countryCode && !((_a2 = cartInput.buyerIdentity) == null ? void 0 : _a2.countryCode)) {
+          if (cartInput.buyerIdentity == null) {
+            cartInput.buyerIdentity = {};
+          }
+          cartInput.buyerIdentity.countryCode = countryCode;
         }
-        cartInput.buyerIdentity.countryCode = countryCode;
-      }
-      if (customerAccessToken && !((_b2 = cartInput.buyerIdentity) == null ? void 0 : _b2.customerAccessToken)) {
-        if (cartInput.buyerIdentity == null) {
-          cartInput.buyerIdentity = {};
+        if (customerAccessToken && !((_b2 = cartInput.buyerIdentity) == null ? void 0 : _b2.customerAccessToken)) {
+          if (cartInput.buyerIdentity == null) {
+            cartInput.buyerIdentity = {};
+          }
+          cartInput.buyerIdentity.customerAccessToken = customerAccessToken;
         }
-        cartInput.buyerIdentity.customerAccessToken = customerAccessToken;
-      }
-      onCartReadySend({
-        type: "CART_CREATE",
-        payload: cartInput
-      });
-    }, [countryCode, customerAccessToken, onCartReadySend]);
+        onCartReadySend({
+          type: "CART_CREATE",
+          payload: cartInput
+        });
+      },
+      [countryCode, customerAccessToken, onCartReadySend]
+    );
     const cartDisplayState = useDelayedStateUntilHydration(cartState);
     const cartContextValue = React.useMemo(() => {
-      var _a2, _b2, _c2, _d2, _e2, _f2;
+      var _a2, _b2, _c2, _d2;
       return {
-        ...(_b2 = (_a2 = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _a2.cart) != null ? _b2 : {
-          lines: [],
-          attributes: []
-        },
+        ...((_a2 = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _a2.cart) ?? { lines: [], attributes: [] },
         status: transposeStatus(cartDisplayState.value),
-        error: (_c2 = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _c2.errors,
-        totalQuantity: (_f2 = (_e2 = (_d2 = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _d2.cart) == null ? void 0 : _e2.totalQuantity) != null ? _f2 : 0,
+        error: (_b2 = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _b2.errors,
+        totalQuantity: ((_d2 = (_c2 = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _c2.cart) == null ? void 0 : _d2.totalQuantity) ?? 0,
         cartCreate,
         linesAdd(lines) {
           var _a3, _b3;
           if ((_b3 = (_a3 = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _a3.cart) == null ? void 0 : _b3.id) {
             onCartReadySend({
               type: "CARTLINE_ADD",
-              payload: {
-                lines
-              }
+              payload: { lines }
             });
           } else {
-            cartCreate({
-              lines
-            });
+            cartCreate({ lines });
           }
         },
         linesRemove(lines) {
@@ -1885,16 +2006,15 @@
         },
         cartFragment
       };
-    }, [cartCreate, (_f = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _f.cart, (_g = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _g.errors, cartDisplayState.value, cartFragment, onCartReadySend]);
-    return /* @__PURE__ */ React__default.default.createElement(CartContext.Provider, {
-      value: cartContextValue,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$e,
-        lineNumber: 424,
-        columnNumber: 5
-      }
-    }, children);
+    }, [
+      cartCreate,
+      (_f = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _f.cart,
+      (_g = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _g.errors,
+      cartDisplayState.value,
+      cartFragment,
+      onCartReadySend
+    ]);
+    return /* @__PURE__ */ React.createElement(CartContext.Provider, { value: cartContextValue }, children);
   }
   function transposeStatus(status) {
     switch (status) {
@@ -1949,65 +2069,76 @@
       storage.removeItem(x);
       return true;
     } catch (e2) {
-      return e2 instanceof DOMException && (e2.code === 22 || e2.code === 1014 || e2.name === "QuotaExceededError" || e2.name === "NS_ERROR_DOM_QUOTA_REACHED") && storage && storage.length !== 0;
+      return e2 instanceof DOMException && // everything except Firefox
+      (e2.code === 22 || // Firefox
+      e2.code === 1014 || // test name field too, because code might not be present
+      // everything except Firefox
+      e2.name === "QuotaExceededError" || // Firefox
+      e2.name === "NS_ERROR_DOM_QUOTA_REACHED") && // acknowledge QuotaExceededError only if there's something already stored
+      storage && storage.length !== 0;
     }
   }
   function countryCodeNotUpdated(context, event) {
     var _a, _b;
     return event.payload.buyerIdentity.countryCode && ((_b = (_a = context.cart) == null ? void 0 : _a.buyerIdentity) == null ? void 0 : _b.countryCode) !== event.payload.buyerIdentity.countryCode;
   }
-  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]);
+    const variants = React.useMemo(
+      () => flattenConnection(product.variants ?? {}),
+      [product.variants]
+    );
     if (!isProductVariantArray(variants)) {
-      throw new Error(`<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`);
+      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));
+    const [selectedOptions, setSelectedOptions] = React.useState(
+      () => getSelectedOptions(selectedVariant)
+    );
     React.useEffect(() => {
-      const newSelectedVariant = getVariantBasedOnIdProp(explicitVariantId, variants);
+      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 {
+    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) => {
+        const proposedVariant = getSelectedVariant(variants, {
+          ...selectedOptions,
+          ...{ [option]: value2 }
+        });
+        return (proposedVariant == null ? void 0 : proposedVariant.availableForSale) ?? true;
+      },
+      [selectedOptions, variants]
+    );
+    const sellingPlanGroups = React.useMemo(
+      () => flattenConnection(product.sellingPlanGroups ?? {}).map(
+        (sellingPlanGroup) => ({
           ...sellingPlanGroup,
-          sellingPlans: flattenConnection((_a2 = sellingPlanGroup == null ? void 0 : sellingPlanGroup.sellingPlans) != null ? _a2 : {})
-        };
-      });
-    }, [product.sellingPlanGroups]);
+          sellingPlans: flattenConnection((sellingPlanGroup == null ? void 0 : sellingPlanGroup.sellingPlans) ?? {})
+        })
+      ),
+      [product.sellingPlanGroups]
+    );
     const [selectedSellingPlan, setSelectedSellingPlan] = React.useState(void 0);
     const selectedSellingPlanAllocation = React.useMemo(() => {
       var _a, _b;
@@ -2015,38 +2146,49 @@
         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`);
+        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;
-      });
+      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);
+    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.createElement(ProductOptionsContext.Provider, { value }, children);
   }
   function useProduct() {
     const context = React.useContext(ProductOptionsContext);
@@ -2063,7 +2205,9 @@
     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);
+        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
+        );
       });
     });
   }
@@ -2074,9 +2218,8 @@
         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 : "");
+        memo[(opt == null ? void 0 : opt.name) ?? ""] = memo[(opt == null ? void 0 : opt.name) ?? ""] || /* @__PURE__ */ new Set();
+        memo[(opt == null ? void 0 : opt.name) ?? ""].add((opt == null ? void 0 : opt.value) ?? "");
       });
       return memo;
     }, {});
@@ -2089,9 +2232,13 @@
   }
   function getVariantBasedOnIdProp(explicitVariantId, variants) {
     if (explicitVariantId) {
-      const foundVariant = variants.find((variant) => (variant == null ? void 0 : variant.id) === 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`);
+        console.warn(
+          `<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`
+        );
       }
       return foundVariant;
     }
@@ -2103,11 +2250,13 @@
     }
   }
   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;
-    }, {}) : {};
+    return (selectedVariant == null ? void 0 : selectedVariant.selectedOptions) ? selectedVariant.selectedOptions.reduce(
+      (memo, optionSet) => {
+        memo[(optionSet == null ? void 0 : optionSet.name) ?? ""] = (optionSet == null ? void 0 : optionSet.value) ?? "";
+        return memo;
+      },
+      {}
+    ) : {};
   }
   function isProductVariantArray(maybeVariantArray) {
     if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {
@@ -2115,7 +2264,6 @@
     }
     return true;
   }
-  var _jsxFileName$c = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/BaseButton.tsx";
   function BaseButton(props) {
     const {
       as,
@@ -2125,30 +2273,21 @@
       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 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";
+    return /* @__PURE__ */ React.createElement(Component, { ref: buttonRef, onClick: handleOnClick, ...passthroughProps }, children);
+  }
   function AddToCartButton(props) {
-    var _a;
     const [addingItem, setAddingItem] = React.useState(false);
     const {
       variantId: explicitVariantId,
@@ -2160,14 +2299,9 @@
       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 { status, linesAdd } = useCart();
+    const { selectedVariant } = useProduct();
+    const variantId = explicitVariantId ?? (selectedVariant == null ? void 0 : selectedVariant.id) ?? "";
     const disabled = explicitVariantId === null || variantId === "" || selectedVariant === null || addingItem || passthroughProps.disabled;
     React.useEffect(() => {
       if (addingItem && status === "idle") {
@@ -2176,52 +2310,460 @@
     }, [status, addingItem]);
     const handleAddItem = React.useCallback(() => {
       setAddingItem(true);
-      linesAdd([{
-        quantity,
-        merchandiseId: variantId || "",
-        attributes,
-        sellingPlanId
-      }]);
+      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"
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      BaseButton,
+      {
+        ...passthroughProps,
+        disabled,
+        onClick,
+        defaultOnClick: handleAddItem
+      },
+      children
+    ), accessibleAddingToCartLabel ? /* @__PURE__ */ React.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"
       },
-      role: "alert",
-      "aria-live": "assertive",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$b,
-        lineNumber: 80,
-        columnNumber: 9
+      addingItem ? accessibleAddingToCartLabel : null
+    ) : null);
+  }
+  const AnalyticsEventName = {
+    PAGE_VIEW: "PAGE_VIEW",
+    ADD_TO_CART: "ADD_TO_CART"
+  };
+  const AnalyticsPageType = {
+    article: "article",
+    blog: "blog",
+    captcha: "captcha",
+    cart: "cart",
+    collection: "collection",
+    customersAccount: "customers/account",
+    customersActivateAccount: "customers/activate_account",
+    customersAddresses: "customers/addresses",
+    customersLogin: "customers/login",
+    customersOrder: "customers/order",
+    customersRegister: "customers/register",
+    customersResetPassword: "customers/reset_password",
+    giftCard: "gift_card",
+    home: "index",
+    listCollections: "list-collections",
+    forbidden: "403",
+    notFound: "404",
+    page: "page",
+    password: "password",
+    product: "product",
+    policy: "policy",
+    search: "search"
+  };
+  const ShopifySalesChannel = {
+    hydrogen: "hydrogen",
+    headless: "headless"
+  };
+  const ShopifyAppId = {
+    hydrogen: "6167201",
+    headless: "12875497473"
+  };
+  function schemaWrapper(schemaId, payload) {
+    return {
+      schema_id: schemaId,
+      payload,
+      metadata: {
+        event_created_at_ms: Date.now()
       }
-    }, 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();
+  function parseGid(gid) {
+    const defaultReturn = { id: "", resource: null };
+    if (typeof gid !== "string") {
+      return defaultReturn;
+    }
+    const matches = gid.match(/^gid:\/\/shopify\/(\w+)\/([a-z0-9]+)/);
+    if (!matches || matches.length === 1) {
+      return defaultReturn;
+    }
+    const id = matches[2] ?? null;
+    const resource = matches[1] ?? null;
+    return { id, resource };
+  }
+  function addDataIf(keyValuePairs, formattedData) {
+    if (typeof keyValuePairs !== "object") {
+      return {};
+    }
+    Object.entries(keyValuePairs).forEach(([key, value]) => {
+      if (value) {
+        formattedData[key] = value;
+      }
+    });
+    return formattedData;
+  }
+  function errorIfServer(fnName) {
+    if (typeof document === "undefined") {
+      console.error(
+        `${fnName} should only be used within the useEffect callback or event handlers`
+      );
+      return true;
+    }
+    return false;
+  }
+  const SCHEMA_ID$1 = "trekkie_storefront_page_view/1.4";
+  const OXYGEN_DOMAIN = "myshopify.dev";
+  function pageView$1(payload) {
+    const pageViewPayload = payload;
+    const { id, resource } = parseGid(pageViewPayload.resourceId);
+    const resourceType = resource ? resource.toLowerCase() : void 0;
+    return [
+      schemaWrapper(
+        SCHEMA_ID$1,
+        addDataIf(
+          {
+            pageType: pageViewPayload.pageType,
+            customerId: pageViewPayload.customerId,
+            resourceType,
+            resourceId: parseInt(id)
+          },
+          formatPayload$1(pageViewPayload)
+        )
+      )
+    ];
+  }
+  function formatPayload$1(payload) {
+    return {
+      appClientId: payload.shopifySalesChannel ? ShopifyAppId[payload.shopifySalesChannel] : ShopifyAppId.headless,
+      isMerchantRequest: isMerchantRequest(payload.url),
+      hydrogenSubchannelId: payload.storefrontId || "0",
+      isPersistentCookie: payload.hasUserConsent,
+      uniqToken: payload.uniqueToken,
+      visitToken: payload.visitToken,
+      microSessionId: buildUUID(),
+      microSessionCount: 1,
+      url: payload.url,
+      path: payload.path,
+      search: payload.search,
+      referrer: payload.referrer,
+      title: payload.title,
+      shopId: parseInt(parseGid(payload.shopId).id),
+      currency: payload.currency,
+      contentLanguage: payload.acceptedLanguage || "en"
+    };
+  }
+  function isMerchantRequest(url) {
+    if (typeof url !== "string") {
+      return false;
+    }
+    const hostname = new URL(url).hostname;
+    if (hostname.indexOf(OXYGEN_DOMAIN) !== -1 || hostname === "localhost") {
+      return true;
+    }
+    return false;
+  }
+  const SCHEMA_ID = "custom_storefront_customer_tracking/1.0";
+  const PAGE_RENDERED_EVENT_NAME = "page_rendered";
+  const COLLECTION_PAGE_RENDERED_EVENT_NAME = "collection_page_rendered";
+  const PRODUCT_PAGE_RENDERED_EVENT_NAME = "product_page_rendered";
+  const PRODUCT_ADDED_TO_CART_EVENT_NAME = "product_added_to_cart";
+  const SEARCH_SUBMITTED_EVENT_NAME = "search_submitted";
+  function pageView(payload) {
+    const pageViewPayload = payload;
+    const additionalPayload = {
+      canonical_url: pageViewPayload.canonicalUrl || pageViewPayload.url,
+      customer_id: pageViewPayload.customerId
+    };
+    const pageType = pageViewPayload.pageType;
+    const pageViewEvents = [];
+    pageViewEvents.push(
+      schemaWrapper(
+        SCHEMA_ID,
+        addDataIf(
+          {
+            event_name: PAGE_RENDERED_EVENT_NAME,
+            ...additionalPayload
+          },
+          formatPayload(pageViewPayload)
+        )
+      )
+    );
+    switch (pageType) {
+      case AnalyticsPageType.collection:
+        pageViewEvents.push(
+          schemaWrapper(
+            SCHEMA_ID,
+            addDataIf(
+              {
+                event_name: COLLECTION_PAGE_RENDERED_EVENT_NAME,
+                ...additionalPayload,
+                collection_name: pageViewPayload.collectionHandle
+              },
+              formatPayload(pageViewPayload)
+            )
+          )
+        );
+        break;
+      case AnalyticsPageType.product:
+        pageViewEvents.push(
+          schemaWrapper(
+            SCHEMA_ID,
+            addDataIf(
+              {
+                event_name: PRODUCT_PAGE_RENDERED_EVENT_NAME,
+                ...additionalPayload,
+                products: formatProductPayload(pageViewPayload.products),
+                total_value: pageViewPayload.totalValue
+              },
+              formatPayload(pageViewPayload)
+            )
+          )
+        );
+        break;
+      case AnalyticsPageType.search:
+        pageViewEvents.push(
+          schemaWrapper(
+            SCHEMA_ID,
+            addDataIf(
+              {
+                event_name: SEARCH_SUBMITTED_EVENT_NAME,
+                ...additionalPayload,
+                search_string: pageViewPayload.searchString
+              },
+              formatPayload(pageViewPayload)
+            )
+          )
+        );
+        break;
+    }
+    return pageViewEvents;
+  }
+  function addToCart(payload) {
+    const addToCartPayload = payload;
+    const cartToken = parseGid(addToCartPayload.cartId);
+    const cart_token = (cartToken == null ? void 0 : cartToken.id) ? `${cartToken.id}` : null;
+    return [
+      schemaWrapper(
+        SCHEMA_ID,
+        addDataIf(
+          {
+            event_name: PRODUCT_ADDED_TO_CART_EVENT_NAME,
+            customerId: addToCartPayload.customerId,
+            cart_token,
+            total_value: addToCartPayload.totalValue,
+            products: formatProductPayload(addToCartPayload.products)
+          },
+          formatPayload(addToCartPayload)
+        )
+      )
+    ];
+  }
+  function formatPayload(payload) {
+    return {
+      source: payload.shopifySalesChannel || ShopifySalesChannel.headless,
+      hydrogenSubchannelId: payload.storefrontId || "0",
+      is_persistent_cookie: payload.hasUserConsent,
+      ccpa_enforced: false,
+      gdpr_enforced: false,
+      unique_token: payload.uniqueToken,
+      event_time: Date.now(),
+      event_id: buildUUID(),
+      event_source_url: payload.url,
+      referrer: payload.referrer,
+      user_agent: payload.userAgent,
+      navigation_type: payload.navigationType,
+      navigation_api: payload.navigationApi,
+      shop_id: parseInt(parseGid(payload.shopId).id),
+      currency: payload.currency
+    };
+  }
+  function formatProductPayload(products) {
+    return products ? products.map((p) => {
+      const product = addDataIf(
+        {
+          variant_gid: p.variantGid,
+          category: p.category,
+          sku: p.sku,
+          product_id: parseInt(parseGid(p.productGid).id),
+          variant_id: parseInt(parseGid(p.variantGid).id)
+        },
+        {
+          product_gid: p.productGid,
+          name: p.name,
+          variant: p.variantName || "",
+          brand: p.brand,
+          price: p.price,
+          quantity: Number(p.quantity || 0)
+        }
+      );
+      return JSON.stringify(product);
+    }) : [];
+  }
+  function sendShopifyAnalytics(event, shopDomain) {
+    const { eventName, payload } = event;
+    if (!payload.hasUserConsent)
+      return Promise.resolve();
+    let events = [];
+    if (eventName === AnalyticsEventName.PAGE_VIEW) {
+      const pageViewPayload = payload;
+      events = events.concat(
+        pageView$1(pageViewPayload),
+        pageView(pageViewPayload)
+      );
+    } else if (eventName === AnalyticsEventName.ADD_TO_CART) {
+      events = events.concat(
+        addToCart(payload)
+      );
+    }
+    if (events.length) {
+      return sendToShopify(events, shopDomain);
+    } else {
+      return Promise.resolve();
+    }
+  }
+  const ERROR_MESSAGE = "sendShopifyAnalytics request is unsuccessful";
+  function sendToShopify(events, shopDomain) {
+    const eventsToBeSent = {
+      events,
+      metadata: {
+        event_sent_at_ms: Date.now()
+      }
+    };
+    try {
+      return fetch(
+        shopDomain ? `https://${shopDomain}/.well-known/shopify/monorail/unstable/produce_batch` : "https://monorail-edge.shopifysvc.com/unstable/produce_batch",
+        {
+          method: "post",
+          headers: {
+            "content-type": "text/plain"
+          },
+          body: JSON.stringify(eventsToBeSent)
+        }
+      ).then((response) => {
+        if (!response.ok) {
+          throw new Error("Response failed");
+        }
+        return response.text();
+      }).then((data) => {
+        if (data) {
+          const jsonResponse = JSON.parse(data);
+          jsonResponse.result.forEach((eventResponse) => {
+            if (eventResponse.status !== 200) {
+              console.error(ERROR_MESSAGE, "\n\n", eventResponse.message);
+            }
+          });
+        }
+      }).catch((err) => {
+        console.error(ERROR_MESSAGE, err);
+        if (true) {
+          throw new Error(ERROR_MESSAGE);
+        }
+      });
+    } catch (error) {
+      return Promise.resolve();
+    }
+  }
+  function getClientBrowserParameters() {
+    if (errorIfServer("getClientBrowserParameters")) {
+      return {
+        uniqueToken: "",
+        visitToken: "",
+        url: "",
+        path: "",
+        search: "",
+        referrer: "",
+        title: "",
+        userAgent: "",
+        navigationType: "",
+        navigationApi: ""
+      };
+    }
+    const [navigationType, navigationApi] = getNavigationType();
+    const cookies = getShopifyCookies(document.cookie);
+    return {
+      uniqueToken: cookies[SHOPIFY_Y],
+      visitToken: cookies[SHOPIFY_S],
+      url: location.href,
+      path: location.pathname,
+      search: location.search,
+      referrer: document.referrer,
+      title: document.title,
+      userAgent: navigator.userAgent,
+      navigationType,
+      navigationApi
+    };
+  }
+  function getNavigationTypeExperimental() {
+    try {
+      const navigationEntries = (performance == null ? void 0 : performance.getEntriesByType) && (performance == null ? void 0 : performance.getEntriesByType("navigation"));
+      if (navigationEntries && navigationEntries[0]) {
+        const rawType = window.performance.getEntriesByType(
+          "navigation"
+        )[0]["type"];
+        const navType = rawType && rawType.toString();
+        return navType;
+      }
+    } catch (err) {
+    }
+    return void 0;
+  }
+  function getNavigationTypeLegacy() {
+    var _a, _b;
+    try {
+      if (PerformanceNavigation && ((_a = performance == null ? void 0 : performance.navigation) == null ? void 0 : _a.type) !== null && ((_b = performance == null ? void 0 : performance.navigation) == null ? void 0 : _b.type) !== void 0) {
+        const rawType = performance.navigation.type;
+        switch (rawType) {
+          case PerformanceNavigation.TYPE_NAVIGATE:
+            return "navigate";
+            break;
+          case PerformanceNavigation.TYPE_RELOAD:
+            return "reload";
+            break;
+          case PerformanceNavigation.TYPE_BACK_FORWARD:
+            return "back_forward";
+            break;
+          default:
+            return `unknown: ${rawType}`;
+        }
+      }
+    } catch (err) {
+    }
+    return void 0;
+  }
+  function getNavigationType() {
+    try {
+      let navApi = "PerformanceNavigationTiming";
+      let navType = getNavigationTypeExperimental();
+      if (!navType) {
+        navType = getNavigationTypeLegacy();
+        navApi = "performance.navigation";
+      }
+      if (navType) {
+        return [navType, navApi];
+      } else {
+        return ["unknown", "unknown"];
+      }
+    } catch (err) {
+    }
+    return ["error", "error"];
+  }
+  function BuyNowButton(props) {
+    const { cartCreate, checkoutUrl } = useCart();
     const [loading, setLoading] = React.useState(false);
     const {
       quantity,
@@ -2239,55 +2781,211 @@
     const handleBuyNow = React.useCallback(() => {
       setLoading(true);
       cartCreate({
-        lines: [{
-          quantity: quantity != null ? quantity : 1,
-          merchandiseId: variantId,
-          attributes
-        }]
+        lines: [
+          {
+            quantity: 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);
+    return /* @__PURE__ */ React.createElement(
+      BaseButton,
+      {
+        disabled: loading ?? passthroughProps.disabled,
+        ...passthroughProps,
+        onClick,
+        defaultOnClick: handleBuyNow
+      },
+      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;
+    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);
+    return /* @__PURE__ */ React.createElement(
+      BaseButton,
+      {
+        ...passthroughProps,
+        disabled: requestedCheckout || passthroughProps.disabled,
+        onClick: () => setRequestedCheckout(true)
+      },
+      children
+    );
+  }
+  function useMoney(money) {
+    const { countryIsoCode, languageIsoCode } = useShop();
+    const locale = `${languageIsoCode}-${countryIsoCode}`;
+    if (!locale) {
+      throw new Error(
+        `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`
+      );
+    }
+    const amount = parseFloat(money.amount);
+    const options = React.useMemo(
+      () => ({
+        style: "currency",
+        currency: money.currencyCode
+      }),
+      [money.currencyCode]
+    );
+    const defaultFormatter = useLazyFormatter(locale, options);
+    const nameFormatter = useLazyFormatter(locale, {
+      ...options,
+      currencyDisplay: "name"
+    });
+    const narrowSymbolFormatter = useLazyFormatter(locale, {
+      ...options,
+      currencyDisplay: "narrowSymbol"
+    });
+    const withoutTrailingZerosFormatter = useLazyFormatter(locale, {
+      ...options,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
+    const withoutCurrencyFormatter = useLazyFormatter(locale);
+    const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
+    const isPartCurrency = (part) => part.type === "currency";
+    const lazyFormatters = React.useMemo(
+      () => ({
+        original: () => money,
+        currencyCode: () => money.currencyCode,
+        localizedString: () => defaultFormatter().format(amount),
+        parts: () => defaultFormatter().formatToParts(amount),
+        withoutTrailingZeros: () => amount % 1 === 0 ? withoutTrailingZerosFormatter().format(amount) : defaultFormatter().format(amount),
+        withoutTrailingZerosAndCurrency: () => amount % 1 === 0 ? withoutTrailingZerosOrCurrencyFormatter().format(amount) : withoutCurrencyFormatter().format(amount),
+        currencyName: () => {
+          var _a;
+          return ((_a = nameFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) ?? money.currencyCode;
+        },
+        // e.g. "US dollars"
+        currencySymbol: () => {
+          var _a;
+          return ((_a = defaultFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) ?? money.currencyCode;
+        },
+        // e.g. "USD"
+        currencyNarrowSymbol: () => {
+          var _a;
+          return ((_a = narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) ?? "";
+        },
+        // e.g. "$"
+        amount: () => defaultFormatter().formatToParts(amount).filter(
+          (part) => ["decimal", "fraction", "group", "integer", "literal"].includes(
+            part.type
+          )
+        ).map((part) => part.value).join("")
+      }),
+      [
+        money,
+        amount,
+        nameFormatter,
+        defaultFormatter,
+        narrowSymbolFormatter,
+        withoutCurrencyFormatter,
+        withoutTrailingZerosFormatter,
+        withoutTrailingZerosOrCurrencyFormatter
+      ]
+    );
+    return React.useMemo(
+      () => new Proxy(lazyFormatters, {
+        get: (target, key) => {
+          var _a;
+          return (_a = Reflect.get(target, key)) == null ? void 0 : _a.call(null);
+        }
+      }),
+      [lazyFormatters]
+    );
+  }
+  function useLazyFormatter(locale, options) {
+    return React.useMemo(() => {
+      let memoized;
+      return () => memoized ?? (memoized = new Intl.NumberFormat(locale, options));
+    }, [locale, options]);
+  }
+  function Money({
+    data,
+    as,
+    withoutCurrency,
+    withoutTrailingZeros,
+    measurement,
+    measurementSeparator = "/",
+    ...passthroughProps
+  }) {
+    if (!isMoney(data)) {
+      throw new Error(
+        `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`
+      );
+    }
+    const moneyObject = useMoney(data);
+    const Wrapper = as ?? "div";
+    let output = moneyObject.localizedString;
+    if (withoutCurrency || withoutTrailingZeros) {
+      if (withoutCurrency && !withoutTrailingZeros) {
+        output = moneyObject.amount;
+      } else if (!withoutCurrency && withoutTrailingZeros) {
+        output = moneyObject.withoutTrailingZeros;
+      } else {
+        output = moneyObject.withoutTrailingZerosAndCurrency;
+      }
+    }
+    return /* @__PURE__ */ React.createElement(Wrapper, { ...passthroughProps }, output, measurement && measurement.referenceUnit && /* @__PURE__ */ React.createElement(React.Fragment, null, measurementSeparator, measurement.referenceUnit));
+  }
+  function isMoney(maybeMoney) {
+    return typeof maybeMoney.amount === "string" && !!maybeMoney.amount && typeof maybeMoney.currencyCode === "string" && !!maybeMoney.currencyCode;
+  }
+  function CartCost(props) {
+    const { cost } = useCart();
+    const { amountType = "total", children, ...passthroughProps } = props;
+    let amount;
+    if (amountType == "total") {
+      amount = cost == null ? void 0 : cost.totalAmount;
+    } else if (amountType == "subtotal") {
+      amount = cost == null ? void 0 : cost.subtotalAmount;
+    } else if (amountType == "tax") {
+      amount = cost == null ? void 0 : cost.totalTaxAmount;
+    } else if (amountType == "duty") {
+      amount = cost == null ? void 0 : cost.totalDutyAmount;
+    }
+    if (amount == null) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(Money, { ...passthroughProps, data: amount }, children);
+  }
+  function CartLinePrice(props) {
+    var _a, _b;
+    const { data: cartLine, priceType = "regular", ...passthroughProps } = props;
+    if (cartLine == null) {
+      throw new Error(`<CartLinePrice/> requires a cart line as the 'data' prop`);
+    }
+    const moneyV2 = priceType === "regular" ? (_a = cartLine.cost) == null ? void 0 : _a.totalAmount : (_b = cartLine.cost) == null ? void 0 : _b.compareAtAmountPerQuantity;
+    if (moneyV2 == null) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(Money, { ...passthroughProps, data: moneyV2 });
+  }
+  const CartLineContext = React.createContext(null);
+  function useCartLine() {
+    const context = React.useContext(CartLineContext);
+    if (context == null) {
+      throw new Error("Expected a cart line context but none was found");
+    }
+    return context;
+  }
+  function CartLineProvider({ children, line }) {
+    return /* @__PURE__ */ React.createElement(CartLineContext.Provider, { value: line }, children);
   }
   const storefrontApiCustomScalars = {
+    // Keep in sync with the definitions in the app/nextjs/codegen.ts!
     DateTime: "string",
     Decimal: "string",
     HTML: "string",
@@ -2295,9 +2993,7 @@
     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,
@@ -2319,22 +3015,19 @@
       }
       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
+    return /* @__PURE__ */ React.createElement(
+      "iframe",
+      {
+        ...passthroughProps,
+        id: id ?? data.embedUrl,
+        title: data.alt ?? data.id ?? "external video",
+        frameBorder,
+        allow,
+        allowFullScreen,
+        src: finalUrl,
+        loading
       }
-    });
+    );
   }
   const PRODUCTION_CDN_HOSTNAMES = [
     "cdn.shopify.com",
@@ -2353,7 +3046,7 @@
     scale
   }) {
     const newUrl = new URL(src);
-    const multipliedScale = scale != null ? scale : 1;
+    const multipliedScale = scale ?? 1;
     if (width) {
       let finalWidth;
       if (typeof width === "string") {
@@ -2384,32 +3077,31 @@
     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
+        width: (loaderOptions == null ? void 0 : loaderOptions.width) ?? (aspectRatio && typeof loaderOptions.height === "number" ? Math.round(aspectRatio * loaderOptions.height) : null),
+        height: (loaderOptions == null ? void 0 : loaderOptions.height) ?? (aspectRatio && typeof loaderOptions.width === "number" ? Math.round(aspectRatio * loaderOptions.width) : null)
       };
     }
     if ((elementProps == null ? void 0 : elementProps.width) || (elementProps == null ? void 0 : elementProps.height)) {
       return {
-        width: (_c = elementProps == null ? void 0 : elementProps.width) != null ? _c : aspectRatio && typeof elementProps.height === "number" ? Math.round(aspectRatio * elementProps.height) : null,
-        height: (_d = elementProps == null ? void 0 : elementProps.height) != null ? _d : aspectRatio && typeof elementProps.width === "number" ? Math.round(aspectRatio * elementProps.width) : null
+        width: (elementProps == null ? void 0 : elementProps.width) ?? (aspectRatio && typeof elementProps.height === "number" ? Math.round(aspectRatio * elementProps.height) : null),
+        height: (elementProps == null ? void 0 : elementProps.height) ?? (aspectRatio && typeof elementProps.width === "number" ? Math.round(aspectRatio * elementProps.width) : null)
       };
     }
     if ((sfapiImage == null ? void 0 : sfapiImage.width) || (sfapiImage == null ? void 0 : sfapiImage.height)) {
       return {
-        width: (_e = sfapiImage == null ? void 0 : sfapiImage.width) != null ? _e : null,
-        height: (_f = sfapiImage == null ? void 0 : sfapiImage.height) != null ? _f : null
+        // can't calculate the aspect ratio here
+        width: (sfapiImage == null ? void 0 : sfapiImage.width) ?? null,
+        height: (sfapiImage == null ? void 0 : sfapiImage.height) ?? null
       };
     }
     return { width: null, height: null };
   }
-  var _jsxFileName$7 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/Image.tsx";
   function Image({
     data,
     width,
@@ -2421,20 +3113,18 @@
     decoding = "async",
     ...rest
   }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (!data.url) {
-      const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${(_a = data.id) != null ? _a : "no ID provided"}`;
+      const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${data.id ?? "no ID provided"}`;
       {
         throw new Error(missingUrlError);
       }
     }
     if (!data.altText && !rest.alt) {
-      console.warn(`<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${(_b = data.id) != null ? _b : data.url}`);
+      console.warn(
+        `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${data.id ?? data.url}`
+      );
     }
-    const {
-      width: imgElementWidth,
-      height: imgElementHeight
-    } = getShopifyImageDimensions({
+    const { width: imgElementWidth, height: imgElementHeight } = getShopifyImageDimensions({
       data,
       loaderOptions,
       elementProps: {
@@ -2443,7 +3133,9 @@
       }
     });
     if (!imgElementWidth || !imgElementHeight) {
-      console.warn(`<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${(_c = data.id) != null ? _c : data.url}`);
+      console.warn(
+        `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${data.id ?? data.url}`
+      );
     }
     let finalSrc = data.url;
     if (loader) {
@@ -2454,11 +3146,13 @@
         height: imgElementHeight
       });
       if (typeof finalSrc !== "string" || !finalSrc) {
-        throw new Error(`<Image/>: 'loader' did not return a valid string. Image: ${(_d = data.id) != null ? _d : data.url}`);
+        throw new Error(
+          `<Image/>: 'loader' did not return a valid string. Image: ${data.id ?? data.url}`
+        );
       }
     }
     const maxWidth = width && imgElementWidth && width < imgElementWidth ? width : imgElementWidth;
-    const finalSrcset = (_e = rest.srcSet) != null ? _e : internalImageSrcSet({
+    const finalSrcset = rest.srcSet ?? internalImageSrcSet({
       ...loaderOptions,
       widths,
       src: data.url,
@@ -2466,23 +3160,20 @@
       height: imgElementHeight,
       loader
     });
-    return /* @__PURE__ */ React__namespace.createElement("img", {
-      id: (_f = data.id) != null ? _f : "",
-      alt: (_h = (_g = data.altText) != null ? _g : rest.alt) != null ? _h : "",
-      loading: loading != null ? loading : "lazy",
-      ...rest,
-      src: finalSrc,
-      width: imgElementWidth != null ? imgElementWidth : void 0,
-      height: imgElementHeight != null ? imgElementHeight : void 0,
-      srcSet: finalSrcset,
-      decoding,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 150,
-        columnNumber: 5
+    return /* @__PURE__ */ React__namespace.createElement(
+      "img",
+      {
+        id: data.id ?? "",
+        alt: data.altText ?? rest.alt ?? "",
+        loading: loading ?? "lazy",
+        ...rest,
+        src: finalSrc,
+        width: imgElementWidth ?? void 0,
+        height: imgElementHeight ?? void 0,
+        srcSet: finalSrcset,
+        decoding
       }
-    });
+    );
   }
   function internalImageSrcSet({
     src,
@@ -2495,7 +3186,9 @@
   }) {
     const hasCustomWidths = widths && Array.isArray(widths);
     if (hasCustomWidths && widths.some((size) => isNaN(size))) {
-      throw new Error(`<Image/>: the 'widths' must be an array of numbers. Image: ${src}`);
+      throw new Error(
+        `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`
+      );
     }
     let aspectRatio = 1;
     if (width && height) {
@@ -2506,17 +3199,20 @@
       setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);
     }
     const srcGenerator = loader ? loader : addImageSizeParametersToUrl;
-    return setSizes.map((size) => `${srcGenerator({
-      src,
-      width: size,
-      height: crop ? Number(size) * aspectRatio : void 0,
-      crop,
-      scale
-    })} ${size}w`).join(", ");
-  }
-  var _jsxFileName$6 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/Video.tsx";
+    return setSizes.map(
+      (size) => `${srcGenerator({
+        src,
+        width: size,
+        // height is not applied if there is no crop
+        // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size
+        height: crop ? Number(size) * aspectRatio : void 0,
+        crop,
+        scale
+      })} ${size}w`
+    ).join(", ");
+  }
   function Video(props) {
-    var _a, _b;
+    var _a;
     const {
       data,
       previewImageOptions,
@@ -2527,41 +3223,39 @@
       ...passthroughProps
     } = props;
     const posterUrl = shopifyImageLoader({
-      src: (_b = (_a = data.previewImage) == null ? void 0 : _a.url) != null ? _b : "",
+      src: ((_a = data.previewImage) == null ? void 0 : _a.url) ?? "",
       ...previewImageOptions
     });
     if (!data.sources) {
       throw new Error(`<Video/> requires a 'data.sources' array`);
     }
-    return /* @__PURE__ */ React__default.default.createElement("video", {
-      ...passthroughProps,
-      id,
-      playsInline,
-      controls,
-      poster: posterUrl,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 42,
-        columnNumber: 5
-      }
-    }, data.sources.map((source) => {
-      if (!((source == null ? void 0 : source.url) && (source == null ? void 0 : source.mimeType))) {
-        throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);
-      }
-      return /* @__PURE__ */ React__default.default.createElement("source", {
-        ...sourceProps,
-        key: source.url,
-        src: source.url,
-        type: source.mimeType,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$6,
-          lineNumber: 54,
-          columnNumber: 11
-        }
-      });
-    }));
+    return (
+      // eslint-disable-next-line jsx-a11y/media-has-caption
+      /* @__PURE__ */ React.createElement(
+        "video",
+        {
+          ...passthroughProps,
+          id,
+          playsInline,
+          controls,
+          poster: posterUrl
+        },
+        data.sources.map((source) => {
+          if (!((source == null ? void 0 : source.url) && (source == null ? void 0 : source.mimeType))) {
+            throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);
+          }
+          return /* @__PURE__ */ React.createElement(
+            "source",
+            {
+              ...sourceProps,
+              key: source.url,
+              src: source.url,
+              type: source.mimeType
+            }
+          );
+        })
+      )
+    );
   }
   const SCRIPTS_LOADED = {};
   function loadScript(src, options) {
@@ -2609,22 +3303,21 @@
     }, [url, stringifiedOptions, options]);
     return status;
   }
-  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);
+    var _a, _b, _c;
+    const [modelViewer, setModelViewer] = React.useState(
+      void 0
+    );
     const callbackRef = React.useCallback((node) => {
       setModelViewer(node);
     }, []);
-    const {
-      data,
-      children,
-      className,
-      ...passthroughProps
-    } = props;
-    const modelViewerLoadedStatus = useLoadScript("https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js", {
-      module: true
-    });
+    const { data, children, className, ...passthroughProps } = props;
+    const modelViewerLoadedStatus = useLoadScript(
+      "https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js",
+      {
+        module: true
+      }
+    );
     React.useEffect(() => {
       if (!modelViewer) {
         return;
@@ -2636,25 +3329,43 @@
       if (passthroughProps.onPreload)
         modelViewer.addEventListener("preload", passthroughProps.onPreload);
       if (passthroughProps.onModelVisibility)
-        modelViewer.addEventListener("model-visibility", passthroughProps.onModelVisibility);
+        modelViewer.addEventListener(
+          "model-visibility",
+          passthroughProps.onModelVisibility
+        );
       if (passthroughProps.onProgress)
         modelViewer.addEventListener("progress", passthroughProps.onProgress);
       if (passthroughProps.onArStatus)
         modelViewer.addEventListener("ar-status", passthroughProps.onArStatus);
       if (passthroughProps.onArTracking)
-        modelViewer.addEventListener("ar-tracking", passthroughProps.onArTracking);
+        modelViewer.addEventListener(
+          "ar-tracking",
+          passthroughProps.onArTracking
+        );
       if (passthroughProps.onQuickLookButtonTapped)
-        modelViewer.addEventListener("quick-look-button-tapped", passthroughProps.onQuickLookButtonTapped);
+        modelViewer.addEventListener(
+          "quick-look-button-tapped",
+          passthroughProps.onQuickLookButtonTapped
+        );
       if (passthroughProps.onCameraChange)
-        modelViewer.addEventListener("camera-change", passthroughProps.onCameraChange);
+        modelViewer.addEventListener(
+          "camera-change",
+          passthroughProps.onCameraChange
+        );
       if (passthroughProps.onEnvironmentChange)
-        modelViewer.addEventListener("environment-change", passthroughProps.onEnvironmentChange);
+        modelViewer.addEventListener(
+          "environment-change",
+          passthroughProps.onEnvironmentChange
+        );
       if (passthroughProps.onPlay)
         modelViewer.addEventListener("play", passthroughProps.onPlay);
       if (passthroughProps.onPause)
         modelViewer.addEventListener("ar-status", passthroughProps.onPause);
       if (passthroughProps.onSceneGraphReady)
-        modelViewer.addEventListener("scene-graph-ready", passthroughProps.onSceneGraphReady);
+        modelViewer.addEventListener(
+          "scene-graph-ready",
+          passthroughProps.onSceneGraphReady
+        );
       return () => {
         if (modelViewer == null) {
           return;
@@ -2666,27 +3377,66 @@
         if (passthroughProps.onPreload)
           modelViewer.removeEventListener("preload", passthroughProps.onPreload);
         if (passthroughProps.onModelVisibility)
-          modelViewer.removeEventListener("model-visibility", passthroughProps.onModelVisibility);
+          modelViewer.removeEventListener(
+            "model-visibility",
+            passthroughProps.onModelVisibility
+          );
         if (passthroughProps.onProgress)
-          modelViewer.removeEventListener("progress", passthroughProps.onProgress);
+          modelViewer.removeEventListener(
+            "progress",
+            passthroughProps.onProgress
+          );
         if (passthroughProps.onArStatus)
-          modelViewer.removeEventListener("ar-status", passthroughProps.onArStatus);
+          modelViewer.removeEventListener(
+            "ar-status",
+            passthroughProps.onArStatus
+          );
         if (passthroughProps.onArTracking)
-          modelViewer.removeEventListener("ar-tracking", passthroughProps.onArTracking);
+          modelViewer.removeEventListener(
+            "ar-tracking",
+            passthroughProps.onArTracking
+          );
         if (passthroughProps.onQuickLookButtonTapped)
-          modelViewer.removeEventListener("quick-look-button-tapped", passthroughProps.onQuickLookButtonTapped);
+          modelViewer.removeEventListener(
+            "quick-look-button-tapped",
+            passthroughProps.onQuickLookButtonTapped
+          );
         if (passthroughProps.onCameraChange)
-          modelViewer.removeEventListener("camera-change", passthroughProps.onCameraChange);
+          modelViewer.removeEventListener(
+            "camera-change",
+            passthroughProps.onCameraChange
+          );
         if (passthroughProps.onEnvironmentChange)
-          modelViewer.removeEventListener("environment-change", passthroughProps.onEnvironmentChange);
+          modelViewer.removeEventListener(
+            "environment-change",
+            passthroughProps.onEnvironmentChange
+          );
         if (passthroughProps.onPlay)
           modelViewer.removeEventListener("play", passthroughProps.onPlay);
         if (passthroughProps.onPause)
           modelViewer.removeEventListener("ar-status", passthroughProps.onPause);
         if (passthroughProps.onSceneGraphReady)
-          modelViewer.removeEventListener("scene-graph-ready", passthroughProps.onSceneGraphReady);
+          modelViewer.removeEventListener(
+            "scene-graph-ready",
+            passthroughProps.onSceneGraphReady
+          );
       };
-    }, [modelViewer, passthroughProps.onArStatus, passthroughProps.onArTracking, passthroughProps.onCameraChange, passthroughProps.onEnvironmentChange, passthroughProps.onError, passthroughProps.onLoad, passthroughProps.onModelVisibility, passthroughProps.onPause, passthroughProps.onPlay, passthroughProps.onPreload, passthroughProps.onProgress, passthroughProps.onQuickLookButtonTapped, passthroughProps.onSceneGraphReady]);
+    }, [
+      modelViewer,
+      passthroughProps.onArStatus,
+      passthroughProps.onArTracking,
+      passthroughProps.onCameraChange,
+      passthroughProps.onEnvironmentChange,
+      passthroughProps.onError,
+      passthroughProps.onLoad,
+      passthroughProps.onModelVisibility,
+      passthroughProps.onPause,
+      passthroughProps.onPlay,
+      passthroughProps.onPreload,
+      passthroughProps.onProgress,
+      passthroughProps.onQuickLookButtonTapped,
+      passthroughProps.onSceneGraphReady
+    ]);
     if (modelViewerLoadedStatus !== "done") {
       return null;
     }
@@ -2697,63 +3447,62 @@
       }
     }
     if (!data.alt) {
-      console.warn(`<ModelViewer/> requires the 'data.alt' prop for accessibility`);
-    }
-    return /* @__PURE__ */ React__default.default.createElement("model-viewer", {
-      ref: callbackRef,
-      ...passthroughProps,
-      className,
-      id: (_c = passthroughProps.id) != null ? _c : data.id,
-      src: data.sources[0].url,
-      alt: (_d = data.alt) != null ? _d : null,
-      "camera-controls": (_e = passthroughProps.cameraControls) != null ? _e : true,
-      poster: (_g = passthroughProps.poster || ((_f = data.previewImage) == null ? void 0 : _f.url)) != null ? _g : null,
-      autoplay: (_h = passthroughProps.autoplay) != null ? _h : true,
-      loading: passthroughProps.loading,
-      reveal: passthroughProps.reveal,
-      ar: passthroughProps.ar,
-      "ar-modes": passthroughProps.arModes,
-      "ar-scale": passthroughProps.arScale,
-      "ar-placement": passthroughProps.arPlacement,
-      "ios-src": passthroughProps.iosSrc,
-      "touch-action": passthroughProps.touchAction,
-      "disable-zoom": passthroughProps.disableZoom,
-      "orbit-sensitivity": passthroughProps.orbitSensitivity,
-      "auto-rotate": passthroughProps.autoRotate,
-      "auto-rotate-delay": passthroughProps.autoRotateDelay,
-      "rotation-per-second": passthroughProps.rotationPerSecond,
-      "interaction-policy": passthroughProps.interactionPolicy,
-      "interaction-prompt": passthroughProps.interactionPrompt,
-      "interaction-prompt-style": passthroughProps.interactionPromptStyle,
-      "interaction-prompt-threshold": passthroughProps.interactionPromptThreshold,
-      "camera-orbit": passthroughProps.cameraOrbit,
-      "camera-target": passthroughProps.cameraTarget,
-      "field-of-view": passthroughProps.fieldOfView,
-      "max-camera-orbit": passthroughProps.maxCameraOrbit,
-      "min-camera-orbit": passthroughProps.minCameraOrbit,
-      "max-field-of-view": passthroughProps.maxFieldOfView,
-      "min-field-of-view": passthroughProps.minFieldOfView,
-      bounds: passthroughProps.bounds,
-      "interpolation-decay": (_i = passthroughProps.interpolationDecay) != null ? _i : 100,
-      "skybox-image": passthroughProps.skyboxImage,
-      "environment-image": passthroughProps.environmentImage,
-      exposure: passthroughProps.exposure,
-      "shadow-intensity": (_j = passthroughProps.shadowIntensity) != null ? _j : 0,
-      "shadow-softness": (_k = passthroughProps.shadowSoftness) != null ? _k : 0,
-      "animation-name": passthroughProps.animationName,
-      "animation-crossfade-duration": passthroughProps.animationCrossfadeDuration,
-      "variant-name": passthroughProps.variantName,
-      orientation: passthroughProps.orientation,
-      scale: passthroughProps.scale,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$5,
-        lineNumber: 222,
-        columnNumber: 5
-      }
-    }, children);
-  }
-  var _jsxFileName$4 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/MediaFile.tsx";
+      console.warn(
+        `<ModelViewer/> requires the 'data.alt' prop for accessibility`
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      "model-viewer",
+      {
+        ref: callbackRef,
+        ...passthroughProps,
+        className,
+        id: passthroughProps.id ?? data.id,
+        src: data.sources[0].url,
+        alt: data.alt ?? null,
+        "camera-controls": passthroughProps.cameraControls ?? true,
+        poster: (passthroughProps.poster || ((_c = data.previewImage) == null ? void 0 : _c.url)) ?? null,
+        autoplay: passthroughProps.autoplay ?? true,
+        loading: passthroughProps.loading,
+        reveal: passthroughProps.reveal,
+        ar: passthroughProps.ar,
+        "ar-modes": passthroughProps.arModes,
+        "ar-scale": passthroughProps.arScale,
+        "ar-placement": passthroughProps.arPlacement,
+        "ios-src": passthroughProps.iosSrc,
+        "touch-action": passthroughProps.touchAction,
+        "disable-zoom": passthroughProps.disableZoom,
+        "orbit-sensitivity": passthroughProps.orbitSensitivity,
+        "auto-rotate": passthroughProps.autoRotate,
+        "auto-rotate-delay": passthroughProps.autoRotateDelay,
+        "rotation-per-second": passthroughProps.rotationPerSecond,
+        "interaction-policy": passthroughProps.interactionPolicy,
+        "interaction-prompt": passthroughProps.interactionPrompt,
+        "interaction-prompt-style": passthroughProps.interactionPromptStyle,
+        "interaction-prompt-threshold": passthroughProps.interactionPromptThreshold,
+        "camera-orbit": passthroughProps.cameraOrbit,
+        "camera-target": passthroughProps.cameraTarget,
+        "field-of-view": passthroughProps.fieldOfView,
+        "max-camera-orbit": passthroughProps.maxCameraOrbit,
+        "min-camera-orbit": passthroughProps.minCameraOrbit,
+        "max-field-of-view": passthroughProps.maxFieldOfView,
+        "min-field-of-view": passthroughProps.minFieldOfView,
+        bounds: passthroughProps.bounds,
+        "interpolation-decay": passthroughProps.interpolationDecay ?? 100,
+        "skybox-image": passthroughProps.skyboxImage,
+        "environment-image": passthroughProps.environmentImage,
+        exposure: passthroughProps.exposure,
+        "shadow-intensity": passthroughProps.shadowIntensity ?? 0,
+        "shadow-softness": passthroughProps.shadowSoftness ?? 0,
+        "animation-name": passthroughProps.animationName,
+        "animation-crossfade-duration": passthroughProps.animationCrossfadeDuration,
+        "variant-name": passthroughProps.variantName,
+        orientation: passthroughProps.orientation,
+        scale: passthroughProps.scale
+      },
+      children
+    );
+  }
   function MediaFile({
     data,
     mediaOptions,
@@ -2767,56 +3516,40 @@
             throw new Error(noDataImage);
           }
         }
-        return /* @__PURE__ */ React__default.default.createElement(Image, {
-          ...passthroughProps,
-          ...mediaOptions == null ? void 0 : mediaOptions.image,
-          data: data.image,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$4,
-            lineNumber: 54,
-            columnNumber: 9
+        return /* @__PURE__ */ React.createElement(
+          Image,
+          {
+            ...passthroughProps,
+            ...mediaOptions == null ? void 0 : mediaOptions.image,
+            data: data.image
           }
-        });
+        );
       }
       case "Video": {
-        return /* @__PURE__ */ React__default.default.createElement(Video, {
-          ...passthroughProps,
-          ...mediaOptions == null ? void 0 : mediaOptions.video,
-          data,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$4,
-            lineNumber: 63,
-            columnNumber: 9
-          }
-        });
+        return /* @__PURE__ */ React.createElement(Video, { ...passthroughProps, ...mediaOptions == null ? void 0 : mediaOptions.video, data });
       }
       case "ExternalVideo": {
-        return /* @__PURE__ */ React__default.default.createElement(ExternalVideo, {
-          ...passthroughProps,
-          ...mediaOptions == null ? void 0 : mediaOptions.externalVideo,
-          data,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$4,
-            lineNumber: 68,
-            columnNumber: 9
+        return /* @__PURE__ */ React.createElement(
+          ExternalVideo,
+          {
+            ...passthroughProps,
+            ...mediaOptions == null ? void 0 : mediaOptions.externalVideo,
+            data
           }
-        });
+        );
       }
       case "Model3d": {
-        return /* @__PURE__ */ React__default.default.createElement(ModelViewer, {
-          ...passthroughProps,
-          ...mediaOptions == null ? void 0 : mediaOptions.modelViewer,
-          data,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$4,
-            lineNumber: 78,
-            columnNumber: 9
-          }
-        });
+        return (
+          // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment
+          /* @__PURE__ */ React.createElement(
+            ModelViewer,
+            {
+              ...passthroughProps,
+              ...mediaOptions == null ? void 0 : mediaOptions.modelViewer,
+              data
+            }
+          )
+        );
       }
       default: {
         const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;
@@ -2826,384 +3559,9 @@
       }
     }
   }
-  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 {
-      data,
-      as,
-      ...passthroughProps
-    } = props;
-    const {
-      locale
-    } = useShop();
-    const parsedMetafield = React.useMemo(() => parseMetafield(data), [data]);
-    if (!parsedMetafield) {
-      const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;
-      {
-        throw new Error(noDataPropWarning);
-      }
-    }
-    if (parsedMetafield.value === null || parsedMetafield.value === void 0) {
-      const noValueWarning = `<Metafield/>: No metafield value for metafield ${(_a = parsedMetafield.id) != null ? _a : parsedMetafield.key}. Rendering 'null'`;
-      {
-        throw new Error(noValueWarning);
-      }
-    }
-    switch (parsedMetafield.type) {
-      case "date": {
-        const Wrapper2 = as != null ? as : "time";
-        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
-          ...passthroughProps,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$3,
-            lineNumber: 68,
-            columnNumber: 9
-          }
-        }, parsedMetafield.value.toLocaleDateString(locale));
-      }
-      case "date_time": {
-        const Wrapper2 = as != null ? as : "time";
-        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
-          ...passthroughProps,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$3,
-            lineNumber: 76,
-            columnNumber: 9
-          }
-        }, parsedMetafield.value.toLocaleString(locale));
-      }
-      case "weight":
-      case "dimension":
-      case "volume": {
-        const Wrapper2 = as != null ? as : "span";
-        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
-          ...passthroughProps,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$3,
-            lineNumber: 86,
-            columnNumber: 9
-          }
-        }, getMeasurementAsString(parsedMetafield.value, locale));
-      }
-      case "rating": {
-        const Wrapper2 = as != null ? as : "span";
-        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
-          ...passthroughProps,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$3,
-            lineNumber: 94,
-            columnNumber: 9
-          }
-        }, parsedMetafield.value.value);
-      }
-      case "single_line_text_field": {
-        const Wrapper2 = as != null ? as : "span";
-        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
-          ...passthroughProps,
-          dangerouslySetInnerHTML: {
-            __html: parsedMetafield.value
-          },
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$3,
-            lineNumber: 102,
-            columnNumber: 9
-          }
-        });
-      }
-      case "multi_line_text_field": {
-        const Wrapper2 = as != null ? as : "div";
-        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
-          ...passthroughProps,
-          dangerouslySetInnerHTML: {
-            __html: parsedMetafield.value.split("\n").join("<br/>")
-          },
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$3,
-            lineNumber: 111,
-            columnNumber: 9
-          }
-        });
-      }
-      case "url": {
-        const protocolLessUrl = new URL(parsedMetafield.value);
-        return /* @__PURE__ */ React__default.default.createElement("a", {
-          href: protocolLessUrl.href.replace(protocolLessUrl.protocol, ""),
-          ...passthroughProps,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$3,
-            lineNumber: 122,
-            columnNumber: 9
-          }
-        }, parsedMetafield.value);
-      }
-      case "json": {
-        const Wrapper2 = as != null ? as : "span";
-        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
-          ...passthroughProps,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$3,
-            lineNumber: 133,
-            columnNumber: 9
-          }
-        }, JSON.stringify(parsedMetafield.value));
-      }
-      case "product_reference":
-      case "variant_reference":
-      case "page_reference": {
-        const Wrapper2 = as != null ? as : "span";
-        const ref = parsedMetafield.reference;
-        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
-          ...passthroughProps,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$3,
-            lineNumber: 144,
-            columnNumber: 9
-          }
-        }, (_c = (_b = ref == null ? void 0 : ref.title) != null ? _b : ref == null ? void 0 : ref.id) != null ? _c : "");
-      }
-      case "list.single_line_text_field": {
-        const Wrapper2 = as != null ? as : "ul";
-        const refArray = parsedMetafield.references ? flattenConnection(parsedMetafield.references) : [];
-        return /* @__PURE__ */ React__default.default.createElement(Wrapper2, {
-          ...passthroughProps,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$3,
-            lineNumber: 154,
-            columnNumber: 9
-          }
-        }, refArray.map((ref, index2) => /* @__PURE__ */ React__default.default.createElement("li", {
-          key: `${ref != null ? ref : ""}-${index2}`,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$3,
-            lineNumber: 158,
-            columnNumber: 13
-          }
-        }, ref)));
-      }
-      case "file_reference": {
-        if (((_d = parsedMetafield.reference) == null ? void 0 : _d.__typename) === "MediaImage") {
-          const ref = parsedMetafield.reference;
-          return ref.image ? /* @__PURE__ */ React__default.default.createElement(Image, {
-            data: ref.image,
-            ...passthroughProps,
-            __self: this,
-            __source: {
-              fileName: _jsxFileName$3,
-              lineNumber: 167,
-              columnNumber: 11
-            }
-          }) : null;
-        } else if (((_e = parsedMetafield.reference) == null ? void 0 : _e.__typename) === "GenericFile") {
-          const ref = parsedMetafield.reference;
-          return ref.previewImage ? /* @__PURE__ */ React__default.default.createElement("a", {
-            href: (_g = (_f = parsedMetafield.reference) == null ? void 0 : _f.url) != null ? _g : "",
-            ...passthroughProps,
-            __self: this,
-            __source: {
-              fileName: _jsxFileName$3,
-              lineNumber: 172,
-              columnNumber: 11
-            }
-          }, /* @__PURE__ */ React__default.default.createElement(Image, {
-            data: ref.previewImage,
-            __self: this,
-            __source: {
-              fileName: _jsxFileName$3,
-              lineNumber: 173,
-              columnNumber: 13
-            }
-          })) : null;
-        } else if (((_h = parsedMetafield.reference) == null ? void 0 : _h.__typename) === "Video") {
-          const ref = parsedMetafield.reference;
-          return /* @__PURE__ */ React__default.default.createElement(Video, {
-            ...passthroughProps,
-            data: ref,
-            __self: this,
-            __source: {
-              fileName: _jsxFileName$3,
-              lineNumber: 178,
-              columnNumber: 16
-            }
-          });
-        }
-      }
-    }
-    const Wrapper = as != null ? as : "span";
-    return /* @__PURE__ */ React__default.default.createElement(Wrapper, {
-      ...passthroughProps,
-      __self: this,
-      __source: {
-        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`);
-      }
-      return null;
-    }
-    if (metafield.value === null || metafield.value === void 0) {
-      console.warn(`'parseMetafield()' was passed ${metafield.value} for 'metafield.value'`);
-    }
-    return {
-      ...metafield,
-      value: parseMetafieldValue(metafield)
-    };
-  }
-  function parseMetafieldValue(metafield) {
-    {
-      console.info(`'parseMetafieldValue()' will be removed in a future version`);
-    }
-    if (!metafield) {
-      return null;
-    }
-    if (metafield.value === null || metafield.value === void 0) {
-      {
-        console.warn(`'parseMetafieldValue()' was passed ${metafield.value} for 'metafield.value'`);
-      }
-      return metafield.value;
-    }
-    switch (metafield.type) {
-      case "boolean":
-        return metafield.value === "true";
-      case "number_integer":
-        return parseInt(metafield.value);
-      case "number_decimal":
-        return parseFloat(metafield.value);
-      case "date":
-      case "date_time":
-        return new Date(metafield.value);
-      case "json":
-      case "weight":
-      case "dimension":
-      case "volume":
-      case "rating":
-        return parseJSON(metafield.value);
-      case "color":
-      case "single_line_text_field":
-      case "multi_line_text_field":
-      case "product_reference":
-      case "page_reference":
-      case "variant_reference":
-      case "file_reference":
-      case "url":
-      default:
-        return metafield.value;
-    }
-  }
-  function parseJSON(json) {
-    if (String(json).includes("__proto__")) {
-      return JSON.parse(json, (k, v2) => {
-        if (k !== "__proto__")
-          return v2;
-      });
-    }
-    return JSON.parse(json);
-  }
-  const UNIT_MAPPING = {
-    mm: "millimeter",
-    cm: "centimeter",
-    m: "meter",
-    in: "inch",
-    ft: "foot",
-    yd: "yard",
-    ml: "milliliter",
-    l: "liter",
-    us_fl_oz: "fluid-ounce",
-    us_gal: "gallon",
-    kg: "kilogram",
-    g: "gram",
-    lb: "pound",
-    oz: "ounce"
-  };
-  function getMeasurementAsString(measurement, locale = "en-us", options = {}) {
-    let measure = {
-      value: measurement.value,
-      unit: UNIT_MAPPING[measurement.unit]
-    };
-    if (measure.unit == null) {
-      measure = convertToSupportedUnit(measurement.value, measurement.unit);
-    }
-    return new Intl.NumberFormat(locale, {
-      ...options,
-      unit: measure.unit,
-      style: "unit"
-    }).format(measure.value);
-  }
-  function convertToSupportedUnit(value, unit) {
-    switch (unit) {
-      case "cl":
-        return {
-          value: value / 1e3,
-          unit: "liter"
-        };
-      case "m3":
-        return {
-          value: value * 1e3,
-          unit: "liter"
-        };
-      case "us_pt":
-        return {
-          value: value * 0.125,
-          unit: "gallon"
-        };
-      case "us_qt":
-        return {
-          value: value * 0.5,
-          unit: "gallon"
-        };
-      case "us_oz":
-        return {
-          value: value / 128,
-          unit: "gallon"
-        };
-      case "imp_pt":
-        return {
-          value: value / 6.661,
-          unit: "gallon"
-        };
-      case "imp_qt":
-        return {
-          value: value / 3.331,
-          unit: "gallon"
-        };
-      case "imp_gal":
-        return {
-          value: value / 1.201,
-          unit: "gallon"
-        };
-      case "imp_fl_oz":
-        return {
-          value: value * 0.96076,
-          unit: "fluid-ounce"
-        };
-      default:
-        throw new Error(`Unit not supported: ${unit}`);
-    }
-  }
-  function metafieldParser(metafield) {
-    var _a, _b, _c, _d;
     if (!metafield.type) {
-      const noTypeError = `metafieldParser(): The 'type' field is required in order to parse the Metafield.`;
+      const noTypeError = `parseMetafield(): The 'type' field is required in order to parse the Metafield.`;
       {
         throw new Error(noTypeError);
       }
@@ -3248,9 +3606,9 @@
       case "list.weight": {
         let parsedValue = null;
         try {
-          parsedValue = parseJSON((_a = metafield.value) != null ? _a : "");
+          parsedValue = parseJSON(metafield.value ?? "");
         } catch (err) {
-          const parseError = `metafieldParser(): attempted to JSON.parse the 'metafield.value' property, but failed.`;
+          const parseError = `parseMetafield(): attempted to JSON.parse the 'metafield.value' property, but failed.`;
           {
             throw new Error(parseError);
           }
@@ -3264,11 +3622,11 @@
       case "date_time":
         return {
           ...metafield,
-          parsedValue: new Date((_b = metafield.value) != null ? _b : "")
+          parsedValue: new Date(metafield.value ?? "")
         };
       case "list.date":
       case "list.date_time": {
-        const jsonParseValue = parseJSON((_c = metafield == null ? void 0 : metafield.value) != null ? _c : "");
+        const jsonParseValue = parseJSON((metafield == null ? void 0 : metafield.value) ?? "");
         return {
           ...metafield,
           parsedValue: jsonParseValue.map((dateString) => new Date(dateString))
@@ -3287,123 +3645,27 @@
       case "list.variant_reference":
         return {
           ...metafield,
-          parsedValue: flattenConnection((_d = metafield.references) != null ? _d : void 0)
+          parsedValue: flattenConnection(metafield.references ?? 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.`;
+        const typeNotFoundError = `parseMetafield(): 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
-    } = useShop();
-    if (!locale) {
-      throw new Error(`useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`);
-    }
-    const amount = parseFloat(money.amount);
-    const options = React.useMemo(() => ({
-      style: "currency",
-      currency: money.currencyCode
-    }), [money.currencyCode]);
-    const defaultFormatter = useLazyFormatter(locale, options);
-    const nameFormatter = useLazyFormatter(locale, {
-      ...options,
-      currencyDisplay: "name"
-    });
-    const narrowSymbolFormatter = useLazyFormatter(locale, {
-      ...options,
-      currencyDisplay: "narrowSymbol"
-    });
-    const withoutTrailingZerosFormatter = useLazyFormatter(locale, {
-      ...options,
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    });
-    const withoutCurrencyFormatter = useLazyFormatter(locale);
-    const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    });
-    const isPartCurrency = (part) => part.type === "currency";
-    const lazyFormatters = React.useMemo(() => ({
-      original: () => money,
-      currencyCode: () => money.currencyCode,
-      localizedString: () => defaultFormatter().format(amount),
-      parts: () => defaultFormatter().formatToParts(amount),
-      withoutTrailingZeros: () => amount % 1 === 0 ? withoutTrailingZerosFormatter().format(amount) : defaultFormatter().format(amount),
-      withoutTrailingZerosAndCurrency: () => amount % 1 === 0 ? withoutTrailingZerosOrCurrencyFormatter().format(amount) : withoutCurrencyFormatter().format(amount),
-      currencyName: () => {
-        var _a, _b;
-        return (_b = (_a = nameFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : money.currencyCode;
-      },
-      currencySymbol: () => {
-        var _a, _b;
-        return (_b = (_a = defaultFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : money.currencyCode;
-      },
-      currencyNarrowSymbol: () => {
-        var _a, _b;
-        return (_b = (_a = narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : "";
-      },
-      amount: () => defaultFormatter().formatToParts(amount).filter((part) => ["decimal", "fraction", "group", "integer", "literal"].includes(part.type)).map((part) => part.value).join("")
-    }), [money, amount, nameFormatter, defaultFormatter, narrowSymbolFormatter, withoutCurrencyFormatter, withoutTrailingZerosFormatter, withoutTrailingZerosOrCurrencyFormatter]);
-    return React.useMemo(() => new Proxy(lazyFormatters, {
-      get: (target, key) => {
-        var _a;
-        return (_a = Reflect.get(target, key)) == null ? void 0 : _a.call(null);
-      }
-    }), [lazyFormatters]);
-  }
-  function useLazyFormatter(locale, options) {
-    return React.useMemo(() => {
-      let memoized;
-      return () => memoized != null ? memoized : memoized = new Intl.NumberFormat(locale, options);
-    }, [locale, options]);
-  }
-  var _jsxFileName$2 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/Money.tsx";
-  function Money({
-    data,
-    as,
-    withoutCurrency,
-    withoutTrailingZeros,
-    measurement,
-    measurementSeparator = "/",
-    ...passthroughProps
-  }) {
-    if (!isMoney(data)) {
-      throw new Error(`<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`);
-    }
-    const moneyObject = useMoney(data);
-    const Wrapper = as != null ? as : "div";
-    let output = moneyObject.localizedString;
-    if (withoutCurrency || withoutTrailingZeros) {
-      if (withoutCurrency && !withoutTrailingZeros) {
-        output = moneyObject.amount;
-      } else if (!withoutCurrency && withoutTrailingZeros) {
-        output = moneyObject.withoutTrailingZeros;
-      } else {
-        output = moneyObject.withoutTrailingZerosAndCurrency;
-      }
+  function parseJSON(json) {
+    if (String(json).includes("__proto__")) {
+      return JSON.parse(json, (k, v2) => {
+        if (k !== "__proto__")
+          return v2;
+      });
     }
-    return /* @__PURE__ */ React__default.default.createElement(Wrapper, {
-      ...passthroughProps,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 65,
-        columnNumber: 5
-      }
-    }, output, measurement && measurement.referenceUnit && /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, measurementSeparator, measurement.referenceUnit));
-  }
-  function isMoney(maybeMoney) {
-    return typeof maybeMoney.amount === "string" && !!maybeMoney.amount && typeof maybeMoney.currencyCode === "string" && !!maybeMoney.currencyCode;
+    return JSON.parse(json);
   }
-  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;
+    var _a, _b, _c, _d, _e, _f;
     const {
       priceType = "regular",
       variantId,
@@ -3416,17 +3678,19 @@
     }
     let price;
     let measurement;
-    const variant = variantId ? (_b = flattenConnection((_a = product == null ? void 0 : product.variants) != null ? _a : {}).find((variant2) => (variant2 == null ? void 0 : variant2.id) === variantId)) != null ? _b : null : null;
+    const variant = variantId ? flattenConnection((product == null ? void 0 : product.variants) ?? {}).find(
+      (variant2) => (variant2 == null ? void 0 : variant2.id) === variantId
+    ) ?? null : null;
     if (priceType === "compareAt") {
       if (variantId && variant) {
-        if (((_c = variant.compareAtPriceV2) == null ? void 0 : _c.amount) === ((_d = variant.priceV2) == null ? void 0 : _d.amount)) {
+        if (((_a = variant.compareAtPriceV2) == null ? void 0 : _a.amount) === ((_b = variant.priceV2) == null ? void 0 : _b.amount)) {
           return null;
         }
         price = variant.compareAtPriceV2;
       } else if (valueType === "max") {
-        price = (_e = product == null ? void 0 : product.compareAtPriceRange) == null ? void 0 : _e.maxVariantPrice;
+        price = (_c = product == null ? void 0 : product.compareAtPriceRange) == null ? void 0 : _c.maxVariantPrice;
       } else {
-        price = (_f = product == null ? void 0 : product.compareAtPriceRange) == null ? void 0 : _f.minVariantPrice;
+        price = (_d = product == null ? void 0 : product.compareAtPriceRange) == null ? void 0 : _d.minVariantPrice;
       }
     } else {
       if (variantId && variant) {
@@ -3436,39 +3700,19 @@
           measurement = variant.unitPriceMeasurement;
         }
       } else if (valueType === "max") {
-        price = (_g = product.priceRange) == null ? void 0 : _g.maxVariantPrice;
+        price = (_e = product.priceRange) == null ? void 0 : _e.maxVariantPrice;
       } else {
-        price = (_h = product.priceRange) == null ? void 0 : _h.minVariantPrice;
+        price = (_f = product.priceRange) == null ? void 0 : _f.minVariantPrice;
       }
     }
     if (!price) {
       return null;
     }
     if (measurement) {
-      return /* @__PURE__ */ React__default.default.createElement(Money, {
-        ...passthroughProps,
-        data: price,
-        measurement,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$1,
-          lineNumber: 81,
-          columnNumber: 7
-        }
-      });
+      return /* @__PURE__ */ React.createElement(Money, { ...passthroughProps, data: price, measurement });
     }
-    return /* @__PURE__ */ React__default.default.createElement(Money, {
-      ...passthroughProps,
-      data: price,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 85,
-        columnNumber: 10
-      }
-    });
+    return /* @__PURE__ */ React.createElement(Money, { ...passthroughProps, data: price });
   }
-  var _jsxFileName = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ShopPayButton.tsx";
   const SHOPJS_URL = "https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js";
   function ShopPayButton({
     variantIds,
@@ -3476,17 +3720,15 @@
     variantIdsAndQuantities,
     width
   }) {
-    const {
-      storeDomain
-    } = useShop();
+    const { storeDomain } = useShop();
     const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);
-    let ids;
+    let ids = [];
     if (variantIds && variantIdsAndQuantities) {
       throw new Error(DoublePropsErrorMessage);
     }
     if (variantIds) {
       ids = variantIds.reduce((prev, curr) => {
-        const bareId = getIdFromGid(curr);
+        const bareId = parseGid(curr).id;
         if (bareId) {
           prev.push(bareId);
         }
@@ -3494,71 +3736,92 @@
       }, []);
     } else if (variantIdsAndQuantities) {
       ids = variantIdsAndQuantities.reduce((prev, curr) => {
-        var _a;
-        const bareId = getIdFromGid(curr == null ? void 0 : curr.id);
+        const bareId = parseGid(curr == null ? void 0 : curr.id).id;
         if (bareId) {
-          prev.push(`${bareId}:${(_a = curr == null ? void 0 : curr.quantity) != null ? _a : 1}`);
+          prev.push(`${bareId}:${(curr == null ? void 0 : curr.quantity) ?? 1}`);
         }
         return prev;
       }, []);
     } else {
       throw new Error(MissingPropsErrorMessage);
     }
+    if (ids.length === 0) {
+      throw new Error(InvalidPropsErrorMessage);
+    }
     const style = width ? {
       "--shop-pay-button-width": width
     } : void 0;
-    return /* @__PURE__ */ React__default.default.createElement("div", {
-      className,
-      style,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 90,
-        columnNumber: 5
-      }
-    }, shopPayLoadedStatus === "done" && /* @__PURE__ */ React__default.default.createElement("shop-pay-button", {
-      "store-url": `https://${storeDomain}`,
-      variants: ids.join(","),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 92,
-        columnNumber: 9
-      }
-    }));
-  }
-  function getIdFromGid(id) {
-    if (!id)
-      return;
-    return id.split("/").pop();
+    return /* @__PURE__ */ React.createElement("div", { className, style }, shopPayLoadedStatus === "done" && /* @__PURE__ */ React.createElement("shop-pay-button", { "store-url": storeDomain, variants: ids.join(",") }));
   }
+  const InvalidPropsErrorMessage = `You must pass in "variantIds" in the form of ["gid://shopify/ProductVariant/1"]`;
   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`;
+  const longTermLength = 60 * 60 * 24 * 360 * 1;
+  const shortTermLength = 60 * 30;
+  function useShopifyCookies(options) {
+    const { hasUserConsent = false, domain = "" } = options || {};
+    React.useEffect(() => {
+      const cookies = getShopifyCookies(document.cookie);
+      if (hasUserConsent) {
+        setCookie(
+          SHOPIFY_Y,
+          cookies[SHOPIFY_Y] || buildUUID(),
+          longTermLength,
+          domain
+        );
+        setCookie(
+          SHOPIFY_S,
+          cookies[SHOPIFY_S] || buildUUID(),
+          shortTermLength,
+          domain
+        );
+      } else {
+        setCookie(SHOPIFY_Y, "", 0, domain);
+        setCookie(SHOPIFY_S, "", 0, domain);
+      }
+    });
+  }
+  function setCookie(name, value, maxage, domain) {
+    document.cookie = l(name, value, {
+      maxage,
+      domain,
+      samesite: "Lax",
+      path: "/"
+    });
+  }
   exports2.AddToCartButton = AddToCartButton;
+  exports2.AnalyticsEventName = AnalyticsEventName;
+  exports2.AnalyticsPageType = AnalyticsPageType;
   exports2.BuyNowButton = BuyNowButton;
   exports2.CartCheckoutButton = CartCheckoutButton;
+  exports2.CartCost = CartCost;
+  exports2.CartLinePrice = CartLinePrice;
+  exports2.CartLineProvider = CartLineProvider;
   exports2.CartProvider = CartProvider;
   exports2.ExternalVideo = ExternalVideo;
   exports2.Image = Image;
   exports2.MediaFile = MediaFile;
-  exports2.Metafield = Metafield;
   exports2.ModelViewer = ModelViewer;
   exports2.Money = Money;
   exports2.ProductPrice = ProductPrice;
   exports2.ProductProvider = ProductProvider;
   exports2.ShopPayButton = ShopPayButton;
   exports2.ShopifyProvider = ShopifyProvider;
+  exports2.ShopifySalesChannel = ShopifySalesChannel;
   exports2.Video = Video;
   exports2.createStorefrontClient = createStorefrontClient;
   exports2.flattenConnection = flattenConnection;
-  exports2.metafieldParser = metafieldParser;
+  exports2.getClientBrowserParameters = getClientBrowserParameters;
+  exports2.getShopifyCookies = getShopifyCookies;
   exports2.parseMetafield = parseMetafield;
-  exports2.parseMetafieldValue = parseMetafieldValue;
+  exports2.sendShopifyAnalytics = sendShopifyAnalytics;
   exports2.storefrontApiCustomScalars = storefrontApiCustomScalars;
   exports2.useCart = useCart;
+  exports2.useCartLine = useCartLine;
   exports2.useMoney = useMoney;
   exports2.useProduct = useProduct;
   exports2.useShop = useShop;
-  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+  exports2.useShopifyCookies = useShopifyCookies;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });
 //# sourceMappingURL=hydrogen-react.dev.js.map