@gem-sdk/core 1.25.26 → 1.25.30

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -160,6 +160,17 @@ const ComponentToolbarPreview = ({ ...props })=>{
         window.dispatchEvent(event);
         return false;
     };
+    const toolbarName = ()=>{
+        const tag = props.tag;
+        if (tag === 'IconListV2') {
+            return 'Item list';
+        }
+        if (tag === 'IconList') {
+            return 'Advanced list';
+        }
+        const name = props.customLabel || props.label;
+        return name;
+    };
     const onZoomOut = (e)=>{
         e.preventDefault();
         e.stopPropagation();
@@ -252,7 +263,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
                                 children: isThemeSection ? props.name : `Section ${getIndexSection() + 1}${getSectionNumber() >= SECTION_LIMIT - 5 ? `/${SECTION_LIMIT}` : ''}`
                             }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 "data-toolbar-name": true,
-                                children: props.customLabel || props.label
+                                children: toolbarName()
                             }),
                             props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 "data-toolbar-icon-parent": true,

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -106,11 +106,16 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                 advanced: advanced
             }),
             /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                style: style,
+                style: !props.editorConfigs?.component?.excludeApplyStyle ? style : {},
                 className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
                 ...builderAttrs,
                 children: [
-                    children,
+                    !props.editorConfigs?.component?.validate && children,
+                    /*#__PURE__*/ react.isValidElement(children) && props.editorConfigs?.component?.validate && /*#__PURE__*/ jsxRuntime.jsx(children.type, {
+                        ...children.props,
+                        style,
+                        advanced
+                    }),
                     /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
                         ...props
                     })

package/dist/cjs/components/Render.liquid.js

@@ -24,6 +24,9 @@ const componentTexts = [
     'Text',
     'Heading'
 ];
+const componentIconList = [
+    'IconListV2'
+];
 const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageContext, ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
@@ -104,7 +107,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                 });
             });
         } else {
-            liquid = render.template`<div style="${style}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
+            liquid = render.template`<div style="${!componentIconList.includes(item.tag) ? style : ''}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
       ${render.RenderIf(item?.childrens?.length, ()=>{
                 return Component({
                     builderProps: {
@@ -153,6 +156,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                     },
                     pageContext,
                     isText: componentTexts.includes(item.tag) ? true : null,
+                    style: componentIconList.includes(item.tag) ? style : null,
                     ...passProps
                 });
             })}

package/dist/cjs/helpers/icon-list.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var constant = require('../web-components/src/helpers/styles/constant.js');
+
+const TEXT_TOTAL_SPACING = 3; //Padding 2, margin 1
+const composePostionIconList = (lineHeight, position, iconWidth)=>{
+    const compose = {};
+    composePositionLineHeight({
+        compose,
+        lineHeight,
+        device: 'desktop',
+        position,
+        iconWidth
+    });
+    composePositionLineHeight({
+        compose,
+        lineHeight,
+        device: 'tablet',
+        position,
+        iconWidth
+    });
+    composePositionLineHeight({
+        compose,
+        lineHeight,
+        device: 'mobile',
+        position,
+        iconWidth
+    });
+    return compose;
+};
+const composePositionLineHeight = ({ compose, lineHeight, device, position, iconWidth })=>{
+    const positionDevice = position?.[device];
+    const iconWidthDevice = iconWidth?.[device];
+    if (positionDevice) {
+        const suffix = constant.devicesMapping[device] ?? '';
+        if (positionDevice === 'center') {
+            compose.wrapper = {
+                ...compose.wrapper,
+                [`--ai${suffix}`]: 'center'
+            };
+            compose.content = {
+                ...compose.content,
+                [`--pos${suffix}`]: 'static'
+            };
+        } else if (iconWidthDevice) {
+            const computedTop = parseFloat(lineHeight.replaceAll(/[a-zA-Z]/g, '')) / 2 + TEXT_TOTAL_SPACING - iconWidthDevice / 2;
+            compose.wrapper = {
+                ...compose.wrapper,
+                [`--ai${suffix}`]: 'flex-start'
+            };
+            compose.content = {
+                ...compose.content,
+                [`--top${suffix}`]: `${Math.max(0, Math.ceil(computedTop))}px`,
+                [`--pos${suffix}`]: 'relative'
+            };
+        }
+    }
+};
+
+exports.composePositionLineHeight = composePositionLineHeight;
+exports.composePostionIconList = composePostionIconList;

package/dist/cjs/index.js

@@ -57,6 +57,7 @@ var shadow = require('./helpers/shadow.js');
 var background = require('./helpers/background.js');
 var query = require('./helpers/query.js');
 var composeAdvanceStyle = require('./helpers/compose-advance-style.js');
+var iconList = require('./helpers/icon-list.js');
 var useAddToCart = require('./hooks/cart/use-add-to-cart.js');
 var useCartData = require('./hooks/cart/use-cart-data.js');
 var useCartDiscountCodesUpdate = require('./hooks/cart/use-cart-discount-codes-update.js');
@@ -240,6 +241,8 @@ exports.generateProductQueryKey = query.generateProductQueryKey;
 exports.generateProductsQueryKey = query.generateProductsQueryKey;
 exports.composeAdvanceStyle = composeAdvanceStyle.composeAdvanceStyle;
 exports.splitStyle = composeAdvanceStyle.splitStyle;
+exports.composePositionLineHeight = iconList.composePositionLineHeight;
+exports.composePostionIconList = iconList.composePostionIconList;
 exports.useAddToCart = useAddToCart.useAddToCart;
 exports.useCartData = useCartData.useCartData;
 exports.useCartDiscountCodesUpdate = useCartDiscountCodesUpdate.useCartDiscountCodesUpdate;

package/dist/cjs/web-components/src/helpers/styles/constant.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const devicesMapping = {
+    desktop: '',
+    tablet: '-tablet',
+    mobile: '-mobile'
+};
+
+exports.devicesMapping = devicesMapping;

package/dist/esm/components/ComponentToolbarPreview.js

@@ -158,6 +158,17 @@ const ComponentToolbarPreview = ({ ...props })=>{
         window.dispatchEvent(event);
         return false;
     };
+    const toolbarName = ()=>{
+        const tag = props.tag;
+        if (tag === 'IconListV2') {
+            return 'Item list';
+        }
+        if (tag === 'IconList') {
+            return 'Advanced list';
+        }
+        const name = props.customLabel || props.label;
+        return name;
+    };
     const onZoomOut = (e)=>{
         e.preventDefault();
         e.stopPropagation();
@@ -250,7 +261,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
                                 children: isThemeSection ? props.name : `Section ${getIndexSection() + 1}${getSectionNumber() >= SECTION_LIMIT - 5 ? `/${SECTION_LIMIT}` : ''}`
                             }) : /*#__PURE__*/ jsx("div", {
                                 "data-toolbar-name": true,
-                                children: props.customLabel || props.label
+                                children: toolbarName()
                             }),
                             props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsx("div", {
                                 "data-toolbar-icon-parent": true,

package/dist/esm/components/ComponentWrapperPreview.js

@@ -102,11 +102,16 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                 advanced: advanced
             }),
             /*#__PURE__*/ jsxs("div", {
-                style: style,
+                style: !props.editorConfigs?.component?.excludeApplyStyle ? style : {},
                 className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
                 ...builderAttrs,
                 children: [
-                    children,
+                    !props.editorConfigs?.component?.validate && children,
+                    /*#__PURE__*/ isValidElement(children) && props.editorConfigs?.component?.validate && /*#__PURE__*/ jsx(children.type, {
+                        ...children.props,
+                        style,
+                        advanced
+                    }),
                     /*#__PURE__*/ jsx(ComponentToolbarPreview, {
                         ...props
                     })

package/dist/esm/components/Render.liquid.js

@@ -20,6 +20,9 @@ const componentTexts = [
     'Text',
     'Heading'
 ];
+const componentIconList = [
+    'IconListV2'
+];
 const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageContext, ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
@@ -100,7 +103,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                 });
             });
         } else {
-            liquid = template`<div style="${style}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
+            liquid = template`<div style="${!componentIconList.includes(item.tag) ? style : ''}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
       ${RenderIf(item?.childrens?.length, ()=>{
                 return Component({
                     builderProps: {
@@ -149,6 +152,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                     },
                     pageContext,
                     isText: componentTexts.includes(item.tag) ? true : null,
+                    style: componentIconList.includes(item.tag) ? style : null,
                     ...passProps
                 });
             })}

package/dist/esm/helpers/icon-list.js

@@ -0,0 +1,58 @@
+import { devicesMapping } from '../web-components/src/helpers/styles/constant.js';
+
+const TEXT_TOTAL_SPACING = 3; //Padding 2, margin 1
+const composePostionIconList = (lineHeight, position, iconWidth)=>{
+    const compose = {};
+    composePositionLineHeight({
+        compose,
+        lineHeight,
+        device: 'desktop',
+        position,
+        iconWidth
+    });
+    composePositionLineHeight({
+        compose,
+        lineHeight,
+        device: 'tablet',
+        position,
+        iconWidth
+    });
+    composePositionLineHeight({
+        compose,
+        lineHeight,
+        device: 'mobile',
+        position,
+        iconWidth
+    });
+    return compose;
+};
+const composePositionLineHeight = ({ compose, lineHeight, device, position, iconWidth })=>{
+    const positionDevice = position?.[device];
+    const iconWidthDevice = iconWidth?.[device];
+    if (positionDevice) {
+        const suffix = devicesMapping[device] ?? '';
+        if (positionDevice === 'center') {
+            compose.wrapper = {
+                ...compose.wrapper,
+                [`--ai${suffix}`]: 'center'
+            };
+            compose.content = {
+                ...compose.content,
+                [`--pos${suffix}`]: 'static'
+            };
+        } else if (iconWidthDevice) {
+            const computedTop = parseFloat(lineHeight.replaceAll(/[a-zA-Z]/g, '')) / 2 + TEXT_TOTAL_SPACING - iconWidthDevice / 2;
+            compose.wrapper = {
+                ...compose.wrapper,
+                [`--ai${suffix}`]: 'flex-start'
+            };
+            compose.content = {
+                ...compose.content,
+                [`--top${suffix}`]: `${Math.max(0, Math.ceil(computedTop))}px`,
+                [`--pos${suffix}`]: 'relative'
+            };
+        }
+    }
+};
+
+export { composePositionLineHeight, composePostionIconList };

package/dist/esm/index.js

@@ -58,6 +58,7 @@ export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUn
 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 { composePositionLineHeight, composePostionIconList } from './helpers/icon-list.js';
 export { useAddToCart } from './hooks/cart/use-add-to-cart.js';
 export { useCartData } from './hooks/cart/use-cart-data.js';
 export { useCartDiscountCodesUpdate } from './hooks/cart/use-cart-discount-codes-update.js';

package/dist/esm/web-components/src/helpers/styles/constant.js

@@ -0,0 +1,7 @@
+const devicesMapping = {
+    desktop: '',
+    tablet: '-tablet',
+    mobile: '-mobile'
+};
+
+export { devicesMapping };

package/dist/types/index.d.ts

@@ -125,8 +125,8 @@ type Component = InitComponentType & {
     uid: string;
     childrens?: Component[];
 };
-type NameDevices = 'desktop' | 'tablet' | 'mobile';
-type ObjectDevices<T> = Partial<Record<NameDevices, T>>;
+type NameDevices$1 = 'desktop' | 'tablet' | 'mobile';
+type ObjectDevices<T> = Partial<Record<NameDevices$1, T>>;
 type StateType = 'normal' | 'hover' | 'focus' | 'active';
 type StateProp<T> = Partial<Record<StateType, T>>;
 type ResponsiveStateProp<T> = ObjectDevices<StateProp<T>>;
@@ -348,6 +348,7 @@ type GroupControlType<T> = {
 type IconControlType<T> = SharedControlType<T> & {
     type: 'icon';
     placeholder?: string;
+    hideInput?: boolean;
 };
 
 type ImageControlType<T> = SharedControlType<T> & {
@@ -784,6 +785,7 @@ type Mapped$1<K, T> = NonNullable<T> extends ObjectDevices<infer U> ? {
     options: Option<T>[];
     iconViewBox?: string;
     enableItemBackground?: boolean;
+    enableTooltip?: boolean;
     default?: T;
 };
 type LayoutSegmentControlType<T> = {
@@ -933,9 +935,27 @@ type SizeSetting$1<T> = SharedControlType<T> & {
     readonly?: boolean;
     hiddenSettings?: SettingID[];
     settingConfig?: Partial<Record<SettingID, SettingConfig>>;
+    hiddenShowMore?: 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> | SizeSetting$1<T>;
+type ChildIconType<T> = SharedControlType<T> & {
+    type: 'child-icon';
+    [key: string]: any;
+};
+
+type DropdownInput<T> = SharedControlType<T> & {
+    type: 'dropdown:input';
+    hideUnit?: boolean;
+    inputType?: 'text' | 'number';
+    displayOptions?: {
+        label: string;
+        value: string;
+        reversed?: boolean;
+        showValue?: 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> | SizeSetting$1<T> | ChildIconType<T> | DropdownInput<T>;
 type Setting<P extends BaseProps> = {
     id: 'setting';
     note?: string;
@@ -963,6 +983,8 @@ type ComponentSetting<P extends BaseProps> = {
     noWrap?: boolean;
     editorConfigs?: {
         component?: {
+            validate?: boolean;
+            excludeApplyStyle?: boolean;
             noDelete?: boolean;
             noDuplicate?: boolean;
             noDragDrop?: boolean;
@@ -7870,9 +7892,9 @@ declare function cls(...classes: ClassValue[]): string;
  */
 declare const flattenConnection: <T>(connection?: Maybe<GraphQLConnection<T>>) => Maybe<T>[];
 
-declare const getResponsiveValue: <I, K extends keyof I>(input?: Partial<Record<NameDevices, I>> | undefined, k?: K | undefined) => Partial<Record<NameDevices, I[K]>>;
-declare const getResponsiveStateValue: <I>(k: StateType, input?: Partial<Record<NameDevices, Partial<Record<StateType, I>>>> | undefined) => Partial<Record<NameDevices, I>>;
-declare const getResponsiveValueByScreen: <T>(value?: Partial<Record<NameDevices, T>> | undefined, breakpoint?: NameDevices | undefined, defaultValue?: T | undefined) => T | undefined;
+declare const getResponsiveValue: <I, K extends keyof I>(input?: Partial<Record<NameDevices$1, I>> | undefined, k?: K | undefined) => Partial<Record<NameDevices$1, I[K]>>;
+declare const getResponsiveStateValue: <I>(k: StateType, input?: Partial<Record<NameDevices$1, Partial<Record<StateType, I>>>> | undefined) => Partial<Record<NameDevices$1, I>>;
+declare const getResponsiveValueByScreen: <T>(value?: Partial<Record<NameDevices$1, T>> | undefined, breakpoint?: NameDevices$1 | undefined, defaultValue?: T | undefined) => T | undefined;
 declare const isColumnDirectionExist: (layout: ObjectDevices<ObjectLayoutValue>, breakpoint: keyof ObjectDevices<ObjectLayoutValue>) => boolean;
 
 declare function getShortName(name: string): string;
@@ -7897,8 +7919,8 @@ declare const makeStyle: <T extends ShortHandProperty, K>(style: Record<T, K>) =
     [k: string]: Record<`--${T}`, K>;
 };
 declare const makeStyleState: <T extends ShortHandProperty, K>(name: T, value?: Partial<Record<StateType, K>> | undefined) => {};
-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 makeStyleResponsiveState: <T extends ShortHandProperty, K>(name: T, value?: Partial<Record<NameDevices$1, Partial<Record<StateType, K>>>> | undefined) => {};
+declare const makeStyleResponsive: <T extends ShortHandProperty, K>(name: T, value?: Partial<Record<NameDevices$1, 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;
@@ -9456,8 +9478,8 @@ declare const composeTypographyStyle: (typo?: TypographySettingV2, typography?:
 };
 
 declare const getCornerCSSFromGlobal: (corner?: CornerRadius) => React.CSSProperties;
-declare const getRadiusCSSFromGlobal: (state: StateType, key?: RoundedSize, device?: NameDevices) => React.CSSProperties;
-declare const getCustomRadius: (state: StateType, radius?: CornerRadius, device?: NameDevices) => React.CSSProperties;
+declare const getRadiusCSSFromGlobal: (state: StateType, key?: RoundedSize, device?: NameDevices$1) => React.CSSProperties;
+declare const getCustomRadius: (state: StateType, radius?: CornerRadius, device?: NameDevices$1) => React.CSSProperties;
 declare const composeRadius: (value?: StateProp<CornerRadius> | ResponsiveStateProp<CornerRadius>) => React.CSSProperties;
 declare const composeRadiusResponsive: (radiusValue?: ObjectDevices<CornerRadius>) => React.CSSProperties;
 declare const getRadiusStyleActiveState: (radiusValue?: StateProp<CornerRadius>) => React.CSSProperties;
@@ -9540,10 +9562,10 @@ declare const makeGlobalSize: (globalSize?: ObjectDevices<SizeSettingGlobal>) =>
     height: Record<ResponsiveKey<"h">, string | number>;
     padding: React.CSSProperties;
 };
-declare const makeStyleWithDefault: <T extends ShortHandProperty, K>(name: T, value?: Partial<Record<NameDevices, K>> | undefined, defaultVal?: Partial<Record<NameDevices, K>> | undefined) => Record<ResponsiveKey<T>, K>;
-declare const getWidthHeightGlobalSize: (type: 'width' | 'height', globalSize?: ObjectDevices<SizeSettingGlobal>) => Partial<Record<NameDevices, string | number>>;
-declare const getHeightByShapeGlobalSize: (shapeByLayout?: ObjectDevices<SizeSettingGlobal>) => Partial<Record<NameDevices, string>>;
-declare const getWidthByShapeGlobalSize: (shapeByLayout?: ObjectDevices<SizeSettingGlobal>) => Partial<Record<NameDevices, string>>;
+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 getAspectRatioGlobalSize: (shape?: ObjectDevices<SizeSettingGlobal>) => ObjectDevices<string>;
 declare const getPaddingGlobalSize: (globalSize?: ObjectDevices<SizeSettingGlobal>) => React.CSSProperties;
 
@@ -9614,6 +9636,21 @@ type AdvanceValue = Primitive | ObjectDevices<Primitive>;
 declare function composeAdvanceStyle(data?: Record<string, AdvanceValue>, tag?: string): React.CSSProperties;
 declare const splitStyle: (keys: ShortHandProperty[], style?: React.CSSProperties) => React.CSSProperties[];
 
+type NameDevices = 'desktop' | 'tablet' | 'mobile';
+
+type PostionType = {
+    wrapper?: Record<string, string | number>;
+    content?: Record<string, string | number>;
+};
+declare const composePostionIconList: (lineHeight: string, position?: ObjectDevices<'center' | 'baseline'>, iconWidth?: ObjectDevices<number>) => PostionType;
+declare const composePositionLineHeight: ({ compose, lineHeight, device, position, iconWidth, }: {
+    compose: PostionType;
+    lineHeight: string;
+    device: NameDevices;
+    position?: Partial<Record<NameDevices$1, "center" | "baseline">> | undefined;
+    iconWidth?: Partial<Record<NameDevices$1, number>> | undefined;
+}) => void;
+
 type Func$6 = ReturnType<typeof addToCartOperation>;
 type Response$6 = Awaited<ReturnType<Func$6>>;
 type Args$5 = Parameters<Func$6>[0];
@@ -9694,7 +9731,7 @@ declare const useProductQuery: (productId?: string, options?: SWRConfiguration<P
 
 declare const useProductsQuery: (ids?: string[], options?: SWRConfiguration<ProductsQueryResponse>, defaultSelectedProductCount?: number) => swr__internal.SWRResponse<ProductsQueryResponse, any, Partial<swr__internal.PublicConfiguration<ProductsQueryResponse, any, (arg: ["query/products", FetchProductsParams]) => swr__internal.FetcherResponse<ProductsQueryResponse>>> | undefined>;
 
-declare const useCurrentDevice: () => NameDevices;
+declare const useCurrentDevice: () => NameDevices$1;
 
 declare const useFormatMoney: (amount: number, withCurrency: boolean) => string;
 
@@ -9809,23 +9846,23 @@ declare const useCheckAvailableVariantInStock: (optionId: string, optionValue: s
 declare const useProductList: () => CollectionProductSelectFragment | undefined;
 declare const useProductListProducts: () => (ProductQuickSelectFragment | undefined)[] | undefined;
 declare const useProductListSettings: () => {
-    loop?: Partial<Record<NameDevices, boolean>> | undefined;
-    scrollMode?: Partial<Record<NameDevices, "snap" | "free" | "free-snap">> | undefined;
-    slidesToShow?: Partial<Record<NameDevices, number | "auto">> | undefined;
-    spacing?: Partial<Record<NameDevices, number>> | undefined;
+    loop?: Partial<Record<NameDevices$1, boolean>> | undefined;
+    scrollMode?: Partial<Record<NameDevices$1, "snap" | "free" | "free-snap">> | undefined;
+    slidesToShow?: Partial<Record<NameDevices$1, number | "auto">> | undefined;
+    spacing?: Partial<Record<NameDevices$1, number>> | undefined;
     layout?: "grid" | "slider" | undefined;
-    dot?: Partial<Record<NameDevices, boolean>> | undefined;
-    arrow?: Partial<Record<NameDevices, boolean>> | undefined;
-    controlOverContent?: Partial<Record<NameDevices, boolean>> | undefined;
+    dot?: Partial<Record<NameDevices$1, boolean>> | undefined;
+    arrow?: Partial<Record<NameDevices$1, boolean>> | undefined;
+    controlOverContent?: Partial<Record<NameDevices$1, boolean>> | undefined;
     speed?: number | undefined;
 } | undefined;
 declare const useProductListStyles: () => {
-    horizontalGutter?: Partial<Record<NameDevices, string>> | undefined;
-    verticalGutter?: Partial<Record<NameDevices, string>> | undefined;
-    fullWidth?: Partial<Record<NameDevices, boolean>> | undefined;
-    spacing?: Partial<Record<NameDevices, number>> | undefined;
-    width?: Partial<Record<NameDevices, string>> | undefined;
-    height?: Partial<Record<NameDevices, string>> | undefined;
+    horizontalGutter?: Partial<Record<NameDevices$1, string>> | undefined;
+    verticalGutter?: Partial<Record<NameDevices$1, string>> | undefined;
+    fullWidth?: Partial<Record<NameDevices$1, boolean>> | undefined;
+    spacing?: Partial<Record<NameDevices$1, number>> | undefined;
+    width?: Partial<Record<NameDevices$1, string>> | undefined;
+    height?: Partial<Record<NameDevices$1, string>> | undefined;
 } | undefined;
 
 declare const useSuspenseFetch: <T>(key: string | any[], promise: () => Promise<T>) => {
@@ -9847,4 +9884,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, 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, 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, getAspectRatioGlobalSize, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, 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, 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, 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$1 as NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, 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, 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, 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, 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, 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.25.26",
+  "version": "1.25.30",
   "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.25.0"
+    "@gem-sdk/styles": "1.25.29"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",