@cntrl-site/components 1.0.17-alpha.6 → 1.0.17-alpha.7

package/dist/index.js

@@ -8847,7 +8847,7 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
   pointer-events: auto;
   z-index: 10;
 }
-`}function mm(e){if(!Array.isArray(e)||e.length===0)return{};const t=e.find(o=>(o==null?void 0:o.type)==="paragraph")??e[0],n=t==null?void 0:t.children;if(!Array.isArray(n))return{};const i=n.map(o=>typeof(o==null?void 0:o.text)=="string"?o.text.trim():"").filter(Boolean);return{title1:i[0],title2:i[1],title3:i[2]}}function gm(e){for(const t of e)if(t.title1||t.title2||t.title3)return{title1:t.title1??"",title2:t.title2??"",title3:t.title3??""};for(const t of e){const n=mm(t.text);if(n.title1||n.title2||n.title3)return{title1:n.title1??"",title2:n.title2??"",title3:n.title3??""}}return{title1:"",title2:"",title3:""}}const Ki=["title1","title2","title3"];function st(e,t){return`${e}${t.charAt(0).toUpperCase()}${t.slice(1)}`}const hm={title1:"1",title2:"2",title3:"3"};function fm(e){return[st(e,"fontFamily"),st(e,"fontSettings"),{type:"row",items:[st(e,"fontSize"),st(e,"lineHeight"),st(e,"letterSpacing"),st(e,"wordSpacing")]},st(e,"textAlign"),st(e,"textAppearance")]}function ym(){return{type:"tab",id:"stripTextStyle",tabs:Object.fromEntries(Ki.map(e=>[hm[e],fm(e)]))}}const vm={title1:"title1Color",title2:"title2Color",title3:"title3Color"},xm={title1:.02,title2:.02,title3:.02},ti=.004,eo=.004;function Kr(e,t){if(e<=0)return[];const n=t.slice(0,e),i=n.reduce((l,s)=>l+s,0);if(i<=1)return n;const{widths:o}=[...n].reverse().reduce(({overflow:l,widths:s},d)=>{if(l<=0||d<=0)return{overflow:l,widths:[d,...s]};const a=Math.min(l,d);return{overflow:l-a,widths:[d-a,...s]}},{overflow:i-1,widths:[]});return o}function Ds(e,t){return Kr(e,t)}function to(e,t){const n=t.filter((i,o)=>o!==e).reduce((i,o)=>i+o,0);return Math.max(1-n,0)}function Hl(e,t){const n=e.map(i=>t[i.widthKey]??0);return{resolved:Kr(e.length,n),effective:Ds(e.length,n)}}function bm(e,t,n,i,o,l,s){const d=[];return t&&d.push({prefix:"title1",widthKey:"title1Width",className:`${e}-title1`,style:o,text:t}),n&&d.push({prefix:"title2",widthKey:"title2Width",marginLeftKey:"title2MarginLeft",className:`${e}-title2`,style:l,text:n}),i&&d.push({prefix:"title3",widthKey:"title3Width",marginLeftKey:"title3MarginLeft",className:`${e}-title3`,style:s,text:i}),d}function Qo(e,t){const n=i=>{const o=st(t,i);return e[o]};return{fontFamily:n("fontFamily")??"Arial",fontSettings:n("fontSettings")??{fontWeight:400,fontStyle:"normal"},fontSize:n("fontSize"),lineHeight:n("lineHeight"),letterSpacing:n("letterSpacing")??0,wordSpacing:n("wordSpacing")??0,textAlign:n("textAlign")??"left",textAppearance:n("textAppearance"),color:e[vm[t]]}}function Sm(e,t,n,i){return e.slice(0,i).reduce((o,l,s)=>o+(l!=null&&l.marginLeftKey?n[l.marginLeftKey]??0:0)+(t[s]??0),0)}function er(e,t,n){var o,l;const i={fontSettings:{fontFamily:t.fontFamily,fontWeight:((o=t.fontSettings)==null?void 0:o.fontWeight)??400,fontStyle:((l=t.fontSettings)==null?void 0:l.fontStyle)??"normal"},fontSize:t.fontSize??xm[e],lineHeight:t.lineHeight,letterSpacing:t.letterSpacing,wordSpacing:t.wordSpacing,textAlign:t.textAlign,textAppearance:t.textAppearance,color:t.color??"#ffffff"};return Pt(i,n)}const wm=1,Bl=.15,Cm=3,Tm=20,tr=e=>`max(${e}, ${Tm}px)`,$m=({prefix:e,images:t,settings:n,isEditor:i,isEditMode:o,isPreviewMode:l,onClose:s})=>{const{backgroundColor:d,thumbnailGap:a,thumbnailMarginBottom:p,imageGap:u,closeIcon:S,closeIconMaxWidth:x,closeIconColor:v,closeIconHoverColor:m,thumbnailTrigger:y,thumbnailVisibility:$,thumbnailObjectFit:w,thumbnailActive:C,thumbnailActiveColor:T,title1Width:P,title2Width:M,title3Width:F,title1MarginLeft:b=0,title2MarginLeft:W=0,title3MarginLeft:K=0,titleRowMarginBottom:h=0,titleHeaderLayout:L="desktop",contentMarginTop:E,iconMarginLeft:k}=n,z=f=>R.scalingValue(f,i??!1),le=z(a),O=z(p??.02),_=z(u??0),q=z(E??0),G=z(k??0),{title1:H,title2:X,title3:ne}=gm(t),se=er("title1",Qo(n,"title1"),i),N=er("title2",Qo(n,"title2"),i),de=er("title3",Qo(n,"title3"),i),g=o,ie=L==="mobile",fe=!o&&(!i||l),oe=fe,Ce=fe,me=fe,re=wn(w),B=re?{"--image-aspect-ratio":No(w)}:void 0,Q=!!(H||X||ne),U=c.useMemo(()=>bm(e,H,X,ne,se,N,de),[e,H,X,ne,se,N,de]),J=c.useMemo(()=>({title1Width:P,title2Width:M,title3Width:F}),[P,M,F]),Me=c.useMemo(()=>U.map(f=>J[f.widthKey]),[U,J]),Ae=c.useMemo(()=>Kr(U.length,Me),[U.length,Me]),ke=c.useMemo(()=>Ds(U.length,Me),[U.length,Me]),Fe=c.useMemo(()=>U.filter(f=>f.prefix==="title1"),[U]),xe=c.useMemo(()=>U.filter(f=>f.prefix==="title2"||f.prefix==="title3"),[U]),j=c.useMemo(()=>Hl(Fe,J),[Fe,J]),ae=c.useMemo(()=>Hl(xe,J),[xe,J]),A=c.useCallback((f,V)=>{const ee=U.indexOf(f);if(!ie||V==="single-row")return{effectiveWidth:ke[ee]??0,resolvedWidth:Ae[ee]??0,maxWidth:to(ee,Ae)};if(V==="two-row-top"){const we=Fe.indexOf(f);return{effectiveWidth:j.effective[we]??0,resolvedWidth:j.resolved[we]??0,maxWidth:to(we,j.resolved)}}const he=xe.indexOf(f);return{effectiveWidth:ae.effective[he]??0,resolvedWidth:ae.resolved[he]??0,maxWidth:to(he,ae.resolved)}},[xe,ae,ke,Ae,U,Fe,j,ie]),D=c.useCallback(f=>R.scalingValue(f,i??!1),[i]),Y=D(h??0),Z=c.useMemo(()=>({title1MarginLeft:b,title2MarginLeft:W,title3MarginLeft:K}),[b,W,K]),ge=c.useCallback(f=>U.slice(0,f+1).reduce((V,ee,he)=>V+(ee!=null&&ee.marginLeftKey?Z[ee.marginLeftKey]??0:0)+(Ae[he]??0),0)+(ie?0:b??0),[U,Z,Ae,ie,b]),Te=c.useCallback(()=>ie?0:b??0,[ie,b]),je=c.useCallback(f=>xe.slice(0,f).reduce((V,ee,he)=>V+(ee.marginLeftKey?Z[ee.marginLeftKey]??0:0)+(ae.resolved[he]??0),0),[xe,ae.resolved,Z]),_e=c.useCallback(f=>{const V=xe[f];return je(f)+(V.marginLeftKey?Z[V.marginLeftKey]??0:0)+(ae.resolved[f]??0)},[xe,ae.resolved,je,Z]),Le=(f,V)=>{const ee=f.marginLeftKey?Z[f.marginLeftKey]??0:0,{effectiveWidth:he,resolvedWidth:we,maxWidth:Je}=A(f,V),Lt=Math.max(ee,eo),Rt=g&&V==="two-row-top";return r.jsxs("div",{className:`${e}-title-cell`,"data-title":f.prefix,style:{...V==="single-row"?{gridArea:f.prefix}:{},width:D(he),...ee>0?{marginLeft:D(ee)}:{}},children:[r.jsx("p",{className:f.className,style:f.style,children:f.text}),Rt&&f.marginLeftKey?r.jsx("div",{"data-controls":f.marginLeftKey,"data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(we),style:{position:"absolute",top:0,left:D(-ee),width:D(Lt),height:"100%",pointerEvents:"auto"}}):null,Rt?r.jsx("div",{"data-controls":f.widthKey,"data-controls-axis":"x","data-controls-max-fraction":String(Je),"data-controls-variant":"column-width",className:`${e}-title-resize-handle`,style:{position:"absolute",top:0,right:D(-ti/2),width:D(ti),height:"100%",pointerEvents:"auto"}}):null]},f.className)},Ge=()=>{const f=ie?-1:U.findIndex(he=>he.prefix==="title1"),V=!ie&&(g||(b??0)>0)?(()=>{const we=Math.max(b??0,eo),Je=f>=0?Ae[f]:P;return r.jsx("div",{"data-controls":"title1MarginLeft","data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(Je),style:{position:"absolute",top:0,left:0,width:D(we),height:"100%",pointerEvents:"auto"}},"title1MarginLeft")})():null,ee=U.flatMap((he,we)=>{if(!he.marginLeftKey)return[];const Je=Z[he.marginLeftKey]??0,Lt=Sm(U,Ae,Z,we)+Te(),Rt=Math.max(Je,eo);return r.jsx("div",{"data-controls":he.marginLeftKey,"data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(Ae[we]),style:{position:"absolute",top:0,left:D(Lt),width:D(Rt),height:"100%",pointerEvents:"auto"}},he.marginLeftKey)});return V?[V,...ee]:ee},pe=()=>U.map((f,V)=>{const ee=to(V,Ae),we=ge(V)-ti/2;return r.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:r.jsx("div",{"data-controls":f.widthKey,"data-controls-axis":"x","data-controls-max-fraction":String(ee),"data-controls-variant":"column-width",className:`${e}-title-resize-handle`,style:{position:"absolute",top:0,left:D(we),width:D(ti),height:"100%",pointerEvents:"auto"}})},`${f.widthKey}-junction`)}),We=()=>xe.flatMap((f,V)=>{if(!f.marginLeftKey)return[];const ee=Z[f.marginLeftKey]??0,he=je(V),we=Math.max(ee,eo),{resolvedWidth:Je}=A(f,"two-row-bottom");return r.jsx("div",{"data-controls":f.marginLeftKey,"data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(Je),style:{position:"absolute",top:0,left:D(he),width:D(we),height:"100%",pointerEvents:"auto"}},f.marginLeftKey)}),ze=()=>xe.map((f,V)=>{const{maxWidth:ee}=A(f,"two-row-bottom"),we=_e(V)-ti/2;return r.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:r.jsx("div",{"data-controls":f.widthKey,"data-controls-axis":"x","data-controls-max-fraction":String(ee),"data-controls-variant":"column-width",className:`${e}-title-resize-handle`,style:{position:"absolute",top:0,left:D(we),width:D(ti),height:"100%",pointerEvents:"auto"}})},`${f.widthKey}-junction`)}),Ve=c.useRef(null),Ne=c.useRef(null),It=c.useRef(null),dt=c.useRef([]),bt=c.useRef(0),Ze=c.useRef({isActive:!1,startX:0,scrollLeft:0,hasMoved:!1}),yt=c.useRef(null),Mt=c.useRef(0),Ht=c.useRef("forward"),Ee=c.useRef(0),it=c.useRef(null),Ue=c.useRef(!1),ut=t.length>1,Bt=ut?Cm:1,rn=c.useMemo(()=>Array.from({length:Bt},()=>t).flat(),[t,Bt]),[jt,Yt]=c.useState(!1),[ln,He]=c.useState(!1),[Tt,pt]=c.useState(!0),[et,mt]=c.useState(0),zt=c.useRef(et);zt.current=et;const Vt=c.useRef(null),Jt=c.useRef(!1),pn=c.useRef(null),Ke=c.useRef(null),Zt=oe&&!Tt,kt=c.useCallback(()=>{oe&&(pt(!0),Ke.current&&clearTimeout(Ke.current),Ke.current=setTimeout(()=>{Ze.current.isActive||pt(!1)},am))},[oe]),Pe=c.useCallback(()=>{o||Jt.current||(Jt.current=!0,He(!1),pn.current=setTimeout(()=>{s()},ci))},[o,s]),ft=()=>r.jsxs("div",{className:`${e}-close-icon`,"data-overlay-content-hidden":Zt?"true":"false",style:{width:R.scalingValue(x??0,i),height:R.scalingValue(x??0,i),marginRight:G,"--close-icon-hover-color":m},children:[r.jsx("button",{type:"button",className:`${e}-close-icon-inner`,onClick:Pe,"aria-label":"Close",children:r.jsx(an,{url:S,fill:v,hoverFill:m,className:`${e}-close-icon-img`})}),g?r.jsx("div",{"data-controls":"iconMarginLeft","data-controls-axis":"x","data-controls-reverse":"",className:`${e}-control`,style:{position:"absolute",top:0,left:"100%",width:G,height:"100%",pointerEvents:"auto"}}):null]}),Wt=(f="two-row")=>r.jsx("div",{...f==="two-row"&&g?{"data-controls":"title1MarginLeft","data-controls-axis":"x"}:{},style:{width:D(b??0),flexShrink:0,...f==="single-row"?{gridArea:"margin"}:{alignSelf:"stretch"},...f==="two-row"&&g?{pointerEvents:"auto"}:{}}}),te=()=>{const f=U.find(he=>he.prefix==="title1"),V=U.filter(he=>he.prefix==="title2"||he.prefix==="title3"),ee=V.length>0||g||(h??0)>0;return r.jsxs(r.Fragment,{children:[r.jsxs("div",{className:`${e}-header-row-top`,children:[(b??0)>0||g?Wt():null,f?Le(f,"two-row-top"):null,S?ft():null]}),ee?r.jsxs("div",{className:`${e}-header-row-bottom-wrap`,children:[V.length>0?r.jsxs("div",{className:`${e}-header-row-bottom`,children:[V.map(he=>Le(he,"two-row-bottom")),g?r.jsxs(r.Fragment,{children:[We(),ze()]}):null]}):null,r.jsx("div",{"data-controls":g?"titleRowMarginBottom":void 0,"data-controls-axis":g?"y":void 0,"data-controls-reverse":g?"":void 0,className:g?`${e}-control`:void 0,style:{height:Y,width:"100%",flexShrink:0,pointerEvents:g?"auto":"none"}})]}):null]})},ye=()=>r.jsxs(r.Fragment,{children:[(b??0)>0||g?Wt("single-row"):null,U.map(f=>Le(f,"single-row")),g?r.jsxs(r.Fragment,{children:[Ge(),pe()]}):null,S?ft():null]}),Ie=c.useCallback(f=>!!(f.closest("[data-controls]")||f.closest(`.${e}-thumbnails`)||f.closest(`.${e}-close-icon`)),[e]),{isSwipeDragging:De,backdropStyle:qe,mediaAreaStyle:Qe,overlayContentStyle:ve,swipeHandlers:$t,dismissAreaStyle:gt}=Bs({enabled:fe??!1,onClose:Pe,animMs:ci,isBlockedTarget:Ie}),ht=()=>{if(!ut||t.length===0)return bt.current=0,0;const f=dt.current[0],V=dt.current[t.length];if(!f||!V)return bt.current;const ee=V.offsetLeft-f.offsetLeft;return ee>0&&(bt.current=ee),bt.current},ot=(f=!1)=>{if(!ut)return;const V=Ne.current,ee=ht();!V||ee<=0||(V.scrollLeft<=0?(V.scrollLeft+=ee,f&&(Ze.current.scrollLeft+=ee),Ue.current&&(Ee.current+=ee)):V.scrollLeft>=ee*2&&(V.scrollLeft-=ee,f&&(Ze.current.scrollLeft-=ee),Ue.current&&(Ee.current-=ee)))},Be=(f=(V=>(V=Ne.current)==null?void 0:V.scrollLeft)()??0)=>{var Lt;const ee=((Lt=Ne.current)==null?void 0:Lt.clientWidth)??0,he=f+ee/2;let we=-1,Je={flatIndex:0,distance:1/0};return dt.current.forEach((Rt,In)=>{if(!Rt)return;const Rn=Rt.offsetLeft,mn=Rn+Rt.offsetWidth;we===-1&&he>=Rn&&he<mn&&(we=In);const I=Math.abs(Rn-f);I<Je.distance&&(Je={flatIndex:In,distance:I})}),we!==-1?we:Je.flatIndex},vt=f=>{const V=Ne.current;return!f||!V?!1:f.offsetWidth>V.clientWidth+1},rt=f=>{Ne.current&&dt.current.forEach(V=>{V&&(V.style.scrollSnapAlign=vt(V)&&f==="backward"?"end":"start")})},wt=f=>{const V=Ne.current;if(!f||!V||!vt(f))return!1;const ee=f.offsetLeft,he=ee+f.offsetWidth;return V.scrollLeft>=ee-1&&V.scrollLeft+V.clientWidth<=he+1},_t=()=>{!Ne.current||t.length===0||Vt.current===null&&mt(Be()%t.length)},St=()=>{Vt.current=null},At=f=>{const V=Ne.current;V&&(V.style.scrollSnapType=f?"":"none")},tt=()=>{var f;(f=yt.current)==null||f.call(yt),yt.current=null},Ft=()=>{it.current!==null&&(cancelAnimationFrame(it.current),it.current=null),Ue.current=!1},Kt=()=>{const f=Ne.current;if(!f){it.current=null,Ue.current=!1;return}const V=Ee.current-f.scrollLeft;if(Math.abs(V)<.5){f.scrollLeft=Ee.current,ot(),_t(),it.current=null,Ue.current=!1;return}f.scrollLeft+=V*um,ot(),_t(),kt(),it.current=requestAnimationFrame(Kt)},$n=()=>{const f=It.current;f&&(f.style.transition="",f.style.transform="",f.style.willChange="")},Bn=(f,V,ee,he)=>{$n(),f.scrollLeft=V,Mt.current=f.scrollLeft,ot(),ee!==void 0?mt(ee):_t(),At(!0),he==null||he()},Ln=(f,{behavior:V="smooth",activeIndex:ee,onComplete:he}={})=>{const we=Ne.current,Je=It.current;if(!we||!Je)return;if(Ft(),tt(),At(!1),V==="auto"){Bn(we,f,ee,he);return}const Lt=Math.abs(f-we.scrollLeft),Rt=tm(Lt,rm,lm,we.clientWidth*.55);yt.current=om(we,Je,f,{duration:Rt,easing:sm,onComplete:()=>{yt.current=null,Bn(we,f,ee,he)}})},Yn=(f="smooth")=>{if(!Ne.current||t.length===0)return;const ee=Be(),he=dt.current[ee];he&&Ln(he.offsetLeft,{behavior:f,activeIndex:ee%t.length})},Jn=(f,V="smooth")=>{const ee=Ne.current;if(!ee||t.length===0)return;const he=ee.scrollLeft-f,we=Be(ee.scrollLeft),Je=dt.current[we];if(wt(Je)){At(!0),_t();return}const Lt=dt.current[we+1],Rt=Je?Lt?Lt.offsetLeft-Je.offsetLeft:Je.offsetWidth:0,In=Rt>0?he>Rt*Bl?1:he<-Rt*Bl?-1:0:0,Rn=ut?we+In:Math.max(0,Math.min(rn.length-1,we+In)),mn=dt.current[Rn];if(!mn){Yn(V);return}const ce=he<0&&vt(mn)?mn.offsetLeft+mn.offsetWidth-ee.clientWidth:mn.offsetLeft,Re=Rn%t.length;V==="smooth"&&(Vt.current=Re),mt(Re),Ln(ce,{behavior:V,activeIndex:Re,onComplete:V==="smooth"?St:void 0})},Qt=(f,V="smooth")=>{const ee=Ne.current,he=ut?t.length+f:f,we=dt.current[he];!ee||!we||(V==="smooth"?Vt.current=f:Vt.current=null,mt(f),Ln(we.offsetLeft,{behavior:V,activeIndex:f,onComplete:V==="smooth"?St:void 0}))},Si=f=>{if(!Ce)return;if(f.pointerType==="touch"){Ft(),At(!0);return}if(f.pointerType!=="mouse"||f.button!==0||Ie(f.target))return;const V=Ne.current;V&&(Ft(),tt(),$n(),Vt.current=null,Ze.current={isActive:!0,startX:f.clientX,scrollLeft:V.scrollLeft,hasMoved:!1},At(!1),kt(),V.setPointerCapture(f.pointerId))},Zn=f=>{if(!Ce||f.pointerType!=="mouse")return;const V=Ne.current;if(!V||!Ze.current.isActive)return;const ee=f.clientX-Ze.current.startX;Math.abs(ee)>wm&&(Ze.current.hasMoved=!0,Yt(!0)),Ze.current.hasMoved&&(f.preventDefault(),V.scrollLeft=Ze.current.scrollLeft-ee,ot(!0),_t(),kt())},En=f=>{if(!Ce||f.pointerType!=="mouse")return;const V=Ne.current;if(!V)return;const ee=Ze.current.hasMoved,he=Ze.current.scrollLeft;Ze.current.isActive=!1,Yt(!1),V.hasPointerCapture(f.pointerId)&&V.releasePointerCapture(f.pointerId),ot(),ee?Jn(he):(At(!0),_t()),kt()};return Os(),c.useEffect(()=>{const f=requestAnimationFrame(()=>He(!0));return()=>{cancelAnimationFrame(f),tt(),pn.current&&clearTimeout(pn.current),Ke.current&&clearTimeout(Ke.current)}},[]),c.useEffect(()=>{if(!oe){pt(!0);return}kt();const f=Ve.current;if(!f)return;const V=()=>kt();return f.addEventListener("pointermove",V),f.addEventListener("pointerdown",V),()=>{f.removeEventListener("pointermove",V),f.removeEventListener("pointerdown",V),Ke.current&&clearTimeout(Ke.current)}},[oe,kt]),c.useEffect(()=>{const f=V=>{V.key==="Escape"&&Pe()};return window.addEventListener("keydown",f),()=>window.removeEventListener("keydown",f)},[Pe]),c.useLayoutEffect(()=>{ht(),Qt(zt.current,"auto")},[_]),c.useLayoutEffect(()=>{ht(),Qt(0,"auto")},[t.length,ut]),c.useEffect(()=>{if(!o)return;const f=Ne.current;if(!f)return;const V=ee=>{ee.preventDefault()};return f.addEventListener("wheel",V,{passive:!1}),f.addEventListener("touchmove",V,{passive:!1}),()=>{f.removeEventListener("wheel",V),f.removeEventListener("touchmove",V)}},[o]),c.useEffect(()=>{const f=Ne.current;if(!f||!fe)return;const V=ee=>{if(ee.preventDefault(),Math.abs(ee.deltaY)<=Math.abs(ee.deltaX))return;const he=ee.deltaMode===1?dm:ee.deltaMode===2?f.clientHeight:1,we=ee.deltaY*he*cm;if(we!==0){if(tt(),Ue.current||(Ue.current=!0,Ee.current=f.scrollLeft,Vt.current=null,At(!1)),Ee.current+=we,!ut){const Je=f.scrollWidth-f.clientWidth;Ee.current=Math.max(0,Math.min(Je,Ee.current))}kt(),it.current===null&&(it.current=requestAnimationFrame(Kt))}};return f.addEventListener("wheel",V,{passive:!1}),()=>{f.removeEventListener("wheel",V),Ft()}},[fe,t.length,ut]),c.useEffect(()=>{const f=Ne.current;if(!f)return;const V=()=>{ot();const he=f.scrollLeft,we=he-Mt.current;Mt.current=he;const Je=bt.current>0?bt.current*.5:1/0;if(we!==0&&Math.abs(we)<Je){const Lt=we>0?"forward":"backward";Lt!==Ht.current&&(Ht.current=Lt,rt(Lt))}_t()};f.addEventListener("scroll",V,{passive:!0});const ee=new ResizeObserver(()=>{ht(),ot(),rt(Ht.current),_t()});return ee.observe(f),()=>{tt(),f.removeEventListener("scroll",V),ee.disconnect()}},[t.length,ut]),r.jsxs("div",{"data-selection":"none",className:`${e}-lightbox${i?` ${e}-lightbox-editor`:""}${o?` ${e}-lightbox-edit-mode`:""}`,onClick:()=>{De||Pe()},role:"dialog","aria-modal":"true","aria-label":"Image gallery",style:{opacity:ln?1:0,transition:`opacity ${ci}ms ease`,pointerEvents:ln?"auto":"none"},children:[r.jsx("div",{className:`${e}-lightbox-backdrop`,style:{backgroundColor:d,...qe}}),r.jsxs("div",{ref:Ve,className:`${e}-lightbox-dismiss-area`,style:{position:"relative",width:"100%",height:"100%",...gt},...$t,children:[r.jsx("div",{className:`${e}-lightbox-content`,style:Qe,onClick:f=>f.stopPropagation(),children:r.jsx("div",{ref:Ne,className:`${e}-lightbox-strip`,"data-lightbox-scrollable":"","data-mouse-draggable":Ce&&t.length>0?"true":"false","data-mouse-dragging":jt?"true":"false",onPointerDown:Si,onPointerMove:Zn,onPointerUp:En,onPointerCancel:En,children:r.jsx("div",{ref:It,className:`${e}-lightbox-strip-track`,style:{gap:_},children:rn.map((f,V)=>{const ee=f.image.objectFit??"contain",he=V%t.length,we=Math.floor(V/t.length),Je=tr(_),Lt=`calc(-0.5 * (${Je} + ${_}))`;return r.jsxs("div",{ref:Rt=>dt.current[V]=Rt,className:`${e}-strip-item`,style:{height:L==="mobile"?"75vh":"100%"},children:[r.jsx("img",{src:f.image.url,draggable:!1,style:{display:"block",maxWidth:"100%",height:"100%",objectFit:ee}}),g&&he<t.length-1&&r.jsx("div",{"data-controls":"imageGap","data-controls-axis":"x",style:{position:"absolute",top:0,right:Lt,width:Je,height:"100%",pointerEvents:"auto",zIndex:3}})]},`${we}-${f.image.url}-${he}`)})})})}),r.jsxs("div",{className:`${e}-lightbox-content-inner`,"data-overlay-content-hidden":Zt?"true":"false",style:{width:"100%",height:"100%",top:0,bottom:0,...ve},children:[r.jsx("div",{"data-controls":g?"contentMarginTop":void 0,"data-controls-axis":g?"y":void 0,"data-controls-handle-left-fraction":g?"0.05":void 0,className:g?`${e}-control`:void 0,style:{height:q,width:"100%",pointerEvents:g?"auto":"none"}}),r.jsx("div",{style:{display:"flex",flexDirection:"row",width:"100%",flex:1,minHeight:0},children:r.jsx("div",{className:`${e}-lightbox-content-area${ie?` ${e}-lightbox-content-area-stacked`:""}`,children:(Q||S)&&r.jsx("div",{className:`${e}-header ${ie?`${e}-header-two-row`:`${e}-header-single-row`}`,children:ie?te():Q||S?ye():null})})})]}),t.length>1&&$==="on"&&(()=>{const f=tr(O),V=`calc(-0.5 * (${O} + ${f}))`;return r.jsxs("div",{className:`${e}-thumbnails`,"data-lightbox-scrollable":"","data-thumbnail-active":C,"data-overlay-content-hidden":Zt?"true":"false",onClick:ee=>ee.stopPropagation(),style:{gap:le,bottom:O,"--thumbnail-active-color":T,...ve},children:[t.map((ee,he)=>{const we=tr(le),Je=`calc(-0.5 * (${we} + ${le}))`;return r.jsxs("div",{style:{position:"relative",flex:"0 0 auto"},children:[r.jsx("button",{type:"button",className:`${e}-thumb`,"data-active":et===he?"true":"false",onClick:()=>fe&&y==="click"&&Qt(he),onMouseEnter:()=>me&&y==="hover"&&Qt(he),"aria-label":ee.image.name?`View ${ee.image.name}`:`View image ${he+1}`,"aria-current":et===he?"true":void 0,children:r.jsx("img",{className:`${e}-thumb-image${re?` ${e}-thumb-image-cover`:""}`,src:ee.image.url,alt:"",draggable:!1,style:{...B,...w.display==="Cover"?{width:ho}:{width:"100%"}}})}),g&&he<t.length-1&&r.jsx("div",{"data-controls":"thumbnailGap","data-controls-axis":"x",style:{position:"absolute",top:0,right:Je,width:we,height:"100%",pointerEvents:"auto",zIndex:3}})]},`thumb-${ee.image.url}-${he}`)}),g&&r.jsx("div",{"data-controls":"thumbnailMarginBottom","data-controls-axis":"y","data-controls-reverse":g?"":void 0,style:{position:"absolute",left:0,right:0,bottom:V,height:f,pointerEvents:"auto",zIndex:3}})]})})()]})]})},Lm=({settings:e,content:t,isEditor:n,isEditMode:i,isPreviewMode:o,portalId:l})=>{const{prefix:s}=R.useScopedStyles(),{cover:d,coverFit:a}=e,p=c.useRef(null),[u,S]=c.useState(!1),x=t??[],v=u&&x.length>0,m=()=>{x.length!==0&&(n&&!i&&!o||S(!0))},y=()=>{n||m()},$=C=>{n&&(C.stopPropagation(),m())},w=()=>{S(!1)};return c.useEffect(()=>{!n||i||o||S(!1)},[n,i,o]),r.jsxs(r.Fragment,{children:[r.jsxs("div",{ref:p,className:`${s}-wrapper`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:pm(s)}}),d?r.jsx("button",{type:"button",className:`${s}-cover ${wn(a)?`${s}-ratio-wrapper-cover`:`${s}-ratio-wrapper-fit`}`,onClick:y,onDoubleClick:$,style:{display:"block",padding:0,border:"none",background:"transparent",pointerEvents:n&&!i&&!o?"none":void 0,...wn(a)?{"--image-aspect-ratio":No(a)}:{}},"aria-label":"Open image gallery",children:r.jsx("img",{className:`${s}-cover-image ${wn(a)?`${s}-cover-image-cover`:`${s}-cover-image-fit`}`,src:d,alt:"cover"})}):null]}),v&&typeof document<"u"&&(()=>{const C=(l?document.getElementById(l):null)??document.body;return Fi.createPortal(r.jsx($m,{prefix:s,images:x,settings:e,isEditor:n,isEditMode:i,isPreviewMode:o,onClose:w}),C)})()]})},Em=`import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type MouseEvent } from 'react';
+`}function mm(e){if(!Array.isArray(e)||e.length===0)return{};const t=e.find(o=>(o==null?void 0:o.type)==="paragraph")??e[0],n=t==null?void 0:t.children;if(!Array.isArray(n))return{};const i=n.map(o=>typeof(o==null?void 0:o.text)=="string"?o.text.trim():"").filter(Boolean);return{title1:i[0],title2:i[1],title3:i[2]}}function gm(e){for(const t of e)if(t.title1||t.title2||t.title3)return{title1:t.title1??"",title2:t.title2??"",title3:t.title3??""};for(const t of e){const n=mm(t.text);if(n.title1||n.title2||n.title3)return{title1:n.title1??"",title2:n.title2??"",title3:n.title3??""}}return{title1:"",title2:"",title3:""}}const Ki=["title1","title2","title3"];function st(e,t){return`${e}${t.charAt(0).toUpperCase()}${t.slice(1)}`}const hm={title1:"1",title2:"2",title3:"3"};function fm(e){return[st(e,"fontFamily"),st(e,"fontSettings"),{type:"row",items:[st(e,"fontSize"),st(e,"lineHeight"),st(e,"letterSpacing"),st(e,"wordSpacing")]},st(e,"textAlign"),st(e,"textAppearance")]}function ym(){return{type:"tab",id:"stripTextStyle",tabs:Object.fromEntries(Ki.map(e=>[hm[e],fm(e)]))}}const vm={title1:"title1Color",title2:"title2Color",title3:"title3Color"},xm={title1:.02,title2:.02,title3:.02},ti=.004,eo=.004;function Kr(e,t){if(e<=0)return[];const n=t.slice(0,e),i=n.reduce((l,s)=>l+s,0);if(i<=1)return n;const{widths:o}=[...n].reverse().reduce(({overflow:l,widths:s},d)=>{if(l<=0||d<=0)return{overflow:l,widths:[d,...s]};const a=Math.min(l,d);return{overflow:l-a,widths:[d-a,...s]}},{overflow:i-1,widths:[]});return o}function Ds(e,t){return Kr(e,t)}function to(e,t){const n=t.filter((i,o)=>o!==e).reduce((i,o)=>i+o,0);return Math.max(1-n,0)}function Hl(e,t){const n=e.map(i=>t[i.widthKey]??0);return{resolved:Kr(e.length,n),effective:Ds(e.length,n)}}function bm(e,t,n,i,o,l,s){const d=[];return t&&d.push({prefix:"title1",widthKey:"title1Width",className:`${e}-title1`,style:o,text:t}),n&&d.push({prefix:"title2",widthKey:"title2Width",marginLeftKey:"title2MarginLeft",className:`${e}-title2`,style:l,text:n}),i&&d.push({prefix:"title3",widthKey:"title3Width",marginLeftKey:"title3MarginLeft",className:`${e}-title3`,style:s,text:i}),d}function Qo(e,t){const n=i=>{const o=st(t,i);return e[o]};return{fontFamily:n("fontFamily")??"Arial",fontSettings:n("fontSettings")??{fontWeight:400,fontStyle:"normal"},fontSize:n("fontSize"),lineHeight:n("lineHeight"),letterSpacing:n("letterSpacing")??0,wordSpacing:n("wordSpacing")??0,textAlign:n("textAlign")??"left",textAppearance:n("textAppearance"),color:e[vm[t]]}}function Sm(e,t,n,i){return e.slice(0,i).reduce((o,l,s)=>o+(l!=null&&l.marginLeftKey?n[l.marginLeftKey]??0:0)+(t[s]??0),0)}function er(e,t,n){var o,l;const i={fontSettings:{fontFamily:t.fontFamily,fontWeight:((o=t.fontSettings)==null?void 0:o.fontWeight)??400,fontStyle:((l=t.fontSettings)==null?void 0:l.fontStyle)??"normal"},fontSize:t.fontSize??xm[e],lineHeight:t.lineHeight,letterSpacing:t.letterSpacing,wordSpacing:t.wordSpacing,textAlign:t.textAlign,textAppearance:t.textAppearance,color:t.color??"#ffffff"};return Pt(i,n)}const wm=1,Bl=.15,Cm=3,Tm=20,tr=e=>`max(${e}, ${Tm}px)`,$m=({prefix:e,images:t,settings:n,isEditor:i,isEditMode:o,isPreviewMode:l,onClose:s})=>{const{backgroundColor:d,thumbnailGap:a,thumbnailMarginBottom:p,imageGap:u,closeIcon:S,closeIconMaxWidth:x,closeIconColor:v,closeIconHoverColor:m,thumbnailTrigger:y,thumbnailVisibility:$,thumbnailObjectFit:w,thumbnailActive:C,thumbnailActiveColor:T,title1Width:P,title2Width:M,title3Width:F,title1MarginLeft:b=0,title2MarginLeft:W=0,title3MarginLeft:K=0,titleRowMarginBottom:h=0,titleHeaderLayout:L="desktop",contentMarginTop:E,iconMarginLeft:k}=n,z=f=>R.scalingValue(f,i??!1),le=z(a),O=z(p??.02),_=z(u??0),q=z(E??0),G=z(k??0),{title1:H,title2:X,title3:ne}=gm(t),se=er("title1",Qo(n,"title1"),i),N=er("title2",Qo(n,"title2"),i),de=er("title3",Qo(n,"title3"),i),g=o,ie=L==="mobile",fe=!o&&(!i||l),oe=fe,Ce=fe,me=fe,re=wn(w),B=re?{"--image-aspect-ratio":No(w)}:void 0,Q=!!(H||X||ne),U=c.useMemo(()=>bm(e,H,X,ne,se,N,de),[e,H,X,ne,se,N,de]),J=c.useMemo(()=>({title1Width:P,title2Width:M,title3Width:F}),[P,M,F]),Me=c.useMemo(()=>U.map(f=>J[f.widthKey]),[U,J]),Ae=c.useMemo(()=>Kr(U.length,Me),[U.length,Me]),ke=c.useMemo(()=>Ds(U.length,Me),[U.length,Me]),Fe=c.useMemo(()=>U.filter(f=>f.prefix==="title1"),[U]),xe=c.useMemo(()=>U.filter(f=>f.prefix==="title2"||f.prefix==="title3"),[U]),j=c.useMemo(()=>Hl(Fe,J),[Fe,J]),ae=c.useMemo(()=>Hl(xe,J),[xe,J]),A=c.useCallback((f,V)=>{const ee=U.indexOf(f);if(!ie||V==="single-row")return{effectiveWidth:ke[ee]??0,resolvedWidth:Ae[ee]??0,maxWidth:to(ee,Ae)};if(V==="two-row-top"){const Se=Fe.indexOf(f);return{effectiveWidth:j.effective[Se]??0,resolvedWidth:j.resolved[Se]??0,maxWidth:to(Se,j.resolved)}}const he=xe.indexOf(f);return{effectiveWidth:ae.effective[he]??0,resolvedWidth:ae.resolved[he]??0,maxWidth:to(he,ae.resolved)}},[xe,ae,ke,Ae,U,Fe,j,ie]),D=c.useCallback(f=>R.scalingValue(f,i??!1),[i]),Y=D(h??0),Z=c.useMemo(()=>({title1MarginLeft:b,title2MarginLeft:W,title3MarginLeft:K}),[b,W,K]),ge=c.useCallback(f=>U.slice(0,f+1).reduce((V,ee,he)=>V+(ee!=null&&ee.marginLeftKey?Z[ee.marginLeftKey]??0:0)+(Ae[he]??0),0)+(ie?0:b??0),[U,Z,Ae,ie,b]),Te=c.useCallback(()=>ie?0:b??0,[ie,b]),je=c.useCallback(f=>xe.slice(0,f).reduce((V,ee,he)=>V+(ee.marginLeftKey?Z[ee.marginLeftKey]??0:0)+(ae.resolved[he]??0),0),[xe,ae.resolved,Z]),_e=c.useCallback(f=>{const V=xe[f];return je(f)+(V.marginLeftKey?Z[V.marginLeftKey]??0:0)+(ae.resolved[f]??0)},[xe,ae.resolved,je,Z]),Le=(f,V)=>{const ee=f.marginLeftKey?Z[f.marginLeftKey]??0:0,{effectiveWidth:he,resolvedWidth:Se,maxWidth:Je}=A(f,V),Lt=Math.max(ee,eo),Rt=g&&V==="two-row-top";return r.jsxs("div",{className:`${e}-title-cell`,"data-title":f.prefix,style:{...V==="single-row"?{gridArea:f.prefix}:{},width:D(he),...ee>0?{marginLeft:D(ee)}:{}},children:[r.jsx("p",{className:f.className,style:f.style,children:f.text}),Rt&&f.marginLeftKey?r.jsx("div",{"data-controls":f.marginLeftKey,"data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(Se),style:{position:"absolute",top:0,left:D(-ee),width:D(Lt),height:"100%",pointerEvents:"auto"}}):null,Rt?r.jsx("div",{"data-controls":f.widthKey,"data-controls-axis":"x","data-controls-max-fraction":String(Je),"data-controls-variant":"column-width",className:`${e}-title-resize-handle`,style:{position:"absolute",top:0,right:D(-ti/2),width:D(ti),height:"100%",pointerEvents:"auto"}}):null]},f.className)},Ge=()=>{const f=ie?-1:U.findIndex(he=>he.prefix==="title1"),V=!ie&&(g||(b??0)>0)?(()=>{const Se=Math.max(b??0,eo),Je=f>=0?Ae[f]:P;return r.jsx("div",{"data-controls":"title1MarginLeft","data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(Je),style:{position:"absolute",top:0,left:0,width:D(Se),height:"100%",pointerEvents:"auto"}},"title1MarginLeft")})():null,ee=U.flatMap((he,Se)=>{if(!he.marginLeftKey)return[];const Je=Z[he.marginLeftKey]??0,Lt=Sm(U,Ae,Z,Se)+Te(),Rt=Math.max(Je,eo);return r.jsx("div",{"data-controls":he.marginLeftKey,"data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(Ae[Se]),style:{position:"absolute",top:0,left:D(Lt),width:D(Rt),height:"100%",pointerEvents:"auto"}},he.marginLeftKey)});return V?[V,...ee]:ee},pe=()=>U.map((f,V)=>{const ee=to(V,Ae),Se=ge(V)-ti/2;return r.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:r.jsx("div",{"data-controls":f.widthKey,"data-controls-axis":"x","data-controls-max-fraction":String(ee),"data-controls-variant":"column-width",className:`${e}-title-resize-handle`,style:{position:"absolute",top:0,left:D(Se),width:D(ti),height:"100%",pointerEvents:"auto"}})},`${f.widthKey}-junction`)}),We=()=>xe.flatMap((f,V)=>{if(!f.marginLeftKey)return[];const ee=Z[f.marginLeftKey]??0,he=je(V),Se=Math.max(ee,eo),{resolvedWidth:Je}=A(f,"two-row-bottom");return r.jsx("div",{"data-controls":f.marginLeftKey,"data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(Je),style:{position:"absolute",top:0,left:D(he),width:D(Se),height:"100%",pointerEvents:"auto"}},f.marginLeftKey)}),ze=()=>xe.map((f,V)=>{const{maxWidth:ee}=A(f,"two-row-bottom"),Se=_e(V)-ti/2;return r.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:r.jsx("div",{"data-controls":f.widthKey,"data-controls-axis":"x","data-controls-max-fraction":String(ee),"data-controls-variant":"column-width",className:`${e}-title-resize-handle`,style:{position:"absolute",top:0,left:D(Se),width:D(ti),height:"100%",pointerEvents:"auto"}})},`${f.widthKey}-junction`)}),Ve=c.useRef(null),Ne=c.useRef(null),It=c.useRef(null),dt=c.useRef([]),bt=c.useRef(0),Ze=c.useRef({isActive:!1,startX:0,scrollLeft:0,hasMoved:!1}),yt=c.useRef(null),Mt=c.useRef(0),Ht=c.useRef("forward"),Ee=c.useRef(0),it=c.useRef(null),Ue=c.useRef(!1),ut=t.length>1,Bt=ut?Cm:1,rn=c.useMemo(()=>Array.from({length:Bt},()=>t).flat(),[t,Bt]),[jt,Yt]=c.useState(!1),[ln,He]=c.useState(!1),[Tt,pt]=c.useState(!0),[et,mt]=c.useState(0),zt=c.useRef(et);zt.current=et;const Vt=c.useRef(null),Jt=c.useRef(!1),pn=c.useRef(null),Ke=c.useRef(null),Zt=oe&&!Tt,kt=c.useCallback(()=>{oe&&(pt(!0),Ke.current&&clearTimeout(Ke.current),Ke.current=setTimeout(()=>{Ze.current.isActive||pt(!1)},am))},[oe]),Pe=c.useCallback(()=>{o||Jt.current||(Jt.current=!0,He(!1),pn.current=setTimeout(()=>{s()},ci))},[o,s]),ft=()=>r.jsxs("div",{className:`${e}-close-icon`,"data-overlay-content-hidden":Zt?"true":"false",style:{width:R.scalingValue(x??0,i),height:R.scalingValue(x??0,i),marginRight:G,"--close-icon-hover-color":m},children:[r.jsx("button",{type:"button",className:`${e}-close-icon-inner`,onClick:Pe,"aria-label":"Close",children:r.jsx(an,{url:S,fill:v,hoverFill:i&&!l?v:m,className:`${e}-close-icon-img`})}),g?r.jsx("div",{"data-controls":"iconMarginLeft","data-controls-axis":"x","data-controls-reverse":"",className:`${e}-control`,style:{position:"absolute",top:0,left:"100%",width:G,height:"100%",pointerEvents:"auto"}}):null]}),Wt=(f="two-row")=>r.jsx("div",{...f==="two-row"&&g?{"data-controls":"title1MarginLeft","data-controls-axis":"x"}:{},style:{width:D(b??0),flexShrink:0,...f==="single-row"?{gridArea:"margin"}:{alignSelf:"stretch"},...f==="two-row"&&g?{pointerEvents:"auto"}:{}}}),te=()=>{const f=U.find(he=>he.prefix==="title1"),V=U.filter(he=>he.prefix==="title2"||he.prefix==="title3"),ee=V.length>0||g||(h??0)>0;return r.jsxs(r.Fragment,{children:[r.jsxs("div",{className:`${e}-header-row-top`,children:[(b??0)>0||g?Wt():null,f?Le(f,"two-row-top"):null,S?ft():null]}),ee?r.jsxs("div",{className:`${e}-header-row-bottom-wrap`,children:[V.length>0?r.jsxs("div",{className:`${e}-header-row-bottom`,children:[V.map(he=>Le(he,"two-row-bottom")),g?r.jsxs(r.Fragment,{children:[We(),ze()]}):null]}):null,r.jsx("div",{"data-controls":g?"titleRowMarginBottom":void 0,"data-controls-axis":g?"y":void 0,"data-controls-reverse":g?"":void 0,className:g?`${e}-control`:void 0,style:{height:Y,width:"100%",flexShrink:0,pointerEvents:g?"auto":"none"}})]}):null]})},ye=()=>r.jsxs(r.Fragment,{children:[(b??0)>0||g?Wt("single-row"):null,U.map(f=>Le(f,"single-row")),g?r.jsxs(r.Fragment,{children:[Ge(),pe()]}):null,S?ft():null]}),Ie=c.useCallback(f=>!!(f.closest("[data-controls]")||f.closest(`.${e}-thumbnails`)||f.closest(`.${e}-close-icon`)),[e]),{isSwipeDragging:De,backdropStyle:qe,mediaAreaStyle:Qe,overlayContentStyle:ve,swipeHandlers:$t,dismissAreaStyle:gt}=Bs({enabled:fe??!1,onClose:Pe,animMs:ci,isBlockedTarget:Ie}),ht=()=>{if(!ut||t.length===0)return bt.current=0,0;const f=dt.current[0],V=dt.current[t.length];if(!f||!V)return bt.current;const ee=V.offsetLeft-f.offsetLeft;return ee>0&&(bt.current=ee),bt.current},ot=(f=!1)=>{if(!ut)return;const V=Ne.current,ee=ht();!V||ee<=0||(V.scrollLeft<=0?(V.scrollLeft+=ee,f&&(Ze.current.scrollLeft+=ee),Ue.current&&(Ee.current+=ee)):V.scrollLeft>=ee*2&&(V.scrollLeft-=ee,f&&(Ze.current.scrollLeft-=ee),Ue.current&&(Ee.current-=ee)))},Be=(f=(V=>(V=Ne.current)==null?void 0:V.scrollLeft)()??0)=>{var Lt;const ee=((Lt=Ne.current)==null?void 0:Lt.clientWidth)??0,he=f+ee/2;let Se=-1,Je={flatIndex:0,distance:1/0};return dt.current.forEach((Rt,In)=>{if(!Rt)return;const Rn=Rt.offsetLeft,mn=Rn+Rt.offsetWidth;Se===-1&&he>=Rn&&he<mn&&(Se=In);const I=Math.abs(Rn-f);I<Je.distance&&(Je={flatIndex:In,distance:I})}),Se!==-1?Se:Je.flatIndex},vt=f=>{const V=Ne.current;return!f||!V?!1:f.offsetWidth>V.clientWidth+1},rt=f=>{Ne.current&&dt.current.forEach(V=>{V&&(V.style.scrollSnapAlign=vt(V)&&f==="backward"?"end":"start")})},wt=f=>{const V=Ne.current;if(!f||!V||!vt(f))return!1;const ee=f.offsetLeft,he=ee+f.offsetWidth;return V.scrollLeft>=ee-1&&V.scrollLeft+V.clientWidth<=he+1},_t=()=>{!Ne.current||t.length===0||Vt.current===null&&mt(Be()%t.length)},St=()=>{Vt.current=null},At=f=>{const V=Ne.current;V&&(V.style.scrollSnapType=f?"":"none")},tt=()=>{var f;(f=yt.current)==null||f.call(yt),yt.current=null},Ft=()=>{it.current!==null&&(cancelAnimationFrame(it.current),it.current=null),Ue.current=!1},Kt=()=>{const f=Ne.current;if(!f){it.current=null,Ue.current=!1;return}const V=Ee.current-f.scrollLeft;if(Math.abs(V)<.5){f.scrollLeft=Ee.current,ot(),_t(),it.current=null,Ue.current=!1;return}f.scrollLeft+=V*um,ot(),_t(),kt(),it.current=requestAnimationFrame(Kt)},$n=()=>{const f=It.current;f&&(f.style.transition="",f.style.transform="",f.style.willChange="")},Bn=(f,V,ee,he)=>{$n(),f.scrollLeft=V,Mt.current=f.scrollLeft,ot(),ee!==void 0?mt(ee):_t(),At(!0),he==null||he()},Ln=(f,{behavior:V="smooth",activeIndex:ee,onComplete:he}={})=>{const Se=Ne.current,Je=It.current;if(!Se||!Je)return;if(Ft(),tt(),At(!1),V==="auto"){Bn(Se,f,ee,he);return}const Lt=Math.abs(f-Se.scrollLeft),Rt=tm(Lt,rm,lm,Se.clientWidth*.55);yt.current=om(Se,Je,f,{duration:Rt,easing:sm,onComplete:()=>{yt.current=null,Bn(Se,f,ee,he)}})},Yn=(f="smooth")=>{if(!Ne.current||t.length===0)return;const ee=Be(),he=dt.current[ee];he&&Ln(he.offsetLeft,{behavior:f,activeIndex:ee%t.length})},Jn=(f,V="smooth")=>{const ee=Ne.current;if(!ee||t.length===0)return;const he=ee.scrollLeft-f,Se=Be(ee.scrollLeft),Je=dt.current[Se];if(wt(Je)){At(!0),_t();return}const Lt=dt.current[Se+1],Rt=Je?Lt?Lt.offsetLeft-Je.offsetLeft:Je.offsetWidth:0,In=Rt>0?he>Rt*Bl?1:he<-Rt*Bl?-1:0:0,Rn=ut?Se+In:Math.max(0,Math.min(rn.length-1,Se+In)),mn=dt.current[Rn];if(!mn){Yn(V);return}const ce=he<0&&vt(mn)?mn.offsetLeft+mn.offsetWidth-ee.clientWidth:mn.offsetLeft,Re=Rn%t.length;V==="smooth"&&(Vt.current=Re),mt(Re),Ln(ce,{behavior:V,activeIndex:Re,onComplete:V==="smooth"?St:void 0})},Qt=(f,V="smooth")=>{const ee=Ne.current,he=ut?t.length+f:f,Se=dt.current[he];!ee||!Se||(V==="smooth"?Vt.current=f:Vt.current=null,mt(f),Ln(Se.offsetLeft,{behavior:V,activeIndex:f,onComplete:V==="smooth"?St:void 0}))},Si=f=>{if(!Ce)return;if(f.pointerType==="touch"){Ft(),At(!0);return}if(f.pointerType!=="mouse"||f.button!==0||Ie(f.target))return;const V=Ne.current;V&&(Ft(),tt(),$n(),Vt.current=null,Ze.current={isActive:!0,startX:f.clientX,scrollLeft:V.scrollLeft,hasMoved:!1},At(!1),kt(),V.setPointerCapture(f.pointerId))},Zn=f=>{if(!Ce||f.pointerType!=="mouse")return;const V=Ne.current;if(!V||!Ze.current.isActive)return;const ee=f.clientX-Ze.current.startX;Math.abs(ee)>wm&&(Ze.current.hasMoved=!0,Yt(!0)),Ze.current.hasMoved&&(f.preventDefault(),V.scrollLeft=Ze.current.scrollLeft-ee,ot(!0),_t(),kt())},En=f=>{if(!Ce||f.pointerType!=="mouse")return;const V=Ne.current;if(!V)return;const ee=Ze.current.hasMoved,he=Ze.current.scrollLeft;Ze.current.isActive=!1,Yt(!1),V.hasPointerCapture(f.pointerId)&&V.releasePointerCapture(f.pointerId),ot(),ee?Jn(he):(At(!0),_t()),kt()};return Os(),c.useEffect(()=>{const f=requestAnimationFrame(()=>He(!0));return()=>{cancelAnimationFrame(f),tt(),pn.current&&clearTimeout(pn.current),Ke.current&&clearTimeout(Ke.current)}},[]),c.useEffect(()=>{if(!oe){pt(!0);return}kt();const f=Ve.current;if(!f)return;const V=()=>kt();return f.addEventListener("pointermove",V),f.addEventListener("pointerdown",V),()=>{f.removeEventListener("pointermove",V),f.removeEventListener("pointerdown",V),Ke.current&&clearTimeout(Ke.current)}},[oe,kt]),c.useEffect(()=>{const f=V=>{V.key==="Escape"&&Pe()};return window.addEventListener("keydown",f),()=>window.removeEventListener("keydown",f)},[Pe]),c.useLayoutEffect(()=>{ht(),o||Qt(zt.current,"auto")},[_,o]),c.useLayoutEffect(()=>{ht(),Qt(0,"auto")},[t.length,ut]),c.useEffect(()=>{if(!o)return;const f=Ne.current;if(!f)return;const V=ee=>{ee.preventDefault()};return f.addEventListener("wheel",V,{passive:!1}),f.addEventListener("touchmove",V,{passive:!1}),()=>{f.removeEventListener("wheel",V),f.removeEventListener("touchmove",V)}},[o]),c.useEffect(()=>{const f=Ne.current;if(!f||!fe)return;const V=ee=>{if(ee.preventDefault(),Math.abs(ee.deltaY)<=Math.abs(ee.deltaX))return;const he=ee.deltaMode===1?dm:ee.deltaMode===2?f.clientHeight:1,Se=ee.deltaY*he*cm;if(Se!==0){if(tt(),Ue.current||(Ue.current=!0,Ee.current=f.scrollLeft,Vt.current=null,At(!1)),Ee.current+=Se,!ut){const Je=f.scrollWidth-f.clientWidth;Ee.current=Math.max(0,Math.min(Je,Ee.current))}kt(),it.current===null&&(it.current=requestAnimationFrame(Kt))}};return f.addEventListener("wheel",V,{passive:!1}),()=>{f.removeEventListener("wheel",V),Ft()}},[fe,t.length,ut]),c.useEffect(()=>{const f=Ne.current;if(!f)return;const V=()=>{ot();const he=f.scrollLeft,Se=he-Mt.current;Mt.current=he;const Je=bt.current>0?bt.current*.5:1/0;if(Se!==0&&Math.abs(Se)<Je){const Lt=Se>0?"forward":"backward";Lt!==Ht.current&&(Ht.current=Lt,rt(Lt))}_t()};f.addEventListener("scroll",V,{passive:!0});const ee=new ResizeObserver(()=>{ht(),ot(),rt(Ht.current),_t()});return ee.observe(f),()=>{tt(),f.removeEventListener("scroll",V),ee.disconnect()}},[t.length,ut]),r.jsxs("div",{"data-selection":"none",className:`${e}-lightbox${i?` ${e}-lightbox-editor`:""}${o?` ${e}-lightbox-edit-mode`:""}`,onClick:()=>{De||Pe()},role:"dialog","aria-modal":"true","aria-label":"Image gallery",style:{opacity:ln?1:0,transition:`opacity ${ci}ms ease`,pointerEvents:ln?"auto":"none"},children:[r.jsx("div",{className:`${e}-lightbox-backdrop`,style:{backgroundColor:d,...qe}}),r.jsxs("div",{ref:Ve,className:`${e}-lightbox-dismiss-area`,style:{position:"relative",width:"100%",height:"100%",...gt},...$t,children:[r.jsx("div",{className:`${e}-lightbox-content`,style:Qe,onClick:f=>f.stopPropagation(),children:r.jsx("div",{ref:Ne,className:`${e}-lightbox-strip`,"data-lightbox-scrollable":"","data-mouse-draggable":Ce&&t.length>0?"true":"false","data-mouse-dragging":jt?"true":"false",onPointerDown:Si,onPointerMove:Zn,onPointerUp:En,onPointerCancel:En,children:r.jsx("div",{ref:It,className:`${e}-lightbox-strip-track`,style:{gap:_},children:rn.map((f,V)=>{const ee=f.image.objectFit??"contain",he=V%t.length,Se=Math.floor(V/t.length),Je=tr(_),Lt=`calc(-0.5 * (${Je} + ${_}))`;return r.jsxs("div",{ref:Rt=>dt.current[V]=Rt,className:`${e}-strip-item`,style:{height:L==="mobile"?"75vh":"100%"},children:[r.jsx("img",{src:f.image.url,draggable:!1,style:{display:"block",maxWidth:"100%",height:"100%",objectFit:ee}}),g&&he<t.length-1&&Se===0&&r.jsx("div",{"data-controls":"imageGap","data-controls-axis":"x",style:{position:"absolute",top:0,right:Lt,width:Je,height:"100%",pointerEvents:"auto",zIndex:3}})]},`${Se}-${f.image.url}-${he}`)})})})}),r.jsxs("div",{className:`${e}-lightbox-content-inner`,"data-overlay-content-hidden":Zt?"true":"false",style:{width:"100%",height:"100%",top:0,bottom:0,...ve},children:[r.jsx("div",{"data-controls":g?"contentMarginTop":void 0,"data-controls-axis":g?"y":void 0,"data-controls-handle-left-fraction":g?"0.05":void 0,className:g?`${e}-control`:void 0,style:{height:q,width:"100%",pointerEvents:g?"auto":"none"}}),r.jsx("div",{style:{display:"flex",flexDirection:"row",width:"100%",flex:1,minHeight:0},children:r.jsx("div",{className:`${e}-lightbox-content-area${ie?` ${e}-lightbox-content-area-stacked`:""}`,children:(Q||S)&&r.jsx("div",{className:`${e}-header ${ie?`${e}-header-two-row`:`${e}-header-single-row`}`,children:ie?te():Q||S?ye():null})})})]}),t.length>1&&$==="on"&&(()=>{const f=tr(O),V=`calc(-0.5 * (${O} + ${f}))`;return r.jsxs("div",{className:`${e}-thumbnails`,"data-lightbox-scrollable":"","data-thumbnail-active":C,"data-overlay-content-hidden":Zt?"true":"false",onClick:ee=>ee.stopPropagation(),style:{gap:le,bottom:O,"--thumbnail-active-color":T,...ve},children:[t.map((ee,he)=>{const Se=tr(le),Je=`calc(-0.5 * (${Se} + ${le}))`;return r.jsxs("div",{style:{position:"relative",flex:"0 0 auto"},children:[r.jsx("button",{type:"button",className:`${e}-thumb`,"data-active":et===he?"true":"false",onClick:()=>fe&&y==="click"&&Qt(he),onMouseEnter:()=>me&&y==="hover"&&Qt(he),"aria-label":ee.image.name?`View ${ee.image.name}`:`View image ${he+1}`,"aria-current":et===he?"true":void 0,children:r.jsx("img",{className:`${e}-thumb-image${re?` ${e}-thumb-image-cover`:""}`,src:ee.image.url,alt:"",draggable:!1,style:{...B,...w.display==="Cover"?{width:ho}:{width:"100%"}}})}),g&&he<t.length-1&&r.jsx("div",{"data-controls":"thumbnailGap","data-controls-axis":"x",style:{position:"absolute",top:0,right:Je,width:Se,height:"100%",pointerEvents:"auto",zIndex:3}})]},`thumb-${ee.image.url}-${he}`)}),g&&r.jsx("div",{"data-controls":"thumbnailMarginBottom","data-controls-axis":"y","data-controls-reverse":g?"":void 0,style:{position:"absolute",left:0,right:0,bottom:V,height:f,pointerEvents:"auto",zIndex:3}})]})})()]})]})},Lm=({settings:e,content:t,isEditor:n,isEditMode:i,isPreviewMode:o,portalId:l})=>{const{prefix:s}=R.useScopedStyles(),{cover:d,coverFit:a}=e,p=c.useRef(null),[u,S]=c.useState(!1),x=t??[],v=u&&x.length>0,m=()=>{x.length!==0&&(n&&!i&&!o||S(!0))},y=()=>{n||m()},$=C=>{n&&(C.stopPropagation(),m())},w=()=>{S(!1)};return c.useEffect(()=>{!n||i||o||S(!1)},[n,i,o]),r.jsxs(r.Fragment,{children:[r.jsxs("div",{ref:p,className:`${s}-wrapper`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:pm(s)}}),d?r.jsx("button",{type:"button",className:`${s}-cover ${wn(a)?`${s}-ratio-wrapper-cover`:`${s}-ratio-wrapper-fit`}`,onClick:y,onDoubleClick:$,style:{display:"block",padding:0,border:"none",background:"transparent",pointerEvents:n&&!i&&!o?"none":void 0,...wn(a)?{"--image-aspect-ratio":No(a)}:{}},"aria-label":"Open image gallery",children:r.jsx("img",{className:`${s}-cover-image ${wn(a)?`${s}-cover-image-cover`:`${s}-cover-image-fit`}`,src:d,alt:"cover"})}):null]}),v&&typeof document<"u"&&(()=>{const C=(l?document.getElementById(l):null)??document.body;return Fi.createPortal(r.jsx($m,{prefix:s,images:x,settings:e,isEditor:n,isEditMode:i,isPreviewMode:o,onClose:w}),C)})()]})},Em=`import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type MouseEvent } from 'react';
 import { createPortal } from 'react-dom';
 import { CommonComponentProps } from '../props';
 import { scalingValue } from '../utils/scalingValue';
@@ -10161,7 +10161,12 @@ const LightboxOverlay = ({
         onClick={handleClose}
         aria-label="Close"
       >
-        <SvgImage url={closeIcon!} fill={closeIconColor} hoverFill={closeIconHoverColor} className={\`\${P}-close-icon-img\`}/>
+        <SvgImage
+          url={closeIcon!}
+          fill={closeIconColor}
+          hoverFill={isEditor && !isPreviewMode ? closeIconColor : closeIconHoverColor}
+          className={\`\${P}-close-icon-img\`}
+        />
       </button>
       {showControls ? (
         <div
@@ -10679,8 +10684,10 @@ const LightboxOverlay = ({
 
   useLayoutEffect(() => {
     measureSetWidth();
-    scrollToIndex(activeIndexRef.current, 'auto');
-  }, [imageGap]);
+    if (!isEditMode) {
+      scrollToIndex(activeIndexRef.current, 'auto');
+    }
+  }, [imageGap, isEditMode]);
 
   useLayoutEffect(() => {
     measureSetWidth();
@@ -10856,7 +10863,7 @@ const LightboxOverlay = ({
                     objectFit: itemObjectFit,
                   }}
                 />
-                {showControls && sourceIndex < images.length - 1 && (
+                {showControls && sourceIndex < images.length - 1 && copyIndex === 0 && (
                   <div
                     data-controls="imageGap"
                     data-controls-axis="x"
@@ -11603,7 +11610,7 @@ export const LightboxStrip = ({ settings, content, isEditor, isEditMode, isPrevi
   pointer-events: auto;
   z-index: 10;
 }
-`}const Bm=20,Om=2,ir=e=>`max(${e}, ${Bm}px)`,fi=e=>((e==null?void 0:e.image)??[]).slice(0,Om),Vs=e=>e.reduce((t,n)=>t+fi(n).length,0),Dm=(e,t)=>{const n=e.slice(0,t).reduce((o,l)=>o+fi(l).length,1),i=fi(e[t]).length;return{start:n,end:n+i-1}},jm=(e,t)=>{const n=Vs(e),{start:i,end:o}=Dm(e,t);return i===o?`${i} / ${n}`:`${i}-${o} / ${n}`},fo=(e,t)=>t==="B"?e.flatMap((n,i)=>fi(n).map(o=>({entry:n,entryIndex:i,images:[o]}))):e.map((n,i)=>({entry:n,entryIndex:i,images:fi(n)})),zm=(e,t,n,i)=>{var l;if(n==="B")return`${t+1} / ${e.length}`;const o=((l=e[t])==null?void 0:l.entryIndex)??0;return jm(i,o)},Gl=e=>e?`${e.title1??""}|${e.title2??""}|${e.title3??""}`:"",Vm=(e,t,n)=>e==="B"?t.length>1:Vs(n)>1,ni=.004,no=.004,or={title1Width:.13,title2Width:.13,title3Width:.14};function io(e,t,n,i,o){const l=[];return t.title1&&l.push({prefix:"title1",widthKey:"title1Width",className:`${e}-title1`,style:n,text:t.title1}),t.title2&&l.push({prefix:"title2",widthKey:"title2Width",marginLeftKey:"title2MarginLeft",className:`${e}-title2`,style:i,text:t.title2}),t.title3&&l.push({prefix:"title3",widthKey:"title3Width",marginLeftKey:"title3MarginLeft",className:`${e}-title3`,style:o,text:t.title3}),l}function Co(e,t){if(e<=0)return[];const n=t.slice(0,e),i=n.reduce((l,s)=>l+s,0);if(i<=1)return n;const{widths:o}=[...n].reverse().reduce(({overflow:l,widths:s},d)=>{if(l<=0||d<=0)return{overflow:l,widths:[d,...s]};const a=Math.min(l,d);return{overflow:l-a,widths:[d-a,...s]}},{overflow:i-1,widths:[]});return o}function yr(e,t){return Co(e,t)}function Vn(e,t){const n=t.filter((i,o)=>o!==e).reduce((i,o)=>i+o,0);return Math.max(1-n,0)}function oo(e,t){const n=e.map(i=>t[i.widthKey]??0);return{resolved:Co(e.length,n),effective:yr(e.length,n)}}function Km(e,t,n,i){return e.slice(0,i).reduce((o,l,s)=>o+(l!=null&&l.marginLeftKey?n[l.marginLeftKey]??0:0)+(t[s]??0),0)}function Gm(e,t,n,i){return e.slice(0,i+1).reduce((o,l,s)=>o+(l!=null&&l.marginLeftKey?n[l.marginLeftKey]??0:0)+(t[s]??0),0)}const Um=({prefix:e,entries:t,settings:n,isEditor:i,isEditMode:o,isPreviewMode:l,initialSlideIndex:s=0,enableUrlSync:d=!1,journalItemId:a=null,onBeforeClose:p,onClose:u})=>{const{type:S,coverFit:x,backgroundColor:v,imageGap:m,maxWidth:y,maxHeight:$,textTransition:w,title1Width:C,title2Width:T,title3Width:P,title1MarginLeft:M=0,title2MarginLeft:F=0,title3MarginLeft:b=0,titleRowMarginBottom:W=0,titleHeaderLayout:K="single-row",countCloseGap:h=0,closeIcon:L,closeIconMaxWidth:E,closeIconColor:k,closeIconHoverColor:z,contentMarginTop:le=0,iconMarginRight:O=0}=n,_=c.useCallback(I=>R.scalingValue(I,i??!1),[i]),q=_(m??0),G=`${y}%`,H=`${$}%`,X=_(h),ne=_(le),se=_(O),N=lo("title1",ro(n,"title1"),i),de=lo("title2",ro(n,"title2"),i),g=lo("title3",ro(n,"title3"),i),ie=lo("count",ro(n,"count"),i),fe=!!o,oe=K==="mobile",Ce=!i||!!l,me=!o&&(!i||!!l),re=c.useMemo(()=>fo(t,S),[t,S]),[B,Q]=c.useState(s),U=re[B],J=U==null?void 0:U.entry,[Me,Ae]=c.useState(!1),[ke,Fe]=c.useState(null),[xe,j]=c.useState(!1),[ae,A]=c.useState(null),[D,Y]=c.useState(!1),[Z,ge]=c.useState(0),[Te,je]=c.useState(),[_e,Le]=c.useState(),[Ge,pe]=c.useState(null),We=c.useRef(null),ze=c.useRef(0),Ve=c.useRef(0),Ne=c.useRef(0),It=c.useRef(!1),dt=c.useRef(null),bt=c.useRef(null),Ze=c.useRef(null),yt=c.useRef(null),Mt=c.useRef(null),Ht=c.useRef(null),Ee=c.useRef(null),it=c.useCallback(()=>{const I=bt.current;if(!I)return;const ce=I.closest(`.${e}-lightbox-content-area`);if(!ce)return I.getBoundingClientRect().width;const Re=Array.from(ce.children).reduce(($e,Se)=>!(Se instanceof HTMLElement)||Se.contains(I)?$e:$e+Se.getBoundingClientRect().width,0);return ce.getBoundingClientRect().width-Re},[e]),Ue=c.useCallback(()=>{We.current&&(clearTimeout(We.current),We.current=null)},[]),ut=c.useCallback(I=>{I===ze.current&&(A(null),Y(!1))},[]),Bt=c.useCallback(()=>{o||It.current||(It.current=!0,p==null||p(),Ae(!1),dt.current=setTimeout(()=>{u()},nr))},[o,p,u]),rn=c.useCallback(I=>!!(I.closest("[data-controls]")||I.closest(`.${e}-close-icon`)),[e]),{isSwipeDragging:jt,backdropStyle:Yt,mediaAreaStyle:ln,overlayContentStyle:He,swipeHandlers:Tt,dismissAreaStyle:pt}=Bs({enabled:me,onClose:Bt,animMs:nr,isBlockedTarget:rn}),et=c.useCallback(I=>{d&&js(I+1,a,!0)},[d,a]),mt=c.useCallback(I=>{var en;if(re.length===0)return;const ce=(I%re.length+re.length)%re.length;if(ce===B)return;const Re=re[B],$e=re[ce];ze.current+=1;const Se=ze.current,lt=w==="fade"&&Gl(Re==null?void 0:Re.entry)!==Gl($e==null?void 0:$e.entry),Ct=(en=bt.current)==null?void 0:en.getBoundingClientRect().height,nt=lt?(()=>{var qr;const Qn=it();Fi.flushSync(()=>{pe($e.entry)}),Ze.current&&Qn&&(Ze.current.style.width=`${Qn}px`);const gn=(qr=Ze.current)==null?void 0:qr.getBoundingClientRect().height;return Ze.current&&(Ze.current.style.width=""),{measuredIncomingTitlesHeight:gn,incomingTitlesMeasureWidth:Qn}})():void 0,Ot=Math.max(Ct??0,(nt==null?void 0:nt.measuredIncomingTitlesHeight)??0)||void 0;ge(Se),A(B),Y(!0),Q(ce),et(ce),Ne.current=ce,lt?(Ue(),Ot&&je(Ot),nt!=null&&nt.incomingTitlesMeasureWidth&&Le(nt.incomingTitlesMeasureWidth),Fe((Re==null?void 0:Re.entryIndex)??null),j(!0),Ve.current=$e.entryIndex,We.current=setTimeout(()=>{Fe(null),j(!1),je(void 0),Le(void 0),pe(null),We.current=null},hr)):(Ue(),Fe(null),j(!1),je(void 0),Le(void 0),pe(null),Ve.current=$e.entryIndex)},[B,Ue,it,re,et,w]),zt=c.useCallback(()=>{Ee.current=null},[]),Vt=c.useCallback(I=>{!Ce||re.length<=1||I.pointerType==="mouse"&&I.button!==0||I.target.closest("[data-controls]")||(Ee.current={startX:I.clientX,startY:I.clientY,pointerId:I.pointerId})},[Ce,re.length]),Jt=c.useCallback(I=>{var en;if(!Ce||re.length<=1||I.pointerType==="mouse"&&I.button!==0)return;if(jt){zt();return}const ce=Ee.current;if(!ce||ce.pointerId!==I.pointerId||(zt(),I.target.closest("[data-controls]")))return;const $e=I.clientX-ce.startX,Se=I.clientY-ce.startY,lt=Math.abs($e),Ct=Math.abs(Se);if(lt>=km&&lt>Ct){mt($e>0?B-1:B+1);return}if(lt>jl||Ct>jl)return;const nt=(en=yt.current)==null?void 0:en.getBoundingClientRect(),Ot=nt?nt.left+nt.width/2:window.innerWidth/2;mt(I.clientX<Ot?B-1:B+1)},[B,Ce,mt,jt,zt,re.length]),pn=c.useCallback(I=>{const ce=Ee.current;(ce==null?void 0:ce.pointerId)===I.pointerId&&zt()},[zt]);Os(),c.useEffect(()=>{Ht.current=document.activeElement instanceof HTMLElement?document.activeElement:null;const I=requestAnimationFrame(()=>{Ae(!0),requestAnimationFrame(()=>{Mt.current?Mt.current.focus():yt.current&&yt.current.focus()})});return()=>{cancelAnimationFrame(I),dt.current&&clearTimeout(dt.current),We.current&&clearTimeout(We.current);const ce=Ht.current;ce&&document.contains(ce)&&ce.focus()}},[]),c.useEffect(()=>{var I;w!=="fade"&&(Ve.current=((I=re[B])==null?void 0:I.entryIndex)??0,Ue(),Fe(null),j(!1),je(void 0),Le(void 0))},[B,Ue,re,w]),c.useEffect(()=>{const I=ce=>{if(ce.key==="Escape"){Bt();return}if(ce.key==="ArrowLeft"&&re.length>1){mt(B-1);return}if(ce.key==="ArrowRight"&&re.length>1){mt(B+1);return}if(ce.key==="Tab"&&yt.current){const Re=yt.current.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'),$e=Array.from(Re).filter(nt=>!nt.closest('[aria-hidden="true"]'));if($e.length===0)return;const Se=$e[0],lt=$e[$e.length-1],Ct=document.activeElement;ce.shiftKey?(Ct===Se||!yt.current.contains(Ct))&&(ce.preventDefault(),lt.focus()):(Ct===lt||!yt.current.contains(Ct))&&(ce.preventDefault(),Se.focus())}};return window.addEventListener("keydown",I),()=>window.removeEventListener("keydown",I)},[mt,Bt,B,re.length]),c.useLayoutEffect(()=>{Ue(),ze.current=0,ge(0),A(null),Y(!1),Fe(null),j(!1),je(void 0),Le(void 0),pe(null),Q(I=>{const ce=Math.max(0,re.length-1);return Math.min(I,ce)})},[Ue,t.length,S,re.length]),c.useLayoutEffect(()=>{var I;Ne.current=s,Ve.current=((I=re[s])==null?void 0:I.entryIndex)??0,Q(s)},[s,re.length]);const Ke=ke!==null?t[ke]:null,Zt=ae!==null?re[ae]:null,kt=(J==null?void 0:J.title1)||(J==null?void 0:J.title2)||(J==null?void 0:J.title3)||(Ke==null?void 0:Ke.title1)||(Ke==null?void 0:Ke.title2)||(Ke==null?void 0:Ke.title3),Pe=Vm(S,re,t),ft=L!==null,Wt=kt||Pe||ft,te=Pe&&ft?{gap:X}:void 0,ye=`${e}-titles-stack${oe?` ${e}-titles-stack-stacked`:""}`,Ie=`${e}-titles-layer-out${oe?` ${e}-titles-layer-out-stacked`:""}`,De=_(W),qe=c.useMemo(()=>({title1Width:C??or.title1Width,title2Width:T??or.title2Width,title3Width:P??or.title3Width}),[C,T,P]),Qe=c.useMemo(()=>({title2MarginLeft:F,title3MarginLeft:b}),[F,b]),ve=c.useMemo(()=>J?io(e,J,N,de,g):[],[e,J,N,de,g]),$t=c.useMemo(()=>ve.map(I=>qe[I.widthKey]),[ve,qe]),gt=c.useMemo(()=>Co(ve.length,$t),[ve.length,$t]),ht=c.useMemo(()=>yr(ve.length,$t),[ve.length,$t]),ot=c.useMemo(()=>ve.filter(I=>I.prefix==="title1"),[ve]),Be=c.useMemo(()=>ve.filter(I=>I.prefix==="title2"||I.prefix==="title3"),[ve]),vt=c.useMemo(()=>oo(ot,qe),[ot,qe]),rt=c.useMemo(()=>oo(Be,qe),[Be,qe]),wt=c.useCallback((I,ce)=>{const Re=ve.findIndex(Se=>Se.prefix===I.prefix);if(!oe||ce==="single-row")return{effectiveWidth:ht[Re]??0,resolvedWidth:gt[Re]??0,maxWidth:Vn(Re,gt)};if(ce==="two-row-top"){const Se=ot.findIndex(lt=>lt.prefix===I.prefix);return{effectiveWidth:vt.effective[Se]??0,resolvedWidth:vt.resolved[Se]??0,maxWidth:Vn(Se,vt.resolved)}}const $e=Be.findIndex(Se=>Se.prefix===I.prefix);return{effectiveWidth:rt.effective[$e]??0,resolvedWidth:rt.resolved[$e]??0,maxWidth:Vn($e,rt.resolved)}},[ve,Be,rt,ht,gt,ot,vt,oe]),_t=c.useCallback(I=>Gm(ve,gt,Qe,I)+(oe?0:M??0),[ve,gt,Qe,oe,M]),St=c.useCallback(()=>oe?0:M??0,[oe,M]),At=c.useCallback(I=>Be.slice(0,I).reduce((ce,Re,$e)=>ce+(Re.marginLeftKey?Qe[Re.marginLeftKey]??0:0)+(rt.resolved[$e]??0),0),[Be,rt.resolved,Qe]),tt=c.useCallback(I=>{const ce=Be[I];return At(I)+(ce.marginLeftKey?Qe[ce.marginLeftKey]??0:0)+(rt.resolved[I]??0)},[Be,rt.resolved,At,Qe]),Ft=c.useCallback((I,ce,Re)=>{if(!oe||Re==="single-row"){const nt=I.findIndex(gn=>gn.prefix===ce.prefix),Ot=I.map(gn=>qe[gn.widthKey]),en=Co(I.length,Ot);return{effectiveWidth:yr(I.length,Ot)[nt]??0,resolvedWidth:en[nt]??0,maxWidth:Vn(nt,en)}}if(Re==="two-row-top"){const nt=I.filter(gn=>gn.prefix==="title1"),Ot=nt.findIndex(gn=>gn.prefix===ce.prefix),{resolved:en,effective:Qn}=oo(nt,qe);return{effectiveWidth:Qn[Ot]??0,resolvedWidth:en[Ot]??0,maxWidth:Vn(Ot,en)}}const $e=I.filter(nt=>nt.prefix==="title2"||nt.prefix==="title3"),Se=$e.findIndex(nt=>nt.prefix===ce.prefix),{resolved:lt,effective:Ct}=oo($e,qe);return{effectiveWidth:Ct[Se]??0,resolvedWidth:lt[Se]??0,maxWidth:Vn(Se,lt)}},[qe,oe]),Kt=(I,ce,Re)=>{const $e=I.marginLeftKey?Qe[I.marginLeftKey]??0:0,{effectiveWidth:Se,resolvedWidth:lt,maxWidth:Ct}=Re??wt(I,ce),nt=Math.max($e,no),Ot=fe&&ce==="two-row-top";return r.jsxs("div",{className:`${e}-title-cell`,"data-title":I.prefix,style:{width:_(Se),...$e>0?{marginLeft:_($e)}:{}},children:[r.jsx("p",{className:I.className,style:I.style,children:I.text}),Ot&&I.marginLeftKey?r.jsx("div",{"data-controls":I.marginLeftKey,"data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(lt),style:{position:"absolute",top:0,left:_(-$e),width:_(nt),height:"100%",pointerEvents:"auto"}}):null,Ot?r.jsx("div",{"data-controls":I.widthKey,"data-controls-axis":"x","data-controls-max-fraction":String(Ct),"data-controls-variant":"column-width",className:`${e}-title-resize-handle`,style:{position:"absolute",top:0,right:_(-ni/2),width:_(ni),height:"100%",pointerEvents:"auto"}}):null]},I.className)},$n=()=>r.jsx("div",{...fe?{"data-controls":"title1MarginLeft","data-controls-axis":"x"}:{},style:{width:_(M??0),flexShrink:0,alignSelf:"stretch",...fe?{pointerEvents:"auto"}:{}}}),Bn=()=>r.jsxs("div",{className:`${e}-text-bar-cell`,children:[r.jsx("span",{className:`${e}-entry-counter`,style:ie,"aria-live":"polite","aria-atomic":"true",children:zm(re,B,S,t)}),fe&&ft?r.jsx("div",{"data-controls":"countCloseGap","data-controls-axis":"x","data-controls-reverse":"true",style:{position:"absolute",top:0,right:`calc(-0.5 * (${ir(X)} + ${X}))`,width:ir(X),height:"100%",pointerEvents:"auto",zIndex:3}}):null]}),Ln=()=>r.jsxs("div",{className:`${e}-close-icon`,style:{width:R.scalingValue(E??0,i),height:R.scalingValue(E??0,i),marginRight:se,"--close-icon-hover-color":z},children:[r.jsx("button",{ref:Mt,type:"button",className:`${e}-close-icon-inner`,onClick:Bt,"aria-label":"Close",children:r.jsx(an,{url:L??"",fill:k,hoverFill:z,className:`${e}-close-icon-img`})}),fe?r.jsx("div",{"data-controls":"iconMarginRight","data-controls-axis":"x","data-controls-reverse":"",className:`${e}-control`,style:{position:"absolute",top:0,left:"100%",width:se,height:"100%",pointerEvents:"auto"}}):null]}),Yn=()=>!Pe&&!ft?null:r.jsxs("div",{className:`${e}-titles-row-top-controls`,style:te,children:[Pe?Bn():null,ft?Ln():null]}),Jn=I=>{if(!I)return null;const ce=io(e,I,N,de,g);return r.jsxs(r.Fragment,{children:[M>0||fe?$n():null,ce.map(Re=>Kt(Re,"single-row",Ft(ce,Re,"single-row")))]})},Qt=I=>{if(!I)return null;const ce=io(e,I,N,de,g),Re=ce.find($e=>$e.prefix==="title1");return!Re&&!(M>0||fe)?null:r.jsxs(r.Fragment,{children:[M>0||fe?$n():null,Re?Kt(Re,"two-row-top",Ft(ce,Re,"two-row-top")):null]})},Si=(I,ce=!1)=>{const Re=I?io(e,I,N,de,g):[],$e=Re.filter(Ct=>Ct.prefix==="title2"||Ct.prefix==="title3"),Se=fe&&ce;return $e.length>0||Se||(W??0)>0?r.jsxs("div",{className:`${e}-titles-row-bottom-wrap`,children:[$e.length>0?r.jsxs("div",{className:`${e}-titles-row-bottom`,children:[$e.map(Ct=>Kt(Ct,"two-row-bottom",Ft(Re,Ct,"two-row-bottom"))),ce&&fe?r.jsxs(r.Fragment,{children:[ee(),he()]}):null]}):null,(W??0)>0||Se?r.jsx("div",{"data-controls":Se?"titleRowMarginBottom":void 0,"data-controls-axis":Se?"y":void 0,"data-controls-reverse":Se?"":void 0,className:Se?`${e}-control`:void 0,style:{height:De,width:"100%",flexShrink:0,pointerEvents:Se?"auto":"none"}}):null]}):null},Zn=(I,ce=!1)=>r.jsxs(r.Fragment,{children:[r.jsxs("div",{className:`${e}-titles-row-top`,children:[Qt(I),Yn()]}),Si(I,ce)]}),En=I=>oe?r.jsx("div",{className:`${e}-titles-row-two-row`,style:{width:"100%"},children:Zn(I)}):I?r.jsx("div",{className:`${e}-titles-row`,style:{width:"100%"},children:Jn(I)}):null,f=()=>{const I=oe?-1:ve.findIndex($e=>$e.prefix==="title1"),ce=!oe&&(fe||(M??0)>0)?(()=>{const Se=Math.max(M??0,no),lt=I>=0?gt[I]:C;return r.jsx("div",{"data-controls":"title1MarginLeft","data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(lt),style:{position:"absolute",top:0,left:0,width:_(Se),height:"100%",pointerEvents:"auto"}},"title1MarginLeft")})():null,Re=ve.flatMap(($e,Se)=>{if(!$e.marginLeftKey)return[];const lt=Qe[$e.marginLeftKey]??0,Ct=Km(ve,gt,Qe,Se)+St(),nt=Math.max(lt,no);return r.jsx("div",{"data-controls":$e.marginLeftKey,"data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(gt[Se]),style:{position:"absolute",top:0,left:_(Ct),width:_(nt),height:"100%",pointerEvents:"auto"}},$e.marginLeftKey)});return ce?[ce,...Re]:Re},V=()=>ve.map((I,ce)=>{const Re=Vn(ce,gt),Se=_t(ce)-ni/2;return r.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:r.jsx("div",{"data-controls":I.widthKey,"data-controls-axis":"x","data-controls-max-fraction":String(Re),"data-controls-variant":"column-width",className:`${e}-title-resize-handle`,style:{position:"absolute",top:0,left:_(Se),width:_(ni),height:"100%",pointerEvents:"auto"}})},`${I.widthKey}-junction`)}),ee=()=>Be.flatMap((I,ce)=>{if(!I.marginLeftKey)return[];const Re=Qe[I.marginLeftKey]??0,$e=At(ce),Se=Math.max(Re,no),{resolvedWidth:lt}=wt(I,"two-row-bottom");return r.jsx("div",{"data-controls":I.marginLeftKey,"data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(lt),style:{position:"absolute",top:0,left:_($e),width:_(Se),height:"100%",pointerEvents:"auto"}},I.marginLeftKey)}),he=()=>Be.map((I,ce)=>{const{maxWidth:Re}=wt(I,"two-row-bottom"),Se=tt(ce)-ni/2;return r.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:r.jsx("div",{"data-controls":I.widthKey,"data-controls-axis":"x","data-controls-max-fraction":String(Re),"data-controls-variant":"column-width",className:`${e}-title-resize-handle`,style:{position:"absolute",top:0,left:_(Se),width:_(ni),height:"100%",pointerEvents:"auto"}})},`${I.widthKey}-junction`)}),we=()=>!fe||oe?null:r.jsxs(r.Fragment,{children:[f(),V()]}),Je=I=>{const ce=!I.objectFit&&wn(x);return{className:`${e}-slide-image-cell${ce?` ${e}-slide-image-cell-cover`:""}`,style:{maxWidth:G,maxHeight:H,...ce?{"--image-aspect-ratio":No(x)}:{}}}},Lt=I=>I.objectFit?{className:`${e}-slide-image ${e}-slide-image-custom`,style:{"--image-object-fit":I.objectFit}}:wn(x)?{className:`${e}-slide-image ${e}-slide-image-cover`}:{className:`${e}-slide-image ${e}-slide-image-fit`},Rt=I=>{if(I.length===0)return null;const ce=I.length>1,Re=ir(q),$e=`calc(-0.5 * (${Re} + ${q}))`;if(I.length===1){const Se=I[0];return r.jsx("div",{...Je(Se),children:r.jsx("img",{...Lt(Se),src:Se.url,alt:Se.name??"",draggable:!1})})}return r.jsx("div",{className:`${e}-slide-inner`,style:ce?{gap:q}:void 0,children:I.map((Se,lt)=>r.jsxs("div",{...Je(Se),children:[r.jsx("img",{...Lt(Se),src:Se.url,alt:Se.name??"",draggable:!1}),fe&&ce&&lt<I.length-1&&r.jsx("div",{"data-controls":"imageGap","data-controls-axis":"x",style:{position:"absolute",top:0,right:$e,width:Re,height:"100%",pointerEvents:"auto",zIndex:3}})]},`${Se.url}-${lt}`))})},In=!!(J!=null&&J.title2||J!=null&&J.title3||Ke!=null&&Ke.title2||Ke!=null&&Ke.title3||(W??0)>0||fe),Rn=()=>r.jsxs("div",{style:{position:"relative",width:"100%",flex:1,alignSelf:"stretch",display:"flex",flexDirection:"column",minHeight:0,height:"100%"},children:[r.jsx("div",{ref:Ze,className:ye,style:{position:"absolute",visibility:"hidden",pointerEvents:"none",left:0,right:0,top:0,width:"100%",height:"auto"},"aria-hidden":"true",children:Zn(Ge||J)}),r.jsxs("div",{ref:bt,className:`${e}-titles-row-two-row`,style:{...xe&&Te?{minHeight:Te}:void 0,...xe&&_e?{width:_e,maxWidth:"100%"}:void 0,...xe?{overflow:"hidden"}:void 0},children:[r.jsxs("div",{className:`${e}-titles-row-top`,children:[r.jsxs("div",{className:ye,style:{position:"relative",flex:1,minWidth:0},children:[Ke&&xe?r.jsx("div",{className:`${Ie} ${e}-titles-fade-out`,children:Qt(Ke)}):null,r.jsx("div",{className:`${e}-titles-layer-in${xe?` ${e}-titles-layer-in-fading ${e}-titles-fade-in`:""}`,children:Qt(J)})]}),Yn()]}),In?r.jsxs("div",{className:`${e}-titles-row-bottom-area`,children:[Ke&&xe?r.jsx("div",{className:`${Ie} ${e}-titles-layer-out-bottom ${e}-titles-fade-out`,children:Si(Ke)}):null,r.jsx("div",{className:`${e}-titles-layer-in${xe?` ${e}-titles-layer-in-fading ${e}-titles-fade-in`:""}${oe?` ${e}-titles-layer-in-stacked`:""}`,children:Si(J,!0)}),we()]}):null]})]}),mn=()=>{const I=In;return r.jsxs("div",{style:{position:"relative",width:"100%",alignSelf:"stretch",display:"flex",flexDirection:"column",minHeight:0,...I?{flex:1,height:"100%"}:{}},children:[r.jsx("div",{className:`${e}-titles-row-two-row`,style:I?void 0:{flex:"0 0 auto",height:"auto"},children:Zn(J,!0)}),we()]})};return r.jsxs("div",{ref:yt,"data-selection":"none",className:`${e}-lightbox${i?` ${e}-lightbox-editor`:""}${o?` ${e}-lightbox-edit-mode`:""}`,onClick:()=>{jt||Bt()},role:"dialog","aria-modal":"true","aria-label":"Journal gallery",tabIndex:ft?void 0:-1,style:{opacity:Me?1:0,transition:`opacity ${nr}ms ease`,pointerEvents:Me?"auto":"none"},children:[r.jsx("div",{className:`${e}-lightbox-backdrop`,style:{backgroundColor:v,...Yt}}),r.jsxs("div",{className:`${e}-lightbox-dismiss-area`,style:{position:"relative",width:"100%",height:"100%",...pt},...Tt,children:[r.jsx("div",{className:`${e}-lightbox-content`,style:ln,onClick:I=>I.stopPropagation(),children:r.jsx("div",{className:`${e}-lightbox-strip`,"data-desktop-nav":Ce&&re.length>1?"true":"false",onPointerDown:Ce?Vt:void 0,onPointerUp:Ce?Jt:void 0,onPointerCancel:Ce?pn:void 0,children:r.jsxs("div",{className:`${e}-slide-stack`,children:[Zt&&D?r.jsx("div",{className:`${e}-slide-layer-out ${e}-slide-fade-out`,onAnimationEnd:I=>{I.target===I.currentTarget&&ut(Z)},children:r.jsx("div",{className:`${e}-slide-area`,children:Rt(Zt.images)})},`slide-out-${Z}`):null,r.jsx("div",{className:`${e}-slide-layer-in${D?` ${e}-slide-fade-in`:""}`,children:r.jsx("div",{className:`${e}-slide-area`,children:U?Rt(U.images):null})},`slide-in-${Z}-${B}`)]})})}),r.jsxs("div",{className:`${e}-lightbox-overlay-content`,style:{width:"100%",height:"100%",...He},children:[r.jsx("div",{"data-controls":fe?"contentMarginTop":void 0,className:fe?`${e}-control`:void 0,style:{height:ne,width:"100%"}}),r.jsx("div",{style:{display:"flex",flexDirection:"row",width:"100%",...oe?{flex:1,minHeight:0}:{}},children:r.jsxs("div",{className:`${e}-lightbox-content-area${oe?` ${e}-lightbox-content-area-stacked`:""}`,children:[(oe?Wt:kt)&&r.jsx("div",{className:`${e}-text-bar-cell${oe?` ${e}-text-bar-cell-stacked`:""}`,children:oe?w==="fade"?Rn():mn():w==="fade"?r.jsxs(r.Fragment,{children:[r.jsx("div",{ref:Ze,className:ye,style:{position:"absolute",visibility:"hidden",pointerEvents:"none",left:0,right:0,top:0,width:"100%",height:"auto"},"aria-hidden":"true",children:En(Ge||J)}),r.jsxs("div",{ref:bt,className:ye,style:{width:"100%",...xe&&Te?{minHeight:Te}:void 0,...xe&&_e?{width:_e,maxWidth:"100%"}:void 0,...xe?{overflow:"hidden"}:void 0},children:[Ke&&xe?r.jsx("div",{className:`${Ie} ${e}-titles-fade-out`,children:En(Ke)}):null,r.jsx("div",{className:`${e}-titles-layer-in${xe?` ${e}-titles-layer-in-fading ${e}-titles-fade-in`:""}`,children:En(J)}),we()]})]}):r.jsxs("div",{style:{position:"relative",width:"100%"},children:[En(J),we()]})}),!oe&&r.jsxs("div",{className:`${e}-lightbox-persistent-controls`,style:te,children:[Pe&&Bn(),ft&&Ln()]})]})})]})]})]})},Gi=["title1","title2","title3","count"];function at(e,t){return`${e}${t.charAt(0).toUpperCase()}${t.slice(1)}`}const qm={title1:"1",title2:"2",title3:"3",count:"Count"};function Xm(e){return[at(e,"fontFamily"),at(e,"fontSettings"),{type:"row",items:[at(e,"fontSize"),at(e,"lineHeight"),at(e,"letterSpacing"),at(e,"wordSpacing")]},at(e,"textAlign"),at(e,"textAppearance")]}function Ym(){return{type:"tab",id:"journalTextStyle",tabs:Object.fromEntries(Gi.map(e=>[qm[e],Xm(e)]))}}const Jm={title1:"title1Color",title2:"title2Color",title3:"title3Color",count:"countColor"},Zm={title1:.02,title2:.02,title3:.02,count:.017};function ro(e,t){const n=i=>{const o=at(t,i);return e[o]};return{fontFamily:n("fontFamily")??"Arial",fontSettings:n("fontSettings")??{fontWeight:400,fontStyle:"normal"},fontSize:n("fontSize"),lineHeight:n("lineHeight"),letterSpacing:n("letterSpacing")??0,wordSpacing:n("wordSpacing")??0,textAlign:n("textAlign")??"left",textAppearance:n("textAppearance"),color:e[Jm[t]]}}function lo(e,t,n){var o,l;const i={fontSettings:{fontFamily:t.fontFamily,fontWeight:((o=t.fontSettings)==null?void 0:o.fontWeight)??400,fontStyle:((l=t.fontSettings)==null?void 0:l.fontStyle)??"normal"},fontSize:t.fontSize??Zm[e],lineHeight:t.lineHeight,letterSpacing:t.letterSpacing,wordSpacing:t.wordSpacing,textAlign:t.textAlign,textAppearance:t.textAppearance,color:t.color??"#ffffff"};return Pt(i,n)}const Qm=({settings:e,content:t,isEditor:n,isEditMode:i,isPreviewMode:o,portalId:l,metadata:s})=>{const{prefix:d}=R.useScopedStyles(),a=(s==null?void 0:s.itemId)??null,{cover:p,coverFit:u,type:S}=e,x=c.useRef(null),[v,m]=c.useState(!1),[y,$]=c.useState(0),w=c.useRef(!1),C=c.useRef(!1),T=c.useRef(!1),P=c.useMemo(()=>(t??[]).filter(E=>fi(E).length>0),[t]),M=v&&P.length>0,F=!n,b=c.useCallback(()=>{F&&(T.current=!0,Nm(C.current,a),C.current=!1)},[F,a]),W=(E=0)=>{if(P.length===0||n&&!i&&!o)return;const k=fo(P,S),z=Math.max(0,Math.min(E,k.length-1));if($(z),F){const le=zs();js(z+1,a,le),C.current=!le}m(!0)},K=()=>{n||W()},h=E=>{n&&(E.stopPropagation(),W())},L=c.useCallback(()=>{m(!1),T.current=!1},[]);return c.useEffect(()=>{!n||i||o||m(!1)},[n,i,o]),c.useEffect(()=>{if(!F||w.current)return;w.current=!0;const E=Vl(a);if(!E)return;const k=Kl(E,fo(P,S).length);k<0||($(k),m(!0))},[P,a,F,S]),c.useEffect(()=>{if(!F)return;const E=()=>{if(T.current){T.current=!1,m(!1);return}const k=Vl(a);if(!k){m(!1);return}const z=Kl(k,fo(P,S).length);if(z<0){m(!1);return}C.current=!1,$(z),m(!0)};return window.addEventListener("popstate",E),()=>window.removeEventListener("popstate",E)},[P,a,F,S]),r.jsxs(r.Fragment,{children:[r.jsxs("div",{ref:x,className:`${d}-wrapper`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:Hm(d)}}),p?r.jsx("button",{type:"button",className:`${d}-cover ${wn(u)?`${d}-ratio-wrapper-cover`:`${d}-ratio-wrapper-fit`}`,onClick:K,onDoubleClick:h,style:{display:"block",padding:0,border:"none",background:"transparent",pointerEvents:n&&!i&&!o?"none":void 0,...wn(u)?{"--image-aspect-ratio":No(u)}:{}},"aria-label":"Open journal gallery",children:r.jsx("img",{className:`${d}-cover-image ${wn(u)?`${d}-cover-image-cover`:`${d}-cover-image-fit`}`,src:p,alt:"cover"})}):null]}),M&&typeof document<"u"&&(()=>{const E=(l?document.getElementById(l):null)??document.body;return Fi.createPortal(r.jsx(Um,{prefix:d,entries:P,settings:e,isEditor:n,isEditMode:i,isPreviewMode:o,initialSlideIndex:y,enableUrlSync:F,journalItemId:a,onBeforeClose:b,onClose:L}),E)})()]})},eg=`import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type MouseEvent } from 'react';
+`}const Bm=20,Om=2,ir=e=>`max(${e}, ${Bm}px)`,fi=e=>((e==null?void 0:e.image)??[]).slice(0,Om),Vs=e=>e.reduce((t,n)=>t+fi(n).length,0),Dm=(e,t)=>{const n=e.slice(0,t).reduce((o,l)=>o+fi(l).length,1),i=fi(e[t]).length;return{start:n,end:n+i-1}},jm=(e,t)=>{const n=Vs(e),{start:i,end:o}=Dm(e,t);return i===o?`${i} / ${n}`:`${i}-${o} / ${n}`},fo=(e,t)=>t==="B"?e.flatMap((n,i)=>fi(n).map(o=>({entry:n,entryIndex:i,images:[o]}))):e.map((n,i)=>({entry:n,entryIndex:i,images:fi(n)})),zm=(e,t,n,i)=>{var l;if(n==="B")return`${t+1} / ${e.length}`;const o=((l=e[t])==null?void 0:l.entryIndex)??0;return jm(i,o)},Gl=e=>e?`${e.title1??""}|${e.title2??""}|${e.title3??""}`:"",Vm=(e,t,n)=>e==="B"?t.length>1:Vs(n)>1,ni=.004,no=.004,or={title1Width:.13,title2Width:.13,title3Width:.14};function io(e,t,n,i,o){const l=[];return t.title1&&l.push({prefix:"title1",widthKey:"title1Width",className:`${e}-title1`,style:n,text:t.title1}),t.title2&&l.push({prefix:"title2",widthKey:"title2Width",marginLeftKey:"title2MarginLeft",className:`${e}-title2`,style:i,text:t.title2}),t.title3&&l.push({prefix:"title3",widthKey:"title3Width",marginLeftKey:"title3MarginLeft",className:`${e}-title3`,style:o,text:t.title3}),l}function Co(e,t){if(e<=0)return[];const n=t.slice(0,e),i=n.reduce((l,s)=>l+s,0);if(i<=1)return n;const{widths:o}=[...n].reverse().reduce(({overflow:l,widths:s},d)=>{if(l<=0||d<=0)return{overflow:l,widths:[d,...s]};const a=Math.min(l,d);return{overflow:l-a,widths:[d-a,...s]}},{overflow:i-1,widths:[]});return o}function yr(e,t){return Co(e,t)}function Vn(e,t){const n=t.filter((i,o)=>o!==e).reduce((i,o)=>i+o,0);return Math.max(1-n,0)}function oo(e,t){const n=e.map(i=>t[i.widthKey]??0);return{resolved:Co(e.length,n),effective:yr(e.length,n)}}function Km(e,t,n,i){return e.slice(0,i).reduce((o,l,s)=>o+(l!=null&&l.marginLeftKey?n[l.marginLeftKey]??0:0)+(t[s]??0),0)}function Gm(e,t,n,i){return e.slice(0,i+1).reduce((o,l,s)=>o+(l!=null&&l.marginLeftKey?n[l.marginLeftKey]??0:0)+(t[s]??0),0)}const Um=({prefix:e,entries:t,settings:n,isEditor:i,isEditMode:o,isPreviewMode:l,initialSlideIndex:s=0,enableUrlSync:d=!1,journalItemId:a=null,onBeforeClose:p,onClose:u})=>{const{type:S,coverFit:x,backgroundColor:v,imageGap:m,maxWidth:y,maxHeight:$,textTransition:w,title1Width:C,title2Width:T,title3Width:P,title1MarginLeft:M=0,title2MarginLeft:F=0,title3MarginLeft:b=0,titleRowMarginBottom:W=0,titleHeaderLayout:K="single-row",countCloseGap:h=0,closeIcon:L,closeIconMaxWidth:E,closeIconColor:k,closeIconHoverColor:z,contentMarginTop:le=0,iconMarginRight:O=0}=n,_=c.useCallback(I=>R.scalingValue(I,i??!1),[i]),q=_(m??0),G=`${y}%`,H=`${$}%`,X=_(h),ne=_(le),se=_(O),N=lo("title1",ro(n,"title1"),i),de=lo("title2",ro(n,"title2"),i),g=lo("title3",ro(n,"title3"),i),ie=lo("count",ro(n,"count"),i),fe=!!o,oe=K==="mobile",Ce=!i||!!l,me=!o&&(!i||!!l),re=c.useMemo(()=>fo(t,S),[t,S]),[B,Q]=c.useState(s),U=re[B],J=U==null?void 0:U.entry,[Me,Ae]=c.useState(!1),[ke,Fe]=c.useState(null),[xe,j]=c.useState(!1),[ae,A]=c.useState(null),[D,Y]=c.useState(!1),[Z,ge]=c.useState(0),[Te,je]=c.useState(),[_e,Le]=c.useState(),[Ge,pe]=c.useState(null),We=c.useRef(null),ze=c.useRef(0),Ve=c.useRef(0),Ne=c.useRef(0),It=c.useRef(!1),dt=c.useRef(null),bt=c.useRef(null),Ze=c.useRef(null),yt=c.useRef(null),Mt=c.useRef(null),Ht=c.useRef(null),Ee=c.useRef(null),it=c.useCallback(()=>{const I=bt.current;if(!I)return;const ce=I.closest(`.${e}-lightbox-content-area`);if(!ce)return I.getBoundingClientRect().width;const Re=Array.from(ce.children).reduce(($e,we)=>!(we instanceof HTMLElement)||we.contains(I)?$e:$e+we.getBoundingClientRect().width,0);return ce.getBoundingClientRect().width-Re},[e]),Ue=c.useCallback(()=>{We.current&&(clearTimeout(We.current),We.current=null)},[]),ut=c.useCallback(I=>{I===ze.current&&(A(null),Y(!1))},[]),Bt=c.useCallback(()=>{o||It.current||(It.current=!0,p==null||p(),Ae(!1),dt.current=setTimeout(()=>{u()},nr))},[o,p,u]),rn=c.useCallback(I=>!!(I.closest("[data-controls]")||I.closest(`.${e}-close-icon`)),[e]),{isSwipeDragging:jt,backdropStyle:Yt,mediaAreaStyle:ln,overlayContentStyle:He,swipeHandlers:Tt,dismissAreaStyle:pt}=Bs({enabled:me,onClose:Bt,animMs:nr,isBlockedTarget:rn}),et=c.useCallback(I=>{d&&js(I+1,a,!0)},[d,a]),mt=c.useCallback(I=>{var en;if(re.length===0)return;const ce=(I%re.length+re.length)%re.length;if(ce===B)return;const Re=re[B],$e=re[ce];ze.current+=1;const we=ze.current,lt=w==="fade"&&Gl(Re==null?void 0:Re.entry)!==Gl($e==null?void 0:$e.entry),Ct=(en=bt.current)==null?void 0:en.getBoundingClientRect().height,nt=lt?(()=>{var qr;const Qn=it();Fi.flushSync(()=>{pe($e.entry)}),Ze.current&&Qn&&(Ze.current.style.width=`${Qn}px`);const gn=(qr=Ze.current)==null?void 0:qr.getBoundingClientRect().height;return Ze.current&&(Ze.current.style.width=""),{measuredIncomingTitlesHeight:gn,incomingTitlesMeasureWidth:Qn}})():void 0,Ot=Math.max(Ct??0,(nt==null?void 0:nt.measuredIncomingTitlesHeight)??0)||void 0;ge(we),A(B),Y(!0),Q(ce),et(ce),Ne.current=ce,lt?(Ue(),Ot&&je(Ot),nt!=null&&nt.incomingTitlesMeasureWidth&&Le(nt.incomingTitlesMeasureWidth),Fe((Re==null?void 0:Re.entryIndex)??null),j(!0),Ve.current=$e.entryIndex,We.current=setTimeout(()=>{Fe(null),j(!1),je(void 0),Le(void 0),pe(null),We.current=null},hr)):(Ue(),Fe(null),j(!1),je(void 0),Le(void 0),pe(null),Ve.current=$e.entryIndex)},[B,Ue,it,re,et,w]),zt=c.useCallback(()=>{Ee.current=null},[]),Vt=c.useCallback(I=>{!Ce||re.length<=1||I.pointerType==="mouse"&&I.button!==0||I.target.closest("[data-controls]")||(Ee.current={startX:I.clientX,startY:I.clientY,pointerId:I.pointerId})},[Ce,re.length]),Jt=c.useCallback(I=>{var en;if(!Ce||re.length<=1||I.pointerType==="mouse"&&I.button!==0)return;if(jt){zt();return}const ce=Ee.current;if(!ce||ce.pointerId!==I.pointerId||(zt(),I.target.closest("[data-controls]")))return;const $e=I.clientX-ce.startX,we=I.clientY-ce.startY,lt=Math.abs($e),Ct=Math.abs(we);if(lt>=km&&lt>Ct){mt($e>0?B-1:B+1);return}if(lt>jl||Ct>jl)return;const nt=(en=yt.current)==null?void 0:en.getBoundingClientRect(),Ot=nt?nt.left+nt.width/2:window.innerWidth/2;mt(I.clientX<Ot?B-1:B+1)},[B,Ce,mt,jt,zt,re.length]),pn=c.useCallback(I=>{const ce=Ee.current;(ce==null?void 0:ce.pointerId)===I.pointerId&&zt()},[zt]);Os(),c.useEffect(()=>{Ht.current=document.activeElement instanceof HTMLElement?document.activeElement:null;const I=requestAnimationFrame(()=>{Ae(!0),requestAnimationFrame(()=>{Mt.current?Mt.current.focus():yt.current&&yt.current.focus()})});return()=>{cancelAnimationFrame(I),dt.current&&clearTimeout(dt.current),We.current&&clearTimeout(We.current);const ce=Ht.current;ce&&document.contains(ce)&&ce.focus()}},[]),c.useEffect(()=>{var I;w!=="fade"&&(Ve.current=((I=re[B])==null?void 0:I.entryIndex)??0,Ue(),Fe(null),j(!1),je(void 0),Le(void 0))},[B,Ue,re,w]),c.useEffect(()=>{const I=ce=>{if(ce.key==="Escape"){Bt();return}if(ce.key==="ArrowLeft"&&re.length>1){mt(B-1);return}if(ce.key==="ArrowRight"&&re.length>1){mt(B+1);return}if(ce.key==="Tab"&&yt.current){const Re=yt.current.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'),$e=Array.from(Re).filter(nt=>!nt.closest('[aria-hidden="true"]'));if($e.length===0)return;const we=$e[0],lt=$e[$e.length-1],Ct=document.activeElement;ce.shiftKey?(Ct===we||!yt.current.contains(Ct))&&(ce.preventDefault(),lt.focus()):(Ct===lt||!yt.current.contains(Ct))&&(ce.preventDefault(),we.focus())}};return window.addEventListener("keydown",I),()=>window.removeEventListener("keydown",I)},[mt,Bt,B,re.length]),c.useLayoutEffect(()=>{Ue(),ze.current=0,ge(0),A(null),Y(!1),Fe(null),j(!1),je(void 0),Le(void 0),pe(null),Q(I=>{const ce=Math.max(0,re.length-1);return Math.min(I,ce)})},[Ue,t.length,S,re.length]),c.useLayoutEffect(()=>{var I;Ne.current=s,Ve.current=((I=re[s])==null?void 0:I.entryIndex)??0,Q(s)},[s,re.length]);const Ke=ke!==null?t[ke]:null,Zt=ae!==null?re[ae]:null,kt=(J==null?void 0:J.title1)||(J==null?void 0:J.title2)||(J==null?void 0:J.title3)||(Ke==null?void 0:Ke.title1)||(Ke==null?void 0:Ke.title2)||(Ke==null?void 0:Ke.title3),Pe=Vm(S,re,t),ft=L!==null,Wt=kt||Pe||ft,te=Pe&&ft?{gap:X}:void 0,ye=`${e}-titles-stack${oe?` ${e}-titles-stack-stacked`:""}`,Ie=`${e}-titles-layer-out${oe?` ${e}-titles-layer-out-stacked`:""}`,De=_(W),qe=c.useMemo(()=>({title1Width:C??or.title1Width,title2Width:T??or.title2Width,title3Width:P??or.title3Width}),[C,T,P]),Qe=c.useMemo(()=>({title2MarginLeft:F,title3MarginLeft:b}),[F,b]),ve=c.useMemo(()=>J?io(e,J,N,de,g):[],[e,J,N,de,g]),$t=c.useMemo(()=>ve.map(I=>qe[I.widthKey]),[ve,qe]),gt=c.useMemo(()=>Co(ve.length,$t),[ve.length,$t]),ht=c.useMemo(()=>yr(ve.length,$t),[ve.length,$t]),ot=c.useMemo(()=>ve.filter(I=>I.prefix==="title1"),[ve]),Be=c.useMemo(()=>ve.filter(I=>I.prefix==="title2"||I.prefix==="title3"),[ve]),vt=c.useMemo(()=>oo(ot,qe),[ot,qe]),rt=c.useMemo(()=>oo(Be,qe),[Be,qe]),wt=c.useCallback((I,ce)=>{const Re=ve.findIndex(we=>we.prefix===I.prefix);if(!oe||ce==="single-row")return{effectiveWidth:ht[Re]??0,resolvedWidth:gt[Re]??0,maxWidth:Vn(Re,gt)};if(ce==="two-row-top"){const we=ot.findIndex(lt=>lt.prefix===I.prefix);return{effectiveWidth:vt.effective[we]??0,resolvedWidth:vt.resolved[we]??0,maxWidth:Vn(we,vt.resolved)}}const $e=Be.findIndex(we=>we.prefix===I.prefix);return{effectiveWidth:rt.effective[$e]??0,resolvedWidth:rt.resolved[$e]??0,maxWidth:Vn($e,rt.resolved)}},[ve,Be,rt,ht,gt,ot,vt,oe]),_t=c.useCallback(I=>Gm(ve,gt,Qe,I)+(oe?0:M??0),[ve,gt,Qe,oe,M]),St=c.useCallback(()=>oe?0:M??0,[oe,M]),At=c.useCallback(I=>Be.slice(0,I).reduce((ce,Re,$e)=>ce+(Re.marginLeftKey?Qe[Re.marginLeftKey]??0:0)+(rt.resolved[$e]??0),0),[Be,rt.resolved,Qe]),tt=c.useCallback(I=>{const ce=Be[I];return At(I)+(ce.marginLeftKey?Qe[ce.marginLeftKey]??0:0)+(rt.resolved[I]??0)},[Be,rt.resolved,At,Qe]),Ft=c.useCallback((I,ce,Re)=>{if(!oe||Re==="single-row"){const nt=I.findIndex(gn=>gn.prefix===ce.prefix),Ot=I.map(gn=>qe[gn.widthKey]),en=Co(I.length,Ot);return{effectiveWidth:yr(I.length,Ot)[nt]??0,resolvedWidth:en[nt]??0,maxWidth:Vn(nt,en)}}if(Re==="two-row-top"){const nt=I.filter(gn=>gn.prefix==="title1"),Ot=nt.findIndex(gn=>gn.prefix===ce.prefix),{resolved:en,effective:Qn}=oo(nt,qe);return{effectiveWidth:Qn[Ot]??0,resolvedWidth:en[Ot]??0,maxWidth:Vn(Ot,en)}}const $e=I.filter(nt=>nt.prefix==="title2"||nt.prefix==="title3"),we=$e.findIndex(nt=>nt.prefix===ce.prefix),{resolved:lt,effective:Ct}=oo($e,qe);return{effectiveWidth:Ct[we]??0,resolvedWidth:lt[we]??0,maxWidth:Vn(we,lt)}},[qe,oe]),Kt=(I,ce,Re)=>{const $e=I.marginLeftKey?Qe[I.marginLeftKey]??0:0,{effectiveWidth:we,resolvedWidth:lt,maxWidth:Ct}=Re??wt(I,ce),nt=Math.max($e,no),Ot=fe&&ce==="two-row-top";return r.jsxs("div",{className:`${e}-title-cell`,"data-title":I.prefix,style:{width:_(we),...$e>0?{marginLeft:_($e)}:{}},children:[r.jsx("p",{className:I.className,style:I.style,children:I.text}),Ot&&I.marginLeftKey?r.jsx("div",{"data-controls":I.marginLeftKey,"data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(lt),style:{position:"absolute",top:0,left:_(-$e),width:_(nt),height:"100%",pointerEvents:"auto"}}):null,Ot?r.jsx("div",{"data-controls":I.widthKey,"data-controls-axis":"x","data-controls-max-fraction":String(Ct),"data-controls-variant":"column-width",className:`${e}-title-resize-handle`,style:{position:"absolute",top:0,right:_(-ni/2),width:_(ni),height:"100%",pointerEvents:"auto"}}):null]},I.className)},$n=()=>r.jsx("div",{...fe?{"data-controls":"title1MarginLeft","data-controls-axis":"x"}:{},style:{width:_(M??0),flexShrink:0,alignSelf:"stretch",...fe?{pointerEvents:"auto"}:{}}}),Bn=()=>r.jsxs("div",{className:`${e}-text-bar-cell`,children:[r.jsx("span",{className:`${e}-entry-counter`,style:ie,"aria-live":"polite","aria-atomic":"true",children:zm(re,B,S,t)}),fe&&ft?r.jsx("div",{"data-controls":"countCloseGap","data-controls-axis":"x","data-controls-reverse":"true",style:{position:"absolute",top:0,right:`calc(-0.5 * (${ir(X)} + ${X}))`,width:ir(X),height:"100%",pointerEvents:"auto",zIndex:3}}):null]}),Ln=()=>r.jsxs("div",{className:`${e}-close-icon`,style:{width:R.scalingValue(E??0,i),height:R.scalingValue(E??0,i),marginRight:se,"--close-icon-hover-color":z},children:[r.jsx("button",{ref:Mt,type:"button",className:`${e}-close-icon-inner`,onClick:Bt,"aria-label":"Close",children:r.jsx(an,{url:L??"",fill:k,hoverFill:i&&!l?k:z,className:`${e}-close-icon-img`})}),fe?r.jsx("div",{"data-controls":"iconMarginRight","data-controls-axis":"x","data-controls-reverse":"",className:`${e}-control`,style:{position:"absolute",top:0,left:"100%",width:se,height:"100%",pointerEvents:"auto"}}):null]}),Yn=()=>!Pe&&!ft?null:r.jsxs("div",{className:`${e}-titles-row-top-controls`,style:te,children:[Pe?Bn():null,ft?Ln():null]}),Jn=I=>{if(!I)return null;const ce=io(e,I,N,de,g);return r.jsxs(r.Fragment,{children:[M>0||fe?$n():null,ce.map(Re=>Kt(Re,"single-row",Ft(ce,Re,"single-row")))]})},Qt=I=>{if(!I)return null;const ce=io(e,I,N,de,g),Re=ce.find($e=>$e.prefix==="title1");return!Re&&!(M>0||fe)?null:r.jsxs(r.Fragment,{children:[M>0||fe?$n():null,Re?Kt(Re,"two-row-top",Ft(ce,Re,"two-row-top")):null]})},Si=(I,ce=!1)=>{const Re=I?io(e,I,N,de,g):[],$e=Re.filter(Ct=>Ct.prefix==="title2"||Ct.prefix==="title3"),we=fe&&ce;return $e.length>0||we||(W??0)>0?r.jsxs("div",{className:`${e}-titles-row-bottom-wrap`,children:[$e.length>0?r.jsxs("div",{className:`${e}-titles-row-bottom`,children:[$e.map(Ct=>Kt(Ct,"two-row-bottom",Ft(Re,Ct,"two-row-bottom"))),ce&&fe?r.jsxs(r.Fragment,{children:[ee(),he()]}):null]}):null,(W??0)>0||we?r.jsx("div",{"data-controls":we?"titleRowMarginBottom":void 0,"data-controls-axis":we?"y":void 0,"data-controls-reverse":we?"":void 0,className:we?`${e}-control`:void 0,style:{height:De,width:"100%",flexShrink:0,pointerEvents:we?"auto":"none"}}):null]}):null},Zn=(I,ce=!1)=>r.jsxs(r.Fragment,{children:[r.jsxs("div",{className:`${e}-titles-row-top`,children:[Qt(I),Yn()]}),Si(I,ce)]}),En=I=>oe?r.jsx("div",{className:`${e}-titles-row-two-row`,style:{width:"100%"},children:Zn(I)}):I?r.jsx("div",{className:`${e}-titles-row`,style:{width:"100%"},children:Jn(I)}):null,f=()=>{const I=oe?-1:ve.findIndex($e=>$e.prefix==="title1"),ce=!oe&&(fe||(M??0)>0)?(()=>{const we=Math.max(M??0,no),lt=I>=0?gt[I]:C;return r.jsx("div",{"data-controls":"title1MarginLeft","data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(lt),style:{position:"absolute",top:0,left:0,width:_(we),height:"100%",pointerEvents:"auto"}},"title1MarginLeft")})():null,Re=ve.flatMap(($e,we)=>{if(!$e.marginLeftKey)return[];const lt=Qe[$e.marginLeftKey]??0,Ct=Km(ve,gt,Qe,we)+St(),nt=Math.max(lt,no);return r.jsx("div",{"data-controls":$e.marginLeftKey,"data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(gt[we]),style:{position:"absolute",top:0,left:_(Ct),width:_(nt),height:"100%",pointerEvents:"auto"}},$e.marginLeftKey)});return ce?[ce,...Re]:Re},V=()=>ve.map((I,ce)=>{const Re=Vn(ce,gt),we=_t(ce)-ni/2;return r.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:r.jsx("div",{"data-controls":I.widthKey,"data-controls-axis":"x","data-controls-max-fraction":String(Re),"data-controls-variant":"column-width",className:`${e}-title-resize-handle`,style:{position:"absolute",top:0,left:_(we),width:_(ni),height:"100%",pointerEvents:"auto"}})},`${I.widthKey}-junction`)}),ee=()=>Be.flatMap((I,ce)=>{if(!I.marginLeftKey)return[];const Re=Qe[I.marginLeftKey]??0,$e=At(ce),we=Math.max(Re,no),{resolvedWidth:lt}=wt(I,"two-row-bottom");return r.jsx("div",{"data-controls":I.marginLeftKey,"data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(lt),style:{position:"absolute",top:0,left:_($e),width:_(we),height:"100%",pointerEvents:"auto"}},I.marginLeftKey)}),he=()=>Be.map((I,ce)=>{const{maxWidth:Re}=wt(I,"two-row-bottom"),we=tt(ce)-ni/2;return r.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:r.jsx("div",{"data-controls":I.widthKey,"data-controls-axis":"x","data-controls-max-fraction":String(Re),"data-controls-variant":"column-width",className:`${e}-title-resize-handle`,style:{position:"absolute",top:0,left:_(we),width:_(ni),height:"100%",pointerEvents:"auto"}})},`${I.widthKey}-junction`)}),Se=()=>!fe||oe?null:r.jsxs(r.Fragment,{children:[f(),V()]}),Je=I=>{const ce=!I.objectFit&&wn(x);return{className:`${e}-slide-image-cell${ce?` ${e}-slide-image-cell-cover`:""}`,style:{maxWidth:G,maxHeight:H,...ce?{"--image-aspect-ratio":No(x)}:{}}}},Lt=I=>I.objectFit?{className:`${e}-slide-image ${e}-slide-image-custom`,style:{"--image-object-fit":I.objectFit}}:wn(x)?{className:`${e}-slide-image ${e}-slide-image-cover`}:{className:`${e}-slide-image ${e}-slide-image-fit`},Rt=I=>{if(I.length===0)return null;const ce=I.length>1,Re=ir(q),$e=`calc(-0.5 * (${Re} + ${q}))`;if(I.length===1){const we=I[0];return r.jsx("div",{...Je(we),children:r.jsx("img",{...Lt(we),src:we.url,alt:we.name??"",draggable:!1})})}return r.jsx("div",{className:`${e}-slide-inner`,style:ce?{gap:q}:void 0,children:I.map((we,lt)=>r.jsxs("div",{...Je(we),children:[r.jsx("img",{...Lt(we),src:we.url,alt:we.name??"",draggable:!1}),fe&&ce&&lt<I.length-1&&r.jsx("div",{"data-controls":"imageGap","data-controls-axis":"x",style:{position:"absolute",top:0,right:$e,width:Re,height:"100%",pointerEvents:"auto",zIndex:3}})]},`${we.url}-${lt}`))})},In=!!(J!=null&&J.title2||J!=null&&J.title3||Ke!=null&&Ke.title2||Ke!=null&&Ke.title3||(W??0)>0||fe),Rn=()=>r.jsxs("div",{style:{position:"relative",width:"100%",flex:1,alignSelf:"stretch",display:"flex",flexDirection:"column",minHeight:0,height:"100%"},children:[r.jsx("div",{ref:Ze,className:ye,style:{position:"absolute",visibility:"hidden",pointerEvents:"none",left:0,right:0,top:0,width:"100%",height:"auto"},"aria-hidden":"true",children:Zn(Ge||J)}),r.jsxs("div",{ref:bt,className:`${e}-titles-row-two-row`,style:{...xe&&Te?{minHeight:Te}:void 0,...xe&&_e?{width:_e,maxWidth:"100%"}:void 0,...xe?{overflow:"hidden"}:void 0},children:[r.jsxs("div",{className:`${e}-titles-row-top`,children:[r.jsxs("div",{className:ye,style:{position:"relative",flex:1,minWidth:0},children:[Ke&&xe?r.jsx("div",{className:`${Ie} ${e}-titles-fade-out`,children:Qt(Ke)}):null,r.jsx("div",{className:`${e}-titles-layer-in${xe?` ${e}-titles-layer-in-fading ${e}-titles-fade-in`:""}`,children:Qt(J)})]}),Yn()]}),In?r.jsxs("div",{className:`${e}-titles-row-bottom-area`,children:[Ke&&xe?r.jsx("div",{className:`${Ie} ${e}-titles-layer-out-bottom ${e}-titles-fade-out`,children:Si(Ke)}):null,r.jsx("div",{className:`${e}-titles-layer-in${xe?` ${e}-titles-layer-in-fading ${e}-titles-fade-in`:""}${oe?` ${e}-titles-layer-in-stacked`:""}`,children:Si(J,!0)}),Se()]}):null]})]}),mn=()=>{const I=In;return r.jsxs("div",{style:{position:"relative",width:"100%",alignSelf:"stretch",display:"flex",flexDirection:"column",minHeight:0,...I?{flex:1,height:"100%"}:{}},children:[r.jsx("div",{className:`${e}-titles-row-two-row`,style:I?void 0:{flex:"0 0 auto",height:"auto"},children:Zn(J,!0)}),Se()]})};return r.jsxs("div",{ref:yt,"data-selection":"none",className:`${e}-lightbox${i?` ${e}-lightbox-editor`:""}${o?` ${e}-lightbox-edit-mode`:""}`,onClick:()=>{jt||Bt()},role:"dialog","aria-modal":"true","aria-label":"Journal gallery",tabIndex:ft?void 0:-1,style:{opacity:Me?1:0,transition:`opacity ${nr}ms ease`,pointerEvents:Me?"auto":"none"},children:[r.jsx("div",{className:`${e}-lightbox-backdrop`,style:{backgroundColor:v,...Yt}}),r.jsxs("div",{className:`${e}-lightbox-dismiss-area`,style:{position:"relative",width:"100%",height:"100%",...pt},...Tt,children:[r.jsx("div",{className:`${e}-lightbox-content`,style:ln,onClick:I=>I.stopPropagation(),children:r.jsx("div",{className:`${e}-lightbox-strip`,"data-desktop-nav":Ce&&re.length>1?"true":"false",onPointerDown:Ce?Vt:void 0,onPointerUp:Ce?Jt:void 0,onPointerCancel:Ce?pn:void 0,children:r.jsxs("div",{className:`${e}-slide-stack`,children:[Zt&&D?r.jsx("div",{className:`${e}-slide-layer-out ${e}-slide-fade-out`,onAnimationEnd:I=>{I.target===I.currentTarget&&ut(Z)},children:r.jsx("div",{className:`${e}-slide-area`,children:Rt(Zt.images)})},`slide-out-${Z}`):null,r.jsx("div",{className:`${e}-slide-layer-in${D?` ${e}-slide-fade-in`:""}`,children:r.jsx("div",{className:`${e}-slide-area`,children:U?Rt(U.images):null})},`slide-in-${Z}-${B}`)]})})}),r.jsxs("div",{className:`${e}-lightbox-overlay-content`,style:{width:"100%",height:"100%",...He},children:[r.jsx("div",{"data-controls":fe?"contentMarginTop":void 0,className:fe?`${e}-control`:void 0,style:{height:ne,width:"100%"}}),r.jsx("div",{style:{display:"flex",flexDirection:"row",width:"100%",...oe?{flex:1,minHeight:0}:{}},children:r.jsxs("div",{className:`${e}-lightbox-content-area${oe?` ${e}-lightbox-content-area-stacked`:""}`,children:[(oe?Wt:kt)&&r.jsx("div",{className:`${e}-text-bar-cell${oe?` ${e}-text-bar-cell-stacked`:""}`,children:oe?w==="fade"?Rn():mn():w==="fade"?r.jsxs(r.Fragment,{children:[r.jsx("div",{ref:Ze,className:ye,style:{position:"absolute",visibility:"hidden",pointerEvents:"none",left:0,right:0,top:0,width:"100%",height:"auto"},"aria-hidden":"true",children:En(Ge||J)}),r.jsxs("div",{ref:bt,className:ye,style:{width:"100%",...xe&&Te?{minHeight:Te}:void 0,...xe&&_e?{width:_e,maxWidth:"100%"}:void 0,...xe?{overflow:"hidden"}:void 0},children:[Ke&&xe?r.jsx("div",{className:`${Ie} ${e}-titles-fade-out`,children:En(Ke)}):null,r.jsx("div",{className:`${e}-titles-layer-in${xe?` ${e}-titles-layer-in-fading ${e}-titles-fade-in`:""}`,children:En(J)}),Se()]})]}):r.jsxs("div",{style:{position:"relative",width:"100%"},children:[En(J),Se()]})}),!oe&&r.jsxs("div",{className:`${e}-lightbox-persistent-controls`,style:te,children:[Pe&&Bn(),ft&&Ln()]})]})})]})]})]})},Gi=["title1","title2","title3","count"];function at(e,t){return`${e}${t.charAt(0).toUpperCase()}${t.slice(1)}`}const qm={title1:"1",title2:"2",title3:"3",count:"Count"};function Xm(e){return[at(e,"fontFamily"),at(e,"fontSettings"),{type:"row",items:[at(e,"fontSize"),at(e,"lineHeight"),at(e,"letterSpacing"),at(e,"wordSpacing")]},at(e,"textAlign"),at(e,"textAppearance")]}function Ym(){return{type:"tab",id:"journalTextStyle",tabs:Object.fromEntries(Gi.map(e=>[qm[e],Xm(e)]))}}const Jm={title1:"title1Color",title2:"title2Color",title3:"title3Color",count:"countColor"},Zm={title1:.02,title2:.02,title3:.02,count:.017};function ro(e,t){const n=i=>{const o=at(t,i);return e[o]};return{fontFamily:n("fontFamily")??"Arial",fontSettings:n("fontSettings")??{fontWeight:400,fontStyle:"normal"},fontSize:n("fontSize"),lineHeight:n("lineHeight"),letterSpacing:n("letterSpacing")??0,wordSpacing:n("wordSpacing")??0,textAlign:n("textAlign")??"left",textAppearance:n("textAppearance"),color:e[Jm[t]]}}function lo(e,t,n){var o,l;const i={fontSettings:{fontFamily:t.fontFamily,fontWeight:((o=t.fontSettings)==null?void 0:o.fontWeight)??400,fontStyle:((l=t.fontSettings)==null?void 0:l.fontStyle)??"normal"},fontSize:t.fontSize??Zm[e],lineHeight:t.lineHeight,letterSpacing:t.letterSpacing,wordSpacing:t.wordSpacing,textAlign:t.textAlign,textAppearance:t.textAppearance,color:t.color??"#ffffff"};return Pt(i,n)}const Qm=({settings:e,content:t,isEditor:n,isEditMode:i,isPreviewMode:o,portalId:l,metadata:s})=>{const{prefix:d}=R.useScopedStyles(),a=(s==null?void 0:s.itemId)??null,{cover:p,coverFit:u,type:S}=e,x=c.useRef(null),[v,m]=c.useState(!1),[y,$]=c.useState(0),w=c.useRef(!1),C=c.useRef(!1),T=c.useRef(!1),P=c.useMemo(()=>(t??[]).filter(E=>fi(E).length>0),[t]),M=v&&P.length>0,F=!n,b=c.useCallback(()=>{F&&(T.current=!0,Nm(C.current,a),C.current=!1)},[F,a]),W=(E=0)=>{if(P.length===0||n&&!i&&!o)return;const k=fo(P,S),z=Math.max(0,Math.min(E,k.length-1));if($(z),F){const le=zs();js(z+1,a,le),C.current=!le}m(!0)},K=()=>{n||W()},h=E=>{n&&(E.stopPropagation(),W())},L=c.useCallback(()=>{m(!1),T.current=!1},[]);return c.useEffect(()=>{!n||i||o||m(!1)},[n,i,o]),c.useEffect(()=>{if(!F||w.current)return;w.current=!0;const E=Vl(a);if(!E)return;const k=Kl(E,fo(P,S).length);k<0||($(k),m(!0))},[P,a,F,S]),c.useEffect(()=>{if(!F)return;const E=()=>{if(T.current){T.current=!1,m(!1);return}const k=Vl(a);if(!k){m(!1);return}const z=Kl(k,fo(P,S).length);if(z<0){m(!1);return}C.current=!1,$(z),m(!0)};return window.addEventListener("popstate",E),()=>window.removeEventListener("popstate",E)},[P,a,F,S]),r.jsxs(r.Fragment,{children:[r.jsxs("div",{ref:x,className:`${d}-wrapper`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:Hm(d)}}),p?r.jsx("button",{type:"button",className:`${d}-cover ${wn(u)?`${d}-ratio-wrapper-cover`:`${d}-ratio-wrapper-fit`}`,onClick:K,onDoubleClick:h,style:{display:"block",padding:0,border:"none",background:"transparent",pointerEvents:n&&!i&&!o?"none":void 0,...wn(u)?{"--image-aspect-ratio":No(u)}:{}},"aria-label":"Open journal gallery",children:r.jsx("img",{className:`${d}-cover-image ${wn(u)?`${d}-cover-image-cover`:`${d}-cover-image-fit`}`,src:p,alt:"cover"})}):null]}),M&&typeof document<"u"&&(()=>{const E=(l?document.getElementById(l):null)??document.body;return Fi.createPortal(r.jsx(Um,{prefix:d,entries:P,settings:e,isEditor:n,isEditMode:i,isPreviewMode:o,initialSlideIndex:y,enableUrlSync:F,journalItemId:a,onBeforeClose:b,onClose:L}),E)})()]})},eg=`import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type MouseEvent } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { CommonComponentProps } from '../props';
 import { scalingValue } from '../utils/scalingValue';
@@ -13135,7 +13142,12 @@ const LightboxOverlay = ({
         onClick={handleClose}
         aria-label="Close"
       >
-        <SvgImage url={closeIcon ?? ''} fill={closeIconColor} hoverFill={closeIconHoverColor} className={\`\${P}-close-icon-img\`} />
+        <SvgImage
+          url={closeIcon ?? ''}
+          fill={closeIconColor}
+          hoverFill={isEditor && !isPreviewMode ? closeIconColor : closeIconHoverColor}
+          className={\`\${P}-close-icon-img\`}
+        />
       </button>
       {showControls ? (
         <div

package/dist/index.mjs

@@ -21676,11 +21676,11 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
         maxWidth: co(tt, Nt)
       };
     if (V === "two-row-top") {
-      const Tt = Dt.indexOf(h);
+      const Ct = Dt.indexOf(h);
       return {
-        effectiveWidth: D.effective[Tt] ?? 0,
-        resolvedWidth: D.resolved[Tt] ?? 0,
-        maxWidth: co(Tt, D.resolved)
+        effectiveWidth: D.effective[Ct] ?? 0,
+        resolvedWidth: D.resolved[Ct] ?? 0,
+        maxWidth: co(Ct, D.resolved)
       };
     }
     const yt = St.indexOf(h);
@@ -21730,7 +21730,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
     },
     [St, st.resolved, Ut, Z]
   ), Et = (h, V) => {
-    const tt = h.marginLeftKey ? Z[h.marginLeftKey] ?? 0 : 0, { effectiveWidth: yt, resolvedWidth: Tt, maxWidth: ne } = _(h, V), Me = Math.max(tt, so), ke = m && V === "two-row-top";
+    const tt = h.marginLeftKey ? Z[h.marginLeftKey] ?? 0 : 0, { effectiveWidth: yt, resolvedWidth: Ct, maxWidth: ne } = _(h, V), Me = Math.max(tt, so), ke = m && V === "two-row-top";
     return /* @__PURE__ */ K(
       "div",
       {
@@ -21749,7 +21749,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
               "data-controls": h.marginLeftKey,
               "data-controls-axis": "x",
               "data-controls-min": "0",
-              "data-controls-max-fraction": String(Tt),
+              "data-controls-max-fraction": String(Ct),
               style: {
                 position: "absolute",
                 top: 0,
@@ -21784,7 +21784,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
     );
   }, Jt = () => {
     const h = it ? -1 : U.findIndex((yt) => yt.prefix === "title1"), V = !it && (m || (b ?? 0) > 0) ? (() => {
-      const Tt = Math.max(b ?? 0, so), ne = h >= 0 ? Nt[h] : M;
+      const Ct = Math.max(b ?? 0, so), ne = h >= 0 ? Nt[h] : M;
       return /* @__PURE__ */ s(
         "div",
         {
@@ -21796,20 +21796,20 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
             position: "absolute",
             top: 0,
             left: 0,
-            width: O(Tt),
+            width: O(Ct),
             height: "100%",
             pointerEvents: "auto"
           }
         },
         "title1MarginLeft"
       );
-    })() : null, tt = U.flatMap((yt, Tt) => {
+    })() : null, tt = U.flatMap((yt, Ct) => {
       if (!yt.marginLeftKey) return [];
       const ne = Z[yt.marginLeftKey] ?? 0, Me = Am(
         U,
         Nt,
         Z,
-        Tt
+        Ct
       ) + Lt(), ke = Math.max(ne, so);
       return /* @__PURE__ */ s(
         "div",
@@ -21817,7 +21817,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
           "data-controls": yt.marginLeftKey,
           "data-controls-axis": "x",
           "data-controls-min": "0",
-          "data-controls-max-fraction": String(Nt[Tt]),
+          "data-controls-max-fraction": String(Nt[Ct]),
           style: {
             position: "absolute",
             top: 0,
@@ -21835,7 +21835,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
     const tt = co(
       V,
       Nt
-    ), Tt = ft(V) - di / 2;
+    ), Ct = ft(V) - di / 2;
     return /* @__PURE__ */ s("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: /* @__PURE__ */ s(
       "div",
       {
@@ -21847,7 +21847,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
         style: {
           position: "absolute",
           top: 0,
-          left: O(Tt),
+          left: O(Ct),
           width: O(di),
           height: "100%",
           pointerEvents: "auto"
@@ -21856,7 +21856,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
     ) }, `${h.widthKey}-junction`);
   }), kt = () => St.flatMap((h, V) => {
     if (!h.marginLeftKey) return [];
-    const tt = Z[h.marginLeftKey] ?? 0, yt = Ut(V), Tt = Math.max(tt, so), { resolvedWidth: ne } = _(h, "two-row-bottom");
+    const tt = Z[h.marginLeftKey] ?? 0, yt = Ut(V), Ct = Math.max(tt, so), { resolvedWidth: ne } = _(h, "two-row-bottom");
     return /* @__PURE__ */ s(
       "div",
       {
@@ -21868,7 +21868,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
           position: "absolute",
           top: 0,
           left: O(yt),
-          width: O(Tt),
+          width: O(Ct),
           height: "100%",
           pointerEvents: "auto"
         }
@@ -21876,7 +21876,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
       h.marginLeftKey
     );
   }), qt = () => St.map((h, V) => {
-    const { maxWidth: tt } = _(h, "two-row-bottom"), Tt = Ft(V) - di / 2;
+    const { maxWidth: tt } = _(h, "two-row-bottom"), Ct = Ft(V) - di / 2;
     return /* @__PURE__ */ s("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: /* @__PURE__ */ s(
       "div",
       {
@@ -21888,7 +21888,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
         style: {
           position: "absolute",
           top: 0,
-          left: O(Tt),
+          left: O(Ct),
           width: O(di),
           height: "100%",
           pointerEvents: "auto"
@@ -21932,7 +21932,15 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
             className: `${t}-close-icon-inner`,
             onClick: Bt,
             "aria-label": "Close",
-            children: /* @__PURE__ */ s(hn, { url: x, fill: y, hoverFill: p, className: `${t}-close-icon-img` })
+            children: /* @__PURE__ */ s(
+              hn,
+              {
+                url: x,
+                fill: y,
+                hoverFill: i && !r ? y : p,
+                className: `${t}-close-icon-img`
+              }
+            )
           }
         ),
         m ? /* @__PURE__ */ s(
@@ -22035,14 +22043,14 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
   }, Kt = (h = ((V) => (V = zt.current) == null ? void 0 : V.scrollLeft)() ?? 0) => {
     var Me;
     const tt = ((Me = zt.current) == null ? void 0 : Me.clientWidth) ?? 0, yt = h + tt / 2;
-    let Tt = -1, ne = { flatIndex: 0, distance: 1 / 0 };
+    let Ct = -1, ne = { flatIndex: 0, distance: 1 / 0 };
     return fe.current.forEach((ke, Fn) => {
       if (!ke) return;
       const Nn = ke.offsetLeft, xn = Nn + ke.offsetWidth;
-      Tt === -1 && yt >= Nn && yt < xn && (Tt = Fn);
+      Ct === -1 && yt >= Nn && yt < xn && (Ct = Fn);
       const I = Math.abs(Nn - h);
       I < ne.distance && (ne = { flatIndex: Fn, distance: I });
-    }), Tt !== -1 ? Tt : ne.flatIndex;
+    }), Ct !== -1 ? Ct : ne.flatIndex;
   }, Te = (h) => {
     const V = zt.current;
     return !h || !V ? !1 : h.offsetWidth > V.clientWidth + 1;
@@ -22089,23 +22097,23 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
     activeIndex: tt,
     onComplete: yt
   } = {}) => {
-    const Tt = zt.current, ne = Pe.current;
-    if (!Tt || !ne) return;
+    const Ct = zt.current, ne = Pe.current;
+    if (!Ct || !ne) return;
     if (Ve(), ae(), Oe(!1), V === "auto") {
-      qn(Tt, h, tt, yt);
+      qn(Ct, h, tt, yt);
       return;
     }
-    const Me = Math.abs(h - Tt.scrollLeft), ke = mm(
+    const Me = Math.abs(h - Ct.scrollLeft), ke = mm(
       Me,
       ym,
       vm,
-      Tt.clientWidth * 0.55
+      Ct.clientWidth * 0.55
     );
-    Ce.current = fm(Tt, ne, h, {
+    Ce.current = fm(Ct, ne, h, {
       duration: ke,
       easing: bm,
       onComplete: () => {
-        Ce.current = null, qn(Tt, h, tt, yt);
+        Ce.current = null, qn(Ct, h, tt, yt);
       }
     });
   }, ri = (h = "smooth") => {
@@ -22115,12 +22123,12 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
   }, li = (h, V = "smooth") => {
     const tt = zt.current;
     if (!tt || e.length === 0) return;
-    const yt = tt.scrollLeft - h, Tt = Kt(tt.scrollLeft), ne = fe.current[Tt];
+    const yt = tt.scrollLeft - h, Ct = Kt(tt.scrollLeft), ne = fe.current[Ct];
     if (Ee(ne)) {
       Oe(!0), He();
       return;
     }
-    const Me = fe.current[Tt + 1], ke = ne ? Me ? Me.offsetLeft - ne.offsetLeft : ne.offsetWidth : 0, Fn = ke > 0 ? yt > ke * Yl ? 1 : yt < -ke * Yl ? -1 : 0 : 0, Nn = ye ? Tt + Fn : Math.max(0, Math.min(pn.length - 1, Tt + Fn)), xn = fe.current[Nn];
+    const Me = fe.current[Ct + 1], ke = ne ? Me ? Me.offsetLeft - ne.offsetLeft : ne.offsetWidth : 0, Fn = ke > 0 ? yt > ke * Yl ? 1 : yt < -ke * Yl ? -1 : 0 : 0, Nn = ye ? Ct + Fn : Math.max(0, Math.min(pn.length - 1, Ct + Fn)), xn = fe.current[Nn];
     if (!xn) {
       ri(V);
       return;
@@ -22132,8 +22140,8 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
       onComplete: V === "smooth" ? Ie : void 0
     });
   }, an = (h, V = "smooth") => {
-    const tt = zt.current, yt = ye ? e.length + h : h, Tt = fe.current[yt];
-    !tt || !Tt || (V === "smooth" ? Je.current = h : Je.current = null, be(h), Pn(Tt.offsetLeft, {
+    const tt = zt.current, yt = ye ? e.length + h : h, Ct = fe.current[yt];
+    !tt || !Ct || (V === "smooth" ? Je.current = h : Je.current = null, be(h), Pn(Ct.offsetLeft, {
       behavior: V,
       activeIndex: h,
       onComplete: V === "smooth" ? Ie : void 0
@@ -22188,8 +22196,8 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
     };
     return window.addEventListener("keydown", h), () => window.removeEventListener("keydown", h);
   }, [Bt]), Be(() => {
-    Se(), an(Ye.current, "auto");
-  }, [W]), Be(() => {
+    Se(), o || an(Ye.current, "auto");
+  }, [W, o]), Be(() => {
     Se(), an(0, "auto");
   }, [e.length, ye]), Ht(() => {
     if (!o) return;
@@ -22206,9 +22214,9 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
     if (!h || !vt) return;
     const V = (tt) => {
       if (tt.preventDefault(), Math.abs(tt.deltaY) <= Math.abs(tt.deltaX)) return;
-      const yt = tt.deltaMode === 1 ? wm : tt.deltaMode === 2 ? h.clientHeight : 1, Tt = tt.deltaY * yt * Sm;
-      if (Tt !== 0) {
-        if (ae(), Zt.current || (Zt.current = !0, Rt.current = h.scrollLeft, Je.current = null, Oe(!1)), Rt.current += Tt, !ye) {
+      const yt = tt.deltaMode === 1 ? wm : tt.deltaMode === 2 ? h.clientHeight : 1, Ct = tt.deltaY * yt * Sm;
+      if (Ct !== 0) {
+        if (ae(), Zt.current || (Zt.current = !0, Rt.current = h.scrollLeft, Je.current = null, Oe(!1)), Rt.current += Ct, !ye) {
           const ne = h.scrollWidth - h.clientWidth;
           Rt.current = Math.max(0, Math.min(ne, Rt.current));
         }
@@ -22223,11 +22231,11 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
     if (!h) return;
     const V = () => {
       de();
-      const yt = h.scrollLeft, Tt = yt - Fe.current;
+      const yt = h.scrollLeft, Ct = yt - Fe.current;
       Fe.current = yt;
       const ne = Le.current > 0 ? Le.current * 0.5 : 1 / 0;
-      if (Tt !== 0 && Math.abs(Tt) < ne) {
-        const Me = Tt > 0 ? "forward" : "backward";
+      if (Ct !== 0 && Math.abs(Ct) < ne) {
+        const Me = Ct > 0 ? "forward" : "backward";
         Me !== je.current && (je.current = Me, ue(Me));
       }
       He();
@@ -22295,7 +22303,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
                           className: `${t}-lightbox-strip-track`,
                           style: { gap: W },
                           children: pn.map((h, V) => {
-                            const tt = h.image.objectFit ?? "contain", yt = V % e.length, Tt = Math.floor(V / e.length), ne = pr(W), Me = `calc(-0.5 * (${ne} + ${W}))`;
+                            const tt = h.image.objectFit ?? "contain", yt = V % e.length, Ct = Math.floor(V / e.length), ne = pr(W), Me = `calc(-0.5 * (${ne} + ${W}))`;
                             return /* @__PURE__ */ K(
                               "div",
                               {
@@ -22316,7 +22324,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
                                       }
                                     }
                                   ),
-                                  m && yt < e.length - 1 && /* @__PURE__ */ s(
+                                  m && yt < e.length - 1 && Ct === 0 && /* @__PURE__ */ s(
                                     "div",
                                     {
                                       "data-controls": "imageGap",
@@ -22334,7 +22342,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
                                   )
                                 ]
                               },
-                              `${Tt}-${h.image.url}-${yt}`
+                              `${Ct}-${h.image.url}-${yt}`
                             );
                           })
                         }
@@ -22406,7 +22414,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
                     },
                     children: [
                       e.map((tt, yt) => {
-                        const Tt = pr(at), ne = `calc(-0.5 * (${Tt} + ${at}))`;
+                        const Ct = pr(at), ne = `calc(-0.5 * (${Ct} + ${at}))`;
                         return /* @__PURE__ */ K("div", { style: { position: "relative", flex: "0 0 auto" }, children: [
                           /* @__PURE__ */ s(
                             "button",
@@ -22442,7 +22450,7 @@ const Pm = 1, Yl = 0.15, km = 3, Fm = 20, pr = (t) => `max(${t}, ${Fm}px)`, Nm =
                                 position: "absolute",
                                 top: 0,
                                 right: ne,
-                                width: Tt,
+                                width: Ct,
                                 height: "100%",
                                 pointerEvents: "auto",
                                 zIndex: 3
@@ -23853,7 +23861,12 @@ const LightboxOverlay = ({
         onClick={handleClose}
         aria-label="Close"
       >
-        <SvgImage url={closeIcon!} fill={closeIconColor} hoverFill={closeIconHoverColor} className={\`\${P}-close-icon-img\`}/>
+        <SvgImage
+          url={closeIcon!}
+          fill={closeIconColor}
+          hoverFill={isEditor && !isPreviewMode ? closeIconColor : closeIconHoverColor}
+          className={\`\${P}-close-icon-img\`}
+        />
       </button>
       {showControls ? (
         <div
@@ -24371,8 +24384,10 @@ const LightboxOverlay = ({
 
   useLayoutEffect(() => {
     measureSetWidth();
-    scrollToIndex(activeIndexRef.current, 'auto');
-  }, [imageGap]);
+    if (!isEditMode) {
+      scrollToIndex(activeIndexRef.current, 'auto');
+    }
+  }, [imageGap, isEditMode]);
 
   useLayoutEffect(() => {
     measureSetWidth();
@@ -24548,7 +24563,7 @@ const LightboxOverlay = ({
                     objectFit: itemObjectFit,
                   }}
                 />
-                {showControls && sourceIndex < images.length - 1 && (
+                {showControls && sourceIndex < images.length - 1 && copyIndex === 0 && (
                   <div
                     data-controls="imageGap"
                     data-controls-axis="x"
@@ -26064,7 +26079,7 @@ const rg = ({
     if (!I) return;
     const ct = I.closest(`.${t}-lightbox-content-area`);
     if (!ct) return I.getBoundingClientRect().width;
-    const At = Array.from(ct.children).reduce((It, Ct) => !(Ct instanceof HTMLElement) || Ct.contains(I) ? It : It + Ct.getBoundingClientRect().width, 0);
+    const At = Array.from(ct.children).reduce((It, Tt) => !(Tt instanceof HTMLElement) || Tt.contains(I) ? It : It + Tt.getBoundingClientRect().width, 0);
     return ct.getBoundingClientRect().width - At;
   }, [t]), Zt = _t(() => {
     kt.current && (clearTimeout(kt.current), kt.current = null);
@@ -26095,7 +26110,7 @@ const rg = ({
     if (ct === H) return;
     const At = rt[H], It = rt[ct];
     qt.current += 1;
-    const Ct = qt.current, pe = S === "fade" && ia(At == null ? void 0 : At.entry) !== ia(It == null ? void 0 : It.entry), Re = (sn = Le.current) == null ? void 0 : sn.getBoundingClientRect().height, se = pe ? (() => {
+    const Tt = qt.current, pe = S === "fade" && ia(At == null ? void 0 : At.entry) !== ia(It == null ? void 0 : It.entry), Re = (sn = Le.current) == null ? void 0 : sn.getBoundingClientRect().height, se = pe ? (() => {
       var rl;
       const si = ce();
       is(() => {
@@ -26107,7 +26122,7 @@ const rg = ({
       Re ?? 0,
       (se == null ? void 0 : se.measuredIncomingTitlesHeight) ?? 0
     ) || void 0;
-    ft(Ct), _(H), Y(!0), Q(ct), le(ct), zt.current = ct, pe ? (Zt(), Ue && Ut(Ue), se != null && se.incomingTitlesMeasureWidth && Et(se.incomingTitlesMeasureWidth), Dt((At == null ? void 0 : At.entryIndex) ?? null), D(!0), Xt.current = It.entryIndex, kt.current = setTimeout(() => {
+    ft(Tt), _(H), Y(!0), Q(ct), le(ct), zt.current = ct, pe ? (Zt(), Ue && Ut(Ue), se != null && se.incomingTitlesMeasureWidth && Et(se.incomingTitlesMeasureWidth), Dt((At == null ? void 0 : At.entryIndex) ?? null), D(!0), Xt.current = It.entryIndex, kt.current = setTimeout(() => {
       Dt(null), D(!1), Ut(void 0), Et(void 0), gt(null), kt.current = null;
     }, Lr)) : (Zt(), Dt(null), D(!1), Ut(void 0), Et(void 0), gt(null), Xt.current = It.entryIndex);
   }, [H, Zt, ce, rt, le, S]), Ye = _t(() => {
@@ -26127,7 +26142,7 @@ const rg = ({
     }
     const ct = Rt.current;
     if (!ct || ct.pointerId !== I.pointerId || (Ye(), I.target.closest("[data-controls]"))) return;
-    const It = I.clientX - ct.startX, Ct = I.clientY - ct.startY, pe = Math.abs(It), Re = Math.abs(Ct);
+    const It = I.clientX - ct.startX, Tt = I.clientY - ct.startY, pe = Math.abs(It), Re = Math.abs(Tt);
     if (pe >= Um && pe > Re) {
       be(It > 0 ? H - 1 : H + 1);
       return;
@@ -26175,8 +26190,8 @@ const rg = ({
           (se) => !se.closest('[aria-hidden="true"]')
         );
         if (It.length === 0) return;
-        const Ct = It[0], pe = It[It.length - 1], Re = document.activeElement;
-        ct.shiftKey ? (Re === Ct || !Ce.current.contains(Re)) && (ct.preventDefault(), pe.focus()) : (Re === pe || !Ce.current.contains(Re)) && (ct.preventDefault(), Ct.focus());
+        const Tt = It[0], pe = It[It.length - 1], Re = document.activeElement;
+        ct.shiftKey ? (Re === Tt || !Ce.current.contains(Re)) && (ct.preventDefault(), pe.focus()) : (Re === pe || !Ce.current.contains(Re)) && (ct.preventDefault(), Tt.focus());
       }
     };
     return window.addEventListener("keydown", I), () => window.removeEventListener("keydown", I);
@@ -26227,7 +26242,7 @@ const rg = ({
     () => mo(Kt, Qt),
     [Kt, Qt]
   ), Ee = _t((I, ct) => {
-    const At = xt.findIndex((Ct) => Ct.prefix === I.prefix);
+    const At = xt.findIndex((Tt) => Tt.prefix === I.prefix);
     if (!ot || ct === "single-row")
       return {
         effectiveWidth: Se[At] ?? 0,
@@ -26235,14 +26250,14 @@ const rg = ({
         maxWidth: Qn(At, xe)
       };
     if (ct === "two-row-top") {
-      const Ct = de.findIndex((pe) => pe.prefix === I.prefix);
+      const Tt = de.findIndex((pe) => pe.prefix === I.prefix);
       return {
-        effectiveWidth: Te.effective[Ct] ?? 0,
-        resolvedWidth: Te.resolved[Ct] ?? 0,
-        maxWidth: Qn(Ct, Te.resolved)
+        effectiveWidth: Te.effective[Tt] ?? 0,
+        resolvedWidth: Te.resolved[Tt] ?? 0,
+        maxWidth: Qn(Tt, Te.resolved)
       };
     }
-    const It = Kt.findIndex((Ct) => Ct.prefix === I.prefix);
+    const It = Kt.findIndex((Tt) => Tt.prefix === I.prefix);
     return {
       effectiveWidth: ue.effective[It] ?? 0,
       resolvedWidth: ue.resolved[It] ?? 0,
@@ -26297,15 +26312,15 @@ const rg = ({
         maxWidth: Qn(Ue, sn)
       };
     }
-    const It = I.filter((se) => se.prefix === "title2" || se.prefix === "title3"), Ct = It.findIndex((se) => se.prefix === ct.prefix), { resolved: pe, effective: Re } = mo(It, Qt);
+    const It = I.filter((se) => se.prefix === "title2" || se.prefix === "title3"), Tt = It.findIndex((se) => se.prefix === ct.prefix), { resolved: pe, effective: Re } = mo(It, Qt);
     return {
-      effectiveWidth: Re[Ct] ?? 0,
-      resolvedWidth: pe[Ct] ?? 0,
-      maxWidth: Qn(Ct, pe)
+      effectiveWidth: Re[Tt] ?? 0,
+      resolvedWidth: pe[Tt] ?? 0,
+      maxWidth: Qn(Tt, pe)
     };
   }, [Qt, ot]), Ze = (I, ct, At) => {
     const It = I.marginLeftKey ? oe[I.marginLeftKey] ?? 0 : 0, {
-      effectiveWidth: Ct,
+      effectiveWidth: Tt,
       resolvedWidth: pe,
       maxWidth: Re
     } = At ?? Ee(I, ct), se = Math.max(It, uo), Ue = vt && ct === "two-row-top";
@@ -26315,7 +26330,7 @@ const rg = ({
         className: `${t}-title-cell`,
         "data-title": I.prefix,
         style: {
-          width: W(Ct),
+          width: W(Tt),
           ...It > 0 ? { marginLeft: W(It) } : {}
         },
         children: [
@@ -26420,7 +26435,15 @@ const rg = ({
             className: `${t}-close-icon-inner`,
             onClick: Ge,
             "aria-label": "Close",
-            children: /* @__PURE__ */ s(hn, { url: $ ?? "", fill: A, hoverFill: z, className: `${t}-close-icon-img` })
+            children: /* @__PURE__ */ s(
+              hn,
+              {
+                url: $ ?? "",
+                fill: A,
+                hoverFill: i && !r ? A : z,
+                className: `${t}-close-icon-img`
+              }
+            )
           }
         ),
         vt ? /* @__PURE__ */ s(
@@ -26468,8 +26491,8 @@ const rg = ({
       ) : null
     ] });
   }, Wi = (I, ct = !1) => {
-    const At = I ? po(t, I, F, dt, m) : [], It = At.filter((Re) => Re.prefix === "title2" || Re.prefix === "title3"), Ct = vt && ct;
-    return It.length > 0 || Ct || (R ?? 0) > 0 ? /* @__PURE__ */ K("div", { className: `${t}-titles-row-bottom-wrap`, children: [
+    const At = I ? po(t, I, F, dt, m) : [], It = At.filter((Re) => Re.prefix === "title2" || Re.prefix === "title3"), Tt = vt && ct;
+    return It.length > 0 || Tt || (R ?? 0) > 0 ? /* @__PURE__ */ K("div", { className: `${t}-titles-row-bottom-wrap`, children: [
       It.length > 0 ? /* @__PURE__ */ K("div", { className: `${t}-titles-row-bottom`, children: [
         It.map((Re) => Ze(
           Re,
@@ -26481,18 +26504,18 @@ const rg = ({
           yt()
         ] }) : null
       ] }) : null,
-      (R ?? 0) > 0 || Ct ? /* @__PURE__ */ s(
+      (R ?? 0) > 0 || Tt ? /* @__PURE__ */ s(
         "div",
         {
-          "data-controls": Ct ? "titleRowMarginBottom" : void 0,
-          "data-controls-axis": Ct ? "y" : void 0,
-          "data-controls-reverse": Ct ? "" : void 0,
-          className: Ct ? `${t}-control` : void 0,
+          "data-controls": Tt ? "titleRowMarginBottom" : void 0,
+          "data-controls-axis": Tt ? "y" : void 0,
+          "data-controls-reverse": Tt ? "" : void 0,
+          className: Tt ? `${t}-control` : void 0,
           style: {
             height: Gt,
             width: "100%",
             flexShrink: 0,
-            pointerEvents: Ct ? "auto" : "none"
+            pointerEvents: Tt ? "auto" : "none"
           }
         }
       ) : null
@@ -26505,7 +26528,7 @@ const rg = ({
     Wi(I, ct)
   ] }), kn = (I) => ot ? /* @__PURE__ */ s("div", { className: `${t}-titles-row-two-row`, style: { width: "100%" }, children: ai(I) }) : I ? /* @__PURE__ */ s("div", { className: `${t}-titles-row`, style: { width: "100%" }, children: li(I) }) : null, h = () => {
     const I = ot ? -1 : xt.findIndex((It) => It.prefix === "title1"), ct = !ot && (vt || (E ?? 0) > 0) ? (() => {
-      const Ct = Math.max(E ?? 0, uo), pe = I >= 0 ? xe[I] : w;
+      const Tt = Math.max(E ?? 0, uo), pe = I >= 0 ? xe[I] : w;
       return /* @__PURE__ */ s(
         "div",
         {
@@ -26517,20 +26540,20 @@ const rg = ({
             position: "absolute",
             top: 0,
             left: 0,
-            width: W(Ct),
+            width: W(Tt),
             height: "100%",
             pointerEvents: "auto"
           }
         },
         "title1MarginLeft"
       );
-    })() : null, At = xt.flatMap((It, Ct) => {
+    })() : null, At = xt.flatMap((It, Tt) => {
       if (!It.marginLeftKey) return [];
       const pe = oe[It.marginLeftKey] ?? 0, Re = ig(
         xt,
         xe,
         oe,
-        Ct
+        Tt
       ) + Ie(), se = Math.max(pe, uo);
       return /* @__PURE__ */ s(
         "div",
@@ -26538,7 +26561,7 @@ const rg = ({
           "data-controls": It.marginLeftKey,
           "data-controls-axis": "x",
           "data-controls-min": "0",
-          "data-controls-max-fraction": String(xe[Ct]),
+          "data-controls-max-fraction": String(xe[Tt]),
           style: {
             position: "absolute",
             top: 0,
@@ -26553,7 +26576,7 @@ const rg = ({
     });
     return ct ? [ct, ...At] : At;
   }, V = () => xt.map((I, ct) => {
-    const At = Qn(ct, xe), Ct = He(ct) - ui / 2;
+    const At = Qn(ct, xe), Tt = He(ct) - ui / 2;
     return /* @__PURE__ */ s("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: /* @__PURE__ */ s(
       "div",
       {
@@ -26565,7 +26588,7 @@ const rg = ({
         style: {
           position: "absolute",
           top: 0,
-          left: W(Ct),
+          left: W(Tt),
           width: W(ui),
           height: "100%",
           pointerEvents: "auto"
@@ -26574,7 +26597,7 @@ const rg = ({
     ) }, `${I.widthKey}-junction`);
   }), tt = () => Kt.flatMap((I, ct) => {
     if (!I.marginLeftKey) return [];
-    const At = oe[I.marginLeftKey] ?? 0, It = Oe(ct), Ct = Math.max(At, uo), { resolvedWidth: pe } = Ee(I, "two-row-bottom");
+    const At = oe[I.marginLeftKey] ?? 0, It = Oe(ct), Tt = Math.max(At, uo), { resolvedWidth: pe } = Ee(I, "two-row-bottom");
     return /* @__PURE__ */ s(
       "div",
       {
@@ -26586,7 +26609,7 @@ const rg = ({
           position: "absolute",
           top: 0,
           left: W(It),
-          width: W(Ct),
+          width: W(Tt),
           height: "100%",
           pointerEvents: "auto"
         }
@@ -26594,7 +26617,7 @@ const rg = ({
       I.marginLeftKey
     );
   }), yt = () => Kt.map((I, ct) => {
-    const { maxWidth: At } = Ee(I, "two-row-bottom"), Ct = ae(ct) - ui / 2;
+    const { maxWidth: At } = Ee(I, "two-row-bottom"), Tt = ae(ct) - ui / 2;
     return /* @__PURE__ */ s("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: /* @__PURE__ */ s(
       "div",
       {
@@ -26606,14 +26629,14 @@ const rg = ({
         style: {
           position: "absolute",
           top: 0,
-          left: W(Ct),
+          left: W(Tt),
           width: W(ui),
           height: "100%",
           pointerEvents: "auto"
         }
       }
     ) }, `${I.widthKey}-junction`);
-  }), Tt = () => !vt || ot ? null : /* @__PURE__ */ K(re, { children: [
+  }), Ct = () => !vt || ot ? null : /* @__PURE__ */ K(re, { children: [
     h(),
     V()
   ] }), ne = (I) => {
@@ -26633,21 +26656,21 @@ const rg = ({
     if (I.length === 0) return null;
     const ct = I.length > 1, At = gr(q), It = `calc(-0.5 * (${At} + ${q}))`;
     if (I.length === 1) {
-      const Ct = I[0];
-      return /* @__PURE__ */ s("div", { ...ne(Ct), children: /* @__PURE__ */ s("img", { ...Me(Ct), src: Ct.url, alt: Ct.name ?? "", draggable: !1 }) });
+      const Tt = I[0];
+      return /* @__PURE__ */ s("div", { ...ne(Tt), children: /* @__PURE__ */ s("img", { ...Me(Tt), src: Tt.url, alt: Tt.name ?? "", draggable: !1 }) });
     }
     return /* @__PURE__ */ s(
       "div",
       {
         className: `${t}-slide-inner`,
         style: ct ? { gap: q } : void 0,
-        children: I.map((Ct, pe) => /* @__PURE__ */ K("div", { ...ne(Ct), children: [
+        children: I.map((Tt, pe) => /* @__PURE__ */ K("div", { ...ne(Tt), children: [
           /* @__PURE__ */ s(
             "img",
             {
-              ...Me(Ct),
-              src: Ct.url,
-              alt: Ct.name ?? "",
+              ...Me(Tt),
+              src: Tt.url,
+              alt: Tt.name ?? "",
               draggable: !1
             }
           ),
@@ -26667,7 +26690,7 @@ const rg = ({
               }
             }
           )
-        ] }, `${Ct.url}-${pe}`))
+        ] }, `${Tt.url}-${pe}`))
       }
     );
   }, Fn = !!(J != null && J.title2 || J != null && J.title3 || Yt != null && Yt.title2 || Yt != null && Yt.title3 || (R ?? 0) > 0 || vt), Nn = () => /* @__PURE__ */ K(
@@ -26743,7 +26766,7 @@ const rg = ({
                     children: Wi(J, !0)
                   }
                 ),
-                Tt()
+                Ct()
               ] }) : null
             ]
           }
@@ -26773,7 +26796,7 @@ const rg = ({
               children: ai(J, !0)
             }
           ),
-          Tt()
+          Ct()
         ]
       }
     );
@@ -26898,13 +26921,13 @@ const rg = ({
                         children: [
                           Yt && St ? /* @__PURE__ */ s("div", { className: `${Wt} ${t}-titles-fade-out`, children: kn(Yt) }) : null,
                           /* @__PURE__ */ s("div", { className: `${t}-titles-layer-in${St ? ` ${t}-titles-layer-in-fading ${t}-titles-fade-in` : ""}`, children: kn(J) }),
-                          Tt()
+                          Ct()
                         ]
                       }
                     )
                   ] }) : /* @__PURE__ */ K("div", { style: { position: "relative", width: "100%" }, children: [
                     kn(J),
-                    Tt()
+                    Ct()
                   ] }) }),
                   !ot && /* @__PURE__ */ K("div", { className: `${t}-lightbox-persistent-controls`, style: et, children: [
                     Bt && qn(),
@@ -28641,7 +28664,12 @@ const LightboxOverlay = ({
         onClick={handleClose}
         aria-label="Close"
       >
-        <SvgImage url={closeIcon ?? ''} fill={closeIconColor} hoverFill={closeIconHoverColor} className={\`\${P}-close-icon-img\`} />
+        <SvgImage
+          url={closeIcon ?? ''}
+          fill={closeIconColor}
+          hoverFill={isEditor && !isPreviewMode ? closeIconColor : closeIconHoverColor}
+          className={\`\${P}-close-icon-img\`}
+        />
       </button>
       {showControls ? (
         <div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/components",
-  "version": "1.0.17-alpha.6",
+  "version": "1.0.17-alpha.7",
   "description": "Custom components for control editor and public websites.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",