@gem-sdk/core 1.12.0-next.4 → 1.12.0-next.41

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');
@@ -93,6 +93,7 @@ var getProductBySlug = require('./helpers/queries/get-product-by-slug.js');
 exports.AddOn = AddOn.default;
 exports.Render = Render.default;
 exports.RenderPreview = RenderPreview.default;
+exports.RenderChildren = Render_liquid.RenderChildren;
 exports.RenderLiquid = Render_liquid.default;
 exports.AddonProvider = AddonContext.AddonProvider;
 exports.useAddon = AddonContext.useAddon;
@@ -150,6 +151,7 @@ exports.makeStyleResponsive = makeStyle.makeStyleResponsive;
 exports.makeStyleResponsiveState = makeStyle.makeStyleResponsiveState;
 exports.makeStyleState = makeStyle.makeStyleState;
 exports.makeWidth = makeStyle.makeWidth;
+exports.removeNullUndefined = makeStyle.removeNullUndefined;
 exports.normalizeBuilderData = normalizeBuilderData.normalizeBuilderData;
 exports.prefetchQueries = prefetchQueries.prefetchQueries;
 exports.composeSpacing = spacing.composeSpacing;
@@ -176,7 +178,12 @@ exports.getGlobalColorStateStyle = colors.getGlobalColorStateStyle;
 exports.getGlobalColorStyle = colors.getGlobalColorStyle;
 exports.getSingleColorVariable = colors.getSingleColorVariable;
 exports.isColor = colors.isColor;
+exports.composeTypography = typography.composeTypography;
+exports.composeTypographyAttr = typography.composeTypographyAttr;
+exports.composeTypographyClassName = typography.composeTypographyClassName;
 exports.composeTypographyCss = typography.composeTypographyCss;
+exports.composeTypographyStyle = typography.composeTypographyStyle;
+exports.composeTypographyV2 = typography.composeTypographyV2;
 exports.genTypoClass = typography.genTypoClass;
 exports.composeCornerCss = radius.composeCornerCss;
 exports.composeRadius = radius.composeRadius;
@@ -190,6 +197,8 @@ exports.fpixel = fpixel;
 exports.gtag = gtag;
 exports.tiktokpixel = tiktokpixel;
 exports.RenderIf = render.RenderIf;
+exports.composeMemo = render.composeMemo;
+exports.dataStringify = render.dataStringify;
 exports.props = render.props;
 exports.styles = render.styles;
 exports.template = render.template;
@@ -225,6 +234,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 +244,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/components/Render.liquid.js

@@ -12,20 +12,35 @@ const componentTexts = [
     'Text',
     'Heading'
 ];
-const Render = ({ uid , builder , components , parentId , ...passProps })=>{
+const Render = ({ uid , builder , components , parentId , extraFiles ={} , ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
     if (!Component) {
         console.log('Miss component: ', item);
-        return '';
+        return {
+            liquid: '',
+            extraFiles
+        };
+    }
+    if (!item) {
+        return {
+            liquid: '',
+            extraFiles
+        };
     }
-    if (!item) return null;
     if (item?.type === 'section') {
-        return '';
+        return {
+            liquid: '',
+            extraFiles
+        };
     } else {
+        const customProps = {
+            extraFiles: {}
+        };
         const style = composeAdvanceStyle(item.advanced, item.tag);
+        let liquid = '';
         if (disableWrap.includes(item.tag)) {
-            return RenderIf(item?.childrens?.length, ()=>{
+            liquid = RenderIf(item?.childrens?.length, ()=>{
                 return Component({
                     builderProps: {
                         uid,
@@ -42,17 +57,19 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                             ...builder[id],
                             uid: id,
                             builder,
-                            components
+                            components,
+                            customProps
                         };
                     }),
-                    children: item.childrens.map((id)=>Render({
+                    children: item.childrens.map((id)=>RenderChildren({
                             uid: id,
                             builder,
                             components,
-                            parentId: uid
+                            customProps
                         })).join('')
                 });
-            }, ()=>Component({
+            }, ()=>{
+                return Component({
                     builderProps: {
                         uid,
                         builderData: item
@@ -64,42 +81,73 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                     isText: componentTexts.includes(item.tag) ? true : null,
                     parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
                     ...passProps
-                }));
+                });
+            });
+        } else {
+            liquid = template`<div style="${style}" class="${item.uid}">
+      ${RenderIf(item?.childrens?.length, ()=>{
+                return Component({
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    ...passProps,
+                    rawChildren: item.childrens.map((id)=>{
+                        return {
+                            ...builder[id],
+                            uid: id,
+                            builder,
+                            components,
+                            customProps
+                        };
+                    }),
+                    children: item.childrens.map((id)=>RenderChildren({
+                            uid: id,
+                            builder,
+                            components,
+                            customProps
+                        })).join('')
+                });
+            }, ()=>{
+                return Component({
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    isText: componentTexts.includes(item.tag) ? true : null,
+                    ...passProps
+                });
+            })}
+      </div>`;
         }
-        return template`<div style="${style}" class="${item.uid}">
-    ${RenderIf(item?.childrens?.length, ()=>Component({
-                builderProps: {
-                    uid,
-                    builderData: item
-                },
-                styles: item.styles,
-                setting: item.settings,
-                ...passProps,
-                rawChildren: item.childrens.map((id)=>{
-                    return {
-                        ...builder[id],
-                        uid: id,
-                        builder,
-                        components
-                    };
-                }),
-                children: item.childrens.map((id)=>Render({
-                        uid: id,
-                        builder,
-                        components
-                    })).join('')
-            }), ()=>Component({
-                builderProps: {
-                    uid,
-                    builderData: item
-                },
-                styles: item.styles,
-                setting: item.settings,
-                isText: componentTexts.includes(item.tag) ? true : null,
-                ...passProps
-            }))}
-    </div>`;
+        return {
+            liquid,
+            extraFiles: customProps.extraFiles
+        };
+    }
+};
+const RenderChildren = (props)=>{
+    const data = Render(props);
+    // Append to prop parent
+    for(const key in data.extraFiles){
+        if (Object.prototype.hasOwnProperty.call(data.extraFiles, key)) {
+            const value = data.extraFiles[key];
+            props.customProps.extraFiles[key] = value;
+        }
+    }
+    // Fix limit 256kb
+    const textEncoder = new TextEncoder();
+    const size = data?.liquid ? textEncoder.encode(data.liquid).length : 0;
+    if (Math.ceil(size / 1024) >= 180) {
+        const fileName = `gp-section-snippet-${props.uid}`;
+        props.customProps.extraFiles[fileName] = data.liquid;
+        return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id  %}`;
     }
+    return data.liquid;
 };
 
-export { Render as default };
+export { RenderChildren, Render as default };

package/dist/esm/helpers/compose-advance-style.js

@@ -115,7 +115,15 @@ function composeAdvanceStyle(data, tag) {
                     }
                 } else {
                     if (attr === 'border') {
-                        Object.assign(styles, getBorderStyle(value));
+                        const borderStyle = value;
+                        if (borderStyle.border === 'none') {
+                            borderStyle.border = 'solid';
+                            borderStyle.color = '#121212';
+                            borderStyle.isCustom = true;
+                            borderStyle.width = '0px';
+                            borderStyle.position = 'all';
+                        }
+                        Object.assign(styles, getBorderStyle(borderStyle));
                     }
                     if (attr === 'rounded') {
                         Object.assign(styles, getCornerCSSFromGlobal(value));

package/dist/esm/helpers/make-style.js

@@ -1,5 +1,12 @@
 import { getResponsiveValueByScreen } from './get-resonsive-value.js';
 
+const removeNullUndefined = (obj)=>Object.entries(obj).reduce((a, [k, v])=>{
+        if (v === null || v === undefined) return a;
+        return {
+            ...a,
+            [k]: v
+        };
+    }, {});
 const makeStyleKey = (name)=>{
     return [
         name,
@@ -14,10 +21,10 @@ const makeStyleKey = (name)=>{
     ].map((key)=>`--${key}`);
 };
 const makeStyle = (style)=>{
-    return Object.fromEntries(Object.entries(style).map(([key, value])=>[
+    return removeNullUndefined(Object.fromEntries(Object.entries(style).map(([key, value])=>[
             `--${key}`,
             value
-        ]));
+        ])));
 };
 const makeStyleState = (name, value)=>{
     if (!value) return {};
@@ -107,4 +114,4 @@ const makeLineClamp = (lineClampValue, hasLineClampValue)=>{
     };
 };
 
-export { makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth };
+export { makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined };

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)=>{
@@ -55,5 +58,7 @@ const template = (strings, ...keys)=>{
     });
     return str;
 };
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const composeMemo = (fn, _)=>fn();
 
-export { RenderIf, props, styles, template };
+export { RenderIf, composeMemo, dataStringify, props, styles, template };

package/dist/esm/helpers/typography.js

@@ -1,3 +1,6 @@
+import { getSingleColorVariable } from './colors.js';
+import { removeNullUndefined, makeStyle, makeStyleResponsive } from './make-style.js';
+
 const genTypoClass = (name)=>{
     return `g-${name}`;
 };
@@ -13,5 +16,65 @@ const composeTypographyCss = (typography)=>{
   ${lineHeight ? `line-height: ${lineHeight};` : ''}
   `;
 };
+function getCustomCSSByDevice(typography, device) {
+    if (!typography || !device) return {};
+    const suffix = device === 'desktop' || !device ? '' : `-${device}`;
+    const { fontFamily  } = typography?.[device] ?? {};
+    return {
+        [`--size${suffix}`]: typography?.[device]?.fontSize,
+        [`--lh${suffix}`]: typography?.[device]?.lineHeight,
+        [`--fs${suffix}`]: typography?.[device]?.fontStyle,
+        [`--ff${suffix}`]: fontFamily ? `var(--g-font-${fontFamily}, ${fontFamily})` : undefined,
+        [`--weight${suffix}`]: typography?.[device]?.fontWeight,
+        [`--ls${suffix}`]: typography?.[device]?.letterSpacing
+    };
+}
+const composeTypography = (typography)=>{
+    if (!typography) return {};
+    return removeNullUndefined({
+        ...getCustomCSSByDevice(typography, 'desktop'),
+        ...getCustomCSSByDevice(typography, 'tablet'),
+        ...getCustomCSSByDevice(typography, 'mobile')
+    });
+};
+const composeTypographyV2 = (value, attrs)=>{
+    if (!value) return {};
+    return removeNullUndefined({
+        ...makeStyle({
+            fs: !attrs?.italic && value?.fontStyle,
+            ff: value?.fontFamily ? `var(--g-font-${value.fontFamily}, ${value.fontFamily})` : undefined,
+            weight: !attrs?.bold && value?.fontWeight,
+            ls: value?.letterSpacing,
+            lh: value?.lineHeight
+        }),
+        ...makeStyleResponsive('size', value?.fontSize)
+    });
+};
+const composeTypographyAttr = (attrs)=>{
+    if (!attrs) return {};
+    return removeNullUndefined({
+        ...makeStyle({
+            fs: attrs?.italic && 'italic',
+            weight: attrs?.bold && 'bold',
+            c: getSingleColorVariable(attrs?.color),
+            tt: attrs?.transform,
+            tdl: attrs?.underline ? 'underline' : undefined
+        })
+    });
+};
+const composeTypographyClassName = (typo, typography)=>{
+    return typo ? typo?.type && !typo.custom ? genTypoClass(typo.type) : '' : typography?.type && genTypoClass(typography?.type);
+};
+const composeTypographyStyle = (typo, typography, disableAttr)=>{
+    if (typo) {
+        return {
+            ...composeTypographyV2(typo.custom),
+            ...!disableAttr && composeTypographyAttr(typo.attrs)
+        };
+    }
+    return {
+        ...!typography?.type ? composeTypography(typography?.custom) : {}
+    };
+};
 
-export { composeTypographyCss, genTypoClass };
+export { composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, genTypoClass };