@gem-sdk/core 1.23.0-staging.26 → 1.23.0-staging.30

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -17,6 +17,32 @@ var Resize = require('./resize/Resize.js');
 require('../helpers/convert.js');
 
 const SECTION_LIMIT = 25;
+const notVisible = (el)=>{
+    const overflow = getComputedStyle(el).overflow;
+    return overflow !== 'visible';
+};
+const isSection = (el)=>{
+    const tag = el.getAttribute('data-component-tag');
+    return tag === 'Section';
+};
+const isOverToolbarPosition = (el, parent)=>{
+    const rect = el.getBoundingClientRect();
+    const rectP = parent.getBoundingClientRect();
+    // 32px = toolbar active height
+    return rect.top - rectP.top < 32 + 1;
+};
+const findOverflowParent = (element, initEl)=>{
+    const thisEl = element;
+    const origEl = initEl || thisEl;
+    if (!thisEl) return;
+    if (isSection(thisEl)) return;
+    if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
+    if (thisEl.parentElement) {
+        return findOverflowParent(thisEl.parentElement, origEl);
+    } else {
+        return;
+    }
+};
 const ComponentToolbarPreview = ({ ...props })=>{
     const isThemeSection = props.isThemeSection;
     const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
@@ -84,11 +110,16 @@ const ComponentToolbarPreview = ({ ...props })=>{
             setIsShowParentRevert(false);
             setIsShowParent(false);
         } else {
-            const rect = $toolbar.getBoundingClientRect();
-            if (rect.top < parents.length * 24) {
+            const $parentOverflow = findOverflowParent($toolbar, $toolbar);
+            if ($parentOverflow) {
                 setIsShowParentRevert(true);
             } else {
-                setIsShowParentRevert(false);
+                const rect = $toolbar.getBoundingClientRect();
+                if (rect.top < parents.length * 24) {
+                    setIsShowParentRevert(true);
+                } else {
+                    setIsShowParentRevert(false);
+                }
             }
             setIsShowParent(true);
         }

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/is-empty-children.js

@@ -7,7 +7,7 @@ var ComponentToolbarPreview = require('../components/ComponentToolbarPreview.js'
 
 const isEmptyChildren = (children)=>{
     let arrChild = react.Children.toArray(children);
-    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview.ComponentToolbarPreview && react.isValidElement(child));
+    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview.ComponentToolbarPreview);
     return react.Children.count(arrChild) < 1 || !children;
 };
 

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/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/ComponentToolbarPreview.js

@@ -15,6 +15,32 @@ import Resize from './resize/Resize.js';
 import '../helpers/convert.js';
 
 const SECTION_LIMIT = 25;
+const notVisible = (el)=>{
+    const overflow = getComputedStyle(el).overflow;
+    return overflow !== 'visible';
+};
+const isSection = (el)=>{
+    const tag = el.getAttribute('data-component-tag');
+    return tag === 'Section';
+};
+const isOverToolbarPosition = (el, parent)=>{
+    const rect = el.getBoundingClientRect();
+    const rectP = parent.getBoundingClientRect();
+    // 32px = toolbar active height
+    return rect.top - rectP.top < 32 + 1;
+};
+const findOverflowParent = (element, initEl)=>{
+    const thisEl = element;
+    const origEl = initEl || thisEl;
+    if (!thisEl) return;
+    if (isSection(thisEl)) return;
+    if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
+    if (thisEl.parentElement) {
+        return findOverflowParent(thisEl.parentElement, origEl);
+    } else {
+        return;
+    }
+};
 const ComponentToolbarPreview = ({ ...props })=>{
     const isThemeSection = props.isThemeSection;
     const editingPageType = useShopStore((s)=>s.pageType);
@@ -82,11 +108,16 @@ const ComponentToolbarPreview = ({ ...props })=>{
             setIsShowParentRevert(false);
             setIsShowParent(false);
         } else {
-            const rect = $toolbar.getBoundingClientRect();
-            if (rect.top < parents.length * 24) {
+            const $parentOverflow = findOverflowParent($toolbar, $toolbar);
+            if ($parentOverflow) {
                 setIsShowParentRevert(true);
             } else {
-                setIsShowParentRevert(false);
+                const rect = $toolbar.getBoundingClientRect();
+                if (rect.top < parents.length * 24) {
+                    setIsShowParentRevert(true);
+                } else {
+                    setIsShowParentRevert(false);
+                }
             }
             setIsShowParent(true);
         }

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/is-empty-children.js

@@ -1,9 +1,9 @@
-import { Children, isValidElement } from 'react';
+import { Children } from 'react';
 import { ComponentToolbarPreview } from '../components/ComponentToolbarPreview.js';
 
 const isEmptyChildren = (children)=>{
     let arrChild = Children.toArray(children);
-    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview && isValidElement(child));
+    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview);
     return Children.count(arrChild) < 1 || !children;
 };
 

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/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>;
@@ -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.26",
+  "version": "1.23.0-staging.30",
   "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.26"
+    "@gem-sdk/styles": "1.23.0-staging.29"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",