@gem-sdk/components 12.0.0-staging.7 → 12.0.0-staging.70

package/dist/cjs/video/components/HTML5Embed.liquid.js

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),attrs=require("../common/attrs.js");const HTML5Embed=e=>{let t=`gp-video-${e.uid}`,{thumbnail:s,muted:a,autoplay:l,loop:o,controls:r,src:i,style:d,title:n,className:c,lazy:u,poster:m,wrapperStyles:p}=e,y=l&&a&&!!s,g=!u&&e.isVideoComponent,v=!s||l&&a,$=g?i:void 0,h=system.createAttr({...attrs.getHtml5Attr({videoId:t,title:n,autoplay:l,preloadThumbnail:y,offLazyLoad:g,src:i,thumbnail:s})}),b=system.createClass({...classes.getWrapThumbnailClasses(v)}),f=system.createStyle({...styles.getPreloadImageStyle()}),L=system.createClass({...classes.getButtonThumbnailClasses()}),E=system.createClass({...classes.getImageThumbnailClasses()}),I=system.createClass({...classes.getVideoYoutubeClasses(c,g)}),A=()=>y?core.template`${NextImage_liquid.default({src:s,alt:n,priority:m?.preload,enableLazyLoadImage:!0,style:f})}
-    ${system.If(l,`<script>
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),attrs=require("../common/attrs.js");const HTML5Embed=e=>{let t=`gp-video-${e.uid}`,{thumbnail:s,muted:a,autoplay:o,loop:r,controls:i,src:l,style:d,title:n,className:c,lazy:u,poster:m,wrapperStyles:v}=e,p=o&&a&&!!s,y=!u&&e.isVideoComponent,g=!s||o&&a,f=y?l:void 0,$=system.createAttr({...attrs.getHtml5Attr({videoId:t,title:n,autoplay:o,preloadThumbnail:p,offLazyLoad:y,src:l,thumbnail:s})}),h=system.createClass({...classes.getWrapThumbnailClasses(g)}),b=system.createStyle({...styles.getPreloadImageStyle()}),L=system.createClass({...classes.getButtonThumbnailClasses()}),E=system.createClass({...classes.getImageThumbnailClasses()}),A=system.createClass({...classes.getVideoYoutubeClasses(c,y)}),P=()=>p?core.template`${NextImage_liquid.default({src:s,alt:n,priority:m?.preload,enableLazyLoadImage:!0,style:b})}
+    ${system.If(o,`<script>
         document.addEventListener("DOMContentLoaded", (event) => {
           const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
           const autoLoadTimeout = setTimeout(runAutoPlayVideo, 0);
@@ -14,9 +14,21 @@
               });
           }
           function runAutoPlayVideo() {
-              document.getElementById('${t}').setAttribute('autoplay','true');
-              document.getElementById('${t}').setAttribute('playsinline','true');
-              document.getElementById('${t}').play();
+              var video = document.getElementById('${t}');
+              if (!video) return;
+              video.setAttribute('autoplay','true');
+              video.setAttribute('playsinline','true');
+              var playPromise = video.play();
+              if (playPromise !== undefined) {
+                playPromise.catch(function(error) {
+                  if (error.name === 'AbortError') {
+                    video.addEventListener('loadeddata', function onLoaded() {
+                      video.removeEventListener('loadeddata', onLoaded);
+                      video.play();
+                    });
+                  }
+                });
+              }
           }
         });
       </script>`)}
@@ -24,7 +36,7 @@
      <div
         role="presentation"
         style="${d}"
-        class="${b}"
+        class="${h}"
         >
            ${NextImage_liquid.default({id:"video-thumbnail",src:s??"",alt:m?.altText,title:m?.imageTitle,className:E,isDisableAspectStyle:!0,priority:m?.preload,enableLazyLoadImage:!0})}
           <button type="button" class="${L}" aria-label="Play">
@@ -37,20 +49,20 @@
           </button>
         </div>
   `;return core.template`
-  <gp-lite-html5-embed is-check-loaded="${e.isCheckLoaded??!1}" style="${p}">
-    ${A()}
+  <gp-lite-html5-embed is-check-loaded="${e.isCheckLoaded??!1}" style="${v}">
+    ${P()}
     <video
-    ${{...h}}
+    ${{...$}}
       style="${d}"
-      class="${I}"
-      ${r?"controls":void 0}
-      ${o?"loop":void 0}
+      class="${A}"
+      ${i?"controls":void 0}
+      ${r?"loop":void 0}
       ${a?"muted":void 0}
-      ${l?"autoplay":void 0}
+      ${o?"autoplay":void 0}
       playsinline
-      ${$?`src="${$}"`:""}
+      ${f?`src="${f}"`:""}
     ></video>
-    ${system.If(!v,C())}
+    ${system.If(!g,C())}
   </gp-lite-html5-embed>
         ${core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-lite-html5-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-lite-html5-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `};exports.default=HTML5Embed;

package/dist/cjs/video/components/LiteVimeoEmbed.liquid.js

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),helpers$1=require("../common/helpers.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js");const LiteVimeoEmbed=e=>{let{title:s,id:t,lazy:l,aspectRatio:a,autoplay:r,muted:i,thumbnailLink:m,poster:c}=e,{iframeSrc:o}=helpers$1.getVimeoParams(e),p=!l,d=e.thumbnail,g=system.createStateOrContext({id:t,thumbnail:m,lazy:l,iframeSrc:o,title:s,autoplay:r,muted:i,style:e?.vimeoStyleIframe||""}),y=system.createStyle({...styles.getIframeVimeoStyle(a)}),n=system.createStyle({...styles.getArticleVimeoStyle(a,"")}),u=system.createClass({...classes.getArticleVimeoClasses(d,a)}),f=system.createClass({...classes.getImageVimeoClasses(p)}),h=system.createClass({...classes.getButtonVimeoClasses(p)}),$=system.createClass({...classes.getIframeVimeoClasses()});return core.template`
-    <gp-lite-vimeo-embed gp-data='${JSON.stringify(g)}'>
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),helpers$1=require("../common/helpers.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js");const LiteVimeoEmbed=e=>{let{title:s,id:t,lazy:l,aspectRatio:a,autoplay:r,muted:i,thumbnailLink:m,poster:c,translatedVideoUrl:o}=e,{iframeSrc:p}=helpers$1.getVimeoParams(e),d=!l,g=e.thumbnail,y=system.createStateOrContext({id:t,thumbnail:m,lazy:l,iframeSrc:p,title:s,autoplay:r,muted:i,style:e?.vimeoStyleIframe||"",translatedVideoUrl:o}),n=system.createStyle({...styles.getIframeVimeoStyle(a)}),u=system.createStyle({...styles.getArticleVimeoStyle(a,"")}),f=system.createClass({...classes.getArticleVimeoClasses(g,a)}),h=system.createClass({...classes.getImageVimeoClasses(d)}),$=system.createClass({...classes.getButtonVimeoClasses(d)}),b=system.createClass({...classes.getIframeVimeoClasses()});return core.template`
+    <gp-lite-vimeo-embed gp-data='${JSON.stringify(y)}'>
       <article
         aria-hidden
-        class="${u}"
+        class="${f}"
         data-title="${s}"
-        style="${n}"
+        style="${u}"
       >
-      ${NextImage_liquid.default({src:d,alt:c?.altText,title:c?.imageTitle,className:f,isDisableAspectStyle:!0,enableLazyLoadImage:!0,priority:c?.preload,height:c?.height,width:c?.width})}
-         ${system.If(!p,core.template`
-          <button type="button" class="${h}" aria-label="Play">
+      ${NextImage_liquid.default({src:g,alt:c?.altText,title:c?.imageTitle,className:h,isDisableAspectStyle:!0,enableLazyLoadImage:!0,priority:c?.preload,height:c?.height,width:c?.width})}
+         ${system.If(!d,core.template`
+          <button type="button" class="${$}" aria-label="Play">
           <svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
             <path
               fill="currentColor"
@@ -16,15 +16,15 @@
             />
           </svg>
         </button>`)}
-        ${system.If(p,core.template`
+        ${system.If(d,core.template`
           <iframe
-            style="${y}"
+            style="${n}"
             title="${s}"
             frameborder="0"
             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
             allowfullscreen
-            src="${o}"
-            class="${$}"
+            src="${p}"
+            class="${b}"
           ></iframe>`)}
       </article>
     </gp-lite-vimeo-embed>

package/dist/cjs/video/components/LiteYouTubeEmbed.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"),YouTube=require("react-youtube"),helpers=require("../common/helpers.js"),NextImage=require("../../image/components/NextImage.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),useLiteYoutubeEmbed=require("../hooks/useLiteYoutubeEmbed.js");const LiteYouTubeEmbed=e=>{let t=core.useEditorMode(),s="edit"!==t,{style:a,poster:r,iframeClass:l,wrapperClass:u,title:o}=e,{preload:i}=r||{},{videoId:c,paramsImp:m,posterUrl:n,iframeSrc:y}=helpers.getYoutubeParams(e),{iframe:d,intervalPlay:b,warmConnections:g,isVideoStarted:p,videoDuration:j,addIframe:x}=useLiteYoutubeEmbed.useLiteYoutubeEmbed(e,m,c),C=i&&s,h=system.createClass({...classes.getButtonYoutubeClasses(d)}),Y=system.createClass({...classes.getImageYoutubeClasses()}),f=system.createClass({...classes.getArticleYoutubeClasses(C||!1,u)}),S=system.createClass({...classes.getIframeYoutubeClasses(l)}),R=system.createStyle({...styles.getIframeYoutubeStyle(a)}),q=system.createStyle({...styles.getArticleYoutubeStyle(a,n)}),L=system.createClass({...classes.getYoutubeContentClasses()}),N=()=>e.isHeroBanner&&helpers.isSettingLoop(m)?jsxRuntime.jsx(YouTube,{videoId:c,title:o,iframeClassName:S,style:R,className:L,opts:{host:"https://www.youtube-nocookie.com",playerVars:{autoplay:1,state:1,controls:0,mute:1,...helpers.covertStrParamsToObj(m)}},onReady:e=>{e.target.playVideo(),j.current=Math.floor(e.target.getDuration())},onStateChange:e=>{let t=e.target;p.current||(t.playVideo(),p.current=!0,b(e)),0===e.data&&(j.current=t.getCurrentTime(),t.playVideo(),b(e))}}):jsxRuntime.jsx("iframe",{className:S,style:R,title:o,frameBorder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,src:y});return jsxRuntime.jsxs("article",{"aria-hidden":!0,className:f,"data-title":o,style:q,onPointerOver:g,onClick:x,children:[jsxRuntime.jsx(NextImage.default,{src:n,alt:r?.altText,title:r?.imageTitle,priority:s&&i,enableLazyLoadImage:!0,className:Y,isDisableAspectStyle:!0}),jsxRuntime.jsx("button",{type:"button","aria-label":"Play",className:h,children:jsxRuntime.jsxs("svg",{height:"100%",version:"1.1",viewBox:"0 0 68 48",width:"100%",children:[jsxRuntime.jsx("path",{d:"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z",fill:"#f00"}),jsxRuntime.jsx("path",{d:"M 45,24 27,14 27,34",fill:"#fff"})]})}),d&&N()]})};exports.default=LiteYouTubeEmbed;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),YouTube=require("react-youtube"),helpers=require("../common/helpers.js"),NextImage=require("../../image/components/NextImage.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),useLiteYoutubeEmbed=require("../hooks/useLiteYoutubeEmbed.js");const LiteYouTubeEmbed=e=>{let t=core.useEditorMode(),s="edit"!==t,{style:a,poster:r,iframeClass:l,wrapperClass:i,title:u}=e,{preload:o}=r||{},{videoId:c,paramsImp:m,posterUrl:n,iframeSrc:d}=helpers.getYoutubeParams(e),{iframe:y,intervalPlay:b,warmConnections:g,isVideoStarted:p,videoDuration:j,addIframe:x}=useLiteYoutubeEmbed.useLiteYoutubeEmbed(e,m,c),f=o&&s,h=system.createClass({...classes.getButtonYoutubeClasses(y)}),C=system.createClass({...classes.getImageYoutubeClasses()}),Y=system.createClass({...classes.getArticleYoutubeClasses(f||!1,i)}),v=system.createClass({...classes.getIframeYoutubeClasses(l)}),R=system.createStyle({...styles.getIframeYoutubeStyle(a)}),S=system.createStyle({...styles.getArticleYoutubeStyle(a,n)}),N=system.createClass({...classes.getYoutubeContentClasses()}),q=()=>{if(e.isHeroBanner&&helpers.isSettingLoop(m))return jsxRuntime.jsx(YouTube,{videoId:c,title:u,iframeClassName:v,style:R,className:N,opts:{host:"https://www.youtube-nocookie.com",playerVars:{autoplay:1,state:1,controls:0,mute:1,...helpers.covertStrParamsToObj(m)}},onReady:t=>{if(t.target.playVideo(),j.current=Math.floor(t.target.getDuration()),e.isHeroBanner){let e=t.target.getIframe();if(e){let t=e.closest("div.hero-banner-container");if(t){let s=new CustomEvent("youtube-iframe-ready",{detail:{iframe:e},bubbles:!0,cancelable:!0});t.dispatchEvent(s)}}}},onStateChange:e=>{let t=e.target;p.current||(t.playVideo(),p.current=!0,b(e)),0===e.data&&(j.current=t.getCurrentTime(),t.playVideo(),b(e))}});let t=jsxRuntime.jsx("iframe",{className:v,style:R,title:u,frameBorder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,src:d});return e.isHeroBanner?jsxRuntime.jsx("div",{className:N,children:t}):t};return jsxRuntime.jsxs("article",{"aria-hidden":!0,className:Y,"data-title":u,style:S,onPointerOver:g,onClick:x,children:[jsxRuntime.jsx(NextImage.default,{src:n,alt:r?.altText,title:r?.imageTitle,priority:s&&o,enableLazyLoadImage:!0,className:C,isDisableAspectStyle:!0}),jsxRuntime.jsx("button",{type:"button","aria-label":"Play",className:h,children:jsxRuntime.jsxs("svg",{height:"100%",version:"1.1",viewBox:"0 0 68 48",width:"100%",children:[jsxRuntime.jsx("path",{d:"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z",fill:"#f00"}),jsxRuntime.jsx("path",{d:"M 45,24 27,14 27,34",fill:"#fff"})]})}),y&&q()]})};exports.default=LiteYouTubeEmbed;

package/dist/cjs/video/components/LiteYouTubeEmbed.liquid.js

@@ -1,24 +1,26 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),helpers$1=require("../common/helpers.js");const LiteYouTubeEmbed=e=>{let{style:s,iframeClass:t,wrapperClass:a,title:l,poster:r}=e,i=`gp-video-${e.uid}`,{posterUrl:o,iframeSrc:c}=helpers$1.getYoutubeParams(e),u=r?.preload,d=system.createStateOrContext({lazy:e.lazy,style:s,title:l,iframeSrc:c}),m=!e.lazy,p=system.createClass({...classes.getButtonYoutubeClasses(m)}),y=system.createClass({...classes.getImageYoutubeClasses()}),g=system.createClass({...classes.getArticleYoutubeClasses(u||!1,a)}),b=system.createClass({...classes.getIframeYoutubeClasses(t)}),n=system.createStyle({...styles.getIframeYoutubeStyle(s)}),f=system.createStyle({...styles.getArticleYoutubeStyle(s,o)}),$=()=>core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),helpers$1=require("../common/helpers.js");const LiteYouTubeEmbed=e=>{let{style:s,iframeClass:t,wrapperClass:a,title:l,poster:r,translatedVideoUrl:i}=e,o=`gp-video-${e.uid}`,{posterUrl:c,iframeSrc:u}=helpers$1.getYoutubeParams(e),d=r?.preload,m=system.createStateOrContext({lazy:e.lazy,style:s,title:l,iframeSrc:u,translatedVideoUrl:i}),p=!e.lazy,y=system.createClass({...classes.getButtonYoutubeClasses(p)}),g=system.createClass({...classes.getImageYoutubeClasses()}),n=system.createClass({...classes.getArticleYoutubeClasses(d||!1,a)}),b=system.createClass({...classes.getIframeYoutubeClasses(t)}),f=system.createStyle({...styles.getIframeYoutubeStyle(s)}),$=system.createStyle({...styles.getArticleYoutubeStyle(s,c)}),C=system.createClass({...classes.getYoutubeContentClasses()}),h=()=>{let s=core.template`
     <iframe
       id="player-wrapper-${e.uid}"
       class="${b}"
-      style="${n}"
+      style="${f}"
       title="${l}"
       frameborder="0"
       allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
       allowfullscreen
-      src="${c}"
+      src="${u}"
     ></iframe>
-  `;return core.template`
-    <gp-lite-youtube-embed gp-data='${JSON.stringify(d)}'>
+  `;return e.isHeroBanner?core.template`
+        <div class="${C}">${s}</div>
+      `:s};return core.template`
+    <gp-lite-youtube-embed gp-data='${JSON.stringify(m)}'>
       <article
         aria-hidden
-        class="${g}"
+        class="${n}"
         data-title="${l}"
-        style="${f}"
+        style="${$}"
       >
-        ${NextImage_liquid.default({id:i,src:o,alt:r?.altText,title:r?.imageTitle,priority:r?.preload,enableLazyLoadImage:!0,className:y,isDisableAspectStyle:!0,isNotLazyload:r?.preload})}
-        <button type="button" aria-label="Play" class="${p}">
+        ${NextImage_liquid.default({id:o,src:c,alt:r?.altText,title:r?.imageTitle,priority:r?.preload,enableLazyLoadImage:!0,className:g,isDisableAspectStyle:!0,isNotLazyload:r?.preload})}
+        <button type="button" aria-label="Play" class="${y}">
           <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
             <path
               d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"
@@ -27,7 +29,7 @@
             <path d="M 45,24 27,14 27,34" fill="#fff"></path>
           </svg>
         </button>
-        ${system.If(m,$())}
+        ${system.If(p,h())}
       </article>
     </gp-lite-youtube-embed>
     ${core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-lite-youtube-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-lite-youtube-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}

package/dist/cjs/video/components/Video.liquid.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers$1=require("../common/helpers.js"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),HTML5Embed_liquid=require("./HTML5Embed.liquid.js"),LiteVimeoEmbed_liquid=require("./LiteVimeoEmbed.liquid.js"),LiteYouTubeEmbed_liquid=require("./LiteYouTubeEmbed.liquid.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers=require("../../image/common/helpers.js");const Video=({className:e,setting:t,style:s,builderAttrs:l,builderProps:i,advanced:a})=>{let{youtubeUrl:r="",vimeoUrl:o="",html5Url:d,autoplay:u=!1,loopVideo:m=!1,controls:c=!1,mute:y,poster:p,startTime:g,endTime:n}=t??{},b=helpers.getImageSrc(p),{cssClass:q}=a??{},h=helpers$1.getAspectRatioSettings(t?.ratioOptions,t?.aspectRatio),V=system.createAttr({...attrs.getAttr({uid:i?.uid||""})}),$=system.createStyle({...styles.getStyle(t,s)}),f=system.createStyle({...styles.getYoutubeStyle(h)}),I=system.createStyle({...styles.getVimeoStyle(h)}),k=system.createStyle({...styles.getHtml5Style(h)}),S=system.createStyle({...styles.getFallBackImageStyle(t?.aspectRatio)}),_=system.createClass({...classes.getFallbackImageClasses()}),L=system.createClass({...classes.getClasses({className:e,builderProps:i,isInstantLP:!1,advancedCssClass:q})}),j=()=>{switch(t?.type){case"youtube":{let e=helpers$1.getYoutubeVideoId(r);if(!helpers$1.youtubeVideoRegex.test(r)||!e)return NextImage_liquid.default({src:helpers$1.fallbackImageVideoUrl,alt:"Fallback video",className:_,style:S});let s="";return m&&(s+=`&loop=1&playlist=${e}`),g&&(s+=`&start=${helpers$1.parseTimeVideo(g)}`),n&&(s+=`&end=${helpers$1.parseTimeVideo(n)}`),LiteYouTubeEmbed_liquid.default({uid:i?.uid,id:e,autoplay:u,title:"Video",controls:c,params:s,adNetwork:!1,noCookie:!0,muted:!y,thumbnail:b,lazy:t.lazy??!0,preload:p?.preload,poster:p,style:f})}case"vimeo":{let e=helpers$1.getVimeoVideoId(o);if(!helpers$1.vimeoVideoRegex.test(o)||!e)return NextImage_liquid.default({src:helpers$1.fallbackImageVideoUrl,alt:"Fallback video",className:_,style:S});return LiteVimeoEmbed_liquid.default({muted:!y,loop:m,controls:c,thumbnail:b,thumbnailLink:p?.src,autoplay:u,lazy:t.lazy??!0,id:e,title:"Video",aspectRatio:h,poster:p,vimeoStyleIframe:I})}case"html5":if(!d)return NextImage_liquid.default({src:helpers$1.fallbackImageVideoUrl,alt:"Fallback video",className:_,style:S});return HTML5Embed_liquid.default({uid:i?.uid,muted:!y,loop:m,controls:c,autoplay:u,src:d,thumbnail:b,title:"Video",poster:p,lazy:t.lazy??!0,isVideoComponent:!0,style:k})}};return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../common/helpers.js"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),HTML5Embed_liquid=require("./HTML5Embed.liquid.js"),LiteVimeoEmbed_liquid=require("./LiteVimeoEmbed.liquid.js"),LiteYouTubeEmbed_liquid=require("./LiteYouTubeEmbed.liquid.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers$1=require("../../image/common/helpers.js");const Video=({className:e,setting:t,style:s,builderAttrs:l,builderProps:i,advanced:a,pageContext:r})=>{let d=helpers.getSettingTranslatedVideoAndThumbnail({setting:t,uid:i?.uid,pageContext:r??{}}),{youtubeUrl:o="",vimeoUrl:u="",html5Url:m,autoplay:c=!1,loopVideo:y=!1,controls:n=!1,mute:p,poster:g,startTime:b,endTime:q,lazy:h,type:V}=d??{},{youtubeUrlTranslated:f,vimeoUrlTranslated:I}=d,S=helpers$1.getImageSrc(g),{cssClass:k}=a??{},L=helpers.getAspectRatioSettings(d?.ratioOptions,d?.aspectRatio),T=system.createAttr({...attrs.getAttr({uid:i?.uid||""})}),_=system.createStyle({...styles.getStyle(d,s)}),j=system.createStyle({...styles.getYoutubeStyle(L)}),v=system.createStyle({...styles.getVimeoStyle(L)}),x=system.createStyle({...styles.getHtml5Style(L)}),$=system.createStyle({...styles.getFallBackImageStyle(t?.aspectRatio)}),E=system.createClass({...classes.getFallbackImageClasses()}),N=system.createClass({...classes.getClasses({className:e,builderProps:i,isInstantLP:!1,advancedCssClass:k})}),C=()=>{switch(V){case"youtube":{let e=helpers.getYoutubeVideoId(o),t=core.hasTranslatedLiquid(f);if((!helpers.youtubeVideoRegex.test(o)||!e)&&!t)return NextImage_liquid.default({src:helpers.fallbackImageVideoUrl,alt:"Fallback video",className:E,style:$});let s="";return y&&(s+=`&loop=1&playlist=${e}`),b&&(s+=`&start=${helpers.parseTimeVideo(b)}`),q&&(s+=`&end=${helpers.parseTimeVideo(q)}`),LiteYouTubeEmbed_liquid.default({uid:i?.uid,id:e??"",translatedVideoUrl:t?f:"",autoplay:c,title:"Video",controls:n,params:s,adNetwork:!1,noCookie:!0,muted:!p,thumbnail:S,lazy:h??!0,preload:g?.preload,poster:g,style:j})}case"vimeo":{let e=helpers.getVimeoVideoId(u),t=core.hasTranslatedLiquid(I);if((!helpers.vimeoVideoRegex.test(u)||!e)&&!t)return NextImage_liquid.default({src:helpers.fallbackImageVideoUrl,alt:"Fallback video",className:E,style:$});return LiteVimeoEmbed_liquid.default({muted:!p,loop:y,controls:n,thumbnail:S,thumbnailLink:g?.src,autoplay:c,lazy:h??!0,id:e??"",translatedVideoUrl:t?I:"",title:"Video",aspectRatio:L,poster:g,vimeoStyleIframe:v})}case"html5":if(!m)return NextImage_liquid.default({src:helpers.fallbackImageVideoUrl,alt:"Fallback video",className:E,style:$});return HTML5Embed_liquid.default({uid:i?.uid,muted:!p,loop:y,controls:n,autoplay:c,src:m,thumbnail:S,title:"Video",poster:g,lazy:h??!0,isVideoComponent:!0,style:x})}};return core.template`
     <div
-      ${{...l}} ${{...V}} class="${L}" style="${$}">
-      ${j()}
+      ${{...l}} ${{...T}} class="${N}" style="${_}">
+      ${C()}
     </div>
   `};exports.default=Video;

package/dist/cjs/video/settings/Video.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var settings=require("./configs/settings.js"),uiV1=require("./configs/ui-v1.js"),uiV2=require("./configs/ui-v2.js");const config={tag:"Video",label:"Video",icon:`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var settings=require("./configs/settings.js"),uiV2=require("./configs/ui-v2.js");const config={tag:"Video",label:"Video",icon:`
   <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M17.3333 24V16L24 20L17.3333 24ZM20 9.33337C20 9.33337 13.3333 9.33338 8.8 9.60004C8.13333 9.73338 6.8 9.73338 5.6 10.9334C4.66667 11.8667 4.26667 14 4.26667 14C4.26667 14 4 16.4 4 18.8V21.0667C4 23.4667 4.26667 26 4.26667 26C4.26667 26 4.53333 28.1334 5.6 29.0667C6.8 30.2667 8.4 30.2667 9.06667 30.4C11.7333 30.5334 20 30.6667 20 30.6667C20 30.6667 26.6667 30.6667 31.2 30.4C31.8667 30.2667 33.2 30.2667 34.4 29.0667C35.3333 28.1334 35.7333 26 35.7333 26C35.7333 26 36 23.6 36 21.0667V18.8C36 16.4 35.7333 13.8667 35.7333 13.8667C35.7333 13.8667 35.4667 11.7334 34.4 10.8C33.2 9.60004 31.8667 9.60004 31.2 9.46671C26.6667 9.33337 20 9.33337 20 9.33337ZM20 11.7334C20.1333 11.7334 26.6667 11.7334 31.0667 12H31.2C31.7333 12 32.2667 12.1334 32.8 12.5334C32.9333 12.8 33.3333 13.6 33.3333 14.1334C33.3333 14.1334 33.6 16.4 33.6 18.6667V20.9334C33.6 23.2 33.3333 25.4667 33.3333 25.4667C33.2 26 32.9333 26.9334 32.8 27.0667C32.2667 27.6 31.8667 27.6 31.3333 27.6H31.2C26.6667 28.2667 20 28.2667 20 28.2667C19.8667 28.2667 11.8667 28.1334 9.33333 28C9.2 28 9.06667 28 8.93333 28C8.13333 27.8667 7.6 27.8667 7.2 27.4667C7.06667 27.2 6.66667 26.4 6.66667 25.8667C6.66667 25.8667 6.4 23.6 6.4 21.3334V19.0667C6.4 16.8 6.66667 14.5334 6.66667 14.5334C6.8 13.8667 7.06667 13.0667 7.2 12.8C7.73333 12.2667 8.13333 12.2667 8.66667 12.2667H8.8C13.3333 11.7334 19.8667 11.7334 20 11.7334Z" fill="currentColor"/>
   </svg>
-  `,settings:settings.VideoSettings,ui:uiV1.SettingUIV1,uiV2:uiV2.SettingUIV2,editorConfigs:{sideBar:{tab:{style:{hide:!0}}}},presets:[{id:"video",name:{en:"Video"},icon:{desktop:`
+  `,settings:settings.VideoSettings,ui:[],uiV2:uiV2.SettingUIV2,editorConfigs:{sideBar:{tab:{style:{hide:!0}}}},presets:[{id:"video",name:"Video",icon:{desktop:`
           <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
           <rect width="96" height="48" rx="3" fill="#424242"/>
           <path d="M48.0003 9.6665C43.3962 9.6665 39.667 13.3957 39.667 17.9998C39.667 22.604 43.3962 26.3332 48.0003 26.3332C52.6045 26.3332 56.3337 22.604 56.3337 17.9998C56.3337 13.3957 52.6045 9.6665 48.0003 9.6665ZM46.3337 21.7498V14.2498L51.3337 17.9998L46.3337 21.7498Z" fill="#D6D6D6"/>

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

@@ -1 +1 @@
-"use strict";var helpers=require("../../../helpers.js");const VideoSettings=[{id:"setting",controls:[{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"type",type:"select",label:"Video Type",options:[{label:"YouTube",value:"youtube"},{label:"Vimeo",value:"vimeo"},{label:"Video hosting",value:"html5"}],default:"html5"},{id:"youtubeUrl",type:"input",label:"Youtube Link",default:"https://www.youtube.com/watch?v=drIt4RH_kyQ",placeholder:"Insert video url here",hide:!0,action:{clear:!0},actionChangeControls:[{controlID:"loopVideo",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!0},{controlID:"autoplay",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!0},{controlID:"controls",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1},{controlID:"mute",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1},{controlID:"lazy",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1}]},{id:"vimeoUrl",type:"input",label:"Vimeo Link",default:"https://vimeo.com/1095883398",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"html5Url",type:"input",label:"HTML5 Video Link",default:"https://cdn.shopify.com/videos/c/o/v/2cd3deb506b54b009063f7270ab5cf2e.mp4",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"notes",type:"notes",default:'You can upload video to a hosting server e.g Shopify.  <a class="no-underline text-[#8AA4FF] font-medium leading-5" target="_blank" href="https://help.gempages.net/articles/version-7-video-element#video-url">Learn more</a>'},{id:"poster",type:"image",label:"Video Poster",hiddenSetting:{seo:!0}},{id:"preload",type:"toggle",label:"Preload",default:!0},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/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:"width",type:"input:stepper",min:0,label:"Aspect Width",hide:!0,devices:{desktop:{default:16}}},{id:"height",type:"input:stepper",min:1,label:"Aspect Height",hide:!0,devices:{desktop:{default:9}}},{id:"startTime",type:"input",label:"Start time",placeholder:"mm:ss",info:"Start video at xx seconds",hide:!0},{id:"endTime",type:"input",label:"End time",placeholder:"mm:ss",info:"End video at xx seconds",hide:!0},{id:"autoplay",label:"Autoplay",type:"toggle",default:!1},{id:"mute",label:"Enable Sound",type:"toggle",default:!1},{id:"loopVideo",label:"Loop Video",type:"toggle",default:!1},{id:"controls",label:"Show Control Bar",type:"toggle",default:!0,info:"Player controls display in the player"},{id:"lazy",label:"Lazy load",type:"toggle",default:!0,info:"Optimize for pagespeed loading time"}]}];exports.VideoSettings=VideoSettings;
+"use strict";var helpers=require("../../../helpers.js");const VideoSettings=[{id:"setting",controls:[{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"type",type:"select",label:"Video Type",options:[{label:"YouTube",value:"youtube"},{label:"Vimeo",value:"vimeo"},{label:"Video hosting",value:"html5"}],default:"html5"},{id:"youtubeUrl",type:"input",label:"Youtube Link",default:"https://www.youtube.com/watch?v=NfASaHFN1zg",placeholder:"Insert video url here",hide:!0,action:{clear:!0},actionChangeControls:[{controlID:"loopVideo",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!0},{controlID:"autoplay",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!0},{controlID:"controls",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1},{controlID:"mute",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1},{controlID:"lazy",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1}]},{id:"vimeoUrl",type:"input",label:"Vimeo Link",default:"https://vimeo.com/1095883398",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"html5Url",type:"input",label:"HTML5 Video Link",default:"https://cdn.shopify.com/videos/c/o/v/2cd3deb506b54b009063f7270ab5cf2e.mp4",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"notes",type:"notes",default:'You can upload video to a hosting server e.g Shopify.  <a class="no-underline text-[#8AA4FF] font-medium leading-5" target="_blank" href="https://help.gempages.net/articles/version-7-video-element#video-url">Learn more</a>'},{id:"poster",type:"image",label:"Video Poster",hiddenSetting:{seo:!0}},{id:"preload",type:"toggle",label:"Preload",default:!0},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/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:"width",type:"input:stepper",min:0,label:"Aspect Width",hide:!0,devices:{desktop:{default:16}}},{id:"height",type:"input:stepper",min:1,label:"Aspect Height",hide:!0,devices:{desktop:{default:9}}},{id:"startTime",type:"input",label:"Start time",placeholder:"mm:ss",info:"Start video at xx seconds",hide:!0},{id:"endTime",type:"input",label:"End time",placeholder:"mm:ss",info:"End video at xx seconds",hide:!0},{id:"autoplay",label:"Autoplay",type:"toggle",default:!1},{id:"mute",label:"Enable Sound",type:"toggle",default:!1},{id:"loopVideo",label:"Loop Video",type:"toggle",default:!1},{id:"controls",label:"Show Control Bar",type:"toggle",default:!0,info:"Player controls display in the player"},{id:"lazy",label:"Lazy load",type:"toggle",default:!0,info:"Optimize for pagespeed loading time"}]}];exports.VideoSettings=VideoSettings;

package/dist/cjs/video/settings/configs/translate.js

@@ -0,0 +1 @@
+"use strict";const Video={youtubeUrl:{id:"youtubeUrl"},vimeoUrl:{id:"vimeoUrl"},html5Url:{id:"html5Url"},poster:{id:"poster",fields:["src"]}};exports.Video=Video;

package/dist/cjs/video/settings/configs/ui-v2.js

@@ -1 +1 @@
-"use strict";const SettingUIV2=[{label:{en:"Video source"},controls:[{label:{en:"Type"},setting:{id:"type"}},{label:{en:"Video link"},conditionDisplay:"type === 'youtube'",setting:{id:"youtubeUrl"}},{label:{en:"Video link"},conditionDisplay:"type === 'vimeo'",setting:{id:"vimeoUrl"}},{label:{en:"Video link"},conditionDisplay:"type === 'html5'",setting:{id:"html5Url"}},{label:{en:"Thumbnail"},setting:{id:"poster"},options:{updateFields:[{field:"preload",settingId:"preload"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}}],moreSettings:{type:"collapse",controls:[{conditionDisplay:"type === 'youtube'",label:{en:"Start at"},setting:{id:"startTime"}},{conditionDisplay:"type === 'youtube'",label:{en:"End at"},setting:{id:"endTime"}}]}},{label:{en:"Video configure"},controls:[{label:{en:"Control bar"},setting:{id:"controls"}},{label:{en:"Sound"},setting:{id:"mute"}},{label:{en:"Lazy load"},setting:{id:"lazy"}}],moreSettings:{type:"collapse",controls:[{label:{en:"Autoplay"},setting:{id:"autoplay"},options:{disableMessage:"YouTube & Vimeo videos will not autoplay when lazy load is enabled"},conditionEnable:"type === 'html5' || (type !== 'html5' && lazy != true)"},{label:{en:"Loop video"},setting:{id:"loopVideo"}}]}},{label:{en:"Size"},controls:[{label:{en:"Frame"},setting:{id:"aspectRatio"}},{conditionDisplay:"aspectRatio === 'custom'",setting:{id:"ratioOptions"},layout:"vertical"}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"border",state:"normal"}},{label:{en:"Corner"},setting:{id:"rounded",state:"normal"}},{label:{en:"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}}}]}];exports.SettingUIV2=SettingUIV2;
+"use strict";const SettingUIV2=[{label:"Video source",controls:[{label:"Type",setting:{id:"type"}},{label:"Video link",conditionDisplay:"type === 'youtube'",setting:{id:"youtubeUrl"}},{label:"Video link",conditionDisplay:"type === 'vimeo'",setting:{id:"vimeoUrl"}},{label:"Video link",conditionDisplay:"type === 'html5'",setting:{id:"html5Url"}},{label:"Thumbnail",setting:{id:"poster"},options:{updateFields:[{field:"preload",settingId:"preload"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}}],moreSettings:{type:"collapse",controls:[{conditionDisplay:"type === 'youtube'",label:"Start at",setting:{id:"startTime"}},{conditionDisplay:"type === 'youtube'",label:"End at",setting:{id:"endTime"}}]}},{label:"Video configure",controls:[{label:"Control bar",setting:{id:"controls"}},{label:"Sound",setting:{id:"mute"}},{label:"Lazy load",setting:{id:"lazy"}}],moreSettings:{type:"collapse",controls:[{label:"Autoplay",setting:{id:"autoplay"},options:{disableMessage:"YouTube & Vimeo videos will not autoplay when lazy load is enabled"},conditionEnable:"type === 'html5' || (type !== 'html5' && lazy != true)"},{label:"Loop video",setting:{id:"loopVideo"}}]}},{label:"Size",controls:[{label:"Frame",setting:{id:"aspectRatio"}},{conditionDisplay:"aspectRatio === 'custom'",setting:{id:"ratioOptions"},layout:"vertical"}]},{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}}}]}];exports.SettingUIV2=SettingUIV2;

package/dist/esm/accordion/common/styles.js

@@ -1 +1 @@
-import{getStyleBackgroundByDevice as e,getSingleColorVariable as t,makeStyle as o,makeStyleResponsive as r,getStyleShadow as i,getRadiusStyleActiveState as n,composeSize as l,getGlobalColorStateStyle as a,handleConvertBorderStyle as c,handleConvertBorderWidth as d,handleConvertBorderColor as g,makeGlobalSize as h,makeWidth as s}from"@gem-sdk/core";let filterStyles=e=>{let t=["--mb","--mb-mobile","--mb-tablet","--d","--d-mobile","--d-tablet"];return t.forEach(t=>{delete e?.[t]}),e},contentSizePaddingSize=e=>h(e?.contentSizePadding),getContainerStyles=(t,o)=>({...filterStyles(t),...contentSizePaddingSize(o).gap,...e(t?.backgroundContent),"border-radius":"inherit"}),widthHeightSizeControl=e=>h(e),widthStyle=(e,t,o)=>widthHeightSizeControl(o).width["--w"]?widthHeightSizeControl(o).width:r("w",s(e,t)),getItemContainerStyles=(e,l)=>{let{borderContent:a,backgroundContent:c,roundedContent:d,accordionShadow:g,width:h,fullWidth:s,widthHeightSize:m,iconColor:S,color:p,textColor:b,hasActiveShadow:w}=e??{};return{"--text-hover-color":l?t(b?.active??b?.normal):t(b?.hover??b?.normal),"--icon-expand-hover-color":l?t(p?.active??p?.normal):t(p?.hover??p?.normal),"--icon-expand-active-color":t(p?.active??p?.normal),"--icon-active-color":t(S?.active??S?.normal),"--icon-hover-color":l?t(S?.active??S?.normal):t(S?.hover??S?.normal),...widthStyle(h,s,m),...o({bs:a?.border??a?.border,bw:a?.width??a?.width,bc:t(a?.color??a?.color)}),...r("bg",c),...i({value:g,styleAppliedFor:"box-shadow",isEnableShadow:g?.enable||w}),...n({...d,active:{...d||{},radiusType:"custom"}})}},headerContentPaddingSize=e=>h(e),composePosition=e=>o({fd:"left"===e?"row":"row-reverse",jc:"right"===e?"space-between":""}),getDropdownStyles=(e,r)=>{let{headerContentPadding:i,widthHeightSize:n,itemHeaderSpacing:h,bgColor:s,headerBorder:m}=e??{},{isShow:S,iconPosition:p}=r??{};return{...i&&headerContentPaddingSize(i).padding,...h?.type||i?{}:l(h?.custom),...widthHeightSizeControl(n).height,...composePosition(p),...S?o({bgc:t(s?.active??s?.normal),bs:m?.active?.border??m?.normal?.border,bw:m?.active?.width??m?.normal?.width,bc:t(m?.active?.color??m?.normal?.color)}):{...a("bgc",s),...c(m),...d(m),...g(m),...a("bgc",s)}}},getDropdownTextStyles=(e,r)=>({...r?o({c:t(e?.active??e?.normal)}):o({c:t(e?.normal)})}),getIconRotateStyles=(e,r,i)=>{let{color:n}=e??{};return{...o({c:t(r?n?.active??n?.normal??"transparent":n?.normal??"transparent")}),width:`${i??16}px`,height:`${i??16}px`}},composeIconGlobalSize=e=>h(e),getGapStyles=(e,t)=>({...composeIconGlobalSize(e).gap,...r("jc",t)}),getIconStyles=(e,t)=>{let o=t?`${t}px`:"16px";return{...e,width:o,height:o,"--height":o}},getTemplateRow=e=>({"grid-template-rows":`${+!!e}fr`}),getRenderChildrenStyles=()=>({"grid-template-columns":"minmax(auto, 100%)"}),getIconGlobalSize=e=>h(e)?.padding;export{getContainerStyles,getDropdownStyles,getDropdownTextStyles,getGapStyles,getIconGlobalSize,getIconRotateStyles,getIconStyles,getItemContainerStyles,getRenderChildrenStyles,getTemplateRow};
+import{getStyleBackgroundByDevice as e,getSingleColorVariable as t,makeStyle as o,makeStyleResponsive as r,getStyleShadow as i,getRadiusStyleActiveState as n,composeSize as l,getGlobalColorStateStyle as a,handleConvertBorderStyle as c,handleConvertBorderWidth as d,handleConvertBorderColor as g,makeGlobalSize as h,makeWidth as s}from"@gem-sdk/core";let filterStyles=e=>{let t=["--mb","--mb-mobile","--mb-tablet","--d","--d-mobile","--d-tablet"];return t.forEach(t=>{delete e?.[t]}),e},contentSizePaddingSize=e=>h(e?.contentSizePadding),getContainerStyles=(t,o)=>({...filterStyles(t),...contentSizePaddingSize(o).gap,...e(t?.backgroundContent),"border-radius":"inherit"}),widthHeightSizeControl=e=>h(e),widthStyle=(e,t,o)=>widthHeightSizeControl(o).width["--w"]?widthHeightSizeControl(o).width:r("w",s(e,t)),getItemContainerStyles=(e,l)=>{let{borderContent:a,backgroundContent:c,roundedContent:d,accordionShadow:g,width:h,fullWidth:s,widthHeightSize:m,iconColor:S,color:p,textColor:b,hasActiveShadow:w}=e??{};return{"--text-hover-color":l?t(b?.active??b?.normal):t(b?.hover??b?.normal),"--icon-expand-hover-color":l?t(p?.active??p?.normal):t(p?.hover??p?.normal),"--icon-expand-active-color":t(p?.active??p?.normal),"--icon-active-color":t(S?.active??S?.normal),"--icon-hover-color":l?t(S?.active??S?.normal):t(S?.hover??S?.normal),...widthStyle(h,s,m),...o({bs:a?.border??a?.border,bw:a?.width??a?.width,bc:t(a?.color??a?.color)}),...r("bg",c),...i({value:g,styleAppliedFor:"box-shadow",isEnableShadow:g?.enable||w}),...n({...d,active:{...d||{},radiusType:"custom"}})}},headerContentPaddingSize=e=>h(e),composePosition=e=>o({fd:"left"===e?"row":"row-reverse",jc:"right"===e?"space-between":""}),getDropdownStyles=(e,r)=>{let{headerContentPadding:i,widthHeightSize:n,itemHeaderSpacing:h,bgColor:s,headerBorder:m}=e??{},{isShow:S,iconPosition:p}=r??{};return{...i&&headerContentPaddingSize(i).padding,...h?.type||i?{}:l(h?.custom),...widthHeightSizeControl(n).height,...composePosition(p),...S?o({bgc:t(s?.active??s?.normal),bs:m?.active?.border??m?.normal?.border,bw:m?.active?.width??m?.normal?.width,bc:t(m?.active?.color??m?.normal?.color)}):{...a("bgc",s),...c(m),...d(m),...g(m),...a("bgc",s)}}},getDropdownTextStyles=(e,r)=>({...r?o({c:t(e?.active??e?.normal)}):o({c:t(e?.normal)})}),getIconRotateStyles=(e,r,i)=>{let{color:n}=e??{};return{...o({c:t(r?n?.active??n?.normal??"transparent":n?.normal??"transparent")}),width:`${i??16}px`,height:`${i??16}px`}},composeIconGlobalSize=e=>h(e),getGapStyles=(e,t)=>({...composeIconGlobalSize(e).gap,...r("jc",t),...r("ta",t)}),getIconStyles=(e,t)=>{let o=t?`${t}px`:"16px";return{...e,width:o,height:o,"--height":o}},getTemplateRow=e=>({"grid-template-rows":`${+!!e}fr`}),getRenderChildrenStyles=()=>({"grid-template-columns":"minmax(auto, 100%)"}),getIconGlobalSize=e=>h(e)?.padding;export{getContainerStyles,getDropdownStyles,getDropdownTextStyles,getGapStyles,getIconGlobalSize,getIconRotateStyles,getIconStyles,getItemContainerStyles,getRenderChildrenStyles,getTemplateRow};

package/dist/esm/accordion/components/Accordion.liquid.js

@@ -1,17 +1,17 @@
-import{makeStyleResponsive as s,template as e,WrapRenderChildren as i,RenderChildren as t,RenderIf as r,isLocalEnv as o,baseAssetURL as c}from"@gem-sdk/core";import{getDynamicSourceLocales as d,getSettingPreloadData as a}from"../../helpers.js";import{createStateOrContext as l,createClass as p,createStyle as m,createAttr as n}from"@gem-sdk/system";import{getDataState as f}from"../common/helpers.js";import{getContainerStyles as g}from"../common/styles.js";import{getContainerClasses as $,extendClasses as u}from"../common/classes.js";let Accordion=({rawChildren:y,setting:v,styles:S,builderProps:j,pageContext:h,advanced:A,style:k,builderAttrs:E})=>{let{align:I}=S??{},{translate:x,childItem:C,activeKey:P}=v??{},{uidState:_,settingState:z,stylesState:G,accordions:N}=f({setting:v,styles:S,builderProps:j},y),O=l({uid:_,setting:z,styles:{...G}}),T=p($(A?.cssClass)),J=m({...g(k,S)}),K=n({...E,"data-id":j?.uid??""}),M=m({...s("jc",I)}),R=p({"gp-flex":!0}),U=p(u()),V=()=>i({uid:j?.uid??"",customProps:y?.[0].customProps},y?.map((s,i)=>{if(s){let r=d({val:C?.[i],uid:j?.uid,settingId:`childItem_${i}`,pageContext:h,isCapitalize:v?.titleTypo?.attrs?.transform==="capitalize",translate:x});return e`
-          <div class="${R}" style="${M}">
-            ${t({...s,index:i,title:r,accordions:N,parentSetting:v,parentStyle:S,parentUid:j?.uid,childrenIcon:v?.childConfig?.[i],activeKey:P})}
+import{makeStyleResponsive as s,template as i,WrapRenderChildren as t,RenderChildren as e,RenderIf as r,isLocalEnv as o,baseAssetURL as c}from"@gem-sdk/core";import{getDynamicSourceLocales as a,createSettingId as d,getSettingPreloadData as l}from"../../helpers.js";import{createStateOrContext as p,createClass as n,createStyle as m,createAttr as f}from"@gem-sdk/system";import{getDataState as g}from"../common/helpers.js";import{getContainerStyles as u}from"../common/styles.js";import{getContainerClasses as $,extendClasses as y}from"../common/classes.js";import{Accordion as v}from"../settings/configs/translate.js";let Accordion=({rawChildren:j,setting:S,styles:h,builderProps:A,pageContext:k,advanced:x,style:C,builderAttrs:E})=>{let{align:I}=h??{},{childItem:P,activeKey:z}=S??{},{uidState:G,settingState:N,stylesState:O,accordions:T}=g({setting:S,styles:h,builderProps:A},j),_=p({uid:G,setting:N,styles:{...O}}),J=n($(x?.cssClass)),K=m({...u(C,h)}),M=f({...E,"data-id":A?.uid??""}),R=m({...s("jc",I)}),U=n({"gp-flex":!0}),V=n(y()),b=()=>t({uid:A?.uid??"",customProps:j?.[0].customProps},j?.map((s,t)=>{if(s){let r=a({val:P?.[t],uid:A?.uid,settingId:d({id:v?.childItem?.id,index:t}),pageContext:k??{},isCapitalize:S?.titleTypo?.attrs?.transform==="capitalize"});return i`
+          <div class="${U}" style="${R}">
+            ${e({...s,index:t,title:r,accordions:T,parentSetting:S,parentStyle:h,parentUid:A?.uid,childrenIcon:S?.childConfig?.[t],activeKey:z})}
           </div>
-            `}})),b=()=>r(o,`
-    <script ${a('class="gps-link" delay',"src")}="{{ 'gp-accordion-v7-5.js' | asset_url }}"
+            `}})),q=()=>r(o,`
+    <script ${l('class="gps-link" delay',"src")}="{{ 'gp-accordion-v7-5.js' | asset_url }}"
       defer="defer"></script>`,`
-    <script ${a('class="gps-link" delay',"src")}="${c}/assets-v2/gp-accordion-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>
-    `);return e`
-    <gp-accordion ${K} class="${T}" style="${J}"
-      gp-data='${JSON.stringify(O).replaceAll("'","&#039;")}'
+    <script ${l('class="gps-link" delay',"src")}="${c}/assets-v2/gp-accordion-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>
+    `);return i`
+    <gp-accordion ${M} class="${J}" style="${K}"
+      gp-data='${JSON.stringify(_).replaceAll("'","&#039;")}'
         >
-        <div class=" ${U}"></div>
-      ${V()}
+        <div class=" ${V}"></div>
+      ${b()}
     </gp-accordion>
-    ${b()}
+    ${q()}
   `};export{Accordion as default};

package/dist/esm/accordion/settings/Accordion.js

@@ -1,8 +1,8 @@
-import{itemChildrenTemplate as t}from"./configs/child-items.js";import{AccordionSettings as i}from"./configs/settings.js";import{SettingUIV1 as e}from"./configs/ui-v1.js";import{SettingUIV2 as l}from"./configs/ui-v2.js";let config={tag:"Accordion",label:"Accordion",icon:`
+import{itemChildrenTemplate as t}from"./configs/child-items.js";import{AccordionSettings as i}from"./configs/settings.js";import{SettingUIV2 as e}from"./configs/ui-v2.js";let config={tag:"Accordion",label:"Accordion",icon:`
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M3 4C2.58579 4 2.25 4.33579 2.25 4.75C2.25 5.16421 2.58579 5.5 3 5.5H21.0025C21.4167 5.5 21.7525 5.16421 21.7525 4.75C21.7525 4.33579 21.4167 4 21.0025 4H3ZM1.5 9.67558C1.5 8.1568 2.73122 6.92558 4.25 6.92558H19.7525C21.2713 6.92558 22.5025 8.1568 22.5025 9.67558V14.3781C22.5025 15.8969 21.2713 17.1281 19.7525 17.1281H4.25C2.73121 17.1281 1.5 15.8969 1.5 14.3781V9.67558ZM4.25 8.42558C3.55964 8.42558 3 8.98523 3 9.67558V14.3781C3 15.0685 3.55964 15.6281 4.25 15.6281H19.7525C20.4428 15.6281 21.0025 15.0685 21.0025 14.3781V9.67558C21.0025 8.98523 20.4428 8.42558 19.7525 8.42558H4.25ZM2.25 19.2542C2.25 18.84 2.58579 18.5042 3 18.5042H21.0025C21.4167 18.5042 21.7525 18.84 21.7525 19.2542C21.7525 19.6684 21.4167 20.0042 21.0025 20.0042H3C2.58579 20.0042 2.25 19.6684 2.25 19.2542Z" fill="white"/>
   </svg>
-  `,settings:i,ui:e,uiV2:l,presets:[{id:"accordion-1",name:{en:"Accordion"},icon:{desktop:`
+  `,settings:i,ui:[],uiV2:e,presets:[{id:"accordion-1",name:"Accordion",icon:{desktop:`
      <svg width="98" height="56" viewBox="0 0 98 56" fill="none" xmlns="http://www.w3.org/2000/svg">
       <rect x="4" y="4" width="57" height="6" rx="3" fill="#757575"/>
       <rect x="2" y="4" width="57" height="6" rx="3" fill="#757575"/>
@@ -20,7 +20,7 @@ import{itemChildrenTemplate as t}from"./configs/child-items.js";import{Accordion
       <path d="M96 55H0V57H96V55Z" fill="#424242" mask="url(#path-18-inside-6_1355_357)"/>
       <path d="M98 55H2V57H98V55Z" fill="#424242" mask="url(#path-15-inside-5_1355_357)"/>
       </svg>
-        `},components:[{tag:"Accordion",settings:{childItem:["Accordion 1","Accordion 2","Accordion 3"],layoutHeader:"text-only"},styles:{borderContent:{border:"solid",width:"0px 0px 1px 0px",position:"bottom",color:"line-3",isCustom:!0,borderWidth:"Mixed"},headerContentPadding:{desktop:{padding:{type:"medium",top:"8px",left:"0px",bottom:"8px",right:"0px"}}}},advanced:{margin:{bottom:"var(--g-s-l)"}},childrens:[t,t,t]}]},{id:"accordion-3",name:{en:"Accordion"},icon:{desktop:`
+        `},components:[{tag:"Accordion",settings:{childItem:["Accordion 1","Accordion 2","Accordion 3"],layoutHeader:"text-only"},styles:{borderContent:{border:"solid",width:"0px 0px 1px 0px",position:"bottom",color:"line-3",isCustom:!0,borderWidth:"Mixed"},headerContentPadding:{desktop:{padding:{type:"medium",top:"8px",left:"0px",bottom:"8px",right:"0px"}}}},advanced:{margin:{bottom:"var(--g-s-l)"}},childrens:[t,t,t]}]},{id:"accordion-3",name:"Accordion",icon:{desktop:`
         <svg width="96" height="56" viewBox="0 0 96 56" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.75 3.75C8.75 3.33579 8.41421 3 8 3C7.58579 3 7.25 3.33579 7.25 3.75L7.25 6.25H4.75C4.33579 6.25 4 6.58579 4 7C4 7.41421 4.33579 7.75 4.75 7.75H7.25L7.25 10.25C7.25 10.6642 7.58579 11 8 11C8.41421 11 8.75 10.6642 8.75 10.25V7.75H11.25C11.6642 7.75 12 7.41421 12 7C12 6.58579 11.6642 6.25 11.25 6.25H8.75V3.75Z" fill="#AAAAAA"/>
 <rect x="35" y="4" width="57" height="6" rx="3" fill="#757575"/>
@@ -40,7 +40,7 @@ import{itemChildrenTemplate as t}from"./configs/child-items.js";import{Accordion
             <svg width="16" height="16" data-name="minus-regular" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M2 7.75C2 7.33579 2.33579 7 2.75 7L13.25 7C13.6642 7 14 7.33579 14 7.75C14 8.16421 13.6642 8.5 13.25 8.5H2.75C2.33579 8.5 2 8.16421 2 7.75Z" fill="currentColor"/>
 </svg>
-            `,iconPosition:"left"},styles:{headerContentPadding:{desktop:{padding:{type:"medium",top:"8px",left:"0px",bottom:"8px",right:"0px"}}},borderContent:{border:"solid",width:"0px 0px 1px 0px",position:"bottom",color:"line-3",isCustom:!0,borderWidth:"Mixed"},widthHeightSize:{desktop:{width:"600px"}}},advanced:{margin:{bottom:"var(--g-s-l)"}},childrens:[t,t,t]}]},{id:"accordion-2",name:{en:"Accordion"},icon:{desktop:`
+            `,iconPosition:"left"},styles:{headerContentPadding:{desktop:{padding:{type:"medium",top:"8px",left:"0px",bottom:"8px",right:"0px"}}},borderContent:{border:"solid",width:"0px 0px 1px 0px",position:"bottom",color:"line-3",isCustom:!0,borderWidth:"Mixed"},widthHeightSize:{desktop:{width:"600px"}}},advanced:{margin:{bottom:"var(--g-s-l)"}},childrens:[t,t,t]}]},{id:"accordion-2",name:"Accordion",icon:{desktop:`
         <svg width="96" height="56" viewBox="0 0 96 56" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0 3C0 1.34315 1.34315 0 3 0H93C94.6569 0 96 1.34315 96 3V10C96 11.6569 94.6569 13 93 13H3C1.34315 13 0 11.6569 0 10V3Z" fill="#333333"/>
 <g clip-path="url(#clip0_1355_8713)">

package/dist/esm/accordion/settings/configs/settings.js

@@ -1,4 +1,4 @@
-import{itemControlTemplate as e}from"./child-items.js";let AccordionSettings=[{id:"setting",controls:[{id:"childItem",label:"Item management",type:"child-item",default:["Accordion 1","Accordion 2","Accordion 3"],childTemplate:e,expandItem:!1},{id:"translate",type:"input",default:"childItem"},{id:"expandItem",type:"toggle",label:"Expand multiple items",default:!0},{id:"activeKey",label:"Expand item",default:"1",type:"accordion:dropdown:input",inputType:"text",displayOptions:[{label:"Accordion 1",value:"1",reversed:!1},{label:"Accordion 1, 2",value:"1,2",reversed:!0},{label:"All accordions",value:"all"}]},{id:"expandedMode",label:"Expand mode",type:"accordion:segment",default:"multiple",options:[{label:"Single",value:"single"},{label:"Multiple",value:"multiple"}]},{id:"titleTypo",type:"typography-combo",default:{type:"paragraph-1"},ignoreReRender:!0,hiddenSetting:{textAlign:!0}},{id:"general",type:"group",label:"General",controls:[{id:"iconSvg",label:"Accordion icon",type:"option:value",disableToggle:!1,options:[{label:"N/A",value:""},{label:`
+import{itemControlTemplate as e}from"./child-items.js";let AccordionSettings=[{id:"setting",controls:[{id:"childItem",label:"Item management",type:"child-item",default:["Accordion 1","Accordion 2","Accordion 3"],childTemplate:e,expandItem:!1},{id:"expandItem",type:"toggle",label:"Expand multiple items",default:!0},{id:"activeKey",label:"Expand item",default:"1",type:"accordion:dropdown:input",inputType:"text",displayOptions:[{label:"Accordion 1",value:"1",reversed:!1},{label:"Accordion 1, 2",value:"1,2",reversed:!0},{label:"All accordions",value:"all"}]},{id:"expandedMode",label:"Expand mode",type:"accordion:segment",default:"multiple",options:[{label:"Single",value:"single"},{label:"Multiple",value:"multiple"}]},{id:"titleTypo",type:"typography-combo",default:{type:"paragraph-1"},ignoreReRender:!0,hiddenSetting:{textAlign:!0}},{id:"general",type:"group",label:"General",controls:[{id:"iconSvg",label:"Accordion icon",type:"option:value",disableToggle:!1,options:[{label:"N/A",value:""},{label:`
                   <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M9 1.5C9 1.22386 8.77614 1 8.5 1C8.22386 1 8 1.22386 8 1.5V7.5H2C1.72386 7.5 1.5 7.72386 1.5 8C1.5 8.27614 1.72386 8.5 2 8.5H8V14.5C8 14.7761 8.22386 15 8.5 15C8.77614 15 9 14.7761 9 14.5V8.5H15C15.2761 8.5 15.5 8.27614 15.5 8C15.5 7.72386 15.2761 7.5 15 7.5H9V1.5Z" fill="currentColor"/>
                   </svg>`,value:"plus"},{label:`

package/dist/esm/accordion/settings/configs/translate.js

@@ -0,0 +1 @@
+let Accordion={childItem:{id:"childItem"}};export{Accordion};

package/dist/esm/accordion/settings/configs/ui-v2.js

@@ -1 +1 @@
-let SettingUIV2=[{label:{en:"Item management"},controls:[{label:{en:"Item"},setting:{id:"childItem"}}]},{label:{en:"Item style"},controls:[{label:{en:"Background"},setting:{id:"backgroundContent"}},{label:{en:"Border"},setting:{id:"borderContent"}},{label:{en:"Corner"},setting:{id:"roundedContent"}},{label:{en:"Shadow"},setting:{id:"accordionShadow"},compoDefaultValue:{type:"shadow-1",distance:"4px",blur:"12px",spread:"0px",color:"#121212",angle:90,enable:!0},options:{updateFields:[{field:"enable",settingId:"hasActiveShadow"}]},controlChangeTrigger:{settings:[{condition:"accordionShadow.enable === true",source:["accordionShadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"style",controlType:"style",newValue:!0}},{condition:"accordionShadow.enable === false",source:["accordionShadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"style",controlType:"style",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:{en:"Item header"},controls:[{label:{en:"Title icon"},type:"combo",iconName:"polaris-icons",getValueFromSettingID:"layoutHeader",isShowSettingTitle:!0,isHideClear:!0,popoverLabel:{en:"Title icon"},controls:[{label:{en:"Layout"},setting:{id:"layoutHeader"},layout:"vertical"},{layout:"vertical",setting:{id:"childConfig"},conditionDisplay:'layoutHeader !== "text-only"'},{label:{en:"Gap to text"},conditionDisplay:'layoutHeader !== "text-only"',controlConfig:{id:"gap",type:"input:slider",units:["px"],min:0,max:100,step:1,ignoreMax:!0,linkWithSetting:{name:"iconGlobalSize",field:"gap"}}},{label:{en:"Size"},setting:{id:"configIconSize"},conditionDisplay:'layoutHeader !== "text-only"'},{conditionDisplay:'layoutHeader !== "text-only"',label:{en:"Color"},setting:{id:"iconColor",state:"normal"}}]},{label:{en:"Title"},setting:{id:"titleTypo"},options:{updateFields:[{field:"attrs.color",settingId:"textColor",state:"normal"}]},controlChangeTrigger:{settings:[{action:{controlId:"textColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0,state:"normal"}}],options:{noRecordHistory:!0}}},{label:{en:"Expand icon"},type:"combo",iconName:"polaris-icons",fixedValue:"Edited",isHideClear:!0,popoverLabel:{en:"Expand icon"},controls:[{label:{en:"When expanded"},setting:{id:"iconExpand"}},{label:{en:"When collapsed"},setting:{id:"iconCollapse"}},{label:{en:"Position"},setting:{id:"iconPosition"}},{label:{en:"Size"},setting:{id:"iconCollapseSize"}},{label:{en:"Color"},setting:{id:"color",state:"normal"}}]},{label:{en:"Height"},controlConfig:{id:"height",type:"dropdown:input",inputType:"number",units:["px"],linkWithSetting:{name:"widthHeightSize",field:"height"},displayOptions:[{label:"Fit content",value:"Auto"},{label:"Small",value:"32px"},{label:"Medium",value:"48px"},{label:"Large",value:"64px"}]}},{label:{en:"Padding"},controlConfig:{id:"header-content-padding",type:"padding-v2",linkWithSetting:{name:"headerContentPadding",field:"padding"}}},{label:{en:"Background"},setting:{id:"bgColor",state:"normal"}}],moreSettings:{controls:[{label:{en:"Border"},setting:{id:"headerBorder",state:"normal"}},{label:{en:"Align"},setting:{id:"alignment"}}]}},{label:{en:"Item content"},controls:[{label:{en:"Padding"},controlConfig:{id:"content-content-padding",type:"padding-v2",linkWithSetting:{name:"contentSizePadding",field:"padding"}}}]},{label:{en:"Item spacing"},controls:[{label:{en:"Gap"},controlConfig:{id:"gap",type:"input:slider",units:["px"],min:0,max:100,step:1,linkWithSetting:{name:"contentSizePadding",field:"gap"}}}]},{label:{en:"Effect"},controls:[{label:{en:"Hover item"},type:"combo",iconName:"polaris-check-hover",fixedValue:"Styled",popoverLabel:{en:"Hover item"},state:"hover",setting:{id:"enableHoverEffect"},controls:[{label:{en:"Title icon"},setting:{id:"iconColor",state:"hover"}},{label:{en:"Title"},setting:{id:"textColor",state:"hover"}},{label:{en:"Expand icon"},setting:{id:"color",state:"hover"}},{label:{en:"Header color"},setting:{id:"bgColor",state:"hover"}},{label:{en:"Border"},setting:{id:"headerBorder",state:"hover"}}]},{label:{en:"Expand header"},type:"combo",iconName:"polaris-status-active",fixedValue:"Styled",popoverLabel:{en:"Expand header"},setting:{id:"enableActiveEffect"},controls:[{label:{en:"Title icon"},setting:{id:"iconColor",state:"active"}},{label:{en:"Title"},setting:{id:"textColor",state:"active"}},{label:{en:"Expand icon"},setting:{id:"color",state:"active"}},{label:{en:"Header color"},setting:{id:"bgColor",state:"active"}},{label:{en:"Border"},setting:{id:"headerBorder",state:"active"}}]}]},{label:{en:"Size"},controls:[{label:{en:"Width"},controlConfig:{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,fallbackValue:"Auto",linkWithSetting:{name:"widthHeightSize",field:"width"},displayOptions:[{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"1200px",showValue:!0}]}}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"border",state:"normal"}},{label:{en:"Corner"},setting:{id:"rounded",state:"normal"}},{label:{en:"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:{en:"Display condition"},controls:[{label:{en:"Expand mode"},setting:{id:"expandedMode"}},{label:{en:"Auto-expand"},setting:{id:"expandItem"}},{label:{en:"Item"},setting:{id:"activeKey"},conditionDisplay:"expandItem === true"}]},{controls:[{label:{en:"Align"},conditionEnable:'!(parseInt(widthHeightSize.width) >= 100 && widthHeightSize.width?.includes("%"))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"}}]}];export{SettingUIV2};
+let SettingUIV2=[{label:"Item management",controls:[{label:"Item",setting:{id:"childItem"}}]},{label:"Item style",controls:[{label:"Background",setting:{id:"backgroundContent"}},{label:"Border",setting:{id:"borderContent"}},{label:"Corner",setting:{id:"roundedContent"}},{label:"Shadow",setting:{id:"accordionShadow"},compoDefaultValue:{type:"shadow-1",distance:"4px",blur:"12px",spread:"0px",color:"#121212",angle:90,enable:!0},options:{updateFields:[{field:"enable",settingId:"hasActiveShadow"}]},controlChangeTrigger:{settings:[{condition:"accordionShadow.enable === true",source:["accordionShadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"style",controlType:"style",newValue:!0}},{condition:"accordionShadow.enable === false",source:["accordionShadow","hasActiveShadow"],action:{controlId:"hasActiveShadow",groupType:"style",controlType:"style",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:"Item header",controls:[{label:"Title icon",type:"combo",iconName:"polaris-icons",getValueFromSettingID:"layoutHeader",isShowSettingTitle:!0,isHideClear:!0,popoverLabel:"Title icon",controls:[{label:"Layout",setting:{id:"layoutHeader"},layout:"vertical"},{layout:"vertical",setting:{id:"childConfig"},conditionDisplay:'layoutHeader !== "text-only"'},{label:"Gap to text",conditionDisplay:'layoutHeader !== "text-only"',controlConfig:{id:"gap",type:"input:slider",units:["px"],min:0,max:100,step:1,ignoreMax:!0,linkWithSetting:{name:"iconGlobalSize",field:"gap"}}},{label:"Size",setting:{id:"configIconSize"},conditionDisplay:'layoutHeader !== "text-only"'},{conditionDisplay:'layoutHeader !== "text-only"',label:"Color",setting:{id:"iconColor",state:"normal"}}]},{label:"Title",setting:{id:"titleTypo"},options:{updateFields:[{field:"attrs.color",settingId:"textColor",state:"normal"}]},controlChangeTrigger:{settings:[{action:{controlId:"textColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0,state:"normal"}}],options:{noRecordHistory:!0}}},{label:"Expand icon",type:"combo",iconName:"polaris-icons",fixedValue:"Edited",isHideClear:!0,popoverLabel:"Expand icon",controls:[{label:"When expanded",setting:{id:"iconExpand"}},{label:"When collapsed",setting:{id:"iconCollapse"}},{label:"Position",setting:{id:"iconPosition"}},{label:"Size",setting:{id:"iconCollapseSize"}},{label:"Color",setting:{id:"color",state:"normal"}}]},{label:"Height",controlConfig:{id:"height",type:"dropdown:input",inputType:"number",units:["px"],linkWithSetting:{name:"widthHeightSize",field:"height"},displayOptions:[{label:"Fit content",value:"Auto"},{label:"Small",value:"32px"},{label:"Medium",value:"48px"},{label:"Large",value:"64px"}]}},{label:"Padding",controlConfig:{id:"header-content-padding",type:"padding-v2",linkWithSetting:{name:"headerContentPadding",field:"padding"}}},{label:"Background",setting:{id:"bgColor",state:"normal"}}],moreSettings:{controls:[{label:"Border",setting:{id:"headerBorder",state:"normal"}},{label:"Align",setting:{id:"alignment"}}]}},{label:"Item content",controls:[{label:"Padding",controlConfig:{id:"content-content-padding",type:"padding-v2",linkWithSetting:{name:"contentSizePadding",field:"padding"}}}]},{label:"Item spacing",controls:[{label:"Gap",controlConfig:{id:"gap",type:"input:slider",units:["px"],min:0,max:100,step:1,linkWithSetting:{name:"contentSizePadding",field:"gap"}}}]},{label:"Effect",controls:[{label:"Hover item",type:"combo",iconName:"polaris-check-hover",fixedValue:"Styled",popoverLabel:"Hover item",state:"hover",setting:{id:"enableHoverEffect"},controls:[{label:"Title icon",setting:{id:"iconColor",state:"hover"}},{label:"Title",setting:{id:"textColor",state:"hover"}},{label:"Expand icon",setting:{id:"color",state:"hover"}},{label:"Header color",setting:{id:"bgColor",state:"hover"}},{label:"Border",setting:{id:"headerBorder",state:"hover"}}]},{label:"Expand header",type:"combo",iconName:"polaris-status-active",fixedValue:"Styled",popoverLabel:"Expand header",setting:{id:"enableActiveEffect"},controls:[{label:"Title icon",setting:{id:"iconColor",state:"active"}},{label:"Title",setting:{id:"textColor",state:"active"}},{label:"Expand icon",setting:{id:"color",state:"active"}},{label:"Header color",setting:{id:"bgColor",state:"active"}},{label:"Border",setting:{id:"headerBorder",state:"active"}}]}]},{label:"Size",controls:[{label:"Width",controlConfig:{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,fallbackValue:"Auto",linkWithSetting:{name:"widthHeightSize",field:"width"},displayOptions:[{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"1200px",showValue:!0}]}}]},{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:"Display condition",controls:[{label:"Expand mode",setting:{id:"expandedMode"}},{label:"Auto-expand",setting:{id:"expandItem"}},{label:"Item",setting:{id:"activeKey"},conditionDisplay:"expandItem === true"}]},{controls:[{label:"Align",conditionEnable:'!(parseInt(widthHeightSize.width) >= 100 && widthHeightSize.width?.includes("%"))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"}}]}];export{SettingUIV2};

package/dist/esm/article/components/ArticleAuthor.liquid.js

@@ -1,4 +1,4 @@
 'use client';
 import{template as t}from"@gem-sdk/core";import e from"../../text/components/Text.liquid.js";let ArticleAuthor=({setting:r,styles:i,advanced:l,builderProps:o})=>{let{prefix:d}=r??{};return t`
-    ${e({styles:i,setting:{...r,text:`${d} {{ article.author }}`,excludeFlex:!0},advanced:l,builderAttrs:{"data-id":o?.uid}})}
+    ${e({styles:i,setting:{...r,text:`${d} {{ article.author }}`,excludeFlex:!0,isForceValue:!0},advanced:l,builderAttrs:{"data-id":o?.uid}})}
   `};export{ArticleAuthor as default};

package/dist/esm/article/components/ArticleContent.js

@@ -1,5 +1,5 @@
 'use client';
-import{jsx as t,jsxs as e,Fragment as p}from"react/jsx-runtime";import{useArticleStore as i,useCurrentDevice as o,useShopStore as r,getResponsiveValueByScreen as n,composeTypographyClassName as c,composeTypographyStyle as a,isSafari as l,cls as s,getGlobalColorStateStyle as d,makeStyleResponsive as m,getStyleShadow as y,makeStyle as h}from"@gem-sdk/core";import{useState as g,useRef as x,useEffect as f}from"react";import u from"../../common/components/NoDataState.js";import{styleOverride as w}from"../common/helpers.js";let ArticleContent=({styles:v,builderProps:A})=>{let S=i(t=>t.article),[b,C]=g(!1),k=x(null),$=o(),_=r(t=>t.storefrontUrl),j=n(v?.hasLineClamp,$),I=n(v?.lineClamp,$),L=()=>{if(!_)return;let t=new URL(_);window.open(`${t.protocol}//${t.host}/admin/content/articles`)};f(()=>{C(!1)},[j,I,S?.description]);let N=c(v?.typo,v?.typography),T=a(v?.typo,v?.typography),D=`
+import{jsx as t,jsxs as e,Fragment as p}from"react/jsx-runtime";import{useArticleStore as i,useCurrentDevice as o,useShopStore as r,useI18nStore as n,getResponsiveValueByScreen as c,composeTypographyClassName as a,composeTypographyStyle as l,isSafari as s,cls as d,getGlobalColorStateStyle as m,makeStyleResponsive as y,getStyleShadow as h,makeStyle as g}from"@gem-sdk/core";import{useState as x,useRef as f,useEffect as u}from"react";import w from"../../common/components/NoDataState.js";import{styleOverride as v}from"../common/helpers.js";let ArticleContent=({styles:A,builderProps:S})=>{let b=i(t=>t.article),[C,k]=x(!1),$=f(null),_=o(),j=r(t=>t.storefrontUrl),{t:I}=n(),L=c(A?.hasLineClamp,_),N=c(A?.lineClamp,_),T=()=>{if(!j)return;let t=new URL(j);window.open(`${t.protocol}//${t.host}/admin/content/articles`)};u(()=>{k(!1)},[L,N,b?.description]);let D=a(A?.typo,A?.typography),U=l(A?.typo,A?.typography),E=`
     .gp-p-description-text a:empty,
     .gp-p-description-text ul:empty,
     .gp-p-description-text dl:empty,
@@ -15,5 +15,5 @@ import{jsx as t,jsxs as e,Fragment as p}from"react/jsx-runtime";import{useArticl
     .gp-p-description-text h6:empty {
         display: none;
     }
-   ${w}
-  `;return t("div",{"data-id":A?.uid,id:`shopify-text-element-${A?.uid}`,className:"gp-article-description","data-article-id":S?.baseID?.replace("gid://shopify/OnlineStoreArticle/",""),children:S?.content?.html?e(p,{children:[!l()&&t("style",{children:D}),t("div",{ref:k,className:s("gp-p-description-text gp-content-text-override gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre",N),style:{...d("c",v?.color),...m("ta",v?.textAlign),...j&&!b?m("line-clamp",v?.lineClamp):{},...y({value:v?.typo?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:v?.typo?.custom?.hasShadowText}),...h({tt:v?.transform}),...T},dangerouslySetInnerHTML:{__html:S?.content?.html}})]}):t("div",{children:t(u,{elementType:"secondary",description:"Inform and provide value to the audience with article content.",descriptionActions:[{text:"Add article content",callback:L},{text:"sync data",callback:"syncArticle"}]})})})};export{ArticleContent as default};
+   ${v}
+  `;return t("div",{"data-id":S?.uid,id:`shopify-text-element-${S?.uid}`,className:"gp-article-description","data-article-id":b?.baseID?.replace("gid://shopify/OnlineStoreArticle/",""),children:b?.content?.html?e(p,{children:[!s()&&t("style",{children:E}),t("div",{ref:$,className:d("gp-p-description-text gp-content-text-override gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre",D),style:{...m("c",A?.color),...y("ta",A?.textAlign),...L&&!C?y("line-clamp",A?.lineClamp):{},...h({value:A?.typo?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:A?.typo?.custom?.hasShadowText}),...g({tt:A?.transform}),...U},dangerouslySetInnerHTML:{__html:b?.content?.html}})]}):t("div",{children:t(w,{elementType:"secondary",description:I("Inform and provide value to the audience with article content."),descriptionActions:[{text:I("Add article content"),callback:T},{text:I("sync data"),callback:"syncArticle"}]})})})};export{ArticleContent as default};

package/dist/esm/article/components/ArticleDate.liquid.js

@@ -1,4 +1,4 @@
 'use client';
-import{template as e}from"@gem-sdk/core";import t from"../../text/components/Text.liquid.js";let FORMAT_MAP={'{"locales":"en-US","options":{"month":"short","day":"2-digit","year":"numeric"}}':"%b %d, %Y",'{"locales":"en-US","options":{"month":"long","day":"2-digit","year":"numeric"}}':"%B %d, %Y",'{"locales":"en-GB","options":{"month":"long","day":"2-digit","year":"numeric"}}':"%d %B %Y",'{"locales":"en-GB","options":{"month":"2-digit","day":"2-digit","year":"numeric"}}':"%d/%m/%Y",'{"locales":"en-US","options":{"month":"2-digit","day":"2-digit","year":"numeric"}}':"%m/%d/%Y",'{"locales":"ja-JP","options":{"month":"2-digit","day":"2-digit","year":"numeric"}}':"%Y/%m/%d"},ArticleDate=({setting:i,styles:o,advanced:d,builderProps:n})=>{let{dateFormat:a}=i??{};return e`
-    ${t({styles:o,setting:{...i,text:`{{ article.published_at | date: '${FORMAT_MAP[a??'{"locales":"en-US","options":{"month":"short","day":"2-digit","year":"numeric"}}']}' }}`,excludeFlex:!0},advanced:d,builderAttrs:{"data-id":n?.uid}})}
+import{template as e}from"@gem-sdk/core";import t from"../../text/components/Text.liquid.js";let FORMAT_MAP={'{"locales":"en-US","options":{"month":"short","day":"2-digit","year":"numeric"}}':"%b %d, %Y",'{"locales":"en-US","options":{"month":"long","day":"2-digit","year":"numeric"}}':"%B %d, %Y",'{"locales":"en-GB","options":{"month":"long","day":"2-digit","year":"numeric"}}':"%d %B %Y",'{"locales":"en-GB","options":{"month":"2-digit","day":"2-digit","year":"numeric"}}':"%d/%m/%Y",'{"locales":"en-US","options":{"month":"2-digit","day":"2-digit","year":"numeric"}}':"%m/%d/%Y",'{"locales":"ja-JP","options":{"month":"2-digit","day":"2-digit","year":"numeric"}}':"%Y/%m/%d"},ArticleDate=({setting:i,styles:o,advanced:d,builderProps:a})=>{let{dateFormat:n}=i??{};return e`
+    ${t({styles:o,setting:{...i,text:`{{ article.published_at | date: '${FORMAT_MAP[n??'{"locales":"en-US","options":{"month":"short","day":"2-digit","year":"numeric"}}']}' }}`,excludeFlex:!0,isForceValue:!0},advanced:d,builderAttrs:{"data-id":a?.uid}})}
   `};export{ArticleDate as default};

package/dist/esm/article/components/ArticleExcerpt.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e}from"react/jsx-runtime";import t from"next/link";import r from"../../text/components/Text.js";import{useArticleStore as i,useShopStore as o}from"@gem-sdk/core";import{useMemo as l}from"react";import{useArticleLink as c}from"../hooks/useArticleLink.js";import n from"../../common/components/NoDataState.js";let ArticleExcerpt=({setting:s,styles:a,builderProps:m})=>{let p=i(e=>e.article),d=o(e=>e.storefrontUrl),x=l(()=>p?.content?.excerptHtml,[p]),{shopifyArticleLink:f}=c(),u=()=>{if(!d)return;let e=new URL(d);window.open(`${e.protocol}//${e.host}/admin/content/articles`)};return e("div",{id:`shopify-text-element-${m?.uid}`,"data-article-id":p?.baseID?.replace("gid://shopify/OnlineStoreArticle/",""),children:p&&x?s?.linkArticle?e(t,{href:f,title:p?.title,children:e(r,{builderProps:m,styles:a,setting:{...s,text:x,excludeFlex:!0}})}):e(r,{builderProps:m,styles:a,setting:{...s,text:x,excludeFlex:!0}}):e(n,{elementType:"secondary",description:"Provide a brief summary or teaser of the article. ",descriptionActions:[{text:"Add article excerpt",callback:u},{text:"sync data",callback:"syncArticle"}]})})};export{ArticleExcerpt as default};
+import{jsx as e}from"react/jsx-runtime";import t from"next/link";import r from"../../text/components/Text.js";import{useArticleStore as i,useShopStore as o,useI18nStore as l}from"@gem-sdk/core";import{useMemo as c}from"react";import{useArticleLink as n}from"../hooks/useArticleLink.js";import s from"../../common/components/NoDataState.js";let ArticleExcerpt=({setting:a,styles:m,builderProps:p})=>{let d=i(e=>e.article),x=o(e=>e.storefrontUrl),f=c(()=>d?.content?.excerptHtml,[d]),{shopifyArticleLink:u}=n(),{t:y}=l(),h=()=>{if(!x)return;let e=new URL(x);window.open(`${e.protocol}//${e.host}/admin/content/articles`)};return e("div",{id:`shopify-text-element-${p?.uid}`,"data-article-id":d?.baseID?.replace("gid://shopify/OnlineStoreArticle/",""),children:d&&f?a?.linkArticle?e(t,{href:u,title:d?.title,children:e(r,{builderProps:p,styles:m,setting:{...a,text:f,excludeFlex:!0}})}):e(r,{builderProps:p,styles:m,setting:{...a,text:f,excludeFlex:!0}}):e(s,{elementType:"secondary",description:y("Provide a brief summary or teaser of the article. "),descriptionActions:[{text:y("Add article excerpt"),callback:h},{text:y("sync data"),callback:"syncArticle"}]})})};export{ArticleExcerpt as default};

package/dist/esm/article/components/ArticleExcerpt.liquid.js

@@ -1,4 +1,4 @@
 'use client';
-import{template as e}from"@gem-sdk/core";import t from"../../text/components/Text.liquid.js";let ArticleExcerpt=({setting:r,styles:i,advanced:c,builderProps:d})=>e`
-    ${t({styles:i,setting:{...r,text:"{{article.excerpt}}",excludeFlex:!0},advanced:c,builderAttrs:{"data-id":d?.uid}})}
+import{template as e}from"@gem-sdk/core";import t from"../../text/components/Text.liquid.js";let ArticleExcerpt=({setting:r,styles:i,advanced:c,builderProps:l})=>e`
+    ${t({styles:i,setting:{...r,text:"{{article.excerpt}}",excludeFlex:!0,isForceValue:!0},advanced:c,builderAttrs:{"data-id":l?.uid}})}
   `;export{ArticleExcerpt as default};

package/dist/esm/article/components/ArticleNotFound.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{usePageType as r,useShopStore as o,filterToolbarPreview as i}from"@gem-sdk/core";import{useMemo as n}from"react";let ArticleNotFound=({blogHandle:l,articlePickType:d,builderAttrs:p,children:a})=>{let c="STATIC"===r(),s=o(e=>e.storefrontToken),g=o(e=>e.storefrontUrl),m="latest"===d,h=n(()=>c&&!s?"We can not get your articles from Shopify":m?l?"Have you add articles to this blog? We couldn’t find any.":"Have you create blog in your store? We couldn’t find any.":"Have you added articles to your store? We couldn’t find any.",[c,s,m,l]),u=n(()=>m?l?"Add articles to blog":"Add blog to Shopify":"Add articles to Shopify",[m,l]),f=n(()=>{if(!g)return;let e=new URL(g);return m?`${e.protocol}//${e.host}/admin/blogs`:`${e.protocol}//${e.host}/admin/articles`},[m,g]);return e("div",{...p,className:"gp-relative gp-flex gp-h-[98px] gp-flex-col gp-items-center gp-justify-center gp-rounded gp-border-dotted gp-border-[#676767] gp-border",children:[e("div",{className:"gp-flex gp-items-center gp-justify-center",children:[t("span",{className:"gp-mr-2",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 21 21",fill:"none",children:[t("g",{clipPath:"url(#clip0_9546_221079)",children:t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.5728 3.86863C11.0976 3.04379 9.90241 3.04379 9.4272 3.86863L1.91575 16.9064C1.44289 17.7271 2.0381 18.75 2.98855 18.75H18.0114C18.9619 18.75 19.5571 17.7271 19.0842 16.9064L11.5728 3.86863ZM10.5 6.43064C10.8452 6.43064 11.125 6.7092 11.125 7.05282V12.6524C11.125 12.996 10.8452 13.2746 10.5 13.2746C10.1548 13.2746 9.875 12.996 9.875 12.6524V7.05282C9.875 6.7092 10.1548 6.43064 10.5 6.43064ZM10.5 14.7678C9.94771 14.7678 9.5 15.2135 9.5 15.7633C9.5 16.3131 9.94771 16.7588 10.5 16.7588C11.0523 16.7588 11.5 16.3131 11.5 15.7633C11.5 15.2135 11.0523 14.7678 10.5 14.7678Z",fill:"#494949"})}),t("defs",{children:t("clipPath",{id:"clip0_9546_221079",children:t("rect",{width:"20",height:"21",fill:"white",transform:"translate(0.5)"})})})]})}),t("span",{className:"gp-text-sm gp-font-normal gp-text-[#212121]",children:h})]}),c?t("div",{children:s?t("div",{onClick:()=>{f&&window.open(f,"_blank")},"aria-hidden":"true",className:"gp-cursor-pointer gp-text-sm gp-font-medium gp-text-[#3C67FF] gp-no-underline",children:u}):t("div",{onClick:()=>{window.parent.postMessage("toggleImportProductModal")},"aria-hidden":"true",className:"gp-cursor-pointer gp-text-sm gp-font-medium gp-text-[#3C67FF] gp-no-underline",children:"Import from Shopify"})}):e("div",{className:"gp-text-sm gp-font-normal gp-text-[#212121]",children:[t("span",{"aria-hidden":!0,onClick:()=>{f&&window.open(f,"_blank")},className:"gp-cursor-pointer gp-font-medium gp-text-[#3C67FF] hover:gp-underline",children:u})," ","or pick another ",m?"blog":"article"]}),i(a,!0)]})};export{ArticleNotFound as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{usePageType as r,useShopStore as o,useI18nStore as i,filterToolbarPreview as n}from"@gem-sdk/core";import{useMemo as l}from"react";let ArticleNotFound=({blogHandle:d,articlePickType:p,builderAttrs:a,children:c})=>{let s="STATIC"===r(),g=o(e=>e.storefrontToken),m=o(e=>e.storefrontUrl),h="latest"===p,{t:u}=i(),f=l(()=>s&&!g?u("We can not get your articles from Shopify"):h?d?u("Have you add articles to this blog? We couldn’t find any."):u("Have you create blog in your store? We couldn’t find any."):u("Have you added articles to your store? We couldn’t find any."),[s,g,h,d]),C=l(()=>h?d?u("Add articles to blog"):u("Add blog to Shopify"):u("Add articles to Shopify"),[h,d]),x=l(()=>{if(!m)return;let e=new URL(m);return h?`${e.protocol}//${e.host}/admin/blogs`:`${e.protocol}//${e.host}/admin/articles`},[h,m]);return e("div",{...a,className:"gp-relative gp-flex gp-h-[98px] gp-flex-col gp-items-center gp-justify-center gp-rounded gp-border-dotted gp-border-[#676767] gp-border",children:[e("div",{className:"gp-flex gp-items-center gp-justify-center",children:[t("span",{className:"gp-mr-2",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 21 21",fill:"none",children:[t("g",{clipPath:"url(#clip0_9546_221079)",children:t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.5728 3.86863C11.0976 3.04379 9.90241 3.04379 9.4272 3.86863L1.91575 16.9064C1.44289 17.7271 2.0381 18.75 2.98855 18.75H18.0114C18.9619 18.75 19.5571 17.7271 19.0842 16.9064L11.5728 3.86863ZM10.5 6.43064C10.8452 6.43064 11.125 6.7092 11.125 7.05282V12.6524C11.125 12.996 10.8452 13.2746 10.5 13.2746C10.1548 13.2746 9.875 12.996 9.875 12.6524V7.05282C9.875 6.7092 10.1548 6.43064 10.5 6.43064ZM10.5 14.7678C9.94771 14.7678 9.5 15.2135 9.5 15.7633C9.5 16.3131 9.94771 16.7588 10.5 16.7588C11.0523 16.7588 11.5 16.3131 11.5 15.7633C11.5 15.2135 11.0523 14.7678 10.5 14.7678Z",fill:"#494949"})}),t("defs",{children:t("clipPath",{id:"clip0_9546_221079",children:t("rect",{width:"20",height:"21",fill:"white",transform:"translate(0.5)"})})})]})}),t("span",{className:"gp-text-sm gp-font-normal gp-text-[#212121]",children:f})]}),s?t("div",{children:g?t("div",{onClick:()=>{x&&window.open(x,"_blank")},"aria-hidden":"true",className:"gp-cursor-pointer gp-text-sm gp-font-medium gp-text-[#3C67FF] gp-no-underline",children:C}):t("div",{onClick:()=>{window.parent.postMessage("toggleImportProductModal")},"aria-hidden":"true",className:"gp-cursor-pointer gp-text-sm gp-font-medium gp-text-[#3C67FF] gp-no-underline",children:u("Import from Shopify")})}):e("div",{className:"gp-text-sm gp-font-normal gp-text-[#212121]",children:[t("span",{"aria-hidden":!0,onClick:()=>{x&&window.open(x,"_blank")},className:"gp-cursor-pointer gp-font-medium gp-text-[#3C67FF] hover:gp-underline",children:C})," ",h?u("or pick another blog"):u("or pick another article")]}),n(c,!0)]})};export{ArticleNotFound as default};

package/dist/esm/article/components/ArticleReadMore.liquid.js

@@ -1,6 +1,6 @@
 'use client';
-import{template as t,RenderIf as e}from"@gem-sdk/core";import o from"../../text/components/Text.liquid.js";import l from"../../button/components/Button.liquid.js";let ArticleReadMore=({setting:r,styles:n,builderAttrs:a,builderProps:i,advanced:s,style:p})=>{let{readMoreType:u,label:c}=r??{},{typoBtn:g,typoText:d,globalSizeText:m,globalSizeBtn:x,textColorTextState:b,alignBtn:f,alignText:y,enableHoverEffectText:v}=n??{};return t`
-    ${e("text"===u,o({builderAttrs:a,builderProps:i,advanced:s,styles:{...n,color:b,typo:d,spacing:"0px",align:y,textColor:void 0,enableHoverEffect:v},style:p??{},setting:{...r,text:c,globalSize:m,excludeFlex:!0,translate:void 0}}))}
-    ${e("text"!==u,t`<a href="{{article.url}}" target="_blank" class="gp-cursor-auto gp-pointer-events-none [&_button]:gp-pointer-events-auto">
-      ${l({builderAttrs:a,builderProps:i,advanced:s,styles:{...n,typo:g,globalSize:x,align:f},style:p??{},setting:{...r,label:c,htmlType:"button",translate:void 0}})}</a>`)}
+import{template as t,RenderIf as e}from"@gem-sdk/core";import o from"../../text/components/Text.liquid.js";import l from"../../button/components/Button.liquid.js";import{ArticleReadMore as r}from"../settings/configs/translate.js";let ArticleReadMore=({setting:a,styles:n,builderAttrs:i,builderProps:s,advanced:p,style:g})=>{let{readMoreType:c,label:u}=a??{},{typoBtn:m,typoText:d,globalSizeText:b,globalSizeBtn:x,textColorTextState:f,alignBtn:y,alignText:v,enableHoverEffectText:S}=n??{};return t`
+    ${e("text"===c,o({builderAttrs:i,builderProps:s,advanced:p,styles:{...n,color:f,typo:d,spacing:"0px",align:v,textColor:void 0,enableHoverEffect:S},style:g??{},setting:{...a,text:u,globalSize:b,excludeFlex:!0},translateSetting:r?.label?.id}))}
+    ${e("text"!==c,t`<a href="{{article.url}}" target="_blank" class="gp-cursor-auto gp-pointer-events-none [&_button]:gp-pointer-events-auto">
+      ${l({builderAttrs:i,builderProps:s,advanced:p,styles:{...n,typo:m,globalSize:x,align:y},style:g??{},setting:{...a,label:u,htmlType:"button"},translateSetting:r?.label?.id})}</a>`)}
   `};export{ArticleReadMore as default};

package/dist/esm/article/components/ArticleTag.liquid.js

@@ -1,5 +1,5 @@
 'use client';
 import{template as t}from"@gem-sdk/core";import e from"../../text/components/Text.liquid.js";let ArticleTag=({setting:i,styles:r,advanced:s,builderProps:a})=>t`
     {%- assign tag_string = article.tags | join: ', ' -%}
-    ${e({styles:r,setting:{...i,text:"{{tag_string}}",excludeFlex:!0},advanced:s,builderAttrs:{"data-id":a?.uid}})}
+    ${e({styles:r,setting:{...i,text:"{{tag_string}}",excludeFlex:!0,isForceValue:!0},advanced:s,builderAttrs:{"data-id":a?.uid}})}
   `;export{ArticleTag as default};

package/dist/esm/article/components/ArticleTitle.liquid.js

@@ -2,7 +2,7 @@
 import{template as e}from"@gem-sdk/core";import t from"../../text/components/Text.liquid.js";import{getLinkArticle as l}from"../../helpers.js";import{If as i}from"@gem-sdk/system";let ArticleTitle=({setting:r,styles:a,advanced:s,builderProps:d})=>{let o=r?.openNewTab?"_blank":"_self";return e`
     ${i(r?.enableLink,e`
           <a href="${l(r?.linkArticle,r?.customURL)}" target="${o}" title="{{article.title}}">
-          ${t({styles:a,setting:{...r,text:"{{article.title}}",excludeFlex:!0},advanced:s,builderAttrs:{"data-id":d?.uid}})}
+          ${t({styles:a,setting:{...r,text:"{{article.title}}",excludeFlex:!0,isForceValue:!0},advanced:s,builderAttrs:{"data-id":d?.uid}})}
           </a>
-        `,e`${t({styles:a,setting:{...r,text:"{{article.title}}",excludeFlex:!0},advanced:s,builderAttrs:{"data-id":d?.uid}})}`)}
+        `,e`${t({styles:a,setting:{...r,text:"{{article.title}}",excludeFlex:!0,isForceValue:!0},advanced:s,builderAttrs:{"data-id":d?.uid}})}`)}
   `};export{ArticleTitle as default};