@gem-sdk/core 1.5.43 → 1.5.44

package/dist/cjs/helpers/borders.js

@@ -3,6 +3,13 @@
 var colors = require('./colors.js');
 var makeStyle = require('./make-style.js');
 
+const getBorderStyle = (value)=>{
+    return makeStyle.makeStyle({
+        'b': value?.border,
+        'bc': value?.color,
+        'bw': value?.width
+    });
+};
 const handleConvertBorderStyle = (value)=>{
     if (!value) return undefined;
     if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
@@ -128,6 +135,7 @@ const handleConvertClassColor = (value)=>{
     return colors.getGlobalColorStateClass('border', newVal);
 };
 
+exports.getBorderStyle = getBorderStyle;
 exports.handleConvertBorderColor = handleConvertBorderColor;
 exports.handleConvertBorderStyle = handleConvertBorderStyle;
 exports.handleConvertBorderWidth = handleConvertBorderWidth;

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

@@ -114,6 +114,13 @@ function composeAdvanceStyle(data, tag) {
                             Object.assign(styles, shadow.getStyleShadowState(value, 'box-shadow', hasBoxShadow));
                             break;
                     }
+                } else {
+                    if (attr === 'border') {
+                        Object.assign(styles, borders.getBorderStyle(value));
+                    }
+                    if (attr === 'rounded') {
+                        Object.assign(styles, radius.getCornerCSSFromGlobal(value));
+                    }
                 }
             });
         } else {

package/dist/cjs/helpers/radius.js

@@ -1,7 +1,18 @@
 'use strict';
 
 var constant = require('./constant.js');
+var makeStyle = require('./make-style.js');
 
+const getCornerCSSFromGlobal = (corner)=>{
+    if (!corner.radiusType) return {};
+    return makeStyle.makeStyle({
+        'bblr': corner.bblr,
+        'bbrr': corner.bbrr,
+        'btlr': corner.btlr,
+        'btrr': corner.btrr,
+        'radius': `var(--g-radius-${corner.radiusType})`
+    });
+};
 const getRadiusCSSFromGlobal = (state, key, device)=>{
     if (!key || !state) return {};
     const suffix = device && device !== 'desktop' ? constant.devicesMapping?.[device] : '';
@@ -83,6 +94,7 @@ const getRadiusStyleActiveState = (radiusValue)=>{
 };
 
 exports.composeRadius = composeRadius;
+exports.getCornerCSSFromGlobal = getCornerCSSFromGlobal;
 exports.getCustomRadius = getCustomRadius;
 exports.getRadiusCSSFromGlobal = getRadiusCSSFromGlobal;
 exports.getRadiusStyleActiveState = getRadiusStyleActiveState;

package/dist/cjs/index.js

@@ -166,6 +166,7 @@ exports.getSingleColorVariable = colors.getSingleColorVariable;
 exports.isColor = colors.isColor;
 exports.genTypoClass = typography.genTypoClass;
 exports.composeRadius = radius.composeRadius;
+exports.getCornerCSSFromGlobal = radius.getCornerCSSFromGlobal;
 exports.getCustomRadius = radius.getCustomRadius;
 exports.getRadiusCSSFromGlobal = radius.getRadiusCSSFromGlobal;
 exports.getRadiusStyleActiveState = radius.getRadiusStyleActiveState;

package/dist/esm/helpers/borders.js

@@ -1,6 +1,13 @@
 import { getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStateResponsiveClass, getGlobalColorStateClass } from './colors.js';
-import { makeStyleResponsiveState, makeStyleState } from './make-style.js';
+import { makeStyleResponsiveState, makeStyleState, makeStyle } from './make-style.js';
 
+const getBorderStyle = (value)=>{
+    return makeStyle({
+        'b': value?.border,
+        'bc': value?.color,
+        'bw': value?.width
+    });
+};
 const handleConvertBorderStyle = (value)=>{
     if (!value) return undefined;
     if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
@@ -126,4 +133,4 @@ const handleConvertClassColor = (value)=>{
     return getGlobalColorStateClass('border', newVal);
 };
 
-export { handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor };
+export { getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor };

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

@@ -1,7 +1,7 @@
-import { handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor } from './borders.js';
+import { handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor, getBorderStyle } from './borders.js';
 import { isColor } from './colors.js';
 import { layoutComponent } from './constant.js';
-import { composeRadius } from './radius.js';
+import { composeRadius, getCornerCSSFromGlobal } from './radius.js';
 import { getStyleShadowState } from './shadow.js';
 
 const composeSpacing = ({ source , spacing , type , suffix =''  })=>{
@@ -112,6 +112,13 @@ function composeAdvanceStyle(data, tag) {
                             Object.assign(styles, getStyleShadowState(value, 'box-shadow', hasBoxShadow));
                             break;
                     }
+                } else {
+                    if (attr === 'border') {
+                        Object.assign(styles, getBorderStyle(value));
+                    }
+                    if (attr === 'rounded') {
+                        Object.assign(styles, getCornerCSSFromGlobal(value));
+                    }
                 }
             });
         } else {

package/dist/esm/helpers/radius.js

@@ -1,5 +1,16 @@
 import { devicesMapping, stateMapping } from './constant.js';
+import { makeStyle } from './make-style.js';
 
+const getCornerCSSFromGlobal = (corner)=>{
+    if (!corner.radiusType) return {};
+    return makeStyle({
+        'bblr': corner.bblr,
+        'bbrr': corner.bbrr,
+        'btlr': corner.btlr,
+        'btrr': corner.btrr,
+        'radius': `var(--g-radius-${corner.radiusType})`
+    });
+};
 const getRadiusCSSFromGlobal = (state, key, device)=>{
     if (!key || !state) return {};
     const suffix = device && device !== 'desktop' ? devicesMapping?.[device] : '';
@@ -80,4 +91,4 @@ const getRadiusStyleActiveState = (radiusValue)=>{
     return getRadiusCSSFromGlobal('normal', radiusValue?.active?.radiusType);
 };
 
-export { composeRadius, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState };
+export { composeRadius, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState };

package/dist/esm/index.js

@@ -42,7 +42,7 @@ export { genVariable } from './helpers/css-variable.js';
 export { isDefined } from './helpers/is-defined.js';
 export { getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor } from './helpers/colors.js';
 export { genTypoClass } from './helpers/typography.js';
-export { composeRadius, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
+export { composeRadius, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
 export { getSelectedVariant, parseSelectedOption } from './helpers/product.js';
 import * as fpixel from './helpers/tracking/fpixel.js';
 export { fpixel };

package/dist/types/index.d.ts

@@ -7316,6 +7316,7 @@ declare const getGlobalColorStyle: (data?: ColorValueType) => React.CSSPropertie
 type TypographyClass = `g-${TypographyType}`;
 declare const genTypoClass: (name: TypographyType) => TypographyClass;
 
+declare const getCornerCSSFromGlobal: (corner: CornerRadius) => React.CSSProperties;
 declare const getRadiusCSSFromGlobal: (state: StateType, key?: RoundedSize, device?: NameDevices) => React.CSSProperties;
 declare const getCustomRadius: (state: StateType, radius?: CornerRadius, device?: NameDevices) => React.CSSProperties;
 declare const composeRadius: (value?: StateProp<CornerRadius> | ResponsiveStateProp<CornerRadius>) => React.CSSProperties;
@@ -7609,4 +7610,4 @@ declare const fetchMedias: (fetcher: FetchFunc, { id, isSample }: FetchParams) =
 
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
 
-export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, Border, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchFunc, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RoundedSize, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, calculateFirstProduct, cls, composeAdvanceStyle, composeRadius, composeSize, composeSpacing, fetchMedias, fetchVariants, flattenConnection, fpixel, genTypoClass, genVariable, getCollection, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, prefetchQueries, props, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useMoney, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
+export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, Border, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchFunc, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RoundedSize, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, calculateFirstProduct, cls, composeAdvanceStyle, composeRadius, composeSize, composeSpacing, fetchMedias, fetchVariants, flattenConnection, fpixel, genTypoClass, genVariable, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, prefetchQueries, props, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useMoney, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };

package/package.json

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