@gem-sdk/core 1.9.15 → 1.9.17

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

@@ -46,3 +46,4 @@ const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{
 
 exports.getStyleShadow = getStyleShadow;
 exports.getStyleShadowState = getStyleShadowState;
+exports.parseValueWithUnit = parseValueWithUnit;

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

@@ -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;
@@ -163,18 +165,23 @@ 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;

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

@@ -42,4 +42,4 @@ const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{
     return style;
 };
 
-export { getStyleShadow, getStyleShadowState };
+export { getStyleShadow, getStyleShadowState, parseValueWithUnit };

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';
@@ -42,9 +42,9 @@ 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 };

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 {
@@ -7385,22 +7388,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;
@@ -7704,4 +7712,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, 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, composeBorderCss, composeCornerCss, composeGridLayout, composeRadius, composeSize, composeSpacing, composeTextColorCss, composeTypographyCss, convertOldLayout, fetchMedias, fetchVariants, flattenConnection, fpixel, 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, 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.17",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",