@gem-sdk/core 1.63.17 → 2.0.0-dev.156

package/dist/esm/graphql/queries/blogs.generated.js

@@ -32,6 +32,7 @@ const BlogsDocument = `
               }
               isSample
               platformCreatedAt
+              platformUpdatedAt
               author
               content {
                 excerptHtml

package/dist/esm/graphql/queries/shop-shopify.generated.js

@@ -0,0 +1,9 @@
+const ShopShopifyDocument = `
+    query shopShopify {
+  shopShopify {
+    timezone
+  }
+}
+    `;
+
+export { ShopShopifyDocument };

package/dist/esm/helpers/align.js

@@ -13,5 +13,22 @@ const convertTextAlignToJustify = (align)=>{
     });
     return result;
 };
+const getAlignmentClasses = (align)=>{
+    const breakpoints = [
+        'desktop',
+        'tablet',
+        'mobile'
+    ];
+    return breakpoints.reduce((classes, bp)=>{
+        const prefix = bp === 'desktop' ? '' : `${bp}:`;
+        const alignment = align?.[bp];
+        if (alignment) {
+            classes[`${prefix}gp-justify-start`] = alignment === 'left';
+            classes[`${prefix}gp-justify-center`] = alignment === 'center';
+            classes[`${prefix}gp-justify-end`] = alignment === 'right';
+        }
+        return classes;
+    }, {});
+};
 
-export { convertTextAlignToJustify };
+export { convertTextAlignToJustify, getAlignmentClasses };

package/dist/esm/helpers/background.js

@@ -71,9 +71,12 @@ const getBgImageByDevice = (background, device, options)=>{
             imageByDevice = `{{ "${newBackupFilekey}" | asset_url }}`;
         }
     }
-    if (typeof imageByDevice === 'string') {
+    if (typeof imageByDevice === 'string' && imageByDevice) {
         return `url(${imageByDevice})`;
     }
+    if (imageByDevice !== undefined) {
+        return 'none';
+    }
 };
 const getStyleBgPosition = (background)=>{
     const bgPosition = {
@@ -214,9 +217,10 @@ const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage)=>{
         'mobile'
     ].forEach((device)=>{
         if (backgroundStyle[device]?.color?.includes(GRADIENT_BGR_KEY)) {
+            const bgImage = `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`;
             Object.assign(bgrStyle, {
                 [`--bgc${device !== 'desktop' ? '-' + device : ''}`]: backgroundStyle[device]?.color,
-                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: !ignoreBackgroundImage?.[device] ? `${backgroundStyle[device]?.color}` : `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
+                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: !ignoreBackgroundImage?.[device] ? `${backgroundStyle[device]?.color}` : bgImage
             });
         }
     });

package/dist/esm/helpers/backgroundImage.js

@@ -0,0 +1,179 @@
+import { makeStyleResponsiveState } from './make-style.js';
+
+const getStyleBackgroundImageByDevice = (backgroundImage, options)=>{
+    if (!backgroundImage) {
+        return {};
+    }
+    return {
+        ...!options?.ignoreBackgroundImage ? {
+            ...getStyleBgImageSource(backgroundImage, options)
+        } : {},
+        ...!options?.ignoreBackgroundImageProperties ? {
+            ...getStyleBgImagePosition(backgroundImage),
+            ...getStyleBgImageSize(backgroundImage),
+            ...getStyleBgImageRepeat(backgroundImage)
+        } : {},
+        ...!options?.ignoreBgAttachment ? getStyleBgImageAttachment(backgroundImage) : {}
+    };
+};
+const getStyleBgImageSource = (backgroundImage, options)=>{
+    const bgImage = {
+        desktop: {
+            normal: getBgImageSourceByDevice(backgroundImage, 'desktop', 'normal', options),
+            hover: getBgImageSourceByDevice(backgroundImage, 'desktop', 'hover', options)
+        },
+        tablet: {
+            normal: getBgImageSourceByDevice(backgroundImage, 'tablet', 'normal', options),
+            hover: getBgImageSourceByDevice(backgroundImage, 'tablet', 'hover', options)
+        },
+        mobile: {
+            normal: getBgImageSourceByDevice(backgroundImage, 'mobile', 'normal', options),
+            hover: getBgImageSourceByDevice(backgroundImage, 'mobile', 'hover', options)
+        }
+    };
+    return makeStyleResponsiveState('bgi', bgImage);
+};
+const getBgImageSourceByDevice = (backgroundImage, device, state, options)=>{
+    const stateValue = backgroundImage?.[device]?.[state];
+    if (!stateValue?.image?.src) return;
+    const backupFileKey = stateValue.image.backupFileKey;
+    const storage = stateValue.image.storage;
+    let imageByDevice = stateValue.image.src;
+    let newBackupFilekey = backupFileKey;
+    const shopifyHandleName = imageByDevice?.match(// eslint-disable-next-line
+    /\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];
+    if (backupFileKey && shopifyHandleName && shopifyHandleName !== backupFileKey) {
+        newBackupFilekey = shopifyHandleName;
+    }
+    if (storage === 'FILE_CONTENT') {
+        if (options?.liquid && newBackupFilekey) {
+            imageByDevice = `{{ "${newBackupFilekey.replace('.jpeg', '.jpg')}" | file_url }}`;
+        }
+    }
+    if (storage === 'THEME' || !storage) {
+        if (options?.liquid && newBackupFilekey) {
+            imageByDevice = `{{ "${newBackupFilekey}" | asset_url }}`;
+        }
+    }
+    return imageByDevice ? `url(${imageByDevice})` : 'none';
+};
+const getStyleBgImagePosition = (backgroundImage)=>{
+    const bgPosition = {
+        desktop: {
+            normal: getBgImagePositionByDevice(backgroundImage, 'desktop', 'normal'),
+            hover: getBgImagePositionByDevice(backgroundImage, 'desktop', 'hover')
+        },
+        tablet: {
+            normal: getBgImagePositionByDevice(backgroundImage, 'tablet', 'normal'),
+            hover: getBgImagePositionByDevice(backgroundImage, 'tablet', 'hover')
+        },
+        mobile: {
+            normal: getBgImagePositionByDevice(backgroundImage, 'mobile', 'normal'),
+            hover: getBgImagePositionByDevice(backgroundImage, 'mobile', 'hover')
+        }
+    };
+    return makeStyleResponsiveState('bgp', bgPosition);
+};
+const getBgImagePositionByDevice = (backgroundImage, device, state)=>{
+    const position = backgroundImage?.[device]?.[state]?.position;
+    return position && `${position.x}% ${position.y}%`;
+};
+const getStyleBgImageSize = (backgroundImage)=>{
+    const bgSize = {
+        desktop: {
+            normal: getBgImageSizeByDevice(backgroundImage, 'desktop', 'normal'),
+            hover: getBgImageSizeByDevice(backgroundImage, 'desktop', 'hover')
+        },
+        tablet: {
+            normal: getBgImageSizeByDevice(backgroundImage, 'tablet', 'normal'),
+            hover: getBgImageSizeByDevice(backgroundImage, 'tablet', 'hover')
+        },
+        mobile: {
+            normal: getBgImageSizeByDevice(backgroundImage, 'mobile', 'normal'),
+            hover: getBgImageSizeByDevice(backgroundImage, 'mobile', 'hover')
+        }
+    };
+    return makeStyleResponsiveState('bgs', bgSize);
+};
+const getBgImageSizeByDevice = (backgroundImage, device, state)=>{
+    return backgroundImage?.[device]?.[state]?.size;
+};
+const getStyleBgImageRepeat = (backgroundImage)=>{
+    const bgRepeat = {
+        desktop: {
+            normal: getBgImageRepeatByDevice(backgroundImage, 'desktop', 'normal'),
+            hover: getBgImageRepeatByDevice(backgroundImage, 'desktop', 'hover')
+        },
+        tablet: {
+            normal: getBgImageRepeatByDevice(backgroundImage, 'tablet', 'normal'),
+            hover: getBgImageRepeatByDevice(backgroundImage, 'tablet', 'hover')
+        },
+        mobile: {
+            normal: getBgImageRepeatByDevice(backgroundImage, 'mobile', 'normal'),
+            hover: getBgImageRepeatByDevice(backgroundImage, 'mobile', 'hover')
+        }
+    };
+    return makeStyleResponsiveState('bgr', bgRepeat);
+};
+const getBgImageRepeatByDevice = (backgroundImage, device, state)=>{
+    return backgroundImage?.[device]?.[state]?.repeat;
+};
+const getStyleBgImageAttachment = (backgroundImage)=>{
+    const bgAttachment = {
+        desktop: {
+            normal: getBgImageAttachmentByDevice(backgroundImage, 'desktop', 'normal'),
+            hover: getBgImageAttachmentByDevice(backgroundImage, 'desktop', 'hover')
+        },
+        tablet: {
+            normal: getBgImageAttachmentByDevice(backgroundImage, 'tablet', 'normal'),
+            hover: getBgImageAttachmentByDevice(backgroundImage, 'tablet', 'hover')
+        },
+        mobile: {
+            normal: getBgImageAttachmentByDevice(backgroundImage, 'mobile', 'normal'),
+            hover: getBgImageAttachmentByDevice(backgroundImage, 'mobile', 'hover')
+        }
+    };
+    return makeStyleResponsiveState('bga', bgAttachment);
+};
+const getBgImageAttachmentByDevice = (backgroundImage, device, state)=>{
+    return backgroundImage?.[device]?.[state]?.attachment;
+};
+const composeBackgroundImageCss = (config, options = {})=>{
+    if (!config) return undefined;
+    const { device = 'desktop', state = 'normal', useLiquid = false } = options;
+    const styles = [];
+    const bgConfig = config?.[device]?.[state];
+    if (!bgConfig) return '';
+    // Handle background image source
+    if (bgConfig.image?.src) {
+        let imageUrl = bgConfig.image.src;
+        // Handle Shopify liquid transformations if needed
+        if (useLiquid && bgConfig.image.backupFileKey) {
+            if (bgConfig.image.storage === 'FILE_CONTENT') {
+                imageUrl = `{{ "${bgConfig.image.backupFileKey.replace('.jpeg', '.jpg')}" | file_url }}`;
+            } else if (bgConfig.image.storage === 'THEME' || !bgConfig.image.storage) {
+                imageUrl = `{{ "${bgConfig.image.backupFileKey}" | asset_url }}`;
+            }
+        }
+        styles.push(`background-image: url(${imageUrl});`);
+    }
+    // Handle position
+    if (bgConfig.position) {
+        styles.push(`background-position: ${bgConfig.position.x}% ${bgConfig.position.y}%;`);
+    }
+    // Handle size
+    if (bgConfig.size) {
+        styles.push(`background-size: ${bgConfig.size};`);
+    }
+    // Handle repeat
+    if (bgConfig.repeat) {
+        styles.push(`background-repeat: ${bgConfig.repeat};`);
+    }
+    // Handle attachment
+    if (bgConfig.attachment) {
+        styles.push(`background-attachment: ${bgConfig.attachment};`);
+    }
+    return styles.join('\n  ');
+};
+
+export { composeBackgroundImageCss, getBgImageSourceByDevice, getStyleBackgroundImageByDevice, getStyleBgImageSource };

package/dist/esm/helpers/borders.js

@@ -1,5 +1,6 @@
 import { getSingleColorVariable, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStateResponsiveClass, getGlobalColorStateClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateClassDynamicBtn } from './colors.js';
 import { makeStyle, makeStyleResponsiveState, makeStyleState } from './make-style.js';
+import { devicesMapping } from './constant.js';
 
 const getBorderStyle = (value)=>{
     return makeStyle({
@@ -185,5 +186,20 @@ const composeBorderCss = (borderV)=>{
   ${color ? `border-color: ${getSingleColorVariable(color)};` : ''}
   `;
 };
+const composeBorderResponsive = (borderValue)=>{
+    const style = {};
+    Object.assign(style, composeBorderDevice(borderValue?.desktop, 'desktop'));
+    Object.assign(style, composeBorderDevice(borderValue?.tablet, 'tablet'));
+    Object.assign(style, composeBorderDevice(borderValue?.mobile, 'mobile'));
+    return style;
+};
+const composeBorderDevice = (value, device)=>{
+    const suffix = device && device !== 'desktop' ? devicesMapping?.[device] : '';
+    return {
+        [`--b${suffix}`]: value?.border,
+        [`--bc${suffix}`]: getSingleColorVariable(value?.color),
+        [`--bw${suffix}`]: value?.width
+    };
+};
 
-export { composeBorderCss, getBorderRadiusStyle, getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn };
+export { composeBorderCss, composeBorderResponsive, getBorderRadiusStyle, getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn };

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

@@ -110,7 +110,77 @@ function composeAdvanceStyle(data, tag, pageType) {
                             Object.assign(styles, composeRadius(value));
                         }
                         if (attr === 'boxShadow') {
-                            Object.assign(styles, getResponsiveStyleShadow(value, 'box-shadow', hasBoxShadow));
+                            const baseElements = [
+                                'Section',
+                                'Row',
+                                'Text',
+                                'Heading',
+                                'Image',
+                                'Button',
+                                'HeroBanner',
+                                'ImageComparison',
+                                'Countdown',
+                                'Video'
+                            ];
+                            const productElements = [
+                                'ProductTitle',
+                                'ProductDescription',
+                                'ProductPrice',
+                                'ProductVendor',
+                                'Product',
+                                'ProductSku',
+                                'StockCounter',
+                                'Sticky',
+                                'ProductBadge',
+                                'ProductViewMore',
+                                'ProductButton',
+                                'DynamicCheckout'
+                            ];
+                            const boostElements = [
+                                'Icon',
+                                'IconListHoz',
+                                'Line',
+                                'IconList',
+                                'IconListV2',
+                                'Tabs',
+                                'Accordion',
+                                'Marquee',
+                                'Breadcrumb',
+                                'EstimateDate'
+                            ];
+                            const formElements = [
+                                'Newsletter',
+                                'ContactForm',
+                                'TextField',
+                                'FormTextarea',
+                                'FormEmail',
+                                'FormDropdown',
+                                'FormCheckbox',
+                                'SubmitButton'
+                            ];
+                            const collectionElements = [
+                                'CollectionTitle',
+                                'CollectionDescription',
+                                'CollectionBanner',
+                                'CollectionToolbar',
+                                'CollectionPaginator'
+                            ];
+                            const listElementShadowV2 = [
+                                ...baseElements,
+                                ...productElements,
+                                ...boostElements,
+                                ...formElements,
+                                ...collectionElements
+                            ];
+                            let hasBoxShadowV2 = hasBoxShadow;
+                            if (listElementShadowV2.includes(tag || '')) {
+                                hasBoxShadowV2 = {
+                                    desktop: value.desktop ?? {},
+                                    tablet: value.tablet ?? value.desktop ?? {},
+                                    mobile: value.mobile ?? value.tablet ?? value.desktop ?? {}
+                                };
+                            }
+                            Object.assign(styles, getResponsiveStyleShadow(value, 'box-shadow', hasBoxShadowV2 ?? hasBoxShadow));
                         }
                         const styleValue = getAttrValue(attr, deviceValue, tag);
                         if (composeAttr === 'desktop') {

package/dist/esm/helpers/filter-toolbar-preview.js

@@ -1,3 +1,4 @@
+'use client';
 import { Children } from 'react';
 import ComponentToolbarPreview from '../components/ComponentToolbarPreview.js';
 

package/dist/esm/helpers/interaction/index.js

@@ -1,18 +1,19 @@
+'use client';
 import { useRef, useMemo, useCallback } from 'react';
 import 'react/jsx-runtime';
 import 'zustand';
 import { usePageStore } from '../../contexts/PageContext.js';
-import 'react-transition-group';
-import '@gem-sdk/core';
 import 'swr';
-import 'swr/infinite';
-import 'classnames';
-import 'dayjs';
-import '../convert.js';
 import '@gem-sdk/adapter-shopify';
 import 'swr/mutation';
+import 'swr/infinite';
 import 'vanilla-lazyload';
 import '../../hooks/useCartUI.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
+import 'classnames';
+import 'dayjs';
+import '../convert.js';
 
 const useInteraction = ()=>{
     const ref = useRef();

package/dist/esm/helpers/is-empty-children.js

@@ -1,3 +1,4 @@
+'use client';
 import { Children } from 'react';
 import ComponentToolbarPreview from '../components/ComponentToolbarPreview.js';
 

package/dist/esm/helpers/layout.js

@@ -50,5 +50,21 @@ const convertOldLayout = (layout)=>{
         }
     };
 };
+const getLayoutClasses = (layout)=>{
+    const breakpoints = [
+        'desktop',
+        'tablet',
+        'mobile'
+    ];
+    return breakpoints.reduce((classes, bp)=>{
+        const prefix = bp === 'desktop' ? '' : `${bp}:`;
+        const layoutValue = layout?.[bp];
+        if (layoutValue) {
+            classes[`${prefix}gp-flex-col`] = layoutValue === 'vertical';
+            classes[`${prefix}gp-flex-row`] = layoutValue === 'horizontal';
+        }
+        return classes;
+    }, {});
+};
 
-export { composeGridLayout, convertOldLayout, gridToArrayRegex, optionLayoutStyle };
+export { composeGridLayout, convertOldLayout, getLayoutClasses, gridToArrayRegex, optionLayoutStyle };

package/dist/esm/helpers/radius.js

@@ -25,7 +25,15 @@ const getRadiusCSSFromGlobal = (state, key, device)=>{
     };
 };
 const getCustomRadius = (state, radius, device)=>{
-    if (!radius || !state || radius?.radiusType !== 'custom') return {};
+    const list = [
+        'custom',
+        'pill',
+        'rounded',
+        'single',
+        'none',
+        'circle'
+    ];
+    if (!radius || !state || !list.includes(radius?.radiusType ?? '')) return {};
     const suffix = device && device !== 'desktop' ? devicesMapping?.[device] : '';
     const mState = stateMapping?.[state];
     return {
@@ -60,6 +68,7 @@ const composeRadiusState = (radiusValue, device)=>{
         case 'circle':
         case 'none':
         case 'custom':
+        case 'rounded':
             Object.assign(style, getCustomRadius('normal', radiusValue.normal, device));
             break;
     }
@@ -72,6 +81,7 @@ const composeRadiusState = (radiusValue, device)=>{
         case 'circle':
         case 'none':
         case 'custom':
+        case 'rounded':
             Object.assign(style, getCustomRadius('hover', radiusValue.hover, device));
             break;
     }
@@ -84,6 +94,7 @@ const composeRadiusState = (radiusValue, device)=>{
         case 'circle':
         case 'none':
         case 'custom':
+        case 'rounded':
             Object.assign(style, getCustomRadius('focus', radiusValue.focus, device));
             break;
     }
@@ -117,6 +128,7 @@ const composeCornerCss = (value, important = false)=>{
             break;
         case 'circle':
         case 'none':
+        case 'rounded':
         case 'custom':
             radiusValue = `
       ${bblr ? `border-bottom-left-radius: ${bblr}${sub};` : ''}

package/dist/esm/helpers/shadow.js

@@ -22,10 +22,11 @@ const getStyleShadow = (shadowStyle, isActiveState = false)=>{
     let { state } = shadowStyle || {};
     if (!state) state = 'normal';
     if (!styleAppliedFor || !value) return {};
-    if (typeof value.distance == 'undefined') return {};
+    const isNoneValue = value.type === 'none';
+    if (typeof value.distance == 'undefined' && !isNoneValue) return {};
     const { value: distance, unit: unitDistance } = parseValueWithUnit(`${value?.distance}`);
     return {
-        [`-${!isActiveState ? stateMapping?.[state] || '' : ''}-${getShortName(styleAppliedFor)}${shadowStyle.screen ? `-${shadowStyle.screen}` : ''}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${getSingleColorVariable(value?.color)}` : 'none'
+        [`-${!isActiveState ? stateMapping?.[state] || '' : ''}-${getShortName(styleAppliedFor)}${shadowStyle.screen ? `-${shadowStyle.screen}` : ''}`]: isEnableShadow && !isNoneValue ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${getSingleColorVariable(value?.color)}` : 'none'
     };
 };
 const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow, screen)=>{
@@ -52,6 +53,30 @@ const getResponsiveStyleShadow = (value, styleAppliedFor, isEnableShadow)=>{
         };
     }
 };
+const getResponsiveStyleShadowWithoutState = (value, styleAppliedFor, isEnableShadow)=>{
+    if (!value) return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        return {
+            ...getStyleShadow({
+                value: value.desktop,
+                styleAppliedFor,
+                isEnableShadow: isEnableShadow.desktop
+            }),
+            ...value.tablet && (isEnableShadow.tablet ?? isEnableShadow.desktop) ? getStyleShadow({
+                value: value.tablet,
+                styleAppliedFor,
+                isEnableShadow: isEnableShadow.tablet ?? isEnableShadow.desktop,
+                screen: 'tablet'
+            }) : undefined,
+            ...value.mobile && (isEnableShadow.mobile ?? isEnableShadow.tablet ?? isEnableShadow.desktop) ? getStyleShadow({
+                value: value.mobile,
+                styleAppliedFor,
+                isEnableShadow: isEnableShadow.mobile ?? isEnableShadow.tablet ?? isEnableShadow.desktop,
+                screen: 'mobile'
+            }) : undefined
+        };
+    }
+};
 const composeShadowCss = ({ hasBoxShadow, boxShadowValue, important })=>{
     if (!hasBoxShadow) return undefined;
     if (!boxShadowValue) return undefined;
@@ -60,4 +85,4 @@ const composeShadowCss = ({ hasBoxShadow, boxShadowValue, important })=>{
     return `box-shadow: ${Math.cos(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${boxShadowValue?.blur} ${boxShadowValue?.spread + ' '}${getSingleColorVariable(boxShadowValue?.color)}${sub};`;
 };
 
-export { composeShadowCss, getResponsiveStyleShadow, getStyleShadow, getStyleShadowState, parseValueWithUnit };
+export { composeShadowCss, getResponsiveStyleShadow, getResponsiveStyleShadowWithoutState, getStyleShadow, getStyleShadowState, parseValueWithUnit };

package/dist/esm/helpers/size.js

@@ -188,5 +188,25 @@ const getPaddingGlobalSize = (globalSize)=>{
 const getValueByDevice = (value, device)=>{
     return value?.[device] === undefined ? value?.desktop === undefined ? value?.tablet : value?.desktop : value?.[device];
 };
+const getPaddingStyleByDevice = (value, device)=>{
+    if (!value) return {};
+    const suffix = devicesMapping[device || ''] ?? '';
+    return {
+        [`--pl${suffix}`]: value?.left,
+        [`--pr${suffix}`]: value?.right,
+        [`--pt${suffix}`]: value?.top,
+        [`--pb${suffix}`]: value?.bottom
+    };
+};
+const getResponsiveStylePadding = (value)=>{
+    if (!value) return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        return {
+            ...getPaddingStyleByDevice(value?.desktop),
+            ...getPaddingStyleByDevice(value?.tablet, 'tablet'),
+            ...getPaddingStyleByDevice(value?.mobile, 'mobile')
+        };
+    }
+};
 
-export { composeSize, composeSizeCss, genSizeClass, getAspectRatioGlobalSize, getGlobalSizeGap, getHeightByShapeGlobalSize, getPaddingGlobalSize, getValueByDevice, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeGlobalSizeIcon, makeStyleWithDefault };
+export { composeSize, composeSizeCss, genSizeClass, getAspectRatioGlobalSize, getGlobalSizeGap, getHeightByShapeGlobalSize, getPaddingGlobalSize, getPaddingStyleByDevice, getResponsiveStylePadding, getValueByDevice, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeGlobalSizeIcon, makeStyleWithDefault };

package/dist/esm/helpers/third-party/appConfig.js

@@ -184,6 +184,24 @@ const KachingBundlesConfig = {
         appId: '6c637362-a106-4a32-94ac-94dcfd68cdb8'
     }
 };
+const BestBuyFulfillmentConfig = {
+    BestBuyFulfillment: {
+        appName: 'best-buy-fulfillment',
+        appId: 'd9839db8-b94c-4590-ac73-3469abe7ed9b'
+    }
+};
+const AftershipEmailMarketingsmsConfig = {
+    AftershipEmailMarketingsms: {
+        appName: 'aftership-email-marketing-sms',
+        appId: '2db13273-f8db-4274-be89-c86a3352fb70'
+    }
+};
+const SegunoEmailMarketingConfig = {
+    SegunoEmailMarketing: {
+        appName: 'seguno-email',
+        appId: 'db65571f-fa4d-473d-baa2-283a96dc76bc'
+    }
+};
 const TrustooConfig = {
     Trustoo: {
         appName: 'trustoo-io-reviews',
@@ -196,5 +214,41 @@ const LooxReviewsConfig = {
         appId: '5c3b337f-fd14-4df5-b1d6-80ec13e6e28e'
     }
 };
+const SeoantTrustBadgesIconConfig = {
+    SeoantTrustBadgesIcon: {
+        appName: 'seoant-trust-badges',
+        appId: 'f42f2346-5d14-4b41-a8b9-4b6ee352262e'
+    }
+};
+const PowrContactFormBuilderConfig = {
+    PowrContactFormBuilder: {
+        appName: 'powr-form-builder',
+        appId: '1412fe37-d89c-4706-a797-6e2b53cb4a69'
+    }
+};
+const MyappgurusProductReviewsConfig = {
+    MyappgurusProductReviews: {
+        appName: 'mag-product-reviews',
+        appId: '0cf5caa0-e138-46b8-999b-520d16633e4c'
+    }
+};
+const TrustreviewsProductReviewsConfig = {
+    TrustreviewsProductReviews: {
+        appName: 'trustreviews',
+        appId: '56d0fe1b-e701-4cff-8f84-466a26e09adb'
+    }
+};
+const HulkProductOptionsConfig = {
+    HulkProductOptions: {
+        appName: 'hulk-product-options',
+        appId: '380168ef-9475-4244-a291-f66b189208b5'
+    }
+};
+const TrustshopProductReviewsConfig = {
+    TrustshopProductReviews: {
+        appName: 'trustshop-reviews',
+        appId: '18b0c4cc-5411-4b6e-922d-34fdc2f30ab9'
+    }
+};
 
-export { AppointmentBookingCowlendarConfig, BoldSubscriptionsConfig, BonLoyaltyRewardsReferralsConfig, EasyBundleBuilderSkailamaConfig, FastBundleBundlesDiscountsConfig, FlyBundlesUpsellsFbtConfig, GloboProductOptionsVariantConfig, GrowaveConfig, InstasellShoppableInstagramConfig, JunipProductReviewsUgcConfig, KachingBundlesConfig, KiteFreeGiftDiscountConfig, LoloyalLoyaltyReferralsConfig, LoopSubscriptionsConfig, LooxReviewsConfig, PowerfulContactFormBuilderConfig, PreorderNowPreOrderPqConfig, PreorderNowWodPresaleConfig, ProductOptionsCustomizerConfig, PumperBundlesVolumeDiscountConfig, RechargeSubscriptionsConfig, ReviewxpoProductReviewsAppConfig, SelleasyConfig, ShopifyFormsConfig, SimpleBundlesKitsConfig, SkioSubscriptionsYcS20Config, SproutPlantTreesGrowSalesConfig, SubifySubscriptionsConfig, TrustooConfig, UnlimitedBundlesDiscountsConfig, WhatmoreShoppableVideosreelConfig, WishlistKingConfig, YotpoReviewsV3UgcConfig };
+export { AftershipEmailMarketingsmsConfig, AppointmentBookingCowlendarConfig, BestBuyFulfillmentConfig, BoldSubscriptionsConfig, BonLoyaltyRewardsReferralsConfig, EasyBundleBuilderSkailamaConfig, FastBundleBundlesDiscountsConfig, FlyBundlesUpsellsFbtConfig, GloboProductOptionsVariantConfig, GrowaveConfig, HulkProductOptionsConfig, InstasellShoppableInstagramConfig, JunipProductReviewsUgcConfig, KachingBundlesConfig, KiteFreeGiftDiscountConfig, LoloyalLoyaltyReferralsConfig, LoopSubscriptionsConfig, LooxReviewsConfig, MyappgurusProductReviewsConfig, PowerfulContactFormBuilderConfig, PowrContactFormBuilderConfig, PreorderNowPreOrderPqConfig, PreorderNowWodPresaleConfig, ProductOptionsCustomizerConfig, PumperBundlesVolumeDiscountConfig, RechargeSubscriptionsConfig, ReviewxpoProductReviewsAppConfig, SegunoEmailMarketingConfig, SelleasyConfig, SeoantTrustBadgesIconConfig, ShopifyFormsConfig, SimpleBundlesKitsConfig, SkioSubscriptionsYcS20Config, SproutPlantTreesGrowSalesConfig, SubifySubscriptionsConfig, TrustooConfig, TrustreviewsProductReviewsConfig, TrustshopProductReviewsConfig, UnlimitedBundlesDiscountsConfig, WhatmoreShoppableVideosreelConfig, WishlistKingConfig, YotpoReviewsV3UgcConfig };