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

package/dist/esm/product/components/product-quantity/ProductQuantity.liquid.js

@@ -0,0 +1,48 @@
+import{template as t,RenderIf as s,isLocalEnv as e,baseAssetURL as a}from"@gem-sdk/core";import{getSettingPreloadData as i}from"../../../helpers.js";import{createAttr as l,createClass as r,createStyle as o}from"@gem-sdk/system";import{getContainerAttrs as n,getInputAttr as u,getButtonAttrs as d}from"./common/attrs.js";import{getContainerClasses as c,getWrapperClasses as p,getInputClasses as f,getButtonClass as m,getIconWrapperClasses as $}from"./common/classes.js";import{getContainerStyles as b,getWrapperStyles as y,getInputStyle as v,getButtonStyle as g}from"./common/styles.js";import{getIconWidth as S,getMinusIcon as _,getPlusIcon as h}from"./common/helpers.js";let ProductQuantity=({setting:j={},styles:q={},advanced:B,builderProps:k})=>{let{plusIcon:E,minusIcon:H,updatePrice:P}=j,Q=j.defaultQtyValue??1,{inputHeight:A,buttonBackgroundColor:G,iconColor:L,inputBackgroundColor:M,textColor:V,align:x,borderBtn:C,buttonWidth:D,iconSizeCustom:I,corner:N,backgroundColor:O,dividerColor:R,dividerStroke:T}=q,w=j?.hasButton,z=l({...n({uid:k?.uid||"",isDisableByLiquid:!0})}),F=r({...c(B?.cssClass)}),J=o({...b({align:x,inputHeight:A})}),K=r({...p()}),U=o({...y({backgroundColor:O,styles:q})}),W=l({...u({isLiquid:!0,hasButton:w,defaultQty:Q})}),X=r({...f({styles:q,borderBtn:C,inputBackgroundColor:M,textColor:V})}),Y=o({...v({setting:j,styles:{...q,borderBtn:C,inputBackgroundColor:M,textColor:V,dividerColor:R,dividerStroke:T}})}),Z=r({...m({borderBtn:C,buttonBackgroundColor:G,iconColor:L,buttonSide:"left"})}),tt=o({...g({borderBtn:C,buttonWidth:D,buttonBackgroundColor:G,iconColor:L,corner:N,enableHoverButton:j?.enableHoverButton})}),ts=l({...d({buttonSide:"left"})}),te=r({...m({borderBtn:C,buttonBackgroundColor:G,iconColor:L,buttonSide:"right"})}),ta=o({...g({borderBtn:C,buttonWidth:D,buttonBackgroundColor:G,iconColor:L,corner:N,flipStyle:!0,enableHoverButton:j?.enableHoverButton})}),ti=l({...d({buttonSide:"right"})}),tl=r({...$()}),tr=S(I);return t`
+    {%- liquid
+      assign current_variant = product.selected_or_first_available_variant
+      assign available = current_variant.available | default: false
+    -%}
+      <gp-product-quantity
+        ${{...z}}
+        data-price="${P}"
+        class="${F}"
+        style="${J}"
+      >
+        <div class="${K}" style="${U}">
+          ${s(w,t`
+              <button
+              {% if available == false %} disabled {% endif %}
+               ${{...ts}}
+                class="${Z}"
+                style="${tt}"
+              >
+                <span class="${tl}" style="${tr}"
+                >
+                  ${_(H)}
+                </span>
+              </button>
+            `)}
+          <input
+            {% if available == false %} disabled {% endif %}
+            ${{...W}}
+            class="${X}"
+            style="${Y}"
+            inputMode="numeric"
+          />
+
+          ${s(w,t`
+            <button
+              {% if available == false %} disabled {% endif %}
+              ${{...ti}}
+              class="${te}"
+              style="${ta}"
+            >
+              <span class="${tl}" style="${tr}">
+                ${h(E)}
+              </span>
+            </button>
+          `)}
+          </div>
+        </gp-product-quantity>
+      ${s(e,`<script ${i('class="gps-link" delay',"src")}="{{ 'gp-product-quantity-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${i('class="gps-link" delay',"src")}="${a}/assets-v2/gp-product-quantity-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}`};export{ProductQuantity as default};

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

@@ -0,0 +1 @@
+let getContainerAttrs=({uid:t,isDisabled:e=!0,isDisableByLiquid:n})=>({"data-id":t,"data-disabled":n?"{%- if available -%} false {%- else -%} true {%- endif -%}":e}),getButtonAttrs=({buttonSide:t})=>({title:"left"===t?"Decrement":"Increment","aria-label":"left"===t?"decrement":"increment",type:"button"}),getInputAttr=({isLiquid:t,hasButton:e,quantity:n,currentVariant:a,defaultQty:r})=>{let i={};return a?.manageInventory&&(i.max=t?"{{ current_variant.quantity_rule.max }}":a?.inventoryQuantity??1),{type:e?"text":"number",name:"quantity",step:1,min:1,"aria-label":"quantity",inputMode:"numeric",quantity:t?"current_variant.quantity":n??0,autocomplete:"off",value:n??r??1,...i}};export{getButtonAttrs,getContainerAttrs,getInputAttr};

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

@@ -0,0 +1 @@
+import{composeTypographyClassName as e,handleConvertClassColor as t,getGlobalColorStateClass as p,composeClasses as l}from"@gem-sdk/core";let getInputClasses=({styles:g,borderBtn:s,inputBackgroundColor:n,textColor:r,isDisabled:a})=>{let o="gp-flex gp-w-full gp-px-1 gp-min-w-[45px] gp-shrink-[99999] gp-appearance-none gp-items-center gp-text-center gp-outline-none focus-visible:gp-shadow-none focus-visible:gp-outline-none gp-transition-all gp-duration-150 hover:gp-text-black disabled:gp-cursor-not-allowed",i=e(g?.typo,g?.typography),u=t(s),c=p("bg",n),f=p("text",r);return u&&(o+=` ${u} `),i&&(o+=` ${i} `),c&&(o+=` ${c} `),f&&(o+=` ${f} `),a&&(o+="gp-cursor-not-allowed"),{...l(o)}},getButtonClass=({borderBtn:e,buttonBackgroundColor:g,iconColor:s,buttonSide:n,isDisabled:r})=>{let a=`gp-flex gp-aspect-square gp-h-full disabled:gp-cursor-not-allowed ${r?"gp-cursor-not-allowed":"gp-cursor-pointer"} gp-items-center gp-justify-center gp-outline-none ${"left"===n?"gp-minus":"gp-plus"} `,o=t(e),i=p("bg",g),u=p("text",s);return o&&(a+=` ${o} `),i&&(a+=` ${i} `),u&&(a+=` ${u} `),{...l(a)}},getContainerClasses=e=>({...l(`quantityClass gp-relative gp-inline-flex gp-h-12 gp-w-full gp-bg-transparent gp-transition-all gp-duration-150 data-[disabled=true]:gp-opacity-60 ${e??""}`)}),getWrapperClasses=()=>({...l("gp-inline-flex gp-w-full gp-overflow-hidden")}),getIconWrapperClasses=()=>({...l("gp-inline-flex gp-items-center gp-justify-center [&>*]:gp-h-full [&>*]:gp-w-full")});export{getButtonClass,getContainerClasses,getIconWrapperClasses,getInputClasses,getWrapperClasses};

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

@@ -0,0 +1,17 @@
+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"
+      stroke="currentColor"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+      />
+    </svg>`,getMinusIcon=o=>o||`<svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="gp-h-full gp-w-full"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      >
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
+      </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

@@ -0,0 +1 @@
+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

@@ -0,0 +1 @@
+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

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

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

@@ -0,0 +1,2 @@
+'use client';
+import{jsx as e}from"react/jsx-runtime";import{useCurrentVariant as t}from"@gem-sdk/core";import r from"../../../text/components/Text.js";let ProductSku=({setting:l,builderProps:d,styles:i})=>{let o=t();i?.disableHoverColor&&delete i.underlineLink;let s=l?.label&&l.label.trim().length?`${l.label} ${o?.sku??""}`:`${o?.sku??""}`;return o?.sku?e("div",{id:`sku-${d?.uid}`,children:e(r,{builderProps:d,styles:i,setting:{...l,text:s,excludeFlex:!0}})}):e("div",{"data-id":d?.uid,children: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"})})};export{ProductSku as default};

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

@@ -0,0 +1,6 @@
+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: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>
+      ${g()}`)}`};export{ProductSku as default};

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

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

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

@@ -0,0 +1,3 @@
+import{template as t}from"@gem-sdk/core";import{getStaticLocale as o}from"../../../helpers.js";import r from"../../../text/components/Text.liquid.js";import{createClass as e,LiquidUnless as p,If as m}from"@gem-sdk/system";import{getTextProps as i}from"./common/helpers.js";let ProductTitle=l=>{let{setting:s}=l,d=`<p>${o("ProductTitle","product_not_found")}</p>`,c=()=>r(i(l)),u={},n=s?.linkProduct,f=e({"gp-product-title-link-wrapper":!0});return p("product",`${d}`,m(n,t`<a ${u} class="${f}">
+        ${c()}
+        </a>`,`${c()}`))};export{ProductTitle as default};

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

@@ -0,0 +1 @@
+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/ProductVariants.js

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

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

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

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

@@ -0,0 +1 @@
+let getWrapperAttr=(a,e)=>{let{typeOfOption:t,available:i,optionName:p,optionNameValue:o,isVariantOutStock:n}=a;return"Liquid"===e?{id:"value-wrapper-{{option.name | escape | strip}}-{{value | escape | strip}}","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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+'use client';
+import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import{useMemo as o,Fragment as l}from"react";import{isColorDark as a}from"../../common/common.js";import{createClass as i,createStyle as s,createAttr as c,If as m}from"@gem-sdk/system";import{getColorClass as n,getWrapperTextClass as f,getTextClass as d,getWrapperClass as h}from"../../common/base/classes.js";import{getWrapperAttr as p}from"../../common/base/attrs.js";import{getWrapperTextStyle as g,getTextStyle as C,getWrapperStyleActive as u,getWrapperStyleNormalAndHover as y,getColorStyle as v}from"../../common/base/styles.js";let BaseVariant=b=>{let{value:w,checked:x,optionTypography:j,optionTypo:D,swatchesImage:$,swatchesColor:B,preset:L,typeOfOption:N,available:A,variantKey:F,soldOutMarkLine:k}=b,V=o(()=>"color"===N,[N]),_=L?.optionBgColor,M=L?.optionBorder,R=L?.optionRounded,W=o(()=>"image"===N||"image_shopify"===N,[N]),Z=o(()=>x?a(_?.active)?"#fff":"#121212":a(_?.normal)?"#fff":"#121212",[_?.active,_?.normal,x]),q=e=>a(e)?"#fff":"#121212",z=()=>m(k,r("style",{children:`
+        .${F}:before {
+          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: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,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};

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

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

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

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

@@ -0,0 +1,13 @@
+import{template as o}from"@gem-sdk/core";import l from"../base/base.liquid.js";import{optionRoundedColorDefault as r}from"../../utils/mappingVariantStyles.js";let ColorVariant=({isVariantOutStock:i,swatchValue:s,...n})=>o`
+    {% assign colorsString = null %}
+    {% assign colors = null %}
+    {% for label in labels %}
+      {% if label == value %}
+        {% assign colorsString = colorStrings[forloop.index0] %}
+      {% endif %}
+    {% endfor %}
+    {% if colorsString != null %}
+      {% assign colors = colorsString | split: '($7)' %}
+    {% endif %}
+    ${l({...n,typeOfOption:"color",optionRounded:r})}
+  `;export{ColorVariant as default};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+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 -%}
+  `},composeSelectOptionAttrs=`
+  option-data="{{option.name | escape}}"
+  option-value="{{value | escape}}"
+  data-gp-option-value-id="{{value.id}}"
+  data-gp-option-available="{{value.available}}"
+  value="{{value | escape}}"
+  class="option-value-wrapper"
+  key="{{value | escape}}"
+`,renderDropdownOptions=(a,n)=>t("value in values",`${o(`{%- liquid
+      assign option_disabled = true
+      for variantItem in product.variants
+        case option.position
+          when 1
+            if variantItem.available and variantItem.option1 == value
+              assign option_disabled = false
+            endif
+          when 2
+            if variantItem.available and variantItem.option2 == value
+              assign option_disabled = false
+            endif
+          when 3
+            if variantItem.available and variantItem.option3 == value
+              assign option_disabled = false
+            endif
+        endcase
+      endfor
+    -%}`)}
+    ${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

@@ -0,0 +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 d}from"../../common/dropdown/styles.js";import{getSelectAttr as s}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:j,price:v,blankText:b,swatchHeight:g,optionTypography:k,optionTransform:y,initValue:C,hasPreSelected:D,optionTypo:N,combineHeight:S,combineWidth:x,soldOutStyle:O}=c,{optionBgColor:P,optionTextColor:V,optionRounded:B,optionShadow:R,optionHasShadow:H,optionBorder:M}=c,{value:T,preset:q,handleOnChangeSelect:z,checkVariantInStock:A}=l(c),E="disable"===O;f||(P=q?.optionBgColor,V=q?.optionTextColor,M=q?.optionBorder,H=q?.optionHasShadow,R=q?.optionShadow,B=q?.optionRounded);let F=r(n({optionTypo:N,optionTypography:k,optionBgColor:P,optionBorder:M,optionTextColor:V})),G=a(d({width:f?x:q?.width,height:f?S:q?.height,optionTypo:N,optionTypography:k,optionBgColor:P,optionTextColor:V,optionRounded:B,optionShadow:R,optionHasShadow:H,optionBorder:M,optionTransform:y,swatchHeight:g,isCombine:f})),I=p(s({optionName:w?.name,value:T??C,type:"React"})),J=()=>j?.map(o=>t(e,{disabled:!A(o)&&E,value:o?.id,variant:o,includePrice:v},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=>z(o),children:[m(!D,t("option",{value:"blank",children:b??"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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+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 %}
+      {% assign imageUrl = imageUrls[forloop.index0] %}
+    {% endif %}
+    {% endfor %}
+    ${a({...r,typeOfOption:"image"})}
+  `;export{ImageVariant as default};

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

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