@shopify/hydrogen-react 2026.4.2 → 2026.4.4

package/dist/browser-dev/useShopifyCookies.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useShopifyCookies.mjs","names":[],"sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\n// @ts-ignore - worktop/cookie types not properly exported\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID} from './cookies-utils.js';\nimport {\n  getTrackingValues,\n  SHOPIFY_UNIQUE_TOKEN_HEADER,\n  SHOPIFY_VISIT_TOKEN_HEADER,\n} from './tracking-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = CoreShopifyCookiesOptions & {\n  /**\n   * If set to `false`, Shopify cookies will be removed.\n   * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n   * Defaults to false.\n   **/\n  hasUserConsent?: boolean;\n  /**\n   * The domain scope of the cookie. Defaults to empty string.\n   **/\n  domain?: string;\n  /**\n   * The checkout domain of the shop. Defaults to empty string. If set, the cookie domain will check if it can be set with the checkout domain.\n   */\n  checkoutDomain?: string;\n  /**\n   * If set to `true`, it skips modifying the deprecated shopify_y and shopify_s cookies.\n   */\n  ignoreDeprecatedCookies?: boolean;\n};\n\n/**\n * Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent\n * for backward compatibility support.\n *\n * If `fetchTrackingValues` is true, it makes a request to Storefront API\n * to fetch or refresh Shopiy analytics and marketing cookies and tracking values.\n * Generally speaking, this should only be needed if you're not using Hydrogen's\n * built-in analytics components and hooks that already handle this automatically.\n * For example, set it to `true` if you are using `hydrogen-react` only with\n * a different framework and still need to make a same-domain request to\n * Storefront API to set cookies.\n *\n * If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.\n * Useful when you only want to use the newer tracking values and not rely on the deprecated ones.\n *\n * @returns `true` when cookies are set and ready.\n * @publicDocs\n */\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean {\n  const {\n    hasUserConsent,\n    domain = '',\n    checkoutDomain = '',\n    storefrontAccessToken,\n    fetchTrackingValues,\n    ignoreDeprecatedCookies = false,\n  } = options || {};\n\n  const coreCookiesReady = useCoreShopifyCookies({\n    storefrontAccessToken,\n    fetchTrackingValues,\n    checkoutDomain,\n  });\n\n  useEffect(() => {\n    // Skip setting JS cookies until http-only cookies and server-timing\n    // are ready so that we have values synced in JS and http-only cookies.\n    if (ignoreDeprecatedCookies || !coreCookiesReady) return;\n\n    /**\n     * Setting cookie with domain\n     *\n     * If no domain is provided, the cookie will be set for the current host.\n     * For Shopify, we need to ensure this domain is set with a leading dot.\n     */\n\n    // Use override domain or current host\n    let currentDomain = domain || window.location.host;\n\n    if (checkoutDomain) {\n      const checkoutDomainParts = checkoutDomain.split('.').reverse();\n      const currentDomainParts = currentDomain.split('.').reverse();\n      const sameDomainParts: Array<string> = [];\n      checkoutDomainParts.forEach((part, index) => {\n        if (part === currentDomainParts[index]) {\n          sameDomainParts.push(part);\n        }\n      });\n\n      currentDomain = sameDomainParts.reverse().join('.');\n    }\n\n    // Reset domain if localhost\n    if (/^localhost/.test(currentDomain)) currentDomain = '';\n\n    // Shopify checkout only consumes cookies set with leading dot domain\n    const domainWithLeadingDot = currentDomain\n      ? /^\\./.test(currentDomain)\n        ? currentDomain\n        : `.${currentDomain}`\n      : '';\n\n    /**\n     * Set user and session cookies and refresh the expiry time\n     */\n    if (hasUserConsent) {\n      const trackingValues = getTrackingValues();\n      if (\n        (\n          trackingValues.uniqueToken ||\n          trackingValues.visitToken ||\n          ''\n        ).startsWith('00000000-')\n      ) {\n        // Skip writing cookies when tracking values signal we don't have consent yet\n        return;\n      }\n\n      setCookie(\n        SHOPIFY_Y,\n        trackingValues.uniqueToken || buildUUID(),\n        longTermLength,\n        domainWithLeadingDot,\n      );\n      setCookie(\n        SHOPIFY_S,\n        trackingValues.visitToken || buildUUID(),\n        shortTermLength,\n        domainWithLeadingDot,\n      );\n    } else {\n      setCookie(SHOPIFY_Y, '', 0, domainWithLeadingDot);\n      setCookie(SHOPIFY_S, '', 0, domainWithLeadingDot);\n    }\n  }, [\n    coreCookiesReady,\n    hasUserConsent,\n    domain,\n    checkoutDomain,\n    ignoreDeprecatedCookies,\n  ]);\n\n  return coreCookiesReady;\n}\n\nfunction setCookie(\n  name: string,\n  value: string,\n  maxage: number,\n  domain: string,\n): void {\n  document.cookie = stringify(name, value, {\n    maxage,\n    domain,\n    samesite: 'Lax',\n    path: '/',\n  });\n}\n\nasync function fetchTrackingValuesFromBrowser(\n  storefrontAccessToken?: string,\n  storefrontApiDomain = '',\n): Promise<void> {\n  // These values might come from server-timing or old cookies.\n  // If consent cannot be initially assumed, these tokens\n  // will be dropped in SFAPI and it will return a mock token\n  // starting with '00000000-'.\n  // However, if consent can be assumed initially, these tokens\n  // will be used to create proper cookies and continue our flow.\n  const {uniqueToken, visitToken} = getTrackingValues();\n\n  const response = await fetch(\n    // TODO: update this endpoint when it becomes stable\n    `${storefrontApiDomain.replace(/\\/+$/, '')}/api/unstable/graphql.json`,\n    {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        ...(storefrontAccessToken && {\n          'X-Shopify-Storefront-Access-Token': storefrontAccessToken,\n        }),\n        ...(visitToken || uniqueToken\n          ? {\n              [SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,\n              [SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken,\n            }\n          : undefined),\n      },\n      body: JSON.stringify({\n        query:\n          // This query ensures we get _cmp (consent) server-timing header, which is not available in other queries.\n          // This value can be passed later to consent-tracking-api and privacy-banner scripts to avoid extra requests.\n          'query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }',\n      }),\n    },\n  );\n\n  if (!response.ok) {\n    throw new Error(\n      `Failed to fetch consent from browser: ${response.status} ${response.statusText}`,\n    );\n  }\n\n  // Consume the body to complete the request and\n  // ensure server-timing is available in performance API\n  await response.json();\n\n  // Ensure we cache the latest tracking values from resources timing\n  getTrackingValues();\n}\n\ntype CoreShopifyCookiesOptions = {\n  storefrontAccessToken?: string;\n  fetchTrackingValues?: boolean;\n  checkoutDomain?: string;\n};\n\n/**\n * Gets http-only cookies from Storefront API via same-origin fetch request.\n * Falls back to checkout domain if provided to at least obtain the tracking\n * values via server-timing headers.\n */\nfunction useCoreShopifyCookies({\n  checkoutDomain,\n  storefrontAccessToken,\n  fetchTrackingValues = false,\n}: CoreShopifyCookiesOptions) {\n  const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);\n  const hasFetchedTrackingValues = useRef(false);\n\n  useEffect(() => {\n    if (!fetchTrackingValues) {\n      // Backend did the work, or proxy is disabled.\n      setCookiesReady(true);\n      return;\n    }\n\n    // React runs effects twice in dev mode, avoid double fetching\n    if (hasFetchedTrackingValues.current) return;\n    hasFetchedTrackingValues.current = true;\n\n    // Fetch consent from browser via proxy\n    fetchTrackingValuesFromBrowser(storefrontAccessToken)\n      .catch((error) =>\n        checkoutDomain\n          ? // Retry with checkout domain if available to at least\n            // get the server-timing values for tracking.\n            fetchTrackingValuesFromBrowser(\n              storefrontAccessToken,\n              checkoutDomain,\n            )\n          : Promise.reject(error),\n      )\n      .catch((error) => {\n        console.warn(\n          '[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: ' +\n            (error instanceof Error ? error.message : String(error)),\n        );\n      })\n      .finally(() => {\n        // Proceed even on errors, degraded tracking is better than no app\n        setCookiesReady(true);\n      });\n  }, [checkoutDomain, fetchTrackingValues, storefrontAccessToken]);\n\n  return cookiesReady;\n}\n"],"mappings":";;;;;;AAWA,IAAM,iBAAiB,OAAU,KAAK,MAAM;AAC5C,IAAM,kBAAkB;;;;;;;;;;;;;;;;;;;AAyCxB,SAAgB,kBAAkB,SAA6C;CAC7E,MAAM,EACJ,gBACA,SAAS,IACT,iBAAiB,IACjB,uBACA,qBACA,0BAA0B,UACxB,WAAW,EAAE;CAEjB,MAAM,mBAAmB,sBAAsB;EAC7C;EACA;EACA;EACD,CAAC;AAEF,iBAAgB;AAGd,MAAI,2BAA2B,CAAC,iBAAkB;;;;;;;EAUlD,IAAI,gBAAgB,UAAU,OAAO,SAAS;AAE9C,MAAI,gBAAgB;GAClB,MAAM,sBAAsB,eAAe,MAAM,IAAI,CAAC,SAAS;GAC/D,MAAM,qBAAqB,cAAc,MAAM,IAAI,CAAC,SAAS;GAC7D,MAAM,kBAAiC,EAAE;AACzC,uBAAoB,SAAS,MAAM,UAAU;AAC3C,QAAI,SAAS,mBAAmB,OAC9B,iBAAgB,KAAK,KAAK;KAE5B;AAEF,mBAAgB,gBAAgB,SAAS,CAAC,KAAK,IAAI;;AAIrD,MAAI,aAAa,KAAK,cAAc,CAAE,iBAAgB;EAGtD,MAAM,uBAAuB,gBACzB,MAAM,KAAK,cAAc,GACvB,gBACA,IAAI,kBACN;;;;AAKJ,MAAI,gBAAgB;GAClB,MAAM,iBAAiB,mBAAmB;AAC1C,QAEI,eAAe,eACf,eAAe,cACf,IACA,WAAW,YAAY,CAGzB;AAGF,aACE,WACA,eAAe,eAAe,WAAW,EACzC,gBACA,qBACD;AACD,aACE,WACA,eAAe,cAAc,WAAW,EACxC,iBACA,qBACD;SACI;AACL,aAAU,WAAW,IAAI,GAAG,qBAAqB;AACjD,aAAU,WAAW,IAAI,GAAG,qBAAqB;;IAElD;EACD;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAO;;AAGT,SAAS,UACP,MACA,OACA,QACA,QACM;AACN,UAAS,SAAS,UAAU,MAAM,OAAO;EACvC;EACA;EACA,UAAU;EACV,MAAM;EACP,CAAC;;AAGJ,eAAe,+BACb,uBACA,sBAAsB,IACP;CAOf,MAAM,EAAC,aAAa,eAAc,mBAAmB;CAErD,MAAM,WAAW,MAAM,MAErB,GAAG,oBAAoB,QAAQ,QAAQ,GAAG,CAAC,6BAC3C;EACE,QAAQ;EACR,SAAS;GACP,gBAAgB;GAChB,GAAI,yBAAyB,EAC3B,qCAAqC,uBACtC;GACD,GAAI,cAAc,cACd;KACG,6BAA6B;KAC7B,8BAA8B;IAChC,GACD,KAAA;GACL;EACD,MAAM,KAAK,UAAU,EACnB,OAGE,6FACH,CAAC;EACH,CACF;AAED,KAAI,CAAC,SAAS,GACZ,OAAM,IAAI,MACR,yCAAyC,SAAS,OAAO,GAAG,SAAS,aACtE;AAKH,OAAM,SAAS,MAAM;AAGrB,oBAAmB;;;;;;;AAcrB,SAAS,sBAAsB,EAC7B,gBACA,uBACA,sBAAsB,SACM;CAC5B,MAAM,CAAC,cAAc,mBAAmB,SAAS,CAAC,oBAAoB;CACtE,MAAM,2BAA2B,OAAO,MAAM;AAE9C,iBAAgB;AACd,MAAI,CAAC,qBAAqB;AAExB,mBAAgB,KAAK;AACrB;;AAIF,MAAI,yBAAyB,QAAS;AACtC,2BAAyB,UAAU;AAGnC,iCAA+B,sBAAsB,CAClD,OAAO,UACN,iBAGI,+BACE,uBACA,eACD,GACD,QAAQ,OAAO,MAAM,CAC1B,CACA,OAAO,UAAU;AAChB,WAAQ,KACN,gFACG,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,EAC1D;IACD,CACD,cAAc;AAEb,mBAAgB,KAAK;IACrB;IACH;EAAC;EAAgB;EAAqB;EAAsB,CAAC;AAEhE,QAAO"}
+{"version":3,"file":"useShopifyCookies.mjs","names":[],"sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\nimport {\n  getTrackingValues,\n  SHOPIFY_UNIQUE_TOKEN_HEADER,\n  SHOPIFY_VISIT_TOKEN_HEADER,\n} from './tracking-utils.js';\n\n// Marks the same-origin consent request so the backend can identify\n// headless consent-management traffic. A custom header on the cross-origin\n// checkout retry would fail its CORS preflight, so it is never sent there.\n// NOTE: packages/hydrogen/src/constants.ts defines the same header name\n// (STOREFRONT_CONSENT_MANAGEMENT_HEADER) for the server-side proxy\n// forwarding; keep the two in sync.\nconst CONSENT_MANAGEMENT_MARKER_HEADER =\n  'Shopify-Storefront-Consent-Management';\n\ntype UseShopifyCookiesOptions = {\n  storefrontAccessToken?: string;\n  fetchTrackingValues?: boolean;\n  /** @deprecated No longer used. The Customer Privacy API manages Shopify cookies. */\n  hasUserConsent?: boolean;\n  /** @deprecated No longer used. The Customer Privacy API manages cookie domains. */\n  domain?: string;\n  /** The checkout domain used if the same-origin consent request fails. */\n  checkoutDomain?: string;\n  /** @deprecated No longer used. The Customer Privacy API expires deprecated cookies. */\n  ignoreDeprecatedCookies?: boolean;\n};\n\n/**\n * Optionally refreshes backend-managed cookies for standalone integrations.\n * The Customer Privacy API owns tracking values and legacy cookie expiration.\n *\n * If `fetchTrackingValues` is true, this sends a consent request through the\n * Storefront API proxy, retrying against `checkoutDomain` if provided. Hydrogen's\n * built-in analytics already delegates consent initialization to the Customer\n * Privacy API and does not use this hook.\n *\n * @returns `true` when the consent request has settled and cookies are ready.\n * @publicDocs\n */\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean {\n  const {\n    checkoutDomain,\n    storefrontAccessToken,\n    fetchTrackingValues = false,\n  } = options ?? {};\n  const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);\n  const hasFetchedTrackingValues = useRef(false);\n\n  useEffect(() => {\n    if (!fetchTrackingValues) {\n      // Backend did the work, or proxy is disabled.\n      setCookiesReady(true);\n      return;\n    }\n\n    // React runs effects twice in dev mode, avoid double fetching\n    if (hasFetchedTrackingValues.current) return;\n    hasFetchedTrackingValues.current = true;\n\n    const fetchConsentValues = async () => {\n      try {\n        return await fetchTrackingValuesFromBrowser(storefrontAccessToken);\n      } catch (sameOriginError) {\n        if (!checkoutDomain) throw sameOriginError;\n        // Retry with checkout domain if the same-origin proxy failed.\n        return fetchTrackingValuesFromBrowser(\n          storefrontAccessToken,\n          checkoutDomain,\n        );\n      }\n    };\n\n    fetchConsentValues()\n      .catch((error) => {\n        console.warn(\n          '[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: ' +\n            (error instanceof Error ? error.message : String(error)),\n        );\n      })\n      .finally(() => {\n        // Proceed even on errors, degraded tracking is better than no app\n        setCookiesReady(true);\n      });\n  }, [checkoutDomain, fetchTrackingValues, storefrontAccessToken]);\n\n  return cookiesReady;\n}\n\nasync function fetchTrackingValuesFromBrowser(\n  storefrontAccessToken?: string,\n  storefrontApiDomain = '',\n): Promise<void> {\n  // Forward the current CTA tokens or legacy cookies to preserve the session.\n  // CTA suppresses token generation while its async consent is loading.\n  const {uniqueToken, visitToken} = getTrackingValues();\n\n  const response = await fetch(\n    // TODO: update this endpoint when it becomes stable\n    `${storefrontApiDomain.replace(/\\/+$/, '')}/api/unstable/graphql.json`,\n    {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        ...(storefrontAccessToken && {\n          'X-Shopify-Storefront-Access-Token': storefrontAccessToken,\n        }),\n        // The marker header goes on the same-origin request only, where the\n        // Hydrogen server proxy can act on it.\n        ...(storefrontApiDomain\n          ? undefined\n          : {[CONSENT_MANAGEMENT_MARKER_HEADER]: '1'}),\n        ...(visitToken || uniqueToken\n          ? {\n              [SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,\n              [SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken,\n            }\n          : undefined),\n      },\n      body: JSON.stringify({\n        query:\n          // The empty `visitorConsent` refreshes cookies without changing\n          // the stored consent.\n          'query ensureCookies { consentManagement { cookies(visitorConsent:{}) { trackingConsentCookie cookieDomain shopifyUnique shopifyVisit } } }',\n      }),\n    },\n  );\n\n  if (!response.ok) {\n    throw new Error(\n      `Failed to fetch consent from browser: ${response.status} ${response.statusText}`,\n    );\n  }\n}\n"],"mappings":";;;AAaA,IAAM,mCACJ;;;;;;;;;;;;;AA2BF,SAAgB,kBAAkB,SAA6C;CAC7E,MAAM,EACJ,gBACA,uBACA,sBAAsB,UACpB,WAAW,EAAE;CACjB,MAAM,CAAC,cAAc,mBAAmB,SAAS,CAAC,oBAAoB;CACtE,MAAM,2BAA2B,OAAO,MAAM;AAE9C,iBAAgB;AACd,MAAI,CAAC,qBAAqB;AAExB,mBAAgB,KAAK;AACrB;;AAIF,MAAI,yBAAyB,QAAS;AACtC,2BAAyB,UAAU;EAEnC,MAAM,qBAAqB,YAAY;AACrC,OAAI;AACF,WAAO,MAAM,+BAA+B,sBAAsB;YAC3D,iBAAiB;AACxB,QAAI,CAAC,eAAgB,OAAM;AAE3B,WAAO,+BACL,uBACA,eACD;;;AAIL,sBAAoB,CACjB,OAAO,UAAU;AAChB,WAAQ,KACN,gFACG,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,EAC1D;IACD,CACD,cAAc;AAEb,mBAAgB,KAAK;IACrB;IACH;EAAC;EAAgB;EAAqB;EAAsB,CAAC;AAEhE,QAAO;;AAGT,eAAe,+BACb,uBACA,sBAAsB,IACP;CAGf,MAAM,EAAC,aAAa,eAAc,mBAAmB;CAErD,MAAM,WAAW,MAAM,MAErB,GAAG,oBAAoB,QAAQ,QAAQ,GAAG,CAAC,6BAC3C;EACE,QAAQ;EACR,SAAS;GACP,gBAAgB;GAChB,GAAI,yBAAyB,EAC3B,qCAAqC,uBACtC;GAGD,GAAI,sBACA,KAAA,IACA,GAAE,mCAAmC,KAAI;GAC7C,GAAI,cAAc,cACd;KACG,6BAA6B;KAC7B,8BAA8B;IAChC,GACD,KAAA;GACL;EACD,MAAM,KAAK,UAAU,EACnB,OAGE,8IACH,CAAC;EACH,CACF;AAED,KAAI,CAAC,SAAS,GACZ,OAAM,IAAI,MACR,yCAAyC,SAAS,OAAO,GAAG,SAAS,aACtE"}

package/dist/browser-prod/Image.mjs

@@ -137,7 +137,7 @@ var FixedWidthImage = React.forwardRef(({ aspectRatio, crop, decoding, height, i
 			width: intWidth,
 			aspectRatio: fixedAspectRatio,
 			height: fixedHeight,
-			srcSet: generateSrcSet(normalizedProps.src, sizesArray, loader),
+			srcSet: generateSrcSet(normalizedProps.src, sizesArray, loader, "density"),
 			src: loader({
 				src: normalizedProps.src,
 				width: intWidth,
@@ -295,9 +295,10 @@ function isFixedWidth(width) {
 * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg
 * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\{width: 200, height: 200, crop: 'center'\}, \{width: 400, height: 400, crop: 'center'\}]
 * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters
+* @param descriptorType - Whether to use `w` (width) or `x` (density) descriptors in the srcset. Use `'density'` for fixed-width images and `'width'` (default) for fluid images.
 * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'
 */
-function generateSrcSet(src, sizesArray, loader = shopifyLoader) {
+function generateSrcSet(src, sizesArray, loader = shopifyLoader, descriptorType = "width") {
 	if (!src) return "";
 	if (sizesArray?.length === 0 || !sizesArray) return src;
 	return sizesArray.map((size, i) => `${loader({
@@ -305,7 +306,7 @@ function generateSrcSet(src, sizesArray, loader = shopifyLoader) {
 		width: size.width,
 		height: size.height,
 		crop: size.crop
-	})} ${sizesArray.length === 3 ? `${i + 1}x` : `${size.width ?? 0}w`}`).join(`, `);
+	})} ${descriptorType === "density" ? `${i + 1}x` : `${size.width ?? 0}w`}`).join(`, `);
 }
 /**
 * This function generates an array of sizes for Shopify images, for both fixed and responsive images.

package/dist/browser-prod/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","names":[],"sources":["../../src/Image.tsx"],"sourcesContent":["/* eslint-disable eslint-comments/disable-enable-pair */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport * as React from 'react';\nimport type {PartialDeep} from 'type-fest';\nimport type {Image as ImageType} from './storefront-api-types.js';\n\n/*\n * An optional prop you can use to change the\n * default srcSet generation behaviour\n */\ntype SrcSetOptions = {\n  /** The number of sizes to generate */\n  intervals: number;\n  /** The smallest image size */\n  startingWidth: number;\n  /** The increment by which to increase for each size, in pixels */\n  incrementSize: number;\n  /** The size used for placeholder fallback images */\n  placeholderWidth: number;\n};\n\ntype NormalizedProps = {\n  alt: string;\n  aspectRatio: string | undefined;\n  height: string;\n  src: string | undefined;\n  width: string;\n};\n\nexport type LoaderParams = {\n  /** The base URL of the image */\n  src?: ImageType['url'];\n  /** The URL param that controls width */\n  width?: number;\n  /** The URL param that controls height */\n  height?: number;\n  /** The URL param that controls the cropping region */\n  crop?: Crop;\n};\n\nexport type Loader = (params: LoaderParams) => string;\n\n/*\n * @TODO: Expand to include focal point support; and/or switch this to be an SF API type\n */\ntype Crop = 'center' | 'top' | 'bottom' | 'left' | 'right';\n\n/** @publicDocs */\nexport type HydrogenImageProps = React.ComponentPropsWithRef<'img'> &\n  HydrogenImageBaseProps;\n\ntype HydrogenImageBaseProps = {\n  /** The aspect ratio of the image, in the format of `width/height`.\n   *\n   * @example\n   * ```\n   * <Image data={productImage} aspectRatio=\"4/5\" />\n   * ```\n   */\n  aspectRatio?: string;\n  /** The crop position of the image.\n   *\n   * @remarks\n   * In the event that AspectRatio is set, without specifying a crop,\n   * the Shopify CDN won't return the expected image.\n   *\n   * @defaultValue `center`\n   */\n  crop?: Crop;\n  /** Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2026-04/objects/Image) object. Must be an Image object.\n   *\n   * @example\n   * ```\n   * import {IMAGE_FRAGMENT, Image} from '@shopify/hydrogen';\n   *\n   * export const IMAGE_QUERY = `#graphql\n   * ${IMAGE_FRAGMENT}\n   * query {\n   *   product {\n   *     featuredImage {\n   *       ...Image\n   *     }\n   *   }\n   * }`\n   *\n   * <Image\n   *   data={productImage}\n   *   sizes=\"(min-width: 45em) 50vw, 100vw\"\n   *   aspectRatio=\"4/5\"\n   * />\n   * ```\n   *\n   * Image: {@link https://shopify.dev/api/storefront/reference/common-objects/image}\n   */\n  data?: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A function that returns a URL string for an image.\n   *\n   * @remarks\n   * By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide\n   * your own function to use a another provider, as long as they support URL based image transformations.\n   */\n  loader?: Loader;\n  /** An optional prop you can use to change the default srcSet generation behaviour */\n  srcSetOptions?: SrcSetOptions;\n};\n\n/**\n * A Storefront API GraphQL fragment that can be used to query for an image.\n */\nexport const IMAGE_FRAGMENT = `#graphql\n  fragment Image on Image {\n    altText\n    url\n    width\n    height\n  }\n`;\n\n/**\n * Hydrogen’s Image component is a wrapper around the HTML image element.\n * It supports the same props as the HTML `img` element, but automatically\n * generates the srcSet and sizes attributes for you. For most use cases,\n * you’ll want to set the `aspectRatio` prop to ensure the image is sized\n * correctly.\n *\n * @remarks\n * - `decoding` is set to `async` by default.\n * - `loading` is set to `lazy` by default.\n * - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop\n * - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop\n *\n * @example\n * A responsive image with a 4:5 aspect ratio:\n * ```\n * <Image\n *   data={product.featuredImage}\n *   aspectRatio=\"4/5\"\n *   sizes=\"(min-width: 45em) 40vw, 100vw\"\n * />\n * ```\n * @example\n * A fixed size image:\n * ```\n * <Image\n *   data={product.featuredImage}\n *   width={100}\n *   height={100}\n * />\n * ```\n *\n * {@link https://shopify.dev/docs/api/hydrogen-react/components/image}\n * @publicDocs\n */\nexport const Image = React.forwardRef<HTMLImageElement, HydrogenImageProps>(\n  (\n    {\n      alt,\n      aspectRatio,\n      crop = 'center',\n      data,\n      decoding = 'async',\n      height = 'auto',\n      loader = shopifyLoader,\n      loading = 'lazy',\n      sizes,\n      src,\n      srcSetOptions = {\n        intervals: 15,\n        startingWidth: 200,\n        incrementSize: 200,\n        placeholderWidth: 100,\n      },\n      width = '100%',\n      ...passthroughProps\n    },\n    ref,\n  ) => {\n    /*\n     * Gets normalized values for width, height from data  prop\n     */\n    const normalizedData = React.useMemo(() => {\n      /* Only use data width if height is also set */\n      const dataWidth: number | undefined =\n        data?.width && data?.height ? data?.width : undefined;\n\n      const dataHeight: number | undefined =\n        data?.width && data?.height ? data?.height : undefined;\n\n      return {\n        width: dataWidth,\n        height: dataHeight,\n        unitsMatch: Boolean(unitsMatch(dataWidth, dataHeight)),\n      };\n    }, [data]);\n\n    /*\n     * Gets normalized values for width, height, src, alt, and aspectRatio props\n     * supporting the presence of `data` in addition to flat props.\n     */\n    const normalizedProps = React.useMemo(() => {\n      const nWidthProp: string | number = width || '100%';\n      const widthParts = getUnitValueParts(nWidthProp.toString());\n      const nWidth = `${widthParts.number}${widthParts.unit}`;\n\n      const autoHeight = height === undefined || height === null;\n      const heightParts = autoHeight\n        ? null\n        : getUnitValueParts(height.toString());\n\n      const fixedHeight = heightParts\n        ? `${heightParts.number}${heightParts.unit}`\n        : '';\n\n      const nHeight = autoHeight ? 'auto' : fixedHeight;\n\n      const nSrc: string | undefined = src || data?.url;\n\n      if (__HYDROGEN_DEV__ && !nSrc) {\n        console.warn(\n          `No src or data.url provided to Image component.`,\n          passthroughProps?.key || '',\n        );\n      }\n\n      const nAlt: string = data?.altText && !alt ? data?.altText : alt || '';\n\n      const nAspectRatio: string | undefined = aspectRatio\n        ? aspectRatio\n        : normalizedData.unitsMatch\n          ? [\n              getNormalizedFixedUnit(normalizedData.width),\n              getNormalizedFixedUnit(normalizedData.height),\n            ].join('/')\n          : undefined;\n\n      return {\n        width: nWidth,\n        height: nHeight,\n        src: nSrc,\n        alt: nAlt,\n        aspectRatio: nAspectRatio,\n      };\n    }, [\n      width,\n      height,\n      src,\n      data,\n      alt,\n      aspectRatio,\n      normalizedData,\n      passthroughProps?.key,\n    ]);\n\n    const {intervals, startingWidth, incrementSize, placeholderWidth} =\n      srcSetOptions;\n\n    /*\n     * This function creates an array of widths to be used in srcSet\n     */\n    const imageWidths = React.useMemo(() => {\n      return generateImageWidths(\n        width,\n        intervals,\n        startingWidth,\n        incrementSize,\n      );\n    }, [width, intervals, startingWidth, incrementSize]);\n\n    const fixedWidth = isFixedWidth(normalizedProps.width);\n\n    if (__HYDROGEN_DEV__ && !sizes && !fixedWidth) {\n      console.warn(\n        [\n          'No sizes prop provided to Image component,',\n          'you may be loading unnecessarily large images.',\n          `Image used is ${\n            src || data?.url || passthroughProps?.key || 'unknown'\n          }`,\n        ].join(' '),\n      );\n    }\n\n    /*\n     * We check to see whether the image is fixed width or not,\n     * if fixed, we still provide a srcSet, but only to account for\n     * different pixel densities.\n     */\n    if (fixedWidth) {\n      return (\n        <FixedWidthImage\n          aspectRatio={aspectRatio}\n          crop={crop}\n          decoding={decoding}\n          height={height}\n          imageWidths={imageWidths}\n          loader={loader}\n          loading={loading}\n          normalizedProps={normalizedProps}\n          passthroughProps={passthroughProps}\n          ref={ref}\n          width={width}\n          data={data}\n        />\n      );\n    } else {\n      return (\n        <FluidImage\n          aspectRatio={aspectRatio}\n          crop={crop}\n          decoding={decoding}\n          imageWidths={imageWidths}\n          loader={loader}\n          loading={loading}\n          normalizedProps={normalizedProps}\n          passthroughProps={passthroughProps}\n          placeholderWidth={placeholderWidth}\n          ref={ref}\n          sizes={sizes}\n          data={data}\n        />\n      );\n    }\n  },\n);\n\ntype FixedImageExludedProps =\n  | 'data'\n  | 'loader'\n  | 'loaderOptions'\n  | 'sizes'\n  | 'srcSetOptions'\n  | 'widths';\n\ntype FixedWidthImageProps = Omit<HydrogenImageProps, FixedImageExludedProps> &\n  Pick<HydrogenImageBaseProps, 'data'> & {\n    loader: Loader;\n    passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n    normalizedProps: NormalizedProps;\n    imageWidths: number[];\n    ref: React.Ref<HTMLImageElement>;\n  };\n\nconst FixedWidthImage = React.forwardRef<\n  HTMLImageElement,\n  FixedWidthImageProps\n>(\n  (\n    {\n      aspectRatio,\n      crop,\n      decoding,\n      height,\n      imageWidths,\n      loader = shopifyLoader,\n      loading,\n      normalizedProps,\n      passthroughProps,\n      width,\n      data,\n    },\n    ref,\n  ) => {\n    const fixed = React.useMemo(() => {\n      const intWidth: number | undefined = getNormalizedFixedUnit(width);\n      const intHeight: number | undefined = getNormalizedFixedUnit(height);\n\n      /*\n       * The aspect ratio for fixed width images is taken from the explicitly\n       * set prop, but if that's not present, and both width and height are\n       * set, we calculate the aspect ratio from the width and height—as\n       * long as they share the same unit type (e.g. both are 'px').\n       */\n      const fixedAspectRatio = aspectRatio\n        ? aspectRatio\n        : unitsMatch(normalizedProps.width, normalizedProps.height)\n          ? [intWidth, intHeight].join('/')\n          : normalizedProps.aspectRatio\n            ? normalizedProps.aspectRatio\n            : undefined;\n\n      /*\n       * The Sizes Array generates an array of all the parts\n       * that make up the srcSet, including the width, height, and crop\n       */\n      const sizesArray =\n        imageWidths === undefined\n          ? undefined\n          : generateSizes(imageWidths, fixedAspectRatio, crop, {\n              width: data?.width ?? undefined,\n              height: data?.height ?? undefined,\n            });\n\n      const fixedHeight = intHeight\n        ? intHeight\n        : fixedAspectRatio && intWidth\n          ? intWidth * (parseAspectRatio(fixedAspectRatio) ?? 1)\n          : undefined;\n\n      const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n      const src = loader({\n        src: normalizedProps.src,\n        width: intWidth,\n        height: fixedHeight,\n        crop: normalizedProps.height === 'auto' ? undefined : crop,\n      });\n\n      return {\n        width: intWidth,\n        aspectRatio: fixedAspectRatio,\n        height: fixedHeight,\n        srcSet,\n        src,\n      };\n    }, [\n      aspectRatio,\n      crop,\n      data,\n      height,\n      imageWidths,\n      loader,\n      normalizedProps,\n      width,\n    ]);\n\n    return (\n      <img\n        ref={ref}\n        alt={normalizedProps.alt}\n        decoding={decoding}\n        height={fixed.height}\n        loading={loading}\n        src={fixed.src}\n        srcSet={fixed.srcSet}\n        width={fixed.width}\n        style={{\n          aspectRatio: fixed.aspectRatio,\n          ...passthroughProps.style,\n        }}\n        {...passthroughProps}\n      />\n    );\n  },\n);\n\ntype FluidImageExcludedProps =\n  | 'data'\n  | 'width'\n  | 'height'\n  | 'loader'\n  | 'loaderOptions'\n  | 'srcSetOptions';\n\ntype FluidImageProps = Omit<HydrogenImageProps, FluidImageExcludedProps> &\n  Pick<HydrogenImageBaseProps, 'data'> & {\n    imageWidths: number[];\n    loader: Loader;\n    normalizedProps: NormalizedProps;\n    passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n    placeholderWidth: number;\n    ref: React.Ref<HTMLImageElement>;\n  };\n\nconst FluidImage = React.forwardRef<HTMLImageElement, FluidImageProps>(\n  (\n    {\n      crop,\n      decoding,\n      imageWidths,\n      loader = shopifyLoader,\n      loading,\n      normalizedProps,\n      passthroughProps,\n      placeholderWidth,\n      sizes,\n      data,\n    },\n    ref,\n  ) => {\n    const fluid = React.useMemo(() => {\n      const sizesArray =\n        imageWidths === undefined\n          ? undefined\n          : generateSizes(imageWidths, normalizedProps.aspectRatio, crop, {\n              width: data?.width ?? undefined,\n              height: data?.height ?? undefined,\n            });\n\n      const placeholderHeight =\n        normalizedProps.aspectRatio && placeholderWidth\n          ? placeholderWidth *\n            (parseAspectRatio(normalizedProps.aspectRatio) ?? 1)\n          : undefined;\n\n      const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n\n      const src = loader({\n        src: normalizedProps.src,\n        width: placeholderWidth,\n        height: placeholderHeight,\n        crop,\n      });\n\n      return {\n        placeholderHeight,\n        srcSet,\n        src,\n      };\n    }, [crop, data, imageWidths, loader, normalizedProps, placeholderWidth]);\n\n    return (\n      <img\n        ref={ref}\n        alt={normalizedProps.alt}\n        decoding={decoding}\n        height={fluid.placeholderHeight}\n        loading={loading}\n        sizes={sizes}\n        src={fluid.src}\n        srcSet={fluid.srcSet}\n        width={placeholderWidth}\n        {...passthroughProps}\n        style={{\n          width: normalizedProps.width,\n          aspectRatio: normalizedProps.aspectRatio,\n          ...passthroughProps.style,\n        }}\n      />\n    );\n  },\n);\n\n/**\n * The shopifyLoader function is a simple utility function that takes a src, width,\n * height, and crop and returns a string that can be used as the src for an image.\n * It can be used with the Hydrogen Image component or with the next/image component.\n * (or any others that accept equivalent configuration)\n * @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`\n * @param width - The width of the image, e.g. `100`\n * @param height - The height of the image, e.g. `100`\n * @param crop - The crop of the image, e.g. `center`\n * @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`\n *\n * @example\n * ```\n * shopifyLoader({\n *   src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',\n *   width: 100,\n *   height: 100,\n *   crop: 'center',\n * })\n * ```\n */\nconst PLACEHOLDER_DOMAIN = 'https://placeholder.shopify.com';\nexport function shopifyLoader({src, width, height, crop}: LoaderParams) {\n  if (!src) {\n    return '';\n  }\n\n  const url = new URL(src, PLACEHOLDER_DOMAIN);\n\n  if (width) {\n    url.searchParams.append('width', Math.round(width).toString());\n  }\n\n  if (height) {\n    url.searchParams.append('height', Math.round(height).toString());\n  }\n\n  if (crop) {\n    url.searchParams.append('crop', crop);\n  }\n  return url.href.replace(PLACEHOLDER_DOMAIN, '');\n}\n\n/**\n * Checks whether the width and height share the same unit type\n * @param width - The width of the image, e.g. 100% | 10px\n * @param height - The height of the image, e.g. auto | 100px\n * @returns Whether the width and height share the same unit type (boolean)\n */\nfunction unitsMatch(\n  width: string | number = '100%',\n  height: string | number = 'auto',\n): boolean {\n  return (\n    getUnitValueParts(width.toString()).unit ===\n    getUnitValueParts(height.toString()).unit\n  );\n}\n\n/**\n * Given a CSS size, returns the unit and number parts of the value\n * @param value - The CSS size, e.g. 100px\n * @returns The unit and number parts of the value, e.g. \\{unit: 'px', number: 100\\}\n */\nfunction getUnitValueParts(value: string): {unit: string; number: number} {\n  const unit = value.replace(/[0-9.]/g, '');\n  const number = parseFloat(value.replace(unit, ''));\n\n  return {\n    unit: unit === '' ? (number === undefined ? 'auto' : 'px') : unit,\n    number,\n  };\n}\n\n/**\n * Given a value, returns the width of the image as an integer in pixels\n * @param value - The width of the image, e.g. 16px | 1rem | 1em | 16\n * @returns The width of the image in pixels, e.g. 16, or undefined if the value is not a fixed unit\n */\nfunction getNormalizedFixedUnit(value?: string | number): number | undefined {\n  if (value === undefined) {\n    return;\n  }\n\n  const {unit, number} = getUnitValueParts(value.toString());\n\n  switch (unit) {\n    case 'em':\n      return number * 16;\n    case 'rem':\n      return number * 16;\n    case 'px':\n      return number;\n    case '':\n      return number;\n    default:\n      return;\n  }\n}\n\n/**\n * This function checks whether a width is fixed or not.\n * @param width - The width of the image, e.g. 100 | '100px' | '100em' | '100rem'\n * @returns Whether the width is fixed or not\n */\nfunction isFixedWidth(width: string | number): boolean {\n  const fixedEndings = /\\d(px|em|rem)$/;\n  return typeof width === 'number' || fixedEndings.test(width);\n}\n\n/**\n * This function generates a srcSet for Shopify images.\n * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg\n * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\\{width: 200, height: 200, crop: 'center'\\}, \\{width: 400, height: 400, crop: 'center'\\}]\n * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters\n * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'\n */\nexport function generateSrcSet(\n  src?: string,\n  sizesArray?: Array<{width?: number; height?: number; crop?: Crop}>,\n  loader: Loader = shopifyLoader,\n): string {\n  if (!src) {\n    return '';\n  }\n\n  if (sizesArray?.length === 0 || !sizesArray) {\n    return src;\n  }\n\n  return sizesArray\n    .map(\n      (size, i) =>\n        `${loader({\n          src,\n          width: size.width,\n          height: size.height,\n          crop: size.crop,\n        })} ${sizesArray.length === 3 ? `${i + 1}x` : `${size.width ?? 0}w`}`,\n    )\n    .join(`, `);\n}\n\n/**\n * This function generates an array of sizes for Shopify images, for both fixed and responsive images.\n * @param width - The CSS width of the image\n * @param intervals - The number of intervals to generate\n * @param startingWidth - The starting width of the image\n * @param incrementSize - The size of each interval\n * @returns An array of widths\n */\nexport function generateImageWidths(\n  width: string | number = '100%',\n  intervals: number,\n  startingWidth: number,\n  incrementSize: number,\n): number[] {\n  const responsive = Array.from(\n    {length: intervals},\n    (_, i) => i * incrementSize + startingWidth,\n  );\n\n  const fixed = Array.from(\n    {length: 3},\n    (_, i) => (i + 1) * (getNormalizedFixedUnit(width) ?? 0),\n  );\n\n  return isFixedWidth(width) ? fixed : responsive;\n}\n\n/**\n * Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1/1`, not `0.5`, or `auto`\n * @param aspectRatio - The aspect ratio of the image, e.g. `1/1`\n * @returns The aspect ratio as a number, e.g. `0.5`\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}\n */\nexport function parseAspectRatio(aspectRatio?: string): number | undefined {\n  if (!aspectRatio) return;\n  const [width, height] = aspectRatio.split('/');\n  return 1 / (Number(width) / Number(height));\n}\n\n// Generate data needed for Imagery loader\nexport function generateSizes(\n  imageWidths?: number[],\n  aspectRatio?: string,\n  crop: Crop = 'center',\n  sourceDimensions?: {width?: number; height?: number},\n):\n  | {\n      width: number;\n      height: number | undefined;\n      crop: Crop;\n    }[]\n  | undefined {\n  if (!imageWidths) return;\n  return imageWidths\n    .map((width: number) => {\n      return {\n        width,\n        height: aspectRatio\n          ? width * (parseAspectRatio(aspectRatio) ?? 1)\n          : undefined,\n        crop,\n      };\n    })\n    .filter(({width, height}) => {\n      if (sourceDimensions?.width && width > sourceDimensions.width) {\n        return false;\n      }\n\n      if (\n        sourceDimensions?.height &&\n        height &&\n        height > sourceDimensions.height\n      ) {\n        return false;\n      }\n\n      return true;\n    });\n  /*\n    Given:\n      ([100, 200], 1/1, 'center')\n    Returns:\n      [{width: 100, height: 100, crop: 'center'},\n      {width: 200, height: 200, crop: 'center'}]\n  */\n}\n"],"mappings":"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"}
+{"version":3,"file":"Image.mjs","names":[],"sources":["../../src/Image.tsx"],"sourcesContent":["/* eslint-disable eslint-comments/disable-enable-pair */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport * as React from 'react';\nimport type {PartialDeep} from 'type-fest';\nimport type {Image as ImageType} from './storefront-api-types.js';\n\n/*\n * An optional prop you can use to change the\n * default srcSet generation behaviour\n */\ntype SrcSetOptions = {\n  /** The number of sizes to generate */\n  intervals: number;\n  /** The smallest image size */\n  startingWidth: number;\n  /** The increment by which to increase for each size, in pixels */\n  incrementSize: number;\n  /** The size used for placeholder fallback images */\n  placeholderWidth: number;\n};\n\ntype NormalizedProps = {\n  alt: string;\n  aspectRatio: string | undefined;\n  height: string;\n  src: string | undefined;\n  width: string;\n};\n\nexport type LoaderParams = {\n  /** The base URL of the image */\n  src?: ImageType['url'];\n  /** The URL param that controls width */\n  width?: number;\n  /** The URL param that controls height */\n  height?: number;\n  /** The URL param that controls the cropping region */\n  crop?: Crop;\n};\n\nexport type Loader = (params: LoaderParams) => string;\n\n/*\n * @TODO: Expand to include focal point support; and/or switch this to be an SF API type\n */\ntype Crop = 'center' | 'top' | 'bottom' | 'left' | 'right';\n\n/** @publicDocs */\nexport type HydrogenImageProps = React.ComponentPropsWithRef<'img'> &\n  HydrogenImageBaseProps;\n\ntype HydrogenImageBaseProps = {\n  /** The aspect ratio of the image, in the format of `width/height`.\n   *\n   * @example\n   * ```\n   * <Image data={productImage} aspectRatio=\"4/5\" />\n   * ```\n   */\n  aspectRatio?: string;\n  /** The crop position of the image.\n   *\n   * @remarks\n   * In the event that AspectRatio is set, without specifying a crop,\n   * the Shopify CDN won't return the expected image.\n   *\n   * @defaultValue `center`\n   */\n  crop?: Crop;\n  /** Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2026-04/objects/Image) object. Must be an Image object.\n   *\n   * @example\n   * ```\n   * import {IMAGE_FRAGMENT, Image} from '@shopify/hydrogen';\n   *\n   * export const IMAGE_QUERY = `#graphql\n   * ${IMAGE_FRAGMENT}\n   * query {\n   *   product {\n   *     featuredImage {\n   *       ...Image\n   *     }\n   *   }\n   * }`\n   *\n   * <Image\n   *   data={productImage}\n   *   sizes=\"(min-width: 45em) 50vw, 100vw\"\n   *   aspectRatio=\"4/5\"\n   * />\n   * ```\n   *\n   * Image: {@link https://shopify.dev/api/storefront/reference/common-objects/image}\n   */\n  data?: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A function that returns a URL string for an image.\n   *\n   * @remarks\n   * By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide\n   * your own function to use a another provider, as long as they support URL based image transformations.\n   */\n  loader?: Loader;\n  /** An optional prop you can use to change the default srcSet generation behaviour */\n  srcSetOptions?: SrcSetOptions;\n};\n\n/**\n * A Storefront API GraphQL fragment that can be used to query for an image.\n */\nexport const IMAGE_FRAGMENT = `#graphql\n  fragment Image on Image {\n    altText\n    url\n    width\n    height\n  }\n`;\n\n/**\n * Hydrogen’s Image component is a wrapper around the HTML image element.\n * It supports the same props as the HTML `img` element, but automatically\n * generates the srcSet and sizes attributes for you. For most use cases,\n * you’ll want to set the `aspectRatio` prop to ensure the image is sized\n * correctly.\n *\n * @remarks\n * - `decoding` is set to `async` by default.\n * - `loading` is set to `lazy` by default.\n * - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop\n * - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop\n *\n * @example\n * A responsive image with a 4:5 aspect ratio:\n * ```\n * <Image\n *   data={product.featuredImage}\n *   aspectRatio=\"4/5\"\n *   sizes=\"(min-width: 45em) 40vw, 100vw\"\n * />\n * ```\n * @example\n * A fixed size image:\n * ```\n * <Image\n *   data={product.featuredImage}\n *   width={100}\n *   height={100}\n * />\n * ```\n *\n * {@link https://shopify.dev/docs/api/hydrogen-react/components/image}\n * @publicDocs\n */\nexport const Image = React.forwardRef<HTMLImageElement, HydrogenImageProps>(\n  (\n    {\n      alt,\n      aspectRatio,\n      crop = 'center',\n      data,\n      decoding = 'async',\n      height = 'auto',\n      loader = shopifyLoader,\n      loading = 'lazy',\n      sizes,\n      src,\n      srcSetOptions = {\n        intervals: 15,\n        startingWidth: 200,\n        incrementSize: 200,\n        placeholderWidth: 100,\n      },\n      width = '100%',\n      ...passthroughProps\n    },\n    ref,\n  ) => {\n    /*\n     * Gets normalized values for width, height from data  prop\n     */\n    const normalizedData = React.useMemo(() => {\n      /* Only use data width if height is also set */\n      const dataWidth: number | undefined =\n        data?.width && data?.height ? data?.width : undefined;\n\n      const dataHeight: number | undefined =\n        data?.width && data?.height ? data?.height : undefined;\n\n      return {\n        width: dataWidth,\n        height: dataHeight,\n        unitsMatch: Boolean(unitsMatch(dataWidth, dataHeight)),\n      };\n    }, [data]);\n\n    /*\n     * Gets normalized values for width, height, src, alt, and aspectRatio props\n     * supporting the presence of `data` in addition to flat props.\n     */\n    const normalizedProps = React.useMemo(() => {\n      const nWidthProp: string | number = width || '100%';\n      const widthParts = getUnitValueParts(nWidthProp.toString());\n      const nWidth = `${widthParts.number}${widthParts.unit}`;\n\n      const autoHeight = height === undefined || height === null;\n      const heightParts = autoHeight\n        ? null\n        : getUnitValueParts(height.toString());\n\n      const fixedHeight = heightParts\n        ? `${heightParts.number}${heightParts.unit}`\n        : '';\n\n      const nHeight = autoHeight ? 'auto' : fixedHeight;\n\n      const nSrc: string | undefined = src || data?.url;\n\n      if (__HYDROGEN_DEV__ && !nSrc) {\n        console.warn(\n          `No src or data.url provided to Image component.`,\n          passthroughProps?.key || '',\n        );\n      }\n\n      const nAlt: string = data?.altText && !alt ? data?.altText : alt || '';\n\n      const nAspectRatio: string | undefined = aspectRatio\n        ? aspectRatio\n        : normalizedData.unitsMatch\n          ? [\n              getNormalizedFixedUnit(normalizedData.width),\n              getNormalizedFixedUnit(normalizedData.height),\n            ].join('/')\n          : undefined;\n\n      return {\n        width: nWidth,\n        height: nHeight,\n        src: nSrc,\n        alt: nAlt,\n        aspectRatio: nAspectRatio,\n      };\n    }, [\n      width,\n      height,\n      src,\n      data,\n      alt,\n      aspectRatio,\n      normalizedData,\n      passthroughProps?.key,\n    ]);\n\n    const {intervals, startingWidth, incrementSize, placeholderWidth} =\n      srcSetOptions;\n\n    /*\n     * This function creates an array of widths to be used in srcSet\n     */\n    const imageWidths = React.useMemo(() => {\n      return generateImageWidths(\n        width,\n        intervals,\n        startingWidth,\n        incrementSize,\n      );\n    }, [width, intervals, startingWidth, incrementSize]);\n\n    const fixedWidth = isFixedWidth(normalizedProps.width);\n\n    if (__HYDROGEN_DEV__ && !sizes && !fixedWidth) {\n      console.warn(\n        [\n          'No sizes prop provided to Image component,',\n          'you may be loading unnecessarily large images.',\n          `Image used is ${\n            src || data?.url || passthroughProps?.key || 'unknown'\n          }`,\n        ].join(' '),\n      );\n    }\n\n    /*\n     * We check to see whether the image is fixed width or not,\n     * if fixed, we still provide a srcSet, but only to account for\n     * different pixel densities.\n     */\n    if (fixedWidth) {\n      return (\n        <FixedWidthImage\n          aspectRatio={aspectRatio}\n          crop={crop}\n          decoding={decoding}\n          height={height}\n          imageWidths={imageWidths}\n          loader={loader}\n          loading={loading}\n          normalizedProps={normalizedProps}\n          passthroughProps={passthroughProps}\n          ref={ref}\n          width={width}\n          data={data}\n        />\n      );\n    } else {\n      return (\n        <FluidImage\n          aspectRatio={aspectRatio}\n          crop={crop}\n          decoding={decoding}\n          imageWidths={imageWidths}\n          loader={loader}\n          loading={loading}\n          normalizedProps={normalizedProps}\n          passthroughProps={passthroughProps}\n          placeholderWidth={placeholderWidth}\n          ref={ref}\n          sizes={sizes}\n          data={data}\n        />\n      );\n    }\n  },\n);\n\ntype FixedImageExludedProps =\n  | 'data'\n  | 'loader'\n  | 'loaderOptions'\n  | 'sizes'\n  | 'srcSetOptions'\n  | 'widths';\n\ntype FixedWidthImageProps = Omit<HydrogenImageProps, FixedImageExludedProps> &\n  Pick<HydrogenImageBaseProps, 'data'> & {\n    loader: Loader;\n    passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n    normalizedProps: NormalizedProps;\n    imageWidths: number[];\n    ref: React.Ref<HTMLImageElement>;\n  };\n\nconst FixedWidthImage = React.forwardRef<\n  HTMLImageElement,\n  FixedWidthImageProps\n>(\n  (\n    {\n      aspectRatio,\n      crop,\n      decoding,\n      height,\n      imageWidths,\n      loader = shopifyLoader,\n      loading,\n      normalizedProps,\n      passthroughProps,\n      width,\n      data,\n    },\n    ref,\n  ) => {\n    const fixed = React.useMemo(() => {\n      const intWidth: number | undefined = getNormalizedFixedUnit(width);\n      const intHeight: number | undefined = getNormalizedFixedUnit(height);\n\n      /*\n       * The aspect ratio for fixed width images is taken from the explicitly\n       * set prop, but if that's not present, and both width and height are\n       * set, we calculate the aspect ratio from the width and height—as\n       * long as they share the same unit type (e.g. both are 'px').\n       */\n      const fixedAspectRatio = aspectRatio\n        ? aspectRatio\n        : unitsMatch(normalizedProps.width, normalizedProps.height)\n          ? [intWidth, intHeight].join('/')\n          : normalizedProps.aspectRatio\n            ? normalizedProps.aspectRatio\n            : undefined;\n\n      /*\n       * The Sizes Array generates an array of all the parts\n       * that make up the srcSet, including the width, height, and crop\n       */\n      const sizesArray =\n        imageWidths === undefined\n          ? undefined\n          : generateSizes(imageWidths, fixedAspectRatio, crop, {\n              width: data?.width ?? undefined,\n              height: data?.height ?? undefined,\n            });\n\n      const fixedHeight = intHeight\n        ? intHeight\n        : fixedAspectRatio && intWidth\n          ? intWidth * (parseAspectRatio(fixedAspectRatio) ?? 1)\n          : undefined;\n\n      const srcSet = generateSrcSet(\n        normalizedProps.src,\n        sizesArray,\n        loader,\n        'density',\n      );\n      const src = loader({\n        src: normalizedProps.src,\n        width: intWidth,\n        height: fixedHeight,\n        crop: normalizedProps.height === 'auto' ? undefined : crop,\n      });\n\n      return {\n        width: intWidth,\n        aspectRatio: fixedAspectRatio,\n        height: fixedHeight,\n        srcSet,\n        src,\n      };\n    }, [\n      aspectRatio,\n      crop,\n      data,\n      height,\n      imageWidths,\n      loader,\n      normalizedProps,\n      width,\n    ]);\n\n    return (\n      <img\n        ref={ref}\n        alt={normalizedProps.alt}\n        decoding={decoding}\n        height={fixed.height}\n        loading={loading}\n        src={fixed.src}\n        srcSet={fixed.srcSet}\n        width={fixed.width}\n        style={{\n          aspectRatio: fixed.aspectRatio,\n          ...passthroughProps.style,\n        }}\n        {...passthroughProps}\n      />\n    );\n  },\n);\n\ntype FluidImageExcludedProps =\n  | 'data'\n  | 'width'\n  | 'height'\n  | 'loader'\n  | 'loaderOptions'\n  | 'srcSetOptions';\n\ntype FluidImageProps = Omit<HydrogenImageProps, FluidImageExcludedProps> &\n  Pick<HydrogenImageBaseProps, 'data'> & {\n    imageWidths: number[];\n    loader: Loader;\n    normalizedProps: NormalizedProps;\n    passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n    placeholderWidth: number;\n    ref: React.Ref<HTMLImageElement>;\n  };\n\nconst FluidImage = React.forwardRef<HTMLImageElement, FluidImageProps>(\n  (\n    {\n      crop,\n      decoding,\n      imageWidths,\n      loader = shopifyLoader,\n      loading,\n      normalizedProps,\n      passthroughProps,\n      placeholderWidth,\n      sizes,\n      data,\n    },\n    ref,\n  ) => {\n    const fluid = React.useMemo(() => {\n      const sizesArray =\n        imageWidths === undefined\n          ? undefined\n          : generateSizes(imageWidths, normalizedProps.aspectRatio, crop, {\n              width: data?.width ?? undefined,\n              height: data?.height ?? undefined,\n            });\n\n      const placeholderHeight =\n        normalizedProps.aspectRatio && placeholderWidth\n          ? placeholderWidth *\n            (parseAspectRatio(normalizedProps.aspectRatio) ?? 1)\n          : undefined;\n\n      const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n\n      const src = loader({\n        src: normalizedProps.src,\n        width: placeholderWidth,\n        height: placeholderHeight,\n        crop,\n      });\n\n      return {\n        placeholderHeight,\n        srcSet,\n        src,\n      };\n    }, [crop, data, imageWidths, loader, normalizedProps, placeholderWidth]);\n\n    return (\n      <img\n        ref={ref}\n        alt={normalizedProps.alt}\n        decoding={decoding}\n        height={fluid.placeholderHeight}\n        loading={loading}\n        sizes={sizes}\n        src={fluid.src}\n        srcSet={fluid.srcSet}\n        width={placeholderWidth}\n        {...passthroughProps}\n        style={{\n          width: normalizedProps.width,\n          aspectRatio: normalizedProps.aspectRatio,\n          ...passthroughProps.style,\n        }}\n      />\n    );\n  },\n);\n\n/**\n * The shopifyLoader function is a simple utility function that takes a src, width,\n * height, and crop and returns a string that can be used as the src for an image.\n * It can be used with the Hydrogen Image component or with the next/image component.\n * (or any others that accept equivalent configuration)\n * @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`\n * @param width - The width of the image, e.g. `100`\n * @param height - The height of the image, e.g. `100`\n * @param crop - The crop of the image, e.g. `center`\n * @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`\n *\n * @example\n * ```\n * shopifyLoader({\n *   src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',\n *   width: 100,\n *   height: 100,\n *   crop: 'center',\n * })\n * ```\n */\nconst PLACEHOLDER_DOMAIN = 'https://placeholder.shopify.com';\nexport function shopifyLoader({src, width, height, crop}: LoaderParams) {\n  if (!src) {\n    return '';\n  }\n\n  const url = new URL(src, PLACEHOLDER_DOMAIN);\n\n  if (width) {\n    url.searchParams.append('width', Math.round(width).toString());\n  }\n\n  if (height) {\n    url.searchParams.append('height', Math.round(height).toString());\n  }\n\n  if (crop) {\n    url.searchParams.append('crop', crop);\n  }\n  return url.href.replace(PLACEHOLDER_DOMAIN, '');\n}\n\n/**\n * Checks whether the width and height share the same unit type\n * @param width - The width of the image, e.g. 100% | 10px\n * @param height - The height of the image, e.g. auto | 100px\n * @returns Whether the width and height share the same unit type (boolean)\n */\nfunction unitsMatch(\n  width: string | number = '100%',\n  height: string | number = 'auto',\n): boolean {\n  return (\n    getUnitValueParts(width.toString()).unit ===\n    getUnitValueParts(height.toString()).unit\n  );\n}\n\n/**\n * Given a CSS size, returns the unit and number parts of the value\n * @param value - The CSS size, e.g. 100px\n * @returns The unit and number parts of the value, e.g. \\{unit: 'px', number: 100\\}\n */\nfunction getUnitValueParts(value: string): {unit: string; number: number} {\n  const unit = value.replace(/[0-9.]/g, '');\n  const number = parseFloat(value.replace(unit, ''));\n\n  return {\n    unit: unit === '' ? (number === undefined ? 'auto' : 'px') : unit,\n    number,\n  };\n}\n\n/**\n * Given a value, returns the width of the image as an integer in pixels\n * @param value - The width of the image, e.g. 16px | 1rem | 1em | 16\n * @returns The width of the image in pixels, e.g. 16, or undefined if the value is not a fixed unit\n */\nfunction getNormalizedFixedUnit(value?: string | number): number | undefined {\n  if (value === undefined) {\n    return;\n  }\n\n  const {unit, number} = getUnitValueParts(value.toString());\n\n  switch (unit) {\n    case 'em':\n      return number * 16;\n    case 'rem':\n      return number * 16;\n    case 'px':\n      return number;\n    case '':\n      return number;\n    default:\n      return;\n  }\n}\n\n/**\n * This function checks whether a width is fixed or not.\n * @param width - The width of the image, e.g. 100 | '100px' | '100em' | '100rem'\n * @returns Whether the width is fixed or not\n */\nfunction isFixedWidth(width: string | number): boolean {\n  const fixedEndings = /\\d(px|em|rem)$/;\n  return typeof width === 'number' || fixedEndings.test(width);\n}\n\n/**\n * This function generates a srcSet for Shopify images.\n * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg\n * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\\{width: 200, height: 200, crop: 'center'\\}, \\{width: 400, height: 400, crop: 'center'\\}]\n * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters\n * @param descriptorType - Whether to use `w` (width) or `x` (density) descriptors in the srcset. Use `'density'` for fixed-width images and `'width'` (default) for fluid images.\n * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'\n */\nexport function generateSrcSet(\n  src?: string,\n  sizesArray?: Array<{width?: number; height?: number; crop?: Crop}>,\n  loader: Loader = shopifyLoader,\n  descriptorType: 'width' | 'density' = 'width',\n): string {\n  if (!src) {\n    return '';\n  }\n\n  if (sizesArray?.length === 0 || !sizesArray) {\n    return src;\n  }\n\n  return sizesArray\n    .map(\n      (size, i) =>\n        `${loader({\n          src,\n          width: size.width,\n          height: size.height,\n          crop: size.crop,\n        })} ${descriptorType === 'density' ? `${i + 1}x` : `${size.width ?? 0}w`}`,\n    )\n    .join(`, `);\n}\n\n/**\n * This function generates an array of sizes for Shopify images, for both fixed and responsive images.\n * @param width - The CSS width of the image\n * @param intervals - The number of intervals to generate\n * @param startingWidth - The starting width of the image\n * @param incrementSize - The size of each interval\n * @returns An array of widths\n */\nexport function generateImageWidths(\n  width: string | number = '100%',\n  intervals: number,\n  startingWidth: number,\n  incrementSize: number,\n): number[] {\n  const responsive = Array.from(\n    {length: intervals},\n    (_, i) => i * incrementSize + startingWidth,\n  );\n\n  const fixed = Array.from(\n    {length: 3},\n    (_, i) => (i + 1) * (getNormalizedFixedUnit(width) ?? 0),\n  );\n\n  return isFixedWidth(width) ? fixed : responsive;\n}\n\n/**\n * Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1/1`, not `0.5`, or `auto`\n * @param aspectRatio - The aspect ratio of the image, e.g. `1/1`\n * @returns The aspect ratio as a number, e.g. `0.5`\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}\n */\nexport function parseAspectRatio(aspectRatio?: string): number | undefined {\n  if (!aspectRatio) return;\n  const [width, height] = aspectRatio.split('/');\n  return 1 / (Number(width) / Number(height));\n}\n\n// Generate data needed for Imagery loader\nexport function generateSizes(\n  imageWidths?: number[],\n  aspectRatio?: string,\n  crop: Crop = 'center',\n  sourceDimensions?: {width?: number; height?: number},\n):\n  | {\n      width: number;\n      height: number | undefined;\n      crop: Crop;\n    }[]\n  | undefined {\n  if (!imageWidths) return;\n  return imageWidths\n    .map((width: number) => {\n      return {\n        width,\n        height: aspectRatio\n          ? width * (parseAspectRatio(aspectRatio) ?? 1)\n          : undefined,\n        crop,\n      };\n    })\n    .filter(({width, height}) => {\n      if (sourceDimensions?.width && width > sourceDimensions.width) {\n        return false;\n      }\n\n      if (\n        sourceDimensions?.height &&\n        height &&\n        height > sourceDimensions.height\n      ) {\n        return false;\n      }\n\n      return true;\n    });\n  /*\n    Given:\n      ([100, 200], 1/1, 'center')\n    Returns:\n      [{width: 100, height: 100, crop: 'center'},\n      {width: 200, height: 200, crop: 'center'}]\n  */\n}\n"],"mappings":"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"}

package/dist/browser-prod/ShopifyProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ShopifyProvider.mjs","names":[],"sources":["../../src/ShopifyProvider.tsx"],"sourcesContent":["import {createContext, useContext, useMemo, type ReactNode} from 'react';\nimport type {LanguageCode, CountryCode} from './storefront-api-types.js';\nimport {SFAPI_VERSION} from './storefront-api-constants.js';\nimport {getPublicTokenHeadersRaw} from './storefront-client.js';\n\nexport const defaultShopifyContext: ShopifyContextValue = {\n  storeDomain: 'test',\n  storefrontToken: 'abc123',\n  storefrontApiVersion: SFAPI_VERSION,\n  countryIsoCode: 'US',\n  languageIsoCode: 'EN',\n  getStorefrontApiUrl() {\n    return '';\n  },\n  getPublicTokenHeaders() {\n    return {};\n  },\n  getShopifyDomain() {\n    return '';\n  },\n};\n\nconst ShopifyContext = createContext<ShopifyContextValue>(\n  defaultShopifyContext,\n);\n\n/**\n * Hydrogen server sets this server timing key when the SFAPI proxy is enabled.\n * Read it automatically in the browser for apps using frontend cart in full-stack Hydrogen,\n * but don't export this utility yet since we don't want to make this a public convention.\n */\nfunction isSfapiProxyEnabled() {\n  if (typeof window === 'undefined') return false;\n\n  try {\n    const navigationEntry = window.performance?.getEntriesByType?.(\n      'navigation',\n    )[0] as PerformanceNavigationTiming;\n\n    return !!navigationEntry?.serverTiming?.some(\n      (entry) => entry.name === '_sfapi_proxy',\n    );\n  } catch (e) {\n    return false;\n  }\n}\n\n/**\n * The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.\n * @publicDocs\n */\nexport function ShopifyProvider({\n  children,\n  ...shopifyConfig\n}: ShopifyProviderProps): JSX.Element {\n  if (\n    !shopifyConfig.countryIsoCode ||\n    !shopifyConfig.languageIsoCode ||\n    !shopifyConfig.storeDomain ||\n    !shopifyConfig.storefrontToken ||\n    !shopifyConfig.storefrontApiVersion\n  ) {\n    throw new Error(\n      `Please provide the necessary props to '<ShopifyProvider/>'`,\n    );\n  }\n\n  if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n    console.warn(\n      `<ShopifyProvider/>: This version of Hydrogen React is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen React and the Storefront API.`,\n    );\n  }\n\n  const finalConfig = useMemo<ShopifyContextValue>(() => {\n    const sameDomainForStorefrontApi =\n      shopifyConfig.sameDomainForStorefrontApi ?? isSfapiProxyEnabled();\n\n    function getShopifyDomain(overrideProps?: {storeDomain?: string}): string {\n      const domain = overrideProps?.storeDomain ?? shopifyConfig.storeDomain;\n      return domain.includes('://') ? domain : `https://${domain}`;\n    }\n\n    return {\n      ...shopifyConfig,\n      sameDomainForStorefrontApi,\n      getPublicTokenHeaders(overrideProps): Record<string, string> {\n        return getPublicTokenHeadersRaw(\n          overrideProps.contentType,\n          shopifyConfig.storefrontApiVersion,\n          overrideProps.storefrontToken ?? shopifyConfig.storefrontToken,\n        );\n      },\n      getShopifyDomain,\n      getStorefrontApiUrl(overrideProps): string {\n        const finalDomainUrl =\n          sameDomainForStorefrontApi && typeof window !== 'undefined'\n            ? window.location.origin\n            : getShopifyDomain({\n                storeDomain:\n                  overrideProps?.storeDomain ?? shopifyConfig.storeDomain,\n              });\n\n        return `${finalDomainUrl}${\n          finalDomainUrl.endsWith('/') ? '' : '/'\n        }api/${\n          overrideProps?.storefrontApiVersion ??\n          shopifyConfig.storefrontApiVersion\n        }/graphql.json`;\n      },\n    };\n  }, [shopifyConfig]);\n\n  return (\n    <ShopifyContext.Provider value={finalConfig}>\n      {children}\n    </ShopifyContext.Provider>\n  );\n}\n\n/**\n * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.\n * @publicDocs\n */\nexport function useShop(): ShopifyContextValue {\n  const shopContext = useContext(ShopifyContext);\n  if (!shopContext) {\n    throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);\n  }\n  return shopContext;\n}\n\nexport interface ShopifyProviderBase {\n  /** The globally-unique identifier for the Shop */\n  storefrontId?: string;\n  /** The full domain of your Shopify storefront URL (eg: the complete string of `{subdomain}.myshopify.com`). */\n  storeDomain: string;\n  /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  storefrontToken: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */\n  storefrontApiVersion: string;\n  /**\n   * The code designating a country, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the `CountryCode` enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code `ES`, and the territories associated with the United States of America are represented by the country code `US`.\n   */\n  countryIsoCode: CountryCode;\n  /**\n   * `ISO 369` language codes supported by Shopify.\n   */\n  languageIsoCode: LanguageCode;\n  /**\n   * Uses the current window.location.origin for Storefront API requests.\n   * This requires setting up a proxy for Storefront API requests in your domain.\n   */\n  sameDomainForStorefrontApi?: boolean;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen React components and hooks.\n */\nexport interface ShopifyProviderProps extends ShopifyProviderBase {\n  /** React children to render. */\n  children?: ReactNode;\n}\n\nexport interface ShopifyContextValue\n  extends ShopifyProviderBase, ShopifyContextReturn {}\n\ntype ShopifyContextReturn = {\n  /**\n   * Creates the fully-qualified URL to your store's GraphQL endpoint.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (props?: GetStorefrontApiUrlProps) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This uses the public Storefront API token.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `storefrontToken`\n   *\n   */\n  getPublicTokenHeaders: (\n    props: GetPublicTokenHeadersProps,\n  ) => Record<string, string>;\n  /**\n   * Creates the fully-qualified URL to your myshopify.com domain.\n   *\n   * By default, it will use the config you passed in when calling `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`:\n   *\n   * - `storeDomain`\n   */\n  getShopifyDomain: (props?: GetShopifyDomainProps) => string;\n};\n\ntype GetStorefrontApiUrlProps = {\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n  storeDomain?: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details. */\n  storefrontApiVersion?: string;\n};\n\ntype GetPublicTokenHeadersProps = {\n  /**\n   * Customizes which `\"content-type\"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `\"json\"`. When fetching with a `body` that is a plain string, use `\"graphql\"`. Defaults to `\"json\"`\n   */\n  contentType: 'json' | 'graphql';\n  /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  storefrontToken?: string;\n};\n\ntype GetShopifyDomainProps = {storeDomain?: string};\n"],"mappings":";;;;;AAKA,IAAa,wBAA6C;CACxD,aAAa;CACb,iBAAiB;CACjB,sBAAsB;CACtB,gBAAgB;CAChB,iBAAiB;CACjB,sBAAsB;AACpB,SAAO;;CAET,wBAAwB;AACtB,SAAO,EAAE;;CAEX,mBAAmB;AACjB,SAAO;;CAEV;AAED,IAAM,iBAAiB,cACrB,sBACD;;;;;;AAOD,SAAS,sBAAsB;AAC7B,KAAI,OAAO,WAAW,YAAa,QAAO;AAE1C,KAAI;AAKF,SAAO,CAAC,EAJgB,OAAO,aAAa,mBAC1C,aACD,CAAC,KAEwB,cAAc,MACrC,UAAU,MAAM,SAAS,eAC3B;UACM,GAAG;AACV,SAAO;;;;;;;AAQX,SAAgB,gBAAgB,EAC9B,UACA,GAAG,iBACiC;AACpC,KACE,CAAC,cAAc,kBACf,CAAC,cAAc,mBACf,CAAC,cAAc,eACf,CAAC,cAAc,mBACf,CAAC,cAAc,qBAEf,OAAM,IAAI,MACR,6DACD;AAGH,KAAI,cAAc,yBAAA,UAChB,SAAQ,KACN,oGAAoG,cAAc,2CAA2C,cAAc,qBAAqB,yGACjM;CAGH,MAAM,cAAc,cAAmC;EACrD,MAAM,6BACJ,cAAc,8BAA8B,qBAAqB;EAEnE,SAAS,iBAAiB,eAAgD;GACxE,MAAM,SAAS,eAAe,eAAe,cAAc;AAC3D,UAAO,OAAO,SAAS,MAAM,GAAG,SAAS,WAAW;;AAGtD,SAAO;GACL,GAAG;GACH;GACA,sBAAsB,eAAuC;AAC3D,WAAO,yBACL,cAAc,aACd,cAAc,sBACd,cAAc,mBAAmB,cAAc,gBAChD;;GAEH;GACA,oBAAoB,eAAuB;IACzC,MAAM,iBACJ,8BAA8B,OAAO,WAAW,cAC5C,OAAO,SAAS,SAChB,iBAAiB,EACf,aACE,eAAe,eAAe,cAAc,aAC/C,CAAC;AAER,WAAO,GAAG,iBACR,eAAe,SAAS,IAAI,GAAG,KAAK,IACrC,MACC,eAAe,wBACf,cAAc,qBACf;;GAEJ;IACA,CAAC,cAAc,CAAC;AAEnB,QACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;EAC7B;EACuB,CAAA;;;;;;AAQ9B,SAAgB,UAA+B;CAC7C,MAAM,cAAc,WAAW,eAAe;AAC9C,KAAI,CAAC,YACH,OAAM,IAAI,MAAM,yDAAyD;AAE3E,QAAO"}
+{"version":3,"file":"ShopifyProvider.mjs","names":[],"sources":["../../src/ShopifyProvider.tsx"],"sourcesContent":["import {createContext, useContext, useMemo, type ReactNode} from 'react';\nimport type {LanguageCode, CountryCode} from './storefront-api-types.js';\nimport {SFAPI_VERSION} from './storefront-api-constants.js';\nimport {getPublicTokenHeadersRaw} from './storefront-client.js';\n\nexport const defaultShopifyContext: ShopifyContextValue = {\n  storeDomain: 'test',\n  storefrontToken: 'abc123',\n  storefrontApiVersion: SFAPI_VERSION,\n  countryIsoCode: 'US',\n  languageIsoCode: 'EN',\n  getStorefrontApiUrl() {\n    return '';\n  },\n  getPublicTokenHeaders() {\n    return {};\n  },\n  getShopifyDomain() {\n    return '';\n  },\n};\n\nconst ShopifyContext = createContext<ShopifyContextValue>(\n  defaultShopifyContext,\n);\n\n/**\n * Hydrogen server sets this server timing key when the SFAPI proxy is enabled.\n * Read it automatically in the browser for apps using frontend cart in full-stack Hydrogen,\n * but don't export this utility yet since we don't want to make this a public convention.\n */\nfunction isSfapiProxyEnabled() {\n  if (typeof window === 'undefined') return false;\n\n  try {\n    const navigationEntry = window.performance?.getEntriesByType?.(\n      'navigation',\n    )[0] as PerformanceNavigationTiming;\n\n    return !!navigationEntry?.serverTiming?.some(\n      (entry) => entry.name === '_sfapi_proxy',\n    );\n  } catch (e) {\n    return false;\n  }\n}\n\n/**\n * The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.\n * @publicDocs\n */\nexport function ShopifyProvider({\n  children,\n  ...shopifyConfig\n}: ShopifyProviderProps): JSX.Element {\n  if (\n    !shopifyConfig.countryIsoCode ||\n    !shopifyConfig.languageIsoCode ||\n    !shopifyConfig.storeDomain ||\n    !shopifyConfig.storefrontToken ||\n    !shopifyConfig.storefrontApiVersion\n  ) {\n    throw new Error(\n      `Please provide the necessary props to '<ShopifyProvider/>'`,\n    );\n  }\n\n  if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n    console.warn(\n      `<ShopifyProvider/>: This version of Hydrogen React is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen React and the Storefront API.`,\n    );\n  }\n\n  const finalConfig = useMemo<ShopifyContextValue>(() => {\n    const sameDomainForStorefrontApi =\n      shopifyConfig.sameDomainForStorefrontApi ?? isSfapiProxyEnabled();\n\n    function getShopifyDomain(overrideProps?: {storeDomain?: string}): string {\n      const domain = overrideProps?.storeDomain ?? shopifyConfig.storeDomain;\n      return domain.includes('://') ? domain : `https://${domain}`;\n    }\n\n    return {\n      ...shopifyConfig,\n      sameDomainForStorefrontApi,\n      getPublicTokenHeaders(overrideProps): Record<string, string> {\n        return getPublicTokenHeadersRaw(\n          overrideProps.contentType,\n          shopifyConfig.storefrontApiVersion,\n          overrideProps.storefrontToken ?? shopifyConfig.storefrontToken,\n        );\n      },\n      getShopifyDomain,\n      getStorefrontApiUrl(overrideProps): string {\n        const finalDomainUrl =\n          sameDomainForStorefrontApi && typeof window !== 'undefined'\n            ? window.location.origin\n            : getShopifyDomain({\n                storeDomain:\n                  overrideProps?.storeDomain ?? shopifyConfig.storeDomain,\n              });\n\n        return `${finalDomainUrl}${\n          finalDomainUrl.endsWith('/') ? '' : '/'\n        }api/${\n          overrideProps?.storefrontApiVersion ??\n          shopifyConfig.storefrontApiVersion\n        }/graphql.json`;\n      },\n    };\n  }, [shopifyConfig]);\n\n  return (\n    <ShopifyContext.Provider value={finalConfig}>\n      {children}\n    </ShopifyContext.Provider>\n  );\n}\n\n/**\n * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.\n * @publicDocs\n */\nexport function useShop(): ShopifyContextValue {\n  const shopContext = useContext(ShopifyContext);\n  if (!shopContext) {\n    throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);\n  }\n  return shopContext;\n}\n\nexport interface ShopifyProviderBase {\n  /** The globally-unique identifier for the Shop */\n  storefrontId?: string;\n  /** The full domain of your Shopify storefront URL (eg: the complete string of `{subdomain}.myshopify.com`). */\n  storeDomain: string;\n  /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  storefrontToken: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */\n  storefrontApiVersion: string;\n  /**\n   * The code designating a country, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the `CountryCode` enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code `ES`, and the territories associated with the United States of America are represented by the country code `US`.\n   */\n  countryIsoCode: CountryCode;\n  /**\n   * `ISO 369` language codes supported by Shopify.\n   */\n  languageIsoCode: LanguageCode;\n  /**\n   * Uses the current window.location.origin for Storefront API requests.\n   * This requires setting up a proxy for Storefront API requests in your domain.\n   * Without the proxy, cart requests still work, but visitor analytics and\n   * session attribution do not,\n   * [notice](https://shopify.dev/changelog/posts/tracking-cookie-deprecation-hydrogen).\n   */\n  sameDomainForStorefrontApi?: boolean;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen React components and hooks.\n */\nexport interface ShopifyProviderProps extends ShopifyProviderBase {\n  /** React children to render. */\n  children?: ReactNode;\n}\n\nexport interface ShopifyContextValue\n  extends ShopifyProviderBase, ShopifyContextReturn {}\n\ntype ShopifyContextReturn = {\n  /**\n   * Creates the fully-qualified URL to your store's GraphQL endpoint.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (props?: GetStorefrontApiUrlProps) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This uses the public Storefront API token.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `storefrontToken`\n   *\n   */\n  getPublicTokenHeaders: (\n    props: GetPublicTokenHeadersProps,\n  ) => Record<string, string>;\n  /**\n   * Creates the fully-qualified URL to your myshopify.com domain.\n   *\n   * By default, it will use the config you passed in when calling `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`:\n   *\n   * - `storeDomain`\n   */\n  getShopifyDomain: (props?: GetShopifyDomainProps) => string;\n};\n\ntype GetStorefrontApiUrlProps = {\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n  storeDomain?: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details. */\n  storefrontApiVersion?: string;\n};\n\ntype GetPublicTokenHeadersProps = {\n  /**\n   * Customizes which `\"content-type\"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `\"json\"`. When fetching with a `body` that is a plain string, use `\"graphql\"`. Defaults to `\"json\"`\n   */\n  contentType: 'json' | 'graphql';\n  /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  storefrontToken?: string;\n};\n\ntype GetShopifyDomainProps = {storeDomain?: string};\n"],"mappings":";;;;;AAKA,IAAa,wBAA6C;CACxD,aAAa;CACb,iBAAiB;CACjB,sBAAsB;CACtB,gBAAgB;CAChB,iBAAiB;CACjB,sBAAsB;AACpB,SAAO;;CAET,wBAAwB;AACtB,SAAO,EAAE;;CAEX,mBAAmB;AACjB,SAAO;;CAEV;AAED,IAAM,iBAAiB,cACrB,sBACD;;;;;;AAOD,SAAS,sBAAsB;AAC7B,KAAI,OAAO,WAAW,YAAa,QAAO;AAE1C,KAAI;AAKF,SAAO,CAAC,EAJgB,OAAO,aAAa,mBAC1C,aACD,CAAC,KAEwB,cAAc,MACrC,UAAU,MAAM,SAAS,eAC3B;UACM,GAAG;AACV,SAAO;;;;;;;AAQX,SAAgB,gBAAgB,EAC9B,UACA,GAAG,iBACiC;AACpC,KACE,CAAC,cAAc,kBACf,CAAC,cAAc,mBACf,CAAC,cAAc,eACf,CAAC,cAAc,mBACf,CAAC,cAAc,qBAEf,OAAM,IAAI,MACR,6DACD;AAGH,KAAI,cAAc,yBAAA,UAChB,SAAQ,KACN,oGAAoG,cAAc,2CAA2C,cAAc,qBAAqB,yGACjM;CAGH,MAAM,cAAc,cAAmC;EACrD,MAAM,6BACJ,cAAc,8BAA8B,qBAAqB;EAEnE,SAAS,iBAAiB,eAAgD;GACxE,MAAM,SAAS,eAAe,eAAe,cAAc;AAC3D,UAAO,OAAO,SAAS,MAAM,GAAG,SAAS,WAAW;;AAGtD,SAAO;GACL,GAAG;GACH;GACA,sBAAsB,eAAuC;AAC3D,WAAO,yBACL,cAAc,aACd,cAAc,sBACd,cAAc,mBAAmB,cAAc,gBAChD;;GAEH;GACA,oBAAoB,eAAuB;IACzC,MAAM,iBACJ,8BAA8B,OAAO,WAAW,cAC5C,OAAO,SAAS,SAChB,iBAAiB,EACf,aACE,eAAe,eAAe,cAAc,aAC/C,CAAC;AAER,WAAO,GAAG,iBACR,eAAe,SAAS,IAAI,GAAG,KAAK,IACrC,MACC,eAAe,wBACf,cAAc,qBACf;;GAEJ;IACA,CAAC,cAAc,CAAC;AAEnB,QACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;EAC7B;EACuB,CAAA;;;;;;AAQ9B,SAAgB,UAA+B;CAC7C,MAAM,cAAc,WAAW,eAAe;AAC9C,KAAI,CAAC,YACH,OAAM,IAAI,MAAM,yDAAyD;AAE3E,QAAO"}

package/dist/browser-prod/analytics-schema-custom-storefront-customer-tracking.mjs

@@ -100,7 +100,7 @@ function formatPayload(payload) {
 	const payloadWithPrivacy = payload;
 	return {
 		source: payload.shopifySalesChannel || ShopifySalesChannel.headless,
-		asset_version_id: payload.assetVersionId || "2026.4.2",
+		asset_version_id: payload.assetVersionId || "2026.4.4",
 		hydrogenSubchannelId: payload.storefrontId || payload.hydrogenSubchannelId || "0",
 		is_persistent_cookie: payload.hasUserConsent,
 		deprecated_visit_token: payload.visitToken,

package/dist/browser-prod/load-script.mjs

@@ -37,6 +37,6 @@ function useLoadScript(url, options) {
 	return status;
 }
 //#endregion
-export { useLoadScript };
+export { loadScript, useLoadScript };
 
 //# sourceMappingURL=load-script.mjs.map

package/dist/browser-prod/packages/hydrogen-react/package.mjs

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "2026.4.2";
+var version = "2026.4.4";
 //#endregion
 export { version };
 

package/dist/browser-prod/packages/hydrogen-react/package.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"package.mjs","names":[],"sources":["../../../../package.json"],"sourcesContent":["{\n  \"name\": \"@shopify/hydrogen-react\",\n  \"version\": \"2026.4.2\",\n  \"description\": \"React components, hooks, and utilities for creating custom Shopify storefronts\",\n  \"homepage\": \"https://github.com/Shopify/hydrogen/tree/main/packages/hydrogen-react\",\n  \"license\": \"MIT\",\n  \"publishConfig\": {\n    \"access\": \"public\",\n    \"@shopify:registry\": \"https://registry.npmjs.org\"\n  },\n  \"files\": [\n    \"dist\",\n    \"storefront.schema.json\",\n    \"customer-account.schema.json\"\n  ],\n  \"type\": \"commonjs\",\n  \"exports\": {\n    \".\": {\n      \"node\": {\n        \"require\": {\n          \"types\": \"./dist/types/index.d.cts\",\n          \"development\": \"./dist/node-dev/index.js\",\n          \"default\": \"./dist/node-prod/index.js\"\n        },\n        \"import\": {\n          \"types\": \"./dist/types/index.d.ts\",\n          \"development\": \"./dist/node-dev/index.mjs\",\n          \"default\": \"./dist/node-prod/index.mjs\"\n        },\n        \"default\": \"./dist/node-prod/index.js\"\n      },\n      \"module\": {\n        \"types\": \"./dist/types/index.d.ts\",\n        \"development\": \"./dist/browser-dev/index.mjs\",\n        \"default\": \"./dist/browser-prod/index.mjs\"\n      },\n      \"import\": {\n        \"types\": \"./dist/types/index.d.ts\",\n        \"development\": \"./dist/browser-dev/index.mjs\",\n        \"default\": \"./dist/browser-prod/index.mjs\"\n      },\n      \"require\": {\n        \"types\": \"./dist/types/index.d.cts\",\n        \"development\": \"./dist/node-dev/index.js\",\n        \"default\": \"./dist/node-prod/index.js\"\n      },\n      \"default\": \"./dist/browser-prod/index.mjs\"\n    },\n    \"./storefront-api-types\": \"./dist/types/storefront-api-types.d.ts\",\n    \"./storefront.schema.json\": \"./storefront.schema.json\",\n    \"./customer-account.schema.json\": \"./customer-account.schema.json\",\n    \"./customer-account-api-types\": \"./dist/types/customer-account-api-types.d.ts\",\n    \"./package.json\": \"./package.json\",\n    \"./*\": {\n      \"node\": {\n        \"require\": {\n          \"types\": \"./dist/types/*.d.cts\",\n          \"development\": \"./dist/node-dev/*.js\",\n          \"default\": \"./dist/node-prod/*.js\"\n        },\n        \"import\": {\n          \"types\": \"./dist/types/*.d.ts\",\n          \"development\": \"./dist/node-dev/*.mjs\",\n          \"default\": \"./dist/node-prod/*.mjs\"\n        },\n        \"default\": \"./dist/node-prod/*.js\"\n      },\n      \"module\": {\n        \"types\": \"./dist/types/*.d.ts\",\n        \"development\": \"./dist/browser-dev/*.mjs\",\n        \"default\": \"./dist/browser-prod/*.mjs\"\n      },\n      \"import\": {\n        \"types\": \"./dist/types/*.d.ts\",\n        \"development\": \"./dist/browser-dev/*.mjs\",\n        \"default\": \"./dist/browser-prod/*.mjs\"\n      },\n      \"require\": {\n        \"types\": \"./dist/types/*.d.cts\",\n        \"development\": \"./dist/node-dev/*.js\",\n        \"default\": \"./dist/node-prod/*.js\"\n      },\n      \"default\": \"./dist/browser-prod/*.mjs\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"storefront-api-types\": [\n        \"./dist/types/storefront-api-types.d.ts\"\n      ]\n    }\n  },\n  \"main\": \"./dist/node-prod/index.js\",\n  \"module\": \"./dist/node-prod/index.mjs\",\n  \"browser\": \"./dist/browser-prod/index.mjs\",\n  \"types\": \"./dist/types/index.d.ts\",\n  \"unpkg\": \"./dist/umd/hydrogen-react.prod.js\",\n  \"jsdelivr\": \"./dist/umd/hydrogen-react.prod.js\",\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"build-docs\": \"sh ./docs/build-docs.sh && pnpm run format\",\n    \"clean-dist\": \"rimraf ./dist\",\n    \"dev\": \"run-s dev:demo\",\n    \"dev:story\": \"ladle serve\",\n    \"dev:demo\": \"run-p dev:demo:* copy-api-types\",\n    \"dev:demo:browser-dev\": \"vite build --watch --emptyOutDir false --clearScreen false --mode devbuild\",\n    \"dev:demo:ts\": \"tsc --watch --emitDeclarationOnly\",\n    \"build\": \"npm-run-all --sequential clean-dist --parallel build:vite:* build:tsc:es --parallel build:tsc:cjs copy-api-types\",\n    \"build:vite:browser-dev\": \"vite build --mode devbuild\",\n    \"build:vite:browser-prod\": \"vite build\",\n    \"build:vite:node-dev\": \"vite build --mode devbuild --ssr\",\n    \"build:vite:node-prod\": \"vite build --ssr\",\n    \"build:vite:umddev\": \"vite build --mode umdbuilddev\",\n    \"build:vite:umdprod\": \"vite build --mode umdbuild\",\n    \"build:tsc:cjs\": \"cpy ./dist/types/index.d.ts ./dist/types/ --rename=index.d.cts --flat\",\n    \"build:tsc:es\": \"tsc --emitDeclarationOnly --project tsconfig.typeoutput.json\",\n    \"copy-api-types\": \"cpy ./src/storefront-api-types.d.ts ./src/customer-account-api-types.d.ts ./dist/types/ --flat\",\n    \"format\": \"prettier --write \\\"{src,docs}/**/*\\\" --ignore-unknown\",\n    \"graphql-types\": \"graphql-codegen --config codegen.ts && pnpm run format\",\n    \"test\": \"vitest run --coverage\",\n    \"test:watch\": \"vitest\",\n    \"typecheck\": \"run-p typecheck:*\",\n    \"typecheck:code\": \"tsc --noEmit\",\n    \"typecheck:examples\": \"tsc --noEmit --project tsconfig.examples.json\",\n    \"preview-docs\": \"pnpm --dir ../../docs/preview run dev\"\n  },\n  \"devDependencies\": {\n    \"@faker-js/faker\": \"^9.4.0\",\n    \"@graphql-codegen/add\": \"^5.0.3\",\n    \"@graphql-codegen/cli\": \"^5.0.4\",\n    \"@graphql-codegen/introspection\": \"^4.0.3\",\n    \"@graphql-codegen/typescript\": \"^4.1.3\",\n    \"@ladle/react\": \"^5.0.1\",\n    \"@shopify/generate-docs\": \"catalog:\",\n    \"@testing-library/jest-dom\": \"^6.6.3\",\n    \"@testing-library/react\": \"^14.0.0\",\n    \"@testing-library/user-event\": \"^14.6.1\",\n    \"@types/react\": \"catalog:\",\n    \"@types/react-dom\": \"catalog:\",\n    \"@vitejs/plugin-react\": \"^6.0.1\",\n    \"@vitest/coverage-v8\": \"^3.2.4\",\n    \"cpy-cli\": \"^5.0.0\",\n    \"eslint\": \"9.19.0\",\n    \"eslint-config-prettier\": \"10.0.1\",\n    \"eslint-import-resolver-typescript\": \"3.7.0\",\n    \"eslint-plugin-eslint-comments\": \"3.2.0\",\n    \"eslint-plugin-import\": \"2.31.0\",\n    \"eslint-plugin-jest\": \"28.11.0\",\n    \"eslint-plugin-jsx-a11y\": \"6.10.2\",\n    \"eslint-plugin-node\": \"11.1.0\",\n    \"eslint-plugin-prettier\": \"4.2.1\",\n    \"eslint-plugin-react\": \"7.37.4\",\n    \"eslint-plugin-react-hooks\": \"5.1.0\",\n    \"eslint-plugin-simple-import-sort\": \"12.1.1\",\n    \"eslint-plugin-tsdoc\": \"0.2.14\",\n    \"happy-dom\": \"^20.8.9\",\n    \"npm-run-all\": \"^4.1.5\",\n    \"react\": \"catalog:\",\n    \"react-dom\": \"catalog:\",\n    \"rimraf\": \"^6.0.1\",\n    \"ts-expect\": \"^1.3.0\",\n    \"typescript\": \"5.9.2\",\n    \"vite\": \"^8.0.1\",\n    \"vitest\": \"^3.2.4\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3\",\n    \"react-dom\": \"^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3\",\n    \"vite\": \"^5.1.0 || ^6.2.1 || ^7.0.0 || ^8.0.0\"\n  },\n  \"dependencies\": {\n    \"@google/model-viewer\": \"^4.0.0\",\n    \"@xstate/fsm\": \"2.0.0\",\n    \"ast-v8-to-istanbul\": \"^0.3.11\",\n    \"graphql\": \"^16.10.0\",\n    \"type-fest\": \"^4.33.0\",\n    \"worktop\": \"^0.7.3\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/Shopify/hydrogen.git\",\n    \"directory\": \"packages/hydrogen-react\"\n  },\n  \"bugs\": \"https://github.com/shopify/hydrogen/issues\"\n}\n"],"mappings":""}
+{"version":3,"file":"package.mjs","names":[],"sources":["../../../../package.json"],"sourcesContent":["{\n  \"name\": \"@shopify/hydrogen-react\",\n  \"version\": \"2026.4.4\",\n  \"description\": \"React components, hooks, and utilities for creating custom Shopify storefronts\",\n  \"homepage\": \"https://github.com/Shopify/hydrogen/tree/main/packages/hydrogen-react\",\n  \"license\": \"MIT\",\n  \"publishConfig\": {\n    \"access\": \"public\",\n    \"@shopify:registry\": \"https://registry.npmjs.org\"\n  },\n  \"files\": [\n    \"dist\",\n    \"storefront.schema.json\",\n    \"customer-account.schema.json\"\n  ],\n  \"type\": \"commonjs\",\n  \"exports\": {\n    \".\": {\n      \"node\": {\n        \"require\": {\n          \"types\": \"./dist/types/index.d.cts\",\n          \"development\": \"./dist/node-dev/index.js\",\n          \"default\": \"./dist/node-prod/index.js\"\n        },\n        \"import\": {\n          \"types\": \"./dist/types/index.d.ts\",\n          \"development\": \"./dist/node-dev/index.mjs\",\n          \"default\": \"./dist/node-prod/index.mjs\"\n        },\n        \"default\": \"./dist/node-prod/index.js\"\n      },\n      \"module\": {\n        \"types\": \"./dist/types/index.d.ts\",\n        \"development\": \"./dist/browser-dev/index.mjs\",\n        \"default\": \"./dist/browser-prod/index.mjs\"\n      },\n      \"import\": {\n        \"types\": \"./dist/types/index.d.ts\",\n        \"development\": \"./dist/browser-dev/index.mjs\",\n        \"default\": \"./dist/browser-prod/index.mjs\"\n      },\n      \"require\": {\n        \"types\": \"./dist/types/index.d.cts\",\n        \"development\": \"./dist/node-dev/index.js\",\n        \"default\": \"./dist/node-prod/index.js\"\n      },\n      \"default\": \"./dist/browser-prod/index.mjs\"\n    },\n    \"./storefront-api-types\": \"./dist/types/storefront-api-types.d.ts\",\n    \"./storefront.schema.json\": \"./storefront.schema.json\",\n    \"./customer-account.schema.json\": \"./customer-account.schema.json\",\n    \"./customer-account-api-types\": \"./dist/types/customer-account-api-types.d.ts\",\n    \"./package.json\": \"./package.json\",\n    \"./*\": {\n      \"node\": {\n        \"require\": {\n          \"types\": \"./dist/types/*.d.cts\",\n          \"development\": \"./dist/node-dev/*.js\",\n          \"default\": \"./dist/node-prod/*.js\"\n        },\n        \"import\": {\n          \"types\": \"./dist/types/*.d.ts\",\n          \"development\": \"./dist/node-dev/*.mjs\",\n          \"default\": \"./dist/node-prod/*.mjs\"\n        },\n        \"default\": \"./dist/node-prod/*.js\"\n      },\n      \"module\": {\n        \"types\": \"./dist/types/*.d.ts\",\n        \"development\": \"./dist/browser-dev/*.mjs\",\n        \"default\": \"./dist/browser-prod/*.mjs\"\n      },\n      \"import\": {\n        \"types\": \"./dist/types/*.d.ts\",\n        \"development\": \"./dist/browser-dev/*.mjs\",\n        \"default\": \"./dist/browser-prod/*.mjs\"\n      },\n      \"require\": {\n        \"types\": \"./dist/types/*.d.cts\",\n        \"development\": \"./dist/node-dev/*.js\",\n        \"default\": \"./dist/node-prod/*.js\"\n      },\n      \"default\": \"./dist/browser-prod/*.mjs\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"storefront-api-types\": [\n        \"./dist/types/storefront-api-types.d.ts\"\n      ]\n    }\n  },\n  \"main\": \"./dist/node-prod/index.js\",\n  \"module\": \"./dist/node-prod/index.mjs\",\n  \"browser\": \"./dist/browser-prod/index.mjs\",\n  \"types\": \"./dist/types/index.d.ts\",\n  \"unpkg\": \"./dist/umd/hydrogen-react.prod.js\",\n  \"jsdelivr\": \"./dist/umd/hydrogen-react.prod.js\",\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"build-docs\": \"sh ./docs/build-docs.sh && pnpm run format\",\n    \"clean-dist\": \"rimraf ./dist\",\n    \"dev\": \"run-s dev:demo\",\n    \"dev:story\": \"ladle serve\",\n    \"dev:demo\": \"run-p dev:demo:* copy-api-types\",\n    \"dev:demo:browser-dev\": \"vite build --watch --emptyOutDir false --clearScreen false --mode devbuild\",\n    \"dev:demo:ts\": \"tsc --watch --emitDeclarationOnly\",\n    \"build\": \"npm-run-all --sequential clean-dist --parallel build:vite:* build:tsc:es --parallel build:tsc:cjs copy-api-types\",\n    \"build:vite:browser-dev\": \"vite build --mode devbuild\",\n    \"build:vite:browser-prod\": \"vite build\",\n    \"build:vite:node-dev\": \"vite build --mode devbuild --ssr\",\n    \"build:vite:node-prod\": \"vite build --ssr\",\n    \"build:vite:umddev\": \"vite build --mode umdbuilddev\",\n    \"build:vite:umdprod\": \"vite build --mode umdbuild\",\n    \"build:tsc:cjs\": \"cpy ./dist/types/index.d.ts ./dist/types/ --rename=index.d.cts --flat\",\n    \"build:tsc:es\": \"tsc --emitDeclarationOnly --project tsconfig.typeoutput.json\",\n    \"copy-api-types\": \"cpy ./src/storefront-api-types.d.ts ./src/customer-account-api-types.d.ts ./dist/types/ --flat\",\n    \"format\": \"prettier --write \\\"{src,docs}/**/*\\\" --ignore-unknown\",\n    \"graphql-types\": \"graphql-codegen --config codegen.ts && pnpm run format\",\n    \"test\": \"vitest run --coverage\",\n    \"test:watch\": \"vitest\",\n    \"typecheck\": \"run-p typecheck:*\",\n    \"typecheck:code\": \"tsc --noEmit\",\n    \"typecheck:examples\": \"tsc --noEmit --project tsconfig.examples.json\",\n    \"preview-docs\": \"pnpm --dir ../../docs/preview run dev\"\n  },\n  \"devDependencies\": {\n    \"@faker-js/faker\": \"^9.4.0\",\n    \"@graphql-codegen/add\": \"^5.0.3\",\n    \"@graphql-codegen/cli\": \"^5.0.4\",\n    \"@graphql-codegen/introspection\": \"^4.0.3\",\n    \"@graphql-codegen/typescript\": \"^4.1.3\",\n    \"@ladle/react\": \"^5.0.1\",\n    \"@shopify/generate-docs\": \"catalog:\",\n    \"@testing-library/jest-dom\": \"^6.6.3\",\n    \"@testing-library/react\": \"^14.0.0\",\n    \"@testing-library/user-event\": \"^14.6.1\",\n    \"@types/react\": \"catalog:\",\n    \"@types/react-dom\": \"catalog:\",\n    \"@vitejs/plugin-react\": \"^6.0.1\",\n    \"@vitest/coverage-v8\": \"^3.2.4\",\n    \"cpy-cli\": \"^5.0.0\",\n    \"eslint\": \"9.19.0\",\n    \"eslint-config-prettier\": \"10.0.1\",\n    \"eslint-import-resolver-typescript\": \"3.7.0\",\n    \"eslint-plugin-eslint-comments\": \"3.2.0\",\n    \"eslint-plugin-import\": \"2.31.0\",\n    \"eslint-plugin-jest\": \"28.11.0\",\n    \"eslint-plugin-jsx-a11y\": \"6.10.2\",\n    \"eslint-plugin-node\": \"11.1.0\",\n    \"eslint-plugin-prettier\": \"4.2.1\",\n    \"eslint-plugin-react\": \"7.37.4\",\n    \"eslint-plugin-react-hooks\": \"5.1.0\",\n    \"eslint-plugin-simple-import-sort\": \"12.1.1\",\n    \"eslint-plugin-tsdoc\": \"0.2.14\",\n    \"happy-dom\": \"^20.8.9\",\n    \"npm-run-all\": \"^4.1.5\",\n    \"react\": \"catalog:\",\n    \"react-dom\": \"catalog:\",\n    \"rimraf\": \"^6.0.1\",\n    \"ts-expect\": \"^1.3.0\",\n    \"typescript\": \"5.9.2\",\n    \"vite\": \"^8.0.1\",\n    \"vitest\": \"^3.2.4\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3\",\n    \"react-dom\": \"^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3\",\n    \"vite\": \"^5.1.0 || ^6.2.1 || ^7.0.0 || ^8.0.0\"\n  },\n  \"dependencies\": {\n    \"@google/model-viewer\": \"^4.0.0\",\n    \"@xstate/fsm\": \"2.0.0\",\n    \"ast-v8-to-istanbul\": \"^0.3.11\",\n    \"graphql\": \"^16.10.0\",\n    \"type-fest\": \"^4.33.0\",\n    \"worktop\": \"^0.7.3\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/Shopify/hydrogen.git\",\n    \"directory\": \"packages/hydrogen-react\"\n  },\n  \"bugs\": \"https://github.com/shopify/hydrogen/issues\"\n}\n"],"mappings":""}

package/dist/browser-prod/tracking-utils.mjs

@@ -3,68 +3,27 @@
 var SHOPIFY_VISIT_TOKEN_HEADER = "X-Shopify-VisitToken";
 /** Storefront API header for UniqueToken */
 var SHOPIFY_UNIQUE_TOKEN_HEADER = "X-Shopify-UniqueToken";
-var cachedTrackingValues = { current: null };
 /**
-* Retrieves user session tracking values for analytics and marketing from the browser environment.
+* Retrieves user session tracking values for analytics and marketing from the
+* browser environment. Customer Privacy API token readers are authoritative
+* when available, including when consent denies tracking. Deprecated
+* `_shopify_y`/`_shopify_s` cookies are read only without an API token reader.
+* Consent comes from CTA's cache or the legacy `_tracking_consent` cookie.
 * @publicDocs
 */
 function getTrackingValues() {
-	let trackingValues;
-	if (typeof window !== "undefined" && typeof window.performance !== "undefined") try {
-		const resourceRE = /^https?:\/\/([^/]+)(\/api\/(?:unstable|2\d{3}-\d{2})\/graphql\.json(?=$|\?))?/;
-		const entries = performance.getEntriesByType("resource");
-		let matchedValues;
-		for (let i = entries.length - 1; i >= 0; i--) {
-			const entry = entries[i];
-			if (entry.initiatorType !== "fetch") continue;
-			const currentHost = window.location.host;
-			const match = entry.name.match(resourceRE);
-			if (!match) continue;
-			const [, matchedHost, sfapiPath] = match;
-			if (matchedHost === currentHost || sfapiPath && matchedHost?.endsWith(`.${currentHost}`)) {
-				const values = extractFromPerformanceEntry(entry);
-				if (values) {
-					matchedValues = values;
-					break;
-				}
-			}
-		}
-		if (matchedValues) trackingValues = matchedValues;
-		if (trackingValues) cachedTrackingValues.current = trackingValues;
-		else if (cachedTrackingValues.current) trackingValues = cachedTrackingValues.current;
-		if (!trackingValues) {
-			const navigationEntries = performance.getEntriesByType("navigation")[0];
-			trackingValues = extractFromPerformanceEntry(navigationEntries, false);
-		}
-	} catch {}
-	if (!trackingValues) {
-		const cookie = typeof arguments[0] === "string" ? arguments[0] : typeof document !== "undefined" ? document.cookie : "";
-		trackingValues = {
-			uniqueToken: cookie.match(/\b_shopify_y=([^;]+)/)?.[1] || "",
-			visitToken: cookie.match(/\b_shopify_s=([^;]+)/)?.[1] || "",
-			consent: cookie.match(/\b_tracking_consent=([^;]+)/)?.[1] || ""
-		};
-	}
-	return trackingValues;
-}
-function extractFromPerformanceEntry(entry, isConsentRequired = true) {
-	let uniqueToken = "";
-	let visitToken = "";
-	let consent = "";
-	const serverTiming = entry.serverTiming;
-	if (serverTiming && serverTiming.length >= 3) for (let i = serverTiming.length - 1; i >= 0; i--) {
-		const { name, description } = serverTiming[i];
-		if (!name || !description) continue;
-		if (name === "_y") uniqueToken = description;
-		else if (name === "_s") visitToken = description;
-		else if (name === "_cmp") consent = description;
-		if (uniqueToken && visitToken && consent) break;
-	}
-	return uniqueToken && visitToken && (isConsentRequired ? consent : true) ? {
-		uniqueToken,
-		visitToken,
-		consent
-	} : void 0;
+	const cookie = typeof arguments[0] === "string" ? arguments[0] : typeof document !== "undefined" ? document.cookie : "";
+	const customerPrivacy = typeof window === "undefined" ? void 0 : window.Shopify?.customerPrivacy;
+	const internal = customerPrivacy?.__internal;
+	const tokenOptions = {
+		generateFallback: customerPrivacy?.config?.asyncConsent === true,
+		tag: "hydrogen:classic"
+	};
+	return {
+		uniqueToken: internal?.uniqueToken ? internal.uniqueToken(tokenOptions) ?? "" : cookie.match(/\b_shopify_y=([^;]+)/)?.[1] ?? "",
+		visitToken: internal?.visitToken ? internal.visitToken(tokenOptions) ?? "" : cookie.match(/\b_shopify_s=([^;]+)/)?.[1] ?? "",
+		consent: customerPrivacy?.cachedConsent ?? cookie.match(/\b_tracking_consent=([^;]+)/)?.[1] ?? ""
+	};
 }
 //#endregion
 export { SHOPIFY_UNIQUE_TOKEN_HEADER, SHOPIFY_VISIT_TOKEN_HEADER, getTrackingValues };

package/dist/browser-prod/tracking-utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tracking-utils.mjs","names":[],"sources":["../../src/tracking-utils.ts"],"sourcesContent":["/** Storefront API header for VisitToken */\nexport const SHOPIFY_VISIT_TOKEN_HEADER = 'X-Shopify-VisitToken';\n/** Storefront API header for UniqueToken */\nexport const SHOPIFY_UNIQUE_TOKEN_HEADER = 'X-Shopify-UniqueToken';\n\ntype TrackingValues = {\n  /** Identifier for the unique user. Equivalent to the deprecated _shopify_y cookie */\n  uniqueToken: string;\n  /** Identifier for the current visit. Equivalent to the deprecated _shopify_s cookie */\n  visitToken: string;\n  /** Represents the consent given by the user or the default region consent configured in Admin */\n  consent: string;\n};\n\n// Cache values to avoid losing them when performance\n// entries are cleared from the buffer over time.\nexport const cachedTrackingValues: {\n  current: null | TrackingValues;\n} = {current: null};\n\n/**\n * Retrieves user session tracking values for analytics and marketing from the browser environment.\n * @publicDocs\n */\nexport function getTrackingValues(): TrackingValues {\n  // Overall behavior: Tracking values are returned in Server-Timing headers from\n  // Storefront API responses, and we want to find and return these tracking values.\n  //\n  // Search recent fetches for SFAPI requests matching either: same origin (proxy case)\n  // or a subdomain of the current host (eg: checkout subdomain, if there is no proxy).\n  // We consider SF API-like endpoints (/api/.../graphql.json) on subdomains, as well as\n  // any same-origin request. The reason for the latter is that Hydrogen server collects\n  // tracking values and returns them in any non-cached response, not just direct SF API\n  // responses. For example, a cart mutation in a server action could return tracking values.\n  //\n  // If we didn't find tracking values in fetch requests, we fall back to checking cached values,\n  // then the initial page navigation entry, and finally the deprecated `_shopify_s` and `_shopify_y`.\n\n  let trackingValues: TrackingValues | undefined;\n\n  if (\n    typeof window !== 'undefined' &&\n    typeof window.performance !== 'undefined'\n  ) {\n    try {\n      // RE to extract host and optionally match SFAPI pathname.\n      // Group 1: host (e.g. \"checkout.mystore.com\")\n      // Group 2: SFAPI path if present (e.g. \"/api/2024-01/graphql.json\")\n      const resourceRE =\n        /^https?:\\/\\/([^/]+)(\\/api\\/(?:unstable|2\\d{3}-\\d{2})\\/graphql\\.json(?=$|\\?))?/;\n\n      // Search backwards through resource entries to find the most recent match.\n      // Match criteria (first one with _y and _s values wins):\n      // - Same origin (exact host match) with tracking values, OR\n      // - Subdomain + SFAPI pathname with tracking values\n      const entries = performance.getEntriesByType(\n        'resource',\n      ) as PerformanceResourceTiming[];\n\n      let matchedValues: ReturnType<typeof extractFromPerformanceEntry>;\n\n      for (let i = entries.length - 1; i >= 0; i--) {\n        const entry = entries[i];\n\n        if (entry.initiatorType !== 'fetch') continue;\n\n        const currentHost = window.location.host;\n        const match = entry.name.match(resourceRE);\n        if (!match) continue;\n\n        const [, matchedHost, sfapiPath] = match;\n\n        const isMatch =\n          // Same origin (exact host match)\n          matchedHost === currentHost ||\n          // Subdomain with SFAPI path\n          (sfapiPath && matchedHost?.endsWith(`.${currentHost}`));\n\n        if (isMatch) {\n          const values = extractFromPerformanceEntry(entry);\n          if (values) {\n            matchedValues = values;\n            break;\n          }\n        }\n      }\n\n      if (matchedValues) {\n        trackingValues = matchedValues;\n      }\n\n      // Resource entries have a limited buffer and are removed over time.\n      // Cache the latest values for future calls if we find them.\n      // A cached resource entry is always newer than a navigation entry.\n      if (trackingValues) {\n        cachedTrackingValues.current = trackingValues;\n      } else if (cachedTrackingValues.current) {\n        // Fallback to cached values from previous calls:\n        trackingValues = cachedTrackingValues.current;\n      }\n\n      if (!trackingValues) {\n        // Fallback to navigation entry from full page rendering load:\n        const navigationEntries = performance.getEntriesByType(\n          'navigation',\n        )[0] as PerformanceNavigationTiming;\n\n        // Navigation entries might omit consent when the Hydrogen server generates it.\n        // In this case, we skip consent requirement and only extract _y and _s values.\n        trackingValues = extractFromPerformanceEntry(navigationEntries, false);\n      }\n    } catch {}\n  }\n\n  // Fallback to deprecated cookies to support transitioning:\n  if (!trackingValues) {\n    const cookie =\n      // Read from arguments to avoid declaring parameters in this function signature.\n      // This logic is only used internally from `getShopifyCookies` and will be deprecated.\n      typeof arguments[0] === 'string'\n        ? arguments[0]\n        : typeof document !== 'undefined'\n          ? document.cookie\n          : '';\n\n    trackingValues = {\n      uniqueToken: cookie.match(/\\b_shopify_y=([^;]+)/)?.[1] || '',\n      visitToken: cookie.match(/\\b_shopify_s=([^;]+)/)?.[1] || '',\n      consent: cookie.match(/\\b_tracking_consent=([^;]+)/)?.[1] || '',\n    };\n  }\n\n  return trackingValues;\n}\n\nfunction extractFromPerformanceEntry(\n  entry: PerformanceNavigationTiming | PerformanceResourceTiming,\n  isConsentRequired = true,\n): TrackingValues | undefined {\n  let uniqueToken = '';\n  let visitToken = '';\n  let consent = '';\n\n  const serverTiming = entry.serverTiming;\n  // Quick check: we need at least 3 entries (_y, _s, _cmp)\n  if (serverTiming && serverTiming.length >= 3) {\n    // Iterate backwards since our headers are typically at the end\n    for (let i = serverTiming.length - 1; i >= 0; i--) {\n      const {name, description} = serverTiming[i];\n      if (!name || !description) continue;\n\n      if (name === '_y') {\n        uniqueToken = description;\n      } else if (name === '_s') {\n        visitToken = description;\n      } else if (name === '_cmp') {\n        // _cmp (consent management platform) holds the consent value\n        // used by consent-tracking-api and privacy-banner scripts.\n        consent = description;\n      }\n\n      if (uniqueToken && visitToken && consent) break;\n    }\n  }\n\n  return uniqueToken && visitToken && (isConsentRequired ? consent : true)\n    ? {uniqueToken, visitToken, consent}\n    : undefined;\n}\n"],"mappings":";;AACA,IAAa,6BAA6B;;AAE1C,IAAa,8BAA8B;AAa3C,IAAa,uBAET,EAAC,SAAS,MAAK;;;;;AAMnB,SAAgB,oBAAoC;CAclD,IAAI;AAEJ,KACE,OAAO,WAAW,eAClB,OAAO,OAAO,gBAAgB,YAE9B,KAAI;EAIF,MAAM,aACJ;EAMF,MAAM,UAAU,YAAY,iBAC1B,WACD;EAED,IAAI;AAEJ,OAAK,IAAI,IAAI,QAAQ,SAAS,GAAG,KAAK,GAAG,KAAK;GAC5C,MAAM,QAAQ,QAAQ;AAEtB,OAAI,MAAM,kBAAkB,QAAS;GAErC,MAAM,cAAc,OAAO,SAAS;GACpC,MAAM,QAAQ,MAAM,KAAK,MAAM,WAAW;AAC1C,OAAI,CAAC,MAAO;GAEZ,MAAM,GAAG,aAAa,aAAa;AAQnC,OAJE,gBAAgB,eAEf,aAAa,aAAa,SAAS,IAAI,cAAc,EAE3C;IACX,MAAM,SAAS,4BAA4B,MAAM;AACjD,QAAI,QAAQ;AACV,qBAAgB;AAChB;;;;AAKN,MAAI,cACF,kBAAiB;AAMnB,MAAI,eACF,sBAAqB,UAAU;WACtB,qBAAqB,QAE9B,kBAAiB,qBAAqB;AAGxC,MAAI,CAAC,gBAAgB;GAEnB,MAAM,oBAAoB,YAAY,iBACpC,aACD,CAAC;AAIF,oBAAiB,4BAA4B,mBAAmB,MAAM;;SAElE;AAIV,KAAI,CAAC,gBAAgB;EACnB,MAAM,SAGJ,OAAO,UAAU,OAAO,WACpB,UAAU,KACV,OAAO,aAAa,cAClB,SAAS,SACT;AAER,mBAAiB;GACf,aAAa,OAAO,MAAM,uBAAuB,GAAG,MAAM;GAC1D,YAAY,OAAO,MAAM,uBAAuB,GAAG,MAAM;GACzD,SAAS,OAAO,MAAM,8BAA8B,GAAG,MAAM;GAC9D;;AAGH,QAAO;;AAGT,SAAS,4BACP,OACA,oBAAoB,MACQ;CAC5B,IAAI,cAAc;CAClB,IAAI,aAAa;CACjB,IAAI,UAAU;CAEd,MAAM,eAAe,MAAM;AAE3B,KAAI,gBAAgB,aAAa,UAAU,EAEzC,MAAK,IAAI,IAAI,aAAa,SAAS,GAAG,KAAK,GAAG,KAAK;EACjD,MAAM,EAAC,MAAM,gBAAe,aAAa;AACzC,MAAI,CAAC,QAAQ,CAAC,YAAa;AAE3B,MAAI,SAAS,KACX,eAAc;WACL,SAAS,KAClB,cAAa;WACJ,SAAS,OAGlB,WAAU;AAGZ,MAAI,eAAe,cAAc,QAAS;;AAI9C,QAAO,eAAe,eAAe,oBAAoB,UAAU,QAC/D;EAAC;EAAa;EAAY;EAAQ,GAClC,KAAA"}
+{"version":3,"file":"tracking-utils.mjs","names":[],"sources":["../../src/tracking-utils.ts"],"sourcesContent":["/** Storefront API header for VisitToken */\nexport const SHOPIFY_VISIT_TOKEN_HEADER = 'X-Shopify-VisitToken';\n/** Storefront API header for UniqueToken */\nexport const SHOPIFY_UNIQUE_TOKEN_HEADER = 'X-Shopify-UniqueToken';\n\ntype TrackingValues = {\n  /** Identifier for the unique user. Equivalent to the deprecated _shopify_y cookie */\n  uniqueToken: string;\n  /** Identifier for the current visit. Equivalent to the deprecated _shopify_s cookie */\n  visitToken: string;\n  /** Represents the consent given by the user or the default region consent configured in Admin */\n  consent: string;\n};\n\n// Keep the consent-tracking-api token interface out of Hydrogen's public\n// global types since it could change in the future.\ntype CustomerPrivacyWithTracking = {\n  config?: {asyncConsent?: boolean};\n  cachedConsent?: string;\n  __internal?: {\n    uniqueToken?: (options?: {\n      generateFallback?: boolean;\n      tag?: string;\n    }) => string | undefined;\n    visitToken?: (options?: {\n      generateFallback?: boolean;\n      tag?: string;\n    }) => string | undefined;\n  };\n};\n\n/**\n * Retrieves user session tracking values for analytics and marketing from the\n * browser environment. Customer Privacy API token readers are authoritative\n * when available, including when consent denies tracking. Deprecated\n * `_shopify_y`/`_shopify_s` cookies are read only without an API token reader.\n * Consent comes from CTA's cache or the legacy `_tracking_consent` cookie.\n * @publicDocs\n */\nexport function getTrackingValues(): TrackingValues {\n  const cookie =\n    // Read from arguments to avoid declaring parameters in this function signature.\n    // This logic is only used internally from `getShopifyCookies` and will be deprecated.\n    typeof arguments[0] === 'string'\n      ? arguments[0]\n      : typeof document !== 'undefined'\n        ? document.cookie\n        : '';\n\n  const customerPrivacy =\n    typeof window === 'undefined'\n      ? undefined\n      : (window as {Shopify?: {customerPrivacy?: CustomerPrivacyWithTracking}})\n          .Shopify?.customerPrivacy;\n\n  const internal = customerPrivacy?.__internal;\n  // Async consent owns initialization and suppresses fallback generation until\n  // it is loaded. Afterwards CTA can refresh expired tokens, as in preview.\n  // Standalone hydrogen-react's explicit consent fetch keeps its previous policy.\n  const tokenOptions = {\n    generateFallback: customerPrivacy?.config?.asyncConsent === true,\n    tag: 'hydrogen:classic',\n  };\n\n  return {\n    // An installed CTA reader is authoritative, including undefined on denial.\n    // Falling through to a legacy cookie could restore a disallowed token.\n    uniqueToken: internal?.uniqueToken\n      ? (internal.uniqueToken(tokenOptions) ?? '')\n      : (cookie.match(/\\b_shopify_y=([^;]+)/)?.[1] ?? ''),\n    visitToken: internal?.visitToken\n      ? (internal.visitToken(tokenOptions) ?? '')\n      : (cookie.match(/\\b_shopify_s=([^;]+)/)?.[1] ?? ''),\n    consent:\n      customerPrivacy?.cachedConsent ??\n      cookie.match(/\\b_tracking_consent=([^;]+)/)?.[1] ??\n      '',\n  };\n}\n"],"mappings":";;AACA,IAAa,6BAA6B;;AAE1C,IAAa,8BAA8B;;;;;;;;;AAoC3C,SAAgB,oBAAoC;CAClD,MAAM,SAGJ,OAAO,UAAU,OAAO,WACpB,UAAU,KACV,OAAO,aAAa,cAClB,SAAS,SACT;CAER,MAAM,kBACJ,OAAO,WAAW,cACd,KAAA,IACC,OACE,SAAS;CAElB,MAAM,WAAW,iBAAiB;CAIlC,MAAM,eAAe;EACnB,kBAAkB,iBAAiB,QAAQ,iBAAiB;EAC5D,KAAK;EACN;AAED,QAAO;EAGL,aAAa,UAAU,cAClB,SAAS,YAAY,aAAa,IAAI,KACtC,OAAO,MAAM,uBAAuB,GAAG,MAAM;EAClD,YAAY,UAAU,aACjB,SAAS,WAAW,aAAa,IAAI,KACrC,OAAO,MAAM,uBAAuB,GAAG,MAAM;EAClD,SACE,iBAAiB,iBACjB,OAAO,MAAM,8BAA8B,GAAG,MAC9C;EACH"}