@gem-sdk/core 1.9.15 → 1.9.20

package/dist/cjs/helpers/background.js

@@ -101,5 +101,9 @@ const getStyleBgAttachment = (background)=>{
 const getBgAttachmentByDevice = (background, device)=>{
     return background?.[device]?.attachment;
 };
+const composeBackgroundCss = (backgroundColor)=>{
+    return `${backgroundColor ? `background-color: ${colors.getSingleColorVariable(backgroundColor)} !important;` : undefined}`;
+};
 
+exports.composeBackgroundCss = composeBackgroundCss;
 exports.getStyleBackgroundByDevice = getStyleBackgroundByDevice;

package/dist/cjs/helpers/borders.js

@@ -134,9 +134,53 @@ const handleConvertClassColor = (value)=>{
     };
     return colors.getGlobalColorStateClass('border', newVal);
 };
+const handleConvertClassColorDynamicBtn = (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.getGlobalColorStateResponsiveClassDynamicBtn('border', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.color,
+        hover: data?.hover?.color,
+        focus: data?.focus?.color
+    };
+    return colors.getGlobalColorStateClassDynamicBtn('border', newVal);
+};
+const composeBorderCss = (borderV)=>{
+    if (!borderV) return '';
+    const { border , width , color , isCustom  } = borderV;
+    if (isCustom) {
+        return '';
+    }
+    return `${border ? `border-style: ${border};` : ''}
+  ${width ? `border-width: ${width};` : undefined}
+  ${color ? `border-color: ${colors.getSingleColorVariable(color)};` : undefined}
+  `;
+};
 
+exports.composeBorderCss = composeBorderCss;
 exports.getBorderStyle = getBorderStyle;
 exports.handleConvertBorderColor = handleConvertBorderColor;
 exports.handleConvertBorderStyle = handleConvertBorderStyle;
 exports.handleConvertBorderWidth = handleConvertBorderWidth;
 exports.handleConvertClassColor = handleConvertClassColor;
+exports.handleConvertClassColorDynamicBtn = handleConvertClassColorDynamicBtn;

package/dist/cjs/helpers/colors.js

@@ -34,6 +34,18 @@ const getGlobalColorStateClass = (type, data)=>{
         }
     }).filter(isDefined.isDefined).join(' ');
 };
+const getGlobalColorStateClassDynamicBtn = (type, data)=>{
+    if (!data) return '';
+    return Object.entries(data).map(([state, value])=>{
+        const clName = getGlobalColorClass(type, value);
+        if (!clName) return undefined;
+        if (state === 'normal') {
+            return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${clName}`;
+        } else {
+            return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${state}:${clName}`;
+        }
+    }).filter(isDefined.isDefined).join(' ');
+};
 const getGlobalColorStateResponsiveClass = (type, data)=>{
     if (!data) return '';
     return Object.entries(data).map(([device, objectState])=>{
@@ -60,6 +72,32 @@ const getGlobalColorStateResponsiveClass = (type, data)=>{
         }
     }).filter(Boolean).join(' ');
 };
+const getGlobalColorStateResponsiveClassDynamicBtn = (type, data)=>{
+    if (!data) return '';
+    return Object.entries(data).map(([device, objectState])=>{
+        if (device === 'desktop') {
+            return Object.entries(objectState).map(([state, value])=>{
+                const clName = getGlobalColorClass(type, value);
+                if (!clName) return undefined;
+                if (state === 'normal') {
+                    return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${clName}`;
+                } else {
+                    return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${state}:${clName}`;
+                }
+            }).filter(isDefined.isDefined).join(' ');
+        } else {
+            return Object.entries(objectState).map(([state, value])=>{
+                const clName = getGlobalColorClass(type, value);
+                if (!clName) return undefined;
+                if (state === 'normal') {
+                    return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${device}:${clName}`;
+                } else {
+                    return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${device}:${state}:${clName}`;
+                }
+            }).filter(isDefined.isDefined).join(' ');
+        }
+    }).filter(Boolean).join(' ');
+};
 const getGlobalColorResponsiveStyle = (type, data)=>{
     if (!data) return {};
     return Object.fromEntries(Object.entries(data).map(([device, value])=>{
@@ -125,13 +163,19 @@ const getGlobalColorStyle = (data)=>{
         '--c': getSingleColorVariable(data)
     };
 };
+const composeTextColorCss = (color)=>{
+    return `${color ? `color: ${getSingleColorVariable(color)} !important;` : ''}`;
+};
 
+exports.composeTextColorCss = composeTextColorCss;
 exports.getGlobalColorCSSProp = getGlobalColorCSSProp;
 exports.getGlobalColorClass = getGlobalColorClass;
 exports.getGlobalColorResponsiveClass = getGlobalColorResponsiveClass;
 exports.getGlobalColorResponsiveStyle = getGlobalColorResponsiveStyle;
 exports.getGlobalColorStateClass = getGlobalColorStateClass;
+exports.getGlobalColorStateClassDynamicBtn = getGlobalColorStateClassDynamicBtn;
 exports.getGlobalColorStateResponsiveClass = getGlobalColorStateResponsiveClass;
+exports.getGlobalColorStateResponsiveClassDynamicBtn = getGlobalColorStateResponsiveClassDynamicBtn;
 exports.getGlobalColorStateResponsiveStyle = getGlobalColorStateResponsiveStyle;
 exports.getGlobalColorStateStyle = getGlobalColorStateStyle;
 exports.getGlobalColorStyle = getGlobalColorStyle;

package/dist/cjs/helpers/radius.js

@@ -97,7 +97,36 @@ const getRadiusStyleActiveState = (radiusValue)=>{
     }
     return getRadiusCSSFromGlobal('normal', radiusValue?.active?.radiusType);
 };
+const composeCornerCss = (value)=>{
+    if (!value) {
+        return;
+    }
+    const { radiusType , bblr , bbrr , btlr , btrr  } = value;
+    let radiusValue = undefined;
+    switch(radiusType){
+        case 'medium':
+        case 'large':
+        case 'small':
+            radiusValue = `border-radius: var(--g-radius-${radiusType});`;
+            break;
+        case 'circle':
+        case 'none':
+        case 'custom':
+            radiusValue = `
+      ${bblr ? `border-bottom-left-radius: ${bblr};` : ''}
+      
+      ${bbrr ? `border-bottom-right-radius: ${bbrr};` : ''}
+
+      ${btlr ? `border-top-left-radius: ${btlr};` : ''}
+      
+      ${btrr ? `border-top-right-radius: ${btrr};` : ''}
+      `;
+            break;
+    }
+    return radiusValue;
+};
 
+exports.composeCornerCss = composeCornerCss;
 exports.composeRadius = composeRadius;
 exports.getCornerCSSFromGlobal = getCornerCSSFromGlobal;
 exports.getCustomRadius = getCustomRadius;

package/dist/cjs/helpers/shadow.js

@@ -43,6 +43,14 @@ const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{
     }
     return style;
 };
+const composeShadowCss = ({ hasBoxShadow , boxShadowValue  })=>{
+    if (!hasBoxShadow) return undefined;
+    if (!boxShadowValue) return undefined;
+    const { value: distance , unit: unitDistance  } = parseValueWithUnit(`${boxShadowValue?.distance}`);
+    return `box-shadow: ${Math.cos(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${boxShadowValue?.blur} ${boxShadowValue?.spread + ' '}${colors.getSingleColorVariable(boxShadowValue?.color)};`;
+};
 
+exports.composeShadowCss = composeShadowCss;
 exports.getStyleShadow = getStyleShadow;
 exports.getStyleShadowState = getStyleShadowState;
+exports.parseValueWithUnit = parseValueWithUnit;

package/dist/cjs/helpers/size.js

@@ -15,5 +15,21 @@ function getCustomSizeCSSByDevice(size, device) {
 const composeSize = (size)=>{
     return Object.assign({}, getCustomSizeCSSByDevice(size, 'desktop'), getCustomSizeCSSByDevice(size, 'tablet'), getCustomSizeCSSByDevice(size, 'mobile'));
 };
+function genSizeClass(name) {
+    return `g-s-${name}`;
+}
+const composeSizeCss = (spacing)=>{
+    if (spacing === undefined) return '';
+    const size = spacing;
+    const sizeHozi = spacing?.custom?.desktop?.horizontal;
+    const sizeVerti = spacing?.custom?.desktop?.vertical;
+    if (!size?.custom) return undefined;
+    return `
+  ${sizeHozi ? `padding-left: ${sizeHozi}; padding-right: ${sizeHozi};` : undefined}
+  ${sizeVerti ? `padding-top: ${sizeVerti}; padding-bottom: ${sizeVerti};` : undefined}
+  `;
+};
 
 exports.composeSize = composeSize;
+exports.composeSizeCss = composeSizeCss;
+exports.genSizeClass = genSizeClass;

package/dist/cjs/helpers/typography.js

@@ -3,5 +3,18 @@
 const genTypoClass = (name)=>{
     return `g-${name}`;
 };
+const composeTypographyCss = (typography)=>{
+    const typographyCustom = typography?.custom;
+    const { fontFamily , fontSize , fontStyle , fontWeight , lineHeight , letterSpacing  } = typographyCustom?.desktop ?? {};
+    return `
+  ${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily});` : ''}
+  ${fontSize ? `font-size: ${fontSize};` : ''}
+  ${fontStyle ? `font-style: ${fontStyle};` : ''}
+  ${fontWeight ? `font-weight: ${fontWeight};` : ''}
+  ${letterSpacing ? `letter-spacing: ${letterSpacing};` : ''}
+  ${lineHeight ? `line-height: ${lineHeight};` : ''}
+  `;
+};
 
+exports.composeTypographyCss = composeTypographyCss;
 exports.genTypoClass = genTypoClass;

package/dist/cjs/index.js

@@ -35,12 +35,9 @@ var isEmptyChildren = require('./helpers/is-empty-children.js');
 var makeStyle = require('./helpers/make-style.js');
 var normalizeBuilderData = require('./helpers/normalize-builder-data.js');
 var prefetchQueries = require('./helpers/prefetch-queries.js');
-var shadow = require('./helpers/shadow.js');
-var size = require('./helpers/size.js');
 var spacing = require('./helpers/spacing.js');
 var loadScript = require('./helpers/load-script.js');
 var email = require('./helpers/email.js');
-var background = require('./helpers/background.js');
 var cssVariable = require('./helpers/css-variable.js');
 var layout = require('./helpers/layout.js');
 var isDefined = require('./helpers/is-defined.js');
@@ -53,6 +50,9 @@ var gtag = require('./helpers/tracking/gtag.js');
 var tiktokpixel = require('./helpers/tracking/tiktokpixel.js');
 var render = require('./helpers/render.js');
 var convert = require('./helpers/convert.js');
+var size = require('./helpers/size.js');
+var shadow = require('./helpers/shadow.js');
+var background = require('./helpers/background.js');
 var useAddToCart = require('./hooks/cart/use-add-to-cart.js');
 var useCartData = require('./hooks/cart/use-cart-data.js');
 var useCartDiscountCodesUpdate = require('./hooks/cart/use-cart-discount-codes-update.js');
@@ -125,11 +125,13 @@ exports.PublishedThemePagesDocument = publishedThemePages_generated.PublishedThe
 exports.ProductsDocument = products_generated.ProductsDocument;
 exports.StorePropertyDocument = storeProperty_generated.StorePropertyDocument;
 exports.PreviewPageDocument = previewPage_generated.PreviewPageDocument;
+exports.composeBorderCss = borders.composeBorderCss;
 exports.getBorderStyle = borders.getBorderStyle;
 exports.handleConvertBorderColor = borders.handleConvertBorderColor;
 exports.handleConvertBorderStyle = borders.handleConvertBorderStyle;
 exports.handleConvertBorderWidth = borders.handleConvertBorderWidth;
 exports.handleConvertClassColor = borders.handleConvertClassColor;
+exports.handleConvertClassColorDynamicBtn = borders.handleConvertClassColorDynamicBtn;
 exports.cls = cls.cls;
 exports.composeAdvanceStyle = composeAdvanceStyle.composeAdvanceStyle;
 exports.flattenConnection = flattenConnection.flattenConnection;
@@ -149,32 +151,33 @@ exports.makeStyleState = makeStyle.makeStyleState;
 exports.makeWidth = makeStyle.makeWidth;
 exports.normalizeBuilderData = normalizeBuilderData.normalizeBuilderData;
 exports.prefetchQueries = prefetchQueries.prefetchQueries;
-exports.getStyleShadow = shadow.getStyleShadow;
-exports.getStyleShadowState = shadow.getStyleShadowState;
-exports.composeSize = size.composeSize;
 exports.composeSpacing = spacing.composeSpacing;
 exports.getSpacingVariable = spacing.getSpacingVariable;
 exports.loadScript = loadScript.loadScript;
 exports.validateEmail = email.validateEmail;
-exports.getStyleBackgroundByDevice = background.getStyleBackgroundByDevice;
 exports.genVariable = cssVariable.genVariable;
 exports.composeGridLayout = layout.composeGridLayout;
 exports.convertOldLayout = layout.convertOldLayout;
 exports.gridToArrayRegex = layout.gridToArrayRegex;
 exports.optionLayoutStyle = layout.optionLayoutStyle;
 exports.isDefined = isDefined.isDefined;
+exports.composeTextColorCss = colors.composeTextColorCss;
 exports.getGlobalColorCSSProp = colors.getGlobalColorCSSProp;
 exports.getGlobalColorClass = colors.getGlobalColorClass;
 exports.getGlobalColorResponsiveClass = colors.getGlobalColorResponsiveClass;
 exports.getGlobalColorResponsiveStyle = colors.getGlobalColorResponsiveStyle;
 exports.getGlobalColorStateClass = colors.getGlobalColorStateClass;
+exports.getGlobalColorStateClassDynamicBtn = colors.getGlobalColorStateClassDynamicBtn;
 exports.getGlobalColorStateResponsiveClass = colors.getGlobalColorStateResponsiveClass;
+exports.getGlobalColorStateResponsiveClassDynamicBtn = colors.getGlobalColorStateResponsiveClassDynamicBtn;
 exports.getGlobalColorStateResponsiveStyle = colors.getGlobalColorStateResponsiveStyle;
 exports.getGlobalColorStateStyle = colors.getGlobalColorStateStyle;
 exports.getGlobalColorStyle = colors.getGlobalColorStyle;
 exports.getSingleColorVariable = colors.getSingleColorVariable;
 exports.isColor = colors.isColor;
+exports.composeTypographyCss = typography.composeTypographyCss;
 exports.genTypoClass = typography.genTypoClass;
+exports.composeCornerCss = radius.composeCornerCss;
 exports.composeRadius = radius.composeRadius;
 exports.getCornerCSSFromGlobal = radius.getCornerCSSFromGlobal;
 exports.getCustomRadius = radius.getCustomRadius;
@@ -190,6 +193,15 @@ exports.props = render.props;
 exports.styles = render.styles;
 exports.template = render.template;
 exports.isLocalEnv = convert.isLocalEnv;
+exports.composeSize = size.composeSize;
+exports.composeSizeCss = size.composeSizeCss;
+exports.genSizeClass = size.genSizeClass;
+exports.composeShadowCss = shadow.composeShadowCss;
+exports.getStyleShadow = shadow.getStyleShadow;
+exports.getStyleShadowState = shadow.getStyleShadowState;
+exports.parseValueWithUnit = shadow.parseValueWithUnit;
+exports.composeBackgroundCss = background.composeBackgroundCss;
+exports.getStyleBackgroundByDevice = background.getStyleBackgroundByDevice;
 exports.useAddToCart = useAddToCart.useAddToCart;
 exports.useCartData = useCartData.useCartData;
 exports.useCartDiscountCodesUpdate = useCartDiscountCodesUpdate.useCartDiscountCodesUpdate;

package/dist/esm/helpers/background.js

@@ -1,4 +1,4 @@
-import { isColor } from './colors.js';
+import { isColor, getSingleColorVariable } from './colors.js';
 import { makeStyleResponsive } from './make-style.js';
 
 const getStyleBackgroundByDevice = (background, options)=>{
@@ -99,5 +99,8 @@ const getStyleBgAttachment = (background)=>{
 const getBgAttachmentByDevice = (background, device)=>{
     return background?.[device]?.attachment;
 };
+const composeBackgroundCss = (backgroundColor)=>{
+    return `${backgroundColor ? `background-color: ${getSingleColorVariable(backgroundColor)} !important;` : undefined}`;
+};
 
-export { getStyleBackgroundByDevice };
+export { composeBackgroundCss, getStyleBackgroundByDevice };

package/dist/esm/helpers/borders.js

@@ -1,4 +1,4 @@
-import { getSingleColorVariable, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStateResponsiveClass, getGlobalColorStateClass } from './colors.js';
+import { getSingleColorVariable, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStateResponsiveClass, getGlobalColorStateClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateClassDynamicBtn } from './colors.js';
 import { makeStyle, makeStyleResponsiveState, makeStyleState } from './make-style.js';
 
 const getBorderStyle = (value)=>{
@@ -132,5 +132,47 @@ const handleConvertClassColor = (value)=>{
     };
     return getGlobalColorStateClass('border', newVal);
 };
+const handleConvertClassColorDynamicBtn = (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 getGlobalColorStateResponsiveClassDynamicBtn('border', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.color,
+        hover: data?.hover?.color,
+        focus: data?.focus?.color
+    };
+    return getGlobalColorStateClassDynamicBtn('border', newVal);
+};
+const composeBorderCss = (borderV)=>{
+    if (!borderV) return '';
+    const { border , width , color , isCustom  } = borderV;
+    if (isCustom) {
+        return '';
+    }
+    return `${border ? `border-style: ${border};` : ''}
+  ${width ? `border-width: ${width};` : undefined}
+  ${color ? `border-color: ${getSingleColorVariable(color)};` : undefined}
+  `;
+};
 
-export { getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor };
+export { composeBorderCss, getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn };

package/dist/esm/helpers/colors.js

@@ -32,6 +32,18 @@ const getGlobalColorStateClass = (type, data)=>{
         }
     }).filter(isDefined).join(' ');
 };
+const getGlobalColorStateClassDynamicBtn = (type, data)=>{
+    if (!data) return '';
+    return Object.entries(data).map(([state, value])=>{
+        const clName = getGlobalColorClass(type, value);
+        if (!clName) return undefined;
+        if (state === 'normal') {
+            return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${clName}`;
+        } else {
+            return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${state}:${clName}`;
+        }
+    }).filter(isDefined).join(' ');
+};
 const getGlobalColorStateResponsiveClass = (type, data)=>{
     if (!data) return '';
     return Object.entries(data).map(([device, objectState])=>{
@@ -58,6 +70,32 @@ const getGlobalColorStateResponsiveClass = (type, data)=>{
         }
     }).filter(Boolean).join(' ');
 };
+const getGlobalColorStateResponsiveClassDynamicBtn = (type, data)=>{
+    if (!data) return '';
+    return Object.entries(data).map(([device, objectState])=>{
+        if (device === 'desktop') {
+            return Object.entries(objectState).map(([state, value])=>{
+                const clName = getGlobalColorClass(type, value);
+                if (!clName) return undefined;
+                if (state === 'normal') {
+                    return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${clName}`;
+                } else {
+                    return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${state}:${clName}`;
+                }
+            }).filter(isDefined).join(' ');
+        } else {
+            return Object.entries(objectState).map(([state, value])=>{
+                const clName = getGlobalColorClass(type, value);
+                if (!clName) return undefined;
+                if (state === 'normal') {
+                    return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${device}:${clName}`;
+                } else {
+                    return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${device}:${state}:${clName}`;
+                }
+            }).filter(isDefined).join(' ');
+        }
+    }).filter(Boolean).join(' ');
+};
 const getGlobalColorResponsiveStyle = (type, data)=>{
     if (!data) return {};
     return Object.fromEntries(Object.entries(data).map(([device, value])=>{
@@ -123,5 +161,8 @@ const getGlobalColorStyle = (data)=>{
         '--c': getSingleColorVariable(data)
     };
 };
+const composeTextColorCss = (color)=>{
+    return `${color ? `color: ${getSingleColorVariable(color)} !important;` : ''}`;
+};
 
-export { getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor };
+export { composeTextColorCss, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor };

package/dist/esm/helpers/radius.js

@@ -95,5 +95,33 @@ const getRadiusStyleActiveState = (radiusValue)=>{
     }
     return getRadiusCSSFromGlobal('normal', radiusValue?.active?.radiusType);
 };
+const composeCornerCss = (value)=>{
+    if (!value) {
+        return;
+    }
+    const { radiusType , bblr , bbrr , btlr , btrr  } = value;
+    let radiusValue = undefined;
+    switch(radiusType){
+        case 'medium':
+        case 'large':
+        case 'small':
+            radiusValue = `border-radius: var(--g-radius-${radiusType});`;
+            break;
+        case 'circle':
+        case 'none':
+        case 'custom':
+            radiusValue = `
+      ${bblr ? `border-bottom-left-radius: ${bblr};` : ''}
+      
+      ${bbrr ? `border-bottom-right-radius: ${bbrr};` : ''}
+
+      ${btlr ? `border-top-left-radius: ${btlr};` : ''}
+      
+      ${btrr ? `border-top-right-radius: ${btrr};` : ''}
+      `;
+            break;
+    }
+    return radiusValue;
+};
 
-export { composeRadius, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState };
+export { composeCornerCss, composeRadius, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState };

package/dist/esm/helpers/shadow.js

@@ -41,5 +41,11 @@ const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{
     }
     return style;
 };
+const composeShadowCss = ({ hasBoxShadow , boxShadowValue  })=>{
+    if (!hasBoxShadow) return undefined;
+    if (!boxShadowValue) return undefined;
+    const { value: distance , unit: unitDistance  } = parseValueWithUnit(`${boxShadowValue?.distance}`);
+    return `box-shadow: ${Math.cos(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${boxShadowValue?.blur} ${boxShadowValue?.spread + ' '}${getSingleColorVariable(boxShadowValue?.color)};`;
+};
 
-export { getStyleShadow, getStyleShadowState };
+export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit };

package/dist/esm/helpers/size.js

@@ -13,5 +13,19 @@ function getCustomSizeCSSByDevice(size, device) {
 const composeSize = (size)=>{
     return Object.assign({}, getCustomSizeCSSByDevice(size, 'desktop'), getCustomSizeCSSByDevice(size, 'tablet'), getCustomSizeCSSByDevice(size, 'mobile'));
 };
+function genSizeClass(name) {
+    return `g-s-${name}`;
+}
+const composeSizeCss = (spacing)=>{
+    if (spacing === undefined) return '';
+    const size = spacing;
+    const sizeHozi = spacing?.custom?.desktop?.horizontal;
+    const sizeVerti = spacing?.custom?.desktop?.vertical;
+    if (!size?.custom) return undefined;
+    return `
+  ${sizeHozi ? `padding-left: ${sizeHozi}; padding-right: ${sizeHozi};` : undefined}
+  ${sizeVerti ? `padding-top: ${sizeVerti}; padding-bottom: ${sizeVerti};` : undefined}
+  `;
+};
 
-export { composeSize };
+export { composeSize, composeSizeCss, genSizeClass };

package/dist/esm/helpers/typography.js

@@ -1,5 +1,17 @@
 const genTypoClass = (name)=>{
     return `g-${name}`;
 };
+const composeTypographyCss = (typography)=>{
+    const typographyCustom = typography?.custom;
+    const { fontFamily , fontSize , fontStyle , fontWeight , lineHeight , letterSpacing  } = typographyCustom?.desktop ?? {};
+    return `
+  ${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily});` : ''}
+  ${fontSize ? `font-size: ${fontSize};` : ''}
+  ${fontStyle ? `font-style: ${fontStyle};` : ''}
+  ${fontWeight ? `font-weight: ${fontWeight};` : ''}
+  ${letterSpacing ? `letter-spacing: ${letterSpacing};` : ''}
+  ${lineHeight ? `line-height: ${lineHeight};` : ''}
+  `;
+};
 
-export { genTypoClass };
+export { composeTypographyCss, genTypoClass };

package/dist/esm/index.js

@@ -21,7 +21,7 @@ export { PublishedThemePagesDocument } from './graphql/queries/published-theme-p
 export { ProductsDocument } from './graphql/queries/products.generated.js';
 export { StorePropertyDocument } from './graphql/queries/store-property.generated.js';
 export { PreviewPageDocument } from './graphql/queries/preview-page.generated.js';
-export { getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor } from './helpers/borders.js';
+export { composeBorderCss, getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn } from './helpers/borders.js';
 export { cls } from './helpers/cls.js';
 export { composeAdvanceStyle } from './helpers/compose-advance-style.js';
 export { flattenConnection } from './helpers/flatten-connection.js';
@@ -33,18 +33,15 @@ export { isEmptyChildren } from './helpers/is-empty-children.js';
 export { makeAspectRatio, makeHeight, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth } from './helpers/make-style.js';
 export { normalizeBuilderData } from './helpers/normalize-builder-data.js';
 export { prefetchQueries } from './helpers/prefetch-queries.js';
-export { getStyleShadow, getStyleShadowState } from './helpers/shadow.js';
-export { composeSize } from './helpers/size.js';
 export { composeSpacing, getSpacingVariable } from './helpers/spacing.js';
 export { loadScript } from './helpers/load-script.js';
 export { validateEmail } from './helpers/email.js';
-export { getStyleBackgroundByDevice } from './helpers/background.js';
 export { genVariable } from './helpers/css-variable.js';
 export { composeGridLayout, convertOldLayout, gridToArrayRegex, optionLayoutStyle } from './helpers/layout.js';
 export { isDefined } from './helpers/is-defined.js';
-export { getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor } from './helpers/colors.js';
-export { genTypoClass } from './helpers/typography.js';
-export { composeRadius, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
+export { composeTextColorCss, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor } from './helpers/colors.js';
+export { composeTypographyCss, genTypoClass } from './helpers/typography.js';
+export { composeCornerCss, composeRadius, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
 export { getSelectedVariant, parseSelectedOption } from './helpers/product.js';
 import * as fpixel from './helpers/tracking/fpixel.js';
 export { fpixel };
@@ -54,6 +51,9 @@ import * as tiktokpixel from './helpers/tracking/tiktokpixel.js';
 export { tiktokpixel };
 export { RenderIf, props, styles, template } from './helpers/render.js';
 export { isLocalEnv } from './helpers/convert.js';
+export { composeSize, composeSizeCss, genSizeClass } from './helpers/size.js';
+export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';
+export { composeBackgroundCss, getStyleBackgroundByDevice } from './helpers/background.js';
 export { useAddToCart } from './hooks/cart/use-add-to-cart.js';
 export { useCartData } from './hooks/cart/use-cart-data.js';
 export { useCartDiscountCodesUpdate } from './hooks/cart/use-cart-discount-codes-update.js';

package/dist/types/index.d.ts

@@ -126,6 +126,7 @@ type AlignItemProp = 'left' | 'center' | 'right';
 type JudgeMeReviewsWidgetType = 'single_product_preview_badge' | 'review_widget' | 'reviews_carousel' | 'all_reviews_widget' | 'verified_reviews_count_badge' | 'all_reviews_text';
 type LooxReviewsWidgetType = 'reviews_widget' | 'rating_widget' | 'carousel_widget';
 type RyviuWidgetType = 'reviews' | 'badge' | 'badgeCollection' | 'carousel' | 'masonry';
+type RivyoWidgetType = 'reviews' | 'badge' | 'testimonials' | 'allReviewsPage';
 type KlaviyoWidgetType = 'popup_widget' | 'flyout_widget' | 'embed_widget' | 'full_page_widget';
 type ObjectLayoutValue = {
     display?: 'fill' | 'fit';
@@ -7294,6 +7295,8 @@ declare const handleConvertBorderStyle: (value?: BorderStyle) => {} | undefined;
 declare const handleConvertBorderWidth: (value?: BorderStyle) => {} | undefined;
 declare const handleConvertBorderColor: (value?: BorderStyle) => React.CSSProperties | undefined;
 declare const handleConvertClassColor: (value?: BorderStyle) => string | undefined;
+declare const handleConvertClassColorDynamicBtn: (value?: BorderStyle) => string | undefined;
+declare const composeBorderCss: (borderV?: Border | undefined) => string;
 
 type ClassValue = ClassDictionary | string | null | undefined;
 interface ClassDictionary {
@@ -7348,13 +7351,6 @@ type Result = {
 };
 declare const prefetchQueries: (input: BuilderState, isSample?: boolean) => Result[];
 
-declare const getStyleShadow: (shadowStyle: ShadowStyle, isActiveState?: boolean) => {
-    [x: string]: string;
-};
-declare const getStyleShadowState: (shadow?: StateProp<ShadowProps>, styleAppliedFor?: ShadowStyleApplied, isEnableShadow?: StateProp<boolean>) => React.CSSProperties;
-
-declare const composeSize: (size?: ObjectDevices<SizeProps>) => React.CSSProperties;
-
 declare function getSpacingVariable(key?: SpacingType): string;
 declare const composeSpacing: (spacingValue?: ObjectDevices<SpacingType>) => React.CSSProperties;
 
@@ -7365,11 +7361,6 @@ declare function loadScript(src: string, options?: {
 
 declare const validateEmail: (email: string) => boolean;
 
-type Options = {
-    liquid?: boolean;
-};
-declare const getStyleBackgroundByDevice: (background?: ObjectDevices<Background>, options?: Options) => {};
-
 declare const genVariable: (variableName: string) => string;
 
 declare const gridToArrayRegex: RegExp;
@@ -7385,22 +7376,27 @@ declare const getGlobalColorCSSProp: (color?: ColorValueType) => string | undefi
 declare const getGlobalColorClass: (type: ColorType, color?: ColorValueType) => string;
 declare const getGlobalColorResponsiveClass: (type: ColorType, data?: ObjectDevices<ColorValueType>) => string;
 declare const getGlobalColorStateClass: (type: ColorType, data?: StateProp<ColorValueType>) => string;
+declare const getGlobalColorStateClassDynamicBtn: (type: ColorType, data?: StateProp<ColorValueType>) => string;
 declare const getGlobalColorStateResponsiveClass: (type: ColorType, data?: ResponsiveStateProp<ColorValueType>) => string;
+declare const getGlobalColorStateResponsiveClassDynamicBtn: (type: ColorType, data?: ResponsiveStateProp<ColorValueType>) => string;
 declare const getGlobalColorResponsiveStyle: (type: ColorProp, data?: ObjectDevices<ColorValueType>) => React.CSSProperties;
 declare const getGlobalColorStateStyle: (type: ColorProp, data?: StateProp<ColorValueType>) => React.CSSProperties;
 declare const getGlobalColorStateResponsiveStyle: (type: ColorProp, data?: ResponsiveStateProp<ColorValueType>) => React.CSSProperties;
 declare const getSingleColorVariable: (color?: ColorValueType) => string | undefined;
 declare function isColor(color: string): boolean;
 declare const getGlobalColorStyle: (data?: ColorValueType) => React.CSSProperties;
+declare const composeTextColorCss: (color?: ColorValueType) => string;
 
 type TypographyClass = `g-${TypographyType}`;
 declare const genTypoClass: (name: TypographyType) => TypographyClass;
+declare const composeTypographyCss: (typography: TypographySetting | undefined) => string;
 
 declare const getCornerCSSFromGlobal: (corner: CornerRadius) => React.CSSProperties;
 declare const getRadiusCSSFromGlobal: (state: StateType, key?: RoundedSize, device?: NameDevices) => React.CSSProperties;
 declare const getCustomRadius: (state: StateType, radius?: CornerRadius, device?: NameDevices) => React.CSSProperties;
 declare const composeRadius: (value?: StateProp<CornerRadius> | ResponsiveStateProp<CornerRadius>) => React.CSSProperties;
 declare const getRadiusStyleActiveState: (radiusValue?: StateProp<CornerRadius>) => React.CSSProperties;
+declare const composeCornerCss: (value?: CornerRadius | undefined) => string | undefined;
 
 declare function getSelectedVariant(variants?: Maybe<VariantSelectFragment>[], choices?: {
     [key: string]: string;
@@ -7469,6 +7465,26 @@ declare const template: (strings: any, ...keys: any[]) => string;
 
 declare const isLocalEnv: boolean;
 
+declare const composeSize: (size?: ObjectDevices<SizeProps>) => React.CSSProperties;
+declare function genSizeClass(name: string): string;
+declare const composeSizeCss: (spacing?: SizeSetting) => string | undefined;
+
+declare const parseValueWithUnit: (valueWithUnit: string) => any;
+declare const getStyleShadow: (shadowStyle: ShadowStyle, isActiveState?: boolean) => {
+    [x: string]: string;
+};
+declare const getStyleShadowState: (shadow?: StateProp<ShadowProps>, styleAppliedFor?: ShadowStyleApplied, isEnableShadow?: StateProp<boolean>) => React.CSSProperties;
+declare const composeShadowCss: ({ hasBoxShadow, boxShadowValue, }: {
+    hasBoxShadow?: boolean | undefined;
+    boxShadowValue?: ShadowProps | undefined;
+}) => string | undefined;
+
+type Options = {
+    liquid?: boolean;
+};
+declare const getStyleBackgroundByDevice: (background?: ObjectDevices<Background>, options?: Options) => {};
+declare const composeBackgroundCss: (backgroundColor?: ColorValueType) => string;
+
 type Func$6 = ReturnType<typeof addToCartOperation>;
 type Response$6 = Awaited<ReturnType<Func$6>>;
 type Args$7 = Parameters<Func$6>[0];
@@ -7704,4 +7720,4 @@ declare const fetchMedias: (fetcher: FetchFunc, { id, isSample, isStorefront }:
 
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
 
-export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchFunc, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, 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, 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, calculateFirstProduct, cls, composeAdvanceStyle, composeGridLayout, composeRadius, composeSize, composeSpacing, convertOldLayout, fetchMedias, fetchVariants, flattenConnection, fpixel, genTypoClass, genVariable, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, prefetchQueries, props, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, 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, 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, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchFunc, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, 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, calculateFirstProduct, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeRadius, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypographyCss, convertOldLayout, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, 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, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.9.15",
+  "version": "1.9.20",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",