@shopify/hydrogen-react 0.0.0-next-5c16c78 → 0.0.0-next-ea3959b

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

@@ -2,10 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react")) : typeof define === "function" && define.amd ? define(["exports", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.hydrogenreact = {}, global.React));
 })(this, function(exports2, React) {
   "use strict";
-  const _interopDefaultLegacy = (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.
   
@@ -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,7 +647,7 @@
       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) {
@@ -665,7 +677,9 @@
     }
     return [];
   }
-  const CartLineAdd = (cartFragment) => `
+  const CartLineAdd = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartLineAdd(
     $cartId: ID!
     $lines: [CartLineInput!]!
@@ -680,8 +694,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartCreate = (cartFragment) => `
+`
+  );
+  const CartCreate = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartCreate(
     $input: CartInput!
     $numCartLines: Int = 250
@@ -695,8 +712,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartLineRemove = (cartFragment) => `
+`
+  );
+  const CartLineRemove = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartLineRemove(
     $cartId: ID!
     $lines: [ID!]!
@@ -711,8 +731,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartLineUpdate = (cartFragment) => `
+`
+  );
+  const CartLineUpdate = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartLineUpdate(
     $cartId: ID!
     $lines: [CartLineUpdateInput!]!
@@ -727,8 +750,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartNoteUpdate = (cartFragment) => `
+`
+  );
+  const CartNoteUpdate = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartNoteUpdate(
     $cartId: ID!
     $note: String
@@ -743,8 +769,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartBuyerIdentityUpdate = (cartFragment) => `
+`
+  );
+  const CartBuyerIdentityUpdate = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartBuyerIdentityUpdate(
     $cartId: ID!
     $buyerIdentity: CartBuyerIdentityInput!
@@ -759,8 +788,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartAttributesUpdate = (cartFragment) => `
+`
+  );
+  const CartAttributesUpdate = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartAttributesUpdate(
     $attributes: [AttributeInput!]!
     $cartId: ID!
@@ -775,8 +807,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartDiscountCodesUpdate = (cartFragment) => `
+`
+  );
+  const CartDiscountCodesUpdate = (cartFragment) => (
+    /* GraphQL */
+    `
   mutation CartDiscountCodesUpdate(
     $cartId: ID!
     $discountCodes: [String!]
@@ -791,8 +826,11 @@
   }
 
   ${cartFragment}
-`;
-  const CartQuery = (cartFragment) => `
+`
+  );
+  const CartQuery = (cartFragment) => (
+    /* GraphQL */
+    `
   query CartQuery(
     $id: ID!
     $numCartLines: Int = 250
@@ -804,8 +842,11 @@
   }
 
   ${cartFragment}
-`;
-  const defaultCartFragment = `
+`
+  );
+  const defaultCartFragment = (
+    /* GraphQL */
+    `
   fragment CartFragment on Cart {
     id
     checkoutUrl
@@ -905,7 +946,8 @@
     width
     height
   }
-`;
+`
+  );
   const SFAPI_VERSION = "2023-01";
   const warnings = /* @__PURE__ */ new Set();
   const warnOnce = (string) => {
@@ -938,15 +980,12 @@
     }
     return {
       getShopifyDomain(overrideProps) {
-        var _a;
-        return `https://${(_a = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _a : storeDomain}.myshopify.com`;
+        return `https://${(overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain}.myshopify.com`;
       },
       getStorefrontApiUrl(overrideProps) {
-        var _a, _b;
-        return `https://${(_a = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _a : storeDomain}.myshopify.com/api/${(_b = overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) != null ? _b : storefrontApiVersion}/graphql.json`;
+        return `https://${(overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain}.myshopify.com/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()'`
@@ -957,34 +996,35 @@
             `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-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-Source": "react",
@@ -992,7 +1032,6 @@
       "X-Shopify-Storefront-Access-Token": accessToken
     };
   }
-  var _jsxFileName$e = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ShopifyProvider.tsx";
   const ShopifyContext = React.createContext({
     storeDomain: "test",
     storefrontToken: "abc123",
@@ -1019,45 +1058,45 @@
     shopifyConfig
   }) {
     if (!shopifyConfig) {
-      throw new Error(`The 'shopifyConfig' prop must be passed to '<ShopifyProvider/>'`);
+      throw new Error(
+        `The 'shopifyConfig' prop must be passed 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-UI is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen-UI and the Storefront API.`
+      );
     }
     const finalConfig = React.useMemo(() => {
       function getShopifyDomain(overrideProps) {
-        var _a;
-        return (_a = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _a : shopifyConfig.storeDomain;
+        return (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? shopifyConfig.storeDomain;
       }
       return {
         ...shopifyConfig,
         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;
+          var _a;
           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.`);
+              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 : shopifyConfig.storeDomain
-          })}/api/${(_c = overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) != null ? _c : shopifyConfig.storefrontApiVersion}/graphql.json`;
+            storeDomain: (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? shopifyConfig.storeDomain
+          })}/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$e,
-        lineNumber: 84,
-        columnNumber: 5
-      }
-    }, children);
+    return /* @__PURE__ */ React.createElement(ShopifyContext.Provider, { value: finalConfig }, children);
   }
   function useShop() {
     const shopContext = React.useContext(ShopifyContext);
@@ -1096,40 +1135,37 @@
     return r2;
   }
   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]) {
-        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]);
+    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]) {
+          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]
+    );
   }
   function useCartActions({
     numCartLines,
@@ -1137,155 +1173,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
           })
         }
@@ -1302,10 +1395,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 = {
@@ -1349,16 +1444,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"
@@ -1407,10 +1496,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);
         },
@@ -1418,88 +1504,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 && {
@@ -1526,22 +1641,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 {
@@ -1566,7 +1674,6 @@
   function isCartFetchResultEvent(event) {
     return event.type === "RESOLVE" || event.type === "ERROR" || event.type === "CART_COMPLETED";
   }
-  var _jsxFileName$d = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/CartProvider.tsx";
   const CartContext = React.createContext(null);
   function useCart() {
     const context = React.useContext(CartContext);
@@ -1642,16 +1749,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":
@@ -1660,9 +1767,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,
@@ -1674,9 +1781,7 @@
               }
             };
         }
-        return {
-          ...context
-        };
+        return { ...context };
       },
       onCartActionComplete(context, event) {
         const cartActionEvent = event.payload.cartActionEvent;
@@ -1721,12 +1826,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");
@@ -1741,25 +1841,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);
         }
@@ -1774,50 +1881,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) {
@@ -1870,16 +1973,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$d,
-        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) {
@@ -1934,65 +2036,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$c = "/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;
@@ -2000,38 +2113,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$c,
-        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);
@@ -2048,7 +2172,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
+        );
       });
     });
   }
@@ -2059,9 +2185,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;
     }, {});
@@ -2074,9 +2199,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;
     }
@@ -2088,11 +2217,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)) {
@@ -2100,7 +2231,6 @@
     }
     return true;
   }
-  var _jsxFileName$b = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/BaseButton.tsx";
   function BaseButton(props) {
     const {
       as,
@@ -2110,30 +2240,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$b,
-        lineNumber: 59,
-        columnNumber: 5
-      }
-    }, children);
-  }
-  var _jsxFileName$a = "/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,
@@ -2145,14 +2266,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") {
@@ -2161,52 +2277,46 @@
     }, [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$a,
-        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
       },
-      role: "alert",
-      "aria-live": "assertive",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 80,
-        columnNumber: 9
-      }
-    }, addingItem ? accessibleAddingToCartLabel : null) : null);
+      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"
+      },
+      addingItem ? accessibleAddingToCartLabel : null
+    ) : null);
   }
-  var _jsxFileName$9 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/BuyNowButton.tsx";
   function BuyNowButton(props) {
-    const {
-      cartCreate,
-      checkoutUrl
-    } = useCart();
+    const { cartCreate, checkoutUrl } = useCart();
     const [loading, setLoading] = React.useState(false);
     const {
       quantity,
@@ -2224,55 +2334,47 @@
     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$9,
-        lineNumber: 53,
-        columnNumber: 5
-      }
-    }, children);
+    return /* @__PURE__ */ React.createElement(
+      BaseButton,
+      {
+        disabled: loading ?? passthroughProps.disabled,
+        ...passthroughProps,
+        onClick,
+        defaultOnClick: handleBuyNow
+      },
+      children
+    );
   }
-  var _jsxFileName$8 = "/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$8,
-        lineNumber: 28,
-        columnNumber: 5
-      }
-    }, children);
+    return /* @__PURE__ */ React.createElement(
+      BaseButton,
+      {
+        ...passthroughProps,
+        disabled: requestedCheckout || passthroughProps.disabled,
+        onClick: () => setRequestedCheckout(true)
+      },
+      children
+    );
   }
   const storefrontApiCustomScalars = {
+    // Keep in sync with the definitions in the app/nextjs/codegen.ts!
     DateTime: "string",
     Decimal: "string",
     HTML: "string",
@@ -2280,9 +2382,7 @@
     Color: "string",
     UnsignedInt64: "string"
   };
-  var _jsxFileName$7 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ExternalVideo.tsx";
   function ExternalVideo(props) {
-    var _a, _b;
     const {
       data,
       options,
@@ -2304,22 +2404,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$7,
-        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",
@@ -2338,7 +2435,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") {
@@ -2369,32 +2466,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$6 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/Image.tsx";
   function Image({
     data,
     width,
@@ -2406,20 +2502,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: {
@@ -2428,7 +2522,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) {
@@ -2439,11 +2535,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,
@@ -2451,23 +2549,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$6,
-        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,
@@ -2480,7 +2575,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) {
@@ -2491,17 +2588,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$5 = "/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,
@@ -2512,41 +2612,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$5,
-        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$5,
-          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) {
@@ -2594,22 +2692,21 @@
     }, [url, stringifiedOptions, options]);
     return status;
   }
-  var _jsxFileName$4 = "/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;
@@ -2621,25 +2718,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;
@@ -2651,27 +2766,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;
     }
@@ -2682,63 +2836,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$4,
-        lineNumber: 222,
-        columnNumber: 5
-      }
-    }, children);
-  }
-  var _jsxFileName$3 = "/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,
@@ -2752,56 +2905,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$3,
-            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$3,
-            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$3,
-            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$3,
-            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.`;
@@ -2812,7 +2949,6 @@
     }
   }
   function parseMetafield(metafield) {
-    var _a, _b, _c, _d;
     if (!metafield.type) {
       const noTypeError = `parseMetafield(): The 'type' field is required in order to parse the Metafield.`;
       {
@@ -2859,7 +2995,7 @@
       case "list.weight": {
         let parsedValue = null;
         try {
-          parsedValue = parseJSON((_a = metafield.value) != null ? _a : "");
+          parsedValue = parseJSON(metafield.value ?? "");
         } catch (err) {
           const parseError = `parseMetafield(): attempted to JSON.parse the 'metafield.value' property, but failed.`;
           {
@@ -2875,11 +3011,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))
@@ -2898,7 +3034,7 @@
       case "list.variant_reference":
         return {
           ...metafield,
-          parsedValue: flattenConnection((_d = metafield.references) != null ? _d : void 0)
+          parsedValue: flattenConnection(metafield.references ?? void 0)
         };
       default: {
         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.`;
@@ -2918,17 +3054,20 @@
     return JSON.parse(json);
   }
   function useMoney(money) {
-    const {
-      locale
-    } = useShop();
+    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`);
+      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 options = React.useMemo(
+      () => ({
+        style: "currency",
+        currency: money.currencyCode
+      }),
+      [money.currencyCode]
+    );
     const defaultFormatter = useLazyFormatter(locale, options);
     const nameFormatter = useLazyFormatter(locale, {
       ...options,
@@ -2949,41 +3088,62 @@
       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]);
+    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 != null ? memoized : memoized = new Intl.NumberFormat(locale, options);
+      return () => 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,
@@ -2994,10 +3154,12 @@
     ...passthroughProps
   }) {
     if (!isMoney(data)) {
-      throw new Error(`<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`);
+      throw new Error(
+        `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`
+      );
     }
     const moneyObject = useMoney(data);
-    const Wrapper = as != null ? as : "div";
+    const Wrapper = as ?? "div";
     let output = moneyObject.localizedString;
     if (withoutCurrency || withoutTrailingZeros) {
       if (withoutCurrency && !withoutTrailingZeros) {
@@ -3008,22 +3170,13 @@
         output = moneyObject.withoutTrailingZerosAndCurrency;
       }
     }
-    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));
+    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;
   }
-  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,
@@ -3036,17 +3189,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) {
@@ -3056,39 +3211,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,
@@ -3096,9 +3231,7 @@
     variantIdsAndQuantities,
     width
   }) {
-    const {
-      storeDomain
-    } = useShop();
+    const { storeDomain } = useShop();
     const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);
     let ids;
     if (variantIds && variantIdsAndQuantities) {
@@ -3114,10 +3247,9 @@
       }, []);
     } else if (variantIdsAndQuantities) {
       ids = variantIdsAndQuantities.reduce((prev, curr) => {
-        var _a;
         const bareId = getIdFromGid(curr == null ? void 0 : curr.id);
         if (bareId) {
-          prev.push(`${bareId}:${(_a = curr == null ? void 0 : curr.quantity) != null ? _a : 1}`);
+          prev.push(`${bareId}:${(curr == null ? void 0 : curr.quantity) ?? 1}`);
         }
         return prev;
       }, []);
@@ -3127,25 +3259,7 @@
     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": storeDomain,
-      variants: ids.join(","),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 92,
-        columnNumber: 9
-      }
-    }));
+    return /* @__PURE__ */ React.createElement("div", { className, style }, shopPayLoadedStatus === "done" && /* @__PURE__ */ React.createElement("shop-pay-button", { "store-url": storeDomain, variants: ids.join(",") }));
   }
   function getIdFromGid(id) {
     if (!id)
@@ -3176,6 +3290,6 @@
   exports2.useMoney = useMoney;
   exports2.useProduct = useProduct;
   exports2.useShop = useShop;
-  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });
 //# sourceMappingURL=hydrogen-react.dev.js.map