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

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

@@ -1,4 +1,4 @@
-import{DEVICES as o,makeStyleResponsive as e}from"@gem-sdk/core";let t=o=>o||`<svg
+import{DEVICES as o,makeStyleResponsive as e}from"@gem-sdk/core";let getPlusIcon=o=>o||`<svg
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
@@ -6,7 +6,7 @@ import{DEVICES as o,makeStyleResponsive as e}from"@gem-sdk/core";let t=o=>o||`<s
     >
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"
       />
-    </svg>`,r=o=>o||`<svg
+    </svg>`,getMinusIcon=o=>o||`<svg
       xmlns="http://www.w3.org/2000/svg"
       className="gp-h-full gp-w-full"
       fill="none"
@@ -14,4 +14,4 @@ import{DEVICES as o,makeStyleResponsive as e}from"@gem-sdk/core";let t=o=>o||`<s
       stroke="currentColor"
       >
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
-      </svg>`,n=t=>t?(o.forEach(o=>{t?.[o]||(t[o]=t.desktop||void 0)}),e("w",t)):{};export{n as getIconWidth,r as getMinusIcon,t as getPlusIcon};
+      </svg>`,getIconWidth=t=>t?(o.forEach(o=>{t?.[o]||(t[o]=t.desktop||void 0)}),e("w",t)):{};export{getIconWidth,getMinusIcon,getPlusIcon};

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

@@ -1 +1 @@
-import{makeStyleResponsive as t,getResponsiveStyleShadowWithoutState as e,composeRadiusResponsive as r,composeBorderResponsive as o,getGlobalColorResponsiveStyle as n,composeTypographyStyle as l,getGlobalColorStateStyle as a,handleConvertBorderColor as b,handleConvertBorderWidth as i,handleConvertBorderStyle as p,getStyleShadow as s,makeStyle as d,filterHoverVariables as m,composeRadius as u,makeStyleState as h}from"@gem-sdk/core";let c=t=>Object.fromEntries(Object.entries(t).map(([t,e])=>[t,`${e}px`])),w=t=>{if(!t)return t;let e=t.split(" ").map(t=>t.trim());return 4===e.length?`${e[0]} ${e[3]} ${e[2]} ${e[1]}`:t},f=t=>{if(!t)return t;let e={...t},r=e.btlr,o=e.bblr,n=e.btrr,l=e.bbrr;return e.btrr=o,e.bbrr=r,e.btlr=l,e.bblr=n,e},y=t=>{if(!t)return t;let e={...t};return e.width&&(e.width=w(e.width)),e},g=(t,e)=>{if(!t||!e)return{};let r=c(t),o={...h("brw",r),...h("blw",r)};return o},j=t=>{if(!t)return{};let e={...t,normal:t?.normal??"transparent"},r={...a("brc",e),...a("blc",e)},o=Object.fromEntries(Object.entries(r).filter(([t,e])=>void 0!==e));return o},O=t=>{let{styles:e,setting:o}=t,{inputBackgroundColor:n,textColor:u,dividerColor:h,dividerStroke:c}=e??{},{enableHoverInput:w,hasButton:f}=o??{},y=l(e?.typo,e?.typography),O={...g(c,h),...j(h)},S={...a("bg",{...n,normal:n?.normal??"transparent"}),...a("c",{...u,hover:u?.hover??u?.normal}),...f?O:{}},x=e?.inputBorder,k={...p(x),...i(x),...b(x)},E={...f?{}:k,...f?{}:r(e?.shapeRounded),...d({}),...y,...S,...s({value:e?.typo?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:e?.typo?.custom?.hasShadowText})};return w?E:m(E)},S=({borderBtn:e,buttonWidth:r,buttonBackgroundColor:o,iconColor:n,corner:l,flipStyle:s,enableHoverButton:d})=>{let h=s?Object.fromEntries(Object.entries(e||{}).map(([t,e])=>[t,y(e)])):e,c=s?Object.fromEntries(Object.entries(l||{}).map(([t,e])=>[t,f(e)])):l,w={...t("w",r),...p(h),...i(h),...b(h),...a("bg",o),...a("c",n),...u(c)};return d?w:m(w)},x=({inputHeight:e,align:r})=>({...t("h",e),...t("jc",r)}),k=({backgroundColor:l,styles:a})=>{let b=a?.shapeShadow,i=e(b,"box-shadow",{desktop:b?.desktop??{},tablet:b?.tablet??b?.desktop??{},mobile:b?.mobile??b?.tablet??b?.desktop??{}});return{...n("bg",l),...t("maxw",a?.quantityWidth),...o(a?.shapeBorder),...r(a?.shapeRounded),...i}};export{S as getButtonStyle,x as getContainerStyles,O as getInputStyle,k as getWrapperStyles};
+import{composeTypographyStyle as t,getGlobalColorStateStyle as e,handleConvertBorderStyle as r,handleConvertBorderWidth as o,handleConvertBorderColor as l,composeRadiusResponsive as i,makeStyle as n,getStyleShadow as a,filterHoverVariables as d,makeStyleResponsive as p,composeRadius as b,getResponsiveStyleShadowWithoutState as s,getGlobalColorResponsiveStyle as u,composeBorderResponsive as h,makeStyleState as m}from"@gem-sdk/core";let addPxToValues=t=>Object.fromEntries(Object.entries(t).map(([t,e])=>[t,`${e}px`])),flipBorderWidth=t=>{if(!t)return t;let e=t.split(" ").map(t=>t.trim());return 4===e.length?`${e[0]} ${e[3]} ${e[2]} ${e[1]}`:t},flipCornerRadius=t=>{if(!t)return t;let e={...t},r=e.btlr,o=e.bblr,l=e.btrr,i=e.bbrr;return e.btrr=o,e.bbrr=r,e.btlr=i,e.bblr=l,e},flipBorderObject=t=>{if(!t)return t;let e={...t};return e.width&&(e.width=flipBorderWidth(e.width)),e},getDividerWidth=(t,e)=>{if(!t||!e)return{};let r=addPxToValues(t),o={...m("brw",r),...m("blw",r)};return o},getDividerColorStyle=t=>{if(!t)return{};let r={...t,normal:t?.normal??"transparent"},o={...e("brc",r),...e("blc",r)},l=Object.fromEntries(Object.entries(o).filter(([t,e])=>void 0!==e));return l},getInputStyle=p=>{let{styles:b,setting:s}=p,{inputBackgroundColor:u,textColor:h,dividerColor:m,dividerStroke:c}=b??{},{enableHoverInput:g,hasButton:f}=s??{},y=t(b?.typo,b?.typography),S={...getDividerWidth(c,m),...getDividerColorStyle(m)},w={...e("bg",{...u,normal:u?.normal??"transparent"}),...e("c",{...h,hover:h?.hover??h?.normal}),...f?S:{}},j=b?.inputBorder,O={...r(j),...o(j),...l(j)},x={...f?{}:O,...f?{}:i(b?.shapeRounded),...n({}),...y,...w,...a({value:b?.typo?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:b?.typo?.custom?.hasShadowText})};return g?x:d(x)},getButtonStyle=({borderBtn:t,buttonWidth:i,buttonBackgroundColor:n,iconColor:a,corner:s,flipStyle:u,enableHoverButton:h})=>{let m=u?Object.fromEntries(Object.entries(t||{}).map(([t,e])=>[t,flipBorderObject(e)])):t,c=u?Object.fromEntries(Object.entries(s||{}).map(([t,e])=>[t,flipCornerRadius(e)])):s,g={...p("w",i),...r(m),...o(m),...l(m),...e("bg",n),...e("c",a),...b(c)};return h?g:d(g)},getContainerStyles=({inputHeight:t,align:e})=>({...p("h",t),...p("jc",e)}),getWrapperStyles=({backgroundColor:t,styles:e})=>{let r=e?.shapeShadow,o=s(r,"box-shadow",{desktop:r?.desktop??{},tablet:r?.tablet??r?.desktop??{},mobile:r?.mobile??r?.tablet??r?.desktop??{}});return{...u("bg",t),...p("maxw",e?.quantityWidth),...h(e?.shapeBorder),...i(e?.shapeRounded),...o}};export{getButtonStyle,getContainerStyles,getInputStyle,getWrapperStyles};

package/dist/esm/product/components/product-quantity/hooks/useProductQuantity.js

@@ -1 +1 @@
-import{useQuantity as t,useCurrentVariantInStock as e,useProduct as n,useIsSyncProduct as r,useInteraction as a}from"@gem-sdk/core";import{useRef as o,useEffect as u}from"react";import{useTransition as i}from"../../product-variants/common/common.js";let c=c=>{let{setting:d={},advanced:l}=c,{updatePrice:m}=d,{quantity:p,setQuantity:s,setUpdatePrice:y,increment:g,decrement:q}=t(),v=e(),I=n(),f=r(),{trigger:k}=a(),w=o(null),h=d.defaultQtyValue||1;u(()=>{s(parseFloat(`${h}`))},[s,h]),u(()=>{y(m||!1)},[m,y]);let C=t=>{let e=t.detail,n=I?.id;f&&e&&n==e.productId&&p!=e.quantity&&($(e.quantity),s(e.quantity))};u(()=>{window.removeEventListener("set-product-quantity",C),window.addEventListener("set-product-quantity",C)}),i(t=>{t!==p&&$(p||0)},[p]);let $=t=>{k({event:"gp:rollback:quantity-change",selector:`[data-id="${l?.uid}"]`,element:w.current}),k({event:"gp:quantity-change",selector:`[data-id="${l?.uid}"]`,data:t,element:w.current})};return{isInStock:v,ref:w,onClickIncrement:()=>{v&&g()},onClickDecrement:()=>{v&&q()},onChangeInput:t=>{v&&s(parseInt(t.target.value,10))},onFocusInput:t=>{v||t.target.blur()}}};export{c as useProductQuantity};
+import{useQuantity as t,useCurrentVariantInStock as e,useProduct as r,useIsSyncProduct as a,useInteraction as n}from"@gem-sdk/core";import{useRef as u,useEffect as o}from"react";import{useTransition as i}from"../../product-variants/common/common.js";let useProductQuantity=d=>{let{setting:l={},advanced:c}=d,{updatePrice:m}=l,{quantity:s,setQuantity:p,setUpdatePrice:y,increment:g,decrement:q}=t(),v=e(),f=r(),w=a(),{trigger:Q}=n(),$=u(null),b=l.defaultQtyValue||1;o(()=>{p(parseFloat(`${b}`))},[p,b]),o(()=>{y(m||!1)},[m,y]);let h=t=>{let e=t.detail,r=f?.id;w&&e&&r==e.productId&&s!=e.quantity&&(k(e.quantity),p(e.quantity))};o(()=>{window.removeEventListener("set-product-quantity",h),window.addEventListener("set-product-quantity",h)}),i(t=>{t!==s&&k(s||0)},[s]);let k=t=>{Q({event:"gp:rollback:quantity-change",selector:`[data-id="${c?.uid}"]`,element:$.current}),Q({event:"gp:quantity-change",selector:`[data-id="${c?.uid}"]`,data:t,element:$.current})},E=()=>{v&&g()},I=()=>{v&&q()},L=t=>{v&&p(parseInt(t.target.value,10))},P=t=>{v||t.target.blur()};return{isInStock:v,ref:$,onClickIncrement:E,onClickDecrement:I,onChangeInput:L,onFocusInput:P}};export{useProductQuantity};

package/dist/esm/product/components/product-quick-view/ProductQuickView.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsxs as t,jsx as r}from"react/jsx-runtime";import{usePluginEnable as o,useProduct as e,useProductQuery as i,ProductProvider as l}from"@gem-sdk/core";import{useState as c}from"react";import p from"../../../grid/components/row/Row.js";import s from"../../../grid/components/col/Col.js";import"../../../modal/components/confirm.js";import n from"../../../modal/components/Modal.js";import a from"../product-button/ProductButton.js";import d from"../ProductImages.js";import m from"../product-price/ProductPrice.js";import u from"../product-quantity/ProductQuantity.js";import g from"../product-title/ProductTitle.js";import h from"../product-variants/ProductVariants.js";let y=()=>{let o=e(),{data:c,isValidating:n,error:y}=i(o?.id);return n?r("div",{children:t("svg",{className:"gp-mx-auto gp-my-20 gp-h-8 gp-w-8 gp-animate-spin gp-text-base",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[r("circle",{className:"gp-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),r("path",{className:"gp-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]})}):y?r("p",{className:"gp-py-20 gp-text-center gp-font-semibold",children:"Something went wrong"}):r(l,{product:c,children:t(p,{setting:{layout:{desktop:{cols:[6,6],display:"fill"},mobile:{cols:[12]}}},children:[r(s,{children:r(d,{})}),t(s,{children:[r(g,{setting:{htmlTag:"p"},styles:{typography:{type:"heading-3"}}}),t(p,{setting:{layout:{desktop:{cols:[6,6],display:"fit"}}},children:[r(s,{children:r(m,{setting:{priceType:"regular"},styles:{typography:{type:"subheading-2"}}})}),r(s,{children:r(m,{setting:{priceType:"compare"},styles:{typography:{type:"paragraph-2"}}})})]}),r(h,{}),r(u,{}),r(a,{})]})]})})},f=({label:e})=>{let[i,l]=c(!1),p=o();return p?.includes("quick-view")?t("div",{children:[r("div",{"aria-hidden":!0,role:"button","aria-label":"Quick view",onClick:()=>l(t=>!t),children:e}),r(n,{setting:{open:i},closeOnClickOutside:!0,onClose:()=>l(t=>!t),children:r(y,{})})]}):null};f.defaultProps={label:"Quick View"};export{f as default};
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import{usePluginEnable as r,useProduct as e,useProductQuery as i,ProductProvider as c}from"@gem-sdk/core";import{useState as l}from"react";import p from"../../../grid/components/row/Row.js";import n from"../../../grid/components/col/Col.js";import"../../../modal/components/confirm.js";import s from"../../../modal/components/Modal.js";import a from"../product-button/ProductButton.js";import d from"../ProductImages.js";import m from"../product-price/ProductPrice.js";import u from"../product-quantity/ProductQuantity.js";import g from"../product-title/ProductTitle.js";import h from"../product-variants/ProductVariants.js";let ModalContent=()=>{let r=e(),{data:l,isValidating:s,error:y}=i(r?.id);return s?o("div",{children:t("svg",{className:"gp-mx-auto gp-my-20 gp-h-8 gp-w-8 gp-animate-spin gp-text-base",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[o("circle",{className:"gp-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o("path",{className:"gp-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]})}):y?o("p",{className:"gp-py-20 gp-text-center gp-font-semibold",children:"Something went wrong"}):o(c,{product:l,children:t(p,{setting:{layout:{desktop:{cols:[6,6],display:"fill"},mobile:{cols:[12]}}},children:[o(n,{children:o(d,{})}),t(n,{children:[o(g,{setting:{htmlTag:"p"},styles:{typography:{type:"heading-3"}}}),t(p,{setting:{layout:{desktop:{cols:[6,6],display:"fit"}}},children:[o(n,{children:o(m,{setting:{priceType:"regular"},styles:{typography:{type:"subheading-2"}}})}),o(n,{children:o(m,{setting:{priceType:"compare"},styles:{typography:{type:"paragraph-2"}}})})]}),o(h,{}),o(u,{}),o(a,{})]})]})})},ProductQuickView=({label:e})=>{let[i,c]=l(!1),p=r();return p?.includes("quick-view")?t("div",{children:[o("div",{"aria-hidden":!0,role:"button","aria-label":"Quick view",onClick:()=>c(t=>!t),children:e}),o(s,{setting:{open:i},closeOnClickOutside:!0,onClose:()=>c(t=>!t),children:o(ModalContent,{})})]}):null};ProductQuickView.defaultProps={label:"Quick View"};export{ProductQuickView as default};

package/dist/esm/product/components/product-quick-view/QuickView.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as r}from"react/jsx-runtime";import{usePluginEnable as e}from"@gem-sdk/core";import i from"next/dynamic";let t=i(()=>import("./ProductQuickView.js"),{ssr:!1}),m=()=>{let i=e();return i?.includes("quick-view")?r(t,{}):null};export{m as default};
+import{jsx as i}from"react/jsx-runtime";import{usePluginEnable as e}from"@gem-sdk/core";import r from"next/dynamic";let ProductQuickView=r(()=>import("./ProductQuickView.js"),{ssr:!1}),QuickView=()=>{let r=e();return r?.includes("quick-view")?i(ProductQuickView,{}):null};export{QuickView as default};

package/dist/esm/product/components/product-sku/Sku.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e}from"react/jsx-runtime";import{useCurrentVariant as t,useRenderMode as r}from"@gem-sdk/core";import l from"../../../text/components/Text.js";import{If as s}from"@gem-sdk/system";let o=({setting:o,builderProps:i,styles:d})=>{let m=t(),{isPreviewSharePageMode:p}=r();d?.disableHoverColor&&delete d.underlineLink;let n=o?.label&&o.label.trim().length?`${o.label} ${m?.sku??""}`:`${m?.sku??""}`,u=p?"":e("p",{className:"gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500",children:"This product does not have a SKU 123"});return e("div",{id:`sku-${i?.uid}`,children:s(!m?.sku,u,e(l,{builderProps:i,styles:d,setting:{...o,text:n,excludeFlex:!0}}))})};export{o as default};
+import{jsx as e}from"react/jsx-runtime";import{useCurrentVariant as t,useRenderMode as r}from"@gem-sdk/core";import l from"../../../text/components/Text.js";import{If as o}from"@gem-sdk/system";let ProductSku=({setting:s,builderProps:d,styles:i})=>{let m=t(),{isPreviewSharePageMode:u}=r();i?.disableHoverColor&&delete i.underlineLink;let p=s?.label&&s.label.trim().length?`${s.label} ${m?.sku??""}`:`${m?.sku??""}`,n=u?"":e("p",{className:"gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500",children:"This product does not have a SKU 123"});return e("div",{id:`sku-${d?.uid}`,children:o(!m?.sku,n,e(l,{builderProps:d,styles:i,setting:{...s,text:p,excludeFlex:!0}}))})};export{ProductSku as default};

package/dist/esm/product/components/product-sku/Sku.liquid.js

@@ -1,6 +1,6 @@
-import{template as e,baseAssetURL as t,isLocalEnv as r}from"@gem-sdk/core";import{getSettingPreloadData as s}from"../../../helpers.js";import a from"../../../text/components/Text.liquid.js";import{LiquidUnless as l,LiquidIf as o,If as u}from"@gem-sdk/system";let i=({setting:i,styles:p,advanced:c,builderProps:d})=>{let n=p?.typo?.attrs?.transform==="capitalize",m=i?.label&&i.label.trim().length?`${n?i.label.toString().toLocaleLowerCase():i.label}`:"";return p?.disableHoverColor&&delete p.underlineLink,e`
+import{template as e,isLocalEnv as t,baseAssetURL as r}from"@gem-sdk/core";import{getSettingPreloadData as s}from"../../../helpers.js";import a from"../../../text/components/Text.liquid.js";import{LiquidUnless as l,LiquidIf as o,If as u}from"@gem-sdk/system";let ProductSku=({setting:i,styles:c,advanced:d,builderProps:p})=>{let n=c?.typo?.attrs?.transform==="capitalize",m=i?.label&&i.label.trim().length?`${n?i.label.toString().toLocaleLowerCase():i.label}`:"";c?.disableHoverColor&&delete c.underlineLink;let g=()=>{let e=t?"{{ 'gp-product-sku-v7-5.js' | asset_url }}":`${r}/assets-v2/gp-product-sku-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${s('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`};return e`
     ${l("product","<p>Product not found</p>",`{% assign currentVariant = product.selected_or_first_available_variant %}
       <gp-product-sku gp-data='${JSON.stringify({label:m})}'>
-        ${a({styles:p,setting:{...i,text:`${o("currentVariant.sku.size > 0 ",`${m} ${u(n,"{{ currentVariant.sku | downcase }}","{{ currentVariant.sku }}")}`)}`,excludeFlex:!0,isForceValue:!0},advanced:c,builderProps:d,className:"gp-product-sku"})}
+        ${a({styles:c,setting:{...i,text:`${o("currentVariant.sku.size > 0 ",`${m} ${u(n,"{{ currentVariant.sku | downcase }}","{{ currentVariant.sku }}")}`)}`,excludeFlex:!0,isForceValue:!0},advanced:d,builderProps:p,className:"gp-product-sku"})}
       </gp-product-sku>
-      ${(()=>{let e=r?"{{ 'gp-product-sku-v7-5.js' | asset_url }}":`${t}/assets-v2/gp-product-sku-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${s('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`})()}`)}`};export{i as default};
+      ${g()}`)}`};export{ProductSku as default};

package/dist/esm/product/components/product-title/ProductTitle.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as t}from"react/jsx-runtime";import e from"next/link";import{useRenderMode as r,useProduct as o,useEditorMode as i}from"@gem-sdk/core";import{urlJoin as m}from"../../../link/common/helpers.js";import d from"../../../text/components/Text.js";import{createClass as l,createAttr as p,Unless as s,If as n}from"@gem-sdk/system";import{getTextProps as c}from"./common/helpers.js";let a=a=>{let{setting:f,builderProps:u}=a,{isPreviewSharePageMode:h}=r(),k=o(),x=h?`/products/${k?.handle}`:k?.handle?m("/products",k.handle):"#",g=k?.baseID?.replace("gid://shopify/Product/",""),j=i(),y=()=>t(d,{...c(a,k?.title)}),P={href:x,title:k?.title},T=f?.linkProduct,$=l({"gp-product-title-link-wrapper":!0}),b=p({id:`shopify-text-element-${u?.uid}`,...g&&{"data-product-id":g}});return t("div",{..."edit"===j&&b,children:s(!!k,"",n(T,t(e,{...P,className:$,children:y()}),y()))})};export{a as default};
+import{jsx as t}from"react/jsx-runtime";import e from"next/link";import{useRenderMode as r,useProduct as o,useEditorMode as i}from"@gem-sdk/core";import{urlJoin as m}from"../../../link/common/helpers.js";import d from"../../../text/components/Text.js";import{createClass as l,createAttr as p,Unless as s,If as c}from"@gem-sdk/system";import{getTextProps as n}from"./common/helpers.js";let ProductTitle=a=>{let{setting:u,builderProps:f}=a,{isPreviewSharePageMode:h}=r(),k=o(),x=h?`/products/${k?.handle}`:k?.handle?m("/products",k.handle):"#",g=k?.baseID?.replace("gid://shopify/Product/",""),j=i(),P=()=>t(d,{...n(a,k?.title)}),y={href:x,title:k?.title},T=u?.linkProduct,$=l({"gp-product-title-link-wrapper":!0}),b=p({id:`shopify-text-element-${f?.uid}`,...g&&{"data-product-id":g}});return t("div",{..."edit"===j&&b,children:s(!!k,"",c(T,t(e,{...y,className:$,children:P()}),P()))})};export{ProductTitle as default};

package/dist/esm/product/components/product-title/ProductTitle.liquid.js

@@ -1,10 +1,10 @@
-import{dataStringify as t,template as r,baseAssetURL as e,isLocalEnv as o}from"@gem-sdk/core";import{getStaticLocale as p,getSettingPreloadData as s}from"../../../helpers.js";import i from"../../../text/components/Text.liquid.js";import{createAttr as l,createClass as d,createStateOrContext as u,LiquidUnless as c,If as m}from"@gem-sdk/system";import{getTextProps as a}from"./common/helpers.js";let n=n=>{let{setting:$,builderProps:f}=n,g=`<p>${p("ProductTitle","product_not_found")}</p>`,k=()=>i(a(n)),P=l({href:"{{ product.url }}",title:"{{ product.title }}"}),j=$?.linkProduct,S=d({"gp-product-title-link-wrapper":!0}),h=u({setting:{linkProduct:$?.linkProduct},uid:f?.uid});return c("product",`${g}`,r`
+import{template as t,dataStringify as r,isLocalEnv as e,baseAssetURL as o}from"@gem-sdk/core";import{getStaticLocale as p,getSettingPreloadData as s}from"../../../helpers.js";import i from"../../../text/components/Text.liquid.js";import{createAttr as l,createClass as d,createStateOrContext as u,LiquidUnless as c,If as m}from"@gem-sdk/system";import{getTextProps as a}from"./common/helpers.js";let ProductTitle=n=>{let{setting:$,builderProps:f}=n,g=`<p>${p("ProductTitle","product_not_found")}</p>`,k=()=>i(a(n)),P=l({href:"{{ product.url }}",title:"{{ product.title }}"}),j=$?.linkProduct,S=d({"gp-product-title-link-wrapper":!0}),T=u({setting:{linkProduct:$?.linkProduct},uid:f?.uid}),h=()=>{let t=e?"{{ 'gp-product-title-v7-5.js' | asset_url }}":`${o}/assets-v2/gp-product-title-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${s('class="gps-link" delay',"src")}="${t}" defer="defer"></script>`};return c("product",`${g}`,t`
       <gp-product-title
-        gp-data='${t(h)}'
+        gp-data='${r(T)}'
       >
-        ${m(j,r`<a ${P} class="${S}">
+        ${m(j,t`<a ${P} class="${S}">
             ${k()}
-            </a>`,r`${k()}`)}
+            </a>`,t`${k()}`)}
       </gp-product-title>
-      ${(()=>{let t=o?"{{ 'gp-product-title-v7-5.js' | asset_url }}":`${e}/assets-v2/gp-product-title-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${s('class="gps-link" delay',"src")}="${t}" defer="defer"></script>`})()}
-    `)};export{n as default};
+      ${h()}
+    `)};export{ProductTitle as default};

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

@@ -1 +1 @@
-let t=(t,e)=>{let{setting:l,builderProps:r,styles:x,advanced:o}=t;return{builderProps:r,styles:x,setting:{...l,text:e||"{{ product.title }}",excludeFlex:!0},advanced:o}};export{t as getTextProps};
+let getTextProps=(t,e)=>{let{setting:r,builderProps:x,styles:l,advanced:o}=t;return{builderProps:x,styles:l,setting:{...r,text:e||"{{ product.title }}",excludeFlex:!0},advanced:o}};export{getTextProps};

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

@@ -1,4 +1,4 @@
-import{template as e}from"@gem-sdk/core";import{Liquid as s,LiquidIf as i}from"@gem-sdk/system";import{OPTION_VALUES_DELIMITER as n}from"./common/const.js";let t=t=>{let{renderVariantItem:o,variantPresetsLiquid:r}=t;return e`
+import{template as e}from"@gem-sdk/core";import{Liquid as s,LiquidIf as i}from"@gem-sdk/system";import{OPTION_VALUES_DELIMITER as n}from"./common/const.js";let renderOptionValuesNewFormatSwatches=t=>{let{renderVariantItem:o,variantPresetsLiquid:r}=t;return e`
     ${s("{%- assign optionRendered = false -%}")}
     ${s("{%- assign swatches = shop.metafields.GEMPAGES.swatchesJSONFormat.value -%}")}
 
@@ -38,4 +38,4 @@ import{template as e}from"@gem-sdk/core";import{Liquid as s,LiquidIf as i}from"@
     {% endfor %}`)}
 
     ${i("optionRendered == false",o({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
-  `};export{t as renderOptionValuesNewFormatSwatches};
+  `};export{renderOptionValuesNewFormatSwatches};

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

@@ -1,4 +1,4 @@
-import{Liquid as e,LiquidFor as s,LiquidIf as t}from"@gem-sdk/system";import{template as i}from"@gem-sdk/core";let a=a=>{let{renderVariantItem:n,variantPresetsLiquid:o}=a;return i`
+import{Liquid as e,LiquidFor as s,LiquidIf as t}from"@gem-sdk/system";import{template as i}from"@gem-sdk/core";let renderOptionValuesOld=a=>{let{renderVariantItem:n,variantPresetsLiquid:o}=a;return i`
     ${e("{%- assign optionRendered = false -%}")}
     ${e("{%- assign swatches = shop.metafields.GEMPAGES.swatches -%}")}
     ${e("{%- assign swatchesItems = swatches | split: '($1)' -%}")}
@@ -63,4 +63,4 @@ import{Liquid as e,LiquidFor as s,LiquidIf as t}from"@gem-sdk/system";import{tem
     `)}
 
     ${t("optionRendered == false",n({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
-  `};export{a as renderOptionValuesOld};
+  `};export{renderOptionValuesOld};

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

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useI18nStore as e,useVariants as n,OptionSpecialStyle as r,DEVICES as i,getResponsiveValueByScreen as a}from"@gem-sdk/core";import m from"../../../text/components/Text.js";import s from"./components/variants/index.js";import p from"./components/dropdown-swatches/Dropdown.js";import l from"./components/dropdown-group/DropdownGroup.js";import c from"../../../common/components/NoDataState.js";import{createClass as d,createAttr as u,createStyle as f,If as h}from"@gem-sdk/system";import{getWrapperStyle as y,getVariantOptionGroupStyle as g}from"./common/main/styles.js";import{getAttrs as v}from"./common/main/getAttr.js";import{getWrapDropdownClass as j,getVariantOptionGroupClass as w}from"./common/main/classes.js";import{getDropdownGroupData as x,getTextVariantTitleData as N}from"./common/main/getData.js";import{useGpVariants as b}from"./hooks/useGpVariants.js";import{getWrapVariantOptionClass as k}from"./common/variants/classes.js";import{getMarginBottomStyle as T}from"./common/variants/styles.js";let A=A=>{let{t:D}=e(),{builderProps:P,styles:V,setting:$}=A,{align:S,optionTypo:C,swatchItemWidth:E,dropdownItemWidth:G,swatchSpacing:O,marginBottom:W}=V??{},{label:_,showAsSwatches:z,layout:K,hasPreSelected:R}=$??{},{uid:q}=P??{},B=n(),{mode:F,options:H,variantId:I,elementRef:J,variantGroup:L,isChangeVariant:M,selectedOptions:Q,isDefaultVariant:U,getVariantConfiguration:X,redirectProductShopifyLink:Y}=b(A,B),Z=()=>{let o={};return i.forEach(t=>{let e=a(E,t);o[t]="auto"===e}),o},oo=()=>{let o={};return i.forEach(t=>{o[t]=G?.[t]==="fill"}),o},ot=d(j(S)),oe=x(A);if(U&&"edit"===F)return o(c,{elementType:"secondary",description:D("Setup options like colors, sizes with product variant."),descriptionActions:[{text:D("Add new variant"),callback:Y},{text:D("sync data"),callback:"syncProduct"}]});if(U)return;let on=u(v({uid:q,hasPreSelected:R})),or=f(y(A)),oi=d({"gp-flex gp-flex-col !gp-ml-0":!0});return o("div",{ref:J,...on,className:oi,style:or,children:h(L,o("div",{className:ot,children:o(l,{...oe})}),(()=>{let e=H?.filter(o=>{let t=X(o.name);return!t?.hide});return e?.map((n,i)=>{let a=X(n.name),l=a?a.optionType:n.optionType,c=a?a.presets[a.optionType||"rectangle_list"]?.spacing:O,u=(R||I)&&n.name?Q?.[n.name]:void 0,y=d(w(S)),v=f(g(O,c)),j=N(A,"React",{optionName:n.name,hasPreSelected:R,selectedOptions:Q,styleOptionSelected:l}),x=d(k(K,S)),b=i===e.length-1;return t("div",{className:x,style:f(T(W,b)),children:[h(_,o(m,{...j})),t("div",{className:y,style:v,children:[z&&r.includes(`${l}`)&&n.values.map(t=>{let e=(!!R||!!M||!!I)&&!!n.name&&Q?.[n.name]===t.label;return o(s,{variantKey:`${n.id}-${t.id}`,showAsSwatches:z,uid:q,optionName:n.name??"",optionValue:t.label??"",name:n.name,value:t,optionNumber:H.length,optionPosition:i,...V,...$,presetConfiguration:X(n.name),checked:e,typeOfOption:l||"dropdown",swatchAutoWidth:Z(),optionTypo:C},t.id)}),h(("dropdown"===l||z&&!r.includes(`${l}`))&&"radio_buttons"!==l,o(p,{...V,...$,variants:B,option:n,initValue:u,presetConfiguration:X(n.name),swatchAutoWidth:oo(),optionTypo:C,optionPosition:i,optionNumber:H.length}))]})]},n.id)})})())})};export{A as default};
+import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useI18nStore as e,useVariants as n,OptionSpecialStyle as r,DEVICES as i,getResponsiveValueByScreen as a}from"@gem-sdk/core";import s from"../../../text/components/Text.js";import m from"./components/variants/index.js";import p from"./components/dropdown-swatches/Dropdown.js";import l from"./components/dropdown-group/DropdownGroup.js";import c from"../../../common/components/NoDataState.js";import{createClass as d,createAttr as u,createStyle as f,If as h}from"@gem-sdk/system";import{getWrapperStyle as y,getVariantOptionGroupStyle as g}from"./common/main/styles.js";import{getAttrs as v}from"./common/main/getAttr.js";import{getWrapDropdownClass as j,getVariantOptionGroupClass as w}from"./common/main/classes.js";import{getDropdownGroupData as x,getTextVariantTitleData as N}from"./common/main/getData.js";import{useGpVariants as b}from"./hooks/useGpVariants.js";import{getWrapVariantOptionClass as k}from"./common/variants/classes.js";import{getMarginBottomStyle as T}from"./common/variants/styles.js";let ProductVariants=A=>{let{t:P}=e(),{builderProps:V,styles:D,setting:$}=A,{align:S,optionTypo:C,swatchItemWidth:E,dropdownItemWidth:G,swatchSpacing:O,marginBottom:W}=D??{},{label:_,showAsSwatches:z,layout:K,hasPreSelected:R}=$??{},{uid:q}=V??{},B=n(),{mode:F,options:H,variantId:I,elementRef:J,variantGroup:L,isChangeVariant:M,selectedOptions:Q,isDefaultVariant:U,getVariantConfiguration:X,redirectProductShopifyLink:Y}=b(A,B),Z=()=>{let o={};return i.forEach(t=>{let e=a(E,t);o[t]="auto"===e}),o},oo=()=>{let o={};return i.forEach(t=>{o[t]=G?.[t]==="fill"}),o},ot=()=>{let e=H?.filter(o=>{let t=X(o.name);return!t?.hide});return e?.map((n,i)=>{let a=X(n.name),l=a?a.optionType:n.optionType,c=a?a.presets[a.optionType||"rectangle_list"]?.spacing:O,u=(R||I)&&n.name?Q?.[n.name]:void 0,y=d(w(S)),v=f(g(O,c)),j=N(A,"React",{optionName:n.name,hasPreSelected:R,selectedOptions:Q,styleOptionSelected:l}),x=d(k(K,S)),b=i===e.length-1;return t("div",{className:x,style:f(T(W,b)),children:[h(_,o(s,{...j})),t("div",{className:y,style:v,children:[z&&r.includes(`${l}`)&&n.values.map(t=>{let e=(!!R||!!M||!!I)&&!!n.name&&Q?.[n.name]===t.label;return o(m,{variantKey:`${n.id}-${t.id}`,showAsSwatches:z,uid:q,optionName:n.name??"",optionValue:t.label??"",name:n.name,value:t,optionNumber:H.length,optionPosition:i,...D,...$,presetConfiguration:X(n.name),checked:e,typeOfOption:l||"dropdown",swatchAutoWidth:Z(),optionTypo:C},t.id)}),h(("dropdown"===l||z&&!r.includes(`${l}`))&&"radio_buttons"!==l,o(p,{...D,...$,variants:B,option:n,initValue:u,presetConfiguration:X(n.name),swatchAutoWidth:oo(),optionTypo:C,optionPosition:i,optionNumber:H.length}))]})]},n.id)})},oe=d(j(S)),on=x(A),or=()=>o("div",{className:oe,children:o(l,{...on})});if(U&&"edit"===F)return o(c,{elementType:"secondary",description:P("Setup options like colors, sizes with product variant."),descriptionActions:[{text:P("Add new variant"),callback:Y},{text:P("sync data"),callback:"syncProduct"}]});if(U)return;let oi=u(v({uid:q,hasPreSelected:R})),oa=f(y(A)),os=d({"gp-flex gp-flex-col !gp-ml-0":!0});return o("div",{ref:J,...oi,className:os,style:oa,children:h(L,or(),ot())})};export{ProductVariants as default};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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