@gem-sdk/components 3.0.0-pre-production.14 → 3.0.0

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

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

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

@@ -0,0 +1 @@
+"use strict";const getWrapperAttr=(t,a)=>{let{typeOfOption:e,available:i,optionName:p,optionNameValue:o,isVariantOutStock:n}=t;return"Liquid"===a?{id:"value-wrapper-{{option.name | escape | strip}}-{{value | escape | strip}}","option-data":"{{option.name | escape}}","option-value":"{{value | escape}}","option-position":"{{option.position}}","data-gp-option-available":"{{value.available}}","option-type":`${e||"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":`${e||"rectangle_list"}`,"data-disabled":!!n,"data-hidden":"true"}};exports.getWrapperAttr=getWrapperAttr;

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

@@ -0,0 +1,2 @@
+"use strict";var core=require("@gem-sdk/core");const getWrapperClass=e=>{let{typeOfOption:r,optionTypo:p,optionTypography:o,variantKey:l,soldOutMarkLine:t,available:s}=e,g="color"===r,a=`${core.composeTypographyClassName(p,o)}`,c=core.cls({...l&&{[l]:!0},[a]:!0,"gp-p-[4px]":g,"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]":t&&!s&&!g}),f=`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`,i=`${f} ${c}`.trim();return core.composeClasses(i)},getWrapperTextClass=(e,r)=>{let p=core.cls({"color gp-line-clamp-2 gp-flex gp-h-full gp-w-full gp-items-center gp-justify-center":r,"gp-flex gp-flex-col gp-justify-center gp-items-center gp-gap-[6px":e}),o=`option-value gp-overflow-hidden gp-relative ${p}`.trim();return core.composeClasses(o)},getTextClass=({optionTypo:e,optionTypography:r,isColorType:p,isUploadImageType:o})=>{let l=`${core.composeTypographyClassName(e,r)}`,t=core.cls({"gp-text-center":!0,[l]:!0,"gp-overflow-hidden gp-text-ellipsis gp-px-1":p||o}),s=`${t}`.trim();return core.composeClasses(s)},getColorClass=({soldOutMarkLine:e,available:r})=>{let p=core.cls({"before:gp-absolute before:gp-top-[50%] before:gp-block before:gp-w-full before:gp--rotate-45 before:gp-border":e&&!r}),o=`color gp-relative gp-h-full gp-w-full gp-overflow-hidden gp-min-w-fit gp-flex gp-color-circle ${p}`.trim();return core.composeClasses(o)};exports.getColorClass=getColorClass,exports.getTextClass=getTextClass,exports.getWrapperClass=getWrapperClass,exports.getWrapperTextClass=getWrapperTextClass;

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

@@ -0,0 +1 @@
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getWrapperStyleActive=e=>{let{preset:o,optionTypography:t,optionTypo:r,typeOfOption:l}=e,a=o?.optionBgColor,p=o?.optionTextColor,i=o?.optionBorder,c=o?.optionHasShadow,d=o?.optionShadow,n=o?.optionRounded,h="color"===l,s="image"===l||"image_shopify"===l,g=core.composeTypographyStyle(r,t),y=e=>{let o=a?.active??a?.normal,t=i?.active??i?.normal;return core.makeStyle({bg:e&&core.getSingleColorVariable(o),bs:t?.border,bw:t?.width,bc:core.getSingleColorVariable(t?.color)})},S=d?.active??d?.normal,b=c?.active??c?.normal,m=p?.active??p?.normal;return helpers.filterTruthyObject({...y(!h),...core.getRadiusStyleActiveState(n),...core.getStyleShadow({value:S,state:"active",styleAppliedFor:"box-shadow",isEnableShadow:b},!0),...g,...!h&&!s&&core.makeStyle({c:core.getSingleColorVariable(m)}),...core.makeStyle({h:o?.height})})},getWrapperStyleNormalAndHover=e=>{let{preset:o,optionTransform:t,optionTypography:r,optionTypo:l,typeOfOption:a}=e,p=o?.optionBgColor,i=o?.optionTextColor,c=o?.optionBorder,d=o?.optionHasShadow,n=o?.optionShadow,h=o?.optionRounded,s="color"===a,g="image"===a||"image_shopify"===a,y=core.composeTypographyStyle(l,r),S=["normal","hover"].reduce((e,o)=>({...e,...core.getStyleShadow({value:n?.[o],state:o,styleAppliedFor:"box-shadow",isEnableShadow:d?.[o]})}),{});return helpers.filterTruthyObject({...core.composeRadius(h),...S,...!s&&core.getGlobalColorStateStyle("bg",p),...!s&&core.handleConvertBorderStyle(c),...!s&&core.handleConvertBorderWidth(c),...!s&&core.handleConvertBorderColor(c),...!s&&!g&&core.makeStyle({c:t}),...!s&&!g&&core.getGlobalColorStateStyle("c",i),...y,...core.makeStyle({h:o?.height})})},getWrapperTextStyle=e=>{let{preset:o,typeOfOption:t,checked:r}=e,l=o?.optionBorder,a=o?.optionRounded,p="color"===t,i=()=>{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},c={...a,active:{...a?.active||{},radiusType:"custom"}},d=r?core.getRadiusStyleActiveState(c):core.composeRadius(a),n=!r&&p?{...core.handleConvertBorderStyle(l),...core.handleConvertBorderWidth(l),...core.handleConvertBorderColor(l)}:{};return helpers.filterTruthyObject({...!p&&i(),...p&&d,...n})},getColorStyle=({optionBorder:e,optionRounded:o,isActive:t,color:r})=>{let l=()=>r?r?.startsWith("linear-gradient")?{backgroundImage:r}:{backgroundColor:r}:{},a=o=>o?{"--bs":"none"}:core.handleConvertBorderStyle(e),p=t=>({"--d":"flex","--jc":"center","	--ai":"center","--w":"100%","--h":"100%","--of":"hidden",...a(t),...core.handleConvertBorderWidth(e),...core.handleConvertBorderColor(e),...core.composeRadius(o),...l()});return p(!!t)},getTextStyle=({optionTypo:e,optionTypography:o})=>{let t=core.composeTypographyStyle(e,o);return delete t["--c"],helpers.filterTruthyObject({...t})};exports.getColorStyle=getColorStyle,exports.getTextStyle=getTextStyle,exports.getWrapperStyleActive=getWrapperStyleActive,exports.getWrapperStyleNormalAndHover=getWrapperStyleNormalAndHover,exports.getWrapperTextStyle=getWrapperTextStyle;

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

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

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

@@ -0,0 +1 @@
+"use strict";const getSelectAttr=({variantGroup:e,optionName:t,value:o,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:t||"Select Option",value:o};exports.getSelectAttr=getSelectAttr;

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

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

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

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

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

@@ -0,0 +1 @@
+"use strict";var core=require("@gem-sdk/core"),_function=require("../../../../helpers/function.js");const getWrapDropdownClass=e=>{let t={desktop:"horizontal",mobile:"horizontal",tablet:"horizontal"},r=_function.getAlignClasses(t,e);return{"gp-flex":!0,...r}},getVariantOptionGroupClass=e=>{let t=core.getAlignmentClasses(e);return{"variant-option-group gp-flex gp-w-full gp-flex-wrap gp-items-center ":!0,...t}};exports.getVariantOptionGroupClass=getVariantOptionGroupClass,exports.getWrapDropdownClass=getWrapDropdownClass;

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

@@ -0,0 +1 @@
+"use strict";const getAttrs=({uid:t,hasPreSelected:s,cssClass:e})=>({"data-id":t||"","has-pre-selected":s?"true":"false",class:e||""});exports.getAttrs=getAttrs;

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

@@ -0,0 +1 @@
+"use strict";var core=require("@gem-sdk/core"),mappingVariantStyles=require("../../utils/mappingVariantStyles.js"),common=require("../common.js");const getDropdownGroupData=t=>{let{styles:e,setting:a}=t,{dropdownItemWidth:o}=e??{},r=mappingVariantStyles.mappingVariantStyles(a?.variantPresets,e),l={...a,variantPresets:r},i=()=>{let t={};return core.DEVICES.forEach(e=>{t[e]=o?.[e]==="fill"}),t};return{...e,...l,swatchAutoWidth:i()}},getTextVariantTitleData=(t,e,a)=>{let{styles:o,setting:r}=t,{layout:l}=r??{},{labelGap:i}=o??{},{optionName:n,hasPreSelected:p,isChangeVariant:s,selectedOptions:m,styleOptionSelected:g}=a??{},c=core.composeTypographyClassName(o?.labelTypo,o?.labelTypography),u=()=>{let t={};return l?.desktop==="horizontal"?t["--w"]="120px":l?.tablet==="horizontal"?t["--w-tablet"]="120px":l?.mobile==="horizontal"&&(t["--w-mobile"]="120px"),t},y=()=>"Liquid"===e?"{{option.name}}":`${n}${(!1!=p||s)&&"dropdown"!==g?`: ${m?.[n]}`:""}`;return{className:core.cls(c,"Liquid"===e?"{{showVariantClass}}":""),styles:{typo:o?.labelTypo},style:{...common.makeStyleGapForLabel(l,i)},setting:{htmlTag:"legend",text:y(),tagWidth:u(),excludeFlex:!0}}};exports.getDropdownGroupData=getDropdownGroupData,exports.getTextVariantTitleData=getTextVariantTitleData;

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

@@ -0,0 +1 @@
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getWrapperStyle=e=>{let{style:t,styles:r,setting:o}=e,{width:p,align:l}=r??{},{column:a}=o??{},i=core.makeStyleResponsive("w",core.makeWidth(p));return helpers.filterTruthyObject({...core.optionLayoutStyle(a),...core.makeStyleResponsive("ta",l),...i,...t})},getVariantOptionGroupStyle=(e,t)=>helpers.filterTruthyObject({...core.makeStyle({rg:e,cg:t})});exports.getVariantOptionGroupStyle=getVariantOptionGroupStyle,exports.getWrapperStyle=getWrapperStyle;

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

@@ -0,0 +1 @@
+"use strict";const 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}};exports.getVariantOptionAttr=getVariantOptionAttr;

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

@@ -0,0 +1 @@
+"use strict";var core=require("@gem-sdk/core"),_function=require("../../../../helpers/function.js");const getVariantItemLabelClass=t=>{let{available:e}=t,p="disable"===t.soldOutStyle;return{[`option-item gp-group gp-relative gp-child-item-${t.uid}`]:!0,"gp-pointer-events-none gp-opacity-20":p&&!e}},getTooltipClass=()=>({"gp-invisible !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-visible 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=(t,e)=>{let p=core.getLayoutClasses(t),a=_function.getAlignClasses(t,e);return{"gp-flex variant-inside":!0,...p,...a}};exports.getTooltipClass=getTooltipClass,exports.getTooltipSvgClass=getTooltipSvgClass,exports.getVariantItemLabelClass=getVariantItemLabelClass,exports.getVariantOptionClass=getVariantOptionClass,exports.getWrapVariantOptionClass=getWrapVariantOptionClass;

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

@@ -0,0 +1 @@
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getLabelVariantStyle=e=>e?helpers.filterTruthyObject(core.makeStyleResponsive("w",core.makeWidth(e))):{},getMarginBottomStyle=(e,t)=>!e||t?{}:helpers.filterTruthyObject(core.makeStyleResponsive("mb",e));exports.getLabelVariantStyle=getLabelVariantStyle,exports.getMarginBottomStyle=getMarginBottomStyle;

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

@@ -0,0 +1,11 @@
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),common=require("../../common/common.js"),system=require("@gem-sdk/system"),classes=require("../../common/base/classes.js"),attrs=require("../../common/base/attrs.js"),styles=require("../../common/base/styles.js");const BaseVariant=e=>{let{value:s,checked:t,optionTypography:r,optionTypo:a,swatchesImage:l,swatchesColor:m,preset:c,typeOfOption:i,available:o,variantKey:n,soldOutMarkLine:y}=e,x=React.useMemo(()=>"color"===i,[i]),u=c?.optionBgColor,j=c?.optionBorder,g=c?.optionRounded,p=React.useMemo(()=>"image"===i||"image_shopify"===i,[i]),d=React.useMemo(()=>t?common.isColorDark(u?.active)?"#fff":"#121212":common.isColorDark(u?.normal)?"#fff":"#121212",[u?.active,u?.normal,t]),C=e=>common.isColorDark(e)?"#fff":"#121212",f=()=>system.If(y,jsxRuntime.jsx("style",{children:`
+        .${n}:before {
+          width: ${x&&m?.length?`calc(${c?.height} - 12px) !important`:"200px !important"};
+          border-color: ${x?"#121212":d};
+        }
+        `})," "),h=system.createClass(classes.getColorClass({soldOutMarkLine:y,available:o})),R=()=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:m?.map(e=>{let s=e,r=e.startsWith("linear-gradient");r&&(s=e.match(/#(([\da-fA-F]{2}){3,4}|([\da-fA-F]){3,4})/g)?.[0]);let a=system.createStyle(styles.getColorStyle({optionRounded:g,optionBorder:j,isActive:t,color:e}));return jsxRuntime.jsxs(React.Fragment,{children:[jsxRuntime.jsx("style",{children:`
+                .${n} .color:before {
+                  border-color: ${C(s)} !important;
+                }
+                `}),jsxRuntime.jsx("div",{className:h,style:a},e)]},e)})}),v=system.createClass(classes.getWrapperTextClass(p,x)),b=system.createStyle(styles.getWrapperTextStyle(e)),S=system.createClass(classes.getTextClass({optionTypo:a,optionTypography:r,isColorType:x,isUploadImageType:p})),w=system.createStyle(styles.getTextStyle({optionTypo:a,optionTypography:r})),D=()=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs("div",{className:v,style:b,children:[f(),system.If(p,jsxRuntime.jsxs("svg",{width:"15",height:"12",viewBox:"0 0 15 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[jsxRuntime.jsx("circle",{cx:"2",cy:"2",r:"2",fill:"#D6D6D6"}),jsxRuntime.jsx("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"})]})),jsxRuntime.jsx("span",{className:S,style:w,children:s?.label})]})}),q=()=>jsxRuntime.jsx("img",{className:"gp-h-full gp-w-full gp-object-cover",src:l,alt:""}),A=()=>{switch(i){case"color":return system.If(m&&m.length>0,R(),D());case"image":case"image_shopify":return system.If(!!l,q(),D());default:return D()}},W=system.createClass(classes.getWrapperClass(e)),N=system.createAttr(attrs.getWrapperAttr(e)),$=system.createStyle(styles.getWrapperStyleActive(e)),k=system.createStyle(styles.getWrapperStyleNormalAndHover(e)),B=t?$:k;return jsxRuntime.jsxs("div",{...N,className:W,style:B,children:[f(),A()]})};exports.default=BaseVariant;

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

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),_function=require("../../../../helpers/function.js"),classes=require("../../common/base/classes.js"),system=require("@gem-sdk/system"),attrs=require("../../common/base/attrs.js"),styles=require("../../common/base/styles.js");const BaseVariant=e=>{let{optionTypography:s,optionBorder:t,optionRounded:l,optionTypo:r,typeOfOption:a}=e,c="color"===a,i="image"===a||"image_shopify"===a,o=system.createClass(classes.getColorClass({})),y=()=>core.template`
+      ${system.LiquidFor("color in colors",`
+          ${system.Liquid('{% assign backgroundType = "background-color" %}')}
+          ${system.LiquidIf('color contains "linear-gradient"',system.Liquid('{% assign backgroundType = "background-image" %}'))}
+          <div
+            class="${o}"
+            data-test="{{ backgroundType }}: {{ color }}"
+            style="{{ backgroundType }}: {{ color }}; ${u()}"></div>
+        `)}
+      `,n=system.createStyle(styles.getColorStyle({optionBorder:t,optionRounded:l,isActive:!0})),m=system.createStyle(styles.getColorStyle({optionBorder:t,optionRounded:l,isActive:!1})),u=()=>system.LiquidIf("selectedValue == value",_function.getStyleOfObject(n),_function.getStyleOfObject(m)),g=system.createClass(classes.getWrapperTextClass(i,c)),d=system.createStyle({...styles.getWrapperTextStyle(e)}),p=system.createClass(classes.getTextClass({optionTypo:r,optionTypography:s,isColorType:c,isUploadImageType:i})),C=system.createStyle(styles.getTextStyle({optionTypo:r,optionTypography:s})),f=()=>core.template`
+      <div
+        class="${g}"
+        style="${c?u():""} ${_function.getStyleOfObject(d)}">
+        ${system.If(i,'<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="${p}" style="${C}">{{value}}</span>
+      </div>
+    `,v=()=>core.template`
+      <img class="gp-object-cover gp-rounded-none" style="width: 64px; height: 64px" src="{{imageUrl}}" alt="" />
+    `,b=()=>{switch(a){case"color":return core.template`${system.LiquidIf("colors != null and colors.size > 0",y(),f())}`;case"image":case"image_shopify":return core.template`${system.LiquidIf('imageUrl != null and imageUrl != ""',v(),f())}`;default:return f()}},S=system.createClass(classes.getWrapperClass({...e,available:!0})),$=system.createAttr(attrs.getWrapperAttr(e,"Liquid")),q=system.createStyle(styles.getWrapperStyleActive(e)),L=system.createStyle(styles.getWrapperStyleNormalAndHover(e));return core.template`
+    <div
+      ${$}
+      class="${S}"
+      style="${system.LiquidIf("selectedValue == value",_function.getStyleOfObject({...q,...n}),_function.getStyleOfObject({...L,...m}))}">
+      ${b()}
+    </div>`};exports.default=BaseVariant;

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

@@ -0,0 +1,2 @@
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),base=require("../base/base.js"),React=require("react");const ImageVariant=({swatchValue:e,isVariantOutStock:t,...r})=>{let a=React.useMemo(()=>e?.colors?.length?e?.colors:[],[e]);return jsxRuntime.jsx(base.default,{...r,swatchesColor:a,isVariantOutStock:t})};exports.default=ImageVariant;

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

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

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

@@ -0,0 +1,2 @@
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),Dropdown=require("../dropdown-swatches/Dropdown.js"),React=require("react");const DropdownGroup=({...e})=>{let r=core.useVariants(),{selectedOptions:t}=core.useSelectedOption(),o=React.useMemo(()=>{let e=Object.keys(t||{}),o=r.find(r=>{let o=0;return e.forEach(e=>{let n=r?.selectedOptions.find(r=>r.name===e);n?.value===t?.[e]&&o++}),o===e.length});return o},[r,t]);return jsxRuntime.jsx(Dropdown.default,{variants:r,initValue:o?.id,variantGroup:!0,...e})};exports.default=DropdownGroup;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var index=require("../dropdown-option/render-liquid/index.js"),Dropdown_liquid=require("../dropdown-swatches/Dropdown.liquid.js");const DropdownGroupVariant=r=>{let{price:e,hasPreSelected:o,soldOutStyle:d}=r,i="disable"===d;return Dropdown_liquid.default({...r,variantGroup:!0,children:index.renderCombineVariants(i,o,e)})};exports.default=DropdownGroupVariant;

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

@@ -0,0 +1,2 @@
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core");require("react");const DropdownVariantOption=({optionPosition:e,optionNumber:r,value:t,optionName:o,isSoldOutMark:i})=>{let n=core.useVariantOutStock(o??"",t?.label??"",{position:e||0,optionNumber:r||0});return jsxRuntime.jsx("option",{disabled:!n&&i,value:t?.label,children:t?.label},t?.id)};exports.default=DropdownVariantOption;

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

@@ -0,0 +1,2 @@
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core");require("react");const VariantOption=({variant:e,value:r,includePrice:t,disabled:i})=>{let o=core.useFormatMoney(parseFloat(`${e?.price}`),!1);return jsxRuntime.jsx("option",{disabled:i,value:r,dangerouslySetInnerHTML:{__html:`${e?.title}${t?` - ${o}`:""} `}})};exports.default=VariantOption;

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

@@ -0,0 +1,43 @@
+"use strict";var system=require("@gem-sdk/system"),helpers=require("../../../../../../helpers.js");const renderCombineVariants=(e,i,t)=>{let o=t?"- {{variantItem.price | money}}":"",a='origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}"',n=`{{variantItem.title}} ${o}`;return`{%- for variantItem in variants -%}
+    ${system.If(e,system.LiquidIf("variantItem.available == false",system.LiquidIf("variantItem.id == variant.id",`<option origin-price="{{variantItem.price}}" disabled ${i?"selected":""} value="{{variantItem.id}}" key="{{variantItem.id}}">            
+            ${n}
+          </option>`,`<option ${a} disabled>
+            ${n}
+          </option>`),system.LiquidIf("variantItem.id == variant.id",`<option origin-price="{{variantItem.price}}" ${i?"selected":""} value="{{variantItem.id}}" key="{{variantItem.id}}">
+            ${n}
+          </option>`,`<option ${a}>
+            ${n}
+          </option>`)),system.LiquidIf("variantItem.id == variant.id",`<option origin-price="{{variantItem.price}}" ${i?"selected":""} value="{{variantItem.id}}" key="{{variantItem.id}}">
+          ${n}
+        </option>`,`<option ${a}>
+          ${n}
+        </option>`))}     
+    {%- endfor -%}
+  `},composeSelectOptionAttrs=`
+  option-data="{{option.name | escape}}"
+  option-value="{{value | escape}}"
+  data-gp-option-value-id="{{value.id}}"
+  data-gp-option-available="{{value.available}}"
+  value="{{value | escape}}"
+  class="option-value-wrapper"
+  key="{{value | escape}}"
+`,renderDropdownOptions=(e,i)=>system.LiquidFor("value in values",`${system.Liquid(`{%- liquid
+      assign option_disabled = true
+      for variantItem in product.variants
+        case option.position
+          when 1
+            if variantItem.available and variantItem.option1 == value
+              assign option_disabled = false
+            endif
+          when 2
+            if variantItem.available and variantItem.option2 == value
+              assign option_disabled = false
+            endif
+          when 3
+            if variantItem.available and variantItem.option3 == value
+              assign option_disabled = false
+            endif
+        endcase
+      endfor
+    -%}`)}
+    ${system.If(e,system.LiquidIf("option_disabled == true",system.LiquidIf("value == selectedValue",`<option disabled ${i?"selected":""} option-position="{{option.position}}"${composeSelectOptionAttrs}>{{value}}</option>`,`<option disabled ${composeSelectOptionAttrs}>{{value}}</option>`),system.LiquidIf("value == selectedValue",`<option ${i?"selected":""} option-position="{{option.position}}" ${composeSelectOptionAttrs}>{{value}}</option>`,`<option ${composeSelectOptionAttrs} option-position="{{option.position}}">{{value}}</option>`)),system.LiquidIf("value == selectedValue",`<option ${i?"selected":""} ${composeSelectOptionAttrs} option-position="{{option.position}}">{{value}}</option>`,`<option ${composeSelectOptionAttrs} option-position="{{option.position}}">{{value}}</option>`))}`),renderBlankOption=e=>`<option value="blank" selected>${e??helpers.getStaticLocale("ProductVariants","please_select")}</option>`;exports.renderBlankOption=renderBlankOption,exports.renderCombineVariants=renderCombineVariants,exports.renderDropdownOptions=renderDropdownOptions;

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),base=require("../base/base.js"),React=require("react");const ImageVariant=({swatchValue:e,isVariantOutStock:t,...a})=>{let r=React.useMemo(()=>e?.imageUrl||"",[e]);return jsxRuntime.jsx(base.default,{...a,swatchesImage:r,isVariantOutStock:t})};exports.default=ImageVariant;

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

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),base_liquid=require("../base/base.liquid.js");const ImageVariant=({isVariantOutStock:e,swatchValue:a,...i})=>core.template`
+    {% assign imageUrl = null %}
+    {% for label in labels %}
+    {% if label == value %}
+      {% assign imageUrl = imageUrls[forloop.index0] %}
+    {% endif %}
+    {% endfor %}
+    ${base_liquid.default({...i,typeOfOption:"image"})}
+  `;exports.default=ImageVariant;

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

@@ -0,0 +1,2 @@
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),base=require("../base/base.js"),React=require("react");const ImageShopifyVariant=({product:e,isVariantOutStock:t,...a})=>{let i=e?.medias?.edges.map(e=>e.node),s=e?.variants?.edges.map(e=>{let t=e.node?.mediaId||"0",a=i?.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"}}),r=React.useMemo(()=>{let e=a.value?.label,t=s?.find(t=>t?.selectedOptions?.includes(e)&&t?.image)?.image||"";return t},[a.value,s]);return jsxRuntime.jsx(base.default,{...a,swatchesImage:r,isVariantOutStock:t})};exports.default=ImageShopifyVariant;

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

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),base_liquid=require("../base/base.liquid.js");const ImageShopifyVariant=({isVariantOutStock:e,swatchValue:a,...i})=>core.template`
+      {% assign imageUrl = null %}
+      {% for variant in variants %}
+        {% assign valueIncludesSelectedOption = false %}
+        {% for item in variant.options %}
+          {% if item == value %}
+          {% assign valueIncludesSelectedOption = true %}
+          {% endif %}
+        {% endfor %}
+        {% if valueIncludesSelectedOption and variant.featured_image or variant.featured_media%}
+          {% unless imageUrl %}
+            {% if variant.featured_media %}
+              {% assign imageUrl = variant.featured_media.preview_image.src | product_img_url: '200x'  %}
+            {% else %}
+              {% assign imageUrl = variant.featured_image.src | product_img_url: '200x'  %}
+            {% endif %}
+          {% endunless %}
+        {% endif %}
+      {% endfor %}
+      ${base_liquid.default({...i,typeOfOption:"image_shopify"})}
+  `;exports.default=ImageShopifyVariant;

package/dist/cjs/product/components/product-variants/components/rectangle-list/RectangleList.js

@@ -0,0 +1,2 @@
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react");const RectangleListVariant=({value:e,isVariantOutStock:t,checked:o,swatchAutoWidth:r,swatchWidth:a,swatchHeight:l,optionTransform:c,optionTypography:s,optionBgColor:i,optionTextColor:n,optionBorder:g,optionRounded:p,optionHasShadow:d,optionShadow:b,optionTypo:v})=>{let S=()=>core.makeStyle({bg:core.getSingleColorVariable(i?.active),bs:g?.active?.border,bw:g?.active?.width,bc:core.getSingleColorVariable(g?.active?.color)}),y=core.makeStyleResponsive("w",core.makeWidth(a,r)),m=React.useMemo(()=>({...p,active:{...p?.active||{},radiusType:"custom"}}),[p]),u=core.composeTypographyClassName(v,s),C=core.composeTypographyStyle(v,s);return jsxRuntime.jsx("div",{className:core.cls(o?core.getGlobalColorClass("bg",i?.active):core.getGlobalColorStateClass("bg",i),core.handleConvertClassColor(g),u,"gp-box-border gp-inline-flex gp-cursor-pointer gp-items-center gp-justify-center gp-text-center",{"gp-pointer-events-none  !gp-cursor-not-allowed":t}),style:{...o?{}:core.getGlobalColorStateStyle("bg",i),...o?S():{},...core.makeStyle({tt:c}),...C,...core.makeStyleResponsive("h",l),...y,...o?core.getRadiusStyleActiveState(m):core.composeRadius(p),...o?core.getStyleShadow({value:b?.active,state:"active",styleAppliedFor:"box-shadow",isEnableShadow:d?.active},!0):core.getStyleShadowState(b,"box-shadow",d),...o?{}:core.handleConvertBorderStyle(g),...o?{}:core.handleConvertBorderWidth(g),...o?{}:core.handleConvertBorderColor(g)},children:jsxRuntime.jsx("span",{className:core.cls("gp-flex gp-items-center gp-px-[16px]",o?core.getGlobalColorClass("text",n?.active):core.getGlobalColorStateClass("text",n)),style:{...o?core.makeStyle({c:core.getSingleColorVariable(n?.active)}):core.getGlobalColorStateStyle("c",n)},children:e?.label})})};exports.default=RectangleListVariant;

package/dist/cjs/product/components/product-variants/components/variants/index.js

@@ -0,0 +1,2 @@
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),base=require("../base/base.js"),color=require("../color/color.js"),Image=require("../image/Image.js"),ImageShopify=require("../image-shopify/ImageShopify.js"),RectangleList=require("../rectangle-list/RectangleList.js"),system=require("@gem-sdk/system"),classes=require("../../common/variants/classes.js"),styles=require("../../common/variants/styles.js"),attrs=require("../../common/variants/attrs.js");const VariantItem=e=>{let{name:t,variantKey:s,optionName:a,optionValue:l,typeOfOption:i}=e,{setSelectedOption:r}=core.useSelectedOption(),o=core.useProduct(),n=React.useMemo(()=>{if(!e.presetConfiguration)return;let{presets:t,optionType:s}=e.presetConfiguration;return t?.[s||"rectangle_list"]},[e.presetConfiguration]),u=React.useMemo(()=>{if(!e.showAsSwatches)return RectangleList.default;switch(i){case"color":return color.default;case"image":return Image.default;case"image_shopify":return ImageShopify.default;default:return base.default}},[i,e.showAsSwatches]),c=core.useVariantOutStock(t??"",e.value?.label??"",{position:e.optionPosition,optionNumber:e.optionNumber||0}),m=React.useMemo(()=>"disable"===e.soldOutStyle,[e.soldOutStyle]),d=React.useMemo(()=>"line"===e.soldOutStyle,[e.soldOutStyle]),p=()=>{if(c||!m){r(t,e.value?.label,o?.id);let s=new CustomEvent("change-selected-option",{bubbles:!0,cancelable:!0,composed:!0,detail:{optionId:t,optionValue:e.value?.label,productId:o?.id}});window.dispatchEvent(s)}},g=system.createClass(classes.getVariantItemLabelClass({...e,available:c})),h=system.createClass(classes.getTooltipClass()),j=system.createClass(classes.getTooltipSvgClass()),y=system.createClass(classes.getVariantOptionClass()),x=system.createStyle(styles.getLabelVariantStyle(n?.width)),v=system.createAttr(attrs.getVariantOptionAttr(e,"React"));return jsxRuntime.jsxs("label",{className:g,style:x,htmlFor:`${e.uid}-${s}`,children:[jsxRuntime.jsxs("div",{className:h,children:[jsxRuntime.jsx("p",{className:"gp-text-[#F9F9F9]",children:e.value?.label}),jsxRuntime.jsx("svg",{className:j,width:"8",height:"4",viewBox:"0 0 16 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsxRuntime.jsx("path",{d:"M8 10L0 0L16 1.41326e-06L8 10Z",fill:"#333333"})})]}),jsxRuntime.jsx("input",{checked:e.checked,name:`${o?.id}-options-${t?.toString().replaceAll('"','\\"')}`,id:`${e.uid}-${s}`,value:e.value?.label,type:"radio",className:"gp-sr-only",onChange:p}),jsxRuntime.jsx("span",{className:"gp-sr-only",children:e.value?.label}),jsxRuntime.jsx("div",{...v,className:y,children:jsxRuntime.jsx(u,{...e,optionName:a,optionNameValue:l,preset:n,isVariantOutStock:m&&!c&&0!==e.optionPosition,soldOutMark:m,soldOutMarkLine:d,available:c,swatchValue:e.value,product:o,variantKey:`${e.uid}-${s}`})})]})};VariantItem.defaultProps={},exports.default=VariantItem;

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

@@ -0,0 +1,62 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),base_liquid=require("../base/base.liquid.js"),color_liquid=require("../color/color.liquid.js"),Image_liquid=require("../image/Image.liquid.js"),ImageShopify_liquid=require("../image-shopify/ImageShopify.liquid.js"),system=require("@gem-sdk/system"),classes=require("../../common/variants/classes.js"),styles=require("../../common/variants/styles.js"),attrs=require("../../common/variants/attrs.js");const VariantItem=e=>{let{name:a,variantKey:s,value:t,id:i}=e,l="disable"===e.soldOutStyle,o=()=>core.template`
+    {% case type %}
+      {% when "rectangle_list" %}
+      ${base_liquid.default({...e,isVariantOutStock:l,swatchValue:e.value,value:t,swatchHeight:{desktop:"45px"},swatchWidth:{desktop:""}})}
+      {% when "color" %}
+      ${color_liquid.default({...e,isVariantOutStock:l,swatchValue:e.value,value:t,swatchHeight:{desktop:"45px"},swatchWidth:{desktop:"45px"}})}
+      {% when "image_shopify" %}
+      ${ImageShopify_liquid.default({...e,isVariantOutStock:l,swatchValue:e.value,value:t,swatchHeight:{desktop:"64px"},swatchWidth:{desktop:"64px"}})}
+      {% when "image" %}
+      ${Image_liquid.default({...e,isVariantOutStock:l,swatchValue:e.value,value:t,swatchHeight:{desktop:"64px"},swatchWidth:{desktop:"64px"}})}
+      {% else %}
+    {% endcase %}
+    `,r=()=>core.template`
+    ${base_liquid.default({...e,isVariantOutStock:l,swatchValue:e.value,value:t})}
+    `,d=system.createClass(classes.getVariantItemLabelClass({...e,available:!0})),n=system.createClass(classes.getTooltipClass()),u=system.createClass(classes.getTooltipSvgClass()),c=system.createClass(classes.getVariantOptionClass()),p=system.createStyle(styles.getLabelVariantStyle()),m=system.createAttr(attrs.getVariantOptionAttr(e,"Liquid"));return core.template`
+    ${system.Liquid(`{%- liquid
+      assign option_disabled = true
+      for variantItem in product.variants
+        case option.position
+          when 1
+            if variantItem.available and variantItem.option1 == value
+              assign option_disabled = false
+            endif
+          when 2
+            if variantItem.available and variantItem.option2 == value
+              assign option_disabled = false
+            endif
+          when 3
+            if variantItem.available and variantItem.option3 == value
+              assign option_disabled = false
+            endif
+        endcase
+      endfor
+    -%}`)}
+    ${system.If(!l,system.Liquid("{% assign option_disabled = false %}"))}
+    <label
+      id="${i}"
+      for="{{product.id}}-${e.uid}-${s}"
+      class="${d}"
+      style="${p}"
+    >
+      <div class="${n}">
+        <p class="gp-text-[#F9F9F9]">${t?.label}</p>
+        <svg class="${u}" width="8" height="4" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8 10L0 0L16 1.41326e-06L8 10Z" fill="#333333"/>
+        </svg>
+      </div>
+      <input
+        checked="${e.checked}"
+        name="{{product.id}}-options-${a}"
+        id="{{product.id}}-${e.uid}-${s}"
+        value="${t?.label}"
+        type="radio"
+        class="gp-sr-only gp-absolute gp-bottom-0 gp-right-0"
+      />
+      <span class="gp-sr-only">${t?.label}</span>
+      <div
+        ${m}
+        class="${c} ${system.LiquidIf("option_disabled == true",`${system.If(l,"gp-opacity-20"," ")}`)}">
+        ${e.isRenderDefault?r():o()}
+      </div>
+    </label>`};exports.default=VariantItem;

package/dist/cjs/product/components/product-variants/hooks/useGpVariants.js

@@ -0,0 +1 @@
+"use strict";var core=require("@gem-sdk/core"),React=require("react"),useVariantInteraction=require("./useVariantInteraction.js"),common=require("../common/common.js"),product=require("../../../helpers/product.js"),mappingVariantStyles=require("../utils/mappingVariantStyles.js");const VARIANT_PARAM_PATH="variant";let isMounted=!1;const useGpVariants=(e,t)=>{let{builderProps:a,styles:n,setting:i}=e,{optionType:r,hasPreSelected:o}=i??{},{redirectProductShopifyLink:s}=core.useProductShopifyEditLink(),c=core.useProduct(),l=core.useIsSyncProduct(),u=React.useRef(null),{dispatchInteractionChangeOptions:d,dispatchInteractionChangeOptionsInit:p}=useVariantInteraction.useVariantInteraction({element:u,uid:a?.uid}),A=core.useEditorMode(),{selectedOptions:R,setSelectedOption:f,forceSelectedOption:m}=core.useSelectedOption(),{setHasPreSelected:w,hasPreSelected:P}=core.useHasPreSelected(),[S,V]=React.useState("");React.useEffect(()=>{let e=new URL(window.location.href),t=e.searchParams.get(VARIANT_PARAM_PATH);void 0===P&&w(o||!!t)},[o,P,w]),React.useEffect(()=>{let e=new URL(window.location.href),t=e.searchParams.get(VARIANT_PARAM_PATH);t&&V(t)},[]);let h=()=>{let e=new URL(window.location.href),a=e.searchParams.get(VARIANT_PARAM_PATH);return a?t.find(e=>e?.id===a):null},g=e=>{let a=core.getSelectedVariant(t,e);return core.checkInStock(a)};React.useEffect(()=>{let e=h();if(e){let t=e?.selectedOptions.reduce((e,t)=>t.name?{...e,[t.name]:t.value}:e,{})??{},a=g(t);p(t,a),m(t,c?.id,!0)}else if(i?.hasPreSelected){let e=g(R);p(R,e)}},[]);let I=c?.options;core.useInitialSwatchesOptions(I);let M=core.useSwatchesOptions(I),[T,_]=React.useState(!1),v=product.checkDefaultVariant(c),E=React.useMemo(()=>"groupOption"===r,[r]),L=React.useCallback(e=>{let t=e.detail,a=c?.id;_(t.isManualChange||!1),l&&t&&a==t.productId&&f(t.optionId,t.optionValue,a,!0)},[l,c?.id,f]),N=React.useCallback(e=>{let t=e.detail,a=c?.id;_(t.isManualChange||!1),l&&t&&a==t.productId&&m(t.selectedOption,a,!0)},[l,c?.id,m]),y=e=>{let t=new URL(window.location.href);e?t.searchParams.set(VARIANT_PARAM_PATH,e):t.searchParams.delete(VARIANT_PARAM_PATH),history.replaceState(null,"",t.toString())};React.useEffect(()=>(window.addEventListener("set-selected-option",L),window.addEventListener("force-selected-option",N),()=>{window.removeEventListener("set-selected-option",L),window.removeEventListener("force-selected-option",N)}),[N,L]),common.useTransition(e=>{if(!isMounted){isMounted=!0;return}let a=JSON.stringify(e),n=JSON.stringify(R);if(window.interactionLoaded){let e=g(R);d(R,e)}if(e&&a!==n){let e=core.getSelectedVariant(t,R);y(e?.id||"")}},[R]);let k=React.useCallback(e=>{let t=mappingVariantStyles.mappingVariantStyles(i?.variantPresets,n),a=t?.find(t=>t.optionName===e);return a||t?.find(e=>"base"===e.optionName)},[i,n]);return{mode:A,options:M,variants:t,variantId:S,elementRef:u,variantGroup:E,isChangeVariant:T,selectedOptions:R,isDefaultVariant:v,getVariantConfiguration:k,redirectProductShopifyLink:s}};exports.useGpVariants=useGpVariants;

package/dist/cjs/product/components/product-variants/hooks/useVariantInteraction.js

@@ -0,0 +1 @@
+"use strict";var core=require("@gem-sdk/core");const useVariantInteraction=e=>{let{element:t,uid:n}=e,{trigger:r}=core.useInteraction(),a=(e,a)=>{t.current&&(r({event:"gp:rollback:item-selected",selector:`[data-id="${n}"]`,element:t.current}),r({event:"gp:item-selected",selector:`[data-id="${n}"]`,data:{selectedOptions:e,inStock:a},element:t.current}))},o=(e,t)=>{let n=()=>{a(e,t),window.removeEventListener("gp:flow-actions-loaded",n)};window.interactionLoaded?a(e,t):window.addEventListener("gp:flow-actions-loaded",n)};return{dispatchInteractionChangeOptions:a,dispatchInteractionChangeOptionsInit:o}};exports.useVariantInteraction=useVariantInteraction;

package/dist/cjs/product/components/product-variants/utils/mappingVariantStyles.js

@@ -0,0 +1 @@
+"use strict";const shadowDefault={type:"shadow-1",distance:"4px",blur:"12px",spread:"0px",color:"rgba(0, 0, 0, 0.20)",angle:90},roundedDefault={btrr:"0px",bblr:"0px",bbrr:"0px",btlr:"0px",radiusType:"custom"},textColorDefault={normal:"text-2",hover:"text-2",active:"text-2"},bgColorDefault={normal:"bg-3",hover:"bg-3",active:"bg-3"},roundedColorDefault={btrr:"999999px",bblr:"999999px",bbrr:"999999px",btlr:"999999px",radiusType:"custom"},optionShadowDefault={normal:shadowDefault,hover:shadowDefault,active:shadowDefault},optionRoundedDefault={normal:roundedDefault,hover:roundedDefault,active:roundedDefault},optionRoundedColorDefault={normal:roundedColorDefault,hover:roundedColorDefault,active:roundedColorDefault},optionHasShadowDefault={normal:!1,hover:!1,active:!1},mappingVariantStyles=(o,t)=>{let e=o?.map(o=>(o?.isEdited||Object.entries(o.presets).forEach(([e,a])=>{let r=a.width;if("dropdown"===e){let o=Object.assign({},a?.fullWidth);Object.entries(o).forEach(([o,t])=>{t&&(r={...r,[o]:"100%"})})}let n=Object.assign({...optionHasShadowDefault},t?.optionHasShadow),l=Object.assign({...optionShadowDefault},t?.optionShadow),d=Object.assign({...optionRoundedDefault},t?.optionRounded);"color"===e?d={...optionRoundedColorDefault}:Object.entries({...t?.optionRounded}).forEach(function([o,t]){"none"===t.radiusType&&(d={...d,[o]:roundedDefault})});let u="color"===e?bgColorDefault:t?.optionBgColor,i=["color","image","image_shopify"].includes(e)?textColorDefault:t?.optionTextColor;o.presets[e]={...a,width:r,optionBgColor:u,optionBorder:t?.optionBorder,optionHasShadow:n,optionRounded:d,optionShadow:l,optionTextColor:i}}),o));return e};exports.mappingVariantStyles=mappingVariantStyles,exports.optionRoundedColorDefault=optionRoundedColorDefault,exports.optionRoundedDefault=optionRoundedDefault;

package/dist/cjs/product/components/product-vendor/Vendor.js

@@ -0,0 +1,2 @@
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),Text=require("../../../text/components/Text.js"),React=require("react");const ProductVendor=({setting:e,builderProps:t,styles:r})=>{let l=core.useProduct(),s=core.useEditorMode(),[o,u]=React.useState(null),n=e?.label&&e.label.trim().length>0?`${e.label} ${l?.vendor??""}`:`${l?.vendor??""}`;return React.useEffect(()=>{let e=localStorage.getItem("shopifyDomain");e&&u(e)},[]),jsxRuntime.jsx("div",{id:`vendor-${t?.uid}`,children:l?e?.url&&"edit"!==s?jsxRuntime.jsx("a",{href:`//${o}/collections/vendors?q=${l.vendor}`,target:`${"new-tab"===e.openIn?"_blank":"_self"}`,children:jsxRuntime.jsx(Text.default,{builderProps:t,styles:r,setting:{...e,text:n,excludeFlex:!0}})}):jsxRuntime.jsx(Text.default,{builderProps:t,styles:r,setting:{...e,text:n,excludeFlex:!0}}):null})};exports.default=ProductVendor;

package/dist/cjs/product/components/product-vendor/Vendor.liquid.js

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Text_liquid=require("../../../text/components/Text.liquid.js");const ProductVendor=({setting:e,styles:t,advanced:d,builderProps:r})=>{let o=e?.label&&e.label.trim().length>0?`${e.label}`:"";return core.template`
+    {%- unless product -%}
+      <p>Product not found</p>
+    {%- else -%}
+      {% assign encoded_product_vendor = product.vendor | url_encode %}
+      ${e?.url?`
+        <a href="/collections/vendors?q={{ encoded_product_vendor }}" title="{{ encoded_product_vendor }}" target="${"new-tab"===e.openIn?"_blank":"_self"}">
+        ${Text_liquid.default({styles:t,setting:{...e,text:`${o} {{ product.vendor }}`,excludeFlex:!0},advanced:d,builderProps:r})}
+        </a>
+      `:`
+        ${Text_liquid.default({styles:t,setting:{...e,text:`${o} {{ product.vendor }}`,excludeFlex:!0},advanced:d,builderProps:r})}
+      `}
+    {%- endunless -%}
+  `};exports.default=ProductVendor;

package/dist/cjs/product/components/product-view-more/ProductViewMore.js

@@ -0,0 +1,2 @@
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),styles=require("./common/styles.js"),helpers=require("./common/helpers.js"),Button=require("../../../button/components/Button.js");const ProductViewMore=({style:e,styles:t,setting:s,advanced:r,builderProps:u,builderAttrs:o,children:n})=>jsxRuntime.jsx("div",{children:jsxRuntime.jsx(Button.default,{styles:t,advanced:r,builderProps:u,builderAttrs:o,setting:{...helpers.getButtonSettings(s)},style:{...styles.getButtonStyle(e,t)},children:n})});exports.default=ProductViewMore;