@payloadcms/ui 4.0.0-canary.9 → 4.0.0-internal.016994f

package/dist/views/HierarchyList/HierarchyTable/SlotTable.css

@@ -1,110 +1,17 @@
 @layer payload-default {
-  .slot-table {
-    overflow: auto;
-    max-width: 100%;
-
-    table {
-      min-width: 100%;
-      border-spacing: 0;
-    }
-
-    thead {
-      color: var(--color-text-secondary);
-
-      th {
-        font-weight: normal;
-        text-align: left;
-        vertical-align: middle;
-        height: calc(var(--spacer-4) * 2);
-      }
-    }
-
-    tbody {
-      color: var(--color-text-secondary);
-
-      tr {
-        border-top: var(--stroke-width-small) solid var(--color-border);
-
-        &:hover {
-          background: var(--color-bg-secondary);
-        }
-
-        &:focus-within {
-          outline: none;
-          background: var(--color-bg-secondary);
-        }
-
-        &:has(.slot-table__checkbox input:checked) {
-          background: var(--color-bg-selected);
-        }
-      }
-    }
-  }
-
-  .slot-table__th,
-  .slot-table__td {
-    vertical-align: middle;
-    padding: var(--spacer-2) var(--spacer-2-5);
-    min-width: 150px;
-    position: relative;
-    height: calc(var(--spacer-4) * 2);
-
-    [dir='rtl'] & {
-      text-align: right;
-    }
-
-    &:first-child {
-      padding-inline-start: var(--gutter-h);
-      padding-inline-end: var(--spacer-2);
-    }
-
-    &:last-child {
-      padding-inline-end: var(--spacer-2);
-    }
-  }
-
-  .slot-table__th--drag,
-  .slot-table__td--drag {
-    width: var(--spacer-4);
-    min-width: var(--spacer-4);
-    padding: 0;
-  }
-
-  .slot-table__td--drag {
-    text-align: center;
-  }
-
-  .slot-table__th--checkbox,
-  .slot-table__td--checkbox {
-    width: var(--spacer-5);
-    min-width: var(--spacer-5);
-    padding: var(--spacer-2);
-    text-align: center;
-  }
-
-  .slot-table__tr {
-    position: relative;
-    line-height: 1;
-    border-top: var(--stroke-width-small) solid var(--color-border);
-  }
-
+  /*
+   * Rows use the shared table's classes (see elements/Table/index.css), so only what the slot
+   * API adds on top lives here: a whole-row click target, and the drag column's own affordance.
+   */
   .slot-table__tr--clickable {
     cursor: pointer;
 
-    &:hover {
-      background: var(--color-bg-secondary);
-    }
-
     &:focus {
       outline: none;
       background: var(--color-bg-secondary);
     }
   }
 
-  .slot-table__tr--selected {
-    background: var(--color-bg-selected);
-  }
-
   .slot-table__drag-handle {
     display: flex;
     align-items: center;
@@ -129,76 +36,10 @@
     height: var(--spacer-3);
   }
 
-  .slot-table__checkbox {
-    /* Uses CheckboxInput component - no additional styles needed */
-  }
-
+  /* Header cell that spans the checkbox column via colspan */
   .slot-table__th-merged {
     display: flex;
     align-items: center;
     gap: var(--spacer-2);
   }
-
-  /* Condensed appearance */
-  .slot-table--appearance-condensed {
-    border-radius: var(--radius-small);
-
-    table {
-      border-collapse: collapse;
-    }
-
-    thead {
-      background: var(--color-bg-secondary);
-
-      th:first-child {
-        border-top-left-radius: var(--radius-small);
-      }
-
-      th:last-child {
-        border-top-right-radius: var(--radius-small);
-      }
-    }
-
-    tbody tr {
-      &:nth-child(odd) {
-        background: transparent;
-
-        td:first-child,
-        td:last-child {
-          border-radius: 0;
-        }
-      }
-
-      &:last-child {
-        td:first-child {
-          border-bottom-left-radius: var(--radius-small);
-        }
-
-        td:last-child {
-          border-bottom-right-radius: var(--radius-small);
-        }
-      }
-    }
-
-    .slot-table__th,
-    .slot-table__td {
-      padding: var(--spacer-1);
-      border: 0.5px solid var(--color-border);
-
-      &:first-child {
-        padding-inline-start: var(--spacer-2-5);
-      }
-
-      &:last-child {
-        padding-inline-end: var(--spacer-2-5);
-      }
-    }
-  }
-
-  @media (max-width: 1024px) {
-    .slot-table__th,
-    .slot-table__td {
-      max-width: 70vw;
-    }
-  }
 }

package/dist/views/HierarchyList/HierarchyTable/SlotTable.d.ts

@@ -1,5 +1,6 @@
-import type { ClientUser } from 'payload';
+import type { User } from 'payload';
 import React from 'react';
+import '../../../elements/Table/index.css';
 import './SlotTable.css';
 export type SlotColumn<TRow = Record<string, unknown>> = {
     /**
@@ -22,6 +23,11 @@ export type SlotColumn<TRow = Record<string, unknown>> = {
      * Column header content
      */
     heading: React.ReactNode;
+    /**
+     * Marks the column as the row's link to its document, so the cell adopts the shared
+     * `cell--linked` treatment: padding moves onto the anchor for a full-cell click target.
+     */
+    isLinked?: boolean;
 };
 export type SlotTableProps<TRow = Record<string, unknown>> = {
     /**
@@ -68,7 +74,7 @@ export type SlotTableProps<TRow = Record<string, unknown>> = {
      * Returns the user who is editing/locking a row, or undefined if not locked.
      * When a user is returned, a lock icon replaces the checkbox for that row.
      */
-    getRowLockedUser?: (row: TRow, index: number) => ClientUser | undefined;
+    getRowLockedUser?: (row: TRow, index: number) => undefined | User;
     /**
      * Merge checkbox header with first column header using colspan (default: false)
      * The first column header will span both checkbox and content cells

package/dist/views/HierarchyList/HierarchyTable/SlotTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlotTable.d.ts","sourceRoot":"","sources":["../../../../src/views/HierarchyList/HierarchyTable/SlotTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,iBAAiB,CAAA;AAIxB,MAAM,MAAM,UAAU,CAAC,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACvD;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;QAAC,GAAG,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACzE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IAC3D;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,CAAA;IAC3B;;OAEG;IACH,IAAI,EAAE,IAAI,EAAE,CAAA;IACZ;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAA;IACxD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,UAAU,GAAG,SAAS,CAAA;IACvE;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;CACnC,CAAA;AAED,wBAAgB,SAAS,CAAC,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACxF,UAAsB,EACtB,SAAS,EACT,cAAc,EACd,OAAO,EACP,IAAI,EACJ,cAAqB,EACrB,gBAAuB,EACvB,YAAmB,EACnB,eAAsB,EACtB,QAA+D,EAC/D,gBAAgB,EAChB,mBAA2B,EAC3B,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,QAAQ,EACR,WAAuB,GACxB,EAAE,cAAc,CAAC,IAAI,CAAC,qBAiJtB"}
+{"version":3,"file":"SlotTable.d.ts","sourceRoot":"","sources":["../../../../src/views/HierarchyList/HierarchyTable/SlotTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,mCAAmC,CAAA;AAC1C,OAAO,iBAAiB,CAAA;AAOxB,MAAM,MAAM,UAAU,CAAC,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACvD;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;QAAC,GAAG,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACzE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IAC3D;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,CAAA;IAC3B;;OAEG;IACH,IAAI,EAAE,IAAI,EAAE,CAAA;IACZ;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAA;IACxD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,GAAG,IAAI,CAAA;IACjE;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;CACnC,CAAA;AAED,wBAAgB,SAAS,CAAC,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACxF,UAAsB,EACtB,SAAS,EACT,cAAc,EACd,OAAO,EACP,IAAI,EACJ,cAAqB,EACrB,gBAAuB,EACvB,YAAmB,EACnB,eAAsB,EACtB,QAA+D,EAC/D,gBAAgB,EAChB,mBAA2B,EAC3B,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,QAAQ,EACR,WAAuB,GACxB,EAAE,cAAc,CAAC,IAAI,CAAC,qBA+ItB"}

package/dist/views/HierarchyList/HierarchyTable/SlotTable.js

@@ -5,8 +5,13 @@ import React from 'react';
 import { Locked } from '../../../elements/Locked/index.js';
 import { CheckboxInput } from '../../../fields/Checkbox/Input.js';
 import { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js';
+// Rows adopt the shared table's class contract (`cell--linked`, `cell-_select`, ...) so the
+// styling lives in one place; this file only adds what the slot API needs on top.
+import '../../../elements/Table/index.css';
 import './SlotTable.css';
 const baseClass = 'slot-table';
+/** Matches what SelectRow renders, so the shared row-selected background rule applies here too. */
+const selectRowClass = 'select-row select-row__checkbox';
 export function SlotTable({
   appearance = 'default',
   className,
@@ -44,39 +49,38 @@ export function SlotTable({
     }
   };
   return /*#__PURE__*/_jsx("div", {
-    className: [baseClass, appearance && `${baseClass}--appearance-${appearance}`, className].filter(Boolean).join(' '),
+    className: ['table', appearance && `table--appearance-${appearance}`, baseClass, className].filter(Boolean).join(' '),
     children: /*#__PURE__*/_jsxs("table", {
       cellPadding: "0",
       cellSpacing: "0",
       children: [enableHeader && /*#__PURE__*/_jsx("thead", {
         children: /*#__PURE__*/_jsxs("tr", {
           children: [enableCheckbox && !mergeCheckboxHeader && /*#__PURE__*/_jsx("th", {
-            className: `${baseClass}__th ${baseClass}__th--checkbox`,
+            id: "heading-_select",
             children: enableSelectAll && /*#__PURE__*/_jsx(CheckboxInput, {
               checked: allSelected,
-              className: `${baseClass}__checkbox`,
+              className: selectRowClass,
               onToggle: handleSelectAll,
-              partialChecked: someSelected && !allSelected,
-              variant: "muted"
+              partialChecked: someSelected && !allSelected
             })
           }), enableDragHandle && /*#__PURE__*/_jsx("th", {
-            className: `${baseClass}__th ${baseClass}__th--drag`,
+            id: "heading-_dragHandle",
             children: /*#__PURE__*/_jsx("span", {
               className: `${baseClass}__drag-header`
             })
           }), columns.map((col, colIndex) => {
             const isMergedCheckboxColumn = colIndex === 0 && enableCheckbox && mergeCheckboxHeader;
             return /*#__PURE__*/_jsx("th", {
-              className: [`${baseClass}__th`, col.className].filter(Boolean).join(' '),
+              className: col.className,
               colSpan: isMergedCheckboxColumn ? 2 : undefined,
+              id: `heading-${col.accessor}`,
               children: isMergedCheckboxColumn && enableSelectAll ? /*#__PURE__*/_jsxs("span", {
                 className: `${baseClass}__th-merged`,
                 children: [/*#__PURE__*/_jsx(CheckboxInput, {
                   checked: allSelected,
-                  className: `${baseClass}__checkbox`,
+                  className: selectRowClass,
                   onToggle: handleSelectAll,
-                  partialChecked: someSelected && !allSelected,
-                  variant: "muted"
+                  partialChecked: someSelected && !allSelected
                 }), col.heading]
               }) : col.heading
             }, col.accessor);
@@ -88,13 +92,13 @@ export function SlotTable({
           const isSelected = selectedIds.has(rowId);
           const isClickable = Boolean(onRowClick);
           return /*#__PURE__*/_jsxs("tr", {
-            className: [`${baseClass}__tr`, isSelected && `${baseClass}__tr--selected`, isClickable && `${baseClass}__tr--clickable`].filter(Boolean).join(' '),
+            className: isClickable ? `${baseClass}__tr--clickable` : undefined,
             "data-id": rowId,
             onClick: isClickable ? () => handleRowClick(row, rowIndex) : undefined,
             onKeyDown: isClickable ? e => handleRowKeyDown(row, rowIndex, e) : undefined,
             tabIndex: isClickable ? 0 : undefined,
             children: [enableCheckbox && /*#__PURE__*/_jsx("td", {
-              className: `${baseClass}__td ${baseClass}__td--checkbox`,
+              className: "cell-_select",
               children: (() => {
                 const lockedUser = getRowLockedUser?.(row, rowIndex);
                 if (lockedUser) {
@@ -104,19 +108,18 @@ export function SlotTable({
                 }
                 return /*#__PURE__*/_jsx(CheckboxInput, {
                   checked: isSelected,
-                  className: `${baseClass}__checkbox`,
-                  onToggle: () => handleRowCheckbox(row, rowIndex, isSelected),
-                  variant: "muted"
+                  className: selectRowClass,
+                  onToggle: () => handleRowCheckbox(row, rowIndex, isSelected)
                 });
               })()
             }), enableDragHandle && /*#__PURE__*/_jsx("td", {
-              className: `${baseClass}__td ${baseClass}__td--drag`,
+              className: "cell-_dragHandle",
               children: /*#__PURE__*/_jsx("span", {
                 className: `${baseClass}__drag-handle`,
                 children: /*#__PURE__*/_jsx(AlignJustifiedIcon, {})
               })
             }), columns.map(col => /*#__PURE__*/_jsx("td", {
-              className: [`${baseClass}__td`, col.className].filter(Boolean).join(' '),
+              className: [`cell-${col.accessor}`, col.isLinked && 'cell--linked', col.className].filter(Boolean).join(' '),
               children: /*#__PURE__*/_jsx(col.Cell, {
                 column: col,
                 row: row,

package/dist/views/HierarchyList/HierarchyTable/SlotTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlotTable.js","names":["React","Locked","CheckboxInput","AlignJustifiedIcon","baseClass","SlotTable","appearance","className","collectionSlug","columns","data","enableCheckbox","enableDragHandle","enableHeader","enableSelectAll","getRowId","row","index","id","getRowLockedUser","mergeCheckboxHeader","onCheckboxChange","onRowClick","onSelectAllChange","parentId","selectedIds","Set","allSelected","length","every","i","has","someSelected","some","handleSelectAll","handleRowCheckbox","isSelected","handleRowClick","handleRowKeyDown","e","key","preventDefault","_jsx","filter","Boolean","join","_jsxs","cellPadding","cellSpacing","checked","onToggle","partialChecked","variant","map","col","colIndex","isMergedCheckboxColumn","colSpan","undefined","heading","accessor","rowIndex","rowId","isClickable","onClick","onKeyDown","tabIndex","lockedUser","user","Cell","column"],"sources":["../../../../src/views/HierarchyList/HierarchyTable/SlotTable.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientUser } from 'payload'\n\nimport React from 'react'\n\nimport { Locked } from '../../../elements/Locked/index.js'\nimport { CheckboxInput } from '../../../fields/Checkbox/Input.js'\nimport { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js'\nimport './SlotTable.css'\n\nconst baseClass = 'slot-table'\n\nexport type SlotColumn<TRow = Record<string, unknown>> = {\n  /**\n   * Unique identifier for the column\n   */\n  accessor: string\n  /**\n   * Cell component that receives the row data\n   */\n  Cell: React.FC<{ column: SlotColumn<TRow>; row: TRow; rowIndex: number }>\n  /**\n   * Optional class name for the column cells\n   */\n  className?: string\n  /**\n   * Column header content\n   */\n  heading: React.ReactNode\n}\n\nexport type SlotTableProps<TRow = Record<string, unknown>> = {\n  /**\n   * Table appearance\n   */\n  appearance?: 'condensed' | 'default'\n  /**\n   * Additional class name\n   */\n  className?: string\n  /**\n   * Collection slug for the table\n   */\n  collectionSlug?: string\n  /**\n   * Column definitions with Cell components\n   */\n  columns: SlotColumn<TRow>[]\n  /**\n   * Data array - table loops over this\n   */\n  data: TRow[]\n  /**\n   * Show checkbox column (default: true)\n   */\n  enableCheckbox?: boolean\n  /**\n   * Show drag handle column (default: true)\n   */\n  enableDragHandle?: boolean\n  /**\n   * Show header row with column headings (default: true)\n   */\n  enableHeader?: boolean\n  /**\n   * Show select-all checkbox in header (default: true, requires enableCheckbox and enableHeader)\n   */\n  enableSelectAll?: boolean\n  /**\n   * Get unique ID for each row\n   */\n  getRowId?: (row: TRow, index: number) => number | string\n  /**\n   * Returns the user who is editing/locking a row, or undefined if not locked.\n   * When a user is returned, a lock icon replaces the checkbox for that row.\n   */\n  getRowLockedUser?: (row: TRow, index: number) => ClientUser | undefined\n  /**\n   * Merge checkbox header with first column header using colspan (default: false)\n   * The first column header will span both checkbox and content cells\n   */\n  mergeCheckboxHeader?: boolean\n  /**\n   * Callback when checkbox is toggled\n   */\n  onCheckboxChange?: (row: TRow, checked: boolean, index: number) => void\n  /**\n   * Row click handler (for navigation)\n   */\n  onRowClick?: (row: TRow, index: number) => void\n  /**\n   * Callback when \"select all\" checkbox is toggled\n   */\n  onSelectAllChange?: (checked: boolean) => void\n  /**\n   * Parent ID for the table\n   */\n  parentId?: null | number | string\n  /**\n   * Currently selected row IDs\n   */\n  selectedIds?: Set<number | string>\n}\n\nexport function SlotTable<TRow extends Record<string, unknown> = Record<string, unknown>>({\n  appearance = 'default',\n  className,\n  collectionSlug,\n  columns,\n  data,\n  enableCheckbox = true,\n  enableDragHandle = true,\n  enableHeader = true,\n  enableSelectAll = true,\n  getRowId = (row, index) => (row.id as number | string) ?? index,\n  getRowLockedUser,\n  mergeCheckboxHeader = false,\n  onCheckboxChange,\n  onRowClick,\n  onSelectAllChange,\n  parentId,\n  selectedIds = new Set(),\n}: SlotTableProps<TRow>) {\n  const allSelected = data.length > 0 && data.every((row, i) => selectedIds.has(getRowId(row, i)))\n  const someSelected = data.some((row, i) => selectedIds.has(getRowId(row, i)))\n\n  const handleSelectAll = () => {\n    onSelectAllChange?.(!allSelected)\n  }\n\n  const handleRowCheckbox = (row: TRow, index: number, isSelected: boolean) => {\n    onCheckboxChange?.(row, !isSelected, index)\n  }\n\n  const handleRowClick = (row: TRow, index: number) => {\n    onRowClick?.(row, index)\n  }\n\n  const handleRowKeyDown = (row: TRow, index: number, e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      onRowClick?.(row, index)\n    }\n  }\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`, className]\n        .filter(Boolean)\n        .join(' ')}\n      key={`${collectionSlug}-${parentId}`}\n    >\n      <table cellPadding=\"0\" cellSpacing=\"0\">\n        {enableHeader && (\n          <thead>\n            <tr>\n              {enableCheckbox && !mergeCheckboxHeader && (\n                <th className={`${baseClass}__th ${baseClass}__th--checkbox`}>\n                  {enableSelectAll && (\n                    <CheckboxInput\n                      checked={allSelected}\n                      className={`${baseClass}__checkbox`}\n                      onToggle={handleSelectAll}\n                      partialChecked={someSelected && !allSelected}\n                      variant=\"muted\"\n                    />\n                  )}\n                </th>\n              )}\n              {enableDragHandle && (\n                <th className={`${baseClass}__th ${baseClass}__th--drag`}>\n                  <span className={`${baseClass}__drag-header`} />\n                </th>\n              )}\n              {columns.map((col, colIndex) => {\n                const isMergedCheckboxColumn =\n                  colIndex === 0 && enableCheckbox && mergeCheckboxHeader\n\n                return (\n                  <th\n                    className={[`${baseClass}__th`, col.className].filter(Boolean).join(' ')}\n                    colSpan={isMergedCheckboxColumn ? 2 : undefined}\n                    key={col.accessor}\n                  >\n                    {isMergedCheckboxColumn && enableSelectAll ? (\n                      <span className={`${baseClass}__th-merged`}>\n                        <CheckboxInput\n                          checked={allSelected}\n                          className={`${baseClass}__checkbox`}\n                          onToggle={handleSelectAll}\n                          partialChecked={someSelected && !allSelected}\n                          variant=\"muted\"\n                        />\n                        {col.heading}\n                      </span>\n                    ) : (\n                      col.heading\n                    )}\n                  </th>\n                )\n              })}\n            </tr>\n          </thead>\n        )}\n        <tbody>\n          {data.map((row, rowIndex) => {\n            const rowId = getRowId(row, rowIndex)\n            const isSelected = selectedIds.has(rowId)\n            const isClickable = Boolean(onRowClick)\n\n            return (\n              <tr\n                className={[\n                  `${baseClass}__tr`,\n                  isSelected && `${baseClass}__tr--selected`,\n                  isClickable && `${baseClass}__tr--clickable`,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                data-id={rowId}\n                key={rowId}\n                onClick={isClickable ? () => handleRowClick(row, rowIndex) : undefined}\n                onKeyDown={isClickable ? (e) => handleRowKeyDown(row, rowIndex, e) : undefined}\n                tabIndex={isClickable ? 0 : undefined}\n              >\n                {enableCheckbox && (\n                  <td className={`${baseClass}__td ${baseClass}__td--checkbox`}>\n                    {(() => {\n                      const lockedUser = getRowLockedUser?.(row, rowIndex)\n\n                      if (lockedUser) {\n                        return <Locked user={lockedUser} />\n                      }\n\n                      return (\n                        <CheckboxInput\n                          checked={isSelected}\n                          className={`${baseClass}__checkbox`}\n                          onToggle={() => handleRowCheckbox(row, rowIndex, isSelected)}\n                          variant=\"muted\"\n                        />\n                      )\n                    })()}\n                  </td>\n                )}\n                {enableDragHandle && (\n                  <td className={`${baseClass}__td ${baseClass}__td--drag`}>\n                    <span className={`${baseClass}__drag-handle`}>\n                      <AlignJustifiedIcon />\n                    </span>\n                  </td>\n                )}\n                {columns.map((col) => (\n                  <td\n                    className={[`${baseClass}__td`, col.className].filter(Boolean).join(' ')}\n                    key={col.accessor}\n                  >\n                    <col.Cell column={col} row={row} rowIndex={rowIndex} />\n                  </td>\n                ))}\n              </tr>\n            )\n          })}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SlotTable.js","names":["React","Locked","CheckboxInput","AlignJustifiedIcon","baseClass","selectRowClass","SlotTable","appearance","className","collectionSlug","columns","data","enableCheckbox","enableDragHandle","enableHeader","enableSelectAll","getRowId","row","index","id","getRowLockedUser","mergeCheckboxHeader","onCheckboxChange","onRowClick","onSelectAllChange","parentId","selectedIds","Set","allSelected","length","every","i","has","someSelected","some","handleSelectAll","handleRowCheckbox","isSelected","handleRowClick","handleRowKeyDown","e","key","preventDefault","_jsx","filter","Boolean","join","_jsxs","cellPadding","cellSpacing","checked","onToggle","partialChecked","map","col","colIndex","isMergedCheckboxColumn","colSpan","undefined","accessor","heading","rowIndex","rowId","isClickable","onClick","onKeyDown","tabIndex","lockedUser","user","isLinked","Cell","column"],"sources":["../../../../src/views/HierarchyList/HierarchyTable/SlotTable.tsx"],"sourcesContent":["'use client'\n\nimport type { User } from 'payload'\n\nimport React from 'react'\n\nimport { Locked } from '../../../elements/Locked/index.js'\nimport { CheckboxInput } from '../../../fields/Checkbox/Input.js'\nimport { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js'\n// Rows adopt the shared table's class contract (`cell--linked`, `cell-_select`, ...) so the\n// styling lives in one place; this file only adds what the slot API needs on top.\nimport '../../../elements/Table/index.css'\nimport './SlotTable.css'\n\nconst baseClass = 'slot-table'\n\n/** Matches what SelectRow renders, so the shared row-selected background rule applies here too. */\nconst selectRowClass = 'select-row select-row__checkbox'\n\nexport type SlotColumn<TRow = Record<string, unknown>> = {\n  /**\n   * Unique identifier for the column\n   */\n  accessor: string\n  /**\n   * Cell component that receives the row data\n   */\n  Cell: React.FC<{ column: SlotColumn<TRow>; row: TRow; rowIndex: number }>\n  /**\n   * Optional class name for the column cells\n   */\n  className?: string\n  /**\n   * Column header content\n   */\n  heading: React.ReactNode\n  /**\n   * Marks the column as the row's link to its document, so the cell adopts the shared\n   * `cell--linked` treatment: padding moves onto the anchor for a full-cell click target.\n   */\n  isLinked?: boolean\n}\n\nexport type SlotTableProps<TRow = Record<string, unknown>> = {\n  /**\n   * Table appearance\n   */\n  appearance?: 'condensed' | 'default'\n  /**\n   * Additional class name\n   */\n  className?: string\n  /**\n   * Collection slug for the table\n   */\n  collectionSlug?: string\n  /**\n   * Column definitions with Cell components\n   */\n  columns: SlotColumn<TRow>[]\n  /**\n   * Data array - table loops over this\n   */\n  data: TRow[]\n  /**\n   * Show checkbox column (default: true)\n   */\n  enableCheckbox?: boolean\n  /**\n   * Show drag handle column (default: true)\n   */\n  enableDragHandle?: boolean\n  /**\n   * Show header row with column headings (default: true)\n   */\n  enableHeader?: boolean\n  /**\n   * Show select-all checkbox in header (default: true, requires enableCheckbox and enableHeader)\n   */\n  enableSelectAll?: boolean\n  /**\n   * Get unique ID for each row\n   */\n  getRowId?: (row: TRow, index: number) => number | string\n  /**\n   * Returns the user who is editing/locking a row, or undefined if not locked.\n   * When a user is returned, a lock icon replaces the checkbox for that row.\n   */\n  getRowLockedUser?: (row: TRow, index: number) => undefined | User\n  /**\n   * Merge checkbox header with first column header using colspan (default: false)\n   * The first column header will span both checkbox and content cells\n   */\n  mergeCheckboxHeader?: boolean\n  /**\n   * Callback when checkbox is toggled\n   */\n  onCheckboxChange?: (row: TRow, checked: boolean, index: number) => void\n  /**\n   * Row click handler (for navigation)\n   */\n  onRowClick?: (row: TRow, index: number) => void\n  /**\n   * Callback when \"select all\" checkbox is toggled\n   */\n  onSelectAllChange?: (checked: boolean) => void\n  /**\n   * Parent ID for the table\n   */\n  parentId?: null | number | string\n  /**\n   * Currently selected row IDs\n   */\n  selectedIds?: Set<number | string>\n}\n\nexport function SlotTable<TRow extends Record<string, unknown> = Record<string, unknown>>({\n  appearance = 'default',\n  className,\n  collectionSlug,\n  columns,\n  data,\n  enableCheckbox = true,\n  enableDragHandle = true,\n  enableHeader = true,\n  enableSelectAll = true,\n  getRowId = (row, index) => (row.id as number | string) ?? index,\n  getRowLockedUser,\n  mergeCheckboxHeader = false,\n  onCheckboxChange,\n  onRowClick,\n  onSelectAllChange,\n  parentId,\n  selectedIds = new Set(),\n}: SlotTableProps<TRow>) {\n  const allSelected = data.length > 0 && data.every((row, i) => selectedIds.has(getRowId(row, i)))\n  const someSelected = data.some((row, i) => selectedIds.has(getRowId(row, i)))\n\n  const handleSelectAll = () => {\n    onSelectAllChange?.(!allSelected)\n  }\n\n  const handleRowCheckbox = (row: TRow, index: number, isSelected: boolean) => {\n    onCheckboxChange?.(row, !isSelected, index)\n  }\n\n  const handleRowClick = (row: TRow, index: number) => {\n    onRowClick?.(row, index)\n  }\n\n  const handleRowKeyDown = (row: TRow, index: number, e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      onRowClick?.(row, index)\n    }\n  }\n\n  return (\n    <div\n      className={['table', appearance && `table--appearance-${appearance}`, baseClass, className]\n        .filter(Boolean)\n        .join(' ')}\n      key={`${collectionSlug}-${parentId}`}\n    >\n      <table cellPadding=\"0\" cellSpacing=\"0\">\n        {enableHeader && (\n          <thead>\n            <tr>\n              {enableCheckbox && !mergeCheckboxHeader && (\n                <th id=\"heading-_select\">\n                  {enableSelectAll && (\n                    <CheckboxInput\n                      checked={allSelected}\n                      className={selectRowClass}\n                      onToggle={handleSelectAll}\n                      partialChecked={someSelected && !allSelected}\n                    />\n                  )}\n                </th>\n              )}\n              {enableDragHandle && (\n                <th id=\"heading-_dragHandle\">\n                  <span className={`${baseClass}__drag-header`} />\n                </th>\n              )}\n              {columns.map((col, colIndex) => {\n                const isMergedCheckboxColumn =\n                  colIndex === 0 && enableCheckbox && mergeCheckboxHeader\n\n                return (\n                  <th\n                    className={col.className}\n                    colSpan={isMergedCheckboxColumn ? 2 : undefined}\n                    id={`heading-${col.accessor}`}\n                    key={col.accessor}\n                  >\n                    {isMergedCheckboxColumn && enableSelectAll ? (\n                      <span className={`${baseClass}__th-merged`}>\n                        <CheckboxInput\n                          checked={allSelected}\n                          className={selectRowClass}\n                          onToggle={handleSelectAll}\n                          partialChecked={someSelected && !allSelected}\n                        />\n                        {col.heading}\n                      </span>\n                    ) : (\n                      col.heading\n                    )}\n                  </th>\n                )\n              })}\n            </tr>\n          </thead>\n        )}\n        <tbody>\n          {data.map((row, rowIndex) => {\n            const rowId = getRowId(row, rowIndex)\n            const isSelected = selectedIds.has(rowId)\n            const isClickable = Boolean(onRowClick)\n\n            return (\n              <tr\n                className={isClickable ? `${baseClass}__tr--clickable` : undefined}\n                data-id={rowId}\n                key={rowId}\n                onClick={isClickable ? () => handleRowClick(row, rowIndex) : undefined}\n                onKeyDown={isClickable ? (e) => handleRowKeyDown(row, rowIndex, e) : undefined}\n                tabIndex={isClickable ? 0 : undefined}\n              >\n                {enableCheckbox && (\n                  <td className=\"cell-_select\">\n                    {(() => {\n                      const lockedUser = getRowLockedUser?.(row, rowIndex)\n\n                      if (lockedUser) {\n                        return <Locked user={lockedUser} />\n                      }\n\n                      return (\n                        <CheckboxInput\n                          checked={isSelected}\n                          className={selectRowClass}\n                          onToggle={() => handleRowCheckbox(row, rowIndex, isSelected)}\n                        />\n                      )\n                    })()}\n                  </td>\n                )}\n                {enableDragHandle && (\n                  <td className=\"cell-_dragHandle\">\n                    <span className={`${baseClass}__drag-handle`}>\n                      <AlignJustifiedIcon />\n                    </span>\n                  </td>\n                )}\n                {columns.map((col) => (\n                  <td\n                    className={[\n                      `cell-${col.accessor}`,\n                      col.isLinked && 'cell--linked',\n                      col.className,\n                    ]\n                      .filter(Boolean)\n                      .join(' ')}\n                    key={col.accessor}\n                  >\n                    <col.Cell column={col} row={row} rowIndex={rowIndex} />\n                  </td>\n                ))}\n              </tr>\n            )\n          })}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/HierarchyList/HierarchyTable/index.css

@@ -1,8 +1,31 @@
 @layer payload-default {
+  /*
+   * The sections stack in a column that claims the view's leftover height, and the last section
+   * absorbs it, so a full-height card grid inside it has empty space to be clicked or dragged over.
+   * Scoped to this view rather than TableSection itself, which other views lay out differently.
+   */
+  .hierarchy-tables {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .hierarchy-tables > .table-section:last-child {
+    flex-grow: 1;
+  }
+
+  .hierarchy-tables > .table-section:last-child > .table-section__content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  /* The title link and its edit affordance sit inline; the cell keeps the shared td padding. */
   .hierarchy-tables__name-cell {
     display: flex;
     align-items: center;
     gap: var(--spacer-1);
+    min-width: 0;
   }
 
   .hierarchy-tables__edit-button {
@@ -26,33 +49,12 @@
     }
   }
 
+  /* The underline comes from the shared `cell-link` class - see elements/Table/index.css. */
   .hierarchy-tables__name-link {
     display: flex;
     align-items: center;
-    gap: var(--spacer-2);
-    color: var(--color-text);
-    text-decoration: none;
-    background: none;
-    border: none;
-    padding: var(--spacer-2) 0;
-    padding-inline-start: var(--spacer-2);
-    font: inherit;
-    cursor: pointer;
-    text-align: left;
-    min-height: calc(var(--spacer-4) * 2);
-
-    &:hover {
-      color: var(--color-text);
-      text-decoration: underline;
-    }
-  }
-
-  .hierarchy-tables__thumbnail {
-    display: inline-block;
-    max-width: var(--spacer-3);
-    height: var(--spacer-3);
-    border-radius: var(--radius-small);
-    flex-shrink: 0;
+    gap: var(--spacer-1);
+    min-width: 0;
   }
 
   .hierarchy-tables__name-icon {
@@ -60,16 +62,21 @@
     flex-shrink: 0;
   }
 
+  /*
+   * `overflow: hidden` is required for the ellipsis, so the line box must be tall enough to
+   * contain the link underline. A line-height shorter than the glyph box crops it away.
+   */
   .hierarchy-tables__name-text {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    line-height: var(--spacer-3);
+    min-width: 0;
+    line-height: var(--text-body-large-line-height);
   }
 
   .hierarchy-tables__chevron {
-    margin-inline-start: auto;
-    padding-inline-start: var(--spacer-2);
+    display: flex;
+    flex-shrink: 0;
 
     svg {
       width: var(--spacer-2-5);
@@ -81,11 +88,6 @@
   .hierarchy-tables__col-name {
     width: auto;
     min-width: 200px;
-
-    /* Move padding to link for full-cell clickability */
-    &:has(.hierarchy-tables__name-link) {
-      padding: 0;
-    }
   }
 
   .hierarchy-tables__col-collection {
@@ -101,10 +103,6 @@
   .hierarchy-tables__col-type {
     width: 120px;
     min-width: 100px;
-
-    &:not(.slot-table__th) {
-      color: var(--color-text-secondary);
-    }
   }
 
   .hierarchy-tables__section-title {
@@ -121,4 +119,34 @@
     font-weight: var(--text-body-large-strong-font-weight);
     line-height: var(--text-body-large-strong-line-height);
   }
+
+  /*
+   * Grid mode's per-collection pagination. Aligned to the same gutter as the cards above, and
+   * wrapping rather than compressing, since a hierarchy can surface one control per related
+   * collection.
+   */
+  .hierarchy-tables__plane-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacer-3);
+    padding-inline: var(--gutter-h);
+    padding-block: var(--spacer-3);
+  }
+
+  .hierarchy-tables__plane-pagination-group {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .hierarchy-tables__plane-pagination-label {
+    color: var(--color-text);
+    white-space: nowrap;
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-strong-letter-spacing);
+  }
 }

package/dist/views/HierarchyList/HierarchyTable/index.d.ts

@@ -5,8 +5,18 @@ import type { HierarchyDocument } from '../../../elements/Hierarchy/Tree/types.j
 import type { RelatedGroup } from './types.js';
 import './index.css';
 export type HierarchyTableProps = {
+    /**
+     * Ids of the folders between the root and the folder currently open, so a folder can't be dropped
+     * into its own subtree.
+     */
+    ancestorIds?: (number | string)[];
     /** Base filter applied to hierarchy collection queries (e.g., tenant filter) */
     baseFilter?: Where;
+    /**
+     * Collection whose hierarchy view folder links should stay in. Differs from `collectionSlug` when
+     * browsing one related collection by folder. Defaults to `collectionSlug`.
+     */
+    browseCollectionSlug?: string;
     childrenData?: PaginatedDocs<HierarchyDocument>;
     /** Collections available for creation (for empty state) */
     collections?: CollectionOption[];
@@ -22,6 +32,8 @@ export type HierarchyTableProps = {
     relatedGroups: RelatedGroup[];
     search?: string;
     useAsTitle: string;
+    /** Renders each group as a grid of cards instead of a table. Defaults to 'table'. */
+    viewMode?: 'grid' | 'table';
 };
-export declare function HierarchyTable({ baseFilter, childrenData, collections, collectionSlug, hasCreatePermission, HierarchyIcon, hierarchyLabel, parentFieldName, parentId, relatedBaseFilters, relatedGroups, search, useAsTitle, }: HierarchyTableProps): React.JSX.Element;
+export declare function HierarchyTable({ ancestorIds, baseFilter, browseCollectionSlug, childrenData, collections, collectionSlug, hasCreatePermission, HierarchyIcon, hierarchyLabel, parentFieldName, parentId, relatedBaseFilters, relatedGroups, search, useAsTitle, viewMode, }: HierarchyTableProps): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/views/HierarchyList/HierarchyTable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/HierarchyList/HierarchyTable/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AASnD,OAAO,KAAyC,MAAM,OAAO,CAAA;AAE7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iDAAiD,CAAA;AACvF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAA;AAElF,OAAO,KAAK,EAAE,YAAY,EAAY,MAAM,YAAY,CAAA;AAexD,OAAO,aAAa,CAAA;AAcpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,gFAAgF;IAChF,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,YAAY,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAC/C,2DAA2D;IAC3D,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAChC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IAC1C,aAAa,EAAE,YAAY,EAAE,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,eAAe,EACf,QAAQ,EACR,kBAAkB,EAClB,aAAa,EACb,MAAM,EACN,UAAU,GACX,EAAE,mBAAmB,qBAydrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/HierarchyList/HierarchyTable/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AASnD,OAAO,KAAyC,MAAM,OAAO,CAAA;AAE7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iDAAiD,CAAA;AACvF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAA;AAGlF,OAAO,KAAK,EAAE,YAAY,EAAY,MAAM,YAAY,CAAA;AAgBxD,OAAO,aAAa,CAAA;AAcpB,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACjC,gFAAgF;IAChF,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAC/C,2DAA2D;IAC3D,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAChC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IAC1C,aAAa,EAAE,YAAY,EAAE,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC5B,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,UAAU,EACV,oBAAoB,EACpB,YAAY,EACZ,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,eAAe,EACf,QAAQ,EACR,kBAAkB,EAClB,aAAa,EACb,MAAM,EACN,UAAU,EACV,QAAkB,GACnB,EAAE,mBAAmB,qBAymBrB"}