@gem-sdk/components 8.0.0-dev.64 → 8.0.0-dev.66

package/dist/cjs/icon-list/common/styles.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core");const filterStyles=e=>{let t=["--mb","--mb-mobile","--mb-tablet"];return t.forEach(t=>{delete e?.[t]}),e||{}},getContainerStyles=(e,t,o)=>{let{align:r,background:l,globalSize:s}=t||{},i=core.makeGlobalSize(s||{desktop:{width:"100%"}}),a={...e,...o?.advancedClasses,...i.width,...core.makeStyleResponsive("ta",r),...core.getStyleBackgroundByDevice(l,{liquid:o?.isLiquid}),...core.getGradientBgrStyleByDevice(l)};return o?.isLiquid?a:filterStyles(a)},getWrapperStyles=e=>{let{alignWrapper:t}=e||{};return{...core.makeStyleResponsive("jc",t)}},getItemStyles=e=>{let t=core.makeGlobalSize(e?.itemPadding);return{...t.padding,...core.getResponsiveStyleShadowWithoutState(e?.itemBoxShadow,"box-shadow",e?.itemBoxShadow),...core.composeRadiusResponsive(e?.itemRounded),...core.composeBorderResponsive(e?.itemBorder),...core.getGlobalColorResponsiveStyle("bgc",e?.itemBackgroundColor),...core.getGlobalColorResponsiveStyle("bgi",e?.itemBackgroundColor),...core.makeStyleResponsive("cg",e?.horizontalSpacing)}},getUlStyles=e=>({...core.makeStyleResponsive("gg",e?.verticalSpacing)});exports.getContainerStyles=getContainerStyles,exports.getItemStyles=getItemStyles,exports.getUlStyles=getUlStyles,exports.getWrapperStyles=getWrapperStyles;
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../helpers.js");const filterStyles=e=>{let t=["--mb","--mb-mobile","--mb-tablet"];return t.forEach(t=>{delete e?.[t]}),e||{}},getContainerStyles=({style:e,styles:t,extraData:o,uid:r,type:s="React",pageContext:l})=>{let{align:i,background:a,globalSize:c,translate:n}=t||{},g=core.makeGlobalSize(c||{desktop:{width:"100%"}}),d="Liquid"===s?helpers.getBackgroundTranslated({background:a,uid:r,translate:n,pageContext:l,isTranslateVideo:!1}):a,S={...e,...o?.advancedClasses,...g.width,...core.makeStyleResponsive("ta",i),...core.getStyleBackgroundByDevice(d,{liquid:o?.isLiquid}),...core.getGradientBgrStyleByDevice(d)};return o?.isLiquid?S:filterStyles(S)},getWrapperStyles=e=>{let{alignWrapper:t}=e||{};return{...core.makeStyleResponsive("jc",t)}},getItemStyles=e=>{let t=core.makeGlobalSize(e?.itemPadding);return{...t.padding,...core.getResponsiveStyleShadowWithoutState(e?.itemBoxShadow,"box-shadow",e?.itemBoxShadow),...core.composeRadiusResponsive(e?.itemRounded),...core.composeBorderResponsive(e?.itemBorder),...core.getGlobalColorResponsiveStyle("bgc",e?.itemBackgroundColor),...core.getGlobalColorResponsiveStyle("bgi",e?.itemBackgroundColor),...core.makeStyleResponsive("cg",e?.horizontalSpacing)}},getUlStyles=e=>({...core.makeStyleResponsive("gg",e?.verticalSpacing)});exports.getContainerStyles=getContainerStyles,exports.getItemStyles=getItemStyles,exports.getUlStyles=getUlStyles,exports.getWrapperStyles=getWrapperStyles;

package/dist/cjs/icon-list/components/IconList.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),Head=require("next/head"),system=require("@gem-sdk/system"),styles=require("../common/styles.js"),classes=require("../common/classes.js");const IconList=({style:e,setting:s,children:t,styles:r,builderProps:l,advanced:a})=>{let{preload:i}=s||{},{background:m}=r??{},n=core.composeAdvanceStyle(a),c=system.createStyle(styles.getContainerStyles(e,r,{advancedClasses:n})),d=system.createClass(classes.getUlClasses(a?.cssClass)),o=system.createStyle(styles.getUlStyles(r)),u=system.createStyle(styles.getWrapperStyles(r)),x=system.createClass(classes.getWrapperClasses());return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[system.If(i,jsxRuntime.jsxs(Head,{children:[!!m?.desktop?.image?.src&&jsxRuntime.jsx("link",{rel:"preload",href:m.desktop.image.src,as:"image"}),!!m?.tablet?.image?.src&&jsxRuntime.jsx("link",{rel:"preload",href:m.tablet.image.src,as:"image"}),!!m?.mobile?.image?.src&&jsxRuntime.jsx("link",{rel:"preload",href:m.mobile.image.src,as:"image"})]})),jsxRuntime.jsx("div",{className:x,style:u,children:jsxRuntime.jsx("div",{"data-id":l?.uid,style:c,children:system.If(core.isEmptyChildren(t),jsxRuntime.jsx("div",{children:"Icons not found"}),jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("ul",{className:d,style:o,children:React.Children.map(core.filterToolbarPreview(t),(e,s)=>React.isValidElement(e)?jsxRuntime.jsx(e.type,{...e.props,parentUid:l?.uid,parentStyles:r,dataIndex:s}):null)}),core.filterToolbarPreview(t,!0)]}))})})]})};exports.default=IconList;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),Head=require("next/head"),system=require("@gem-sdk/system"),styles=require("../common/styles.js"),classes=require("../common/classes.js");const IconList=({style:e,setting:s,children:t,styles:r,builderProps:a,advanced:l,pageContext:i})=>{let{preload:n}=s||{},{background:m}=r??{},c=core.composeAdvanceStyle(l),d=system.createStyle(styles.getContainerStyles({style:e,styles:r,type:"React",uid:a?.uid??"",pageContext:i,extraData:{advancedClasses:c}})),o=system.createClass(classes.getUlClasses(l?.cssClass)),u=system.createStyle(styles.getUlStyles(r)),x=system.createStyle(styles.getWrapperStyles(r)),y=system.createClass(classes.getWrapperClasses());return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[system.If(n,jsxRuntime.jsxs(Head,{children:[!!m?.desktop?.image?.src&&jsxRuntime.jsx("link",{rel:"preload",href:m.desktop.image.src,as:"image"}),!!m?.tablet?.image?.src&&jsxRuntime.jsx("link",{rel:"preload",href:m.tablet.image.src,as:"image"}),!!m?.mobile?.image?.src&&jsxRuntime.jsx("link",{rel:"preload",href:m.mobile.image.src,as:"image"})]})),jsxRuntime.jsx("div",{className:y,style:x,children:jsxRuntime.jsx("div",{"data-id":a?.uid,style:d,children:system.If(core.isEmptyChildren(t),jsxRuntime.jsx("div",{children:"Icons not found"}),jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("ul",{className:o,style:u,children:React.Children.map(core.filterToolbarPreview(t),(e,s)=>React.isValidElement(e)?jsxRuntime.jsx(e.type,{...e.props,parentUid:a?.uid,parentStyles:r,dataIndex:s}):null)}),core.filterToolbarPreview(t,!0)]}))})})]})};exports.default=IconList;

package/dist/cjs/icon-list/components/IconList.liquid.js

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),styles=require("../common/styles.js"),classes=require("../common/classes.js");const IconList=({builderProps:e,style:s,setting:t,rawChildren:r,styles:l,advanced:a})=>{let{preload:i}=t||{},{background:c}=l||{},o=core.composeAdvanceStyle(a),m=system.createStyle(styles.getContainerStyles(s,l,{advancedClasses:o,isLiquid:!0})),d=system.createClass(classes.getUlClasses(a?.cssClass)),y=system.createStyle(styles.getUlStyles(l)),n=system.createStyle(styles.getWrapperStyles(l)),p=system.createClass(classes.getWrapperClasses());return core.template`
-    ${system.If(!!i,`${system.If(!!c?.desktop?.image?.src,`<link rel="preload" href="${c?.desktop?.image?.src}" as="image" />`)}
-      ${system.If(!!c?.tablet?.image?.src,`<link rel="preload" href="${c?.tablet?.image?.src}" as="image" />`)}
-      ${system.If(!!c?.mobile?.image?.src,`<link rel="preload" href="${c?.mobile?.image?.src}" as="image" />`)}`)}
-    <div class="${p}" style="${n}">
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),styles=require("../common/styles.js"),classes=require("../common/classes.js");const IconList=({builderProps:e,style:s,setting:t,rawChildren:r,styles:a,advanced:l,pageContext:i})=>{let{preload:c}=t||{},{background:o}=a||{},d=core.composeAdvanceStyle(l),m=system.createStyle(styles.getContainerStyles({style:s,styles:a,type:"Liquid",uid:e?.uid??"",pageContext:i,extraData:{advancedClasses:d,isLiquid:!0}})),y=system.createClass(classes.getUlClasses(l?.cssClass)),n=system.createStyle(styles.getUlStyles(a)),p=system.createStyle(styles.getWrapperStyles(a)),u=system.createClass(classes.getWrapperClasses());return core.template`
+    ${system.If(!!c,`${system.If(!!o?.desktop?.image?.src,`<link rel="preload" href="${o?.desktop?.image?.src}" as="image" />`)}
+      ${system.If(!!o?.tablet?.image?.src,`<link rel="preload" href="${o?.tablet?.image?.src}" as="image" />`)}
+      ${system.If(!!o?.mobile?.image?.src,`<link rel="preload" href="${o?.mobile?.image?.src}" as="image" />`)}`)}
+    <div class="${u}" style="${p}">
     <div
       data-id="${e?.uid}"
        style="${m}">
      ${system.If(!r,core.template`<div>${helpers.getStaticLocale("IconList","icons_not_found")}</div>`)}
      ${system.If(!!r,core.template`<ul
-        class="${d}"
-        style="${y}"
+        class="${y}"
+        style="${n}"
         >
-        ${core.WrapRenderChildren({uid:e?.uid??"",customProps:r?.[0].customProps},r?.map((s,t)=>{if(s)return core.RenderChildren({...s,dataIndex:t,parentUid:e?.uid,parentStyles:l})}))}
+        ${core.WrapRenderChildren({uid:e?.uid??"",customProps:r?.[0].customProps},r?.map((s,t)=>{if(s)return core.RenderChildren({...s,dataIndex:t,parentUid:e?.uid,parentStyles:a})}))}
       </ul>`)}
   </div>
   </div>

package/dist/cjs/icon-list/index.js

@@ -1 +1 @@
-"use strict";require("react/jsx-runtime"),require("@gem-sdk/core"),require("react"),require("next/head"),require("@gem-sdk/system");var IconList$1=require("./settings/IconList.js"),IconListItem$1=require("./settings/IconListItem.js");const iconListSetting={IconList:IconList$1.default,IconListItem:IconListItem$1.default};exports.iconListSetting=iconListSetting;
+"use strict";require("react/jsx-runtime"),require("@gem-sdk/core"),require("react"),require("next/head"),require("@gem-sdk/system"),require("next/link");var IconList$1=require("./settings/IconList.js"),IconListItem$1=require("./settings/IconListItem.js");const iconListSetting={IconList:IconList$1.default,IconListItem:IconListItem$1.default};exports.iconListSetting=iconListSetting;

package/dist/cjs/icon-list/settings/configs/settings.js

@@ -1 +1 @@
-"use strict";var items=require("./items.js");const IconListSettings=[{id:"setting",controls:[{id:"childItem",label:"Item management",type:"child-item",default:["Item 1","Item 2","Item 3"],childTemplate:{default:items.itemControlTemplate,"icon-list-ver1-1-text":items.itemControlTemplateText,"icon-list-ver1-2-image":items.itemControlTemplateImage}},{id:"preload",type:"toggle",label:"Preload",default:!1}]},{id:"style",controls:[{id:"background",type:"background-media",label:"Background Color & Image",devices:{desktop:{default:{type:"color",color:"transparent",image:{src:"",width:0,height:0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}},compoDefaultValue:{desktop:{default:{type:"color",color:"bg-2",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}}},{id:"align",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"alignWrapper",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"horizontalSpacing",label:"Horizontal Spacing",type:"input:slider",units:["px"],step:1,min:0,max:40,ignoreMax:!0,devices:{desktop:{default:"12px"}}},{id:"verticalSpacing",label:"Vertical Spacing",type:"input:slider",units:["px"],step:1,min:0,max:40,ignoreMax:!0,devices:{desktop:{default:"12px"}}},{id:"itemPadding",type:"size-setting",devices:{desktop:{default:{padding:{}}}},hiddenSettings:["shape","gap","height","width"]},{id:"itemBackgroundColor",type:"color-picker-v2",devices:{desktop:{default:"transparent"}},compoDefaultValue:{desktop:{default:"bg-2"}},enableGradient:!0},{id:"itemBorder",type:"border-v2",devices:{desktop:{default:{}}},compoDefaultValue:{desktop:{default:{border:"solid",color:"line-1",width:"1px",borderWidth:"1px"}}}},{id:"itemRounded",type:"corner-v2",devices:{desktop:{}},compoDefaultValue:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}},{id:"itemBoxShadow",type:"shadow-v2",devices:{desktop:{default:{}}},compoDefaultValue:{desktop:{default:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}}},{id:"globalSize",type:"size-setting",devices:{desktop:{default:{width:"100%",padding:{}}},mobile:{default:{width:"100%"}}},settingConfig:{width:{displayOptions:["full","auto"]}},hiddenSettings:["shape","gap","height"]}]}];exports.IconListSettings=IconListSettings;
+"use strict";var items=require("./items.js");const IconListSettings=[{id:"setting",controls:[{id:"childItem",label:"Item management",type:"child-item",default:["Item 1","Item 2","Item 3"],childTemplate:{default:items.itemControlTemplate,"icon-list-ver1-1-text":items.itemControlTemplateText,"icon-list-ver1-2-image":items.itemControlTemplateImage}},{id:"preload",type:"toggle",label:"Preload",default:!1}]},{id:"style",controls:[{id:"background",type:"background-media",label:"Background Color & Image",devices:{desktop:{default:{type:"color",color:"transparent",image:{src:"",width:0,height:0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}},compoDefaultValue:{desktop:{default:{type:"color",color:"bg-2",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}}},{id:"translate",type:"input",default:[{id:"background",fields:["image.src"]}]},{id:"align",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"alignWrapper",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"horizontalSpacing",label:"Horizontal Spacing",type:"input:slider",units:["px"],step:1,min:0,max:40,ignoreMax:!0,devices:{desktop:{default:"12px"}}},{id:"verticalSpacing",label:"Vertical Spacing",type:"input:slider",units:["px"],step:1,min:0,max:40,ignoreMax:!0,devices:{desktop:{default:"12px"}}},{id:"itemPadding",type:"size-setting",devices:{desktop:{default:{padding:{}}}},hiddenSettings:["shape","gap","height","width"]},{id:"itemBackgroundColor",type:"color-picker-v2",devices:{desktop:{default:"transparent"}},compoDefaultValue:{desktop:{default:"bg-2"}},enableGradient:!0},{id:"itemBorder",type:"border-v2",devices:{desktop:{default:{}}},compoDefaultValue:{desktop:{default:{border:"solid",color:"line-1",width:"1px",borderWidth:"1px"}}}},{id:"itemRounded",type:"corner-v2",devices:{desktop:{}},compoDefaultValue:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}},{id:"itemBoxShadow",type:"shadow-v2",devices:{desktop:{default:{}}},compoDefaultValue:{desktop:{default:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}}},{id:"globalSize",type:"size-setting",devices:{desktop:{default:{width:"100%",padding:{}}},mobile:{default:{width:"100%"}}},settingConfig:{width:{displayOptions:["full","auto"]}},hiddenSettings:["shape","gap","height"]}]}];exports.IconListSettings=IconListSettings;

package/dist/cjs/icon-list-v2/common/styles.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core");const filterStyles=e=>{let t=["--mb","--mb-mobile","--mb-tablet"];return t.forEach(t=>{delete e?.[t]}),e},getStyleContainerIconlistMain=({styles:e,style:t,type:o,advanced:l})=>{let{align:r}=e??{};return{...t="react"===o?filterStyles(t):t,...core.makeStyleResponsive("jc",r),...core.makeStyleResponsive("d",{desktop:l?.d?.desktop?"flex":"none",tablet:l?.d?.tablet?"flex":"none",mobile:l?.d?.mobile?"flex":"none"})}},getStyleWraplistIcon=({styles:e})=>{let{panelAlign:t,contentBoxPadding:o,contentBoxWidth:l,background:r,contentBoxBorder:s,contentBoxRounded:i,contentBoxShadow:n}=e??{};return{...core.composeBorderResponsive(s),...core.getResponsiveStyleShadowWithoutState(n,"box-shadow",n),...core.composeRadiusResponsive(i),...core.getStyleBackgroundByDevice(r),...core.getResponsiveStylePadding(o),...core.makeStyleResponsive("w",l),...core.makeStyleResponsive("jc",t),...core.getGradientBgrStyleByDevice(r,{desktop:!0,tablet:!0,mobile:!0})}},getStyleColListIcon=({styles:e})=>{let{verticalSpacing:t}=e??{};return{...core.makeStyleResponsive("rg",t)}},getStyleWrapItemIcon=({styles:e})=>{let{horizontalSpacing:t,position:o}=e??{};return{...core.makeStyleResponsive("cg",t),...core.makeStyleResponsive("ai",{...o,mobile:o?.mobile=="baseline"?"flex-start":o?.mobile})}},getStyleWrapIcon=({styles:e,setting:t})=>{let{iconBorder:o,backgroundColor:l,iconRounded:r}=e??{},{globalSize:s}=t??{},i=core.makeGlobalSize(s);return{...i.padding,...core.makeStyle({bs:o?.border,bw:o?.width,bc:core.getSingleColorVariable(o?.color),bg:core.getSingleColorVariable(l),bblr:r?.bblr,bbrr:r?.bbrr,btlr:r?.btlr,btrr:r?.btrr}),...core.makeStyleResponsive("top",{desktop:"unset",tablet:"unset",mobile:"unset"}),...core.makeStyleResponsive("pos",{desktop:"relative",tablet:"relative",mobile:"relative"})}},getStyleIcon=({styles:e,setting:t})=>{let{iconColor:o}=e||{},{iconWidth:l}=t??{};return{"--c":core.getSingleColorVariable(o),"--w":"100%","--h":"100%","--size-desktop":`${l?.desktop}px`,"--size-tablet":`${l?.tablet||l?.desktop}px`,"--size-mobile":`${l?.mobile||l?.tablet||l?.desktop}px`}},getStyleTypoText=({setting:e})=>({typo:e?.textTypo});exports.getStyleColListIcon=getStyleColListIcon,exports.getStyleContainerIconlistMain=getStyleContainerIconlistMain,exports.getStyleIcon=getStyleIcon,exports.getStyleTypoText=getStyleTypoText,exports.getStyleWrapIcon=getStyleWrapIcon,exports.getStyleWrapItemIcon=getStyleWrapItemIcon,exports.getStyleWraplistIcon=getStyleWraplistIcon;
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../helpers.js");const filterStyles=e=>{let t=["--mb","--mb-mobile","--mb-tablet"];return t.forEach(t=>{delete e?.[t]}),e},getStyleContainerIconlistMain=({styles:e,style:t,type:o,advanced:l})=>{let{align:r}=e??{};return{...t="react"===o?filterStyles(t):t,...core.makeStyleResponsive("jc",r),...core.makeStyleResponsive("d",{desktop:l?.d?.desktop?"flex":"none",tablet:l?.d?.tablet?"flex":"none",mobile:l?.d?.mobile?"flex":"none"})}},getStyleWraplistIcon=({styles:e,translate:t,uid:o,pageContext:l,type:r="React"})=>{let{panelAlign:s,contentBoxPadding:i,contentBoxWidth:n,background:a,contentBoxBorder:c,contentBoxRounded:p,contentBoxShadow:b}=e??{},y="Liquid"===r?helpers.getBackgroundTranslated({background:a,uid:o,translate:t,pageContext:l,isTranslateVideo:!1}):a;return{...core.composeBorderResponsive(c),...core.getResponsiveStyleShadowWithoutState(b,"box-shadow",b),...core.composeRadiusResponsive(p),...core.getStyleBackgroundByDevice(y),...core.getResponsiveStylePadding(i),...core.makeStyleResponsive("w",n),...core.makeStyleResponsive("jc",s),...core.getGradientBgrStyleByDevice(y,{desktop:!0,tablet:!0,mobile:!0})}},getStyleColListIcon=({styles:e})=>{let{verticalSpacing:t}=e??{};return{...core.makeStyleResponsive("rg",t)}},getStyleWrapItemIcon=({styles:e})=>{let{horizontalSpacing:t,position:o}=e??{};return{...core.makeStyleResponsive("cg",t),...core.makeStyleResponsive("ai",{...o,mobile:o?.mobile=="baseline"?"flex-start":o?.mobile})}},getStyleWrapIcon=({styles:e,setting:t})=>{let{iconBorder:o,backgroundColor:l,iconRounded:r}=e??{},{globalSize:s}=t??{},i=core.makeGlobalSize(s);return{...i.padding,...core.makeStyle({bs:o?.border,bw:o?.width,bc:core.getSingleColorVariable(o?.color),bg:core.getSingleColorVariable(l),bblr:r?.bblr,bbrr:r?.bbrr,btlr:r?.btlr,btrr:r?.btrr}),...core.makeStyleResponsive("top",{desktop:"unset",tablet:"unset",mobile:"unset"}),...core.makeStyleResponsive("pos",{desktop:"relative",tablet:"relative",mobile:"relative"})}},getStyleIcon=({styles:e,setting:t})=>{let{iconColor:o}=e||{},{iconWidth:l}=t??{};return{"--c":core.getSingleColorVariable(o),"--w":"100%","--h":"100%","--size-desktop":`${l?.desktop}px`,"--size-tablet":`${l?.tablet||l?.desktop}px`,"--size-mobile":`${l?.mobile||l?.tablet||l?.desktop}px`}},getStyleTypoText=({setting:e})=>({typo:e?.textTypo});exports.getStyleColListIcon=getStyleColListIcon,exports.getStyleContainerIconlistMain=getStyleContainerIconlistMain,exports.getStyleIcon=getStyleIcon,exports.getStyleTypoText=getStyleTypoText,exports.getStyleWrapIcon=getStyleWrapIcon,exports.getStyleWrapItemIcon=getStyleWrapItemIcon,exports.getStyleWraplistIcon=getStyleWraplistIcon;

package/dist/cjs/icon-list-v2/components/IconList.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),useGetProductId=require("../../hooks/useGetProductId.js"),Text=require("../../text/components/Text.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),helpers=require("../common/helpers.js"),useIconLineHeight=require("../hooks/useIconLineHeight.js");const IconListV2=e=>{let{builderProps:s,builderAttrs:t,style:l,setting:a,styles:r,pageContext:c,advanced:n}=e,i=system.createClass({[s?.uid??""]:!0}),o=system.createClass(classes.getClassWraplistIcon()),y=system.createClass(classes.getClassColListIcon()),m=system.createClass(classes.getClassWrapItemIcon({builderProps:s})),u=system.createClass(classes.getClassWrapIcon()),d=system.createClass(classes.getClassIcon()),p=system.createClass(classes.getClassTextItem({setting:a})),I=system.createStyle(styles.getStyleContainerIconlistMain({styles:r,style:l,type:"react",advanced:n})),x=system.createStyle(styles.getStyleWraplistIcon({styles:r})),g=system.createStyle(styles.getStyleColListIcon({styles:r})),h=system.createStyle(styles.getStyleIcon({styles:r,setting:a})),j=styles.getStyleTypoText({setting:a}),C=system.createAttr({...t}),S=helpers.getTextIconNotFound("react"),T=helpers.getvalueMap({setting:a}),{ref:v,lineHeight:L}=useIconLineHeight.useIconLineHeight({iconWidth:helpers.composeIconWith(a?.iconWidth)}),W=helpers.composePostionIconList(L,r?.position,a?.iconWidth),{refContainer:q,productID:R}=useGetProductId.useGetProductId(),N=system.createStyle({...styles.getStyleWrapIcon({styles:r,setting:a}),...W.content}),f=system.createStyle({...styles.getStyleWrapItemIcon({styles:r}),...W.wrapper});return jsxRuntime.jsx("div",{...C,...s,"data-id":s?.uid,style:I,className:i,ref:q,children:system.If(!T||!T.length,jsxRuntime.jsx("div",{children:S}),jsxRuntime.jsx("div",{className:o,style:x,children:jsxRuntime.jsx("div",{className:y,style:g,children:T?.map((e,t)=>{let l=helpers.getTextIconTranslations({setting:a,builderProps:s,pageContext:c,key:t,type:"react"});return jsxRuntime.jsxs("div",{"data-index":t,className:m,style:f,children:[jsxRuntime.jsx("div",{className:u,style:N,children:jsxRuntime.jsx("span",{style:h,className:d,dangerouslySetInnerHTML:{__html:e}})}),jsxRuntime.jsx(Text.default,{setting:{text:l?.toString(),htmlTag:"div",options:{useState:!0,uniqueId:`${s?.uid}-${t}-${R}`,productID:R,customClass:{wrapper:"gp-w-full"}}},styles:j,className:p,ref:v})]},t)})})}))})};exports.default=IconListV2;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),useGetProductId=require("../../hooks/useGetProductId.js"),Text=require("../../text/components/Text.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),helpers=require("../common/helpers.js"),useIconLineHeight=require("../hooks/useIconLineHeight.js");const IconListV2=e=>{let{builderProps:s,builderAttrs:t,style:l,setting:a,styles:r,pageContext:c,advanced:i}=e,n=system.createClass({[s?.uid??""]:!0}),o=system.createClass(classes.getClassWraplistIcon()),y=system.createClass(classes.getClassColListIcon()),m=system.createClass(classes.getClassWrapItemIcon({builderProps:s})),u=system.createClass(classes.getClassWrapIcon()),d=system.createClass(classes.getClassIcon()),p=system.createClass(classes.getClassTextItem({setting:a})),I=system.createStyle(styles.getStyleContainerIconlistMain({styles:r,style:l,type:"react",advanced:i})),x=system.createStyle(styles.getStyleWraplistIcon({styles:r,uid:s?.uid??"",pageContext:c})),g=system.createStyle(styles.getStyleColListIcon({styles:r})),h=system.createStyle(styles.getStyleIcon({styles:r,setting:a})),j=styles.getStyleTypoText({setting:a}),C=system.createAttr({...t}),S=helpers.getTextIconNotFound("react"),T=helpers.getvalueMap({setting:a}),{ref:v,lineHeight:L}=useIconLineHeight.useIconLineHeight({iconWidth:helpers.composeIconWith(a?.iconWidth)}),W=helpers.composePostionIconList(L,r?.position,a?.iconWidth),{refContainer:q,productID:R}=useGetProductId.useGetProductId(),N=system.createStyle({...styles.getStyleWrapIcon({styles:r,setting:a}),...W.content}),f=system.createStyle({...styles.getStyleWrapItemIcon({styles:r}),...W.wrapper});return jsxRuntime.jsx("div",{...C,...s,"data-id":s?.uid,style:I,className:n,ref:q,children:system.If(!T||!T.length,jsxRuntime.jsx("div",{children:S}),jsxRuntime.jsx("div",{className:o,style:x,children:jsxRuntime.jsx("div",{className:y,style:g,children:T?.map((e,t)=>{let l=helpers.getTextIconTranslations({setting:a,builderProps:s,pageContext:c,key:t,type:"react"});return jsxRuntime.jsxs("div",{"data-index":t,className:m,style:f,children:[jsxRuntime.jsx("div",{className:u,style:N,children:jsxRuntime.jsx("span",{style:h,className:d,dangerouslySetInnerHTML:{__html:e}})}),jsxRuntime.jsx(Text.default,{setting:{text:l?.toString(),htmlTag:"div",options:{useState:!0,uniqueId:`${s?.uid}-${t}-${R}`,productID:R,customClass:{wrapper:"gp-w-full"}}},styles:j,className:p,ref:v})]},t)})})}))})};exports.default=IconListV2;

package/dist/cjs/icon-list-v2/components/IconList.liquid.js

@@ -1,32 +1,32 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers$1=require("../../helpers.js"),Text_liquid=require("../../text/components/Text.liquid.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),helpers=require("../common/helpers.js");const IconListV2=e=>{let{builderProps:s,builderAttrs:t,style:l,setting:a,styles:r,pageContext:i}=e,c=s?.builderData?.advanced,o=system.createClass({[s?.uid??""]:!0}),y=system.createClass(classes.getClassWraplistIcon()),n=system.createClass(classes.getClassColListIcon()),p=system.createClass(classes.getClassWrapItemIcon({builderProps:s})),d=system.createClass(classes.getClassWrapIcon()),m=system.createClass(classes.getClassIcon()),g=system.createClass(classes.getClassTextItem({setting:a})),u=system.createStyle(styles.getStyleContainerIconlistMain({styles:r,style:l,type:"liquid",advanced:c})),$=system.createStyle(styles.getStyleWraplistIcon({styles:r})),S=system.createStyle(styles.getStyleColListIcon({styles:r})),I=system.createStyle(styles.getStyleWrapIcon({styles:r,setting:a})),v=system.createStyle(styles.getStyleWrapItemIcon({styles:r})),C=system.createStyle(styles.getStyleIcon({styles:r,setting:a})),h=styles.getStyleTypoText({setting:a}),q=system.createAttr({...t}),f=helpers.getTextIconNotFound("liquid"),x=helpers.getvalueMap({setting:a});return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers$1=require("../../helpers.js"),Text_liquid=require("../../text/components/Text.liquid.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),helpers=require("../common/helpers.js");const IconListV2=e=>{let{builderProps:s,builderAttrs:t,style:l,setting:a,styles:r,pageContext:i}=e,{translate:c}=a??{},o=s?.builderData?.advanced,y=system.createClass({[s?.uid??""]:!0}),n=system.createClass(classes.getClassWraplistIcon()),p=system.createClass(classes.getClassColListIcon()),d=system.createClass(classes.getClassWrapItemIcon({builderProps:s})),g=system.createClass(classes.getClassWrapIcon()),m=system.createClass(classes.getClassIcon()),u=system.createClass(classes.getClassTextItem({setting:a})),$=system.createStyle(styles.getStyleContainerIconlistMain({styles:r,style:l,type:"liquid",advanced:o})),S=system.createStyle(styles.getStyleWraplistIcon({styles:r,translate:c,uid:s?.uid??"",pageContext:i,type:"Liquid"})),I=system.createStyle(styles.getStyleColListIcon({styles:r,setting:a})),v=system.createStyle(styles.getStyleWrapIcon({styles:r,setting:a})),C=system.createStyle(styles.getStyleWrapItemIcon({styles:r})),q=system.createStyle(styles.getStyleIcon({styles:r,setting:a})),h=styles.getStyleTypoText({setting:a}),x=system.createAttr({...t}),f=helpers.getTextIconNotFound("liquid"),T=helpers.getvalueMap({setting:a});return core.template`
     {% assign locationOrigin = request.origin | append: routes.root_url | split: '/' | join: '/' %}
     <gp-icon-list
-      ${{...q}}
+      ${{...x}}
       ${{...s}}
       data-id="${s?.uid}"
-      style="${u}"
-      className="${o}"
+      style="${$}"
+      className="${y}"
       gp-data='${core.dataStringify({position:r?.position,iconWidth:a?.iconWidth}).replaceAll("'","&#039;")}'
     >
-      ${system.If(!x||!x.length,core.template`<div>${f}</div>`,core.template`
-          <div class="${y}" style="${$}">
-            <div class="${n}" style="${S}">
-              ${x?.map((e,t)=>{let l=helpers.getTextIconTranslations({setting:a,builderProps:s,pageContext:i,key:t,type:"liquid"});return core.template`
+      ${system.If(!T||!T.length,core.template`<div>${f}</div>`,core.template`
+          <div class="${n}" style="${S}">
+            <div class="${p}" style="${I}">
+              ${T?.map((e,t)=>{let l=helpers.getTextIconTranslations({setting:a,builderProps:s,pageContext:i,key:t,type:"liquid"});return core.template`
                     <div
                       key="${t}"
                       data-index="${t}"
-                      class="${p}"
-                      style="${v}"
+                      class="${d}"
+                      style="${C}"
                     >
-                      <div class="${d}" style="${I}">
+                      <div class="${g}" style="${v}">
                         <span
                           class="${m}"
-                          style="${C}"
+                          style="${q}"
                         >
                           ${e}
                         </span>
                       </div>
-                      ${Text_liquid.default({setting:{text:l?.toString(),htmlTag:"div",options:{customClass:{wrapper:"gp-w-full"}},isForceValue:!0},styles:h,className:g})}
+                      ${Text_liquid.default({setting:{text:l?.toString(),htmlTag:"div",options:{customClass:{wrapper:"gp-w-full"}},isForceValue:!0},styles:h,className:u})}
                     </div>`}).join(" ")}
             </div>
           </div>`)}

package/dist/cjs/icon-list-v2/settings/configs/settings.js

@@ -1 +1 @@
-"use strict";var items=require("./items.js");const IconListSettings=[{id:"setting",controls:[{id:"childItem",label:"Item management",type:"child-item",default:["Icon 1","Icon 2"],childTemplate:items.itemControlTemplate,isDisabledDuplicateIncrease:!0},{id:"translate",type:"input",default:"childItem"},{id:"textTypo",type:"typography-v2",default:{type:"paragraph-1",attrs:{color:"#FEB91C"}},compoDefaultValue:{attrs:{color:"#FEB91C"}},ignoreReRender:!0,hiddenSetting:{textAlign:!0,textShadow:!0}},{id:"iconSvg",type:"icon",label:"Icon Parent",hideInput:!0,info:"Choose from list or paste any SVG icon",default:'<svg data-name="check-circle-filled" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508414807831544168"><path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg>'},{id:"iconWidth",type:"input:stepper",label:"Icon Width",devices:{desktop:{default:24}},min:0},{id:"childConfig",type:"child-icon",label:"",default:[,,,].fill('<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508414807831544168"><path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg>')},{id:"globalSize",type:"size-setting",devices:{desktop:{default:{padding:{type:"custom",top:"0px",bottom:"0px",left:"0px",right:"0px"}}}},hiddenShowMore:!0,hiddenSettings:["shape","width","height","gap"]},{id:"iconType",type:"option:illustration",enableTooltip:!0,label:"Icon type",options:[{label:"Matching icons",value:"matching",svgName:"gp-item-list-matching-icon"},{label:"Different icons",value:"different",svgName:"gp-item-list-different-icon"}],default:"matching"}]},{id:"style",controls:[{id:"background",type:"background-media",ignoreReRender:!0,devices:{desktop:{default:{type:"color",color:"transparent",image:{src:"",width:0,height:0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}},compoDefaultValue:{desktop:{default:{type:"color",color:"#DDDDDD",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}}},{id:"iconColor",type:"color-picker-v2",label:"Icon color",default:"text-1",compoDefaultValue:"text-1"},{id:"backgroundColor",type:"color-picker-v2",label:"Background color",default:"transparent",compoDefaultValue:"bg-1"},{id:"iconBorder",label:"Border",type:"border-v2",default:{},compoDefaultValue:{border:"solid",width:"1px 1px 1px 1px",position:"bottom",color:"line-3",isCustom:!0,borderWidth:"Mixed"}},{id:"iconRounded",type:"corner-v2",label:"Border Radius",default:{radiusType:"none"},compoDefaultValue:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}},{id:"horizontalSpacing",label:"Horizontal Spacing",type:"input:slider",units:["px"],min:0,max:40,ignoreMax:!0,devices:{desktop:{default:"8px"}}},{id:"position",type:"option:illustration",enableTooltip:!0,label:"Position",options:[{label:"Align center",value:"center",type:"align-pos",svgName:"gp-align-position-center"},{label:"Align top",value:"baseline",type:"align-pos",svgName:"gp-align-position-top"}],devices:{desktop:{default:"center"},tablet:{default:"center"},mobile:{default:"center"}}},{id:"contentBoxWidth",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,displayOptions:[{label:"Fit content",value:"Auto",showValue:!0},{label:"Full",value:"100%",showValue:!0}],devices:{desktop:{default:"100%"}}},{id:"contentBoxPadding",label:"Padding",type:"padding-v2",devices:{desktop:{}},compoDefaultValue:{desktop:{default:{top:"16px",bottom:"16px",left:"16px",right:"16px"}}}},{id:"contentBoxBorder",label:"Border",type:"border",devices:{desktop:{default:{}}},compoDefaultValue:{desktop:{default:{border:"solid",width:"1px 1px 1px 1px",position:"bottom",color:"line-3",isCustom:!0,borderWidth:"Mixed"}}}},{id:"contentBoxRounded",type:"corner-v2",label:"Border Radius",devices:{desktop:{default:{radiusType:"none"}}},compoDefaultValue:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}},{id:"contentBoxShadow",label:"Shadow",type:"shadow-v2",devices:{desktop:{default:{}}},compoDefaultValue:{desktop:{default:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}}},{id:"panelAlign",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"align",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"verticalSpacing",type:"input:slider",label:"Item gap",units:["px"],min:0,max:40,ignoreMax:!0,devices:{desktop:{default:"12px"}}}]}];exports.IconListSettings=IconListSettings;
+"use strict";var items=require("./items.js");const IconListSettings=[{id:"setting",controls:[{id:"childItem",label:"Item management",type:"child-item",default:["Icon 1","Icon 2"],childTemplate:items.itemControlTemplate,isDisabledDuplicateIncrease:!0},{id:"translate",type:"input",default:[{id:"childItem"},{id:"background",fields:["image.src"]}]},{id:"textTypo",type:"typography-v2",default:{type:"paragraph-1",attrs:{color:"#FEB91C"}},compoDefaultValue:{attrs:{color:"#FEB91C"}},ignoreReRender:!0,hiddenSetting:{textAlign:!0,textShadow:!0}},{id:"iconSvg",type:"icon",label:"Icon Parent",hideInput:!0,info:"Choose from list or paste any SVG icon",default:'<svg data-name="check-circle-filled" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508414807831544168"><path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg>'},{id:"iconWidth",type:"input:stepper",label:"Icon Width",devices:{desktop:{default:24}},min:0},{id:"childConfig",type:"child-icon",label:"",default:[,,,].fill('<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508414807831544168"><path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg>')},{id:"globalSize",type:"size-setting",devices:{desktop:{default:{padding:{type:"custom",top:"0px",bottom:"0px",left:"0px",right:"0px"}}}},hiddenShowMore:!0,hiddenSettings:["shape","width","height","gap"]},{id:"iconType",type:"option:illustration",enableTooltip:!0,label:"Icon type",options:[{label:"Matching icons",value:"matching",svgName:"gp-item-list-matching-icon"},{label:"Different icons",value:"different",svgName:"gp-item-list-different-icon"}],default:"matching"}]},{id:"style",controls:[{id:"background",type:"background-media",ignoreReRender:!0,devices:{desktop:{default:{type:"color",color:"transparent",image:{src:"",width:0,height:0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}},compoDefaultValue:{desktop:{default:{type:"color",color:"#DDDDDD",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}}},{id:"iconColor",type:"color-picker-v2",label:"Icon color",default:"text-1",compoDefaultValue:"text-1"},{id:"backgroundColor",type:"color-picker-v2",label:"Background color",default:"transparent",compoDefaultValue:"bg-1"},{id:"iconBorder",label:"Border",type:"border-v2",default:{},compoDefaultValue:{border:"solid",width:"1px 1px 1px 1px",position:"bottom",color:"line-3",isCustom:!0,borderWidth:"Mixed"}},{id:"iconRounded",type:"corner-v2",label:"Border Radius",default:{radiusType:"none"},compoDefaultValue:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}},{id:"horizontalSpacing",label:"Horizontal Spacing",type:"input:slider",units:["px"],min:0,max:40,ignoreMax:!0,devices:{desktop:{default:"8px"}}},{id:"position",type:"option:illustration",enableTooltip:!0,label:"Position",options:[{label:"Align center",value:"center",type:"align-pos",svgName:"gp-align-position-center"},{label:"Align top",value:"baseline",type:"align-pos",svgName:"gp-align-position-top"}],devices:{desktop:{default:"center"},tablet:{default:"center"},mobile:{default:"center"}}},{id:"contentBoxWidth",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,displayOptions:[{label:"Fit content",value:"Auto",showValue:!0},{label:"Full",value:"100%",showValue:!0}],devices:{desktop:{default:"100%"}}},{id:"contentBoxPadding",label:"Padding",type:"padding-v2",devices:{desktop:{}},compoDefaultValue:{desktop:{default:{top:"16px",bottom:"16px",left:"16px",right:"16px"}}}},{id:"contentBoxBorder",label:"Border",type:"border",devices:{desktop:{default:{}}},compoDefaultValue:{desktop:{default:{border:"solid",width:"1px 1px 1px 1px",position:"bottom",color:"line-3",isCustom:!0,borderWidth:"Mixed"}}}},{id:"contentBoxRounded",type:"corner-v2",label:"Border Radius",devices:{desktop:{default:{radiusType:"none"}}},compoDefaultValue:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}},{id:"contentBoxShadow",label:"Shadow",type:"shadow-v2",devices:{desktop:{default:{}}},compoDefaultValue:{desktop:{default:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}}},{id:"panelAlign",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"align",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"verticalSpacing",type:"input:slider",label:"Item gap",units:["px"],min:0,max:40,ignoreMax:!0,devices:{desktop:{default:"12px"}}}]}];exports.IconListSettings=IconListSettings;

package/dist/cjs/image/common/helpers.js

@@ -1,4 +1,4 @@
-"use strict";var core=require("@gem-sdk/core");const overwriteDefaultRadius=e=>{let t={...e},r=!0;return t&&Object.keys(t??{}).forEach(e=>{if("bblr"===e||"bbrr"===e||"btlr"===e||"btrr"===e){let i=t[e]??{};"0px"!==i&&(r=!1)}}),r?core.getCornerCSSFromGlobal(t):{}},getAspectRatio=({styles:e,setting:t})=>{let{srcSet:r,image:i}=t??{},{customAspectRadio:a,shape:o}=e??{},s={desktop:composeAspectRatio({device:"desktop",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.desktop:i,custom:a}),tablet:composeAspectRatio({device:"tablet",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.tablet:i,custom:a}),mobile:composeAspectRatio({device:"mobile",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.mobile:i,custom:a})};return o?core.getAspectRatioGlobalSize(o):s},composeAspectRatio=({device:e,aspect:t,custom:r,auto:i})=>{let a=t?.[e];return"auto"===a?i?.height?`${i.width}/${i.height}`:void 0:"custom"===a?r?.[e]?.height?`${r?.[e]?.width}/${r?.[e]?.height}`:void 0:a},getResponsiveObjectFit=({layout:e,isDisableObjectFit:t})=>t?{}:core.makeStyleResponsive("objf",e),getAspectRatioNextImage=({isDisableAspectStyle:e,aspectRatio:t,objectFits:r,width:i,height:a})=>{if(e)return{};let o={};return core.DEVICES.forEach(e=>{let s=`--objf${"desktop"!==e?`-${e}`:""}`,g=r?.[s]||r?.["--objf"];if(t?.[e]==="auto"&&"contain"===g){o[e]="auto";return}o[e]=t?.[e]!=="auto"&&t?.[e]?t[e]:`${i}/${a}`}),o},safeStringify=e=>JSON.stringify(e||{}).replace(/"/g,"&quot;"),shimmer=(e,t)=>`<svg width="${e}" height="${t}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../helpers.js");const overwriteDefaultRadius=e=>{let t={...e},r=!0;return t&&Object.keys(t??{}).forEach(e=>{if("bblr"===e||"bbrr"===e||"btlr"===e||"btrr"===e){let i=t[e]??{};"0px"!==i&&(r=!1)}}),r?core.getCornerCSSFromGlobal(t):{}},getAspectRatio=({styles:e,setting:t})=>{let{srcSet:r,image:i}=t??{},{customAspectRadio:a,shape:l}=e??{},o={desktop:composeAspectRatio({device:"desktop",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.desktop:i,custom:a}),tablet:composeAspectRatio({device:"tablet",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.tablet:i,custom:a}),mobile:composeAspectRatio({device:"mobile",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.mobile:i,custom:a})};return l?core.getAspectRatioGlobalSize(l):o},composeAspectRatio=({device:e,aspect:t,custom:r,auto:i})=>{let a=t?.[e];return"auto"===a?i?.height?`${i.width}/${i.height}`:void 0:"custom"===a?r?.[e]?.height?`${r?.[e]?.width}/${r?.[e]?.height}`:void 0:a},getResponsiveObjectFit=({layout:e,isDisableObjectFit:t})=>t?{}:core.makeStyleResponsive("objf",e),getAspectRatioNextImage=({isDisableAspectStyle:e,aspectRatio:t,objectFits:r,width:i,height:a})=>{if(e)return{};let l={};return core.DEVICES.forEach(e=>{let o=`--objf${"desktop"!==e?`-${e}`:""}`,s=r?.[o]||r?.["--objf"];if(t?.[e]==="auto"&&"contain"===s){l[e]="auto";return}l[e]=t?.[e]!=="auto"&&t?.[e]?t[e]:`${i}/${a}`}),l},safeStringify=e=>JSON.stringify(e||{}).replace(/"/g,"&quot;"),shimmer=(e,t)=>`<svg width="${e}" height="${t}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
       <linearGradient id="g-${e}-${t}">
         <stop stop-color="rgba(51, 51, 51, 0)" offset="20%" />
@@ -9,4 +9,4 @@
     <rect width="${e}" height="${t}" fill="rgba(51, 51, 51, 0)" />
     <rect id="r" width="${e}" height="${t}" fill="url(#g-${e}-${t})" />
     <animate xlink:href="#r" attributeName="x" from="-${e}" to="${e}" dur="1s" repeatCount="indefinite"  />
-  </svg>`,toBase64=e=>"undefined"==typeof window?Buffer.from(e).toString("base64"):window.btoa(e),createBlurDataURL=(e,t)=>`data:image/svg+xml;base64,${toBase64(shimmer(e,t))}`,IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",FALLBACK_IMAGE="https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",NEXT_IMAGE_CONFIG={DEFAULT_SIZES:"100vw",DEFAULT_ALT:"Alt image",DEFAULT_SRC:"https://cdn.shopify.com/s/files/1/2005/9307/files/placeholder-1.png?v=1751355990",DEFAULT_WIDTH_PROPS:800,DEFAULT_HEIGHT_PROPS:533},getAdaptiveImageData=e=>{let{srcSet:t,fallbackImg:r}=e,i=e=>{let{isLiquid:i}=e??{},a=getImageSrc(t?.desktop,"desktop",!i)||r||FALLBACK_IMAGE,o=getImageSrc(t?.tablet,"tablet",!i)||getImageSrc(t?.desktop,"tablet",!i)||r||FALLBACK_IMAGE,s=getImageSrc(t?.mobile,"mobile",!i)||getImageSrc(t?.tablet,"mobile",!i)||getImageSrc(t?.desktop,"mobile",!i)||r||FALLBACK_IMAGE;return{srcTablet:o,srcMobile:s,srcDesktop:a}};return{getDeviceSource:i}},getSrcSet=(e,t,r)=>e?getSrcSetLiquid(e,t):getSrcSetLink(r),isCannotResizeImage=e=>e.includes("webp")||e.includes("jfif")||e.includes(".svg")||e.includes(".tiff"),getSrcSetLiquid=(e,t)=>{let r=replaceBackupFileKeyFileContent(e);return isCannotResizeImage(e)?"FILE_CONTENT"==t?`{{ '${r}' | file_url }} 768w, {{ '${r}' | file_url }} 1024w, {{ '${r}' | file_url }} 1440w`:`{{ '${e}' | asset_url }} 768w, {{ '${e}' | asset_url }} 1024w, {{ '${e}' | asset_url }} 1440w`:"FILE_CONTENT"==t?`{{ '${r}' | file_img_url: '768x' }} 768w, {{ '${r}' | file_img_url: '1024x' }} 1024w, {{ '${r}' | file_img_url: 'master' }} 1440w`:`{{ '${e}' | asset_img_url: '768x' }} 768w, {{ '${e}' | asset_img_url: '1024x' }} 1024w, {{ '${e}' | asset_img_url: 'master' }} 1440w`},getSrcSetLink=e=>e,getImageSrc=(e,t,r)=>{if(e?.metafieldDefinitionKey)return getImageMetafieldDefinitionKey(e?.metafieldDefinitionKey);let i=e?.backupFilePath??e?.src??"";if(r)i=e?.src||"";else if(e?.backupFileKey){let t=getNewBackupFileKey(e.backupFileKey,e?.src??"");"THEME"!==e.storage&&e.storage?"FILE_CONTENT"===e.storage&&(i=`{{ "${replaceBackupFileKeyFileContent(t)}" | file_url }}`):i=`{{ "${t}" | asset_url }}`}if(t&&i?.includes("cdn.shopify"))switch(t){case"tablet":i=i?.replace(regexReplaceEndDot,"_1024x.");break;case"mobile":i=i?.replace(regexReplaceEndDot,"_768x.")}return i},getImageMetafieldDefinitionKey=e=>`{{${e} | file_url}}`,regexReplaceEndDot=/\.(?=[^.]*$)/,replaceBackupFileKeyFileContent=e=>e.replace(/\.jpeg|\.jfif/g,".jpg"),getNewBackupFileKey=(e,t)=>{let r=t?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];return r&&r!=e?r:e};function resizeImage(e,t){let r=e.match(/\.webp/g)?.length,i=replaceRegexLastMatch({str:e,reg:/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g,newString:"."});if(r)return i;let a=replaceRegexLastMatch({str:i,reg:/\.jpg|\.png|\.gif|\.jpeg/g,newString:t,isAdd:!0});return a}const replaceRegexLastMatch=e=>{let t=e.str,r=e.str.match(e.reg)?.length;if(r){let i,a=1;for(;null!==(i=e.reg.exec(e.str));){if(a===r){let r=e.reg.lastIndex,a=r-i[0].length;e.isAdd&&(e.newString="_"+e.newString+i),t=t.slice(0,a)+e.newString+t.slice(r,t.length)}a++}}return t},getItemWidth=(e,t)=>{let r=getCurrentDevice(),i=t?.[r]||"auto";if(!i||"auto"===i||i.includes("%"))return e;let a=Number(i.replace("px",""));return a>e?e:Number(i.replace("px",""))},getImageWidthFollowByQuality=e=>{let{itemWidthParam:t,imageWidthSetting:r,qualityType:i,qualityPercent:a}=e,o=getCurrentDevice(),s=getItemWidth(t,r),g=core.getResponsiveValueByScreen(i,o,"finest"),l=core.getResponsiveValueByScreen(a,o,100);switch(g){case"finest":default:return"auto";case"high":return Math.round(1.5*s)||1;case"medium":return Math.round(s)||1;case"custom":return Math.round(s*(Number(l)/100))||1}},getWidthOfFeatureImageSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return core.DEVICES.forEach(r=>{let i=core.getResponsiveValueByScreen(e,r)?.width||"100%";t[r]=i}),t},getWidthOfImageListSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return core.DEVICES.forEach(r=>{let i=core.getResponsiveValueByScreen(e,r)?.width||"100%";t[r]=i}),t},getWidthOfListImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-gallery-image-item`),r=0;return t.forEach(e=>{e.offsetWidth>r&&(r=e.offsetWidth)}),r},getWidthOfFeatureImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-ft-image-item`),r=0;return t.forEach(e=>{e.offsetWidth>r&&(r=e.offsetWidth)}),r},handleSetSrcForProductImageList=e=>{let{shapeByLayout:t,qualityType:r,qualityPercent:i,builderPropUID:a}=e,o=document.querySelectorAll(`.gem-slider-item-${a}.gp-gallery-image-item`),s=getWidthOfImageListSetting(t),g=getWidthOfListImageInDom(a);o.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:s,width:g,qualityType:r,qualityPercent:i})})},handleSetSrcForFeatureProductImage=e=>{let{ftShape:t,qualityType:r,qualityPercent:i,builderPropUID:a}=e,o=document.querySelectorAll(`.gem-slider-item-${a}.gp-ft-image-item`),s=getWidthOfFeatureImageSetting(t),g=getWidthOfFeatureImageInDom(a);o.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:s,width:g,qualityType:r,qualityPercent:i})})},handleSetSrcForGalleryImage=e=>{let{item:t,settingWidth:r,width:i,qualityType:a,qualityPercent:o}=e,s=getCurrentDevice(),g=t.querySelector("img");if(g){let e=getImageWidthFollowByQuality({itemWidthParam:i,imageWidthSetting:r,qualityType:a,qualityPercent:o}),t=g.getAttribute("base-src");if(!t)return;let l=getImageSrcByQuality(e,t),c=getImageSrcSet(t,l,s);g.setAttribute("srcset",c)}},getImageSrcByQuality=(e,t)=>"auto"===e?t:resizeImage(t,`${e}x`),getImageSrcSet=(e,t,r)=>`${"mobile"===r&&e!==t?t:resizeImage(e,"768x")} 767w, ${"tablet"===r&&e!==t?t:resizeImage(e,"1024x")} 1023w, ${"desktop"===r&&e!==t?t:resizeImage(e,"1920x")} 1440w`,getCurrentDevice=()=>window.innerWidth<768?"mobile":window.innerWidth>=768&&window.innerWidth<1025?"tablet":"desktop";exports.FALLBACK_IMAGE=FALLBACK_IMAGE,exports.IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",exports.NEXT_IMAGE_CONFIG=NEXT_IMAGE_CONFIG,exports.composeAspectRatio=composeAspectRatio,exports.createBlurDataURL=createBlurDataURL,exports.getAdaptiveImageData=getAdaptiveImageData,exports.getAspectRatio=getAspectRatio,exports.getAspectRatioNextImage=getAspectRatioNextImage,exports.getCurrentDevice=getCurrentDevice,exports.getImageSrc=getImageSrc,exports.getImageWidthFollowByQuality=getImageWidthFollowByQuality,exports.getNewBackupFileKey=getNewBackupFileKey,exports.getResponsiveObjectFit=getResponsiveObjectFit,exports.getSrcSet=getSrcSet,exports.handleSetSrcForFeatureProductImage=handleSetSrcForFeatureProductImage,exports.handleSetSrcForProductImageList=handleSetSrcForProductImageList,exports.isCannotResizeImage=isCannotResizeImage,exports.overwriteDefaultRadius=overwriteDefaultRadius,exports.regexReplaceEndDot=regexReplaceEndDot,exports.replaceBackupFileKeyFileContent=replaceBackupFileKeyFileContent,exports.resizeImage=resizeImage,exports.safeStringify=safeStringify,exports.shimmer=shimmer,exports.toBase64=toBase64;
+  </svg>`,toBase64=e=>"undefined"==typeof window?Buffer.from(e).toString("base64"):window.btoa(e),createBlurDataURL=(e,t)=>`data:image/svg+xml;base64,${toBase64(shimmer(e,t))}`,IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",FALLBACK_IMAGE="https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",NEXT_IMAGE_CONFIG={DEFAULT_SIZES:"100vw",DEFAULT_ALT:"Alt image",DEFAULT_SRC:"https://cdn.shopify.com/s/files/1/2005/9307/files/placeholder-1.png?v=1751355990",DEFAULT_WIDTH_PROPS:800,DEFAULT_HEIGHT_PROPS:533},getAdaptiveImageData=e=>{let{srcSet:t,fallbackImg:r}=e,i=e=>{let{isLiquid:i}=e??{},a=getImageSrc(t?.desktop,"desktop",!i)||r||FALLBACK_IMAGE,l=getImageSrc(t?.tablet,"tablet",!i)||getImageSrc(t?.desktop,"tablet",!i)||r||FALLBACK_IMAGE,o=getImageSrc(t?.mobile,"mobile",!i)||getImageSrc(t?.tablet,"mobile",!i)||getImageSrc(t?.desktop,"mobile",!i)||r||FALLBACK_IMAGE;return{srcTablet:l,srcMobile:o,srcDesktop:a}};return{getDeviceSource:i}},getSettingTranslatedImageAndSeo=({setting:e,uid:t,pageContext:r})=>{let i=e?.translate?"true":void 0;if(!e||!i)return{};let a=core.cloneDeep(e);for(let e in a.srcSet){let l=a.srcSet[e];if(l&&l.src){let a=helpers.getDynamicSourceLocales({val:l.src,uid:t,settingId:`srcSet_${e}_src`,translate:i,pageContext:r});l.src=String(a)}}let l=helpers.getDynamicSourceLocales({val:a.alt,uid:t,settingId:"alt",translate:i,pageContext:r});a.alt=String(l);let o=helpers.getDynamicSourceLocales({val:a.title,uid:t,settingId:"title",translate:i,pageContext:r});return a.title=String(o),a},getSrcSet=(e,t,r)=>e?getSrcSetLiquid(e,t):getSrcSetLink(r),isCannotResizeImage=e=>e.includes("webp")||e.includes("jfif")||e.includes(".svg")||e.includes(".tiff"),getSrcSetLiquid=(e,t)=>{let r=replaceBackupFileKeyFileContent(e);return isCannotResizeImage(e)?"FILE_CONTENT"==t?`{{ '${r}' | file_url }} 768w, {{ '${r}' | file_url }} 1024w, {{ '${r}' | file_url }} 1440w`:`{{ '${e}' | asset_url }} 768w, {{ '${e}' | asset_url }} 1024w, {{ '${e}' | asset_url }} 1440w`:"FILE_CONTENT"==t?`{{ '${r}' | file_img_url: '768x' }} 768w, {{ '${r}' | file_img_url: '1024x' }} 1024w, {{ '${r}' | file_img_url: 'master' }} 1440w`:`{{ '${e}' | asset_img_url: '768x' }} 768w, {{ '${e}' | asset_img_url: '1024x' }} 1024w, {{ '${e}' | asset_img_url: 'master' }} 1440w`},getSrcSetLink=e=>e,getImageSrc=(e,t,r)=>{if(e?.metafieldDefinitionKey)return getImageMetafieldDefinitionKey(e?.metafieldDefinitionKey);let i=e?.backupFilePath??e?.src??"";if(r)i=e?.src||"";else if(e?.backupFileKey){let t=getNewBackupFileKey(e.backupFileKey,e?.src??"");"THEME"!==e.storage&&e.storage?"FILE_CONTENT"===e.storage&&(i=`{{ "${replaceBackupFileKeyFileContent(t)}" | file_url }}`):i=`{{ "${t}" | asset_url }}`}if(t&&i?.includes("cdn.shopify"))switch(t){case"tablet":i=i?.replace(regexReplaceEndDot,"_1024x.");break;case"mobile":i=i?.replace(regexReplaceEndDot,"_768x.")}return i},getImageMetafieldDefinitionKey=e=>`{{${e} | file_url}}`,regexReplaceEndDot=/\.(?=[^.]*$)/,replaceBackupFileKeyFileContent=e=>e.replace(/\.jpeg|\.jfif/g,".jpg"),getNewBackupFileKey=(e,t)=>{let r=t?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];return r&&r!=e?r:e};function resizeImage(e,t){let r=e.match(/\.webp/g)?.length,i=replaceRegexLastMatch({str:e,reg:/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g,newString:"."});if(r)return i;let a=replaceRegexLastMatch({str:i,reg:/\.jpg|\.png|\.gif|\.jpeg/g,newString:t,isAdd:!0});return a}const replaceRegexLastMatch=e=>{let t=e.str,r=e.str.match(e.reg)?.length;if(r){let i,a=1;for(;null!==(i=e.reg.exec(e.str));){if(a===r){let r=e.reg.lastIndex,a=r-i[0].length;e.isAdd&&(e.newString="_"+e.newString+i),t=t.slice(0,a)+e.newString+t.slice(r,t.length)}a++}}return t},getItemWidth=(e,t)=>{let r=getCurrentDevice(),i=t?.[r]||"auto";if(!i||"auto"===i||i.includes("%"))return e;let a=Number(i.replace("px",""));return a>e?e:Number(i.replace("px",""))},getImageWidthFollowByQuality=e=>{let{itemWidthParam:t,imageWidthSetting:r,qualityType:i,qualityPercent:a}=e,l=getCurrentDevice(),o=getItemWidth(t,r),s=core.getResponsiveValueByScreen(i,l,"finest"),g=core.getResponsiveValueByScreen(a,l,100);switch(s){case"finest":default:return"auto";case"high":return Math.round(1.5*o)||1;case"medium":return Math.round(o)||1;case"custom":return Math.round(o*(Number(g)/100))||1}},getWidthOfFeatureImageSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return core.DEVICES.forEach(r=>{let i=core.getResponsiveValueByScreen(e,r)?.width||"100%";t[r]=i}),t},getWidthOfImageListSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return core.DEVICES.forEach(r=>{let i=core.getResponsiveValueByScreen(e,r)?.width||"100%";t[r]=i}),t},getWidthOfListImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-gallery-image-item`),r=0;return t.forEach(e=>{e.offsetWidth>r&&(r=e.offsetWidth)}),r},getWidthOfFeatureImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-ft-image-item`),r=0;return t.forEach(e=>{e.offsetWidth>r&&(r=e.offsetWidth)}),r},handleSetSrcForProductImageList=e=>{let{shapeByLayout:t,qualityType:r,qualityPercent:i,builderPropUID:a}=e,l=document.querySelectorAll(`.gem-slider-item-${a}.gp-gallery-image-item`),o=getWidthOfImageListSetting(t),s=getWidthOfListImageInDom(a);l.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:o,width:s,qualityType:r,qualityPercent:i})})},handleSetSrcForFeatureProductImage=e=>{let{ftShape:t,qualityType:r,qualityPercent:i,builderPropUID:a}=e,l=document.querySelectorAll(`.gem-slider-item-${a}.gp-ft-image-item`),o=getWidthOfFeatureImageSetting(t),s=getWidthOfFeatureImageInDom(a);l.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:o,width:s,qualityType:r,qualityPercent:i})})},handleSetSrcForGalleryImage=e=>{let{item:t,settingWidth:r,width:i,qualityType:a,qualityPercent:l}=e,o=getCurrentDevice(),s=t.querySelector("img");if(s){let e=getImageWidthFollowByQuality({itemWidthParam:i,imageWidthSetting:r,qualityType:a,qualityPercent:l}),t=s.getAttribute("base-src");if(!t)return;let g=getImageSrcByQuality(e,t),c=getImageSrcSet(t,g,o);s.setAttribute("srcset",c)}},getImageSrcByQuality=(e,t)=>"auto"===e?t:resizeImage(t,`${e}x`),getImageSrcSet=(e,t,r)=>`${"mobile"===r&&e!==t?t:resizeImage(e,"768x")} 767w, ${"tablet"===r&&e!==t?t:resizeImage(e,"1024x")} 1023w, ${"desktop"===r&&e!==t?t:resizeImage(e,"1920x")} 1440w`,getCurrentDevice=()=>window.innerWidth<768?"mobile":window.innerWidth>=768&&window.innerWidth<1025?"tablet":"desktop";exports.FALLBACK_IMAGE=FALLBACK_IMAGE,exports.IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",exports.NEXT_IMAGE_CONFIG=NEXT_IMAGE_CONFIG,exports.composeAspectRatio=composeAspectRatio,exports.createBlurDataURL=createBlurDataURL,exports.getAdaptiveImageData=getAdaptiveImageData,exports.getAspectRatio=getAspectRatio,exports.getAspectRatioNextImage=getAspectRatioNextImage,exports.getCurrentDevice=getCurrentDevice,exports.getImageSrc=getImageSrc,exports.getImageWidthFollowByQuality=getImageWidthFollowByQuality,exports.getNewBackupFileKey=getNewBackupFileKey,exports.getResponsiveObjectFit=getResponsiveObjectFit,exports.getSettingTranslatedImageAndSeo=getSettingTranslatedImageAndSeo,exports.getSrcSet=getSrcSet,exports.handleSetSrcForFeatureProductImage=handleSetSrcForFeatureProductImage,exports.handleSetSrcForProductImageList=handleSetSrcForProductImageList,exports.isCannotResizeImage=isCannotResizeImage,exports.overwriteDefaultRadius=overwriteDefaultRadius,exports.regexReplaceEndDot=regexReplaceEndDot,exports.replaceBackupFileKeyFileContent=replaceBackupFileKeyFileContent,exports.resizeImage=resizeImage,exports.safeStringify=safeStringify,exports.shimmer=shimmer,exports.toBase64=toBase64;

package/dist/cjs/image/components/Image.liquid.js

@@ -1,16 +1,16 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),helpers=require("../../helpers.js"),AdaptiveImage_liquid=require("./AdaptiveImage.liquid.js"),NextImage_liquid=require("./NextImage.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),attrs=require("../common/attrs.js");const Image=({style:e,styles:s,setting:t,advanced:a,className:r,pageContext:l,builderAttrs:i,builderProps:m})=>{let{imageLink:y,isAdaptive:g,enableImageLink:u}=t??{},{enableLazyLoadImage:d}=l??{},{Wrapper:c,urlData:p}=helpers.getLinkData({defaultWrap:"div",setting:y,enableImageLink:u,isLiquid:!0}),o=system.createStyle(styles.getWrapperStyles(s)),q=system.createStyle(styles.getImageStyles(s,m)),n=system.createStyle(styles.getContainerStyles(e,s)),I=system.createClass(classes.getWrapperClasses()),A=system.createClass(classes.getImageClasses(r,s)),C=system.createClass(classes.getContainerClasses(m?.uid,a?.cssClass,s?.shape)),v=system.createAttr(attrs.getContainerAttrs(i,m?.uid)),$=attrs.getLinkWrapperAttrs({urlData:p,imageLink:y,title:t?.title,isLiquid:!0}),j=attrs.getAdaptiveImageAttrs({styles:s,setting:t,isLiquid:!0}),f=attrs.getNextImageAttrs({styles:s,setting:t}),x=attrs.getImageLiquidAttrs({pageContext:l,enableLazyLoadImage:d}),L=()=>system.If(g,AdaptiveImage_liquid.default({...x,...j,style:q,className:A}),NextImage_liquid.default({...x,...f,style:q,className:A})),N=()=>L();return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),helpers$1=require("../../helpers.js"),AdaptiveImage_liquid=require("./AdaptiveImage.liquid.js"),NextImage_liquid=require("./NextImage.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),attrs=require("../common/attrs.js"),helpers=require("../common/helpers.js");const Image=({style:e,styles:s,setting:t,advanced:a,className:r,pageContext:l,builderAttrs:i,builderProps:m})=>{let g=helpers.getSettingTranslatedImageAndSeo({setting:t,uid:m?.uid,pageContext:l}),{imageLink:d,isAdaptive:u,enableImageLink:y}=g??{},{enableLazyLoadImage:c}=l??{},{Wrapper:p,urlData:n}=helpers$1.getLinkData({defaultWrap:"div",setting:d,enableImageLink:y,isLiquid:!0}),o=system.createStyle(styles.getWrapperStyles(s)),q=system.createStyle(styles.getImageStyles(s,m)),I=system.createStyle(styles.getContainerStyles(e,s)),A=system.createClass(classes.getWrapperClasses()),$=system.createClass(classes.getImageClasses(r,s)),C=system.createClass(classes.getContainerClasses(m?.uid,a?.cssClass,s?.shape)),v=system.createAttr(attrs.getContainerAttrs(i,m?.uid)),j=attrs.getLinkWrapperAttrs({urlData:n,imageLink:d,title:g?.title,isLiquid:!0}),S=attrs.getAdaptiveImageAttrs({styles:s,setting:g,isLiquid:!0}),h=attrs.getNextImageAttrs({styles:s,setting:g}),f=attrs.getImageLiquidAttrs({pageContext:l,enableLazyLoadImage:c}),x=()=>system.If(u,AdaptiveImage_liquid.default({...f,...S,style:q,className:$}),NextImage_liquid.default({...f,...h,style:q,className:$})),L=()=>x();return core.template`
     <div
       role="presentation"
       ${{...v}}
-      style="${n}"
+      style="${I}"
       class="${C}"
     >
-      <${c}
-        ${$}
+      <${p}
+        ${j}
         style="${o}"
-        class="${I}"
+        class="${A}"
       >
-        ${N()}
-      </${c}>
+        ${L()}
+      </${p}>
     </div>
   `};exports.default=Image;

package/dist/cjs/image/settings/configs/settings.js

@@ -1 +1 @@
-"use strict";const ImageSettings=[{id:"setting",controls:[{id:"imageStyle",label:"Style",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,popoverLabel:{en:"Style"},itemPerRow:2,itemSpacing:"large",options:[{label:"Rectangle",value:"rectangle",iconName:"gp-image-rectangle-style"},{label:"Circle",value:"circle",iconName:"gp-image-circle-style"}],default:"rectangle"},{id:"image-info",label:"Image",type:"group",controls:[{id:"image",type:"image-select",label:"Pick Image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}},{id:"srcSet",type:"image-select",hide:!0,dynamicSource:!0,devices:{desktop:{default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}}}},{id:"isAdaptive",type:"toggle",label:"Adaptive",default:!0,hideOnMode:{mobileOnly:!0}}]},{id:"enableImageLink",type:"toggle",default:!1,compoDefaultValue:!1},{id:"imageLink",type:"pick-link",label:"Pick Link",default:{type:"open-page",link:"",target:"_self"},hiddenOptions:{"stay-on-page":!0}},{id:"seo",type:"group",label:"SEO",controls:[{id:"alt",label:"Alt Text",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: Classic white crewneck t-shirt with minimalist design",default:void 0},{id:"title",label:"Image title",info:"Show title when hover to image",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: White t-shirt",default:void 0}]},{id:"optimize",type:"group",label:"Optimize",hiddenWithGemPages:!0,controls:[{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],showDefaultUnit:!0,min:100,max:400,step:50,useOnlyUnitInit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"priority",type:"toggle",label:"Preload",default:!1}]},{id:"isNotLazyload",type:"toggle",default:!1}]},{id:"style",controls:[{id:"shape",type:"size-setting",label:"",devices:{desktop:{default:{shape:"original",shapeLinked:!0,width:"1200px"}}},settingConfig:{width:{displayOptions:["full"]},height:{displayOptions:["full"],units:["px","%"]}},hiddenSettings:["padding","gap"]},{id:"objectFit",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill image",value:"cover",type:"image",svgName:"gp-image-cover"},{label:"Fit image",value:"contain",type:"image",svgName:"gp-image-contain"}],devices:{desktop:{default:"cover"}}},{id:"align",label:"Align",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"center"}}},{id:"behavior-state",type:"behavior-state",label:"Behavior State",controls:[{id:"borderImg",type:"border",label:"Border",default:{normal:{borderType:"none",border:"none",width:"1px 1px 1px 1px",borderWidth:"1px",color:"#000000",isCustom:!1}},state:{hover:!0,normal:!0}},{id:"opacity",label:"Overlay Opacity",type:"input:slider",min:0,max:100,step:1,units:["%"],useOnlyUnitInit:!0,default:{normal:0},state:{normal:!0,hover:!0}},{id:"opacityColor",label:"Overlay Color",type:"colorpicker",default:{normal:"#242424"},state:{normal:!0,hover:!0}},{id:"hasBoxShadowImg",type:"toggle",label:"Enable Image Shadow",default:{normal:!1},state:{normal:!0,hover:!0}},{id:"boxShadowImg",type:"boxShadow",label:"Image Shadow",hideOnState:{normal:!0,hover:!0},default:{normal:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45}},state:{normal:!0,hover:!0}}]},{id:"wrapperBorder",type:"border",label:"Border",default:{borderType:"none",border:"none",width:"1px 1px 1px 1px",position:"all",borderWidth:"1px",color:"#000000",isCustom:!0}},{id:"borderRadius",type:"radius-preset",label:"Corner",default:{radiusType:"none"},compoDefaultValue:{bblr:"20px",btrr:"20px",bbrr:"20px",btlr:"20px",radiusType:"rounded"}},{id:"hasActiveShadow",type:"toggle",label:"Enable Button Shadow",default:!1},{id:"shadow",type:"shadow-v2",label:"Button Shadow",default:{type:"none",distance:"10px",blur:"12px",spread:"10px",color:"rgba(18, 18, 18, 0.77)",angle:40}}]}];exports.ImageSettings=ImageSettings;
+"use strict";const ImageSettings=[{id:"setting",controls:[{id:"translate",type:"input",default:[{id:"srcSet",fields:["src"]},{id:"alt"},{id:"title"}]},{id:"imageStyle",label:"Style",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,popoverLabel:{en:"Style"},itemPerRow:2,itemSpacing:"large",options:[{label:"Rectangle",value:"rectangle",iconName:"gp-image-rectangle-style"},{label:"Circle",value:"circle",iconName:"gp-image-circle-style"}],default:"rectangle"},{id:"image-info",label:"Image",type:"group",controls:[{id:"image",type:"image-select",label:"Pick Image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}},{id:"srcSet",type:"image-select",hide:!0,dynamicSource:!0,devices:{desktop:{default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}}}},{id:"isAdaptive",type:"toggle",label:"Adaptive",default:!0,hideOnMode:{mobileOnly:!0}}]},{id:"enableImageLink",type:"toggle",default:!1,compoDefaultValue:!1},{id:"imageLink",type:"pick-link",label:"Pick Link",default:{type:"open-page",link:"",target:"_self"},hiddenOptions:{"stay-on-page":!0}},{id:"seo",type:"group",label:"SEO",controls:[{id:"alt",label:"Alt Text",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: Classic white crewneck t-shirt with minimalist design",default:void 0},{id:"title",label:"Image title",info:"Show title when hover to image",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: White t-shirt",default:void 0}]},{id:"optimize",type:"group",label:"Optimize",hiddenWithGemPages:!0,controls:[{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],showDefaultUnit:!0,min:100,max:400,step:50,useOnlyUnitInit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"priority",type:"toggle",label:"Preload",default:!1}]},{id:"isNotLazyload",type:"toggle",default:!1}]},{id:"style",controls:[{id:"shape",type:"size-setting",label:"",devices:{desktop:{default:{shape:"original",shapeLinked:!0,width:"1200px"}}},settingConfig:{width:{displayOptions:["full"]},height:{displayOptions:["full"],units:["px","%"]}},hiddenSettings:["padding","gap"]},{id:"objectFit",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill image",value:"cover",type:"image",svgName:"gp-image-cover"},{label:"Fit image",value:"contain",type:"image",svgName:"gp-image-contain"}],devices:{desktop:{default:"cover"}}},{id:"align",label:"Align",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"center"}}},{id:"behavior-state",type:"behavior-state",label:"Behavior State",controls:[{id:"borderImg",type:"border",label:"Border",default:{normal:{borderType:"none",border:"none",width:"1px 1px 1px 1px",borderWidth:"1px",color:"#000000",isCustom:!1}},state:{hover:!0,normal:!0}},{id:"opacity",label:"Overlay Opacity",type:"input:slider",min:0,max:100,step:1,units:["%"],useOnlyUnitInit:!0,default:{normal:0},state:{normal:!0,hover:!0}},{id:"opacityColor",label:"Overlay Color",type:"colorpicker",default:{normal:"#242424"},state:{normal:!0,hover:!0}},{id:"hasBoxShadowImg",type:"toggle",label:"Enable Image Shadow",default:{normal:!1},state:{normal:!0,hover:!0}},{id:"boxShadowImg",type:"boxShadow",label:"Image Shadow",hideOnState:{normal:!0,hover:!0},default:{normal:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45}},state:{normal:!0,hover:!0}}]},{id:"wrapperBorder",type:"border",label:"Border",default:{borderType:"none",border:"none",width:"1px 1px 1px 1px",position:"all",borderWidth:"1px",color:"#000000",isCustom:!0}},{id:"borderRadius",type:"radius-preset",label:"Corner",default:{radiusType:"none"},compoDefaultValue:{bblr:"20px",btrr:"20px",bbrr:"20px",btlr:"20px",radiusType:"rounded"}},{id:"hasActiveShadow",type:"toggle",label:"Enable Button Shadow",default:!1},{id:"shadow",type:"shadow-v2",label:"Button Shadow",default:{type:"none",distance:"10px",blur:"12px",spread:"10px",color:"rgba(18, 18, 18, 0.77)",angle:40}}]}];exports.ImageSettings=ImageSettings;

package/dist/cjs/image-comparison/common/helpers.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core"),helpers=require("../../image/common/helpers.js");const getAspectRatioData=({styles:t,leftImage:e,rightImage:o})=>{let i=(e?.width??0)/(e?.height??1),a=(o?.width??0)/(o?.height??1),s=i<=a?`${e?.width??0}/${e?.height??1}`:`${o?.width??0}/${o?.height??1}`,r=i<=a?e:o,l=composeResponsiveAspectRatio({aspect:t?.aspectRatio,auto:r,custom:t?.customAspectRadio,defaultRatio:s});return{defaultRatio:s,responsiveAspectRatio:l}},composeResponsiveAspectRatio=({aspect:t,auto:e,custom:o,defaultRatio:i})=>({desktop:helpers.composeAspectRatio({device:"desktop",aspect:t,auto:e,custom:o})??i,tablet:helpers.composeAspectRatio({device:"tablet",aspect:t,auto:e,custom:o}),mobile:helpers.composeAspectRatio({device:"mobile",aspect:t,auto:e,custom:o})}),composeLabelPosition=({input:t,isHorizontal:e})=>{let{device:o,positionHoz:i,positionVer:a}=t,s=e?core.getResponsiveValueByScreen(i,o,"hoz-center"):core.getResponsiveValueByScreen(a,o,"ver-center"),r={topLeft:"50%",bottomRight:"auto"};return({"hoz-center":{topLeft:"50%",bottomRight:"auto"},top:{topLeft:"8px",bottomRight:"auto"},bottom:{topLeft:"auto",bottomRight:"8px"},"ver-center":{topLeft:"50%",bottomRight:"auto"},left:{topLeft:"8px",bottomRight:"auto"},right:{topLeft:"auto",bottomRight:"8px"}})[s]??r},getLabelPosition=({position:t,labelPositionHoz:e,labelPositionVer:o,isHorizontal:i})=>({desktop:composeLabelPosition({input:{device:"desktop",positionHoz:e,positionVer:o},isHorizontal:i})?.[t??"topLeft"],tablet:composeLabelPosition({input:{device:"tablet",positionHoz:e,positionVer:o},isHorizontal:i})?.[t??"topLeft"],mobile:composeLabelPosition({input:{device:"mobile",positionHoz:e,positionVer:o},isHorizontal:i})?.[t??"topLeft"]}),generateTranslateByDevices=({isHorizontal:t,labelPositionHoz:e,labelPositionVer:o})=>{let i=t?e:o,a={desktop:i?.desktop??"hoz-center",tablet:i?.tablet??i?.desktop??"hoz-center",mobile:i?.mobile??i?.tablet??i?.desktop??"hoz-center"},s={desktop:"translateX(0) translateY(0)",tablet:"translateX(0) translateY(0)",mobile:"translateX(0) translateY(0)"};for(let e in a){let o=a?.[e];o.includes("center")?s[e]=t?"translateX(0) translateY(-50%)":"translateX(-50%) translateY(0)":s[e]="translateX(0) translateY(0)"}return s},getSliderPositionPercentage=t=>{let e="string"==typeof t?parseInt(t??0):t;return(e??50)/100},FLEX_ALIGN={left:"start",center:"center",right:"end",justify:"start"},getData=t=>{let{handle:e=null,hover:o=!1,handleSize:i=40,leftImageAlt:a="",leftImageTitle:s="",leftImageCss:r={},leftImageLabel:l=null,rightImageAlt:p="",rightImageTitle:n="",rightImageCss:c={},rightImageLabel:g=null,sliderLineWidth:u=2,sliderLineColor:m="#ffffff",sliderPositionPercentage:b=.5,vertical:h=!1,componentUid:d="",styles:L={},leftImage:R,rightImage:f,enableLabel:y=!1,qualityType:S,qualityPercent:x}=t,P=!h,v=y&&!!l,A=y&&!!g,C=(R?.width??0)<(f?.width??0)?{...R}:{...f},I=t=>{let{isLiquid:e}=t??{};return e?helpers.getImageSrc(R):R?.src??""},k=t=>{let{isLiquid:e}=t??{};return e?helpers.getImageSrc(f):f?.src??""},{responsiveAspectRatio:D,defaultRatio:X}=getAspectRatioData({leftImage:R,rightImage:f,styles:L});return{styles:L,handle:e,hover:o,handleSize:i,leftImageAlt:a,leftImageTitle:s,leftImageCss:r,leftImageLabel:l,rightImageAlt:p,rightImageTitle:n,rightImageCss:c,rightImageLabel:g,sliderLineWidth:u,sliderLineColor:m,sliderPositionPercentage:b,vertical:h,componentUid:d,tempImage:C,aspectRatio:D,defaultRatio:X,isHorizontal:P,hasLeftLabel:v,hasRightLabel:A,qualityType:S,qualityPercent:x,getLeftImageSrc:I,getRightImageSrc:k}},getImageClipStyle=t=>{let{isHorizontal:e,containerWidth:o,containerHeight:i,sliderPosition:a,type:s}=t,r=e?o*a:i*a;return"left"===s?{clip:e?`rect(auto, ${r}px, auto, auto)`:`rect(auto, auto, ${r}px, auto)`}:{clip:e?`rect(auto, auto, auto, ${r}px)`:`rect(${r}px, auto, auto, auto)`}},getSliderPositionStyle=t=>{let{isHorizontal:e,containerWidth:o,containerHeight:i,sliderPosition:a,handleSize:s}=t,r=e?o*a:i*a,l=s/2;return{[e?"top":"left"]:0,[e?"left":"top"]:`${r-l}px`}},getLabelContainerStyles=t=>({...getImageClipStyle(t)}),getReactStyles=t=>({sliderPosition:getSliderPositionStyle(t),leftImageClip:getImageClipStyle({...t,type:"left"}),rightImageClip:getImageClipStyle({...t,type:"right"}),leftLabelContainer:getLabelContainerStyles({...t,type:"left"}),rightLabelContainer:getLabelContainerStyles({...t,type:"right"})});exports.FLEX_ALIGN=FLEX_ALIGN,exports.composeLabelPosition=composeLabelPosition,exports.composeResponsiveAspectRatio=composeResponsiveAspectRatio,exports.generateTranslateByDevices=generateTranslateByDevices,exports.getAspectRatioData=getAspectRatioData,exports.getData=getData,exports.getImageClipStyle=getImageClipStyle,exports.getLabelContainerStyles=getLabelContainerStyles,exports.getLabelPosition=getLabelPosition,exports.getReactStyles=getReactStyles,exports.getSliderPositionPercentage=getSliderPositionPercentage,exports.getSliderPositionStyle=getSliderPositionStyle;
+"use strict";var core=require("@gem-sdk/core"),helpers$1=require("../../image/common/helpers.js"),helpers=require("../../helpers.js");const getAspectRatioData=({styles:e,leftImage:t,rightImage:o})=>{let a=(t?.width??0)/(t?.height??1),i=(o?.width??0)/(o?.height??1),s=a<=i?`${t?.width??0}/${t?.height??1}`:`${o?.width??0}/${o?.height??1}`,r=a<=i?t:o,l=composeResponsiveAspectRatio({aspect:e?.aspectRatio,auto:r,custom:e?.customAspectRadio,defaultRatio:s});return{defaultRatio:s,responsiveAspectRatio:l}},composeResponsiveAspectRatio=({aspect:e,auto:t,custom:o,defaultRatio:a})=>({desktop:helpers$1.composeAspectRatio({device:"desktop",aspect:e,auto:t,custom:o})??a,tablet:helpers$1.composeAspectRatio({device:"tablet",aspect:e,auto:t,custom:o}),mobile:helpers$1.composeAspectRatio({device:"mobile",aspect:e,auto:t,custom:o})}),composeLabelPosition=({input:e,isHorizontal:t})=>{let{device:o,positionHoz:a,positionVer:i}=e,s=t?core.getResponsiveValueByScreen(a,o,"hoz-center"):core.getResponsiveValueByScreen(i,o,"ver-center"),r={topLeft:"50%",bottomRight:"auto"};return({"hoz-center":{topLeft:"50%",bottomRight:"auto"},top:{topLeft:"8px",bottomRight:"auto"},bottom:{topLeft:"auto",bottomRight:"8px"},"ver-center":{topLeft:"50%",bottomRight:"auto"},left:{topLeft:"8px",bottomRight:"auto"},right:{topLeft:"auto",bottomRight:"8px"}})[s]??r},getLabelPosition=({position:e,labelPositionHoz:t,labelPositionVer:o,isHorizontal:a})=>({desktop:composeLabelPosition({input:{device:"desktop",positionHoz:t,positionVer:o},isHorizontal:a})?.[e??"topLeft"],tablet:composeLabelPosition({input:{device:"tablet",positionHoz:t,positionVer:o},isHorizontal:a})?.[e??"topLeft"],mobile:composeLabelPosition({input:{device:"mobile",positionHoz:t,positionVer:o},isHorizontal:a})?.[e??"topLeft"]}),generateTranslateByDevices=({isHorizontal:e,labelPositionHoz:t,labelPositionVer:o})=>{let a=e?t:o,i={desktop:a?.desktop??"hoz-center",tablet:a?.tablet??a?.desktop??"hoz-center",mobile:a?.mobile??a?.tablet??a?.desktop??"hoz-center"},s={desktop:"translateX(0) translateY(0)",tablet:"translateX(0) translateY(0)",mobile:"translateX(0) translateY(0)"};for(let t in i){let o=i?.[t];o.includes("center")?s[t]=e?"translateX(0) translateY(-50%)":"translateX(-50%) translateY(0)":s[t]="translateX(0) translateY(0)"}return s},getSliderPositionPercentage=e=>{let t="string"==typeof e?parseInt(e??0):e;return(t??50)/100},FLEX_ALIGN={left:"start",center:"center",right:"end",justify:"start"},getData=e=>{let{handle:t=null,hover:o=!1,handleSize:a=40,leftImageAlt:i="",leftImageTitle:s="",leftImageCss:r={},leftImageLabel:l=null,rightImageAlt:n="",rightImageTitle:p="",rightImageCss:g={},rightImageLabel:c=null,sliderLineWidth:u=2,sliderLineColor:m="#ffffff",sliderPositionPercentage:h=.5,vertical:d=!1,componentUid:S="",styles:b={},leftImage:L,rightImage:f,enableLabel:y=!1,qualityType:R,qualityPercent:v}=e,x=!d,I=y&&!!l,P=y&&!!c,A=(L?.width??0)<(f?.width??0)?{...L}:{...f},$=e=>{let{isLiquid:t}=e??{};return t?helpers$1.getImageSrc(L):L?.src??""},C=e=>{let{isLiquid:t}=e??{};return t?helpers$1.getImageSrc(f):f?.src??""},{responsiveAspectRatio:D,defaultRatio:k}=getAspectRatioData({leftImage:L,rightImage:f,styles:b});return{styles:b,handle:t,hover:o,handleSize:a,leftImageAlt:i,leftImageTitle:s,leftImageCss:r,leftImageLabel:l,rightImageAlt:n,rightImageTitle:p,rightImageCss:g,rightImageLabel:c,sliderLineWidth:u,sliderLineColor:m,sliderPositionPercentage:h,vertical:d,componentUid:S,tempImage:A,aspectRatio:D,defaultRatio:k,isHorizontal:x,hasLeftLabel:I,hasRightLabel:P,qualityType:R,qualityPercent:v,getLeftImageSrc:$,getRightImageSrc:C}},getImageClipStyle=e=>{let{isHorizontal:t,containerWidth:o,containerHeight:a,sliderPosition:i,type:s}=e,r=t?o*i:a*i;return"left"===s?{clip:t?`rect(auto, ${r}px, auto, auto)`:`rect(auto, auto, ${r}px, auto)`}:{clip:t?`rect(auto, auto, auto, ${r}px)`:`rect(${r}px, auto, auto, auto)`}},getSliderPositionStyle=e=>{let{isHorizontal:t,containerWidth:o,containerHeight:a,sliderPosition:i,handleSize:s}=e,r=t?o*i:a*i,l=s/2;return{[t?"top":"left"]:0,[t?"left":"top"]:`${r-l}px`}},getLabelContainerStyles=e=>({...getImageClipStyle(e)}),getReactStyles=e=>({sliderPosition:getSliderPositionStyle(e),leftImageClip:getImageClipStyle({...e,type:"left"}),rightImageClip:getImageClipStyle({...e,type:"right"}),leftLabelContainer:getLabelContainerStyles({...e,type:"left"}),rightLabelContainer:getLabelContainerStyles({...e,type:"right"})}),getSettingTranslatedImageComparisonAndSeo=({setting:e,uid:t,pageContext:o})=>{let a=e?.translate?"true":void 0;if(!e||!a)return{};let i=core.cloneDeep(e);for(let e of["Left","Right"]){let s=`image${e}`,r=i[s];if(r?.src){let e=helpers.getDynamicSourceLocales({val:r.src,uid:t,settingId:`${s}_src`,translate:a,pageContext:o});i[s].src=String(e)}let l=`alt${e}`,n=helpers.getDynamicSourceLocales({val:i[l],uid:t,settingId:l,translate:a,pageContext:o});i[l]=String(n);let p=`title${e}`,g=helpers.getDynamicSourceLocales({val:i[p],uid:t,settingId:p,translate:a,pageContext:o});i[p]=String(g)}return i};exports.FLEX_ALIGN=FLEX_ALIGN,exports.composeLabelPosition=composeLabelPosition,exports.composeResponsiveAspectRatio=composeResponsiveAspectRatio,exports.generateTranslateByDevices=generateTranslateByDevices,exports.getAspectRatioData=getAspectRatioData,exports.getData=getData,exports.getImageClipStyle=getImageClipStyle,exports.getLabelContainerStyles=getLabelContainerStyles,exports.getLabelPosition=getLabelPosition,exports.getReactStyles=getReactStyles,exports.getSettingTranslatedImageComparisonAndSeo=getSettingTranslatedImageComparisonAndSeo,exports.getSliderPositionPercentage=getSliderPositionPercentage,exports.getSliderPositionStyle=getSliderPositionStyle;

package/dist/cjs/image-comparison/components/ImageComparison.liquid.js

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js"),CompareImage_liquid=require("./CompareImage.liquid.js");const ImageComparison=({setting:e,styles:r,builderProps:a,advanced:s,...t})=>{let{imageLeft:l,altLeft:i,titleLeft:m,imageRight:o,altRight:g,titleRight:c,direction:p,defaultPercentage:d,leftImageLabel:u,rightImageLabel:n,sliderLineWidth:I,hoverToSlide:y,enableLabel:q,preload:f,translate:h,qualityType:C,qualityPercent:b,enableSEOLeft:v,enableSEORight:P}=e??{},j=system.createClass(classes.getImageComparisonWrapperClasses()),L=system.createStyle(classes.getImageComparisonWrapperStyles());return core.template`
-    <div class="${j}" style="${L}">
-      ${CompareImage_liquid.default({...t,styles:r,preload:f,advanced:s,leftImage:l,leftImageAlt:v?i:"",leftImageTitle:v?m:"",rightImage:o,rightImageAlt:P?g:"",rightImageTitle:P?c:"",leftImageLabel:u??"Before",rightImageLabel:n??"After",sliderLineWidth:I,sliderPositionPercentage:helpers.getSliderPositionPercentage(d),vertical:"vertical"===p,hover:y,enableLabel:q,qualityType:C,qualityPercent:b,componentUid:a?.uid??"",builderData:a?.builderData,translate:h})}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js"),CompareImage_liquid=require("./CompareImage.liquid.js");const ImageComparison=({setting:e,styles:a,builderProps:r,advanced:t,pageContext:s,...i})=>{let l=helpers.getSettingTranslatedImageComparisonAndSeo({setting:e,uid:r?.uid,pageContext:s}),{imageLeft:m,altLeft:o,titleLeft:g,imageRight:d,altRight:n,titleRight:p,direction:c,defaultPercentage:u,leftImageLabel:I,rightImageLabel:y,sliderLineWidth:C,hoverToSlide:h,enableLabel:q,preload:f,translate:b,qualityType:v,qualityPercent:P,enableSEOLeft:S,enableSEORight:j}=l??{},A=system.createClass(classes.getImageComparisonWrapperClasses()),L=system.createStyle(classes.getImageComparisonWrapperStyles());return core.template`
+    <div class="${A}" style="${L}">
+      ${CompareImage_liquid.default({...i,styles:a,preload:f,advanced:t,leftImage:m,leftImageAlt:S?o:"",leftImageTitle:S?g:"",rightImage:d,rightImageAlt:j?n:"",rightImageTitle:j?p:"",leftImageLabel:I??"Before",rightImageLabel:y??"After",sliderLineWidth:C,sliderPositionPercentage:helpers.getSliderPositionPercentage(u),vertical:"vertical"===c,hover:h,enableLabel:q,qualityType:v,qualityPercent:P,componentUid:r?.uid??"",builderData:r?.builderData,translate:b})}
     </div>
   `};exports.default=ImageComparison;

package/dist/cjs/image-comparison/components/Label.liquid.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),styles=require("../common/styles.js");const Label=({uid:e,label:s,styles:t,translate:l,positionId:r,pageContext:a,translateLabel:i,childrenStyle:o,childrenClass:c,containerStyle:d,containerClass:p})=>{let u=styles.getLabelCustomCss(t,e??""),y=helpers.getDynamicSourceLocales({uid:e,translate:l,val:s,pageContext:a,settingId:i,isCapitalize:t?.typo?.attrs?.transform==="capitalize"});return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),styles=require("../common/styles.js");const Label=({uid:e,label:s,styles:t,positionId:l,pageContext:r,translateLabel:a,childrenStyle:i,childrenClass:o,containerStyle:c,containerClass:u})=>{let d=styles.getLabelCustomCss(t,e??""),p=helpers.getDynamicSourceLocales({uid:e,translate:"true",val:s,pageContext:r,settingId:a,isCapitalize:t?.typo?.attrs?.transform==="capitalize"});return core.template`
     <div
-      id="image-comparison-${r}-label-${e}"
-      style="${d}"
-      class="${p}"
+      id="image-comparison-${l}-label-${e}"
+      style="${c}"
+      class="${u}"
     >
-      <style>${u}</style>
-      <div class="${c}" style="${o}">
-        ${y}
+      <style>${d}</style>
+      <div class="${o}" style="${i}">
+        ${p}
       </div>
     </div>
   `};exports.default=Label;

package/dist/cjs/image-comparison/index.js

@@ -1 +1 @@
-"use strict";require("react/jsx-runtime"),require("@gem-sdk/system"),require("@gem-sdk/core"),require("react"),require("./components/Label.js");var ImageComparison$1=require("./settings/ImageComparison.js");const imageComparisonSetting={ImageComparison:ImageComparison$1.default};exports.imageComparisonSetting=imageComparisonSetting;
+"use strict";require("react/jsx-runtime"),require("@gem-sdk/system"),require("@gem-sdk/core"),require("react"),require("next/link"),require("./components/Label.js");var ImageComparison$1=require("./settings/ImageComparison.js");const imageComparisonSetting={ImageComparison:ImageComparison$1.default};exports.imageComparisonSetting=imageComparisonSetting;

package/dist/cjs/image-comparison/settings/configs/settings.js

@@ -1 +1 @@
-"use strict";const ImageComparisonSettings=[{id:"setting",controls:[{id:"imageTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"imageLeft",label:"Left image",type:"group",controls:[{id:"imageLeft",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_before.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"imageRight",label:"Right Image",type:"group",controls:[{id:"imageRight",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_after.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"preload",type:"toggle",label:"Preload",default:!1},{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],min:100,max:400,step:50,useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"direction",label:"Layout",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,itemPerRow:2,itemSpacing:"large",options:[{label:"Horizontal",value:"horizontal",iconName:"gp-image-comparison-horizontal"},{label:"Vertical",value:"vertical",iconName:"gp-image-comparison-vertical"}],default:"horizontal"},{id:"slider-settings",type:"group",label:"Slider",controls:[{id:"hoverToSlide",type:"select",options:[{label:"Drag to move",value:!1},{label:"Hover to move",value:!0}],label:"Behavior",default:!1},{id:"defaultPercentage",label:"Default ratio",type:"input:slider",useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,units:["%"],hide:!0,min:1,max:100,default:50}]},{id:"enableLabel",type:"toggle",default:!1},{id:"leftImageLabel",label:"First Description",type:"input",default:"Before"},{id:"translate",type:"input",default:"leftImageLabel,rightImageLabel"},{id:"rightImageLabel",label:"Second Description",type:"input",default:"After"},{id:"enableSEOLeft",type:"toggle",default:!1},{id:"enableSEORight",type:"toggle",default:!1},{id:"seo",type:"group",label:"SEO",controls:[{id:"seoTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"altLeft",label:"First image alt text",type:"textarea",minHeight:76,autoHeight:!0,placeholder:"E.g: image of an iphone",default:"Describes the appearance of the image"},{id:"altRight",label:"Second image alt text",type:"textarea",minHeight:76,autoHeight:!0,placeholder:"E.g: image of an iphone",default:"Describes the appearance of the image"},{id:"titleLeft",label:"First image title",info:"Show title when hover to first image",type:"input",placeholder:"E.g: iphone compare",default:"Title"},{id:"titleRight",label:"Second image title",info:"Show title when hover to second image",type:"input",placeholder:"E.g: iphone compare",default:"Title"}]}]},{id:"style",controls:[{id:"label-settings",type:"group",label:"Label",controls:[{id:"labelPadding",type:"padding-v2",devices:{desktop:{default:{top:"4px",left:"4px",bottom:"4px",right:"4px",linked:!0}}},compoDefaultValue:{desktop:{default:{top:"4px",left:"4px",bottom:"4px",right:"4px",linked:!0}}}},{id:"labelBackgroundColor",type:"color-picker-v2",devices:{desktop:{default:"rgba(0, 0, 0, 0.60)"}}},{id:"labelPositionHoz",label:"Position",type:"option:value",devices:{desktop:{default:"hoz-center"}},options:[{label:"Top",value:"top",iconName:"gp-justify-content-top"},{label:"Center",value:"hoz-center",iconName:"gp-justify-content-center"},{label:"Bottom",value:"bottom",iconName:"gp-justify-content-bottom"}]},{id:"labelPositionVer",label:"Position",type:"option:value",devices:{desktop:{default:"ver-center"}},options:[{label:"Left",value:"left",iconName:"gp-justify-content-left"},{label:"Center",value:"ver-center",iconName:"gp-justify-content-middle"},{label:"Right",value:"right",iconName:"gp-justify-content-right"}]},{id:"labelTextColor",type:"colorpicker",label:"Text Color",default:"#FFFFFF"},{id:"labelBorder",type:"border-v2",devices:{desktop:{default:{borderType:"none",border:"none",borderWidth:"1px",width:"1px 1px 1px 1px",color:"line-1",isCustom:!0}}},compoDefaultValue:{desktop:{default:{border:"solid",color:"line-1",width:"1px",borderWidth:"1px"}}}},{id:"labelRounded",type:"corner-v2",devices:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}},compoDefaultValue:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}},{id:"labelShadow",type:"shadow-v2",devices:{desktop:{}},compoDefaultValue:{desktop:{default:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}}}]},{id:"size-settings",type:"group",label:"Size",controls:[{id:"aspectRatio",type:"select",label:"Aspect Ratio",options:[{label:"Original",value:"auto"},{label:"1:1",value:"1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"}}},{id:"customAspectRadio",type:"ratio",min:1,devices:{desktop:{default:{width:"1",height:"1"}}},hide:!0},{id:"imageScale",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill image",value:"cover",type:"image",svgName:"gp-image-cover"},{label:"Fit image",value:"contain",type:"image",svgName:"gp-image-contain"}],devices:{desktop:{default:"cover"}}},{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!0}}},{id:"width",type:"input:unit",emptyOnClear:!0,placeholder:"Auto",min:0,units:["px","%"],hide:!0,devices:{desktop:{default:"100%"}}}]},{id:"typo",type:"typography-combo",default:{type:"paragraph-2"},ignoreReRender:!0,compoDefaultValue:{attrs:{color:"#FFFFFF"}},hiddenSetting:{textAlign:!0}},{id:"transform",label:"Text Transform",type:"select",options:[{value:"default",label:"None"},{value:"capitalize",label:"Capitalize"},{value:"uppercase",label:"Uppercase"},{value:"lowercase",label:"Lowercase"}],default:"default"},{id:"align",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"center"}}}]}];exports.ImageComparisonSettings=ImageComparisonSettings;
+"use strict";const ImageComparisonSettings=[{id:"setting",controls:[{id:"imageTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"imageLeft",label:"Left image",type:"group",controls:[{id:"imageLeft",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_before.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"imageRight",label:"Right Image",type:"group",controls:[{id:"imageRight",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_after.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"preload",type:"toggle",label:"Preload",default:!1},{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],min:100,max:400,step:50,useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"direction",label:"Layout",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,itemPerRow:2,itemSpacing:"large",options:[{label:"Horizontal",value:"horizontal",iconName:"gp-image-comparison-horizontal"},{label:"Vertical",value:"vertical",iconName:"gp-image-comparison-vertical"}],default:"horizontal"},{id:"slider-settings",type:"group",label:"Slider",controls:[{id:"hoverToSlide",type:"select",options:[{label:"Drag to move",value:!1},{label:"Hover to move",value:!0}],label:"Behavior",default:!1},{id:"defaultPercentage",label:"Default ratio",type:"input:slider",useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,units:["%"],hide:!0,min:1,max:100,default:50}]},{id:"enableLabel",type:"toggle",default:!1},{id:"leftImageLabel",label:"First Description",type:"input",default:"Before"},{id:"rightImageLabel",label:"Second Description",type:"input",default:"After"},{id:"enableSEOLeft",type:"toggle",default:!1},{id:"enableSEORight",type:"toggle",default:!1},{id:"seo",type:"group",label:"SEO",controls:[{id:"seoTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"altLeft",label:"First image alt text",type:"textarea",minHeight:76,autoHeight:!0,placeholder:"E.g: image of an iphone",default:"Describes the appearance of the image"},{id:"altRight",label:"Second image alt text",type:"textarea",minHeight:76,autoHeight:!0,placeholder:"E.g: image of an iphone",default:"Describes the appearance of the image"},{id:"titleLeft",label:"First image title",info:"Show title when hover to first image",type:"input",placeholder:"E.g: iphone compare",default:"Title"},{id:"titleRight",label:"Second image title",info:"Show title when hover to second image",type:"input",placeholder:"E.g: iphone compare",default:"Title"}]},{id:"translate",type:"input",default:[{id:"altLeft"},{id:"altRight"},{id:"titleLeft"},{id:"titleRight"},{id:"rightImageLabel"},{id:"leftImageLabel"},{id:"imageLeft",fields:["src"]},{id:"imageRight",fields:["src"]}]}]},{id:"style",controls:[{id:"label-settings",type:"group",label:"Label",controls:[{id:"labelPadding",type:"padding-v2",devices:{desktop:{default:{top:"4px",left:"4px",bottom:"4px",right:"4px",linked:!0}}},compoDefaultValue:{desktop:{default:{top:"4px",left:"4px",bottom:"4px",right:"4px",linked:!0}}}},{id:"labelBackgroundColor",type:"color-picker-v2",devices:{desktop:{default:"rgba(0, 0, 0, 0.60)"}}},{id:"labelPositionHoz",label:"Position",type:"option:value",devices:{desktop:{default:"hoz-center"}},options:[{label:"Top",value:"top",iconName:"gp-justify-content-top"},{label:"Center",value:"hoz-center",iconName:"gp-justify-content-center"},{label:"Bottom",value:"bottom",iconName:"gp-justify-content-bottom"}]},{id:"labelPositionVer",label:"Position",type:"option:value",devices:{desktop:{default:"ver-center"}},options:[{label:"Left",value:"left",iconName:"gp-justify-content-left"},{label:"Center",value:"ver-center",iconName:"gp-justify-content-middle"},{label:"Right",value:"right",iconName:"gp-justify-content-right"}]},{id:"labelTextColor",type:"colorpicker",label:"Text Color",default:"#FFFFFF"},{id:"labelBorder",type:"border-v2",devices:{desktop:{default:{borderType:"none",border:"none",borderWidth:"1px",width:"1px 1px 1px 1px",color:"line-1",isCustom:!0}}},compoDefaultValue:{desktop:{default:{border:"solid",color:"line-1",width:"1px",borderWidth:"1px"}}}},{id:"labelRounded",type:"corner-v2",devices:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}},compoDefaultValue:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}},{id:"labelShadow",type:"shadow-v2",devices:{desktop:{}},compoDefaultValue:{desktop:{default:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}}}]},{id:"size-settings",type:"group",label:"Size",controls:[{id:"aspectRatio",type:"select",label:"Aspect Ratio",options:[{label:"Original",value:"auto"},{label:"1:1",value:"1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"}}},{id:"customAspectRadio",type:"ratio",min:1,devices:{desktop:{default:{width:"1",height:"1"}}},hide:!0},{id:"imageScale",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill image",value:"cover",type:"image",svgName:"gp-image-cover"},{label:"Fit image",value:"contain",type:"image",svgName:"gp-image-contain"}],devices:{desktop:{default:"cover"}}},{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!0}}},{id:"width",type:"input:unit",emptyOnClear:!0,placeholder:"Auto",min:0,units:["px","%"],hide:!0,devices:{desktop:{default:"100%"}}}]},{id:"typo",type:"typography-combo",default:{type:"paragraph-2"},ignoreReRender:!0,compoDefaultValue:{attrs:{color:"#FFFFFF"}},hiddenSetting:{textAlign:!0}},{id:"transform",label:"Text Transform",type:"select",options:[{value:"default",label:"None"},{value:"capitalize",label:"Capitalize"},{value:"uppercase",label:"Uppercase"},{value:"lowercase",label:"Lowercase"}],default:"default"},{id:"align",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"center"}}}]}];exports.ImageComparisonSettings=ImageComparisonSettings;

package/dist/cjs/post-purchase/line/index.js

@@ -1 +1 @@
-"use strict";require("react/jsx-runtime"),require("@gem-sdk/system"),require("@gem-sdk/core"),require("./types.js");var PostPurchaseLine$1=require("./settings/PostPurchaseLine.js");const postPurchaseLineSetting={PostPurchaseLine:PostPurchaseLine$1.default};exports.postPurchaseLineSetting=postPurchaseLineSetting;
+"use strict";require("react/jsx-runtime"),require("@gem-sdk/system"),require("@gem-sdk/core"),require("react"),require("next/link"),require("./types.js");var PostPurchaseLine$1=require("./settings/PostPurchaseLine.js");const postPurchaseLineSetting={PostPurchaseLine:PostPurchaseLine$1.default};exports.postPurchaseLineSetting=postPurchaseLineSetting;

package/dist/cjs/tab/common/styles.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),helpers$1=require("./helpers.js");const getStyleWrapper=(e,t)=>{let{background:r,containWidth:l,align:o}=e??{},a={...t,...core.getStyleBackgroundByDevice(r),...core.getGradientBgrStyleByDevice(r,{desktop:!0,tablet:!0,mobile:!0}),...core.makeStyleResponsive("w",core.makeWidth(l)),...core.makeStyleResponsive("as",o)};return helpers.filterTruthyStyles(a)},getTabListStyle=e=>{let{panelAlign:t}=e??{},r={...core.makeStyleResponsive("jc",t),...core.makeStyleResponsive("w",{desktop:"100%",tablet:"100%",mobile:"100%"})};return helpers.filterTruthyStyles(r)},getItemStyle=(e,t)=>{let{labelColor:r,labelBgColor:l,borderTab:o,labelAlign:a,enableActiveEffect:i,panelWidth:s,position:n,panelFullWidth:y,labelWidth:c}=e??{},S={},p=!0===i||void 0===i;return S={...S=t&&p?{...core.makeStyleResponsive("jc",a),...core.makeStyle({c:core.getSingleColorVariable(r?.active??r?.normal),bgc:core.getSingleColorVariable(l?.active??l?.normal),bs:o?.active?.border??o?.normal?.border,bw:o?.active?.width??o?.normal?.width,bc:core.getSingleColorVariable(o?.active?.color??o?.normal?.color)})}:{...core.makeStyleResponsive("jc",a),...core.getGlobalColorStateStyle("c",r),...core.getGlobalColorStateStyle("bgc",l),...core.handleConvertBorderStyle(o),...core.handleConvertBorderWidth(o),...core.handleConvertBorderColor(o)},...core.makeStyleResponsive("w",helpers$1.getStyleWidthByPositionResponsive({position:n,panelFullWidth:y,panelWidth:s,labelWidth:c}))},e?.enableHoverEffect||(S=core.filterHoverVariables(S)),helpers.filterTruthyStyles(S)},getTabParentListStyle=e=>{let{panelAlign:t,panelAlignVertical:r}=e??{},l={...core.makeStyleResponsive("jc",t),...core.makeStyleResponsive("ai",r)};return helpers.filterTruthyStyles(l)},getContainContentStyle=()=>{let e={};return core.makeStyle({w:"100%"})&&(e={...core.makeStyle({w:"100%"})}),helpers.filterTruthyStyles(e)},getTabItemStyle=(e,t)=>{let r={...e,...core.makeStyle({h:"100%",v:t?"visible":"hidden",pos:t?"relative":"absolute"})};return helpers.filterTruthyStyles(r)};exports.getContainContentStyle=getContainContentStyle,exports.getItemStyle=getItemStyle,exports.getStyleWrapper=getStyleWrapper,exports.getTabItemStyle=getTabItemStyle,exports.getTabListStyle=getTabListStyle,exports.getTabParentListStyle=getTabParentListStyle;
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),helpers$1=require("./helpers.js");const getStyleWrapper=({setting:e,style:t,uid:r,pageContext:l,type:o="React"})=>{let{background:a,containWidth:i,align:s,translate:n}=e??{},y="Liquid"===o?helpers.getBackgroundTranslated({background:a,uid:r,translate:n,pageContext:l,isTranslateVideo:!1}):a,c={...t,...core.getStyleBackgroundByDevice(y),...core.getGradientBgrStyleByDevice(y,{desktop:!0,tablet:!0,mobile:!0}),...core.makeStyleResponsive("w",core.makeWidth(i)),...core.makeStyleResponsive("as",s)};return helpers.filterTruthyStyles(c)},getTabListStyle=e=>{let{panelAlign:t}=e??{},r={...core.makeStyleResponsive("jc",t),...core.makeStyleResponsive("w",{desktop:"100%",tablet:"100%",mobile:"100%"})};return helpers.filterTruthyStyles(r)},getItemStyle=(e,t)=>{let{labelColor:r,labelBgColor:l,borderTab:o,labelAlign:a,enableActiveEffect:i,panelWidth:s,position:n,panelFullWidth:y,labelWidth:c}=e??{},S={},p=!0===i||void 0===i;return S={...S=t&&p?{...core.makeStyleResponsive("jc",a),...core.makeStyle({c:core.getSingleColorVariable(r?.active??r?.normal),bgc:core.getSingleColorVariable(l?.active??l?.normal),bs:o?.active?.border??o?.normal?.border,bw:o?.active?.width??o?.normal?.width,bc:core.getSingleColorVariable(o?.active?.color??o?.normal?.color)})}:{...core.makeStyleResponsive("jc",a),...core.getGlobalColorStateStyle("c",r),...core.getGlobalColorStateStyle("bgc",l),...core.handleConvertBorderStyle(o),...core.handleConvertBorderWidth(o),...core.handleConvertBorderColor(o)},...core.makeStyleResponsive("w",helpers$1.getStyleWidthByPositionResponsive({position:n,panelFullWidth:y,panelWidth:s,labelWidth:c}))},e?.enableHoverEffect||(S=core.filterHoverVariables(S)),helpers.filterTruthyStyles(S)},getTabParentListStyle=e=>{let{panelAlign:t,panelAlignVertical:r}=e??{},l={...core.makeStyleResponsive("jc",t),...core.makeStyleResponsive("ai",r)};return helpers.filterTruthyStyles(l)},getContainContentStyle=()=>{let e={};return core.makeStyle({w:"100%"})&&(e={...core.makeStyle({w:"100%"})}),helpers.filterTruthyStyles(e)},getTabItemStyle=(e,t)=>{let r={...e,...core.makeStyle({h:"100%",v:t?"visible":"hidden",pos:t?"relative":"absolute"})};return helpers.filterTruthyStyles(r)};exports.getContainContentStyle=getContainContentStyle,exports.getItemStyle=getItemStyle,exports.getStyleWrapper=getStyleWrapper,exports.getTabItemStyle=getTabItemStyle,exports.getTabListStyle=getTabListStyle,exports.getTabParentListStyle=getTabParentListStyle;

package/dist/cjs/tab/components/Tabs.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),useTab=require("../hooks/useTab.js"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),Text=require("../../text/components/Text.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js");const Tabs=e=>{let{builderAttrs:s,builderProps:t,style:a,setting:l,advanced:r,children:i}=e,{cssClass:c}=r??{},{panelWidth:n,childItem:m,labelAlign:y,labelTypo:u,labelTypoV2:d}=l??{},{currentDevice:o,productID:x,dispatchEventTabActive:C,activeTab:j,setActiveKey:p,refContainer:g}=useTab.useTab(l,t);l&&!l?.labelWidth&&(l.labelWidth={desktop:"200px"});let T=system.createAttr({...attrs.getAttr({uid:t?.uid||""})}),h=system.createStyle({...styles.getStyleWrapper(l,a)}),b=system.createClass({...classes.getClassesWrapper({builderProps:t,advancedCssClass:c})}),R=system.createClass({...classes.getContainClasses({setting:l})}),v=classes.getStyleTagClasses({panelWidth:n,builderProps:t}),S=system.createClass({...classes.getTabParentListClasses()}),q=system.createStyle({...styles.getTabParentListStyle(l)}),N=system.createClass({...classes.getTabListClasses({setting:l})}),f=system.createStyle({...styles.getTabListStyle(l)}),A=e=>system.createClass({...classes.getItemClasses({setting:l,isNotLiquid:!0,isActive:e,currentDevice:o})}),k=e=>system.createStyle({...styles.getItemStyle(l,e)}),L=React.Children.map(i,e=>e?.props?.uid),P=system.createClass({...classes.getWrapperContentClasses()}),W=system.createClass({...classes.getContainContentClasses()}),I=system.createStyle({...styles.getContainContentStyle()}),$=system.createClass({...classes.getTextClasses()}),w=system.createAttr({...attrs.getAttrContent({uid:t?.uid||""})}),_=()=>m?.map((e,s)=>{let t=j==s;return jsxRuntime.jsx("li",{"aria-hidden":!0,className:A(t),style:k(t),onClick:()=>{p(s),C(s)},children:jsxRuntime.jsx(Text.default,{className:$,styles:{typo:d,typography:u,textAlign:y},setting:{text:e,htmlTag:"div",excludeFlex:!0,options:{useState:!0,uniqueId:x?`${L?.[s]}-${x}`:`${L?.[s]}`,productID:x}}})},L&&L[s])}),E=()=>React.Children.map(core.filterToolbarPreview(i),(e,s)=>React.isValidElement(e)?jsxRuntime.jsx(e.type,{...e.props,isActive:s==j,parentUid:t?.uid}):null);return jsxRuntime.jsxs("div",{ref:g,...s,...T,style:h,className:b,children:[jsxRuntime.jsx("style",{children:v}),jsxRuntime.jsxs("div",{className:R,children:[jsxRuntime.jsx("div",{className:S,style:q,children:jsxRuntime.jsx("ul",{className:N,style:f,children:_()})}),jsxRuntime.jsx("div",{className:P,children:jsxRuntime.jsx("div",{...w,className:W,style:I,children:E()})})]}),core.filterToolbarPreview(i,!0)]})};exports.default=Tabs;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),useTab=require("../hooks/useTab.js"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),Text=require("../../text/components/Text.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js");const Tabs=e=>{let{builderAttrs:s,builderProps:t,style:a,setting:l,advanced:r,children:i}=e,{cssClass:c}=r??{},{panelWidth:n,childItem:m,labelAlign:u,labelTypo:y,labelTypoV2:d}=l??{},{currentDevice:o,productID:x,dispatchEventTabActive:C,activeTab:j,setActiveKey:p,refContainer:g}=useTab.useTab(l,t);l&&!l?.labelWidth&&(l.labelWidth={desktop:"200px"});let T=system.createAttr({...attrs.getAttr({uid:t?.uid||""})}),h=system.createStyle({...styles.getStyleWrapper({setting:l,style:a,uid:t?.uid,pageContext:e.pageContext})}),b=system.createClass({...classes.getClassesWrapper({builderProps:t,advancedCssClass:c})}),R=system.createClass({...classes.getContainClasses({setting:l})}),v=classes.getStyleTagClasses({panelWidth:n,builderProps:t}),S=system.createClass({...classes.getTabParentListClasses()}),q=system.createStyle({...styles.getTabParentListStyle(l)}),N=system.createClass({...classes.getTabListClasses({setting:l})}),f=system.createStyle({...styles.getTabListStyle(l)}),A=e=>system.createClass({...classes.getItemClasses({setting:l,isNotLiquid:!0,isActive:e,currentDevice:o})}),k=e=>system.createStyle({...styles.getItemStyle(l,e)}),L=React.Children.map(i,e=>e?.props?.uid),P=system.createClass({...classes.getWrapperContentClasses()}),W=system.createClass({...classes.getContainContentClasses()}),I=system.createStyle({...styles.getContainContentStyle()}),$=system.createClass({...classes.getTextClasses()}),w=system.createAttr({...attrs.getAttrContent({uid:t?.uid||""})}),_=()=>m?.map((e,s)=>{let t=j==s;return jsxRuntime.jsx("li",{"aria-hidden":!0,className:A(t),style:k(t),onClick:()=>{p(s),C(s)},children:jsxRuntime.jsx(Text.default,{className:$,styles:{typo:d,typography:y,textAlign:u},setting:{text:e,htmlTag:"div",excludeFlex:!0,options:{useState:!0,uniqueId:x?`${L?.[s]}-${x}`:`${L?.[s]}`,productID:x}}})},L&&L[s])}),E=()=>React.Children.map(core.filterToolbarPreview(i),(e,s)=>React.isValidElement(e)?jsxRuntime.jsx(e.type,{...e.props,isActive:s==j,parentUid:t?.uid}):null);return jsxRuntime.jsxs("div",{ref:g,...s,...T,style:h,className:b,children:[jsxRuntime.jsx("style",{children:v}),jsxRuntime.jsxs("div",{className:R,children:[jsxRuntime.jsx("div",{className:S,style:q,children:jsxRuntime.jsx("ul",{className:N,style:f,children:_()})}),jsxRuntime.jsx("div",{className:P,children:jsxRuntime.jsx("div",{...w,className:W,style:I,children:E()})})]}),core.filterToolbarPreview(i,!0)]})};exports.default=Tabs;

package/dist/cjs/tab/components/Tabs.liquid.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),Text_liquid=require("../../text/components/Text.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js");const Tabs=e=>{let{builderProps:s,style:t,setting:a,advanced:l,rawChildren:r}=e;delete a?.labelTypoV2?.attrs?.color;let{cssClass:i}=l??{},{panelWidth:c,childItem:y,labelAlign:d,labelTypo:o,labelTypoV2:n}=a??{},p=system.createStateOrContext({setting:a,builderProps:s}),m=void 0;a&&!a?.labelWidth&&(a.labelWidth={desktop:"200px"});let g=system.createAttr({...attrs.getAttr({uid:s?.uid||""})}),u=system.createStyle({...styles.getStyleWrapper(a,t)}),C=system.createClass({...classes.getClassesWrapper({builderProps:s,advancedCssClass:i})}),v=system.createClass({...classes.getContainClasses({setting:a})}),$=classes.getStyleTagClasses({panelWidth:c,builderProps:s}),S=system.createClass({...classes.getTabParentListClasses()}),h=system.createStyle({...styles.getTabParentListStyle(a)}),b=system.createClass({...classes.getTabListClasses({setting:a})}),x=system.createStyle({...styles.getTabListStyle(a)}),T=e=>system.createClass({...classes.getItemClasses({setting:a,isNotLiquid:!1,isActive:e,currentDevice:m})}),f=e=>system.createStyle({...styles.getItemStyle(a,e)}),q=system.createClass({...classes.getWrapperContentClasses()}),A=system.createClass({...classes.getContainContentClasses()}),j=system.createStyle({...styles.getContainContentStyle()}),I=system.createAttr({...attrs.getAttrContent({uid:s?.uid||""})}),L=system.createClass({...classes.getTextClasses()}),P=()=>y?.map(e=>e?.replaceAll("'","&#039;"))?.map((t,l)=>{let r=(a?.activeKey??0)<0||(a?.activeKey??0)>=(a?.childItem??[]).length?0===l:l===a?.activeKey,i=helpers.getDynamicSourceLocales({val:t,uid:s?.uid,settingId:`childItem_${l}`,pageContext:e.pageContext,isCapitalize:a?.labelTypoV2?.attrs?.transform==="capitalize",translate:a?.translate});return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),Text_liquid=require("../../text/components/Text.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js");const Tabs=e=>{let{builderProps:s,style:t,setting:a,advanced:l,rawChildren:r}=e;delete a?.labelTypoV2?.attrs?.color;let{cssClass:i}=l??{},{panelWidth:c,childItem:d,labelAlign:y,labelTypo:o,labelTypoV2:n}=a??{},p=system.createStateOrContext({setting:a,builderProps:s}),m=void 0;a&&!a?.labelWidth&&(a.labelWidth={desktop:"200px"});let g=system.createAttr({...attrs.getAttr({uid:s?.uid||""})}),u=system.createStyle({...styles.getStyleWrapper({setting:a,style:t,uid:s?.uid,pageContext:e.pageContext,type:"Liquid"})}),C=system.createClass({...classes.getClassesWrapper({builderProps:s,advancedCssClass:i})}),v=system.createClass({...classes.getContainClasses({setting:a})}),$=classes.getStyleTagClasses({panelWidth:c,builderProps:s}),S=system.createClass({...classes.getTabParentListClasses()}),h=system.createStyle({...styles.getTabParentListStyle(a)}),x=system.createClass({...classes.getTabListClasses({setting:a})}),b=system.createStyle({...styles.getTabListStyle(a)}),T=e=>system.createClass({...classes.getItemClasses({setting:a,isNotLiquid:!1,isActive:e,currentDevice:m})}),q=e=>system.createStyle({...styles.getItemStyle(a,e)}),f=system.createClass({...classes.getWrapperContentClasses()}),A=system.createClass({...classes.getContainContentClasses()}),j=system.createStyle({...styles.getContainContentStyle()}),L=system.createAttr({...attrs.getAttrContent({uid:s?.uid||""})}),I=system.createClass({...classes.getTextClasses()}),P=()=>d?.map(e=>e?.replaceAll("'","&#039;"))?.map((t,l)=>{let r=(a?.activeKey??0)<0||(a?.activeKey??0)>=(a?.childItem??[]).length?0===l:l===a?.activeKey,i=helpers.getDynamicSourceLocales({val:t,uid:s?.uid,settingId:`childItem_${l}`,pageContext:e.pageContext,isCapitalize:a?.labelTypoV2?.attrs?.transform==="capitalize",translate:"true"});return core.template`
       <li
         aria-hidden
         class="${T(r)}"
-        style="${f(r)}"
+        style="${q(r)}"
         key="${s?.uid}"
 
       >
-        ${Text_liquid.default({className:L,styles:{typo:n,typography:o,textAlign:d},setting:{text:i,htmlTag:"div",excludeFlex:!0,isForceValue:!0}})}
+        ${Text_liquid.default({className:I,styles:{typo:n,typography:o,textAlign:y},setting:{text:i,htmlTag:"div",excludeFlex:!0,isForceValue:!0}})}
       </li>
     `}).join(""),_=()=>core.WrapRenderChildren({uid:s?.uid||"",customProps:r?.[0].customProps},r?.map((e,t)=>{let l=(a?.activeKey??0)<0||(a?.activeKey??0)>=(a?.childItem??[]).length?0===t:t===a?.activeKey;return e?core.template`${core.RenderChildren({...e,parentUid:s?.uid,isActive:l})}`:""})),k=()=>core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-tab-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-tab-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return core.template`
     <gp-tab
@@ -17,13 +17,13 @@
         <style>${$}</style>
         <div class="${v}">
           <div class="${S}" style="${h}">
-            <ul class="${b}" style="${x}">
+            <ul class="${x}" style="${b}">
               ${P()}
             </ul>
           </div>
-          <div class="${q}">
+          <div class="${f}">
             <div
-              ${{...I}}
+              ${{...L}}
               class="${A}"
               style="${j}"
             >