@shopify/hydrogen-react 2022.7.0

package/dist/prod/useMoney.cjs

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("react");
+const ShopifyProvider = require("./ShopifyProvider.cjs");
+function useMoney(money) {
+  const {
+    locale
+  } = ShopifyProvider.useShop();
+  if (!locale) {
+    throw new Error(`useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`);
+  }
+  const amount = parseFloat(money.amount);
+  const options = react.useMemo(() => ({
+    style: "currency",
+    currency: money.currencyCode
+  }), [money.currencyCode]);
+  const defaultFormatter = useLazyFormatter(locale, options);
+  const nameFormatter = useLazyFormatter(locale, {
+    ...options,
+    currencyDisplay: "name"
+  });
+  const narrowSymbolFormatter = useLazyFormatter(locale, {
+    ...options,
+    currencyDisplay: "narrowSymbol"
+  });
+  const withoutTrailingZerosFormatter = useLazyFormatter(locale, {
+    ...options,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  });
+  const withoutCurrencyFormatter = useLazyFormatter(locale);
+  const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  });
+  const isPartCurrency = (part) => part.type === "currency";
+  const lazyFormatters = react.useMemo(() => ({
+    original: () => money,
+    currencyCode: () => money.currencyCode,
+    localizedString: () => defaultFormatter().format(amount),
+    parts: () => defaultFormatter().formatToParts(amount),
+    withoutTrailingZeros: () => amount % 1 === 0 ? withoutTrailingZerosFormatter().format(amount) : defaultFormatter().format(amount),
+    withoutTrailingZerosAndCurrency: () => amount % 1 === 0 ? withoutTrailingZerosOrCurrencyFormatter().format(amount) : withoutCurrencyFormatter().format(amount),
+    currencyName: () => {
+      var _a, _b;
+      return (_b = (_a = nameFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : money.currencyCode;
+    },
+    currencySymbol: () => {
+      var _a, _b;
+      return (_b = (_a = defaultFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : money.currencyCode;
+    },
+    currencyNarrowSymbol: () => {
+      var _a, _b;
+      return (_b = (_a = narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : "";
+    },
+    amount: () => defaultFormatter().formatToParts(amount).filter((part) => ["decimal", "fraction", "group", "integer", "literal"].includes(part.type)).map((part) => part.value).join("")
+  }), [money, amount, nameFormatter, defaultFormatter, narrowSymbolFormatter, withoutCurrencyFormatter, withoutTrailingZerosFormatter, withoutTrailingZerosOrCurrencyFormatter]);
+  return react.useMemo(() => new Proxy(lazyFormatters, {
+    get: (target, key) => {
+      var _a;
+      return (_a = Reflect.get(target, key)) == null ? void 0 : _a.call(null);
+    }
+  }), [lazyFormatters]);
+}
+function useLazyFormatter(locale, options) {
+  return react.useMemo(() => {
+    let memoized;
+    return () => memoized != null ? memoized : memoized = new Intl.NumberFormat(locale, options);
+  }, [locale, options]);
+}
+exports.useMoney = useMoney;
+//# sourceMappingURL=useMoney.cjs.map

package/dist/prod/useMoney.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMoney.cjs","sources":["../../src/useMoney.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {CurrencyCode, MoneyV2} from './storefront-api-types.js';\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](https://shopify.dev/api/storefront/reference/common-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 */\nexport function useMoney(money: MoneyV2): UseMoneyValue {\n  const {locale} = useShop();\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  const options = useMemo(\n    () => ({\n      style: 'currency',\n      currency: money.currencyCode,\n    }),\n    [money.currencyCode]\n  );\n\n  const defaultFormatter = useLazyFormatter(locale, options);\n\n  const nameFormatter = useLazyFormatter(locale, {\n    ...options,\n    currencyDisplay: 'name',\n  });\n\n  const narrowSymbolFormatter = useLazyFormatter(locale, {\n    ...options,\n    currencyDisplay: 'narrowSymbol',\n  });\n\n  const withoutTrailingZerosFormatter = useLazyFormatter(locale, {\n    ...options,\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 0,\n  });\n\n  const withoutCurrencyFormatter = useLazyFormatter(locale);\n\n  const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 0,\n  });\n\n  const isPartCurrency = (part: Intl.NumberFormatPart) =>\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: () => money,\n      currencyCode: () => money.currencyCode,\n\n      localizedString: () => defaultFormatter().format(amount),\n\n      parts: () => defaultFormatter().formatToParts(amount),\n\n      withoutTrailingZeros: () =>\n        amount % 1 === 0\n          ? withoutTrailingZerosFormatter().format(amount)\n          : defaultFormatter().format(amount),\n\n      withoutTrailingZerosAndCurrency: () =>\n        amount % 1 === 0\n          ? withoutTrailingZerosOrCurrencyFormatter().format(amount)\n          : withoutCurrencyFormatter().format(amount),\n\n      currencyName: () =>\n        nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n        money.currencyCode, // e.g. \"US dollars\"\n\n      currencySymbol: () =>\n        defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n        money.currencyCode, // e.g. \"USD\"\n\n      currencyNarrowSymbol: () =>\n        narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)\n          ?.value ?? '', // e.g. \"$\"\n\n      amount: () =>\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      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        get: (target, key) => Reflect.get(target, key)?.call(null),\n      }),\n    [lazyFormatters]\n  );\n}\n\nfunction useLazyFormatter(locale: string, options?: Intl.NumberFormatOptions) {\n  return useMemo(() => {\n    let memoized: Intl.NumberFormat;\n    return () => (memoized ??= new Intl.NumberFormat(locale, options));\n  }, [locale, options]);\n}\n"],"names":["useMoney","money","locale","useShop","Error","amount","parseFloat","options","useMemo","style","currency","currencyCode","defaultFormatter","useLazyFormatter","nameFormatter","currencyDisplay","narrowSymbolFormatter","withoutTrailingZerosFormatter","minimumFractionDigits","maximumFractionDigits","withoutCurrencyFormatter","withoutTrailingZerosOrCurrencyFormatter","isPartCurrency","part","type","lazyFormatters","original","localizedString","format","parts","formatToParts","withoutTrailingZeros","withoutTrailingZerosAndCurrency","currencyName","find","value","currencySymbol","currencyNarrowSymbol","filter","includes","map","join","Proxy","get","target","key","Reflect","call","memoized","Intl","NumberFormat"],"mappings":"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"}

package/dist/prod/useMoney.js

@@ -0,0 +1,72 @@
+import { useMemo } from "react";
+import { useShop } from "./ShopifyProvider.js";
+function useMoney(money) {
+  const {
+    locale
+  } = useShop();
+  if (!locale) {
+    throw new Error(`useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`);
+  }
+  const amount = parseFloat(money.amount);
+  const options = useMemo(() => ({
+    style: "currency",
+    currency: money.currencyCode
+  }), [money.currencyCode]);
+  const defaultFormatter = useLazyFormatter(locale, options);
+  const nameFormatter = useLazyFormatter(locale, {
+    ...options,
+    currencyDisplay: "name"
+  });
+  const narrowSymbolFormatter = useLazyFormatter(locale, {
+    ...options,
+    currencyDisplay: "narrowSymbol"
+  });
+  const withoutTrailingZerosFormatter = useLazyFormatter(locale, {
+    ...options,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  });
+  const withoutCurrencyFormatter = useLazyFormatter(locale);
+  const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  });
+  const isPartCurrency = (part) => part.type === "currency";
+  const lazyFormatters = useMemo(() => ({
+    original: () => money,
+    currencyCode: () => money.currencyCode,
+    localizedString: () => defaultFormatter().format(amount),
+    parts: () => defaultFormatter().formatToParts(amount),
+    withoutTrailingZeros: () => amount % 1 === 0 ? withoutTrailingZerosFormatter().format(amount) : defaultFormatter().format(amount),
+    withoutTrailingZerosAndCurrency: () => amount % 1 === 0 ? withoutTrailingZerosOrCurrencyFormatter().format(amount) : withoutCurrencyFormatter().format(amount),
+    currencyName: () => {
+      var _a, _b;
+      return (_b = (_a = nameFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : money.currencyCode;
+    },
+    currencySymbol: () => {
+      var _a, _b;
+      return (_b = (_a = defaultFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : money.currencyCode;
+    },
+    currencyNarrowSymbol: () => {
+      var _a, _b;
+      return (_b = (_a = narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) != null ? _b : "";
+    },
+    amount: () => defaultFormatter().formatToParts(amount).filter((part) => ["decimal", "fraction", "group", "integer", "literal"].includes(part.type)).map((part) => part.value).join("")
+  }), [money, amount, nameFormatter, defaultFormatter, narrowSymbolFormatter, withoutCurrencyFormatter, withoutTrailingZerosFormatter, withoutTrailingZerosOrCurrencyFormatter]);
+  return useMemo(() => new Proxy(lazyFormatters, {
+    get: (target, key) => {
+      var _a;
+      return (_a = Reflect.get(target, key)) == null ? void 0 : _a.call(null);
+    }
+  }), [lazyFormatters]);
+}
+function useLazyFormatter(locale, options) {
+  return useMemo(() => {
+    let memoized;
+    return () => memoized != null ? memoized : memoized = new Intl.NumberFormat(locale, options);
+  }, [locale, options]);
+}
+export {
+  useMoney
+};
+//# sourceMappingURL=useMoney.js.map

package/dist/prod/useMoney.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMoney.js","sources":["../../src/useMoney.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {CurrencyCode, MoneyV2} from './storefront-api-types.js';\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](https://shopify.dev/api/storefront/reference/common-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 */\nexport function useMoney(money: MoneyV2): UseMoneyValue {\n  const {locale} = useShop();\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  const options = useMemo(\n    () => ({\n      style: 'currency',\n      currency: money.currencyCode,\n    }),\n    [money.currencyCode]\n  );\n\n  const defaultFormatter = useLazyFormatter(locale, options);\n\n  const nameFormatter = useLazyFormatter(locale, {\n    ...options,\n    currencyDisplay: 'name',\n  });\n\n  const narrowSymbolFormatter = useLazyFormatter(locale, {\n    ...options,\n    currencyDisplay: 'narrowSymbol',\n  });\n\n  const withoutTrailingZerosFormatter = useLazyFormatter(locale, {\n    ...options,\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 0,\n  });\n\n  const withoutCurrencyFormatter = useLazyFormatter(locale);\n\n  const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 0,\n  });\n\n  const isPartCurrency = (part: Intl.NumberFormatPart) =>\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: () => money,\n      currencyCode: () => money.currencyCode,\n\n      localizedString: () => defaultFormatter().format(amount),\n\n      parts: () => defaultFormatter().formatToParts(amount),\n\n      withoutTrailingZeros: () =>\n        amount % 1 === 0\n          ? withoutTrailingZerosFormatter().format(amount)\n          : defaultFormatter().format(amount),\n\n      withoutTrailingZerosAndCurrency: () =>\n        amount % 1 === 0\n          ? withoutTrailingZerosOrCurrencyFormatter().format(amount)\n          : withoutCurrencyFormatter().format(amount),\n\n      currencyName: () =>\n        nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n        money.currencyCode, // e.g. \"US dollars\"\n\n      currencySymbol: () =>\n        defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n        money.currencyCode, // e.g. \"USD\"\n\n      currencyNarrowSymbol: () =>\n        narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)\n          ?.value ?? '', // e.g. \"$\"\n\n      amount: () =>\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      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        get: (target, key) => Reflect.get(target, key)?.call(null),\n      }),\n    [lazyFormatters]\n  );\n}\n\nfunction useLazyFormatter(locale: string, options?: Intl.NumberFormatOptions) {\n  return useMemo(() => {\n    let memoized: Intl.NumberFormat;\n    return () => (memoized ??= new Intl.NumberFormat(locale, options));\n  }, [locale, options]);\n}\n"],"names":["useMoney","money","locale","useShop","Error","amount","parseFloat","options","useMemo","style","currency","currencyCode","defaultFormatter","useLazyFormatter","nameFormatter","currencyDisplay","narrowSymbolFormatter","withoutTrailingZerosFormatter","minimumFractionDigits","maximumFractionDigits","withoutCurrencyFormatter","withoutTrailingZerosOrCurrencyFormatter","isPartCurrency","part","type","lazyFormatters","original","localizedString","format","parts","formatToParts","withoutTrailingZeros","withoutTrailingZerosAndCurrency","currencyName","find","value","currencySymbol","currencyNarrowSymbol","filter","includes","map","join","Proxy","get","target","key","Reflect","call","memoized","Intl","NumberFormat"],"mappings":";;AA0DO,SAASA,SAASC,OAA+B;AAChD,QAAA;AAAA,IAACC;AAAAA,MAAUC,QAAjB;AAEA,MAAI,CAACD,QAAQ;AACL,UAAA,IAAIE,MACP,sKADG;AAAA,EAGP;AAEKC,QAAAA,SAASC,WAAWL,MAAMI,MAAP;AAEnBE,QAAAA,UAAUC,QACd,OAAO;AAAA,IACLC,OAAO;AAAA,IACPC,UAAUT,MAAMU;AAAAA,EAElB,IAAA,CAACV,MAAMU,YAAP,CALqB;AAQjBC,QAAAA,mBAAmBC,iBAAiBX,QAAQK,OAAT;AAEnCO,QAAAA,gBAAgBD,iBAAiBX,QAAQ;AAAA,IAC7C,GAAGK;AAAAA,IACHQ,iBAAiB;AAAA,EAAA,CAFmB;AAKhCC,QAAAA,wBAAwBH,iBAAiBX,QAAQ;AAAA,IACrD,GAAGK;AAAAA,IACHQ,iBAAiB;AAAA,EAAA,CAF2B;AAKxCE,QAAAA,gCAAgCJ,iBAAiBX,QAAQ;AAAA,IAC7D,GAAGK;AAAAA,IACHW,uBAAuB;AAAA,IACvBC,uBAAuB;AAAA,EAAA,CAH6B;AAMhDC,QAAAA,2BAA2BP,iBAAiBX,MAAD;AAE3CmB,QAAAA,0CAA0CR,iBAAiBX,QAAQ;AAAA,IACvEgB,uBAAuB;AAAA,IACvBC,uBAAuB;AAAA,EAAA,CAFuC;AAKhE,QAAMG,iBAAiB,CAACC,SACtBA,KAAKC,SAAS;AAIVC,QAAAA,iBAAiBjB,QACrB,OAAO;AAAA,IACLkB,UAAU,MAAMzB;AAAAA,IAChBU,cAAc,MAAMV,MAAMU;AAAAA,IAE1BgB,iBAAiB,MAAMf,mBAAmBgB,OAAOvB,MAA1B;AAAA,IAEvBwB,OAAO,MAAMjB,mBAAmBkB,cAAczB,MAAjC;AAAA,IAEb0B,sBAAsB,MACpB1B,SAAS,MAAM,IACXY,8BAAAA,EAAgCW,OAAOvB,MAAvC,IACAO,mBAAmBgB,OAAOvB,MAA1B;AAAA,IAEN2B,iCAAiC,MAC/B3B,SAAS,MAAM,IACXgB,wCAAAA,EAA0CO,OAAOvB,MAAjD,IACAe,2BAA2BQ,OAAOvB,MAAlC;AAAA,IAEN4B,cAAc,MACZnB;;AAAAA,yCAAgBgB,cAAczB,MAA9B,EAAsC6B,KAAKZ,cAA3C,MAAAR,mBAA4DqB,UAA5DrB,YACAb,MAAMU;AAAAA;AAAAA,IAERyB,gBAAgB,MACdxB;;AAAAA,4CAAmBkB,cAAczB,MAAjC,EAAyC6B,KAAKZ,cAA9C,MAAAV,mBAA+DuB,UAA/DvB,YACAX,MAAMU;AAAAA;AAAAA,IAER0B,sBAAsB,MAAA;;AACpBrB,+CAAwBc,EAAAA,cAAczB,MAAtC,EAA8C6B,KAAKZ,cAAnD,MAAAN,mBACImB,UADJnB,YACa;AAAA;AAAA,IAEfX,QAAQ,MACNO,mBACGkB,cAAczB,MADjB,EAEGiC,OAAQf,CAAAA,SACP,CAAC,WAAW,YAAY,SAAS,WAAW,SAA5C,EAAuDgB,SACrDhB,KAAKC,IADP,CAHJ,EAOGgB,IAAKjB,CAAAA,SAASA,KAAKY,KAPtB,EAQGM,KAAK,EARR;AAAA,EA/BG,IAyCP,CACExC,OACAI,QACAS,eACAF,kBACAI,uBACAI,0BACAH,+BACAI,uCARF,CA1C4B;AAwD9B,SAAOb,QACL,MACE,IAAIkC,MAAMjB,gBAA4C;AAAA,IACpDkB,KAAK,CAACC,QAAQC;;AAAQC,2BAAQH,IAAIC,QAAQC,GAApB,MAAAC,mBAA0BC,KAAK;AAAA;AAAA,EAA/B,CADxB,GAGF,CAACtB,cAAD,CALY;AAOf;AAED,SAASZ,iBAAiBX,QAAgBK,SAAoC;AAC5E,SAAOC,QAAQ,MAAM;AACfwC,QAAAA;AACJ,WAAO,MAAOA,yCAAa,IAAIC,KAAKC,aAAahD,QAAQK,OAA9B;AAAA,EAAA,GAC1B,CAACL,QAAQK,OAAT,CAHW;AAIf;"}

package/dist/types/ExternalVideo.d.ts

@@ -0,0 +1,67 @@
+import type { ExternalVideo as ExternalVideoType } from './storefront-api-types.js';
+import type { PartialDeep } from 'type-fest';
+interface BaseProps {
+    /**
+     * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
+     */
+    data: PartialDeep<ExternalVideoType, {
+        recurseIntoArrays: true;
+    }>;
+    /** An object containing the options available for either
+     * [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or
+     * [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters).
+     */
+    options?: YouTube | Vimeo;
+}
+declare type PropsWeControl = 'src';
+export declare type ExternalVideoProps = Omit<JSX.IntrinsicElements['iframe'], PropsWeControl> & BaseProps;
+/**
+ * The `ExternalVideo` component renders an embedded video for the Storefront
+ * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
+ */
+export declare function ExternalVideo(props: ExternalVideoProps): JSX.Element;
+interface YouTube {
+    autoplay?: 0 | 1;
+    cc_lang_pref?: string;
+    cc_load_policy?: 1;
+    color?: 'red' | 'white';
+    controls?: 0 | 1;
+    disablekb?: 0 | 1;
+    enablejsapi?: 0 | 1;
+    end?: number;
+    fs?: 0 | 1;
+    hl?: string;
+    iv_load_policy?: 1 | 3;
+    list?: string;
+    list_type?: 'playlist' | 'user_uploads';
+    loop?: 0 | 1;
+    modest_branding?: 1;
+    origin?: string;
+    playlist?: string;
+    plays_inline?: 0 | 1;
+    rel?: 0 | 1;
+    start?: number;
+    widget_referrer?: string;
+}
+declare type VimeoBoolean = 0 | 1 | boolean;
+interface Vimeo {
+    autopause?: VimeoBoolean;
+    autoplay?: VimeoBoolean;
+    background?: VimeoBoolean;
+    byline?: VimeoBoolean;
+    color?: string;
+    controls?: VimeoBoolean;
+    dnt?: VimeoBoolean;
+    loop?: VimeoBoolean;
+    muted?: VimeoBoolean;
+    pip?: VimeoBoolean;
+    playsinline?: VimeoBoolean;
+    portrait?: VimeoBoolean;
+    quality?: '240p' | '360p' | '540p' | '720p' | '1080p' | '2k' | '4k';
+    speed?: VimeoBoolean;
+    '#t'?: string;
+    texttrack?: string;
+    title?: VimeoBoolean;
+    transparent?: VimeoBoolean;
+}
+export {};

package/dist/types/Image.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import type { Image as ImageType } from './storefront-api-types.js';
+import type { PartialDeep, Simplify } from 'type-fest';
+declare type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+export declare type ShopifyLoaderOptions = {
+    crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+    scale?: 2 | 3;
+    width?: HtmlImageProps['width'] | ImageType['width'];
+    height?: HtmlImageProps['height'] | ImageType['height'];
+};
+export declare type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & {
+    src: ImageType['url'];
+}>;
+export declare type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {
+    /** An object with fields that correspond to the Storefront API's
+     * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
+     * The `data` prop is required.
+     */
+    data: PartialDeep<ImageType, {
+        recurseIntoArrays: true;
+    }>;
+    /** A custom function that generates the image URL. Parameters passed in
+     * are `ShopifyLoaderParams`
+     */
+    loader?: (params: ShopifyLoaderParams) => string;
+    /** An object of `loader` function options. For example, if the `loader` function
+     * requires a `scale` option, then the value can be a property of the
+     * `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.
+     */
+    loaderOptions?: ShopifyLoaderOptions;
+    /**
+     * `src` isn't used, and should instead be passed as part of the `data` object
+     */
+    src?: never;
+    /**
+     * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.
+     */
+    widths?: (HtmlImageProps['width'] | ImageType['width'])[];
+};
+/**
+ * The `Image` component renders an image for the Storefront API's
+ * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
+ *
+ * An image's width and height are determined using the following priority list:
+ * 1. The width and height values for the `loaderOptions` prop
+ * 2. The width and height values for bare props
+ * 3. The width and height values for the `data` prop
+ *
+ * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,
+ * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing
+ * value will remain as `null`
+ */
+export declare function Image({ data, width, height, loading, loader, loaderOptions, widths, decoding, ...rest }: ShopifyImageProps): JSX.Element | null;
+export {};

package/dist/types/MediaFile.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { type ShopifyImageProps } from './Image.js';
+import { Video } from './Video.js';
+import { ExternalVideo } from './ExternalVideo.js';
+import { ModelViewer } from './ModelViewer.js';
+import type { MediaEdge as MediaEdgeType } from './storefront-api-types.js';
+import type { PartialDeep } from 'type-fest';
+interface MediaFileProps {
+    /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */
+    data: PartialDeep<MediaEdgeType['node'], {
+        recurseIntoArrays: true;
+    }>;
+    /** The options for the `Image`, `Video`, or `ExternalVideo` components. */
+    mediaOptions?: {
+        /** Props that will only apply when an `<Image />` is rendered */
+        image: Omit<ShopifyImageProps, 'data'>;
+        /** Props that will only apply when a `<Video />` is rendered */
+        video: Omit<React.ComponentProps<typeof Video>, 'data'>;
+        /** Props that will only apply when an `<ExternalVideo />` is rendered */
+        externalVideo: Omit<React.ComponentProps<typeof ExternalVideo>['options'], 'data'>;
+        /** Props that will only apply when a `<ModelViewer />` is rendered */
+        modelViewer: Omit<typeof ModelViewer, 'data'>;
+    };
+}
+/**
+ * The `MediaFile` component renders the media for the Storefront API's
+ * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a
+ * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.
+ */
+export declare function MediaFile({ data, mediaOptions, ...passthroughProps }: MediaFileProps): JSX.Element | null;
+export {};

package/dist/types/Metafield.d.ts

@@ -0,0 +1,58 @@
+import { type ElementType, type ComponentPropsWithoutRef } from 'react';
+import type { Metafield as MetafieldType } from './storefront-api-types.js';
+import type { PartialDeep, JsonValue } from 'type-fest';
+interface BaseProps<ComponentGeneric extends ElementType> {
+    /** An object with fields that correspond to the Storefront API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield). */
+    data: PartialDeep<MetafieldType, {
+        recurseIntoArrays: true;
+    }> | null;
+    /** An HTML tag or React component to be rendered as the base element wrapper. The default value varies depending on [metafield.type](https://shopify.dev/apps/metafields/types). */
+    as?: ComponentGeneric;
+}
+export declare type MetafieldProps<ComponentGeneric extends ElementType> = ComponentPropsWithoutRef<ComponentGeneric> & BaseProps<ComponentGeneric>;
+/**
+ * The `Metafield` component renders the value of a Storefront
+ * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).
+ * Relies on the `locale` property of the `useShop()` hook, so it must be a desendent of `<ShopifyProvider/>`
+ *
+ * Renders a smart default of the Metafield's `value`. For more information, refer to the [Default output](#default-output) section.
+ */
+export declare function Metafield<ComponentGeneric extends ElementType>(props: MetafieldProps<ComponentGeneric>): JSX.Element | null;
+/**
+ * The `parseMetafield` utility transforms a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield)
+ * into a new object whose `values` have been parsed according to the metafield `type`.
+ * If the metafield is `null`, then it returns `null` back.
+ */
+export declare function parseMetafield(
+/** A [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield) or null */
+metafield: PartialDeep<MetafieldType, {
+    recurseIntoArrays: true;
+}> | null): PartialDeep<ParsedMetafield, {
+    recurseIntoArrays: true;
+}> | null;
+/**
+ * The `parseMetafieldValue` function parses a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `value` from a string into a sensible type corresponding to the [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `type`.
+ */
+export declare function parseMetafieldValue(metafield: PartialDeep<MetafieldType, {
+    recurseIntoArrays: true;
+}> | null): ParsedMetafield['value'];
+/**
+ * Parses a JSON string while preventing prototype injection attacks.
+ */
+export declare function parseJSON(json: string): any;
+export declare function getMeasurementAsString(measurement: Measurement, locale?: string, options?: Intl.NumberFormatOptions): string;
+declare type ParsedMetafield = Omit<PartialDeep<MetafieldType, {
+    recurseIntoArrays: true;
+}>, 'value'> & {
+    value?: string | number | boolean | JsonValue | Date | Rating | Measurement;
+};
+export interface Rating {
+    value: number;
+    scale_min: number;
+    scale_max: number;
+}
+interface Measurement {
+    unit: string;
+    value: number;
+}
+export {};

package/dist/types/ModelViewer.d.ts

@@ -0,0 +1,57 @@
+import type { Model3d } from './storefront-api-types.js';
+import type { PartialDeep } from 'type-fest';
+import type { ModelViewerElement } from '@google/model-viewer/lib/model-viewer.js';
+declare type PropsWeControl = 'src';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'model-viewer': PartialDeep<ModelViewerElement, {
+                recurseIntoArrays: true;
+            }>;
+        }
+    }
+}
+declare type ModelViewerProps = Omit<PartialDeep<JSX.IntrinsicElements['model-viewer'], {
+    recurseIntoArrays: true;
+}>, PropsWeControl> & {
+    /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/objects/model3d). */
+    data: PartialDeep<Model3d, {
+        recurseIntoArrays: true;
+    }>;
+    /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */
+    onError?: (event: Event) => void;
+    /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */
+    onLoad?: (event: Event) => void;
+    /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */
+    onPreload?: (event: Event) => void;
+    /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */
+    onModelVisibility?: (event: Event) => void;
+    /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */
+    onProgress?: (event: Event) => void;
+    /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */
+    onArStatus?: (event: Event) => void;
+    /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */
+    onArTracking?: (event: Event) => void;
+    /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */
+    onQuickLookButtonTapped?: (event: Event) => void;
+    /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */
+    onCameraChange?: (event: Event) => void;
+    /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange).  */
+    onEnvironmentChange?: (event: Event) => void;
+    /**  The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */
+    onPlay?: (event: Event) => void;
+    /**  The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */
+    onPause?: (event: Event) => void;
+    /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */
+    onSceneGraphReady?: (event: Event) => void;
+};
+/**
+ * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for
+ * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).
+ *
+ * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type="module">` tag when the `<ModelViewer />` component is rendered
+ *
+ * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.
+ */
+export declare function ModelViewer(props: ModelViewerProps): JSX.Element | null;
+export {};

package/dist/types/Money.d.ts

@@ -0,0 +1,29 @@
+import React, { type ReactNode } from 'react';
+import type { MoneyV2, UnitPriceMeasurement } from './storefront-api-types.js';
+import type { PartialDeep } from 'type-fest';
+interface CustomProps<ComponentGeneric extends React.ElementType> {
+    /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */
+    as?: ComponentGeneric;
+    /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */
+    data: PartialDeep<MoneyV2, {
+        recurseIntoArrays: true;
+    }>;
+    /** Whether to remove the currency symbol from the output. */
+    withoutCurrency?: boolean;
+    /** Whether to remove trailing zeros (fractional money) from the output. */
+    withoutTrailingZeros?: boolean;
+    /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/latest/objects/unitpricemeasurement). */
+    measurement?: PartialDeep<UnitPriceMeasurement, {
+        recurseIntoArrays: true;
+    }>;
+    /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */
+    measurementSeparator?: ReactNode;
+}
+export declare type MoneyProps<ComponentGeneric extends React.ElementType> = CustomProps<ComponentGeneric> & Omit<React.ComponentPropsWithoutRef<ComponentGeneric>, keyof CustomProps<ComponentGeneric>>;
+/**
+ * The `Money` component renders a string of the Storefront API's
+ * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
+ * `locale` in the `ShopifyProvider` component.
+ */
+export declare function Money<ComponentGeneric extends React.ElementType>({ data, as, withoutCurrency, withoutTrailingZeros, measurement, measurementSeparator, ...passthroughProps }: MoneyProps<ComponentGeneric>): JSX.Element;
+export {};

package/dist/types/ProductPrice.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { Product } from './storefront-api-types.js';
+import { type MoneyProps } from './Money.js';
+import type { PartialDeep } from 'type-fest';
+interface ProductPriceProps {
+    /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */
+    data: PartialDeep<Product, {
+        recurseIntoArrays: true;
+    }>;
+    /** The type of price. Valid values: `regular` (default) or `compareAt`. */
+    priceType?: 'regular' | 'compareAt';
+    /** The type of value. Valid values: `min` (default), `max` or `unit`. */
+    valueType?: 'max' | 'min' | 'unit';
+    /** The ID of the variant. */
+    variantId?: string;
+}
+/**
+ * The `ProductPrice` component renders a `Money` component with the product
+ * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
+ */
+export declare function ProductPrice<ComponentGeneric extends React.ElementType>(props: ProductPriceProps & Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>): JSX.Element | null;
+export {};

package/dist/types/ProductProvider.d.ts

@@ -0,0 +1,74 @@
+import type { SelectedOption as SelectedOptionType, Product, ProductVariant as ProductVariantType, ProductVariantConnection, SellingPlan as SellingPlanType, SellingPlanAllocation as SellingPlanAllocationType, SellingPlanGroup as SellingPlanGroupType, SellingPlanGroupConnection } from './storefront-api-types.js';
+import type { PartialDeep } from 'type-fest';
+declare type InitialVariantId = ProductVariantType['id'] | null;
+interface ProductProviderProps {
+    /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */
+    data: PartialDeep<Product, {
+        recurseIntoArrays: true;
+    }>;
+    /** A `ReactNode` element. */
+    children: React.ReactNode;
+    /**
+     * The initially selected variant.
+     * The following logic applies to `initialVariantId`:
+     * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.
+     * 2. If `initialVariantId` is provided but is `null`, then no variant is used.
+     * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.
+     * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.
+     */
+    initialVariantId?: InitialVariantId;
+}
+/**
+ * `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook.
+ *
+ * It helps manage selected options and variants for a product.
+ */
+export declare function ProductProvider({ children, data: product, initialVariantId: explicitVariantId, }: ProductProviderProps): JSX.Element;
+/**
+ * Provides access to the context value provided by `<ProductProvider />`. Must be a descendent of `<ProductProvider />`.
+ */
+export declare function useProduct(): ProductHookValue;
+export interface OptionWithValues {
+    name: SelectedOptionType['name'];
+    values: SelectedOptionType['value'][];
+}
+declare type ProductHookValue = PartialDeep<{
+    /** An array of the variant `nodes` from the `VariantConnection`. */
+    variants: ProductVariantType[];
+    variantsConnection?: ProductVariantConnection;
+    /** An array of the product's options and values. */
+    options: OptionWithValues[];
+    /** The selected variant. */
+    selectedVariant?: ProductVariantType | null;
+    selectedOptions: SelectedOptions;
+    /** The selected selling plan. */
+    selectedSellingPlan?: SellingPlanType;
+    /** The selected selling plan allocation. */
+    selectedSellingPlanAllocation?: SellingPlanAllocationType;
+    /** The selling plan groups. */
+    sellingPlanGroups?: (Omit<SellingPlanGroupType, 'sellingPlans'> & {
+        sellingPlans: SellingPlanType[];
+    })[];
+    sellingPlanGroupsConnection?: SellingPlanGroupConnection;
+}, {
+    recurseIntoArrays: true;
+}> & {
+    /** A callback to set the selected variant to the variant passed as an argument. */
+    setSelectedVariant: (variant: PartialDeep<ProductVariantType, {
+        recurseIntoArrays: true;
+    }> | null) => void;
+    /** A callback to set the selected option. */
+    setSelectedOption: (name: SelectedOptionType['name'], value: SelectedOptionType['value']) => void;
+    /** A callback to set multiple selected options at once. */
+    setSelectedOptions: (options: SelectedOptions) => void;
+    /** A callback to set the selected selling plan to the one passed as an argument. */
+    setSelectedSellingPlan: (sellingPlan: PartialDeep<SellingPlanType, {
+        recurseIntoArrays: true;
+    }>) => void;
+    /** A callback that returns a boolean indicating if the option is in stock. */
+    isOptionInStock: (name: SelectedOptionType['name'], value: SelectedOptionType['value']) => boolean;
+};
+export declare type SelectedOptions = {
+    [key: string]: string;
+};
+export {};

package/dist/types/ShopPayButton.d.ts

@@ -0,0 +1,42 @@
+declare type ShopPayButtonProps = {
+    /** A string of classes to apply to the `div` that wraps the Shop Pay button. */
+    className?: string;
+    /** A string that's applied to the [CSS custom property (variable)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) `--shop-pay-button-width` for the [Buy with Shop Pay component](https://shopify.dev/custom-storefronts/tools/web-components#buy-with-shop-pay-component). */
+    width?: string;
+} & ({
+    /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */
+    variantIds: string[];
+    /** An array of variant IDs and quantities to purchase with Shop Pay. */
+    variantIdsAndQuantities?: never;
+} | {
+    /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */
+    variantIds?: never;
+    /** An array of variant IDs and quantities to purchase with Shop Pay. */
+    variantIdsAndQuantities: Array<{
+        id: string;
+        quantity: number;
+    }>;
+});
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'shop-pay-button': {
+                variants: string;
+                'store-url': string;
+            };
+        }
+    }
+}
+/**
+ * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
+ * It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.
+ * It relies on the `<ShopProvider>` context provider.
+ */
+export declare function ShopPayButton({ variantIds, className, variantIdsAndQuantities, width, }: ShopPayButtonProps): JSX.Element;
+/**
+ * Takes a string in the format of "gid://shopify/ProductVariant/41007289630776" and returns a string of the ID part at the end: "41007289630776"
+ */
+export declare function getIdFromGid(id?: string): string | undefined;
+export declare const MissingPropsErrorMessage = "You must pass in either \"variantIds\" or \"variantIdsAndQuantities\" to ShopPayButton";
+export declare const DoublePropsErrorMessage = "You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component";
+export {};