@payloadcms/ui 3.0.0-canary.92e4997 → 3.0.0-canary.93a7bbd

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/TableColumns/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload/types'\nimport type { CellComponentProps } from 'payload/types'\n\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n  useState,\n} from 'react'\n\nimport type { ColumnPreferences } from '../../providers/ListInfo/index.js'\nimport type { Column } from '../Table/index.js'\nimport type { Action } from './columnReducer.js'\n\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { buildColumnState } from './buildColumnState.js'\nimport { columnReducer } from './columnReducer.js'\nimport { filterFields } from './filterFields.js'\nimport { getInitialColumns } from './getInitialColumns.js'\n\nexport interface ITableColumns {\n  columns: Column[]\n  dispatchTableColumns: React.Dispatch<Action>\n  moveColumn: (args: { fromIndex: number; toIndex: number }) => void\n  setActiveColumns: (columns: string[]) => void\n  toggleColumn: (column: string) => void\n}\n\nexport const TableColumnContext = createContext<ITableColumns>({} as ITableColumns)\n\nexport const useTableColumns = (): ITableColumns => useContext(TableColumnContext)\n\nexport type ListPreferences = {\n  columns: ColumnPreferences\n}\n\ntype Props = {\n  cellProps?: Partial<CellComponentProps>[]\n  children: React.ReactNode\n  collectionSlug: string\n  enableRowSelections?: boolean\n  listPreferences?: ListPreferences\n  preferenceKey: string\n}\n\nexport const TableColumnsProvider: React.FC<Props> = ({\n  cellProps,\n  children,\n  collectionSlug,\n  enableRowSelections = false,\n  listPreferences,\n  preferenceKey,\n}) => {\n  const config = useConfig()\n\n  const { componentMap } = useComponentMap()\n\n  const { fieldMap } = componentMap.collections[collectionSlug]\n\n  const collectionConfig = config.collections.find(\n    (collectionConfig) => collectionConfig.slug === collectionSlug,\n  )\n\n  const {\n    admin: { defaultColumns, useAsTitle },\n  } = collectionConfig\n\n  const prevCollection = useRef<SanitizedCollectionConfig['slug']>(collectionSlug)\n  const hasInitialized = useRef(false)\n  const { getPreference, setPreference } = usePreferences()\n\n  const [initialColumns] = useState<ColumnPreferences>(() =>\n    getInitialColumns(filterFields(fieldMap), useAsTitle, defaultColumns),\n  )\n\n  const [tableColumns, dispatchTableColumns] = useReducer(columnReducer, {}, () => {\n    return buildColumnState({\n      cellProps,\n      columnPreferences: listPreferences?.columns,\n      columns: initialColumns,\n      enableRowSelections,\n      fieldMap,\n      useAsTitle,\n    })\n  })\n\n  // /////////////////////////////////////\n  // Get preferences on collection change\n  // /////////////////////////////////////\n\n  useEffect(() => {\n    const sync = async () => {\n      const collectionHasChanged = prevCollection.current !== collectionSlug\n\n      if (collectionHasChanged || !listPreferences) {\n        const currentPreferences = await getPreference<{\n          columns: ColumnPreferences\n        }>(preferenceKey)\n        prevCollection.current = collectionSlug\n\n        if (currentPreferences?.columns) {\n          dispatchTableColumns({\n            type: 'set',\n            payload: {\n              columns: buildColumnState({\n                cellProps,\n                columnPreferences: currentPreferences?.columns,\n                columns: initialColumns,\n                enableRowSelections: true,\n                fieldMap,\n                useAsTitle,\n              }),\n            },\n          })\n        }\n      }\n    }\n\n    void sync()\n  }, [\n    preferenceKey,\n    getPreference,\n    collectionSlug,\n    fieldMap,\n    cellProps,\n    defaultColumns,\n    useAsTitle,\n    listPreferences,\n    initialColumns,\n  ])\n\n  // /////////////////////////////////////\n  // Set preferences on column change\n  // /////////////////////////////////////\n\n  useEffect(() => {\n    if (!hasInitialized.current) {\n      hasInitialized.current = true\n      return\n    }\n\n    const columns = tableColumns.map((c) => ({\n      accessor: c?.accessor,\n      active: c?.active,\n    }))\n\n    void setPreference(preferenceKey, { columns }, true)\n  }, [tableColumns, preferenceKey, setPreference])\n\n  const setActiveColumns = useCallback(\n    (columns: string[]) => {\n      // dispatchTableColumns({\n      //   type: 'set',\n      //   payload: {\n      //     // onSelect,\n      //     cellProps,\n      //     collection: { ...collectionConfig, fields: formatFields(collectionConfig) },\n      //     columns: columns.map((column) => ({\n      //       accessor: column,\n      //       active: true,\n      //     })),\n      //     i18n,\n      //   },\n      // })\n    },\n    [collectionConfig, cellProps],\n  )\n\n  const moveColumn = useCallback(\n    (args: { fromIndex: number; toIndex: number }) => {\n      const { fromIndex, toIndex } = args\n\n      dispatchTableColumns({\n        type: 'move',\n        payload: {\n          fromIndex,\n          toIndex,\n        },\n      })\n    },\n    [dispatchTableColumns],\n  )\n\n  const toggleColumn = useCallback(\n    (column: string) => {\n      dispatchTableColumns({\n        type: 'toggle',\n        payload: {\n          column,\n        },\n      })\n    },\n    [dispatchTableColumns],\n  )\n\n  return (\n    <TableColumnContext.Provider\n      value={{\n        columns: tableColumns,\n        dispatchTableColumns,\n        moveColumn,\n        setActiveColumns,\n        toggleColumn,\n      }}\n    >\n      {children}\n    </TableColumnContext.Provider>\n  )\n}\n"],"names":["React","createContext","useCallback","useContext","useEffect","useReducer","useRef","useState","useComponentMap","useConfig","usePreferences","buildColumnState","columnReducer","filterFields","getInitialColumns","TableColumnContext","useTableColumns","TableColumnsProvider","cellProps","children","collectionSlug","enableRowSelections","listPreferences","preferenceKey","config","componentMap","fieldMap","collections","collectionConfig","find","slug","admin","defaultColumns","useAsTitle","prevCollection","hasInitialized","getPreference","setPreference","initialColumns","tableColumns","dispatchTableColumns","columnPreferences","columns","sync","collectionHasChanged","current","currentPreferences","type","payload","map","c","accessor","active","setActiveColumns","moveColumn","args","fromIndex","toIndex","toggleColumn","column","Provider","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/TableColumns/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, SanitizedCollectionConfig } from 'payload'\n\nimport React, { createContext, useCallback, useContext, useState } from 'react'\n\nimport type { ColumnPreferences } from '../../providers/ListInfo/index.js'\nimport type { Column } from '../Table/index.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { buildColumnState } from './buildColumnState.js'\nimport { filterFields } from './filterFields.js'\nimport { getInitialColumns } from './getInitialColumns.js'\n\nexport interface ITableColumns {\n  columns: Column[]\n  moveColumn: (args: { fromIndex: number; toIndex: number }) => void\n  setActiveColumns: (columns: string[]) => void\n  toggleColumn: (column: string) => void\n}\n\nexport const TableColumnContext = createContext<ITableColumns>({} as ITableColumns)\n\nexport const useTableColumns = (): ITableColumns => useContext(TableColumnContext)\n\nexport type ListPreferences = {\n  columns: ColumnPreferences\n}\n\ntype Props = {\n  readonly cellProps?: Partial<CellComponentProps>[]\n  readonly children: React.ReactNode\n  readonly collectionSlug: string\n  readonly enableRowSelections?: boolean\n  readonly listPreferences?: ListPreferences\n  readonly preferenceKey: string\n}\n\nexport const TableColumnsProvider: React.FC<Props> = ({\n  cellProps,\n  children,\n  collectionSlug,\n  enableRowSelections = false,\n  listPreferences,\n  preferenceKey,\n}) => {\n  const {\n    config: { collections },\n  } = useConfig()\n\n  const collectionConfig = collections.find(\n    (collectionConfig) => collectionConfig.slug === collectionSlug,\n  )\n\n  const {\n    admin: { defaultColumns, useAsTitle },\n    fields,\n  } = collectionConfig\n\n  const prevCollection = React.useRef<SanitizedCollectionConfig['slug']>(collectionSlug)\n  const { getPreference, setPreference } = usePreferences()\n\n  const [initialColumns] = useState<ColumnPreferences>(() =>\n    getInitialColumns(filterFields(fields), useAsTitle, defaultColumns),\n  )\n\n  const [tableColumns, setTableColumns] = React.useState(() =>\n    buildColumnState({\n      cellProps,\n      columnPreferences: listPreferences?.columns,\n      columns: initialColumns,\n      enableRowSelections,\n      fields,\n      useAsTitle,\n    }),\n  )\n\n  const updateColumnPreferences = React.useCallback(\n    (newColumns: Column[]) => {\n      const columns = newColumns.map((c) => ({\n        accessor: c?.accessor,\n        active: c?.active,\n      }))\n\n      void setPreference(preferenceKey, { columns }, true)\n    },\n    [preferenceKey, setPreference],\n  )\n\n  const reassignLinkColumn = (columns: Column[]): Column[] => {\n    let foundFirstActive = false\n    const newColumns = columns.map((col) => {\n      const linkColumn = col.active && !foundFirstActive && col.accessor !== '_select'\n      if (linkColumn) foundFirstActive = true\n\n      return {\n        ...col,\n        cellProps: {\n          ...col.cellProps,\n          link: linkColumn,\n        },\n      }\n    })\n\n    return newColumns\n  }\n\n  const moveColumn = useCallback(\n    (args: { fromIndex: number; toIndex: number }) => {\n      const { fromIndex, toIndex } = args\n\n      const withMovedColumn = [...tableColumns]\n      const [columnToMove] = withMovedColumn.splice(fromIndex, 1)\n      withMovedColumn.splice(toIndex, 0, columnToMove)\n\n      const newColumns = reassignLinkColumn(withMovedColumn)\n      setTableColumns(newColumns)\n      updateColumnPreferences(newColumns)\n    },\n    [tableColumns, updateColumnPreferences],\n  )\n\n  const toggleColumn = useCallback(\n    (column: string) => {\n      const toggledColumns = tableColumns.map((col) => {\n        return {\n          ...col,\n          active:\n            col?.cellProps?.field &&\n            'name' in col.cellProps.field &&\n            col?.cellProps?.field?.name === column\n              ? !col.active\n              : col.active,\n        }\n      })\n\n      const newColumns = reassignLinkColumn(toggledColumns)\n      setTableColumns(newColumns)\n      updateColumnPreferences(newColumns)\n    },\n    [tableColumns, updateColumnPreferences],\n  )\n\n  const setActiveColumns = React.useCallback(\n    (activeColumnAccessors) => {\n      const activeColumns = tableColumns.map((col) => {\n        return {\n          ...col,\n          active: activeColumnAccessors.includes(col.accessor),\n        }\n      })\n\n      const newColumns = reassignLinkColumn(activeColumns)\n      updateColumnPreferences(newColumns)\n    },\n    [tableColumns, updateColumnPreferences],\n  )\n\n  // //////////////////////////////////////////////\n  // Get preferences on collection change (drawers)\n  // //////////////////////////////////////////////\n\n  React.useEffect(() => {\n    const sync = async () => {\n      const collectionHasChanged = prevCollection.current !== collectionSlug\n\n      if (collectionHasChanged || !listPreferences) {\n        const currentPreferences = await getPreference<{\n          columns: ColumnPreferences\n        }>(preferenceKey)\n        prevCollection.current = collectionSlug\n\n        if (currentPreferences?.columns) {\n          setTableColumns(\n            buildColumnState({\n              cellProps,\n              columnPreferences: currentPreferences?.columns,\n              columns: initialColumns,\n              enableRowSelections: true,\n              fields,\n              useAsTitle,\n            }),\n          )\n        }\n      }\n    }\n\n    void sync()\n  }, [\n    preferenceKey,\n    getPreference,\n    collectionSlug,\n    fields,\n    cellProps,\n    defaultColumns,\n    useAsTitle,\n    listPreferences,\n    initialColumns,\n  ])\n\n  return (\n    <TableColumnContext.Provider\n      value={{\n        columns: tableColumns,\n        moveColumn,\n        setActiveColumns,\n        toggleColumn,\n      }}\n    >\n      {children}\n    </TableColumnContext.Provider>\n  )\n}\n"],"names":["React","createContext","useCallback","useContext","useState","useConfig","usePreferences","buildColumnState","filterFields","getInitialColumns","TableColumnContext","useTableColumns","TableColumnsProvider","cellProps","children","collectionSlug","enableRowSelections","listPreferences","preferenceKey","config","collections","collectionConfig","find","slug","admin","defaultColumns","useAsTitle","fields","prevCollection","useRef","getPreference","setPreference","initialColumns","tableColumns","setTableColumns","columnPreferences","columns","updateColumnPreferences","newColumns","map","c","accessor","active","reassignLinkColumn","foundFirstActive","col","linkColumn","link","moveColumn","args","fromIndex","toIndex","withMovedColumn","columnToMove","splice","toggleColumn","column","toggledColumns","field","name","setActiveColumns","activeColumnAccessors","activeColumns","includes","useEffect","sync","collectionHasChanged","current","currentPreferences","Provider","value"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import './index.scss';
-import type { SanitizedCollectionConfig } from 'payload/types';
+import type { SanitizedCollectionConfig } from 'payload';
 export type ThumbnailProps = {
     className?: string;
     collectionSlug?: string;

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,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAK9D,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,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CACnD,CAAA;AASD,eAAO,MAAM,mBAAmB;;;;;CAA2C,CAAA;AAE3E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6B9C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAKxD,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,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CACnD,CAAA;AASD,eAAO,MAAM,mBAAmB;;;;;CAA2C,CAAA;AAE3E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkC9C,CAAA"}

package/dist/elements/Thumbnail/index.js

@@ -1,5 +1,7 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import './index.scss';
 const baseClass = 'thumbnail';
 import { File } from '../../graphics/File/index.js';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
@@ -11,7 +13,7 @@ const ThumbnailContext = /*#__PURE__*/ React.createContext({
 });
 export const useThumbnailContext = ()=>React.useContext(ThumbnailContext);
 export const Thumbnail = (props)=>{
-    const { className = '', doc: { filename } = {}, fileSrc, size } = props;
+    const { className = '', doc: { filename } = {}, fileSrc, imageCacheTag, size } = props;
     const [fileExists, setFileExists] = React.useState(undefined);
     const classNames = [
         baseClass,
@@ -34,14 +36,19 @@ export const Thumbnail = (props)=>{
     }, [
         fileSrc
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames
-    }, fileExists === undefined && /*#__PURE__*/ React.createElement(ShimmerEffect, {
-        height: "100%"
-    }), fileExists && /*#__PURE__*/ React.createElement("img", {
-        alt: filename,
-        src: fileSrc
-    }), fileExists === false && /*#__PURE__*/ React.createElement(File, null));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classNames,
+        children: [
+            fileExists === undefined && /*#__PURE__*/ _jsx(ShimmerEffect, {
+                height: "100%"
+            }),
+            fileExists && /*#__PURE__*/ _jsx("img", {
+                alt: filename,
+                src: `${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`
+            }),
+            fileExists === false && /*#__PURE__*/ _jsx(File, {})
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload/types'\n\nimport { File } from '../../graphics/File/index.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  imageCacheTag?: string\n  size?: 'expand' | 'large' | 'medium' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n}\n\nconst ThumbnailContext = React.createContext({\n  className: '',\n  filename: '',\n  size: 'medium',\n  src: '',\n})\n\nexport const useThumbnailContext = () => React.useContext(ThumbnailContext)\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const { className = '', doc: { filename } = {}, fileSrc, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      setFileExists(false)\n      return\n    }\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} src={fileSrc} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"names":["React","baseClass","File","ShimmerEffect","ThumbnailContext","createContext","className","filename","size","src","useThumbnailContext","useContext","Thumbnail","props","doc","fileSrc","fileExists","setFileExists","useState","undefined","classNames","join","useEffect","img","Image","onload","onerror","div","height","alt"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAIzB,MAAMC,YAAY;AAIlB,SAASC,IAAI,QAAQ,+BAA8B;AACnD,SAASC,aAAa,QAAQ,4BAA2B;AAYzD,MAAMC,iCAAmBJ,MAAMK,aAAa,CAAC;IAC3CC,WAAW;IACXC,UAAU;IACVC,MAAM;IACNC,KAAK;AACP;AAEA,OAAO,MAAMC,sBAAsB,IAAMV,MAAMW,UAAU,CAACP,kBAAiB;AAE3E,OAAO,MAAMQ,YAAsC,CAACC;IAClD,MAAM,EAAEP,YAAY,EAAE,EAAEQ,KAAK,EAAEP,QAAQ,EAAE,GAAG,CAAC,CAAC,EAAEQ,OAAO,EAAEP,IAAI,EAAE,GAAGK;IAClE,MAAM,CAACG,YAAYC,cAAc,GAAGjB,MAAMkB,QAAQ,CAACC;IAEnD,MAAMC,aAAa;QAACnB;QAAW,CAAC,EAAEA,UAAU,OAAO,EAAEO,QAAQ,SAAS,CAAC;QAAEF;KAAU,CAACe,IAAI,CAAC;IAEzFrB,MAAMsB,SAAS,CAAC;QACd,IAAI,CAACP,SAAS;YACZE,cAAc;YACd;QACF;QAEA,MAAMM,MAAM,IAAIC;QAChBD,IAAId,GAAG,GAAGM;QACVQ,IAAIE,MAAM,GAAG;YACXR,cAAc;QAChB;QACAM,IAAIG,OAAO,GAAG;YACZT,cAAc;QAChB;IACF,GAAG;QAACF;KAAQ;IAEZ,qBACE,oBAACY;QAAIrB,WAAWc;OACbJ,eAAeG,2BAAa,oBAAChB;QAAcyB,QAAO;QAClDZ,4BAAc,oBAACO;QAAIM,KAAKtB;QAAoBE,KAAKM;QACjDC,eAAe,uBAAS,oBAACd;AAGhC,EAAC"}
+{"version":3,"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.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  imageCacheTag?: string\n  size?: 'expand' | 'large' | 'medium' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n}\n\nconst ThumbnailContext = React.createContext({\n  className: '',\n  filename: '',\n  size: 'medium',\n  src: '',\n})\n\nexport const useThumbnailContext = () => React.useContext(ThumbnailContext)\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const { className = '', doc: { 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  React.useEffect(() => {\n    if (!fileSrc) {\n      setFileExists(false)\n      return\n    }\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && (\n        <img\n          alt={filename as string}\n          src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`}\n        />\n      )}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"names":["React","baseClass","File","ShimmerEffect","ThumbnailContext","createContext","className","filename","size","src","useThumbnailContext","useContext","Thumbnail","props","doc","fileSrc","imageCacheTag","fileExists","setFileExists","useState","undefined","classNames","join","useEffect","img","Image","onload","onerror","div","height","alt"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,OAAO,eAAc;AAErB,MAAMC,YAAY;AAIlB,SAASC,IAAI,QAAQ,+BAA8B;AACnD,SAASC,aAAa,QAAQ,4BAA2B;AAYzD,MAAMC,iCAAmBJ,MAAMK,aAAa,CAAC;IAC3CC,WAAW;IACXC,UAAU;IACVC,MAAM;IACNC,KAAK;AACP;AAEA,OAAO,MAAMC,sBAAsB,IAAMV,MAAMW,UAAU,CAACP,kBAAiB;AAE3E,OAAO,MAAMQ,YAAsC,CAACC;IAClD,MAAM,EAAEP,YAAY,EAAE,EAAEQ,KAAK,EAAEP,QAAQ,EAAE,GAAG,CAAC,CAAC,EAAEQ,OAAO,EAAEC,aAAa,EAAER,IAAI,EAAE,GAAGK;IACjF,MAAM,CAACI,YAAYC,cAAc,GAAGlB,MAAMmB,QAAQ,CAACC;IAEnD,MAAMC,aAAa;QAACpB;QAAW,CAAC,EAAEA,UAAU,OAAO,EAAEO,QAAQ,SAAS,CAAC;QAAEF;KAAU,CAACgB,IAAI,CAAC;IAEzFtB,MAAMuB,SAAS,CAAC;QACd,IAAI,CAACR,SAAS;YACZG,cAAc;YACd;QACF;QAEA,MAAMM,MAAM,IAAIC;QAChBD,IAAIf,GAAG,GAAGM;QACVS,IAAIE,MAAM,GAAG;YACXR,cAAc;QAChB;QACAM,IAAIG,OAAO,GAAG;YACZT,cAAc;QAChB;IACF,GAAG;QAACH;KAAQ;IAEZ,qBACE,MAACa;QAAItB,WAAWe;;YACbJ,eAAeG,2BAAa,KAACjB;gBAAc0B,QAAO;;YAClDZ,4BACC,KAACO;gBACCM,KAAKvB;gBACLE,KAAK,CAAC,EAAEM,QAAQ,EAAEC,gBAAgB,CAAC,CAAC,EAAEA,cAAc,CAAC,GAAG,GAAG,CAAC;;YAG/DC,eAAe,uBAAS,KAACf;;;AAGhC,EAAC"}

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

@@ -1,13 +1,13 @@
-import type { SanitizedCollectionConfig, TypeWithID } from 'payload/types';
+import type { ClientCollectionConfig, TypeWithID } from 'payload';
 import React from 'react';
 import './index.scss';
 export type ThumbnailCardProps = {
     alignLabel?: 'center' | 'left';
     className?: string;
-    collection?: SanitizedCollectionConfig;
-    doc?: TypeWithID & {
+    collection?: ClientCollectionConfig;
+    doc?: {
         filename?: string;
-    };
+    } & TypeWithID;
     label?: string;
     onClick?: () => void;
     onKeyDown?: () => void;

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":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1E,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,yBAAyB,CAAA;IACtC,GAAG,CAAC,EAAE,UAAU,GAAG;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,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,CA0CtD,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,cAAc,CAAA;AAErB,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,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,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,CA0CtD,CAAA"}

package/dist/elements/ThumbnailCard/index.js

@@ -1,11 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { formatDocTitle } from '../../utilities/formatDocTitle.js';
+import './index.scss';
 const baseClass = 'thumbnail-card';
 export const ThumbnailCard = (props)=>{
     const { alignLabel, className, collection, doc, label: labelFromProps, onClick, thumbnail } = props;
-    const config = useConfig();
+    const { config } = useConfig();
     const { i18n } = useTranslation();
     const classes = [
         baseClass,
@@ -23,16 +26,22 @@ export const ThumbnailCard = (props)=>{
             i18n
         });
     }
-    return /*#__PURE__*/ React.createElement("button", {
+    return /*#__PURE__*/ _jsxs("button", {
         className: classes,
         onClick: onClick,
         title: title,
-        type: "button"
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__thumbnail`
-    }, thumbnail), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__label`
-    }, title));
+        type: "button",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__thumbnail`,
+                children: thumbnail
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__label`,
+                children: title
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["import type { SanitizedCollectionConfig, TypeWithID } from 'payload/types'\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.js'\nimport './index.scss'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: SanitizedCollectionConfig\n  doc?: TypeWithID & { filename?: string }\n  label?: string\n  onClick?: () => 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    label: labelFromProps,\n    onClick,\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    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 className={classes} onClick={onClick} title={title} type=\"button\">\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"names":["React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","alignLabel","className","collection","doc","label","labelFromProps","onClick","thumbnail","config","i18n","classes","filter","Boolean","join","title","collectionConfig","data","dateFormat","admin","fallback","filename","button","type","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,oCAAmC;AAclE,MAAMC,YAAY;AAElB,OAAO,MAAMC,gBAA8C,CAACC;IAC1D,MAAM,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,GAAG,EACHC,OAAOC,cAAc,EACrBC,OAAO,EACPC,SAAS,EACV,GAAGR;IAEJ,MAAMS,SAASd;IAEf,MAAM,EAAEe,IAAI,EAAE,GAAGd;IAEjB,MAAMe,UAAU;QACdb;QACAI;QACA,OAAOK,YAAY,cAAc,CAAC,EAAET,UAAU,cAAc,CAAC;QAC7DG,cAAc,CAAC,EAAEH,UAAU,cAAc,EAAEG,WAAW,CAAC;KACxD,CACEW,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIC,QAAQT;IAEZ,IAAI,CAACS,OAAO;QACVA,QAAQlB,eAAe;YACrBmB,kBAAkBb;YAClBc,MAAMb;YACNc,YAAYT,OAAOU,KAAK,CAACD,UAAU;YACnCE,UAAUhB,KAAKiB;YACfX;QACF;IACF;IAEA,qBACE,oBAACY;QAAOpB,WAAWS;QAASJ,SAASA;QAASQ,OAAOA;QAAOQ,MAAK;qBAC/D,oBAACC;QAAItB,WAAW,CAAC,EAAEJ,UAAU,WAAW,CAAC;OAAGU,0BAC5C,oBAACgB;QAAItB,WAAW,CAAC,EAAEJ,UAAU,OAAO,CAAC;OAAGiB;AAG9C,EAAC"}
+{"version":3,"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.js'\nimport './index.scss'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: ClientCollectionConfig\n  doc?: { filename?: string } & TypeWithID\n  label?: string\n  onClick?: () => 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    label: labelFromProps,\n    onClick,\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    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 className={classes} onClick={onClick} title={title} type=\"button\">\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"names":["React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","alignLabel","className","collection","doc","label","labelFromProps","onClick","thumbnail","config","i18n","classes","filter","Boolean","join","title","collectionConfig","data","dateFormat","admin","fallback","filename","button","type","div"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,oCAAmC;AAClE,OAAO,eAAc;AAarB,MAAMC,YAAY;AAElB,OAAO,MAAMC,gBAA8C,CAACC;IAC1D,MAAM,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,GAAG,EACHC,OAAOC,cAAc,EACrBC,OAAO,EACPC,SAAS,EACV,GAAGR;IAEJ,MAAM,EAAES,MAAM,EAAE,GAAGd;IAEnB,MAAM,EAAEe,IAAI,EAAE,GAAGd;IAEjB,MAAMe,UAAU;QACdb;QACAI;QACA,OAAOK,YAAY,cAAc,CAAC,EAAET,UAAU,cAAc,CAAC;QAC7DG,cAAc,CAAC,EAAEH,UAAU,cAAc,EAAEG,WAAW,CAAC;KACxD,CACEW,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIC,QAAQT;IAEZ,IAAI,CAACS,OAAO;QACVA,QAAQlB,eAAe;YACrBmB,kBAAkBb;YAClBc,MAAMb;YACNc,YAAYT,OAAOU,KAAK,CAACD,UAAU;YACnCE,UAAUhB,KAAKiB;YACfX;QACF;IACF;IAEA,qBACE,MAACY;QAAOpB,WAAWS;QAASJ,SAASA;QAASQ,OAAOA;QAAOQ,MAAK;;0BAC/D,KAACC;gBAAItB,WAAW,CAAC,EAAEJ,UAAU,WAAW,CAAC;0BAAGU;;0BAC5C,KAACgB;gBAAItB,WAAW,CAAC,EAAEJ,UAAU,OAAO,CAAC;0BAAGiB;;;;AAG9C,EAAC"}

package/dist/elements/ThumbnailCard/index.scss

@@ -2,9 +2,12 @@
 
 .thumbnail-card {
   @include btn-reset;
-  @include shadow;
+  @include shadow-m;
   width: 100%;
   background: var(--theme-input-bg);
+  border: 1px solid var(--theme-border-color);
+  border-radius: var(--style-radius-m);
+  transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
 
   &__label {
     padding: base(0.5);
@@ -16,6 +19,12 @@
 
   &--has-on-click {
     cursor: pointer;
+
+    &:hover,
+    &:focus,
+    &:active {
+      border: 1px solid var(--theme-elevation-350);
+    }
   }
 
   &--align-label-center {

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

@@ -2,11 +2,15 @@ import React from 'react';
 import './index.scss';
 export type Props = {
     alignCaret?: 'center' | 'left' | 'right';
-    boundingRef?: React.RefObject<HTMLElement>;
+    boundingRef?: React.RefObject<HTMLElement | null>;
     children: React.ReactNode;
     className?: string;
     delay?: number;
     show?: boolean;
+    /**
+     * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false
+     */
+    staticPositioning?: boolean;
 };
 export declare const Tooltip: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuEnC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8EnC,CAAA"}

package/dist/elements/Tooltip/index.js

@@ -1,8 +1,10 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useIntersect } from '../../hooks/useIntersect.js';
+import './index.scss';
 export const Tooltip = (props)=>{
-    const { alignCaret = 'center', boundingRef, children, className, delay = 350, show: showFromProps = true } = props;
+    const { alignCaret = 'center', boundingRef, children, className, delay = 350, show: showFromProps = true, staticPositioning = false } = props;
     const [show, setShow] = React.useState(showFromProps);
     const [position, setPosition] = React.useState('top');
     const getTitleAttribute = (content)=>typeof content === 'string' ? content : '';
@@ -10,7 +12,7 @@ export const Tooltip = (props)=>{
         root: boundingRef?.current || null,
         rootMargin: '-145px 0px 0px 100px',
         threshold: 0
-    });
+    }, staticPositioning);
     useEffect(()=>{
         let timerId;
         // do not use the delay on transition-out
@@ -29,34 +31,48 @@ export const Tooltip = (props)=>{
         delay
     ]);
     useEffect(()=>{
+        if (staticPositioning) return;
         setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom');
     }, [
-        intersectionEntry
+        intersectionEntry,
+        staticPositioning
     ]);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("aside", {
-        "aria-hidden": "true",
-        className: [
-            'tooltip',
-            className,
-            `tooltip--caret-${alignCaret}`,
-            'tooltip--position-top'
-        ].filter(Boolean).join(' '),
-        ref: ref,
-        title: getTitleAttribute(children)
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: "tooltip-content"
-    }, children)), /*#__PURE__*/ React.createElement("aside", {
-        className: [
-            'tooltip',
-            className,
-            show && 'tooltip--show',
-            `tooltip--caret-${alignCaret}`,
-            `tooltip--position-${position}`
-        ].filter(Boolean).join(' '),
-        title: getTitleAttribute(children)
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: "tooltip-content"
-    }, children)));
+    // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            !staticPositioning && /*#__PURE__*/ _jsx("aside", {
+                "aria-hidden": "true",
+                className: [
+                    'tooltip',
+                    className,
+                    `tooltip--caret-${alignCaret}`,
+                    'tooltip--position-top'
+                ].filter(Boolean).join(' '),
+                ref: ref,
+                style: {
+                    opacity: '0'
+                },
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "tooltip-content",
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ _jsx("aside", {
+                className: [
+                    'tooltip',
+                    className,
+                    show && 'tooltip--show',
+                    `tooltip--caret-${alignCaret}`,
+                    `tooltip--position-${position}`
+                ].filter(Boolean).join(' '),
+                title: getTitleAttribute(children),
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "tooltip-content",
+                    children: children
+                })
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.scss'\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  boundingRef?: React.RefObject<HTMLElement>\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  show?: boolean\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    alignCaret = 'center',\n    boundingRef,\n    children,\n    className,\n    delay = 350,\n    show: showFromProps = true,\n  } = props\n\n  const [show, setShow] = React.useState(showFromProps)\n  const [position, setPosition] = React.useState<'bottom' | 'top'>('top')\n\n  const getTitleAttribute = (content) => (typeof content === 'string' ? content : '')\n\n  const [ref, intersectionEntry] = useIntersect({\n    root: boundingRef?.current || null,\n    rootMargin: '-145px 0px 0px 100px',\n    threshold: 0,\n  })\n\n  useEffect(() => {\n    let timerId: NodeJS.Timeout\n\n    // do not use the delay on transition-out\n    if (delay && showFromProps) {\n      timerId = setTimeout(() => {\n        setShow(showFromProps)\n      }, delay)\n    } else {\n      setShow(showFromProps)\n    }\n\n    return () => {\n      if (timerId) clearTimeout(timerId)\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')\n  }, [intersectionEntry])\n\n  return (\n    <React.Fragment>\n      <aside\n        aria-hidden=\"true\"\n        className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']\n          .filter(Boolean)\n          .join(' ')}\n        ref={ref}\n        title={getTitleAttribute(children)}\n      >\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n\n      <aside\n        className={[\n          'tooltip',\n          className,\n          show && 'tooltip--show',\n          `tooltip--caret-${alignCaret}`,\n          `tooltip--position-${position}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        title={getTitleAttribute(children)}\n      >\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n    </React.Fragment>\n  )\n}\n"],"names":["React","useEffect","useIntersect","Tooltip","props","alignCaret","boundingRef","children","className","delay","show","showFromProps","setShow","useState","position","setPosition","getTitleAttribute","content","ref","intersectionEntry","root","current","rootMargin","threshold","timerId","setTimeout","clearTimeout","isIntersecting","Fragment","aside","aria-hidden","filter","Boolean","join","title","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,YAAY,QAAQ,8BAA6B;AAY1D,OAAO,MAAMC,UAA2B,CAACC;IACvC,MAAM,EACJC,aAAa,QAAQ,EACrBC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,QAAQ,GAAG,EACXC,MAAMC,gBAAgB,IAAI,EAC3B,GAAGP;IAEJ,MAAM,CAACM,MAAME,QAAQ,GAAGZ,MAAMa,QAAQ,CAACF;IACvC,MAAM,CAACG,UAAUC,YAAY,GAAGf,MAAMa,QAAQ,CAAmB;IAEjE,MAAMG,oBAAoB,CAACC,UAAa,OAAOA,YAAY,WAAWA,UAAU;IAEhF,MAAM,CAACC,KAAKC,kBAAkB,GAAGjB,aAAa;QAC5CkB,MAAMd,aAAae,WAAW;QAC9BC,YAAY;QACZC,WAAW;IACb;IAEAtB,UAAU;QACR,IAAIuB;QAEJ,yCAAyC;QACzC,IAAIf,SAASE,eAAe;YAC1Ba,UAAUC,WAAW;gBACnBb,QAAQD;YACV,GAAGF;QACL,OAAO;YACLG,QAAQD;QACV;QAEA,OAAO;YACL,IAAIa,SAASE,aAAaF;QAC5B;IACF,GAAG;QAACb;QAAeF;KAAM;IAEzBR,UAAU;QACRc,YAAYI,mBAAmBQ,iBAAiB,QAAQ;IAC1D,GAAG;QAACR;KAAkB;IAEtB,qBACE,oBAACnB,MAAM4B,QAAQ,sBACb,oBAACC;QACCC,eAAY;QACZtB,WAAW;YAAC;YAAWA;YAAW,CAAC,eAAe,EAAEH,WAAW,CAAC;YAAE;SAAwB,CACvF0B,MAAM,CAACC,SACPC,IAAI,CAAC;QACRf,KAAKA;QACLgB,OAAOlB,kBAAkBT;qBAEzB,oBAAC4B;QAAI3B,WAAU;OAAmBD,0BAGpC,oBAACsB;QACCrB,WAAW;YACT;YACAA;YACAE,QAAQ;YACR,CAAC,eAAe,EAAEL,WAAW,CAAC;YAC9B,CAAC,kBAAkB,EAAES,SAAS,CAAC;SAChC,CACEiB,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,OAAOlB,kBAAkBT;qBAEzB,oBAAC4B;QAAI3B,WAAU;OAAmBD;AAI1C,EAAC"}
+{"version":3,"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.scss'\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  boundingRef?: React.RefObject<HTMLElement | null>\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  show?: boolean\n  /**\n   * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false\n   */\n  staticPositioning?: boolean\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    alignCaret = 'center',\n    boundingRef,\n    children,\n    className,\n    delay = 350,\n    show: showFromProps = true,\n    staticPositioning = false,\n  } = props\n\n  const [show, setShow] = React.useState(showFromProps)\n  const [position, setPosition] = React.useState<'bottom' | 'top'>('top')\n\n  const getTitleAttribute = (content) => (typeof content === 'string' ? content : '')\n\n  const [ref, intersectionEntry] = useIntersect(\n    {\n      root: boundingRef?.current || null,\n      rootMargin: '-145px 0px 0px 100px',\n      threshold: 0,\n    },\n    staticPositioning,\n  )\n\n  useEffect(() => {\n    let timerId: NodeJS.Timeout\n\n    // do not use the delay on transition-out\n    if (delay && showFromProps) {\n      timerId = setTimeout(() => {\n        setShow(showFromProps)\n      }, delay)\n    } else {\n      setShow(showFromProps)\n    }\n\n    return () => {\n      if (timerId) clearTimeout(timerId)\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    if (staticPositioning) return\n    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')\n  }, [intersectionEntry, staticPositioning])\n\n  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.\n  return (\n    <React.Fragment>\n      {!staticPositioning && (\n        <aside\n          aria-hidden=\"true\"\n          className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']\n            .filter(Boolean)\n            .join(' ')}\n          ref={ref}\n          style={{ opacity: '0' }}\n        >\n          <div className=\"tooltip-content\">{children}</div>\n        </aside>\n      )}\n      <aside\n        className={[\n          'tooltip',\n          className,\n          show && 'tooltip--show',\n          `tooltip--caret-${alignCaret}`,\n          `tooltip--position-${position}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        title={getTitleAttribute(children)}\n      >\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n    </React.Fragment>\n  )\n}\n"],"names":["React","useEffect","useIntersect","Tooltip","props","alignCaret","boundingRef","children","className","delay","show","showFromProps","staticPositioning","setShow","useState","position","setPosition","getTitleAttribute","content","ref","intersectionEntry","root","current","rootMargin","threshold","timerId","setTimeout","clearTimeout","isIntersecting","Fragment","aside","aria-hidden","filter","Boolean","join","style","opacity","div","title"],"mappings":"AAAA;;AACA,OAAOA,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,YAAY,QAAQ,8BAA6B;AAC1D,OAAO,eAAc;AAerB,OAAO,MAAMC,UAA2B,CAACC;IACvC,MAAM,EACJC,aAAa,QAAQ,EACrBC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,QAAQ,GAAG,EACXC,MAAMC,gBAAgB,IAAI,EAC1BC,oBAAoB,KAAK,EAC1B,GAAGR;IAEJ,MAAM,CAACM,MAAMG,QAAQ,GAAGb,MAAMc,QAAQ,CAACH;IACvC,MAAM,CAACI,UAAUC,YAAY,GAAGhB,MAAMc,QAAQ,CAAmB;IAEjE,MAAMG,oBAAoB,CAACC,UAAa,OAAOA,YAAY,WAAWA,UAAU;IAEhF,MAAM,CAACC,KAAKC,kBAAkB,GAAGlB,aAC/B;QACEmB,MAAMf,aAAagB,WAAW;QAC9BC,YAAY;QACZC,WAAW;IACb,GACAZ;IAGFX,UAAU;QACR,IAAIwB;QAEJ,yCAAyC;QACzC,IAAIhB,SAASE,eAAe;YAC1Bc,UAAUC,WAAW;gBACnBb,QAAQF;YACV,GAAGF;QACL,OAAO;YACLI,QAAQF;QACV;QAEA,OAAO;YACL,IAAIc,SAASE,aAAaF;QAC5B;IACF,GAAG;QAACd;QAAeF;KAAM;IAEzBR,UAAU;QACR,IAAIW,mBAAmB;QACvBI,YAAYI,mBAAmBQ,iBAAiB,QAAQ;IAC1D,GAAG;QAACR;QAAmBR;KAAkB;IAEzC,mMAAmM;IACnM,qBACE,MAACZ,MAAM6B,QAAQ;;YACZ,CAACjB,mCACA,KAACkB;gBACCC,eAAY;gBACZvB,WAAW;oBAAC;oBAAWA;oBAAW,CAAC,eAAe,EAAEH,WAAW,CAAC;oBAAE;iBAAwB,CACvF2B,MAAM,CAACC,SACPC,IAAI,CAAC;gBACRf,KAAKA;gBACLgB,OAAO;oBAAEC,SAAS;gBAAI;0BAEtB,cAAA,KAACC;oBAAI7B,WAAU;8BAAmBD;;;0BAGtC,KAACuB;gBACCtB,WAAW;oBACT;oBACAA;oBACAE,QAAQ;oBACR,CAAC,eAAe,EAAEL,WAAW,CAAC;oBAC9B,CAAC,kBAAkB,EAAEU,SAAS,CAAC;iBAChC,CACEiB,MAAM,CAACC,SACPC,IAAI,CAAC;gBACRI,OAAOrB,kBAAkBV;0BAEzB,cAAA,KAAC8B;oBAAI7B,WAAU;8BAAmBD;;;;;AAI1C,EAAC"}

package/dist/elements/Tooltip/index.scss

@@ -6,7 +6,7 @@
   opacity: 0;
   background-color: var(--theme-elevation-800);
   position: absolute;
-  z-index: 2;
+  z-index: 3;
   left: 50%;
   padding: base(0.2) base(0.4);
   color: var(--theme-elevation-0);
@@ -53,7 +53,7 @@
   }
 
   &--position-top {
-    bottom: 100%;
+    top: calc(var(--base) * -0.6 - 13px);
     transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
 
     &::after {
@@ -63,7 +63,7 @@
   }
 
   &--position-bottom {
-    top: 100%;
+    bottom: calc(var(--base) * -0.6 - 13px);
     transform: translate3d(-50%, var(--caret-size), 0);
 
     &::after {
@@ -84,16 +84,16 @@
 }
 
 html[data-theme='light'] {
-  .tooltip {
+  .tooltip:not(.field-error) {
     background-color: var(--theme-elevation-100);
     color: var(--theme-elevation-1000);
+  }
 
-    &--position-top:after {
-      border-top-color: var(--theme-elevation-100);
-    }
+  .tooltip--position-top:not(.field-error):after {
+    border-top-color: var(--theme-elevation-100);
+  }
 
-    &--position-bottom:after {
-      border-bottom-color: var(--theme-elevation-100);
-    }
+  .tooltip--position-bottom:not(.field-error):after {
+    border-bottom-color: var(--theme-elevation-100);
   }
 }

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

@@ -1,10 +1,10 @@
-import type { TFunction } from '@payloadcms/translations';
+import type { ClientTranslationKeys, TFunction } from '@payloadcms/translations';
 import * as React from 'react';
 export type TranslationProps = {
     elements?: Record<string, React.FC<{
         children: React.ReactNode;
     }>>;
-    i18nKey: string;
+    i18nKey: ClientTranslationKeys;
     t: TFunction;
     variables?: Record<string, unknown>;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Translation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkC9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC,CAAA;IAClE,OAAO,EAAE,MAAM,CAAA;IACf,CAAC,EAAE,SAAS,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACpC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAQlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Translation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEhF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkC9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC,CAAA;IAClE,OAAO,EAAE,qBAAqB,CAAA;IAC9B,CAAC,EAAE,SAAS,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACpC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAQlD,CAAA"}

package/dist/elements/Translation/index.js

@@ -1,30 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 const RecursiveTranslation = ({ elements, translationString })=>{
     const regex = /(<[^>]+>.*?<\/[^>]+>)/g;
     const sections = translationString.split(regex);
-    return /*#__PURE__*/ React.createElement("span", null, sections.map((section, index)=>{
-        if (elements && section.startsWith('<') && section.endsWith('>')) {
-            const elementKey = section[1];
-            const Element = elements[elementKey];
-            if (Element) {
-                const regex = new RegExp(`<${elementKey}>(.*?)<\/${elementKey}>`, 'g');
-                const children = section.replace(regex, (_, group)=>group);
-                return /*#__PURE__*/ React.createElement(Element, {
-                    key: index
-                }, /*#__PURE__*/ React.createElement(RecursiveTranslation, {
-                    translationString: children
-                }));
+    return /*#__PURE__*/ _jsx("span", {
+        children: sections.map((section, index)=>{
+            if (elements && section.startsWith('<') && section.endsWith('>')) {
+                const elementKey = section[1];
+                const Element = elements[elementKey];
+                if (Element) {
+                    const regex = new RegExp(`<${elementKey}>(.*?)<\/${elementKey}>`, 'g');
+                    const children = section.replace(regex, (_, group)=>group);
+                    return /*#__PURE__*/ _jsx(Element, {
+                        children: /*#__PURE__*/ _jsx(RecursiveTranslation, {
+                            translationString: children
+                        })
+                    }, index);
+                }
             }
-        }
-        return section;
-    }));
+            return section;
+        })
+    });
 };
 export const Translation = ({ elements, i18nKey, t, variables })=>{
     const stringWithVariables = t(i18nKey, variables || {});
     if (!elements) {
         return stringWithVariables;
     }
-    return /*#__PURE__*/ React.createElement(RecursiveTranslation, {
+    return /*#__PURE__*/ _jsx(RecursiveTranslation, {
         elements: elements,
         translationString: stringWithVariables
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Translation/index.tsx"],"sourcesContent":["import type { TFunction } from '@payloadcms/translations'\n\nimport * as React from 'react'\n\nconst RecursiveTranslation: React.FC<{\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  translationString: string\n}> = ({ elements, translationString }) => {\n  const regex = /(<[^>]+>.*?<\\/[^>]+>)/g\n  const sections = translationString.split(regex)\n\n  return (\n    <span>\n      {sections.map((section, index) => {\n        if (elements && section.startsWith('<') && section.endsWith('>')) {\n          const elementKey = section[1]\n          const Element = elements[elementKey]\n\n          if (Element) {\n            const regex = new RegExp(`<${elementKey}>(.*?)<\\/${elementKey}>`, 'g')\n            const children = section.replace(regex, (_, group) => group)\n\n            return (\n              <Element key={index}>\n                <RecursiveTranslation translationString={children} />\n              </Element>\n            )\n          }\n        }\n\n        return section\n      })}\n    </span>\n  )\n}\n\nexport type TranslationProps = {\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  i18nKey: string\n  t: TFunction\n  variables?: Record<string, unknown>\n}\n\nexport const Translation: React.FC<TranslationProps> = ({ elements, i18nKey, t, variables }) => {\n  const stringWithVariables = t(i18nKey, variables || {})\n\n  if (!elements) {\n    return stringWithVariables\n  }\n\n  return <RecursiveTranslation elements={elements} translationString={stringWithVariables} />\n}\n"],"names":["React","RecursiveTranslation","elements","translationString","regex","sections","split","span","map","section","index","startsWith","endsWith","elementKey","Element","RegExp","children","replace","_","group","key","Translation","i18nKey","t","variables","stringWithVariables"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,YAAYA,WAAW,QAAO;AAE9B,MAAMC,uBAGD,CAAC,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE;IACnC,MAAMC,QAAQ;IACd,MAAMC,WAAWF,kBAAkBG,KAAK,CAACF;IAEzC,qBACE,oBAACG,cACEF,SAASG,GAAG,CAAC,CAACC,SAASC;QACtB,IAAIR,YAAYO,QAAQE,UAAU,CAAC,QAAQF,QAAQG,QAAQ,CAAC,MAAM;YAChE,MAAMC,aAAaJ,OAAO,CAAC,EAAE;YAC7B,MAAMK,UAAUZ,QAAQ,CAACW,WAAW;YAEpC,IAAIC,SAAS;gBACX,MAAMV,QAAQ,IAAIW,OAAO,CAAC,CAAC,EAAEF,WAAW,SAAS,EAAEA,WAAW,CAAC,CAAC,EAAE;gBAClE,MAAMG,WAAWP,QAAQQ,OAAO,CAACb,OAAO,CAACc,GAAGC,QAAUA;gBAEtD,qBACE,oBAACL;oBAAQM,KAAKV;iCACZ,oBAACT;oBAAqBE,mBAAmBa;;YAG/C;QACF;QAEA,OAAOP;IACT;AAGN;AASA,OAAO,MAAMY,cAA0C,CAAC,EAAEnB,QAAQ,EAAEoB,OAAO,EAAEC,CAAC,EAAEC,SAAS,EAAE;IACzF,MAAMC,sBAAsBF,EAAED,SAASE,aAAa,CAAC;IAErD,IAAI,CAACtB,UAAU;QACb,OAAOuB;IACT;IAEA,qBAAO,oBAACxB;QAAqBC,UAAUA;QAAUC,mBAAmBsB;;AACtE,EAAC"}
+{"version":3,"sources":["../../../src/elements/Translation/index.tsx"],"sourcesContent":["import type { ClientTranslationKeys, TFunction } from '@payloadcms/translations'\n\nimport * as React from 'react'\n\nconst RecursiveTranslation: React.FC<{\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  translationString: string\n}> = ({ elements, translationString }) => {\n  const regex = /(<[^>]+>.*?<\\/[^>]+>)/g\n  const sections = translationString.split(regex)\n\n  return (\n    <span>\n      {sections.map((section, index) => {\n        if (elements && section.startsWith('<') && section.endsWith('>')) {\n          const elementKey = section[1]\n          const Element = elements[elementKey]\n\n          if (Element) {\n            const regex = new RegExp(`<${elementKey}>(.*?)<\\/${elementKey}>`, 'g')\n            const children = section.replace(regex, (_, group) => group)\n\n            return (\n              <Element key={index}>\n                <RecursiveTranslation translationString={children} />\n              </Element>\n            )\n          }\n        }\n\n        return section\n      })}\n    </span>\n  )\n}\n\nexport type TranslationProps = {\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  i18nKey: ClientTranslationKeys\n  t: TFunction\n  variables?: Record<string, unknown>\n}\n\nexport const Translation: React.FC<TranslationProps> = ({ elements, i18nKey, t, variables }) => {\n  const stringWithVariables = t(i18nKey, variables || {})\n\n  if (!elements) {\n    return stringWithVariables\n  }\n\n  return <RecursiveTranslation elements={elements} translationString={stringWithVariables} />\n}\n"],"names":["React","RecursiveTranslation","elements","translationString","regex","sections","split","span","map","section","index","startsWith","endsWith","elementKey","Element","RegExp","children","replace","_","group","Translation","i18nKey","t","variables","stringWithVariables"],"mappings":";AAEA,YAAYA,WAAW,QAAO;AAE9B,MAAMC,uBAGD,CAAC,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE;IACnC,MAAMC,QAAQ;IACd,MAAMC,WAAWF,kBAAkBG,KAAK,CAACF;IAEzC,qBACE,KAACG;kBACEF,SAASG,GAAG,CAAC,CAACC,SAASC;YACtB,IAAIR,YAAYO,QAAQE,UAAU,CAAC,QAAQF,QAAQG,QAAQ,CAAC,MAAM;gBAChE,MAAMC,aAAaJ,OAAO,CAAC,EAAE;gBAC7B,MAAMK,UAAUZ,QAAQ,CAACW,WAAW;gBAEpC,IAAIC,SAAS;oBACX,MAAMV,QAAQ,IAAIW,OAAO,CAAC,CAAC,EAAEF,WAAW,SAAS,EAAEA,WAAW,CAAC,CAAC,EAAE;oBAClE,MAAMG,WAAWP,QAAQQ,OAAO,CAACb,OAAO,CAACc,GAAGC,QAAUA;oBAEtD,qBACE,KAACL;kCACC,cAAA,KAACb;4BAAqBE,mBAAmBa;;uBAD7BN;gBAIlB;YACF;YAEA,OAAOD;QACT;;AAGN;AASA,OAAO,MAAMW,cAA0C,CAAC,EAAElB,QAAQ,EAAEmB,OAAO,EAAEC,CAAC,EAAEC,SAAS,EAAE;IACzF,MAAMC,sBAAsBF,EAAED,SAASE,aAAa,CAAC;IAErD,IAAI,CAACrB,UAAU;QACb,OAAOsB;IACT;IAEA,qBAAO,KAACvB;QAAqBC,UAAUA;QAAUC,mBAAmBqB;;AACtE,EAAC"}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import './index.scss';
-import type { ClientCollectionConfig } from 'payload/types';
+import type { ClientCollectionConfig } from 'payload';
 export type UnpublishManyProps = {
     collection: ClientCollectionConfig;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/UnpublishMany/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAapD,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAE3D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,sBAAsB,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmHtD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/UnpublishMany/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAWpD,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAIrD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,sBAAsB,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqHtD,CAAA"}