@shopify/hydrogen-react 2026.4.1 → 2026.4.2

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

@@ -1 +1 @@
-{"version":3,"file":"useMachine.mjs","sources":["../../src/useMachine.ts"],"sourcesContent":["// Inlined React binding for xstate/fsm's state machine interpreter.\n//\n// This replaces the xstate/react/fsm entrypoint, which had no official version\n// supporting both React 19 and xstate/fsm. By owning this hook, we eliminate\n// the xstate/react dependency (and its React version peer dep constraint)\n// while keeping xstate/fsm and the cart state machine definition unchanged.\n//\n// Adapted from xstate/react v3.2.1/fsm (MIT license, Stately/xstate).\n// Copyright (c) 2015 David Khourshid\nimport {\n  createMachine,\n  interpret,\n  InterpreterStatus,\n  StateMachine,\n  EventObject,\n} from '@xstate/fsm';\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useSyncExternalStore,\n} from 'react';\n\n// useLayoutEffect in the browser (sync after DOM mutations, before paint),\n// useEffect on the server (where useLayoutEffect warns). The check runs once\n// at module evaluation time (not per-render). This matches the original\n// xstate/react behavior via use-isomorphic-layout-effect.\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nfunction useConstant<T>(fn: () => T): T {\n  const ref = useRef<{v: T}>();\n  if (!ref.current) {\n    ref.current = {v: fn()};\n  }\n  return ref.current.v;\n}\n\nfunction getServiceState<\n  TC extends object,\n  TE extends EventObject,\n  TS extends {value: any; context: TC},\n>(service: StateMachine.Service<TC, TE, TS>): StateMachine.State<TC, TE, TS> {\n  let currentValue!: StateMachine.State<TC, TE, TS>;\n  service.subscribe((state) => (currentValue = state)).unsubscribe();\n  return currentValue;\n}\n\nexport function useMachine<\n  TC extends object,\n  TE extends EventObject,\n  TS extends {value: any; context: TC},\n>(\n  stateMachine: StateMachine.Machine<TC, TE, TS>,\n  options?: {actions?: StateMachine.ActionMap<TC, TE>},\n): readonly [\n  StateMachine.State<TC, TE, TS>,\n  StateMachine.Service<TC, TE, TS>['send'],\n  StateMachine.Service<TC, TE, TS>,\n] {\n  const persistedStateRef = useRef<StateMachine.State<TC, TE, TS>>();\n\n  const [service, queue] = useConstant(() => {\n    const eventQueue: Array<TE | TE['type']> = [];\n    const svc = interpret(\n      createMachine(\n        stateMachine.config,\n        options ? options : (stateMachine as any)._options,\n      ),\n    );\n    const originalSend = svc.send;\n    svc.send = (event: TE | TE['type']) => {\n      if (svc.status === InterpreterStatus.NotStarted) {\n        eventQueue.push(event);\n        return;\n      }\n      originalSend(event);\n      persistedStateRef.current = svc.state;\n    };\n    return [svc, eventQueue] as const;\n  });\n\n  // Keep action implementations in sync without re-creating the service.\n  // useIsomorphicLayoutEffect ensures this runs before child effects and paint,\n  // preventing a window where stale action handlers could be invoked.\n  useIsomorphicLayoutEffect(() => {\n    if (options) {\n      (service as any)._machine._options = options;\n    }\n  });\n\n  const getSnapshot = useCallback(() => getServiceState(service), [service]);\n\n  const subscribe = useCallback(\n    (handleStoreChange: () => void) => {\n      const {unsubscribe} = service.subscribe(handleStoreChange);\n      return unsubscribe;\n    },\n    [service],\n  );\n\n  const storeSnapshot = useSyncExternalStore(\n    subscribe,\n    getSnapshot,\n    getSnapshot,\n  );\n\n  useEffect(() => {\n    service.start(persistedStateRef.current as any);\n    queue.forEach(service.send);\n    persistedStateRef.current = service.state;\n    return () => {\n      service.stop();\n    };\n    // service and queue are stable refs from useConstant\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return [storeSnapshot, service.send, service] as const;\n}\n"],"names":["interpret","createMachine","InterpreterStatus"],"mappings":";;AA4BA,MAAM,4BACJ,OAAO,WAAW,cAAc,kBAAkB;AAEpD,SAAS,YAAe,IAAgB;AACtC,QAAM,MAAM,OAAA;AACZ,MAAI,CAAC,IAAI,SAAS;AAChB,QAAI,UAAU,EAAC,GAAG,GAAA,EAAG;AAAA,EACvB;AACA,SAAO,IAAI,QAAQ;AACrB;AAEA,SAAS,gBAIP,SAA2E;AAC3E,MAAI;AACJ,UAAQ,UAAU,CAAC,UAAW,eAAe,KAAM,EAAE,YAAA;AACrD,SAAO;AACT;AAEO,SAAS,WAKd,cACA,SAKA;AACA,QAAM,oBAAoB,OAAA;AAE1B,QAAM,CAAC,SAAS,KAAK,IAAI,YAAY,MAAM;AACzC,UAAM,aAAqC,CAAA;AAC3C,UAAM,MAAMA;AAAAA,MACVC;AAAAA,QACE,aAAa;AAAA,QACb,UAAU,UAAW,aAAqB;AAAA,MAAA;AAAA,IAC5C;AAEF,UAAM,eAAe,IAAI;AACzB,QAAI,OAAO,CAAC,UAA2B;AACrC,UAAI,IAAI,WAAWC,EAAkB,YAAY;AAC/C,mBAAW,KAAK,KAAK;AACrB;AAAA,MACF;AACA,mBAAa,KAAK;AAClB,wBAAkB,UAAU,IAAI;AAAA,IAClC;AACA,WAAO,CAAC,KAAK,UAAU;AAAA,EACzB,CAAC;AAKD,4BAA0B,MAAM;AAC9B,QAAI,SAAS;AACV,cAAgB,SAAS,WAAW;AAAA,IACvC;AAAA,EACF,CAAC;AAED,QAAM,cAAc,YAAY,MAAM,gBAAgB,OAAO,GAAG,CAAC,OAAO,CAAC;AAEzE,QAAM,YAAY;AAAA,IAChB,CAAC,sBAAkC;AACjC,YAAM,EAAC,YAAA,IAAe,QAAQ,UAAU,iBAAiB;AACzD,aAAO;AAAA,IACT;AAAA,IACA,CAAC,OAAO;AAAA,EAAA;AAGV,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,YAAU,MAAM;AACd,YAAQ,MAAM,kBAAkB,OAAc;AAC9C,UAAM,QAAQ,QAAQ,IAAI;AAC1B,sBAAkB,UAAU,QAAQ;AACpC,WAAO,MAAM;AACX,cAAQ,KAAA;AAAA,IACV;AAAA,EAGF,GAAG,CAAA,CAAE;AAEL,SAAO,CAAC,eAAe,QAAQ,MAAM,OAAO;AAC9C;"}
+{"version":3,"file":"useMachine.mjs","names":[],"sources":["../../src/useMachine.ts"],"sourcesContent":["// Inlined React binding for xstate/fsm's state machine interpreter.\n//\n// This replaces the xstate/react/fsm entrypoint, which had no official version\n// supporting both React 19 and xstate/fsm. By owning this hook, we eliminate\n// the xstate/react dependency (and its React version peer dep constraint)\n// while keeping xstate/fsm and the cart state machine definition unchanged.\n//\n// Adapted from xstate/react v3.2.1/fsm (MIT license, Stately/xstate).\n// Copyright (c) 2015 David Khourshid\nimport {\n  createMachine,\n  interpret,\n  InterpreterStatus,\n  StateMachine,\n  EventObject,\n} from '@xstate/fsm';\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useSyncExternalStore,\n} from 'react';\n\n// useLayoutEffect in the browser (sync after DOM mutations, before paint),\n// useEffect on the server (where useLayoutEffect warns). The check runs once\n// at module evaluation time (not per-render). This matches the original\n// xstate/react behavior via use-isomorphic-layout-effect.\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nfunction useConstant<T>(fn: () => T): T {\n  const ref = useRef<{v: T}>();\n  if (!ref.current) {\n    ref.current = {v: fn()};\n  }\n  return ref.current.v;\n}\n\nfunction getServiceState<\n  TC extends object,\n  TE extends EventObject,\n  TS extends {value: any; context: TC},\n>(service: StateMachine.Service<TC, TE, TS>): StateMachine.State<TC, TE, TS> {\n  let currentValue!: StateMachine.State<TC, TE, TS>;\n  service.subscribe((state) => (currentValue = state)).unsubscribe();\n  return currentValue;\n}\n\nexport function useMachine<\n  TC extends object,\n  TE extends EventObject,\n  TS extends {value: any; context: TC},\n>(\n  stateMachine: StateMachine.Machine<TC, TE, TS>,\n  options?: {actions?: StateMachine.ActionMap<TC, TE>},\n): readonly [\n  StateMachine.State<TC, TE, TS>,\n  StateMachine.Service<TC, TE, TS>['send'],\n  StateMachine.Service<TC, TE, TS>,\n] {\n  const persistedStateRef = useRef<StateMachine.State<TC, TE, TS>>();\n\n  const [service, queue] = useConstant(() => {\n    const eventQueue: Array<TE | TE['type']> = [];\n    const svc = interpret(\n      createMachine(\n        stateMachine.config,\n        options ? options : (stateMachine as any)._options,\n      ),\n    );\n    const originalSend = svc.send;\n    svc.send = (event: TE | TE['type']) => {\n      if (svc.status === InterpreterStatus.NotStarted) {\n        eventQueue.push(event);\n        return;\n      }\n      originalSend(event);\n      persistedStateRef.current = svc.state;\n    };\n    return [svc, eventQueue] as const;\n  });\n\n  // Keep action implementations in sync without re-creating the service.\n  // useIsomorphicLayoutEffect ensures this runs before child effects and paint,\n  // preventing a window where stale action handlers could be invoked.\n  useIsomorphicLayoutEffect(() => {\n    if (options) {\n      (service as any)._machine._options = options;\n    }\n  });\n\n  const getSnapshot = useCallback(() => getServiceState(service), [service]);\n\n  const subscribe = useCallback(\n    (handleStoreChange: () => void) => {\n      const {unsubscribe} = service.subscribe(handleStoreChange);\n      return unsubscribe;\n    },\n    [service],\n  );\n\n  const storeSnapshot = useSyncExternalStore(\n    subscribe,\n    getSnapshot,\n    getSnapshot,\n  );\n\n  useEffect(() => {\n    service.start(persistedStateRef.current as any);\n    queue.forEach(service.send);\n    persistedStateRef.current = service.state;\n    return () => {\n      service.stop();\n    };\n    // service and queue are stable refs from useConstant\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return [storeSnapshot, service.send, service] as const;\n}\n"],"mappings":";;;AA4BA,IAAM,4BACJ,OAAO,WAAW,cAAc,kBAAkB;AAEpD,SAAS,YAAe,IAAgB;CACtC,MAAM,MAAM,QAAgB;AAC5B,KAAI,CAAC,IAAI,QACP,KAAI,UAAU,EAAC,GAAG,IAAI,EAAC;AAEzB,QAAO,IAAI,QAAQ;;AAGrB,SAAS,gBAIP,SAA2E;CAC3E,IAAI;AACJ,SAAQ,WAAW,UAAW,eAAe,MAAO,CAAC,aAAa;AAClE,QAAO;;AAGT,SAAgB,WAKd,cACA,SAKA;CACA,MAAM,oBAAoB,QAAwC;CAElE,MAAM,CAAC,SAAS,SAAS,kBAAkB;EACzC,MAAM,aAAqC,EAAE;EAC7C,MAAM,MAAM,EACV,EACE,aAAa,QACb,UAAU,UAAW,aAAqB,SAC3C,CACF;EACD,MAAM,eAAe,IAAI;AACzB,MAAI,QAAQ,UAA2B;AACrC,OAAI,IAAI,WAAW,EAAkB,YAAY;AAC/C,eAAW,KAAK,MAAM;AACtB;;AAEF,gBAAa,MAAM;AACnB,qBAAkB,UAAU,IAAI;;AAElC,SAAO,CAAC,KAAK,WAAW;GACxB;AAKF,iCAAgC;AAC9B,MAAI,QACD,SAAgB,SAAS,WAAW;GAEvC;CAEF,MAAM,cAAc,kBAAkB,gBAAgB,QAAQ,EAAE,CAAC,QAAQ,CAAC;CAU1E,MAAM,gBAAgB,qBARJ,aACf,sBAAkC;EACjC,MAAM,EAAC,gBAAe,QAAQ,UAAU,kBAAkB;AAC1D,SAAO;IAET,CAAC,QAAQ,CACV,EAIC,aACA,YACD;AAED,iBAAgB;AACd,UAAQ,MAAM,kBAAkB,QAAe;AAC/C,QAAM,QAAQ,QAAQ,KAAK;AAC3B,oBAAkB,UAAU,QAAQ;AACpC,eAAa;AACX,WAAQ,MAAM;;IAIf,EAAE,CAAC;AAEN,QAAO;EAAC;EAAe,QAAQ;EAAM;EAAQ"}

package/dist/browser-dev/useMoney.mjs

@@ -1,159 +1,181 @@
-import { useMemo } from "react";
 import { useShop } from "./ShopifyProvider.mjs";
+import { useMemo } from "react";
+//#region src/useMoney.tsx
+/**
+* The `useMoney` hook takes a [MoneyV2 object from the Storefront API](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2)
+* or a [MoneyV2 object from the Customer Account API](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2) and returns a
+* default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by
+* [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
+* Uses `locale` from `ShopifyProvider`
+*  
+* @see {@link https://shopify.dev/api/hydrogen/hooks/usemoney}
+* @example initialize the money object
+* ```ts
+* const money = useMoney({
+*   amount: '100.00',
+*   currencyCode: 'USD'
+* })
+* ```
+*  
+*
+* @example basic usage, outputs: $100.00
+* ```ts
+* money.localizedString
+* ```
+*  
+*
+* @example without currency, outputs: 100.00
+* ```ts
+* money.amount
+* ```
+*  
+*
+* @example without trailing zeros, outputs: $100
+* ```ts
+* money.withoutTrailingZeros
+* ```
+*  
+*
+* @example currency name, outputs: US dollars
+* ```ts
+* money.currencyCode
+* ```
+*  
+*
+* @example currency symbol, outputs: $
+* ```ts
+* money.currencySymbol
+* ```
+*  
+*
+* @example without currency and without trailing zeros, outputs: 100
+* ```ts
+* money.withoutTrailingZerosAndCurrency
+* ```
+* @publicDocs
+*/
 function useMoney(money) {
-  const { countryIsoCode, languageIsoCode } = useShop();
-  const locale = languageIsoCode.includes("_") ? languageIsoCode.replace("_", "-") : `${languageIsoCode}-${countryIsoCode}`;
-  if (!locale) {
-    throw new Error(
-      `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`
-    );
-  }
-  const amount = parseFloat(money.amount);
-  let isCurrencySupported = true;
-  try {
-    new Intl.NumberFormat(locale, {
-      style: "currency",
-      currency: money.currencyCode
-    });
-  } catch (e) {
-    if (e instanceof RangeError && e.message.includes("currency")) {
-      isCurrencySupported = false;
-    }
-  }
-  const {
-    defaultFormatter,
-    nameFormatter,
-    narrowSymbolFormatter,
-    withoutTrailingZerosFormatter,
-    withoutCurrencyFormatter,
-    withoutTrailingZerosOrCurrencyFormatter
-  } = useMemo(() => {
-    const options = isCurrencySupported ? {
-      style: "currency",
-      currency: money.currencyCode
-    } : {
-      style: "decimal",
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
-    };
-    return {
-      defaultFormatter: getLazyFormatter(locale, options),
-      nameFormatter: getLazyFormatter(locale, {
-        ...options,
-        currencyDisplay: "name"
-      }),
-      narrowSymbolFormatter: getLazyFormatter(locale, {
-        ...options,
-        currencyDisplay: "narrowSymbol"
-      }),
-      withoutTrailingZerosFormatter: getLazyFormatter(locale, {
-        ...options,
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0
-      }),
-      withoutCurrencyFormatter: getLazyFormatter(locale, {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-      }),
-      withoutTrailingZerosOrCurrencyFormatter: getLazyFormatter(locale, {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0
-      })
-    };
-  }, [money.currencyCode, locale, isCurrencySupported]);
-  const isPartCurrency = (part) => part.type === "currency";
-  const lazyFormatters = useMemo(
-    () => ({
-      original: () => money,
-      currencyCode: () => money.currencyCode,
-      localizedString: () => {
-        const formatted = defaultFormatter().format(amount);
-        return isCurrencySupported ? formatted : `${formatted} ${money.currencyCode}`;
-      },
-      parts: () => {
-        const parts = defaultFormatter().formatToParts(amount);
-        if (!isCurrencySupported) {
-          parts.push(
-            { type: "literal", value: " " },
-            { type: "currency", value: money.currencyCode }
-          );
-        }
-        return parts;
-      },
-      withoutTrailingZeros: () => {
-        const formatted = amount % 1 === 0 ? withoutTrailingZerosFormatter().format(amount) : defaultFormatter().format(amount);
-        return isCurrencySupported ? formatted : `${formatted} ${money.currencyCode}`;
-      },
-      withoutTrailingZerosAndCurrency: () => amount % 1 === 0 ? withoutTrailingZerosOrCurrencyFormatter().format(amount) : withoutCurrencyFormatter().format(amount),
-      currencyName: () => {
-        var _a;
-        return ((_a = nameFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) ?? money.currencyCode;
-      },
-      // e.g. "US dollars"
-      currencySymbol: () => {
-        var _a;
-        return ((_a = defaultFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) ?? money.currencyCode;
-      },
-      // e.g. "USD"
-      currencyNarrowSymbol: () => {
-        var _a;
-        return ((_a = narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) ?? "";
-      },
-      // e.g. "$"
-      amount: () => defaultFormatter().formatToParts(amount).filter(
-        (part) => ["decimal", "fraction", "group", "integer", "literal"].includes(
-          part.type
-        )
-      ).map((part) => part.value).join("")
-    }),
-    [
-      money,
-      amount,
-      isCurrencySupported,
-      nameFormatter,
-      defaultFormatter,
-      narrowSymbolFormatter,
-      withoutCurrencyFormatter,
-      withoutTrailingZerosFormatter,
-      withoutTrailingZerosOrCurrencyFormatter
-    ]
-  );
-  return useMemo(
-    () => new Proxy(lazyFormatters, {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-      get: (target, key) => {
-        var _a;
-        return (_a = Reflect.get(target, key)) == null ? void 0 : _a.call(null);
-      }
-    }),
-    [lazyFormatters]
-  );
+	const { countryIsoCode, languageIsoCode } = useShop();
+	const locale = languageIsoCode.includes("_") ? languageIsoCode.replace("_", "-") : `${languageIsoCode}-${countryIsoCode}`;
+	if (!locale) throw new Error(`useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`);
+	const amount = parseFloat(money.amount);
+	let isCurrencySupported = true;
+	try {
+		new Intl.NumberFormat(locale, {
+			style: "currency",
+			currency: money.currencyCode
+		});
+	} catch (e) {
+		if (e instanceof RangeError && e.message.includes("currency")) isCurrencySupported = false;
+	}
+	const { defaultFormatter, nameFormatter, narrowSymbolFormatter, withoutTrailingZerosFormatter, withoutCurrencyFormatter, withoutTrailingZerosOrCurrencyFormatter } = useMemo(() => {
+		const options = isCurrencySupported ? {
+			style: "currency",
+			currency: money.currencyCode
+		} : {
+			style: "decimal",
+			minimumFractionDigits: 2,
+			maximumFractionDigits: 2
+		};
+		return {
+			defaultFormatter: getLazyFormatter(locale, options),
+			nameFormatter: getLazyFormatter(locale, {
+				...options,
+				currencyDisplay: "name"
+			}),
+			narrowSymbolFormatter: getLazyFormatter(locale, {
+				...options,
+				currencyDisplay: "narrowSymbol"
+			}),
+			withoutTrailingZerosFormatter: getLazyFormatter(locale, {
+				...options,
+				minimumFractionDigits: 0,
+				maximumFractionDigits: 0
+			}),
+			withoutCurrencyFormatter: getLazyFormatter(locale, {
+				minimumFractionDigits: 2,
+				maximumFractionDigits: 2
+			}),
+			withoutTrailingZerosOrCurrencyFormatter: getLazyFormatter(locale, {
+				minimumFractionDigits: 0,
+				maximumFractionDigits: 0
+			})
+		};
+	}, [
+		money.currencyCode,
+		locale,
+		isCurrencySupported
+	]);
+	const isPartCurrency = (part) => part.type === "currency";
+	const lazyFormatters = useMemo(() => ({
+		original: () => money,
+		currencyCode: () => money.currencyCode,
+		localizedString: () => {
+			const formatted = defaultFormatter().format(amount);
+			return isCurrencySupported ? formatted : `${formatted} ${money.currencyCode}`;
+		},
+		parts: () => {
+			const parts = defaultFormatter().formatToParts(amount);
+			if (!isCurrencySupported) parts.push({
+				type: "literal",
+				value: " "
+			}, {
+				type: "currency",
+				value: money.currencyCode
+			});
+			return parts;
+		},
+		withoutTrailingZeros: () => {
+			const formatted = amount % 1 === 0 ? withoutTrailingZerosFormatter().format(amount) : defaultFormatter().format(amount);
+			return isCurrencySupported ? formatted : `${formatted} ${money.currencyCode}`;
+		},
+		withoutTrailingZerosAndCurrency: () => amount % 1 === 0 ? withoutTrailingZerosOrCurrencyFormatter().format(amount) : withoutCurrencyFormatter().format(amount),
+		currencyName: () => nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? money.currencyCode,
+		currencySymbol: () => defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? money.currencyCode,
+		currencyNarrowSymbol: () => narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? "",
+		amount: () => defaultFormatter().formatToParts(amount).filter((part) => [
+			"decimal",
+			"fraction",
+			"group",
+			"integer",
+			"literal"
+		].includes(part.type)).map((part) => part.value).join("")
+	}), [
+		money,
+		amount,
+		isCurrencySupported,
+		nameFormatter,
+		defaultFormatter,
+		narrowSymbolFormatter,
+		withoutCurrencyFormatter,
+		withoutTrailingZerosFormatter,
+		withoutTrailingZerosOrCurrencyFormatter
+	]);
+	return useMemo(() => new Proxy(lazyFormatters, { get: (target, key) => Reflect.get(target, key)?.call(null) }), [lazyFormatters]);
 }
-const formatterCache = /* @__PURE__ */ new Map();
+var formatterCache = /* @__PURE__ */ new Map();
 function getLazyFormatter(locale, options) {
-  const key = JSON.stringify([locale, options]);
-  return function() {
-    let formatter = formatterCache.get(key);
-    if (!formatter) {
-      try {
-        formatter = new Intl.NumberFormat(locale, options);
-      } catch (error) {
-        if (error instanceof RangeError && error.message.includes("currency")) {
-          const fallbackOptions = { ...options };
-          delete fallbackOptions.currency;
-          delete fallbackOptions.currencyDisplay;
-          delete fallbackOptions.currencySign;
-          formatter = new Intl.NumberFormat(locale, fallbackOptions);
-        } else {
-          throw error;
-        }
-      }
-      formatterCache.set(key, formatter);
-    }
-    return formatter;
-  };
+	const key = JSON.stringify([locale, options]);
+	return function() {
+		let formatter = formatterCache.get(key);
+		if (!formatter) {
+			try {
+				formatter = new Intl.NumberFormat(locale, options);
+			} catch (error) {
+				if (error instanceof RangeError && error.message.includes("currency")) {
+					const fallbackOptions = { ...options };
+					delete fallbackOptions.currency;
+					delete fallbackOptions.currencyDisplay;
+					delete fallbackOptions.currencySign;
+					formatter = new Intl.NumberFormat(locale, fallbackOptions);
+				} else throw error;
+			}
+			formatterCache.set(key, formatter);
+		}
+		return formatter;
+	};
 }
-export {
-  useMoney
-};
-//# sourceMappingURL=useMoney.mjs.map
+//#endregion
+export { useMoney };
+
+//# sourceMappingURL=useMoney.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useMoney.mjs","sources":["../../src/useMoney.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {\n  CurrencyCode as StorefrontApiCurrencyCode,\n  MoneyV2 as StorefrontApiMoneyV2,\n} from './storefront-api-types.js';\nimport type {\n  MoneyV2 as CustomerAccountApiMoneyV2,\n  CurrencyCode as CustomerAccountApiCurrencyCode,\n} from './customer-account-api-types.js';\n\n// Support MoneyV2 from both Storefront API and Customer Account API\n// The APIs may have different CurrencyCode enums\n/**\n * Supports MoneyV2 from both Storefront API and Customer Account API.\n * The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures useMoney works with data from either API.\n */\ntype MoneyV2 = StorefrontApiMoneyV2 | CustomerAccountApiMoneyV2;\n\n/**\n * Supports CurrencyCode from both Storefront API and Customer Account API. The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures useMoney works with data from either API.\n */\ntype CurrencyCode = StorefrontApiCurrencyCode | CustomerAccountApiCurrencyCode;\n\nexport type UseMoneyValue = {\n  /**\n   * The currency code from the `MoneyV2` object.\n   */\n  currencyCode: CurrencyCode;\n  /**\n   * The name for the currency code, returned by `Intl.NumberFormat`.\n   */\n  currencyName?: string;\n  /**\n   * The currency symbol returned by `Intl.NumberFormat`.\n   */\n  currencySymbol?: string;\n  /**\n   * The currency narrow symbol returned by `Intl.NumberFormat`.\n   */\n  currencyNarrowSymbol?: string;\n  /**\n   * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.\n   */\n  amount: string;\n  /**\n   * All parts returned by `Intl.NumberFormat.formatToParts`.\n   */\n  parts: Intl.NumberFormatPart[];\n  /**\n   * A string returned by `new Intl.NumberFormat` for the amount and currency code,\n   * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).\n   */\n  localizedString: string;\n  /**\n   * The `MoneyV2` object provided as an argument to the hook.\n   */\n  original: MoneyV2;\n  /**\n   * A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n   * For example, `$640.00` turns into `$640`.\n   * `$640.42` remains `$640.42`.\n   */\n  withoutTrailingZeros: string;\n  /**\n   * A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n   * For example, `$640.00` turns into `640`.\n   * `$640.42` turns into `640.42`.\n   */\n  withoutTrailingZerosAndCurrency: string;\n};\n\n/**\n * The `useMoney` hook takes a [MoneyV2 object from the Storefront API](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2)\n * or a [MoneyV2 object from the Customer Account API](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2) and returns a\n * default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by\n * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\n * Uses `locale` from `ShopifyProvider`\n * &nbsp;\n * @see {@link https://shopify.dev/api/hydrogen/hooks/usemoney}\n * @example initialize the money object\n * ```ts\n * const money = useMoney({\n *   amount: '100.00',\n *   currencyCode: 'USD'\n * })\n * ```\n * &nbsp;\n *\n * @example basic usage, outputs: $100.00\n * ```ts\n * money.localizedString\n * ```\n * &nbsp;\n *\n * @example without currency, outputs: 100.00\n * ```ts\n * money.amount\n * ```\n * &nbsp;\n *\n * @example without trailing zeros, outputs: $100\n * ```ts\n * money.withoutTrailingZeros\n * ```\n * &nbsp;\n *\n * @example currency name, outputs: US dollars\n * ```ts\n * money.currencyCode\n * ```\n * &nbsp;\n *\n * @example currency symbol, outputs: $\n * ```ts\n * money.currencySymbol\n * ```\n * &nbsp;\n *\n * @example without currency and without trailing zeros, outputs: 100\n * ```ts\n * money.withoutTrailingZerosAndCurrency\n * ```\n * @publicDocs\n */\nexport function useMoney(money: MoneyV2): UseMoneyValue {\n  const {countryIsoCode, languageIsoCode} = useShop();\n  const locale = languageIsoCode.includes('_')\n    ? languageIsoCode.replace('_', '-')\n    : `${languageIsoCode}-${countryIsoCode}`;\n\n  if (!locale) {\n    throw new Error(\n      `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`,\n    );\n  }\n\n  const amount = parseFloat(money.amount);\n\n  // Check if the currency code is supported by Intl.NumberFormat\n  let isCurrencySupported = true;\n  try {\n    new Intl.NumberFormat(locale, {\n      style: 'currency',\n      currency: money.currencyCode,\n    });\n  } catch (e) {\n    if (e instanceof RangeError && e.message.includes('currency')) {\n      isCurrencySupported = false;\n    }\n  }\n\n  const {\n    defaultFormatter,\n    nameFormatter,\n    narrowSymbolFormatter,\n    withoutTrailingZerosFormatter,\n    withoutCurrencyFormatter,\n    withoutTrailingZerosOrCurrencyFormatter,\n  } = useMemo(() => {\n    // For unsupported currencies (like USDC cryptocurrency), use decimal formatting with 2 decimal places\n    // We default to 2 decimal places based on research showing USDC displays like USD to reinforce its 1:1 peg\n    const options = isCurrencySupported\n      ? {\n          style: 'currency' as const,\n          currency: money.currencyCode,\n        }\n      : {\n          style: 'decimal' as const,\n          minimumFractionDigits: 2,\n          maximumFractionDigits: 2,\n        };\n\n    return {\n      defaultFormatter: getLazyFormatter(locale, options),\n      nameFormatter: getLazyFormatter(locale, {\n        ...options,\n        currencyDisplay: 'name',\n      }),\n      narrowSymbolFormatter: getLazyFormatter(locale, {\n        ...options,\n        currencyDisplay: 'narrowSymbol',\n      }),\n      withoutTrailingZerosFormatter: getLazyFormatter(locale, {\n        ...options,\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 0,\n      }),\n      withoutCurrencyFormatter: getLazyFormatter(locale, {\n        minimumFractionDigits: 2,\n        maximumFractionDigits: 2,\n      }),\n      withoutTrailingZerosOrCurrencyFormatter: getLazyFormatter(locale, {\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 0,\n      }),\n    };\n  }, [money.currencyCode, locale, isCurrencySupported]);\n\n  const isPartCurrency = (part: Intl.NumberFormatPart): boolean =>\n    part.type === 'currency';\n\n  // By wrapping these properties in functions, we only\n  // create formatters if they are going to be used.\n  const lazyFormatters = useMemo(\n    () => ({\n      original: (): MoneyV2 => money,\n      currencyCode: (): CurrencyCode => money.currencyCode,\n\n      localizedString: (): string => {\n        const formatted = defaultFormatter().format(amount);\n        // For unsupported currencies, append the currency code\n        return isCurrencySupported\n          ? formatted\n          : `${formatted} ${money.currencyCode}`;\n      },\n\n      parts: (): Intl.NumberFormatPart[] => {\n        const parts = defaultFormatter().formatToParts(amount);\n        // For unsupported currencies, add currency code as a currency part\n        if (!isCurrencySupported) {\n          parts.push(\n            {type: 'literal', value: ' '},\n            {type: 'currency', value: money.currencyCode},\n          );\n        }\n        return parts;\n      },\n\n      withoutTrailingZeros: (): string => {\n        const formatted =\n          amount % 1 === 0\n            ? withoutTrailingZerosFormatter().format(amount)\n            : defaultFormatter().format(amount);\n        // For unsupported currencies, append the currency code\n        return isCurrencySupported\n          ? formatted\n          : `${formatted} ${money.currencyCode}`;\n      },\n\n      withoutTrailingZerosAndCurrency: (): string =>\n        amount % 1 === 0\n          ? withoutTrailingZerosOrCurrencyFormatter().format(amount)\n          : withoutCurrencyFormatter().format(amount),\n\n      currencyName: (): string =>\n        nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n        money.currencyCode, // e.g. \"US dollars\"\n\n      currencySymbol: (): string =>\n        defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n        money.currencyCode, // e.g. \"USD\"\n\n      currencyNarrowSymbol: (): string =>\n        narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)\n          ?.value ?? '', // e.g. \"$\"\n\n      amount: (): string =>\n        defaultFormatter()\n          .formatToParts(amount)\n          .filter((part) =>\n            ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(\n              part.type,\n            ),\n          )\n          .map((part) => part.value)\n          .join(''),\n    }),\n    [\n      money,\n      amount,\n      isCurrencySupported,\n      nameFormatter,\n      defaultFormatter,\n      narrowSymbolFormatter,\n      withoutCurrencyFormatter,\n      withoutTrailingZerosFormatter,\n      withoutTrailingZerosOrCurrencyFormatter,\n    ],\n  );\n\n  // Call functions automatically when the properties are accessed\n  // to keep these functions as an implementation detail.\n  return useMemo(\n    () =>\n      new Proxy(lazyFormatters as unknown as UseMoneyValue, {\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n        get: (target, key) => Reflect.get(target, key)?.call(null),\n      }),\n    [lazyFormatters],\n  );\n}\n\nconst formatterCache = new Map<string, Intl.NumberFormat>();\n\nfunction getLazyFormatter(\n  locale: string,\n  options?: Intl.NumberFormatOptions,\n): () => Intl.NumberFormat {\n  const key = JSON.stringify([locale, options]);\n\n  return function (): Intl.NumberFormat {\n    let formatter = formatterCache.get(key);\n    if (!formatter) {\n      try {\n        formatter = new Intl.NumberFormat(locale, options);\n      } catch (error) {\n        // Handle unsupported currency codes (e.g., USDC from Customer Account API)\n        // Fall back to formatting without currency\n        if (error instanceof RangeError && error.message.includes('currency')) {\n          const fallbackOptions = {...options};\n          delete fallbackOptions.currency;\n          delete fallbackOptions.currencyDisplay;\n          delete fallbackOptions.currencySign;\n          formatter = new Intl.NumberFormat(locale, fallbackOptions);\n        } else {\n          throw error;\n        }\n      }\n      formatterCache.set(key, formatter);\n    }\n    return formatter;\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useMoney.mjs","names":[],"sources":["../../src/useMoney.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {\n  CurrencyCode as StorefrontApiCurrencyCode,\n  MoneyV2 as StorefrontApiMoneyV2,\n} from './storefront-api-types.js';\nimport type {\n  MoneyV2 as CustomerAccountApiMoneyV2,\n  CurrencyCode as CustomerAccountApiCurrencyCode,\n} from './customer-account-api-types.js';\n\n// Support MoneyV2 from both Storefront API and Customer Account API\n// The APIs may have different CurrencyCode enums\n/**\n * Supports MoneyV2 from both Storefront API and Customer Account API.\n * The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures useMoney works with data from either API.\n */\ntype MoneyV2 = StorefrontApiMoneyV2 | CustomerAccountApiMoneyV2;\n\n/**\n * Supports CurrencyCode from both Storefront API and Customer Account API. The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures useMoney works with data from either API.\n */\ntype CurrencyCode = StorefrontApiCurrencyCode | CustomerAccountApiCurrencyCode;\n\nexport type UseMoneyValue = {\n  /**\n   * The currency code from the `MoneyV2` object.\n   */\n  currencyCode: CurrencyCode;\n  /**\n   * The name for the currency code, returned by `Intl.NumberFormat`.\n   */\n  currencyName?: string;\n  /**\n   * The currency symbol returned by `Intl.NumberFormat`.\n   */\n  currencySymbol?: string;\n  /**\n   * The currency narrow symbol returned by `Intl.NumberFormat`.\n   */\n  currencyNarrowSymbol?: string;\n  /**\n   * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.\n   */\n  amount: string;\n  /**\n   * All parts returned by `Intl.NumberFormat.formatToParts`.\n   */\n  parts: Intl.NumberFormatPart[];\n  /**\n   * A string returned by `new Intl.NumberFormat` for the amount and currency code,\n   * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).\n   */\n  localizedString: string;\n  /**\n   * The `MoneyV2` object provided as an argument to the hook.\n   */\n  original: MoneyV2;\n  /**\n   * A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n   * For example, `$640.00` turns into `$640`.\n   * `$640.42` remains `$640.42`.\n   */\n  withoutTrailingZeros: string;\n  /**\n   * A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n   * For example, `$640.00` turns into `640`.\n   * `$640.42` turns into `640.42`.\n   */\n  withoutTrailingZerosAndCurrency: string;\n};\n\n/**\n * The `useMoney` hook takes a [MoneyV2 object from the Storefront API](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2)\n * or a [MoneyV2 object from the Customer Account API](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2) and returns a\n * default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by\n * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\n * Uses `locale` from `ShopifyProvider`\n * &nbsp;\n * @see {@link https://shopify.dev/api/hydrogen/hooks/usemoney}\n * @example initialize the money object\n * ```ts\n * const money = useMoney({\n *   amount: '100.00',\n *   currencyCode: 'USD'\n * })\n * ```\n * &nbsp;\n *\n * @example basic usage, outputs: $100.00\n * ```ts\n * money.localizedString\n * ```\n * &nbsp;\n *\n * @example without currency, outputs: 100.00\n * ```ts\n * money.amount\n * ```\n * &nbsp;\n *\n * @example without trailing zeros, outputs: $100\n * ```ts\n * money.withoutTrailingZeros\n * ```\n * &nbsp;\n *\n * @example currency name, outputs: US dollars\n * ```ts\n * money.currencyCode\n * ```\n * &nbsp;\n *\n * @example currency symbol, outputs: $\n * ```ts\n * money.currencySymbol\n * ```\n * &nbsp;\n *\n * @example without currency and without trailing zeros, outputs: 100\n * ```ts\n * money.withoutTrailingZerosAndCurrency\n * ```\n * @publicDocs\n */\nexport function useMoney(money: MoneyV2): UseMoneyValue {\n  const {countryIsoCode, languageIsoCode} = useShop();\n  const locale = languageIsoCode.includes('_')\n    ? languageIsoCode.replace('_', '-')\n    : `${languageIsoCode}-${countryIsoCode}`;\n\n  if (!locale) {\n    throw new Error(\n      `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`,\n    );\n  }\n\n  const amount = parseFloat(money.amount);\n\n  // Check if the currency code is supported by Intl.NumberFormat\n  let isCurrencySupported = true;\n  try {\n    new Intl.NumberFormat(locale, {\n      style: 'currency',\n      currency: money.currencyCode,\n    });\n  } catch (e) {\n    if (e instanceof RangeError && e.message.includes('currency')) {\n      isCurrencySupported = false;\n    }\n  }\n\n  const {\n    defaultFormatter,\n    nameFormatter,\n    narrowSymbolFormatter,\n    withoutTrailingZerosFormatter,\n    withoutCurrencyFormatter,\n    withoutTrailingZerosOrCurrencyFormatter,\n  } = useMemo(() => {\n    // For unsupported currencies (like USDC cryptocurrency), use decimal formatting with 2 decimal places\n    // We default to 2 decimal places based on research showing USDC displays like USD to reinforce its 1:1 peg\n    const options = isCurrencySupported\n      ? {\n          style: 'currency' as const,\n          currency: money.currencyCode,\n        }\n      : {\n          style: 'decimal' as const,\n          minimumFractionDigits: 2,\n          maximumFractionDigits: 2,\n        };\n\n    return {\n      defaultFormatter: getLazyFormatter(locale, options),\n      nameFormatter: getLazyFormatter(locale, {\n        ...options,\n        currencyDisplay: 'name',\n      }),\n      narrowSymbolFormatter: getLazyFormatter(locale, {\n        ...options,\n        currencyDisplay: 'narrowSymbol',\n      }),\n      withoutTrailingZerosFormatter: getLazyFormatter(locale, {\n        ...options,\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 0,\n      }),\n      withoutCurrencyFormatter: getLazyFormatter(locale, {\n        minimumFractionDigits: 2,\n        maximumFractionDigits: 2,\n      }),\n      withoutTrailingZerosOrCurrencyFormatter: getLazyFormatter(locale, {\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 0,\n      }),\n    };\n  }, [money.currencyCode, locale, isCurrencySupported]);\n\n  const isPartCurrency = (part: Intl.NumberFormatPart): boolean =>\n    part.type === 'currency';\n\n  // By wrapping these properties in functions, we only\n  // create formatters if they are going to be used.\n  const lazyFormatters = useMemo(\n    () => ({\n      original: (): MoneyV2 => money,\n      currencyCode: (): CurrencyCode => money.currencyCode,\n\n      localizedString: (): string => {\n        const formatted = defaultFormatter().format(amount);\n        // For unsupported currencies, append the currency code\n        return isCurrencySupported\n          ? formatted\n          : `${formatted} ${money.currencyCode}`;\n      },\n\n      parts: (): Intl.NumberFormatPart[] => {\n        const parts = defaultFormatter().formatToParts(amount);\n        // For unsupported currencies, add currency code as a currency part\n        if (!isCurrencySupported) {\n          parts.push(\n            {type: 'literal', value: ' '},\n            {type: 'currency', value: money.currencyCode},\n          );\n        }\n        return parts;\n      },\n\n      withoutTrailingZeros: (): string => {\n        const formatted =\n          amount % 1 === 0\n            ? withoutTrailingZerosFormatter().format(amount)\n            : defaultFormatter().format(amount);\n        // For unsupported currencies, append the currency code\n        return isCurrencySupported\n          ? formatted\n          : `${formatted} ${money.currencyCode}`;\n      },\n\n      withoutTrailingZerosAndCurrency: (): string =>\n        amount % 1 === 0\n          ? withoutTrailingZerosOrCurrencyFormatter().format(amount)\n          : withoutCurrencyFormatter().format(amount),\n\n      currencyName: (): string =>\n        nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n        money.currencyCode, // e.g. \"US dollars\"\n\n      currencySymbol: (): string =>\n        defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n        money.currencyCode, // e.g. \"USD\"\n\n      currencyNarrowSymbol: (): string =>\n        narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)\n          ?.value ?? '', // e.g. \"$\"\n\n      amount: (): string =>\n        defaultFormatter()\n          .formatToParts(amount)\n          .filter((part) =>\n            ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(\n              part.type,\n            ),\n          )\n          .map((part) => part.value)\n          .join(''),\n    }),\n    [\n      money,\n      amount,\n      isCurrencySupported,\n      nameFormatter,\n      defaultFormatter,\n      narrowSymbolFormatter,\n      withoutCurrencyFormatter,\n      withoutTrailingZerosFormatter,\n      withoutTrailingZerosOrCurrencyFormatter,\n    ],\n  );\n\n  // Call functions automatically when the properties are accessed\n  // to keep these functions as an implementation detail.\n  return useMemo(\n    () =>\n      new Proxy(lazyFormatters as unknown as UseMoneyValue, {\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n        get: (target, key) => Reflect.get(target, key)?.call(null),\n      }),\n    [lazyFormatters],\n  );\n}\n\nconst formatterCache = new Map<string, Intl.NumberFormat>();\n\nfunction getLazyFormatter(\n  locale: string,\n  options?: Intl.NumberFormatOptions,\n): () => Intl.NumberFormat {\n  const key = JSON.stringify([locale, options]);\n\n  return function (): Intl.NumberFormat {\n    let formatter = formatterCache.get(key);\n    if (!formatter) {\n      try {\n        formatter = new Intl.NumberFormat(locale, options);\n      } catch (error) {\n        // Handle unsupported currency codes (e.g., USDC from Customer Account API)\n        // Fall back to formatting without currency\n        if (error instanceof RangeError && error.message.includes('currency')) {\n          const fallbackOptions = {...options};\n          delete fallbackOptions.currency;\n          delete fallbackOptions.currencyDisplay;\n          delete fallbackOptions.currencySign;\n          formatter = new Intl.NumberFormat(locale, fallbackOptions);\n        } else {\n          throw error;\n        }\n      }\n      formatterCache.set(key, formatter);\n    }\n    return formatter;\n  };\n}\n"],"mappings":"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"}

package/dist/browser-dev/useSelectedOptionInUrlParam.mjs

@@ -1,30 +1,20 @@
-import { useEffect } from "react";
 import { mapSelectedProductOptionToObject } from "./getProductOptions.mjs";
+import { useEffect } from "react";
+//#region src/useSelectedOptionInUrlParam.tsx
+/** @publicDocs */
 function useSelectedOptionInUrlParam(selectedOptions) {
-  useEffect(() => {
-    const optionsSearchParams = new URLSearchParams(
-      mapSelectedProductOptionToObject(selectedOptions || [])
-    );
-    const currentSearchParams = new URLSearchParams(window.location.search);
-    const combinedSearchParams = new URLSearchParams({
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      ...Object.fromEntries(currentSearchParams),
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      ...Object.fromEntries(optionsSearchParams)
-    });
-    if (combinedSearchParams.size > 0) {
-      window.history.replaceState(
-        {},
-        "",
-        `${window.location.pathname}?${combinedSearchParams.toString()}`
-      );
-    }
-  }, [JSON.stringify(selectedOptions)]);
-  return null;
+	useEffect(() => {
+		const optionsSearchParams = new URLSearchParams(mapSelectedProductOptionToObject(selectedOptions || []));
+		const currentSearchParams = new URLSearchParams(window.location.search);
+		const combinedSearchParams = new URLSearchParams({
+			...Object.fromEntries(currentSearchParams),
+			...Object.fromEntries(optionsSearchParams)
+		});
+		if (combinedSearchParams.size > 0) window.history.replaceState({}, "", `${window.location.pathname}?${combinedSearchParams.toString()}`);
+	}, [JSON.stringify(selectedOptions)]);
+	return null;
 }
-export {
-  useSelectedOptionInUrlParam
-};
-//# sourceMappingURL=useSelectedOptionInUrlParam.mjs.map
+//#endregion
+export { useSelectedOptionInUrlParam };
+
+//# sourceMappingURL=useSelectedOptionInUrlParam.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useSelectedOptionInUrlParam.mjs","sources":["../../src/useSelectedOptionInUrlParam.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {mapSelectedProductOptionToObject} from './getProductOptions.js';\nimport {SelectedOption} from './storefront-api-types.js';\n\n/** @publicDocs */\nexport function useSelectedOptionInUrlParam(\n  selectedOptions: Pick<SelectedOption, 'name' | 'value'>[],\n): null {\n  useEffect(() => {\n    const optionsSearchParams = new URLSearchParams(\n      mapSelectedProductOptionToObject(selectedOptions || []),\n    );\n    const currentSearchParams = new URLSearchParams(window.location.search);\n\n    // ts ignoring the URLSearchParams not iterable error for now\n    // https://stackoverflow.com/questions/72522489/urlsearchparams-not-accepting-string#answer-72522838\n    // TODO: update ts lib\n    const combinedSearchParams = new URLSearchParams({\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      ...Object.fromEntries(currentSearchParams),\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      ...Object.fromEntries(optionsSearchParams),\n    });\n\n    if (combinedSearchParams.size > 0) {\n      window.history.replaceState(\n        {},\n        '',\n        `${window.location.pathname}?${combinedSearchParams.toString()}`,\n      );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(selectedOptions)]);\n\n  return null;\n}\n"],"names":[],"mappings":";;AAKO,SAAS,4BACd,iBACM;AACN,YAAU,MAAM;AACd,UAAM,sBAAsB,IAAI;AAAA,MAC9B,iCAAiC,mBAAmB,CAAA,CAAE;AAAA,IAAA;AAExD,UAAM,sBAAsB,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAKtE,UAAM,uBAAuB,IAAI,gBAAgB;AAAA;AAAA;AAAA,MAG/C,GAAG,OAAO,YAAY,mBAAmB;AAAA;AAAA;AAAA,MAGzC,GAAG,OAAO,YAAY,mBAAmB;AAAA,IAAA,CAC1C;AAED,QAAI,qBAAqB,OAAO,GAAG;AACjC,aAAO,QAAQ;AAAA,QACb,CAAA;AAAA,QACA;AAAA,QACA,GAAG,OAAO,SAAS,QAAQ,IAAI,qBAAqB,UAAU;AAAA,MAAA;AAAA,IAElE;AAAA,EAEF,GAAG,CAAC,KAAK,UAAU,eAAe,CAAC,CAAC;AAEpC,SAAO;AACT;"}
+{"version":3,"file":"useSelectedOptionInUrlParam.mjs","names":[],"sources":["../../src/useSelectedOptionInUrlParam.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {mapSelectedProductOptionToObject} from './getProductOptions.js';\nimport {SelectedOption} from './storefront-api-types.js';\n\n/** @publicDocs */\nexport function useSelectedOptionInUrlParam(\n  selectedOptions: Pick<SelectedOption, 'name' | 'value'>[],\n): null {\n  useEffect(() => {\n    const optionsSearchParams = new URLSearchParams(\n      mapSelectedProductOptionToObject(selectedOptions || []),\n    );\n    const currentSearchParams = new URLSearchParams(window.location.search);\n\n    // ts ignoring the URLSearchParams not iterable error for now\n    // https://stackoverflow.com/questions/72522489/urlsearchparams-not-accepting-string#answer-72522838\n    // TODO: update ts lib\n    const combinedSearchParams = new URLSearchParams({\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      ...Object.fromEntries(currentSearchParams),\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      ...Object.fromEntries(optionsSearchParams),\n    });\n\n    if (combinedSearchParams.size > 0) {\n      window.history.replaceState(\n        {},\n        '',\n        `${window.location.pathname}?${combinedSearchParams.toString()}`,\n      );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(selectedOptions)]);\n\n  return null;\n}\n"],"mappings":";;;;AAKA,SAAgB,4BACd,iBACM;AACN,iBAAgB;EACd,MAAM,sBAAsB,IAAI,gBAC9B,iCAAiC,mBAAmB,EAAE,CAAC,CACxD;EACD,MAAM,sBAAsB,IAAI,gBAAgB,OAAO,SAAS,OAAO;EAKvE,MAAM,uBAAuB,IAAI,gBAAgB;GAG/C,GAAG,OAAO,YAAY,oBAAoB;GAG1C,GAAG,OAAO,YAAY,oBAAoB;GAC3C,CAAC;AAEF,MAAI,qBAAqB,OAAO,EAC9B,QAAO,QAAQ,aACb,EAAE,EACF,IACA,GAAG,OAAO,SAAS,SAAS,GAAG,qBAAqB,UAAU,GAC/D;IAGF,CAAC,KAAK,UAAU,gBAAgB,CAAC,CAAC;AAErC,QAAO"}