@payloadcms/ui 4.0.0-internal.43ccea7 → 4.0.0-internal.442e8b6

package/dist/elements/Table/index.js

@@ -1,16 +1,40 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import React, { useRef } from 'react';
+import { useAuth } from '../../providers/Auth/index.js';
+import { useSelection } from '../../providers/Selection/index.js';
+import { useGridNavigation } from './GridNavigation/useGridNavigation.js';
+import { TableGridContext, useTableID, useTableNavigationLabel } from './TableIdentity.js';
 import './index.css';
 const baseClass = 'table';
 export const Table = ({
+  id,
   appearance,
+  ariaLabel,
   BeforeTable,
   columns,
-  data
+  data,
+  navigationLabel: navigationLabelFromProps
 }) => {
+  const tableID = useTableID(id);
+  const navigationLabelFromContext = useTableNavigationLabel();
+  const navigationLabel = navigationLabelFromProps ?? navigationLabelFromContext;
+  const tableRef = useRef(null);
+  const isGrid = Boolean(navigationLabel);
+  const {
+    selected
+  } = useSelection();
+  const {
+    user
+  } = useAuth();
   const activeColumns = columns?.filter(col => col?.active);
+  const hasRowSelection = isGrid && activeColumns?.some(column => column.accessor === '_select');
+  useGridNavigation({
+    id,
+    isEnabled: isGrid && Boolean(activeColumns?.length),
+    ref: tableRef
+  });
   if (!activeColumns || activeColumns.length === 0) {
     return /*#__PURE__*/_jsx("div", {
       children: "No columns selected"
@@ -18,33 +42,52 @@ export const Table = ({
   }
   return /*#__PURE__*/_jsxs("div", {
     className: [baseClass, appearance && `${baseClass}--appearance-${appearance}`].filter(Boolean).join(' '),
-    children: [BeforeTable, /*#__PURE__*/_jsxs("table", {
-      cellPadding: "0",
-      cellSpacing: "0",
-      children: [/*#__PURE__*/_jsx("thead", {
-        children: /*#__PURE__*/_jsx("tr", {
-          children: activeColumns.map((col, i) => /*#__PURE__*/_jsx("th", {
-            id: `heading-${col.accessor.replace(/\./g, '__')}`,
-            children: col.Heading
-          }, i))
-        })
-      }), /*#__PURE__*/_jsx("tbody", {
-        children: data && data?.map((row, rowIndex) => {
-          return /*#__PURE__*/_jsx("tr", {
-            className: `row-${rowIndex + 1}`,
-            "data-id": row.id,
-            children: activeColumns.map((col, colIndex) => {
-              const {
-                accessor
-              } = col;
-              return /*#__PURE__*/_jsx("td", {
-                className: [`cell-${accessor.replace(/\./g, '__')}`, col.isLinkedColumn && 'cell--linked'].filter(Boolean).join(' '),
-                children: col.renderedCells[rowIndex]
-              }, colIndex);
-            })
-          }, typeof row.id === 'string' || typeof row.id === 'number' ? String(row.id) : rowIndex);
-        })
-      })]
+    children: [BeforeTable, /*#__PURE__*/_jsx(TableGridContext, {
+      value: isGrid,
+      children: /*#__PURE__*/_jsxs("table", {
+        "aria-label": ariaLabel ?? navigationLabel,
+        "aria-multiselectable": hasRowSelection || undefined,
+        cellPadding: "0",
+        cellSpacing: "0",
+        id: tableID,
+        ref: tableRef,
+        role: isGrid ? 'grid' : undefined,
+        children: [/*#__PURE__*/_jsx("thead", {
+          children: /*#__PURE__*/_jsx("tr", {
+            role: isGrid ? 'row' : undefined,
+            children: activeColumns.map(col_0 => /*#__PURE__*/_jsx("th", {
+              "data-column": col_0.accessor,
+              id: `heading-${col_0.accessor.replace(/\./g, '__')}`,
+              role: isGrid ? 'columnheader' : undefined,
+              scope: "col",
+              children: col_0.Heading
+            }, col_0.accessor))
+          })
+        }), /*#__PURE__*/_jsx("tbody", {
+          children: data && data?.map((row, rowIndex) => {
+            const userEditing = row._userEditing;
+            const isLockedByAnotherUser = row._isLocked && userEditing && userEditing.id !== user?.id;
+            return /*#__PURE__*/_jsx("tr", {
+              "aria-label": isGrid ? String(rowIndex + 1) : undefined,
+              "aria-selected": hasRowSelection && !isLockedByAnotherUser ? Boolean((typeof row.id === 'string' || typeof row.id === 'number') && selected.get(row.id)) : undefined,
+              className: `row-${rowIndex + 1}`,
+              "data-id": row.id,
+              role: isGrid ? 'row' : undefined,
+              children: activeColumns.map(col_1 => {
+                const {
+                  accessor
+                } = col_1;
+                return /*#__PURE__*/_jsx("td", {
+                  className: [`cell-${accessor.replace(/\./g, '__')}`, col_1.isLinkedColumn && 'cell--linked'].filter(Boolean).join(' '),
+                  "data-column": accessor,
+                  role: isGrid ? 'gridcell' : undefined,
+                  children: col_1.renderedCells[rowIndex]
+                }, accessor);
+              })
+            }, typeof row.id === 'string' || typeof row.id === 'number' ? String(row.id) : rowIndex);
+          })
+        })]
+      })
     })]
   });
 };

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","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":[]}
+{"version":3,"file":"index.js","names":["React","useRef","useAuth","useSelection","useGridNavigation","TableGridContext","useTableID","useTableNavigationLabel","baseClass","Table","id","appearance","ariaLabel","BeforeTable","columns","data","navigationLabel","navigationLabelFromProps","tableID","navigationLabelFromContext","tableRef","isGrid","Boolean","selected","user","activeColumns","filter","col","active","hasRowSelection","some","column","accessor","isEnabled","length","ref","_jsx","_jsxs","className","join","value","undefined","cellPadding","cellSpacing","role","map","replace","scope","Heading","row","rowIndex","userEditing","_userEditing","isLockedByAnotherUser","_isLocked","String","get","isLinkedColumn","renderedCells"],"sources":["../../../src/elements/Table/index.tsx"],"sourcesContent":["'use client'\n\nimport type { Column, User } from 'payload'\n\nimport React, { useRef } from 'react'\n\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useSelection } from '../../providers/Selection/index.js'\nimport { useGridNavigation } from './GridNavigation/useGridNavigation.js'\nimport { TableGridContext, useTableID, useTableNavigationLabel } from './TableIdentity.js'\nimport './index.css'\n\nconst baseClass = 'table'\n\nexport type Props = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly ariaLabel?: string\n  readonly BeforeTable?: React.ReactNode\n  readonly columns?: Column[]\n  readonly data: Record<string, unknown>[]\n  readonly id?: string\n  readonly navigationLabel?: string\n}\n\nexport const Table: React.FC<Props> = ({\n  id,\n  appearance,\n  ariaLabel,\n  BeforeTable,\n  columns,\n  data,\n  navigationLabel: navigationLabelFromProps,\n}) => {\n  const tableID = useTableID(id)\n  const navigationLabelFromContext = useTableNavigationLabel()\n  const navigationLabel = navigationLabelFromProps ?? navigationLabelFromContext\n  const tableRef = useRef<HTMLTableElement>(null)\n  const isGrid = Boolean(navigationLabel)\n  const { selected } = useSelection()\n  const { user } = useAuth()\n\n  const activeColumns = columns?.filter((col) => col?.active)\n  const hasRowSelection = isGrid && activeColumns?.some((column) => column.accessor === '_select')\n\n  useGridNavigation({ id, isEnabled: isGrid && Boolean(activeColumns?.length), ref: tableRef })\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      <TableGridContext value={isGrid}>\n        <table\n          aria-label={ariaLabel ?? navigationLabel}\n          aria-multiselectable={hasRowSelection || undefined}\n          cellPadding=\"0\"\n          cellSpacing=\"0\"\n          id={tableID}\n          ref={tableRef}\n          role={isGrid ? 'grid' : undefined}\n        >\n          <thead>\n            <tr role={isGrid ? 'row' : undefined}>\n              {activeColumns.map((col) => (\n                <th\n                  data-column={col.accessor}\n                  id={`heading-${col.accessor.replace(/\\./g, '__')}`}\n                  key={col.accessor}\n                  role={isGrid ? 'columnheader' : undefined}\n                  scope=\"col\"\n                >\n                  {col.Heading}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {data &&\n              data?.map((row, rowIndex) => {\n                const userEditing = row._userEditing as undefined | User\n                const isLockedByAnotherUser =\n                  row._isLocked && userEditing && userEditing.id !== user?.id\n\n                return (\n                  <tr\n                    aria-label={isGrid ? String(rowIndex + 1) : undefined}\n                    aria-selected={\n                      hasRowSelection && !isLockedByAnotherUser\n                        ? Boolean(\n                            (typeof row.id === 'string' || typeof row.id === 'number') &&\n                              selected.get(row.id),\n                          )\n                        : undefined\n                    }\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                    role={isGrid ? 'row' : undefined}\n                  >\n                    {activeColumns.map((col) => {\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                          data-column={accessor}\n                          key={accessor}\n                          role={isGrid ? 'gridcell' : undefined}\n                        >\n                          {col.renderedCells[rowIndex]}\n                        </td>\n                      )\n                    })}\n                  </tr>\n                )\n              })}\n          </tbody>\n        </table>\n      </TableGridContext>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,7 @@
+import type { AriaAttributes, RefObject } from 'react';
+export declare const useAriaSort: <TElement extends HTMLElement>({ labelledBy, ref, value, }: {
+    labelledBy?: string;
+    ref: RefObject<null | TElement>;
+    value?: AriaAttributes['aria-sort'];
+}) => void;
+//# sourceMappingURL=useAriaSort.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAriaSort.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/useAriaSort.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,eAAO,MAAM,WAAW,GAAI,QAAQ,SAAS,WAAW,+BAIrD;IACD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,SAAS,CAAC,IAAI,GAAG,QAAQ,CAAC,CAAA;IAC/B,KAAK,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;CACpC,SA8BA,CAAA"}

package/dist/elements/Table/useAriaSort.js

@@ -0,0 +1,53 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useId } from 'react';
+export const useAriaSort = t0 => {
+  const $ = _c(6);
+  const {
+    labelledBy,
+    ref,
+    value
+  } = t0;
+  const owner = useId();
+  let t1;
+  let t2;
+  if ($[0] !== labelledBy || $[1] !== owner || $[2] !== ref || $[3] !== value) {
+    t1 = () => {
+      const header = ref.current?.closest("th");
+      if (!header) {
+        return;
+      }
+      header.dataset.ariaSortOwner = owner;
+      if (value) {
+        header.setAttribute("aria-sort", value);
+      } else {
+        header.removeAttribute("aria-sort");
+      }
+      if (labelledBy) {
+        header.setAttribute("aria-labelledby", labelledBy);
+      }
+      return () => {
+        if (header.dataset.ariaSortOwner === owner) {
+          delete header.dataset.ariaSortOwner;
+          header.removeAttribute("aria-sort");
+          if (labelledBy) {
+            header.removeAttribute("aria-labelledby");
+          }
+        }
+      };
+    };
+    t2 = [labelledBy, owner, ref, value];
+    $[0] = labelledBy;
+    $[1] = owner;
+    $[2] = ref;
+    $[3] = value;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t1 = $[4];
+    t2 = $[5];
+  }
+  useEffect(t1, t2);
+};
+//# sourceMappingURL=useAriaSort.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAriaSort.js","names":["c","_c","useEffect","useId","useAriaSort","t0","$","labelledBy","ref","value","owner","t1","t2","header","current","closest","dataset","ariaSortOwner","setAttribute","removeAttribute"],"sources":["../../../src/elements/Table/useAriaSort.ts"],"sourcesContent":["'use client'\n\nimport type { AriaAttributes, RefObject } from 'react'\n\nimport { useEffect, useId } from 'react'\n\nexport const useAriaSort = <TElement extends HTMLElement>({\n  labelledBy,\n  ref,\n  value,\n}: {\n  labelledBy?: string\n  ref: RefObject<null | TElement>\n  value?: AriaAttributes['aria-sort']\n}) => {\n  const owner = useId()\n\n  useEffect(() => {\n    const header = ref.current?.closest('th')\n\n    if (!header) {\n      return\n    }\n\n    header.dataset.ariaSortOwner = owner\n    if (value) {\n      header.setAttribute('aria-sort', value)\n    } else {\n      header.removeAttribute('aria-sort')\n    }\n    if (labelledBy) {\n      header.setAttribute('aria-labelledby', labelledBy)\n    }\n\n    return () => {\n      if (header.dataset.ariaSortOwner === owner) {\n        delete header.dataset.ariaSortOwner\n        header.removeAttribute('aria-sort')\n        if (labelledBy) {\n          header.removeAttribute('aria-labelledby')\n        }\n      }\n    }\n  }, [labelledBy, owner, ref, value])\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AAIA,SAASC,SAAS,EAAEC,KAAK,QAAQ;AAEjC,OAAO,MAAMC,WAAA,GAAcC,EAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EAA+B;IAAAM,UAAA;IAAAC,GAAA;IAAAC;EAAA,IAAAJ,EAQzD;EACC,MAAAK,KAAA,GAAcP,KAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAN,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAI,KAAA,IAAAJ,CAAA,QAAAE,GAAA,IAAAF,CAAA,QAAAG,KAAA;IAEJE,EAAA,GAAAA,CAAA;MACR,MAAAE,MAAA,GAAeL,GAAA,CAAAM,OAAA,EAAAC,OAAA,CAAqB;MAAA,KAE/BF,MAAA;QAAA;MAAA;MAILA,MAAA,CAAAG,OAAA,CAAAC,aAAA,GAA+BP,KAAA;MAAA,IAC3BD,KAAA;QACFI,MAAA,CAAAK,YAAA,CAAoB,aAAaT,KAAA;MAAA;QAEjCI,MAAA,CAAAM,eAAA,CAAuB;MAAA;MAAA,IAErBZ,UAAA;QACFM,MAAA,CAAAK,YAAA,CAAoB,mBAAmBX,UAAA;MAAA;MAAA;QAAA,IAInCM,MAAA,CAAAG,OAAA,CAAAC,aAAA,KAAiCP,KAAA;UAAA,OAC5BG,MAAA,CAAAG,OAAA,CAAAC,aAAA;UACPJ,MAAA,CAAAM,eAAA,CAAuB;UAAA,IACnBZ,UAAA;YACFM,MAAA,CAAAM,eAAA,CAAuB;UAAA;QAAA;MAAA;IAAA;IAI5BP,EAAA,IAACL,UAAA,EAAYG,KAAA,EAAOF,GAAA,EAAKC,KAAA;IAAMH,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAI,KAAA;IAAAJ,CAAA,MAAAE,GAAA;IAAAF,CAAA,MAAAG,KAAA;IAAAH,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAM,EAAA;EAAA;IAAAD,EAAA,GAAAL,CAAA;IAAAM,EAAA,GAAAN,CAAA;EAAA;EA1BlCJ,SAAA,CAAUS,EA0BV,EAAGC,EAA+B;AAAA,CACpC","ignoreList":[]}

package/dist/elements/TableSection/index.css

@@ -15,11 +15,10 @@
   .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);
+    font-size: var(--text-body-large-bold-font-size);
+    font-weight: var(--text-body-large-bold-font-weight);
+    line-height: var(--text-body-large-bold-line-height);
+    letter-spacing: var(--text-body-large-bold-letter-spacing);
   }
 
   .table-section__header .list-selection__actions button {
@@ -43,13 +42,13 @@
     display: block;
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @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);
     }
 

package/dist/elements/Tabs/index.css

@@ -31,7 +31,6 @@
     position: relative;
     white-space: nowrap;
     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);
@@ -66,7 +65,7 @@
   }
 
   .tabs__tab-button--active {
-    font-weight: var(--text-body-medium-strong-font-weight);
+    font-weight: var(--text-body-medium-bold-font-weight);
     color: var(--color-text);
   }
 
@@ -92,6 +91,7 @@
     background: var(--field-color-border-error);
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .tabs__tab-button {
       padding-bottom: var(--spacer-2);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,OAAO,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,SAAS,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,IAAI,GAAI,MAAM,SAAS,MAAM,GAAG,MAAM,EAAE,uCAKlD,SAAS,CAAC,MAAM,CAAC,sBAgBnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAaA,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAiCA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,OAAO,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,SAAS,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,IAAI,GAAI,MAAM,SAAS,MAAM,GAAG,MAAM,yCAKhD,SAAS,CAAC,MAAM,CAAC,sBAgBnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAaA,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAiCA,CAAA"}

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,GAAI,MAAM,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,SAAU,IAAI,KAAG,OAAO,CAAC,MAAM,CAoD1D,CAAA"}

package/dist/elements/Thumbnail/index.css

@@ -33,6 +33,7 @@
     width: calc(var(--spacer-6) * 2.5);
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1440px) {
     .thumbnail .thumbnail {
       width: calc(var(--spacer-6) * 2.5);

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

@@ -9,7 +9,7 @@ export type ThumbnailProps = {
     height?: number;
     imageCacheTag?: false | string;
     size?: 'expand' | 'large' | 'medium' | 'none' | 'small';
-    uploadConfig?: SanitizedCollectionConfig['upload'];
+    uploadConfig?: Omit<SanitizedCollectionConfig['upload'], 'uploadInstructions'>;
     width?: number;
 };
 export declare const Thumbnail: React.FC<ThumbnailProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAMxD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC9B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACvD,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2C9C,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACvC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACjE,CAAA;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAmChE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAMxD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC9B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACvD,YAAY,CAAC,EAAE,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAA;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2C9C,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACvC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACjE,CAAA;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAmChE"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","File","appendCacheTag","ShimmerEffect","Thumbnail","props","className","doc","filename","fileSrc","height","imageCacheTag","size","width","fileExists","setFileExists","useState","undefined","classNames","join","src","useMemo","useEffect","img","Image","onload","onerror","_jsxs","_jsx","alt","ThumbnailComponent"],"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n  className?: string\n  collectionSlug?: string\n  doc?: Record<string, unknown>\n  fileSrc?: string\n  height?: number\n  imageCacheTag?: false | string\n  size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n  width?: number\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const {\n    className = '',\n    doc: { filename } = {},\n    fileSrc,\n    height,\n    imageCacheTag,\n    size,\n    width,\n  } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} height={height} src={src} width={width} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n\ntype ThumbnailComponentProps = {\n  readonly alt?: string\n  readonly className?: string\n  readonly filename: string\n  readonly fileSrc: string\n  readonly imageCacheTag?: false | string\n  readonly size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n}\nexport function ThumbnailComponent(props: ThumbnailComponentProps) {\n  const { alt, className = '', filename, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={alt || filename} src={src} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","File","appendCacheTag","ShimmerEffect","Thumbnail","props","className","doc","filename","fileSrc","height","imageCacheTag","size","width","fileExists","setFileExists","useState","undefined","classNames","join","src","useMemo","useEffect","img","Image","onload","onerror","_jsxs","_jsx","alt","ThumbnailComponent"],"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n  className?: string\n  collectionSlug?: string\n  doc?: Record<string, unknown>\n  fileSrc?: string\n  height?: number\n  imageCacheTag?: false | string\n  size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n  uploadConfig?: Omit<SanitizedCollectionConfig['upload'], 'uploadInstructions'>\n  width?: number\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const {\n    className = '',\n    doc: { filename } = {},\n    fileSrc,\n    height,\n    imageCacheTag,\n    size,\n    width,\n  } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} height={height} src={src} width={width} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n\ntype ThumbnailComponentProps = {\n  readonly alt?: string\n  readonly className?: string\n  readonly filename: string\n  readonly fileSrc: string\n  readonly imageCacheTag?: false | string\n  readonly size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n}\nexport function ThumbnailComponent(props: ThumbnailComponentProps) {\n  const { alt, className = '', filename, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={alt || filename} src={src} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ThumbnailCard/index.css

@@ -76,7 +76,6 @@
     white-space: nowrap;
     text-align: left;
     color: var(--color-text);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-style: normal;
     font-weight: var(--text-body-medium-font-weight);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ThumbnailCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,GAAG,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,UAAU,CAAA;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmDtD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ThumbnailCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,GAAG,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,UAAU,CAAA;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoDtD,CAAA"}

package/dist/elements/ThumbnailCard/index.js

@@ -9,7 +9,7 @@ import { formatDocTitle } from '../../utilities/formatDocTitle/index.js';
 import './index.css';
 const baseClass = 'thumbnail-card';
 export const ThumbnailCard = props => {
-  const $ = _c(15);
+  const $ = _c(16);
   const {
     alignLabel,
     className,
@@ -43,7 +43,7 @@ export const ThumbnailCard = props => {
   }
   const classes = t3.join(" ");
   let t4;
-  if ($[5] !== classes || $[6] !== collection || $[7] !== config || $[8] !== doc || $[9] !== i18n || $[10] !== labelFromProps || $[11] !== onClick || $[12] !== onDoubleClick || $[13] !== thumbnail) {
+  if ($[5] !== classes || $[6] !== collection || $[7] !== config || $[8] !== doc || $[9] !== i18n || $[10] !== isSelected || $[11] !== labelFromProps || $[12] !== onClick || $[13] !== onDoubleClick || $[14] !== thumbnail) {
     let title = labelFromProps;
     if (!title) {
       title = formatDocTitle({
@@ -55,6 +55,7 @@ export const ThumbnailCard = props => {
       });
     }
     t4 = _jsxs("button", {
+      "aria-pressed": typeof isSelected === "boolean" ? isSelected : undefined,
       className: classes,
       onClick,
       onDoubleClick,
@@ -73,13 +74,14 @@ export const ThumbnailCard = props => {
     $[7] = config;
     $[8] = doc;
     $[9] = i18n;
-    $[10] = labelFromProps;
-    $[11] = onClick;
-    $[12] = onDoubleClick;
-    $[13] = thumbnail;
-    $[14] = t4;
+    $[10] = isSelected;
+    $[11] = labelFromProps;
+    $[12] = onClick;
+    $[13] = onDoubleClick;
+    $[14] = thumbnail;
+    $[15] = t4;
   } else {
-    t4 = $[14];
+    t4 = $[15];
   }
   return t4;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","$","alignLabel","className","collection","doc","isSelected","label","labelFromProps","onClick","onDoubleClick","thumbnail","config","i18n","t0","t1","t2","t3","filter","Boolean","classes","join","t4","title","data","dateFormat","admin","fallback","filename","_jsxs","type","children","_jsx"],"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, TypeWithID } from 'payload'\n\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../utilities/formatDocTitle/index.js'\nimport './index.css'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: ClientCollectionConfig\n  doc?: { filename?: string } & TypeWithID\n  isSelected?: boolean\n  label?: string\n  onClick?: () => void\n  onDoubleClick?: () => void\n  onKeyDown?: () => void\n  thumbnail: React.ReactNode\n}\n\nconst baseClass = 'thumbnail-card'\n\nexport const ThumbnailCard: React.FC<ThumbnailCardProps> = (props) => {\n  const {\n    alignLabel,\n    className,\n    collection,\n    doc,\n    isSelected,\n    label: labelFromProps,\n    onClick,\n    onDoubleClick,\n    thumbnail,\n  } = props\n\n  const { config } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    typeof onClick === 'function' && `${baseClass}--has-on-click`,\n    isSelected && `${baseClass}--selected`,\n    alignLabel && `${baseClass}--align-label-${alignLabel}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let title = labelFromProps\n\n  if (!title) {\n    title = formatDocTitle({\n      collectionConfig: collection,\n      data: doc,\n      dateFormat: config.admin.dateFormat,\n      fallback: doc?.filename,\n      i18n,\n    })\n  }\n\n  return (\n    <button\n      className={classes}\n      onClick={onClick}\n      onDoubleClick={onDoubleClick}\n      title={title}\n      type=\"button\"\n    >\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAeP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACzD;IAAAS,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,UAAA;IAAAC,KAAA,EAAAC,cAAA;IAAAC,OAAA;IAAAC,aAAA;IAAAC;EAAA,IAUIX,KAAA;EAEJ;IAAAY;EAAA,IAAmBjB,SAAA;EAEnB;IAAAkB;EAAA,IAAiBjB,cAAA;EAKf,MAAAkB,EAAA,UAAOL,OAAA,KAAY,cAAc,GAAAX,SAAA,gBAA4B;EAC7D,MAAAiB,EAAA,GAAAT,UAAA,IAAc,GAAAR,SAAA,YAAwB;EACtC,MAAAkB,EAAA,GAAAd,UAAA,IAAc,GAAAJ,SAAA,iBAA6BI,UAAA,EAAY;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAc,EAAA,IAAAd,CAAA,QAAAe,EAAA;IALzCC,EAAA,IAAAnB,SAAA,EAEdK,SAAA,EACAW,EAA6D,EAC7DC,EAAsC,EACtCC,EAAuD,EAAAE,MAAA,CAAAC,OAE/C;IAAAlB,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAa,EAAA;IAAAb,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAPV,MAAAmB,OAAA,GAAgBH,EAON,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAArB,CAAA,QAAAmB,OAAA,IAAAnB,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAW,MAAA,IAAAX,CAAA,QAAAI,GAAA,IAAAJ,CAAA,QAAAY,IAAA,IAAAZ,CAAA,SAAAO,cAAA,IAAAP,CAAA,SAAAQ,OAAA,IAAAR,CAAA,SAAAS,aAAA,IAAAT,CAAA,SAAAU,SAAA;IAER,IAAAY,KAAA,GAAYf,cAAA;IAAA,KAEPe,KAAA;MACHA,KAAA,CAAAA,CAAA,CAAQA;QAAAA,iBAAA,CACYnB,UAAA;QAAAoB,IAAA,EACZnB,GAAA;QAAAoB,UAAA,EACMb,MAAA,CAAAc,KAAA,CAAAD,UAAA;QAAAE,QAAA,EACFtB,GAAA,EAAAuB,QAAA;QAAAf;MAAA,CAEZ;IANA;IAUAS,EAAA,GAAAO,KAAA,CAAC;MAAA1B,SAAA,EACYiB,OAAA;MAAAX,OAAA;MAAAC,aAAA;MAAAa,KAAA;MAAAO,IAAA,EAIN;MAAAC,QAAA,GAELC,IAAA,CAAC;QAAA7B,SAAA,EAAe,GAAAL,SAAA,aAAyB;QAAAiC,QAAA,EAAGpB;MAAA,C,GAC5CqB,IAAA,CAAC;QAAA7B,SAAA,EAAe,GAAAL,SAAA,SAAqB;QAAAiC,QAAA,EAAGR;MAAA,C;;;;;;;;;;;;;;;SAR1CD,E;CAWJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","$","alignLabel","className","collection","doc","isSelected","label","labelFromProps","onClick","onDoubleClick","thumbnail","config","i18n","t0","t1","t2","t3","filter","Boolean","classes","join","t4","title","data","dateFormat","admin","fallback","filename","_jsxs","undefined","type","children","_jsx"],"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, TypeWithID } from 'payload'\n\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../utilities/formatDocTitle/index.js'\nimport './index.css'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: ClientCollectionConfig\n  doc?: { filename?: string } & TypeWithID\n  isSelected?: boolean\n  label?: string\n  onClick?: () => void\n  onDoubleClick?: () => void\n  onKeyDown?: () => void\n  thumbnail: React.ReactNode\n}\n\nconst baseClass = 'thumbnail-card'\n\nexport const ThumbnailCard: React.FC<ThumbnailCardProps> = (props) => {\n  const {\n    alignLabel,\n    className,\n    collection,\n    doc,\n    isSelected,\n    label: labelFromProps,\n    onClick,\n    onDoubleClick,\n    thumbnail,\n  } = props\n\n  const { config } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    typeof onClick === 'function' && `${baseClass}--has-on-click`,\n    isSelected && `${baseClass}--selected`,\n    alignLabel && `${baseClass}--align-label-${alignLabel}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let title = labelFromProps\n\n  if (!title) {\n    title = formatDocTitle({\n      collectionConfig: collection,\n      data: doc,\n      dateFormat: config.admin.dateFormat,\n      fallback: doc?.filename,\n      i18n,\n    })\n  }\n\n  return (\n    <button\n      aria-pressed={typeof isSelected === 'boolean' ? isSelected : undefined}\n      className={classes}\n      onClick={onClick}\n      onDoubleClick={onDoubleClick}\n      title={title}\n      type=\"button\"\n    >\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAeP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACzD;IAAAS,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,UAAA;IAAAC,KAAA,EAAAC,cAAA;IAAAC,OAAA;IAAAC,aAAA;IAAAC;EAAA,IAUIX,KAAA;EAEJ;IAAAY;EAAA,IAAmBjB,SAAA;EAEnB;IAAAkB;EAAA,IAAiBjB,cAAA;EAKf,MAAAkB,EAAA,UAAOL,OAAA,KAAY,cAAc,GAAAX,SAAA,gBAA4B;EAC7D,MAAAiB,EAAA,GAAAT,UAAA,IAAc,GAAAR,SAAA,YAAwB;EACtC,MAAAkB,EAAA,GAAAd,UAAA,IAAc,GAAAJ,SAAA,iBAA6BI,UAAA,EAAY;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAc,EAAA,IAAAd,CAAA,QAAAe,EAAA;IALzCC,EAAA,IAAAnB,SAAA,EAEdK,SAAA,EACAW,EAA6D,EAC7DC,EAAsC,EACtCC,EAAuD,EAAAE,MAAA,CAAAC,OAE/C;IAAAlB,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAa,EAAA;IAAAb,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAPV,MAAAmB,OAAA,GAAgBH,EAON,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAArB,CAAA,QAAAmB,OAAA,IAAAnB,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAW,MAAA,IAAAX,CAAA,QAAAI,GAAA,IAAAJ,CAAA,QAAAY,IAAA,IAAAZ,CAAA,SAAAK,UAAA,IAAAL,CAAA,SAAAO,cAAA,IAAAP,CAAA,SAAAQ,OAAA,IAAAR,CAAA,SAAAS,aAAA,IAAAT,CAAA,SAAAU,SAAA;IAER,IAAAY,KAAA,GAAYf,cAAA;IAAA,KAEPe,KAAA;MACHA,KAAA,CAAAA,CAAA,CAAQA;QAAAA,iBAAA,CACYnB,UAAA;QAAAoB,IAAA,EACZnB,GAAA;QAAAoB,UAAA,EACMb,MAAA,CAAAc,KAAA,CAAAD,UAAA;QAAAE,QAAA,EACFtB,GAAA,EAAAuB,QAAA;QAAAf;MAAA,CAEZ;IANA;IAUAS,EAAA,GAAAO,KAAA,CAAC;MAAA,gBACe,OAAOvB,UAAA,KAAe,YAAYA,UAAA,GAAAwB,SAAa;MAAA3B,SAAA,EAClDiB,OAAA;MAAAX,OAAA;MAAAC,aAAA;MAAAa,KAAA;MAAAQ,IAAA,EAIN;MAAAC,QAAA,GAELC,IAAA,CAAC;QAAA9B,SAAA,EAAe,GAAAL,SAAA,aAAyB;QAAAkC,QAAA,EAAGrB;MAAA,C,GAC5CsB,IAAA,CAAC;QAAA9B,SAAA,EAAe,GAAAL,SAAA,SAAqB;QAAAkC,QAAA,EAAGT;MAAA,C;;;;;;;;;;;;;;;;SAT1CD,E;CAYJ","ignoreList":[]}

package/dist/elements/TimezonePicker/index.css

@@ -15,7 +15,6 @@
     .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);
@@ -47,6 +46,7 @@
         border: none;
         padding: 0;
         padding-left: var(--spacer-1);
+        /* stylelint-disable-next-line plugin/no-important -- TODO: pre-existing; revisit whether specificity can win instead */
         min-height: auto !important;
         position: relative;
         box-shadow: unset;
@@ -94,7 +94,6 @@
 
       .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);
@@ -105,7 +104,6 @@
 
       .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);

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;AAa9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAQvC,OAAO,aAAa,CAAA;AAgEpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuE1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TimezonePicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAQvC,OAAO,aAAa,CAAA;AAqEpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuE1C,CAAA"}

package/dist/elements/TimezonePicker/index.js

@@ -15,8 +15,12 @@ const SmallDropdownIndicator = props => {
     innerProps: {
       ref,
       ...restInnerProps
-    }
+    },
+    isDisabled
   } = props;
+  if (isDisabled) {
+    return null;
+  }
   return /*#__PURE__*/_jsx("button", {
     className: "timezone-picker__dropdown-indicator",
     ref: ref,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useMemo","components","rsComponents","CheckIcon","ChevronIcon","CircledXIcon","useTranslation","ReactSelect","formatOptions","SmallDropdownIndicator","props","innerProps","ref","restInnerProps","_jsx","className","onKeyDown","e","key","type","size","SmallClearIndicator","clearValue","stopPropagation","role","tabIndex","TimezoneOption","children","_jsxs","Option","TimezonePicker","id","onChange","onChangeFromProps","options","optionsFromProps","readOnly","readOnlyFromProps","required","selectedTimezone","selectedTimezoneFromProps","t","find","value","Boolean","length","classNames","menu","menuList","ClearIndicator","DropdownIndicator","customProps","menuPortalTheme","disabled","inputId","isClearable","isCreatable","val","placeholder","styles","control","base","flexWrap","option","alignItems","display","gap","minWidth"],"sources":["../../../src/elements/TimezonePicker/index.tsx"],"sourcesContent":["'use client'\n\nimport type { OptionObject } from 'payload'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport type {\n  ClearIndicatorProps,\n  DropdownIndicatorProps,\n  OptionProps,\n  StylesConfig,\n} from 'react-select'\n\nimport { useMemo } from 'react'\nimport { components as rsComponents } from 'react-select'\n\nimport type { Option as OptionType } from '../ReactSelect/types.js'\nimport type { Props } from './types.js'\n\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CircledXIcon } from '../../icons/CircledX/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js'\nimport './index.css'\n\nconst SmallDropdownIndicator: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & DropdownIndicatorProps<OptionType, true>\n> = (props) => {\n  const {\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <button\n      className=\"timezone-picker__dropdown-indicator\"\n      ref={ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.key = ' '\n        }\n      }}\n      type=\"button\"\n    >\n      <ChevronIcon size={16} />\n    </button>\n  )\n}\n\nconst SmallClearIndicator: React.FC<ClearIndicatorProps<OptionType, true>> = (props) => {\n  const {\n    clearValue,\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <div\n      className=\"timezone-picker__clear-indicator\"\n      ref={typeof ref === 'string' ? null : ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          clearValue()\n          e.stopPropagation()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <CircledXIcon size={24} />\n    </div>\n  )\n}\n\nconst TimezoneOption: React.FC<OptionProps<OptionType, false>> = (props) => {\n  const { children } = props\n\n  return (\n    <rsComponents.Option {...props}>\n      <CheckIcon className=\"timezone-picker__option-check\" size={16} />\n      <span className=\"timezone-picker__option-label\">{children}</span>\n    </rsComponents.Option>\n  )\n}\n\nexport const TimezonePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    onChange: onChangeFromProps,\n    options: optionsFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    selectedTimezone: selectedTimezoneFromProps,\n  } = props\n\n  const { t } = useTranslation()\n\n  const options = formatOptions(optionsFromProps)\n\n  const selectedTimezone = useMemo(() => {\n    return options.find((t) => {\n      const value = typeof t === 'string' ? t : t.value\n      return value === selectedTimezoneFromProps\n    })\n  }, [options, selectedTimezoneFromProps])\n\n  const readOnly = Boolean(readOnlyFromProps) || options.length === 1\n\n  return (\n    <div className=\"timezone-picker-wrapper\">\n      <span className=\"timezone-picker__label\">\n        {t('general:timezone')}\n        {required && <span className=\"timezone-picker__required\">*</span>}\n      </span>\n      <ReactSelect\n        className=\"timezone-picker\"\n        classNames={{\n          menu: () => 'timezone-picker__menu',\n          menuList: () => 'timezone-picker__menu-list',\n        }}\n        components={{\n          ClearIndicator: SmallClearIndicator,\n          DropdownIndicator: SmallDropdownIndicator,\n          Option: TimezoneOption,\n        }}\n        customProps={{ menuPortalTheme: 'dark' }}\n        disabled={readOnly}\n        inputId={id}\n        isClearable={!required}\n        isCreatable={false}\n        onChange={(val: OptionObject) => {\n          if (onChangeFromProps) {\n            onChangeFromProps(val?.value || '')\n          }\n        }}\n        options={options}\n        placeholder={t('general:none')}\n        styles={\n          {\n            control: (base) => ({\n              ...base,\n              flexWrap: 'nowrap',\n            }),\n            option: (base) => ({\n              ...base,\n              alignItems: 'center',\n              display: 'flex',\n              gap: 'var(--spacer-1)',\n              minWidth: 0,\n            }),\n          } as StylesConfig<OptionType>\n        }\n        value={selectedTimezone}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useMemo","components","rsComponents","CheckIcon","ChevronIcon","CircledXIcon","useTranslation","ReactSelect","formatOptions","SmallDropdownIndicator","props","innerProps","ref","restInnerProps","isDisabled","_jsx","className","onKeyDown","e","key","type","size","SmallClearIndicator","clearValue","stopPropagation","role","tabIndex","TimezoneOption","children","_jsxs","Option","TimezonePicker","id","onChange","onChangeFromProps","options","optionsFromProps","readOnly","readOnlyFromProps","required","selectedTimezone","selectedTimezoneFromProps","t","find","value","Boolean","length","classNames","menu","menuList","ClearIndicator","DropdownIndicator","customProps","menuPortalTheme","disabled","inputId","isClearable","isCreatable","val","placeholder","styles","control","base","flexWrap","option","alignItems","display","gap","minWidth"],"sources":["../../../src/elements/TimezonePicker/index.tsx"],"sourcesContent":["'use client'\n\nimport type { OptionObject } from 'payload'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport type {\n  ClearIndicatorProps,\n  DropdownIndicatorProps,\n  OptionProps,\n  StylesConfig,\n} from 'react-select'\n\nimport { useMemo } from 'react'\nimport { components as rsComponents } from 'react-select'\n\nimport type { Option as OptionType } from '../ReactSelect/types.js'\nimport type { Props } from './types.js'\n\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CircledXIcon } from '../../icons/CircledX/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js'\nimport './index.css'\n\nconst SmallDropdownIndicator: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & DropdownIndicatorProps<OptionType, true>\n> = (props) => {\n  const {\n    innerProps: { ref, ...restInnerProps },\n    isDisabled,\n  } = props\n\n  if (isDisabled) {\n    return null\n  }\n\n  return (\n    <button\n      className=\"timezone-picker__dropdown-indicator\"\n      ref={ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.key = ' '\n        }\n      }}\n      type=\"button\"\n    >\n      <ChevronIcon size={16} />\n    </button>\n  )\n}\n\nconst SmallClearIndicator: React.FC<ClearIndicatorProps<OptionType, true>> = (props) => {\n  const {\n    clearValue,\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <div\n      className=\"timezone-picker__clear-indicator\"\n      ref={typeof ref === 'string' ? null : ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          clearValue()\n          e.stopPropagation()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <CircledXIcon size={24} />\n    </div>\n  )\n}\n\nconst TimezoneOption: React.FC<OptionProps<OptionType, false>> = (props) => {\n  const { children } = props\n\n  return (\n    <rsComponents.Option {...props}>\n      <CheckIcon className=\"timezone-picker__option-check\" size={16} />\n      <span className=\"timezone-picker__option-label\">{children}</span>\n    </rsComponents.Option>\n  )\n}\n\nexport const TimezonePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    onChange: onChangeFromProps,\n    options: optionsFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    selectedTimezone: selectedTimezoneFromProps,\n  } = props\n\n  const { t } = useTranslation()\n\n  const options = formatOptions(optionsFromProps)\n\n  const selectedTimezone = useMemo(() => {\n    return options.find((t) => {\n      const value = typeof t === 'string' ? t : t.value\n      return value === selectedTimezoneFromProps\n    })\n  }, [options, selectedTimezoneFromProps])\n\n  const readOnly = Boolean(readOnlyFromProps) || options.length === 1\n\n  return (\n    <div className=\"timezone-picker-wrapper\">\n      <span className=\"timezone-picker__label\">\n        {t('general:timezone')}\n        {required && <span className=\"timezone-picker__required\">*</span>}\n      </span>\n      <ReactSelect\n        className=\"timezone-picker\"\n        classNames={{\n          menu: () => 'timezone-picker__menu',\n          menuList: () => 'timezone-picker__menu-list',\n        }}\n        components={{\n          ClearIndicator: SmallClearIndicator,\n          DropdownIndicator: SmallDropdownIndicator,\n          Option: TimezoneOption,\n        }}\n        customProps={{ menuPortalTheme: 'dark' }}\n        disabled={readOnly}\n        inputId={id}\n        isClearable={!required}\n        isCreatable={false}\n        onChange={(val: OptionObject) => {\n          if (onChangeFromProps) {\n            onChangeFromProps(val?.value || '')\n          }\n        }}\n        options={options}\n        placeholder={t('general:none')}\n        styles={\n          {\n            control: (base) => ({\n              ...base,\n              flexWrap: 'nowrap',\n            }),\n            option: (base) => ({\n              ...base,\n              alignItems: 'center',\n              display: 'flex',\n              gap: 'var(--spacer-1)',\n              minWidth: 0,\n            }),\n          } as StylesConfig<OptionType>\n        }\n        value={selectedTimezone}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}