@gem-sdk/core 1.23.0-staging.29 → 1.23.0-staging.32

package/dist/cjs/components/theme-section/CreateThemeSection.js

@@ -105,7 +105,7 @@ const CreateThemeSection = ({ ...props })=>{
                                 ]
                             }),
                             /*#__PURE__*/ jsxRuntime.jsx("p", {
-                                children: "Create Theme section"
+                                children: "Create Theme Section"
                             })
                         ]
                     })

package/dist/cjs/components/theme-section/ThemeSectionStatus.js

@@ -26,7 +26,7 @@ const ThemeSectionStatus = ({ ...props })=>{
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx("span", {
                     "data-theme-section-status-text": true,
-                    children: "Need to republish. Go to global edit to publish it"
+                    children: "Need to republish. Go to global edit and publish this section"
                 })
             ]
         })

package/dist/cjs/components/theme-section/ThemeSectionTooltip.js

@@ -65,7 +65,7 @@ const ThemeSectionTooltip = ({ isShow, isLimit, isRender, children, onMouseEnter
                                     children: [
                                         /*#__PURE__*/ jsxRuntime.jsx("div", {
                                             className: "theme-section-tooltip__body-title",
-                                            children: "Create once, use everywhere with Theme section"
+                                            children: "Create once, use everywhere with Theme Section"
                                         }),
                                         /*#__PURE__*/ jsxRuntime.jsx("div", {
                                             className: "theme-section-tooltip__body-desc",
@@ -80,13 +80,13 @@ const ThemeSectionTooltip = ({ isShow, isLimit, isRender, children, onMouseEnter
                                     children: [
                                         /*#__PURE__*/ jsxRuntime.jsx("button", {
                                             onClick: (e)=>onActions(e),
-                                            children: isLimit ? 'Upgrade to create Theme section' : 'Create Theme section'
+                                            children: isLimit ? 'Upgrade to create Theme Section' : 'Create Theme Section'
                                         }),
                                         isLimit && /*#__PURE__*/ jsxRuntime.jsx("div", {
                                             onClick: openHelpCenter,
                                             "aria-hidden": true,
                                             className: "theme-section-tooltip__action-learn-more",
-                                            children: "Learn more about Theme section"
+                                            children: "Learn more about Theme Section"
                                         })
                                     ]
                                 })

package/dist/cjs/helpers/background.js

@@ -13,7 +13,7 @@ const getStyleBackgroundByDevice = (background, options)=>{
         ...getStyleBgPosition(background),
         ...getStyleBgSize(background),
         ...getStyleBgRepeat(background),
-        ...getStyleBgAttachment(background)
+        ...!options?.ignoreBgAttachment ? getStyleBgAttachment(background) : {}
     };
 };
 const getStyleBgColor = (background)=>{
@@ -38,10 +38,6 @@ const getColor = (color)=>{
 };
 const getStyleBgImage = (background, options)=>{
     const bgImage = {
-        // desktop:
-        //   background.desktop?.type === 'color' ? 'none' : getBgImageByDevice(background, 'desktop'),
-        // tablet: background.tablet?.type === 'color' ? 'none' : getBgImageByDevice(background, 'tablet'),
-        // mobile: background.mobile?.type === 'color' ? 'none' : getBgImageByDevice(background, 'mobile'),
         desktop: getBgImageByDevice(background, 'desktop', options),
         tablet: getBgImageByDevice(background, 'tablet', options),
         mobile: getBgImageByDevice(background, 'mobile', options)
@@ -104,6 +100,69 @@ const getBgAttachmentByDevice = (background, device)=>{
 const composeBackgroundCss = (backgroundColor)=>{
     return `${backgroundColor ? `background-color: ${colors.getSingleColorVariable(backgroundColor)} !important;` : undefined}`;
 };
+const makeFixedBgAttachment = (background)=>{
+    if (!background) return;
+    background.tablet = background.tablet ? background.tablet : background.desktop;
+    background.mobile = background.mobile ? background.mobile : background.tablet;
+    const bgAttachment = {
+        desktop: getBgAttachmentByDevice(background, 'desktop'),
+        tablet: getBgAttachmentByDevice(background, 'tablet'),
+        mobile: getBgAttachmentByDevice(background, 'mobile')
+    };
+    const composeFixed = {
+        desktop: {
+            ...makeFixedBgAttachmentByDevice('desktop', bgAttachment.desktop)
+        },
+        tablet: {
+            ...makeFixedBgAttachmentByDevice('tablet', bgAttachment.tablet)
+        },
+        mobile: {
+            ...makeFixedBgAttachmentByDevice('mobile', bgAttachment.mobile)
+        }
+    };
+    return {
+        wrapper: {
+            ...composeFixed.desktop?.wrapper,
+            ...composeFixed.tablet?.wrapper,
+            ...composeFixed.mobile?.wrapper
+        },
+        content: {
+            ...composeFixed.desktop?.content,
+            ...composeFixed.tablet?.content,
+            ...composeFixed.mobile?.content
+        }
+    };
+};
+const makeFixedBgAttachmentByDevice = (device, bgAttachment)=>{
+    const subfix = device === 'desktop' ? '' : `-${device}`;
+    if (bgAttachment === 'fixed') {
+        return {
+            wrapper: {
+                [`--pos${subfix}`]: 'absolute',
+                [`--top${subfix}`]: '0',
+                [`--left${subfix}`]: '0',
+                [`--w${subfix}`]: '100%',
+                [`--h${subfix}`]: '100%'
+            },
+            content: {
+                [`--pos${subfix}`]: 'fixed',
+                [`--w${subfix}`]: '100vw',
+                [`--h${subfix}`]: '100vh',
+                [`--bga${subfix}`]: 'unset'
+            }
+        };
+    }
+    return {
+        wrapper: {
+            [`--pos${subfix}`]: 'absolute'
+        },
+        content: {
+            [`--pos${subfix}`]: 'absolute',
+            [`--bga${subfix}`]: bgAttachment
+        }
+    };
+};
 
 exports.composeBackgroundCss = composeBackgroundCss;
 exports.getStyleBackgroundByDevice = getStyleBackgroundByDevice;
+exports.makeFixedBgAttachment = makeFixedBgAttachment;

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

@@ -75,6 +75,13 @@ const makeWidth = (widthValue, fullWidthValue)=>{
         mobile: getVal('mobile', widthValue, fullWidthValue)
     };
 };
+const makeGlobalSizeWidthResponsive = (globalSize)=>{
+    return {
+        '--w': globalSize?.desktop?.width,
+        '--w-tablet': globalSize?.tablet?.width,
+        '--w-mobile': globalSize?.mobile?.width
+    };
+};
 const makeHeight = (heighValue, autoHeight)=>{
     const getVal = (deviceValue, heighValue, autoHeight)=>{
         const heightVal = heighValue?.[deviceValue];
@@ -128,6 +135,7 @@ const makeLineClamp = (lineClampValue, hasLineClampValue)=>{
 };
 
 exports.makeAspectRatio = makeAspectRatio;
+exports.makeGlobalSizeWidthResponsive = makeGlobalSizeWidthResponsive;
 exports.makeHeight = makeHeight;
 exports.makeLineClamp = makeLineClamp;
 exports.makeStyle = makeStyle;

package/dist/cjs/helpers/size.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var makeStyle = require('./make-style.js');
 var constant = require('./constant.js');
 
 function getCustomSizeCSSByDevice(size, device) {
@@ -29,7 +30,48 @@ const composeSizeCss = (spacing)=>{
   ${sizeVerti ? `padding-top: ${sizeVerti}; padding-bottom: ${sizeVerti};` : undefined}
   `;
 };
+const makeGlobalSize = (globalSize)=>{
+    return {
+        width: makeStyle.makeStyleResponsive('w', getWidthHeightGlobalSize('width', globalSize)),
+        height: makeStyle.makeStyleResponsive('h', getWidthHeightGlobalSize('height', globalSize)),
+        padding: getPaddingGlobalSize(globalSize)
+    };
+};
+const getWidthHeightGlobalSize = (type, globalSize)=>{
+    if (!globalSize) return {};
+    const data = {
+        desktop: globalSize?.desktop?.[type],
+        tablet: globalSize?.tablet?.[type],
+        mobile: globalSize?.mobile?.[type]
+    };
+    if (data.desktop === undefined) {
+        data.desktop = 'auto';
+    }
+    if (data.tablet === undefined) {
+        data.tablet = data.desktop;
+    }
+    if (data.mobile === undefined) {
+        data.mobile = data.tablet;
+    }
+    return data;
+};
+function getCustomPaddingSizeCSSByDevice(globalSize, device) {
+    if (!globalSize || !device) return {};
+    const suffix = constant.devicesMapping[device] ?? '';
+    return {
+        [`--pl${suffix}`]: globalSize?.[device]?.padding?.left,
+        [`--pr${suffix}`]: globalSize?.[device]?.padding?.right,
+        [`--pt${suffix}`]: globalSize?.[device]?.padding?.top,
+        [`--pb${suffix}`]: globalSize?.[device]?.padding?.bottom
+    };
+}
+const getPaddingGlobalSize = (globalSize)=>{
+    return Object.assign({}, getCustomPaddingSizeCSSByDevice(globalSize, 'desktop'), getCustomPaddingSizeCSSByDevice(globalSize, 'tablet'), getCustomPaddingSizeCSSByDevice(globalSize, 'mobile'));
+};
 
 exports.composeSize = composeSize;
 exports.composeSizeCss = composeSizeCss;
 exports.genSizeClass = genSizeClass;
+exports.getPaddingGlobalSize = getPaddingGlobalSize;
+exports.getWidthHeightGlobalSize = getWidthHeightGlobalSize;
+exports.makeGlobalSize = makeGlobalSize;

package/dist/cjs/helpers/typography.js

@@ -18,20 +18,21 @@ const composeTypographyCss = (typography)=>{
   ${lineHeight ? `line-height: ${lineHeight};` : ''}
   `;
 };
-const composeTypographyV2Css = (typography)=>{
+const composeTypographyV2Css = (typography, isImportant)=>{
     const typographyCustom = typography?.custom;
     const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing } = typographyCustom ?? {};
     const typographyAttrs = typography?.attrs;
     const { bold, italic, underline, transform } = typographyAttrs ?? {};
+    const composeImportant = isImportant ? '!important' : '';
     return `
-  ${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily});` : ''}
-  ${fontSize?.desktop ? `font-size: ${fontSize?.desktop};` : ''}
-  ${bold ? `font-weight: bold;` : fontWeight ? `font-weight: ${fontWeight};` : ''}
-  ${letterSpacing ? `letter-spacing: ${letterSpacing};` : ''}
-  ${lineHeight ? `line-height: ${lineHeight};` : ''}
-  ${italic ? `font-style: italic;` : ''}
-  ${underline ? `text-decoration-line: underline;` : ''}
-  ${transform ? `text-transform: ${transform};` : ''}
+  ${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily})${composeImportant};` : ''}
+  ${fontSize?.desktop ? `font-size: ${fontSize?.desktop}${composeImportant};` : ''}
+  ${bold ? `font-weight: bold;` : fontWeight ? `font-weight: ${fontWeight}${composeImportant};` : ''}
+  ${letterSpacing ? `letter-spacing: ${letterSpacing}${composeImportant};` : ''}
+  ${lineHeight ? `line-height: ${lineHeight}${composeImportant};` : ''}
+  ${italic ? `font-style: italic${composeImportant};` : ''}
+  ${underline ? `text-decoration-line: underline${composeImportant};` : ''}
+  ${transform ? `text-transform: ${transform}${composeImportant};` : ''}
   `;
 };
 function getCustomCSSByDevice(typography, device) {

package/dist/cjs/index.js

@@ -151,6 +151,7 @@ exports.isSafari = isSafari.default;
 exports.isEmptyChildren = isEmptyChildren.isEmptyChildren;
 exports.filterToolbarPreview = filterToolbarPreview.filterToolbarPreview;
 exports.makeAspectRatio = makeStyle.makeAspectRatio;
+exports.makeGlobalSizeWidthResponsive = makeStyle.makeGlobalSizeWidthResponsive;
 exports.makeHeight = makeStyle.makeHeight;
 exports.makeLineClamp = makeStyle.makeLineClamp;
 exports.makeStyle = makeStyle.makeStyle;
@@ -217,12 +218,16 @@ exports.isLocalEnv = convert.isLocalEnv;
 exports.composeSize = size.composeSize;
 exports.composeSizeCss = size.composeSizeCss;
 exports.genSizeClass = size.genSizeClass;
+exports.getPaddingGlobalSize = size.getPaddingGlobalSize;
+exports.getWidthHeightGlobalSize = size.getWidthHeightGlobalSize;
+exports.makeGlobalSize = size.makeGlobalSize;
 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.makeFixedBgAttachment = background.makeFixedBgAttachment;
 exports.generateCollectionQueryKey = query.generateCollectionQueryKey;
 exports.generateProductQueryKey = query.generateProductQueryKey;
 exports.generateProductsQueryKey = query.generateProductsQueryKey;

package/dist/esm/components/theme-section/CreateThemeSection.js

@@ -103,7 +103,7 @@ const CreateThemeSection = ({ ...props })=>{
                                 ]
                             }),
                             /*#__PURE__*/ jsx("p", {
-                                children: "Create Theme section"
+                                children: "Create Theme Section"
                             })
                         ]
                     })

package/dist/esm/components/theme-section/ThemeSectionStatus.js

@@ -24,7 +24,7 @@ const ThemeSectionStatus = ({ ...props })=>{
                 }),
                 /*#__PURE__*/ jsx("span", {
                     "data-theme-section-status-text": true,
-                    children: "Need to republish. Go to global edit to publish it"
+                    children: "Need to republish. Go to global edit and publish this section"
                 })
             ]
         })

package/dist/esm/components/theme-section/ThemeSectionTooltip.js

@@ -63,7 +63,7 @@ const ThemeSectionTooltip = ({ isShow, isLimit, isRender, children, onMouseEnter
                                     children: [
                                         /*#__PURE__*/ jsx("div", {
                                             className: "theme-section-tooltip__body-title",
-                                            children: "Create once, use everywhere with Theme section"
+                                            children: "Create once, use everywhere with Theme Section"
                                         }),
                                         /*#__PURE__*/ jsx("div", {
                                             className: "theme-section-tooltip__body-desc",
@@ -78,13 +78,13 @@ const ThemeSectionTooltip = ({ isShow, isLimit, isRender, children, onMouseEnter
                                     children: [
                                         /*#__PURE__*/ jsx("button", {
                                             onClick: (e)=>onActions(e),
-                                            children: isLimit ? 'Upgrade to create Theme section' : 'Create Theme section'
+                                            children: isLimit ? 'Upgrade to create Theme Section' : 'Create Theme Section'
                                         }),
                                         isLimit && /*#__PURE__*/ jsx("div", {
                                             onClick: openHelpCenter,
                                             "aria-hidden": true,
                                             className: "theme-section-tooltip__action-learn-more",
-                                            children: "Learn more about Theme section"
+                                            children: "Learn more about Theme Section"
                                         })
                                     ]
                                 })

package/dist/esm/helpers/background.js

@@ -11,7 +11,7 @@ const getStyleBackgroundByDevice = (background, options)=>{
         ...getStyleBgPosition(background),
         ...getStyleBgSize(background),
         ...getStyleBgRepeat(background),
-        ...getStyleBgAttachment(background)
+        ...!options?.ignoreBgAttachment ? getStyleBgAttachment(background) : {}
     };
 };
 const getStyleBgColor = (background)=>{
@@ -36,10 +36,6 @@ const getColor = (color)=>{
 };
 const getStyleBgImage = (background, options)=>{
     const bgImage = {
-        // desktop:
-        //   background.desktop?.type === 'color' ? 'none' : getBgImageByDevice(background, 'desktop'),
-        // tablet: background.tablet?.type === 'color' ? 'none' : getBgImageByDevice(background, 'tablet'),
-        // mobile: background.mobile?.type === 'color' ? 'none' : getBgImageByDevice(background, 'mobile'),
         desktop: getBgImageByDevice(background, 'desktop', options),
         tablet: getBgImageByDevice(background, 'tablet', options),
         mobile: getBgImageByDevice(background, 'mobile', options)
@@ -102,5 +98,67 @@ const getBgAttachmentByDevice = (background, device)=>{
 const composeBackgroundCss = (backgroundColor)=>{
     return `${backgroundColor ? `background-color: ${getSingleColorVariable(backgroundColor)} !important;` : undefined}`;
 };
+const makeFixedBgAttachment = (background)=>{
+    if (!background) return;
+    background.tablet = background.tablet ? background.tablet : background.desktop;
+    background.mobile = background.mobile ? background.mobile : background.tablet;
+    const bgAttachment = {
+        desktop: getBgAttachmentByDevice(background, 'desktop'),
+        tablet: getBgAttachmentByDevice(background, 'tablet'),
+        mobile: getBgAttachmentByDevice(background, 'mobile')
+    };
+    const composeFixed = {
+        desktop: {
+            ...makeFixedBgAttachmentByDevice('desktop', bgAttachment.desktop)
+        },
+        tablet: {
+            ...makeFixedBgAttachmentByDevice('tablet', bgAttachment.tablet)
+        },
+        mobile: {
+            ...makeFixedBgAttachmentByDevice('mobile', bgAttachment.mobile)
+        }
+    };
+    return {
+        wrapper: {
+            ...composeFixed.desktop?.wrapper,
+            ...composeFixed.tablet?.wrapper,
+            ...composeFixed.mobile?.wrapper
+        },
+        content: {
+            ...composeFixed.desktop?.content,
+            ...composeFixed.tablet?.content,
+            ...composeFixed.mobile?.content
+        }
+    };
+};
+const makeFixedBgAttachmentByDevice = (device, bgAttachment)=>{
+    const subfix = device === 'desktop' ? '' : `-${device}`;
+    if (bgAttachment === 'fixed') {
+        return {
+            wrapper: {
+                [`--pos${subfix}`]: 'absolute',
+                [`--top${subfix}`]: '0',
+                [`--left${subfix}`]: '0',
+                [`--w${subfix}`]: '100%',
+                [`--h${subfix}`]: '100%'
+            },
+            content: {
+                [`--pos${subfix}`]: 'fixed',
+                [`--w${subfix}`]: '100vw',
+                [`--h${subfix}`]: '100vh',
+                [`--bga${subfix}`]: 'unset'
+            }
+        };
+    }
+    return {
+        wrapper: {
+            [`--pos${subfix}`]: 'absolute'
+        },
+        content: {
+            [`--pos${subfix}`]: 'absolute',
+            [`--bga${subfix}`]: bgAttachment
+        }
+    };
+};
 
-export { composeBackgroundCss, getStyleBackgroundByDevice };
+export { composeBackgroundCss, getStyleBackgroundByDevice, makeFixedBgAttachment };

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

@@ -73,6 +73,13 @@ const makeWidth = (widthValue, fullWidthValue)=>{
         mobile: getVal('mobile', widthValue, fullWidthValue)
     };
 };
+const makeGlobalSizeWidthResponsive = (globalSize)=>{
+    return {
+        '--w': globalSize?.desktop?.width,
+        '--w-tablet': globalSize?.tablet?.width,
+        '--w-mobile': globalSize?.mobile?.width
+    };
+};
 const makeHeight = (heighValue, autoHeight)=>{
     const getVal = (deviceValue, heighValue, autoHeight)=>{
         const heightVal = heighValue?.[deviceValue];
@@ -125,4 +132,4 @@ const makeLineClamp = (lineClampValue, hasLineClampValue)=>{
     };
 };
 
-export { makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined };
+export { makeAspectRatio, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined };

package/dist/esm/helpers/size.js

@@ -1,3 +1,4 @@
+import { makeStyleResponsive } from './make-style.js';
 import { devicesMapping } from './constant.js';
 
 function getCustomSizeCSSByDevice(size, device) {
@@ -27,5 +28,43 @@ const composeSizeCss = (spacing)=>{
   ${sizeVerti ? `padding-top: ${sizeVerti}; padding-bottom: ${sizeVerti};` : undefined}
   `;
 };
+const makeGlobalSize = (globalSize)=>{
+    return {
+        width: makeStyleResponsive('w', getWidthHeightGlobalSize('width', globalSize)),
+        height: makeStyleResponsive('h', getWidthHeightGlobalSize('height', globalSize)),
+        padding: getPaddingGlobalSize(globalSize)
+    };
+};
+const getWidthHeightGlobalSize = (type, globalSize)=>{
+    if (!globalSize) return {};
+    const data = {
+        desktop: globalSize?.desktop?.[type],
+        tablet: globalSize?.tablet?.[type],
+        mobile: globalSize?.mobile?.[type]
+    };
+    if (data.desktop === undefined) {
+        data.desktop = 'auto';
+    }
+    if (data.tablet === undefined) {
+        data.tablet = data.desktop;
+    }
+    if (data.mobile === undefined) {
+        data.mobile = data.tablet;
+    }
+    return data;
+};
+function getCustomPaddingSizeCSSByDevice(globalSize, device) {
+    if (!globalSize || !device) return {};
+    const suffix = devicesMapping[device] ?? '';
+    return {
+        [`--pl${suffix}`]: globalSize?.[device]?.padding?.left,
+        [`--pr${suffix}`]: globalSize?.[device]?.padding?.right,
+        [`--pt${suffix}`]: globalSize?.[device]?.padding?.top,
+        [`--pb${suffix}`]: globalSize?.[device]?.padding?.bottom
+    };
+}
+const getPaddingGlobalSize = (globalSize)=>{
+    return Object.assign({}, getCustomPaddingSizeCSSByDevice(globalSize, 'desktop'), getCustomPaddingSizeCSSByDevice(globalSize, 'tablet'), getCustomPaddingSizeCSSByDevice(globalSize, 'mobile'));
+};
 
-export { composeSize, composeSizeCss, genSizeClass };
+export { composeSize, composeSizeCss, genSizeClass, getPaddingGlobalSize, getWidthHeightGlobalSize, makeGlobalSize };

package/dist/esm/helpers/typography.js

@@ -16,20 +16,21 @@ const composeTypographyCss = (typography)=>{
   ${lineHeight ? `line-height: ${lineHeight};` : ''}
   `;
 };
-const composeTypographyV2Css = (typography)=>{
+const composeTypographyV2Css = (typography, isImportant)=>{
     const typographyCustom = typography?.custom;
     const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing } = typographyCustom ?? {};
     const typographyAttrs = typography?.attrs;
     const { bold, italic, underline, transform } = typographyAttrs ?? {};
+    const composeImportant = isImportant ? '!important' : '';
     return `
-  ${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily});` : ''}
-  ${fontSize?.desktop ? `font-size: ${fontSize?.desktop};` : ''}
-  ${bold ? `font-weight: bold;` : fontWeight ? `font-weight: ${fontWeight};` : ''}
-  ${letterSpacing ? `letter-spacing: ${letterSpacing};` : ''}
-  ${lineHeight ? `line-height: ${lineHeight};` : ''}
-  ${italic ? `font-style: italic;` : ''}
-  ${underline ? `text-decoration-line: underline;` : ''}
-  ${transform ? `text-transform: ${transform};` : ''}
+  ${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily})${composeImportant};` : ''}
+  ${fontSize?.desktop ? `font-size: ${fontSize?.desktop}${composeImportant};` : ''}
+  ${bold ? `font-weight: bold;` : fontWeight ? `font-weight: ${fontWeight}${composeImportant};` : ''}
+  ${letterSpacing ? `letter-spacing: ${letterSpacing}${composeImportant};` : ''}
+  ${lineHeight ? `line-height: ${lineHeight}${composeImportant};` : ''}
+  ${italic ? `font-style: italic${composeImportant};` : ''}
+  ${underline ? `text-decoration-line: underline${composeImportant};` : ''}
+  ${transform ? `text-transform: ${transform}${composeImportant};` : ''}
   `;
 };
 function getCustomCSSByDevice(typography, device) {

package/dist/esm/index.js

@@ -31,7 +31,7 @@ export { default as isBrowser } from './helpers/is-browser.js';
 export { default as isSafari } from './helpers/is-safari.js';
 export { isEmptyChildren } from './helpers/is-empty-children.js';
 export { filterToolbarPreview } from './helpers/filter-toolbar-preview.js';
-export { makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
+export { makeAspectRatio, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
 export { normalizeBuilderData } from './helpers/normalize-builder-data.js';
 export { prefetchQueries } from './helpers/prefetch-queries.js';
 export { composeSpacing, getSpacingVariable } from './helpers/spacing.js';
@@ -52,9 +52,9 @@ import * as tiktokpixel from './helpers/tracking/tiktokpixel.js';
 export { tiktokpixel };
 export { RenderIf, composeMemo, dataStringify, props, styles, template } from './helpers/render.js';
 export { baseAssetURL, isLocalEnv } from './helpers/convert.js';
-export { composeSize, composeSizeCss, genSizeClass } from './helpers/size.js';
+export { composeSize, composeSizeCss, genSizeClass, getPaddingGlobalSize, getWidthHeightGlobalSize, makeGlobalSize } from './helpers/size.js';
 export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';
-export { composeBackgroundCss, getStyleBackgroundByDevice } from './helpers/background.js';
+export { composeBackgroundCss, getStyleBackgroundByDevice, makeFixedBgAttachment } from './helpers/background.js';
 export { generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey } from './helpers/query.js';
 export { composeAdvanceStyle, splitStyle } from './helpers/compose-advance-style.js';
 export { useAddToCart } from './hooks/cart/use-add-to-cart.js';

package/dist/types/index.d.ts

@@ -91,6 +91,18 @@ type ImageShape$1 = {
     width?: string;
     height?: string;
 };
+type SizeSettingGlobal = {
+    shape?: 'square' | 'vertical' | 'horizontal' | 'custom';
+    padding?: {
+        type?: 'small' | 'medium' | 'large' | 'custom';
+        top?: string;
+        left?: string;
+        bottom?: string;
+        right?: string;
+    };
+    width?: string;
+    height?: string;
+};
 type FlexDirectionProp = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 type TransformProp = 'default' | 'capitalize' | 'uppercase' | 'lowercase' | 'none';
 type BaseProps<Setting = unknown, Style = unknown, Advanced = Record<string, any>> = {
@@ -901,7 +913,27 @@ type GridArrange<T> = SharedControlType<T> & {
     readonly?: boolean;
 };
 
-type ControlProp<T> = AngleControlType<T> | CheckboxControlType<T> | ColorPickerControlType<T> | GroupControlType<T> | IconControlType<T> | InputFixContentControlType<T> | InputNumberControlType<T> | InputUnitControlType<T> | InputUnitSpacingControlType<T> | InputUnitWidthControlType<T> | InputControlType<T> | MarginControlType<T> | PaddingControlType<T> | PositionControlType<T> | RadioGroupControlType | RangeControlType<T> | SegmentControlType<T> | SelectControlType<T> | TextareaControlType<T> | ToggleControlType<T> | ImageControlType<T> | ChildrensControlType | GridControlType<T> | FlexControlType<T> | TextEditorControlType<T> | ProductControlType<T> | TypographyControlType<T> | TypographyV2ControlType<T> | MenuControlType<T> | BehaviorStateControlType<T> | PickLinkControlType<T> | BoxShadowControlType<T> | TextShadowControlType<T> | BorderControlType<T> | BorderRadiusControlType<T> | RadiusPresetControlType<T> | SizeControlType<T> | ChildItemType<T> | PickMultiProductControlType<T> | CollectionControlType<T> | BackgroundControlType<T> | VisibilityControlType<T> | SelectVariantControlType | CountdownEvergreenType | Timezone<T> | CustomContentControlType<T> | DateTimePickerControlType | CountdownDailyType | KlaviyoCodes | YotpoLoyaltyCodes | InputWidthControlType<T> | LayoutSegmentControlType<T> | InputSpacing<T> | UniqueIdControlType<T> | PositionSquareControlType<T> | CustomCodeEditor | LayoutControlType<T> | SwatchesLinkControlType<T> | VariantSwatchesPresetControlType<T> | ProductListControlType<T> | CollectionBannerControlType<T> | Ratio<T> | StickyDisplayControlType<T> | SyncProductPropertiesControlType<T> | StepsGuide<T> | ImageShape<T> | GridArrange<T>;
+type SettingID = 'shape' | 'width' | 'height' | 'gap' | 'padding';
+type OptionKeyword = 'default' | 'auto' | 'full' | 'equal' | 'small' | 'medium' | 'large';
+type PaddingOptions = 'small' | 'medium' | 'large' | 'custom';
+type PaddingConfig = Partial<Record<PaddingOptions, {
+    vertical: string;
+    horizontal: string;
+}>>;
+type SettingConfig = {
+    sizeConfig?: Partial<Record<'small' | 'medium' | 'large', string>>;
+    displayOptions?: OptionKeyword[];
+    paddingConfig?: PaddingConfig;
+};
+type SizeSetting$1<T> = SharedControlType<T> & {
+    type: 'size-setting';
+    placeholder?: string;
+    readonly?: boolean;
+    hiddenSettings?: SettingID[];
+    settingConfig?: Partial<Record<SettingID, SettingConfig>>;
+};
+
+type ControlProp<T> = AngleControlType<T> | CheckboxControlType<T> | ColorPickerControlType<T> | GroupControlType<T> | IconControlType<T> | InputFixContentControlType<T> | InputNumberControlType<T> | InputUnitControlType<T> | InputUnitSpacingControlType<T> | InputUnitWidthControlType<T> | InputControlType<T> | MarginControlType<T> | PaddingControlType<T> | PositionControlType<T> | RadioGroupControlType | RangeControlType<T> | SegmentControlType<T> | SelectControlType<T> | TextareaControlType<T> | ToggleControlType<T> | ImageControlType<T> | ChildrensControlType | GridControlType<T> | FlexControlType<T> | TextEditorControlType<T> | ProductControlType<T> | TypographyControlType<T> | TypographyV2ControlType<T> | MenuControlType<T> | BehaviorStateControlType<T> | PickLinkControlType<T> | BoxShadowControlType<T> | TextShadowControlType<T> | BorderControlType<T> | BorderRadiusControlType<T> | RadiusPresetControlType<T> | SizeControlType<T> | ChildItemType<T> | PickMultiProductControlType<T> | CollectionControlType<T> | BackgroundControlType<T> | VisibilityControlType<T> | SelectVariantControlType | CountdownEvergreenType | Timezone<T> | CustomContentControlType<T> | DateTimePickerControlType | CountdownDailyType | KlaviyoCodes | YotpoLoyaltyCodes | InputWidthControlType<T> | LayoutSegmentControlType<T> | InputSpacing<T> | UniqueIdControlType<T> | PositionSquareControlType<T> | CustomCodeEditor | LayoutControlType<T> | SwatchesLinkControlType<T> | VariantSwatchesPresetControlType<T> | ProductListControlType<T> | CollectionBannerControlType<T> | Ratio<T> | StickyDisplayControlType<T> | SyncProductPropertiesControlType<T> | StepsGuide<T> | ImageShape<T> | GridArrange<T> | SizeSetting$1<T>;
 type Setting<P extends BaseProps> = {
     id: 'setting';
     note?: string;
@@ -7853,6 +7885,11 @@ declare const makeStyleState: <T extends ShortHandProperty, K>(name: T, value?:
 declare const makeStyleResponsiveState: <T extends ShortHandProperty, K>(name: T, value?: Partial<Record<NameDevices, Partial<Record<StateType, K>>>> | undefined) => {};
 declare const makeStyleResponsive: <T extends ShortHandProperty, K>(name: T, value?: Partial<Record<NameDevices, K>> | undefined) => Record<ResponsiveKey<T>, K>;
 declare const makeWidth: (widthValue?: ObjectDevices<string | number>, fullWidthValue?: ObjectDevices<boolean>) => ObjectDevices<string | number | undefined>;
+declare const makeGlobalSizeWidthResponsive: (globalSize?: ObjectDevices<SizeSettingGlobal>) => {
+    '--w': string | undefined;
+    '--w-tablet': string | undefined;
+    '--w-mobile': string | undefined;
+};
 declare const makeHeight: (heighValue?: ObjectDevices<string | number>, autoHeight?: ObjectDevices<boolean>) => ObjectDevices<string | number | undefined>;
 declare const makeAspectRatio: (aspectRatio?: ObjectDevices<string>, aspectWidth?: ObjectDevices<string | number>, aspectHeight?: ObjectDevices<string | number>) => ObjectDevices<string>;
 declare const makeLineClamp: (lineClampValue?: ObjectDevices<number>, hasLineClampValue?: ObjectDevices<boolean>) => ObjectDevices<string | number | undefined>;
@@ -7911,7 +7948,7 @@ 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 composeTypographyV2Css: (typography: TypographySettingV2 | undefined) => string;
+declare const composeTypographyV2Css: (typography: TypographySettingV2 | undefined, isImportant?: boolean) => string;
 declare const composeTypography: (typography?: ObjectDevices<TypographyProps>) => React.CSSProperties;
 declare const composeTypographyV2: (value?: TypographyV2Props, attrs?: TypographyV2Attrs) => React.CSSProperties;
 declare const composeTypographyAttr: (attrs?: TypographyV2Attrs) => React.CSSProperties;
@@ -9483,6 +9520,13 @@ declare const baseAssetURL: string;
 declare const composeSize: (size?: ObjectDevices<SizeProps>) => React.CSSProperties;
 declare function genSizeClass(name: string): string;
 declare const composeSizeCss: (spacing?: SizeSetting) => string | undefined;
+declare const makeGlobalSize: (globalSize?: ObjectDevices<SizeSettingGlobal>) => {
+    width: Record<"--w" | "--w-tablet" | "--w-mobile", string | number>;
+    height: Record<"--h" | "--h-tablet" | "--h-mobile", string | number>;
+    padding: React.CSSProperties;
+};
+declare const getWidthHeightGlobalSize: (type: 'width' | 'height', globalSize?: ObjectDevices<SizeSettingGlobal>) => Partial<Record<NameDevices, string | number>>;
+declare const getPaddingGlobalSize: (globalSize?: ObjectDevices<SizeSettingGlobal>) => React.CSSProperties;
 
 declare const parseValueWithUnit: (valueWithUnit: string) => any;
 declare const getStyleShadow: (shadowStyle: ShadowStyle, isActiveState?: boolean) => {
@@ -9497,9 +9541,18 @@ declare const composeShadowCss: ({ hasBoxShadow, boxShadowValue, important, }: {
 
 type Options = {
     liquid?: boolean;
+    ignoreBgAttachment?: boolean;
 };
 declare const getStyleBackgroundByDevice: (background?: ObjectDevices<Background>, options?: Options) => {};
 declare const composeBackgroundCss: (backgroundColor?: ColorValueType) => string;
+declare const makeFixedBgAttachment: (background?: ObjectDevices<Background>) => {
+    wrapper: {
+        [x: string]: string;
+    };
+    content: {
+        [x: string]: string | undefined;
+    };
+} | undefined;
 
 type OrderByType = 'TITLE_ASC' | 'TITLE_DESC' | 'CREATED_AT_ASC' | 'none' | 'CREATED_AT_DESC';
 type FetchCollectionArgs = {
@@ -9721,11 +9774,11 @@ declare const useSelectedOption: () => {
     setSelectedOption: (optionId?: Maybe<string>, optionValue?: Maybe<string>, productId?: Maybe<string>, noEmit?: boolean) => void;
     forceSelectedOption: (selectedOption?: Record<string, string>, productId?: Maybe<string>, noEmit?: boolean) => void;
 };
-declare const useVariants: () => Maybe<Pick<ProductVariant, "title" | "width" | "length" | "weight" | "height" | "id" | "baseID" | "platform" | "sku" | "barcode" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "price" | "salePrice" | "soldIndividually"> & {
+declare const useVariants: () => Maybe<Pick<ProductVariant, "width" | "height" | "title" | "length" | "weight" | "id" | "baseID" | "platform" | "sku" | "barcode" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "price" | "salePrice" | "soldIndividually"> & {
     selectedOptions: Pick<SelectedOption, "name" | "value" | "optionType">[];
     media?: Maybe<Pick<Media, "width" | "height" | "id" | "src" | "alt" | "contentType" | "previewImage">>;
 }>[];
-declare const useVariant: (id: string) => Maybe<Pick<ProductVariant, "title" | "width" | "length" | "weight" | "height" | "id" | "baseID" | "platform" | "sku" | "barcode" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "price" | "salePrice" | "soldIndividually"> & {
+declare const useVariant: (id: string) => Maybe<Pick<ProductVariant, "width" | "height" | "title" | "length" | "weight" | "id" | "baseID" | "platform" | "sku" | "barcode" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "price" | "salePrice" | "soldIndividually"> & {
     selectedOptions: Pick<SelectedOption, "name" | "value" | "optionType">[];
     media?: Maybe<Pick<Media, "width" | "height" | "id" | "src" | "alt" | "contentType" | "previewImage">>;
 }>;
@@ -9775,4 +9828,4 @@ type PublishedThemePageSelectFragment = Pick<PublishedThemePage, 'id' | 'name' |
 
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
 
-export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, DynamicCollection, DynamicProduct, ExtractState, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OptionNormalStyle, OptionSpecialStyle, PageContext, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RenderMemo as Render, RenderChildren, 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, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TrustooWidgetType, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, VariantSelectFragment, VitalsWidgetType, WiserWidgetType, WrapRenderChildren, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertOldLayout, dataStringify, fetchMedias, fetchVariants, filterToolbarPreview, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeNullUndefined, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useInitialSwatchesOptions, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
+export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, DynamicCollection, DynamicProduct, ExtractState, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OptionNormalStyle, OptionSpecialStyle, PageContext, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RenderMemo as Render, RenderChildren, 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, SizeSettingGlobal, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TrustooWidgetType, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, VariantSelectFragment, VitalsWidgetType, WiserWidgetType, WrapRenderChildren, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertOldLayout, dataStringify, fetchMedias, fetchVariants, filterToolbarPreview, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getPaddingGlobalSize, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, getWidthHeightGlobalSize, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeFixedBgAttachment, makeGlobalSize, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeNullUndefined, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useInitialSwatchesOptions, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.23.0-staging.29",
+  "version": "1.23.0-staging.32",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@gem-sdk/adapter-shopify": "1.23.0-staging.26",
-    "@gem-sdk/styles": "1.23.0-staging.29"
+    "@gem-sdk/styles": "1.23.0-staging.32"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",