@gem-sdk/components 2.0.0-staging.128 → 2.0.1

package/dist/esm/product/components/ProductNotFoundRelated.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const ProductNotFoundRelated = ({ assignProductNoTags, relatedTagString, noAssignedProduct })=>{
+    const openAssignProduct = ()=>{
+        const event = new CustomEvent('editor:toolbar:open-assigned-product', {
+            bubbles: true
+        });
+        window.dispatchEvent(event);
+    };
+    const changeConditionRelatedProduct = ()=>{
+        const event = new CustomEvent('editor:toolbar:change-condition-related-product', {
+            bubbles: true
+        });
+        window.dispatchEvent(event);
+    };
+    return /*#__PURE__*/ jsx("div", {
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "gp-flex gp-flex-col gp-gap-[4px] gp-text-14 gp-leading-6",
+            children: [
+                noAssignedProduct && /*#__PURE__*/ jsx("div", {
+                    className: "gp-text-[#212121]",
+                    children: "There are no products in your store."
+                }),
+                assignProductNoTags && !noAssignedProduct ? /*#__PURE__*/ jsxs("div", {
+                    className: "gp-text-[#212121]",
+                    children: [
+                        "The ",
+                        /*#__PURE__*/ jsx("button", {
+                            className: "gp-no-underline gp-text-[#3C67FF] gp-font-medium",
+                            onClick: openAssignProduct,
+                            children: "assigned product"
+                        }),
+                        " being previewed does not belong to any ",
+                        relatedTagString,
+                        "."
+                    ]
+                }) : /*#__PURE__*/ jsxs("div", {
+                    className: "gp-text-[#212121]",
+                    children: [
+                        "There are no products in the same ",
+                        relatedTagString,
+                        " as the ",
+                        /*#__PURE__*/ jsx("button", {
+                            className: "gp-no-underline gp-text-[#3C67FF]",
+                            onClick: openAssignProduct,
+                            children: "assigned product"
+                        }),
+                        " being previewed."
+                    ]
+                }),
+                /*#__PURE__*/ jsx("button", {
+                    className: "gp-text-[#3C67FF] gp-font-medium",
+                    onClick: changeConditionRelatedProduct,
+                    children: "Change condition"
+                })
+            ]
+        })
+    });
+};
+
+export { ProductNotFoundRelated as default };

package/dist/esm/product/components/ProductPrice.js

@@ -1,11 +1,8 @@
-'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useEditorMode, useQuantity, useCurrentVariant, useProductBundleDiscount, useProduct, useInteraction, isSafari, useFormatMoney, cls, getGlobalColorClass, getStyleShadow, getGlobalColorStateStyle, makeStyle, getGlobalColorStateClass, filterToolbarPreview } from '@gem-sdk/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEditorMode, useQuantity, useCurrentVariant, useProductBundleDiscount, useProduct, useInteraction, isSafari, useFormatMoney, cls, getGlobalColorClass, getStyleShadow, getGlobalColorStateStyle, makeStyle, getGlobalColorStateClass } from '@gem-sdk/core';
 import { useRef, useState, useMemo, useEffect } from 'react';
 import Text from '../../text/components/Text.js';
 import { useTransition } from './ProductVariants/common.js';
-import NoDataState from '../../common/components/NoDataState.js';
-import TooltipHover from '../../common/components/TooltipHover.js';
 
 const ProductPrice = (props)=>{
     const { builderAttrs, style, children, setting, styles, builderProps, classNames } = props;
@@ -45,7 +42,7 @@ const ProductPrice = (props)=>{
     const priceCompare = useMemo(()=>{
         if (bundleItem?.discountValue) {
             if (useProductCompareAtPrice) {
-                return (salePrice || price) * quantityProduct;
+                return salePrice * quantityProduct;
             }
             return price * quantityProduct;
         }
@@ -136,47 +133,30 @@ const ProductPrice = (props)=>{
         id: `shopify-text-element-${builderProps?.uid}`,
         "data-product-id": currentProductId,
         children: [
-            !displayPrice && mode === 'edit' ? /*#__PURE__*/ jsx(TooltipHover, {
-                enable: true,
-                text: 'Not be displayed when published',
-                position: 'bottom',
-                width: '205px',
-                children: /*#__PURE__*/ jsx(NoDataState, {
-                    builderAttrs: builderAttrs,
-                    elementType: "secondary",
-                    children: children,
-                    description: "No compare price",
-                    rawMode: true
-                })
-            }) : /*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    /*#__PURE__*/ jsx(Text, {
-                        styles: styles,
-                        setting: {
-                            text: moneyFormatted,
-                            excludeFlex: true
-                        },
-                        style: {
-                            ...getStyleShadow({
-                                value: setting?.boxShadowPrice,
-                                styleAppliedFor: 'box-shadow',
-                                isEnableShadow: setting?.hasBoxShadowPrice
-                            }),
-                            ...getGlobalColorStateStyle('c', styles?.parentTextColor),
-                            ...setting?.opacityPrice ? makeStyle({
-                                op: `${setting?.opacityPrice}%`
-                            }) : {}
-                        },
-                        className: cls({
-                            'gp-money': styles?.priceType === 'regular',
-                            'gp-product-compare-price': styles?.priceType === 'compare',
-                            'gp-line-through': styles?.priceType === 'compare' && styles?.lineThrough && hasThickness
-                        }, getGlobalColorStateClass('text', styles?.parentTextColor), colorClass, classNames)
+            /*#__PURE__*/ jsx(Text, {
+                styles: styles,
+                setting: {
+                    text: moneyFormatted,
+                    excludeFlex: true
+                },
+                style: {
+                    ...getStyleShadow({
+                        value: setting?.boxShadowPrice,
+                        styleAppliedFor: 'box-shadow',
+                        isEnableShadow: setting?.hasBoxShadowPrice
                     }),
-                    children
-                ]
+                    ...getGlobalColorStateStyle('c', styles?.parentTextColor),
+                    ...setting?.opacityPrice ? makeStyle({
+                        op: `${setting?.opacityPrice}%`
+                    }) : {}
+                },
+                className: cls({
+                    'gp-money': styles?.priceType === 'regular',
+                    'gp-product-compare-price': styles?.priceType === 'compare',
+                    'gp-line-through': styles?.priceType === 'compare' && styles?.lineThrough && hasThickness
+                }, getGlobalColorStateClass('text', styles?.parentTextColor), colorClass, classNames)
             }),
-            filterToolbarPreview(children, true)
+            children
         ]
     });
 };

package/dist/esm/product/components/ProductProperties/ProductPropertyChoice.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useUniqProductID, makeStyleResponsive, makeWidth, composeTypographyClassName, composeTypographyStyle, makeStyle, cls, getGlobalColorStateClass, getGlobalColorClass, getGlobalColorStateStyle, getSingleColorVariable } from '@gem-sdk/core';
 

package/dist/esm/product/components/ProductProperties/ProductPropertyInput.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useUniqProductID, makeStyleResponsive, makeWidth, composeTypographyClassName, composeTypographyStyle, cls, getGlobalColorStateClass, handleConvertClassColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor, getGlobalColorStateStyle, getStyleShadowState, composeRadius, makeStyle } from '@gem-sdk/core';
 import { useMemo } from 'react';

package/dist/esm/product/components/ProductProperties/ProductPropertySelect.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useUniqProductID, makeStyleResponsive, makeWidth, composeTypographyClassName, composeTypographyStyle, cls, getGlobalColorStateClass, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor, composeRadius, getStyleShadowState, getGlobalColorStateStyle } from '@gem-sdk/core';
 

package/dist/esm/product/components/ProductProperties.js

@@ -1,7 +1,6 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useUniqProductID, useProductStore, usePrevious, useProduct, useInteraction, validateEmail, getGlobalColorClass, composeTypographyClassName, composeTypographyStyle, makeStyleResponsive, cls, makeStyle } from '@gem-sdk/core';
-import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { useUniqProductID, useProductStore, usePrevious, useProduct, validateEmail, getGlobalColorClass, composeTypographyClassName, composeTypographyStyle, makeStyleResponsive, cls, makeStyle } from '@gem-sdk/core';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import ProductPropertyChoice from './ProductProperties/ProductPropertyChoice.js';
 import ProductPropertyInput from './ProductProperties/ProductPropertyInput.js';
 import ProductPropertySelect from './ProductProperties/ProductPropertySelect.js';
@@ -18,39 +17,6 @@ const ProductProperties = ({ setting, styles, builderProps })=>{
     const [checkboxValue, setCheckboxValue] = useState([]);
     const prevName = usePrevious(name);
     const product = useProduct();
-    const ref = useRef(null);
-    const { trigger } = useInteraction();
-    const dispatchEventInteraction = (value, element)=>{
-        trigger({
-            event: 'gp:rollback:option-selected',
-            selector: `[data-id="${builderProps?.uid}"`,
-            element
-        });
-        trigger({
-            event: 'gp:option-selected',
-            data: value,
-            selector: `[data-id="${builderProps?.uid}"`,
-            element
-        });
-    };
-    const interactionListenerLoaded = useCallback((callback)=>{
-        //@ts-ignore
-        if (window.interactionLoaded) {
-            callback();
-            return;
-        }
-        window.addEventListener('gp:flow-actions-loaded', ()=>{
-            callback();
-        });
-    }, []);
-    useEffect(()=>{
-        if (type === 'dropdown') {
-            const valueDefault = ref.current?.querySelector('select')?.value;
-            interactionListenerLoaded(()=>{
-                dispatchEventInteraction(valueDefault, ref.current);
-            });
-        }
-    }, []);
     useEffect(()=>{
         if (name) {
             if (!prevName) {
@@ -146,13 +112,11 @@ const ProductProperties = ({ setting, styles, builderProps })=>{
                 val = checkboxValue.filter((value)=>value !== e.target.value);
             }
             setCheckboxValue(val);
-            dispatchEventInteraction(val, ref.current);
             updateProperty(e.target.name, {
                 value: val.join(', ')
             });
         } else {
             setValue(e.target.value);
-            dispatchEventInteraction(e.target.value, ref.current);
             updateProperty(e.target.name, {
                 value: e.target.value
             });
@@ -161,7 +125,6 @@ const ProductProperties = ({ setting, styles, builderProps })=>{
     const handleChangeOption = (e)=>{
         setIsDirty(true);
         setValue(e.target.value);
-        dispatchEventInteraction(e.target.value, ref.current);
         updateProperty(e.target.name, {
             value: e.target.value
         });
@@ -208,7 +171,6 @@ const ProductProperties = ({ setting, styles, builderProps })=>{
         id: `shopify-text-element-${builderProps?.uid}`,
         "data-product-id": currentProductId,
         "data-id": builderProps?.uid,
-        ref: ref,
         children: [
             /*#__PURE__*/ jsx("div", {
                 children: /*#__PURE__*/ jsxs("label", {

package/dist/esm/product/components/ProductProperties.liquid.js

@@ -50,15 +50,16 @@ const ProductProperties = ({ setting, styles, builderProps, advanced, pageContex
         pageContext,
         translate
     });
+    const dataTranslateSetting = JSON.stringify({
+        requiredMessage: '$1',
+        invalidEmailMessage: '$2',
+        invalidLengthMessage: '$3',
+        invalidNumberMessage: '$4'
+    }).replace('$1', requiredMessageDisplay.toString()).replace('$2', invalidEmailMessageDisplay.toString()).replace('$3', invalidLengthMessageDisplay.toString()).replace('$4', invalidNumberMessageDisplay.toString());
     return template /* liquid */ `
-    <gp-product-property data-id="${builderProps?.uid}" data-invalid="false" class="gp-block gp-group gp-property_${type}"
+    <gp-product-property data-invalid="false" class="gp-block gp-group gp-property_${type}"
       data-gp-setting='${JSON.stringify(setting).replaceAll("'", '&#039;')}'
-      data-translate-setting='${JSON.stringify({
-        requiredMessage: requiredMessageDisplay,
-        invalidEmailMessage: invalidEmailMessageDisplay,
-        invalidLengthMessage: invalidLengthMessageDisplay,
-        invalidNumberMessage: invalidNumberMessageDisplay
-    })}'
+      data-translate-setting='${dataTranslateSetting}'
       style="${{
         ...makeStyleResponsive('ta', textAlign)
     }}"
@@ -93,7 +94,10 @@ const ProductProperties = ({ setting, styles, builderProps, advanced, pageContex
         setting,
         styles,
         builderProps,
-        pageContext
+        pageContext,
+        attributes: {
+            dataId: builderProps?.uid || ''
+        }
     }))}
         ${RenderIf(type === 'checkbox' || type === 'radio', ProductPropertyChoice({
         setting: {
@@ -104,13 +108,19 @@ const ProductProperties = ({ setting, styles, builderProps, advanced, pageContex
         },
         styles,
         builderProps,
-        pageContext
+        pageContext,
+        attributes: {
+            dataId: builderProps?.uid || ''
+        }
     }))}
         ${RenderIf(type === 'text' || type === 'textarea' || type === 'email' || type === 'hidden', ProductPropertyInput({
         setting,
         styles,
         builderProps,
-        pageContext
+        pageContext,
+        attributes: {
+            dataId: builderProps?.uid || ''
+        }
     }))}
         <div
         data-slot-type="message"

package/dist/esm/product/components/ProductQuantity.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useProduct, useCurrentVariant, useIsSyncProduct, useQuantity, useInteraction, makeStyleResponsive, makeWidth, useCurrentVariantInStock, composeTypographyClassName, composeTypographyStyle, cls, handleConvertClassColor, getGlobalColorStateClass, getGlobalColorStateStyle, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor, composeRadius, makeStyle } from '@gem-sdk/core';
 import { useRef, useEffect } from 'react';

package/dist/esm/product/components/ProductQuickView/ProductQuickView.js

@@ -1,11 +1,10 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import Column from '../../../grid/components/Col.js';
 import Row from '../../../grid/components/Row.js';
-import { usePluginEnable, useProduct, useProductQuery, ProductProvider } from '@gem-sdk/core';
 import { useState } from 'react';
 import '../../../modal/components/confirm.js';
 import Modal from '../../../modal/components/Modal.js';
+import { usePluginEnable, useProduct, useProductQuery, ProductProvider } from '@gem-sdk/core';
 import ProductButton from '../ProductButton.js';
 import ProductPrice from '../ProductPrice.js';
 import ProductQuantity from '../ProductQuantity.js';

package/dist/esm/product/components/ProductQuickView/index.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { usePluginEnable } from '@gem-sdk/core';
 import dynamic from 'next/dynamic';

package/dist/esm/product/components/ProductTag.js

@@ -1,12 +1,9 @@
-'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMoneyFormat, makeGlobalSize, useEditorMode, useProduct, useCurrentVariant, useFormatMoney, useProductBundleDiscount, formatMoney, getGlobalColorClass, cls, makeStyleResponsive, makeStyle, getRadiusCSSFromGlobal, getCustomRadius } from '@gem-sdk/core';
 import { useMemo } from 'react';
 import Text from '../../text/components/Text.js';
 import { DiscountType } from './constants/product-bundle.js';
-import NoDataState from '../../common/components/NoDataState.js';
 import { applyBundleDiscountAmount } from '../helpers/product-bundle.js';
-import TooltipHover from '../../common/components/TooltipHover.js';
 
 const ProductTag = ({ setting, styles, builderProps, ...passProps })=>{
     const { customContent } = setting ?? {};
@@ -36,16 +33,16 @@ const ProductTag = ({ setting, styles, builderProps, ...passProps })=>{
         salePrice
     ]);
     const { useProductCompareAtPrice } = useProductBundleDiscount();
-    const { discountPercentAmount, discountAmount } = applyBundleDiscountAmount({
-        currentVariant,
-        bundleItem,
-        options: {
-            moneyFormat,
-            useProductCompareAtPrice
-        }
-    });
     const bundleDiscountDisplay = useMemo(()=>{
         if (!bundleItem) return 0;
+        const { discountPercentAmount, discountAmount } = applyBundleDiscountAmount({
+            currentVariant,
+            bundleItem,
+            options: {
+                moneyFormat,
+                useProductCompareAtPrice
+            }
+        });
         const { discountType } = bundleItem;
         const { unit } = customContent || {};
         if (discountType === DiscountType.NoDiscount && !useProductCompareAtPrice) {
@@ -57,11 +54,10 @@ const ProductTag = ({ setting, styles, builderProps, ...passProps })=>{
         return discountAmount;
     }, [
         bundleItem,
-        customContent,
-        useProductCompareAtPrice,
-        discountAmount,
+        currentVariant,
         moneyFormat,
-        discountPercentAmount
+        useProductCompareAtPrice,
+        customContent
     ]);
     const unitCustomDisplay = useMemo(()=>{
         if (!bundleItem) {
@@ -77,29 +73,14 @@ const ProductTag = ({ setting, styles, builderProps, ...passProps })=>{
     const textColorClass = getGlobalColorClass('text', textColor);
     const backgroundColorClass = getGlobalColorClass('bg', backgroundColor);
     const currentProductId = product?.baseID?.replace('gid://shopify/Product/', '');
-    const shouldPlaceholderNoDiscount = useMemo(()=>{
-        const noDiscount = !bundleItem ? priceSave <= 0 : discountPercentAmount <= 0;
-        return mode === 'edit' && noDiscount;
+    useMemo(()=>{
+        if (mode !== 'edit' && (salePrice <= 0 || Math.ceil(priceSave / (salePrice / 100)) <= 0)) return 'true';
+        return 'false';
     }, [
-        bundleItem,
-        discountPercentAmount,
         mode,
+        salePrice,
         priceSave
     ]);
-    if (shouldPlaceholderNoDiscount) {
-        return /*#__PURE__*/ jsx(TooltipHover, {
-            enable: true,
-            text: 'Not be displayed when published',
-            position: 'bottom',
-            width: '205px',
-            children: /*#__PURE__*/ jsx(NoDataState, {
-                builderAttrs: builderProps?.builderData,
-                elementType: "secondary",
-                description: "No discount",
-                rawMode: true
-            })
-        });
-    }
     return /*#__PURE__*/ jsx("div", {
         className: cls({
             'gp-opacity-0 ': mode !== 'edit' && (salePrice <= 0 || Math.ceil(priceSave / (salePrice / 100)) <= 0),

package/dist/esm/product/components/ProductTitle.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import Link from 'next/link';
 import { useProduct } from '@gem-sdk/core';

package/dist/esm/product/components/ProductVariants/index.js

@@ -1,6 +1,5 @@
-'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useVariants, useProductShopifyEditLink, useProduct, useIsSyncProduct, useCurrentDevice, useEditorMode, useSelectedOption, useHasPreSelected, makeStyleResponsive, makeWidth, useInitialSwatchesOptions, useSwatchesOptions, composeTypographyClassName, optionLayoutStyle, cls, makeStyle, OptionSpecialStyle, checkInStock, getResponsiveValueByScreen } from '@gem-sdk/core';
+import { useVariants, useProduct, useIsSyncProduct, useCurrentDevice, useSelectedOption, useHasPreSelected, makeStyleResponsive, makeWidth, useInitialSwatchesOptions, useSwatchesOptions, composeTypographyClassName, optionLayoutStyle, cls, makeStyle, OptionSpecialStyle, checkInStock, getResponsiveValueByScreen } from '@gem-sdk/core';
 import Text from '../../../text/components/Text.js';
 import { getSelectedVariant, checkDefaultVariant } from '../../helpers/product.js';
 import VariantItem from './variants/index.js';
@@ -12,7 +11,6 @@ import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { makeStyleGapForLabel, useTransition } from './common.js';
 import { mappingVariantStyles } from './utils/mappingVariantStyles.js';
 import { useVariantInteraction } from './hooks/useVariantInteraction.js';
-import NoDataState from '../../../common/components/NoDataState.js';
 
 const DEVICES = [
     'desktop',
@@ -26,7 +24,6 @@ const ProductVariants = ({ builderProps, style, styles, setting })=>{
     const { label, optionType, showAsSwatches, layout, column, hasPreSelected } = setting ?? {};
     const { uid } = builderProps ?? {};
     const variants = useVariants();
-    const { redirectProductShopifyLink } = useProductShopifyEditLink();
     const product = useProduct();
     const isSyncProduct = useIsSyncProduct();
     const currentDevice = useCurrentDevice();
@@ -35,7 +32,6 @@ const ProductVariants = ({ builderProps, style, styles, setting })=>{
         element: elementRef,
         uid: builderProps?.uid
     });
-    const mode = useEditorMode();
     const { selectedOptions, setSelectedOption, forceSelectedOption } = useSelectedOption();
     const { setHasPreSelected } = useHasPreSelected();
     const variantsWidth = makeStyleResponsive('w', makeWidth(width, fullWidth));
@@ -59,13 +55,15 @@ const ProductVariants = ({ builderProps, style, styles, setting })=>{
         const url = new URL(window.location.href);
         const variantId = url.searchParams.get(VARIANT_PARAM_PATH);
         if (variantId) {
-            return variants.find((variant)=>variant?.id === variantId);
+            const variantSelected = variants.find((variant)=>variant?.id === variantId);
+            return variantSelected;
         }
         return null;
     };
     const getInStock = (selected)=>{
         const variantSelected = getSelectedVariant(variants, selected);
-        return checkInStock(variantSelected);
+        const inStock = checkInStock(variantSelected);
+        return inStock;
     };
     useEffect(()=>{
         const variantSelected = getVariantByPath();
@@ -204,24 +202,8 @@ const ProductVariants = ({ builderProps, style, styles, setting })=>{
     }, [
         layout
     ]);
-    if (isDefaultVariant && mode === 'edit') {
-        return /*#__PURE__*/ jsx(NoDataState, {
-            elementType: "secondary",
-            description: "Setup options like colors, sizes with product variant.",
-            descriptionActions: [
-                {
-                    text: 'Add new variant',
-                    callback: redirectProductShopifyLink
-                },
-                {
-                    text: 'sync data',
-                    callback: 'syncProduct'
-                }
-            ]
-        });
-    }
     return /*#__PURE__*/ jsx(Fragment, {
-        children: /*#__PURE__*/ jsxs("div", {
+        children: !isDefaultVariant ? /*#__PURE__*/ jsxs("div", {
             "data-id": builderProps?.uid,
             className: "gp-grid",
             ref: elementRef,
@@ -351,6 +333,12 @@ const ProductVariants = ({ builderProps, style, styles, setting })=>{
                     })
                 })
             ]
+        }) : /*#__PURE__*/ jsx("div", {
+            "data-id": builderProps?.uid,
+            children: /*#__PURE__*/ jsx("p", {
+                className: "gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500",
+                children: "This product has only default variant"
+            })
         })
     });
 };

package/dist/esm/product/components/ProductVariants/index.liquid.js

@@ -13,10 +13,15 @@ const DEVICES = [
     'tablet',
     'mobile'
 ];
+const DEFAULT_ADVANCED_DISPLAY_SETTING = {
+    desktop: true,
+    tablet: true,
+    mobile: true
+};
 const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
     const { width, fullWidth, align, swatchItemWidth, dropdownItemWidth, marginBottom, swatchSpacing, optionTypo, labelGap } = styles ?? {};
     const { label, optionType, showAsSwatches, layout, column, hasPreSelected } = setting ?? {};
-    const advancedDisplay = advanced?.d;
+    const advancedDisplay = advanced?.d ?? DEFAULT_ADVANCED_DISPLAY_SETTING;
     const { uid } = builderProps ?? {};
     // full width
     const variantsWidth = makeStyleResponsive('w', makeWidth(width, fullWidth));

package/dist/esm/product/components/ProductVariants/variants/Base.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makeStyle, getSingleColorVariable, composeTypographyClassName, composeTypographyStyle, getStyleShadow, getStyleShadowState, getRadiusStyleActiveState, composeRadius, getGlobalColorStateStyle, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor, cls, getGlobalColorStateClass, getGlobalColorClass } from '@gem-sdk/core';
 import { useMemo, Fragment } from 'react';

package/dist/esm/product/components/ProductVariants/variants/Color.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import BaseVariant from './Base.js';
 import { useMemo } from 'react';

package/dist/esm/product/components/ProductVariants/variants/Dropdown.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useSelectedOption, useProduct, composeTypographyClassName, composeTypographyStyle, makeStyleResponsive, makeWidth, cls, handleConvertClassColor, getGlobalColorStateClass, getStyleShadowState, makeStyle, getGlobalColorStateStyle, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor, composeRadius, getSingleColorVariable } from '@gem-sdk/core';
 import { parseSelectedOption } from '../../../helpers/product.js';

package/dist/esm/product/components/ProductVariants/variants/DropdownOption.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useVariantOutStock } from '@gem-sdk/core';
 import 'react';

package/dist/esm/product/components/ProductVariants/variants/Image.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import BaseVariant from './Base.js';
 import { useMemo } from 'react';

package/dist/esm/product/components/ProductVariants/variants/ImageShopify.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import BaseVariant from './Base.js';
 import { useMemo } from 'react';

package/dist/esm/product/components/ProductVariants/variants/RadioButtons.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useProduct, useSelectedOption, composeTypographyClassName, composeTypographyStyle, makeStyle, checkAvailableVariantInStock, cls, getGlobalColorStateClass, getGlobalColorClass, getGlobalColorStateStyle, getSingleColorVariable } from '@gem-sdk/core';
 import { useCallback } from 'react';

package/dist/esm/product/components/ProductVariants/variants/RectangleList.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { makeStyleResponsive, makeWidth, composeTypographyClassName, composeTypographyStyle, cls, getGlobalColorStateClass, getGlobalColorClass, handleConvertClassColor, getGlobalColorStateStyle, makeStyle, composeRadius, getRadiusStyleActiveState, getStyleShadowState, getStyleShadow, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor, getSingleColorVariable } from '@gem-sdk/core';
 import { useMemo } from 'react';

package/dist/esm/product/components/ProductVariants/variants/VariantGroup.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useVariants, useSelectedOption } from '@gem-sdk/core';
 import DropdownVariant from './Dropdown.js';

package/dist/esm/product/components/ProductVariants/variants/VariantOption/index.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useFormatMoney } from '@gem-sdk/core';
 import 'react';

package/dist/esm/product/components/ProductVariants/variants/index.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useSelectedOption, useProduct, makeStyleResponsive, makeWidth, useVariantOutStock, cls } from '@gem-sdk/core';
 import { useMemo } from 'react';

package/dist/esm/product/components/ProductVariants/variants/index.liquid.js

@@ -133,7 +133,8 @@ const VariantItem = ({ name, variantKey, value, id, activeClass, optionPosition,
   <span class="gp-sr-only">${value?.label}</span>
   <div   
   option-name="{{option.name | escape}}"
-  option-name-value="{{value | escape}}" 
+  option-name-value="{{value | escape}}"
+  data-gp-option-value-id="{{value.id}}"
   class="option-item-inner gp-w-auto gp-h-auto {%- if option_disabled == true -%}${isSoldOutMark ? 'gp-opacity-20' : ''}{%- endif -%}">
   ${props.isRenderDefault ? renderDefaultComponentOnly() : renderComponent()}
   </div>

package/dist/esm/product/components/ProductViewMore.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import Button from '../../button/components/Button.js';