@gem-sdk/components 17.0.0-dev.93 → 17.0.0-dev.94

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

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("../../../text/components/Text.liquid.js"),i=require("./components/variants/index.liquid.js"),s=require("./components/dropdown-swatches/Dropdown.liquid.js"),a=require("./components/dropdown-group/DropdownGroup.liquid.js"),o=require("../../../helpers.js"),n=require("./utils/mappingVariantStyles.js"),r=require("@gem-sdk/system"),p=require("./common/main/getAttr.js"),l=require("./common/main/styles.js"),d=require("./common/main/classes.js"),u=require("./common/main/getData.js"),c=require("./common/variants/classes.js"),m=require("../../helpers/function.js"),v=require("./common/variants/styles.js"),f=require("./OptionVariantsNewFormat.liquid.js"),g=require("./OptionVariantsOldFormat.liquid.js");const $={desktop:!0,tablet:!0,mobile:!0};exports.default=_=>{let{builderProps:q,styles:y,setting:h,advanced:j}=_,{align:S,swatchItemWidth:L,dropdownItemWidth:w,swatchSpacing:O,optionTypo:b,marginBottom:V}=y??{},{label:P,optionType:D,showAsSwatches:x,layout:C,hasPreSelected:E}=h??{},I=j?.d??$,{uid:A}=q??{},N=()=>{let t={};return e.DEVICES.forEach(i=>{let s=e.getResponsiveValueByScreen(L,i);t[i]="auto"===s}),t},F=()=>{let t={};return e.DEVICES.forEach(e=>{t[e]=w?.[e]==="fill"}),t},T=h?.variantPresets?n.mappingVariantStyles(h?.variantPresets,y):[],G=T?.map(e=>(e.presets={[e.optionType]:e.presets[e.optionType]},e)),k={...h,variantPresets:G},z=e=>{let t={"'":"'",'"':"""},i=e;for(let s in t)e.indexOf(s)>=0&&(i=i.replaceAll(s,t[s]));return i},W=({showDropdown:t,isRenderDefault:a,typeOfOption:o})=>e.template`
-    ${r.LiquidFor("value in values",i.default({id:"{{option.name | escape | handleize}}-{{value | escape | handleize}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:x,uid:A,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:E?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:o,activeClass:E?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...y,...k,swatchAutoWidth:N(),optionTypo:b,isRenderDefault:a}))}
-      ${r.LiquidIf(t?'type == "dropdown"':"false",s.default({...y,...k,swatchAutoWidth:F(),optionTypo:b}))}`,J=h?.variantPresets?.map(e=>({name:z(e.optionName),type:e.optionType})).map(e=>`${e.name}($1)${e.type}`).join("($2)").toString(),M={renderVariantItem:W,variantPresetsLiquid:J??""},R=r.createClass(d.getVariantOptionGroupClass(S)),B=r.createStyle(l.getVariantOptionGroupStyle(O,O)),U=u.getTextVariantTitleData(_,"Liquid"),H=r.createClass(c.getWrapVariantOptionClass(C,S)),K=r.createClass(d.getWrapDropdownClass(S)),Q=u.getDropdownGroupData(_),X=r.createAttr(p.getAttrs({uid:A,hasPreSelected:E,cssClass:j?.cssClass})),Y=r.createStyle(l.getWrapperStyle(_)),Z=r.createClass({"gp-flex gp-flex-col !gp-ml-0":!0});return e.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("../../../text/components/Text.liquid.js"),i=require("./components/variants/index.liquid.js"),s=require("./components/dropdown-swatches/Dropdown.liquid.js"),a=require("./components/dropdown-group/DropdownGroup.liquid.js"),o=require("../../../helpers.js"),n=require("./utils/mappingVariantStyles.js"),r=require("@gem-sdk/system"),p=require("./common/main/getAttr.js"),l=require("./common/main/styles.js"),d=require("./common/main/classes.js"),u=require("./common/main/getData.js"),c=require("./common/variants/classes.js"),m=require("../../helpers/function.js"),v=require("./common/variants/styles.js"),f=require("./common/const.js"),g=require("./OptionVariantsNewFormat.liquid.js"),_=require("./OptionVariantsOldFormat.liquid.js");const $={desktop:!0,tablet:!0,mobile:!0};exports.default=q=>{let{builderProps:y,styles:h,setting:j,advanced:S}=q,{align:L,swatchItemWidth:O,dropdownItemWidth:w,swatchSpacing:V,optionTypo:b,marginBottom:P}=h??{},{label:D,optionType:I,showAsSwatches:N,layout:x,hasPreSelected:A}=j??{},C=S?.d??$,{uid:E}=y??{},T=()=>{let t={};return e.DEVICES.forEach(i=>{let s=e.getResponsiveValueByScreen(O,i);t[i]="auto"===s}),t},F=()=>{let t={};return e.DEVICES.forEach(e=>{t[e]=w?.[e]==="fill"}),t},G=j?.variantPresets?n.mappingVariantStyles(j?.variantPresets,h):[],k=G?.map(e=>(e.presets={[e.optionType]:e.presets[e.optionType]},e)),W={...j,variantPresets:k},z=e=>{let t={"'":"'",'"':"""},i=e;for(let s in t)e.indexOf(s)>=0&&(i=i.replaceAll(s,t[s]));return i},M=({showDropdown:t,isRenderDefault:a,typeOfOption:o})=>e.template`
+    ${r.LiquidFor("value in values",i.default({id:"{{option.name | escape | handleize}}-{{value | escape | handleize}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:N,uid:E,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:A?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:o,activeClass:A?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...h,...W,swatchAutoWidth:T(),optionTypo:b,isRenderDefault:a}))}
+      ${r.LiquidIf(t?'type == "dropdown"':"false",s.default({...h,...W,swatchAutoWidth:F(),optionTypo:b}))}`,R=j?.variantPresets?.map(e=>({name:z(e.optionName),type:e.optionType})).map(e=>`${e.name}($1)${e.type}`).join("($2)").toString(),J={renderVariantItem:M,variantPresetsLiquid:R??""},U=r.createClass(d.getVariantOptionGroupClass(L)),B=r.createStyle(l.getVariantOptionGroupStyle(V,V)),H=u.getTextVariantTitleData(q,"Liquid"),K=r.createClass(c.getWrapVariantOptionClass(x,L)),Q=r.createClass(d.getWrapDropdownClass(L)),Y=u.getDropdownGroupData(q),X=r.createAttr(p.getAttrs({uid:E,hasPreSelected:A,cssClass:S?.cssClass})),Z=r.createStyle(l.getWrapperStyle(q)),ee=r.createClass({"gp-flex gp-flex-col !gp-ml-0":!0});return e.template`
     ${r.Liquid("{%- assign total_combinations = 1 -%}")}
     ${r.LiquidFor("option in product.options_with_values","{%- assign total_combinations = total_combinations | times: option.values.size -%}")}
     <gp-product-variants
       ${X}
       gp-data='{
-        "setting":${JSON.stringify(k)?.replaceAll("'","&#039;")},
-        "styles":${JSON.stringify(y)},
+        "setting":${JSON.stringify(W)?.replaceAll("'","&#039;")},
+        "styles":${JSON.stringify(h)},
         "variants":{{product.variants | json | escape}},
         "optionsWithValues": {{product.options_with_values | json | escape}},
         "variantSelected": {{ variant | json | escape }},
@@ -17,7 +17,7 @@
         "productId": {{product.id | json | escape}},
         "productUrl": {{product.url | json | escape}},
         "productHandle": {{product.handle | json | escape}},
-        "displayState": ${JSON.stringify(I)},
+        "displayState": ${JSON.stringify(C)},
         "totalVariantCombinations": {{total_combinations}},
         "firstAvailableVariant": {{product.selected_or_first_available_variant | json | escape}}
       }
@@ -26,16 +26,16 @@
       ${r.Liquid("{%- assign options = product.options_with_values -%}")}
       ${r.Liquid("{%- assign variants = product.variants -%}")}
       ${r.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>",e.template`<div
-            class="${Z}"
-            style="${Y}"
+            class="${ee}"
+            style="${Z}"
           >
-          ${r.If("groupOption"===D,`
-      <div className="${K}">
-        ${a.default(Q)}
+          ${r.If("groupOption"===I,`
+      <div className="${Q}">
+        ${a.default(Y)}
       </div>
     `,e.template`
-      ${r.Liquid(`{%- assign presets = "${h?.variantPresets?.map(e=>`${z(e.optionName)}($2)${e.optionType}`).join("($1)")}" | split: '($1)' -%}`)}
-      ${r.Liquid(`{% assign hiddenPresetOptions = "${h?.variantPresets?.filter(e=>!!e?.hide)?.map(e=>e.optionName).join(",")}" | split: ',' %}`)}
+      ${r.Liquid(`{%- assign presets = "${j?.variantPresets?.map(e=>`${z(e.optionName)}($2)${e.optionType}`).join("($1)")}" | split: '($1)' -%}`)}
+      ${r.Liquid(`{% assign hiddenPresetOptions = "${j?.variantPresets?.filter(e=>!!e?.hide)?.map(e=>e.optionName).join(",")}" | split: ',' %}`)}
       
       ${r.Liquid(`{% assign all_option_names = options | map: 'name' %}
       {% assign filtered_options_string = '' %}
@@ -65,8 +65,8 @@
       ${r.LiquidFor("option in options",`
         <div
         option-name="{{option.name | escape}}"
-        class="${H} ${r.LiquidIf("hiddenPresetOptions contains option.name","gp-hidden")}"
-        style="${m.getStyleOfObject(v.getMarginBottomStyle(V))}${r.Liquid("{% if forloop.last or option.name == last_option_name %}--mb:0;--mb-mobile:0;--mb-tablet:0;{% endif %}")}"
+        class="${K} ${r.LiquidIf("hiddenPresetOptions contains option.name","gp-hidden")}"
+        style="${m.getStyleOfObject(v.getMarginBottomStyle(P))}${f.PRODUCT_VARIANT_OPTION_MINW_STYLE}${r.Liquid("{% if forloop.last or option.name == last_option_name %}--mb:0;--mb-mobile:0;--mb-tablet:0;{% endif %}")}"
         >
           ${r.Liquid("{%- assign showVariantClass = 'variant-display' -%}")}
           ${r.Liquid("{%- assign optionName = option.name  -%}")}
@@ -74,10 +74,10 @@
             ${r.Liquid("{%- assign presetDetail = preset | split: '($2)' -%}")}
             ${r.LiquidIf("presetDetail[1] == 'dropdown' and presetDetail[0] == optionName",`${r.Liquid("{%- assign showVariantClass = '' -%}")} ${r.Liquid("{%- break -%}")}`)}
           `)}
-          ${r.If(P,t.default(U)," ")}
+          ${r.If(D,t.default(H)," ")}
           <div
               variant-option-name="{{option.name | escape}}"
-              class="${R}"
+              class="${U}"
               style="${m.getStyleOfObject(B)}"
             >
               ${r.Liquid("{%- assign values = option.values -%}")}
@@ -91,10 +91,10 @@
                   {%- assign selectedValue = variant.option3 -%}
                 {%- endif -%}
               `)}
-              ${r.If(!E,r.Liquid("{%- assign selectedValue = null -%}"),"")}
-              ${r.If(x,e.template`
-      ${r.LiquidIf("shop.metafields.GEMPAGES.swatchesJSONFormat and shop.metafields.GEMPAGES.swatchesJSONFormat != blank",f.renderOptionValuesNewFormatSwatches(M),g.renderOptionValuesOld(M))}
-      `,W({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
+              ${r.If(!A,r.Liquid("{%- assign selectedValue = null -%}"),"")}
+              ${r.If(N,e.template`
+      ${r.LiquidIf("shop.metafields.GEMPAGES.swatchesJSONFormat and shop.metafields.GEMPAGES.swatchesJSONFormat != blank",g.renderOptionValuesNewFormatSwatches(J),_.renderOptionValuesOld(J))}
+      `,M({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
           </div>
       </div>`)}
     `)}

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

@@ -1 +1 @@
-"use strict";exports.OPTION_VALUES_DELIMITER="|||";
+"use strict";exports.OPTION_VALUES_DELIMITER="|||",exports.PRODUCT_VARIANT_OPTION_MINW_STYLE="--minw-tablet:unset;--minw-mobile:unset;";

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

@@ -1,13 +1,13 @@
-import{template as e,baseAssetURL as t,isLocalEnv as i,DEVICES as s,getResponsiveValueByScreen as o}from"@gem-sdk/core";import a from"../../../text/components/Text.liquid.js";import n from"./components/variants/index.liquid.js";import r from"./components/dropdown-swatches/Dropdown.liquid.js";import p from"./components/dropdown-group/DropdownGroup.liquid.js";import{getSettingPreloadData as l}from"../../../helpers.js";import{mappingVariantStyles as d}from"./utils/mappingVariantStyles.js";import{createClass as m,createStyle as c,createAttr as u,Liquid as v,LiquidFor as f,LiquidIf as $,If as g}from"@gem-sdk/system";import{getAttrs as _}from"./common/main/getAttr.js";import{getVariantOptionGroupStyle as h,getWrapperStyle as y}from"./common/main/styles.js";import{getVariantOptionGroupClass as j,getWrapDropdownClass as w}from"./common/main/classes.js";import{getTextVariantTitleData as b,getDropdownGroupData as S}from"./common/main/getData.js";import{getWrapVariantOptionClass as P}from"./common/variants/classes.js";import{getStyleOfObject as O}from"../../helpers/function.js";import{getMarginBottomStyle as x}from"./common/variants/styles.js";import{renderOptionValuesNewFormatSwatches as V}from"./OptionVariantsNewFormat.liquid.js";import{renderOptionValuesOld as N}from"./OptionVariantsOldFormat.liquid.js";let A={desktop:!0,tablet:!0,mobile:!0},q=q=>{let{builderProps:D,styles:E,setting:T,advanced:k}=q,{align:F,swatchItemWidth:G,dropdownItemWidth:z,swatchSpacing:C,optionTypo:J,marginBottom:I}=E??{},{label:M,optionType:W,showAsSwatches:L,layout:R,hasPreSelected:H}=T??{},K=k?.d??A,{uid:Q}=D??{},U=()=>{let e={};return s.forEach(t=>{let i=o(G,t);e[t]="auto"===i}),e},B=()=>{let e={};return s.forEach(t=>{e[t]=z?.[t]==="fill"}),e},X=T?.variantPresets?d(T?.variantPresets,E):[],Y=X?.map(e=>(e.presets={[e.optionType]:e.presets[e.optionType]},e)),Z={...T,variantPresets:Y},ee=e=>{let t={"'":"'",'"':"""},i=e;for(let s in t)e.indexOf(s)>=0&&(i=i.replaceAll(s,t[s]));return i},et=({showDropdown:t,isRenderDefault:i,typeOfOption:s})=>e`
-    ${f("value in values",n({id:"{{option.name | escape | handleize}}-{{value | escape | handleize}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:L,uid:Q,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:H?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:s,activeClass:H?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...E,...Z,swatchAutoWidth:U(),optionTypo:J,isRenderDefault:i}))}
-      ${$(t?'type == "dropdown"':"false",r({...E,...Z,swatchAutoWidth:B(),optionTypo:J}))}`,ei=T?.variantPresets?.map(e=>({name:ee(e.optionName),type:e.optionType})).map(e=>`${e.name}($1)${e.type}`).join("($2)").toString(),es={renderVariantItem:et,variantPresetsLiquid:ei??""},eo=m(j(F)),ea=c(h(C,C)),en=b(q,"Liquid"),er=m(P(R,F)),ep=m(w(F)),el=S(q),ed=u(_({uid:Q,hasPreSelected:H,cssClass:k?.cssClass})),em=c(y(q)),ec=m({"gp-flex gp-flex-col !gp-ml-0":!0});return e`
+import{template as e,baseAssetURL as t,isLocalEnv as o,DEVICES as i,getResponsiveValueByScreen as s}from"@gem-sdk/core";import a from"../../../text/components/Text.liquid.js";import n from"./components/variants/index.liquid.js";import r from"./components/dropdown-swatches/Dropdown.liquid.js";import p from"./components/dropdown-group/DropdownGroup.liquid.js";import{getSettingPreloadData as l}from"../../../helpers.js";import{mappingVariantStyles as d}from"./utils/mappingVariantStyles.js";import{createClass as m,createStyle as c,createAttr as u,Liquid as v,LiquidFor as f,LiquidIf as $,If as g}from"@gem-sdk/system";import{getAttrs as _}from"./common/main/getAttr.js";import{getVariantOptionGroupStyle as h,getWrapperStyle as y}from"./common/main/styles.js";import{getVariantOptionGroupClass as j,getWrapDropdownClass as w}from"./common/main/classes.js";import{getTextVariantTitleData as b,getDropdownGroupData as S}from"./common/main/getData.js";import{getWrapVariantOptionClass as P}from"./common/variants/classes.js";import{getStyleOfObject as O}from"../../helpers/function.js";import{getMarginBottomStyle as x}from"./common/variants/styles.js";import{PRODUCT_VARIANT_OPTION_MINW_STYLE as V}from"./common/const.js";import{renderOptionValuesNewFormatSwatches as N}from"./OptionVariantsNewFormat.liquid.js";import{renderOptionValuesOld as A}from"./OptionVariantsOldFormat.liquid.js";let q={desktop:!0,tablet:!0,mobile:!0},D=D=>{let{builderProps:E,styles:T,setting:k,advanced:F}=D,{align:G,swatchItemWidth:z,dropdownItemWidth:C,swatchSpacing:J,optionTypo:I,marginBottom:M}=T??{},{label:W,optionType:L,showAsSwatches:R,layout:H,hasPreSelected:K}=k??{},Q=F?.d??q,{uid:U}=E??{},B=()=>{let e={};return i.forEach(t=>{let o=s(z,t);e[t]="auto"===o}),e},X=()=>{let e={};return i.forEach(t=>{e[t]=C?.[t]==="fill"}),e},Y=k?.variantPresets?d(k?.variantPresets,T):[],Z=Y?.map(e=>(e.presets={[e.optionType]:e.presets[e.optionType]},e)),ee={...k,variantPresets:Z},et=e=>{let t={"'":"'",'"':"""},o=e;for(let i in t)e.indexOf(i)>=0&&(o=o.replaceAll(i,t[i]));return o},eo=({showDropdown:t,isRenderDefault:o,typeOfOption:i})=>e`
+    ${f("value in values",n({id:"{{option.name | escape | handleize}}-{{value | escape | handleize}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:R,uid:U,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:K?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:i,activeClass:K?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...T,...ee,swatchAutoWidth:B(),optionTypo:I,isRenderDefault:o}))}
+      ${$(t?'type == "dropdown"':"false",r({...T,...ee,swatchAutoWidth:X(),optionTypo:I}))}`,ei=k?.variantPresets?.map(e=>({name:et(e.optionName),type:e.optionType})).map(e=>`${e.name}($1)${e.type}`).join("($2)").toString(),es={renderVariantItem:eo,variantPresetsLiquid:ei??""},ea=m(j(G)),en=c(h(J,J)),er=b(D,"Liquid"),ep=m(P(H,G)),el=m(w(G)),ed=S(D),em=u(_({uid:U,hasPreSelected:K,cssClass:F?.cssClass})),ec=c(y(D)),eu=m({"gp-flex gp-flex-col !gp-ml-0":!0});return e`
     ${v("{%- assign total_combinations = 1 -%}")}
     ${f("option in product.options_with_values","{%- assign total_combinations = total_combinations | times: option.values.size -%}")}
     <gp-product-variants
-      ${ed}
+      ${em}
       gp-data='{
-        "setting":${JSON.stringify(Z)?.replaceAll("'","&#039;")},
-        "styles":${JSON.stringify(E)},
+        "setting":${JSON.stringify(ee)?.replaceAll("'","&#039;")},
+        "styles":${JSON.stringify(T)},
         "variants":{{product.variants | json | escape}},
         "optionsWithValues": {{product.options_with_values | json | escape}},
         "variantSelected": {{ variant | json | escape }},
@@ -17,7 +17,7 @@ import{template as e,baseAssetURL as t,isLocalEnv as i,DEVICES as s,getResponsiv
         "productId": {{product.id | json | escape}},
         "productUrl": {{product.url | json | escape}},
         "productHandle": {{product.handle | json | escape}},
-        "displayState": ${JSON.stringify(K)},
+        "displayState": ${JSON.stringify(Q)},
         "totalVariantCombinations": {{total_combinations}},
         "firstAvailableVariant": {{product.selected_or_first_available_variant | json | escape}}
       }
@@ -26,16 +26,16 @@ import{template as e,baseAssetURL as t,isLocalEnv as i,DEVICES as s,getResponsiv
       ${v("{%- assign options = product.options_with_values -%}")}
       ${v("{%- assign variants = product.variants -%}")}
       ${$("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>",e`<div
-            class="${ec}"
-            style="${em}"
+            class="${eu}"
+            style="${ec}"
           >
-          ${g("groupOption"===W,`
-      <div className="${ep}">
-        ${p(el)}
+          ${g("groupOption"===L,`
+      <div className="${el}">
+        ${p(ed)}
       </div>
     `,e`
-      ${v(`{%- assign presets = "${T?.variantPresets?.map(e=>`${ee(e.optionName)}($2)${e.optionType}`).join("($1)")}" | split: '($1)' -%}`)}
-      ${v(`{% assign hiddenPresetOptions = "${T?.variantPresets?.filter(e=>!!e?.hide)?.map(e=>e.optionName).join(",")}" | split: ',' %}`)}
+      ${v(`{%- assign presets = "${k?.variantPresets?.map(e=>`${et(e.optionName)}($2)${e.optionType}`).join("($1)")}" | split: '($1)' -%}`)}
+      ${v(`{% assign hiddenPresetOptions = "${k?.variantPresets?.filter(e=>!!e?.hide)?.map(e=>e.optionName).join(",")}" | split: ',' %}`)}
       
       ${v(`{% assign all_option_names = options | map: 'name' %}
       {% assign filtered_options_string = '' %}
@@ -65,8 +65,8 @@ import{template as e,baseAssetURL as t,isLocalEnv as i,DEVICES as s,getResponsiv
       ${f("option in options",`
         <div
         option-name="{{option.name | escape}}"
-        class="${er} ${$("hiddenPresetOptions contains option.name","gp-hidden")}"
-        style="${O(x(I))}${v("{% if forloop.last or option.name == last_option_name %}--mb:0;--mb-mobile:0;--mb-tablet:0;{% endif %}")}"
+        class="${ep} ${$("hiddenPresetOptions contains option.name","gp-hidden")}"
+        style="${O(x(M))}${V}${v("{% if forloop.last or option.name == last_option_name %}--mb:0;--mb-mobile:0;--mb-tablet:0;{% endif %}")}"
         >
           ${v("{%- assign showVariantClass = 'variant-display' -%}")}
           ${v("{%- assign optionName = option.name  -%}")}
@@ -74,11 +74,11 @@ import{template as e,baseAssetURL as t,isLocalEnv as i,DEVICES as s,getResponsiv
             ${v("{%- assign presetDetail = preset | split: '($2)' -%}")}
             ${$("presetDetail[1] == 'dropdown' and presetDetail[0] == optionName",`${v("{%- assign showVariantClass = '' -%}")} ${v("{%- break -%}")}`)}
           `)}
-          ${g(M,a(en)," ")}
+          ${g(W,a(er)," ")}
           <div
               variant-option-name="{{option.name | escape}}"
-              class="${eo}"
-              style="${O(ea)}"
+              class="${ea}"
+              style="${O(en)}"
             >
               ${v("{%- assign values = option.values -%}")}
               ${v("{%- assign rootForloop = forloop.index0 -%}")}
@@ -91,15 +91,15 @@ import{template as e,baseAssetURL as t,isLocalEnv as i,DEVICES as s,getResponsiv
                   {%- assign selectedValue = variant.option3 -%}
                 {%- endif -%}
               `)}
-              ${g(!H,v("{%- assign selectedValue = null -%}"),"")}
-              ${g(L,e`
-      ${$("shop.metafields.GEMPAGES.swatchesJSONFormat and shop.metafields.GEMPAGES.swatchesJSONFormat != blank",V(es),N(es))}
-      `,et({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
+              ${g(!K,v("{%- assign selectedValue = null -%}"),"")}
+              ${g(R,e`
+      ${$("shop.metafields.GEMPAGES.swatchesJSONFormat and shop.metafields.GEMPAGES.swatchesJSONFormat != blank",N(es),A(es))}
+      `,eo({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
           </div>
       </div>`)}
     `)}
         </div>`)}
     </gp-product-variants>
 
-    ${(()=>{let e=i?"{{ 'gp-product-variant-v7-5.js' | asset_url }}":`${t}/assets-v2/gp-product-variant-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${l('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`})()}
-  `};export{q as default};
+    ${(()=>{let e=o?"{{ 'gp-product-variant-v7-5.js' | asset_url }}":`${t}/assets-v2/gp-product-variant-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${l('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`})()}
+  `};export{D as default};

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

@@ -1 +1 @@
-let E="|||";export{E as OPTION_VALUES_DELIMITER};
+let e="|||",t="--minw-tablet:unset;--minw-mobile:unset;";export{e as OPTION_VALUES_DELIMITER,t as PRODUCT_VARIANT_OPTION_MINW_STYLE};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "17.0.0-dev.93",
+  "version": "17.0.0-dev.94",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,7 +26,7 @@
     "i18n:extract": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/translate/extract-texts-to-locales.js && node ./scripts/translate/en-keys-usage.js"
   },
   "devDependencies": {
-    "@gem-sdk/core": "17.0.0-dev.93",
+    "@gem-sdk/core": "17.0.0-dev.94",
     "@gem-sdk/styles": "17.0.0-dev.93",
     "@gem-sdk/system": "17.0.0-dev.93",
     "@types/react-transition-group": "^4.4.12",