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

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

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

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

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

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

@@ -1 +1 @@
-"use strict";exports.OPTION_VALUES_DELIMITER="|||";
+"use strict";const OPTION_VALUES_DELIMITER="|||";exports.OPTION_VALUES_DELIMITER="|||";

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-"use strict";exports.DEFAULT_WIDTH_LABEL="fit-content",exports.HORIZONTAL_WIDTH="120px",exports.VAR_WIDTH_BY_DEVICE={desktop:"--w",tablet:"--w-tablet",mobile:"--w-mobile"};
+"use strict";const VAR_WIDTH_BY_DEVICE={desktop:"--w",tablet:"--w-tablet",mobile:"--w-mobile"},HORIZONTAL_WIDTH="120px",DEFAULT_WIDTH_LABEL="fit-content";exports.DEFAULT_WIDTH_LABEL="fit-content",exports.HORIZONTAL_WIDTH="120px",exports.VAR_WIDTH_BY_DEVICE=VAR_WIDTH_BY_DEVICE;

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-"use strict";var t=require("@gem-sdk/core"),p=require("../../../../helpers/function.js");exports.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}),exports.getTooltipSvgClass=()=>({"gp-absolute gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-z-10 gp-bottom-[-4px]":!0}),exports.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}},exports.getVariantOptionClass=()=>({"option-item-inner gp-w-auto gp-h-auto":!0}),exports.getWrapVariantOptionClass=(e,g)=>{let a=t.getLayoutClasses(e),o=p.getAlignClasses(e,g);return{"gp-flex variant-inside":!0,...a,...o}};
+"use strict";var core=require("@gem-sdk/core"),_function=require("../../../../helpers/function.js");const getVariantItemLabelClass=t=>{let{available:e}=t,p="disable"===t.soldOutStyle;return{[`option-item gp-group gp-relative !gp-block gp-child-item-${t.uid}`]:!0,"gp-pointer-events-none gp-opacity-20":p&&!e}},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=(t,e)=>{let p=core.getLayoutClasses(t),a=_function.getAlignClasses(t,e);return{"gp-flex variant-inside":!0,...p,...a}};exports.getTooltipClass=getTooltipClass,exports.getTooltipSvgClass=getTooltipSvgClass,exports.getVariantItemLabelClass=getVariantItemLabelClass,exports.getVariantOptionClass=getVariantOptionClass,exports.getWrapVariantOptionClass=getWrapVariantOptionClass;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),a=require("../base/base.liquid.js");exports.default=({isVariantOutStock:i,swatchValue:r,...t})=>e.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),base_liquid=require("../base/base.liquid.js");const ImageShopifyVariant=({isVariantOutStock:e,swatchValue:a,...i})=>core.template`
       {% assign imageUrl = null %}
       {% for variant in variants %}
         {% assign valueIncludesSelectedOption = false %}
@@ -17,5 +17,5 @@
           {% endunless %}
         {% endif %}
       {% endfor %}
-      ${a.default({...t,typeOfOption:"image_shopify"})}
-  `;
+      ${base_liquid.default({...i,typeOfOption:"image_shopify"})}
+  `;exports.default=ImageShopifyVariant;

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

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

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

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