@gem-sdk/core 1.22.21 → 1.22.31-new-feature.2

package/dist/esm/components/Render.liquid.js

@@ -1,5 +1,13 @@
 import 'react';
+import 'react/jsx-runtime';
+import 'zustand';
 import 'swr';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import 'vanilla-lazyload';
+import '../hooks/useCartUI.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
 import { RenderIf, template } from '../helpers/render.js';
 import '../helpers/convert.js';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';

package/dist/esm/components/RenderCustomCode.js

@@ -9,6 +9,8 @@ import 'swr/mutation';
 import { useEditorMode } from '../hooks/shop.js';
 import 'vanilla-lazyload';
 import '../hooks/useCartUI.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
 import '../helpers/convert.js';
 
 const RenderCustomCode = ({ uid, advanced })=>{

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

@@ -0,0 +1,122 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useMemo, useRef, useState } from 'react';
+import { ThemeSectionTooltip } from './ThemeSectionTooltip.js';
+import 'zustand';
+import { useShopStore } from '../../contexts/ShopContext.js';
+import '@gem-sdk/adapter-shopify';
+import 'swr';
+import 'swr/mutation';
+import 'vanilla-lazyload';
+import '../../hooks/useCartUI.js';
+import '../../helpers/convert.js';
+
+const SHOW_TOOLTIP_TIMEOUT = 600;
+const LIMIT_PLANS = [
+    'trial',
+    'trial2022'
+];
+const CreateThemeSection = ({ ...props })=>{
+    const isThemeSection = props.isThemeSection;
+    const shopPlan = useShopStore((s)=>s.plan);
+    const createThemeSectionCount = useShopStore((s)=>s.createThemeSectionCount);
+    const isLimit = LIMIT_PLANS.includes(shopPlan ?? '');
+    const isRenderTooltip = useMemo(()=>{
+        return createThemeSectionCount === undefined || createThemeSectionCount < 100;
+    }, [
+        createThemeSectionCount
+    ]);
+    const isRenderCreateThemeSection = useMemo(()=>{
+        return props.tag === 'Section' && !isThemeSection;
+    }, [
+        props.tag,
+        isThemeSection
+    ]);
+    const timeoutRef = useRef();
+    const [isShowTooltip, setIsShowTooltip] = useState(false);
+    const showTooltip = ()=>{
+        if (!isRenderTooltip) return;
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(()=>{
+            setIsShowTooltip(true);
+        }, SHOW_TOOLTIP_TIMEOUT);
+    };
+    const hideTooltip = ()=>{
+        if (!isRenderTooltip) return;
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        setIsShowTooltip(false);
+    };
+    const onActions = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        isLimit ? onUpgrade() : onCreate();
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        setIsShowTooltip(false);
+        return false;
+    };
+    const onUpgrade = ()=>{
+        const eventUpgrade = new CustomEvent('editor:toolbar:upgrade', {
+            bubbles: true
+        });
+        window.dispatchEvent(eventUpgrade);
+    };
+    const onCreate = ()=>{
+        const eventCreate = new CustomEvent('editor:toolbar:create-theme-section', {
+            bubbles: true,
+            detail: {
+                componentUid: props.uid
+            }
+        });
+        window.dispatchEvent(eventCreate);
+    };
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsxs(ThemeSectionTooltip, {
+            isLimit: isLimit,
+            isShow: isShowTooltip,
+            isRender: isRenderTooltip,
+            onActions: onActions,
+            onMouseEnter: showTooltip,
+            onMouseLeave: hideTooltip,
+            children: [
+                isRenderCreateThemeSection && isRenderTooltip && /*#__PURE__*/ jsx("div", {
+                    "data-toolbar-create-theme-section": true,
+                    children: "You can create reusable sections"
+                }),
+                isRenderCreateThemeSection && /*#__PURE__*/ jsx("div", {
+                    "data-toolbar-active-create-theme-section-wrapper": true,
+                    children: /*#__PURE__*/ jsxs("div", {
+                        "data-toolbar-active-create-theme-section": true,
+                        onClick: (e)=>onActions(e),
+                        "aria-hidden": "true",
+                        children: [
+                            /*#__PURE__*/ jsxs("svg", {
+                                width: "16",
+                                height: "16",
+                                viewBox: "0 0 16 16",
+                                fill: "none",
+                                children: [
+                                    /*#__PURE__*/ jsx("path", {
+                                        d: "M1 2C1 1.44772 1.44772 1 2 1H6C6.55228 1 7 1.44772 7 2V6C7 6.55228 6.55228 7 6 7H2C1.44772 7 1 6.55228 1 6V2Z",
+                                        fill: "#F9F9F9"
+                                    }),
+                                    /*#__PURE__*/ jsx("path", {
+                                        d: "M9 10C9 9.44772 9.44772 9 10 9H14C14.5523 9 15 9.44772 15 10V14C15 14.5523 14.5523 15 14 15H10C9.44772 15 9 14.5523 9 14V10Z",
+                                        fill: "#F9F9F9"
+                                    }),
+                                    /*#__PURE__*/ jsx("path", {
+                                        d: "M2 9C1.44772 9 1 9.44772 1 10V14C1 14.5523 1.44772 15 2 15H6C6.55228 15 7 14.5523 7 14V10C7 9.44772 6.55228 9 6 9H2Z",
+                                        fill: "#F9F9F9"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx("p", {
+                                children: "Create Theme section"
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+
+export { CreateThemeSection };

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

@@ -0,0 +1,93 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { Transition } from 'react-transition-group';
+import { cls } from '@gem-sdk/core';
+
+const TRANSITION_DURATION = 350;
+const defaultStyles = {
+    transition: `all ${TRANSITION_DURATION}ms ease-out`,
+    opacity: 0
+};
+const transitions = {
+    entering: {
+        opacity: 1
+    },
+    entered: {
+        opacity: 1
+    },
+    exiting: {
+        opacity: 0
+    },
+    exited: {
+        opacity: 0
+    },
+    unmounted: {
+        opacity: 0
+    }
+};
+const ThemeSectionTooltip = ({ isShow, isLimit, isRender, children, onMouseEnter, onMouseLeave, onActions })=>{
+    const nodeRef = useRef(null);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "theme-section-tooltip-wrapper",
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave,
+            children: [
+                children,
+                isRender && /*#__PURE__*/ jsx(Transition, {
+                    in: isShow,
+                    timeout: TRANSITION_DURATION,
+                    nodeRef: nodeRef,
+                    unmountOnExit: true,
+                    children: (state)=>/*#__PURE__*/ jsxs("div", {
+                            className: "theme-section-tooltip",
+                            ref: nodeRef,
+                            style: {
+                                ...defaultStyles,
+                                ...transitions[state]
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "theme-section-tooltip__image",
+                                    children: /*#__PURE__*/ jsx("img", {
+                                        src: "https://ucarecdn.com/6a9f408a-aa8c-434a-890b-81067a14aceb/-/format/auto/-/preview/1920x1920/-/quality/lighter/theme-section-illustration.png",
+                                        alt: ""
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "theme-section-tooltip__body",
+                                    children: [
+                                        /*#__PURE__*/ jsx("div", {
+                                            className: "theme-section-tooltip__body-title",
+                                            children: "Create once, use everywhere with Theme section"
+                                        }),
+                                        /*#__PURE__*/ jsx("div", {
+                                            className: "theme-section-tooltip__body-desc",
+                                            children: "A global section that can be used on all your GemPages & pages."
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: cls('theme-section-tooltip__action', {
+                                        'theme-section-tooltip__action-limit': isLimit
+                                    }),
+                                    children: [
+                                        /*#__PURE__*/ jsx("button", {
+                                            onClick: (e)=>onActions(e),
+                                            children: isLimit ? 'Upgrade to create Theme section' : 'Create theme section'
+                                        }),
+                                        isLimit && /*#__PURE__*/ jsx("div", {
+                                            className: "theme-section-tooltip__action-learn-more",
+                                            children: "Learn more about Theme section"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                })
+            ]
+        })
+    });
+};
+
+export { ThemeSectionTooltip };

package/dist/esm/contexts/BuilderPreviewContext.js

@@ -26,9 +26,10 @@ const root = {
     label: 'Root',
     childrens: []
 };
-const createBuilderPreviewProvider = (args)=>createStore((set, get)=>({
+const createBuilderPreviewProvider = (args, isEditThemeSection)=>createStore((set, get)=>({
             state: args,
             loaded: false,
+            isEditThemeSection: !!isEditThemeSection,
             addItem: (args)=>{
                 const { position, data } = args;
                 const state = get().state;
@@ -388,14 +389,33 @@ const createBuilderPreviewProvider = (args)=>createStore((set, get)=>({
                         ROOT: cloneDeep(ROOT)
                     }
                 });
+            },
+            getParents: (id, limit)=>{
+                const state = get().state;
+                const parents = [];
+                let index = 0;
+                let currentId = id;
+                // eslint-disable-next-line no-constant-condition
+                while(true){
+                    if (limit && index >= limit) break;
+                    const parent = Object.entries(state).find(([, value])=>value.type !== 'section' && value.childrens?.includes(currentId));
+                    if (!parent) break;
+                    const [, parentItem] = parent;
+                    if (!parentItem) break;
+                    parents.push(parentItem);
+                    currentId = parentItem.uid;
+                    index++;
+                }
+                return parents;
             }
         }));
-const BuilderPreviewProvider = ({ children, state, lazy, ...passProps })=>{
+const BuilderPreviewProvider = ({ children, state, isEditThemeSection, lazy, ...passProps })=>{
     const Component = lazy ? Suspense : Fragment;
     const value = useMemo(()=>{
-        return createBuilderPreviewProvider(state);
+        return createBuilderPreviewProvider(state, isEditThemeSection);
     }, [
-        state
+        state,
+        isEditThemeSection
     ]);
     return /*#__PURE__*/ jsx(Component, {
         children: /*#__PURE__*/ jsx(BuilderPreviewContext.Provider, {

package/dist/esm/contexts/ShopContext.js

@@ -35,6 +35,16 @@ const createShopStoreProvider = (data)=>createStore((set)=>({
                     storefrontUrl: url,
                     storefrontToken: token
                 });
+            },
+            changeCreateThemeSectionCount: (count)=>{
+                set({
+                    createThemeSectionCount: count
+                });
+            },
+            changeShopPlan: (plan)=>{
+                set({
+                    plan
+                });
             }
         }));
 const ShopProvider = ({ children, addons, storeOption, queryOption, ...passProps })=>{

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

@@ -0,0 +1,9 @@
+import { Children } from 'react';
+import { ComponentToolbarPreview } from '../components/ComponentToolbarPreview.js';
+
+const filterToolbarPreview = (children, keep = false)=>{
+    const arrChild = Children.toArray(children);
+    return arrChild.filter((child)=>!keep ? child?.type != ComponentToolbarPreview : child?.type == ComponentToolbarPreview);
+};
+
+export { filterToolbarPreview as default, filterToolbarPreview };

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

@@ -1,7 +1,10 @@
-import { Children } from 'react';
+import { Children, isValidElement } from 'react';
+import { ComponentToolbarPreview } from '../components/ComponentToolbarPreview.js';
 
 const isEmptyChildren = (children)=>{
-    return Children.count(children) < 1 || !children;
+    let arrChild = Children.toArray(children);
+    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview && isValidElement(child));
+    return Children.count(arrChild) < 1 || !children;
 };
 
 export { isEmptyChildren as default, isEmptyChildren };

package/dist/esm/hooks/useProduct.js

@@ -1,10 +1,18 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useProductStore } from '../contexts/ProductContext.js';
 import { flattenConnection } from '../helpers/flatten-connection.js';
+import 'react/jsx-runtime';
+import 'zustand';
 import 'swr';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import 'vanilla-lazyload';
+import './useCartUI.js';
+import { checkInStock } from '../helpers/variant.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
 import { getSelectedVariant } from '../helpers/product.js';
 import '../helpers/convert.js';
-import { checkInStock } from '../helpers/variant.js';
 
 const useUniqProductID = ()=>{
     return useProductStore((s)=>s.uiqueId);

package/dist/esm/index.js

@@ -30,6 +30,7 @@ export { default as globalEvent } from './helpers/GlobalEvent.js';
 export { default as isBrowser } from './helpers/is-browser.js';
 export { default as isSafari } from './helpers/is-safari.js';
 export { isEmptyChildren } from './helpers/is-empty-children.js';
+export { filterToolbarPreview } from './helpers/filter-toolbar-preview.js';
 export { makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
 export { normalizeBuilderData } from './helpers/normalize-builder-data.js';
 export { prefetchQueries } from './helpers/prefetch-queries.js';

package/dist/types/index.d.ts

@@ -37,12 +37,16 @@ type BlockEntity = {
     styles?: Record<string, any>;
     editorConfigs?: Record<string, any>;
     type?: 'component';
+    name?: string;
+    isThemeSection?: boolean;
 };
 type SectionEntity = {
     uid: string;
     tag?: string;
     label?: string;
     type: 'section';
+    name?: string;
+    isThemeSection?: boolean;
 };
 type BuilderEntity = BlockEntity | SectionEntity;
 type BuilderEntityNested = Omit<BlockEntity, 'childrens'> & {
@@ -7305,6 +7309,7 @@ declare const useBuilderStore: <U>(selector: (state: ExtractState<StoreApi<Build
 type BuilderPreviewContextProps = {
     state: BuilderState;
     loaded?: boolean;
+    isEditThemeSection?: boolean;
     addItem: (args: {
         data: BuilderEntityNested | BuilderEntityNested[];
         type?: 'component' | 'section';
@@ -7325,11 +7330,13 @@ type BuilderPreviewContextProps = {
     removeItem: (id: string) => void;
     forceChangeState: (data: BuilderState) => void;
     initState: (data: BuilderEntityNested | BuilderEntityNested[]) => void;
+    getParents: (id: string, limit?: number) => BuilderEntity[];
 };
 type BuilderPreviewProviderProps = Pick<BuilderPreviewContextProps, 'state'> & {
     children: React.ReactNode;
     lazy?: boolean;
     priority?: boolean;
+    isEditThemeSection?: boolean;
 };
 declare const BuilderPreviewProvider: React.FC<BuilderPreviewProviderProps>;
 declare const useBuilderPreviewStore: <U>(selector: (state: ExtractState<StoreApi<BuilderPreviewContextProps>>) => U, equalityFn?: ((a: U, b: U) => boolean) | undefined) => U;
@@ -7509,6 +7516,8 @@ type ShopContextProps = {
     mobileOnly?: boolean;
     swatches?: GlobalSwatchesData[];
     isStorefront?: boolean;
+    createThemeSectionCount?: number;
+    plan?: string;
     changeLocale: (locale: string) => void;
     changeStorefrontInfo: (args: {
         url?: string;
@@ -7517,6 +7526,8 @@ type ShopContextProps = {
     changeCurrency: (currency: string) => void;
     changeSwatches: (swatches: GlobalSwatchesData[]) => void;
     changeLayoutSettings: (layoutSettings: LayoutSettings) => void;
+    changeCreateThemeSectionCount: (count: number) => void;
+    changeShopPlan: (plan: string) => void;
 };
 type ShopProviderProps = {
     children: React.ReactNode;
@@ -7814,6 +7825,8 @@ declare function isSafari(): boolean;
 
 declare const isEmptyChildren: (children: React.ReactNode) => boolean;
 
+declare const filterToolbarPreview: (children: React.ReactNode, keep?: boolean) => React.ReactNode;
+
 type ResponsiveKey<T extends ShortHandProperty> = `--${T}` | `--${T}-tablet` | `--${T}-mobile`;
 declare const removeNullUndefined: <T extends Record<string, any>>(obj: T) => T;
 declare const makeStyle: <T extends ShortHandProperty, K>(style: Record<T, K>) => {
@@ -9692,11 +9705,11 @@ declare const useSelectedOption: () => {
     forceSelectedOption: (selectedOption?: Record<string, string>, productId?: Maybe<string>, noEmit?: boolean) => void;
 };
 declare const useVariants: () => Maybe<Pick<ProductVariant, "title" | "width" | "length" | "weight" | "height" | "id" | "baseID" | "platform" | "sku" | "barcode" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "price" | "salePrice" | "soldIndividually"> & {
-    selectedOptions: Pick<SelectedOption, "value" | "name" | "optionType">[];
+    selectedOptions: Pick<SelectedOption, "name" | "value" | "optionType">[];
     media?: Maybe<Pick<Media, "width" | "height" | "id" | "src" | "alt" | "contentType" | "previewImage">>;
 }>[];
 declare const useVariant: (id: string) => Maybe<Pick<ProductVariant, "title" | "width" | "length" | "weight" | "height" | "id" | "baseID" | "platform" | "sku" | "barcode" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "price" | "salePrice" | "soldIndividually"> & {
-    selectedOptions: Pick<SelectedOption, "value" | "name" | "optionType">[];
+    selectedOptions: Pick<SelectedOption, "name" | "value" | "optionType">[];
     media?: Maybe<Pick<Media, "width" | "height" | "id" | "src" | "alt" | "contentType" | "previewImage">>;
 }>;
 declare const useCurrentVariant: () => Maybe<VariantSelectFragment>;
@@ -9745,4 +9758,4 @@ type PublishedThemePageSelectFragment = Pick<PublishedThemePage, 'id' | 'name' |
 
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
 
-export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, 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, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageContext, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, 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, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, VariantSelectFragment, VitalsWidgetType, WiserWidgetType, WrapRenderChildren, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertOldLayout, dataStringify, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeNullUndefined, 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, 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, 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, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageContext, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, 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, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, VariantSelectFragment, VitalsWidgetType, WiserWidgetType, WrapRenderChildren, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertOldLayout, dataStringify, fetchMedias, fetchVariants, filterToolbarPreview, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeNullUndefined, 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, 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.22.21",
+  "version": "1.22.31-new-feature.2",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -24,8 +24,8 @@
     "type-check": "yarn tsc --noEmit"
   },
   "devDependencies": {
-    "@gem-sdk/adapter-shopify": "1.12.0",
-    "@gem-sdk/styles": "1.22.9"
+    "@gem-sdk/adapter-shopify": "1.22.31-staging.0",
+    "@gem-sdk/styles": "1.22.31-new-feature.2"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",