@gem-sdk/core 1.12.0-next.9 → 1.12.0-staging-2b439c82

package/dist/cjs/helpers/render.js

@@ -39,6 +39,9 @@ const styles = (strings, ...keys)=>{
     }
     return styleArr.join(';');
 };
+const dataStringify = (obj)=>{
+    return JSON.stringify(obj).replace(/\\"/g, '"');
+};
 const template = (strings, ...keys)=>{
     let str = '';
     strings.forEach((item, index)=>{
@@ -59,6 +62,7 @@ const template = (strings, ...keys)=>{
 };
 
 exports.RenderIf = RenderIf;
+exports.dataStringify = dataStringify;
 exports.props = props;
 exports.styles = styles;
 exports.template = template;

package/dist/cjs/hooks/shop.js

@@ -26,6 +26,17 @@ const useCurrency = ()=>{
         changeCurrency
     ]);
 };
+const useMoneyFormat = ()=>{
+    const moneyFormat = ShopContext.useShopStore((state)=>state.moneyFormat);
+    const moneyWithCurrencyFormat = ShopContext.useShopStore((state)=>state.moneyWithCurrencyFormat);
+    return react.useMemo(()=>({
+            moneyFormat,
+            moneyWithCurrencyFormat
+        }), [
+        moneyFormat,
+        moneyWithCurrencyFormat
+    ]);
+};
 const useSwatches = ()=>{
     const swatches = ShopContext.useShopStore((state)=>state.swatches);
     const changeSwatches = ShopContext.useShopStore((state)=>state.changeSwatches);
@@ -108,6 +119,7 @@ exports.useIsStorefrontProduct = useIsStorefrontProduct;
 exports.useLocale = useLocale;
 exports.useMatchMutate = useMatchMutate;
 exports.useMobileOnly = useMobileOnly;
+exports.useMoneyFormat = useMoneyFormat;
 exports.usePageType = usePageType;
 exports.usePluginEnable = usePluginEnable;
 exports.useStoreFront = useStoreFront;

package/dist/cjs/hooks/useFormatMoney.js

@@ -1,21 +1,61 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
 var shop = require('./shop.js');
 
-const useFormatMoney = ()=>{
-    const { locale  } = shop.useLocale();
-    const formatMoney = react.useCallback((value, options)=>new Intl.NumberFormat(locale, {
-            style: 'currency',
-            ...options
-        }).format(value), [
-        locale
-    ]);
-    return {
-        formatMoney
+const useFormatMoney = (amount, withCurrency)=>{
+    const { moneyFormat , moneyWithCurrencyFormat  } = shop.useMoneyFormat();
+    const formatMoney = function(cents, format) {
+        let value = '';
+        const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
+        const formatString = format || '${{amount}}';
+        if (typeof cents == 'string') {
+            cents = cents.replace('.', '');
+        }
+        /**
+     * check default
+     * @param opt opt
+     * @param def def
+     * @returns any
+     */ function defaultOption(opt, def) {
+            return typeof opt == 'undefined' ? def : opt;
+        }
+        /**
+     * formatWithDelimiters
+     * @param number number
+     * @param precision precision
+     * @param thousands thousands
+     * @param decimal decimal
+     * @returns any
+     */ // eslint-disable-next-line max-params
+        function formatWithDelimiters(number, precision, thousands, decimal) {
+            precision = defaultOption(precision, 2);
+            thousands = defaultOption(thousands, ',');
+            decimal = defaultOption(decimal, '.');
+            if (isNaN(number) || number == null) {
+                return 0;
+            }
+            // shopify làm tròn bằng cách cắt đi các số ở đằng sau chứ không sử dụng toFixed để làm tròn như toán học
+            number = parseFloat(`${number}`).toFixed(Number(precision) + 1).slice(0, -1);
+            const parts = number.split('.'), dollars = parts[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands), cents = parts[1] ? decimal + parts[1] : '';
+            return dollars + cents;
+        }
+        switch(formatString.match(placeholderRegex)[1]){
+            case 'amount':
+                value = formatWithDelimiters(cents, 2);
+                break;
+            case 'amount_no_decimals':
+                value = formatWithDelimiters(cents, 0);
+                break;
+            case 'amount_with_comma_separator':
+                value = formatWithDelimiters(cents, 2, '.', ',');
+                break;
+            case 'amount_no_decimals_with_comma_separator':
+                value = formatWithDelimiters(cents, 0, '.', ',');
+                break;
+        }
+        return formatString.replace(placeholderRegex, value);
     };
+    return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
 };
 
-exports.default = useFormatMoney;
+exports.useFormatMoney = useFormatMoney;

package/dist/cjs/hooks/useMoney.js

@@ -5,182 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var shop = require('./shop.js');
 
-const NARROW_SYMBOL_MAP = {
-    AED: 'د.إ',
-    AFN: '؋',
-    ALL: 'L',
-    AMD: 'դր.',
-    ANG: 'ƒ',
-    AOA: 'Kz',
-    ARS: '$',
-    AUD: '$',
-    AWG: 'ƒ',
-    AZN: '₼',
-    BAM: 'КМ',
-    BBD: '$',
-    BDT: '৳',
-    BGN: 'лв.',
-    BHD: 'ب.د',
-    BIF: 'Fr',
-    BMD: '$',
-    BND: '$',
-    BOB: 'Bs.',
-    BRL: 'R$',
-    BSD: '$',
-    BTN: 'Nu.',
-    BWP: 'P',
-    BYN: 'Br',
-    BYR: 'Br',
-    BZD: '$',
-    CAD: '$',
-    CDF: 'Fr',
-    CHF: 'CHF',
-    CLF: 'UF',
-    CLP: '$',
-    CNY: '¥',
-    COP: '$',
-    CRC: '₡',
-    CUC: '$',
-    CUP: '$',
-    CVE: '$',
-    CZK: 'Kč',
-    DJF: 'Fdj',
-    DKK: 'kr.',
-    DOP: '$',
-    DZD: 'د.ج',
-    EGP: 'ج.م',
-    ERN: 'Nfk',
-    ETB: 'Br',
-    EUR: '€',
-    FJD: '$',
-    FKP: '£',
-    GBP: '£',
-    GEL: 'ლ',
-    GHS: '₵',
-    GIP: '£',
-    GMD: 'D',
-    GNF: 'Fr',
-    GTQ: 'Q',
-    GYD: '$',
-    HKD: '$',
-    HNL: 'L',
-    HRK: 'kn',
-    HTG: 'G',
-    HUF: 'Ft',
-    IDR: 'Rp',
-    ILS: '₪',
-    INR: '₹',
-    IQD: 'ع.د',
-    IRR: '﷼',
-    ISK: 'kr',
-    JMD: '$',
-    JOD: 'د.ا',
-    JPY: '¥',
-    KES: 'KSh',
-    KGS: 'som',
-    KHR: '៛',
-    KMF: 'Fr',
-    KPW: '₩',
-    KRW: '₩',
-    KWD: 'د.ك',
-    KYD: '$',
-    KZT: '〒',
-    LAK: '₭',
-    LBP: 'ل.ل',
-    LKR: '₨',
-    LRD: '$',
-    LSL: 'L',
-    LTL: 'Lt',
-    LVL: 'Ls',
-    LYD: 'ل.د',
-    MAD: 'د.م.',
-    MDL: 'L',
-    MGA: 'Ar',
-    MKD: 'ден',
-    MMK: 'K',
-    MNT: '₮',
-    MOP: 'P',
-    MRU: 'UM',
-    MUR: '₨',
-    MVR: 'MVR',
-    MWK: 'MK',
-    MXN: '$',
-    MYR: 'RM',
-    MZN: 'MTn',
-    NAD: '$',
-    NGN: '₦',
-    NIO: 'C$',
-    NOK: 'kr',
-    NPR: '₨',
-    NZD: '$',
-    OMR: 'ر.ع.',
-    PAB: 'B/.',
-    PEN: 'S/.',
-    PGK: 'K',
-    PHP: '₱',
-    PKR: '₨',
-    PLN: 'zł',
-    PYG: '₲',
-    QAR: 'ر.ق',
-    RON: 'Lei',
-    RSD: 'РСД',
-    RUB: '₽',
-    RWF: 'FRw',
-    SAR: 'ر.س',
-    SBD: '$',
-    SCR: '₨',
-    SDG: '£',
-    SEK: 'kr',
-    SGD: '$',
-    SHP: '£',
-    SKK: 'Sk',
-    SLL: 'Le',
-    SOS: 'Sh',
-    SRD: '$',
-    SSP: '£',
-    STN: 'Db',
-    SVC: '₡',
-    SYP: '£S',
-    SZL: 'E',
-    THB: '฿',
-    TJS: 'ЅМ',
-    TMT: 'T',
-    TND: 'د.ت',
-    TOP: 'T$',
-    TRY: '₺',
-    TTD: '$',
-    TWD: '$',
-    TZS: 'Sh',
-    UAH: '₴',
-    UGX: 'USh',
-    USD: '$',
-    UYU: '$',
-    UZS: '',
-    VED: 'Bs.D.',
-    VES: 'Bs.S.',
-    VND: '₫',
-    VUV: 'Vt',
-    WST: 'T',
-    XAF: 'Fr',
-    XAG: 'oz t',
-    XAU: 'oz t',
-    XBA: '',
-    XBB: '',
-    XBC: '',
-    XBD: '',
-    XCD: '$',
-    XDR: 'SDR',
-    XOF: 'Fr',
-    XPD: 'oz t',
-    XPF: 'Fr',
-    XPT: 'oz t',
-    xts: '',
-    YER: '﷼',
-    ZAR: 'R',
-    ZMK: 'ZK',
-    ZMW: 'ZK'
-};
-const useMoney = (money)=>{
+const useMoney = (amount)=>{
     const { locale  } = shop.useLocale();
     const { currency  } = shop.useCurrency();
     const options = react.useMemo(()=>({
@@ -189,43 +14,71 @@ const useMoney = (money)=>{
         }), [
         currency
     ]);
-    const value = react.useMemo(()=>new Intl.NumberFormat(locale, options).format(money), [
-        locale,
-        options,
-        money
-    ]);
-    const baseParts = new Intl.NumberFormat(locale, options).formatToParts(money);
-    const nameParts = new Intl.NumberFormat(locale, {
+    const defaultFormatter = useLazyFormatter(locale, options);
+    const nameFormatter = useLazyFormatter(locale, {
         ...options,
         currencyDisplay: 'name'
-    }).formatToParts(money);
-    const narrowParts = new Intl.NumberFormat(locale, {
+    });
+    const narrowSymbolFormatter = useLazyFormatter(locale, {
         ...options,
         currencyDisplay: 'narrowSymbol'
-    }).formatToParts(money);
-    const moneyValue = react.useMemo(()=>({
-            currencyCode: currency,
-            currencyName: nameParts.find((part)=>part.type === 'currency')?.value ?? // e.g. "US dollars"
-            currency,
-            currencyNarrowSymbol: narrowParts.find((part)=>part.type === 'currency')?.value ?? // e.g. "$"
-            (currency ? NARROW_SYMBOL_MAP[currency] : '') ?? '',
-            parts: baseParts,
-            localizedString: value,
-            amount: baseParts.filter((part)=>[
-                    'decimal',
-                    'fraction',
-                    'group',
-                    'integer',
-                    'literal'
-                ].includes(part.type)).map((part)=>part.value).join('')
+    });
+    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';
+    // By wrapping these properties in functions, we only
+    // create formatters if they are going to be used.
+    const lazyFormatters = react.useMemo(()=>({
+            currencyCode: ()=>currency,
+            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: ()=>nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? currency,
+            currencySymbol: ()=>defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? currency,
+            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('')
         }), [
-        baseParts,
-        nameParts,
-        narrowParts,
-        value,
-        currency
+        currency,
+        amount,
+        nameFormatter,
+        defaultFormatter,
+        narrowSymbolFormatter,
+        withoutCurrencyFormatter,
+        withoutTrailingZerosFormatter,
+        withoutTrailingZerosOrCurrencyFormatter
+    ]);
+    // Call functions automatically when the properties are accessed
+    // to keep these functions as an implementation detail.
+    return react.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)=>Reflect.get(target, key)?.call(null)
+        }), [
+        lazyFormatters
     ]);
-    return moneyValue;
 };
+function useLazyFormatter(locale, options) {
+    return react.useMemo(()=>{
+        let memoized;
+        return ()=>memoized ??= new Intl.NumberFormat(locale, options);
+    }, [
+        locale,
+        options
+    ]);
+}
 
 exports.default = useMoney;

package/dist/cjs/index.js

@@ -67,12 +67,12 @@ var useCollectionsQuery = require('./hooks/shop/use-collections-query.js');
 var useProductQuery = require('./hooks/shop/use-product-query.js');
 var useProductsQuery = require('./hooks/shop/use-products-query.js');
 var useCurrentDevice = require('./hooks/use-current-device.js');
+var useFormatMoney = require('./hooks/useFormatMoney.js');
 var useLazyVideo = require('./hooks/use-lazy-video.js');
 var useCartId = require('./hooks/useCartId.js');
 var useCartLine = require('./hooks/useCartLine.js');
 var useCartUI = require('./hooks/useCartUI.js');
 var useCollection = require('./hooks/useCollection.js');
-var useFormatMoney = require('./hooks/useFormatMoney.js');
 var react = require('react');
 var useIsomorphicLayoutEffect = require('./hooks/useIsomorphicLayoutEffect.js');
 var useLoadScript = require('./hooks/useLoadScript.js');
@@ -190,6 +190,7 @@ exports.fpixel = fpixel;
 exports.gtag = gtag;
 exports.tiktokpixel = tiktokpixel;
 exports.RenderIf = render.RenderIf;
+exports.dataStringify = render.dataStringify;
 exports.props = render.props;
 exports.styles = render.styles;
 exports.template = render.template;
@@ -225,6 +226,7 @@ exports.useIsStorefrontProduct = shop.useIsStorefrontProduct;
 exports.useLocale = shop.useLocale;
 exports.useMatchMutate = shop.useMatchMutate;
 exports.useMobileOnly = shop.useMobileOnly;
+exports.useMoneyFormat = shop.useMoneyFormat;
 exports.usePageType = shop.usePageType;
 exports.usePluginEnable = shop.usePluginEnable;
 exports.useStoreFront = shop.useStoreFront;
@@ -234,12 +236,12 @@ exports.useCollectionsQuery = useCollectionsQuery.useCollectionsQuery;
 exports.useProductQuery = useProductQuery.useProductQuery;
 exports.useProductsQuery = useProductsQuery.useProductsQuery;
 exports.useCurrentDevice = useCurrentDevice.useCurrentDevice;
+exports.useFormatMoney = useFormatMoney.useFormatMoney;
 exports.useLazyVideo = useLazyVideo.useLazyVideo;
 exports.useCartId = useCartId.default;
 exports.useCartLine = useCartLine.default;
 exports.useCartUI = useCartUI.default;
 exports.useCollection = useCollection.useCollection;
-exports.useFormatMoney = useFormatMoney.default;
 Object.defineProperty(exports, 'useId', {
 	enumerable: true,
 	get: function () { return react.useId; }

package/dist/esm/helpers/render.js

@@ -37,6 +37,9 @@ const styles = (strings, ...keys)=>{
     }
     return styleArr.join(';');
 };
+const dataStringify = (obj)=>{
+    return JSON.stringify(obj).replace(/\\"/g, '"');
+};
 const template = (strings, ...keys)=>{
     let str = '';
     strings.forEach((item, index)=>{
@@ -56,4 +59,4 @@ const template = (strings, ...keys)=>{
     return str;
 };
 
-export { RenderIf, props, styles, template };
+export { RenderIf, dataStringify, props, styles, template };

package/dist/esm/hooks/shop.js

@@ -24,6 +24,17 @@ const useCurrency = ()=>{
         changeCurrency
     ]);
 };
+const useMoneyFormat = ()=>{
+    const moneyFormat = useShopStore((state)=>state.moneyFormat);
+    const moneyWithCurrencyFormat = useShopStore((state)=>state.moneyWithCurrencyFormat);
+    return useMemo(()=>({
+            moneyFormat,
+            moneyWithCurrencyFormat
+        }), [
+        moneyFormat,
+        moneyWithCurrencyFormat
+    ]);
+};
 const useSwatches = ()=>{
     const swatches = useShopStore((state)=>state.swatches);
     const changeSwatches = useShopStore((state)=>state.changeSwatches);
@@ -97,4 +108,4 @@ function useCheckoutUrl(url) {
     return storefrontToken ? `${url}?access_token=${storefrontToken}` : url;
 }
 
-export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, usePageType, usePluginEnable, useStoreFront, useSwatches };
+export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, useMoneyFormat, usePageType, usePluginEnable, useStoreFront, useSwatches };

package/dist/esm/hooks/useFormatMoney.js

@@ -1,17 +1,59 @@
-import { useCallback } from 'react';
-import { useLocale } from './shop.js';
+import { useMoneyFormat } from './shop.js';
 
-const useFormatMoney = ()=>{
-    const { locale  } = useLocale();
-    const formatMoney = useCallback((value, options)=>new Intl.NumberFormat(locale, {
-            style: 'currency',
-            ...options
-        }).format(value), [
-        locale
-    ]);
-    return {
-        formatMoney
+const useFormatMoney = (amount, withCurrency)=>{
+    const { moneyFormat , moneyWithCurrencyFormat  } = useMoneyFormat();
+    const formatMoney = function(cents, format) {
+        let value = '';
+        const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
+        const formatString = format || '${{amount}}';
+        if (typeof cents == 'string') {
+            cents = cents.replace('.', '');
+        }
+        /**
+     * check default
+     * @param opt opt
+     * @param def def
+     * @returns any
+     */ function defaultOption(opt, def) {
+            return typeof opt == 'undefined' ? def : opt;
+        }
+        /**
+     * formatWithDelimiters
+     * @param number number
+     * @param precision precision
+     * @param thousands thousands
+     * @param decimal decimal
+     * @returns any
+     */ // eslint-disable-next-line max-params
+        function formatWithDelimiters(number, precision, thousands, decimal) {
+            precision = defaultOption(precision, 2);
+            thousands = defaultOption(thousands, ',');
+            decimal = defaultOption(decimal, '.');
+            if (isNaN(number) || number == null) {
+                return 0;
+            }
+            // shopify làm tròn bằng cách cắt đi các số ở đằng sau chứ không sử dụng toFixed để làm tròn như toán học
+            number = parseFloat(`${number}`).toFixed(Number(precision) + 1).slice(0, -1);
+            const parts = number.split('.'), dollars = parts[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands), cents = parts[1] ? decimal + parts[1] : '';
+            return dollars + cents;
+        }
+        switch(formatString.match(placeholderRegex)[1]){
+            case 'amount':
+                value = formatWithDelimiters(cents, 2);
+                break;
+            case 'amount_no_decimals':
+                value = formatWithDelimiters(cents, 0);
+                break;
+            case 'amount_with_comma_separator':
+                value = formatWithDelimiters(cents, 2, '.', ',');
+                break;
+            case 'amount_no_decimals_with_comma_separator':
+                value = formatWithDelimiters(cents, 0, '.', ',');
+                break;
+        }
+        return formatString.replace(placeholderRegex, value);
     };
+    return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
 };
 
-export { useFormatMoney as default };
+export { useFormatMoney };

package/dist/esm/hooks/useMoney.js

@@ -1,182 +1,7 @@
 import { useMemo } from 'react';
 import { useLocale, useCurrency } from './shop.js';
 
-const NARROW_SYMBOL_MAP = {
-    AED: 'د.إ',
-    AFN: '؋',
-    ALL: 'L',
-    AMD: 'դր.',
-    ANG: 'ƒ',
-    AOA: 'Kz',
-    ARS: '$',
-    AUD: '$',
-    AWG: 'ƒ',
-    AZN: '₼',
-    BAM: 'КМ',
-    BBD: '$',
-    BDT: '৳',
-    BGN: 'лв.',
-    BHD: 'ب.د',
-    BIF: 'Fr',
-    BMD: '$',
-    BND: '$',
-    BOB: 'Bs.',
-    BRL: 'R$',
-    BSD: '$',
-    BTN: 'Nu.',
-    BWP: 'P',
-    BYN: 'Br',
-    BYR: 'Br',
-    BZD: '$',
-    CAD: '$',
-    CDF: 'Fr',
-    CHF: 'CHF',
-    CLF: 'UF',
-    CLP: '$',
-    CNY: '¥',
-    COP: '$',
-    CRC: '₡',
-    CUC: '$',
-    CUP: '$',
-    CVE: '$',
-    CZK: 'Kč',
-    DJF: 'Fdj',
-    DKK: 'kr.',
-    DOP: '$',
-    DZD: 'د.ج',
-    EGP: 'ج.م',
-    ERN: 'Nfk',
-    ETB: 'Br',
-    EUR: '€',
-    FJD: '$',
-    FKP: '£',
-    GBP: '£',
-    GEL: 'ლ',
-    GHS: '₵',
-    GIP: '£',
-    GMD: 'D',
-    GNF: 'Fr',
-    GTQ: 'Q',
-    GYD: '$',
-    HKD: '$',
-    HNL: 'L',
-    HRK: 'kn',
-    HTG: 'G',
-    HUF: 'Ft',
-    IDR: 'Rp',
-    ILS: '₪',
-    INR: '₹',
-    IQD: 'ع.د',
-    IRR: '﷼',
-    ISK: 'kr',
-    JMD: '$',
-    JOD: 'د.ا',
-    JPY: '¥',
-    KES: 'KSh',
-    KGS: 'som',
-    KHR: '៛',
-    KMF: 'Fr',
-    KPW: '₩',
-    KRW: '₩',
-    KWD: 'د.ك',
-    KYD: '$',
-    KZT: '〒',
-    LAK: '₭',
-    LBP: 'ل.ل',
-    LKR: '₨',
-    LRD: '$',
-    LSL: 'L',
-    LTL: 'Lt',
-    LVL: 'Ls',
-    LYD: 'ل.د',
-    MAD: 'د.م.',
-    MDL: 'L',
-    MGA: 'Ar',
-    MKD: 'ден',
-    MMK: 'K',
-    MNT: '₮',
-    MOP: 'P',
-    MRU: 'UM',
-    MUR: '₨',
-    MVR: 'MVR',
-    MWK: 'MK',
-    MXN: '$',
-    MYR: 'RM',
-    MZN: 'MTn',
-    NAD: '$',
-    NGN: '₦',
-    NIO: 'C$',
-    NOK: 'kr',
-    NPR: '₨',
-    NZD: '$',
-    OMR: 'ر.ع.',
-    PAB: 'B/.',
-    PEN: 'S/.',
-    PGK: 'K',
-    PHP: '₱',
-    PKR: '₨',
-    PLN: 'zł',
-    PYG: '₲',
-    QAR: 'ر.ق',
-    RON: 'Lei',
-    RSD: 'РСД',
-    RUB: '₽',
-    RWF: 'FRw',
-    SAR: 'ر.س',
-    SBD: '$',
-    SCR: '₨',
-    SDG: '£',
-    SEK: 'kr',
-    SGD: '$',
-    SHP: '£',
-    SKK: 'Sk',
-    SLL: 'Le',
-    SOS: 'Sh',
-    SRD: '$',
-    SSP: '£',
-    STN: 'Db',
-    SVC: '₡',
-    SYP: '£S',
-    SZL: 'E',
-    THB: '฿',
-    TJS: 'ЅМ',
-    TMT: 'T',
-    TND: 'د.ت',
-    TOP: 'T$',
-    TRY: '₺',
-    TTD: '$',
-    TWD: '$',
-    TZS: 'Sh',
-    UAH: '₴',
-    UGX: 'USh',
-    USD: '$',
-    UYU: '$',
-    UZS: '',
-    VED: 'Bs.D.',
-    VES: 'Bs.S.',
-    VND: '₫',
-    VUV: 'Vt',
-    WST: 'T',
-    XAF: 'Fr',
-    XAG: 'oz t',
-    XAU: 'oz t',
-    XBA: '',
-    XBB: '',
-    XBC: '',
-    XBD: '',
-    XCD: '$',
-    XDR: 'SDR',
-    XOF: 'Fr',
-    XPD: 'oz t',
-    XPF: 'Fr',
-    XPT: 'oz t',
-    xts: '',
-    YER: '﷼',
-    ZAR: 'R',
-    ZMK: 'ZK',
-    ZMW: 'ZK'
-};
-const useMoney = (money)=>{
+const useMoney = (amount)=>{
     const { locale  } = useLocale();
     const { currency  } = useCurrency();
     const options = useMemo(()=>({
@@ -185,43 +10,71 @@ const useMoney = (money)=>{
         }), [
         currency
     ]);
-    const value = useMemo(()=>new Intl.NumberFormat(locale, options).format(money), [
-        locale,
-        options,
-        money
-    ]);
-    const baseParts = new Intl.NumberFormat(locale, options).formatToParts(money);
-    const nameParts = new Intl.NumberFormat(locale, {
+    const defaultFormatter = useLazyFormatter(locale, options);
+    const nameFormatter = useLazyFormatter(locale, {
         ...options,
         currencyDisplay: 'name'
-    }).formatToParts(money);
-    const narrowParts = new Intl.NumberFormat(locale, {
+    });
+    const narrowSymbolFormatter = useLazyFormatter(locale, {
         ...options,
         currencyDisplay: 'narrowSymbol'
-    }).formatToParts(money);
-    const moneyValue = useMemo(()=>({
-            currencyCode: currency,
-            currencyName: nameParts.find((part)=>part.type === 'currency')?.value ?? // e.g. "US dollars"
-            currency,
-            currencyNarrowSymbol: narrowParts.find((part)=>part.type === 'currency')?.value ?? // e.g. "$"
-            (currency ? NARROW_SYMBOL_MAP[currency] : '') ?? '',
-            parts: baseParts,
-            localizedString: value,
-            amount: baseParts.filter((part)=>[
-                    'decimal',
-                    'fraction',
-                    'group',
-                    'integer',
-                    'literal'
-                ].includes(part.type)).map((part)=>part.value).join('')
+    });
+    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';
+    // By wrapping these properties in functions, we only
+    // create formatters if they are going to be used.
+    const lazyFormatters = useMemo(()=>({
+            currencyCode: ()=>currency,
+            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: ()=>nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? currency,
+            currencySymbol: ()=>defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? currency,
+            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('')
         }), [
-        baseParts,
-        nameParts,
-        narrowParts,
-        value,
-        currency
+        currency,
+        amount,
+        nameFormatter,
+        defaultFormatter,
+        narrowSymbolFormatter,
+        withoutCurrencyFormatter,
+        withoutTrailingZerosFormatter,
+        withoutTrailingZerosOrCurrencyFormatter
+    ]);
+    // Call functions automatically when the properties are accessed
+    // to keep these functions as an implementation detail.
+    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)=>Reflect.get(target, key)?.call(null)
+        }), [
+        lazyFormatters
     ]);
-    return moneyValue;
 };
+function useLazyFormatter(locale, options) {
+    return useMemo(()=>{
+        let memoized;
+        return ()=>memoized ??= new Intl.NumberFormat(locale, options);
+    }, [
+        locale,
+        options
+    ]);
+}
 
 export { useMoney as default };

package/dist/esm/index.js

@@ -48,7 +48,7 @@ import * as gtag from './helpers/tracking/gtag.js';
 export { gtag };
 import * as tiktokpixel from './helpers/tracking/tiktokpixel.js';
 export { tiktokpixel };
-export { RenderIf, props, styles, template } from './helpers/render.js';
+export { RenderIf, dataStringify, props, styles, template } from './helpers/render.js';
 export { baseAssetURL, isLocalEnv } from './helpers/convert.js';
 export { composeSize, composeSizeCss, genSizeClass } from './helpers/size.js';
 export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';
@@ -62,18 +62,18 @@ export { useCartNoteUpdate } from './hooks/cart/use-cart-note-update.js';
 export { useCreateCart } from './hooks/cart/use-create-cart.js';
 export { useRemoveCartItem } from './hooks/cart/use-remove-cart-item.js';
 export { useUpdateCartItem } from './hooks/cart/use-update-cart-item.js';
-export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, usePageType, usePluginEnable, useStoreFront, useSwatches } from './hooks/shop.js';
+export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, useMoneyFormat, usePageType, usePluginEnable, useStoreFront, useSwatches } from './hooks/shop.js';
 export { useCollectionQuery } from './hooks/shop/use-collection-query.js';
 export { useCollectionsQuery } from './hooks/shop/use-collections-query.js';
 export { useProductQuery } from './hooks/shop/use-product-query.js';
 export { useProductsQuery } from './hooks/shop/use-products-query.js';
 export { useCurrentDevice } from './hooks/use-current-device.js';
+export { useFormatMoney } from './hooks/useFormatMoney.js';
 export { useLazyVideo } from './hooks/use-lazy-video.js';
 export { default as useCartId } from './hooks/useCartId.js';
 export { default as useCartLine } from './hooks/useCartLine.js';
 export { default as useCartUI } from './hooks/useCartUI.js';
 export { useCollection } from './hooks/useCollection.js';
-export { default as useFormatMoney } from './hooks/useFormatMoney.js';
 export { useId } from 'react';
 export { default as useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect.js';
 export { default as useLoadScript } from './hooks/useLoadScript.js';

package/dist/types/index.d.ts

@@ -375,13 +375,13 @@ type InputNumberControlType<T> = SharedControlType<T> & {
     readonly?: boolean;
 };
 
-type SizeUnit$2 = '%' | 'cm' | 'mm' | 'Q' | 'in' | 'pc' | 'pt' | 'px' | 'em' | 'cap' | 'ex' | 'ch' | 'ic' | 'rem' | 'lh' | 'rlh' | 'vw' | 'vh' | 'vi' | 'vb' | 'vmin' | 'vmax';
+type SizeUnit = '%' | 'cm' | 'mm' | 'Q' | 'in' | 'pc' | 'pt' | 'px' | 'em' | 'cap' | 'ex' | 'ch' | 'ic' | 'rem' | 'lh' | 'rlh' | 'vw' | 'vh' | 'vi' | 'vb' | 'vmin' | 'vmax';
 type InputUnitControlType<T> = SharedControlType<T> & {
     type: 'input:unit';
     placeholder?: string;
     min?: number;
     max?: number;
-    units: SizeUnit$2[];
+    units: SizeUnit[];
     readonly?: boolean;
     useOnlyUnitInit?: boolean;
 };
@@ -816,29 +816,7 @@ type ProductListControlType<T> = SharedControlType<T> & {
     isMultiple?: boolean;
 };
 
-type SizeUnit$1 = '%' | 'cm' | 'mm' | 'Q' | 'in' | 'pc' | 'pt' | 'px' | 'em' | 'cap' | 'ex' | 'ch' | 'ic' | 'rem' | 'lh' | 'rlh' | 'vw' | 'vh' | 'vi' | 'vb' | 'vmin' | 'vmax';
-type InputUnitSpacingControlType<T> = SharedControlType<T> & {
-    type: 'input:unit-spacing';
-    placeholder?: string;
-    min?: number;
-    max?: number;
-    units: SizeUnit$1[];
-    readonly?: boolean;
-    useOnlyUnitInit?: boolean;
-};
-
-type SizeUnit = '%' | 'cm' | 'mm' | 'Q' | 'in' | 'pc' | 'pt' | 'px' | 'em' | 'cap' | 'ex' | 'ch' | 'ic' | 'rem' | 'lh' | 'rlh' | 'vw' | 'vh' | 'vi' | 'vb' | 'vmin' | 'vmax';
-type InputUnitWidthControlType<T> = SharedControlType<T> & {
-    type: 'input:unit-width';
-    placeholder?: string;
-    min?: number;
-    max?: number;
-    units: SizeUnit[];
-    readonly?: boolean;
-    useOnlyUnitInit?: boolean;
-};
-
-type ControlProp<T> = AngleControlType<T> | CheckboxControlType<T> | ColorPickerControlType<T> | GroupControlType<T> | IconControlType<T> | InputFixContentControlType<T> | InputNumberControlType<T> | InputUnitControlType<T> | InputUnitSpacingControlType<T> | InputUnitWidthControlType<T> | InputControlType<T> | MarginControlType<T> | PaddingControlType<T> | PositionControlType<T> | RadioGroupControlType | RangeControlType<T> | SegmentControlType<T> | SelectControlType<T> | TextareaControlType<T> | ToggleControlType<T> | ImageControlType<T> | ChildrensControlType | GridControlType<T> | FlexControlType<T> | TextEditorControlType<T> | ProductControlType<T> | TypographyControlType<T> | MenuControlType<T> | BehaviorStateControlType<T> | PickLinkControlType<T> | BoxShadowControlType<T> | TextShadowControlType<T> | BorderControlType<T> | BorderRadiusControlType<T> | RadiusPresetControlType<T> | SizeControlType<T> | ChildItemType<T> | PickMultiProductControlType<T> | CollectionControlType<T> | BackgroundControlType<T> | VisibilityControlType<T> | SelectVariantControlType | CountdownEvergreenType | Timezone<T> | CustomContentControlType<T> | DateTimePickerControlType | CountdownDailyType | KlaviyoCodes | YotpoLoyaltyCodes | InputWidthControlType<T> | CustomCodeEditor | LayoutSegmentControlType<T> | InputSpacing<T> | UniqueIdControlType<T> | PositionSquareControlType<T> | CustomCodeEditor | LayoutControlType<T> | SwatchesLinkControlType<T> | ProductListControlType<T> | CollectionBannerControlType<T>;
+type ControlProp<T> = AngleControlType<T> | CheckboxControlType<T> | ColorPickerControlType<T> | GroupControlType<T> | IconControlType<T> | InputFixContentControlType<T> | InputNumberControlType<T> | InputUnitControlType<T> | InputControlType<T> | MarginControlType<T> | PaddingControlType<T> | PositionControlType<T> | RadioGroupControlType | RangeControlType<T> | SegmentControlType<T> | SelectControlType<T> | TextareaControlType<T> | ToggleControlType<T> | ImageControlType<T> | ChildrensControlType | GridControlType<T> | FlexControlType<T> | TextEditorControlType<T> | ProductControlType<T> | TypographyControlType<T> | MenuControlType<T> | BehaviorStateControlType<T> | PickLinkControlType<T> | BoxShadowControlType<T> | TextShadowControlType<T> | BorderControlType<T> | BorderRadiusControlType<T> | RadiusPresetControlType<T> | SizeControlType<T> | ChildItemType<T> | PickMultiProductControlType<T> | CollectionControlType<T> | BackgroundControlType<T> | VisibilityControlType<T> | SelectVariantControlType | CountdownEvergreenType | Timezone<T> | CustomContentControlType<T> | DateTimePickerControlType | CountdownDailyType | KlaviyoCodes | YotpoLoyaltyCodes | InputWidthControlType<T> | CustomCodeEditor | LayoutSegmentControlType<T> | InputSpacing<T> | UniqueIdControlType<T> | PositionSquareControlType<T> | CustomCodeEditor | LayoutControlType<T> | SwatchesLinkControlType<T> | ProductListControlType<T> | CollectionBannerControlType<T>;
 type Setting<P extends BaseProps> = {
     id: 'setting';
     note?: string;
@@ -903,7 +881,6 @@ type ComponentSetting<P extends BaseProps> = {
     presets?: ComponentPreset[];
 };
 type ControlUI = {
-    layout?: 'vertical' | 'horizontal';
     type: 'group' | 'tab' | 'advanced' | 'control';
     label?: Record<string, string>;
     info?: Record<string, string>;
@@ -7309,6 +7286,8 @@ type ShopContextProps = {
     locale?: string;
     pageType?: PublishedThemePageType;
     currency?: string;
+    moneyFormat?: string;
+    moneyWithCurrencyFormat?: string;
     plugins?: string[];
     storefrontUrl?: string;
     storefrontToken?: string;
@@ -7757,6 +7736,7 @@ type CallbackCondition = () => string;
 declare const RenderIf: (c: boolean | null | undefined, t: string | CallbackCondition, f?: string | CallbackCondition) => string;
 declare const props: (strings: any, ...keys: any[]) => string;
 declare const styles: (strings: any, ...keys: any[]) => string;
+declare const dataStringify: (obj: object) => string;
 declare const template: (strings: any, ...keys: any[]) => string;
 
 declare const isLocalEnv: boolean;
@@ -7864,6 +7844,10 @@ declare const useCurrency: () => {
     currency: string | undefined;
     changeCurrency: (currency: string) => void;
 };
+declare const useMoneyFormat: () => {
+    moneyFormat: string | undefined;
+    moneyWithCurrencyFormat: string | undefined;
+};
 declare const useSwatches: () => {
     swatches: GlobalSwatchesData[] | undefined;
     changeSwatches: (swatches: GlobalSwatchesData[]) => void;
@@ -7900,6 +7884,8 @@ declare const useProductsQuery: (ids?: string[], options?: SWRConfiguration<Prod
 
 declare const useCurrentDevice: () => NameDevices;
 
+declare const useFormatMoney: (amount: number, withCurrency: boolean) => string;
+
 declare const useLazyVideo: () => void;
 
 declare const useCartId: () => {
@@ -7918,10 +7904,6 @@ declare function useCartUI(): {
 
 declare const useCollection: () => CollectionSelectFragment | undefined;
 
-declare const useFormatMoney: () => {
-    formatMoney: (value: number, options?: Intl.NumberFormatOptions & Required<Pick<Intl.NumberFormatOptions, 'currency'>>) => string;
-};
-
 declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 
 type LoadScriptParams = Parameters<typeof loadScript>;
@@ -7931,14 +7913,50 @@ type ScriptState = 'loading' | 'done' | 'error';
  */
 declare function useLoadScript(url: LoadScriptParams[0], options?: LoadScriptParams[1]): ScriptState;
 
-declare const useMoney: (money: number) => {
-    currencyCode: string | undefined;
-    currencyName: string | undefined;
-    currencyNarrowSymbol: string;
+type UseMoneyValue = {
+    /**
+     * The currency code from the `MoneyV2` object.
+     */
+    currencyCode: string;
+    /**
+     * The name for the currency code, returned by `Intl.NumberFormat`.
+     */
+    currencyName?: string;
+    /**
+     * The currency symbol returned by `Intl.NumberFormat`.
+     */
+    currencySymbol?: string;
+    /**
+     * The currency narrow symbol returned by `Intl.NumberFormat`.
+     */
+    currencyNarrowSymbol?: string;
+    /**
+     * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.
+     */
+    amount: string;
+    /**
+     * All parts returned by `Intl.NumberFormat.formatToParts`.
+     */
     parts: Intl.NumberFormatPart[];
+    /**
+     * A string returned by `new Intl.NumberFormat` for the amount and currency code,
+     * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).
+     */
     localizedString: string;
-    amount: string;
-};
+    /**
+     * A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.
+     * For example, `$640.00` turns into `$640`.
+     * `$640.42` remains `$640.42`.
+     */
+    withoutTrailingZeros: string;
+    /**
+     * 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.
+     * For example, `$640.00` turns into `640`.
+     * `$640.42` turns into `640.42`.
+     */
+    withoutTrailingZerosAndCurrency: string;
+};
+declare const useMoney: (amount: number) => UseMoneyValue;
 
 declare const usePrevious: <T>(value: T) => T | undefined;
 
@@ -8018,4 +8036,4 @@ type PublishedThemePageSelectFragment = Pick<PublishedThemePage, 'id' | 'name' |
 
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
 
-export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, WiserWidgetType, baseAssetURL, calculateFirstProduct, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeRadius, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypographyCss, convertOldLayout, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
+export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, WiserWidgetType, baseAssetURL, calculateFirstProduct, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeRadius, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypographyCss, convertOldLayout, dataStringify, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.12.0-next.9",
+  "version": "1.12.0-staging-2b439c82",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -24,8 +24,8 @@
     "type-check": "yarn tsc --noEmit"
   },
   "devDependencies": {
-    "@gem-sdk/adapter-shopify": "*",
-    "@gem-sdk/styles": "*"
+    "@gem-sdk/adapter-shopify": "1.12.0-staging-2b439c82",
+    "@gem-sdk/styles": "1.12.0-staging-66146a03"
   },
   "dependencies": {
     "react-error-boundary": "4.0.3",