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

package/dist/index.mjs

@@ -14953,7 +14953,7 @@ function Fd({ settings: e, content: t, isEditor: n, isPreviewMode: r, activeEven
     textHoverColor: ee,
     backgroundHoverColor: pe,
     dividerHoverColor: oe
-  } = e, [ge, N] = le(void 0), [J, q] = le(null), G = L === "On", re = (x ?? 0) > 0, W = c === "B", te = ve(null), [I, v] = le(_n), z = ji(I), U = Math.max(0, ((w ?? 0) - z) / 2), Z = Math.min(P ?? 0, U), ae = Math.max(Z, yn), se = ((w ?? 0) + z) / 2;
+  } = e, [ge, N] = le(void 0), [J, q] = le(null), G = L === "On" && (!n || r), re = (x ?? 0) > 0, W = c === "B", te = ve(null), [I, v] = le(_n), z = ji(I), U = Math.max(0, ((w ?? 0) - z) / 2), Z = Math.min(P ?? 0, U), ae = Math.max(Z, yn), se = ((w ?? 0) + z) / 2;
   it(() => {
     if (!n) {
       v(_n);
@@ -15590,2547 +15590,2547 @@ function Fd({ settings: e, content: t, isEditor: n, isPreviewMode: r, activeEven
     ) })
   ] });
 }
-const kd = `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 kd = `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>
+    </>
+  );
+}
 `, Gt = ["A", "B", "C", "D", "E"], ei = [
   ...sd,
   "Baseline A",