@shopify/hydrogen-react 2026.4.1 → 2026.4.2

package/dist/browser-dev/useShopifyCookies.mjs

@@ -1,146 +1,131 @@
-import { useEffect, useState, useRef } from "react";
-import { stringify } from "worktop/cookie";
-import { SHOPIFY_Y, SHOPIFY_S } from "./cart-constants.mjs";
+import { SHOPIFY_S, SHOPIFY_Y } from "./cart-constants.mjs";
+import { SHOPIFY_UNIQUE_TOKEN_HEADER, SHOPIFY_VISIT_TOKEN_HEADER, getTrackingValues } from "./tracking-utils.mjs";
 import { buildUUID } from "./cookies-utils.mjs";
-import { getTrackingValues, SHOPIFY_UNIQUE_TOKEN_HEADER, SHOPIFY_VISIT_TOKEN_HEADER } from "./tracking-utils.mjs";
-const longTermLength = 60 * 60 * 24 * 360 * 1;
-const shortTermLength = 60 * 30;
+import { useEffect, useRef, useState } from "react";
+import { stringify } from "worktop/cookie";
+//#region src/useShopifyCookies.tsx
+var longTermLength = 3600 * 24 * 360 * 1;
+var shortTermLength = 1800;
+/**
+* Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent
+* for backward compatibility support.
+*
+* If `fetchTrackingValues` is true, it makes a request to Storefront API
+* to fetch or refresh Shopiy analytics and marketing cookies and tracking values.
+* Generally speaking, this should only be needed if you're not using Hydrogen's
+* built-in analytics components and hooks that already handle this automatically.
+* For example, set it to `true` if you are using `hydrogen-react` only with
+* a different framework and still need to make a same-domain request to
+* Storefront API to set cookies.
+*
+* If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.
+* Useful when you only want to use the newer tracking values and not rely on the deprecated ones.
+*
+* @returns `true` when cookies are set and ready.
+* @publicDocs
+*/
 function useShopifyCookies(options) {
-  const {
-    hasUserConsent,
-    domain = "",
-    checkoutDomain = "",
-    storefrontAccessToken,
-    fetchTrackingValues,
-    ignoreDeprecatedCookies = false
-  } = options || {};
-  const coreCookiesReady = useCoreShopifyCookies({
-    storefrontAccessToken,
-    fetchTrackingValues,
-    checkoutDomain
-  });
-  useEffect(() => {
-    if (ignoreDeprecatedCookies || !coreCookiesReady) return;
-    let currentDomain = domain || window.location.host;
-    if (checkoutDomain) {
-      const checkoutDomainParts = checkoutDomain.split(".").reverse();
-      const currentDomainParts = currentDomain.split(".").reverse();
-      const sameDomainParts = [];
-      checkoutDomainParts.forEach((part, index) => {
-        if (part === currentDomainParts[index]) {
-          sameDomainParts.push(part);
-        }
-      });
-      currentDomain = sameDomainParts.reverse().join(".");
-    }
-    if (/^localhost/.test(currentDomain)) currentDomain = "";
-    const domainWithLeadingDot = currentDomain ? /^\./.test(currentDomain) ? currentDomain : `.${currentDomain}` : "";
-    if (hasUserConsent) {
-      const trackingValues = getTrackingValues();
-      if ((trackingValues.uniqueToken || trackingValues.visitToken || "").startsWith("00000000-")) {
-        return;
-      }
-      setCookie(
-        SHOPIFY_Y,
-        trackingValues.uniqueToken || buildUUID(),
-        longTermLength,
-        domainWithLeadingDot
-      );
-      setCookie(
-        SHOPIFY_S,
-        trackingValues.visitToken || buildUUID(),
-        shortTermLength,
-        domainWithLeadingDot
-      );
-    } else {
-      setCookie(SHOPIFY_Y, "", 0, domainWithLeadingDot);
-      setCookie(SHOPIFY_S, "", 0, domainWithLeadingDot);
-    }
-  }, [
-    coreCookiesReady,
-    hasUserConsent,
-    domain,
-    checkoutDomain,
-    ignoreDeprecatedCookies
-  ]);
-  return coreCookiesReady;
+	const { hasUserConsent, domain = "", checkoutDomain = "", storefrontAccessToken, fetchTrackingValues, ignoreDeprecatedCookies = false } = options || {};
+	const coreCookiesReady = useCoreShopifyCookies({
+		storefrontAccessToken,
+		fetchTrackingValues,
+		checkoutDomain
+	});
+	useEffect(() => {
+		if (ignoreDeprecatedCookies || !coreCookiesReady) return;
+		/**
+		* Setting cookie with domain
+		*
+		* If no domain is provided, the cookie will be set for the current host.
+		* For Shopify, we need to ensure this domain is set with a leading dot.
+		*/
+		let currentDomain = domain || window.location.host;
+		if (checkoutDomain) {
+			const checkoutDomainParts = checkoutDomain.split(".").reverse();
+			const currentDomainParts = currentDomain.split(".").reverse();
+			const sameDomainParts = [];
+			checkoutDomainParts.forEach((part, index) => {
+				if (part === currentDomainParts[index]) sameDomainParts.push(part);
+			});
+			currentDomain = sameDomainParts.reverse().join(".");
+		}
+		if (/^localhost/.test(currentDomain)) currentDomain = "";
+		const domainWithLeadingDot = currentDomain ? /^\./.test(currentDomain) ? currentDomain : `.${currentDomain}` : "";
+		/**
+		* Set user and session cookies and refresh the expiry time
+		*/
+		if (hasUserConsent) {
+			const trackingValues = getTrackingValues();
+			if ((trackingValues.uniqueToken || trackingValues.visitToken || "").startsWith("00000000-")) return;
+			setCookie(SHOPIFY_Y, trackingValues.uniqueToken || buildUUID(), longTermLength, domainWithLeadingDot);
+			setCookie(SHOPIFY_S, trackingValues.visitToken || buildUUID(), shortTermLength, domainWithLeadingDot);
+		} else {
+			setCookie(SHOPIFY_Y, "", 0, domainWithLeadingDot);
+			setCookie(SHOPIFY_S, "", 0, domainWithLeadingDot);
+		}
+	}, [
+		coreCookiesReady,
+		hasUserConsent,
+		domain,
+		checkoutDomain,
+		ignoreDeprecatedCookies
+	]);
+	return coreCookiesReady;
 }
 function setCookie(name, value, maxage, domain) {
-  document.cookie = stringify(name, value, {
-    maxage,
-    domain,
-    samesite: "Lax",
-    path: "/"
-  });
+	document.cookie = stringify(name, value, {
+		maxage,
+		domain,
+		samesite: "Lax",
+		path: "/"
+	});
 }
 async function fetchTrackingValuesFromBrowser(storefrontAccessToken, storefrontApiDomain = "") {
-  const { uniqueToken, visitToken } = getTrackingValues();
-  const response = await fetch(
-    // TODO: update this endpoint when it becomes stable
-    `${storefrontApiDomain.replace(/\/+$/, "")}/api/unstable/graphql.json`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        ...storefrontAccessToken && {
-          "X-Shopify-Storefront-Access-Token": storefrontAccessToken
-        },
-        ...visitToken || uniqueToken ? {
-          [SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,
-          [SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken
-        } : void 0
-      },
-      body: JSON.stringify({
-        query: (
-          // This query ensures we get _cmp (consent) server-timing header, which is not available in other queries.
-          // This value can be passed later to consent-tracking-api and privacy-banner scripts to avoid extra requests.
-          "query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }"
-        )
-      })
-    }
-  );
-  if (!response.ok) {
-    throw new Error(
-      `Failed to fetch consent from browser: ${response.status} ${response.statusText}`
-    );
-  }
-  await response.json();
-  getTrackingValues();
+	const { uniqueToken, visitToken } = getTrackingValues();
+	const response = await fetch(`${storefrontApiDomain.replace(/\/+$/, "")}/api/unstable/graphql.json`, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			...storefrontAccessToken && { "X-Shopify-Storefront-Access-Token": storefrontAccessToken },
+			...visitToken || uniqueToken ? {
+				[SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,
+				[SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken
+			} : void 0
+		},
+		body: JSON.stringify({ query: "query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }" })
+	});
+	if (!response.ok) throw new Error(`Failed to fetch consent from browser: ${response.status} ${response.statusText}`);
+	await response.json();
+	getTrackingValues();
 }
-function useCoreShopifyCookies({
-  checkoutDomain,
-  storefrontAccessToken,
-  fetchTrackingValues = false
-}) {
-  const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);
-  const hasFetchedTrackingValues = useRef(false);
-  useEffect(() => {
-    if (!fetchTrackingValues) {
-      setCookiesReady(true);
-      return;
-    }
-    if (hasFetchedTrackingValues.current) return;
-    hasFetchedTrackingValues.current = true;
-    fetchTrackingValuesFromBrowser(storefrontAccessToken).catch(
-      (error) => checkoutDomain ? (
-        // Retry with checkout domain if available to at least
-        // get the server-timing values for tracking.
-        fetchTrackingValuesFromBrowser(
-          storefrontAccessToken,
-          checkoutDomain
-        )
-      ) : Promise.reject(error)
-    ).catch((error) => {
-      console.warn(
-        "[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: " + (error instanceof Error ? error.message : String(error))
-      );
-    }).finally(() => {
-      setCookiesReady(true);
-    });
-  }, [checkoutDomain, fetchTrackingValues, storefrontAccessToken]);
-  return cookiesReady;
+/**
+* Gets http-only cookies from Storefront API via same-origin fetch request.
+* Falls back to checkout domain if provided to at least obtain the tracking
+* values via server-timing headers.
+*/
+function useCoreShopifyCookies({ checkoutDomain, storefrontAccessToken, fetchTrackingValues = false }) {
+	const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);
+	const hasFetchedTrackingValues = useRef(false);
+	useEffect(() => {
+		if (!fetchTrackingValues) {
+			setCookiesReady(true);
+			return;
+		}
+		if (hasFetchedTrackingValues.current) return;
+		hasFetchedTrackingValues.current = true;
+		fetchTrackingValuesFromBrowser(storefrontAccessToken).catch((error) => checkoutDomain ? fetchTrackingValuesFromBrowser(storefrontAccessToken, checkoutDomain) : Promise.reject(error)).catch((error) => {
+			console.warn("[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: " + (error instanceof Error ? error.message : String(error)));
+		}).finally(() => {
+			setCookiesReady(true);
+		});
+	}, [
+		checkoutDomain,
+		fetchTrackingValues,
+		storefrontAccessToken
+	]);
+	return cookiesReady;
 }
-export {
-  useShopifyCookies
-};
-//# sourceMappingURL=useShopifyCookies.mjs.map
+//#endregion
+export { useShopifyCookies };
+
+//# sourceMappingURL=useShopifyCookies.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useShopifyCookies.mjs","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"],"names":[],"mappings":"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"}
+{"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"}

package/dist/browser-prod/AddToCartButton.mjs

@@ -1,76 +1,65 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from "react";
 import { useCart } from "./CartProvider.mjs";
 import { useProduct } from "./ProductProvider.mjs";
 import { BaseButton } from "./BaseButton.mjs";
+import { useCallback, useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/AddToCartButton.tsx
+/**
+* The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
+* It must be a descendent of the `CartProvider` component.
+* @publicDocs
+*/
 function AddToCartButton(props) {
-  const [addingItem, setAddingItem] = useState(false);
-  const {
-    variantId: explicitVariantId,
-    quantity = 1,
-    attributes,
-    sellingPlanId,
-    onClick,
-    children,
-    accessibleAddingToCartLabel,
-    parent,
-    ...passthroughProps
-  } = props;
-  const { status, linesAdd } = useCart();
-  const { selectedVariant } = useProduct();
-  const variantId = explicitVariantId ?? (selectedVariant == null ? void 0 : selectedVariant.id) ?? "";
-  const disabled = explicitVariantId === null || variantId === "" || selectedVariant === null || addingItem || // Only certain 'as' types such as 'button' contain `disabled`
-  passthroughProps.disabled;
-  useEffect(() => {
-    if (addingItem && status === "idle") {
-      setAddingItem(false);
-    }
-  }, [status, addingItem]);
-  const handleAddItem = useCallback(() => {
-    setAddingItem(true);
-    linesAdd([
-      {
-        quantity,
-        merchandiseId: variantId || "",
-        attributes,
-        parent,
-        sellingPlanId
-      }
-    ]);
-  }, [linesAdd, quantity, variantId, attributes, sellingPlanId, parent]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      BaseButton,
-      {
-        ...passthroughProps,
-        disabled,
-        onClick,
-        defaultOnClick: handleAddItem,
-        children
-      }
-    ),
-    accessibleAddingToCartLabel ? /* @__PURE__ */ jsx(
-      "p",
-      {
-        style: {
-          position: "absolute",
-          width: "1px",
-          height: "1px",
-          padding: "0",
-          margin: "-1px",
-          overflow: "hidden",
-          clip: "rect(0, 0, 0, 0)",
-          whiteSpace: "nowrap",
-          borderWidth: "0"
-        },
-        role: "alert",
-        "aria-live": "assertive",
-        children: addingItem ? accessibleAddingToCartLabel : null
-      }
-    ) : null
-  ] });
+	const [addingItem, setAddingItem] = useState(false);
+	const { variantId: explicitVariantId, quantity = 1, attributes, sellingPlanId, onClick, children, accessibleAddingToCartLabel, parent, ...passthroughProps } = props;
+	const { status, linesAdd } = useCart();
+	const { selectedVariant } = useProduct();
+	const variantId = explicitVariantId ?? selectedVariant?.id ?? "";
+	const disabled = explicitVariantId === null || variantId === "" || selectedVariant === null || addingItem || passthroughProps.disabled;
+	useEffect(() => {
+		if (addingItem && status === "idle") setAddingItem(false);
+	}, [status, addingItem]);
+	const handleAddItem = useCallback(() => {
+		setAddingItem(true);
+		linesAdd([{
+			quantity,
+			merchandiseId: variantId || "",
+			attributes,
+			parent,
+			sellingPlanId
+		}]);
+	}, [
+		linesAdd,
+		quantity,
+		variantId,
+		attributes,
+		sellingPlanId,
+		parent
+	]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BaseButton, {
+		...passthroughProps,
+		disabled,
+		onClick,
+		defaultOnClick: handleAddItem,
+		children
+	}), accessibleAddingToCartLabel ? /* @__PURE__ */ jsx("p", {
+		style: {
+			position: "absolute",
+			width: "1px",
+			height: "1px",
+			padding: "0",
+			margin: "-1px",
+			overflow: "hidden",
+			clip: "rect(0, 0, 0, 0)",
+			whiteSpace: "nowrap",
+			borderWidth: "0"
+		},
+		role: "alert",
+		"aria-live": "assertive",
+		children: addingItem ? accessibleAddingToCartLabel : null
+	}) : null] });
 }
-export {
-  AddToCartButton
-};
-//# sourceMappingURL=AddToCartButton.mjs.map
+//#endregion
+export { AddToCartButton };
+
+//# sourceMappingURL=AddToCartButton.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {\n  BaseButton,\n  type CustomBaseButtonProps,\n  type BaseButtonProps,\n} from './BaseButton.js';\nimport * as React from 'react';\nimport {CartLineParentInput} from './storefront-api-types.js';\n\nexport interface AddToCartButtonPropsBase {\n  /** An array of cart line attributes that belong to the item being added to the cart. */\n  attributes?: {\n    key: string;\n    value: string;\n  }[];\n  /** The ID of the variant. */\n  variantId?: string | null;\n  /** The item quantity. */\n  quantity?: number;\n  /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n  accessibleAddingToCartLabel?: string;\n  /** The parent line item of the item being added to the cart. Used for nested cart lines. */\n  parent?: CartLineParentInput;\n  /** The selling plan ID of the subscription variant */\n  sellingPlanId?: string;\n}\n\nexport type AddToCartButtonProps<AsType extends React.ElementType = 'button'> =\n  AddToCartButtonPropsBase & BaseButtonProps<AsType>;\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n * @publicDocs\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n  props: AddToCartButtonProps<AsType>,\n): JSX.Element {\n  const [addingItem, setAddingItem] = useState<boolean>(false);\n  const {\n    variantId: explicitVariantId,\n    quantity = 1,\n    attributes,\n    sellingPlanId,\n    onClick,\n    children,\n    accessibleAddingToCartLabel,\n    parent,\n    ...passthroughProps\n  } = props;\n  const {status, linesAdd} = useCart();\n  const {selectedVariant} = useProduct();\n  const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n  const disabled =\n    explicitVariantId === null ||\n    variantId === '' ||\n    selectedVariant === null ||\n    addingItem ||\n    // Only certain 'as' types such as 'button' contain `disabled`\n    (passthroughProps as {disabled?: boolean}).disabled;\n\n  useEffect(() => {\n    if (addingItem && status === 'idle') {\n      setAddingItem(false);\n    }\n  }, [status, addingItem]);\n\n  const handleAddItem = useCallback(() => {\n    setAddingItem(true);\n    linesAdd([\n      {\n        quantity,\n        merchandiseId: variantId || '',\n        attributes,\n        parent,\n        sellingPlanId,\n      },\n    ]);\n  }, [linesAdd, quantity, variantId, attributes, sellingPlanId, parent]);\n\n  return (\n    <>\n      <BaseButton\n        {...passthroughProps}\n        disabled={disabled}\n        onClick={onClick}\n        defaultOnClick={handleAddItem}\n      >\n        {children}\n      </BaseButton>\n      {accessibleAddingToCartLabel ? (\n        <p\n          style={{\n            position: 'absolute',\n            width: '1px',\n            height: '1px',\n            padding: '0',\n            margin: '-1px',\n            overflow: 'hidden',\n            clip: 'rect(0, 0, 0, 0)',\n            whiteSpace: 'nowrap',\n            borderWidth: '0',\n          }}\n          role=\"alert\"\n          aria-live=\"assertive\"\n        >\n          {addingItem ? accessibleAddingToCartLabel : null}\n        </p>\n      ) : null}\n    </>\n  );\n}\n\n// This is only for documentation purposes, and it is not used in the code.\n/** @publicDocs */\nexport interface AddToCartButtonPropsForDocs<\n  AsType extends React.ElementType = 'button',\n>\n  extends AddToCartButtonPropsBase, CustomBaseButtonProps<AsType> {}\n"],"names":[],"mappings":";;;;;AAqCO,SAAS,gBACd,OACa;AACb,QAAM,CAAC,YAAY,aAAa,IAAI,SAAkB,KAAK;AAC3D,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,EAAC,QAAQ,SAAA,IAAY,QAAA;AAC3B,QAAM,EAAC,gBAAA,IAAmB,WAAA;AAC1B,QAAM,YAAY,sBAAqB,mDAAiB,OAAM;AAC9D,QAAM,WACJ,sBAAsB,QACtB,cAAc,MACd,oBAAoB,QACpB;AAAA,EAEC,iBAA0C;AAE7C,YAAU,MAAM;AACd,QAAI,cAAc,WAAW,QAAQ;AACnC,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,QAAQ,UAAU,CAAC;AAEvB,QAAM,gBAAgB,YAAY,MAAM;AACtC,kBAAc,IAAI;AAClB,aAAS;AAAA,MACP;AAAA,QACE;AAAA,QACA,eAAe,aAAa;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH,GAAG,CAAC,UAAU,UAAU,WAAW,YAAY,eAAe,MAAM,CAAC;AAErE,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAEf;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,8BACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,MAAM;AAAA,UACN,YAAY;AAAA,UACZ,aAAa;AAAA,QAAA;AAAA,QAEf,MAAK;AAAA,QACL,aAAU;AAAA,QAET,uBAAa,8BAA8B;AAAA,MAAA;AAAA,IAAA,IAE5C;AAAA,EAAA,GACN;AAEJ;"}
+{"version":3,"file":"AddToCartButton.mjs","names":[],"sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {\n  BaseButton,\n  type CustomBaseButtonProps,\n  type BaseButtonProps,\n} from './BaseButton.js';\nimport * as React from 'react';\nimport {CartLineParentInput} from './storefront-api-types.js';\n\nexport interface AddToCartButtonPropsBase {\n  /** An array of cart line attributes that belong to the item being added to the cart. */\n  attributes?: {\n    key: string;\n    value: string;\n  }[];\n  /** The ID of the variant. */\n  variantId?: string | null;\n  /** The item quantity. */\n  quantity?: number;\n  /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n  accessibleAddingToCartLabel?: string;\n  /** The parent line item of the item being added to the cart. Used for nested cart lines. */\n  parent?: CartLineParentInput;\n  /** The selling plan ID of the subscription variant */\n  sellingPlanId?: string;\n}\n\nexport type AddToCartButtonProps<AsType extends React.ElementType = 'button'> =\n  AddToCartButtonPropsBase & BaseButtonProps<AsType>;\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n * @publicDocs\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n  props: AddToCartButtonProps<AsType>,\n): JSX.Element {\n  const [addingItem, setAddingItem] = useState<boolean>(false);\n  const {\n    variantId: explicitVariantId,\n    quantity = 1,\n    attributes,\n    sellingPlanId,\n    onClick,\n    children,\n    accessibleAddingToCartLabel,\n    parent,\n    ...passthroughProps\n  } = props;\n  const {status, linesAdd} = useCart();\n  const {selectedVariant} = useProduct();\n  const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n  const disabled =\n    explicitVariantId === null ||\n    variantId === '' ||\n    selectedVariant === null ||\n    addingItem ||\n    // Only certain 'as' types such as 'button' contain `disabled`\n    (passthroughProps as {disabled?: boolean}).disabled;\n\n  useEffect(() => {\n    if (addingItem && status === 'idle') {\n      setAddingItem(false);\n    }\n  }, [status, addingItem]);\n\n  const handleAddItem = useCallback(() => {\n    setAddingItem(true);\n    linesAdd([\n      {\n        quantity,\n        merchandiseId: variantId || '',\n        attributes,\n        parent,\n        sellingPlanId,\n      },\n    ]);\n  }, [linesAdd, quantity, variantId, attributes, sellingPlanId, parent]);\n\n  return (\n    <>\n      <BaseButton\n        {...passthroughProps}\n        disabled={disabled}\n        onClick={onClick}\n        defaultOnClick={handleAddItem}\n      >\n        {children}\n      </BaseButton>\n      {accessibleAddingToCartLabel ? (\n        <p\n          style={{\n            position: 'absolute',\n            width: '1px',\n            height: '1px',\n            padding: '0',\n            margin: '-1px',\n            overflow: 'hidden',\n            clip: 'rect(0, 0, 0, 0)',\n            whiteSpace: 'nowrap',\n            borderWidth: '0',\n          }}\n          role=\"alert\"\n          aria-live=\"assertive\"\n        >\n          {addingItem ? accessibleAddingToCartLabel : null}\n        </p>\n      ) : null}\n    </>\n  );\n}\n\n// This is only for documentation purposes, and it is not used in the code.\n/** @publicDocs */\nexport interface AddToCartButtonPropsForDocs<\n  AsType extends React.ElementType = 'button',\n>\n  extends AddToCartButtonPropsBase, CustomBaseButtonProps<AsType> {}\n"],"mappings":";;;;;;;;;;;AAqCA,SAAgB,gBACd,OACa;CACb,MAAM,CAAC,YAAY,iBAAiB,SAAkB,MAAM;CAC5D,MAAM,EACJ,WAAW,mBACX,WAAW,GACX,YACA,eACA,SACA,UACA,6BACA,QACA,GAAG,qBACD;CACJ,MAAM,EAAC,QAAQ,aAAY,SAAS;CACpC,MAAM,EAAC,oBAAmB,YAAY;CACtC,MAAM,YAAY,qBAAqB,iBAAiB,MAAM;CAC9D,MAAM,WACJ,sBAAsB,QACtB,cAAc,MACd,oBAAoB,QACpB,cAEC,iBAA0C;AAE7C,iBAAgB;AACd,MAAI,cAAc,WAAW,OAC3B,eAAc,MAAM;IAErB,CAAC,QAAQ,WAAW,CAAC;CAExB,MAAM,gBAAgB,kBAAkB;AACtC,gBAAc,KAAK;AACnB,WAAS,CACP;GACE;GACA,eAAe,aAAa;GAC5B;GACA;GACA;GACD,CACF,CAAC;IACD;EAAC;EAAU;EAAU;EAAW;EAAY;EAAe;EAAO,CAAC;AAEtE,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,YAAD;EACE,GAAI;EACM;EACD;EACT,gBAAgB;EAEf;EACU,CAAA,EACZ,8BACC,oBAAC,KAAD;EACE,OAAO;GACL,UAAU;GACV,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,UAAU;GACV,MAAM;GACN,YAAY;GACZ,aAAa;GACd;EACD,MAAK;EACL,aAAU;YAET,aAAa,8BAA8B;EAC1C,CAAA,GACF,KACH,EAAA,CAAA"}

package/dist/browser-prod/BaseButton.mjs

@@ -1,29 +1,23 @@
-import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/BaseButton.tsx
 function BaseButton(props) {
-  const {
-    as,
-    onClick,
-    defaultOnClick,
-    children,
-    buttonRef,
-    ...passthroughProps
-  } = props;
-  const handleOnClick = useCallback(
-    (event) => {
-      if (onClick) {
-        const clickShouldContinue = onClick(event);
-        if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
-          return;
-      }
-      defaultOnClick == null ? void 0 : defaultOnClick(event);
-    },
-    [defaultOnClick, onClick]
-  );
-  const Component = as || "button";
-  return /* @__PURE__ */ jsx(Component, { ref: buttonRef, onClick: handleOnClick, ...passthroughProps, children });
+	const { as, onClick, defaultOnClick, children, buttonRef, ...passthroughProps } = props;
+	const handleOnClick = useCallback((event) => {
+		if (onClick) {
+			const clickShouldContinue = onClick(event);
+			if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || event?.defaultPrevented) return;
+		}
+		defaultOnClick?.(event);
+	}, [defaultOnClick, onClick]);
+	return /* @__PURE__ */ jsx(as || "button", {
+		ref: buttonRef,
+		onClick: handleOnClick,
+		...passthroughProps,
+		children
+	});
 }
-export {
-  BaseButton
-};
-//# sourceMappingURL=BaseButton.mjs.map
+//#endregion
+export { BaseButton };
+
+//# sourceMappingURL=BaseButton.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.mjs","sources":["../../src/BaseButton.tsx"],"sourcesContent":["import {ReactNode, Ref, useCallback} from 'react';\n\nexport interface CustomBaseButtonProps<AsType> {\n  /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n  as?: AsType;\n  /** Any ReactNode elements. */\n  children: ReactNode;\n  /** Click event handler. Default behaviour triggers unless prevented */\n  onClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => void | boolean;\n  /** A default `onClick` behavior */\n  defaultOnClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => void | boolean;\n  /** A `ref` to the underlying button */\n  buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n  CustomBaseButtonProps<AsType> &\n    (AsType extends keyof React.JSX.IntrinsicElements\n      ? Omit<\n          React.ComponentPropsWithoutRef<AsType>,\n          keyof CustomBaseButtonProps<AsType>\n        >\n      : React.ComponentPropsWithoutRef<AsType>);\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n  props: BaseButtonProps<AsType>,\n): JSX.Element {\n  const {\n    as,\n    onClick,\n    defaultOnClick,\n    children,\n    buttonRef,\n    ...passthroughProps\n  } = props;\n\n  const handleOnClick = useCallback(\n    (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        const clickShouldContinue = onClick(event);\n        if (\n          (typeof clickShouldContinue === 'boolean' &&\n            clickShouldContinue === false) ||\n          event?.defaultPrevented\n        )\n          return;\n      }\n\n      defaultOnClick?.(event);\n    },\n    [defaultOnClick, onClick],\n  );\n\n  const Component = as || 'button';\n\n  return (\n    <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n      {children}\n    </Component>\n  );\n}\n"],"names":[],"mappings":";;AA4BO,SAAS,WACd,OACa;AACb,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA4D;AAC3D,UAAI,SAAS;AACX,cAAM,sBAAsB,QAAQ,KAAK;AACzC,YACG,OAAO,wBAAwB,aAC9B,wBAAwB,UAC1B,+BAAO;AAEP;AAAA,MACJ;AAEA,uDAAiB;AAAA,IACnB;AAAA,IACA,CAAC,gBAAgB,OAAO;AAAA,EAAA;AAG1B,QAAM,YAAY,MAAM;AAExB,SACE,oBAAC,aAAU,KAAK,WAAW,SAAS,eAAgB,GAAG,kBACpD,UACH;AAEJ;"}
+{"version":3,"file":"BaseButton.mjs","names":[],"sources":["../../src/BaseButton.tsx"],"sourcesContent":["import {ReactNode, Ref, useCallback} from 'react';\n\nexport interface CustomBaseButtonProps<AsType> {\n  /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n  as?: AsType;\n  /** Any ReactNode elements. */\n  children: ReactNode;\n  /** Click event handler. Default behaviour triggers unless prevented */\n  onClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => void | boolean;\n  /** A default `onClick` behavior */\n  defaultOnClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => void | boolean;\n  /** A `ref` to the underlying button */\n  buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n  CustomBaseButtonProps<AsType> &\n    (AsType extends keyof React.JSX.IntrinsicElements\n      ? Omit<\n          React.ComponentPropsWithoutRef<AsType>,\n          keyof CustomBaseButtonProps<AsType>\n        >\n      : React.ComponentPropsWithoutRef<AsType>);\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n  props: BaseButtonProps<AsType>,\n): JSX.Element {\n  const {\n    as,\n    onClick,\n    defaultOnClick,\n    children,\n    buttonRef,\n    ...passthroughProps\n  } = props;\n\n  const handleOnClick = useCallback(\n    (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        const clickShouldContinue = onClick(event);\n        if (\n          (typeof clickShouldContinue === 'boolean' &&\n            clickShouldContinue === false) ||\n          event?.defaultPrevented\n        )\n          return;\n      }\n\n      defaultOnClick?.(event);\n    },\n    [defaultOnClick, onClick],\n  );\n\n  const Component = as || 'button';\n\n  return (\n    <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n      {children}\n    </Component>\n  );\n}\n"],"mappings":";;;AA4BA,SAAgB,WACd,OACa;CACb,MAAM,EACJ,IACA,SACA,gBACA,UACA,WACA,GAAG,qBACD;CAEJ,MAAM,gBAAgB,aACnB,UAA4D;AAC3D,MAAI,SAAS;GACX,MAAM,sBAAsB,QAAQ,MAAM;AAC1C,OACG,OAAO,wBAAwB,aAC9B,wBAAwB,SAC1B,OAAO,iBAEP;;AAGJ,mBAAiB,MAAM;IAEzB,CAAC,gBAAgB,QAAQ,CAC1B;AAID,QACE,oBAHgB,MAAM,UAGtB;EAAW,KAAK;EAAW,SAAS;EAAe,GAAI;EACpD;EACS,CAAA"}