@gem-sdk/components 10.0.2 → 12.0.0-staging.0

package/dist/cjs/post-purchase/product/settings/product-description/configs/settings-v2.js

@@ -1 +1 @@
-"use strict";const settingV2=[{id:"setting",controls:[{id:"textGroup",type:"group",label:"Text",controls:[{id:"text",label:"Content",type:"textarea",default:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}]}]},{id:"style",controls:[{id:"typo",label:"Label",type:"typography-post-purchase",default:{fontSize:"default",textColor:"default",fontWeight:"bold",textTransform:"none"}},{id:"textAlign",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"text",tooltip:"Align left",iconName:"polaris-text-align-left"},{label:"Center",value:"center",type:"text",tooltip:"Align center",iconName:"polaris-text-align-center"},{label:"Right",value:"right",type:"text",tooltip:"Align right",iconName:"polaris-text-align-right"}],default:"left"}]}];exports.settingV2=settingV2;
+"use strict";const settingV2=[{id:"setting",controls:[{id:"textGroup",type:"group",label:"Text",controls:[{id:"text",label:"Content",type:"textarea",default:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}]}]},{id:"style",controls:[{id:"typo",label:"Label",type:"typography-post-purchase",default:{fontSize:"default",textColor:"default",fontWeight:"bold",textTransform:"none"}},{id:"textAlign",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"text",tooltip:"Align left",iconName:"polaris-text-align-left"},{label:"Center",value:"center",type:"text",tooltip:"Align center",iconName:"polaris-text-align-center"},{label:"Right",value:"right",type:"text",tooltip:"Align right",iconName:"polaris-text-align-right"}],default:"left"},{id:"direction",label:"Direction",type:"option:value",options:[{label:"LTR",value:"ltr"},{label:"RTL",value:"rtl"}],default:"ltr"}]}];exports.settingV2=settingV2;

package/dist/cjs/post-purchase/product/settings/product-description/configs/ui-v2.js

@@ -1 +1 @@
-"use strict";const SettingUIV2=[{label:{en:"Text"},controls:[{type:"control",label:{en:""},setting:{id:"typo"},layout:"vertical"},{type:"control",setting:{id:"textAlign"},label:{en:"Text align"}}]}];exports.SettingUIV2=SettingUIV2;
+"use strict";const SettingUIV2=[{label:{en:"Text"},controls:[{type:"control",label:{en:"Direction"},setting:{id:"direction"},controlChangeTrigger:{settings:[{action:{controlId:"textAlign",newValue:"right",groupType:"style",controlType:"style"},condition:"direction === 'rtl' && textAlign === 'left'",source:["direction","textAlign"]},{action:{controlId:"textAlign",newValue:"left",groupType:"style",controlType:"style"},condition:"direction === 'ltr' && textAlign === 'right'",source:["direction","textAlign"]}],options:{noRecordHistory:!0}}},{type:"control",setting:{id:"typo"},layout:"vertical"},{type:"control",setting:{id:"textAlign"},label:{en:"Text align"}}]}];exports.SettingUIV2=SettingUIV2;

package/dist/cjs/post-purchase/product/settings/product-title/configs/settings-v2.js

@@ -1 +1 @@
-"use strict";const settingV2=[{id:"setting",controls:[{id:"textGroup",type:"group",label:"Text",controls:[{id:"text",label:"Content",type:"textarea",default:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}]}]},{id:"style",controls:[{id:"typo",label:"Label",type:"typography-post-purchase",default:{fontSize:"xlarge",textColor:"default",fontWeight:"bold",textTransform:"none"}},{id:"textAlign",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"text",tooltip:"Align left",iconName:"polaris-text-align-left"},{label:"Center",value:"center",type:"text",tooltip:"Align center",iconName:"polaris-text-align-center"},{label:"Right",value:"right",type:"text",tooltip:"Align right",iconName:"polaris-text-align-right"}],default:"left"}]}];exports.settingV2=settingV2;
+"use strict";const settingV2=[{id:"setting",controls:[{id:"textGroup",type:"group",label:"Text",controls:[{id:"text",label:"Content",type:"textarea",default:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}]}]},{id:"style",controls:[{id:"typo",label:"Label",type:"typography-post-purchase",default:{fontSize:"xlarge",textColor:"default",fontWeight:"bold",textTransform:"none"}},{id:"textAlign",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"text",tooltip:"Align left",iconName:"polaris-text-align-left"},{label:"Center",value:"center",type:"text",tooltip:"Align center",iconName:"polaris-text-align-center"},{label:"Right",value:"right",type:"text",tooltip:"Align right",iconName:"polaris-text-align-right"}],default:"left"},{id:"direction",label:"Direction",type:"option:value",options:[{label:"LTR",value:"ltr"},{label:"RTL",value:"rtl"}],default:"ltr"}]}];exports.settingV2=settingV2;

package/dist/cjs/post-purchase/product/settings/product-title/configs/ui-v2.js

@@ -1 +1 @@
-"use strict";const SettingUIV2=[{label:{en:"Text"},controls:[{type:"control",setting:{id:"typo"},layout:"vertical"},{type:"control",setting:{id:"textAlign"},label:{en:"Text align"}}]}];exports.SettingUIV2=SettingUIV2;
+"use strict";const SettingUIV2=[{label:{en:"Text"},controls:[{type:"control",label:{en:"Direction"},setting:{id:"direction"},controlChangeTrigger:{settings:[{action:{controlId:"textAlign",newValue:"right",groupType:"style",controlType:"style"},condition:"direction === 'rtl' && textAlign === 'left'",source:["direction","textAlign"]},{action:{controlId:"textAlign",newValue:"left",groupType:"style",controlType:"style"},condition:"direction === 'ltr' && textAlign === 'right'",source:["direction","textAlign"]}],options:{noRecordHistory:!0}}},{type:"control",setting:{id:"typo"},layout:"vertical"},{type:"control",setting:{id:"textAlign"},label:{en:"Text align"}}]}];exports.SettingUIV2=SettingUIV2;

package/dist/cjs/product/components/product-bundle/ProductBundleDiscount.liquid.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../../helpers.js"),system=require("@gem-sdk/system"),styles=require("./common/styles.js"),classes=require("./common/classes.js"),ProductBundleDiscountChildrenItem_liquid=require("./ProductBundleDiscountChildrenItem.liquid.js");const ProductBundleDiscount=({rawChildren:e,setting:t,styles:s,advanced:r,style:d})=>{let a=t?.hasPreSelectItem?t?.selectItemDefault??0:-1,i=e=>a===e,l=(r,d)=>ProductBundleDiscountChildrenItem_liquid.default({index:d,rawChildrenItem:e?.[d],setting:t,styles:s,isSelected:i(d),bundleItem:r}),u=system.createStyle(styles.getSizeSettings(s)?.gap),c=system.createClass(classes.getContainerClasses(t,r?.cssClass)),n=system.createStyle(styles.getContainerStyles(u,s,d)),o=system.createStateOrContext({styles:s,settings:{useProductCompareAtPrice:t?.useProductCompareAtPrice,selectItemDefault:t?.selectItemDefault,hideNoDiscountItem:t?.hideNoDiscountItem,hasPreSelectItem:t?.hasPreSelectItem,iconItemColor:t?.iconItemColor}}),p=()=>core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-product-bundle-discount-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-product-bundle-discount-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../../helpers.js"),system=require("@gem-sdk/system"),styles=require("./common/styles.js"),classes=require("./common/classes.js"),ProductBundleDiscountChildrenItem_liquid=require("./ProductBundleDiscountChildrenItem.liquid.js");const ProductBundleDiscount=({rawChildren:e,setting:t,styles:s,advanced:r,style:a})=>{let d=t?.hasPreSelectItem?t?.selectItemDefault??0:-1,i=e=>d===e,l=(r,a)=>ProductBundleDiscountChildrenItem_liquid.default({index:a,rawChildrenItem:e?.[a],setting:t,styles:s,isSelected:i(a),bundleItem:r}),n=system.createStyle(styles.getSizeSettings(s)?.gap),u=system.createClass(classes.getContainerClasses(t,r?.cssClass)),o=system.createStyle(styles.getContainerStyles(n,s,a)),c=system.createStateOrContext({styles:s,settings:{useProductCompareAtPrice:t?.useProductCompareAtPrice,selectItemDefault:t?.selectItemDefault,hideNoDiscountItem:t?.hideNoDiscountItem,hasPreSelectItem:t?.hasPreSelectItem,iconItemColor:t?.iconItemColor,applyToInBetweenQuantities:t?.applyToInBetweenQuantities}}),p=()=>core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-product-bundle-discount-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-product-bundle-discount-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return core.template`
     <gp-product-bundle-discount
-      gp-data='${JSON.stringify(o)}'
-      style="${n}"
-      class="${c}">
+      gp-data='${JSON.stringify(c)}'
+      style="${o}"
+      class="${u}">
       ${system.Liquid(`
         {%- assign gempages_product_bundle = product.metafields.gp_discount.gp_discount_selected_products -%}
         {%  assign productBundleItem = gempages_product_bundle | split: '($1)'  %}

package/dist/cjs/product/components/product-bundle/setting/configs/settings.js

@@ -1 +1 @@
-"use strict";var verticalOne=require("../../../../settings/bundle-layout/vertical-one.js"),verticalTwo=require("../../../../settings/bundle-layout/vertical-two.js"),verticalThree=require("../../../../settings/bundle-layout/vertical-three.js"),horizontalThree=require("../../../../settings/bundle-layout/horizontal-three.js"),horizontalTwo=require("../../../../settings/bundle-layout/horizontal-two.js"),horizontalOne=require("../../../../settings/bundle-layout/horizontal-one.js");const ProductBundleDiscountSettings=[{id:"setting",controls:[{id:"enableDisplayCondition",type:"toggle",default:!0},{id:"childItem",label:"Item management",type:"product-bundle-child-item",default:[],childTemplate:{verticalOne:verticalOne.verticalOne,verticalTwo:verticalTwo.verticalTwo,verticalThree:verticalThree.verticalThree,horizontalOne:horizontalOne.horizontalOne,horizontalTwo:horizontalTwo.horizontalTwo,horizontalThree:horizontalThree.horizontalThree}},{id:"hideNoDiscountItem",default:!1,type:"select",options:[{label:"All bundle",value:!1},{label:"Hide all no-discount bundles",value:!0}]},{id:"bundleItems",type:"bundleItem",default:void 0},{id:"hasPreSelectItem",type:"toggle",default:!0},{id:"useProductCompareAtPrice",default:!1,type:"select",options:[{label:"Total product price",value:!1},{label:"Total product compare-at price",value:!0}]},{id:"selectItemDefault",type:"select-product-bundle",hide:!0,default:0},{id:"layout",label:"Layout",type:"layout-segment",iconViewBox:"0 0 120 80",enableItemBackground:!0,enableTooltip:!0,default:"vertical-layout",options:[{label:"Vertical layout",value:"vertical-layout",type:"product-bundle"},{label:"Horizontal layout",value:"horizontal-layout",type:"product-bundle"}]},{id:"enableIcon",type:"toggle",default:!0},{id:"iconPosition",label:"Layout",type:"option:illustration",default:"center",options:[{label:"Top",value:"baseline",svgName:"gp-bundle-horizontal-base-line-layout"},{label:"Center",value:"center",svgName:"gp-bundle-horizontal-center-layout"}]},{id:"iconHorizontalPosition",label:"Layout",type:"option:illustration",default:"center",options:[{label:"Left",value:"baseline",svgName:"gp-bundle-vertical-baseline-layout"},{label:"Center",value:"center",svgName:"gp-bundle-vertical-center-layout"}]},{id:"iconSize",type:"input:stepper",devices:{desktop:{default:24},tablet:{default:24},mobile:{default:24}},min:0},{id:"iconSpacing",type:"dropdown:input",hideUnit:!1,inputType:"number",default:"12px",displayOptions:[{label:"Small",value:"8px",showValue:!0},{label:"Medium",value:"16px",showValue:!0},{label:"Large",value:"24px",showValue:!0}]},{id:"iconItemColor",type:"color-picker-v2",label:"Icon",default:"line-2"}]},{id:"style",controls:[{id:"size",type:"size-setting",devices:{desktop:{default:{padding:{type:"custom",top:"24px",left:"16px",bottom:"24px",right:"16px"},gap:"12px",width:"100%"}}},settingConfig:{width:{name:"Width",displayOptions:["full"]},padding:{name:"Padding",paddingConfig:{small:{vertical:"8px",horizontal:"8px"},medium:{vertical:"16px",horizontal:"16px"},large:{vertical:"24px",horizontal:"24px"}}}},hiddenSettings:["shape","height"],hiddenShowMore:!0},{id:"behavior-state",type:"behavior-state",controls:[{id:"borderBundle",type:"border",label:"Border",default:{normal:{border:"solid",borderWidth:"1px",width:"1px 1px 1px 1px",color:"line-2",isCustom:!1},hover:{border:"solid",borderWidth:"1px",width:"1px 1px 1px 1px",color:"line-2",isCustom:!1},active:{border:"solid",borderWidth:"1px",width:"1px 1px 1px 1px",color:"#FF614C",isCustom:!1}},state:{hover:!0,normal:!0,active:!0},compoDefaultValue:{hover:{border:"solid",borderWidth:"1px",width:"1px 1px 1px 1px",color:"line-3",isCustom:!1}}},{id:"iconColor",type:"color-picker-v2",label:"Icon",default:{normal:"line-2",active:"#FF614C"},state:{hover:!0,normal:!0,active:!0},compoDefaultValue:{hover:"text-3"}},{id:"backgroundColor",type:"color-picker-v2",label:"Background",default:{normal:"#FFFFFF",active:"#FFF2F0"},state:{hover:!0,normal:!0,active:!0},compoDefaultValue:{hover:"bg-2"}},{id:"hasBoxShadowBundle",type:"toggle",label:"Enable Button Shadow"},{id:"boxShadowBundle",type:"shadow-v2",default:{},state:{normal:!0,hover:!0,active:!0}},{id:"roundedBundle",type:"radius-preset",label:"Border Radius",default:{normal:{radiusType:"none"}},state:{hover:!0,normal:!0,active:!0}}]},{id:"align",label:"Alignment",type:"segment",options:[{label:"Left",value:"left",type:"align"},{label:"Center",value:"center",type:"align"},{label:"Right",value:"right",type:"align"}],default:"left"},{id:"enableHoverEffect",type:"toggle",default:!0},{id:"enableActiveEffect",type:"toggle",default:!0}]}];exports.ProductBundleDiscountSettings=ProductBundleDiscountSettings;
+"use strict";var verticalOne=require("../../../../settings/bundle-layout/vertical-one.js"),verticalTwo=require("../../../../settings/bundle-layout/vertical-two.js"),verticalThree=require("../../../../settings/bundle-layout/vertical-three.js"),horizontalThree=require("../../../../settings/bundle-layout/horizontal-three.js"),horizontalTwo=require("../../../../settings/bundle-layout/horizontal-two.js"),horizontalOne=require("../../../../settings/bundle-layout/horizontal-one.js");const ProductBundleDiscountSettings=[{id:"setting",controls:[{id:"enableDisplayCondition",type:"toggle",default:!0},{id:"childItem",label:"Item management",type:"product-bundle-child-item",default:[],childTemplate:{verticalOne:verticalOne.verticalOne,verticalTwo:verticalTwo.verticalTwo,verticalThree:verticalThree.verticalThree,horizontalOne:horizontalOne.horizontalOne,horizontalTwo:horizontalTwo.horizontalTwo,horizontalThree:horizontalThree.horizontalThree}},{id:"applyToInBetweenQuantities",type:"toggle",default:!1},{id:"hideNoDiscountItem",default:!1,type:"select",options:[{label:"All bundle",value:!1},{label:"Hide all no-discount bundles",value:!0}]},{id:"bundleItems",type:"bundleItem",default:void 0},{id:"hasPreSelectItem",type:"toggle",default:!0},{id:"useProductCompareAtPrice",default:!1,type:"select",options:[{label:"Total product price",value:!1},{label:"Total product compare-at price",value:!0}]},{id:"selectItemDefault",type:"select-product-bundle",hide:!0,default:0},{id:"layout",label:"Layout",type:"layout-segment",iconViewBox:"0 0 120 80",enableItemBackground:!0,enableTooltip:!0,default:"vertical-layout",options:[{label:"Vertical layout",value:"vertical-layout",type:"product-bundle"},{label:"Horizontal layout",value:"horizontal-layout",type:"product-bundle"}]},{id:"enableIcon",type:"toggle",default:!0},{id:"iconPosition",label:"Layout",type:"option:illustration",default:"center",options:[{label:"Top",value:"baseline",svgName:"gp-bundle-horizontal-base-line-layout"},{label:"Center",value:"center",svgName:"gp-bundle-horizontal-center-layout"}]},{id:"iconHorizontalPosition",label:"Layout",type:"option:illustration",default:"center",options:[{label:"Left",value:"baseline",svgName:"gp-bundle-vertical-baseline-layout"},{label:"Center",value:"center",svgName:"gp-bundle-vertical-center-layout"}]},{id:"iconSize",type:"input:stepper",devices:{desktop:{default:24},tablet:{default:24},mobile:{default:24}},min:0},{id:"iconSpacing",type:"dropdown:input",hideUnit:!1,inputType:"number",default:"12px",displayOptions:[{label:"Small",value:"8px",showValue:!0},{label:"Medium",value:"16px",showValue:!0},{label:"Large",value:"24px",showValue:!0}]},{id:"iconItemColor",type:"color-picker-v2",label:"Icon",default:"line-2"}]},{id:"style",controls:[{id:"size",type:"size-setting",devices:{desktop:{default:{padding:{type:"custom",top:"24px",left:"16px",bottom:"24px",right:"16px"},gap:"12px",width:"100%"}}},settingConfig:{width:{name:"Width",displayOptions:["full"]},padding:{name:"Padding",paddingConfig:{small:{vertical:"8px",horizontal:"8px"},medium:{vertical:"16px",horizontal:"16px"},large:{vertical:"24px",horizontal:"24px"}}}},hiddenSettings:["shape","height"],hiddenShowMore:!0},{id:"behavior-state",type:"behavior-state",controls:[{id:"borderBundle",type:"border",label:"Border",default:{normal:{border:"solid",borderWidth:"1px",width:"1px 1px 1px 1px",color:"line-2",isCustom:!1},hover:{border:"solid",borderWidth:"1px",width:"1px 1px 1px 1px",color:"line-2",isCustom:!1},active:{border:"solid",borderWidth:"1px",width:"1px 1px 1px 1px",color:"#FF614C",isCustom:!1}},state:{hover:!0,normal:!0,active:!0},compoDefaultValue:{hover:{border:"solid",borderWidth:"1px",width:"1px 1px 1px 1px",color:"line-3",isCustom:!1}}},{id:"iconColor",type:"color-picker-v2",label:"Icon",default:{normal:"line-2",active:"#FF614C"},state:{hover:!0,normal:!0,active:!0},compoDefaultValue:{hover:"text-3"}},{id:"backgroundColor",type:"color-picker-v2",label:"Background",default:{normal:"#FFFFFF",active:"#FFF2F0"},state:{hover:!0,normal:!0,active:!0},compoDefaultValue:{hover:"bg-2"}},{id:"hasBoxShadowBundle",type:"toggle",label:"Enable Button Shadow"},{id:"boxShadowBundle",type:"shadow-v2",default:{},state:{normal:!0,hover:!0,active:!0}},{id:"roundedBundle",type:"radius-preset",label:"Border Radius",default:{normal:{radiusType:"none"}},state:{hover:!0,normal:!0,active:!0}}]},{id:"align",label:"Alignment",type:"segment",options:[{label:"Left",value:"left",type:"align"},{label:"Center",value:"center",type:"align"},{label:"Right",value:"right",type:"align"}],default:"left"},{id:"enableHoverEffect",type:"toggle",default:!0},{id:"enableActiveEffect",type:"toggle",default:!0}]}];exports.ProductBundleDiscountSettings=ProductBundleDiscountSettings;

package/dist/cjs/product/components/product-button/AddToCartButton.liquid.js

@@ -1 +1 @@
-"use strict";var system=require("@gem-sdk/system"),data=require("./common/data.js"),classes=require("./common/classes.js"),ProductButtonPrice_liquid=require("./ProductButtonPrice.liquid.js"),Button_liquid=require("../../../button/components/Button.liquid.js");const AddToCartButton=t=>{let{pageContext:e,...s}=t,{styles:a,setting:d,advanced:u,builderProps:i,builderAttrs:r}=s,{buttonStyle:n,buttonStyles:o,getButtonSettings:l}=data.getAddToCartButtonData(s),c=system.createClass(classes.getAddToCartButtonClasses({isLiquid:!0})),m=l({isLiquid:!0}),q=ProductButtonPrice_liquid.default({setting:d,styles:a});return Button_liquid.default({style:n,advanced:u,nodePrice:q,styles:o,setting:m,className:c,wrapClassName:"{% unless variant.available %} !gp-hidden {% endunless %}",builderProps:i,builderAttrs:r,customAttrs:{name:"add","gp-data-hidden":"{% unless variant.available %}true{% endunless %}"},pageContext:e})};exports.AddToCartButton=AddToCartButton;
+"use strict";var system=require("@gem-sdk/system"),data=require("./common/data.js"),classes=require("./common/classes.js"),ProductButtonPrice_liquid=require("./ProductButtonPrice.liquid.js"),Button_liquid=require("../../../button/components/Button.liquid.js");const AddToCartButton=t=>{let{pageContext:e,...s}=t,{styles:a,setting:d,advanced:u,builderProps:i,builderAttrs:r}=s,{buttonStyle:n,buttonStyles:o,getButtonSettings:l}=data.getAddToCartButtonData(s),c=system.createClass(classes.getAddToCartButtonClasses({isLiquid:!0})),m=l({isLiquid:!0}),q=ProductButtonPrice_liquid.default({setting:d,styles:a,pageContext:e});return Button_liquid.default({style:n,advanced:u,nodePrice:q,styles:o,setting:m,className:c,wrapClassName:"{% unless variant.available %} !gp-hidden {% endunless %}",builderProps:i,builderAttrs:r,customAttrs:{name:"add","gp-data-hidden":"{% unless variant.available %}true{% endunless %}"},pageContext:e})};exports.AddToCartButton=AddToCartButton;

package/dist/cjs/product/components/product-button/PriceComponent.liquid.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var system=require("@gem-sdk/system"),ProductPrice_liquid=require("../product-price/ProductPrice.liquid.js"),classes=require("./common/classes.js");const PriceComponent=({priceType:e,settings:s})=>{let{lineThrough:r,typo:t,opacityPrice:c}=s,i=system.createClass(classes.getProductPriceClasses());return ProductPrice_liquid.ProductPrice({setting:{priceType:e},styles:{typo:t,lineThrough:r,opacityPrice:c},classNames:i})};exports.default=PriceComponent;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var system=require("@gem-sdk/system"),ProductPrice_liquid=require("../product-price/ProductPrice.liquid.js"),classes=require("./common/classes.js");const PriceComponent=({priceType:e,settings:s,pageContext:r})=>{let{lineThrough:t,typo:c,opacityPrice:i}=s,o=system.createClass(classes.getProductPriceClasses());return ProductPrice_liquid.ProductPrice({setting:{priceType:e},styles:{typo:c,lineThrough:t,opacityPrice:i},classNames:o,pageContext:r})};exports.default=PriceComponent;

package/dist/cjs/product/components/product-button/ProductButtonPrice.liquid.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var types=require("./types.js"),helpers=require("./common/helpers.js"),PriceLayout_liquid=require("./PriceLayout.liquid.js"),PriceComponent_liquid=require("./PriceComponent.liquid.js"),constants=require("./common/constants.js");const ProductButtonPrice=({setting:e,styles:r})=>{let t=()=>PriceComponent_liquid.default({priceType:types.PriceType.Regular,settings:helpers.getRenderRegularPriceSettings(e)}),i=()=>PriceComponent_liquid.default({priceType:types.PriceType.Compare,settings:helpers.getRenderComparePriceSettings(e)}),s=()=>{if(!e?.priceLayout)return[t];switch(e?.priceLayout){case constants.PRICE_LAYOUT.PRICE_ONLY:return[t];case constants.PRICE_LAYOUT.PRICE_BEFORE:return[t,i];case constants.PRICE_LAYOUT.PRICE_AFTER:return[i,t];default:return[t,i]}},o=s();return PriceLayout_liquid.default({components:o,separator:e?.separator,showPrice:!!r?.enablePrice,showSeparator:!!r?.enableSeparator})};exports.default=ProductButtonPrice;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var types=require("./types.js"),helpers=require("./common/helpers.js"),PriceLayout_liquid=require("./PriceLayout.liquid.js"),PriceComponent_liquid=require("./PriceComponent.liquid.js"),constants=require("./common/constants.js");const ProductButtonPrice=({setting:e,styles:r,pageContext:t})=>{let i=()=>PriceComponent_liquid.default({priceType:types.PriceType.Regular,settings:helpers.getRenderRegularPriceSettings(e),pageContext:t}),s=()=>PriceComponent_liquid.default({priceType:types.PriceType.Compare,settings:helpers.getRenderComparePriceSettings(e),pageContext:t}),o=()=>{if(!e?.priceLayout)return[i];switch(e?.priceLayout){case constants.PRICE_LAYOUT.PRICE_ONLY:return[i];case constants.PRICE_LAYOUT.PRICE_BEFORE:return[i,s];case constants.PRICE_LAYOUT.PRICE_AFTER:return[s,i];default:return[i,s]}},n=o();return PriceLayout_liquid.default({components:n,separator:e?.separator,showPrice:!!r?.enablePrice,showSeparator:!!r?.enableSeparator})};exports.default=ProductButtonPrice;

package/dist/cjs/product/components/product-button/SoldOutButton.liquid.js

@@ -1 +1 @@
-"use strict";var system=require("@gem-sdk/system"),data=require("./common/data.js"),ProductButtonPrice_liquid=require("./ProductButtonPrice.liquid.js"),classes=require("./common/classes.js"),Button_liquid=require("../../../button/components/Button.liquid.js");const SoldOutButton=t=>{let{pageContext:e,...s}=t,{styles:u,setting:i,advanced:a,builderProps:d,builderAttrs:o}=s,{buttonStyle:l,buttonStyles:r,buttonSettings:n}=data.getSoldOutButtonData(s),c=system.createClass(classes.getSoldOutButtonClasses({isLiquid:!0})),m=ProductButtonPrice_liquid.default({setting:i,styles:u});return Button_liquid.default({advanced:a,style:l,styles:r,nodePrice:m,setting:n,className:c,wrapClassName:"{% if variant.available %} !gp-hidden {% endif %}",builderAttrs:o,builderProps:{...d,uidTranslate:d?.uid,uid:`${d?.uid}-sold-out`},pageContext:e,isUseTranslatedValue:!1,dataId:`${d?.uid}-sold-out`,customAttrs:{"gp-data-hidden":"{% if variant.available %}true{% endif %}"}})};exports.SoldOutButton=SoldOutButton;
+"use strict";var system=require("@gem-sdk/system"),data=require("./common/data.js"),ProductButtonPrice_liquid=require("./ProductButtonPrice.liquid.js"),classes=require("./common/classes.js"),Button_liquid=require("../../../button/components/Button.liquid.js");const SoldOutButton=t=>{let{pageContext:e,...s}=t,{styles:u,setting:i,advanced:a,builderProps:d,builderAttrs:o}=s,{buttonStyle:l,buttonStyles:r,buttonSettings:n}=data.getSoldOutButtonData(s),c=system.createClass(classes.getSoldOutButtonClasses({isLiquid:!0})),m=ProductButtonPrice_liquid.default({setting:i,styles:u,pageContext:e});return Button_liquid.default({advanced:a,style:l,styles:r,nodePrice:m,setting:n,className:c,wrapClassName:"{% if variant.available %} !gp-hidden {% endif %}",builderAttrs:o,builderProps:{...d,uidTranslate:d?.uid,uid:`${d?.uid}-sold-out`},pageContext:e,isUseTranslatedValue:!1,dataId:`${d?.uid}-sold-out`,customAttrs:{"gp-data-hidden":"{% if variant.available %}true{% endif %}"}})};exports.SoldOutButton=SoldOutButton;

package/dist/cjs/product/components/product-variants/OptionVariantsNewFormat.liquid.js

@@ -0,0 +1,41 @@
+"use strict";var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),_const=require("./common/const.js");const renderOptionValuesNewFormatSwatches=e=>{let{renderVariantItem:s,variantPresetsLiquid:i}=e;return core.template`
+    ${system.Liquid("{%- assign optionRendered = false -%}")}
+    ${system.Liquid("{%- assign swatches = shop.metafields.GEMPAGES.swatchesJSONFormat.value -%}")}
+
+    ${system.Liquid(`{% for swatch in swatches %}
+      {%- assign optionTitle = swatch.optionTitle -%}
+      {%- assign optionType = swatch.optionType -%}
+      {%- assign labelsString = "" -%}
+      {%- assign colorArraysString = "" -%}
+      {%- assign imageUrlsString = "" -%}
+
+      {% for optionValue in swatch.optionValues %}
+        {%- assign labelsString = labelsString | append: optionValue.label | append: '${_const.OPTION_VALUES_DELIMITER}' -%}
+        {%- assign colorsJoined = optionValue.colors | join: '${_const.OPTION_VALUES_DELIMITER}' -%}
+        {%- assign colorArraysString = colorArraysString | append: colorsJoined | append: '${_const.OPTION_VALUES_DELIMITER}' -%}
+        {%- assign imageUrlsString = imageUrlsString | append: optionValue.imageUrl | append: '${_const.OPTION_VALUES_DELIMITER}' -%}
+      {% endfor %}
+
+      {%- assign labels = labelsString | split: '${_const.OPTION_VALUES_DELIMITER}' | slice: 0, labelsString.size -%}
+      {%- assign colorStrings = colorArraysString | split: '${_const.OPTION_VALUES_DELIMITER}' | slice: 0, colorArraysString.size -%}
+      {%- assign imageUrls = imageUrlsString | split: '${_const.OPTION_VALUES_DELIMITER}' | slice: 0, imageUrlsString.size -%}
+
+      {% if optionTitle == option.name %}
+        {%- assign variantPresetString = "${i}" -%}
+        {%- assign optionName = option.name | replace: "'", "'" | replace: '"', """ -%}
+        {%- assign items = variantPresetString | split: '($2)' -%}
+        {%- assign type = 'dropdown' -%}
+
+        {% for item in items %}
+          {%- assign itemPreset = item | split: '($1)' -%}
+          {% if itemPreset[0] == optionName %}{%- assign type = itemPreset[1] -%}{% endif %}
+          {% if itemPreset[0] == 'base' %}{%- assign type = itemPreset[1] -%}{% endif %}
+        {% endfor %}
+        {%- assign optionRendered = true -%}
+
+        ${s({showDropdown:!0})}
+      {% endif %}
+    {% endfor %}`)}
+
+    ${system.LiquidIf("optionRendered == false",s({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
+  `};exports.renderOptionValuesNewFormatSwatches=renderOptionValuesNewFormatSwatches;

package/dist/cjs/product/components/product-variants/OptionVariantsOldFormat.liquid.js

@@ -0,0 +1,66 @@
+"use strict";var system=require("@gem-sdk/system"),core=require("@gem-sdk/core");const renderOptionValuesOld=s=>{let{renderVariantItem:e,variantPresetsLiquid:i}=s;return core.template`
+    ${system.Liquid("{%- assign optionRendered = false -%}")}
+    ${system.Liquid("{%- assign swatches = shop.metafields.GEMPAGES.swatches -%}")}
+    ${system.Liquid("{%- assign swatchesItems = swatches | split: '($1)' -%}")}
+
+    ${system.LiquidFor("swatchesItem in swatchesItems",`
+      ${system.Liquid('{%- assign colorArraysString = "" -%}')}
+      ${system.Liquid('{%- assign labelsString = "" -%}')}
+      ${system.Liquid('{%- assign imageUrlsString = "" -%}')}
+      ${system.Liquid("{%- assign attrItems = swatchesItem | split: '($3)' -%}")}
+
+      ${system.LiquidFor("attrItem in attrItems",`
+          ${system.Liquid("{%- assign attrs = attrItem | split: '($2)' -%}")}
+          ${system.Liquid("{%- assign optionKey = attrs[0] -%}")}
+          ${system.Liquid("{%- assign optionValue = attrs[1] -%}")}
+          ${system.Liquid(`
+            {% if optionKey == 'optionTitle' %}
+              {% assign optionTitle = optionValue %}
+            {% elsif optionKey == 'optionType' %}
+              {% assign optionType = optionValue %}
+            {% endif %}
+          `)}
+
+          ${system.LiquidIf('optionKey == "optionValues"',`
+            ${system.Liquid("{%- assign opValueItems = optionValue | split: '($4)' -%}")}
+            ${system.LiquidFor("opValueItem in opValueItems",`
+                ${system.Liquid("{%- assign opValueItemAttrs = opValueItem | split: '($6)' -%}")}
+                ${system.LiquidFor("opValueItemAttr in opValueItemAttrs",`
+                    ${system.Liquid("{%- assign attrs = opValueItemAttr | split: '($5)' -%}")}
+                    ${system.Liquid("{%- assign opValueItemKey = attrs[0] -%}")}
+                    ${system.Liquid("{%- assign opValueItemValue = attrs[1] -%}")}
+
+                    ${system.LiquidIf('opValueItemKey == "label"',`${system.Liquid("{%- assign labelsString = labelsString | append: opValueItemValue -%}")}
+                       ${system.Liquid('{%- assign labelsString = labelsString | append: "($8)" -%}')}`)}
+
+                    ${system.LiquidIf('opValueItemKey == "colors"',`${system.Liquid("{%- assign colorArraysString = colorArraysString | append: opValueItemValue -%}")}
+                       ${system.Liquid('{%- assign colorArraysString = colorArraysString | append: "($8)" -%}')}`)}
+
+                    ${system.LiquidIf('opValueItemKey == "imageUrl"',`${system.Liquid("{%- assign imageUrlsString = imageUrlsString | append: opValueItemValue -%}")}
+                       ${system.Liquid('{%- assign imageUrlsString = imageUrlsString | append: "($8)" -%}')}`)}
+                  `)}
+              `)}
+            `)}
+        `)}
+
+      ${system.Liquid("{%- assign labels = labelsString | split: '($8)' -%}")}
+      ${system.Liquid("{%- assign colorStrings = colorArraysString | split: '($8)' -%}")}
+      ${system.Liquid("{%- assign imageUrls = imageUrlsString | split: '($8)' -%}")}
+
+      ${system.LiquidIf("optionTitle == option.name",`
+        ${system.Liquid(`{%- assign variantPresetString = "${i}" -%}`)}
+        ${system.Liquid('{%- assign optionName = option.name | replace: "\'", "'" | replace: \'"\', """ -%}')}
+        ${system.Liquid("{%- assign items = variantPresetString | split:'($2)' -%}")}
+        ${system.Liquid("{%- assign type = 'dropdown' -%}")}
+        ${system.LiquidFor("item in items",`
+            ${system.Liquid("{%- assign itemPreset = item | split:'($1)' -%}")}
+            ${system.LiquidIf("itemPreset[0] == optionName",system.Liquid("{%- assign type = itemPreset[1] -%}"))}
+            ${system.LiquidIf('itemPreset[0] == "base"',system.Liquid("{%- assign type = itemPreset[1] -%}"))}
+          `)}
+        ${system.Liquid("{%- assign optionRendered = true -%}")}
+        ${e({showDropdown:!0})}
+      `)}
+    `)}
+
+    ${system.LiquidIf("optionRendered == false",e({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
+  `};exports.renderOptionValuesOld=renderOptionValuesOld;

package/dist/cjs/product/components/product-variants/ProductVariants.liquid.js

@@ -1,6 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Text_liquid=require("../../../text/components/Text.liquid.js"),index_liquid=require("./components/variants/index.liquid.js"),Dropdown_liquid=require("./components/dropdown-swatches/Dropdown.liquid.js"),DropdownGroup_liquid=require("./components/dropdown-group/DropdownGroup.liquid.js"),helpers=require("../../../helpers.js"),mappingVariantStyles=require("./utils/mappingVariantStyles.js"),system=require("@gem-sdk/system"),getAttr=require("./common/main/getAttr.js"),styles=require("./common/main/styles.js"),classes=require("./common/main/classes.js"),getData=require("./common/main/getData.js"),classes$1=require("./common/variants/classes.js"),_function=require("../../helpers/function.js"),styles$1=require("./common/variants/styles.js");const DEFAULT_ADVANCED_DISPLAY_SETTING={desktop:!0,tablet:!0,mobile:!0},ProductVariants=e=>{let{builderProps:s,styles:t,setting:i,advanced:a}=e,{align:o,swatchItemWidth:n,dropdownItemWidth:r,swatchSpacing:l,optionTypo:p,marginBottom:d}=t??{},{label:u,optionType:m,showAsSwatches:c,layout:y,hasPreSelected:g}=i??{},$=a?.d??DEFAULT_ADVANCED_DISPLAY_SETTING,{uid:v}=s??{},q="groupOption"===m,f=()=>{let e={};return core.DEVICES.forEach(s=>{let t=core.getResponsiveValueByScreen(n,s);e[s]="auto"===t}),e},_=()=>{let e={};return core.DEVICES.forEach(s=>{e[s]=r?.[s]==="fill"}),e},L=core.composeMemo(()=>{let e=mappingVariantStyles.mappingVariantStyles(i?.variantPresets,t);return{...i,variantPresets:e}},[i?.variantPresets,t]),S=e=>{let s={"'":"'",'"':"""},t=e;for(let i in s)e.indexOf(i)>=0&&(t=t.replaceAll(i,s[i]));return t},h=()=>i?.variantPresets?.map(e=>`${S(e.optionName)}($2)${e.optionType}`).join("($1)"),I=()=>i?.variantPresets?.filter(e=>!!e?.hide)?.map(e=>e.optionName).join(","),V=system.createClass(classes.getVariantOptionGroupClass(o)),j=system.createStyle(styles.getVariantOptionGroupStyle(l,l)),w=getData.getTextVariantTitleData(e,"Liquid"),b=system.createClass(classes$1.getWrapVariantOptionClass(y,o)),A=()=>core.template`
-      ${system.Liquid(`{%- assign presets = "${h()}" | split: '($1)' -%}`)}
-      ${system.Liquid(`{% assign hiddenPresetOptions = "${I()}" | split: ',' %}`)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Text_liquid=require("../../../text/components/Text.liquid.js"),index_liquid=require("./components/variants/index.liquid.js"),Dropdown_liquid=require("./components/dropdown-swatches/Dropdown.liquid.js"),DropdownGroup_liquid=require("./components/dropdown-group/DropdownGroup.liquid.js"),helpers=require("../../../helpers.js"),mappingVariantStyles=require("./utils/mappingVariantStyles.js"),system=require("@gem-sdk/system"),getAttr=require("./common/main/getAttr.js"),styles=require("./common/main/styles.js"),classes=require("./common/main/classes.js"),getData=require("./common/main/getData.js"),classes$1=require("./common/variants/classes.js"),_function=require("../../helpers/function.js"),styles$1=require("./common/variants/styles.js"),OptionVariantsNewFormat_liquid=require("./OptionVariantsNewFormat.liquid.js"),OptionVariantsOldFormat_liquid=require("./OptionVariantsOldFormat.liquid.js");const DEFAULT_ADVANCED_DISPLAY_SETTING={desktop:!0,tablet:!0,mobile:!0},ProductVariants=e=>{let{builderProps:t,styles:s,setting:i,advanced:a}=e,{align:o,swatchItemWidth:n,dropdownItemWidth:r,swatchSpacing:l,optionTypo:p,marginBottom:d}=s??{},{label:u,optionType:m,showAsSwatches:c,layout:y,hasPreSelected:v}=i??{},g=a?.d??DEFAULT_ADVANCED_DISPLAY_SETTING,{uid:_}=t??{},f="groupOption"===m,q=()=>{let e={};return core.DEVICES.forEach(t=>{let s=core.getResponsiveValueByScreen(n,t);e[t]="auto"===s}),e},$=()=>{let e={};return core.DEVICES.forEach(t=>{e[t]=r?.[t]==="fill"}),e},h=i?.variantPresets?mappingVariantStyles.mappingVariantStyles(i?.variantPresets,s):[],S=h?.map(e=>({...e,presets:{[e.optionType]:e.presets[e.optionType]}})),w={...i,variantPresetsOptionType:S},L=e=>{let t={"'":"'",'"':"""},s=e;for(let i in t)e.indexOf(i)>=0&&(s=s.replaceAll(i,t[i]));return s},j=()=>i?.variantPresets?.map(e=>`${L(e.optionName)}($2)${e.optionType}`).join("($1)"),O=()=>i?.variantPresets?.filter(e=>!!e?.hide)?.map(e=>e.optionName).join(","),V=({showDropdown:e,isRenderDefault:t,typeOfOption:i})=>core.template`
+    ${system.LiquidFor("value in values",index_liquid.default({id:"{{option.name | escape}}-{{value | escape}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:c,uid:_,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:v?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:i,activeClass:v?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...s,...w,swatchAutoWidth:q(),optionTypo:p,isRenderDefault:t}))}
+      ${system.LiquidIf(e?'type == "dropdown"':"false",Dropdown_liquid.default({...s,...w,swatchAutoWidth:$(),optionTypo:p}))}`,D=i?.variantPresets?.map(e=>({name:L(e.optionName),type:e.optionType})).map(e=>`${e.name}($1)${e.type}`).join("($2)").toString(),A={renderVariantItem:V,variantPresetsLiquid:D??""},b=system.createClass(classes.getVariantOptionGroupClass(o)),E=system.createStyle(styles.getVariantOptionGroupStyle(l,l)),P=getData.getTextVariantTitleData(e,"Liquid"),x=system.createClass(classes$1.getWrapVariantOptionClass(y,o)),N=()=>core.template`
+      ${system.Liquid(`{%- assign presets = "${j()}" | split: '($1)' -%}`)}
+      ${system.Liquid(`{% assign hiddenPresetOptions = "${O()}" | split: ',' %}`)}
       
       ${system.Liquid(`{% assign all_option_names = options | map: 'name' %}
       {% assign filtered_options_string = '' %}
@@ -30,7 +32,7 @@
       ${system.LiquidFor("option in options",`
         <div
         option-name="{{option.name | escape}}"
-        class="${b} ${system.LiquidIf("hiddenPresetOptions contains option.name","gp-hidden")}"
+        class="${x} ${system.LiquidIf("hiddenPresetOptions contains option.name","gp-hidden")}"
         style="${_function.getStyleOfObject(styles$1.getMarginBottomStyle(d))}${system.Liquid("{% if forloop.last or option.name == last_option_name %}--mb:0;--mb-mobile:0;--mb-tablet:0;{% endif %}")}"
         >
           ${system.Liquid("{%- assign showVariantClass = 'variant-display' -%}")}
@@ -39,11 +41,11 @@
             ${system.Liquid("{%- assign presetDetail = preset | split: '($2)' -%}")}
             ${system.LiquidIf("presetDetail[1] == 'dropdown' and presetDetail[0] == optionName",`${system.Liquid("{%- assign showVariantClass = '' -%}")} ${system.Liquid("{%- break -%}")}`)}
           `)}
-          ${system.If(u,Text_liquid.default(w)," ")}
+          ${system.If(u,Text_liquid.default(P)," ")}
           <div
               variant-option-name="{{option.name | escape}}"
-              class="${V}"
-              style="${_function.getStyleOfObject(j)}"
+              class="${b}"
+              style="${_function.getStyleOfObject(E)}"
             >
               ${system.Liquid("{%- assign values = option.values -%}")}
               ${system.Liquid("{%- assign rootForloop = forloop.index0 -%}")}
@@ -56,78 +58,24 @@
                   {%- assign selectedValue = variant.option3 -%}
                 {%- endif -%}
               `)}
-              ${system.If(!g,system.Liquid("{%- assign selectedValue = null -%}"),"")}
-              ${system.If(c,P(),T())}
+              ${system.If(!v,system.Liquid("{%- assign selectedValue = null -%}"),"")}
+              ${system.If(c,T(),V({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
           </div>
       </div>`)}
-    `,D=i?.variantPresets?.map(e=>({name:S(e.optionName),type:e.optionType})).map(e=>`${e.name}($1)${e.type}`).join("($2)").toString(),P=()=>core.template`
-    ${system.Liquid("{%- assign optionRendered = false -%}")}
-    ${system.Liquid("{%- assign swatches = shop.metafields.GEMPAGES.swatches -%}")}
-    ${system.Liquid("{%- assign swatchesItems = swatches | split: '($1)' -%}")}
-
-    ${system.LiquidFor("swatchesItem in swatchesItems",`
-      ${system.Liquid('{%- assign colorArraysString = "" -%}')}
-      ${system.Liquid('{%- assign labelsString = "" -%}')}
-      ${system.Liquid('{%- assign imageUrlsString = "" -%}')}
-      ${system.Liquid("{%- assign attrItems = swatchesItem | split: '($3)' -%}")}
-
-      ${system.LiquidFor("attrItem in attrItems",`${system.Liquid("{%- assign attrs = attrItem | split: '($2)' -%}")}
-          ${system.Liquid("{%- assign optionKey = attrs[0] -%}")}
-          ${system.Liquid("{%- assign optionValue = attrs[1] -%}")}
-          ${system.Liquid(`
-            {% if optionKey == 'optionTitle' %}
-            {% assign optionTitle = optionValue %}
-            {% elsif optionKey == 'optionType' %}
-              {% assign optionType = optionValue %}
-            {% endif %}
-          `)}
-
-          ${system.LiquidIf("optionKey == 'optionValues'",`${system.Liquid("{%- assign opValueItems = optionValue | split: '($4)' -%}")}
-            ${system.LiquidFor("opValueItem in opValueItems",`${system.Liquid("{%- assign opValueItemAttrs = opValueItem | split: '($6)' -%}")}
-              ${system.LiquidFor("opValueItemAttr in opValueItemAttrs",`${system.Liquid("{%- assign attrs = opValueItemAttr | split: '($5)' -%}")}
-                ${system.Liquid("{%- assign opValueItemKey = attrs[0] -%}")}
-                ${system.Liquid("{%- assign opValueItemValue = attrs[1] -%}")}
-
-                ${system.LiquidIf("opValueItemKey == 'label'",`${system.Liquid("{%- assign labelsString = labelsString | append: opValueItemValue -%}")}${system.Liquid('{%- assign labelsString = labelsString | append: "($8)" -%}')}`)}
-
-                ${system.LiquidIf("opValueItemKey == 'colors'",`${system.Liquid("{%- assign colorArraysString = colorArraysString | append: opValueItemValue -%}")}${system.Liquid('{%- assign colorArraysString = colorArraysString | append: "($8)" -%}')}`)}
-
-                ${system.LiquidIf("opValueItemKey == 'imageUrl'",`${system.Liquid("{%- assign imageUrlsString = imageUrlsString | append: opValueItemValue -%}")}${system.Liquid('{%- assign imageUrlsString = imageUrlsString | append: "($8)" -%}')}`)}`)}`)}`)}
-        `)}
-
-      ${system.Liquid("{%- assign labels = labelsString | split: '($8)' -%}")}
-      ${system.Liquid("{%- assign colorStrings = colorArraysString | split: '($8)' -%}")}
-      ${system.Liquid("{%- assign imageUrls = imageUrlsString | split: '($8)' -%}")}
-
-      ${system.LiquidIf("optionTitle == option.name",`
-        ${system.Liquid(`{%- assign variantPresetString = "${D}" -%}`)}
-        ${system.Liquid('{%- assign optionName = option.name | replace: "\'", "&apos;" | replace: \'"\', "&quot;" -%}')}
-        ${system.Liquid("{%- assign items = variantPresetString | split:'($2)' -%}")}
-        ${system.Liquid("{%- assign type = 'dropdown' -%}")}
-        ${system.LiquidFor("item in items",`
-          ${system.Liquid("{%- assign itemPreset = item | split:'($1)' -%}")}
-          ${system.LiquidIf("itemPreset[0] == optionName",system.Liquid("{%- assign type = itemPreset[1] -%}"))}
-          ${system.LiquidIf('itemPreset[0] == "base"',system.Liquid("{%- assign type = itemPreset[1] -%}"))}
-          `)}
-        ${system.Liquid("{%- assign optionRendered = true -%}")}
-        ${system.LiquidFor("value in values",index_liquid.default({id:"{{option.name | escape}}-{{value | escape}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:c,uid:v,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:g?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",optionType:"optionType",activeClass:g?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...t,...L,swatchAutoWidth:f(),optionTypo:p}))}
-        ${system.LiquidIf("type == 'dropdown'",Dropdown_liquid.default({...t,...L,swatchAutoWidth:_(),optionTypo:p}))}
-      `)}
-    `)}
-
-    ${system.LiquidIf("optionRendered == false",T())}
-    `,T=()=>system.LiquidFor("value in values",index_liquid.default({id:"{{option.name | escape}}-{{value | escape}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:c,uid:v,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:g?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:"optionType",activeClass:g?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...t,...L,swatchAutoWidth:f(),optionTypo:p,isRenderDefault:!0})),x=system.createClass(classes.getWrapDropdownClass(o)),O=getData.getDropdownGroupData(e),C=()=>`
-      <div className="${x}">
-        ${DropdownGroup_liquid.default(O)}
+    `,T=()=>core.template`
+      ${system.LiquidIf("shop.metafields.GEMPAGES.swatchesJSONFormat and shop.metafields.GEMPAGES.swatchesJSONFormat != blank",OptionVariantsNewFormat_liquid.renderOptionValuesNewFormatSwatches(A),OptionVariantsOldFormat_liquid.renderOptionValuesOld(A))}
+      `,I=system.createClass(classes.getWrapDropdownClass(o)),F=getData.getDropdownGroupData(e),C=()=>`
+      <div className="${I}">
+        ${DropdownGroup_liquid.default(F)}
       </div>
-    `;system.createStateOrContext({setting:L,styles:JSON.stringify(t),variants:"{{ product.variants | json | escape }}",optionsWithValues:"{{ product.options_with_values | json | escape }}",variantSelected:"{{ variant | json | escape }}",variantInventoryQuantity:"{{ product.variants | map: 'inventory_quantity' | json | escape }}",variantInventoryPolicy:"{{ product.variants | map: 'inventory_policy' | json | escape }}",moneyFormat:"{{ shop.money_format | json | escape }}",productId:"{{ product.id | json | escape }}",productUrl:"{{ product.url | json | escape }}",productHandle:"{{ product.handle | json | escape }}",displayState:`${JSON.stringify($)}`,totalVariantCombinations:"{{ total_combinations }}",firstAvailableVariant:"{{ product.selected_or_first_available_variant | json | escape }}"});let E=system.createAttr(getAttr.getAttrs({uid:v,hasPreSelected:g,cssClass:a?.cssClass})),N=system.createStyle(styles.getWrapperStyle(e)),F=system.createClass({"gp-flex gp-flex-col !gp-ml-0":!0}),U=()=>{let e=core.isLocalEnv?"{{ 'gp-product-variant-v7-5.js' | asset_url }}":`${core.baseAssetURL}/assets-v2/gp-product-variant-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`};return core.template`
+    `,G=system.createAttr(getAttr.getAttrs({uid:_,hasPreSelected:v,cssClass:a?.cssClass})),k=system.createStyle(styles.getWrapperStyle(e)),W=system.createClass({"gp-flex gp-flex-col !gp-ml-0":!0}),J=()=>{let e=core.isLocalEnv?"{{ 'gp-product-variant-v7-5.js' | asset_url }}":`${core.baseAssetURL}/assets-v2/gp-product-variant-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`};return core.template`
     ${system.Liquid("{%- assign total_combinations = 1 -%}")}
     ${system.LiquidFor("option in product.options_with_values","{%- assign total_combinations = total_combinations | times: option.values.size -%}")}
     <gp-product-variants
-      ${E}
+      ${G}
       gp-data='{
-        "setting":${JSON.stringify(L)?.replaceAll("'","&#039;")},
-        "styles":${JSON.stringify(t)},
+        "setting":${JSON.stringify(w)?.replaceAll("'","&#039;")},
+        "styles":${JSON.stringify(s)},
         "variants":{{product.variants | json | escape}},
         "optionsWithValues": {{product.options_with_values | json | escape}},
         "variantSelected": {{ variant | json | escape }},
@@ -137,7 +85,7 @@
         "productId": {{product.id | json | escape}},
         "productUrl": {{product.url | json | escape}},
         "productHandle": {{product.handle | json | escape}},
-        "displayState": ${JSON.stringify($)},
+        "displayState": ${JSON.stringify(g)},
         "totalVariantCombinations": {{total_combinations}},
         "firstAvailableVariant": {{product.selected_or_first_available_variant | json | escape}}
       }
@@ -146,12 +94,12 @@
       ${system.Liquid("{%- assign options = product.options_with_values -%}")}
       ${system.Liquid("{%- assign variants = product.variants -%}")}
       ${system.LiquidIf("options.size == 0 or options.size == 1 and variants.size == 1 and variants[0].title == 'Default Title' and variants[0].option1 == 'Default Title'","<div></div>",core.template`<div
-            class="${F}"
-            style="${N}"
+            class="${W}"
+            style="${k}"
           >
-          ${system.If(q,C(),A())}
+          ${system.If(f,C(),N())}
         </div>`)}
     </gp-product-variants>
 
-    ${U()}
+    ${J()}
   `};exports.default=ProductVariants;

package/dist/cjs/product/components/product-variants/common/base/styles.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getColorStyleWidth=e=>{let t=e?.height||"32px",o=e?.width||{desktop:t},r=Object.fromEntries(Object.entries(o).map(([e,o])=>{let r=o&&"undefined"!==o&&"auto"!==o?o:t;return[e,r]}));return core.makeStyleResponsive("minw",r)},getWrapperStyleActive=e=>{let{preset:t,optionTypography:o,optionTypo:r,typeOfOption:l}=e,a=t?.optionBgColor,p=t?.optionTextColor,i=t?.optionBorder,n=t?.optionHasShadow,c=t?.optionShadow,d=t?.optionRounded,h="color"===l,s="image"===l||"image_shopify"===l,y=core.composeTypographyStyle(r,o),S=e=>{let t=a?.active??a?.normal,o=i?.active??i?.normal;return core.makeStyle({bg:e&&core.getSingleColorVariable(t),bs:o?.border,bw:o?.width,bc:core.getSingleColorVariable(o?.color)})},g=c?.active??c?.normal,u=n?.active??n?.normal,b=p?.active??p?.normal;return helpers.filterTruthyObject({...S(!h),...core.getRadiusStyleActiveState(d),...core.getStyleShadow({value:g,state:"active",styleAppliedFor:"box-shadow",isEnableShadow:u},!0),...y,...!h&&!s&&core.makeStyle({c:core.getSingleColorVariable(b)}),...h&&getColorStyleWidth(t),...core.makeStyle({h:t?.height})})},getWrapperStyleNormalAndHover=e=>{let{preset:t,optionTransform:o,optionTypography:r,optionTypo:l,typeOfOption:a}=e,p=t?.optionBgColor,i=t?.optionTextColor,n=t?.optionBorder,c=t?.optionHasShadow,d=t?.optionShadow,h=t?.optionRounded,s="color"===a,y="image"===a||"image_shopify"===a,S=["normal","hover"].reduce((e,t)=>({...e,...core.getStyleShadow({value:d?.[t],state:t,styleAppliedFor:"box-shadow",isEnableShadow:c?.[t]})}),{});return helpers.filterTruthyObject({...core.composeRadius(h),...S,...!s&&core.getGlobalColorStateStyle("bg",p),...!s&&core.handleConvertBorderStyle(n),...!s&&core.handleConvertBorderWidth(n),...!s&&core.handleConvertBorderColor(n),...!s&&!y&&core.makeStyle({c:o}),...!s&&!y&&core.getGlobalColorStateStyle("c",i),...typoStyleNotIn(l,r,["--c"]),...s&&getColorStyleWidth(t),...core.makeStyle({h:t?.height})})};function typoStyleNotIn(e,t,o){let r=core.composeTypographyStyle(e,t);return o&&0!==o.length?Object.fromEntries(Object.entries(r).filter(([e])=>!o.includes(e))):r}const getWrapperTextStyle=e=>{let{preset:t,typeOfOption:o,checked:r}=e,l=t?.optionBorder,a=t?.optionRounded,p="color"===o,i=()=>{let e="16px",o={"--pl":"0px","--pr":"0px","--pl-tablet":"0px","--pr-tablet":"0px","--pl-mobile":"0px","--pr-mobile":"0px","--pt":"0px","--pb":"0px"};return t?.width?.desktop?.toLowerCase()!=="auto"&&t?.width?.desktop||(o["--pl"]=e,o["--pr"]=e),t?.width?.tablet?.toLowerCase()!=="auto"&&t?.width?.tablet||(o["--pl-tablet"]=e,o["--pr-tablet"]=e),t?.width?.mobile?.toLowerCase()!=="auto"&&t?.width?.mobile||(o["--pl-mobile"]=e,o["--pr-mobile"]=e),(t?.height?.toLowerCase()==="auto"||t?.height)&&(o["--pt"]="8px",o["--pb"]="8px"),o},n={...a,active:{...a?.active||{},radiusType:"custom"}},c=r?core.getRadiusStyleActiveState(n):core.composeRadius(a),d=!r&&p?{...core.handleConvertBorderStyle(l),...core.handleConvertBorderWidth(l),...core.handleConvertBorderColor(l)}:{};return helpers.filterTruthyObject({...!p&&i(),...p&&c,...d})},getColorStyle=({optionBorder:e,optionRounded:t,isActive:o,color:r})=>{let l=()=>r?r?.startsWith("linear-gradient")?{backgroundImage:r}:{backgroundColor:r}:{},a=t=>t?{"--bs":"none"}:core.handleConvertBorderStyle(e),p=o=>({"--d":"flex","--jc":"center","	--ai":"center","--w":"100%","--h":"100%","--of":"hidden","--hvr-c":"unset",...a(o),...core.handleConvertBorderWidth(e),...core.handleConvertBorderColor(e),...core.composeRadius(t),...l()});return p(!!o)},getTextStyle=({optionTypo:e,optionTypography:t})=>{let o=core.composeTypographyStyle(e,t);return delete o["--c"],helpers.filterTruthyObject({...o})};exports.getColorStyle=getColorStyle,exports.getTextStyle=getTextStyle,exports.getWrapperStyleActive=getWrapperStyleActive,exports.getWrapperStyleNormalAndHover=getWrapperStyleNormalAndHover,exports.getWrapperTextStyle=getWrapperTextStyle;
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getColorStyleWidth=e=>{let t=e?.height||"32px",o=e?.width||{desktop:t},r=Object.fromEntries(Object.entries(o).map(([e,o])=>{let r=o&&"undefined"!==o&&"auto"!==o&&"Auto"!==o?o:t;return[e,r]}));return core.makeStyleResponsive("minw",r)},getWrapperStyleActive=e=>{let{preset:t,optionTypography:o,optionTypo:r,typeOfOption:l}=e,a=t?.optionBgColor,p=t?.optionTextColor,i=t?.optionBorder,n=t?.optionHasShadow,c=t?.optionShadow,d=t?.optionRounded,h="color"===l,s="image"===l||"image_shopify"===l,y=core.composeTypographyStyle(r,o),S=e=>{let t=a?.active??a?.normal,o=i?.active??i?.normal;return core.makeStyle({bg:e&&core.getSingleColorVariable(t),bs:o?.border,bw:o?.width,bc:core.getSingleColorVariable(o?.color)})},g=c?.active??c?.normal,u=n?.active??n?.normal,b=p?.active??p?.normal;return helpers.filterTruthyObject({...S(!h),...core.getRadiusStyleActiveState(d),...core.getStyleShadow({value:g,state:"active",styleAppliedFor:"box-shadow",isEnableShadow:u},!0),...y,...!h&&!s&&core.makeStyle({c:core.getSingleColorVariable(b)}),...h&&getColorStyleWidth(t),...core.makeStyle({h:t?.height})})},getWrapperStyleNormalAndHover=e=>{let{preset:t,optionTransform:o,optionTypography:r,optionTypo:l,typeOfOption:a}=e,p=t?.optionBgColor,i=t?.optionTextColor,n=t?.optionBorder,c=t?.optionHasShadow,d=t?.optionShadow,h=t?.optionRounded,s="color"===a,y="image"===a||"image_shopify"===a,S=["normal","hover"].reduce((e,t)=>({...e,...core.getStyleShadow({value:d?.[t],state:t,styleAppliedFor:"box-shadow",isEnableShadow:c?.[t]})}),{});return helpers.filterTruthyObject({...core.composeRadius(h),...S,...!s&&core.getGlobalColorStateStyle("bg",p),...!s&&core.handleConvertBorderStyle(n),...!s&&core.handleConvertBorderWidth(n),...!s&&core.handleConvertBorderColor(n),...!s&&!y&&core.makeStyle({c:o}),...!s&&!y&&core.getGlobalColorStateStyle("c",i),...typoStyleNotIn(l,r,["--c"]),...s&&getColorStyleWidth(t),...core.makeStyle({h:t?.height})})};function typoStyleNotIn(e,t,o){let r=core.composeTypographyStyle(e,t);return o&&0!==o.length?Object.fromEntries(Object.entries(r).filter(([e])=>!o.includes(e))):r}const getWrapperTextStyle=e=>{let{preset:t,typeOfOption:o,checked:r}=e,l=t?.optionBorder,a=t?.optionRounded,p="color"===o,i=()=>{let e="16px",o={"--pl":"0px","--pr":"0px","--pl-tablet":"0px","--pr-tablet":"0px","--pl-mobile":"0px","--pr-mobile":"0px","--pt":"0px","--pb":"0px"};return t?.width?.desktop?.toLowerCase()!=="auto"&&t?.width?.desktop||(o["--pl"]=e,o["--pr"]=e),t?.width?.tablet?.toLowerCase()!=="auto"&&t?.width?.tablet||(o["--pl-tablet"]=e,o["--pr-tablet"]=e),t?.width?.mobile?.toLowerCase()!=="auto"&&t?.width?.mobile||(o["--pl-mobile"]=e,o["--pr-mobile"]=e),(t?.height?.toLowerCase()==="auto"||t?.height)&&(o["--pt"]="8px",o["--pb"]="8px"),o},n={...a,active:{...a?.active||{},radiusType:"custom"}},c=r?core.getRadiusStyleActiveState(n):core.composeRadius(a),d=!r&&p?{...core.handleConvertBorderStyle(l),...core.handleConvertBorderWidth(l),...core.handleConvertBorderColor(l)}:{};return helpers.filterTruthyObject({...!p&&i(),...p&&c,...d})},getColorStyle=({optionBorder:e,optionRounded:t,isActive:o,color:r})=>{let l=()=>r?r?.startsWith("linear-gradient")?{backgroundImage:r}:{backgroundColor:r}:{},a=t=>t?{"--bs":"none"}:core.handleConvertBorderStyle(e),p=o=>({"--d":"flex","--jc":"center","	--ai":"center","--w":"100%","--h":"100%","--of":"hidden","--hvr-c":"unset",...a(o),...core.handleConvertBorderWidth(e),...core.handleConvertBorderColor(e),...core.composeRadius(t),...l()});return p(!!o)},getTextStyle=({optionTypo:e,optionTypography:t})=>{let o=core.composeTypographyStyle(e,t);return delete o["--c"],helpers.filterTruthyObject({...o})};exports.getColorStyle=getColorStyle,exports.getTextStyle=getTextStyle,exports.getWrapperStyleActive=getWrapperStyleActive,exports.getWrapperStyleNormalAndHover=getWrapperStyleNormalAndHover,exports.getWrapperTextStyle=getWrapperTextStyle;

package/dist/cjs/product/components/product-variants/common/const.js

@@ -0,0 +1 @@
+"use strict";const OPTION_VALUES_DELIMITER="|||";exports.OPTION_VALUES_DELIMITER="|||";

package/dist/cjs/product/components/product-variants/common/dropdown/styles.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getSelectStyle=({width:e,height:r,optionTypo:o,optionTypography:t,optionBgColor:c,optionTextColor:l,optionRounded:a,optionHasShadow:s,optionShadow:i,optionBorder:n,optionTransform:d,isCombine:S})=>{let h=core.composeTypographyStyle(o,t),p=core.makeStyle({bg:core.getSingleColorVariable(c?.active),bs:n?.active?.border,bw:n?.active?.width,bc:n?.active?.color}),g=[S?"active":"normal","hover"].reduce((e,r)=>({...e,...core.getStyleShadow({value:i?.[r],state:r,styleAppliedFor:"box-shadow",isEnableShadow:s?.[r]})}),{});return helpers.filterTruthyObject({...core.makeStyleResponsive("w",core.makeWidth(e)),...core.makeStyle({h:r}),...g,...p,...core.makeStyle({tt:d}),...h,...core.getGlobalColorStateStyle("c",l),...core.getGlobalColorStateStyle("bg",c),...core.handleConvertBorderStyle(n),...core.handleConvertBorderWidth(n),...core.handleConvertBorderColor(n),...core.composeRadius(a),appearance:"none","background-image":"url(https://cdn.shopify.com/s/files/1/1827/4239/t/1/assets/ico-select.svg?v=155563818344741998551488860031)","background-repeat":"no-repeat","background-position":"right 16px center"})};exports.getSelectStyle=getSelectStyle;
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getSelectStyle=({width:e,height:o,optionTypo:t,optionTypography:r,optionBgColor:a,optionTextColor:l,optionRounded:c,optionHasShadow:s,optionShadow:i,optionBorder:d,optionTransform:S,isCombine:h,textAlign:n})=>{let p=core.composeTypographyStyle(t,r),y=n?core.makeStyleResponsive("ta",n):{},g=core.makeStyle({bg:core.getSingleColorVariable(a?.active),bs:d?.active?.border,bw:d?.active?.width,bc:d?.active?.color}),b=[h?"active":"normal","hover"].reduce((e,o)=>({...e,...core.getStyleShadow({value:i?.[o],state:o,styleAppliedFor:"box-shadow",isEnableShadow:s?.[o]})}),{});return helpers.filterTruthyObject({...core.makeStyleResponsive("w",core.makeWidth(e)),...core.makeStyle({h:o}),...b,...g,...core.makeStyle({tt:S}),...p,...core.getGlobalColorStateStyle("c",l),...core.getGlobalColorStateStyle("bg",a),...core.handleConvertBorderStyle(d),...core.handleConvertBorderWidth(d),...core.handleConvertBorderColor(d),...core.composeRadius(c),...core.getStyleShadow({value:t?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:t?.custom?.hasShadowText}),...y,appearance:"none","background-image":"url(https://cdn.shopify.com/s/files/1/1827/4239/t/1/assets/ico-select.svg?v=155563818344741998551488860031)","background-repeat":"no-repeat","background-position":"right 16px center"})};exports.getSelectStyle=getSelectStyle;

package/dist/cjs/product/components/product-variants/components/color/color.liquid.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),base_liquid=require("../base/base.liquid.js"),mappingVariantStyles=require("../../utils/mappingVariantStyles.js");const ColorVariant=({isVariantOutStock:e,swatchValue:o,...i})=>core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),base_liquid=require("../base/base.liquid.js"),mappingVariantStyles=require("../../utils/mappingVariantStyles.js"),_const=require("../../common/const.js");const ColorVariant=({isVariantOutStock:o,swatchValue:e,...r})=>core.template`
     {% assign colorsString = null %}
     {% assign colors = null %}
     {% for label in labels %}
@@ -7,7 +7,7 @@
       {% endif %}
     {% endfor %}
     {% if colorsString != null %}
-      {% assign colors = colorsString | split: '($7)' %}
+      {% assign colors = colorsString | split: '${_const.OPTION_VALUES_DELIMITER}' %}
     {% endif %}
-    ${base_liquid.default({...i,typeOfOption:"color",optionRounded:mappingVariantStyles.optionRoundedColorDefault})}
+    ${base_liquid.default({...r,typeOfOption:"color",optionRounded:mappingVariantStyles.optionRoundedColorDefault})}
   `;exports.default=ColorVariant;

package/dist/cjs/product/components/product-variants/components/dropdown-swatches/Dropdown.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),VariantOption=require("../dropdown-option/VariantOption.js"),DropdownOption=require("../dropdown-option/DropdownOption.js"),classes=require("../../common/dropdown/classes.js"),system=require("@gem-sdk/system"),styles=require("../../common/dropdown/styles.js"),attrs=require("../../common/dropdown/attrs.js"),useDropdownSwatches=require("./hooks/useDropdownSwatches.js");const DropdownVariant=e=>{let{option:t,optionPosition:o,optionNumber:s,variantGroup:n,variants:r,price:i,blankText:a,swatchHeight:d,optionTypography:p,optionTransform:l,initValue:u,hasPreSelected:m,optionTypo:c,combineHeight:w,combineWidth:j,soldOutStyle:h}=e,{optionBgColor:y,optionTextColor:x,optionRounded:S,optionShadow:D,optionHasShadow:g,optionBorder:q}=e,{value:v,preset:O,handleOnChangeSelect:R,checkVariantInStock:b}=useDropdownSwatches.useDropdownSwatches(e),f="disable"===h;n||(y=O?.optionBgColor,x=O?.optionTextColor,q=O?.optionBorder,g=O?.optionHasShadow,D=O?.optionShadow,S=O?.optionRounded);let C=system.createClass(classes.getSelectClass({optionTypo:c,optionTypography:p,optionBgColor:y,optionBorder:q,optionTextColor:x})),V=system.createStyle(styles.getSelectStyle({width:n?j:O?.width,height:n?w:O?.height,optionTypo:c,optionTypography:p,optionBgColor:y,optionTextColor:x,optionRounded:S,optionShadow:D,optionHasShadow:g,optionBorder:q,optionTransform:l,swatchHeight:d,isCombine:n})),k=system.createAttr(attrs.getSelectAttr({optionName:t?.name,value:v??u,type:"React"})),N=()=>r?.map(e=>jsxRuntime.jsx(VariantOption.default,{disabled:!b(e)&&f,value:e?.id,variant:e,includePrice:i},e?.id)),P=()=>t?.values?.map(e=>jsxRuntime.jsx(DropdownOption.default,{value:e,optionName:t.name,optionPosition:o,optionNumber:s,isSoldOutMark:f},e?.id));return jsxRuntime.jsxs("select",{...k,className:C,style:V,onChange:e=>R(e),children:[system.If(!m,jsxRuntime.jsx("option",{value:"blank",children:a??"Please select an option"})," "),system.If(n,N(),P())]})};exports.default=DropdownVariant;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),VariantOption=require("../dropdown-option/VariantOption.js"),DropdownOption=require("../dropdown-option/DropdownOption.js"),classes=require("../../common/dropdown/classes.js"),system=require("@gem-sdk/system"),styles=require("../../common/dropdown/styles.js"),attrs=require("../../common/dropdown/attrs.js"),useDropdownSwatches=require("./hooks/useDropdownSwatches.js");const DropdownVariant=e=>{let{option:t,optionPosition:o,optionNumber:s,variantGroup:n,variants:r,price:i,blankText:a,swatchHeight:d,optionTypography:l,optionTransform:p,initValue:u,hasPreSelected:m,optionTypo:c,combineHeight:w,combineWidth:j,soldOutStyle:h}=e,{optionBgColor:x,optionTextColor:y,optionRounded:S,optionShadow:g,optionHasShadow:D,optionBorder:q}=e,{value:v,preset:O,handleOnChangeSelect:R,checkVariantInStock:b}=useDropdownSwatches.useDropdownSwatches(e),f="disable"===h;n||(x=O?.optionBgColor,y=O?.optionTextColor,q=O?.optionBorder,D=O?.optionHasShadow,g=O?.optionShadow,S=O?.optionRounded);let C=system.createClass(classes.getSelectClass({optionTypo:c,optionTypography:l,optionBgColor:x,optionBorder:q,optionTextColor:y})),V=system.createStyle(styles.getSelectStyle({width:n?j:O?.width,height:n?w:O?.height,optionTypo:c,optionTypography:l,optionBgColor:x,optionTextColor:y,optionRounded:S,optionShadow:g,optionHasShadow:D,optionBorder:q,optionTransform:p,swatchHeight:d,isCombine:n,textAlign:c?.attrs?.textAlign})),k=system.createAttr(attrs.getSelectAttr({optionName:t?.name,value:v??u,type:"React"})),A=()=>r?.map(e=>jsxRuntime.jsx(VariantOption.default,{disabled:!b(e)&&f,value:e?.id,variant:e,includePrice:i},e?.id)),N=()=>t?.values?.map(e=>jsxRuntime.jsx(DropdownOption.default,{value:e,optionName:t.name,optionPosition:o,optionNumber:s,isSoldOutMark:f},e?.id));return jsxRuntime.jsxs("select",{...k,className:C,style:V,onChange:e=>R(e),children:[system.If(!m,jsxRuntime.jsx("option",{value:"blank",children:a??"Please select an option"})," "),system.If(n,A(),N())]})};exports.default=DropdownVariant;

package/dist/cjs/product/components/product-variants/components/dropdown-swatches/Dropdown.liquid.js

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),classes=require("../../common/dropdown/classes.js"),styles=require("../../common/dropdown/styles.js"),attrs=require("../../common/dropdown/attrs.js"),index=require("../dropdown-option/render-liquid/index.js");const DropdownVariant=e=>{let{variantGroup:s,blankText:t,swatchAutoWidth:r,swatchHeight:o,optionTypography:d,optionBgColor:n,optionTextColor:i,optionRounded:l,optionShadow:a,optionHasShadow:c,optionBorder:m,optionTransform:p,hasPreSelected:y,optionTypo:u,combineHeight:q,combineWidth:w,soldOutStyle:g,children:x}=e,j="disable"===g,S=system.createClass(classes.getSelectClass({optionTypo:u,optionTypography:d,optionBgColor:n,optionBorder:m,optionTextColor:i})),$=system.createStyle(styles.getSelectStyle({width:s?w:r,height:s?q:o,optionTypo:u,optionTypography:d,optionBgColor:n,optionTextColor:i,optionRounded:l,optionHasShadow:c,optionShadow:a,optionBorder:m,optionTransform:p,isCombine:s})),f=system.createAttr(attrs.getSelectAttr({variantGroup:s,type:"Liquid"})),b=()=>x;return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),classes=require("../../common/dropdown/classes.js"),styles=require("../../common/dropdown/styles.js"),attrs=require("../../common/dropdown/attrs.js"),index=require("../dropdown-option/render-liquid/index.js");const DropdownVariant=e=>{let{variantGroup:t,blankText:s,swatchAutoWidth:r,swatchHeight:o,optionTypography:n,optionBgColor:i,optionTextColor:d,optionRounded:l,optionShadow:a,optionHasShadow:c,optionBorder:m,optionTransform:p,hasPreSelected:y,optionTypo:u,combineHeight:g,combineWidth:q,soldOutStyle:w,children:x}=e,j="disable"===w,S=system.createClass(classes.getSelectClass({optionTypo:u,optionTypography:n,optionBgColor:i,optionBorder:m,optionTextColor:d})),$=system.createStyle(styles.getSelectStyle({width:t?q:r,height:t?g:o,optionTypo:u,optionTypography:n,optionBgColor:i,optionTextColor:d,optionRounded:l,optionHasShadow:c,optionShadow:a,optionBorder:m,optionTransform:p,isCombine:t,textAlign:u?.attrs?.textAlign})),f=system.createAttr(attrs.getSelectAttr({variantGroup:t,type:"Liquid"})),A=()=>x;return core.template`
     <select
       ${f}
       class="${S}"
       style="${$}"
     >
-      ${system.If(!y,index.renderBlankOption(t))}
-      ${system.If(s,b(),index.renderDropdownOptions(j,y))}
+      ${system.If(!y,index.renderBlankOption(s))}
+      ${system.If(t,A(),index.renderDropdownOptions(j,y))}
     </select>`};exports.default=DropdownVariant;

package/dist/cjs/product/settings/product-image-v3/configs/ui-v2.js

@@ -1 +1 @@
-"use strict";var ImageListNavigation=require("./ui/ImageListNavigation.js"),FeatureNavigation=require("./ui/FeatureNavigation.js"),FeatureDots=require("./ui/FeatureDots.js");const showGallerySliderSetting='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',showFeaturedImage='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',showGalleryHoverAction='(position == "one-col" || position == "two-col")',showImageListSetting='(position !== "only-feature")',SettingUIV2=[{label:{en:"Layout"},controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:{en:"Featured image"},conditionDisplay:showFeaturedImage,controls:[{setting:{id:"ftShape"},layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:{en:"Image scale"},setting:{id:"ftLayout"}},{...FeatureDots.FeatureDots,conditionDisplay:`${showFeaturedImage} && position === "only-feature"`},{...FeatureNavigation.FeatureNavigation,conditionDisplay:`${showFeaturedImage}`}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"ftCorner"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:showFeaturedImage,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"hoverEffect"}},{label:{en:"Zoom type"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:{en:"Zoom value"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:{en:"Other image"},conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:{en:"Click action"},iconName:"gp-trigger-action-click",conditionDisplay:showFeaturedImage,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:{en:"After click"},setting:{id:"ftClickOpenLightBox"}},{label:{en:"Open new tab"},setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:{en:"Slide speed"},setting:{id:"ftAnimationSpeed"}},{type:"control",label:{en:"Animation"},setting:{id:"ftAnimationMode"}},{label:{en:"Drag / swipe"},setting:{id:"ftDragToScroll"}},{label:{en:"Infinity loop"},setting:{id:"ftLoop"}}]}},{label:{en:"Image list"},conditionDisplay:'(position !== "only-feature")',controls:[{label:{en:"Display"},conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},layout:"vertical",conditionDisplay:'position == "one-col"'},{label:{en:"Image gap"},setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:{en:"Image scale"},setting:{id:"layout"}},{...ImageListNavigation.ImageListNavigation,conditionDisplay:showGallerySliderSetting}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"corner"}},{label:{en:"Active border"},conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:{en:"Zoom type"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:{en:"Zoom value"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:{en:"Other image"},conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:{en:"Click action"},setting:{id:"clickOpenLightBox"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Drag / swipe"},setting:{id:"dragToScroll"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Infinity loop"},setting:{id:"loop"}}]}},{label:{en:"Item spacing"},conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Gap"},setting:{id:"spacing"}}]},{label:{en:"Display condition"},controls:[{conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',label:{en:"Default item"},setting:{id:"preDisplay"}},{label:{en:"Image list"},setting:{id:"filterByVariant"}}],messageConfig:{type:"info",message:'Image list can display based on the selected variants. <a class="text-white" target="_blank" href="https://help.gempages.net/articles/filter-product-image-by-selected-variant?utm_source=gempages&utm_medium=in-app&utm_campaign=product-image-element">How to setup</a>'}},{label:{en:"Optimize LCP"},controls:[{label:{en:"Preload"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:{en:"Quality"},setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:{en:"Quality"},conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary"}}]}];exports.SettingUIV2=SettingUIV2;
+"use strict";var ImageListNavigation=require("./ui/ImageListNavigation.js"),FeatureNavigation=require("./ui/FeatureNavigation.js"),FeatureDots=require("./ui/FeatureDots.js");const showGallerySliderSetting='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',showFeaturedImage='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',showGalleryHoverAction='(position == "one-col" || position == "two-col")',showImageListSetting='(position !== "only-feature")',SettingUIV2=[{label:{en:"Layout"},controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:{en:"Featured image"},conditionDisplay:showFeaturedImage,controls:[{setting:{id:"ftShape"},layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:{en:"Image scale"},setting:{id:"ftLayout"}},{...FeatureDots.FeatureDots,conditionDisplay:`${showFeaturedImage} && position === "only-feature"`},{...FeatureNavigation.FeatureNavigation,conditionDisplay:`${showFeaturedImage}`}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"ftCorner"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:showFeaturedImage,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"hoverEffect"}},{label:{en:"Zoom type"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:{en:"Zoom value"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:{en:"Other image"},conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:{en:"Click action"},iconName:"gp-trigger-action-click",conditionDisplay:showFeaturedImage,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:{en:"After click"},setting:{id:"ftClickOpenLightBox"}},{label:{en:"Open new tab"},setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:{en:"Slide speed"},setting:{id:"ftAnimationSpeed"}},{type:"control",label:{en:"Animation"},setting:{id:"ftAnimationMode"}},{label:{en:"Drag / swipe"},setting:{id:"ftDragToScroll"}},{label:{en:"Infinity loop"},setting:{id:"ftLoop"}}]}},{label:{en:"Image list"},conditionDisplay:'(position !== "only-feature")',controls:[{label:{en:"Display"},conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},layout:"vertical",conditionDisplay:'position == "one-col"'},{label:{en:"Image gap"},setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:{en:"Image scale"},setting:{id:"layout"}},{...ImageListNavigation.ImageListNavigation,conditionDisplay:showGallerySliderSetting}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"corner"}},{label:{en:"Active border"},conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:{en:"Zoom type"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:{en:"Zoom value"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:{en:"Other image"},conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:{en:"Click action"},setting:{id:"clickOpenLightBox"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Drag / swipe"},setting:{id:"dragToScroll"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Infinity loop"},setting:{id:"loop"}}]}},{label:{en:"Item spacing"},conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Gap"},setting:{id:"spacing"}}]},{label:{en:"Display condition"},controls:[{conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',label:{en:"Default item"},setting:{id:"preDisplay"}},{label:{en:"Image list"},setting:{id:"filterByVariant"}}],messageConfig:{type:"info",message:'Image list can display based on the selected variants. <a class="text-white" target="_blank" href="https://gempages.co/display-selected-variant">How to setup</a>'}},{label:{en:"Optimize LCP"},controls:[{label:{en:"Preload"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:{en:"Quality"},setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:{en:"Quality"},conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary"}}]}];exports.SettingUIV2=SettingUIV2;

package/dist/cjs/product/settings/product-variant/configs/presets.js

@@ -14,7 +14,7 @@
         </clipPath>
         </defs>
         </svg>
-      `},components:[{tag:"ProductVariants",settings:{showAsSwatches:!0},styles:{optionBgColor:{normal:"#FFFFFF"},optionTextColor:{normal:"text-1"},optionRounded:{normal:{btrr:"0px",bblr:"0px",bbrr:"0px",btlr:"0px",radiusType:"none"}}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}}}]},{id:"product-variant",name:{en:"Product Variants"},icon:{desktop:`
+      `},components:[{tag:"ProductVariants",settings:{showAsSwatches:!0},styles:{optionBgColor:{normal:"#FFFFFF"},optionTextColor:{normal:"text-2"},optionRounded:{normal:{btrr:"0px",bblr:"0px",bbrr:"0px",btlr:"0px",radiusType:"none"}}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}}}]},{id:"product-variant",name:{en:"Product Variants"},icon:{desktop:`
         <svg width="96" height="40" viewBox="0 0 96 40" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M4.94585 5.54545C4.90323 5.18561 4.73041 4.90625 4.42738 4.70739C4.12435 4.50852 3.75266 4.40909 3.31232 4.40909C2.99035 4.40909 2.70863 4.46117 2.46715 4.56534C2.22804 4.66951 2.04102 4.81274 1.90607 4.99503C1.7735 5.17732 1.70721 5.38447 1.70721 5.61648C1.70721 5.81061 1.75337 5.97751 1.8457 6.11719C1.9404 6.2545 2.06114 6.36932 2.20792 6.46165C2.3547 6.55161 2.50858 6.62618 2.66957 6.68537C2.83055 6.74219 2.97852 6.78835 3.11346 6.82386L3.8521 7.02273C4.04149 7.07244 4.25219 7.1411 4.4842 7.22869C4.71857 7.31629 4.94229 7.43584 5.15536 7.58736C5.3708 7.73651 5.54835 7.92827 5.68803 8.16264C5.82771 8.39702 5.89755 8.68466 5.89755 9.02557C5.89755 9.41856 5.79457 9.77367 5.5886 10.0909C5.385 10.4081 5.08671 10.6603 4.69371 10.8473C4.30309 11.0343 3.82842 11.1278 3.26971 11.1278C2.74888 11.1278 2.29788 11.0438 1.91673 10.8757C1.53794 10.7076 1.23964 10.4732 1.02184 10.1726C0.806404 9.87192 0.684482 9.52273 0.656072 9.125H1.56516C1.58884 9.39962 1.68117 9.62689 1.84215 9.80682C2.0055 9.98437 2.21147 10.117 2.46005 10.2045C2.711 10.2898 2.98088 10.3324 3.26971 10.3324C3.60588 10.3324 3.90773 10.2779 4.17525 10.169C4.44277 10.0578 4.65465 9.90388 4.8109 9.70739C4.96715 9.50852 5.04528 9.27652 5.04528 9.01136C5.04528 8.76989 4.97781 8.57339 4.84286 8.42188C4.70792 8.27036 4.53036 8.14725 4.31019 8.05256C4.09002 7.95786 3.8521 7.875 3.59641 7.80398L2.70153 7.5483C2.13335 7.38494 1.68353 7.15175 1.3521 6.84872C1.02066 6.54569 0.854936 6.14915 0.854936 5.65909C0.854936 5.25189 0.965021 4.89678 1.18519 4.59375C1.40773 4.28835 1.70603 4.05161 2.08008 3.88352C2.4565 3.71307 2.87672 3.62784 3.34073 3.62784C3.80948 3.62784 4.22615 3.71188 4.59073 3.87997C4.95532 4.04569 5.24414 4.27296 5.45721 4.56179C5.67264 4.85062 5.78628 5.1785 5.79812 5.54545H4.94585ZM7.23189 11V5.54545H8.06996V11H7.23189ZM7.65803 4.63636C7.49467 4.63636 7.35381 4.58073 7.23544 4.46946C7.11944 4.35819 7.06143 4.22443 7.06143 4.06818C7.06143 3.91193 7.11944 3.77817 7.23544 3.6669C7.35381 3.55563 7.49467 3.5 7.65803 3.5C7.82138 3.5 7.96106 3.55563 8.07706 3.6669C8.19543 3.77817 8.25462 3.91193 8.25462 4.06818C8.25462 4.22443 8.19543 4.35819 8.07706 4.46946C7.96106 4.58073 7.82138 4.63636 7.65803 4.63636ZM9.44869 11V10.3608L12.5453 6.38352V6.3267H9.54812V5.54545H13.6248V6.21307L10.6135 10.1619V10.2188H13.7243V11H9.44869ZM17.1458 11.1136C16.6202 11.1136 16.1668 10.9976 15.7857 10.7656C15.4069 10.5312 15.1145 10.2045 14.9086 9.78551C14.705 9.36411 14.6032 8.87405 14.6032 8.31534C14.6032 7.75663 14.705 7.2642 14.9086 6.83807C15.1145 6.40956 15.401 6.07576 15.7679 5.83665C16.1373 5.59517 16.5681 5.47443 17.0605 5.47443C17.3446 5.47443 17.6252 5.52178 17.9022 5.61648C18.1792 5.71117 18.4313 5.86506 18.6586 6.07812C18.8858 6.28883 19.0669 6.56818 19.2019 6.91619C19.3368 7.2642 19.4043 7.69271 19.4043 8.2017V8.55682H15.1998V7.83239H18.552C18.552 7.52462 18.4905 7.25 18.3674 7.00852C18.2466 6.76705 18.0738 6.57647 17.8489 6.43679C17.6264 6.29711 17.3636 6.22727 17.0605 6.22727C16.7267 6.22727 16.4379 6.31013 16.1941 6.47585C15.9526 6.6392 15.7667 6.85227 15.6365 7.11506C15.5063 7.37784 15.4412 7.65956 15.4412 7.96023V8.44318C15.4412 8.85511 15.5123 9.20431 15.6543 9.49077C15.7987 9.77486 15.9988 9.99148 16.2544 10.1406C16.5101 10.2874 16.8072 10.3608 17.1458 10.3608C17.3659 10.3608 17.5648 10.33 17.7424 10.2685C17.9223 10.2045 18.0774 10.1098 18.2076 9.98438C18.3378 9.85653 18.4384 9.69792 18.5094 9.50852L19.3191 9.7358C19.2338 10.0104 19.0906 10.2519 18.8894 10.4602C18.6882 10.6662 18.4396 10.8272 18.1436 10.9432C17.8477 11.0568 17.5151 11.1136 17.1458 11.1136Z" fill="#D6D6D6"/>
         <path d="M13.1695 28.0455C13.1269 27.6856 12.954 27.4062 12.651 27.2074C12.348 27.0085 11.9763 26.9091 11.536 26.9091C11.214 26.9091 10.9323 26.9612 10.6908 27.0653C10.4517 27.1695 10.2646 27.3127 10.1297 27.495C9.99713 27.6773 9.93084 27.8845 9.93084 28.1165C9.93084 28.3106 9.97701 28.4775 10.0693 28.6172C10.164 28.7545 10.2848 28.8693 10.4316 28.9616C10.5783 29.0516 10.7322 29.1262 10.8932 29.1854C11.0542 29.2422 11.2021 29.2884 11.3371 29.3239L12.0757 29.5227C12.2651 29.5724 12.4758 29.6411 12.7078 29.7287C12.9422 29.8163 13.1659 29.9358 13.379 30.0874C13.5944 30.2365 13.772 30.4283 13.9117 30.6626C14.0513 30.897 14.1212 31.1847 14.1212 31.5256C14.1212 31.9186 14.0182 32.2737 13.8122 32.5909C13.6086 32.9081 13.3103 33.1603 12.9173 33.3473C12.5267 33.5343 12.0521 33.6278 11.4933 33.6278C10.9725 33.6278 10.5215 33.5438 10.1404 33.3757C9.76157 33.2076 9.46328 32.9732 9.24547 32.6726C9.03004 32.3719 8.90811 32.0227 8.87971 31.625H9.7888C9.81247 31.8996 9.9048 32.1269 10.0658 32.3068C10.2291 32.4844 10.4351 32.617 10.6837 32.7045C10.9346 32.7898 11.2045 32.8324 11.4933 32.8324C11.8295 32.8324 12.1314 32.7779 12.3989 32.669C12.6664 32.5578 12.8783 32.4039 13.0345 32.2074C13.1908 32.0085 13.2689 31.7765 13.2689 31.5114C13.2689 31.2699 13.2014 31.0734 13.0665 30.9219C12.9316 30.7704 12.754 30.6473 12.5338 30.5526C12.3137 30.4579 12.0757 30.375 11.82 30.304L10.9252 30.0483C10.357 29.8849 9.90717 29.6518 9.57573 29.3487C9.24429 29.0457 9.07857 28.6491 9.07857 28.1591C9.07857 27.7519 9.18865 27.3968 9.40882 27.0938C9.63136 26.7884 9.92966 26.5516 10.3037 26.3835C10.6801 26.2131 11.1003 26.1278 11.5644 26.1278C12.0331 26.1278 12.4498 26.2119 12.8144 26.38C13.1789 26.5457 13.4678 26.773 13.6808 27.0618C13.8963 27.3506 14.0099 27.6785 14.0218 28.0455H13.1695Z" fill="#AAABAC"/>