@gem-sdk/components 17.0.0-dev.28 → 17.0.0-staging.5

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 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" %}'))}
+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" %}'))}
           <div
             class="${j}"
             data-test="{{ backgroundType }}: {{ color }}"
-            style="{{ backgroundType }}: {{ color }}; ${A()}"></div>
+            style="{{ backgroundType }}: {{ color }}; ${U()}"></div>
         `)}
-      `,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`
+      `,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`
       <div
-        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>'," ")}
+        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>'," ")}
         <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=i(r({...y,available:!0})),F=c(p(y,"Liquid")),G=t(C(y)),H=t(f(y));return e`
+    `,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`
     <div
-      ${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};
+      ${G}
+      class="${F}"
+      style="${n("selectedValue == value",s({...H,...V}),s({...I,...B}))}">
+      ${E()}
+    </div>`};export{BaseVariant 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 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};
+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};

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 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`
+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`
     {% assign colorsString = null %}
     {% assign colors = null %}
     {% for label in labels %}
@@ -9,5 +9,5 @@ import{template as o}from"@gem-sdk/core";import l from"../base/base.liquid.js";i
     {% if colorsString != null %}
       {% assign colors = colorsString | split: '${i}' %}
     {% endif %}
-    ${l({...t,typeOfOption:"color",optionRounded:r})}
-  `;export{s as default};
+    ${r({...t,typeOfOption:"color",optionRounded:l})}
+  `;export{ColorVariant 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 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};
+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};

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 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};
+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};

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

@@ -1,2 +1,2 @@
 'use client';
-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};
+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};

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 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};
+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};

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

@@ -1,19 +1,19 @@
-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}
+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}
         </option>`))}     
     {%- endfor -%}
-  `},p=`
+  `},composeSelectOptionAttrs=`
   option-data="{{option.name | escape}}"
   option-value="{{value | escape}}"
   data-gp-option-value-id="{{value.id}}"
@@ -21,7 +21,7 @@ import{If as i,LiquidIf as e,LiquidFor as a,Liquid as t}from"@gem-sdk/system";im
   value="{{value | escape}}"
   class="option-value-wrapper"
   key="{{value | escape}}"
-`,l=(o,n)=>a("value in values",`${t(`{%- liquid
+`,renderDropdownOptions=(a,n)=>t("value in values",`${o(`{%- liquid
       assign option_disabled = true
       for variantItem in product.variants
         case option.position
@@ -40,4 +40,4 @@ import{If as i,LiquidIf as e,LiquidFor as a,Liquid as t}from"@gem-sdk/system";im
         endcase
       endfor
     -%}`)}
-    ${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};
+    ${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};

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 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};
+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};

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 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`
+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`
     <select
-      ${z}
-      class="${V}"
-      style="${v}"
+      ${B}
+      class="${v}"
+      style="${z}"
     >
       ${s(!k,n(c))}
-      ${s(a,L,p("disable"===D,k))}
-    </select>`};export{l as default};
+      ${s(a,E(),p(L,k))}
+    </select>`};export{DropdownVariant 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 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};
+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};

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

@@ -1,2 +1,2 @@
 'use client';
-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};
+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};

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 i=({isVariantOutStock:i,swatchValue:l,...r})=>e`
+import{template as e}from"@gem-sdk/core";import a from"../base/base.liquid.js";let ImageVariant=({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{i as default};
+  `;export{ImageVariant 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 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};
+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};

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

@@ -1,4 +1,4 @@
-import{template as e}from"@gem-sdk/core";import a from"../base/base.liquid.js";let i=({isVariantOutStock:i,swatchValue:r,...n})=>e`
+import{template as e}from"@gem-sdk/core";import a from"../base/base.liquid.js";let ImageShopifyVariant=({isVariantOutStock:i,swatchValue:r,...n})=>e`
       {% assign imageUrl = null %}
       {% for variant in variants %}
         {% assign valueIncludesSelectedOption = false %}
@@ -18,4 +18,4 @@ import{template as e}from"@gem-sdk/core";import a from"../base/base.liquid.js";l
         {% endif %}
       {% endfor %}
       ${a({...n,typeOfOption:"image_shopify"})}
-  `;export{i as default};
+  `;export{ImageShopifyVariant as default};

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

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e}from"react/jsx-runtime";import{makeStyleResponsive as t,makeWidth as a,composeTypographyClassName as r,composeTypographyStyle as i,getGlobalColorStateStyle as c,makeStyle as o,getSingleColorVariable as s,cls as p,getGlobalColorStateClass as l,getGlobalColorClass as n,handleConvertBorderColor as g,handleConvertBorderWidth as v,handleConvertBorderStyle as b,getStyleShadowState as d,getStyleShadow as m,composeRadius as x,getRadiusStyleActiveState as u,handleConvertClassColor as f}from"@gem-sdk/core";import{useMemo as h}from"react";let w=({value:w,isVariantOutStock:y,checked:j,swatchAutoWidth:N,swatchWidth:k,swatchHeight:A,optionTransform:E,optionTypography:F,optionBgColor:L,optionTextColor:R,optionBorder:S,optionRounded:T,optionHasShadow:V,optionShadow:q,optionTypo:z})=>{let B=t("w",a(k,N)),C=h(()=>({...T,active:{...T?.active||{},radiusType:"custom"}}),[T]),D=r(z,F),G=i(z,F);return e("div",{className:p(j?n("bg",L?.active):l("bg",L),f(S),D,"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":y}),style:{...j?{}:c("bg",L),...j?o({bg:s(L?.active),bs:S?.active?.border,bw:S?.active?.width,bc:s(S?.active?.color)}):{},...o({tt:E}),...G,...t("h",A),...B,...j?u(C):x(T),...j?m({value:q?.active,state:"active",styleAppliedFor:"box-shadow",isEnableShadow:V?.active},!0):d(q,"box-shadow",V),...j?{}:b(S),...j?{}:v(S),...j?{}:g(S)},children:e("span",{className:p("gp-flex gp-items-center gp-px-[16px]",j?n("text",R?.active):l("text",R)),style:{...j?o({c:s(R?.active)}):c("c",R)},children:w?.label})})};export{w as default};
+import{jsx as e}from"react/jsx-runtime";import{makeStyleResponsive as t,makeWidth as a,composeTypographyClassName as i,composeTypographyStyle as r,cls as c,getGlobalColorStateClass as o,getGlobalColorClass as s,handleConvertClassColor as l,getGlobalColorStateStyle as p,makeStyle as n,composeRadius as g,getRadiusStyleActiveState as v,getStyleShadowState as b,getStyleShadow as d,handleConvertBorderStyle as m,handleConvertBorderWidth as x,handleConvertBorderColor as u,getSingleColorVariable as f}from"@gem-sdk/core";import{useMemo as h}from"react";let RectangleListVariant=({value:w,isVariantOutStock:y,checked:j,swatchAutoWidth:L,swatchWidth:N,swatchHeight:R,optionTransform:V,optionTypography:k,optionBgColor:A,optionTextColor:E,optionBorder:F,optionRounded:S,optionHasShadow:T,optionShadow:q,optionTypo:z})=>{let B=()=>n({bg:f(A?.active),bs:F?.active?.border,bw:F?.active?.width,bc:f(F?.active?.color)}),C=t("w",a(N,L)),D=h(()=>({...S,active:{...S?.active||{},radiusType:"custom"}}),[S]),G=i(z,k),H=r(z,k);return e("div",{className:c(j?s("bg",A?.active):o("bg",A),l(F),G,"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":y}),style:{...j?{}:p("bg",A),...j?B():{},...n({tt:V}),...H,...t("h",R),...C,...j?v(D):g(S),...j?d({value:q?.active,state:"active",styleAppliedFor:"box-shadow",isEnableShadow:T?.active},!0):b(q,"box-shadow",T),...j?{}:m(F),...j?{}:x(F),...j?{}:u(F)},children:e("span",{className:c("gp-flex gp-items-center gp-px-[16px]",j?s("text",E?.active):o("text",E)),style:{...j?n({c:f(E?.active)}):p("c",E)},children:w?.label})})};export{RectangleListVariant as default};

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

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

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

@@ -1,4 +1,18 @@
-import{template as a}from"@gem-sdk/core";import t from"../base/base.liquid.js";import i from"../color/color.liquid.js";import e from"../image/Image.liquid.js";import s from"../image-shopify/ImageShopify.liquid.js";import{createClass as o,createStyle as l,createAttr as n,Liquid as d,If as p,LiquidIf as r}from"@gem-sdk/system";import{getVariantItemLabelClass as c,getTooltipClass as m,getTooltipSvgClass as h,getVariantOptionClass as u}from"../../common/variants/classes.js";import{getLabelVariantStyle as v}from"../../common/variants/styles.js";import{getVariantOptionAttr as g}from"../../common/variants/attrs.js";let f=f=>{let{name:w,variantKey:$,value:b,id:k}=f,y="disable"===f.soldOutStyle,x=o(c({...f,available:!0})),V=o(m()),I=o(h()),_=o(u()),j=l(v()),S=n(g(f,"Liquid"));return a`
+import{template as a}from"@gem-sdk/core";import t from"../base/base.liquid.js";import i from"../color/color.liquid.js";import e from"../image/Image.liquid.js";import s from"../image-shopify/ImageShopify.liquid.js";import{createClass as o,createStyle as l,createAttr as n,Liquid as d,If as p,LiquidIf as r}from"@gem-sdk/system";import{getVariantItemLabelClass as c,getTooltipClass as m,getTooltipSvgClass as h,getVariantOptionClass as u}from"../../common/variants/classes.js";import{getLabelVariantStyle as v}from"../../common/variants/styles.js";import{getVariantOptionAttr as g}from"../../common/variants/attrs.js";let VariantItem=f=>{let{name:w,variantKey:$,value:b,id:k}=f,y="disable"===f.soldOutStyle,V=()=>a`
+    {% case type %}
+      {% when "rectangle_list" %}
+      ${t({...f,isVariantOutStock:y,swatchValue:f.value,value:b,swatchHeight:{desktop:"45px"},swatchWidth:{desktop:""}})}
+      {% when "color" %}
+      ${i({...f,isVariantOutStock:y,swatchValue:f.value,value:b,swatchHeight:{desktop:"45px"},swatchWidth:{desktop:"45px"}})}
+      {% when "image_shopify" %}
+      ${s({...f,isVariantOutStock:y,swatchValue:f.value,value:b,swatchHeight:{desktop:"64px"},swatchWidth:{desktop:"64px"}})}
+      {% when "image" %}
+      ${e({...f,isVariantOutStock:y,swatchValue:f.value,value:b,swatchHeight:{desktop:"64px"},swatchWidth:{desktop:"64px"}})}
+      {% else %}
+    {% endcase %}
+    `,x=()=>a`
+    ${t({...f,isVariantOutStock:y,swatchValue:f.value,value:b})}
+    `,I=o(c({...f,available:!0})),_=o(m()),j=o(h()),S=o(u()),q=l(v()),O=n(g(f,"Liquid"));return a`
     ${d(`{%- liquid
       assign option_disabled = true
       for variantItem in product.variants
@@ -22,12 +36,12 @@ import{template as a}from"@gem-sdk/core";import t from"../base/base.liquid.js";i
     <label
       id="${k}"
       for="{{product.id}}-${f.uid}-${$}"
-      class="${x}"
-      style="${j}"
+      class="${I}"
+      style="${q}"
     >
-      <div class="${V}">
+      <div class="${_}">
         <p class="gp-text-[#F9F9F9]">${b?.label}</p>
-        <svg class="${I}" width="8" height="4" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg class="${j}" 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>
@@ -41,22 +55,8 @@ import{template as a}from"@gem-sdk/core";import t from"../base/base.liquid.js";i
       />
       <span class="gp-sr-only">${b?.label}</span>
       <div
-        ${S}
-        class="${_} ${r("option_disabled == true",`${p(y,"gp-opacity-20"," ")}`)}">
-        ${f.isRenderDefault?a`
-    ${t({...f,isVariantOutStock:y,swatchValue:f.value,value:b})}
-    `:a`
-    {% case type %}
-      {% when "rectangle_list" %}
-      ${t({...f,isVariantOutStock:y,swatchValue:f.value,value:b,swatchHeight:{desktop:"45px"},swatchWidth:{desktop:""}})}
-      {% when "color" %}
-      ${i({...f,isVariantOutStock:y,swatchValue:f.value,value:b,swatchHeight:{desktop:"45px"},swatchWidth:{desktop:"45px"}})}
-      {% when "image_shopify" %}
-      ${s({...f,isVariantOutStock:y,swatchValue:f.value,value:b,swatchHeight:{desktop:"64px"},swatchWidth:{desktop:"64px"}})}
-      {% when "image" %}
-      ${e({...f,isVariantOutStock:y,swatchValue:f.value,value:b,swatchHeight:{desktop:"64px"},swatchWidth:{desktop:"64px"}})}
-      {% else %}
-    {% endcase %}
-    `}
+        ${O}
+        class="${S} ${r("option_disabled == true",`${p(y,"gp-opacity-20"," ")}`)}">
+        ${f.isRenderDefault?x():V()}
       </div>
-    </label>`};export{f as default};
+    </label>`};export{VariantItem as default};

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

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

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

@@ -1 +1 @@
-import{useInteraction as e}from"@gem-sdk/core";let t=t=>{let{element:n,uid:o}=t,{trigger:r}=e(),d=(e,t)=>{n.current&&(r({event:"gp:rollback:item-selected",selector:`[data-id="${o}"]`,element:n.current}),r({event:"gp:item-selected",selector:`[data-id="${o}"]`,data:{selectedOptions:e,inStock:t},element:n.current}))};return{dispatchInteractionChangeOptions:d,dispatchInteractionChangeOptionsInit:(e,t)=>{let n=()=>{d(e,t),window.removeEventListener("gp:flow-actions-loaded",n)};window.interactionLoaded?d(e,t):window.addEventListener("gp:flow-actions-loaded",n)}}};export{t as useVariantInteraction};
+import{useInteraction as e}from"@gem-sdk/core";let useVariantInteraction=t=>{let{element:n,uid:r}=t,{trigger:o}=e(),a=(e,t)=>{n.current&&(o({event:"gp:rollback:item-selected",selector:`[data-id="${r}"]`,element:n.current}),o({event:"gp:item-selected",selector:`[data-id="${r}"]`,data:{selectedOptions:e,inStock:t},element:n.current}))},d=(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:d}};export{useVariantInteraction};

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

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

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

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

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

@@ -1,4 +1,4 @@
-import{template as e}from"@gem-sdk/core";import t from"../../../text/components/Text.liquid.js";let o=({setting:o,styles:d,advanced:r,builderProps:n})=>{let l=o?.label&&o.label.trim().length>0?`${o.label}`:"";return e`
+import{template as e}from"@gem-sdk/core";import t from"../../../text/components/Text.liquid.js";let ProductVendor=({setting:o,styles:d,advanced:r,builderProps:n})=>{let l=o?.label&&o.label.trim().length>0?`${o.label}`:"";return e`
     {%- unless product -%}
       <p>Product not found</p>
     {%- else -%}
@@ -11,4 +11,4 @@ import{template as e}from"@gem-sdk/core";import t from"../../../text/components/
         ${t({styles:d,setting:{...o,text:`${l} {{ product.vendor }}`,excludeFlex:!0,isForceValue:!0},advanced:r,builderProps:n})}
       `}
     {%- endunless -%}
-  `};export{o as default};
+  `};export{ProductVendor as default};

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

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as t}from"react/jsx-runtime";import{getButtonStyle as o}from"./common/styles.js";import{getButtonSettings as r}from"./common/helpers.js";import e from"../../../button/components/Button.js";let s=({style:s,styles:m,setting:i,advanced:n,builderProps:l,builderAttrs:d,children:c})=>t("div",{children:t(e,{styles:m,advanced:n,builderProps:l,builderAttrs:d,setting:{...r(i)},style:{...o(s,m)},children:c})});export{s as default};
+import{jsx as t}from"react/jsx-runtime";import{getButtonStyle as o}from"./common/styles.js";import{getButtonSettings as r}from"./common/helpers.js";import e from"../../../button/components/Button.js";let ProductViewMore=({style:s,styles:m,setting:i,advanced:n,builderProps:d,builderAttrs:l,children:c})=>t("div",{children:t(e,{styles:m,advanced:n,builderProps:d,builderAttrs:l,setting:{...r(i)},style:{...o(s,m)},children:c})});export{ProductViewMore as default};

package/dist/esm/product/components/product-view-more/ProductViewMore.liquid.js

@@ -1,6 +1,6 @@
-import{If as e}from"@gem-sdk/system";import{getButtonStyle as r}from"./common/styles.js";import{getSettingPreloadData as s}from"../../../helpers.js";import t from"../../../button/components/Button.liquid.js";import{isLocalEnv as o,baseAssetURL as i,template as m}from"@gem-sdk/core";import{getButtonLiquidSettings as p,getButtonSettings as d}from"./common/helpers.js";import{ProductViewMore as l}from"../../settings/product-view-more/configs/translate.js";let c=({style:c,styles:a,setting:n,advanced:f,builderProps:u,builderAttrs:g,pageContext:v})=>m`
+import{If as e}from"@gem-sdk/system";import{getButtonStyle as r}from"./common/styles.js";import{getSettingPreloadData as s}from"../../../helpers.js";import t from"../../../button/components/Button.liquid.js";import{template as o,isLocalEnv as i,baseAssetURL as m}from"@gem-sdk/core";import{getButtonSettings as p,getButtonLiquidSettings as d}from"./common/helpers.js";import{ProductViewMore as c}from"../../settings/product-view-more/configs/translate.js";let ProductViewMore=({style:l,styles:a,setting:n,advanced:u,builderProps:f,builderAttrs:g,pageContext:v})=>o`
     <gp-product-view-more>
-      ${t({translateSetting:l?.label?.id,styles:a,advanced:f,builderProps:u,builderAttrs:g,setting:{...d(n),...p(n,v??{})},style:{...r(c,a)},pageContext:v,className:"btn-view-more"})}
-      ${e(o,`<script ${s('class="gps-link" delay',"src")}="{{ 'gp-product-view-more-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${s('class="gps-link" delay',"src")}="${i}/assets-v2/gp-product-view-more-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+      ${t({translateSetting:c?.label?.id,styles:a,advanced:u,builderProps:f,builderAttrs:g,setting:{...p(n),...d(n,v??{})},style:{...r(l,a)},pageContext:v,className:"btn-view-more"})}
+      ${e(i,`<script ${s('class="gps-link" delay',"src")}="{{ 'gp-product-view-more-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${s('class="gps-link" delay',"src")}="${m}/assets-v2/gp-product-view-more-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
     </gp-product-view-more>
-  `;export{c as default};
+  `;export{ProductViewMore as default};

package/dist/esm/product/components/product-view-more/common/helpers.js

@@ -1 +1 @@
-let t=t=>{let{label:e,iconSvg:l,iconAlign:n,iconVisible:i,shouldClearSpace:o,enableHoverEffect:r}=t??{};return{label:e,iconSvg:l,iconAlign:n,iconVisible:i,shouldClearSpace:o,htmlType:"submit",enableHoverEffect:r}},e=(t,e)=>{let{redirectNewTab:l}=t??{},n=e?.hasCollectionHandle?"{% if collection %}{{ collection.url }}/products/{{ product.handle }}{% else %}{{ product.url }}{% endif %}":"{{ product.url }}";return{btnLink:{link:n,target:l?"_blank":"_self"},enableBtnLink:!0}};export{e as getButtonLiquidSettings,t as getButtonSettings};
+let getButtonSettings=t=>{let{label:e,iconSvg:n,iconAlign:l,iconVisible:i,shouldClearSpace:u,enableHoverEffect:o}=t??{};return{label:e,iconSvg:n,iconAlign:l,iconVisible:i,shouldClearSpace:u,htmlType:"submit",enableHoverEffect:o}},getButtonLiquidSettings=(t,e)=>{let{redirectNewTab:n}=t??{},l=e?.hasCollectionHandle?"{% if collection %}{{ collection.url }}/products/{{ product.handle }}{% else %}{{ product.url }}{% endif %}":"{{ product.url }}";return{btnLink:{link:l,target:n?"_blank":"_self"},enableBtnLink:!0}};export{getButtonLiquidSettings,getButtonSettings};

package/dist/esm/product/components/product-view-more/common/styles.js

@@ -1 +1 @@
-import{makeStyleResponsive as t}from"@gem-sdk/core";let e=(e,o)=>({...e,...t("ta",o?.align)});export{e as getButtonStyle};
+import{makeStyleResponsive as t}from"@gem-sdk/core";let getButtonStyle=(e,o)=>({...e,...t("ta",o?.align)});export{getButtonStyle};

package/dist/esm/product/components/product-wrap/Product.js

@@ -1 +1 @@
-import{jsx as r,Fragment as o,jsxs as t}from"react/jsx-runtime";import{isEmptyChildren as e,ProductProvider as i}from"@gem-sdk/core";import d from"../../../grid/components/ChildrenDroppable.js";import m from"../../../common/components/Loading.js";import"react";import s from"../../../grid/components/row/Row.js";import{If as c}from"@gem-sdk/system";import n from"next/dynamic";import{useProductSetting as l}from"./hook/useProductSetting.js";import{getData as p}from"./common/helpers.js";let u=n(()=>import("../ProductNotFound.js"),{loading:m}),a=n=>{let{builderProps:a,children:h,setting:f,style:g,builderAttrs:j}=n,{isAuto:P}=f??{},{isLoading:b,isProductPage:y,isProductNotFound:k,showProductNotFound:x,errorLoadProduct:A,product:v,isEditor:w,productProviderData:C,setShowProductNotFound:D}=l(n),{rowSetting:S,rowStyles:E}=p(n);return y&&P?r(o,{children:e(h)?r(d,{}):h}):r(o,{children:c(!k,r(o,{children:b?r(m,{}):r(o,{children:A?t("div",{children:["Error: ",A?.message]}):v?r(i,{...C,children:r(s,{builderProps:a,builderAttrs:j,style:g,styles:E,setting:S,customAttrs:w?{"data-product-id":v?.baseID?.replace("gid://shopify/Product/","")??""}:void 0,children:e(h)?r(d,{}):h})}):null})}),r(o,{children:c(x,r(u,{builderAttrs:j,productSrc:"PickProduct",onClose:()=>D(!1),children:h}))}))})};export{a as default};
+import{jsx as r,Fragment as o,jsxs as t}from"react/jsx-runtime";import{isEmptyChildren as e,ProductProvider as d}from"@gem-sdk/core";import i from"../../../grid/components/ChildrenDroppable.js";import m from"../../../common/components/Loading.js";import"react";import c from"../../../grid/components/row/Row.js";import{If as n}from"@gem-sdk/system";import s from"next/dynamic";import{useProductSetting as l}from"./hook/useProductSetting.js";import{getData as p}from"./common/helpers.js";let ProductNotFound=s(()=>import("../ProductNotFound.js"),{loading:m}),Product=s=>{let{builderProps:u,children:a,setting:h,style:f,builderAttrs:g}=s,{isAuto:P}=h??{},{isLoading:j,isProductPage:b,isProductNotFound:y,showProductNotFound:k,errorLoadProduct:x,product:A,isEditor:F,productProviderData:N,setShowProductNotFound:v}=l(s),{rowSetting:w,rowStyles:C}=p(s),D=!y;if(b&&P)return r(o,{children:e(a)?r(i,{}):a});let S=()=>r(o,{children:n(k,r(ProductNotFound,{builderAttrs:g,productSrc:"PickProduct",onClose:()=>v(!1),children:a}))}),E=()=>r(o,{children:j?r(m,{}):r(o,{children:x?t("div",{children:["Error: ",x?.message]}):A?r(d,{...N,children:r(c,{builderProps:u,builderAttrs:g,style:f,styles:C,setting:w,customAttrs:F?{"data-product-id":A?.baseID?.replace("gid://shopify/Product/","")??""}:void 0,children:e(a)?r(i,{}):a})}):null})});return r(o,{children:n(D,E(),S())})};export{Product as default};

package/dist/esm/product/components/product-wrap/Product.liquid.js

@@ -1,23 +1,4 @@
-import{RenderIf as t,isLocalEnv as e,baseAssetURL as i,template as r}from"@gem-sdk/core";import a from"../../../grid/components/row/Row.liquid.js";import{LiquidIf as d,If as o}from"@gem-sdk/system";import{getSettingPreloadData as n,getStaticLocale as s}from"../../../helpers.js";import{getData as c,DYNAMIC_PRODUCT_STATUS as p,STATIC_PRODUCT_STATUS as l,PRODUCT_ID_LATEST as u}from"./common/helpers.js";let f=f=>{let{children:m,setting:g,style:y,builderProps:v,rawChildren:_,advanced:$}=f,{isSyncProduct:S,productSetting:I}=g??{},b=I?.hasPreSelected??!1,{rowSetting:j,rowStyles:h,formatVariantId:q,formatProductId:P,productStatus:V,preSelectedOptionIds:k,productHandle:w,advancedStyle:E}=c(f);return r`
-    ${r`
-      {%- assign gpBkProduct = product -%}
-      ${o(V==p,r`
-      {%- liquid
-        if request.page_type != 'product'
-          assign product = all_products['${w}']
-          assign productId = '${P}' | times: 1
-          if product == empty or product == null
-            paginate collections.all.products by 100000
-              for item in collections.all.products
-                if item.id == productId
-                  assign product = item
-                endif
-              endfor
-            endpaginate
-          endif
-        endif
-      -%}
-    `,r`
+import{template as t,RenderIf as e,isLocalEnv as r,baseAssetURL as i}from"@gem-sdk/core";import a from"../../../grid/components/row/Row.liquid.js";import{LiquidIf as d,If as o}from"@gem-sdk/system";import{getSettingPreloadData as n,getStaticLocale as s}from"../../../helpers.js";import{getData as c,DYNAMIC_PRODUCT_STATUS as p,STATIC_PRODUCT_STATUS as l,PRODUCT_ID_LATEST as u}from"./common/helpers.js";let Product=f=>{let{children:m,setting:g,style:y,builderProps:v,rawChildren:_,advanced:$}=f,{isSyncProduct:S,productSetting:I}=g??{},b=I?.hasPreSelected??!1,{rowSetting:j,rowStyles:h,formatVariantId:q,formatProductId:P,productStatus:V,preSelectedOptionIds:k,productHandle:w,advancedStyle:E}=c(f),x=()=>t`
       {%- liquid
         if request.page_type == 'product'
           if '${V}' == '${l}'
@@ -59,10 +40,26 @@ import{RenderIf as t,isLocalEnv as e,baseAssetURL as i,template as r}from"@gem-s
           endif
         endif
       -%}
-    `)}
-    `}
-    ${d("product != empty and product != null",r`
-      ${r`
+    `,A=()=>t`
+      {%- liquid
+        if request.page_type != 'product'
+          assign product = all_products['${w}']
+          assign productId = '${P}' | times: 1
+          if product == empty or product == null
+            paginate collections.all.products by 100000
+              for item in collections.all.products
+                if item.id == productId
+                  assign product = item
+                endif
+              endfor
+            endpaginate
+          endif
+        endif
+      -%}
+    `,B=()=>t`
+      {%- assign gpBkProduct = product -%}
+      ${o(V==p,A(),x())}
+    `,G=()=>t`
       {%- assign initVariantId = ${q} -%}
       {%- assign product_form_id = 'product-form-' | append: "${v?.uid}" -%}
       ${q?"{%- assign variant = product.variants | where: 'id', initVariantId | first -%}":"{%- assign variant = product.selected_or_first_available_variant -%}"}
@@ -73,7 +70,10 @@ import{RenderIf as t,isLocalEnv as e,baseAssetURL as i,template as r}from"@gem-s
       {%-if variant == empty or variant == null -%}
         {%- assign variant = product.selected_or_first_available_variant -%}
       {%- endif -%}
-    `}
+    `,H=()=>t`
+      <div class="gp-text-center">${s("Product","product_not_found")}</div>
+    `,O=()=>t`
+      ${G()}
       <gp-product
         data-uid="${v?.uid}"
         data-id="${v?.uid}"
@@ -92,8 +92,8 @@ import{RenderIf as t,isLocalEnv as e,baseAssetURL as i,template as r}from"@gem-s
         </product-form>
       </gp-product>
       {%- assign product = gpBkProduct -%}
-    `,r`
-      <div class="gp-text-center">${s("Product","product_not_found")}</div>
-    `)}
-    ${t(e,`<script ${n('class="gps-link" delay',"src")}="{{ 'gp-product-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${n('class="gps-link" delay',"src")}="${i}/assets-v2/gp-product-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-  `};export{f as default};
+    `;return t`
+    ${B()}
+    ${d("product != empty and product != null",O(),H())}
+    ${e(r,`<script ${n('class="gps-link" delay',"src")}="{{ 'gp-product-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${n('class="gps-link" delay',"src")}="${i}/assets-v2/gp-product-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+  `};export{Product as default};

package/dist/esm/product/components/product-wrap/common/helpers.js

@@ -1 +1 @@
-import{composeAdvanceStyle as t}from"@gem-sdk/core";let e="latest",a="gid://shopify/Product/",r="gid://shopify/ProductVariant/",o="gid://shopify/ProductOptionValue/",i="static",T="dynamic",d=T=>{let{setting:d,advanced:_,styles:p}=T,{productSetting:I,quantity:c,readOnly:D,isAuto:P,isSyncProduct:s,...l}=d??{},{...u}=p??{},{pos:O,top:R}=_??{},C=t({pos:O,top:R}),U=I?.productHandle??"",n=I?.initialVariantBaseId,A=n?.replace(r,"")??"",S=I?.productId?.replace(a,"").toLowerCase()??e,g=I?.productStatus??i,m=I?.selectedOptions?.map(t=>t?.valueBaseID?.replace(o,""));return{formatVariantId:A,formatProductId:S,productStatus:g,preSelectedOptionIds:m,productHandle:U,advancedStyle:C,rowStyles:u,rowSetting:l}};export{T as DYNAMIC_PRODUCT_STATUS,a as PREFIX_PRODUCT_ID,o as PREFIX_PRODUCT_OPTION_VALUE_ID,r as PREFIX_PRODUCT_VARIANT_ID,e as PRODUCT_ID_LATEST,i as STATIC_PRODUCT_STATUS,d as getData};
+import{composeAdvanceStyle as T}from"@gem-sdk/core";let PRODUCT_ID_LATEST="latest",PREFIX_PRODUCT_ID="gid://shopify/Product/",PREFIX_PRODUCT_VARIANT_ID="gid://shopify/ProductVariant/",PREFIX_PRODUCT_OPTION_VALUE_ID="gid://shopify/ProductOptionValue/",STATIC_PRODUCT_STATUS="static",DYNAMIC_PRODUCT_STATUS="dynamic",getData=_=>{let{setting:I,advanced:D,styles:P}=_,{productSetting:R,quantity:t,readOnly:e,isAuto:O,isSyncProduct:U,...a}=I??{},{...C}=P??{},{pos:A,top:r}=D??{},o=T({pos:A,top:r}),S=R?.productHandle??"",i=R?.initialVariantBaseId,d=i?.replace(PREFIX_PRODUCT_VARIANT_ID,"")??"",E=R?.productId?.replace(PREFIX_PRODUCT_ID,"").toLowerCase()??PRODUCT_ID_LATEST,p=R?.productStatus??STATIC_PRODUCT_STATUS,c=R?.selectedOptions?.map(T=>T?.valueBaseID?.replace(PREFIX_PRODUCT_OPTION_VALUE_ID,""));return{formatVariantId:d,formatProductId:E,productStatus:p,preSelectedOptionIds:c,productHandle:S,advancedStyle:o,rowStyles:C,rowSetting:a}};export{DYNAMIC_PRODUCT_STATUS,PREFIX_PRODUCT_ID,PREFIX_PRODUCT_OPTION_VALUE_ID,PREFIX_PRODUCT_VARIANT_ID,PRODUCT_ID_LATEST,STATIC_PRODUCT_STATUS,getData};

package/dist/esm/product/components/product-wrap/hook/useProductSetting.js

@@ -1 +1 @@
-import{usePageType as t,usePageStore as r,useRenderMode as e}from"@gem-sdk/core";import{useState as d,useMemo as a}from"react";import i from"./useProductQuery.js";let o=o=>{let{setting:c}=o,{productSetting:u,quantity:s,readOnly:P,isSyncProduct:m}=c??{},l=t(),n=r(t=>t.dynamicProduct),{isEditMode:p}=e(),S=u?.productId??"latest",y=u?.productStatus=="dynamic"?{...u,...n}:u,f=y?.initialVariantId,g=y?.initialVariantBaseId,{productData:{data:h,isLoading:I,error:k}}=i({id:S}),[D,V]=d(!0),$=(k||!h&&!I)&&p,j=a(()=>({product:h,initialVariantId:f,initialVariantBaseId:g,quantity:s,readOnly:P,isSyncProduct:m,key:`uid-${h?.id}-${f??""}`,hasPreSelected:u?.hasPreSelected}),[g,f,m,h,u?.hasPreSelected,s,P]);return{forceProductSetting:y,isProductPage:"PRODUCT"===l,isProductNotFound:$,showProductNotFound:D,isLoading:I,product:h,errorLoadProduct:k,isEditor:p,productProviderData:j,setShowProductNotFound:V}};export{o as useProductSetting};
+import{usePageType as t,usePageStore as e,useRenderMode as r,hasPublicStoreFrontData as a,createStoreFrontFetcher as d,useProductQuery as i}from"@gem-sdk/core";import{useMemo as o,useState as c}from"react";let useProductSetting=u=>{let{setting:n}=u,{productSetting:l,quantity:s,readOnly:P,isSyncProduct:m}=n??{},S=t(),p=e(t=>t.dynamicProduct),g=e(t=>t.publicStoreFrontData),{isEditMode:h,isPreviewSharePageMode:y}=r(),I=l?.productId??"latest",f=l?.productStatus=="dynamic"?{...l,...p}:l,k=f?.initialVariantId,v=f?.initialVariantBaseId,D=o(()=>a(g)?d(g):void 0,[g]),O=h||y,{data:V,isLoading:$,error:b}=i(I,{revalidateOnMount:O},D),[x,B]=c(!0),C=(b||!V&&!$)&&h,E="PRODUCT"===S,F=o(()=>({product:V,initialVariantId:k,initialVariantBaseId:v,quantity:s,readOnly:P,isSyncProduct:m,key:`uid-${V?.id}-${k??""}`,hasPreSelected:l?.hasPreSelected}),[v,k,m,V,l?.hasPreSelected,s,P]);return{forceProductSetting:f,isProductPage:E,isProductNotFound:C,showProductNotFound:x,isLoading:$,product:V,errorLoadProduct:b,isEditor:h,productProviderData:F,setShowProductNotFound:B}};export{useProductSetting};

package/dist/esm/product/helpers/function.js

@@ -1 +1 @@
-let t=t=>{let e="";if(!t||"object"!=typeof t)return e;let r=Object.keys(t);return r.forEach(r=>{r in t&&(e+=`${r}: ${t[r]};`)}),e},e=(t,e)=>{if(!t||!e)return{};let r={};return["tablet","mobile","desktop"].forEach(s=>{r="horizontal"===t[s]?{...r,[`${"desktop"!==s?`${s}:`:""}gp-justify-start`]:"left"===e[s],[`${"desktop"!==s?`${s}:`:""}gp-justify-center`]:"center"===e[s],[`${"desktop"!==s?`${s}:`:""}gp-justify-end`]:"right"===e[s]}:{...r,[`${"desktop"!==s?`${s}:`:""}gp-items-end`]:"right"===e[s],[`${"desktop"!==s?`${s}:`:""}gp-items-start`]:"left"===e[s],[`${"desktop"!==s?`${s}:`:""}gp-items-center`]:"center"===e[s]}}),r};export{e as getAlignClasses,t as getStyleOfObject};
+let getStyleOfObject=t=>{let e=Object.keys(t),s="";return e.forEach(e=>{t[e]&&(s+=`${e}: ${t[e]};`)}),s},getAlignClasses=(t,e)=>{if(!t||!e)return{};let s=["tablet","mobile","desktop"],r={};return s.forEach(s=>{r="horizontal"===t[s]?{...r,[`${"desktop"!==s?`${s}:`:""}gp-justify-start`]:"left"===e[s],[`${"desktop"!==s?`${s}:`:""}gp-justify-center`]:"center"===e[s],[`${"desktop"!==s?`${s}:`:""}gp-justify-end`]:"right"===e[s]}:{...r,[`${"desktop"!==s?`${s}:`:""}gp-items-end`]:"right"===e[s],[`${"desktop"!==s?`${s}:`:""}gp-items-start`]:"left"===e[s],[`${"desktop"!==s?`${s}:`:""}gp-items-center`]:"center"===e[s]}}),r};export{getAlignClasses,getStyleOfObject};