@gem-sdk/core 1.23.0-staging.401 → 1.23.0-staging.415

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

@@ -25,6 +25,10 @@ function Spacing(props) {
     const isDragging = react.useRef(false);
     const startY = react.useRef(0);
     const marginBottom = react.useRef(0);
+    const $visualNumberValue = react.useRef(null);
+    const [marginBottomValue, setMarginBottomValue] = react.useState(0);
+    const [isShowVisual, setIsShowVisual] = react.useState(false);
+    const hideVisualNumberValue = react.useRef(null);
     const getNewValueMargin = (event)=>{
         const top = event.clientY;
         const diffY = Math.ceil(top - startY.current);
@@ -43,6 +47,7 @@ function Spacing(props) {
             const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
             if ($component) {
                 $component.style.marginBottom = newValue;
+                onShowMarginBottomNumber(newValue);
             }
         }
     };
@@ -135,6 +140,7 @@ function Spacing(props) {
         if ($marginBottom) {
             if ($bottomBg.current && $bottomDrag.current) {
                 let value = style.marginBottom;
+                onShowMarginBottomNumber(value);
                 if (parseFloat(value) < 0) {
                     value = '0';
                 }
@@ -153,17 +159,47 @@ function Spacing(props) {
             }
         }
     }, []);
+    const onShowMarginBottomNumber = (value)=>{
+        const parsedValue = parseFloat(value);
+        setMarginBottomValue(parsedValue);
+        setIsShowVisual(true);
+        if (hideVisualNumberValue.current) clearTimeout(hideVisualNumberValue.current);
+        hideVisualNumberValue.current = setTimeout(()=>{
+            setIsShowVisual(false);
+        }, 2000);
+        // break point 28px
+        const topPosition = parsedValue < 28 && parsedValue >= 0 ? parsedValue / 2 + 16 : parsedValue > 28 ? 0 : 16;
+        if ($visualNumberValue.current) {
+            $visualNumberValue.current.style.transform = `translateY(${topPosition}px)`;
+        }
+    };
+    const previousAdvanced = usePrevious(props.advanced?.['spacing-setting']);
     react.useEffect(()=>{
+        // validate spacing setting changed
+        if (JSON.stringify(previousAdvanced) !== JSON.stringify(props.advanced?.['spacing-setting'])) {
+            updateSpacing();
+        }
+    }, [
+        previousAdvanced,
+        props.advanced,
+        updateSpacing
+    ]);
+    const onWindowResize = react.useCallback(()=>{
         updateSpacing();
-    });
+    }, [
+        updateSpacing
+    ]);
     react.useEffect(()=>{
         window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
         window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
+        window.addEventListener('resize', onWindowResize);
         return ()=>{
             window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
             window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
+            window.removeEventListener('resize', onWindowResize);
         };
     }, [
+        onWindowResize,
         updateSpacing
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -174,12 +210,20 @@ function Spacing(props) {
             children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
                 "data-spacing-margin-bottom": true,
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
                         "data-spacing-margin-bottom-bg": true,
                         ref: $bottomBg,
-                        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            "data-spacing-margin-bottom-value": true
-                        })
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-spacing-margin-bottom-value": true
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-active": isShowVisual,
+                                "data-value-number": true,
+                                ref: $visualNumberValue,
+                                children: marginBottomValue
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx("div", {
                         ref: $bottomDrag,
@@ -193,5 +237,14 @@ function Spacing(props) {
         })
     });
 }
+const usePrevious = (value)=>{
+    const ref = react.useRef();
+    react.useEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+};
 
 exports.default = Spacing;

package/dist/cjs/graphql/fragments/custom-font.generated.js

@@ -0,0 +1,14 @@
+'use strict';
+
+/* eslint-disable */ const CustomFontSelect = `
+    fragment CustomFontSelect on CustomFont {
+  backupFilePath
+  fontFamily
+  fontStyle
+  fontWeight
+  mimeType
+  filePath
+}
+    `;
+
+exports.CustomFontSelect = CustomFontSelect;

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

@@ -25,6 +25,9 @@
   themePageCustomCode {
     ...CustomCodeSelect
   }
+  themePageCustomFonts {
+    ...CustomFontSelect
+  }
 }
     `;
 

package/dist/cjs/graphql/queries/published-theme-pages.generated.js

@@ -7,6 +7,7 @@ var dataSeo_generated = require('../fragments/data-seo.generated.js');
 var publishedThemeStyle_generated = require('../fragments/published-theme-style.generated.js');
 var analytic_generated = require('../fragments/analytic.generated.js');
 var customCode_generated = require('../fragments/custom-code.generated.js');
+var customFont_generated = require('../fragments/custom-font.generated.js');
 
 const PublishedThemePagesDocument = `
     query publishedThemePages($slug: String, $slugType: PublishedThemePageType!) {
@@ -20,6 +21,7 @@ ${publishedCustomSection_generated.PublishedCustomSectionSelect}
 ${dataSeo_generated.DataSeoSelect}
 ${publishedThemeStyle_generated.PublishedThemeStyleSelect}
 ${analytic_generated.AnalyticSelect}
-${customCode_generated.CustomCodeSelect}`;
+${customCode_generated.CustomCodeSelect}
+${customFont_generated.CustomFontSelect}`;
 
 exports.PublishedThemePagesDocument = PublishedThemePagesDocument;

package/dist/cjs/helpers/typography.js

@@ -61,7 +61,7 @@ const composeTypographyV2 = (value, attrs)=>{
     return makeStyle.removeNullUndefined({
         ...makeStyle.makeStyle({
             fs: !attrs?.italic ? value?.fontStyle : undefined,
-            ff: value?.fontFamily ? `var(--g-font-${value.fontFamily.replace(/ /g, '-')}, '${value.fontFamily}')` : undefined,
+            ff: value?.fontFamily ? `var(--g-font-${value.fontFamily.replace(/ /g, '-')}, '${value.fontFamily}'), ${value.fallbackFontFamily}` : undefined,
             weight: !attrs?.bold ? value?.fontWeight : undefined,
             ls: value?.letterSpacing,
             lh: value?.lineHeight
@@ -84,10 +84,29 @@ const composeTypographyAttr = (attrs)=>{
 const composeTypographyClassName = (typo, typography)=>{
     return typo ? typo?.type && !typo.custom ? genTypoClass(typo.type) : '' : typography?.type && genTypoClass(typography?.type);
 };
+const composeFallbackTypographyStyle = (tag)=>{
+    if ([
+        'heading',
+        'heading-1',
+        'heading-2',
+        'heading-3',
+        'heading-4',
+        'heading-5',
+        'heading-6'
+    ].includes(tag)) {
+        return 'var(--g-font-heading, heading)';
+    }
+    return 'var(--g-font-body, body)';
+};
 const composeTypographyStyle = (typo, typography, disableAttr)=>{
     if (typo) {
+        const fallbackFontFamily = composeFallbackTypographyStyle(typo.type ?? 'heading');
+        const customTypo = {
+            ...typo.custom,
+            fallbackFontFamily: fallbackFontFamily
+        };
         return {
-            ...composeTypographyV2(typo.custom, typo.attrs),
+            ...composeTypographyV2(customTypo, typo.attrs),
             ...!disableAttr && composeTypographyAttr(typo.attrs)
         };
     }
@@ -96,6 +115,7 @@ const composeTypographyStyle = (typo, typography, disableAttr)=>{
     };
 };
 
+exports.composeFallbackTypographyStyle = composeFallbackTypographyStyle;
 exports.composeTypography = composeTypography;
 exports.composeTypographyAttr = composeTypographyAttr;
 exports.composeTypographyClassName = composeTypographyClassName;

package/dist/cjs/index.js

@@ -206,6 +206,7 @@ exports.getGlobalColorStateStyle = colors.getGlobalColorStateStyle;
 exports.getGlobalColorStyle = colors.getGlobalColorStyle;
 exports.getSingleColorVariable = colors.getSingleColorVariable;
 exports.isColor = colors.isColor;
+exports.composeFallbackTypographyStyle = typography.composeFallbackTypographyStyle;
 exports.composeTypography = typography.composeTypography;
 exports.composeTypographyAttr = typography.composeTypographyAttr;
 exports.composeTypographyClassName = typography.composeTypographyClassName;

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

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useRef, useCallback, useEffect } from 'react';
+import { useRef, useState, useCallback, useEffect } from 'react';
 import 'zustand';
 import { useBuilderPreviewStore } from '../../contexts/BuilderPreviewContext.js';
 import 'swr';
@@ -21,6 +21,10 @@ function Spacing(props) {
     const isDragging = useRef(false);
     const startY = useRef(0);
     const marginBottom = useRef(0);
+    const $visualNumberValue = useRef(null);
+    const [marginBottomValue, setMarginBottomValue] = useState(0);
+    const [isShowVisual, setIsShowVisual] = useState(false);
+    const hideVisualNumberValue = useRef(null);
     const getNewValueMargin = (event)=>{
         const top = event.clientY;
         const diffY = Math.ceil(top - startY.current);
@@ -39,6 +43,7 @@ function Spacing(props) {
             const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
             if ($component) {
                 $component.style.marginBottom = newValue;
+                onShowMarginBottomNumber(newValue);
             }
         }
     };
@@ -131,6 +136,7 @@ function Spacing(props) {
         if ($marginBottom) {
             if ($bottomBg.current && $bottomDrag.current) {
                 let value = style.marginBottom;
+                onShowMarginBottomNumber(value);
                 if (parseFloat(value) < 0) {
                     value = '0';
                 }
@@ -149,17 +155,47 @@ function Spacing(props) {
             }
         }
     }, []);
+    const onShowMarginBottomNumber = (value)=>{
+        const parsedValue = parseFloat(value);
+        setMarginBottomValue(parsedValue);
+        setIsShowVisual(true);
+        if (hideVisualNumberValue.current) clearTimeout(hideVisualNumberValue.current);
+        hideVisualNumberValue.current = setTimeout(()=>{
+            setIsShowVisual(false);
+        }, 2000);
+        // break point 28px
+        const topPosition = parsedValue < 28 && parsedValue >= 0 ? parsedValue / 2 + 16 : parsedValue > 28 ? 0 : 16;
+        if ($visualNumberValue.current) {
+            $visualNumberValue.current.style.transform = `translateY(${topPosition}px)`;
+        }
+    };
+    const previousAdvanced = usePrevious(props.advanced?.['spacing-setting']);
     useEffect(()=>{
+        // validate spacing setting changed
+        if (JSON.stringify(previousAdvanced) !== JSON.stringify(props.advanced?.['spacing-setting'])) {
+            updateSpacing();
+        }
+    }, [
+        previousAdvanced,
+        props.advanced,
+        updateSpacing
+    ]);
+    const onWindowResize = useCallback(()=>{
         updateSpacing();
-    });
+    }, [
+        updateSpacing
+    ]);
     useEffect(()=>{
         window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
         window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
+        window.addEventListener('resize', onWindowResize);
         return ()=>{
             window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
             window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
+            window.removeEventListener('resize', onWindowResize);
         };
     }, [
+        onWindowResize,
         updateSpacing
     ]);
     return /*#__PURE__*/ jsx(Fragment, {
@@ -170,12 +206,20 @@ function Spacing(props) {
             children: /*#__PURE__*/ jsxs("div", {
                 "data-spacing-margin-bottom": true,
                 children: [
-                    /*#__PURE__*/ jsx("div", {
+                    /*#__PURE__*/ jsxs("div", {
                         "data-spacing-margin-bottom-bg": true,
                         ref: $bottomBg,
-                        children: /*#__PURE__*/ jsx("div", {
-                            "data-spacing-margin-bottom-value": true
-                        })
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                "data-spacing-margin-bottom-value": true
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                "data-active": isShowVisual,
+                                "data-value-number": true,
+                                ref: $visualNumberValue,
+                                children: marginBottomValue
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ jsx("div", {
                         ref: $bottomDrag,
@@ -189,5 +233,14 @@ function Spacing(props) {
         })
     });
 }
+const usePrevious = (value)=>{
+    const ref = useRef();
+    useEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+};
 
 export { Spacing as default };

package/dist/esm/graphql/fragments/custom-font.generated.js

@@ -0,0 +1,12 @@
+/* eslint-disable */ const CustomFontSelect = `
+    fragment CustomFontSelect on CustomFont {
+  backupFilePath
+  fontFamily
+  fontStyle
+  fontWeight
+  mimeType
+  filePath
+}
+    `;
+
+export { CustomFontSelect };

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

@@ -23,6 +23,9 @@
   themePageCustomCode {
     ...CustomCodeSelect
   }
+  themePageCustomFonts {
+    ...CustomFontSelect
+  }
 }
     `;
 

package/dist/esm/graphql/queries/published-theme-pages.generated.js

@@ -5,6 +5,7 @@ import { DataSeoSelect } from '../fragments/data-seo.generated.js';
 import { PublishedThemeStyleSelect } from '../fragments/published-theme-style.generated.js';
 import { AnalyticSelect } from '../fragments/analytic.generated.js';
 import { CustomCodeSelect } from '../fragments/custom-code.generated.js';
+import { CustomFontSelect } from '../fragments/custom-font.generated.js';
 
 const PublishedThemePagesDocument = `
     query publishedThemePages($slug: String, $slugType: PublishedThemePageType!) {
@@ -18,6 +19,7 @@ ${PublishedCustomSectionSelect}
 ${DataSeoSelect}
 ${PublishedThemeStyleSelect}
 ${AnalyticSelect}
-${CustomCodeSelect}`;
+${CustomCodeSelect}
+${CustomFontSelect}`;
 
 export { PublishedThemePagesDocument };

package/dist/esm/helpers/typography.js

@@ -59,7 +59,7 @@ const composeTypographyV2 = (value, attrs)=>{
     return removeNullUndefined({
         ...makeStyle({
             fs: !attrs?.italic ? value?.fontStyle : undefined,
-            ff: value?.fontFamily ? `var(--g-font-${value.fontFamily.replace(/ /g, '-')}, '${value.fontFamily}')` : undefined,
+            ff: value?.fontFamily ? `var(--g-font-${value.fontFamily.replace(/ /g, '-')}, '${value.fontFamily}'), ${value.fallbackFontFamily}` : undefined,
             weight: !attrs?.bold ? value?.fontWeight : undefined,
             ls: value?.letterSpacing,
             lh: value?.lineHeight
@@ -82,10 +82,29 @@ const composeTypographyAttr = (attrs)=>{
 const composeTypographyClassName = (typo, typography)=>{
     return typo ? typo?.type && !typo.custom ? genTypoClass(typo.type) : '' : typography?.type && genTypoClass(typography?.type);
 };
+const composeFallbackTypographyStyle = (tag)=>{
+    if ([
+        'heading',
+        'heading-1',
+        'heading-2',
+        'heading-3',
+        'heading-4',
+        'heading-5',
+        'heading-6'
+    ].includes(tag)) {
+        return 'var(--g-font-heading, heading)';
+    }
+    return 'var(--g-font-body, body)';
+};
 const composeTypographyStyle = (typo, typography, disableAttr)=>{
     if (typo) {
+        const fallbackFontFamily = composeFallbackTypographyStyle(typo.type ?? 'heading');
+        const customTypo = {
+            ...typo.custom,
+            fallbackFontFamily: fallbackFontFamily
+        };
         return {
-            ...composeTypographyV2(typo.custom, typo.attrs),
+            ...composeTypographyV2(customTypo, typo.attrs),
             ...!disableAttr && composeTypographyAttr(typo.attrs)
         };
     }
@@ -94,4 +113,4 @@ const composeTypographyStyle = (typo, typography, disableAttr)=>{
     };
 };
 
-export { composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass };
+export { composeFallbackTypographyStyle, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass };

package/dist/esm/index.js

@@ -46,7 +46,7 @@ export { genVariable } from './helpers/css-variable.js';
 export { composeGridLayout, convertOldLayout, gridToArrayRegex, optionLayoutStyle } from './helpers/layout.js';
 export { isDefined } from './helpers/is-defined.js';
 export { composeTextColorCss, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor } from './helpers/colors.js';
-export { composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass } from './helpers/typography.js';
+export { composeFallbackTypographyStyle, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass } from './helpers/typography.js';
 export { composeCornerCss, composeRadius, composeRadiusResponsive, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
 export { checkAvailableVariantInStock, getSelectedVariant, parseSelectedOption } from './helpers/product.js';
 import * as fpixel from './helpers/tracking/fpixel.js';

package/dist/types/index.d.ts

@@ -25427,6 +25427,7 @@ type TypographyProps = {
     fontFamily?: string;
     lineHeight?: string;
     letterSpacing?: string;
+    fallbackFontFamily?: string;
 };
 type TypographyV2Props = Omit<TypographyProps, 'fontSize' | 'lineHeight'> & {
     fontSize?: ObjectDevices<string>;
@@ -26126,6 +26127,7 @@ type PublishedThemePagesQueryResponse = {
         pageStyle?: Maybe$1<Pick<PublishedThemeStyle$1, 'id' | 'data' | 'name'>>;
         themePageAnalytic?: Maybe$1<Pick<Analytic$1, 'fbPixelID' | 'gaTrackingID' | 'tiktokPixelID'>>;
         themePageCustomCode?: Maybe$1<Pick<CustomCode$1, 'body' | 'header'>>;
+        themePageCustomFonts?: Maybe$1<Array<Maybe$1<CustomFont$1>>>;
     }>>>;
 };
 declare const PublishedThemePagesDocument: string;
@@ -26371,6 +26373,7 @@ declare const composeTypography: (typography?: ObjectDevices<TypographyProps>) =
 declare const composeTypographyV2: (value?: TypographyV2Props, attrs?: TypographyV2Attrs) => React.CSSProperties;
 declare const composeTypographyAttr: (attrs?: TypographyV2Attrs) => React.CSSProperties;
 declare const composeTypographyClassName: (typo?: TypographySettingV2, typography?: TypographySetting) => "" | "gp-g-heading-1" | "gp-g-heading-2" | "gp-g-heading-3" | "gp-g-subheading-1" | "gp-g-subheading-2" | "gp-g-subheading-3" | "gp-g-paragraph-1" | "gp-g-paragraph-2" | "gp-g-paragraph-3" | undefined;
+declare const composeFallbackTypographyStyle: (tag: string) => "var(--g-font-heading, heading)" | "var(--g-font-body, body)";
 declare const composeTypographyStyle: (typo?: TypographySettingV2, typography?: TypographySetting, disableAttr?: boolean) => {
     [x: string]: any;
     '--ai'?: csstype.Property.AlignItems | undefined;
@@ -34285,4 +34288,4 @@ type PublishedThemePageSelectFragment = Pick<PublishedThemePage$1, 'id' | 'name'
 
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
 
-export { AddOn, AddonProvider, AddonProviderProps, AdvancedType, AliReviewsWidgetType, AlignItemProp, AlignProp, AnimationBaseSetting, AnimationConfig, AnimationDirectionType, AnimationEasingType, AnimationFadeSettingType, AnimationSetting, AnimationSettingType, AnimationShakeSettingType, AnimationSlideSettingType, AnimationTrigger, AnimationTriggerType, AnimationType, AnimationZoomDirectionType, AnimationZoomSettingType, appAPI as AppAPIType, Background, BaseProps, BasePropsWrap, BlockEntity, BogosWidgetType, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlTriggerAction, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, DynamicCollection, DynamicProduct, ExtractState, FeraReviewsV3WidgetType, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GRADIENT_BGR_KEY, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, GrowaveWidgetType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsAdvancedWidgetType, LaiProductReviewsWidgetType, LibraryTemplateDocument, LibraryTemplateQueryResponse, LibraryTemplateQueryVariables, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices$1 as NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OpinewDesignWidgetType, OpinewWidgetType, OptionNormalStyle, OptionSpecialStyle, Options, PageContext, PageProvider, PageProviderProps, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PostPurchaseTypo, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductOffer, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, 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, Scalars$1 as Scalars, ScaleByDirection, SectionData, SectionEntity, SectionProvider, SectionProviderProps, SettingByAnimationType, SettingByAnimationValues, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeSettingGlobal, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, ThemePageDocument, ThemePageQueryResponse, ThemePageQueryVariables, TransformProp, TriggerConfig, TrustooWidgetType, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, UltimateSalesBoostWidgetType, VariantSelectFragment, VitalsWidgetType, WiserV2WidgetType, WiserWidgetType, WrapRenderChildren, YotpoReviewsWidgetType, animations, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeAdvanceStyleForPostPurchase, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composePositionLineHeight, composePostionIconList, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertHTML, convertOldLayout, dataStringify, fetchMedias, fetchVariants, filterAttrInStyle, filterCornerInStyle, filterToolbarPreview, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getAspectRatioGlobalSize, getBgImageByDevice, getBorderStyle, getCarouselContainerHeight, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getGlobalSizeGap, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getHeightByShapeGlobalSize, getPaddingGlobalSize, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeContainerWidthOrHeight, makeDotGapToCarouselStyle, makeFixedBgAttachment, makeGlobalSize, makeGlobalSizeHeightResponsive, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleState, makeStyleWithDefault, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeAttrInStyle, removeNullUndefined, removePaddingYInStyle, shopifyPriceRounding, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useInitialSwatchesOptions, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageStore, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductOfferDiscount, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
+export { AddOn, AddonProvider, AddonProviderProps, AdvancedType, AliReviewsWidgetType, AlignItemProp, AlignProp, AnimationBaseSetting, AnimationConfig, AnimationDirectionType, AnimationEasingType, AnimationFadeSettingType, AnimationSetting, AnimationSettingType, AnimationShakeSettingType, AnimationSlideSettingType, AnimationTrigger, AnimationTriggerType, AnimationType, AnimationZoomDirectionType, AnimationZoomSettingType, appAPI as AppAPIType, Background, BaseProps, BasePropsWrap, BlockEntity, BogosWidgetType, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlTriggerAction, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, DynamicCollection, DynamicProduct, ExtractState, FeraReviewsV3WidgetType, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GRADIENT_BGR_KEY, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, GrowaveWidgetType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsAdvancedWidgetType, LaiProductReviewsWidgetType, LibraryTemplateDocument, LibraryTemplateQueryResponse, LibraryTemplateQueryVariables, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices$1 as NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OpinewDesignWidgetType, OpinewWidgetType, OptionNormalStyle, OptionSpecialStyle, Options, PageContext, PageProvider, PageProviderProps, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PostPurchaseTypo, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductOffer, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, 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, Scalars$1 as Scalars, ScaleByDirection, SectionData, SectionEntity, SectionProvider, SectionProviderProps, SettingByAnimationType, SettingByAnimationValues, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeSettingGlobal, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, ThemePageDocument, ThemePageQueryResponse, ThemePageQueryVariables, TransformProp, TriggerConfig, TrustooWidgetType, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, UltimateSalesBoostWidgetType, VariantSelectFragment, VitalsWidgetType, WiserV2WidgetType, WiserWidgetType, WrapRenderChildren, YotpoReviewsWidgetType, animations, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeAdvanceStyleForPostPurchase, composeBackgroundCss, composeBorderCss, composeCornerCss, composeFallbackTypographyStyle, composeGridLayout, composeMemo, composePositionLineHeight, composePostionIconList, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertHTML, convertOldLayout, dataStringify, fetchMedias, fetchVariants, filterAttrInStyle, filterCornerInStyle, filterToolbarPreview, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getAspectRatioGlobalSize, getBgImageByDevice, getBorderStyle, getCarouselContainerHeight, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getGlobalSizeGap, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getHeightByShapeGlobalSize, getPaddingGlobalSize, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeContainerWidthOrHeight, makeDotGapToCarouselStyle, makeFixedBgAttachment, makeGlobalSize, makeGlobalSizeHeightResponsive, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleState, makeStyleWithDefault, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeAttrInStyle, removeNullUndefined, removePaddingYInStyle, shopifyPriceRounding, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useInitialSwatchesOptions, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageStore, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductOfferDiscount, 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.23.0-staging.401",
+  "version": "1.23.0-staging.415",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@gem-sdk/adapter-shopify": "1.23.0-staging.383",
-    "@gem-sdk/styles": "1.23.0-staging.397"
+    "@gem-sdk/styles": "1.23.0-staging.415"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",