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

package/dist/esm/components/theme-section/ThemeSectionTooltip.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import { Transition } from 'react-transition-group';

package/dist/esm/components/toolbar/Tooltip.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function Tooltip({ children, enable, text = 'Tooltip Text', position = 'right', width, ...props }) {

package/dist/esm/contexts/AddonContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useContext, useMemo, createContext } from 'react';
 import Empty from '../components/Empty.js';

package/dist/esm/contexts/ArticleContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useStore, createStore } from 'zustand';
 import { useId, useMemo, useContext, createContext } from 'react';

package/dist/esm/contexts/ArticleListContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useContext, createContext } from 'react';
 import { useStore, createStore } from 'zustand';

package/dist/esm/contexts/BuilderComponent.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useStore, createStore } from 'zustand';
 import { useContext, createContext } from 'react';

package/dist/esm/contexts/BuilderContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useContext, createContext, Suspense, Fragment } from 'react';
 import { useStore, createStore } from 'zustand';

package/dist/esm/contexts/BuilderPreviewContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useMemo, useContext, createContext, Suspense, Fragment } from 'react';
 import { useStore, createStore } from 'zustand';

package/dist/esm/contexts/CartLineContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useStore, createStore } from 'zustand';
 import { useContext, createContext } from 'react';

package/dist/esm/contexts/CollectionContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useMemo, useContext, createContext } from 'react';
 import { useStore, createStore } from 'zustand';

package/dist/esm/contexts/ModalContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useContext, createContext } from 'react';
 import { useStore, createStore } from 'zustand';

package/dist/esm/contexts/PageContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useMemo, useContext, createContext } from 'react';
 import { useStore, createStore } from 'zustand';

package/dist/esm/contexts/ProductContext.js

@@ -1,19 +1,9 @@
+'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useId, useMemo, useContext, createContext } from 'react';
 import { useStore, createStore } from 'zustand';
-import 'swr';
-import '@gem-sdk/adapter-shopify';
-import 'swr/mutation';
-import 'swr/infinite';
-import 'vanilla-lazyload';
-import '../hooks/useCartUI.js';
-import { checkInStock } from '../helpers/variant.js';
-import 'react-transition-group';
-import '@gem-sdk/core';
-import 'classnames';
-import 'dayjs';
 import { flattenConnection } from '../helpers/flatten-connection.js';
-import '../helpers/convert.js';
+import { checkInStock } from '../helpers/variant.js';
 
 // const { Provider, useStore } = createContext<StoreApi<ProductContextProps>>();
 const ProductContext = /*#__PURE__*/ createContext(null);
@@ -39,6 +29,16 @@ const createProductStoreProvider = (data)=>createStore((set, get)=>({
                     useProductCompareAtPrice: value
                 });
             },
+            setShouldRequireUploadMessage: (value)=>{
+                set({
+                    shouldRequireUploadMessage: value
+                });
+            },
+            setRequireUpload: (value)=>{
+                set({
+                    requireUpload: value
+                });
+            },
             addProperty: (data)=>{
                 const properties = get().properties;
                 if (!properties?.some((v)=>v.key === data.key)) {

package/dist/esm/contexts/ProductListContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useContext, createContext } from 'react';
 import { useStore, createStore } from 'zustand';

package/dist/esm/contexts/SectionContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useStore, createStore } from 'zustand';
 import { useContext, createContext } from 'react';

package/dist/esm/contexts/ShopContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { SWRConfig } from 'swr';
 import { useStore, createStore } from 'zustand';

package/dist/esm/graphql/fragments/preview-theme-page.generated.js

@@ -27,10 +27,6 @@
   customFonts {
     ...CustomFontSelect
   }
-  interaction {
-    id
-    value
-  }
 }
     `;
 

package/dist/esm/graphql/fragments/published-theme-page.generated.js

@@ -30,6 +30,10 @@
     id
     value
   }
+  metafields {
+    key
+    value
+  }
 }
     `;
 

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

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

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};` : ''}