@cntrl-site/components 1.0.12-alpha.13 → 1.0.12-alpha.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,14 +1,14 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),Ie=require("classnames"),E=require("./readTestimonialTextMeasure-CB_Uq-fO.js"),In=require("react-dom");function sa(e){return e.type==="object"&&e.version===1}const la="ControlSlider-module__wrapper___sHEkd",ca="ControlSlider-module__hoverArrow___A-dOH",da="ControlSlider-module__sliderItem___QQSkR",ua="ControlSlider-module__sliderImage___9hRl-",pa="ControlSlider-module__arrow___05ghY",ma="ControlSlider-module__arrowVertical___tBfVN",ga="ControlSlider-module__nextArrow___-30Yc",ha="ControlSlider-module__arrowInner___aEra3",fa="ControlSlider-module__arrowIcon___S4ztF",ya="ControlSlider-module__arrowImg___2dwJW",va="ControlSlider-module__mirror___brd6U",ba="ControlSlider-module__pagination___bicLF",xa="ControlSlider-module__paginationInner___bT-P-",Ca="ControlSlider-module__paginationVertical___zYqKw",Sa="ControlSlider-module__paginationItem___nTRbk",wa="ControlSlider-module__dot___p1Qun",$a="ControlSlider-module__activeDot___LHFaj",Ta="ControlSlider-module__paginationInsideBottom___R3FWn",La="ControlSlider-module__paginationInsideTop___V-qb-",Ea="ControlSlider-module__paginationOutsideBottom___14w8D",Ia="ControlSlider-module__paginationOutsideTop___SCLqB",Pa="ControlSlider-module__paginationInsideLeft___yOBRZ",Ra="ControlSlider-module__paginationInsideRight___Rtt3o",Aa="ControlSlider-module__paginationOutsideLeft___lahaw",Ma="ControlSlider-module__paginationOutsideRight___EtuQa",_a="ControlSlider-module__imgWrapper___UjEgB",Wa="ControlSlider-module__captionBlock___dJ6-j",ka="ControlSlider-module__captionTextWrapper___HFlpf",Fa="ControlSlider-module__captionText___uGBVc",Na="ControlSlider-module__active___WZK4G",Ha="ControlSlider-module__withPointerEvents___t-18M",Ba="ControlSlider-module__topLeftAlignment___zjnGM",Oa="ControlSlider-module__topCenterAlignment___gD1xW",ja="ControlSlider-module__topRightAlignment___NMapS",Da="ControlSlider-module__middleLeftAlignment___OnUrY",Va="ControlSlider-module__middleCenterAlignment___Tdkl0",za="ControlSlider-module__middleRightAlignment___wEbfX",Ka="ControlSlider-module__bottomLeftAlignment___cTP2-",Ga="ControlSlider-module__bottomCenterAlignment___c54fB",qa="ControlSlider-module__bottomRightAlignment___kEwrz",Ua="ControlSlider-module__clickOverlay___DZA28",Xa="ControlSlider-module__contain___pLyq7",Ya="ControlSlider-module__cover___KdDat",de={wrapper:la,hoverArrow:ca,sliderItem:da,sliderImage:ua,arrow:pa,arrowVertical:ma,nextArrow:ga,arrowInner:ha,arrowIcon:fa,arrowImg:ya,mirror:va,pagination:ba,paginationInner:xa,paginationVertical:Ca,paginationItem:Sa,dot:wa,activeDot:$a,paginationInsideBottom:Ta,paginationInsideTop:La,paginationOutsideBottom:Ea,paginationOutsideTop:Ia,paginationInsideLeft:Pa,paginationInsideRight:Ra,paginationOutsideLeft:Aa,paginationOutsideRight:Ma,imgWrapper:_a,captionBlock:Wa,captionTextWrapper:ka,captionText:Fa,active:Na,withPointerEvents:Ha,topLeftAlignment:Ba,topCenterAlignment:Oa,topRightAlignment:ja,middleLeftAlignment:Da,middleCenterAlignment:Va,middleRightAlignment:za,bottomLeftAlignment:Ka,bottomCenterAlignment:Ga,bottomRightAlignment:qa,clickOverlay:Ua,contain:Xa,cover:Ya};function Ja(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function Za(e,t,n){return t&&Ja(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}var bo="(prefers-reduced-motion: reduce)",en=1,Qa=2,on=3,un=4,Pn=5,Xn=6,ni=7,es={CREATED:en,MOUNTED:Qa,IDLE:on,MOVING:un,SCROLLING:Pn,DRAGGING:Xn,DESTROYED:ni};function Et(e){e.length=0}function Ft(e,t,n){return Array.prototype.slice.call(e,t,n)}function He(e){return e.bind.apply(e,[null].concat(Ft(arguments,1)))}var cr=setTimeout,Mi=function(){};function xo(e){return requestAnimationFrame(e)}function li(e,t){return typeof t===e}function vn(e){return!zi(e)&&li("object",e)}var Vi=Array.isArray,dr=He(li,"function"),_t=He(li,"string"),Rn=He(li,"undefined");function zi(e){return e===null}function ur(e){try{return e instanceof(e.ownerDocument.defaultView||window).HTMLElement}catch{return!1}}function An(e){return Vi(e)?e:[e]}function ct(e,t){An(e).forEach(t)}function Ki(e,t){return e.indexOf(t)>-1}function Yn(e,t){return e.push.apply(e,An(t)),e}function wt(e,t,n){e&&ct(t,function(i){i&&e.classList[n?"add":"remove"](i)})}function vt(e,t){wt(e,_t(t)?t.split(" "):t,!0)}function Mn(e,t){ct(t,e.appendChild.bind(e))}function Gi(e,t){ct(e,function(n){var i=(t||n).parentNode;i&&i.insertBefore(n,t)})}function bn(e,t){return ur(e)&&(e.msMatchesSelector||e.matches).call(e,t)}function pr(e,t){var n=e?Ft(e.children):[];return t?n.filter(function(i){return bn(i,t)}):n}function _n(e,t){return t?pr(e,t)[0]:e.firstElementChild}var xn=Object.keys;function Kt(e,t,n){return e&&(n?xn(e).reverse():xn(e)).forEach(function(i){i!=="__proto__"&&t(e[i],i)}),e}function Cn(e){return Ft(arguments,1).forEach(function(t){Kt(t,function(n,i){e[i]=t[i]})}),e}function Mt(e){return Ft(arguments,1).forEach(function(t){Kt(t,function(n,i){Vi(n)?e[i]=n.slice():vn(n)?e[i]=Mt({},vn(e[i])?e[i]:{},n):e[i]=n})}),e}function Co(e,t){ct(t||xn(e),function(n){delete e[n]})}function bt(e,t){ct(e,function(n){ct(t,function(i){n&&n.removeAttribute(i)})})}function Se(e,t,n){vn(t)?Kt(t,function(i,a){Se(e,a,i)}):ct(e,function(i){zi(n)||n===""?bt(i,t):i.setAttribute(t,String(n))})}function tn(e,t,n){var i=document.createElement(e);return t&&(_t(t)?vt(i,t):Se(i,t)),n&&Mn(n,i),i}function dt(e,t,n){if(Rn(n))return getComputedStyle(e)[t];zi(n)||(e.style[t]=""+n)}function Sn(e,t){dt(e,"display",t)}function mr(e){e.setActive&&e.setActive()||e.focus({preventScroll:!0})}function ut(e,t){return e.getAttribute(t)}function So(e,t){return e&&e.classList.contains(t)}function at(e){return e.getBoundingClientRect()}function Gt(e){ct(e,function(t){t&&t.parentNode&&t.parentNode.removeChild(t)})}function gr(e){return _n(new DOMParser().parseFromString(e,"text/html").body)}function St(e,t){e.preventDefault(),t&&(e.stopPropagation(),e.stopImmediatePropagation())}function hr(e,t){return e&&e.querySelector(t)}function qi(e,t){return t?Ft(e.querySelectorAll(t)):[]}function $t(e,t){wt(e,t,!1)}function _i(e){return e.timeStamp}function jt(e){return _t(e)?e:e?e+"px":""}var Wn="splide",Ui="data-"+Wn;function fn(e,t){if(!e)throw new Error("["+Wn+"] "+(t||""))}var Wt=Math.min,ii=Math.max,oi=Math.floor,wn=Math.ceil,it=Math.abs;function fr(e,t,n){return it(e-t)<n}function Jn(e,t,n,i){var a=Wt(t,n),s=ii(t,n);return i?a<e&&e<s:a<=e&&e<=s}function Jt(e,t,n){var i=Wt(t,n),a=ii(t,n);return Wt(ii(i,e),a)}function Wi(e){return+(e>0)-+(e<0)}function ki(e,t){return ct(t,function(n){e=e.replace("%s",""+n)}),e}function Xi(e){return e<10?"0"+e:""+e}var wo={};function ts(e){return""+e+Xi(wo[e]=(wo[e]||0)+1)}function yr(){var e=[];function t(o,d,l,u){a(o,d,function(p,I,b){var w="addEventListener"in p,f=w?p.removeEventListener.bind(p,I,l,u):p.removeListener.bind(p,l);w?p.addEventListener(I,l,u):p.addListener(l),e.push([p,I,b,l,f])})}function n(o,d,l){a(o,d,function(u,p,I){e=e.filter(function(b){return b[0]===u&&b[1]===p&&b[2]===I&&(!l||b[3]===l)?(b[4](),!1):!0})})}function i(o,d,l){var u,p=!0;return typeof CustomEvent=="function"?u=new CustomEvent(d,{bubbles:p,detail:l}):(u=document.createEvent("CustomEvent"),u.initCustomEvent(d,p,!1,l)),o.dispatchEvent(u),u}function a(o,d,l){ct(o,function(u){u&&ct(d,function(p){p.split(" ").forEach(function(I){var b=I.split(".");l(u,b[0],b[1])})})})}function s(){e.forEach(function(o){o[4]()}),Et(e)}return{bind:t,unbind:n,dispatch:i,destroy:s}}var Nt="mounted",Fi="ready",It="move",pn="moved",Yi="click",vr="active",br="inactive",xr="visible",Cr="hidden",Ke="refresh",tt="updated",rn="resize",ci="resized",Sr="drag",wr="dragging",$r="dragged",di="scroll",Ut="scrolled",ns="overflow",Ji="destroy",Tr="arrows:mounted",Lr="arrows:updated",Er="pagination:mounted",Ir="pagination:updated",Zi="navigation:mounted",Qi="autoplay:play",Pr="autoplay:playing",eo="autoplay:pause",to="lazyload:loaded",Rr="sk",Ar="sh",ri="ei";function De(e){var t=e?e.event.bus:document.createDocumentFragment(),n=yr();function i(s,o){n.bind(t,An(s).join(" "),function(d){o.apply(o,Vi(d.detail)?d.detail:[])})}function a(s){n.dispatch(t,s,Ft(arguments,1))}return e&&e.event.on(Ji,n.destroy),Cn(n,{bus:t,on:i,off:He(n.unbind,t),emit:a})}function ui(e,t,n,i){var a=Date.now,s,o=0,d,l=!0,u=0;function p(){if(!l){if(o=e?Wt((a()-s)/e,1):1,n&&n(o),o>=1&&(t(),s=a(),i&&++u>=i))return b();d=xo(p)}}function I(L){L||f(),s=a()-(L?o*e:0),l=!1,d=xo(p)}function b(){l=!0}function w(){s=a(),o=0,n&&n(o)}function f(){d&&cancelAnimationFrame(d),o=0,d=0,l=!0}function h(L){e=L}function T(){return l}return{start:I,rewind:w,pause:b,cancel:f,set:h,isPaused:T}}function is(e){var t=e;function n(a){t=a}function i(a){return Ki(An(a),t)}return{set:n,is:i}}function os(e,t){var n=ui(0,e,null,1);return function(){n.isPaused()&&n.start()}}function rs(e,t,n){var i=e.state,a=n.breakpoints||{},s=n.reducedMotion||{},o=yr(),d=[];function l(){var f=n.mediaQuery==="min";xn(a).sort(function(h,T){return f?+h-+T:+T-+h}).forEach(function(h){p(a[h],"("+(f?"min":"max")+"-width:"+h+"px)")}),p(s,bo),I()}function u(f){f&&o.destroy()}function p(f,h){var T=matchMedia(h);o.bind(T,"change",I),d.push([f,T])}function I(){var f=i.is(ni),h=n.direction,T=d.reduce(function(L,C){return Mt(L,C[1].matches?C[0]:{})},{});Co(n),w(T),n.destroy?e.destroy(n.destroy==="completely"):f?(u(!0),e.mount()):h!==n.direction&&e.refresh()}function b(f){matchMedia(bo).matches&&(f?Mt(n,s):Co(n,xn(s)))}function w(f,h,T){Mt(n,f),h&&Mt(Object.getPrototypeOf(n),f),(T||!i.is(en))&&e.emit(tt,n)}return{setup:l,destroy:u,reduce:b,set:w}}var pi="Arrow",mi=pi+"Left",gi=pi+"Right",Mr=pi+"Up",_r=pi+"Down",$o="rtl",hi="ttb",xi={width:["height"],left:["top","right"],right:["bottom","left"],x:["y"],X:["Y"],Y:["X"],ArrowLeft:[Mr,gi],ArrowRight:[_r,mi]};function as(e,t,n){function i(s,o,d){d=d||n.direction;var l=d===$o&&!o?1:d===hi?0:-1;return xi[s]&&xi[s][l]||s.replace(/width|left|right/i,function(u,p){var I=xi[u.toLowerCase()][l]||u;return p>0?I.charAt(0).toUpperCase()+I.slice(1):I})}function a(s){return s*(n.direction===$o?1:-1)}return{resolve:i,orient:a}}var Tt="role",nn="tabindex",ss="disabled",pt="aria-",kn=pt+"controls",Wr=pt+"current",To=pt+"selected",st=pt+"label",no=pt+"labelledby",kr=pt+"hidden",io=pt+"orientation",$n=pt+"roledescription",Lo=pt+"live",Eo=pt+"busy",Io=pt+"atomic",oo=[Tt,nn,ss,kn,Wr,st,no,kr,io,$n],xt=Wn+"__",Ht="is-",Ci=Wn,Po=xt+"track",ls=xt+"list",fi=xt+"slide",Fr=fi+"--clone",cs=fi+"__container",ro=xt+"arrows",yi=xt+"arrow",Nr=yi+"--prev",Hr=yi+"--next",vi=xt+"pagination",Br=vi+"__page",ds=xt+"progress",us=ds+"__bar",ps=xt+"toggle",ms=xt+"spinner",gs=xt+"sr",hs=Ht+"initialized",qt=Ht+"active",Or=Ht+"prev",jr=Ht+"next",Ni=Ht+"visible",Hi=Ht+"loading",Dr=Ht+"focus-in",Vr=Ht+"overflow",fs=[qt,Ni,Or,jr,Hi,Dr,Vr],ys={slide:fi,clone:Fr,arrows:ro,arrow:yi,prev:Nr,next:Hr,pagination:vi,page:Br,spinner:ms};function vs(e,t){if(dr(e.closest))return e.closest(t);for(var n=e;n&&n.nodeType===1&&!bn(n,t);)n=n.parentElement;return n}var bs=5,Ro=200,zr="touchstart mousedown",Si="touchmove mousemove",wi="touchend touchcancel mouseup click";function xs(e,t,n){var i=De(e),a=i.on,s=i.bind,o=e.root,d=n.i18n,l={},u=[],p=[],I=[],b,w,f;function h(){m(),z(),C()}function T(){a(Ke,L),a(Ke,h),a(tt,C),s(document,zr+" keydown",function(x){f=x.type==="keydown"},{capture:!0}),s(o,"focusin",function(){wt(o,Dr,!!f)})}function L(x){var A=oo.concat("style");Et(u),$t(o,p),$t(b,I),bt([b,w],A),bt(o,x?A:["style",$n])}function C(){$t(o,p),$t(b,I),p=R(Ci),I=R(Po),vt(o,p),vt(b,I),Se(o,st,n.label),Se(o,no,n.labelledby)}function m(){b=j("."+Po),w=_n(b,"."+ls),fn(b&&w,"A track/list element is missing."),Yn(u,pr(w,"."+fi+":not(."+Fr+")")),Kt({arrows:ro,pagination:vi,prev:Nr,next:Hr,bar:us,toggle:ps},function(x,A){l[A]=j("."+x)}),Cn(l,{root:o,track:b,list:w,slides:u})}function z(){var x=o.id||ts(Wn),A=n.role;o.id=x,b.id=b.id||x+"-track",w.id=w.id||x+"-list",!ut(o,Tt)&&o.tagName!=="SECTION"&&A&&Se(o,Tt,A),Se(o,$n,d.carousel),Se(w,Tt,"presentation")}function j(x){var A=hr(o,x);return A&&vs(A,"."+Ci)===o?A:void 0}function R(x){return[x+"--"+n.type,x+"--"+n.direction,n.drag&&x+"--draggable",n.isNavigation&&x+"--nav",x===Ci&&qt]}return Cn(l,{setup:h,mount:T,destroy:L})}var an="slide",mn="loop",Fn="fade";function Cs(e,t,n,i){var a=De(e),s=a.on,o=a.emit,d=a.bind,l=e.Components,u=e.root,p=e.options,I=p.isNavigation,b=p.updateOnMove,w=p.i18n,f=p.pagination,h=p.slideFocus,T=l.Direction.resolve,L=ut(i,"style"),C=ut(i,st),m=n>-1,z=_n(i,"."+cs),j;function R(){m||(i.id=u.id+"-slide"+Xi(t+1),Se(i,Tt,f?"tabpanel":"group"),Se(i,$n,w.slide),Se(i,st,C||ki(w.slideLabel,[t+1,e.length]))),x()}function x(){d(i,"click",He(o,Yi,_)),d(i,"keydown",He(o,Rr,_)),s([pn,Ar,Ut],v),s(Zi,S),b&&s(It,K)}function A(){j=!0,a.destroy(),$t(i,fs),bt(i,oo),Se(i,"style",L),Se(i,st,C||"")}function S(){var B=e.splides.map(function(k){var P=k.splide.Components.Slides.getAt(t);return P?P.slide.id:""}).join(" ");Se(i,st,ki(w.slideX,(m?n:t)+1)),Se(i,kn,B),Se(i,Tt,h?"button":""),h&&bt(i,$n)}function K(){j||v()}function v(){if(!j){var B=e.index;D(),W(),wt(i,Or,t===B-1),wt(i,jr,t===B+1)}}function D(){var B=G();B!==So(i,qt)&&(wt(i,qt,B),Se(i,Wr,I&&B||""),o(B?vr:br,_))}function W(){var B=$(),k=!B&&(!G()||m);if(e.state.is([un,Pn])||Se(i,kr,k||""),Se(qi(i,p.focusableNodes||""),nn,k?-1:""),h&&Se(i,nn,k?-1:0),B!==So(i,Ni)&&(wt(i,Ni,B),o(B?xr:Cr,_)),!B&&document.activeElement===i){var P=l.Slides.getAt(e.index);P&&mr(P.slide)}}function q(B,k,P){dt(P&&z||i,B,k)}function G(){var B=e.index;return B===t||p.cloneStatus&&B===n}function $(){if(e.is(Fn))return G();var B=at(l.Elements.track),k=at(i),P=T("left",!0),te=T("right",!0);return oi(B[P])<=wn(k[P])&&oi(k[te])<=wn(B[te])}function H(B,k){var P=it(B-t);return!m&&(p.rewind||e.is(mn))&&(P=Wt(P,e.length-P)),P<=k}var _={index:t,slideIndex:n,slide:i,container:z,isClone:m,mount:R,destroy:A,update:v,style:q,isWithin:H};return _}function Ss(e,t,n){var i=De(e),a=i.on,s=i.emit,o=i.bind,d=t.Elements,l=d.slides,u=d.list,p=[];function I(){b(),a(Ke,w),a(Ke,b)}function b(){l.forEach(function(v,D){h(v,D,-1)})}function w(){j(function(v){v.destroy()}),Et(p)}function f(){j(function(v){v.update()})}function h(v,D,W){var q=Cs(e,D,W,v);q.mount(),p.push(q),p.sort(function(G,$){return G.index-$.index})}function T(v){return v?R(function(D){return!D.isClone}):p}function L(v){var D=t.Controller,W=D.toIndex(v),q=D.hasFocus()?1:n.perPage;return R(function(G){return Jn(G.index,W,W+q-1)})}function C(v){return R(v)[0]}function m(v,D){ct(v,function(W){if(_t(W)&&(W=gr(W)),ur(W)){var q=l[D];q?Gi(W,q):Mn(u,W),vt(W,n.classes.slide),A(W,He(s,rn))}}),s(Ke)}function z(v){Gt(R(v).map(function(D){return D.slide})),s(Ke)}function j(v,D){T(D).forEach(v)}function R(v){return p.filter(dr(v)?v:function(D){return _t(v)?bn(D.slide,v):Ki(An(v),D.index)})}function x(v,D,W){j(function(q){q.style(v,D,W)})}function A(v,D){var W=qi(v,"img"),q=W.length;q?W.forEach(function(G){o(G,"load error",function(){--q||D()})}):D()}function S(v){return v?l.length:p.length}function K(){return p.length>n.perPage}return{mount:I,destroy:w,update:f,register:h,get:T,getIn:L,getAt:C,add:m,remove:z,forEach:j,filter:R,style:x,getLength:S,isEnough:K}}function ws(e,t,n){var i=De(e),a=i.on,s=i.bind,o=i.emit,d=t.Slides,l=t.Direction.resolve,u=t.Elements,p=u.root,I=u.track,b=u.list,w=d.getAt,f=d.style,h,T,L;function C(){m(),s(window,"resize load",os(He(o,rn))),a([tt,Ke],m),a(rn,z)}function m(){h=n.direction===hi,dt(p,"maxWidth",jt(n.width)),dt(I,l("paddingLeft"),j(!1)),dt(I,l("paddingRight"),j(!0)),z(!0)}function z(_){var B=at(p);(_||T.width!==B.width||T.height!==B.height)&&(dt(I,"height",R()),f(l("marginRight"),jt(n.gap)),f("width",A()),f("height",S(),!0),T=B,o(ci),L!==(L=H())&&(wt(p,Vr,L),o(ns,L)))}function j(_){var B=n.padding,k=l(_?"right":"left");return B&&jt(B[k]||(vn(B)?0:B))||"0px"}function R(){var _="";return h&&(_=x(),fn(_,"height or heightRatio is missing."),_="calc("+_+" - "+j(!1)+" - "+j(!0)+")"),_}function x(){return jt(n.height||at(b).width*n.heightRatio)}function A(){return n.autoWidth?null:jt(n.fixedWidth)||(h?"":K())}function S(){return jt(n.fixedHeight)||(h?n.autoHeight?null:K():x())}function K(){var _=jt(n.gap);return"calc((100%"+(_&&" + "+_)+")/"+(n.perPage||1)+(_&&" - "+_)+")"}function v(){return at(b)[l("width")]}function D(_,B){var k=w(_||0);return k?at(k.slide)[l("width")]+(B?0:G()):0}function W(_,B){var k=w(_);if(k){var P=at(k.slide)[l("right")],te=at(b)[l("left")];return it(P-te)+(B?0:G())}return 0}function q(_){return W(e.length-1)-W(0)+D(0,_)}function G(){var _=w(0);return _&&parseFloat(dt(_.slide,l("marginRight")))||0}function $(_){return parseFloat(dt(I,l("padding"+(_?"Right":"Left"))))||0}function H(){return e.is(Fn)||q(!0)>v()}return{mount:C,resize:z,listSize:v,slideSize:D,sliderSize:q,totalSize:W,getPadding:$,isOverflow:H}}var $s=2;function Ts(e,t,n){var i=De(e),a=i.on,s=t.Elements,o=t.Slides,d=t.Direction.resolve,l=[],u;function p(){a(Ke,I),a([tt,rn],w),(u=T())&&(f(u),t.Layout.resize(!0))}function I(){b(),p()}function b(){Gt(l),Et(l),i.destroy()}function w(){var L=T();u!==L&&(u<L||!L)&&i.emit(Ke)}function f(L){var C=o.get().slice(),m=C.length;if(m){for(;C.length<L;)Yn(C,C);Yn(C.slice(-L),C.slice(0,L)).forEach(function(z,j){var R=j<L,x=h(z.slide,j);R?Gi(x,C[0].slide):Mn(s.list,x),Yn(l,x),o.register(x,j-L+(R?0:m),z.index)})}}function h(L,C){var m=L.cloneNode(!0);return vt(m,n.classes.clone),m.id=e.root.id+"-clone"+Xi(C+1),m}function T(){var L=n.clones;if(!e.is(mn))L=0;else if(Rn(L)){var C=n[d("fixedWidth")]&&t.Layout.slideSize(0),m=C&&wn(at(s.track)[d("width")]/C);L=m||n[d("autoWidth")]&&e.length||n.perPage*$s}return L}return{mount:p,destroy:b}}function Ls(e,t,n){var i=De(e),a=i.on,s=i.emit,o=e.state.set,d=t.Layout,l=d.slideSize,u=d.getPadding,p=d.totalSize,I=d.listSize,b=d.sliderSize,w=t.Direction,f=w.resolve,h=w.orient,T=t.Elements,L=T.list,C=T.track,m;function z(){m=t.Transition,a([Nt,ci,tt,Ke],j)}function j(){t.Controller.isBusy()||(t.Scroll.cancel(),x(e.index),t.Slides.update())}function R(k,P,te,ae){k!==P&&_(k>te)&&(v(),A(K(q(),k>te),!0)),o(un),s(It,P,te,k),m.start(P,function(){o(on),s(pn,P,te,k),ae&&ae()})}function x(k){A(W(k,!0))}function A(k,P){if(!e.is(Fn)){var te=P?k:S(k);dt(L,"transform","translate"+f("X")+"("+te+"px)"),k!==te&&s(Ar)}}function S(k){if(e.is(mn)){var P=D(k),te=P>t.Controller.getEnd(),ae=P<0;(ae||te)&&(k=K(k,te))}return k}function K(k,P){var te=k-H(P),ae=b();return k-=h(ae*(wn(it(te)/ae)||1))*(P?1:-1),k}function v(){A(q(),!0),m.cancel()}function D(k){for(var P=t.Slides.get(),te=0,ae=1/0,re=0;re<P.length;re++){var U=P[re].index,N=it(W(U,!0)-k);if(N<=ae)ae=N,te=U;else break}return te}function W(k,P){var te=h(p(k-1)-$(k));return P?G(te):te}function q(){var k=f("left");return at(L)[k]-at(C)[k]+h(u(!1))}function G(k){return n.trimSpace&&e.is(an)&&(k=Jt(k,0,h(b(!0)-I()))),k}function $(k){var P=n.focus;return P==="center"?(I()-l(k,!0))/2:+P*l(k)||0}function H(k){return W(k?t.Controller.getEnd():0,!!n.trimSpace)}function _(k){var P=h(K(q(),k));return k?P>=0:P<=L[f("scrollWidth")]-at(C)[f("width")]}function B(k,P){P=Rn(P)?q():P;var te=k!==!0&&h(P)<h(H(!1)),ae=k!==!1&&h(P)>h(H(!0));return te||ae}return{mount:z,move:R,jump:x,translate:A,shift:K,cancel:v,toIndex:D,toPosition:W,getPosition:q,getLimit:H,exceededLimit:B,reposition:j}}function Es(e,t,n){var i=De(e),a=i.on,s=i.emit,o=t.Move,d=o.getPosition,l=o.getLimit,u=o.toPosition,p=t.Slides,I=p.isEnough,b=p.getLength,w=n.omitEnd,f=e.is(mn),h=e.is(an),T=He(q,!1),L=He(q,!0),C=n.start||0,m,z=C,j,R,x;function A(){S(),a([tt,Ke,ri],S),a(ci,K)}function S(){j=b(!0),R=n.perMove,x=n.perPage,m=_();var N=Jt(C,0,w?m:j-1);N!==C&&(C=N,o.reposition())}function K(){m!==_()&&s(ri)}function v(N,oe,ye){if(!U()){var ce=W(N),ge=H(ce);ge>-1&&(oe||ge!==C)&&(te(ge),o.move(ce,ge,z,ye))}}function D(N,oe,ye,ce){t.Scroll.scroll(N,oe,ye,function(){var ge=H(o.toIndex(d()));te(w?Wt(ge,m):ge),ce&&ce()})}function W(N){var oe=C;if(_t(N)){var ye=N.match(/([+\-<>])(\d+)?/)||[],ce=ye[1],ge=ye[2];ce==="+"||ce==="-"?oe=G(C+ +(""+ce+(+ge||1)),C):ce===">"?oe=ge?B(+ge):T(!0):ce==="<"&&(oe=L(!0))}else oe=f?N:Jt(N,0,m);return oe}function q(N,oe){var ye=R||(re()?1:x),ce=G(C+ye*(N?-1:1),C,!(R||re()));return ce===-1&&h&&!fr(d(),l(!N),1)?N?0:m:oe?ce:H(ce)}function G(N,oe,ye){if(I()||re()){var ce=$(N);ce!==N&&(oe=N,N=ce,ye=!1),N<0||N>m?!R&&(Jn(0,N,oe,!0)||Jn(m,oe,N,!0))?N=B(k(N)):f?N=ye?N<0?-(j%x||x):j:N:n.rewind?N=N<0?m:0:N=-1:ye&&N!==oe&&(N=B(k(oe)+(N<oe?-1:1)))}else N=-1;return N}function $(N){if(h&&n.trimSpace==="move"&&N!==C)for(var oe=d();oe===u(N,!0)&&Jn(N,0,e.length-1,!n.rewind);)N<C?--N:++N;return N}function H(N){return f?(N+j)%j||0:N}function _(){for(var N=j-(re()||f&&R?1:x);w&&N-- >0;)if(u(j-1,!0)!==u(N,!0)){N++;break}return Jt(N,0,j-1)}function B(N){return Jt(re()?N:x*N,0,m)}function k(N){return re()?Wt(N,m):oi((N>=m?j-1:N)/x)}function P(N){var oe=o.toIndex(N);return h?Jt(oe,0,m):oe}function te(N){N!==C&&(z=C,C=N)}function ae(N){return N?z:C}function re(){return!Rn(n.focus)||n.isNavigation}function U(){return e.state.is([un,Pn])&&!!n.waitForTransition}return{mount:A,go:v,scroll:D,getNext:T,getPrev:L,getAdjacent:q,getEnd:_,setIndex:te,getIndex:ae,toIndex:B,toPage:k,toDest:P,hasFocus:re,isBusy:U}}var Is="http://www.w3.org/2000/svg",Ps="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z",Dn=40;function Rs(e,t,n){var i=De(e),a=i.on,s=i.bind,o=i.emit,d=n.classes,l=n.i18n,u=t.Elements,p=t.Controller,I=u.arrows,b=u.track,w=I,f=u.prev,h=u.next,T,L,C={};function m(){j(),a(tt,z)}function z(){R(),m()}function j(){var D=n.arrows;D&&!(f&&h)&&S(),f&&h&&(Cn(C,{prev:f,next:h}),Sn(w,D?"":"none"),vt(w,L=ro+"--"+n.direction),D&&(x(),v(),Se([f,h],kn,b.id),o(Tr,f,h)))}function R(){i.destroy(),$t(w,L),T?(Gt(I?[f,h]:w),f=h=null):bt([f,h],oo)}function x(){a([Nt,pn,Ke,Ut,ri],v),s(h,"click",He(A,">")),s(f,"click",He(A,"<"))}function A(D){p.go(D,!0)}function S(){w=I||tn("div",d.arrows),f=K(!0),h=K(!1),T=!0,Mn(w,[f,h]),!I&&Gi(w,b)}function K(D){var W='<button class="'+d.arrow+" "+(D?d.prev:d.next)+'" type="button"><svg xmlns="'+Is+'" viewBox="0 0 '+Dn+" "+Dn+'" width="'+Dn+'" height="'+Dn+'" focusable="false"><path d="'+(n.arrowPath||Ps)+'" />';return gr(W)}function v(){if(f&&h){var D=e.index,W=p.getPrev(),q=p.getNext(),G=W>-1&&D<W?l.last:l.prev,$=q>-1&&D>q?l.first:l.next;f.disabled=W<0,h.disabled=q<0,Se(f,st,G),Se(h,st,$),o(Lr,f,h,W,q)}}return{arrows:C,mount:m,destroy:R,update:v}}var As=Ui+"-interval";function Ms(e,t,n){var i=De(e),a=i.on,s=i.bind,o=i.emit,d=ui(n.interval,e.go.bind(e,">"),x),l=d.isPaused,u=t.Elements,p=t.Elements,I=p.root,b=p.toggle,w=n.autoplay,f,h,T=w==="pause";function L(){w&&(C(),b&&Se(b,kn,u.track.id),T||m(),R())}function C(){n.pauseOnHover&&s(I,"mouseenter mouseleave",function(S){f=S.type==="mouseenter",j()}),n.pauseOnFocus&&s(I,"focusin focusout",function(S){h=S.type==="focusin",j()}),b&&s(b,"click",function(){T?m():z(!0)}),a([It,di,Ke],d.rewind),a(It,A)}function m(){l()&&t.Slides.isEnough()&&(d.start(!n.resetProgress),h=f=T=!1,R(),o(Qi))}function z(S){S===void 0&&(S=!0),T=!!S,R(),l()||(d.pause(),o(eo))}function j(){T||(f||h?z(!1):m())}function R(){b&&(wt(b,qt,!T),Se(b,st,n.i18n[T?"play":"pause"]))}function x(S){var K=u.bar;K&&dt(K,"width",S*100+"%"),o(Pr,S)}function A(S){var K=t.Slides.getAt(S);d.set(K&&+ut(K.slide,As)||n.interval)}return{mount:L,destroy:d.cancel,play:m,pause:z,isPaused:l}}function _s(e,t,n){var i=De(e),a=i.on;function s(){n.cover&&(a(to,He(d,!0)),a([Nt,tt,Ke],He(o,!0)))}function o(l){t.Slides.forEach(function(u){var p=_n(u.container||u.slide,"img");p&&p.src&&d(l,p,u)})}function d(l,u,p){p.style("background",l?'center/cover no-repeat url("'+u.src+'")':"",!0),Sn(u,l?"none":"")}return{mount:s,destroy:He(o,!1)}}var Ws=10,ks=600,Fs=.6,Ns=1.5,Hs=800;function Bs(e,t,n){var i=De(e),a=i.on,s=i.emit,o=e.state.set,d=t.Move,l=d.getPosition,u=d.getLimit,p=d.exceededLimit,I=d.translate,b=e.is(an),w,f,h=1;function T(){a(It,z),a([tt,Ke],j)}function L(x,A,S,K,v){var D=l();if(z(),S&&(!b||!p())){var W=t.Layout.sliderSize(),q=Wi(x)*W*oi(it(x)/W)||0;x=d.toPosition(t.Controller.toDest(x%W))+q}var G=fr(D,x,1);h=1,A=G?0:A||ii(it(x-D)/Ns,Hs),f=K,w=ui(A,C,He(m,D,x,v),1),o(Pn),s(di),w.start()}function C(){o(on),f&&f(),s(Ut)}function m(x,A,S,K){var v=l(),D=x+(A-x)*R(K),W=(D-v)*h;I(v+W),b&&!S&&p()&&(h*=Fs,it(W)<Ws&&L(u(p(!0)),ks,!1,f,!0))}function z(){w&&w.cancel()}function j(){w&&!w.isPaused()&&(z(),C())}function R(x){var A=n.easingFunc;return A?A(x):1-Math.pow(1-x,4)}return{mount:T,destroy:z,scroll:L,cancel:j}}var Zt={passive:!1,capture:!0};function Os(e,t,n){var i=De(e),a=i.on,s=i.emit,o=i.bind,d=i.unbind,l=e.state,u=t.Move,p=t.Scroll,I=t.Controller,b=t.Elements.track,w=t.Media.reduce,f=t.Direction,h=f.resolve,T=f.orient,L=u.getPosition,C=u.exceededLimit,m,z,j,R,x,A=!1,S,K,v;function D(){o(b,Si,Mi,Zt),o(b,wi,Mi,Zt),o(b,zr,q,Zt),o(b,"click",H,{capture:!0}),o(b,"dragstart",St),a([Nt,tt],W)}function W(){var y=n.drag;ee(!y),R=y==="free"}function q(y){if(S=!1,!K){var g=ge(y);ce(y.target)&&(g||!y.button)&&(I.isBusy()?St(y,!0):(v=g?b:window,x=l.is([un,Pn]),j=null,o(v,Si,G,Zt),o(v,wi,$,Zt),u.cancel(),p.cancel(),_(y)))}}function G(y){if(l.is(Xn)||(l.set(Xn),s(Sr)),y.cancelable)if(x){u.translate(m+ye(re(y)));var g=U(y)>Ro,V=A!==(A=C());(g||V)&&_(y),S=!0,s(wr),St(y)}else P(y)&&(x=k(y),St(y))}function $(y){l.is(Xn)&&(l.set(on),s($r)),x&&(B(y),St(y)),d(v,Si,G),d(v,wi,$),x=!1}function H(y){!K&&S&&St(y,!0)}function _(y){j=z,z=y,m=L()}function B(y){var g=te(y),V=ae(g),J=n.rewind&&n.rewindByDrag;w(!1),R?I.scroll(V,0,n.snap):e.is(Fn)?I.go(T(Wi(g))<0?J?"<":"-":J?">":"+"):e.is(an)&&A&&J?I.go(C(!0)?">":"<"):I.go(I.toDest(V),!0),w(!0)}function k(y){var g=n.dragMinThreshold,V=vn(g),J=V&&g.mouse||0,Q=(V?g.touch:+g)||10;return it(re(y))>(ge(y)?Q:J)}function P(y){return it(re(y))>it(re(y,!0))}function te(y){if(e.is(mn)||!A){var g=U(y);if(g&&g<Ro)return re(y)/g}return 0}function ae(y){return L()+Wi(y)*Wt(it(y)*(n.flickPower||600),R?1/0:t.Layout.listSize()*(n.flickMaxPages||1))}function re(y,g){return oe(y,g)-oe(N(y),g)}function U(y){return _i(y)-_i(N(y))}function N(y){return z===y&&j||z}function oe(y,g){return(ge(y)?y.changedTouches[0]:y)["page"+h(g?"Y":"X")]}function ye(y){return y/(A&&e.is(an)?bs:1)}function ce(y){var g=n.noDrag;return!bn(y,"."+Br+", ."+yi)&&(!g||!bn(y,g))}function ge(y){return typeof TouchEvent<"u"&&y instanceof TouchEvent}function we(){return x}function ee(y){K=y}return{mount:D,disable:ee,isDragging:we}}var js={Spacebar:" ",Right:gi,Left:mi,Up:Mr,Down:_r};function ao(e){return e=_t(e)?e:e.key,js[e]||e}var Ao="keydown";function Ds(e,t,n){var i=De(e),a=i.on,s=i.bind,o=i.unbind,d=e.root,l=t.Direction.resolve,u,p;function I(){b(),a(tt,w),a(tt,b),a(It,h)}function b(){var L=n.keyboard;L&&(u=L==="global"?window:d,s(u,Ao,T))}function w(){o(u,Ao)}function f(L){p=L}function h(){var L=p;p=!0,cr(function(){p=L})}function T(L){if(!p){var C=ao(L);C===l(mi)?e.go("<"):C===l(gi)&&e.go(">")}}return{mount:I,destroy:w,disable:f}}var yn=Ui+"-lazy",Zn=yn+"-srcset",Vs="["+yn+"], ["+Zn+"]";function zs(e,t,n){var i=De(e),a=i.on,s=i.off,o=i.bind,d=i.emit,l=n.lazyLoad==="sequential",u=[pn,Ut],p=[];function I(){n.lazyLoad&&(b(),a(Ke,b))}function b(){Et(p),w(),l?L():(s(u),a(u,f),f())}function w(){t.Slides.forEach(function(C){qi(C.slide,Vs).forEach(function(m){var z=ut(m,yn),j=ut(m,Zn);if(z!==m.src||j!==m.srcset){var R=n.classes.spinner,x=m.parentElement,A=_n(x,"."+R)||tn("span",R,x);p.push([m,C,A]),m.src||Sn(m,"none")}})})}function f(){p=p.filter(function(C){var m=n.perPage*((n.preloadPages||1)+1)-1;return C[1].isWithin(e.index,m)?h(C):!0}),p.length||s(u)}function h(C){var m=C[0];vt(C[1].slide,Hi),o(m,"load error",He(T,C)),Se(m,"src",ut(m,yn)),Se(m,"srcset",ut(m,Zn)),bt(m,yn),bt(m,Zn)}function T(C,m){var z=C[0],j=C[1];$t(j.slide,Hi),m.type!=="error"&&(Gt(C[2]),Sn(z,""),d(to,z,j),d(rn)),l&&L()}function L(){p.length&&h(p.shift())}return{mount:I,destroy:He(Et,p),check:f}}function Ks(e,t,n){var i=De(e),a=i.on,s=i.emit,o=i.bind,d=t.Slides,l=t.Elements,u=t.Controller,p=u.hasFocus,I=u.getIndex,b=u.go,w=t.Direction.resolve,f=l.pagination,h=[],T,L;function C(){m(),a([tt,Ke,ri],C);var K=n.pagination;f&&Sn(f,K?"":"none"),K&&(a([It,di,Ut],S),z(),S(),s(Er,{list:T,items:h},A(e.index)))}function m(){T&&(Gt(f?Ft(T.children):T),$t(T,L),Et(h),T=null),i.destroy()}function z(){var K=e.length,v=n.classes,D=n.i18n,W=n.perPage,q=p()?u.getEnd()+1:wn(K/W);T=f||tn("ul",v.pagination,l.track.parentElement),vt(T,L=vi+"--"+x()),Se(T,Tt,"tablist"),Se(T,st,D.select),Se(T,io,x()===hi?"vertical":"");for(var G=0;G<q;G++){var $=tn("li",null,T),H=tn("button",{class:v.page,type:"button"},$),_=d.getIn(G).map(function(k){return k.slide.id}),B=!p()&&W>1?D.pageX:D.slideX;o(H,"click",He(j,G)),n.paginationKeyboard&&o(H,"keydown",He(R,G)),Se($,Tt,"presentation"),Se(H,Tt,"tab"),Se(H,kn,_.join(" ")),Se(H,st,ki(B,G+1)),Se(H,nn,-1),h.push({li:$,button:H,page:G})}}function j(K){b(">"+K,!0)}function R(K,v){var D=h.length,W=ao(v),q=x(),G=-1;W===w(gi,!1,q)?G=++K%D:W===w(mi,!1,q)?G=(--K+D)%D:W==="Home"?G=0:W==="End"&&(G=D-1);var $=h[G];$&&(mr($.button),b(">"+G),St(v,!0))}function x(){return n.paginationDirection||n.direction}function A(K){return h[u.toPage(K)]}function S(){var K=A(I(!0)),v=A(I());if(K){var D=K.button;$t(D,qt),bt(D,To),Se(D,nn,-1)}if(v){var W=v.button;vt(W,qt),Se(W,To,!0),Se(W,nn,"")}s(Ir,{list:T,items:h},K,v)}return{items:h,mount:C,destroy:m,getAt:A,update:S}}var Gs=[" ","Enter"];function qs(e,t,n){var i=n.isNavigation,a=n.slideFocus,s=[];function o(){e.splides.forEach(function(f){f.isParent||(u(e,f.splide),u(f.splide,e))}),i&&p()}function d(){s.forEach(function(f){f.destroy()}),Et(s)}function l(){d(),o()}function u(f,h){var T=De(f);T.on(It,function(L,C,m){h.go(h.is(mn)?m:L)}),s.push(T)}function p(){var f=De(e),h=f.on;h(Yi,b),h(Rr,w),h([Nt,tt],I),s.push(f),f.emit(Zi,e.splides)}function I(){Se(t.Elements.list,io,n.direction===hi?"vertical":"")}function b(f){e.go(f.index)}function w(f,h){Ki(Gs,ao(h))&&(b(f),St(h))}return{setup:He(t.Media.set,{slideFocus:Rn(a)?i:a},!0),mount:o,destroy:d,remount:l}}function Us(e,t,n){var i=De(e),a=i.bind,s=0;function o(){n.wheel&&a(t.Elements.track,"wheel",d,Zt)}function d(u){if(u.cancelable){var p=u.deltaY,I=p<0,b=_i(u),w=n.wheelMinThreshold||0,f=n.wheelSleep||0;it(p)>w&&b-s>f&&(e.go(I?"<":">"),s=b),l(I)&&St(u)}}function l(u){return!n.releaseWheel||e.state.is(un)||t.Controller.getAdjacent(u)!==-1}return{mount:o}}var Xs=90;function Ys(e,t,n){var i=De(e),a=i.on,s=t.Elements.track,o=n.live&&!n.isNavigation,d=tn("span",gs),l=ui(Xs,He(p,!1));function u(){o&&(b(!t.Autoplay.isPaused()),Se(s,Io,!0),d.textContent="…",a(Qi,He(b,!0)),a(eo,He(b,!1)),a([pn,Ut],He(p,!0)))}function p(w){Se(s,Eo,w),w?(Mn(s,d),l.start()):(Gt(d),l.cancel())}function I(){bt(s,[Lo,Io,Eo]),Gt(d)}function b(w){o&&Se(s,Lo,w?"off":"polite")}return{mount:u,disable:b,destroy:I}}var Js=Object.freeze({__proto__:null,Media:rs,Direction:as,Elements:xs,Slides:Ss,Layout:ws,Clones:Ts,Move:Ls,Controller:Es,Arrows:Rs,Autoplay:Ms,Cover:_s,Scroll:Bs,Drag:Os,Keyboard:Ds,LazyLoad:zs,Pagination:Ks,Sync:qs,Wheel:Us,Live:Ys}),Zs={prev:"Previous slide",next:"Next slide",first:"Go to first slide",last:"Go to last slide",slideX:"Go to slide %s",pageX:"Go to page %s",play:"Start autoplay",pause:"Pause autoplay",carousel:"carousel",slide:"slide",select:"Select a slide to show",slideLabel:"%s of %s"},Qs={type:"slide",role:"region",speed:400,perPage:1,cloneStatus:!0,arrows:!0,pagination:!0,paginationKeyboard:!0,interval:5e3,pauseOnHover:!0,pauseOnFocus:!0,resetProgress:!0,easing:"cubic-bezier(0.25, 1, 0.5, 1)",drag:!0,direction:"ltr",trimSpace:!0,focusableNodes:"a, button, textarea, input, select, iframe",live:!0,classes:ys,i18n:Zs,reducedMotion:{speed:0,rewindSpeed:0,autoplay:"pause"}};function el(e,t,n){var i=t.Slides;function a(){De(e).on([Nt,Ke],s)}function s(){i.forEach(function(d){d.style("transform","translateX(-"+100*d.index+"%)")})}function o(d,l){i.style("transition","opacity "+n.speed+"ms "+n.easing),cr(l)}return{mount:a,start:o,cancel:Mi}}function tl(e,t,n){var i=t.Move,a=t.Controller,s=t.Scroll,o=t.Elements.list,d=He(dt,o,"transition"),l;function u(){De(e).bind(o,"transitionend",function(w){w.target===o&&l&&(I(),l())})}function p(w,f){var h=i.toPosition(w,!0),T=i.getPosition(),L=b(w);it(h-T)>=1&&L>=1?n.useScroll?s.scroll(h,L,!1,f):(d("transform "+L+"ms "+n.easing),i.translate(h,!0),l=f):(i.jump(w),f())}function I(){d(""),s.cancel()}function b(w){var f=n.rewindSpeed;if(e.is(an)&&f){var h=a.getIndex(!0),T=a.getEnd();if(h===0&&w>=T||h>=T&&w===0)return f}return n.speed}return{mount:u,start:p,cancel:I}}var nl=(function(){function e(n,i){this.event=De(),this.Components={},this.state=is(en),this.splides=[],this._o={},this._E={};var a=_t(n)?hr(document,n):n;fn(a,a+" is invalid."),this.root=a,i=Mt({label:ut(a,st)||"",labelledby:ut(a,no)||""},Qs,e.defaults,i||{});try{Mt(i,JSON.parse(ut(a,Ui)))}catch{fn(!1,"Invalid JSON")}this._o=Object.create(Mt({},i))}var t=e.prototype;return t.mount=function(i,a){var s=this,o=this.state,d=this.Components;fn(o.is([en,ni]),"Already mounted!"),o.set(en),this._C=d,this._T=a||this._T||(this.is(Fn)?el:tl),this._E=i||this._E;var l=Cn({},Js,this._E,{Transition:this._T});return Kt(l,function(u,p){var I=u(s,d,s._o);d[p]=I,I.setup&&I.setup()}),Kt(d,function(u){u.mount&&u.mount()}),this.emit(Nt),vt(this.root,hs),o.set(on),this.emit(Fi),this},t.sync=function(i){return this.splides.push({splide:i}),i.splides.push({splide:this,isParent:!0}),this.state.is(on)&&(this._C.Sync.remount(),i.Components.Sync.remount()),this},t.go=function(i){return this._C.Controller.go(i),this},t.on=function(i,a){return this.event.on(i,a),this},t.off=function(i){return this.event.off(i),this},t.emit=function(i){var a;return(a=this.event).emit.apply(a,[i].concat(Ft(arguments,1))),this},t.add=function(i,a){return this._C.Slides.add(i,a),this},t.remove=function(i){return this._C.Slides.remove(i),this},t.is=function(i){return this._o.type===i},t.refresh=function(){return this.emit(Ke),this},t.destroy=function(i){i===void 0&&(i=!0);var a=this.event,s=this.state;return s.is(en)?De(this).on(Fi,this.destroy.bind(this,i)):(Kt(this._C,function(o){o.destroy&&o.destroy(i)},!0),a.emit(Ji),a.destroy(),i&&Et(this.splides),s.set(ni)),this},Za(e,[{key:"options",get:function(){return this._o},set:function(i){this._C.Media.set(i,!0,!0)}},{key:"length",get:function(){return this._C.Slides.getLength(!0)}},{key:"index",get:function(){return this._C.Controller.getIndex()}}]),e})(),so=nl;so.defaults={};so.STATES=es;var Mo=[[Nt,"onMounted"],[Fi,"onReady"],[It,"onMove"],[pn,"onMoved"],[Yi,"onClick"],[vr,"onActive"],[br,"onInactive"],[xr,"onVisible"],[Cr,"onHidden"],[Ke,"onRefresh"],[tt,"onUpdated"],[rn,"onResize"],[ci,"onResized"],[Sr,"onDrag"],[wr,"onDragging"],[$r,"onDragged"],[di,"onScroll"],[Ut,"onScrolled"],[Ji,"onDestroy"],[Tr,"onArrowsMounted"],[Lr,"onArrowsUpdated"],[Er,"onPaginationMounted"],[Ir,"onPaginationUpdated"],[Zi,"onNavigationMounted"],[Qi,"onAutoplayPlay"],[Pr,"onAutoplayPlaying"],[eo,"onAutoplayPause"],[to,"onLazyLoadLoaded"]];function lo(...e){return e.filter(Boolean).join(" ")}function ai(e){return e!==null&&typeof e=="object"}function Bi(e,t){if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&!e.some((n,i)=>!Bi(n,t[i]));if(ai(e)&&ai(t)){const n=Object.keys(e),i=Object.keys(t);return n.length===i.length&&!n.some(a=>!Object.prototype.hasOwnProperty.call(t,a)||!Bi(e[a],t[a]))}return e===t}function il(e,t){return e.length===t.length&&!e.some((n,i)=>n!==t[i])}function ol(e,t){if(e){const n=Object.keys(e);for(let i=0;i<n.length;i++){const a=n[i];if(a!=="__proto__"&&t(e[a],a)===!1)break}}return e}function Oi(e,t){const n=e;return ol(t,(i,a)=>{Array.isArray(i)?n[a]=i.slice():ai(i)?n[a]=Oi(ai(n[a])?n[a]:{},i):n[a]=i}),n}var rl=({children:e,className:t,...n})=>c.createElement("div",{className:lo("splide__track",t),...n},c.createElement("ul",{className:"splide__list"},e)),co=class extends c.Component{constructor(){super(...arguments),this.splideRef=c.createRef(),this.slides=[]}componentDidMount(){const{options:e,extensions:t,transition:n}=this.props,{current:i}=this.splideRef;i&&(this.splide=new so(i,e),this.bind(this.splide),this.splide.mount(t,n),this.options=Oi({},e||{}),this.slides=this.getSlides())}componentWillUnmount(){this.splide&&(this.splide.destroy(),this.splide=void 0),this.options=void 0,this.slides.length=0}componentDidUpdate(){if(!this.splide)return;const{options:e}=this.props;e&&!Bi(this.options,e)&&(this.splide.options=e,this.options=Oi({},e));const t=this.getSlides();il(this.slides,t)||(this.splide.refresh(),this.slides=t)}sync(e){var t;(t=this.splide)==null||t.sync(e)}go(e){var t;(t=this.splide)==null||t.go(e)}getSlides(){var e;if(this.splide){const t=(e=this.splide.Components.Elements)==null?void 0:e.list.children;return t&&Array.prototype.slice.call(t)||[]}return[]}bind(e){Mo.forEach(([t,n])=>{const i=this.props[n];typeof i=="function"&&e.on(t,(...a)=>{i(e,...a)})})}omit(e,t){return t.forEach(n=>{Object.prototype.hasOwnProperty.call(e,n)&&delete e[n]}),e}render(){const{className:e,tag:t="div",hasTrack:n=!0,children:i,...a}=this.props;return c.createElement(t,{className:lo("splide",e),ref:this.splideRef,...this.omit(a,["options",...Mo.map(s=>s[1])])},n?c.createElement(rl,null,i):i)}},uo=({children:e,className:t,...n})=>c.createElement("li",{className:lo("splide__slide",t),...n},e);/*!
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),u=require("react"),$e=require("classnames"),E=require("./readTestimonialTextMeasure-CB_Uq-fO.js"),er=require("react-dom");function Jr(e){return e.type==="object"&&e.version===1}const Qr="ControlSlider-module__wrapper___sHEkd",ea="ControlSlider-module__hoverArrow___A-dOH",ta="ControlSlider-module__sliderItem___QQSkR",na="ControlSlider-module__sliderImage___9hRl-",oa="ControlSlider-module__arrow___05ghY",ia="ControlSlider-module__arrowVertical___tBfVN",ra="ControlSlider-module__nextArrow___-30Yc",aa="ControlSlider-module__arrowInner___aEra3",sa="ControlSlider-module__arrowIcon___S4ztF",la="ControlSlider-module__arrowImg___2dwJW",ca="ControlSlider-module__mirror___brd6U",da="ControlSlider-module__pagination___bicLF",ua="ControlSlider-module__paginationInner___bT-P-",pa="ControlSlider-module__paginationVertical___zYqKw",ma="ControlSlider-module__paginationItem___nTRbk",ga="ControlSlider-module__dot___p1Qun",ha="ControlSlider-module__activeDot___LHFaj",fa="ControlSlider-module__paginationInsideBottom___R3FWn",ya="ControlSlider-module__paginationInsideTop___V-qb-",va="ControlSlider-module__paginationOutsideBottom___14w8D",ba="ControlSlider-module__paginationOutsideTop___SCLqB",xa="ControlSlider-module__paginationInsideLeft___yOBRZ",Ca="ControlSlider-module__paginationInsideRight___Rtt3o",Sa="ControlSlider-module__paginationOutsideLeft___lahaw",wa="ControlSlider-module__paginationOutsideRight___EtuQa",$a="ControlSlider-module__imgWrapper___UjEgB",Ta="ControlSlider-module__captionBlock___dJ6-j",La="ControlSlider-module__captionTextWrapper___HFlpf",Ea="ControlSlider-module__captionText___uGBVc",Pa="ControlSlider-module__active___WZK4G",_a="ControlSlider-module__withPointerEvents___t-18M",Aa="ControlSlider-module__topLeftAlignment___zjnGM",Ra="ControlSlider-module__topCenterAlignment___gD1xW",Wa="ControlSlider-module__topRightAlignment___NMapS",Ia="ControlSlider-module__middleLeftAlignment___OnUrY",ka="ControlSlider-module__middleCenterAlignment___Tdkl0",Fa="ControlSlider-module__middleRightAlignment___wEbfX",Ma="ControlSlider-module__bottomLeftAlignment___cTP2-",Na="ControlSlider-module__bottomCenterAlignment___c54fB",Ha="ControlSlider-module__bottomRightAlignment___kEwrz",Ba="ControlSlider-module__clickOverlay___DZA28",Oa="ControlSlider-module__contain___pLyq7",Va="ControlSlider-module__cover___KdDat",ae={wrapper:Qr,hoverArrow:ea,sliderItem:ta,sliderImage:na,arrow:oa,arrowVertical:ia,nextArrow:ra,arrowInner:aa,arrowIcon:sa,arrowImg:la,mirror:ca,pagination:da,paginationInner:ua,paginationVertical:pa,paginationItem:ma,dot:ga,activeDot:ha,paginationInsideBottom:fa,paginationInsideTop:ya,paginationOutsideBottom:va,paginationOutsideTop:ba,paginationInsideLeft:xa,paginationInsideRight:Ca,paginationOutsideLeft:Sa,paginationOutsideRight:wa,imgWrapper:$a,captionBlock:Ta,captionTextWrapper:La,captionText:Ea,active:Pa,withPointerEvents:_a,topLeftAlignment:Aa,topCenterAlignment:Ra,topRightAlignment:Wa,middleLeftAlignment:Ia,middleCenterAlignment:ka,middleRightAlignment:Fa,bottomLeftAlignment:Ma,bottomCenterAlignment:Na,bottomRightAlignment:Ha,clickOverlay:Ba,contain:Oa,cover:Va};function Da(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function ja(e,t,n){return t&&Da(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}var yi="(prefers-reduced-motion: reduce)",nn=1,za=2,an=3,pn=4,An=5,Gn=6,to=7,Ka={CREATED:nn,MOUNTED:za,IDLE:an,MOVING:pn,SCROLLING:An,DRAGGING:Gn,DESTROYED:to};function Pt(e){e.length=0}function Ht(e,t,n){return Array.prototype.slice.call(e,t,n)}function Ae(e){return e.bind.apply(e,[null].concat(Ht(arguments,1)))}var tr=setTimeout,Wo=function(){};function vi(e){return requestAnimationFrame(e)}function so(e,t){return typeof t===e}function bn(e){return!jo(e)&&so("object",e)}var Do=Array.isArray,nr=Ae(so,"function"),Ft=Ae(so,"string"),Rn=Ae(so,"undefined");function jo(e){return e===null}function or(e){try{return e instanceof(e.ownerDocument.defaultView||window).HTMLElement}catch{return!1}}function Wn(e){return Do(e)?e:[e]}function st(e,t){Wn(e).forEach(t)}function zo(e,t){return e.indexOf(t)>-1}function Yn(e,t){return e.push.apply(e,Wn(t)),e}function $t(e,t,n){e&&st(t,function(o){o&&e.classList[n?"add":"remove"](o)})}function ft(e,t){$t(e,Ft(t)?t.split(" "):t,!0)}function In(e,t){st(t,e.appendChild.bind(e))}function Ko(e,t){st(e,function(n){var o=(t||n).parentNode;o&&o.insertBefore(n,t)})}function xn(e,t){return or(e)&&(e.msMatchesSelector||e.matches).call(e,t)}function ir(e,t){var n=e?Ht(e.children):[];return t?n.filter(function(o){return xn(o,t)}):n}function kn(e,t){return t?ir(e,t)[0]:e.firstElementChild}var Cn=Object.keys;function Kt(e,t,n){return e&&(n?Cn(e).reverse():Cn(e)).forEach(function(o){o!=="__proto__"&&t(e[o],o)}),e}function Sn(e){return Ht(arguments,1).forEach(function(t){Kt(t,function(n,o){e[o]=t[o]})}),e}function It(e){return Ht(arguments,1).forEach(function(t){Kt(t,function(n,o){Do(n)?e[o]=n.slice():bn(n)?e[o]=It({},bn(e[o])?e[o]:{},n):e[o]=n})}),e}function bi(e,t){st(t||Cn(e),function(n){delete e[n]})}function yt(e,t){st(e,function(n){st(t,function(o){n&&n.removeAttribute(o)})})}function he(e,t,n){bn(t)?Kt(t,function(o,i){he(e,i,o)}):st(e,function(o){jo(n)||n===""?yt(o,t):o.setAttribute(t,String(n))})}function on(e,t,n){var o=document.createElement(e);return t&&(Ft(t)?ft(o,t):he(o,t)),n&&In(n,o),o}function ut(e,t,n){if(Rn(n))return getComputedStyle(e)[t];jo(n)||(e.style[t]=""+n)}function wn(e,t){ut(e,"display",t)}function rr(e){e.setActive&&e.setActive()||e.focus({preventScroll:!0})}function pt(e,t){return e.getAttribute(t)}function xi(e,t){return e&&e.classList.contains(t)}function it(e){return e.getBoundingClientRect()}function qt(e){st(e,function(t){t&&t.parentNode&&t.parentNode.removeChild(t)})}function ar(e){return kn(new DOMParser().parseFromString(e,"text/html").body)}function wt(e,t){e.preventDefault(),t&&(e.stopPropagation(),e.stopImmediatePropagation())}function sr(e,t){return e&&e.querySelector(t)}function qo(e,t){return t?Ht(e.querySelectorAll(t)):[]}function Tt(e,t){$t(e,t,!1)}function Io(e){return e.timeStamp}function Vt(e){return Ft(e)?e:e?e+"px":""}var Fn="splide",Uo="data-"+Fn;function yn(e,t){if(!e)throw new Error("["+Fn+"] "+(t||""))}var Mt=Math.min,no=Math.max,oo=Math.floor,$n=Math.ceil,Ye=Math.abs;function lr(e,t,n){return Ye(e-t)<n}function Xn(e,t,n,o){var i=Mt(t,n),r=no(t,n);return o?i<e&&e<r:i<=e&&e<=r}function Qt(e,t,n){var o=Mt(t,n),i=no(t,n);return Mt(no(o,e),i)}function ko(e){return+(e>0)-+(e<0)}function Fo(e,t){return st(t,function(n){e=e.replace("%s",""+n)}),e}function Go(e){return e<10?"0"+e:""+e}var Ci={};function qa(e){return""+e+Go(Ci[e]=(Ci[e]||0)+1)}function cr(){var e=[];function t(s,c,a,d){i(s,c,function(p,T,y){var C="addEventListener"in p,m=C?p.removeEventListener.bind(p,T,a,d):p.removeListener.bind(p,a);C?p.addEventListener(T,a,d):p.addListener(a),e.push([p,T,y,a,m])})}function n(s,c,a){i(s,c,function(d,p,T){e=e.filter(function(y){return y[0]===d&&y[1]===p&&y[2]===T&&(!a||y[3]===a)?(y[4](),!1):!0})})}function o(s,c,a){var d,p=!0;return typeof CustomEvent=="function"?d=new CustomEvent(c,{bubbles:p,detail:a}):(d=document.createEvent("CustomEvent"),d.initCustomEvent(c,p,!1,a)),s.dispatchEvent(d),d}function i(s,c,a){st(s,function(d){d&&st(c,function(p){p.split(" ").forEach(function(T){var y=T.split(".");a(d,y[0],y[1])})})})}function r(){e.forEach(function(s){s[4]()}),Pt(e)}return{bind:t,unbind:n,dispatch:o,destroy:r}}var Bt="mounted",Mo="ready",_t="move",mn="moved",Yo="click",dr="active",ur="inactive",pr="visible",mr="hidden",Me="refresh",je="updated",sn="resize",lo="resized",gr="drag",hr="dragging",fr="dragged",co="scroll",Gt="scrolled",Ua="overflow",Xo="destroy",yr="arrows:mounted",vr="arrows:updated",br="pagination:mounted",xr="pagination:updated",Zo="navigation:mounted",Jo="autoplay:play",Cr="autoplay:playing",Qo="autoplay:pause",ei="lazyload:loaded",Sr="sk",wr="sh",io="ei";function Re(e){var t=e?e.event.bus:document.createDocumentFragment(),n=cr();function o(r,s){n.bind(t,Wn(r).join(" "),function(c){s.apply(s,Do(c.detail)?c.detail:[])})}function i(r){n.dispatch(t,r,Ht(arguments,1))}return e&&e.event.on(Xo,n.destroy),Sn(n,{bus:t,on:o,off:Ae(n.unbind,t),emit:i})}function uo(e,t,n,o){var i=Date.now,r,s=0,c,a=!0,d=0;function p(){if(!a){if(s=e?Mt((i()-r)/e,1):1,n&&n(s),s>=1&&(t(),r=i(),o&&++d>=o))return y();c=vi(p)}}function T(x){x||m(),r=i()-(x?s*e:0),a=!1,c=vi(p)}function y(){a=!0}function C(){r=i(),s=0,n&&n(s)}function m(){c&&cancelAnimationFrame(c),s=0,c=0,a=!0}function h(x){e=x}function W(){return a}return{start:T,rewind:C,pause:y,cancel:m,set:h,isPaused:W}}function Ga(e){var t=e;function n(i){t=i}function o(i){return zo(Wn(i),t)}return{set:n,is:o}}function Ya(e,t){var n=uo(0,e,null,1);return function(){n.isPaused()&&n.start()}}function Xa(e,t,n){var o=e.state,i=n.breakpoints||{},r=n.reducedMotion||{},s=cr(),c=[];function a(){var m=n.mediaQuery==="min";Cn(i).sort(function(h,W){return m?+h-+W:+W-+h}).forEach(function(h){p(i[h],"("+(m?"min":"max")+"-width:"+h+"px)")}),p(r,yi),T()}function d(m){m&&s.destroy()}function p(m,h){var W=matchMedia(h);s.bind(W,"change",T),c.push([m,W])}function T(){var m=o.is(to),h=n.direction,W=c.reduce(function(x,b){return It(x,b[1].matches?b[0]:{})},{});bi(n),C(W),n.destroy?e.destroy(n.destroy==="completely"):m?(d(!0),e.mount()):h!==n.direction&&e.refresh()}function y(m){matchMedia(yi).matches&&(m?It(n,r):bi(n,Cn(r)))}function C(m,h,W){It(n,m),h&&It(Object.getPrototypeOf(n),m),(W||!o.is(nn))&&e.emit(je,n)}return{setup:a,destroy:d,reduce:y,set:C}}var po="Arrow",mo=po+"Left",go=po+"Right",$r=po+"Up",Tr=po+"Down",Si="rtl",ho="ttb",Co={width:["height"],left:["top","right"],right:["bottom","left"],x:["y"],X:["Y"],Y:["X"],ArrowLeft:[$r,go],ArrowRight:[Tr,mo]};function Za(e,t,n){function o(r,s,c){c=c||n.direction;var a=c===Si&&!s?1:c===ho?0:-1;return Co[r]&&Co[r][a]||r.replace(/width|left|right/i,function(d,p){var T=Co[d.toLowerCase()][a]||d;return p>0?T.charAt(0).toUpperCase()+T.slice(1):T})}function i(r){return r*(n.direction===Si?1:-1)}return{resolve:o,orient:i}}var Lt="role",rn="tabindex",Ja="disabled",mt="aria-",Mn=mt+"controls",Lr=mt+"current",wi=mt+"selected",rt=mt+"label",ti=mt+"labelledby",Er=mt+"hidden",ni=mt+"orientation",Tn=mt+"roledescription",$i=mt+"live",Ti=mt+"busy",Li=mt+"atomic",oi=[Lt,rn,Ja,Mn,Lr,rt,ti,Er,ni,Tn],vt=Fn+"__",Ot="is-",So=Fn,Ei=vt+"track",Qa=vt+"list",fo=vt+"slide",Pr=fo+"--clone",es=fo+"__container",ii=vt+"arrows",yo=vt+"arrow",_r=yo+"--prev",Ar=yo+"--next",vo=vt+"pagination",Rr=vo+"__page",ts=vt+"progress",ns=ts+"__bar",os=vt+"toggle",is=vt+"spinner",rs=vt+"sr",as=Ot+"initialized",Ut=Ot+"active",Wr=Ot+"prev",Ir=Ot+"next",No=Ot+"visible",Ho=Ot+"loading",kr=Ot+"focus-in",Fr=Ot+"overflow",ss=[Ut,No,Wr,Ir,Ho,kr,Fr],ls={slide:fo,clone:Pr,arrows:ii,arrow:yo,prev:_r,next:Ar,pagination:vo,page:Rr,spinner:is};function cs(e,t){if(nr(e.closest))return e.closest(t);for(var n=e;n&&n.nodeType===1&&!xn(n,t);)n=n.parentElement;return n}var ds=5,Pi=200,Mr="touchstart mousedown",wo="touchmove mousemove",$o="touchend touchcancel mouseup click";function us(e,t,n){var o=Re(e),i=o.on,r=o.bind,s=e.root,c=n.i18n,a={},d=[],p=[],T=[],y,C,m;function h(){f(),O(),b()}function W(){i(Me,x),i(Me,h),i(je,b),r(document,Mr+" keydown",function($){m=$.type==="keydown"},{capture:!0}),r(s,"focusin",function(){$t(s,kr,!!m)})}function x($){var A=oi.concat("style");Pt(d),Tt(s,p),Tt(y,T),yt([y,C],A),yt(s,$?A:["style",Tn])}function b(){Tt(s,p),Tt(y,T),p=_(So),T=_(Ei),ft(s,p),ft(y,T),he(s,rt,n.label),he(s,ti,n.labelledby)}function f(){y=P("."+Ei),C=kn(y,"."+Qa),yn(y&&C,"A track/list element is missing."),Yn(d,ir(C,"."+fo+":not(."+Pr+")")),Kt({arrows:ii,pagination:vo,prev:_r,next:Ar,bar:ns,toggle:os},function($,A){a[A]=P("."+$)}),Sn(a,{root:s,track:y,list:C,slides:d})}function O(){var $=s.id||qa(Fn),A=n.role;s.id=$,y.id=y.id||$+"-track",C.id=C.id||$+"-list",!pt(s,Lt)&&s.tagName!=="SECTION"&&A&&he(s,Lt,A),he(s,Tn,c.carousel),he(C,Lt,"presentation")}function P($){var A=sr(s,$);return A&&cs(A,"."+So)===s?A:void 0}function _($){return[$+"--"+n.type,$+"--"+n.direction,n.drag&&$+"--draggable",n.isNavigation&&$+"--nav",$===So&&Ut]}return Sn(a,{setup:h,mount:W,destroy:x})}var ln="slide",gn="loop",Nn="fade";function ps(e,t,n,o){var i=Re(e),r=i.on,s=i.emit,c=i.bind,a=e.Components,d=e.root,p=e.options,T=p.isNavigation,y=p.updateOnMove,C=p.i18n,m=p.pagination,h=p.slideFocus,W=a.Direction.resolve,x=pt(o,"style"),b=pt(o,rt),f=n>-1,O=kn(o,"."+es),P;function _(){f||(o.id=d.id+"-slide"+Go(t+1),he(o,Lt,m?"tabpanel":"group"),he(o,Tn,C.slide),he(o,rt,b||Fo(C.slideLabel,[t+1,e.length]))),$()}function $(){c(o,"click",Ae(s,Yo,F)),c(o,"keydown",Ae(s,Sr,F)),r([mn,wr,Gt],L),r(Zo,w),y&&r(_t,H)}function A(){P=!0,i.destroy(),Tt(o,ss),yt(o,oi),he(o,"style",x),he(o,rt,b||"")}function w(){var N=e.splides.map(function(I){var B=I.splide.Components.Slides.getAt(t);return B?B.slide.id:""}).join(" ");he(o,rt,Fo(C.slideX,(f?n:t)+1)),he(o,Mn,N),he(o,Lt,h?"button":""),h&&yt(o,Tn)}function H(){P||L()}function L(){if(!P){var N=e.index;V(),D(),$t(o,Wr,t===N-1),$t(o,Ir,t===N+1)}}function V(){var N=q();N!==xi(o,Ut)&&($t(o,Ut,N),he(o,Lr,T&&N||""),s(N?dr:ur,F))}function D(){var N=S(),I=!N&&(!q()||f);if(e.state.is([pn,An])||he(o,Er,I||""),he(qo(o,p.focusableNodes||""),rn,I?-1:""),h&&he(o,rn,I?-1:0),N!==xi(o,No)&&($t(o,No,N),s(N?pr:mr,F)),!N&&document.activeElement===o){var B=a.Slides.getAt(e.index);B&&rr(B.slide)}}function J(N,I,B){ut(B&&O||o,N,I)}function q(){var N=e.index;return N===t||p.cloneStatus&&N===n}function S(){if(e.is(Nn))return q();var N=it(a.Elements.track),I=it(o),B=W("left",!0),ie=W("right",!0);return oo(N[B])<=$n(I[B])&&oo(I[ie])<=$n(N[ie])}function R(N,I){var B=Ye(N-t);return!f&&(p.rewind||e.is(gn))&&(B=Mt(B,e.length-B)),B<=I}var F={index:t,slideIndex:n,slide:o,container:O,isClone:f,mount:_,destroy:A,update:L,style:J,isWithin:R};return F}function ms(e,t,n){var o=Re(e),i=o.on,r=o.emit,s=o.bind,c=t.Elements,a=c.slides,d=c.list,p=[];function T(){y(),i(Me,C),i(Me,y)}function y(){a.forEach(function(L,V){h(L,V,-1)})}function C(){P(function(L){L.destroy()}),Pt(p)}function m(){P(function(L){L.update()})}function h(L,V,D){var J=ps(e,V,D,L);J.mount(),p.push(J),p.sort(function(q,S){return q.index-S.index})}function W(L){return L?_(function(V){return!V.isClone}):p}function x(L){var V=t.Controller,D=V.toIndex(L),J=V.hasFocus()?1:n.perPage;return _(function(q){return Xn(q.index,D,D+J-1)})}function b(L){return _(L)[0]}function f(L,V){st(L,function(D){if(Ft(D)&&(D=ar(D)),or(D)){var J=a[V];J?Ko(D,J):In(d,D),ft(D,n.classes.slide),A(D,Ae(r,sn))}}),r(Me)}function O(L){qt(_(L).map(function(V){return V.slide})),r(Me)}function P(L,V){W(V).forEach(L)}function _(L){return p.filter(nr(L)?L:function(V){return Ft(L)?xn(V.slide,L):zo(Wn(L),V.index)})}function $(L,V,D){P(function(J){J.style(L,V,D)})}function A(L,V){var D=qo(L,"img"),J=D.length;J?D.forEach(function(q){s(q,"load error",function(){--J||V()})}):V()}function w(L){return L?a.length:p.length}function H(){return p.length>n.perPage}return{mount:T,destroy:C,update:m,register:h,get:W,getIn:x,getAt:b,add:f,remove:O,forEach:P,filter:_,style:$,getLength:w,isEnough:H}}function gs(e,t,n){var o=Re(e),i=o.on,r=o.bind,s=o.emit,c=t.Slides,a=t.Direction.resolve,d=t.Elements,p=d.root,T=d.track,y=d.list,C=c.getAt,m=c.style,h,W,x;function b(){f(),r(window,"resize load",Ya(Ae(s,sn))),i([je,Me],f),i(sn,O)}function f(){h=n.direction===ho,ut(p,"maxWidth",Vt(n.width)),ut(T,a("paddingLeft"),P(!1)),ut(T,a("paddingRight"),P(!0)),O(!0)}function O(F){var N=it(p);(F||W.width!==N.width||W.height!==N.height)&&(ut(T,"height",_()),m(a("marginRight"),Vt(n.gap)),m("width",A()),m("height",w(),!0),W=N,s(lo),x!==(x=R())&&($t(p,Fr,x),s(Ua,x)))}function P(F){var N=n.padding,I=a(F?"right":"left");return N&&Vt(N[I]||(bn(N)?0:N))||"0px"}function _(){var F="";return h&&(F=$(),yn(F,"height or heightRatio is missing."),F="calc("+F+" - "+P(!1)+" - "+P(!0)+")"),F}function $(){return Vt(n.height||it(y).width*n.heightRatio)}function A(){return n.autoWidth?null:Vt(n.fixedWidth)||(h?"":H())}function w(){return Vt(n.fixedHeight)||(h?n.autoHeight?null:H():$())}function H(){var F=Vt(n.gap);return"calc((100%"+(F&&" + "+F)+")/"+(n.perPage||1)+(F&&" - "+F)+")"}function L(){return it(y)[a("width")]}function V(F,N){var I=C(F||0);return I?it(I.slide)[a("width")]+(N?0:q()):0}function D(F,N){var I=C(F);if(I){var B=it(I.slide)[a("right")],ie=it(y)[a("left")];return Ye(B-ie)+(N?0:q())}return 0}function J(F){return D(e.length-1)-D(0)+V(0,F)}function q(){var F=C(0);return F&&parseFloat(ut(F.slide,a("marginRight")))||0}function S(F){return parseFloat(ut(T,a("padding"+(F?"Right":"Left"))))||0}function R(){return e.is(Nn)||J(!0)>L()}return{mount:b,resize:O,listSize:L,slideSize:V,sliderSize:J,totalSize:D,getPadding:S,isOverflow:R}}var hs=2;function fs(e,t,n){var o=Re(e),i=o.on,r=t.Elements,s=t.Slides,c=t.Direction.resolve,a=[],d;function p(){i(Me,T),i([je,sn],C),(d=W())&&(m(d),t.Layout.resize(!0))}function T(){y(),p()}function y(){qt(a),Pt(a),o.destroy()}function C(){var x=W();d!==x&&(d<x||!x)&&o.emit(Me)}function m(x){var b=s.get().slice(),f=b.length;if(f){for(;b.length<x;)Yn(b,b);Yn(b.slice(-x),b.slice(0,x)).forEach(function(O,P){var _=P<x,$=h(O.slide,P);_?Ko($,b[0].slide):In(r.list,$),Yn(a,$),s.register($,P-x+(_?0:f),O.index)})}}function h(x,b){var f=x.cloneNode(!0);return ft(f,n.classes.clone),f.id=e.root.id+"-clone"+Go(b+1),f}function W(){var x=n.clones;if(!e.is(gn))x=0;else if(Rn(x)){var b=n[c("fixedWidth")]&&t.Layout.slideSize(0),f=b&&$n(it(r.track)[c("width")]/b);x=f||n[c("autoWidth")]&&e.length||n.perPage*hs}return x}return{mount:p,destroy:y}}function ys(e,t,n){var o=Re(e),i=o.on,r=o.emit,s=e.state.set,c=t.Layout,a=c.slideSize,d=c.getPadding,p=c.totalSize,T=c.listSize,y=c.sliderSize,C=t.Direction,m=C.resolve,h=C.orient,W=t.Elements,x=W.list,b=W.track,f;function O(){f=t.Transition,i([Bt,lo,je,Me],P)}function P(){t.Controller.isBusy()||(t.Scroll.cancel(),$(e.index),t.Slides.update())}function _(I,B,ie,Q){I!==B&&F(I>ie)&&(L(),A(H(J(),I>ie),!0)),s(pn),r(_t,B,ie,I),f.start(B,function(){s(an),r(mn,B,ie,I),Q&&Q()})}function $(I){A(D(I,!0))}function A(I,B){if(!e.is(Nn)){var ie=B?I:w(I);ut(x,"transform","translate"+m("X")+"("+ie+"px)"),I!==ie&&r(wr)}}function w(I){if(e.is(gn)){var B=V(I),ie=B>t.Controller.getEnd(),Q=B<0;(Q||ie)&&(I=H(I,ie))}return I}function H(I,B){var ie=I-R(B),Q=y();return I-=h(Q*($n(Ye(ie)/Q)||1))*(B?1:-1),I}function L(){A(J(),!0),f.cancel()}function V(I){for(var B=t.Slides.get(),ie=0,Q=1/0,oe=0;oe<B.length;oe++){var G=B[oe].index,M=Ye(D(G,!0)-I);if(M<=Q)Q=M,ie=G;else break}return ie}function D(I,B){var ie=h(p(I-1)-S(I));return B?q(ie):ie}function J(){var I=m("left");return it(x)[I]-it(b)[I]+h(d(!1))}function q(I){return n.trimSpace&&e.is(ln)&&(I=Qt(I,0,h(y(!0)-T()))),I}function S(I){var B=n.focus;return B==="center"?(T()-a(I,!0))/2:+B*a(I)||0}function R(I){return D(I?t.Controller.getEnd():0,!!n.trimSpace)}function F(I){var B=h(H(J(),I));return I?B>=0:B<=x[m("scrollWidth")]-it(b)[m("width")]}function N(I,B){B=Rn(B)?J():B;var ie=I!==!0&&h(B)<h(R(!1)),Q=I!==!1&&h(B)>h(R(!0));return ie||Q}return{mount:O,move:_,jump:$,translate:A,shift:H,cancel:L,toIndex:V,toPosition:D,getPosition:J,getLimit:R,exceededLimit:N,reposition:P}}function vs(e,t,n){var o=Re(e),i=o.on,r=o.emit,s=t.Move,c=s.getPosition,a=s.getLimit,d=s.toPosition,p=t.Slides,T=p.isEnough,y=p.getLength,C=n.omitEnd,m=e.is(gn),h=e.is(ln),W=Ae(J,!1),x=Ae(J,!0),b=n.start||0,f,O=b,P,_,$;function A(){w(),i([je,Me,io],w),i(lo,H)}function w(){P=y(!0),_=n.perMove,$=n.perPage,f=F();var M=Qt(b,0,C?f:P-1);M!==b&&(b=M,s.reposition())}function H(){f!==F()&&r(io)}function L(M,re,Le){if(!G()){var ce=D(M),fe=R(ce);fe>-1&&(re||fe!==b)&&(ie(fe),s.move(ce,fe,O,Le))}}function V(M,re,Le,ce){t.Scroll.scroll(M,re,Le,function(){var fe=R(s.toIndex(c()));ie(C?Mt(fe,f):fe),ce&&ce()})}function D(M){var re=b;if(Ft(M)){var Le=M.match(/([+\-<>])(\d+)?/)||[],ce=Le[1],fe=Le[2];ce==="+"||ce==="-"?re=q(b+ +(""+ce+(+fe||1)),b):ce===">"?re=fe?N(+fe):W(!0):ce==="<"&&(re=x(!0))}else re=m?M:Qt(M,0,f);return re}function J(M,re){var Le=_||(oe()?1:$),ce=q(b+Le*(M?-1:1),b,!(_||oe()));return ce===-1&&h&&!lr(c(),a(!M),1)?M?0:f:re?ce:R(ce)}function q(M,re,Le){if(T()||oe()){var ce=S(M);ce!==M&&(re=M,M=ce,Le=!1),M<0||M>f?!_&&(Xn(0,M,re,!0)||Xn(f,re,M,!0))?M=N(I(M)):m?M=Le?M<0?-(P%$||$):P:M:n.rewind?M=M<0?f:0:M=-1:Le&&M!==re&&(M=N(I(re)+(M<re?-1:1)))}else M=-1;return M}function S(M){if(h&&n.trimSpace==="move"&&M!==b)for(var re=c();re===d(M,!0)&&Xn(M,0,e.length-1,!n.rewind);)M<b?--M:++M;return M}function R(M){return m?(M+P)%P||0:M}function F(){for(var M=P-(oe()||m&&_?1:$);C&&M-- >0;)if(d(P-1,!0)!==d(M,!0)){M++;break}return Qt(M,0,P-1)}function N(M){return Qt(oe()?M:$*M,0,f)}function I(M){return oe()?Mt(M,f):oo((M>=f?P-1:M)/$)}function B(M){var re=s.toIndex(M);return h?Qt(re,0,f):re}function ie(M){M!==b&&(O=b,b=M)}function Q(M){return M?O:b}function oe(){return!Rn(n.focus)||n.isNavigation}function G(){return e.state.is([pn,An])&&!!n.waitForTransition}return{mount:A,go:L,scroll:V,getNext:W,getPrev:x,getAdjacent:J,getEnd:F,setIndex:ie,getIndex:Q,toIndex:N,toPage:I,toDest:B,hasFocus:oe,isBusy:G}}var bs="http://www.w3.org/2000/svg",xs="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z",Vn=40;function Cs(e,t,n){var o=Re(e),i=o.on,r=o.bind,s=o.emit,c=n.classes,a=n.i18n,d=t.Elements,p=t.Controller,T=d.arrows,y=d.track,C=T,m=d.prev,h=d.next,W,x,b={};function f(){P(),i(je,O)}function O(){_(),f()}function P(){var V=n.arrows;V&&!(m&&h)&&w(),m&&h&&(Sn(b,{prev:m,next:h}),wn(C,V?"":"none"),ft(C,x=ii+"--"+n.direction),V&&($(),L(),he([m,h],Mn,y.id),s(yr,m,h)))}function _(){o.destroy(),Tt(C,x),W?(qt(T?[m,h]:C),m=h=null):yt([m,h],oi)}function $(){i([Bt,mn,Me,Gt,io],L),r(h,"click",Ae(A,">")),r(m,"click",Ae(A,"<"))}function A(V){p.go(V,!0)}function w(){C=T||on("div",c.arrows),m=H(!0),h=H(!1),W=!0,In(C,[m,h]),!T&&Ko(C,y)}function H(V){var D='<button class="'+c.arrow+" "+(V?c.prev:c.next)+'" type="button"><svg xmlns="'+bs+'" viewBox="0 0 '+Vn+" "+Vn+'" width="'+Vn+'" height="'+Vn+'" focusable="false"><path d="'+(n.arrowPath||xs)+'" />';return ar(D)}function L(){if(m&&h){var V=e.index,D=p.getPrev(),J=p.getNext(),q=D>-1&&V<D?a.last:a.prev,S=J>-1&&V>J?a.first:a.next;m.disabled=D<0,h.disabled=J<0,he(m,rt,q),he(h,rt,S),s(vr,m,h,D,J)}}return{arrows:b,mount:f,destroy:_,update:L}}var Ss=Uo+"-interval";function ws(e,t,n){var o=Re(e),i=o.on,r=o.bind,s=o.emit,c=uo(n.interval,e.go.bind(e,">"),$),a=c.isPaused,d=t.Elements,p=t.Elements,T=p.root,y=p.toggle,C=n.autoplay,m,h,W=C==="pause";function x(){C&&(b(),y&&he(y,Mn,d.track.id),W||f(),_())}function b(){n.pauseOnHover&&r(T,"mouseenter mouseleave",function(w){m=w.type==="mouseenter",P()}),n.pauseOnFocus&&r(T,"focusin focusout",function(w){h=w.type==="focusin",P()}),y&&r(y,"click",function(){W?f():O(!0)}),i([_t,co,Me],c.rewind),i(_t,A)}function f(){a()&&t.Slides.isEnough()&&(c.start(!n.resetProgress),h=m=W=!1,_(),s(Jo))}function O(w){w===void 0&&(w=!0),W=!!w,_(),a()||(c.pause(),s(Qo))}function P(){W||(m||h?O(!1):f())}function _(){y&&($t(y,Ut,!W),he(y,rt,n.i18n[W?"play":"pause"]))}function $(w){var H=d.bar;H&&ut(H,"width",w*100+"%"),s(Cr,w)}function A(w){var H=t.Slides.getAt(w);c.set(H&&+pt(H.slide,Ss)||n.interval)}return{mount:x,destroy:c.cancel,play:f,pause:O,isPaused:a}}function $s(e,t,n){var o=Re(e),i=o.on;function r(){n.cover&&(i(ei,Ae(c,!0)),i([Bt,je,Me],Ae(s,!0)))}function s(a){t.Slides.forEach(function(d){var p=kn(d.container||d.slide,"img");p&&p.src&&c(a,p,d)})}function c(a,d,p){p.style("background",a?'center/cover no-repeat url("'+d.src+'")':"",!0),wn(d,a?"none":"")}return{mount:r,destroy:Ae(s,!1)}}var Ts=10,Ls=600,Es=.6,Ps=1.5,_s=800;function As(e,t,n){var o=Re(e),i=o.on,r=o.emit,s=e.state.set,c=t.Move,a=c.getPosition,d=c.getLimit,p=c.exceededLimit,T=c.translate,y=e.is(ln),C,m,h=1;function W(){i(_t,O),i([je,Me],P)}function x($,A,w,H,L){var V=a();if(O(),w&&(!y||!p())){var D=t.Layout.sliderSize(),J=ko($)*D*oo(Ye($)/D)||0;$=c.toPosition(t.Controller.toDest($%D))+J}var q=lr(V,$,1);h=1,A=q?0:A||no(Ye($-V)/Ps,_s),m=H,C=uo(A,b,Ae(f,V,$,L),1),s(An),r(co),C.start()}function b(){s(an),m&&m(),r(Gt)}function f($,A,w,H){var L=a(),V=$+(A-$)*_(H),D=(V-L)*h;T(L+D),y&&!w&&p()&&(h*=Es,Ye(D)<Ts&&x(d(p(!0)),Ls,!1,m,!0))}function O(){C&&C.cancel()}function P(){C&&!C.isPaused()&&(O(),b())}function _($){var A=n.easingFunc;return A?A($):1-Math.pow(1-$,4)}return{mount:W,destroy:O,scroll:x,cancel:P}}var en={passive:!1,capture:!0};function Rs(e,t,n){var o=Re(e),i=o.on,r=o.emit,s=o.bind,c=o.unbind,a=e.state,d=t.Move,p=t.Scroll,T=t.Controller,y=t.Elements.track,C=t.Media.reduce,m=t.Direction,h=m.resolve,W=m.orient,x=d.getPosition,b=d.exceededLimit,f,O,P,_,$,A=!1,w,H,L;function V(){s(y,wo,Wo,en),s(y,$o,Wo,en),s(y,Mr,J,en),s(y,"click",R,{capture:!0}),s(y,"dragstart",wt),i([Bt,je],D)}function D(){var v=n.drag;ne(!v),_=v==="free"}function J(v){if(w=!1,!H){var g=fe(v);ce(v.target)&&(g||!v.button)&&(T.isBusy()?wt(v,!0):(L=g?y:window,$=a.is([pn,An]),P=null,s(L,wo,q,en),s(L,$o,S,en),d.cancel(),p.cancel(),F(v)))}}function q(v){if(a.is(Gn)||(a.set(Gn),r(gr)),v.cancelable)if($){d.translate(f+Le(oe(v)));var g=G(v)>Pi,k=A!==(A=b());(g||k)&&F(v),w=!0,r(hr),wt(v)}else B(v)&&($=I(v),wt(v))}function S(v){a.is(Gn)&&(a.set(an),r(fr)),$&&(N(v),wt(v)),c(L,wo,q),c(L,$o,S),$=!1}function R(v){!H&&w&&wt(v,!0)}function F(v){P=O,O=v,f=x()}function N(v){var g=ie(v),k=Q(g),K=n.rewind&&n.rewindByDrag;C(!1),_?T.scroll(k,0,n.snap):e.is(Nn)?T.go(W(ko(g))<0?K?"<":"-":K?">":"+"):e.is(ln)&&A&&K?T.go(b(!0)?">":"<"):T.go(T.toDest(k),!0),C(!0)}function I(v){var g=n.dragMinThreshold,k=bn(g),K=k&&g.mouse||0,U=(k?g.touch:+g)||10;return Ye(oe(v))>(fe(v)?U:K)}function B(v){return Ye(oe(v))>Ye(oe(v,!0))}function ie(v){if(e.is(gn)||!A){var g=G(v);if(g&&g<Pi)return oe(v)/g}return 0}function Q(v){return x()+ko(v)*Mt(Ye(v)*(n.flickPower||600),_?1/0:t.Layout.listSize()*(n.flickMaxPages||1))}function oe(v,g){return re(v,g)-re(M(v),g)}function G(v){return Io(v)-Io(M(v))}function M(v){return O===v&&P||O}function re(v,g){return(fe(v)?v.changedTouches[0]:v)["page"+h(g?"Y":"X")]}function Le(v){return v/(A&&e.is(ln)?ds:1)}function ce(v){var g=n.noDrag;return!xn(v,"."+Rr+", ."+yo)&&(!g||!xn(v,g))}function fe(v){return typeof TouchEvent<"u"&&v instanceof TouchEvent}function We(){return $}function ne(v){H=v}return{mount:V,disable:ne,isDragging:We}}var Ws={Spacebar:" ",Right:go,Left:mo,Up:$r,Down:Tr};function ri(e){return e=Ft(e)?e:e.key,Ws[e]||e}var _i="keydown";function Is(e,t,n){var o=Re(e),i=o.on,r=o.bind,s=o.unbind,c=e.root,a=t.Direction.resolve,d,p;function T(){y(),i(je,C),i(je,y),i(_t,h)}function y(){var x=n.keyboard;x&&(d=x==="global"?window:c,r(d,_i,W))}function C(){s(d,_i)}function m(x){p=x}function h(){var x=p;p=!0,tr(function(){p=x})}function W(x){if(!p){var b=ri(x);b===a(mo)?e.go("<"):b===a(go)&&e.go(">")}}return{mount:T,destroy:C,disable:m}}var vn=Uo+"-lazy",Zn=vn+"-srcset",ks="["+vn+"], ["+Zn+"]";function Fs(e,t,n){var o=Re(e),i=o.on,r=o.off,s=o.bind,c=o.emit,a=n.lazyLoad==="sequential",d=[mn,Gt],p=[];function T(){n.lazyLoad&&(y(),i(Me,y))}function y(){Pt(p),C(),a?x():(r(d),i(d,m),m())}function C(){t.Slides.forEach(function(b){qo(b.slide,ks).forEach(function(f){var O=pt(f,vn),P=pt(f,Zn);if(O!==f.src||P!==f.srcset){var _=n.classes.spinner,$=f.parentElement,A=kn($,"."+_)||on("span",_,$);p.push([f,b,A]),f.src||wn(f,"none")}})})}function m(){p=p.filter(function(b){var f=n.perPage*((n.preloadPages||1)+1)-1;return b[1].isWithin(e.index,f)?h(b):!0}),p.length||r(d)}function h(b){var f=b[0];ft(b[1].slide,Ho),s(f,"load error",Ae(W,b)),he(f,"src",pt(f,vn)),he(f,"srcset",pt(f,Zn)),yt(f,vn),yt(f,Zn)}function W(b,f){var O=b[0],P=b[1];Tt(P.slide,Ho),f.type!=="error"&&(qt(b[2]),wn(O,""),c(ei,O,P),c(sn)),a&&x()}function x(){p.length&&h(p.shift())}return{mount:T,destroy:Ae(Pt,p),check:m}}function Ms(e,t,n){var o=Re(e),i=o.on,r=o.emit,s=o.bind,c=t.Slides,a=t.Elements,d=t.Controller,p=d.hasFocus,T=d.getIndex,y=d.go,C=t.Direction.resolve,m=a.pagination,h=[],W,x;function b(){f(),i([je,Me,io],b);var H=n.pagination;m&&wn(m,H?"":"none"),H&&(i([_t,co,Gt],w),O(),w(),r(br,{list:W,items:h},A(e.index)))}function f(){W&&(qt(m?Ht(W.children):W),Tt(W,x),Pt(h),W=null),o.destroy()}function O(){var H=e.length,L=n.classes,V=n.i18n,D=n.perPage,J=p()?d.getEnd()+1:$n(H/D);W=m||on("ul",L.pagination,a.track.parentElement),ft(W,x=vo+"--"+$()),he(W,Lt,"tablist"),he(W,rt,V.select),he(W,ni,$()===ho?"vertical":"");for(var q=0;q<J;q++){var S=on("li",null,W),R=on("button",{class:L.page,type:"button"},S),F=c.getIn(q).map(function(I){return I.slide.id}),N=!p()&&D>1?V.pageX:V.slideX;s(R,"click",Ae(P,q)),n.paginationKeyboard&&s(R,"keydown",Ae(_,q)),he(S,Lt,"presentation"),he(R,Lt,"tab"),he(R,Mn,F.join(" ")),he(R,rt,Fo(N,q+1)),he(R,rn,-1),h.push({li:S,button:R,page:q})}}function P(H){y(">"+H,!0)}function _(H,L){var V=h.length,D=ri(L),J=$(),q=-1;D===C(go,!1,J)?q=++H%V:D===C(mo,!1,J)?q=(--H+V)%V:D==="Home"?q=0:D==="End"&&(q=V-1);var S=h[q];S&&(rr(S.button),y(">"+q),wt(L,!0))}function $(){return n.paginationDirection||n.direction}function A(H){return h[d.toPage(H)]}function w(){var H=A(T(!0)),L=A(T());if(H){var V=H.button;Tt(V,Ut),yt(V,wi),he(V,rn,-1)}if(L){var D=L.button;ft(D,Ut),he(D,wi,!0),he(D,rn,"")}r(xr,{list:W,items:h},H,L)}return{items:h,mount:b,destroy:f,getAt:A,update:w}}var Ns=[" ","Enter"];function Hs(e,t,n){var o=n.isNavigation,i=n.slideFocus,r=[];function s(){e.splides.forEach(function(m){m.isParent||(d(e,m.splide),d(m.splide,e))}),o&&p()}function c(){r.forEach(function(m){m.destroy()}),Pt(r)}function a(){c(),s()}function d(m,h){var W=Re(m);W.on(_t,function(x,b,f){h.go(h.is(gn)?f:x)}),r.push(W)}function p(){var m=Re(e),h=m.on;h(Yo,y),h(Sr,C),h([Bt,je],T),r.push(m),m.emit(Zo,e.splides)}function T(){he(t.Elements.list,ni,n.direction===ho?"vertical":"")}function y(m){e.go(m.index)}function C(m,h){zo(Ns,ri(h))&&(y(m),wt(h))}return{setup:Ae(t.Media.set,{slideFocus:Rn(i)?o:i},!0),mount:s,destroy:c,remount:a}}function Bs(e,t,n){var o=Re(e),i=o.bind,r=0;function s(){n.wheel&&i(t.Elements.track,"wheel",c,en)}function c(d){if(d.cancelable){var p=d.deltaY,T=p<0,y=Io(d),C=n.wheelMinThreshold||0,m=n.wheelSleep||0;Ye(p)>C&&y-r>m&&(e.go(T?"<":">"),r=y),a(T)&&wt(d)}}function a(d){return!n.releaseWheel||e.state.is(pn)||t.Controller.getAdjacent(d)!==-1}return{mount:s}}var Os=90;function Vs(e,t,n){var o=Re(e),i=o.on,r=t.Elements.track,s=n.live&&!n.isNavigation,c=on("span",rs),a=uo(Os,Ae(p,!1));function d(){s&&(y(!t.Autoplay.isPaused()),he(r,Li,!0),c.textContent="…",i(Jo,Ae(y,!0)),i(Qo,Ae(y,!1)),i([mn,Gt],Ae(p,!0)))}function p(C){he(r,Ti,C),C?(In(r,c),a.start()):(qt(c),a.cancel())}function T(){yt(r,[$i,Li,Ti]),qt(c)}function y(C){s&&he(r,$i,C?"off":"polite")}return{mount:d,disable:y,destroy:T}}var Ds=Object.freeze({__proto__:null,Media:Xa,Direction:Za,Elements:us,Slides:ms,Layout:gs,Clones:fs,Move:ys,Controller:vs,Arrows:Cs,Autoplay:ws,Cover:$s,Scroll:As,Drag:Rs,Keyboard:Is,LazyLoad:Fs,Pagination:Ms,Sync:Hs,Wheel:Bs,Live:Vs}),js={prev:"Previous slide",next:"Next slide",first:"Go to first slide",last:"Go to last slide",slideX:"Go to slide %s",pageX:"Go to page %s",play:"Start autoplay",pause:"Pause autoplay",carousel:"carousel",slide:"slide",select:"Select a slide to show",slideLabel:"%s of %s"},zs={type:"slide",role:"region",speed:400,perPage:1,cloneStatus:!0,arrows:!0,pagination:!0,paginationKeyboard:!0,interval:5e3,pauseOnHover:!0,pauseOnFocus:!0,resetProgress:!0,easing:"cubic-bezier(0.25, 1, 0.5, 1)",drag:!0,direction:"ltr",trimSpace:!0,focusableNodes:"a, button, textarea, input, select, iframe",live:!0,classes:ls,i18n:js,reducedMotion:{speed:0,rewindSpeed:0,autoplay:"pause"}};function Ks(e,t,n){var o=t.Slides;function i(){Re(e).on([Bt,Me],r)}function r(){o.forEach(function(c){c.style("transform","translateX(-"+100*c.index+"%)")})}function s(c,a){o.style("transition","opacity "+n.speed+"ms "+n.easing),tr(a)}return{mount:i,start:s,cancel:Wo}}function qs(e,t,n){var o=t.Move,i=t.Controller,r=t.Scroll,s=t.Elements.list,c=Ae(ut,s,"transition"),a;function d(){Re(e).bind(s,"transitionend",function(C){C.target===s&&a&&(T(),a())})}function p(C,m){var h=o.toPosition(C,!0),W=o.getPosition(),x=y(C);Ye(h-W)>=1&&x>=1?n.useScroll?r.scroll(h,x,!1,m):(c("transform "+x+"ms "+n.easing),o.translate(h,!0),a=m):(o.jump(C),m())}function T(){c(""),r.cancel()}function y(C){var m=n.rewindSpeed;if(e.is(ln)&&m){var h=i.getIndex(!0),W=i.getEnd();if(h===0&&C>=W||h>=W&&C===0)return m}return n.speed}return{mount:d,start:p,cancel:T}}var Us=(function(){function e(n,o){this.event=Re(),this.Components={},this.state=Ga(nn),this.splides=[],this._o={},this._E={};var i=Ft(n)?sr(document,n):n;yn(i,i+" is invalid."),this.root=i,o=It({label:pt(i,rt)||"",labelledby:pt(i,ti)||""},zs,e.defaults,o||{});try{It(o,JSON.parse(pt(i,Uo)))}catch{yn(!1,"Invalid JSON")}this._o=Object.create(It({},o))}var t=e.prototype;return t.mount=function(o,i){var r=this,s=this.state,c=this.Components;yn(s.is([nn,to]),"Already mounted!"),s.set(nn),this._C=c,this._T=i||this._T||(this.is(Nn)?Ks:qs),this._E=o||this._E;var a=Sn({},Ds,this._E,{Transition:this._T});return Kt(a,function(d,p){var T=d(r,c,r._o);c[p]=T,T.setup&&T.setup()}),Kt(c,function(d){d.mount&&d.mount()}),this.emit(Bt),ft(this.root,as),s.set(an),this.emit(Mo),this},t.sync=function(o){return this.splides.push({splide:o}),o.splides.push({splide:this,isParent:!0}),this.state.is(an)&&(this._C.Sync.remount(),o.Components.Sync.remount()),this},t.go=function(o){return this._C.Controller.go(o),this},t.on=function(o,i){return this.event.on(o,i),this},t.off=function(o){return this.event.off(o),this},t.emit=function(o){var i;return(i=this.event).emit.apply(i,[o].concat(Ht(arguments,1))),this},t.add=function(o,i){return this._C.Slides.add(o,i),this},t.remove=function(o){return this._C.Slides.remove(o),this},t.is=function(o){return this._o.type===o},t.refresh=function(){return this.emit(Me),this},t.destroy=function(o){o===void 0&&(o=!0);var i=this.event,r=this.state;return r.is(nn)?Re(this).on(Mo,this.destroy.bind(this,o)):(Kt(this._C,function(s){s.destroy&&s.destroy(o)},!0),i.emit(Xo),i.destroy(),o&&Pt(this.splides),r.set(to)),this},ja(e,[{key:"options",get:function(){return this._o},set:function(o){this._C.Media.set(o,!0,!0)}},{key:"length",get:function(){return this._C.Slides.getLength(!0)}},{key:"index",get:function(){return this._C.Controller.getIndex()}}]),e})(),ai=Us;ai.defaults={};ai.STATES=Ka;var Ai=[[Bt,"onMounted"],[Mo,"onReady"],[_t,"onMove"],[mn,"onMoved"],[Yo,"onClick"],[dr,"onActive"],[ur,"onInactive"],[pr,"onVisible"],[mr,"onHidden"],[Me,"onRefresh"],[je,"onUpdated"],[sn,"onResize"],[lo,"onResized"],[gr,"onDrag"],[hr,"onDragging"],[fr,"onDragged"],[co,"onScroll"],[Gt,"onScrolled"],[Xo,"onDestroy"],[yr,"onArrowsMounted"],[vr,"onArrowsUpdated"],[br,"onPaginationMounted"],[xr,"onPaginationUpdated"],[Zo,"onNavigationMounted"],[Jo,"onAutoplayPlay"],[Cr,"onAutoplayPlaying"],[Qo,"onAutoplayPause"],[ei,"onLazyLoadLoaded"]];function si(...e){return e.filter(Boolean).join(" ")}function ro(e){return e!==null&&typeof e=="object"}function Bo(e,t){if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&!e.some((n,o)=>!Bo(n,t[o]));if(ro(e)&&ro(t)){const n=Object.keys(e),o=Object.keys(t);return n.length===o.length&&!n.some(i=>!Object.prototype.hasOwnProperty.call(t,i)||!Bo(e[i],t[i]))}return e===t}function Gs(e,t){return e.length===t.length&&!e.some((n,o)=>n!==t[o])}function Ys(e,t){if(e){const n=Object.keys(e);for(let o=0;o<n.length;o++){const i=n[o];if(i!=="__proto__"&&t(e[i],i)===!1)break}}return e}function Oo(e,t){const n=e;return Ys(t,(o,i)=>{Array.isArray(o)?n[i]=o.slice():ro(o)?n[i]=Oo(ro(n[i])?n[i]:{},o):n[i]=o}),n}var Xs=({children:e,className:t,...n})=>u.createElement("div",{className:si("splide__track",t),...n},u.createElement("ul",{className:"splide__list"},e)),li=class extends u.Component{constructor(){super(...arguments),this.splideRef=u.createRef(),this.slides=[]}componentDidMount(){const{options:e,extensions:t,transition:n}=this.props,{current:o}=this.splideRef;o&&(this.splide=new ai(o,e),this.bind(this.splide),this.splide.mount(t,n),this.options=Oo({},e||{}),this.slides=this.getSlides())}componentWillUnmount(){this.splide&&(this.splide.destroy(),this.splide=void 0),this.options=void 0,this.slides.length=0}componentDidUpdate(){if(!this.splide)return;const{options:e}=this.props;e&&!Bo(this.options,e)&&(this.splide.options=e,this.options=Oo({},e));const t=this.getSlides();Gs(this.slides,t)||(this.splide.refresh(),this.slides=t)}sync(e){var t;(t=this.splide)==null||t.sync(e)}go(e){var t;(t=this.splide)==null||t.go(e)}getSlides(){var e;if(this.splide){const t=(e=this.splide.Components.Elements)==null?void 0:e.list.children;return t&&Array.prototype.slice.call(t)||[]}return[]}bind(e){Ai.forEach(([t,n])=>{const o=this.props[n];typeof o=="function"&&e.on(t,(...i)=>{o(e,...i)})})}omit(e,t){return t.forEach(n=>{Object.prototype.hasOwnProperty.call(e,n)&&delete e[n]}),e}render(){const{className:e,tag:t="div",hasTrack:n=!0,children:o,...i}=this.props;return u.createElement(t,{className:si("splide",e),ref:this.splideRef,...this.omit(i,["options",...Ai.map(r=>r[1])])},n?u.createElement(Xs,null,o):o)}},ci=({children:e,className:t,...n})=>u.createElement("li",{className:si("splide__slide",t),...n},e);/*!
2
2
  * Splide.js
3
3
  * Version : 4.1.3
4
4
  * License : MIT
5
5
  * Copyright: 2022 Naotoshi Fujita
6
- */const al="RichTextRenderer-module__link___BWeZ2",sl={link:al},ll=e=>{const t=e.trim();return!t||t.startsWith('"')&&t.endsWith('"')||t.startsWith("'")&&t.endsWith("'")?!1:t.split(/\s+/g).filter(Boolean).some(i=>/^\d/.test(i))},Nn=e=>e&&e.split(",").map(n=>n.trim()).filter(Boolean).map(n=>ll(n)?`"${n.replace(/"/g,'\\"')}"`:n).join(", ");function ft(e){const{color:t,...n}=e;return n}function Ue(e,t){var a,s,o;const{fontSize:n,lineHeight:i}=e;return{fontFamily:Nn(e.fontSettings.fontFamily),fontWeight:e.fontSettings.fontWeight,fontStyle:e.fontSettings.fontStyle,letterSpacing:E.scalingValue(e.letterSpacing,t),wordSpacing:E.scalingValue(e.wordSpacing,t),fontSize:E.scalingValue(n,t),lineHeight:i!==void 0?E.scalingValue(i,t):void 0,textTransform:(a=e.textAppearance)==null?void 0:a.textTransform,textDecoration:(s=e.textAppearance)==null?void 0:s.textDecoration,fontVariant:(o=e.textAppearance)==null?void 0:o.fontVariant,textAlign:e.textAlign,color:e.color}}const sn=({content:e})=>{const t=n=>n.map((i,a)=>i.type==="link"?r.jsx("a",{className:sl.link,href:i.value,target:i.target,children:t(i.children)},a):r.jsx("span",{style:cl(i),children:i.text},a));return r.jsx(r.Fragment,{children:e.map((n,i)=>{const a=n.children;return r.jsx("div",{children:t(a)},i)})})};function cl(e){return{...e.fontFamily&&{fontFamily:Nn(e.fontFamily)},...e.fontWeight&&{fontWeight:e.fontWeight},...e.fontStyle&&{fontStyle:e.fontStyle},...e.textDecoration&&{textDecoration:e.textDecoration},...e.textTransform&&{textTransform:e.textTransform},...e.fontVariant&&{fontVariant:e.fontVariant},...e.verticalAlign&&{verticalAlign:e.verticalAlign,lineHeight:"0px"}}}const dl="SvgImage-module__svg___q3xE-",ul="SvgImage-module__img___VsTm-",_o={svg:dl,img:ul},pl=e=>{const t=e.trim();return t.startsWith("data:image/svg+xml")?!0:(t.split(/[?#]/)[0]??t).endsWith(".svg")},ml=e=>`url("${e.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}")`,yt=({url:e,fill:t="#000000",hoverFill:n="#CCCCCC",className:i="",style:a})=>{const[s,o]=c.useState(()=>typeof window>"u"?!0:CSS.supports("mask-image",'url("")')||CSS.supports("-webkit-mask-image",'url("")'));return c.useEffect(()=>{if(typeof window<"u"&&window.CSS){const d=CSS.supports("mask-image",'url("")')||CSS.supports("-webkit-mask-image",'url("")');o(d)}},[]),!pl(e)||!s?r.jsx("img",{src:e,alt:"",className:Ie(_o.img,i),style:a}):r.jsx("span",{"data-supports-mask":s,className:Ie(_o.svg,i),style:{"--svg":ml(e),"--fill":t,"--hover-fill":n,...a??{}}})},gl={"top-left":de.topLeftAlignment,"top-center":de.topCenterAlignment,"top-right":de.topRightAlignment,"middle-left":de.middleLeftAlignment,"middle-center":de.middleCenterAlignment,"middle-right":de.middleRightAlignment,"bottom-left":de.bottomLeftAlignment,"bottom-center":de.bottomCenterAlignment,"bottom-right":de.bottomRightAlignment};function hl({settings:e,content:t,styles:n,isEditor:i}){const[a,s]=c.useState(null),{widthSettings:o,fontSettings:d,letterSpacing:l,textAlign:u,wordSpacing:p,fontSizeLineHeight:I,textAppearance:b,color:w}=n.imageCaption,[f,h]=c.useState(void 0),[T,L]=c.useState(null),[C,m]=c.useState(0),[z,j]=c.useState(0),{direction:R,transition:x,controls:A,pagination:S,imageCaption:K,triggers:v}=e,D=c.useRef(x.type),{x:W,y:q}=e.controls.offset,G=$=>{a&&a.go($)};return c.useEffect(()=>{if(!T)return;const $=new ResizeObserver(H=>{if(!a)return;const[_]=H;h({width:Math.round(_.contentRect.width),height:Math.round(_.contentRect.height)})});return $.observe(T),()=>$.unobserve(T)},[T]),c.useEffect(()=>{!a||D.current===x.type||(j($=>$+1),D.current=x.type)},[x.type]),r.jsx("div",{className:Ie(de.wrapper,{[de.editor]:i}),ref:L,children:r.jsxs("div",{className:de.sliderInner,style:{width:f?f.width:"100%",height:f?f.height:"100%",backgroundColor:x.backgroundColor&&x.type==="fade in"?x.backgroundColor:"transparent"},children:[e.imageCaption.isActive&&r.jsx("div",{className:Ie(de.captionBlock),children:r.jsx("div",{className:de.captionTextWrapper,children:t.map(($,H)=>r.jsx("div",{className:Ie(de.captionText,gl[K.alignment],{[de.withPointerEvents]:H===C&&i,[de.active]:H===C}),style:{fontFamily:Nn(d.fontFamily),fontWeight:d.fontWeight,fontStyle:d.fontStyle,width:o.sizing==="auto"?"max-content":E.scalingValue(o.width,i),letterSpacing:E.scalingValue(l,i),wordSpacing:E.scalingValue(p,i),textAlign:u,fontSize:E.scalingValue(I.fontSize,i),lineHeight:E.scalingValue(I.lineHeight,i),textTransform:b.textTransform??"none",textDecoration:b.textDecoration??"none",fontVariant:b.fontVariant??"normal",color:w,transitionDuration:x.duration?`${Math.round(parseInt(x.duration)/2)}ms`:"500ms"},children:r.jsx("div",{"data-styles":"imageCaption",className:de.captionTextInner,style:{"--link-hover-color":K.linkHoverColor,"--link-color":K.linkColor,position:"relative",top:E.scalingValue(K.offset.y,i),left:E.scalingValue(K.offset.x,i)},children:r.jsx(sn,{content:$.imageCaption})})},H))})}),r.jsx(co,{onMove:$=>{m($.index)},ref:s,options:{arrows:!1,speed:x.duration?parseInt(x.duration):500,autoplay:v.autoPlay!==null,...v.autoPlay!==null&&{interval:parseInt(v.autoPlay)*1e3},direction:R==="horiz"||x.type==="fade in"?"ltr":"ttb",pagination:!1,drag:v.triggersList.drag,perPage:1,width:f?f.width:"100%",height:f?f.height:"100%",type:x.type==="fade in"?"fade":"loop",rewind:!0},children:t.map(($,H)=>r.jsx(uo,{children:r.jsx("div",{className:de.sliderItem,children:r.jsx("div",{className:de.imgWrapper,children:r.jsx("img",{className:Ie(de.sliderImage,{[de.contain]:$.image.objectFit==="contain",[de.cover]:$.image.objectFit==="cover"}),src:$.image.url,alt:$.image.name??""})})})},H))},z),A.isActive&&r.jsxs(r.Fragment,{children:[r.jsx("div",{className:Ie(de.arrow,{[de.arrowVertical]:R==="vert",[de.hoverArrow]:A.show==="on hover"}),style:{color:A.color,"--arrow-hover-color":A.hover},children:r.jsxs("button",{onClick:()=>{G("-1")},className:de.arrowInner,style:{transform:`translate(${E.scalingValue(W,i)}, ${E.scalingValue(q*(R==="horiz"?1:-1),i)}) scale(${e.controls.scale/100}) rotate(${R==="horiz"?"0deg":"90deg"})`},children:[A.arrowsImgUrl&&r.jsx(yt,{url:A.arrowsImgUrl,fill:A.color,hoverFill:A.hover,className:Ie(de.arrowImg,de.mirror)}),!A.arrowsImgUrl&&r.jsx(Wo,{color:A.color,className:Ie(de.arrowIcon,de.arrowImg,de.mirror)})]})}),r.jsx("div",{className:Ie(de.arrow,de.nextArrow,{[de.arrowVertical]:R==="vert",[de.hoverArrow]:A.show==="on hover"}),style:{color:A.color,"--arrow-hover-color":A.hover},children:r.jsxs("button",{className:de.arrowInner,onClick:()=>G("+1"),style:{transform:`translate(${E.scalingValue(W*(R==="horiz"?-1:1),i)}, ${E.scalingValue(q,i)}) scale(${e.controls.scale/100}) rotate(${R==="horiz"?"0deg":"90deg"})`},children:[A.arrowsImgUrl&&r.jsx(yt,{url:A.arrowsImgUrl,fill:A.color,hoverFill:A.hover,className:de.arrowImg}),!A.arrowsImgUrl&&r.jsx(Wo,{color:A.color,className:Ie(de.arrowIcon,de.arrowImg)})]})})]}),v.triggersList.click&&r.jsx("div",{className:de.clickOverlay,onClick:()=>{a&&a.go("+1")}}),S.isActive&&r.jsx("div",{className:Ie(de.pagination,{[de.paginationInsideBottom]:S.position==="inside-1"&&R==="horiz",[de.paginationInsideTop]:S.position==="inside-2"&&R==="horiz",[de.paginationOutsideBottom]:S.position==="outside-1"&&R==="horiz",[de.paginationOutsideTop]:S.position==="outside-2"&&R==="horiz",[de.paginationInsideLeft]:S.position==="inside-1"&&R==="vert",[de.paginationInsideRight]:S.position==="inside-2"&&R==="vert",[de.paginationOutsideLeft]:S.position==="outside-1"&&R==="vert",[de.paginationOutsideRight]:S.position==="outside-2"&&R==="vert",[de.paginationVertical]:R==="vert"}),children:r.jsx("div",{className:de.paginationInner,style:{backgroundColor:S.colors[2],transform:`scale(${S.scale/100}) translate(${E.scalingValue(S.offset.x,i)}, ${E.scalingValue(S.offset.y,i)}) rotate(${R==="horiz"?"0deg":"90deg"})`},children:t.map(($,H)=>r.jsx("button",{onClick:()=>{a&&a.go(H)},className:Ie(de.paginationItem),children:r.jsx("div",{className:Ie(de.dot,{[de.activeDot]:H===C}),style:{backgroundColor:H===C?S.colors[0]:S.colors[1],"--pagination-hover-color":S.hover}})},H))})})]})})}function Wo({color:e,className:t}){return r.jsx("svg",{viewBox:"0 0 10 18",className:t,children:r.jsx("g",{id:"Symbols",stroke:"none",strokeWidth:"1",fillRule:"evenodd",children:r.jsx("path",{d:"M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z",id:"Shape-Copy",fill:e,transform:"translate(5, 9) rotate(-90) translate(-5, -9)"})})})}const fl={element:hl,id:"control-slider",name:"Slider",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Slider.mp4"},defaultSize:{d:{width:400,height:400},t:{width:400,height:400},m:{width:300,height:300}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.controls.arrowsImgUrl"}]},fontSettingsPaths:{content:[],parameters:[{path:"styles.imageCaption.fontSettings"}]},schema:{type:"object",properties:{settings:{type:"object",display:{type:"settings-block"},properties:{triggers:{title:"triggers",icon:"target",tooltip:"Triggers",type:"object",properties:{triggersList:{type:"object",display:{type:"toggle-ratio-group"},properties:{click:{type:"boolean"},drag:{type:"boolean"}}},autoPlay:{type:["string","null"],label:"Auto",display:{type:"step-selector"},enum:[null,"1s","2s","3s","4s","5s"]}}},direction:{icon:"horizontal-resize",tooltip:"Direction",type:"string",display:{type:"ratio-group"},enum:["horiz","vert"]},transition:{title:"transit",icon:"transition",tooltip:"Transition",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["slide","fade in"]},backgroundColor:{type:["string","null"],title:"BG Color",display:{visible:!1,type:"settings-color-picker",format:"single"}},duration:{type:"string",label:"icon:hourglass",display:{type:"step-selector"},enum:["100ms","250ms","500ms","1000ms","1500ms","2000ms"]}}},controls:{title:"controls",icon:"controls",tooltip:"Controls",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},arrowsImgUrl:{type:["string","null"],display:{type:"settings-image-input"}},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},scale:{type:"number",title:"scale",min:50,max:600,display:{type:"range-control"}},color:{title:"color",type:"string",display:{type:"settings-color-picker",format:"single"}},hover:{title:"hover",type:"string",display:{type:"settings-color-picker",format:"single"}},show:{title:"Show",type:"string",display:{type:"ratio-group"},enum:["always","on hover"]}}},pagination:{title:"nav",icon:"pagination",tooltip:"Navigation",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},position:{display:{type:"socket",direction:"horizontal"},type:"string",enum:["outside-1","outside-2","inside-1","inside-2"]},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},scale:{type:"number",title:"scale",min:10,max:400,display:{type:"range-control"}},colors:{display:{type:"settings-color-picker",format:"multiple"},title:"color",type:"array",items:{type:"string"}},hover:{title:"hover",type:"string",display:{type:"settings-color-picker",format:"single"}}}},imageCaption:{title:"Caption",icon:"text-icon",tooltip:"Caption",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},alignment:{type:"string",display:{type:"align-grid"},enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},linkColor:{title:"Link",type:"string",display:{type:"settings-color-picker",format:"single"}},linkHoverColor:{title:"Link Hov",type:"string",display:{type:"settings-color-picker",format:"single"}}}}},default:{triggers:{triggersList:{click:!1,drag:!0},autoPlay:null},controls:{isActive:!0,arrowsImgUrl:null,offset:{x:0,y:0},scale:100,color:"#000000",hover:"#cccccc",show:"always"},transition:{type:"slide",duration:"500ms",backgroundColor:null},pagination:{isActive:!0,scale:50,position:"inside-1",offset:{x:0,y:0},colors:["#cccccc","#cccccc","#000000"],hover:"#cccccc"},direction:"horiz",imageCaption:{offset:{x:0,y:0},isActive:!0,alignment:"middle-center",linkColor:"#cccccc",linkHoverColor:"#cccccc"}},displayRules:[{if:{name:"direction",value:"vert"},then:{name:"properties.pagination.properties.position.display.direction",value:"vertical"}},{if:{name:"transition.type",value:"fade in"},then:{name:"properties.transition.properties.backgroundColor.display.visible",value:!0}}]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},imageCaption:{placeholder:"Add Caption...",label:"Description",display:{type:"rich-text"}}},required:["image"]},default:[{image:{objectFit:"cover",url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",name:"Slider-1.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-2.png",name:"Slider-2.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-3.png",name:"Slider-3.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]}]},styles:{type:"object",properties:{imageCaption:{dataName:"caption",type:"object",properties:{fontSettings:{type:"object",display:{type:"font-settings"},properties:{fontFamily:{type:"string"},fontWeight:{type:"number"},fontStyle:{type:"string"}}},widthSettings:{display:{type:"text-width-control"},type:"object",properties:{width:{type:"number"},sizing:{type:"string",enum:["auto","manual"]}}},fontSizeLineHeight:{type:"object",display:{type:"font-size-line-height"},properties:{fontSize:{type:"number"},lineHeight:{type:"number"}}},letterSpacing:{display:{type:"letter-spacing-input"},type:"number"},wordSpacing:{display:{type:"word-spacing-input"},type:"number"},textAlign:{display:{type:"text-align-control"},type:"string",enum:["left","center","right","justify"]},textAppearance:{display:{type:"text-appearance"},properties:{textTransform:{type:"string",enum:["none","uppercase","lowercase","capitalize"]},textDecoration:{type:"string",enum:["none","underline"]},fontVariant:{type:"string",enum:["normal","small-caps"]}}},color:{display:{type:"style-panel-color-picker"},type:"string"}}}},default:{imageCaption:{widthSettings:{width:.13,sizing:"auto"},fontSettings:{fontFamily:"Arial",fontWeight:400,fontStyle:"normal"},fontSizeLineHeight:{fontSize:.02,lineHeight:.02},letterSpacing:0,wordSpacing:0,textAlign:"left",textAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},color:"#000000"}}}},required:["settings","content","styles"]}},yl="ImageRevealSlider-module__imageRevealSlider___UE5Ob",vl="ImageRevealSlider-module__image___Qjt-e",bl="ImageRevealSlider-module__link___N-iLG",xl="ImageRevealSlider-module__cursor___2U03d",Yt={imageRevealSlider:yl,image:vl,link:bl,cursor:xl};function ko(e,t,n){for(const i of n){const a=new Image;a.src=i.url;const s=i.width?Number.parseFloat(i.width):a.naturalWidth,o=a.naturalHeight/a.naturalWidth*s,d=s/2,l=o/2;if(e>=i.x-d&&e<=i.x+d&&t>=i.y-l&&t<=i.y+l)return!0}return!1}function $i(e){return new Promise(t=>{const n=new Image;n.src=e,n.onload=()=>{t({width:n.naturalWidth,height:n.naturalHeight})}})}async function Cl(e,t,n,i){let a,s;if(t==="custom"){a=n;const o=await $i(e);s=o.height/o.width*a}else if(t==="random"){a=Math.random()*(i.max-i.min)+i.min;const o=await $i(e);s=o.height/o.width*a}else{const o=await $i(e);a=o.width,s=o.height}return{width:a,height:s,finalWidth:`${a}px`}}function Sl({settings:e,content:t,isEditor:n}){const[i,a]=c.useState(null),[s,o]=c.useState([]),[d,l]=c.useState(0),u=c.useRef(0),[p,I]=c.useState({x:0,y:0}),[b,w]=c.useState(1),[f,h]=c.useState("none"),T=c.useRef({x:0,y:0}),[L,C]=c.useState(!1),{sizeType:m,imageWidth:z,randomRangeImageWidth:j}=e.imageSize,{revealPosition:R,visible:x}=e.position,{cursorType:A,target:S,defaultCursorScale:K,defaultCursor:v,hoverCursorScale:D,hoverCursor:W}=e.cursor;c.useEffect(()=>{if(!i)return;const $=(B,k)=>{const P=i.getBoundingClientRect(),te=B-P.left,ae=k-P.top;if(I({x:te,y:ae}),A==="system"){h("none"),w(1);return}const re=te,U=ae,N=document.elementFromPoint(P.left+re,P.top+U);if(N&&N.closest("a")){h("none"),w(1);return}const oe=ko(re,U,s)||S==="area"?{img:W??"none",scale:D}:{img:v??"none",scale:K};h(oe.img),w(oe.scale)},H=B=>{B.stopPropagation(),T.current={x:B.clientX,y:B.clientY},$(B.clientX,B.clientY)},_=()=>{L&&$(T.current.x,T.current.y)};return i.addEventListener("mousemove",H),window.addEventListener("scroll",_,!0),()=>{i.removeEventListener("mousemove",H),window.removeEventListener("scroll",_,!0)}},[i,L,p,A,S,W,v,D,K,s]),c.useEffect(()=>{L||(h("none"),w(0))},[L]);const q=async($,H,_,B={})=>{const{width:k,height:P,finalWidth:te}=await Cl($.image.url,m,z,j);let ae=0,re=0;R==="same"?(ae=H/2,re=_/2):(ae=B.x??Math.random()*H,re=B.y??Math.random()*_);const U=Math.min(Math.max(ae,k/2),H-k/2),N=Math.min(Math.max(re,P/2),_-P/2);return{id:u.current++,url:$.image.url,link:$.link,name:$.image.name,x:U,y:N,width:te}};c.useEffect(()=>{if(!i||t.length===0)return;const $=i.getBoundingClientRect(),H=$.width,_=$.height,B=[];(async()=>{const P=t[0],te=await q(P,H,_);B.push(te),o(B),l(1)})()},[m,z,j,R,i]),c.useEffect(()=>{x==="last One"&&o($=>$.length>0?[$[$.length-1]]:[])},[x]);const G=async $=>{if(!i)return;const H=i.getBoundingClientRect(),_=$.clientX-H.left,B=$.clientY-H.top;if(S==="image"&&!ko(_,B,s))return;let k=0,P=0;R==="on Click"?(k=_,P=B):R==="same"?(k=H.width/2,P=H.height/2):(k=Math.random()*H.width,P=Math.random()*H.height);const te=t[d],ae=await q(te,H.width,H.height,{x:k,y:P});o(re=>x==="all"?[...re,ae]:[ae]),l(re=>re>=t.length-1?0:re+1)};return r.jsxs("div",{ref:a,onClick:G,onMouseEnter:()=>C(!0),onMouseLeave:()=>C(!1),className:Yt.imageRevealSlider,style:{cursor:f==="none"?"default":"none"},children:[s.map($=>r.jsx("div",{className:Yt.wrapper,style:{top:`${$.y}px`,left:`${$.x}px`,position:"absolute",transform:"translate(-50%, -50%)",width:$.width??"auto",height:"auto",cursor:f==="none"?"default":"none"},children:S==="area"&&$.link?r.jsx("a",{href:$.link,target:"_blank",className:Yt.link,children:r.jsx("img",{src:$.url,alt:$.name,className:Yt.image},$.id)}):r.jsx("img",{src:$.url,alt:$.name,className:Yt.image},$.id)},$.id)),L&&r.jsx("div",{className:Yt.cursor,style:{left:`${p.x}px`,top:`${p.y}px`,transform:`translate(-50%, -50%) scale(${b})`,backgroundImage:`url('${f}')`,backgroundSize:"cover",backgroundPosition:"center",position:"absolute",pointerEvents:"none"}})]})}const wl={element:Sl,id:"control-image-reveal",name:"Click Gallery",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Click_Gallery.mp4"},defaultSize:{d:{width:"100%",height:"100%"},t:{width:"100%",height:"100%"},m:{width:"100%",height:"100%"}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.cursor.defaultCursor"},{path:"settings.cursor.hoverCursor"}]},fontSettingsPaths:{content:[],parameters:[]},schema:{type:"object",properties:{settings:{type:"object",display:{type:"settings-block"},properties:{imageSize:{title:"IMG SIZE",icon:"size",tooltip:"IMG SIZE",type:"object",properties:{sizeType:{type:"string",display:{type:"ratio-group"},enum:["as Is","custom","random"]},imageWidth:{type:"number",label:"W",display:{type:"numeric-input",visible:!1}},randomRangeImageWidth:{type:"object",display:{type:"random-range-controls",visible:!1},properties:{min:{type:"number"},max:{type:"number"}}}}},cursor:{title:"cursor",icon:"cursor",tooltip:"cursor",type:"object",properties:{cursorType:{type:"string",display:{type:"ratio-group"},enum:["system","custom"]},target:{type:"string",title:"Target",display:{type:"ratio-group"},enum:["area","image"]},defaultCursor:{type:["string","null"],title:"Default",display:{type:"settings-image-input",visible:!1}},defaultCursorScale:{type:"number",title:"Scale",min:1,max:5,step:.1,display:{type:"range-control",visible:!1}},hoverCursor:{type:["string","null"],title:"Hover",display:{type:"settings-image-input",visible:!1}},hoverCursorScale:{type:"number",title:"Scale",min:1,max:5,step:.1,display:{type:"range-control",visible:!1}}}},position:{title:"position",icon:"transition",tooltip:"Position",type:"object",properties:{revealPosition:{type:"string",display:{type:"ratio-group"},enum:["random","same","on Click"]},visible:{type:"string",title:"Visible",display:{type:"ratio-group"},enum:["all","last One"]}}}},default:{imageSize:{sizeType:"custom",imageWidth:500,randomRangeImageWidth:{min:100,max:1e3}},cursor:{cursorType:"system",target:"area",defaultCursor:null,defaultCursorScale:2,hoverCursor:null,hoverCursorScale:2},position:{revealPosition:"random",visible:"all"}},displayRules:[{if:{name:"imageSize.sizeType",value:"custom"},then:{name:"properties.imageSize.properties.imageWidth.display.visible",value:!0}},{if:{name:"imageSize.sizeType",value:"random"},then:{name:"properties.imageSize.properties.randomRangeImageWidth.display.visible",value:!0}},{if:[{name:"cursor.target",value:"image"},{name:"cursor.cursorType",value:"custom"}],then:{name:"properties.cursor.properties.defaultCursor.display.visible",value:!0}},{if:[{name:"cursor.target",value:"image"},{name:"cursor.cursorType",value:"custom"},{name:"cursor.defaultCursor",value:null,isNotEqual:!0}],then:{name:"properties.cursor.properties.defaultCursorScale.display.visible",value:!0}},{if:{name:"cursor.cursorType",value:"custom"},then:{name:"properties.cursor.properties.hoverCursor.display.visible",value:!0}},{if:[{name:"cursor.cursorType",value:"custom"},{name:"cursor.hoverCursor",value:null,isNotEqual:!0}],then:{name:"properties.cursor.properties.hoverCursorScale.display.visible",value:!0}}]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{isObjectFitEditable:!1,type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},link:{label:"URL",placeholder:"Enter link...",display:{type:"text-input"}}},required:["image"]},default:[{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQK9211QXBE9W284ZNKB8.png",name:"Slider-1.png"},link:""},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQMFT72JD18WKP0Q2DVAT.png",name:"Slider-2.png"},link:""},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQNEVRXPSRX5K1YTMJQY9.png",name:"Slider-3.png"},link:""},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQP84JKRDT7WNWDQZR4Y9.png",name:"Slider-4.png"},link:""}]}}}},$l="LightBox-module__hidden___9s-9x",Tl="LightBox-module__heroImage___sTxNF",Ll="LightBox-module__background___rm9ml",El="LightBox-module__editor___4ACaY",Il="LightBox-module__contentStyle___Bgnsq",Pl="LightBox-module__imageStyle___tLIlB",Rl="LightBox-module__imgWrapper___LuFUp",Al="LightBox-module__contain___8-yaS",Ml="LightBox-module__cover___hNvOG",_l="LightBox-module__caption___b6L2I",Wl="LightBox-module__captionTextInner___rCGNH",kl="LightBox-module__lightboxSplide___XFuWC",Fl="LightBox-module__arrow___iz38X",Nl="LightBox-module__arrowVertical___Zfz81",Hl="LightBox-module__nextArrow___zkAQN",Bl="LightBox-module__arrowInner___p48sW",Ol="LightBox-module__arrowIcon___3VaFf",jl="LightBox-module__arrowImg___pNV88",Dl="LightBox-module__mirror___pjeXc",Vl="LightBox-module__thumbsWrapper___GB-nU",zl="LightBox-module__thumbsContainerVertical___wttk5",Kl="LightBox-module__thumbsContainer___osSma",Gl="LightBox-module__thumbsAlignStart___MO6tY",ql="LightBox-module__thumbsAlignCenter___Q4sUx",Ul="LightBox-module__thumbsAlignEnd___p4y9R",Xl="LightBox-module__thumbItem___HvnF3",Yl="LightBox-module__closeButton___g2khP",Jl="LightBox-module__fadeIn___0m5GW",Zl="LightBox-module__slideInLeft___gPYwC",Ql="LightBox-module__slideInRight___S-pPp",ec="LightBox-module__slideInTop___DFdAj",tc="LightBox-module__slideInBottom___m27kZ",nc="LightBox-module__fadeOut___55qBR",ic="LightBox-module__slideOutLeft___NvU7P",oc="LightBox-module__slideOutRight___SK7eC",rc="LightBox-module__slideOutTop___Vgg0z",ac="LightBox-module__slideOutBottom___nJ0Ef",sc="LightBox-module__scaleSlide___vZriG",ne={hidden:$l,heroImage:Tl,background:Ll,editor:El,contentStyle:Il,imageStyle:Pl,imgWrapper:Rl,contain:Al,cover:Ml,caption:_l,captionTextInner:Wl,lightboxSplide:kl,arrow:Fl,arrowVertical:Nl,nextArrow:Hl,arrowInner:Bl,arrowIcon:Ol,arrowImg:jl,mirror:Dl,thumbsWrapper:Vl,thumbsContainerVertical:zl,thumbsContainer:Kl,thumbsAlignStart:Gl,thumbsAlignCenter:ql,thumbsAlignEnd:Ul,thumbItem:Xl,closeButton:Yl,fadeIn:Jl,slideInLeft:Zl,slideInRight:Ql,slideInTop:ec,slideInBottom:tc,fadeOut:nc,slideOutLeft:ic,slideOutRight:oc,slideOutTop:rc,slideOutBottom:ac,scaleSlide:sc},Vn=(e,t,n)=>{const i={},[a,s]=e.split("-");return a==="top"?(i.top="0",i.bottom="auto"):a==="middle"?(i.top="50%",i.bottom="auto"):a==="bottom"&&(i.top="auto",i.bottom="0"),s==="left"?(i.left="0",i.right="auto"):s==="center"?(i.left="50%",i.right="auto"):s==="right"&&(i.left="auto",i.right="0"),a==="middle"&&s==="center"?i.transform=`translate(calc(-50% + ${E.scalingValue(t.x,n)}), calc(-50% + ${E.scalingValue(t.y,n)}))`:a==="middle"?i.transform=`translate(${E.scalingValue(t.x,n)}, calc(-50% + ${E.scalingValue(t.y,n)}))`:s==="center"?i.transform=`translate(calc(-50% + ${E.scalingValue(t.x,n)}), ${E.scalingValue(t.y,n)})`:i.transform=`translate(${E.scalingValue(t.x,n)}, ${E.scalingValue(t.y,n)})`,i};function Kr(e){const t=window.getComputedStyle(e);return{top:parseFloat(t.paddingTop)||0,right:parseFloat(t.paddingRight)||0,bottom:parseFloat(t.paddingBottom)||0,left:parseFloat(t.paddingLeft)||0}}function Fo(e){const t=e.getBoundingClientRect(),n=Kr(e),i=Math.max(0,t.width-n.left-n.right),a=Math.max(0,t.height-n.top-n.bottom),s=e.naturalWidth,o=e.naturalHeight,d=i/a,l=s/o;let u,p;l>d?(u=i,p=i/l):(p=a,u=a*l);const I=t.left+n.left,b=t.top+n.top,w=(i-u)/2+I,f=(a-p)/2+b;return{x:w,y:f,width:u,height:p}}function No(e){const t=e.getBoundingClientRect(),n=Kr(e);return{left:t.left+n.left,right:t.right-n.right,top:t.top+n.top,bottom:t.bottom-n.bottom}}function Ho(e){const t=e.match(/rgba?\(([^)]+)\)/);if(t){const i=t[1].split(",").map(a=>parseFloat(a.trim()));return i.length===4?i[3]:1}const n=e.match(/^#([0-9a-fA-F]{8})$/);if(n){const i=n[1].substring(6,8);return parseInt(i,16)/255}return e.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/),1}function lc(e,t){const n=(()=>{if(e==="fade in")return ne.fadeIn;if(e==="slide in"||e==="mix")switch(t){case"left":return ne.slideInLeft;case"right":return ne.slideInRight;case"top":return ne.slideInTop;case"bottom":return ne.slideInBottom;default:return ne.slideInRight}return ne.fadeIn})(),i=(()=>{if(e==="fade in"||e==="mix")return ne.fadeIn;if(e==="slide in")switch(t){case"left":return ne.slideInLeft;case"right":return ne.slideInRight;case"top":return ne.slideInTop;case"bottom":return ne.slideInBottom;default:return ne.slideInRight}return ne.fadeIn})(),a=(()=>{if(e==="fade in"||e==="mix")return ne.fadeOut;if(e==="slide in")switch(t){case"left":return ne.slideOutLeft;case"right":return ne.slideOutRight;case"top":return ne.slideOutTop;case"bottom":return ne.slideOutBottom;default:return ne.slideOutRight}return ne.fadeOut})(),s=(()=>{if(e==="fade in")return ne.fadeOut;if(e==="slide in"||e==="mix")switch(t){case"left":return ne.slideOutLeft;case"right":return ne.slideOutRight;case"top":return ne.slideOutTop;case"bottom":return ne.slideOutBottom;default:return ne.slideOutRight}return ne.fadeOut})();return{appearClass:n,backdropAppearClass:i,backdropDisappearClass:a,disappearClass:s}}const cc=({settings:e,content:t,styles:n,portalId:i,activeEvent:a,isEditor:s,isPreviewMode:o})=>{const[d,l]=c.useState(!1),{url:u}=e.thumbnailBlock.cover;return c.useEffect(()=>{a==="close"&&l(!1),a==="open"&&l(!0)},[a]),r.jsxs(r.Fragment,{children:[r.jsx("img",{src:u,alt:"Cover",className:ne.heroImage,onClick:()=>l(!0)}),r.jsx(dc,{isOpen:d,onClose:()=>l(!1),content:t,settings:e,lightboxStyles:n,portalId:i,isEditor:s})]})},dc=({isOpen:e,onClose:t,content:n,lightboxStyles:i,settings:a,portalId:s,isEditor:o,metadata:d})=>{var y;const[l,u]=c.useState(0),[p,I]=c.useState(0),[b,w]=c.useState(!1),[f,h]=c.useState(!1),[T,L]=c.useState({}),C=c.useRef(null),m=c.useRef(null),z=c.useRef(null),j=c.useRef(!1),R=c.useRef(null),x=c.useRef(null),A=c.useRef(null),S=c.useRef(null),K=c.useRef(!1),v=c.useRef(null),[D,W]=c.useState(!1),{appear:q,triggers:G,slider:$,thumbnail:H,controls:_,area:B,caption:k,layout:P}=a.lightboxBlock,{appearClass:te,backdropAppearClass:ae,backdropDisappearClass:re,disappearClass:U}=lc(q.type,q.direction),N=(d==null?void 0:d.itemId)??null;c.useEffect(()=>{const g=()=>{setTimeout(()=>{var J,Q;(Q=(J=C.current)==null?void 0:J.splide)==null||Q.refresh()},16)},V=()=>{I(J=>J+1)};return window.addEventListener("ArticleEditor.Layout:change",g),window.addEventListener("ArticleEditor.ComponentContent:change",V),()=>{window.removeEventListener("ArticleEditor.Layout:change",g),window.removeEventListener("ArticleEditor.ComponentContent:change",V)}},[]),c.useEffect(()=>{if(!e||!H.isActive){W(!1);return}const g=v.current;if(!g)return;const V=()=>{$.direction==="horiz"?W(g.scrollWidth>g.clientWidth):W(g.scrollHeight>g.clientHeight)};V();const J=new ResizeObserver(V);return J.observe(g),()=>J.disconnect()},[e,H.isActive,n.length,T,$.direction]);const oe=c.useCallback(()=>{const g=window.matchMedia("(max-width: 768px)").matches,V=Ho(B.color);g&&!o&&V>.9&&(document.body.style.backgroundColor=""),w(!0),j.current=!0;const J=Q=>{Q.target===R.current&&Q.animationName&&(R.current&&x.current&&R.current.removeEventListener("animationend",x.current),x.current=null,j.current&&(j.current=!1,t()),w(!1))};R.current&&(x.current=J,R.current.addEventListener("animationend",J))},[t,B.color,o]),ye=(g,V,J)=>{var Q,M;if(g){if(G.type==="click"&&G.switch==="image")G.repeat==="close"&&l===n.length-1?oe():(Q=C.current)==null||Q.go("+1");else if(G.type==="click"&&G.switch==="50/50"){const F=g.getBoundingClientRect(),O=V-F.left,ie=J-F.top,pe=F.width,le=F.height;let he;$.direction==="horiz"?he=O<pe/2?"-1":"+1":he=ie<le/2?"-1":"+1",(M=C.current)==null||M.go(he)}}},ce=g=>{if(K.current){K.current=!1;return}const V=n[l],J=(V==null?void 0:V.image.objectFit)==="cover";let Q,M;if("changedTouches"in g&&g.changedTouches.length>0)Q=g.changedTouches[0].clientX,M=g.changedTouches[0].clientY;else if("clientX"in g)Q=g.clientX,M=g.clientY;else return;let F;if(J&&z.current){const O=No(z.current);F=Q>=O.left&&Q<=O.right&&M>=O.top&&M<=O.bottom}else{const O=z.current?Fo(z.current):null;if(!O){g.target===g.currentTarget&&oe();return}F=Q>=O.x&&Q<=O.x+O.width&&M>=O.y&&M<=O.y+O.height}F?ye(z.current,Q,M):oe()},ge=g=>{const V=g.target;(V.classList.contains(ne.thumbsWrapper)||V.classList.contains(ne.thumbsContainer))&&ce(g)};c.useEffect(()=>{if(!e)return;const g=V=>{var J,Q;if(V.key==="Escape"){oe();return}if(V.key==="ArrowRight"){u(M=>(M+1)%Math.max(n.length,1)),(J=C.current)==null||J.go("+1");return}V.key==="ArrowLeft"&&(u(M=>(M-1+Math.max(n.length,1))%Math.max(n.length,1)),(Q=C.current)==null||Q.go("-1"))};return window.addEventListener("keydown",g),()=>{window.removeEventListener("keydown",g)}},[e,oe,n.length]),c.useEffect(()=>{if(e){if(u(0),I(V=>V+1),j.current=!1,w(!1),h(!1),L({}),!N)return;const g=new CustomEvent("page-overlay",{detail:{itemId:N}});window.dispatchEvent(g)}return()=>{R.current&&x.current&&(R.current.removeEventListener("animationend",x.current),x.current=null),h(!1)}},[e,N]),c.useEffect(()=>{m.current!==null&&m.current!==$.type&&I(g=>g+1),m.current=$.type},[$.type]),c.useEffect(()=>{if(!e)return;const g=document.body.style.overflow,V=window.matchMedia("(max-width: 768px)").matches,J=Ho(B.color);document.body.style.overflow="hidden",h(!1);const Q=F=>{F.target===R.current&&!j.current&&F.animationName&&(V&&!o&&J>.9&&(document.body.style.backgroundColor=B.color),h(!0),R.current&&A.current&&R.current.removeEventListener("animationend",A.current),A.current=null)};R.current&&(A.current=Q,R.current.addEventListener("animationend",Q));const M=F=>{const O=F.target;O&&(O.closest(`.${ne.thumbsWrapper}`)||O.closest(`.${ne.thumbsContainer}`))||$.type!=="slide"&&F.preventDefault()};return document.addEventListener("touchmove",M,{passive:!1}),()=>{document.body.style.overflow=g,document.removeEventListener("touchmove",M),R.current&&A.current&&(R.current.removeEventListener("animationend",A.current),A.current=null),h(!1)}},[e,o,B.color,$.type]),c.useEffect(()=>{if(!e)return;const g=V=>{var Q,M;if(j.current){V.stopPropagation();return}if(K.current){K.current=!1;return}const J=V.target;if(!(J&&(J.closest(`.${ne.thumbsContainer}`)||J.closest(`.${ne.thumbItem}`)||J.closest(`.${ne.arrow}`)||J.closest(`.${ne.closeButton}`)||J.closest(`.${ne.caption}`)))){if($.type==="slide"&&G.type==="drag"&&((M=(Q=C.current)==null?void 0:Q.splide)!=null&&M.root)){const F=C.current.splide.root;if(J&&(F.contains(J)||F===J))return}if(V.touches.length===0&&V.changedTouches.length>0){const F=n[l],O=(F==null?void 0:F.image.objectFit)==="cover",ie=V.changedTouches[0];let pe;if(O&&z.current){const le=No(z.current);pe=ie.clientX>=le.left&&ie.clientX<=le.right&&ie.clientY>=le.top&&ie.clientY<=le.bottom}else{const le=z.current?Fo(z.current):null;if(!le)return;pe=ie.clientX>=le.x&&ie.clientX<=le.x+le.width&&ie.clientY>=le.y&&ie.clientY<=le.y+le.height}if(!pe){V.stopPropagation(),j.current=!0;const le=he=>{he.stopPropagation(),he.preventDefault(),document.removeEventListener("click",le,!0)};document.addEventListener("click",le,!0),oe()}}}};return document.addEventListener("touchend",g,{passive:!0}),()=>{document.removeEventListener("touchend",g)}},[e,oe,l,n]);const we=($.type==="scale"||$.type==="fade")&&$.direction==="vert"&&G.type==="drag";c.useEffect(()=>{var he,Y;if(!e||!we||!((Y=(he=C.current)==null?void 0:he.splide)!=null&&Y.root))return;const g=C.current.splide.root,V=30,J=(Z,X)=>{if(S.current){const se=Math.abs(Z-S.current.x),Te=Math.abs(X-S.current.y);(se>0||Te>0)&&(K.current=!0)}},Q=Z=>{S.current&&(Z.preventDefault(),J(Z.clientX,Z.clientY))},M=Z=>{S.current&&Z.touches.length>0&&(Z.preventDefault(),J(Z.touches[0].clientX,Z.touches[0].clientY))},F=(Z,X)=>{if(!S.current||!C.current){S.current=null;return}const se=Math.abs(Z-S.current.x),Te=Math.abs(X-S.current.y);Te>V&&Te>se&&C.current.go(X<S.current.y?"+1":"-1"),S.current=null},O=Z=>{S.current&&F(Z.clientX,Z.clientY),document.removeEventListener("pointerup",O),document.removeEventListener("pointercancel",O),document.removeEventListener("pointermove",Q)},ie=Z=>{if(S.current){if(Z.changedTouches.length>0){const X=Z.changedTouches[0];F(X.clientX,X.clientY)}document.removeEventListener("touchend",ie),document.removeEventListener("touchcancel",ie),document.removeEventListener("touchmove",M)}},pe=Z=>{S.current={x:Z.clientX,y:Z.clientY},K.current=!1,document.addEventListener("pointermove",Q,{passive:!1}),document.addEventListener("pointerup",O),document.addEventListener("pointercancel",O)},le=Z=>{Z.touches.length>0&&(S.current={x:Z.touches[0].clientX,y:Z.touches[0].clientY},K.current=!1,document.addEventListener("touchmove",M,{passive:!1}),document.addEventListener("touchend",ie),document.addEventListener("touchcancel",ie))};return g.addEventListener("pointerdown",pe),g.addEventListener("touchstart",le),()=>{g.removeEventListener("pointerdown",pe),g.removeEventListener("touchstart",le),document.removeEventListener("pointermove",Q),document.removeEventListener("pointerup",O),document.removeEventListener("pointercancel",O),document.removeEventListener("touchmove",M),document.removeEventListener("touchend",ie),document.removeEventListener("touchcancel",ie),S.current=null,K.current=!1}},[e,we,p]);const ee={backgroundColor:B.color,backdropFilter:`blur(${B.blur}px)`,animationDuration:`${parseInt(q.duration)}ms`,animationTimingFunction:"ease",animationFillMode:"both"};return typeof document>"u"||!document.getElementById(s)?null:In.createPortal(r.jsxs(r.Fragment,{children:[r.jsx("div",{ref:o?null:R,className:Ie(ne.background,b?re:ae,{[ne.editor]:o},{[ne.hidden]:!e}),style:{...ee,...f&&!o&&!b?{position:"absolute"}:{}}}),r.jsxs("div",{ref:o?R:null,className:Ie(ne.contentStyle,b?U:te,{[ne.editor]:o},{[ne.hidden]:!e}),style:{animationDuration:`${parseInt(q.duration)}ms`,animationTimingFunction:"ease",animationFillMode:"both"},children:[r.jsx(co,{onMove:g=>u(g.index),ref:C,className:ne.lightboxSplide,options:{arrows:!1,speed:$.duration?parseInt($.duration):500,direction:$.direction==="horiz"||$.type==="fade"||$.type==="scale"?"ltr":"ttb",pagination:!1,drag:G.type==="drag"&&!we,perPage:1,width:"100%",height:"100%",type:$.type==="fade"||$.type==="scale"?"fade":"loop",padding:0,rewind:G.repeat!=="close",start:0},style:{"--splide-speed":$.duration},children:n.map((g,V)=>{const J=Vn(P.position,P.offset,o),Q=`${E.scalingValue(P.padding.top,o)} ${E.scalingValue(P.padding.right,o)} ${E.scalingValue(P.padding.bottom,o)} ${E.scalingValue(P.padding.left,o)}`,M=$.type==="scale"?(()=>{const{transform:F,...O}=J;return{...O,position:"absolute",padding:Q,boxSizing:"border-box","--position-transform":F||"none"}})():{...J,position:"absolute",padding:Q,boxSizing:"border-box"};return r.jsx(uo,{children:r.jsx("div",{className:ne.imgWrapper,onClick:ce,children:r.jsx("img",{ref:V===l?z:null,className:Ie(ne.imageStyle,{[ne.contain]:g.image.objectFit==="contain",[ne.cover]:g.image.objectFit==="cover",[ne.scaleSlide]:$.type==="scale"}),src:g.image.url,alt:g.image.name??"",style:{...M,pointerEvents:g.image.objectFit==="contain"?"none":"auto"}})})},V)})},p),_.isActive&&r.jsxs(r.Fragment,{children:[r.jsx("div",{className:Ie(ne.arrow,{[ne.arrowVertical]:$.direction==="vert"}),style:{color:_.color,"--arrow-hover-color":_.hover},children:r.jsxs("button",{className:ne.arrowInner,style:{transform:`translate(${E.scalingValue(_.offset.x,o)}, ${E.scalingValue(_.offset.y*($.direction==="horiz"?1:-1),o)}) scale(${_.scale}) rotate(${$.direction==="horiz"?"0deg":"90deg"})`},onClick:()=>{var g;return(g=C.current)==null?void 0:g.go("-1")},"aria-label":"Previous",children:[_.arrowsImgUrl&&r.jsx(yt,{url:_.arrowsImgUrl,fill:_.color,hoverFill:_.hover,className:Ie(ne.arrowImg,ne.mirror)}),!_.arrowsImgUrl&&r.jsx(Bo,{color:_.color,className:Ie(ne.arrowIcon,ne.arrowImg,ne.mirror)})]})}),r.jsx("div",{className:Ie(ne.arrow,ne.nextArrow,{[ne.arrowVertical]:$.direction==="vert"}),style:{color:_.color,"--arrow-hover-color":_.hover},children:r.jsxs("button",{className:ne.arrowInner,style:{transform:`translate(${E.scalingValue(_.offset.x*($.direction==="horiz"?-1:1),o)}, ${E.scalingValue(_.offset.y,o)}) scale(${_.scale}) rotate(${$.direction==="horiz"?"0deg":"90deg"})`},onClick:()=>{var g;return(g=C.current)==null?void 0:g.go("+1")},"aria-label":"Next",children:[_.arrowsImgUrl&&r.jsx(yt,{url:_.arrowsImgUrl,fill:_.color,hoverFill:_.hover,className:ne.arrowImg}),!_.arrowsImgUrl&&r.jsx(Bo,{color:_.color,className:Ie(ne.arrowIcon,ne.arrowImg)})]})})]}),B.closeIconUrl&&(()=>{const g=Vn(B.closeIconAlign,B.closeIconOffset,o),V=`scale(${B.closeIconScale})`,J=g.transform?`${g.transform} ${V}`:V;return r.jsx("button",{className:ne.closeButton,style:{...g,transform:J},onClick:oe,"aria-label":"Close lightbox",children:r.jsx(yt,{url:B.closeIconUrl,fill:B.closeIconColor??"#000000",hoverFill:B.closeIconHover??"#cccccc"})})})(),k&&k.isActive&&i.imageCaption&&((y=n[l])==null?void 0:y.imageCaption)&&(()=>{const{widthSettings:g,fontSettings:V,letterSpacing:J,textAlign:Q,wordSpacing:M,fontSizeLineHeight:F,textAppearance:O,color:ie}=i.imageCaption;return r.jsx("div",{className:ne.caption,style:{...Vn(k.alignment,k.offset,o),fontFamily:Nn(V.fontFamily),fontWeight:V.fontWeight,fontStyle:V.fontStyle,width:g.sizing==="auto"?"max-content":E.scalingValue(g.width,o),letterSpacing:E.scalingValue(J,o),wordSpacing:E.scalingValue(M,o),textAlign:Q,fontSize:E.scalingValue(F.fontSize,o),lineHeight:E.scalingValue(F.lineHeight,o),textTransform:O.textTransform??"none",textDecoration:O.textDecoration??"none",fontVariant:O.fontVariant??"normal",color:ie},onClick:pe=>pe.stopPropagation(),children:r.jsx("div",{"data-styles":"imageCaption",className:ne.captionTextInner,style:{"--link-color":k.linkColor,"--link-hover-color":k.linkHoverColor},children:r.jsx(sn,{content:n[l].imageCaption})})})})(),H.isActive&&(()=>{const[g,V]=H.position.split("-"),J=$.direction==="horiz"?`${g}-left`:H.position,Q=Vn(J,H.offset,o),M=()=>{if($.direction==="horiz"){if(V==="left")return"flex-start";if(V==="center")return"center";if(V==="right")return"flex-end"}else{if(g==="top")return"flex-start";if(g==="middle")return"center";if(g==="bottom")return"flex-end"}return"flex-start"};return r.jsx("div",{ref:v,className:ne.thumbsWrapper,onClick:F=>ge(F),style:{position:o?"absolute":"fixed",...Q,...$.direction==="horiz"?{maxWidth:"100vw",width:"100%",overflowX:"auto",overflowY:"hidden"}:{maxHeight:"100vh",overflowY:"auto",overflowX:"hidden"}},children:r.jsx("div",{className:Ie(ne.thumbsContainer,{[ne.thumbsContainerVertical]:$.direction==="vert",[ne.thumbsAlignStart]:H.align==="start",[ne.thumbsAlignCenter]:H.align==="center",[ne.thumbsAlignEnd]:H.align==="end"}),style:{gap:E.scalingValue(H.grid.gap,o),justifyContent:D?"flex-start":M()},children:n.map((F,O)=>{const ie=O===l,pe=T[O],he=H.grid.size*(ie?H.activeState.scale:1),Y=()=>{if(H.fit!=="fit")return{};if(!pe)return $.direction==="horiz"?{height:E.scalingValue(he,o)}:{width:E.scalingValue(he,o)};const Z=pe.width/pe.height;if($.direction==="horiz"){const X=he,se=X*Z;return{width:E.scalingValue(se,o),height:E.scalingValue(X,o)}}else{const X=he,se=X/Z;return{width:E.scalingValue(X,o),height:E.scalingValue(se,o)}}};return r.jsx("button",{className:ne.thumbItem,style:{...$.direction==="horiz"&&H.fit!=="fit"?{height:E.scalingValue(he,o)}:{},...$.direction==="vert"&&H.fit!=="fit"?{width:E.scalingValue(he,o)}:{},...H.fit==="cover"?{width:E.scalingValue(he,o),height:E.scalingValue(he,o)}:{},...Y(),transition:ie?"all 0.25s ease-out":"none",opacity:ie?H.activeState.opacity/100:H.opacity/100,"--thumb-hover":H.activeState.opacity/100},onClick:Z=>{var X;Z.stopPropagation(),u(O),(X=C.current)==null||X.go(O)},onMouseEnter:()=>{var Z;H.triggers==="hov"&&((Z=C.current)==null||Z.go(O))},children:r.jsx("img",{src:F.image.url,alt:F.image.name??"",onLoad:Z=>{const X=Z.currentTarget;X.naturalWidth&&X.naturalHeight&&L(se=>({...se,[O]:{width:X.naturalWidth,height:X.naturalHeight}}))},style:{objectFit:H.fit==="cover"?"cover":"contain",...H.fit==="fit"?{maxWidth:"100%",maxHeight:"100%",objectFit:"contain"}:{},...H.fit==="cover"?{width:"100%",height:"100%"}:{}}})},`${F.image.name}-${O}`)})})})})()]})]}),document.getElementById(s))};function Bo({color:e,className:t}){return r.jsx("svg",{viewBox:"0 0 10 18",className:t,children:r.jsx("g",{id:"Symbols",stroke:"none",strokeWidth:"1",fillRule:"evenodd",children:r.jsx("path",{d:"M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z",id:"Shape-Copy",fill:e,transform:"translate(5, 9) rotate(-90) translate(-5, -9)"})})})}const uc={element:cc,id:"lightbox",name:"Lightbox",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Lightbox.png"},defaultSize:{d:{width:440,height:550},t:{width:235,height:293},m:{width:265,height:331}},fontSettingsPaths:{content:[],parameters:[{path:"styles.imageCaption.fontSettings"}]},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.thumbnailBlock.cover.url",placeholderEnabled:!0},{path:"settings.controls.arrowsImgUrl"},{path:"settings.area.closeIconUrl"}]},schema:{type:"object",properties:{settings:{type:"object",properties:{thumbnailBlock:{display:{type:"settings-block",triggerEvent:"close"},type:"object",properties:{cover:{title:"COVER",icon:"cover",tooltip:"Cover Image",type:"object",properties:{url:{type:"string",display:{type:"cover-image-input"}}}}}},lightboxBlock:{display:{type:"settings-block",triggerEvent:"open"},type:"object",properties:{appear:{title:"APPEAR",icon:"transition",tooltip:"Appearance",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["slide in","fade in","mix"]},duration:{type:"string",label:"T",display:{type:"step-selector"},enum:["100ms","250ms","500ms","1000ms","1500ms","2000ms"]},direction:{type:"string",title:"From",display:{type:"direction-control"},enum:["top","left","right","bottom"]}}},triggers:{title:"TRIGGERS",icon:"target",tooltip:"Triggers",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["click","drag"]},switch:{type:"string",display:{type:"ratio-group"},enum:["image","50/50"]},repeat:{type:"string",title:"Repeat",display:{visible:!1,type:"ratio-group"},enum:["close","loop"]}}},slider:{title:"SLIDER",icon:"horizontal-resize",tooltip:"Slider",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["slide","fade","scale"]},direction:{type:"string",display:{type:"ratio-group"},enum:["horiz","vert"]},duration:{type:"string",label:"T",display:{type:"step-selector"},enum:["100ms","250ms","500ms","1000ms","1500ms","2000ms"]}}},thumbnail:{title:"THUMB",icon:"thumbnail",tooltip:"Thumbnail",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},position:{display:{type:"align-grid"},type:"string",enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},fit:{type:"string",display:{type:"ratio-group"},enum:["cover","fit"]},align:{type:"string",title:"Align",display:{type:"align-group",direction:"horizontal"},enum:["start","center","end"]},triggers:{type:"string",title:"Triggers",display:{type:"ratio-group",direction:"horizontal"},enum:["clk","hov"]},grid:{type:"object",title:"Grid",display:{type:"group"},properties:{size:{type:"number",label:"Box",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},gap:{type:"number",label:"Gap",scalingEnabled:!0,min:0,display:{type:"numeric-input"}}}},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},opacity:{type:"number",title:"Opacity",label:"icon:opacity",min:0,max:100,step:1,display:{type:"numeric-input"}},activeState:{type:"object",title:"ACTIVE",display:{type:"group"},properties:{scale:{type:"number",title:"Scale",min:1,max:5,step:.1,display:{type:"range-control"}},opacity:{type:"number",title:"Opacity",label:"icon:opacity",min:0,max:100,step:1,display:{type:"numeric-input"}}}}}},layout:{title:"LAYOUT",icon:"layout",tooltip:"Layout",type:"object",properties:{position:{display:{type:"align-grid"},type:"string",enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},padding:{type:"object",title:"Padding",display:{type:"padding-controls"},properties:{top:{min:0,step:1,type:"number"},left:{min:0,step:1,type:"number"},right:{min:0,step:1,type:"number"},bottom:{min:0,step:1,type:"number"}}}}},controls:{title:"CONTROLS",icon:"controls",tooltip:"Controls",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},arrowsImgUrl:{type:["string","null"],display:{type:"settings-image-input"}},offset:{title:"Offset",type:"object",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},scale:{type:"number",title:"Scale",min:.5,max:5,step:.1,display:{type:"range-control"}},color:{title:"Color",type:"string",display:{type:"settings-color-picker",format:"single"}},hover:{title:"Hover",type:"string",display:{type:"settings-color-picker",format:"single"}}}},area:{title:"AREA",icon:"area",tooltip:"Area",type:"object",properties:{color:{type:"string",display:{type:"settings-color-picker",format:"single"}},blur:{type:"number",label:"icon:blur",display:{type:"numeric-input"}},closeIconUrl:{type:["string","null"],title:"Close Icon",display:{type:"settings-image-input"}},closeIconAlign:{display:{type:"align-grid",direction:"horizontal"},type:"string",enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},closeIconScale:{type:"number",title:"Scale",min:.5,max:5,step:.1,display:{type:"range-control"}},closeIconOffset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},closeIconColor:{title:"Color",type:"string",display:{type:"settings-color-picker",format:"single"}},closeIconHover:{title:"Hover",type:"string",display:{type:"settings-color-picker",format:"single"}}}},caption:{title:"DESC",icon:"text-icon",tooltip:"Description",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},alignment:{type:"string",display:{type:"align-grid"},enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},offset:{title:"Offset",type:"object",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},linkColor:{title:"Link",type:"string",display:{type:"settings-color-picker",format:"single"}},linkHoverColor:{title:"Link Hov",type:"string",display:{type:"settings-color-picker",format:"single"}}}}}}},default:{d:{thumbnailBlock:{cover:{url:"https://cdn.cntrl.site/component-assets/Cover.jpg"}},lightboxBlock:{appear:{type:"slide in",duration:"1000ms",direction:"bottom"},triggers:{type:"click",switch:"image",repeat:"loop"},slider:{type:"slide",direction:"vert",duration:"1000ms"},thumbnail:{isActive:!0,position:"middle-left",fit:"fit",align:"start",triggers:"hov",grid:{size:.05,gap:.01},offset:{x:.01,y:0},opacity:50,activeState:{scale:1,opacity:100}},layout:{position:"middle-center",offset:{x:0,y:0},padding:{top:.06,right:0,bottom:.06,left:0}},controls:{isActive:!1,arrowsImgUrl:null,offset:{x:0,y:0},scale:1,color:"#000000",hover:"#cccccc"},area:{color:"rgba(28,31,34,0.9)",blur:0,closeIconUrl:null,closeIconColor:"#000000",closeIconHover:"#cccccc",closeIconAlign:"top-right",closeIconOffset:{x:0,y:0},closeIconScale:1},caption:{isActive:!0,alignment:"middle-center",offset:{x:0,y:0},linkColor:"#cccccc",linkHoverColor:"#cccccc"}}},m:{thumbnailBlock:{cover:{url:"https://cdn.cntrl.site/component-assets/Cover.jpg"}},lightboxBlock:{appear:{type:"fade in",duration:"500ms",direction:"bottom"},triggers:{type:"click",switch:"image",repeat:"loop"},slider:{type:"slide",direction:"horiz",duration:"1000ms"},thumbnail:{isActive:!0,position:"bottom-center",fit:"fit",align:"start",triggers:"hov",grid:{size:.1,gap:.05},offset:{x:.01,y:-.05},opacity:50,activeState:{scale:1,opacity:100}},layout:{position:"middle-center",offset:{x:0,y:0},padding:{top:.06,right:.05,bottom:.06,left:.05}},controls:{isActive:!1,arrowsImgUrl:null,offset:{x:0,y:0},scale:1,color:"#000000",hover:"#cccccc"},area:{color:"rgba(28,31,34,0.9)",blur:0,closeIconUrl:null,closeIconColor:"#000000",closeIconHover:"#cccccc",closeIconAlign:"top-right",closeIconOffset:{x:0,y:0},closeIconScale:1},caption:{isActive:!0,alignment:"middle-center",offset:{x:0,y:0},hover:"#cccccc"}}},t:{thumbnailBlock:{cover:{url:"https://cdn.cntrl.site/component-assets/Cover.jpg"}},lightboxBlock:{appear:{type:"fade in",duration:"500ms",direction:"bottom"},triggers:{type:"click",switch:"image",repeat:"loop"},slider:{type:"slide",direction:"vert",duration:"1000ms"},thumbnail:{isActive:!0,position:"middle-left",fit:"fit",align:"start",triggers:"hov",grid:{size:.05,gap:.01},offset:{x:.03,y:0},opacity:50,activeState:{scale:1,opacity:100}},layout:{position:"middle-center",offset:{x:0,y:0},padding:{top:.06,right:.1,bottom:.06,left:.1}},controls:{isActive:!1,arrowsImgUrl:null,offset:{x:0,y:0},scale:1,color:"#000000",hover:"#cccccc"},area:{color:"rgba(28,31,34,0.9)",blur:0,closeIconUrl:null,closeIconColor:"#000000",closeIconHover:"#cccccc",closeIconAlign:"top-right",closeIconOffset:{x:0,y:0},closeIconScale:1},caption:{isActive:!0,alignment:"middle-center",offset:{x:0,y:0},hover:"#cccccc"}}}},displayRules:[{if:{name:"lightboxBlock.appear.type",value:"slide in"},then:{name:"properties.lightboxBlock.properties.appear.properties.direction.display.visible",value:!0}},{if:{name:"lightboxBlock.slider.direction",value:"vert"},then:{name:"properties.lightboxBlock.properties.thumbnail.properties.align.display.direction",value:"vertical"}},{if:{name:"lightboxBlock.appear.type",value:"mix"},then:{name:"properties.lightboxBlock.properties.appear.properties.direction.display.visible",value:!0}},{if:{name:"lightboxBlock.appear.type",value:"fade in"},then:{name:"properties.lightboxBlock.properties.appear.properties.direction.display.visible",value:!1}},{if:[{name:"lightboxBlock.triggers.type",value:"click"},{name:"lightboxBlock.triggers.switch",value:"image"}],then:{name:"properties.lightboxBlock.properties.triggers.properties.repeat.display.visible",value:!0}}]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},imageCaption:{label:"Description",placeholder:"Add Caption...",display:{type:"rich-text"}}},required:["image"]},default:[{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/2.jpg",name:"Slider-1.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/3.jpg",name:"Slider-2.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/4.jpg",name:"Slider-3.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]}]},styles:{type:"object",properties:{imageCaption:{dataName:"caption",type:"object",properties:{fontSettings:{type:"object",display:{type:"font-settings"},properties:{fontFamily:{type:"string"},fontWeight:{type:"number"},fontStyle:{type:"string"}}},widthSettings:{display:{type:"text-width-control"},type:"object",properties:{width:{type:"number"},sizing:{type:"string",enum:["auto","manual"]}}},fontSizeLineHeight:{type:"object",display:{type:"font-size-line-height"},properties:{fontSize:{type:"number"},lineHeight:{type:"number"}}},letterSpacing:{display:{type:"letter-spacing-input"},type:"number"},wordSpacing:{display:{type:"word-spacing-input"},type:"number"},textAlign:{display:{type:"text-align-control"},type:"string",enum:["left","center","right","justify"]},textAppearance:{display:{type:"text-appearance"},properties:{textTransform:{type:"string",enum:["none","uppercase","lowercase","capitalize"]},textDecoration:{type:"string",enum:["none","underline"]},fontVariant:{type:"string",enum:["normal","small-caps"]}}},color:{display:{type:"style-panel-color-picker"},type:"string"}}}},default:{imageCaption:{widthSettings:{width:.13,sizing:"auto"},fontSettings:{fontFamily:"Arial",fontWeight:400,fontStyle:"normal"},fontSizeLineHeight:{fontSize:.02,lineHeight:.02},letterSpacing:0,wordSpacing:0,textAlign:"left",textAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},color:"#000000"}}}},required:["settings","content","styles"]}};function zn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function pc(e){return`
6
+ */const Zs="RichTextRenderer-module__link___BWeZ2",Js={link:Zs},Qs=e=>{const t=e.trim();return!t||t.startsWith('"')&&t.endsWith('"')||t.startsWith("'")&&t.endsWith("'")?!1:t.split(/\s+/g).filter(Boolean).some(o=>/^\d/.test(o))},bo=e=>e&&e.split(",").map(n=>n.trim()).filter(Boolean).map(n=>Qs(n)?`"${n.replace(/"/g,'\\"')}"`:n).join(", ");function ht(e){const{color:t,...n}=e;return n}function Xe(e,t){var i,r,s;const{fontSize:n,lineHeight:o}=e;return{fontFamily:bo(e.fontSettings.fontFamily),fontWeight:e.fontSettings.fontWeight,fontStyle:e.fontSettings.fontStyle,letterSpacing:E.scalingValue(e.letterSpacing,t),wordSpacing:E.scalingValue(e.wordSpacing,t),fontSize:E.scalingValue(n,t),lineHeight:o!==void 0?E.scalingValue(o,t):void 0,textTransform:(i=e.textAppearance)==null?void 0:i.textTransform,textDecoration:(r=e.textAppearance)==null?void 0:r.textDecoration,fontVariant:(s=e.textAppearance)==null?void 0:s.fontVariant,textAlign:e.textAlign,color:e.color}}const Ln=({content:e})=>{const t=n=>n.map((o,i)=>o.type==="link"?l.jsx("a",{className:Js.link,href:o.value,target:o.target,children:t(o.children)},i):l.jsx("span",{style:el(o),children:o.text},i));return l.jsx(l.Fragment,{children:e.map((n,o)=>{const i=n.children;return l.jsx("div",{children:t(i)},o)})})};function el(e){return{...e.fontFamily&&{fontFamily:bo(e.fontFamily)},...e.fontWeight&&{fontWeight:e.fontWeight},...e.fontStyle&&{fontStyle:e.fontStyle},...e.textDecoration&&{textDecoration:e.textDecoration},...e.textTransform&&{textTransform:e.textTransform},...e.fontVariant&&{fontVariant:e.fontVariant},...e.verticalAlign&&{verticalAlign:e.verticalAlign,lineHeight:"0px"}}}const tl="SvgImage-module__svg___q3xE-",nl="SvgImage-module__img___VsTm-",Ri={svg:tl,img:nl},ol=e=>{const t=e.trim();return t.startsWith("data:image/svg+xml")?!0:(t.split(/[?#]/)[0]??t).endsWith(".svg")},il=e=>`url("${e.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}")`,kt=({url:e,fill:t="#000000",hoverFill:n="#CCCCCC",className:o="",style:i})=>{const[r,s]=u.useState(()=>typeof window>"u"?!0:CSS.supports("mask-image",'url("")')||CSS.supports("-webkit-mask-image",'url("")'));return u.useEffect(()=>{if(typeof window<"u"&&window.CSS){const c=CSS.supports("mask-image",'url("")')||CSS.supports("-webkit-mask-image",'url("")');s(c)}},[]),!ol(e)||!r?l.jsx("img",{src:e,alt:"",className:$e(Ri.img,o),style:i}):l.jsx("span",{"data-supports-mask":r,className:$e(Ri.svg,o),style:{"--svg":il(e),"--fill":t,"--hover-fill":n,...i??{}}})},rl={"top-left":ae.topLeftAlignment,"top-center":ae.topCenterAlignment,"top-right":ae.topRightAlignment,"middle-left":ae.middleLeftAlignment,"middle-center":ae.middleCenterAlignment,"middle-right":ae.middleRightAlignment,"bottom-left":ae.bottomLeftAlignment,"bottom-center":ae.bottomCenterAlignment,"bottom-right":ae.bottomRightAlignment};function al({settings:e,content:t,styles:n,isEditor:o}){const[i,r]=u.useState(null),{widthSettings:s,fontSettings:c,letterSpacing:a,textAlign:d,wordSpacing:p,fontSizeLineHeight:T,textAppearance:y,color:C}=n.imageCaption,[m,h]=u.useState(void 0),[W,x]=u.useState(null),[b,f]=u.useState(0),[O,P]=u.useState(0),{direction:_,transition:$,controls:A,pagination:w,imageCaption:H,triggers:L}=e,V=u.useRef($.type),{x:D,y:J}=e.controls.offset,q=S=>{i&&i.go(S)};return u.useEffect(()=>{if(!W)return;const S=new ResizeObserver(R=>{if(!i)return;const[F]=R;h({width:Math.round(F.contentRect.width),height:Math.round(F.contentRect.height)})});return S.observe(W),()=>S.unobserve(W)},[W]),u.useEffect(()=>{!i||V.current===$.type||(P(S=>S+1),V.current=$.type)},[$.type]),l.jsx("div",{className:$e(ae.wrapper,{[ae.editor]:o}),ref:x,children:l.jsxs("div",{className:ae.sliderInner,style:{width:m?m.width:"100%",height:m?m.height:"100%",backgroundColor:$.backgroundColor&&$.type==="fade in"?$.backgroundColor:"transparent"},children:[e.imageCaption.isActive&&l.jsx("div",{className:$e(ae.captionBlock),children:l.jsx("div",{className:ae.captionTextWrapper,children:t.map((S,R)=>l.jsx("div",{className:$e(ae.captionText,rl[H.alignment],{[ae.withPointerEvents]:R===b&&o,[ae.active]:R===b}),style:{fontFamily:bo(c.fontFamily),fontWeight:c.fontWeight,fontStyle:c.fontStyle,width:s.sizing==="auto"?"max-content":E.scalingValue(s.width,o),letterSpacing:E.scalingValue(a,o),wordSpacing:E.scalingValue(p,o),textAlign:d,fontSize:E.scalingValue(T.fontSize,o),lineHeight:E.scalingValue(T.lineHeight,o),textTransform:y.textTransform??"none",textDecoration:y.textDecoration??"none",fontVariant:y.fontVariant??"normal",color:C,transitionDuration:$.duration?`${Math.round(parseInt($.duration)/2)}ms`:"500ms"},children:l.jsx("div",{"data-styles":"imageCaption",className:ae.captionTextInner,style:{"--link-hover-color":H.linkHoverColor,"--link-color":H.linkColor,position:"relative",top:E.scalingValue(H.offset.y,o),left:E.scalingValue(H.offset.x,o)},children:l.jsx(Ln,{content:S.imageCaption})})},R))})}),l.jsx(li,{onMove:S=>{f(S.index)},ref:r,options:{arrows:!1,speed:$.duration?parseInt($.duration):500,autoplay:L.autoPlay!==null,...L.autoPlay!==null&&{interval:parseInt(L.autoPlay)*1e3},direction:_==="horiz"||$.type==="fade in"?"ltr":"ttb",pagination:!1,drag:L.triggersList.drag,perPage:1,width:m?m.width:"100%",height:m?m.height:"100%",type:$.type==="fade in"?"fade":"loop",rewind:!0},children:t.map((S,R)=>l.jsx(ci,{children:l.jsx("div",{className:ae.sliderItem,children:l.jsx("div",{className:ae.imgWrapper,children:l.jsx("img",{className:$e(ae.sliderImage,{[ae.contain]:S.image.objectFit==="contain",[ae.cover]:S.image.objectFit==="cover"}),src:S.image.url,alt:S.image.name??""})})})},R))},O),A.isActive&&l.jsxs(l.Fragment,{children:[l.jsx("div",{className:$e(ae.arrow,{[ae.arrowVertical]:_==="vert",[ae.hoverArrow]:A.show==="on hover"}),style:{color:A.color,"--arrow-hover-color":A.hover},children:l.jsxs("button",{onClick:()=>{q("-1")},className:ae.arrowInner,style:{transform:`translate(${E.scalingValue(D,o)}, ${E.scalingValue(J*(_==="horiz"?1:-1),o)}) scale(${e.controls.scale/100}) rotate(${_==="horiz"?"0deg":"90deg"})`},children:[A.arrowsImgUrl&&l.jsx(kt,{url:A.arrowsImgUrl,fill:A.color,hoverFill:A.hover,className:$e(ae.arrowImg,ae.mirror)}),!A.arrowsImgUrl&&l.jsx(Wi,{color:A.color,className:$e(ae.arrowIcon,ae.arrowImg,ae.mirror)})]})}),l.jsx("div",{className:$e(ae.arrow,ae.nextArrow,{[ae.arrowVertical]:_==="vert",[ae.hoverArrow]:A.show==="on hover"}),style:{color:A.color,"--arrow-hover-color":A.hover},children:l.jsxs("button",{className:ae.arrowInner,onClick:()=>q("+1"),style:{transform:`translate(${E.scalingValue(D*(_==="horiz"?-1:1),o)}, ${E.scalingValue(J,o)}) scale(${e.controls.scale/100}) rotate(${_==="horiz"?"0deg":"90deg"})`},children:[A.arrowsImgUrl&&l.jsx(kt,{url:A.arrowsImgUrl,fill:A.color,hoverFill:A.hover,className:ae.arrowImg}),!A.arrowsImgUrl&&l.jsx(Wi,{color:A.color,className:$e(ae.arrowIcon,ae.arrowImg)})]})})]}),L.triggersList.click&&l.jsx("div",{className:ae.clickOverlay,onClick:()=>{i&&i.go("+1")}}),w.isActive&&l.jsx("div",{className:$e(ae.pagination,{[ae.paginationInsideBottom]:w.position==="inside-1"&&_==="horiz",[ae.paginationInsideTop]:w.position==="inside-2"&&_==="horiz",[ae.paginationOutsideBottom]:w.position==="outside-1"&&_==="horiz",[ae.paginationOutsideTop]:w.position==="outside-2"&&_==="horiz",[ae.paginationInsideLeft]:w.position==="inside-1"&&_==="vert",[ae.paginationInsideRight]:w.position==="inside-2"&&_==="vert",[ae.paginationOutsideLeft]:w.position==="outside-1"&&_==="vert",[ae.paginationOutsideRight]:w.position==="outside-2"&&_==="vert",[ae.paginationVertical]:_==="vert"}),children:l.jsx("div",{className:ae.paginationInner,style:{backgroundColor:w.colors[2],transform:`scale(${w.scale/100}) translate(${E.scalingValue(w.offset.x,o)}, ${E.scalingValue(w.offset.y,o)}) rotate(${_==="horiz"?"0deg":"90deg"})`},children:t.map((S,R)=>l.jsx("button",{onClick:()=>{i&&i.go(R)},className:$e(ae.paginationItem),children:l.jsx("div",{className:$e(ae.dot,{[ae.activeDot]:R===b}),style:{backgroundColor:R===b?w.colors[0]:w.colors[1],"--pagination-hover-color":w.hover}})},R))})})]})})}function Wi({color:e,className:t}){return l.jsx("svg",{viewBox:"0 0 10 18",className:t,children:l.jsx("g",{id:"Symbols",stroke:"none",strokeWidth:"1",fillRule:"evenodd",children:l.jsx("path",{d:"M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z",id:"Shape-Copy",fill:e,transform:"translate(5, 9) rotate(-90) translate(-5, -9)"})})})}const sl={element:al,id:"control-slider",name:"Slider",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Slider.mp4"},defaultSize:{d:{width:400,height:400},t:{width:400,height:400},m:{width:300,height:300}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.controls.arrowsImgUrl"}]},fontSettingsPaths:{content:[],parameters:[{path:"styles.imageCaption.fontSettings"}]},schema:{type:"object",properties:{settings:{type:"object",display:{type:"settings-block"},properties:{triggers:{title:"triggers",icon:"target",tooltip:"Triggers",type:"object",properties:{triggersList:{type:"object",display:{type:"toggle-ratio-group"},properties:{click:{type:"boolean"},drag:{type:"boolean"}}},autoPlay:{type:["string","null"],label:"Auto",display:{type:"step-selector"},enum:[null,"1s","2s","3s","4s","5s"]}}},direction:{icon:"horizontal-resize",tooltip:"Direction",type:"string",display:{type:"ratio-group"},enum:["horiz","vert"]},transition:{title:"transit",icon:"transition",tooltip:"Transition",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["slide","fade in"]},backgroundColor:{type:["string","null"],title:"BG Color",display:{visible:!1,type:"settings-color-picker",format:"single"}},duration:{type:"string",label:"icon:hourglass",display:{type:"step-selector"},enum:["100ms","250ms","500ms","1000ms","1500ms","2000ms"]}}},controls:{title:"controls",icon:"controls",tooltip:"Controls",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},arrowsImgUrl:{type:["string","null"],display:{type:"settings-image-input"}},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},scale:{type:"number",title:"scale",min:50,max:600,display:{type:"range-control"}},color:{title:"color",type:"string",display:{type:"settings-color-picker",format:"single"}},hover:{title:"hover",type:"string",display:{type:"settings-color-picker",format:"single"}},show:{title:"Show",type:"string",display:{type:"ratio-group"},enum:["always","on hover"]}}},pagination:{title:"nav",icon:"pagination",tooltip:"Navigation",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},position:{display:{type:"socket",direction:"horizontal"},type:"string",enum:["outside-1","outside-2","inside-1","inside-2"]},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},scale:{type:"number",title:"scale",min:10,max:400,display:{type:"range-control"}},colors:{display:{type:"settings-color-picker",format:"multiple"},title:"color",type:"array",items:{type:"string"}},hover:{title:"hover",type:"string",display:{type:"settings-color-picker",format:"single"}}}},imageCaption:{title:"Caption",icon:"text-icon",tooltip:"Caption",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},alignment:{type:"string",display:{type:"align-grid"},enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},linkColor:{title:"Link",type:"string",display:{type:"settings-color-picker",format:"single"}},linkHoverColor:{title:"Link Hov",type:"string",display:{type:"settings-color-picker",format:"single"}}}}},default:{triggers:{triggersList:{click:!1,drag:!0},autoPlay:null},controls:{isActive:!0,arrowsImgUrl:null,offset:{x:0,y:0},scale:100,color:"#000000",hover:"#cccccc",show:"always"},transition:{type:"slide",duration:"500ms",backgroundColor:null},pagination:{isActive:!0,scale:50,position:"inside-1",offset:{x:0,y:0},colors:["#cccccc","#cccccc","#000000"],hover:"#cccccc"},direction:"horiz",imageCaption:{offset:{x:0,y:0},isActive:!0,alignment:"middle-center",linkColor:"#cccccc",linkHoverColor:"#cccccc"}},displayRules:[{if:{name:"direction",value:"vert"},then:{name:"properties.pagination.properties.position.display.direction",value:"vertical"}},{if:{name:"transition.type",value:"fade in"},then:{name:"properties.transition.properties.backgroundColor.display.visible",value:!0}}]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},imageCaption:{placeholder:"Add Caption...",label:"Description",display:{type:"rich-text"}}},required:["image"]},default:[{image:{objectFit:"cover",url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",name:"Slider-1.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-2.png",name:"Slider-2.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-3.png",name:"Slider-3.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]}]},styles:{type:"object",properties:{imageCaption:{dataName:"caption",type:"object",properties:{fontSettings:{type:"object",display:{type:"font-settings"},properties:{fontFamily:{type:"string"},fontWeight:{type:"number"},fontStyle:{type:"string"}}},widthSettings:{display:{type:"text-width-control"},type:"object",properties:{width:{type:"number"},sizing:{type:"string",enum:["auto","manual"]}}},fontSizeLineHeight:{type:"object",display:{type:"font-size-line-height"},properties:{fontSize:{type:"number"},lineHeight:{type:"number"}}},letterSpacing:{display:{type:"letter-spacing-input"},type:"number"},wordSpacing:{display:{type:"word-spacing-input"},type:"number"},textAlign:{display:{type:"text-align-control"},type:"string",enum:["left","center","right","justify"]},textAppearance:{display:{type:"text-appearance"},properties:{textTransform:{type:"string",enum:["none","uppercase","lowercase","capitalize"]},textDecoration:{type:"string",enum:["none","underline"]},fontVariant:{type:"string",enum:["normal","small-caps"]}}},color:{display:{type:"style-panel-color-picker"},type:"string"}}}},default:{imageCaption:{widthSettings:{width:.13,sizing:"auto"},fontSettings:{fontFamily:"Arial",fontWeight:400,fontStyle:"normal"},fontSizeLineHeight:{fontSize:.02,lineHeight:.02},letterSpacing:0,wordSpacing:0,textAlign:"left",textAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},color:"#000000"}}}},required:["settings","content","styles"]}},ll="ImageRevealSlider-module__imageRevealSlider___UE5Ob",cl="ImageRevealSlider-module__image___Qjt-e",dl="ImageRevealSlider-module__link___N-iLG",ul="ImageRevealSlider-module__cursor___2U03d",Jt={imageRevealSlider:ll,image:cl,link:dl,cursor:ul};function Ii(e,t,n){for(const o of n){const i=new Image;i.src=o.url;const r=o.width?Number.parseFloat(o.width):i.naturalWidth,s=i.naturalHeight/i.naturalWidth*r,c=r/2,a=s/2;if(e>=o.x-c&&e<=o.x+c&&t>=o.y-a&&t<=o.y+a)return!0}return!1}function To(e){return new Promise(t=>{const n=new Image;n.src=e,n.onload=()=>{t({width:n.naturalWidth,height:n.naturalHeight})}})}async function pl(e,t,n,o){let i,r;if(t==="custom"){i=n;const s=await To(e);r=s.height/s.width*i}else if(t==="random"){i=Math.random()*(o.max-o.min)+o.min;const s=await To(e);r=s.height/s.width*i}else{const s=await To(e);i=s.width,r=s.height}return{width:i,height:r,finalWidth:`${i}px`}}function ml({settings:e,content:t,isEditor:n}){const[o,i]=u.useState(null),[r,s]=u.useState([]),[c,a]=u.useState(0),d=u.useRef(0),[p,T]=u.useState({x:0,y:0}),[y,C]=u.useState(1),[m,h]=u.useState("none"),W=u.useRef({x:0,y:0}),[x,b]=u.useState(!1),{sizeType:f,imageWidth:O,randomRangeImageWidth:P}=e.imageSize,{revealPosition:_,visible:$}=e.position,{cursorType:A,target:w,defaultCursorScale:H,defaultCursor:L,hoverCursorScale:V,hoverCursor:D}=e.cursor;u.useEffect(()=>{if(!o)return;const S=(N,I)=>{const B=o.getBoundingClientRect(),ie=N-B.left,Q=I-B.top;if(T({x:ie,y:Q}),A==="system"){h("none"),C(1);return}const oe=ie,G=Q,M=document.elementFromPoint(B.left+oe,B.top+G);if(M&&M.closest("a")){h("none"),C(1);return}const re=Ii(oe,G,r)||w==="area"?{img:D??"none",scale:V}:{img:L??"none",scale:H};h(re.img),C(re.scale)},R=N=>{N.stopPropagation(),W.current={x:N.clientX,y:N.clientY},S(N.clientX,N.clientY)},F=()=>{x&&S(W.current.x,W.current.y)};return o.addEventListener("mousemove",R),window.addEventListener("scroll",F,!0),()=>{o.removeEventListener("mousemove",R),window.removeEventListener("scroll",F,!0)}},[o,x,p,A,w,D,L,V,H,r]),u.useEffect(()=>{x||(h("none"),C(0))},[x]);const J=async(S,R,F,N={})=>{const{width:I,height:B,finalWidth:ie}=await pl(S.image.url,f,O,P);let Q=0,oe=0;_==="same"?(Q=R/2,oe=F/2):(Q=N.x??Math.random()*R,oe=N.y??Math.random()*F);const G=Math.min(Math.max(Q,I/2),R-I/2),M=Math.min(Math.max(oe,B/2),F-B/2);return{id:d.current++,url:S.image.url,link:S.link,name:S.image.name,x:G,y:M,width:ie}};u.useEffect(()=>{if(!o||t.length===0)return;const S=o.getBoundingClientRect(),R=S.width,F=S.height,N=[];(async()=>{const B=t[0],ie=await J(B,R,F);N.push(ie),s(N),a(1)})()},[f,O,P,_,o]),u.useEffect(()=>{$==="last One"&&s(S=>S.length>0?[S[S.length-1]]:[])},[$]);const q=async S=>{if(!o)return;const R=o.getBoundingClientRect(),F=S.clientX-R.left,N=S.clientY-R.top;if(w==="image"&&!Ii(F,N,r))return;let I=0,B=0;_==="on Click"?(I=F,B=N):_==="same"?(I=R.width/2,B=R.height/2):(I=Math.random()*R.width,B=Math.random()*R.height);const ie=t[c],Q=await J(ie,R.width,R.height,{x:I,y:B});s(oe=>$==="all"?[...oe,Q]:[Q]),a(oe=>oe>=t.length-1?0:oe+1)};return l.jsxs("div",{ref:i,onClick:q,onMouseEnter:()=>b(!0),onMouseLeave:()=>b(!1),className:Jt.imageRevealSlider,style:{cursor:m==="none"?"default":"none"},children:[r.map(S=>l.jsx("div",{className:Jt.wrapper,style:{top:`${S.y}px`,left:`${S.x}px`,position:"absolute",transform:"translate(-50%, -50%)",width:S.width??"auto",height:"auto",cursor:m==="none"?"default":"none"},children:w==="area"&&S.link?l.jsx("a",{href:S.link,target:"_blank",className:Jt.link,children:l.jsx("img",{src:S.url,alt:S.name,className:Jt.image},S.id)}):l.jsx("img",{src:S.url,alt:S.name,className:Jt.image},S.id)},S.id)),x&&l.jsx("div",{className:Jt.cursor,style:{left:`${p.x}px`,top:`${p.y}px`,transform:`translate(-50%, -50%) scale(${y})`,backgroundImage:`url('${m}')`,backgroundSize:"cover",backgroundPosition:"center",position:"absolute",pointerEvents:"none"}})]})}const gl={element:ml,id:"control-image-reveal",name:"Click Gallery",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Click_Gallery.mp4"},defaultSize:{d:{width:"100%",height:"100%"},t:{width:"100%",height:"100%"},m:{width:"100%",height:"100%"}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.cursor.defaultCursor"},{path:"settings.cursor.hoverCursor"}]},fontSettingsPaths:{content:[],parameters:[]},schema:{type:"object",properties:{settings:{type:"object",display:{type:"settings-block"},properties:{imageSize:{title:"IMG SIZE",icon:"size",tooltip:"IMG SIZE",type:"object",properties:{sizeType:{type:"string",display:{type:"ratio-group"},enum:["as Is","custom","random"]},imageWidth:{type:"number",label:"W",display:{type:"numeric-input",visible:!1}},randomRangeImageWidth:{type:"object",display:{type:"random-range-controls",visible:!1},properties:{min:{type:"number"},max:{type:"number"}}}}},cursor:{title:"cursor",icon:"cursor",tooltip:"cursor",type:"object",properties:{cursorType:{type:"string",display:{type:"ratio-group"},enum:["system","custom"]},target:{type:"string",title:"Target",display:{type:"ratio-group"},enum:["area","image"]},defaultCursor:{type:["string","null"],title:"Default",display:{type:"settings-image-input",visible:!1}},defaultCursorScale:{type:"number",title:"Scale",min:1,max:5,step:.1,display:{type:"range-control",visible:!1}},hoverCursor:{type:["string","null"],title:"Hover",display:{type:"settings-image-input",visible:!1}},hoverCursorScale:{type:"number",title:"Scale",min:1,max:5,step:.1,display:{type:"range-control",visible:!1}}}},position:{title:"position",icon:"transition",tooltip:"Position",type:"object",properties:{revealPosition:{type:"string",display:{type:"ratio-group"},enum:["random","same","on Click"]},visible:{type:"string",title:"Visible",display:{type:"ratio-group"},enum:["all","last One"]}}}},default:{imageSize:{sizeType:"custom",imageWidth:500,randomRangeImageWidth:{min:100,max:1e3}},cursor:{cursorType:"system",target:"area",defaultCursor:null,defaultCursorScale:2,hoverCursor:null,hoverCursorScale:2},position:{revealPosition:"random",visible:"all"}},displayRules:[{if:{name:"imageSize.sizeType",value:"custom"},then:{name:"properties.imageSize.properties.imageWidth.display.visible",value:!0}},{if:{name:"imageSize.sizeType",value:"random"},then:{name:"properties.imageSize.properties.randomRangeImageWidth.display.visible",value:!0}},{if:[{name:"cursor.target",value:"image"},{name:"cursor.cursorType",value:"custom"}],then:{name:"properties.cursor.properties.defaultCursor.display.visible",value:!0}},{if:[{name:"cursor.target",value:"image"},{name:"cursor.cursorType",value:"custom"},{name:"cursor.defaultCursor",value:null,isNotEqual:!0}],then:{name:"properties.cursor.properties.defaultCursorScale.display.visible",value:!0}},{if:{name:"cursor.cursorType",value:"custom"},then:{name:"properties.cursor.properties.hoverCursor.display.visible",value:!0}},{if:[{name:"cursor.cursorType",value:"custom"},{name:"cursor.hoverCursor",value:null,isNotEqual:!0}],then:{name:"properties.cursor.properties.hoverCursorScale.display.visible",value:!0}}]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{isObjectFitEditable:!1,type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},link:{label:"URL",placeholder:"Enter link...",display:{type:"text-input"}}},required:["image"]},default:[{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQK9211QXBE9W284ZNKB8.png",name:"Slider-1.png"},link:""},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQMFT72JD18WKP0Q2DVAT.png",name:"Slider-2.png"},link:""},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQNEVRXPSRX5K1YTMJQY9.png",name:"Slider-3.png"},link:""},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQP84JKRDT7WNWDQZR4Y9.png",name:"Slider-4.png"},link:""}]}}}},hl="LightBox-module__hidden___9s-9x",fl="LightBox-module__heroImage___sTxNF",yl="LightBox-module__background___rm9ml",vl="LightBox-module__editor___4ACaY",bl="LightBox-module__contentStyle___Bgnsq",xl="LightBox-module__imageStyle___tLIlB",Cl="LightBox-module__imgWrapper___LuFUp",Sl="LightBox-module__contain___8-yaS",wl="LightBox-module__cover___hNvOG",$l="LightBox-module__caption___b6L2I",Tl="LightBox-module__captionTextInner___rCGNH",Ll="LightBox-module__lightboxSplide___XFuWC",El="LightBox-module__arrow___iz38X",Pl="LightBox-module__arrowVertical___Zfz81",_l="LightBox-module__nextArrow___zkAQN",Al="LightBox-module__arrowInner___p48sW",Rl="LightBox-module__arrowIcon___3VaFf",Wl="LightBox-module__arrowImg___pNV88",Il="LightBox-module__mirror___pjeXc",kl="LightBox-module__thumbsWrapper___GB-nU",Fl="LightBox-module__thumbsContainerVertical___wttk5",Ml="LightBox-module__thumbsContainer___osSma",Nl="LightBox-module__thumbsAlignStart___MO6tY",Hl="LightBox-module__thumbsAlignCenter___Q4sUx",Bl="LightBox-module__thumbsAlignEnd___p4y9R",Ol="LightBox-module__thumbItem___HvnF3",Vl="LightBox-module__closeButton___g2khP",Dl="LightBox-module__fadeIn___0m5GW",jl="LightBox-module__slideInLeft___gPYwC",zl="LightBox-module__slideInRight___S-pPp",Kl="LightBox-module__slideInTop___DFdAj",ql="LightBox-module__slideInBottom___m27kZ",Ul="LightBox-module__fadeOut___55qBR",Gl="LightBox-module__slideOutLeft___NvU7P",Yl="LightBox-module__slideOutRight___SK7eC",Xl="LightBox-module__slideOutTop___Vgg0z",Zl="LightBox-module__slideOutBottom___nJ0Ef",Jl="LightBox-module__scaleSlide___vZriG",X={hidden:hl,heroImage:fl,background:yl,editor:vl,contentStyle:bl,imageStyle:xl,imgWrapper:Cl,contain:Sl,cover:wl,caption:$l,captionTextInner:Tl,lightboxSplide:Ll,arrow:El,arrowVertical:Pl,nextArrow:_l,arrowInner:Al,arrowIcon:Rl,arrowImg:Wl,mirror:Il,thumbsWrapper:kl,thumbsContainerVertical:Fl,thumbsContainer:Ml,thumbsAlignStart:Nl,thumbsAlignCenter:Hl,thumbsAlignEnd:Bl,thumbItem:Ol,closeButton:Vl,fadeIn:Dl,slideInLeft:jl,slideInRight:zl,slideInTop:Kl,slideInBottom:ql,fadeOut:Ul,slideOutLeft:Gl,slideOutRight:Yl,slideOutTop:Xl,slideOutBottom:Zl,scaleSlide:Jl},Dn=(e,t,n)=>{const o={},[i,r]=e.split("-");return i==="top"?(o.top="0",o.bottom="auto"):i==="middle"?(o.top="50%",o.bottom="auto"):i==="bottom"&&(o.top="auto",o.bottom="0"),r==="left"?(o.left="0",o.right="auto"):r==="center"?(o.left="50%",o.right="auto"):r==="right"&&(o.left="auto",o.right="0"),i==="middle"&&r==="center"?o.transform=`translate(calc(-50% + ${E.scalingValue(t.x,n)}), calc(-50% + ${E.scalingValue(t.y,n)}))`:i==="middle"?o.transform=`translate(${E.scalingValue(t.x,n)}, calc(-50% + ${E.scalingValue(t.y,n)}))`:r==="center"?o.transform=`translate(calc(-50% + ${E.scalingValue(t.x,n)}), ${E.scalingValue(t.y,n)})`:o.transform=`translate(${E.scalingValue(t.x,n)}, ${E.scalingValue(t.y,n)})`,o};function Nr(e){const t=window.getComputedStyle(e);return{top:parseFloat(t.paddingTop)||0,right:parseFloat(t.paddingRight)||0,bottom:parseFloat(t.paddingBottom)||0,left:parseFloat(t.paddingLeft)||0}}function ki(e){const t=e.getBoundingClientRect(),n=Nr(e),o=Math.max(0,t.width-n.left-n.right),i=Math.max(0,t.height-n.top-n.bottom),r=e.naturalWidth,s=e.naturalHeight,c=o/i,a=r/s;let d,p;a>c?(d=o,p=o/a):(p=i,d=i*a);const T=t.left+n.left,y=t.top+n.top,C=(o-d)/2+T,m=(i-p)/2+y;return{x:C,y:m,width:d,height:p}}function Fi(e){const t=e.getBoundingClientRect(),n=Nr(e);return{left:t.left+n.left,right:t.right-n.right,top:t.top+n.top,bottom:t.bottom-n.bottom}}function Mi(e){const t=e.match(/rgba?\(([^)]+)\)/);if(t){const o=t[1].split(",").map(i=>parseFloat(i.trim()));return o.length===4?o[3]:1}const n=e.match(/^#([0-9a-fA-F]{8})$/);if(n){const o=n[1].substring(6,8);return parseInt(o,16)/255}return e.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/),1}function Ql(e,t){const n=(()=>{if(e==="fade in")return X.fadeIn;if(e==="slide in"||e==="mix")switch(t){case"left":return X.slideInLeft;case"right":return X.slideInRight;case"top":return X.slideInTop;case"bottom":return X.slideInBottom;default:return X.slideInRight}return X.fadeIn})(),o=(()=>{if(e==="fade in"||e==="mix")return X.fadeIn;if(e==="slide in")switch(t){case"left":return X.slideInLeft;case"right":return X.slideInRight;case"top":return X.slideInTop;case"bottom":return X.slideInBottom;default:return X.slideInRight}return X.fadeIn})(),i=(()=>{if(e==="fade in"||e==="mix")return X.fadeOut;if(e==="slide in")switch(t){case"left":return X.slideOutLeft;case"right":return X.slideOutRight;case"top":return X.slideOutTop;case"bottom":return X.slideOutBottom;default:return X.slideOutRight}return X.fadeOut})(),r=(()=>{if(e==="fade in")return X.fadeOut;if(e==="slide in"||e==="mix")switch(t){case"left":return X.slideOutLeft;case"right":return X.slideOutRight;case"top":return X.slideOutTop;case"bottom":return X.slideOutBottom;default:return X.slideOutRight}return X.fadeOut})();return{appearClass:n,backdropAppearClass:o,backdropDisappearClass:i,disappearClass:r}}const ec=({settings:e,content:t,styles:n,portalId:o,activeEvent:i,isEditor:r,isPreviewMode:s})=>{const[c,a]=u.useState(!1),{url:d}=e.thumbnailBlock.cover;return u.useEffect(()=>{i==="close"&&a(!1),i==="open"&&a(!0)},[i]),l.jsxs(l.Fragment,{children:[l.jsx("img",{src:d,alt:"Cover",className:X.heroImage,onClick:()=>a(!0)}),l.jsx(tc,{isOpen:c,onClose:()=>a(!1),content:t,settings:e,lightboxStyles:n,portalId:o,isEditor:r})]})},tc=({isOpen:e,onClose:t,content:n,lightboxStyles:o,settings:i,portalId:r,isEditor:s,metadata:c})=>{var v;const[a,d]=u.useState(0),[p,T]=u.useState(0),[y,C]=u.useState(!1),[m,h]=u.useState(!1),[W,x]=u.useState({}),b=u.useRef(null),f=u.useRef(null),O=u.useRef(null),P=u.useRef(!1),_=u.useRef(null),$=u.useRef(null),A=u.useRef(null),w=u.useRef(null),H=u.useRef(!1),L=u.useRef(null),[V,D]=u.useState(!1),{appear:J,triggers:q,slider:S,thumbnail:R,controls:F,area:N,caption:I,layout:B}=i.lightboxBlock,{appearClass:ie,backdropAppearClass:Q,backdropDisappearClass:oe,disappearClass:G}=Ql(J.type,J.direction),M=(c==null?void 0:c.itemId)??null;u.useEffect(()=>{const g=()=>{setTimeout(()=>{var K,U;(U=(K=b.current)==null?void 0:K.splide)==null||U.refresh()},16)},k=()=>{T(K=>K+1)};return window.addEventListener("ArticleEditor.Layout:change",g),window.addEventListener("ArticleEditor.ComponentContent:change",k),()=>{window.removeEventListener("ArticleEditor.Layout:change",g),window.removeEventListener("ArticleEditor.ComponentContent:change",k)}},[]),u.useEffect(()=>{if(!e||!R.isActive){D(!1);return}const g=L.current;if(!g)return;const k=()=>{S.direction==="horiz"?D(g.scrollWidth>g.clientWidth):D(g.scrollHeight>g.clientHeight)};k();const K=new ResizeObserver(k);return K.observe(g),()=>K.disconnect()},[e,R.isActive,n.length,W,S.direction]);const re=u.useCallback(()=>{const g=window.matchMedia("(max-width: 768px)").matches,k=Mi(N.color);g&&!s&&k>.9&&(document.body.style.backgroundColor=""),C(!0),P.current=!0;const K=U=>{U.target===_.current&&U.animationName&&(_.current&&$.current&&_.current.removeEventListener("animationend",$.current),$.current=null,P.current&&(P.current=!1,t()),C(!1))};_.current&&($.current=K,_.current.addEventListener("animationend",K))},[t,N.color,s]),Le=(g,k,K)=>{var U,te;if(g){if(q.type==="click"&&q.switch==="image")q.repeat==="close"&&a===n.length-1?re():(U=b.current)==null||U.go("+1");else if(q.type==="click"&&q.switch==="50/50"){const ee=g.getBoundingClientRect(),Z=k-ee.left,de=K-ee.top,Se=ee.width,ye=ee.height;let ue;S.direction==="horiz"?ue=Z<Se/2?"-1":"+1":ue=de<ye/2?"-1":"+1",(te=b.current)==null||te.go(ue)}}},ce=g=>{if(H.current){H.current=!1;return}const k=n[a],K=(k==null?void 0:k.image.objectFit)==="cover";let U,te;if("changedTouches"in g&&g.changedTouches.length>0)U=g.changedTouches[0].clientX,te=g.changedTouches[0].clientY;else if("clientX"in g)U=g.clientX,te=g.clientY;else return;let ee;if(K&&O.current){const Z=Fi(O.current);ee=U>=Z.left&&U<=Z.right&&te>=Z.top&&te<=Z.bottom}else{const Z=O.current?ki(O.current):null;if(!Z){g.target===g.currentTarget&&re();return}ee=U>=Z.x&&U<=Z.x+Z.width&&te>=Z.y&&te<=Z.y+Z.height}ee?Le(O.current,U,te):re()},fe=g=>{const k=g.target;(k.classList.contains(X.thumbsWrapper)||k.classList.contains(X.thumbsContainer))&&ce(g)};u.useEffect(()=>{if(!e)return;const g=k=>{var K,U;if(k.key==="Escape"){re();return}if(k.key==="ArrowRight"){d(te=>(te+1)%Math.max(n.length,1)),(K=b.current)==null||K.go("+1");return}k.key==="ArrowLeft"&&(d(te=>(te-1+Math.max(n.length,1))%Math.max(n.length,1)),(U=b.current)==null||U.go("-1"))};return window.addEventListener("keydown",g),()=>{window.removeEventListener("keydown",g)}},[e,re,n.length]),u.useEffect(()=>{if(e){if(d(0),T(k=>k+1),P.current=!1,C(!1),h(!1),x({}),!M)return;const g=new CustomEvent("page-overlay",{detail:{itemId:M}});window.dispatchEvent(g)}return()=>{_.current&&$.current&&(_.current.removeEventListener("animationend",$.current),$.current=null),h(!1)}},[e,M]),u.useEffect(()=>{f.current!==null&&f.current!==S.type&&T(g=>g+1),f.current=S.type},[S.type]),u.useEffect(()=>{if(!e)return;const g=document.body.style.overflow,k=window.matchMedia("(max-width: 768px)").matches,K=Mi(N.color);document.body.style.overflow="hidden",h(!1);const U=ee=>{ee.target===_.current&&!P.current&&ee.animationName&&(k&&!s&&K>.9&&(document.body.style.backgroundColor=N.color),h(!0),_.current&&A.current&&_.current.removeEventListener("animationend",A.current),A.current=null)};_.current&&(A.current=U,_.current.addEventListener("animationend",U));const te=ee=>{const Z=ee.target;Z&&(Z.closest(`.${X.thumbsWrapper}`)||Z.closest(`.${X.thumbsContainer}`))||S.type!=="slide"&&ee.preventDefault()};return document.addEventListener("touchmove",te,{passive:!1}),()=>{document.body.style.overflow=g,document.removeEventListener("touchmove",te),_.current&&A.current&&(_.current.removeEventListener("animationend",A.current),A.current=null),h(!1)}},[e,s,N.color,S.type]),u.useEffect(()=>{if(!e)return;const g=k=>{var U,te;if(P.current){k.stopPropagation();return}if(H.current){H.current=!1;return}const K=k.target;if(!(K&&(K.closest(`.${X.thumbsContainer}`)||K.closest(`.${X.thumbItem}`)||K.closest(`.${X.arrow}`)||K.closest(`.${X.closeButton}`)||K.closest(`.${X.caption}`)))){if(S.type==="slide"&&q.type==="drag"&&((te=(U=b.current)==null?void 0:U.splide)!=null&&te.root)){const ee=b.current.splide.root;if(K&&(ee.contains(K)||ee===K))return}if(k.touches.length===0&&k.changedTouches.length>0){const ee=n[a],Z=(ee==null?void 0:ee.image.objectFit)==="cover",de=k.changedTouches[0];let Se;if(Z&&O.current){const ye=Fi(O.current);Se=de.clientX>=ye.left&&de.clientX<=ye.right&&de.clientY>=ye.top&&de.clientY<=ye.bottom}else{const ye=O.current?ki(O.current):null;if(!ye)return;Se=de.clientX>=ye.x&&de.clientX<=ye.x+ye.width&&de.clientY>=ye.y&&de.clientY<=ye.y+ye.height}if(!Se){k.stopPropagation(),P.current=!0;const ye=ue=>{ue.stopPropagation(),ue.preventDefault(),document.removeEventListener("click",ye,!0)};document.addEventListener("click",ye,!0),re()}}}};return document.addEventListener("touchend",g,{passive:!0}),()=>{document.removeEventListener("touchend",g)}},[e,re,a,n]);const We=(S.type==="scale"||S.type==="fade")&&S.direction==="vert"&&q.type==="drag";u.useEffect(()=>{var ue,j;if(!e||!We||!((j=(ue=b.current)==null?void 0:ue.splide)!=null&&j.root))return;const g=b.current.splide.root,k=30,K=(Y,z)=>{if(w.current){const le=Math.abs(Y-w.current.x),xe=Math.abs(z-w.current.y);(le>0||xe>0)&&(H.current=!0)}},U=Y=>{w.current&&(Y.preventDefault(),K(Y.clientX,Y.clientY))},te=Y=>{w.current&&Y.touches.length>0&&(Y.preventDefault(),K(Y.touches[0].clientX,Y.touches[0].clientY))},ee=(Y,z)=>{if(!w.current||!b.current){w.current=null;return}const le=Math.abs(Y-w.current.x),xe=Math.abs(z-w.current.y);xe>k&&xe>le&&b.current.go(z<w.current.y?"+1":"-1"),w.current=null},Z=Y=>{w.current&&ee(Y.clientX,Y.clientY),document.removeEventListener("pointerup",Z),document.removeEventListener("pointercancel",Z),document.removeEventListener("pointermove",U)},de=Y=>{if(w.current){if(Y.changedTouches.length>0){const z=Y.changedTouches[0];ee(z.clientX,z.clientY)}document.removeEventListener("touchend",de),document.removeEventListener("touchcancel",de),document.removeEventListener("touchmove",te)}},Se=Y=>{w.current={x:Y.clientX,y:Y.clientY},H.current=!1,document.addEventListener("pointermove",U,{passive:!1}),document.addEventListener("pointerup",Z),document.addEventListener("pointercancel",Z)},ye=Y=>{Y.touches.length>0&&(w.current={x:Y.touches[0].clientX,y:Y.touches[0].clientY},H.current=!1,document.addEventListener("touchmove",te,{passive:!1}),document.addEventListener("touchend",de),document.addEventListener("touchcancel",de))};return g.addEventListener("pointerdown",Se),g.addEventListener("touchstart",ye),()=>{g.removeEventListener("pointerdown",Se),g.removeEventListener("touchstart",ye),document.removeEventListener("pointermove",U),document.removeEventListener("pointerup",Z),document.removeEventListener("pointercancel",Z),document.removeEventListener("touchmove",te),document.removeEventListener("touchend",de),document.removeEventListener("touchcancel",de),w.current=null,H.current=!1}},[e,We,p]);const ne={backgroundColor:N.color,backdropFilter:`blur(${N.blur}px)`,animationDuration:`${parseInt(J.duration)}ms`,animationTimingFunction:"ease",animationFillMode:"both"};return typeof document>"u"||!document.getElementById(r)?null:er.createPortal(l.jsxs(l.Fragment,{children:[l.jsx("div",{ref:s?null:_,className:$e(X.background,y?oe:Q,{[X.editor]:s},{[X.hidden]:!e}),style:{...ne,...m&&!s&&!y?{position:"absolute"}:{}}}),l.jsxs("div",{ref:s?_:null,className:$e(X.contentStyle,y?G:ie,{[X.editor]:s},{[X.hidden]:!e}),style:{animationDuration:`${parseInt(J.duration)}ms`,animationTimingFunction:"ease",animationFillMode:"both"},children:[l.jsx(li,{onMove:g=>d(g.index),ref:b,className:X.lightboxSplide,options:{arrows:!1,speed:S.duration?parseInt(S.duration):500,direction:S.direction==="horiz"||S.type==="fade"||S.type==="scale"?"ltr":"ttb",pagination:!1,drag:q.type==="drag"&&!We,perPage:1,width:"100%",height:"100%",type:S.type==="fade"||S.type==="scale"?"fade":"loop",padding:0,rewind:q.repeat!=="close",start:0},style:{"--splide-speed":S.duration},children:n.map((g,k)=>{const K=Dn(B.position,B.offset,s),U=`${E.scalingValue(B.padding.top,s)} ${E.scalingValue(B.padding.right,s)} ${E.scalingValue(B.padding.bottom,s)} ${E.scalingValue(B.padding.left,s)}`,te=S.type==="scale"?(()=>{const{transform:ee,...Z}=K;return{...Z,position:"absolute",padding:U,boxSizing:"border-box","--position-transform":ee||"none"}})():{...K,position:"absolute",padding:U,boxSizing:"border-box"};return l.jsx(ci,{children:l.jsx("div",{className:X.imgWrapper,onClick:ce,children:l.jsx("img",{ref:k===a?O:null,className:$e(X.imageStyle,{[X.contain]:g.image.objectFit==="contain",[X.cover]:g.image.objectFit==="cover",[X.scaleSlide]:S.type==="scale"}),src:g.image.url,alt:g.image.name??"",style:{...te,pointerEvents:g.image.objectFit==="contain"?"none":"auto"}})})},k)})},p),F.isActive&&l.jsxs(l.Fragment,{children:[l.jsx("div",{className:$e(X.arrow,{[X.arrowVertical]:S.direction==="vert"}),style:{color:F.color,"--arrow-hover-color":F.hover},children:l.jsxs("button",{className:X.arrowInner,style:{transform:`translate(${E.scalingValue(F.offset.x,s)}, ${E.scalingValue(F.offset.y*(S.direction==="horiz"?1:-1),s)}) scale(${F.scale}) rotate(${S.direction==="horiz"?"0deg":"90deg"})`},onClick:()=>{var g;return(g=b.current)==null?void 0:g.go("-1")},"aria-label":"Previous",children:[F.arrowsImgUrl&&l.jsx(kt,{url:F.arrowsImgUrl,fill:F.color,hoverFill:F.hover,className:$e(X.arrowImg,X.mirror)}),!F.arrowsImgUrl&&l.jsx(Ni,{color:F.color,className:$e(X.arrowIcon,X.arrowImg,X.mirror)})]})}),l.jsx("div",{className:$e(X.arrow,X.nextArrow,{[X.arrowVertical]:S.direction==="vert"}),style:{color:F.color,"--arrow-hover-color":F.hover},children:l.jsxs("button",{className:X.arrowInner,style:{transform:`translate(${E.scalingValue(F.offset.x*(S.direction==="horiz"?-1:1),s)}, ${E.scalingValue(F.offset.y,s)}) scale(${F.scale}) rotate(${S.direction==="horiz"?"0deg":"90deg"})`},onClick:()=>{var g;return(g=b.current)==null?void 0:g.go("+1")},"aria-label":"Next",children:[F.arrowsImgUrl&&l.jsx(kt,{url:F.arrowsImgUrl,fill:F.color,hoverFill:F.hover,className:X.arrowImg}),!F.arrowsImgUrl&&l.jsx(Ni,{color:F.color,className:$e(X.arrowIcon,X.arrowImg)})]})})]}),N.closeIconUrl&&(()=>{const g=Dn(N.closeIconAlign,N.closeIconOffset,s),k=`scale(${N.closeIconScale})`,K=g.transform?`${g.transform} ${k}`:k;return l.jsx("button",{className:X.closeButton,style:{...g,transform:K},onClick:re,"aria-label":"Close lightbox",children:l.jsx(kt,{url:N.closeIconUrl,fill:N.closeIconColor??"#000000",hoverFill:N.closeIconHover??"#cccccc"})})})(),I&&I.isActive&&o.imageCaption&&((v=n[a])==null?void 0:v.imageCaption)&&(()=>{const{widthSettings:g,fontSettings:k,letterSpacing:K,textAlign:U,wordSpacing:te,fontSizeLineHeight:ee,textAppearance:Z,color:de}=o.imageCaption;return l.jsx("div",{className:X.caption,style:{...Dn(I.alignment,I.offset,s),fontFamily:bo(k.fontFamily),fontWeight:k.fontWeight,fontStyle:k.fontStyle,width:g.sizing==="auto"?"max-content":E.scalingValue(g.width,s),letterSpacing:E.scalingValue(K,s),wordSpacing:E.scalingValue(te,s),textAlign:U,fontSize:E.scalingValue(ee.fontSize,s),lineHeight:E.scalingValue(ee.lineHeight,s),textTransform:Z.textTransform??"none",textDecoration:Z.textDecoration??"none",fontVariant:Z.fontVariant??"normal",color:de},onClick:Se=>Se.stopPropagation(),children:l.jsx("div",{"data-styles":"imageCaption",className:X.captionTextInner,style:{"--link-color":I.linkColor,"--link-hover-color":I.linkHoverColor},children:l.jsx(Ln,{content:n[a].imageCaption})})})})(),R.isActive&&(()=>{const[g,k]=R.position.split("-"),K=S.direction==="horiz"?`${g}-left`:R.position,U=Dn(K,R.offset,s),te=()=>{if(S.direction==="horiz"){if(k==="left")return"flex-start";if(k==="center")return"center";if(k==="right")return"flex-end"}else{if(g==="top")return"flex-start";if(g==="middle")return"center";if(g==="bottom")return"flex-end"}return"flex-start"};return l.jsx("div",{ref:L,className:X.thumbsWrapper,onClick:ee=>fe(ee),style:{position:s?"absolute":"fixed",...U,...S.direction==="horiz"?{maxWidth:"100vw",width:"100%",overflowX:"auto",overflowY:"hidden"}:{maxHeight:"100vh",overflowY:"auto",overflowX:"hidden"}},children:l.jsx("div",{className:$e(X.thumbsContainer,{[X.thumbsContainerVertical]:S.direction==="vert",[X.thumbsAlignStart]:R.align==="start",[X.thumbsAlignCenter]:R.align==="center",[X.thumbsAlignEnd]:R.align==="end"}),style:{gap:E.scalingValue(R.grid.gap,s),justifyContent:V?"flex-start":te()},children:n.map((ee,Z)=>{const de=Z===a,Se=W[Z],ue=R.grid.size*(de?R.activeState.scale:1),j=()=>{if(R.fit!=="fit")return{};if(!Se)return S.direction==="horiz"?{height:E.scalingValue(ue,s)}:{width:E.scalingValue(ue,s)};const Y=Se.width/Se.height;if(S.direction==="horiz"){const z=ue,le=z*Y;return{width:E.scalingValue(le,s),height:E.scalingValue(z,s)}}else{const z=ue,le=z/Y;return{width:E.scalingValue(z,s),height:E.scalingValue(le,s)}}};return l.jsx("button",{className:X.thumbItem,style:{...S.direction==="horiz"&&R.fit!=="fit"?{height:E.scalingValue(ue,s)}:{},...S.direction==="vert"&&R.fit!=="fit"?{width:E.scalingValue(ue,s)}:{},...R.fit==="cover"?{width:E.scalingValue(ue,s),height:E.scalingValue(ue,s)}:{},...j(),transition:de?"all 0.25s ease-out":"none",opacity:de?R.activeState.opacity/100:R.opacity/100,"--thumb-hover":R.activeState.opacity/100},onClick:Y=>{var z;Y.stopPropagation(),d(Z),(z=b.current)==null||z.go(Z)},onMouseEnter:()=>{var Y;R.triggers==="hov"&&((Y=b.current)==null||Y.go(Z))},children:l.jsx("img",{src:ee.image.url,alt:ee.image.name??"",onLoad:Y=>{const z=Y.currentTarget;z.naturalWidth&&z.naturalHeight&&x(le=>({...le,[Z]:{width:z.naturalWidth,height:z.naturalHeight}}))},style:{objectFit:R.fit==="cover"?"cover":"contain",...R.fit==="fit"?{maxWidth:"100%",maxHeight:"100%",objectFit:"contain"}:{},...R.fit==="cover"?{width:"100%",height:"100%"}:{}}})},`${ee.image.name}-${Z}`)})})})})()]})]}),document.getElementById(r))};function Ni({color:e,className:t}){return l.jsx("svg",{viewBox:"0 0 10 18",className:t,children:l.jsx("g",{id:"Symbols",stroke:"none",strokeWidth:"1",fillRule:"evenodd",children:l.jsx("path",{d:"M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z",id:"Shape-Copy",fill:e,transform:"translate(5, 9) rotate(-90) translate(-5, -9)"})})})}const nc={element:ec,id:"lightbox",name:"Lightbox",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Lightbox.png"},defaultSize:{d:{width:440,height:550},t:{width:235,height:293},m:{width:265,height:331}},fontSettingsPaths:{content:[],parameters:[{path:"styles.imageCaption.fontSettings"}]},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.thumbnailBlock.cover.url",placeholderEnabled:!0},{path:"settings.controls.arrowsImgUrl"},{path:"settings.area.closeIconUrl"}]},schema:{type:"object",properties:{settings:{type:"object",properties:{thumbnailBlock:{display:{type:"settings-block",triggerEvent:"close"},type:"object",properties:{cover:{title:"COVER",icon:"cover",tooltip:"Cover Image",type:"object",properties:{url:{type:"string",display:{type:"cover-image-input"}}}}}},lightboxBlock:{display:{type:"settings-block",triggerEvent:"open"},type:"object",properties:{appear:{title:"APPEAR",icon:"transition",tooltip:"Appearance",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["slide in","fade in","mix"]},duration:{type:"string",label:"T",display:{type:"step-selector"},enum:["100ms","250ms","500ms","1000ms","1500ms","2000ms"]},direction:{type:"string",title:"From",display:{type:"direction-control"},enum:["top","left","right","bottom"]}}},triggers:{title:"TRIGGERS",icon:"target",tooltip:"Triggers",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["click","drag"]},switch:{type:"string",display:{type:"ratio-group"},enum:["image","50/50"]},repeat:{type:"string",title:"Repeat",display:{visible:!1,type:"ratio-group"},enum:["close","loop"]}}},slider:{title:"SLIDER",icon:"horizontal-resize",tooltip:"Slider",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["slide","fade","scale"]},direction:{type:"string",display:{type:"ratio-group"},enum:["horiz","vert"]},duration:{type:"string",label:"T",display:{type:"step-selector"},enum:["100ms","250ms","500ms","1000ms","1500ms","2000ms"]}}},thumbnail:{title:"THUMB",icon:"thumbnail",tooltip:"Thumbnail",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},position:{display:{type:"align-grid"},type:"string",enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},fit:{type:"string",display:{type:"ratio-group"},enum:["cover","fit"]},align:{type:"string",title:"Align",display:{type:"align-group",direction:"horizontal"},enum:["start","center","end"]},triggers:{type:"string",title:"Triggers",display:{type:"ratio-group",direction:"horizontal"},enum:["clk","hov"]},grid:{type:"object",title:"Grid",display:{type:"group"},properties:{size:{type:"number",label:"Box",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},gap:{type:"number",label:"Gap",scalingEnabled:!0,min:0,display:{type:"numeric-input"}}}},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},opacity:{type:"number",title:"Opacity",label:"icon:opacity",min:0,max:100,step:1,display:{type:"numeric-input"}},activeState:{type:"object",title:"ACTIVE",display:{type:"group"},properties:{scale:{type:"number",title:"Scale",min:1,max:5,step:.1,display:{type:"range-control"}},opacity:{type:"number",title:"Opacity",label:"icon:opacity",min:0,max:100,step:1,display:{type:"numeric-input"}}}}}},layout:{title:"LAYOUT",icon:"layout",tooltip:"Layout",type:"object",properties:{position:{display:{type:"align-grid"},type:"string",enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},padding:{type:"object",title:"Padding",display:{type:"padding-controls"},properties:{top:{min:0,step:1,type:"number"},left:{min:0,step:1,type:"number"},right:{min:0,step:1,type:"number"},bottom:{min:0,step:1,type:"number"}}}}},controls:{title:"CONTROLS",icon:"controls",tooltip:"Controls",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},arrowsImgUrl:{type:["string","null"],display:{type:"settings-image-input"}},offset:{title:"Offset",type:"object",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},scale:{type:"number",title:"Scale",min:.5,max:5,step:.1,display:{type:"range-control"}},color:{title:"Color",type:"string",display:{type:"settings-color-picker",format:"single"}},hover:{title:"Hover",type:"string",display:{type:"settings-color-picker",format:"single"}}}},area:{title:"AREA",icon:"area",tooltip:"Area",type:"object",properties:{color:{type:"string",display:{type:"settings-color-picker",format:"single"}},blur:{type:"number",label:"icon:blur",display:{type:"numeric-input"}},closeIconUrl:{type:["string","null"],title:"Close Icon",display:{type:"settings-image-input"}},closeIconAlign:{display:{type:"align-grid",direction:"horizontal"},type:"string",enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},closeIconScale:{type:"number",title:"Scale",min:.5,max:5,step:.1,display:{type:"range-control"}},closeIconOffset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},closeIconColor:{title:"Color",type:"string",display:{type:"settings-color-picker",format:"single"}},closeIconHover:{title:"Hover",type:"string",display:{type:"settings-color-picker",format:"single"}}}},caption:{title:"DESC",icon:"text-icon",tooltip:"Description",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},alignment:{type:"string",display:{type:"align-grid"},enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},offset:{title:"Offset",type:"object",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},linkColor:{title:"Link",type:"string",display:{type:"settings-color-picker",format:"single"}},linkHoverColor:{title:"Link Hov",type:"string",display:{type:"settings-color-picker",format:"single"}}}}}}},default:{d:{thumbnailBlock:{cover:{url:"https://cdn.cntrl.site/component-assets/Cover.jpg"}},lightboxBlock:{appear:{type:"slide in",duration:"1000ms",direction:"bottom"},triggers:{type:"click",switch:"image",repeat:"loop"},slider:{type:"slide",direction:"vert",duration:"1000ms"},thumbnail:{isActive:!0,position:"middle-left",fit:"fit",align:"start",triggers:"hov",grid:{size:.05,gap:.01},offset:{x:.01,y:0},opacity:50,activeState:{scale:1,opacity:100}},layout:{position:"middle-center",offset:{x:0,y:0},padding:{top:.06,right:0,bottom:.06,left:0}},controls:{isActive:!1,arrowsImgUrl:null,offset:{x:0,y:0},scale:1,color:"#000000",hover:"#cccccc"},area:{color:"rgba(28,31,34,0.9)",blur:0,closeIconUrl:null,closeIconColor:"#000000",closeIconHover:"#cccccc",closeIconAlign:"top-right",closeIconOffset:{x:0,y:0},closeIconScale:1},caption:{isActive:!0,alignment:"middle-center",offset:{x:0,y:0},linkColor:"#cccccc",linkHoverColor:"#cccccc"}}},m:{thumbnailBlock:{cover:{url:"https://cdn.cntrl.site/component-assets/Cover.jpg"}},lightboxBlock:{appear:{type:"fade in",duration:"500ms",direction:"bottom"},triggers:{type:"click",switch:"image",repeat:"loop"},slider:{type:"slide",direction:"horiz",duration:"1000ms"},thumbnail:{isActive:!0,position:"bottom-center",fit:"fit",align:"start",triggers:"hov",grid:{size:.1,gap:.05},offset:{x:.01,y:-.05},opacity:50,activeState:{scale:1,opacity:100}},layout:{position:"middle-center",offset:{x:0,y:0},padding:{top:.06,right:.05,bottom:.06,left:.05}},controls:{isActive:!1,arrowsImgUrl:null,offset:{x:0,y:0},scale:1,color:"#000000",hover:"#cccccc"},area:{color:"rgba(28,31,34,0.9)",blur:0,closeIconUrl:null,closeIconColor:"#000000",closeIconHover:"#cccccc",closeIconAlign:"top-right",closeIconOffset:{x:0,y:0},closeIconScale:1},caption:{isActive:!0,alignment:"middle-center",offset:{x:0,y:0},hover:"#cccccc"}}},t:{thumbnailBlock:{cover:{url:"https://cdn.cntrl.site/component-assets/Cover.jpg"}},lightboxBlock:{appear:{type:"fade in",duration:"500ms",direction:"bottom"},triggers:{type:"click",switch:"image",repeat:"loop"},slider:{type:"slide",direction:"vert",duration:"1000ms"},thumbnail:{isActive:!0,position:"middle-left",fit:"fit",align:"start",triggers:"hov",grid:{size:.05,gap:.01},offset:{x:.03,y:0},opacity:50,activeState:{scale:1,opacity:100}},layout:{position:"middle-center",offset:{x:0,y:0},padding:{top:.06,right:.1,bottom:.06,left:.1}},controls:{isActive:!1,arrowsImgUrl:null,offset:{x:0,y:0},scale:1,color:"#000000",hover:"#cccccc"},area:{color:"rgba(28,31,34,0.9)",blur:0,closeIconUrl:null,closeIconColor:"#000000",closeIconHover:"#cccccc",closeIconAlign:"top-right",closeIconOffset:{x:0,y:0},closeIconScale:1},caption:{isActive:!0,alignment:"middle-center",offset:{x:0,y:0},hover:"#cccccc"}}}},displayRules:[{if:{name:"lightboxBlock.appear.type",value:"slide in"},then:{name:"properties.lightboxBlock.properties.appear.properties.direction.display.visible",value:!0}},{if:{name:"lightboxBlock.slider.direction",value:"vert"},then:{name:"properties.lightboxBlock.properties.thumbnail.properties.align.display.direction",value:"vertical"}},{if:{name:"lightboxBlock.appear.type",value:"mix"},then:{name:"properties.lightboxBlock.properties.appear.properties.direction.display.visible",value:!0}},{if:{name:"lightboxBlock.appear.type",value:"fade in"},then:{name:"properties.lightboxBlock.properties.appear.properties.direction.display.visible",value:!1}},{if:[{name:"lightboxBlock.triggers.type",value:"click"},{name:"lightboxBlock.triggers.switch",value:"image"}],then:{name:"properties.lightboxBlock.properties.triggers.properties.repeat.display.visible",value:!0}}]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},imageCaption:{label:"Description",placeholder:"Add Caption...",display:{type:"rich-text"}}},required:["image"]},default:[{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/2.jpg",name:"Slider-1.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/3.jpg",name:"Slider-2.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/4.jpg",name:"Slider-3.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]}]},styles:{type:"object",properties:{imageCaption:{dataName:"caption",type:"object",properties:{fontSettings:{type:"object",display:{type:"font-settings"},properties:{fontFamily:{type:"string"},fontWeight:{type:"number"},fontStyle:{type:"string"}}},widthSettings:{display:{type:"text-width-control"},type:"object",properties:{width:{type:"number"},sizing:{type:"string",enum:["auto","manual"]}}},fontSizeLineHeight:{type:"object",display:{type:"font-size-line-height"},properties:{fontSize:{type:"number"},lineHeight:{type:"number"}}},letterSpacing:{display:{type:"letter-spacing-input"},type:"number"},wordSpacing:{display:{type:"word-spacing-input"},type:"number"},textAlign:{display:{type:"text-align-control"},type:"string",enum:["left","center","right","justify"]},textAppearance:{display:{type:"text-appearance"},properties:{textTransform:{type:"string",enum:["none","uppercase","lowercase","capitalize"]},textDecoration:{type:"string",enum:["none","underline"]},fontVariant:{type:"string",enum:["normal","small-caps"]}}},color:{display:{type:"style-panel-color-picker"},type:"string"}}}},default:{imageCaption:{widthSettings:{width:.13,sizing:"auto"},fontSettings:{fontFamily:"Arial",fontWeight:400,fontStyle:"normal"},fontSizeLineHeight:{fontSize:.02,lineHeight:.02},letterSpacing:0,wordSpacing:0,textAlign:"left",textAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},color:"#000000"}}}},required:["settings","content","styles"]}};function jn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function oc(e){return`
7
7
  .${e}-wrapper {
8
8
  display: flex;
9
9
  flex-direction: column;
10
10
  width: 100%;
11
- min-height: ${zn(48)};
11
+ min-height: ${jn(48)};
12
12
  }
13
13
  .${e}-wrapper.${e}-type-C .${e}-input:focus-visible,
14
14
  .${e}-wrapper.${e}-type-C .${e}-button:focus-visible {
@@ -32,7 +32,7 @@
32
32
  min-width: 0;
33
33
  }
34
34
  .${e}-field-group.${e}-labeled {
35
- gap: ${zn(4)};
35
+ gap: ${jn(4)};
36
36
  }
37
37
  .${e}-field-label {
38
38
  white-space: nowrap;
@@ -128,11 +128,11 @@
128
128
  outline: none;
129
129
  }
130
130
  .${e}-success {
131
- margin-top: ${zn(8)};
131
+ margin-top: ${jn(8)};
132
132
  color: var(--${e}-success-success-color, var(--${e}-success-color));
133
133
  }
134
134
  .${e}-error {
135
- margin-top: ${zn(8)};
135
+ margin-top: ${jn(8)};
136
136
  color: var(--${e}-error-error-color, var(--${e}-error-color));
137
137
  }
138
138
  .${e}-overlay-anchor {
@@ -155,7 +155,7 @@
155
155
  pointer-events: auto;
156
156
  z-index: 10;
157
157
  }
158
- `}function mc({settings:e,isEditor:t,isEditMode:n,metadata:i,activeEvent:a}){const s=!!n,{prefix:o}=E.useScopedStyles(),{type:d="A",fieldsToShow:l=2,fields:u=[],buttonLabel:p,gap:I,fieldsGap:b,buttonCorners:w,buttonStroke:f,buttonPadding:h,isButtonFullWidth:T,inputCorners:L,inputStroke:C,inputPadding:m,inputColor:z,inputTextColor:j,inputBorderColor:R,placeholderColor:x,buttonColor:A,buttonTextColor:S,buttonBorderColor:K,labelTextColor:v,successColor:D,errorColor:W,fontFamily:q,inputFontSettings:G,inputFontSize:$,inputLineHeight:H,inputLetterSpacing:_,inputWordSpacing:B,inputTextAppearance:k,buttonFontSettings:P,buttonFontSize:te,buttonLineHeight:ae,buttonLetterSpacing:re,buttonWordSpacing:U,buttonTextAppearance:N,labelFontSettings:oe,labelFontSize:ye,labelLineHeight:ce,labelLetterSpacing:ge,labelWordSpacing:we,labelTextAppearance:ee,statusFontSettings:y,statusFontSize:g,statusLineHeight:V,statusLetterSpacing:J,statusWordSpacing:Q,statusTextAppearance:M,successMessage:F,errorMessage:O,stateOverrides:ie}=e,pe=d==="B",le=u.slice(0,Math.min(l,u.length)),he={fontSettings:{fontFamily:q,fontWeight:(G==null?void 0:G.fontWeight)??400,fontStyle:(G==null?void 0:G.fontStyle)??"normal"},fontSize:$??.01,lineHeight:H,letterSpacing:_??0,wordSpacing:B??0,textAppearance:k,color:j},Y=ft(Ue(he,t)),Z=E.scalingValue(C??0,t),X=E.scalingValue((H??$??.01)+((m==null?void 0:m.top)??0)+((m==null?void 0:m.bottom)??0)+(d==="C"?C??0:(C??0)*2),t),se={...Y,borderStyle:"solid",borderRadius:d==="C"?0:E.scalingValue(L??0,t),...d==="C"?{borderTopWidth:0,borderRightWidth:0,borderBottomWidth:Z,borderLeftWidth:0}:{borderWidth:Z},paddingTop:E.scalingValue((m==null?void 0:m.top)??0,t),paddingRight:E.scalingValue((m==null?void 0:m.right)??0,t),paddingBottom:E.scalingValue((m==null?void 0:m.bottom)??0,t),paddingLeft:E.scalingValue((m==null?void 0:m.left)??0,t),height:X,minHeight:X},Te={fontSettings:{fontFamily:q,fontWeight:(P==null?void 0:P.fontWeight)??400,fontStyle:(P==null?void 0:P.fontStyle)??"normal"},fontSize:te??.01,lineHeight:ae,letterSpacing:re??0,wordSpacing:U??0,textAppearance:N,color:S},Le=ft(Ue(Te,t)),Oe=E.scalingValue(f??0,t),ve={fontSettings:{fontFamily:q,fontWeight:(oe==null?void 0:oe.fontWeight)??400,fontStyle:(oe==null?void 0:oe.fontStyle)??"normal"},fontSize:ye??.01,lineHeight:ce,letterSpacing:ge??0,wordSpacing:we??0,textAppearance:ee,color:v},ke=Ue(ve,t),_e={fontSettings:{fontFamily:q,fontWeight:(y==null?void 0:y.fontWeight)??400,fontStyle:(y==null?void 0:y.fontStyle)??"normal"},fontSize:g??.01,lineHeight:V,letterSpacing:J??0,wordSpacing:Q??0,textAppearance:M,color:D},Ae=ft(Ue(_e,t)),Ve=E.buildColorVars(o,{inputColor:z,inputTextColor:j,inputBorderColor:R,placeholderColor:x!=null&&x.trim()?x:"#cccccc",buttonColor:A,buttonTextColor:S,buttonBorderColor:K,labelTextColor:v,successColor:D,errorColor:W},gc,hc,ie),[me,$e]=c.useState(()=>Object.fromEntries(le.map(xe=>[xe.name,""]))),[Fe,Me]=c.useState("idle"),[Ye,Be]=c.useState(null),fe=a==="success"?"success":a==="error"?"error":Fe,Xe=a==="error"?O:Ye,Je=a==="filled",Ge=c.useMemo(()=>{if(!Je)return me;let xe=null;for(const je of le)(me[je.name]??"").trim().length>0||(xe=xe??{...me},xe[je.name]="Filled");return xe??me},[me,Je,le]),mt=fe==="error"?E.getFormFieldValidationError(le,Ge):null,Pt=`${a&&a!=="default"?`${o}-state-${a}`:""}`.trim(),Ot=i==null?void 0:i.submitUrl,Re=(xe,je)=>{$e(qe=>({...qe,[xe]:je}))},Ze=async xe=>{xe.preventDefault();const je=Object.fromEntries(le.map(ze=>{var gt;return[ze.name,((gt=me[ze.name])==null?void 0:gt.trim())??""]}).filter(([,ze])=>ze));if(!Ot){Me("error"),Be("No integrations were found for this form.");return}if(Object.keys(je).length===0)return;const qe=E.getFormFieldValidationError(le,me);if(qe){Me("error"),Be(qe);return}Me("submitting"),Be(null);try{const ze=await fetch(Ot,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(je)});if(!ze.ok){const gt=await ze.text();throw new Error(gt||`Request failed: ${ze.status}`)}Me("success"),$e(Object.fromEntries(le.map(gt=>[gt.name,""])))}catch(ze){Me("error"),Be(ze instanceof Error?ze.message:"Something went wrong")}};return r.jsxs("div",{className:`${o}-wrapper ${o}-type-${d} ${Pt}`.trim(),style:Ve,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:pc(o)}}),r.jsxs("form",{onSubmit:Ze,className:`${o}-form`,children:[r.jsx("div",{className:`${o}-fields`,children:le.map((xe,je)=>r.jsxs(c.Fragment,{children:[je>0&&r.jsx("div",{"data-controls":s?"fieldsGap":void 0,className:s?`${o}-control`:void 0,style:{height:E.scalingValue(b??0,t)}}),r.jsxs("div",{className:`${o}-field-group${pe?` ${o}-labeled`:""}`,children:[pe&&r.jsx("span",{className:`${o}-field-label`,style:ke?{...ke,lineHeight:ke.fontSize}:void 0,children:xe.label||xe.name}),xe.type==="textarea"?r.jsx("textarea",{name:xe.name,autoComplete:"off",value:Ge[xe.name]??"",onChange:qe=>Re(xe.name,qe.target.value),placeholder:xe.placeholder,className:`${o}-input`,style:se,rows:1,"data-filled":Je||(Ge[xe.name]??"").trim().length>0,"data-field-type":"textarea"}):r.jsx("input",{type:xe.type==="phone"?"tel":xe.type==="email"?"email":"text",name:xe.name,autoComplete:"off",value:Ge[xe.name]??"",onChange:qe=>Re(xe.name,qe.target.value),placeholder:xe.placeholder,required:xe.isRequired??xe.type==="email",className:`${o}-input`,style:se,"data-filled":Je||(Ge[xe.name]??"").trim().length>0})]})]},je))}),r.jsx("div",{"data-controls":s?"gap":void 0,className:s?`${o}-control`:void 0,style:{height:E.scalingValue(I??0,t)}}),r.jsx("div",{className:`${o}-overlay-anchor`,children:r.jsx("button",{type:"submit",className:`${o}-button`,style:{borderStyle:"solid",borderRadius:E.scalingValue(w??0,t),borderWidth:Oe,paddingTop:E.scalingValue((h==null?void 0:h.top)??0,t),paddingRight:E.scalingValue((h==null?void 0:h.right)??0,t),paddingBottom:E.scalingValue((h==null?void 0:h.bottom)??0,t),paddingLeft:E.scalingValue((h==null?void 0:h.left)??0,t),...Le,...T?{width:"100%",textAlign:"center",whiteSpace:"normal"}:{}},children:r.jsx("span",{className:`${o}-overlay-anchor`,style:T?{display:"inline-block",maxWidth:"100%",whiteSpace:"normal",textAlign:"center"}:void 0,children:Fe==="submitting"?"...":p})})})]}),fe==="success"&&r.jsx("p",{className:`${o}-success`,style:{...Ae},children:F}),fe==="error"&&r.jsx("p",{className:`${o}-error`,style:{...Ae},role:"alert",children:mt??Xe??O})]})}const gc={inputColor:"input-color",inputTextColor:"input-text-color",inputBorderColor:"input-border-color",placeholderColor:"placeholder-color",buttonColor:"button-color",buttonTextColor:"button-text-color",buttonBorderColor:"button-border-color",labelTextColor:"label-text-color",successColor:"success-color",errorColor:"error-color"},hc=["hover","focus","filled","success","error"],fc=`import React, { useMemo, useState } from 'react';
158
+ `}function ic({settings:e,isEditor:t,isEditMode:n,isPreviewMode:o,metadata:i,activeEvent:r}){const s=!!n,c=o&&t||!t,{prefix:a}=E.useScopedStyles(),{type:d="A",fieldsToShow:p=2,fields:T=[],buttonLabel:y,gap:C,fieldsGap:m,buttonCorners:h,buttonStroke:W,buttonPadding:x,isButtonFullWidth:b,inputCorners:f,inputStroke:O,inputPadding:P,inputColor:_,inputTextColor:$,inputBorderColor:A,placeholderColor:w,buttonColor:H,buttonTextColor:L,buttonBorderColor:V,labelTextColor:D,successColor:J,errorColor:q,fontFamily:S,inputFontSettings:R,inputFontSize:F,inputLineHeight:N,inputLetterSpacing:I,inputWordSpacing:B,inputTextAppearance:ie,buttonFontSettings:Q,buttonFontSize:oe,buttonLineHeight:G,buttonLetterSpacing:M,buttonWordSpacing:re,buttonTextAppearance:Le,labelFontSettings:ce,labelFontSize:fe,labelLineHeight:We,labelLetterSpacing:ne,labelWordSpacing:v,labelTextAppearance:g,statusFontSettings:k,statusFontSize:K,statusLineHeight:U,statusLetterSpacing:te,statusWordSpacing:ee,statusTextAppearance:Z,successMessage:de,errorMessage:Se,stateOverrides:ye}=e,ue=d==="B",j=T.slice(0,Math.min(p,T.length)),Y={fontSettings:{fontFamily:S,fontWeight:(R==null?void 0:R.fontWeight)??400,fontStyle:(R==null?void 0:R.fontStyle)??"normal"},fontSize:F??.01,lineHeight:N,letterSpacing:I??0,wordSpacing:B??0,textAppearance:ie,color:$},z=ht(Xe(Y,t)),le=E.scalingValue(O??0,t),xe=E.scalingValue((N??F??.01)+((P==null?void 0:P.top)??0)+((P==null?void 0:P.bottom)??0)+(d==="C"?O??0:(O??0)*2),t),Ce={...z,borderStyle:"solid",borderRadius:d==="C"?0:E.scalingValue(f??0,t),...d==="C"?{borderTopWidth:0,borderRightWidth:0,borderBottomWidth:le,borderLeftWidth:0}:{borderWidth:le},paddingTop:E.scalingValue((P==null?void 0:P.top)??0,t),paddingRight:E.scalingValue((P==null?void 0:P.right)??0,t),paddingBottom:E.scalingValue((P==null?void 0:P.bottom)??0,t),paddingLeft:E.scalingValue((P==null?void 0:P.left)??0,t),height:xe,minHeight:xe},Ie={fontSettings:{fontFamily:S,fontWeight:(Q==null?void 0:Q.fontWeight)??400,fontStyle:(Q==null?void 0:Q.fontStyle)??"normal"},fontSize:oe??.01,lineHeight:G,letterSpacing:M??0,wordSpacing:re??0,textAppearance:Le,color:L},Ne=ht(Xe(Ie,t)),Ze=E.scalingValue(W??0,t),ve={fontSettings:{fontFamily:S,fontWeight:(ce==null?void 0:ce.fontWeight)??400,fontStyle:(ce==null?void 0:ce.fontStyle)??"normal"},fontSize:fe??.01,lineHeight:We,letterSpacing:ne??0,wordSpacing:v??0,textAppearance:g,color:D},ke=Xe(ve,t),He={fontSettings:{fontFamily:S,fontWeight:(k==null?void 0:k.fontWeight)??400,fontStyle:(k==null?void 0:k.fontStyle)??"normal"},fontSize:K??.01,lineHeight:U,letterSpacing:te??0,wordSpacing:ee??0,textAppearance:Z,color:J},Fe=ht(Xe(He,t)),Be=E.buildColorVars(a,{inputColor:_,inputTextColor:$,inputBorderColor:A,placeholderColor:w!=null&&w.trim()?w:"#cccccc",buttonColor:H,buttonTextColor:L,buttonBorderColor:V,labelTextColor:D,successColor:J,errorColor:q},rc,ac,ye),[Oe,Yt]=u.useState(()=>Object.fromEntries(j.map(me=>[me.name,""]))),[bt,nt]=u.useState("idle"),[At,be]=u.useState(null),lt=r==="success"?"success":r==="error"?"error":bt,ct=r==="error"?Se:At,dt=r==="filled",xt=u.useMemo(()=>{if(!dt)return Oe;let me=null;for(const qe of j)(Oe[qe.name]??"").trim().length>0||(me=me??{...Oe},me[qe.name]="Filled");return me??Oe},[Oe,dt,j]),Xt=lt==="error"?E.getFormFieldValidationError(j,xt):null,Je=`${r&&r!=="default"?`${a}-state-${r}`:""}`.trim(),Qe=i==null?void 0:i.submitUrl,ze=(me,qe)=>{Yt(Ue=>({...Ue,[me]:qe}))},Ke=async me=>{if(me.preventDefault(),!c)return;const qe=Object.fromEntries(j.map(et=>{var Ct;return[et.name,((Ct=Oe[et.name])==null?void 0:Ct.trim())??""]}).filter(([,et])=>et));if(!Qe){nt("error"),be("No integrations were found for this form.");return}if(Object.keys(qe).length===0)return;const Ue=E.getFormFieldValidationError(j,Oe);if(Ue){nt("error"),be(Ue);return}nt("submitting"),be(null);try{const et=await fetch(Qe,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(qe)});if(!et.ok){const Ct=await et.text();throw new Error(Ct||`Request failed: ${et.status}`)}nt("success"),Yt(Object.fromEntries(j.map(Ct=>[Ct.name,""])))}catch(et){nt("error"),be(et instanceof Error?et.message:"Something went wrong")}};return l.jsxs("div",{className:`${a}-wrapper ${a}-type-${d} ${Je}`.trim(),style:Be,children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:oc(a)}}),l.jsxs("form",{onSubmit:Ke,className:`${a}-form`,children:[l.jsx("div",{className:`${a}-fields`,children:j.map((me,qe)=>l.jsxs(u.Fragment,{children:[qe>0&&l.jsx("div",{"data-controls":s?"fieldsGap":void 0,className:s?`${a}-control`:void 0,style:{height:E.scalingValue(m??0,t)}}),l.jsxs("div",{className:`${a}-field-group${ue?` ${a}-labeled`:""}`,children:[ue&&l.jsx("span",{className:`${a}-field-label`,style:ke?{...ke,lineHeight:ke.fontSize}:void 0,children:me.label||me.name}),me.type==="textarea"?l.jsx("textarea",{name:me.name,autoComplete:"off",value:xt[me.name]??"",onChange:Ue=>ze(me.name,Ue.target.value),placeholder:me.placeholder,className:`${a}-input`,style:Ce,rows:1,"data-filled":dt||(xt[me.name]??"").trim().length>0,"data-field-type":"textarea"}):l.jsx("input",{type:me.type==="phone"?"tel":me.type==="email"?"email":"text",name:me.name,autoComplete:"off",value:xt[me.name]??"",onChange:Ue=>ze(me.name,Ue.target.value),placeholder:me.placeholder,required:me.isRequired??me.type==="email",className:`${a}-input`,style:Ce,"data-filled":dt||(xt[me.name]??"").trim().length>0})]})]},qe))}),l.jsx("div",{"data-controls":s?"gap":void 0,className:s?`${a}-control`:void 0,style:{height:E.scalingValue(C??0,t)}}),l.jsx("div",{className:`${a}-overlay-anchor`,children:l.jsx("button",{type:c?"submit":"button",className:`${a}-button`,style:{borderStyle:"solid",borderRadius:E.scalingValue(h??0,t),borderWidth:Ze,paddingTop:E.scalingValue((x==null?void 0:x.top)??0,t),paddingRight:E.scalingValue((x==null?void 0:x.right)??0,t),paddingBottom:E.scalingValue((x==null?void 0:x.bottom)??0,t),paddingLeft:E.scalingValue((x==null?void 0:x.left)??0,t),pointerEvents:c?"auto":void 0,...Ne,...b?{width:"100%",textAlign:"center",whiteSpace:"normal"}:{}},children:l.jsx("span",{className:`${a}-overlay-anchor`,style:b?{display:"inline-block",maxWidth:"100%",whiteSpace:"normal",textAlign:"center"}:void 0,children:bt==="submitting"?"...":y})})})]}),lt==="success"&&l.jsx("p",{className:`${a}-success`,style:{...Fe},children:de}),lt==="error"&&l.jsx("p",{className:`${a}-error`,style:{...Fe},role:"alert",children:Xt??ct??Se})]})}const rc={inputColor:"input-color",inputTextColor:"input-text-color",inputBorderColor:"input-border-color",placeholderColor:"placeholder-color",buttonColor:"button-color",buttonTextColor:"button-text-color",buttonBorderColor:"button-border-color",labelTextColor:"label-text-color",successColor:"success-color",errorColor:"error-color"},ac=["hover","focus","filled","success","error"],sc=`import React, { useMemo, useState } from 'react';
159
159
  import { CommonComponentProps } from '../props';
160
160
  import { buildColorVars, getFormFieldValidationError, scalingValue, useScopedStyles } from '../utils/index';
161
161
  import { omitTextColors, textStylesToCss, type TextStyles } from '../utils/textStylesToCss';
@@ -325,12 +325,14 @@ type FormProps = {
325
325
  content?: unknown;
326
326
  isEditor?: boolean;
327
327
  isEditMode?: boolean;
328
+ isPreviewMode?: boolean;
328
329
  activeEvent: string | undefined;
329
330
  onUpdateSettings?: (settings: FormSettings) => void;
330
331
  } & CommonComponentProps;
331
332
 
332
- export function Form({ settings, isEditor, isEditMode, metadata, activeEvent }: FormProps) {
333
+ export function Form({ settings, isEditor, isEditMode, isPreviewMode, metadata, activeEvent }: FormProps) {
333
334
  const showControls = Boolean(isEditMode);
335
+ const canSubmit = (isPreviewMode && isEditor) || !isEditor;
334
336
  const { prefix: P } = useScopedStyles();
335
337
  const {
336
338
  type = 'A',
@@ -527,6 +529,8 @@ export function Form({ settings, isEditor, isEditMode, metadata, activeEvent }:
527
529
 
528
530
  const handleSubmit = async (e: React.FormEvent) => {
529
531
  e.preventDefault();
532
+ if (!canSubmit) return;
533
+
530
534
  const payload = Object.fromEntries(
531
535
  visibleFields.map((f) => [f.name, fieldValues[f.name]?.trim() ?? '']).filter(([, v]) => v)
532
536
  );
@@ -627,7 +631,7 @@ export function Form({ settings, isEditor, isEditMode, metadata, activeEvent }:
627
631
  />
628
632
  <div className={\`\${P}-overlay-anchor\`}>
629
633
  <button
630
- type="submit"
634
+ type={canSubmit ? 'submit' : 'button'}
631
635
  className={\`\${P}-button\`}
632
636
  style={{
633
637
  borderStyle: 'solid',
@@ -637,6 +641,7 @@ export function Form({ settings, isEditor, isEditMode, metadata, activeEvent }:
637
641
  paddingRight: scalingValue(buttonPadding?.right ?? 0, isEditor),
638
642
  paddingBottom: scalingValue(buttonPadding?.bottom ?? 0, isEditor),
639
643
  paddingLeft: scalingValue(buttonPadding?.left ?? 0, isEditor),
644
+ pointerEvents: canSubmit ? 'auto' : undefined,
640
645
  ...buttonTypographyCss,
641
646
  ...(isButtonFullWidth
642
647
  ? {
@@ -784,7 +789,7 @@ const COLOR_VAR_MAP: Record<ColorKeys, string> = {
784
789
  };
785
790
 
786
791
  const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
787
- `,yc=[{name:"email",type:"email",placeholder:"Enter your email",label:"Email",isRequired:!0,error:"Please, enter a valid e-mail."},{name:"name",type:"text",placeholder:"Enter your name",label:"Name",isRequired:!1,error:"Please, enter your name."},{name:"company",type:"text",placeholder:"Enter company",label:"Company",isRequired:!1,error:"Please, enter your company name."},{name:"phone",type:"phone",placeholder:"Enter your phone",label:"Phone",isRequired:!1,error:"Please, enter a valid phone number."},{name:"message",type:"textarea",placeholder:"Enter your message",label:"Message",isRequired:!1,error:"Message is required"},{name:"message2",type:"textarea",placeholder:"Enter your message 2",label:"Message 2",isRequired:!1,error:"Message 2 is required"},{name:"message3",type:"textarea",placeholder:"Enter your message 3",label:"Message 3",isRequired:!1,error:"Message 3 is required"}],Kn={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},vc=["inputColor","inputTextColor","inputBorderColor","placeholderColor","buttonColor","buttonTextColor","buttonBorderColor","labelTextColor","successColor","errorColor"],bc={type:"object",version:1,settings:{sizing:"auto manual",properties:{fieldsToShow:{type:"number",scope:"common",title:"Fields",display:{type:"number"},min:1,max:7},fields:{type:"array",scope:"common",display:{type:"fields-group"},items:{type:"object",properties:{name:{type:"string"},type:{type:"string",enum:["text","textarea","phone","email"]},placeholder:{type:"string"},label:{type:"string"},isRequired:{type:"boolean"},error:{type:"string"}}}},buttonLabel:{type:"string",scope:"common",title:"Button Label",display:{type:"text-input"}},successMessage:{type:"string",scope:"common",title:"Success Message",display:{type:"text-input"}},errorMessage:{type:"string",scope:"common",title:"Error Message",display:{type:"text-input"}},type:{type:"string",scope:"common",title:"",display:{type:"radio-group"},enum:["A","B","C"]},gap:{type:"number",scope:"layout",title:"Gap",display:{type:"numeric-input"},min:0,max:100},fieldsGap:{type:"number",scope:"layout",title:"Gap",display:{type:"numeric-input",enabled:!0},min:0,max:100},buttonPadding:{type:"object",scope:"layout",title:"Padding",display:{type:"padding-controls"}},inputPadding:{type:"object",scope:"layout",title:"Padding",display:{type:"padding-controls"}},buttonStroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"numeric-input"},min:0,max:20},buttonCorners:{type:"number",scope:"layout",title:"Corners",display:{type:"numeric-input",enabled:!0},min:0,max:100},inputStroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"numeric-input"},min:0,max:20},inputCorners:{type:"number",scope:"layout",title:"Corners",display:{type:"numeric-input",enabled:!0},min:0,max:100},inputColor:{type:"string",scope:"common",title:"Fill Input",display:{type:"palette-color-picker"}},inputTextColor:{type:"string",scope:"common",title:"Input Label",display:{type:"palette-color-picker"}},inputBorderColor:{type:"string",scope:"common",title:"Stroke Input",display:{type:"palette-color-picker"}},placeholderColor:{type:"string",scope:"common",title:"Filler Input",display:{type:"palette-color-picker"}},buttonColor:{type:"string",scope:"common",title:"Fill Button",display:{type:"palette-color-picker"}},buttonTextColor:{type:"string",scope:"common",title:"Label Button",display:{type:"palette-color-picker"}},isButtonFullWidth:{type:"boolean",scope:"common",title:"Full Width",display:{type:"toggle",enum:["On","Off"]}},buttonBorderColor:{type:"string",scope:"common",title:"Stroke Button",display:{type:"palette-color-picker"}},labelTextColor:{type:"string",scope:"common",title:"Label Button",display:{type:"palette-color-picker",visible:!1}},successColor:{type:"string",scope:"common",title:"Success Message Color",display:{type:"palette-color-picker"}},errorColor:{type:"string",scope:"common",title:"Error Message Color",display:{type:"palette-color-picker"}},stateOverrides:{type:"object",scope:"common"},fontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},inputFontSettings:{...Kn.fontSettings,scope:"common",title:"Input",display:{type:"font-settings-weight"}},inputFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},inputLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},inputLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},inputWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},inputTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}},buttonFontSettings:{...Kn.fontSettings,scope:"common",title:"Button",display:{type:"font-settings-weight"}},buttonFontSize:{type:"number",scope:"layout",title:"Button Font Size",display:{type:"font-size"}},buttonLineHeight:{type:"number",scope:"layout",title:"Button Line Height",display:{type:"line-height-input"}},buttonLetterSpacing:{type:"number",scope:"layout",title:"Button Letter Spacing",display:{type:"letter-spacing-input"}},buttonWordSpacing:{type:"number",scope:"layout",title:"Button Word Spacing",display:{type:"word-spacing-input"}},buttonTextAppearance:{type:"object",scope:"layout",title:"Button Text Appearance",display:{type:"text-appearance"}},labelFontSettings:{...Kn.fontSettings,scope:"common",title:"Label",display:{type:"font-settings-weight",visible:!1}},labelFontSize:{type:"number",scope:"layout",title:"Label Font Size",display:{type:"font-size",visible:!1}},labelLineHeight:{type:"number",scope:"layout",title:"Label Line Height",display:{type:"line-height-input",visible:!1}},labelLetterSpacing:{type:"number",scope:"layout",title:"Label Letter Spacing",display:{type:"letter-spacing-input",visible:!1}},labelWordSpacing:{type:"number",scope:"layout",title:"Label Word Spacing",display:{type:"word-spacing-input",visible:!1}},labelTextAppearance:{type:"object",scope:"layout",title:"Label Text Appearance",display:{type:"text-appearance",visible:!1}},statusFontSettings:{...Kn.fontSettings,scope:"common",title:"Success/Error"},statusFontSize:{type:"number",scope:"layout",title:"Success/Error Font Size",display:{type:"font-size"}},statusLineHeight:{type:"number",scope:"layout",title:"Success/Error Line Height",display:{type:"line-height-input"}},statusLetterSpacing:{type:"number",scope:"layout",title:"Success/Error Letter Spacing",display:{type:"letter-spacing-input"}},statusWordSpacing:{type:"number",scope:"layout",title:"Success/Error Word Spacing",display:{type:"word-spacing-input"}},statusTextAppearance:{type:"object",scope:"layout",title:"Success/Error Text Appearance",display:{type:"text-appearance"}}},defaults:{fieldsToShow:2,fields:yc,type:"A",inputColor:"#FFFFFF",inputTextColor:"#0A00F8",inputBorderColor:"#E2E2E2",placeholderColor:"#808080",buttonColor:"#0A00F8",buttonTextColor:"#ffffff",buttonBorderColor:"#0A00F8",labelTextColor:"#999999",successColor:"#22c55e",errorColor:"#ef4444",stateOverrides:{hover:{buttonColor:"#194EFF"}},fontFamily:"Arial",inputFontSettings:{fontWeight:400,fontStyle:"normal"},inputLetterSpacing:0,inputWordSpacing:0,inputTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},buttonFontSettings:{fontWeight:400,fontStyle:"normal"},buttonLetterSpacing:0,buttonWordSpacing:0,buttonTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},labelFontSettings:{fontWeight:400,fontStyle:"normal"},labelLetterSpacing:0,labelWordSpacing:0,labelTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},statusFontSettings:{fontWeight:400,fontStyle:"normal"},statusLetterSpacing:0,statusWordSpacing:0,statusTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},isButtonFullWidth:!1,buttonLabel:"Sign up",successMessage:"Thanks for subscribing!",errorMessage:"Please, fill all required fields."},layoutDefaults:{m:{gap:.032,fieldsGap:.032,buttonStroke:0,buttonCorners:.192,inputStroke:.003,inputCorners:.192,buttonPadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},inputPadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},inputFontSize:.043,inputLineHeight:.043,buttonFontSize:.0373,buttonLineHeight:.0373,labelFontSize:.0373,labelLineHeight:.0373,statusFontSize:.0373,statusLineHeight:.0373},d:{gap:.0083,fieldsGap:.0083,buttonStroke:0,buttonCorners:.05,inputStroke:.001,inputCorners:.05,buttonPadding:{top:.01,right:.01,bottom:.01,left:.01},inputPadding:{top:.01,right:.01,bottom:.01,left:.01},inputFontSize:.01,inputLineHeight:.01,buttonFontSize:.01,buttonLineHeight:.01,labelFontSize:.01,labelLineHeight:.01,statusFontSize:.01,statusLineHeight:.01}},displayRules:[{if:{name:"type",value:"B"},then:{name:"properties.labelTextColor.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelFontSettings.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelFontSize.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelLineHeight.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelLetterSpacing.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelWordSpacing.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelTextAppearance.display.visible",value:!0}},{if:{name:"type",value:"C"},then:{name:"properties.buttonCorners.display.enabled",value:!1}},{if:{name:"type",value:"C"},then:{name:"properties.inputCorners.display.enabled",value:!1}},{if:{name:"buttonStroke",value:0},then:{name:"properties.buttonBorderColor.display.visible",value:!1}},{if:{name:"inputStroke",value:0},then:{name:"properties.inputBorderColor.display.visible",value:!1}},{if:{name:"fieldsToShow",value:1},then:{name:"properties.fieldsGap.display.enabled",value:!1}}]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name","fieldsToShow"]},"type",{type:"group",title:"",items:[{type:"row",title:"Input",items:["inputCorners","inputPadding"]},{type:"row",title:"",items:["inputStroke"]}]},{type:"group",title:"",items:[{type:"row",title:"Button",items:["buttonCorners","buttonPadding"]},{type:"row",title:"",items:["buttonStroke","isButtonFullWidth"]}]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:["fontFamily",{type:"group",title:"",items:["inputFontSettings",{type:"row",items:["inputFontSize","inputLineHeight","inputLetterSpacing","inputWordSpacing"]},"inputTextAppearance"]},{type:"group",title:"",items:["buttonFontSettings",{type:"row",items:["buttonFontSize","buttonLineHeight","buttonLetterSpacing","buttonWordSpacing"]},"buttonTextAppearance"]},{type:"group",title:"",items:["labelFontSettings",{type:"row",items:["labelFontSize","labelLineHeight","labelLetterSpacing","labelWordSpacing"]},"labelTextAppearance"]},{type:"group",title:"",items:["statusFontSettings",{type:"row",items:["statusFontSize","statusLineHeight","statusLetterSpacing","statusWordSpacing"]},"statusTextAppearance"]}]},{id:"fields",icon:"layers",title:"Fields",tooltip:"Fields",layout:["fields","buttonLabel","successMessage","errorMessage"]}],paletteBookmark:{items:[...vc],panelIds:["general","typeStyle"],stateItems:{default:["placeholderColor","inputColor","inputBorderColor","buttonTextColor","buttonColor","buttonBorderColor","labelTextColor"],hover:["inputColor","inputBorderColor","buttonTextColor","buttonColor","buttonBorderColor"],focus:["inputColor","inputBorderColor","buttonTextColor","buttonColor","buttonBorderColor"],filled:["inputTextColor","inputColor","inputBorderColor","buttonTextColor"],success:["successColor"],error:["errorColor"]}},allowedPlugins:["newsletter"],states:["default","hover","focus","filled","success","error"]},xc={element:mc,id:"form",name:"Newsletter Stacked",category:"forms",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Newsletter_Stacked.png"},defaultSize:{d:{width:300,height:42},t:{width:346,height:42},m:{width:300,height:42}},schema:bc,sourceCode:fc};function Gn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function Cc(e){return`
792
+ `,lc=[{name:"name",type:"text",placeholder:"Enter your name",label:"Name",isRequired:!1,error:"Please, enter your name."},{name:"email",type:"email",placeholder:"Enter your email",label:"Email",isRequired:!0,error:"Please, enter a valid e-mail."},{name:"company",type:"text",placeholder:"Enter company",label:"Company",isRequired:!1,error:"Please, enter your company name."},{name:"phone",type:"phone",placeholder:"Enter your phone",label:"Phone",isRequired:!1,error:"Please, enter a valid phone number."},{name:"message",type:"textarea",placeholder:"Enter your message",label:"Message",isRequired:!1,error:"Message is required"},{name:"message2",type:"textarea",placeholder:"Enter your message 2",label:"Message 2",isRequired:!1,error:"Message 2 is required"},{name:"message3",type:"textarea",placeholder:"Enter your message 3",label:"Message 3",isRequired:!1,error:"Message 3 is required"}],zn={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},cc=["inputColor","inputTextColor","inputBorderColor","placeholderColor","buttonColor","buttonTextColor","buttonBorderColor","labelTextColor","successColor","errorColor"],dc={type:"object",version:1,settings:{sizing:"auto manual",properties:{fieldsToShow:{type:"number",scope:"common",title:"Fields",display:{type:"number"},min:1,max:7},fields:{type:"array",scope:"common",display:{type:"fields-group"},items:{type:"object",properties:{name:{type:"string"},type:{type:"string",enum:["text","textarea","phone","email"]},placeholder:{type:"string"},label:{type:"string"},isRequired:{type:"boolean"},error:{type:"string"}}}},buttonLabel:{type:"string",scope:"common",title:"Button Label",display:{type:"text-input"}},successMessage:{type:"string",scope:"common",title:"Success Message",display:{type:"text-input"}},errorMessage:{type:"string",scope:"common",title:"Error Message",display:{type:"text-input"}},type:{type:"string",scope:"common",title:"",display:{type:"radio-group"},enum:["A","B","C"]},gap:{type:"number",scope:"layout",title:"Gap",display:{type:"numeric-input"},min:0,max:100},fieldsGap:{type:"number",scope:"layout",title:"Gap",display:{type:"numeric-input",enabled:!0},min:0,max:100},buttonPadding:{type:"object",scope:"layout",title:"Padding",display:{type:"padding-controls"}},inputPadding:{type:"object",scope:"layout",title:"Padding",display:{type:"padding-controls"}},buttonStroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"numeric-input"},min:0,max:20},buttonCorners:{type:"number",scope:"layout",title:"Corners",display:{type:"numeric-input",enabled:!0},min:0,max:100},inputStroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"numeric-input"},min:0,max:20},inputCorners:{type:"number",scope:"layout",title:"Corners",display:{type:"numeric-input",enabled:!0},min:0,max:100},inputColor:{type:"string",scope:"common",title:"Fill Input",display:{type:"palette-color-picker"}},inputTextColor:{type:"string",scope:"common",title:"Input Label",display:{type:"palette-color-picker"}},inputBorderColor:{type:"string",scope:"common",title:"Stroke Input",display:{type:"palette-color-picker"}},placeholderColor:{type:"string",scope:"common",title:"Filler Input",display:{type:"palette-color-picker"}},buttonColor:{type:"string",scope:"common",title:"Fill Button",display:{type:"palette-color-picker"}},buttonTextColor:{type:"string",scope:"common",title:"Label Button",display:{type:"palette-color-picker"}},isButtonFullWidth:{type:"boolean",scope:"common",title:"Full Width",display:{type:"toggle",enum:["On","Off"]}},buttonBorderColor:{type:"string",scope:"common",title:"Stroke Button",display:{type:"palette-color-picker"}},labelTextColor:{type:"string",scope:"common",title:"Label Button",display:{type:"palette-color-picker",visible:!1}},successColor:{type:"string",scope:"common",title:"Success Message Color",display:{type:"palette-color-picker"}},errorColor:{type:"string",scope:"common",title:"Error Message Color",display:{type:"palette-color-picker"}},stateOverrides:{type:"object",scope:"common"},fontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},inputFontSettings:{...zn.fontSettings,scope:"common",title:"Input",display:{type:"font-settings-weight"}},inputFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},inputLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},inputLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},inputWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},inputTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}},buttonFontSettings:{...zn.fontSettings,scope:"common",title:"Button",display:{type:"font-settings-weight"}},buttonFontSize:{type:"number",scope:"layout",title:"Button Font Size",display:{type:"font-size"}},buttonLineHeight:{type:"number",scope:"layout",title:"Button Line Height",display:{type:"line-height-input"}},buttonLetterSpacing:{type:"number",scope:"layout",title:"Button Letter Spacing",display:{type:"letter-spacing-input"}},buttonWordSpacing:{type:"number",scope:"layout",title:"Button Word Spacing",display:{type:"word-spacing-input"}},buttonTextAppearance:{type:"object",scope:"layout",title:"Button Text Appearance",display:{type:"text-appearance"}},labelFontSettings:{...zn.fontSettings,scope:"common",title:"Label",display:{type:"font-settings-weight",visible:!1}},labelFontSize:{type:"number",scope:"layout",title:"Label Font Size",display:{type:"font-size",visible:!1}},labelLineHeight:{type:"number",scope:"layout",title:"Label Line Height",display:{type:"line-height-input",visible:!1}},labelLetterSpacing:{type:"number",scope:"layout",title:"Label Letter Spacing",display:{type:"letter-spacing-input",visible:!1}},labelWordSpacing:{type:"number",scope:"layout",title:"Label Word Spacing",display:{type:"word-spacing-input",visible:!1}},labelTextAppearance:{type:"object",scope:"layout",title:"Label Text Appearance",display:{type:"text-appearance",visible:!1}},statusFontSettings:{...zn.fontSettings,scope:"common",title:"Success/Error"},statusFontSize:{type:"number",scope:"layout",title:"Success/Error Font Size",display:{type:"font-size"}},statusLineHeight:{type:"number",scope:"layout",title:"Success/Error Line Height",display:{type:"line-height-input"}},statusLetterSpacing:{type:"number",scope:"layout",title:"Success/Error Letter Spacing",display:{type:"letter-spacing-input"}},statusWordSpacing:{type:"number",scope:"layout",title:"Success/Error Word Spacing",display:{type:"word-spacing-input"}},statusTextAppearance:{type:"object",scope:"layout",title:"Success/Error Text Appearance",display:{type:"text-appearance"}}},defaults:{fieldsToShow:2,fields:lc,type:"A",inputColor:"#FFFFFF",inputTextColor:"#0A00F8",inputBorderColor:"#E2E2E2",placeholderColor:"#808080",buttonColor:"#0A00F8",buttonTextColor:"#ffffff",buttonBorderColor:"#0A00F8",labelTextColor:"#999999",successColor:"#22c55e",errorColor:"#ef4444",stateOverrides:{hover:{buttonColor:"#194EFF"}},fontFamily:"Arial",inputFontSettings:{fontWeight:400,fontStyle:"normal"},inputLetterSpacing:0,inputWordSpacing:0,inputTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},buttonFontSettings:{fontWeight:400,fontStyle:"normal"},buttonLetterSpacing:0,buttonWordSpacing:0,buttonTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},labelFontSettings:{fontWeight:400,fontStyle:"normal"},labelLetterSpacing:0,labelWordSpacing:0,labelTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},statusFontSettings:{fontWeight:400,fontStyle:"normal"},statusLetterSpacing:0,statusWordSpacing:0,statusTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},isButtonFullWidth:!1,buttonLabel:"Sign up",successMessage:"Thanks for subscribing!",errorMessage:"Please, fill all required fields."},layoutDefaults:{m:{gap:.032,fieldsGap:.032,buttonStroke:0,buttonCorners:.192,inputStroke:.003,inputCorners:.192,buttonPadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},inputPadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},inputFontSize:.043,inputLineHeight:.043,buttonFontSize:.0373,buttonLineHeight:.0373,labelFontSize:.0373,labelLineHeight:.0373,statusFontSize:.0373,statusLineHeight:.0373},d:{gap:.0083,fieldsGap:.0083,buttonStroke:0,buttonCorners:.05,inputStroke:.001,inputCorners:.05,buttonPadding:{top:.01,right:.01,bottom:.01,left:.01},inputPadding:{top:.01,right:.01,bottom:.01,left:.01},inputFontSize:.01,inputLineHeight:.01,buttonFontSize:.01,buttonLineHeight:.01,labelFontSize:.01,labelLineHeight:.01,statusFontSize:.01,statusLineHeight:.01}},displayRules:[{if:{name:"type",value:"B"},then:{name:"properties.labelTextColor.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelFontSettings.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelFontSize.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelLineHeight.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelLetterSpacing.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelWordSpacing.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelTextAppearance.display.visible",value:!0}},{if:{name:"type",value:"C"},then:{name:"properties.buttonCorners.display.enabled",value:!1}},{if:{name:"type",value:"C"},then:{name:"properties.inputCorners.display.enabled",value:!1}},{if:{name:"buttonStroke",value:0},then:{name:"properties.buttonBorderColor.display.visible",value:!1}},{if:{name:"inputStroke",value:0},then:{name:"properties.inputBorderColor.display.visible",value:!1}},{if:{name:"fieldsToShow",value:1},then:{name:"properties.fieldsGap.display.enabled",value:!1}}]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name","fieldsToShow"]},"type",{type:"group",title:"",items:[{type:"row",title:"Input",items:["inputCorners","inputPadding"]},{type:"row",title:"",items:["inputStroke"]}]},{type:"group",title:"",items:[{type:"row",title:"Button",items:["buttonCorners","buttonPadding"]},{type:"row",title:"",items:["buttonStroke","isButtonFullWidth"]}]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:["fontFamily",{type:"group",title:"",items:["inputFontSettings",{type:"row",items:["inputFontSize","inputLineHeight","inputLetterSpacing","inputWordSpacing"]},"inputTextAppearance"]},{type:"group",title:"",items:["buttonFontSettings",{type:"row",items:["buttonFontSize","buttonLineHeight","buttonLetterSpacing","buttonWordSpacing"]},"buttonTextAppearance"]},{type:"group",title:"",items:["labelFontSettings",{type:"row",items:["labelFontSize","labelLineHeight","labelLetterSpacing","labelWordSpacing"]},"labelTextAppearance"]},{type:"group",title:"",items:["statusFontSettings",{type:"row",items:["statusFontSize","statusLineHeight","statusLetterSpacing","statusWordSpacing"]},"statusTextAppearance"]}]},{id:"fields",icon:"layers",title:"Fields",tooltip:"Fields",layout:["fields","buttonLabel","successMessage","errorMessage"]}],paletteBookmark:{items:[...cc],panelIds:["general","typeStyle"],stateItems:{default:["placeholderColor","inputColor","inputBorderColor","buttonTextColor","buttonColor","buttonBorderColor","labelTextColor"],hover:["inputColor","inputBorderColor","buttonTextColor","buttonColor","buttonBorderColor"],focus:["inputColor","inputBorderColor","buttonTextColor","buttonColor","buttonBorderColor"],filled:["inputTextColor","inputColor","inputBorderColor","buttonTextColor"],success:["successColor"],error:["errorColor"]}},allowedPlugins:["newsletter"],states:["default","hover","focus","filled","success","error"]},uc={element:ic,id:"form",name:"Newsletter Stacked",category:"forms",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Newsletter_Stacked.png"},defaultSize:{d:{width:300,height:42},t:{width:346,height:42},m:{width:300,height:42}},schema:dc,sourceCode:sc};function Kn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function pc(e){return`
788
793
  .${e}-wrapper {
789
794
  display: flex;
790
795
  flex-direction: column;
@@ -966,16 +971,16 @@ const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
966
971
  align-items: center;
967
972
  }
968
973
  .${e}-success {
969
- margin-top: ${Gn(8)};
970
- font-size: ${Gn(14)};
974
+ margin-top: ${Kn(8)};
975
+ font-size: ${Kn(14)};
971
976
  color: var(--${e}-success-success-color, var(--${e}-success-color));
972
977
  }
973
978
  .${e}-error {
974
- margin-top: ${Gn(8)};
975
- font-size: ${Gn(14)};
979
+ margin-top: ${Kn(8)};
980
+ font-size: ${Kn(14)};
976
981
  color: var(--${e}-error-error-color, var(--${e}-error-color));
977
982
  }
978
- `}const Sc=({settings:e,isEditor:t,metadata:n,activeEvent:i})=>{const{prefix:a}=E.useScopedStyles(),{fields:s=[{name:"email",type:"email",placeholder:"Your email"}],buttonIcon:o,buttonLabel:d,fieldsToShow:l=1,fontFamily:u,inputFontSettings:p,inputFontSize:I,inputLineHeight:b,inputLetterSpacing:w,inputWordSpacing:f,inputTextAppearance:h,buttonFontSettings:T,buttonFontSize:L,buttonLineHeight:C,buttonLetterSpacing:m,buttonWordSpacing:z,buttonTextAppearance:j,statusFontSettings:R,statusFontSize:x,statusLineHeight:A,statusLetterSpacing:S,statusWordSpacing:K,statusTextAppearance:v,iconMaxWidth:D,minHeight:W,corners:q,stroke:G,stateOverrides:$,inputPadding:H,buttonPadding:_,successMessage:B="Thanks for subscribing!",errorMessage:k="Please, fill all required fields."}=e,P=s.slice(0,Math.min(l,s.length)),[te,ae]=c.useState(()=>Object.fromEntries(P.map(ve=>[ve.name,""]))),[re,U]=c.useState("idle"),[N,oe]=c.useState(null),ye=i==="success"?"success":i==="error"?"error":re,ce=i==="error"?k:N,ge=i==="filled",we=c.useMemo(()=>{if(!ge)return te;let ve=null;for(const ke of P)(te[ke.name]??"").trim().length>0||(ve=ve??{...te},ve[ke.name]="Filled");return ve??te},[ge,te,P]),ee=ye==="error"?E.getFormFieldValidationError(P,we):null,y=i&&i!=="default"?`${a}-state-${i}`:"",g=P.some(ve=>(we[ve.name]??"").trim().length>0),V=y!==`${a}-state-filled`&&g?`${a}-state-filled`:"",J=`${y} ${V}`.trim(),Q=n==null?void 0:n.submitUrl,M=d??"",F=(o==null?void 0:o.icon)??"",O=(o==null?void 0:o.mode)==="On",ie=M||"Submit",pe={fontSettings:{fontFamily:u,fontWeight:(p==null?void 0:p.fontWeight)??400,fontStyle:(p==null?void 0:p.fontStyle)??"normal"},fontSize:I??.01,lineHeight:b,letterSpacing:w??0,wordSpacing:f??0,textAppearance:h,color:e.inputTextColor??"#111111"},le={fontSettings:{fontFamily:u,fontWeight:(T==null?void 0:T.fontWeight)??400,fontStyle:(T==null?void 0:T.fontStyle)??"normal"},fontSize:L??.01,lineHeight:C,letterSpacing:m??0,wordSpacing:z??0,textAppearance:j,color:e.buttonTextColor??"#ffffff"},he={fontSettings:{fontFamily:u,fontWeight:(R==null?void 0:R.fontWeight)??400,fontStyle:(R==null?void 0:R.fontStyle)??"normal"},fontSize:x??.01,lineHeight:A,letterSpacing:S??0,wordSpacing:K??0,textAppearance:v,color:e.successColor??"#22c55e"},Y=ft(Ue(pe,t)),Z=ft(Ue(le,t)),X=ft(Ue(he,t)),se=E.buildColorVars(a,{strokeColor:e.strokeColor,inputColor:e.inputColor,placeholderColor:e.placeholderColor,buttonColor:e.buttonColor,successColor:e.successColor,errorColor:e.errorColor,inputTextColor:e.inputTextColor??(pe==null?void 0:pe.color)??"#111111",buttonTextColor:e.buttonTextColor??(le==null?void 0:le.color)??"#ffffff"},wc,$c,$),Te={borderRadius:E.scalingValue(q,t),borderWidth:E.scalingValue(G,t),borderStyle:"solid"},Le={borderLeftWidth:E.scalingValue(G,t)},Oe=async ve=>{ve.preventDefault();const ke=Object.fromEntries(P.map(Ae=>{var Ve;return[Ae.name,((Ve=te[Ae.name])==null?void 0:Ve.trim())??""]}).filter(([,Ae])=>Ae));if(!Q){U("error"),oe("No integrations were found for this form.");return}if(Object.keys(ke).length===0)return;const _e=E.getFormFieldValidationError(P,te);if(_e){U("error"),oe(_e);return}U("submitting"),oe(null);try{const Ae=await fetch(Q,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(ke)});if(!Ae.ok){const Ve=await Ae.text();throw new Error(Ve||`Request failed: ${Ae.status}`)}U("success"),ae(Object.fromEntries(P.map(Ve=>[Ve.name,""])))}catch(Ae){U("error"),oe(Ae instanceof Error?Ae.message:"Something went wrong")}};return r.jsxs("div",{className:`${a}-wrapper ${J}`.trim(),style:se,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:Cc(a)}}),r.jsxs("form",{onSubmit:Oe,className:`${a}-form`,style:{...Te,height:E.scalingValue(W,t),minHeight:E.scalingValue(W,t)},children:[r.jsx("div",{className:`${a}-inputWrap ${a}-overlayAnchor`,style:{flex:1,minWidth:0},children:P.map(ve=>r.jsx("input",{type:ve.type==="email"?"email":ve.type==="phone"?"tel":"text",name:ve.name,autoComplete:"off",value:we[ve.name]??"",onChange:ke=>ae(_e=>({..._e,[ve.name]:ke.target.value})),placeholder:ve.placeholder,required:ve.isRequired??ve.type==="email",className:`${a}-input`,style:{...Y,paddingRight:E.scalingValue(H.right,t),paddingLeft:E.scalingValue(H.left,t),paddingTop:E.scalingValue(H.top,t),paddingBottom:E.scalingValue(H.bottom,t)}},ve.name))}),r.jsx("div",{className:`${a}-overlayAnchor`,children:r.jsx("button",{type:"submit",className:`${a}-submitBtn`,"aria-label":ie,style:{...Z,...Le,paddingRight:E.scalingValue(_.right,t),paddingLeft:E.scalingValue(_.left,t),paddingTop:E.scalingValue(_.top,t),paddingBottom:E.scalingValue(_.bottom,t)},children:re==="submitting"?"...":O?F&&r.jsx(yt,{url:F,className:`${a}-submitBtnIcon`,style:{maxWidth:E.scalingValue(D??0,t)},fill:`var(--${a}-button-text-color)`,hoverFill:`var(--${a}-button-text-color)`}):M})})]}),ye==="success"&&r.jsx("p",{className:`${a}-success`,style:{...X},children:B}),ye==="error"&&r.jsx("p",{className:`${a}-error`,style:{...X},role:"alert",children:ee??ce??k})]})},wc={strokeColor:"stroke-color",inputColor:"input-color",placeholderColor:"placeholder-color",buttonColor:"button-color",inputTextColor:"input-text-color",buttonTextColor:"button-text-color",successColor:"success-color",errorColor:"error-color"},$c=["hover","focus","filled","success","error"],Tc=`import React, { useMemo, useState } from 'react';
983
+ `}const mc=({settings:e,isEditor:t,isPreviewMode:n,metadata:o,activeEvent:i})=>{const{prefix:r}=E.useScopedStyles(),s=n&&t||!t,{fields:c=[{name:"email",type:"email",placeholder:"Your email"}],buttonIcon:a,buttonLabel:d,fieldsToShow:p=1,fontFamily:T,inputFontSettings:y,inputFontSize:C,inputLineHeight:m,inputLetterSpacing:h,inputWordSpacing:W,inputTextAppearance:x,buttonFontSettings:b,buttonFontSize:f,buttonLineHeight:O,buttonLetterSpacing:P,buttonWordSpacing:_,buttonTextAppearance:$,statusFontSettings:A,statusFontSize:w,statusLineHeight:H,statusLetterSpacing:L,statusWordSpacing:V,statusTextAppearance:D,iconMaxWidth:J,minHeight:q,corners:S,stroke:R,stateOverrides:F,inputPadding:N,buttonPadding:I,successMessage:B="Thanks for subscribing!",errorMessage:ie="Please, fill all required fields."}=e,Q=c.slice(0,Math.min(p,c.length)),[oe,G]=u.useState(()=>Object.fromEntries(Q.map(ve=>[ve.name,""]))),[M,re]=u.useState("idle"),[Le,ce]=u.useState(null),fe=i==="success"?"success":i==="error"?"error":M,We=i==="error"?ie:Le,ne=i==="filled",v=u.useMemo(()=>{if(!ne)return oe;let ve=null;for(const ke of Q)(oe[ke.name]??"").trim().length>0||(ve=ve??{...oe},ve[ke.name]="Filled");return ve??oe},[ne,oe,Q]),g=fe==="error"?E.getFormFieldValidationError(Q,v):null,k=i&&i!=="default"?`${r}-state-${i}`:"",K=Q.some(ve=>(v[ve.name]??"").trim().length>0),U=k!==`${r}-state-filled`&&K?`${r}-state-filled`:"",te=`${k} ${U}`.trim(),ee=o==null?void 0:o.submitUrl,Z=d??"",de=(a==null?void 0:a.icon)??"",Se=(a==null?void 0:a.mode)==="On",ye=Z||"Submit",ue={fontSettings:{fontFamily:T,fontWeight:(y==null?void 0:y.fontWeight)??400,fontStyle:(y==null?void 0:y.fontStyle)??"normal"},fontSize:C??.01,lineHeight:m,letterSpacing:h??0,wordSpacing:W??0,textAppearance:x,color:e.inputTextColor??"#111111"},j={fontSettings:{fontFamily:T,fontWeight:(b==null?void 0:b.fontWeight)??400,fontStyle:(b==null?void 0:b.fontStyle)??"normal"},fontSize:f??.01,lineHeight:O,letterSpacing:P??0,wordSpacing:_??0,textAppearance:$,color:e.buttonTextColor??"#ffffff"},Y={fontSettings:{fontFamily:T,fontWeight:(A==null?void 0:A.fontWeight)??400,fontStyle:(A==null?void 0:A.fontStyle)??"normal"},fontSize:w??.01,lineHeight:H,letterSpacing:L??0,wordSpacing:V??0,textAppearance:D,color:e.successColor??"#22c55e"},z=ht(Xe(ue,t)),le=ht(Xe(j,t)),xe=ht(Xe(Y,t)),Ce=E.buildColorVars(r,{strokeColor:e.strokeColor,inputColor:e.inputColor,placeholderColor:e.placeholderColor,buttonColor:e.buttonColor,successColor:e.successColor,errorColor:e.errorColor,inputTextColor:e.inputTextColor??(ue==null?void 0:ue.color)??"#111111",buttonTextColor:e.buttonTextColor??(j==null?void 0:j.color)??"#ffffff"},gc,hc,F),Ie={borderRadius:E.scalingValue(S,t),borderWidth:E.scalingValue(R,t),borderStyle:"solid"},Ne={borderLeftWidth:E.scalingValue(R,t)},Ze=async ve=>{if(ve.preventDefault(),!s)return;const ke=Object.fromEntries(Q.map(Fe=>{var Be;return[Fe.name,((Be=oe[Fe.name])==null?void 0:Be.trim())??""]}).filter(([,Fe])=>Fe));if(!ee){re("error"),ce("No integrations were found for this form.");return}if(Object.keys(ke).length===0)return;const He=E.getFormFieldValidationError(Q,oe);if(He){re("error"),ce(He);return}re("submitting"),ce(null);try{const Fe=await fetch(ee,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(ke)});if(!Fe.ok){const Be=await Fe.text();throw new Error(Be||`Request failed: ${Fe.status}`)}re("success"),G(Object.fromEntries(Q.map(Be=>[Be.name,""])))}catch(Fe){re("error"),ce(Fe instanceof Error?Fe.message:"Something went wrong")}};return l.jsxs("div",{className:`${r}-wrapper ${te}`.trim(),style:Ce,children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:pc(r)}}),l.jsxs("form",{onSubmit:Ze,className:`${r}-form`,style:{...Ie,height:E.scalingValue(q,t),minHeight:E.scalingValue(q,t)},children:[l.jsx("div",{className:`${r}-inputWrap ${r}-overlayAnchor`,style:{flex:1,minWidth:0},children:Q.map(ve=>l.jsx("input",{type:ve.type==="email"?"email":ve.type==="phone"?"tel":"text",name:ve.name,autoComplete:"off",value:v[ve.name]??"",onChange:ke=>G(He=>({...He,[ve.name]:ke.target.value})),placeholder:ve.placeholder,required:ve.isRequired??ve.type==="email",className:`${r}-input`,style:{...z,paddingRight:E.scalingValue(N.right,t),paddingLeft:E.scalingValue(N.left,t),paddingTop:E.scalingValue(N.top,t),paddingBottom:E.scalingValue(N.bottom,t)}},ve.name))}),l.jsx("div",{className:`${r}-overlayAnchor`,children:l.jsx("button",{type:s?"submit":"button",className:`${r}-submitBtn`,"aria-label":ye,style:{...le,...Ne,paddingRight:E.scalingValue(I.right,t),paddingLeft:E.scalingValue(I.left,t),paddingTop:E.scalingValue(I.top,t),paddingBottom:E.scalingValue(I.bottom,t),pointerEvents:s?"auto":void 0},children:M==="submitting"?"...":Se?de&&l.jsx(kt,{url:de,className:`${r}-submitBtnIcon`,style:{maxWidth:E.scalingValue(J??0,t)},fill:`var(--${r}-button-text-color)`,hoverFill:`var(--${r}-button-text-color)`}):Z})})]}),fe==="success"&&l.jsx("p",{className:`${r}-success`,style:{...xe},children:B}),fe==="error"&&l.jsx("p",{className:`${r}-error`,style:{...xe},role:"alert",children:g??We??ie})]})},gc={strokeColor:"stroke-color",inputColor:"input-color",placeholderColor:"placeholder-color",buttonColor:"button-color",inputTextColor:"input-text-color",buttonTextColor:"button-text-color",successColor:"success-color",errorColor:"error-color"},hc=["hover","focus","filled","success","error"],fc=`import React, { useMemo, useState } from 'react';
979
984
  import { CommonComponentProps } from '../props';
980
985
  import { buildColorVars, getFormFieldValidationError, scalingValue, useScopedStyles } from '../utils/index';
981
986
  import { omitTextColors, textStylesToCss, type TextStyles } from '../utils/textStylesToCss';
@@ -1184,11 +1189,13 @@ type OnelinerFormProps = {
1184
1189
  settings: OnelinerFormSettings;
1185
1190
  content?: unknown;
1186
1191
  isEditor?: boolean;
1192
+ isPreviewMode?: boolean;
1187
1193
  activeEvent?: string;
1188
1194
  } & CommonComponentProps;
1189
1195
 
1190
- export const OnelinerForm = ({ settings, isEditor, metadata, activeEvent }: OnelinerFormProps) => {
1196
+ export const OnelinerForm = ({ settings, isEditor, isPreviewMode, metadata, activeEvent }: OnelinerFormProps) => {
1191
1197
  const { prefix: P } = useScopedStyles();
1198
+ const canSubmit = (isPreviewMode && isEditor) || !isEditor;
1192
1199
  const {
1193
1200
  fields = [{ name: 'email', type: 'email', placeholder: 'Your email' }],
1194
1201
  buttonIcon,
@@ -1329,6 +1336,8 @@ export const OnelinerForm = ({ settings, isEditor, metadata, activeEvent }: Onel
1329
1336
 
1330
1337
  const handleSubmit = async (e: React.FormEvent) => {
1331
1338
  e.preventDefault();
1339
+ if (!canSubmit) return;
1340
+
1332
1341
  const payload = Object.fromEntries(
1333
1342
  visibleFields.map((f) => [f.name, values[f.name]?.trim() ?? '']).filter(([, v]) => v)
1334
1343
  );
@@ -1408,7 +1417,7 @@ export const OnelinerForm = ({ settings, isEditor, metadata, activeEvent }: Onel
1408
1417
  </div>
1409
1418
  <div className={\`\${P}-overlayAnchor\`}>
1410
1419
  <button
1411
- type="submit"
1420
+ type={canSubmit ? 'submit' : 'button'}
1412
1421
  className={\`\${P}-submitBtn\`}
1413
1422
  aria-label={submitAriaLabel}
1414
1423
  style={{
@@ -1418,6 +1427,7 @@ export const OnelinerForm = ({ settings, isEditor, metadata, activeEvent }: Onel
1418
1427
  paddingLeft: scalingValue(buttonPadding.left, isEditor),
1419
1428
  paddingTop: scalingValue(buttonPadding.top, isEditor),
1420
1429
  paddingBottom: scalingValue(buttonPadding.bottom, isEditor),
1430
+ pointerEvents: canSubmit ? 'auto' : undefined,
1421
1431
  }}
1422
1432
  >
1423
1433
  {status === 'submitting'
@@ -1547,7 +1557,7 @@ const COLOR_VAR_MAP: Record<OnelinerColorKeys, string> = {
1547
1557
  };
1548
1558
 
1549
1559
  const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
1550
- `,Lc="data:image/svg+xml,"+encodeURIComponent('<svg width="23px" height="20px" viewBox="0 0 23 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Newsletter" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Tutorials-pop-up-Copy-12" transform="translate(-43, -687)" fill="#FFFFFF" fill-rule="nonzero"><path d="M66,697 C66,697.552285 65.5522847,698 65,698 L44,698 C43.4477153,698 43,697.552285 43,697 C43,696.447715 43.4477153,696 44,696 L65,696 C65.5522847,696 66,696.447715 66,697 Z M55.6689647,687.256706 L65.6689647,696.256706 C66.1103451,696.653948 66.1103451,697.346052 65.6689647,697.743294 L55.6689647,706.743294 C55.2584547,707.112753 54.6261649,707.079475 54.2567059,706.668965 C53.8872468,706.258455 53.9205252,705.626165 54.3310353,705.256706 L63.5051529,697 L54.3310353,688.743294 C53.9205252,688.373835 53.8872468,687.741545 54.2567059,687.331035 C54.6261649,686.920525 55.2584547,686.887247 55.6689647,687.256706 Z" id="Combined-Shape"></path></g></g></svg>'),Ec=[{name:"email",type:"email",placeholder:"Enter your email",label:"Email",isRequired:!0,error:"Please, enter a valid e-mail."},{name:"name",type:"text",placeholder:"Enter your name",label:"Name",isRequired:!1,error:"Please, enter your name."},{name:"company",type:"text",placeholder:"Enter company",label:"Company",isRequired:!1,error:"Please, enter your company name."},{name:"phone",type:"phone",placeholder:"Enter your phone",label:"Phone",isRequired:!1,error:"Please, enter a valid phone number."}],Ti={fontSettings:{type:"object",display:{type:"font-settings-weight",visible:!0},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},Ic=["strokeColor","inputColor","inputTextColor","placeholderColor","buttonColor","buttonTextColor","successColor","errorColor"],Pc={type:"object",version:1,settings:{sizing:"auto manual",properties:{fieldsToShow:{type:"number",scope:"common",title:"Fields",display:{type:"number"},min:1,max:3},fields:{type:"array",scope:"common",display:{type:"fields-group"},items:{type:"object",properties:{name:{type:"string"},type:{type:"string",enum:["text","phone","email"]},placeholder:{type:"string"},label:{type:"string"},isRequired:{type:"boolean"},error:{type:"string"}}}},buttonLabel:{type:"string",scope:"common",title:"Button Label",display:{type:"text-input"}},buttonIcon:{type:"object",scope:"common",title:"Button Icon",display:{type:"button-icon-switch"},properties:{mode:{type:"string",enum:["On","Off"]},icon:{type:["string","null"],title:"Icon",display:{type:"settings-image-input"}}}},iconMaxWidth:{type:"number",scope:"common",title:"Icon Max Width",display:{type:"full-width-input"},min:0,max:1},fontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},inputPadding:{type:"object",scope:"layout",title:"Input Padding",display:{type:"padding-controls"}},buttonPadding:{type:"object",scope:"layout",title:"Button Padding",display:{type:"padding-controls"}},minHeight:{type:"number",scope:"layout",title:"min Height",display:{type:"numeric-input"},min:0,max:200},corners:{type:"number",scope:"layout",title:"Corners",display:{type:"numeric-input"},min:0,max:100},stroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"numeric-input"},min:0,max:20},strokeColor:{type:"string",scope:"common",title:"Stroke All",display:{type:"palette-color-picker"}},inputColor:{type:"string",scope:"common",title:"Fill Input",display:{type:"palette-color-picker"}},inputTextColor:{type:"string",scope:"common",title:"Input Label",display:{type:"palette-color-picker"}},placeholderColor:{type:"string",scope:"common",title:"Filler Input",display:{type:"palette-color-picker"}},buttonColor:{type:"string",scope:"common",title:"Fill Button",display:{type:"palette-color-picker"}},buttonTextColor:{type:"string",scope:"common",title:"Label Button",display:{type:"palette-color-picker"}},successColor:{type:"string",scope:"common",title:"Success Message Color",display:{type:"palette-color-picker"}},errorColor:{type:"string",scope:"common",title:"Error Message Color",display:{type:"palette-color-picker"}},successMessage:{type:"string",scope:"common",title:"Success Message",display:{type:"text-input"}},errorMessage:{type:"string",scope:"common",title:"Error Message",display:{type:"text-input"}},stateOverrides:{type:"object",scope:"common"},inputFontSettings:{...Ti.fontSettings,scope:"common",title:"Input"},inputFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},inputLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},inputLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},inputWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},inputTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}},buttonFontSettings:{...Ti.fontSettings,scope:"common",title:"Button"},buttonFontSize:{type:"number",scope:"layout",title:"Button Font Size",display:{type:"font-size"}},buttonLineHeight:{type:"number",scope:"layout",title:"Button Line Height",display:{type:"line-height-input"}},buttonLetterSpacing:{type:"number",scope:"layout",title:"Button Letter Spacing",display:{type:"letter-spacing-input"}},buttonWordSpacing:{type:"number",scope:"layout",title:"Button Word Spacing",display:{type:"word-spacing-input"}},buttonTextAppearance:{type:"object",scope:"layout",title:"Button Text Appearance",display:{type:"text-appearance"}},statusFontSettings:{...Ti.fontSettings,scope:"common",title:"Success/Error"},statusFontSize:{type:"number",scope:"layout",title:"Success/Error Font Size",display:{type:"font-size"}},statusLineHeight:{type:"number",scope:"layout",title:"Success/Error Line Height",display:{type:"line-height-input"}},statusLetterSpacing:{type:"number",scope:"layout",title:"Success/Error Letter Spacing",display:{type:"letter-spacing-input"}},statusWordSpacing:{type:"number",scope:"layout",title:"Success/Error Word Spacing",display:{type:"word-spacing-input"}},statusTextAppearance:{type:"object",scope:"layout",title:"Success/Error Text Appearance",display:{type:"text-appearance"}}},defaults:{fields:Ec,fieldsToShow:1,buttonLabel:"Subscribe",buttonIcon:{mode:"Off",icon:Lc},fontFamily:"Arial",strokeColor:"#000000",inputColor:"#ffffff",inputTextColor:"#0A00F8",placeholderColor:"#000000",buttonColor:"#000000",buttonTextColor:"#ffffff",errorColor:"#ef4444",successColor:"#22c55e",successMessage:"Thanks for subscribing!",errorMessage:"Please, fill all required fields.",stateOverrides:{hover:{buttonColor:"#33A2F2"}},inputFontSettings:{fontWeight:400,fontStyle:"normal"},inputLetterSpacing:0,inputWordSpacing:0,inputTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},buttonFontSettings:{fontWeight:400,fontStyle:"normal"},buttonLetterSpacing:0,buttonWordSpacing:0,buttonTextAppearance:{textTransform:"uppercase",textDecoration:"none",fontVariant:"normal"},statusFontSettings:{fontWeight:400,fontStyle:"normal"},statusLetterSpacing:0,statusWordSpacing:0,statusTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{minHeight:.1,iconMaxWidth:.1,stroke:.001,corners:0,buttonPadding:{top:.02,right:.04,bottom:.02,left:.04},inputPadding:{top:.01,right:.03,bottom:.01,left:.03},inputFontSize:.043,inputLineHeight:.043,buttonFontSize:.0373,buttonLineHeight:.0373,statusFontSize:.0373,statusLineHeight:.0373},d:{minHeight:.028,iconMaxWidth:.028,stroke:.001,corners:0,buttonPadding:{right:.0175,left:.0175,top:.005,bottom:.004},inputPadding:{top:.01,right:.01,bottom:.01,left:.01},inputFontSize:.01,inputLineHeight:.01,buttonFontSize:.009,buttonLineHeight:.01,statusFontSize:.01,statusLineHeight:.01}},displayRules:[{if:{name:"stroke",value:0},then:{name:"properties.strokeColor.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonFontSettings.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonFontSize.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonLineHeight.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonLetterSpacing.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonWordSpacing.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonTextAppearance.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"Off"},then:{name:"properties.iconMaxWidth.display.visible",value:!1}}]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","fieldsToShow"]},{type:"row",items:["minHeight"]},{type:"row",items:["corners","stroke"]},{type:"row",title:"",items:["inputPadding","buttonPadding"]},{type:"row",title:"",items:["buttonIcon"]},"iconMaxWidth"]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:["fontFamily",{type:"group",title:"",items:["inputFontSettings",{type:"row",items:["inputFontSize","inputLineHeight","inputLetterSpacing","inputWordSpacing"]},"inputTextAppearance"]},{type:"group",title:"",items:["buttonFontSettings",{type:"row",items:["buttonFontSize","buttonLineHeight","buttonLetterSpacing","buttonWordSpacing"]},"buttonTextAppearance"]},{type:"group",title:"",items:["statusFontSettings",{type:"row",items:["statusFontSize","statusLineHeight","statusLetterSpacing","statusWordSpacing"]},"statusTextAppearance"]}]},{id:"fields",icon:"layers",title:"Fields",tooltip:"Fields",layout:["fields","buttonLabel","successMessage","errorMessage"]}],paletteBookmark:{items:[...Ic],panelIds:["general","typeStyle"],stateItems:{default:["strokeColor","placeholderColor","inputColor","buttonTextColor","buttonColor"],hover:["strokeColor","inputColor","buttonTextColor","buttonColor"],focus:["strokeColor","inputTextColor","buttonTextColor","buttonColor"],filled:["strokeColor","inputColor","inputTextColor","buttonTextColor"],success:["successColor"],error:["errorColor"]}},allowedPlugins:["newsletter"],states:["default","hover","focus","filled","success","error"]},Rc={element:Sc,id:"oneliner-form",name:"Newsletter Single Line",category:"forms",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Newsletter_Single_Line.png"},defaultSize:{d:{width:400,height:60},t:{width:453,height:60},m:{width:340,height:60}},assetsPaths:{content:[],parameters:[{path:"buttonIcon.icon"}]},schema:Pc,sourceCode:Tc};function Oo(e){return`
1560
+ `,yc="data:image/svg+xml,"+encodeURIComponent('<svg width="23px" height="20px" viewBox="0 0 23 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Newsletter" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Tutorials-pop-up-Copy-12" transform="translate(-43, -687)" fill="#FFFFFF" fill-rule="nonzero"><path d="M66,697 C66,697.552285 65.5522847,698 65,698 L44,698 C43.4477153,698 43,697.552285 43,697 C43,696.447715 43.4477153,696 44,696 L65,696 C65.5522847,696 66,696.447715 66,697 Z M55.6689647,687.256706 L65.6689647,696.256706 C66.1103451,696.653948 66.1103451,697.346052 65.6689647,697.743294 L55.6689647,706.743294 C55.2584547,707.112753 54.6261649,707.079475 54.2567059,706.668965 C53.8872468,706.258455 53.9205252,705.626165 54.3310353,705.256706 L63.5051529,697 L54.3310353,688.743294 C53.9205252,688.373835 53.8872468,687.741545 54.2567059,687.331035 C54.6261649,686.920525 55.2584547,686.887247 55.6689647,687.256706 Z" id="Combined-Shape"></path></g></g></svg>'),vc=[{name:"email",type:"email",placeholder:"Enter your email",label:"Email",isRequired:!0,error:"Please, enter a valid e-mail."},{name:"name",type:"text",placeholder:"Enter your name",label:"Name",isRequired:!1,error:"Please, enter your name."},{name:"company",type:"text",placeholder:"Enter company",label:"Company",isRequired:!1,error:"Please, enter your company name."},{name:"phone",type:"phone",placeholder:"Enter your phone",label:"Phone",isRequired:!1,error:"Please, enter a valid phone number."}],Lo={fontSettings:{type:"object",display:{type:"font-settings-weight",visible:!0},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},bc=["strokeColor","inputColor","inputTextColor","placeholderColor","buttonColor","buttonTextColor","successColor","errorColor"],xc={type:"object",version:1,settings:{sizing:"auto manual",properties:{fieldsToShow:{type:"number",scope:"common",title:"Fields",display:{type:"number"},min:1,max:3},fields:{type:"array",scope:"common",display:{type:"fields-group"},items:{type:"object",properties:{name:{type:"string"},type:{type:"string",enum:["text","phone","email"]},placeholder:{type:"string"},label:{type:"string"},isRequired:{type:"boolean"},error:{type:"string"}}}},buttonLabel:{type:"string",scope:"common",title:"Button Label",display:{type:"text-input"}},buttonIcon:{type:"object",scope:"common",title:"Button Icon",display:{type:"button-icon-switch"},properties:{mode:{type:"string",enum:["On","Off"]},icon:{type:["string","null"],title:"Icon",display:{type:"settings-image-input"}}}},iconMaxWidth:{type:"number",scope:"common",title:"Icon Max Width",display:{type:"full-width-input"},min:0,max:1},fontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},inputPadding:{type:"object",scope:"layout",title:"Input Padding",display:{type:"padding-controls"}},buttonPadding:{type:"object",scope:"layout",title:"Button Padding",display:{type:"padding-controls"}},minHeight:{type:"number",scope:"layout",title:"min Height",display:{type:"numeric-input"},min:0,max:200},corners:{type:"number",scope:"layout",title:"Corners",display:{type:"numeric-input"},min:0,max:100},stroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"numeric-input"},min:0,max:20},strokeColor:{type:"string",scope:"common",title:"Stroke All",display:{type:"palette-color-picker"}},inputColor:{type:"string",scope:"common",title:"Fill Input",display:{type:"palette-color-picker"}},inputTextColor:{type:"string",scope:"common",title:"Input Label",display:{type:"palette-color-picker"}},placeholderColor:{type:"string",scope:"common",title:"Filler Input",display:{type:"palette-color-picker"}},buttonColor:{type:"string",scope:"common",title:"Fill Button",display:{type:"palette-color-picker"}},buttonTextColor:{type:"string",scope:"common",title:"Label Button",display:{type:"palette-color-picker"}},successColor:{type:"string",scope:"common",title:"Success Message Color",display:{type:"palette-color-picker"}},errorColor:{type:"string",scope:"common",title:"Error Message Color",display:{type:"palette-color-picker"}},successMessage:{type:"string",scope:"common",title:"Success Message",display:{type:"text-input"}},errorMessage:{type:"string",scope:"common",title:"Error Message",display:{type:"text-input"}},stateOverrides:{type:"object",scope:"common"},inputFontSettings:{...Lo.fontSettings,scope:"common",title:"Input"},inputFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},inputLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},inputLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},inputWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},inputTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}},buttonFontSettings:{...Lo.fontSettings,scope:"common",title:"Button"},buttonFontSize:{type:"number",scope:"layout",title:"Button Font Size",display:{type:"font-size"}},buttonLineHeight:{type:"number",scope:"layout",title:"Button Line Height",display:{type:"line-height-input"}},buttonLetterSpacing:{type:"number",scope:"layout",title:"Button Letter Spacing",display:{type:"letter-spacing-input"}},buttonWordSpacing:{type:"number",scope:"layout",title:"Button Word Spacing",display:{type:"word-spacing-input"}},buttonTextAppearance:{type:"object",scope:"layout",title:"Button Text Appearance",display:{type:"text-appearance"}},statusFontSettings:{...Lo.fontSettings,scope:"common",title:"Success/Error"},statusFontSize:{type:"number",scope:"layout",title:"Success/Error Font Size",display:{type:"font-size"}},statusLineHeight:{type:"number",scope:"layout",title:"Success/Error Line Height",display:{type:"line-height-input"}},statusLetterSpacing:{type:"number",scope:"layout",title:"Success/Error Letter Spacing",display:{type:"letter-spacing-input"}},statusWordSpacing:{type:"number",scope:"layout",title:"Success/Error Word Spacing",display:{type:"word-spacing-input"}},statusTextAppearance:{type:"object",scope:"layout",title:"Success/Error Text Appearance",display:{type:"text-appearance"}}},defaults:{fields:vc,fieldsToShow:1,buttonLabel:"Subscribe",buttonIcon:{mode:"Off",icon:yc},fontFamily:"Arial",strokeColor:"#000000",inputColor:"#ffffff",inputTextColor:"#0A00F8",placeholderColor:"#000000",buttonColor:"#000000",buttonTextColor:"#ffffff",errorColor:"#ef4444",successColor:"#22c55e",successMessage:"Thanks for subscribing!",errorMessage:"Please, fill all required fields.",stateOverrides:{hover:{buttonColor:"#33A2F2"}},inputFontSettings:{fontWeight:400,fontStyle:"normal"},inputLetterSpacing:0,inputWordSpacing:0,inputTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},buttonFontSettings:{fontWeight:400,fontStyle:"normal"},buttonLetterSpacing:0,buttonWordSpacing:0,buttonTextAppearance:{textTransform:"uppercase",textDecoration:"none",fontVariant:"normal"},statusFontSettings:{fontWeight:400,fontStyle:"normal"},statusLetterSpacing:0,statusWordSpacing:0,statusTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{minHeight:.1,iconMaxWidth:.1,stroke:.001,corners:0,buttonPadding:{top:.02,right:.04,bottom:.02,left:.04},inputPadding:{top:.01,right:.03,bottom:.01,left:.03},inputFontSize:.043,inputLineHeight:.043,buttonFontSize:.0373,buttonLineHeight:.0373,statusFontSize:.0373,statusLineHeight:.0373},d:{minHeight:.028,iconMaxWidth:.028,stroke:.001,corners:0,buttonPadding:{right:.0175,left:.0175,top:.005,bottom:.004},inputPadding:{top:.01,right:.01,bottom:.01,left:.01},inputFontSize:.01,inputLineHeight:.01,buttonFontSize:.009,buttonLineHeight:.01,statusFontSize:.01,statusLineHeight:.01}},displayRules:[{if:{name:"stroke",value:0},then:{name:"properties.strokeColor.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonFontSettings.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonFontSize.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonLineHeight.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonLetterSpacing.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonWordSpacing.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonTextAppearance.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"Off"},then:{name:"properties.iconMaxWidth.display.visible",value:!1}}]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","fieldsToShow"]},{type:"row",items:["minHeight"]},{type:"row",items:["corners","stroke"]},{type:"row",title:"",items:["inputPadding","buttonPadding"]},{type:"row",title:"",items:["buttonIcon"]},"iconMaxWidth"]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:["fontFamily",{type:"group",title:"",items:["inputFontSettings",{type:"row",items:["inputFontSize","inputLineHeight","inputLetterSpacing","inputWordSpacing"]},"inputTextAppearance"]},{type:"group",title:"",items:["buttonFontSettings",{type:"row",items:["buttonFontSize","buttonLineHeight","buttonLetterSpacing","buttonWordSpacing"]},"buttonTextAppearance"]},{type:"group",title:"",items:["statusFontSettings",{type:"row",items:["statusFontSize","statusLineHeight","statusLetterSpacing","statusWordSpacing"]},"statusTextAppearance"]}]},{id:"fields",icon:"layers",title:"Fields",tooltip:"Fields",layout:["fields","buttonLabel","successMessage","errorMessage"]}],paletteBookmark:{items:[...bc],panelIds:["general","typeStyle"],stateItems:{default:["strokeColor","placeholderColor","inputColor","buttonTextColor","buttonColor"],hover:["strokeColor","inputColor","buttonTextColor","buttonColor"],focus:["strokeColor","inputTextColor","buttonTextColor","buttonColor"],filled:["strokeColor","inputColor","inputTextColor","buttonTextColor"],success:["successColor"],error:["errorColor"]}},allowedPlugins:["newsletter"],states:["default","hover","focus","filled","success","error"]},Cc={element:mc,id:"oneliner-form",name:"Newsletter Single Line",category:"forms",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Newsletter_Single_Line.png"},defaultSize:{d:{width:400,height:60},t:{width:453,height:60},m:{width:340,height:60}},assetsPaths:{content:[],parameters:[{path:"buttonIcon.icon"}]},schema:xc,sourceCode:fc};function Hi(e){return`
1551
1561
  .${e}-marquee-wrapper {
1552
1562
  overflow: hidden;
1553
1563
  width: 100%;
@@ -1679,7 +1689,7 @@ const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
1679
1689
  .${e}-image-hover-grayscale:hover img {
1680
1690
  filter: grayscale(100%);
1681
1691
  }
1682
- `}const Ac=30,Mc=20,Li=2,_c=2,Wc=(e,t)=>Array.from({length:t},()=>e).flat(),kc=(e,t)=>{const n=t.getBoundingClientRect(),i=e.getBoundingClientRect();return i.right>n.left&&i.left<n.right},Fc=(e,t)=>{const n=e.querySelectorAll(`[data-marquee-item-index="${t}"]`);return Array.from(n).some(i=>kc(i,e))},Nc=({item:e,prefix:t,imageFit:n,imageMaxWidth:i,imageMaxHeight:a,imageHoverClass:s,isFirstSet:o,scaled:d,onFirstSetImageDone:l})=>{var x,A,S;const u=c.useRef(null);c.useLayoutEffect(()=>{if(!o)return;const K=u.current;K!=null&&K.complete&&(l==null||l())},[o,(x=e.image)==null?void 0:x.url,l]);const p=n.display==="Cover",I=n.ratioValue??"1:1",b=n.reversed??!1,[w,f]=I.split(":").map(Number),L=(b?f:w)/(b?w:f);let C=i,m=C/L;m>a&&(m=a,C=m*L);const z=d(C),j=d(m),R=((A=e.image)==null?void 0:A.url)&&r.jsx("img",{ref:u,src:e.image.url,alt:((S=e.image)==null?void 0:S.name)??"",style:p?{pointerEvents:"auto",display:"block",width:"100%",height:"100%",objectFit:"cover"}:{pointerEvents:"auto",display:"block",height:"100%",width:"auto",maxWidth:d(i),objectFit:"contain"},onLoad:o?l:void 0,onError:o?l:void 0});return r.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"start",...p?{width:z}:{width:"fit-content",maxWidth:d(i),minWidth:0}},children:r.jsx("div",{className:s,style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",flexShrink:0,...p?{width:z,height:j,overflow:"hidden"}:{width:"fit-content",maxWidth:d(i),height:d(a)}},children:R&&e.link?r.jsx("a",{href:e.link,target:"_blank",rel:"noopener noreferrer",className:Ie(`${t}-marquee-link`,!p&&`${t}-marquee-link-contain`),children:R}):R})})},Hc=({settings:e,content:t,isEditor:n,isPreviewMode:i,isEditMode:a})=>{const{prefix:s}=E.useScopedStyles(),{speed:o,direction:d,pauseOnHover:l,gap:u,imageMaxWidth:p,imageMaxHeight:I,imageFit:b,hoverEffect:w}=e,f=!!a,h=!n||!!i,T=h&&w!=="off"&&w!=="randomize"?`${s}-image-hover-${w}`:void 0,L=n?!!i:!0,m=((t==null?void 0:t.length)??0)>0&&(L||!!n),z=Math.max(0,o)*Ac,j=y=>E.scalingValue(y,n??!1),R=c.useRef(null),x=c.useRef(null),A=c.useRef(null),[S,K]=c.useState(0),[v,D]=c.useState(0),W=L&&l==="on",[q,G]=c.useState(!1),[$,H]=c.useState({}),_=c.useRef($);_.current=$;const B=c.useRef(null),k=c.useRef(0),P=c.useRef(null),te=c.useMemo(()=>(t??[]).map(y=>{var g;return((g=y.image)==null?void 0:g.url)??""}).join("\0"),[t]),[ae,re]=c.useState(Li),U=c.useMemo(()=>{const y=t??[];return!L||y.length===0?y:Wc(y,ae)},[t,L,ae]),N=c.useMemo(()=>U.filter(y=>{var g;return!!((g=y.image)!=null&&g.url)}).length,[U]),oe=m?_c:1;c.useLayoutEffect(()=>{k.current=0,H({}),B.current=null,re(Li),K(0)},[te]),c.useEffect(()=>{if(!h||w!=="randomize")return;const y=R.current;if(!y)return;const g=M=>{H(F=>{let O=null;for(const ie of M)ie in F&&(Fc(y,ie)||(O||(O={...F}),delete O[ie]));return O??F})},V=new IntersectionObserver(M=>{const F=new Set;for(const O of M){const ie=O.target.dataset.marqueeItemIndex,pe=ie!==void 0?Number(ie):NaN;Number.isNaN(pe)||F.add(pe)}F.size>0&&g(F)},{root:y,threshold:0});Object.keys($).forEach(M=>{const F=Number(M);y.querySelectorAll(`[data-marquee-item-index="${F}"]`).forEach(O=>V.observe(O))});let J=0;const Q=()=>{const M=Object.keys(_.current);M.length!==0&&(g(M.map(Number)),J=requestAnimationFrame(Q))};return Object.keys(_.current).length>0&&(J=requestAnimationFrame(Q)),()=>{cancelAnimationFrame(J),V.disconnect()}},[w,$,h]),c.useLayoutEffect(()=>{if(!m)return;const y=R.current,g=A.current;if(!y||!g)return;let V=0;const J=()=>{const F=y.getBoundingClientRect().width,O=g.getBoundingClientRect().width,ie=B.current,pe=typeof ie=="number"&&Math.abs(ie-O)<=.25;if(B.current=O,L&&O>0&&ae>0){const le=O/ae;if(le>0&&F>0){const he=Math.max(Li,Math.ceil(F/le)+1);if(he!==ae){re(he);return}}}if(O>0&&S<=0){K(O);return}pe&&O!==S?K(O):!pe&&S<=0&&(cancelAnimationFrame(V),V=requestAnimationFrame(J))},Q=()=>{cancelAnimationFrame(V),V=requestAnimationFrame(J)};P.current=Q,Q();const M=new ResizeObserver(Q);return M.observe(y),M.observe(g),()=>{P.current=null,cancelAnimationFrame(V),M.disconnect()}},[L,m,S,te,ae]),c.useLayoutEffect(()=>{const y=x.current;if(!m||!y)return;const g=S>0?S:0,V=g>0&&z>0?g/z*1e3:0,J=`${Math.max(0,V)/1e3}s`;y.style.setProperty("--marquee-distance",`${g}px`),y.style.setProperty("--marquee-duration",J)},[L,m,z,S]),c.useLayoutEffect(()=>{if(!m){D(0);return}if(S<=0){D(0);return}const y=x.current;if(!y)return;const g=()=>{const J=y.getBoundingClientRect().height;D(J>0?J:0)};g();const V=new ResizeObserver(g);return V.observe(y),()=>V.disconnect()},[m,oe,U,n,u,p,I,S,b,$]);const ye=()=>{W&&G(!0)},ce=()=>{W&&G(!1)},ge=c.useCallback(()=>{var y;k.current=Math.min(N,k.current+1),(y=P.current)==null||y.call(P)},[N]),we=c.useCallback((y,g)=>{H(V=>{const J=V[y]??g,Q=(t??[]).filter(F=>F!==J);if(Q.length===0)return V;const M=Q[Math.floor(Math.random()*Q.length)];return{...V,[y]:M}})},[t]),ee=(y,g,V,J)=>{const Q=h&&w==="randomize"&&b.display==="Cover"?$[V]??y:y,M=`max(${j(u)}, ${Mc}px)`,F=`calc(-0.5 * (${M} + ${j(u)}))`;return r.jsxs("div",{className:`${s}-marquee-card`,"data-marquee-item-index":V,onMouseEnter:h&&w==="randomize"&&b.display==="Cover"?()=>we(V,y):void 0,children:[r.jsx(Nc,{item:Q,prefix:s,imageFit:b,imageMaxWidth:p,imageMaxHeight:I,imageHoverClass:T,isEditor:n,isFirstSet:J,scaled:j,onFirstSetImageDone:ge}),f&&r.jsx("div",{"data-controls":"gap","data-controls-axis":"x",className:`${s}-gap-control`,style:{position:"absolute",top:0,right:F,width:M,height:"100%"}})]},`${g}-${V}`)};if(m){const y=L?W&&q?"paused":"running":"paused";return r.jsxs("div",{ref:R,className:Ie(`${s}-wrapper`,`${s}-marquee-wrapper`),"aria-label":"Marquee",style:S>0&&v>0?{height:v}:void 0,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:Oo(s)}}),r.jsx("div",{ref:x,className:`${s}-marquee-track`,"data-direction":d,onMouseEnter:ye,onMouseLeave:ce,style:{"--marquee-play-state":y},children:Array.from({length:oe},(g,V)=>r.jsx("div",{ref:V===0?A:void 0,className:Ie(`${s}-marquee-row`,`${s}-marquee-set`),style:{gap:j(u),paddingRight:j(u)},"aria-hidden":V>0,children:U.map((J,Q)=>ee(J,V,Q,V===0))},`set-${V}`))},"marquee-track")]})}return r.jsxs("div",{ref:R,className:`${s}-wrapper`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:Oo(s)}}),r.jsx("div",{className:Ie(`${s}-marquee-row`,`${s}-marquee-static`),style:{gap:j(u),transform:"none"},"aria-label":"Marquee",children:t==null?void 0:t.map((y,g)=>ee(y,0,g))},"marquee-static")]})},Bc=`import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
1692
+ `}const Sc=30,wc=20,Eo=2,$c=2,Tc=(e,t)=>Array.from({length:t},()=>e).flat(),Lc=(e,t)=>{const n=t.getBoundingClientRect(),o=e.getBoundingClientRect();return o.right>n.left&&o.left<n.right},Ec=(e,t)=>{const n=e.querySelectorAll(`[data-marquee-item-index="${t}"]`);return Array.from(n).some(o=>Lc(o,e))},Pc=({item:e,prefix:t,imageFit:n,imageMaxWidth:o,imageMaxHeight:i,imageHoverClass:r,isFirstSet:s,scaled:c,onFirstSetImageDone:a})=>{var $,A,w;const d=u.useRef(null);u.useLayoutEffect(()=>{if(!s)return;const H=d.current;H!=null&&H.complete&&(a==null||a())},[s,($=e.image)==null?void 0:$.url,a]);const p=n.display==="Cover",T=n.ratioValue??"1:1",y=n.reversed??!1,[C,m]=T.split(":").map(Number),x=(y?m:C)/(y?C:m);let b=o,f=b/x;f>i&&(f=i,b=f*x);const O=c(b),P=c(f),_=((A=e.image)==null?void 0:A.url)&&l.jsx("img",{ref:d,src:e.image.url,alt:((w=e.image)==null?void 0:w.name)??"",style:p?{pointerEvents:"auto",display:"block",width:"100%",height:"100%",objectFit:"cover"}:{pointerEvents:"auto",display:"block",height:"100%",width:"auto",maxWidth:c(o),objectFit:"contain"},onLoad:s?a:void 0,onError:s?a:void 0});return l.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"start",...p?{width:O}:{width:"fit-content",maxWidth:c(o),minWidth:0}},children:l.jsx("div",{className:r,style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",flexShrink:0,...p?{width:O,height:P,overflow:"hidden"}:{width:"fit-content",maxWidth:c(o),height:c(i)}},children:_&&e.link?l.jsx("a",{href:e.link,target:"_blank",rel:"noopener noreferrer",className:$e(`${t}-marquee-link`,!p&&`${t}-marquee-link-contain`),children:_}):_})})},_c=({settings:e,content:t,isEditor:n,isPreviewMode:o,isEditMode:i})=>{const{prefix:r}=E.useScopedStyles(),{speed:s,direction:c,pauseOnHover:a,gap:d,imageMaxWidth:p,imageMaxHeight:T,imageFit:y,hoverEffect:C}=e,m=!!i,h=!n||!!o,W=h&&C!=="off"&&C!=="randomize"?`${r}-image-hover-${C}`:void 0,x=n?!!o:!0,f=((t==null?void 0:t.length)??0)>0&&(x||!!n),O=Math.max(0,s)*Sc,P=v=>E.scalingValue(v,n??!1),_=u.useRef(null),$=u.useRef(null),A=u.useRef(null),[w,H]=u.useState(0),[L,V]=u.useState(0),D=x&&a==="on",[J,q]=u.useState(!1),[S,R]=u.useState({}),F=u.useRef(S);F.current=S;const N=u.useRef(null),I=u.useRef(0),B=u.useRef(null),ie=u.useMemo(()=>(t??[]).map(v=>{var g;return((g=v.image)==null?void 0:g.url)??""}).join("\0"),[t]),[Q,oe]=u.useState(Eo),G=u.useMemo(()=>{const v=t??[];return!x||v.length===0?v:Tc(v,Q)},[t,x,Q]),M=u.useMemo(()=>G.filter(v=>{var g;return!!((g=v.image)!=null&&g.url)}).length,[G]),re=f?$c:1;u.useLayoutEffect(()=>{I.current=0,R({}),N.current=null,oe(Eo),H(0)},[ie]),u.useEffect(()=>{if(!h||C!=="randomize")return;const v=_.current;if(!v)return;const g=te=>{R(ee=>{let Z=null;for(const de of te)de in ee&&(Ec(v,de)||(Z||(Z={...ee}),delete Z[de]));return Z??ee})},k=new IntersectionObserver(te=>{const ee=new Set;for(const Z of te){const de=Z.target.dataset.marqueeItemIndex,Se=de!==void 0?Number(de):NaN;Number.isNaN(Se)||ee.add(Se)}ee.size>0&&g(ee)},{root:v,threshold:0});Object.keys(S).forEach(te=>{const ee=Number(te);v.querySelectorAll(`[data-marquee-item-index="${ee}"]`).forEach(Z=>k.observe(Z))});let K=0;const U=()=>{const te=Object.keys(F.current);te.length!==0&&(g(te.map(Number)),K=requestAnimationFrame(U))};return Object.keys(F.current).length>0&&(K=requestAnimationFrame(U)),()=>{cancelAnimationFrame(K),k.disconnect()}},[C,S,h]),u.useLayoutEffect(()=>{if(!f)return;const v=_.current,g=A.current;if(!v||!g)return;let k=0;const K=()=>{const ee=v.getBoundingClientRect().width,Z=g.getBoundingClientRect().width,de=N.current,Se=typeof de=="number"&&Math.abs(de-Z)<=.25;if(N.current=Z,x&&Z>0&&Q>0){const ye=Z/Q;if(ye>0&&ee>0){const ue=Math.max(Eo,Math.ceil(ee/ye)+1);if(ue!==Q){oe(ue);return}}}if(Z>0&&w<=0){H(Z);return}Se&&Z!==w?H(Z):!Se&&w<=0&&(cancelAnimationFrame(k),k=requestAnimationFrame(K))},U=()=>{cancelAnimationFrame(k),k=requestAnimationFrame(K)};B.current=U,U();const te=new ResizeObserver(U);return te.observe(v),te.observe(g),()=>{B.current=null,cancelAnimationFrame(k),te.disconnect()}},[x,f,w,ie,Q]),u.useLayoutEffect(()=>{const v=$.current;if(!f||!v)return;const g=w>0?w:0,k=g>0&&O>0?g/O*1e3:0,K=`${Math.max(0,k)/1e3}s`;v.style.setProperty("--marquee-distance",`${g}px`),v.style.setProperty("--marquee-duration",K)},[x,f,O,w]),u.useLayoutEffect(()=>{if(!f){V(0);return}if(w<=0){V(0);return}const v=$.current;if(!v)return;const g=()=>{const K=v.getBoundingClientRect().height;V(K>0?K:0)};g();const k=new ResizeObserver(g);return k.observe(v),()=>k.disconnect()},[f,re,G,n,d,p,T,w,y,S]);const Le=()=>{D&&q(!0)},ce=()=>{D&&q(!1)},fe=u.useCallback(()=>{var v;I.current=Math.min(M,I.current+1),(v=B.current)==null||v.call(B)},[M]),We=u.useCallback((v,g)=>{R(k=>{const K=k[v]??g,U=(t??[]).filter(ee=>ee!==K);if(U.length===0)return k;const te=U[Math.floor(Math.random()*U.length)];return{...k,[v]:te}})},[t]),ne=(v,g,k,K)=>{const U=h&&C==="randomize"&&y.display==="Cover"?S[k]??v:v,te=`max(${P(d)}, ${wc}px)`,ee=`calc(-0.5 * (${te} + ${P(d)}))`;return l.jsxs("div",{className:`${r}-marquee-card`,"data-marquee-item-index":k,onMouseEnter:h&&C==="randomize"&&y.display==="Cover"?()=>We(k,v):void 0,children:[l.jsx(Pc,{item:U,prefix:r,imageFit:y,imageMaxWidth:p,imageMaxHeight:T,imageHoverClass:W,isEditor:n,isFirstSet:K,scaled:P,onFirstSetImageDone:fe}),m&&l.jsx("div",{"data-controls":"gap","data-controls-axis":"x",className:`${r}-gap-control`,style:{position:"absolute",top:0,right:ee,width:te,height:"100%"}})]},`${g}-${k}`)};if(f){const v=x?D&&J?"paused":"running":"paused";return l.jsxs("div",{ref:_,className:$e(`${r}-wrapper`,`${r}-marquee-wrapper`),"aria-label":"Marquee",style:w>0&&L>0?{height:L}:void 0,children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:Hi(r)}}),l.jsx("div",{ref:$,className:`${r}-marquee-track`,"data-direction":c,onMouseEnter:Le,onMouseLeave:ce,style:{"--marquee-play-state":v},children:Array.from({length:re},(g,k)=>l.jsx("div",{ref:k===0?A:void 0,className:$e(`${r}-marquee-row`,`${r}-marquee-set`),style:{gap:P(d),paddingRight:P(d)},"aria-hidden":k>0,children:G.map((K,U)=>ne(K,k,U,k===0))},`set-${k}`))},"marquee-track")]})}return l.jsxs("div",{ref:_,className:`${r}-wrapper`,children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:Hi(r)}}),l.jsx("div",{className:$e(`${r}-marquee-row`,`${r}-marquee-static`),style:{gap:P(d),transform:"none"},"aria-label":"Marquee",children:t==null?void 0:t.map((v,g)=>ne(v,0,g))},"marquee-static")]})},Ac=`import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
1683
1693
  import cn from 'classnames';
1684
1694
  import { CommonComponentProps } from '../props';
1685
1695
  import { scalingValue } from '../utils/scalingValue';
@@ -2309,7 +2319,7 @@ type MarqueeProps = {
2309
2319
  isPreviewMode?: boolean;
2310
2320
  isEditMode?: boolean;
2311
2321
  } & CommonComponentProps;
2312
- `,Oc={type:"object",version:1,settings:{sizing:"auto manual",properties:{speed:{type:"number",scope:"layout",title:"Speed",display:{type:"speed-control"},min:.5,max:7},direction:{type:"string",scope:"common",title:"Direction",display:{type:"direction-control"},enum:["left","right"]},pauseOnHover:{title:"Pause on hover",type:"string",scope:"common",display:{type:"toggle-cycle",enum:["on","off"]}},hoverEffect:{type:"string",scope:"common",title:"Effect",display:{type:"toggle-cycle",enum:["off","brightness","grayscale"]}},gap:{type:"number",scope:"layout",title:"Gap",min:0,max:200,display:{type:"numeric-input"}},imageMaxWidth:{type:"number",scope:"layout",title:"Max width",min:10,max:400,display:{type:"numeric-input"}},imageMaxHeight:{type:"number",scope:"layout",title:"Max height",min:10,max:400,display:{type:"numeric-input"}},imageFit:{type:"object",scope:"common",title:"Display",display:{type:"image-ratio-control"},properties:{display:{type:"string",enum:["Fit","Cover"]},ratioValue:{type:"string",enum:["1:1","2:3","3:4","4:5","16:9"]},reversed:{type:"boolean"}}}},defaults:{direction:"left",pauseOnHover:"off",hoverEffect:"off",imageFit:{display:"Fit",ratioValue:"16:9",reversed:!1}},layoutDefaults:{m:{speed:.55,gap:.04,imageMaxWidth:.8,imageMaxHeight:.21},d:{speed:1.64,gap:.02,imageMaxWidth:.15,imageMaxHeight:.1}},displayRules:[{if:{name:"imageFit.display",value:"Cover"},then:{name:"properties.hoverEffect.display.enum",value:["off","brightness","grayscale","randomize"]}}],layout:["__componentName__","speed","direction","pauseOnHover","hoverEffect","gap","imageMaxWidth","imageMaxHeight","imageFit"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__"]},{type:"row",items:["speed","imageFit"]},{type:"row",items:["imageMaxWidth","imageMaxHeight"]},{type:"row",items:["direction"]},{type:"row",title:"Hover Settings",items:[{type:"row",title:"",items:["hoverEffect","pauseOnHover"]}]}]}],content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"}},link:{label:"URL",placeholder:"Enter link...",display:{type:"text-input"}}}},default:[{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7RZNCQFC3T744H0KX6R3FR.jpeg",name:""},link:""},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7RZRTSS60YBFT6Y37ZX00T.jpeg",name:""},link:""},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ9M9YJPQ5JWKCHDEW5M1GJD.jpeg",name:""},link:""},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7S04EHBXQS1T4KVAMZNZQM.jpeg",name:""},link:""},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7S08Q40WHD39024VNDWF2Q.jpeg",name:""},link:""}]}},jc={element:Hc,id:"marquee",name:"Marquee",category:"galleries",version:1,defaultSize:{d:{width:"100%",height:140},m:{width:390,height:80}},preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Simple_Marquee.mp4"},schema:Oc,sourceCode:Bc,assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[]}};function jo(e){return`
2322
+ `,Rc={type:"object",version:1,settings:{sizing:"auto manual",properties:{speed:{type:"number",scope:"layout",title:"Speed",display:{type:"speed-control"},min:.5,max:7},direction:{type:"string",scope:"common",title:"Direction",display:{type:"direction-control"},enum:["left","right"]},pauseOnHover:{title:"Pause on hover",type:"string",scope:"common",display:{type:"toggle-cycle",enum:["on","off"]}},hoverEffect:{type:"string",scope:"common",title:"Effect",display:{type:"toggle-cycle",enum:["off","brightness","grayscale"]}},gap:{type:"number",scope:"layout",title:"Gap",min:0,max:200,display:{type:"numeric-input"}},imageMaxWidth:{type:"number",scope:"layout",title:"Max width",min:10,max:400,display:{type:"numeric-input"}},imageMaxHeight:{type:"number",scope:"layout",title:"Max height",min:10,max:400,display:{type:"numeric-input"}},imageFit:{type:"object",scope:"common",title:"Display",display:{type:"image-ratio-control"},properties:{display:{type:"string",enum:["Fit","Cover"]},ratioValue:{type:"string",enum:["1:1","2:3","3:4","4:5","16:9"]},reversed:{type:"boolean"}}}},defaults:{direction:"left",pauseOnHover:"off",hoverEffect:"off",imageFit:{display:"Fit",ratioValue:"16:9",reversed:!1}},layoutDefaults:{m:{speed:.55,gap:.04,imageMaxWidth:.8,imageMaxHeight:.21},d:{speed:1.64,gap:.02,imageMaxWidth:.15,imageMaxHeight:.1}},displayRules:[{if:{name:"imageFit.display",value:"Cover"},then:{name:"properties.hoverEffect.display.enum",value:["off","brightness","grayscale","randomize"]}}],layout:["__componentName__","speed","direction","pauseOnHover","hoverEffect","gap","imageMaxWidth","imageMaxHeight","imageFit"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__"]},{type:"row",items:["speed","imageFit"]},{type:"row",items:["imageMaxWidth","imageMaxHeight"]},{type:"row",items:["direction"]},{type:"row",title:"Hover Settings",items:[{type:"row",title:"",items:["hoverEffect","pauseOnHover"]}]}]}],content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"}},link:{label:"URL",placeholder:"Enter link...",display:{type:"text-input"}}}},default:[{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7RZNCQFC3T744H0KX6R3FR.jpeg",name:""},link:""},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7RZRTSS60YBFT6Y37ZX00T.jpeg",name:""},link:""},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ9M9YJPQ5JWKCHDEW5M1GJD.jpeg",name:""},link:""},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7S04EHBXQS1T4KVAMZNZQM.jpeg",name:""},link:""},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7S08Q40WHD39024VNDWF2Q.jpeg",name:""},link:""}]}},Wc={element:_c,id:"marquee",name:"Marquee",category:"galleries",version:1,defaultSize:{d:{width:"100%",height:140},m:{width:390,height:80}},preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Simple_Marquee.mp4"},schema:Rc,sourceCode:Ac,assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[]}};function Bi(e){return`
2313
2323
  .${e}-marquee-wrapper {
2314
2324
  overflow: hidden;
2315
2325
  width: 100%;
@@ -2396,7 +2406,7 @@ type MarqueeProps = {
2396
2406
  pointer-events: auto;
2397
2407
  z-index: 10;
2398
2408
  }
2399
- `}const Dc=30,Do=2,Vc=({settings:e,content:t,isEditor:n,isPreviewMode:i,isEditMode:a})=>{const{prefix:s}=E.useScopedStyles(),{autoplay:o,align:d,speed:l,direction:u,pauseOnHover:p,gap:I,cardWidth:b,corners:w,stroke:f,strokeColor:h,bgColor:T,padding:L,logoMarginTop:C,logoWidth:m,logoHeight:z,captionMarginTop:j}=e,R=!!a,x=((t==null?void 0:t.length)??0)>0,A=o==="on"&&(!n||!!i),S=x&&(A||!!n),K=Math.max(0,l)*Dc,v=Y=>E.scalingValue(Y,n??!1),D=c.useRef(null),W=c.useRef(null),q=c.useRef(null),[G,$]=c.useState(0),[H,_]=c.useState(0),[B,k]=c.useState(0),P=A&&p==="on",[te,ae]=c.useState(!1),re=c.useRef(null),[U,N]=c.useState(0),[oe,ye]=c.useState(0),ce=c.useRef(null),ge=Y=>{var X,se,Te,Le,Oe;return{fontSettings:{fontFamily:(e==null?void 0:e[`${Y}FontFamily`])??"Arial",fontWeight:((X=e==null?void 0:e[`${Y}FontSettings`])==null?void 0:X.fontWeight)??400,fontStyle:((se=e==null?void 0:e[`${Y}FontSettings`])==null?void 0:se.fontStyle)??"normal"},textAppearance:{textTransform:((Te=e==null?void 0:e[`${Y}TextAppearance`])==null?void 0:Te.textTransform)??"none",textDecoration:((Le=e==null?void 0:e[`${Y}TextAppearance`])==null?void 0:Le.textDecoration)??"none",fontVariant:((Oe=e==null?void 0:e[`${Y}TextAppearance`])==null?void 0:Oe.fontVariant)??"normal"},letterSpacing:(e==null?void 0:e[`${Y}LetterSpacing`])??0,wordSpacing:(e==null?void 0:e[`${Y}WordSpacing`])??0,fontSize:(e==null?void 0:e[`${Y}FontSize`])??.01,lineHeight:(e==null?void 0:e[`${Y}LineHeight`])??.01,color:(e==null?void 0:e[`${Y}Color`])??"#000000"}},we=ge("text"),ee=ge("caption"),y=c.useMemo(()=>((t==null?void 0:t.length)??0)>1&&(t??[]).some(Y=>{var Z,X;return(((Z=Y.text)==null?void 0:Z.length)??0)>0||(((X=Y.caption)==null?void 0:X.length)??0)>0}),[t]),g=c.useMemo(()=>!S||(t==null?void 0:t.length)===0?1:H<=0||G<=0?Do:Math.max(Do,Math.ceil(G/H)+1),[S,t==null?void 0:t.length,H,G]);c.useLayoutEffect(()=>{if(!S)return;const Y=D.current,Z=q.current;if(!Y||!Z)return;let X=0;const se=()=>{const Oe=Y.getBoundingClientRect().width,ve=Z.getBoundingClientRect().width,ke=ce.current,_e=typeof ke=="number"&&Math.abs(ke-ve)<=.25;if(ce.current=ve,$(Oe),typeof ve=="number"&&ve>0&&H<=0){_(ve);return}_e&&ve!==H?_(ve):!_e&&H<=0&&(cancelAnimationFrame(X),X=requestAnimationFrame(se))},Te=()=>{cancelAnimationFrame(X),X=requestAnimationFrame(se)};Te();const Le=new ResizeObserver(Te);return Le.observe(Y),Le.observe(Z),()=>{cancelAnimationFrame(X),Le.disconnect()}},[A,S,H]),c.useLayoutEffect(()=>{const Y=W.current;if(!S||!Y)return;const Z=H>0?H:0,X=Z>0&&K>0?Z/K*1e3:0,se=`${Math.max(0,X)/1e3}s`;Y.style.setProperty("--marquee-distance",`${Z}px`),Y.style.setProperty("--marquee-duration",se)},[A,S,K,H]),c.useLayoutEffect(()=>{if(!S){k(0);return}const Y=q.current,Z=W.current;if(!Y||!Z)return;const X=()=>{let Te=0;for(let Le=0;Le<Y.children.length;Le++){const ve=Y.children[Le].firstElementChild;ve&&(Te=Math.max(Te,ve.offsetHeight))}Te<=0&&(Te=Z.offsetHeight),k(Te>0?Te:0)};X();const se=new ResizeObserver(X);return se.observe(Y),se.observe(Z),()=>{se.disconnect()}},[S,g,t,n,I,b,L,f,w,m,z,U,oe]);const V=()=>{P&&ae(!0)},J=()=>{P&&ae(!1)},Q=c.useMemo(()=>{switch(d){case"center":return"center";case"end":return"flex-end";case"start":default:return"flex-start"}},[d]),M=c.useMemo(()=>{switch(d){case"center":return"center";case"end":return"right";case"start":default:return"left"}},[d]),F=c.useCallback((Y,Z,X,se)=>r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:Q,width:"100%"},children:[r.jsx("div",{"data-controls":R?se==null?void 0:se.controlsName:void 0,"data-controls-axis":R?"y":void 0,className:R?`${s}-control`:void 0,style:{height:v((se==null?void 0:se.marginTop)??0)}}),r.jsx("div",{...se!=null&&se.dataMeasureKind?{"data-testimonial-measure":se.dataMeasureKind}:{},style:{...Ue(Y,n),textAlign:M,pointerEvents:"auto",...typeof(se==null?void 0:se.minHeightPx)=="number"&&se.minHeightPx>0?{minHeight:se.minHeightPx}:{}},children:r.jsx(sn,{content:Z})})]},X),[Q,M,n,R,s,v]),O=c.useCallback((Y,Z,X)=>{var se,Te,Le;return r.jsxs("div",{style:{padding:`${v(L.top)} ${v(L.right)} ${v(L.bottom)} ${v(L.left)}`,width:v(b+f*2),height:"100%",borderRadius:v(w),border:`${v(f)} solid ${h}`,boxSizing:"border-box",position:"relative",overflow:"hidden"},children:[r.jsx("div",{className:`${s}-cover`,style:{background:T}}),r.jsxs("div",{className:`${s}-elements-overlay`,style:{alignItems:Q,textAlign:M},children:[Y.text&&F(we,Y.text,"text",X!=null&&X.dataMeasureAttrs?{dataMeasureKind:"text"}:typeof(X==null?void 0:X.textMinHeightPx)=="number"&&X.textMinHeightPx>0?{minHeightPx:X.textMinHeightPx}:void 0),r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:Q,width:"100%"},children:[r.jsx("div",{"data-controls":R&&!(X!=null&&X.dataMeasureAttrs)?"logoMarginTop":void 0,className:R&&!(X!=null&&X.dataMeasureAttrs)?`${s}-control`:void 0,style:{height:v(C)}}),r.jsx("div",{style:{width:v(m),height:v(z)},children:((se=Y.logo)==null?void 0:se.url)&&r.jsx("img",{src:Y.logo.url,alt:((Te=Y.logo)==null?void 0:Te.name)??"",style:{pointerEvents:"auto",width:"100%",height:"100%",objectFit:((Le=Y.logo)==null?void 0:Le.objectFit)||"contain"}})})]}),Y.caption&&F(ee,Y.caption,"caption",{...X!=null&&X.dataMeasureAttrs?{}:{controlsName:"captionMarginTop"},marginTop:j,...X!=null&&X.dataMeasureAttrs?{dataMeasureKind:"caption"}:typeof(X==null?void 0:X.captionMinHeightPx)=="number"&&X.captionMinHeightPx>0?{minHeightPx:X.captionMinHeightPx}:{}})]})]},Z)},[T,j,ee,b,w,z,C,m,Q,M,L.bottom,L.left,L.right,L.top,F,f,h,we,n,R,s]),ie=c.useCallback(Y=>{N(Y.maxTextPx),ye(Y.maxCaptionPx)},[]);c.useLayoutEffect(()=>{if(!y){ie({maxTextPx:0,maxCaptionPx:0});return}const Y=re.current;if(!Y)return;const Z=()=>{E.readTestimonialTextMeasure(Y,ie)};Z();const X=new ResizeObserver(Z);return X.observe(Y),()=>{X.disconnect()}},[y,ie,t,O]);const pe=y?{textMinHeightPx:U,captionMinHeightPx:oe}:void 0,le=y?r.jsx("div",{ref:re,"aria-hidden":!0,style:{position:"absolute",left:0,top:0,width:"100%",visibility:"hidden",pointerEvents:"none",zIndex:-1},children:(t??[]).map((Y,Z)=>O(Y,`measure-${Z}`,{dataMeasureAttrs:!0}))}):null,he=(Y,Z)=>r.jsxs("div",{style:{position:"relative",flex:"0 0 auto",height:"100%",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden",willChange:"transform"},children:[O(Y,`card-${Z}`,pe),R&&r.jsx("div",{"data-controls":"gap","data-controls-axis":"x",style:{position:"absolute",top:0,right:`calc(-1 * ${v(I)})`,width:v(I),height:"100%",pointerEvents:"auto",zIndex:2}})]},Z);if(S){const Y=A?P&&te?"paused":"running":"paused";return r.jsxs("div",{ref:D,className:Ie(`${s}-wrapper`,`${s}-marquee-wrapper`),"aria-label":"Testimonials",style:{overflow:"hidden",width:"100%",...B>0?{height:B}:{}},children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:jo(s)}}),le,r.jsx("div",{ref:W,className:`${s}-marquee-track`,"data-direction":u,onMouseEnter:V,onMouseLeave:J,style:{display:"flex",flexDirection:"row",flexWrap:"nowrap",width:"max-content",willChange:"transform",backfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden",transform:"translateZ(0)",WebkitTransform:"translateZ(0)",perspective:"1000px","--marquee-play-state":Y},children:Array.from({length:g},(Z,X)=>r.jsx("div",{ref:X===0?q:void 0,className:`${s}-marquee-set`,style:{display:"flex",flexDirection:"row",flex:"0 0 auto",gap:v(I),paddingRight:v(I)},"aria-hidden":X>0,children:t==null?void 0:t.map((se,Te)=>he(se,`${X}-${Te}`))},`set-${X}`))})]})}return r.jsxs("div",{className:`${s}-wrapper`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:jo(s)}}),le,r.jsx("div",{style:{gap:v(I),justifyContent:"center",overflowX:"auto",display:"flex",flexDirection:"row"},"aria-label":"Testimonials",children:t==null?void 0:t.map((Y,Z)=>he(Y,Z))})]})},zc=`import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
2409
+ `}const Ic=30,Oi=2,kc=({settings:e,content:t,isEditor:n,isPreviewMode:o,isEditMode:i})=>{const{prefix:r}=E.useScopedStyles(),{autoplay:s,align:c,speed:a,direction:d,pauseOnHover:p,gap:T,cardWidth:y,corners:C,stroke:m,strokeColor:h,bgColor:W,padding:x,logoMarginTop:b,logoWidth:f,logoHeight:O,captionMarginTop:P}=e,_=!!i,$=((t==null?void 0:t.length)??0)>0,A=s==="on"&&(!n||!!o),w=$&&(A||!!n),H=Math.max(0,a)*Ic,L=j=>E.scalingValue(j,n??!1),V=u.useRef(null),D=u.useRef(null),J=u.useRef(null),[q,S]=u.useState(0),[R,F]=u.useState(0),[N,I]=u.useState(0),B=A&&p==="on",[ie,Q]=u.useState(!1),oe=u.useRef(null),[G,M]=u.useState(0),[re,Le]=u.useState(0),ce=u.useRef(null),fe=j=>{var z,le,xe,Ce,Ie;return{fontSettings:{fontFamily:(e==null?void 0:e[`${j}FontFamily`])??"Arial",fontWeight:((z=e==null?void 0:e[`${j}FontSettings`])==null?void 0:z.fontWeight)??400,fontStyle:((le=e==null?void 0:e[`${j}FontSettings`])==null?void 0:le.fontStyle)??"normal"},textAppearance:{textTransform:((xe=e==null?void 0:e[`${j}TextAppearance`])==null?void 0:xe.textTransform)??"none",textDecoration:((Ce=e==null?void 0:e[`${j}TextAppearance`])==null?void 0:Ce.textDecoration)??"none",fontVariant:((Ie=e==null?void 0:e[`${j}TextAppearance`])==null?void 0:Ie.fontVariant)??"normal"},letterSpacing:(e==null?void 0:e[`${j}LetterSpacing`])??0,wordSpacing:(e==null?void 0:e[`${j}WordSpacing`])??0,fontSize:(e==null?void 0:e[`${j}FontSize`])??.01,lineHeight:(e==null?void 0:e[`${j}LineHeight`])??.01,color:(e==null?void 0:e[`${j}Color`])??"#000000"}},We=fe("text"),ne=fe("caption"),v=u.useMemo(()=>((t==null?void 0:t.length)??0)>1&&(t??[]).some(j=>{var Y,z;return(((Y=j.text)==null?void 0:Y.length)??0)>0||(((z=j.caption)==null?void 0:z.length)??0)>0}),[t]),g=u.useMemo(()=>!w||(t==null?void 0:t.length)===0?1:R<=0||q<=0?Oi:Math.max(Oi,Math.ceil(q/R)+1),[w,t==null?void 0:t.length,R,q]);u.useLayoutEffect(()=>{if(!w)return;const j=V.current,Y=J.current;if(!j||!Y)return;let z=0;const le=()=>{const Ie=j.getBoundingClientRect().width,Ne=Y.getBoundingClientRect().width,Ze=ce.current,ve=typeof Ze=="number"&&Math.abs(Ze-Ne)<=.25;if(ce.current=Ne,S(Ie),typeof Ne=="number"&&Ne>0&&R<=0){F(Ne);return}ve&&Ne!==R?F(Ne):!ve&&R<=0&&(cancelAnimationFrame(z),z=requestAnimationFrame(le))},xe=()=>{cancelAnimationFrame(z),z=requestAnimationFrame(le)};xe();const Ce=new ResizeObserver(xe);return Ce.observe(j),Ce.observe(Y),()=>{cancelAnimationFrame(z),Ce.disconnect()}},[A,w,R]),u.useLayoutEffect(()=>{const j=D.current;if(!w||!j)return;const Y=R>0?R:0,z=Y>0&&H>0?Y/H*1e3:0,le=`${Math.max(0,z)/1e3}s`;j.style.setProperty("--marquee-distance",`${Y}px`),j.style.setProperty("--marquee-duration",le)},[A,w,H,R]),u.useLayoutEffect(()=>{if(!w){I(0);return}const j=J.current,Y=D.current;if(!j||!Y)return;const z=()=>{let xe=0;for(let Ce=0;Ce<j.children.length;Ce++){const Ne=j.children[Ce].firstElementChild;Ne&&(xe=Math.max(xe,Ne.offsetHeight))}xe<=0&&(xe=Y.offsetHeight),I(xe>0?xe:0)};z();const le=new ResizeObserver(z);return le.observe(j),le.observe(Y),()=>{le.disconnect()}},[w,g,t,n,T,y,x,m,C,f,O,G,re]);const k=()=>{B&&Q(!0)},K=()=>{B&&Q(!1)},U=u.useMemo(()=>{switch(c){case"center":return"center";case"end":return"flex-end";case"start":default:return"flex-start"}},[c]),te=u.useMemo(()=>{switch(c){case"center":return"center";case"end":return"right";case"start":default:return"left"}},[c]),ee=u.useCallback((j,Y,z,le)=>l.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:U,width:"100%"},children:[l.jsx("div",{"data-controls":_?le==null?void 0:le.controlsName:void 0,"data-controls-axis":_?"y":void 0,className:_?`${r}-control`:void 0,style:{height:L((le==null?void 0:le.marginTop)??0)}}),l.jsx("div",{...le!=null&&le.dataMeasureKind?{"data-testimonial-measure":le.dataMeasureKind}:{},style:{...Xe(j,n),textAlign:te,pointerEvents:"auto",...typeof(le==null?void 0:le.minHeightPx)=="number"&&le.minHeightPx>0?{minHeight:le.minHeightPx}:{}},children:l.jsx(Ln,{content:Y})})]},z),[U,te,n,_,r,L]),Z=u.useCallback((j,Y,z)=>{var le,xe,Ce;return l.jsxs("div",{style:{padding:`${L(x.top)} ${L(x.right)} ${L(x.bottom)} ${L(x.left)}`,width:L(y+m*2),height:"100%",borderRadius:L(C),border:`${L(m)} solid ${h}`,boxSizing:"border-box",position:"relative",overflow:"hidden"},children:[l.jsx("div",{className:`${r}-cover`,style:{background:W}}),l.jsxs("div",{className:`${r}-elements-overlay`,style:{alignItems:U,textAlign:te},children:[j.text&&ee(We,j.text,"text",z!=null&&z.dataMeasureAttrs?{dataMeasureKind:"text"}:typeof(z==null?void 0:z.textMinHeightPx)=="number"&&z.textMinHeightPx>0?{minHeightPx:z.textMinHeightPx}:void 0),l.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:U,width:"100%"},children:[l.jsx("div",{"data-controls":_&&!(z!=null&&z.dataMeasureAttrs)?"logoMarginTop":void 0,className:_&&!(z!=null&&z.dataMeasureAttrs)?`${r}-control`:void 0,style:{height:L(b)}}),l.jsx("div",{style:{width:L(f),height:L(O)},children:((le=j.logo)==null?void 0:le.url)&&l.jsx("img",{src:j.logo.url,alt:((xe=j.logo)==null?void 0:xe.name)??"",style:{pointerEvents:"auto",width:"100%",height:"100%",objectFit:((Ce=j.logo)==null?void 0:Ce.objectFit)||"contain"}})})]}),j.caption&&ee(ne,j.caption,"caption",{...z!=null&&z.dataMeasureAttrs?{}:{controlsName:"captionMarginTop"},marginTop:P,...z!=null&&z.dataMeasureAttrs?{dataMeasureKind:"caption"}:typeof(z==null?void 0:z.captionMinHeightPx)=="number"&&z.captionMinHeightPx>0?{minHeightPx:z.captionMinHeightPx}:{}})]})]},Y)},[W,P,ne,y,C,O,b,f,U,te,x.bottom,x.left,x.right,x.top,ee,m,h,We,n,_,r]),de=u.useCallback(j=>{M(j.maxTextPx),Le(j.maxCaptionPx)},[]);u.useLayoutEffect(()=>{if(!v){de({maxTextPx:0,maxCaptionPx:0});return}const j=oe.current;if(!j)return;const Y=()=>{E.readTestimonialTextMeasure(j,de)};Y();const z=new ResizeObserver(Y);return z.observe(j),()=>{z.disconnect()}},[v,de,t,Z]);const Se=v?{textMinHeightPx:G,captionMinHeightPx:re}:void 0,ye=v?l.jsx("div",{ref:oe,"aria-hidden":!0,style:{position:"absolute",left:0,top:0,width:"100%",visibility:"hidden",pointerEvents:"none",zIndex:-1},children:(t??[]).map((j,Y)=>Z(j,`measure-${Y}`,{dataMeasureAttrs:!0}))}):null,ue=(j,Y)=>l.jsxs("div",{style:{position:"relative",flex:"0 0 auto",height:"100%",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden",willChange:"transform"},children:[Z(j,`card-${Y}`,Se),_&&l.jsx("div",{"data-controls":"gap","data-controls-axis":"x",style:{position:"absolute",top:0,right:`calc(-1 * ${L(T)})`,width:L(T),height:"100%",pointerEvents:"auto",zIndex:2}})]},Y);if(w){const j=A?B&&ie?"paused":"running":"paused";return l.jsxs("div",{ref:V,className:$e(`${r}-wrapper`,`${r}-marquee-wrapper`),"aria-label":"Testimonials",style:{overflow:"hidden",width:"100%",...N>0?{height:N}:{}},children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:Bi(r)}}),ye,l.jsx("div",{ref:D,className:`${r}-marquee-track`,"data-direction":d,onMouseEnter:k,onMouseLeave:K,style:{display:"flex",flexDirection:"row",flexWrap:"nowrap",width:"max-content",willChange:"transform",backfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden",transform:"translateZ(0)",WebkitTransform:"translateZ(0)",perspective:"1000px","--marquee-play-state":j},children:Array.from({length:g},(Y,z)=>l.jsx("div",{ref:z===0?J:void 0,className:`${r}-marquee-set`,style:{display:"flex",flexDirection:"row",flex:"0 0 auto",gap:L(T),paddingRight:L(T)},"aria-hidden":z>0,children:t==null?void 0:t.map((le,xe)=>ue(le,`${z}-${xe}`))},`set-${z}`))})]})}return l.jsxs("div",{className:`${r}-wrapper`,children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:Bi(r)}}),ye,l.jsx("div",{style:{gap:L(T),justifyContent:"center",overflowX:"auto",display:"flex",flexDirection:"row"},"aria-label":"Testimonials",children:t==null?void 0:t.map((j,Y)=>ue(j,Y))})]})},Fc=`import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
2400
2410
  import cn from 'classnames';
2401
2411
  import { CommonComponentProps } from '../props';
2402
2412
  import { RichTextRenderer } from '../helpers/RichTextRenderer/RichTextRenderer';
@@ -3012,7 +3022,7 @@ type TestimonialsSettings = {
3012
3022
  logoHeight: number;
3013
3023
  captionMarginTop: number;
3014
3024
  };
3015
- `,Vo={fontSettings:{type:"object",scope:"common",display:{type:"font-settings"},properties:{fontWeight:{type:"number",scope:"common"},fontStyle:{type:"string",scope:"common"}}}},Kc={type:"object",version:1,settings:{sizing:"auto manual",properties:{autoplay:{type:"string",scope:"common",title:"Autoplay",display:{type:"switch-control"},enum:["on","off"]},speed:{type:"number",scope:"layout",title:"Speed",display:{type:"speed-control"},min:.5,max:8},direction:{type:"string",scope:"common",title:"Direction",display:{type:"direction-control"},enum:["left","right"]},pauseOnHover:{title:"Pause on hover",type:"string",scope:"common",display:{type:"toggle",enum:["on","off"]}},gap:{type:"number",scope:"layout",title:"Gap",min:0,max:200,display:{type:"range-control"}},align:{type:"string",title:"Alignment",display:{type:"align-group",direction:"horizontal"},enum:["start","center","end"]},cardWidth:{type:"number",scope:"layout",title:"width",min:0,max:400,display:{type:"numeric-input"}},corners:{type:"number",scope:"layout",title:"Corners",min:0,max:100,display:{type:"numeric-input"}},stroke:{type:"number",scope:"layout",title:"Stroke",min:0,max:10,display:{type:"numeric-input"}},strokeColor:{type:"string",scope:"common",title:"Stroke Card",display:{type:"palette-color-picker",visible:!0}},bgColor:{title:"BG card",type:"string",scope:"common",display:{type:"palette-color-picker"}},padding:{type:"object",scope:"layout",title:"Padding",display:{type:"padding-controls"}},logoMarginTop:{type:"number",scope:"layout",title:"Logo margin top",min:0,max:200,display:{type:"range-control"}},logoWidth:{type:"number",scope:"layout",title:"width",min:0,max:200,display:{type:"numeric-input"}},logoHeight:{type:"number",scope:"layout",title:"height",min:0,max:200,display:{type:"numeric-input"}},textColor:{type:"string",scope:"common",title:"Fill Text",display:{type:"palette-color-picker"}},captionColor:{type:"string",scope:"common",title:"Fill Caption",display:{type:"palette-color-picker"}},captionMarginTop:{type:"number",scope:"layout",title:"Caption margin top",min:0,max:200,display:{type:"range-control"}},captionFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},captionFontSettings:{...Vo.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},captionFontSize:{type:"number",scope:"layout",title:"Caption Font Size",display:{type:"font-size"}},captionLineHeight:{type:"number",scope:"layout",title:"Caption Line Height",display:{type:"line-height-input"}},captionLetterSpacing:{type:"number",scope:"layout",title:"Caption Letter Spacing",display:{type:"letter-spacing-input"}},captionWordSpacing:{type:"number",scope:"layout",title:"Caption Word Spacing",display:{type:"word-spacing-input"}},captionTextAppearance:{type:"object",scope:"layout",title:"Caption Text Appearance",display:{type:"text-appearance"}},textFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},textFontSettings:{...Vo.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},textFontSize:{type:"number",scope:"layout",title:"Text Font Size",display:{type:"font-size"}},textLineHeight:{type:"number",scope:"layout",title:"Text Line Height",display:{type:"line-height-input"}},textLetterSpacing:{type:"number",scope:"layout",title:"Text Letter Spacing",display:{type:"letter-spacing-input"}},textWordSpacing:{type:"number",scope:"layout",title:"Text Word Spacing",display:{type:"word-spacing-input"}},textTextAppearance:{type:"object",scope:"layout",title:"Text Text Appearance",display:{type:"text-appearance"}}},defaults:{autoplay:"on",direction:"left",pauseOnHover:"off",strokeColor:"#000000",bgColor:"rgba(255, 255, 255, 0.81)",textColor:"#000000",captionColor:"#000000",captionFontFamily:"Goudy Bookletter 1911",captionFontSettings:{fontWeight:400,fontStyle:"normal"},align:"center",captionLetterSpacing:0,captionWordSpacing:0,captionTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},textFontFamily:"Goudy Bookletter 1911",textFontSettings:{fontWeight:400,fontStyle:"normal"},textLetterSpacing:0,textWordSpacing:0,textTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{speed:.55,gap:.04,cardWidth:.8,corners:.02,stroke:.001,padding:{top:.053,right:.026,bottom:.053,left:.026},logoMarginTop:.18,logoWidth:.21,logoHeight:.21,captionMarginTop:.056,textFontSize:.058,textLineHeight:.088,captionFontSize:.053,captionLineHeight:.069},d:{speed:1.64,gap:.02,cardWidth:.15,corners:.005,stroke:.001,padding:{top:.01,right:.01,bottom:.01,left:.01},logoMarginTop:.048,logoWidth:.055,logoHeight:.027,captionMarginTop:.005,textFontSize:.012,textLineHeight:.013,captionFontSize:.01,captionLineHeight:.01}},displayRules:[{if:{name:"stroke",value:0},then:{name:"properties.strokeColor.display.visible",value:!1}}],layout:["__componentName__","autoplay","speed","direction","pauseOnHover","gap","cardWidth","corners","stroke","strokeColor","bgColor","padding","logoMarginTop","logoWidth","logoHeight","captionMarginTop"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","autoplay"]},{type:"row",items:["align","direction"]},{type:"row",items:["speed","pauseOnHover"]},{type:"row",title:"Card",items:[{type:"group",title:"",items:["cardWidth","corners"]},{type:"group",title:"",items:["stroke","padding"]}]},{type:"row",title:"Image Container",items:["logoWidth","logoHeight"]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[{type:"group",title:"Text",items:["textFontFamily","textFontSettings",{type:"group",title:"",items:["text",{type:"row",items:["textFontSize","textLineHeight","textLetterSpacing","textWordSpacing"]},"textTextAppearance"]}]},{type:"group",title:"Caption",items:["captionFontFamily","captionFontSettings",{type:"group",title:"",items:["caption",{type:"row",items:["captionFontSize","captionLineHeight","captionLetterSpacing","captionWordSpacing"]},"captionTextAppearance"]}]}]}],paletteBookmark:{items:["bgColor","strokeColor","textColor","captionColor"],panelIds:["general","typeStyle"]},content:{type:"array",settings:{addItemFromFileExplorer:!1},items:{type:"object",properties:{logo:{type:"object",label:"Image",display:{type:"media-input"}},text:{placeholder:"Add Text...",label:"Text",display:{type:"rich-text"}},caption:{placeholder:"Add Caption...",label:"Caption",display:{type:"rich-text"}}}},default:[{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/julia.png",name:""},text:[{type:"paragraph",children:[{text:"This website is a great tool for designers and developers. The ease of creating animations here is mesmerizing. Bravo to the creators of this product!"}]}],caption:[{type:"paragraph",children:[{text:"Julia Smith,"}]},{type:"paragraph",children:[{text:"Freelance Designer"}]}]},{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/mark.png",name:""},text:[{type:"paragraph",children:[{text:"This is super cool. The on onboarding terminal style animation brings me back to what made the Internet simple and fun."}]}],caption:[{type:"paragraph",children:[{text:"Mark Travis,"}]},{type:"paragraph",children:[{text:"Architect @ United Architects"}]}]},{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/pia.png",name:""},text:[{type:"paragraph",children:[{text:"Great tool for someone who wants to quickly and easily build a site that has fancy scrolling animations. Totally addictive!"}]}],caption:[{type:"paragraph",children:[{text:"Pia,"}]},{type:"paragraph",children:[{text:"Media Buyer"}]}]}]}},Gc={element:Vc,id:"testimonials",name:"Eliana",category:"testimonials",version:1,preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Testimonials_Grid.mp4"},defaultSize:{d:{width:"100%",height:320}},schema:Kc,sourceCode:zc,assetsPaths:{content:[{path:"logo.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[{path:"styles.text.fontSettings"},{path:"styles.caption.fontSettings"}]}};function qc(e){return`
3025
+ `,Vi={fontSettings:{type:"object",scope:"common",display:{type:"font-settings"},properties:{fontWeight:{type:"number",scope:"common"},fontStyle:{type:"string",scope:"common"}}}},Mc={type:"object",version:1,settings:{sizing:"auto manual",properties:{autoplay:{type:"string",scope:"common",title:"Autoplay",display:{type:"switch-control"},enum:["on","off"]},speed:{type:"number",scope:"layout",title:"Speed",display:{type:"speed-control"},min:.5,max:8},direction:{type:"string",scope:"common",title:"Direction",display:{type:"direction-control"},enum:["left","right"]},pauseOnHover:{title:"Pause on hover",type:"string",scope:"common",display:{type:"toggle",enum:["on","off"]}},gap:{type:"number",scope:"layout",title:"Gap",min:0,max:200,display:{type:"range-control"}},align:{type:"string",title:"Alignment",display:{type:"align-group",direction:"horizontal"},enum:["start","center","end"]},cardWidth:{type:"number",scope:"layout",title:"width",min:0,max:400,display:{type:"numeric-input"}},corners:{type:"number",scope:"layout",title:"Corners",min:0,max:100,display:{type:"numeric-input"}},stroke:{type:"number",scope:"layout",title:"Stroke",min:0,max:10,display:{type:"numeric-input"}},strokeColor:{type:"string",scope:"common",title:"Stroke Card",display:{type:"palette-color-picker",visible:!0}},bgColor:{title:"BG card",type:"string",scope:"common",display:{type:"palette-color-picker"}},padding:{type:"object",scope:"layout",title:"Padding",display:{type:"padding-controls"}},logoMarginTop:{type:"number",scope:"layout",title:"Logo margin top",min:0,max:200,display:{type:"range-control"}},logoWidth:{type:"number",scope:"layout",title:"width",min:0,max:200,display:{type:"numeric-input"}},logoHeight:{type:"number",scope:"layout",title:"height",min:0,max:200,display:{type:"numeric-input"}},textColor:{type:"string",scope:"common",title:"Fill Text",display:{type:"palette-color-picker"}},captionColor:{type:"string",scope:"common",title:"Fill Caption",display:{type:"palette-color-picker"}},captionMarginTop:{type:"number",scope:"layout",title:"Caption margin top",min:0,max:200,display:{type:"range-control"}},captionFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},captionFontSettings:{...Vi.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},captionFontSize:{type:"number",scope:"layout",title:"Caption Font Size",display:{type:"font-size"}},captionLineHeight:{type:"number",scope:"layout",title:"Caption Line Height",display:{type:"line-height-input"}},captionLetterSpacing:{type:"number",scope:"layout",title:"Caption Letter Spacing",display:{type:"letter-spacing-input"}},captionWordSpacing:{type:"number",scope:"layout",title:"Caption Word Spacing",display:{type:"word-spacing-input"}},captionTextAppearance:{type:"object",scope:"layout",title:"Caption Text Appearance",display:{type:"text-appearance"}},textFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},textFontSettings:{...Vi.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},textFontSize:{type:"number",scope:"layout",title:"Text Font Size",display:{type:"font-size"}},textLineHeight:{type:"number",scope:"layout",title:"Text Line Height",display:{type:"line-height-input"}},textLetterSpacing:{type:"number",scope:"layout",title:"Text Letter Spacing",display:{type:"letter-spacing-input"}},textWordSpacing:{type:"number",scope:"layout",title:"Text Word Spacing",display:{type:"word-spacing-input"}},textTextAppearance:{type:"object",scope:"layout",title:"Text Text Appearance",display:{type:"text-appearance"}}},defaults:{autoplay:"on",direction:"left",pauseOnHover:"off",strokeColor:"#000000",bgColor:"rgba(255, 255, 255, 0.81)",textColor:"#000000",captionColor:"#000000",captionFontFamily:"Goudy Bookletter 1911",captionFontSettings:{fontWeight:400,fontStyle:"normal"},align:"center",captionLetterSpacing:0,captionWordSpacing:0,captionTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},textFontFamily:"Goudy Bookletter 1911",textFontSettings:{fontWeight:400,fontStyle:"normal"},textLetterSpacing:0,textWordSpacing:0,textTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{speed:.55,gap:.04,cardWidth:.8,corners:.02,stroke:.001,padding:{top:.053,right:.026,bottom:.053,left:.026},logoMarginTop:.18,logoWidth:.21,logoHeight:.21,captionMarginTop:.056,textFontSize:.058,textLineHeight:.088,captionFontSize:.053,captionLineHeight:.069},d:{speed:1.64,gap:.02,cardWidth:.15,corners:.005,stroke:.001,padding:{top:.01,right:.01,bottom:.01,left:.01},logoMarginTop:.048,logoWidth:.055,logoHeight:.027,captionMarginTop:.005,textFontSize:.012,textLineHeight:.013,captionFontSize:.01,captionLineHeight:.01}},displayRules:[{if:{name:"stroke",value:0},then:{name:"properties.strokeColor.display.visible",value:!1}}],layout:["__componentName__","autoplay","speed","direction","pauseOnHover","gap","cardWidth","corners","stroke","strokeColor","bgColor","padding","logoMarginTop","logoWidth","logoHeight","captionMarginTop"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","autoplay"]},{type:"row",items:["align","direction"]},{type:"row",items:["speed","pauseOnHover"]},{type:"row",title:"Card",items:[{type:"group",title:"",items:["cardWidth","corners"]},{type:"group",title:"",items:["stroke","padding"]}]},{type:"row",title:"Image Container",items:["logoWidth","logoHeight"]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[{type:"group",title:"Text",items:["textFontFamily","textFontSettings",{type:"group",title:"",items:["text",{type:"row",items:["textFontSize","textLineHeight","textLetterSpacing","textWordSpacing"]},"textTextAppearance"]}]},{type:"group",title:"Caption",items:["captionFontFamily","captionFontSettings",{type:"group",title:"",items:["caption",{type:"row",items:["captionFontSize","captionLineHeight","captionLetterSpacing","captionWordSpacing"]},"captionTextAppearance"]}]}]}],paletteBookmark:{items:["bgColor","strokeColor","textColor","captionColor"],panelIds:["general","typeStyle"]},content:{type:"array",settings:{addItemFromFileExplorer:!1},items:{type:"object",properties:{logo:{type:"object",label:"Image",display:{type:"media-input"}},text:{placeholder:"Add Text...",label:"Text",display:{type:"rich-text"}},caption:{placeholder:"Add Caption...",label:"Caption",display:{type:"rich-text"}}}},default:[{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/julia.png",name:""},text:[{type:"paragraph",children:[{text:"This website is a great tool for designers and developers. The ease of creating animations here is mesmerizing. Bravo to the creators of this product!"}]}],caption:[{type:"paragraph",children:[{text:"Julia Smith,"}]},{type:"paragraph",children:[{text:"Freelance Designer"}]}]},{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/mark.png",name:""},text:[{type:"paragraph",children:[{text:"This is super cool. The on onboarding terminal style animation brings me back to what made the Internet simple and fun."}]}],caption:[{type:"paragraph",children:[{text:"Mark Travis,"}]},{type:"paragraph",children:[{text:"Architect @ United Architects"}]}]},{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/pia.png",name:""},text:[{type:"paragraph",children:[{text:"Great tool for someone who wants to quickly and easily build a site that has fancy scrolling animations. Totally addictive!"}]}],caption:[{type:"paragraph",children:[{text:"Pia,"}]},{type:"paragraph",children:[{text:"Media Buyer"}]}]}]}},Nc={element:kc,id:"testimonials",name:"Eliana",category:"testimonials",version:1,preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Testimonials_Grid.mp4"},defaultSize:{d:{width:"100%",height:320}},schema:Mc,sourceCode:Fc,assetsPaths:{content:[{path:"logo.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[{path:"styles.text.fontSettings"},{path:"styles.caption.fontSettings"}]}};function Hc(e){return`
3016
3026
  .${e}-container {
3017
3027
  position: relative;
3018
3028
  overflow-x: clip;
@@ -3136,7 +3146,7 @@ type TestimonialsSettings = {
3136
3146
  width: 100%;
3137
3147
  height: 100%;
3138
3148
  }
3139
- `}const Uc=({settings:e,content:t,isEditor:n,isPreviewMode:i,isEditMode:a})=>{const{prefix:s}=E.useScopedStyles(),o=t||[],{autoplay:d,delay:l,align:u,width:p,imageMarginTop:I,textMarginTop:b,captionMarginTop:w,imageWidth:f,imageHeight:h,controlsWidth:T,controlsColor:L,controlsHoverColor:C}=e,m=d==="on"&&i,[z,j]=c.useState(0),[R,x]=c.useState(null),[A,S]=c.useState(!1),K=c.useRef(null),v=c.useMemo(()=>{switch(u){case"center":return"center";case"end":return"flex-end";case"start":default:return"flex-start"}},[u]),D=c.useMemo(()=>{switch(u){case"center":return"center";case"end":return"right";case"start":default:return"left"}},[u]);c.useEffect(()=>{j(0),x(null),S(!1)},[o.length]);const W=o[z],q=R===null?null:o[R],G=ee=>{var g,V,J,Q,M;return{fontSettings:{fontFamily:(e==null?void 0:e[`${ee}FontFamily`])??"Arial",fontWeight:((g=e==null?void 0:e[`${ee}FontSettings`])==null?void 0:g.fontWeight)??400,fontStyle:((V=e==null?void 0:e[`${ee}FontSettings`])==null?void 0:V.fontStyle)??"normal"},textAppearance:{textTransform:((J=e==null?void 0:e[`${ee}TextAppearance`])==null?void 0:J.textTransform)??"none",textDecoration:((Q=e==null?void 0:e[`${ee}TextAppearance`])==null?void 0:Q.textDecoration)??"none",fontVariant:((M=e==null?void 0:e[`${ee}TextAppearance`])==null?void 0:M.fontVariant)??"normal"},fontSize:(e==null?void 0:e[`${ee}FontSize`])??.01,lineHeight:(e==null?void 0:e[`${ee}LineHeight`])??.01,letterSpacing:(e==null?void 0:e[`${ee}LetterSpacing`])??0,wordSpacing:(e==null?void 0:e[`${ee}WordSpacing`])??0,color:(e==null?void 0:e[`${ee}Color`])??"#000000"}},$=G("text"),H=G("caption"),_=o.length>1&&o.some(ee=>{var y,g;return(((y=ee.text)==null?void 0:y.length)??0)>0||(((g=ee.caption)==null?void 0:g.length)??0)>0}),B=c.useRef(null),[k,P]=c.useState(0),[te,ae]=c.useState(0),re=e.controls??{mode:"Off",icon:null},U=o.length>1,N=c.useCallback((ee,y)=>!U||y===ee?ee:(K.current&&window.clearTimeout(K.current),x(ee),S(!0),K.current=window.setTimeout(()=>{x(null),S(!1),K.current=null},300),y),[U]),oe=c.useCallback(()=>{U&&j(ee=>N(ee,(ee-1+o.length)%o.length))},[U,N,o.length]),ye=c.useCallback(()=>{U&&j(ee=>N(ee,(ee+1)%o.length))},[U,N,o.length]);c.useEffect(()=>{if(!m||!U)return;const ee=Math.max(300,Number.isFinite(l*1e3)?l*1e3:0),y=window.setInterval(()=>{j(g=>N(g,(g+1)%o.length))},ee);return()=>{window.clearInterval(y)}},[m,U,N,o.length,l]),c.useEffect(()=>()=>{K.current&&window.clearTimeout(K.current)},[]);const ce=(ee,y)=>{var M,F,O,ie;const g=y==null?void 0:y.textMinHeightPx,V=y==null?void 0:y.captionMinHeightPx,J=y==null?void 0:y.dataMeasureAttrs,Q=a&&!(y!=null&&y.dataMeasureAttrs)&&!(y!=null&&y.hideControls);return r.jsxs(r.Fragment,{children:[ee.text&&r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:v,width:"100%"},children:[r.jsx("div",{"data-controls":Q?"textMarginTop":void 0,className:Q?`${s}-control`:void 0,style:{height:E.scalingValue(b??0,n??!1)}}),r.jsx("div",{...J&&{"data-testimonial-measure":"text"},style:{...Ue($,n),...g&&g>0?{minHeight:g}:{},textAlign:D,pointerEvents:"auto"},children:r.jsx(sn,{content:ee.text})})]}),r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:v,width:"100%"},children:[r.jsx("div",{"data-controls":Q?"imageMarginTop":void 0,className:Q?`${s}-control`:void 0,style:{height:E.scalingValue(I??0,n??!1)}}),r.jsx("div",{style:{width:E.scalingValue(f??0,n??!1),height:E.scalingValue(h??0,n??!1)},children:((M=ee.image)==null?void 0:M.url)&&r.jsx("img",{src:(F=ee.image)==null?void 0:F.url,alt:((O=ee.image)==null?void 0:O.name)??"",className:`${s}-icon`,style:{objectFit:((ie=ee.image)==null?void 0:ie.objectFit)||"contain"}})})]}),ee.caption&&r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:v,width:"100%"},children:[r.jsx("div",{"data-controls":Q?"captionMarginTop":void 0,className:Q?`${s}-control`:void 0,style:{height:E.scalingValue(w??0,n??!1)}}),r.jsx("div",{...J?{"data-testimonial-measure":"caption"}:{},style:{...Ue(H,n),...V&&V>0?{minHeight:V}:{},textAlign:D,pointerEvents:"auto"},children:r.jsx(sn,{content:ee.caption})})]})]})},ge=c.useCallback(ee=>{P(ee.maxTextPx),ae(ee.maxCaptionPx)},[]);if(c.useLayoutEffect(()=>{if(!_){ge({maxTextPx:0,maxCaptionPx:0});return}const ee=B.current;if(!ee)return;const y=()=>{E.readTestimonialTextMeasure(ee,ge)};y();const g=new ResizeObserver(y);return g.observe(ee),()=>{g.disconnect()}},[_,ge,t]),!W)return r.jsx(r.Fragment,{});const we=_?{textMinHeightPx:k,captionMinHeightPx:te}:void 0;return r.jsx(r.Fragment,{children:r.jsxs("div",{className:`${s}-container`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:qc(s)}}),r.jsxs("div",{className:`${s}-wrapper`,style:{width:E.scalingValue(p??0,n??!1),alignItems:v},children:[_&&r.jsx("div",{ref:B,"aria-hidden":!0,style:{position:"absolute",left:0,top:0,width:"100%",height:"100%",visibility:"hidden",pointerEvents:"none",zIndex:-1},children:o.map((ee,y)=>r.jsx("div",{style:{width:"100%"},children:ce(ee,{dataMeasureAttrs:!0})},y))}),r.jsxs("div",{className:`${s}-fade-stack`,children:[q&&A&&r.jsx("div",{className:Ie(`${s}-fade-item-prev`,`${s}-fade-out`),children:ce(q,{...we,hideControls:!0})}),r.jsx("div",{className:Ie(`${s}-fade-item-current`,A?`${s}-fade-in`:void 0),children:ce(W,we)})]})]}),re.mode==="On"&&r.jsxs("div",{className:`${s}-controls`,children:[r.jsx("div",{className:`${s}-arrow`,style:{width:E.scalingValue(T??.02,n??!1),height:E.scalingValue(T??.02,n??!1),"--arrow-hover-color":C},children:r.jsx("button",{type:"button",className:`${s}-arrow-inner`,onClick:oe,disabled:!U,"aria-label":"Previous testimonial",children:re.icon&&r.jsx(yt,{url:re.icon,fill:L,hoverFill:C,className:Ie(`${s}-arrow-img`,`${s}-mirror`)})})}),r.jsx("div",{className:Ie(`${s}-arrow`,`${s}-next-arrow`),style:{width:E.scalingValue(T??.02,n??!1),height:E.scalingValue(T??.02,n??!1),"--arrow-hover-color":C},children:r.jsx("button",{type:"button",className:`${s}-arrow-inner`,onClick:ye,disabled:!U,"aria-label":"Next testimonial",children:re.icon&&r.jsx(yt,{url:re.icon,fill:L,hoverFill:C,className:`${s}-arrow-img`})})})]})]})})},Xc=`import cn from 'classnames';
3149
+ `}const Bc=({settings:e,content:t,isEditor:n,isPreviewMode:o,isEditMode:i})=>{const{prefix:r}=E.useScopedStyles(),s=t||[],{autoplay:c,delay:a,align:d,width:p,imageMarginTop:T,textMarginTop:y,captionMarginTop:C,imageWidth:m,imageHeight:h,controlsWidth:W,controlsColor:x,controlsHoverColor:b}=e,f=c==="on"&&o,[O,P]=u.useState(0),[_,$]=u.useState(null),[A,w]=u.useState(!1),H=u.useRef(null),L=u.useMemo(()=>{switch(d){case"center":return"center";case"end":return"flex-end";case"start":default:return"flex-start"}},[d]),V=u.useMemo(()=>{switch(d){case"center":return"center";case"end":return"right";case"start":default:return"left"}},[d]);u.useEffect(()=>{P(0),$(null),w(!1)},[s.length]);const D=s[O],J=_===null?null:s[_],q=ne=>{var g,k,K,U,te;return{fontSettings:{fontFamily:(e==null?void 0:e[`${ne}FontFamily`])??"Arial",fontWeight:((g=e==null?void 0:e[`${ne}FontSettings`])==null?void 0:g.fontWeight)??400,fontStyle:((k=e==null?void 0:e[`${ne}FontSettings`])==null?void 0:k.fontStyle)??"normal"},textAppearance:{textTransform:((K=e==null?void 0:e[`${ne}TextAppearance`])==null?void 0:K.textTransform)??"none",textDecoration:((U=e==null?void 0:e[`${ne}TextAppearance`])==null?void 0:U.textDecoration)??"none",fontVariant:((te=e==null?void 0:e[`${ne}TextAppearance`])==null?void 0:te.fontVariant)??"normal"},fontSize:(e==null?void 0:e[`${ne}FontSize`])??.01,lineHeight:(e==null?void 0:e[`${ne}LineHeight`])??.01,letterSpacing:(e==null?void 0:e[`${ne}LetterSpacing`])??0,wordSpacing:(e==null?void 0:e[`${ne}WordSpacing`])??0,color:(e==null?void 0:e[`${ne}Color`])??"#000000"}},S=q("text"),R=q("caption"),F=s.length>1&&s.some(ne=>{var v,g;return(((v=ne.text)==null?void 0:v.length)??0)>0||(((g=ne.caption)==null?void 0:g.length)??0)>0}),N=u.useRef(null),[I,B]=u.useState(0),[ie,Q]=u.useState(0),oe=e.controls??{mode:"Off",icon:null},G=s.length>1,M=u.useCallback((ne,v)=>!G||v===ne?ne:(H.current&&window.clearTimeout(H.current),$(ne),w(!0),H.current=window.setTimeout(()=>{$(null),w(!1),H.current=null},300),v),[G]),re=u.useCallback(()=>{G&&P(ne=>M(ne,(ne-1+s.length)%s.length))},[G,M,s.length]),Le=u.useCallback(()=>{G&&P(ne=>M(ne,(ne+1)%s.length))},[G,M,s.length]);u.useEffect(()=>{if(!f||!G)return;const ne=Math.max(300,Number.isFinite(a*1e3)?a*1e3:0),v=window.setInterval(()=>{P(g=>M(g,(g+1)%s.length))},ne);return()=>{window.clearInterval(v)}},[f,G,M,s.length,a]),u.useEffect(()=>()=>{H.current&&window.clearTimeout(H.current)},[]);const ce=(ne,v)=>{var te,ee,Z,de;const g=v==null?void 0:v.textMinHeightPx,k=v==null?void 0:v.captionMinHeightPx,K=v==null?void 0:v.dataMeasureAttrs,U=i&&!(v!=null&&v.dataMeasureAttrs)&&!(v!=null&&v.hideControls);return l.jsxs(l.Fragment,{children:[ne.text&&l.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:L,width:"100%"},children:[l.jsx("div",{"data-controls":U?"textMarginTop":void 0,className:U?`${r}-control`:void 0,style:{height:E.scalingValue(y??0,n??!1)}}),l.jsx("div",{...K&&{"data-testimonial-measure":"text"},style:{...Xe(S,n),...g&&g>0?{minHeight:g}:{},textAlign:V,pointerEvents:"auto"},children:l.jsx(Ln,{content:ne.text})})]}),l.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:L,width:"100%"},children:[l.jsx("div",{"data-controls":U?"imageMarginTop":void 0,className:U?`${r}-control`:void 0,style:{height:E.scalingValue(T??0,n??!1)}}),l.jsx("div",{style:{width:E.scalingValue(m??0,n??!1),height:E.scalingValue(h??0,n??!1)},children:((te=ne.image)==null?void 0:te.url)&&l.jsx("img",{src:(ee=ne.image)==null?void 0:ee.url,alt:((Z=ne.image)==null?void 0:Z.name)??"",className:`${r}-icon`,style:{objectFit:((de=ne.image)==null?void 0:de.objectFit)||"contain"}})})]}),ne.caption&&l.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:L,width:"100%"},children:[l.jsx("div",{"data-controls":U?"captionMarginTop":void 0,className:U?`${r}-control`:void 0,style:{height:E.scalingValue(C??0,n??!1)}}),l.jsx("div",{...K?{"data-testimonial-measure":"caption"}:{},style:{...Xe(R,n),...k&&k>0?{minHeight:k}:{},textAlign:V,pointerEvents:"auto"},children:l.jsx(Ln,{content:ne.caption})})]})]})},fe=u.useCallback(ne=>{B(ne.maxTextPx),Q(ne.maxCaptionPx)},[]);if(u.useLayoutEffect(()=>{if(!F){fe({maxTextPx:0,maxCaptionPx:0});return}const ne=N.current;if(!ne)return;const v=()=>{E.readTestimonialTextMeasure(ne,fe)};v();const g=new ResizeObserver(v);return g.observe(ne),()=>{g.disconnect()}},[F,fe,t]),!D)return l.jsx(l.Fragment,{});const We=F?{textMinHeightPx:I,captionMinHeightPx:ie}:void 0;return l.jsx(l.Fragment,{children:l.jsxs("div",{className:`${r}-container`,children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:Hc(r)}}),l.jsxs("div",{className:`${r}-wrapper`,style:{width:E.scalingValue(p??0,n??!1),alignItems:L},children:[F&&l.jsx("div",{ref:N,"aria-hidden":!0,style:{position:"absolute",left:0,top:0,width:"100%",height:"100%",visibility:"hidden",pointerEvents:"none",zIndex:-1},children:s.map((ne,v)=>l.jsx("div",{style:{width:"100%"},children:ce(ne,{dataMeasureAttrs:!0})},v))}),l.jsxs("div",{className:`${r}-fade-stack`,children:[J&&A&&l.jsx("div",{className:$e(`${r}-fade-item-prev`,`${r}-fade-out`),children:ce(J,{...We,hideControls:!0})}),l.jsx("div",{className:$e(`${r}-fade-item-current`,A?`${r}-fade-in`:void 0),children:ce(D,We)})]})]}),oe.mode==="On"&&l.jsxs("div",{className:`${r}-controls`,children:[l.jsx("div",{className:`${r}-arrow`,style:{width:E.scalingValue(W??.02,n??!1),height:E.scalingValue(W??.02,n??!1),"--arrow-hover-color":b},children:l.jsx("button",{type:"button",className:`${r}-arrow-inner`,onClick:re,disabled:!G,"aria-label":"Previous testimonial",children:oe.icon&&l.jsx(kt,{url:oe.icon,fill:x,hoverFill:b,className:$e(`${r}-arrow-img`,`${r}-mirror`)})})}),l.jsx("div",{className:$e(`${r}-arrow`,`${r}-next-arrow`),style:{width:E.scalingValue(W??.02,n??!1),height:E.scalingValue(W??.02,n??!1),"--arrow-hover-color":b},children:l.jsx("button",{type:"button",className:`${r}-arrow-inner`,onClick:Le,disabled:!G,"aria-label":"Next testimonial",children:oe.icon&&l.jsx(kt,{url:oe.icon,fill:x,hoverFill:b,className:`${r}-arrow-img`})})})]})]})})},Oc=`import cn from 'classnames';
3140
3150
  import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
3141
3151
  import { CommonComponentProps } from '../props';
3142
3152
  import { RichTextRenderer } from '../helpers/RichTextRenderer/RichTextRenderer';
@@ -3631,11 +3641,11 @@ type TestimonialsSettings = {
3631
3641
  icon?: string | null;
3632
3642
  };
3633
3643
  };
3634
- `,Yc="data:image/svg+xml,"+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 18" width="10" height="18"><path fill="#000000" fill-rule="evenodd" d="M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z" transform="translate(5, 9) rotate(-90) translate(-5, -9)"/></svg>'),zo={fontSettings:{type:"object",scope:"common",display:{type:"font-settings"},properties:{fontWeight:{type:"number",scope:"common"},fontStyle:{type:"string",scope:"common"}}}},Jc={type:"object",version:1,settings:{sizing:"auto manual",properties:{autoplay:{type:"string",scope:"common",title:"Autoplay",display:{type:"switch-control"},enum:["on","off"]},delay:{type:"number",scope:"layout",title:"Delay(s)",display:{type:"percentage-input"},step:1,min:1,max:8},align:{type:"string",scope:"common",title:"Alignment",display:{type:"align-group",direction:"horizontal"},enum:["start","center","end"]},width:{type:"number",scope:"layout",title:"width",min:0,max:1e3,display:{type:"numeric-input"}},imageWidth:{type:"number",scope:"layout",title:"width",min:0,max:300,display:{type:"numeric-input"}},imageHeight:{type:"number",scope:"layout",title:"height",min:0,max:300,display:{type:"numeric-input"}},imageMarginTop:{type:"number",scope:"layout",title:"Image margin top",min:0,max:200,display:{type:"range-control"}},textMarginTop:{type:"number",scope:"layout",title:"Text margin top",min:0,max:200,display:{type:"range-control"}},controls:{type:"object",scope:"common",title:"Controls",display:{type:"button-icon-switch"},properties:{mode:{type:"string",enum:["On","Off"]},icon:{type:["string","null"],title:"Icon",display:{type:"settings-image-input"}}}},controlsWidth:{type:"number",scope:"layout",title:"Controls width",min:0,max:100,display:{type:"numeric-input"}},controlsColor:{type:"string",scope:"common",title:"Fill Controls",display:{type:"settings-color-picker"}},controlsHoverColor:{type:"string",scope:"common",title:"Hover Controls",display:{type:"settings-color-picker"}},captionMarginTop:{type:"number",scope:"layout",title:"Caption margin top",min:0,max:200,display:{type:"range-control"}},captionFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},captionFontSettings:{...zo.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},captionFontSize:{type:"number",scope:"layout",title:"Caption Font Size",display:{type:"font-size"}},captionLineHeight:{type:"number",scope:"layout",title:"Caption Line Height",display:{type:"line-height-input"}},captionLetterSpacing:{type:"number",scope:"layout",title:"Caption Letter Spacing",display:{type:"letter-spacing-input"}},captionWordSpacing:{type:"number",scope:"layout",title:"Caption Word Spacing",display:{type:"word-spacing-input"}},captionTextAppearance:{type:"object",scope:"layout",title:"Caption Text Appearance",display:{type:"text-appearance"}},captionColor:{display:{type:"style-panel-color-picker"},type:"string",scope:"common",title:"Fill Caption"},textFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},textFontSettings:{...zo.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},textFontSize:{type:"number",scope:"layout",title:"Text Font Size",display:{type:"font-size"}},textLineHeight:{type:"number",scope:"layout",title:"Text Line Height",display:{type:"line-height-input"}},textLetterSpacing:{type:"number",scope:"layout",title:"Text Letter Spacing",display:{type:"letter-spacing-input"}},textWordSpacing:{type:"number",scope:"layout",title:"Text Word Spacing",display:{type:"word-spacing-input"}},textTextAppearance:{type:"object",scope:"layout",title:"Text Text Appearance",display:{type:"text-appearance"}},textColor:{display:{type:"style-panel-color-picker"},type:"string",scope:"common",title:"Fill Text"}},defaults:{autoplay:"on",controls:{mode:"On",icon:Yc},controlsColor:"#000000",controlsHoverColor:"#EABC01",align:"center",textFontFamily:"Goudy Bookletter 1911",textFontSettings:{fontWeight:400,fontStyle:"normal"},textLetterSpacing:0,textWordSpacing:0,textTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},textColor:"#000000",captionFontFamily:"Goudy Bookletter 1911",captionFontSettings:{fontWeight:400,fontStyle:"normal"},captionLetterSpacing:0,captionWordSpacing:0,captionTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},captionColor:"#000000"},layoutDefaults:{m:{delay:3,width:.69,imageMarginTop:.08,captionMarginTop:.04,textMarginTop:0,textFontSize:.069,captionFontSize:.053,textLineHeight:.093,captionLineHeight:.069,imageWidth:.21,imageHeight:.21,controlsWidth:.06},d:{delay:3,width:.35,imageMarginTop:.02,textMarginTop:0,captionMarginTop:.01,textFontSize:.016,captionFontSize:.009,textLineHeight:.018,captionLineHeight:.009,imageWidth:.027,imageHeight:.027,controlsWidth:.014}},displayRules:[{if:{name:"autoplay",value:"off"},then:{name:"properties.delay.display.enabled",value:!1}}],layout:["__componentName__","autoplay","delay","width","imageMarginTop","textMarginTop","captionMarginTop"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","autoplay"]},{type:"row",items:["width","align"]},{type:"row",items:["controls"]},{type:"row",items:["controlsWidth","delay"]},{type:"row",title:"Image Container",items:["imageWidth","imageHeight"]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[{type:"group",title:"Text",items:["textFontFamily","textFontSettings",{type:"group",title:"",items:["text",{type:"row",items:["textFontSize","textLineHeight","textLetterSpacing","textWordSpacing"]},"textTextAppearance"]}]},{type:"group",title:"Caption",items:["captionFontFamily","captionFontSettings",{type:"group",title:"",items:["caption",{type:"row",items:["captionFontSize","captionLineHeight","captionLetterSpacing","captionWordSpacing"]},"captionTextAppearance"]}]}]}],paletteBookmark:{items:["textColor","captionColor","controlsColor","controlsHoverColor"],panelIds:["general","typeStyle"]},content:{type:"array",settings:{addItemFromFileExplorer:!1},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"}},text:{placeholder:"Add Text...",label:"Text",display:{type:"rich-text"}},caption:{placeholder:"Add Caption...",label:"Caption",display:{type:"rich-text"}}}},default:[{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/julia.png",name:""},text:[{type:"paragraph",children:[{text:"This website is a great tool for designers and developers. The ease of creating animations here is mesmerizing. Bravo to the creators of this product!"}]}],caption:[{type:"paragraph",children:[{text:"Julia Smith,"}]},{type:"paragraph",children:[{text:"Freelance Designer"}]}]},{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/mark.png",name:""},text:[{type:"paragraph",children:[{text:"This is super cool. The on onboarding terminal style animation brings me back to what made the Internet simple and fun."}]}],caption:[{type:"paragraph",children:[{text:"Mark Travis,"}]},{type:"paragraph",children:[{text:"Architect @ United Architects"}]}]},{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/pia.png",name:""},text:[{type:"paragraph",children:[{text:"Great tool for someone who wants to quickly and easily build a site that has fancy scrolling animations. Totally addictive!"}]}],caption:[{type:"paragraph",children:[{text:"Pia,"}]},{type:"paragraph",children:[{text:"Media Buyer"}]}]}]}},Zc={element:Uc,id:"testimonial-single",name:"Clara",category:"testimonials",version:1,preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Testimonials_Single.png"},defaultSize:{d:{width:700,height:300},t:{width:373,height:300},m:{width:334,height:300}},schema:Jc,sourceCode:Xc,assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.controls.icon"}]},fontSettingsPaths:{content:[],parameters:[{path:"styles.text.fontSettings"},{path:"styles.caption.fontSettings"}]}};function Qc(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function ed(e){return`
3644
+ `,Vc="data:image/svg+xml,"+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 18" width="10" height="18"><path fill="#000000" fill-rule="evenodd" d="M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z" transform="translate(5, 9) rotate(-90) translate(-5, -9)"/></svg>'),Di={fontSettings:{type:"object",scope:"common",display:{type:"font-settings"},properties:{fontWeight:{type:"number",scope:"common"},fontStyle:{type:"string",scope:"common"}}}},Dc={type:"object",version:1,settings:{sizing:"auto manual",properties:{autoplay:{type:"string",scope:"common",title:"Autoplay",display:{type:"switch-control"},enum:["on","off"]},delay:{type:"number",scope:"layout",title:"Delay(s)",display:{type:"percentage-input"},step:1,min:1,max:8},align:{type:"string",scope:"common",title:"Alignment",display:{type:"align-group",direction:"horizontal"},enum:["start","center","end"]},width:{type:"number",scope:"layout",title:"width",min:0,max:1e3,display:{type:"numeric-input"}},imageWidth:{type:"number",scope:"layout",title:"width",min:0,max:300,display:{type:"numeric-input"}},imageHeight:{type:"number",scope:"layout",title:"height",min:0,max:300,display:{type:"numeric-input"}},imageMarginTop:{type:"number",scope:"layout",title:"Image margin top",min:0,max:200,display:{type:"range-control"}},textMarginTop:{type:"number",scope:"layout",title:"Text margin top",min:0,max:200,display:{type:"range-control"}},controls:{type:"object",scope:"common",title:"Controls",display:{type:"button-icon-switch"},properties:{mode:{type:"string",enum:["On","Off"]},icon:{type:["string","null"],title:"Icon",display:{type:"settings-image-input"}}}},controlsWidth:{type:"number",scope:"layout",title:"Controls width",min:0,max:100,display:{type:"numeric-input"}},controlsColor:{type:"string",scope:"common",title:"Fill Controls",display:{type:"settings-color-picker"}},controlsHoverColor:{type:"string",scope:"common",title:"Hover Controls",display:{type:"settings-color-picker"}},captionMarginTop:{type:"number",scope:"layout",title:"Caption margin top",min:0,max:200,display:{type:"range-control"}},captionFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},captionFontSettings:{...Di.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},captionFontSize:{type:"number",scope:"layout",title:"Caption Font Size",display:{type:"font-size"}},captionLineHeight:{type:"number",scope:"layout",title:"Caption Line Height",display:{type:"line-height-input"}},captionLetterSpacing:{type:"number",scope:"layout",title:"Caption Letter Spacing",display:{type:"letter-spacing-input"}},captionWordSpacing:{type:"number",scope:"layout",title:"Caption Word Spacing",display:{type:"word-spacing-input"}},captionTextAppearance:{type:"object",scope:"layout",title:"Caption Text Appearance",display:{type:"text-appearance"}},captionColor:{display:{type:"style-panel-color-picker"},type:"string",scope:"common",title:"Fill Caption"},textFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},textFontSettings:{...Di.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},textFontSize:{type:"number",scope:"layout",title:"Text Font Size",display:{type:"font-size"}},textLineHeight:{type:"number",scope:"layout",title:"Text Line Height",display:{type:"line-height-input"}},textLetterSpacing:{type:"number",scope:"layout",title:"Text Letter Spacing",display:{type:"letter-spacing-input"}},textWordSpacing:{type:"number",scope:"layout",title:"Text Word Spacing",display:{type:"word-spacing-input"}},textTextAppearance:{type:"object",scope:"layout",title:"Text Text Appearance",display:{type:"text-appearance"}},textColor:{display:{type:"style-panel-color-picker"},type:"string",scope:"common",title:"Fill Text"}},defaults:{autoplay:"on",controls:{mode:"On",icon:Vc},controlsColor:"#000000",controlsHoverColor:"#EABC01",align:"center",textFontFamily:"Goudy Bookletter 1911",textFontSettings:{fontWeight:400,fontStyle:"normal"},textLetterSpacing:0,textWordSpacing:0,textTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},textColor:"#000000",captionFontFamily:"Goudy Bookletter 1911",captionFontSettings:{fontWeight:400,fontStyle:"normal"},captionLetterSpacing:0,captionWordSpacing:0,captionTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},captionColor:"#000000"},layoutDefaults:{m:{delay:3,width:.69,imageMarginTop:.08,captionMarginTop:.04,textMarginTop:0,textFontSize:.069,captionFontSize:.053,textLineHeight:.093,captionLineHeight:.069,imageWidth:.21,imageHeight:.21,controlsWidth:.06},d:{delay:3,width:.35,imageMarginTop:.02,textMarginTop:0,captionMarginTop:.01,textFontSize:.016,captionFontSize:.009,textLineHeight:.018,captionLineHeight:.009,imageWidth:.027,imageHeight:.027,controlsWidth:.014}},displayRules:[{if:{name:"autoplay",value:"off"},then:{name:"properties.delay.display.enabled",value:!1}}],layout:["__componentName__","autoplay","delay","width","imageMarginTop","textMarginTop","captionMarginTop"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","autoplay"]},{type:"row",items:["width","align"]},{type:"row",items:["controls"]},{type:"row",items:["controlsWidth","delay"]},{type:"row",title:"Image Container",items:["imageWidth","imageHeight"]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[{type:"group",title:"Text",items:["textFontFamily","textFontSettings",{type:"group",title:"",items:["text",{type:"row",items:["textFontSize","textLineHeight","textLetterSpacing","textWordSpacing"]},"textTextAppearance"]}]},{type:"group",title:"Caption",items:["captionFontFamily","captionFontSettings",{type:"group",title:"",items:["caption",{type:"row",items:["captionFontSize","captionLineHeight","captionLetterSpacing","captionWordSpacing"]},"captionTextAppearance"]}]}]}],paletteBookmark:{items:["textColor","captionColor","controlsColor","controlsHoverColor"],panelIds:["general","typeStyle"]},content:{type:"array",settings:{addItemFromFileExplorer:!1},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"}},text:{placeholder:"Add Text...",label:"Text",display:{type:"rich-text"}},caption:{placeholder:"Add Caption...",label:"Caption",display:{type:"rich-text"}}}},default:[{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/julia.png",name:""},text:[{type:"paragraph",children:[{text:"This website is a great tool for designers and developers. The ease of creating animations here is mesmerizing. Bravo to the creators of this product!"}]}],caption:[{type:"paragraph",children:[{text:"Julia Smith,"}]},{type:"paragraph",children:[{text:"Freelance Designer"}]}]},{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/mark.png",name:""},text:[{type:"paragraph",children:[{text:"This is super cool. The on onboarding terminal style animation brings me back to what made the Internet simple and fun."}]}],caption:[{type:"paragraph",children:[{text:"Mark Travis,"}]},{type:"paragraph",children:[{text:"Architect @ United Architects"}]}]},{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/pia.png",name:""},text:[{type:"paragraph",children:[{text:"Great tool for someone who wants to quickly and easily build a site that has fancy scrolling animations. Totally addictive!"}]}],caption:[{type:"paragraph",children:[{text:"Pia,"}]},{type:"paragraph",children:[{text:"Media Buyer"}]}]}]}},jc={element:Bc,id:"testimonial-single",name:"Clara",category:"testimonials",version:1,preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Testimonials_Single.png"},defaultSize:{d:{width:700,height:300},t:{width:373,height:300},m:{width:334,height:300}},schema:Dc,sourceCode:Oc,assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.controls.icon"}]},fontSettingsPaths:{content:[],parameters:[{path:"styles.text.fontSettings"},{path:"styles.caption.fontSettings"}]}};function zc(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function Kc(e){return`
3635
3645
  .${e}-wrapper {
3636
3646
  display: grid;
3637
3647
  align-items: start;
3638
- min-height: ${Qc(48)};
3648
+ min-height: ${zc(48)};
3639
3649
  }
3640
3650
  .${e}-item {
3641
3651
  display: flex;
@@ -3723,7 +3733,7 @@ type TestimonialsSettings = {
3723
3733
  pointer-events: auto;
3724
3734
  z-index: 10;
3725
3735
  }
3726
- `}const At=500,Dt="cubic-bezier(0.22, 1, 0.36, 1)";function td({images:e,index:t,imageDisplay:n,originRect:i,reverseClose:a,onClose:s,onPrev:o,onNext:d,counterClassName:l,counterStyle:u}){const p=c.useRef(null),I=c.useRef(null),[b,w]=c.useState(null),[f,h]=c.useState(i?"opening":"open"),[T,L]=c.useState(!0),C=c.useRef(t),m=c.useCallback(()=>{const S=p.current,K=I.current;if(!S||!K)return;const v=S.getBoundingClientRect(),D=v.width,W=v.height,q=K.naturalWidth,G=K.naturalHeight;if(!D||!W||!q||!G)return;if(n==="Cover"){w({width:D,height:W,left:v.left,top:v.top});return}const $=q/G,H=D/W;if($>H){const _=D/$;w({width:D,height:_,left:v.left,top:v.top+(W-_)/2})}else{const _=W*$;w({width:_,height:W,left:v.left+(D-_)/2,top:v.top})}},[n]);c.useEffect(()=>{m();const S=p.current;if(!S)return;const K=new ResizeObserver(()=>m());return K.observe(S),()=>K.disconnect()},[m,t]),c.useEffect(()=>{if(f!=="opening"||!b)return;const S={id:0};return S.id=requestAnimationFrame(()=>{S.id=requestAnimationFrame(()=>h("open"))}),()=>cancelAnimationFrame(S.id)},[f,b]),c.useEffect(()=>{if(f!=="closing")return;const S=setTimeout(()=>s(),At);return()=>clearTimeout(S)},[f,s]),c.useEffect(()=>{C.current!==t&&L(!1),C.current=t},[t]);const z=()=>{f!=="closing"&&h("closing")},j=f==="open",R=f==="closing",x=R&&a&&!!i,A=f==="opening"?i??b:x?i:b;return r.jsxs("div",{style:{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9997},onClick:z,children:[r.jsx("div",{style:{position:"absolute",inset:0,background:"rgba(28,31,34,0.9)",opacity:j?1:0,transition:`opacity ${At}ms ${Dt}`,pointerEvents:"none"}}),r.jsxs("div",{style:{position:"relative",width:"100%",height:"100%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},children:[r.jsx("div",{style:{height:"10%"}}),r.jsx("div",{style:{width:"70%",height:"80%",display:"flex",justifyContent:"center",alignItems:"center"},children:r.jsx("div",{ref:p,style:{width:"100%",height:"100%"}})}),r.jsx("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",height:"10%",opacity:j?1:0,transition:`opacity ${At}ms ${Dt}`},children:e.length>1&&r.jsxs("p",{className:l,style:u,children:[t+1," / ",e.length]})})]}),A&&r.jsx("img",{ref:I,src:e[t],onLoad:m,style:{position:"fixed",top:A.top,left:A.left,width:A.width,height:A.height,objectFit:n==="Cover"?"cover":"contain",opacity:R&&!x?0:1,transition:R&&!x?`opacity ${At}ms ${Dt}`:x||T?`top ${At}ms ${Dt}, left ${At}ms ${Dt}, width ${At}ms ${Dt}, height ${At}ms ${Dt}`:"none",pointerEvents:"none",zIndex:9998}}),j&&b&&r.jsxs(r.Fragment,{children:[r.jsx("div",{style:{position:"fixed",top:b.top,left:b.left,width:b.width/2,height:b.height,cursor:"w-resize",zIndex:9999},onClick:S=>{S.stopPropagation(),o()}}),r.jsx("div",{style:{position:"fixed",top:b.top,left:b.left+b.width/2,width:b.width/2,height:b.height,cursor:"e-resize",zIndex:9999},onClick:S=>{S.stopPropagation(),d()}})]})]})}function nd({settings:e,content:t,isEditor:n,isPreviewMode:i,isEditMode:a,metadata:s,activeEvent:o,layoutId:d}){const{prefix:l}=E.useScopedStyles(),u=!!a,{type:p="A",gridLayout:I,textBoxWidth:b,verticalGap:w,entriesCount:f,lightbox:h,imageDisplay:T,slider:L,sliderTiming:C,direction:m,transition:z,titleMarginTop:j,subtitleMarginTop:R,titleColor:x,subtitleColor:A,lightboxCounterColor:S,titleFontFamily:K,titleFontSettings:v,titleFontSize:D,titleLineHeight:W,titleLetterSpacing:q,titleWordSpacing:G,titleTextAppearance:$,subtitleFontFamily:H,subtitleFontSettings:_,subtitleFontSize:B,subtitleLineHeight:k,subtitleLetterSpacing:P,subtitleWordSpacing:te,subtitleTextAppearance:ae,lightboxCounterFontFamily:re,lightboxCounterFontSettings:U,lightboxCounterFontSize:N,lightboxCounterLineHeight:oe,lightboxCounterLetterSpacing:ye,lightboxCounterWordSpacing:ce,lightboxCounterTextAppearance:ge}=e,we={fontSettings:{fontFamily:K,fontWeight:(v==null?void 0:v.fontWeight)??400,fontStyle:(v==null?void 0:v.fontStyle)??"normal"},fontSize:D??.01,lineHeight:W,letterSpacing:q??0,wordSpacing:G??0,textAppearance:$,color:x},y={...ft(Ue(we,n))},g={fontSettings:{fontFamily:H,fontWeight:(_==null?void 0:_.fontWeight)??400,fontStyle:(_==null?void 0:_.fontStyle)??"normal"},fontSize:B??.01,lineHeight:k,letterSpacing:P??0,wordSpacing:te??0,textAppearance:ae,color:A},J={...ft(Ue(g,n))},Q={fontSettings:{fontFamily:re,fontWeight:(U==null?void 0:U.fontWeight)??400,fontStyle:(U==null?void 0:U.fontStyle)??"normal"},fontSize:N??.01,lineHeight:oe,letterSpacing:ye??0,wordSpacing:ce??0,textAppearance:ge,color:S},F={...ft(Ue(Q,n))},O=E.buildColorVars(l,{titleColor:x,subtitleColor:A,lightboxCounterColor:S},id,od),pe=`${o&&o!=="default"?`${l}-state-${o}`:""}`.trim(),le=f===0?1/0:f,he=(t??[]).slice(0,le),Y=I.entryWidth??.2,Z=(T==null?void 0:T.display)==="Cover",X=(T==null?void 0:T.ratioValue)??"1:1",se=(T==null?void 0:T.reversed)??!1,[Te,Le]=X.split(":").map(Number),Oe=se?Le:Te,ve=se?Te:Le,ke=`${Oe} / ${ve}`,_e=Oe>=ve,Ae={objectFit:Z?"cover":"contain",...Z&&{aspectRatio:ke,width:_e?"100%":"auto",height:_e?"auto":"100%"}},[Ve,me]=c.useState("ltr"),[$e,Fe]=c.useState(0),Me=c.useRef(null);c.useEffect(()=>{const Re=Me.current;if(!Re)return;const Ze=new ResizeObserver(xe=>{Fe(Math.round(xe[0].contentRect.width))});return Ze.observe(Re),()=>Ze.disconnect()},[]);const Ye=(()=>{const Re={...O},Ze=Me.current?getComputedStyle(Me.current).getPropertyValue("--cntrl-article-width").trim():"";return Ze&&(Re["--cntrl-article-width"]=Ze),Re})(),[Be,fe]=c.useState(!1),[Xe,Je]=c.useState([]),[Ge,mt]=c.useState(0),[Bt,Pt]=c.useState(null),Ot=(Re,Ze,xe)=>{if(n&&!i||h==="Off")return;const je=Re.currentTarget.getBoundingClientRect();Pt({top:je.top,left:je.left,width:je.width,height:je.height}),Je(Ze),mt(xe),fe(!0)};return c.useEffect(()=>{if(!Be||h!=="On"||typeof document>"u")return;const Re=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=Re}},[Be,h]),r.jsxs(r.Fragment,{children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:ed(l)}}),r.jsx("div",{style:O,children:r.jsx("div",{ref:Me,className:`${l}-wrapper ${l}-type-${p} ${pe}`.trim(),style:{gridTemplateColumns:`repeat(${I.columnsCount}, minmax(0, 1fr))`,rowGap:E.scalingValue(w??0,n),columnGap:E.scalingValue(I.horizontalGap??0,n),width:E.scalingValue(I.wrapperWidth??0,n)},children:he.map((Re,Ze)=>{var xe,je;return r.jsx("div",{className:`${l}-item`.trim(),children:r.jsx("div",{className:a?`${l}-item-inner`:`${l}-item-inner-hidden`,style:{width:(b??0)>100?`calc(${E.scalingValue(Y??0,n)} * (${b} / 100))`:E.scalingValue(Y??0,n)},children:r.jsxs("a",{href:(((xe=Re.link)==null?void 0:xe.length)??0)>0&&h==="Off"?Re.link:void 0,target:"_blank",className:`${l}-item-image-link`,children:[r.jsx("div",{className:`${l}-item-image-wrapper`,style:{width:E.scalingValue(Y??0,n),height:E.scalingValue(Y??0,n)},children:(((je=Re.image)==null?void 0:je.length)??0)===0?null:L==="Off"?r.jsx("img",{src:Re.image[0].url,alt:Re.image[0].name,className:`${l}-item-image`.trim(),style:Ae,onClick:qe=>Ot(qe,Re.image.map(ze=>ze.url),0)}):r.jsx(co,{className:`${l}-item-slider`,options:{arrows:!1,pagination:!1,drag:!1,perPage:1,autoplay:!0,interval:C*1e3,width:"100%",height:"100%",speed:500,type:z==="Fade"?"fade":"loop",rewind:z==="Fade",pauseOnHover:!1,pauseOnFocus:!1,direction:z==="Fade"?"ltr":m!=="Random"?m==="Horizontal"?"ltr":"ttb":Ve},onMoved:qe=>{if(m!=="Random"||z==="Fade")return;const ze=Math.random()>.5?Math.random()>.5?"rtl":"ltr":Math.random()>.5?"btt":"ttb";me(ze),setTimeout(()=>{qe.refresh()},0)},children:Re.image.map((qe,ze)=>r.jsx(uo,{children:r.jsx("img",{src:qe.url,alt:qe.name,className:`${l}-item-image`.trim(),style:Ae,onClick:gt=>Ot(gt,Re.image.map(Hn=>Hn.url),ze)})},ze))},`${z}-${Y}-${m}-${C}-${$e}-${d}`)}),r.jsx("div",{"data-controls":"titleMarginTop",className:`${l}-control`,style:{height:E.scalingValue(j??0,n),width:E.scalingValue(Y*b/100,n)}}),r.jsx("p",{className:`${l}-item-title`.trim(),style:{width:`calc(${E.scalingValue(Y??0,n)} * (${b} / 100))`,...y},children:Re.title}),p==="B"&&u&&r.jsx("div",{"data-controls":"subtitleMarginTop",className:`${l}-control`,style:{height:E.scalingValue(R??0,n),width:E.scalingValue(Y*b/100,n)}}),p==="B"&&r.jsx("p",{className:`${l}-item-subtitle`.trim(),style:{width:`calc(${E.scalingValue(Y??0,n)} * (${b} / 100))`,...J},children:Re.subtitle})]})})},Ze)})})}),(!n||i)&&Be&&typeof document<"u"&&h==="On"&&In.createPortal(r.jsx("div",{style:Ye,"data-selection":"none",children:r.jsx(td,{images:Xe,index:Ge,imageDisplay:T.display,originRect:Bt,reverseClose:L==="Off",onClose:()=>fe(!1),onPrev:()=>mt(Re=>(Re-1+Xe.length)%Xe.length),onNext:()=>mt(Re=>(Re+1)%Xe.length),counterClassName:`${l}-lightbox-counter`.trim(),counterStyle:F})}),document.body)]})}const id={titleColor:"title-color",subtitleColor:"subtitle-color",lightboxCounterColor:"lightbox-counter-color"},od=["hover","focus","filled","success","error"],rd=`import { Splide, SplideSlide } from '@splidejs/react-splide';
3736
+ `}const Wt=500,Dt="cubic-bezier(0.22, 1, 0.36, 1)";function qc({images:e,index:t,imageDisplay:n,originRect:o,reverseClose:i,onClose:r,onPrev:s,onNext:c,counterClassName:a,counterStyle:d}){const p=u.useRef(null),T=u.useRef(null),[y,C]=u.useState(null),[m,h]=u.useState(o?"opening":"open"),[W,x]=u.useState(!0),b=u.useRef(t),f=u.useCallback(()=>{const w=p.current,H=T.current;if(!w||!H)return;const L=w.getBoundingClientRect(),V=L.width,D=L.height,J=H.naturalWidth,q=H.naturalHeight;if(!V||!D||!J||!q)return;if(n==="Cover"){C({width:V,height:D,left:L.left,top:L.top});return}const S=J/q,R=V/D;if(S>R){const F=V/S;C({width:V,height:F,left:L.left,top:L.top+(D-F)/2})}else{const F=D*S;C({width:F,height:D,left:L.left+(V-F)/2,top:L.top})}},[n]);u.useEffect(()=>{f();const w=p.current;if(!w)return;const H=new ResizeObserver(()=>f());return H.observe(w),()=>H.disconnect()},[f,t]),u.useEffect(()=>{if(m!=="opening"||!y)return;const w={id:0};return w.id=requestAnimationFrame(()=>{w.id=requestAnimationFrame(()=>h("open"))}),()=>cancelAnimationFrame(w.id)},[m,y]),u.useEffect(()=>{if(m!=="closing")return;const w=setTimeout(()=>r(),Wt);return()=>clearTimeout(w)},[m,r]),u.useEffect(()=>{b.current!==t&&x(!1),b.current=t},[t]);const O=()=>{m!=="closing"&&h("closing")},P=m==="open",_=m==="closing",$=_&&i&&!!o,A=m==="opening"?o??y:$?o:y;return l.jsxs("div",{style:{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9997},onClick:O,children:[l.jsx("div",{style:{position:"absolute",inset:0,background:"rgba(28,31,34,0.9)",opacity:P?1:0,transition:`opacity ${Wt}ms ${Dt}`,pointerEvents:"none"}}),l.jsxs("div",{style:{position:"relative",width:"100%",height:"100%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},children:[l.jsx("div",{style:{height:"10%"}}),l.jsx("div",{style:{width:"70%",height:"80%",display:"flex",justifyContent:"center",alignItems:"center"},children:l.jsx("div",{ref:p,style:{width:"100%",height:"100%"}})}),l.jsx("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",height:"10%",opacity:P?1:0,transition:`opacity ${Wt}ms ${Dt}`},children:e.length>1&&l.jsxs("p",{className:a,style:d,children:[t+1," / ",e.length]})})]}),A&&l.jsx("img",{ref:T,src:e[t],onLoad:f,style:{position:"fixed",top:A.top,left:A.left,width:A.width,height:A.height,objectFit:n==="Cover"?"cover":"contain",opacity:_&&!$?0:1,transition:_&&!$?`opacity ${Wt}ms ${Dt}`:$||W?`top ${Wt}ms ${Dt}, left ${Wt}ms ${Dt}, width ${Wt}ms ${Dt}, height ${Wt}ms ${Dt}`:"none",pointerEvents:"none",zIndex:9998}}),P&&y&&l.jsxs(l.Fragment,{children:[l.jsx("div",{style:{position:"fixed",top:y.top,left:y.left,width:y.width/2,height:y.height,cursor:"w-resize",zIndex:9999},onClick:w=>{w.stopPropagation(),s()}}),l.jsx("div",{style:{position:"fixed",top:y.top,left:y.left+y.width/2,width:y.width/2,height:y.height,cursor:"e-resize",zIndex:9999},onClick:w=>{w.stopPropagation(),c()}})]})]})}function Uc({settings:e,content:t,isEditor:n,isPreviewMode:o,isEditMode:i,metadata:r,activeEvent:s,layoutId:c}){const{prefix:a}=E.useScopedStyles(),{type:d="A",gridLayout:p,textBoxWidth:T,verticalGap:y,entriesCount:C,lightbox:m,imageDisplay:h,slider:W,sliderTiming:x,direction:b,transition:f,titleMarginTop:O,subtitleMarginTop:P,titleColor:_,subtitleColor:$,lightboxCounterColor:A,titleFontFamily:w,titleFontSettings:H,titleFontSize:L,titleLineHeight:V,titleLetterSpacing:D,titleWordSpacing:J,titleTextAppearance:q,subtitleFontFamily:S,subtitleFontSettings:R,subtitleFontSize:F,subtitleLineHeight:N,subtitleLetterSpacing:I,subtitleWordSpacing:B,subtitleTextAppearance:ie,lightboxCounterFontFamily:Q,lightboxCounterFontSettings:oe,lightboxCounterFontSize:G,lightboxCounterLineHeight:M,lightboxCounterLetterSpacing:re,lightboxCounterWordSpacing:Le,lightboxCounterTextAppearance:ce}=e,fe={fontSettings:{fontFamily:w,fontWeight:(H==null?void 0:H.fontWeight)??400,fontStyle:(H==null?void 0:H.fontStyle)??"normal"},fontSize:L??.01,lineHeight:V,letterSpacing:D??0,wordSpacing:J??0,textAppearance:q,color:_},ne={...ht(Xe(fe,n))},v={fontSettings:{fontFamily:S,fontWeight:(R==null?void 0:R.fontWeight)??400,fontStyle:(R==null?void 0:R.fontStyle)??"normal"},fontSize:F??.01,lineHeight:N,letterSpacing:I??0,wordSpacing:B??0,textAppearance:ie,color:$},k={...ht(Xe(v,n))},K={fontSettings:{fontFamily:Q,fontWeight:(oe==null?void 0:oe.fontWeight)??400,fontStyle:(oe==null?void 0:oe.fontStyle)??"normal"},fontSize:G??.01,lineHeight:M,letterSpacing:re??0,wordSpacing:Le??0,textAppearance:ce,color:A},te={...ht(Xe(K,n))},ee=E.buildColorVars(a,{titleColor:_,subtitleColor:$,lightboxCounterColor:A},Gc,Yc),de=`${s&&s!=="default"?`${a}-state-${s}`:""}`.trim(),Se=C===0?1/0:C,ye=(t??[]).slice(0,Se),ue=p.entryWidth??.2,j=(h==null?void 0:h.display)==="Cover",Y=(h==null?void 0:h.ratioValue)??"1:1",z=(h==null?void 0:h.reversed)??!1,[le,xe]=Y.split(":").map(Number),Ce=z?xe:le,Ie=z?le:xe,Ne=`${Ce} / ${Ie}`,Ze=Ce>=Ie,ve={objectFit:j?"cover":"contain",pointerEvents:"auto",...j&&{aspectRatio:Ne,width:Ze?"100%":"auto",height:Ze?"auto":"100%"}},[ke,He]=u.useState("ltr"),[Fe,Be]=u.useState(0),Oe=u.useRef(null);u.useEffect(()=>{const Ee=Oe.current;if(!Ee)return;const Je=new ResizeObserver(Qe=>{Be(Math.round(Qe[0].contentRect.width))});return Je.observe(Ee),()=>Je.disconnect()},[]);const Yt=(()=>{const Ee={...ee},Je=Oe.current?getComputedStyle(Oe.current).getPropertyValue("--cntrl-article-width").trim():"";return Je&&(Ee["--cntrl-article-width"]=Je),Ee})(),[bt,nt]=u.useState(!1),[At,be]=u.useState([]),[lt,ct]=u.useState(0),[dt,xt]=u.useState(null),Xt=(Ee,Je,Qe)=>{if(n&&!o||m==="Off")return;const ze=Ee.currentTarget.getBoundingClientRect();xt({top:ze.top,left:ze.left,width:ze.width,height:ze.height}),be(Je),ct(Qe),nt(!0)};return u.useEffect(()=>{if(!bt||m!=="On"||typeof document>"u")return;const Ee=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=Ee}},[bt,m]),l.jsxs(l.Fragment,{children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:Kc(a)}}),l.jsx("div",{style:ee,children:l.jsx("div",{ref:Oe,className:`${a}-wrapper ${a}-type-${d} ${de}`.trim(),style:{gridTemplateColumns:`repeat(${p.columnsCount}, minmax(0, 1fr))`,rowGap:E.scalingValue(y??0,n),columnGap:E.scalingValue(p.horizontalGap??0,n),width:E.scalingValue(p.wrapperWidth??0,n)},children:ye.map((Ee,Je)=>{var Qe,ze;return l.jsx("div",{className:`${a}-item`.trim(),children:l.jsx("div",{className:i?`${a}-item-inner`:`${a}-item-inner-hidden`,style:{width:(T??0)>100?`calc(${E.scalingValue(ue??0,n)} * (${T} / 100))`:E.scalingValue(ue??0,n)},children:l.jsxs("a",{href:(((Qe=Ee.link)==null?void 0:Qe.length)??0)>0&&m==="Off"?Ee.link:void 0,target:"_blank",className:`${a}-item-image-link`,children:[l.jsx("div",{className:`${a}-item-image-wrapper`,style:{width:E.scalingValue(ue??0,n),height:E.scalingValue(ue??0,n)},children:(((ze=Ee.image)==null?void 0:ze.length)??0)===0?null:W==="Off"?l.jsx("img",{src:Ee.image[0].url,alt:Ee.image[0].name,className:`${a}-item-image`.trim(),style:ve,onClick:Ke=>Xt(Ke,Ee.image.map(me=>me.url),0)}):l.jsx(li,{className:`${a}-item-slider`,options:{arrows:!1,pagination:!1,drag:!1,perPage:1,autoplay:!0,interval:x*1e3,width:"100%",height:"100%",speed:500,type:f==="Fade"?"fade":"loop",rewind:f==="Fade",pauseOnHover:!1,pauseOnFocus:!1,direction:f==="Fade"?"ltr":b!=="Random"?b==="Horizontal"?"ltr":"ttb":ke},onMoved:Ke=>{if(b!=="Random"||f==="Fade")return;const me=Math.random()>.5?Math.random()>.5?"rtl":"ltr":Math.random()>.5?"btt":"ttb";He(me),setTimeout(()=>{Ke.refresh()},0)},children:Ee.image.map((Ke,me)=>l.jsx(ci,{children:l.jsx("img",{src:Ke.url,alt:Ke.name,className:`${a}-item-image`.trim(),style:ve,onClick:qe=>Xt(qe,Ee.image.map(Ue=>Ue.url),me)})},me))},`${f}-${ue}-${b}-${x}-${Fe}-${c}`)}),l.jsx("div",{"data-controls":i?"titleMarginTop":void 0,className:i?`${a}-control`:void 0,style:{height:E.scalingValue(O??0,n),width:E.scalingValue(ue*T/100,n)}}),l.jsx("p",{className:`${a}-item-title`.trim(),style:{width:`calc(${E.scalingValue(ue??0,n)} * (${T} / 100))`,...ne},children:Ee.title}),d==="B"&&l.jsx("div",{"data-controls":i?"subtitleMarginTop":void 0,className:i?`${a}-control`:void 0,style:{height:E.scalingValue(P??0,n),width:E.scalingValue(ue*T/100,n)}}),d==="B"&&l.jsx("p",{className:`${a}-item-subtitle`.trim(),style:{width:`calc(${E.scalingValue(ue??0,n)} * (${T} / 100))`,...k},children:Ee.subtitle})]})})},Je)})})}),(!n||o)&&bt&&typeof document<"u"&&m==="On"&&er.createPortal(l.jsx("div",{style:Yt,"data-selection":"none",children:l.jsx(qc,{images:At,index:lt,imageDisplay:h.display,originRect:dt,reverseClose:W==="Off",onClose:()=>nt(!1),onPrev:()=>ct(Ee=>(Ee-1+At.length)%At.length),onNext:()=>ct(Ee=>(Ee+1)%At.length),counterClassName:`${a}-lightbox-counter`.trim(),counterStyle:te})}),document.body)]})}const Gc={titleColor:"title-color",subtitleColor:"subtitle-color",lightboxCounterColor:"lightbox-counter-color"},Yc=["hover","focus","filled","success","error"],Xc=`import { Splide, SplideSlide } from '@splidejs/react-splide';
3727
3737
  import '@splidejs/react-splide/css/core';
3728
3738
  import { CommonComponentProps } from '../props';
3729
3739
  import { buildColorVars, getFormFieldValidationError, scalingValue, useScopedStyles } from '../utils/index';
@@ -4065,7 +4075,6 @@ function Lightbox({ images, index, imageDisplay, originRect, reverseClose, onClo
4065
4075
 
4066
4076
  export function Grid({ settings, content, isEditor, isPreviewMode, isEditMode, metadata, activeEvent, layoutId }: GridProps) {
4067
4077
  const { prefix: P } = useScopedStyles();
4068
- const showControls = Boolean(isEditMode);
4069
4078
  const {
4070
4079
  type = 'A',
4071
4080
  gridLayout,
@@ -4186,6 +4195,7 @@ export function Grid({ settings, content, isEditor, isPreviewMode, isEditMode, m
4186
4195
 
4187
4196
  const imageStyle: React.CSSProperties = {
4188
4197
  objectFit: isCover ? 'cover' : 'contain',
4198
+ pointerEvents: 'auto',
4189
4199
  ...(isCover && {
4190
4200
  aspectRatio,
4191
4201
  width: isLandscape ? '100%' : 'auto',
@@ -4327,16 +4337,16 @@ export function Grid({ settings, content, isEditor, isPreviewMode, isEditMode, m
4327
4337
  }
4328
4338
  </div>
4329
4339
  <div
4330
- data-controls="titleMarginTop"
4331
- className={\`\${P}-control\`}
4340
+ data-controls={isEditMode ? 'titleMarginTop' : undefined}
4341
+ className={isEditMode ? \`\${P}-control\` : undefined}
4332
4342
  style={{ height: scalingValue(titleMarginTop ?? 0, isEditor), width: scalingValue(size * textBoxWidth / 100, isEditor) }}
4333
4343
  />
4334
4344
  <p className={\`\${P}-item-title\`.trim()} style={{ width: \`calc(\${scalingValue(size ?? 0, isEditor)} * (\${textBoxWidth} / 100))\`, ...titleFieldCss }}>
4335
4345
  {item.title}
4336
4346
  </p>
4337
- {type === 'B' && showControls && <div
4338
- data-controls="subtitleMarginTop"
4339
- className={\`\${P}-control\`}
4347
+ {type === 'B' && <div
4348
+ data-controls={isEditMode ? 'subtitleMarginTop' : undefined}
4349
+ className={isEditMode ? \`\${P}-control\` : undefined}
4340
4350
  style={{ height: scalingValue(subtitleMarginTop ?? 0, isEditor), width: scalingValue(size * textBoxWidth / 100, isEditor) }}
4341
4351
  />}
4342
4352
  {type === 'B' && <p className={\`\${P}-item-subtitle\`.trim()} style={{ width: \`calc(\${scalingValue(size ?? 0, isEditor)} * (\${textBoxWidth} / 100))\`, ...subtitleFieldCss }}>
@@ -4434,11 +4444,11 @@ const COLOR_VAR_MAP: Record<ColorKeys, string> = {
4434
4444
  };
4435
4445
 
4436
4446
  const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
4437
- `,Ei={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},ad=["titleColor","subtitleColor","lightboxCounterColor"],sd={type:"object",version:1,content:{type:"array",settings:{addItemWithoutImage:!0},display:{type:"array",rules:[{if:{name:"type",value:"A"},then:{name:"subtitle",value:!1}}]},items:{type:"object",properties:{title:{type:"string",label:"Title",placeholder:"Add Title...",display:{type:"text-input"}},subtitle:{type:"string",label:"Subtitle",placeholder:"Add Subtitle...",display:{type:"text-input"}},image:{type:"object",label:"Image",display:{type:"media-list-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},link:{type:"string",label:"Link",placeholder:"Add link...",display:{type:"text-input"}}},required:["image"]},default:[{title:"Title 1",subtitle:"Subtitle 1",image:[{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",name:"Grid-1.png",objectFit:"cover"}],link:""},{title:"Title 2",subtitle:"Subtitle 2",image:[{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-2.png",name:"Grid-2.png",objectFit:"cover"}],link:""},{title:"Title 3",subtitle:"Subtitle 3",image:[{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-3.png",name:"Grid-3.png",objectFit:"cover"}],link:""}]},settings:{sizing:"auto auto",properties:{type:{type:"string",scope:"common",title:"",display:{type:"radio-group"},enum:["A","B"]},gridLayout:{type:"grid-layout",scope:"layout",display:{type:"grid-layout"},gridParams:{type:"object",properties:{columnsCount:{type:"number",title:"Columns",min:1,max:4},wrapperWidth:{type:"number",title:"Width",min:0},entryWidth:{type:"number",title:"Entry",min:0},horizontalGap:{type:"number",title:"Gap",min:0}}}},textBoxWidth:{type:"number",scope:"layout",title:"Text Width (%)",display:{type:"percentage-input"},min:0},verticalGap:{type:"number",scope:"layout",title:"Vertical Gap",display:{type:"numeric-input"},min:0,max:1e3},entriesCount:{type:"number",scope:"layout",title:"Entries #",display:{type:"toggle-numeric-input",enum:["Auto","Fixed"]},min:1},lightbox:{type:"boolean",scope:"common",title:"Lightbox",display:{type:"toggle-cycle",enum:["On","Off"]}},imageDisplay:{type:"object",scope:"common",title:"Display",display:{type:"image-ratio-control"},properties:{display:{type:"string",enum:["Fit","Cover"]},ratioValue:{type:"string",enum:["1:1","2:3","3:4","4:5","16:9"]},reversed:{type:"boolean"}}},slider:{type:"boolean",scope:"common",title:"Slider",display:{type:"toggle-cycle",enum:["On","Off"]}},sliderTiming:{type:"number",scope:"common",title:"Timing (Sec)",display:{type:"common-numeric-input"},min:1,max:10},direction:{type:"string",scope:"common",title:"Direction",display:{type:"toggle-cycle",enum:["Horizontal","Vertical","Random"],enabled:!0}},transition:{type:"string",scope:"common",title:"Transition",display:{type:"toggle-cycle",enum:["Fade","Slide"]}},titleMarginTop:{type:"number",scope:"layout",title:"Title margin top",min:0,max:100,display:{type:"range-control"}},subtitleMarginTop:{type:"number",scope:"layout",title:"Subtitle margin top",min:0,max:100,display:{type:"range-control"}},titleColor:{type:"string",scope:"common",title:"Title Color",display:{type:"palette-color-picker"}},subtitleColor:{type:"string",scope:"common",title:"Subtitle Color",display:{type:"palette-color-picker",visible:!1}},lightboxCounterColor:{type:"string",scope:"common",title:"Lightbox Counter Color",display:{type:"palette-color-picker"}},titleFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},titleFontSettings:{...Ei.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},titleFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},titleLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},titleLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},titleWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},titleTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}},subtitleFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},subtitleFontSettings:{...Ei.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},subtitleFontSize:{type:"number",scope:"layout",title:"Subtitle Font Size",display:{type:"font-size"}},subtitleLineHeight:{type:"number",scope:"layout",title:"Subtitle Line Height",display:{type:"line-height-input"}},subtitleLetterSpacing:{type:"number",scope:"layout",title:"Subtitle Letter Spacing",display:{type:"letter-spacing-input"}},subtitleWordSpacing:{type:"number",scope:"layout",title:"Subtitle Word Spacing",display:{type:"word-spacing-input"}},subtitleTextAppearance:{type:"object",scope:"layout",title:"Subtitle Text Appearance",display:{type:"text-appearance"}},lightboxCounterFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},lightboxCounterFontSettings:{...Ei.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},lightboxCounterFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},lightboxCounterLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},lightboxCounterLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},lightboxCounterWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},lightboxCounterTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}}},defaults:{lightbox:"Off",imageDisplay:{display:"Fit",ratioValue:"16:9",reversed:!1},type:"A",slider:"Off",sliderTiming:5,direction:"Horizontal",transition:"Slide",titleColor:"#767676",subtitleColor:"#DEDDDD",lightboxCounterColor:"#DEDDDD",titleFontFamily:"Arial",titleFontSettings:{fontWeight:400,fontStyle:"normal"},titleLetterSpacing:0,titleWordSpacing:0,titleTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},subtitleFontFamily:"Arial",subtitleFontSettings:{fontWeight:400,fontStyle:"normal"},subtitleLetterSpacing:0,subtitleWordSpacing:0,subtitleTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},lightboxCounterFontFamily:"Arial",lightboxCounterFontSettings:{fontWeight:400,fontStyle:"normal"},lightboxCounterLetterSpacing:0,lightboxCounterWordSpacing:0,lightboxCounterTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{gridLayout:{entryWidth:.2,horizontalGap:.05,wrapperWidth:1,columnsCount:2,lockedParam:null},textBoxWidth:100,verticalGap:.0083,entriesCount:0,titleMarginTop:.02,subtitleMarginTop:.02,titleStroke:.003,titleCorners:.192,subtitlePadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},titlePadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},titleFontSize:.043,titleLineHeight:.043,subtitleFontSize:.0373,subtitleLineHeight:.0373,lightboxCounterFontSize:.0373,lightboxCounterLineHeight:.0373},d:{gridLayout:{entryWidth:.2,horizontalGap:.05,wrapperWidth:1,columnsCount:2,lockedParam:null},textBoxWidth:100,verticalGap:.0083,entriesCount:0,titleMarginTop:.008,subtitleMarginTop:.008,titleStroke:.001,titleCorners:.05,subtitlePadding:{top:.01,right:.01,bottom:.01,left:.01},titlePadding:{top:.01,right:.01,bottom:.01,left:.01},titleFontSize:.01,titleLineHeight:.01,subtitleFontSize:.01,subtitleLineHeight:.01,lightboxCounterFontSize:.01,lightboxCounterLineHeight:.01}},displayRules:[{if:{name:"transition",value:"Fade"},then:{name:"properties.direction.display.enabled",value:!1}},{if:{name:"type",value:"B"},then:{name:"properties.subtitleColor.display.visible",value:!0}}],layout:["__componentName__","name","type","gridLayout","textBoxWidth","verticalGap","entriesCount","lightbox","imageDisplay","slider","sliderTiming","direction","transition","transition","titleMarginTop","subtitleMarginTop"]},panels:[{id:"general",icon:"cursor",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name"]},"type",{type:"row",title:"Grid",items:[{type:"group",title:"",items:["gridLayout"]}]},{type:"row",title:"",items:["textBoxWidth","entriesCount"]},{type:"row",title:"",items:["verticalGap"]},{type:"row",title:"Image",items:["imageDisplay","lightbox"]},{type:"row",title:"Slider",items:[{type:"group",title:"",items:["slider","sliderTiming"]},{type:"group",title:"",items:["direction","transition"]}]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[{type:"group",title:"Title",items:["titleFontFamily","titleFontSettings",{type:"row",items:["titleFontSize","titleLineHeight","titleLetterSpacing","titleWordSpacing"]},"titleTextAppearance"]},{type:"group",title:"Subtitle",items:["subtitleFontFamily","subtitleFontSettings",{type:"row",items:["subtitleFontSize","subtitleLineHeight","subtitleLetterSpacing","subtitleWordSpacing"]},"subtitleTextAppearance"]},{type:"group",title:"Lightbox Counter",items:["lightboxCounterFontFamily","lightboxCounterFontSettings",{type:"row",items:["lightboxCounterFontSize","lightboxCounterLineHeight","lightboxCounterLetterSpacing","lightboxCounterWordSpacing"]},"lightboxCounterTextAppearance"]}]}],paletteBookmark:{items:[...ad],panelIds:["general","typeStyle"],stateItems:{default:["titleColor","subtitleColor","lightboxCounterColor"]}}},ld={element:nd,id:"grid",name:"Neptune",category:"grids",layoutMode:"structured",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Neptune_Grid.png"},version:1,defaultSize:{d:{width:720,height:540}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},schema:sd,sourceCode:rd};function Qn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function cd(e){return String(e??"").trim().length>0}function dd(e,t,n,i,a,s,o){const d=E.scalingValue(s,o),l=E.scalingValue(0,o),u=e===0,p=e===t-1&&!a;return{borderTopWidth:u&&n?d:l,borderBottomWidth:!p||i?d:l}}function ud(e,t,n){const i=E.scalingValue(t,n),a=E.scalingValue(0,n);return{borderTopWidth:a,borderBottomWidth:e?i:a}}const Ko=10;function pd(e){return`
4447
+ `,Po={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},Zc=["titleColor","subtitleColor","lightboxCounterColor"],Jc={type:"object",version:1,content:{type:"array",settings:{addItemWithoutImage:!0},display:{type:"array",rules:[{if:{name:"type",value:"A"},then:{name:"subtitle",value:!1}}]},items:{type:"object",properties:{title:{type:"string",label:"Title",placeholder:"Add Title...",display:{type:"text-input"}},subtitle:{type:"string",label:"Subtitle",placeholder:"Add Subtitle...",display:{type:"text-input"}},image:{type:"object",label:"Image",display:{type:"media-list-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},link:{type:"string",label:"Link",placeholder:"Add link...",display:{type:"text-input"}}},required:["image"]},default:[{title:"Title 1",subtitle:"Subtitle 1",image:[{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",name:"Grid-1.png",objectFit:"cover"}],link:""},{title:"Title 2",subtitle:"Subtitle 2",image:[{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-2.png",name:"Grid-2.png",objectFit:"cover"}],link:""},{title:"Title 3",subtitle:"Subtitle 3",image:[{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-3.png",name:"Grid-3.png",objectFit:"cover"}],link:""}]},settings:{sizing:"auto auto",properties:{type:{type:"string",scope:"common",title:"",display:{type:"radio-group"},enum:["A","B"]},gridLayout:{type:"grid-layout",scope:"layout",display:{type:"grid-layout"},gridParams:{type:"object",properties:{columnsCount:{type:"number",title:"Columns",min:1,max:4},wrapperWidth:{type:"number",title:"Width",min:0},entryWidth:{type:"number",title:"Entry",min:0},horizontalGap:{type:"number",title:"Gap",min:0}}}},textBoxWidth:{type:"number",scope:"layout",title:"Text Width (%)",display:{type:"percentage-input"},min:0},verticalGap:{type:"number",scope:"layout",title:"Vertical Gap",display:{type:"numeric-input"},min:0,max:1e3},entriesCount:{type:"number",scope:"layout",title:"Entries #",display:{type:"toggle-numeric-input",enum:["Auto","Fixed"]},min:1},lightbox:{type:"boolean",scope:"common",title:"Lightbox",display:{type:"toggle-cycle",enum:["On","Off"]}},imageDisplay:{type:"object",scope:"common",title:"Display",display:{type:"image-ratio-control"},properties:{display:{type:"string",enum:["Fit","Cover"]},ratioValue:{type:"string",enum:["1:1","2:3","3:4","4:5","16:9"]},reversed:{type:"boolean"}}},slider:{type:"boolean",scope:"common",title:"Slider",display:{type:"toggle-cycle",enum:["On","Off"]}},sliderTiming:{type:"number",scope:"common",title:"Timing (Sec)",display:{type:"common-numeric-input"},min:1,max:10},direction:{type:"string",scope:"common",title:"Direction",display:{type:"toggle-cycle",enum:["Horizontal","Vertical","Random"],enabled:!0}},transition:{type:"string",scope:"common",title:"Transition",display:{type:"toggle-cycle",enum:["Fade","Slide"]}},titleMarginTop:{type:"number",scope:"layout",title:"Title margin top",min:0,max:100,display:{type:"range-control"}},subtitleMarginTop:{type:"number",scope:"layout",title:"Subtitle margin top",min:0,max:100,display:{type:"range-control"}},titleColor:{type:"string",scope:"common",title:"Title Color",display:{type:"palette-color-picker"}},subtitleColor:{type:"string",scope:"common",title:"Subtitle Color",display:{type:"palette-color-picker",visible:!1}},lightboxCounterColor:{type:"string",scope:"common",title:"Lightbox Counter Color",display:{type:"palette-color-picker"}},titleFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},titleFontSettings:{...Po.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},titleFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},titleLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},titleLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},titleWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},titleTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}},subtitleFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},subtitleFontSettings:{...Po.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},subtitleFontSize:{type:"number",scope:"layout",title:"Subtitle Font Size",display:{type:"font-size"}},subtitleLineHeight:{type:"number",scope:"layout",title:"Subtitle Line Height",display:{type:"line-height-input"}},subtitleLetterSpacing:{type:"number",scope:"layout",title:"Subtitle Letter Spacing",display:{type:"letter-spacing-input"}},subtitleWordSpacing:{type:"number",scope:"layout",title:"Subtitle Word Spacing",display:{type:"word-spacing-input"}},subtitleTextAppearance:{type:"object",scope:"layout",title:"Subtitle Text Appearance",display:{type:"text-appearance"}},lightboxCounterFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},lightboxCounterFontSettings:{...Po.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},lightboxCounterFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},lightboxCounterLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},lightboxCounterLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},lightboxCounterWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},lightboxCounterTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}}},defaults:{lightbox:"Off",imageDisplay:{display:"Fit",ratioValue:"16:9",reversed:!1},type:"A",slider:"Off",sliderTiming:5,direction:"Horizontal",transition:"Slide",titleColor:"#767676",subtitleColor:"#DEDDDD",lightboxCounterColor:"#DEDDDD",titleFontFamily:"Arial",titleFontSettings:{fontWeight:400,fontStyle:"normal"},titleLetterSpacing:0,titleWordSpacing:0,titleTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},subtitleFontFamily:"Arial",subtitleFontSettings:{fontWeight:400,fontStyle:"normal"},subtitleLetterSpacing:0,subtitleWordSpacing:0,subtitleTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},lightboxCounterFontFamily:"Arial",lightboxCounterFontSettings:{fontWeight:400,fontStyle:"normal"},lightboxCounterLetterSpacing:0,lightboxCounterWordSpacing:0,lightboxCounterTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{gridLayout:{entryWidth:.2,horizontalGap:.05,wrapperWidth:1,columnsCount:2,lockedParam:null},textBoxWidth:100,verticalGap:.0083,entriesCount:0,titleMarginTop:.02,subtitleMarginTop:.02,titleStroke:.003,titleCorners:.192,subtitlePadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},titlePadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},titleFontSize:.043,titleLineHeight:.043,subtitleFontSize:.0373,subtitleLineHeight:.0373,lightboxCounterFontSize:.0373,lightboxCounterLineHeight:.0373},d:{gridLayout:{entryWidth:.2,horizontalGap:.05,wrapperWidth:1,columnsCount:2,lockedParam:null},textBoxWidth:100,verticalGap:.0083,entriesCount:0,titleMarginTop:.008,subtitleMarginTop:.008,titleStroke:.001,titleCorners:.05,subtitlePadding:{top:.01,right:.01,bottom:.01,left:.01},titlePadding:{top:.01,right:.01,bottom:.01,left:.01},titleFontSize:.01,titleLineHeight:.01,subtitleFontSize:.01,subtitleLineHeight:.01,lightboxCounterFontSize:.01,lightboxCounterLineHeight:.01}},displayRules:[{if:{name:"transition",value:"Fade"},then:{name:"properties.direction.display.enabled",value:!1}},{if:{name:"type",value:"B"},then:{name:"properties.subtitleColor.display.visible",value:!0}}],layout:["__componentName__","name","type","gridLayout","textBoxWidth","verticalGap","entriesCount","lightbox","imageDisplay","slider","sliderTiming","direction","transition","transition","titleMarginTop","subtitleMarginTop"]},panels:[{id:"general",icon:"cursor",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name"]},"type",{type:"row",title:"Grid",items:[{type:"group",title:"",items:["gridLayout"]}]},{type:"row",title:"",items:["textBoxWidth","entriesCount"]},{type:"row",title:"",items:["verticalGap"]},{type:"row",title:"Image",items:["imageDisplay","lightbox"]},{type:"row",title:"Slider",items:[{type:"group",title:"",items:["slider","sliderTiming"]},{type:"group",title:"",items:["direction","transition"]}]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[{type:"group",title:"Title",items:["titleFontFamily","titleFontSettings",{type:"row",items:["titleFontSize","titleLineHeight","titleLetterSpacing","titleWordSpacing"]},"titleTextAppearance"]},{type:"group",title:"Subtitle",items:["subtitleFontFamily","subtitleFontSettings",{type:"row",items:["subtitleFontSize","subtitleLineHeight","subtitleLetterSpacing","subtitleWordSpacing"]},"subtitleTextAppearance"]},{type:"group",title:"Lightbox Counter",items:["lightboxCounterFontFamily","lightboxCounterFontSettings",{type:"row",items:["lightboxCounterFontSize","lightboxCounterLineHeight","lightboxCounterLetterSpacing","lightboxCounterWordSpacing"]},"lightboxCounterTextAppearance"]}]}],paletteBookmark:{items:[...Zc],panelIds:["general","typeStyle"],stateItems:{default:["titleColor","subtitleColor","lightboxCounterColor"]}}},Qc={element:Uc,id:"grid",name:"Neptune",category:"grids",layoutMode:"structured",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Neptune_Grid.png"},version:1,defaultSize:{d:{width:720,height:540}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},schema:Jc,sourceCode:Xc};function Jn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function ed(e){return String(e??"").trim().length>0}function td(e,t,n,o,i,r,s){const c=E.scalingValue(r,s),a=E.scalingValue(0,s),d=e===0,p=e===t-1&&!i;return{borderTopWidth:d&&n?c:a,borderBottomWidth:!p||o?c:a}}function nd(e,t,n){const o=E.scalingValue(t,n),i=E.scalingValue(0,n);return{borderTopWidth:i,borderBottomWidth:e?o:i}}const ji=10;function od(e){return`
4438
4448
  .${e}-wrapper {
4439
4449
  display: grid;
4440
4450
  align-items: start;
4441
- min-height: ${Qn(48)};
4451
+ min-height: ${Jn(48)};
4442
4452
  position: relative;
4443
4453
  overflow: visible;
4444
4454
  box-sizing: border-box;
@@ -4560,7 +4570,7 @@ a.${e}-list-item {
4560
4570
  flex-shrink: 0;
4561
4571
  overflow: visible;
4562
4572
  box-sizing: border-box;
4563
- min-width: ${Qn(50)};
4573
+ min-width: ${Jn(50)};
4564
4574
  position: relative;
4565
4575
  display: flex;
4566
4576
  align-items: flex-start;
@@ -4568,7 +4578,7 @@ a.${e}-list-item {
4568
4578
 
4569
4579
  .${e}-list-col-last {
4570
4580
  flex: 1 1 auto;
4571
- min-width: ${Qn(50)};
4581
+ min-width: ${Jn(50)};
4572
4582
  }
4573
4583
 
4574
4584
  .${e}-list-col-title {
@@ -4637,6 +4647,12 @@ a.${e}-list-item {
4637
4647
  transform: translateY(-50%);
4638
4648
  }
4639
4649
 
4650
+ .${e}-wrapper.${e}-type-b .${e}-padding-control-handle[data-controls-variant="row-padding"][data-controls-axis="y"]::after,
4651
+ .${e}-wrapper.${e}-type-b .${e}-padding-control-handle[data-controls-variant="column-padding"][data-controls-axis="y"]::after {
4652
+ left: 50%;
4653
+ transform: translate(-50%, -50%);
4654
+ }
4655
+
4640
4656
  .${e}-row-padding-handle {
4641
4657
  width: 100%;
4642
4658
  flex-shrink: 0;
@@ -4799,7 +4815,7 @@ a.${e}-list-item {
4799
4815
  overflow-wrap: anywhere;
4800
4816
  word-break: break-word;
4801
4817
  }
4802
- `}const kt=["AColumn","BColumnWidth","CColumnWidth","DColumnWidth","EColumnWidth"],po=["AColumn","BColumn","CColumn","DColumn","EColumn"],Lt="cutLabel",bi=[...po,Lt],mo=["A","B","C","D","E"];function Gr(e){return`${e}ColumnVerticalAlign`}const ji=["Top","Center","Bottom"];function md(e){const t=String(e??"Top").trim();return t.toLowerCase().startsWith("baseline")?!1:t==="Top"||t==="Center"||t==="Bottom"}function gd(e){const t=String(e??"").trim();if(!t.toLowerCase().startsWith("baseline"))return null;const n=t.slice(-1).toUpperCase();return mo.includes(n)?n:null}function qr(e,t,n){const i=gd(e);return i?i===t?!1:md(n[Gr(i)]):!0}function Tn(e){const t=String(e??"Top").trim();if(t.toLowerCase().startsWith("baseline")){const n=t.slice(-1).toUpperCase();return mo.includes(n)?{kind:"baseline",anchorLetter:n}:{kind:"top"}}return t==="Center"?{kind:"center"}:t==="Bottom"?{kind:"bottom"}:{kind:"top"}}function hd(e,t,n){if(Ur(e,t,n))return Tn(e);const i=Tn(e);return i.kind==="baseline"?{kind:"top"}:i}function fd(e){const t=Tn(e);return t.kind==="baseline"?{kind:"top"}:t}function Ur(e,t,n){return qr(e,n,t)?Tn(e).kind==="baseline":!1}function yd(e){const t={};let n=!1;for(const i of mo){const a=Gr(i),s=e[a];if(e.type==="B"){const o=String(s??"Top").trim();o!=="Top"&&o!=="Center"&&o!=="Bottom"&&(t[a]="Top",n=!0);continue}qr(s,i,e)||(t[a]="Top",n=!0)}return n?t:null}function vd(e){return e==="center"?{flex:"0 0 auto",marginTop:"auto",marginBottom:"auto"}:e==="bottom"?{flex:"0 0 auto",marginTop:"auto"}:{}}function bd(e){const t=Tn(e).kind;return t==="baseline"?"center":t}function xd(e){return e==="right"?"flex-end":e==="center"?"center":"flex-start"}function Go(e){return e==="center"?"center":e==="bottom"?"flex-end":"flex-start"}function Cd(e,t){const n=document.createElement("i");n.className=t,n.setAttribute("aria-hidden","true"),e.prepend(n);const{top:i}=e.getBoundingClientRect(),{bottom:a}=n.getBoundingClientRect(),s=a-i;return n.remove(),s}function Ii(e,t,n,i){const a=e.titleEl;if(!a)return 0;const s=a.closest(`.${n}`);if(!s)return 0;const o=Cd(a,i);if(e.kind==="baseline")return a.getBoundingClientRect().top-t+o;const d=s.getBoundingClientRect(),l=a.getBoundingClientRect().height;let u=0;return e.kind==="center"?u=(d.height-l)/2:e.kind==="bottom"&&(u=d.height-l),d.top-t+u+o}function Sd(e,t,n){const i=e.getBoundingClientRect().height;return i<=0?0:(t.forEach(a=>{const s=a.querySelector(`.${n}`);s&&(s.style.minHeight=`${i}px`,s.style.height=`${i}px`)}),e.offsetHeight,i)}function wd(e,t){return!e||!t?(e&&(e.style.transform=""),0):(e.style.transform=`translateY(${t}px)`,t)}const $d={AColumn:"AColumn",BColumnWidth:"BColumn",CColumnWidth:"CColumn",DColumnWidth:"DColumn",EColumnWidth:"EColumn"};function Pe(e,t){return`${e}${t.replace(/^text/,"Text")}`}const Td={AColumn:"A",BColumn:"B",CColumn:"C",DColumn:"D",EColumn:"E",cutLabel:"CUT"};function Ld(e){return[Pe(e,"textFontFamily"),Pe(e,"textFontSettings"),{type:"row",items:[Pe(e,"textFontSize"),Pe(e,"textLineHeight"),Pe(e,"textLetterSpacing"),Pe(e,"textWordSpacing")]},Pe(e,"textTextAlign"),Pe(e,"textTextAppearance"),`${e}VerticalAlign`]}function Ed(){return{type:"tab",id:"listColumnTextStyle",tabs:Object.fromEntries(bi.map(e=>[Td[e],Ld(e)]))}}function si(e,t){const n=i=>{const a=Pe(t,i);return e[a]};return{textFontFamily:n("textFontFamily")??"Arial",textFontSettings:n("textFontSettings")??{fontWeight:400,fontStyle:"normal"},textFontSize:n("textFontSize"),textLineHeight:n("textLineHeight"),textLetterSpacing:n("textLetterSpacing")??0,textWordSpacing:n("textWordSpacing")??0,textTextAlign:n("textTextAlign")??(t===Lt?"center":"left"),textTextAppearance:n("textTextAppearance"),textColor:e.textColor}}function qo(e,t){var i,a;const n={fontSettings:{fontFamily:e.textFontFamily,fontWeight:((i=e.textFontSettings)==null?void 0:i.fontWeight)??400,fontStyle:((a=e.textFontSettings)==null?void 0:a.fontStyle)??"normal"},fontSize:e.textFontSize??.01,lineHeight:e.textLineHeight,letterSpacing:e.textLetterSpacing,wordSpacing:e.textWordSpacing,textAlign:e.textTextAlign,textAppearance:e.textTextAppearance,color:e.textColor??"#767676"};return ft(Ue(n,t))}function Uo(e,t,n,i){const a=si(e,t),s=a.textFontSize??.01,o=a.textLineHeight;return o!==void 0&&o<s?`${n} ${i}`:n}function Xo(e,t,n,i){const a=si(e,t),s=a.textFontSize??.01,o=a.textLineHeight;return o===void 0||o>=s?{}:{[`--${n}-title-leading-gap`]:E.scalingValue((s-o)/2,i)}}const lt=["AColumnWidth","BColumnWidth","CColumnWidth","DColumnWidth","EColumnWidth"],ln=["AColumnPaddingLeft","BColumnPaddingLeft","CColumnPaddingLeft","DColumnPaddingLeft","EColumnPaddingLeft"],cn=["AColumnPaddingRight","BColumnPaddingRight","CColumnPaddingRight","DColumnPaddingRight","EColumnPaddingRight"],dn=["AColumnPaddingBottom","BColumnPaddingBottom","CColumnPaddingBottom","DColumnPaddingBottom","EColumnPaddingBottom"],Id={textColor:"text-color",backgroundColor:"background-color",dividerColor:"divider-color",textHoverColor:"text-hover-color",backgroundHoverColor:"background-hover-color",dividerHoverColor:"divider-hover-color"},Pd=["hover","focus","filled","success","error"],Yo=.004,Qt=.004,Pi=Qt,Jo=12,go=50,Ln=1440,En=go/Ln;function Xr(e){const t=typeof e=="number"&&e>0?e:Ln;return go/t}function Rd(e,t){const n={position:"absolute",width:Jo,height:Jo,pointerEvents:"auto"};return t==="left-y"?{...n,left:20,top:"50%",transform:"translateY(-50%)"}:t==="center-x"?{...n,left:"50%",top:`var(--${e}-first-entry-handle-top, 50%)`,transform:"translate(-50%, -50%)"}:{...n,left:"50%",top:"50%",transform:"translate(-50%, -50%)"}}function Ct({P:e,className:t,areaStyle:n,hitPlacement:i,...a}){return r.jsx("div",{className:t,style:{...n,pointerEvents:"none"},...a,children:r.jsx("div",{style:Rd(e,i)})})}function Ad(e){let t=e??null;for(;t;){const n=t.style.getPropertyValue("--cntrl-article-width").trim();if(n){const a=parseFloat(n);if(Number.isFinite(a)&&a>0)return a}const i=getComputedStyle(t).getPropertyValue("--cntrl-article-width").trim();if(i){const a=parseFloat(i);if(Number.isFinite(a)&&a>0)return a}t=t.parentElement}return Ln}const Yr={AColumnWidth:.02,BColumnWidth:.02,CColumnWidth:.02,DColumnWidth:.02,EColumnWidth:.02};function ei(e){const t=typeof e.wrapperWidth=="number"?e.wrapperWidth:1;return Math.max(0,t)}function Md(e,t=1){const n=t/e;return Object.fromEntries(lt.map(i=>[i,n]))}function _d(){return Object.fromEntries([...ln.map(e=>[e,0]),...cn.map(e=>[e,0])])}function Wd(){return Object.fromEntries(dn.map(e=>[e,0]))}function qn(e){return Object.fromEntries(lt.map(t=>[t,typeof e[t]=="number"?e[t]:Yr[t]]))}function Jr(e,t,n){const i=e-En,a=t+n;if(a<=0||a<=i)return{paddingLeft:t,paddingRight:n};if(i<=0)return{paddingLeft:0,paddingRight:0};const s=i/a;return{paddingLeft:t*s,paddingRight:n*s}}function ti(e,t,n){const i=ho(e,t,n);if(e<=0)return[];const a=i.slice(0,e-1).reduce((s,o)=>s+o,0);return[...i.slice(0,e-1),Math.max(0,t-a)]}function kd(e,t,n){const i={};for(let a=0;a<e;a+=1){const s=ln[a],o=cn[a],d=typeof n[s]=="number"?n[s]:0,l=typeof n[o]=="number"?n[o]:0,u=Jr(t[a]??0,d,l);u.paddingLeft!==d&&(i[s]=u.paddingLeft),u.paddingRight!==l&&(i[o]=u.paddingRight)}return i}function ho(e,t,n){if(e<=0)return[];const i=lt.slice(0,e).map(u=>n[u]);if(e===1)return i;const a=i.slice(0,e-1),o=a.reduce((u,p)=>u+p,0)+En;if(t>=o)return i;const d=[...a];let l=o-t;for(let u=d.length-1;u>=0&&l>0;u-=1){const p=d[u]-En;if(p<=0)continue;const I=Math.min(l,p);d[u]-=I,l-=I}return[...d,i[e-1]]}function Fd(e,t,n){if(e<=1)return{};const i=ho(e,t,n),a={};for(let s=0;s<e-1;s+=1){const o=lt[s];i[s]!==n[o]&&(a[o]=i[s])}return a}function Zo(e){return Array.isArray(e.columnsOrder)&&e.columnsOrder.length>0?e.columnsOrder:[...kt]}function Nd(e,t){return e.length!==t.length?!1:e.every((n,i)=>n===t[i])}function Hd(e,t,n,i){const a=Math.min(i,e.length,lt.length),s={};for(let o=0;o<a;o+=1){const d=e[o],l=t.indexOf(d);if(l===-1)continue;const u=lt[l],p=ln[l],I=cn[l],b=dn[l],w=lt[o],f=ln[o],h=cn[o],T=dn[o],L=n[u],C=n[p],m=n[I],z=n[b];typeof L=="number"&&(s[w]=L),typeof C=="number"&&(s[f]=C),typeof m=="number"&&(s[h]=m),typeof z=="number"&&(s[T]=z)}return s}function Bd(e,t,n){const i=yd(e);i&&(e={...e,...i});const a=Xr(n==null?void 0:n.designWidth),s=e.columns,o=t.columns,d=ei(e),l=ei(t),u=e.type==="B"||e.type===void 0&&t.type==="B",p=typeof s=="number"?s:typeof o=="number"?o:kt.length,I=m=>{if(u)return m;const z=qn({...t,...m}),j=ei(m),R=ti(p,j,z),x=kd(p,R,{...t,...m});return Object.keys(x).length===0?m:{...m,...x}};if(typeof s=="number"&&s!==o){const m={...e,...Md(s,d),..._d()};if(u)for(const z of dn)typeof t[z]=="number"&&(m[z]=t[z]);else Object.assign(m,Wd());return m}const b=Zo(e),w=Zo(t);if(!Nd(b,w))return I({...e,...Hd(b,w,t,p)});if(d<l&&typeof p=="number"&&!u){const m=qn({...t,...e});return I({...e,...Fd(p,d,m)})}if(u){const m=typeof e.textPaddingLR=="number"?e.textPaddingLR:0,z=Math.max(0,(d-a)/2);return m>z?{...e,textPaddingLR:z}:e}const f=qn({...t,...e}),h=ti(p,l,qn(t)),L=ti(p,d,f).some((m,z)=>m<(h[z]??m)),C=lt.some(m=>{const z=e[m],j=t[m];return typeof z=="number"&&typeof j=="number"&&z!==j});return L||C?I(e):e}function Od(e,t,n,i){const a=t.slice(0,e).reduce((o,d)=>o+d,0),s=n.slice(e+1,t.length-1).reduce((o,d)=>o+d,0);return Math.max(En,i-a-s-En)}function jd(e,t){return Math.random()*(t-e)+e}function Dd(e){return Object.fromEntries(lt.map(t=>[t,typeof e[t]=="number"?e[t]:Yr[t]]))}function Ri(e,t,n=0){return Object.fromEntries(t.map(i=>[i,typeof e[i]=="number"?e[i]:n]))}function Vd(e,t,n,i,a,s){return e.slice(0,t).map((o,d)=>{const l=ln[d],u=cn[d],p=dn[d];return{key:o,textPrefix:$d[o],widthKey:lt[d],width:n[lt[d]],paddingLeftKey:l,paddingRightKey:u,paddingBottomKey:p,paddingLeft:i[l],paddingRight:a[u],paddingBottom:s[p]}})}function zd({settings:e,content:t,isEditor:n,isPreviewMode:i,isEditMode:a,activeEvent:s,layoutId:o,onUpdateSettings:d}){const{prefix:l}=E.useScopedStyles(),u=!!a,{columns:p,type:I,wrapperWidth:b,entriesCount:w,cellMinHeight:f,dividerWidth:h,showVisibility:T,cut:L,showCut:C,cutCellMinHeight:m,cutLabel:z,imageSize:j,imageOnHover:R,entryHoverEffect:x,rowPaddingTop:A,rowPaddingBottom:S,rowPaddingTopB:K,columnsOrder:v,textPaddingLR:D,textColor:W,backgroundColor:q,dividerColor:G,textHoverColor:$,backgroundHoverColor:H,dividerHoverColor:_}=e,[B,k]=c.useState(void 0),[P,te]=c.useState(null),ae=R==="On"&&(!n||i),re=(L??0)>0,U=I==="B",N=c.useRef(null),oe=c.useRef(null),[ye,ce]=c.useState(null),[ge,we]=c.useState(Ln),ee=Xr(ge),y=Math.max(0,((b??0)-ee)/2),g=Math.min(D??0,y),V=Math.max(g,Qt),J=((b??0)+ee)/2;c.useLayoutEffect(()=>{if(!n){we(Ln);return}const ue=()=>{we(Ad(N.current))};ue();const be=N.current;if(!be)return;const Ce=new ResizeObserver(ue);Ce.observe(be);let Ne=be;for(;Ne&&!Ne.style.getPropertyValue("--cntrl-article-width");)Ne=Ne.parentElement;return Ne&&Ce.observe(Ne),()=>Ce.disconnect()},[n,o]),c.useEffect(()=>{k(void 0)},[L,C,t,w]);const Q=E.buildColorVars(l,{textColor:W,backgroundColor:q,dividerColor:G,textHoverColor:$,backgroundHoverColor:H,dividerHoverColor:_},Id,Pd),M=s&&s!=="default"?`${l}-state-${s}`:"",O=`${x==="Default"?`${l}-entry-hover-default`:x==="Blinds"?`${l}-entry-hover-blinds`:""} ${M}`.trim(),ie=(T==null?void 0:T[0])??!1,pe=(T==null?void 0:T[1])??!1,le=c.useRef(e),he=c.useRef(o);c.useEffect(()=>{if(!d||!n){le.current=e,he.current=o;return}if(he.current!==o){le.current=e,he.current=o;return}const ue=le.current;if(!(ue!==e))return;const Ce=Bd(e,ue,{designWidth:ge});le.current=e,Ce!==e&&d(Ce)},[e,d,n,o,ge]);const Y=c.useMemo(()=>Dd(e),[e.AColumnWidth,e.BColumnWidth,e.CColumnWidth,e.DColumnWidth,e.EColumnWidth]),Z=c.useMemo(()=>Ri(e,ln),[e.AColumnPaddingLeft,e.BColumnPaddingLeft,e.CColumnPaddingLeft,e.DColumnPaddingLeft,e.EColumnPaddingLeft]),X=c.useMemo(()=>Ri(e,cn),[e.AColumnPaddingRight,e.BColumnPaddingRight,e.CColumnPaddingRight,e.DColumnPaddingRight,e.EColumnPaddingRight]),se=c.useMemo(()=>Ri(e,dn),[e.AColumnPaddingBottom,e.BColumnPaddingBottom,e.CColumnPaddingBottom,e.DColumnPaddingBottom,e.EColumnPaddingBottom]),Te=c.useMemo(()=>Array.isArray(v)&&v.length>0?v:[...kt],[v]),Le=c.useMemo(()=>Vd(Te,p,Y,Z,X,se),[Te,p,Y,Z,X,se]),Oe=ei(e),ve=c.useMemo(()=>lt.slice(0,p).map(ue=>Y[ue]),[p,Y]),ke=c.useMemo(()=>ho(p,Oe,Y),[p,Oe,Y]),_e=c.useMemo(()=>ti(p,Oe,Y),[p,Oe,Y]),Ae=c.useMemo(()=>Le.map((ue,be)=>Jr(_e[be]??0,ue.paddingLeft,ue.paddingRight)),[Le,_e]),Ve=c.useMemo(()=>{const ue=w===0?1/0:w;return(t??[]).slice(0,ue).map((Ce,Ne)=>({id:Ne,cells:Object.fromEntries(kt.map(nt=>[nt,Ce[nt]??""])),image:Ce.image,link:Ce.link}))},[t,w]),me=re?B??L:Ve.length,$e=c.useMemo(()=>re?Ve.slice(0,me):Ve,[Ve,re,me]),Fe=re&&me<Ve.length,Me=$e.length>1||Fe,Ye=[ie?`${l}-divider-top`:"",pe||Me?`${l}-divider-bottom`:""].filter(Boolean).join(" "),Be=()=>{const ue=B??L;if(!C){k(Ve.length);return}k(Math.min(ue+C,Ve.length))},fe=ue=>E.scalingValue(ue,n??!1),Xe=U?K??0:A??0,Je=S??0,Ge=f??0,mt=(Xe+Ge+Je)/2,Bt=Math.max(Je,Pi),Pt=ye!=null?`${ye/2}px`:fe(mt),Ot=U?"rowPaddingTopB":"rowPaddingTop",Re=Le[0],Ze=Le[Le.length-1],xe=Ae[0],je=Ae[Ae.length-1],qe=Re&&xe?Math.max(xe.paddingLeft,Qt):0,ze=Ze&&je?Math.max(je.paddingRight,Qt):0,gt=Oe,Hn=ue=>{const be=N.current;if(!be)return{x:0,y:0};const Ce=be.getBoundingClientRect();return{x:ue.clientX-Ce.left+Ko,y:ue.clientY-Ce.top+Ko}},ea=(ue,be)=>{if(!ae)return;const Ce=ue.image;if(!(Ce!=null&&Ce.url)){te(null);return}const{x:Ne,y:nt}=Hn(be),rt=(j==null?void 0:j.min)??80,Ee=(j==null?void 0:j.max)??320,Qe=(P==null?void 0:P.rowId)===ue.id?P.widthPx:jd(rt,Ee);te({rowId:ue.id,url:Ce.url,objectFit:Ce.objectFit??"cover",widthPx:Qe,x:Ne,y:nt})},ta=ue=>{if(!ae||!P)return;const{x:be,y:Ce}=Hn(ue);te(Ne=>!Ne||Ne.x===be&&Ne.y===Ce?Ne:{...Ne,x:be,y:Ce})},na=()=>{te(null)},ia=()=>{ae&&te(null)};c.useLayoutEffect(()=>{if(!u||U){ce(null);return}const ue=oe.current;if(!ue){ce(null);return}const be=()=>{ce(ue.getBoundingClientRect().height)};be();const Ce=new ResizeObserver(be);return Ce.observe(ue),()=>Ce.disconnect()},[u,U,$e,Xe,Je,Ge,t,e,Le,_e,ge]);const fo=c.useMemo(()=>!U&&po.some(ue=>{const be=ue.charAt(0),Ce=e[`${ue}VerticalAlign`];return Ur(Ce,e,be)}),[U,e,e.AColumnVerticalAlign,e.BColumnVerticalAlign,e.CColumnVerticalAlign,e.DColumnVerticalAlign,e.EColumnVerticalAlign]);return c.useLayoutEffect(()=>{var rt;const ue=N.current;if(!ue)return;const be=()=>{ue.querySelectorAll("[data-list-col]").forEach(Ee=>{Ee.style.transform="";const Qe=Ee.querySelector(`.${l}-list-col`);Qe&&(Qe.style.minHeight="",Qe.style.height="");const ht=Ee.querySelector(`.${l}-list-col-title`);ht&&(ht.style.transform="")})};if(U||!fo){be();return}const Ce=()=>{ue.querySelectorAll("[data-list-row]").forEach(Ee=>{const Qe=Array.from(Ee.querySelectorAll("[data-list-col]"));Qe.forEach(We=>{We.style.transform="";const ot=We.querySelector(`.${l}-list-col`);ot&&(ot.style.minHeight="",ot.style.height="");const et=We.querySelector(`.${l}-list-col-title`);et&&(et.style.transform="")}),Sd(Ee,Qe,`${l}-list-col`),Ee.offsetHeight;const ht=Ee.getBoundingClientRect().top,Rt=`${l}-baseline-probe`,Xt=new Map,Bn=Qe.map(We=>{const ot=We.querySelector(`.${l}-list-col-title`),et={el:We,titleEl:ot,letter:We.getAttribute("data-col-letter")??"",kind:We.getAttribute("data-valign")??"top",anchor:We.getAttribute("data-valign-anchor")};return Xt.set(et.letter,et),et}),hn=new Map,On=(We,ot)=>{const et=hn.get(We.letter);if(et!==void 0)return et;const jn=We.anchor?Xt.get(We.anchor):void 0;if(We.kind!=="baseline"||!jn||ot.has(We.letter)){const vo=Ii(We,ht,`${l}-list-col`,Rt);return hn.set(We.letter,vo),vo}ot.add(We.letter);const oa=On(jn,ot);ot.delete(We.letter);const ra=Ii(We,ht,`${l}-list-col`,Rt),aa=oa-ra;wd(We.titleEl,aa);const yo=Ii(We,ht,`${l}-list-col`,Rt);return hn.set(We.letter,yo),yo};Bn.forEach(We=>On(We,new Set))})};Ce();const Ne=new ResizeObserver(()=>Ce());Ne.observe(ue);let nt=!1;return typeof document<"u"&&((rt=document.fonts)!=null&&rt.ready)&&document.fonts.ready.then(()=>{nt||Ce()}),()=>{nt=!0,Ne.disconnect(),be()}},[fo,U,e,t,ge,$e,_e]),r.jsxs(r.Fragment,{children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:pd(l)}}),r.jsx("div",{style:Q,children:r.jsxs("div",{ref:N,className:`${l}-wrapper ${O}${Ye?` ${Ye}`:""}${U?` ${l}-type-b`:""}`.trim(),style:{width:E.scalingValue(b??0,n),...!U&&u?{[`--${l}-first-entry-handle-top`]:Pt}:{}},onMouseMove:ae?ta:void 0,onMouseLeave:ae?na:void 0,children:[r.jsxs("div",{style:{width:"100%"},children:[$e.map((ue,be)=>{var rt;const Ce=(((rt=ue.link)==null?void 0:rt.length)??0)>0,Ne=Ce?"a":"div",nt=dd(be,$e.length,ie,pe,Fe,h??0,n??!1);return r.jsxs(Ne,{ref:be===0?Ee=>{oe.current=Ee}:void 0,className:`${l}-list-item${Ce?` ${l}-list-item-has-link`:""}`,...Ce?{href:ue.link,target:"_blank"}:{},style:nt,onMouseEnter:ae?Ee=>ea(ue,Ee):void 0,children:[Xe>0&&r.jsx("div",{className:`${l}-row-padding-handle`,style:{height:fe(Xe)}}),r.jsxs("div",{className:`${l}-list-cols-row${U?"":` ${l}-list-cols-row-h`}${u&&be===0&&U?` ${l}-list-cols-row-controls`:""}`,...U?{}:{"data-list-row":""},style:U?void 0:{minHeight:fe(Ge)},children:[Le.map((Ee,Qe)=>{const ht=Qe===Le.length-1,Rt=Ae[Qe],Xt=Ee.paddingBottom,Bn=cd(ue.cells[Ee.key]),hn=U&&Bn&&Xt>0,On=U?{minHeight:fe(Ge)}:{width:fe(_e[Qe])},We=U?{paddingLeft:fe(g),paddingRight:fe(g)}:{paddingLeft:fe(Rt.paddingLeft),paddingRight:fe(Rt.paddingRight)},ot=Ee.textPrefix.charAt(0),et=U?fd(e[`${Ee.textPrefix}VerticalAlign`]):hd(e[`${Ee.textPrefix}VerticalAlign`],e,ot),jn=U&&Bn&&u&&be===0;return r.jsxs("div",{className:U?`${l}-list-col-wrap`:void 0,...U?{}:{"data-list-col":"","data-col-letter":ot,"data-valign":et.kind,...et.kind==="baseline"?{"data-valign-anchor":et.anchorLetter}:{}},children:[r.jsx("div",{className:`${l}-list-col${ht?` ${l}-list-col-last`:""}`,style:{...We,...On,...U?{justifyContent:Go(et.kind)}:{}},"data-test":Ee.width,children:r.jsx("span",{className:Uo(e,Ee.textPrefix,`${l}-list-col-title`,`${l}-text-tight-leading`),style:{...qo(si(e,Ee.textPrefix),n),...Xo(e,Ee.textPrefix,l,n),...U?{}:vd(et.kind)},children:ue.cells[Ee.key]??null})}),hn&&r.jsx("div",{className:`${l}-row-padding-handle`,style:{height:fe(Xt)}}),jn&&r.jsx(Ct,{P:l,"data-controls":Ee.paddingBottomKey,"data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"column-padding","data-controls-min":"0",className:`${l}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",bottom:0,left:0,width:"100%",height:fe(Math.max(Xt,Pi))}})]},Ee.key)}),u&&be===0&&U&&r.jsxs(r.Fragment,{children:[r.jsx(Ct,{P:l,"data-controls":"textPaddingLR","data-controls-static-handle":"","data-controls-paired":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(J),className:`${l}-text-padding-lr-handle`,hitPlacement:"center",areaStyle:{position:"absolute",top:0,left:0,width:fe(V),height:"100%"}}),r.jsx(Ct,{P:l,"data-controls":"textPaddingLR","data-controls-static-handle":"","data-controls-paired":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(J),className:`${l}-text-padding-lr-handle`,hitPlacement:"center",areaStyle:{position:"absolute",top:0,left:fe(Math.max(V,Oe-V)),width:fe(V),height:"100%"}})]})]}),!U&&Je>0&&r.jsx("div",{className:`${l}-row-padding-handle`,style:{height:fe(Je)}}),u&&be===0&&!U&&r.jsx(Ct,{P:l,"data-controls":"rowPaddingBottom","data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${l}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",bottom:0,left:0,width:"100%",height:fe(Bt)}})]},ue.id)}),Fe&&(()=>{const ue=si(e,Lt),be=bd(e.cutLabelVerticalAlign),Ce=ue.textTextAlign==="justify"||U;return r.jsx("button",{type:"button",className:`${l}-cut-item`,style:{minHeight:fe(m??0),...ud(pe,h??0,n??!1)},onClick:Be,onMouseEnter:ae?ia:void 0,children:r.jsx("div",{className:`${l}-list-cols-row`,style:{...U?{paddingLeft:fe(g),paddingRight:fe(g)}:{},justifyContent:xd(ue.textTextAlign),alignItems:Go(be)},children:r.jsx("span",{className:Uo(e,Lt,`${l}-cut-label`,`${l}-text-tight-leading`),style:{...qo(ue,n),...Xo(e,Lt,l,n),...Ce?{width:"100%"}:{}},children:z})})})})()]}),u&&r.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:r.jsx(Ct,{P:l,"data-controls":Ot,"data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${l}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",top:0,left:0,width:"100%",height:fe(Math.max(Xe,Pi))}})},"row-padding-handles"),u&&!U&&Re&&Ze&&r.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[r.jsx(Ct,{P:l,"data-controls":Re.paddingLeftKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(_e[0]-((xe==null?void 0:xe.paddingRight)??0)),className:`${l}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:0,width:fe(qe),height:"100%"}}),r.jsx(Ct,{P:l,"data-controls":Ze.paddingRightKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(_e[Le.length-1]-((je==null?void 0:je.paddingLeft)??0)),className:`${l}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:fe(gt-ze),width:fe(ze),height:"100%"}})]},"column-edge-padding-handles"),u&&!U&&Le.slice(0,-1).map((ue,be)=>{const Ce=Le[be+1],Ne=ke.slice(0,be+1).reduce((ht,Rt)=>ht+Rt,0),nt=Ae[be],rt=Ae[be+1],Ee=Math.max(nt.paddingRight,Qt),Qe=Math.max(rt.paddingLeft,Qt);return r.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[r.jsx(Ct,{P:l,"data-controls":ue.paddingRightKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(_e[be]-nt.paddingLeft),className:`${l}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:fe(Ne-Ee),width:fe(Ee),height:"100%"}}),r.jsx(Ct,{P:l,"data-controls":Ce.paddingLeftKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(_e[be+1]-rt.paddingRight),className:`${l}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:fe(Ne),width:fe(Qe),height:"100%"}})]},`${ue.paddingRightKey}-padding`)}),u&&!U&&Le.slice(0,-1).map((ue,be)=>{const Ce=Od(be,ke,ve,Oe),nt=ke.slice(0,be+1).reduce((rt,Ee)=>rt+Ee,0)-Yo/2;return r.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:r.jsx("div",{"data-controls":ue.widthKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-min":String(go),"data-controls-max-fraction":String(Ce),"data-controls-variant":"column-width",className:`${l}-col-resize-handle`,style:{position:"absolute",top:"0px",left:fe(nt),width:fe(Yo),height:"calc(100%)",pointerEvents:"auto"}})},`${ue.widthKey}-junction`)}),ae&&P&&r.jsx("img",{className:`${l}-hover-image`,src:P.url,alt:"",style:{width:Qn(P.widthPx),objectFit:P.objectFit,left:P.x,top:P.y}})]})})]})}const Kd=`import { useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ComponentPropsWithoutRef } from 'react';
4818
+ `}const Nt=["AColumn","BColumnWidth","CColumnWidth","DColumnWidth","EColumnWidth"],di=["AColumn","BColumn","CColumn","DColumn","EColumn"],Et="cutLabel",xo=[...di,Et],ui=["A","B","C","D","E"];function Hr(e){return`${e}ColumnVerticalAlign`}const Vo=["Top","Center","Bottom"];function id(e){const t=String(e??"Top").trim();return t.toLowerCase().startsWith("baseline")?!1:t==="Top"||t==="Center"||t==="Bottom"}function rd(e){const t=String(e??"").trim();if(!t.toLowerCase().startsWith("baseline"))return null;const n=t.slice(-1).toUpperCase();return ui.includes(n)?n:null}function Br(e,t,n){const o=rd(e);return o?o===t?!1:id(n[Hr(o)]):!0}function En(e){const t=String(e??"Top").trim();if(t.toLowerCase().startsWith("baseline")){const n=t.slice(-1).toUpperCase();return ui.includes(n)?{kind:"baseline",anchorLetter:n}:{kind:"top"}}return t==="Center"?{kind:"center"}:t==="Bottom"?{kind:"bottom"}:{kind:"top"}}function ad(e,t,n){if(Or(e,t,n))return En(e);const o=En(e);return o.kind==="baseline"?{kind:"top"}:o}function sd(e){const t=En(e);return t.kind==="baseline"?{kind:"top"}:t}function Or(e,t,n){return Br(e,n,t)?En(e).kind==="baseline":!1}function ld(e){const t={};let n=!1;for(const o of ui){const i=Hr(o),r=e[i];if(e.type==="B"){const s=String(r??"Top").trim();s!=="Top"&&s!=="Center"&&s!=="Bottom"&&(t[i]="Top",n=!0);continue}Br(r,o,e)||(t[i]="Top",n=!0)}return n?t:null}function cd(e){return e==="center"?{flex:"0 0 auto",marginTop:"auto",marginBottom:"auto"}:e==="bottom"?{flex:"0 0 auto",marginTop:"auto"}:{}}function dd(e){const t=En(e).kind;return t==="baseline"?"center":t}function ud(e){return e==="right"?"flex-end":e==="center"?"center":"flex-start"}function zi(e){return e==="center"?"center":e==="bottom"?"flex-end":"flex-start"}function pd(e,t){const n=document.createElement("i");n.className=t,n.setAttribute("aria-hidden","true"),e.prepend(n);const{top:o}=e.getBoundingClientRect(),{bottom:i}=n.getBoundingClientRect(),r=i-o;return n.remove(),r}function _o(e,t,n,o){const i=e.titleEl;if(!i)return 0;const r=i.closest(`.${n}`);if(!r)return 0;const s=pd(i,o);if(e.kind==="baseline")return i.getBoundingClientRect().top-t+s;const c=r.getBoundingClientRect(),a=i.getBoundingClientRect().height;let d=0;return e.kind==="center"?d=(c.height-a)/2:e.kind==="bottom"&&(d=c.height-a),c.top-t+d+s}function md(e,t,n){const o=e.getBoundingClientRect().height;return o<=0?0:(t.forEach(i=>{const r=i.querySelector(`.${n}`);r&&(r.style.minHeight=`${o}px`,r.style.height=`${o}px`)}),e.offsetHeight,o)}function gd(e,t){return!e||!t?(e&&(e.style.transform=""),0):(e.style.transform=`translateY(${t}px)`,t)}const hd={AColumn:"AColumn",BColumnWidth:"BColumn",CColumnWidth:"CColumn",DColumnWidth:"DColumn",EColumnWidth:"EColumn"};function Te(e,t){return`${e}${t.replace(/^text/,"Text")}`}const fd={AColumn:"A",BColumn:"B",CColumn:"C",DColumn:"D",EColumn:"E",cutLabel:"CUT"};function yd(e){return[Te(e,"textFontFamily"),Te(e,"textFontSettings"),{type:"row",items:[Te(e,"textFontSize"),Te(e,"textLineHeight"),Te(e,"textLetterSpacing"),Te(e,"textWordSpacing")]},Te(e,"textTextAlign"),Te(e,"textTextAppearance"),`${e}VerticalAlign`]}function vd(){return{type:"tab",id:"listColumnTextStyle",tabs:Object.fromEntries(xo.map(e=>[fd[e],yd(e)]))}}function ao(e,t){const n=o=>{const i=Te(t,o);return e[i]};return{textFontFamily:n("textFontFamily")??"Arial",textFontSettings:n("textFontSettings")??{fontWeight:400,fontStyle:"normal"},textFontSize:n("textFontSize"),textLineHeight:n("textLineHeight"),textLetterSpacing:n("textLetterSpacing")??0,textWordSpacing:n("textWordSpacing")??0,textTextAlign:n("textTextAlign")??(t===Et?"center":"left"),textTextAppearance:n("textTextAppearance"),textColor:e.textColor}}function Ki(e,t){var o,i;const n={fontSettings:{fontFamily:e.textFontFamily,fontWeight:((o=e.textFontSettings)==null?void 0:o.fontWeight)??400,fontStyle:((i=e.textFontSettings)==null?void 0:i.fontStyle)??"normal"},fontSize:e.textFontSize??.01,lineHeight:e.textLineHeight,letterSpacing:e.textLetterSpacing,wordSpacing:e.textWordSpacing,textAlign:e.textTextAlign,textAppearance:e.textTextAppearance,color:e.textColor??"#767676"};return ht(Xe(n,t))}function qi(e,t,n,o){const i=ao(e,t),r=i.textFontSize??.01,s=i.textLineHeight;return s!==void 0&&s<r?`${n} ${o}`:n}function Ui(e,t,n,o){const i=ao(e,t),r=i.textFontSize??.01,s=i.textLineHeight;return s===void 0||s>=r?{}:{[`--${n}-title-leading-gap`]:E.scalingValue((r-s)/2,o)}}const at=["AColumnWidth","BColumnWidth","CColumnWidth","DColumnWidth","EColumnWidth"],cn=["AColumnPaddingLeft","BColumnPaddingLeft","CColumnPaddingLeft","DColumnPaddingLeft","EColumnPaddingLeft"],dn=["AColumnPaddingRight","BColumnPaddingRight","CColumnPaddingRight","DColumnPaddingRight","EColumnPaddingRight"],un=["AColumnPaddingBottom","BColumnPaddingBottom","CColumnPaddingBottom","DColumnPaddingBottom","EColumnPaddingBottom"],bd={textColor:"text-color",backgroundColor:"background-color",dividerColor:"divider-color",textHoverColor:"text-hover-color",backgroundHoverColor:"background-hover-color",dividerHoverColor:"divider-hover-color"},xd=["hover","focus","filled","success","error"],Gi=.004,tn=.004,Ao=tn,Yi=12,pi=50,Pn=1440,_n=pi/Pn;function Vr(e){const t=typeof e=="number"&&e>0?e:Pn;return pi/t}function Cd(e,t){const n={position:"absolute",width:Yi,height:Yi,pointerEvents:"auto"};return t==="left-y"?{...n,left:20,top:"50%",transform:"translateY(-50%)"}:t==="center-x"?{...n,left:"50%",top:`var(--${e}-first-entry-handle-top, 50%)`,transform:"translate(-50%, -50%)"}:{...n,left:"50%",top:"50%",transform:"translate(-50%, -50%)"}}function St({P:e,className:t,areaStyle:n,hitPlacement:o,...i}){return l.jsx("div",{className:t,style:{...n,pointerEvents:"none"},...i,children:l.jsx("div",{style:Cd(e,o)})})}function Sd(e){let t=e??null;for(;t;){const n=t.style.getPropertyValue("--cntrl-article-width").trim();if(n){const i=parseFloat(n);if(Number.isFinite(i)&&i>0)return i}const o=getComputedStyle(t).getPropertyValue("--cntrl-article-width").trim();if(o){const i=parseFloat(o);if(Number.isFinite(i)&&i>0)return i}t=t.parentElement}return Pn}const Dr={AColumnWidth:.02,BColumnWidth:.02,CColumnWidth:.02,DColumnWidth:.02,EColumnWidth:.02};function Qn(e){const t=typeof e.wrapperWidth=="number"?e.wrapperWidth:1;return Math.max(0,t)}function wd(e,t=1){const n=t/e;return Object.fromEntries(at.map(o=>[o,n]))}function $d(){return Object.fromEntries([...cn.map(e=>[e,0]),...dn.map(e=>[e,0])])}function Td(){return Object.fromEntries(un.map(e=>[e,0]))}function qn(e){return Object.fromEntries(at.map(t=>[t,typeof e[t]=="number"?e[t]:Dr[t]]))}function jr(e,t,n){const o=e-_n,i=t+n;if(i<=0||i<=o)return{paddingLeft:t,paddingRight:n};if(o<=0)return{paddingLeft:0,paddingRight:0};const r=o/i;return{paddingLeft:t*r,paddingRight:n*r}}function eo(e,t,n){const o=mi(e,t,n);if(e<=0)return[];const i=o.slice(0,e-1).reduce((r,s)=>r+s,0);return[...o.slice(0,e-1),Math.max(0,t-i)]}function Ld(e,t,n){const o={};for(let i=0;i<e;i+=1){const r=cn[i],s=dn[i],c=typeof n[r]=="number"?n[r]:0,a=typeof n[s]=="number"?n[s]:0,d=jr(t[i]??0,c,a);d.paddingLeft!==c&&(o[r]=d.paddingLeft),d.paddingRight!==a&&(o[s]=d.paddingRight)}return o}function mi(e,t,n){if(e<=0)return[];const o=at.slice(0,e).map(d=>n[d]);if(e===1)return o;const i=o.slice(0,e-1),s=i.reduce((d,p)=>d+p,0)+_n;if(t>=s)return o;const c=[...i];let a=s-t;for(let d=c.length-1;d>=0&&a>0;d-=1){const p=c[d]-_n;if(p<=0)continue;const T=Math.min(a,p);c[d]-=T,a-=T}return[...c,o[e-1]]}function Ed(e,t,n){if(e<=1)return{};const o=mi(e,t,n),i={};for(let r=0;r<e-1;r+=1){const s=at[r];o[r]!==n[s]&&(i[s]=o[r])}return i}function Xi(e){return Array.isArray(e.columnsOrder)&&e.columnsOrder.length>0?e.columnsOrder:[...Nt]}function Pd(e,t){return e.length!==t.length?!1:e.every((n,o)=>n===t[o])}function _d(e,t,n,o){const i=Math.min(o,e.length,at.length),r={};for(let s=0;s<i;s+=1){const c=e[s],a=t.indexOf(c);if(a===-1)continue;const d=at[a],p=cn[a],T=dn[a],y=un[a],C=at[s],m=cn[s],h=dn[s],W=un[s],x=n[d],b=n[p],f=n[T],O=n[y];typeof x=="number"&&(r[C]=x),typeof b=="number"&&(r[m]=b),typeof f=="number"&&(r[h]=f),typeof O=="number"&&(r[W]=O)}return r}function Ad(e,t,n){const o=ld(e);o&&(e={...e,...o});const i=Vr(n==null?void 0:n.designWidth),r=e.columns,s=t.columns,c=Qn(e),a=Qn(t),d=e.type==="B"||e.type===void 0&&t.type==="B",p=typeof r=="number"?r:typeof s=="number"?s:Nt.length,T=f=>{if(d)return f;const O=qn({...t,...f}),P=Qn(f),_=eo(p,P,O),$=Ld(p,_,{...t,...f});return Object.keys($).length===0?f:{...f,...$}};if(typeof r=="number"&&r!==s){const f={...e,...wd(r,c),...$d()};if(d)for(const O of un)typeof t[O]=="number"&&(f[O]=t[O]);else Object.assign(f,Td());return f}const y=Xi(e),C=Xi(t);if(!Pd(y,C))return T({...e,..._d(y,C,t,p)});if(c<a&&typeof p=="number"&&!d){const f=qn({...t,...e});return T({...e,...Ed(p,c,f)})}if(d){const f=typeof e.textPaddingLR=="number"?e.textPaddingLR:0,O=Math.max(0,(c-i)/2);return f>O?{...e,textPaddingLR:O}:e}const m=qn({...t,...e}),h=eo(p,a,qn(t)),x=eo(p,c,m).some((f,O)=>f<(h[O]??f)),b=at.some(f=>{const O=e[f],P=t[f];return typeof O=="number"&&typeof P=="number"&&O!==P});return x||b?T(e):e}function Rd(e,t,n,o){const i=t.slice(0,e).reduce((s,c)=>s+c,0),r=n.slice(e+1,t.length-1).reduce((s,c)=>s+c,0);return Math.max(_n,o-i-r-_n)}function Wd(e,t){return Math.random()*(t-e)+e}function Id(e){return Object.fromEntries(at.map(t=>[t,typeof e[t]=="number"?e[t]:Dr[t]]))}function Ro(e,t,n=0){return Object.fromEntries(t.map(o=>[o,typeof e[o]=="number"?e[o]:n]))}function kd(e,t,n,o,i,r){return e.slice(0,t).map((s,c)=>{const a=cn[c],d=dn[c],p=un[c];return{key:s,textPrefix:hd[s],widthKey:at[c],width:n[at[c]],paddingLeftKey:a,paddingRightKey:d,paddingBottomKey:p,paddingLeft:o[a],paddingRight:i[d],paddingBottom:r[p]}})}function Fd({settings:e,content:t,isEditor:n,isPreviewMode:o,isEditMode:i,activeEvent:r,layoutId:s,onUpdateSettings:c}){const{prefix:a}=E.useScopedStyles(),d=!!i,{columns:p,type:T,wrapperWidth:y,entriesCount:C,cellMinHeight:m,dividerWidth:h,showVisibility:W,cut:x,showCut:b,cutCellMinHeight:f,cutLabel:O,imageSize:P,imageOnHover:_,entryHoverEffect:$,rowPaddingTop:A,rowPaddingBottom:w,rowPaddingTopB:H,columnsOrder:L,textPaddingLR:V,textColor:D,backgroundColor:J,dividerColor:q,textHoverColor:S,backgroundHoverColor:R,dividerHoverColor:F}=e,[N,I]=u.useState(void 0),[B,ie]=u.useState(null),Q=_==="On"&&(!n||o),oe=(x??0)>0,G=T==="B",M=u.useRef(null),re=u.useRef(null),[Le,ce]=u.useState(null),[fe,We]=u.useState(Pn),ne=Vr(fe),v=Math.max(0,((y??0)-ne)/2),g=Math.min(V??0,v),k=Math.max(g,tn),K=((y??0)+ne)/2;u.useLayoutEffect(()=>{if(!n){We(Pn);return}const se=()=>{We(Sd(M.current))};se();const pe=M.current;if(!pe)return;const ge=new ResizeObserver(se);ge.observe(pe);let _e=pe;for(;_e&&!_e.style.getPropertyValue("--cntrl-article-width");)_e=_e.parentElement;return _e&&ge.observe(_e),()=>ge.disconnect()},[n,s]),u.useEffect(()=>{I(void 0)},[x,b,t,C]),u.useEffect(()=>{n&&!o&&I(void 0)},[n,o]);const U=E.buildColorVars(a,{textColor:D,backgroundColor:J,dividerColor:q,textHoverColor:S,backgroundHoverColor:R,dividerHoverColor:F},bd,xd),te=r&&r!=="default"?`${a}-state-${r}`:"",Z=`${!n||o?$==="Default"?`${a}-entry-hover-default`:$==="Blinds"?`${a}-entry-hover-blinds`:"":""} ${te}`.trim(),de=(W==null?void 0:W[0])??!1,Se=(W==null?void 0:W[1])??!1,ye=u.useRef(e),ue=u.useRef(s);u.useEffect(()=>{if(!c||!n){ye.current=e,ue.current=s;return}if(ue.current!==s){ye.current=e,ue.current=s;return}const se=ye.current;if(!(se!==e))return;const ge=Ad(e,se,{designWidth:fe});ye.current=e,ge!==e&&c(ge)},[e,c,n,s,fe]);const j=u.useMemo(()=>Id(e),[e.AColumnWidth,e.BColumnWidth,e.CColumnWidth,e.DColumnWidth,e.EColumnWidth]),Y=u.useMemo(()=>Ro(e,cn),[e.AColumnPaddingLeft,e.BColumnPaddingLeft,e.CColumnPaddingLeft,e.DColumnPaddingLeft,e.EColumnPaddingLeft]),z=u.useMemo(()=>Ro(e,dn),[e.AColumnPaddingRight,e.BColumnPaddingRight,e.CColumnPaddingRight,e.DColumnPaddingRight,e.EColumnPaddingRight]),le=u.useMemo(()=>Ro(e,un),[e.AColumnPaddingBottom,e.BColumnPaddingBottom,e.CColumnPaddingBottom,e.DColumnPaddingBottom,e.EColumnPaddingBottom]),xe=u.useMemo(()=>Array.isArray(L)&&L.length>0?L:[...Nt],[L]),Ce=u.useMemo(()=>kd(xe,p,j,Y,z,le),[xe,p,j,Y,z,le]),Ie=Qn(e),Ne=u.useMemo(()=>at.slice(0,p).map(se=>j[se]),[p,j]),Ze=u.useMemo(()=>mi(p,Ie,j),[p,Ie,j]),ve=u.useMemo(()=>eo(p,Ie,j),[p,Ie,j]),ke=u.useMemo(()=>Ce.map((se,pe)=>jr(ve[pe]??0,se.paddingLeft,se.paddingRight)),[Ce,ve]),He=u.useMemo(()=>{const se=C===0?1/0:C;return(t??[]).slice(0,se).map((ge,_e)=>({id:_e,cells:Object.fromEntries(Nt.map(Ge=>[Ge,ge[Ge]??""])),image:ge.image,link:ge.link}))},[t,C]),Fe=oe?N??x:He.length,Be=u.useMemo(()=>oe?He.slice(0,Fe):He,[He,oe,Fe]),Oe=oe&&Fe<He.length,Yt=Be.length>1||Oe,bt=[de?`${a}-divider-top`:"",Se||Yt?`${a}-divider-bottom`:""].filter(Boolean).join(" "),nt=!n||o,At=()=>{if(!nt)return;const se=N??x;if(!b){I(He.length);return}I(Math.min(se+b,He.length))},be=se=>E.scalingValue(se,n??!1),lt=G?H??0:A??0,ct=w??0,dt=m??0,xt=(lt+dt+ct)/2,Xt=Math.max(ct,Ao),Ee=Le!=null?`${Le/2}px`:be(xt),Je=G?"rowPaddingTopB":"rowPaddingTop",Qe=Ce[0],ze=Ce[Ce.length-1],Ke=ke[0],me=ke[ke.length-1],qe=Qe&&Ke?Math.max(Ke.paddingLeft,tn):0,Ue=ze&&me?Math.max(me.paddingRight,tn):0,et=Ie,Ct=se=>{const pe=M.current;if(!pe)return{x:0,y:0};const ge=pe.getBoundingClientRect();return{x:se.clientX-ge.left+ji,y:se.clientY-ge.top+ji}},Kr=(se,pe)=>{if(!Q)return;const ge=se.image;if(!(ge!=null&&ge.url)){ie(null);return}const{x:_e,y:Ge}=Ct(pe),ot=(P==null?void 0:P.min)??80,we=(P==null?void 0:P.max)??320,Ve=(B==null?void 0:B.rowId)===se.id?B.widthPx:Wd(ot,we);ie({rowId:se.id,url:ge.url,objectFit:ge.objectFit??"cover",widthPx:Ve,x:_e,y:Ge})},qr=se=>{if(!Q||!B)return;const{x:pe,y:ge}=Ct(se);ie(_e=>!_e||_e.x===pe&&_e.y===ge?_e:{..._e,x:pe,y:ge})},Ur=()=>{ie(null)},Gr=()=>{Q&&ie(null)};u.useLayoutEffect(()=>{if(!d||G){ce(null);return}const se=re.current;if(!se){ce(null);return}const pe=()=>{ce(se.getBoundingClientRect().height)};pe();const ge=new ResizeObserver(pe);return ge.observe(se),()=>ge.disconnect()},[d,G,Be,lt,ct,dt,t,e,Ce,ve,fe]);const gi=u.useMemo(()=>!G&&di.some(se=>{const pe=se.charAt(0),ge=e[`${se}VerticalAlign`];return Or(ge,e,pe)}),[G,e,e.AColumnVerticalAlign,e.BColumnVerticalAlign,e.CColumnVerticalAlign,e.DColumnVerticalAlign,e.EColumnVerticalAlign]);return u.useLayoutEffect(()=>{var ot;const se=M.current;if(!se)return;const pe=()=>{se.querySelectorAll("[data-list-col]").forEach(we=>{we.style.transform="";const Ve=we.querySelector(`.${a}-list-col`);Ve&&(Ve.style.minHeight="",Ve.style.height="");const gt=we.querySelector(`.${a}-list-col-title`);gt&&(gt.style.transform="")})};if(G||!gi){pe();return}const ge=()=>{se.querySelectorAll("[data-list-row]").forEach(we=>{const Ve=Array.from(we.querySelectorAll("[data-list-col]"));Ve.forEach(Pe=>{Pe.style.transform="";const tt=Pe.querySelector(`.${a}-list-col`);tt&&(tt.style.minHeight="",tt.style.height="");const De=Pe.querySelector(`.${a}-list-col-title`);De&&(De.style.transform="")}),md(we,Ve,`${a}-list-col`),we.offsetHeight;const gt=we.getBoundingClientRect().top,Rt=`${a}-baseline-probe`,Zt=new Map,Hn=Ve.map(Pe=>{const tt=Pe.querySelector(`.${a}-list-col-title`),De={el:Pe,titleEl:tt,letter:Pe.getAttribute("data-col-letter")??"",kind:Pe.getAttribute("data-valign")??"top",anchor:Pe.getAttribute("data-valign-anchor")};return Zt.set(De.letter,De),De}),fn=new Map,Bn=(Pe,tt)=>{const De=fn.get(Pe.letter);if(De!==void 0)return De;const On=Pe.anchor?Zt.get(Pe.anchor):void 0;if(Pe.kind!=="baseline"||!On||tt.has(Pe.letter)){const fi=_o(Pe,gt,`${a}-list-col`,Rt);return fn.set(Pe.letter,fi),fi}tt.add(Pe.letter);const Yr=Bn(On,tt);tt.delete(Pe.letter);const Xr=_o(Pe,gt,`${a}-list-col`,Rt),Zr=Yr-Xr;gd(Pe.titleEl,Zr);const hi=_o(Pe,gt,`${a}-list-col`,Rt);return fn.set(Pe.letter,hi),hi};Hn.forEach(Pe=>Bn(Pe,new Set))})};ge();const _e=new ResizeObserver(()=>ge());_e.observe(se);let Ge=!1;return typeof document<"u"&&((ot=document.fonts)!=null&&ot.ready)&&document.fonts.ready.then(()=>{Ge||ge()}),()=>{Ge=!0,_e.disconnect(),pe()}},[gi,G,e,t,fe,Be,ve]),l.jsxs(l.Fragment,{children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:od(a)}}),l.jsx("div",{style:U,children:l.jsxs("div",{ref:M,className:`${a}-wrapper ${Z}${bt?` ${bt}`:""}${G?` ${a}-type-b`:""}`.trim(),style:{width:E.scalingValue(y??0,n),...!G&&d?{[`--${a}-first-entry-handle-top`]:Ee}:{}},onMouseMove:Q?qr:void 0,onMouseLeave:Q?Ur:void 0,children:[l.jsxs("div",{style:{width:"100%",position:"relative"},children:[Be.map((se,pe)=>{var ot;const ge=(((ot=se.link)==null?void 0:ot.length)??0)>0,_e=ge?"a":"div",Ge=td(pe,Be.length,de,Se,Oe,h??0,n??!1);return l.jsxs(_e,{ref:pe===0?we=>{re.current=we}:void 0,className:`${a}-list-item${ge?` ${a}-list-item-has-link`:""}`,...ge?{href:se.link,target:"_blank"}:{},style:Ge,onMouseEnter:Q?we=>Kr(se,we):void 0,children:[lt>0&&l.jsx("div",{className:`${a}-row-padding-handle`,style:{height:be(lt)}}),l.jsxs("div",{className:`${a}-list-cols-row${G?"":` ${a}-list-cols-row-h`}${d&&pe===0&&G?` ${a}-list-cols-row-controls`:""}`,...G?{}:{"data-list-row":""},style:G?void 0:{minHeight:be(dt)},children:[Ce.map((we,Ve)=>{const gt=Ve===Ce.length-1,Rt=ke[Ve],Zt=we.paddingBottom,Hn=ed(se.cells[we.key]),fn=G&&Hn&&Zt>0,Bn=G?{minHeight:be(dt)}:{width:be(ve[Ve])},Pe=G?{paddingLeft:be(g),paddingRight:be(g)}:{paddingLeft:be(Rt.paddingLeft),paddingRight:be(Rt.paddingRight)},tt=we.textPrefix.charAt(0),De=G?sd(e[`${we.textPrefix}VerticalAlign`]):ad(e[`${we.textPrefix}VerticalAlign`],e,tt),On=G&&Hn&&d&&pe===0;return l.jsxs("div",{className:G?`${a}-list-col-wrap`:void 0,...G?{}:{"data-list-col":"","data-col-letter":tt,"data-valign":De.kind,...De.kind==="baseline"?{"data-valign-anchor":De.anchorLetter}:{}},children:[l.jsx("div",{className:`${a}-list-col${gt?` ${a}-list-col-last`:""}`,style:{...Pe,...Bn,...G?{justifyContent:zi(De.kind)}:{}},"data-test":we.width,children:l.jsx("span",{className:qi(e,we.textPrefix,`${a}-list-col-title`,`${a}-text-tight-leading`),style:{...Ki(ao(e,we.textPrefix),n),...Ui(e,we.textPrefix,a,n),...G?{}:cd(De.kind)},children:se.cells[we.key]??null})}),fn&&l.jsx("div",{className:`${a}-row-padding-handle`,style:{height:be(Zt)}}),On&&l.jsx(St,{P:a,"data-controls":we.paddingBottomKey,"data-controls-static-handle":"","data-controls-axis":"y","data-controls-variant":"column-padding","data-controls-min":"0",className:`${a}-padding-control-handle`,hitPlacement:"center",areaStyle:{position:"absolute",bottom:0,left:0,width:"100%",height:be(Math.max(Zt,Ao))}})]},we.key)}),d&&pe===0&&G&&l.jsxs(l.Fragment,{children:[l.jsx(St,{P:a,"data-controls":"textPaddingLR","data-controls-static-handle":"","data-controls-paired":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(K),className:`${a}-text-padding-lr-handle`,hitPlacement:"center",areaStyle:{position:"absolute",top:0,left:0,width:be(k),height:"100%"}}),l.jsx(St,{P:a,"data-controls":"textPaddingLR","data-controls-static-handle":"","data-controls-paired":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(K),className:`${a}-text-padding-lr-handle`,hitPlacement:"center",areaStyle:{position:"absolute",top:0,left:be(Math.max(k,Ie-k)),width:be(k),height:"100%"}})]})]}),!G&&ct>0&&l.jsx("div",{className:`${a}-row-padding-handle`,style:{height:be(ct)}}),d&&pe===0&&!G&&l.jsx(St,{P:a,"data-controls":"rowPaddingBottom","data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${a}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",bottom:0,left:0,width:"100%",height:be(Xt)}})]},se.id)}),d&&l.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:l.jsx(St,{P:a,"data-controls":Je,"data-controls-static-handle":"",...G?{}:{"data-controls-handle-left":"20"},"data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${a}-padding-control-handle`,hitPlacement:G?"center":"left-y",areaStyle:{position:"absolute",top:0,left:0,width:"100%",height:be(Math.max(lt,Ao))}})},"row-padding-handles"),d&&!G&&Qe&&ze&&l.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[l.jsx(St,{P:a,"data-controls":Qe.paddingLeftKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(ve[0]-((Ke==null?void 0:Ke.paddingRight)??0)),className:`${a}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:0,width:be(qe),height:"100%"}}),l.jsx(St,{P:a,"data-controls":ze.paddingRightKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(ve[Ce.length-1]-((me==null?void 0:me.paddingLeft)??0)),className:`${a}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:be(et-Ue),width:be(Ue),height:"100%"}})]},"column-edge-padding-handles"),d&&!G&&Ce.slice(0,-1).map((se,pe)=>{const ge=Ce[pe+1],_e=Ze.slice(0,pe+1).reduce((gt,Rt)=>gt+Rt,0),Ge=ke[pe],ot=ke[pe+1],we=Math.max(Ge.paddingRight,tn),Ve=Math.max(ot.paddingLeft,tn);return l.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[l.jsx(St,{P:a,"data-controls":se.paddingRightKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(ve[pe]-Ge.paddingLeft),className:`${a}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:be(_e-we),width:be(we),height:"100%"}}),l.jsx(St,{P:a,"data-controls":ge.paddingLeftKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(ve[pe+1]-ot.paddingRight),className:`${a}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:be(_e),width:be(Ve),height:"100%"}})]},`${se.paddingRightKey}-padding`)}),d&&!G&&Ce.slice(0,-1).map((se,pe)=>{const ge=Rd(pe,Ze,Ne,Ie),Ge=Ze.slice(0,pe+1).reduce((ot,we)=>ot+we,0)-Gi/2;return l.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:l.jsx("div",{"data-controls":se.widthKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-min":String(pi),"data-controls-max-fraction":String(ge),"data-controls-variant":"column-width",className:`${a}-col-resize-handle`,style:{position:"absolute",top:"0px",left:be(Ge),width:be(Gi),height:"calc(100%)",pointerEvents:"auto"}})},`${se.widthKey}-junction`)})]}),Oe&&(()=>{const se=ao(e,Et),pe=dd(e.cutLabelVerticalAlign),ge=se.textTextAlign==="justify"||G;return l.jsx("button",{type:"button",className:`${a}-cut-item`,style:{minHeight:be(f??0),cursor:nt?"pointer":"default",...nd(Se,h??0,n??!1)},onClick:nt?At:void 0,onMouseEnter:Q?Gr:void 0,children:l.jsx("div",{className:`${a}-list-cols-row`,style:{...G?{paddingLeft:be(g),paddingRight:be(g)}:{},justifyContent:ud(se.textTextAlign),alignItems:zi(pe)},children:l.jsx("span",{className:qi(e,Et,`${a}-cut-label`,`${a}-text-tight-leading`),style:{...Ki(se,n),...Ui(e,Et,a,n),...ge?{width:"100%"}:{}},children:O})})})})(),Q&&B&&l.jsx("img",{className:`${a}-hover-image`,src:B.url,alt:"",style:{width:Jn(B.widthPx),objectFit:B.objectFit,left:B.x,top:B.y}})]})})]})}const Md=`import { useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ComponentPropsWithoutRef } from 'react';
4803
4819
  import { CommonComponentProps } from '../props';
4804
4820
  import { buildColorVars, scalingValue, useScopedStyles } from '../utils/index';
4805
4821
  import { omitTextColors, TextStyles, textStylesToCss } from '../utils/textStylesToCss';
@@ -5214,6 +5230,12 @@ a.\${P}-list-item {
5214
5230
  transform: translateY(-50%);
5215
5231
  }
5216
5232
 
5233
+ .\${P}-wrapper.\${P}-type-b .\${P}-padding-control-handle[data-controls-variant="row-padding"][data-controls-axis="y"]::after,
5234
+ .\${P}-wrapper.\${P}-type-b .\${P}-padding-control-handle[data-controls-variant="column-padding"][data-controls-axis="y"]::after {
5235
+ left: 50%;
5236
+ transform: translate(-50%, -50%);
5237
+ }
5238
+
5217
5239
  .\${P}-row-padding-handle {
5218
5240
  width: 100%;
5219
5241
  flex-shrink: 0;
@@ -6589,6 +6611,12 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
6589
6611
  setVisibleRowCount(undefined);
6590
6612
  }, [cut, showCut, content, entriesCount]);
6591
6613
 
6614
+ useEffect(() => {
6615
+ if (isEditor && !isPreviewMode) {
6616
+ setVisibleRowCount(undefined);
6617
+ }
6618
+ }, [isEditor, isPreviewMode]);
6619
+
6592
6620
  const colorVars = buildColorVars(P, {
6593
6621
  textColor,
6594
6622
  backgroundColor,
@@ -6599,12 +6627,13 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
6599
6627
  }, COLOR_VAR_MAP, STATE_KEYS);
6600
6628
 
6601
6629
  const stateClass = activeEvent && activeEvent !== 'default' ? \`\${P}-state-\${activeEvent}\` : '';
6602
- const entryHoverClass =
6603
- entryHoverEffect === 'Default'
6630
+ const entryHoverClass = (!isEditor || isPreviewMode)
6631
+ ? entryHoverEffect === 'Default'
6604
6632
  ? \`\${P}-entry-hover-default\`
6605
6633
  : entryHoverEffect === 'Blinds'
6606
6634
  ? \`\${P}-entry-hover-blinds\`
6607
- : '';
6635
+ : ''
6636
+ : '';
6608
6637
  const wrapperStateClasses = \`\${entryHoverClass} \${stateClass}\`.trim();
6609
6638
  const showDividerTop = showVisibility?.[0] ?? false;
6610
6639
  const showDividerBottom = showVisibility?.[1] ?? false;
@@ -6771,7 +6800,11 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
6771
6800
  showDividerBottom || hasBetweenItemDividers ? \`\${P}-divider-bottom\` : '',
6772
6801
  ].filter(Boolean).join(' ');
6773
6802
 
6803
+ const cutItemClickable = !isEditor || isPreviewMode;
6804
+
6774
6805
  const handleShowMore = () => {
6806
+ if (!cutItemClickable) return;
6807
+
6775
6808
  const currentVisible = visibleRowCount ?? cut;
6776
6809
  if (!showCut) {
6777
6810
  setVisibleRowCount(allRows.length);
@@ -7071,7 +7104,7 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
7071
7104
  onMouseMove={showHoverImage ? handleWrapperMouseMove : undefined}
7072
7105
  onMouseLeave={showHoverImage ? handleWrapperMouseLeave : undefined}
7073
7106
  >
7074
- <div style={{ width: '100%' }}>
7107
+ <div style={{ width: '100%', position: 'relative' }}>
7075
7108
  {visibleRows.map((row, rowIdx) => {
7076
7109
  const hasLink = (row.link?.length ?? 0) > 0;
7077
7110
  const RowElement = hasLink ? 'a' : 'div';
@@ -7194,12 +7227,11 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
7194
7227
  P={P}
7195
7228
  data-controls={col.paddingBottomKey}
7196
7229
  data-controls-static-handle=""
7197
- data-controls-handle-left="20"
7198
7230
  data-controls-axis="y"
7199
7231
  data-controls-variant="column-padding"
7200
7232
  data-controls-min="0"
7201
7233
  className={\`\${P}-padding-control-handle\`}
7202
- hitPlacement="left-y"
7234
+ hitPlacement="center"
7203
7235
  areaStyle={{
7204
7236
  position: 'absolute',
7205
7237
  bottom: 0,
@@ -7285,71 +7317,18 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
7285
7317
  </RowElement>
7286
7318
  );
7287
7319
  })}
7288
- {showCutLabel && (() => {
7289
- const cutLabelFields = resolveListColumnTextFields(settings, CUT_LABEL_TEXT_PREFIX);
7290
- const cutLabelVerticalAlignKind = resolveCutLabelVerticalAlignKind(settings.cutLabelVerticalAlign);
7291
- const cutLabelUsesFullWidth = cutLabelFields.textTextAlign === 'justify' || isVerticalLayout;
7292
-
7293
- return (
7294
- <button
7295
- type="button"
7296
- className={\`\${P}-cut-item\`}
7297
- style={{
7298
- minHeight: scaled(cutCellMinHeight ?? 0),
7299
- ...getCutItemDividerWidths(
7300
- showDividerBottom,
7301
- dividerWidth ?? 0,
7302
- isEditor ?? false,
7303
- ),
7304
- }}
7305
- onClick={handleShowMore}
7306
- onMouseEnter={showHoverImage ? handleCutItemMouseEnter : undefined}
7307
- >
7308
- <div
7309
- className={\`\${P}-list-cols-row\`}
7310
- style={{
7311
- ...(isVerticalLayout
7312
- ? {
7313
- paddingLeft: scaled(effectiveTextPaddingLR),
7314
- paddingRight: scaled(effectiveTextPaddingLR),
7315
- }
7316
- : {}),
7317
- justifyContent: textAlignToJustifyContent(cutLabelFields.textTextAlign),
7318
- alignItems: cutVerticalAlignKindToFlexAlign(cutLabelVerticalAlignKind),
7319
- }}
7320
- >
7321
- <span
7322
- className={getListColumnTitleClassName(
7323
- settings,
7324
- CUT_LABEL_TEXT_PREFIX,
7325
- \`\${P}-cut-label\`,
7326
- \`\${P}-text-tight-leading\`,
7327
- )}
7328
- style={{
7329
- ...listColumnTextFieldsToCss(cutLabelFields, isEditor),
7330
- ...getListColumnTitleVars(settings, CUT_LABEL_TEXT_PREFIX, P, isEditor),
7331
- ...(cutLabelUsesFullWidth ? { width: '100%' } : {}),
7332
- }}
7333
- >
7334
- {cutLabel}
7335
- </span>
7336
- </div>
7337
- </button>
7338
- );
7339
- })()}
7340
- </div>
7341
7320
  {showControls && (
7342
7321
  <div key="row-padding-handles" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
7343
7322
  <ListPaddingControl
7344
7323
  P={P}
7345
7324
  data-controls={rowPaddingTopControlKey}
7346
7325
  data-controls-static-handle=""
7347
- data-controls-handle-left="20"
7326
+ {...(!isVerticalLayout ? { 'data-controls-handle-left': '20' } : {})}
7348
7327
  data-controls-axis="y"
7349
7328
  data-controls-variant="row-padding"
7350
7329
  data-controls-min="0"
7351
7330
  className={\`\${P}-padding-control-handle\`}
7352
- hitPlacement="left-y"
7331
+ hitPlacement={isVerticalLayout ? 'center' : 'left-y'}
7353
7332
  areaStyle={{
7354
7333
  position: 'absolute',
7355
7334
  top: 0,
@@ -7498,6 +7477,60 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
7498
7477
  </div>
7499
7478
  );
7500
7479
  })}
7480
+ </div>
7481
+ {showCutLabel && (() => {
7482
+ const cutLabelFields = resolveListColumnTextFields(settings, CUT_LABEL_TEXT_PREFIX);
7483
+ const cutLabelVerticalAlignKind = resolveCutLabelVerticalAlignKind(settings.cutLabelVerticalAlign);
7484
+ const cutLabelUsesFullWidth = cutLabelFields.textTextAlign === 'justify' || isVerticalLayout;
7485
+
7486
+ return (
7487
+ <button
7488
+ type="button"
7489
+ className={\`\${P}-cut-item\`}
7490
+ style={{
7491
+ minHeight: scaled(cutCellMinHeight ?? 0),
7492
+ cursor: cutItemClickable ? 'pointer' : 'default',
7493
+ ...getCutItemDividerWidths(
7494
+ showDividerBottom,
7495
+ dividerWidth ?? 0,
7496
+ isEditor ?? false,
7497
+ ),
7498
+ }}
7499
+ onClick={cutItemClickable ? handleShowMore : undefined}
7500
+ onMouseEnter={showHoverImage ? handleCutItemMouseEnter : undefined}
7501
+ >
7502
+ <div
7503
+ className={\`\${P}-list-cols-row\`}
7504
+ style={{
7505
+ ...(isVerticalLayout
7506
+ ? {
7507
+ paddingLeft: scaled(effectiveTextPaddingLR),
7508
+ paddingRight: scaled(effectiveTextPaddingLR),
7509
+ }
7510
+ : {}),
7511
+ justifyContent: textAlignToJustifyContent(cutLabelFields.textTextAlign),
7512
+ alignItems: cutVerticalAlignKindToFlexAlign(cutLabelVerticalAlignKind),
7513
+ }}
7514
+ >
7515
+ <span
7516
+ className={getListColumnTitleClassName(
7517
+ settings,
7518
+ CUT_LABEL_TEXT_PREFIX,
7519
+ \`\${P}-cut-label\`,
7520
+ \`\${P}-text-tight-leading\`,
7521
+ )}
7522
+ style={{
7523
+ ...listColumnTextFieldsToCss(cutLabelFields, isEditor),
7524
+ ...getListColumnTitleVars(settings, CUT_LABEL_TEXT_PREFIX, P, isEditor),
7525
+ ...(cutLabelUsesFullWidth ? { width: '100%' } : {}),
7526
+ }}
7527
+ >
7528
+ {cutLabel}
7529
+ </span>
7530
+ </div>
7531
+ </button>
7532
+ );
7533
+ })()}
7501
7534
  {showHoverImage && hoverImage && (
7502
7535
  <img
7503
7536
  className={\`\${P}-hover-image\`}
@@ -7516,2638 +7549,4 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
7516
7549
  </>
7517
7550
  );
7518
7551
  }
7519
- `,gn=["A","B","C","D","E"],Qo=[...ji,"Baseline A","Baseline B","Baseline C","Baseline D","Baseline E"],Vt={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}},fontSize:{type:"number",display:{type:"font-size"}},lineHeight:{type:"number",display:{type:"line-height-input"}},letterSpacing:{type:"number",display:{type:"letter-spacing-input"}},wordSpacing:{type:"number",display:{type:"word-spacing-input"}},textAlign:{type:"string",enum:["left","center","right","justify"],display:{type:"vertical-text-aligh-options"}},textAppearance:{type:"object",display:{type:"text-appearance",useTabDesign:!0},properties:{textTransform:{type:"string",enum:["none","uppercase","lowercase","capitalize"]},textDecoration:{type:"string",enum:["none","underline"]},fontVariant:{type:"string",enum:["normal","small-caps"]}}}};function Gd(e){return{type:"string",label:e,placeholder:"Add Title...",display:{type:"text-input"}}}function Un(e){return{type:"number",scope:"layout",title:e,min:0,max:100,display:{type:"range-control"}}}function qd(){return Object.fromEntries(gn.map((e,t)=>{const n=kt[t],i=`${e} column`;return[n,Gd(i)]}))}function Ud(){const e={};for(const t of gn)e[`${t}ColumnWidth`]=Un(`${t} column width`),e[`${t}ColumnPaddingLeft`]=Un(`${t} column padding left`),e[`${t}ColumnPaddingRight`]=Un(`${t} column padding right`),e[`${t}ColumnPaddingBottom`]=Un(`${t} column padding bottom`);return e}function er(e={}){const t={columns:5,wrapperWidth:1,columnsOrder:[...kt]};for(const n of gn)t[`${n}ColumnWidth`]=.2,t[`${n}ColumnPaddingLeft`]=0,t[`${n}ColumnPaddingRight`]=0,t[`${n}ColumnPaddingBottom`]=0;return{...t,...e}}function Xd(e){const t={};if(e===Lt)t[`${e}VerticalAlign`]={type:"string",scope:"layout",title:"",display:{type:"drop-down",label:"Vertical alignment",enum:[...ji],useTabDesign:!0},enum:[...ji]};else{const n=e.charAt(0);t[`${e}VerticalAlign`]={type:"string",scope:"layout",title:"",display:{type:"drop-down",label:"Vertical alignment",enum:[...Qo],filterBaselineByTopAnchor:!0,columnLetter:n,useTabDesign:!0},enum:[...Qo]}}return t[Pe(e,"textFontFamily")]={type:"string",scope:"common",title:"",display:{type:"font-family-select",hideLabel:!0,useTabDesign:!0}},t[Pe(e,"textFontSettings")]={...Vt.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight",hideLabel:!0,useTabDesign:!0}},t[Pe(e,"textFontSize")]={...Vt.fontSize,scope:"layout",title:"",display:{type:"font-size"}},t[Pe(e,"textLineHeight")]={...Vt.lineHeight,scope:"layout",title:"",display:{type:"line-height-input"}},t[Pe(e,"textLetterSpacing")]={...Vt.letterSpacing,scope:"layout",title:"",display:{type:"letter-spacing-input"}},t[Pe(e,"textWordSpacing")]={...Vt.wordSpacing,scope:"layout",title:"",display:{type:"word-spacing-input"}},t[Pe(e,"textTextAlign")]={...Vt.textAlign,scope:"layout",title:"",display:{type:"vertical-text-aligh-options"}},t[Pe(e,"textTextAppearance")]={...Vt.textAppearance,scope:"layout",title:"",display:{type:"text-appearance",useTabDesign:!0}},t}const Yd=bi.reduce((e,t)=>({...e,...Xd(t)}),{}),Jd=bi.reduce((e,t)=>({...e,[`${t}VerticalAlign`]:t===Lt?"Center":"Top",[Pe(t,"textFontFamily")]:"Arial",[Pe(t,"textFontSettings")]:{fontWeight:400,fontStyle:"normal"},[Pe(t,"textLetterSpacing")]:0,[Pe(t,"textWordSpacing")]:0,[Pe(t,"textTextAlign")]:t===Lt?"center":"left",[Pe(t,"textTextAppearance")]:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}}),{});function tr(e){const{textFontSize:t,textLineHeight:n,textTextAlign:i}=e;return bi.reduce((a,s)=>(t!==void 0&&(a[`${s}TextFontSize`]=t),n!==void 0&&(a[`${s}TextLineHeight`]=n),i!==void 0&&(a[Pe(s,"textTextAlign")]=i),a),{})}const Zd=Ed();function Zr(e){return[Pe(e,"textFontFamily"),Pe(e,"textFontSettings"),Pe(e,"textFontSize"),Pe(e,"textLineHeight"),Pe(e,"textLetterSpacing"),Pe(e,"textWordSpacing"),Pe(e,"textTextAlign"),Pe(e,"textTextAppearance"),`${e}VerticalAlign`]}function Qd(){const e=[];return po.forEach((t,n)=>{const i=kt[n],a=Zr(t);for(let s=1;s<kt.length;s+=1){const o=[{name:"columns",value:s},...Array.from({length:s},(d,l)=>({name:`columnsOrder.${l}`,value:i,isNotEqual:!0}))];a.forEach(d=>{e.push({if:o,then:{name:`properties.${d}.display.visible`,value:!1}})})}}),e}const eu=["textColor","backgroundColor","dividerColor","textHoverColor","backgroundHoverColor","dividerHoverColor"],tu=["cutLabel","cutCellMinHeight","showCut"],nu=Zr(Lt),iu=[...tu,...nu],ou=[...gn.flatMap(e=>[`${e}ColumnWidth`,`${e}ColumnPaddingLeft`,`${e}ColumnPaddingRight`]),"rowPaddingTop","rowPaddingBottom"],zt=[{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDBHFMF0NKJMYCGGRA.jpeg",name:"List-1.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MD194E6Z49QD9GG03N.jpeg",name:"List-2.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDNZRY59Q8JJVYY92K.jpeg",name:"List-3.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDRXD5QWHB5YF8H3XM.jpeg",name:"List-4.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MD3C6H5Q9QX0SX8PSP.jpeg",name:"List-5.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDM6VHTFVXVD58V0D6.jpeg",name:"List-6.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MD3QT4RPG3VMM2NK5K.jpeg",name:"List-7.png"}],ru=[{AColumn:"01",BColumnWidth:"Ethan Parker",CColumnWidth:"Midnight Atlas",DColumnWidth:"Portland, OR",EColumnWidth:"On Display",image:zt[0],link:""},{AColumn:"02",BColumnWidth:"Madison Reed",CColumnWidth:"Echoes in Vermilion",DColumnWidth:"Savannah, GA",EColumnWidth:"Scheduled",image:zt[1],link:""},{AColumn:"03",BColumnWidth:"Noah Bennett",CColumnWidth:"Paper Constellations",DColumnWidth:"Madison, WI",EColumnWidth:"On Display",image:zt[2],link:""},{AColumn:"04",BColumnWidth:"Olivia Carter",CColumnWidth:"The Quiet Frequency",DColumnWidth:"Boise, ID",EColumnWidth:"On Display",image:zt[3],link:""},{AColumn:"05",BColumnWidth:"Mason Brooks",CColumnWidth:"Sights of Tomorrow",DColumnWidth:"Tampa, FL",EColumnWidth:"Postponed",image:zt[4],link:""},{AColumn:"06",BColumnWidth:"Sophia Mitchell",CColumnWidth:"Velvet Horizons",DColumnWidth:"Albuquerque, NM",EColumnWidth:"Scheduled",image:zt[5],link:""},{AColumn:"07",BColumnWidth:"Jackson Turner",CColumnWidth:"Ink & Aurora",DColumnWidth:"Pittsburgh, PA",EColumnWidth:"On Display",image:zt[6],link:""}],au=[...gn.flatMap(e=>[`${e}ColumnWidth`,`${e}ColumnPaddingLeft`,`${e}ColumnPaddingRight`,`${e}ColumnPaddingBottom`]),"columnsOrder"],su={type:"object",version:1,content:{type:"array",settings:{addItemWithoutImage:!0},display:{type:"array",ref:{columnsOrder:"settings.properties.columnsOrder",columnsCount:"settings.properties.columns"}},items:{type:"object",properties:{...qd(),image:{type:"object",label:"Image",display:{isObjectFitEditable:!1,type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},link:{type:"string",label:"Link",placeholder:"Add link...",display:{type:"text-input"}}},required:["image"]},default:ru},settings:{sizing:"auto auto",properties:{type:{type:"string",scope:"layout",title:"",display:{type:"radio-group"},enum:["A","B"]},columns:{type:"number",scope:"layout",title:"Columns",display:{type:"count-number"},min:1,max:5},wrapperWidth:{type:"number",scope:"layout",title:"Width",display:{type:"numeric-input"},min:0,max:9999},textPaddingLR:{type:"number",scope:"layout",title:"Text Padding LR",min:0,max:9999,display:{type:"range-control"}},entriesCount:{type:"number",scope:"layout",title:"Entries #",display:{type:"toggle-numeric-input",enum:["Auto","Fixed"]},min:1},cellMinHeight:{type:"number",scope:"layout",title:"Cell min height",display:{type:"numeric-input"},min:0,max:9999},imageOnHover:{type:"boolean",scope:"common",title:"Image On Hover",display:{type:"toggle-cycle",enum:["On","Off"]}},imageSize:{type:"object",scope:"layout",title:"Image size",display:{type:"min-max-input"},min:1,max:1440,properties:{min:{type:"number"},max:{type:"number"}}},dividerWidth:{type:"number",scope:"layout",title:"Divider width",display:{type:"numeric-input"},min:0,max:9999},showVisibility:{type:"array",scope:"common",title:"Show",display:{type:"double-toggle",enum:["Top","Bottom"]},items:{type:"boolean"},default:[!0,!1]},cut:{type:"number",scope:"layout",title:"Cut",display:{type:"toggle-numeric-input",enum:["Off","On"]},min:1},entryHoverEffect:{type:"string",scope:"common",title:"Entry Hover Effect",display:{type:"toggle-cycle",enum:["None","Default","Blinds"]}},cutCellMinHeight:{type:"number",scope:"layout",title:"Cell min height",display:{type:"numeric-input"},min:0,max:9999},cutLabel:{type:"string",scope:"common",title:"Cut Label",display:{type:"label-input"}},showCut:{type:"number",scope:"layout",title:"Show",display:{type:"toggle-numeric-input",enum:["All","Custom"]},min:1},rowPaddingTop:{type:"number",scope:"layout",title:"Row Padding Top",min:0,max:100,display:{type:"range-control"}},rowPaddingBottom:{type:"number",scope:"layout",title:"Row Padding Bottom",min:0,max:100,display:{type:"range-control"}},rowPaddingTopB:{type:"number",scope:"layout",title:"Row Padding Top",min:0,max:100,display:{type:"range-control"}},...Ud(),columnsOrder:{type:"array",scope:"layout",title:"Columns Order",display:{type:"reorder-input"},items:{type:"string"}},textColor:{type:"string",scope:"common",title:"Text Default",display:{type:"palette-color-picker"}},textHoverColor:{type:"string",scope:"common",title:"Text Hover",display:{type:"palette-color-picker"}},...Yd,backgroundColor:{type:"string",scope:"common",title:"BG Default",display:{type:"palette-color-picker"}},dividerColor:{type:"string",scope:"common",title:"Divider Default",display:{type:"palette-color-picker"}},backgroundHoverColor:{type:"string",scope:"common",title:"BG Hover",display:{type:"palette-color-picker"}},dividerHoverColor:{type:"string",scope:"common",title:"Divider Hover",display:{type:"palette-color-picker"}}},defaults:{imageOnHover:"Off",entryHoverEffect:"None",cutLabel:"SEE ALL",showVisibility:[!0,!0],textColor:"#767676",textHoverColor:"#767676",...Jd,backgroundColor:"#FFFFFF00",dividerColor:"#767676",backgroundHoverColor:"#FFFFFF00",dividerHoverColor:"#767676"},layoutDefaults:{m:er({type:"B",textPaddingLR:.0373,entriesCount:0,cellMinHeight:.02,imageSize:{min:80,max:320},dividerWidth:.002,cut:0,showCut:0,cutCellMinHeight:.043,rowPaddingTop:.01,rowPaddingBottom:.01,rowPaddingTopB:.01,textStroke:.003,textCorners:.192,textPadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},...tr({textFontSize:.043,textLineHeight:.043,textTextAlign:"center"})}),d:er({type:"A",textPaddingLR:.01,entriesCount:0,cellMinHeight:.03,imageSize:{min:80,max:320},dividerWidth:6e-4,cut:0,showCut:0,cutCellMinHeight:.03,rowPaddingTop:.01,rowPaddingBottom:.01,rowPaddingTopB:.01,textStroke:.001,textCorners:.05,textPadding:{top:.01,right:.01,bottom:.01,left:.01},...tr({textFontSize:.01,textLineHeight:.01})})},displayRules:[...Qd(),...iu.map(e=>({if:{name:"cut",value:0},then:{name:`properties.${e}.display.visible`,value:!1}})),{if:{name:"type",value:"A"},then:{name:"properties.textPaddingLR.display.visible",value:!1}},...ou.map(e=>({if:{name:"type",value:"B"},then:{name:`properties.${e}.display.visible`,value:!1}})),{if:{name:"type",value:"A"},then:{name:"properties.rowPaddingTopB.display.visible",value:!1}},...gn.map(e=>({if:{name:"type",value:"A"},then:{name:`properties.${e}ColumnPaddingBottom.display.visible`,value:!1}}))],layout:["__componentName__","name","type","columns","wrapperWidth","textPaddingLR","entriesCount","cellMinHeight","imageOnHover","imageSize","dividerWidth","showVisibility","cut","showCut","cutCellMinHeight","entryHoverEffect","cutLabel","rowPaddingTop","rowPaddingBottom","rowPaddingTopB",...au]},panels:[{id:"general",icon:"cursor",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name"]},"type",{type:"row",title:"",items:["columns","wrapperWidth"]},{type:"row",title:"",items:["entriesCount","cellMinHeight"]},{type:"row",title:"",items:["imageOnHover","imageSize"]},{type:"row",title:"",items:["entryHoverEffect"]},{type:"row",title:"Divider Settings",items:["dividerWidth","showVisibility"]},{type:"row",title:"",items:["cut"]},{type:"row",title:"Cut Settings",items:["cutLabel","cutCellMinHeight"]},{type:"row",title:"",items:["showCut"]}]},{id:"columnsOrder",icon:"layers",title:"Columns Order",tooltip:"Columns order",layout:["columnsOrder"]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[Zd]}],paletteBookmark:{items:[...eu],panelIds:["general","typeStyle"],stateItems:{default:["textColor","backgroundColor","dividerColor","textHoverColor","backgroundHoverColor","dividerHoverColor"]}}},lu={element:zd,id:"list",name:"Default List",category:"lists",layoutMode:"structured",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Programme_List.png "},version:1,defaultSize:{d:{width:720,height:540}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},schema:su,sourceCode:Kd},nr=300,ir=40;function cu(e){return`
7520
- .${e}-wrapper {
7521
- position: relative;
7522
- width: 100%;
7523
- height: 100%;
7524
- }
7525
-
7526
- .${e}-cover {
7527
- position: relative;
7528
- width: 100%;
7529
- height: 100%;
7530
- cursor: pointer;
7531
- }
7532
-
7533
- .${e}-cover-image {
7534
- display: block;
7535
- width: 100%;
7536
- height: 100%;
7537
- }
7538
-
7539
- .${e}-lightbox {
7540
- position: fixed;
7541
- inset: 0;
7542
- z-index: 9997;
7543
- display: flex;
7544
- flex-direction: column;
7545
- align-items: center;
7546
- justify-content: center;
7547
- }
7548
-
7549
- .${e}-lightbox-editor {
7550
- width: var(--cntrl-article-width, 100vw) !important;
7551
- margin-left: auto;
7552
- margin-right: auto;
7553
- }
7554
-
7555
- .${e}-lightbox-edit-mode {
7556
- z-index: 1;
7557
- }
7558
-
7559
- .${e}-lightbox-content {
7560
- position: relative;
7561
- z-index: 1;
7562
- display: flex;
7563
- flex-direction: column;
7564
- align-items: center;
7565
- justify-content: center;
7566
- width: 100%;
7567
- height: 100%;
7568
- box-sizing: border-box;
7569
- }
7570
-
7571
- .${e}-lightbox-backdrop {
7572
- position: absolute;
7573
- inset: 0;
7574
- pointer-events: none;
7575
- }
7576
-
7577
- .${e}-lightbox-strip {
7578
- position: relative;
7579
- flex: 1;
7580
- width: 100%;
7581
- min-height: 0;
7582
- display: flex;
7583
- flex-direction: row;
7584
- flex-wrap: nowrap;
7585
- align-items: center;
7586
- max-width: 100%;
7587
- overflow-x: auto;
7588
- scroll-snap-type: x mandatory;
7589
- box-sizing: border-box;
7590
- touch-action: pan-x;
7591
- scrollbar-width: none;
7592
- }
7593
-
7594
- .${e}-lightbox-strip[data-mouse-dragging="true"] {
7595
- cursor: grabbing;
7596
- scroll-snap-type: none;
7597
- }
7598
-
7599
- .${e}-lightbox-strip[data-mouse-draggable="true"] {
7600
- cursor: grab;
7601
- }
7602
-
7603
- .${e}-lightbox-strip::-webkit-scrollbar {
7604
- display: none;
7605
- }
7606
-
7607
- .${e}-strip-item {
7608
- position: relative;
7609
- flex: 0 0 auto;
7610
- height: 100%;
7611
- scroll-snap-align: start;
7612
- scroll-snap-stop: always;
7613
- }
7614
-
7615
- .${e}-thumbnails {
7616
- position: absolute;
7617
- bottom: 16px;
7618
- left: 50%;
7619
- transform: translateX(-50%);
7620
- z-index: 2;
7621
- display: flex;
7622
- flex-direction: row;
7623
- flex-wrap: nowrap;
7624
- align-items: center;
7625
- justify-content: center;
7626
- max-width: calc(100% - 32px);
7627
- overflow-x: auto;
7628
- scrollbar-width: none;
7629
- pointer-events: auto;
7630
- }
7631
-
7632
- .${e}-lightbox-editor .${e}-thumbnails {
7633
- overflow: visible;
7634
- }
7635
-
7636
- .${e}-thumbnails::-webkit-scrollbar {
7637
- display: none;
7638
- }
7639
-
7640
- .${e}-thumb {
7641
- flex: 0 0 auto;
7642
- display: flex;
7643
- align-items: center;
7644
- justify-content: center;
7645
- padding: 0;
7646
- border: 1px solid transparent;
7647
- background: transparent;
7648
- cursor: pointer;
7649
- opacity: 0.5;
7650
- transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
7651
- }
7652
-
7653
- .${e}-thumb[data-active="true"] {
7654
- opacity: 1;
7655
- }
7656
-
7657
- .${e}-thumbnails[data-thumbnail-active="invert"] .${e}-thumb[data-active="true"] .${e}-thumb-image {
7658
- filter: invert(1);
7659
- }
7660
-
7661
- .${e}-thumbnails[data-thumbnail-active="grayscale"] .${e}-thumb:not([data-active="true"]) .${e}-thumb-image {
7662
- filter: grayscale(1);
7663
- }
7664
-
7665
- .${e}-thumbnails[data-thumbnail-active="scale-up"] .${e}-thumb[data-active="true"] {
7666
- transform: scale(1.15);
7667
- }
7668
-
7669
- .${e}-thumbnails[data-thumbnail-active="opacity"] .${e}-thumb:not([data-active="true"]) {
7670
- opacity: 0.5;
7671
- }
7672
-
7673
- .${e}-thumb-image {
7674
- display: block;
7675
- max-width: ${ir}px;
7676
- max-height: ${ir}px;
7677
- width: auto;
7678
- height: auto;
7679
- object-fit: contain;
7680
- transition: filter 0.2s ease;
7681
- }
7682
- .${e}-close-icon {
7683
- position: relative;
7684
- flex-shrink: 0;
7685
- margin-left: auto;
7686
- pointer-events: auto;
7687
- z-index: 2;
7688
- display: flex;
7689
- align-items: center;
7690
- justify-content: center;
7691
- border: none;
7692
- background-color: transparent;
7693
- padding: 0;
7694
- }
7695
-
7696
- .${e}-close-icon-inner {
7697
- all: unset;
7698
- position: relative;
7699
- cursor: pointer;
7700
- width: 100%;
7701
- height: 100%;
7702
- pointer-events: auto;
7703
- }
7704
-
7705
- .${e}-close-icon-img {
7706
- position: absolute;
7707
- top: 50%;
7708
- left: 50%;
7709
- transform: translate(-50%, -50%);
7710
- }
7711
-
7712
- .${e}-text {
7713
- position: relative;
7714
- flex: 0 1 auto;
7715
- z-index: 2;
7716
- box-sizing: border-box;
7717
- pointer-events: none;
7718
- word-break: break-word;
7719
- }
7720
- .${e}-lightbox-content-inner {
7721
- position: absolute;
7722
- inset: 0;
7723
- z-index: 2;
7724
- pointer-events: none;
7725
- display: flex;
7726
- flex-direction: column;
7727
- }
7728
-
7729
- .${e}-lightbox-content-area {
7730
- position: relative;
7731
- display: flex;
7732
- flex-direction: row;
7733
- align-items: flex-start;
7734
- flex: 1;
7735
- min-width: 0;
7736
- }
7737
-
7738
- .${e}-control {
7739
- position: relative;
7740
- z-index: 2;
7741
- pointer-events: auto;
7742
- flex-shrink: 0;
7743
- }
7744
-
7745
- .${e}-control::before {
7746
- content: "";
7747
- position: absolute;
7748
- top: 0;
7749
- left: 0;
7750
- width: 100%;
7751
- height: 100%;
7752
- pointer-events: auto;
7753
- z-index: 10;
7754
- }
7755
- `}const du=e=>{let t=e;for(;t;){const n=t.style.getPropertyValue("--cntrl-article-width").trim();if(n)return n;const i=getComputedStyle(t).getPropertyValue("--cntrl-article-width").trim();if(i)return i;t=t.parentElement}},uu=3,pu=3,mu=20,or=e=>`max(${e}, ${mu}px)`,gu=({prefix:e,images:t,backgroundColor:n,thumbnailGap:i,imageGap:a,isEditor:s,isEditMode:o,isPreviewMode:d,closeIcon:l,closeIconMaxWidth:u,closeIconColor:p,closeIconHoverColor:I,thumbnailTrigger:b,thumbnailVisibility:w,thumbnailObjectFit:f,thumbnailActive:h,articleWidthCss:T,text:L,textMaxWidth:C,textStyle:m,contentMarginTop:z,contentMarginLeft:j,contentMarginRight:R,onClose:x})=>{const A=!!o,S=!s||!!d,K=!s||!!d,v=c.useRef(null),D=c.useRef([]),W=c.useRef(0),q=c.useRef({isActive:!1,startX:0,scrollLeft:0,hasMoved:!1}),G=t.length>1,$=G?pu:1,H=c.useMemo(()=>Array.from({length:$},()=>t).flat(),[t,$]),[_,B]=c.useState(!1),[k,P]=c.useState(!1),[te,ae]=c.useState(0),re=c.useRef(null),U=c.useRef(!1),N=c.useRef(null),oe=c.useCallback(()=>{U.current||(U.current=!0,P(!1),N.current=setTimeout(()=>{x()},nr))},[x]),ye=()=>{if(!G||t.length===0)return W.current=0,0;const M=D.current[0],F=D.current[t.length];if(!M||!F)return W.current;const O=F.offsetLeft-M.offsetLeft;return O>0&&(W.current=O),W.current},ce=(M=!1)=>{if(!G)return;const F=v.current,O=ye();!F||O<=0||(F.scrollLeft<=0?(F.scrollLeft+=O,M&&(q.current.scrollLeft+=O)):F.scrollLeft>=O*2&&(F.scrollLeft-=O,M&&(q.current.scrollLeft-=O)))},ge=(M=(F=>(F=v.current)==null?void 0:F.scrollLeft)()??0)=>{let O=0,ie=1/0;return D.current.forEach((pe,le)=>{if(!pe)return;const he=Math.abs(pe.offsetLeft-M);he<ie&&(ie=he,O=le)}),O},we=()=>{!v.current||t.length===0||re.current===null&&ae(ge()%t.length)},ee=()=>{re.current=null,we()},y=(M="smooth")=>{const F=v.current;if(!F||t.length===0)return;const O=ge(),ie=D.current[O];ie&&(F.scrollTo({left:ie.offsetLeft,behavior:M}),ae(O%t.length))},g=(M,F="smooth")=>{const O=v.current,ie=G?t.length+M:M,pe=D.current[ie];!O||!pe||(F==="smooth"?re.current=M:re.current=null,ae(M),O.scrollTo({left:pe.offsetLeft,behavior:F}))},V=M=>{if(!S||M.pointerType!=="mouse"||M.target.closest("[data-controls]"))return;const O=v.current;O&&(q.current={isActive:!0,startX:M.clientX,scrollLeft:O.scrollLeft,hasMoved:!1},O.setPointerCapture(M.pointerId))},J=M=>{if(!S||M.pointerType!=="mouse")return;const F=v.current;if(!F||!q.current.isActive)return;const O=M.clientX-q.current.startX;Math.abs(O)>uu&&(q.current.hasMoved=!0,B(!0)),q.current.hasMoved&&(M.preventDefault(),F.scrollLeft=q.current.scrollLeft-O,ce(!0),we())},Q=M=>{if(!S||M.pointerType!=="mouse")return;const F=v.current;if(!F)return;const O=q.current.hasMoved;q.current.isActive=!1,B(!1),F.hasPointerCapture(M.pointerId)&&F.releasePointerCapture(M.pointerId),ce(),O?y():we()};return c.useEffect(()=>{const M=requestAnimationFrame(()=>P(!0));return()=>cancelAnimationFrame(M)},[]),c.useEffect(()=>()=>{N.current&&clearTimeout(N.current)},[]),c.useEffect(()=>{const M=F=>{F.key==="Escape"&&oe()};return window.addEventListener("keydown",M),()=>window.removeEventListener("keydown",M)},[oe]),c.useEffect(()=>{const M=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=M}},[]),c.useLayoutEffect(()=>{ye(),g(0,"auto")},[t.length,G]),c.useEffect(()=>{const M=v.current;if(!M)return;let F=null;const O=()=>{ce(),we(),re.current!==null&&(F&&clearTimeout(F),F=setTimeout(()=>{re.current!==null&&ee()},150))},ie=()=>{re.current!==null&&(F&&(clearTimeout(F),F=null),ee())};M.addEventListener("scroll",O,{passive:!0}),M.addEventListener("scrollend",ie);const pe=new ResizeObserver(()=>{ye(),ce(),we()});return pe.observe(M),()=>{F&&clearTimeout(F),M.removeEventListener("scroll",O),M.removeEventListener("scrollend",ie),pe.disconnect()}},[t.length,G]),r.jsxs("div",{"data-selection":"none",className:`${e}-lightbox${s?` ${e}-lightbox-editor`:""}${o?` ${e}-lightbox-edit-mode`:""}`,onClick:oe,role:"dialog","aria-modal":"true","aria-label":"Image gallery",style:{opacity:k?1:0,transition:`opacity ${nr}ms ease`,pointerEvents:k?"auto":"none",...T?{"--cntrl-article-width":T}:{}},children:[r.jsx("div",{className:`${e}-lightbox-backdrop`,style:{backgroundColor:n}}),r.jsxs("div",{className:`${e}-lightbox-content`,onClick:M=>M.stopPropagation(),children:[r.jsx("div",{ref:v,className:`${e}-lightbox-strip`,style:{gap:a},"data-mouse-draggable":S&&t.length>0?"true":"false","data-mouse-dragging":_?"true":"false",onPointerDown:S?V:void 0,onPointerMove:S?J:void 0,onPointerUp:S?Q:void 0,onPointerCancel:S?Q:void 0,children:H.map((M,F)=>{const O=M.image.objectFit??"contain",ie=F%t.length,pe=Math.floor(F/t.length),le=pe===1,he=or(a),Y=`calc(-0.5 * (${he} + ${a}))`;return r.jsxs("div",{ref:Z=>{D.current[F]=Z},className:`${e}-strip-item`,style:{height:"100%"},"aria-hidden":!le,children:[r.jsx("img",{src:M.image.url,alt:le?M.image.name??"":"",draggable:!1,style:{display:"block",width:"100%",height:"100%",objectFit:O}}),A&&le&&ie<t.length-1&&r.jsx("div",{"data-controls":"imageGap","data-controls-axis":"x",style:{position:"absolute",top:0,right:Y,width:he,height:"100%",pointerEvents:"auto",zIndex:3}})]},`${pe}-${M.image.url}-${ie}`)})}),t.length>1&&w==="on"&&r.jsx("div",{className:`${e}-thumbnails`,"data-thumbnail-active":h,style:{gap:i},children:t.map((M,F)=>{const O=or(i),ie=`calc(-0.5 * (${O} + ${i}))`;return r.jsxs("div",{style:{position:"relative",flex:"0 0 auto"},children:[r.jsx("button",{type:"button",className:`${e}-thumb`,"data-active":te===F?"true":"false",onClick:()=>{b==="click"&&g(F)},onMouseEnter:()=>{K&&b==="hover"&&g(F)},"aria-label":M.image.name?`View ${M.image.name}`:`View image ${F+1}`,"aria-current":te===F?"true":void 0,children:r.jsx("img",{className:`${e}-thumb-image`,src:M.image.url,alt:"",draggable:!1})}),A&&F<t.length-1&&r.jsx("div",{"data-controls":"thumbnailGap","data-controls-axis":"x",style:{position:"absolute",top:0,right:ie,width:O,height:"100%",pointerEvents:"auto",zIndex:3}})]},`thumb-${M.image.url}-${F}`)})}),r.jsxs("div",{className:`${e}-lightbox-content-inner`,style:{width:"100%",height:"100%"},children:[r.jsx("div",{"data-controls":A?"contentMarginTop":void 0,className:A?`${e}-control`:void 0,style:{height:z,width:"100%"}}),r.jsxs("div",{style:{display:"flex",flexDirection:"row",width:"100%"},children:[r.jsx("div",{"data-controls":A?"contentMarginLeft":void 0,"data-controls-axis":A?"x":void 0,className:A?`${e}-control`:void 0,style:{width:j,flexShrink:0}}),r.jsxs("div",{className:`${e}-lightbox-content-area`,children:[L.length>0&&r.jsx("div",{className:`${e}-text`,style:{...m,maxWidth:C},children:r.jsx(sn,{content:L})}),l&&r.jsx("div",{className:`${e}-close-icon`,style:{width:E.scalingValue(u??0,s),height:E.scalingValue(u??0,s),"--close-icon-hover-color":I},children:r.jsx("button",{type:"button",className:`${e}-close-icon-inner`,onClick:oe,"aria-label":"Close",children:r.jsx(yt,{url:l,fill:p,hoverFill:I,className:`${e}-close-icon-img`})})})]}),r.jsx("div",{"data-controls":A?"contentMarginRight":void 0,"data-controls-axis":A?"x":void 0,className:A?`${e}-control`:void 0,style:{width:R,flexShrink:0}})]})]})]})]})},hu=({settings:e,content:t,isEditor:n,isEditMode:i,isPreviewMode:a,portalId:s})=>{const{prefix:o}=E.useScopedStyles(),{cover:d,coverFit:l,backgroundColor:u,thumbnailVisibility:p,thumbnailObjectFit:I,thumbnailTrigger:b,thumbnailActive:w,thumbnailGap:f,imageGap:h,textMaxWidth:T,textColor:L,textFontSize:C,textFontWeight:m,textFontFamily:z,textLineHeight:j,textLetterSpacing:R,closeIcon:x,closeIconMaxWidth:A,closeIconColor:S,closeIconHoverColor:K,contentMarginTop:v,contentMarginLeft:D,contentMarginRight:W}=e,q=re=>E.scalingValue(re,n??!1),G={color:L,fontFamily:Nn(z),fontSize:q(C),fontWeight:m,lineHeight:j,letterSpacing:q(R)},$=c.useRef(null),[H,_]=c.useState(!1),[B,k]=c.useState(),P=t??[],te=()=>{P.length!==0&&(n&&$.current&&k(du($.current)),_(!0))},ae=()=>{_(!1)};return r.jsxs(r.Fragment,{children:[r.jsxs("div",{ref:$,className:`${o}-wrapper`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:cu(o)}}),d?r.jsx("button",{type:"button",className:`${o}-cover`,onClick:te,style:{display:"block",padding:0,border:"none",background:"transparent"},"aria-label":"Open image gallery",children:r.jsx("img",{className:`${o}-cover-image`,src:d,alt:"cover",style:{objectFit:l==="cover"?"cover":"contain"}})}):null]}),H&&typeof document<"u"&&(()=>{var U;const re=(s?document.getElementById(s):null)??document.body;return In.createPortal(r.jsx(gu,{prefix:o,images:P,backgroundColor:u,thumbnailGap:q(f),imageGap:q(h??0),thumbnailVisibility:p,thumbnailObjectFit:I,thumbnailTrigger:b,thumbnailActive:w,text:((U=P.find(N=>Array.isArray(N.text)&&N.text.length>0))==null?void 0:U.text)??[],textMaxWidth:q(T),textStyle:G,contentMarginTop:q(v??0),contentMarginLeft:q(D??0),contentMarginRight:q(W??0),closeIcon:x,closeIconMaxWidth:A,closeIconColor:S,closeIconHoverColor:K,articleWidthCss:B,isEditor:n,isEditMode:i,isPreviewMode:a,onClose:ae}),re)})()]})},fu=`import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
7756
- import { createPortal } from 'react-dom';
7757
- import { CommonComponentProps } from '../props';
7758
- import { scalingValue } from '../utils/scalingValue';
7759
- import { useScopedStyles } from '../utils/useScopedStyles';
7760
- import { SvgImage } from '../helpers/SvgImage/SvgImage';
7761
- import { normalizeFontFamilyCssValue } from '../utils/textStylesToCss';
7762
- import { RichTextRenderer } from '../helpers/RichTextRenderer/RichTextRenderer';
7763
-
7764
- const LIGHTBOX_ANIM_MS = 300;
7765
- const THUMB_MAX_SIZE_PX = 40;
7766
-
7767
- function getCSS(P: string): string {
7768
- return \`
7769
- .\${P}-wrapper {
7770
- position: relative;
7771
- width: 100%;
7772
- height: 100%;
7773
- }
7774
-
7775
- .\${P}-cover {
7776
- position: relative;
7777
- width: 100%;
7778
- height: 100%;
7779
- cursor: pointer;
7780
- }
7781
-
7782
- .\${P}-cover-image {
7783
- display: block;
7784
- width: 100%;
7785
- height: 100%;
7786
- }
7787
-
7788
- .\${P}-lightbox {
7789
- position: fixed;
7790
- inset: 0;
7791
- z-index: 9997;
7792
- display: flex;
7793
- flex-direction: column;
7794
- align-items: center;
7795
- justify-content: center;
7796
- }
7797
-
7798
- .\${P}-lightbox-editor {
7799
- width: var(--cntrl-article-width, 100vw) !important;
7800
- margin-left: auto;
7801
- margin-right: auto;
7802
- }
7803
-
7804
- .\${P}-lightbox-edit-mode {
7805
- z-index: 1;
7806
- }
7807
-
7808
- .\${P}-lightbox-content {
7809
- position: relative;
7810
- z-index: 1;
7811
- display: flex;
7812
- flex-direction: column;
7813
- align-items: center;
7814
- justify-content: center;
7815
- width: 100%;
7816
- height: 100%;
7817
- box-sizing: border-box;
7818
- }
7819
-
7820
- .\${P}-lightbox-backdrop {
7821
- position: absolute;
7822
- inset: 0;
7823
- pointer-events: none;
7824
- }
7825
-
7826
- .\${P}-lightbox-strip {
7827
- position: relative;
7828
- flex: 1;
7829
- width: 100%;
7830
- min-height: 0;
7831
- display: flex;
7832
- flex-direction: row;
7833
- flex-wrap: nowrap;
7834
- align-items: center;
7835
- max-width: 100%;
7836
- overflow-x: auto;
7837
- scroll-snap-type: x mandatory;
7838
- box-sizing: border-box;
7839
- touch-action: pan-x;
7840
- scrollbar-width: none;
7841
- }
7842
-
7843
- .\${P}-lightbox-strip[data-mouse-dragging="true"] {
7844
- cursor: grabbing;
7845
- scroll-snap-type: none;
7846
- }
7847
-
7848
- .\${P}-lightbox-strip[data-mouse-draggable="true"] {
7849
- cursor: grab;
7850
- }
7851
-
7852
- .\${P}-lightbox-strip::-webkit-scrollbar {
7853
- display: none;
7854
- }
7855
-
7856
- .\${P}-strip-item {
7857
- position: relative;
7858
- flex: 0 0 auto;
7859
- height: 100%;
7860
- scroll-snap-align: start;
7861
- scroll-snap-stop: always;
7862
- }
7863
-
7864
- .\${P}-thumbnails {
7865
- position: absolute;
7866
- bottom: 16px;
7867
- left: 50%;
7868
- transform: translateX(-50%);
7869
- z-index: 2;
7870
- display: flex;
7871
- flex-direction: row;
7872
- flex-wrap: nowrap;
7873
- align-items: center;
7874
- justify-content: center;
7875
- max-width: calc(100% - 32px);
7876
- overflow-x: auto;
7877
- scrollbar-width: none;
7878
- pointer-events: auto;
7879
- }
7880
-
7881
- .\${P}-lightbox-editor .\${P}-thumbnails {
7882
- overflow: visible;
7883
- }
7884
-
7885
- .\${P}-thumbnails::-webkit-scrollbar {
7886
- display: none;
7887
- }
7888
-
7889
- .\${P}-thumb {
7890
- flex: 0 0 auto;
7891
- display: flex;
7892
- align-items: center;
7893
- justify-content: center;
7894
- padding: 0;
7895
- border: 1px solid transparent;
7896
- background: transparent;
7897
- cursor: pointer;
7898
- opacity: 0.5;
7899
- transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
7900
- }
7901
-
7902
- .\${P}-thumb[data-active="true"] {
7903
- opacity: 1;
7904
- }
7905
-
7906
- .\${P}-thumbnails[data-thumbnail-active="invert"] .\${P}-thumb[data-active="true"] .\${P}-thumb-image {
7907
- filter: invert(1);
7908
- }
7909
-
7910
- .\${P}-thumbnails[data-thumbnail-active="grayscale"] .\${P}-thumb:not([data-active="true"]) .\${P}-thumb-image {
7911
- filter: grayscale(1);
7912
- }
7913
-
7914
- .\${P}-thumbnails[data-thumbnail-active="scale-up"] .\${P}-thumb[data-active="true"] {
7915
- transform: scale(1.15);
7916
- }
7917
-
7918
- .\${P}-thumbnails[data-thumbnail-active="opacity"] .\${P}-thumb:not([data-active="true"]) {
7919
- opacity: 0.5;
7920
- }
7921
-
7922
- .\${P}-thumb-image {
7923
- display: block;
7924
- max-width: \${THUMB_MAX_SIZE_PX}px;
7925
- max-height: \${THUMB_MAX_SIZE_PX}px;
7926
- width: auto;
7927
- height: auto;
7928
- object-fit: contain;
7929
- transition: filter 0.2s ease;
7930
- }
7931
- .\${P}-close-icon {
7932
- position: relative;
7933
- flex-shrink: 0;
7934
- margin-left: auto;
7935
- pointer-events: auto;
7936
- z-index: 2;
7937
- display: flex;
7938
- align-items: center;
7939
- justify-content: center;
7940
- border: none;
7941
- background-color: transparent;
7942
- padding: 0;
7943
- }
7944
-
7945
- .\${P}-close-icon-inner {
7946
- all: unset;
7947
- position: relative;
7948
- cursor: pointer;
7949
- width: 100%;
7950
- height: 100%;
7951
- pointer-events: auto;
7952
- }
7953
-
7954
- .\${P}-close-icon-img {
7955
- position: absolute;
7956
- top: 50%;
7957
- left: 50%;
7958
- transform: translate(-50%, -50%);
7959
- }
7960
-
7961
- .\${P}-text {
7962
- position: relative;
7963
- flex: 0 1 auto;
7964
- z-index: 2;
7965
- box-sizing: border-box;
7966
- pointer-events: none;
7967
- word-break: break-word;
7968
- }
7969
- .\${P}-lightbox-content-inner {
7970
- position: absolute;
7971
- inset: 0;
7972
- z-index: 2;
7973
- pointer-events: none;
7974
- display: flex;
7975
- flex-direction: column;
7976
- }
7977
-
7978
- .\${P}-lightbox-content-area {
7979
- position: relative;
7980
- display: flex;
7981
- flex-direction: row;
7982
- align-items: flex-start;
7983
- flex: 1;
7984
- min-width: 0;
7985
- }
7986
-
7987
- .\${P}-control {
7988
- position: relative;
7989
- z-index: 2;
7990
- pointer-events: auto;
7991
- flex-shrink: 0;
7992
- }
7993
-
7994
- .\${P}-control::before {
7995
- content: "";
7996
- position: absolute;
7997
- top: 0;
7998
- left: 0;
7999
- width: 100%;
8000
- height: 100%;
8001
- pointer-events: auto;
8002
- z-index: 10;
8003
- }
8004
- \`;
8005
- }
8006
-
8007
- const getArticleWidthCSSValue = (start: HTMLElement | null): string | undefined => {
8008
- let el = start;
8009
- while (el) {
8010
- const inline = el.style.getPropertyValue('--cntrl-article-width').trim();
8011
- if (inline) return inline;
8012
- const computed = getComputedStyle(el).getPropertyValue('--cntrl-article-width').trim();
8013
- if (computed) return computed;
8014
- el = el.parentElement;
8015
- }
8016
- return undefined;
8017
- };
8018
-
8019
- type LightboxOverlayProps = {
8020
- prefix: string;
8021
- images: LightboxStripItem[];
8022
- backgroundColor: string;
8023
- thumbnailGap: string;
8024
- imageGap: string;
8025
- closeIcon: string | null;
8026
- closeIconMaxWidth: number;
8027
- closeIconColor: string;
8028
- closeIconHoverColor: string;
8029
- thumbnailVisibility: 'on' | 'off';
8030
- thumbnailObjectFit: 'cover' | 'contain';
8031
- thumbnailTrigger: 'click' | 'hover';
8032
- thumbnailActive: 'invert' | 'grayscale' | 'scale-up' | 'opacity';
8033
- text: any[];
8034
- textMaxWidth: string;
8035
- textStyle: React.CSSProperties;
8036
- contentMarginTop: string;
8037
- contentMarginLeft: string;
8038
- contentMarginRight: string;
8039
- articleWidthCss?: string;
8040
- isEditor?: boolean;
8041
- isEditMode?: boolean;
8042
- isPreviewMode?: boolean;
8043
- onClose: () => void;
8044
- };
8045
-
8046
- const MOUSE_DRAG_THRESHOLD_PX = 3;
8047
- const LOOP_COPIES = 3;
8048
- const GAP_LABEL_AREA_PX = 20;
8049
-
8050
- const getGapControlSize = (gap: string) => \`max(\${gap}, \${GAP_LABEL_AREA_PX}px)\`;
8051
-
8052
- const LightboxOverlay = ({
8053
- prefix: P,
8054
- images,
8055
- backgroundColor,
8056
- thumbnailGap,
8057
- imageGap,
8058
- isEditor,
8059
- isEditMode,
8060
- isPreviewMode,
8061
- closeIcon,
8062
- closeIconMaxWidth,
8063
- closeIconColor,
8064
- closeIconHoverColor,
8065
- thumbnailTrigger,
8066
- thumbnailVisibility,
8067
- thumbnailObjectFit,
8068
- thumbnailActive,
8069
- articleWidthCss,
8070
- text,
8071
- textMaxWidth,
8072
- textStyle,
8073
- contentMarginTop,
8074
- contentMarginLeft,
8075
- contentMarginRight,
8076
- onClose,
8077
- }: LightboxOverlayProps) => {
8078
- const showControls = Boolean(isEditMode);
8079
- const allowMouseDrag = !isEditor || Boolean(isPreviewMode);
8080
- const allowThumbnailHover = !isEditor || Boolean(isPreviewMode);
8081
- const stripRef = useRef<HTMLDivElement>(null);
8082
- const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
8083
- const setWidthRef = useRef(0);
8084
- const mouseDragRef = useRef({
8085
- isActive: false,
8086
- startX: 0,
8087
- scrollLeft: 0,
8088
- hasMoved: false,
8089
- });
8090
- const isLoopEnabled = images.length > 1;
8091
- const loopCopies = isLoopEnabled ? LOOP_COPIES : 1;
8092
- const flatItems = useMemo(
8093
- () => Array.from({ length: loopCopies }, () => images).flat(),
8094
- [images, loopCopies],
8095
- );
8096
- const [isMouseDragging, setIsMouseDragging] = useState(false);
8097
- const [isVisible, setIsVisible] = useState(false);
8098
- const [activeIndex, setActiveIndex] = useState(0);
8099
- const lockedActiveIndexRef = useRef<number | null>(null);
8100
- const isClosingRef = useRef(false);
8101
- const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
8102
-
8103
- const handleClose = useCallback(() => {
8104
- if (isClosingRef.current) return;
8105
- isClosingRef.current = true;
8106
- setIsVisible(false);
8107
- closeTimeoutRef.current = setTimeout(() => {
8108
- onClose();
8109
- }, LIGHTBOX_ANIM_MS);
8110
- }, [onClose]);
8111
-
8112
- const measureSetWidth = () => {
8113
- if (!isLoopEnabled || images.length === 0) {
8114
- setWidthRef.current = 0;
8115
- return 0;
8116
- }
8117
- const firstItem = itemRefs.current[0];
8118
- const firstMiddleSetItem = itemRefs.current[images.length];
8119
- if (!firstItem || !firstMiddleSetItem) return setWidthRef.current;
8120
- const nextSetWidth = firstMiddleSetItem.offsetLeft - firstItem.offsetLeft;
8121
- if (nextSetWidth > 0) {
8122
- setWidthRef.current = nextSetWidth;
8123
- }
8124
- return setWidthRef.current;
8125
- };
8126
-
8127
- const normalizeInfiniteScroll = (adjustMouseDragAnchor = false) => {
8128
- if (!isLoopEnabled) return;
8129
- const strip = stripRef.current;
8130
- const setWidth = measureSetWidth();
8131
- if (!strip || setWidth <= 0) return;
8132
-
8133
- if (strip.scrollLeft <= 0) {
8134
- strip.scrollLeft += setWidth;
8135
- if (adjustMouseDragAnchor) {
8136
- mouseDragRef.current.scrollLeft += setWidth;
8137
- }
8138
- } else if (strip.scrollLeft >= setWidth * 2) {
8139
- strip.scrollLeft -= setWidth;
8140
- if (adjustMouseDragAnchor) {
8141
- mouseDragRef.current.scrollLeft -= setWidth;
8142
- }
8143
- }
8144
- };
8145
-
8146
- const getNearestFlatIndex = (scrollLeft = stripRef.current?.scrollLeft ?? 0) => {
8147
- let closestFlatIndex = 0;
8148
- let closestDistance = Infinity;
8149
- itemRefs.current.forEach((item, flatIndex) => {
8150
- if (!item) return;
8151
- const distance = Math.abs(item.offsetLeft - scrollLeft);
8152
- if (distance < closestDistance) {
8153
- closestDistance = distance;
8154
- closestFlatIndex = flatIndex;
8155
- }
8156
- });
8157
- return closestFlatIndex;
8158
- };
8159
-
8160
- const updateActiveIndex = () => {
8161
- if (!stripRef.current || images.length === 0) return;
8162
- if (lockedActiveIndexRef.current !== null) return;
8163
- setActiveIndex(getNearestFlatIndex() % images.length);
8164
- };
8165
-
8166
- const releaseActiveIndexLock = () => {
8167
- lockedActiveIndexRef.current = null;
8168
- updateActiveIndex();
8169
- };
8170
-
8171
- const snapToNearestItem = (behavior: ScrollBehavior = 'smooth') => {
8172
- const strip = stripRef.current;
8173
- if (!strip || images.length === 0) return;
8174
- const flatIndex = getNearestFlatIndex();
8175
- const item = itemRefs.current[flatIndex];
8176
- if (!item) return;
8177
- strip.scrollTo({
8178
- left: item.offsetLeft,
8179
- behavior,
8180
- });
8181
- setActiveIndex(flatIndex % images.length);
8182
- };
8183
-
8184
- const scrollToIndex = (index: number, behavior: ScrollBehavior = 'smooth') => {
8185
- const strip = stripRef.current;
8186
- const flatIndex = isLoopEnabled ? images.length + index : index;
8187
- const item = itemRefs.current[flatIndex];
8188
- if (!strip || !item) return;
8189
- if (behavior === 'smooth') {
8190
- lockedActiveIndexRef.current = index;
8191
- } else {
8192
- lockedActiveIndexRef.current = null;
8193
- }
8194
- setActiveIndex(index);
8195
- strip.scrollTo({
8196
- left: item.offsetLeft,
8197
- behavior,
8198
- });
8199
- };
8200
-
8201
- const onStripPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
8202
- if (!allowMouseDrag) return;
8203
- if (event.pointerType !== 'mouse') return;
8204
- const target = event.target as HTMLElement;
8205
- if (target.closest('[data-controls]')) return;
8206
- const strip = stripRef.current;
8207
- if (!strip) return;
8208
- mouseDragRef.current = {
8209
- isActive: true,
8210
- startX: event.clientX,
8211
- scrollLeft: strip.scrollLeft,
8212
- hasMoved: false,
8213
- };
8214
- strip.setPointerCapture(event.pointerId);
8215
- };
8216
-
8217
- const onStripPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
8218
- if (!allowMouseDrag) return;
8219
- if (event.pointerType !== 'mouse') return;
8220
- const strip = stripRef.current;
8221
- if (!strip || !mouseDragRef.current.isActive) return;
8222
- const deltaX = event.clientX - mouseDragRef.current.startX;
8223
- if (Math.abs(deltaX) > MOUSE_DRAG_THRESHOLD_PX) {
8224
- mouseDragRef.current.hasMoved = true;
8225
- setIsMouseDragging(true);
8226
- }
8227
- if (mouseDragRef.current.hasMoved) {
8228
- event.preventDefault();
8229
- strip.scrollLeft = mouseDragRef.current.scrollLeft - deltaX;
8230
- normalizeInfiniteScroll(true);
8231
- updateActiveIndex();
8232
- }
8233
- };
8234
-
8235
- const endStripMouseDrag = (event: React.PointerEvent<HTMLDivElement>) => {
8236
- if (!allowMouseDrag) return;
8237
- if (event.pointerType !== 'mouse') return;
8238
- const strip = stripRef.current;
8239
- if (!strip) return;
8240
- const hadMoved = mouseDragRef.current.hasMoved;
8241
- mouseDragRef.current.isActive = false;
8242
- setIsMouseDragging(false);
8243
- if (strip.hasPointerCapture(event.pointerId)) {
8244
- strip.releasePointerCapture(event.pointerId);
8245
- }
8246
- normalizeInfiniteScroll();
8247
- if (hadMoved) {
8248
- snapToNearestItem();
8249
- } else {
8250
- updateActiveIndex();
8251
- }
8252
- };
8253
-
8254
- useEffect(() => {
8255
- const frame = requestAnimationFrame(() => setIsVisible(true));
8256
- return () => cancelAnimationFrame(frame);
8257
- }, []);
8258
-
8259
- useEffect(() => {
8260
- return () => {
8261
- if (closeTimeoutRef.current) {
8262
- clearTimeout(closeTimeoutRef.current);
8263
- }
8264
- };
8265
- }, []);
8266
-
8267
- useEffect(() => {
8268
- const onKeyDown = (event: KeyboardEvent) => {
8269
- if (event.key === 'Escape') {
8270
- handleClose();
8271
- }
8272
- };
8273
- window.addEventListener('keydown', onKeyDown);
8274
- return () => window.removeEventListener('keydown', onKeyDown);
8275
- }, [handleClose]);
8276
-
8277
- useEffect(() => {
8278
- const originalOverflow = document.body.style.overflow;
8279
- document.body.style.overflow = 'hidden';
8280
- return () => {
8281
- document.body.style.overflow = originalOverflow;
8282
- };
8283
- }, []);
8284
-
8285
- useLayoutEffect(() => {
8286
- measureSetWidth();
8287
- scrollToIndex(0, 'auto');
8288
- }, [images.length, isLoopEnabled]);
8289
-
8290
- useEffect(() => {
8291
- const strip = stripRef.current;
8292
- if (!strip) return;
8293
- let scrollEndTimer: ReturnType<typeof setTimeout> | null = null;
8294
- const onScroll = () => {
8295
- normalizeInfiniteScroll();
8296
- updateActiveIndex();
8297
- if (lockedActiveIndexRef.current !== null) {
8298
- if (scrollEndTimer) clearTimeout(scrollEndTimer);
8299
- scrollEndTimer = setTimeout(() => {
8300
- if (lockedActiveIndexRef.current !== null) {
8301
- releaseActiveIndexLock();
8302
- }
8303
- }, 150);
8304
- }
8305
- };
8306
- const onScrollEnd = () => {
8307
- if (lockedActiveIndexRef.current !== null) {
8308
- if (scrollEndTimer) {
8309
- clearTimeout(scrollEndTimer);
8310
- scrollEndTimer = null;
8311
- }
8312
- releaseActiveIndexLock();
8313
- }
8314
- };
8315
- strip.addEventListener('scroll', onScroll, { passive: true });
8316
- strip.addEventListener('scrollend', onScrollEnd);
8317
- const observer = new ResizeObserver(() => {
8318
- measureSetWidth();
8319
- normalizeInfiniteScroll();
8320
- updateActiveIndex();
8321
- });
8322
- observer.observe(strip);
8323
- return () => {
8324
- if (scrollEndTimer) clearTimeout(scrollEndTimer);
8325
- strip.removeEventListener('scroll', onScroll);
8326
- strip.removeEventListener('scrollend', onScrollEnd);
8327
- observer.disconnect();
8328
- };
8329
- }, [images.length, isLoopEnabled]);
8330
-
8331
- return (
8332
- <div
8333
- data-selection="none"
8334
- className={\`\${P}-lightbox\${isEditor ? \` \${P}-lightbox-editor\` : ''}\${isEditMode ? \` \${P}-lightbox-edit-mode\` : ''}\`}
8335
- onClick={handleClose}
8336
- role="dialog"
8337
- aria-modal="true"
8338
- aria-label="Image gallery"
8339
- style={{
8340
- opacity: isVisible ? 1 : 0,
8341
- transition: \`opacity \${LIGHTBOX_ANIM_MS}ms ease\`,
8342
- pointerEvents: isVisible ? 'auto' : 'none',
8343
- ...(articleWidthCss ? { ['--cntrl-article-width' as string]: articleWidthCss } : {}),
8344
- }}
8345
- >
8346
- <div className={\`\${P}-lightbox-backdrop\`} style={{ backgroundColor }} />
8347
- <div
8348
- className={\`\${P}-lightbox-content\`}
8349
- onClick={(event) => event.stopPropagation()}
8350
- >
8351
- <div
8352
- ref={stripRef}
8353
- className={\`\${P}-lightbox-strip\`}
8354
- style={{ gap: imageGap }}
8355
- data-mouse-draggable={allowMouseDrag && images.length > 0 ? 'true' : 'false'}
8356
- data-mouse-dragging={isMouseDragging ? 'true' : 'false'}
8357
- onPointerDown={allowMouseDrag ? onStripPointerDown : undefined}
8358
- onPointerMove={allowMouseDrag ? onStripPointerMove : undefined}
8359
- onPointerUp={allowMouseDrag ? endStripMouseDrag : undefined}
8360
- onPointerCancel={allowMouseDrag ? endStripMouseDrag : undefined}
8361
- >
8362
- {flatItems.map((item, flatIndex) => {
8363
- const itemObjectFit = item.image.objectFit ?? 'contain';
8364
- const sourceIndex = flatIndex % images.length;
8365
- const copyIndex = Math.floor(flatIndex / images.length);
8366
- const isMiddleCopy = copyIndex === 1;
8367
-
8368
- const imageGapControlSize = getGapControlSize(imageGap);
8369
- const imageGapControlRight = \`calc(-0.5 * (\${imageGapControlSize} + \${imageGap}))\`;
8370
-
8371
- return (
8372
- <div
8373
- key={\`\${copyIndex}-\${item.image.url}-\${sourceIndex}\`}
8374
- ref={(element) => {
8375
- itemRefs.current[flatIndex] = element;
8376
- }}
8377
- className={\`\${P}-strip-item\`}
8378
- style={{
8379
- height: '100%',
8380
- }}
8381
- aria-hidden={!isMiddleCopy}
8382
- >
8383
- <img
8384
- src={item.image.url}
8385
- alt={isMiddleCopy ? (item.image.name ?? '') : ''}
8386
- draggable={false}
8387
- style={{
8388
- display: 'block',
8389
- width: '100%',
8390
- height: '100%',
8391
- objectFit: itemObjectFit,
8392
- }}
8393
- />
8394
- {showControls && isMiddleCopy && sourceIndex < images.length - 1 && (
8395
- <div
8396
- data-controls="imageGap"
8397
- data-controls-axis="x"
8398
- style={{
8399
- position: 'absolute',
8400
- top: 0,
8401
- right: imageGapControlRight,
8402
- width: imageGapControlSize,
8403
- height: '100%',
8404
- pointerEvents: 'auto',
8405
- zIndex: 3,
8406
- }}
8407
- />
8408
- )}
8409
- </div>
8410
- );
8411
- })}
8412
- </div>
8413
-
8414
- {images.length > 1 && thumbnailVisibility === 'on' && (
8415
- <div
8416
- className={\`\${P}-thumbnails\`}
8417
- data-thumbnail-active={thumbnailActive}
8418
- style={{ gap: thumbnailGap }}
8419
- >
8420
- {images.map((item, index) => {
8421
- const thumbnailGapControlSize = getGapControlSize(thumbnailGap);
8422
- const thumbnailGapControlRight = \`calc(-0.5 * (\${thumbnailGapControlSize} + \${thumbnailGap}))\`;
8423
-
8424
- return (
8425
- <div
8426
- key={\`thumb-\${item.image.url}-\${index}\`}
8427
- style={{ position: 'relative', flex: '0 0 auto' }}
8428
- >
8429
- <button
8430
- type="button"
8431
- className={\`\${P}-thumb\`}
8432
- data-active={activeIndex === index ? 'true' : 'false'}
8433
- onClick={() => {
8434
- if (thumbnailTrigger === 'click') {
8435
- scrollToIndex(index);
8436
- }
8437
- }}
8438
- onMouseEnter={() => {
8439
- if (allowThumbnailHover && thumbnailTrigger === 'hover') {
8440
- scrollToIndex(index);
8441
- }
8442
- }}
8443
- aria-label={item.image.name ? \`View \${item.image.name}\` : \`View image \${index + 1}\`}
8444
- aria-current={activeIndex === index ? 'true' : undefined}
8445
- >
8446
- <img
8447
- className={\`\${P}-thumb-image\`}
8448
- src={item.image.url}
8449
- alt=""
8450
- draggable={false}
8451
- />
8452
- </button>
8453
- {showControls && index < images.length - 1 && (
8454
- <div
8455
- data-controls="thumbnailGap"
8456
- data-controls-axis="x"
8457
- style={{
8458
- position: 'absolute',
8459
- top: 0,
8460
- right: thumbnailGapControlRight,
8461
- width: thumbnailGapControlSize,
8462
- height: '100%',
8463
- pointerEvents: 'auto',
8464
- zIndex: 3,
8465
- }}
8466
- />
8467
- )}
8468
- </div>
8469
- );
8470
- })}
8471
- </div>
8472
- )}
8473
- <div className={\`\${P}-lightbox-content-inner\`} style={{ width: '100%', height: '100%' }}>
8474
- <div
8475
- data-controls={showControls ? 'contentMarginTop' : undefined}
8476
- className={showControls ? \`\${P}-control\` : undefined}
8477
- style={{ height: contentMarginTop, width: '100%' }}
8478
- />
8479
- <div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
8480
- <div
8481
- data-controls={showControls ? 'contentMarginLeft' : undefined}
8482
- data-controls-axis={showControls ? 'x' : undefined}
8483
- className={showControls ? \`\${P}-control\` : undefined}
8484
- style={{ width: contentMarginLeft, flexShrink: 0 }}
8485
- />
8486
- <div className={\`\${P}-lightbox-content-area\`}>
8487
- {text.length > 0 && (
8488
- <div className={\`\${P}-text\`} style={{ ...textStyle, maxWidth: textMaxWidth }}>
8489
- <RichTextRenderer content={text} />
8490
- </div>
8491
- )}
8492
- {closeIcon && (
8493
- <div
8494
- className={\`\${P}-close-icon\`}
8495
- style={{
8496
- width: scalingValue(closeIconMaxWidth ?? 0, isEditor),
8497
- height: scalingValue(closeIconMaxWidth ?? 0, isEditor),
8498
- ['--close-icon-hover-color' as string]: closeIconHoverColor,
8499
- }}
8500
- >
8501
- <button
8502
- type="button"
8503
- className={\`\${P}-close-icon-inner\`}
8504
- onClick={handleClose}
8505
- aria-label="Close"
8506
- >
8507
- <SvgImage url={closeIcon} fill={closeIconColor} hoverFill={closeIconHoverColor} className={\`\${P}-close-icon-img\`}/>
8508
- </button>
8509
- </div>
8510
- )}
8511
- </div>
8512
- <div
8513
- data-controls={showControls ? 'contentMarginRight' : undefined}
8514
- data-controls-axis={showControls ? 'x' : undefined}
8515
- className={showControls ? \`\${P}-control\` : undefined}
8516
- style={{ width: contentMarginRight, flexShrink: 0 }}
8517
- />
8518
- </div>
8519
- </div>
8520
- </div>
8521
- </div>
8522
- );
8523
- };
8524
-
8525
- type LightboxStripProps = {
8526
- settings: LightboxStripSettings;
8527
- content?: LightboxStripItem[];
8528
- isEditor?: boolean;
8529
- isEditMode?: boolean;
8530
- isPreviewMode?: boolean;
8531
- portalId?: string;
8532
- } & CommonComponentProps;
8533
-
8534
- export const LightboxStrip = ({ settings, content, isEditor, isEditMode, isPreviewMode, portalId }: LightboxStripProps) => {
8535
- const { prefix: P } = useScopedStyles();
8536
- const {
8537
- cover,
8538
- coverFit,
8539
- backgroundColor,
8540
- thumbnailVisibility,
8541
- thumbnailObjectFit,
8542
- thumbnailTrigger,
8543
- thumbnailActive,
8544
- thumbnailGap,
8545
- imageGap,
8546
- textMaxWidth,
8547
- textColor,
8548
- textFontSize,
8549
- textFontWeight,
8550
- textFontFamily,
8551
- textLineHeight,
8552
- textLetterSpacing,
8553
- closeIcon,
8554
- closeIconMaxWidth,
8555
- closeIconColor,
8556
- closeIconHoverColor,
8557
- contentMarginTop,
8558
- contentMarginLeft,
8559
- contentMarginRight
8560
- } = settings;
8561
-
8562
- const scaled = (value: number) => scalingValue(value, isEditor ?? false);
8563
- const textStyle: React.CSSProperties = {
8564
- color: textColor,
8565
- fontFamily: normalizeFontFamilyCssValue(textFontFamily),
8566
- fontSize: scaled(textFontSize),
8567
- fontWeight: textFontWeight,
8568
- lineHeight: textLineHeight,
8569
- letterSpacing: scaled(textLetterSpacing),
8570
- };
8571
- const wrapperRef = useRef<HTMLDivElement>(null);
8572
- const [lightboxOpen, setLightboxOpen] = useState(false);
8573
- const [articleWidthCss, setArticleWidthCss] = useState<string | undefined>();
8574
- const items = content ?? [];
8575
-
8576
- const openLightbox = () => {
8577
- if (items.length === 0) return;
8578
- if (isEditor && wrapperRef.current) {
8579
- setArticleWidthCss(getArticleWidthCSSValue(wrapperRef.current));
8580
- }
8581
- setLightboxOpen(true);
8582
- };
8583
-
8584
- const closeLightbox = () => {
8585
- setLightboxOpen(false);
8586
- };
8587
-
8588
- return (
8589
- <>
8590
- <div ref={wrapperRef} className={\`\${P}-wrapper\`}>
8591
- <style dangerouslySetInnerHTML={{ __html: getCSS(P) }} />
8592
- {cover ? (
8593
- <button
8594
- type="button"
8595
- className={\`\${P}-cover\`}
8596
- onClick={openLightbox}
8597
- style={{
8598
- display: 'block',
8599
- padding: 0,
8600
- border: 'none',
8601
- background: 'transparent',
8602
- }}
8603
- aria-label='Open image gallery'
8604
- >
8605
- <img
8606
- className={\`\${P}-cover-image\`}
8607
- src={cover}
8608
- alt='cover'
8609
- style={{ objectFit: coverFit === 'cover' ? 'cover' : 'contain' }}
8610
- />
8611
- </button>
8612
- ) : null}
8613
- </div>
8614
-
8615
- {lightboxOpen && typeof document !== 'undefined' && (() => {
8616
- const portalTarget = (portalId ? document.getElementById(portalId) : null) ?? document.body;
8617
- return createPortal(
8618
- <LightboxOverlay
8619
- prefix={P}
8620
- images={items}
8621
- backgroundColor={backgroundColor}
8622
- thumbnailGap={scaled(thumbnailGap)}
8623
- imageGap={scaled(imageGap ?? 0)}
8624
- thumbnailVisibility={thumbnailVisibility}
8625
- thumbnailObjectFit={thumbnailObjectFit}
8626
- thumbnailTrigger={thumbnailTrigger}
8627
- thumbnailActive={thumbnailActive}
8628
- text={items.find((item) => Array.isArray(item.text) && item.text.length > 0)?.text ?? []}
8629
- textMaxWidth={scaled(textMaxWidth)}
8630
- textStyle={textStyle}
8631
- contentMarginTop={scaled(contentMarginTop ?? 0)}
8632
- contentMarginLeft={scaled(contentMarginLeft ?? 0)}
8633
- contentMarginRight={scaled(contentMarginRight ?? 0)}
8634
- closeIcon={closeIcon}
8635
- closeIconMaxWidth={closeIconMaxWidth}
8636
- closeIconColor={closeIconColor}
8637
- closeIconHoverColor={closeIconHoverColor}
8638
- articleWidthCss={articleWidthCss}
8639
- isEditor={isEditor}
8640
- isEditMode={isEditMode}
8641
- isPreviewMode={isPreviewMode}
8642
- onClose={closeLightbox}
8643
- />,
8644
- portalTarget,
8645
- );
8646
- })()}
8647
- </>
8648
- );
8649
- };
8650
-
8651
- export type LightboxStripItem = {
8652
- image: {
8653
- url: string;
8654
- name?: string;
8655
- objectFit?: 'cover' | 'contain';
8656
- };
8657
- text?: any[];
8658
- };
8659
-
8660
- export type LightboxStripSettings = {
8661
- cover: string | null;
8662
- coverFit: 'cover' | 'fit';
8663
- backgroundColor: string;
8664
- thumbnailVisibility: 'on' | 'off';
8665
- thumbnailObjectFit: 'cover' | 'contain';
8666
- thumbnailTrigger: 'click' | 'hover';
8667
- thumbnailActive: 'invert' | 'grayscale' | 'scale-up' | 'opacity';
8668
- thumbnailGap: number;
8669
- imageGap?: number;
8670
- textMaxWidth: number;
8671
- textColor: string;
8672
- textFontSize: number;
8673
- textFontWeight: number;
8674
- textFontFamily: string;
8675
- textLineHeight: number;
8676
- textLetterSpacing: number;
8677
- contentMarginTop: number;
8678
- contentMarginLeft: number;
8679
- contentMarginRight: number;
8680
- closeIcon: string | null;
8681
- closeIconMaxWidth: number;
8682
- closeIconColor: string;
8683
- closeIconHoverColor: string;
8684
- };
8685
- `,yu="https://cdn.cntrl.site/component-assets/Close.svg",vu={fontSettings:{type:"object",display:{type:"font-settings-weight",visible:!0},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},bu={type:"object",version:1,settings:{properties:{cover:{type:"string",scope:"common",title:"",display:{type:"settings-image-input"}},coverFit:{type:"string",scope:"common",title:"Display",display:{type:"toggle-cycle",enum:["cover","fit"]}},thumbnailGap:{type:"number",scope:"layout",title:"Thumbnail Gap",min:0,max:200,display:{type:"range-control"}},imageGap:{type:"number",scope:"layout",title:"Image Gap",min:0,max:200,display:{type:"range-control"}},backgroundColor:{type:"string",scope:"layout",title:"BG",display:{type:"settings-color-picker"}},objectFit:{type:"string",scope:"common",title:"Display",display:{type:"toggle-cycle",enum:["cover","fit"]}},closeIcon:{type:["string","null"],scope:"common",title:"Icon",display:{type:"settings-image-input"}},closeIconMaxWidth:{type:"number",scope:"layout",title:"Max Width",display:{type:"full-width-input"},min:0,max:1},closeIconColor:{type:"string",scope:"common",title:"Fill Icon",display:{type:"settings-color-picker"}},closeIconHoverColor:{type:"string",scope:"common",title:"Hover Icon",display:{type:"settings-color-picker"}},thumbnailVisibility:{type:"boolean",scope:"common",title:"Visibility",display:{type:"toggle-cycle",enum:["on","off"]}},thumbnailObjectFit:{type:"string",scope:"common",title:"Display",display:{type:"toggle-cycle",enum:["cover","fit"]}},thumbnailTrigger:{type:"string",scope:"common",title:"Trigger",display:{type:"toggle-cycle",enum:["click","hover"]}},thumbnailActive:{type:"boolean",scope:"common",title:"Active",display:{type:"toggle-cycle",enum:["invert","grayscale","scale-up"]}},textMaxWidth:{type:"string",scope:"common",title:"Max Width",display:{type:"full-width-input"},min:0,max:1},textColor:{type:"string",scope:"common",title:"Fill Text",display:{type:"color-input"}},textFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},textFontSettings:{...vu.fontSettings,scope:"common",title:""},textFontSize:{type:"number",scope:"layout",title:"Text Font Size",display:{type:"font-size"}},textLineHeight:{type:"number",scope:"layout",title:"Text Line Height",display:{type:"line-height-input"}},textLetterSpacing:{type:"number",scope:"layout",title:"Text Letter Spacing",display:{type:"letter-spacing-input"}},textWordSpacing:{type:"number",scope:"layout",title:"Text Word Spacing",display:{type:"word-spacing-input"}},textTextAppearance:{type:"object",scope:"layout",title:"Text Text Appearance",display:{type:"text-appearance"}},contentMarginTop:{type:"number",scope:"layout",title:"Content margin top",min:0,max:200,display:{type:"range-control"}},contentMarginLeft:{type:"number",scope:"layout",title:"Content margin left",min:0,max:200,display:{type:"range-control"}},contentMarginRight:{type:"number",scope:"layout",title:"Content margin right",min:0,max:200,display:{type:"range-control"}}},defaults:{cover:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",objectFit:"cover",closeIcon:yu,closeIconColor:"#ffffff",closeIconHoverColor:"#cccccc",thumbnailVisibility:"on",thumbnailSize:"S",thumbnailObjectFit:"fit",thumbnailTrigger:"click",thumbnailActive:"invert",textColor:"#ffffff",textFontFamily:"Arial",textFontSettings:{fontWeight:400,fontStyle:"normal"},textTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{thumbnailGap:.04,imageGap:0,textMaxWidth:.4,closeIconMaxWidth:.02,backgroundColor:"rgba(28, 31, 34, 0.9)",contentMarginTop:0,contentMarginLeft:0,contentMarginRight:0,textFontSize:.02,textLineHeight:.02,textLetterSpacing:0,textWordSpacing:0},d:{thumbnailGap:.02,imageGap:0,textMaxWidth:.4,closeIconMaxWidth:.02,backgroundColor:"rgba(28, 31, 34, 0.9)",contentMarginTop:0,contentMarginLeft:0,contentMarginRight:0,textFontSize:.02,textLineHeight:.02,textLetterSpacing:0,textWordSpacing:0}},layout:["__componentName__","thumbnailGap","imageGap","objectFit","contentMarginTop","contentMarginLeft","contentMarginRight"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__"]},{type:"row",title:"Thumbnails",items:["thumbnailVisibility","thumbnailObjectFit"]},{type:"row",items:["thumbnailTrigger","thumbnailActive"]},{type:"row",title:"Text",items:["textMaxWidth"]},{type:"row",title:"Close icon",items:["closeIcon","closeIconMaxWidth"]},{type:"row",title:"Cover",items:["cover","coverFit"]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:["textFontFamily",{type:"group",title:"",items:["textFontSettings",{type:"row",items:["textFontSize","textLineHeight","textLetterSpacing","textWordSpacing"]},"textTextAppearance"]}]}],paletteBookmark:{items:["backgroundColor","textColor","closeIconColor","closeIconHoverColor"],panelIds:["general","typeStyle"]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input",supportsMainImage:!0}},text:{type:"string",label:"Text",placeholder:"Add Text...",display:{type:"rich-text"}}}},default:[{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7RZNCQFC3T744H0KX6R3FR.jpeg",name:"",objectFit:"contain"},text:[{type:"paragraph",children:[{text:"Flowers in the spring,"},{text:"summer and autumn"}]}]},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7RZRTSS60YBFT6Y37ZX00T.jpeg",name:"",objectFit:"contain"}},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ9M9YJPQ5JWKCHDEW5M1GJD.jpeg",name:"",objectFit:"contain"}},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7S04EHBXQS1T4KVAMZNZQM.jpeg",name:"",objectFit:"contain"}}]}},xu={element:hu,id:"lightbox-strip",name:"Lightbox Strip",category:"galleries",version:1,defaultSize:{d:{width:350,height:350},m:{width:300,height:350}},preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Strip.mp4"},schema:bu,sourceCode:fu,assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[]}},rr=300,Di=400,ar=300;function Cu(e){return`
8686
- .${e}-wrapper {
8687
- position: relative;
8688
- width: 100%;
8689
- height: 100%;
8690
- }
8691
-
8692
- .${e}-cover {
8693
- position: relative;
8694
- width: 100%;
8695
- height: 100%;
8696
- cursor: pointer;
8697
- }
8698
-
8699
- .${e}-cover-image {
8700
- display: block;
8701
- width: 100%;
8702
- height: 100%;
8703
- }
8704
-
8705
- .${e}-lightbox {
8706
- position: fixed;
8707
- inset: 0;
8708
- z-index: 9997;
8709
- display: flex;
8710
- flex-direction: column;
8711
- align-items: center;
8712
- justify-content: center;
8713
- }
8714
-
8715
- .${e}-lightbox-editor {
8716
- width: var(--cntrl-article-width, 100vw) !important;
8717
- margin-left: auto;
8718
- margin-right: auto;
8719
- }
8720
-
8721
- .${e}-lightbox-edit-mode {
8722
- z-index: 1;
8723
- }
8724
-
8725
- .${e}-lightbox-content {
8726
- position: relative;
8727
- z-index: 1;
8728
- display: flex;
8729
- flex-direction: column;
8730
- align-items: center;
8731
- justify-content: center;
8732
- width: 100%;
8733
- height: 100%;
8734
- box-sizing: border-box;
8735
- }
8736
-
8737
- .${e}-lightbox-backdrop {
8738
- position: absolute;
8739
- inset: 0;
8740
- pointer-events: none;
8741
- }
8742
-
8743
- .${e}-lightbox-strip {
8744
- position: relative;
8745
- flex: 1;
8746
- width: 100%;
8747
- min-height: 0;
8748
- display: flex;
8749
- align-items: center;
8750
- justify-content: center;
8751
- max-width: 100%;
8752
- overflow: hidden;
8753
- box-sizing: border-box;
8754
- }
8755
-
8756
- .${e}-lightbox-strip[data-desktop-nav="true"] {
8757
- cursor: ew-resize;
8758
- }
8759
-
8760
- .${e}-slide-stack {
8761
- position: relative;
8762
- width: 100%;
8763
- height: 100%;
8764
- display: flex;
8765
- align-items: center;
8766
- justify-content: center;
8767
- }
8768
-
8769
- .${e}-slide-layer-out {
8770
- position: absolute;
8771
- inset: 0;
8772
- display: flex;
8773
- align-items: center;
8774
- justify-content: center;
8775
- z-index: 1;
8776
- }
8777
-
8778
- .${e}-slide-layer-in {
8779
- position: absolute;
8780
- inset: 0;
8781
- display: flex;
8782
- align-items: center;
8783
- justify-content: center;
8784
- z-index: 0;
8785
- }
8786
-
8787
- @keyframes ${e}-slide-fade-in {
8788
- from { opacity: 0; }
8789
- to { opacity: 1; }
8790
- }
8791
-
8792
- @keyframes ${e}-slide-fade-out {
8793
- from { opacity: 1; }
8794
- to { opacity: 0; }
8795
- }
8796
-
8797
- .${e}-slide-fade-in {
8798
- opacity: 0;
8799
- animation: ${e}-slide-fade-in ${ar}ms ease-in-out forwards;
8800
- }
8801
-
8802
- .${e}-slide-fade-out {
8803
- animation: ${e}-slide-fade-out ${ar}ms ease-in-out forwards;
8804
- }
8805
-
8806
- .${e}-slide-area {
8807
- position: relative;
8808
- width: 100%;
8809
- height: 100%;
8810
- min-width: 0;
8811
- min-height: 0;
8812
- box-sizing: border-box;
8813
- }
8814
-
8815
- .${e}-slide-inner {
8816
- display: flex;
8817
- flex-direction: row;
8818
- align-items: stretch;
8819
- width: 100%;
8820
- height: 100%;
8821
- box-sizing: border-box;
8822
- }
8823
-
8824
- .${e}-slide-image-cell {
8825
- position: relative;
8826
- flex: 1 1 0;
8827
- min-width: 0;
8828
- height: 100%;
8829
- }
8830
-
8831
- .${e}-slide-image {
8832
- display: block;
8833
- width: 100%;
8834
- height: 100%;
8835
- }
8836
-
8837
- .${e}-close-icon {
8838
- position: relative;
8839
- flex-shrink: 0;
8840
- pointer-events: auto;
8841
- z-index: 2;
8842
- display: flex;
8843
- align-items: center;
8844
- justify-content: center;
8845
- border: none;
8846
- background-color: transparent;
8847
- padding: 0;
8848
- }
8849
-
8850
- .${e}-close-icon-inner {
8851
- all: unset;
8852
- position: relative;
8853
- cursor: pointer;
8854
- width: 100%;
8855
- height: 100%;
8856
- pointer-events: auto;
8857
- }
8858
-
8859
- .${e}-close-icon-img {
8860
- position: absolute;
8861
- top: 50%;
8862
- left: 50%;
8863
- transform: translate(-50%, -50%);
8864
- }
8865
-
8866
- .${e}-titles-row {
8867
- position: relative;
8868
- flex: 0 1 auto;
8869
- z-index: 2;
8870
- box-sizing: border-box;
8871
- pointer-events: none;
8872
- word-break: break-word;
8873
- min-width: 0;
8874
- display: flex;
8875
- flex-direction: row;
8876
- align-items: center;
8877
- }
8878
-
8879
- .${e}-title-cell {
8880
- position: relative;
8881
- flex: 0 1 auto;
8882
- min-width: 0;
8883
- }
8884
-
8885
- .${e}-text-bar-cell {
8886
- position: relative;
8887
- flex: 0 1 auto;
8888
- min-width: 0;
8889
- display: flex;
8890
- align-items: center;
8891
- }
8892
-
8893
- .${e}-title1,
8894
- .${e}-title2,
8895
- .${e}-title3 {
8896
- margin: 0;
8897
- flex-shrink: 1;
8898
- min-width: 0;
8899
- }
8900
-
8901
- .${e}-titles-stack {
8902
- position: relative;
8903
- display: flex;
8904
- flex-direction: row;
8905
- align-items: flex-start;
8906
- min-width: 0;
8907
- }
8908
-
8909
- .${e}-titles-layer-out {
8910
- position: absolute;
8911
- inset: 0;
8912
- display: flex;
8913
- flex-direction: row;
8914
- align-items: flex-start;
8915
- z-index: 1;
8916
- }
8917
-
8918
- .${e}-titles-layer-in {
8919
- position: relative;
8920
- display: flex;
8921
- flex-direction: row;
8922
- align-items: flex-start;
8923
- min-width: 0;
8924
- }
8925
-
8926
- .${e}-titles-layer-in-fading {
8927
- position: absolute;
8928
- inset: 0;
8929
- z-index: 0;
8930
- }
8931
-
8932
- @keyframes ${e}-titles-fade-in {
8933
- from { opacity: 0; }
8934
- to { opacity: 1; }
8935
- }
8936
-
8937
- @keyframes ${e}-titles-fade-out {
8938
- from { opacity: 1; }
8939
- to { opacity: 0; }
8940
- }
8941
-
8942
- .${e}-titles-fade-in {
8943
- opacity: 0;
8944
- animation: ${e}-titles-fade-in ${Di}ms ease-in-out forwards;
8945
- }
8946
-
8947
- .${e}-titles-fade-out {
8948
- animation: ${e}-titles-fade-out ${Di}ms ease-in-out forwards;
8949
- }
8950
-
8951
- .${e}-lightbox-content-inner {
8952
- position: absolute;
8953
- inset: 0;
8954
- z-index: 2;
8955
- pointer-events: none;
8956
- display: flex;
8957
- flex-direction: column;
8958
- }
8959
-
8960
- .${e}-lightbox-content-area {
8961
- position: relative;
8962
- display: flex;
8963
- flex-direction: row;
8964
- align-items: center;
8965
- flex: 1;
8966
- min-width: 0;
8967
- }
8968
-
8969
- .${e}-entry-counter {
8970
- position: relative;
8971
- z-index: 2;
8972
- pointer-events: none;
8973
- font-size: 0.85em;
8974
- opacity: 0.7;
8975
- white-space: nowrap;
8976
- flex-shrink: 0;
8977
- }
8978
-
8979
- .${e}-control {
8980
- position: relative;
8981
- z-index: 2;
8982
- pointer-events: auto;
8983
- flex-shrink: 0;
8984
- }
8985
-
8986
- .${e}-control::before {
8987
- content: "";
8988
- position: absolute;
8989
- top: 0;
8990
- left: 0;
8991
- width: 100%;
8992
- height: 100%;
8993
- pointer-events: auto;
8994
- z-index: 10;
8995
- }
8996
- `}const Su=e=>{let t=e;for(;t;){const n=t.style.getPropertyValue("--cntrl-article-width").trim();if(n)return n;const i=getComputedStyle(t).getPropertyValue("--cntrl-article-width").trim();if(i)return i;t=t.parentElement}},wu=20,sr=e=>`max(${e}, ${wu}px)`,$u=2,Qr=e=>((e==null?void 0:e.images)??[]).slice(0,$u),lr=e=>e?`${e.title1??""}|${e.title2??""}|${e.title3??""}`:"",Tu=({prefix:e,entries:t,objectFit:n,backgroundColor:i,imageGap:a,slideMaxWidth:s,slideMaxHeight:o,isEditor:d,isEditMode:l,isPreviewMode:u,closeIcon:p,closeIconMaxWidth:I,closeIconColor:b,closeIconHoverColor:w,articleWidthCss:f,textMaxWidth:h,titlesGap:T,textCountGap:L,countCloseGap:C,textTransition:m,title1Style:z,title2Style:j,title3Style:R,contentMarginTop:x,contentMarginLeft:A,contentMarginRight:S,onClose:K})=>{const v=!!l,D=!d||!!u,[W,q]=c.useState(0),G=t[W],[$,H]=c.useState(!1),[_,B]=c.useState(null),[k,P]=c.useState(!1),[te,ae]=c.useState(null),[re,U]=c.useState(!1),[N,oe]=c.useState(0),[ye,ce]=c.useState(),[ge,we]=c.useState(),[ee,y]=c.useState(null),g=c.useRef(null),V=c.useRef(0),J=c.useRef(0),Q=c.useRef(0),M=c.useRef(!1),F=c.useRef(null),O=c.useRef(null),ie=c.useRef(null),pe=c.useCallback(()=>{const me=O.current;if(!me)return;const $e=me.closest(`.${e}-lightbox-content-area`);if(!$e)return me.getBoundingClientRect().width;let Fe=0;Array.from($e.children).forEach(Be=>{Be instanceof HTMLElement&&(Be.contains(me)||(Fe+=Be.getBoundingClientRect().width))});const Me=me.closest(`.${e}-text-bar-cell`),Ye=Me&&parseFloat(getComputedStyle(Me).marginRight)||0;return $e.getBoundingClientRect().width-Fe-Ye},[e]),le=c.useCallback(()=>{g.current&&(clearTimeout(g.current),g.current=null)},[]),he=c.useCallback(me=>{me===V.current&&(ae(null),U(!1))},[]),Y=c.useCallback(()=>{M.current||(M.current=!0,H(!1),F.current=setTimeout(()=>{K()},rr))},[K]),Z=c.useCallback(me=>{var Bt,Pt;if(t.length===0)return;const $e=(me%t.length+t.length)%t.length;if($e===W)return;const Fe=W,Me=t[Fe],Ye=t[$e];V.current+=1;const Be=V.current,fe=m==="fade"&&lr(Me)!==lr(Ye),Xe=(Bt=O.current)==null?void 0:Bt.getBoundingClientRect().height;let Je,Ge;fe&&(Ge=pe(),In.flushSync(()=>{y(Ye)}),ie.current&&Ge&&(ie.current.style.width=`${Ge}px`),Je=(Pt=ie.current)==null?void 0:Pt.getBoundingClientRect().height,ie.current&&(ie.current.style.width=""));const mt=Math.max(Xe??0,Je??0)||void 0;oe(Be),ae(Fe),U(!0),q($e),Q.current=$e,fe?(le(),mt&&ce(mt),Ge&&we(Ge),B(Fe),P(!0),J.current=$e,g.current=setTimeout(()=>{B(null),P(!1),ce(void 0),we(void 0),y(null),g.current=null},Di)):(le(),B(null),P(!1),ce(void 0),we(void 0),y(null),J.current=$e)},[W,le,t,pe,m]),X=me=>{if(!D||t.length<=1||me.button!==0&&me.pointerType==="mouse"||me.target.closest("[data-controls]"))return;const Fe=window.innerWidth/2;me.clientX<Fe?Z(W-1):Z(W+1)};c.useEffect(()=>{const me=requestAnimationFrame(()=>H(!0));return()=>cancelAnimationFrame(me)},[]),c.useEffect(()=>()=>{F.current&&clearTimeout(F.current),g.current&&clearTimeout(g.current)},[]),c.useEffect(()=>{m!=="fade"&&(J.current=W,le(),B(null),P(!1),ce(void 0),we(void 0))},[W,le,m]),c.useEffect(()=>{const me=$e=>{$e.key==="Escape"&&Y(),$e.key==="ArrowLeft"&&t.length>1&&Z(W-1),$e.key==="ArrowRight"&&t.length>1&&Z(W+1)};return window.addEventListener("keydown",me),()=>window.removeEventListener("keydown",me)},[Z,Y,W,t.length]),c.useEffect(()=>{const me=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=me}},[]),c.useLayoutEffect(()=>{le(),V.current=0,oe(0),ae(null),U(!1),B(null),P(!1),ce(void 0),we(void 0),y(null),Q.current=0,J.current=0,q(0)},[le,t.length]);const se=_!==null?t[_]:null,Te=te!==null?t[te]:null,Le=!!(G!=null&&G.title1||G!=null&&G.title2||G!=null&&G.title3||se!=null&&se.title1||se!=null&&se.title2||se!=null&&se.title3),Oe=t.length>1,ve=!!p,ke={gap:T},_e=(me,$e)=>{const Fe=sr($e),Me=`calc(-0.5 * (${Fe} + ${$e}))`;return r.jsx("div",{"data-controls":me,"data-controls-axis":"x",style:{position:"absolute",top:0,right:Me,width:Fe,height:"100%",pointerEvents:"auto",zIndex:3}})},Ae=(me,$e=!1)=>{if(!me)return null;const Fe=[me.title1?{className:`${e}-title1`,style:z,text:me.title1}:null,me.title2?{className:`${e}-title2`,style:j,text:me.title2}:null,me.title3?{className:`${e}-title3`,style:R,text:me.title3}:null].filter(Me=>Me!==null);return Fe.map((Me,Ye)=>r.jsxs("div",{className:`${e}-title-cell`,children:[r.jsx("p",{className:Me.className,style:{...Me.style,maxWidth:h},children:Me.text}),$e&&v&&Ye<Fe.length-1?_e("titlesGap",T):null]},Me.className))},Ve=me=>{const $e=Qr(me);if($e.length===0)return null;const Fe=$e.length>1,Me=sr(a),Ye=`calc(-0.5 * (${Me} + ${a}))`;if($e.length===1){const Be=$e[0],fe=Be.objectFit??n;return r.jsx("img",{className:`${e}-slide-image`,src:Be.url,alt:Be.name??"",draggable:!1,style:{objectFit:fe}})}return r.jsx("div",{className:`${e}-slide-inner`,style:Fe?{gap:a}:void 0,children:$e.map((Be,fe)=>{const Xe=Be.objectFit??n;return r.jsxs("div",{className:`${e}-slide-image-cell`,children:[r.jsx("img",{className:`${e}-slide-image`,src:Be.url,alt:Be.name??"",draggable:!1,style:{objectFit:Xe}}),v&&Fe&&fe<$e.length-1&&r.jsx("div",{"data-controls":"imageGap","data-controls-axis":"x",style:{position:"absolute",top:0,right:Ye,width:Me,height:"100%",pointerEvents:"auto",zIndex:3}})]},`${Be.url}-${fe}`)})})};return r.jsxs("div",{"data-selection":"none",className:`${e}-lightbox${d?` ${e}-lightbox-editor`:""}${l?` ${e}-lightbox-edit-mode`:""}`,onClick:Y,role:"dialog","aria-modal":"true","aria-label":"Journal gallery",style:{opacity:$?1:0,transition:`opacity ${rr}ms ease`,pointerEvents:$?"auto":"none",...f?{"--cntrl-article-width":f}:{}},children:[r.jsx("div",{className:`${e}-lightbox-backdrop`,style:{backgroundColor:i}}),r.jsxs("div",{className:`${e}-lightbox-content`,onClick:me=>me.stopPropagation(),children:[r.jsx("div",{className:`${e}-lightbox-strip`,"data-desktop-nav":D&&t.length>1?"true":"false",onPointerUp:D?X:void 0,children:r.jsxs("div",{className:`${e}-slide-stack`,children:[Te&&re?r.jsx("div",{className:`${e}-slide-layer-out ${e}-slide-fade-out`,onAnimationEnd:me=>{me.target===me.currentTarget&&he(N)},children:r.jsx("div",{className:`${e}-slide-area`,style:{maxWidth:s,maxHeight:o},children:Ve(Te)})},`slide-out-${N}`):null,r.jsx("div",{className:`${e}-slide-layer-in${re?` ${e}-slide-fade-in`:""}`,children:r.jsx("div",{className:`${e}-slide-area`,style:{maxWidth:s,maxHeight:o},children:G?Ve(G):null})},`slide-in-${N}-${W}`)]})}),r.jsxs("div",{className:`${e}-lightbox-content-inner`,style:{width:"100%",height:"100%"},children:[r.jsx("div",{"data-controls":v?"contentMarginTop":void 0,className:v?`${e}-control`:void 0,style:{height:x,width:"100%"}}),r.jsxs("div",{style:{display:"flex",flexDirection:"row",width:"100%"},children:[r.jsx("div",{"data-controls":v?"contentMarginLeft":void 0,"data-controls-axis":v?"x":void 0,className:v?`${e}-control`:void 0,style:{width:A,flexShrink:0}}),r.jsxs("div",{className:`${e}-lightbox-content-area`,children:[Le&&r.jsxs("div",{className:`${e}-text-bar-cell`,style:Oe?{marginRight:L}:void 0,children:[r.jsx("div",{className:`${e}-titles-row`,style:ke,children:m==="fade"?r.jsxs(r.Fragment,{children:[r.jsx("div",{ref:ie,className:`${e}-titles-stack`,style:{...ke,position:"absolute",visibility:"hidden",pointerEvents:"none",left:0,right:0,top:0,width:"100%",height:"auto"},"aria-hidden":"true",children:Ae(ee||G,!1)}),r.jsxs("div",{ref:O,className:`${e}-titles-stack`,style:{...ke,...k&&ye?{minHeight:ye}:void 0,...k&&ge?{width:ge,maxWidth:"100%"}:void 0,...k?{overflow:"hidden"}:void 0},children:[se&&k?r.jsx("div",{className:`${e}-titles-layer-out ${e}-titles-fade-out`,style:ke,children:Ae(se)}):null,r.jsx("div",{className:`${e}-titles-layer-in${k?` ${e}-titles-layer-in-fading ${e}-titles-fade-in`:""}`,style:ke,children:Ae(G,!0)})]})]}):Ae(G,!0)}),v&&Oe?_e("textCountGap",L):null]}),Oe&&r.jsxs("div",{className:`${e}-text-bar-cell`,style:ve?{marginRight:C}:void 0,children:[r.jsxs("span",{className:`${e}-entry-counter`,style:{color:z.color},children:[W+1," / ",t.length]}),v&&ve?_e("countCloseGap",C):null]}),ve&&r.jsx("div",{className:`${e}-close-icon`,style:{width:E.scalingValue(I??0,d),height:E.scalingValue(I??0,d),"--close-icon-hover-color":w},children:r.jsx("button",{type:"button",className:`${e}-close-icon-inner`,onClick:Y,"aria-label":"Close",children:r.jsx(yt,{url:p??"",fill:b,hoverFill:w,className:`${e}-close-icon-img`})})})]}),r.jsx("div",{"data-controls":v?"contentMarginRight":void 0,"data-controls-axis":v?"x":void 0,className:v?`${e}-control`:void 0,style:{width:S,flexShrink:0}})]})]})]})]})},Lu=({settings:e,content:t,isEditor:n,isEditMode:i,isPreviewMode:a,portalId:s})=>{const{prefix:o}=E.useScopedStyles(),{cover:d,coverFit:l,backgroundColor:u,objectFit:p,imageGap:I,maxWidth:b,maxHeight:w,textMaxWidth:f,textTransition:h,titlesGap:T,textCountGap:L,countCloseGap:C,fontFamily:m,title1Color:z,title2Color:j,title3Color:R,title1FontSettings:x,title1FontSize:A,title1LineHeight:S,title1LetterSpacing:K,title1WordSpacing:v,title1TextAppearance:D,title2FontSettings:W,title2FontSize:q,title2LineHeight:G,title2LetterSpacing:$,title2WordSpacing:H,title2TextAppearance:_,title3FontSettings:B,title3FontSize:k,title3LineHeight:P,title3LetterSpacing:te,title3WordSpacing:ae,title3TextAppearance:re,closeIcon:U,closeIconMaxWidth:N,closeIconColor:oe,closeIconHoverColor:ye,contentMarginTop:ce,contentMarginLeft:ge,contentMarginRight:we}=e,ee=X=>E.scalingValue(X,n??!1),y={fontSettings:{fontFamily:m,fontWeight:(x==null?void 0:x.fontWeight)??400,fontStyle:(x==null?void 0:x.fontStyle)??"normal"},fontSize:A??.04,lineHeight:S,letterSpacing:K??0,wordSpacing:v??0,textAppearance:D,color:z??"#ffffff"},g={fontSettings:{fontFamily:m,fontWeight:(W==null?void 0:W.fontWeight)??400,fontStyle:(W==null?void 0:W.fontStyle)??"normal"},fontSize:q??.03,lineHeight:G,letterSpacing:$??0,wordSpacing:H??0,textAppearance:_,color:j??"#ffffff"},V={fontSettings:{fontFamily:m,fontWeight:(B==null?void 0:B.fontWeight)??400,fontStyle:(B==null?void 0:B.fontStyle)??"normal"},fontSize:k??.025,lineHeight:P,letterSpacing:te??0,wordSpacing:ae??0,textAppearance:re,color:R??"#ffffff"},J=Ue(y,n),Q=Ue(g,n),M=Ue(V,n),F=c.useRef(null),[O,ie]=c.useState(!1),[pe,le]=c.useState(),he=(t??[]).filter(X=>Qr(X).length>0),Y=()=>{he.length!==0&&(n&&F.current&&le(Su(F.current)),ie(!0))},Z=()=>{ie(!1)};return r.jsxs(r.Fragment,{children:[r.jsxs("div",{ref:F,className:`${o}-wrapper`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:Cu(o)}}),d?r.jsx("button",{type:"button",className:`${o}-cover`,onClick:Y,style:{display:"block",padding:0,border:"none",background:"transparent"},"aria-label":"Open journal gallery",children:r.jsx("img",{className:`${o}-cover-image`,src:d,alt:"cover",style:{objectFit:l==="cover"?"cover":"contain"}})}):null]}),O&&typeof document<"u"&&(()=>{const X=(s?document.getElementById(s):null)??document.body;return In.createPortal(r.jsx(Tu,{prefix:o,entries:he,objectFit:p==="fit"?"contain":"cover",backgroundColor:u,imageGap:ee(I??0),slideMaxWidth:`${b}%`,slideMaxHeight:`${w}%`,textMaxWidth:ee(f??.4),titlesGap:ee(T??0),textCountGap:ee(L??0),countCloseGap:ee(C??0),textTransition:h,title1Style:J,title2Style:Q,title3Style:M,contentMarginTop:ee(ce??0),contentMarginLeft:ee(ge??0),contentMarginRight:ee(we??0),closeIcon:U,closeIconMaxWidth:N,closeIconColor:oe,closeIconHoverColor:ye,articleWidthCss:pe,isEditor:n,isEditMode:i,isPreviewMode:a,onClose:Z}),X)})()]})},Eu=`import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
8997
- import { createPortal, flushSync } from 'react-dom';
8998
- import { CommonComponentProps } from '../props';
8999
- import { scalingValue } from '../utils/scalingValue';
9000
- import { useScopedStyles } from '../utils/useScopedStyles';
9001
- import { SvgImage } from '../helpers/SvgImage/SvgImage';
9002
- import { textStylesToCss, type TextStyles } from '../utils/textStylesToCss';
9003
-
9004
- const LIGHTBOX_ANIM_MS = 300;
9005
- const TEXT_FADE_MS = 400;
9006
- const SLIDE_FADE_MS = 300;
9007
-
9008
- function getCSS(P: string): string {
9009
- return \`
9010
- .\${P}-wrapper {
9011
- position: relative;
9012
- width: 100%;
9013
- height: 100%;
9014
- }
9015
-
9016
- .\${P}-cover {
9017
- position: relative;
9018
- width: 100%;
9019
- height: 100%;
9020
- cursor: pointer;
9021
- }
9022
-
9023
- .\${P}-cover-image {
9024
- display: block;
9025
- width: 100%;
9026
- height: 100%;
9027
- }
9028
-
9029
- .\${P}-lightbox {
9030
- position: fixed;
9031
- inset: 0;
9032
- z-index: 9997;
9033
- display: flex;
9034
- flex-direction: column;
9035
- align-items: center;
9036
- justify-content: center;
9037
- }
9038
-
9039
- .\${P}-lightbox-editor {
9040
- width: var(--cntrl-article-width, 100vw) !important;
9041
- margin-left: auto;
9042
- margin-right: auto;
9043
- }
9044
-
9045
- .\${P}-lightbox-edit-mode {
9046
- z-index: 1;
9047
- }
9048
-
9049
- .\${P}-lightbox-content {
9050
- position: relative;
9051
- z-index: 1;
9052
- display: flex;
9053
- flex-direction: column;
9054
- align-items: center;
9055
- justify-content: center;
9056
- width: 100%;
9057
- height: 100%;
9058
- box-sizing: border-box;
9059
- }
9060
-
9061
- .\${P}-lightbox-backdrop {
9062
- position: absolute;
9063
- inset: 0;
9064
- pointer-events: none;
9065
- }
9066
-
9067
- .\${P}-lightbox-strip {
9068
- position: relative;
9069
- flex: 1;
9070
- width: 100%;
9071
- min-height: 0;
9072
- display: flex;
9073
- align-items: center;
9074
- justify-content: center;
9075
- max-width: 100%;
9076
- overflow: hidden;
9077
- box-sizing: border-box;
9078
- }
9079
-
9080
- .\${P}-lightbox-strip[data-desktop-nav="true"] {
9081
- cursor: ew-resize;
9082
- }
9083
-
9084
- .\${P}-slide-stack {
9085
- position: relative;
9086
- width: 100%;
9087
- height: 100%;
9088
- display: flex;
9089
- align-items: center;
9090
- justify-content: center;
9091
- }
9092
-
9093
- .\${P}-slide-layer-out {
9094
- position: absolute;
9095
- inset: 0;
9096
- display: flex;
9097
- align-items: center;
9098
- justify-content: center;
9099
- z-index: 1;
9100
- }
9101
-
9102
- .\${P}-slide-layer-in {
9103
- position: absolute;
9104
- inset: 0;
9105
- display: flex;
9106
- align-items: center;
9107
- justify-content: center;
9108
- z-index: 0;
9109
- }
9110
-
9111
- @keyframes \${P}-slide-fade-in {
9112
- from { opacity: 0; }
9113
- to { opacity: 1; }
9114
- }
9115
-
9116
- @keyframes \${P}-slide-fade-out {
9117
- from { opacity: 1; }
9118
- to { opacity: 0; }
9119
- }
9120
-
9121
- .\${P}-slide-fade-in {
9122
- opacity: 0;
9123
- animation: \${P}-slide-fade-in \${SLIDE_FADE_MS}ms ease-in-out forwards;
9124
- }
9125
-
9126
- .\${P}-slide-fade-out {
9127
- animation: \${P}-slide-fade-out \${SLIDE_FADE_MS}ms ease-in-out forwards;
9128
- }
9129
-
9130
- .\${P}-slide-area {
9131
- position: relative;
9132
- width: 100%;
9133
- height: 100%;
9134
- min-width: 0;
9135
- min-height: 0;
9136
- box-sizing: border-box;
9137
- }
9138
-
9139
- .\${P}-slide-inner {
9140
- display: flex;
9141
- flex-direction: row;
9142
- align-items: stretch;
9143
- width: 100%;
9144
- height: 100%;
9145
- box-sizing: border-box;
9146
- }
9147
-
9148
- .\${P}-slide-image-cell {
9149
- position: relative;
9150
- flex: 1 1 0;
9151
- min-width: 0;
9152
- height: 100%;
9153
- }
9154
-
9155
- .\${P}-slide-image {
9156
- display: block;
9157
- width: 100%;
9158
- height: 100%;
9159
- }
9160
-
9161
- .\${P}-close-icon {
9162
- position: relative;
9163
- flex-shrink: 0;
9164
- pointer-events: auto;
9165
- z-index: 2;
9166
- display: flex;
9167
- align-items: center;
9168
- justify-content: center;
9169
- border: none;
9170
- background-color: transparent;
9171
- padding: 0;
9172
- }
9173
-
9174
- .\${P}-close-icon-inner {
9175
- all: unset;
9176
- position: relative;
9177
- cursor: pointer;
9178
- width: 100%;
9179
- height: 100%;
9180
- pointer-events: auto;
9181
- }
9182
-
9183
- .\${P}-close-icon-img {
9184
- position: absolute;
9185
- top: 50%;
9186
- left: 50%;
9187
- transform: translate(-50%, -50%);
9188
- }
9189
-
9190
- .\${P}-titles-row {
9191
- position: relative;
9192
- flex: 0 1 auto;
9193
- z-index: 2;
9194
- box-sizing: border-box;
9195
- pointer-events: none;
9196
- word-break: break-word;
9197
- min-width: 0;
9198
- display: flex;
9199
- flex-direction: row;
9200
- align-items: center;
9201
- }
9202
-
9203
- .\${P}-title-cell {
9204
- position: relative;
9205
- flex: 0 1 auto;
9206
- min-width: 0;
9207
- }
9208
-
9209
- .\${P}-text-bar-cell {
9210
- position: relative;
9211
- flex: 0 1 auto;
9212
- min-width: 0;
9213
- display: flex;
9214
- align-items: center;
9215
- }
9216
-
9217
- .\${P}-title1,
9218
- .\${P}-title2,
9219
- .\${P}-title3 {
9220
- margin: 0;
9221
- flex-shrink: 1;
9222
- min-width: 0;
9223
- }
9224
-
9225
- .\${P}-titles-stack {
9226
- position: relative;
9227
- display: flex;
9228
- flex-direction: row;
9229
- align-items: flex-start;
9230
- min-width: 0;
9231
- }
9232
-
9233
- .\${P}-titles-layer-out {
9234
- position: absolute;
9235
- inset: 0;
9236
- display: flex;
9237
- flex-direction: row;
9238
- align-items: flex-start;
9239
- z-index: 1;
9240
- }
9241
-
9242
- .\${P}-titles-layer-in {
9243
- position: relative;
9244
- display: flex;
9245
- flex-direction: row;
9246
- align-items: flex-start;
9247
- min-width: 0;
9248
- }
9249
-
9250
- .\${P}-titles-layer-in-fading {
9251
- position: absolute;
9252
- inset: 0;
9253
- z-index: 0;
9254
- }
9255
-
9256
- @keyframes \${P}-titles-fade-in {
9257
- from { opacity: 0; }
9258
- to { opacity: 1; }
9259
- }
9260
-
9261
- @keyframes \${P}-titles-fade-out {
9262
- from { opacity: 1; }
9263
- to { opacity: 0; }
9264
- }
9265
-
9266
- .\${P}-titles-fade-in {
9267
- opacity: 0;
9268
- animation: \${P}-titles-fade-in \${TEXT_FADE_MS}ms ease-in-out forwards;
9269
- }
9270
-
9271
- .\${P}-titles-fade-out {
9272
- animation: \${P}-titles-fade-out \${TEXT_FADE_MS}ms ease-in-out forwards;
9273
- }
9274
-
9275
- .\${P}-lightbox-content-inner {
9276
- position: absolute;
9277
- inset: 0;
9278
- z-index: 2;
9279
- pointer-events: none;
9280
- display: flex;
9281
- flex-direction: column;
9282
- }
9283
-
9284
- .\${P}-lightbox-content-area {
9285
- position: relative;
9286
- display: flex;
9287
- flex-direction: row;
9288
- align-items: center;
9289
- flex: 1;
9290
- min-width: 0;
9291
- }
9292
-
9293
- .\${P}-entry-counter {
9294
- position: relative;
9295
- z-index: 2;
9296
- pointer-events: none;
9297
- font-size: 0.85em;
9298
- opacity: 0.7;
9299
- white-space: nowrap;
9300
- flex-shrink: 0;
9301
- }
9302
-
9303
- .\${P}-control {
9304
- position: relative;
9305
- z-index: 2;
9306
- pointer-events: auto;
9307
- flex-shrink: 0;
9308
- }
9309
-
9310
- .\${P}-control::before {
9311
- content: "";
9312
- position: absolute;
9313
- top: 0;
9314
- left: 0;
9315
- width: 100%;
9316
- height: 100%;
9317
- pointer-events: auto;
9318
- z-index: 10;
9319
- }
9320
- \`;
9321
- }
9322
-
9323
- const getArticleWidthCSSValue = (start: HTMLElement | null): string | undefined => {
9324
- let el = start;
9325
- while (el) {
9326
- const inline = el.style.getPropertyValue('--cntrl-article-width').trim();
9327
- if (inline) return inline;
9328
- const computed = getComputedStyle(el).getPropertyValue('--cntrl-article-width').trim();
9329
- if (computed) return computed;
9330
- el = el.parentElement;
9331
- }
9332
- return undefined;
9333
- };
9334
-
9335
- export type LightboxJournalImage = {
9336
- url: string;
9337
- name?: string;
9338
- objectFit?: 'cover' | 'contain';
9339
- };
9340
-
9341
- export type LightboxJournalItem = {
9342
- title1: string;
9343
- title2: string;
9344
- title3: string;
9345
- images: LightboxJournalImage[];
9346
- };
9347
-
9348
- type LightboxOverlayProps = {
9349
- prefix: string;
9350
- entries: LightboxJournalItem[];
9351
- objectFit: 'cover' | 'contain';
9352
- backgroundColor: string;
9353
- imageGap: string;
9354
- slideMaxWidth: string;
9355
- slideMaxHeight: string;
9356
- closeIcon: string | null;
9357
- closeIconMaxWidth: number;
9358
- closeIconColor: string;
9359
- closeIconHoverColor: string;
9360
- textMaxWidth: string;
9361
- titlesGap: string;
9362
- textCountGap: string;
9363
- countCloseGap: string;
9364
- textTransition: 'none' | 'fade';
9365
- title1Style: React.CSSProperties;
9366
- title2Style: React.CSSProperties;
9367
- title3Style: React.CSSProperties;
9368
- contentMarginTop: string;
9369
- contentMarginLeft: string;
9370
- contentMarginRight: string;
9371
- articleWidthCss?: string;
9372
- isEditor?: boolean;
9373
- isEditMode?: boolean;
9374
- isPreviewMode?: boolean;
9375
- onClose: () => void;
9376
- };
9377
-
9378
- const GAP_LABEL_AREA_PX = 20;
9379
-
9380
- const getGapControlSize = (gap: string) => \`max(\${gap}, \${GAP_LABEL_AREA_PX}px)\`;
9381
-
9382
- const MAX_IMAGES_PER_ENTRY = 2;
9383
-
9384
- const getEntryImages = (entry: LightboxJournalItem | undefined): LightboxJournalImage[] =>
9385
- (entry?.images ?? []).slice(0, MAX_IMAGES_PER_ENTRY);
9386
-
9387
- const getEntryTitleKey = (entry: LightboxJournalItem | undefined) =>
9388
- entry ? \`\${entry.title1 ?? ''}|\${entry.title2 ?? ''}|\${entry.title3 ?? ''}\` : '';
9389
-
9390
- const LightboxOverlay = ({
9391
- prefix: P,
9392
- entries,
9393
- objectFit,
9394
- backgroundColor,
9395
- imageGap,
9396
- slideMaxWidth,
9397
- slideMaxHeight,
9398
- isEditor,
9399
- isEditMode,
9400
- isPreviewMode,
9401
- closeIcon,
9402
- closeIconMaxWidth,
9403
- closeIconColor,
9404
- closeIconHoverColor,
9405
- articleWidthCss,
9406
- textMaxWidth,
9407
- titlesGap,
9408
- textCountGap,
9409
- countCloseGap,
9410
- textTransition,
9411
- title1Style,
9412
- title2Style,
9413
- title3Style,
9414
- contentMarginTop,
9415
- contentMarginLeft,
9416
- contentMarginRight,
9417
- onClose,
9418
- }: LightboxOverlayProps) => {
9419
- const showControls = Boolean(isEditMode);
9420
- const allowDesktopNav = !isEditor || Boolean(isPreviewMode);
9421
- const [activeEntryIndex, setActiveEntryIndex] = useState(0);
9422
-
9423
- const activeEntry = entries[activeEntryIndex];
9424
- const [isVisible, setIsVisible] = useState(false);
9425
- const [prevEntryIndex, setPrevEntryIndex] = useState<number | null>(null);
9426
- const [isTitlesFading, setIsTitlesFading] = useState(false);
9427
- const [prevSlideIndex, setPrevSlideIndex] = useState<number | null>(null);
9428
- const [isSlideFading, setIsSlideFading] = useState(false);
9429
- const [slideTransitionKey, setSlideTransitionKey] = useState(0);
9430
- const [titlesStackMinHeight, setTitlesStackMinHeight] = useState<number | undefined>();
9431
- const [titlesStackWidth, setTitlesStackWidth] = useState<number | undefined>();
9432
- const [incomingMeasureEntry, setIncomingMeasureEntry] = useState<LightboxJournalItem | null>(null);
9433
- const titlesFadeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
9434
- const slideTransitionKeyRef = useRef(0);
9435
- const prevEntryIndexRef = useRef(0);
9436
- const prevSlideIndexRef = useRef(0);
9437
- const isClosingRef = useRef(false);
9438
- const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
9439
- const titlesStackRef = useRef<HTMLDivElement>(null);
9440
- const titlesMeasureRef = useRef<HTMLDivElement>(null);
9441
-
9442
- const getIncomingTitlesMeasureWidth = useCallback(() => {
9443
- const stack = titlesStackRef.current;
9444
- if (!stack) return undefined;
9445
-
9446
- const contentArea = stack.closest(\`.\${P}-lightbox-content-area\`) as HTMLElement | null;
9447
- if (!contentArea) return stack.getBoundingClientRect().width;
9448
-
9449
- let fixedSiblingsWidth = 0;
9450
- Array.from(contentArea.children).forEach((child) => {
9451
- if (!(child instanceof HTMLElement)) return;
9452
- if (child.contains(stack)) return;
9453
- fixedSiblingsWidth += child.getBoundingClientRect().width;
9454
- });
9455
-
9456
- const textBarCell = stack.closest(\`.\${P}-text-bar-cell\`) as HTMLElement | null;
9457
- const textBarMarginRight = textBarCell
9458
- ? parseFloat(getComputedStyle(textBarCell).marginRight) || 0
9459
- : 0;
9460
-
9461
- return contentArea.getBoundingClientRect().width - fixedSiblingsWidth - textBarMarginRight;
9462
- }, [P]);
9463
-
9464
- const clearTitlesFadeTimer = useCallback(() => {
9465
- if (titlesFadeTimerRef.current) {
9466
- clearTimeout(titlesFadeTimerRef.current);
9467
- titlesFadeTimerRef.current = null;
9468
- }
9469
- }, []);
9470
-
9471
- const finishSlideTransition = useCallback((transitionKey: number) => {
9472
- if (transitionKey !== slideTransitionKeyRef.current) return;
9473
- setPrevSlideIndex(null);
9474
- setIsSlideFading(false);
9475
- }, []);
9476
-
9477
- const handleClose = useCallback(() => {
9478
- if (isClosingRef.current) return;
9479
- isClosingRef.current = true;
9480
- setIsVisible(false);
9481
- closeTimeoutRef.current = setTimeout(() => {
9482
- onClose();
9483
- }, LIGHTBOX_ANIM_MS);
9484
- }, [onClose]);
9485
-
9486
- const goToEntry = useCallback((index: number) => {
9487
- if (entries.length === 0) return;
9488
- const normalizedIndex = ((index % entries.length) + entries.length) % entries.length;
9489
- if (normalizedIndex === activeEntryIndex) return;
9490
-
9491
- const outgoingIndex = activeEntryIndex;
9492
- const outgoingEntry = entries[outgoingIndex];
9493
- const incomingEntry = entries[normalizedIndex];
9494
- slideTransitionKeyRef.current += 1;
9495
- const transitionKey = slideTransitionKeyRef.current;
9496
- const shouldFadeTitles = textTransition === 'fade'
9497
- && getEntryTitleKey(outgoingEntry) !== getEntryTitleKey(incomingEntry);
9498
- const measuredOutgoingTitlesHeight = titlesStackRef.current?.getBoundingClientRect().height;
9499
- let measuredIncomingTitlesHeight: number | undefined;
9500
- let incomingTitlesMeasureWidth: number | undefined;
9501
- if (shouldFadeTitles) {
9502
- incomingTitlesMeasureWidth = getIncomingTitlesMeasureWidth();
9503
- flushSync(() => {
9504
- setIncomingMeasureEntry(incomingEntry);
9505
- });
9506
- if (titlesMeasureRef.current && incomingTitlesMeasureWidth) {
9507
- titlesMeasureRef.current.style.width = \`\${incomingTitlesMeasureWidth}px\`;
9508
- }
9509
- measuredIncomingTitlesHeight = titlesMeasureRef.current?.getBoundingClientRect().height;
9510
- if (titlesMeasureRef.current) {
9511
- titlesMeasureRef.current.style.width = '';
9512
- }
9513
- }
9514
- const lockedTitlesHeight = Math.max(measuredOutgoingTitlesHeight ?? 0, measuredIncomingTitlesHeight ?? 0) || undefined;
9515
-
9516
- setSlideTransitionKey(transitionKey);
9517
- setPrevSlideIndex(outgoingIndex);
9518
- setIsSlideFading(true);
9519
- setActiveEntryIndex(normalizedIndex);
9520
- prevSlideIndexRef.current = normalizedIndex;
9521
-
9522
- if (shouldFadeTitles) {
9523
- clearTitlesFadeTimer();
9524
- if (lockedTitlesHeight) {
9525
- setTitlesStackMinHeight(lockedTitlesHeight);
9526
- }
9527
- if (incomingTitlesMeasureWidth) {
9528
- setTitlesStackWidth(incomingTitlesMeasureWidth);
9529
- }
9530
- setPrevEntryIndex(outgoingIndex);
9531
- setIsTitlesFading(true);
9532
- prevEntryIndexRef.current = normalizedIndex;
9533
- titlesFadeTimerRef.current = setTimeout(() => {
9534
- setPrevEntryIndex(null);
9535
- setIsTitlesFading(false);
9536
- setTitlesStackMinHeight(undefined);
9537
- setTitlesStackWidth(undefined);
9538
- setIncomingMeasureEntry(null);
9539
- titlesFadeTimerRef.current = null;
9540
- }, TEXT_FADE_MS);
9541
- } else {
9542
- clearTitlesFadeTimer();
9543
- setPrevEntryIndex(null);
9544
- setIsTitlesFading(false);
9545
- setTitlesStackMinHeight(undefined);
9546
- setTitlesStackWidth(undefined);
9547
- setIncomingMeasureEntry(null);
9548
- prevEntryIndexRef.current = normalizedIndex;
9549
- }
9550
- }, [activeEntryIndex, clearTitlesFadeTimer, entries, getIncomingTitlesMeasureWidth, textTransition]);
9551
-
9552
- const onStripPointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
9553
- if (!allowDesktopNav) return;
9554
- if (entries.length <= 1) return;
9555
- if (event.button !== 0 && event.pointerType === 'mouse') return;
9556
- const target = event.target as HTMLElement;
9557
- if (target.closest('[data-controls]')) return;
9558
-
9559
- const midPoint = window.innerWidth / 2;
9560
- if (event.clientX < midPoint) {
9561
- goToEntry(activeEntryIndex - 1);
9562
- } else {
9563
- goToEntry(activeEntryIndex + 1);
9564
- }
9565
- };
9566
-
9567
- useEffect(() => {
9568
- const frame = requestAnimationFrame(() => setIsVisible(true));
9569
- return () => cancelAnimationFrame(frame);
9570
- }, []);
9571
-
9572
- useEffect(() => {
9573
- return () => {
9574
- if (closeTimeoutRef.current) {
9575
- clearTimeout(closeTimeoutRef.current);
9576
- }
9577
- if (titlesFadeTimerRef.current) {
9578
- clearTimeout(titlesFadeTimerRef.current);
9579
- }
9580
- };
9581
- }, []);
9582
-
9583
- useEffect(() => {
9584
- if (textTransition !== 'fade') {
9585
- prevEntryIndexRef.current = activeEntryIndex;
9586
- clearTitlesFadeTimer();
9587
- setPrevEntryIndex(null);
9588
- setIsTitlesFading(false);
9589
- setTitlesStackMinHeight(undefined);
9590
- setTitlesStackWidth(undefined);
9591
- }
9592
- }, [activeEntryIndex, clearTitlesFadeTimer, textTransition]);
9593
-
9594
- useEffect(() => {
9595
- const onKeyDown = (event: KeyboardEvent) => {
9596
- if (event.key === 'Escape') {
9597
- handleClose();
9598
- }
9599
- if (event.key === 'ArrowLeft' && entries.length > 1) {
9600
- goToEntry(activeEntryIndex - 1);
9601
- }
9602
- if (event.key === 'ArrowRight' && entries.length > 1) {
9603
- goToEntry(activeEntryIndex + 1);
9604
- }
9605
- };
9606
- window.addEventListener('keydown', onKeyDown);
9607
- return () => window.removeEventListener('keydown', onKeyDown);
9608
- }, [goToEntry, handleClose, activeEntryIndex, entries.length]);
9609
-
9610
- useEffect(() => {
9611
- const originalOverflow = document.body.style.overflow;
9612
- document.body.style.overflow = 'hidden';
9613
- return () => {
9614
- document.body.style.overflow = originalOverflow;
9615
- };
9616
- }, []);
9617
-
9618
- useLayoutEffect(() => {
9619
- clearTitlesFadeTimer();
9620
- slideTransitionKeyRef.current = 0;
9621
- setSlideTransitionKey(0);
9622
- setPrevSlideIndex(null);
9623
- setIsSlideFading(false);
9624
- setPrevEntryIndex(null);
9625
- setIsTitlesFading(false);
9626
- setTitlesStackMinHeight(undefined);
9627
- setTitlesStackWidth(undefined);
9628
- setIncomingMeasureEntry(null);
9629
- prevSlideIndexRef.current = 0;
9630
- prevEntryIndexRef.current = 0;
9631
- setActiveEntryIndex(0);
9632
- }, [clearTitlesFadeTimer, entries.length]);
9633
-
9634
- const outgoingEntry = prevEntryIndex !== null ? entries[prevEntryIndex] : null;
9635
- const outgoingSlideEntry = prevSlideIndex !== null ? entries[prevSlideIndex] : null;
9636
- const hasTitles = Boolean(
9637
- activeEntry?.title1 || activeEntry?.title2 || activeEntry?.title3
9638
- || outgoingEntry?.title1 || outgoingEntry?.title2 || outgoingEntry?.title3,
9639
- );
9640
- const hasCounter = entries.length > 1;
9641
- const hasCloseIcon = Boolean(closeIcon);
9642
- const titlesGapStyle = { gap: titlesGap };
9643
-
9644
- const renderGapControl = (controlKey: string, gap: string) => {
9645
- const gapControlSize = getGapControlSize(gap);
9646
- const gapControlRight = \`calc(-0.5 * (\${gapControlSize} + \${gap}))\`;
9647
- return (
9648
- <div
9649
- data-controls={controlKey}
9650
- data-controls-axis="x"
9651
- style={{
9652
- position: 'absolute',
9653
- top: 0,
9654
- right: gapControlRight,
9655
- width: gapControlSize,
9656
- height: '100%',
9657
- pointerEvents: 'auto',
9658
- zIndex: 3,
9659
- }}
9660
- />
9661
- );
9662
- };
9663
-
9664
- const renderTitles = (entry: LightboxJournalItem | undefined, showGapControls = false) => {
9665
- if (!entry) return null;
9666
-
9667
- const slots = [
9668
- entry.title1 ? { className: \`\${P}-title1\`, style: title1Style, text: entry.title1 } : null,
9669
- entry.title2 ? { className: \`\${P}-title2\`, style: title2Style, text: entry.title2 } : null,
9670
- entry.title3 ? { className: \`\${P}-title3\`, style: title3Style, text: entry.title3 } : null,
9671
- ].filter((slot): slot is { className: string; style: React.CSSProperties; text: string } => slot !== null);
9672
-
9673
- return slots.map((slot, index) => (
9674
- <div key={slot.className} className={\`\${P}-title-cell\`}>
9675
- <p className={slot.className} style={{ ...slot.style, maxWidth: textMaxWidth }}>{slot.text}</p>
9676
- {showGapControls && showControls && index < slots.length - 1 ? renderGapControl('titlesGap', titlesGap) : null}
9677
- </div>
9678
- ));
9679
- };
9680
-
9681
- const renderEntryImages = (entry: LightboxJournalItem) => {
9682
- const images = getEntryImages(entry);
9683
- if (images.length === 0) return null;
9684
-
9685
- const hasInnerImageGap = images.length > 1;
9686
- const imageGapControlSize = getGapControlSize(imageGap);
9687
- const imageGapControlRight = \`calc(-0.5 * (\${imageGapControlSize} + \${imageGap}))\`;
9688
-
9689
- if (images.length === 1) {
9690
- const image = images[0];
9691
- const itemObjectFit = image.objectFit ?? objectFit;
9692
- return (
9693
- <img
9694
- className={\`\${P}-slide-image\`}
9695
- src={image.url}
9696
- alt={image.name ?? ''}
9697
- draggable={false}
9698
- style={{ objectFit: itemObjectFit }}
9699
- />
9700
- );
9701
- }
9702
-
9703
- return (
9704
- <div
9705
- className={\`\${P}-slide-inner\`}
9706
- style={hasInnerImageGap ? { gap: imageGap } : undefined}
9707
- >
9708
- {images.map((image, imageIndex) => {
9709
- const itemObjectFit = image.objectFit ?? objectFit;
9710
- return (
9711
- <div
9712
- key={\`\${image.url}-\${imageIndex}\`}
9713
- className={\`\${P}-slide-image-cell\`}
9714
- >
9715
- <img
9716
- className={\`\${P}-slide-image\`}
9717
- src={image.url}
9718
- alt={image.name ?? ''}
9719
- draggable={false}
9720
- style={{ objectFit: itemObjectFit }}
9721
- />
9722
- {showControls && hasInnerImageGap && imageIndex < images.length - 1 && (
9723
- <div
9724
- data-controls="imageGap"
9725
- data-controls-axis="x"
9726
- style={{
9727
- position: 'absolute',
9728
- top: 0,
9729
- right: imageGapControlRight,
9730
- width: imageGapControlSize,
9731
- height: '100%',
9732
- pointerEvents: 'auto',
9733
- zIndex: 3,
9734
- }}
9735
- />
9736
- )}
9737
- </div>
9738
- );
9739
- })}
9740
- </div>
9741
- );
9742
- };
9743
-
9744
- return (
9745
- <div
9746
- data-selection="none"
9747
- className={\`\${P}-lightbox\${isEditor ? \` \${P}-lightbox-editor\` : ''}\${isEditMode ? \` \${P}-lightbox-edit-mode\` : ''}\`}
9748
- onClick={handleClose}
9749
- role="dialog"
9750
- aria-modal="true"
9751
- aria-label="Journal gallery"
9752
- style={{
9753
- opacity: isVisible ? 1 : 0,
9754
- transition: \`opacity \${LIGHTBOX_ANIM_MS}ms ease\`,
9755
- pointerEvents: isVisible ? 'auto' : 'none',
9756
- ...(articleWidthCss ? { ['--cntrl-article-width' as string]: articleWidthCss } : {}),
9757
- }}
9758
- >
9759
- <div className={\`\${P}-lightbox-backdrop\`} style={{ backgroundColor }} />
9760
- <div
9761
- className={\`\${P}-lightbox-content\`}
9762
- onClick={(event) => event.stopPropagation()}
9763
- >
9764
- <div
9765
- className={\`\${P}-lightbox-strip\`}
9766
- data-desktop-nav={allowDesktopNav && entries.length > 1 ? 'true' : 'false'}
9767
- onPointerUp={allowDesktopNav ? onStripPointerUp : undefined}
9768
- >
9769
- <div className={\`\${P}-slide-stack\`}>
9770
- {outgoingSlideEntry && isSlideFading ? (
9771
- <div
9772
- key={\`slide-out-\${slideTransitionKey}\`}
9773
- className={\`\${P}-slide-layer-out \${P}-slide-fade-out\`}
9774
- onAnimationEnd={(event) => {
9775
- if (event.target !== event.currentTarget) return;
9776
- finishSlideTransition(slideTransitionKey);
9777
- }}
9778
- >
9779
- <div
9780
- className={\`\${P}-slide-area\`}
9781
- style={{
9782
- maxWidth: slideMaxWidth,
9783
- maxHeight: slideMaxHeight,
9784
- }}
9785
- >
9786
- {renderEntryImages(outgoingSlideEntry)}
9787
- </div>
9788
- </div>
9789
- ) : null}
9790
- <div
9791
- key={\`slide-in-\${slideTransitionKey}-\${activeEntryIndex}\`}
9792
- className={\`\${P}-slide-layer-in\${isSlideFading ? \` \${P}-slide-fade-in\` : ''}\`}
9793
- >
9794
- <div
9795
- className={\`\${P}-slide-area\`}
9796
- style={{
9797
- maxWidth: slideMaxWidth,
9798
- maxHeight: slideMaxHeight,
9799
- }}
9800
- >
9801
- {activeEntry ? renderEntryImages(activeEntry) : null}
9802
- </div>
9803
- </div>
9804
- </div>
9805
- </div>
9806
-
9807
- <div className={\`\${P}-lightbox-content-inner\`} style={{ width: '100%', height: '100%' }}>
9808
- <div
9809
- data-controls={showControls ? 'contentMarginTop' : undefined}
9810
- className={showControls ? \`\${P}-control\` : undefined}
9811
- style={{ height: contentMarginTop, width: '100%' }}
9812
- />
9813
- <div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
9814
- <div
9815
- data-controls={showControls ? 'contentMarginLeft' : undefined}
9816
- data-controls-axis={showControls ? 'x' : undefined}
9817
- className={showControls ? \`\${P}-control\` : undefined}
9818
- style={{ width: contentMarginLeft, flexShrink: 0 }}
9819
- />
9820
- <div className={\`\${P}-lightbox-content-area\`}>
9821
- {hasTitles && (
9822
- <div
9823
- className={\`\${P}-text-bar-cell\`}
9824
- style={hasCounter ? { marginRight: textCountGap } : undefined}
9825
- >
9826
- <div
9827
- className={\`\${P}-titles-row\`}
9828
- style={titlesGapStyle}
9829
- >
9830
- {textTransition === 'fade' ? (
9831
- <>
9832
- <div
9833
- ref={titlesMeasureRef}
9834
- className={\`\${P}-titles-stack\`}
9835
- style={{
9836
- ...titlesGapStyle,
9837
- position: 'absolute',
9838
- visibility: 'hidden',
9839
- pointerEvents: 'none',
9840
- left: 0,
9841
- right: 0,
9842
- top: 0,
9843
- width: '100%',
9844
- height: 'auto',
9845
- }}
9846
- aria-hidden="true"
9847
- >
9848
- {incomingMeasureEntry ? renderTitles(incomingMeasureEntry, false) : renderTitles(activeEntry, false)}
9849
- </div>
9850
- <div
9851
- ref={titlesStackRef}
9852
- className={\`\${P}-titles-stack\`}
9853
- style={{
9854
- ...titlesGapStyle,
9855
- ...(isTitlesFading && titlesStackMinHeight ? { minHeight: titlesStackMinHeight } : undefined),
9856
- ...(isTitlesFading && titlesStackWidth ? { width: titlesStackWidth, maxWidth: '100%' } : undefined),
9857
- ...(isTitlesFading ? { overflow: 'hidden' } : undefined),
9858
- }}
9859
- >
9860
- {outgoingEntry && isTitlesFading ? (
9861
- <div
9862
- className={\`\${P}-titles-layer-out \${P}-titles-fade-out\`}
9863
- style={titlesGapStyle}
9864
- >
9865
- {renderTitles(outgoingEntry)}
9866
- </div>
9867
- ) : null}
9868
- <div
9869
- className={\`\${P}-titles-layer-in\${isTitlesFading ? \` \${P}-titles-layer-in-fading \${P}-titles-fade-in\` : ''}\`}
9870
- style={titlesGapStyle}
9871
- >
9872
- {renderTitles(activeEntry, true)}
9873
- </div>
9874
- </div>
9875
- </>
9876
- ) : (
9877
- renderTitles(activeEntry, true)
9878
- )}
9879
- </div>
9880
- {showControls && hasCounter ? renderGapControl('textCountGap', textCountGap) : null}
9881
- </div>
9882
- )}
9883
- {hasCounter && (
9884
- <div
9885
- className={\`\${P}-text-bar-cell\`}
9886
- style={hasCloseIcon ? { marginRight: countCloseGap } : undefined}
9887
- >
9888
- <span className={\`\${P}-entry-counter\`} style={{ color: title1Style.color }}>
9889
- {activeEntryIndex + 1} / {entries.length}
9890
- </span>
9891
- {showControls && hasCloseIcon ? renderGapControl('countCloseGap', countCloseGap) : null}
9892
- </div>
9893
- )}
9894
- {hasCloseIcon && (
9895
- <div
9896
- className={\`\${P}-close-icon\`}
9897
- style={{
9898
- width: scalingValue(closeIconMaxWidth ?? 0, isEditor),
9899
- height: scalingValue(closeIconMaxWidth ?? 0, isEditor),
9900
- ['--close-icon-hover-color' as string]: closeIconHoverColor,
9901
- }}
9902
- >
9903
- <button
9904
- type="button"
9905
- className={\`\${P}-close-icon-inner\`}
9906
- onClick={handleClose}
9907
- aria-label="Close"
9908
- >
9909
- <SvgImage url={closeIcon ?? ''} fill={closeIconColor} hoverFill={closeIconHoverColor} className={\`\${P}-close-icon-img\`} />
9910
- </button>
9911
- </div>
9912
- )}
9913
- </div>
9914
- <div
9915
- data-controls={showControls ? 'contentMarginRight' : undefined}
9916
- data-controls-axis={showControls ? 'x' : undefined}
9917
- className={showControls ? \`\${P}-control\` : undefined}
9918
- style={{ width: contentMarginRight, flexShrink: 0 }}
9919
- />
9920
- </div>
9921
- </div>
9922
- </div>
9923
- </div>
9924
- );
9925
- };
9926
-
9927
- type LightboxJournalProps = {
9928
- settings: LightboxJournalSettings;
9929
- content?: LightboxJournalItem[];
9930
- isEditor?: boolean;
9931
- isEditMode?: boolean;
9932
- isPreviewMode?: boolean;
9933
- portalId?: string;
9934
- } & CommonComponentProps;
9935
-
9936
- export const LightboxJournal = ({ settings, content, isEditor, isEditMode, isPreviewMode, portalId }: LightboxJournalProps) => {
9937
- const { prefix: P } = useScopedStyles();
9938
- const {
9939
- cover,
9940
- coverFit,
9941
- backgroundColor,
9942
- objectFit,
9943
- imageGap,
9944
- maxWidth,
9945
- maxHeight,
9946
- textMaxWidth,
9947
- textTransition,
9948
- titlesGap,
9949
- textCountGap,
9950
- countCloseGap,
9951
- fontFamily,
9952
- title1Color,
9953
- title2Color,
9954
- title3Color,
9955
- title1FontSettings,
9956
- title1FontSize,
9957
- title1LineHeight,
9958
- title1LetterSpacing,
9959
- title1WordSpacing,
9960
- title1TextAppearance,
9961
- title2FontSettings,
9962
- title2FontSize,
9963
- title2LineHeight,
9964
- title2LetterSpacing,
9965
- title2WordSpacing,
9966
- title2TextAppearance,
9967
- title3FontSettings,
9968
- title3FontSize,
9969
- title3LineHeight,
9970
- title3LetterSpacing,
9971
- title3WordSpacing,
9972
- title3TextAppearance,
9973
- closeIcon,
9974
- closeIconMaxWidth,
9975
- closeIconColor,
9976
- closeIconHoverColor,
9977
- contentMarginTop,
9978
- contentMarginLeft,
9979
- contentMarginRight,
9980
- } = settings;
9981
-
9982
- const scaled = (value: number) => scalingValue(value, isEditor ?? false);
9983
-
9984
- const resolvedTitle1TextStyle: TextStyles = {
9985
- fontSettings: {
9986
- fontFamily,
9987
- fontWeight: title1FontSettings?.fontWeight ?? 400,
9988
- fontStyle: title1FontSettings?.fontStyle ?? 'normal',
9989
- },
9990
- fontSize: title1FontSize ?? 0.04,
9991
- lineHeight: title1LineHeight,
9992
- letterSpacing: title1LetterSpacing ?? 0,
9993
- wordSpacing: title1WordSpacing ?? 0,
9994
- textAppearance: title1TextAppearance,
9995
- color: title1Color ?? '#ffffff',
9996
- };
9997
- const resolvedTitle2TextStyle: TextStyles = {
9998
- fontSettings: {
9999
- fontFamily,
10000
- fontWeight: title2FontSettings?.fontWeight ?? 400,
10001
- fontStyle: title2FontSettings?.fontStyle ?? 'normal',
10002
- },
10003
- fontSize: title2FontSize ?? 0.03,
10004
- lineHeight: title2LineHeight,
10005
- letterSpacing: title2LetterSpacing ?? 0,
10006
- wordSpacing: title2WordSpacing ?? 0,
10007
- textAppearance: title2TextAppearance,
10008
- color: title2Color ?? '#ffffff',
10009
- };
10010
- const resolvedTitle3TextStyle: TextStyles = {
10011
- fontSettings: {
10012
- fontFamily,
10013
- fontWeight: title3FontSettings?.fontWeight ?? 400,
10014
- fontStyle: title3FontSettings?.fontStyle ?? 'normal',
10015
- },
10016
- fontSize: title3FontSize ?? 0.025,
10017
- lineHeight: title3LineHeight,
10018
- letterSpacing: title3LetterSpacing ?? 0,
10019
- wordSpacing: title3WordSpacing ?? 0,
10020
- textAppearance: title3TextAppearance,
10021
- color: title3Color ?? '#ffffff',
10022
- };
10023
- const title1Style = textStylesToCss(resolvedTitle1TextStyle, isEditor);
10024
- const title2Style = textStylesToCss(resolvedTitle2TextStyle, isEditor);
10025
- const title3Style = textStylesToCss(resolvedTitle3TextStyle, isEditor);
10026
-
10027
- const wrapperRef = useRef<HTMLDivElement>(null);
10028
- const [lightboxOpen, setLightboxOpen] = useState(false);
10029
- const [articleWidthCss, setArticleWidthCss] = useState<string | undefined>();
10030
- const entries = (content ?? []).filter((entry) => getEntryImages(entry).length > 0);
10031
-
10032
- const openLightbox = () => {
10033
- if (entries.length === 0) return;
10034
- if (isEditor && wrapperRef.current) {
10035
- setArticleWidthCss(getArticleWidthCSSValue(wrapperRef.current));
10036
- }
10037
- setLightboxOpen(true);
10038
- };
10039
-
10040
- const closeLightbox = () => {
10041
- setLightboxOpen(false);
10042
- };
10043
-
10044
- return (
10045
- <>
10046
- <div ref={wrapperRef} className={\`\${P}-wrapper\`}>
10047
- <style dangerouslySetInnerHTML={{ __html: getCSS(P) }} />
10048
- {cover ? (
10049
- <button
10050
- type="button"
10051
- className={\`\${P}-cover\`}
10052
- onClick={openLightbox}
10053
- style={{
10054
- display: 'block',
10055
- padding: 0,
10056
- border: 'none',
10057
- background: 'transparent',
10058
- }}
10059
- aria-label="Open journal gallery"
10060
- >
10061
- <img
10062
- className={\`\${P}-cover-image\`}
10063
- src={cover}
10064
- alt="cover"
10065
- style={{ objectFit: coverFit === 'cover' ? 'cover' : 'contain' }}
10066
- />
10067
- </button>
10068
- ) : null}
10069
- </div>
10070
-
10071
- {lightboxOpen && typeof document !== 'undefined' && (() => {
10072
- const portalTarget = (portalId ? document.getElementById(portalId) : null) ?? document.body;
10073
- return createPortal(
10074
- <LightboxOverlay
10075
- prefix={P}
10076
- entries={entries}
10077
- objectFit={objectFit === 'fit' ? 'contain' : 'cover'}
10078
- backgroundColor={backgroundColor}
10079
- imageGap={scaled(imageGap ?? 0)}
10080
- slideMaxWidth={\`\${maxWidth}%\`}
10081
- slideMaxHeight={\`\${maxHeight}%\`}
10082
- textMaxWidth={scaled(textMaxWidth ?? 0.4)}
10083
- titlesGap={scaled(titlesGap ?? 0)}
10084
- textCountGap={scaled(textCountGap ?? 0)}
10085
- countCloseGap={scaled(countCloseGap ?? 0)}
10086
- textTransition={textTransition}
10087
- title1Style={title1Style}
10088
- title2Style={title2Style}
10089
- title3Style={title3Style}
10090
- contentMarginTop={scaled(contentMarginTop ?? 0)}
10091
- contentMarginLeft={scaled(contentMarginLeft ?? 0)}
10092
- contentMarginRight={scaled(contentMarginRight ?? 0)}
10093
- closeIcon={closeIcon}
10094
- closeIconMaxWidth={closeIconMaxWidth}
10095
- closeIconColor={closeIconColor}
10096
- closeIconHoverColor={closeIconHoverColor}
10097
- articleWidthCss={articleWidthCss}
10098
- isEditor={isEditor}
10099
- isEditMode={isEditMode}
10100
- isPreviewMode={isPreviewMode}
10101
- onClose={closeLightbox}
10102
- />,
10103
- portalTarget,
10104
- );
10105
- })()}
10106
- </>
10107
- );
10108
- };
10109
-
10110
- export type LightboxJournalSettings = {
10111
- cover: string | null;
10112
- coverFit: 'cover' | 'fit';
10113
- maxWidth: number;
10114
- maxHeight: number;
10115
- backgroundColor: string;
10116
- objectFit: 'cover' | 'fit';
10117
- imageGap?: number;
10118
- textMaxWidth: number;
10119
- textTransition: 'none' | 'fade';
10120
- titlesGap?: number;
10121
- textCountGap?: number;
10122
- countCloseGap?: number;
10123
- fontFamily?: string;
10124
- title1Color: string;
10125
- title2Color: string;
10126
- title3Color: string;
10127
- title1FontSettings?: { fontWeight: number; fontStyle: string };
10128
- title1FontSize: number;
10129
- title1LineHeight?: number;
10130
- title1LetterSpacing?: number;
10131
- title1WordSpacing?: number;
10132
- title1TextAppearance?: TextStyles['textAppearance'];
10133
- title2FontSettings?: { fontWeight: number; fontStyle: string };
10134
- title2FontSize: number;
10135
- title2LineHeight?: number;
10136
- title2LetterSpacing?: number;
10137
- title2WordSpacing?: number;
10138
- title2TextAppearance?: TextStyles['textAppearance'];
10139
- title3FontSettings?: { fontWeight: number; fontStyle: string };
10140
- title3FontSize: number;
10141
- title3LineHeight?: number;
10142
- title3LetterSpacing?: number;
10143
- title3WordSpacing?: number;
10144
- title3TextAppearance?: TextStyles['textAppearance'];
10145
- contentMarginTop: number;
10146
- contentMarginLeft: number;
10147
- contentMarginRight: number;
10148
- closeIcon: string | null;
10149
- closeIconMaxWidth: number;
10150
- closeIconColor: string;
10151
- closeIconHoverColor: string;
10152
- };
10153
- `,Iu="https://cdn.cntrl.site/component-assets/Close.svg",Ai={fontSettings:{type:"object",display:{type:"font-settings-weight",visible:!0},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},Pu={type:"object",version:1,settings:{properties:{cover:{type:"string",scope:"common",title:"",display:{type:"settings-image-input"}},coverFit:{type:"string",scope:"common",title:"Display",display:{type:"toggle-cycle",enum:["cover","fit"]}},maxHeight:{type:"number",scope:"layout",title:"Max Height",min:0,max:100,display:{type:"percentage-input"}},maxWidth:{type:"number",scope:"layout",title:"Max Width",min:0,max:100,display:{type:"percentage-input"}},imageGap:{type:"number",scope:"layout",title:"Image Gap",min:0,max:200,display:{type:"range-control",visible:!1}},backgroundColor:{type:"string",scope:"layout",title:"BG",display:{type:"settings-color-picker"}},objectFit:{type:"string",scope:"common",title:"Display",display:{type:"toggle-cycle",enum:["cover","fit"]}},closeIcon:{type:["string","null"],scope:"common",title:"",display:{type:"settings-image-input"}},closeIconMaxWidth:{type:"number",scope:"layout",title:"Max Width",display:{type:"full-width-input"},min:0,max:1},closeIconColor:{type:"string",scope:"common",title:"Fill Icon",display:{type:"settings-color-picker"}},closeIconHoverColor:{type:"string",scope:"common",title:"Hover Icon",display:{type:"settings-color-picker"}},textMaxWidth:{type:"string",scope:"common",title:"Max Width",display:{type:"full-width-input"},min:0,max:1},textTransition:{type:"string",scope:"common",title:"Transition",display:{type:"toggle-cycle",enum:["none","fade"]}},titlesGap:{type:"number",scope:"layout",title:"Titles Gap",min:0,max:200,display:{type:"range-control"}},textCountGap:{type:"number",scope:"layout",title:"Text / Count Gap",min:0,max:200,display:{type:"range-control"}},countCloseGap:{type:"number",scope:"layout",title:"Count / Close Gap",min:0,max:200,display:{type:"range-control"}},fontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},title1Color:{type:"string",scope:"common",title:"Title 1",display:{type:"palette-color-picker"}},title2Color:{type:"string",scope:"common",title:"Title 2",display:{type:"palette-color-picker"}},title3Color:{type:"string",scope:"common",title:"Title 3",display:{type:"palette-color-picker"}},title1FontSettings:{...Ai.fontSettings,scope:"common",title:"Title 1"},title1FontSize:{type:"number",scope:"layout",title:"Title 1 Font Size",display:{type:"font-size"}},title1LineHeight:{type:"number",scope:"layout",title:"Title 1 Line Height",display:{type:"line-height-input"}},title1LetterSpacing:{type:"number",scope:"layout",title:"Title 1 Letter Spacing",display:{type:"letter-spacing-input"}},title1WordSpacing:{type:"number",scope:"layout",title:"Title 1 Word Spacing",display:{type:"word-spacing-input"}},title1TextAppearance:{type:"object",scope:"layout",title:"Title 1 Text Appearance",display:{type:"text-appearance"}},title2FontSettings:{...Ai.fontSettings,scope:"common",title:"Title 2"},title2FontSize:{type:"number",scope:"layout",title:"Title 2 Font Size",display:{type:"font-size"}},title2LineHeight:{type:"number",scope:"layout",title:"Title 2 Line Height",display:{type:"line-height-input"}},title2LetterSpacing:{type:"number",scope:"layout",title:"Title 2 Letter Spacing",display:{type:"letter-spacing-input"}},title2WordSpacing:{type:"number",scope:"layout",title:"Title 2 Word Spacing",display:{type:"word-spacing-input"}},title2TextAppearance:{type:"object",scope:"layout",title:"Title 2 Text Appearance",display:{type:"text-appearance"}},title3FontSettings:{...Ai.fontSettings,scope:"common",title:"Title 3"},title3FontSize:{type:"number",scope:"layout",title:"Title 3 Font Size",display:{type:"font-size"}},title3LineHeight:{type:"number",scope:"layout",title:"Title 3 Line Height",display:{type:"line-height-input"}},title3LetterSpacing:{type:"number",scope:"layout",title:"Title 3 Letter Spacing",display:{type:"letter-spacing-input"}},title3WordSpacing:{type:"number",scope:"layout",title:"Title 3 Word Spacing",display:{type:"word-spacing-input"}},title3TextAppearance:{type:"object",scope:"layout",title:"Title 3 Text Appearance",display:{type:"text-appearance"}},contentMarginTop:{type:"number",scope:"layout",title:"Content margin top",min:0,max:200,display:{type:"range-control"}},contentMarginLeft:{type:"number",scope:"layout",title:"Content margin left",min:0,max:200,display:{type:"range-control"}},contentMarginRight:{type:"number",scope:"layout",title:"Content margin right",min:0,max:200,display:{type:"range-control"}}},defaults:{cover:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",coverFit:"cover",objectFit:"cover",closeIcon:Iu,closeIconColor:"#ffffff",closeIconHoverColor:"#cccccc",textTransition:"fade",fontFamily:"Arial",title1Color:"#ffffff",title2Color:"#ffffff",title3Color:"#ffffff",title1FontSettings:{fontWeight:400,fontStyle:"normal"},title1LetterSpacing:0,title1WordSpacing:0,title1TextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},title2FontSettings:{fontWeight:400,fontStyle:"normal"},title2LetterSpacing:0,title2WordSpacing:0,title2TextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},title3FontSettings:{fontWeight:400,fontStyle:"normal"},title3LetterSpacing:0,title3WordSpacing:0,title3TextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{imageGap:0,maxHeight:80,maxWidth:80,textMaxWidth:.4,closeIconMaxWidth:.02,backgroundColor:"rgba(28, 31, 34, 0.9)",contentMarginTop:0,contentMarginLeft:0,contentMarginRight:0,titlesGap:.1,textCountGap:.02,countCloseGap:.02,title1FontSize:.02,title1LineHeight:.02,title2FontSize:.02,title2LineHeight:.02,title3FontSize:.02,title3LineHeight:.02},d:{maxHeight:80,maxWidth:80,imageGap:0,textMaxWidth:.4,closeIconMaxWidth:.02,backgroundColor:"rgba(28, 31, 34, 0.9)",contentMarginTop:0,contentMarginLeft:0,contentMarginRight:0,titlesGap:.1,textCountGap:.02,countCloseGap:.02,title1FontSize:.02,title1LineHeight:.02,title2FontSize:.02,title2LineHeight:.02,title3FontSize:.02,title3LineHeight:.02}},layout:["__componentName__","maxWidth","maxHeight","imageGap","titlesGap","textCountGap","countCloseGap","objectFit","contentMarginTop","contentMarginLeft","contentMarginRight"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__"]},{type:"row",title:"Image",items:["maxWidth","maxHeight"]},{type:"row",title:"Text",items:["textMaxWidth","textTransition"]},{type:"row",title:"Close icon",items:["closeIcon","closeIconMaxWidth"]},{type:"row",title:"Cover Image",items:["cover","coverFit"]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:["fontFamily",{type:"group",title:"",items:["title1FontSettings",{type:"row",items:["title1FontSize","title1LineHeight","title1LetterSpacing","title1WordSpacing"]},"title1TextAppearance"]},{type:"group",title:"",items:["title2FontSettings",{type:"row",items:["title2FontSize","title2LineHeight","title2LetterSpacing","title2WordSpacing"]},"title2TextAppearance"]},{type:"group",title:"",items:["title3FontSettings",{type:"row",items:["title3FontSize","title3LineHeight","title3LetterSpacing","title3WordSpacing"]},"title3TextAppearance"]}]}],paletteBookmark:{items:["backgroundColor","title1Color","title2Color","title3Color","closeIconColor","closeIconHoverColor"],panelIds:["general","typeStyle"]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{title1:{type:"string",label:"Title 1",placeholder:"Add Title 1...",display:{type:"text-input"}},title2:{type:"string",label:"Title 2",placeholder:"Add Title 2...",display:{type:"text-input"}},title3:{type:"string",label:"Title 3",placeholder:"Add Title 3...",display:{type:"text-input"}},images:{type:"object",label:"Images",max:2,display:{type:"media-list-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]}}},default:[{title1:"Journal Entry 1",title2:"summer vacation",title3:"July 1978",images:[{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7RZNCQFC3T744H0KX6R3FR.jpeg",name:"",objectFit:"contain"},{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7RZRTSS60YBFT6Y37ZX00T.jpeg",name:"",objectFit:"contain"}]},{title1:"Journal Entry 2",title2:"spring break",title3:"March 1979",images:[{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ9M9YJPQ5JWKCHDEW5M1GJD.jpeg",name:"",objectFit:"contain"},{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7S04EHBXQS1T4KVAMZNZQM.jpeg",name:"",objectFit:"contain"}]},{title1:"Journal Entry 3",title2:"winter vacation",title3:"January 1980",images:[{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ9M9YJPQ5JWKCHDEW5M1GJD.jpeg",name:"",objectFit:"contain"}]}]}},Ru={element:Lu,id:"lightbox-journal",name:"Lightbox Journal",category:"galleries",version:1,defaultSize:{d:{width:350,height:350},m:{width:300,height:350}},preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Journal.png"},schema:Pu,sourceCode:Eu,assetsPaths:{content:[{path:"images.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[]}},Au=[fl,wl,uc,xu,Ru,xc,Rc,jc,Gc,Zc,ld,lu];exports.components=Au;exports.isSchemaV1=sa;
7552
+ `,hn=["A","B","C","D","E"],Zi=[...Vo,"Baseline A","Baseline B","Baseline C","Baseline D","Baseline E"],jt={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}},fontSize:{type:"number",display:{type:"font-size"}},lineHeight:{type:"number",display:{type:"line-height-input"}},letterSpacing:{type:"number",display:{type:"letter-spacing-input"}},wordSpacing:{type:"number",display:{type:"word-spacing-input"}},textAlign:{type:"string",enum:["left","center","right","justify"],display:{type:"vertical-text-aligh-options"}},textAppearance:{type:"object",display:{type:"text-appearance",useTabDesign:!0},properties:{textTransform:{type:"string",enum:["none","uppercase","lowercase","capitalize"]},textDecoration:{type:"string",enum:["none","underline"]},fontVariant:{type:"string",enum:["normal","small-caps"]}}}};function Nd(e){return{type:"string",label:e,placeholder:"Add Title...",display:{type:"text-input"}}}function Un(e){return{type:"number",scope:"layout",title:e,min:0,max:100,display:{type:"range-control"}}}function Hd(){return Object.fromEntries(hn.map((e,t)=>{const n=Nt[t],o=`${e} column`;return[n,Nd(o)]}))}function Bd(){const e={};for(const t of hn)e[`${t}ColumnWidth`]=Un(`${t} column width`),e[`${t}ColumnPaddingLeft`]=Un(`${t} column padding left`),e[`${t}ColumnPaddingRight`]=Un(`${t} column padding right`),e[`${t}ColumnPaddingBottom`]=Un(`${t} column padding bottom`);return e}function Ji(e={}){const t={columns:5,wrapperWidth:1,columnsOrder:[...Nt]};for(const n of hn)t[`${n}ColumnWidth`]=.2,t[`${n}ColumnPaddingLeft`]=0,t[`${n}ColumnPaddingRight`]=0,t[`${n}ColumnPaddingBottom`]=0;return{...t,...e}}function Od(e){const t={};if(e===Et)t[`${e}VerticalAlign`]={type:"string",scope:"layout",title:"",display:{type:"drop-down",label:"Vertical alignment",enum:[...Vo],useTabDesign:!0},enum:[...Vo]};else{const n=e.charAt(0);t[`${e}VerticalAlign`]={type:"string",scope:"layout",title:"",display:{type:"drop-down",label:"Vertical alignment",enum:[...Zi],filterBaselineByTopAnchor:!0,columnLetter:n,useTabDesign:!0},enum:[...Zi]}}return t[Te(e,"textFontFamily")]={type:"string",scope:"common",title:"",display:{type:"font-family-select",hideLabel:!0,useTabDesign:!0}},t[Te(e,"textFontSettings")]={...jt.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight",hideLabel:!0,useTabDesign:!0}},t[Te(e,"textFontSize")]={...jt.fontSize,scope:"layout",title:"",display:{type:"font-size"}},t[Te(e,"textLineHeight")]={...jt.lineHeight,scope:"layout",title:"",display:{type:"line-height-input"}},t[Te(e,"textLetterSpacing")]={...jt.letterSpacing,scope:"layout",title:"",display:{type:"letter-spacing-input"}},t[Te(e,"textWordSpacing")]={...jt.wordSpacing,scope:"layout",title:"",display:{type:"word-spacing-input"}},t[Te(e,"textTextAlign")]={...jt.textAlign,scope:"layout",title:"",display:{type:"vertical-text-aligh-options"}},t[Te(e,"textTextAppearance")]={...jt.textAppearance,scope:"layout",title:"",display:{type:"text-appearance",useTabDesign:!0}},t}const Vd=xo.reduce((e,t)=>({...e,...Od(t)}),{}),Dd=xo.reduce((e,t)=>({...e,[`${t}VerticalAlign`]:t===Et?"Center":"Top",[Te(t,"textFontFamily")]:"Arial",[Te(t,"textFontSettings")]:{fontWeight:400,fontStyle:"normal"},[Te(t,"textLetterSpacing")]:0,[Te(t,"textWordSpacing")]:0,[Te(t,"textTextAlign")]:t===Et?"center":"left",[Te(t,"textTextAppearance")]:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}}),{});function Qi(e){const{textFontSize:t,textLineHeight:n,textTextAlign:o}=e;return xo.reduce((i,r)=>(t!==void 0&&(i[`${r}TextFontSize`]=t),n!==void 0&&(i[`${r}TextLineHeight`]=n),o!==void 0&&(i[Te(r,"textTextAlign")]=o),i),{})}const jd=vd();function zr(e){return[Te(e,"textFontFamily"),Te(e,"textFontSettings"),Te(e,"textFontSize"),Te(e,"textLineHeight"),Te(e,"textLetterSpacing"),Te(e,"textWordSpacing"),Te(e,"textTextAlign"),Te(e,"textTextAppearance"),`${e}VerticalAlign`]}function zd(){const e=[];return di.forEach((t,n)=>{const o=Nt[n],i=zr(t);for(let r=1;r<Nt.length;r+=1){const s=[{name:"columns",value:r},...Array.from({length:r},(c,a)=>({name:`columnsOrder.${a}`,value:o,isNotEqual:!0}))];i.forEach(c=>{e.push({if:s,then:{name:`properties.${c}.display.visible`,value:!1}})})}}),e}const Kd=["textColor","backgroundColor","dividerColor","textHoverColor","backgroundHoverColor","dividerHoverColor"],qd=["cutLabel","cutCellMinHeight","showCut"],Ud=zr(Et),Gd=[...qd,...Ud],Yd=[...hn.flatMap(e=>[`${e}ColumnWidth`,`${e}ColumnPaddingLeft`,`${e}ColumnPaddingRight`]),"rowPaddingTop","rowPaddingBottom"],zt=[{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDBHFMF0NKJMYCGGRA.jpeg",name:"List-1.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MD194E6Z49QD9GG03N.jpeg",name:"List-2.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDNZRY59Q8JJVYY92K.jpeg",name:"List-3.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDRXD5QWHB5YF8H3XM.jpeg",name:"List-4.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MD3C6H5Q9QX0SX8PSP.jpeg",name:"List-5.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDM6VHTFVXVD58V0D6.jpeg",name:"List-6.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MD3QT4RPG3VMM2NK5K.jpeg",name:"List-7.png"}],Xd=[{AColumn:"01",BColumnWidth:"Ethan Parker",CColumnWidth:"Midnight Atlas",DColumnWidth:"Portland, OR",EColumnWidth:"On Display",image:zt[0],link:""},{AColumn:"02",BColumnWidth:"Madison Reed",CColumnWidth:"Echoes in Vermilion",DColumnWidth:"Savannah, GA",EColumnWidth:"Scheduled",image:zt[1],link:""},{AColumn:"03",BColumnWidth:"Noah Bennett",CColumnWidth:"Paper Constellations",DColumnWidth:"Madison, WI",EColumnWidth:"On Display",image:zt[2],link:""},{AColumn:"04",BColumnWidth:"Olivia Carter",CColumnWidth:"The Quiet Frequency",DColumnWidth:"Boise, ID",EColumnWidth:"On Display",image:zt[3],link:""},{AColumn:"05",BColumnWidth:"Mason Brooks",CColumnWidth:"Sights of Tomorrow",DColumnWidth:"Tampa, FL",EColumnWidth:"Postponed",image:zt[4],link:""},{AColumn:"06",BColumnWidth:"Sophia Mitchell",CColumnWidth:"Velvet Horizons",DColumnWidth:"Albuquerque, NM",EColumnWidth:"Scheduled",image:zt[5],link:""},{AColumn:"07",BColumnWidth:"Jackson Turner",CColumnWidth:"Ink & Aurora",DColumnWidth:"Pittsburgh, PA",EColumnWidth:"On Display",image:zt[6],link:""}],Zd=[...hn.flatMap(e=>[`${e}ColumnWidth`,`${e}ColumnPaddingLeft`,`${e}ColumnPaddingRight`,`${e}ColumnPaddingBottom`]),"columnsOrder"],Jd={type:"object",version:1,content:{type:"array",settings:{addItemWithoutImage:!0},display:{type:"array",ref:{columnsOrder:"settings.properties.columnsOrder",columnsCount:"settings.properties.columns"}},items:{type:"object",properties:{...Hd(),image:{type:"object",label:"Image",display:{isObjectFitEditable:!1,type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},link:{type:"string",label:"Link",placeholder:"Add link...",display:{type:"text-input"}}},required:["image"]},default:Xd},settings:{sizing:"auto auto",properties:{type:{type:"string",scope:"layout",title:"",display:{type:"radio-group"},enum:["A","B"]},columns:{type:"number",scope:"layout",title:"Columns",display:{type:"count-number"},min:1,max:5},wrapperWidth:{type:"number",scope:"layout",title:"Width",display:{type:"numeric-input"},min:0,max:9999},textPaddingLR:{type:"number",scope:"layout",title:"Text Padding LR",min:0,max:9999,display:{type:"range-control"}},entriesCount:{type:"number",scope:"layout",title:"Entries #",display:{type:"toggle-numeric-input",enum:["Auto","Fixed"]},min:1},cellMinHeight:{type:"number",scope:"layout",title:"Cell min height",display:{type:"numeric-input"},min:0,max:9999},imageOnHover:{type:"boolean",scope:"common",title:"Image On Hover",display:{type:"toggle-cycle",enum:["On","Off"]}},imageSize:{type:"object",scope:"layout",title:"Image size",display:{type:"min-max-input"},min:1,max:1440,properties:{min:{type:"number"},max:{type:"number"}}},dividerWidth:{type:"number",scope:"layout",title:"Divider width",display:{type:"numeric-input"},min:0,max:9999},showVisibility:{type:"array",scope:"common",title:"Show",display:{type:"double-toggle",enum:["Top","Bottom"]},items:{type:"boolean"},default:[!0,!1]},cut:{type:"number",scope:"layout",title:"Cut",display:{type:"toggle-numeric-input",enum:["Off","On"]},min:1},entryHoverEffect:{type:"string",scope:"common",title:"Entry Hover Effect",display:{type:"toggle-cycle",enum:["None","Default","Blinds"]}},cutCellMinHeight:{type:"number",scope:"layout",title:"Cell min height",display:{type:"numeric-input"},min:0,max:9999},cutLabel:{type:"string",scope:"common",title:"Cut Label",display:{type:"label-input"}},showCut:{type:"number",scope:"layout",title:"Show",display:{type:"toggle-numeric-input",enum:["All","Custom"]},min:1},rowPaddingTop:{type:"number",scope:"layout",title:"Row Padding Top",min:0,max:100,display:{type:"range-control"}},rowPaddingBottom:{type:"number",scope:"layout",title:"Row Padding Bottom",min:0,max:100,display:{type:"range-control"}},rowPaddingTopB:{type:"number",scope:"layout",title:"Row Padding Top",min:0,max:100,display:{type:"range-control"}},...Bd(),columnsOrder:{type:"array",scope:"layout",title:"Columns Order",display:{type:"reorder-input"},items:{type:"string"}},textColor:{type:"string",scope:"common",title:"Text Default",display:{type:"palette-color-picker"}},textHoverColor:{type:"string",scope:"common",title:"Text Hover",display:{type:"palette-color-picker"}},...Vd,backgroundColor:{type:"string",scope:"common",title:"BG Default",display:{type:"palette-color-picker"}},dividerColor:{type:"string",scope:"common",title:"Divider Default",display:{type:"palette-color-picker"}},backgroundHoverColor:{type:"string",scope:"common",title:"BG Hover",display:{type:"palette-color-picker"}},dividerHoverColor:{type:"string",scope:"common",title:"Divider Hover",display:{type:"palette-color-picker"}}},defaults:{imageOnHover:"Off",entryHoverEffect:"None",cutLabel:"SEE ALL",showVisibility:[!0,!0],textColor:"#767676",textHoverColor:"#767676",...Dd,backgroundColor:"#FFFFFF00",dividerColor:"#767676",backgroundHoverColor:"#FFFFFF00",dividerHoverColor:"#767676"},layoutDefaults:{m:Ji({type:"B",textPaddingLR:.0373,entriesCount:0,cellMinHeight:.02,imageSize:{min:80,max:320},dividerWidth:.002,cut:0,showCut:0,cutCellMinHeight:.043,rowPaddingTop:.01,rowPaddingBottom:.01,rowPaddingTopB:.01,textStroke:.003,textCorners:.192,textPadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},...Qi({textFontSize:.043,textLineHeight:.043,textTextAlign:"center"})}),d:Ji({type:"A",textPaddingLR:.01,entriesCount:0,cellMinHeight:.03,imageSize:{min:80,max:320},dividerWidth:6e-4,cut:0,showCut:0,cutCellMinHeight:.03,rowPaddingTop:.01,rowPaddingBottom:.01,rowPaddingTopB:.01,textStroke:.001,textCorners:.05,textPadding:{top:.01,right:.01,bottom:.01,left:.01},...Qi({textFontSize:.01,textLineHeight:.01})})},displayRules:[...zd(),...Gd.map(e=>({if:{name:"cut",value:0},then:{name:`properties.${e}.display.visible`,value:!1}})),{if:{name:"type",value:"A"},then:{name:"properties.textPaddingLR.display.visible",value:!1}},...Yd.map(e=>({if:{name:"type",value:"B"},then:{name:`properties.${e}.display.visible`,value:!1}})),{if:{name:"type",value:"A"},then:{name:"properties.rowPaddingTopB.display.visible",value:!1}},...hn.map(e=>({if:{name:"type",value:"A"},then:{name:`properties.${e}ColumnPaddingBottom.display.visible`,value:!1}}))],layout:["__componentName__","name","type","columns","wrapperWidth","textPaddingLR","entriesCount","cellMinHeight","imageOnHover","imageSize","dividerWidth","showVisibility","cut","showCut","cutCellMinHeight","entryHoverEffect","cutLabel","rowPaddingTop","rowPaddingBottom","rowPaddingTopB",...Zd]},panels:[{id:"general",icon:"cursor",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name"]},"type",{type:"row",title:"",items:["columns","wrapperWidth"]},{type:"row",title:"",items:["entriesCount","cellMinHeight"]},{type:"row",title:"",items:["imageOnHover","imageSize"]},{type:"row",title:"",items:["entryHoverEffect"]},{type:"row",title:"Divider Settings",items:["dividerWidth","showVisibility"]},{type:"row",title:"",items:["cut"]},{type:"row",title:"Cut Settings",items:["cutLabel","cutCellMinHeight"]},{type:"row",title:"",items:["showCut"]}]},{id:"columnsOrder",icon:"layers",title:"Columns Order",tooltip:"Columns order",layout:["columnsOrder"]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[jd]}],paletteBookmark:{items:[...Kd],panelIds:["general","typeStyle"],stateItems:{default:["textColor","backgroundColor","dividerColor","textHoverColor","backgroundHoverColor","dividerHoverColor"]}}},Qd={element:Fd,id:"list",name:"Default List",category:"lists",layoutMode:"structured",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Programme_List.png "},version:1,defaultSize:{d:{width:720,height:540}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},schema:Jd,sourceCode:Md},eu=[sl,gl,nc,uc,Cc,Wc,Nc,jc,Qc,Qd];exports.components=eu;exports.isSchemaV1=Jr;