@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.5f0cd13

package/dist/elements/Table/index.css

@@ -0,0 +1,211 @@
+@layer payload-default {
+  .table {
+    overflow: auto;
+    max-width: 100%;
+    isolation: isolate;
+
+    table {
+      min-width: 100%;
+    }
+
+    thead {
+      color: var(--color-text-secondary);
+
+      th {
+        font-weight: normal;
+        text-align: left;
+        vertical-align: middle;
+        height: calc(var(--spacer-4) * 2);
+      }
+    }
+
+    th,
+    td {
+      vertical-align: middle;
+      padding: var(--spacer-2) var(--spacer-2-5);
+      min-width: 150px;
+      position: relative;
+      z-index: 1;
+      height: calc(var(--spacer-4) * 2);
+
+      &:first-child {
+        padding-inline-start: var(--gutter-h);
+        padding-inline-end: var(--spacer-2);
+      }
+
+      &:last-child {
+        padding-inline-end: var(--spacer-2);
+      }
+    }
+
+    /* Linked cells: move padding to the anchor for full-cell clickability */
+    .cell--linked {
+      padding: 0;
+
+      > a {
+        display: flex;
+        align-items: center;
+        padding: var(--spacer-2) var(--spacer-2-5);
+        min-height: calc(var(--spacer-4) * 2);
+      }
+
+      &:first-child > a {
+        padding-inline-start: var(--spacer-2);
+        padding-inline-end: var(--spacer-2);
+      }
+    }
+
+    #heading-_select,
+    .cell-_select {
+      width: var(--spacer-5);
+      min-width: var(--spacer-5);
+      padding-inline-end: var(--spacer-2);
+      padding-block: var(--spacer-2);
+      text-align: center;
+    }
+
+    #heading-_dragHandle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    #heading-_dragHandle,
+    .cell-_dragHandle {
+      width: var(--spacer-4);
+      min-width: var(--spacer-4);
+      padding: var(--spacer-2) 0;
+      text-align: center;
+      vertical-align: middle;
+    }
+
+    tbody tr {
+      position: relative;
+      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(.select-row input:checked) {
+        background: var(--color-bg-selected);
+      }
+    }
+
+    a:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+      border-radius: var(--radius-small);
+    }
+  }
+
+  [dir='rtl'] .table thead th {
+    text-align: right;
+  }
+
+  /* Condensed appearance */
+  .table--appearance-condensed {
+    border-radius: var(--radius-medium);
+
+    table {
+      border-collapse: collapse;
+    }
+
+    thead {
+      background: var(--color-bg-secondary);
+
+      th {
+        height: var(--spacer-5);
+      }
+
+      th:first-child {
+        border-top-left-radius: var(--radius-medium);
+      }
+
+      th:last-child {
+        border-top-right-radius: var(--radius-medium);
+      }
+    }
+
+    tbody tr {
+      background: var(--color-bg);
+
+      &:last-child {
+        td:first-child {
+          border-bottom-left-radius: var(--radius-medium);
+        }
+
+        td:last-child {
+          border-bottom-right-radius: var(--radius-medium);
+        }
+      }
+    }
+
+    th,
+    td {
+      padding: 0 var(--spacer-2-5);
+      min-width: 120px;
+      height: var(--spacer-5);
+      line-height: var(--text-body-medium-line-height);
+      vertical-align: middle;
+      border-right: var(--stroke-width-small) solid var(--color-border);
+
+      &:last-child {
+        border-right: none;
+      }
+
+      &:first-child {
+        padding-inline-start: var(--spacer-2-5);
+      }
+
+      > span,
+      > a {
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+    }
+
+    /* Linked cells: move padding to the anchor for full-cell clickability */
+    .cell--linked {
+      padding: 0;
+
+      > a {
+        padding: 0 var(--spacer-2-5);
+        min-height: var(--spacer-5);
+      }
+
+      &:first-child > a {
+        padding-inline-start: var(--spacer-2-5);
+      }
+    }
+
+    tbody td {
+      border-top: var(--stroke-width-small) solid var(--color-border);
+    }
+
+    th {
+      border-bottom: var(--stroke-width-small) solid var(--color-border);
+    }
+  }
+
+  /* Drag preview */
+  .table--drag-preview {
+    cursor: grabbing;
+    z-index: var(--z-popup);
+  }
+
+  @media (max-width: 1024px) {
+    .table {
+      th,
+      td {
+        max-width: 70vw;
+      }
+    }
+  }
+}

package/dist/elements/Table/index.d.ts

@@ -1,6 +1,6 @@
 import type { Column } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type Props = {
     readonly appearance?: 'condensed' | 'default';
     readonly BeforeTable?: React.ReactNode;

package/dist/elements/Table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC7C,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqDjC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC7C,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6DjC,CAAA"}

package/dist/elements/Table/index.js

@@ -2,7 +2,7 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'table';
 export const Table = ({
   appearance,
@@ -38,7 +38,7 @@ export const Table = ({
                 accessor
               } = col;
               return /*#__PURE__*/_jsx("td", {
-                className: `cell-${accessor.replace(/\./g, '__')}`,
+                className: [`cell-${accessor.replace(/\./g, '__')}`, col.isLinkedColumn && 'cell--linked'].filter(Boolean).join(' '),
                 children: col.renderedCells[rowIndex]
               }, colIndex);
             })

package/dist/elements/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","Table","appearance","BeforeTable","columns","data","activeColumns","filter","col","active","length","_jsx","_jsxs","className","Boolean","join","cellPadding","cellSpacing","map","i","id","accessor","replace","Heading","row","rowIndex","colIndex","renderedCells","String"],"sources":["../../../src/elements/Table/index.tsx"],"sourcesContent":["'use client'\n\nimport type { Column } from 'payload'\n\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'table'\n\nexport type Props = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly BeforeTable?: React.ReactNode\n  readonly columns?: Column[]\n  readonly data: Record<string, unknown>[]\n}\n\nexport const Table: React.FC<Props> = ({ appearance, BeforeTable, columns, data }) => {\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (!activeColumns || activeColumns.length === 0) {\n    return <div>No columns selected</div>\n  }\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {BeforeTable}\n      <table cellPadding=\"0\" cellSpacing=\"0\">\n        <thead>\n          <tr>\n            {activeColumns.map((col, i) => (\n              <th id={`heading-${col.accessor.replace(/\\./g, '__')}`} key={i}>\n                {col.Heading}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data &&\n            data?.map((row, rowIndex) => {\n              return (\n                <tr\n                  className={`row-${rowIndex + 1}`}\n                  data-id={row.id}\n                  key={\n                    typeof row.id === 'string' || typeof row.id === 'number'\n                      ? String(row.id)\n                      : rowIndex\n                  }\n                >\n                  {activeColumns.map((col, colIndex) => {\n                    const { accessor } = col\n\n                    return (\n                      <td className={`cell-${accessor.replace(/\\./g, '__')}`} key={colIndex}>\n                        {col.renderedCells[rowIndex]}\n                      </td>\n                    )\n                  })}\n                </tr>\n              )\n            })}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB,OAAO,MAAMC,KAAA,GAAyBA,CAAC;EAAEC,UAAU;EAAEC,WAAW;EAAEC,OAAO;EAAEC;AAAI,CAAE;EAC/E,MAAMC,aAAA,GAAgBF,OAAA,EAASG,MAAA,CAAQC,GAAA,IAAQA,GAAA,EAAKC,MAAA;EAEpD,IAAI,CAACH,aAAA,IAAiBA,aAAA,CAAcI,MAAM,KAAK,GAAG;IAChD,oBAAOC,IAAA,CAAC;gBAAI;;EACd;EAEA,oBACEC,KAAA,CAAC;IACCC,SAAA,EAAW,CAACb,SAAA,EAAWE,UAAA,IAAc,GAAGF,SAAA,gBAAyBE,UAAA,EAAY,CAAC,CAC3EK,MAAM,CAACO,OAAA,EACPC,IAAI,CAAC;eAEPZ,WAAA,E,aACDS,KAAA,CAAC;MAAMI,WAAA,EAAY;MAAIC,WAAA,EAAY;8BACjCN,IAAA,CAAC;kBACC,aAAAA,IAAA,CAAC;oBACEL,aAAA,CAAcY,GAAG,CAAC,CAACV,GAAA,EAAKW,CAAA,kBACvBR,IAAA,CAAC;YAAGS,EAAA,EAAI,WAAWZ,GAAA,CAAIa,QAAQ,CAACC,OAAO,CAAC,OAAO,OAAO;sBACnDd,GAAA,CAAIe;aADsDJ,CAAA;;uBAMnER,IAAA,CAAC;kBACEN,IAAA,IACCA,IAAA,EAAMa,GAAA,CAAI,CAACM,GAAA,EAAKC,QAAA;UACd,oBACEd,IAAA,CAAC;YACCE,SAAA,EAAW,OAAOY,QAAA,GAAW,GAAG;YAChC,WAASD,GAAA,CAAIJ,EAAE;sBAOdd,aAAA,CAAcY,GAAG,CAAC,CAACV,GAAA,EAAKkB,QAAA;cACvB,MAAM;gBAAEL;cAAQ,CAAE,GAAGb,GAAA;cAErB,oBACEG,IAAA,CAAC;gBAAGE,SAAA,EAAW,QAAQQ,QAAA,CAASC,OAAO,CAAC,OAAO,OAAO;0BACnDd,GAAA,CAAImB,aAAa,CAACF,QAAA;iBADwCC,QAAA;YAIjE;aAbE,OAAOF,GAAA,CAAIJ,EAAE,KAAK,YAAY,OAAOI,GAAA,CAAIJ,EAAE,KAAK,WAC5CQ,MAAA,CAAOJ,GAAA,CAAIJ,EAAE,IACbK,QAAA;QAcZ;;;;AAKZ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","Table","appearance","BeforeTable","columns","data","activeColumns","filter","col","active","length","_jsx","_jsxs","className","Boolean","join","cellPadding","cellSpacing","map","i","id","accessor","replace","Heading","row","rowIndex","colIndex","isLinkedColumn","renderedCells","String"],"sources":["../../../src/elements/Table/index.tsx"],"sourcesContent":["'use client'\n\nimport type { Column } from 'payload'\n\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'table'\n\nexport type Props = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly BeforeTable?: React.ReactNode\n  readonly columns?: Column[]\n  readonly data: Record<string, unknown>[]\n}\n\nexport const Table: React.FC<Props> = ({ appearance, BeforeTable, columns, data }) => {\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (!activeColumns || activeColumns.length === 0) {\n    return <div>No columns selected</div>\n  }\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {BeforeTable}\n      <table cellPadding=\"0\" cellSpacing=\"0\">\n        <thead>\n          <tr>\n            {activeColumns.map((col, i) => (\n              <th id={`heading-${col.accessor.replace(/\\./g, '__')}`} key={i}>\n                {col.Heading}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data &&\n            data?.map((row, rowIndex) => {\n              return (\n                <tr\n                  className={`row-${rowIndex + 1}`}\n                  data-id={row.id}\n                  key={\n                    typeof row.id === 'string' || typeof row.id === 'number'\n                      ? String(row.id)\n                      : rowIndex\n                  }\n                >\n                  {activeColumns.map((col, colIndex) => {\n                    const { accessor } = col\n\n                    return (\n                      <td\n                        className={[\n                          `cell-${accessor.replace(/\\./g, '__')}`,\n                          col.isLinkedColumn && 'cell--linked',\n                        ]\n                          .filter(Boolean)\n                          .join(' ')}\n                        key={colIndex}\n                      >\n                        {col.renderedCells[rowIndex]}\n                      </td>\n                    )\n                  })}\n                </tr>\n              )\n            })}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB,OAAO,MAAMC,KAAA,GAAyBA,CAAC;EAAEC,UAAU;EAAEC,WAAW;EAAEC,OAAO;EAAEC;AAAI,CAAE;EAC/E,MAAMC,aAAA,GAAgBF,OAAA,EAASG,MAAA,CAAQC,GAAA,IAAQA,GAAA,EAAKC,MAAA;EAEpD,IAAI,CAACH,aAAA,IAAiBA,aAAA,CAAcI,MAAM,KAAK,GAAG;IAChD,oBAAOC,IAAA,CAAC;gBAAI;;EACd;EAEA,oBACEC,KAAA,CAAC;IACCC,SAAA,EAAW,CAACb,SAAA,EAAWE,UAAA,IAAc,GAAGF,SAAA,gBAAyBE,UAAA,EAAY,CAAC,CAC3EK,MAAM,CAACO,OAAA,EACPC,IAAI,CAAC;eAEPZ,WAAA,E,aACDS,KAAA,CAAC;MAAMI,WAAA,EAAY;MAAIC,WAAA,EAAY;8BACjCN,IAAA,CAAC;kBACC,aAAAA,IAAA,CAAC;oBACEL,aAAA,CAAcY,GAAG,CAAC,CAACV,GAAA,EAAKW,CAAA,kBACvBR,IAAA,CAAC;YAAGS,EAAA,EAAI,WAAWZ,GAAA,CAAIa,QAAQ,CAACC,OAAO,CAAC,OAAO,OAAO;sBACnDd,GAAA,CAAIe;aADsDJ,CAAA;;uBAMnER,IAAA,CAAC;kBACEN,IAAA,IACCA,IAAA,EAAMa,GAAA,CAAI,CAACM,GAAA,EAAKC,QAAA;UACd,oBACEd,IAAA,CAAC;YACCE,SAAA,EAAW,OAAOY,QAAA,GAAW,GAAG;YAChC,WAASD,GAAA,CAAIJ,EAAE;sBAOdd,aAAA,CAAcY,GAAG,CAAC,CAACV,GAAA,EAAKkB,QAAA;cACvB,MAAM;gBAAEL;cAAQ,CAAE,GAAGb,GAAA;cAErB,oBACEG,IAAA,CAAC;gBACCE,SAAA,EAAW,CACT,QAAQQ,QAAA,CAASC,OAAO,CAAC,OAAO,OAAO,EACvCd,GAAA,CAAImB,cAAc,IAAI,eACvB,CACEpB,MAAM,CAACO,OAAA,EACPC,IAAI,CAAC;0BAGPP,GAAA,CAAIoB,aAAa,CAACH,QAAA;iBAFdC,QAAA;YAKX;aArBE,OAAOF,GAAA,CAAIJ,EAAE,KAAK,YAAY,OAAOI,GAAA,CAAIJ,EAAE,KAAK,WAC5CS,MAAA,CAAOL,GAAA,CAAIJ,EAAE,IACbK,QAAA;QAsBZ;;;;AAKZ","ignoreList":[]}

package/dist/elements/TableSection/index.css

@@ -0,0 +1,60 @@
+@layer payload-default {
+  .table-section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .table-section__header-inner {
+    display: flex;
+    align-items: center;
+    min-height: calc(var(--spacer-6) + var(--spacer-2));
+    padding: 0 var(--gutter-h);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .table-section__heading {
+    margin: 0;
+    flex-grow: 1;
+    font-family: var(--text-body-large-strong-font-family);
+    font-size: var(--text-body-large-strong-font-size);
+    font-weight: var(--text-body-large-strong-font-weight);
+    line-height: var(--text-body-large-strong-line-height);
+    letter-spacing: var(--text-body-large-strong-letter-spacing);
+  }
+
+  .table-section__header .list-selection__actions button {
+    margin: 0;
+  }
+
+  .table-section__content {
+    padding-bottom: var(--spacer-2);
+  }
+
+  .table-section__divider {
+    display: none;
+    height: var(--spacer-2);
+    background: var(--color-bg-secondary);
+    border-top: var(--stroke-width-small) solid var(--color-border);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  /* Show divider only between adjacent table sections */
+  .table-section + .table-section > .table-section__divider {
+    display: block;
+  }
+
+  @media (max-width: 768px) {
+    .table-section__header {
+      padding: 0 calc(var(--spacer-3) - var(--spacer-2));
+    }
+
+    .table-section__content {
+      padding: 0 calc(var(--spacer-3) - var(--spacer-2));
+      padding-bottom: var(--spacer-2);
+    }
+
+    .table-section__footer {
+      padding: var(--spacer-2) var(--spacer-3);
+    }
+  }
+}

package/dist/elements/TableSection/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import './index.css';
+export type TableSectionProps = {
+    children: React.ReactNode;
+    className?: string;
+    'data-group-id'?: string;
+};
+export type TableSectionHeaderProps = {
+    children?: React.ReactNode;
+    className?: string;
+    heading?: string;
+};
+export type TableSectionContentProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+export declare function TableSectionRoot({ children, className, 'data-group-id': dataGroupId, }: TableSectionProps): React.JSX.Element;
+export declare function TableSectionHeader({ children, className, heading }: TableSectionHeaderProps): React.JSX.Element;
+export declare function TableSectionContent({ children, className }: TableSectionContentProps): React.JSX.Element;
+export declare const TableSection: typeof TableSectionRoot & {
+    Content: typeof TableSectionContent;
+    Header: typeof TableSectionHeader;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/TableSection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TableSection/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,eAAe,EAAE,WAAW,GAC7B,EAAE,iBAAiB,qBAOnB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,uBAAuB,qBAS3F;AAED,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,wBAAwB,qBAIpF;AAGD,eAAO,MAAM,YAAY;;;CAGvB,CAAA"}

package/dist/elements/TableSection/index.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import './index.css';
+const baseClass = 'table-section';
+export function TableSectionRoot({
+  children,
+  className,
+  'data-group-id': dataGroupId
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: [baseClass, className].filter(Boolean).join(' '),
+    "data-group-id": dataGroupId,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__divider`
+    }), children]
+  });
+}
+export function TableSectionHeader({
+  children,
+  className,
+  heading
+}) {
+  return /*#__PURE__*/_jsx("header", {
+    className: [`${baseClass}__header`, className].filter(Boolean).join(' '),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__header-inner`,
+      children: [heading && /*#__PURE__*/_jsx("h4", {
+        className: `${baseClass}__heading`,
+        children: heading
+      }), children]
+    })
+  });
+}
+export function TableSectionContent({
+  children,
+  className
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    className: [`${baseClass}__content`, className].filter(Boolean).join(' '),
+    children: children
+  });
+}
+// Compound component for client usage
+export const TableSection = Object.assign(TableSectionRoot, {
+  Content: TableSectionContent,
+  Header: TableSectionHeader
+});
+//# sourceMappingURL=index.js.map

package/dist/elements/TableSection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","TableSectionRoot","children","className","dataGroupId","_jsxs","filter","Boolean","join","_jsx","TableSectionHeader","heading","TableSectionContent","TableSection","Object","assign","Content","Header"],"sources":["../../../src/elements/TableSection/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'table-section'\n\nexport type TableSectionProps = {\n  children: React.ReactNode\n  className?: string\n  'data-group-id'?: string\n}\n\nexport type TableSectionHeaderProps = {\n  children?: React.ReactNode\n  className?: string\n  heading?: string\n}\n\nexport type TableSectionContentProps = {\n  children: React.ReactNode\n  className?: string\n}\n\nexport function TableSectionRoot({\n  children,\n  className,\n  'data-group-id': dataGroupId,\n}: TableSectionProps) {\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} data-group-id={dataGroupId}>\n      <div className={`${baseClass}__divider`} />\n      {children}\n    </div>\n  )\n}\n\nexport function TableSectionHeader({ children, className, heading }: TableSectionHeaderProps) {\n  return (\n    <header className={[`${baseClass}__header`, className].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__header-inner`}>\n        {heading && <h4 className={`${baseClass}__heading`}>{heading}</h4>}\n        {children}\n      </div>\n    </header>\n  )\n}\n\nexport function TableSectionContent({ children, className }: TableSectionContentProps) {\n  return (\n    <div className={[`${baseClass}__content`, className].filter(Boolean).join(' ')}>{children}</div>\n  )\n}\n\n// Compound component for client usage\nexport const TableSection = Object.assign(TableSectionRoot, {\n  Content: TableSectionContent,\n  Header: TableSectionHeader,\n})\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAmBlB,OAAO,SAASC,iBAAiB;EAC/BC,QAAQ;EACRC,SAAS;EACT,iBAAiBC;AAAW,CACV;EAClB,oBACEC,KAAA,CAAC;IAAIF,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACG,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;IAAM,iBAAeJ,WAAA;4BAC/EK,IAAA,CAAC;MAAIN,SAAA,EAAW,GAAGH,SAAA;QAClBE,QAAA;;AAGP;AAEA,OAAO,SAASQ,mBAAmB;EAAER,QAAQ;EAAEC,SAAS;EAAEQ;AAAO,CAA2B;EAC1F,oBACEF,IAAA,CAAC;IAAON,SAAA,EAAW,CAAC,GAAGH,SAAA,UAAmB,EAAEG,SAAA,CAAU,CAACG,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAC1E,aAAAH,KAAA,CAAC;MAAIF,SAAA,EAAW,GAAGH,SAAA,gBAAyB;iBACzCW,OAAA,iBAAWF,IAAA,CAAC;QAAGN,SAAA,EAAW,GAAGH,SAAA,WAAoB;kBAAGW;UACpDT,QAAA;;;AAIT;AAEA,OAAO,SAASU,oBAAoB;EAAEV,QAAQ;EAAEC;AAAS,CAA4B;EACnF,oBACEM,IAAA,CAAC;IAAIN,SAAA,EAAW,CAAC,GAAGH,SAAA,WAAoB,EAAEG,SAAA,CAAU,CAACG,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAAON;;AAErF;AAEA;AACA,OAAO,MAAMW,YAAA,GAAeC,MAAA,CAAOC,MAAM,CAACd,gBAAA,EAAkB;EAC1De,OAAA,EAASJ,mBAAA;EACTK,MAAA,EAAQP;AACV","ignoreList":[]}

package/dist/elements/Thumbnail/createThumbnail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createThumbnail.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe,SAAU,IAAI,KAAG,OAAO,CAAC,MAAM,CAoD1D,CAAA"}
+{"version":3,"file":"createThumbnail.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,IAAI,KAAG,OAAO,CAAC,MAAM,CAoD1D,CAAA"}

package/dist/elements/ThumbnailCard/index.css

@@ -1,10 +1,12 @@
 @layer payload-default {
   .thumbnail-card {
+    --thumbnail-card-size: 106px;
+
     display: flex;
     flex-direction: column;
     gap: var(--spacer-2);
     align-items: flex-start;
-    width: 100%;
+    max-width: var(--thumbnail-card-size);
     background: transparent;
     border: 0;
     padding: 0;
@@ -13,6 +15,10 @@
 
   .thumbnail-card--has-on-click {
     cursor: pointer;
+
+    &:focus-visible {
+      outline: none;
+    }
   }
 
   .thumbnail-card--align-label-center {
@@ -23,26 +29,48 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    min-width: var(--thumbnail-card-size);
     width: 100%;
     aspect-ratio: 1 / 1;
     background: var(--color-bg-secondary);
     border-radius: var(--radius-medium);
     overflow: hidden;
-    border: 2px solid transparent;
-    transition: border-color 100ms ease;
+    outline: var(--stroke-width-small) solid transparent;
+    outline-offset: calc(var(--stroke-width-small) * -1);
+  }
+
+  .thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail {
+    outline-color: var(--color-border);
   }
 
-  .thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail,
   .thumbnail-card--has-on-click:focus-visible .thumbnail-card__thumbnail {
-    border-color: var(--color-border);
+    outline-width: var(--stroke-width-medium);
+    outline-offset: calc(var(--stroke-width-medium) * -1);
+    outline-color: var(--color-border-selected);
+  }
+
+  .thumbnail-card--has-on-click:active .thumbnail-card__thumbnail {
+    outline-color: var(--color-bg-secondary-pressed);
   }
 
   .thumbnail-card--selected .thumbnail-card__thumbnail {
-    border-color: var(--color-border-selected);
+    outline-width: var(--stroke-width-medium);
+    outline-offset: calc(var(--stroke-width-medium) * -1);
+    outline-color: var(--color-border-selected);
+  }
+
+  .thumbnail-card--selected.thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail,
+  .thumbnail-card--selected.thumbnail-card--has-on-click:focus-visible .thumbnail-card__thumbnail {
+    outline-color: var(--accessibility-focus-color);
+  }
+
+  .thumbnail-card--selected.thumbnail-card--has-on-click:active .thumbnail-card__thumbnail {
+    outline-color: var(--accessibility-focus-color);
   }
 
   .thumbnail-card__label {
     min-width: 100%;
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -53,6 +81,5 @@
     font-style: normal;
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
-    letter-spacing: 0.055px;
   }
 }

package/dist/elements/TimezonePicker/index.css

@@ -0,0 +1,166 @@
+@layer payload-default {
+  .timezone-picker-wrapper {
+    display: flex;
+    gap: var(--spacer-1);
+    margin-top: var(--spacer-2);
+    align-items: center;
+    position: relative;
+
+    .timezone-picker__label {
+      color: var(--color-text-secondary);
+      flex-shrink: 0;
+      font-family: var(--text-body-medium-font-family);
+      font-size: var(--text-body-medium-font-size);
+      font-weight: var(--text-body-medium-font-weight);
+      line-height: var(--text-body-medium-line-height);
+      letter-spacing: var(--text-body-medium-letter-spacing);
+    }
+
+    .timezone-picker__required {
+      color: var(--color-text-danger);
+      margin-left: var(--spacer-1);
+    }
+
+    .timezone-picker.react-select {
+      display: inline-flex;
+      position: static;
+
+      .rs__menu {
+        overflow: hidden;
+        border-radius: var(--radius-large);
+        background: var(--popup-bg-dark, var(--color-bg-menu));
+        color: var(--popup-item-color-dark, var(--color-text-ontooltip));
+        padding: var(--spacer-2);
+        min-width: 280px;
+        max-height: 280px;
+      }
+
+      .rs__menu-list {
+        max-height: calc(var(--spacer-6) * 5);
+        overflow-y: auto;
+      }
+
+      .rs__option {
+        padding: var(--spacer-1) var(--spacer-2);
+        border-radius: var(--button-radius);
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .rs__option--is-focused,
+      .rs__option--is-selected {
+        /* Colors handled by inline styles via react-select styles prop */
+      }
+
+      .rs__value-container {
+        padding: 0;
+      }
+
+      .rs__control.rs__control {
+        display: inline-flex;
+        align-items: center;
+        background: none;
+        border: none;
+        padding: 0;
+        padding-left: var(--spacer-1);
+        min-height: auto !important;
+        position: relative;
+        box-shadow: unset;
+        border-radius: var(--button-radius);
+        gap: 0;
+        flex-wrap: nowrap;
+
+        &:hover {
+          cursor: pointer;
+          box-shadow: unset;
+          background: var(--color-bg-secondary);
+        }
+
+        &:active {
+          background: var(--color-bg-secondary-pressed);
+        }
+
+        &.rs__control--is-focused {
+          box-shadow: 0 0 0 1px var(--accessibility-focus-color);
+        }
+
+        &.rs__control--menu-is-open::before {
+          display: block;
+        }
+      }
+
+      .rs__input-container {
+        margin: 0;
+        padding: 0;
+      }
+
+      .rs__input {
+        caret-color: transparent;
+      }
+
+      .rs__indicators {
+        position: static;
+        display: flex;
+        align-items: center;
+        min-height: auto;
+        margin-inline-start: 0;
+        gap: 0;
+        flex-shrink: 0;
+      }
+
+      .rs__single-value {
+        color: var(--color-text);
+        font-family: var(--text-body-medium-font-family);
+        font-size: var(--text-body-medium-font-size);
+        font-weight: var(--text-body-medium-font-weight);
+        line-height: var(--text-body-medium-line-height);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .rs__placeholder {
+        color: var(--color-text-secondary);
+        font-family: var(--text-body-medium-font-family);
+        font-size: var(--text-body-medium-font-size);
+        font-weight: var(--text-body-medium-font-weight);
+        line-height: var(--text-body-medium-line-height);
+      }
+
+      .timezone-picker__dropdown-indicator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        background: none;
+        border: none;
+        cursor: pointer;
+        border-radius: var(--button-radius);
+        color: var(--color-text-secondary);
+
+        &:focus-visible {
+          outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
+          outline-offset: calc(-1 * var(--stroke-width-small));
+        }
+      }
+
+      .timezone-picker__clear-indicator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-inline: calc(-1 * var(--stroke-width-small));
+        cursor: pointer;
+        margin-left: calc(var(--spacer-1) / 2);
+        height: var(--spacer-3);
+        overflow: visible;
+        border-radius: var(--button-radius);
+
+        &:focus-visible {
+          outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
+        }
+      }
+    }
+  }
+}

package/dist/elements/TimezonePicker/index.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
 import type { Props } from './types.js';
-import './index.scss';
+import './index.css';
 export declare const TimezonePicker: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/TimezonePicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TimezonePicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+C1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TimezonePicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAOvC,OAAO,aAAa,CAAA;AAqDpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsE1C,CAAA"}