@gem-sdk/components 12.0.0-dev.132 → 12.0.0-dev.138

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

@@ -1,26 +1,26 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),helpers$1=require("../../helpers.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),attrs=require("../common/attrs.js"),helpers=require("../common/helpers.js"),Label_liquid=require("./Label.liquid.js"),SlideHandle_liquid=require("./SlideHandle.liquid.js");const CompareImage=e=>{let{leftImage:t,rightImage:s,advanced:a,builderData:l,pageContext:i,preload:r=!1,onSliderPositionChange:y}=e,{hover:d,styles:c,handle:m,handleSize:g,leftImageAlt:o,leftImageTitle:n,leftImageCss:p,leftImageLabel:S,rightImageAlt:u,rightImageTitle:h,rightImageCss:L,rightImageLabel:b,sliderLineWidth:q,sliderLineColor:$,sliderPositionPercentage:f,vertical:I,componentUid:A,tempImage:C,aspectRatio:j,defaultRatio:_,isHorizontal:v,hasLeftLabel:w,hasRightLabel:N,qualityType:O,qualityPercent:x,getLeftImageSrc:D,getRightImageSrc:H}=helpers.getData(e),P=D({isLiquid:!0}),W=H({isLiquid:!0}),z=system.createStyle({...styles.getOuterWrapperStyles(c)}),E=system.createStyle({...styles.getWrapperWidth({width:c?.width,leftImageWidth:t?.width,rightImageWidth:s?.width})}),k=system.createStyle({...styles.getContainerStyles({aspectRatio:j,builderData:l})}),F=system.createStyle({...styles.getLazyPlaceholderStyle(j)}),G=system.createStyle({...styles.getImageStyles({type:"right",props:e})}),M=system.createStyle({...styles.getImageStyles({type:"left",props:e})}),R=system.createStyle({...styles.getLabelStyles({styles:c,type:"left",isHorizontal:v})}),J=system.createStyle({...styles.getLabelStyles({styles:c,type:"right",isHorizontal:v})}),T=system.createStyle({...styles.getArrowStyles({type:"left"})}),U=system.createStyle({...styles.getArrowStyles({type:"right"})}),V=system.createStyle({...styles.getLineStyles({isHorizontal:v,sliderLineColor:$,sliderLineWidth:q})}),B=system.createStyle({...styles.getHandleStyles({handleSize:g,isHorizontal:v,sliderLineColor:$,sliderLineWidth:q})}),K=system.createStyle({...styles.getHandleCustomStyles()}),Q=system.createStyle({...styles.getSliderStyles({hover:d,handleSize:g,isHorizontal:v})}),X=system.createClass({...classes.getOuterWrapperClasses(a?.cssClass)}),Y=system.createClass({...classes.getLabelClasses(c)}),Z=system.createClass({...classes.getLabelContainerClasses()}),ee=attrs.getLabelAttrs({componentUid:A,positionId:"left",label:S??""}),et=attrs.getLabelAttrs({componentUid:A,positionId:"right",label:b??""}),es=system.createAttr({...attrs.getImageLiquidAttrs({priority:r,src:W,title:h,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`right-image-${A}`})}),ea=system.createAttr({...attrs.getImageLiquidAttrs({priority:r,src:P,title:n,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`left-image-${A}`})}),el=attrs.getLabelLiquidAttrs({pageContext:i,translateLabel:"leftImageLabel"}),ei=attrs.getLabelLiquidAttrs({pageContext:i,translateLabel:"rightImageLabel"}),er=system.createAttr({...attrs.getImagePlaceholderAttrs({width:C?.width,height:C?.height})}),ey=system.createStateOrContext({hover:d,handle:m,vertical:I,leftImage:t,rightImage:s,handleSize:g,aspectRatio:j,defaultRatio:_,componentUid:A,leftImageCss:p,rightImageCss:L,sliderLineColor:$,sliderLineWidth:q,sliderPositionPercentage:f,onSliderPositionChange:y}),ed=()=>core.template`
-      <img alt="" ${er} style="${F}" />
-    `,ec=()=>NextImage_liquid.default({...es,alt:u,style:G,setting:{qualityType:O,qualityPercent:x},enableLazyLoadImage:!r,isNotLazyload:r,customAttrs:{"data-testid":"right-image"}}),em=()=>NextImage_liquid.default({...ea,alt:o,style:M,setting:{qualityType:O,qualityPercent:x},enableLazyLoadImage:!r,isNotLazyload:r,customAttrs:{"data-testid":"left-image"}}),eg=()=>SlideHandle_liquid.default({componentUid:A,customHandle:m,lineStyles:V,sliderStyles:Q,handleStyles:B,customHandleStyles:K,leftArrowStyles:T,rightArrowStyles:U}),eo=()=>Label_liquid.default({...ee,...el,styles:c,childrenClass:Y,childrenStyle:R,containerClass:Z,containerStyle:{}}),en=()=>Label_liquid.default({...et,...ei,styles:c,childrenClass:Y,childrenStyle:J,containerClass:Z,containerStyle:{}}),ep=()=>`${system.If(core.isLocalEnv,`<script ${helpers$1.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-image-comparison-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers$1.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-image-comparison-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}`;return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("@gem-sdk/system"),a=require("../../helpers.js"),s=require("../../image/components/NextImage.liquid.js"),l=require("../common/styles.js"),i=require("../common/classes.js"),r=require("../common/attrs.js"),g=require("../common/helpers.js"),d=require("./Label.liquid.js"),c=require("./SlideHandle.liquid.js");exports.default=y=>{let{leftImage:o,rightImage:n,advanced:p,builderData:m,pageContext:S,preload:u=!1,onSliderPositionChange:h}=y,{hover:L,styles:b,handle:f,handleSize:$,leftImageAlt:q,leftImageTitle:A,leftImageCss:I,leftImageLabel:C,rightImageAlt:j,rightImageTitle:v,rightImageCss:w,rightImageLabel:O,sliderLineWidth:D,sliderLineColor:P,sliderPositionPercentage:W,vertical:z,componentUid:E,tempImage:N,aspectRatio:k,defaultRatio:x,isHorizontal:H,hasLeftLabel:_,hasRightLabel:F,qualityType:G,qualityPercent:M,getLeftImageSrc:R,getRightImageSrc:J}=g.getData(y),T=R({isLiquid:!0}),U=J({isLiquid:!0}),V=t.createStyle({...l.getOuterWrapperStyles(b)}),B=t.createStyle({...l.getWrapperWidth({width:b?.width,leftImageWidth:o?.width,rightImageWidth:n?.width})}),K=t.createStyle({...l.getContainerStyles({aspectRatio:k,builderData:m})}),Q=t.createStyle({...l.getLazyPlaceholderStyle(k)}),X=t.createStyle({...l.getImageStyles({type:"right",props:y})}),Y=t.createStyle({...l.getImageStyles({type:"left",props:y})}),Z=t.createStyle({...l.getLabelStyles({styles:b,type:"left",isHorizontal:H})}),ee=t.createStyle({...l.getLabelStyles({styles:b,type:"right",isHorizontal:H})}),et=t.createStyle({...l.getArrowStyles({type:"left"})}),ea=t.createStyle({...l.getArrowStyles({type:"right"})}),es=t.createStyle({...l.getLineStyles({isHorizontal:H,sliderLineColor:P,sliderLineWidth:D})}),el=t.createStyle({...l.getHandleStyles({handleSize:$,isHorizontal:H,sliderLineColor:P,sliderLineWidth:D})}),ei=t.createStyle({...l.getHandleCustomStyles()}),er=t.createStyle({...l.getSliderStyles({hover:L,handleSize:$,isHorizontal:H})}),eg=t.createClass({...i.getOuterWrapperClasses(p?.cssClass)}),ed=t.createClass({...i.getLabelClasses(b)}),ec=t.createClass({...i.getLabelContainerClasses()}),ey=r.getLabelAttrs({componentUid:E,positionId:"left",label:C??""}),eo=r.getLabelAttrs({componentUid:E,positionId:"right",label:O??""}),en=t.createAttr({...r.getImageLiquidAttrs({priority:u,src:U,title:v,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`right-image-${E}`})}),ep=t.createAttr({...r.getImageLiquidAttrs({priority:u,src:T,title:A,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`left-image-${E}`})}),em=r.getLabelLiquidAttrs({pageContext:S,translateLabel:"leftImageLabel"}),eS=r.getLabelLiquidAttrs({pageContext:S,translateLabel:"rightImageLabel"}),eu=t.createAttr({...r.getImagePlaceholderAttrs({width:N?.width,height:N?.height})}),eh=t.createStateOrContext({hover:L,handle:f,vertical:z,leftImage:o,rightImage:n,handleSize:$,aspectRatio:k,defaultRatio:x,componentUid:E,leftImageCss:I,rightImageCss:w,sliderLineColor:P,sliderLineWidth:D,sliderPositionPercentage:W,onSliderPositionChange:h});return e.template`
     <gp-image-comparison
-      data-id="${A}"
-      style="${z}"
-      class="${X}"
+      data-id="${E}"
+      style="${V}"
+      class="${eg}"
     >
-      <script gp-data type="application/json">${JSON.stringify(ey)}</script>
-      <div id="img-comparison-wrapper-${A}" style="${E}">
+      <script gp-data type="application/json">${JSON.stringify(eh)}</script>
+      <div id="img-comparison-wrapper-${E}" style="${B}">
         <div
-          id="img-comparison-container-${A}"
+          id="img-comparison-container-${E}"
           data-testid="container"
-          style="${k}"
+          style="${K}"
         >
-          ${ed()}
-          ${ec()}
-          ${em()}
-          ${eg()}
-          ${system.If(w,eo(),"")}
-          ${system.If(N,en(),"")}
+          ${e.template`
+      <img alt="" ${eu} style="${Q}" />
+    `}
+          ${s.default({...en,alt:j,style:X,setting:{qualityType:G,qualityPercent:M},enableLazyLoadImage:!u,isNotLazyload:u,customAttrs:{"data-testid":"right-image"}})}
+          ${s.default({...ep,alt:q,style:Y,setting:{qualityType:G,qualityPercent:M},enableLazyLoadImage:!u,isNotLazyload:u,customAttrs:{"data-testid":"left-image"}})}
+          ${c.default({componentUid:E,customHandle:f,lineStyles:es,sliderStyles:er,handleStyles:el,customHandleStyles:ei,leftArrowStyles:et,rightArrowStyles:ea})}
+          ${t.If(_,d.default({...ey,...em,styles:b,childrenClass:ed,childrenStyle:Z,containerClass:ec,containerStyle:{}}),"")}
+          ${t.If(F,d.default({...eo,...eS,styles:b,childrenClass:ed,childrenStyle:ee,containerClass:ec,containerStyle:{}}),"")}
         </div>
       </div>
     </gp-image-comparison>
-    ${ep()}
-  `};exports.default=CompareImage;
+    ${`${t.If(e.isLocalEnv,`<script ${a.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-image-comparison-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${a.getSettingPreloadData('class="gps-link" delay',"src")}="${e.baseAssetURL}/assets-v2/gp-image-comparison-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}`}
+  `};

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

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js"),CompareImage=require("./CompareImage.js");const ImageComparison=({setting:e,styles:a,builderProps:s,advanced:t,...r})=>{let{imageLeft:l,altLeft:i,titleLeft:m,imageRight:o,altRight:g,titleRight:n,direction:c,defaultPercentage:d,leftImageLabel:p,rightImageLabel:u,sliderLineWidth:I,hoverToSlide:h,enableLabel:j,preload:f,enableSEOLeft:v,enableSEORight:y}=e??{},C=system.createClass(classes.getImageComparisonWrapperClasses()),x=system.createStyleReact(classes.getImageComparisonWrapperStyles());return jsxRuntime.jsx("div",{style:x,className:C,"data-allow-active-on-mousemove":!0,children:jsxRuntime.jsx(CompareImage.default,{...r,styles:a,preload:f,advanced:t,leftImage:l,leftImageAlt:v?i:"",leftImageTitle:v?m:"",rightImage:o,rightImageAlt:y?g:"",rightImageTitle:y?n:"",leftImageLabel:p??"Before",rightImageLabel:u??"After",sliderLineWidth:I,sliderPositionPercentage:helpers.getSliderPositionPercentage(d),vertical:"vertical"===c,hover:h,enableLabel:j,componentUid:s?.uid,builderData:s?.builderData})})};exports.default=ImageComparison;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("@gem-sdk/system"),r=require("../common/classes.js"),t=require("../common/helpers.js"),l=require("./CompareImage.js");exports.default=({setting:s,styles:i,builderProps:o,advanced:m,...g})=>{let{imageLeft:d,altLeft:c,titleLeft:n,imageRight:u,altRight:p,titleRight:I,direction:f,defaultPercentage:v,leftImageLabel:h,rightImageLabel:b,sliderLineWidth:j,hoverToSlide:y,enableLabel:q,preload:x,enableSEOLeft:C,enableSEORight:P}=s??{},L=a.createClass(r.getImageComparisonWrapperClasses()),A=a.createStyleReact(r.getImageComparisonWrapperStyles());return e.jsx("div",{style:A,className:L,"data-allow-active-on-mousemove":!0,children:e.jsx(l.default,{...g,styles:i,preload:x,advanced:m,leftImage:d,leftImageAlt:C?c:"",leftImageTitle:C?n:"",rightImage:u,rightImageAlt:P?p:"",rightImageTitle:P?I:"",leftImageLabel:h??"Before",rightImageLabel:b??"After",sliderLineWidth:j,sliderPositionPercentage:t.getSliderPositionPercentage(v),vertical:"vertical"===f,hover:y,enableLabel:q,componentUid:o?.uid,builderData:o?.builderData})})};

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime");require("react");var styles=require("../common/styles.js");const Label=e=>{let{uid:s,label:t,styles:r,positionId:l,childrenClass:a,childrenStyle:i,containerClass:o,containerStyle:n}=e,c=styles.getLabelCustomCss(r,s??""),u=r?.typo?.attrs?.transform==="capitalize"?t?.toString().toLocaleLowerCase():t;return jsxRuntime.jsxs("div",{id:`image-comparison-${l}-label-${s}`,style:n,className:o,children:[jsxRuntime.jsx("style",{children:c}),jsxRuntime.jsx("div",{className:a,style:i,children:u})]})};Label.propTypes={},exports.default=Label;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var s=require("../common/styles.js");const r=r=>{let{uid:t,label:a,styles:l,positionId:i,childrenClass:o,childrenStyle:c,containerClass:n,containerStyle:u}=r,d=s.getLabelCustomCss(l,t??""),m=l?.typo?.attrs?.transform==="capitalize"?a?.toString().toLocaleLowerCase():a;return e.jsxs("div",{id:`image-comparison-${i}-label-${t}`,style:u,className:n,children:[e.jsx("style",{children:d}),e.jsx("div",{className:o,style:c,children:m})]})};r.propTypes={},exports.default=r;

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

package/dist/cjs/image-comparison/components/SlideHandle.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),system=require("@gem-sdk/system");require("react");const SlideHandle=({customHandle:e,componentUid:s,lineStyles:i,sliderStyles:t,handleStyles:l,customHandleStyles:n,leftArrowStyles:x,rightArrowStyles:r,sliderRef:d})=>jsxRuntime.jsxs("div",{ref:d,id:`image-comparison-slider-${s}`,style:t,children:[jsxRuntime.jsx("div",{style:i}),system.If(!!e,jsxRuntime.jsx("div",{style:n,children:e}),jsxRuntime.jsxs("div",{style:l,children:[jsxRuntime.jsx("svg",{style:x,width:"6",height:"12",viewBox:"0 0 6 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsxRuntime.jsx("path",{d:"M0 6L6 0V12L0 6Z",fill:"white"})}),jsxRuntime.jsx("svg",{style:r,width:"6",height:"12",viewBox:"0 0 6 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsxRuntime.jsx("path",{d:"M6 6L0 12V0L6 6Z",fill:"white"})})]})),jsxRuntime.jsx("div",{style:i})]});exports.default=SlideHandle;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("@gem-sdk/system");require("react"),exports.default=({customHandle:i,componentUid:t,lineStyles:l,sliderStyles:r,handleStyles:d,customHandleStyles:h,leftArrowStyles:x,rightArrowStyles:n,sliderRef:w})=>e.jsxs("div",{ref:w,id:`image-comparison-slider-${t}`,style:r,children:[e.jsx("div",{style:l}),s.If(!!i,e.jsx("div",{style:h,children:i}),e.jsxs("div",{style:d,children:[e.jsx("svg",{style:x,width:"6",height:"12",viewBox:"0 0 6 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M0 6L6 0V12L0 6Z",fill:"white"})}),e.jsx("svg",{style:n,width:"6",height:"12",viewBox:"0 0 6 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M6 6L0 12V0L6 6Z",fill:"white"})})]})),e.jsx("div",{style:l})]});

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

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system");const SlideHandle=({customHandle:e,componentUid:t,lineStyles:i,sliderStyles:s,handleStyles:l,customHandleStyles:d,leftArrowStyles:v,rightArrowStyles:r})=>core.template`
-    <div id="image-comparison-slider-${t}" style="${s}">
-      <div style="${i}"></div>
-      ${system.If(!!e,core.template`<div style="${d}">${e}</div>`,core.template`<div style="${l}">
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("@gem-sdk/system");exports.default=({customHandle:i,componentUid:s,lineStyles:l,sliderStyles:d,handleStyles:v,customHandleStyles:r,leftArrowStyles:w,rightArrowStyles:g})=>e.template`
+    <div id="image-comparison-slider-${s}" style="${d}">
+      <div style="${l}"></div>
+      ${t.If(!!i,e.template`<div style="${r}">${i}</div>`,e.template`<div style="${v}">
           <svg
-            style="${v}"
+            style="${w}"
             width="6" height="12"
             viewBox="0 0 6 12"
             fill="none"
@@ -12,7 +12,7 @@
             <path d="M0 6L6 0V12L0 6Z" fill="white"/>
           </svg>
           <svg
-            style="${r}"
+            style="${g}"
             width="6"
             height="12"
             viewBox="0 0 6 12" fill="none"
@@ -21,6 +21,6 @@
             <path d="M6 6L0 12V0L6 6Z" fill="white"/>
           </svg>
         </div>`)}
-      <div style="${i}"></div>
+      <div style="${l}"></div>
     </div>
-  `;exports.default=SlideHandle;
+  `;

package/dist/cjs/image-comparison/hooks/useCompareImage.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core"),React=require("react");const useCompareImage=({props:e,aspectRatio:t})=>{let{styles:n,leftImage:o,rightImage:r,hover:u=!1,vertical:s=!1,sliderLineWidth:c=2,sliderPositionPercentage:a=.5,onSliderPositionChange:i,preload:m}=e,d=!s,{isPreviewSharePageMode:v,isEditMode:l}=core.useRenderMode(),R="STATIC"===core.usePageType(),[f,g]=React.useState(a),[p,E]=React.useState(0),[w,h]=React.useState(0),[L,b]=React.useState(!1),[C,S]=React.useState(!1),I=React.useRef(null),M=React.useRef(null),B=React.useRef(null),O=React.useRef(null),{onListener:T,saveToElementInteractionData:X}=core.useInteraction(),Y=React.useRef(null),q=React.useMemo(()=>t,[o,r,n?.aspectRatio,n?.customAspectRadio]);React.useEffect(()=>{let t=`[data-id="${e?.componentUid}"]`;T({event:"gp:change-ratio-original",selector:t,elementRef:Y},e=>{let{data:t,isRollback:n,uniqueStorageKey:o}=e||{};if(!n||void 0!==t){if(n){g(Number(t));return}X(Y.current,o,f),g(Number(t)/100)}})},[T,e?.componentUid,X,f]);let A=React.useMemo(()=>c/2+21,[c]),N=React.useMemo(()=>(d?p-c/2:w-c/2)-21,[d,p,c,w]),P=m||l||v||R;React.useEffect(()=>{let e=I.current;if(!e)return;let t=new ResizeObserver(([e])=>{let t=e?.target.getBoundingClientRect().width??0;E(t)});return t.observe(e),()=>t.disconnect()},[]),React.useEffect(()=>{let e=O?.current?.complete;return e&&b(!0),()=>{b(!1)}},[o]),React.useEffect(()=>{let e=B?.current?.complete;return e&&S(!0),()=>{S(!1)}},[r]);let U=C&&L;return React.useEffect(()=>{let e=d?a*p:a*w;e<A?g(d?A/p:A/w):e>N?g(d?N/p:N/w):g(a)},[w,p,d,N,A,a]),React.useEffect(()=>{let e=e=>{let t=e||window.event;if(t.stopPropagation(),t.button&&0!==t.button)return;let n="touches"in t?t?.touches?.[0]?.pageX??0:t.pageX,o="touches"in t?t?.touches?.[0]?.pageY??0:t.pageY,r=n-window.pageXOffset,u=o-window.pageYOffset,s=B.current?.getBoundingClientRect(),c=d?r-(s?.left??0):u-(s?.top??0);c<A&&(c=A),c>N&&(c=N),d?g(c/p):g(c/w),i&&(d?i(c/p):i(c/w))},t=t=>{t.preventDefault(),e(t),t.button&&0!==t.button||(window.addEventListener("mousemove",e),r.addEventListener("touchmove",e))},n=()=>{window.removeEventListener("mousemove",e),r.removeEventListener("touchmove",e)},o=I.current,r=M.current;if(U&&o&&r){r.addEventListener("touchstart",t),r.addEventListener("touchend",n),u?(o.addEventListener("mousemove",e),o.addEventListener("mouseleave",n)):(o.addEventListener("mousedown",t),window.addEventListener("mouseup",n));let s=O.current?.getBoundingClientRect(),c=B.current?.getBoundingClientRect(),a=(s?.height??0)/(s?.width??1),i=(c?.height??0)/(c?.width??1),m=Math.min(a,i),d=p*m;h(d)}return()=>{o&&r&&(r.removeEventListener("touchstart",t),r.removeEventListener("touchend",n),o.removeEventListener("mousemove",e),o.removeEventListener("mouseleave",n),o.removeEventListener("mousedown",t),window.removeEventListener("mouseup",n),window.removeEventListener("mousemove",e),r.removeEventListener("touchmove",e))}},[u,N,A,d,q,p,w,U,c,n?.aspectRatio,i]),{ref:Y,priority:P,sliderRef:M,containerRef:I,leftImageRef:O,rightImageRef:B,sliderPosition:f,containerWidth:p,containerHeight:w,allImagesLoaded:U,setLeftImgLoaded:b,setRightImgLoaded:S}};exports.useCompareImage=useCompareImage;
+"use strict";var e=require("@gem-sdk/core"),t=require("react");exports.useCompareImage=({props:n,aspectRatio:r})=>{let{styles:o,leftImage:u,rightImage:s,hover:i=!1,vertical:c=!1,sliderLineWidth:d=2,sliderPositionPercentage:v=.5,onSliderPositionChange:a,preload:m}=n,l=!c,{isPreviewSharePageMode:f,isEditMode:g}=e.useRenderMode(),p="STATIC"===e.usePageType(),[E,w]=t.useState(v),[h,L]=t.useState(0),[R,b]=t.useState(0),[C,S]=t.useState(!1),[M,B]=t.useState(!1),I=t.useRef(null),O=t.useRef(null),T=t.useRef(null),X=t.useRef(null),{onListener:Y,saveToElementInteractionData:q}=e.useInteraction(),y=t.useRef(null),A=t.useMemo(()=>r,[u,s,o?.aspectRatio,o?.customAspectRadio]);t.useEffect(()=>{let e=`[data-id="${n?.componentUid}"]`;Y({event:"gp:change-ratio-original",selector:e,elementRef:y},e=>{let{data:t,isRollback:n,uniqueStorageKey:r}=e||{};if(!n||void 0!==t){if(n){w(Number(t));return}q(y.current,r,E),w(Number(t)/100)}})},[Y,n?.componentUid,q,E]);let N=t.useMemo(()=>d/2+21,[d]),P=t.useMemo(()=>(l?h-d/2:R-d/2)-21,[l,h,d,R]);t.useEffect(()=>{let e=I.current;if(!e)return;let t=new ResizeObserver(([e])=>{let t=e?.target.getBoundingClientRect().width??0;L(t)});return t.observe(e),()=>t.disconnect()},[]),t.useEffect(()=>{let e=X?.current?.complete;return e&&S(!0),()=>{S(!1)}},[u]),t.useEffect(()=>{let e=T?.current?.complete;return e&&B(!0),()=>{B(!1)}},[s]);let U=M&&C;return t.useEffect(()=>{let e=l?v*h:v*R;e<N?w(l?N/h:N/R):e>P?w(l?P/h:P/R):w(v)},[R,h,l,P,N,v]),t.useEffect(()=>{let e=e=>{let t=e||window.event;if(t.stopPropagation(),t.button&&0!==t.button)return;let n="touches"in t?t?.touches?.[0]?.pageX??0:t.pageX,r="touches"in t?t?.touches?.[0]?.pageY??0:t.pageY,o=n-window.pageXOffset,u=r-window.pageYOffset,s=T.current?.getBoundingClientRect(),i=l?o-(s?.left??0):u-(s?.top??0);i<N&&(i=N),i>P&&(i=P),l?w(i/h):w(i/R),a&&(l?a(i/h):a(i/R))},t=t=>{t.preventDefault(),e(t),t.button&&0!==t.button||(window.addEventListener("mousemove",e),o.addEventListener("touchmove",e))},n=()=>{window.removeEventListener("mousemove",e),o.removeEventListener("touchmove",e)},r=I.current,o=O.current;if(U&&r&&o){o.addEventListener("touchstart",t),o.addEventListener("touchend",n),i?(r.addEventListener("mousemove",e),r.addEventListener("mouseleave",n)):(r.addEventListener("mousedown",t),window.addEventListener("mouseup",n));let u=X.current?.getBoundingClientRect(),s=T.current?.getBoundingClientRect(),c=(u?.height??0)/(u?.width??1),d=(s?.height??0)/(s?.width??1),v=h*Math.min(c,d);b(v)}return()=>{r&&o&&(o.removeEventListener("touchstart",t),o.removeEventListener("touchend",n),r.removeEventListener("mousemove",e),r.removeEventListener("mouseleave",n),r.removeEventListener("mousedown",t),window.removeEventListener("mouseup",n),window.removeEventListener("mousemove",e),o.removeEventListener("touchmove",e))}},[i,P,N,l,A,h,R,U,d,o?.aspectRatio,a]),{ref:y,priority:m||g||f||p,sliderRef:O,containerRef:I,leftImageRef:X,rightImageRef:T,sliderPosition:E,containerWidth:h,containerHeight:R,allImagesLoaded:U,setLeftImgLoaded:S,setRightImgLoaded:B}};

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("next/link"),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 e=require("./settings/ImageComparison.js");const r={ImageComparison:e.default};exports.imageComparisonSetting=r;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var dynamic=require("next/dynamic"),Loading=require("../common/components/Loading.js");require("react/jsx-runtime"),require("react"),require("@gem-sdk/core");const ImageComparison=dynamic(()=>Promise.resolve().then(function(){return require("./components/ImageComparison.js")}),{loading:Loading.default});var imageComparison={ImageComparison};exports.default=imageComparison;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("next/dynamic"),r=require("../common/components/Loading.js");require("react/jsx-runtime"),require("react"),require("@gem-sdk/core");const o=e(()=>Promise.resolve().then(function(){return require("./components/ImageComparison.js")}),{loading:r.default});exports.default={ImageComparison:o};

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

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var settings=require("./configs/settings.js"),uiV2=require("./configs/ui-v2.js");const config={tag:"ImageComparison",label:"Image Comparison",icon:`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./configs/settings.js"),t=require("./configs/ui-v2.js");const i={tag:"ImageComparison",label:"Image Comparison",icon:`
   <div>ImageComparison</div>
-  `,settings:settings.ImageComparisonSettings,ui:[],uiV2:uiV2.SettingUIV2,presets:[{id:"image-comparison",name:"Image Comparison",icon:{desktop:`
+  `,settings:e.ImageComparisonSettings,ui:[],uiV2:t.SettingUIV2,presets:[{id:"image-comparison",name:"Image Comparison",icon:{desktop:`
          <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M0 3C0 1.34315 1.34315 0 3 0H37V48H3C1.34315 48 0 46.6569 0 45V3Z" fill="#757575"/>
           <path d="M37 0H93C94.6569 0 96 1.34315 96 3V45C96 46.6569 94.6569 48 93 48H37V0Z" fill="#424242"/>
@@ -9,4 +9,4 @@
           <path d="M40.2225 21.1928L42.7903 23.5376C43.0699 23.793 43.0699 24.207 42.7903 24.4624L40.2225 26.8072C39.7713 27.2191 39 26.9274 39 26.3448V21.6552C39 21.0726 39.7713 20.7809 40.2225 21.1928Z" fill="#424242"/>
           <rect x="37" width="1" height="48" fill="#D6D6D6"/>
           </svg>
-        `},components:[{tag:"ImageComparison",advanced:{margin:{desktop:{bottom:0}}}}]}],rootOverride:{styles:{fullWidth:{desktop:!1},width:{desktop:"600px"},align:{desktop:"center"}},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}};exports.default=config;
+        `},components:[{tag:"ImageComparison",advanced:{margin:{desktop:{bottom:0}}}}]}],rootOverride:{styles:{fullWidth:{desktop:!1},width:{desktop:"600px"},align:{desktop:"center"}},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}};exports.default=i;

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:"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";exports.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:"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"}}}]}];

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

@@ -1 +1 @@
-"use strict";const ImageComparison={altLeft:{id:"altLeft"},altRight:{id:"altRight"},titleLeft:{id:"titleLeft"},titleRight:{id:"titleRight"},rightImageLabel:{id:"rightImageLabel"},leftImageLabel:{id:"leftImageLabel"},imageLeft:{id:"imageLeft",fields:["src"]},imageRight:{id:"imageRight",fields:["src"]}};exports.ImageComparison=ImageComparison;
+"use strict";exports.ImageComparison={altLeft:{id:"altLeft"},altRight:{id:"altRight"},titleLeft:{id:"titleLeft"},titleRight:{id:"titleRight"},rightImageLabel:{id:"rightImageLabel"},leftImageLabel:{id:"leftImageLabel"},imageLeft:{id:"imageLeft",fields:["src"]},imageRight:{id:"imageRight",fields:["src"]}};

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

@@ -1 +1 @@
-"use strict";const SettingUIV2=[{label:"Layout",controls:[{setting:{id:"direction"},layout:"vertical",options:{fullWidth:!0}}]},{label:"Image",controls:[{label:"1st image",setting:{id:"imageLeft"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altLeft"},{field:"imageTitle",settingId:"titleLeft"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altLeft",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleLeft",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"2nd image",setting:{id:"imageRight"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altRight"},{field:"imageTitle",settingId:"titleRight"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altRight",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleRight",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"imageScale"}}]},{label:"Slider",controls:[{label:"Behavior",setting:{id:"hoverToSlide"}},{label:"Default ratio",setting:{id:"defaultPercentage"}}]},{controls:[{label:"Badge",setting:{id:"enableLabel"},options:{labelVariant:"primary",toggleStyle:"switch"}},{label:"1st",conditionDisplay:"enableLabel === true",setting:{id:"leftImageLabel"}},{label:"2nd",conditionDisplay:"enableLabel === true",setting:{id:"rightImageLabel"}},{conditionDisplay:"enableLabel === true",label:"Text style",setting:{id:"typo"},options:{updateFields:[{field:"attrs.color",settingId:"labelTextColor"}]},controlChangeTrigger:{settings:[{action:{controlId:"labelTextColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Padding",conditionDisplay:"enableLabel === true",setting:{id:"labelPadding"}},{label:"Background",conditionDisplay:"enableLabel === true",setting:{id:"labelBackgroundColor"}},{label:"Border",conditionDisplay:"enableLabel === true",setting:{id:"labelBorder"}},{label:"Corner",conditionDisplay:"enableLabel === true",setting:{id:"labelRounded"}},{label:"Shadow",conditionDisplay:"enableLabel === true",setting:{id:"labelShadow"}},{label:"Position",setting:{id:"labelPositionHoz"},conditionDisplay:"enableLabel === true && direction === 'horizontal'"},{label:"Position",setting:{id:"labelPositionVer"},conditionDisplay:"enableLabel === true && direction === 'vertical'"}]},{label:"Size",controls:[{label:"Frame",setting:{id:"aspectRatio"}},{label:"Ratio",conditionDisplay:"aspectRatio === 'custom'",setting:{id:"customAspectRadio"}},{label:"Width",setting:{id:"width"}}]},{label:"Shape",controls:[{label:"Border",setting:{id:"border",state:"normal"}},{label:"Corner",setting:{id:"rounded",state:"normal"}},{label:"Shadow",setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:"Optimize LCP",controls:[{label:"Preload",setting:{id:"preload"}},{label:"Quality",conditionEnable:"((imageLeft.src || imageRight.src) && (imageLeft.src.includes('cdn.shopify.com') || imageRight.src.includes('cdn.shopify.com')))",conditionDisplay:"preload === false",setting:{id:"qualityType"},options:{fullWidth:!0,disableMessage:"This setting only works with images uploaded to Shopify"}},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false && ((imageLeft.src || imageRight.src) && (imageLeft.src.includes("cdn.shopify.com") || imageRight.src.includes("cdn.shopify.com"))) ',setting:{id:"qualityPercent"}}]},{label:"SEO",controls:[{label:"1st image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",popoverLabel:"SEO",setting:{id:"enableSEOLeft"},controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altLeft"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleLeft"}}]},{label:"2nd image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",setting:{id:"enableSEORight"},popoverLabel:"SEO",controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altRight"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleRight"}}]}]},{controls:[{label:"Align",conditionEnable:'!(width === "default" || (parseInt(width) >= 100 && width?.includes("%")))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Align is not supported when width is 100%"}}]}];exports.SettingUIV2=SettingUIV2;
+"use strict";exports.SettingUIV2=[{label:"Layout",controls:[{setting:{id:"direction"},layout:"vertical",options:{fullWidth:!0}}]},{label:"Image",controls:[{label:"1st image",setting:{id:"imageLeft"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altLeft"},{field:"imageTitle",settingId:"titleLeft"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altLeft",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleLeft",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"2nd image",setting:{id:"imageRight"},options:{updateFields:[{field:"preload",settingId:"preload"},{field:"altText",settingId:"altRight"},{field:"imageTitle",settingId:"titleRight"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"altRight",valueFromField:"altText",groupType:"setting",controlType:"setting",removeDevice:!0}},{action:{controlId:"titleRight",valueFromField:"imageTitle",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Scale",setting:{id:"imageScale"}}]},{label:"Slider",controls:[{label:"Behavior",setting:{id:"hoverToSlide"}},{label:"Default ratio",setting:{id:"defaultPercentage"}}]},{controls:[{label:"Badge",setting:{id:"enableLabel"},options:{labelVariant:"primary",toggleStyle:"switch"}},{label:"1st",conditionDisplay:"enableLabel === true",setting:{id:"leftImageLabel"}},{label:"2nd",conditionDisplay:"enableLabel === true",setting:{id:"rightImageLabel"}},{conditionDisplay:"enableLabel === true",label:"Text style",setting:{id:"typo"},options:{updateFields:[{field:"attrs.color",settingId:"labelTextColor"}]},controlChangeTrigger:{settings:[{action:{controlId:"labelTextColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0}}],options:{noRecordHistory:!0}}},{label:"Padding",conditionDisplay:"enableLabel === true",setting:{id:"labelPadding"}},{label:"Background",conditionDisplay:"enableLabel === true",setting:{id:"labelBackgroundColor"}},{label:"Border",conditionDisplay:"enableLabel === true",setting:{id:"labelBorder"}},{label:"Corner",conditionDisplay:"enableLabel === true",setting:{id:"labelRounded"}},{label:"Shadow",conditionDisplay:"enableLabel === true",setting:{id:"labelShadow"}},{label:"Position",setting:{id:"labelPositionHoz"},conditionDisplay:"enableLabel === true && direction === 'horizontal'"},{label:"Position",setting:{id:"labelPositionVer"},conditionDisplay:"enableLabel === true && direction === 'vertical'"}]},{label:"Size",controls:[{label:"Frame",setting:{id:"aspectRatio"}},{label:"Ratio",conditionDisplay:"aspectRatio === 'custom'",setting:{id:"customAspectRadio"}},{label:"Width",setting:{id:"width"}}]},{label:"Shape",controls:[{label:"Border",setting:{id:"border",state:"normal"}},{label:"Corner",setting:{id:"rounded",state:"normal"}},{label:"Shadow",setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:"Optimize LCP",controls:[{label:"Preload",setting:{id:"preload"}},{label:"Quality",conditionEnable:"((imageLeft.src || imageRight.src) && (imageLeft.src.includes('cdn.shopify.com') || imageRight.src.includes('cdn.shopify.com')))",conditionDisplay:"preload === false",setting:{id:"qualityType"},options:{fullWidth:!0,disableMessage:"This setting only works with images uploaded to Shopify"}},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false && ((imageLeft.src || imageRight.src) && (imageLeft.src.includes("cdn.shopify.com") || imageRight.src.includes("cdn.shopify.com"))) ',setting:{id:"qualityPercent"}}]},{label:"SEO",controls:[{label:"1st image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",popoverLabel:"SEO",setting:{id:"enableSEOLeft"},controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altLeft"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleLeft"}}]},{label:"2nd image",type:"combo",iconName:"polaris-text-title",fixedValue:"Edit",setting:{id:"enableSEORight"},popoverLabel:"SEO",controls:[{label:"Alt text",options:{labelAlign:"top"},setting:{id:"altRight"}},{label:"Image title",options:{labelAlign:"top"},setting:{id:"titleRight"}}]}]},{controls:[{label:"Align",conditionEnable:'!(width === "default" || (parseInt(width) >= 100 && width?.includes("%")))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Align is not supported when width is 100%"}}]}];

package/dist/cjs/image-detection/components/ImageDetection.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),Image=require("next/image");function getRandomArbitrary(e,t){return Math.random()*(t-e)+e}const ImageDetection=({setting:e,builderProps:t})=>{let[i,s]=React.useState(!1),[p,r]=React.useState(0),l=React.useRef(null);React.useEffect(()=>(e?.loading?(s(!1),n()):s(!0),()=>{l.current&&clearInterval(l.current)}),[e?.loading]);let n=()=>{r(0),l.current=setInterval(()=>{r(e=>{let t=getRandomArbitrary(0,6);return e>=580?e:e+t})},100)};return jsxRuntime.jsxs("div",{"data-toolbar-hide":"true",className:"gps-base-font-family gps-image-detection-section gp-relative gp-mb-[6px] gp-w-full gp-border gp-border-[#F4F4F4]",children:[jsxRuntime.jsxs("div",{className:"gps-generating-actions gp-absolute gp-right-0 gp-top-0 gp-z-4 gp-hidden gp-h-[32px] gp-items-center gp-border gp-border-[#F4F4F4] gp-bg-white gp-px-[4px]",children:[jsxRuntime.jsxs("svg",{className:"gp-ml-[16px]",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[jsxRuntime.jsx("path",{d:"M12.1455 2.78916C12.0859 2.60446 11.8246 2.60446 11.7649 2.78916L11.6155 3.25182C11.5178 3.554 11.2825 3.79186 10.9814 3.89269L10.5216 4.04667C10.3396 4.10761 10.3396 4.36503 10.5216 4.42597L10.9814 4.57995C11.2825 4.68078 11.5178 4.91864 11.6155 5.22082L11.7649 5.68348C11.8246 5.86818 12.0859 5.86818 12.1455 5.68348L12.295 5.22082C12.3926 4.91864 12.6279 4.68078 12.929 4.57995L13.3889 4.42597C13.5708 4.36503 13.5708 4.10761 13.3889 4.04667L12.929 3.89269C12.6279 3.79186 12.3926 3.554 12.295 3.25182L12.1455 2.78916Z",fill:`url(#paint0_linear_4588_15357_${t?.uid})`}),jsxRuntime.jsx("path",{d:"M8.14069 3.48376C8.0512 3.20671 7.65922 3.20671 7.56973 3.48376L6.95968 5.37244C6.66685 6.27898 5.96086 6.99256 5.0575 7.29506L3.20474 7.91548C2.93175 8.0069 2.93175 8.39302 3.20474 8.48443L5.0575 9.10485C5.96086 9.40735 6.66685 10.1209 6.95968 11.0275L7.56973 12.9162C7.65922 13.1932 8.0512 13.1932 8.14069 12.9162L8.75074 11.0275C9.04357 10.1209 9.74956 9.40735 10.6529 9.10485L12.5057 8.48443C12.7787 8.39302 12.7787 8.0069 12.5057 7.91548L10.6529 7.29506C9.74956 6.99256 9.04357 6.27898 8.75074 5.37243L8.14069 3.48376Z",fill:`url(#paint1_linear_4588_15357_${t?.uid})`}),jsxRuntime.jsxs("defs",{children:[jsxRuntime.jsxs("linearGradient",{id:`paint0_linear_4588_15357_${t?.uid}`,x1:"13.5254",y1:"10.6471",x2:"2.99977",y2:"10.6351",gradientUnits:"userSpaceOnUse",children:[jsxRuntime.jsx("stop",{stopColor:"#874CFD"}),jsxRuntime.jsx("stop",{offset:"1",stopColor:"#3C38E1"})]}),jsxRuntime.jsxs("linearGradient",{id:`paint1_linear_4588_15357_${t?.uid}`,x1:"13.5254",y1:"10.6471",x2:"2.99977",y2:"10.6351",gradientUnits:"userSpaceOnUse",children:[jsxRuntime.jsx("stop",{stopColor:"#874CFD"}),jsxRuntime.jsx("stop",{offset:"1",stopColor:"#3C38E1"})]})]})]}),jsxRuntime.jsx("span",{className:"gps-generating-section-text gp-ml-[4px] gp-mr-[16px] gp-text-[12px] gp-font-medium",children:"Generating section"}),jsxRuntime.jsx("div",{className:"gp-mx-[4px] gp-h-[28px] gp-w-[1px] gp-bg-[#5B5B5B] gp-opacity-10"}),jsxRuntime.jsx("div",{"data-url":e?.imagePreviewUrl||"","data-uid":t?.uid,className:"gp-image-detection-generating-delete gp-relative gp-flex gp-h-[24px] gp-w-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded-[3px] gp-text-[#212121] hover:gp-bg-[#F44336] hover:gp-text-white",children:jsxRuntime.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[jsxRuntime.jsx("path",{d:"M6.5 6C6.77614 6 7 6.22386 7 6.5V11.5C7 11.7761 6.77614 12 6.5 12C6.22386 12 6 11.7761 6 11.5V6.5C6 6.22386 6.22386 6 6.5 6Z",fill:"currentColor"}),jsxRuntime.jsx("path",{d:"M9.5 6C9.77614 6 10 6.22386 10 6.5V11.5C10 11.7761 9.77614 12 9.5 12C9.22386 12 9 11.7761 9 11.5V6.5C9 6.22386 9.22386 6 9.5 6Z",fill:"currentColor"}),jsxRuntime.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11 2.5V3H14C14.2761 3 14.5 3.22386 14.5 3.5C14.5 3.77614 14.2761 4 14 4H13V12.5C13 13.8807 11.8807 15 10.5 15H5.5C4.11929 15 3 13.8807 3 12.5V4H2C1.72386 4 1.5 3.77614 1.5 3.5C1.5 3.22386 1.72386 3 2 3H5V2.5C5 1.67157 5.67157 1 6.5 1H9.5C10.3284 1 11 1.67157 11 2.5ZM4 4V12.5C4 13.3284 4.67157 14 5.5 14H10.5C11.3284 14 12 13.3284 12 12.5V4H4ZM6 3V2.5C6 2.22386 6.22386 2 6.5 2H9.5C9.77614 2 10 2.22386 10 2.5V3H6Z",fill:"currentColor"})]})})]}),!!e?.imagePreviewUrl&&jsxRuntime.jsx(Image,{className:"gp-h-auto gp-w-full gp-opacity-50",src:e?.imagePreviewUrl||"",alt:"",width:100,height:100}),jsxRuntime.jsx("div",{className:`gp-absolute gp-left-0 gp-top-0 gp-z-2 gp-flex gp-h-full gp-w-full   ${i?"gp-hidden":""}`,children:jsxRuntime.jsxs("div",{className:"gp-relative gp-h-[2px] gp-w-full gp-overflow-hidden gp-rounded-md",children:[jsxRuntime.jsx("div",{className:"gp-absolute gp-h-full gp-w-full gp-rounded-md gp-bg-[#F4F4F4]"}),jsxRuntime.jsx("div",{className:"gps-image-to-layout-progress-bar gp-absolute gp-h-full gp-rounded-md gp-transition-all",style:{width:`${p/600*100}%`}})]})}),jsxRuntime.jsxs("div",{className:`gp-absolute gp-left-[8px] gp-top-[8px] gp-z-[99] gp-flex gp-w-[calc(100%_-_16px)] gp-items-center gp-justify-between gp-rounded-[3px] gp-bg-[#FEE4E3] gp-pl-[4px] gp-pr-[16px] gp-h-[48px] ${i?"":"gp-hidden"}`,children:[jsxRuntime.jsxs("div",{className:"gp-flex gp-items-center ",children:[jsxRuntime.jsx("div",{className:"gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",children:jsxRuntime.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsxRuntime.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM8 10.5C7.58579 10.5 7.25 10.8358 7.25 11.25C7.25 11.6642 7.58579 12 8 12C8.41421 12 8.75 11.6642 8.75 11.25C8.75 10.8358 8.41421 10.5 8 10.5ZM8.5 4C8.5 3.72386 8.27614 3.5 8 3.5C7.72386 3.5 7.5 3.72386 7.5 4V9C7.5 9.27614 7.72386 9.5 8 9.5C8.27614 9.5 8.5 9.27614 8.5 9V4Z",fill:"#C3362B"})})}),jsxRuntime.jsx("span",{className:"gps-base-font-family gp-ml-[4px] gp-text-sm gp-font-medium gp-text-[#212121]",children:e?.error||"Sorry, we have trouble generate layout from this section. Try again or delete it to publish."})]}),jsxRuntime.jsxs("div",{className:"gp-flex gp-items-center",children:[!e?.error&&jsxRuntime.jsx("div",{"data-url":e?.imagePreviewUrl||"","data-uid":t?.uid,className:"gp-image-detection-retry gp-cursor-pointer gp-text-sm gp-font-medium gp-text-[#3C67FF]",children:"Try again"}),jsxRuntime.jsx("div",{"data-url":e?.imagePreviewUrl||"","data-uid":t?.uid,className:"gp-image-detection-delete gp-relative gp-ml-[16px] gp-flex gp-h-[32px] gp-w-[32px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded-[3px] gp-text-[#F44336] hover:gp-bg-red-400 hover:gp-text-white",children:jsxRuntime.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[jsxRuntime.jsx("path",{d:"M6.5 6C6.77614 6 7 6.22386 7 6.5V11.5C7 11.7761 6.77614 12 6.5 12C6.22386 12 6 11.7761 6 11.5V6.5C6 6.22386 6.22386 6 6.5 6Z",fill:"currentColor"}),jsxRuntime.jsx("path",{d:"M9.5 6C9.77614 6 10 6.22386 10 6.5V11.5C10 11.7761 9.77614 12 9.5 12C9.22386 12 9 11.7761 9 11.5V6.5C9 6.22386 9.22386 6 9.5 6Z",fill:"currentColor"}),jsxRuntime.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11 2.5V3H14C14.2761 3 14.5 3.22386 14.5 3.5C14.5 3.77614 14.2761 4 14 4H13V12.5C13 13.8807 11.8807 15 10.5 15H5.5C4.11929 15 3 13.8807 3 12.5V4H2C1.72386 4 1.5 3.77614 1.5 3.5C1.5 3.22386 1.72386 3 2 3H5V2.5C5 1.67157 5.67157 1 6.5 1H9.5C10.3284 1 11 1.67157 11 2.5ZM4 4V12.5C4 13.3284 4.67157 14 5.5 14H10.5C11.3284 14 12 13.3284 12 12.5V4H4ZM6 3V2.5C6 2.22386 6.22386 2 6.5 2H9.5C9.77614 2 10 2.22386 10 2.5V3H6Z",fill:"currentColor"})]})})]})]})]})};exports.default=ImageDetection;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),p=require("next/image");exports.default=({setting:l,builderProps:r})=>{let[i,s]=t.useState(!1),[g,a]=t.useState(0),n=t.useRef(null);t.useEffect(()=>(l?.loading?(s(!1),d()):s(!0),()=>{n.current&&clearInterval(n.current)}),[l?.loading]);let d=()=>{a(0),n.current=setInterval(()=>{a(e=>{let t=function(e,t){return Math.random()*(6-e)+e}(0,0);return e>=580?e:e+t})},100)};return e.jsxs("div",{"data-toolbar-hide":"true",className:"gps-base-font-family gps-image-detection-section gp-relative gp-mb-[6px] gp-w-full gp-border gp-border-[#F4F4F4]",children:[e.jsxs("div",{className:"gps-generating-actions gp-absolute gp-right-0 gp-top-0 gp-z-4 gp-hidden gp-h-[32px] gp-items-center gp-border gp-border-[#F4F4F4] gp-bg-white gp-px-[4px]",children:[e.jsxs("svg",{className:"gp-ml-[16px]",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M12.1455 2.78916C12.0859 2.60446 11.8246 2.60446 11.7649 2.78916L11.6155 3.25182C11.5178 3.554 11.2825 3.79186 10.9814 3.89269L10.5216 4.04667C10.3396 4.10761 10.3396 4.36503 10.5216 4.42597L10.9814 4.57995C11.2825 4.68078 11.5178 4.91864 11.6155 5.22082L11.7649 5.68348C11.8246 5.86818 12.0859 5.86818 12.1455 5.68348L12.295 5.22082C12.3926 4.91864 12.6279 4.68078 12.929 4.57995L13.3889 4.42597C13.5708 4.36503 13.5708 4.10761 13.3889 4.04667L12.929 3.89269C12.6279 3.79186 12.3926 3.554 12.295 3.25182L12.1455 2.78916Z",fill:`url(#paint0_linear_4588_15357_${r?.uid})`}),e.jsx("path",{d:"M8.14069 3.48376C8.0512 3.20671 7.65922 3.20671 7.56973 3.48376L6.95968 5.37244C6.66685 6.27898 5.96086 6.99256 5.0575 7.29506L3.20474 7.91548C2.93175 8.0069 2.93175 8.39302 3.20474 8.48443L5.0575 9.10485C5.96086 9.40735 6.66685 10.1209 6.95968 11.0275L7.56973 12.9162C7.65922 13.1932 8.0512 13.1932 8.14069 12.9162L8.75074 11.0275C9.04357 10.1209 9.74956 9.40735 10.6529 9.10485L12.5057 8.48443C12.7787 8.39302 12.7787 8.0069 12.5057 7.91548L10.6529 7.29506C9.74956 6.99256 9.04357 6.27898 8.75074 5.37243L8.14069 3.48376Z",fill:`url(#paint1_linear_4588_15357_${r?.uid})`}),e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:`paint0_linear_4588_15357_${r?.uid}`,x1:"13.5254",y1:"10.6471",x2:"2.99977",y2:"10.6351",gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"#874CFD"}),e.jsx("stop",{offset:"1",stopColor:"#3C38E1"})]}),e.jsxs("linearGradient",{id:`paint1_linear_4588_15357_${r?.uid}`,x1:"13.5254",y1:"10.6471",x2:"2.99977",y2:"10.6351",gradientUnits:"userSpaceOnUse",children:[e.jsx("stop",{stopColor:"#874CFD"}),e.jsx("stop",{offset:"1",stopColor:"#3C38E1"})]})]})]}),e.jsx("span",{className:"gps-generating-section-text gp-ml-[4px] gp-mr-[16px] gp-text-[12px] gp-font-medium",children:"Generating section"}),e.jsx("div",{className:"gp-mx-[4px] gp-h-[28px] gp-w-[1px] gp-bg-[#5B5B5B] gp-opacity-10"}),e.jsx("div",{"data-url":l?.imagePreviewUrl||"","data-uid":r?.uid,className:"gp-image-detection-generating-delete gp-relative gp-flex gp-h-[24px] gp-w-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded-[3px] gp-text-[#212121] hover:gp-bg-[#F44336] hover:gp-text-white",children:e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M6.5 6C6.77614 6 7 6.22386 7 6.5V11.5C7 11.7761 6.77614 12 6.5 12C6.22386 12 6 11.7761 6 11.5V6.5C6 6.22386 6.22386 6 6.5 6Z",fill:"currentColor"}),e.jsx("path",{d:"M9.5 6C9.77614 6 10 6.22386 10 6.5V11.5C10 11.7761 9.77614 12 9.5 12C9.22386 12 9 11.7761 9 11.5V6.5C9 6.22386 9.22386 6 9.5 6Z",fill:"currentColor"}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11 2.5V3H14C14.2761 3 14.5 3.22386 14.5 3.5C14.5 3.77614 14.2761 4 14 4H13V12.5C13 13.8807 11.8807 15 10.5 15H5.5C4.11929 15 3 13.8807 3 12.5V4H2C1.72386 4 1.5 3.77614 1.5 3.5C1.5 3.22386 1.72386 3 2 3H5V2.5C5 1.67157 5.67157 1 6.5 1H9.5C10.3284 1 11 1.67157 11 2.5ZM4 4V12.5C4 13.3284 4.67157 14 5.5 14H10.5C11.3284 14 12 13.3284 12 12.5V4H4ZM6 3V2.5C6 2.22386 6.22386 2 6.5 2H9.5C9.77614 2 10 2.22386 10 2.5V3H6Z",fill:"currentColor"})]})})]}),!!l?.imagePreviewUrl&&e.jsx(p,{className:"gp-h-auto gp-w-full gp-opacity-50",src:l?.imagePreviewUrl||"",alt:"",width:100,height:100}),e.jsx("div",{className:`gp-absolute gp-left-0 gp-top-0 gp-z-2 gp-flex gp-h-full gp-w-full   ${i?"gp-hidden":""}`,children:e.jsxs("div",{className:"gp-relative gp-h-[2px] gp-w-full gp-overflow-hidden gp-rounded-md",children:[e.jsx("div",{className:"gp-absolute gp-h-full gp-w-full gp-rounded-md gp-bg-[#F4F4F4]"}),e.jsx("div",{className:"gps-image-to-layout-progress-bar gp-absolute gp-h-full gp-rounded-md gp-transition-all",style:{width:`${g/600*100}%`}})]})}),e.jsxs("div",{className:`gp-absolute gp-left-[8px] gp-top-[8px] gp-z-[99] gp-flex gp-w-[calc(100%_-_16px)] gp-items-center gp-justify-between gp-rounded-[3px] gp-bg-[#FEE4E3] gp-pl-[4px] gp-pr-[16px] gp-h-[48px] ${i?"":"gp-hidden"}`,children:[e.jsxs("div",{className:"gp-flex gp-items-center ",children:[e.jsx("div",{className:"gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM8 10.5C7.58579 10.5 7.25 10.8358 7.25 11.25C7.25 11.6642 7.58579 12 8 12C8.41421 12 8.75 11.6642 8.75 11.25C8.75 10.8358 8.41421 10.5 8 10.5ZM8.5 4C8.5 3.72386 8.27614 3.5 8 3.5C7.72386 3.5 7.5 3.72386 7.5 4V9C7.5 9.27614 7.72386 9.5 8 9.5C8.27614 9.5 8.5 9.27614 8.5 9V4Z",fill:"#C3362B"})})}),e.jsx("span",{className:"gps-base-font-family gp-ml-[4px] gp-text-sm gp-font-medium gp-text-[#212121]",children:l?.error||"Sorry, we have trouble generate layout from this section. Try again or delete it to publish."})]}),e.jsxs("div",{className:"gp-flex gp-items-center",children:[!l?.error&&e.jsx("div",{"data-url":l?.imagePreviewUrl||"","data-uid":r?.uid,className:"gp-image-detection-retry gp-cursor-pointer gp-text-sm gp-font-medium gp-text-[#3C67FF]",children:"Try again"}),e.jsx("div",{"data-url":l?.imagePreviewUrl||"","data-uid":r?.uid,className:"gp-image-detection-delete gp-relative gp-ml-[16px] gp-flex gp-h-[32px] gp-w-[32px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded-[3px] gp-text-[#F44336] hover:gp-bg-red-400 hover:gp-text-white",children:e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M6.5 6C6.77614 6 7 6.22386 7 6.5V11.5C7 11.7761 6.77614 12 6.5 12C6.22386 12 6 11.7761 6 11.5V6.5C6 6.22386 6.22386 6 6.5 6Z",fill:"currentColor"}),e.jsx("path",{d:"M9.5 6C9.77614 6 10 6.22386 10 6.5V11.5C10 11.7761 9.77614 12 9.5 12C9.22386 12 9 11.7761 9 11.5V6.5C9 6.22386 9.22386 6 9.5 6Z",fill:"currentColor"}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11 2.5V3H14C14.2761 3 14.5 3.22386 14.5 3.5C14.5 3.77614 14.2761 4 14 4H13V12.5C13 13.8807 11.8807 15 10.5 15H5.5C4.11929 15 3 13.8807 3 12.5V4H2C1.72386 4 1.5 3.77614 1.5 3.5C1.5 3.22386 1.72386 3 2 3H5V2.5C5 1.67157 5.67157 1 6.5 1H9.5C10.3284 1 11 1.67157 11 2.5ZM4 4V12.5C4 13.3284 4.67157 14 5.5 14H10.5C11.3284 14 12 13.3284 12 12.5V4H4ZM6 3V2.5C6 2.22386 6.22386 2 6.5 2H9.5C9.77614 2 10 2.22386 10 2.5V3H6Z",fill:"currentColor"})]})})]})]})]})};

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

@@ -1 +1 @@
-"use strict";require("react/jsx-runtime"),require("react"),require("next/image");var ImageDetection$1=require("./settings/ImageDetection.js");const imageDetectionSetting={ImageDetection:ImageDetection$1.default};exports.imageDetectionSetting=imageDetectionSetting;
+"use strict";require("react/jsx-runtime"),require("react"),require("next/image");var e=require("./settings/ImageDetection.js");const t={ImageDetection:e.default};exports.imageDetectionSetting=t;

package/dist/cjs/image-detection/next.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var dynamic=require("next/dynamic"),Loading=require("../common/components/Loading.js");require("react/jsx-runtime"),require("react"),require("@gem-sdk/core");const ImageDetection=dynamic(()=>Promise.resolve().then(function(){return require("./components/ImageDetection.js")}),{loading:Loading.default});var imageDetection={ImageDetection};exports.default=imageDetection;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("next/dynamic"),r=require("../common/components/Loading.js");require("react/jsx-runtime"),require("react"),require("@gem-sdk/core");const t=e(()=>Promise.resolve().then(function(){return require("./components/ImageDetection.js")}),{loading:r.default});exports.default={ImageDetection:t};

package/dist/cjs/image-detection/settings/ImageDetection.js

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var settings=require("./configs/settings.js");const config={tag:"ImageDetection",label:"ImageDetection",icon:`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./configs/settings.js");const t={tag:"ImageDetection",label:"ImageDetection",icon:`
 
-  `,settings:settings.ImageDetectionSettings,presets:[{id:"image-detection",name:"ImageDetection",icon:{desktop:'<span style="font-size: 20px; line-height: 1.5; font-weight: 500;">ID</span>'},components:[{tag:"ImageDetection"}]}],editorConfigs:{component:{noSetting:!0,noDelete:!0,noDuplicate:!0,noDragDrop:!0},placeholder:{notAppendBeforeAfter:!0},toolbar:{hide:!0,parent:!0},sideBar:{hide:!0,tab:{setting:{hide:!0}}}}};exports.default=config;
+  `,settings:e.ImageDetectionSettings,presets:[{id:"image-detection",name:"ImageDetection",icon:{desktop:'<span style="font-size: 20px; line-height: 1.5; font-weight: 500;">ID</span>'},components:[{tag:"ImageDetection"}]}],editorConfigs:{component:{noSetting:!0,noDelete:!0,noDuplicate:!0,noDragDrop:!0},placeholder:{notAppendBeforeAfter:!0},toolbar:{hide:!0,parent:!0},sideBar:{hide:!0,tab:{setting:{hide:!0}}}}};exports.default=t;

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

@@ -1 +1 @@
-"use strict";const ImageDetectionSettings=[{id:"setting",controls:[{id:"imagePreviewUrl",type:"input"},{id:"timeout",type:"input"},{id:"loading",type:"input",default:!0}]},{id:"style",controls:[]}];exports.ImageDetectionSettings=ImageDetectionSettings;
+"use strict";exports.ImageDetectionSettings=[{id:"setting",controls:[{id:"imagePreviewUrl",type:"input"},{id:"timeout",type:"input"},{id:"loading",type:"input",default:!0}]},{id:"style",controls:[]}];