@gem-sdk/core 1.22.2 → 1.22.12

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -61,6 +61,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                     advanced: advanced
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx(children.type, {
+                    className: advanced?.cssClass,
                     ...children.props,
                     style,
                     builderAttrs,
@@ -78,7 +79,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 style: style,
-                className: `${props.uid}`,
+                className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
                 ...builderAttrs,
                 children: children
             })

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

@@ -101,6 +101,9 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, ...passPr
                     },
                     styles: item.styles,
                     setting: item.settings,
+                    advanced: {
+                        cssClass: item?.advanced?.cssClass
+                    },
                     ...passProps,
                     rawChildren: item.childrens.map((id)=>{
                         return {
@@ -130,6 +133,9 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, ...passPr
                     },
                     styles: item.styles,
                     setting: item.settings,
+                    advanced: {
+                        cssClass: item?.advanced?.cssClass
+                    },
                     isText: componentTexts.includes(item.tag) ? true : null,
                     ...passProps
                 });
@@ -183,7 +189,7 @@ const RenderChildren = (props)=>{
     if (Math.ceil(size / 1024) >= 180) {
         const fileName = `gp-section-snippet-${props.uid}`;
         props.customProps.extraFiles[fileName] = data.liquid;
-        return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id  %}`;
+        return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`;
     }
     return data.liquid;
 };
@@ -200,7 +206,7 @@ const WrapRenderChildren = ({ uid, customProps }, codes)=>{
                 if (Math.ceil(size / 1024) >= 180) {
                     const fileName = `gp-section-snippet-${uid + i}`;
                     customProps.extraFiles[fileName] = code;
-                    liquid += `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id  %}`;
+                    liquid += `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`;
                 } else {
                     liquid += code;
                 }

package/dist/cjs/components/src/product/helpers/variant-presets.js

@@ -0,0 +1,56 @@
+'use strict';
+
+const colorPreset = {
+    black: '#000000',
+    white: '#FFFFFF',
+    gray: '#808080',
+    red: '#FF0000',
+    blue: '#0000FF',
+    green: '#008000',
+    yellow: '#FFFF00',
+    orange: '#FFA500',
+    pink: '#FFC0CB',
+    purple: '#800080',
+    brown: '#A52A2A',
+    cyan: '#00FFFF',
+    magenta: '#FF00FF',
+    teal: '#008080',
+    navy: '#000080',
+    maroon: '#800000',
+    gold: '#FFD700',
+    silver: '#C0C0C0',
+    beige: '#F5F5DC',
+    ivory: '#FFFFF0',
+    lavender: '#E6E6FA',
+    indigo: '#4B0082',
+    coral: '#FF7F50',
+    mint: '#98FF98',
+    'sky blue': '#87CEEB',
+    salmon: '#FA8072',
+    olive: '#808000',
+    lilac: '#C8A2C8',
+    peach: '#FFDAB9',
+    turquoise: '#40E0D0',
+    ruby: '#E0115F',
+    bronze: '#CD7F32',
+    slate: '#708090',
+    charcoal: '#36454F',
+    sand: '#C2B280',
+    mauve: '#E0B0FF',
+    tangerine: '#FF4500',
+    'mint green': '#00FF99',
+    'forest green': '#228B22',
+    'ruby red': '#9B111E',
+    marigold: '#FFB928',
+    eggplant: '#990066',
+    'coral pink': '#F88379',
+    mustard: '#FFDB58',
+    'sky gray': '#B0C4DE',
+    'dusty rose': '#FF9BAE',
+    'olive green': '#556B2F',
+    coffee: '#6F4E37',
+    'lilac gray': '#C8A2C8',
+    'steel blue': '#4682B4'
+};
+
+exports.colorPreset = colorPreset;

package/dist/cjs/graphql/queries/product-value-label.generated.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const ProductOptionNameDocument = `
+  query productOptionName($limit: Int, $offset: Int) {
+    productOptionName(
+      limit: $limit,
+      offset: $offset
+    )
+  }`;
+
+exports.ProductOptionNameDocument = ProductOptionNameDocument;

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

@@ -58,6 +58,7 @@ function composeAdvanceStyle(data, tag) {
     ];
     Object.keys(data).forEach((attr)=>{
         const value = data[attr];
+        if (attr === 'cssClass') return;
         if (value === undefined || value === null) return;
         const hasBoxShadow = data.hasBoxShadow ? data.hasBoxShadow : {};
         if (typeof value === 'object') {

package/dist/cjs/hooks/useInitialSwatchesOptions.js

@@ -0,0 +1,111 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useSWR = require('swr');
+var productValueLabel_generated = require('../graphql/queries/product-value-label.generated.js');
+var variantPresets = require('../components/src/product/helpers/variant-presets.js');
+var shop = require('./shop.js');
+var useFetchHandle = require('./useFetchHandle.js');
+var ShopContext = require('../contexts/ShopContext.js');
+
+let swatchChange = false;
+let colorChange = false;
+const useInitialSwatchesOptions = (options)=>{
+    const fetcher = useFetchHandle.useFetchHandle();
+    const changeSwatches = ShopContext.useShopStore((s)=>s.changeSwatches);
+    const { swatches } = shop.useSwatches();
+    const { data: productOptionName } = useSWR([
+        '/query/productOptionName',
+        {}
+    ], async ()=>fetchProductValueLabel(fetcher), {
+        revalidateOnMount: true
+    });
+    const swatchesTitleList = [];
+    swatches?.forEach((el)=>{
+        swatchesTitleList.push(el.optionTitle);
+    });
+    productOptionName?.productOptionName?.forEach((el)=>{
+        if (!swatchesTitleList.includes(el)) {
+            swatchChange = true;
+            swatches?.push({
+                optionTitle: el,
+                optionType: 'rectangle_list',
+                optionValues: []
+            });
+        }
+    });
+    if (!options) return [];
+    setDefaultSwatches(swatches, options);
+    if (swatches?.length && (swatchChange || colorChange)) {
+        window?.parent?.postMessage?.(JSON.stringify({
+            type: 'update-swatches',
+            swatches
+        }), '*');
+        changeSwatches(swatches);
+    }
+};
+const getColorDefault = (label, color)=>{
+    const colorByLabel = label ? variantPresets.colorPreset[label.toLocaleLowerCase()] : undefined;
+    const colorArray = colorByLabel ? [
+        colorByLabel
+    ] : [];
+    const firstColor = color?.[0];
+    if (!firstColor && colorArray.length) colorChange = true;
+    return firstColor ? [
+        firstColor
+    ] : colorArray;
+};
+const getProductOptionsLabelByName = (options, name)=>{
+    const labels = [];
+    const optionByName = options.find((op)=>op.name === name);
+    optionByName?.values.forEach((val)=>{
+        labels.push(val.label ?? '');
+    });
+    return labels;
+};
+const getSwatchesOptionsLabel = (options)=>{
+    const labels = [];
+    options.forEach((op)=>{
+        labels.push(op.label ?? '');
+        return;
+    });
+    return labels;
+};
+const setDefaultSwatches = (swatches, options)=>{
+    if (swatches) {
+        swatches?.map((sw)=>{
+            const productLabels = getProductOptionsLabelByName(options, sw.optionTitle);
+            const swLabels = getSwatchesOptionsLabel(sw.optionValues);
+            productLabels.forEach((label)=>{
+                if (!swLabels.includes(label)) {
+                    sw.optionValues.push({
+                        label,
+                        colors: getColorDefault(label),
+                        imageUrl: ''
+                    });
+                }
+            });
+            sw.optionValues.map((op)=>{
+                return {
+                    ...op,
+                    colors: getColorDefault(op.label, op.colors)
+                };
+            });
+        });
+    }
+    return swatches;
+};
+const fetchProductValueLabel = async (fetcher)=>{
+    const initVariables = {};
+    const query = async (variables)=>{
+        const response = await fetcher([
+            productValueLabel_generated.ProductOptionNameDocument,
+            variables
+        ]);
+        return response;
+    };
+    return query(initVariables);
+};
+
+exports.default = useInitialSwatchesOptions;

package/dist/cjs/index.js

@@ -83,6 +83,7 @@ var useProduct = require('./hooks/useProduct.js');
 var useProductList = require('./hooks/useProductList.js');
 var useSuspenseFetch = require('./hooks/useSuspenseFetch.js');
 var useSwatchesOptions = require('./hooks/useSwatchesOptions.js');
+var useInitialSwatchesOptions = require('./hooks/useInitialSwatchesOptions.js');
 var shop$1 = require('./types/shop.js');
 var globalStyle = require('./types/global-style.js');
 var getCollection = require('./helpers/queries/get-collection.js');
@@ -283,6 +284,7 @@ exports.useProductListSettings = useProductList.useProductListSettings;
 exports.useProductListStyles = useProductList.useProductListStyles;
 exports.useSuspenseFetch = useSuspenseFetch.default;
 exports.useSwatchesOptions = useSwatchesOptions.default;
+exports.useInitialSwatchesOptions = useInitialSwatchesOptions.default;
 exports.ShopType = shop$1;
 exports.OptionNormalStyle = globalStyle.OptionNormalStyle;
 exports.OptionSpecialStyle = globalStyle.OptionSpecialStyle;

package/dist/esm/components/ComponentWrapperPreview.js

@@ -57,6 +57,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                     advanced: advanced
                 }),
                 /*#__PURE__*/ jsx(children.type, {
+                    className: advanced?.cssClass,
                     ...children.props,
                     style,
                     builderAttrs,
@@ -74,7 +75,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
             }),
             /*#__PURE__*/ jsx("div", {
                 style: style,
-                className: `${props.uid}`,
+                className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
                 ...builderAttrs,
                 children: children
             })

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

@@ -97,6 +97,9 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, ...passPr
                     },
                     styles: item.styles,
                     setting: item.settings,
+                    advanced: {
+                        cssClass: item?.advanced?.cssClass
+                    },
                     ...passProps,
                     rawChildren: item.childrens.map((id)=>{
                         return {
@@ -126,6 +129,9 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, ...passPr
                     },
                     styles: item.styles,
                     setting: item.settings,
+                    advanced: {
+                        cssClass: item?.advanced?.cssClass
+                    },
                     isText: componentTexts.includes(item.tag) ? true : null,
                     ...passProps
                 });
@@ -179,7 +185,7 @@ const RenderChildren = (props)=>{
     if (Math.ceil(size / 1024) >= 180) {
         const fileName = `gp-section-snippet-${props.uid}`;
         props.customProps.extraFiles[fileName] = data.liquid;
-        return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id  %}`;
+        return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`;
     }
     return data.liquid;
 };
@@ -196,7 +202,7 @@ const WrapRenderChildren = ({ uid, customProps }, codes)=>{
                 if (Math.ceil(size / 1024) >= 180) {
                     const fileName = `gp-section-snippet-${uid + i}`;
                     customProps.extraFiles[fileName] = code;
-                    liquid += `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id  %}`;
+                    liquid += `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`;
                 } else {
                     liquid += code;
                 }

package/dist/esm/components/src/product/helpers/variant-presets.js

@@ -0,0 +1,54 @@
+const colorPreset = {
+    black: '#000000',
+    white: '#FFFFFF',
+    gray: '#808080',
+    red: '#FF0000',
+    blue: '#0000FF',
+    green: '#008000',
+    yellow: '#FFFF00',
+    orange: '#FFA500',
+    pink: '#FFC0CB',
+    purple: '#800080',
+    brown: '#A52A2A',
+    cyan: '#00FFFF',
+    magenta: '#FF00FF',
+    teal: '#008080',
+    navy: '#000080',
+    maroon: '#800000',
+    gold: '#FFD700',
+    silver: '#C0C0C0',
+    beige: '#F5F5DC',
+    ivory: '#FFFFF0',
+    lavender: '#E6E6FA',
+    indigo: '#4B0082',
+    coral: '#FF7F50',
+    mint: '#98FF98',
+    'sky blue': '#87CEEB',
+    salmon: '#FA8072',
+    olive: '#808000',
+    lilac: '#C8A2C8',
+    peach: '#FFDAB9',
+    turquoise: '#40E0D0',
+    ruby: '#E0115F',
+    bronze: '#CD7F32',
+    slate: '#708090',
+    charcoal: '#36454F',
+    sand: '#C2B280',
+    mauve: '#E0B0FF',
+    tangerine: '#FF4500',
+    'mint green': '#00FF99',
+    'forest green': '#228B22',
+    'ruby red': '#9B111E',
+    marigold: '#FFB928',
+    eggplant: '#990066',
+    'coral pink': '#F88379',
+    mustard: '#FFDB58',
+    'sky gray': '#B0C4DE',
+    'dusty rose': '#FF9BAE',
+    'olive green': '#556B2F',
+    coffee: '#6F4E37',
+    'lilac gray': '#C8A2C8',
+    'steel blue': '#4682B4'
+};
+
+export { colorPreset };

package/dist/esm/graphql/queries/product-value-label.generated.js

@@ -0,0 +1,9 @@
+const ProductOptionNameDocument = `
+  query productOptionName($limit: Int, $offset: Int) {
+    productOptionName(
+      limit: $limit,
+      offset: $offset
+    )
+  }`;
+
+export { ProductOptionNameDocument };

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

@@ -56,6 +56,7 @@ function composeAdvanceStyle(data, tag) {
     ];
     Object.keys(data).forEach((attr)=>{
         const value = data[attr];
+        if (attr === 'cssClass') return;
         if (value === undefined || value === null) return;
         const hasBoxShadow = data.hasBoxShadow ? data.hasBoxShadow : {};
         if (typeof value === 'object') {

package/dist/esm/hooks/useInitialSwatchesOptions.js

@@ -0,0 +1,107 @@
+import useSWR from 'swr';
+import { ProductOptionNameDocument } from '../graphql/queries/product-value-label.generated.js';
+import { colorPreset } from '../components/src/product/helpers/variant-presets.js';
+import { useSwatches } from './shop.js';
+import { useFetchHandle } from './useFetchHandle.js';
+import { useShopStore } from '../contexts/ShopContext.js';
+
+let swatchChange = false;
+let colorChange = false;
+const useInitialSwatchesOptions = (options)=>{
+    const fetcher = useFetchHandle();
+    const changeSwatches = useShopStore((s)=>s.changeSwatches);
+    const { swatches } = useSwatches();
+    const { data: productOptionName } = useSWR([
+        '/query/productOptionName',
+        {}
+    ], async ()=>fetchProductValueLabel(fetcher), {
+        revalidateOnMount: true
+    });
+    const swatchesTitleList = [];
+    swatches?.forEach((el)=>{
+        swatchesTitleList.push(el.optionTitle);
+    });
+    productOptionName?.productOptionName?.forEach((el)=>{
+        if (!swatchesTitleList.includes(el)) {
+            swatchChange = true;
+            swatches?.push({
+                optionTitle: el,
+                optionType: 'rectangle_list',
+                optionValues: []
+            });
+        }
+    });
+    if (!options) return [];
+    setDefaultSwatches(swatches, options);
+    if (swatches?.length && (swatchChange || colorChange)) {
+        window?.parent?.postMessage?.(JSON.stringify({
+            type: 'update-swatches',
+            swatches
+        }), '*');
+        changeSwatches(swatches);
+    }
+};
+const getColorDefault = (label, color)=>{
+    const colorByLabel = label ? colorPreset[label.toLocaleLowerCase()] : undefined;
+    const colorArray = colorByLabel ? [
+        colorByLabel
+    ] : [];
+    const firstColor = color?.[0];
+    if (!firstColor && colorArray.length) colorChange = true;
+    return firstColor ? [
+        firstColor
+    ] : colorArray;
+};
+const getProductOptionsLabelByName = (options, name)=>{
+    const labels = [];
+    const optionByName = options.find((op)=>op.name === name);
+    optionByName?.values.forEach((val)=>{
+        labels.push(val.label ?? '');
+    });
+    return labels;
+};
+const getSwatchesOptionsLabel = (options)=>{
+    const labels = [];
+    options.forEach((op)=>{
+        labels.push(op.label ?? '');
+        return;
+    });
+    return labels;
+};
+const setDefaultSwatches = (swatches, options)=>{
+    if (swatches) {
+        swatches?.map((sw)=>{
+            const productLabels = getProductOptionsLabelByName(options, sw.optionTitle);
+            const swLabels = getSwatchesOptionsLabel(sw.optionValues);
+            productLabels.forEach((label)=>{
+                if (!swLabels.includes(label)) {
+                    sw.optionValues.push({
+                        label,
+                        colors: getColorDefault(label),
+                        imageUrl: ''
+                    });
+                }
+            });
+            sw.optionValues.map((op)=>{
+                return {
+                    ...op,
+                    colors: getColorDefault(op.label, op.colors)
+                };
+            });
+        });
+    }
+    return swatches;
+};
+const fetchProductValueLabel = async (fetcher)=>{
+    const initVariables = {};
+    const query = async (variables)=>{
+        const response = await fetcher([
+            ProductOptionNameDocument,
+            variables
+        ]);
+        return response;
+    };
+    return query(initVariables);
+};
+
+export { useInitialSwatchesOptions as default };

package/dist/esm/index.js

@@ -84,6 +84,7 @@ export { useCheckAvailableVariantInStock, useCurrentVariant, useCurrentVariantIn
 export { useProductList, useProductListProducts, useProductListSettings, useProductListStyles } from './hooks/useProductList.js';
 export { default as useSuspenseFetch } from './hooks/useSuspenseFetch.js';
 export { default as useSwatchesOptions } from './hooks/useSwatchesOptions.js';
+export { default as useInitialSwatchesOptions } from './hooks/useInitialSwatchesOptions.js';
 import * as shop from './types/shop.js';
 export { shop as ShopType };
 export { OptionNormalStyle, OptionSpecialStyle } from './types/global-style.js';

package/dist/types/index.d.ts

@@ -107,7 +107,7 @@ type Ratio$1 = {
 };
 type FlexDirectionProp = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 type TransformProp = 'default' | 'capitalize' | 'uppercase' | 'lowercase' | 'none';
-type BaseProps<Setting = unknown, Style = unknown, Advanced = unknown> = {
+type BaseProps<Setting = unknown, Style = unknown, Advanced = Record<string, any>> = {
     builderProps?: {
         /** Unique id of component */
         uid?: string;
@@ -117,7 +117,7 @@ type BaseProps<Setting = unknown, Style = unknown, Advanced = unknown> = {
     setting?: Setting;
     advanced?: Advanced;
 };
-type BasePropsWrap<S = unknown, Style = unknown, A = unknown> = BaseProps<S, Style, A> & {
+type BasePropsWrap<S = unknown, Style = unknown, A = Record<string, any>> = BaseProps<S, Style, A> & {
     builderAttrs?: Record<string, any>;
     style?: React.CSSProperties;
 };
@@ -203,6 +203,7 @@ type Mapped$5<K, T> = NonNullable<T> extends ObjectDevices<infer U> ? {
     };
     devices?: ResponsiveConfig<U>;
     emptyOnClear?: boolean;
+    showVideo?: boolean;
 } : {
     id: K;
     label?: string;
@@ -234,6 +235,7 @@ type Mapped$5<K, T> = NonNullable<T> extends ObjectDevices<infer U> ? {
         active?: boolean;
     };
     emptyOnClear?: boolean;
+    showVideo?: boolean;
     default?: T;
 };
 type SharedControlType<T> = {
@@ -641,7 +643,7 @@ type BackgroundControlType<T> = SharedControlType<T> & {
     value?: Background;
 };
 type Background = {
-    type: 'color' | 'image';
+    type: 'color' | 'image' | 'video';
     color?: string;
     image?: {
         src?: string;
@@ -653,6 +655,9 @@ type Background = {
     position?: BgPosition;
     repeat?: BgRepeat;
     attachment?: BgAttachment;
+    video?: string;
+    loop?: boolean;
+    lazyLoad?: boolean;
 };
 type BgSize = 'cover' | 'contain';
 type BgRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
@@ -793,6 +798,10 @@ type SwatchesLinkControlType<T> = SharedControlType<T> & {
     id?: string;
     type: 'swatchesLink';
 };
+type VariantSwatchesPresetControlType<T> = SharedControlType<T> & {
+    id?: string;
+    type: 'variant:presets';
+};
 
 type LayoutControlType<T> = SharedControlType<T> & {
     type: 'layout';
@@ -887,7 +896,7 @@ type StepsGuide<T> = {
     [K in keyof T]-?: Mapped<K, T[K]>;
 }[keyof T];
 
-type ControlProp<T> = AngleControlType<T> | CheckboxControlType<T> | ColorPickerControlType<T> | GroupControlType<T> | IconControlType<T> | InputFixContentControlType<T> | InputNumberControlType<T> | InputUnitControlType<T> | InputUnitSpacingControlType<T> | InputUnitWidthControlType<T> | InputControlType<T> | MarginControlType<T> | PaddingControlType<T> | PositionControlType<T> | RadioGroupControlType | RangeControlType<T> | SegmentControlType<T> | SelectControlType<T> | TextareaControlType<T> | ToggleControlType<T> | ImageControlType<T> | ChildrensControlType | GridControlType<T> | FlexControlType<T> | TextEditorControlType<T> | ProductControlType<T> | TypographyControlType<T> | TypographyV2ControlType<T> | MenuControlType<T> | BehaviorStateControlType<T> | PickLinkControlType<T> | BoxShadowControlType<T> | TextShadowControlType<T> | BorderControlType<T> | BorderRadiusControlType<T> | RadiusPresetControlType<T> | SizeControlType<T> | ChildItemType<T> | PickMultiProductControlType<T> | CollectionControlType<T> | BackgroundControlType<T> | VisibilityControlType<T> | SelectVariantControlType | CountdownEvergreenType | Timezone<T> | CustomContentControlType<T> | DateTimePickerControlType | CountdownDailyType | KlaviyoCodes | YotpoLoyaltyCodes | InputWidthControlType<T> | LayoutSegmentControlType<T> | InputSpacing<T> | UniqueIdControlType<T> | PositionSquareControlType<T> | CustomCodeEditor | LayoutControlType<T> | SwatchesLinkControlType<T> | ProductListControlType<T> | CollectionBannerControlType<T> | Ratio<T> | StickyDisplayControlType<T> | SyncProductPropertiesControlType<T> | StepsGuide<T>;
+type ControlProp<T> = AngleControlType<T> | CheckboxControlType<T> | ColorPickerControlType<T> | GroupControlType<T> | IconControlType<T> | InputFixContentControlType<T> | InputNumberControlType<T> | InputUnitControlType<T> | InputUnitSpacingControlType<T> | InputUnitWidthControlType<T> | InputControlType<T> | MarginControlType<T> | PaddingControlType<T> | PositionControlType<T> | RadioGroupControlType | RangeControlType<T> | SegmentControlType<T> | SelectControlType<T> | TextareaControlType<T> | ToggleControlType<T> | ImageControlType<T> | ChildrensControlType | GridControlType<T> | FlexControlType<T> | TextEditorControlType<T> | ProductControlType<T> | TypographyControlType<T> | TypographyV2ControlType<T> | MenuControlType<T> | BehaviorStateControlType<T> | PickLinkControlType<T> | BoxShadowControlType<T> | TextShadowControlType<T> | BorderControlType<T> | BorderRadiusControlType<T> | RadiusPresetControlType<T> | SizeControlType<T> | ChildItemType<T> | PickMultiProductControlType<T> | CollectionControlType<T> | BackgroundControlType<T> | VisibilityControlType<T> | SelectVariantControlType | CountdownEvergreenType | Timezone<T> | CustomContentControlType<T> | DateTimePickerControlType | CountdownDailyType | KlaviyoCodes | YotpoLoyaltyCodes | InputWidthControlType<T> | LayoutSegmentControlType<T> | InputSpacing<T> | UniqueIdControlType<T> | PositionSquareControlType<T> | CustomCodeEditor | LayoutControlType<T> | SwatchesLinkControlType<T> | VariantSwatchesPresetControlType<T> | ProductListControlType<T> | CollectionBannerControlType<T> | Ratio<T> | StickyDisplayControlType<T> | SyncProductPropertiesControlType<T> | StepsGuide<T>;
 type Setting<P extends BaseProps> = {
     id: 'setting';
     note?: string;
@@ -9696,6 +9705,8 @@ declare const useSuspenseFetch: <T>(key: string | any[], promise: () => Promise<
 
 declare const useSwatchesOptions: (options?: ProductOption[]) => ProductOption[];
 
+declare const useInitialSwatchesOptions: (options?: ProductOption[]) => never[] | undefined;
+
 type PublishedThemePageSelectFragment = Pick<PublishedThemePage, 'id' | 'name' | 'handle' | 'isMobile' | 'sectionPosition'> & {
     pageSections?: Maybe<Array<Maybe<Pick<PublishedPageSection, 'cid' | 'component' | 'id'>>>>;
     themePageCustomSections?: Maybe<Array<Maybe<Pick<PublishedCustomSection, 'cid' | 'component' | 'id' | 'type'>>>>;
@@ -9707,4 +9718,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, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, 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, 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, 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, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, 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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.22.2",
+  "version": "1.22.12",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@gem-sdk/adapter-shopify": "1.12.0",
-    "@gem-sdk/styles": "1.21.8"
+    "@gem-sdk/styles": "1.22.9"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",