@gem-sdk/components 12.0.0-dev.133 → 12.0.0-dev.138

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

@@ -1,8 +1,41 @@
-import{template as t,isLocalEnv as e,baseAssetURL as i,DEVICES as o,getResponsiveValueByScreen as s}from"@gem-sdk/core";import n from"../../../text/components/Text.liquid.js";import a 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 $}from"@gem-sdk/system";import{getAttrs as g}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 S,getDropdownGroupData as P}from"./common/main/getData.js";import{getWrapVariantOptionClass as b}from"./common/variants/classes.js";import{getStyleOfObject as A}from"../../helpers/function.js";import{getMarginBottomStyle as D}from"./common/variants/styles.js";import{renderOptionValuesNewFormatSwatches as N}from"./OptionVariantsNewFormat.liquid.js";import{renderOptionValuesOld as V}from"./OptionVariantsOldFormat.liquid.js";let DEFAULT_ADVANCED_DISPLAY_SETTING={desktop:!0,tablet:!0,mobile:!0},ProductVariants=E=>{let{builderProps:O,styles:T,setting:x,advanced:q}=E,{align:F,swatchItemWidth:G,dropdownItemWidth:C,swatchSpacing:I,optionTypo:k,marginBottom:z}=T??{},{label:L,optionType:J,showAsSwatches:M,layout:U,hasPreSelected:W}=x??{},R=q?.d??DEFAULT_ADVANCED_DISPLAY_SETTING,{uid:Y}=O??{},H="groupOption"===J,K=()=>{let t={};return o.forEach(e=>{let i=s(G,e);t[e]="auto"===i}),t},Q=()=>{let t={};return o.forEach(e=>{t[e]=C?.[e]==="fill"}),t},B=x?.variantPresets?d(x?.variantPresets,T):[],X=B?.map(t=>({...t,presets:{[t.optionType]:t.presets[t.optionType]}})),Z={...x,variantPresets:X},tt=t=>{let e={"'":"'",'"':"""},i=t;for(let o in e)t.indexOf(o)>=0&&(i=i.replaceAll(o,e[o]));return i},te=()=>x?.variantPresets?.map(t=>`${tt(t.optionName)}($2)${t.optionType}`).join("($1)"),ti=()=>x?.variantPresets?.filter(t=>!!t?.hide)?.map(t=>t.optionName).join(","),to=({showDropdown:e,isRenderDefault:i,typeOfOption:o})=>t`
-    ${f("value in values",a({id:"{{option.name | escape | handleize}}-{{value | escape | handleize}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:M,uid:Y,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:W?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:o,activeClass:W?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...T,...Z,swatchAutoWidth:K(),optionTypo:k,isRenderDefault:i}))}
-      ${_(e?'type == "dropdown"':"false",r({...T,...Z,swatchAutoWidth:Q(),optionTypo:k}))}`,ts=x?.variantPresets?.map(t=>({name:tt(t.optionName),type:t.optionType})).map(t=>`${t.name}($1)${t.type}`).join("($2)").toString(),tn={renderVariantItem:to,variantPresetsLiquid:ts??""},ta=m(j(F)),tr=c(h(I,I)),tp=S(E,"Liquid"),tl=m(b(U,F)),td=()=>t`
-      ${v(`{%- assign presets = "${te()}" | split: '($1)' -%}`)}
-      ${v(`{% assign hiddenPresetOptions = "${ti()}" | split: ',' %}`)}
+import{template as t,baseAssetURL as e,isLocalEnv as i,DEVICES as o,getResponsiveValueByScreen as s}from"@gem-sdk/core";import n from"../../../text/components/Text.liquid.js";import a 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 t={};return o.forEach(e=>{let i=s(G,e);t[e]="auto"===i}),t},B=()=>{let t={};return o.forEach(e=>{t[e]=z?.[e]==="fill"}),t},X=T?.variantPresets?d(T?.variantPresets,E):[],Y=X?.map(t=>({...t,presets:{[t.optionType]:t.presets[t.optionType]}})),Z={...T,variantPresets:Y},tt=t=>{let e={"'":"'",'"':"""},i=t;for(let o in e)t.indexOf(o)>=0&&(i=i.replaceAll(o,e[o]));return i},te=({showDropdown:e,isRenderDefault:i,typeOfOption:o})=>t`
+    ${f("value in values",a({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:o,activeClass:H?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...E,...Z,swatchAutoWidth:U(),optionTypo:J,isRenderDefault:i}))}
+      ${$(e?'type == "dropdown"':"false",r({...E,...Z,swatchAutoWidth:B(),optionTypo:J}))}`,ti=T?.variantPresets?.map(t=>({name:tt(t.optionName),type:t.optionType})).map(t=>`${t.name}($1)${t.type}`).join("($2)").toString(),to={renderVariantItem:te,variantPresetsLiquid:ti??""},ts=m(j(F)),tn=c(h(C,C)),ta=b(q,"Liquid"),tr=m(P(R,F)),tp=m(w(F)),tl=S(q),td=u(_({uid:Q,hasPreSelected:H,cssClass:k?.cssClass})),tm=c(y(q)),tc=m({"gp-flex gp-flex-col !gp-ml-0":!0});return t`
+    ${v("{%- assign total_combinations = 1 -%}")}
+    ${f("option in product.options_with_values","{%- assign total_combinations = total_combinations | times: option.values.size -%}")}
+    <gp-product-variants ${td}>
+      <script gp-data type="application/json">
+        {
+          "setting":${JSON.stringify(Z)?.replaceAll("'","&#039;")},
+          "styles":${JSON.stringify(E)},
+          "variants":{{product.variants | json}},
+          "optionsWithValues": {{product.options_with_values | json}},
+          "variantSelected": {{ variant | json }},
+          "variantInventoryQuantity": {{product.variants | map: 'inventory_quantity' | json }},
+          "variantInventoryPolicy": {{product.variants | map: 'inventory_policy' | json }},
+          "moneyFormat": {{shop.money_format | json }},
+          "productId": {{product.id | json }},
+          "productUrl": {{product.url | json }},
+          "productHandle": {{product.handle | json }},
+          "displayState": ${JSON.stringify(K)},
+          "totalVariantCombinations": {{total_combinations}},
+          "firstAvailableVariant": {{product.selected_or_first_available_variant | json }}
+        }
+      </script>
+      <div class="gp-hidden" style="--hvr-shadow: none; --hvr-shadow-tablet: none; --hvr-shadow-mobile: none"></div>
+      ${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>",t`<div
+            class="${tc}"
+            style="${tm}"
+          >
+          ${g("groupOption"===W,`
+      <div className="${tp}">
+        ${p(tl)}
+      </div>
+    `,t`
+      ${v(`{%- assign presets = "${T?.variantPresets?.map(t=>`${tt(t.optionName)}($2)${t.optionType}`).join("($1)")}" | split: '($1)' -%}`)}
+      ${v(`{% assign hiddenPresetOptions = "${T?.variantPresets?.filter(t=>!!t?.hide)?.map(t=>t.optionName).join(",")}" | split: ',' %}`)}
 
       ${v(`{% assign all_option_names = options | map: 'name' %}
       {% assign filtered_options_string = '' %}
@@ -32,20 +65,20 @@ import{template as t,isLocalEnv as e,baseAssetURL as i,DEVICES as o,getResponsiv
       ${f("option in options",`
         <div
         option-name="{{option.name | escape}}"
-        class="${tl} ${_("hiddenPresetOptions contains option.name","gp-hidden")}"
-        style="${A(D(z))}${v("{% if forloop.last or option.name == last_option_name %}--mb:0;--mb-mobile:0;--mb-tablet:0;{% endif %}")}"
+        class="${tr} ${$("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 %}")}"
         >
           ${v("{%- assign showVariantClass = 'variant-display' -%}")}
           ${v("{%- assign optionName = option.name  -%}")}
           ${f("preset in presets",`
             ${v("{%- assign presetDetail = preset | split: '($2)' -%}")}
-            ${_("presetDetail[1] == 'dropdown' and presetDetail[0] == optionName",`${v("{%- assign showVariantClass = '' -%}")} ${v("{%- break -%}")}`)}
+            ${$("presetDetail[1] == 'dropdown' and presetDetail[0] == optionName",`${v("{%- assign showVariantClass = '' -%}")} ${v("{%- break -%}")}`)}
           `)}
-          ${$(L,n(tp)," ")}
+          ${g(M,n(ta)," ")}
           <div
               variant-option-name="{{option.name | escape}}"
-              class="${ta}"
-              style="${A(tr)}"
+              class="${ts}"
+              style="${O(tn)}"
             >
               ${v("{%- assign values = option.values -%}")}
               ${v("{%- assign rootForloop = forloop.index0 -%}")}
@@ -58,48 +91,15 @@ import{template as t,isLocalEnv as e,baseAssetURL as i,DEVICES as o,getResponsiv
                   {%- assign selectedValue = variant.option3 -%}
                 {%- endif -%}
               `)}
-              ${$(!W,v("{%- assign selectedValue = null -%}"),"")}
-              ${$(M,tm(),to({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
+              ${g(!H,v("{%- assign selectedValue = null -%}"),"")}
+              ${g(L,t`
+      ${$("shop.metafields.GEMPAGES.swatchesJSONFormat and shop.metafields.GEMPAGES.swatchesJSONFormat != blank",V(to),N(to))}
+      `,te({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
           </div>
       </div>`)}
-    `,tm=()=>t`
-      ${_("shop.metafields.GEMPAGES.swatchesJSONFormat and shop.metafields.GEMPAGES.swatchesJSONFormat != blank",N(tn),V(tn))}
-      `,tc=m(w(F)),tu=P(E),tv=()=>`
-      <div className="${tc}">
-        ${p(tu)}
-      </div>
-    `,tf=u(g({uid:Y,hasPreSelected:W,cssClass:q?.cssClass})),t_=c(y(E)),t$=m({"gp-flex gp-flex-col !gp-ml-0":!0}),tg=()=>{let t=e?"{{ 'gp-product-variant-v7-5.js' | asset_url }}":`${i}/assets-v2/gp-product-variant-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${l('class="gps-link" delay',"src")}="${t}" defer="defer"></script>`};return t`
-    ${v("{%- assign total_combinations = 1 -%}")}
-    ${f("option in product.options_with_values","{%- assign total_combinations = total_combinations | times: option.values.size -%}")}
-    <gp-product-variants ${tf}>
-      <script gp-data type="application/json">
-        {
-          "setting":${JSON.stringify(Z)?.replaceAll("'","&#039;")},
-          "styles":${JSON.stringify(T)},
-          "variants":{{product.variants | json}},
-          "optionsWithValues": {{product.options_with_values | json}},
-          "variantSelected": {{ variant | json }},
-          "variantInventoryQuantity": {{product.variants | map: 'inventory_quantity' | json }},
-          "variantInventoryPolicy": {{product.variants | map: 'inventory_policy' | json }},
-          "moneyFormat": {{shop.money_format | json }},
-          "productId": {{product.id | json }},
-          "productUrl": {{product.url | json }},
-          "productHandle": {{product.handle | json }},
-          "displayState": ${JSON.stringify(R)},
-          "totalVariantCombinations": {{total_combinations}},
-          "firstAvailableVariant": {{product.selected_or_first_available_variant | json }}
-        }
-      </script>
-      <div class="gp-hidden" style="--hvr-shadow: none; --hvr-shadow-tablet: none; --hvr-shadow-mobile: none"></div>
-      ${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>",t`<div
-            class="${t$}"
-            style="${t_}"
-          >
-          ${$(H,tv(),td())}
+    `)}
         </div>`)}
     </gp-product-variants>
 
-    ${tg()}
-  `};export{ProductVariants as default};
+    ${(()=>{let t=i?"{{ 'gp-product-variant-v7-5.js' | asset_url }}":`${e}/assets-v2/gp-product-variant-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${l('class="gps-link" delay',"src")}="${t}" defer="defer"></script>`})()}
+  `};export{q as default};

package/dist/esm/product/components/product-variants/common/base/attrs.js

@@ -1 +1 @@
-let getWrapperAttr=(a,e)=>{let{typeOfOption:t,available:i,optionName:p,optionNameValue:o,isVariantOutStock:n}=a;return"Liquid"===e?{id:"value-wrapper-{{option.name | escape | strip | handleize}}-{{value | escape | strip | handleize}}","option-data":"{{option.name | escape}}","option-value":"{{value | escape}}","option-position":"{{option.position}}","data-gp-option-available":"{{value.available}}","option-type":`${t||"rectangle_list"}`,"data-disabled":"{%- if option_disabled == true -%} disabled  {%- endif -%}","data-hidden":"true"}:{id:`value-wrapper-${p}-${o}`,"option-data":p||"","option-value":o||"","option-position":1,"data-gp-option-available":!!i,"option-type":`${t||"rectangle_list"}`,"data-disabled":!!n,"data-hidden":"true"}};export{getWrapperAttr};
+let a=(a,e)=>{let{typeOfOption:t,available:i,optionName:o,optionNameValue:p,isVariantOutStock:n}=a;return"Liquid"===e?{id:"value-wrapper-{{option.name | escape | strip | handleize}}-{{value | escape | strip | handleize}}","option-data":"{{option.name | escape}}","option-value":"{{value | escape}}","option-position":"{{option.position}}","data-gp-option-available":"{{value.available}}","option-type":`${t||"rectangle_list"}`,"data-disabled":"{%- if option_disabled == true -%} disabled  {%- endif -%}","data-hidden":"true"}:{id:`value-wrapper-${o}-${p}`,"option-data":o||"","option-value":p||"","option-position":1,"data-gp-option-available":!!i,"option-type":`${t||"rectangle_list"}`,"data-disabled":!!n,"data-hidden":"true"}};export{a as getWrapperAttr};

package/dist/esm/product/components/product-variants/common/base/classes.js

@@ -1,2 +1,2 @@
-import{composeTypographyClassName as e,cls as p,composeClasses as r}from"@gem-sdk/core";let getWrapperClass=t=>{let{typeOfOption:l,optionTypo:g,optionTypography:o,variantKey:f,soldOutMarkLine:a,available:s}=t,i="color"===l,b=`${e(g,o)}`,n=p({...f&&{[f]:!0},[b]:!0,"gp-p-[4px]":i,"before:gp-absolute before:gp-top-[50%] before:gp-z-1 before:gp-block before:gp-w-full before:-gp-rotate-45 before:gp-border-t before:gp-border-[#A1A1A1] before:gp-bg-[#333]":a&&!s&&!i}),d=`gp-relative gp-flex gp-cursor-pointer gp-items-center gp-justify-center gp-text-center option-value-wrapper gp-overflow-hidden gp-w-full gp-h-full data-[disabled='disabled']:gp-pointer-events-none data-[disabled='disabled']:!gp-cursor-not-allowed
-         data-[hidden='false']:gp-flex`,c=`${d} ${n}`.trim();return r(c)},getWrapperTextClass=(e,t)=>{let l=p({"color gp-line-clamp-2 gp-flex gp-h-full gp-w-full gp-items-center gp-justify-center":t,"gp-flex gp-flex-col gp-justify-center gp-items-center gp-gap-[6px":e}),g=`option-value gp-overflow-hidden gp-relative ${l}`.trim();return r(g)},getTextClass=({optionTypo:t,optionTypography:l,isColorType:g,isUploadImageType:o})=>{let f=`${e(t,l)}`,a=p({"gp-text-center":!0,[f]:!0,"gp-overflow-hidden gp-text-ellipsis gp-px-1":g||o}),s=`${a}`.trim();return r(s)},getColorClass=({soldOutMarkLine:e,available:t})=>{let l=p({"before:gp-absolute before:gp-top-[50%] before:gp-block before:gp-w-full before:gp--rotate-45 before:gp-border":e&&!t}),g=`color gp-relative gp-h-full gp-w-full gp-overflow-hidden gp-min-w-fit gp-flex gp-color-circle ${l}`.trim();return r(g)};export{getColorClass,getTextClass,getWrapperClass,getWrapperTextClass};
+import{cls as e,composeClasses as p,composeTypographyClassName as r}from"@gem-sdk/core";let t=t=>{let{typeOfOption:l,optionTypo:o,optionTypography:g,variantKey:f,soldOutMarkLine:i,available:a}=t,b="color"===l,n=`${r(o,g)}`,s=e({...f&&{[f]:!0},[n]:!0,"gp-p-[4px]":b,"before:gp-absolute before:gp-top-[50%] before:gp-z-1 before:gp-block before:gp-w-full before:-gp-rotate-45 before:gp-border-t before:gp-border-[#A1A1A1] before:gp-bg-[#333]":i&&!a&&!b}),d=`gp-relative gp-flex gp-cursor-pointer gp-items-center gp-justify-center gp-text-center option-value-wrapper gp-overflow-hidden gp-w-full gp-h-full data-[disabled='disabled']:gp-pointer-events-none data-[disabled='disabled']:!gp-cursor-not-allowed
+         data-[hidden='false']:gp-flex`,c=`${d} ${s}`.trim();return p(c)},l=(r,t)=>{let l=e({"color gp-line-clamp-2 gp-flex gp-h-full gp-w-full gp-items-center gp-justify-center":t,"gp-flex gp-flex-col gp-justify-center gp-items-center gp-gap-[6px":r}),o=`option-value gp-overflow-hidden gp-relative ${l}`.trim();return p(o)},o=({optionTypo:t,optionTypography:l,isColorType:o,isUploadImageType:g})=>{let f=`${r(t,l)}`,i=e({"gp-text-center":!0,[f]:!0,"gp-overflow-hidden gp-text-ellipsis gp-px-1":o||g}),a=`${i}`.trim();return p(a)},g=({soldOutMarkLine:r,available:t})=>{let l=e({"before:gp-absolute before:gp-top-[50%] before:gp-block before:gp-w-full before:gp--rotate-45 before:gp-border":r&&!t}),o=`color gp-relative gp-h-full gp-w-full gp-overflow-hidden gp-min-w-fit gp-flex gp-color-circle ${l}`.trim();return p(o)};export{g as getColorClass,o as getTextClass,t as getWrapperClass,l as getWrapperTextClass};

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

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

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

@@ -1 +1 @@
-import{DEVICES as e,getResponsiveValueByScreen as r}from"@gem-sdk/core";import{useRef as t,useEffect as n}from"react";let getDeviceProperty=(e,r)=>`--${e}${"desktop"===r?"":`-${r}`}`,makeStyleGapForLabel=(t,n)=>{let o={};return e.forEach(e=>{let l=getDeviceProperty("mr",e),c=getDeviceProperty("mb",e),i=r(t,e);o="vertical"===i?{...o,[c]:n,[l]:"0px"}:{...o,[l]:n,[c]:"0px"}}),o};function isColorDark(e){if(!e)return;e=e.replace(/^#/,"");let r=parseInt(e.slice(0,2),16),t=parseInt(e.slice(2,4),16),n=parseInt(e.slice(4,6),16);return .2126*r+.7152*t+.0722*n<128}let useTransition=(e,r)=>{let o=t(null),l=t([]);n(()=>{o.current=e},[e]),n(()=>{null!==l.current&&o.current&&"function"==typeof o.current&&o.current(...l.current),l.current=r},r)};export{isColorDark,makeStyleGapForLabel,useTransition};
+import{DEVICES as r,getResponsiveValueByScreen as e}from"@gem-sdk/core";import{useRef as t,useEffect as n}from"react";let l=(r,e)=>`--${r}${"desktop"===e?"":`-${e}`}`,c=(t,n)=>{let c={};return r.forEach(r=>{let o=l("mr",r),u=l("mb",r),a=e(t,r);c="vertical"===a?{...c,[u]:n,[o]:"0px"}:{...c,[o]:n,[u]:"0px"}}),c};function o(r){if(!r)return;r=r.replace(/^#/,"");let e=parseInt(r.slice(0,2),16),t=parseInt(r.slice(2,4),16),n=parseInt(r.slice(4,6),16);return .2126*e+.7152*t+.0722*n<128}let u=(r,e)=>{let l=t(null),c=t([]);n(()=>{l.current=r},[r]),n(()=>{null!==c.current&&l.current&&"function"==typeof l.current&&l.current(...c.current),c.current=e},e)};export{o as isColorDark,c as makeStyleGapForLabel,u as useTransition};

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

@@ -1 +1 @@
-let OPTION_VALUES_DELIMITER="|||";export{OPTION_VALUES_DELIMITER};
+let E="|||";export{E as OPTION_VALUES_DELIMITER};

package/dist/esm/product/components/product-variants/common/dropdown/attrs.js

@@ -1 +1 @@
-let getSelectAttr=({variantGroup:e,optionName:o,value:t,type:n})=>"Liquid"===n?{"aria-label":"{{option.name | escape}}",autocomplete:"off",id:`${e?"p-variant-group-dropdown":"p-variant-dropdown-{{option.position}}"}`,name:"{%- if option -%}{{option.name | escape}}{% else %}Select Option{%- endif -%}","option-data":"{{option.name}}","option-type":"{{optionType}}","option-renderer":"{{optionRendered}}"}:{autoComplete:"off",name:o||"Select Option",value:t};export{getSelectAttr};
+let o=({variantGroup:o,optionName:e,value:t,type:n})=>"Liquid"===n?{"aria-label":"{{option.name | escape}}",autocomplete:"off",id:`${o?"p-variant-group-dropdown":"p-variant-dropdown-{{option.position}}"}`,name:"{%- if option -%}{{option.name | escape}}{% else %}Select Option{%- endif -%}","option-data":"{{option.name}}","option-type":"{{optionType}}","option-renderer":"{{optionRendered}}"}:{autoComplete:"off",name:e||"Select Option",value:t};export{o as getSelectAttr};

package/dist/esm/product/components/product-variants/common/dropdown/classes.js

@@ -1 +1 @@
-import{composeTypographyClassName as e,handleConvertClassColor as t,getGlobalColorStateClass as o,cls as p,composeClasses as g}from"@gem-sdk/core";let getSelectClass=({optionTypo:n,optionTypography:r,optionBgColor:l,optionTextColor:i,optionBorder:s})=>{let a=e(n,r),m=t(s),u=o("text",i),c=o("bg",l),d=p({...a&&{[a]:!0},...m&&{[m]:!0},...u&&{[u]:!0},...c&&{[c]:!0}}),b=`dropdown-option-item gp-truncate gp-bg-auto gp-pl-4 gp-pr-6 gp-outline-none gp-outline-none gp-shadow-none ${d}`.trim();return g(b)};export{getSelectClass};
+import{composeTypographyClassName as e,handleConvertClassColor as t,getGlobalColorStateClass as o,cls as p,composeClasses as n}from"@gem-sdk/core";let g=({optionTypo:g,optionTypography:r,optionBgColor:l,optionTextColor:i,optionBorder:m})=>{let u=e(g,r),a=t(m),d=o("text",i),s=o("bg",l),c=p({...u&&{[u]:!0},...a&&{[a]:!0},...d&&{[d]:!0},...s&&{[s]:!0}}),b=`dropdown-option-item gp-truncate gp-bg-auto gp-pl-4 gp-pr-6 gp-outline-none gp-outline-none gp-shadow-none ${c}`.trim();return n(b)};export{g as getSelectClass};

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

@@ -1 +1 @@
-import{composeTypographyStyle as e,makeStyleResponsive as t,makeStyle as o,getSingleColorVariable as a,getStyleShadow as r,makeWidth as c,getGlobalColorStateStyle as s,handleConvertBorderStyle as l,handleConvertBorderWidth as i,handleConvertBorderColor as d,composeRadius as p}from"@gem-sdk/core";import{filterTruthyObject as h}from"../../../../../helpers.js";let getSelectStyle=({width:n,height:b,optionTypo:g,optionTypography:m,optionBgColor:u,optionTextColor:v,optionRounded:w,optionHasShadow:S,optionShadow:x,optionBorder:y,optionTransform:f,isCombine:k,textAlign:A})=>{let E=e(g,m),F=A?t("ta",A):{},j=o({bg:a(u?.active),bs:y?.active?.border,bw:y?.active?.width,bc:y?.active?.color}),T=[k?"active":"normal","hover"].reduce((e,t)=>({...e,...r({value:x?.[t],state:t,styleAppliedFor:"box-shadow",isEnableShadow:S?.[t]})}),{});return h({...t("w",c(n)),...o({h:b}),...T,...j,...o({tt:f}),...E,...s("c",v),...s("bg",u),...l(y),...i(y),...d(y),...p(w),...r({value:g?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:g?.custom?.hasShadowText}),...F,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"})};export{getSelectStyle};
+import{composeTypographyStyle as e,makeStyleResponsive as t,makeStyle as o,getSingleColorVariable as a,getStyleShadow as r,composeRadius as s,handleConvertBorderColor as c,handleConvertBorderWidth as i,handleConvertBorderStyle as l,getGlobalColorStateStyle as d,makeWidth as p}from"@gem-sdk/core";import{filterTruthyObject as h}from"../../../../../helpers.js";let n=({width:n,height:b,optionTypo:g,optionTypography:m,optionBgColor:u,optionTextColor:v,optionRounded:w,optionHasShadow:x,optionShadow:S,optionBorder:f,optionTransform:k,isCombine:y,textAlign:A})=>{let E=e(g,m),F=A?t("ta",A):{},j=o({bg:a(u?.active),bs:f?.active?.border,bw:f?.active?.width,bc:f?.active?.color}),T=[y?"active":"normal","hover"].reduce((e,t)=>({...e,...r({value:S?.[t],state:t,styleAppliedFor:"box-shadow",isEnableShadow:x?.[t]})}),{});return h({...t("w",p(n)),...o({h:b}),...T,...j,...o({tt:k}),...E,...d("c",v),...d("bg",u),...l(f),...i(f),...c(f),...s(w),...r({value:g?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:g?.custom?.hasShadowText}),...F,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"})};export{n as getSelectStyle};

package/dist/esm/product/components/product-variants/common/main/classes.js

@@ -1 +1 @@
-import{getAlignmentClasses as t}from"@gem-sdk/core";import{getAlignClasses as o}from"../../../../helpers/function.js";let getWrapDropdownClass=t=>{let r={desktop:"horizontal",mobile:"horizontal",tablet:"horizontal"},e=o(r,t);return{"gp-flex":!0,...e}},getVariantOptionGroupClass=o=>{let r=t(o);return{"variant-option-group gp-flex gp-w-full gp-flex-wrap gp-items-center ":!0,...r}};export{getVariantOptionGroupClass,getWrapDropdownClass};
+import{getAlignmentClasses as t}from"@gem-sdk/core";import{getAlignClasses as o}from"../../../../helpers/function.js";let r=t=>{let r=o({desktop:"horizontal",mobile:"horizontal",tablet:"horizontal"},t);return{"gp-flex":!0,...r}},e=o=>{let r=t(o);return{"variant-option-group gp-flex gp-w-full gp-flex-wrap gp-items-center ":!0,...r}};export{e as getVariantOptionGroupClass,r as getWrapDropdownClass};

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

@@ -1 +1 @@
-let VAR_WIDTH_BY_DEVICE={desktop:"--w",tablet:"--w-tablet",mobile:"--w-mobile"},HORIZONTAL_WIDTH="120px",DEFAULT_WIDTH_LABEL="fit-content";export{DEFAULT_WIDTH_LABEL,HORIZONTAL_WIDTH,VAR_WIDTH_BY_DEVICE};
+let t={desktop:"--w",tablet:"--w-tablet",mobile:"--w-mobile"},e="120px",_="fit-content";export{_ as DEFAULT_WIDTH_LABEL,e as HORIZONTAL_WIDTH,t as VAR_WIDTH_BY_DEVICE};

package/dist/esm/product/components/product-variants/common/main/getAttr.js

@@ -1 +1 @@
-let getAttrs=({uid:t,hasPreSelected:e,cssClass:s})=>({"data-id":t||"","has-pre-selected":e?"true":"false",class:s||""});export{getAttrs};
+let e=({uid:e,hasPreSelected:t,cssClass:s})=>({"data-id":e||"","has-pre-selected":t?"true":"false",class:s||""});export{e as getAttrs};

package/dist/esm/product/components/product-variants/common/main/getData.js

@@ -1 +1 @@
-import{composeTypographyClassName as t,cls as e,DEVICES as r,getResponsiveValueByScreen as a}from"@gem-sdk/core";import{mappingVariantStyles as o}from"../../utils/mappingVariantStyles.js";import{makeStyleGapForLabel as l}from"../common.js";import{VAR_WIDTH_BY_DEVICE as i,HORIZONTAL_WIDTH as n,DEFAULT_WIDTH_LABEL as s}from"./const.js";let getDropdownGroupData=t=>{let{styles:e,setting:a}=t,{dropdownItemWidth:l}=e??{},i=o(a?.variantPresets,e),n={...a,variantPresets:i},s=()=>{let t={};return r.forEach(e=>{t[e]=l?.[e]==="fill"}),t};return{...e,...n,swatchAutoWidth:s()}},getTextVariantTitleData=(o,p,m)=>{let{styles:d,setting:g}=o,{layout:u}=g??{},{labelGap:c}=d??{},{optionName:h,hasPreSelected:y,isChangeVariant:T,selectedOptions:f,styleOptionSelected:x}=m??{},D=t(d?.labelTypo,d?.labelTypography),w=t=>{let e=Object.fromEntries(r.map(e=>[i[e],"horizontal"===a(t,e)?n:s]));return e},b=()=>"Liquid"===p?"{{option.name}}":`${h}${(!1!=y||T)&&"dropdown"!==x?`: ${f?.[h]}`:""}`;return{className:e(D,"Liquid"===p?"{{showVariantClass}}":""),styles:{typo:d?.labelTypo},style:{...l(u,c)},setting:{htmlTag:"legend",text:b(),tagWidth:w(u),excludeFlex:!0}}};export{getDropdownGroupData,getTextVariantTitleData};
+import{DEVICES as t,composeTypographyClassName as e,cls as r,getResponsiveValueByScreen as o}from"@gem-sdk/core";import{mappingVariantStyles as a}from"../../utils/mappingVariantStyles.js";import{makeStyleGapForLabel as l}from"../common.js";import{VAR_WIDTH_BY_DEVICE as i,HORIZONTAL_WIDTH as s,DEFAULT_WIDTH_LABEL as n}from"./const.js";let m=e=>{let{styles:r,setting:o}=e,{dropdownItemWidth:l}=r??{},i=a(o?.variantPresets,r),s={...o,variantPresets:i};return{...r,...s,swatchAutoWidth:(()=>{let e={};return t.forEach(t=>{e[t]=l?.[t]==="fill"}),e})()}},p=(a,m,p)=>{let{styles:d,setting:u}=a,{layout:g}=u??{},{labelGap:c}=d??{},{optionName:h,hasPreSelected:y,isChangeVariant:f,selectedOptions:T,styleOptionSelected:x}=p??{},b=e(d?.labelTypo,d?.labelTypography);return{className:r(b,"Liquid"===m?"{{showVariantClass}}":""),styles:{typo:d?.labelTypo},style:{...l(g,c)},setting:{htmlTag:"legend",text:"Liquid"===m?"{{option.name}}":`${h}${(!1!=y||f)&&"dropdown"!==x?`: ${T?.[h]}`:""}`,tagWidth:(e=>{let r=Object.fromEntries(t.map(t=>[i[t],"horizontal"===o(e,t)?s:n]));return r})(g),excludeFlex:!0}}};export{m as getDropdownGroupData,p as getTextVariantTitleData};

package/dist/esm/product/components/product-variants/common/main/styles.js

@@ -1 +1 @@
-import{makeStyleResponsive as t,makeWidth as e,optionLayoutStyle as r,makeStyle as p}from"@gem-sdk/core";import{filterTruthyObject as o}from"../../../../../helpers.js";let getWrapperStyle=p=>{let{style:a,styles:g,setting:l}=p,{width:i,align:m}=g??{},{column:n}=l??{},y=t("w",e(i));return o({...r(n),...t("ta",m),...y,...a})},getVariantOptionGroupStyle=(t,e)=>o({...p({rg:t,cg:e})});export{getVariantOptionGroupStyle,getWrapperStyle};
+import{makeStyleResponsive as r,makeWidth as e,optionLayoutStyle as t,makeStyle as o}from"@gem-sdk/core";import{filterTruthyObject as p}from"../../../../../helpers.js";let g=o=>{let{style:g,styles:l,setting:m}=o,{width:a,align:i}=l??{},{column:n}=m??{},s=r("w",e(a));return p({...t(n),...r("ta",i),...s,...g})},l=(r,e)=>p({...o({rg:r,cg:e})});export{l as getVariantOptionGroupStyle,g as getWrapperStyle};

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

@@ -1 +1 @@
-let getVariantOptionAttr=(t,e)=>{let{optionName:a,optionValue:n}=t;return"Liquid"===e?{"option-name":"{{option.name | escape}}","option-name-value":"{{value | escape}}","data-gp-option-value-id":"{{value.id}}"}:{"option-name":a,"option-name-value":n}};export{getVariantOptionAttr};
+let e=(e,a)=>{let{optionName:t,optionValue:n}=e;return"Liquid"===a?{"option-name":"{{option.name | escape}}","option-name-value":"{{value | escape}}","data-gp-option-value-id":"{{value.id}}"}:{"option-name":t,"option-name-value":n}};export{e as getVariantOptionAttr};

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

@@ -1 +1 @@
-import{getLayoutClasses as t}from"@gem-sdk/core";import{getAlignClasses as p}from"../../../../helpers/function.js";let getVariantItemLabelClass=t=>{let{available:p}=t,e="disable"===t.soldOutStyle;return{[`option-item gp-group gp-relative !gp-block gp-child-item-${t.uid}`]:!0,"gp-pointer-events-none gp-opacity-20":e&&!p}},getTooltipClass=()=>({"gp-hidden !gp-max-w-[150px] gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-absolute gp-bottom-[calc(100%+20px)] gp-text-[12px] group-hover:gp-block gp-w-max gp-bg-[#333333] gp-text-[#F9F9F9] gp-px-[8px] gp-py-[4px] gp-rounded-[8px] gp-mb-[-10px] after:gp-content-[''] after:gp-absolute after:gp-p-[7px] after:gp-left-0 after:gp-w-full after:gp-bottom-[-10px]":!0}),getTooltipSvgClass=()=>({"gp-absolute gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-z-10 gp-bottom-[-4px]":!0}),getVariantOptionClass=()=>({"option-item-inner gp-w-auto gp-h-auto":!0}),getWrapVariantOptionClass=(e,a)=>{let g=t(e),o=p(e,a);return{"gp-flex variant-inside":!0,...g,...o}};export{getTooltipClass,getTooltipSvgClass,getVariantItemLabelClass,getVariantOptionClass,getWrapVariantOptionClass};
+import{getLayoutClasses as t}from"@gem-sdk/core";import{getAlignClasses as p}from"../../../../helpers/function.js";let e=t=>{let{available:p}=t,e="disable"===t.soldOutStyle;return{[`option-item gp-group gp-relative !gp-block gp-child-item-${t.uid}`]:!0,"gp-pointer-events-none gp-opacity-20":e&&!p}},g=()=>({"gp-hidden !gp-max-w-[150px] gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-absolute gp-bottom-[calc(100%+20px)] gp-text-[12px] group-hover:gp-block gp-w-max gp-bg-[#333333] gp-text-[#F9F9F9] gp-px-[8px] gp-py-[4px] gp-rounded-[8px] gp-mb-[-10px] after:gp-content-[''] after:gp-absolute after:gp-p-[7px] after:gp-left-0 after:gp-w-full after:gp-bottom-[-10px]":!0}),a=()=>({"gp-absolute gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-z-10 gp-bottom-[-4px]":!0}),o=()=>({"option-item-inner gp-w-auto gp-h-auto":!0}),l=(e,g)=>{let a=t(e),o=p(e,g);return{"gp-flex variant-inside":!0,...a,...o}};export{g as getTooltipClass,a as getTooltipSvgClass,e as getVariantItemLabelClass,o as getVariantOptionClass,l as getWrapVariantOptionClass};

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

@@ -1 +1 @@
-import{makeStyleResponsive as t,makeWidth as e}from"@gem-sdk/core";import{filterTruthyObject as r}from"../../../../../helpers.js";let getLabelVariantStyle=o=>o?r(t("w",e(o))):{},getMarginBottomStyle=(e,o)=>!e||o?{}:r(t("mb",e));export{getLabelVariantStyle,getMarginBottomStyle};
+import{makeStyleResponsive as e,makeWidth as t}from"@gem-sdk/core";import{filterTruthyObject as r}from"../../../../../helpers.js";let o=o=>o?r(e("w",t(o))):{},m=(t,o)=>!t||o?{}:r(e("mb",t));export{o as getLabelVariantStyle,m as getMarginBottomStyle};

package/dist/esm/product/components/product-variants/components/base/base.js

@@ -1,11 +1,11 @@
 'use client';
-import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import{useMemo as o,Fragment as l}from"react";import{isColorDark as a}from"../../common/common.js";import{createClass as i,createStyle as s,createAttr as c,If as m}from"@gem-sdk/system";import{getColorClass as n,getWrapperTextClass as f,getTextClass as d,getWrapperClass as h}from"../../common/base/classes.js";import{getWrapperAttr as p}from"../../common/base/attrs.js";import{getWrapperTextStyle as g,getTextStyle as C,getWrapperStyleActive as u,getWrapperStyleNormalAndHover as y,getColorStyle as v}from"../../common/base/styles.js";let BaseVariant=b=>{let{value:w,checked:x,optionTypography:j,optionTypo:D,swatchesImage:$,swatchesColor:B,preset:L,typeOfOption:N,available:A,variantKey:F,soldOutMarkLine:k}=b,V=o(()=>"color"===N,[N]),_=L?.optionBgColor,M=L?.optionBorder,R=L?.optionRounded,W=o(()=>"image"===N||"image_shopify"===N,[N]),Z=o(()=>x?a(_?.active)?"#fff":"#121212":a(_?.normal)?"#fff":"#121212",[_?.active,_?.normal,x]),q=e=>a(e)?"#fff":"#121212",z=()=>m(k,r("style",{children:`
+import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import{useMemo as o,Fragment as l}from"react";import{isColorDark as a}from"../../common/common.js";import{createClass as i,createStyle as s,createAttr as c,If as m}from"@gem-sdk/system";import{getColorClass as n,getWrapperTextClass as f,getTextClass as d,getWrapperClass as h}from"../../common/base/classes.js";import{getWrapperAttr as p}from"../../common/base/attrs.js";import{getWrapperTextStyle as g,getTextStyle as C,getWrapperStyleActive as u,getWrapperStyleNormalAndHover as y,getColorStyle as v}from"../../common/base/styles.js";let b=b=>{let{value:w,checked:x,optionTypography:j,optionTypo:D,swatchesImage:$,swatchesColor:L,preset:N,typeOfOption:B,available:A,variantKey:F,soldOutMarkLine:k}=b,_=o(()=>"color"===B,[B]),M=N?.optionBgColor,R=N?.optionBorder,V=N?.optionRounded,W=o(()=>"image"===B||"image_shopify"===B,[B]),Z=o(()=>x?a(M?.active)?"#fff":"#121212":a(M?.normal)?"#fff":"#121212",[M?.active,M?.normal,x]),q=e=>a(e)?"#fff":"#121212",z=()=>m(k,r("style",{children:`
         .${F}:before {
-          width: ${V&&B?.length?`calc(${L?.height} - 12px) !important`:"200px !important"};
-          border-color: ${V?"#121212":Z};
+          width: ${_&&L?.length?`calc(${N?.height} - 12px) !important`:"200px !important"};
+          border-color: ${_?"#121212":Z};
         }
-        `})," "),E=i(n({soldOutMarkLine:k,available:A})),G=()=>r(t,{children:B?.map(t=>{let o=t,a=t.startsWith("linear-gradient");a&&(o=t.match(/#(([\da-fA-F]{2}){3,4}|([\da-fA-F]){3,4})/g)?.[0]);let i=s(v({optionRounded:R,optionBorder:M,isActive:x,color:t}));return e(l,{children:[r("style",{children:`
+        `})," "),E=i(n({soldOutMarkLine:k,available:A})),G=()=>r(t,{children:L?.map(t=>{let o=t,a=t.startsWith("linear-gradient");a&&(o=t.match(/#(([\da-fA-F]{2}){3,4}|([\da-fA-F]){3,4})/g)?.[0]);let i=s(v({optionRounded:V,optionBorder:R,isActive:x,color:t}));return e(l,{children:[r("style",{children:`
                 .${F} .color:before {
                   border-color: ${q(o)} !important;
                 }
-                `}),r("div",{className:E,style:i},t)]},t)})}),H=i(f(W,V)),I=s(g(b)),J=i(d({optionTypo:D,optionTypography:j,isColorType:V,isUploadImageType:W})),K=s(C({optionTypo:D,optionTypography:j})),O=()=>r(t,{children:e("div",{className:H,style:I,children:[z(),m(W,e("svg",{width:"15",height:"12",viewBox:"0 0 15 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[r("circle",{cx:"2",cy:"2",r:"2",fill:"#D6D6D6"}),r("path",{d:"M0.196854 10.6453L2.40968 8.05946C2.4846 7.97175 2.57719 7.9008 2.68141 7.85124C2.78562 7.80168 2.89913 7.77461 3.01452 7.77181C3.12991 7.76902 3.2446 7.79055 3.3511 7.835C3.45761 7.87945 3.55353 7.94583 3.63262 8.02981L4.66733 9.12714L8.71205 4.29464C8.79123 4.19995 8.89077 4.1243 9.00325 4.07333C9.11573 4.02236 9.23827 3.99737 9.36176 4.00022C9.48524 4.00307 9.6065 4.03369 9.71651 4.08979C9.82651 4.1459 9.92245 4.22605 9.99717 4.32429L14.8329 10.6772C14.9254 10.7989 14.982 10.9441 14.9964 11.0962C15.0107 11.2484 14.9823 11.4016 14.9144 11.5385C14.8464 11.6754 14.7415 11.7907 14.6115 11.8713C14.4815 11.952 14.3316 11.9948 14.1786 11.995L0.822048 12C0.664945 11.9999 0.511148 11.9549 0.378853 11.8703C0.246557 11.7857 0.141299 11.6649 0.0755311 11.5224C0.00976323 11.3799 -0.013762 11.2216 0.00773837 11.0661C0.0292388 10.9107 0.0948652 10.7646 0.196854 10.6453Z",fill:"#D6D6D6"})]})),r("span",{className:J,style:K,children:w?.label})]})}),P=()=>r("img",{className:"gp-h-full gp-w-full gp-object-cover",src:$,alt:""}),Q=()=>{switch(N){case"color":return m(B&&B.length>0,G(),O());case"image":case"image_shopify":return m(!!$,P(),O());default:return O()}},S=i(h(b)),T=c(p(b)),U=s(u(b)),X=s(y(b)),Y=x?U:X;return e("div",{...T,className:S,style:Y,children:[z(),Q()]})};export{BaseVariant as default};
+                `}),r("div",{className:E,style:i},t)]},t)})}),H=i(f(W,_)),I=s(g(b)),J=i(d({optionTypo:D,optionTypography:j,isColorType:_,isUploadImageType:W})),K=s(C({optionTypo:D,optionTypography:j})),O=()=>r(t,{children:e("div",{className:H,style:I,children:[z(),m(W,e("svg",{width:"15",height:"12",viewBox:"0 0 15 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[r("circle",{cx:"2",cy:"2",r:"2",fill:"#D6D6D6"}),r("path",{d:"M0.196854 10.6453L2.40968 8.05946C2.4846 7.97175 2.57719 7.9008 2.68141 7.85124C2.78562 7.80168 2.89913 7.77461 3.01452 7.77181C3.12991 7.76902 3.2446 7.79055 3.3511 7.835C3.45761 7.87945 3.55353 7.94583 3.63262 8.02981L4.66733 9.12714L8.71205 4.29464C8.79123 4.19995 8.89077 4.1243 9.00325 4.07333C9.11573 4.02236 9.23827 3.99737 9.36176 4.00022C9.48524 4.00307 9.6065 4.03369 9.71651 4.08979C9.82651 4.1459 9.92245 4.22605 9.99717 4.32429L14.8329 10.6772C14.9254 10.7989 14.982 10.9441 14.9964 11.0962C15.0107 11.2484 14.9823 11.4016 14.9144 11.5385C14.8464 11.6754 14.7415 11.7907 14.6115 11.8713C14.4815 11.952 14.3316 11.9948 14.1786 11.995L0.822048 12C0.664945 11.9999 0.511148 11.9549 0.378853 11.8703C0.246557 11.7857 0.141299 11.6649 0.0755311 11.5224C0.00976323 11.3799 -0.013762 11.2216 0.00773837 11.0661C0.0292388 10.9107 0.0948652 10.7646 0.196854 10.6453Z",fill:"#D6D6D6"})]})),r("span",{className:J,style:K,children:w?.label})]})}),P=()=>r("img",{className:"gp-h-full gp-w-full gp-object-cover",src:$,alt:""}),Q=i(h(b)),S=c(p(b)),T=s(u(b)),U=s(y(b)),X=x?T:U;return e("div",{...S,className:Q,style:X,children:[z(),(()=>{switch(B){case"color":return m(L&&L.length>0,G(),O());case"image":case"image_shopify":return m(!!$,P(),O());default:return O()}})()]})};export{b as default};

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

@@ -1,25 +1,25 @@
-import{template as e}from"@gem-sdk/core";import{getStyleOfObject as s}from"../../../../helpers/function.js";import{getColorClass as a,getWrapperTextClass as o,getTextClass as l,getWrapperClass as r}from"../../common/base/classes.js";import{createClass as i,createStyle as t,createAttr as c,LiquidIf as n,LiquidFor as m,Liquid as d,If as g}from"@gem-sdk/system";import{getWrapperAttr as p}from"../../common/base/attrs.js";import{getColorStyle as u,getWrapperTextStyle as v,getTextStyle as $,getWrapperStyleActive as C,getWrapperStyleNormalAndHover as f}from"../../common/base/styles.js";let BaseVariant=y=>{let{optionTypography:h,optionBorder:b,optionRounded:k,optionTypo:w,typeOfOption:x}=y,D="color"===x,L="image"===x||"image_shopify"===x,j=i(a({})),T=()=>e`
-      ${m("color in colors",`
-          ${d('{% assign backgroundType = "background-color" %}')}
-          ${n('color contains "linear-gradient"',d('{% assign backgroundType = "background-image" %}'))}
+import{template as e}from"@gem-sdk/core";import{getStyleOfObject as s}from"../../../../helpers/function.js";import{getColorClass as o,getWrapperTextClass as a,getTextClass as l,getWrapperClass as r}from"../../common/base/classes.js";import{createClass as i,createStyle as t,createAttr as c,LiquidIf as n,If as m,LiquidFor as d,Liquid as g}from"@gem-sdk/system";import{getWrapperAttr as p}from"../../common/base/attrs.js";import{getColorStyle as u,getWrapperTextStyle as v,getTextStyle as $,getWrapperStyleActive as C,getWrapperStyleNormalAndHover as f}from"../../common/base/styles.js";let y=y=>{let{optionTypography:h,optionBorder:b,optionRounded:k,optionTypo:w,typeOfOption:x}=y,D="color"===x,L="image"===x||"image_shopify"===x,j=i(o({})),T=()=>e`
+      ${d("color in colors",`
+          ${g('{% assign backgroundType = "background-color" %}')}
+          ${n('color contains "linear-gradient"',g('{% assign backgroundType = "background-image" %}'))}
           <div
             class="${j}"
             data-test="{{ backgroundType }}: {{ color }}"
-            style="{{ backgroundType }}: {{ color }}; ${U()}"></div>
+            style="{{ backgroundType }}: {{ color }}; ${A()}"></div>
         `)}
-      `,V=t(u({optionBorder:b,optionRounded:k,isActive:!0})),B=t(u({optionBorder:b,optionRounded:k,isActive:!1})),U=()=>n("selectedValue == value",s(V),s(B)),A=i(o(L,D)),_=t({...v(y)}),q=i(l({optionTypo:w,optionTypography:h,isColorType:D,isUploadImageType:L})),z=t($({optionTypo:w,optionTypography:h})),M=()=>e`
+      `,U=t(u({optionBorder:b,optionRounded:k,isActive:!0})),V=t(u({optionBorder:b,optionRounded:k,isActive:!1})),A=()=>n("selectedValue == value",s(U),s(V)),B=i(a(L,D)),_=t({...v(y)}),q=i(l({optionTypo:w,optionTypography:h,isColorType:D,isUploadImageType:L})),z=t($({optionTypo:w,optionTypography:h})),M=()=>e`
       <div
-        class="${A}"
-        style="${D?U():""} ${s(_)}">
-        ${g(L,'<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="#D6D6D6"></circle><path d="M0.196854 10.6453L2.40968 8.05946C2.4846 7.97175 2.57719 7.9008 2.68141 7.85124C2.78562 7.80168 2.89913 7.77461 3.01452 7.77181C3.12991 7.76902 3.2446 7.79055 3.3511 7.835C3.45761 7.87945 3.55353 7.94583 3.63262 8.02981L4.66733 9.12714L8.71205 4.29464C8.79123 4.19995 8.89077 4.1243 9.00325 4.07333C9.11573 4.02236 9.23827 3.99737 9.36176 4.00022C9.48524 4.00307 9.6065 4.03369 9.71651 4.08979C9.82651 4.1459 9.92245 4.22605 9.99717 4.32429L14.8329 10.6772C14.9254 10.7989 14.982 10.9441 14.9964 11.0962C15.0107 11.2484 14.9823 11.4016 14.9144 11.5385C14.8464 11.6754 14.7415 11.7907 14.6115 11.8713C14.4815 11.952 14.3316 11.9948 14.1786 11.995L0.822048 12C0.664945 11.9999 0.511148 11.9549 0.378853 11.8703C0.246557 11.7857 0.141299 11.6649 0.0755311 11.5224C0.00976323 11.3799 -0.013762 11.2216 0.00773837 11.0661C0.0292388 10.9107 0.0948652 10.7646 0.196854 10.6453Z" fill="#D6D6D6"></path></svg>'," ")}
+        class="${B}"
+        style="${D?A():""} ${s(_)}">
+        ${m(L,'<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="#D6D6D6"></circle><path d="M0.196854 10.6453L2.40968 8.05946C2.4846 7.97175 2.57719 7.9008 2.68141 7.85124C2.78562 7.80168 2.89913 7.77461 3.01452 7.77181C3.12991 7.76902 3.2446 7.79055 3.3511 7.835C3.45761 7.87945 3.55353 7.94583 3.63262 8.02981L4.66733 9.12714L8.71205 4.29464C8.79123 4.19995 8.89077 4.1243 9.00325 4.07333C9.11573 4.02236 9.23827 3.99737 9.36176 4.00022C9.48524 4.00307 9.6065 4.03369 9.71651 4.08979C9.82651 4.1459 9.92245 4.22605 9.99717 4.32429L14.8329 10.6772C14.9254 10.7989 14.982 10.9441 14.9964 11.0962C15.0107 11.2484 14.9823 11.4016 14.9144 11.5385C14.8464 11.6754 14.7415 11.7907 14.6115 11.8713C14.4815 11.952 14.3316 11.9948 14.1786 11.995L0.822048 12C0.664945 11.9999 0.511148 11.9549 0.378853 11.8703C0.246557 11.7857 0.141299 11.6649 0.0755311 11.5224C0.00976323 11.3799 -0.013762 11.2216 0.00773837 11.0661C0.0292388 10.9107 0.0948652 10.7646 0.196854 10.6453Z" fill="#D6D6D6"></path></svg>'," ")}
         <span class="${q}" style="${z}">{{value}}</span>
       </div>
     `,Z=()=>e`
       <img class="gp-object-cover gp-rounded-none" style="width: 64px; height: 64px" src="{{imageUrl}}" alt="" />
-    `,E=()=>{switch(x){case"color":return e`${n("colors != null and colors.size > 0",T(),M())}`;case"image":case"image_shopify":return e`${n('imageUrl != null and imageUrl != ""',Z(),M())}`;default:return M()}},F=i(r({...y,available:!0})),G=c(p(y,"Liquid")),H=t(C(y)),I=t(f(y));return e`
+    `,E=i(r({...y,available:!0})),F=c(p(y,"Liquid")),G=t(C(y)),H=t(f(y));return e`
     <div
-      ${G}
-      class="${F}"
-      style="${n("selectedValue == value",s({...H,...V}),s({...I,...B}))}">
-      ${E()}
-    </div>`};export{BaseVariant as default};
+      ${F}
+      class="${E}"
+      style="${n("selectedValue == value",s({...G,...U}),s({...H,...V}))}">
+      ${(()=>{switch(x){case"color":return e`${n("colors != null and colors.size > 0",T(),M())}`;case"image":case"image_shopify":return e`${n('imageUrl != null and imageUrl != ""',Z(),M())}`;default:return M()}})()}
+    </div>`};export{y as default};

package/dist/esm/product/components/product-variants/components/color/color.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as r}from"react/jsx-runtime";import t from"../base/base.js";import{useMemo as a}from"react";let ImageVariant=({swatchValue:e,isVariantOutStock:o,...s})=>{let m=a(()=>e?.colors?.length?e?.colors:[],[e]);return r(t,{...s,swatchesColor:m,isVariantOutStock:o})};export{ImageVariant as default};
+import{jsx as r}from"react/jsx-runtime";import t from"../base/base.js";import{useMemo as o}from"react";let e=({swatchValue:e,isVariantOutStock:a,...s})=>{let m=o(()=>e?.colors?.length?e?.colors:[],[e]);return r(t,{...s,swatchesColor:m,isVariantOutStock:a})};export{e as default};

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

@@ -1,4 +1,4 @@
-import{template as o}from"@gem-sdk/core";import r from"../base/base.liquid.js";import{optionRoundedColorDefault as l}from"../../utils/mappingVariantStyles.js";import{OPTION_VALUES_DELIMITER as i}from"../../common/const.js";let ColorVariant=({isVariantOutStock:s,swatchValue:n,...t})=>o`
+import{template as o}from"@gem-sdk/core";import l from"../base/base.liquid.js";import{optionRoundedColorDefault as r}from"../../utils/mappingVariantStyles.js";import{OPTION_VALUES_DELIMITER as i}from"../../common/const.js";let s=({isVariantOutStock:s,swatchValue:n,...t})=>o`
     {% assign colorsString = null %}
     {% assign colors = null %}
     {% for label in labels %}
@@ -9,5 +9,5 @@ import{template as o}from"@gem-sdk/core";import r from"../base/base.liquid.js";i
     {% if colorsString != null %}
       {% assign colors = colorsString | split: '${i}' %}
     {% endif %}
-    ${r({...t,typeOfOption:"color",optionRounded:l})}
-  `;export{ColorVariant as default};
+    ${l({...t,typeOfOption:"color",optionRounded:r})}
+  `;export{s as default};

package/dist/esm/product/components/product-variants/components/dropdown-group/DropdownGroup.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as r}from"react/jsx-runtime";import{useVariants as e,useSelectedOption as t}from"@gem-sdk/core";import o from"../dropdown-swatches/Dropdown.js";import{useMemo as n}from"react";let DropdownGroup=({...a})=>{let i=e(),{selectedOptions:p}=t(),d=n(()=>{let r=Object.keys(p||{}),e=i.find(e=>{let t=0;return r.forEach(r=>{let o=e?.selectedOptions.find(e=>e.name===r);o?.value===p?.[r]&&t++}),t===r.length});return e},[i,p]);return r(o,{variants:i,initValue:d?.id,variantGroup:!0,...a})};export{DropdownGroup as default};
+import{jsx as r}from"react/jsx-runtime";import{useVariants as e,useSelectedOption as t}from"@gem-sdk/core";import o from"../dropdown-swatches/Dropdown.js";import{useMemo as n}from"react";let a=({...a})=>{let i=e(),{selectedOptions:m}=t(),p=n(()=>{let r=Object.keys(m||{}),e=i.find(e=>{let t=0;return r.forEach(r=>{let o=e?.selectedOptions.find(e=>e.name===r);o?.value===m?.[r]&&t++}),t===r.length});return e},[i,m]);return r(o,{variants:i,initValue:p?.id,variantGroup:!0,...a})};export{a as default};

package/dist/esm/product/components/product-variants/components/dropdown-group/DropdownGroup.liquid.js

@@ -1 +1 @@
-import{renderCombineVariants as r}from"../dropdown-option/render-liquid/index.js";import o from"../dropdown-swatches/Dropdown.liquid.js";let DropdownGroupVariant=d=>{let{price:i,hasPreSelected:n,soldOutStyle:p}=d,e="disable"===p;return o({...d,variantGroup:!0,children:r(e,n,i)})};export{DropdownGroupVariant as default};
+import{renderCombineVariants as r}from"../dropdown-option/render-liquid/index.js";import o from"../dropdown-swatches/Dropdown.liquid.js";let d=d=>{let{price:i,hasPreSelected:e,soldOutStyle:n}=d;return o({...d,variantGroup:!0,children:r("disable"===n,e,i)})};export{d as default};

package/dist/esm/product/components/product-variants/components/dropdown-option/DropdownOption.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as o}from"react/jsx-runtime";import{useVariantOutStock as r}from"@gem-sdk/core";import"react";let DropdownVariantOption=({optionPosition:t,optionNumber:e,value:i,optionName:a,isSoldOutMark:l})=>{let n=r(a??"",i?.label??"",{position:t||0,optionNumber:e||0});return o("option",{disabled:!n&&l,value:i?.label,children:i?.label},i?.id)};export{DropdownVariantOption as default};
+import{jsx as e}from"react/jsx-runtime";import{useVariantOutStock as o}from"@gem-sdk/core";import"react";let r=({optionPosition:r,optionNumber:t,value:i,optionName:l,isSoldOutMark:a})=>{let n=o(l??"",i?.label??"",{position:r||0,optionNumber:t||0});return e("option",{disabled:!n&&a,value:i?.label,children:i?.label},i?.id)};export{r as default};

package/dist/esm/product/components/product-variants/components/dropdown-option/VariantOption.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as t}from"react/jsx-runtime";import{useFormatMoney as e}from"@gem-sdk/core";import"react";let VariantOption=({variant:r,value:a,includePrice:o,disabled:i})=>{let n=e(parseFloat(`${r?.price}`),!1);return t("option",{disabled:i,value:a,dangerouslySetInnerHTML:{__html:`${r?.title}${o?` - ${n}`:""} `}})};export{VariantOption as default};
+import{jsx as t}from"react/jsx-runtime";import{useFormatMoney as e}from"@gem-sdk/core";import"react";let r=({variant:r,value:o,includePrice:a,disabled:i})=>{let l=e(parseFloat(`${r?.price}`),!1);return t("option",{disabled:i,value:o,dangerouslySetInnerHTML:{__html:`${r?.title}${a?` - ${l}`:""} `}})};export{r as default};

package/dist/esm/product/components/product-variants/components/dropdown-option/render-liquid/index.js

@@ -1,19 +1,19 @@
-import{If as e,LiquidIf as i,LiquidFor as t,Liquid as o}from"@gem-sdk/system";import{getStaticLocale as a}from"../../../../../../helpers.js";let renderCombineVariants=(t,o,a)=>{let n=a?"- {{variantItem.price | money}}":"",p='origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}"',r=`{{variantItem.title}} ${n}`;return`{%- for variantItem in variants -%}
-    ${e(t,i("variantItem.available == false",i("variantItem.id == variant.id",`<option origin-price="{{variantItem.price}}" disabled ${o?"selected":""} value="{{variantItem.id}}" key="{{variantItem.id}}">            
-            ${r}
-          </option>`,`<option ${p} disabled>
-            ${r}
-          </option>`),i("variantItem.id == variant.id",`<option origin-price="{{variantItem.price}}" ${o?"selected":""} value="{{variantItem.id}}" key="{{variantItem.id}}">
-            ${r}
-          </option>`,`<option ${p}>
-            ${r}
-          </option>`)),i("variantItem.id == variant.id",`<option origin-price="{{variantItem.price}}" ${o?"selected":""} value="{{variantItem.id}}" key="{{variantItem.id}}">
-          ${r}
-        </option>`,`<option ${p}>
-          ${r}
+import{If as i,LiquidIf as e,LiquidFor as a,Liquid as t}from"@gem-sdk/system";import{getStaticLocale as o}from"../../../../../../helpers.js";let n=(a,t,o)=>{let n='origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}"',p=`{{variantItem.title}} ${o?"- {{variantItem.price | money}}":""}`;return`{%- for variantItem in variants -%}
+    ${i(a,e("variantItem.available == false",e("variantItem.id == variant.id",`<option origin-price="{{variantItem.price}}" disabled ${t?"selected":""} value="{{variantItem.id}}" key="{{variantItem.id}}">            
+            ${p}
+          </option>`,`<option ${n} disabled>
+            ${p}
+          </option>`),e("variantItem.id == variant.id",`<option origin-price="{{variantItem.price}}" ${t?"selected":""} value="{{variantItem.id}}" key="{{variantItem.id}}">
+            ${p}
+          </option>`,`<option ${n}>
+            ${p}
+          </option>`)),e("variantItem.id == variant.id",`<option origin-price="{{variantItem.price}}" ${t?"selected":""} value="{{variantItem.id}}" key="{{variantItem.id}}">
+          ${p}
+        </option>`,`<option ${n}>
+          ${p}
         </option>`))}     
     {%- endfor -%}
-  `},composeSelectOptionAttrs=`
+  `},p=`
   option-data="{{option.name | escape}}"
   option-value="{{value | escape}}"
   data-gp-option-value-id="{{value.id}}"
@@ -21,7 +21,7 @@ import{If as e,LiquidIf as i,LiquidFor as t,Liquid as o}from"@gem-sdk/system";im
   value="{{value | escape}}"
   class="option-value-wrapper"
   key="{{value | escape}}"
-`,renderDropdownOptions=(a,n)=>t("value in values",`${o(`{%- liquid
+`,l=(o,n)=>a("value in values",`${t(`{%- liquid
       assign option_disabled = true
       for variantItem in product.variants
         case option.position
@@ -40,4 +40,4 @@ import{If as e,LiquidIf as i,LiquidFor as t,Liquid as o}from"@gem-sdk/system";im
         endcase
       endfor
     -%}`)}
-    ${e(a,i("option_disabled == true",i("value == selectedValue",`<option disabled ${n?"selected":""} option-position="{{option.position}}"${composeSelectOptionAttrs}>{{value}}</option>`,`<option disabled ${composeSelectOptionAttrs}>{{value}}</option>`),i("value == selectedValue",`<option ${n?"selected":""} option-position="{{option.position}}" ${composeSelectOptionAttrs}>{{value}}</option>`,`<option ${composeSelectOptionAttrs} option-position="{{option.position}}">{{value}}</option>`)),i("value == selectedValue",`<option ${n?"selected":""} ${composeSelectOptionAttrs} option-position="{{option.position}}">{{value}}</option>`,`<option ${composeSelectOptionAttrs} option-position="{{option.position}}">{{value}}</option>`))}`),renderBlankOption=e=>`<option value="blank" selected>${e??a("ProductVariants","please_select")}</option>`;export{renderBlankOption,renderCombineVariants,renderDropdownOptions};
+    ${i(o,e("option_disabled == true",e("value == selectedValue",`<option disabled ${n?"selected":""} option-position="{{option.position}}"${p}>{{value}}</option>`,`<option disabled ${p}>{{value}}</option>`),e("value == selectedValue",`<option ${n?"selected":""} option-position="{{option.position}}" ${p}>{{value}}</option>`,`<option ${p} option-position="{{option.position}}">{{value}}</option>`)),e("value == selectedValue",`<option ${n?"selected":""} ${p} option-position="{{option.position}}">{{value}}</option>`,`<option ${p} option-position="{{option.position}}">{{value}}</option>`))}`),r=i=>`<option value="blank" selected>${i??o("ProductVariants","please_select")}</option>`;export{r as renderBlankOption,n as renderCombineVariants,l as renderDropdownOptions};

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

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

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

@@ -1,9 +1,9 @@
-import{template as o}from"@gem-sdk/core";import{createClass as t,createStyle as r,createAttr as e,If as s}from"@gem-sdk/system";import{getSelectClass as m}from"../../common/dropdown/classes.js";import{getSelectStyle as i}from"../../common/dropdown/styles.js";import{getSelectAttr as d}from"../../common/dropdown/attrs.js";import{renderBlankOption as n,renderDropdownOptions as p}from"../dropdown-option/render-liquid/index.js";let DropdownVariant=l=>{let{variantGroup:a,blankText:c,swatchAutoWidth:f,swatchHeight:w,optionTypography:g,optionBgColor:$,optionTextColor:j,optionRounded:u,optionShadow:x,optionHasShadow:y,optionBorder:h,optionTransform:b,hasPreSelected:k,optionTypo:q,combineHeight:A,combineWidth:D,soldOutStyle:V,children:C}=l,L="disable"===V,v=t(m({optionTypo:q,optionTypography:g,optionBgColor:$,optionBorder:h,optionTextColor:j})),z=r(i({width:a?D:f,height:a?A:w,optionTypo:q,optionTypography:g,optionBgColor:$,optionTextColor:j,optionRounded:u,optionHasShadow:y,optionShadow:x,optionBorder:h,optionTransform:b,isCombine:a,textAlign:q?.attrs?.textAlign})),B=e(d({variantGroup:a,type:"Liquid"})),E=()=>C;return o`
+import{template as o}from"@gem-sdk/core";import{createClass as t,createStyle as r,createAttr as e,If as s}from"@gem-sdk/system";import{getSelectClass as m}from"../../common/dropdown/classes.js";import{getSelectStyle as i}from"../../common/dropdown/styles.js";import{getSelectAttr as d}from"../../common/dropdown/attrs.js";import{renderBlankOption as n,renderDropdownOptions as p}from"../dropdown-option/render-liquid/index.js";let l=l=>{let{variantGroup:a,blankText:c,swatchAutoWidth:f,swatchHeight:w,optionTypography:g,optionBgColor:$,optionTextColor:j,optionRounded:u,optionShadow:x,optionHasShadow:y,optionBorder:h,optionTransform:b,hasPreSelected:k,optionTypo:q,combineHeight:A,combineWidth:C,soldOutStyle:D,children:L}=l,V=t(m({optionTypo:q,optionTypography:g,optionBgColor:$,optionBorder:h,optionTextColor:j})),v=r(i({width:a?C:f,height:a?A:w,optionTypo:q,optionTypography:g,optionBgColor:$,optionTextColor:j,optionRounded:u,optionHasShadow:y,optionShadow:x,optionBorder:h,optionTransform:b,isCombine:a,textAlign:q?.attrs?.textAlign})),z=e(d({variantGroup:a,type:"Liquid"}));return o`
     <select
-      ${B}
-      class="${v}"
-      style="${z}"
+      ${z}
+      class="${V}"
+      style="${v}"
     >
       ${s(!k,n(c))}
-      ${s(a,E(),p(L,k))}
-    </select>`};export{DropdownVariant as default};
+      ${s(a,L,p("disable"===D,k))}
+    </select>`};export{l as default};

package/dist/esm/product/components/product-variants/components/dropdown-swatches/hooks/useDropdownSwatches.js

@@ -1 +1 @@
-import{useSelectedOption as e,useProduct as t,parseSelectedOption as n}from"@gem-sdk/core";import{useMemo as r,useState as a,useEffect as i}from"react";let useDropdownSwatches=o=>{let{option:l,variantGroup:s,variants:d,initValue:u,hasPreSelected:c,presetConfiguration:m}=o,{setSelectedOption:p,forceSelectedOption:y,selectedOptions:v}=e(),f=t(),g=r(()=>{if(!m)return;let{presets:e,optionType:t}=m;return e?.[t||"rectangle_list"]},[m]),[k,w]=a(c?u:"blank");i(()=>{w(v?.[l?.name??"blank"])},[v,l]),i(()=>{c||w("blank")},[c]);let b=e=>!!e&&(e?.inventoryQuantity&&e.inventoryQuantity>0||!e?.manageInventory||"CONTINUE"===e.inventoryPolicy),O=e=>{let t=d?.find(t=>t?.id===e);if(t&&t.selectedOptions){let e=n(t.selectedOptions);e&&y(e,f?.id,!1,!0)}},h=e=>{s?O(e.target?.value):p(l?.name,e.target?.value,f?.id)};return{value:k,preset:g,handleOnChangeSelect:h,checkVariantInStock:b}};export{useDropdownSwatches};
+import{useSelectedOption as e,useProduct as t,parseSelectedOption as n}from"@gem-sdk/core";import{useMemo as r,useState as a,useEffect as i}from"react";let l=l=>{let{option:o,variantGroup:c,variants:d,initValue:m,hasPreSelected:s,presetConfiguration:u}=l,{setSelectedOption:y,forceSelectedOption:g,selectedOptions:k}=e(),p=t(),v=r(()=>{if(!u)return;let{presets:e,optionType:t}=u;return e?.[t||"rectangle_list"]},[u]),[f,h]=a(s?m:"blank");i(()=>{h(k?.[o?.name??"blank"])},[k,o]),i(()=>{s||h("blank")},[s]);let O=e=>{let t=d?.find(t=>t?.id===e);if(t&&t.selectedOptions){let e=n(t.selectedOptions);e&&g(e,p?.id,!1,!0)}};return{value:f,preset:v,handleOnChangeSelect:e=>{c?O(e.target?.value):y(o?.name,e.target?.value,p?.id)},checkVariantInStock:e=>!!e&&(e?.inventoryQuantity&&e.inventoryQuantity>0||!e?.manageInventory||"CONTINUE"===e.inventoryPolicy)}};export{l as useDropdownSwatches};

package/dist/esm/product/components/product-variants/components/image/Image.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as a}from"react/jsx-runtime";import t from"../base/base.js";import{useMemo as r}from"react";let ImageVariant=({swatchValue:e,isVariantOutStock:m,...i})=>{let o=r(()=>e?.imageUrl||"",[e]);return a(t,{...i,swatchesImage:o,isVariantOutStock:m})};export{ImageVariant as default};
+import{jsx as t}from"react/jsx-runtime";import r from"../base/base.js";import{useMemo as a}from"react";let e=({swatchValue:e,isVariantOutStock:m,...i})=>{let o=a(()=>e?.imageUrl||"",[e]);return t(r,{...i,swatchesImage:o,isVariantOutStock:m})};export{e as default};

package/dist/esm/product/components/product-variants/components/image/Image.liquid.js

@@ -1,4 +1,4 @@
-import{template as e}from"@gem-sdk/core";import a from"../base/base.liquid.js";let ImageVariant=({isVariantOutStock:i,swatchValue:l,...r})=>e`
+import{template as e}from"@gem-sdk/core";import a from"../base/base.liquid.js";let i=({isVariantOutStock:i,swatchValue:l,...r})=>e`
     {% assign imageUrl = null %}
     {% for label in labels %}
     {% if label == value %}
@@ -6,4 +6,4 @@ import{template as e}from"@gem-sdk/core";import a from"../base/base.liquid.js";l
     {% endif %}
     {% endfor %}
     ${a({...r,typeOfOption:"image"})}
-  `;export{ImageVariant as default};
+  `;export{i as default};

package/dist/esm/product/components/product-variants/components/image-shopify/ImageShopify.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e}from"react/jsx-runtime";import t from"../base/base.js";import{useMemo as a}from"react";let ImageShopifyVariant=({product:i,isVariantOutStock:d,...r})=>{let s=i?.medias?.edges.map(e=>e.node),m=i?.variants?.edges.map(e=>{let t=e.node?.mediaId||"0",a=s?.find(e=>e?.id===t)?.src||"";return{title:e.node?.title||"",selectedOptions:e.node?.selectedOptions.map(e=>e.value),mediaId:t,image:a,id:e.node?.id||"0"}}),n=a(()=>{let e=r.value?.label,t=m?.find(t=>t?.selectedOptions?.includes(e)&&t?.image)?.image||"";return t},[r.value,m]);return e(t,{...r,swatchesImage:n,isVariantOutStock:d})};export{ImageShopifyVariant as default};
+import{jsx as e}from"react/jsx-runtime";import t from"../base/base.js";import{useMemo as a}from"react";let i=({product:i,isVariantOutStock:d,...r})=>{let s=i?.medias?.edges.map(e=>e.node),m=i?.variants?.edges.map(e=>{let t=e.node?.mediaId||"0",a=s?.find(e=>e?.id===t)?.src||"";return{title:e.node?.title||"",selectedOptions:e.node?.selectedOptions.map(e=>e.value),mediaId:t,image:a,id:e.node?.id||"0"}}),n=a(()=>{let e=r.value?.label,t=m?.find(t=>t?.selectedOptions?.includes(e)&&t?.image)?.image||"";return t},[r.value,m]);return e(t,{...r,swatchesImage:n,isVariantOutStock:d})};export{i as default};