@gem-sdk/core 1.28.1 → 1.28.7

package/dist/cjs/components/resize/Spacing.js

@@ -131,13 +131,58 @@ function Spacing(props) {
             }
         }
     }, []);
+    const isPopup = (el)=>{
+        const tag = el.getAttribute('data-component-tag');
+        return tag === 'Dialog';
+    };
+    const isSticky = (el)=>{
+        const tag = el.getAttribute('data-component-tag');
+        return tag === 'Sticky';
+    };
+    const setPositionSpacing = react.useCallback((paddingLeft)=>{
+        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
+        if ($component) {
+            if (isPopup($component) || isSticky($component)) return;
+            const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
+            const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
+            if (isActive && paddingLeft) {
+                const currentValue = isNaN(parseInt(paddingLeft)) ? 0 : Math.max(parseInt(paddingLeft), 0);
+                const newValue = `-${currentValue}px`;
+                const translateCss = `translate(-${currentValue}px, -100%)`;
+                if ($bottomDrag.current && $bottomBg.current) {
+                    $bottomBg.current.style.left = newValue;
+                    $bottomDrag.current.style.transform = translateCss;
+                }
+            }
+        }
+    }, []);
+    const onUpdatePaddingLeft = react.useCallback((e)=>{
+        if (isDragging.current) return;
+        const detail = e.detail;
+        if (detail?.paddingLeft) {
+            setPositionSpacing(detail.paddingLeft);
+        }
+    }, [
+        setPositionSpacing
+    ]);
+    react.useEffect(()=>{
+        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
+        if ($component) {
+            const style = getComputedStyle($component);
+            const paddingLeft = style.paddingLeft;
+            setPositionSpacing(paddingLeft);
+        }
+    });
     react.useEffect(()=>{
         window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
+        window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
         return ()=>{
             window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
+            window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
         };
     }, [
-        onUpdateMarginBottom
+        onUpdateMarginBottom,
+        onUpdatePaddingLeft
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {

package/dist/cjs/helpers/background.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var constant = require('./constant.js');
 var colors = require('./colors.js');
 var makeStyle = require('./make-style.js');
 
@@ -45,6 +46,8 @@ const getStyleBgImage = (background, options)=>{
     return makeStyle.makeStyleResponsive('bgi', bgImage);
 };
 const getBgImageByDevice = (background, device, options)=>{
+    const isBgVideo = background?.[device]?.type === 'video';
+    if (isBgVideo) return;
     const backupFileKey = background?.[device]?.image?.backupFileKey;
     const imageByDevice = options?.liquid && backupFileKey && `{{ "${backupFileKey}" | asset_url }}` || background?.[device]?.image?.src;
     if (typeof imageByDevice === 'string') {
@@ -134,37 +137,38 @@ const makeFixedBgAttachment = (background)=>{
     };
 };
 const makeFixedBgAttachmentByDevice = (device, bgAttachment)=>{
-    const subfix = device === 'desktop' ? '' : `-${device}`;
+    const suffix = constant.devicesMapping[device] ?? '';
     if (bgAttachment === 'fixed') {
         return {
             wrapper: {
-                [`--pos${subfix}`]: 'absolute',
-                [`--top${subfix}`]: '0',
-                [`--left${subfix}`]: '0',
-                [`--w${subfix}`]: '100%',
-                [`--h${subfix}`]: '100%'
+                [`--pos${suffix}`]: 'absolute',
+                [`--top${suffix}`]: '0',
+                [`--left${suffix}`]: '0',
+                [`--w${suffix}`]: '100%',
+                [`--h${suffix}`]: '100%'
             },
             content: {
-                [`--pos${subfix}`]: 'fixed',
-                [`--w${subfix}`]: '100vw',
-                [`--h${subfix}`]: '100vh',
-                [`--bga${subfix}`]: 'unset'
+                [`--pos${suffix}`]: 'fixed',
+                [`--w${suffix}`]: '100vw',
+                [`--h${suffix}`]: '100vh',
+                [`--bga${suffix}`]: 'unset'
             }
         };
     }
     return {
         wrapper: {
-            [`--pos${subfix}`]: 'absolute'
+            [`--pos${suffix}`]: 'absolute'
         },
         content: {
-            [`--w${subfix}`]: '100%',
-            [`--h${subfix}`]: '100%',
-            [`--pos${subfix}`]: 'absolute',
-            [`--bga${subfix}`]: bgAttachment
+            [`--w${suffix}`]: 'inherit',
+            [`--h${suffix}`]: 'inherit',
+            [`--pos${suffix}`]: 'absolute',
+            [`--bga${suffix}`]: bgAttachment
         }
     };
 };
 
 exports.composeBackgroundCss = composeBackgroundCss;
+exports.getBgImageByDevice = getBgImageByDevice;
 exports.getStyleBackgroundByDevice = getStyleBackgroundByDevice;
 exports.makeFixedBgAttachment = makeFixedBgAttachment;

package/dist/cjs/helpers/size.js

@@ -91,7 +91,7 @@ const getHeightByShapeGlobalSize = (shapeByLayout)=>{
     });
     return result;
 };
-const getWidthByShapeGlobalSize = (shapeByLayout)=>{
+const getWidthByShapeGlobalSize = (shapeByLayout, defaultAuto)=>{
     let result = {};
     const DEVICES = [
         'desktop',
@@ -100,7 +100,7 @@ const getWidthByShapeGlobalSize = (shapeByLayout)=>{
     ];
     DEVICES.forEach((device)=>{
         const shapeByDevice = getResonsiveValue.getResponsiveValueByScreen(shapeByLayout, device);
-        const width = shapeByDevice?.width;
+        const width = defaultAuto ? shapeByDevice?.width || 'auto' : shapeByDevice?.width;
         if (width) {
             result = {
                 ...result,

package/dist/cjs/index.js

@@ -236,6 +236,7 @@ exports.getStyleShadow = shadow.getStyleShadow;
 exports.getStyleShadowState = shadow.getStyleShadowState;
 exports.parseValueWithUnit = shadow.parseValueWithUnit;
 exports.composeBackgroundCss = background.composeBackgroundCss;
+exports.getBgImageByDevice = background.getBgImageByDevice;
 exports.getStyleBackgroundByDevice = background.getStyleBackgroundByDevice;
 exports.makeFixedBgAttachment = background.makeFixedBgAttachment;
 exports.generateCollectionQueryKey = query.generateCollectionQueryKey;

package/dist/esm/components/resize/Spacing.js

@@ -127,13 +127,58 @@ function Spacing(props) {
             }
         }
     }, []);
+    const isPopup = (el)=>{
+        const tag = el.getAttribute('data-component-tag');
+        return tag === 'Dialog';
+    };
+    const isSticky = (el)=>{
+        const tag = el.getAttribute('data-component-tag');
+        return tag === 'Sticky';
+    };
+    const setPositionSpacing = useCallback((paddingLeft)=>{
+        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
+        if ($component) {
+            if (isPopup($component) || isSticky($component)) return;
+            const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
+            const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
+            if (isActive && paddingLeft) {
+                const currentValue = isNaN(parseInt(paddingLeft)) ? 0 : Math.max(parseInt(paddingLeft), 0);
+                const newValue = `-${currentValue}px`;
+                const translateCss = `translate(-${currentValue}px, -100%)`;
+                if ($bottomDrag.current && $bottomBg.current) {
+                    $bottomBg.current.style.left = newValue;
+                    $bottomDrag.current.style.transform = translateCss;
+                }
+            }
+        }
+    }, []);
+    const onUpdatePaddingLeft = useCallback((e)=>{
+        if (isDragging.current) return;
+        const detail = e.detail;
+        if (detail?.paddingLeft) {
+            setPositionSpacing(detail.paddingLeft);
+        }
+    }, [
+        setPositionSpacing
+    ]);
+    useEffect(()=>{
+        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
+        if ($component) {
+            const style = getComputedStyle($component);
+            const paddingLeft = style.paddingLeft;
+            setPositionSpacing(paddingLeft);
+        }
+    });
     useEffect(()=>{
         window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
+        window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
         return ()=>{
             window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
+            window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
         };
     }, [
-        onUpdateMarginBottom
+        onUpdateMarginBottom,
+        onUpdatePaddingLeft
     ]);
     return /*#__PURE__*/ jsx(Fragment, {
         children: props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {

package/dist/esm/helpers/background.js

@@ -1,3 +1,4 @@
+import { devicesMapping } from './constant.js';
 import { isColor, getSingleColorVariable } from './colors.js';
 import { makeStyleResponsive } from './make-style.js';
 
@@ -43,6 +44,8 @@ const getStyleBgImage = (background, options)=>{
     return makeStyleResponsive('bgi', bgImage);
 };
 const getBgImageByDevice = (background, device, options)=>{
+    const isBgVideo = background?.[device]?.type === 'video';
+    if (isBgVideo) return;
     const backupFileKey = background?.[device]?.image?.backupFileKey;
     const imageByDevice = options?.liquid && backupFileKey && `{{ "${backupFileKey}" | asset_url }}` || background?.[device]?.image?.src;
     if (typeof imageByDevice === 'string') {
@@ -132,35 +135,35 @@ const makeFixedBgAttachment = (background)=>{
     };
 };
 const makeFixedBgAttachmentByDevice = (device, bgAttachment)=>{
-    const subfix = device === 'desktop' ? '' : `-${device}`;
+    const suffix = devicesMapping[device] ?? '';
     if (bgAttachment === 'fixed') {
         return {
             wrapper: {
-                [`--pos${subfix}`]: 'absolute',
-                [`--top${subfix}`]: '0',
-                [`--left${subfix}`]: '0',
-                [`--w${subfix}`]: '100%',
-                [`--h${subfix}`]: '100%'
+                [`--pos${suffix}`]: 'absolute',
+                [`--top${suffix}`]: '0',
+                [`--left${suffix}`]: '0',
+                [`--w${suffix}`]: '100%',
+                [`--h${suffix}`]: '100%'
             },
             content: {
-                [`--pos${subfix}`]: 'fixed',
-                [`--w${subfix}`]: '100vw',
-                [`--h${subfix}`]: '100vh',
-                [`--bga${subfix}`]: 'unset'
+                [`--pos${suffix}`]: 'fixed',
+                [`--w${suffix}`]: '100vw',
+                [`--h${suffix}`]: '100vh',
+                [`--bga${suffix}`]: 'unset'
             }
         };
     }
     return {
         wrapper: {
-            [`--pos${subfix}`]: 'absolute'
+            [`--pos${suffix}`]: 'absolute'
         },
         content: {
-            [`--w${subfix}`]: '100%',
-            [`--h${subfix}`]: '100%',
-            [`--pos${subfix}`]: 'absolute',
-            [`--bga${subfix}`]: bgAttachment
+            [`--w${suffix}`]: 'inherit',
+            [`--h${suffix}`]: 'inherit',
+            [`--pos${suffix}`]: 'absolute',
+            [`--bga${suffix}`]: bgAttachment
         }
     };
 };
 
-export { composeBackgroundCss, getStyleBackgroundByDevice, makeFixedBgAttachment };
+export { composeBackgroundCss, getBgImageByDevice, getStyleBackgroundByDevice, makeFixedBgAttachment };

package/dist/esm/helpers/size.js

@@ -89,7 +89,7 @@ const getHeightByShapeGlobalSize = (shapeByLayout)=>{
     });
     return result;
 };
-const getWidthByShapeGlobalSize = (shapeByLayout)=>{
+const getWidthByShapeGlobalSize = (shapeByLayout, defaultAuto)=>{
     let result = {};
     const DEVICES = [
         'desktop',
@@ -98,7 +98,7 @@ const getWidthByShapeGlobalSize = (shapeByLayout)=>{
     ];
     DEVICES.forEach((device)=>{
         const shapeByDevice = getResponsiveValueByScreen(shapeByLayout, device);
-        const width = shapeByDevice?.width;
+        const width = defaultAuto ? shapeByDevice?.width || 'auto' : shapeByDevice?.width;
         if (width) {
             result = {
                 ...result,

package/dist/esm/index.js

@@ -55,7 +55,7 @@ export { RenderIf, composeMemo, dataStringify, props, styles, template } from '.
 export { baseAssetURL, isLocalEnv } from './helpers/convert.js';
 export { composeSize, composeSizeCss, genSizeClass, getAspectRatioGlobalSize, getGlobalSizeGap, getHeightByShapeGlobalSize, getPaddingGlobalSize, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeStyleWithDefault } from './helpers/size.js';
 export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';
-export { composeBackgroundCss, getStyleBackgroundByDevice, makeFixedBgAttachment } from './helpers/background.js';
+export { composeBackgroundCss, getBgImageByDevice, getStyleBackgroundByDevice, makeFixedBgAttachment } from './helpers/background.js';
 export { generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey } from './helpers/query.js';
 export { composeAdvanceStyle, splitStyle } from './helpers/compose-advance-style.js';
 export { composePositionLineHeight, composePostionIconList } from './helpers/icon-list.js';

package/dist/types/index.d.ts

@@ -832,6 +832,12 @@ type LayoutControlType<T> = SharedControlType<T> & {
     isProductLayout?: boolean;
 };
 
+type LayoutBannerControlType<T> = SharedControlType<T> & {
+    type: 'layout-banner';
+    maxCol?: number;
+    isProductLayout?: boolean;
+};
+
 type CollectionBannerControlType<T> = SharedControlType<T> & {
     type: 'collectionBanner';
     value?: Background;
@@ -932,8 +938,12 @@ type GridArrange<T> = SharedControlType<T> & {
 };
 
 type SettingID = 'shape' | 'width' | 'height' | 'gap' | 'padding';
-type OptionKeyword = 'default' | 'auto' | 'full' | 'equal' | 'small' | 'medium' | 'large' | 'original';
+type ShapeOptionKeyword = 'original' | 'square' | 'vertical' | 'horizontal' | 'custom';
+type HeightOptionKeyword = 'fit-content' | 'fit-screen';
+type OptionKeyword = 'default' | 'auto' | 'full' | 'equal' | 'small' | 'medium' | 'large' | HeightOptionKeyword | ShapeOptionKeyword;
 type PaddingOptions = 'small' | 'medium' | 'large' | 'custom';
+type ShapeOptions = 'square' | 'vertical' | 'horizontal' | 'custom' | 'original';
+type ShapeConfig = Partial<Record<ShapeOptions, string>>;
 type PaddingConfig = Partial<Record<PaddingOptions, {
     vertical: string;
     horizontal: string;
@@ -942,6 +952,8 @@ type SettingConfig = {
     sizeConfig?: Partial<Record<'small' | 'medium' | 'large', string>>;
     displayOptions?: OptionKeyword[];
     paddingConfig?: PaddingConfig;
+    shapeConfig?: ShapeConfig;
+    shapeTitleConfig?: ShapeConfig;
     name?: string;
     units?: string[];
 };
@@ -963,9 +975,10 @@ type DropdownInput<T> = SharedControlType<T> & {
     type: 'dropdown:input' | 'accordion:dropdown:input';
     hideUnit?: boolean;
     inputType?: 'text' | 'number';
+    units?: string[];
     displayOptions?: {
         label: string;
-        value: string;
+        value?: string;
         reversed?: boolean;
         showValue?: boolean;
     }[];
@@ -985,7 +998,18 @@ type AliPickSectionControlType<T> = SharedControlType<T> & {
     pickSectionLabel?: string;
 };
 
-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> | ChildIconType<T> | DropdownInput<T> | Dropdown<T> | AliPickSectionControlType<T>;
+type ParallaxScrollingType<T> = SharedControlType<T> & {
+    type: 'parallax-scrolling';
+};
+
+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> | LayoutBannerControlType<T> | SwatchesLinkControlType<T> | VariantSwatchesPresetControlType<T> | ProductListControlType<T> | CollectionBannerControlType<T> | Ratio<T> | StickyDisplayControlType<T> | SyncProductPropertiesControlType<T> | StepsGuide<T> | ImageShape<T> | GridArrange<T> | SizeSetting$1<T> | ChildIconType<T> | DropdownInput<T> | Dropdown<T> | AliPickSectionControlType<T> | ParallaxScrollingType<T>;
+type ControlTriggerAction = {
+    controlId: string;
+    newValue?: any;
+    controlType: string;
+    groupType: string;
+    valueIfNull?: any;
+};
 type Setting<P extends BaseProps> = {
     id: 'setting';
     note?: string;
@@ -1083,6 +1107,16 @@ type ControlUI = {
         hideOnPages?: PageType[];
     };
     isMoreSetting?: boolean;
+    controlChangeTrigger?: {
+        settings?: {
+            source: string[];
+            condition: string;
+            action: ControlTriggerAction;
+        }[];
+        options?: {
+            noRecordHistory?: boolean;
+        };
+    };
 };
 type PageType = 'ARTICLE' | 'BLOG' | 'COLLECTION' | 'GP_ARTICLE' | 'GP_BLOG' | 'GP_COLLECTION' | 'GP_INDEX' | 'GP_PRODUCT' | 'GP_STATIC' | 'PRODUCT' | 'STATIC' | 'THEME_SECTION';
 type ComponentPreset = {
@@ -9607,7 +9641,7 @@ declare const getGlobalSizeGap: (globalSize?: ObjectDevices<SizeSettingGlobal>)
 declare const makeStyleWithDefault: <T extends ShortHandProperty, K>(name: T, value?: Partial<Record<NameDevices$1, K>> | undefined, defaultVal?: Partial<Record<NameDevices$1, K>> | undefined) => Record<ResponsiveKey<T>, K>;
 declare const getWidthHeightGlobalSize: (type: 'width' | 'height', globalSize?: ObjectDevices<SizeSettingGlobal>) => Partial<Record<NameDevices$1, string | number>>;
 declare const getHeightByShapeGlobalSize: (shapeByLayout?: ObjectDevices<SizeSettingGlobal>) => Partial<Record<NameDevices$1, string>>;
-declare const getWidthByShapeGlobalSize: (shapeByLayout?: ObjectDevices<SizeSettingGlobal>) => Partial<Record<NameDevices$1, string>>;
+declare const getWidthByShapeGlobalSize: (shapeByLayout?: ObjectDevices<SizeSettingGlobal>, defaultAuto?: boolean) => Partial<Record<NameDevices$1, string>>;
 declare const getAspectRatioGlobalSize: (shape?: ObjectDevices<SizeSettingGlobal>) => ObjectDevices<string>;
 declare const getPaddingGlobalSize: (globalSize?: ObjectDevices<SizeSettingGlobal>) => React.CSSProperties;
 
@@ -9622,11 +9656,13 @@ declare const composeShadowCss: ({ hasBoxShadow, boxShadowValue, important, }: {
     important?: boolean | undefined;
 }) => string | undefined;
 
+type Devices = 'desktop' | 'tablet' | 'mobile';
 type Options = {
     liquid?: boolean;
     ignoreBgAttachment?: boolean;
 };
 declare const getStyleBackgroundByDevice: (background?: ObjectDevices<Background>, options?: Options) => {};
+declare const getBgImageByDevice: (background: ObjectDevices<Background>, device: Devices, options?: Options) => string | undefined;
 declare const composeBackgroundCss: (backgroundColor?: ColorValueType) => string;
 declare const makeFixedBgAttachment: (background?: ObjectDevices<Background>) => {
     wrapper: {
@@ -9929,4 +9965,4 @@ type PublishedThemePageSelectFragment = Pick<PublishedThemePage, 'id' | 'name' |
 
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
 
-export { AddOn, AddonProvider, AddonProviderProps, AliReviewsWidgetType, 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, FeraReviewsV3WidgetType, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, GrowaveWidgetType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsAdvancedWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices$1 as NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OpinewDesignWidgetType, OpinewWidgetType, OptionNormalStyle, OptionSpecialStyle, PageContext, PageProvider, PageProviderProps, 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, ResponsiveKey, 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, UltimateSalesBoostWidgetType, VariantSelectFragment, VitalsWidgetType, WiserWidgetType, WrapRenderChildren, YotpoReviewsWidgetType, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composePositionLineHeight, composePostionIconList, 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, getAspectRatioGlobalSize, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getGlobalSizeGap, getHeightByShapeGlobalSize, getPaddingGlobalSize, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeFixedBgAttachment, makeGlobalSize, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeStyleWithDefault, 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, usePageStore, 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, AliReviewsWidgetType, 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, ControlTriggerAction, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, DynamicCollection, DynamicProduct, ExtractState, FeraReviewsV3WidgetType, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, GrowaveWidgetType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsAdvancedWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices$1 as NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OpinewDesignWidgetType, OpinewWidgetType, OptionNormalStyle, OptionSpecialStyle, Options, PageContext, PageProvider, PageProviderProps, 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, ResponsiveKey, 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, UltimateSalesBoostWidgetType, VariantSelectFragment, VitalsWidgetType, WiserWidgetType, WrapRenderChildren, YotpoReviewsWidgetType, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composePositionLineHeight, composePostionIconList, 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, getAspectRatioGlobalSize, getBgImageByDevice, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getGlobalSizeGap, getHeightByShapeGlobalSize, getPaddingGlobalSize, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeFixedBgAttachment, makeGlobalSize, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeStyleWithDefault, 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, usePageStore, 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.28.1",
+  "version": "1.28.7",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@gem-sdk/adapter-shopify": "1.25.0",
-    "@gem-sdk/styles": "1.27.14"
+    "@gem-sdk/styles": "1.28.2"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",