@gem-sdk/core 2.0.0-dev.305 → 2.0.0-dev.324

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -100,9 +100,11 @@ const ComponentToolbarPreview = (props)=>{
             return;
         }
     };
-    const getSectionNumber = ()=>{
+    const getSectionNumber = react.useCallback(()=>{
         return root?.childrens?.length || 0;
-    };
+    }, [
+        root?.childrens?.length
+    ]);
     const getDeleteTooltipPosition = react.useCallback(()=>{
         if (props.tag == 'Section') return 'bottom';
         const $toolbar = document.body.querySelector('#storefront')?.querySelector('[data-toolbar-active="true"]');

package/dist/cjs/helpers/borders.js

@@ -87,6 +87,34 @@ const handleConvertBorderWidth = (value, type)=>{
     };
     return makeStyle.makeStyleState('bw', newVal);
 };
+const getInputBorderWidth = (data, position)=>{
+    return {
+        desktop: {
+            normal: data.desktop?.normal?.width?.split(' ')?.[position],
+            hover: data.desktop?.hover?.width?.split(' ')?.[position]
+        },
+        tablet: {
+            normal: data.tablet?.normal?.width?.split(' ')?.[position],
+            hover: data.tablet?.hover?.width?.split(' ')?.[position]
+        },
+        mobile: {
+            normal: data.mobile?.normal?.width?.split(' ')?.[position],
+            hover: data.mobile?.hover?.width?.split(' ')?.[position]
+        }
+    };
+};
+const handleConvertInputBorderWidth = (value, qtyStyle)=>{
+    if (!value) return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        return {
+            ...makeStyle.makeStyleResponsiveState('btw', getInputBorderWidth(data, 0)),
+            ...makeStyle.makeStyleResponsiveState('bbw', getInputBorderWidth(data, 2)),
+            ...qtyStyle === 'minimalist' ? makeStyle.makeStyleResponsiveState('brw', getInputBorderWidth(data, 1)) : {},
+            ...qtyStyle === 'minimalist' ? makeStyle.makeStyleResponsiveState('blw', getInputBorderWidth(data, 3)) : {}
+        };
+    }
+};
 const handleConvertBorderColor = (value)=>{
     if (!value) return undefined;
     if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
@@ -118,6 +146,40 @@ const handleConvertBorderColor = (value)=>{
     };
     return colors.getGlobalColorStateStyle('bc', newVal);
 };
+const handleConvertInputBorderColor = (value)=>{
+    if (!value) return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: data.desktop?.normal?.color,
+                hover: data.desktop?.hover?.color,
+                focus: data.desktop?.focus?.color
+            },
+            tablet: {
+                normal: data.tablet?.normal?.color,
+                hover: data.tablet?.hover?.color,
+                focus: data.tablet?.focus?.color
+            },
+            mobile: {
+                normal: data.mobile?.normal?.color,
+                hover: data.mobile?.hover?.color,
+                focus: data.mobile?.focus?.color
+            }
+        };
+        return {
+            ...colors.getGlobalColorStateResponsiveStyle('btc', newVal),
+            ...colors.getGlobalColorStateResponsiveStyle('bbc', newVal)
+        };
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.color,
+        hover: data?.hover?.color,
+        focus: data?.focus?.color
+    };
+    return colors.getGlobalColorStateStyle('bc', newVal);
+};
 const handleConvertClassColor = (value)=>{
     if (!value) return undefined;
     if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
@@ -213,3 +275,5 @@ exports.handleConvertBorderStyle = handleConvertBorderStyle;
 exports.handleConvertBorderWidth = handleConvertBorderWidth;
 exports.handleConvertClassColor = handleConvertClassColor;
 exports.handleConvertClassColorDynamicBtn = handleConvertClassColorDynamicBtn;
+exports.handleConvertInputBorderColor = handleConvertInputBorderColor;
+exports.handleConvertInputBorderWidth = handleConvertInputBorderWidth;

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

@@ -147,12 +147,34 @@ const makeLineClamp = (lineClampValue, hasLineClampValue)=>{
         mobile: getVal('mobile', lineClampValue, hasLineClampValue)
     };
 };
+const getResponsiveWidthValue = (key, value, unit)=>{
+    if (unit) return `${value?.[key]}${unit}`;
+    if (value?.[key] === 'default') return '1200px';
+    return value?.[key];
+};
 const makeStyleResponsiveWidth = (value, unit)=>{
-    const getResponsiveValue = (key)=>unit ? `${value?.[key]}${unit}` : value?.[key] === 'default' ? '1200px' : value?.[key];
     return {
-        '--w': getResponsiveValue('desktop'),
-        '--w-tablet': getResponsiveValue('tablet'),
-        '--w-mobile': getResponsiveValue('mobile')
+        '--w': getResponsiveWidthValue('desktop', value, unit),
+        '--w-tablet': getResponsiveWidthValue('tablet', value, unit),
+        '--w-mobile': getResponsiveWidthValue('mobile', value, unit)
+    };
+};
+const getResponsiveWidthValueWithoutAuto = (key, value, unit)=>{
+    if (unit) return `${value?.[key]}${unit}`;
+    switch(value?.[key]){
+        case 'default':
+            return '1200px';
+        case 'Auto':
+            return '100%';
+        default:
+            return value?.[key];
+    }
+};
+const makeStyleResponsiveWidthWithoutAuto = (value, unit)=>{
+    return {
+        '--w': getResponsiveWidthValueWithoutAuto('desktop', value, unit),
+        '--w-tablet': getResponsiveWidthValueWithoutAuto('tablet', value, unit),
+        '--w-mobile': getResponsiveWidthValueWithoutAuto('mobile', value, unit)
     };
 };
 
@@ -167,6 +189,7 @@ exports.makeStyleResponsive = makeStyleResponsive;
 exports.makeStyleResponsiveByScreen = makeStyleResponsiveByScreen;
 exports.makeStyleResponsiveState = makeStyleResponsiveState;
 exports.makeStyleResponsiveWidth = makeStyleResponsiveWidth;
+exports.makeStyleResponsiveWidthWithoutAuto = makeStyleResponsiveWidthWithoutAuto;
 exports.makeStyleState = makeStyleState;
 exports.makeWidth = makeWidth;
 exports.removeNullUndefined = removeNullUndefined;

package/dist/cjs/helpers/typography.js

@@ -22,7 +22,7 @@ const composeTypographyCss = (typography)=>{
 };
 const composeTypographyV2Css = (typography, isImportant)=>{
     const typographyCustom = typography?.custom;
-    const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing } = typographyCustom ?? {};
+    const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, textShadow } = typographyCustom ?? {};
     const typographyAttrs = typography?.attrs;
     const { bold, italic, underline, transform, color } = typographyAttrs ?? {};
     const composeImportant = isImportant ? '!important' : '';
@@ -39,8 +39,20 @@ const composeTypographyV2Css = (typography, isImportant)=>{
   ${italic ? `font-style: italic ${composeImportant}` : ''};
   ${underline ? `text-decoration-line: underline ${composeImportant}` : ''};
   ${transform ? `text-transform: ${transform} ${composeImportant}` : ''};
+  ${textShadow && textShadow.type !== 'none' ? `text-shadow: ${composeTextShadowCss(textShadow)}` : 'none'};
   `;
 };
+const composeTextShadowCss = (textShadow)=>{
+    const angle = typeof textShadow?.angle === 'number' ? textShadow?.angle : 0;
+    const angleInRadians = angle * Math.PI / 180;
+    const distance = parseFloat(textShadow?.distance ?? '0');
+    if (isNaN(distance)) {
+        return 'none';
+    }
+    const xOffset = Math.round(Math.cos(angleInRadians) * distance * 100) / 100;
+    const yOffset = Math.round(Math.sin(angleInRadians) * distance * 100) / 100;
+    return `${xOffset}px ${yOffset}px ${textShadow?.blur ?? '0'} ${textShadow.color}`;
+};
 const composeTextHoverColorCss = (device, colorHoverConfig, isImportant)=>{
     if (colorHoverConfig) {
         const composeImportant = isImportant ? '!important' : '';
@@ -155,10 +167,16 @@ const composeTypographyStyle = (typo, typography, disableAttr)=>{
 const isCustomTypo = (customTypo)=>{
     return customTypo && Object.keys(customTypo).length > 1 || customTypo && Object.keys(customTypo).length === 1 && !customTypo.fontSize;
 };
+const composeTypoHover = (attrs)=>{
+    return {
+        '--hvr-c': colors.getSingleColorVariable(attrs?.color) || ''
+    };
+};
 
 exports.composeFallbackTypographyStyle = composeFallbackTypographyStyle;
 exports.composeFontFamilyTypographyV2 = composeFontFamilyTypographyV2;
 exports.composeTextHoverColorCss = composeTextHoverColorCss;
+exports.composeTypoHover = composeTypoHover;
 exports.composeTypography = composeTypography;
 exports.composeTypographyAttr = composeTypographyAttr;
 exports.composeTypographyClassName = composeTypographyClassName;

package/dist/cjs/index.js

@@ -28,6 +28,8 @@ var storeProperty_generated = require('./graphql/queries/store-property.generate
 var previewPage_generated = require('./graphql/queries/preview-page.generated.js');
 var publishedShopMetas_generated = require('./graphql/queries/published-shop-metas.generated.js');
 var shopShopify_generated = require('./graphql/queries/shop-shopify.generated.js');
+var articles_generated = require('./graphql/queries/articles.generated.js');
+var blogs_generated = require('./graphql/queries/blogs.generated.js');
 var LibraryTemplate_generated = require('./graphql-app-api/queries/LibraryTemplate.generated.js');
 var ThemePage_generated = require('./graphql-app-api/queries/ThemePage.generated.js');
 var SaleFunnelDiscounts_generated = require('./graphql-app-api/queries/SaleFunnelDiscounts.generated.js');
@@ -167,6 +169,8 @@ exports.StorePropertyDocument = storeProperty_generated.StorePropertyDocument;
 exports.PreviewThemePageDocument = previewPage_generated.PreviewThemePageDocument;
 exports.PublishedShopMetasDocument = publishedShopMetas_generated.PublishedShopMetasDocument;
 exports.ShopShopifyDocument = shopShopify_generated.ShopShopifyDocument;
+exports.ArticlesDocument = articles_generated.ArticlesDocument;
+exports.BlogsDocument = blogs_generated.BlogsDocument;
 exports.LibraryTemplateDocument = LibraryTemplate_generated.LibraryTemplateDocument;
 exports.ThemePageDocument = ThemePage_generated.ThemePageDocument;
 exports.SaleFunnelDiscountsDocument = SaleFunnelDiscounts_generated.SaleFunnelDiscountsDocument;
@@ -182,6 +186,8 @@ exports.handleConvertBorderStyle = borders.handleConvertBorderStyle;
 exports.handleConvertBorderWidth = borders.handleConvertBorderWidth;
 exports.handleConvertClassColor = borders.handleConvertClassColor;
 exports.handleConvertClassColorDynamicBtn = borders.handleConvertClassColorDynamicBtn;
+exports.handleConvertInputBorderColor = borders.handleConvertInputBorderColor;
+exports.handleConvertInputBorderWidth = borders.handleConvertInputBorderWidth;
 exports.getCarouselContainerHeight = carousel.getCarouselContainerHeight;
 exports.makeContainerWidthOrHeight = carousel.makeContainerWidthOrHeight;
 exports.makeDotGapToCarouselStyle = carousel.makeDotGapToCarouselStyle;
@@ -264,6 +270,7 @@ exports.makeStyleResponsive = makeStyle.makeStyleResponsive;
 exports.makeStyleResponsiveByScreen = makeStyle.makeStyleResponsiveByScreen;
 exports.makeStyleResponsiveState = makeStyle.makeStyleResponsiveState;
 exports.makeStyleResponsiveWidth = makeStyle.makeStyleResponsiveWidth;
+exports.makeStyleResponsiveWidthWithoutAuto = makeStyle.makeStyleResponsiveWidthWithoutAuto;
 exports.makeStyleState = makeStyle.makeStyleState;
 exports.makeWidth = makeStyle.makeWidth;
 exports.removeNullUndefined = makeStyle.removeNullUndefined;
@@ -316,6 +323,7 @@ exports.makeStyleWithDefault = size.makeStyleWithDefault;
 exports.composeFallbackTypographyStyle = typography.composeFallbackTypographyStyle;
 exports.composeFontFamilyTypographyV2 = typography.composeFontFamilyTypographyV2;
 exports.composeTextHoverColorCss = typography.composeTextHoverColorCss;
+exports.composeTypoHover = typography.composeTypoHover;
 exports.composeTypography = typography.composeTypography;
 exports.composeTypographyAttr = typography.composeTypographyAttr;
 exports.composeTypographyClassName = typography.composeTypographyClassName;

package/dist/esm/components/ComponentToolbarPreview.js

@@ -96,9 +96,11 @@ const ComponentToolbarPreview = (props)=>{
             return;
         }
     };
-    const getSectionNumber = ()=>{
+    const getSectionNumber = useCallback(()=>{
         return root?.childrens?.length || 0;
-    };
+    }, [
+        root?.childrens?.length
+    ]);
     const getDeleteTooltipPosition = useCallback(()=>{
         if (props.tag == 'Section') return 'bottom';
         const $toolbar = document.body.querySelector('#storefront')?.querySelector('[data-toolbar-active="true"]');

package/dist/esm/helpers/borders.js

@@ -85,6 +85,34 @@ const handleConvertBorderWidth = (value, type)=>{
     };
     return makeStyleState('bw', newVal);
 };
+const getInputBorderWidth = (data, position)=>{
+    return {
+        desktop: {
+            normal: data.desktop?.normal?.width?.split(' ')?.[position],
+            hover: data.desktop?.hover?.width?.split(' ')?.[position]
+        },
+        tablet: {
+            normal: data.tablet?.normal?.width?.split(' ')?.[position],
+            hover: data.tablet?.hover?.width?.split(' ')?.[position]
+        },
+        mobile: {
+            normal: data.mobile?.normal?.width?.split(' ')?.[position],
+            hover: data.mobile?.hover?.width?.split(' ')?.[position]
+        }
+    };
+};
+const handleConvertInputBorderWidth = (value, qtyStyle)=>{
+    if (!value) return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        return {
+            ...makeStyleResponsiveState('btw', getInputBorderWidth(data, 0)),
+            ...makeStyleResponsiveState('bbw', getInputBorderWidth(data, 2)),
+            ...qtyStyle === 'minimalist' ? makeStyleResponsiveState('brw', getInputBorderWidth(data, 1)) : {},
+            ...qtyStyle === 'minimalist' ? makeStyleResponsiveState('blw', getInputBorderWidth(data, 3)) : {}
+        };
+    }
+};
 const handleConvertBorderColor = (value)=>{
     if (!value) return undefined;
     if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
@@ -116,6 +144,40 @@ const handleConvertBorderColor = (value)=>{
     };
     return getGlobalColorStateStyle('bc', newVal);
 };
+const handleConvertInputBorderColor = (value)=>{
+    if (!value) return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: data.desktop?.normal?.color,
+                hover: data.desktop?.hover?.color,
+                focus: data.desktop?.focus?.color
+            },
+            tablet: {
+                normal: data.tablet?.normal?.color,
+                hover: data.tablet?.hover?.color,
+                focus: data.tablet?.focus?.color
+            },
+            mobile: {
+                normal: data.mobile?.normal?.color,
+                hover: data.mobile?.hover?.color,
+                focus: data.mobile?.focus?.color
+            }
+        };
+        return {
+            ...getGlobalColorStateResponsiveStyle('btc', newVal),
+            ...getGlobalColorStateResponsiveStyle('bbc', newVal)
+        };
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.color,
+        hover: data?.hover?.color,
+        focus: data?.focus?.color
+    };
+    return getGlobalColorStateStyle('bc', newVal);
+};
 const handleConvertClassColor = (value)=>{
     if (!value) return undefined;
     if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
@@ -202,4 +264,4 @@ const composeBorderDevice = (value, device)=>{
     };
 };
 
-export { composeBorderCss, composeBorderResponsive, getBorderRadiusStyle, getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn };
+export { composeBorderCss, composeBorderResponsive, getBorderRadiusStyle, getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, handleConvertInputBorderColor, handleConvertInputBorderWidth };

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

@@ -145,13 +145,35 @@ const makeLineClamp = (lineClampValue, hasLineClampValue)=>{
         mobile: getVal('mobile', lineClampValue, hasLineClampValue)
     };
 };
+const getResponsiveWidthValue = (key, value, unit)=>{
+    if (unit) return `${value?.[key]}${unit}`;
+    if (value?.[key] === 'default') return '1200px';
+    return value?.[key];
+};
 const makeStyleResponsiveWidth = (value, unit)=>{
-    const getResponsiveValue = (key)=>unit ? `${value?.[key]}${unit}` : value?.[key] === 'default' ? '1200px' : value?.[key];
     return {
-        '--w': getResponsiveValue('desktop'),
-        '--w-tablet': getResponsiveValue('tablet'),
-        '--w-mobile': getResponsiveValue('mobile')
+        '--w': getResponsiveWidthValue('desktop', value, unit),
+        '--w-tablet': getResponsiveWidthValue('tablet', value, unit),
+        '--w-mobile': getResponsiveWidthValue('mobile', value, unit)
+    };
+};
+const getResponsiveWidthValueWithoutAuto = (key, value, unit)=>{
+    if (unit) return `${value?.[key]}${unit}`;
+    switch(value?.[key]){
+        case 'default':
+            return '1200px';
+        case 'Auto':
+            return '100%';
+        default:
+            return value?.[key];
+    }
+};
+const makeStyleResponsiveWidthWithoutAuto = (value, unit)=>{
+    return {
+        '--w': getResponsiveWidthValueWithoutAuto('desktop', value, unit),
+        '--w-tablet': getResponsiveWidthValueWithoutAuto('tablet', value, unit),
+        '--w-mobile': getResponsiveWidthValueWithoutAuto('mobile', value, unit)
     };
 };
 
-export { makeAspectRatio, makeGlobalSizeHeightResponsive, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleResponsiveWidth, makeStyleState, makeWidth, removeNullUndefined };
+export { makeAspectRatio, makeGlobalSizeHeightResponsive, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleResponsiveWidth, makeStyleResponsiveWidthWithoutAuto, makeStyleState, makeWidth, removeNullUndefined };

package/dist/esm/helpers/typography.js

@@ -20,7 +20,7 @@ const composeTypographyCss = (typography)=>{
 };
 const composeTypographyV2Css = (typography, isImportant)=>{
     const typographyCustom = typography?.custom;
-    const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing } = typographyCustom ?? {};
+    const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, textShadow } = typographyCustom ?? {};
     const typographyAttrs = typography?.attrs;
     const { bold, italic, underline, transform, color } = typographyAttrs ?? {};
     const composeImportant = isImportant ? '!important' : '';
@@ -37,8 +37,20 @@ const composeTypographyV2Css = (typography, isImportant)=>{
   ${italic ? `font-style: italic ${composeImportant}` : ''};
   ${underline ? `text-decoration-line: underline ${composeImportant}` : ''};
   ${transform ? `text-transform: ${transform} ${composeImportant}` : ''};
+  ${textShadow && textShadow.type !== 'none' ? `text-shadow: ${composeTextShadowCss(textShadow)}` : 'none'};
   `;
 };
+const composeTextShadowCss = (textShadow)=>{
+    const angle = typeof textShadow?.angle === 'number' ? textShadow?.angle : 0;
+    const angleInRadians = angle * Math.PI / 180;
+    const distance = parseFloat(textShadow?.distance ?? '0');
+    if (isNaN(distance)) {
+        return 'none';
+    }
+    const xOffset = Math.round(Math.cos(angleInRadians) * distance * 100) / 100;
+    const yOffset = Math.round(Math.sin(angleInRadians) * distance * 100) / 100;
+    return `${xOffset}px ${yOffset}px ${textShadow?.blur ?? '0'} ${textShadow.color}`;
+};
 const composeTextHoverColorCss = (device, colorHoverConfig, isImportant)=>{
     if (colorHoverConfig) {
         const composeImportant = isImportant ? '!important' : '';
@@ -153,5 +165,10 @@ const composeTypographyStyle = (typo, typography, disableAttr)=>{
 const isCustomTypo = (customTypo)=>{
     return customTypo && Object.keys(customTypo).length > 1 || customTypo && Object.keys(customTypo).length === 1 && !customTypo.fontSize;
 };
+const composeTypoHover = (attrs)=>{
+    return {
+        '--hvr-c': getSingleColorVariable(attrs?.color) || ''
+    };
+};
 
-export { composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeTextHoverColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass };
+export { composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeTextHoverColorCss, composeTypoHover, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass };

package/dist/esm/index.js

@@ -26,13 +26,15 @@ export { StorePropertyDocument } from './graphql/queries/store-property.generate
 export { PreviewThemePageDocument } from './graphql/queries/preview-page.generated.js';
 export { PublishedShopMetasDocument } from './graphql/queries/published-shop-metas.generated.js';
 export { ShopShopifyDocument } from './graphql/queries/shop-shopify.generated.js';
+export { ArticlesDocument } from './graphql/queries/articles.generated.js';
+export { BlogsDocument } from './graphql/queries/blogs.generated.js';
 export { LibraryTemplateDocument } from './graphql-app-api/queries/LibraryTemplate.generated.js';
 export { ThemePageDocument } from './graphql-app-api/queries/ThemePage.generated.js';
 export { SaleFunnelDiscountsDocument } from './graphql-app-api/queries/SaleFunnelDiscounts.generated.js';
 export { LibrarySaleFunnelDocument } from './graphql-app-api/queries/LibrarySaleFunnelDiscount.generated.js';
 export { ShopLibraryPageDocument } from './graphql-app-api/queries/ShopLibraryPage.generated.js';
 export { SaleFunnelOfferDocument } from './graphql-app-api/queries/SaleFunnelOffer.generated.js';
-export { composeBorderCss, composeBorderResponsive, getBorderRadiusStyle, getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn } from './helpers/borders.js';
+export { composeBorderCss, composeBorderResponsive, getBorderRadiusStyle, getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, handleConvertInputBorderColor, handleConvertInputBorderWidth } from './helpers/borders.js';
 export { getCarouselContainerHeight, makeContainerWidthOrHeight, makeDotGapToCarouselStyle } from './helpers/carousel.js';
 export { cls } from './helpers/cls.js';
 export { animations } from './helpers/animations.js';
@@ -66,7 +68,7 @@ export { convertHTML } from './helpers/covert-entities-html.js';
 export { composePositionLineHeight, composePostionIconList } from './helpers/icon-list.js';
 export { isDefined } from './helpers/is-defined.js';
 export { composeGridLayout, convertOldLayout, getLayoutClasses, gridToArrayRegex, optionLayoutStyle } from './helpers/layout.js';
-export { makeAspectRatio, makeGlobalSizeHeightResponsive, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleResponsiveWidth, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
+export { makeAspectRatio, makeGlobalSizeHeightResponsive, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleResponsiveWidth, makeStyleResponsiveWidthWithoutAuto, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
 export { convertTextAlignToJustify, getAlignmentClasses } from './helpers/align.js';
 export { filterTruthyStyles } from './helpers/filter-truthy-styles.js';
 export { checkInStock } from './helpers/variant.js';
@@ -76,7 +78,7 @@ export { composeCornerCss, composeRadius, composeRadiusResponsive, getCornerCSSF
 export { RenderIf, composeMemo, dataStringify, props, removeUndefinedValuesFromObject, styles, template } from './helpers/render.js';
 export { composeShadow, composeShadowCss, getResponsiveStyleShadow, getResponsiveStyleShadowWithoutState, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';
 export { composeSize, composeSizeCss, genSizeClass, getAspectRatioGlobalSize, getGlobalSizeGap, getHeightByShapeGlobalSize, getPaddingGlobalSize, getPaddingStyleByDevice, getResponsiveStylePadding, getValueByDevice, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeGlobalSizeIcon, makeStyleWithDefault } from './helpers/size.js';
-export { composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeTextHoverColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass } from './helpers/typography.js';
+export { composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeTextHoverColorCss, composeTypoHover, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass } from './helpers/typography.js';
 export { useArticlesQuery, useBlogsQuery } from './hooks/articles/useArticlesQuery.js';
 export { useAddToCart } from './hooks/cart/use-add-to-cart.js';
 export { useCartData } from './hooks/cart/use-cart-data.js';