@gem-sdk/components 2.2.0-staging.53 → 2.2.0-staging.56

package/dist/cjs/accordion/components/AccordionItem.liquid.js

@@ -71,10 +71,17 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
         return '';
     };
     const composeColorIconStyle = ()=>{
-        return `.${parentUid}.gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon, .${parentUid}.gp-accordion-item-${parentUid}-${index}:hover .gp-icon {
-                  color: ${isShow ? color?.active : color?.hover}
-              } {
-          }`;
+        return `.gp-accordion-item-${parentUid}-${index}:hover 
+      {
+        .gp-collapsible-icon { 
+          color: ${isShow ? color?.active : color?.hover} 
+        }
+
+        .gp-icon { 
+            color: ${isShow ? iconColor?.active : iconColor?.hover} 
+        }
+      }
+    `;
     };
     const getTemplateRow = ()=>{
         return {
@@ -82,16 +89,6 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
         };
     };
     return core.template`
-  <style title="gp-accordion-item-style">
-  .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-hover, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-hover 
-     {
-        color: ${color?.hover} !important
-      }
-    .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-active, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-active
-     {
-        color: ${color?.active} !important
-      }
-  </style>
   <div class="gp-overflow-clip" style="${{
         ...widthStyle,
         '--height-iconCollapseSize': `${iconCollapseSize || 16}px`,

package/dist/cjs/button/components/Button.liquid.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var core = require('@gem-sdk/core');
 var helpers = require('../../helpers.js');
 
-const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isForceValue = false })=>{
+const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isUseTranslatedValue = false })=>{
     const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles;
     const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true } = setting;
     const [wrapStyle, restStyle] = core.splitStyle([
@@ -50,7 +50,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
       color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
     }
 
-     .${builderProps?.uid} .gp-button-icon {
+    .${builderProps?.uid} .gp-button-icon {
       color: ${core.getSingleColorVariable(styles?.textColor?.normal)};
     }
 
@@ -63,14 +63,14 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
     }
 
     .${builderProps?.uid} .gp-product-dot-price {
-       color: ${core.getSingleColorVariable(styles?.textColor?.normal)};
+      color: ${core.getSingleColorVariable(styles?.textColor?.normal)};
     }
 
     .${builderProps?.uid}:hover .gp-product-dot-price {
       color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
     }
   `;
-    const labelValDisplay = isForceValue ? label : helpers.getDynamicSourceLocales({
+    const labelValDisplay = !isUseTranslatedValue ? label : helpers.getDynamicSourceLocales({
         val: label,
         uid: builderProps?.uidTranslate ?? builderProps?.uid,
         settingId: translate ?? 'label',

package/dist/cjs/post-purchase/product/components/ProductVariant.js

@@ -30,6 +30,7 @@ const PostPurchaseProductVariants = ({ builderProps, style, styles, setting })=>
     const { selectedOptions, setSelectedOption, forceSelectedOption } = core.useSelectedOption();
     const variantsWidth = core.makeStyleResponsive('w', core.makeWidth(width, fullWidth));
     const [variantId, setVariantId] = React.useState('');
+    const mode = core.useEditorMode();
     React.useEffect(()=>{
         const url = new URL(window.location.href);
         const variantParam = url.searchParams.get(VARIANT_PARAM_PATH);
@@ -231,10 +232,10 @@ const PostPurchaseProductVariants = ({ builderProps, style, styles, setting })=>
                 })
             ]
         }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
-            children: /*#__PURE__*/ jsxRuntime.jsx("p", {
+            children: mode === 'edit' ? /*#__PURE__*/ jsxRuntime.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"
-            })
+            }) : null
         })
     });
 };

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

@@ -211,8 +211,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
     <gp-product-button
       class="gp-product-button"
       gp-data-wrapper="true"
-      label-out-of-Stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
-      label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
+      gp-label-out-of-stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
+      gp-label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
       gp-data='${JSON.stringify({
         setting: {
             actionEffect: setting?.actionEffect,
@@ -310,7 +310,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
         },
         pageContext,
         nodePrice: composeNodePrice(),
-        isForceValue: true
+        isUseTranslatedValue: true
     })}
     </gp-product-button>
     ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-button.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-product-button.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}

package/dist/cjs/third-party/components/Releasit.liquid.js

@@ -7,7 +7,6 @@ var core = require('@gem-sdk/core');
 
 const Releasit = ({ setting, advanced })=>{
     const { align, version, appBlockId } = setting ?? {};
-    console.log('version', version);
     return version === 'v2' ? thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}!gp-block`) : core.template`
     <div
       class="${advanced?.cssClass}"

package/dist/cjs/video/components/HTML5Embed.js

@@ -36,7 +36,7 @@ const HTML5Embed = (props)=>{
                 style: props.style,
                 controls: props.controls,
                 loop: props.loop,
-                muted: props.autoplay ? true : props.muted,
+                muted: props.muted ? true : undefined,
                 autoPlay: props.autoplay,
                 title: props.title,
                 preload: props.autoplay ? 'metadata' : 'none',

package/dist/cjs/video/components/HTML5Embed.liquid.js

@@ -60,7 +60,7 @@ const HTML5Embed = (props)=>{
       style="${props.style}"
       ${props.controls ? 'controls' : undefined}
       ${props.loop ? 'loop' : undefined}
-      ${props.autoplay ? 'muted' : undefined}
+      ${props.muted ? 'muted' : undefined}
       ${props.autoplay && !preloadThumbnail ? 'autoplay' : undefined}
       title="${props.title}"
       preload="${props.autoplay && !preloadThumbnail || offLazyVideo ? 'metadata' : 'none'}"

package/dist/esm/accordion/components/AccordionItem.liquid.js

@@ -67,10 +67,17 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
         return '';
     };
     const composeColorIconStyle = ()=>{
-        return `.${parentUid}.gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon, .${parentUid}.gp-accordion-item-${parentUid}-${index}:hover .gp-icon {
-                  color: ${isShow ? color?.active : color?.hover}
-              } {
-          }`;
+        return `.gp-accordion-item-${parentUid}-${index}:hover 
+      {
+        .gp-collapsible-icon { 
+          color: ${isShow ? color?.active : color?.hover} 
+        }
+
+        .gp-icon { 
+            color: ${isShow ? iconColor?.active : iconColor?.hover} 
+        }
+      }
+    `;
     };
     const getTemplateRow = ()=>{
         return {
@@ -78,16 +85,6 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
         };
     };
     return template`
-  <style title="gp-accordion-item-style">
-  .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-hover, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-hover 
-     {
-        color: ${color?.hover} !important
-      }
-    .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-active, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-active
-     {
-        color: ${color?.active} !important
-      }
-  </style>
   <div class="gp-overflow-clip" style="${{
         ...widthStyle,
         '--height-iconCollapseSize': `${iconCollapseSize || 16}px`,

package/dist/esm/button/components/Button.liquid.js

@@ -1,7 +1,7 @@
 import { splitStyle, makeStyleResponsive, makeGlobalSize, composeTypographyClassName, composeTypographyStyle, composeBorderCss, composeCornerCss, getSingleColorVariable, template, cls, getGlobalColorStateClass, getGlobalColorStateStyle, composeRadius, getStyleShadowState, composeSize, getGradientBgrStyleForButton, RenderIf } from '@gem-sdk/core';
 import { getInsertLinkData, getDynamicSourceLocales } from '../../helpers.js';
 
-const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isForceValue = false })=>{
+const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isUseTranslatedValue = false })=>{
     const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles;
     const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true } = setting;
     const [wrapStyle, restStyle] = splitStyle([
@@ -46,7 +46,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
       color: ${getSingleColorVariable(styles?.textColor?.hover)};
     }
 
-     .${builderProps?.uid} .gp-button-icon {
+    .${builderProps?.uid} .gp-button-icon {
       color: ${getSingleColorVariable(styles?.textColor?.normal)};
     }
 
@@ -59,14 +59,14 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
     }
 
     .${builderProps?.uid} .gp-product-dot-price {
-       color: ${getSingleColorVariable(styles?.textColor?.normal)};
+      color: ${getSingleColorVariable(styles?.textColor?.normal)};
     }
 
     .${builderProps?.uid}:hover .gp-product-dot-price {
       color: ${getSingleColorVariable(styles?.textColor?.hover)};
     }
   `;
-    const labelValDisplay = isForceValue ? label : getDynamicSourceLocales({
+    const labelValDisplay = !isUseTranslatedValue ? label : getDynamicSourceLocales({
         val: label,
         uid: builderProps?.uidTranslate ?? builderProps?.uid,
         settingId: translate ?? 'label',

package/dist/esm/post-purchase/product/components/ProductVariant.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useVariants, useProduct, useIsSyncProduct, useSelectedOption, makeStyleResponsive, makeWidth, useInitialSwatchesOptions, useSwatchesOptions, optionLayoutStyle, cls, OptionSpecialStyle, getSelectedVariant } from '@gem-sdk/core';
+import { useVariants, useProduct, useIsSyncProduct, useSelectedOption, makeStyleResponsive, makeWidth, useEditorMode, useInitialSwatchesOptions, useSwatchesOptions, optionLayoutStyle, cls, OptionSpecialStyle, getSelectedVariant } from '@gem-sdk/core';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { checkDefaultVariant } from '../../../product/helpers/product.js';
 import { useTransition } from '../../../product/components/ProductVariants/common.js';
@@ -26,6 +26,7 @@ const PostPurchaseProductVariants = ({ builderProps, style, styles, setting })=>
     const { selectedOptions, setSelectedOption, forceSelectedOption } = useSelectedOption();
     const variantsWidth = makeStyleResponsive('w', makeWidth(width, fullWidth));
     const [variantId, setVariantId] = useState('');
+    const mode = useEditorMode();
     useEffect(()=>{
         const url = new URL(window.location.href);
         const variantParam = url.searchParams.get(VARIANT_PARAM_PATH);
@@ -227,10 +228,10 @@ const PostPurchaseProductVariants = ({ builderProps, style, styles, setting })=>
                 })
             ]
         }) : /*#__PURE__*/ jsx("div", {
-            children: /*#__PURE__*/ jsx("p", {
+            children: mode === 'edit' ? /*#__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"
-            })
+            }) : null
         })
     });
 };

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

@@ -207,8 +207,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
     <gp-product-button
       class="gp-product-button"
       gp-data-wrapper="true"
-      label-out-of-Stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
-      label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
+      gp-label-out-of-stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
+      gp-label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
       gp-data='${JSON.stringify({
         setting: {
             actionEffect: setting?.actionEffect,
@@ -306,7 +306,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
         },
         pageContext,
         nodePrice: composeNodePrice(),
-        isForceValue: true
+        isUseTranslatedValue: true
     })}
     </gp-product-button>
     ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-button.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-product-button.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}

package/dist/esm/third-party/components/Releasit.liquid.js

@@ -3,7 +3,6 @@ import { template, makeStyleResponsive } from '@gem-sdk/core';
 
 const Releasit = ({ setting, advanced })=>{
     const { align, version, appBlockId } = setting ?? {};
-    console.log('version', version);
     return version === 'v2' ? getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}!gp-block`) : template`
     <div
       class="${advanced?.cssClass}"

package/dist/esm/video/components/HTML5Embed.js

@@ -32,7 +32,7 @@ const HTML5Embed = (props)=>{
                 style: props.style,
                 controls: props.controls,
                 loop: props.loop,
-                muted: props.autoplay ? true : props.muted,
+                muted: props.muted ? true : undefined,
                 autoPlay: props.autoplay,
                 title: props.title,
                 preload: props.autoplay ? 'metadata' : 'none',

package/dist/esm/video/components/HTML5Embed.liquid.js

@@ -56,7 +56,7 @@ const HTML5Embed = (props)=>{
       style="${props.style}"
       ${props.controls ? 'controls' : undefined}
       ${props.loop ? 'loop' : undefined}
-      ${props.autoplay ? 'muted' : undefined}
+      ${props.muted ? 'muted' : undefined}
       ${props.autoplay && !preloadThumbnail ? 'autoplay' : undefined}
       title="${props.title}"
       preload="${props.autoplay && !preloadThumbnail || offLazyVideo ? 'metadata' : 'none'}"

package/dist/types/index.d.ts

@@ -5437,11 +5437,11 @@ type ButtonLiquidProps = MixedProps & ButtonProps & {
     advanced?: any;
     pageContext?: PageContext;
     nodePrice?: string | null;
-    isForceValue?: boolean;
+    isUseTranslatedValue?: boolean;
 } & {
     dataId?: string;
 };
-declare const Button: ({ className, builderProps, customAttrs, pageContext, setting, styles, style, wrapClassName, advanced, nodePrice, dataId, isForceValue, }: ButtonLiquidProps) => string;
+declare const Button: ({ className, builderProps, customAttrs, pageContext, setting, styles, style, wrapClassName, advanced, nodePrice, dataId, isUseTranslatedValue, }: ButtonLiquidProps) => string;
 
 declare const Coupon: ({ setting, builderProps, builderAttrs, style, styles, advanced, pageContext, }: _gem_sdk_core.BaseProps<{
     copyContent?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "2.2.0-staging.53",
+  "version": "2.2.0-staging.56",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
     "format": "prettier --write \"./src/**/*.{ts,tsx}\""
   },
   "devDependencies": {
-    "@gem-sdk/core": "2.2.0-staging.50",
+    "@gem-sdk/core": "2.2.0-staging.56",
     "@gem-sdk/styles": "2.2.0-staging.52",
     "@types/react-transition-group": "^4.4.5"
   },