@gem-sdk/core 2.0.0-dev.726 → 2.0.0-dev.737

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

@@ -7,6 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('zustand');
 var BuilderPreviewContext = require('../../contexts/BuilderPreviewContext.js');
+var device = require('../../constants/device.js');
 require('react-transition-group');
 require('@gem-sdk/core');
 require('swr');
@@ -189,12 +190,7 @@ function Spacing(props) {
         updateSpacing
     ]);
     const verifyMarginBottomChanged = (prevValue, newValue)=>{
-        const listDevices = [
-            'desktop',
-            'tablet',
-            'mobile'
-        ];
-        return listDevices.some((device)=>JSON.stringify(prevValue?.[device]?.margin?.bottom) !== JSON.stringify(newValue?.[device]?.margin?.bottom));
+        return device.DEVICES.some((device)=>JSON.stringify(prevValue?.[device]?.margin?.bottom) !== JSON.stringify(newValue?.[device]?.margin?.bottom));
     };
     const onWindowResize = react.useCallback(()=>{
         updateSpacing();

package/dist/cjs/helpers/align.js

@@ -1,13 +1,10 @@
 'use strict';
 
+var device = require('../constants/device.js');
+
 const convertTextAlignToJustify = (align)=>{
-    const devices = [
-        'desktop',
-        'tablet',
-        'mobile'
-    ];
     const result = {};
-    devices.forEach((device)=>{
+    device.DEVICES.forEach((device)=>{
         const deviceType = device === 'desktop' ? '' : `${device}:`;
         result[`${deviceType}gp-justify-start`] = align?.[device] === 'left';
         result[`${deviceType}gp-justify-center`] = align?.[device] === 'center';
@@ -16,12 +13,7 @@ const convertTextAlignToJustify = (align)=>{
     return result;
 };
 const getAlignmentClasses = (align)=>{
-    const breakpoints = [
-        'desktop',
-        'tablet',
-        'mobile'
-    ];
-    return breakpoints.reduce((classes, bp)=>{
+    return device.DEVICES.reduce((classes, bp)=>{
         const prefix = bp === 'desktop' ? '' : `${bp}:`;
         const alignment = align?.[bp];
         if (alignment) {

package/dist/cjs/helpers/background.js

@@ -4,6 +4,7 @@ var constant = require('./constant.js');
 var colors = require('./colors.js');
 var makeStyle = require('./make-style.js');
 var getResonsiveValue = require('./get-resonsive-value.js');
+var device = require('../constants/device.js');
 
 const isEmptyBg = (value)=>{
     return value?.videoHtml5 === undefined && value?.video === undefined && !value?.videoType;
@@ -95,7 +96,7 @@ const getBgImageByDevice = (background, device, options)=>{
 };
 const getStyleBgPosition = (background)=>{
     const bgPosition = {
-        desktop: getBgPositionByDevice(background, 'desktop'),
+        desktop: getBgPositionByDevice(background, 'desktop') || '50% 50%',
         tablet: getBgPositionByDevice(background, 'tablet'),
         mobile: getBgPositionByDevice(background, 'mobile')
     };
@@ -107,7 +108,7 @@ const getBgPositionByDevice = (background, device)=>{
 };
 const getStyleBgSize = (background)=>{
     const bgSize = {
-        desktop: getBgSizeByDevice(background, 'desktop'),
+        desktop: getBgSizeByDevice(background, 'desktop') || 'cover',
         tablet: getBgSizeByDevice(background, 'tablet'),
         mobile: getBgSizeByDevice(background, 'mobile')
     };
@@ -118,7 +119,7 @@ const getBgSizeByDevice = (background, device)=>{
 };
 const getStyleBgRepeat = (background)=>{
     const bgRepeat = {
-        desktop: getBgRepeatByDevice(background, 'desktop'),
+        desktop: getBgRepeatByDevice(background, 'desktop') || 'no-repeat',
         tablet: getBgRepeatByDevice(background, 'tablet'),
         mobile: getBgRepeatByDevice(background, 'mobile')
     };
@@ -222,11 +223,7 @@ const getGradientBgrStyleForButton = (backgroundStyle)=>{
 const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage)=>{
     if (!backgroundStyle) return;
     const bgrStyle = {};
-    [
-        'desktop',
-        'tablet',
-        'mobile'
-    ].forEach((device)=>{
+    device.DEVICES.forEach((device)=>{
         if (backgroundStyle[device]?.color?.includes(GRADIENT_BGR_KEY)) {
             const bgImage = `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`;
             Object.assign(bgrStyle, {
@@ -246,11 +243,7 @@ const getBgByDevice = (data)=>{
         mobile: getResonsiveValue.getResponsiveValueByScreen(backgroundImage, 'mobile')
     };
     const bgrStyle = {};
-    [
-        'desktop',
-        'tablet',
-        'mobile'
-    ].forEach((device)=>{
+    device.DEVICES.forEach((device)=>{
         const colorValue = getResonsiveValue.getResponsiveValueByScreen(backgroundColor, device);
         const imageValue = backgroundImage ? getBgImageByDevice(mapBgImage, device) : undefined;
         if (colorValue?.includes(GRADIENT_BGR_KEY)) {
@@ -269,7 +262,12 @@ const getBgByDevice = (data)=>{
             });
         }
     });
-    return bgrStyle;
+    return {
+        ...bgrStyle,
+        ...getStyleBgPosition(backgroundImage),
+        ...getStyleBgSize(backgroundImage),
+        ...getStyleBgRepeat(backgroundImage)
+    };
 };
 
 exports.GRADIENT_BGR_KEY = GRADIENT_BGR_KEY;

package/dist/cjs/helpers/carousel.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var getResonsiveValue = require('./get-resonsive-value.js');
+var device = require('../constants/device.js');
 
 const getCarouselContainerHeight = (dotStyle)=>{
     const getVal = (dotStyle)=>{
@@ -25,18 +26,13 @@ const makeContainerWidthOrHeight = (setting)=>{
 };
 const makeDotGapToCarouselStyle = (dotStyle, dotGapToCarousel, vertical)=>{
     let result = {};
-    const devices = [
-        'desktop',
-        'tablet',
-        'mobile'
-    ];
     const getStyleName = (dotStyle, vertical)=>{
         if (dotStyle === 'outside') {
             return vertical ? 'ml' : 'mt';
         }
         return vertical ? 'right' : 'bottom';
     };
-    devices.map((device)=>{
+    device.DEVICES.map((device)=>{
         const gapToCarousel = getResonsiveValue.getResponsiveValueByScreen(dotGapToCarousel, device, 0);
         result = {
             ...result,

package/dist/cjs/helpers/compose-advance-style.js

@@ -6,6 +6,7 @@ var constant = require('./constant.js');
 var makeStyle = require('./make-style.js');
 var radius = require('./radius.js');
 var shadow = require('./shadow.js');
+var device = require('../constants/device.js');
 
 const composeSpacing = ({ source, spacing, type, suffix = '' })=>{
     const { top, left, bottom, right } = spacing;
@@ -84,11 +85,6 @@ const composeAdvanceStyleForPostPurchase = (data, tag)=>{
 function composeAdvanceStyle(data, tag, pageType) {
     if (!data) return {};
     const styles = {};
-    const devices = [
-        'desktop',
-        'tablet',
-        'mobile'
-    ];
     const states = [
         'hover',
         'normal'
@@ -101,7 +97,7 @@ function composeAdvanceStyle(data, tag, pageType) {
         if (typeof value === 'object') {
             if (Array.isArray(value)) return;
             Object.keys(value).forEach((composeAttr)=>{
-                if (devices.includes(composeAttr)) {
+                if (device.DEVICES.includes(composeAttr)) {
                     const deviceValue = value[composeAttr];
                     if (deviceValue !== undefined) {
                         // Responsive border with state

package/dist/cjs/helpers/layout.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var device = require('../constants/device.js');
 var constant = require('./constant.js');
 var getResonsiveValue = require('./get-resonsive-value.js');
 
@@ -53,12 +54,7 @@ const convertOldLayout = (layout)=>{
     };
 };
 const getLayoutClasses = (layout)=>{
-    const breakpoints = [
-        'desktop',
-        'tablet',
-        'mobile'
-    ];
-    return breakpoints.reduce((classes, bp)=>{
+    return device.DEVICES.reduce((classes, bp)=>{
         const prefix = bp === 'desktop' ? '' : `${bp}:`;
         const layoutValue = layout?.[bp];
         if (layoutValue) {

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

@@ -3,6 +3,7 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useRef, useState, useCallback, useEffect } from 'react';
 import 'zustand';
 import { useBuilderPreviewStore } from '../../contexts/BuilderPreviewContext.js';
+import { DEVICES } from '../../constants/device.js';
 import 'react-transition-group';
 import '@gem-sdk/core';
 import 'swr';
@@ -185,12 +186,7 @@ function Spacing(props) {
         updateSpacing
     ]);
     const verifyMarginBottomChanged = (prevValue, newValue)=>{
-        const listDevices = [
-            'desktop',
-            'tablet',
-            'mobile'
-        ];
-        return listDevices.some((device)=>JSON.stringify(prevValue?.[device]?.margin?.bottom) !== JSON.stringify(newValue?.[device]?.margin?.bottom));
+        return DEVICES.some((device)=>JSON.stringify(prevValue?.[device]?.margin?.bottom) !== JSON.stringify(newValue?.[device]?.margin?.bottom));
     };
     const onWindowResize = useCallback(()=>{
         updateSpacing();

package/dist/esm/helpers/align.js

@@ -1,11 +1,8 @@
+import { DEVICES } from '../constants/device.js';
+
 const convertTextAlignToJustify = (align)=>{
-    const devices = [
-        'desktop',
-        'tablet',
-        'mobile'
-    ];
     const result = {};
-    devices.forEach((device)=>{
+    DEVICES.forEach((device)=>{
         const deviceType = device === 'desktop' ? '' : `${device}:`;
         result[`${deviceType}gp-justify-start`] = align?.[device] === 'left';
         result[`${deviceType}gp-justify-center`] = align?.[device] === 'center';
@@ -14,12 +11,7 @@ const convertTextAlignToJustify = (align)=>{
     return result;
 };
 const getAlignmentClasses = (align)=>{
-    const breakpoints = [
-        'desktop',
-        'tablet',
-        'mobile'
-    ];
-    return breakpoints.reduce((classes, bp)=>{
+    return DEVICES.reduce((classes, bp)=>{
         const prefix = bp === 'desktop' ? '' : `${bp}:`;
         const alignment = align?.[bp];
         if (alignment) {

package/dist/esm/helpers/background.js

@@ -2,6 +2,7 @@ import { devicesMapping } from './constant.js';
 import { isColor, getSingleColorVariable } from './colors.js';
 import { makeStyleResponsive } from './make-style.js';
 import { getResponsiveValueByScreen } from './get-resonsive-value.js';
+import { DEVICES } from '../constants/device.js';
 
 const isEmptyBg = (value)=>{
     return value?.videoHtml5 === undefined && value?.video === undefined && !value?.videoType;
@@ -93,7 +94,7 @@ const getBgImageByDevice = (background, device, options)=>{
 };
 const getStyleBgPosition = (background)=>{
     const bgPosition = {
-        desktop: getBgPositionByDevice(background, 'desktop'),
+        desktop: getBgPositionByDevice(background, 'desktop') || '50% 50%',
         tablet: getBgPositionByDevice(background, 'tablet'),
         mobile: getBgPositionByDevice(background, 'mobile')
     };
@@ -105,7 +106,7 @@ const getBgPositionByDevice = (background, device)=>{
 };
 const getStyleBgSize = (background)=>{
     const bgSize = {
-        desktop: getBgSizeByDevice(background, 'desktop'),
+        desktop: getBgSizeByDevice(background, 'desktop') || 'cover',
         tablet: getBgSizeByDevice(background, 'tablet'),
         mobile: getBgSizeByDevice(background, 'mobile')
     };
@@ -116,7 +117,7 @@ const getBgSizeByDevice = (background, device)=>{
 };
 const getStyleBgRepeat = (background)=>{
     const bgRepeat = {
-        desktop: getBgRepeatByDevice(background, 'desktop'),
+        desktop: getBgRepeatByDevice(background, 'desktop') || 'no-repeat',
         tablet: getBgRepeatByDevice(background, 'tablet'),
         mobile: getBgRepeatByDevice(background, 'mobile')
     };
@@ -220,11 +221,7 @@ const getGradientBgrStyleForButton = (backgroundStyle)=>{
 const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage)=>{
     if (!backgroundStyle) return;
     const bgrStyle = {};
-    [
-        'desktop',
-        'tablet',
-        'mobile'
-    ].forEach((device)=>{
+    DEVICES.forEach((device)=>{
         if (backgroundStyle[device]?.color?.includes(GRADIENT_BGR_KEY)) {
             const bgImage = `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`;
             Object.assign(bgrStyle, {
@@ -244,11 +241,7 @@ const getBgByDevice = (data)=>{
         mobile: getResponsiveValueByScreen(backgroundImage, 'mobile')
     };
     const bgrStyle = {};
-    [
-        'desktop',
-        'tablet',
-        'mobile'
-    ].forEach((device)=>{
+    DEVICES.forEach((device)=>{
         const colorValue = getResponsiveValueByScreen(backgroundColor, device);
         const imageValue = backgroundImage ? getBgImageByDevice(mapBgImage, device) : undefined;
         if (colorValue?.includes(GRADIENT_BGR_KEY)) {
@@ -267,7 +260,12 @@ const getBgByDevice = (data)=>{
             });
         }
     });
-    return bgrStyle;
+    return {
+        ...bgrStyle,
+        ...getStyleBgPosition(backgroundImage),
+        ...getStyleBgSize(backgroundImage),
+        ...getStyleBgRepeat(backgroundImage)
+    };
 };
 
 export { GRADIENT_BGR_KEY, composeBackgroundCss, getBgByDevice, getBgImageByDevice, getBgVideoByDevice, getColor, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getStyleBackgroundByDevice, getStyleBgColor, makeFixedBgAttachment };

package/dist/esm/helpers/carousel.js

@@ -1,4 +1,5 @@
 import { getResponsiveValueByScreen } from './get-resonsive-value.js';
+import { DEVICES } from '../constants/device.js';
 
 const getCarouselContainerHeight = (dotStyle)=>{
     const getVal = (dotStyle)=>{
@@ -23,18 +24,13 @@ const makeContainerWidthOrHeight = (setting)=>{
 };
 const makeDotGapToCarouselStyle = (dotStyle, dotGapToCarousel, vertical)=>{
     let result = {};
-    const devices = [
-        'desktop',
-        'tablet',
-        'mobile'
-    ];
     const getStyleName = (dotStyle, vertical)=>{
         if (dotStyle === 'outside') {
             return vertical ? 'ml' : 'mt';
         }
         return vertical ? 'right' : 'bottom';
     };
-    devices.map((device)=>{
+    DEVICES.map((device)=>{
         const gapToCarousel = getResponsiveValueByScreen(dotGapToCarousel, device, 0);
         result = {
             ...result,

package/dist/esm/helpers/compose-advance-style.js

@@ -4,6 +4,7 @@ import { layoutComponent } from './constant.js';
 import { makeStyleKey } from './make-style.js';
 import { composeRadius, getCornerCSSFromGlobal } from './radius.js';
 import { getResponsiveStyleShadow, getStyleShadowState, getStyleShadow } from './shadow.js';
+import { DEVICES } from '../constants/device.js';
 
 const composeSpacing = ({ source, spacing, type, suffix = '' })=>{
     const { top, left, bottom, right } = spacing;
@@ -82,11 +83,6 @@ const composeAdvanceStyleForPostPurchase = (data, tag)=>{
 function composeAdvanceStyle(data, tag, pageType) {
     if (!data) return {};
     const styles = {};
-    const devices = [
-        'desktop',
-        'tablet',
-        'mobile'
-    ];
     const states = [
         'hover',
         'normal'
@@ -99,7 +95,7 @@ function composeAdvanceStyle(data, tag, pageType) {
         if (typeof value === 'object') {
             if (Array.isArray(value)) return;
             Object.keys(value).forEach((composeAttr)=>{
-                if (devices.includes(composeAttr)) {
+                if (DEVICES.includes(composeAttr)) {
                     const deviceValue = value[composeAttr];
                     if (deviceValue !== undefined) {
                         // Responsive border with state

package/dist/esm/helpers/layout.js

@@ -1,3 +1,4 @@
+import { DEVICES } from '../constants/device.js';
 import { devicesMapping } from './constant.js';
 import { getResponsiveValueByScreen, getResponsiveValue } from './get-resonsive-value.js';
 
@@ -51,12 +52,7 @@ const convertOldLayout = (layout)=>{
     };
 };
 const getLayoutClasses = (layout)=>{
-    const breakpoints = [
-        'desktop',
-        'tablet',
-        'mobile'
-    ];
-    return breakpoints.reduce((classes, bp)=>{
+    return DEVICES.reduce((classes, bp)=>{
         const prefix = bp === 'desktop' ? '' : `${bp}:`;
         const layoutValue = layout?.[bp];
         if (layoutValue) {

package/dist/types/index.d.ts

@@ -34201,8 +34201,8 @@ type BasePropsWrap<S = unknown, Style = unknown, A = Record<string, any>> = Base
     builderAttrs?: Record<string, any>;
     style?: React.CSSProperties;
 };
-type NameDevices$1 = 'desktop' | 'tablet' | 'mobile';
-type ObjectDevices<T> = Partial<Record<NameDevices$1, T>>;
+type NameDevices = 'desktop' | 'tablet' | 'mobile';
+type ObjectDevices<T> = Partial<Record<NameDevices, T>>;
 type StateType = 'normal' | 'hover' | 'focus' | 'active' | 'price' | 'compareAtPrice';
 type StateProp<T> = Partial<Record<StateType, T>>;
 type ResponsiveStateProp<T> = ObjectDevices<StateProp<T>>;
@@ -34251,7 +34251,6 @@ type AirProductReview = 'review_box' | 'star_rating' | 'review_carousel';
 type FastBundleWidgetType = 'fbt_position' | 'product_bundles' | 'product_bundle_with_ids' | 'volume_position';
 type DotStyle = 'none' | 'inside' | 'outside';
 
-type NameDevices = 'desktop' | 'tablet' | 'mobile';
 type TypographyV2Family = string | {
     value: string;
     type: TypographyV2FontFamilyType;
@@ -35404,7 +35403,7 @@ declare const composeBorderCss: (borderV?: Border | undefined, options?: {
 }) => string;
 declare const composeBorderResponsive: (borderValue?: ObjectDevices<Border>) => React.CSSProperties;
 
-declare const getCarouselContainerHeight: <T>(dotStyle?: Partial<Record<NameDevices$1, T>> | undefined) => {
+declare const getCarouselContainerHeight: <T>(dotStyle?: Partial<Record<NameDevices, T>> | undefined) => {
     desktop: string | undefined;
     tablet: string | undefined;
     mobile: string | undefined;
@@ -35415,7 +35414,7 @@ declare const makeContainerWidthOrHeight: <T extends ShortHandProperty>(setting:
 }) => {
     [x: string]: string | undefined;
 };
-declare const makeDotGapToCarouselStyle: <T extends ShortHandProperty, K>(dotStyle?: ObjectDevices<DotStyle>, dotGapToCarousel?: Partial<Record<NameDevices$1, K>> | undefined, vertical?: ObjectDevices<boolean>) => {
+declare const makeDotGapToCarouselStyle: <T extends ShortHandProperty, K>(dotStyle?: ObjectDevices<DotStyle>, dotGapToCarousel?: Partial<Record<NameDevices, K>> | undefined, vertical?: ObjectDevices<boolean>) => {
     [x: string]: string | undefined;
 };
 
@@ -35437,9 +35436,9 @@ declare const filterToolbarPreview: (children: React.ReactNode, keep?: boolean)
  */
 declare const flattenConnection: <T>(connection?: Maybe$1<GraphQLConnection<T>>) => Maybe$1<T>[];
 
-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 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 isColumnDirectionExist: (layout: ObjectDevices<ObjectLayoutValue>, breakpoint: keyof ObjectDevices<ObjectLayoutValue>) => boolean;
 
 declare function getShortName(name: string): string;
@@ -35545,9 +35544,9 @@ 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$1, Partial<Record<StateType, K>>>> | undefined) => {};
-declare const makeStyleResponsive: <T extends ShortHandProperty, K>(name: T, value?: Partial<Record<NameDevices$1, K>> | undefined, unit?: string) => Record<ResponsiveKey<T>, K>;
-declare const makeStyleResponsiveByScreen: <T extends ShortHandProperty, K>(name: T, value?: Partial<Record<NameDevices$1, K>> | undefined, unit?: string) => Record<ResponsiveKey<T>, K>;
+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, unit?: string) => Record<ResponsiveKey<T>, K>;
+declare const makeStyleResponsiveByScreen: <T extends ShortHandProperty, K>(name: T, value?: Partial<Record<NameDevices, K>> | undefined, unit?: string) => Record<ResponsiveKey<T>, K>;
 declare const makeWidth: (widthValue?: ObjectDevices<string | number>, fullWidthValue?: ObjectDevices<boolean>) => ObjectDevices<string | number>;
 declare const makeGlobalSizeWidthResponsive: (globalSize?: ObjectDevices<SizeSettingGlobal>) => {
     '--w': string | undefined;
@@ -35562,8 +35561,8 @@ declare const makeGlobalSizeHeightResponsive: (globalSize?: ObjectDevices<SizeSe
 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>;
-declare const makeStyleResponsiveWidth: <T extends ShortHandProperty, K>(value?: Partial<Record<NameDevices$1, K>> | undefined, unit?: string) => Record<ResponsiveKey<T>, K>;
-declare const makeStyleResponsiveWidthWithoutAuto: <T extends ShortHandProperty, K>(value?: Partial<Record<NameDevices$1, K>> | undefined, unit?: string) => Record<ResponsiveKey<T>, K>;
+declare const makeStyleResponsiveWidth: <T extends ShortHandProperty, K>(value?: Partial<Record<NameDevices, K>> | undefined, unit?: string) => Record<ResponsiveKey<T>, K>;
+declare const makeStyleResponsiveWidthWithoutAuto: <T extends ShortHandProperty, K>(value?: Partial<Record<NameDevices, K>> | undefined, unit?: string) => Record<ResponsiveKey<T>, K>;
 
 type ResponsiveConfig<T> = {
     desktop: {
@@ -36308,7 +36307,7 @@ type SettingUIControl = {
     controlChangeTrigger?: ControlTrigger;
     tabs?: SettingUITab[];
     info?: LabelWithLang;
-    compoDefaultValue?: any | Record<NameDevices$1, any>;
+    compoDefaultValue?: any | Record<NameDevices, any>;
 } & SettingUICompo & SettingUIGroup;
 type ControlTriggerAction$1 = {
     controlId: string;
@@ -37648,7 +37647,6 @@ type ComponentPreset = {
     rootOverride?: Record<string, any>;
 };
 
-type Devices = 'desktop' | 'tablet' | 'mobile';
 type Options$1 = {
     liquid?: boolean;
     ignoreBgAttachment?: boolean;
@@ -37656,7 +37654,7 @@ type Options$1 = {
     ignoreBackgroundImageProperties?: boolean;
     ignoreBackgroundColor?: boolean;
 };
-declare const getBgVideoByDevice: (value?: Partial<Record<Devices, Background>>, device?: Devices) => Background | undefined;
+declare const getBgVideoByDevice: (value?: Partial<Record<NameDevices, Background>>, device?: NameDevices) => Background | undefined;
 declare const getStyleBackgroundByDevice: (background?: ObjectDevices<Background>, options?: Options$1) => {
     "--bga"?: string | undefined;
     "--bga-tablet"?: string | undefined;
@@ -37679,7 +37677,7 @@ declare const getStyleBackgroundByDevice: (background?: ObjectDevices<Background
 };
 declare const getStyleBgColor: (background: ObjectDevices<Background>) => Record<ResponsiveKey<"bgc">, string>;
 declare const getColor: (color?: string) => string | undefined;
-declare const getBgImageByDevice: (background: ObjectDevices<Background>, device: Devices, options?: Options$1) => string | undefined;
+declare const getBgImageByDevice: (background: ObjectDevices<Background>, device: NameDevices, options?: Options$1) => string | undefined;
 declare const composeBackgroundCss: (backgroundColor?: ColorValueType) => string;
 declare const makeFixedBgAttachment: (background?: ObjectDevices<Background>) => {
     wrapper: {
@@ -37691,11 +37689,21 @@ declare const makeFixedBgAttachment: (background?: ObjectDevices<Background>) =>
 } | undefined;
 declare const GRADIENT_BGR_KEY = "linear-gradient";
 declare const getGradientBgrStyleForButton: (backgroundStyle: Partial<Record<StateType, ColorValueType>> | undefined) => Record<string, string> | undefined;
-declare const getGradientBgrStyleByDevice: (backgroundStyle: Partial<Record<Devices, Background>> | undefined, ignoreBackgroundImage?: Record<Devices, boolean>) => {} | undefined;
+declare const getGradientBgrStyleByDevice: (backgroundStyle: Partial<Record<NameDevices, Background>> | undefined, ignoreBackgroundImage?: Record<NameDevices, boolean>) => {} | undefined;
 declare const getBgByDevice: (data: {
-    backgroundColor: Partial<Record<Devices, string>> | undefined;
-    backgroundImage: Partial<Record<Devices, BackgroundImageValue>> | undefined;
-}) => {} | undefined;
+    backgroundColor: Partial<Record<NameDevices, string>> | undefined;
+    backgroundImage: Partial<Record<NameDevices, BackgroundImageValue>> | undefined;
+}) => {
+    "--bgr": string;
+    "--bgr-tablet": string;
+    "--bgr-mobile": string;
+    "--bgs": string;
+    "--bgs-tablet": string;
+    "--bgs-mobile": string;
+    "--bgp": string;
+    "--bgp-tablet": string;
+    "--bgp-mobile": string;
+} | undefined;
 
 type Options = {
     liquid?: boolean;
@@ -37708,7 +37716,7 @@ declare const getStyleBgImageSource: (backgroundImage: StateProp<BackgroundImage
 declare const getBgImageSourceByDevice: (backgroundImage: StateProp<BackgroundImageValue>, state: StateType, options?: Options) => string;
 declare const composeBackgroundImageCss: (config?: ObjectDevices<StateProp<BackgroundImageValue>> | StateProp<BackgroundImageValue>, options?: {
     useLiquid?: boolean;
-    device?: 'desktop' | 'tablet' | 'mobile';
+    device?: NameDevices;
     state?: 'normal' | 'hover';
     responsive?: boolean;
 }) => string | undefined;
@@ -37733,7 +37741,7 @@ declare const composeTextColorCss: (color?: ColorValueType) => string;
 type AdvanceValue = Primitive | ObjectDevices<Primitive>;
 declare const composeAdvanceStyleForPostPurchase: (data?: Record<string, AdvanceValue>, tag?: string) => React.CSSProperties;
 declare function composeAdvanceStyle(data?: Record<string, AdvanceValue>, tag?: string, pageType?: PublishedThemePageType$1): React.CSSProperties;
-declare const convertBoxShadowV1ToV2: (hasBoxShadow: Partial<Record<StateType, boolean>>, value: Partial<Record<NameDevices$1, Primitive>>, tag: string | undefined) => Partial<Record<StateType, boolean>>;
+declare const convertBoxShadowV1ToV2: (hasBoxShadow: Partial<Record<StateType, boolean>>, value: Partial<Record<NameDevices, Primitive>>, tag: string | undefined) => Partial<Record<StateType, boolean>>;
 declare const splitStyle: (keys: ShortHandProperty[], style?: React.CSSProperties) => React.CSSProperties[];
 declare const filterAttrInStyle: (style?: React.CSSProperties, filterKeys?: string[]) => {
     [x: string]: any;
@@ -42616,8 +42624,8 @@ declare const composePositionLineHeight: ({ compose, lineHeight, device, positio
     compose: PostionType;
     lineHeight: string;
     device: NameDevices;
-    position?: Partial<Record<NameDevices$1, "center" | "baseline">> | undefined;
-    iconWidth?: Partial<Record<NameDevices$1, number>> | undefined;
+    position?: Partial<Record<NameDevices, "center" | "baseline">> | undefined;
+    iconWidth?: Partial<Record<NameDevices, number>> | undefined;
 }) => void;
 
 declare function isDefined<T>(argument: T | undefined): argument is T;
@@ -42626,10 +42634,10 @@ declare const gridToArrayRegex: RegExp;
 declare const optionLayoutStyle: (column?: ObjectDevices<string | number>) => React.CSSProperties;
 declare const composeGridLayout: (layout?: ObjectDevices<ObjectLayoutValue>) => React.CSSProperties;
 declare const convertOldLayout: (layout?: ObjectDevices<string>) => ObjectDevices<ObjectLayoutValue>;
-declare const getLayoutClasses: (layout: Partial<Record<NameDevices$1, string>> | undefined) => Record<string, boolean>;
+declare const getLayoutClasses: (layout: Partial<Record<NameDevices, string>> | undefined) => Record<string, boolean>;
 
-declare const convertTextAlignToJustify: (align: Partial<Record<NameDevices$1, AlignProp>> | undefined) => Record<string, boolean>;
-declare const getAlignmentClasses: (align: Partial<Record<NameDevices$1, AlignProp>> | undefined) => Record<string, boolean>;
+declare const convertTextAlignToJustify: (align: Partial<Record<NameDevices, AlignProp>> | undefined) => Record<string, boolean>;
+declare const getAlignmentClasses: (align: Partial<Record<NameDevices, AlignProp>> | undefined) => Record<string, boolean>;
 
 declare function filterTruthyStyles<T extends Record<string, any>>(styles: T): Partial<T>;
 
@@ -42678,8 +42686,8 @@ declare const generateCollectionQueryKey: (args: FetchCollectionArgs) => ['query
 declare const generateProductsQueryKey: (args: FetchProductsParams) => ['query/products', FetchProductsParams];
 
 declare const getCornerCSSFromGlobal: (corner?: CornerRadius) => 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 getRadiusCSSFromGlobal: (state: StateType, key?: RoundedSize, device?: NameDevices) => React.CSSProperties;
+declare const getCustomRadius: (state: StateType, radius?: CornerRadius, device?: NameDevices) => React.CSSProperties;
 declare const composeRadius: (value?: StateProp<CornerRadius> | ResponsiveStateProp<CornerRadius>) => React.CSSProperties;
 declare const composeRadiusResponsive: (radiusValue?: ObjectDevices<CornerRadius>) => React.CSSProperties;
 declare const getRadiusStyleActiveState: (radiusValue?: StateProp<CornerRadius>) => React.CSSProperties;
@@ -45977,14 +45985,14 @@ declare const getGlobalSizeGap: (globalSize?: ObjectDevices<SizeSettingGlobal>)
     '--gg-tablet': string | undefined;
     '--gg-mobile': string | undefined;
 };
-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>, defaultAuto?: boolean, defaultFull?: boolean) => Partial<Record<NameDevices$1, string>>;
+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>, defaultAuto?: boolean, defaultFull?: boolean) => Partial<Record<NameDevices, string>>;
 declare const getAspectRatioGlobalSize: (shape?: ObjectDevices<SizeSettingGlobal>) => ObjectDevices<string>;
 declare const getPaddingGlobalSize: (globalSize?: ObjectDevices<SizeSettingGlobal>) => React.CSSProperties;
-declare const getValueByDevice: <T>(value: any, device: NameDevices$1) => T;
-declare const getPaddingStyleByDevice: (value?: PaddingType, device?: NameDevices$1) => {
+declare const getValueByDevice: <T>(value: any, device: NameDevices) => T;
+declare const getPaddingStyleByDevice: (value?: PaddingType, device?: NameDevices) => {
     [x: string]: string | undefined;
 };
 declare const getResponsiveStylePadding: (value?: ObjectDevices<PaddingType>) => {
@@ -47718,7 +47726,7 @@ declare const useProductsQuery: (ids?: string[], options?: SWRConfiguration<Prod
 }) => swr__internal.SWRResponse<ProductsQueryResponse, any, Partial<swr__internal.PublicConfiguration<ProductsQueryResponse, any, (arg: ["query/products", FetchProductsParams]) => swr__internal.FetcherResponse<ProductsQueryResponse>>> | undefined>;
 declare const useProductsQueryAll: (variable?: VariableRelatedStyles | undefined, options?: SWRConfiguration<ProductsQueryResponse>) => swr__internal.SWRResponse<ProductsQueryResponse, any, Partial<swr__internal.PublicConfiguration<ProductsQueryResponse, any, (arg: ["query/products", any]) => swr__internal.FetcherResponse<ProductsQueryResponse>>> | undefined>;
 
-declare const useCurrentDevice: () => NameDevices$1;
+declare const useCurrentDevice: () => NameDevices;
 
 declare const useLazyVideo: () => void;
 
@@ -47876,24 +47884,24 @@ declare const useShopifyLink: ({ productId, articleId }: ShopifyLinkParam) => {
 declare const useProductList: () => CollectionProductSelectFragment | undefined;
 declare const useProductListProducts: () => (ProductQuickSelectFragment | undefined)[] | undefined;
 declare const useProductListSettings: () => {
-    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;
+    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;
     layout?: "slider" | "grid" | undefined;
-    dot?: Partial<Record<NameDevices$1, boolean>> | undefined;
-    dotStyle?: Partial<Record<NameDevices$1, "none" | "inside" | "outside">> | undefined;
-    arrow?: Partial<Record<NameDevices$1, boolean>> | undefined;
-    controlOverContent?: Partial<Record<NameDevices$1, boolean>> | undefined;
+    dot?: Partial<Record<NameDevices, boolean>> | undefined;
+    dotStyle?: Partial<Record<NameDevices, "none" | "inside" | "outside">> | undefined;
+    arrow?: Partial<Record<NameDevices, boolean>> | undefined;
+    controlOverContent?: Partial<Record<NameDevices, boolean>> | undefined;
     speed?: number | undefined;
 } | undefined;
 declare const useProductListStyles: () => {
-    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;
+    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;
 } | undefined;
 
 declare const useSuspenseFetch: <T>(key: string | any[], promise: () => Promise<T>) => {
@@ -47958,6 +47966,6 @@ declare const useInteraction: () => {
     interactionListenerLoaded: (callback: () => void) => void;
 };
 
-declare const DEVICES: NameDevices$1[];
+declare const DEVICES: NameDevices[];
 
-export { AddOn, AddonProvider, AddonProviderProps, AdvancedType, AirProductReview, AliReviewsWidgetType, AlignItemProp, AlignProp, AnimationBaseSetting, AnimationConfig, AnimationDirectionType, AnimationEasingType, AnimationFadeSettingType, AnimationSetting, AnimationSettingType, AnimationShakeSettingType, AnimationSlideSettingType, AnimationTrigger, AnimationTriggerType, AnimationType, AnimationZoomDirectionType, AnimationZoomSettingType, appAPI as AppAPIType, ArticleListProvider, ArticleListProviderProps, ArticleProvider, ArticleProviderProps, ArticlesDocument, ArticlesQueryResponse, ArticlesQueryVariables, Background, BackgroundImageValue, BackgroundMedia, BackgroundVideoValue, BaseProps, BasePropsWrap, BlockEntity, BlogsDocument, BlogsQueryResponse, BlogsQueryVariables, BogosWidgetType, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CSSStateKey, 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, DEVICES, DeepPartial, DotStyle, Dropdown, DynamicCollection, DynamicProduct, ExtractState, FastBundleWidgetType, FeraReviewsV3WidgetType, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GRADIENT_BGR_KEY, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, GrowaveWidgetTypeV1, GrowaveWidgetTypeV2, HSLAColorType, HSLColorType, HexColorType, I18nProvider, I18nProviderProps, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, Interaction, InteractionCondition, InteractionElement, InteractionTarget, InteractionTargetEvent, InteractionTargetEventObject, InteractionTriggerEvent, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsAdvancedWidgetType, LaiProductReviewsWidgetType, LibrarySaleFunnelDocument, LibrarySaleFunnelQueryResponse, LibrarySaleFunnelQueryVariables, LibraryTemplateDocument, LibraryTemplateQueryResponse, LibraryTemplateQueryVariables, LooxReviewsWidgetType, LooxReviewsWidgetTypeV2, MediaSelectFragment, ModalProvider, ModalProviderProps, NameDevices$1 as NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OnlyOne, OpinewDesignWidgetType, OpinewWidgetType, Option$4 as Option, OptionNormalStyle, OptionSpecialStyle, Options$1 as Options, PaddingType, PageContext, PageProvider, PageProviderProps, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PostPurchaseTypo, PreOrderNowWodWidgetType, PreviewThemePageDocument, PreviewThemePageQueryResponse, PreviewThemePageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductOffer, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublicStoreFrontData, PublishedShopMetasDocument, PublishedShopMetasQueryResponse, PublishedShopMetasQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RawChild, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveKey, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SaleFunnelDiscount$1 as SaleFunnelDiscount, SaleFunnelDiscountEdge$1 as SaleFunnelDiscountEdge, SaleFunnelDiscountObjectType$1 as SaleFunnelDiscountObjectType, SaleFunnelDiscountType$1 as SaleFunnelDiscountType, SaleFunnelDiscountValueType$1 as SaleFunnelDiscountValueType, SaleFunnelDiscountsDocument, SaleFunnelDiscountsQueryResponse, SaleFunnelDiscountsQueryVariables, SaleFunnelOfferDocument, SaleFunnelOfferQueryResponse, SaleFunnelOfferQueryVariables, Scalars$1 as Scalars, ScaleByDirection, SectionData, SectionEntity, SectionProvider, SectionProviderProps, Setting, SettingByAnimationType, SettingByAnimationValues, SettingUIControl, SettingUIGroup, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopLibraryPageDocument, ShopLibraryPageQueryResponse, ShopLibraryPageQueryVariables, ShopProvider, ShopProviderProps, ShopShopifyDocument, ShopShopifyQueryResponse, ShopShopifyQueryVariables, shop as ShopType, SizeProps, SizeSetting$1 as SizeSetting, SizeSettingGlobal, SizeType, SpacingType, StampedWidgetType, StampedWidgetTypeV2, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TagShopWidgetType, ThemePageDocument, ThemePageQueryResponse, ThemePageQueryVariables, ThemeSectionStatus$1 as ThemeSectionStatus, TransformProp, TriggerConfig, TrustooWidgetType, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, UltimateSalesBoostWidgetType, ValidateType, VariableRelatedStyles, VariantSelectFragment, VitalsWidgetType, WiserV2WidgetType, WiserWidgetType, WrapRenderChildren, YotpoReviewsWidgetType, addAppBlockId, animations, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, checkInStock, cls, composeAdvanceStyle, composeAdvanceStyleForPostPurchase, composeBackgroundCss, composeBackgroundImageCss, composeBorderCss, composeBorderResponsive, composeClasses, composeCornerCss, composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeGridLayout, composeMemo, composePositionLineHeight, composePostionIconList, composeRadius, composeRadiusResponsive, composeShadow, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTextHoverColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertBoxShadowV1ToV2, convertHTML, convertOldLayout, convertTextAlignToJustify, dataStringify, fetchMedias, fetchVariants, filterAttrInStyle, filterToolbarPreview, filterTruthyStyles, flattenConnection, formatMoney, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getAlignmentClasses, getAppBlocks, getAspectRatioGlobalSize, getBgByDevice, getBgImageByDevice, getBgImageSourceByDevice, getBgVideoByDevice, getBorderRadiusStyle, getBorderStyle, getCarouselContainerHeight, getCollection, getColor, getCornerCSSFromGlobal, getCornerStyle, getCustomRadius, getFlexGrowClassByShapeGlobalSize, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getGlobalSizeGap, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getHeightByShapeGlobalSize, getLayoutClasses, getPaddingGlobalSize, getPaddingStyleByDevice, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveStylePadding, getResponsiveStyleShadow, getResponsiveStyleShadowWithoutState, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleBackgroundImage, getStyleBgColor, getStyleBgImageSource, getStyleShadow, getStyleShadowState, getValueByDevice, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, handleConvertInputBorderColor, handleConvertInputBorderWidth, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeContainerWidthOrHeight, makeDotGapToCarouselStyle, makeFixedBgAttachment, makeGlobalSize, makeGlobalSizeHeightResponsive, makeGlobalSizeIcon, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleResponsiveWidth, makeStyleResponsiveWidthWithoutAuto, makeStyleState, makeStyleWithDefault, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeAttrInStyle, removeNullUndefined, removePaddingYInStyle, removeUndefinedValuesFromObject, sanitizeLiquid, shopifyPriceRounding, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useArticleListStore, useArticleStore, useArticlesQuery, useBlogsQuery, 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, useHasPreSelected, useI18n, useI18nStore, useInitialSwatchesOptions, useInteraction, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageStore, usePageType, usePluginEnable, usePrevious, useProduct, useProductBundleDiscount, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductOfferDiscount, useProductProperties, useProductQuery, useProductShopifyEditLink, useProductStore, useProductsQuery, useProductsQueryAll, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useShopifyLink, useStickyStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useTimezone, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
+export { AddOn, AddonProvider, AddonProviderProps, AdvancedType, AirProductReview, AliReviewsWidgetType, AlignItemProp, AlignProp, AnimationBaseSetting, AnimationConfig, AnimationDirectionType, AnimationEasingType, AnimationFadeSettingType, AnimationSetting, AnimationSettingType, AnimationShakeSettingType, AnimationSlideSettingType, AnimationTrigger, AnimationTriggerType, AnimationType, AnimationZoomDirectionType, AnimationZoomSettingType, appAPI as AppAPIType, ArticleListProvider, ArticleListProviderProps, ArticleProvider, ArticleProviderProps, ArticlesDocument, ArticlesQueryResponse, ArticlesQueryVariables, Background, BackgroundImageValue, BackgroundMedia, BackgroundVideoValue, BaseProps, BasePropsWrap, BlockEntity, BlogsDocument, BlogsQueryResponse, BlogsQueryVariables, BogosWidgetType, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CSSStateKey, 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, DEVICES, DeepPartial, DotStyle, Dropdown, DynamicCollection, DynamicProduct, ExtractState, FastBundleWidgetType, FeraReviewsV3WidgetType, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GRADIENT_BGR_KEY, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, GrowaveWidgetTypeV1, GrowaveWidgetTypeV2, HSLAColorType, HSLColorType, HexColorType, I18nProvider, I18nProviderProps, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, Interaction, InteractionCondition, InteractionElement, InteractionTarget, InteractionTargetEvent, InteractionTargetEventObject, InteractionTriggerEvent, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsAdvancedWidgetType, LaiProductReviewsWidgetType, LibrarySaleFunnelDocument, LibrarySaleFunnelQueryResponse, LibrarySaleFunnelQueryVariables, LibraryTemplateDocument, LibraryTemplateQueryResponse, LibraryTemplateQueryVariables, LooxReviewsWidgetType, LooxReviewsWidgetTypeV2, MediaSelectFragment, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OnlyOne, OpinewDesignWidgetType, OpinewWidgetType, Option$4 as Option, OptionNormalStyle, OptionSpecialStyle, Options$1 as Options, PaddingType, PageContext, PageProvider, PageProviderProps, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PostPurchaseTypo, PreOrderNowWodWidgetType, PreviewThemePageDocument, PreviewThemePageQueryResponse, PreviewThemePageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductOffer, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublicStoreFrontData, PublishedShopMetasDocument, PublishedShopMetasQueryResponse, PublishedShopMetasQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RawChild, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveKey, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SaleFunnelDiscount$1 as SaleFunnelDiscount, SaleFunnelDiscountEdge$1 as SaleFunnelDiscountEdge, SaleFunnelDiscountObjectType$1 as SaleFunnelDiscountObjectType, SaleFunnelDiscountType$1 as SaleFunnelDiscountType, SaleFunnelDiscountValueType$1 as SaleFunnelDiscountValueType, SaleFunnelDiscountsDocument, SaleFunnelDiscountsQueryResponse, SaleFunnelDiscountsQueryVariables, SaleFunnelOfferDocument, SaleFunnelOfferQueryResponse, SaleFunnelOfferQueryVariables, Scalars$1 as Scalars, ScaleByDirection, SectionData, SectionEntity, SectionProvider, SectionProviderProps, Setting, SettingByAnimationType, SettingByAnimationValues, SettingUIControl, SettingUIGroup, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopLibraryPageDocument, ShopLibraryPageQueryResponse, ShopLibraryPageQueryVariables, ShopProvider, ShopProviderProps, ShopShopifyDocument, ShopShopifyQueryResponse, ShopShopifyQueryVariables, shop as ShopType, SizeProps, SizeSetting$1 as SizeSetting, SizeSettingGlobal, SizeType, SpacingType, StampedWidgetType, StampedWidgetTypeV2, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TagShopWidgetType, ThemePageDocument, ThemePageQueryResponse, ThemePageQueryVariables, ThemeSectionStatus$1 as ThemeSectionStatus, TransformProp, TriggerConfig, TrustooWidgetType, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, UltimateSalesBoostWidgetType, ValidateType, VariableRelatedStyles, VariantSelectFragment, VitalsWidgetType, WiserV2WidgetType, WiserWidgetType, WrapRenderChildren, YotpoReviewsWidgetType, addAppBlockId, animations, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, checkInStock, cls, composeAdvanceStyle, composeAdvanceStyleForPostPurchase, composeBackgroundCss, composeBackgroundImageCss, composeBorderCss, composeBorderResponsive, composeClasses, composeCornerCss, composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeGridLayout, composeMemo, composePositionLineHeight, composePostionIconList, composeRadius, composeRadiusResponsive, composeShadow, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTextHoverColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertBoxShadowV1ToV2, convertHTML, convertOldLayout, convertTextAlignToJustify, dataStringify, fetchMedias, fetchVariants, filterAttrInStyle, filterToolbarPreview, filterTruthyStyles, flattenConnection, formatMoney, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getAlignmentClasses, getAppBlocks, getAspectRatioGlobalSize, getBgByDevice, getBgImageByDevice, getBgImageSourceByDevice, getBgVideoByDevice, getBorderRadiusStyle, getBorderStyle, getCarouselContainerHeight, getCollection, getColor, getCornerCSSFromGlobal, getCornerStyle, getCustomRadius, getFlexGrowClassByShapeGlobalSize, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getGlobalSizeGap, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getHeightByShapeGlobalSize, getLayoutClasses, getPaddingGlobalSize, getPaddingStyleByDevice, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveStylePadding, getResponsiveStyleShadow, getResponsiveStyleShadowWithoutState, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleBackgroundImage, getStyleBgColor, getStyleBgImageSource, getStyleShadow, getStyleShadowState, getValueByDevice, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, handleConvertInputBorderColor, handleConvertInputBorderWidth, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeContainerWidthOrHeight, makeDotGapToCarouselStyle, makeFixedBgAttachment, makeGlobalSize, makeGlobalSizeHeightResponsive, makeGlobalSizeIcon, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleResponsiveWidth, makeStyleResponsiveWidthWithoutAuto, makeStyleState, makeStyleWithDefault, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeAttrInStyle, removeNullUndefined, removePaddingYInStyle, removeUndefinedValuesFromObject, sanitizeLiquid, shopifyPriceRounding, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useArticleListStore, useArticleStore, useArticlesQuery, useBlogsQuery, 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, useHasPreSelected, useI18n, useI18nStore, useInitialSwatchesOptions, useInteraction, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageStore, usePageType, usePluginEnable, usePrevious, useProduct, useProductBundleDiscount, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductOfferDiscount, useProductProperties, useProductQuery, useProductShopifyEditLink, useProductStore, useProductsQuery, useProductsQueryAll, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useShopifyLink, useStickyStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useTimezone, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "2.0.0-dev.726",
+  "version": "2.0.0-dev.737",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",