@gem-sdk/core 1.22.1 → 1.22.4

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
                 });

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/helpers/queries/get-products.js

@@ -4,11 +4,12 @@ var products_generated = require('../../graphql/queries/products.generated.js');
 var getCollection = require('./get-collection.js');
 var getProduct = require('./get-product.js');
 
-const getProducts = async (fetcher, { ids, isSample, isStorefront })=>{
+const getProducts = async (fetcher, { ids, isSample, isStorefront, defaultSelectedProductCount })=>{
     const products = await loopFetchProducts(fetcher, {
         ids,
         isSample,
-        isStorefront
+        isStorefront,
+        defaultSelectedProductCount
     });
     if (!products) {
         throw new Error('Product not found');
@@ -61,8 +62,9 @@ const fetchProducts = async (fetcher, variables)=>{
         variables
     ]);
 };
-const loopFetchProducts = async (fetcher, { ids, isSample, isStorefront })=>{
-    const numberOfProducts = (ids?.length == 0 ? 4 : ids?.length) ?? 4;
+const loopFetchProducts = async (fetcher, { ids, isSample, isStorefront, defaultSelectedProductCount })=>{
+    const defaultNumberOfProducts = defaultSelectedProductCount || 4;
+    const numberOfProducts = (ids?.length == 0 ? defaultNumberOfProducts : ids?.length) ?? defaultNumberOfProducts;
     const productsPerPage = 8; // number of products per page
     let variables; // variables of collection query
     let productAfterFetcher; // product after of collection query

package/dist/cjs/hooks/shop/use-products-query.js

@@ -6,14 +6,15 @@ var query = require('../../helpers/query.js');
 var shop = require('../shop.js');
 var useFetchHandle = require('../useFetchHandle.js');
 
-const useProductsQuery = (ids, options)=>{
+const useProductsQuery = (ids, options, defaultSelectedProductCount)=>{
     const fetcher = useFetchHandle.useFetchHandle();
     const isSample = shop.useIsSampleProduct();
     const isStorefront = shop.useIsStorefrontProduct();
     return useSWR(ids ? query.generateProductsQueryKey({
         ids,
         isSample,
-        isStorefront
+        isStorefront,
+        defaultSelectedProductCount
     }) : null, async ([, arg])=>{
         return getProducts.getProducts(fetcher, arg);
     }, options);

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
                 });

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/helpers/queries/get-products.js

@@ -2,11 +2,12 @@ import { ProductsDocument } from '../../graphql/queries/products.generated.js';
 import { calculateFirstProduct } from './get-collection.js';
 import { fetchVariants, fetchMedias } from './get-product.js';
 
-const getProducts = async (fetcher, { ids, isSample, isStorefront })=>{
+const getProducts = async (fetcher, { ids, isSample, isStorefront, defaultSelectedProductCount })=>{
     const products = await loopFetchProducts(fetcher, {
         ids,
         isSample,
-        isStorefront
+        isStorefront,
+        defaultSelectedProductCount
     });
     if (!products) {
         throw new Error('Product not found');
@@ -59,8 +60,9 @@ const fetchProducts = async (fetcher, variables)=>{
         variables
     ]);
 };
-const loopFetchProducts = async (fetcher, { ids, isSample, isStorefront })=>{
-    const numberOfProducts = (ids?.length == 0 ? 4 : ids?.length) ?? 4;
+const loopFetchProducts = async (fetcher, { ids, isSample, isStorefront, defaultSelectedProductCount })=>{
+    const defaultNumberOfProducts = defaultSelectedProductCount || 4;
+    const numberOfProducts = (ids?.length == 0 ? defaultNumberOfProducts : ids?.length) ?? defaultNumberOfProducts;
     const productsPerPage = 8; // number of products per page
     let variables; // variables of collection query
     let productAfterFetcher; // product after of collection query

package/dist/esm/hooks/shop/use-products-query.js

@@ -4,14 +4,15 @@ import { generateProductsQueryKey } from '../../helpers/query.js';
 import { useIsSampleProduct, useIsStorefrontProduct } from '../shop.js';
 import { useFetchHandle } from '../useFetchHandle.js';
 
-const useProductsQuery = (ids, options)=>{
+const useProductsQuery = (ids, options, defaultSelectedProductCount)=>{
     const fetcher = useFetchHandle();
     const isSample = useIsSampleProduct();
     const isStorefront = useIsStorefrontProduct();
     return useSWR(ids ? generateProductsQueryKey({
         ids,
         isSample,
-        isStorefront
+        isStorefront,
+        defaultSelectedProductCount
     }) : null, async ([, arg])=>{
         return getProducts(fetcher, arg);
     }, options);

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;
@@ -9465,6 +9474,7 @@ type FetchProductsParams = {
     ids: string[];
     isSample?: boolean;
     isStorefront?: boolean;
+    defaultSelectedProductCount?: number;
 };
 
 declare const generateProductQueryKey: (args: FetchProductParams) => ['query/product', FetchProductParams];
@@ -9553,7 +9563,7 @@ declare const useCollectionsQuery: (variable: CollectionsQueryVariables, options
 
 declare const useProductQuery: (productId?: string, options?: SWRConfiguration<ProductSelectFragment>) => swr__internal.SWRResponse<ProductSelectFragment, any, Partial<swr__internal.PublicConfiguration<ProductSelectFragment, any, (arg: ["query/product", FetchProductParams]) => swr__internal.FetcherResponse<ProductSelectFragment>>> | undefined>;
 
-declare const useProductsQuery: (ids?: string[], options?: SWRConfiguration<ProductsQueryResponse>) => swr__internal.SWRResponse<ProductsQueryResponse, any, Partial<swr__internal.PublicConfiguration<ProductsQueryResponse, any, (arg: ["query/products", FetchProductsParams]) => swr__internal.FetcherResponse<ProductsQueryResponse>>> | undefined>;
+declare const useProductsQuery: (ids?: string[], options?: SWRConfiguration<ProductsQueryResponse>, defaultSelectedProductCount?: number) => swr__internal.SWRResponse<ProductsQueryResponse, any, Partial<swr__internal.PublicConfiguration<ProductsQueryResponse, any, (arg: ["query/products", FetchProductsParams]) => swr__internal.FetcherResponse<ProductsQueryResponse>>> | undefined>;
 
 declare const useCurrentDevice: () => NameDevices;
 
@@ -9695,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'>>>>;
@@ -9706,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.1",
+  "version": "1.22.4",
   "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.4"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",