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

package/dist/cjs/product/components/ProductImagesV2/jsx/layouts/OnlyFeatureImage.js

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -8,14 +7,11 @@ var ProductFeaturedImageCarousel = require('../components/ProductFeaturedImageCa
 var core = require('@gem-sdk/core');
 
 const OnlyFeatureImage = (productImageProps)=>{
-    const { setting, styles, gallery, builderProps, noDataChildren, onHandleClickImage, children } = productImageProps;
+    const { setting, styles, gallery, builderProps, onHandleClickImage, children } = productImageProps;
     const settings = {
         ...setting,
         ...styles
     };
-    if (gallery?.[0]?.id === 'noImageError') {
-        return noDataChildren;
-    }
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         className: core.cls(`gp-flex gp-relative gp-product-images-gallery-${builderProps?.uid} gp-overflow-hidden`, core.getResponsiveValueByScreen(settings?.ftNavigationPosition, 'desktop') === 'outside' ? 'gp-px-[16px]' : 'gp-px-0', core.getResponsiveValueByScreen(settings?.ftNavigationPosition, 'tablet') === 'outside' ? 'tablet:gp-px-[16px]' : 'tablet:gp-px-0', core.getResponsiveValueByScreen(settings?.ftNavigationPosition, 'mobile') === 'outside' ? 'mobile:gp-px-[16px]' : 'mobile:gp-px-0'),
         style: {

package/dist/cjs/product/components/ProductList.js

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -29,7 +28,6 @@ const ProductList = ({ children, className, setting, styles, builderProps })=>{
     const dynamicProduct = core.usePageStore((s)=>s.dynamicProduct);
     const dynamicCollection = core.usePageStore((s)=>s.dynamicCollection);
     const isCollectionPage = pageType == 'GP_COLLECTION';
-    const { builderData } = builderProps ?? {};
     if (isCollectionPage) {
         productSetting.productSrc = 'DynamicCollection';
         productSetting.collectionId = dynamicCollection?.collectionId ?? 'latest';
@@ -243,7 +241,6 @@ const ProductList = ({ children, className, setting, styles, builderProps })=>{
     const relatedTagString = productSetting.relatedTag && productSetting.relatedTag[0];
     if (isNotFoundRelatedProduct && isRelatedProduct && mode == 'edit') {
         return /*#__PURE__*/ jsxRuntime.jsx(ProductNotFound, {
-            builderAttrs: builderData,
             collectionHandle: collection?.handle,
             productSrc: productSrc,
             onClose: ()=>setFromWarningImportShopify(false),
@@ -258,7 +255,6 @@ const ProductList = ({ children, className, setting, styles, builderProps })=>{
             return null;
         }
         return /*#__PURE__*/ jsxRuntime.jsx(ProductNotFound, {
-            builderAttrs: builderData,
             collectionHandle: collection?.handle,
             productSrc: productSrc,
             onClose: ()=>setFromWarningImportShopify(false),
@@ -334,7 +330,7 @@ const ProductList = ({ children, className, setting, styles, builderProps })=>{
                                         'data-component-no-setting': true,
                                         'data-product-id': product?.baseID?.replace('gid://shopify/Product/', '')
                                     } : {},
-                                    className: core.cls(setting?.sameHeight ? `gp-contents [&_*[data-same-height-display-contents="true"]]:gp-contents [&_*[data-component-label="Row"]]:gp-grid [&_*[data-component-label="Row"]]:gp-grid-rows-[subgrid] [&_*[data-component-label="Row"]]:gp-gap-y-0 [&_*[data-component-label="Row"]]:gp-grid-col-[subgrid]` : '', `gp-child-item-${builderProps?.uid}`),
+                                    className: core.cls(setting?.sameHeight ? `gp-contents [&>div]:gp-grid [&>div]:gp-grid-rows-[subgrid] [&>div]:gp-gap-y-0 [&>div]:gp-grid-col-[subgrid] ${mode === 'edit' ? '[&>*>div[data-component-tag="Col"]]:gp-contents' : '[&>*>div]:gp-contents'}` : '', `gp-child-item-${builderProps?.uid}`),
                                     style: {
                                         '--grchild': setting?.sameHeight ? generateGridRowArray[index]?.gridRow : undefined,
                                         '--mbchild': generateGridRowArray[index]?.marginBottom

package/dist/cjs/product/components/ProductList.liquid.js

@@ -141,7 +141,7 @@ const ProductList = ({ setting, builderProps, styles, className, children, advan
               gp-context='{"variantSelected": {{ variant | json | escape }}, "quantity": 1 ,  "formId": "{{ product_form_id }}"}' 
               gp-data='{"variantSelected": {{ variant | json | escape }}, "quantity": 1, "productUrl":{{ product.url | json | escape }}, "productHandle":{{ product.handle | json | escape }}, "collectionUrl": {{ collection.url | json | escape }}, "collectionHandle": {{ collection.handle | json | escape }},"pageContext" : ${JSON.stringify(pageContext)}}'
             >
-              {%- form 'product', product, id: product_form_id, class: 'form contents ${setting?.sameHeight ? ' gp-contents [&_*[data-same-height-display-contents="true"]]:gp-contents [&_*[parenttag="ProductList"]]:gp-grid [&_*[parenttag="ProductList"]]:gp-grid-rows-[subgrid] [&_*[parenttag="ProductList"]]:gp-gap-y-0 [&_*[parenttag="ProductList"]]:gp-grid-col-[subgrid]' : ''}',  data-type: 'add-to-cart-form', autocomplete: 'off' -%}
+              {%- form 'product', product, id: product_form_id, class: 'form contents ${setting?.sameHeight ? ' gp-contents [&>div]:gp-grid [&>div]:gp-grid-rows-[subgrid] [&>div]:gp-gap-y-0 [&>div]:gp-grid-col-[subgrid] [&>*>div:nth-child(1)]:gp-contents' : ''}',  data-type: 'add-to-cart-form', autocomplete: 'off' -%}
               <input type="hidden" name="id" value="{{ variant.id }}" />
               <input type="hidden" min="1" name="quantity"  value="{{ quantity }}" />
               <button type="submit" onclick="return false;" style="display:none;"></button>

package/dist/cjs/product/components/ProductNotFound.js

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -6,42 +5,43 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var React = require('react');
-var NoDataState = require('../../common/components/NoDataState.js');
+var ProductNotFoundRelated = require('./ProductNotFoundRelated.js');
 
-const ProductNotFound = ({ collectionHandle, productSrc, builderAttrs, children })=>{
+const ProductNotFound = ({ collectionHandle, productSrc, relatedTagString, assignProductNoTags, noAssignedProduct, builderAttrs, children })=>{
     const isInstant = core.usePageType() === 'STATIC';
     const storefrontToken = core.useShopStore((s)=>s.storefrontToken);
     const storefrontUrl = core.useShopStore((s)=>s.storefrontUrl);
     const isCollection = productSrc === 'Collection';
-    const [textWarning, setTextWarning] = React.useState('');
-    const [textLink, setTextLink] = React.useState('get product');
-    const [entity, setEntity] = React.useState('');
-    React.useEffect(()=>{
+    const isRelated = productSrc === 'RelatedProduct';
+    const textWarning = React.useMemo(()=>{
+        if (isInstant && !storefrontToken) {
+            return 'We can not get your products from Shopify';
+        }
         if (isCollection) {
             if (!collectionHandle) {
-                setTextWarning('We cannot find any collections from your Shopify store. Please try manually syncing the data from Shopify or add a new collection.');
-                setTextLink('get collection');
-                setEntity('collection');
-                return;
+                return 'Have you create collections in your store? We couldn’t find any.';
+            } else {
+                return 'Have you add products to this collection? We couldn’t find any.';
             }
-            setTextWarning('We cannot find any product of this collection from your Shopify store? Please try manually syncing the data from Shopify or add a new product to your collection.');
-            setTextLink('get product of collection');
-            setEntity('product');
-            return;
         }
-        if (isInstant && !storefrontToken) {
-            setEntity('product');
-            setTextWarning('We can not get your products from Shopify');
-            return;
+        return 'Have you added products to your store? We couldn’t find any.';
+    }, [
+        isInstant,
+        storefrontToken,
+        isCollection,
+        collectionHandle
+    ]);
+    const textLink = React.useMemo(()=>{
+        if (isCollection) {
+            if (!collectionHandle) {
+                return 'Add collection to Shopify';
+            }
+            return 'Add products to collection';
         }
-        setEntity('product');
-        setTextLink('get product');
-        setTextWarning('We cannot find any products from your Shopify store. Please try manually syncing the data from Shopify or add a new product.');
+        return `Add products to Shopify`;
     }, [
-        collectionHandle,
         isCollection,
-        isInstant,
-        storefrontToken
+        collectionHandle
     ]);
     const shopifyLink = React.useMemo(()=>{
         if (!storefrontUrl) return undefined;
@@ -54,28 +54,93 @@ const ProductNotFound = ({ collectionHandle, productSrc, builderAttrs, children
         isCollection,
         storefrontUrl
     ]);
-    const emitSync = (componentUid)=>{
-        const event = new CustomEvent('editor:sync-product', {
-            bubbles: true,
-            detail: {
-                uid: componentUid
-            }
-        });
-        window.dispatchEvent(event);
-    };
-    return /*#__PURE__*/ jsxRuntime.jsx(NoDataState.default, {
-        elementType: "primary",
-        children: children,
-        builderAttrs: builderAttrs,
-        title: `Can not ${textLink} from Shopify`,
-        description: textWarning,
-        primaryBtnTitle: `Add ${entity}`,
-        secondaryBtnTitle: `Sync from Shopify`,
-        primaryBtnCb: ()=>{
-            if (!shopifyLink) return;
-            window.open(shopifyLink, '_blank');
-        },
-        secondaryBtnCb: ()=>emitSync(builderAttrs?.['data-uid'] ?? builderAttrs?.['uid'])
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        ...builderAttrs,
+        className: `gp-relative gp-flex gp-h-[98px] gp-flex-col gp-items-center gp-justify-center gp-rounded gp-border-dotted gp-border-[#676767] gp-border ${isRelated ? 'gp-py-16' : ''}`,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: `gp-flex gp-items-center gp-justify-center ${isRelated ? 'gp-flex-col gp-gap-[7px] gp-py-16' : ''}`,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: "gp-mr-2",
+                        children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                            xmlns: "http://www.w3.org/2000/svg",
+                            width: "21",
+                            height: "21",
+                            viewBox: "0 0 21 21",
+                            fill: "none",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("g", {
+                                    clipPath: "url(#clip0_9546_221079)",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                        fillRule: "evenodd",
+                                        clipRule: "evenodd",
+                                        d: "M11.5728 3.86863C11.0976 3.04379 9.90241 3.04379 9.4272 3.86863L1.91575 16.9064C1.44289 17.7271 2.0381 18.75 2.98855 18.75H18.0114C18.9619 18.75 19.5571 17.7271 19.0842 16.9064L11.5728 3.86863ZM10.5 6.43064C10.8452 6.43064 11.125 6.7092 11.125 7.05282V12.6524C11.125 12.996 10.8452 13.2746 10.5 13.2746C10.1548 13.2746 9.875 12.996 9.875 12.6524V7.05282C9.875 6.7092 10.1548 6.43064 10.5 6.43064ZM10.5 14.7678C9.94771 14.7678 9.5 15.2135 9.5 15.7633C9.5 16.3131 9.94771 16.7588 10.5 16.7588C11.0523 16.7588 11.5 16.3131 11.5 15.7633C11.5 15.2135 11.0523 14.7678 10.5 14.7678Z",
+                                        fill: "#494949"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("defs", {
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("clipPath", {
+                                        id: "clip0_9546_221079",
+                                        children: /*#__PURE__*/ jsxRuntime.jsx("rect", {
+                                            width: "20",
+                                            height: "21",
+                                            fill: "white",
+                                            transform: "translate(0.5)"
+                                        })
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    isRelated ? /*#__PURE__*/ jsxRuntime.jsx(ProductNotFoundRelated.default, {
+                        assignProductNoTags: assignProductNoTags,
+                        relatedTagString: relatedTagString,
+                        noAssignedProduct: noAssignedProduct
+                    }) : /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: "gp-text-sm gp-font-normal gp-text-[#212121]",
+                        children: textWarning
+                    })
+                ]
+            }),
+            isInstant ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                children: storefrontToken ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    onClick: ()=>{
+                        if (shopifyLink) {
+                            window.open(shopifyLink, '_blank');
+                        }
+                    },
+                    "aria-hidden": "true",
+                    className: "gp-cursor-pointer gp-text-sm gp-font-medium gp-text-[#3C67FF] gp-no-underline",
+                    children: textLink
+                }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    onClick: ()=>{
+                        window.parent.postMessage('toggleImportProductModal');
+                    },
+                    "aria-hidden": "true",
+                    className: "gp-cursor-pointer gp-text-sm gp-font-medium gp-text-[#3C67FF] gp-no-underline",
+                    children: "Import from Shopify"
+                })
+            }) : isRelated ? null : /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "gp-text-sm gp-font-normal gp-text-[#212121]",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        "aria-hidden": true,
+                        onClick: ()=>{
+                            if (shopifyLink) {
+                                window.open(shopifyLink, '_blank');
+                            }
+                        },
+                        className: "gp-cursor-pointer gp-font-medium gp-text-[#3C67FF] hover:gp-underline",
+                        children: textLink
+                    }),
+                    ` `,
+                    "or pick another ",
+                    isCollection ? 'collection' : 'product'
+                ]
+            }),
+            core.filterToolbarPreview(children, true)
+        ]
     });
 };
 

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

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('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__*/ jsxRuntime.jsx("div", {
+        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: "gp-flex gp-flex-col gp-gap-[4px] gp-text-14 gp-leading-6",
+            children: [
+                noAssignedProduct && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "gp-text-[#212121]",
+                    children: "There are no products in your store."
+                }),
+                assignProductNoTags && !noAssignedProduct ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: "gp-text-[#212121]",
+                    children: [
+                        "The ",
+                        /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsxs("div", {
+                    className: "gp-text-[#212121]",
+                    children: [
+                        "There are no products in the same ",
+                        relatedTagString,
+                        " as the ",
+                        /*#__PURE__*/ jsxRuntime.jsx("button", {
+                            className: "gp-no-underline gp-text-[#3C67FF]",
+                            onClick: openAssignProduct,
+                            children: "assigned product"
+                        }),
+                        " being previewed."
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx("button", {
+                    className: "gp-text-[#3C67FF] gp-font-medium",
+                    onClick: changeConditionRelatedProduct,
+                    children: "Change condition"
+                })
+            ]
+        })
+    });
+};
+
+exports.default = ProductNotFoundRelated;

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -8,8 +7,6 @@ var core = require('@gem-sdk/core');
 var React = require('react');
 var Text = require('../../text/components/Text.js');
 var common = require('./ProductVariants/common.js');
-var NoDataState = require('../../common/components/NoDataState.js');
-var TooltipHover = require('../../common/components/TooltipHover.js');
 
 const ProductPrice = (props)=>{
     const { builderAttrs, style, children, setting, styles, builderProps, classNames } = props;
@@ -49,7 +46,7 @@ const ProductPrice = (props)=>{
     const priceCompare = React.useMemo(()=>{
         if (bundleItem?.discountValue) {
             if (useProductCompareAtPrice) {
-                return (salePrice || price) * quantityProduct;
+                return salePrice * quantityProduct;
             }
             return price * quantityProduct;
         }
@@ -140,47 +137,30 @@ const ProductPrice = (props)=>{
         id: `shopify-text-element-${builderProps?.uid}`,
         "data-product-id": currentProductId,
         children: [
-            !displayPrice && mode === 'edit' ? /*#__PURE__*/ jsxRuntime.jsx(TooltipHover.default, {
-                enable: true,
-                text: 'Not be displayed when published',
-                position: 'bottom',
-                width: '205px',
-                children: /*#__PURE__*/ jsxRuntime.jsx(NoDataState.default, {
-                    builderAttrs: builderAttrs,
-                    elementType: "secondary",
-                    children: children,
-                    description: "No compare price",
-                    rawMode: true
-                })
-            }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(Text.default, {
-                        styles: styles,
-                        setting: {
-                            text: moneyFormatted,
-                            excludeFlex: true
-                        },
-                        style: {
-                            ...core.getStyleShadow({
-                                value: setting?.boxShadowPrice,
-                                styleAppliedFor: 'box-shadow',
-                                isEnableShadow: setting?.hasBoxShadowPrice
-                            }),
-                            ...core.getGlobalColorStateStyle('c', styles?.parentTextColor),
-                            ...setting?.opacityPrice ? core.makeStyle({
-                                op: `${setting?.opacityPrice}%`
-                            }) : {}
-                        },
-                        className: core.cls({
-                            'gp-money': styles?.priceType === 'regular',
-                            'gp-product-compare-price': styles?.priceType === 'compare',
-                            'gp-line-through': styles?.priceType === 'compare' && styles?.lineThrough && hasThickness
-                        }, core.getGlobalColorStateClass('text', styles?.parentTextColor), colorClass, classNames)
+            /*#__PURE__*/ jsxRuntime.jsx(Text.default, {
+                styles: styles,
+                setting: {
+                    text: moneyFormatted,
+                    excludeFlex: true
+                },
+                style: {
+                    ...core.getStyleShadow({
+                        value: setting?.boxShadowPrice,
+                        styleAppliedFor: 'box-shadow',
+                        isEnableShadow: setting?.hasBoxShadowPrice
                     }),
-                    children
-                ]
+                    ...core.getGlobalColorStateStyle('c', styles?.parentTextColor),
+                    ...setting?.opacityPrice ? core.makeStyle({
+                        op: `${setting?.opacityPrice}%`
+                    }) : {}
+                },
+                className: core.cls({
+                    'gp-money': styles?.priceType === 'regular',
+                    'gp-product-compare-price': styles?.priceType === 'compare',
+                    'gp-line-through': styles?.priceType === 'compare' && styles?.lineThrough && hasThickness
+                }, core.getGlobalColorStateClass('text', styles?.parentTextColor), colorClass, classNames)
             }),
-            core.filterToolbarPreview(children, true)
+            children
         ]
     });
 };

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -22,39 +21,6 @@ const ProductProperties = ({ setting, styles, builderProps })=>{
     const [checkboxValue, setCheckboxValue] = React.useState([]);
     const prevName = core.usePrevious(name);
     const product = core.useProduct();
-    const ref = React.useRef(null);
-    const { trigger } = core.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 = React.useCallback((callback)=>{
-        //@ts-ignore
-        if (window.interactionLoaded) {
-            callback();
-            return;
-        }
-        window.addEventListener('gp:flow-actions-loaded', ()=>{
-            callback();
-        });
-    }, []);
-    React.useEffect(()=>{
-        if (type === 'dropdown') {
-            const valueDefault = ref.current?.querySelector('select')?.value;
-            interactionListenerLoaded(()=>{
-                dispatchEventInteraction(valueDefault, ref.current);
-            });
-        }
-    }, []);
     React.useEffect(()=>{
         if (name) {
             if (!prevName) {
@@ -150,13 +116,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
             });
@@ -165,7 +129,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
         });
@@ -212,7 +175,6 @@ const ProductProperties = ({ setting, styles, builderProps })=>{
         id: `shopify-text-element-${builderProps?.uid}`,
         "data-product-id": currentProductId,
         "data-id": builderProps?.uid,
-        ref: ref,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 children: /*#__PURE__*/ jsxRuntime.jsxs("label", {

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

@@ -54,15 +54,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 core.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="${{
         ...core.makeStyleResponsive('ta', textAlign)
     }}"
@@ -97,7 +98,10 @@ const ProductProperties = ({ setting, styles, builderProps, advanced, pageContex
         setting,
         styles,
         builderProps,
-        pageContext
+        pageContext,
+        attributes: {
+            dataId: builderProps?.uid || ''
+        }
     }))}
         ${core.RenderIf(type === 'checkbox' || type === 'radio', ProductPropertyChoice_liquid.default({
         setting: {
@@ -108,13 +112,19 @@ const ProductProperties = ({ setting, styles, builderProps, advanced, pageContex
         },
         styles,
         builderProps,
-        pageContext
+        pageContext,
+        attributes: {
+            dataId: builderProps?.uid || ''
+        }
     }))}
         ${core.RenderIf(type === 'text' || type === 'textarea' || type === 'email' || type === 'hidden', ProductPropertyInput_liquid.default({
         setting,
         styles,
         builderProps,
-        pageContext
+        pageContext,
+        attributes: {
+            dataId: builderProps?.uid || ''
+        }
     }))}
         <div
         data-slot-type="message"

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -6,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var Col = require('../../../grid/components/Col.js');
 var Row = require('../../../grid/components/Row.js');
-var core = require('@gem-sdk/core');
 var React = require('react');
 require('../../../modal/components/confirm.js');
 var Modal = require('../../../modal/components/Modal.js');
+var core = require('@gem-sdk/core');
 var ProductButton = require('../ProductButton.js');
 var ProductPrice = require('../ProductPrice.js');
 var ProductQuantity = require('../ProductQuantity.js');

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });