@cntrl-site/components 1.0.12-alpha.2 → 1.0.12-alpha.3

package/dist/index.js

@@ -4662,2545 +4662,2545 @@ a.${e}-list-item {
   overflow-wrap: anywhere;
   word-break: break-word;
 }
-`}const Pt=["AColumn","BColumnWidth","CColumnWidth","DColumnWidth","EColumnWidth"],eo=["AColumn","BColumn","CColumn","DColumn","EColumn"],vt="cutLabel",Pn=[...eo,vt],to=["A","B","C","D","E"];function Ai(e){return`${e}ColumnVerticalAlign`}const Xc=["Top","Center","Bottom"];function Zc(e){const t=String(e??"Top").trim();return t.toLowerCase().startsWith("baseline")?!1:t==="Top"||t==="Center"||t==="Bottom"}function Jc(e){const t=String(e??"").trim();if(!t.toLowerCase().startsWith("baseline"))return null;const n=t.slice(-1).toUpperCase();return to.includes(n)?n:null}function Ri(e,t,n){const r=Jc(e);return r?r===t?!1:Zc(n[Ai(r)]):!0}function Rr(e){const t=String(e??"Top").trim();if(t.toLowerCase().startsWith("baseline")){const n=t.slice(-1).toUpperCase();return to.includes(n)?{kind:"baseline",anchorLetter:n}:{kind:"top"}}return t==="Center"?{kind:"center"}:t==="Bottom"?{kind:"bottom"}:{kind:"top"}}function Qc(e,t,n){if(Ii(e,t,n))return Rr(e);const r=Rr(e);return r.kind==="baseline"?{kind:"top"}:r}function Ii(e,t,n){return Ri(e,n,t)?Rr(e).kind==="baseline":!1}function ed(e){if(e.type==="B")return null;const t={};let n=!1;for(const r of to){const o=Ai(r),s=e[o];Ri(s,r,e)||(t[o]="Top",n=!0)}return n?t:null}function td(e){return e==="center"?{marginTop:"auto",marginBottom:"auto"}:e==="bottom"?{marginTop:"auto"}:{}}function nd(e,t){const n=document.createElement("i");n.className=t,n.setAttribute("aria-hidden","true"),e.prepend(n);const{top:r}=e.getBoundingClientRect(),{bottom:o}=n.getBoundingClientRect(),s=o-r;return n.remove(),s}function br(e,t,n,r){const o=e.titleEl;if(!o)return 0;const s=o.closest(`.${n}`);if(!s)return 0;const i=nd(o,r);if(e.kind==="baseline")return o.getBoundingClientRect().top-t+i;const a=s.getBoundingClientRect(),c=o.getBoundingClientRect().height;let u=0;return e.kind==="center"?u=(a.height-c)/2:e.kind==="bottom"&&(u=a.height-c),a.top-t+u+i}function rd(e,t,n){const r=e.getBoundingClientRect().height;return r<=0?0:(t.forEach(o=>{const s=o.querySelector(`.${n}`);s&&(s.style.minHeight=`${r}px`,s.style.height=`${r}px`)}),e.offsetHeight,r)}function od(e,t){return!e||!t?(e&&(e.style.transform=""),0):(e.style.transform=`translateY(${t}px)`,t)}const id={AColumn:"AColumn",BColumnWidth:"BColumn",CColumnWidth:"CColumn",DColumnWidth:"DColumn",EColumnWidth:"EColumn"},ad=["textFontFamily","textFontSettings","textFontSize","textLineHeight","textLetterSpacing","textWordSpacing","textTextAppearance"];function we(e,t){return`${e}${t.replace(/^text/,"Text")}`}function Zn(e,t){const n=r=>{const o=we(t,r),s=e[o];return s!==void 0?s:e[r]};return{textFontFamily:n("textFontFamily")??"Arial",textFontSettings:n("textFontSettings")??{fontWeight:400,fontStyle:"normal"},textFontSize:n("textFontSize"),textLineHeight:n("textLineHeight"),textLetterSpacing:n("textLetterSpacing")??0,textWordSpacing:n("textWordSpacing")??0,textTextAppearance:n("textTextAppearance"),textColor:e.textColor}}function Ho(e,t){var r,o;const n={fontSettings:{fontFamily:e.textFontFamily,fontWeight:((r=e.textFontSettings)==null?void 0:r.fontWeight)??400,fontStyle:((o=e.textFontSettings)==null?void 0:o.fontStyle)??"normal"},fontSize:e.textFontSize??.01,lineHeight:e.textLineHeight,letterSpacing:e.textLetterSpacing,wordSpacing:e.textWordSpacing,textAppearance:e.textTextAppearance,color:e.textColor??"#767676"};return yt(Je(n,t))}function Oo(e,t,n,r){const o=Zn(e,t),s=o.textFontSize??.01,i=o.textLineHeight;return i!==void 0&&i<s?`${n} ${r}`:n}function Bo(e,t,n,r){const o=Zn(e,t),s=o.textFontSize??.01,i=o.textLineHeight;return i===void 0||i>=s?{}:{[`--${n}-title-leading-gap`]:T.scalingValue((s-i)/2,r)}}function sd(e,t){const n={};let r=!1;for(const o of ad)if(e[o]!==t[o]&&e[o]!==void 0){r=!0;for(const s of Pn)Object.assign(n,{[we(s,o)]:e[o]})}return r?n:null}const nt=["AColumnWidth","BColumnWidth","CColumnWidth","DColumnWidth","EColumnWidth"],Zt=["AColumnPaddingLeft","BColumnPaddingLeft","CColumnPaddingLeft","DColumnPaddingLeft","EColumnPaddingLeft"],Jt=["AColumnPaddingRight","BColumnPaddingRight","CColumnPaddingRight","DColumnPaddingRight","EColumnPaddingRight"],Qt=["AColumnPaddingBottom","BColumnPaddingBottom","CColumnPaddingBottom","DColumnPaddingBottom","EColumnPaddingBottom"],ld={textColor:"text-color",backgroundColor:"background-color",dividerColor:"divider-color",textHoverColor:"text-hover-color",backgroundHoverColor:"background-hover-color",dividerHoverColor:"divider-hover-color"},cd=["hover","focus","filled","success","error"],Vo=.004,ln=.004,no=50,bn=1440,xn=no/bn;function Wi(e){const t=typeof e=="number"&&e>0?e:bn;return no/t}function dd(e){let t=e??null;for(;t;){const n=t.style.getPropertyValue("--cntrl-article-width").trim();if(n){const o=parseFloat(n);if(Number.isFinite(o)&&o>0)return o}const r=getComputedStyle(t).getPropertyValue("--cntrl-article-width").trim();if(r){const o=parseFloat(r);if(Number.isFinite(o)&&o>0)return o}t=t.parentElement}return bn}const Fi={AColumnWidth:.02,BColumnWidth:.02,CColumnWidth:.02,DColumnWidth:.02,EColumnWidth:.02};function jn(e){const t=typeof e.wrapperWidth=="number"?e.wrapperWidth:1;return Math.max(0,t)}function ud(e,t=1){const n=t/e;return Object.fromEntries(nt.map(r=>[r,n]))}function pd(){return Object.fromEntries([...Zt.map(e=>[e,0]),...Jt.map(e=>[e,0])])}function md(){return Object.fromEntries(Qt.map(e=>[e,0]))}function Nn(e){return Object.fromEntries(nt.map(t=>[t,typeof e[t]=="number"?e[t]:Fi[t]]))}function ki(e,t,n){const r=e-xn,o=t+n;if(o<=0||o<=r)return{paddingLeft:t,paddingRight:n};if(r<=0)return{paddingLeft:0,paddingRight:0};const s=r/o;return{paddingLeft:t*s,paddingRight:n*s}}function Kn(e,t,n){const r=ro(e,t,n);if(e<=0)return[];const o=r.slice(0,e-1).reduce((s,i)=>s+i,0);return[...r.slice(0,e-1),Math.max(0,t-o)]}function gd(e,t,n){const r={};for(let o=0;o<e;o+=1){const s=Zt[o],i=Jt[o],a=typeof n[s]=="number"?n[s]:0,c=typeof n[i]=="number"?n[i]:0,u=ki(t[o]??0,a,c);u.paddingLeft!==a&&(r[s]=u.paddingLeft),u.paddingRight!==c&&(r[i]=u.paddingRight)}return r}function ro(e,t,n){if(e<=0)return[];const r=nt.slice(0,e).map(u=>n[u]);if(e===1)return r;const o=r.slice(0,e-1),i=o.reduce((u,d)=>u+d,0)+xn;if(t>=i)return r;const a=[...o];let c=i-t;for(let u=a.length-1;u>=0&&c>0;u-=1){const d=a[u]-xn;if(d<=0)continue;const $=Math.min(c,d);a[u]-=$,c-=$}return[...a,r[e-1]]}function hd(e,t,n){if(e<=1)return{};const r=ro(e,t,n),o={};for(let s=0;s<e-1;s+=1){const i=nt[s];r[s]!==n[i]&&(o[i]=r[s])}return o}function Do(e){return Array.isArray(e.columnsOrder)&&e.columnsOrder.length>0?e.columnsOrder:[...Pt]}function fd(e,t){return e.length!==t.length?!1:e.every((n,r)=>n===t[r])}function yd(e,t,n,r){const o=Math.min(r,e.length,nt.length),s={};for(let i=0;i<o;i+=1){const a=e[i],c=t.indexOf(a);if(c===-1)continue;const u=nt[c],d=Zt[c],$=Jt[c],h=Qt[c],f=nt[i],m=Zt[i],g=Jt[i],C=Qt[i],y=n[u],x=n[d],P=n[$],L=n[h];typeof y=="number"&&(s[f]=y),typeof x=="number"&&(s[m]=x),typeof P=="number"&&(s[g]=P),typeof L=="number"&&(s[C]=L)}return s}function vd(e,t,n){const r=sd(e,t);r&&(e={...e,...r});const o=ed(e);o&&(e={...e,...o});const s=Wi(n==null?void 0:n.designWidth),i=e.columns,a=t.columns,c=jn(e),u=jn(t),d=e.type==="B"||e.type===void 0&&t.type==="B",$=typeof i=="number"?i:typeof a=="number"?a:Pt.length,h=L=>{if(d)return L;const _=Nn({...t,...L}),E=jn(L),v=Kn($,E,_),S=gd($,v,{...t,...L});return Object.keys(S).length===0?L:{...L,...S}};if(typeof i=="number"&&i!==a){const L={...e,...ud(i,c),...pd()};if(d)for(const _ of Qt)typeof t[_]=="number"&&(L[_]=t[_]);else Object.assign(L,md());return L}const f=Do(e),m=Do(t);if(!fd(f,m))return h({...e,...yd(f,m,t,$)});if(c<u&&typeof $=="number"&&!d){const L=Nn({...t,...e});return h({...e,...hd($,c,L)})}if(d){const L=typeof e.textPaddingLR=="number"?e.textPaddingLR:0,_=Math.max(0,(c-s)/2);return L>_?{...e,textPaddingLR:_}:e}const g=Nn({...t,...e}),C=Kn($,u,Nn(t)),x=Kn($,c,g).some((L,_)=>L<(C[_]??L)),P=nt.some(L=>{const _=e[L],E=t[L];return typeof _=="number"&&typeof E=="number"&&_!==E});return x||P?h(e):e}function bd(e,t,n,r){const o=t.slice(0,e).reduce((i,a)=>i+a,0),s=n.slice(e+1,t.length-1).reduce((i,a)=>i+a,0);return Math.max(xn,r-o-s-xn)}function xd(e,t){return Math.random()*(t-e)+e}function Cd(e){return Object.fromEntries(nt.map(t=>[t,typeof e[t]=="number"?e[t]:Fi[t]]))}function xr(e,t,n=0){return Object.fromEntries(t.map(r=>[r,typeof e[r]=="number"?e[r]:n]))}function Sd(e,t,n,r,o,s){return e.slice(0,t).map((i,a)=>{const c=Zt[a],u=Jt[a],d=Qt[a];return{key:i,textPrefix:id[i],widthKey:nt[a],width:n[nt[a]],paddingLeftKey:c,paddingRightKey:u,paddingBottomKey:d,paddingLeft:r[c],paddingRight:o[u],paddingBottom:s[d]}})}function wd({settings:e,content:t,isEditor:n,isPreviewMode:r,activeEvent:o,layoutId:s,onUpdateSettings:i}){const{prefix:a}=T.useScopedStyles(),c=!!(n&&r),{columns:u,type:d,wrapperWidth:$,entriesCount:h,cellMinHeight:f,dividerWidth:m,showVisibility:g,cut:C,showCut:y,cutCellMinHeight:x,cutLabel:P,imageSize:L,imageOnHover:_,entryHoverEffect:E,rowPaddingTop:v,rowPaddingBottom:S,rowPaddingTopB:F,columnsOrder:V,textPaddingLR:A,textColor:O,textFontFamily:D,textFontSettings:j,textFontSize:U,textLineHeight:w,textLetterSpacing:N,textWordSpacing:k,textTextAppearance:M,backgroundColor:R,dividerColor:B,textHoverColor:te,backgroundHoverColor:ue,dividerHoverColor:ie}=e,[me,H]=p.useState(void 0),[Q,G]=p.useState(null),Y=_==="On",oe=(C??0)>0,W=d==="B",ne=p.useRef(null),[I,b]=p.useState(bn),z=Wi(I),q=Math.max(0,(($??0)-z)/2),J=Math.min(A??0,q),se=Math.max(J,ln),le=(($??0)+z)/2;p.useLayoutEffect(()=>{if(!n){b(bn);return}const ge=()=>{b(dd(ne.current))};ge();const xe=ne.current;if(!xe)return;const Se=new ResizeObserver(ge);Se.observe(xe);let Re=xe;for(;Re&&!Re.style.getPropertyValue("--cntrl-article-width");)Re=Re.parentElement;return Re&&Se.observe(Re),()=>Se.disconnect()},[n,s]),p.useEffect(()=>{H(void 0)},[C,y,t,h]);const ce=T.buildColorVars(a,{textColor:O,backgroundColor:R,dividerColor:B,textHoverColor:te,backgroundHoverColor:ue,dividerHoverColor:ie},ld,cd),he=o&&o!=="default"?`${a}-state-${o}`:"",ee=`${E==="Default"?`${a}-entry-hover-default`:E==="Blinds"?`${a}-entry-hover-blinds`:""} ${he}`.trim(),Z=(g==null?void 0:g[0])??!1,de=(g==null?void 0:g[1])??!1,re=p.useRef(e),pe=p.useRef(s);p.useEffect(()=>{if(!i||!n){re.current=e,pe.current=s;return}if(pe.current!==s){re.current=e,pe.current=s;return}const ge=re.current,xe=vd(e,ge,{designWidth:I});re.current=e,xe!==e&&i(xe)},[e,i,n,s,I]);const ve=p.useMemo(()=>Cd(e),[e.AColumnWidth,e.BColumnWidth,e.CColumnWidth,e.DColumnWidth,e.EColumnWidth]),Pe=p.useMemo(()=>xr(e,Zt),[e.AColumnPaddingLeft,e.BColumnPaddingLeft,e.CColumnPaddingLeft,e.DColumnPaddingLeft,e.EColumnPaddingLeft]),Ke=p.useMemo(()=>xr(e,Jt),[e.AColumnPaddingRight,e.BColumnPaddingRight,e.CColumnPaddingRight,e.DColumnPaddingRight,e.EColumnPaddingRight]),Ge=p.useMemo(()=>xr(e,Qt),[e.AColumnPaddingBottom,e.BColumnPaddingBottom,e.CColumnPaddingBottom,e.DColumnPaddingBottom,e.EColumnPaddingBottom]),$e=p.useMemo(()=>Array.isArray(V)&&V.length>0?V:[...Pt],[V]),Ae=p.useMemo(()=>Sd($e,u,ve,Pe,Ke,Ge),[$e,u,ve,Pe,Ke,Ge]),Me=jn(e),Ie=p.useMemo(()=>nt.slice(0,u).map(ge=>ve[ge]),[u,ve]),Ve=p.useMemo(()=>ro(u,Me,ve),[u,Me,ve]),ye=p.useMemo(()=>Kn(u,Me,ve),[u,Me,ve]),ke=p.useMemo(()=>Ae.map((ge,xe)=>ki(ye[xe]??0,ge.paddingLeft,ge.paddingRight)),[Ae,ye]),He=p.useMemo(()=>{const ge=h===0?1/0:h;return(t??[]).slice(0,ge).map((Se,Re)=>({id:Re,cells:Object.fromEntries(Pt.map(Xe=>[Xe,Se[Xe]??""])),image:Se.image,link:Se.link}))},[t,h]),Oe=oe?me??C:He.length,De=p.useMemo(()=>oe?He.slice(0,Oe):He,[He,oe,Oe]),Qe=oe&&Oe<He.length,Ct=De.length>1||Qe,lt=[Z?`${a}-divider-top`:"",de||Ct?`${a}-divider-bottom`:""].filter(Boolean).join(" "),dr=()=>{const ge=me??C;if(!y){H(He.length);return}H(Math.min(ge+y,He.length))},Ee=ge=>T.scalingValue(ge,n??!1),An=W?F??0:v??0,rn=S??0,on=f??0,ur=W?"rowPaddingTopB":"rowPaddingTop",be=Ae[0],Ye=Ae[Ae.length-1],ze=ke[0],Ne=ke[ke.length-1],St=be&&ze?Math.max(ze.paddingLeft,ln):0,oo=Ye&&Ne?Math.max(Ne.paddingRight,ln):0,Ni=Me,io=ge=>{const xe=ne.current;if(!xe)return{x:0,y:0};const Se=xe.getBoundingClientRect();return{x:ge.clientX-Se.left+No,y:ge.clientY-Se.top+No}},Hi=(ge,xe)=>{if(!Y)return;const Se=ge.image;if(!(Se!=null&&Se.url)){G(null);return}const{x:Re,y:Xe}=io(xe),ct=(L==null?void 0:L.min)??80,Te=(L==null?void 0:L.max)??320,Be=(Q==null?void 0:Q.rowId)===ge.id?Q.widthPx:xd(ct,Te);G({rowId:ge.id,url:Se.url,objectFit:Se.objectFit??"cover",widthPx:Be,x:Re,y:Xe})},Oi=ge=>{if(!Y||!Q)return;const{x:xe,y:Se}=io(ge);G(Re=>!Re||Re.x===xe&&Re.y===Se?Re:{...Re,x:xe,y:Se})},Bi=()=>{G(null)},ao=p.useMemo(()=>!W&&eo.some(ge=>{const xe=ge.charAt(0),Se=e[`${ge}VerticalAlign`];return Ii(Se,e,xe)}),[W,e,e.AColumnVerticalAlign,e.BColumnVerticalAlign,e.CColumnVerticalAlign,e.DColumnVerticalAlign,e.EColumnVerticalAlign]);return p.useLayoutEffect(()=>{var ct;const ge=ne.current;if(!ge)return;const xe=()=>{ge.querySelectorAll("[data-list-col]").forEach(Te=>{Te.style.transform="";const Be=Te.querySelector(`.${a}-list-col`);Be&&(Be.style.minHeight="",Be.style.height="");const ot=Te.querySelector(`.${a}-list-col-title`);ot&&(ot.style.transform="")})};if(W||!ao){xe();return}const Se=()=>{ge.querySelectorAll("[data-list-row]").forEach(Te=>{const Be=Array.from(Te.querySelectorAll("[data-list-col]"));Be.forEach(Le=>{Le.style.transform="";const Ze=Le.querySelector(`.${a}-list-col`);Ze&&(Ze.style.minHeight="",Ze.style.height="");const Ue=Le.querySelector(`.${a}-list-col-title`);Ue&&(Ue.style.transform="")}),rd(Te,Be,`${a}-list-col`),Te.offsetHeight;const ot=Te.getBoundingClientRect().top,wt=`${a}-baseline-probe`,Wt=new Map,an=Be.map(Le=>{const Ze=Le.querySelector(`.${a}-list-col-title`),Ue={el:Le,titleEl:Ze,letter:Le.getAttribute("data-col-letter")??"",kind:Le.getAttribute("data-valign")??"top",anchor:Le.getAttribute("data-valign-anchor")};return Wt.set(Ue.letter,Ue),Ue}),sn=new Map,Rn=(Le,Ze)=>{const Ue=sn.get(Le.letter);if(Ue!==void 0)return Ue;const so=Le.anchor?Wt.get(Le.anchor):void 0;if(Le.kind!=="baseline"||!so||Ze.has(Le.letter)){const co=br(Le,ot,`${a}-list-col`,wt);return sn.set(Le.letter,co),co}Ze.add(Le.letter);const Vi=Rn(so,Ze);Ze.delete(Le.letter);const Di=br(Le,ot,`${a}-list-col`,wt),zi=Vi-Di;od(Le.titleEl,zi);const lo=br(Le,ot,`${a}-list-col`,wt);return sn.set(Le.letter,lo),lo};an.forEach(Le=>Rn(Le,new Set))})};Se();const Re=new ResizeObserver(()=>Se());Re.observe(ge);let Xe=!1;return typeof document<"u"&&((ct=document.fonts)!=null&&ct.ready)&&document.fonts.ready.then(()=>{Xe||Se()}),()=>{Xe=!0,Re.disconnect(),xe()}},[ao,W,e,t,I,De,ye]),l.jsxs(l.Fragment,{children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:Yc(a)}}),l.jsx("div",{style:ce,children:l.jsxs("div",{ref:ne,className:`${a}-wrapper ${ee}${lt?` ${lt}`:""}${W?` ${a}-type-b`:""}`.trim(),style:{width:T.scalingValue($??0,n)},onMouseMove:Y?Oi:void 0,onMouseLeave:Y?Bi:void 0,children:[l.jsxs("div",{style:{width:"100%"},children:[De.map((ge,xe)=>{var ct;const Se=(((ct=ge.link)==null?void 0:ct.length)??0)>0,Re=Se?"a":"div",Xe=qc(xe,De.length,Z,de,Qe,m??0,n??!1);return l.jsxs(Re,{className:`${a}-list-item${Se?` ${a}-list-item-has-link`:""}`,...Se?{href:ge.link,target:"_blank"}:{},style:Xe,onMouseEnter:Y?Te=>Hi(ge,Te):void 0,children:[(An>0||c)&&l.jsx("div",{...c?{"data-controls":ur,"data-controls-axis":"y","data-controls-min":"0"}:{},className:`${a}-row-padding-handle`,style:{height:Ee(An)}}),l.jsx("div",{className:`${a}-list-cols-row${W?"":` ${a}-list-cols-row-h`}`,...W?{}:{"data-list-row":""},style:W?void 0:{minHeight:Ee(on)},children:Ae.map((Te,Be)=>{const ot=Be===Ae.length-1,wt=ke[Be],Wt=Te.paddingBottom,an=Uc(ge.cells[Te.key]),sn=W&&an&&(Wt>0||c),Rn=W?{minHeight:Ee(on)}:ot?{}:{width:Ee(ye[Be])},Le=W?{paddingLeft:Ee(J),paddingRight:Ee(J)}:{paddingLeft:Ee(wt.paddingLeft),paddingRight:Ee(wt.paddingRight)},Ze=Te.textPrefix.charAt(0),Ue=W?{kind:"top"}:Qc(e[`${Te.textPrefix}VerticalAlign`],e,Ze);return l.jsxs("div",{...W?{}:{"data-list-col":"","data-col-letter":Ze,"data-valign":Ue.kind,...Ue.kind==="baseline"?{"data-valign-anchor":Ue.anchorLetter}:{}},children:[l.jsx("div",{className:`${a}-list-col${ot?` ${a}-list-col-last`:""}`,style:{...Le,...Rn},"data-test":Te.width,children:l.jsx("span",{className:Oo(e,Te.textPrefix,`${a}-list-col-title`,`${a}-text-tight-leading`),style:{...Ho(Zn(e,Te.textPrefix),n),...Bo(e,Te.textPrefix,a,n),...W?{}:td(Ue.kind)},children:ge.cells[Te.key]??null})}),sn&&l.jsx("div",{...c?{"data-controls":Te.paddingBottomKey,"data-controls-axis":"y","data-controls-min":"0"}:{},className:`${a}-row-padding-handle`,style:{height:Ee(Wt)}})]},Te.key)})}),!W&&(rn>0||c)&&l.jsx("div",{...c?{"data-controls":"rowPaddingBottom","data-controls-axis":"y","data-controls-min":"0"}:{},className:`${a}-row-padding-handle`,style:{height:Ee(rn)}})]},ge.id)}),Qe&&l.jsx("button",{type:"button",className:`${a}-cut-item`,style:{minHeight:Ee(x??0),...Gc(de,m??0,n??!1)},onClick:dr,children:l.jsx("div",{className:`${a}-list-cols-row`,style:W?{paddingLeft:Ee(J),paddingRight:Ee(J)}:{justifyContent:"center"},children:l.jsx("span",{className:Oo(e,vt,`${a}-cut-label`,`${a}-text-tight-leading`),style:{...Ho(Zn(e,vt),n),...Bo(e,vt,a,n)},children:P})})})]}),c&&!W&&be&&Ye&&l.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[l.jsx("div",{"data-controls":be.paddingLeftKey,"data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(ye[0]-((ze==null?void 0:ze.paddingRight)??0)),"data-controls-static-handle":"",className:`${a}-padding-control-handle`,style:{position:"absolute",top:0,left:0,width:Ee(St),height:"100%",pointerEvents:"auto",zIndex:2}}),l.jsx("div",{"data-controls":Ye.paddingRightKey,"data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(ye[Ae.length-1]-((Ne==null?void 0:Ne.paddingLeft)??0)),"data-controls-static-handle":"",className:`${a}-padding-control-handle`,style:{position:"absolute",top:0,left:Ee(Ni-oo),width:Ee(oo),height:"100%",pointerEvents:"auto",zIndex:2}})]},"column-edge-padding-handles"),c&&!W&&Ae.slice(0,-1).map((ge,xe)=>{const Se=Ae[xe+1],Re=bd(xe,Ve,Ie,Me),Xe=Ve.slice(0,xe+1).reduce((Wt,an)=>Wt+an,0),ct=ke[xe],Te=ke[xe+1],Be=Math.max(ct.paddingRight,ln),ot=Math.max(Te.paddingLeft,ln),wt=Xe-Vo/2;return l.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[l.jsx("div",{"data-controls":ge.paddingRightKey,"data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(ye[xe]-ct.paddingLeft),"data-controls-static-handle":"",className:`${a}-padding-control-handle`,style:{position:"absolute",top:0,left:Ee(Xe-Be),width:Ee(Be),height:"100%",pointerEvents:"auto",zIndex:2}}),l.jsx("div",{"data-controls":ge.widthKey,"data-controls-axis":"x","data-controls-min":String(no),"data-controls-max-fraction":String(Re),"data-controls-variant":"column-width",className:`${a}-col-resize-handle`,style:{position:"absolute",top:"0px",left:Ee(wt),width:Ee(Vo),height:"calc(100%)",pointerEvents:"auto",zIndex:4}}),l.jsx("div",{"data-controls":Se.paddingLeftKey,"data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(ye[xe+1]-Te.paddingRight),"data-controls-static-handle":"",className:`${a}-padding-control-handle`,style:{position:"absolute",top:0,left:Ee(Xe),width:Ee(ot),height:"100%",pointerEvents:"auto",zIndex:2}})]},`${ge.widthKey}-junction`)}),c&&W&&l.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[l.jsx("div",{"data-controls":"textPaddingLR","data-controls-paired":"","data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(le),"data-controls-static-handle":"",className:`${a}-text-padding-lr-handle`,style:{position:"absolute",top:0,left:0,width:Ee(se),height:"100%",pointerEvents:"auto",zIndex:2}}),l.jsx("div",{"data-controls":"textPaddingLR","data-controls-paired":"","data-controls-axis":"x","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(le),"data-controls-static-handle":"",className:`${a}-text-padding-lr-handle`,style:{position:"absolute",top:0,left:Ee(Math.max(se,Me-se)),width:Ee(se),height:"100%",pointerEvents:"auto",zIndex:2}})]},"text-padding-lr-handles"),Y&&Q&&l.jsx("img",{className:`${a}-hover-image`,src:Q.url,alt:"",style:{width:zn(Q.widthPx),objectFit:Q.objectFit,left:Q.x,top:Q.y}})]})})]})}const $d=`import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\r
-import { CommonComponentProps } from '../props';\r
-import { buildColorVars, scalingValue, useScopedStyles } from '../utils/index';\r
-import { omitTextColors, TextStyles, textStylesToCss } from '../utils/textStylesToCss';\r
-\r
-type ListFontSettings = { fontWeight: number; fontStyle: string };\r
-\r
-type ListColumnPrefix = 'AColumn' | 'BColumn' | 'CColumn' | 'DColumn' | 'EColumn';\r
-\r
-type ListColumnTextStyleOverrides = {\r
-  AColumnVerticalAlign?: string;\r
-  AColumnTextFontFamily?: string;\r
-  AColumnTextFontSettings?: ListFontSettings;\r
-  AColumnTextFontSize?: number;\r
-  AColumnTextLineHeight?: number;\r
-  AColumnTextLetterSpacing?: number;\r
-  AColumnTextWordSpacing?: number;\r
-  AColumnTextTextAppearance?: TextStyles['textAppearance'];\r
-  BColumnVerticalAlign?: string;\r
-  BColumnTextFontFamily?: string;\r
-  BColumnTextFontSettings?: ListFontSettings;\r
-  BColumnTextFontSize?: number;\r
-  BColumnTextLineHeight?: number;\r
-  BColumnTextLetterSpacing?: number;\r
-  BColumnTextWordSpacing?: number;\r
-  BColumnTextTextAppearance?: TextStyles['textAppearance'];\r
-  CColumnVerticalAlign?: string;\r
-  CColumnTextFontFamily?: string;\r
-  CColumnTextFontSettings?: ListFontSettings;\r
-  CColumnTextFontSize?: number;\r
-  CColumnTextLineHeight?: number;\r
-  CColumnTextLetterSpacing?: number;\r
-  CColumnTextWordSpacing?: number;\r
-  CColumnTextTextAppearance?: TextStyles['textAppearance'];\r
-  DColumnVerticalAlign?: string;\r
-  DColumnTextFontFamily?: string;\r
-  DColumnTextFontSettings?: ListFontSettings;\r
-  DColumnTextFontSize?: number;\r
-  DColumnTextLineHeight?: number;\r
-  DColumnTextLetterSpacing?: number;\r
-  DColumnTextWordSpacing?: number;\r
-  DColumnTextTextAppearance?: TextStyles['textAppearance'];\r
-  EColumnVerticalAlign?: string;\r
-  EColumnTextFontFamily?: string;\r
-  EColumnTextFontSettings?: ListFontSettings;\r
-  EColumnTextFontSize?: number;\r
-  EColumnTextLineHeight?: number;\r
-  EColumnTextLetterSpacing?: number;\r
-  EColumnTextWordSpacing?: number;\r
-  EColumnTextTextAppearance?: TextStyles['textAppearance'];\r
-  cutLabelTextFontFamily?: string;\r
-  cutLabelTextFontSettings?: ListFontSettings;\r
-  cutLabelTextFontSize?: number;\r
-  cutLabelTextLineHeight?: number;\r
-  cutLabelTextLetterSpacing?: number;\r
-  cutLabelTextWordSpacing?: number;\r
-  cutLabelTextTextAppearance?: TextStyles['textAppearance'];\r
-};\r
-\r
-export type ListColumnVerticalAlignKey = \`\${ListColumnPrefix}VerticalAlign\`;\r
-\r
-type ListColumnVerticalAlignUpdates = {\r
-  AColumnVerticalAlign?: string;\r
-  BColumnVerticalAlign?: string;\r
-  CColumnVerticalAlign?: string;\r
-  DColumnVerticalAlign?: string;\r
-  EColumnVerticalAlign?: string;\r
-};\r
-\r
-type ListColumnTextStyleSyncUpdates = {\r
-  AColumnTextFontFamily?: string;\r
-  AColumnTextFontSettings?: ListFontSettings;\r
-  AColumnTextFontSize?: number;\r
-  AColumnTextLineHeight?: number;\r
-  AColumnTextLetterSpacing?: number;\r
-  AColumnTextWordSpacing?: number;\r
-  AColumnTextTextAppearance?: TextStyles['textAppearance'];\r
-  BColumnTextFontFamily?: string;\r
-  BColumnTextFontSettings?: ListFontSettings;\r
-  BColumnTextFontSize?: number;\r
-  BColumnTextLineHeight?: number;\r
-  BColumnTextLetterSpacing?: number;\r
-  BColumnTextWordSpacing?: number;\r
-  BColumnTextTextAppearance?: TextStyles['textAppearance'];\r
-  CColumnTextFontFamily?: string;\r
-  CColumnTextFontSettings?: ListFontSettings;\r
-  CColumnTextFontSize?: number;\r
-  CColumnTextLineHeight?: number;\r
-  CColumnTextLetterSpacing?: number;\r
-  CColumnTextWordSpacing?: number;\r
-  CColumnTextTextAppearance?: TextStyles['textAppearance'];\r
-  DColumnTextFontFamily?: string;\r
-  DColumnTextFontSettings?: ListFontSettings;\r
-  DColumnTextFontSize?: number;\r
-  DColumnTextLineHeight?: number;\r
-  DColumnTextLetterSpacing?: number;\r
-  DColumnTextWordSpacing?: number;\r
-  DColumnTextTextAppearance?: TextStyles['textAppearance'];\r
-  EColumnTextFontFamily?: string;\r
-  EColumnTextFontSettings?: ListFontSettings;\r
-  EColumnTextFontSize?: number;\r
-  EColumnTextLineHeight?: number;\r
-  EColumnTextLetterSpacing?: number;\r
-  EColumnTextWordSpacing?: number;\r
-  EColumnTextTextAppearance?: TextStyles['textAppearance'];\r
-  cutLabelTextFontFamily?: string;\r
-  cutLabelTextFontSettings?: ListFontSettings;\r
-  cutLabelTextFontSize?: number;\r
-  cutLabelTextLineHeight?: number;\r
-  cutLabelTextLetterSpacing?: number;\r
-  cutLabelTextWordSpacing?: number;\r
-  cutLabelTextTextAppearance?: TextStyles['textAppearance'];\r
-};\r
-\r
-export type ListSettings = {\r
-  columns: number;\r
-  type: 'A' | 'B';\r
-  wrapperWidth: number;\r
-  entriesCount: number;\r
-  cellMinHeight: number;\r
-  imageOnHover: 'On' | 'Off';\r
-  imageSize?: { min: number; max: number };\r
-  dividerWidth: number;\r
-  showVisibility: boolean[];\r
-  cut: number;\r
-  showCut: number;\r
-  cutCellMinHeight: number;\r
-  cutLabel: string;\r
-  entryHoverEffect: 'None' | 'Default' | 'Blinds';\r
-  rowPaddingTop: number;\r
-  rowPaddingBottom: number;\r
-  rowPaddingTopB: number;\r
-  AColumnWidth: number;\r
-  AColumnPaddingLeft: number;\r
-  AColumnPaddingRight: number;\r
-  AColumnPaddingBottom: number;\r
-  BColumnWidth: number;\r
-  BColumnPaddingLeft: number;\r
-  BColumnPaddingRight: number;\r
-  BColumnPaddingBottom: number;\r
-  CColumnWidth: number;\r
-  CColumnPaddingLeft: number;\r
-  CColumnPaddingRight: number;\r
-  CColumnPaddingBottom: number;\r
-  DColumnWidth: number;\r
-  DColumnPaddingLeft: number;\r
-  DColumnPaddingRight: number;\r
-  DColumnPaddingBottom: number;\r
-  EColumnWidth: number;\r
-  EColumnPaddingLeft: number;\r
-  EColumnPaddingRight: number;\r
-  EColumnPaddingBottom: number;\r
-  columnsOrder?: string[];\r
-  textPaddingLR?: number;\r
-  textColor: string;\r
-  textFontFamily: string;\r
-  textFontSettings?: ListFontSettings;\r
-  textFontSize?: number;\r
-  textLineHeight?: number;\r
-  textLetterSpacing?: number;\r
-  textWordSpacing?: number;\r
-  textTextAppearance?: TextStyles['textAppearance'];\r
-  backgroundColor: string;\r
-  dividerColor: string;\r
-  textHoverColor: string;\r
-  backgroundHoverColor: string;\r
-  dividerHoverColor: string;\r
-} & ListColumnTextStyleOverrides;\r
-\r
-type ListContentItem = {\r
-  AColumn?: string;\r
-  BColumnWidth?: string;\r
-  CColumnWidth?: string;\r
-  DColumnWidth?: string;\r
-  EColumnWidth?: string;\r
-  image?: {\r
-    objectFit?: 'cover' | 'contain';\r
-    url: string;\r
-    name: string;\r
-  };\r
-  link?: string;\r
-};\r
-\r
-type ListItemRow = {\r
-  id: string | number;\r
-  cells: Record<string, React.ReactNode>;\r
-  image?: ListContentItem['image'];\r
-  link?: string;\r
-};\r
-\r
-type HoverImageState = {\r
-  rowId: string | number;\r
-  url: string;\r
-  objectFit: 'cover' | 'contain';\r
-  widthPx: number;\r
-  x: number;\r
-  y: number;\r
-};\r
-\r
-type ListProps = {\r
-  layoutId?: string;\r
-  settings: ListSettings;\r
-  content?: ListContentItem[];\r
-  isEditor?: boolean;\r
-  isPreviewMode?: boolean;\r
-  activeEvent: string | undefined;\r
-  onUpdateSettings?: (settings: ListSettings) => void;\r
-} & CommonComponentProps;\r
-\r
-function sv(px: number): string {\r
-  return \`calc(var(--cntrl-article-width, 100vw) * \${px / 1440})\`;\r
-}\r
-\r
-function hasListColumnText(value: React.ReactNode): boolean {\r
-  return String(value ?? '').trim().length > 0;\r
-}\r
-\r
-function getEntryDividerWidths(\r
-  rowIdx: number,\r
-  rowCount: number,\r
-  showDividerTop: boolean,\r
-  showDividerBottom: boolean,\r
-  hasCutItem: boolean,\r
-  dividerWidth: number,\r
-  isEditor: boolean,\r
-): { borderTopWidth: string; borderBottomWidth: string } {\r
-  const scaledDividerWidth = scalingValue(dividerWidth, isEditor);\r
-  const none = scalingValue(0, isEditor);\r
-\r
-  const isFirst = rowIdx === 0;\r
-  const isLastEntry = rowIdx === rowCount - 1 && !hasCutItem;\r
-\r
-  const borderTopWidth = isFirst && showDividerTop ? scaledDividerWidth : none;\r
-  const borderBottomWidth = !isLastEntry || showDividerBottom ? scaledDividerWidth : none;\r
-\r
-  return { borderTopWidth, borderBottomWidth };\r
-}\r
-\r
-function getCutItemDividerWidths(\r
-  showDividerBottom: boolean,\r
-  dividerWidth: number,\r
-  isEditor: boolean,\r
-): { borderTopWidth: string; borderBottomWidth: string } {\r
-  const scaledDividerWidth = scalingValue(dividerWidth, isEditor);\r
-  const none = scalingValue(0, isEditor);\r
-\r
-  return {\r
-    borderTopWidth: none,\r
-    borderBottomWidth: showDividerBottom ? scaledDividerWidth : none,\r
-  };\r
-}\r
-\r
-const HOVER_IMAGE_CURSOR_OFFSET = 10;\r
-\r
-function getCSS(P: string): string {\r
-  return \`\r
-.\${P}-wrapper {\r
-  display: grid;\r
-  align-items: start;\r
-  min-height: \${sv(48)};\r
-  position: relative;\r
-  overflow: visible;\r
-  box-sizing: border-box;\r
-}\r
-\r
-.\${P}-hover-image {\r
-  position: absolute;\r
-  left: 0;\r
-  top: 0;\r
-  z-index: 10;\r
-  pointer-events: none;\r
-  display: block;\r
-  height: auto;\r
-}\r
-\r
-.\${P}-list-item {\r
-  display: flex;\r
-  flex-direction: column;\r
-  align-items: stretch;\r
-  width: 100%;\r
-  overflow: visible;\r
-  position: relative;\r
-  box-sizing: content-box;\r
-  user-select: none;\r
-  background: var(--\${P}-background-color);\r
-}\r
-\r
-.\${P}-wrapper.\${P}-divider-top .\${P}-list-item {\r
-  border-top-style: solid;\r
-  border-top-color: var(--\${P}-divider-color);\r
-}\r
-\r
-.\${P}-wrapper.\${P}-divider-bottom .\${P}-list-item {\r
-  border-bottom-style: solid;\r
-  border-bottom-color: var(--\${P}-divider-color);\r
-}\r
-\r
-.\${P}-list-cols-row {\r
-  display: flex;\r
-  align-items: start;\r
-  width: 100%;\r
-  box-sizing: border-box;\r
-}\r
-\r
-.\${P}-list-cols-row-h {\r
-  align-items: stretch;\r
-}\r
-\r
-.\${P}-list-cols-row-h [data-list-col] {\r
-  display: grid;\r
-  grid-template-rows: minmax(0, 1fr);\r
-  align-self: stretch;\r
-  min-height: min-content;\r
-}\r
-\r
-.\${P}-list-cols-row-h .\${P}-list-col {\r
-  display: flex;\r
-  flex-direction: column;\r
-  align-items: flex-start;\r
-  justify-content: flex-start;\r
-  width: 100%;\r
-  min-height: 0;\r
-}\r
-\r
-.\${P}-list-cols-row-h .\${P}-list-col-title {\r
-  display: block;\r
-  flex: 0 0 auto;\r
-  align-self: stretch;\r
-}\r
-\r
-.\${P}-text-tight-leading {\r
-  display: block;\r
-  flex-shrink: 0;\r
-  padding-top: var(--\${P}-title-leading-gap, 0);\r
-  padding-bottom: var(--\${P}-title-leading-gap, 0);\r
-}\r
-\r
-.\${P}-wrapper.\${P}-type-b .\${P}-list-cols-row {\r
-  flex-direction: column;\r
-  align-items: stretch;\r
-}\r
-\r
-.\${P}-wrapper.\${P}-type-b .\${P}-list-col {\r
-  width: 100%;\r
-  min-width: 0;\r
-  flex-direction: column;\r
-  justify-content: flex-start;\r
-  align-items: flex-start;\r
-  min-height: min-content;\r
-}\r
-\r
-.\${P}-wrapper.\${P}-type-b .\${P}-list-col-title {\r
-  display: block;\r
-  flex: 0 0 auto;\r
-  align-self: stretch;\r
-  text-align: center;\r
-}\r
-\r
-.\${P}-wrapper.\${P}-type-b .\${P}-cut-item .\${P}-list-cols-row {\r
-  flex-direction: row;\r
-  align-items: center;\r
-  justify-content: center;\r
-}\r
-\r
-.\${P}-wrapper.\${P}-type-b .\${P}-cut-label {\r
-  text-align: center;\r
-  width: 100%;\r
-  box-sizing: border-box;\r
-}\r
-\r
-.\${P}-wrapper.\${P}-type-b .\${P}-list-col-last {\r
-  flex: 0 0 auto;\r
-  min-width: 0;\r
-}\r
-\r
-a.\${P}-list-item {\r
-  text-decoration: none;\r
-  color: inherit;\r
-  cursor: pointer;\r
-}\r
-\r
-.\${P}-list-col {\r
-  flex-shrink: 0;\r
-  overflow: visible;\r
-  box-sizing: border-box;\r
-  min-width: \${sv(50)};\r
-  position: relative;\r
-  display: flex;\r
-  align-items: flex-start;\r
-}\r
-\r
-.\${P}-list-col-last {\r
-  flex: 1 1 auto;\r
-  min-width: \${sv(50)};\r
-}\r
-\r
-.\${P}-list-col-title {\r
-  color: var(--\${P}-text-color);\r
-  white-space: pre-wrap;\r
-  overflow-wrap: anywhere;\r
-  word-break: break-word;\r
-  flex: 1;\r
-  min-width: 0;\r
-  width: 100%;\r
-  box-sizing: border-box;\r
-}\r
-\r
-.\${P}-baseline-probe {\r
-  display: inline-block;\r
-  width: 0;\r
-  height: 0;\r
-  overflow: hidden;\r
-  vertical-align: baseline;\r
-}\r
-\r
-.\${P}-col-resize-handle,\r
-.\${P}-padding-control-handle {\r
-  background: transparent;\r
-}\r
-\r
-.\${P}-row-padding-handle {\r
-  position: relative;\r
-  z-index: 2;\r
-  width: 100%;\r
-  flex-shrink: 0;\r
-  background: transparent;\r
-}\r
-\r
-.\${P}-row-padding-handle::before {\r
-  content: "";\r
-  position: absolute;\r
-  top: 0;\r
-  left: 0;\r
-  width: 100%;\r
-  height: 100%;\r
-  min-height: 20px;\r
-  pointer-events: auto;\r
-  z-index: 10;\r
-}\r
-\r
-.\${P}-col-resize-handle::after {\r
-  content: '';\r
-  position: absolute;\r
-  top: 0;\r
-  left: 50%;\r
-  transform: translateX(-50%);\r
-  width: 2px;\r
-  height: 100%;\r
-  background: #FF5C02;\r
-  pointer-events: none;\r
-}\r
-\r
-.\${P}-wrapper.\${P}-type-b .\${P}-col-resize-handle::after {\r
-  top: 50%;\r
-  left: 0;\r
-  transform: translateY(-50%);\r
-  width: 100%;\r
-  height: 2px;\r
-}\r
-\r
-.\${P}-padding-control-handle::after {\r
-  content: '';\r
-  position: absolute;\r
-  top: 50%;\r
-  left: 50%;\r
-  transform: translate(-50%, -50%);\r
-  width: 4px;\r
-  height: 12px;\r
-  background: #FF5C02;\r
-  border: 1px solid #FFFFFF;\r
-  border-radius: 5px;\r
-  pointer-events: none;\r
-  box-sizing: border-box;\r
-}\r
-\r
-.\${P}-wrapper.\${P}-type-b .\${P}-padding-control-handle::after {\r
-  width: 12px;\r
-  height: 4px;\r
-}\r
-\r
-.\${P}-text-padding-lr-handle {\r
-  background: transparent;\r
-}\r
-\r
-.\${P}-text-padding-lr-handle::after {\r
-  content: '';\r
-  position: absolute;\r
-  top: 50%;\r
-  left: 50%;\r
-  transform: translate(-50%, -50%);\r
-  width: 4px;\r
-  height: 12px;\r
-  background: #FF5C02;\r
-  border: 1px solid #FFFFFF;\r
-  border-radius: 5px;\r
-  pointer-events: none;\r
-  box-sizing: border-box;\r
-}\r
-\r
-.\${P}-wrapper.\${P}-entry-hover-default .\${P}-list-item-has-link,\r
-.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-list-item-has-link,\r
-.\${P}-wrapper.\${P}-entry-hover-default .\${P}-cut-item,\r
-.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-cut-item {\r
-  transition: background-color 250ms, border-color 250ms;\r
-}\r
-\r
-.\${P}-wrapper.\${P}-entry-hover-default .\${P}-list-item-has-link .\${P}-list-col-title,\r
-.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-list-item-has-link .\${P}-list-col-title,\r
-.\${P}-wrapper.\${P}-entry-hover-default .\${P}-cut-label,\r
-.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-cut-label {\r
-  transition: color 250ms;\r
-}\r
-\r
-.\${P}-wrapper.\${P}-entry-hover-default .\${P}-list-item-has-link:hover,\r
-.\${P}-wrapper.\${P}-entry-hover-default.\${P}-state-hover .\${P}-list-item-has-link,\r
-.\${P}-wrapper.\${P}-entry-hover-default .\${P}-cut-item:hover,\r
-.\${P}-wrapper.\${P}-entry-hover-default.\${P}-state-hover .\${P}-cut-item {\r
-  background: var(--\${P}-background-hover-color);\r
-}\r
-\r
-.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-default .\${P}-list-item-has-link:hover,\r
-.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-default .\${P}-list-item:has(+ .\${P}-list-item-has-link:hover),\r
-.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-default .\${P}-list-item:has(+ .\${P}-cut-item:hover),\r
-.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-default.\${P}-state-hover .\${P}-list-item-has-link,\r
-.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-default .\${P}-cut-item:hover,\r
-.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-default.\${P}-state-hover .\${P}-cut-item,\r
-.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-blinds .\${P}-list-item-has-link:hover,\r
-.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-blinds .\${P}-list-item:has(+ .\${P}-list-item-has-link:hover),\r
-.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-blinds .\${P}-list-item:has(+ .\${P}-cut-item:hover),\r
-.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-list-item-has-link,\r
-.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-blinds .\${P}-cut-item:hover,\r
-.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-cut-item {\r
-  border-bottom-color: var(--\${P}-divider-hover-color);\r
-}\r
-\r
-.\${P}-wrapper.\${P}-divider-top:not(.\${P}-divider-bottom).\${P}-entry-hover-default .\${P}-list-item-has-link:hover:first-child,\r
-.\${P}-wrapper.\${P}-divider-top:not(.\${P}-divider-bottom).\${P}-entry-hover-default.\${P}-state-hover .\${P}-list-item-has-link:first-child,\r
-.\${P}-wrapper.\${P}-divider-top:not(.\${P}-divider-bottom).\${P}-entry-hover-blinds .\${P}-list-item-has-link:hover:first-child,\r
-.\${P}-wrapper.\${P}-divider-top:not(.\${P}-divider-bottom).\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-list-item-has-link:first-child {\r
-  border-top-color: var(--\${P}-divider-hover-color);\r
-}\r
-\r
-.\${P}-wrapper.\${P}-divider-top.\${P}-divider-bottom.\${P}-entry-hover-default .\${P}-list-item-has-link:hover:first-child,\r
-.\${P}-wrapper.\${P}-divider-top.\${P}-divider-bottom.\${P}-entry-hover-default.\${P}-state-hover .\${P}-list-item-has-link:first-child,\r
-.\${P}-wrapper.\${P}-divider-top.\${P}-divider-bottom.\${P}-entry-hover-blinds .\${P}-list-item-has-link:hover:first-child,\r
-.\${P}-wrapper.\${P}-divider-top.\${P}-divider-bottom.\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-list-item-has-link:first-child {\r
-  border-top-color: var(--\${P}-divider-hover-color);\r
-}\r
-\r
-.\${P}-wrapper.\${P}-entry-hover-default .\${P}-list-item-has-link:hover .\${P}-list-col-title,\r
-.\${P}-wrapper.\${P}-entry-hover-default.\${P}-state-hover .\${P}-list-item-has-link .\${P}-list-col-title,\r
-.\${P}-wrapper.\${P}-entry-hover-default .\${P}-cut-item:hover .\${P}-cut-label,\r
-.\${P}-wrapper.\${P}-entry-hover-default.\${P}-state-hover .\${P}-cut-item .\${P}-cut-label,\r
-.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-list-item-has-link:hover .\${P}-list-col-title,\r
-.\${P}-wrapper.\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-list-item-has-link .\${P}-list-col-title,\r
-.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-cut-item:hover .\${P}-cut-label,\r
-.\${P}-wrapper.\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-cut-item .\${P}-cut-label {\r
-  color: var(--\${P}-text-hover-color);\r
-}\r
-\r
-.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-list-item-has-link::before,\r
-.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-cut-item::before {\r
-  content: '';\r
-  position: absolute;\r
-  inset: 0;\r
-  background: var(--\${P}-background-hover-color);\r
-  transform: scaleY(0);\r
-  transform-origin: center center;\r
-  transition: transform 250ms;\r
-  z-index: 0;\r
-  pointer-events: none;\r
-}\r
-\r
-.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-list-col,\r
-.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-cut-label {\r
-  position: relative;\r
-  z-index: 1;\r
-}\r
-\r
-.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-list-item-has-link:hover::before,\r
-.\${P}-wrapper.\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-list-item-has-link::before,\r
-.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-cut-item:hover::before,\r
-.\${P}-wrapper.\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-cut-item::before {\r
-  transform: scaleY(1);\r
-}\r
-\r
-.\${P}-cut-item {\r
-  display: flex;\r
-  align-items: center;\r
-  justify-content: center;\r
-  width: 100%;\r
-  overflow: visible;\r
-  position: relative;\r
-  z-index: 3;\r
-  box-sizing: border-box;\r
-  user-select: none;\r
-  background: var(--\${P}-background-color);\r
-  cursor: pointer;\r
-  padding: 0;\r
-  border: none;\r
-  font: inherit;\r
-  text-align: inherit;\r
-  appearance: none;\r
-  -webkit-appearance: none;\r
-}\r
-\r
-.\${P}-cut-item .\${P}-list-cols-row {\r
-  flex: 1;\r
-  min-height: 100%;\r
-  align-items: center;\r
-}\r
-\r
-.\${P}-wrapper.\${P}-divider-bottom .\${P}-cut-item {\r
-  border-bottom-style: solid;\r
-  border-bottom-color: var(--\${P}-divider-color);\r
-}\r
-\r
-.\${P}-cut-label {\r
-  display: block;\r
-  position: relative;\r
-  z-index: 1;\r
-  margin: 0;\r
-  color: var(--\${P}-text-color);\r
-  white-space: pre-wrap;\r
-  overflow-wrap: anywhere;\r
-  word-break: break-word;\r
-}\r
-\`;\r
-}\r
-\r
-export const COLUMN_CONTENT_KEYS = [\r
-  'AColumn',\r
-  'BColumnWidth',\r
-  'CColumnWidth',\r
-  'DColumnWidth',\r
-  'EColumnWidth',\r
-] as const;\r
-\r
-export const COLUMN_TEXT_PREFIXES = [\r
-  'AColumn',\r
-  'BColumn',\r
-  'CColumn',\r
-  'DColumn',\r
-  'EColumn',\r
-] as const;\r
-\r
-export const CUT_LABEL_TEXT_PREFIX = 'cutLabel' as const;\r
-\r
-export const LIST_TEXT_STYLE_PREFIXES = [\r
-  ...COLUMN_TEXT_PREFIXES,\r
-  CUT_LABEL_TEXT_PREFIX,\r
-] as const;\r
-\r
-export type ListTextStylePrefix = typeof LIST_TEXT_STYLE_PREFIXES[number];\r
-\r
-export const LIST_COLUMN_LETTERS = ['A', 'B', 'C', 'D', 'E'] as const;\r
-\r
-export function getListColumnVerticalAlignSettingKey(columnLetter: string): string {\r
-  return \`\${columnLetter}ColumnVerticalAlign\`;\r
-}\r
-\r
-export const COLUMN_VALIGN_BASIC_OPTIONS = ['Top', 'Center', 'Bottom'] as const;\r
-\r
-export function isBaselineAnchorColumnVerticalAlign(value: string | undefined): boolean {\r
-  const raw = String(value ?? 'Top').trim();\r
-  if (raw.toLowerCase().startsWith('baseline')) {\r
-    return false;\r
-  }\r
-  return raw === 'Top' || raw === 'Center' || raw === 'Bottom';\r
-}\r
-\r
-export function parseBaselineAnchorLetter(value: string | undefined): string | null {\r
-  const raw = String(value ?? '').trim();\r
-  if (!raw.toLowerCase().startsWith('baseline')) {\r
-    return null;\r
-  }\r
-  const anchorLetter = raw.slice(-1).toUpperCase();\r
-  return LIST_COLUMN_LETTERS.includes(anchorLetter as typeof LIST_COLUMN_LETTERS[number])\r
-    ? anchorLetter\r
-    : null;\r
-}\r
-\r
-export function isValidColumnBaselineVAlign(\r
-  value: string | undefined,\r
-  forColumnLetter: string,\r
-  settings: ListSettings,\r
-): boolean {\r
-  const anchorLetter = parseBaselineAnchorLetter(value);\r
-  if (!anchorLetter) {\r
-    return true;\r
-  }\r
-  if (anchorLetter === forColumnLetter) {\r
-    return false;\r
-  }\r
-  return isBaselineAnchorColumnVerticalAlign(settings[getListColumnVerticalAlignSettingKey(anchorLetter) as ListColumnVerticalAlignKey]);\r
-}\r
-\r
-export function getColumnVerticalAlignOptionsForLetter(\r
-  columnLetter: string,\r
-  settings: ListSettings,\r
-): string[] {\r
-  const baselineOptions = LIST_COLUMN_LETTERS\r
-    .filter((letter) => letter !== columnLetter)\r
-    .filter((letter) => isBaselineAnchorColumnVerticalAlign(settings[getListColumnVerticalAlignSettingKey(letter) as ListColumnVerticalAlignKey]))\r
-    .map((letter) => \`Baseline \${letter}\`);\r
-\r
-  return [...COLUMN_VALIGN_BASIC_OPTIONS, ...baselineOptions];\r
-}\r
-\r
-type ColumnVerticalAlign =\r
-  | { kind: 'top' | 'center' | 'bottom' }\r
-  | { kind: 'baseline'; anchorLetter: string };\r
-\r
-function parseColumnVerticalAlign(value: string | undefined): ColumnVerticalAlign {\r
-  const raw = String(value ?? 'Top').trim();\r
-  if (raw.toLowerCase().startsWith('baseline')) {\r
-    const anchorLetter = raw.slice(-1).toUpperCase();\r
-    if (LIST_COLUMN_LETTERS.includes(anchorLetter as typeof LIST_COLUMN_LETTERS[number])) {\r
-      return { kind: 'baseline', anchorLetter };\r
-    }\r
-    return { kind: 'top' };\r
-  }\r
-  if (raw === 'Center') return { kind: 'center' };\r
-  if (raw === 'Bottom') return { kind: 'bottom' };\r
-  return { kind: 'top' };\r
-}\r
-\r
-function resolveColumnVerticalAlign(\r
-  value: string | undefined,\r
-  settings: ListSettings,\r
-  columnLetter: string,\r
-): ColumnVerticalAlign {\r
-  if (isActiveBaselineVAlign(value, settings, columnLetter)) {\r
-    return parseColumnVerticalAlign(value);\r
-  }\r
-\r
-  const parsed = parseColumnVerticalAlign(value);\r
-  if (parsed.kind === 'baseline') {\r
-    return { kind: 'top' };\r
-  }\r
-\r
-  return parsed;\r
-}\r
-\r
-function isActiveBaselineVAlign(\r
-  value: string | undefined,\r
-  settings: ListSettings,\r
-  forColumnLetter: string,\r
-): boolean {\r
-  if (!isValidColumnBaselineVAlign(value, forColumnLetter, settings)) {\r
-    return false;\r
-  }\r
-  return parseColumnVerticalAlign(value).kind === 'baseline';\r
-}\r
-\r
-function getListColumnVerticalAlignSanitizeUpdates(\r
-  settings: ListSettings,\r
-): ListColumnVerticalAlignUpdates | null {\r
-  if (settings.type === 'B') {\r
-    return null;\r
-  }\r
-\r
-  const updates: ListColumnVerticalAlignUpdates = {};\r
-  let hasUpdates = false;\r
-\r
-  for (const letter of LIST_COLUMN_LETTERS) {\r
-    const key = getListColumnVerticalAlignSettingKey(letter) as ListColumnVerticalAlignKey;\r
-    const value = settings[key];\r
-    if (!isValidColumnBaselineVAlign(value, letter, settings)) {\r
-      updates[key] = 'Top';\r
-      hasUpdates = true;\r
-    }\r
-  }\r
-\r
-  return hasUpdates ? updates : null;\r
-}\r
-\r
-function vAlignToTitleStyle(\r
-  kind: ColumnVerticalAlign['kind'],\r
-): React.CSSProperties {\r
-  if (kind === 'center') {\r
-    return { marginTop: 'auto', marginBottom: 'auto' };\r
-  }\r
-  if (kind === 'bottom') {\r
-    return { marginTop: 'auto' };\r
-  }\r
-  return {};\r
-}\r
-\r
-function getFirstLineBaselineOffsetInTitle(\r
-  titleEl: HTMLElement,\r
-  probeClassName: string,\r
-): number {\r
-  const probe = document.createElement('i');\r
-  probe.className = probeClassName;\r
-  probe.setAttribute('aria-hidden', 'true');\r
-  titleEl.prepend(probe);\r
-\r
-  const { top: titleTop } = titleEl.getBoundingClientRect();\r
-  const { bottom: probeBottom } = probe.getBoundingClientRect();\r
-  const baselineOffset = probeBottom - titleTop;\r
-  probe.remove();\r
-\r
-  return baselineOffset;\r
-}\r
-\r
-function measureColumnFirstLineBaselineOffset(\r
-  info: {\r
-    titleEl: HTMLElement | null;\r
-    kind: string;\r
-  },\r
-  rowTop: number,\r
-  listColClassName: string,\r
-  probeClassName: string,\r
-): number {\r
-  const titleEl = info.titleEl;\r
-  if (!titleEl) return 0;\r
-\r
-  const listCol = titleEl.closest<HTMLElement>(\`.\${listColClassName}\`);\r
-  if (!listCol) return 0;\r
-\r
-  const baselineInTitle = getFirstLineBaselineOffsetInTitle(titleEl, probeClassName);\r
-\r
-  if (info.kind === 'baseline') {\r
-    return titleEl.getBoundingClientRect().top - rowTop + baselineInTitle;\r
-  }\r
-\r
-  const listColRect = listCol.getBoundingClientRect();\r
-  const titleHeight = titleEl.getBoundingClientRect().height;\r
-  let valignOffset = 0;\r
-\r
-  if (info.kind === 'center') {\r
-    valignOffset = (listColRect.height - titleHeight) / 2;\r
-  } else if (info.kind === 'bottom') {\r
-    valignOffset = listColRect.height - titleHeight;\r
-  }\r
-\r
-  return (listColRect.top - rowTop) + valignOffset + baselineInTitle;\r
-}\r
-\r
-function syncRowListColHeights(\r
-  rowEl: HTMLElement,\r
-  cols: HTMLElement[],\r
-  listColClassName: string,\r
-): number {\r
-  const rowHeight = rowEl.getBoundingClientRect().height;\r
-  if (rowHeight <= 0) {\r
-    return 0;\r
-  }\r
-\r
-  cols.forEach((colEl) => {\r
-    const listCol = colEl.querySelector<HTMLElement>(\`.\${listColClassName}\`);\r
-    if (listCol) {\r
-      listCol.style.minHeight = \`\${rowHeight}px\`;\r
-      listCol.style.height = \`\${rowHeight}px\`;\r
-    }\r
-  });\r
-\r
-  void rowEl.offsetHeight;\r
-  return rowHeight;\r
-}\r
-\r
-function applyBaselineTitleShift(titleEl: HTMLElement | null, shift: number): number {\r
-  if (!titleEl || !shift) {\r
-    if (titleEl) {\r
-      titleEl.style.transform = '';\r
-    }\r
-    return 0;\r
-  }\r
-\r
-  titleEl.style.transform = \`translateY(\${shift}px)\`;\r
-  return shift;\r
-}\r
-\r
-const COLUMN_CONTENT_KEY_TO_TEXT_PREFIX: Record<\r
-  typeof COLUMN_CONTENT_KEYS[number],\r
-  typeof COLUMN_TEXT_PREFIXES[number]\r
-> = {\r
-  AColumn: 'AColumn',\r
-  BColumnWidth: 'BColumn',\r
-  CColumnWidth: 'CColumn',\r
-  DColumnWidth: 'DColumn',\r
-  EColumnWidth: 'EColumn',\r
-};\r
-\r
-export const LIST_GLOBAL_TEXT_STYLE_KEYS = [\r
-  'textFontFamily',\r
-  'textFontSettings',\r
-  'textFontSize',\r
-  'textLineHeight',\r
-  'textLetterSpacing',\r
-  'textWordSpacing',\r
-  'textTextAppearance',\r
-] as const;\r
-\r
-export type ListGlobalTextStyleKey = typeof LIST_GLOBAL_TEXT_STYLE_KEYS[number];\r
-\r
-export function getListColumnTextSettingKey(\r
-  prefix: ListTextStylePrefix,\r
-  globalKey: ListGlobalTextStyleKey,\r
-): string {\r
-  return \`\${prefix}\${globalKey.replace(/^text/, 'Text')}\`;\r
-}\r
-\r
-type ListTextStyleFields = {\r
-  textFontFamily?: string;\r
-  textFontSettings?: { fontWeight: number; fontStyle: string };\r
-  textFontSize?: number;\r
-  textLineHeight?: number;\r
-  textLetterSpacing?: number;\r
-  textWordSpacing?: number;\r
-  textTextAppearance?: TextStyles['textAppearance'];\r
-  textColor?: string;\r
-};\r
-\r
-type ResolvedListTextFields = {\r
-  textFontFamily: string;\r
-  textFontSettings: { fontWeight: number; fontStyle: string };\r
-  textFontSize?: number;\r
-  textLineHeight?: number;\r
-  textLetterSpacing: number;\r
-  textWordSpacing: number;\r
-  textTextAppearance?: TextStyles['textAppearance'];\r
-  textColor?: string;\r
-};\r
-\r
-function resolveListGlobalTextFields(\r
-  settings: ListTextStyleFields,\r
-): ResolvedListTextFields {\r
-  return {\r
-    textFontFamily: settings.textFontFamily ?? 'Arial',\r
-    textFontSettings: settings.textFontSettings ?? {\r
-      fontWeight: 400,\r
-      fontStyle: 'normal',\r
-    },\r
-    textFontSize: settings.textFontSize,\r
-    textLineHeight: settings.textLineHeight,\r
-    textLetterSpacing: settings.textLetterSpacing ?? 0,\r
-    textWordSpacing: settings.textWordSpacing ?? 0,\r
-    textTextAppearance: settings.textTextAppearance,\r
-    textColor: settings.textColor,\r
-  };\r
-}\r
-\r
-function resolveListColumnTextFields(\r
-  settings: ListSettings,\r
-  textPrefix: ListTextStylePrefix,\r
-): ResolvedListTextFields {\r
-  const read = <K extends ListGlobalTextStyleKey>(globalKey: K) => {\r
-    const columnKey = getListColumnTextSettingKey(textPrefix, globalKey);\r
-    const columnValue = settings[columnKey as keyof ListSettings];\r
-    if (columnValue !== undefined) {\r
-      return columnValue as ListTextStyleFields[K];\r
-    }\r
-    return settings[globalKey];\r
-  };\r
-\r
-  return {\r
-    textFontFamily: (read('textFontFamily') as string | undefined) ?? 'Arial',\r
-    textFontSettings: (read('textFontSettings') as ListTextStyleFields['textFontSettings']) ?? {\r
-      fontWeight: 400,\r
-      fontStyle: 'normal',\r
-    },\r
-    textFontSize: read('textFontSize') as number | undefined,\r
-    textLineHeight: read('textLineHeight') as number | undefined,\r
-    textLetterSpacing: (read('textLetterSpacing') as number | undefined) ?? 0,\r
-    textWordSpacing: (read('textWordSpacing') as number | undefined) ?? 0,\r
-    textTextAppearance: read('textTextAppearance') as ListTextStyleFields['textTextAppearance'],\r
-    textColor: settings.textColor,\r
-  };\r
-}\r
-\r
-function listColumnTextFieldsToCss(\r
-  fields: ResolvedListTextFields,\r
-  isEditor?: boolean,\r
-): React.CSSProperties {\r
-  const resolvedTextStyle: TextStyles = {\r
-    fontSettings: {\r
-      fontFamily: fields.textFontFamily,\r
-      fontWeight: fields.textFontSettings?.fontWeight ?? 400,\r
-      fontStyle: fields.textFontSettings?.fontStyle ?? 'normal',\r
-    },\r
-    fontSize: fields.textFontSize ?? 0.01,\r
-    lineHeight: fields.textLineHeight,\r
-    letterSpacing: fields.textLetterSpacing,\r
-    wordSpacing: fields.textWordSpacing,\r
-    textAppearance: fields.textTextAppearance,\r
-    color: fields.textColor ?? '#767676',\r
-  };\r
-\r
-  return omitTextColors(textStylesToCss(resolvedTextStyle, isEditor));\r
-}\r
-\r
-function getListColumnTitleClassName(\r
-  settings: ListSettings,\r
-  prefix: ListTextStylePrefix,\r
-  baseClassName: string,\r
-  tightLeadingClassName: string,\r
-): string {\r
-  const fields = resolveListColumnTextFields(settings, prefix);\r
-  const fontSize = fields.textFontSize ?? 0.01;\r
-  const lineHeight = fields.textLineHeight;\r
-  const needsTightLeading = lineHeight !== undefined && lineHeight < fontSize;\r
-\r
-  return needsTightLeading\r
-    ? \`\${baseClassName} \${tightLeadingClassName}\`\r
-    : baseClassName;\r
-}\r
-\r
-function getListColumnTitleVars(\r
-  settings: ListSettings,\r
-  prefix: ListTextStylePrefix,\r
-  titleVarPrefix: string,\r
-  isEditor?: boolean,\r
-): React.CSSProperties {\r
-  const fields = resolveListColumnTextFields(settings, prefix);\r
-  const fontSize = fields.textFontSize ?? 0.01;\r
-  const lineHeight = fields.textLineHeight;\r
-\r
-  if (lineHeight === undefined || lineHeight >= fontSize) {\r
-    return {};\r
-  }\r
-\r
-  return {\r
-    [\`--\${titleVarPrefix}-title-leading-gap\`]: scalingValue((fontSize - lineHeight) / 2, isEditor),\r
-  } as React.CSSProperties;\r
-}\r
-\r
-function getListGlobalTextSyncUpdates(\r
-  nextSettings: ListSettings,\r
-  prevSettings: ListSettings,\r
-): ListColumnTextStyleSyncUpdates | null {\r
-  const updates: ListColumnTextStyleSyncUpdates = {};\r
-  let hasChanges = false;\r
-\r
-  for (const globalKey of LIST_GLOBAL_TEXT_STYLE_KEYS) {\r
-    if (nextSettings[globalKey] === prevSettings[globalKey]) {\r
-      continue;\r
-    }\r
-    if (nextSettings[globalKey] === undefined) {\r
-      continue;\r
-    }\r
-\r
-    hasChanges = true;\r
-    for (const prefix of LIST_TEXT_STYLE_PREFIXES) {\r
-      Object.assign(updates, {\r
-        [getListColumnTextSettingKey(prefix, globalKey)]: nextSettings[globalKey],\r
-      });\r
-    }\r
-  }\r
-\r
-  return hasChanges ? updates : null;\r
-}\r
-\r
-const COLUMN_WIDTH_KEYS = [\r
-  'AColumnWidth',\r
-  'BColumnWidth',\r
-  'CColumnWidth',\r
-  'DColumnWidth',\r
-  'EColumnWidth',\r
-] as const;\r
-\r
-const COLUMN_PADDING_LEFT_KEYS = [\r
-  'AColumnPaddingLeft',\r
-  'BColumnPaddingLeft',\r
-  'CColumnPaddingLeft',\r
-  'DColumnPaddingLeft',\r
-  'EColumnPaddingLeft',\r
-] as const;\r
-\r
-const COLUMN_PADDING_RIGHT_KEYS = [\r
-  'AColumnPaddingRight',\r
-  'BColumnPaddingRight',\r
-  'CColumnPaddingRight',\r
-  'DColumnPaddingRight',\r
-  'EColumnPaddingRight',\r
-] as const;\r
-\r
-const COLUMN_PADDING_BOTTOM_KEYS = [\r
-  'AColumnPaddingBottom',\r
-  'BColumnPaddingBottom',\r
-  'CColumnPaddingBottom',\r
-  'DColumnPaddingBottom',\r
-  'EColumnPaddingBottom',\r
-] as const;\r
-\r
-type ColumnWidthKey = typeof COLUMN_WIDTH_KEYS[number];\r
-type ColumnPaddingLeftKey = typeof COLUMN_PADDING_LEFT_KEYS[number];\r
-type ColumnPaddingRightKey = typeof COLUMN_PADDING_RIGHT_KEYS[number];\r
-type ColumnPaddingBottomKey = typeof COLUMN_PADDING_BOTTOM_KEYS[number];\r
-\r
-type ListColumnPaddingUpdates = {\r
-  AColumnPaddingLeft?: number;\r
-  AColumnPaddingRight?: number;\r
-  BColumnPaddingLeft?: number;\r
-  BColumnPaddingRight?: number;\r
-  CColumnPaddingLeft?: number;\r
-  CColumnPaddingRight?: number;\r
-  DColumnPaddingLeft?: number;\r
-  DColumnPaddingRight?: number;\r
-  EColumnPaddingLeft?: number;\r
-  EColumnPaddingRight?: number;\r
-};\r
-\r
-type ListColumnWidthUpdates = {\r
-  AColumnWidth?: number;\r
-  BColumnWidth?: number;\r
-  CColumnWidth?: number;\r
-  DColumnWidth?: number;\r
-  EColumnWidth?: number;\r
-};\r
-\r
-type ListItemColumn = {\r
-  key: string;\r
-  textPrefix: typeof COLUMN_TEXT_PREFIXES[number];\r
-  widthKey: ColumnWidthKey;\r
-  paddingLeftKey: ColumnPaddingLeftKey;\r
-  paddingRightKey: ColumnPaddingRightKey;\r
-  paddingBottomKey: ColumnPaddingBottomKey;\r
-  width: number;\r
-  paddingLeft: number;\r
-  paddingRight: number;\r
-  paddingBottom: number;\r
-};\r
-\r
-type ColorKeys =\r
-  | 'textColor'\r
-  | 'backgroundColor'\r
-  | 'dividerColor'\r
-  | 'textHoverColor'\r
-  | 'backgroundHoverColor'\r
-  | 'dividerHoverColor';\r
-\r
-const COLOR_VAR_MAP: Record<ColorKeys, string> = {\r
-  textColor: 'text-color',\r
-  backgroundColor: 'background-color',\r
-  dividerColor: 'divider-color',\r
-  textHoverColor: 'text-hover-color',\r
-  backgroundHoverColor: 'background-hover-color',\r
-  dividerHoverColor: 'divider-hover-color',\r
-};\r
-\r
-const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;\r
-\r
-const COL_RESIZE_HANDLE_WIDTH = 0.004;\r
-const COL_PADDING_HANDLE_WIDTH = 0.004;\r
-const MIN_COLUMN_WIDTH_PX = 50;\r
-const ARTICLE_DESIGN_WIDTH = 1440;\r
-const MIN_COLUMN_WIDTH = MIN_COLUMN_WIDTH_PX / ARTICLE_DESIGN_WIDTH;\r
-\r
-export function getListMinColumnWidth(designWidthPx?: number): number {\r
-  const designWidth = typeof designWidthPx === 'number' && designWidthPx > 0\r
-    ? designWidthPx\r
-    : ARTICLE_DESIGN_WIDTH;\r
-\r
-  return MIN_COLUMN_WIDTH_PX / designWidth;\r
-}\r
-\r
-function getEditorDesignWidth(element: HTMLElement | null | undefined): number {\r
-  let el = element ?? null;\r
-\r
-  while (el) {\r
-    const inline = el.style.getPropertyValue('--cntrl-article-width').trim();\r
-    if (inline) {\r
-      const px = parseFloat(inline);\r
-      if (Number.isFinite(px) && px > 0) {\r
-        return px;\r
-      }\r
-    }\r
-\r
-    const computed = getComputedStyle(el).getPropertyValue('--cntrl-article-width').trim();\r
-    if (computed) {\r
-      const px = parseFloat(computed);\r
-      if (Number.isFinite(px) && px > 0) {\r
-        return px;\r
-      }\r
-    }\r
-\r
-    el = el.parentElement;\r
-  }\r
-\r
-  return ARTICLE_DESIGN_WIDTH;\r
-}\r
-\r
-const DEFAULT_COLUMN_WIDTHS: Record<ColumnWidthKey, number> = {\r
-  AColumnWidth: 0.02,\r
-  BColumnWidth: 0.02,\r
-  CColumnWidth: 0.02,\r
-  DColumnWidth: 0.02,\r
-  EColumnWidth: 0.02,\r
-};\r
-\r
-export function getListEffectiveContentWidth(\r
-  settings: ListSettings,\r
-): number {\r
-  const wrapperWidth = typeof settings.wrapperWidth === 'number' ? settings.wrapperWidth : 1;\r
-\r
-  return Math.max(0, wrapperWidth);\r
-}\r
-\r
-export function getEqualListColumnWidthUpdates(\r
-  columns: number,\r
-  contentWidth: number = 1,\r
-): Record<ColumnWidthKey, number> {\r
-  const equalColumnWidth = contentWidth / columns;\r
-  return Object.fromEntries(\r
-    COLUMN_WIDTH_KEYS.map((key) => [key, equalColumnWidth]),\r
-  ) as Record<ColumnWidthKey, number>;\r
-}\r
-\r
-function getResetListColumnPaddingUpdates(): Record<\r
-  ColumnPaddingLeftKey | ColumnPaddingRightKey,\r
-  number\r
-> {\r
-  return Object.fromEntries([\r
-    ...COLUMN_PADDING_LEFT_KEYS.map((key) => [key, 0]),\r
-    ...COLUMN_PADDING_RIGHT_KEYS.map((key) => [key, 0]),\r
-  ]) as Record<ColumnPaddingLeftKey | ColumnPaddingRightKey, number>;\r
-}\r
-\r
-function getResetListColumnPaddingBottomUpdates(): Record<ColumnPaddingBottomKey, number> {\r
-  return Object.fromEntries(\r
-    COLUMN_PADDING_BOTTOM_KEYS.map((key) => [key, 0]),\r
-  ) as Record<ColumnPaddingBottomKey, number>;\r
-}\r
-\r
-function getStoredColumnWidths(\r
-  settings: ListSettings,\r
-): Record<ColumnWidthKey, number> {\r
-  return Object.fromEntries(\r
-    COLUMN_WIDTH_KEYS.map((key) => [\r
-      key,\r
-      typeof settings[key] === 'number'\r
-        ? settings[key] as number\r
-        : DEFAULT_COLUMN_WIDTHS[key],\r
-    ]),\r
-  ) as Record<ColumnWidthKey, number>;\r
-}\r
-\r
-export function resolveListColumnPadding(\r
-  columnWidth: number,\r
-  paddingLeft: number,\r
-  paddingRight: number,\r
-): { paddingLeft: number; paddingRight: number } {\r
-  const maxTotalPadding = columnWidth - MIN_COLUMN_WIDTH;\r
-  const totalPadding = paddingLeft + paddingRight;\r
-\r
-  if (totalPadding <= 0 || totalPadding <= maxTotalPadding) {\r
-    return { paddingLeft, paddingRight };\r
-  }\r
-\r
-  if (maxTotalPadding <= 0) {\r
-    return { paddingLeft: 0, paddingRight: 0 };\r
-  }\r
-\r
-  const scale = maxTotalPadding / totalPadding;\r
-\r
-  return {\r
-    paddingLeft: paddingLeft * scale,\r
-    paddingRight: paddingRight * scale,\r
-  };\r
-}\r
-\r
-export function getEffectiveListColumnWidths(\r
-  columns: number,\r
-  wrapperWidth: number,\r
-  storedWidths: Record<ColumnWidthKey, number>,\r
-): number[] {\r
-  const resolvedWidths = resolveListColumnWidths(columns, wrapperWidth, storedWidths);\r
-\r
-  if (columns <= 0) {\r
-    return [];\r
-  }\r
-\r
-  const sumFixed = resolvedWidths.slice(0, columns - 1).reduce((sum, width) => sum + width, 0);\r
-\r
-  return [\r
-    ...resolvedWidths.slice(0, columns - 1),\r
-    Math.max(0, wrapperWidth - sumFixed),\r
-  ];\r
-}\r
-\r
-function getListColumnPaddingUpdates(\r
-  columns: number,\r
-  effectiveWidths: number[],\r
-  settings: ListSettings,\r
-): ListColumnPaddingUpdates {\r
-  const updates: ListColumnPaddingUpdates = {};\r
-\r
-  for (let index = 0; index < columns; index += 1) {\r
-    const paddingLeftKey = COLUMN_PADDING_LEFT_KEYS[index];\r
-    const paddingRightKey = COLUMN_PADDING_RIGHT_KEYS[index];\r
-    const storedPaddingLeft = typeof settings[paddingLeftKey] === 'number'\r
-      ? settings[paddingLeftKey] as number\r
-      : 0;\r
-    const storedPaddingRight = typeof settings[paddingRightKey] === 'number'\r
-      ? settings[paddingRightKey] as number\r
-      : 0;\r
-    const resolvedPadding = resolveListColumnPadding(\r
-      effectiveWidths[index] ?? 0,\r
-      storedPaddingLeft,\r
-      storedPaddingRight,\r
-    );\r
-\r
-    if (resolvedPadding.paddingLeft !== storedPaddingLeft) {\r
-      updates[paddingLeftKey] = resolvedPadding.paddingLeft;\r
-    }\r
-\r
-    if (resolvedPadding.paddingRight !== storedPaddingRight) {\r
-      updates[paddingRightKey] = resolvedPadding.paddingRight;\r
-    }\r
-  }\r
-\r
-  return updates;\r
-}\r
-\r
-export function resolveListColumnWidths(\r
-  columns: number,\r
-  wrapperWidth: number,\r
-  storedWidths: Record<ColumnWidthKey, number>,\r
-): number[] {\r
-  if (columns <= 0) {\r
-    return [];\r
-  }\r
-\r
-  const widths = COLUMN_WIDTH_KEYS.slice(0, columns).map(\r
-    (key) => storedWidths[key],\r
-  );\r
-\r
-  if (columns === 1) {\r
-    return widths;\r
-  }\r
-\r
-  const fixedWidths = widths.slice(0, columns - 1);\r
-  const fixedSum = fixedWidths.reduce((sum, width) => sum + width, 0);\r
-  const minTotalWidth = fixedSum + MIN_COLUMN_WIDTH;\r
-\r
-  if (wrapperWidth >= minTotalWidth) {\r
-    return widths;\r
-  }\r
-\r
-  const resolvedFixedWidths = [...fixedWidths];\r
-  let overflow = minTotalWidth - wrapperWidth;\r
-\r
-  for (let index = resolvedFixedWidths.length - 1; index >= 0 && overflow > 0; index -= 1) {\r
-    const shrinkable = resolvedFixedWidths[index] - MIN_COLUMN_WIDTH;\r
-    if (shrinkable <= 0) {\r
-      continue;\r
-    }\r
-\r
-    const shrinkAmount = Math.min(overflow, shrinkable);\r
-    resolvedFixedWidths[index] -= shrinkAmount;\r
-    overflow -= shrinkAmount;\r
-  }\r
-\r
-  return [...resolvedFixedWidths, widths[columns - 1]];\r
-}\r
-\r
-function getListColumnWidthUpdatesForWrapperWidth(\r
-  columns: number,\r
-  wrapperWidth: number,\r
-  storedWidths: Record<ColumnWidthKey, number>,\r
-): ListColumnWidthUpdates {\r
-  if (columns <= 1) {\r
-    return {};\r
-  }\r
-\r
-  const resolvedWidths = resolveListColumnWidths(columns, wrapperWidth, storedWidths);\r
-  const updates: ListColumnWidthUpdates = {};\r
-\r
-  for (let index = 0; index < columns - 1; index += 1) {\r
-    const key = COLUMN_WIDTH_KEYS[index];\r
-    if (resolvedWidths[index] !== storedWidths[key]) {\r
-      updates[key] = resolvedWidths[index];\r
-    }\r
-  }\r
-\r
-  return updates;\r
-}\r
-\r
-function getColumnsOrder(settings: ListSettings): string[] {\r
-  if (Array.isArray(settings.columnsOrder) && settings.columnsOrder.length > 0) {\r
-    return settings.columnsOrder as string[];\r
-  }\r
-\r
-  return [...COLUMN_CONTENT_KEYS];\r
-}\r
-\r
-function areStringArraysEqual(left: string[], right: string[]): boolean {\r
-  if (left.length !== right.length) {\r
-    return false;\r
-  }\r
-\r
-  return left.every((value, index) => value === right[index]);\r
-}\r
-\r
-function getColumnLayoutUpdatesForOrderChange(\r
-  nextOrder: string[],\r
-  prevOrder: string[],\r
-  prevSettings: ListSettings,\r
-  columns: number,\r
-): Record<string, number> {\r
-  const count = Math.min(columns, nextOrder.length, COLUMN_WIDTH_KEYS.length);\r
-  const updates: Record<string, number> = {};\r
-\r
-  for (let index = 0; index < count; index += 1) {\r
-    const contentKey = nextOrder[index];\r
-    const prevSlotIndex = prevOrder.indexOf(contentKey);\r
-\r
-    if (prevSlotIndex === -1) {\r
-      continue;\r
-    }\r
-\r
-    const prevWidthKey = COLUMN_WIDTH_KEYS[prevSlotIndex];\r
-    const prevPaddingLeftKey = COLUMN_PADDING_LEFT_KEYS[prevSlotIndex];\r
-    const prevPaddingRightKey = COLUMN_PADDING_RIGHT_KEYS[prevSlotIndex];\r
-    const prevPaddingBottomKey = COLUMN_PADDING_BOTTOM_KEYS[prevSlotIndex];\r
-    const widthKey = COLUMN_WIDTH_KEYS[index];\r
-    const paddingLeftKey = COLUMN_PADDING_LEFT_KEYS[index];\r
-    const paddingRightKey = COLUMN_PADDING_RIGHT_KEYS[index];\r
-    const paddingBottomKey = COLUMN_PADDING_BOTTOM_KEYS[index];\r
-\r
-    const prevWidth = prevSettings[prevWidthKey];\r
-    const prevPaddingLeft = prevSettings[prevPaddingLeftKey];\r
-    const prevPaddingRight = prevSettings[prevPaddingRightKey];\r
-    const prevPaddingBottom = prevSettings[prevPaddingBottomKey];\r
-\r
-    if (typeof prevWidth === 'number') {\r
-      updates[widthKey] = prevWidth;\r
-    }\r
-\r
-    if (typeof prevPaddingLeft === 'number') {\r
-      updates[paddingLeftKey] = prevPaddingLeft;\r
-    }\r
-\r
-    if (typeof prevPaddingRight === 'number') {\r
-      updates[paddingRightKey] = prevPaddingRight;\r
-    }\r
-\r
-    if (typeof prevPaddingBottom === 'number') {\r
-      updates[paddingBottomKey] = prevPaddingBottom;\r
-    }\r
-  }\r
-\r
-  return updates;\r
-}\r
-\r
-export function applyListSettingsChange(\r
-  nextSettings: ListSettings,\r
-  prevSettings: ListSettings,\r
-  options?: { designWidth?: number },\r
-): ListSettings {\r
-  const textSyncUpdates = getListGlobalTextSyncUpdates(nextSettings, prevSettings);\r
-  if (textSyncUpdates) {\r
-    nextSettings = { ...nextSettings, ...textSyncUpdates };\r
-  }\r
-\r
-  const valignSanitizeUpdates = getListColumnVerticalAlignSanitizeUpdates(nextSettings);\r
-  if (valignSanitizeUpdates) {\r
-    nextSettings = { ...nextSettings, ...valignSanitizeUpdates };\r
-  }\r
-\r
-  const minColumnWidth = getListMinColumnWidth(options?.designWidth);\r
-  const nextColumns = nextSettings.columns;\r
-  const prevColumns = prevSettings.columns;\r
-  const nextContentWidth = getListEffectiveContentWidth(nextSettings);\r
-  const prevContentWidth = getListEffectiveContentWidth(prevSettings);\r
-  const isVerticalLayout = nextSettings.type === 'B'\r
-    || (nextSettings.type === undefined && prevSettings.type === 'B');\r
-  const columns =\r
-    typeof nextColumns === 'number'\r
-      ? nextColumns\r
-      : typeof prevColumns === 'number'\r
-        ? prevColumns\r
-        : COLUMN_CONTENT_KEYS.length;\r
-\r
-  const withColumnPaddingUpdates = (\r
-    settings: ListSettings,\r
-  ): ListSettings => {\r
-    if (isVerticalLayout) {\r
-      return settings;\r
-    }\r
-\r
-    const storedWidths = getStoredColumnWidths({ ...prevSettings, ...settings });\r
-    const contentWidth = getListEffectiveContentWidth(settings);\r
-    const effectiveWidths = getEffectiveListColumnWidths(columns, contentWidth, storedWidths);\r
-    const paddingUpdates = getListColumnPaddingUpdates(columns, effectiveWidths, {\r
-      ...prevSettings,\r
-      ...settings,\r
-    });\r
-\r
-    if (Object.keys(paddingUpdates).length === 0) {\r
-      return settings;\r
-    }\r
-\r
-    return {\r
-      ...settings,\r
-      ...paddingUpdates,\r
-    };\r
-  };\r
-\r
-  if (typeof nextColumns === 'number' && nextColumns !== prevColumns) {\r
-    const updates: ListSettings = {\r
-      ...nextSettings,\r
-      ...getEqualListColumnWidthUpdates(nextColumns, nextContentWidth),\r
-      ...getResetListColumnPaddingUpdates(),\r
-    };\r
-\r
-    if (isVerticalLayout) {\r
-      for (const key of COLUMN_PADDING_BOTTOM_KEYS) {\r
-        if (typeof prevSettings[key] === 'number') {\r
-          updates[key] = prevSettings[key];\r
-        }\r
-      }\r
-    } else {\r
-      Object.assign(updates, getResetListColumnPaddingBottomUpdates());\r
-    }\r
-\r
-    return updates;\r
-  }\r
-\r
-  const nextOrder = getColumnsOrder(nextSettings);\r
-  const prevOrder = getColumnsOrder(prevSettings);\r
-\r
-  if (!areStringArraysEqual(nextOrder, prevOrder)) {\r
-    return withColumnPaddingUpdates({\r
-      ...nextSettings,\r
-      ...getColumnLayoutUpdatesForOrderChange(nextOrder, prevOrder, prevSettings, columns),\r
-    });\r
-  }\r
-\r
-  if (nextContentWidth < prevContentWidth) {\r
-    if (typeof columns === 'number' && !isVerticalLayout) {\r
-      const storedWidths = getStoredColumnWidths({ ...prevSettings, ...nextSettings });\r
-\r
-      return withColumnPaddingUpdates({\r
-        ...nextSettings,\r
-        ...getListColumnWidthUpdatesForWrapperWidth(columns, nextContentWidth, storedWidths),\r
-      });\r
-    }\r
-  }\r
-\r
-  if (isVerticalLayout) {\r
-    const storedTextPaddingLR = typeof nextSettings.textPaddingLR === 'number'\r
-      ? nextSettings.textPaddingLR as number\r
-      : 0;\r
-    const maxAllowedPadding = Math.max(0, (nextContentWidth - minColumnWidth) / 2);\r
-\r
-    if (storedTextPaddingLR > maxAllowedPadding) {\r
-      return { ...nextSettings, textPaddingLR: maxAllowedPadding };\r
-    }\r
-\r
-    return nextSettings;\r
-  }\r
-\r
-  const storedWidths = getStoredColumnWidths({ ...prevSettings, ...nextSettings });\r
-  const prevEffectiveWidths = getEffectiveListColumnWidths(\r
-    columns,\r
-    prevContentWidth,\r
-    getStoredColumnWidths(prevSettings),\r
-  );\r
-  const nextEffectiveWidths = getEffectiveListColumnWidths(\r
-    columns,\r
-    nextContentWidth,\r
-    storedWidths,\r
-  );\r
-  const columnWidthDecreased = nextEffectiveWidths.some(\r
-    (width, index) => width < (prevEffectiveWidths[index] ?? width),\r
-  );\r
-  const columnWidthSettingChanged = COLUMN_WIDTH_KEYS.some((key) => {\r
-    const nextWidth = nextSettings[key];\r
-    const prevWidth = prevSettings[key];\r
-\r
-    return typeof nextWidth === 'number'\r
-      && typeof prevWidth === 'number'\r
-      && nextWidth !== prevWidth;\r
-  });\r
-\r
-  if (columnWidthDecreased || columnWidthSettingChanged) {\r
-    return withColumnPaddingUpdates(nextSettings);\r
-  }\r
-\r
-  return nextSettings;\r
-}\r
-\r
-function getColumnMaxWidth(\r
-  columnIndex: number,\r
-  resolvedWidths: number[],\r
-  storedWidths: number[],\r
-  wrapperWidth: number,\r
-): number {\r
-  const leftWidth = resolvedWidths\r
-    .slice(0, columnIndex)\r
-    .reduce((sum, width) => sum + width, 0);\r
-  const rightPreferredWidth = storedWidths\r
-    .slice(columnIndex + 1, resolvedWidths.length - 1)\r
-    .reduce((sum, width) => sum + width, 0);\r
-\r
-  return Math.max(\r
-    MIN_COLUMN_WIDTH,\r
-    wrapperWidth - leftWidth - rightPreferredWidth - MIN_COLUMN_WIDTH,\r
-  );\r
-}\r
-\r
-function randomBetween(min: number, max: number): number {\r
-  return Math.random() * (max - min) + min;\r
-}\r
-\r
-function getColumnWidthsFromSettings(\r
-  settings: ListSettings,\r
-): Record<ColumnWidthKey, number> {\r
-  return Object.fromEntries(\r
-    COLUMN_WIDTH_KEYS.map((key) => [\r
-      key,\r
-      typeof settings[key] === 'number' ? settings[key] as number : DEFAULT_COLUMN_WIDTHS[key],\r
-    ]),\r
-  ) as Record<ColumnWidthKey, number>;\r
-}\r
-\r
-function getNumericSettingValues<K extends ColumnPaddingLeftKey | ColumnPaddingRightKey | ColumnPaddingBottomKey>(\r
-  settings: ListSettings,\r
-  keys: readonly K[],\r
-  fallback = 0,\r
-): Record<K, number> {\r
-  return Object.fromEntries(\r
-    keys.map((key) => [\r
-      key,\r
-      typeof settings[key] === 'number' ? settings[key] as number : fallback,\r
-    ]),\r
-  ) as Record<K, number>;\r
-}\r
-\r
-function buildListColumns(\r
-  columnContentOrder: readonly typeof COLUMN_CONTENT_KEYS[number][],\r
-  columns: number,\r
-  columnWidthByKey: Record<ColumnWidthKey, number>,\r
-  columnPaddingLeftByKey: Record<ColumnPaddingLeftKey, number>,\r
-  columnPaddingRightByKey: Record<ColumnPaddingRightKey, number>,\r
-  columnPaddingBottomByKey: Record<ColumnPaddingBottomKey, number>,\r
-): ListItemColumn[] {\r
-  return columnContentOrder.slice(0, columns).map((key, index) => {\r
-    const paddingLeftKey = COLUMN_PADDING_LEFT_KEYS[index];\r
-    const paddingRightKey = COLUMN_PADDING_RIGHT_KEYS[index];\r
-    const paddingBottomKey = COLUMN_PADDING_BOTTOM_KEYS[index];\r
-\r
-    return {\r
-      key,\r
-      textPrefix: COLUMN_CONTENT_KEY_TO_TEXT_PREFIX[key],\r
-      widthKey: COLUMN_WIDTH_KEYS[index],\r
-      width: columnWidthByKey[COLUMN_WIDTH_KEYS[index]],\r
-      paddingLeftKey,\r
-      paddingRightKey,\r
-      paddingBottomKey,\r
-      paddingLeft: columnPaddingLeftByKey[paddingLeftKey],\r
-      paddingRight: columnPaddingRightByKey[paddingRightKey],\r
-      paddingBottom: columnPaddingBottomByKey[paddingBottomKey],\r
-    };\r
-  });\r
-}\r
-\r
-export function List({ settings, content, isEditor, isPreviewMode, activeEvent, layoutId, onUpdateSettings }: ListProps) {\r
-  const { prefix: P } = useScopedStyles();\r
-  const showControls = Boolean(isEditor && isPreviewMode);\r
-  const {\r
-    columns,\r
-    type,\r
-    wrapperWidth,\r
-    entriesCount,\r
-    cellMinHeight,\r
-    dividerWidth,\r
-    showVisibility,\r
-    cut,\r
-    showCut,\r
-    cutCellMinHeight,\r
-    cutLabel,\r
-    imageSize,\r
-    imageOnHover,\r
-    entryHoverEffect,\r
-    rowPaddingTop,\r
-    rowPaddingBottom,\r
-    rowPaddingTopB,\r
-    columnsOrder,\r
-    textPaddingLR,\r
-    textColor,\r
-    textFontFamily,\r
-    textFontSettings,\r
-    textFontSize,\r
-    textLineHeight,\r
-    textLetterSpacing,\r
-    textWordSpacing,\r
-    textTextAppearance,\r
-    backgroundColor,\r
-    dividerColor,\r
-    textHoverColor,\r
-    backgroundHoverColor,\r
-    dividerHoverColor,\r
-  } = settings;\r
-\r
-  const [visibleRowCount, setVisibleRowCount] = useState<number | undefined>(undefined);\r
-  const [hoverImage, setHoverImage] = useState<HoverImageState | null>(null);\r
-  const showHoverImage = imageOnHover === 'On';\r
-  const cutEnabled = (cut ?? 0) > 0;\r
-  const isVerticalLayout = type === 'B';\r
-  const containerRef = useRef<HTMLDivElement>(null);\r
-  const [designWidth, setDesignWidth] = useState(ARTICLE_DESIGN_WIDTH);\r
-  const minColumnWidth = getListMinColumnWidth(designWidth);\r
-\r
-  const storedTextPaddingLRMax = Math.max(0, ((wrapperWidth ?? 0) - minColumnWidth) / 2);\r
-  const effectiveTextPaddingLR = Math.min(textPaddingLR ?? 0, storedTextPaddingLRMax);\r
-  const textPaddingLRHandleWidth = Math.max(effectiveTextPaddingLR, COL_PADDING_HANDLE_WIDTH);\r
-  const textPaddingLRMaxFraction = ((wrapperWidth ?? 0) + minColumnWidth) / 2;\r
-\r
-  useLayoutEffect(() => {\r
-    if (!isEditor) {\r
-      setDesignWidth(ARTICLE_DESIGN_WIDTH);\r
-      return;\r
-    }\r
-\r
-    const syncDesignWidth = () => {\r
-      setDesignWidth(getEditorDesignWidth(containerRef.current));\r
-    };\r
-\r
-    syncDesignWidth();\r
-\r
-    const observed = containerRef.current;\r
-    if (!observed) {\r
-      return;\r
-    }\r
-\r
-    const observer = new ResizeObserver(syncDesignWidth);\r
-    observer.observe(observed);\r
-\r
-    let pageEl: HTMLElement | null = observed;\r
-    while (pageEl && !pageEl.style.getPropertyValue('--cntrl-article-width')) {\r
-      pageEl = pageEl.parentElement;\r
-    }\r
-    if (pageEl) {\r
-      observer.observe(pageEl);\r
-    }\r
-\r
-    return () => observer.disconnect();\r
-  }, [isEditor, layoutId]);\r
-\r
-  useEffect(() => {\r
-    setVisibleRowCount(undefined);\r
-  }, [cut, showCut, content, entriesCount]);\r
-\r
-  const colorVars = buildColorVars(P, {\r
-    textColor,\r
-    backgroundColor,\r
-    dividerColor,\r
-    textHoverColor,\r
-    backgroundHoverColor,\r
-    dividerHoverColor\r
-  }, COLOR_VAR_MAP, STATE_KEYS);\r
-\r
-  const stateClass = activeEvent && activeEvent !== 'default' ? \`\${P}-state-\${activeEvent}\` : '';\r
-  const entryHoverClass =\r
-    entryHoverEffect === 'Default'\r
-      ? \`\${P}-entry-hover-default\`\r
-      : entryHoverEffect === 'Blinds'\r
-        ? \`\${P}-entry-hover-blinds\`\r
-        : '';\r
-  const wrapperStateClasses = \`\${entryHoverClass} \${stateClass}\`.trim();\r
-  const showDividerTop = showVisibility?.[0] ?? false;\r
-  const showDividerBottom = showVisibility?.[1] ?? false;\r
-\r
-  const prevSettingsRef = useRef(settings);\r
-  const prevLayoutIdRef = useRef(layoutId);\r
-\r
-  useEffect(() => {\r
-    if (!onUpdateSettings || !isEditor) {\r
-      prevSettingsRef.current = settings;\r
-      prevLayoutIdRef.current = layoutId;\r
-      return;\r
-    }\r
-\r
-    if (prevLayoutIdRef.current !== layoutId) {\r
-      prevSettingsRef.current = settings;\r
-      prevLayoutIdRef.current = layoutId;\r
-      return;\r
-    }\r
-\r
-    const prevSettings = prevSettingsRef.current;\r
-    const updatedSettings = applyListSettingsChange(\r
-      settings,\r
-      prevSettings,\r
-      { designWidth },\r
-    );\r
-\r
-    prevSettingsRef.current = settings;\r
-\r
-    if (updatedSettings === settings) {\r
-      return;\r
-    }\r
-\r
-    onUpdateSettings(updatedSettings);\r
-  }, [settings, onUpdateSettings, isEditor, layoutId, designWidth]);\r
-\r
-  const columnWidthByKey = useMemo(\r
-    () => getColumnWidthsFromSettings(settings),\r
-    [\r
-      settings.AColumnWidth,\r
-      settings.BColumnWidth,\r
-      settings.CColumnWidth,\r
-      settings.DColumnWidth,\r
-      settings.EColumnWidth,\r
-    ],\r
-  );\r
-\r
-  const columnPaddingLeftByKey = useMemo(\r
-    () => getNumericSettingValues(settings, COLUMN_PADDING_LEFT_KEYS),\r
-    [\r
-      settings.AColumnPaddingLeft,\r
-      settings.BColumnPaddingLeft,\r
-      settings.CColumnPaddingLeft,\r
-      settings.DColumnPaddingLeft,\r
-      settings.EColumnPaddingLeft,\r
-    ],\r
-  );\r
-\r
-  const columnPaddingRightByKey = useMemo(\r
-    () => getNumericSettingValues(settings, COLUMN_PADDING_RIGHT_KEYS),\r
-    [\r
-      settings.AColumnPaddingRight,\r
-      settings.BColumnPaddingRight,\r
-      settings.CColumnPaddingRight,\r
-      settings.DColumnPaddingRight,\r
-      settings.EColumnPaddingRight,\r
-    ],\r
-  );\r
-\r
-  const columnPaddingBottomByKey = useMemo(\r
-    () => getNumericSettingValues(settings, COLUMN_PADDING_BOTTOM_KEYS),\r
-    [\r
-      settings.AColumnPaddingBottom,\r
-      settings.BColumnPaddingBottom,\r
-      settings.CColumnPaddingBottom,\r
-      settings.DColumnPaddingBottom,\r
-      settings.EColumnPaddingBottom,\r
-    ],\r
-  );\r
-\r
-  const columnContentOrder = useMemo((): typeof COLUMN_CONTENT_KEYS[number][] => {\r
-    if (Array.isArray(columnsOrder) && columnsOrder.length > 0) {\r
-      return columnsOrder as typeof COLUMN_CONTENT_KEYS[number][];\r
-    }\r
-    return [...COLUMN_CONTENT_KEYS];\r
-  }, [columnsOrder]);\r
-\r
-  const listColumns = useMemo(\r
-    () => buildListColumns(\r
-      columnContentOrder,\r
-      columns,\r
-      columnWidthByKey,\r
-      columnPaddingLeftByKey,\r
-      columnPaddingRightByKey,\r
-      columnPaddingBottomByKey,\r
-    ),\r
-    [columnContentOrder, columns, columnWidthByKey, columnPaddingLeftByKey, columnPaddingRightByKey, columnPaddingBottomByKey],\r
-  );\r
-\r
-  const resolvedContentWidth = getListEffectiveContentWidth(settings);\r
-\r
-  const storedColumnWidths = useMemo(\r
-    () => COLUMN_WIDTH_KEYS.slice(0, columns).map((key) => columnWidthByKey[key]),\r
-    [columns, columnWidthByKey],\r
-  );\r
-\r
-  const resolvedColumnWidths = useMemo(\r
-    () => resolveListColumnWidths(columns, resolvedContentWidth, columnWidthByKey),\r
-    [columns, resolvedContentWidth, columnWidthByKey],\r
-  );\r
-\r
-  const effectiveColumnWidths = useMemo(\r
-    () => getEffectiveListColumnWidths(columns, resolvedContentWidth, columnWidthByKey),\r
-    [columns, resolvedContentWidth, columnWidthByKey],\r
-  );\r
-\r
-  const effectiveColumnPaddings = useMemo(\r
-    () =>\r
-      listColumns.map((col, index) =>\r
-        resolveListColumnPadding(\r
-          effectiveColumnWidths[index] ?? 0,\r
-          col.paddingLeft,\r
-          col.paddingRight,\r
-        )),\r
-    [listColumns, effectiveColumnWidths],\r
-  );\r
-\r
-  const allRows: ListItemRow[] = useMemo(() => {\r
-    const resEntriesCount = entriesCount === 0 ? Infinity : entriesCount;\r
-    const items = (content ?? []).slice(0, resEntriesCount);\r
-\r
-    return items.map((item, index) => ({\r
-      id: index,\r
-      cells: Object.fromEntries(\r
-        COLUMN_CONTENT_KEYS.map((key) => [key, item[key] ?? ''])\r
-      ),\r
-      image: item.image,\r
-      link: item.link,\r
-    }));\r
-  }, [content, entriesCount]);\r
-\r
-  const effectiveVisibleCount = cutEnabled\r
-    ? (visibleRowCount ?? cut)\r
-    : allRows.length;\r
-\r
-  const visibleRows = useMemo(() => {\r
-    if (cutEnabled) {\r
-      return allRows.slice(0, effectiveVisibleCount);\r
-    }\r
-    return allRows;\r
-  }, [allRows, cutEnabled, effectiveVisibleCount]);\r
-\r
-  const showCutLabel = cutEnabled && effectiveVisibleCount < allRows.length;\r
-\r
-  const hasBetweenItemDividers = visibleRows.length > 1 || showCutLabel;\r
-  const dividerClassNames = [\r
-    showDividerTop ? \`\${P}-divider-top\` : '',\r
-    showDividerBottom || hasBetweenItemDividers ? \`\${P}-divider-bottom\` : '',\r
-  ].filter(Boolean).join(' ');\r
-\r
-  const handleShowMore = () => {\r
-    const currentVisible = visibleRowCount ?? cut;\r
-    if (!showCut) {\r
-      setVisibleRowCount(allRows.length);\r
-      return;\r
-    }\r
-    setVisibleRowCount(Math.min(currentVisible + showCut, allRows.length));\r
-  };\r
-\r
-  const scaled = (v: number) => scalingValue(v, isEditor ?? false);\r
-  const resolvedRowPaddingTop = isVerticalLayout\r
-    ? (rowPaddingTopB ?? 0)\r
-    : (rowPaddingTop ?? 0);\r
-  const resolvedRowPaddingBottom = rowPaddingBottom ?? 0;\r
-  const resolvedCellMinHeight = cellMinHeight ?? 0;\r
-  const rowPaddingTopControlKey = isVerticalLayout ? 'rowPaddingTopB' : 'rowPaddingTop';\r
-  const firstColumn = listColumns[0];\r
-  const lastColumn = listColumns[listColumns.length - 1];\r
-  const firstColumnEffectivePadding = effectiveColumnPaddings[0];\r
-  const lastColumnEffectivePadding = effectiveColumnPaddings[effectiveColumnPaddings.length - 1];\r
-  const firstColumnPaddingLeftWidth = firstColumn && firstColumnEffectivePadding\r
-    ? Math.max(firstColumnEffectivePadding.paddingLeft, COL_PADDING_HANDLE_WIDTH)\r
-    : 0;\r
-  const lastColumnPaddingRightWidth = lastColumn && lastColumnEffectivePadding\r
-    ? Math.max(lastColumnEffectivePadding.paddingRight, COL_PADDING_HANDLE_WIDTH)\r
-    : 0;\r
-  const columnsRightEdge = resolvedContentWidth;\r
-\r
-  const getHoverImagePosition = (event: React.MouseEvent) => {\r
-    const container = containerRef.current;\r
-    if (!container) {\r
-      return { x: 0, y: 0 };\r
-    }\r
-\r
-    const rect = container.getBoundingClientRect();\r
-    return {\r
-      x: event.clientX - rect.left + HOVER_IMAGE_CURSOR_OFFSET,\r
-      y: event.clientY - rect.top + HOVER_IMAGE_CURSOR_OFFSET,\r
-    };\r
-  };\r
-\r
-  const handleRowMouseEnter = (row: ListItemRow, event: React.MouseEvent) => {\r
-    if (!showHoverImage) return;\r
-\r
-    const image = row.image;\r
-    if (!image?.url) {\r
-      setHoverImage(null);\r
-      return;\r
-    }\r
-\r
-    const { x, y } = getHoverImagePosition(event);\r
-    const minWidth = imageSize?.min ?? 80;\r
-    const maxWidth = imageSize?.max ?? 320;\r
-    const widthPx = hoverImage?.rowId === row.id\r
-      ? hoverImage.widthPx\r
-      : randomBetween(minWidth, maxWidth);\r
-\r
-    setHoverImage({\r
-      rowId: row.id,\r
-      url: image.url,\r
-      objectFit: image.objectFit ?? 'cover',\r
-      widthPx,\r
-      x,\r
-      y,\r
-    });\r
-  };\r
-\r
-  const handleWrapperMouseMove = (event: React.MouseEvent) => {\r
-    if (!showHoverImage || !hoverImage) return;\r
-\r
-    const { x, y } = getHoverImagePosition(event);\r
-    setHoverImage((prev) => {\r
-      if (!prev) return prev;\r
-      if (prev.x === x && prev.y === y) return prev;\r
-      return { ...prev, x, y };\r
-    });\r
-  };\r
-\r
-  const handleWrapperMouseLeave = () => {\r
-    setHoverImage(null);\r
-  };\r
-\r
-  const hasBaselineColumn = useMemo(\r
-    () =>\r
-      !isVerticalLayout &&\r
-      COLUMN_TEXT_PREFIXES.some((prefix) => {\r
-        const columnLetter = prefix.charAt(0);\r
-        const valign = settings[\`\${prefix}VerticalAlign\` as ListColumnVerticalAlignKey];\r
-        return isActiveBaselineVAlign(valign, settings, columnLetter);\r
-      }),\r
-    [\r
-      isVerticalLayout,\r
-      settings,\r
-      settings.AColumnVerticalAlign,\r
-      settings.BColumnVerticalAlign,\r
-      settings.CColumnVerticalAlign,\r
-      settings.DColumnVerticalAlign,\r
-      settings.EColumnVerticalAlign,\r
-    ],\r
-  );\r
-  \r
-  useLayoutEffect(() => {\r
-    const container = containerRef.current;\r
-    if (!container) return;\r
-\r
-    const clearBaselineStyles = () => {\r
-      container.querySelectorAll<HTMLElement>('[data-list-col]').forEach((el) => {\r
-        el.style.transform = '';\r
-        const listCol = el.querySelector<HTMLElement>(\`.\${P}-list-col\`);\r
-        if (listCol) {\r
-          listCol.style.minHeight = '';\r
-          listCol.style.height = '';\r
-        }\r
-        const title = el.querySelector<HTMLElement>(\`.\${P}-list-col-title\`);\r
-        if (title) {\r
-          title.style.transform = '';\r
-        }\r
-      });\r
-    };\r
-\r
-    if (isVerticalLayout || !hasBaselineColumn) {\r
-      clearBaselineStyles();\r
-      return;\r
-    }\r
-\r
-    const applyBaselines = () => {\r
-      container.querySelectorAll<HTMLElement>('[data-list-row]').forEach((rowEl) => {\r
-        const cols = Array.from(rowEl.querySelectorAll<HTMLElement>('[data-list-col]'));\r
-        cols.forEach((el) => {\r
-          el.style.transform = '';\r
-          const listCol = el.querySelector<HTMLElement>(\`.\${P}-list-col\`);\r
-          if (listCol) {\r
-            listCol.style.minHeight = '';\r
-            listCol.style.height = '';\r
-          }\r
-          const title = el.querySelector<HTMLElement>(\`.\${P}-list-col-title\`);\r
-          if (title) {\r
-            title.style.transform = '';\r
-          }\r
-        });\r
-\r
-        syncRowListColHeights(rowEl, cols, \`\${P}-list-col\`);\r
-        void rowEl.offsetHeight;\r
-        const rowTop = rowEl.getBoundingClientRect().top;\r
-\r
-        type ColInfo = {\r
-          el: HTMLElement;\r
-          titleEl: HTMLElement | null;\r
-          letter: string;\r
-          kind: string;\r
-          anchor: string | null;\r
-        };\r
-\r
-        const probeClassName = \`\${P}-baseline-probe\`;\r
-        const byLetter = new Map<string, ColInfo>();\r
-        const infos: ColInfo[] = cols.map((el) => {\r
-          const titleEl = el.querySelector<HTMLElement>(\`.\${P}-list-col-title\`);\r
-          const info: ColInfo = {\r
-            el,\r
-            titleEl,\r
-            letter: el.getAttribute('data-col-letter') ?? '',\r
-            kind: el.getAttribute('data-valign') ?? 'top',\r
-            anchor: el.getAttribute('data-valign-anchor'),\r
-          };\r
-          byLetter.set(info.letter, info);\r
-          return info;\r
-        });\r
-\r
-        const finalBaseline = new Map<string, number>();\r
-        const resolve = (info: ColInfo, stack: Set<string>): number => {\r
-          const cached = finalBaseline.get(info.letter);\r
-          if (cached !== undefined) return cached;\r
-\r
-          const anchor = info.anchor ? byLetter.get(info.anchor) : undefined;\r
-          if (info.kind !== 'baseline' || !anchor || stack.has(info.letter)) {\r
-            const baseline = measureColumnFirstLineBaselineOffset(\r
-              info,\r
-              rowTop,\r
-              \`\${P}-list-col\`,\r
-              probeClassName,\r
-            );\r
-            finalBaseline.set(info.letter, baseline);\r
-            return baseline;\r
-          }\r
-\r
-          stack.add(info.letter);\r
-          const anchorBaseline = resolve(anchor, stack);\r
-          stack.delete(info.letter);\r
-\r
-          const followerNatural = measureColumnFirstLineBaselineOffset(\r
-            info,\r
-            rowTop,\r
-            \`\${P}-list-col\`,\r
-            probeClassName,\r
-          );\r
-          const shift = anchorBaseline - followerNatural;\r
-          applyBaselineTitleShift(info.titleEl, shift);\r
-\r
-          const result = measureColumnFirstLineBaselineOffset(\r
-            info,\r
-            rowTop,\r
-            \`\${P}-list-col\`,\r
-            probeClassName,\r
-          );\r
-          finalBaseline.set(info.letter, result);\r
-          return result;\r
-        };\r
-\r
-        infos.forEach((info) => resolve(info, new Set<string>()));\r
-      });\r
-    };\r
-\r
-    applyBaselines();\r
-\r
-    const observer = new ResizeObserver(() => applyBaselines());\r
-    observer.observe(container);\r
-\r
-    let cancelled = false;\r
-    if (typeof document !== 'undefined' && document.fonts?.ready) {\r
-      document.fonts.ready.then(() => {\r
-        if (!cancelled) applyBaselines();\r
-      });\r
-    }\r
-\r
-    return () => {\r
-      cancelled = true;\r
-      observer.disconnect();\r
-      clearBaselineStyles();\r
-    };\r
-  }, [\r
-    hasBaselineColumn,\r
-    isVerticalLayout,\r
-    settings,\r
-    content,\r
-    designWidth,\r
-    visibleRows,\r
-    effectiveColumnWidths,\r
-  ]);\r
-\r
-  return (\r
-    <>\r
-      <style dangerouslySetInnerHTML={{ __html: getCSS(P) }} />\r
-      <div style={colorVars}>\r
-        <div\r
-          ref={containerRef}\r
-          className={\`\${P}-wrapper \${wrapperStateClasses}\${dividerClassNames ? \` \${dividerClassNames}\` : ''}\${isVerticalLayout ? \` \${P}-type-b\` : ''}\`.trim()}\r
-          style={{\r
-            width: scalingValue(wrapperWidth ?? 0, isEditor),\r
-          }}\r
-          onMouseMove={showHoverImage ? handleWrapperMouseMove : undefined}\r
-          onMouseLeave={showHoverImage ? handleWrapperMouseLeave : undefined}\r
-        >\r
-          <div style={{ width: '100%' }}>\r
-            {visibleRows.map((row, rowIdx) => {\r
-              const hasLink = (row.link?.length ?? 0) > 0;\r
-              const RowElement = hasLink ? 'a' : 'div';\r
-              const rowStyle = getEntryDividerWidths(\r
-                rowIdx,\r
-                visibleRows.length,\r
-                showDividerTop,\r
-                showDividerBottom,\r
-                showCutLabel,\r
-                dividerWidth ?? 0,\r
-                isEditor ?? false,\r
-              );\r
-\r
-              return (\r
-              <RowElement\r
-                key={row.id}\r
-                className={\`\${P}-list-item\${hasLink ? \` \${P}-list-item-has-link\` : ''}\`}\r
-                {...(hasLink ? { href: row.link, target: '_blank' } : {})}\r
-                style={rowStyle}\r
-                onMouseEnter={showHoverImage ? (event) => handleRowMouseEnter(row, event) : undefined}\r
-              >\r
-                {(resolvedRowPaddingTop > 0 || showControls) && (\r
-                  <div\r
-                    {...(showControls ? {\r
-                      'data-controls': rowPaddingTopControlKey,\r
-                      'data-controls-axis': 'y',\r
-                      'data-controls-min': '0',\r
-                    } : {})}\r
-                    className={\`\${P}-row-padding-handle\`}\r
-                    style={{ height: scaled(resolvedRowPaddingTop) }}\r
-                  />\r
-                )}\r
-                <div\r
-                  className={\`\${P}-list-cols-row\${isVerticalLayout ? '' : \` \${P}-list-cols-row-h\`}\`}\r
-                  {...(isVerticalLayout ? {} : { 'data-list-row': '' })}\r
-                  style={isVerticalLayout ? undefined : { minHeight: scaled(resolvedCellMinHeight) }}\r
-                >\r
-                  {listColumns.map((col, colIndex) => {\r
-                    const isLastColumn = colIndex === listColumns.length - 1;\r
-                    const effectivePadding = effectiveColumnPaddings[colIndex];\r
-                    const columnPaddingBottom = col.paddingBottom;\r
-                    const hasColumnText = hasListColumnText(row.cells[col.key]);\r
-                    const showColumnPaddingBottom = isVerticalLayout\r
-                      && hasColumnText\r
-                      && (columnPaddingBottom > 0 || showControls);\r
-                    const columnSizeStyle = isVerticalLayout\r
-                      ? { minHeight: scaled(resolvedCellMinHeight) }\r
-                      : (isLastColumn ? {} : { width: scaled(effectiveColumnWidths[colIndex]) });\r
-                    const columnPaddingStyle = isVerticalLayout\r
-                      ? {\r
-                        paddingLeft: scaled(effectiveTextPaddingLR),\r
-                        paddingRight: scaled(effectiveTextPaddingLR),\r
-                      }\r
-                      : {\r
-                        paddingLeft: scaled(effectivePadding.paddingLeft),\r
-                        paddingRight: scaled(effectivePadding.paddingRight),\r
-                      };\r
-                    const columnLetter = col.textPrefix.charAt(0);\r
-                    const vAlign = isVerticalLayout\r
-                      ? { kind: 'top' as const }\r
-                      : resolveColumnVerticalAlign(\r
-                        settings[\`\${col.textPrefix}VerticalAlign\` as ListColumnVerticalAlignKey],\r
-                        settings,\r
-                        columnLetter,\r
-                      );\r
-\r
-                    return (\r
-                      <div\r
-                        key={col.key}\r
-                        {...(isVerticalLayout\r
-                          ? {}\r
-                          : {\r
-                            'data-list-col': '',\r
-                            'data-col-letter': columnLetter,\r
-                            'data-valign': vAlign.kind,\r
-                            ...(vAlign.kind === 'baseline'\r
-                              ? { 'data-valign-anchor': vAlign.anchorLetter }\r
-                              : {}),\r
-                          })}\r
-                      >\r
-                        <div\r
-                          className={\`\${P}-list-col\${isLastColumn ? \` \${P}-list-col-last\` : ''}\`}\r
-                          style={{\r
-                            ...columnPaddingStyle,\r
-                            ...columnSizeStyle,\r
-                          }}\r
-                          data-test={col.width}\r
-                        >\r
-                          <span\r
-                            className={getListColumnTitleClassName(\r
-                              settings,\r
-                              col.textPrefix,\r
-                              \`\${P}-list-col-title\`,\r
-                              \`\${P}-text-tight-leading\`,\r
-                            )}\r
-                            style={{\r
-                              ...listColumnTextFieldsToCss(resolveListColumnTextFields(settings, col.textPrefix), isEditor),\r
-                              ...getListColumnTitleVars(settings, col.textPrefix, P, isEditor),\r
-                              ...(!isVerticalLayout ? vAlignToTitleStyle(vAlign.kind) : {}),\r
-                            }}\r
-                          >\r
-                            {row.cells[col.key] ?? null}\r
-                          </span>\r
-                        </div>\r
-                        {showColumnPaddingBottom && (\r
-                          <div\r
-                            {...(showControls ? {\r
-                              'data-controls': col.paddingBottomKey,\r
-                              'data-controls-axis': 'y',\r
-                              'data-controls-min': '0',\r
-                            } : {})}\r
-                            className={\`\${P}-row-padding-handle\`}\r
-                            style={{ height: scaled(columnPaddingBottom) }}\r
-                          />\r
-                        )}\r
-                      </div>\r
-                    );\r
-                  })}\r
-                </div>\r
-                {!isVerticalLayout && (resolvedRowPaddingBottom > 0 || showControls) && (\r
-                  <div\r
-                    {...(showControls ? {\r
-                      'data-controls': 'rowPaddingBottom',\r
-                      'data-controls-axis': 'y',\r
-                      'data-controls-min': '0',\r
-                    } : {})}\r
-                    className={\`\${P}-row-padding-handle\`}\r
-                    style={{ height: scaled(resolvedRowPaddingBottom) }}\r
-                  />\r
-                )}\r
-              </RowElement>\r
-            );\r
-            })}\r
-            {showCutLabel && (\r
-              <button\r
-                type="button"\r
-                className={\`\${P}-cut-item\`}\r
-                style={{\r
-                  minHeight: scaled(cutCellMinHeight ?? 0),\r
-                  ...getCutItemDividerWidths(\r
-                    showDividerBottom,\r
-                    dividerWidth ?? 0,\r
-                    isEditor ?? false,\r
-                  ),\r
-                }}\r
-                onClick={handleShowMore}\r
-              >\r
-                <div\r
-                  className={\`\${P}-list-cols-row\`}\r
-                  style={\r
-                    isVerticalLayout\r
-                      ? {\r
-                        paddingLeft: scaled(effectiveTextPaddingLR),\r
-                        paddingRight: scaled(effectiveTextPaddingLR),\r
-                      }\r
-                      : { justifyContent: 'center' }\r
-                  }\r
-                >\r
-                  <span\r
-                    className={getListColumnTitleClassName(\r
-                      settings,\r
-                      CUT_LABEL_TEXT_PREFIX,\r
-                      \`\${P}-cut-label\`,\r
-                      \`\${P}-text-tight-leading\`,\r
-                    )}\r
-                    style={{\r
-                      ...listColumnTextFieldsToCss(resolveListColumnTextFields(settings, CUT_LABEL_TEXT_PREFIX), isEditor),\r
-                      ...getListColumnTitleVars(settings, CUT_LABEL_TEXT_PREFIX, P, isEditor),\r
-                    }}\r
-                  >\r
-                    {cutLabel}\r
-                  </span>\r
-                </div>\r
-              </button>\r
-            )}\r
-          </div>\r
-          {showControls && !isVerticalLayout && firstColumn && lastColumn && (\r
-            <div key="column-edge-padding-handles" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\r
-              <div\r
-                data-controls={firstColumn.paddingLeftKey}\r
-                data-controls-axis="x"\r
-                data-controls-variant="column-padding"\r
-                data-controls-min="0"\r
-                data-controls-max-fraction={String(\r
-                  effectiveColumnWidths[0] - (firstColumnEffectivePadding?.paddingRight ?? 0),\r
-                )}\r
-                data-controls-static-handle=""\r
-                className={\`\${P}-padding-control-handle\`}\r
-                style={{\r
-                  position: 'absolute',\r
-                  top: 0,\r
-                  left: 0,\r
-                  width: scaled(firstColumnPaddingLeftWidth),\r
-                  height: '100%',\r
-                  pointerEvents: 'auto',\r
-                  zIndex: 2,\r
-                }}\r
-              />\r
-              <div\r
-                data-controls={lastColumn.paddingRightKey}\r
-                data-controls-axis="x"\r
-                data-controls-variant="column-padding"\r
-                data-controls-reverse=""\r
-                data-controls-min="0"\r
-                data-controls-max-fraction={String(\r
-                  effectiveColumnWidths[listColumns.length - 1]\r
-                    - (lastColumnEffectivePadding?.paddingLeft ?? 0),\r
-                )}\r
-                data-controls-static-handle=""\r
-                className={\`\${P}-padding-control-handle\`}\r
-                style={{\r
-                  position: 'absolute',\r
-                  top: 0,\r
-                  left: scaled(columnsRightEdge - lastColumnPaddingRightWidth),\r
-                  width: scaled(lastColumnPaddingRightWidth),\r
-                  height: '100%',\r
-                  pointerEvents: 'auto',\r
-                  zIndex: 2,\r
-                }}\r
-              />\r
-            </div>\r
-          )}\r
-          {showControls && !isVerticalLayout && listColumns.slice(0, -1).map((col, colIndex) => {\r
-            const nextCol = listColumns[colIndex + 1];\r
-            const maxColumnWidth = getColumnMaxWidth(\r
-              colIndex,\r
-              resolvedColumnWidths,\r
-              storedColumnWidths,\r
-              resolvedContentWidth,\r
-            );\r
-            const boundaryOffset = resolvedColumnWidths.slice(0, colIndex + 1).reduce((sum, width) => sum + width, 0);\r
-            const colEffectivePadding = effectiveColumnPaddings[colIndex];\r
-            const nextColEffectivePadding = effectiveColumnPaddings[colIndex + 1];\r
-            const paddingRightWidth = Math.max(\r
-              colEffectivePadding.paddingRight,\r
-              COL_PADDING_HANDLE_WIDTH,\r
-            );\r
-            const paddingLeftWidth = Math.max(\r
-              nextColEffectivePadding.paddingLeft,\r
-              COL_PADDING_HANDLE_WIDTH,\r
-            );\r
-            const columnWidthHandleOffset = boundaryOffset - COL_RESIZE_HANDLE_WIDTH / 2;\r
-\r
-            return (\r
-              <div key={\`\${col.widthKey}-junction\`} style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\r
-                <div\r
-                  data-controls={col.paddingRightKey}\r
-                  data-controls-axis="x"\r
-                  data-controls-variant="column-padding"\r
-                  data-controls-reverse=""\r
-                  data-controls-min="0"\r
-                  data-controls-max-fraction={String(\r
-                    effectiveColumnWidths[colIndex] - colEffectivePadding.paddingLeft,\r
-                  )}\r
-                  data-controls-static-handle=""\r
-                  className={\`\${P}-padding-control-handle\`}\r
-                  style={{\r
-                    position: 'absolute',\r
-                    top: 0,\r
-                    left: scaled(boundaryOffset - paddingRightWidth),\r
-                    width: scaled(paddingRightWidth),\r
-                    height: '100%',\r
-                    pointerEvents: 'auto',\r
-                    zIndex: 2,\r
-                  }}\r
-                />\r
-                <div\r
-                  data-controls={col.widthKey}\r
-                  data-controls-axis="x"\r
-                  data-controls-min={String(MIN_COLUMN_WIDTH_PX)}\r
-                  data-controls-max-fraction={String(maxColumnWidth)}\r
-                  data-controls-variant="column-width"\r
-                  className={\`\${P}-col-resize-handle\`}\r
-                  style={{\r
-                    position: 'absolute',\r
-                    top: '0px',\r
-                    left: scaled(columnWidthHandleOffset),\r
-                    width: scaled(COL_RESIZE_HANDLE_WIDTH),\r
-                    height: 'calc(100%)',\r
-                    pointerEvents: 'auto',\r
-                    zIndex: 4,\r
-                  }}\r
-                />\r
-                <div\r
-                  data-controls={nextCol.paddingLeftKey}\r
-                  data-controls-axis="x"\r
-                  data-controls-variant="column-padding"\r
-                  data-controls-min="0"\r
-                  data-controls-max-fraction={String(\r
-                    effectiveColumnWidths[colIndex + 1] - nextColEffectivePadding.paddingRight,\r
-                  )}\r
-                  data-controls-static-handle=""\r
-                  className={\`\${P}-padding-control-handle\`}\r
-                  style={{\r
-                    position: 'absolute',\r
-                    top: 0,\r
-                    left: scaled(boundaryOffset),\r
-                    width: scaled(paddingLeftWidth),\r
-                    height: '100%',\r
-                    pointerEvents: 'auto',\r
-                    zIndex: 2,\r
-                  }}\r
-                />\r
-              </div>\r
-            );\r
-          })}\r
-          {showControls && isVerticalLayout && (\r
-            <div key="text-padding-lr-handles" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\r
-              <div\r
-                data-controls="textPaddingLR"\r
-                data-controls-paired=""\r
-                data-controls-axis="x"\r
-                data-controls-min="0"\r
-                data-controls-max-fraction={String(textPaddingLRMaxFraction)}\r
-                data-controls-static-handle=""\r
-                className={\`\${P}-text-padding-lr-handle\`}\r
-                style={{\r
-                  position: 'absolute',\r
-                  top: 0,\r
-                  left: 0,\r
-                  width: scaled(textPaddingLRHandleWidth),\r
-                  height: '100%',\r
-                  pointerEvents: 'auto',\r
-                  zIndex: 2,\r
-                }}\r
-              />\r
-              <div\r
-                data-controls="textPaddingLR"\r
-                data-controls-paired=""\r
-                data-controls-axis="x"\r
-                data-controls-reverse=""\r
-                data-controls-min="0"\r
-                data-controls-max-fraction={String(textPaddingLRMaxFraction)}\r
-                data-controls-static-handle=""\r
-                className={\`\${P}-text-padding-lr-handle\`}\r
-                style={{\r
-                  position: 'absolute',\r
-                  top: 0,\r
-                  left: scaled(Math.max(textPaddingLRHandleWidth, resolvedContentWidth - textPaddingLRHandleWidth)),\r
-                  width: scaled(textPaddingLRHandleWidth),\r
-                  height: '100%',\r
-                  pointerEvents: 'auto',\r
-                  zIndex: 2,\r
-                }}\r
-              />\r
-            </div>\r
-          )}\r
-          {showHoverImage && hoverImage && (\r
-            <img\r
-              className={\`\${P}-hover-image\`}\r
-              src={hoverImage.url}\r
-              alt=""\r
-              style={{\r
-                width: sv(hoverImage.widthPx),\r
-                objectFit: hoverImage.objectFit,\r
-                left: hoverImage.x,\r
-                top: hoverImage.y,\r
-              }}\r
-            />\r
-          )}\r
-        </div>\r
-      </div>\r
-    </>\r
-  );\r
-}\r
+`}const Pt=["AColumn","BColumnWidth","CColumnWidth","DColumnWidth","EColumnWidth"],eo=["AColumn","BColumn","CColumn","DColumn","EColumn"],vt="cutLabel",Pn=[...eo,vt],to=["A","B","C","D","E"];function Ai(e){return`${e}ColumnVerticalAlign`}const Xc=["Top","Center","Bottom"];function Zc(e){const t=String(e??"Top").trim();return t.toLowerCase().startsWith("baseline")?!1:t==="Top"||t==="Center"||t==="Bottom"}function Jc(e){const t=String(e??"").trim();if(!t.toLowerCase().startsWith("baseline"))return null;const n=t.slice(-1).toUpperCase();return to.includes(n)?n:null}function Ri(e,t,n){const r=Jc(e);return r?r===t?!1:Zc(n[Ai(r)]):!0}function Rr(e){const t=String(e??"Top").trim();if(t.toLowerCase().startsWith("baseline")){const n=t.slice(-1).toUpperCase();return to.includes(n)?{kind:"baseline",anchorLetter:n}:{kind:"top"}}return t==="Center"?{kind:"center"}:t==="Bottom"?{kind:"bottom"}:{kind:"top"}}function Qc(e,t,n){if(Ii(e,t,n))return Rr(e);const r=Rr(e);return r.kind==="baseline"?{kind:"top"}:r}function Ii(e,t,n){return Ri(e,n,t)?Rr(e).kind==="baseline":!1}function ed(e){if(e.type==="B")return null;const t={};let n=!1;for(const r of to){const o=Ai(r),s=e[o];Ri(s,r,e)||(t[o]="Top",n=!0)}return n?t:null}function td(e){return e==="center"?{marginTop:"auto",marginBottom:"auto"}:e==="bottom"?{marginTop:"auto"}:{}}function nd(e,t){const n=document.createElement("i");n.className=t,n.setAttribute("aria-hidden","true"),e.prepend(n);const{top:r}=e.getBoundingClientRect(),{bottom:o}=n.getBoundingClientRect(),s=o-r;return n.remove(),s}function br(e,t,n,r){const o=e.titleEl;if(!o)return 0;const s=o.closest(`.${n}`);if(!s)return 0;const i=nd(o,r);if(e.kind==="baseline")return o.getBoundingClientRect().top-t+i;const a=s.getBoundingClientRect(),c=o.getBoundingClientRect().height;let u=0;return e.kind==="center"?u=(a.height-c)/2:e.kind==="bottom"&&(u=a.height-c),a.top-t+u+i}function rd(e,t,n){const r=e.getBoundingClientRect().height;return r<=0?0:(t.forEach(o=>{const s=o.querySelector(`.${n}`);s&&(s.style.minHeight=`${r}px`,s.style.height=`${r}px`)}),e.offsetHeight,r)}function od(e,t){return!e||!t?(e&&(e.style.transform=""),0):(e.style.transform=`translateY(${t}px)`,t)}const id={AColumn:"AColumn",BColumnWidth:"BColumn",CColumnWidth:"CColumn",DColumnWidth:"DColumn",EColumnWidth:"EColumn"},ad=["textFontFamily","textFontSettings","textFontSize","textLineHeight","textLetterSpacing","textWordSpacing","textTextAppearance"];function we(e,t){return`${e}${t.replace(/^text/,"Text")}`}function Zn(e,t){const n=r=>{const o=we(t,r),s=e[o];return s!==void 0?s:e[r]};return{textFontFamily:n("textFontFamily")??"Arial",textFontSettings:n("textFontSettings")??{fontWeight:400,fontStyle:"normal"},textFontSize:n("textFontSize"),textLineHeight:n("textLineHeight"),textLetterSpacing:n("textLetterSpacing")??0,textWordSpacing:n("textWordSpacing")??0,textTextAppearance:n("textTextAppearance"),textColor:e.textColor}}function Ho(e,t){var r,o;const n={fontSettings:{fontFamily:e.textFontFamily,fontWeight:((r=e.textFontSettings)==null?void 0:r.fontWeight)??400,fontStyle:((o=e.textFontSettings)==null?void 0:o.fontStyle)??"normal"},fontSize:e.textFontSize??.01,lineHeight:e.textLineHeight,letterSpacing:e.textLetterSpacing,wordSpacing:e.textWordSpacing,textAppearance:e.textTextAppearance,color:e.textColor??"#767676"};return yt(Je(n,t))}function Oo(e,t,n,r){const o=Zn(e,t),s=o.textFontSize??.01,i=o.textLineHeight;return i!==void 0&&i<s?`${n} ${r}`:n}function Bo(e,t,n,r){const o=Zn(e,t),s=o.textFontSize??.01,i=o.textLineHeight;return i===void 0||i>=s?{}:{[`--${n}-title-leading-gap`]:T.scalingValue((s-i)/2,r)}}function sd(e,t){const n={};let r=!1;for(const o of ad)if(e[o]!==t[o]&&e[o]!==void 0){r=!0;for(const s of Pn)Object.assign(n,{[we(s,o)]:e[o]})}return r?n:null}const nt=["AColumnWidth","BColumnWidth","CColumnWidth","DColumnWidth","EColumnWidth"],Zt=["AColumnPaddingLeft","BColumnPaddingLeft","CColumnPaddingLeft","DColumnPaddingLeft","EColumnPaddingLeft"],Jt=["AColumnPaddingRight","BColumnPaddingRight","CColumnPaddingRight","DColumnPaddingRight","EColumnPaddingRight"],Qt=["AColumnPaddingBottom","BColumnPaddingBottom","CColumnPaddingBottom","DColumnPaddingBottom","EColumnPaddingBottom"],ld={textColor:"text-color",backgroundColor:"background-color",dividerColor:"divider-color",textHoverColor:"text-hover-color",backgroundHoverColor:"background-hover-color",dividerHoverColor:"divider-hover-color"},cd=["hover","focus","filled","success","error"],Vo=.004,ln=.004,no=50,bn=1440,xn=no/bn;function Wi(e){const t=typeof e=="number"&&e>0?e:bn;return no/t}function dd(e){let t=e??null;for(;t;){const n=t.style.getPropertyValue("--cntrl-article-width").trim();if(n){const o=parseFloat(n);if(Number.isFinite(o)&&o>0)return o}const r=getComputedStyle(t).getPropertyValue("--cntrl-article-width").trim();if(r){const o=parseFloat(r);if(Number.isFinite(o)&&o>0)return o}t=t.parentElement}return bn}const Fi={AColumnWidth:.02,BColumnWidth:.02,CColumnWidth:.02,DColumnWidth:.02,EColumnWidth:.02};function jn(e){const t=typeof e.wrapperWidth=="number"?e.wrapperWidth:1;return Math.max(0,t)}function ud(e,t=1){const n=t/e;return Object.fromEntries(nt.map(r=>[r,n]))}function pd(){return Object.fromEntries([...Zt.map(e=>[e,0]),...Jt.map(e=>[e,0])])}function md(){return Object.fromEntries(Qt.map(e=>[e,0]))}function Nn(e){return Object.fromEntries(nt.map(t=>[t,typeof e[t]=="number"?e[t]:Fi[t]]))}function ki(e,t,n){const r=e-xn,o=t+n;if(o<=0||o<=r)return{paddingLeft:t,paddingRight:n};if(r<=0)return{paddingLeft:0,paddingRight:0};const s=r/o;return{paddingLeft:t*s,paddingRight:n*s}}function Kn(e,t,n){const r=ro(e,t,n);if(e<=0)return[];const o=r.slice(0,e-1).reduce((s,i)=>s+i,0);return[...r.slice(0,e-1),Math.max(0,t-o)]}function gd(e,t,n){const r={};for(let o=0;o<e;o+=1){const s=Zt[o],i=Jt[o],a=typeof n[s]=="number"?n[s]:0,c=typeof n[i]=="number"?n[i]:0,u=ki(t[o]??0,a,c);u.paddingLeft!==a&&(r[s]=u.paddingLeft),u.paddingRight!==c&&(r[i]=u.paddingRight)}return r}function ro(e,t,n){if(e<=0)return[];const r=nt.slice(0,e).map(u=>n[u]);if(e===1)return r;const o=r.slice(0,e-1),i=o.reduce((u,d)=>u+d,0)+xn;if(t>=i)return r;const a=[...o];let c=i-t;for(let u=a.length-1;u>=0&&c>0;u-=1){const d=a[u]-xn;if(d<=0)continue;const $=Math.min(c,d);a[u]-=$,c-=$}return[...a,r[e-1]]}function hd(e,t,n){if(e<=1)return{};const r=ro(e,t,n),o={};for(let s=0;s<e-1;s+=1){const i=nt[s];r[s]!==n[i]&&(o[i]=r[s])}return o}function Do(e){return Array.isArray(e.columnsOrder)&&e.columnsOrder.length>0?e.columnsOrder:[...Pt]}function fd(e,t){return e.length!==t.length?!1:e.every((n,r)=>n===t[r])}function yd(e,t,n,r){const o=Math.min(r,e.length,nt.length),s={};for(let i=0;i<o;i+=1){const a=e[i],c=t.indexOf(a);if(c===-1)continue;const u=nt[c],d=Zt[c],$=Jt[c],h=Qt[c],f=nt[i],m=Zt[i],g=Jt[i],C=Qt[i],y=n[u],x=n[d],P=n[$],L=n[h];typeof y=="number"&&(s[f]=y),typeof x=="number"&&(s[m]=x),typeof P=="number"&&(s[g]=P),typeof L=="number"&&(s[C]=L)}return s}function vd(e,t,n){const r=sd(e,t);r&&(e={...e,...r});const o=ed(e);o&&(e={...e,...o});const s=Wi(n==null?void 0:n.designWidth),i=e.columns,a=t.columns,c=jn(e),u=jn(t),d=e.type==="B"||e.type===void 0&&t.type==="B",$=typeof i=="number"?i:typeof a=="number"?a:Pt.length,h=L=>{if(d)return L;const _=Nn({...t,...L}),E=jn(L),v=Kn($,E,_),S=gd($,v,{...t,...L});return Object.keys(S).length===0?L:{...L,...S}};if(typeof i=="number"&&i!==a){const L={...e,...ud(i,c),...pd()};if(d)for(const _ of Qt)typeof t[_]=="number"&&(L[_]=t[_]);else Object.assign(L,md());return L}const f=Do(e),m=Do(t);if(!fd(f,m))return h({...e,...yd(f,m,t,$)});if(c<u&&typeof $=="number"&&!d){const L=Nn({...t,...e});return h({...e,...hd($,c,L)})}if(d){const L=typeof e.textPaddingLR=="number"?e.textPaddingLR:0,_=Math.max(0,(c-s)/2);return L>_?{...e,textPaddingLR:_}:e}const g=Nn({...t,...e}),C=Kn($,u,Nn(t)),x=Kn($,c,g).some((L,_)=>L<(C[_]??L)),P=nt.some(L=>{const _=e[L],E=t[L];return typeof _=="number"&&typeof E=="number"&&_!==E});return x||P?h(e):e}function bd(e,t,n,r){const o=t.slice(0,e).reduce((i,a)=>i+a,0),s=n.slice(e+1,t.length-1).reduce((i,a)=>i+a,0);return Math.max(xn,r-o-s-xn)}function xd(e,t){return Math.random()*(t-e)+e}function Cd(e){return Object.fromEntries(nt.map(t=>[t,typeof e[t]=="number"?e[t]:Fi[t]]))}function xr(e,t,n=0){return Object.fromEntries(t.map(r=>[r,typeof e[r]=="number"?e[r]:n]))}function Sd(e,t,n,r,o,s){return e.slice(0,t).map((i,a)=>{const c=Zt[a],u=Jt[a],d=Qt[a];return{key:i,textPrefix:id[i],widthKey:nt[a],width:n[nt[a]],paddingLeftKey:c,paddingRightKey:u,paddingBottomKey:d,paddingLeft:r[c],paddingRight:o[u],paddingBottom:s[d]}})}function wd({settings:e,content:t,isEditor:n,isPreviewMode:r,activeEvent:o,layoutId:s,onUpdateSettings:i}){const{prefix:a}=T.useScopedStyles(),c=!!(n&&r),{columns:u,type:d,wrapperWidth:$,entriesCount:h,cellMinHeight:f,dividerWidth:m,showVisibility:g,cut:C,showCut:y,cutCellMinHeight:x,cutLabel:P,imageSize:L,imageOnHover:_,entryHoverEffect:E,rowPaddingTop:v,rowPaddingBottom:S,rowPaddingTopB:F,columnsOrder:V,textPaddingLR:A,textColor:O,textFontFamily:D,textFontSettings:j,textFontSize:U,textLineHeight:w,textLetterSpacing:N,textWordSpacing:k,textTextAppearance:M,backgroundColor:R,dividerColor:B,textHoverColor:te,backgroundHoverColor:ue,dividerHoverColor:ie}=e,[me,H]=p.useState(void 0),[Q,G]=p.useState(null),Y=_==="On"&&(!n||r),oe=(C??0)>0,W=d==="B",ne=p.useRef(null),[I,b]=p.useState(bn),z=Wi(I),q=Math.max(0,(($??0)-z)/2),J=Math.min(A??0,q),se=Math.max(J,ln),le=(($??0)+z)/2;p.useLayoutEffect(()=>{if(!n){b(bn);return}const ge=()=>{b(dd(ne.current))};ge();const xe=ne.current;if(!xe)return;const Se=new ResizeObserver(ge);Se.observe(xe);let Re=xe;for(;Re&&!Re.style.getPropertyValue("--cntrl-article-width");)Re=Re.parentElement;return Re&&Se.observe(Re),()=>Se.disconnect()},[n,s]),p.useEffect(()=>{H(void 0)},[C,y,t,h]);const ce=T.buildColorVars(a,{textColor:O,backgroundColor:R,dividerColor:B,textHoverColor:te,backgroundHoverColor:ue,dividerHoverColor:ie},ld,cd),he=o&&o!=="default"?`${a}-state-${o}`:"",ee=`${E==="Default"?`${a}-entry-hover-default`:E==="Blinds"?`${a}-entry-hover-blinds`:""} ${he}`.trim(),Z=(g==null?void 0:g[0])??!1,de=(g==null?void 0:g[1])??!1,re=p.useRef(e),pe=p.useRef(s);p.useEffect(()=>{if(!i||!n){re.current=e,pe.current=s;return}if(pe.current!==s){re.current=e,pe.current=s;return}const ge=re.current,xe=vd(e,ge,{designWidth:I});re.current=e,xe!==e&&i(xe)},[e,i,n,s,I]);const ve=p.useMemo(()=>Cd(e),[e.AColumnWidth,e.BColumnWidth,e.CColumnWidth,e.DColumnWidth,e.EColumnWidth]),Pe=p.useMemo(()=>xr(e,Zt),[e.AColumnPaddingLeft,e.BColumnPaddingLeft,e.CColumnPaddingLeft,e.DColumnPaddingLeft,e.EColumnPaddingLeft]),Ke=p.useMemo(()=>xr(e,Jt),[e.AColumnPaddingRight,e.BColumnPaddingRight,e.CColumnPaddingRight,e.DColumnPaddingRight,e.EColumnPaddingRight]),Ge=p.useMemo(()=>xr(e,Qt),[e.AColumnPaddingBottom,e.BColumnPaddingBottom,e.CColumnPaddingBottom,e.DColumnPaddingBottom,e.EColumnPaddingBottom]),$e=p.useMemo(()=>Array.isArray(V)&&V.length>0?V:[...Pt],[V]),Ae=p.useMemo(()=>Sd($e,u,ve,Pe,Ke,Ge),[$e,u,ve,Pe,Ke,Ge]),Me=jn(e),Ie=p.useMemo(()=>nt.slice(0,u).map(ge=>ve[ge]),[u,ve]),Ve=p.useMemo(()=>ro(u,Me,ve),[u,Me,ve]),ye=p.useMemo(()=>Kn(u,Me,ve),[u,Me,ve]),ke=p.useMemo(()=>Ae.map((ge,xe)=>ki(ye[xe]??0,ge.paddingLeft,ge.paddingRight)),[Ae,ye]),He=p.useMemo(()=>{const ge=h===0?1/0:h;return(t??[]).slice(0,ge).map((Se,Re)=>({id:Re,cells:Object.fromEntries(Pt.map(Xe=>[Xe,Se[Xe]??""])),image:Se.image,link:Se.link}))},[t,h]),Oe=oe?me??C:He.length,De=p.useMemo(()=>oe?He.slice(0,Oe):He,[He,oe,Oe]),Qe=oe&&Oe<He.length,Ct=De.length>1||Qe,lt=[Z?`${a}-divider-top`:"",de||Ct?`${a}-divider-bottom`:""].filter(Boolean).join(" "),dr=()=>{const ge=me??C;if(!y){H(He.length);return}H(Math.min(ge+y,He.length))},Ee=ge=>T.scalingValue(ge,n??!1),An=W?F??0:v??0,rn=S??0,on=f??0,ur=W?"rowPaddingTopB":"rowPaddingTop",be=Ae[0],Ye=Ae[Ae.length-1],ze=ke[0],Ne=ke[ke.length-1],St=be&&ze?Math.max(ze.paddingLeft,ln):0,oo=Ye&&Ne?Math.max(Ne.paddingRight,ln):0,Ni=Me,io=ge=>{const xe=ne.current;if(!xe)return{x:0,y:0};const Se=xe.getBoundingClientRect();return{x:ge.clientX-Se.left+No,y:ge.clientY-Se.top+No}},Hi=(ge,xe)=>{if(!Y)return;const Se=ge.image;if(!(Se!=null&&Se.url)){G(null);return}const{x:Re,y:Xe}=io(xe),ct=(L==null?void 0:L.min)??80,Te=(L==null?void 0:L.max)??320,Be=(Q==null?void 0:Q.rowId)===ge.id?Q.widthPx:xd(ct,Te);G({rowId:ge.id,url:Se.url,objectFit:Se.objectFit??"cover",widthPx:Be,x:Re,y:Xe})},Oi=ge=>{if(!Y||!Q)return;const{x:xe,y:Se}=io(ge);G(Re=>!Re||Re.x===xe&&Re.y===Se?Re:{...Re,x:xe,y:Se})},Bi=()=>{G(null)},ao=p.useMemo(()=>!W&&eo.some(ge=>{const xe=ge.charAt(0),Se=e[`${ge}VerticalAlign`];return Ii(Se,e,xe)}),[W,e,e.AColumnVerticalAlign,e.BColumnVerticalAlign,e.CColumnVerticalAlign,e.DColumnVerticalAlign,e.EColumnVerticalAlign]);return p.useLayoutEffect(()=>{var ct;const ge=ne.current;if(!ge)return;const xe=()=>{ge.querySelectorAll("[data-list-col]").forEach(Te=>{Te.style.transform="";const Be=Te.querySelector(`.${a}-list-col`);Be&&(Be.style.minHeight="",Be.style.height="");const ot=Te.querySelector(`.${a}-list-col-title`);ot&&(ot.style.transform="")})};if(W||!ao){xe();return}const Se=()=>{ge.querySelectorAll("[data-list-row]").forEach(Te=>{const Be=Array.from(Te.querySelectorAll("[data-list-col]"));Be.forEach(Le=>{Le.style.transform="";const Ze=Le.querySelector(`.${a}-list-col`);Ze&&(Ze.style.minHeight="",Ze.style.height="");const Ue=Le.querySelector(`.${a}-list-col-title`);Ue&&(Ue.style.transform="")}),rd(Te,Be,`${a}-list-col`),Te.offsetHeight;const ot=Te.getBoundingClientRect().top,wt=`${a}-baseline-probe`,Wt=new Map,an=Be.map(Le=>{const Ze=Le.querySelector(`.${a}-list-col-title`),Ue={el:Le,titleEl:Ze,letter:Le.getAttribute("data-col-letter")??"",kind:Le.getAttribute("data-valign")??"top",anchor:Le.getAttribute("data-valign-anchor")};return Wt.set(Ue.letter,Ue),Ue}),sn=new Map,Rn=(Le,Ze)=>{const Ue=sn.get(Le.letter);if(Ue!==void 0)return Ue;const so=Le.anchor?Wt.get(Le.anchor):void 0;if(Le.kind!=="baseline"||!so||Ze.has(Le.letter)){const co=br(Le,ot,`${a}-list-col`,wt);return sn.set(Le.letter,co),co}Ze.add(Le.letter);const Vi=Rn(so,Ze);Ze.delete(Le.letter);const Di=br(Le,ot,`${a}-list-col`,wt),zi=Vi-Di;od(Le.titleEl,zi);const lo=br(Le,ot,`${a}-list-col`,wt);return sn.set(Le.letter,lo),lo};an.forEach(Le=>Rn(Le,new Set))})};Se();const Re=new ResizeObserver(()=>Se());Re.observe(ge);let Xe=!1;return typeof document<"u"&&((ct=document.fonts)!=null&&ct.ready)&&document.fonts.ready.then(()=>{Xe||Se()}),()=>{Xe=!0,Re.disconnect(),xe()}},[ao,W,e,t,I,De,ye]),l.jsxs(l.Fragment,{children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:Yc(a)}}),l.jsx("div",{style:ce,children:l.jsxs("div",{ref:ne,className:`${a}-wrapper ${ee}${lt?` ${lt}`:""}${W?` ${a}-type-b`:""}`.trim(),style:{width:T.scalingValue($??0,n)},onMouseMove:Y?Oi:void 0,onMouseLeave:Y?Bi:void 0,children:[l.jsxs("div",{style:{width:"100%"},children:[De.map((ge,xe)=>{var ct;const Se=(((ct=ge.link)==null?void 0:ct.length)??0)>0,Re=Se?"a":"div",Xe=qc(xe,De.length,Z,de,Qe,m??0,n??!1);return l.jsxs(Re,{className:`${a}-list-item${Se?` ${a}-list-item-has-link`:""}`,...Se?{href:ge.link,target:"_blank"}:{},style:Xe,onMouseEnter:Y?Te=>Hi(ge,Te):void 0,children:[(An>0||c)&&l.jsx("div",{...c?{"data-controls":ur,"data-controls-axis":"y","data-controls-min":"0"}:{},className:`${a}-row-padding-handle`,style:{height:Ee(An)}}),l.jsx("div",{className:`${a}-list-cols-row${W?"":` ${a}-list-cols-row-h`}`,...W?{}:{"data-list-row":""},style:W?void 0:{minHeight:Ee(on)},children:Ae.map((Te,Be)=>{const ot=Be===Ae.length-1,wt=ke[Be],Wt=Te.paddingBottom,an=Uc(ge.cells[Te.key]),sn=W&&an&&(Wt>0||c),Rn=W?{minHeight:Ee(on)}:ot?{}:{width:Ee(ye[Be])},Le=W?{paddingLeft:Ee(J),paddingRight:Ee(J)}:{paddingLeft:Ee(wt.paddingLeft),paddingRight:Ee(wt.paddingRight)},Ze=Te.textPrefix.charAt(0),Ue=W?{kind:"top"}:Qc(e[`${Te.textPrefix}VerticalAlign`],e,Ze);return l.jsxs("div",{...W?{}:{"data-list-col":"","data-col-letter":Ze,"data-valign":Ue.kind,...Ue.kind==="baseline"?{"data-valign-anchor":Ue.anchorLetter}:{}},children:[l.jsx("div",{className:`${a}-list-col${ot?` ${a}-list-col-last`:""}`,style:{...Le,...Rn},"data-test":Te.width,children:l.jsx("span",{className:Oo(e,Te.textPrefix,`${a}-list-col-title`,`${a}-text-tight-leading`),style:{...Ho(Zn(e,Te.textPrefix),n),...Bo(e,Te.textPrefix,a,n),...W?{}:td(Ue.kind)},children:ge.cells[Te.key]??null})}),sn&&l.jsx("div",{...c?{"data-controls":Te.paddingBottomKey,"data-controls-axis":"y","data-controls-min":"0"}:{},className:`${a}-row-padding-handle`,style:{height:Ee(Wt)}})]},Te.key)})}),!W&&(rn>0||c)&&l.jsx("div",{...c?{"data-controls":"rowPaddingBottom","data-controls-axis":"y","data-controls-min":"0"}:{},className:`${a}-row-padding-handle`,style:{height:Ee(rn)}})]},ge.id)}),Qe&&l.jsx("button",{type:"button",className:`${a}-cut-item`,style:{minHeight:Ee(x??0),...Gc(de,m??0,n??!1)},onClick:dr,children:l.jsx("div",{className:`${a}-list-cols-row`,style:W?{paddingLeft:Ee(J),paddingRight:Ee(J)}:{justifyContent:"center"},children:l.jsx("span",{className:Oo(e,vt,`${a}-cut-label`,`${a}-text-tight-leading`),style:{...Ho(Zn(e,vt),n),...Bo(e,vt,a,n)},children:P})})})]}),c&&!W&&be&&Ye&&l.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[l.jsx("div",{"data-controls":be.paddingLeftKey,"data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(ye[0]-((ze==null?void 0:ze.paddingRight)??0)),"data-controls-static-handle":"",className:`${a}-padding-control-handle`,style:{position:"absolute",top:0,left:0,width:Ee(St),height:"100%",pointerEvents:"auto",zIndex:2}}),l.jsx("div",{"data-controls":Ye.paddingRightKey,"data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(ye[Ae.length-1]-((Ne==null?void 0:Ne.paddingLeft)??0)),"data-controls-static-handle":"",className:`${a}-padding-control-handle`,style:{position:"absolute",top:0,left:Ee(Ni-oo),width:Ee(oo),height:"100%",pointerEvents:"auto",zIndex:2}})]},"column-edge-padding-handles"),c&&!W&&Ae.slice(0,-1).map((ge,xe)=>{const Se=Ae[xe+1],Re=bd(xe,Ve,Ie,Me),Xe=Ve.slice(0,xe+1).reduce((Wt,an)=>Wt+an,0),ct=ke[xe],Te=ke[xe+1],Be=Math.max(ct.paddingRight,ln),ot=Math.max(Te.paddingLeft,ln),wt=Xe-Vo/2;return l.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[l.jsx("div",{"data-controls":ge.paddingRightKey,"data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(ye[xe]-ct.paddingLeft),"data-controls-static-handle":"",className:`${a}-padding-control-handle`,style:{position:"absolute",top:0,left:Ee(Xe-Be),width:Ee(Be),height:"100%",pointerEvents:"auto",zIndex:2}}),l.jsx("div",{"data-controls":ge.widthKey,"data-controls-axis":"x","data-controls-min":String(no),"data-controls-max-fraction":String(Re),"data-controls-variant":"column-width",className:`${a}-col-resize-handle`,style:{position:"absolute",top:"0px",left:Ee(wt),width:Ee(Vo),height:"calc(100%)",pointerEvents:"auto",zIndex:4}}),l.jsx("div",{"data-controls":Se.paddingLeftKey,"data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(ye[xe+1]-Te.paddingRight),"data-controls-static-handle":"",className:`${a}-padding-control-handle`,style:{position:"absolute",top:0,left:Ee(Xe),width:Ee(ot),height:"100%",pointerEvents:"auto",zIndex:2}})]},`${ge.widthKey}-junction`)}),c&&W&&l.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[l.jsx("div",{"data-controls":"textPaddingLR","data-controls-paired":"","data-controls-axis":"x","data-controls-min":"0","data-controls-max-fraction":String(le),"data-controls-static-handle":"",className:`${a}-text-padding-lr-handle`,style:{position:"absolute",top:0,left:0,width:Ee(se),height:"100%",pointerEvents:"auto",zIndex:2}}),l.jsx("div",{"data-controls":"textPaddingLR","data-controls-paired":"","data-controls-axis":"x","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(le),"data-controls-static-handle":"",className:`${a}-text-padding-lr-handle`,style:{position:"absolute",top:0,left:Ee(Math.max(se,Me-se)),width:Ee(se),height:"100%",pointerEvents:"auto",zIndex:2}})]},"text-padding-lr-handles"),Y&&Q&&l.jsx("img",{className:`${a}-hover-image`,src:Q.url,alt:"",style:{width:zn(Q.widthPx),objectFit:Q.objectFit,left:Q.x,top:Q.y}})]})})]})}const $d=`import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { CommonComponentProps } from '../props';
+import { buildColorVars, scalingValue, useScopedStyles } from '../utils/index';
+import { omitTextColors, TextStyles, textStylesToCss } from '../utils/textStylesToCss';
+
+type ListFontSettings = { fontWeight: number; fontStyle: string };
+
+type ListColumnPrefix = 'AColumn' | 'BColumn' | 'CColumn' | 'DColumn' | 'EColumn';
+
+type ListColumnTextStyleOverrides = {
+  AColumnVerticalAlign?: string;
+  AColumnTextFontFamily?: string;
+  AColumnTextFontSettings?: ListFontSettings;
+  AColumnTextFontSize?: number;
+  AColumnTextLineHeight?: number;
+  AColumnTextLetterSpacing?: number;
+  AColumnTextWordSpacing?: number;
+  AColumnTextTextAppearance?: TextStyles['textAppearance'];
+  BColumnVerticalAlign?: string;
+  BColumnTextFontFamily?: string;
+  BColumnTextFontSettings?: ListFontSettings;
+  BColumnTextFontSize?: number;
+  BColumnTextLineHeight?: number;
+  BColumnTextLetterSpacing?: number;
+  BColumnTextWordSpacing?: number;
+  BColumnTextTextAppearance?: TextStyles['textAppearance'];
+  CColumnVerticalAlign?: string;
+  CColumnTextFontFamily?: string;
+  CColumnTextFontSettings?: ListFontSettings;
+  CColumnTextFontSize?: number;
+  CColumnTextLineHeight?: number;
+  CColumnTextLetterSpacing?: number;
+  CColumnTextWordSpacing?: number;
+  CColumnTextTextAppearance?: TextStyles['textAppearance'];
+  DColumnVerticalAlign?: string;
+  DColumnTextFontFamily?: string;
+  DColumnTextFontSettings?: ListFontSettings;
+  DColumnTextFontSize?: number;
+  DColumnTextLineHeight?: number;
+  DColumnTextLetterSpacing?: number;
+  DColumnTextWordSpacing?: number;
+  DColumnTextTextAppearance?: TextStyles['textAppearance'];
+  EColumnVerticalAlign?: string;
+  EColumnTextFontFamily?: string;
+  EColumnTextFontSettings?: ListFontSettings;
+  EColumnTextFontSize?: number;
+  EColumnTextLineHeight?: number;
+  EColumnTextLetterSpacing?: number;
+  EColumnTextWordSpacing?: number;
+  EColumnTextTextAppearance?: TextStyles['textAppearance'];
+  cutLabelTextFontFamily?: string;
+  cutLabelTextFontSettings?: ListFontSettings;
+  cutLabelTextFontSize?: number;
+  cutLabelTextLineHeight?: number;
+  cutLabelTextLetterSpacing?: number;
+  cutLabelTextWordSpacing?: number;
+  cutLabelTextTextAppearance?: TextStyles['textAppearance'];
+};
+
+export type ListColumnVerticalAlignKey = \`\${ListColumnPrefix}VerticalAlign\`;
+
+type ListColumnVerticalAlignUpdates = {
+  AColumnVerticalAlign?: string;
+  BColumnVerticalAlign?: string;
+  CColumnVerticalAlign?: string;
+  DColumnVerticalAlign?: string;
+  EColumnVerticalAlign?: string;
+};
+
+type ListColumnTextStyleSyncUpdates = {
+  AColumnTextFontFamily?: string;
+  AColumnTextFontSettings?: ListFontSettings;
+  AColumnTextFontSize?: number;
+  AColumnTextLineHeight?: number;
+  AColumnTextLetterSpacing?: number;
+  AColumnTextWordSpacing?: number;
+  AColumnTextTextAppearance?: TextStyles['textAppearance'];
+  BColumnTextFontFamily?: string;
+  BColumnTextFontSettings?: ListFontSettings;
+  BColumnTextFontSize?: number;
+  BColumnTextLineHeight?: number;
+  BColumnTextLetterSpacing?: number;
+  BColumnTextWordSpacing?: number;
+  BColumnTextTextAppearance?: TextStyles['textAppearance'];
+  CColumnTextFontFamily?: string;
+  CColumnTextFontSettings?: ListFontSettings;
+  CColumnTextFontSize?: number;
+  CColumnTextLineHeight?: number;
+  CColumnTextLetterSpacing?: number;
+  CColumnTextWordSpacing?: number;
+  CColumnTextTextAppearance?: TextStyles['textAppearance'];
+  DColumnTextFontFamily?: string;
+  DColumnTextFontSettings?: ListFontSettings;
+  DColumnTextFontSize?: number;
+  DColumnTextLineHeight?: number;
+  DColumnTextLetterSpacing?: number;
+  DColumnTextWordSpacing?: number;
+  DColumnTextTextAppearance?: TextStyles['textAppearance'];
+  EColumnTextFontFamily?: string;
+  EColumnTextFontSettings?: ListFontSettings;
+  EColumnTextFontSize?: number;
+  EColumnTextLineHeight?: number;
+  EColumnTextLetterSpacing?: number;
+  EColumnTextWordSpacing?: number;
+  EColumnTextTextAppearance?: TextStyles['textAppearance'];
+  cutLabelTextFontFamily?: string;
+  cutLabelTextFontSettings?: ListFontSettings;
+  cutLabelTextFontSize?: number;
+  cutLabelTextLineHeight?: number;
+  cutLabelTextLetterSpacing?: number;
+  cutLabelTextWordSpacing?: number;
+  cutLabelTextTextAppearance?: TextStyles['textAppearance'];
+};
+
+export type ListSettings = {
+  columns: number;
+  type: 'A' | 'B';
+  wrapperWidth: number;
+  entriesCount: number;
+  cellMinHeight: number;
+  imageOnHover: 'On' | 'Off';
+  imageSize?: { min: number; max: number };
+  dividerWidth: number;
+  showVisibility: boolean[];
+  cut: number;
+  showCut: number;
+  cutCellMinHeight: number;
+  cutLabel: string;
+  entryHoverEffect: 'None' | 'Default' | 'Blinds';
+  rowPaddingTop: number;
+  rowPaddingBottom: number;
+  rowPaddingTopB: number;
+  AColumnWidth: number;
+  AColumnPaddingLeft: number;
+  AColumnPaddingRight: number;
+  AColumnPaddingBottom: number;
+  BColumnWidth: number;
+  BColumnPaddingLeft: number;
+  BColumnPaddingRight: number;
+  BColumnPaddingBottom: number;
+  CColumnWidth: number;
+  CColumnPaddingLeft: number;
+  CColumnPaddingRight: number;
+  CColumnPaddingBottom: number;
+  DColumnWidth: number;
+  DColumnPaddingLeft: number;
+  DColumnPaddingRight: number;
+  DColumnPaddingBottom: number;
+  EColumnWidth: number;
+  EColumnPaddingLeft: number;
+  EColumnPaddingRight: number;
+  EColumnPaddingBottom: number;
+  columnsOrder?: string[];
+  textPaddingLR?: number;
+  textColor: string;
+  textFontFamily: string;
+  textFontSettings?: ListFontSettings;
+  textFontSize?: number;
+  textLineHeight?: number;
+  textLetterSpacing?: number;
+  textWordSpacing?: number;
+  textTextAppearance?: TextStyles['textAppearance'];
+  backgroundColor: string;
+  dividerColor: string;
+  textHoverColor: string;
+  backgroundHoverColor: string;
+  dividerHoverColor: string;
+} & ListColumnTextStyleOverrides;
+
+type ListContentItem = {
+  AColumn?: string;
+  BColumnWidth?: string;
+  CColumnWidth?: string;
+  DColumnWidth?: string;
+  EColumnWidth?: string;
+  image?: {
+    objectFit?: 'cover' | 'contain';
+    url: string;
+    name: string;
+  };
+  link?: string;
+};
+
+type ListItemRow = {
+  id: string | number;
+  cells: Record<string, React.ReactNode>;
+  image?: ListContentItem['image'];
+  link?: string;
+};
+
+type HoverImageState = {
+  rowId: string | number;
+  url: string;
+  objectFit: 'cover' | 'contain';
+  widthPx: number;
+  x: number;
+  y: number;
+};
+
+type ListProps = {
+  layoutId?: string;
+  settings: ListSettings;
+  content?: ListContentItem[];
+  isEditor?: boolean;
+  isPreviewMode?: boolean;
+  activeEvent: string | undefined;
+  onUpdateSettings?: (settings: ListSettings) => void;
+} & CommonComponentProps;
+
+function sv(px: number): string {
+  return \`calc(var(--cntrl-article-width, 100vw) * \${px / 1440})\`;
+}
+
+function hasListColumnText(value: React.ReactNode): boolean {
+  return String(value ?? '').trim().length > 0;
+}
+
+function getEntryDividerWidths(
+  rowIdx: number,
+  rowCount: number,
+  showDividerTop: boolean,
+  showDividerBottom: boolean,
+  hasCutItem: boolean,
+  dividerWidth: number,
+  isEditor: boolean,
+): { borderTopWidth: string; borderBottomWidth: string } {
+  const scaledDividerWidth = scalingValue(dividerWidth, isEditor);
+  const none = scalingValue(0, isEditor);
+
+  const isFirst = rowIdx === 0;
+  const isLastEntry = rowIdx === rowCount - 1 && !hasCutItem;
+
+  const borderTopWidth = isFirst && showDividerTop ? scaledDividerWidth : none;
+  const borderBottomWidth = !isLastEntry || showDividerBottom ? scaledDividerWidth : none;
+
+  return { borderTopWidth, borderBottomWidth };
+}
+
+function getCutItemDividerWidths(
+  showDividerBottom: boolean,
+  dividerWidth: number,
+  isEditor: boolean,
+): { borderTopWidth: string; borderBottomWidth: string } {
+  const scaledDividerWidth = scalingValue(dividerWidth, isEditor);
+  const none = scalingValue(0, isEditor);
+
+  return {
+    borderTopWidth: none,
+    borderBottomWidth: showDividerBottom ? scaledDividerWidth : none,
+  };
+}
+
+const HOVER_IMAGE_CURSOR_OFFSET = 10;
+
+function getCSS(P: string): string {
+  return \`
+.\${P}-wrapper {
+  display: grid;
+  align-items: start;
+  min-height: \${sv(48)};
+  position: relative;
+  overflow: visible;
+  box-sizing: border-box;
+}
+
+.\${P}-hover-image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  pointer-events: none;
+  display: block;
+  height: auto;
+}
+
+.\${P}-list-item {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  overflow: visible;
+  position: relative;
+  box-sizing: content-box;
+  user-select: none;
+  background: var(--\${P}-background-color);
+}
+
+.\${P}-wrapper.\${P}-divider-top .\${P}-list-item {
+  border-top-style: solid;
+  border-top-color: var(--\${P}-divider-color);
+}
+
+.\${P}-wrapper.\${P}-divider-bottom .\${P}-list-item {
+  border-bottom-style: solid;
+  border-bottom-color: var(--\${P}-divider-color);
+}
+
+.\${P}-list-cols-row {
+  display: flex;
+  align-items: start;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.\${P}-list-cols-row-h {
+  align-items: stretch;
+}
+
+.\${P}-list-cols-row-h [data-list-col] {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  align-self: stretch;
+  min-height: min-content;
+}
+
+.\${P}-list-cols-row-h .\${P}-list-col {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  min-height: 0;
+}
+
+.\${P}-list-cols-row-h .\${P}-list-col-title {
+  display: block;
+  flex: 0 0 auto;
+  align-self: stretch;
+}
+
+.\${P}-text-tight-leading {
+  display: block;
+  flex-shrink: 0;
+  padding-top: var(--\${P}-title-leading-gap, 0);
+  padding-bottom: var(--\${P}-title-leading-gap, 0);
+}
+
+.\${P}-wrapper.\${P}-type-b .\${P}-list-cols-row {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.\${P}-wrapper.\${P}-type-b .\${P}-list-col {
+  width: 100%;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  min-height: min-content;
+}
+
+.\${P}-wrapper.\${P}-type-b .\${P}-list-col-title {
+  display: block;
+  flex: 0 0 auto;
+  align-self: stretch;
+  text-align: center;
+}
+
+.\${P}-wrapper.\${P}-type-b .\${P}-cut-item .\${P}-list-cols-row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.\${P}-wrapper.\${P}-type-b .\${P}-cut-label {
+  text-align: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.\${P}-wrapper.\${P}-type-b .\${P}-list-col-last {
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+a.\${P}-list-item {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+.\${P}-list-col {
+  flex-shrink: 0;
+  overflow: visible;
+  box-sizing: border-box;
+  min-width: \${sv(50)};
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+}
+
+.\${P}-list-col-last {
+  flex: 1 1 auto;
+  min-width: \${sv(50)};
+}
+
+.\${P}-list-col-title {
+  color: var(--\${P}-text-color);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.\${P}-baseline-probe {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  vertical-align: baseline;
+}
+
+.\${P}-col-resize-handle,
+.\${P}-padding-control-handle {
+  background: transparent;
+}
+
+.\${P}-row-padding-handle {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  flex-shrink: 0;
+  background: transparent;
+}
+
+.\${P}-row-padding-handle::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 20px;
+  pointer-events: auto;
+  z-index: 10;
+}
+
+.\${P}-col-resize-handle::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 2px;
+  height: 100%;
+  background: #FF5C02;
+  pointer-events: none;
+}
+
+.\${P}-wrapper.\${P}-type-b .\${P}-col-resize-handle::after {
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 100%;
+  height: 2px;
+}
+
+.\${P}-padding-control-handle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 4px;
+  height: 12px;
+  background: #FF5C02;
+  border: 1px solid #FFFFFF;
+  border-radius: 5px;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.\${P}-wrapper.\${P}-type-b .\${P}-padding-control-handle::after {
+  width: 12px;
+  height: 4px;
+}
+
+.\${P}-text-padding-lr-handle {
+  background: transparent;
+}
+
+.\${P}-text-padding-lr-handle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 4px;
+  height: 12px;
+  background: #FF5C02;
+  border: 1px solid #FFFFFF;
+  border-radius: 5px;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.\${P}-wrapper.\${P}-entry-hover-default .\${P}-list-item-has-link,
+.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-list-item-has-link,
+.\${P}-wrapper.\${P}-entry-hover-default .\${P}-cut-item,
+.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-cut-item {
+  transition: background-color 250ms, border-color 250ms;
+}
+
+.\${P}-wrapper.\${P}-entry-hover-default .\${P}-list-item-has-link .\${P}-list-col-title,
+.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-list-item-has-link .\${P}-list-col-title,
+.\${P}-wrapper.\${P}-entry-hover-default .\${P}-cut-label,
+.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-cut-label {
+  transition: color 250ms;
+}
+
+.\${P}-wrapper.\${P}-entry-hover-default .\${P}-list-item-has-link:hover,
+.\${P}-wrapper.\${P}-entry-hover-default.\${P}-state-hover .\${P}-list-item-has-link,
+.\${P}-wrapper.\${P}-entry-hover-default .\${P}-cut-item:hover,
+.\${P}-wrapper.\${P}-entry-hover-default.\${P}-state-hover .\${P}-cut-item {
+  background: var(--\${P}-background-hover-color);
+}
+
+.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-default .\${P}-list-item-has-link:hover,
+.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-default .\${P}-list-item:has(+ .\${P}-list-item-has-link:hover),
+.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-default .\${P}-list-item:has(+ .\${P}-cut-item:hover),
+.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-default.\${P}-state-hover .\${P}-list-item-has-link,
+.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-default .\${P}-cut-item:hover,
+.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-default.\${P}-state-hover .\${P}-cut-item,
+.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-blinds .\${P}-list-item-has-link:hover,
+.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-blinds .\${P}-list-item:has(+ .\${P}-list-item-has-link:hover),
+.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-blinds .\${P}-list-item:has(+ .\${P}-cut-item:hover),
+.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-list-item-has-link,
+.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-blinds .\${P}-cut-item:hover,
+.\${P}-wrapper.\${P}-divider-bottom.\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-cut-item {
+  border-bottom-color: var(--\${P}-divider-hover-color);
+}
+
+.\${P}-wrapper.\${P}-divider-top:not(.\${P}-divider-bottom).\${P}-entry-hover-default .\${P}-list-item-has-link:hover:first-child,
+.\${P}-wrapper.\${P}-divider-top:not(.\${P}-divider-bottom).\${P}-entry-hover-default.\${P}-state-hover .\${P}-list-item-has-link:first-child,
+.\${P}-wrapper.\${P}-divider-top:not(.\${P}-divider-bottom).\${P}-entry-hover-blinds .\${P}-list-item-has-link:hover:first-child,
+.\${P}-wrapper.\${P}-divider-top:not(.\${P}-divider-bottom).\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-list-item-has-link:first-child {
+  border-top-color: var(--\${P}-divider-hover-color);
+}
+
+.\${P}-wrapper.\${P}-divider-top.\${P}-divider-bottom.\${P}-entry-hover-default .\${P}-list-item-has-link:hover:first-child,
+.\${P}-wrapper.\${P}-divider-top.\${P}-divider-bottom.\${P}-entry-hover-default.\${P}-state-hover .\${P}-list-item-has-link:first-child,
+.\${P}-wrapper.\${P}-divider-top.\${P}-divider-bottom.\${P}-entry-hover-blinds .\${P}-list-item-has-link:hover:first-child,
+.\${P}-wrapper.\${P}-divider-top.\${P}-divider-bottom.\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-list-item-has-link:first-child {
+  border-top-color: var(--\${P}-divider-hover-color);
+}
+
+.\${P}-wrapper.\${P}-entry-hover-default .\${P}-list-item-has-link:hover .\${P}-list-col-title,
+.\${P}-wrapper.\${P}-entry-hover-default.\${P}-state-hover .\${P}-list-item-has-link .\${P}-list-col-title,
+.\${P}-wrapper.\${P}-entry-hover-default .\${P}-cut-item:hover .\${P}-cut-label,
+.\${P}-wrapper.\${P}-entry-hover-default.\${P}-state-hover .\${P}-cut-item .\${P}-cut-label,
+.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-list-item-has-link:hover .\${P}-list-col-title,
+.\${P}-wrapper.\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-list-item-has-link .\${P}-list-col-title,
+.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-cut-item:hover .\${P}-cut-label,
+.\${P}-wrapper.\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-cut-item .\${P}-cut-label {
+  color: var(--\${P}-text-hover-color);
+}
+
+.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-list-item-has-link::before,
+.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-cut-item::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--\${P}-background-hover-color);
+  transform: scaleY(0);
+  transform-origin: center center;
+  transition: transform 250ms;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-list-col,
+.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-cut-label {
+  position: relative;
+  z-index: 1;
+}
+
+.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-list-item-has-link:hover::before,
+.\${P}-wrapper.\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-list-item-has-link::before,
+.\${P}-wrapper.\${P}-entry-hover-blinds .\${P}-cut-item:hover::before,
+.\${P}-wrapper.\${P}-entry-hover-blinds.\${P}-state-hover .\${P}-cut-item::before {
+  transform: scaleY(1);
+}
+
+.\${P}-cut-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  overflow: visible;
+  position: relative;
+  z-index: 3;
+  box-sizing: border-box;
+  user-select: none;
+  background: var(--\${P}-background-color);
+  cursor: pointer;
+  padding: 0;
+  border: none;
+  font: inherit;
+  text-align: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.\${P}-cut-item .\${P}-list-cols-row {
+  flex: 1;
+  min-height: 100%;
+  align-items: center;
+}
+
+.\${P}-wrapper.\${P}-divider-bottom .\${P}-cut-item {
+  border-bottom-style: solid;
+  border-bottom-color: var(--\${P}-divider-color);
+}
+
+.\${P}-cut-label {
+  display: block;
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  color: var(--\${P}-text-color);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+\`;
+}
+
+export const COLUMN_CONTENT_KEYS = [
+  'AColumn',
+  'BColumnWidth',
+  'CColumnWidth',
+  'DColumnWidth',
+  'EColumnWidth',
+] as const;
+
+export const COLUMN_TEXT_PREFIXES = [
+  'AColumn',
+  'BColumn',
+  'CColumn',
+  'DColumn',
+  'EColumn',
+] as const;
+
+export const CUT_LABEL_TEXT_PREFIX = 'cutLabel' as const;
+
+export const LIST_TEXT_STYLE_PREFIXES = [
+  ...COLUMN_TEXT_PREFIXES,
+  CUT_LABEL_TEXT_PREFIX,
+] as const;
+
+export type ListTextStylePrefix = typeof LIST_TEXT_STYLE_PREFIXES[number];
+
+export const LIST_COLUMN_LETTERS = ['A', 'B', 'C', 'D', 'E'] as const;
+
+export function getListColumnVerticalAlignSettingKey(columnLetter: string): string {
+  return \`\${columnLetter}ColumnVerticalAlign\`;
+}
+
+export const COLUMN_VALIGN_BASIC_OPTIONS = ['Top', 'Center', 'Bottom'] as const;
+
+export function isBaselineAnchorColumnVerticalAlign(value: string | undefined): boolean {
+  const raw = String(value ?? 'Top').trim();
+  if (raw.toLowerCase().startsWith('baseline')) {
+    return false;
+  }
+  return raw === 'Top' || raw === 'Center' || raw === 'Bottom';
+}
+
+export function parseBaselineAnchorLetter(value: string | undefined): string | null {
+  const raw = String(value ?? '').trim();
+  if (!raw.toLowerCase().startsWith('baseline')) {
+    return null;
+  }
+  const anchorLetter = raw.slice(-1).toUpperCase();
+  return LIST_COLUMN_LETTERS.includes(anchorLetter as typeof LIST_COLUMN_LETTERS[number])
+    ? anchorLetter
+    : null;
+}
+
+export function isValidColumnBaselineVAlign(
+  value: string | undefined,
+  forColumnLetter: string,
+  settings: ListSettings,
+): boolean {
+  const anchorLetter = parseBaselineAnchorLetter(value);
+  if (!anchorLetter) {
+    return true;
+  }
+  if (anchorLetter === forColumnLetter) {
+    return false;
+  }
+  return isBaselineAnchorColumnVerticalAlign(settings[getListColumnVerticalAlignSettingKey(anchorLetter) as ListColumnVerticalAlignKey]);
+}
+
+export function getColumnVerticalAlignOptionsForLetter(
+  columnLetter: string,
+  settings: ListSettings,
+): string[] {
+  const baselineOptions = LIST_COLUMN_LETTERS
+    .filter((letter) => letter !== columnLetter)
+    .filter((letter) => isBaselineAnchorColumnVerticalAlign(settings[getListColumnVerticalAlignSettingKey(letter) as ListColumnVerticalAlignKey]))
+    .map((letter) => \`Baseline \${letter}\`);
+
+  return [...COLUMN_VALIGN_BASIC_OPTIONS, ...baselineOptions];
+}
+
+type ColumnVerticalAlign =
+  | { kind: 'top' | 'center' | 'bottom' }
+  | { kind: 'baseline'; anchorLetter: string };
+
+function parseColumnVerticalAlign(value: string | undefined): ColumnVerticalAlign {
+  const raw = String(value ?? 'Top').trim();
+  if (raw.toLowerCase().startsWith('baseline')) {
+    const anchorLetter = raw.slice(-1).toUpperCase();
+    if (LIST_COLUMN_LETTERS.includes(anchorLetter as typeof LIST_COLUMN_LETTERS[number])) {
+      return { kind: 'baseline', anchorLetter };
+    }
+    return { kind: 'top' };
+  }
+  if (raw === 'Center') return { kind: 'center' };
+  if (raw === 'Bottom') return { kind: 'bottom' };
+  return { kind: 'top' };
+}
+
+function resolveColumnVerticalAlign(
+  value: string | undefined,
+  settings: ListSettings,
+  columnLetter: string,
+): ColumnVerticalAlign {
+  if (isActiveBaselineVAlign(value, settings, columnLetter)) {
+    return parseColumnVerticalAlign(value);
+  }
+
+  const parsed = parseColumnVerticalAlign(value);
+  if (parsed.kind === 'baseline') {
+    return { kind: 'top' };
+  }
+
+  return parsed;
+}
+
+function isActiveBaselineVAlign(
+  value: string | undefined,
+  settings: ListSettings,
+  forColumnLetter: string,
+): boolean {
+  if (!isValidColumnBaselineVAlign(value, forColumnLetter, settings)) {
+    return false;
+  }
+  return parseColumnVerticalAlign(value).kind === 'baseline';
+}
+
+function getListColumnVerticalAlignSanitizeUpdates(
+  settings: ListSettings,
+): ListColumnVerticalAlignUpdates | null {
+  if (settings.type === 'B') {
+    return null;
+  }
+
+  const updates: ListColumnVerticalAlignUpdates = {};
+  let hasUpdates = false;
+
+  for (const letter of LIST_COLUMN_LETTERS) {
+    const key = getListColumnVerticalAlignSettingKey(letter) as ListColumnVerticalAlignKey;
+    const value = settings[key];
+    if (!isValidColumnBaselineVAlign(value, letter, settings)) {
+      updates[key] = 'Top';
+      hasUpdates = true;
+    }
+  }
+
+  return hasUpdates ? updates : null;
+}
+
+function vAlignToTitleStyle(
+  kind: ColumnVerticalAlign['kind'],
+): React.CSSProperties {
+  if (kind === 'center') {
+    return { marginTop: 'auto', marginBottom: 'auto' };
+  }
+  if (kind === 'bottom') {
+    return { marginTop: 'auto' };
+  }
+  return {};
+}
+
+function getFirstLineBaselineOffsetInTitle(
+  titleEl: HTMLElement,
+  probeClassName: string,
+): number {
+  const probe = document.createElement('i');
+  probe.className = probeClassName;
+  probe.setAttribute('aria-hidden', 'true');
+  titleEl.prepend(probe);
+
+  const { top: titleTop } = titleEl.getBoundingClientRect();
+  const { bottom: probeBottom } = probe.getBoundingClientRect();
+  const baselineOffset = probeBottom - titleTop;
+  probe.remove();
+
+  return baselineOffset;
+}
+
+function measureColumnFirstLineBaselineOffset(
+  info: {
+    titleEl: HTMLElement | null;
+    kind: string;
+  },
+  rowTop: number,
+  listColClassName: string,
+  probeClassName: string,
+): number {
+  const titleEl = info.titleEl;
+  if (!titleEl) return 0;
+
+  const listCol = titleEl.closest<HTMLElement>(\`.\${listColClassName}\`);
+  if (!listCol) return 0;
+
+  const baselineInTitle = getFirstLineBaselineOffsetInTitle(titleEl, probeClassName);
+
+  if (info.kind === 'baseline') {
+    return titleEl.getBoundingClientRect().top - rowTop + baselineInTitle;
+  }
+
+  const listColRect = listCol.getBoundingClientRect();
+  const titleHeight = titleEl.getBoundingClientRect().height;
+  let valignOffset = 0;
+
+  if (info.kind === 'center') {
+    valignOffset = (listColRect.height - titleHeight) / 2;
+  } else if (info.kind === 'bottom') {
+    valignOffset = listColRect.height - titleHeight;
+  }
+
+  return (listColRect.top - rowTop) + valignOffset + baselineInTitle;
+}
+
+function syncRowListColHeights(
+  rowEl: HTMLElement,
+  cols: HTMLElement[],
+  listColClassName: string,
+): number {
+  const rowHeight = rowEl.getBoundingClientRect().height;
+  if (rowHeight <= 0) {
+    return 0;
+  }
+
+  cols.forEach((colEl) => {
+    const listCol = colEl.querySelector<HTMLElement>(\`.\${listColClassName}\`);
+    if (listCol) {
+      listCol.style.minHeight = \`\${rowHeight}px\`;
+      listCol.style.height = \`\${rowHeight}px\`;
+    }
+  });
+
+  void rowEl.offsetHeight;
+  return rowHeight;
+}
+
+function applyBaselineTitleShift(titleEl: HTMLElement | null, shift: number): number {
+  if (!titleEl || !shift) {
+    if (titleEl) {
+      titleEl.style.transform = '';
+    }
+    return 0;
+  }
+
+  titleEl.style.transform = \`translateY(\${shift}px)\`;
+  return shift;
+}
+
+const COLUMN_CONTENT_KEY_TO_TEXT_PREFIX: Record<
+  typeof COLUMN_CONTENT_KEYS[number],
+  typeof COLUMN_TEXT_PREFIXES[number]
+> = {
+  AColumn: 'AColumn',
+  BColumnWidth: 'BColumn',
+  CColumnWidth: 'CColumn',
+  DColumnWidth: 'DColumn',
+  EColumnWidth: 'EColumn',
+};
+
+export const LIST_GLOBAL_TEXT_STYLE_KEYS = [
+  'textFontFamily',
+  'textFontSettings',
+  'textFontSize',
+  'textLineHeight',
+  'textLetterSpacing',
+  'textWordSpacing',
+  'textTextAppearance',
+] as const;
+
+export type ListGlobalTextStyleKey = typeof LIST_GLOBAL_TEXT_STYLE_KEYS[number];
+
+export function getListColumnTextSettingKey(
+  prefix: ListTextStylePrefix,
+  globalKey: ListGlobalTextStyleKey,
+): string {
+  return \`\${prefix}\${globalKey.replace(/^text/, 'Text')}\`;
+}
+
+type ListTextStyleFields = {
+  textFontFamily?: string;
+  textFontSettings?: { fontWeight: number; fontStyle: string };
+  textFontSize?: number;
+  textLineHeight?: number;
+  textLetterSpacing?: number;
+  textWordSpacing?: number;
+  textTextAppearance?: TextStyles['textAppearance'];
+  textColor?: string;
+};
+
+type ResolvedListTextFields = {
+  textFontFamily: string;
+  textFontSettings: { fontWeight: number; fontStyle: string };
+  textFontSize?: number;
+  textLineHeight?: number;
+  textLetterSpacing: number;
+  textWordSpacing: number;
+  textTextAppearance?: TextStyles['textAppearance'];
+  textColor?: string;
+};
+
+function resolveListGlobalTextFields(
+  settings: ListTextStyleFields,
+): ResolvedListTextFields {
+  return {
+    textFontFamily: settings.textFontFamily ?? 'Arial',
+    textFontSettings: settings.textFontSettings ?? {
+      fontWeight: 400,
+      fontStyle: 'normal',
+    },
+    textFontSize: settings.textFontSize,
+    textLineHeight: settings.textLineHeight,
+    textLetterSpacing: settings.textLetterSpacing ?? 0,
+    textWordSpacing: settings.textWordSpacing ?? 0,
+    textTextAppearance: settings.textTextAppearance,
+    textColor: settings.textColor,
+  };
+}
+
+function resolveListColumnTextFields(
+  settings: ListSettings,
+  textPrefix: ListTextStylePrefix,
+): ResolvedListTextFields {
+  const read = <K extends ListGlobalTextStyleKey>(globalKey: K) => {
+    const columnKey = getListColumnTextSettingKey(textPrefix, globalKey);
+    const columnValue = settings[columnKey as keyof ListSettings];
+    if (columnValue !== undefined) {
+      return columnValue as ListTextStyleFields[K];
+    }
+    return settings[globalKey];
+  };
+
+  return {
+    textFontFamily: (read('textFontFamily') as string | undefined) ?? 'Arial',
+    textFontSettings: (read('textFontSettings') as ListTextStyleFields['textFontSettings']) ?? {
+      fontWeight: 400,
+      fontStyle: 'normal',
+    },
+    textFontSize: read('textFontSize') as number | undefined,
+    textLineHeight: read('textLineHeight') as number | undefined,
+    textLetterSpacing: (read('textLetterSpacing') as number | undefined) ?? 0,
+    textWordSpacing: (read('textWordSpacing') as number | undefined) ?? 0,
+    textTextAppearance: read('textTextAppearance') as ListTextStyleFields['textTextAppearance'],
+    textColor: settings.textColor,
+  };
+}
+
+function listColumnTextFieldsToCss(
+  fields: ResolvedListTextFields,
+  isEditor?: boolean,
+): React.CSSProperties {
+  const resolvedTextStyle: TextStyles = {
+    fontSettings: {
+      fontFamily: fields.textFontFamily,
+      fontWeight: fields.textFontSettings?.fontWeight ?? 400,
+      fontStyle: fields.textFontSettings?.fontStyle ?? 'normal',
+    },
+    fontSize: fields.textFontSize ?? 0.01,
+    lineHeight: fields.textLineHeight,
+    letterSpacing: fields.textLetterSpacing,
+    wordSpacing: fields.textWordSpacing,
+    textAppearance: fields.textTextAppearance,
+    color: fields.textColor ?? '#767676',
+  };
+
+  return omitTextColors(textStylesToCss(resolvedTextStyle, isEditor));
+}
+
+function getListColumnTitleClassName(
+  settings: ListSettings,
+  prefix: ListTextStylePrefix,
+  baseClassName: string,
+  tightLeadingClassName: string,
+): string {
+  const fields = resolveListColumnTextFields(settings, prefix);
+  const fontSize = fields.textFontSize ?? 0.01;
+  const lineHeight = fields.textLineHeight;
+  const needsTightLeading = lineHeight !== undefined && lineHeight < fontSize;
+
+  return needsTightLeading
+    ? \`\${baseClassName} \${tightLeadingClassName}\`
+    : baseClassName;
+}
+
+function getListColumnTitleVars(
+  settings: ListSettings,
+  prefix: ListTextStylePrefix,
+  titleVarPrefix: string,
+  isEditor?: boolean,
+): React.CSSProperties {
+  const fields = resolveListColumnTextFields(settings, prefix);
+  const fontSize = fields.textFontSize ?? 0.01;
+  const lineHeight = fields.textLineHeight;
+
+  if (lineHeight === undefined || lineHeight >= fontSize) {
+    return {};
+  }
+
+  return {
+    [\`--\${titleVarPrefix}-title-leading-gap\`]: scalingValue((fontSize - lineHeight) / 2, isEditor),
+  } as React.CSSProperties;
+}
+
+function getListGlobalTextSyncUpdates(
+  nextSettings: ListSettings,
+  prevSettings: ListSettings,
+): ListColumnTextStyleSyncUpdates | null {
+  const updates: ListColumnTextStyleSyncUpdates = {};
+  let hasChanges = false;
+
+  for (const globalKey of LIST_GLOBAL_TEXT_STYLE_KEYS) {
+    if (nextSettings[globalKey] === prevSettings[globalKey]) {
+      continue;
+    }
+    if (nextSettings[globalKey] === undefined) {
+      continue;
+    }
+
+    hasChanges = true;
+    for (const prefix of LIST_TEXT_STYLE_PREFIXES) {
+      Object.assign(updates, {
+        [getListColumnTextSettingKey(prefix, globalKey)]: nextSettings[globalKey],
+      });
+    }
+  }
+
+  return hasChanges ? updates : null;
+}
+
+const COLUMN_WIDTH_KEYS = [
+  'AColumnWidth',
+  'BColumnWidth',
+  'CColumnWidth',
+  'DColumnWidth',
+  'EColumnWidth',
+] as const;
+
+const COLUMN_PADDING_LEFT_KEYS = [
+  'AColumnPaddingLeft',
+  'BColumnPaddingLeft',
+  'CColumnPaddingLeft',
+  'DColumnPaddingLeft',
+  'EColumnPaddingLeft',
+] as const;
+
+const COLUMN_PADDING_RIGHT_KEYS = [
+  'AColumnPaddingRight',
+  'BColumnPaddingRight',
+  'CColumnPaddingRight',
+  'DColumnPaddingRight',
+  'EColumnPaddingRight',
+] as const;
+
+const COLUMN_PADDING_BOTTOM_KEYS = [
+  'AColumnPaddingBottom',
+  'BColumnPaddingBottom',
+  'CColumnPaddingBottom',
+  'DColumnPaddingBottom',
+  'EColumnPaddingBottom',
+] as const;
+
+type ColumnWidthKey = typeof COLUMN_WIDTH_KEYS[number];
+type ColumnPaddingLeftKey = typeof COLUMN_PADDING_LEFT_KEYS[number];
+type ColumnPaddingRightKey = typeof COLUMN_PADDING_RIGHT_KEYS[number];
+type ColumnPaddingBottomKey = typeof COLUMN_PADDING_BOTTOM_KEYS[number];
+
+type ListColumnPaddingUpdates = {
+  AColumnPaddingLeft?: number;
+  AColumnPaddingRight?: number;
+  BColumnPaddingLeft?: number;
+  BColumnPaddingRight?: number;
+  CColumnPaddingLeft?: number;
+  CColumnPaddingRight?: number;
+  DColumnPaddingLeft?: number;
+  DColumnPaddingRight?: number;
+  EColumnPaddingLeft?: number;
+  EColumnPaddingRight?: number;
+};
+
+type ListColumnWidthUpdates = {
+  AColumnWidth?: number;
+  BColumnWidth?: number;
+  CColumnWidth?: number;
+  DColumnWidth?: number;
+  EColumnWidth?: number;
+};
+
+type ListItemColumn = {
+  key: string;
+  textPrefix: typeof COLUMN_TEXT_PREFIXES[number];
+  widthKey: ColumnWidthKey;
+  paddingLeftKey: ColumnPaddingLeftKey;
+  paddingRightKey: ColumnPaddingRightKey;
+  paddingBottomKey: ColumnPaddingBottomKey;
+  width: number;
+  paddingLeft: number;
+  paddingRight: number;
+  paddingBottom: number;
+};
+
+type ColorKeys =
+  | 'textColor'
+  | 'backgroundColor'
+  | 'dividerColor'
+  | 'textHoverColor'
+  | 'backgroundHoverColor'
+  | 'dividerHoverColor';
+
+const COLOR_VAR_MAP: Record<ColorKeys, string> = {
+  textColor: 'text-color',
+  backgroundColor: 'background-color',
+  dividerColor: 'divider-color',
+  textHoverColor: 'text-hover-color',
+  backgroundHoverColor: 'background-hover-color',
+  dividerHoverColor: 'divider-hover-color',
+};
+
+const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
+
+const COL_RESIZE_HANDLE_WIDTH = 0.004;
+const COL_PADDING_HANDLE_WIDTH = 0.004;
+const MIN_COLUMN_WIDTH_PX = 50;
+const ARTICLE_DESIGN_WIDTH = 1440;
+const MIN_COLUMN_WIDTH = MIN_COLUMN_WIDTH_PX / ARTICLE_DESIGN_WIDTH;
+
+export function getListMinColumnWidth(designWidthPx?: number): number {
+  const designWidth = typeof designWidthPx === 'number' && designWidthPx > 0
+    ? designWidthPx
+    : ARTICLE_DESIGN_WIDTH;
+
+  return MIN_COLUMN_WIDTH_PX / designWidth;
+}
+
+function getEditorDesignWidth(element: HTMLElement | null | undefined): number {
+  let el = element ?? null;
+
+  while (el) {
+    const inline = el.style.getPropertyValue('--cntrl-article-width').trim();
+    if (inline) {
+      const px = parseFloat(inline);
+      if (Number.isFinite(px) && px > 0) {
+        return px;
+      }
+    }
+
+    const computed = getComputedStyle(el).getPropertyValue('--cntrl-article-width').trim();
+    if (computed) {
+      const px = parseFloat(computed);
+      if (Number.isFinite(px) && px > 0) {
+        return px;
+      }
+    }
+
+    el = el.parentElement;
+  }
+
+  return ARTICLE_DESIGN_WIDTH;
+}
+
+const DEFAULT_COLUMN_WIDTHS: Record<ColumnWidthKey, number> = {
+  AColumnWidth: 0.02,
+  BColumnWidth: 0.02,
+  CColumnWidth: 0.02,
+  DColumnWidth: 0.02,
+  EColumnWidth: 0.02,
+};
+
+export function getListEffectiveContentWidth(
+  settings: ListSettings,
+): number {
+  const wrapperWidth = typeof settings.wrapperWidth === 'number' ? settings.wrapperWidth : 1;
+
+  return Math.max(0, wrapperWidth);
+}
+
+export function getEqualListColumnWidthUpdates(
+  columns: number,
+  contentWidth: number = 1,
+): Record<ColumnWidthKey, number> {
+  const equalColumnWidth = contentWidth / columns;
+  return Object.fromEntries(
+    COLUMN_WIDTH_KEYS.map((key) => [key, equalColumnWidth]),
+  ) as Record<ColumnWidthKey, number>;
+}
+
+function getResetListColumnPaddingUpdates(): Record<
+  ColumnPaddingLeftKey | ColumnPaddingRightKey,
+  number
+> {
+  return Object.fromEntries([
+    ...COLUMN_PADDING_LEFT_KEYS.map((key) => [key, 0]),
+    ...COLUMN_PADDING_RIGHT_KEYS.map((key) => [key, 0]),
+  ]) as Record<ColumnPaddingLeftKey | ColumnPaddingRightKey, number>;
+}
+
+function getResetListColumnPaddingBottomUpdates(): Record<ColumnPaddingBottomKey, number> {
+  return Object.fromEntries(
+    COLUMN_PADDING_BOTTOM_KEYS.map((key) => [key, 0]),
+  ) as Record<ColumnPaddingBottomKey, number>;
+}
+
+function getStoredColumnWidths(
+  settings: ListSettings,
+): Record<ColumnWidthKey, number> {
+  return Object.fromEntries(
+    COLUMN_WIDTH_KEYS.map((key) => [
+      key,
+      typeof settings[key] === 'number'
+        ? settings[key] as number
+        : DEFAULT_COLUMN_WIDTHS[key],
+    ]),
+  ) as Record<ColumnWidthKey, number>;
+}
+
+export function resolveListColumnPadding(
+  columnWidth: number,
+  paddingLeft: number,
+  paddingRight: number,
+): { paddingLeft: number; paddingRight: number } {
+  const maxTotalPadding = columnWidth - MIN_COLUMN_WIDTH;
+  const totalPadding = paddingLeft + paddingRight;
+
+  if (totalPadding <= 0 || totalPadding <= maxTotalPadding) {
+    return { paddingLeft, paddingRight };
+  }
+
+  if (maxTotalPadding <= 0) {
+    return { paddingLeft: 0, paddingRight: 0 };
+  }
+
+  const scale = maxTotalPadding / totalPadding;
+
+  return {
+    paddingLeft: paddingLeft * scale,
+    paddingRight: paddingRight * scale,
+  };
+}
+
+export function getEffectiveListColumnWidths(
+  columns: number,
+  wrapperWidth: number,
+  storedWidths: Record<ColumnWidthKey, number>,
+): number[] {
+  const resolvedWidths = resolveListColumnWidths(columns, wrapperWidth, storedWidths);
+
+  if (columns <= 0) {
+    return [];
+  }
+
+  const sumFixed = resolvedWidths.slice(0, columns - 1).reduce((sum, width) => sum + width, 0);
+
+  return [
+    ...resolvedWidths.slice(0, columns - 1),
+    Math.max(0, wrapperWidth - sumFixed),
+  ];
+}
+
+function getListColumnPaddingUpdates(
+  columns: number,
+  effectiveWidths: number[],
+  settings: ListSettings,
+): ListColumnPaddingUpdates {
+  const updates: ListColumnPaddingUpdates = {};
+
+  for (let index = 0; index < columns; index += 1) {
+    const paddingLeftKey = COLUMN_PADDING_LEFT_KEYS[index];
+    const paddingRightKey = COLUMN_PADDING_RIGHT_KEYS[index];
+    const storedPaddingLeft = typeof settings[paddingLeftKey] === 'number'
+      ? settings[paddingLeftKey] as number
+      : 0;
+    const storedPaddingRight = typeof settings[paddingRightKey] === 'number'
+      ? settings[paddingRightKey] as number
+      : 0;
+    const resolvedPadding = resolveListColumnPadding(
+      effectiveWidths[index] ?? 0,
+      storedPaddingLeft,
+      storedPaddingRight,
+    );
+
+    if (resolvedPadding.paddingLeft !== storedPaddingLeft) {
+      updates[paddingLeftKey] = resolvedPadding.paddingLeft;
+    }
+
+    if (resolvedPadding.paddingRight !== storedPaddingRight) {
+      updates[paddingRightKey] = resolvedPadding.paddingRight;
+    }
+  }
+
+  return updates;
+}
+
+export function resolveListColumnWidths(
+  columns: number,
+  wrapperWidth: number,
+  storedWidths: Record<ColumnWidthKey, number>,
+): number[] {
+  if (columns <= 0) {
+    return [];
+  }
+
+  const widths = COLUMN_WIDTH_KEYS.slice(0, columns).map(
+    (key) => storedWidths[key],
+  );
+
+  if (columns === 1) {
+    return widths;
+  }
+
+  const fixedWidths = widths.slice(0, columns - 1);
+  const fixedSum = fixedWidths.reduce((sum, width) => sum + width, 0);
+  const minTotalWidth = fixedSum + MIN_COLUMN_WIDTH;
+
+  if (wrapperWidth >= minTotalWidth) {
+    return widths;
+  }
+
+  const resolvedFixedWidths = [...fixedWidths];
+  let overflow = minTotalWidth - wrapperWidth;
+
+  for (let index = resolvedFixedWidths.length - 1; index >= 0 && overflow > 0; index -= 1) {
+    const shrinkable = resolvedFixedWidths[index] - MIN_COLUMN_WIDTH;
+    if (shrinkable <= 0) {
+      continue;
+    }
+
+    const shrinkAmount = Math.min(overflow, shrinkable);
+    resolvedFixedWidths[index] -= shrinkAmount;
+    overflow -= shrinkAmount;
+  }
+
+  return [...resolvedFixedWidths, widths[columns - 1]];
+}
+
+function getListColumnWidthUpdatesForWrapperWidth(
+  columns: number,
+  wrapperWidth: number,
+  storedWidths: Record<ColumnWidthKey, number>,
+): ListColumnWidthUpdates {
+  if (columns <= 1) {
+    return {};
+  }
+
+  const resolvedWidths = resolveListColumnWidths(columns, wrapperWidth, storedWidths);
+  const updates: ListColumnWidthUpdates = {};
+
+  for (let index = 0; index < columns - 1; index += 1) {
+    const key = COLUMN_WIDTH_KEYS[index];
+    if (resolvedWidths[index] !== storedWidths[key]) {
+      updates[key] = resolvedWidths[index];
+    }
+  }
+
+  return updates;
+}
+
+function getColumnsOrder(settings: ListSettings): string[] {
+  if (Array.isArray(settings.columnsOrder) && settings.columnsOrder.length > 0) {
+    return settings.columnsOrder as string[];
+  }
+
+  return [...COLUMN_CONTENT_KEYS];
+}
+
+function areStringArraysEqual(left: string[], right: string[]): boolean {
+  if (left.length !== right.length) {
+    return false;
+  }
+
+  return left.every((value, index) => value === right[index]);
+}
+
+function getColumnLayoutUpdatesForOrderChange(
+  nextOrder: string[],
+  prevOrder: string[],
+  prevSettings: ListSettings,
+  columns: number,
+): Record<string, number> {
+  const count = Math.min(columns, nextOrder.length, COLUMN_WIDTH_KEYS.length);
+  const updates: Record<string, number> = {};
+
+  for (let index = 0; index < count; index += 1) {
+    const contentKey = nextOrder[index];
+    const prevSlotIndex = prevOrder.indexOf(contentKey);
+
+    if (prevSlotIndex === -1) {
+      continue;
+    }
+
+    const prevWidthKey = COLUMN_WIDTH_KEYS[prevSlotIndex];
+    const prevPaddingLeftKey = COLUMN_PADDING_LEFT_KEYS[prevSlotIndex];
+    const prevPaddingRightKey = COLUMN_PADDING_RIGHT_KEYS[prevSlotIndex];
+    const prevPaddingBottomKey = COLUMN_PADDING_BOTTOM_KEYS[prevSlotIndex];
+    const widthKey = COLUMN_WIDTH_KEYS[index];
+    const paddingLeftKey = COLUMN_PADDING_LEFT_KEYS[index];
+    const paddingRightKey = COLUMN_PADDING_RIGHT_KEYS[index];
+    const paddingBottomKey = COLUMN_PADDING_BOTTOM_KEYS[index];
+
+    const prevWidth = prevSettings[prevWidthKey];
+    const prevPaddingLeft = prevSettings[prevPaddingLeftKey];
+    const prevPaddingRight = prevSettings[prevPaddingRightKey];
+    const prevPaddingBottom = prevSettings[prevPaddingBottomKey];
+
+    if (typeof prevWidth === 'number') {
+      updates[widthKey] = prevWidth;
+    }
+
+    if (typeof prevPaddingLeft === 'number') {
+      updates[paddingLeftKey] = prevPaddingLeft;
+    }
+
+    if (typeof prevPaddingRight === 'number') {
+      updates[paddingRightKey] = prevPaddingRight;
+    }
+
+    if (typeof prevPaddingBottom === 'number') {
+      updates[paddingBottomKey] = prevPaddingBottom;
+    }
+  }
+
+  return updates;
+}
+
+export function applyListSettingsChange(
+  nextSettings: ListSettings,
+  prevSettings: ListSettings,
+  options?: { designWidth?: number },
+): ListSettings {
+  const textSyncUpdates = getListGlobalTextSyncUpdates(nextSettings, prevSettings);
+  if (textSyncUpdates) {
+    nextSettings = { ...nextSettings, ...textSyncUpdates };
+  }
+
+  const valignSanitizeUpdates = getListColumnVerticalAlignSanitizeUpdates(nextSettings);
+  if (valignSanitizeUpdates) {
+    nextSettings = { ...nextSettings, ...valignSanitizeUpdates };
+  }
+
+  const minColumnWidth = getListMinColumnWidth(options?.designWidth);
+  const nextColumns = nextSettings.columns;
+  const prevColumns = prevSettings.columns;
+  const nextContentWidth = getListEffectiveContentWidth(nextSettings);
+  const prevContentWidth = getListEffectiveContentWidth(prevSettings);
+  const isVerticalLayout = nextSettings.type === 'B'
+    || (nextSettings.type === undefined && prevSettings.type === 'B');
+  const columns =
+    typeof nextColumns === 'number'
+      ? nextColumns
+      : typeof prevColumns === 'number'
+        ? prevColumns
+        : COLUMN_CONTENT_KEYS.length;
+
+  const withColumnPaddingUpdates = (
+    settings: ListSettings,
+  ): ListSettings => {
+    if (isVerticalLayout) {
+      return settings;
+    }
+
+    const storedWidths = getStoredColumnWidths({ ...prevSettings, ...settings });
+    const contentWidth = getListEffectiveContentWidth(settings);
+    const effectiveWidths = getEffectiveListColumnWidths(columns, contentWidth, storedWidths);
+    const paddingUpdates = getListColumnPaddingUpdates(columns, effectiveWidths, {
+      ...prevSettings,
+      ...settings,
+    });
+
+    if (Object.keys(paddingUpdates).length === 0) {
+      return settings;
+    }
+
+    return {
+      ...settings,
+      ...paddingUpdates,
+    };
+  };
+
+  if (typeof nextColumns === 'number' && nextColumns !== prevColumns) {
+    const updates: ListSettings = {
+      ...nextSettings,
+      ...getEqualListColumnWidthUpdates(nextColumns, nextContentWidth),
+      ...getResetListColumnPaddingUpdates(),
+    };
+
+    if (isVerticalLayout) {
+      for (const key of COLUMN_PADDING_BOTTOM_KEYS) {
+        if (typeof prevSettings[key] === 'number') {
+          updates[key] = prevSettings[key];
+        }
+      }
+    } else {
+      Object.assign(updates, getResetListColumnPaddingBottomUpdates());
+    }
+
+    return updates;
+  }
+
+  const nextOrder = getColumnsOrder(nextSettings);
+  const prevOrder = getColumnsOrder(prevSettings);
+
+  if (!areStringArraysEqual(nextOrder, prevOrder)) {
+    return withColumnPaddingUpdates({
+      ...nextSettings,
+      ...getColumnLayoutUpdatesForOrderChange(nextOrder, prevOrder, prevSettings, columns),
+    });
+  }
+
+  if (nextContentWidth < prevContentWidth) {
+    if (typeof columns === 'number' && !isVerticalLayout) {
+      const storedWidths = getStoredColumnWidths({ ...prevSettings, ...nextSettings });
+
+      return withColumnPaddingUpdates({
+        ...nextSettings,
+        ...getListColumnWidthUpdatesForWrapperWidth(columns, nextContentWidth, storedWidths),
+      });
+    }
+  }
+
+  if (isVerticalLayout) {
+    const storedTextPaddingLR = typeof nextSettings.textPaddingLR === 'number'
+      ? nextSettings.textPaddingLR as number
+      : 0;
+    const maxAllowedPadding = Math.max(0, (nextContentWidth - minColumnWidth) / 2);
+
+    if (storedTextPaddingLR > maxAllowedPadding) {
+      return { ...nextSettings, textPaddingLR: maxAllowedPadding };
+    }
+
+    return nextSettings;
+  }
+
+  const storedWidths = getStoredColumnWidths({ ...prevSettings, ...nextSettings });
+  const prevEffectiveWidths = getEffectiveListColumnWidths(
+    columns,
+    prevContentWidth,
+    getStoredColumnWidths(prevSettings),
+  );
+  const nextEffectiveWidths = getEffectiveListColumnWidths(
+    columns,
+    nextContentWidth,
+    storedWidths,
+  );
+  const columnWidthDecreased = nextEffectiveWidths.some(
+    (width, index) => width < (prevEffectiveWidths[index] ?? width),
+  );
+  const columnWidthSettingChanged = COLUMN_WIDTH_KEYS.some((key) => {
+    const nextWidth = nextSettings[key];
+    const prevWidth = prevSettings[key];
+
+    return typeof nextWidth === 'number'
+      && typeof prevWidth === 'number'
+      && nextWidth !== prevWidth;
+  });
+
+  if (columnWidthDecreased || columnWidthSettingChanged) {
+    return withColumnPaddingUpdates(nextSettings);
+  }
+
+  return nextSettings;
+}
+
+function getColumnMaxWidth(
+  columnIndex: number,
+  resolvedWidths: number[],
+  storedWidths: number[],
+  wrapperWidth: number,
+): number {
+  const leftWidth = resolvedWidths
+    .slice(0, columnIndex)
+    .reduce((sum, width) => sum + width, 0);
+  const rightPreferredWidth = storedWidths
+    .slice(columnIndex + 1, resolvedWidths.length - 1)
+    .reduce((sum, width) => sum + width, 0);
+
+  return Math.max(
+    MIN_COLUMN_WIDTH,
+    wrapperWidth - leftWidth - rightPreferredWidth - MIN_COLUMN_WIDTH,
+  );
+}
+
+function randomBetween(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+function getColumnWidthsFromSettings(
+  settings: ListSettings,
+): Record<ColumnWidthKey, number> {
+  return Object.fromEntries(
+    COLUMN_WIDTH_KEYS.map((key) => [
+      key,
+      typeof settings[key] === 'number' ? settings[key] as number : DEFAULT_COLUMN_WIDTHS[key],
+    ]),
+  ) as Record<ColumnWidthKey, number>;
+}
+
+function getNumericSettingValues<K extends ColumnPaddingLeftKey | ColumnPaddingRightKey | ColumnPaddingBottomKey>(
+  settings: ListSettings,
+  keys: readonly K[],
+  fallback = 0,
+): Record<K, number> {
+  return Object.fromEntries(
+    keys.map((key) => [
+      key,
+      typeof settings[key] === 'number' ? settings[key] as number : fallback,
+    ]),
+  ) as Record<K, number>;
+}
+
+function buildListColumns(
+  columnContentOrder: readonly typeof COLUMN_CONTENT_KEYS[number][],
+  columns: number,
+  columnWidthByKey: Record<ColumnWidthKey, number>,
+  columnPaddingLeftByKey: Record<ColumnPaddingLeftKey, number>,
+  columnPaddingRightByKey: Record<ColumnPaddingRightKey, number>,
+  columnPaddingBottomByKey: Record<ColumnPaddingBottomKey, number>,
+): ListItemColumn[] {
+  return columnContentOrder.slice(0, columns).map((key, index) => {
+    const paddingLeftKey = COLUMN_PADDING_LEFT_KEYS[index];
+    const paddingRightKey = COLUMN_PADDING_RIGHT_KEYS[index];
+    const paddingBottomKey = COLUMN_PADDING_BOTTOM_KEYS[index];
+
+    return {
+      key,
+      textPrefix: COLUMN_CONTENT_KEY_TO_TEXT_PREFIX[key],
+      widthKey: COLUMN_WIDTH_KEYS[index],
+      width: columnWidthByKey[COLUMN_WIDTH_KEYS[index]],
+      paddingLeftKey,
+      paddingRightKey,
+      paddingBottomKey,
+      paddingLeft: columnPaddingLeftByKey[paddingLeftKey],
+      paddingRight: columnPaddingRightByKey[paddingRightKey],
+      paddingBottom: columnPaddingBottomByKey[paddingBottomKey],
+    };
+  });
+}
+
+export function List({ settings, content, isEditor, isPreviewMode, activeEvent, layoutId, onUpdateSettings }: ListProps) {
+  const { prefix: P } = useScopedStyles();
+  const showControls = Boolean(isEditor && isPreviewMode);
+  const {
+    columns,
+    type,
+    wrapperWidth,
+    entriesCount,
+    cellMinHeight,
+    dividerWidth,
+    showVisibility,
+    cut,
+    showCut,
+    cutCellMinHeight,
+    cutLabel,
+    imageSize,
+    imageOnHover,
+    entryHoverEffect,
+    rowPaddingTop,
+    rowPaddingBottom,
+    rowPaddingTopB,
+    columnsOrder,
+    textPaddingLR,
+    textColor,
+    textFontFamily,
+    textFontSettings,
+    textFontSize,
+    textLineHeight,
+    textLetterSpacing,
+    textWordSpacing,
+    textTextAppearance,
+    backgroundColor,
+    dividerColor,
+    textHoverColor,
+    backgroundHoverColor,
+    dividerHoverColor,
+  } = settings;
+
+  const [visibleRowCount, setVisibleRowCount] = useState<number | undefined>(undefined);
+  const [hoverImage, setHoverImage] = useState<HoverImageState | null>(null);
+  const showHoverImage = imageOnHover === 'On' && (!isEditor || isPreviewMode);
+  const cutEnabled = (cut ?? 0) > 0;
+  const isVerticalLayout = type === 'B';
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [designWidth, setDesignWidth] = useState(ARTICLE_DESIGN_WIDTH);
+  const minColumnWidth = getListMinColumnWidth(designWidth);
+
+  const storedTextPaddingLRMax = Math.max(0, ((wrapperWidth ?? 0) - minColumnWidth) / 2);
+  const effectiveTextPaddingLR = Math.min(textPaddingLR ?? 0, storedTextPaddingLRMax);
+  const textPaddingLRHandleWidth = Math.max(effectiveTextPaddingLR, COL_PADDING_HANDLE_WIDTH);
+  const textPaddingLRMaxFraction = ((wrapperWidth ?? 0) + minColumnWidth) / 2;
+
+  useLayoutEffect(() => {
+    if (!isEditor) {
+      setDesignWidth(ARTICLE_DESIGN_WIDTH);
+      return;
+    }
+
+    const syncDesignWidth = () => {
+      setDesignWidth(getEditorDesignWidth(containerRef.current));
+    };
+
+    syncDesignWidth();
+
+    const observed = containerRef.current;
+    if (!observed) {
+      return;
+    }
+
+    const observer = new ResizeObserver(syncDesignWidth);
+    observer.observe(observed);
+
+    let pageEl: HTMLElement | null = observed;
+    while (pageEl && !pageEl.style.getPropertyValue('--cntrl-article-width')) {
+      pageEl = pageEl.parentElement;
+    }
+    if (pageEl) {
+      observer.observe(pageEl);
+    }
+
+    return () => observer.disconnect();
+  }, [isEditor, layoutId]);
+
+  useEffect(() => {
+    setVisibleRowCount(undefined);
+  }, [cut, showCut, content, entriesCount]);
+
+  const colorVars = buildColorVars(P, {
+    textColor,
+    backgroundColor,
+    dividerColor,
+    textHoverColor,
+    backgroundHoverColor,
+    dividerHoverColor
+  }, COLOR_VAR_MAP, STATE_KEYS);
+
+  const stateClass = activeEvent && activeEvent !== 'default' ? \`\${P}-state-\${activeEvent}\` : '';
+  const entryHoverClass =
+    entryHoverEffect === 'Default'
+      ? \`\${P}-entry-hover-default\`
+      : entryHoverEffect === 'Blinds'
+        ? \`\${P}-entry-hover-blinds\`
+        : '';
+  const wrapperStateClasses = \`\${entryHoverClass} \${stateClass}\`.trim();
+  const showDividerTop = showVisibility?.[0] ?? false;
+  const showDividerBottom = showVisibility?.[1] ?? false;
+
+  const prevSettingsRef = useRef(settings);
+  const prevLayoutIdRef = useRef(layoutId);
+
+  useEffect(() => {
+    if (!onUpdateSettings || !isEditor) {
+      prevSettingsRef.current = settings;
+      prevLayoutIdRef.current = layoutId;
+      return;
+    }
+
+    if (prevLayoutIdRef.current !== layoutId) {
+      prevSettingsRef.current = settings;
+      prevLayoutIdRef.current = layoutId;
+      return;
+    }
+
+    const prevSettings = prevSettingsRef.current;
+    const updatedSettings = applyListSettingsChange(
+      settings,
+      prevSettings,
+      { designWidth },
+    );
+
+    prevSettingsRef.current = settings;
+
+    if (updatedSettings === settings) {
+      return;
+    }
+
+    onUpdateSettings(updatedSettings);
+  }, [settings, onUpdateSettings, isEditor, layoutId, designWidth]);
+
+  const columnWidthByKey = useMemo(
+    () => getColumnWidthsFromSettings(settings),
+    [
+      settings.AColumnWidth,
+      settings.BColumnWidth,
+      settings.CColumnWidth,
+      settings.DColumnWidth,
+      settings.EColumnWidth,
+    ],
+  );
+
+  const columnPaddingLeftByKey = useMemo(
+    () => getNumericSettingValues(settings, COLUMN_PADDING_LEFT_KEYS),
+    [
+      settings.AColumnPaddingLeft,
+      settings.BColumnPaddingLeft,
+      settings.CColumnPaddingLeft,
+      settings.DColumnPaddingLeft,
+      settings.EColumnPaddingLeft,
+    ],
+  );
+
+  const columnPaddingRightByKey = useMemo(
+    () => getNumericSettingValues(settings, COLUMN_PADDING_RIGHT_KEYS),
+    [
+      settings.AColumnPaddingRight,
+      settings.BColumnPaddingRight,
+      settings.CColumnPaddingRight,
+      settings.DColumnPaddingRight,
+      settings.EColumnPaddingRight,
+    ],
+  );
+
+  const columnPaddingBottomByKey = useMemo(
+    () => getNumericSettingValues(settings, COLUMN_PADDING_BOTTOM_KEYS),
+    [
+      settings.AColumnPaddingBottom,
+      settings.BColumnPaddingBottom,
+      settings.CColumnPaddingBottom,
+      settings.DColumnPaddingBottom,
+      settings.EColumnPaddingBottom,
+    ],
+  );
+
+  const columnContentOrder = useMemo((): typeof COLUMN_CONTENT_KEYS[number][] => {
+    if (Array.isArray(columnsOrder) && columnsOrder.length > 0) {
+      return columnsOrder as typeof COLUMN_CONTENT_KEYS[number][];
+    }
+    return [...COLUMN_CONTENT_KEYS];
+  }, [columnsOrder]);
+
+  const listColumns = useMemo(
+    () => buildListColumns(
+      columnContentOrder,
+      columns,
+      columnWidthByKey,
+      columnPaddingLeftByKey,
+      columnPaddingRightByKey,
+      columnPaddingBottomByKey,
+    ),
+    [columnContentOrder, columns, columnWidthByKey, columnPaddingLeftByKey, columnPaddingRightByKey, columnPaddingBottomByKey],
+  );
+
+  const resolvedContentWidth = getListEffectiveContentWidth(settings);
+
+  const storedColumnWidths = useMemo(
+    () => COLUMN_WIDTH_KEYS.slice(0, columns).map((key) => columnWidthByKey[key]),
+    [columns, columnWidthByKey],
+  );
+
+  const resolvedColumnWidths = useMemo(
+    () => resolveListColumnWidths(columns, resolvedContentWidth, columnWidthByKey),
+    [columns, resolvedContentWidth, columnWidthByKey],
+  );
+
+  const effectiveColumnWidths = useMemo(
+    () => getEffectiveListColumnWidths(columns, resolvedContentWidth, columnWidthByKey),
+    [columns, resolvedContentWidth, columnWidthByKey],
+  );
+
+  const effectiveColumnPaddings = useMemo(
+    () =>
+      listColumns.map((col, index) =>
+        resolveListColumnPadding(
+          effectiveColumnWidths[index] ?? 0,
+          col.paddingLeft,
+          col.paddingRight,
+        )),
+    [listColumns, effectiveColumnWidths],
+  );
+
+  const allRows: ListItemRow[] = useMemo(() => {
+    const resEntriesCount = entriesCount === 0 ? Infinity : entriesCount;
+    const items = (content ?? []).slice(0, resEntriesCount);
+
+    return items.map((item, index) => ({
+      id: index,
+      cells: Object.fromEntries(
+        COLUMN_CONTENT_KEYS.map((key) => [key, item[key] ?? ''])
+      ),
+      image: item.image,
+      link: item.link,
+    }));
+  }, [content, entriesCount]);
+
+  const effectiveVisibleCount = cutEnabled
+    ? (visibleRowCount ?? cut)
+    : allRows.length;
+
+  const visibleRows = useMemo(() => {
+    if (cutEnabled) {
+      return allRows.slice(0, effectiveVisibleCount);
+    }
+    return allRows;
+  }, [allRows, cutEnabled, effectiveVisibleCount]);
+
+  const showCutLabel = cutEnabled && effectiveVisibleCount < allRows.length;
+
+  const hasBetweenItemDividers = visibleRows.length > 1 || showCutLabel;
+  const dividerClassNames = [
+    showDividerTop ? \`\${P}-divider-top\` : '',
+    showDividerBottom || hasBetweenItemDividers ? \`\${P}-divider-bottom\` : '',
+  ].filter(Boolean).join(' ');
+
+  const handleShowMore = () => {
+    const currentVisible = visibleRowCount ?? cut;
+    if (!showCut) {
+      setVisibleRowCount(allRows.length);
+      return;
+    }
+    setVisibleRowCount(Math.min(currentVisible + showCut, allRows.length));
+  };
+
+  const scaled = (v: number) => scalingValue(v, isEditor ?? false);
+  const resolvedRowPaddingTop = isVerticalLayout
+    ? (rowPaddingTopB ?? 0)
+    : (rowPaddingTop ?? 0);
+  const resolvedRowPaddingBottom = rowPaddingBottom ?? 0;
+  const resolvedCellMinHeight = cellMinHeight ?? 0;
+  const rowPaddingTopControlKey = isVerticalLayout ? 'rowPaddingTopB' : 'rowPaddingTop';
+  const firstColumn = listColumns[0];
+  const lastColumn = listColumns[listColumns.length - 1];
+  const firstColumnEffectivePadding = effectiveColumnPaddings[0];
+  const lastColumnEffectivePadding = effectiveColumnPaddings[effectiveColumnPaddings.length - 1];
+  const firstColumnPaddingLeftWidth = firstColumn && firstColumnEffectivePadding
+    ? Math.max(firstColumnEffectivePadding.paddingLeft, COL_PADDING_HANDLE_WIDTH)
+    : 0;
+  const lastColumnPaddingRightWidth = lastColumn && lastColumnEffectivePadding
+    ? Math.max(lastColumnEffectivePadding.paddingRight, COL_PADDING_HANDLE_WIDTH)
+    : 0;
+  const columnsRightEdge = resolvedContentWidth;
+
+  const getHoverImagePosition = (event: React.MouseEvent) => {
+    const container = containerRef.current;
+    if (!container) {
+      return { x: 0, y: 0 };
+    }
+
+    const rect = container.getBoundingClientRect();
+    return {
+      x: event.clientX - rect.left + HOVER_IMAGE_CURSOR_OFFSET,
+      y: event.clientY - rect.top + HOVER_IMAGE_CURSOR_OFFSET,
+    };
+  };
+
+  const handleRowMouseEnter = (row: ListItemRow, event: React.MouseEvent) => {
+    if (!showHoverImage) return;
+
+    const image = row.image;
+    if (!image?.url) {
+      setHoverImage(null);
+      return;
+    }
+
+    const { x, y } = getHoverImagePosition(event);
+    const minWidth = imageSize?.min ?? 80;
+    const maxWidth = imageSize?.max ?? 320;
+    const widthPx = hoverImage?.rowId === row.id
+      ? hoverImage.widthPx
+      : randomBetween(minWidth, maxWidth);
+
+    setHoverImage({
+      rowId: row.id,
+      url: image.url,
+      objectFit: image.objectFit ?? 'cover',
+      widthPx,
+      x,
+      y,
+    });
+  };
+
+  const handleWrapperMouseMove = (event: React.MouseEvent) => {
+    if (!showHoverImage || !hoverImage) return;
+
+    const { x, y } = getHoverImagePosition(event);
+    setHoverImage((prev) => {
+      if (!prev) return prev;
+      if (prev.x === x && prev.y === y) return prev;
+      return { ...prev, x, y };
+    });
+  };
+
+  const handleWrapperMouseLeave = () => {
+    setHoverImage(null);
+  };
+
+  const hasBaselineColumn = useMemo(
+    () =>
+      !isVerticalLayout &&
+      COLUMN_TEXT_PREFIXES.some((prefix) => {
+        const columnLetter = prefix.charAt(0);
+        const valign = settings[\`\${prefix}VerticalAlign\` as ListColumnVerticalAlignKey];
+        return isActiveBaselineVAlign(valign, settings, columnLetter);
+      }),
+    [
+      isVerticalLayout,
+      settings,
+      settings.AColumnVerticalAlign,
+      settings.BColumnVerticalAlign,
+      settings.CColumnVerticalAlign,
+      settings.DColumnVerticalAlign,
+      settings.EColumnVerticalAlign,
+    ],
+  );
+  
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const clearBaselineStyles = () => {
+      container.querySelectorAll<HTMLElement>('[data-list-col]').forEach((el) => {
+        el.style.transform = '';
+        const listCol = el.querySelector<HTMLElement>(\`.\${P}-list-col\`);
+        if (listCol) {
+          listCol.style.minHeight = '';
+          listCol.style.height = '';
+        }
+        const title = el.querySelector<HTMLElement>(\`.\${P}-list-col-title\`);
+        if (title) {
+          title.style.transform = '';
+        }
+      });
+    };
+
+    if (isVerticalLayout || !hasBaselineColumn) {
+      clearBaselineStyles();
+      return;
+    }
+
+    const applyBaselines = () => {
+      container.querySelectorAll<HTMLElement>('[data-list-row]').forEach((rowEl) => {
+        const cols = Array.from(rowEl.querySelectorAll<HTMLElement>('[data-list-col]'));
+        cols.forEach((el) => {
+          el.style.transform = '';
+          const listCol = el.querySelector<HTMLElement>(\`.\${P}-list-col\`);
+          if (listCol) {
+            listCol.style.minHeight = '';
+            listCol.style.height = '';
+          }
+          const title = el.querySelector<HTMLElement>(\`.\${P}-list-col-title\`);
+          if (title) {
+            title.style.transform = '';
+          }
+        });
+
+        syncRowListColHeights(rowEl, cols, \`\${P}-list-col\`);
+        void rowEl.offsetHeight;
+        const rowTop = rowEl.getBoundingClientRect().top;
+
+        type ColInfo = {
+          el: HTMLElement;
+          titleEl: HTMLElement | null;
+          letter: string;
+          kind: string;
+          anchor: string | null;
+        };
+
+        const probeClassName = \`\${P}-baseline-probe\`;
+        const byLetter = new Map<string, ColInfo>();
+        const infos: ColInfo[] = cols.map((el) => {
+          const titleEl = el.querySelector<HTMLElement>(\`.\${P}-list-col-title\`);
+          const info: ColInfo = {
+            el,
+            titleEl,
+            letter: el.getAttribute('data-col-letter') ?? '',
+            kind: el.getAttribute('data-valign') ?? 'top',
+            anchor: el.getAttribute('data-valign-anchor'),
+          };
+          byLetter.set(info.letter, info);
+          return info;
+        });
+
+        const finalBaseline = new Map<string, number>();
+        const resolve = (info: ColInfo, stack: Set<string>): number => {
+          const cached = finalBaseline.get(info.letter);
+          if (cached !== undefined) return cached;
+
+          const anchor = info.anchor ? byLetter.get(info.anchor) : undefined;
+          if (info.kind !== 'baseline' || !anchor || stack.has(info.letter)) {
+            const baseline = measureColumnFirstLineBaselineOffset(
+              info,
+              rowTop,
+              \`\${P}-list-col\`,
+              probeClassName,
+            );
+            finalBaseline.set(info.letter, baseline);
+            return baseline;
+          }
+
+          stack.add(info.letter);
+          const anchorBaseline = resolve(anchor, stack);
+          stack.delete(info.letter);
+
+          const followerNatural = measureColumnFirstLineBaselineOffset(
+            info,
+            rowTop,
+            \`\${P}-list-col\`,
+            probeClassName,
+          );
+          const shift = anchorBaseline - followerNatural;
+          applyBaselineTitleShift(info.titleEl, shift);
+
+          const result = measureColumnFirstLineBaselineOffset(
+            info,
+            rowTop,
+            \`\${P}-list-col\`,
+            probeClassName,
+          );
+          finalBaseline.set(info.letter, result);
+          return result;
+        };
+
+        infos.forEach((info) => resolve(info, new Set<string>()));
+      });
+    };
+
+    applyBaselines();
+
+    const observer = new ResizeObserver(() => applyBaselines());
+    observer.observe(container);
+
+    let cancelled = false;
+    if (typeof document !== 'undefined' && document.fonts?.ready) {
+      document.fonts.ready.then(() => {
+        if (!cancelled) applyBaselines();
+      });
+    }
+
+    return () => {
+      cancelled = true;
+      observer.disconnect();
+      clearBaselineStyles();
+    };
+  }, [
+    hasBaselineColumn,
+    isVerticalLayout,
+    settings,
+    content,
+    designWidth,
+    visibleRows,
+    effectiveColumnWidths,
+  ]);
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: getCSS(P) }} />
+      <div style={colorVars}>
+        <div
+          ref={containerRef}
+          className={\`\${P}-wrapper \${wrapperStateClasses}\${dividerClassNames ? \` \${dividerClassNames}\` : ''}\${isVerticalLayout ? \` \${P}-type-b\` : ''}\`.trim()}
+          style={{
+            width: scalingValue(wrapperWidth ?? 0, isEditor),
+          }}
+          onMouseMove={showHoverImage ? handleWrapperMouseMove : undefined}
+          onMouseLeave={showHoverImage ? handleWrapperMouseLeave : undefined}
+        >
+          <div style={{ width: '100%' }}>
+            {visibleRows.map((row, rowIdx) => {
+              const hasLink = (row.link?.length ?? 0) > 0;
+              const RowElement = hasLink ? 'a' : 'div';
+              const rowStyle = getEntryDividerWidths(
+                rowIdx,
+                visibleRows.length,
+                showDividerTop,
+                showDividerBottom,
+                showCutLabel,
+                dividerWidth ?? 0,
+                isEditor ?? false,
+              );
+
+              return (
+              <RowElement
+                key={row.id}
+                className={\`\${P}-list-item\${hasLink ? \` \${P}-list-item-has-link\` : ''}\`}
+                {...(hasLink ? { href: row.link, target: '_blank' } : {})}
+                style={rowStyle}
+                onMouseEnter={showHoverImage ? (event) => handleRowMouseEnter(row, event) : undefined}
+              >
+                {(resolvedRowPaddingTop > 0 || showControls) && (
+                  <div
+                    {...(showControls ? {
+                      'data-controls': rowPaddingTopControlKey,
+                      'data-controls-axis': 'y',
+                      'data-controls-min': '0',
+                    } : {})}
+                    className={\`\${P}-row-padding-handle\`}
+                    style={{ height: scaled(resolvedRowPaddingTop) }}
+                  />
+                )}
+                <div
+                  className={\`\${P}-list-cols-row\${isVerticalLayout ? '' : \` \${P}-list-cols-row-h\`}\`}
+                  {...(isVerticalLayout ? {} : { 'data-list-row': '' })}
+                  style={isVerticalLayout ? undefined : { minHeight: scaled(resolvedCellMinHeight) }}
+                >
+                  {listColumns.map((col, colIndex) => {
+                    const isLastColumn = colIndex === listColumns.length - 1;
+                    const effectivePadding = effectiveColumnPaddings[colIndex];
+                    const columnPaddingBottom = col.paddingBottom;
+                    const hasColumnText = hasListColumnText(row.cells[col.key]);
+                    const showColumnPaddingBottom = isVerticalLayout
+                      && hasColumnText
+                      && (columnPaddingBottom > 0 || showControls);
+                    const columnSizeStyle = isVerticalLayout
+                      ? { minHeight: scaled(resolvedCellMinHeight) }
+                      : (isLastColumn ? {} : { width: scaled(effectiveColumnWidths[colIndex]) });
+                    const columnPaddingStyle = isVerticalLayout
+                      ? {
+                        paddingLeft: scaled(effectiveTextPaddingLR),
+                        paddingRight: scaled(effectiveTextPaddingLR),
+                      }
+                      : {
+                        paddingLeft: scaled(effectivePadding.paddingLeft),
+                        paddingRight: scaled(effectivePadding.paddingRight),
+                      };
+                    const columnLetter = col.textPrefix.charAt(0);
+                    const vAlign = isVerticalLayout
+                      ? { kind: 'top' as const }
+                      : resolveColumnVerticalAlign(
+                        settings[\`\${col.textPrefix}VerticalAlign\` as ListColumnVerticalAlignKey],
+                        settings,
+                        columnLetter,
+                      );
+
+                    return (
+                      <div
+                        key={col.key}
+                        {...(isVerticalLayout
+                          ? {}
+                          : {
+                            'data-list-col': '',
+                            'data-col-letter': columnLetter,
+                            'data-valign': vAlign.kind,
+                            ...(vAlign.kind === 'baseline'
+                              ? { 'data-valign-anchor': vAlign.anchorLetter }
+                              : {}),
+                          })}
+                      >
+                        <div
+                          className={\`\${P}-list-col\${isLastColumn ? \` \${P}-list-col-last\` : ''}\`}
+                          style={{
+                            ...columnPaddingStyle,
+                            ...columnSizeStyle,
+                          }}
+                          data-test={col.width}
+                        >
+                          <span
+                            className={getListColumnTitleClassName(
+                              settings,
+                              col.textPrefix,
+                              \`\${P}-list-col-title\`,
+                              \`\${P}-text-tight-leading\`,
+                            )}
+                            style={{
+                              ...listColumnTextFieldsToCss(resolveListColumnTextFields(settings, col.textPrefix), isEditor),
+                              ...getListColumnTitleVars(settings, col.textPrefix, P, isEditor),
+                              ...(!isVerticalLayout ? vAlignToTitleStyle(vAlign.kind) : {}),
+                            }}
+                          >
+                            {row.cells[col.key] ?? null}
+                          </span>
+                        </div>
+                        {showColumnPaddingBottom && (
+                          <div
+                            {...(showControls ? {
+                              'data-controls': col.paddingBottomKey,
+                              'data-controls-axis': 'y',
+                              'data-controls-min': '0',
+                            } : {})}
+                            className={\`\${P}-row-padding-handle\`}
+                            style={{ height: scaled(columnPaddingBottom) }}
+                          />
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+                {!isVerticalLayout && (resolvedRowPaddingBottom > 0 || showControls) && (
+                  <div
+                    {...(showControls ? {
+                      'data-controls': 'rowPaddingBottom',
+                      'data-controls-axis': 'y',
+                      'data-controls-min': '0',
+                    } : {})}
+                    className={\`\${P}-row-padding-handle\`}
+                    style={{ height: scaled(resolvedRowPaddingBottom) }}
+                  />
+                )}
+              </RowElement>
+            );
+            })}
+            {showCutLabel && (
+              <button
+                type="button"
+                className={\`\${P}-cut-item\`}
+                style={{
+                  minHeight: scaled(cutCellMinHeight ?? 0),
+                  ...getCutItemDividerWidths(
+                    showDividerBottom,
+                    dividerWidth ?? 0,
+                    isEditor ?? false,
+                  ),
+                }}
+                onClick={handleShowMore}
+              >
+                <div
+                  className={\`\${P}-list-cols-row\`}
+                  style={
+                    isVerticalLayout
+                      ? {
+                        paddingLeft: scaled(effectiveTextPaddingLR),
+                        paddingRight: scaled(effectiveTextPaddingLR),
+                      }
+                      : { justifyContent: 'center' }
+                  }
+                >
+                  <span
+                    className={getListColumnTitleClassName(
+                      settings,
+                      CUT_LABEL_TEXT_PREFIX,
+                      \`\${P}-cut-label\`,
+                      \`\${P}-text-tight-leading\`,
+                    )}
+                    style={{
+                      ...listColumnTextFieldsToCss(resolveListColumnTextFields(settings, CUT_LABEL_TEXT_PREFIX), isEditor),
+                      ...getListColumnTitleVars(settings, CUT_LABEL_TEXT_PREFIX, P, isEditor),
+                    }}
+                  >
+                    {cutLabel}
+                  </span>
+                </div>
+              </button>
+            )}
+          </div>
+          {showControls && !isVerticalLayout && firstColumn && lastColumn && (
+            <div key="column-edge-padding-handles" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
+              <div
+                data-controls={firstColumn.paddingLeftKey}
+                data-controls-axis="x"
+                data-controls-variant="column-padding"
+                data-controls-min="0"
+                data-controls-max-fraction={String(
+                  effectiveColumnWidths[0] - (firstColumnEffectivePadding?.paddingRight ?? 0),
+                )}
+                data-controls-static-handle=""
+                className={\`\${P}-padding-control-handle\`}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: scaled(firstColumnPaddingLeftWidth),
+                  height: '100%',
+                  pointerEvents: 'auto',
+                  zIndex: 2,
+                }}
+              />
+              <div
+                data-controls={lastColumn.paddingRightKey}
+                data-controls-axis="x"
+                data-controls-variant="column-padding"
+                data-controls-reverse=""
+                data-controls-min="0"
+                data-controls-max-fraction={String(
+                  effectiveColumnWidths[listColumns.length - 1]
+                    - (lastColumnEffectivePadding?.paddingLeft ?? 0),
+                )}
+                data-controls-static-handle=""
+                className={\`\${P}-padding-control-handle\`}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: scaled(columnsRightEdge - lastColumnPaddingRightWidth),
+                  width: scaled(lastColumnPaddingRightWidth),
+                  height: '100%',
+                  pointerEvents: 'auto',
+                  zIndex: 2,
+                }}
+              />
+            </div>
+          )}
+          {showControls && !isVerticalLayout && listColumns.slice(0, -1).map((col, colIndex) => {
+            const nextCol = listColumns[colIndex + 1];
+            const maxColumnWidth = getColumnMaxWidth(
+              colIndex,
+              resolvedColumnWidths,
+              storedColumnWidths,
+              resolvedContentWidth,
+            );
+            const boundaryOffset = resolvedColumnWidths.slice(0, colIndex + 1).reduce((sum, width) => sum + width, 0);
+            const colEffectivePadding = effectiveColumnPaddings[colIndex];
+            const nextColEffectivePadding = effectiveColumnPaddings[colIndex + 1];
+            const paddingRightWidth = Math.max(
+              colEffectivePadding.paddingRight,
+              COL_PADDING_HANDLE_WIDTH,
+            );
+            const paddingLeftWidth = Math.max(
+              nextColEffectivePadding.paddingLeft,
+              COL_PADDING_HANDLE_WIDTH,
+            );
+            const columnWidthHandleOffset = boundaryOffset - COL_RESIZE_HANDLE_WIDTH / 2;
+
+            return (
+              <div key={\`\${col.widthKey}-junction\`} style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
+                <div
+                  data-controls={col.paddingRightKey}
+                  data-controls-axis="x"
+                  data-controls-variant="column-padding"
+                  data-controls-reverse=""
+                  data-controls-min="0"
+                  data-controls-max-fraction={String(
+                    effectiveColumnWidths[colIndex] - colEffectivePadding.paddingLeft,
+                  )}
+                  data-controls-static-handle=""
+                  className={\`\${P}-padding-control-handle\`}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: scaled(boundaryOffset - paddingRightWidth),
+                    width: scaled(paddingRightWidth),
+                    height: '100%',
+                    pointerEvents: 'auto',
+                    zIndex: 2,
+                  }}
+                />
+                <div
+                  data-controls={col.widthKey}
+                  data-controls-axis="x"
+                  data-controls-min={String(MIN_COLUMN_WIDTH_PX)}
+                  data-controls-max-fraction={String(maxColumnWidth)}
+                  data-controls-variant="column-width"
+                  className={\`\${P}-col-resize-handle\`}
+                  style={{
+                    position: 'absolute',
+                    top: '0px',
+                    left: scaled(columnWidthHandleOffset),
+                    width: scaled(COL_RESIZE_HANDLE_WIDTH),
+                    height: 'calc(100%)',
+                    pointerEvents: 'auto',
+                    zIndex: 4,
+                  }}
+                />
+                <div
+                  data-controls={nextCol.paddingLeftKey}
+                  data-controls-axis="x"
+                  data-controls-variant="column-padding"
+                  data-controls-min="0"
+                  data-controls-max-fraction={String(
+                    effectiveColumnWidths[colIndex + 1] - nextColEffectivePadding.paddingRight,
+                  )}
+                  data-controls-static-handle=""
+                  className={\`\${P}-padding-control-handle\`}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: scaled(boundaryOffset),
+                    width: scaled(paddingLeftWidth),
+                    height: '100%',
+                    pointerEvents: 'auto',
+                    zIndex: 2,
+                  }}
+                />
+              </div>
+            );
+          })}
+          {showControls && isVerticalLayout && (
+            <div key="text-padding-lr-handles" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
+              <div
+                data-controls="textPaddingLR"
+                data-controls-paired=""
+                data-controls-axis="x"
+                data-controls-min="0"
+                data-controls-max-fraction={String(textPaddingLRMaxFraction)}
+                data-controls-static-handle=""
+                className={\`\${P}-text-padding-lr-handle\`}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: scaled(textPaddingLRHandleWidth),
+                  height: '100%',
+                  pointerEvents: 'auto',
+                  zIndex: 2,
+                }}
+              />
+              <div
+                data-controls="textPaddingLR"
+                data-controls-paired=""
+                data-controls-axis="x"
+                data-controls-reverse=""
+                data-controls-min="0"
+                data-controls-max-fraction={String(textPaddingLRMaxFraction)}
+                data-controls-static-handle=""
+                className={\`\${P}-text-padding-lr-handle\`}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: scaled(Math.max(textPaddingLRHandleWidth, resolvedContentWidth - textPaddingLRHandleWidth)),
+                  width: scaled(textPaddingLRHandleWidth),
+                  height: '100%',
+                  pointerEvents: 'auto',
+                  zIndex: 2,
+                }}
+              />
+            </div>
+          )}
+          {showHoverImage && hoverImage && (
+            <img
+              className={\`\${P}-hover-image\`}
+              src={hoverImage.url}
+              alt=""
+              style={{
+                width: sv(hoverImage.widthPx),
+                objectFit: hoverImage.objectFit,
+                left: hoverImage.x,
+                top: hoverImage.y,
+              }}
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
 `,Bt=["A","B","C","D","E"],zo=[...Xc,"Baseline A","Baseline B","Baseline C","Baseline D","Baseline E"],Mt={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}},fontSize:{type:"number",display:{type:"font-size"}},lineHeight:{type:"number",display:{type:"line-height-input"}},letterSpacing:{type:"number",display:{type:"letter-spacing-input"}},wordSpacing:{type:"number",display:{type:"word-spacing-input"}},textAppearance:{type:"object",display:{type:"text-appearance"},properties:{textTransform:{type:"string",enum:["none","uppercase","lowercase","capitalize"]},textDecoration:{type:"string",enum:["none","underline"]},fontVariant:{type:"string",enum:["normal","small-caps"]}}}};function Td(e){return{type:"string",label:e,placeholder:"Add Title...",display:{type:"text-input"}}}function Hn(e){return{type:"number",scope:"layout",title:e,min:0,max:100,display:{type:"range-control"}}}function Ld(){return Object.fromEntries(Bt.map((e,t)=>{const n=Pt[t],r=`${e} column`;return[n,Td(r)]}))}function Ed(){const e={};for(const t of Bt)e[`${t}ColumnWidth`]=Hn(`${t} column width`),e[`${t}ColumnPaddingLeft`]=Hn(`${t} column padding left`),e[`${t}ColumnPaddingRight`]=Hn(`${t} column padding right`),e[`${t}ColumnPaddingBottom`]=Hn(`${t} column padding bottom`);return e}function jo(e={}){const t={columns:5,wrapperWidth:1,columnsOrder:[...Pt]};for(const n of Bt)t[`${n}ColumnWidth`]=.2,t[`${n}ColumnPaddingLeft`]=0,t[`${n}ColumnPaddingRight`]=0,t[`${n}ColumnPaddingBottom`]=0;return{...t,...e}}function _d(e){const t={};if(e!==vt){const n=e.charAt(0);t[`${e}VerticalAlign`]={type:"string",scope:"layout",title:"Vertical align",display:{type:"drop-down",enum:[...zo],filterBaselineByTopAnchor:!0,columnLetter:n},enum:[...zo]}}return t[we(e,"textFontFamily")]={type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},t[we(e,"textFontSettings")]={...Mt.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},t[we(e,"textFontSize")]={...Mt.fontSize,scope:"layout",title:"Font Size",display:{type:"font-size"}},t[we(e,"textLineHeight")]={...Mt.lineHeight,scope:"layout",title:"Line Height",display:{type:"line-height-input"}},t[we(e,"textLetterSpacing")]={...Mt.letterSpacing,scope:"layout",title:"Letter Spacing",display:{type:"letter-spacing-input"}},t[we(e,"textWordSpacing")]={...Mt.wordSpacing,scope:"layout",title:"Word Spacing",display:{type:"word-spacing-input"}},t[we(e,"textTextAppearance")]={...Mt.textAppearance,scope:"layout",title:"Text Appearance",display:{type:"text-appearance"}},t}const Pd=Pn.reduce((e,t)=>({...e,..._d(t)}),{}),Ad=Pn.reduce((e,t)=>({...e,...t!==vt?{[`${t}VerticalAlign`]:"Top"}:{},[we(t,"textFontFamily")]:"Arial",[we(t,"textFontSettings")]:{fontWeight:400,fontStyle:"normal"},[we(t,"textLetterSpacing")]:0,[we(t,"textWordSpacing")]:0,[we(t,"textTextAppearance")]:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}}),{});function Ko(e){const{textFontSize:t,textLineHeight:n}=e;return Pn.reduce((r,o)=>(t!==void 0&&(r[`${o}TextFontSize`]=t),n!==void 0&&(r[`${o}TextLineHeight`]=n),r),{})}const Rd={AColumn:"A column",BColumn:"B column",CColumn:"C column",DColumn:"D column",EColumn:"E column",cutLabel:"See all"},Id=Pn.map(e=>({type:"group",title:Rd[e],items:[we(e,"textFontFamily"),we(e,"textFontSettings"),{type:"row",items:[we(e,"textFontSize"),we(e,"textLineHeight"),we(e,"textLetterSpacing"),we(e,"textWordSpacing")]},we(e,"textTextAppearance"),...e!==vt?[`${e}VerticalAlign`]:[]]}));function Mi(e){return[we(e,"textFontFamily"),we(e,"textFontSettings"),we(e,"textFontSize"),we(e,"textLineHeight"),we(e,"textLetterSpacing"),we(e,"textWordSpacing"),we(e,"textTextAppearance"),...e!==vt?[`${e}VerticalAlign`]:[]]}function Wd(){const e=[];return eo.forEach((t,n)=>{const r=Pt[n],o=Mi(t);for(let s=1;s<Pt.length;s+=1){const i=[{name:"columns",value:s},...Array.from({length:s},(a,c)=>({name:`columnsOrder.${c}`,value:r,isNotEqual:!0}))];o.forEach(a=>{e.push({if:i,then:{name:`properties.${a}.display.visible`,value:!1}})})}}),e}const Fd=["textColor","backgroundColor","dividerColor","textHoverColor","backgroundHoverColor","dividerHoverColor"],kd=["cutLabel","cutCellMinHeight","showCut"],Md=Mi(vt),Nd=[...kd,...Md],Hd=[...Bt.flatMap(e=>[`${e}ColumnWidth`,`${e}ColumnPaddingLeft`,`${e}ColumnPaddingRight`]),"rowPaddingTop","rowPaddingBottom"];function Cr(e,t){const n=e?` ${e}`:"";return{AColumn:`AColumn${n}`,BColumnWidth:`BColumnWidth${n}`,CColumnWidth:`CColumnWidth${n}`,DColumnWidth:`DColumnWidth${n}`,EColumnWidth:`EColumnWidth${n}`,image:t,link:""}}const Od=[Cr("",{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQK9211QXBE9W284ZNKB8.png",name:"Slider-1.png"}),Cr("2",{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQMFT72JD18WKP0Q2DVAT.png",name:"Slider-2.png"}),Cr("3",{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQNEVRXPSRX5K1YTMJQY9.png",name:"Slider-3.png"})],Bd=[...Bt.flatMap(e=>[`${e}ColumnWidth`,`${e}ColumnPaddingLeft`,`${e}ColumnPaddingRight`,`${e}ColumnPaddingBottom`]),"columnsOrder"],Vd={type:"object",version:1,content:{type:"array",settings:{addItemWithoutImage:!0},display:{type:"array",ref:{columnsOrder:"settings.properties.columnsOrder",columnsCount:"settings.properties.columns"}},items:{type:"object",properties:{...Ld(),image:{type:"object",label:"Image",display:{isObjectFitEditable:!1,type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},link:{type:"string",label:"Link",placeholder:"Add link...",display:{type:"text-input"}}},required:["image"]},default:Od},settings:{sizing:"auto auto",properties:{type:{type:"string",scope:"layout",title:"",display:{type:"radio-group"},enum:["A","B"]},columns:{type:"number",scope:"layout",title:"Columns",display:{type:"count-number"},min:1,max:5},wrapperWidth:{type:"number",scope:"layout",title:"Width",display:{type:"numeric-input"},min:0,max:9999},textPaddingLR:{type:"number",scope:"layout",title:"Text Padding LR",min:0,max:9999,display:{type:"range-control"}},entriesCount:{type:"number",scope:"layout",title:"Entries #",display:{type:"toggle-numeric-input",enum:["Auto","Fixed"]},min:1},cellMinHeight:{type:"number",scope:"layout",title:"Cell min height",display:{type:"numeric-input"},min:0,max:9999},imageOnHover:{type:"boolean",scope:"common",title:"Image On Hover",display:{type:"toggle-cycle",enum:["On","Off"]}},imageSize:{type:"object",scope:"layout",title:"Image size",display:{type:"min-max-input"},min:1,max:1440,properties:{min:{type:"number"},max:{type:"number"}}},dividerWidth:{type:"number",scope:"layout",title:"Divider width",display:{type:"numeric-input"},min:0,max:9999},showVisibility:{type:"array",scope:"common",title:"Show",display:{type:"double-toggle",enum:["Top","Bottom"]},items:{type:"boolean"},default:[!0,!1]},cut:{type:"number",scope:"layout",title:"Cut",display:{type:"toggle-numeric-input",enum:["Off","On"]},min:1},entryHoverEffect:{type:"string",scope:"common",title:"Entry Hover Effect",display:{type:"toggle-cycle",enum:["None","Default","Blinds"]}},cutCellMinHeight:{type:"number",scope:"layout",title:"Cell min height",display:{type:"numeric-input"},min:0,max:9999},cutLabel:{type:"string",scope:"common",title:"Cut Label",display:{type:"label-input"}},showCut:{type:"number",scope:"layout",title:"Show",display:{type:"toggle-numeric-input",enum:["All","Custom"]},min:1},rowPaddingTop:{type:"number",scope:"layout",title:"Row Padding Top",min:0,max:100,display:{type:"range-control"}},rowPaddingBottom:{type:"number",scope:"layout",title:"Row Padding Bottom",min:0,max:100,display:{type:"range-control"}},rowPaddingTopB:{type:"number",scope:"layout",title:"Row Padding Top",min:0,max:100,display:{type:"range-control"}},...Ed(),columnsOrder:{type:"array",scope:"layout",title:"Columns Order",display:{type:"reorder-input"},items:{type:"string"}},textColor:{type:"string",scope:"common",title:"Text Default",display:{type:"palette-color-picker"}},textHoverColor:{type:"string",scope:"common",title:"Text Hover",display:{type:"palette-color-picker"}},textFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},textFontSettings:{...Mt.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},textFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},textLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},textLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},textWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},textTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}},...Pd,backgroundColor:{type:"string",scope:"common",title:"BG Default",display:{type:"palette-color-picker"}},dividerColor:{type:"string",scope:"common",title:"Divider Default",display:{type:"palette-color-picker"}},backgroundHoverColor:{type:"string",scope:"common",title:"BG Hover",display:{type:"palette-color-picker"}},dividerHoverColor:{type:"string",scope:"common",title:"Divider Hover",display:{type:"palette-color-picker"}}},defaults:{imageOnHover:"Off",entryHoverEffect:"None",cutLabel:"SEE ALL",showVisibility:[!0,!0],textColor:"#767676",textHoverColor:"#767676",textFontFamily:"Arial",textFontSettings:{fontWeight:400,fontStyle:"normal"},textLetterSpacing:0,textWordSpacing:0,textTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},...Ad,backgroundColor:"#FFFFFF00",dividerColor:"#767676",backgroundHoverColor:"#FFFFFF00",dividerHoverColor:"#767676"},layoutDefaults:{m:jo({type:"B",textPaddingLR:.0373,entriesCount:0,cellMinHeight:.02,imageSize:{min:80,max:320},dividerWidth:.002,cut:0,showCut:0,cutCellMinHeight:.043,rowPaddingTop:.01,rowPaddingBottom:.01,rowPaddingTopB:.01,textStroke:.003,textCorners:.192,textPadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},textFontSize:.043,textLineHeight:.043,...Ko({textFontSize:.043,textLineHeight:.043})}),d:jo({type:"A",textPaddingLR:.01,entriesCount:0,cellMinHeight:.03,imageSize:{min:80,max:320},dividerWidth:6e-4,cut:0,showCut:0,cutCellMinHeight:.03,rowPaddingTop:.01,rowPaddingBottom:.01,rowPaddingTopB:.01,textStroke:.001,textCorners:.05,textPadding:{top:.01,right:.01,bottom:.01,left:.01},textFontSize:.01,textLineHeight:.01,...Ko({textFontSize:.01,textLineHeight:.01})})},displayRules:[...Wd(),...Nd.map(e=>({if:{name:"cut",value:0},then:{name:`properties.${e}.display.visible`,value:!1}})),{if:{name:"type",value:"A"},then:{name:"properties.textPaddingLR.display.visible",value:!1}},...Hd.map(e=>({if:{name:"type",value:"B"},then:{name:`properties.${e}.display.visible`,value:!1}})),{if:{name:"type",value:"A"},then:{name:"properties.rowPaddingTopB.display.visible",value:!1}},...Bt.map(e=>({if:{name:"type",value:"A"},then:{name:`properties.${e}ColumnPaddingBottom.display.visible`,value:!1}})),...Bt.map(e=>({if:{name:"type",value:"B"},then:{name:`properties.${e}ColumnVerticalAlign.display.visible`,value:!1}}))],layout:["__componentName__","name","type","columns","wrapperWidth","textPaddingLR","entriesCount","cellMinHeight","imageOnHover","imageSize","dividerWidth","showVisibility","cut","showCut","cutCellMinHeight","entryHoverEffect","cutLabel","rowPaddingTop","rowPaddingBottom","rowPaddingTopB",...Bd]},panels:[{id:"general",icon:"cursor",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name"]},"type",{type:"row",title:"",items:["columns","wrapperWidth"]},{type:"row",title:"",items:["entriesCount","cellMinHeight"]},{type:"row",title:"",items:["imageOnHover","imageSize"]},{type:"row",title:"",items:["entryHoverEffect"]},{type:"row",title:"Divider Settings",items:["dividerWidth","showVisibility"]},{type:"row",title:"",items:["cut"]},{type:"row",title:"Cut Settings",items:["cutLabel","cutCellMinHeight"]},{type:"row",title:"",items:["showCut"]}]},{id:"columnsOrder",icon:"layers",title:"Columns Order",tooltip:"Columns order",layout:["columnsOrder"]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[{type:"group",title:"All text",items:["textFontFamily","textFontSettings",{type:"row",items:["textFontSize","textLineHeight","textLetterSpacing","textWordSpacing"]},"textTextAppearance"]},...Id]}],paletteBookmark:{items:[...Fd],panelIds:["general","typeStyle"],stateItems:{default:["textColor","backgroundColor","dividerColor","textHoverColor","backgroundHoverColor","dividerHoverColor"]}}},Dd={element:wd,id:"list",name:"Default List",category:"lists",layoutMode:"structured",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Programme_List.png "},version:1,defaultSize:{d:{width:720,height:540}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},schema:Vd,sourceCode:$d},zd=[Qs,al,Gl,rc,mc,wc,_c,Fc,Kc,Dd];exports.components=zd;exports.isSchemaV1=ji;