@gem-sdk/components 2.0.0-staging.119 → 2.0.0

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';
 

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

@@ -1,14 +1,11 @@
-import { template, makeStyleResponsive, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
+import { template, makeStyleResponsive } from '@gem-sdk/core';
 import Button from '../../button/components/Button.liquid.js';
-import { getSettingPreloadData } from '../../helpers.js';
 
 const ProductViewMore = ({ setting, builderProps, builderAttrs, style, styles, advanced, pageContext })=>{
     const { ...buttonStyles } = styles ?? {};
     const { label, iconSvg, iconAlign, iconVisible, translate } = setting ?? {};
     return template`
-    <gp-product-view-more>
-      ${Button({
-        className: 'btn-view-more',
+    ${Button({
         builderProps: builderProps,
         builderAttrs: builderAttrs,
         setting: {
@@ -30,8 +27,6 @@ const ProductViewMore = ({ setting, builderProps, builderAttrs, style, styles, a
         advanced,
         pageContext
     })}
-       ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-view-more.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-product-view-more.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-    </gp-product-view-more>
   `;
 };
 

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const SalePageProductListWarning = ({ builderAttrs })=>{

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useCurrentVariant, useProduct } from '@gem-sdk/core';
 import Text from '../../text/components/Text.js';

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useProduct, useEditorMode } from '@gem-sdk/core';
 import Text from '../../text/components/Text.js';

package/dist/esm/product/next.js

@@ -1,8 +1,6 @@
 import dynamic from 'next/dynamic';
 import Loading from '../common/components/Loading.js';
 import 'react/jsx-runtime';
-import 'react';
-import '@gem-sdk/core';
 
 const Product = dynamic(()=>import('./components/Product.js'), {
     loading: Loading

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

@@ -1022,7 +1022,7 @@ const config = {
                     label: {
                         en: 'Invalid number'
                     },
-                    condition: 'numberOnly === true && ["text", "textarea"].includes(type)'
+                    condition: 'numberOnly === true'
                 },
                 {
                     type: 'control',

package/dist/esm/product/setting/index.js

@@ -19,7 +19,7 @@ import config$g from './ProductViewMore.js';
 import config$h from './ProductBadge.js';
 import config$j from './FileUpload.js';
 
-var productSetting = {
+var index = {
     Product: config,
     ProductQuantity: config$1,
     ProductTitle: config$2,
@@ -42,4 +42,4 @@ var productSetting = {
     FileUpload: config$j
 };
 
-export { productSetting as default };
+export { index as default };

package/dist/esm/radio/Radio.js

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

package/dist/esm/radio/next.js

@@ -1,8 +1,6 @@
 import dynamic from 'next/dynamic';
 import Loading from '../common/components/Loading.js';
 import 'react/jsx-runtime';
-import 'react';
-import '@gem-sdk/core';
 
 const Radio = dynamic(()=>import('./Radio.js'), {
     loading: Loading

package/dist/esm/radio/setting/index.js

@@ -1,7 +1,7 @@
 import config from './Radio.js';
 
-var radioSetting = {
+var index = {
     Radio: config
 };
 
-export { radioSetting as default };
+export { index as default };

package/dist/esm/select/Select.js

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

package/dist/esm/select/next.js

@@ -1,8 +1,6 @@
 import dynamic from 'next/dynamic';
 import Loading from '../common/components/Loading.js';
 import 'react/jsx-runtime';
-import 'react';
-import '@gem-sdk/core';
 
 const Select = dynamic(()=>import('./Select.js'), {
     loading: Loading

package/dist/esm/select/setting/index.js

@@ -1,7 +1,7 @@
 import Select from '../Select.js';
 
-var selectSetting = {
+var index = {
     Select
 };
 
-export { selectSetting as default };
+export { index as default };

package/dist/esm/sticky/components/Sticky.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { makeStyleResponsive, usePageStore, useCurrentDevice, cls, getStyleBackgroundByDevice, isEmptyChildren } from '@gem-sdk/core';
 import Head from 'next/head';
@@ -15,7 +14,7 @@ const Sticky = ({ children, builderAttrs, setting, style, builderProps })=>{
         mobile: false
     });
     const w = makeStyleResponsive('w', styleObject.content);
-    const sidebarMode = usePageStore((s)=>s.sidebarMode === 'interaction');
+    const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const currentDevice = useCurrentDevice();
     const getCSSPosition = (position)=>{
         return position == 'top' ? 'sticky' : 'fixed';
@@ -34,13 +33,13 @@ const Sticky = ({ children, builderAttrs, setting, style, builderProps })=>{
         };
     };
     const gap = useMemo(()=>{
-        if (sidebarMode && position?.[currentDevice] === 'top') {
+        if (isSelectOnPage && position?.[currentDevice] === 'top') {
             return '40px';
         }
         return undefined;
     }, [
         currentDevice,
-        sidebarMode,
+        isSelectOnPage,
         position
     ]);
     const displayStyle = useCallback(()=>{

package/dist/esm/sticky/components/Sticky.liquid.js

@@ -1,7 +1,6 @@
 import { makeWidth, template, RenderIf, makeStyleResponsive, getStyleBackgroundByDevice, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
 import { getSettingPreloadData } from '../../helpers.js';
 import 'react/jsx-runtime';
-import 'react';
 import { ELEMENT_Z_INDEX } from '../../common/const.js';
 
 const Sticky = ({ children, builderAttrs, setting, style, builderProps, advanced })=>{

package/dist/esm/sticky/next.js

@@ -1,8 +1,6 @@
 import dynamic from 'next/dynamic';
 import Loading from '../common/components/Loading.js';
 import 'react/jsx-runtime';
-import 'react';
-import '@gem-sdk/core';
 
 const Sticky = dynamic(()=>import('./components/Sticky.js'), {
     loading: Loading