@cntrl-site/components 1.0.4 → 1.0.6-0

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,921 +1,728 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),j=require("react"),dt=require("classnames"),F=require("./useScopedStyles-DpVdqfXj.js"),gr=require("react-dom");function mr(t){return t.type==="object"&&t.version===1}const fr="ControlSlider-module__wrapper___sHEkd",hr="ControlSlider-module__hoverArrow___A-dOH",yr="ControlSlider-module__sliderItem___QQSkR",vr="ControlSlider-module__sliderImage___9hRl-",br="ControlSlider-module__arrow___05ghY",Sr="ControlSlider-module__arrowVertical___tBfVN",xr="ControlSlider-module__nextArrow___-30Yc",Cr="ControlSlider-module__arrowInner___aEra3",$r="ControlSlider-module__arrowIcon___S4ztF",_r="ControlSlider-module__arrowImg___2dwJW",wr="ControlSlider-module__mirror___brd6U",Tr="ControlSlider-module__pagination___bicLF",Er="ControlSlider-module__paginationInner___bT-P-",Lr="ControlSlider-module__paginationVertical___zYqKw",Ar="ControlSlider-module__paginationItem___nTRbk",Ir="ControlSlider-module__dot___p1Qun",kr="ControlSlider-module__activeDot___LHFaj",Fr="ControlSlider-module__paginationInsideBottom___R3FWn",Rr="ControlSlider-module__paginationInsideTop___V-qb-",Br="ControlSlider-module__paginationOutsideBottom___14w8D",Vr="ControlSlider-module__paginationOutsideTop___SCLqB",Or="ControlSlider-module__paginationInsideLeft___yOBRZ",Pr="ControlSlider-module__paginationInsideRight___Rtt3o",Nr="ControlSlider-module__paginationOutsideLeft___lahaw",Wr="ControlSlider-module__paginationOutsideRight___EtuQa",zr="ControlSlider-module__imgWrapper___UjEgB",jr="ControlSlider-module__captionBlock___dJ6-j",Mr="ControlSlider-module__captionTextWrapper___HFlpf",Hr="ControlSlider-module__captionText___uGBVc",Dr="ControlSlider-module__active___WZK4G",Ur="ControlSlider-module__withPointerEvents___t-18M",Yr="ControlSlider-module__topLeftAlignment___zjnGM",Gr="ControlSlider-module__topCenterAlignment___gD1xW",qr="ControlSlider-module__topRightAlignment___NMapS",Xr="ControlSlider-module__middleLeftAlignment___OnUrY",Kr="ControlSlider-module__middleCenterAlignment___Tdkl0",Jr="ControlSlider-module__middleRightAlignment___wEbfX",Zr="ControlSlider-module__bottomLeftAlignment___cTP2-",Qr="ControlSlider-module__bottomCenterAlignment___c54fB",ti="ControlSlider-module__bottomRightAlignment___kEwrz",ei="ControlSlider-module__clickOverlay___DZA28",ni="ControlSlider-module__contain___pLyq7",oi="ControlSlider-module__cover___KdDat",Y={wrapper:fr,hoverArrow:hr,sliderItem:yr,sliderImage:vr,arrow:br,arrowVertical:Sr,nextArrow:xr,arrowInner:Cr,arrowIcon:$r,arrowImg:_r,mirror:wr,pagination:Tr,paginationInner:Er,paginationVertical:Lr,paginationItem:Ar,dot:Ir,activeDot:kr,paginationInsideBottom:Fr,paginationInsideTop:Rr,paginationOutsideBottom:Br,paginationOutsideTop:Vr,paginationInsideLeft:Or,paginationInsideRight:Pr,paginationOutsideLeft:Nr,paginationOutsideRight:Wr,imgWrapper:zr,captionBlock:jr,captionTextWrapper:Mr,captionText:Hr,active:Dr,withPointerEvents:Ur,topLeftAlignment:Yr,topCenterAlignment:Gr,topRightAlignment:qr,middleLeftAlignment:Xr,middleCenterAlignment:Kr,middleRightAlignment:Jr,bottomLeftAlignment:Zr,bottomCenterAlignment:Qr,bottomRightAlignment:ti,clickOverlay:ei,contain:ni,cover:oi};function ri(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function ii(t,e,n){return e&&ri(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t}var to="(prefers-reduced-motion: reduce)",ce=1,ai=2,ge=3,he=4,Fe=5,Ye=6,Ke=7,si={CREATED:ce,MOUNTED:ai,IDLE:ge,MOVING:he,SCROLLING:Fe,DRAGGING:Ye,DESTROYED:Ke};function zt(t){t.length=0}function qt(t,e,n){return Array.prototype.slice.call(t,e,n)}function at(t){return t.bind.apply(t,[null].concat(qt(arguments,1)))}var Co=setTimeout,xn=function(){};function eo(t){return requestAnimationFrame(t)}function en(t,e){return typeof e===t}function we(t){return!kn(t)&&en("object",t)}var In=Array.isArray,$o=at(en,"function"),Yt=at(en,"string"),Re=at(en,"undefined");function kn(t){return t===null}function _o(t){try{return t instanceof(t.ownerDocument.defaultView||window).HTMLElement}catch{return!1}}function Be(t){return In(t)?t:[t]}function Tt(t,e){Be(t).forEach(e)}function Fn(t,e){return t.indexOf(e)>-1}function Ge(t,e){return t.push.apply(t,Be(e)),t}function Pt(t,e,n){t&&Tt(e,function(o){o&&t.classList[n?"add":"remove"](o)})}function Rt(t,e){Pt(t,Yt(e)?e.split(" "):e,!0)}function Ve(t,e){Tt(e,t.appendChild.bind(t))}function Rn(t,e){Tt(t,function(n){var o=(e||n).parentNode;o&&o.insertBefore(n,e)})}function Te(t,e){return _o(t)&&(t.msMatchesSelector||t.matches).call(t,e)}function wo(t,e){var n=t?qt(t.children):[];return e?n.filter(function(o){return Te(o,e)}):n}function Oe(t,e){return e?wo(t,e)[0]:t.firstElementChild}var Ee=Object.keys;function Qt(t,e,n){return t&&(n?Ee(t).reverse():Ee(t)).forEach(function(o){o!=="__proto__"&&e(t[o],o)}),t}function Le(t){return qt(arguments,1).forEach(function(e){Qt(e,function(n,o){t[o]=e[o]})}),t}function Ut(t){return qt(arguments,1).forEach(function(e){Qt(e,function(n,o){In(n)?t[o]=n.slice():we(n)?t[o]=Ut({},we(t[o])?t[o]:{},n):t[o]=n})}),t}function no(t,e){Tt(e||Ee(t),function(n){delete t[n]})}function Bt(t,e){Tt(t,function(n){Tt(e,function(o){n&&n.removeAttribute(o)})})}function Z(t,e,n){we(e)?Qt(e,function(o,r){Z(t,r,o)}):Tt(t,function(o){kn(n)||n===""?Bt(o,e):o.setAttribute(e,String(n))})}function ue(t,e,n){var o=document.createElement(t);return e&&(Yt(e)?Rt(o,e):Z(o,e)),n&&Ve(n,o),o}function Lt(t,e,n){if(Re(n))return getComputedStyle(t)[e];kn(n)||(t.style[e]=""+n)}function Ae(t,e){Lt(t,"display",e)}function To(t){t.setActive&&t.setActive()||t.focus({preventScroll:!0})}function At(t,e){return t.getAttribute(e)}function oo(t,e){return t&&t.classList.contains(e)}function _t(t){return t.getBoundingClientRect()}function te(t){Tt(t,function(e){e&&e.parentNode&&e.parentNode.removeChild(e)})}function Eo(t){return Oe(new DOMParser().parseFromString(t,"text/html").body)}function Ot(t,e){t.preventDefault(),e&&(t.stopPropagation(),t.stopImmediatePropagation())}function Lo(t,e){return t&&t.querySelector(e)}function Bn(t,e){return e?qt(t.querySelectorAll(e)):[]}function Nt(t,e){Pt(t,e,!1)}function Cn(t){return t.timeStamp}function Jt(t){return Yt(t)?t:t?t+"px":""}var Pe="splide",Vn="data-"+Pe;function $e(t,e){if(!t)throw new Error("["+Pe+"] "+(e||""))}var Gt=Math.min,Je=Math.max,Ze=Math.floor,Ie=Math.ceil,xt=Math.abs;function Ao(t,e,n){return xt(t-e)<n}function qe(t,e,n,o){var r=Gt(e,n),a=Je(e,n);return o?r<t&&t<a:r<=t&&t<=a}function se(t,e,n){var o=Gt(e,n),r=Je(e,n);return Gt(Je(o,t),r)}function $n(t){return+(t>0)-+(t<0)}function _n(t,e){return Tt(e,function(n){t=t.replace("%s",""+n)}),t}function On(t){return t<10?"0"+t:""+t}var ro={};function li(t){return""+t+On(ro[t]=(ro[t]||0)+1)}function Io(){var t=[];function e(i,c,s,p){r(i,c,function(l,w,y){var m="addEventListener"in l,u=m?l.removeEventListener.bind(l,w,s,p):l.removeListener.bind(l,s);m?l.addEventListener(w,s,p):l.addListener(s),t.push([l,w,y,s,u])})}function n(i,c,s){r(i,c,function(p,l,w){t=t.filter(function(y){return y[0]===p&&y[1]===l&&y[2]===w&&(!s||y[3]===s)?(y[4](),!1):!0})})}function o(i,c,s){var p,l=!0;return typeof CustomEvent=="function"?p=new CustomEvent(c,{bubbles:l,detail:s}):(p=document.createEvent("CustomEvent"),p.initCustomEvent(c,l,!1,s)),i.dispatchEvent(p),p}function r(i,c,s){Tt(i,function(p){p&&Tt(c,function(l){l.split(" ").forEach(function(w){var y=w.split(".");s(p,y[0],y[1])})})})}function a(){t.forEach(function(i){i[4]()}),zt(t)}return{bind:e,unbind:n,dispatch:o,destroy:a}}var Xt="mounted",wn="ready",jt="move",ye="moved",Pn="click",ko="active",Fo="inactive",Ro="visible",Bo="hidden",yt="refresh",St="updated",me="resize",nn="resized",Vo="drag",Oo="dragging",Po="dragged",on="scroll",ne="scrolled",ci="overflow",Nn="destroy",No="arrows:mounted",Wo="arrows:updated",zo="pagination:mounted",jo="pagination:updated",Wn="navigation:mounted",zn="autoplay:play",Mo="autoplay:playing",jn="autoplay:pause",Mn="lazyload:loaded",Ho="sk",Do="sh",Qe="ei";function gt(t){var e=t?t.event.bus:document.createDocumentFragment(),n=Io();function o(a,i){n.bind(e,Be(a).join(" "),function(c){i.apply(i,In(c.detail)?c.detail:[])})}function r(a){n.dispatch(e,a,qt(arguments,1))}return t&&t.event.on(Nn,n.destroy),Le(n,{bus:e,on:o,off:at(n.unbind,e),emit:r})}function rn(t,e,n,o){var r=Date.now,a,i=0,c,s=!0,p=0;function l(){if(!s){if(i=t?Gt((r()-a)/t,1):1,n&&n(i),i>=1&&(e(),a=r(),o&&++p>=o))return y();c=eo(l)}}function w(b){b||u(),a=r()-(b?i*t:0),s=!1,c=eo(l)}function y(){s=!0}function m(){a=r(),i=0,n&&n(i)}function u(){c&&cancelAnimationFrame(c),i=0,c=0,s=!0}function d(b){t=b}function C(){return s}return{start:w,rewind:m,pause:y,cancel:u,set:d,isPaused:C}}function ui(t){var e=t;function n(r){e=r}function o(r){return Fn(Be(r),e)}return{set:n,is:o}}function pi(t,e){var n=rn(0,t,null,1);return function(){n.isPaused()&&n.start()}}function di(t,e,n){var o=t.state,r=n.breakpoints||{},a=n.reducedMotion||{},i=Io(),c=[];function s(){var u=n.mediaQuery==="min";Ee(r).sort(function(d,C){return u?+d-+C:+C-+d}).forEach(function(d){l(r[d],"("+(u?"min":"max")+"-width:"+d+"px)")}),l(a,to),w()}function p(u){u&&i.destroy()}function l(u,d){var C=matchMedia(d);i.bind(C,"change",w),c.push([u,C])}function w(){var u=o.is(Ke),d=n.direction,C=c.reduce(function(b,f){return Ut(b,f[1].matches?f[0]:{})},{});no(n),m(C),n.destroy?t.destroy(n.destroy==="completely"):u?(p(!0),t.mount()):d!==n.direction&&t.refresh()}function y(u){matchMedia(to).matches&&(u?Ut(n,a):no(n,Ee(a)))}function m(u,d,C){Ut(n,u),d&&Ut(Object.getPrototypeOf(n),u),(C||!o.is(ce))&&t.emit(St,n)}return{setup:s,destroy:p,reduce:y,set:m}}var an="Arrow",sn=an+"Left",ln=an+"Right",Uo=an+"Up",Yo=an+"Down",io="rtl",cn="ttb",fn={width:["height"],left:["top","right"],right:["bottom","left"],x:["y"],X:["Y"],Y:["X"],ArrowLeft:[Uo,ln],ArrowRight:[Yo,sn]};function gi(t,e,n){function o(a,i,c){c=c||n.direction;var s=c===io&&!i?1:c===cn?0:-1;return fn[a]&&fn[a][s]||a.replace(/width|left|right/i,function(p,l){var w=fn[p.toLowerCase()][s]||p;return l>0?w.charAt(0).toUpperCase()+w.slice(1):w})}function r(a){return a*(n.direction===io?1:-1)}return{resolve:o,orient:r}}var Wt="role",pe="tabindex",mi="disabled",It="aria-",Ne=It+"controls",Go=It+"current",ao=It+"selected",wt=It+"label",Hn=It+"labelledby",qo=It+"hidden",Dn=It+"orientation",ke=It+"roledescription",so=It+"live",lo=It+"busy",co=It+"atomic",Un=[Wt,pe,mi,Ne,Go,wt,Hn,qo,Dn,ke],Vt=Pe+"__",Kt="is-",hn=Pe,uo=Vt+"track",fi=Vt+"list",un=Vt+"slide",Xo=un+"--clone",hi=un+"__container",Yn=Vt+"arrows",pn=Vt+"arrow",Ko=pn+"--prev",Jo=pn+"--next",dn=Vt+"pagination",Zo=dn+"__page",yi=Vt+"progress",vi=yi+"__bar",bi=Vt+"toggle",Si=Vt+"spinner",xi=Vt+"sr",Ci=Kt+"initialized",ee=Kt+"active",Qo=Kt+"prev",tr=Kt+"next",Tn=Kt+"visible",En=Kt+"loading",er=Kt+"focus-in",nr=Kt+"overflow",$i=[ee,Tn,Qo,tr,En,er,nr],_i={slide:un,clone:Xo,arrows:Yn,arrow:pn,prev:Ko,next:Jo,pagination:dn,page:Zo,spinner:Si};function wi(t,e){if($o(t.closest))return t.closest(e);for(var n=t;n&&n.nodeType===1&&!Te(n,e);)n=n.parentElement;return n}var Ti=5,po=200,or="touchstart mousedown",yn="touchmove mousemove",vn="touchend touchcancel mouseup click";function Ei(t,e,n){var o=gt(t),r=o.on,a=o.bind,i=t.root,c=n.i18n,s={},p=[],l=[],w=[],y,m,u;function d(){$(),M(),f()}function C(){r(yt,b),r(yt,d),r(St,f),a(document,or+" keydown",function(h){u=h.type==="keydown"},{capture:!0}),a(i,"focusin",function(){Pt(i,er,!!u)})}function b(h){var L=Un.concat("style");zt(p),Nt(i,l),Nt(y,w),Bt([y,m],L),Bt(i,h?L:["style",ke])}function f(){Nt(i,l),Nt(y,w),l=T(hn),w=T(uo),Rt(i,l),Rt(y,w),Z(i,wt,n.label),Z(i,Hn,n.labelledby)}function $(){y=P("."+uo),m=Oe(y,"."+fi),$e(y&&m,"A track/list element is missing."),Ge(p,wo(m,"."+un+":not(."+Xo+")")),Qt({arrows:Yn,pagination:dn,prev:Ko,next:Jo,bar:vi,toggle:bi},function(h,L){s[L]=P("."+h)}),Le(s,{root:i,track:y,list:m,slides:p})}function M(){var h=i.id||li(Pe),L=n.role;i.id=h,y.id=y.id||h+"-track",m.id=m.id||h+"-list",!At(i,Wt)&&i.tagName!=="SECTION"&&L&&Z(i,Wt,L),Z(i,ke,c.carousel),Z(m,Wt,"presentation")}function P(h){var L=Lo(i,h);return L&&wi(L,"."+hn)===i?L:void 0}function T(h){return[h+"--"+n.type,h+"--"+n.direction,n.drag&&h+"--draggable",n.isNavigation&&h+"--nav",h===hn&&ee]}return Le(s,{setup:d,mount:C,destroy:b})}var fe="slide",ve="loop",We="fade";function Li(t,e,n,o){var r=gt(t),a=r.on,i=r.emit,c=r.bind,s=t.Components,p=t.root,l=t.options,w=l.isNavigation,y=l.updateOnMove,m=l.i18n,u=l.pagination,d=l.slideFocus,C=s.Direction.resolve,b=At(o,"style"),f=At(o,wt),$=n>-1,M=Oe(o,"."+hi),P;function T(){$||(o.id=p.id+"-slide"+On(e+1),Z(o,Wt,u?"tabpanel":"group"),Z(o,ke,m.slide),Z(o,wt,f||_n(m.slideLabel,[e+1,t.length]))),h()}function h(){c(o,"click",at(i,Pn,I)),c(o,"keydown",at(i,Ho,I)),a([ye,Do,ne],k),a(Wn,R),y&&a(jt,W)}function L(){P=!0,r.destroy(),Nt(o,$i),Bt(o,Un),Z(o,"style",b),Z(o,wt,f||"")}function R(){var _=t.splides.map(function(v){var V=v.splide.Components.Slides.getAt(e);return V?V.slide.id:""}).join(" ");Z(o,wt,_n(m.slideX,($?n:e)+1)),Z(o,Ne,_),Z(o,Wt,d?"button":""),d&&Bt(o,ke)}function W(){P||k()}function k(){if(!P){var _=t.index;B(),O(),Pt(o,Qo,e===_-1),Pt(o,tr,e===_+1)}}function B(){var _=D();_!==oo(o,ee)&&(Pt(o,ee,_),Z(o,Go,w&&_||""),i(_?ko:Fo,I))}function O(){var _=g(),v=!_&&(!D()||$);if(t.state.is([he,Fe])||Z(o,qo,v||""),Z(Bn(o,l.focusableNodes||""),pe,v?-1:""),d&&Z(o,pe,v?-1:0),_!==oo(o,Tn)&&(Pt(o,Tn,_),i(_?Ro:Bo,I)),!_&&document.activeElement===o){var V=s.Slides.getAt(t.index);V&&To(V.slide)}}function U(_,v,V){Lt(V&&M||o,_,v)}function D(){var _=t.index;return _===e||l.cloneStatus&&_===n}function g(){if(t.is(We))return D();var _=_t(s.Elements.track),v=_t(o),V=C("left",!0),X=C("right",!0);return Ze(_[V])<=Ie(v[V])&&Ze(v[X])<=Ie(_[X])}function A(_,v){var V=xt(_-e);return!$&&(l.rewind||t.is(ve))&&(V=Gt(V,t.length-V)),V<=v}var I={index:e,slideIndex:n,slide:o,container:M,isClone:$,mount:T,destroy:L,update:k,style:U,isWithin:A};return I}function Ai(t,e,n){var o=gt(t),r=o.on,a=o.emit,i=o.bind,c=e.Elements,s=c.slides,p=c.list,l=[];function w(){y(),r(yt,m),r(yt,y)}function y(){s.forEach(function(k,B){d(k,B,-1)})}function m(){P(function(k){k.destroy()}),zt(l)}function u(){P(function(k){k.update()})}function d(k,B,O){var U=Li(t,B,O,k);U.mount(),l.push(U),l.sort(function(D,g){return D.index-g.index})}function C(k){return k?T(function(B){return!B.isClone}):l}function b(k){var B=e.Controller,O=B.toIndex(k),U=B.hasFocus()?1:n.perPage;return T(function(D){return qe(D.index,O,O+U-1)})}function f(k){return T(k)[0]}function $(k,B){Tt(k,function(O){if(Yt(O)&&(O=Eo(O)),_o(O)){var U=s[B];U?Rn(O,U):Ve(p,O),Rt(O,n.classes.slide),L(O,at(a,me))}}),a(yt)}function M(k){te(T(k).map(function(B){return B.slide})),a(yt)}function P(k,B){C(B).forEach(k)}function T(k){return l.filter($o(k)?k:function(B){return Yt(k)?Te(B.slide,k):Fn(Be(k),B.index)})}function h(k,B,O){P(function(U){U.style(k,B,O)})}function L(k,B){var O=Bn(k,"img"),U=O.length;U?O.forEach(function(D){i(D,"load error",function(){--U||B()})}):B()}function R(k){return k?s.length:l.length}function W(){return l.length>n.perPage}return{mount:w,destroy:m,update:u,register:d,get:C,getIn:b,getAt:f,add:$,remove:M,forEach:P,filter:T,style:h,getLength:R,isEnough:W}}function Ii(t,e,n){var o=gt(t),r=o.on,a=o.bind,i=o.emit,c=e.Slides,s=e.Direction.resolve,p=e.Elements,l=p.root,w=p.track,y=p.list,m=c.getAt,u=c.style,d,C,b;function f(){$(),a(window,"resize load",pi(at(i,me))),r([St,yt],$),r(me,M)}function $(){d=n.direction===cn,Lt(l,"maxWidth",Jt(n.width)),Lt(w,s("paddingLeft"),P(!1)),Lt(w,s("paddingRight"),P(!0)),M(!0)}function M(I){var _=_t(l);(I||C.width!==_.width||C.height!==_.height)&&(Lt(w,"height",T()),u(s("marginRight"),Jt(n.gap)),u("width",L()),u("height",R(),!0),C=_,i(nn),b!==(b=A())&&(Pt(l,nr,b),i(ci,b)))}function P(I){var _=n.padding,v=s(I?"right":"left");return _&&Jt(_[v]||(we(_)?0:_))||"0px"}function T(){var I="";return d&&(I=h(),$e(I,"height or heightRatio is missing."),I="calc("+I+" - "+P(!1)+" - "+P(!0)+")"),I}function h(){return Jt(n.height||_t(y).width*n.heightRatio)}function L(){return n.autoWidth?null:Jt(n.fixedWidth)||(d?"":W())}function R(){return Jt(n.fixedHeight)||(d?n.autoHeight?null:W():h())}function W(){var I=Jt(n.gap);return"calc((100%"+(I&&" + "+I)+")/"+(n.perPage||1)+(I&&" - "+I)+")"}function k(){return _t(y)[s("width")]}function B(I,_){var v=m(I||0);return v?_t(v.slide)[s("width")]+(_?0:D()):0}function O(I,_){var v=m(I);if(v){var V=_t(v.slide)[s("right")],X=_t(y)[s("left")];return xt(V-X)+(_?0:D())}return 0}function U(I){return O(t.length-1)-O(0)+B(0,I)}function D(){var I=m(0);return I&&parseFloat(Lt(I.slide,s("marginRight")))||0}function g(I){return parseFloat(Lt(w,s("padding"+(I?"Right":"Left"))))||0}function A(){return t.is(We)||U(!0)>k()}return{mount:f,resize:M,listSize:k,slideSize:B,sliderSize:U,totalSize:O,getPadding:g,isOverflow:A}}var ki=2;function Fi(t,e,n){var o=gt(t),r=o.on,a=e.Elements,i=e.Slides,c=e.Direction.resolve,s=[],p;function l(){r(yt,w),r([St,me],m),(p=C())&&(u(p),e.Layout.resize(!0))}function w(){y(),l()}function y(){te(s),zt(s),o.destroy()}function m(){var b=C();p!==b&&(p<b||!b)&&o.emit(yt)}function u(b){var f=i.get().slice(),$=f.length;if($){for(;f.length<b;)Ge(f,f);Ge(f.slice(-b),f.slice(0,b)).forEach(function(M,P){var T=P<b,h=d(M.slide,P);T?Rn(h,f[0].slide):Ve(a.list,h),Ge(s,h),i.register(h,P-b+(T?0:$),M.index)})}}function d(b,f){var $=b.cloneNode(!0);return Rt($,n.classes.clone),$.id=t.root.id+"-clone"+On(f+1),$}function C(){var b=n.clones;if(!t.is(ve))b=0;else if(Re(b)){var f=n[c("fixedWidth")]&&e.Layout.slideSize(0),$=f&&Ie(_t(a.track)[c("width")]/f);b=$||n[c("autoWidth")]&&t.length||n.perPage*ki}return b}return{mount:l,destroy:y}}function Ri(t,e,n){var o=gt(t),r=o.on,a=o.emit,i=t.state.set,c=e.Layout,s=c.slideSize,p=c.getPadding,l=c.totalSize,w=c.listSize,y=c.sliderSize,m=e.Direction,u=m.resolve,d=m.orient,C=e.Elements,b=C.list,f=C.track,$;function M(){$=e.Transition,r([Xt,nn,St,yt],P)}function P(){e.Controller.isBusy()||(e.Scroll.cancel(),h(t.index),e.Slides.update())}function T(v,V,X,rt){v!==V&&I(v>X)&&(k(),L(W(U(),v>X),!0)),i(he),a(jt,V,X,v),$.start(V,function(){i(ge),a(ye,V,X,v),rt&&rt()})}function h(v){L(O(v,!0))}function L(v,V){if(!t.is(We)){var X=V?v:R(v);Lt(b,"transform","translate"+u("X")+"("+X+"px)"),v!==X&&a(Do)}}function R(v){if(t.is(ve)){var V=B(v),X=V>e.Controller.getEnd(),rt=V<0;(rt||X)&&(v=W(v,X))}return v}function W(v,V){var X=v-A(V),rt=y();return v-=d(rt*(Ie(xt(X)/rt)||1))*(V?1:-1),v}function k(){L(U(),!0),$.cancel()}function B(v){for(var V=e.Slides.get(),X=0,rt=1/0,Q=0;Q<V.length;Q++){var ut=V[Q].index,E=xt(O(ut,!0)-v);if(E<=rt)rt=E,X=ut;else break}return X}function O(v,V){var X=d(l(v-1)-g(v));return V?D(X):X}function U(){var v=u("left");return _t(b)[v]-_t(f)[v]+d(p(!1))}function D(v){return n.trimSpace&&t.is(fe)&&(v=se(v,0,d(y(!0)-w()))),v}function g(v){var V=n.focus;return V==="center"?(w()-s(v,!0))/2:+V*s(v)||0}function A(v){return O(v?e.Controller.getEnd():0,!!n.trimSpace)}function I(v){var V=d(W(U(),v));return v?V>=0:V<=b[u("scrollWidth")]-_t(f)[u("width")]}function _(v,V){V=Re(V)?U():V;var X=v!==!0&&d(V)<d(A(!1)),rt=v!==!1&&d(V)>d(A(!0));return X||rt}return{mount:M,move:T,jump:h,translate:L,shift:W,cancel:k,toIndex:B,toPosition:O,getPosition:U,getLimit:A,exceededLimit:_,reposition:P}}function Bi(t,e,n){var o=gt(t),r=o.on,a=o.emit,i=e.Move,c=i.getPosition,s=i.getLimit,p=i.toPosition,l=e.Slides,w=l.isEnough,y=l.getLength,m=n.omitEnd,u=t.is(ve),d=t.is(fe),C=at(U,!1),b=at(U,!0),f=n.start||0,$,M=f,P,T,h;function L(){R(),r([St,yt,Qe],R),r(nn,W)}function R(){P=y(!0),T=n.perMove,h=n.perPage,$=I();var E=se(f,0,m?$:P-1);E!==f&&(f=E,i.reposition())}function W(){$!==I()&&a(Qe)}function k(E,K,ft){if(!ut()){var it=O(E),mt=A(it);mt>-1&&(K||mt!==f)&&(X(mt),i.move(it,mt,M,ft))}}function B(E,K,ft,it){e.Scroll.scroll(E,K,ft,function(){var mt=A(i.toIndex(c()));X(m?Gt(mt,$):mt),it&&it()})}function O(E){var K=f;if(Yt(E)){var ft=E.match(/([+\-<>])(\d+)?/)||[],it=ft[1],mt=ft[2];it==="+"||it==="-"?K=D(f+ +(""+it+(+mt||1)),f):it===">"?K=mt?_(+mt):C(!0):it==="<"&&(K=b(!0))}else K=u?E:se(E,0,$);return K}function U(E,K){var ft=T||(Q()?1:h),it=D(f+ft*(E?-1:1),f,!(T||Q()));return it===-1&&d&&!Ao(c(),s(!E),1)?E?0:$:K?it:A(it)}function D(E,K,ft){if(w()||Q()){var it=g(E);it!==E&&(K=E,E=it,ft=!1),E<0||E>$?!T&&(qe(0,E,K,!0)||qe($,K,E,!0))?E=_(v(E)):u?E=ft?E<0?-(P%h||h):P:E:n.rewind?E=E<0?$:0:E=-1:ft&&E!==K&&(E=_(v(K)+(E<K?-1:1)))}else E=-1;return E}function g(E){if(d&&n.trimSpace==="move"&&E!==f)for(var K=c();K===p(E,!0)&&qe(E,0,t.length-1,!n.rewind);)E<f?--E:++E;return E}function A(E){return u?(E+P)%P||0:E}function I(){for(var E=P-(Q()||u&&T?1:h);m&&E-- >0;)if(p(P-1,!0)!==p(E,!0)){E++;break}return se(E,0,P-1)}function _(E){return se(Q()?E:h*E,0,$)}function v(E){return Q()?Gt(E,$):Ze((E>=$?P-1:E)/h)}function V(E){var K=i.toIndex(E);return d?se(K,0,$):K}function X(E){E!==f&&(M=f,f=E)}function rt(E){return E?M:f}function Q(){return!Re(n.focus)||n.isNavigation}function ut(){return t.state.is([he,Fe])&&!!n.waitForTransition}return{mount:L,go:k,scroll:B,getNext:C,getPrev:b,getAdjacent:U,getEnd:I,setIndex:X,getIndex:rt,toIndex:_,toPage:v,toDest:V,hasFocus:Q,isBusy:ut}}var Vi="http://www.w3.org/2000/svg",Oi="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",je=40;function Pi(t,e,n){var o=gt(t),r=o.on,a=o.bind,i=o.emit,c=n.classes,s=n.i18n,p=e.Elements,l=e.Controller,w=p.arrows,y=p.track,m=w,u=p.prev,d=p.next,C,b,f={};function $(){P(),r(St,M)}function M(){T(),$()}function P(){var B=n.arrows;B&&!(u&&d)&&R(),u&&d&&(Le(f,{prev:u,next:d}),Ae(m,B?"":"none"),Rt(m,b=Yn+"--"+n.direction),B&&(h(),k(),Z([u,d],Ne,y.id),i(No,u,d)))}function T(){o.destroy(),Nt(m,b),C?(te(w?[u,d]:m),u=d=null):Bt([u,d],Un)}function h(){r([Xt,ye,yt,ne,Qe],k),a(d,"click",at(L,">")),a(u,"click",at(L,"<"))}function L(B){l.go(B,!0)}function R(){m=w||ue("div",c.arrows),u=W(!0),d=W(!1),C=!0,Ve(m,[u,d]),!w&&Rn(m,y)}function W(B){var O='<button class="'+c.arrow+" "+(B?c.prev:c.next)+'" type="button"><svg xmlns="'+Vi+'" viewBox="0 0 '+je+" "+je+'" width="'+je+'" height="'+je+'" focusable="false"><path d="'+(n.arrowPath||Oi)+'" />';return Eo(O)}function k(){if(u&&d){var B=t.index,O=l.getPrev(),U=l.getNext(),D=O>-1&&B<O?s.last:s.prev,g=U>-1&&B>U?s.first:s.next;u.disabled=O<0,d.disabled=U<0,Z(u,wt,D),Z(d,wt,g),i(Wo,u,d,O,U)}}return{arrows:f,mount:$,destroy:T,update:k}}var Ni=Vn+"-interval";function Wi(t,e,n){var o=gt(t),r=o.on,a=o.bind,i=o.emit,c=rn(n.interval,t.go.bind(t,">"),h),s=c.isPaused,p=e.Elements,l=e.Elements,w=l.root,y=l.toggle,m=n.autoplay,u,d,C=m==="pause";function b(){m&&(f(),y&&Z(y,Ne,p.track.id),C||$(),T())}function f(){n.pauseOnHover&&a(w,"mouseenter mouseleave",function(R){u=R.type==="mouseenter",P()}),n.pauseOnFocus&&a(w,"focusin focusout",function(R){d=R.type==="focusin",P()}),y&&a(y,"click",function(){C?$():M(!0)}),r([jt,on,yt],c.rewind),r(jt,L)}function $(){s()&&e.Slides.isEnough()&&(c.start(!n.resetProgress),d=u=C=!1,T(),i(zn))}function M(R){R===void 0&&(R=!0),C=!!R,T(),s()||(c.pause(),i(jn))}function P(){C||(u||d?M(!1):$())}function T(){y&&(Pt(y,ee,!C),Z(y,wt,n.i18n[C?"play":"pause"]))}function h(R){var W=p.bar;W&&Lt(W,"width",R*100+"%"),i(Mo,R)}function L(R){var W=e.Slides.getAt(R);c.set(W&&+At(W.slide,Ni)||n.interval)}return{mount:b,destroy:c.cancel,play:$,pause:M,isPaused:s}}function zi(t,e,n){var o=gt(t),r=o.on;function a(){n.cover&&(r(Mn,at(c,!0)),r([Xt,St,yt],at(i,!0)))}function i(s){e.Slides.forEach(function(p){var l=Oe(p.container||p.slide,"img");l&&l.src&&c(s,l,p)})}function c(s,p,l){l.style("background",s?'center/cover no-repeat url("'+p.src+'")':"",!0),Ae(p,s?"none":"")}return{mount:a,destroy:at(i,!1)}}var ji=10,Mi=600,Hi=.6,Di=1.5,Ui=800;function Yi(t,e,n){var o=gt(t),r=o.on,a=o.emit,i=t.state.set,c=e.Move,s=c.getPosition,p=c.getLimit,l=c.exceededLimit,w=c.translate,y=t.is(fe),m,u,d=1;function C(){r(jt,M),r([St,yt],P)}function b(h,L,R,W,k){var B=s();if(M(),R&&(!y||!l())){var O=e.Layout.sliderSize(),U=$n(h)*O*Ze(xt(h)/O)||0;h=c.toPosition(e.Controller.toDest(h%O))+U}var D=Ao(B,h,1);d=1,L=D?0:L||Je(xt(h-B)/Di,Ui),u=W,m=rn(L,f,at($,B,h,k),1),i(Fe),a(on),m.start()}function f(){i(ge),u&&u(),a(ne)}function $(h,L,R,W){var k=s(),B=h+(L-h)*T(W),O=(B-k)*d;w(k+O),y&&!R&&l()&&(d*=Hi,xt(O)<ji&&b(p(l(!0)),Mi,!1,u,!0))}function M(){m&&m.cancel()}function P(){m&&!m.isPaused()&&(M(),f())}function T(h){var L=n.easingFunc;return L?L(h):1-Math.pow(1-h,4)}return{mount:C,destroy:M,scroll:b,cancel:P}}var le={passive:!1,capture:!0};function Gi(t,e,n){var o=gt(t),r=o.on,a=o.emit,i=o.bind,c=o.unbind,s=t.state,p=e.Move,l=e.Scroll,w=e.Controller,y=e.Elements.track,m=e.Media.reduce,u=e.Direction,d=u.resolve,C=u.orient,b=p.getPosition,f=p.exceededLimit,$,M,P,T,h,L=!1,R,W,k;function B(){i(y,yn,xn,le),i(y,vn,xn,le),i(y,or,U,le),i(y,"click",A,{capture:!0}),i(y,"dragstart",Ot),r([Xt,St],O)}function O(){var z=n.drag;Mt(!z),T=z==="free"}function U(z){if(R=!1,!W){var S=mt(z);it(z.target)&&(S||!z.button)&&(w.isBusy()?Ot(z,!0):(k=S?y:window,h=s.is([he,Fe]),P=null,i(k,yn,D,le),i(k,vn,g,le),p.cancel(),l.cancel(),I(z)))}}function D(z){if(s.is(Ye)||(s.set(Ye),a(Vo)),z.cancelable)if(h){p.translate($+ft(Q(z)));var S=ut(z)>po,H=L!==(L=f());(S||H)&&I(z),R=!0,a(Oo),Ot(z)}else V(z)&&(h=v(z),Ot(z))}function g(z){s.is(Ye)&&(s.set(ge),a(Po)),h&&(_(z),Ot(z)),c(k,yn,D),c(k,vn,g),h=!1}function A(z){!W&&R&&Ot(z,!0)}function I(z){P=M,M=z,$=b()}function _(z){var S=X(z),H=rt(S),G=n.rewind&&n.rewindByDrag;m(!1),T?w.scroll(H,0,n.snap):t.is(We)?w.go(C($n(S))<0?G?"<":"-":G?">":"+"):t.is(fe)&&L&&G?w.go(f(!0)?">":"<"):w.go(w.toDest(H),!0),m(!0)}function v(z){var S=n.dragMinThreshold,H=we(S),G=H&&S.mouse||0,J=(H?S.touch:+S)||10;return xt(Q(z))>(mt(z)?J:G)}function V(z){return xt(Q(z))>xt(Q(z,!0))}function X(z){if(t.is(ve)||!L){var S=ut(z);if(S&&S<po)return Q(z)/S}return 0}function rt(z){return b()+$n(z)*Gt(xt(z)*(n.flickPower||600),T?1/0:e.Layout.listSize()*(n.flickMaxPages||1))}function Q(z,S){return K(z,S)-K(E(z),S)}function ut(z){return Cn(z)-Cn(E(z))}function E(z){return M===z&&P||M}function K(z,S){return(mt(z)?z.changedTouches[0]:z)["page"+d(S?"Y":"X")]}function ft(z){return z/(L&&t.is(fe)?Ti:1)}function it(z){var S=n.noDrag;return!Te(z,"."+Zo+", ."+pn)&&(!S||!Te(z,S))}function mt(z){return typeof TouchEvent<"u"&&z instanceof TouchEvent}function bt(){return h}function Mt(z){W=z}return{mount:B,disable:Mt,isDragging:bt}}var qi={Spacebar:" ",Right:ln,Left:sn,Up:Uo,Down:Yo};function Gn(t){return t=Yt(t)?t:t.key,qi[t]||t}var go="keydown";function Xi(t,e,n){var o=gt(t),r=o.on,a=o.bind,i=o.unbind,c=t.root,s=e.Direction.resolve,p,l;function w(){y(),r(St,m),r(St,y),r(jt,d)}function y(){var b=n.keyboard;b&&(p=b==="global"?window:c,a(p,go,C))}function m(){i(p,go)}function u(b){l=b}function d(){var b=l;l=!0,Co(function(){l=b})}function C(b){if(!l){var f=Gn(b);f===s(sn)?t.go("<"):f===s(ln)&&t.go(">")}}return{mount:w,destroy:m,disable:u}}var _e=Vn+"-lazy",Xe=_e+"-srcset",Ki="["+_e+"], ["+Xe+"]";function Ji(t,e,n){var o=gt(t),r=o.on,a=o.off,i=o.bind,c=o.emit,s=n.lazyLoad==="sequential",p=[ye,ne],l=[];function w(){n.lazyLoad&&(y(),r(yt,y))}function y(){zt(l),m(),s?b():(a(p),r(p,u),u())}function m(){e.Slides.forEach(function(f){Bn(f.slide,Ki).forEach(function($){var M=At($,_e),P=At($,Xe);if(M!==$.src||P!==$.srcset){var T=n.classes.spinner,h=$.parentElement,L=Oe(h,"."+T)||ue("span",T,h);l.push([$,f,L]),$.src||Ae($,"none")}})})}function u(){l=l.filter(function(f){var $=n.perPage*((n.preloadPages||1)+1)-1;return f[1].isWithin(t.index,$)?d(f):!0}),l.length||a(p)}function d(f){var $=f[0];Rt(f[1].slide,En),i($,"load error",at(C,f)),Z($,"src",At($,_e)),Z($,"srcset",At($,Xe)),Bt($,_e),Bt($,Xe)}function C(f,$){var M=f[0],P=f[1];Nt(P.slide,En),$.type!=="error"&&(te(f[2]),Ae(M,""),c(Mn,M,P),c(me)),s&&b()}function b(){l.length&&d(l.shift())}return{mount:w,destroy:at(zt,l),check:u}}function Zi(t,e,n){var o=gt(t),r=o.on,a=o.emit,i=o.bind,c=e.Slides,s=e.Elements,p=e.Controller,l=p.hasFocus,w=p.getIndex,y=p.go,m=e.Direction.resolve,u=s.pagination,d=[],C,b;function f(){$(),r([St,yt,Qe],f);var W=n.pagination;u&&Ae(u,W?"":"none"),W&&(r([jt,on,ne],R),M(),R(),a(zo,{list:C,items:d},L(t.index)))}function $(){C&&(te(u?qt(C.children):C),Nt(C,b),zt(d),C=null),o.destroy()}function M(){var W=t.length,k=n.classes,B=n.i18n,O=n.perPage,U=l()?p.getEnd()+1:Ie(W/O);C=u||ue("ul",k.pagination,s.track.parentElement),Rt(C,b=dn+"--"+h()),Z(C,Wt,"tablist"),Z(C,wt,B.select),Z(C,Dn,h()===cn?"vertical":"");for(var D=0;D<U;D++){var g=ue("li",null,C),A=ue("button",{class:k.page,type:"button"},g),I=c.getIn(D).map(function(v){return v.slide.id}),_=!l()&&O>1?B.pageX:B.slideX;i(A,"click",at(P,D)),n.paginationKeyboard&&i(A,"keydown",at(T,D)),Z(g,Wt,"presentation"),Z(A,Wt,"tab"),Z(A,Ne,I.join(" ")),Z(A,wt,_n(_,D+1)),Z(A,pe,-1),d.push({li:g,button:A,page:D})}}function P(W){y(">"+W,!0)}function T(W,k){var B=d.length,O=Gn(k),U=h(),D=-1;O===m(ln,!1,U)?D=++W%B:O===m(sn,!1,U)?D=(--W+B)%B:O==="Home"?D=0:O==="End"&&(D=B-1);var g=d[D];g&&(To(g.button),y(">"+D),Ot(k,!0))}function h(){return n.paginationDirection||n.direction}function L(W){return d[p.toPage(W)]}function R(){var W=L(w(!0)),k=L(w());if(W){var B=W.button;Nt(B,ee),Bt(B,ao),Z(B,pe,-1)}if(k){var O=k.button;Rt(O,ee),Z(O,ao,!0),Z(O,pe,"")}a(jo,{list:C,items:d},W,k)}return{items:d,mount:f,destroy:$,getAt:L,update:R}}var Qi=[" ","Enter"];function ta(t,e,n){var o=n.isNavigation,r=n.slideFocus,a=[];function i(){t.splides.forEach(function(u){u.isParent||(p(t,u.splide),p(u.splide,t))}),o&&l()}function c(){a.forEach(function(u){u.destroy()}),zt(a)}function s(){c(),i()}function p(u,d){var C=gt(u);C.on(jt,function(b,f,$){d.go(d.is(ve)?$:b)}),a.push(C)}function l(){var u=gt(t),d=u.on;d(Pn,y),d(Ho,m),d([Xt,St],w),a.push(u),u.emit(Wn,t.splides)}function w(){Z(e.Elements.list,Dn,n.direction===cn?"vertical":"")}function y(u){t.go(u.index)}function m(u,d){Fn(Qi,Gn(d))&&(y(u),Ot(d))}return{setup:at(e.Media.set,{slideFocus:Re(r)?o:r},!0),mount:i,destroy:c,remount:s}}function ea(t,e,n){var o=gt(t),r=o.bind,a=0;function i(){n.wheel&&r(e.Elements.track,"wheel",c,le)}function c(p){if(p.cancelable){var l=p.deltaY,w=l<0,y=Cn(p),m=n.wheelMinThreshold||0,u=n.wheelSleep||0;xt(l)>m&&y-a>u&&(t.go(w?"<":">"),a=y),s(w)&&Ot(p)}}function s(p){return!n.releaseWheel||t.state.is(he)||e.Controller.getAdjacent(p)!==-1}return{mount:i}}var na=90;function oa(t,e,n){var o=gt(t),r=o.on,a=e.Elements.track,i=n.live&&!n.isNavigation,c=ue("span",xi),s=rn(na,at(l,!1));function p(){i&&(y(!e.Autoplay.isPaused()),Z(a,co,!0),c.textContent="…",r(zn,at(y,!0)),r(jn,at(y,!1)),r([ye,ne],at(l,!0)))}function l(m){Z(a,lo,m),m?(Ve(a,c),s.start()):(te(c),s.cancel())}function w(){Bt(a,[so,co,lo]),te(c)}function y(m){i&&Z(a,so,m?"off":"polite")}return{mount:p,disable:y,destroy:w}}var ra=Object.freeze({__proto__:null,Media:di,Direction:gi,Elements:Ei,Slides:Ai,Layout:Ii,Clones:Fi,Move:Ri,Controller:Bi,Arrows:Pi,Autoplay:Wi,Cover:zi,Scroll:Yi,Drag:Gi,Keyboard:Xi,LazyLoad:Ji,Pagination:Zi,Sync:ta,Wheel:ea,Live:oa}),ia={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"},aa={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:_i,i18n:ia,reducedMotion:{speed:0,rewindSpeed:0,autoplay:"pause"}};function sa(t,e,n){var o=e.Slides;function r(){gt(t).on([Xt,yt],a)}function a(){o.forEach(function(c){c.style("transform","translateX(-"+100*c.index+"%)")})}function i(c,s){o.style("transition","opacity "+n.speed+"ms "+n.easing),Co(s)}return{mount:r,start:i,cancel:xn}}function la(t,e,n){var o=e.Move,r=e.Controller,a=e.Scroll,i=e.Elements.list,c=at(Lt,i,"transition"),s;function p(){gt(t).bind(i,"transitionend",function(m){m.target===i&&s&&(w(),s())})}function l(m,u){var d=o.toPosition(m,!0),C=o.getPosition(),b=y(m);xt(d-C)>=1&&b>=1?n.useScroll?a.scroll(d,b,!1,u):(c("transform "+b+"ms "+n.easing),o.translate(d,!0),s=u):(o.jump(m),u())}function w(){c(""),a.cancel()}function y(m){var u=n.rewindSpeed;if(t.is(fe)&&u){var d=r.getIndex(!0),C=r.getEnd();if(d===0&&m>=C||d>=C&&m===0)return u}return n.speed}return{mount:p,start:l,cancel:w}}var ca=(function(){function t(n,o){this.event=gt(),this.Components={},this.state=ui(ce),this.splides=[],this._o={},this._E={};var r=Yt(n)?Lo(document,n):n;$e(r,r+" is invalid."),this.root=r,o=Ut({label:At(r,wt)||"",labelledby:At(r,Hn)||""},aa,t.defaults,o||{});try{Ut(o,JSON.parse(At(r,Vn)))}catch{$e(!1,"Invalid JSON")}this._o=Object.create(Ut({},o))}var e=t.prototype;return e.mount=function(o,r){var a=this,i=this.state,c=this.Components;$e(i.is([ce,Ke]),"Already mounted!"),i.set(ce),this._C=c,this._T=r||this._T||(this.is(We)?sa:la),this._E=o||this._E;var s=Le({},ra,this._E,{Transition:this._T});return Qt(s,function(p,l){var w=p(a,c,a._o);c[l]=w,w.setup&&w.setup()}),Qt(c,function(p){p.mount&&p.mount()}),this.emit(Xt),Rt(this.root,Ci),i.set(ge),this.emit(wn),this},e.sync=function(o){return this.splides.push({splide:o}),o.splides.push({splide:this,isParent:!0}),this.state.is(ge)&&(this._C.Sync.remount(),o.Components.Sync.remount()),this},e.go=function(o){return this._C.Controller.go(o),this},e.on=function(o,r){return this.event.on(o,r),this},e.off=function(o){return this.event.off(o),this},e.emit=function(o){var r;return(r=this.event).emit.apply(r,[o].concat(qt(arguments,1))),this},e.add=function(o,r){return this._C.Slides.add(o,r),this},e.remove=function(o){return this._C.Slides.remove(o),this},e.is=function(o){return this._o.type===o},e.refresh=function(){return this.emit(yt),this},e.destroy=function(o){o===void 0&&(o=!0);var r=this.event,a=this.state;return a.is(ce)?gt(this).on(wn,this.destroy.bind(this,o)):(Qt(this._C,function(i){i.destroy&&i.destroy(o)},!0),r.emit(Nn),r.destroy(),o&&zt(this.splides),a.set(Ke)),this},ii(t,[{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()}}]),t})(),qn=ca;qn.defaults={};qn.STATES=si;var mo=[[Xt,"onMounted"],[wn,"onReady"],[jt,"onMove"],[ye,"onMoved"],[Pn,"onClick"],[ko,"onActive"],[Fo,"onInactive"],[Ro,"onVisible"],[Bo,"onHidden"],[yt,"onRefresh"],[St,"onUpdated"],[me,"onResize"],[nn,"onResized"],[Vo,"onDrag"],[Oo,"onDragging"],[Po,"onDragged"],[on,"onScroll"],[ne,"onScrolled"],[Nn,"onDestroy"],[No,"onArrowsMounted"],[Wo,"onArrowsUpdated"],[zo,"onPaginationMounted"],[jo,"onPaginationUpdated"],[Wn,"onNavigationMounted"],[zn,"onAutoplayPlay"],[Mo,"onAutoplayPlaying"],[jn,"onAutoplayPause"],[Mn,"onLazyLoadLoaded"]];function Xn(...t){return t.filter(Boolean).join(" ")}function tn(t){return t!==null&&typeof t=="object"}function Ln(t,e){if(Array.isArray(t)&&Array.isArray(e))return t.length===e.length&&!t.some((n,o)=>!Ln(n,e[o]));if(tn(t)&&tn(e)){const n=Object.keys(t),o=Object.keys(e);return n.length===o.length&&!n.some(r=>!Object.prototype.hasOwnProperty.call(e,r)||!Ln(t[r],e[r]))}return t===e}function ua(t,e){return t.length===e.length&&!t.some((n,o)=>n!==e[o])}function pa(t,e){if(t){const n=Object.keys(t);for(let o=0;o<n.length;o++){const r=n[o];if(r!=="__proto__"&&e(t[r],r)===!1)break}}return t}function An(t,e){const n=t;return pa(e,(o,r)=>{Array.isArray(o)?n[r]=o.slice():tn(o)?n[r]=An(tn(n[r])?n[r]:{},o):n[r]=o}),n}var da=({children:t,className:e,...n})=>j.createElement("div",{className:Xn("splide__track",e),...n},j.createElement("ul",{className:"splide__list"},t)),rr=class extends j.Component{constructor(){super(...arguments),this.splideRef=j.createRef(),this.slides=[]}componentDidMount(){const{options:t,extensions:e,transition:n}=this.props,{current:o}=this.splideRef;o&&(this.splide=new qn(o,t),this.bind(this.splide),this.splide.mount(e,n),this.options=An({},t||{}),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:t}=this.props;t&&!Ln(this.options,t)&&(this.splide.options=t,this.options=An({},t));const e=this.getSlides();ua(this.slides,e)||(this.splide.refresh(),this.slides=e)}sync(t){var e;(e=this.splide)==null||e.sync(t)}go(t){var e;(e=this.splide)==null||e.go(t)}getSlides(){var t;if(this.splide){const e=(t=this.splide.Components.Elements)==null?void 0:t.list.children;return e&&Array.prototype.slice.call(e)||[]}return[]}bind(t){mo.forEach(([e,n])=>{const o=this.props[n];typeof o=="function"&&t.on(e,(...r)=>{o(t,...r)})})}omit(t,e){return e.forEach(n=>{Object.prototype.hasOwnProperty.call(t,n)&&delete t[n]}),t}render(){const{className:t,tag:e="div",hasTrack:n=!0,children:o,...r}=this.props;return j.createElement(e,{className:Xn("splide",t),ref:this.splideRef,...this.omit(r,["options",...mo.map(a=>a[1])])},n?j.createElement(da,null,o):o)}},ir=({children:t,className:e,...n})=>j.createElement("li",{className:Xn("splide__slide",e),...n},t);/*!
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),z=require("react"),de=require("classnames"),_=require("./useScopedStyles-DpVdqfXj.js"),ho=require("react-dom");function yo(e){return e.type==="object"&&e.version===1}const vo="ControlSlider-module__wrapper___sHEkd",bo="ControlSlider-module__hoverArrow___A-dOH",So="ControlSlider-module__sliderItem___QQSkR",xo="ControlSlider-module__sliderImage___9hRl-",Co="ControlSlider-module__arrow___05ghY",$o="ControlSlider-module__arrowVertical___tBfVN",_o="ControlSlider-module__nextArrow___-30Yc",wo="ControlSlider-module__arrowInner___aEra3",To="ControlSlider-module__arrowIcon___S4ztF",Eo="ControlSlider-module__arrowImg___2dwJW",Lo="ControlSlider-module__mirror___brd6U",Ao="ControlSlider-module__pagination___bicLF",Io="ControlSlider-module__paginationInner___bT-P-",ko="ControlSlider-module__paginationVertical___zYqKw",Fo="ControlSlider-module__paginationItem___nTRbk",Ro="ControlSlider-module__dot___p1Qun",Wo="ControlSlider-module__activeDot___LHFaj",Vo="ControlSlider-module__paginationInsideBottom___R3FWn",Bo="ControlSlider-module__paginationInsideTop___V-qb-",Po="ControlSlider-module__paginationOutsideBottom___14w8D",No="ControlSlider-module__paginationOutsideTop___SCLqB",jo="ControlSlider-module__paginationInsideLeft___yOBRZ",Oo="ControlSlider-module__paginationInsideRight___Rtt3o",zo="ControlSlider-module__paginationOutsideLeft___lahaw",Mo="ControlSlider-module__paginationOutsideRight___EtuQa",Ho="ControlSlider-module__imgWrapper___UjEgB",Do="ControlSlider-module__captionBlock___dJ6-j",Uo="ControlSlider-module__captionTextWrapper___HFlpf",Go="ControlSlider-module__captionText___uGBVc",Yo="ControlSlider-module__active___WZK4G",qo="ControlSlider-module__withPointerEvents___t-18M",Xo="ControlSlider-module__topLeftAlignment___zjnGM",Ko="ControlSlider-module__topCenterAlignment___gD1xW",Jo="ControlSlider-module__topRightAlignment___NMapS",Zo="ControlSlider-module__middleLeftAlignment___OnUrY",Qo="ControlSlider-module__middleCenterAlignment___Tdkl0",ei="ControlSlider-module__middleRightAlignment___wEbfX",ti="ControlSlider-module__bottomLeftAlignment___cTP2-",ri="ControlSlider-module__bottomCenterAlignment___c54fB",ni="ControlSlider-module__bottomRightAlignment___kEwrz",oi="ControlSlider-module__clickOverlay___DZA28",ii="ControlSlider-module__contain___pLyq7",ai="ControlSlider-module__cover___KdDat",G={wrapper:vo,hoverArrow:bo,sliderItem:So,sliderImage:xo,arrow:Co,arrowVertical:$o,nextArrow:_o,arrowInner:wo,arrowIcon:To,arrowImg:Eo,mirror:Lo,pagination:Ao,paginationInner:Io,paginationVertical:ko,paginationItem:Fo,dot:Ro,activeDot:Wo,paginationInsideBottom:Vo,paginationInsideTop:Bo,paginationOutsideBottom:Po,paginationOutsideTop:No,paginationInsideLeft:jo,paginationInsideRight:Oo,paginationOutsideLeft:zo,paginationOutsideRight:Mo,imgWrapper:Ho,captionBlock:Do,captionTextWrapper:Uo,captionText:Go,active:Yo,withPointerEvents:qo,topLeftAlignment:Xo,topCenterAlignment:Ko,topRightAlignment:Jo,middleLeftAlignment:Zo,middleCenterAlignment:Qo,middleRightAlignment:ei,bottomLeftAlignment:ti,bottomCenterAlignment:ri,bottomRightAlignment:ni,clickOverlay:oi,contain:ii,cover:ai};function li(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function si(e,t,r){return t&&li(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}var nn="(prefers-reduced-motion: reduce)",pt=1,ci=2,ht=3,bt=4,Wt=5,qt=6,Zt=7,ui={CREATED:pt,MOUNTED:ci,IDLE:ht,MOVING:bt,SCROLLING:Wt,DRAGGING:qt,DESTROYED:Zt};function Oe(e){e.length=0}function Xe(e,t,r){return Array.prototype.slice.call(e,t,r)}function ae(e){return e.bind.apply(e,[null].concat(Xe(arguments,1)))}var wn=setTimeout,_r=function(){};function on(e){return requestAnimationFrame(e)}function nr(e,t){return typeof t===e}function Et(e){return!Wr(e)&&nr("object",e)}var Rr=Array.isArray,Tn=ae(nr,"function"),Ye=ae(nr,"string"),Vt=ae(nr,"undefined");function Wr(e){return e===null}function En(e){try{return e instanceof(e.ownerDocument.defaultView||window).HTMLElement}catch{return!1}}function Bt(e){return Rr(e)?e:[e]}function Te(e,t){Bt(e).forEach(t)}function Vr(e,t){return e.indexOf(t)>-1}function Xt(e,t){return e.push.apply(e,Bt(t)),e}function Pe(e,t,r){e&&Te(t,function(n){n&&e.classList[r?"add":"remove"](n)})}function Re(e,t){Pe(e,Ye(t)?t.split(" "):t,!0)}function Pt(e,t){Te(t,e.appendChild.bind(e))}function Br(e,t){Te(e,function(r){var n=(t||r).parentNode;n&&n.insertBefore(r,t)})}function Lt(e,t){return En(e)&&(e.msMatchesSelector||e.matches).call(e,t)}function Ln(e,t){var r=e?Xe(e.children):[];return t?r.filter(function(n){return Lt(n,t)}):r}function Nt(e,t){return t?Ln(e,t)[0]:e.firstElementChild}var At=Object.keys;function tt(e,t,r){return e&&(r?At(e).reverse():At(e)).forEach(function(n){n!=="__proto__"&&t(e[n],n)}),e}function It(e){return Xe(arguments,1).forEach(function(t){tt(t,function(r,n){e[n]=t[n]})}),e}function Ge(e){return Xe(arguments,1).forEach(function(t){tt(t,function(r,n){Rr(r)?e[n]=r.slice():Et(r)?e[n]=Ge({},Et(e[n])?e[n]:{},r):e[n]=r})}),e}function an(e,t){Te(t||At(e),function(r){delete e[r]})}function We(e,t){Te(e,function(r){Te(t,function(n){r&&r.removeAttribute(n)})})}function Z(e,t,r){Et(t)?tt(t,function(n,o){Z(e,o,n)}):Te(e,function(n){Wr(r)||r===""?We(n,t):n.setAttribute(t,String(r))})}function dt(e,t,r){var n=document.createElement(e);return t&&(Ye(t)?Re(n,t):Z(n,t)),r&&Pt(r,n),n}function Le(e,t,r){if(Vt(r))return getComputedStyle(e)[t];Wr(r)||(e.style[t]=""+r)}function kt(e,t){Le(e,"display",t)}function An(e){e.setActive&&e.setActive()||e.focus({preventScroll:!0})}function Ae(e,t){return e.getAttribute(t)}function ln(e,t){return e&&e.classList.contains(t)}function _e(e){return e.getBoundingClientRect()}function rt(e){Te(e,function(t){t&&t.parentNode&&t.parentNode.removeChild(t)})}function In(e){return Nt(new DOMParser().parseFromString(e,"text/html").body)}function Be(e,t){e.preventDefault(),t&&(e.stopPropagation(),e.stopImmediatePropagation())}function kn(e,t){return e&&e.querySelector(t)}function Pr(e,t){return t?Xe(e.querySelectorAll(t)):[]}function Ne(e,t){Pe(e,t,!1)}function wr(e){return e.timeStamp}function Qe(e){return Ye(e)?e:e?e+"px":""}var jt="splide",Nr="data-"+jt;function _t(e,t){if(!e)throw new Error("["+jt+"] "+(t||""))}var qe=Math.min,Qt=Math.max,er=Math.floor,Ft=Math.ceil,xe=Math.abs;function Fn(e,t,r){return xe(e-t)<r}function Kt(e,t,r,n){var o=qe(t,r),l=Qt(t,r);return n?o<e&&e<l:o<=e&&e<=l}function ct(e,t,r){var n=qe(t,r),o=Qt(t,r);return qe(Qt(n,e),o)}function Tr(e){return+(e>0)-+(e<0)}function Er(e,t){return Te(t,function(r){e=e.replace("%s",""+r)}),e}function jr(e){return e<10?"0"+e:""+e}var sn={};function pi(e){return""+e+jr(sn[e]=(sn[e]||0)+1)}function Rn(){var e=[];function t(i,a,s,p){o(i,a,function(c,$,y){var g="addEventListener"in c,u=g?c.removeEventListener.bind(c,$,s,p):c.removeListener.bind(c,s);g?c.addEventListener($,s,p):c.addListener(s),e.push([c,$,y,s,u])})}function r(i,a,s){o(i,a,function(p,c,$){e=e.filter(function(y){return y[0]===p&&y[1]===c&&y[2]===$&&(!s||y[3]===s)?(y[4](),!1):!0})})}function n(i,a,s){var p,c=!0;return typeof CustomEvent=="function"?p=new CustomEvent(a,{bubbles:c,detail:s}):(p=document.createEvent("CustomEvent"),p.initCustomEvent(a,c,!1,s)),i.dispatchEvent(p),p}function o(i,a,s){Te(i,function(p){p&&Te(a,function(c){c.split(" ").forEach(function($){var y=$.split(".");s(p,y[0],y[1])})})})}function l(){e.forEach(function(i){i[4]()}),Oe(e)}return{bind:t,unbind:r,dispatch:n,destroy:l}}var Ke="mounted",Lr="ready",ze="move",St="moved",Or="click",Wn="active",Vn="inactive",Bn="visible",Pn="hidden",ye="refresh",Se="updated",yt="resize",or="resized",Nn="drag",jn="dragging",On="dragged",ir="scroll",ot="scrolled",di="overflow",zr="destroy",zn="arrows:mounted",Mn="arrows:updated",Hn="pagination:mounted",Dn="pagination:updated",Mr="navigation:mounted",Hr="autoplay:play",Un="autoplay:playing",Dr="autoplay:pause",Ur="lazyload:loaded",Gn="sk",Yn="sh",tr="ei";function ge(e){var t=e?e.event.bus:document.createDocumentFragment(),r=Rn();function n(l,i){r.bind(t,Bt(l).join(" "),function(a){i.apply(i,Rr(a.detail)?a.detail:[])})}function o(l){r.dispatch(t,l,Xe(arguments,1))}return e&&e.event.on(zr,r.destroy),It(r,{bus:t,on:n,off:ae(r.unbind,t),emit:o})}function ar(e,t,r,n){var o=Date.now,l,i=0,a,s=!0,p=0;function c(){if(!s){if(i=e?qe((o()-l)/e,1):1,r&&r(i),i>=1&&(t(),l=o(),n&&++p>=n))return y();a=on(c)}}function $(v){v||u(),l=o()-(v?i*e:0),s=!1,a=on(c)}function y(){s=!0}function g(){l=o(),i=0,r&&r(i)}function u(){a&&cancelAnimationFrame(a),i=0,a=0,s=!0}function d(v){e=v}function C(){return s}return{start:$,rewind:g,pause:y,cancel:u,set:d,isPaused:C}}function gi(e){var t=e;function r(o){t=o}function n(o){return Vr(Bt(o),t)}return{set:r,is:n}}function mi(e,t){var r=ar(0,e,null,1);return function(){r.isPaused()&&r.start()}}function fi(e,t,r){var n=e.state,o=r.breakpoints||{},l=r.reducedMotion||{},i=Rn(),a=[];function s(){var u=r.mediaQuery==="min";At(o).sort(function(d,C){return u?+d-+C:+C-+d}).forEach(function(d){c(o[d],"("+(u?"min":"max")+"-width:"+d+"px)")}),c(l,nn),$()}function p(u){u&&i.destroy()}function c(u,d){var C=matchMedia(d);i.bind(C,"change",$),a.push([u,C])}function $(){var u=n.is(Zt),d=r.direction,C=a.reduce(function(v,h){return Ge(v,h[1].matches?h[0]:{})},{});an(r),g(C),r.destroy?e.destroy(r.destroy==="completely"):u?(p(!0),e.mount()):d!==r.direction&&e.refresh()}function y(u){matchMedia(nn).matches&&(u?Ge(r,l):an(r,At(l)))}function g(u,d,C){Ge(r,u),d&&Ge(Object.getPrototypeOf(r),u),(C||!n.is(pt))&&e.emit(Se,r)}return{setup:s,destroy:p,reduce:y,set:g}}var lr="Arrow",sr=lr+"Left",cr=lr+"Right",qn=lr+"Up",Xn=lr+"Down",cn="rtl",ur="ttb",fr={width:["height"],left:["top","right"],right:["bottom","left"],x:["y"],X:["Y"],Y:["X"],ArrowLeft:[qn,cr],ArrowRight:[Xn,sr]};function hi(e,t,r){function n(l,i,a){a=a||r.direction;var s=a===cn&&!i?1:a===ur?0:-1;return fr[l]&&fr[l][s]||l.replace(/width|left|right/i,function(p,c){var $=fr[p.toLowerCase()][s]||p;return c>0?$.charAt(0).toUpperCase()+$.slice(1):$})}function o(l){return l*(r.direction===cn?1:-1)}return{resolve:n,orient:o}}var je="role",gt="tabindex",yi="disabled",Ie="aria-",Ot=Ie+"controls",Kn=Ie+"current",un=Ie+"selected",we=Ie+"label",Gr=Ie+"labelledby",Jn=Ie+"hidden",Yr=Ie+"orientation",Rt=Ie+"roledescription",pn=Ie+"live",dn=Ie+"busy",gn=Ie+"atomic",qr=[je,gt,yi,Ot,Kn,we,Gr,Jn,Yr,Rt],Ve=jt+"__",Je="is-",hr=jt,mn=Ve+"track",vi=Ve+"list",pr=Ve+"slide",Zn=pr+"--clone",bi=pr+"__container",Xr=Ve+"arrows",dr=Ve+"arrow",Qn=dr+"--prev",eo=dr+"--next",gr=Ve+"pagination",to=gr+"__page",Si=Ve+"progress",xi=Si+"__bar",Ci=Ve+"toggle",$i=Ve+"spinner",_i=Ve+"sr",wi=Je+"initialized",nt=Je+"active",ro=Je+"prev",no=Je+"next",Ar=Je+"visible",Ir=Je+"loading",oo=Je+"focus-in",io=Je+"overflow",Ti=[nt,Ar,ro,no,Ir,oo,io],Ei={slide:pr,clone:Zn,arrows:Xr,arrow:dr,prev:Qn,next:eo,pagination:gr,page:to,spinner:$i};function Li(e,t){if(Tn(e.closest))return e.closest(t);for(var r=e;r&&r.nodeType===1&&!Lt(r,t);)r=r.parentElement;return r}var Ai=5,fn=200,ao="touchstart mousedown",yr="touchmove mousemove",vr="touchend touchcancel mouseup click";function Ii(e,t,r){var n=ge(e),o=n.on,l=n.bind,i=e.root,a=r.i18n,s={},p=[],c=[],$=[],y,g,u;function d(){w(),M(),h()}function C(){o(ye,v),o(ye,d),o(Se,h),l(document,ao+" keydown",function(b){u=b.type==="keydown"},{capture:!0}),l(i,"focusin",function(){Pe(i,oo,!!u)})}function v(b){var A=qr.concat("style");Oe(p),Ne(i,c),Ne(y,$),We([y,g],A),We(i,b?A:["style",Rt])}function h(){Ne(i,c),Ne(y,$),c=E(hr),$=E(mn),Re(i,c),Re(y,$),Z(i,we,r.label),Z(i,Gr,r.labelledby)}function w(){y=P("."+mn),g=Nt(y,"."+vi),_t(y&&g,"A track/list element is missing."),Xt(p,Ln(g,"."+pr+":not(."+Zn+")")),tt({arrows:Xr,pagination:gr,prev:Qn,next:eo,bar:xi,toggle:Ci},function(b,A){s[A]=P("."+b)}),It(s,{root:i,track:y,list:g,slides:p})}function M(){var b=i.id||pi(jt),A=r.role;i.id=b,y.id=y.id||b+"-track",g.id=g.id||b+"-list",!Ae(i,je)&&i.tagName!=="SECTION"&&A&&Z(i,je,A),Z(i,Rt,a.carousel),Z(g,je,"presentation")}function P(b){var A=kn(i,b);return A&&Li(A,"."+hr)===i?A:void 0}function E(b){return[b+"--"+r.type,b+"--"+r.direction,r.drag&&b+"--draggable",r.isNavigation&&b+"--nav",b===hr&&nt]}return It(s,{setup:d,mount:C,destroy:v})}var vt="slide",xt="loop",zt="fade";function ki(e,t,r,n){var o=ge(e),l=o.on,i=o.emit,a=o.bind,s=e.Components,p=e.root,c=e.options,$=c.isNavigation,y=c.updateOnMove,g=c.i18n,u=c.pagination,d=c.slideFocus,C=s.Direction.resolve,v=Ae(n,"style"),h=Ae(n,we),w=r>-1,M=Nt(n,"."+bi),P;function E(){w||(n.id=p.id+"-slide"+jr(t+1),Z(n,je,u?"tabpanel":"group"),Z(n,Rt,g.slide),Z(n,we,h||Er(g.slideLabel,[t+1,e.length]))),b()}function b(){a(n,"click",ae(i,Or,k)),a(n,"keydown",ae(i,Gn,k)),l([St,Yn,ot],F),l(Mr,R),y&&l(ze,j)}function A(){P=!0,o.destroy(),Ne(n,Ti),We(n,qr),Z(n,"style",v),Z(n,we,h||"")}function R(){var T=e.splides.map(function(S){var V=S.splide.Components.Slides.getAt(t);return V?V.slide.id:""}).join(" ");Z(n,we,Er(g.slideX,(w?r:t)+1)),Z(n,Ot,T),Z(n,je,d?"button":""),d&&We(n,Rt)}function j(){P||F()}function F(){if(!P){var T=e.index;W(),B(),Pe(n,ro,t===T-1),Pe(n,no,t===T+1)}}function W(){var T=D();T!==ln(n,nt)&&(Pe(n,nt,T),Z(n,Kn,$&&T||""),i(T?Wn:Vn,k))}function B(){var T=m(),S=!T&&(!D()||w);if(e.state.is([bt,Wt])||Z(n,Jn,S||""),Z(Pr(n,c.focusableNodes||""),gt,S?-1:""),d&&Z(n,gt,S?-1:0),T!==ln(n,Ar)&&(Pe(n,Ar,T),i(T?Bn:Pn,k)),!T&&document.activeElement===n){var V=s.Slides.getAt(e.index);V&&An(V.slide)}}function U(T,S,V){Le(V&&M||n,T,S)}function D(){var T=e.index;return T===t||c.cloneStatus&&T===r}function m(){if(e.is(zt))return D();var T=_e(s.Elements.track),S=_e(n),V=C("left",!0),X=C("right",!0);return er(T[V])<=Ft(S[V])&&er(S[X])<=Ft(T[X])}function I(T,S){var V=xe(T-t);return!w&&(c.rewind||e.is(xt))&&(V=qe(V,e.length-V)),V<=S}var k={index:t,slideIndex:r,slide:n,container:M,isClone:w,mount:E,destroy:A,update:F,style:U,isWithin:I};return k}function Fi(e,t,r){var n=ge(e),o=n.on,l=n.emit,i=n.bind,a=t.Elements,s=a.slides,p=a.list,c=[];function $(){y(),o(ye,g),o(ye,y)}function y(){s.forEach(function(F,W){d(F,W,-1)})}function g(){P(function(F){F.destroy()}),Oe(c)}function u(){P(function(F){F.update()})}function d(F,W,B){var U=ki(e,W,B,F);U.mount(),c.push(U),c.sort(function(D,m){return D.index-m.index})}function C(F){return F?E(function(W){return!W.isClone}):c}function v(F){var W=t.Controller,B=W.toIndex(F),U=W.hasFocus()?1:r.perPage;return E(function(D){return Kt(D.index,B,B+U-1)})}function h(F){return E(F)[0]}function w(F,W){Te(F,function(B){if(Ye(B)&&(B=In(B)),En(B)){var U=s[W];U?Br(B,U):Pt(p,B),Re(B,r.classes.slide),A(B,ae(l,yt))}}),l(ye)}function M(F){rt(E(F).map(function(W){return W.slide})),l(ye)}function P(F,W){C(W).forEach(F)}function E(F){return c.filter(Tn(F)?F:function(W){return Ye(F)?Lt(W.slide,F):Vr(Bt(F),W.index)})}function b(F,W,B){P(function(U){U.style(F,W,B)})}function A(F,W){var B=Pr(F,"img"),U=B.length;U?B.forEach(function(D){i(D,"load error",function(){--U||W()})}):W()}function R(F){return F?s.length:c.length}function j(){return c.length>r.perPage}return{mount:$,destroy:g,update:u,register:d,get:C,getIn:v,getAt:h,add:w,remove:M,forEach:P,filter:E,style:b,getLength:R,isEnough:j}}function Ri(e,t,r){var n=ge(e),o=n.on,l=n.bind,i=n.emit,a=t.Slides,s=t.Direction.resolve,p=t.Elements,c=p.root,$=p.track,y=p.list,g=a.getAt,u=a.style,d,C,v;function h(){w(),l(window,"resize load",mi(ae(i,yt))),o([Se,ye],w),o(yt,M)}function w(){d=r.direction===ur,Le(c,"maxWidth",Qe(r.width)),Le($,s("paddingLeft"),P(!1)),Le($,s("paddingRight"),P(!0)),M(!0)}function M(k){var T=_e(c);(k||C.width!==T.width||C.height!==T.height)&&(Le($,"height",E()),u(s("marginRight"),Qe(r.gap)),u("width",A()),u("height",R(),!0),C=T,i(or),v!==(v=I())&&(Pe(c,io,v),i(di,v)))}function P(k){var T=r.padding,S=s(k?"right":"left");return T&&Qe(T[S]||(Et(T)?0:T))||"0px"}function E(){var k="";return d&&(k=b(),_t(k,"height or heightRatio is missing."),k="calc("+k+" - "+P(!1)+" - "+P(!0)+")"),k}function b(){return Qe(r.height||_e(y).width*r.heightRatio)}function A(){return r.autoWidth?null:Qe(r.fixedWidth)||(d?"":j())}function R(){return Qe(r.fixedHeight)||(d?r.autoHeight?null:j():b())}function j(){var k=Qe(r.gap);return"calc((100%"+(k&&" + "+k)+")/"+(r.perPage||1)+(k&&" - "+k)+")"}function F(){return _e(y)[s("width")]}function W(k,T){var S=g(k||0);return S?_e(S.slide)[s("width")]+(T?0:D()):0}function B(k,T){var S=g(k);if(S){var V=_e(S.slide)[s("right")],X=_e(y)[s("left")];return xe(V-X)+(T?0:D())}return 0}function U(k){return B(e.length-1)-B(0)+W(0,k)}function D(){var k=g(0);return k&&parseFloat(Le(k.slide,s("marginRight")))||0}function m(k){return parseFloat(Le($,s("padding"+(k?"Right":"Left"))))||0}function I(){return e.is(zt)||U(!0)>F()}return{mount:h,resize:M,listSize:F,slideSize:W,sliderSize:U,totalSize:B,getPadding:m,isOverflow:I}}var Wi=2;function Vi(e,t,r){var n=ge(e),o=n.on,l=t.Elements,i=t.Slides,a=t.Direction.resolve,s=[],p;function c(){o(ye,$),o([Se,yt],g),(p=C())&&(u(p),t.Layout.resize(!0))}function $(){y(),c()}function y(){rt(s),Oe(s),n.destroy()}function g(){var v=C();p!==v&&(p<v||!v)&&n.emit(ye)}function u(v){var h=i.get().slice(),w=h.length;if(w){for(;h.length<v;)Xt(h,h);Xt(h.slice(-v),h.slice(0,v)).forEach(function(M,P){var E=P<v,b=d(M.slide,P);E?Br(b,h[0].slide):Pt(l.list,b),Xt(s,b),i.register(b,P-v+(E?0:w),M.index)})}}function d(v,h){var w=v.cloneNode(!0);return Re(w,r.classes.clone),w.id=e.root.id+"-clone"+jr(h+1),w}function C(){var v=r.clones;if(!e.is(xt))v=0;else if(Vt(v)){var h=r[a("fixedWidth")]&&t.Layout.slideSize(0),w=h&&Ft(_e(l.track)[a("width")]/h);v=w||r[a("autoWidth")]&&e.length||r.perPage*Wi}return v}return{mount:c,destroy:y}}function Bi(e,t,r){var n=ge(e),o=n.on,l=n.emit,i=e.state.set,a=t.Layout,s=a.slideSize,p=a.getPadding,c=a.totalSize,$=a.listSize,y=a.sliderSize,g=t.Direction,u=g.resolve,d=g.orient,C=t.Elements,v=C.list,h=C.track,w;function M(){w=t.Transition,o([Ke,or,Se,ye],P)}function P(){t.Controller.isBusy()||(t.Scroll.cancel(),b(e.index),t.Slides.update())}function E(S,V,X,oe){S!==V&&k(S>X)&&(F(),A(j(U(),S>X),!0)),i(bt),l(ze,V,X,S),w.start(V,function(){i(ht),l(St,V,X,S),oe&&oe()})}function b(S){A(B(S,!0))}function A(S,V){if(!e.is(zt)){var X=V?S:R(S);Le(v,"transform","translate"+u("X")+"("+X+"px)"),S!==X&&l(Yn)}}function R(S){if(e.is(xt)){var V=W(S),X=V>t.Controller.getEnd(),oe=V<0;(oe||X)&&(S=j(S,X))}return S}function j(S,V){var X=S-I(V),oe=y();return S-=d(oe*(Ft(xe(X)/oe)||1))*(V?1:-1),S}function F(){A(U(),!0),w.cancel()}function W(S){for(var V=t.Slides.get(),X=0,oe=1/0,Q=0;Q<V.length;Q++){var ue=V[Q].index,L=xe(B(ue,!0)-S);if(L<=oe)oe=L,X=ue;else break}return X}function B(S,V){var X=d(c(S-1)-m(S));return V?D(X):X}function U(){var S=u("left");return _e(v)[S]-_e(h)[S]+d(p(!1))}function D(S){return r.trimSpace&&e.is(vt)&&(S=ct(S,0,d(y(!0)-$()))),S}function m(S){var V=r.focus;return V==="center"?($()-s(S,!0))/2:+V*s(S)||0}function I(S){return B(S?t.Controller.getEnd():0,!!r.trimSpace)}function k(S){var V=d(j(U(),S));return S?V>=0:V<=v[u("scrollWidth")]-_e(h)[u("width")]}function T(S,V){V=Vt(V)?U():V;var X=S!==!0&&d(V)<d(I(!1)),oe=S!==!1&&d(V)>d(I(!0));return X||oe}return{mount:M,move:E,jump:b,translate:A,shift:j,cancel:F,toIndex:W,toPosition:B,getPosition:U,getLimit:I,exceededLimit:T,reposition:P}}function Pi(e,t,r){var n=ge(e),o=n.on,l=n.emit,i=t.Move,a=i.getPosition,s=i.getLimit,p=i.toPosition,c=t.Slides,$=c.isEnough,y=c.getLength,g=r.omitEnd,u=e.is(xt),d=e.is(vt),C=ae(U,!1),v=ae(U,!0),h=r.start||0,w,M=h,P,E,b;function A(){R(),o([Se,ye,tr],R),o(or,j)}function R(){P=y(!0),E=r.perMove,b=r.perPage,w=k();var L=ct(h,0,g?w:P-1);L!==h&&(h=L,i.reposition())}function j(){w!==k()&&l(tr)}function F(L,K,he){if(!ue()){var ie=B(L),me=I(ie);me>-1&&(K||me!==h)&&(X(me),i.move(ie,me,M,he))}}function W(L,K,he,ie){t.Scroll.scroll(L,K,he,function(){var me=I(i.toIndex(a()));X(g?qe(me,w):me),ie&&ie()})}function B(L){var K=h;if(Ye(L)){var he=L.match(/([+\-<>])(\d+)?/)||[],ie=he[1],me=he[2];ie==="+"||ie==="-"?K=D(h+ +(""+ie+(+me||1)),h):ie===">"?K=me?T(+me):C(!0):ie==="<"&&(K=v(!0))}else K=u?L:ct(L,0,w);return K}function U(L,K){var he=E||(Q()?1:b),ie=D(h+he*(L?-1:1),h,!(E||Q()));return ie===-1&&d&&!Fn(a(),s(!L),1)?L?0:w:K?ie:I(ie)}function D(L,K,he){if($()||Q()){var ie=m(L);ie!==L&&(K=L,L=ie,he=!1),L<0||L>w?!E&&(Kt(0,L,K,!0)||Kt(w,K,L,!0))?L=T(S(L)):u?L=he?L<0?-(P%b||b):P:L:r.rewind?L=L<0?w:0:L=-1:he&&L!==K&&(L=T(S(K)+(L<K?-1:1)))}else L=-1;return L}function m(L){if(d&&r.trimSpace==="move"&&L!==h)for(var K=a();K===p(L,!0)&&Kt(L,0,e.length-1,!r.rewind);)L<h?--L:++L;return L}function I(L){return u?(L+P)%P||0:L}function k(){for(var L=P-(Q()||u&&E?1:b);g&&L-- >0;)if(p(P-1,!0)!==p(L,!0)){L++;break}return ct(L,0,P-1)}function T(L){return ct(Q()?L:b*L,0,w)}function S(L){return Q()?qe(L,w):er((L>=w?P-1:L)/b)}function V(L){var K=i.toIndex(L);return d?ct(K,0,w):K}function X(L){L!==h&&(M=h,h=L)}function oe(L){return L?M:h}function Q(){return!Vt(r.focus)||r.isNavigation}function ue(){return e.state.is([bt,Wt])&&!!r.waitForTransition}return{mount:A,go:F,scroll:W,getNext:C,getPrev:v,getAdjacent:U,getEnd:k,setIndex:X,getIndex:oe,toIndex:T,toPage:S,toDest:V,hasFocus:Q,isBusy:ue}}var Ni="http://www.w3.org/2000/svg",ji="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",Ht=40;function Oi(e,t,r){var n=ge(e),o=n.on,l=n.bind,i=n.emit,a=r.classes,s=r.i18n,p=t.Elements,c=t.Controller,$=p.arrows,y=p.track,g=$,u=p.prev,d=p.next,C,v,h={};function w(){P(),o(Se,M)}function M(){E(),w()}function P(){var W=r.arrows;W&&!(u&&d)&&R(),u&&d&&(It(h,{prev:u,next:d}),kt(g,W?"":"none"),Re(g,v=Xr+"--"+r.direction),W&&(b(),F(),Z([u,d],Ot,y.id),i(zn,u,d)))}function E(){n.destroy(),Ne(g,v),C?(rt($?[u,d]:g),u=d=null):We([u,d],qr)}function b(){o([Ke,St,ye,ot,tr],F),l(d,"click",ae(A,">")),l(u,"click",ae(A,"<"))}function A(W){c.go(W,!0)}function R(){g=$||dt("div",a.arrows),u=j(!0),d=j(!1),C=!0,Pt(g,[u,d]),!$&&Br(g,y)}function j(W){var B='<button class="'+a.arrow+" "+(W?a.prev:a.next)+'" type="button"><svg xmlns="'+Ni+'" viewBox="0 0 '+Ht+" "+Ht+'" width="'+Ht+'" height="'+Ht+'" focusable="false"><path d="'+(r.arrowPath||ji)+'" />';return In(B)}function F(){if(u&&d){var W=e.index,B=c.getPrev(),U=c.getNext(),D=B>-1&&W<B?s.last:s.prev,m=U>-1&&W>U?s.first:s.next;u.disabled=B<0,d.disabled=U<0,Z(u,we,D),Z(d,we,m),i(Mn,u,d,B,U)}}return{arrows:h,mount:w,destroy:E,update:F}}var zi=Nr+"-interval";function Mi(e,t,r){var n=ge(e),o=n.on,l=n.bind,i=n.emit,a=ar(r.interval,e.go.bind(e,">"),b),s=a.isPaused,p=t.Elements,c=t.Elements,$=c.root,y=c.toggle,g=r.autoplay,u,d,C=g==="pause";function v(){g&&(h(),y&&Z(y,Ot,p.track.id),C||w(),E())}function h(){r.pauseOnHover&&l($,"mouseenter mouseleave",function(R){u=R.type==="mouseenter",P()}),r.pauseOnFocus&&l($,"focusin focusout",function(R){d=R.type==="focusin",P()}),y&&l(y,"click",function(){C?w():M(!0)}),o([ze,ir,ye],a.rewind),o(ze,A)}function w(){s()&&t.Slides.isEnough()&&(a.start(!r.resetProgress),d=u=C=!1,E(),i(Hr))}function M(R){R===void 0&&(R=!0),C=!!R,E(),s()||(a.pause(),i(Dr))}function P(){C||(u||d?M(!1):w())}function E(){y&&(Pe(y,nt,!C),Z(y,we,r.i18n[C?"play":"pause"]))}function b(R){var j=p.bar;j&&Le(j,"width",R*100+"%"),i(Un,R)}function A(R){var j=t.Slides.getAt(R);a.set(j&&+Ae(j.slide,zi)||r.interval)}return{mount:v,destroy:a.cancel,play:w,pause:M,isPaused:s}}function Hi(e,t,r){var n=ge(e),o=n.on;function l(){r.cover&&(o(Ur,ae(a,!0)),o([Ke,Se,ye],ae(i,!0)))}function i(s){t.Slides.forEach(function(p){var c=Nt(p.container||p.slide,"img");c&&c.src&&a(s,c,p)})}function a(s,p,c){c.style("background",s?'center/cover no-repeat url("'+p.src+'")':"",!0),kt(p,s?"none":"")}return{mount:l,destroy:ae(i,!1)}}var Di=10,Ui=600,Gi=.6,Yi=1.5,qi=800;function Xi(e,t,r){var n=ge(e),o=n.on,l=n.emit,i=e.state.set,a=t.Move,s=a.getPosition,p=a.getLimit,c=a.exceededLimit,$=a.translate,y=e.is(vt),g,u,d=1;function C(){o(ze,M),o([Se,ye],P)}function v(b,A,R,j,F){var W=s();if(M(),R&&(!y||!c())){var B=t.Layout.sliderSize(),U=Tr(b)*B*er(xe(b)/B)||0;b=a.toPosition(t.Controller.toDest(b%B))+U}var D=Fn(W,b,1);d=1,A=D?0:A||Qt(xe(b-W)/Yi,qi),u=j,g=ar(A,h,ae(w,W,b,F),1),i(Wt),l(ir),g.start()}function h(){i(ht),u&&u(),l(ot)}function w(b,A,R,j){var F=s(),W=b+(A-b)*E(j),B=(W-F)*d;$(F+B),y&&!R&&c()&&(d*=Gi,xe(B)<Di&&v(p(c(!0)),Ui,!1,u,!0))}function M(){g&&g.cancel()}function P(){g&&!g.isPaused()&&(M(),h())}function E(b){var A=r.easingFunc;return A?A(b):1-Math.pow(1-b,4)}return{mount:C,destroy:M,scroll:v,cancel:P}}var ut={passive:!1,capture:!0};function Ki(e,t,r){var n=ge(e),o=n.on,l=n.emit,i=n.bind,a=n.unbind,s=e.state,p=t.Move,c=t.Scroll,$=t.Controller,y=t.Elements.track,g=t.Media.reduce,u=t.Direction,d=u.resolve,C=u.orient,v=p.getPosition,h=p.exceededLimit,w,M,P,E,b,A=!1,R,j,F;function W(){i(y,yr,_r,ut),i(y,vr,_r,ut),i(y,ao,U,ut),i(y,"click",I,{capture:!0}),i(y,"dragstart",Be),o([Ke,Se],B)}function B(){var O=r.drag;Me(!O),E=O==="free"}function U(O){if(R=!1,!j){var x=me(O);ie(O.target)&&(x||!O.button)&&($.isBusy()?Be(O,!0):(F=x?y:window,b=s.is([bt,Wt]),P=null,i(F,yr,D,ut),i(F,vr,m,ut),p.cancel(),c.cancel(),k(O)))}}function D(O){if(s.is(qt)||(s.set(qt),l(Nn)),O.cancelable)if(b){p.translate(w+he(Q(O)));var x=ue(O)>fn,H=A!==(A=h());(x||H)&&k(O),R=!0,l(jn),Be(O)}else V(O)&&(b=S(O),Be(O))}function m(O){s.is(qt)&&(s.set(ht),l(On)),b&&(T(O),Be(O)),a(F,yr,D),a(F,vr,m),b=!1}function I(O){!j&&R&&Be(O,!0)}function k(O){P=M,M=O,w=v()}function T(O){var x=X(O),H=oe(x),Y=r.rewind&&r.rewindByDrag;g(!1),E?$.scroll(H,0,r.snap):e.is(zt)?$.go(C(Tr(x))<0?Y?"<":"-":Y?">":"+"):e.is(vt)&&A&&Y?$.go(h(!0)?">":"<"):$.go($.toDest(H),!0),g(!0)}function S(O){var x=r.dragMinThreshold,H=Et(x),Y=H&&x.mouse||0,J=(H?x.touch:+x)||10;return xe(Q(O))>(me(O)?J:Y)}function V(O){return xe(Q(O))>xe(Q(O,!0))}function X(O){if(e.is(xt)||!A){var x=ue(O);if(x&&x<fn)return Q(O)/x}return 0}function oe(O){return v()+Tr(O)*qe(xe(O)*(r.flickPower||600),E?1/0:t.Layout.listSize()*(r.flickMaxPages||1))}function Q(O,x){return K(O,x)-K(L(O),x)}function ue(O){return wr(O)-wr(L(O))}function L(O){return M===O&&P||M}function K(O,x){return(me(O)?O.changedTouches[0]:O)["page"+d(x?"Y":"X")]}function he(O){return O/(A&&e.is(vt)?Ai:1)}function ie(O){var x=r.noDrag;return!Lt(O,"."+to+", ."+dr)&&(!x||!Lt(O,x))}function me(O){return typeof TouchEvent<"u"&&O instanceof TouchEvent}function be(){return b}function Me(O){j=O}return{mount:W,disable:Me,isDragging:be}}var Ji={Spacebar:" ",Right:cr,Left:sr,Up:qn,Down:Xn};function Kr(e){return e=Ye(e)?e:e.key,Ji[e]||e}var hn="keydown";function Zi(e,t,r){var n=ge(e),o=n.on,l=n.bind,i=n.unbind,a=e.root,s=t.Direction.resolve,p,c;function $(){y(),o(Se,g),o(Se,y),o(ze,d)}function y(){var v=r.keyboard;v&&(p=v==="global"?window:a,l(p,hn,C))}function g(){i(p,hn)}function u(v){c=v}function d(){var v=c;c=!0,wn(function(){c=v})}function C(v){if(!c){var h=Kr(v);h===s(sr)?e.go("<"):h===s(cr)&&e.go(">")}}return{mount:$,destroy:g,disable:u}}var wt=Nr+"-lazy",Jt=wt+"-srcset",Qi="["+wt+"], ["+Jt+"]";function ea(e,t,r){var n=ge(e),o=n.on,l=n.off,i=n.bind,a=n.emit,s=r.lazyLoad==="sequential",p=[St,ot],c=[];function $(){r.lazyLoad&&(y(),o(ye,y))}function y(){Oe(c),g(),s?v():(l(p),o(p,u),u())}function g(){t.Slides.forEach(function(h){Pr(h.slide,Qi).forEach(function(w){var M=Ae(w,wt),P=Ae(w,Jt);if(M!==w.src||P!==w.srcset){var E=r.classes.spinner,b=w.parentElement,A=Nt(b,"."+E)||dt("span",E,b);c.push([w,h,A]),w.src||kt(w,"none")}})})}function u(){c=c.filter(function(h){var w=r.perPage*((r.preloadPages||1)+1)-1;return h[1].isWithin(e.index,w)?d(h):!0}),c.length||l(p)}function d(h){var w=h[0];Re(h[1].slide,Ir),i(w,"load error",ae(C,h)),Z(w,"src",Ae(w,wt)),Z(w,"srcset",Ae(w,Jt)),We(w,wt),We(w,Jt)}function C(h,w){var M=h[0],P=h[1];Ne(P.slide,Ir),w.type!=="error"&&(rt(h[2]),kt(M,""),a(Ur,M,P),a(yt)),s&&v()}function v(){c.length&&d(c.shift())}return{mount:$,destroy:ae(Oe,c),check:u}}function ta(e,t,r){var n=ge(e),o=n.on,l=n.emit,i=n.bind,a=t.Slides,s=t.Elements,p=t.Controller,c=p.hasFocus,$=p.getIndex,y=p.go,g=t.Direction.resolve,u=s.pagination,d=[],C,v;function h(){w(),o([Se,ye,tr],h);var j=r.pagination;u&&kt(u,j?"":"none"),j&&(o([ze,ir,ot],R),M(),R(),l(Hn,{list:C,items:d},A(e.index)))}function w(){C&&(rt(u?Xe(C.children):C),Ne(C,v),Oe(d),C=null),n.destroy()}function M(){var j=e.length,F=r.classes,W=r.i18n,B=r.perPage,U=c()?p.getEnd()+1:Ft(j/B);C=u||dt("ul",F.pagination,s.track.parentElement),Re(C,v=gr+"--"+b()),Z(C,je,"tablist"),Z(C,we,W.select),Z(C,Yr,b()===ur?"vertical":"");for(var D=0;D<U;D++){var m=dt("li",null,C),I=dt("button",{class:F.page,type:"button"},m),k=a.getIn(D).map(function(S){return S.slide.id}),T=!c()&&B>1?W.pageX:W.slideX;i(I,"click",ae(P,D)),r.paginationKeyboard&&i(I,"keydown",ae(E,D)),Z(m,je,"presentation"),Z(I,je,"tab"),Z(I,Ot,k.join(" ")),Z(I,we,Er(T,D+1)),Z(I,gt,-1),d.push({li:m,button:I,page:D})}}function P(j){y(">"+j,!0)}function E(j,F){var W=d.length,B=Kr(F),U=b(),D=-1;B===g(cr,!1,U)?D=++j%W:B===g(sr,!1,U)?D=(--j+W)%W:B==="Home"?D=0:B==="End"&&(D=W-1);var m=d[D];m&&(An(m.button),y(">"+D),Be(F,!0))}function b(){return r.paginationDirection||r.direction}function A(j){return d[p.toPage(j)]}function R(){var j=A($(!0)),F=A($());if(j){var W=j.button;Ne(W,nt),We(W,un),Z(W,gt,-1)}if(F){var B=F.button;Re(B,nt),Z(B,un,!0),Z(B,gt,"")}l(Dn,{list:C,items:d},j,F)}return{items:d,mount:h,destroy:w,getAt:A,update:R}}var ra=[" ","Enter"];function na(e,t,r){var n=r.isNavigation,o=r.slideFocus,l=[];function i(){e.splides.forEach(function(u){u.isParent||(p(e,u.splide),p(u.splide,e))}),n&&c()}function a(){l.forEach(function(u){u.destroy()}),Oe(l)}function s(){a(),i()}function p(u,d){var C=ge(u);C.on(ze,function(v,h,w){d.go(d.is(xt)?w:v)}),l.push(C)}function c(){var u=ge(e),d=u.on;d(Or,y),d(Gn,g),d([Ke,Se],$),l.push(u),u.emit(Mr,e.splides)}function $(){Z(t.Elements.list,Yr,r.direction===ur?"vertical":"")}function y(u){e.go(u.index)}function g(u,d){Vr(ra,Kr(d))&&(y(u),Be(d))}return{setup:ae(t.Media.set,{slideFocus:Vt(o)?n:o},!0),mount:i,destroy:a,remount:s}}function oa(e,t,r){var n=ge(e),o=n.bind,l=0;function i(){r.wheel&&o(t.Elements.track,"wheel",a,ut)}function a(p){if(p.cancelable){var c=p.deltaY,$=c<0,y=wr(p),g=r.wheelMinThreshold||0,u=r.wheelSleep||0;xe(c)>g&&y-l>u&&(e.go($?"<":">"),l=y),s($)&&Be(p)}}function s(p){return!r.releaseWheel||e.state.is(bt)||t.Controller.getAdjacent(p)!==-1}return{mount:i}}var ia=90;function aa(e,t,r){var n=ge(e),o=n.on,l=t.Elements.track,i=r.live&&!r.isNavigation,a=dt("span",_i),s=ar(ia,ae(c,!1));function p(){i&&(y(!t.Autoplay.isPaused()),Z(l,gn,!0),a.textContent="…",o(Hr,ae(y,!0)),o(Dr,ae(y,!1)),o([St,ot],ae(c,!0)))}function c(g){Z(l,dn,g),g?(Pt(l,a),s.start()):(rt(a),s.cancel())}function $(){We(l,[pn,gn,dn]),rt(a)}function y(g){i&&Z(l,pn,g?"off":"polite")}return{mount:p,disable:y,destroy:$}}var la=Object.freeze({__proto__:null,Media:fi,Direction:hi,Elements:Ii,Slides:Fi,Layout:Ri,Clones:Vi,Move:Bi,Controller:Pi,Arrows:Oi,Autoplay:Mi,Cover:Hi,Scroll:Xi,Drag:Ki,Keyboard:Zi,LazyLoad:ea,Pagination:ta,Sync:na,Wheel:oa,Live:aa}),sa={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"},ca={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:Ei,i18n:sa,reducedMotion:{speed:0,rewindSpeed:0,autoplay:"pause"}};function ua(e,t,r){var n=t.Slides;function o(){ge(e).on([Ke,ye],l)}function l(){n.forEach(function(a){a.style("transform","translateX(-"+100*a.index+"%)")})}function i(a,s){n.style("transition","opacity "+r.speed+"ms "+r.easing),wn(s)}return{mount:o,start:i,cancel:_r}}function pa(e,t,r){var n=t.Move,o=t.Controller,l=t.Scroll,i=t.Elements.list,a=ae(Le,i,"transition"),s;function p(){ge(e).bind(i,"transitionend",function(g){g.target===i&&s&&($(),s())})}function c(g,u){var d=n.toPosition(g,!0),C=n.getPosition(),v=y(g);xe(d-C)>=1&&v>=1?r.useScroll?l.scroll(d,v,!1,u):(a("transform "+v+"ms "+r.easing),n.translate(d,!0),s=u):(n.jump(g),u())}function $(){a(""),l.cancel()}function y(g){var u=r.rewindSpeed;if(e.is(vt)&&u){var d=o.getIndex(!0),C=o.getEnd();if(d===0&&g>=C||d>=C&&g===0)return u}return r.speed}return{mount:p,start:c,cancel:$}}var da=(function(){function e(r,n){this.event=ge(),this.Components={},this.state=gi(pt),this.splides=[],this._o={},this._E={};var o=Ye(r)?kn(document,r):r;_t(o,o+" is invalid."),this.root=o,n=Ge({label:Ae(o,we)||"",labelledby:Ae(o,Gr)||""},ca,e.defaults,n||{});try{Ge(n,JSON.parse(Ae(o,Nr)))}catch{_t(!1,"Invalid JSON")}this._o=Object.create(Ge({},n))}var t=e.prototype;return t.mount=function(n,o){var l=this,i=this.state,a=this.Components;_t(i.is([pt,Zt]),"Already mounted!"),i.set(pt),this._C=a,this._T=o||this._T||(this.is(zt)?ua:pa),this._E=n||this._E;var s=It({},la,this._E,{Transition:this._T});return tt(s,function(p,c){var $=p(l,a,l._o);a[c]=$,$.setup&&$.setup()}),tt(a,function(p){p.mount&&p.mount()}),this.emit(Ke),Re(this.root,wi),i.set(ht),this.emit(Lr),this},t.sync=function(n){return this.splides.push({splide:n}),n.splides.push({splide:this,isParent:!0}),this.state.is(ht)&&(this._C.Sync.remount(),n.Components.Sync.remount()),this},t.go=function(n){return this._C.Controller.go(n),this},t.on=function(n,o){return this.event.on(n,o),this},t.off=function(n){return this.event.off(n),this},t.emit=function(n){var o;return(o=this.event).emit.apply(o,[n].concat(Xe(arguments,1))),this},t.add=function(n,o){return this._C.Slides.add(n,o),this},t.remove=function(n){return this._C.Slides.remove(n),this},t.is=function(n){return this._o.type===n},t.refresh=function(){return this.emit(ye),this},t.destroy=function(n){n===void 0&&(n=!0);var o=this.event,l=this.state;return l.is(pt)?ge(this).on(Lr,this.destroy.bind(this,n)):(tt(this._C,function(i){i.destroy&&i.destroy(n)},!0),o.emit(zr),o.destroy(),n&&Oe(this.splides),l.set(Zt)),this},si(e,[{key:"options",get:function(){return this._o},set:function(n){this._C.Media.set(n,!0,!0)}},{key:"length",get:function(){return this._C.Slides.getLength(!0)}},{key:"index",get:function(){return this._C.Controller.getIndex()}}]),e})(),Jr=da;Jr.defaults={};Jr.STATES=ui;var yn=[[Ke,"onMounted"],[Lr,"onReady"],[ze,"onMove"],[St,"onMoved"],[Or,"onClick"],[Wn,"onActive"],[Vn,"onInactive"],[Bn,"onVisible"],[Pn,"onHidden"],[ye,"onRefresh"],[Se,"onUpdated"],[yt,"onResize"],[or,"onResized"],[Nn,"onDrag"],[jn,"onDragging"],[On,"onDragged"],[ir,"onScroll"],[ot,"onScrolled"],[zr,"onDestroy"],[zn,"onArrowsMounted"],[Mn,"onArrowsUpdated"],[Hn,"onPaginationMounted"],[Dn,"onPaginationUpdated"],[Mr,"onNavigationMounted"],[Hr,"onAutoplayPlay"],[Un,"onAutoplayPlaying"],[Dr,"onAutoplayPause"],[Ur,"onLazyLoadLoaded"]];function Zr(...e){return e.filter(Boolean).join(" ")}function rr(e){return e!==null&&typeof e=="object"}function kr(e,t){if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&!e.some((r,n)=>!kr(r,t[n]));if(rr(e)&&rr(t)){const r=Object.keys(e),n=Object.keys(t);return r.length===n.length&&!r.some(o=>!Object.prototype.hasOwnProperty.call(t,o)||!kr(e[o],t[o]))}return e===t}function ga(e,t){return e.length===t.length&&!e.some((r,n)=>r!==t[n])}function ma(e,t){if(e){const r=Object.keys(e);for(let n=0;n<r.length;n++){const o=r[n];if(o!=="__proto__"&&t(e[o],o)===!1)break}}return e}function Fr(e,t){const r=e;return ma(t,(n,o)=>{Array.isArray(n)?r[o]=n.slice():rr(n)?r[o]=Fr(rr(r[o])?r[o]:{},n):r[o]=n}),r}var fa=({children:e,className:t,...r})=>z.createElement("div",{className:Zr("splide__track",t),...r},z.createElement("ul",{className:"splide__list"},e)),lo=class extends z.Component{constructor(){super(...arguments),this.splideRef=z.createRef(),this.slides=[]}componentDidMount(){const{options:e,extensions:t,transition:r}=this.props,{current:n}=this.splideRef;n&&(this.splide=new Jr(n,e),this.bind(this.splide),this.splide.mount(t,r),this.options=Fr({},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&&!kr(this.options,e)&&(this.splide.options=e,this.options=Fr({},e));const t=this.getSlides();ga(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){yn.forEach(([t,r])=>{const n=this.props[r];typeof n=="function"&&e.on(t,(...o)=>{n(e,...o)})})}omit(e,t){return t.forEach(r=>{Object.prototype.hasOwnProperty.call(e,r)&&delete e[r]}),e}render(){const{className:e,tag:t="div",hasTrack:r=!0,children:n,...o}=this.props;return z.createElement(t,{className:Zr("splide",e),ref:this.splideRef,...this.omit(o,["options",...yn.map(l=>l[1])])},r?z.createElement(fa,null,n):n)}},so=({children:e,className:t,...r})=>z.createElement("li",{className:Zr("splide__slide",t),...r},e);/*!
2
2
  * Splide.js
3
3
  * Version : 4.1.3
4
4
  * License : MIT
5
5
  * Copyright: 2022 Naotoshi Fujita
6
- */const ga="RichTextRenderer-module__link___BWeZ2",ma={link:ga},ar=({content:t})=>{const e=n=>n.map((o,r)=>o.type==="link"?x.jsx("a",{className:ma.link,href:o.value,target:o.target,children:e(o.children)},r):x.jsx("span",{style:fa(o),children:o.text},r));return x.jsx(x.Fragment,{children:t.map((n,o)=>{const r=n.children;return x.jsx("div",{children:e(r)},o)})})};function fa(t){return{...t.fontFamily&&{fontFamily:t.fontFamily},...t.fontWeight&&{fontWeight:t.fontWeight},...t.fontStyle&&{fontStyle:t.fontStyle},...t.textDecoration&&{textDecoration:t.textDecoration},...t.textTransform&&{textTransform:t.textTransform},...t.fontVariant&&{fontVariant:t.fontVariant},...t.verticalAlign&&{verticalAlign:t.verticalAlign,lineHeight:"0px"}}}const ha="SvgImage-module__svg___q3xE-",ya="SvgImage-module__img___VsTm-",fo={svg:ha,img:ya},va=t=>{const e=t.trim();return e.startsWith("data:image/svg+xml")?!0:(e.split(/[?#]/)[0]??e).endsWith(".svg")},ba=t=>`url("${t.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}")`,de=({url:t,fill:e="#000000",hoverFill:n="#CCCCCC",className:o=""})=>{const[r,a]=j.useState(()=>typeof window>"u"?!0:CSS.supports("mask-image",'url("")')||CSS.supports("-webkit-mask-image",'url("")'));return j.useEffect(()=>{if(typeof window<"u"&&window.CSS){const i=CSS.supports("mask-image",'url("")')||CSS.supports("-webkit-mask-image",'url("")');a(i)}},[]),!va(t)||!r?x.jsx("img",{src:t,alt:"",className:dt(fo.img,o)}):x.jsx("span",{"data-supports-mask":r,className:dt(fo.svg,o),style:{"--svg":ba(t),"--fill":e,"--hover-fill":n}})},Sa={"top-left":Y.topLeftAlignment,"top-center":Y.topCenterAlignment,"top-right":Y.topRightAlignment,"middle-left":Y.middleLeftAlignment,"middle-center":Y.middleCenterAlignment,"middle-right":Y.middleRightAlignment,"bottom-left":Y.bottomLeftAlignment,"bottom-center":Y.bottomCenterAlignment,"bottom-right":Y.bottomRightAlignment};function xa({settings:t,content:e,styles:n,isEditor:o}){const[r,a]=j.useState(null),{widthSettings:i,fontSettings:c,letterSpacing:s,textAlign:p,wordSpacing:l,fontSizeLineHeight:w,textAppearance:y,color:m}=n.imageCaption,[u,d]=j.useState(void 0),[C,b]=j.useState(null),[f,$]=j.useState(0),[M,P]=j.useState(0),{direction:T,transition:h,controls:L,pagination:R,imageCaption:W,triggers:k}=t,B=j.useRef(h.type),{x:O,y:U}=t.controls.offset,D=g=>{r&&r.go(g)};return j.useEffect(()=>{if(!C)return;const g=new ResizeObserver(A=>{if(!r)return;const[I]=A;d({width:Math.round(I.contentRect.width),height:Math.round(I.contentRect.height)})});return g.observe(C),()=>g.unobserve(C)},[C]),j.useEffect(()=>{!r||B.current===h.type||(P(g=>g+1),B.current=h.type)},[h.type]),x.jsx("div",{className:dt(Y.wrapper,{[Y.editor]:o}),ref:b,children:x.jsxs("div",{className:Y.sliderInner,style:{width:u?u.width:"100%",height:u?u.height:"100%",backgroundColor:h.backgroundColor&&h.type==="fade in"?h.backgroundColor:"transparent"},children:[t.imageCaption.isActive&&x.jsx("div",{className:dt(Y.captionBlock),children:x.jsx("div",{className:Y.captionTextWrapper,children:e.map((g,A)=>x.jsx("div",{className:dt(Y.captionText,Sa[W.alignment],{[Y.withPointerEvents]:A===f&&o,[Y.active]:A===f}),style:{fontFamily:c.fontFamily,fontWeight:c.fontWeight,fontStyle:c.fontStyle,width:i.sizing==="auto"?"max-content":F.scalingValue(i.width,o),letterSpacing:F.scalingValue(s,o),wordSpacing:F.scalingValue(l,o),textAlign:p,fontSize:F.scalingValue(w.fontSize,o),lineHeight:F.scalingValue(w.lineHeight,o),textTransform:y.textTransform??"none",textDecoration:y.textDecoration??"none",fontVariant:y.fontVariant??"normal",color:m,transitionDuration:h.duration?`${Math.round(parseInt(h.duration)/2)}ms`:"500ms"},children:x.jsx("div",{"data-styles":"imageCaption",className:Y.captionTextInner,style:{"--link-hover-color":W.linkHoverColor,"--link-color":W.linkColor,position:"relative",top:F.scalingValue(W.offset.y,o),left:F.scalingValue(W.offset.x,o)},children:x.jsx(ar,{content:g.imageCaption})})},A))})}),x.jsx(rr,{onMove:g=>{$(g.index)},ref:a,options:{arrows:!1,speed:h.duration?parseInt(h.duration):500,autoplay:k.autoPlay!==null,...k.autoPlay!==null&&{interval:parseInt(k.autoPlay)*1e3},direction:T==="horiz"||h.type==="fade in"?"ltr":"ttb",pagination:!1,drag:k.triggersList.drag,perPage:1,width:u?u.width:"100%",height:u?u.height:"100%",type:h.type==="fade in"?"fade":"loop",rewind:!0},children:e.map((g,A)=>x.jsx(ir,{children:x.jsx("div",{className:Y.sliderItem,children:x.jsx("div",{className:Y.imgWrapper,children:x.jsx("img",{className:dt(Y.sliderImage,{[Y.contain]:g.image.objectFit==="contain",[Y.cover]:g.image.objectFit==="cover"}),src:g.image.url,alt:g.image.name??""})})})},A))},M),L.isActive&&x.jsxs(x.Fragment,{children:[x.jsx("div",{className:dt(Y.arrow,{[Y.arrowVertical]:T==="vert",[Y.hoverArrow]:L.show==="on hover"}),style:{color:L.color,"--arrow-hover-color":L.hover},children:x.jsxs("button",{onClick:()=>{D("-1")},className:Y.arrowInner,style:{transform:`translate(${F.scalingValue(O,o)}, ${F.scalingValue(U*(T==="horiz"?1:-1),o)}) scale(${t.controls.scale/100}) rotate(${T==="horiz"?"0deg":"90deg"})`},children:[L.arrowsImgUrl&&x.jsx(de,{url:L.arrowsImgUrl,fill:L.color,hoverFill:L.hover,className:dt(Y.arrowImg,Y.mirror)}),!L.arrowsImgUrl&&x.jsx(ho,{color:L.color,className:dt(Y.arrowIcon,Y.arrowImg,Y.mirror)})]})}),x.jsx("div",{className:dt(Y.arrow,Y.nextArrow,{[Y.arrowVertical]:T==="vert",[Y.hoverArrow]:L.show==="on hover"}),style:{color:L.color,"--arrow-hover-color":L.hover},children:x.jsxs("button",{className:Y.arrowInner,onClick:()=>D("+1"),style:{transform:`translate(${F.scalingValue(O*(T==="horiz"?-1:1),o)}, ${F.scalingValue(U,o)}) scale(${t.controls.scale/100}) rotate(${T==="horiz"?"0deg":"90deg"})`},children:[L.arrowsImgUrl&&x.jsx(de,{url:L.arrowsImgUrl,fill:L.color,hoverFill:L.hover,className:Y.arrowImg}),!L.arrowsImgUrl&&x.jsx(ho,{color:L.color,className:dt(Y.arrowIcon,Y.arrowImg)})]})})]}),k.triggersList.click&&x.jsx("div",{className:Y.clickOverlay,onClick:()=>{r&&r.go("+1")}}),R.isActive&&x.jsx("div",{className:dt(Y.pagination,{[Y.paginationInsideBottom]:R.position==="inside-1"&&T==="horiz",[Y.paginationInsideTop]:R.position==="inside-2"&&T==="horiz",[Y.paginationOutsideBottom]:R.position==="outside-1"&&T==="horiz",[Y.paginationOutsideTop]:R.position==="outside-2"&&T==="horiz",[Y.paginationInsideLeft]:R.position==="inside-1"&&T==="vert",[Y.paginationInsideRight]:R.position==="inside-2"&&T==="vert",[Y.paginationOutsideLeft]:R.position==="outside-1"&&T==="vert",[Y.paginationOutsideRight]:R.position==="outside-2"&&T==="vert",[Y.paginationVertical]:T==="vert"}),children:x.jsx("div",{className:Y.paginationInner,style:{backgroundColor:R.colors[2],transform:`scale(${R.scale/100}) translate(${F.scalingValue(R.offset.x,o)}, ${F.scalingValue(R.offset.y,o)}) rotate(${T==="horiz"?"0deg":"90deg"})`},children:e.map((g,A)=>x.jsx("button",{onClick:()=>{r&&r.go(A)},className:dt(Y.paginationItem),children:x.jsx("div",{className:dt(Y.dot,{[Y.activeDot]:A===f}),style:{backgroundColor:A===f?R.colors[0]:R.colors[1],"--pagination-hover-color":R.hover}})},A))})})]})})}function ho({color:t,className:e}){return x.jsx("svg",{viewBox:"0 0 10 18",className:e,children:x.jsx("g",{id:"Symbols",stroke:"none",strokeWidth:"1",fillRule:"evenodd",children:x.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:t,transform:"translate(5, 9) rotate(-90) translate(-5, -9)"})})})}const Ca={element:xa,id:"control-slider",name:"Slider",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/sliderImg.png"},defaultSize:{width:400,height:400},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:"outside-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"]}},$a="ImageRevealSlider-module__imageRevealSlider___UE5Ob",_a="ImageRevealSlider-module__image___Qjt-e",wa="ImageRevealSlider-module__link___N-iLG",Ta="ImageRevealSlider-module__cursor___2U03d",ae={imageRevealSlider:$a,image:_a,link:wa,cursor:Ta};function yo(t,e,n){for(const o of n){const r=new Image;r.src=o.url;const a=o.width?Number.parseFloat(o.width):r.naturalWidth,i=r.naturalHeight/r.naturalWidth*a,c=a/2,s=i/2;if(t>=o.x-c&&t<=o.x+c&&e>=o.y-s&&e<=o.y+s)return!0}return!1}function bn(t){return new Promise(e=>{const n=new Image;n.src=t,n.onload=()=>{e({width:n.naturalWidth,height:n.naturalHeight})}})}async function Ea(t,e,n,o){let r,a;if(e==="custom"){r=n;const i=await bn(t);a=i.height/i.width*r}else if(e==="random"){r=Math.random()*(o.max-o.min)+o.min;const i=await bn(t);a=i.height/i.width*r}else{const i=await bn(t);r=i.width,a=i.height}return{width:r,height:a,finalWidth:`${r}px`}}function La({settings:t,content:e,isEditor:n}){const[o,r]=j.useState(null),[a,i]=j.useState([]),[c,s]=j.useState(0),p=j.useRef(0),[l,w]=j.useState({x:0,y:0}),[y,m]=j.useState(1),[u,d]=j.useState("none"),C=j.useRef({x:0,y:0}),[b,f]=j.useState(!1),{sizeType:$,imageWidth:M,randomRangeImageWidth:P}=t.imageSize,{revealPosition:T,visible:h}=t.position,{cursorType:L,target:R,defaultCursorScale:W,defaultCursor:k,hoverCursorScale:B,hoverCursor:O}=t.cursor;j.useEffect(()=>{if(!o)return;const g=(_,v)=>{const V=o.getBoundingClientRect(),X=_-V.left,rt=v-V.top;if(w({x:X,y:rt}),L==="system"){d("none"),m(1);return}const Q=X,ut=rt,E=document.elementFromPoint(V.left+Q,V.top+ut);if(E&&E.closest("a")){d("none"),m(1);return}const K=yo(Q,ut,a)||R==="area"?{img:O??"none",scale:B}:{img:k??"none",scale:W};d(K.img),m(K.scale)},A=_=>{_.stopPropagation(),C.current={x:_.clientX,y:_.clientY},g(_.clientX,_.clientY)},I=()=>{b&&g(C.current.x,C.current.y)};return o.addEventListener("mousemove",A),window.addEventListener("scroll",I,!0),()=>{o.removeEventListener("mousemove",A),window.removeEventListener("scroll",I,!0)}},[o,b,l,L,R,O,k,B,W,a]),j.useEffect(()=>{b||(d("none"),m(0))},[b]);const U=async(g,A,I,_={})=>{const{width:v,height:V,finalWidth:X}=await Ea(g.image.url,$,M,P);let rt=0,Q=0;T==="same"?(rt=A/2,Q=I/2):(rt=_.x??Math.random()*A,Q=_.y??Math.random()*I);const ut=Math.min(Math.max(rt,v/2),A-v/2),E=Math.min(Math.max(Q,V/2),I-V/2);return{id:p.current++,url:g.image.url,link:g.link,name:g.image.name,x:ut,y:E,width:X}};j.useEffect(()=>{if(!o||e.length===0)return;const g=o.getBoundingClientRect(),A=g.width,I=g.height,_=[];(async()=>{const V=e[0],X=await U(V,A,I);_.push(X),i(_),s(1)})()},[$,M,P,T,o]),j.useEffect(()=>{h==="last One"&&i(g=>g.length>0?[g[g.length-1]]:[])},[h]);const D=async g=>{if(!o)return;const A=o.getBoundingClientRect(),I=g.clientX-A.left,_=g.clientY-A.top;if(R==="image"&&!yo(I,_,a))return;let v=0,V=0;T==="on Click"?(v=I,V=_):T==="same"?(v=A.width/2,V=A.height/2):(v=Math.random()*A.width,V=Math.random()*A.height);const X=e[c],rt=await U(X,A.width,A.height,{x:v,y:V});i(Q=>h==="all"?[...Q,rt]:[rt]),s(Q=>Q>=e.length-1?0:Q+1)};return x.jsxs("div",{ref:r,onClick:D,onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1),className:ae.imageRevealSlider,style:{cursor:u==="none"?"default":"none"},children:[a.map(g=>x.jsx("div",{className:ae.wrapper,style:{top:`${g.y}px`,left:`${g.x}px`,position:"absolute",transform:"translate(-50%, -50%)",width:g.width??"auto",height:"auto",cursor:u==="none"?"default":"none"},children:R==="area"&&g.link?x.jsx("a",{href:g.link,target:"_blank",className:ae.link,children:x.jsx("img",{src:g.url,alt:g.name,className:ae.image},g.id)}):x.jsx("img",{src:g.url,alt:g.name,className:ae.image},g.id)},g.id)),b&&x.jsx("div",{className:ae.cursor,style:{left:`${l.x}px`,top:`${l.y}px`,transform:`translate(-50%, -50%) scale(${y})`,backgroundImage:`url('${u}')`,backgroundSize:"cover",backgroundPosition:"center",position:"absolute",pointerEvents:"none"}})]})}const Aa={element:La,id:"control-image-reveal",name:"Click Gallery",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/clickGalleryImg.png"},defaultSize:{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:""}]}}}},Ia="LightBox-module__hidden___9s-9x",ka="LightBox-module__heroImage___sTxNF",Fa="LightBox-module__background___rm9ml",Ra="LightBox-module__editor___4ACaY",Ba="LightBox-module__contentStyle___Bgnsq",Va="LightBox-module__imageStyle___tLIlB",Oa="LightBox-module__imgWrapper___LuFUp",Pa="LightBox-module__contain___8-yaS",Na="LightBox-module__cover___hNvOG",Wa="LightBox-module__caption___b6L2I",za="LightBox-module__captionTextInner___rCGNH",ja="LightBox-module__lightboxSplide___XFuWC",Ma="LightBox-module__arrow___iz38X",Ha="LightBox-module__arrowVertical___Zfz81",Da="LightBox-module__nextArrow___zkAQN",Ua="LightBox-module__arrowInner___p48sW",Ya="LightBox-module__arrowIcon___3VaFf",Ga="LightBox-module__arrowImg___pNV88",qa="LightBox-module__mirror___pjeXc",Xa="LightBox-module__thumbsWrapper___GB-nU",Ka="LightBox-module__thumbsContainerVertical___wttk5",Ja="LightBox-module__thumbsContainer___osSma",Za="LightBox-module__thumbsAlignStart___MO6tY",Qa="LightBox-module__thumbsAlignCenter___Q4sUx",ts="LightBox-module__thumbsAlignEnd___p4y9R",es="LightBox-module__thumbItem___HvnF3",ns="LightBox-module__closeButton___g2khP",os="LightBox-module__fadeIn___0m5GW",rs="LightBox-module__slideInLeft___gPYwC",is="LightBox-module__slideInRight___S-pPp",as="LightBox-module__slideInTop___DFdAj",ss="LightBox-module__slideInBottom___m27kZ",ls="LightBox-module__fadeOut___55qBR",cs="LightBox-module__slideOutLeft___NvU7P",us="LightBox-module__slideOutRight___SK7eC",ps="LightBox-module__slideOutTop___Vgg0z",ds="LightBox-module__slideOutBottom___nJ0Ef",gs="LightBox-module__scaleSlide___vZriG",N={hidden:Ia,heroImage:ka,background:Fa,editor:Ra,contentStyle:Ba,imageStyle:Va,imgWrapper:Oa,contain:Pa,cover:Na,caption:Wa,captionTextInner:za,lightboxSplide:ja,arrow:Ma,arrowVertical:Ha,nextArrow:Da,arrowInner:Ua,arrowIcon:Ya,arrowImg:Ga,mirror:qa,thumbsWrapper:Xa,thumbsContainerVertical:Ka,thumbsContainer:Ja,thumbsAlignStart:Za,thumbsAlignCenter:Qa,thumbsAlignEnd:ts,thumbItem:es,closeButton:ns,fadeIn:os,slideInLeft:rs,slideInRight:is,slideInTop:as,slideInBottom:ss,fadeOut:ls,slideOutLeft:cs,slideOutRight:us,slideOutTop:ps,slideOutBottom:ds,scaleSlide:gs},Me=(t,e,n)=>{const o={},[r,a]=t.split("-");return r==="top"?(o.top="0",o.bottom="auto"):r==="middle"?(o.top="50%",o.bottom="auto"):r==="bottom"&&(o.top="auto",o.bottom="0"),a==="left"?(o.left="0",o.right="auto"):a==="center"?(o.left="50%",o.right="auto"):a==="right"&&(o.left="auto",o.right="0"),r==="middle"&&a==="center"?o.transform=`translate(calc(-50% + ${F.scalingValue(e.x,n)}), calc(-50% + ${F.scalingValue(e.y,n)}))`:r==="middle"?o.transform=`translate(${F.scalingValue(e.x,n)}, calc(-50% + ${F.scalingValue(e.y,n)}))`:a==="center"?o.transform=`translate(calc(-50% + ${F.scalingValue(e.x,n)}), ${F.scalingValue(e.y,n)})`:o.transform=`translate(${F.scalingValue(e.x,n)}, ${F.scalingValue(e.y,n)})`,o};function sr(t){const e=window.getComputedStyle(t);return{top:parseFloat(e.paddingTop)||0,right:parseFloat(e.paddingRight)||0,bottom:parseFloat(e.paddingBottom)||0,left:parseFloat(e.paddingLeft)||0}}function vo(t){const e=t.getBoundingClientRect(),n=sr(t),o=Math.max(0,e.width-n.left-n.right),r=Math.max(0,e.height-n.top-n.bottom),a=t.naturalWidth,i=t.naturalHeight,c=o/r,s=a/i;let p,l;s>c?(p=o,l=o/s):(l=r,p=r*s);const w=e.left+n.left,y=e.top+n.top,m=(o-p)/2+w,u=(r-l)/2+y;return{x:m,y:u,width:p,height:l}}function bo(t){const e=t.getBoundingClientRect(),n=sr(t);return{left:e.left+n.left,right:e.right-n.right,top:e.top+n.top,bottom:e.bottom-n.bottom}}function So(t){const e=t.match(/rgba?\(([^)]+)\)/);if(e){const o=e[1].split(",").map(r=>parseFloat(r.trim()));return o.length===4?o[3]:1}const n=t.match(/^#([0-9a-fA-F]{8})$/);if(n){const o=n[1].substring(6,8);return parseInt(o,16)/255}return t.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/),1}function ms(t,e){const n=(()=>{if(t==="fade in")return N.fadeIn;if(t==="slide in"||t==="mix")switch(e){case"left":return N.slideInLeft;case"right":return N.slideInRight;case"top":return N.slideInTop;case"bottom":return N.slideInBottom;default:return N.slideInRight}return N.fadeIn})(),o=(()=>{if(t==="fade in"||t==="mix")return N.fadeIn;if(t==="slide in")switch(e){case"left":return N.slideInLeft;case"right":return N.slideInRight;case"top":return N.slideInTop;case"bottom":return N.slideInBottom;default:return N.slideInRight}return N.fadeIn})(),r=(()=>{if(t==="fade in"||t==="mix")return N.fadeOut;if(t==="slide in")switch(e){case"left":return N.slideOutLeft;case"right":return N.slideOutRight;case"top":return N.slideOutTop;case"bottom":return N.slideOutBottom;default:return N.slideOutRight}return N.fadeOut})(),a=(()=>{if(t==="fade in")return N.fadeOut;if(t==="slide in"||t==="mix")switch(e){case"left":return N.slideOutLeft;case"right":return N.slideOutRight;case"top":return N.slideOutTop;case"bottom":return N.slideOutBottom;default:return N.slideOutRight}return N.fadeOut})();return{appearClass:n,backdropAppearClass:o,backdropDisappearClass:r,disappearClass:a}}const fs=({settings:t,content:e,styles:n,portalId:o,activeEvent:r,isEditor:a})=>{const[i,c]=j.useState(!1),{url:s}=t.thumbnailBlock.cover;return j.useEffect(()=>{r==="close"&&c(!1),r==="open"&&c(!0)},[r]),x.jsxs(x.Fragment,{children:[x.jsx("img",{src:s,alt:"Cover",className:N.heroImage,onClick:()=>c(!0)}),x.jsx(hs,{isOpen:i,onClose:()=>c(!1),content:e,settings:t,lightboxStyles:n,portalId:o,isEditor:a})]})},hs=({isOpen:t,onClose:e,content:n,lightboxStyles:o,settings:r,portalId:a,isEditor:i,metadata:c})=>{var z;const[s,p]=j.useState(0),[l,w]=j.useState(0),[y,m]=j.useState(!1),[u,d]=j.useState(!1),[C,b]=j.useState({}),f=j.useRef(null),$=j.useRef(null),M=j.useRef(null),P=j.useRef(!1),T=j.useRef(null),h=j.useRef(null),L=j.useRef(null),R=j.useRef(null),W=j.useRef(!1),k=j.useRef(null),[B,O]=j.useState(!1),{appear:U,triggers:D,slider:g,thumbnail:A,controls:I,area:_,caption:v,layout:V}=r.lightboxBlock,{appearClass:X,backdropAppearClass:rt,backdropDisappearClass:Q,disappearClass:ut}=ms(U.type,U.direction),E=(c==null?void 0:c.itemId)??null;j.useEffect(()=>{const S=()=>{setTimeout(()=>{var G,J;(J=(G=f.current)==null?void 0:G.splide)==null||J.refresh()},16)},H=()=>{w(G=>G+1)};return window.addEventListener("ArticleEditor.Layout:change",S),window.addEventListener("ArticleEditor.ComponentContent:change",H),()=>{window.removeEventListener("ArticleEditor.Layout:change",S),window.removeEventListener("ArticleEditor.ComponentContent:change",H)}},[]),j.useEffect(()=>{if(!t||!A.isActive){O(!1);return}const S=k.current;if(!S)return;const H=()=>{g.direction==="horiz"?O(S.scrollWidth>S.clientWidth):O(S.scrollHeight>S.clientHeight)};H();const G=new ResizeObserver(H);return G.observe(S),()=>G.disconnect()},[t,A.isActive,n.length,C,g.direction]);const K=j.useCallback(()=>{const S=window.matchMedia("(max-width: 768px)").matches,H=So(_.color);S&&!i&&H>.9&&(document.body.style.backgroundColor=""),m(!0),P.current=!0;const G=J=>{J.target===T.current&&J.animationName&&(T.current&&h.current&&T.current.removeEventListener("animationend",h.current),h.current=null,P.current&&(P.current=!1,e()),m(!1))};T.current&&(h.current=G,T.current.addEventListener("animationend",G))},[e,_.color,i]),ft=(S,H,G)=>{var J,ot;if(S){if(D.type==="click"&&D.switch==="image")D.repeat==="close"&&s===n.length-1?K():(J=f.current)==null||J.go("+1");else if(D.type==="click"&&D.switch==="50/50"){const tt=S.getBoundingClientRect(),q=H-tt.left,nt=G-tt.top,vt=tt.width,st=tt.height;let pt;g.direction==="horiz"?pt=q<vt/2?"-1":"+1":pt=nt<st/2?"-1":"+1",(ot=f.current)==null||ot.go(pt)}}},it=S=>{if(W.current){W.current=!1;return}const H=n[s],G=(H==null?void 0:H.image.objectFit)==="cover";let J,ot;if("changedTouches"in S&&S.changedTouches.length>0)J=S.changedTouches[0].clientX,ot=S.changedTouches[0].clientY;else if("clientX"in S)J=S.clientX,ot=S.clientY;else return;let tt;if(G&&M.current){const q=bo(M.current);tt=J>=q.left&&J<=q.right&&ot>=q.top&&ot<=q.bottom}else{const q=M.current?vo(M.current):null;if(!q){S.target===S.currentTarget&&K();return}tt=J>=q.x&&J<=q.x+q.width&&ot>=q.y&&ot<=q.y+q.height}tt?ft(M.current,J,ot):K()},mt=S=>{const H=S.target;(H.classList.contains(N.thumbsWrapper)||H.classList.contains(N.thumbsContainer))&&it(S)};j.useEffect(()=>{if(!t)return;const S=H=>{var G,J;if(H.key==="Escape"){K();return}if(H.key==="ArrowRight"){p(ot=>(ot+1)%Math.max(n.length,1)),(G=f.current)==null||G.go("+1");return}H.key==="ArrowLeft"&&(p(ot=>(ot-1+Math.max(n.length,1))%Math.max(n.length,1)),(J=f.current)==null||J.go("-1"))};return window.addEventListener("keydown",S),()=>{window.removeEventListener("keydown",S)}},[t,K,n.length]),j.useEffect(()=>{if(t){if(p(0),w(H=>H+1),P.current=!1,m(!1),d(!1),b({}),!E)return;const S=new CustomEvent("page-overlay",{detail:{itemId:E}});window.dispatchEvent(S)}return()=>{T.current&&h.current&&(T.current.removeEventListener("animationend",h.current),h.current=null),d(!1)}},[t,E]),j.useEffect(()=>{$.current!==null&&$.current!==g.type&&w(S=>S+1),$.current=g.type},[g.type]),j.useEffect(()=>{if(!t)return;const S=document.body.style.overflow,H=window.matchMedia("(max-width: 768px)").matches,G=So(_.color);document.body.style.overflow="hidden",d(!1);const J=tt=>{tt.target===T.current&&!P.current&&tt.animationName&&(H&&!i&&G>.9&&(document.body.style.backgroundColor=_.color),d(!0),T.current&&L.current&&T.current.removeEventListener("animationend",L.current),L.current=null)};T.current&&(L.current=J,T.current.addEventListener("animationend",J));const ot=tt=>{const q=tt.target;q&&(q.closest(`.${N.thumbsWrapper}`)||q.closest(`.${N.thumbsContainer}`))||g.type!=="slide"&&tt.preventDefault()};return document.addEventListener("touchmove",ot,{passive:!1}),()=>{document.body.style.overflow=S,document.removeEventListener("touchmove",ot),T.current&&L.current&&(T.current.removeEventListener("animationend",L.current),L.current=null),d(!1)}},[t,i,_.color,g.type]),j.useEffect(()=>{if(!t)return;const S=H=>{var J,ot;if(P.current){H.stopPropagation();return}if(W.current){W.current=!1;return}const G=H.target;if(!(G&&(G.closest(`.${N.thumbsContainer}`)||G.closest(`.${N.thumbItem}`)))){if(g.type==="slide"&&D.type==="drag"&&((ot=(J=f.current)==null?void 0:J.splide)!=null&&ot.root)){const tt=f.current.splide.root;if(G&&(tt.contains(G)||tt===G))return}if(H.touches.length===0&&H.changedTouches.length>0){const tt=n[s],q=(tt==null?void 0:tt.image.objectFit)==="cover",nt=H.changedTouches[0];let vt;if(q&&M.current){const st=bo(M.current);vt=nt.clientX>=st.left&&nt.clientX<=st.right&&nt.clientY>=st.top&&nt.clientY<=st.bottom}else{const st=M.current?vo(M.current):null;if(!st)return;vt=nt.clientX>=st.x&&nt.clientX<=st.x+st.width&&nt.clientY>=st.y&&nt.clientY<=st.y+st.height}if(!vt){H.stopPropagation(),P.current=!0;const st=pt=>{pt.stopPropagation(),pt.preventDefault(),document.removeEventListener("click",st,!0)};document.addEventListener("click",st,!0),K()}}}};return document.addEventListener("touchend",S,{passive:!0}),()=>{document.removeEventListener("touchend",S)}},[t,K,s,n]);const bt=(g.type==="scale"||g.type==="fade")&&g.direction==="vert"&&D.type==="drag";j.useEffect(()=>{var pt,kt;if(!t||!bt||!((kt=(pt=f.current)==null?void 0:pt.splide)!=null&&kt.root))return;const S=f.current.splide.root,H=30,G=(et,lt)=>{if(R.current){const Ct=Math.abs(et-R.current.x),Ht=Math.abs(lt-R.current.y);(Ct>0||Ht>0)&&(W.current=!0)}},J=et=>{R.current&&(et.preventDefault(),G(et.clientX,et.clientY))},ot=et=>{R.current&&et.touches.length>0&&(et.preventDefault(),G(et.touches[0].clientX,et.touches[0].clientY))},tt=(et,lt)=>{if(!R.current||!f.current){R.current=null;return}const Ct=Math.abs(et-R.current.x),Ht=Math.abs(lt-R.current.y);Ht>H&&Ht>Ct&&f.current.go(lt<R.current.y?"+1":"-1"),R.current=null},q=et=>{R.current&&tt(et.clientX,et.clientY),document.removeEventListener("pointerup",q),document.removeEventListener("pointercancel",q),document.removeEventListener("pointermove",J)},nt=et=>{if(R.current){if(et.changedTouches.length>0){const lt=et.changedTouches[0];tt(lt.clientX,lt.clientY)}document.removeEventListener("touchend",nt),document.removeEventListener("touchcancel",nt),document.removeEventListener("touchmove",ot)}},vt=et=>{R.current={x:et.clientX,y:et.clientY},W.current=!1,document.addEventListener("pointermove",J,{passive:!1}),document.addEventListener("pointerup",q),document.addEventListener("pointercancel",q)},st=et=>{et.touches.length>0&&(R.current={x:et.touches[0].clientX,y:et.touches[0].clientY},W.current=!1,document.addEventListener("touchmove",ot,{passive:!1}),document.addEventListener("touchend",nt),document.addEventListener("touchcancel",nt))};return S.addEventListener("pointerdown",vt),S.addEventListener("touchstart",st),()=>{S.removeEventListener("pointerdown",vt),S.removeEventListener("touchstart",st),document.removeEventListener("pointermove",J),document.removeEventListener("pointerup",q),document.removeEventListener("pointercancel",q),document.removeEventListener("touchmove",ot),document.removeEventListener("touchend",nt),document.removeEventListener("touchcancel",nt),R.current=null,W.current=!1}},[t,bt,l]);const Mt={backgroundColor:_.color,backdropFilter:`blur(${_.blur}px)`,animationDuration:`${parseInt(U.duration)}ms`,animationTimingFunction:"ease",animationFillMode:"both"};return typeof document>"u"||!document.getElementById(a)?null:gr.createPortal(x.jsxs(x.Fragment,{children:[x.jsx("div",{ref:i?null:T,className:dt(N.background,y?Q:rt,{[N.editor]:i},{[N.hidden]:!t}),style:{...Mt,...u&&!i&&!y?{position:"absolute"}:{}}}),x.jsxs("div",{ref:i?T:null,className:dt(N.contentStyle,y?ut:X,{[N.editor]:i},{[N.hidden]:!t}),style:{animationDuration:`${parseInt(U.duration)}ms`,animationTimingFunction:"ease",animationFillMode:"both"},children:[x.jsx(rr,{onMove:S=>p(S.index),ref:f,className:N.lightboxSplide,options:{arrows:!1,speed:g.duration?parseInt(g.duration):500,direction:g.direction==="horiz"||g.type==="fade"||g.type==="scale"?"ltr":"ttb",pagination:!1,drag:D.type==="drag"&&!bt,perPage:1,width:"100%",height:"100%",type:g.type==="fade"||g.type==="scale"?"fade":"loop",padding:0,rewind:D.repeat!=="close",start:0},style:{"--splide-speed":g.duration},children:n.map((S,H)=>{const G=Me(V.position,V.offset,i),J=`${F.scalingValue(V.padding.top,i)} ${F.scalingValue(V.padding.right,i)} ${F.scalingValue(V.padding.bottom,i)} ${F.scalingValue(V.padding.left,i)}`,ot=g.type==="scale"?(()=>{const{transform:tt,...q}=G;return{...q,position:"absolute",padding:J,boxSizing:"border-box","--position-transform":tt||"none"}})():{...G,position:"absolute",padding:J,boxSizing:"border-box"};return x.jsx(ir,{children:x.jsx("div",{className:N.imgWrapper,onClick:it,children:x.jsx("img",{ref:H===s?M:null,className:dt(N.imageStyle,{[N.contain]:S.image.objectFit==="contain",[N.cover]:S.image.objectFit==="cover",[N.scaleSlide]:g.type==="scale"}),src:S.image.url,alt:S.image.name??"",style:{...ot,pointerEvents:S.image.objectFit==="contain"?"none":"auto"}})})},H)})},l),I.isActive&&x.jsxs(x.Fragment,{children:[x.jsx("div",{className:dt(N.arrow,{[N.arrowVertical]:g.direction==="vert"}),style:{color:I.color,"--arrow-hover-color":I.hover},children:x.jsxs("button",{className:N.arrowInner,style:{transform:`translate(${F.scalingValue(I.offset.x,i)}, ${F.scalingValue(I.offset.y*(g.direction==="horiz"?1:-1),i)}) scale(${I.scale}) rotate(${g.direction==="horiz"?"0deg":"90deg"})`},onClick:()=>{var S;return(S=f.current)==null?void 0:S.go("-1")},"aria-label":"Previous",children:[I.arrowsImgUrl&&x.jsx(de,{url:I.arrowsImgUrl,fill:I.color,hoverFill:I.hover,className:dt(N.arrowImg,N.mirror)}),!I.arrowsImgUrl&&x.jsx(xo,{color:I.color,className:dt(N.arrowIcon,N.arrowImg,N.mirror)})]})}),x.jsx("div",{className:dt(N.arrow,N.nextArrow,{[N.arrowVertical]:g.direction==="vert"}),style:{color:I.color,"--arrow-hover-color":I.hover},children:x.jsxs("button",{className:N.arrowInner,style:{transform:`translate(${F.scalingValue(I.offset.x*(g.direction==="horiz"?-1:1),i)}, ${F.scalingValue(I.offset.y,i)}) scale(${I.scale}) rotate(${g.direction==="horiz"?"0deg":"90deg"})`},onClick:()=>{var S;return(S=f.current)==null?void 0:S.go("+1")},"aria-label":"Next",children:[I.arrowsImgUrl&&x.jsx(de,{url:I.arrowsImgUrl,fill:I.color,hoverFill:I.hover,className:N.arrowImg}),!I.arrowsImgUrl&&x.jsx(xo,{color:I.color,className:dt(N.arrowIcon,N.arrowImg)})]})})]}),_.closeIconUrl&&(()=>{const S=Me(_.closeIconAlign,_.closeIconOffset,i),H=`scale(${_.closeIconScale})`,G=S.transform?`${S.transform} ${H}`:H;return x.jsx("button",{className:N.closeButton,style:{...S,transform:G},onClick:K,"aria-label":"Close lightbox",children:x.jsx(de,{url:_.closeIconUrl,fill:_.closeIconColor??"#000000",hoverFill:_.closeIconHover??"#cccccc"})})})(),v&&v.isActive&&o.imageCaption&&((z=n[s])==null?void 0:z.imageCaption)&&(()=>{const{widthSettings:S,fontSettings:H,letterSpacing:G,textAlign:J,wordSpacing:ot,fontSizeLineHeight:tt,textAppearance:q,color:nt}=o.imageCaption;return x.jsx("div",{className:N.caption,style:{...Me(v.alignment,v.offset,i),fontFamily:H.fontFamily,fontWeight:H.fontWeight,fontStyle:H.fontStyle,width:S.sizing==="auto"?"max-content":F.scalingValue(S.width,i),letterSpacing:F.scalingValue(G,i),wordSpacing:F.scalingValue(ot,i),textAlign:J,fontSize:F.scalingValue(tt.fontSize,i),lineHeight:F.scalingValue(tt.lineHeight,i),textTransform:q.textTransform??"none",textDecoration:q.textDecoration??"none",fontVariant:q.fontVariant??"normal",color:nt},onClick:vt=>vt.stopPropagation(),children:x.jsx("div",{"data-styles":"imageCaption",className:N.captionTextInner,style:{"--link-color":v.linkColor,"--link-hover-color":v.linkHoverColor},children:x.jsx(ar,{content:n[s].imageCaption})})})})(),A.isActive&&(()=>{const[S,H]=A.position.split("-"),G=g.direction==="horiz"?`${S}-left`:A.position,J=Me(G,A.offset,i),ot=()=>{if(g.direction==="horiz"){if(H==="left")return"flex-start";if(H==="center")return"center";if(H==="right")return"flex-end"}else{if(S==="top")return"flex-start";if(S==="middle")return"center";if(S==="bottom")return"flex-end"}return"flex-start"};return x.jsx("div",{ref:k,className:N.thumbsWrapper,onClick:tt=>mt(tt),style:{position:i?"absolute":"fixed",...J,...g.direction==="horiz"?{maxWidth:"100vw",width:"100%",overflowX:"auto",overflowY:"hidden"}:{maxHeight:"100vh",overflowY:"auto",overflowX:"hidden"}},children:x.jsx("div",{className:dt(N.thumbsContainer,{[N.thumbsContainerVertical]:g.direction==="vert",[N.thumbsAlignStart]:A.align==="start",[N.thumbsAlignCenter]:A.align==="center",[N.thumbsAlignEnd]:A.align==="end"}),style:{gap:F.scalingValue(A.grid.gap,i),justifyContent:B?"flex-start":ot()},children:n.map((tt,q)=>{const nt=q===s,vt=C[q],pt=A.grid.size*(nt?A.activeState.scale:1),kt=()=>{if(A.fit!=="fit")return{};if(!vt)return g.direction==="horiz"?{height:F.scalingValue(pt,i)}:{width:F.scalingValue(pt,i)};const et=vt.width/vt.height;if(g.direction==="horiz"){const lt=pt,Ct=lt*et;return{width:F.scalingValue(Ct,i),height:F.scalingValue(lt,i)}}else{const lt=pt,Ct=lt/et;return{width:F.scalingValue(lt,i),height:F.scalingValue(Ct,i)}}};return x.jsx("button",{className:N.thumbItem,style:{...g.direction==="horiz"&&A.fit!=="fit"?{height:F.scalingValue(pt,i)}:{},...g.direction==="vert"&&A.fit!=="fit"?{width:F.scalingValue(pt,i)}:{},...A.fit==="cover"?{width:F.scalingValue(pt,i),height:F.scalingValue(pt,i)}:{},...kt(),transition:nt?"all 0.25s ease-out":"none",opacity:nt?A.activeState.opacity/100:A.opacity/100,"--thumb-hover":A.activeState.opacity/100},onClick:et=>{var lt;et.stopPropagation(),p(q),(lt=f.current)==null||lt.go(q)},onMouseEnter:()=>{var et;A.triggers==="hov"&&((et=f.current)==null||et.go(q))},children:x.jsx("img",{src:tt.image.url,alt:tt.image.name??"",onLoad:et=>{const lt=et.currentTarget;lt.naturalWidth&&lt.naturalHeight&&b(Ct=>({...Ct,[q]:{width:lt.naturalWidth,height:lt.naturalHeight}}))},style:{objectFit:A.fit==="cover"?"cover":"contain",...A.fit==="fit"?{maxWidth:"100%",maxHeight:"100%",objectFit:"contain"}:{},...A.fit==="cover"?{width:"100%",height:"100%"}:{}}})},`${tt.image.name}-${q}`)})})})})()]})]}),document.getElementById(a))};function xo({color:t,className:e}){return x.jsx("svg",{viewBox:"0 0 10 18",className:e,children:x.jsx("g",{id:"Symbols",stroke:"none",strokeWidth:"1",fillRule:"evenodd",children:x.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:t,transform:"translate(5, 9) rotate(-90) translate(-5, -9)"})})})}const ys={element:fs,id:"lightbox",name:"Lightbox",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/lightboxImg.png"},defaultSize:{width:440,height:550},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 Zt(t,e){var n,o,r;return{fontFamily:t.fontSettings.fontFamily,fontWeight:t.fontSettings.fontWeight,fontStyle:t.fontSettings.fontStyle,letterSpacing:F.scalingValue(t.letterSpacing,e),wordSpacing:F.scalingValue(t.wordSpacing,e),fontSize:F.scalingValue(t.fontSize,e),lineHeight:t.lineHeight!==void 0?F.scalingValue(t.lineHeight,e):void 0,textTransform:(n=t.textAppearance)==null?void 0:n.textTransform,textDecoration:(o=t.textAppearance)==null?void 0:o.textDecoration,fontVariant:(r=t.textAppearance)==null?void 0:r.fontVariant,color:t.color}}function He(t){return`calc(var(--cntrl-article-width, 100vw) * ${t/1440})`}function vs(t){return`
7
- .${t}-wrapper {
6
+ */const ha="RichTextRenderer-module__link___BWeZ2",ya={link:ha},Tt=({content:e})=>{const t=r=>r.map((n,o)=>n.type==="link"?f.jsx("a",{className:ya.link,href:n.value,target:n.target,children:t(n.children)},o):f.jsx("span",{style:va(n),children:n.text},o));return f.jsx(f.Fragment,{children:e.map((r,n)=>{const o=r.children;return f.jsx("div",{children:t(o)},n)})})};function va(e){return{...e.fontFamily&&{fontFamily: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 ba="SvgImage-module__svg___q3xE-",Sa="SvgImage-module__img___VsTm-",vn={svg:ba,img:Sa},xa=e=>{const t=e.trim();return t.startsWith("data:image/svg+xml")?!0:(t.split(/[?#]/)[0]??t).endsWith(".svg")},Ca=e=>`url("${e.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}")`,mt=({url:e,fill:t="#000000",hoverFill:r="#CCCCCC",className:n=""})=>{const[o,l]=z.useState(()=>typeof window>"u"?!0:CSS.supports("mask-image",'url("")')||CSS.supports("-webkit-mask-image",'url("")'));return z.useEffect(()=>{if(typeof window<"u"&&window.CSS){const i=CSS.supports("mask-image",'url("")')||CSS.supports("-webkit-mask-image",'url("")');l(i)}},[]),!xa(e)||!o?f.jsx("img",{src:e,alt:"",className:de(vn.img,n)}):f.jsx("span",{"data-supports-mask":o,className:de(vn.svg,n),style:{"--svg":Ca(e),"--fill":t,"--hover-fill":r}})},$a={"top-left":G.topLeftAlignment,"top-center":G.topCenterAlignment,"top-right":G.topRightAlignment,"middle-left":G.middleLeftAlignment,"middle-center":G.middleCenterAlignment,"middle-right":G.middleRightAlignment,"bottom-left":G.bottomLeftAlignment,"bottom-center":G.bottomCenterAlignment,"bottom-right":G.bottomRightAlignment};function _a({settings:e,content:t,styles:r,isEditor:n}){const[o,l]=z.useState(null),{widthSettings:i,fontSettings:a,letterSpacing:s,textAlign:p,wordSpacing:c,fontSizeLineHeight:$,textAppearance:y,color:g}=r.imageCaption,[u,d]=z.useState(void 0),[C,v]=z.useState(null),[h,w]=z.useState(0),[M,P]=z.useState(0),{direction:E,transition:b,controls:A,pagination:R,imageCaption:j,triggers:F}=e,W=z.useRef(b.type),{x:B,y:U}=e.controls.offset,D=m=>{o&&o.go(m)};return z.useEffect(()=>{if(!C)return;const m=new ResizeObserver(I=>{if(!o)return;const[k]=I;d({width:Math.round(k.contentRect.width),height:Math.round(k.contentRect.height)})});return m.observe(C),()=>m.unobserve(C)},[C]),z.useEffect(()=>{!o||W.current===b.type||(P(m=>m+1),W.current=b.type)},[b.type]),f.jsx("div",{className:de(G.wrapper,{[G.editor]:n}),ref:v,children:f.jsxs("div",{className:G.sliderInner,style:{width:u?u.width:"100%",height:u?u.height:"100%",backgroundColor:b.backgroundColor&&b.type==="fade in"?b.backgroundColor:"transparent"},children:[e.imageCaption.isActive&&f.jsx("div",{className:de(G.captionBlock),children:f.jsx("div",{className:G.captionTextWrapper,children:t.map((m,I)=>f.jsx("div",{className:de(G.captionText,$a[j.alignment],{[G.withPointerEvents]:I===h&&n,[G.active]:I===h}),style:{fontFamily:a.fontFamily,fontWeight:a.fontWeight,fontStyle:a.fontStyle,width:i.sizing==="auto"?"max-content":_.scalingValue(i.width,n),letterSpacing:_.scalingValue(s,n),wordSpacing:_.scalingValue(c,n),textAlign:p,fontSize:_.scalingValue($.fontSize,n),lineHeight:_.scalingValue($.lineHeight,n),textTransform:y.textTransform??"none",textDecoration:y.textDecoration??"none",fontVariant:y.fontVariant??"normal",color:g,transitionDuration:b.duration?`${Math.round(parseInt(b.duration)/2)}ms`:"500ms"},children:f.jsx("div",{"data-styles":"imageCaption",className:G.captionTextInner,style:{"--link-hover-color":j.linkHoverColor,"--link-color":j.linkColor,position:"relative",top:_.scalingValue(j.offset.y,n),left:_.scalingValue(j.offset.x,n)},children:f.jsx(Tt,{content:m.imageCaption})})},I))})}),f.jsx(lo,{onMove:m=>{w(m.index)},ref:l,options:{arrows:!1,speed:b.duration?parseInt(b.duration):500,autoplay:F.autoPlay!==null,...F.autoPlay!==null&&{interval:parseInt(F.autoPlay)*1e3},direction:E==="horiz"||b.type==="fade in"?"ltr":"ttb",pagination:!1,drag:F.triggersList.drag,perPage:1,width:u?u.width:"100%",height:u?u.height:"100%",type:b.type==="fade in"?"fade":"loop",rewind:!0},children:t.map((m,I)=>f.jsx(so,{children:f.jsx("div",{className:G.sliderItem,children:f.jsx("div",{className:G.imgWrapper,children:f.jsx("img",{className:de(G.sliderImage,{[G.contain]:m.image.objectFit==="contain",[G.cover]:m.image.objectFit==="cover"}),src:m.image.url,alt:m.image.name??""})})})},I))},M),A.isActive&&f.jsxs(f.Fragment,{children:[f.jsx("div",{className:de(G.arrow,{[G.arrowVertical]:E==="vert",[G.hoverArrow]:A.show==="on hover"}),style:{color:A.color,"--arrow-hover-color":A.hover},children:f.jsxs("button",{onClick:()=>{D("-1")},className:G.arrowInner,style:{transform:`translate(${_.scalingValue(B,n)}, ${_.scalingValue(U*(E==="horiz"?1:-1),n)}) scale(${e.controls.scale/100}) rotate(${E==="horiz"?"0deg":"90deg"})`},children:[A.arrowsImgUrl&&f.jsx(mt,{url:A.arrowsImgUrl,fill:A.color,hoverFill:A.hover,className:de(G.arrowImg,G.mirror)}),!A.arrowsImgUrl&&f.jsx(bn,{color:A.color,className:de(G.arrowIcon,G.arrowImg,G.mirror)})]})}),f.jsx("div",{className:de(G.arrow,G.nextArrow,{[G.arrowVertical]:E==="vert",[G.hoverArrow]:A.show==="on hover"}),style:{color:A.color,"--arrow-hover-color":A.hover},children:f.jsxs("button",{className:G.arrowInner,onClick:()=>D("+1"),style:{transform:`translate(${_.scalingValue(B*(E==="horiz"?-1:1),n)}, ${_.scalingValue(U,n)}) scale(${e.controls.scale/100}) rotate(${E==="horiz"?"0deg":"90deg"})`},children:[A.arrowsImgUrl&&f.jsx(mt,{url:A.arrowsImgUrl,fill:A.color,hoverFill:A.hover,className:G.arrowImg}),!A.arrowsImgUrl&&f.jsx(bn,{color:A.color,className:de(G.arrowIcon,G.arrowImg)})]})})]}),F.triggersList.click&&f.jsx("div",{className:G.clickOverlay,onClick:()=>{o&&o.go("+1")}}),R.isActive&&f.jsx("div",{className:de(G.pagination,{[G.paginationInsideBottom]:R.position==="inside-1"&&E==="horiz",[G.paginationInsideTop]:R.position==="inside-2"&&E==="horiz",[G.paginationOutsideBottom]:R.position==="outside-1"&&E==="horiz",[G.paginationOutsideTop]:R.position==="outside-2"&&E==="horiz",[G.paginationInsideLeft]:R.position==="inside-1"&&E==="vert",[G.paginationInsideRight]:R.position==="inside-2"&&E==="vert",[G.paginationOutsideLeft]:R.position==="outside-1"&&E==="vert",[G.paginationOutsideRight]:R.position==="outside-2"&&E==="vert",[G.paginationVertical]:E==="vert"}),children:f.jsx("div",{className:G.paginationInner,style:{backgroundColor:R.colors[2],transform:`scale(${R.scale/100}) translate(${_.scalingValue(R.offset.x,n)}, ${_.scalingValue(R.offset.y,n)}) rotate(${E==="horiz"?"0deg":"90deg"})`},children:t.map((m,I)=>f.jsx("button",{onClick:()=>{o&&o.go(I)},className:de(G.paginationItem),children:f.jsx("div",{className:de(G.dot,{[G.activeDot]:I===h}),style:{backgroundColor:I===h?R.colors[0]:R.colors[1],"--pagination-hover-color":R.hover}})},I))})})]})})}function bn({color:e,className:t}){return f.jsx("svg",{viewBox:"0 0 10 18",className:t,children:f.jsx("g",{id:"Symbols",stroke:"none",strokeWidth:"1",fillRule:"evenodd",children:f.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 wa={element:_a,id:"control-slider",name:"Slider",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/sliderImg.png"},defaultSize:{width:400,height:400},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:"outside-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"]}},Ta="Grid-module__grid___ERjjV",Ea="Grid-module__gridItem___4IevI",La="Grid-module__gridItemImageWrapper___oK-wZ",Aa="Grid-module__gridItemImage___X5zZm",Ia="Grid-module__gridItemContent___1oxCw",ka="Grid-module__gridItemTitle___fn5Jr",Fa="Grid-module__gridItemSubtitle___7Eme-",Ra="Grid-module__gridItemDescription___hT51l",Ue={grid:Ta,gridItem:Ea,gridItemImageWrapper:La,gridItemImage:Aa,gridItemContent:Ia,gridItemTitle:ka,gridItemSubtitle:Fa,gridItemDescription:Ra},Wa=({settings:e,content:t,styles:r,isEditor:n})=>{const o=e.grid??{},i={display:"grid",gridTemplateColumns:`repeat(${Math.max(1,Math.floor(o.entriesPerRow??3))}, 1fr)`,rowGap:_.scalingValue(o.rowGap,n),columnGap:_.scalingValue(o.columnGap,n)};return f.jsx("div",{className:Ue.grid,style:i,children:t.map((a,s)=>{var p,c,$,y,g,u,d,C,v,h;return a?f.jsxs(Va,{className:Ue.gridItem,link:n?void 0:a.link,children:[((p=a.image)==null?void 0:p.url)&&f.jsx("div",{className:Ue.gridItemImageWrapper,style:{aspectRatio:((c=e.media)==null?void 0:c.aspectRatioMode)==="fixed"?`${($=e.media)==null?void 0:$.aspectWidth} / ${(y=e.media)==null?void 0:y.aspectHeight}`:"auto"},children:f.jsx("img",{src:a.image.url,alt:a.image.name??"",className:Ue.gridItemImage,style:{objectFit:a.image.objectFit,maxWidth:((g=e.media)==null?void 0:g.widthType)==="fixed"?_.scalingValue(((u=e.media)==null?void 0:u.maxWidth)??0,n):"100%",...((d=e.media)==null?void 0:d.aspectRatioMode)==="fixed"&&{height:"100%"}}})}),f.jsxs("div",{className:Ue.gridItemContent,children:[a.title&&f.jsx("div",{className:Ue.gridItemTitle,style:br(r.title,((C=e.title)==null?void 0:C.marginTop)??0,n),"data-styles":"title",children:f.jsx(Tt,{content:a.title})}),a.subtitle&&f.jsx("div",{className:Ue.gridItemSubtitle,style:br(r.subtitle,((v=e.subtitle)==null?void 0:v.marginTop)??0,n),"data-styles":"subtitle",children:f.jsx(Tt,{content:a.subtitle})}),a.description&&f.jsx("div",{className:Ue.gridItemDescription,style:br(r.description,((h=e.description)==null?void 0:h.marginTop)??0,n),"data-styles":"description",children:f.jsx(Tt,{content:a.description})})]})]},s):null})})};function br(e,t,r){const{fontSettings:n,widthSettings:o,letterSpacing:l,textAlign:i,wordSpacing:a,fontSizeLineHeight:s,textAppearance:p,color:c}=e;return{fontFamily:n.fontFamily,fontWeight:n.fontWeight,fontStyle:n.fontStyle,width:o.sizing==="auto"?"100%":_.scalingValue(o.width,r),minWidth:0,letterSpacing:_.scalingValue(l,r),wordSpacing:_.scalingValue(a,r),textAlign:i,fontSize:_.scalingValue(s.fontSize,r),lineHeight:_.scalingValue(s.lineHeight,r),textTransform:p.textTransform??"none",textDecoration:p.textDecoration??"none",fontVariant:p.fontVariant??"normal",color:c,marginTop:_.scalingValue(t,r)}}function Va({children:e,link:t,className:r}){return t?f.jsx("a",{href:t,target:"_blank",rel:"noopener noreferrer",className:r,children:e}):f.jsx("div",{className:r,children:e})}const Sr={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"},xr={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"}},Ba={element:Wa,id:"grid",name:"Grid",preview:{type:"video",url:"https://cdn.cntrl.site/component-assets/Control-slider-preview.mp4"},defaultSize:{width:"100%",height:"100%"},schema:{type:"object",properties:{settings:{layoutBased:!0,type:"object",display:{type:"settings-block"},properties:{grid:{title:"grid",icon:"thumbnail",tooltip:"Grid",type:"object",properties:{entriesPerRow:{type:"number",min:1,max:40,label:"#PR",display:{type:"numeric-input"}},rowGap:{type:"number",scalingEnabled:!0,label:"RG",display:{type:"numeric-input"}},columnGap:{type:"number",scalingEnabled:!0,label:"CG",display:{type:"numeric-input"}}}},media:{title:"media",icon:"cover",tooltip:"Media",type:"object",properties:{widthType:{type:"string",display:{type:"ratio-group"},enum:["auto","fixed"]},maxWidth:{type:"number",min:0,label:"W",scalingEnabled:!0,display:{type:"numeric-input",visible:!1}},aspectRatioMode:{type:"string",display:{type:"ratio-group"},enum:["locked","original"]},aspectWidth:{type:"number",min:1,label:"AW",display:{type:"numeric-input",visible:!1}},aspectHeight:{type:"number",min:1,label:"AH",display:{type:"numeric-input",visible:!1}}}},title:{title:"title",icon:"text-icon",tooltip:"Title",type:"object",properties:{marginTop:{type:"number",scalingEnabled:!0,label:"MT",display:{type:"numeric-input"}}}},subtitle:{title:"subtitle",icon:"text-icon",tooltip:"Subtitle",type:"object",properties:{marginTop:{type:"number",scalingEnabled:!0,label:"MT",display:{type:"numeric-input"}}}},description:{title:"description",icon:"text-icon",tooltip:"Description",type:"object",properties:{marginTop:{type:"number",scalingEnabled:!0,label:"MT",display:{type:"numeric-input"}}}}},default:{grid:{entriesPerRow:3,rowGap:.05,columnGap:.005},media:{widthType:"auto",maxWidth:.5,aspectRatioMode:"original",aspectWidth:16,aspectHeight:9},title:{marginTop:0},subtitle:{marginTop:0},description:{marginTop:0}},displayRules:[{if:{name:"media.widthType",value:"fixed"},then:{name:"properties.media.properties.maxWidth.display.visible",value:!0}},{if:{name:"media.aspectRatioMode",value:"fixed"},then:{name:"properties.media.properties.aspectWidth.display.visible",value:!0}},{if:{name:"media.aspectRatioMode",value:"fixed"},then:{name:"properties.media.properties.aspectHeight.display.visible",value:!0}}]},content:{layoutBased:!1,type:"array",settings:{addItemFromFileExplorer:!1,defaultWidth:1408},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{minWidth:58,maxWidth:108,type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},title:{placeholder:"Add Title...",label:"Title",display:{type:"rich-text",minWidth:100,maxWidth:300}},subtitle:{placeholder:"Add Subtitle...",label:"Subtitle",display:{type:"rich-text",minWidth:100,maxWidth:300}},description:{placeholder:"Add Description...",label:"Description",display:{type:"rich-text",minWidth:100,maxWidth:300}},link:{type:"string",label:"URL",placeholder:"Enter link...",display:{type:"text-input",minWidth:200,maxWidth:400}}},required:["image"]},default:[{image:{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",objectFit:"cover"},title:[{type:"paragraph",children:[{text:"Connect devices to enhance productivity"}]}],subtitle:[{type:"paragraph",children:[{text:"Existence unfolds; meaning weaves itself into the fabric of awareness."}]}],description:[{type:"paragraph",children:[{text:""}]}],link:"https://www.google.com"},{image:{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-2.png",objectFit:"cover"},title:[{type:"paragraph",children:[{text:"Innovative solutions drive digital transformation"}]}],subtitle:[{type:"paragraph",children:[{text:"Knowing oneself unveils truth, while doubt illuminates paths unexplored."}]}],description:[{type:"paragraph",children:[{text:""}]}],link:"https://www.google.com"},{image:{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-3.png",objectFit:"cover"},title:[{type:"paragraph",children:[{text:"Data transforms our everyday life"}]}],subtitle:[{type:"paragraph",children:[{text:"Questions reveal truths that silence conceals. Understanding begins within."}]}],description:[{type:"paragraph",children:[{text:""}]}],link:"https://www.google.com"},{image:{url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQK9211QXBE9W284ZNKB8.png",objectFit:"cover"},title:[{type:"paragraph",children:[{text:"Existence questions the nature itself."}]}],subtitle:[{type:"paragraph",children:[{text:"Truth reflects the labyrinth of understanding woven into existence."}]}],description:[{type:"paragraph",children:[{text:""}]}],link:"https://www.google.com"}]},styles:{layoutBased:!0,type:"object",properties:{title:{dataName:"title",type:"object",properties:xr},subtitle:{dataName:"subtitle",type:"object",properties:xr},description:{dataName:"description",type:"object",properties:xr}},default:{title:Sr,subtitle:Sr,description:Sr}}}}},Pa="ImageRevealSlider-module__imageRevealSlider___UE5Ob",Na="ImageRevealSlider-module__image___Qjt-e",ja="ImageRevealSlider-module__link___N-iLG",Oa="ImageRevealSlider-module__cursor___2U03d",st={imageRevealSlider:Pa,image:Na,link:ja,cursor:Oa};function Sn(e,t,r){for(const n of r){const o=new Image;o.src=n.url;const l=n.width?Number.parseFloat(n.width):o.naturalWidth,i=o.naturalHeight/o.naturalWidth*l,a=l/2,s=i/2;if(e>=n.x-a&&e<=n.x+a&&t>=n.y-s&&t<=n.y+s)return!0}return!1}function Cr(e){return new Promise(t=>{const r=new Image;r.src=e,r.onload=()=>{t({width:r.naturalWidth,height:r.naturalHeight})}})}async function za(e,t,r,n){let o,l;if(t==="custom"){o=r;const i=await Cr(e);l=i.height/i.width*o}else if(t==="random"){o=Math.random()*(n.max-n.min)+n.min;const i=await Cr(e);l=i.height/i.width*o}else{const i=await Cr(e);o=i.width,l=i.height}return{width:o,height:l,finalWidth:`${o}px`}}function Ma({settings:e,content:t,isEditor:r}){const[n,o]=z.useState(null),[l,i]=z.useState([]),[a,s]=z.useState(0),p=z.useRef(0),[c,$]=z.useState({x:0,y:0}),[y,g]=z.useState(1),[u,d]=z.useState("none"),C=z.useRef({x:0,y:0}),[v,h]=z.useState(!1),{sizeType:w,imageWidth:M,randomRangeImageWidth:P}=e.imageSize,{revealPosition:E,visible:b}=e.position,{cursorType:A,target:R,defaultCursorScale:j,defaultCursor:F,hoverCursorScale:W,hoverCursor:B}=e.cursor;z.useEffect(()=>{if(!n)return;const m=(T,S)=>{const V=n.getBoundingClientRect(),X=T-V.left,oe=S-V.top;if($({x:X,y:oe}),A==="system"){d("none"),g(1);return}const Q=X,ue=oe,L=document.elementFromPoint(V.left+Q,V.top+ue);if(L&&L.closest("a")){d("none"),g(1);return}const K=Sn(Q,ue,l)||R==="area"?{img:B??"none",scale:W}:{img:F??"none",scale:j};d(K.img),g(K.scale)},I=T=>{T.stopPropagation(),C.current={x:T.clientX,y:T.clientY},m(T.clientX,T.clientY)},k=()=>{v&&m(C.current.x,C.current.y)};return n.addEventListener("mousemove",I),window.addEventListener("scroll",k,!0),()=>{n.removeEventListener("mousemove",I),window.removeEventListener("scroll",k,!0)}},[n,v,c,A,R,B,F,W,j,l]),z.useEffect(()=>{v||(d("none"),g(0))},[v]);const U=async(m,I,k,T={})=>{const{width:S,height:V,finalWidth:X}=await za(m.image.url,w,M,P);let oe=0,Q=0;E==="same"?(oe=I/2,Q=k/2):(oe=T.x??Math.random()*I,Q=T.y??Math.random()*k);const ue=Math.min(Math.max(oe,S/2),I-S/2),L=Math.min(Math.max(Q,V/2),k-V/2);return{id:p.current++,url:m.image.url,link:m.link,name:m.image.name,x:ue,y:L,width:X}};z.useEffect(()=>{if(!n||t.length===0)return;const m=n.getBoundingClientRect(),I=m.width,k=m.height,T=[];(async()=>{const V=t[0],X=await U(V,I,k);T.push(X),i(T),s(1)})()},[w,M,P,E,n]),z.useEffect(()=>{b==="last One"&&i(m=>m.length>0?[m[m.length-1]]:[])},[b]);const D=async m=>{if(!n)return;const I=n.getBoundingClientRect(),k=m.clientX-I.left,T=m.clientY-I.top;if(R==="image"&&!Sn(k,T,l))return;let S=0,V=0;E==="on Click"?(S=k,V=T):E==="same"?(S=I.width/2,V=I.height/2):(S=Math.random()*I.width,V=Math.random()*I.height);const X=t[a],oe=await U(X,I.width,I.height,{x:S,y:V});i(Q=>b==="all"?[...Q,oe]:[oe]),s(Q=>Q>=t.length-1?0:Q+1)};return f.jsxs("div",{ref:o,onClick:D,onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1),className:st.imageRevealSlider,style:{cursor:u==="none"?"default":"none"},children:[l.map(m=>f.jsx("div",{className:st.wrapper,style:{top:`${m.y}px`,left:`${m.x}px`,position:"absolute",transform:"translate(-50%, -50%)",width:m.width??"auto",height:"auto",cursor:u==="none"?"default":"none"},children:R==="area"&&m.link?f.jsx("a",{href:m.link,target:"_blank",className:st.link,children:f.jsx("img",{src:m.url,alt:m.name,className:st.image},m.id)}):f.jsx("img",{src:m.url,alt:m.name,className:st.image},m.id)},m.id)),v&&f.jsx("div",{className:st.cursor,style:{left:`${c.x}px`,top:`${c.y}px`,transform:`translate(-50%, -50%) scale(${y})`,backgroundImage:`url('${u}')`,backgroundSize:"cover",backgroundPosition:"center",position:"absolute",pointerEvents:"none"}})]})}const Ha={element:Ma,id:"control-image-reveal",name:"Click Gallery",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/clickGalleryImg.png"},defaultSize:{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:""}]}}}},Da="LightBox-module__hidden___9s-9x",Ua="LightBox-module__heroImage___sTxNF",Ga="LightBox-module__background___rm9ml",Ya="LightBox-module__editor___4ACaY",qa="LightBox-module__contentStyle___Bgnsq",Xa="LightBox-module__imageStyle___tLIlB",Ka="LightBox-module__imgWrapper___LuFUp",Ja="LightBox-module__contain___8-yaS",Za="LightBox-module__cover___hNvOG",Qa="LightBox-module__caption___b6L2I",el="LightBox-module__captionTextInner___rCGNH",tl="LightBox-module__lightboxSplide___XFuWC",rl="LightBox-module__arrow___iz38X",nl="LightBox-module__arrowVertical___Zfz81",ol="LightBox-module__nextArrow___zkAQN",il="LightBox-module__arrowInner___p48sW",al="LightBox-module__arrowIcon___3VaFf",ll="LightBox-module__arrowImg___pNV88",sl="LightBox-module__mirror___pjeXc",cl="LightBox-module__thumbsWrapper___GB-nU",ul="LightBox-module__thumbsContainerVertical___wttk5",pl="LightBox-module__thumbsContainer___osSma",dl="LightBox-module__thumbsAlignStart___MO6tY",gl="LightBox-module__thumbsAlignCenter___Q4sUx",ml="LightBox-module__thumbsAlignEnd___p4y9R",fl="LightBox-module__thumbItem___HvnF3",hl="LightBox-module__closeButton___g2khP",yl="LightBox-module__fadeIn___0m5GW",vl="LightBox-module__slideInLeft___gPYwC",bl="LightBox-module__slideInRight___S-pPp",Sl="LightBox-module__slideInTop___DFdAj",xl="LightBox-module__slideInBottom___m27kZ",Cl="LightBox-module__fadeOut___55qBR",$l="LightBox-module__slideOutLeft___NvU7P",_l="LightBox-module__slideOutRight___SK7eC",wl="LightBox-module__slideOutTop___Vgg0z",Tl="LightBox-module__slideOutBottom___nJ0Ef",El="LightBox-module__scaleSlide___vZriG",N={hidden:Da,heroImage:Ua,background:Ga,editor:Ya,contentStyle:qa,imageStyle:Xa,imgWrapper:Ka,contain:Ja,cover:Za,caption:Qa,captionTextInner:el,lightboxSplide:tl,arrow:rl,arrowVertical:nl,nextArrow:ol,arrowInner:il,arrowIcon:al,arrowImg:ll,mirror:sl,thumbsWrapper:cl,thumbsContainerVertical:ul,thumbsContainer:pl,thumbsAlignStart:dl,thumbsAlignCenter:gl,thumbsAlignEnd:ml,thumbItem:fl,closeButton:hl,fadeIn:yl,slideInLeft:vl,slideInRight:bl,slideInTop:Sl,slideInBottom:xl,fadeOut:Cl,slideOutLeft:$l,slideOutRight:_l,slideOutTop:wl,slideOutBottom:Tl,scaleSlide:El},Dt=(e,t,r)=>{const n={},[o,l]=e.split("-");return o==="top"?(n.top="0",n.bottom="auto"):o==="middle"?(n.top="50%",n.bottom="auto"):o==="bottom"&&(n.top="auto",n.bottom="0"),l==="left"?(n.left="0",n.right="auto"):l==="center"?(n.left="50%",n.right="auto"):l==="right"&&(n.left="auto",n.right="0"),o==="middle"&&l==="center"?n.transform=`translate(calc(-50% + ${_.scalingValue(t.x,r)}), calc(-50% + ${_.scalingValue(t.y,r)}))`:o==="middle"?n.transform=`translate(${_.scalingValue(t.x,r)}, calc(-50% + ${_.scalingValue(t.y,r)}))`:l==="center"?n.transform=`translate(calc(-50% + ${_.scalingValue(t.x,r)}), ${_.scalingValue(t.y,r)})`:n.transform=`translate(${_.scalingValue(t.x,r)}, ${_.scalingValue(t.y,r)})`,n};function co(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 xn(e){const t=e.getBoundingClientRect(),r=co(e),n=Math.max(0,t.width-r.left-r.right),o=Math.max(0,t.height-r.top-r.bottom),l=e.naturalWidth,i=e.naturalHeight,a=n/o,s=l/i;let p,c;s>a?(p=n,c=n/s):(c=o,p=o*s);const $=t.left+r.left,y=t.top+r.top,g=(n-p)/2+$,u=(o-c)/2+y;return{x:g,y:u,width:p,height:c}}function Cn(e){const t=e.getBoundingClientRect(),r=co(e);return{left:t.left+r.left,right:t.right-r.right,top:t.top+r.top,bottom:t.bottom-r.bottom}}function $n(e){const t=e.match(/rgba?\(([^)]+)\)/);if(t){const n=t[1].split(",").map(o=>parseFloat(o.trim()));return n.length===4?n[3]:1}const r=e.match(/^#([0-9a-fA-F]{8})$/);if(r){const n=r[1].substring(6,8);return parseInt(n,16)/255}return e.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/),1}function Ll(e,t){const r=(()=>{if(e==="fade in")return N.fadeIn;if(e==="slide in"||e==="mix")switch(t){case"left":return N.slideInLeft;case"right":return N.slideInRight;case"top":return N.slideInTop;case"bottom":return N.slideInBottom;default:return N.slideInRight}return N.fadeIn})(),n=(()=>{if(e==="fade in"||e==="mix")return N.fadeIn;if(e==="slide in")switch(t){case"left":return N.slideInLeft;case"right":return N.slideInRight;case"top":return N.slideInTop;case"bottom":return N.slideInBottom;default:return N.slideInRight}return N.fadeIn})(),o=(()=>{if(e==="fade in"||e==="mix")return N.fadeOut;if(e==="slide in")switch(t){case"left":return N.slideOutLeft;case"right":return N.slideOutRight;case"top":return N.slideOutTop;case"bottom":return N.slideOutBottom;default:return N.slideOutRight}return N.fadeOut})(),l=(()=>{if(e==="fade in")return N.fadeOut;if(e==="slide in"||e==="mix")switch(t){case"left":return N.slideOutLeft;case"right":return N.slideOutRight;case"top":return N.slideOutTop;case"bottom":return N.slideOutBottom;default:return N.slideOutRight}return N.fadeOut})();return{appearClass:r,backdropAppearClass:n,backdropDisappearClass:o,disappearClass:l}}const Al=({settings:e,content:t,styles:r,portalId:n,activeEvent:o,isEditor:l})=>{const[i,a]=z.useState(!1),{url:s}=e.thumbnailBlock.cover;return z.useEffect(()=>{o==="close"&&a(!1),o==="open"&&a(!0)},[o]),f.jsxs(f.Fragment,{children:[f.jsx("img",{src:s,alt:"Cover",className:N.heroImage,onClick:()=>a(!0)}),f.jsx(Il,{isOpen:i,onClose:()=>a(!1),content:t,settings:e,lightboxStyles:r,portalId:n,isEditor:l})]})},Il=({isOpen:e,onClose:t,content:r,lightboxStyles:n,settings:o,portalId:l,isEditor:i,metadata:a})=>{var O;const[s,p]=z.useState(0),[c,$]=z.useState(0),[y,g]=z.useState(!1),[u,d]=z.useState(!1),[C,v]=z.useState({}),h=z.useRef(null),w=z.useRef(null),M=z.useRef(null),P=z.useRef(!1),E=z.useRef(null),b=z.useRef(null),A=z.useRef(null),R=z.useRef(null),j=z.useRef(!1),F=z.useRef(null),[W,B]=z.useState(!1),{appear:U,triggers:D,slider:m,thumbnail:I,controls:k,area:T,caption:S,layout:V}=o.lightboxBlock,{appearClass:X,backdropAppearClass:oe,backdropDisappearClass:Q,disappearClass:ue}=Ll(U.type,U.direction),L=(a==null?void 0:a.itemId)??null;z.useEffect(()=>{const x=()=>{setTimeout(()=>{var Y,J;(J=(Y=h.current)==null?void 0:Y.splide)==null||J.refresh()},16)},H=()=>{$(Y=>Y+1)};return window.addEventListener("ArticleEditor.Layout:change",x),window.addEventListener("ArticleEditor.ComponentContent:change",H),()=>{window.removeEventListener("ArticleEditor.Layout:change",x),window.removeEventListener("ArticleEditor.ComponentContent:change",H)}},[]),z.useEffect(()=>{if(!e||!I.isActive){B(!1);return}const x=F.current;if(!x)return;const H=()=>{m.direction==="horiz"?B(x.scrollWidth>x.clientWidth):B(x.scrollHeight>x.clientHeight)};H();const Y=new ResizeObserver(H);return Y.observe(x),()=>Y.disconnect()},[e,I.isActive,r.length,C,m.direction]);const K=z.useCallback(()=>{const x=window.matchMedia("(max-width: 768px)").matches,H=$n(T.color);x&&!i&&H>.9&&(document.body.style.backgroundColor=""),g(!0),P.current=!0;const Y=J=>{J.target===E.current&&J.animationName&&(E.current&&b.current&&E.current.removeEventListener("animationend",b.current),b.current=null,P.current&&(P.current=!1,t()),g(!1))};E.current&&(b.current=Y,E.current.addEventListener("animationend",Y))},[t,T.color,i]),he=(x,H,Y)=>{var J,ne;if(x){if(D.type==="click"&&D.switch==="image")D.repeat==="close"&&s===r.length-1?K():(J=h.current)==null||J.go("+1");else if(D.type==="click"&&D.switch==="50/50"){const ee=x.getBoundingClientRect(),q=H-ee.left,re=Y-ee.top,ve=ee.width,le=ee.height;let pe;m.direction==="horiz"?pe=q<ve/2?"-1":"+1":pe=re<le/2?"-1":"+1",(ne=h.current)==null||ne.go(pe)}}},ie=x=>{if(j.current){j.current=!1;return}const H=r[s],Y=(H==null?void 0:H.image.objectFit)==="cover";let J,ne;if("changedTouches"in x&&x.changedTouches.length>0)J=x.changedTouches[0].clientX,ne=x.changedTouches[0].clientY;else if("clientX"in x)J=x.clientX,ne=x.clientY;else return;let ee;if(Y&&M.current){const q=Cn(M.current);ee=J>=q.left&&J<=q.right&&ne>=q.top&&ne<=q.bottom}else{const q=M.current?xn(M.current):null;if(!q){x.target===x.currentTarget&&K();return}ee=J>=q.x&&J<=q.x+q.width&&ne>=q.y&&ne<=q.y+q.height}ee?he(M.current,J,ne):K()},me=x=>{const H=x.target;(H.classList.contains(N.thumbsWrapper)||H.classList.contains(N.thumbsContainer))&&ie(x)};z.useEffect(()=>{if(!e)return;const x=H=>{var Y,J;if(H.key==="Escape"){K();return}if(H.key==="ArrowRight"){p(ne=>(ne+1)%Math.max(r.length,1)),(Y=h.current)==null||Y.go("+1");return}H.key==="ArrowLeft"&&(p(ne=>(ne-1+Math.max(r.length,1))%Math.max(r.length,1)),(J=h.current)==null||J.go("-1"))};return window.addEventListener("keydown",x),()=>{window.removeEventListener("keydown",x)}},[e,K,r.length]),z.useEffect(()=>{if(e){if(p(0),$(H=>H+1),P.current=!1,g(!1),d(!1),v({}),!L)return;const x=new CustomEvent("page-overlay",{detail:{itemId:L}});window.dispatchEvent(x)}return()=>{E.current&&b.current&&(E.current.removeEventListener("animationend",b.current),b.current=null),d(!1)}},[e,L]),z.useEffect(()=>{w.current!==null&&w.current!==m.type&&$(x=>x+1),w.current=m.type},[m.type]),z.useEffect(()=>{if(!e)return;const x=document.body.style.overflow,H=window.matchMedia("(max-width: 768px)").matches,Y=$n(T.color);document.body.style.overflow="hidden",d(!1);const J=ee=>{ee.target===E.current&&!P.current&&ee.animationName&&(H&&!i&&Y>.9&&(document.body.style.backgroundColor=T.color),d(!0),E.current&&A.current&&E.current.removeEventListener("animationend",A.current),A.current=null)};E.current&&(A.current=J,E.current.addEventListener("animationend",J));const ne=ee=>{const q=ee.target;q&&(q.closest(`.${N.thumbsWrapper}`)||q.closest(`.${N.thumbsContainer}`))||m.type!=="slide"&&ee.preventDefault()};return document.addEventListener("touchmove",ne,{passive:!1}),()=>{document.body.style.overflow=x,document.removeEventListener("touchmove",ne),E.current&&A.current&&(E.current.removeEventListener("animationend",A.current),A.current=null),d(!1)}},[e,i,T.color,m.type]),z.useEffect(()=>{if(!e)return;const x=H=>{var J,ne;if(P.current){H.stopPropagation();return}if(j.current){j.current=!1;return}const Y=H.target;if(!(Y&&(Y.closest(`.${N.thumbsContainer}`)||Y.closest(`.${N.thumbItem}`)))){if(m.type==="slide"&&D.type==="drag"&&((ne=(J=h.current)==null?void 0:J.splide)!=null&&ne.root)){const ee=h.current.splide.root;if(Y&&(ee.contains(Y)||ee===Y))return}if(H.touches.length===0&&H.changedTouches.length>0){const ee=r[s],q=(ee==null?void 0:ee.image.objectFit)==="cover",re=H.changedTouches[0];let ve;if(q&&M.current){const le=Cn(M.current);ve=re.clientX>=le.left&&re.clientX<=le.right&&re.clientY>=le.top&&re.clientY<=le.bottom}else{const le=M.current?xn(M.current):null;if(!le)return;ve=re.clientX>=le.x&&re.clientX<=le.x+le.width&&re.clientY>=le.y&&re.clientY<=le.y+le.height}if(!ve){H.stopPropagation(),P.current=!0;const le=pe=>{pe.stopPropagation(),pe.preventDefault(),document.removeEventListener("click",le,!0)};document.addEventListener("click",le,!0),K()}}}};return document.addEventListener("touchend",x,{passive:!0}),()=>{document.removeEventListener("touchend",x)}},[e,K,s,r]);const be=(m.type==="scale"||m.type==="fade")&&m.direction==="vert"&&D.type==="drag";z.useEffect(()=>{var pe,ke;if(!e||!be||!((ke=(pe=h.current)==null?void 0:pe.splide)!=null&&ke.root))return;const x=h.current.splide.root,H=30,Y=(te,se)=>{if(R.current){const Ce=Math.abs(te-R.current.x),He=Math.abs(se-R.current.y);(Ce>0||He>0)&&(j.current=!0)}},J=te=>{R.current&&(te.preventDefault(),Y(te.clientX,te.clientY))},ne=te=>{R.current&&te.touches.length>0&&(te.preventDefault(),Y(te.touches[0].clientX,te.touches[0].clientY))},ee=(te,se)=>{if(!R.current||!h.current){R.current=null;return}const Ce=Math.abs(te-R.current.x),He=Math.abs(se-R.current.y);He>H&&He>Ce&&h.current.go(se<R.current.y?"+1":"-1"),R.current=null},q=te=>{R.current&&ee(te.clientX,te.clientY),document.removeEventListener("pointerup",q),document.removeEventListener("pointercancel",q),document.removeEventListener("pointermove",J)},re=te=>{if(R.current){if(te.changedTouches.length>0){const se=te.changedTouches[0];ee(se.clientX,se.clientY)}document.removeEventListener("touchend",re),document.removeEventListener("touchcancel",re),document.removeEventListener("touchmove",ne)}},ve=te=>{R.current={x:te.clientX,y:te.clientY},j.current=!1,document.addEventListener("pointermove",J,{passive:!1}),document.addEventListener("pointerup",q),document.addEventListener("pointercancel",q)},le=te=>{te.touches.length>0&&(R.current={x:te.touches[0].clientX,y:te.touches[0].clientY},j.current=!1,document.addEventListener("touchmove",ne,{passive:!1}),document.addEventListener("touchend",re),document.addEventListener("touchcancel",re))};return x.addEventListener("pointerdown",ve),x.addEventListener("touchstart",le),()=>{x.removeEventListener("pointerdown",ve),x.removeEventListener("touchstart",le),document.removeEventListener("pointermove",J),document.removeEventListener("pointerup",q),document.removeEventListener("pointercancel",q),document.removeEventListener("touchmove",ne),document.removeEventListener("touchend",re),document.removeEventListener("touchcancel",re),R.current=null,j.current=!1}},[e,be,c]);const Me={backgroundColor:T.color,backdropFilter:`blur(${T.blur}px)`,animationDuration:`${parseInt(U.duration)}ms`,animationTimingFunction:"ease",animationFillMode:"both"};return typeof document>"u"||!document.getElementById(l)?null:ho.createPortal(f.jsxs(f.Fragment,{children:[f.jsx("div",{ref:i?null:E,className:de(N.background,y?Q:oe,{[N.editor]:i},{[N.hidden]:!e}),style:{...Me,...u&&!i&&!y?{position:"absolute"}:{}}}),f.jsxs("div",{ref:i?E:null,className:de(N.contentStyle,y?ue:X,{[N.editor]:i},{[N.hidden]:!e}),style:{animationDuration:`${parseInt(U.duration)}ms`,animationTimingFunction:"ease",animationFillMode:"both"},children:[f.jsx(lo,{onMove:x=>p(x.index),ref:h,className:N.lightboxSplide,options:{arrows:!1,speed:m.duration?parseInt(m.duration):500,direction:m.direction==="horiz"||m.type==="fade"||m.type==="scale"?"ltr":"ttb",pagination:!1,drag:D.type==="drag"&&!be,perPage:1,width:"100%",height:"100%",type:m.type==="fade"||m.type==="scale"?"fade":"loop",padding:0,rewind:D.repeat!=="close",start:0},style:{"--splide-speed":m.duration},children:r.map((x,H)=>{const Y=Dt(V.position,V.offset,i),J=`${_.scalingValue(V.padding.top,i)} ${_.scalingValue(V.padding.right,i)} ${_.scalingValue(V.padding.bottom,i)} ${_.scalingValue(V.padding.left,i)}`,ne=m.type==="scale"?(()=>{const{transform:ee,...q}=Y;return{...q,position:"absolute",padding:J,boxSizing:"border-box","--position-transform":ee||"none"}})():{...Y,position:"absolute",padding:J,boxSizing:"border-box"};return f.jsx(so,{children:f.jsx("div",{className:N.imgWrapper,onClick:ie,children:f.jsx("img",{ref:H===s?M:null,className:de(N.imageStyle,{[N.contain]:x.image.objectFit==="contain",[N.cover]:x.image.objectFit==="cover",[N.scaleSlide]:m.type==="scale"}),src:x.image.url,alt:x.image.name??"",style:{...ne,pointerEvents:x.image.objectFit==="contain"?"none":"auto"}})})},H)})},c),k.isActive&&f.jsxs(f.Fragment,{children:[f.jsx("div",{className:de(N.arrow,{[N.arrowVertical]:m.direction==="vert"}),style:{color:k.color,"--arrow-hover-color":k.hover},children:f.jsxs("button",{className:N.arrowInner,style:{transform:`translate(${_.scalingValue(k.offset.x,i)}, ${_.scalingValue(k.offset.y*(m.direction==="horiz"?1:-1),i)}) scale(${k.scale}) rotate(${m.direction==="horiz"?"0deg":"90deg"})`},onClick:()=>{var x;return(x=h.current)==null?void 0:x.go("-1")},"aria-label":"Previous",children:[k.arrowsImgUrl&&f.jsx(mt,{url:k.arrowsImgUrl,fill:k.color,hoverFill:k.hover,className:de(N.arrowImg,N.mirror)}),!k.arrowsImgUrl&&f.jsx(_n,{color:k.color,className:de(N.arrowIcon,N.arrowImg,N.mirror)})]})}),f.jsx("div",{className:de(N.arrow,N.nextArrow,{[N.arrowVertical]:m.direction==="vert"}),style:{color:k.color,"--arrow-hover-color":k.hover},children:f.jsxs("button",{className:N.arrowInner,style:{transform:`translate(${_.scalingValue(k.offset.x*(m.direction==="horiz"?-1:1),i)}, ${_.scalingValue(k.offset.y,i)}) scale(${k.scale}) rotate(${m.direction==="horiz"?"0deg":"90deg"})`},onClick:()=>{var x;return(x=h.current)==null?void 0:x.go("+1")},"aria-label":"Next",children:[k.arrowsImgUrl&&f.jsx(mt,{url:k.arrowsImgUrl,fill:k.color,hoverFill:k.hover,className:N.arrowImg}),!k.arrowsImgUrl&&f.jsx(_n,{color:k.color,className:de(N.arrowIcon,N.arrowImg)})]})})]}),T.closeIconUrl&&(()=>{const x=Dt(T.closeIconAlign,T.closeIconOffset,i),H=`scale(${T.closeIconScale})`,Y=x.transform?`${x.transform} ${H}`:H;return f.jsx("button",{className:N.closeButton,style:{...x,transform:Y},onClick:K,"aria-label":"Close lightbox",children:f.jsx(mt,{url:T.closeIconUrl,fill:T.closeIconColor??"#000000",hoverFill:T.closeIconHover??"#cccccc"})})})(),S&&S.isActive&&n.imageCaption&&((O=r[s])==null?void 0:O.imageCaption)&&(()=>{const{widthSettings:x,fontSettings:H,letterSpacing:Y,textAlign:J,wordSpacing:ne,fontSizeLineHeight:ee,textAppearance:q,color:re}=n.imageCaption;return f.jsx("div",{className:N.caption,style:{...Dt(S.alignment,S.offset,i),fontFamily:H.fontFamily,fontWeight:H.fontWeight,fontStyle:H.fontStyle,width:x.sizing==="auto"?"max-content":_.scalingValue(x.width,i),letterSpacing:_.scalingValue(Y,i),wordSpacing:_.scalingValue(ne,i),textAlign:J,fontSize:_.scalingValue(ee.fontSize,i),lineHeight:_.scalingValue(ee.lineHeight,i),textTransform:q.textTransform??"none",textDecoration:q.textDecoration??"none",fontVariant:q.fontVariant??"normal",color:re},onClick:ve=>ve.stopPropagation(),children:f.jsx("div",{"data-styles":"imageCaption",className:N.captionTextInner,style:{"--link-color":S.linkColor,"--link-hover-color":S.linkHoverColor},children:f.jsx(Tt,{content:r[s].imageCaption})})})})(),I.isActive&&(()=>{const[x,H]=I.position.split("-"),Y=m.direction==="horiz"?`${x}-left`:I.position,J=Dt(Y,I.offset,i),ne=()=>{if(m.direction==="horiz"){if(H==="left")return"flex-start";if(H==="center")return"center";if(H==="right")return"flex-end"}else{if(x==="top")return"flex-start";if(x==="middle")return"center";if(x==="bottom")return"flex-end"}return"flex-start"};return f.jsx("div",{ref:F,className:N.thumbsWrapper,onClick:ee=>me(ee),style:{position:i?"absolute":"fixed",...J,...m.direction==="horiz"?{maxWidth:"100vw",width:"100%",overflowX:"auto",overflowY:"hidden"}:{maxHeight:"100vh",overflowY:"auto",overflowX:"hidden"}},children:f.jsx("div",{className:de(N.thumbsContainer,{[N.thumbsContainerVertical]:m.direction==="vert",[N.thumbsAlignStart]:I.align==="start",[N.thumbsAlignCenter]:I.align==="center",[N.thumbsAlignEnd]:I.align==="end"}),style:{gap:_.scalingValue(I.grid.gap,i),justifyContent:W?"flex-start":ne()},children:r.map((ee,q)=>{const re=q===s,ve=C[q],pe=I.grid.size*(re?I.activeState.scale:1),ke=()=>{if(I.fit!=="fit")return{};if(!ve)return m.direction==="horiz"?{height:_.scalingValue(pe,i)}:{width:_.scalingValue(pe,i)};const te=ve.width/ve.height;if(m.direction==="horiz"){const se=pe,Ce=se*te;return{width:_.scalingValue(Ce,i),height:_.scalingValue(se,i)}}else{const se=pe,Ce=se/te;return{width:_.scalingValue(se,i),height:_.scalingValue(Ce,i)}}};return f.jsx("button",{className:N.thumbItem,style:{...m.direction==="horiz"&&I.fit!=="fit"?{height:_.scalingValue(pe,i)}:{},...m.direction==="vert"&&I.fit!=="fit"?{width:_.scalingValue(pe,i)}:{},...I.fit==="cover"?{width:_.scalingValue(pe,i),height:_.scalingValue(pe,i)}:{},...ke(),transition:re?"all 0.25s ease-out":"none",opacity:re?I.activeState.opacity/100:I.opacity/100,"--thumb-hover":I.activeState.opacity/100},onClick:te=>{var se;te.stopPropagation(),p(q),(se=h.current)==null||se.go(q)},onMouseEnter:()=>{var te;I.triggers==="hov"&&((te=h.current)==null||te.go(q))},children:f.jsx("img",{src:ee.image.url,alt:ee.image.name??"",onLoad:te=>{const se=te.currentTarget;se.naturalWidth&&se.naturalHeight&&v(Ce=>({...Ce,[q]:{width:se.naturalWidth,height:se.naturalHeight}}))},style:{objectFit:I.fit==="cover"?"cover":"contain",...I.fit==="fit"?{maxWidth:"100%",maxHeight:"100%",objectFit:"contain"}:{},...I.fit==="cover"?{width:"100%",height:"100%"}:{}}})},`${ee.image.name}-${q}`)})})})})()]})]}),document.getElementById(l))};function _n({color:e,className:t}){return f.jsx("svg",{viewBox:"0 0 10 18",className:t,children:f.jsx("g",{id:"Symbols",stroke:"none",strokeWidth:"1",fillRule:"evenodd",children:f.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 kl={element:Al,id:"lightbox",name:"Lightbox",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/lightboxImg.png"},defaultSize:{width:440,height:550},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 ft(e){const{color:t,...r}=e;return r}function et(e,t){var r,n,o;return{fontFamily:e.fontSettings.fontFamily,fontWeight:e.fontSettings.fontWeight,fontStyle:e.fontSettings.fontStyle,letterSpacing:_.scalingValue(e.letterSpacing,t),wordSpacing:_.scalingValue(e.wordSpacing,t),fontSize:_.scalingValue(e.fontSize,t),lineHeight:e.lineHeight!==void 0?_.scalingValue(e.lineHeight,t):void 0,textTransform:(r=e.textAppearance)==null?void 0:r.textTransform,textDecoration:(n=e.textAppearance)==null?void 0:n.textDecoration,fontVariant:(o=e.textAppearance)==null?void 0:o.fontVariant,color:e.color}}function Ut(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function Fl(e){return`
7
+ .${e}-wrapper {
8
8
  display: flex;
9
9
  flex-direction: column;
10
10
  width: 100%;
11
- min-height: ${He(48)};
11
+ min-height: ${Ut(48)};
12
12
  }
13
- .${t}-wrapper.${t}-type-C .${t}-input:focus-visible,
14
- .${t}-wrapper.${t}-type-C .${t}-button:focus-visible {
13
+ .${e}-wrapper.${e}-type-C .${e}-input:focus-visible,
14
+ .${e}-wrapper.${e}-type-C .${e}-button:focus-visible {
15
15
  outline: none;
16
16
  }
17
- .${t}-form {
17
+ .${e}-form {
18
18
  display: flex;
19
19
  flex-direction: column;
20
20
  width: 100%;
21
21
  }
22
- .${t}-fields {
22
+ .${e}-fields {
23
23
  display: flex;
24
24
  flex-direction: column;
25
25
  flex: 1;
26
26
  min-width: 0;
27
27
  }
28
- .${t}-field-group {
28
+ .${e}-field-group {
29
29
  display: flex;
30
30
  flex-direction: column;
31
31
  flex: 1;
32
32
  min-width: 0;
33
33
  }
34
- .${t}-field-group.${t}-labeled {
35
- gap: ${He(4)};
34
+ .${e}-field-group.${e}-labeled {
35
+ gap: ${Ut(4)};
36
36
  }
37
- .${t}-field-label {
37
+ .${e}-field-label {
38
38
  white-space: nowrap;
39
- color: var(--${t}-label-text-color);
39
+ color: var(--${e}-label-text-color);
40
40
  }
41
- .${t}-input {
41
+ .${e}-input {
42
42
  width: 100%;
43
43
  box-sizing: border-box;
44
44
  outline: none;
45
45
  -webkit-tap-highlight-color: transparent;
46
- background-color: var(--${t}-input-color);
47
- color: var(--${t}-input-text-color);
48
- border-color: var(--${t}-input-border-color);
46
+ background-color: var(--${e}-input-color);
47
+ color: var(--${e}-input-text-color);
48
+ border-color: var(--${e}-input-border-color);
49
49
  transition: color 250ms, border-color 250ms, background-color 250ms;
50
50
  }
51
- .${t}-input::placeholder {
52
- color: var(--${t}-placeholder-color);
51
+ .${e}-input::placeholder {
52
+ color: var(--${e}-placeholder-color);
53
53
  opacity: 1;
54
54
  transition: color 250ms, opacity 250ms;
55
55
  }
56
- .${t}-input:hover {
57
- background-color: var(--${t}-hover-input-color, var(--${t}-input-color));
58
- color: var(--${t}-hover-input-text-color, var(--${t}-input-text-color));
59
- border-color: var(--${t}-hover-input-border-color, var(--${t}-input-border-color));
60
- }
61
- .${t}-wrapper.${t}-state-hover .${t}-input {
62
- background-color: var(--${t}-hover-input-color, var(--${t}-input-color));
63
- color: var(--${t}-hover-input-text-color, var(--${t}-input-text-color));
64
- border-color: var(--${t}-hover-input-border-color, var(--${t}-input-border-color));
65
- }
66
- .${t}-input:focus,
67
- .${t}-input:focus-visible,
68
- .${t}-wrapper.${t}-state-focus .${t}-input {
69
- background-color: var(--${t}-focus-input-color, var(--${t}-input-color));
70
- color: var(--${t}-focus-input-text-color, var(--${t}-input-text-color));
71
- border-color: var(--${t}-focus-input-border-color, var(--${t}-input-border-color));
72
- }
73
- .${t}-input[data-filled="true"] {
74
- background-color: var(--${t}-filled-input-color, var(--${t}-input-color));
75
- color: var(--${t}-filled-input-text-color, var(--${t}-input-text-color));
76
- border-color: var(--${t}-filled-input-border-color, var(--${t}-input-border-color));
77
- }
78
- .${t}-wrapper.${t}-state-success .${t}-input,
79
- .${t}-wrapper.${t}-state-success .${t}-button {
80
- pointer-events: none;
81
- }
82
- .${t}-wrapper.${t}-state-error .${t}-input {
83
- }
84
- .${t}-input[data-field-type="textarea"] {
85
- resize: vertical;
86
- }
87
- .${t}-input:disabled {
88
- cursor: not-allowed;
89
- }
90
- .${t}-button {
91
- cursor: pointer;
92
- white-space: nowrap;
93
- box-sizing: border-box;
94
- outline: none;
95
- background-color: var(--${t}-button-color);
96
- color: var(--${t}-button-text-color);
97
- border-color: var(--${t}-button-border-color);
98
- transition: color 250ms, background-color 250ms, border-color 250ms;
99
- }
100
- .${t}-button:hover {
101
- background-color: var(--${t}-hover-button-color, var(--${t}-button-color));
102
- color: var(--${t}-hover-button-text-color, var(--${t}-button-text-color));
103
- border-color: var(--${t}-hover-button-border-color, var(--${t}-button-border-color));
104
- }
105
- .${t}-wrapper.${t}-state-hover .${t}-button {
106
- background-color: var(--${t}-hover-button-color, var(--${t}-button-color));
107
- color: var(--${t}-hover-button-text-color, var(--${t}-button-text-color));
108
- border-color: var(--${t}-hover-button-border-color, var(--${t}-button-border-color));
109
- }
110
- .${t}-button:focus,
111
- .${t}-button:focus-visible,
112
- .${t}-wrapper.${t}-state-focus .${t}-button {
113
- background-color: var(--${t}-focus-button-color, var(--${t}-button-color));
114
- color: var(--${t}-focus-button-text-color, var(--${t}-button-text-color));
115
- border-color: var(--${t}-focus-button-border-color, var(--${t}-button-border-color));
116
- }
117
- .${t}-input:focus-visible,
118
- .${t}-wrapper.${t}-state-focus .${t}-input {
119
- outline: none;
120
- }
121
- .${t}-button:focus-visible,
122
- .${t}-wrapper.${t}-state-focus .${t}-button {
123
- outline: none;
124
- }
125
- .${t}-success {
126
- margin-top: ${He(8)};
127
- color: var(--${t}-success-success-color, var(--${t}-success-color));
128
- }
129
- .${t}-error {
130
- margin-top: ${He(8)};
131
- color: var(--${t}-error-error-color, var(--${t}-error-color));
132
- }
133
- .${t}-overlay-anchor {
134
- position: relative;
135
- height: auto;
136
- }
137
- `}function bs({settings:t,isEditor:e,metadata:n,activeEvent:o}){const{prefix:r}=F.useScopedStyles(),{type:a="A",fieldsToShow:i=2,fields:c=[],buttonLabel:s,gap:p,fieldsGap:l,buttonCorners:w,buttonStroke:y,buttonPadding:m,isButtonFullWidth:u,inputCorners:d,inputStroke:C,inputPadding:b,inputColor:f,inputTextColor:$,inputBorderColor:M,placeholderColor:P,buttonColor:T,buttonTextColor:h,buttonBorderColor:L,labelTextColor:R,successColor:W,errorColor:k,fontFamily:B,inputFontSettings:O,inputFontSize:U,inputLineHeight:D,inputLetterSpacing:g,inputWordSpacing:A,inputTextAppearance:I,buttonFontSettings:_,buttonFontSize:v,buttonLineHeight:V,buttonLetterSpacing:X,buttonWordSpacing:rt,buttonTextAppearance:Q,labelFontSettings:ut,labelFontSize:E,labelLineHeight:K,labelLetterSpacing:ft,labelWordSpacing:it,labelTextAppearance:mt,statusFontSettings:bt,statusFontSize:Mt,statusLineHeight:z,statusLetterSpacing:S,statusWordSpacing:H,statusTextAppearance:G,successMessage:J,errorMessage:ot,stateOverrides:tt}=t,q=a==="B",nt=c.slice(0,Math.min(i,c.length)),vt={fontSettings:{fontFamily:B,fontWeight:(O==null?void 0:O.fontWeight)??400,fontStyle:(O==null?void 0:O.fontStyle)??"normal"},fontSize:U??.01,lineHeight:D,letterSpacing:g??0,wordSpacing:A??0,textAppearance:I,color:$},st=Zt(vt,e),pt=F.scalingValue(C??0,e),kt={...st,borderStyle:"solid",borderRadius:a==="C"?0:F.scalingValue(d??0,e),...a==="C"?{borderTopWidth:0,borderRightWidth:0,borderBottomWidth:pt,borderLeftWidth:0}:{borderWidth:pt},paddingTop:F.scalingValue((b==null?void 0:b.top)??0,e),paddingRight:F.scalingValue((b==null?void 0:b.right)??0,e),paddingBottom:F.scalingValue((b==null?void 0:b.bottom)??0,e),paddingLeft:F.scalingValue((b==null?void 0:b.left)??0,e)},et={fontSettings:{fontFamily:B,fontWeight:(_==null?void 0:_.fontWeight)??400,fontStyle:(_==null?void 0:_.fontStyle)??"normal"},fontSize:v??.01,lineHeight:V,letterSpacing:X??0,wordSpacing:rt??0,textAppearance:Q,color:h},lt=Zt(et,e),Ct=F.scalingValue(y??0,e),Ht={fontSettings:{fontFamily:B,fontWeight:(ut==null?void 0:ut.fontWeight)??400,fontStyle:(ut==null?void 0:ut.fontStyle)??"normal"},fontSize:E??.01,lineHeight:K,letterSpacing:ft??0,wordSpacing:it??0,textAppearance:mt,color:R},be=Zt(Ht,e),gn={fontSettings:{fontFamily:B,fontWeight:(bt==null?void 0:bt.fontWeight)??400,fontStyle:(bt==null?void 0:bt.fontStyle)??"normal"},fontSize:Mt??.01,lineHeight:z,letterSpacing:S??0,wordSpacing:H??0,textAppearance:G,color:W},ht=Zt(gn,e),{color:Se,...oe}=ht,$t=F.buildColorVars(r,{inputColor:f,inputTextColor:$,inputBorderColor:M,placeholderColor:P!=null&&P.trim()?P:"#cccccc",buttonColor:T,buttonTextColor:h,buttonBorderColor:L,labelTextColor:R,successColor:W,errorColor:k},Ss,xs,tt),[Ft,Kn]=j.useState(()=>Object.fromEntries(nt.map(ct=>[ct.name,""]))),[Jn,xe]=j.useState("idle"),[lr,ze]=j.useState(null),mn=o==="success"?"success":o==="error"?"error":Jn,cr=o==="error"?ot:lr,Ce=o==="filled"?Object.fromEntries(nt.map(ct=>[ct.name,"Filled"])):Ft,ur=mn==="error"?F.getFormFieldValidationError(nt,Ce):null,pr=`${o&&o!=="default"?`${r}-state-${o}`:""}`.trim(),Zn=n==null?void 0:n.submitUrl,Qn=(ct,re)=>{Kn(Dt=>({...Dt,[ct]:re}))},dr=async ct=>{ct.preventDefault();const re=Object.fromEntries(nt.map(Et=>{var ie;return[Et.name,((ie=Ft[Et.name])==null?void 0:ie.trim())??""]}).filter(([,Et])=>Et));if(!Zn){xe("error"),ze("No integrations were found for this form.");return}if(Object.keys(re).length===0)return;const Dt=F.getFormFieldValidationError(nt,Ft);if(Dt){xe("error"),ze(Dt);return}xe("submitting"),ze(null);try{const Et=await fetch(Zn,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(re)});if(!Et.ok){const ie=await Et.text();throw new Error(ie||`Request failed: ${Et.status}`)}xe("success"),Kn(Object.fromEntries(nt.map(ie=>[ie.name,""])))}catch(Et){xe("error"),ze(Et instanceof Error?Et.message:"Something went wrong")}};return x.jsxs("div",{className:`${r}-wrapper ${r}-type-${a} ${pr}`.trim(),style:$t,children:[x.jsx("style",{dangerouslySetInnerHTML:{__html:vs(r)}}),x.jsxs("form",{onSubmit:dr,className:`${r}-form`,style:{gap:F.scalingValue(p??0,e)},children:[x.jsx("div",{className:`${r}-fields`,style:{gap:F.scalingValue(l??0,e)},children:nt.map((ct,re)=>x.jsxs("div",{className:`${r}-field-group${q?` ${r}-labeled`:""}`,children:[q&&x.jsx("span",{className:`${r}-field-label`,style:be?{...be,lineHeight:be.fontSize}:void 0,children:ct.label||ct.name}),ct.type==="textarea"?x.jsx("textarea",{name:ct.name,autoComplete:"off",value:Ce[ct.name]??"",onChange:Dt=>Qn(ct.name,Dt.target.value),placeholder:ct.placeholder,className:`${r}-input`,style:kt,rows:1,"data-filled":(Ce[ct.name]??"").trim().length>0,"data-field-type":"textarea"}):x.jsx("input",{type:ct.type==="phone"?"tel":ct.type==="email"?"email":"text",name:ct.name,autoComplete:"off",value:Ce[ct.name]??"",onChange:Dt=>Qn(ct.name,Dt.target.value),placeholder:ct.placeholder,required:ct.isRequired??ct.type==="email",className:`${r}-input`,style:kt,"data-filled":(Ce[ct.name]??"").trim().length>0})]},re))}),x.jsx("div",{className:`${r}-overlay-anchor`,children:x.jsx("button",{type:"submit",className:`${r}-button`,style:{borderStyle:"solid",borderRadius:F.scalingValue(w??0,e),borderWidth:Ct,paddingTop:F.scalingValue((m==null?void 0:m.top)??0,e),paddingRight:F.scalingValue((m==null?void 0:m.right)??0,e),paddingBottom:F.scalingValue((m==null?void 0:m.bottom)??0,e),paddingLeft:F.scalingValue((m==null?void 0:m.left)??0,e),...lt,...u?{width:"100%",textAlign:"center",whiteSpace:"normal"}:{}},children:x.jsx("span",{className:`${r}-overlay-anchor`,style:u?{display:"inline-block",maxWidth:"100%",whiteSpace:"normal",textAlign:"center"}:void 0,children:Jn==="submitting"?"...":s})})})]}),mn==="success"&&x.jsx("p",{className:`${r}-success`,style:{...ht},children:J}),mn==="error"&&x.jsx("p",{className:`${r}-error`,style:{...oe},role:"alert",children:ur??cr??ot})]})}const Ss={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"},xs=["hover","focus","filled","success","error"],Cs=`import React, { useState } from 'react';
138
- import { CommonComponentProps } from '../props';
139
- import { buildColorVars, getFormFieldValidationError, scalingValue, useScopedStyles } from '../utils/index';
140
- import { textStylesToCss, type TextStyles } from '../utils/textStylesToCss';
141
-
142
- function sv(px: number): string {
143
- return \`calc(var(--cntrl-article-width, 100vw) * \${px / 1440})\`;
144
- }
145
-
146
- function getCSS(P: string): string {
147
- return \`
148
- .\${P}-wrapper {
149
- display: flex;
150
- flex-direction: column;
151
- width: 100%;
152
- min-height: \${sv(48)};
153
- }
154
- .\${P}-wrapper.\${P}-type-C .\${P}-input:focus-visible,
155
- .\${P}-wrapper.\${P}-type-C .\${P}-button:focus-visible {
156
- outline: none;
157
- }
158
- .\${P}-form {
159
- display: flex;
160
- flex-direction: column;
161
- width: 100%;
162
- }
163
- .\${P}-fields {
164
- display: flex;
165
- flex-direction: column;
166
- flex: 1;
167
- min-width: 0;
168
- }
169
- .\${P}-field-group {
170
- display: flex;
171
- flex-direction: column;
172
- flex: 1;
173
- min-width: 0;
174
- }
175
- .\${P}-field-group.\${P}-labeled {
176
- gap: \${sv(4)};
177
- }
178
- .\${P}-field-label {
179
- white-space: nowrap;
180
- color: var(--\${P}-label-text-color);
181
- }
182
- .\${P}-input {
183
- width: 100%;
184
- box-sizing: border-box;
185
- outline: none;
186
- -webkit-tap-highlight-color: transparent;
187
- background-color: var(--\${P}-input-color);
188
- color: var(--\${P}-input-text-color);
189
- border-color: var(--\${P}-input-border-color);
190
- transition: color 250ms, border-color 250ms, background-color 250ms;
191
- }
192
- .\${P}-input::placeholder {
193
- color: var(--\${P}-placeholder-color);
194
- opacity: 1;
195
- transition: color 250ms, opacity 250ms;
196
- }
197
- .\${P}-input:hover {
198
- background-color: var(--\${P}-hover-input-color, var(--\${P}-input-color));
199
- color: var(--\${P}-hover-input-text-color, var(--\${P}-input-text-color));
200
- border-color: var(--\${P}-hover-input-border-color, var(--\${P}-input-border-color));
201
- }
202
- .\${P}-wrapper.\${P}-state-hover .\${P}-input {
203
- background-color: var(--\${P}-hover-input-color, var(--\${P}-input-color));
204
- color: var(--\${P}-hover-input-text-color, var(--\${P}-input-text-color));
205
- border-color: var(--\${P}-hover-input-border-color, var(--\${P}-input-border-color));
206
- }
207
- .\${P}-input:focus,
208
- .\${P}-input:focus-visible,
209
- .\${P}-wrapper.\${P}-state-focus .\${P}-input {
210
- background-color: var(--\${P}-focus-input-color, var(--\${P}-input-color));
211
- color: var(--\${P}-focus-input-text-color, var(--\${P}-input-text-color));
212
- border-color: var(--\${P}-focus-input-border-color, var(--\${P}-input-border-color));
213
- }
214
- .\${P}-input[data-filled="true"] {
215
- background-color: var(--\${P}-filled-input-color, var(--\${P}-input-color));
216
- color: var(--\${P}-filled-input-text-color, var(--\${P}-input-text-color));
217
- border-color: var(--\${P}-filled-input-border-color, var(--\${P}-input-border-color));
218
- }
219
- .\${P}-wrapper.\${P}-state-success .\${P}-input,
220
- .\${P}-wrapper.\${P}-state-success .\${P}-button {
56
+ .${e}-input:hover {
57
+ background-color: var(--${e}-hover-input-color, var(--${e}-input-color));
58
+ color: var(--${e}-hover-input-text-color, var(--${e}-input-text-color));
59
+ border-color: var(--${e}-hover-input-border-color, var(--${e}-input-border-color));
60
+ }
61
+ .${e}-wrapper.${e}-state-hover .${e}-input {
62
+ background-color: var(--${e}-hover-input-color, var(--${e}-input-color));
63
+ color: var(--${e}-hover-input-text-color, var(--${e}-input-text-color));
64
+ border-color: var(--${e}-hover-input-border-color, var(--${e}-input-border-color));
65
+ }
66
+ .${e}-input:focus,
67
+ .${e}-input:focus-visible,
68
+ .${e}-wrapper.${e}-state-focus .${e}-input {
69
+ background-color: var(--${e}-focus-input-color, var(--${e}-input-color));
70
+ color: var(--${e}-focus-input-text-color, var(--${e}-input-text-color));
71
+ border-color: var(--${e}-focus-input-border-color, var(--${e}-input-border-color));
72
+ }
73
+ .${e}-input[data-filled="true"] {
74
+ background-color: var(--${e}-filled-input-color, var(--${e}-input-color));
75
+ color: var(--${e}-filled-input-text-color, var(--${e}-input-text-color));
76
+ border-color: var(--${e}-filled-input-border-color, var(--${e}-input-border-color));
77
+ }
78
+ .${e}-wrapper.${e}-state-filled .${e}-button {
79
+ background-color: var(--${e}-filled-button-color, var(--${e}-button-color));
80
+ color: var(--${e}-filled-button-text-color, var(--${e}-button-text-color));
81
+ border-color: var(--${e}-filled-button-border-color, var(--${e}-button-border-color));
82
+ }
83
+ .${e}-wrapper.${e}-state-success .${e}-input,
84
+ .${e}-wrapper.${e}-state-success .${e}-button {
221
85
  pointer-events: none;
222
86
  }
223
- .\${P}-wrapper.\${P}-state-error .\${P}-input {
87
+ .${e}-wrapper.${e}-state-error .${e}-input {
224
88
  }
225
- .\${P}-input[data-field-type="textarea"] {
89
+ .${e}-input[data-field-type="textarea"] {
226
90
  resize: vertical;
227
91
  }
228
- .\${P}-input:disabled {
92
+ .${e}-input:disabled {
229
93
  cursor: not-allowed;
230
94
  }
231
- .\${P}-button {
95
+ .${e}-button {
232
96
  cursor: pointer;
233
97
  white-space: nowrap;
234
98
  box-sizing: border-box;
235
99
  outline: none;
236
- background-color: var(--\${P}-button-color);
237
- color: var(--\${P}-button-text-color);
238
- border-color: var(--\${P}-button-border-color);
100
+ background-color: var(--${e}-button-color);
101
+ color: var(--${e}-button-text-color);
102
+ border-color: var(--${e}-button-border-color);
239
103
  transition: color 250ms, background-color 250ms, border-color 250ms;
240
104
  }
241
- .\${P}-button:hover {
242
- background-color: var(--\${P}-hover-button-color, var(--\${P}-button-color));
243
- color: var(--\${P}-hover-button-text-color, var(--\${P}-button-text-color));
244
- border-color: var(--\${P}-hover-button-border-color, var(--\${P}-button-border-color));
245
- }
246
- .\${P}-wrapper.\${P}-state-hover .\${P}-button {
247
- background-color: var(--\${P}-hover-button-color, var(--\${P}-button-color));
248
- color: var(--\${P}-hover-button-text-color, var(--\${P}-button-text-color));
249
- border-color: var(--\${P}-hover-button-border-color, var(--\${P}-button-border-color));
250
- }
251
- .\${P}-button:focus,
252
- .\${P}-button:focus-visible,
253
- .\${P}-wrapper.\${P}-state-focus .\${P}-button {
254
- background-color: var(--\${P}-focus-button-color, var(--\${P}-button-color));
255
- color: var(--\${P}-focus-button-text-color, var(--\${P}-button-text-color));
256
- border-color: var(--\${P}-focus-button-border-color, var(--\${P}-button-border-color));
257
- }
258
- .\${P}-input:focus-visible,
259
- .\${P}-wrapper.\${P}-state-focus .\${P}-input {
260
- outline: none;
261
- }
262
- .\${P}-button:focus-visible,
263
- .\${P}-wrapper.\${P}-state-focus .\${P}-button {
105
+ .${e}-button:hover {
106
+ background-color: var(--${e}-hover-button-color, var(--${e}-button-color));
107
+ color: var(--${e}-hover-button-text-color, var(--${e}-button-text-color));
108
+ border-color: var(--${e}-hover-button-border-color, var(--${e}-button-border-color));
109
+ }
110
+ .${e}-wrapper.${e}-state-hover .${e}-button {
111
+ background-color: var(--${e}-hover-button-color, var(--${e}-button-color));
112
+ color: var(--${e}-hover-button-text-color, var(--${e}-button-text-color));
113
+ border-color: var(--${e}-hover-button-border-color, var(--${e}-button-border-color));
114
+ }
115
+ .${e}-button:focus,
116
+ .${e}-button:focus-visible,
117
+ .${e}-wrapper.${e}-state-focus .${e}-button {
118
+ background-color: var(--${e}-focus-button-color, var(--${e}-button-color));
119
+ color: var(--${e}-focus-button-text-color, var(--${e}-button-text-color));
120
+ border-color: var(--${e}-focus-button-border-color, var(--${e}-button-border-color));
121
+ }
122
+ .${e}-input:focus-visible,
123
+ .${e}-wrapper.${e}-state-focus .${e}-input {
264
124
  outline: none;
265
125
  }
266
- .\${P}-success {
267
- margin-top: \${sv(8)};
268
- color: var(--\${P}-success-success-color, var(--\${P}-success-color));
269
- }
270
- .\${P}-error {
271
- margin-top: \${sv(8)};
272
- color: var(--\${P}-error-error-color, var(--\${P}-error-color));
273
- }
274
- .\${P}-overlay-anchor {
275
- position: relative;
276
- height: auto;
277
- }
278
- \`;
279
- }
280
-
281
- type FormProps = {
282
- settings: FormSettings;
283
- content?: unknown;
284
- isEditor?: boolean;
285
- activeEvent: string | undefined;
286
- onUpdateSettings?: (settings: FormSettings) => void;
287
- } & CommonComponentProps;
288
-
289
- export function Form({ settings, isEditor, metadata, activeEvent }: FormProps) {
290
- const { prefix: P } = useScopedStyles();
291
- const {
292
- type = 'A',
293
- fieldsToShow = 2,
294
- fields = [],
295
- buttonLabel,
296
- gap,
297
- fieldsGap,
298
- buttonCorners,
299
- buttonStroke,
300
- buttonPadding,
301
- isButtonFullWidth,
302
- inputCorners,
303
- inputStroke,
304
- inputPadding,
305
- inputColor,
306
- inputTextColor,
307
- inputBorderColor,
308
- placeholderColor,
309
- buttonColor,
310
- buttonTextColor,
311
- buttonBorderColor,
312
- labelTextColor,
313
- successColor,
314
- errorColor,
315
- fontFamily,
316
- inputFontSettings,
317
- inputFontSize,
318
- inputLineHeight,
319
- inputLetterSpacing,
320
- inputWordSpacing,
321
- inputTextAppearance,
322
- buttonFontSettings,
323
- buttonFontSize,
324
- buttonLineHeight,
325
- buttonLetterSpacing,
326
- buttonWordSpacing,
327
- buttonTextAppearance,
328
- labelFontSettings,
329
- labelFontSize,
330
- labelLineHeight,
331
- labelLetterSpacing,
332
- labelWordSpacing,
333
- labelTextAppearance,
334
- statusFontSettings,
335
- statusFontSize,
336
- statusLineHeight,
337
- statusLetterSpacing,
338
- statusWordSpacing,
339
- statusTextAppearance,
340
- successMessage,
341
- errorMessage: errorMessageText,
342
- stateOverrides,
343
- } = settings;
344
-
345
- const showLabels = type === 'B';
346
- const visibleFields = fields.slice(0, Math.min(fieldsToShow, fields.length));
347
-
348
- const resolvedInputTextStyle: TextStyles = {
349
- fontSettings: {
350
- fontFamily,
351
- fontWeight: inputFontSettings?.fontWeight ?? 400,
352
- fontStyle: inputFontSettings?.fontStyle ?? 'normal',
353
- },
354
- fontSize: inputFontSize ?? 0.01,
355
- lineHeight: inputLineHeight,
356
- letterSpacing: inputLetterSpacing ?? 0,
357
- wordSpacing: inputWordSpacing ?? 0,
358
- textAppearance: inputTextAppearance,
359
- color: inputTextColor,
360
- };
361
- const inputCss = textStylesToCss(resolvedInputTextStyle, isEditor);
362
- const strokeForInput = scalingValue(inputStroke ?? 0, isEditor);
363
- const inputFieldCss = {
364
- ...inputCss,
365
- borderStyle: 'solid',
366
- borderRadius: type === 'C' ? 0 : scalingValue(inputCorners ?? 0, isEditor),
367
- ...(type === 'C'
368
- ? {
369
- borderTopWidth: 0,
370
- borderRightWidth: 0,
371
- borderBottomWidth: strokeForInput,
372
- borderLeftWidth: 0,
373
- }
374
- : { borderWidth: strokeForInput }),
375
- paddingTop: scalingValue(inputPadding?.top ?? 0, isEditor),
376
- paddingRight: scalingValue(inputPadding?.right ?? 0, isEditor),
377
- paddingBottom: scalingValue(inputPadding?.bottom ?? 0, isEditor),
378
- paddingLeft: scalingValue(inputPadding?.left ?? 0, isEditor),
379
- } as React.CSSProperties;
380
-
381
- const resolvedButtonTextStyle: TextStyles = {
382
- fontSettings: {
383
- fontFamily,
384
- fontWeight: buttonFontSettings?.fontWeight ?? 400,
385
- fontStyle: buttonFontSettings?.fontStyle ?? 'normal',
386
- },
387
- fontSize: buttonFontSize ?? 0.01,
388
- lineHeight: buttonLineHeight,
389
- letterSpacing: buttonLetterSpacing ?? 0,
390
- wordSpacing: buttonWordSpacing ?? 0,
391
- textAppearance: buttonTextAppearance,
392
- color: buttonTextColor,
393
- };
394
- const buttonTextCss = textStylesToCss(resolvedButtonTextStyle, isEditor);
395
- const strokeForButton = scalingValue(buttonStroke ?? 0, isEditor);
396
-
397
- const resolvedLabelTextStyle: TextStyles = {
398
- fontSettings: {
399
- fontFamily,
400
- fontWeight: labelFontSettings?.fontWeight ?? 400,
401
- fontStyle: labelFontSettings?.fontStyle ?? 'normal',
402
- },
403
- fontSize: labelFontSize ?? 0.01,
404
- lineHeight: labelLineHeight,
405
- letterSpacing: labelLetterSpacing ?? 0,
406
- wordSpacing: labelWordSpacing ?? 0,
407
- textAppearance: labelTextAppearance,
408
- color: labelTextColor,
409
- };
410
- const labelTextCss = textStylesToCss(resolvedLabelTextStyle, isEditor);
411
-
412
- const resolvedStatusTextStyle: TextStyles = {
413
- fontSettings: {
414
- fontFamily,
415
- fontWeight: statusFontSettings?.fontWeight ?? 400,
416
- fontStyle: statusFontSettings?.fontStyle ?? 'normal',
417
- },
418
- fontSize: statusFontSize ?? 0.01,
419
- lineHeight: statusLineHeight,
420
- letterSpacing: statusLetterSpacing ?? 0,
421
- wordSpacing: statusWordSpacing ?? 0,
422
- textAppearance: statusTextAppearance,
423
- color: successColor,
424
- };
425
- const statusTextCss = textStylesToCss(resolvedStatusTextStyle, isEditor);
426
- const { color: _statusMessageColor, ...statusTypographyCss } = statusTextCss;
427
-
428
- const colorVars = buildColorVars(P, {
429
- inputColor,
430
- inputTextColor,
431
- inputBorderColor,
432
- placeholderColor: placeholderColor?.trim() ? placeholderColor : '#cccccc',
433
- buttonColor,
434
- buttonTextColor,
435
- buttonBorderColor,
436
- labelTextColor,
437
- successColor,
438
- errorColor,
439
- }, COLOR_VAR_MAP, STATE_KEYS, stateOverrides);
440
-
441
- const [fieldValues, setFieldValues] = useState<Record<string, string>>(() =>
442
- Object.fromEntries(visibleFields.map((f) => [f.name, '']))
443
- );
444
- const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
445
- const [errorMessage, setErrorMessage] = useState<string | null>(null);
446
-
447
- const displayStatus = activeEvent === 'success' ? 'success'
448
- : activeEvent === 'error' ? 'error'
449
- : status;
450
- const displayError = activeEvent === 'error' ? errorMessageText : errorMessage;
451
- const displayValues = activeEvent === 'filled'
452
- ? Object.fromEntries(visibleFields.map((f) => [f.name, 'Filled']))
453
- : fieldValues;
454
- const validationErrorMessage =
455
- displayStatus === 'error'
456
- ? getFormFieldValidationError(visibleFields, displayValues)
457
- : null;
458
- const stateClass = activeEvent && activeEvent !== 'default' ? \`\${P}-state-\${activeEvent}\` : '';
459
- const wrapperStateClasses = \`\${stateClass}\`.trim();
460
-
461
- const submitUrl = metadata?.submitUrl as string | undefined;
462
- const handleFieldChange = (name: string, value: string) => {
463
- setFieldValues((prev) => ({ ...prev, [name]: value }));
464
- };
465
-
466
- const handleSubmit = async (e: React.FormEvent) => {
467
- e.preventDefault();
468
- const payload = Object.fromEntries(
469
- visibleFields.map((f) => [f.name, fieldValues[f.name]?.trim() ?? '']).filter(([, v]) => v)
470
- );
471
- if (!submitUrl) {
472
- setStatus('error');
473
- setErrorMessage('No integrations were found for this form.');
474
- return;
475
- }
476
- if (Object.keys(payload).length === 0) return;
477
-
478
- const validationError = getFormFieldValidationError(visibleFields, fieldValues);
479
- if (validationError) {
480
- setStatus('error');
481
- setErrorMessage(validationError);
482
- return;
483
- }
484
-
485
- setStatus('submitting');
486
- setErrorMessage(null);
487
-
488
- try {
489
- const res = await fetch(submitUrl, {
490
- method: 'POST',
491
- headers: { 'Content-Type': 'application/json' },
492
- body: JSON.stringify(payload),
493
- });
494
- if (!res.ok) {
495
- const text = await res.text();
496
- throw new Error(text || \`Request failed: \${res.status}\`);
497
- }
498
-
499
- setStatus('success');
500
- setFieldValues(Object.fromEntries(visibleFields.map((f) => [f.name, ''])));
501
- } catch (err) {
502
- setStatus('error');
503
- setErrorMessage(err instanceof Error ? err.message : 'Something went wrong');
504
- }
505
- };
506
-
507
- return (
508
- <div className={\`\${P}-wrapper \${P}-type-\${type} \${wrapperStateClasses}\`.trim()} style={colorVars}>
509
- <style dangerouslySetInnerHTML={{ __html: getCSS(P) }} />
510
- <form
511
- onSubmit={handleSubmit}
512
- className={\`\${P}-form\`}
513
- style={{ gap: scalingValue(gap ?? 0, isEditor) }}
514
- >
515
- <div
516
- className={\`\${P}-fields\`}
517
- style={{ gap: scalingValue(fieldsGap ?? 0, isEditor) }}
518
- >
519
- {visibleFields.map((field, index) => (
520
- <div key={index} className={\`\${P}-field-group\${showLabels ? \` \${P}-labeled\` : ''}\`}>
521
- {showLabels && (
522
- <span className={\`\${P}-field-label\`} style={labelTextCss ? { ...labelTextCss, lineHeight: labelTextCss.fontSize } : undefined}>
523
- {field.label || field.name}
524
- </span>
525
- )}
526
- {field.type === 'textarea' ? (
527
- <textarea
528
- name={field.name}
529
- autoComplete="off"
530
- value={displayValues[field.name] ?? ''}
531
- onChange={(e) => handleFieldChange(field.name, e.target.value)}
532
- placeholder={field.placeholder}
533
- className={\`\${P}-input\`}
534
- style={inputFieldCss}
535
- rows={1}
536
- data-filled={((displayValues[field.name] ?? '') as string).trim().length > 0}
537
- data-field-type="textarea"
538
- />
539
- ) : (
540
- <input
541
- type={field.type === 'phone' ? 'tel' : field.type === 'email' ? 'email' : 'text'}
542
- name={field.name}
543
- autoComplete="off"
544
- value={displayValues[field.name] ?? ''}
545
- onChange={(e) => handleFieldChange(field.name, e.target.value)}
546
- placeholder={field.placeholder}
547
- required={field.isRequired ?? field.type === 'email'}
548
- className={\`\${P}-input\`}
549
- style={inputFieldCss}
550
- data-filled={((displayValues[field.name] ?? '') as string).trim().length > 0}
551
- />
552
- )}
553
- </div>
554
- ))}
555
- </div>
556
- <div className={\`\${P}-overlay-anchor\`}>
557
- <button
558
- type="submit"
559
- className={\`\${P}-button\`}
560
- style={{
561
- borderStyle: 'solid',
562
- borderRadius: scalingValue(buttonCorners ?? 0, isEditor),
563
- borderWidth: strokeForButton,
564
- paddingTop: scalingValue(buttonPadding?.top ?? 0, isEditor),
565
- paddingRight: scalingValue(buttonPadding?.right ?? 0, isEditor),
566
- paddingBottom: scalingValue(buttonPadding?.bottom ?? 0, isEditor),
567
- paddingLeft: scalingValue(buttonPadding?.left ?? 0, isEditor),
568
- ...buttonTextCss,
569
- ...(isButtonFullWidth
570
- ? {
571
- width: '100%',
572
- textAlign: 'center',
573
- whiteSpace: 'normal',
574
- }
575
- : {}),
576
- }}
577
- >
578
- <span
579
- className={\`\${P}-overlay-anchor\`}
580
- style={isButtonFullWidth
581
- ? {
582
- display: 'inline-block',
583
- maxWidth: '100%',
584
- whiteSpace: 'normal',
585
- textAlign: 'center',
586
- }
587
- : undefined}
588
- >
589
- {status === 'submitting' ? '...' : buttonLabel}
590
- </span>
591
- </button>
592
- </div>
593
- </form>
594
- {displayStatus === 'success' && (
595
- <p
596
- className={\`\${P}-success\`}
597
- style={{ ...statusTextCss }}
598
- >
599
- {successMessage}
600
- </p>
601
- )}
602
- {displayStatus === 'error' && (
603
- <p
604
- className={\`\${P}-error\`}
605
- style={{ ...statusTypographyCss }}
606
- role="alert"
607
- >
608
- {validationErrorMessage ?? displayError ?? errorMessageText}
609
- </p>
610
- )}
611
- </div>
612
- );
613
- }
614
-
615
- export type FormFieldType = 'text' | 'textarea' | 'phone' | 'email';
616
-
617
- export type FormFieldItem = {
618
- name: string;
619
- type: FormFieldType;
620
- placeholder: string;
621
- label?: string;
622
- isRequired?: boolean;
623
- error?: string;
624
- };
625
-
626
- type Padding = {
627
- top?: number;
628
- right?: number;
629
- bottom?: number;
630
- left?: number;
631
- };
632
-
633
- type ColorKeys =
634
- | 'inputColor'
635
- | 'inputTextColor'
636
- | 'inputBorderColor'
637
- | 'placeholderColor'
638
- | 'buttonColor'
639
- | 'buttonTextColor'
640
- | 'buttonBorderColor'
641
- | 'labelTextColor'
642
- | 'successColor'
643
- | 'errorColor';
644
-
645
- type StateColorOverrides = Partial<Record<ColorKeys, string>>;
646
-
647
- type FormSettings = {
648
- type: 'A' | 'B' | 'C';
649
- fontFamily: string;
650
- fieldsToShow: number;
651
- fields: FormFieldItem[];
652
- buttonLabel?: string;
653
- gap?: number;
654
- fieldsGap?: number;
655
- inputFontSettings?: { fontWeight: number; fontStyle: string };
656
- inputFontSize?: number;
657
- inputLineHeight?: number;
658
- inputLetterSpacing?: number;
659
- inputWordSpacing?: number;
660
- inputTextAppearance?: TextStyles['textAppearance'];
661
- buttonFontSettings?: { fontWeight: number; fontStyle: string };
662
- buttonFontSize?: number;
663
- buttonLineHeight?: number;
664
- buttonLetterSpacing?: number;
665
- buttonWordSpacing?: number;
666
- buttonTextAppearance?: TextStyles['textAppearance'];
667
- labelFontSettings?: { fontWeight: number; fontStyle: string };
668
- labelFontSize?: number;
669
- labelLineHeight?: number;
670
- labelLetterSpacing?: number;
671
- labelWordSpacing?: number;
672
- labelTextAppearance?: TextStyles['textAppearance'];
673
- statusFontSettings?: { fontWeight: number; fontStyle: string };
674
- statusFontSize?: number;
675
- statusLineHeight?: number;
676
- statusLetterSpacing?: number;
677
- statusWordSpacing?: number;
678
- statusTextAppearance?: TextStyles['textAppearance'];
679
- buttonCorners?: number;
680
- buttonStroke?: number;
681
- buttonPadding?: Padding;
682
- isButtonFullWidth?: boolean;
683
- inputCorners?: number;
684
- inputStroke?: number;
685
- inputPadding?: Padding;
686
- inputColor: string;
687
- inputTextColor: string;
688
- inputBorderColor: string;
689
- buttonColor: string;
690
- buttonTextColor: string;
691
- buttonBorderColor: string;
692
- placeholderColor: string;
693
- labelTextColor: string;
694
- successColor: string;
695
- errorColor: string;
696
- successMessage: string;
697
- errorMessage: string;
698
- stateOverrides?: Record<string, StateColorOverrides>;
699
- };
700
-
701
- const COLOR_VAR_MAP: Record<ColorKeys, string> = {
702
- inputColor: 'input-color',
703
- inputTextColor: 'input-text-color',
704
- inputBorderColor: 'input-border-color',
705
- placeholderColor: 'placeholder-color',
706
- buttonColor: 'button-color',
707
- buttonTextColor: 'button-text-color',
708
- buttonBorderColor: 'button-border-color',
709
- labelTextColor: 'label-text-color',
710
- successColor: 'success-color',
711
- errorColor: 'error-color',
712
- };
713
-
714
- const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
715
- `,$s=[{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"}],De={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},_s=["inputColor","inputTextColor","inputBorderColor","placeholderColor","buttonColor","buttonTextColor","buttonBorderColor","labelTextColor","successColor","errorColor"],ws={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:"range-control"},min:0,max:100},fieldsGap:{type:"number",scope:"layout",title:"Gap",display:{type:"range-control"},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:"range-control"},min:0,max:20},buttonCorners:{type:"number",scope:"layout",title:"Corners",display:{type:"range-control"},min:0,max:100},inputStroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"range-control"},min:0,max:20},inputCorners:{type:"number",scope:"layout",title:"Corners",display:{type:"range-control"},min:0,max:100},inputColor:{type:"string",scope:"common",title:"Input Fill",display:{type:"palette-color-picker"}},inputTextColor:{type:"string",scope:"common",title:"Input Label",display:{type:"palette-color-picker"}},inputBorderColor:{type:"string",scope:"common",title:"Input Stroke",display:{type:"palette-color-picker"}},placeholderColor:{type:"string",scope:"common",title:"Filler text",display:{type:"palette-color-picker"}},buttonColor:{type:"string",scope:"common",title:"Button Fill",display:{type:"palette-color-picker"}},buttonTextColor:{type:"string",scope:"common",title:"Button Label",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:"Button Stroke",display:{type:"palette-color-picker"}},labelTextColor:{type:"string",scope:"common",title:"Label Color",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:{...De.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:{...De.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:{...De.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:{...De.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:$s,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.visible",value:!1}},{if:{name:"type",value:"C"},then:{name:"properties.inputCorners.display.visible",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}}]},panels:[{id:"general",icon:"cursor",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name","fieldsToShow"]},"type",{type:"group",title:"",items:[{type:"row",title:"Input",items:[{type:"group",title:"",items:["fieldsGap","inputStroke","inputCorners"]},{type:"group",title:"",items:["inputPadding"]}]},{type:"group",title:"Button",items:[{type:"row",items:["isButtonFullWidth"]},{type:"row",items:[{type:"group",title:"",items:["gap","buttonStroke","buttonCorners"]},{type:"group",title:"",items:["buttonPadding"]}]}]}]}]},{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:[..._s],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"]},Ts={element:bs,id:"form",name:"Newsletter Stacked",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/formImg.png"},version:1,defaultSize:{width:300,height:42},schema:ws,sourceCode:Cs};function Ue(t){return`calc(var(--cntrl-article-width, 100vw) * ${t/1440})`}function Es(t){return`
716
- .${t}-wrapper {
717
- display: flex;
718
- flex-direction: column;
719
- width: 100%;
720
- height: 100%;
721
- align-items: stretch;
722
- justify-content: center;
723
- }
724
- .${t}-form {
725
- display: flex;
726
- width: 100%;
727
- align-items: stretch;
728
- overflow: hidden;
729
- border-color: var(--${t}-stroke-color);
730
- transition: border-color 250ms;
731
- }
732
- .${t}-form:hover {
733
- border-color: var(--${t}-hover-stroke-color, var(--${t}-stroke-color));
734
- }
735
- .${t}-form:focus-within {
736
- border-color: var(--${t}-focus-stroke-color, var(--${t}-stroke-color));
737
- }
738
- .${t}-wrapper.${t}-state-hover .${t}-form {
739
- border-color: var(--${t}-hover-stroke-color, var(--${t}-stroke-color));
740
- }
741
- .${t}-wrapper.${t}-state-focus .${t}-form {
742
- border-color: var(--${t}-focus-stroke-color, var(--${t}-stroke-color));
743
- }
744
- .${t}-wrapper.${t}-state-filled .${t}-form {
745
- border-color: var(--${t}-filled-stroke-color, var(--${t}-stroke-color));
746
- }
747
- .${t}-inputWrap {
748
- position: relative;
749
- display: flex;
750
- align-items: center;
751
- flex: 1;
752
- min-width: 0;
753
- background-color: var(--${t}-input-color);
754
- transition: background-color 250ms;
755
- }
756
- .${t}-inputWrap:hover,
757
- .${t}-wrapper.${t}-state-hover .${t}-inputWrap {
758
- background-color: var(--${t}-hover-input-color, var(--${t}-input-color));
759
- }
760
- .${t}-inputWrap:focus-within,
761
- .${t}-wrapper.${t}-state-focus .${t}-inputWrap {
762
- background-color: var(--${t}-focus-input-color, var(--${t}-input-color));
763
- }
764
- .${t}-wrapper.${t}-state-filled .${t}-inputWrap {
765
- background-color: var(--${t}-filled-input-color, var(--${t}-input-color));
766
- }
767
- .${t}-input {
768
- flex: 1;
769
- min-width: 0;
770
- background: transparent;
771
- border: none;
126
+ .${e}-button:focus-visible,
127
+ .${e}-wrapper.${e}-state-focus .${e}-button {
772
128
  outline: none;
773
- -webkit-tap-highlight-color: transparent;
774
- color: var(--${t}-input-text-color);
775
- transition: color 250ms, background-color 250ms, border-color 250ms;
776
- }
777
- .${t}-input:hover {
778
- color: var(--${t}-hover-input-text-color, var(--${t}-input-text-color));
779
129
  }
780
- .${t}-inputWrap:hover .${t}-input,
781
- .${t}-wrapper.${t}-state-hover .${t}-input {
782
- color: var(--${t}-hover-input-text-color, var(--${t}-input-text-color));
783
- }
784
- .${t}-input:focus,
785
- .${t}-wrapper.${t}-state-focus .${t}-input {
786
- color: var(--${t}-focus-input-text-color, var(--${t}-input-text-color));
787
- }
788
- .${t}-wrapper.${t}-state-filled .${t}-input {
789
- color: var(--${t}-filled-input-text-color, var(--${t}-input-text-color));
790
- }
791
- .${t}-input::placeholder {
792
- color: var(--${t}-placeholder-color);
793
- opacity: 1;
794
- transition: color 250ms, opacity 250ms;
795
- }
796
- .${t}-inputWrap:hover .${t}-input::placeholder,
797
- .${t}-wrapper.${t}-state-hover .${t}-input::placeholder {
798
- color: var(--${t}-hover-placeholder-color, var(--${t}-placeholder-color));
799
- }
800
- .${t}-inputWrap:focus-within .${t}-input::placeholder,
801
- .${t}-wrapper.${t}-state-focus .${t}-input::placeholder {
802
- color: var(--${t}-focus-placeholder-color, var(--${t}-placeholder-color));
803
- }
804
- .${t}-wrapper.${t}-state-filled .${t}-input::placeholder {
805
- color: var(--${t}-filled-placeholder-color, var(--${t}-placeholder-color));
806
- }
807
- .${t}-submitBtn {
808
- box-sizing: border-box;
809
- height: 100%;
810
- display: flex;
811
- align-items: center;
812
- justify-content: center;
813
- border: none;
814
- cursor: pointer;
815
- white-space: nowrap;
816
- background-color: var(--${t}-button-color);
817
- color: var(--${t}-button-text-color);
818
- border-left-style: solid;
819
- border-left-color: var(--${t}-stroke-color);
820
- transition: color 250ms, background-color 250ms, border-color 250ms;
821
- }
822
- .${t}-submitBtn img {
823
- display: block;
824
- box-sizing: border-box;
825
- flex: 0 1 auto;
826
- min-width: 0;
827
- height: 100%;
828
- width: auto;
829
- max-width: 100%;
830
- max-height: 100%;
831
- object-fit: contain;
130
+ .${e}-success {
131
+ margin-top: ${Ut(8)};
132
+ color: var(--${e}-success-success-color, var(--${e}-success-color));
832
133
  }
833
- .${t}-submitBtn svg {
834
- display: block;
835
- box-sizing: border-box;
836
- flex: 0 1 auto;
837
- min-width: 0;
838
- height: 100%;
839
- width: auto;
840
- max-width: 100%;
841
- max-height: 100%;
134
+ .${e}-error {
135
+ margin-top: ${Ut(8)};
136
+ color: var(--${e}-error-error-color, var(--${e}-error-color));
842
137
  }
843
- .${t}-submitBtn .${t}-submitBtnIcon {
138
+ .${e}-overlay-anchor {
844
139
  position: relative;
845
- top: auto;
846
- left: auto;
847
- transform: none;
848
- display: block;
849
- box-sizing: border-box;
850
- flex: 0 1 auto;
851
- align-self: stretch;
852
- min-width: 0;
853
- width: auto;
854
140
  height: auto;
855
- aspect-ratio: 1;
856
- max-width: 100%;
857
- max-height: 100%;
858
- }
859
- .${t}-submitBtn:hover,
860
- .${t}-wrapper.${t}-state-hover .${t}-submitBtn {
861
- background-color: var(--${t}-hover-button-color, var(--${t}-button-color));
862
- color: var(--${t}-hover-button-text-color, var(--${t}-button-text-color));
863
- border-left-color: var(--${t}-hover-stroke-color, var(--${t}-stroke-color));
864
- }
865
- .${t}-submitBtn:focus,
866
- .${t}-wrapper.${t}-state-focus .${t}-submitBtn {
867
- background-color: var(--${t}-focus-button-color, var(--${t}-button-color));
868
- color: var(--${t}-focus-button-text-color, var(--${t}-button-text-color));
869
- border-left-color: var(--${t}-focus-stroke-color, var(--${t}-stroke-color));
870
- }
871
- .${t}-wrapper.${t}-state-filled .${t}-submitBtn {
872
- background-color: var(--${t}-filled-button-color, var(--${t}-button-color));
873
- color: var(--${t}-filled-button-text-color, var(--${t}-button-text-color));
874
- border-left-color: var(--${t}-filled-stroke-color, var(--${t}-stroke-color));
875
- }
876
- .${t}-submitBtn:hover .${t}-submitBtnIcon,
877
- .${t}-wrapper.${t}-state-hover .${t}-submitBtn .${t}-submitBtnIcon {
878
- background-color: var(--${t}-hover-button-text-color, var(--${t}-button-text-color));
879
- }
880
- .${t}-submitBtn:focus .${t}-submitBtnIcon,
881
- .${t}-wrapper.${t}-state-focus .${t}-submitBtn .${t}-submitBtnIcon {
882
- background-color: var(--${t}-focus-button-text-color, var(--${t}-button-text-color));
883
- }
884
- .${t}-wrapper.${t}-state-filled .${t}-submitBtn .${t}-submitBtnIcon {
885
- background-color: var(--${t}-filled-button-text-color, var(--${t}-button-text-color));
886
- }
887
- .${t}-wrapper.${t}-state-success .${t}-input,
888
- .${t}-wrapper.${t}-state-success .${t}-submitBtn {
889
- pointer-events: none;
890
141
  }
891
- .${t}-overlayAnchor {
892
- position: relative;
893
- display: flex;
894
- align-items: center;
895
- }
896
- .${t}-success {
897
- margin-top: ${Ue(8)};
898
- font-size: ${Ue(14)};
899
- color: var(--${t}-success-success-color, var(--${t}-success-color));
900
- }
901
- .${t}-error {
902
- margin-top: ${Ue(8)};
903
- font-size: ${Ue(14)};
904
- color: var(--${t}-error-error-color, var(--${t}-error-color));
905
- }
906
- `}const Ls=({settings:t,isEditor:e,metadata:n,activeEvent:o})=>{const{prefix:r}=F.useScopedStyles(),{fields:a=[{name:"email",type:"email",placeholder:"Your email"}],buttonContent:i,buttonLabel:c,fieldsToShow:s=1,fontFamily:p,inputFontSettings:l,inputFontSize:w,inputLineHeight:y,inputLetterSpacing:m,inputWordSpacing:u,inputTextAppearance:d,buttonFontSettings:C,buttonFontSize:b,buttonLineHeight:f,buttonLetterSpacing:$,buttonWordSpacing:M,buttonTextAppearance:P,statusFontSettings:T,statusFontSize:h,statusLineHeight:L,statusLetterSpacing:R,statusWordSpacing:W,statusTextAppearance:k,minHeight:B,corners:O,stroke:U,stateOverrides:D,inputPadding:g,buttonPadding:A,successMessage:I="Thanks for subscribing!",errorMessage:_="Please, fill all required fields."}=t,v=a.slice(0,Math.min(s,a.length)),[V,X]=j.useState(()=>Object.fromEntries(v.map(ht=>[ht.name,""]))),[rt,Q]=j.useState("idle"),[ut,E]=j.useState(null),K=o==="success"?"success":o==="error"?"error":rt,ft=o==="error"?_:ut,it=o==="filled"?Object.fromEntries(v.map(ht=>[ht.name,"Filled"])):V,mt=K==="error"?F.getFormFieldValidationError(v,it):null,bt=o&&o!=="default"?`${r}-state-${o}`:"",Mt=v.some(ht=>(it[ht.name]??"").trim().length>0),z=bt!==`${r}-state-filled`&&Mt?`${r}-state-filled`:"",S=`${bt} ${z}`.trim(),H=n==null?void 0:n.submitUrl,G=c??"",J=(i==null?void 0:i.icon)??"",ot=(i==null?void 0:i.mode)==="On",tt=G||"Submit",q={fontSettings:{fontFamily:p,fontWeight:(l==null?void 0:l.fontWeight)??400,fontStyle:(l==null?void 0:l.fontStyle)??"normal"},fontSize:w??.01,lineHeight:y,letterSpacing:m??0,wordSpacing:u??0,textAppearance:d,color:t.inputTextColor??"#111111"},nt={fontSettings:{fontFamily:p,fontWeight:(C==null?void 0:C.fontWeight)??400,fontStyle:(C==null?void 0:C.fontStyle)??"normal"},fontSize:b??.01,lineHeight:f,letterSpacing:$??0,wordSpacing:M??0,textAppearance:P,color:t.buttonTextColor??"#ffffff"},vt={fontSettings:{fontFamily:p,fontWeight:(T==null?void 0:T.fontWeight)??400,fontStyle:(T==null?void 0:T.fontStyle)??"normal"},fontSize:h??.01,lineHeight:L,letterSpacing:R??0,wordSpacing:W??0,textAppearance:k,color:t.successColor??"#22c55e"},st=Zt(q,e),pt=Zt(nt,e),kt=Zt(vt,e),{color:et,...lt}=kt,Ct=F.buildColorVars(r,{strokeColor:t.strokeColor,inputColor:t.inputColor,placeholderColor:t.placeholderColor,buttonColor:t.buttonColor,successColor:t.successColor,errorColor:t.errorColor,inputTextColor:t.inputTextColor??(q==null?void 0:q.color)??"#111111",buttonTextColor:t.buttonTextColor??(nt==null?void 0:nt.color)??"#ffffff"},As,Is,D),Ht={borderRadius:F.scalingValue(O,e),borderWidth:F.scalingValue(U,e),borderStyle:"solid"},be={borderLeftWidth:F.scalingValue(U,e)},gn=async ht=>{ht.preventDefault();const Se=Object.fromEntries(v.map($t=>{var Ft;return[$t.name,((Ft=V[$t.name])==null?void 0:Ft.trim())??""]}).filter(([,$t])=>$t));if(!H){Q("error"),E("No integrations were found for this form.");return}if(Object.keys(Se).length===0)return;const oe=F.getFormFieldValidationError(v,V);if(oe){Q("error"),E(oe);return}Q("submitting"),E(null);try{const $t=await fetch(H,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(Se)});if(!$t.ok){const Ft=await $t.text();throw new Error(Ft||`Request failed: ${$t.status}`)}Q("success"),X(Object.fromEntries(v.map(Ft=>[Ft.name,""])))}catch($t){Q("error"),E($t instanceof Error?$t.message:"Something went wrong")}};return x.jsxs("div",{className:`${r}-wrapper ${S}`.trim(),style:Ct,children:[x.jsx("style",{dangerouslySetInnerHTML:{__html:Es(r)}}),x.jsxs("form",{onSubmit:gn,className:`${r}-form`,style:{...Ht,height:F.scalingValue(B,e),minHeight:F.scalingValue(B,e)},children:[x.jsx("div",{className:`${r}-inputWrap ${r}-overlayAnchor`,style:{flex:1,minWidth:0},children:v.map(ht=>x.jsx("input",{type:ht.type==="email"?"email":ht.type==="phone"?"tel":"text",name:ht.name,autoComplete:"off",value:it[ht.name]??"",onChange:Se=>X(oe=>({...oe,[ht.name]:Se.target.value})),placeholder:ht.placeholder,required:ht.isRequired??ht.type==="email",className:`${r}-input`,style:{...st,paddingRight:F.scalingValue(g.right,e),paddingLeft:F.scalingValue(g.left,e),paddingTop:F.scalingValue(g.top,e),paddingBottom:F.scalingValue(g.bottom,e)}},ht.name))}),x.jsx("div",{className:`${r}-overlayAnchor`,children:x.jsx("button",{type:"submit",className:`${r}-submitBtn`,"aria-label":tt,style:{...pt,...be,paddingRight:F.scalingValue(A.right,e),paddingLeft:F.scalingValue(A.left,e),paddingTop:F.scalingValue(A.top,e),paddingBottom:F.scalingValue(A.bottom,e)},children:rt==="submitting"?"...":ot?J&&x.jsx(de,{url:J,className:`${r}-submitBtnIcon`,fill:`var(--${r}-button-text-color)`,hoverFill:`var(--${r}-button-text-color)`}):G})})]}),K==="success"&&x.jsx("p",{className:`${r}-success`,style:{...kt},children:I}),K==="error"&&x.jsx("p",{className:`${r}-error`,style:{...lt},role:"alert",children:mt??ft??_})]})},As={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"},Is=["hover","focus","filled","success","error"],ks=`import React, { useState } from 'react';
907
- import { CommonComponentProps } from '../props';
908
- import { buildColorVars, getFormFieldValidationError, scalingValue, useScopedStyles } from '../utils/index';
909
- import { textStylesToCss, type TextStyles } from '../utils/textStylesToCss';
910
- import { SvgImage } from '../helpers/SvgImage/SvgImage';
911
-
912
- function sv(px: number): string {
913
- return \`calc(var(--cntrl-article-width, 100vw) * \${px / 1440})\`;
914
- }
915
-
916
- function getCSS(P: string): string {
917
- return \`
918
- .\${P}-wrapper {
142
+ `}function Rl({settings:e,isEditor:t,metadata:r,activeEvent:n}){const{prefix:o}=_.useScopedStyles(),{type:l="A",fieldsToShow:i=2,fields:a=[],buttonLabel:s,gap:p,fieldsGap:c,buttonCorners:$,buttonStroke:y,buttonPadding:g,isButtonFullWidth:u,inputCorners:d,inputStroke:C,inputPadding:v,inputColor:h,inputTextColor:w,inputBorderColor:M,placeholderColor:P,buttonColor:E,buttonTextColor:b,buttonBorderColor:A,labelTextColor:R,successColor:j,errorColor:F,fontFamily:W,inputFontSettings:B,inputFontSize:U,inputLineHeight:D,inputLetterSpacing:m,inputWordSpacing:I,inputTextAppearance:k,buttonFontSettings:T,buttonFontSize:S,buttonLineHeight:V,buttonLetterSpacing:X,buttonWordSpacing:oe,buttonTextAppearance:Q,labelFontSettings:ue,labelFontSize:L,labelLineHeight:K,labelLetterSpacing:he,labelWordSpacing:ie,labelTextAppearance:me,statusFontSettings:be,statusFontSize:Me,statusLineHeight:O,statusLetterSpacing:x,statusWordSpacing:H,statusTextAppearance:Y,successMessage:J,errorMessage:ne,stateOverrides:ee}=e,q=l==="B",re=a.slice(0,Math.min(i,a.length)),ve={fontSettings:{fontFamily:W,fontWeight:(B==null?void 0:B.fontWeight)??400,fontStyle:(B==null?void 0:B.fontStyle)??"normal"},fontSize:U??.01,lineHeight:D,letterSpacing:m??0,wordSpacing:I??0,textAppearance:k,color:w},le=ft(et(ve,t)),pe=_.scalingValue(C??0,t),ke={...le,borderStyle:"solid",borderRadius:l==="C"?0:_.scalingValue(d??0,t),...l==="C"?{borderTopWidth:0,borderRightWidth:0,borderBottomWidth:pe,borderLeftWidth:0}:{borderWidth:pe},paddingTop:_.scalingValue((v==null?void 0:v.top)??0,t),paddingRight:_.scalingValue((v==null?void 0:v.right)??0,t),paddingBottom:_.scalingValue((v==null?void 0:v.bottom)??0,t),paddingLeft:_.scalingValue((v==null?void 0:v.left)??0,t)},te={fontSettings:{fontFamily:W,fontWeight:(T==null?void 0:T.fontWeight)??400,fontStyle:(T==null?void 0:T.fontStyle)??"normal"},fontSize:S??.01,lineHeight:V,letterSpacing:X??0,wordSpacing:oe??0,textAppearance:Q,color:b},se=ft(et(te,t)),Ce=_.scalingValue(y??0,t),He={fontSettings:{fontFamily:W,fontWeight:(ue==null?void 0:ue.fontWeight)??400,fontStyle:(ue==null?void 0:ue.fontStyle)??"normal"},fontSize:L??.01,lineHeight:K,letterSpacing:he??0,wordSpacing:ie??0,textAppearance:me,color:R},fe=et(He,t),it={fontSettings:{fontFamily:W,fontWeight:(be==null?void 0:be.fontWeight)??400,fontStyle:(be==null?void 0:be.fontStyle)??"normal"},fontSize:Me??.01,lineHeight:O,letterSpacing:x??0,wordSpacing:H??0,textAppearance:Y,color:j},Ze=ft(et(it,t)),$e=_.buildColorVars(o,{inputColor:h,inputTextColor:w,inputBorderColor:M,placeholderColor:P!=null&&P.trim()?P:"#cccccc",buttonColor:E,buttonTextColor:b,buttonBorderColor:A,labelTextColor:R,successColor:j,errorColor:F},Wl,Vl,ee),[Fe,Qr]=z.useState(()=>Object.fromEntries(re.map(ce=>[ce.name,""]))),[en,Ct]=z.useState("idle"),[uo,Mt]=z.useState(null),mr=n==="success"?"success":n==="error"?"error":en,po=n==="error"?ne:uo,$t=n==="filled"?Object.fromEntries(re.map(ce=>[ce.name,"Filled"])):Fe,go=mr==="error"?_.getFormFieldValidationError(re,$t):null,mo=`${n&&n!=="default"?`${o}-state-${n}`:""}`.trim(),tn=r==null?void 0:r.submitUrl,rn=(ce,at)=>{Qr(De=>({...De,[ce]:at}))},fo=async ce=>{ce.preventDefault();const at=Object.fromEntries(re.map(Ee=>{var lt;return[Ee.name,((lt=Fe[Ee.name])==null?void 0:lt.trim())??""]}).filter(([,Ee])=>Ee));if(!tn){Ct("error"),Mt("No integrations were found for this form.");return}if(Object.keys(at).length===0)return;const De=_.getFormFieldValidationError(re,Fe);if(De){Ct("error"),Mt(De);return}Ct("submitting"),Mt(null);try{const Ee=await fetch(tn,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(at)});if(!Ee.ok){const lt=await Ee.text();throw new Error(lt||`Request failed: ${Ee.status}`)}Ct("success"),Qr(Object.fromEntries(re.map(lt=>[lt.name,""])))}catch(Ee){Ct("error"),Mt(Ee instanceof Error?Ee.message:"Something went wrong")}};return f.jsxs("div",{className:`${o}-wrapper ${o}-type-${l} ${mo}`.trim(),style:$e,children:[f.jsx("style",{dangerouslySetInnerHTML:{__html:Fl(o)}}),f.jsxs("form",{onSubmit:fo,className:`${o}-form`,style:{gap:_.scalingValue(p??0,t)},children:[f.jsx("div",{className:`${o}-fields`,style:{gap:_.scalingValue(c??0,t)},children:re.map((ce,at)=>f.jsxs("div",{className:`${o}-field-group${q?` ${o}-labeled`:""}`,children:[q&&f.jsx("span",{className:`${o}-field-label`,style:fe?{...fe,lineHeight:fe.fontSize}:void 0,children:ce.label||ce.name}),ce.type==="textarea"?f.jsx("textarea",{name:ce.name,autoComplete:"off",value:$t[ce.name]??"",onChange:De=>rn(ce.name,De.target.value),placeholder:ce.placeholder,className:`${o}-input`,style:ke,rows:1,"data-filled":($t[ce.name]??"").trim().length>0,"data-field-type":"textarea"}):f.jsx("input",{type:ce.type==="phone"?"tel":ce.type==="email"?"email":"text",name:ce.name,autoComplete:"off",value:$t[ce.name]??"",onChange:De=>rn(ce.name,De.target.value),placeholder:ce.placeholder,required:ce.isRequired??ce.type==="email",className:`${o}-input`,style:ke,"data-filled":($t[ce.name]??"").trim().length>0})]},at))}),f.jsx("div",{className:`${o}-overlay-anchor`,children:f.jsx("button",{type:"submit",className:`${o}-button`,style:{borderStyle:"solid",borderRadius:_.scalingValue($??0,t),borderWidth:Ce,paddingTop:_.scalingValue((g==null?void 0:g.top)??0,t),paddingRight:_.scalingValue((g==null?void 0:g.right)??0,t),paddingBottom:_.scalingValue((g==null?void 0:g.bottom)??0,t),paddingLeft:_.scalingValue((g==null?void 0:g.left)??0,t),...se,...u?{width:"100%",textAlign:"center",whiteSpace:"normal"}:{}},children:f.jsx("span",{className:`${o}-overlay-anchor`,style:u?{display:"inline-block",maxWidth:"100%",whiteSpace:"normal",textAlign:"center"}:void 0,children:en==="submitting"?"...":s})})})]}),mr==="success"&&f.jsx("p",{className:`${o}-success`,style:{...Ze},children:J}),mr==="error"&&f.jsx("p",{className:`${o}-error`,style:{...Ze},role:"alert",children:go??po??ne})]})}const Wl={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"},Vl=["hover","focus","filled","success","error"],Bl=`import React, { useState } from 'react';\r
143
+ import { CommonComponentProps } from '../props';\r
144
+ import { buildColorVars, getFormFieldValidationError, scalingValue, useScopedStyles } from '../utils/index';\r
145
+ import { omitTextColors, textStylesToCss, type TextStyles } from '../utils/textStylesToCss';\r
146
+ \r
147
+ function sv(px: number): string {\r
148
+ return \`calc(var(--cntrl-article-width, 100vw) * \${px / 1440})\`;\r
149
+ }\r
150
+ \r
151
+ function getCSS(P: string): string {\r
152
+ return \`\r
153
+ .\${P}-wrapper {\r
154
+ display: flex;\r
155
+ flex-direction: column;\r
156
+ width: 100%;\r
157
+ min-height: \${sv(48)};\r
158
+ }\r
159
+ .\${P}-wrapper.\${P}-type-C .\${P}-input:focus-visible,\r
160
+ .\${P}-wrapper.\${P}-type-C .\${P}-button:focus-visible {\r
161
+ outline: none;\r
162
+ }\r
163
+ .\${P}-form {\r
164
+ display: flex;\r
165
+ flex-direction: column;\r
166
+ width: 100%;\r
167
+ }\r
168
+ .\${P}-fields {\r
169
+ display: flex;\r
170
+ flex-direction: column;\r
171
+ flex: 1;\r
172
+ min-width: 0;\r
173
+ }\r
174
+ .\${P}-field-group {\r
175
+ display: flex;\r
176
+ flex-direction: column;\r
177
+ flex: 1;\r
178
+ min-width: 0;\r
179
+ }\r
180
+ .\${P}-field-group.\${P}-labeled {\r
181
+ gap: \${sv(4)};\r
182
+ }\r
183
+ .\${P}-field-label {\r
184
+ white-space: nowrap;\r
185
+ color: var(--\${P}-label-text-color);\r
186
+ }\r
187
+ .\${P}-input {\r
188
+ width: 100%;\r
189
+ box-sizing: border-box;\r
190
+ outline: none;\r
191
+ -webkit-tap-highlight-color: transparent;\r
192
+ background-color: var(--\${P}-input-color);\r
193
+ color: var(--\${P}-input-text-color);\r
194
+ border-color: var(--\${P}-input-border-color);\r
195
+ transition: color 250ms, border-color 250ms, background-color 250ms;\r
196
+ }\r
197
+ .\${P}-input::placeholder {\r
198
+ color: var(--\${P}-placeholder-color);\r
199
+ opacity: 1;\r
200
+ transition: color 250ms, opacity 250ms;\r
201
+ }\r
202
+ .\${P}-input:hover {\r
203
+ background-color: var(--\${P}-hover-input-color, var(--\${P}-input-color));\r
204
+ color: var(--\${P}-hover-input-text-color, var(--\${P}-input-text-color));\r
205
+ border-color: var(--\${P}-hover-input-border-color, var(--\${P}-input-border-color));\r
206
+ }\r
207
+ .\${P}-wrapper.\${P}-state-hover .\${P}-input {\r
208
+ background-color: var(--\${P}-hover-input-color, var(--\${P}-input-color));\r
209
+ color: var(--\${P}-hover-input-text-color, var(--\${P}-input-text-color));\r
210
+ border-color: var(--\${P}-hover-input-border-color, var(--\${P}-input-border-color));\r
211
+ }\r
212
+ .\${P}-input:focus,\r
213
+ .\${P}-input:focus-visible,\r
214
+ .\${P}-wrapper.\${P}-state-focus .\${P}-input {\r
215
+ background-color: var(--\${P}-focus-input-color, var(--\${P}-input-color));\r
216
+ color: var(--\${P}-focus-input-text-color, var(--\${P}-input-text-color));\r
217
+ border-color: var(--\${P}-focus-input-border-color, var(--\${P}-input-border-color));\r
218
+ }\r
219
+ .\${P}-input[data-filled="true"] {\r
220
+ background-color: var(--\${P}-filled-input-color, var(--\${P}-input-color));\r
221
+ color: var(--\${P}-filled-input-text-color, var(--\${P}-input-text-color));\r
222
+ border-color: var(--\${P}-filled-input-border-color, var(--\${P}-input-border-color));\r
223
+ }\r
224
+ .\${P}-wrapper.\${P}-state-filled .\${P}-button {\r
225
+ background-color: var(--\${P}-filled-button-color, var(--\${P}-button-color));\r
226
+ color: var(--\${P}-filled-button-text-color, var(--\${P}-button-text-color));\r
227
+ border-color: var(--\${P}-filled-button-border-color, var(--\${P}-button-border-color));\r
228
+ }\r
229
+ .\${P}-wrapper.\${P}-state-success .\${P}-input,\r
230
+ .\${P}-wrapper.\${P}-state-success .\${P}-button {\r
231
+ pointer-events: none;\r
232
+ }\r
233
+ .\${P}-wrapper.\${P}-state-error .\${P}-input {\r
234
+ }\r
235
+ .\${P}-input[data-field-type="textarea"] {\r
236
+ resize: vertical;\r
237
+ }\r
238
+ .\${P}-input:disabled {\r
239
+ cursor: not-allowed;\r
240
+ }\r
241
+ .\${P}-button {\r
242
+ cursor: pointer;\r
243
+ white-space: nowrap;\r
244
+ box-sizing: border-box;\r
245
+ outline: none;\r
246
+ background-color: var(--\${P}-button-color);\r
247
+ color: var(--\${P}-button-text-color);\r
248
+ border-color: var(--\${P}-button-border-color);\r
249
+ transition: color 250ms, background-color 250ms, border-color 250ms;\r
250
+ }\r
251
+ .\${P}-button:hover {\r
252
+ background-color: var(--\${P}-hover-button-color, var(--\${P}-button-color));\r
253
+ color: var(--\${P}-hover-button-text-color, var(--\${P}-button-text-color));\r
254
+ border-color: var(--\${P}-hover-button-border-color, var(--\${P}-button-border-color));\r
255
+ }\r
256
+ .\${P}-wrapper.\${P}-state-hover .\${P}-button {\r
257
+ background-color: var(--\${P}-hover-button-color, var(--\${P}-button-color));\r
258
+ color: var(--\${P}-hover-button-text-color, var(--\${P}-button-text-color));\r
259
+ border-color: var(--\${P}-hover-button-border-color, var(--\${P}-button-border-color));\r
260
+ }\r
261
+ .\${P}-button:focus,\r
262
+ .\${P}-button:focus-visible,\r
263
+ .\${P}-wrapper.\${P}-state-focus .\${P}-button {\r
264
+ background-color: var(--\${P}-focus-button-color, var(--\${P}-button-color));\r
265
+ color: var(--\${P}-focus-button-text-color, var(--\${P}-button-text-color));\r
266
+ border-color: var(--\${P}-focus-button-border-color, var(--\${P}-button-border-color));\r
267
+ }\r
268
+ .\${P}-input:focus-visible,\r
269
+ .\${P}-wrapper.\${P}-state-focus .\${P}-input {\r
270
+ outline: none;\r
271
+ }\r
272
+ .\${P}-button:focus-visible,\r
273
+ .\${P}-wrapper.\${P}-state-focus .\${P}-button {\r
274
+ outline: none;\r
275
+ }\r
276
+ .\${P}-success {\r
277
+ margin-top: \${sv(8)};\r
278
+ color: var(--\${P}-success-success-color, var(--\${P}-success-color));\r
279
+ }\r
280
+ .\${P}-error {\r
281
+ margin-top: \${sv(8)};\r
282
+ color: var(--\${P}-error-error-color, var(--\${P}-error-color));\r
283
+ }\r
284
+ .\${P}-overlay-anchor {\r
285
+ position: relative;\r
286
+ height: auto;\r
287
+ }\r
288
+ \`;\r
289
+ }\r
290
+ \r
291
+ type FormProps = {\r
292
+ settings: FormSettings;\r
293
+ content?: unknown;\r
294
+ isEditor?: boolean;\r
295
+ activeEvent: string | undefined;\r
296
+ onUpdateSettings?: (settings: FormSettings) => void;\r
297
+ } & CommonComponentProps;\r
298
+ \r
299
+ export function Form({ settings, isEditor, metadata, activeEvent }: FormProps) {\r
300
+ const { prefix: P } = useScopedStyles();\r
301
+ const {\r
302
+ type = 'A',\r
303
+ fieldsToShow = 2,\r
304
+ fields = [],\r
305
+ buttonLabel,\r
306
+ gap,\r
307
+ fieldsGap,\r
308
+ buttonCorners,\r
309
+ buttonStroke,\r
310
+ buttonPadding,\r
311
+ isButtonFullWidth,\r
312
+ inputCorners,\r
313
+ inputStroke,\r
314
+ inputPadding,\r
315
+ inputColor,\r
316
+ inputTextColor,\r
317
+ inputBorderColor,\r
318
+ placeholderColor,\r
319
+ buttonColor,\r
320
+ buttonTextColor,\r
321
+ buttonBorderColor,\r
322
+ labelTextColor,\r
323
+ successColor,\r
324
+ errorColor,\r
325
+ fontFamily,\r
326
+ inputFontSettings,\r
327
+ inputFontSize,\r
328
+ inputLineHeight,\r
329
+ inputLetterSpacing,\r
330
+ inputWordSpacing,\r
331
+ inputTextAppearance,\r
332
+ buttonFontSettings,\r
333
+ buttonFontSize,\r
334
+ buttonLineHeight,\r
335
+ buttonLetterSpacing,\r
336
+ buttonWordSpacing,\r
337
+ buttonTextAppearance,\r
338
+ labelFontSettings,\r
339
+ labelFontSize,\r
340
+ labelLineHeight,\r
341
+ labelLetterSpacing,\r
342
+ labelWordSpacing,\r
343
+ labelTextAppearance,\r
344
+ statusFontSettings,\r
345
+ statusFontSize,\r
346
+ statusLineHeight,\r
347
+ statusLetterSpacing,\r
348
+ statusWordSpacing,\r
349
+ statusTextAppearance,\r
350
+ successMessage,\r
351
+ errorMessage: errorMessageText,\r
352
+ stateOverrides,\r
353
+ } = settings;\r
354
+ \r
355
+ const showLabels = type === 'B';\r
356
+ const visibleFields = fields.slice(0, Math.min(fieldsToShow, fields.length));\r
357
+ \r
358
+ const resolvedInputTextStyle: TextStyles = {\r
359
+ fontSettings: {\r
360
+ fontFamily,\r
361
+ fontWeight: inputFontSettings?.fontWeight ?? 400,\r
362
+ fontStyle: inputFontSettings?.fontStyle ?? 'normal',\r
363
+ },\r
364
+ fontSize: inputFontSize ?? 0.01,\r
365
+ lineHeight: inputLineHeight,\r
366
+ letterSpacing: inputLetterSpacing ?? 0,\r
367
+ wordSpacing: inputWordSpacing ?? 0,\r
368
+ textAppearance: inputTextAppearance,\r
369
+ color: inputTextColor,\r
370
+ };\r
371
+ const inputTypographyCss = omitTextColors(textStylesToCss(resolvedInputTextStyle, isEditor));\r
372
+ const strokeForInput = scalingValue(inputStroke ?? 0, isEditor);\r
373
+ const inputFieldCss = {\r
374
+ ...inputTypographyCss,\r
375
+ borderStyle: 'solid',\r
376
+ borderRadius: type === 'C' ? 0 : scalingValue(inputCorners ?? 0, isEditor),\r
377
+ ...(type === 'C'\r
378
+ ? {\r
379
+ borderTopWidth: 0,\r
380
+ borderRightWidth: 0,\r
381
+ borderBottomWidth: strokeForInput,\r
382
+ borderLeftWidth: 0,\r
383
+ }\r
384
+ : { borderWidth: strokeForInput }),\r
385
+ paddingTop: scalingValue(inputPadding?.top ?? 0, isEditor),\r
386
+ paddingRight: scalingValue(inputPadding?.right ?? 0, isEditor),\r
387
+ paddingBottom: scalingValue(inputPadding?.bottom ?? 0, isEditor),\r
388
+ paddingLeft: scalingValue(inputPadding?.left ?? 0, isEditor),\r
389
+ } as React.CSSProperties;\r
390
+ \r
391
+ const resolvedButtonTextStyle: TextStyles = {\r
392
+ fontSettings: {\r
393
+ fontFamily,\r
394
+ fontWeight: buttonFontSettings?.fontWeight ?? 400,\r
395
+ fontStyle: buttonFontSettings?.fontStyle ?? 'normal',\r
396
+ },\r
397
+ fontSize: buttonFontSize ?? 0.01,\r
398
+ lineHeight: buttonLineHeight,\r
399
+ letterSpacing: buttonLetterSpacing ?? 0,\r
400
+ wordSpacing: buttonWordSpacing ?? 0,\r
401
+ textAppearance: buttonTextAppearance,\r
402
+ color: buttonTextColor,\r
403
+ };\r
404
+ const buttonTypographyCss = omitTextColors(textStylesToCss(resolvedButtonTextStyle, isEditor));\r
405
+ const strokeForButton = scalingValue(buttonStroke ?? 0, isEditor);\r
406
+ \r
407
+ const resolvedLabelTextStyle: TextStyles = {\r
408
+ fontSettings: {\r
409
+ fontFamily,\r
410
+ fontWeight: labelFontSettings?.fontWeight ?? 400,\r
411
+ fontStyle: labelFontSettings?.fontStyle ?? 'normal',\r
412
+ },\r
413
+ fontSize: labelFontSize ?? 0.01,\r
414
+ lineHeight: labelLineHeight,\r
415
+ letterSpacing: labelLetterSpacing ?? 0,\r
416
+ wordSpacing: labelWordSpacing ?? 0,\r
417
+ textAppearance: labelTextAppearance,\r
418
+ color: labelTextColor,\r
419
+ };\r
420
+ const labelTextCss = textStylesToCss(resolvedLabelTextStyle, isEditor);\r
421
+ \r
422
+ const resolvedStatusTextStyle: TextStyles = {\r
423
+ fontSettings: {\r
424
+ fontFamily,\r
425
+ fontWeight: statusFontSettings?.fontWeight ?? 400,\r
426
+ fontStyle: statusFontSettings?.fontStyle ?? 'normal',\r
427
+ },\r
428
+ fontSize: statusFontSize ?? 0.01,\r
429
+ lineHeight: statusLineHeight,\r
430
+ letterSpacing: statusLetterSpacing ?? 0,\r
431
+ wordSpacing: statusWordSpacing ?? 0,\r
432
+ textAppearance: statusTextAppearance,\r
433
+ color: successColor,\r
434
+ };\r
435
+ const statusTypographyCss = omitTextColors(textStylesToCss(resolvedStatusTextStyle, isEditor));\r
436
+ \r
437
+ const colorVars = buildColorVars(P, {\r
438
+ inputColor,\r
439
+ inputTextColor,\r
440
+ inputBorderColor,\r
441
+ placeholderColor: placeholderColor?.trim() ? placeholderColor : '#cccccc',\r
442
+ buttonColor,\r
443
+ buttonTextColor,\r
444
+ buttonBorderColor,\r
445
+ labelTextColor,\r
446
+ successColor,\r
447
+ errorColor,\r
448
+ }, COLOR_VAR_MAP, STATE_KEYS, stateOverrides);\r
449
+ \r
450
+ const [fieldValues, setFieldValues] = useState<Record<string, string>>(() =>\r
451
+ Object.fromEntries(visibleFields.map((f) => [f.name, '']))\r
452
+ );\r
453
+ const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');\r
454
+ const [errorMessage, setErrorMessage] = useState<string | null>(null);\r
455
+ \r
456
+ const displayStatus = activeEvent === 'success' ? 'success'\r
457
+ : activeEvent === 'error' ? 'error'\r
458
+ : status;\r
459
+ const displayError = activeEvent === 'error' ? errorMessageText : errorMessage;\r
460
+ const displayValues = activeEvent === 'filled'\r
461
+ ? Object.fromEntries(visibleFields.map((f) => [f.name, 'Filled']))\r
462
+ : fieldValues;\r
463
+ const validationErrorMessage =\r
464
+ displayStatus === 'error'\r
465
+ ? getFormFieldValidationError(visibleFields, displayValues)\r
466
+ : null;\r
467
+ const stateClass = activeEvent && activeEvent !== 'default' ? \`\${P}-state-\${activeEvent}\` : '';\r
468
+ const wrapperStateClasses = \`\${stateClass}\`.trim();\r
469
+ \r
470
+ const submitUrl = metadata?.submitUrl as string | undefined;\r
471
+ const handleFieldChange = (name: string, value: string) => {\r
472
+ setFieldValues((prev) => ({ ...prev, [name]: value }));\r
473
+ };\r
474
+ \r
475
+ const handleSubmit = async (e: React.FormEvent) => {\r
476
+ e.preventDefault();\r
477
+ const payload = Object.fromEntries(\r
478
+ visibleFields.map((f) => [f.name, fieldValues[f.name]?.trim() ?? '']).filter(([, v]) => v)\r
479
+ );\r
480
+ if (!submitUrl) {\r
481
+ setStatus('error');\r
482
+ setErrorMessage('No integrations were found for this form.');\r
483
+ return;\r
484
+ }\r
485
+ if (Object.keys(payload).length === 0) return;\r
486
+ \r
487
+ const validationError = getFormFieldValidationError(visibleFields, fieldValues);\r
488
+ if (validationError) {\r
489
+ setStatus('error');\r
490
+ setErrorMessage(validationError);\r
491
+ return;\r
492
+ }\r
493
+ \r
494
+ setStatus('submitting');\r
495
+ setErrorMessage(null);\r
496
+ \r
497
+ try {\r
498
+ const res = await fetch(submitUrl, {\r
499
+ method: 'POST',\r
500
+ headers: { 'Content-Type': 'application/json' },\r
501
+ body: JSON.stringify(payload),\r
502
+ });\r
503
+ if (!res.ok) {\r
504
+ const text = await res.text();\r
505
+ throw new Error(text || \`Request failed: \${res.status}\`);\r
506
+ }\r
507
+ \r
508
+ setStatus('success');\r
509
+ setFieldValues(Object.fromEntries(visibleFields.map((f) => [f.name, ''])));\r
510
+ } catch (err) {\r
511
+ setStatus('error');\r
512
+ setErrorMessage(err instanceof Error ? err.message : 'Something went wrong');\r
513
+ }\r
514
+ };\r
515
+ \r
516
+ return (\r
517
+ <div className={\`\${P}-wrapper \${P}-type-\${type} \${wrapperStateClasses}\`.trim()} style={colorVars}>\r
518
+ <style dangerouslySetInnerHTML={{ __html: getCSS(P) }} />\r
519
+ <form\r
520
+ onSubmit={handleSubmit}\r
521
+ className={\`\${P}-form\`}\r
522
+ style={{ gap: scalingValue(gap ?? 0, isEditor) }}\r
523
+ >\r
524
+ <div\r
525
+ className={\`\${P}-fields\`}\r
526
+ style={{ gap: scalingValue(fieldsGap ?? 0, isEditor) }}\r
527
+ >\r
528
+ {visibleFields.map((field, index) => (\r
529
+ <div key={index} className={\`\${P}-field-group\${showLabels ? \` \${P}-labeled\` : ''}\`}>\r
530
+ {showLabels && (\r
531
+ <span className={\`\${P}-field-label\`} style={labelTextCss ? { ...labelTextCss, lineHeight: labelTextCss.fontSize } : undefined}>\r
532
+ {field.label || field.name}\r
533
+ </span>\r
534
+ )}\r
535
+ {field.type === 'textarea' ? (\r
536
+ <textarea\r
537
+ name={field.name}\r
538
+ autoComplete="off"\r
539
+ value={displayValues[field.name] ?? ''}\r
540
+ onChange={(e) => handleFieldChange(field.name, e.target.value)}\r
541
+ placeholder={field.placeholder}\r
542
+ className={\`\${P}-input\`}\r
543
+ style={inputFieldCss}\r
544
+ rows={1}\r
545
+ data-filled={((displayValues[field.name] ?? '') as string).trim().length > 0}\r
546
+ data-field-type="textarea"\r
547
+ />\r
548
+ ) : (\r
549
+ <input\r
550
+ type={field.type === 'phone' ? 'tel' : field.type === 'email' ? 'email' : 'text'}\r
551
+ name={field.name}\r
552
+ autoComplete="off"\r
553
+ value={displayValues[field.name] ?? ''}\r
554
+ onChange={(e) => handleFieldChange(field.name, e.target.value)}\r
555
+ placeholder={field.placeholder}\r
556
+ required={field.isRequired ?? field.type === 'email'}\r
557
+ className={\`\${P}-input\`}\r
558
+ style={inputFieldCss}\r
559
+ data-filled={((displayValues[field.name] ?? '') as string).trim().length > 0}\r
560
+ />\r
561
+ )}\r
562
+ </div>\r
563
+ ))}\r
564
+ </div>\r
565
+ <div className={\`\${P}-overlay-anchor\`}>\r
566
+ <button\r
567
+ type="submit"\r
568
+ className={\`\${P}-button\`}\r
569
+ style={{\r
570
+ borderStyle: 'solid',\r
571
+ borderRadius: scalingValue(buttonCorners ?? 0, isEditor),\r
572
+ borderWidth: strokeForButton,\r
573
+ paddingTop: scalingValue(buttonPadding?.top ?? 0, isEditor),\r
574
+ paddingRight: scalingValue(buttonPadding?.right ?? 0, isEditor),\r
575
+ paddingBottom: scalingValue(buttonPadding?.bottom ?? 0, isEditor),\r
576
+ paddingLeft: scalingValue(buttonPadding?.left ?? 0, isEditor),\r
577
+ ...buttonTypographyCss,\r
578
+ ...(isButtonFullWidth\r
579
+ ? {\r
580
+ width: '100%',\r
581
+ textAlign: 'center',\r
582
+ whiteSpace: 'normal',\r
583
+ }\r
584
+ : {}),\r
585
+ }}\r
586
+ >\r
587
+ <span\r
588
+ className={\`\${P}-overlay-anchor\`}\r
589
+ style={isButtonFullWidth\r
590
+ ? {\r
591
+ display: 'inline-block',\r
592
+ maxWidth: '100%',\r
593
+ whiteSpace: 'normal',\r
594
+ textAlign: 'center',\r
595
+ }\r
596
+ : undefined}\r
597
+ >\r
598
+ {status === 'submitting' ? '...' : buttonLabel}\r
599
+ </span>\r
600
+ </button>\r
601
+ </div>\r
602
+ </form>\r
603
+ {displayStatus === 'success' && (\r
604
+ <p\r
605
+ className={\`\${P}-success\`}\r
606
+ style={{ ...statusTypographyCss }}\r
607
+ >\r
608
+ {successMessage}\r
609
+ </p>\r
610
+ )}\r
611
+ {displayStatus === 'error' && (\r
612
+ <p\r
613
+ className={\`\${P}-error\`}\r
614
+ style={{ ...statusTypographyCss }}\r
615
+ role="alert"\r
616
+ >\r
617
+ {validationErrorMessage ?? displayError ?? errorMessageText}\r
618
+ </p>\r
619
+ )}\r
620
+ </div>\r
621
+ );\r
622
+ }\r
623
+ \r
624
+ export type FormFieldType = 'text' | 'textarea' | 'phone' | 'email';\r
625
+ \r
626
+ export type FormFieldItem = {\r
627
+ name: string;\r
628
+ type: FormFieldType;\r
629
+ placeholder: string;\r
630
+ label?: string;\r
631
+ isRequired?: boolean;\r
632
+ error?: string;\r
633
+ };\r
634
+ \r
635
+ type Padding = {\r
636
+ top?: number;\r
637
+ right?: number;\r
638
+ bottom?: number;\r
639
+ left?: number;\r
640
+ };\r
641
+ \r
642
+ type ColorKeys =\r
643
+ | 'inputColor'\r
644
+ | 'inputTextColor'\r
645
+ | 'inputBorderColor'\r
646
+ | 'placeholderColor'\r
647
+ | 'buttonColor'\r
648
+ | 'buttonTextColor'\r
649
+ | 'buttonBorderColor'\r
650
+ | 'labelTextColor'\r
651
+ | 'successColor'\r
652
+ | 'errorColor';\r
653
+ \r
654
+ type StateColorOverrides = Partial<Record<ColorKeys, string>>;\r
655
+ \r
656
+ type FormSettings = {\r
657
+ type: 'A' | 'B' | 'C';\r
658
+ fontFamily: string;\r
659
+ fieldsToShow: number;\r
660
+ fields: FormFieldItem[];\r
661
+ buttonLabel?: string;\r
662
+ gap?: number;\r
663
+ fieldsGap?: number;\r
664
+ inputFontSettings?: { fontWeight: number; fontStyle: string };\r
665
+ inputFontSize?: number;\r
666
+ inputLineHeight?: number;\r
667
+ inputLetterSpacing?: number;\r
668
+ inputWordSpacing?: number;\r
669
+ inputTextAppearance?: TextStyles['textAppearance'];\r
670
+ buttonFontSettings?: { fontWeight: number; fontStyle: string };\r
671
+ buttonFontSize?: number;\r
672
+ buttonLineHeight?: number;\r
673
+ buttonLetterSpacing?: number;\r
674
+ buttonWordSpacing?: number;\r
675
+ buttonTextAppearance?: TextStyles['textAppearance'];\r
676
+ labelFontSettings?: { fontWeight: number; fontStyle: string };\r
677
+ labelFontSize?: number;\r
678
+ labelLineHeight?: number;\r
679
+ labelLetterSpacing?: number;\r
680
+ labelWordSpacing?: number;\r
681
+ labelTextAppearance?: TextStyles['textAppearance'];\r
682
+ statusFontSettings?: { fontWeight: number; fontStyle: string };\r
683
+ statusFontSize?: number;\r
684
+ statusLineHeight?: number;\r
685
+ statusLetterSpacing?: number;\r
686
+ statusWordSpacing?: number;\r
687
+ statusTextAppearance?: TextStyles['textAppearance'];\r
688
+ buttonCorners?: number;\r
689
+ buttonStroke?: number;\r
690
+ buttonPadding?: Padding;\r
691
+ isButtonFullWidth?: boolean;\r
692
+ inputCorners?: number;\r
693
+ inputStroke?: number;\r
694
+ inputPadding?: Padding;\r
695
+ inputColor: string;\r
696
+ inputTextColor: string;\r
697
+ inputBorderColor: string;\r
698
+ buttonColor: string;\r
699
+ buttonTextColor: string;\r
700
+ buttonBorderColor: string;\r
701
+ placeholderColor: string;\r
702
+ labelTextColor: string;\r
703
+ successColor: string;\r
704
+ errorColor: string;\r
705
+ successMessage: string;\r
706
+ errorMessage: string;\r
707
+ stateOverrides?: Record<string, StateColorOverrides>;\r
708
+ };\r
709
+ \r
710
+ const COLOR_VAR_MAP: Record<ColorKeys, string> = {\r
711
+ inputColor: 'input-color',\r
712
+ inputTextColor: 'input-text-color',\r
713
+ inputBorderColor: 'input-border-color',\r
714
+ placeholderColor: 'placeholder-color',\r
715
+ buttonColor: 'button-color',\r
716
+ buttonTextColor: 'button-text-color',\r
717
+ buttonBorderColor: 'button-border-color',\r
718
+ labelTextColor: 'label-text-color',\r
719
+ successColor: 'success-color',\r
720
+ errorColor: 'error-color',\r
721
+ };\r
722
+ \r
723
+ const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;\r
724
+ `,Pl=[{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"}],Gt={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},Nl=["inputColor","inputTextColor","inputBorderColor","placeholderColor","buttonColor","buttonTextColor","buttonBorderColor","labelTextColor","successColor","errorColor"],jl={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:"range-control"},min:0,max:100},fieldsGap:{type:"number",scope:"layout",title:"Gap",display:{type:"range-control"},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:"range-control"},min:0,max:20},buttonCorners:{type:"number",scope:"layout",title:"Corners",display:{type:"range-control"},min:0,max:100},inputStroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"range-control"},min:0,max:20},inputCorners:{type:"number",scope:"layout",title:"Corners",display:{type:"range-control"},min:0,max:100},inputColor:{type:"string",scope:"common",title:"Input Fill",display:{type:"palette-color-picker"}},inputTextColor:{type:"string",scope:"common",title:"Input Label",display:{type:"palette-color-picker"}},inputBorderColor:{type:"string",scope:"common",title:"Input Stroke",display:{type:"palette-color-picker"}},placeholderColor:{type:"string",scope:"common",title:"Filler text",display:{type:"palette-color-picker"}},buttonColor:{type:"string",scope:"common",title:"Button Fill",display:{type:"palette-color-picker"}},buttonTextColor:{type:"string",scope:"common",title:"Button Label",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:"Button Stroke",display:{type:"palette-color-picker"}},labelTextColor:{type:"string",scope:"common",title:"Label Color",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:{...Gt.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:{...Gt.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:{...Gt.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:{...Gt.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:Pl,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.visible",value:!1}},{if:{name:"type",value:"C"},then:{name:"properties.inputCorners.display.visible",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}}]},panels:[{id:"general",icon:"cursor",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name","fieldsToShow"]},"type",{type:"group",title:"",items:[{type:"row",title:"Input",items:[{type:"group",title:"",items:["fieldsGap","inputStroke","inputCorners"]},{type:"group",title:"",items:["inputPadding"]}]},{type:"group",title:"Button",items:[{type:"row",items:["isButtonFullWidth"]},{type:"row",items:[{type:"group",title:"",items:["gap","buttonStroke","buttonCorners"]},{type:"group",title:"",items:["buttonPadding"]}]}]}]}]},{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:[...Nl],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"]},Ol={element:Rl,id:"form",name:"Newsletter Stacked",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/formImg.png"},version:1,defaultSize:{width:300,height:42},schema:jl,sourceCode:Bl};function Yt(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function zl(e){return`
725
+ .${e}-wrapper {
919
726
  display: flex;
920
727
  flex-direction: column;
921
728
  width: 100%;
@@ -923,90 +730,90 @@ function getCSS(P: string): string {
923
730
  align-items: stretch;
924
731
  justify-content: center;
925
732
  }
926
- .\${P}-form {
733
+ .${e}-form {
927
734
  display: flex;
928
735
  width: 100%;
929
736
  align-items: stretch;
930
737
  overflow: hidden;
931
- border-color: var(--\${P}-stroke-color);
738
+ border-color: var(--${e}-stroke-color);
932
739
  transition: border-color 250ms;
933
740
  }
934
- .\${P}-form:hover {
935
- border-color: var(--\${P}-hover-stroke-color, var(--\${P}-stroke-color));
741
+ .${e}-form:hover {
742
+ border-color: var(--${e}-hover-stroke-color, var(--${e}-stroke-color));
936
743
  }
937
- .\${P}-form:focus-within {
938
- border-color: var(--\${P}-focus-stroke-color, var(--\${P}-stroke-color));
744
+ .${e}-form:focus-within {
745
+ border-color: var(--${e}-focus-stroke-color, var(--${e}-stroke-color));
939
746
  }
940
- .\${P}-wrapper.\${P}-state-hover .\${P}-form {
941
- border-color: var(--\${P}-hover-stroke-color, var(--\${P}-stroke-color));
747
+ .${e}-wrapper.${e}-state-hover .${e}-form {
748
+ border-color: var(--${e}-hover-stroke-color, var(--${e}-stroke-color));
942
749
  }
943
- .\${P}-wrapper.\${P}-state-focus .\${P}-form {
944
- border-color: var(--\${P}-focus-stroke-color, var(--\${P}-stroke-color));
750
+ .${e}-wrapper.${e}-state-focus .${e}-form {
751
+ border-color: var(--${e}-focus-stroke-color, var(--${e}-stroke-color));
945
752
  }
946
- .\${P}-wrapper.\${P}-state-filled .\${P}-form {
947
- border-color: var(--\${P}-filled-stroke-color, var(--\${P}-stroke-color));
753
+ .${e}-wrapper.${e}-state-filled .${e}-form {
754
+ border-color: var(--${e}-filled-stroke-color, var(--${e}-stroke-color));
948
755
  }
949
- .\${P}-inputWrap {
756
+ .${e}-inputWrap {
950
757
  position: relative;
951
758
  display: flex;
952
759
  align-items: center;
953
760
  flex: 1;
954
761
  min-width: 0;
955
- background-color: var(--\${P}-input-color);
762
+ background-color: var(--${e}-input-color);
956
763
  transition: background-color 250ms;
957
764
  }
958
- .\${P}-inputWrap:hover,
959
- .\${P}-wrapper.\${P}-state-hover .\${P}-inputWrap {
960
- background-color: var(--\${P}-hover-input-color, var(--\${P}-input-color));
765
+ .${e}-inputWrap:hover,
766
+ .${e}-wrapper.${e}-state-hover .${e}-inputWrap {
767
+ background-color: var(--${e}-hover-input-color, var(--${e}-input-color));
961
768
  }
962
- .\${P}-inputWrap:focus-within,
963
- .\${P}-wrapper.\${P}-state-focus .\${P}-inputWrap {
964
- background-color: var(--\${P}-focus-input-color, var(--\${P}-input-color));
769
+ .${e}-inputWrap:focus-within,
770
+ .${e}-wrapper.${e}-state-focus .${e}-inputWrap {
771
+ background-color: var(--${e}-focus-input-color, var(--${e}-input-color));
965
772
  }
966
- .\${P}-wrapper.\${P}-state-filled .\${P}-inputWrap {
967
- background-color: var(--\${P}-filled-input-color, var(--\${P}-input-color));
773
+ .${e}-wrapper.${e}-state-filled .${e}-inputWrap {
774
+ background-color: var(--${e}-filled-input-color, var(--${e}-input-color));
968
775
  }
969
- .\${P}-input {
776
+ .${e}-input {
970
777
  flex: 1;
971
778
  min-width: 0;
972
779
  background: transparent;
973
780
  border: none;
974
781
  outline: none;
975
782
  -webkit-tap-highlight-color: transparent;
976
- color: var(--\${P}-input-text-color);
783
+ color: var(--${e}-input-text-color);
977
784
  transition: color 250ms, background-color 250ms, border-color 250ms;
978
785
  }
979
- .\${P}-input:hover {
980
- color: var(--\${P}-hover-input-text-color, var(--\${P}-input-text-color));
786
+ .${e}-input:hover {
787
+ color: var(--${e}-hover-input-text-color, var(--${e}-input-text-color));
981
788
  }
982
- .\${P}-inputWrap:hover .\${P}-input,
983
- .\${P}-wrapper.\${P}-state-hover .\${P}-input {
984
- color: var(--\${P}-hover-input-text-color, var(--\${P}-input-text-color));
789
+ .${e}-inputWrap:hover .${e}-input,
790
+ .${e}-wrapper.${e}-state-hover .${e}-input {
791
+ color: var(--${e}-hover-input-text-color, var(--${e}-input-text-color));
985
792
  }
986
- .\${P}-input:focus,
987
- .\${P}-wrapper.\${P}-state-focus .\${P}-input {
988
- color: var(--\${P}-focus-input-text-color, var(--\${P}-input-text-color));
793
+ .${e}-input:focus,
794
+ .${e}-wrapper.${e}-state-focus .${e}-input {
795
+ color: var(--${e}-focus-input-text-color, var(--${e}-input-text-color));
989
796
  }
990
- .\${P}-wrapper.\${P}-state-filled .\${P}-input {
991
- color: var(--\${P}-filled-input-text-color, var(--\${P}-input-text-color));
797
+ .${e}-wrapper.${e}-state-filled .${e}-input {
798
+ color: var(--${e}-filled-input-text-color, var(--${e}-input-text-color));
992
799
  }
993
- .\${P}-input::placeholder {
994
- color: var(--\${P}-placeholder-color);
800
+ .${e}-input::placeholder {
801
+ color: var(--${e}-placeholder-color);
995
802
  opacity: 1;
996
803
  transition: color 250ms, opacity 250ms;
997
804
  }
998
- .\${P}-inputWrap:hover .\${P}-input::placeholder,
999
- .\${P}-wrapper.\${P}-state-hover .\${P}-input::placeholder {
1000
- color: var(--\${P}-hover-placeholder-color, var(--\${P}-placeholder-color));
805
+ .${e}-inputWrap:hover .${e}-input::placeholder,
806
+ .${e}-wrapper.${e}-state-hover .${e}-input::placeholder {
807
+ color: var(--${e}-hover-placeholder-color, var(--${e}-placeholder-color));
1001
808
  }
1002
- .\${P}-inputWrap:focus-within .\${P}-input::placeholder,
1003
- .\${P}-wrapper.\${P}-state-focus .\${P}-input::placeholder {
1004
- color: var(--\${P}-focus-placeholder-color, var(--\${P}-placeholder-color));
809
+ .${e}-inputWrap:focus-within .${e}-input::placeholder,
810
+ .${e}-wrapper.${e}-state-focus .${e}-input::placeholder {
811
+ color: var(--${e}-focus-placeholder-color, var(--${e}-placeholder-color));
1005
812
  }
1006
- .\${P}-wrapper.\${P}-state-filled .\${P}-input::placeholder {
1007
- color: var(--\${P}-filled-placeholder-color, var(--\${P}-placeholder-color));
813
+ .${e}-wrapper.${e}-state-filled .${e}-input::placeholder {
814
+ color: var(--${e}-filled-placeholder-color, var(--${e}-placeholder-color));
1008
815
  }
1009
- .\${P}-submitBtn {
816
+ .${e}-submitBtn {
1010
817
  box-sizing: border-box;
1011
818
  height: 100%;
1012
819
  display: flex;
@@ -1015,13 +822,13 @@ function getCSS(P: string): string {
1015
822
  border: none;
1016
823
  cursor: pointer;
1017
824
  white-space: nowrap;
1018
- background-color: var(--\${P}-button-color);
1019
- color: var(--\${P}-button-text-color);
825
+ background-color: var(--${e}-button-color);
826
+ color: var(--${e}-button-text-color);
1020
827
  border-left-style: solid;
1021
- border-left-color: var(--\${P}-stroke-color);
828
+ border-left-color: var(--${e}-stroke-color);
1022
829
  transition: color 250ms, background-color 250ms, border-color 250ms;
1023
830
  }
1024
- .\${P}-submitBtn img {
831
+ .${e}-submitBtn img {
1025
832
  display: block;
1026
833
  box-sizing: border-box;
1027
834
  flex: 0 1 auto;
@@ -1032,7 +839,7 @@ function getCSS(P: string): string {
1032
839
  max-height: 100%;
1033
840
  object-fit: contain;
1034
841
  }
1035
- .\${P}-submitBtn svg {
842
+ .${e}-submitBtn svg {
1036
843
  display: block;
1037
844
  box-sizing: border-box;
1038
845
  flex: 0 1 auto;
@@ -1042,7 +849,7 @@ function getCSS(P: string): string {
1042
849
  max-width: 100%;
1043
850
  max-height: 100%;
1044
851
  }
1045
- .\${P}-submitBtn .\${P}-submitBtnIcon {
852
+ .${e}-submitBtn .${e}-submitBtnIcon {
1046
853
  position: relative;
1047
854
  top: auto;
1048
855
  left: auto;
@@ -1058,409 +865,610 @@ function getCSS(P: string): string {
1058
865
  max-width: 100%;
1059
866
  max-height: 100%;
1060
867
  }
1061
- .\${P}-submitBtn:hover,
1062
- .\${P}-wrapper.\${P}-state-hover .\${P}-submitBtn {
1063
- background-color: var(--\${P}-hover-button-color, var(--\${P}-button-color));
1064
- color: var(--\${P}-hover-button-text-color, var(--\${P}-button-text-color));
1065
- border-left-color: var(--\${P}-hover-stroke-color, var(--\${P}-stroke-color));
868
+ .${e}-submitBtn:hover,
869
+ .${e}-wrapper.${e}-state-hover .${e}-submitBtn {
870
+ background-color: var(--${e}-hover-button-color, var(--${e}-button-color));
871
+ color: var(--${e}-hover-button-text-color, var(--${e}-button-text-color));
872
+ border-left-color: var(--${e}-hover-stroke-color, var(--${e}-stroke-color));
1066
873
  }
1067
- .\${P}-submitBtn:focus,
1068
- .\${P}-wrapper.\${P}-state-focus .\${P}-submitBtn {
1069
- background-color: var(--\${P}-focus-button-color, var(--\${P}-button-color));
1070
- color: var(--\${P}-focus-button-text-color, var(--\${P}-button-text-color));
1071
- border-left-color: var(--\${P}-focus-stroke-color, var(--\${P}-stroke-color));
874
+ .${e}-submitBtn:focus,
875
+ .${e}-wrapper.${e}-state-focus .${e}-submitBtn {
876
+ background-color: var(--${e}-focus-button-color, var(--${e}-button-color));
877
+ color: var(--${e}-focus-button-text-color, var(--${e}-button-text-color));
878
+ border-left-color: var(--${e}-focus-stroke-color, var(--${e}-stroke-color));
1072
879
  }
1073
- .\${P}-wrapper.\${P}-state-filled .\${P}-submitBtn {
1074
- background-color: var(--\${P}-filled-button-color, var(--\${P}-button-color));
1075
- color: var(--\${P}-filled-button-text-color, var(--\${P}-button-text-color));
1076
- border-left-color: var(--\${P}-filled-stroke-color, var(--\${P}-stroke-color));
880
+ .${e}-wrapper.${e}-state-filled .${e}-submitBtn {
881
+ background-color: var(--${e}-filled-button-color, var(--${e}-button-color));
882
+ color: var(--${e}-filled-button-text-color, var(--${e}-button-text-color));
883
+ border-left-color: var(--${e}-filled-stroke-color, var(--${e}-stroke-color));
1077
884
  }
1078
- .\${P}-submitBtn:hover .\${P}-submitBtnIcon,
1079
- .\${P}-wrapper.\${P}-state-hover .\${P}-submitBtn .\${P}-submitBtnIcon {
1080
- background-color: var(--\${P}-hover-button-text-color, var(--\${P}-button-text-color));
885
+ .${e}-submitBtn:hover .${e}-submitBtnIcon,
886
+ .${e}-wrapper.${e}-state-hover .${e}-submitBtn .${e}-submitBtnIcon {
887
+ background-color: var(--${e}-hover-button-text-color, var(--${e}-button-text-color));
1081
888
  }
1082
- .\${P}-submitBtn:focus .\${P}-submitBtnIcon,
1083
- .\${P}-wrapper.\${P}-state-focus .\${P}-submitBtn .\${P}-submitBtnIcon {
1084
- background-color: var(--\${P}-focus-button-text-color, var(--\${P}-button-text-color));
889
+ .${e}-submitBtn:focus .${e}-submitBtnIcon,
890
+ .${e}-wrapper.${e}-state-focus .${e}-submitBtn .${e}-submitBtnIcon {
891
+ background-color: var(--${e}-focus-button-text-color, var(--${e}-button-text-color));
1085
892
  }
1086
- .\${P}-wrapper.\${P}-state-filled .\${P}-submitBtn .\${P}-submitBtnIcon {
1087
- background-color: var(--\${P}-filled-button-text-color, var(--\${P}-button-text-color));
893
+ .${e}-wrapper.${e}-state-filled .${e}-submitBtn .${e}-submitBtnIcon {
894
+ background-color: var(--${e}-filled-button-text-color, var(--${e}-button-text-color));
1088
895
  }
1089
- .\${P}-wrapper.\${P}-state-success .\${P}-input,
1090
- .\${P}-wrapper.\${P}-state-success .\${P}-submitBtn {
896
+ .${e}-wrapper.${e}-state-success .${e}-input,
897
+ .${e}-wrapper.${e}-state-success .${e}-submitBtn {
1091
898
  pointer-events: none;
1092
899
  }
1093
- .\${P}-overlayAnchor {
900
+ .${e}-overlayAnchor {
1094
901
  position: relative;
1095
902
  display: flex;
1096
903
  align-items: center;
1097
904
  }
1098
- .\${P}-success {
1099
- margin-top: \${sv(8)};
1100
- font-size: \${sv(14)};
1101
- color: var(--\${P}-success-success-color, var(--\${P}-success-color));
1102
- }
1103
- .\${P}-error {
1104
- margin-top: \${sv(8)};
1105
- font-size: \${sv(14)};
1106
- color: var(--\${P}-error-error-color, var(--\${P}-error-color));
1107
- }
1108
- \`;
1109
- }
1110
-
1111
- type OnelinerFormProps = {
1112
- settings: OnelinerFormSettings;
1113
- content?: unknown;
1114
- isEditor?: boolean;
1115
- activeEvent?: string;
1116
- } & CommonComponentProps;
1117
-
1118
- export const OnelinerForm = ({ settings, isEditor, metadata, activeEvent }: OnelinerFormProps) => {
1119
- const { prefix: P } = useScopedStyles();
1120
- const {
1121
- fields = [{ name: 'email', type: 'email', placeholder: 'Your email' }],
1122
- buttonContent,
1123
- buttonLabel,
1124
- fieldsToShow = 1,
1125
- fontFamily,
1126
- inputFontSettings,
1127
- inputFontSize,
1128
- inputLineHeight,
1129
- inputLetterSpacing,
1130
- inputWordSpacing,
1131
- inputTextAppearance,
1132
- buttonFontSettings,
1133
- buttonFontSize,
1134
- buttonLineHeight,
1135
- buttonLetterSpacing,
1136
- buttonWordSpacing,
1137
- buttonTextAppearance,
1138
- statusFontSettings,
1139
- statusFontSize,
1140
- statusLineHeight,
1141
- statusLetterSpacing,
1142
- statusWordSpacing,
1143
- statusTextAppearance,
1144
- minHeight,
1145
- corners,
1146
- stroke,
1147
- stateOverrides,
1148
- inputPadding,
1149
- buttonPadding,
1150
- successMessage = 'Thanks for subscribing!',
1151
- errorMessage: errorMessageText = 'Please, fill all required fields.',
1152
- } = settings;
1153
-
1154
- const visibleFields = fields.slice(0, Math.min(fieldsToShow, fields.length));
1155
- const [values, setValues] = useState<Record<string, string>>(() =>
1156
- Object.fromEntries(visibleFields.map((f) => [f.name, '']))
1157
- );
1158
- const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
1159
- const [errorMessage, setErrorMessage] = useState<string | null>(null);
1160
-
1161
- const displayStatus = activeEvent === 'success' ? 'success'
1162
- : activeEvent === 'error' ? 'error'
1163
- : status;
1164
- const displayError = activeEvent === 'error' ? errorMessageText : errorMessage;
1165
- const displayValues = activeEvent === 'filled'
1166
- ? Object.fromEntries(visibleFields.map((f) => [f.name, 'Filled']))
1167
- : values;
1168
- const validationErrorMessage = displayStatus === 'error'
1169
- ? getFormFieldValidationError(visibleFields, displayValues)
1170
- : null;
1171
- const stateClass = activeEvent && activeEvent !== 'default' ? \`\${P}-state-\${activeEvent}\` : '';
1172
- const hasFilledFieldValue = visibleFields.some((f) => (displayValues[f.name] ?? '').trim().length > 0);
1173
- const filledStateClass =
1174
- stateClass !== \`\${P}-state-filled\` && hasFilledFieldValue ? \`\${P}-state-filled\` : '';
1175
- const wrapperStateClasses = \`\${stateClass} \${filledStateClass}\`.trim();
1176
-
1177
- const submitUrl = metadata?.submitUrl as string | undefined;
1178
- const labelText = buttonLabel ?? '';
1179
- const iconSrc = buttonContent?.icon ?? '';
1180
- const useIconButton = buttonContent?.mode === 'On';
1181
- const submitAriaLabel = labelText || 'Submit';
1182
-
1183
- const resolvedInputTextStyle: TextStyles = {
1184
- fontSettings: {
1185
- fontFamily,
1186
- fontWeight: inputFontSettings?.fontWeight ?? 400,
1187
- fontStyle: inputFontSettings?.fontStyle ?? 'normal',
1188
- },
1189
- fontSize: inputFontSize ?? 0.01,
1190
- lineHeight: inputLineHeight,
1191
- letterSpacing: inputLetterSpacing ?? 0,
1192
- wordSpacing: inputWordSpacing ?? 0,
1193
- textAppearance: inputTextAppearance,
1194
- color: settings.inputTextColor ?? '#111111',
1195
- };
1196
-
1197
- const resolvedButtonTextStyle: TextStyles = {
1198
- fontSettings: {
1199
- fontFamily,
1200
- fontWeight: buttonFontSettings?.fontWeight ?? 400,
1201
- fontStyle: buttonFontSettings?.fontStyle ?? 'normal',
1202
- },
1203
- fontSize: buttonFontSize ?? 0.01,
1204
- lineHeight: buttonLineHeight,
1205
- letterSpacing: buttonLetterSpacing ?? 0,
1206
- wordSpacing: buttonWordSpacing ?? 0,
1207
- textAppearance: buttonTextAppearance,
1208
- color: settings.buttonTextColor ?? '#ffffff',
1209
- };
1210
-
1211
- const resolvedStatusTextStyle: TextStyles = {
1212
- fontSettings: {
1213
- fontFamily,
1214
- fontWeight: statusFontSettings?.fontWeight ?? 400,
1215
- fontStyle: statusFontSettings?.fontStyle ?? 'normal',
1216
- },
1217
- fontSize: statusFontSize ?? 0.01,
1218
- lineHeight: statusLineHeight,
1219
- letterSpacing: statusLetterSpacing ?? 0,
1220
- wordSpacing: statusWordSpacing ?? 0,
1221
- textAppearance: statusTextAppearance,
1222
- color: settings.successColor ?? '#22c55e',
1223
- };
1224
-
1225
- const inputCss = textStylesToCss(resolvedInputTextStyle, isEditor);
1226
- const buttonCss = textStylesToCss(resolvedButtonTextStyle, isEditor);
1227
- const statusCss = textStylesToCss(resolvedStatusTextStyle, isEditor);
1228
- const { color: _statusMessageColor, ...statusTypographyCss } = statusCss;
1229
- const colorVars = buildColorVars(P, {
1230
- strokeColor: settings.strokeColor,
1231
- inputColor: settings.inputColor,
1232
- placeholderColor: settings.placeholderColor,
1233
- buttonColor: settings.buttonColor,
1234
- successColor: settings.successColor,
1235
- errorColor: settings.errorColor,
1236
- inputTextColor: settings.inputTextColor ?? resolvedInputTextStyle?.color ?? '#111111',
1237
- buttonTextColor: settings.buttonTextColor ?? resolvedButtonTextStyle?.color ?? '#ffffff',
1238
- }, COLOR_VAR_MAP, STATE_KEYS, stateOverrides);
1239
-
1240
- const formStyle: React.CSSProperties = {
1241
- borderRadius: scalingValue(corners, isEditor),
1242
- borderWidth: scalingValue(stroke, isEditor),
1243
- borderStyle: 'solid',
1244
- };
1245
-
1246
- const dividerWidthStyle = { borderLeftWidth: scalingValue(stroke, isEditor) };
1247
-
1248
- const handleSubmit = async (e: React.FormEvent) => {
1249
- e.preventDefault();
1250
- const payload = Object.fromEntries(
1251
- visibleFields.map((f) => [f.name, values[f.name]?.trim() ?? '']).filter(([, v]) => v)
1252
- );
1253
- if (!submitUrl) {
1254
- setStatus('error');
1255
- setErrorMessage('No integrations were found for this form.');
1256
- return;
1257
- }
1258
- if (Object.keys(payload).length === 0) return;
1259
-
1260
- const validationError = getFormFieldValidationError(visibleFields, values);
1261
- if (validationError) {
1262
- setStatus('error');
1263
- setErrorMessage(validationError);
1264
- return;
1265
- }
1266
-
1267
- setStatus('submitting');
1268
- setErrorMessage(null);
1269
-
1270
- try {
1271
- const res = await fetch(submitUrl, {
1272
- method: 'POST',
1273
- headers: { 'Content-Type': 'application/json' },
1274
- body: JSON.stringify(payload),
1275
- });
1276
-
1277
- if (!res.ok) {
1278
- const text = await res.text();
1279
- throw new Error(text || \`Request failed: \${res.status}\`);
1280
- }
1281
-
1282
- setStatus('success');
1283
- setValues(Object.fromEntries(visibleFields.map((f) => [f.name, ''])));
1284
- } catch (err) {
1285
- setStatus('error');
1286
- setErrorMessage(err instanceof Error ? err.message : 'Something went wrong');
1287
- }
1288
- };
1289
-
1290
- return (
1291
- <div className={\`\${P}-wrapper \${wrapperStateClasses}\`.trim()} style={colorVars}>
1292
- <style dangerouslySetInnerHTML={{ __html: getCSS(P) }} />
1293
- <form
1294
- onSubmit={handleSubmit}
1295
- className={\`\${P}-form\`}
1296
- style={{
1297
- ...formStyle,
1298
- height: scalingValue(minHeight, isEditor),
1299
- minHeight: scalingValue(minHeight, isEditor),
1300
- }}
1301
- >
1302
- <div
1303
- className={\`\${P}-inputWrap \${P}-overlayAnchor\`}
1304
- style={{ flex: 1, minWidth: 0 }}
1305
- >
1306
- {visibleFields.map((field) => (
1307
- <input
1308
- key={field.name}
1309
- type={field.type === 'email' ? 'email' : field.type === 'phone' ? 'tel' : 'text'}
1310
- name={field.name}
1311
- autoComplete="off"
1312
- value={displayValues[field.name] ?? ''}
1313
- onChange={(e) => setValues((prev) => ({ ...prev, [field.name]: e.target.value }))}
1314
- placeholder={field.placeholder}
1315
- required={field.isRequired ?? field.type === 'email'}
1316
- className={\`\${P}-input\`}
1317
- style={{
1318
- ...inputCss,
1319
- paddingRight: scalingValue(inputPadding.right, isEditor),
1320
- paddingLeft: scalingValue(inputPadding.left, isEditor),
1321
- paddingTop: scalingValue(inputPadding.top, isEditor),
1322
- paddingBottom: scalingValue(inputPadding.bottom, isEditor),
1323
- }}
1324
- />
1325
- ))}
1326
- </div>
1327
- <div className={\`\${P}-overlayAnchor\`}>
1328
- <button
1329
- type="submit"
1330
- className={\`\${P}-submitBtn\`}
1331
- aria-label={submitAriaLabel}
1332
- style={{
1333
- ...buttonCss,
1334
- ...dividerWidthStyle,
1335
- paddingRight: scalingValue(buttonPadding.right, isEditor),
1336
- paddingLeft: scalingValue(buttonPadding.left, isEditor),
1337
- paddingTop: scalingValue(buttonPadding.top, isEditor),
1338
- paddingBottom: scalingValue(buttonPadding.bottom, isEditor),
1339
- }}
1340
- >
1341
- {status === 'submitting'
1342
- ? '...'
1343
- : useIconButton
1344
- ? (iconSrc && (
1345
- <SvgImage
1346
- url={iconSrc}
1347
- className={\`\${P}-submitBtnIcon\`}
1348
- fill={\`var(--\${P}-button-text-color)\`}
1349
- hoverFill={\`var(--\${P}-button-text-color)\`}
1350
- />
1351
- ))
1352
- : labelText}
1353
- </button>
1354
- </div>
1355
- </form>
1356
- {displayStatus === 'success' && (
1357
- <p
1358
- className={\`\${P}-success\`}
1359
- style={{ ...statusCss }}
1360
- >
1361
- {successMessage}
1362
- </p>
1363
- )}
1364
- {displayStatus === 'error' && (
1365
- <p
1366
- className={\`\${P}-error\`}
1367
- style={{ ...statusTypographyCss }}
1368
- role="alert"
1369
- >
1370
- {validationErrorMessage ?? displayError ?? errorMessageText}
1371
- </p>
1372
- )}
1373
- </div>
1374
- );
1375
- };
1376
-
1377
- type FieldConfig = {
1378
- name: string;
1379
- type: 'text' | 'phone' | 'email';
1380
- placeholder: string;
1381
- isRequired?: boolean;
1382
- error?: string;
1383
- };
1384
-
1385
- type OnelinerColorKeys =
1386
- | 'strokeColor'
1387
- | 'inputColor'
1388
- | 'placeholderColor'
1389
- | 'buttonColor'
1390
- | 'inputTextColor'
1391
- | 'buttonTextColor'
1392
- | 'successColor'
1393
- | 'errorColor';
1394
-
1395
- type StateColorOverrides = Partial<Record<OnelinerColorKeys, string>>;
1396
-
1397
- export type OnelinerFormButtonContent = {
1398
- mode?: 'On' | 'Off';
1399
- icon?: string | null;
1400
- };
1401
-
1402
- export type OnelinerFormSettings = {
1403
- fields: FieldConfig[];
1404
- fieldsToShow: number;
1405
- buttonLabel?: string | null;
1406
- buttonContent?: OnelinerFormButtonContent | null;
1407
- fontFamily?: string;
1408
- inputFontSettings?: { fontWeight: number; fontStyle: string };
1409
- inputFontSize?: number;
1410
- inputLineHeight?: number;
1411
- inputLetterSpacing?: number;
1412
- inputWordSpacing?: number;
1413
- inputTextAppearance?: TextStyles['textAppearance'];
1414
- buttonFontSettings?: { fontWeight: number; fontStyle: string };
1415
- buttonFontSize?: number;
1416
- buttonLineHeight?: number;
1417
- buttonLetterSpacing?: number;
1418
- buttonWordSpacing?: number;
1419
- buttonTextAppearance?: TextStyles['textAppearance'];
1420
- statusFontSettings?: { fontWeight: number; fontStyle: string };
1421
- statusFontSize?: number;
1422
- statusLineHeight?: number;
1423
- statusLetterSpacing?: number;
1424
- statusWordSpacing?: number;
1425
- statusTextAppearance?: TextStyles['textAppearance'];
1426
- minHeight: number;
1427
- corners: number;
1428
- stroke: number;
1429
- inputPadding: {
1430
- left: number;
1431
- right: number;
1432
- top: number;
1433
- bottom: number;
1434
- };
1435
- buttonPadding: {
1436
- left: number;
1437
- right: number;
1438
- top: number;
1439
- bottom: number;
1440
- };
1441
- strokeColor: string;
1442
- inputColor: string;
1443
- placeholderColor: string;
1444
- buttonColor: string;
1445
- successColor: string;
1446
- errorColor: string;
1447
- inputTextColor?: string;
1448
- buttonTextColor?: string;
1449
- stateOverrides?: Record<string, StateColorOverrides>;
1450
- successMessage?: string;
1451
- errorMessage?: string;
1452
- };
1453
-
1454
- const COLOR_VAR_MAP: Record<OnelinerColorKeys, string> = {
1455
- strokeColor: 'stroke-color',
1456
- inputColor: 'input-color',
1457
- placeholderColor: 'placeholder-color',
1458
- buttonColor: 'button-color',
1459
- inputTextColor: 'input-text-color',
1460
- buttonTextColor: 'button-text-color',
1461
- successColor: 'success-color',
1462
- errorColor: 'error-color',
1463
- };
1464
-
1465
- const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
1466
- `,Fs="data:image/svg+xml,"+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="6" height="9"><path fill="white" transform="translate(0.0625 0.0595703)" d="M0.18305826 0.18305826C0.40836075 -0.042244215 0.76288015 -0.059575174 1.0080621 0.13106538L1.0669417 0.18305826L4.8169417 3.9330583C5.0422444 4.158361 5.0595751 4.5128803 4.8689346 4.7580624L4.8169417 4.8169417L1.0669417 8.5669422C0.82286406 8.8110189 0.42713594 8.8110189 0.18305826 8.5669422C-0.042244215 8.3416395 -0.059575174 7.9871197 0.13106538 7.7419376L0.18305826 7.6830583L3.4906249 4.375L0.18305826 1.0669417C-0.042244215 0.84163928 -0.059575174 0.48711985 0.13106538 0.24193785L0.18305826 0.18305826Z" fill-rule="evenodd"/></svg>'),Rs=[{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."}],Sn={fontSettings:{type:"object",display:{type:"font-settings-weight",visible:!0},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},Bs=["strokeColor","inputColor","inputTextColor","placeholderColor","buttonColor","buttonTextColor","successColor","errorColor"],Vs={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"}},buttonContent:{type:"object",scope:"common",title:"Button Icon",display:{type:"button-content-switch"},properties:{mode:{type:"string",enum:["On","Off"]},icon:{type:["string","null"],title:"Icon",display:{type:"settings-image-input"}}}},fontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},inputPadding:{type:"object",scope:"layout",title:"",display:{type:"padding-controls"}},buttonPadding:{type:"object",scope:"layout",title:"",display:{type:"padding-controls"}},minHeight:{type:"number",scope:"layout",title:"min Height",display:{type:"range-control"},min:0,max:200},corners:{type:"number",scope:"layout",title:"Corners",display:{type:"range-control"},min:0,max:100},stroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"range-control"},min:0,max:20},strokeColor:{type:"string",scope:"common",title:"Stroke",display:{type:"palette-color-picker"}},inputColor:{type:"string",scope:"common",title:"Input Fill",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 Text",display:{type:"palette-color-picker"}},buttonColor:{type:"string",scope:"common",title:"Button Fill",display:{type:"palette-color-picker"}},buttonTextColor:{type:"string",scope:"common",title:"Button Label",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:{...Sn.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:{...Sn.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:{...Sn.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:Rs,fieldsToShow:1,buttonLabel:"Subscribe",buttonContent:{mode:"Off",icon:Fs},fontFamily:"Arial",strokeColor:"#0A00F8",inputColor:"#ffffff",inputTextColor:"#0A00F8",placeholderColor:"#000000",buttonColor:"#0088D7",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,stroke:0,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,stroke:0,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:"buttonContent.mode",value:"On"},then:{name:"properties.buttonFontSettings.display.visible",value:!1}},{if:{name:"buttonContent.mode",value:"On"},then:{name:"properties.buttonFontSize.display.visible",value:!1}},{if:{name:"buttonContent.mode",value:"On"},then:{name:"properties.buttonLineHeight.display.visible",value:!1}},{if:{name:"buttonContent.mode",value:"On"},then:{name:"properties.buttonLetterSpacing.display.visible",value:!1}},{if:{name:"buttonContent.mode",value:"On"},then:{name:"properties.buttonWordSpacing.display.visible",value:!1}},{if:{name:"buttonContent.mode",value:"On"},then:{name:"properties.buttonTextAppearance.display.visible",value:!1}}]},panels:[{id:"general",icon:"cursor",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","fieldsToShow"]},{type:"row",items:["minHeight","corners"]},{type:"row",items:[{type:"group",title:"",items:["stroke","buttonContent"]},{type:"switcher",title:"Padding",options:{Input:["inputPadding"],Button:["buttonPadding"]}}]}]},{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:[...Bs],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"]},Os={element:Ls,id:"oneliner-form",name:"Newsletter Single Line",version:1,preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/onelinerImg.png"},defaultSize:{width:400,height:60},schema:Vs,sourceCode:ks},Ps=[Ca,Aa,ys,Ts,Os];exports.components=Ps;exports.isSchemaV1=mr;
905
+ .${e}-success {
906
+ margin-top: ${Yt(8)};
907
+ font-size: ${Yt(14)};
908
+ color: var(--${e}-success-success-color, var(--${e}-success-color));
909
+ }
910
+ .${e}-error {
911
+ margin-top: ${Yt(8)};
912
+ font-size: ${Yt(14)};
913
+ color: var(--${e}-error-error-color, var(--${e}-error-color));
914
+ }
915
+ `}const Ml=({settings:e,isEditor:t,metadata:r,activeEvent:n})=>{const{prefix:o}=_.useScopedStyles(),{fields:l=[{name:"email",type:"email",placeholder:"Your email"}],buttonContent:i,buttonLabel:a,fieldsToShow:s=1,fontFamily:p,inputFontSettings:c,inputFontSize:$,inputLineHeight:y,inputLetterSpacing:g,inputWordSpacing:u,inputTextAppearance:d,buttonFontSettings:C,buttonFontSize:v,buttonLineHeight:h,buttonLetterSpacing:w,buttonWordSpacing:M,buttonTextAppearance:P,statusFontSettings:E,statusFontSize:b,statusLineHeight:A,statusLetterSpacing:R,statusWordSpacing:j,statusTextAppearance:F,minHeight:W,corners:B,stroke:U,stateOverrides:D,inputPadding:m,buttonPadding:I,successMessage:k="Thanks for subscribing!",errorMessage:T="Please, fill all required fields."}=e,S=l.slice(0,Math.min(s,l.length)),[V,X]=z.useState(()=>Object.fromEntries(S.map(fe=>[fe.name,""]))),[oe,Q]=z.useState("idle"),[ue,L]=z.useState(null),K=n==="success"?"success":n==="error"?"error":oe,he=n==="error"?T:ue,ie=n==="filled"?Object.fromEntries(S.map(fe=>[fe.name,"Filled"])):V,me=K==="error"?_.getFormFieldValidationError(S,ie):null,be=n&&n!=="default"?`${o}-state-${n}`:"",Me=S.some(fe=>(ie[fe.name]??"").trim().length>0),O=be!==`${o}-state-filled`&&Me?`${o}-state-filled`:"",x=`${be} ${O}`.trim(),H=r==null?void 0:r.submitUrl,Y=a??"",J=(i==null?void 0:i.icon)??"",ne=(i==null?void 0:i.mode)==="On",ee=Y||"Submit",q={fontSettings:{fontFamily:p,fontWeight:(c==null?void 0:c.fontWeight)??400,fontStyle:(c==null?void 0:c.fontStyle)??"normal"},fontSize:$??.01,lineHeight:y,letterSpacing:g??0,wordSpacing:u??0,textAppearance:d,color:e.inputTextColor??"#111111"},re={fontSettings:{fontFamily:p,fontWeight:(C==null?void 0:C.fontWeight)??400,fontStyle:(C==null?void 0:C.fontStyle)??"normal"},fontSize:v??.01,lineHeight:h,letterSpacing:w??0,wordSpacing:M??0,textAppearance:P,color:e.buttonTextColor??"#ffffff"},ve={fontSettings:{fontFamily:p,fontWeight:(E==null?void 0:E.fontWeight)??400,fontStyle:(E==null?void 0:E.fontStyle)??"normal"},fontSize:b??.01,lineHeight:A,letterSpacing:R??0,wordSpacing:j??0,textAppearance:F,color:e.successColor??"#22c55e"},le=ft(et(q,t)),pe=ft(et(re,t)),ke=ft(et(ve,t)),te=_.buildColorVars(o,{strokeColor:e.strokeColor,inputColor:e.inputColor,placeholderColor:e.placeholderColor,buttonColor:e.buttonColor,successColor:e.successColor,errorColor:e.errorColor,inputTextColor:e.inputTextColor??(q==null?void 0:q.color)??"#111111",buttonTextColor:e.buttonTextColor??(re==null?void 0:re.color)??"#ffffff"},Hl,Dl,D),se={borderRadius:_.scalingValue(B,t),borderWidth:_.scalingValue(U,t),borderStyle:"solid"},Ce={borderLeftWidth:_.scalingValue(U,t)},He=async fe=>{fe.preventDefault();const it=Object.fromEntries(S.map($e=>{var Fe;return[$e.name,((Fe=V[$e.name])==null?void 0:Fe.trim())??""]}).filter(([,$e])=>$e));if(!H){Q("error"),L("No integrations were found for this form.");return}if(Object.keys(it).length===0)return;const Ze=_.getFormFieldValidationError(S,V);if(Ze){Q("error"),L(Ze);return}Q("submitting"),L(null);try{const $e=await fetch(H,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(it)});if(!$e.ok){const Fe=await $e.text();throw new Error(Fe||`Request failed: ${$e.status}`)}Q("success"),X(Object.fromEntries(S.map(Fe=>[Fe.name,""])))}catch($e){Q("error"),L($e instanceof Error?$e.message:"Something went wrong")}};return f.jsxs("div",{className:`${o}-wrapper ${x}`.trim(),style:te,children:[f.jsx("style",{dangerouslySetInnerHTML:{__html:zl(o)}}),f.jsxs("form",{onSubmit:He,className:`${o}-form`,style:{...se,height:_.scalingValue(W,t),minHeight:_.scalingValue(W,t)},children:[f.jsx("div",{className:`${o}-inputWrap ${o}-overlayAnchor`,style:{flex:1,minWidth:0},children:S.map(fe=>f.jsx("input",{type:fe.type==="email"?"email":fe.type==="phone"?"tel":"text",name:fe.name,autoComplete:"off",value:ie[fe.name]??"",onChange:it=>X(Ze=>({...Ze,[fe.name]:it.target.value})),placeholder:fe.placeholder,required:fe.isRequired??fe.type==="email",className:`${o}-input`,style:{...le,paddingRight:_.scalingValue(m.right,t),paddingLeft:_.scalingValue(m.left,t),paddingTop:_.scalingValue(m.top,t),paddingBottom:_.scalingValue(m.bottom,t)}},fe.name))}),f.jsx("div",{className:`${o}-overlayAnchor`,children:f.jsx("button",{type:"submit",className:`${o}-submitBtn`,"aria-label":ee,style:{...pe,...Ce,paddingRight:_.scalingValue(I.right,t),paddingLeft:_.scalingValue(I.left,t),paddingTop:_.scalingValue(I.top,t),paddingBottom:_.scalingValue(I.bottom,t)},children:oe==="submitting"?"...":ne?J&&f.jsx(mt,{url:J,className:`${o}-submitBtnIcon`,fill:`var(--${o}-button-text-color)`,hoverFill:`var(--${o}-button-text-color)`}):Y})})]}),K==="success"&&f.jsx("p",{className:`${o}-success`,style:{...ke},children:k}),K==="error"&&f.jsx("p",{className:`${o}-error`,style:{...ke},role:"alert",children:me??he??T})]})},Hl={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"},Dl=["hover","focus","filled","success","error"],Ul=`import React, { useState } from 'react';\r
916
+ import { CommonComponentProps } from '../props';\r
917
+ import { buildColorVars, getFormFieldValidationError, scalingValue, useScopedStyles } from '../utils/index';\r
918
+ import { omitTextColors, textStylesToCss, type TextStyles } from '../utils/textStylesToCss';\r
919
+ import { SvgImage } from '../helpers/SvgImage/SvgImage';\r
920
+ \r
921
+ function sv(px: number): string {\r
922
+ return \`calc(var(--cntrl-article-width, 100vw) * \${px / 1440})\`;\r
923
+ }\r
924
+ \r
925
+ function getCSS(P: string): string {\r
926
+ return \`\r
927
+ .\${P}-wrapper {\r
928
+ display: flex;\r
929
+ flex-direction: column;\r
930
+ width: 100%;\r
931
+ height: 100%;\r
932
+ align-items: stretch;\r
933
+ justify-content: center;\r
934
+ }\r
935
+ .\${P}-form {\r
936
+ display: flex;\r
937
+ width: 100%;\r
938
+ align-items: stretch;\r
939
+ overflow: hidden;\r
940
+ border-color: var(--\${P}-stroke-color);\r
941
+ transition: border-color 250ms;\r
942
+ }\r
943
+ .\${P}-form:hover {\r
944
+ border-color: var(--\${P}-hover-stroke-color, var(--\${P}-stroke-color));\r
945
+ }\r
946
+ .\${P}-form:focus-within {\r
947
+ border-color: var(--\${P}-focus-stroke-color, var(--\${P}-stroke-color));\r
948
+ }\r
949
+ .\${P}-wrapper.\${P}-state-hover .\${P}-form {\r
950
+ border-color: var(--\${P}-hover-stroke-color, var(--\${P}-stroke-color));\r
951
+ }\r
952
+ .\${P}-wrapper.\${P}-state-focus .\${P}-form {\r
953
+ border-color: var(--\${P}-focus-stroke-color, var(--\${P}-stroke-color));\r
954
+ }\r
955
+ .\${P}-wrapper.\${P}-state-filled .\${P}-form {\r
956
+ border-color: var(--\${P}-filled-stroke-color, var(--\${P}-stroke-color));\r
957
+ }\r
958
+ .\${P}-inputWrap {\r
959
+ position: relative;\r
960
+ display: flex;\r
961
+ align-items: center;\r
962
+ flex: 1;\r
963
+ min-width: 0;\r
964
+ background-color: var(--\${P}-input-color);\r
965
+ transition: background-color 250ms;\r
966
+ }\r
967
+ .\${P}-inputWrap:hover,\r
968
+ .\${P}-wrapper.\${P}-state-hover .\${P}-inputWrap {\r
969
+ background-color: var(--\${P}-hover-input-color, var(--\${P}-input-color));\r
970
+ }\r
971
+ .\${P}-inputWrap:focus-within,\r
972
+ .\${P}-wrapper.\${P}-state-focus .\${P}-inputWrap {\r
973
+ background-color: var(--\${P}-focus-input-color, var(--\${P}-input-color));\r
974
+ }\r
975
+ .\${P}-wrapper.\${P}-state-filled .\${P}-inputWrap {\r
976
+ background-color: var(--\${P}-filled-input-color, var(--\${P}-input-color));\r
977
+ }\r
978
+ .\${P}-input {\r
979
+ flex: 1;\r
980
+ min-width: 0;\r
981
+ background: transparent;\r
982
+ border: none;\r
983
+ outline: none;\r
984
+ -webkit-tap-highlight-color: transparent;\r
985
+ color: var(--\${P}-input-text-color);\r
986
+ transition: color 250ms, background-color 250ms, border-color 250ms;\r
987
+ }\r
988
+ .\${P}-input:hover {\r
989
+ color: var(--\${P}-hover-input-text-color, var(--\${P}-input-text-color));\r
990
+ }\r
991
+ .\${P}-inputWrap:hover .\${P}-input,\r
992
+ .\${P}-wrapper.\${P}-state-hover .\${P}-input {\r
993
+ color: var(--\${P}-hover-input-text-color, var(--\${P}-input-text-color));\r
994
+ }\r
995
+ .\${P}-input:focus,\r
996
+ .\${P}-wrapper.\${P}-state-focus .\${P}-input {\r
997
+ color: var(--\${P}-focus-input-text-color, var(--\${P}-input-text-color));\r
998
+ }\r
999
+ .\${P}-wrapper.\${P}-state-filled .\${P}-input {\r
1000
+ color: var(--\${P}-filled-input-text-color, var(--\${P}-input-text-color));\r
1001
+ }\r
1002
+ .\${P}-input::placeholder {\r
1003
+ color: var(--\${P}-placeholder-color);\r
1004
+ opacity: 1;\r
1005
+ transition: color 250ms, opacity 250ms;\r
1006
+ }\r
1007
+ .\${P}-inputWrap:hover .\${P}-input::placeholder,\r
1008
+ .\${P}-wrapper.\${P}-state-hover .\${P}-input::placeholder {\r
1009
+ color: var(--\${P}-hover-placeholder-color, var(--\${P}-placeholder-color));\r
1010
+ }\r
1011
+ .\${P}-inputWrap:focus-within .\${P}-input::placeholder,\r
1012
+ .\${P}-wrapper.\${P}-state-focus .\${P}-input::placeholder {\r
1013
+ color: var(--\${P}-focus-placeholder-color, var(--\${P}-placeholder-color));\r
1014
+ }\r
1015
+ .\${P}-wrapper.\${P}-state-filled .\${P}-input::placeholder {\r
1016
+ color: var(--\${P}-filled-placeholder-color, var(--\${P}-placeholder-color));\r
1017
+ }\r
1018
+ .\${P}-submitBtn {\r
1019
+ box-sizing: border-box;\r
1020
+ height: 100%;\r
1021
+ display: flex;\r
1022
+ align-items: center;\r
1023
+ justify-content: center;\r
1024
+ border: none;\r
1025
+ cursor: pointer;\r
1026
+ white-space: nowrap;\r
1027
+ background-color: var(--\${P}-button-color);\r
1028
+ color: var(--\${P}-button-text-color);\r
1029
+ border-left-style: solid;\r
1030
+ border-left-color: var(--\${P}-stroke-color);\r
1031
+ transition: color 250ms, background-color 250ms, border-color 250ms;\r
1032
+ }\r
1033
+ .\${P}-submitBtn img {\r
1034
+ display: block;\r
1035
+ box-sizing: border-box;\r
1036
+ flex: 0 1 auto;\r
1037
+ min-width: 0;\r
1038
+ height: 100%;\r
1039
+ width: auto;\r
1040
+ max-width: 100%;\r
1041
+ max-height: 100%;\r
1042
+ object-fit: contain;\r
1043
+ }\r
1044
+ .\${P}-submitBtn svg {\r
1045
+ display: block;\r
1046
+ box-sizing: border-box;\r
1047
+ flex: 0 1 auto;\r
1048
+ min-width: 0;\r
1049
+ height: 100%;\r
1050
+ width: auto;\r
1051
+ max-width: 100%;\r
1052
+ max-height: 100%;\r
1053
+ }\r
1054
+ .\${P}-submitBtn .\${P}-submitBtnIcon {\r
1055
+ position: relative;\r
1056
+ top: auto;\r
1057
+ left: auto;\r
1058
+ transform: none;\r
1059
+ display: block;\r
1060
+ box-sizing: border-box;\r
1061
+ flex: 0 1 auto;\r
1062
+ align-self: stretch;\r
1063
+ min-width: 0;\r
1064
+ width: auto;\r
1065
+ height: auto;\r
1066
+ aspect-ratio: 1;\r
1067
+ max-width: 100%;\r
1068
+ max-height: 100%;\r
1069
+ }\r
1070
+ .\${P}-submitBtn:hover,\r
1071
+ .\${P}-wrapper.\${P}-state-hover .\${P}-submitBtn {\r
1072
+ background-color: var(--\${P}-hover-button-color, var(--\${P}-button-color));\r
1073
+ color: var(--\${P}-hover-button-text-color, var(--\${P}-button-text-color));\r
1074
+ border-left-color: var(--\${P}-hover-stroke-color, var(--\${P}-stroke-color));\r
1075
+ }\r
1076
+ .\${P}-submitBtn:focus,\r
1077
+ .\${P}-wrapper.\${P}-state-focus .\${P}-submitBtn {\r
1078
+ background-color: var(--\${P}-focus-button-color, var(--\${P}-button-color));\r
1079
+ color: var(--\${P}-focus-button-text-color, var(--\${P}-button-text-color));\r
1080
+ border-left-color: var(--\${P}-focus-stroke-color, var(--\${P}-stroke-color));\r
1081
+ }\r
1082
+ .\${P}-wrapper.\${P}-state-filled .\${P}-submitBtn {\r
1083
+ background-color: var(--\${P}-filled-button-color, var(--\${P}-button-color));\r
1084
+ color: var(--\${P}-filled-button-text-color, var(--\${P}-button-text-color));\r
1085
+ border-left-color: var(--\${P}-filled-stroke-color, var(--\${P}-stroke-color));\r
1086
+ }\r
1087
+ .\${P}-submitBtn:hover .\${P}-submitBtnIcon,\r
1088
+ .\${P}-wrapper.\${P}-state-hover .\${P}-submitBtn .\${P}-submitBtnIcon {\r
1089
+ background-color: var(--\${P}-hover-button-text-color, var(--\${P}-button-text-color));\r
1090
+ }\r
1091
+ .\${P}-submitBtn:focus .\${P}-submitBtnIcon,\r
1092
+ .\${P}-wrapper.\${P}-state-focus .\${P}-submitBtn .\${P}-submitBtnIcon {\r
1093
+ background-color: var(--\${P}-focus-button-text-color, var(--\${P}-button-text-color));\r
1094
+ }\r
1095
+ .\${P}-wrapper.\${P}-state-filled .\${P}-submitBtn .\${P}-submitBtnIcon {\r
1096
+ background-color: var(--\${P}-filled-button-text-color, var(--\${P}-button-text-color));\r
1097
+ }\r
1098
+ .\${P}-wrapper.\${P}-state-success .\${P}-input,\r
1099
+ .\${P}-wrapper.\${P}-state-success .\${P}-submitBtn {\r
1100
+ pointer-events: none;\r
1101
+ }\r
1102
+ .\${P}-overlayAnchor {\r
1103
+ position: relative;\r
1104
+ display: flex;\r
1105
+ align-items: center;\r
1106
+ }\r
1107
+ .\${P}-success {\r
1108
+ margin-top: \${sv(8)};\r
1109
+ font-size: \${sv(14)};\r
1110
+ color: var(--\${P}-success-success-color, var(--\${P}-success-color));\r
1111
+ }\r
1112
+ .\${P}-error {\r
1113
+ margin-top: \${sv(8)};\r
1114
+ font-size: \${sv(14)};\r
1115
+ color: var(--\${P}-error-error-color, var(--\${P}-error-color));\r
1116
+ }\r
1117
+ \`;\r
1118
+ }\r
1119
+ \r
1120
+ type OnelinerFormProps = {\r
1121
+ settings: OnelinerFormSettings;\r
1122
+ content?: unknown;\r
1123
+ isEditor?: boolean;\r
1124
+ activeEvent?: string;\r
1125
+ } & CommonComponentProps;\r
1126
+ \r
1127
+ export const OnelinerForm = ({ settings, isEditor, metadata, activeEvent }: OnelinerFormProps) => {\r
1128
+ const { prefix: P } = useScopedStyles();\r
1129
+ const {\r
1130
+ fields = [{ name: 'email', type: 'email', placeholder: 'Your email' }],\r
1131
+ buttonContent,\r
1132
+ buttonLabel,\r
1133
+ fieldsToShow = 1,\r
1134
+ fontFamily,\r
1135
+ inputFontSettings,\r
1136
+ inputFontSize,\r
1137
+ inputLineHeight,\r
1138
+ inputLetterSpacing,\r
1139
+ inputWordSpacing,\r
1140
+ inputTextAppearance,\r
1141
+ buttonFontSettings,\r
1142
+ buttonFontSize,\r
1143
+ buttonLineHeight,\r
1144
+ buttonLetterSpacing,\r
1145
+ buttonWordSpacing,\r
1146
+ buttonTextAppearance,\r
1147
+ statusFontSettings,\r
1148
+ statusFontSize,\r
1149
+ statusLineHeight,\r
1150
+ statusLetterSpacing,\r
1151
+ statusWordSpacing,\r
1152
+ statusTextAppearance,\r
1153
+ minHeight,\r
1154
+ corners,\r
1155
+ stroke,\r
1156
+ stateOverrides,\r
1157
+ inputPadding,\r
1158
+ buttonPadding,\r
1159
+ successMessage = 'Thanks for subscribing!',\r
1160
+ errorMessage: errorMessageText = 'Please, fill all required fields.',\r
1161
+ } = settings;\r
1162
+ \r
1163
+ const visibleFields = fields.slice(0, Math.min(fieldsToShow, fields.length));\r
1164
+ const [values, setValues] = useState<Record<string, string>>(() =>\r
1165
+ Object.fromEntries(visibleFields.map((f) => [f.name, '']))\r
1166
+ );\r
1167
+ const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');\r
1168
+ const [errorMessage, setErrorMessage] = useState<string | null>(null);\r
1169
+ \r
1170
+ const displayStatus = activeEvent === 'success' ? 'success'\r
1171
+ : activeEvent === 'error' ? 'error'\r
1172
+ : status;\r
1173
+ const displayError = activeEvent === 'error' ? errorMessageText : errorMessage;\r
1174
+ const displayValues = activeEvent === 'filled'\r
1175
+ ? Object.fromEntries(visibleFields.map((f) => [f.name, 'Filled']))\r
1176
+ : values;\r
1177
+ const validationErrorMessage = displayStatus === 'error'\r
1178
+ ? getFormFieldValidationError(visibleFields, displayValues)\r
1179
+ : null;\r
1180
+ const stateClass = activeEvent && activeEvent !== 'default' ? \`\${P}-state-\${activeEvent}\` : '';\r
1181
+ const hasFilledFieldValue = visibleFields.some((f) => (displayValues[f.name] ?? '').trim().length > 0);\r
1182
+ const filledStateClass =\r
1183
+ stateClass !== \`\${P}-state-filled\` && hasFilledFieldValue ? \`\${P}-state-filled\` : '';\r
1184
+ const wrapperStateClasses = \`\${stateClass} \${filledStateClass}\`.trim();\r
1185
+ \r
1186
+ const submitUrl = metadata?.submitUrl as string | undefined;\r
1187
+ const labelText = buttonLabel ?? '';\r
1188
+ const iconSrc = buttonContent?.icon ?? '';\r
1189
+ const useIconButton = buttonContent?.mode === 'On';\r
1190
+ const submitAriaLabel = labelText || 'Submit';\r
1191
+ \r
1192
+ const resolvedInputTextStyle: TextStyles = {\r
1193
+ fontSettings: {\r
1194
+ fontFamily,\r
1195
+ fontWeight: inputFontSettings?.fontWeight ?? 400,\r
1196
+ fontStyle: inputFontSettings?.fontStyle ?? 'normal',\r
1197
+ },\r
1198
+ fontSize: inputFontSize ?? 0.01,\r
1199
+ lineHeight: inputLineHeight,\r
1200
+ letterSpacing: inputLetterSpacing ?? 0,\r
1201
+ wordSpacing: inputWordSpacing ?? 0,\r
1202
+ textAppearance: inputTextAppearance,\r
1203
+ color: settings.inputTextColor ?? '#111111',\r
1204
+ };\r
1205
+ \r
1206
+ const resolvedButtonTextStyle: TextStyles = {\r
1207
+ fontSettings: {\r
1208
+ fontFamily,\r
1209
+ fontWeight: buttonFontSettings?.fontWeight ?? 400,\r
1210
+ fontStyle: buttonFontSettings?.fontStyle ?? 'normal',\r
1211
+ },\r
1212
+ fontSize: buttonFontSize ?? 0.01,\r
1213
+ lineHeight: buttonLineHeight,\r
1214
+ letterSpacing: buttonLetterSpacing ?? 0,\r
1215
+ wordSpacing: buttonWordSpacing ?? 0,\r
1216
+ textAppearance: buttonTextAppearance,\r
1217
+ color: settings.buttonTextColor ?? '#ffffff',\r
1218
+ };\r
1219
+ \r
1220
+ const resolvedStatusTextStyle: TextStyles = {\r
1221
+ fontSettings: {\r
1222
+ fontFamily,\r
1223
+ fontWeight: statusFontSettings?.fontWeight ?? 400,\r
1224
+ fontStyle: statusFontSettings?.fontStyle ?? 'normal',\r
1225
+ },\r
1226
+ fontSize: statusFontSize ?? 0.01,\r
1227
+ lineHeight: statusLineHeight,\r
1228
+ letterSpacing: statusLetterSpacing ?? 0,\r
1229
+ wordSpacing: statusWordSpacing ?? 0,\r
1230
+ textAppearance: statusTextAppearance,\r
1231
+ color: settings.successColor ?? '#22c55e',\r
1232
+ };\r
1233
+ \r
1234
+ const inputTypographyCss = omitTextColors(textStylesToCss(resolvedInputTextStyle, isEditor));\r
1235
+ const buttonTypographyCss = omitTextColors(textStylesToCss(resolvedButtonTextStyle, isEditor));\r
1236
+ const statusTypographyCss = omitTextColors(textStylesToCss(resolvedStatusTextStyle, isEditor));\r
1237
+ const colorVars = buildColorVars(P, {\r
1238
+ strokeColor: settings.strokeColor,\r
1239
+ inputColor: settings.inputColor,\r
1240
+ placeholderColor: settings.placeholderColor,\r
1241
+ buttonColor: settings.buttonColor,\r
1242
+ successColor: settings.successColor,\r
1243
+ errorColor: settings.errorColor,\r
1244
+ inputTextColor: settings.inputTextColor ?? resolvedInputTextStyle?.color ?? '#111111',\r
1245
+ buttonTextColor: settings.buttonTextColor ?? resolvedButtonTextStyle?.color ?? '#ffffff',\r
1246
+ }, COLOR_VAR_MAP, STATE_KEYS, stateOverrides);\r
1247
+ \r
1248
+ const formStyle: React.CSSProperties = {\r
1249
+ borderRadius: scalingValue(corners, isEditor),\r
1250
+ borderWidth: scalingValue(stroke, isEditor),\r
1251
+ borderStyle: 'solid',\r
1252
+ };\r
1253
+ \r
1254
+ const dividerWidthStyle = { borderLeftWidth: scalingValue(stroke, isEditor) };\r
1255
+ \r
1256
+ const handleSubmit = async (e: React.FormEvent) => {\r
1257
+ e.preventDefault();\r
1258
+ const payload = Object.fromEntries(\r
1259
+ visibleFields.map((f) => [f.name, values[f.name]?.trim() ?? '']).filter(([, v]) => v)\r
1260
+ );\r
1261
+ if (!submitUrl) {\r
1262
+ setStatus('error');\r
1263
+ setErrorMessage('No integrations were found for this form.');\r
1264
+ return;\r
1265
+ }\r
1266
+ if (Object.keys(payload).length === 0) return;\r
1267
+ \r
1268
+ const validationError = getFormFieldValidationError(visibleFields, values);\r
1269
+ if (validationError) {\r
1270
+ setStatus('error');\r
1271
+ setErrorMessage(validationError);\r
1272
+ return;\r
1273
+ }\r
1274
+ \r
1275
+ setStatus('submitting');\r
1276
+ setErrorMessage(null);\r
1277
+ \r
1278
+ try {\r
1279
+ const res = await fetch(submitUrl, {\r
1280
+ method: 'POST',\r
1281
+ headers: { 'Content-Type': 'application/json' },\r
1282
+ body: JSON.stringify(payload),\r
1283
+ });\r
1284
+ \r
1285
+ if (!res.ok) {\r
1286
+ const text = await res.text();\r
1287
+ throw new Error(text || \`Request failed: \${res.status}\`);\r
1288
+ }\r
1289
+ \r
1290
+ setStatus('success');\r
1291
+ setValues(Object.fromEntries(visibleFields.map((f) => [f.name, ''])));\r
1292
+ } catch (err) {\r
1293
+ setStatus('error');\r
1294
+ setErrorMessage(err instanceof Error ? err.message : 'Something went wrong');\r
1295
+ }\r
1296
+ };\r
1297
+ \r
1298
+ return (\r
1299
+ <div className={\`\${P}-wrapper \${wrapperStateClasses}\`.trim()} style={colorVars}>\r
1300
+ <style dangerouslySetInnerHTML={{ __html: getCSS(P) }} />\r
1301
+ <form\r
1302
+ onSubmit={handleSubmit}\r
1303
+ className={\`\${P}-form\`}\r
1304
+ style={{\r
1305
+ ...formStyle,\r
1306
+ height: scalingValue(minHeight, isEditor),\r
1307
+ minHeight: scalingValue(minHeight, isEditor),\r
1308
+ }}\r
1309
+ >\r
1310
+ <div\r
1311
+ className={\`\${P}-inputWrap \${P}-overlayAnchor\`}\r
1312
+ style={{ flex: 1, minWidth: 0 }}\r
1313
+ >\r
1314
+ {visibleFields.map((field) => (\r
1315
+ <input\r
1316
+ key={field.name}\r
1317
+ type={field.type === 'email' ? 'email' : field.type === 'phone' ? 'tel' : 'text'}\r
1318
+ name={field.name}\r
1319
+ autoComplete="off"\r
1320
+ value={displayValues[field.name] ?? ''}\r
1321
+ onChange={(e) => setValues((prev) => ({ ...prev, [field.name]: e.target.value }))}\r
1322
+ placeholder={field.placeholder}\r
1323
+ required={field.isRequired ?? field.type === 'email'}\r
1324
+ className={\`\${P}-input\`}\r
1325
+ style={{\r
1326
+ ...inputTypographyCss,\r
1327
+ paddingRight: scalingValue(inputPadding.right, isEditor),\r
1328
+ paddingLeft: scalingValue(inputPadding.left, isEditor),\r
1329
+ paddingTop: scalingValue(inputPadding.top, isEditor),\r
1330
+ paddingBottom: scalingValue(inputPadding.bottom, isEditor),\r
1331
+ }}\r
1332
+ />\r
1333
+ ))}\r
1334
+ </div>\r
1335
+ <div className={\`\${P}-overlayAnchor\`}>\r
1336
+ <button\r
1337
+ type="submit"\r
1338
+ className={\`\${P}-submitBtn\`}\r
1339
+ aria-label={submitAriaLabel}\r
1340
+ style={{\r
1341
+ ...buttonTypographyCss,\r
1342
+ ...dividerWidthStyle,\r
1343
+ paddingRight: scalingValue(buttonPadding.right, isEditor),\r
1344
+ paddingLeft: scalingValue(buttonPadding.left, isEditor),\r
1345
+ paddingTop: scalingValue(buttonPadding.top, isEditor),\r
1346
+ paddingBottom: scalingValue(buttonPadding.bottom, isEditor),\r
1347
+ }}\r
1348
+ >\r
1349
+ {status === 'submitting'\r
1350
+ ? '...'\r
1351
+ : useIconButton\r
1352
+ ? (iconSrc && (\r
1353
+ <SvgImage\r
1354
+ url={iconSrc}\r
1355
+ className={\`\${P}-submitBtnIcon\`}\r
1356
+ fill={\`var(--\${P}-button-text-color)\`}\r
1357
+ hoverFill={\`var(--\${P}-button-text-color)\`}\r
1358
+ />\r
1359
+ ))\r
1360
+ : labelText}\r
1361
+ </button>\r
1362
+ </div>\r
1363
+ </form>\r
1364
+ {displayStatus === 'success' && (\r
1365
+ <p\r
1366
+ className={\`\${P}-success\`}\r
1367
+ style={{ ...statusTypographyCss }}\r
1368
+ >\r
1369
+ {successMessage}\r
1370
+ </p>\r
1371
+ )}\r
1372
+ {displayStatus === 'error' && (\r
1373
+ <p\r
1374
+ className={\`\${P}-error\`}\r
1375
+ style={{ ...statusTypographyCss }}\r
1376
+ role="alert"\r
1377
+ >\r
1378
+ {validationErrorMessage ?? displayError ?? errorMessageText}\r
1379
+ </p>\r
1380
+ )}\r
1381
+ </div>\r
1382
+ );\r
1383
+ };\r
1384
+ \r
1385
+ type FieldConfig = {\r
1386
+ name: string;\r
1387
+ type: 'text' | 'phone' | 'email';\r
1388
+ placeholder: string;\r
1389
+ isRequired?: boolean;\r
1390
+ error?: string;\r
1391
+ };\r
1392
+ \r
1393
+ type OnelinerColorKeys =\r
1394
+ | 'strokeColor'\r
1395
+ | 'inputColor'\r
1396
+ | 'placeholderColor'\r
1397
+ | 'buttonColor'\r
1398
+ | 'inputTextColor'\r
1399
+ | 'buttonTextColor'\r
1400
+ | 'successColor'\r
1401
+ | 'errorColor';\r
1402
+ \r
1403
+ type StateColorOverrides = Partial<Record<OnelinerColorKeys, string>>;\r
1404
+ \r
1405
+ export type OnelinerFormButtonContent = {\r
1406
+ mode?: 'On' | 'Off';\r
1407
+ icon?: string | null;\r
1408
+ };\r
1409
+ \r
1410
+ export type OnelinerFormSettings = {\r
1411
+ fields: FieldConfig[];\r
1412
+ fieldsToShow: number;\r
1413
+ buttonLabel?: string | null;\r
1414
+ buttonContent?: OnelinerFormButtonContent | null;\r
1415
+ fontFamily?: string;\r
1416
+ inputFontSettings?: { fontWeight: number; fontStyle: string };\r
1417
+ inputFontSize?: number;\r
1418
+ inputLineHeight?: number;\r
1419
+ inputLetterSpacing?: number;\r
1420
+ inputWordSpacing?: number;\r
1421
+ inputTextAppearance?: TextStyles['textAppearance'];\r
1422
+ buttonFontSettings?: { fontWeight: number; fontStyle: string };\r
1423
+ buttonFontSize?: number;\r
1424
+ buttonLineHeight?: number;\r
1425
+ buttonLetterSpacing?: number;\r
1426
+ buttonWordSpacing?: number;\r
1427
+ buttonTextAppearance?: TextStyles['textAppearance'];\r
1428
+ statusFontSettings?: { fontWeight: number; fontStyle: string };\r
1429
+ statusFontSize?: number;\r
1430
+ statusLineHeight?: number;\r
1431
+ statusLetterSpacing?: number;\r
1432
+ statusWordSpacing?: number;\r
1433
+ statusTextAppearance?: TextStyles['textAppearance'];\r
1434
+ minHeight: number;\r
1435
+ corners: number;\r
1436
+ stroke: number;\r
1437
+ inputPadding: {\r
1438
+ left: number;\r
1439
+ right: number;\r
1440
+ top: number;\r
1441
+ bottom: number;\r
1442
+ };\r
1443
+ buttonPadding: {\r
1444
+ left: number;\r
1445
+ right: number;\r
1446
+ top: number;\r
1447
+ bottom: number;\r
1448
+ };\r
1449
+ strokeColor: string;\r
1450
+ inputColor: string;\r
1451
+ placeholderColor: string;\r
1452
+ buttonColor: string;\r
1453
+ successColor: string;\r
1454
+ errorColor: string;\r
1455
+ inputTextColor?: string;\r
1456
+ buttonTextColor?: string;\r
1457
+ stateOverrides?: Record<string, StateColorOverrides>;\r
1458
+ successMessage?: string;\r
1459
+ errorMessage?: string;\r
1460
+ };\r
1461
+ \r
1462
+ const COLOR_VAR_MAP: Record<OnelinerColorKeys, string> = {\r
1463
+ strokeColor: 'stroke-color',\r
1464
+ inputColor: 'input-color',\r
1465
+ placeholderColor: 'placeholder-color',\r
1466
+ buttonColor: 'button-color',\r
1467
+ inputTextColor: 'input-text-color',\r
1468
+ buttonTextColor: 'button-text-color',\r
1469
+ successColor: 'success-color',\r
1470
+ errorColor: 'error-color',\r
1471
+ };\r
1472
+ \r
1473
+ const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;\r
1474
+ `,Gl="data:image/svg+xml,"+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="6" height="9"><path fill="white" transform="translate(0.0625 0.0595703)" d="M0.18305826 0.18305826C0.40836075 -0.042244215 0.76288015 -0.059575174 1.0080621 0.13106538L1.0669417 0.18305826L4.8169417 3.9330583C5.0422444 4.158361 5.0595751 4.5128803 4.8689346 4.7580624L4.8169417 4.8169417L1.0669417 8.5669422C0.82286406 8.8110189 0.42713594 8.8110189 0.18305826 8.5669422C-0.042244215 8.3416395 -0.059575174 7.9871197 0.13106538 7.7419376L0.18305826 7.6830583L3.4906249 4.375L0.18305826 1.0669417C-0.042244215 0.84163928 -0.059575174 0.48711985 0.13106538 0.24193785L0.18305826 0.18305826Z" fill-rule="evenodd"/></svg>'),Yl=[{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."}],$r={fontSettings:{type:"object",display:{type:"font-settings-weight",visible:!0},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},ql=["strokeColor","inputColor","inputTextColor","placeholderColor","buttonColor","buttonTextColor","successColor","errorColor"],Xl={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"}},buttonContent:{type:"object",scope:"common",title:"Button Icon",display:{type:"button-content-switch"},properties:{mode:{type:"string",enum:["On","Off"]},icon:{type:["string","null"],title:"Icon",display:{type:"settings-image-input"}}}},fontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},inputPadding:{type:"object",scope:"layout",title:"",display:{type:"padding-controls"}},buttonPadding:{type:"object",scope:"layout",title:"",display:{type:"padding-controls"}},minHeight:{type:"number",scope:"layout",title:"min Height",display:{type:"range-control"},min:0,max:200},corners:{type:"number",scope:"layout",title:"Corners",display:{type:"range-control"},min:0,max:100},stroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"range-control"},min:0,max:20},strokeColor:{type:"string",scope:"common",title:"Stroke",display:{type:"palette-color-picker"}},inputColor:{type:"string",scope:"common",title:"Input Fill",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 Text",display:{type:"palette-color-picker"}},buttonColor:{type:"string",scope:"common",title:"Button Fill",display:{type:"palette-color-picker"}},buttonTextColor:{type:"string",scope:"common",title:"Button Label",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:{...$r.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:{...$r.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:{...$r.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:Yl,fieldsToShow:1,buttonLabel:"Subscribe",buttonContent:{mode:"Off",icon:Gl},fontFamily:"Arial",strokeColor:"#0A00F8",inputColor:"#ffffff",inputTextColor:"#0A00F8",placeholderColor:"#000000",buttonColor:"#0088D7",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,stroke:0,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,stroke:0,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:"buttonContent.mode",value:"On"},then:{name:"properties.buttonFontSettings.display.visible",value:!1}},{if:{name:"buttonContent.mode",value:"On"},then:{name:"properties.buttonFontSize.display.visible",value:!1}},{if:{name:"buttonContent.mode",value:"On"},then:{name:"properties.buttonLineHeight.display.visible",value:!1}},{if:{name:"buttonContent.mode",value:"On"},then:{name:"properties.buttonLetterSpacing.display.visible",value:!1}},{if:{name:"buttonContent.mode",value:"On"},then:{name:"properties.buttonWordSpacing.display.visible",value:!1}},{if:{name:"buttonContent.mode",value:"On"},then:{name:"properties.buttonTextAppearance.display.visible",value:!1}}]},panels:[{id:"general",icon:"cursor",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","fieldsToShow"]},{type:"row",items:["minHeight","corners"]},{type:"row",items:[{type:"group",title:"",items:["stroke","buttonContent"]},{type:"switcher",title:"Padding",options:{Input:["inputPadding"],Button:["buttonPadding"]}}]}]},{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:[...ql],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"]},Kl={element:Ml,id:"oneliner-form",name:"Newsletter Single Line",version:1,preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/onelinerImg.png"},defaultSize:{width:400,height:60},schema:Xl,sourceCode:Ul},Jl=[wa,Ha,kl,Ol,Kl,Ba];exports.components=Jl;exports.isSchemaV1=yo;