@payloadcms/ui 4.0.0-internal.8001944 → 4.0.0-internal.8089ef7

package/dist/elements/Table/DefaultCell/fields/Hierarchy/index.js

@@ -1,7 +1,9 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { toast } from 'sonner';
 import { useIntersect } from '../../../../../hooks/useIntersect.js';
 import { FolderIcon } from '../../../../../icons/Folder/index.js';
 import { TagIcon } from '../../../../../icons/Tag/index.js';
@@ -9,7 +11,10 @@ import { useConfig } from '../../../../../providers/Config/index.js';
 import { useTranslation } from '../../../../../providers/Translation/index.js';
 import { canUseDOM } from '../../../../../utilities/canUseDOM.js';
 import { formatDocTitle } from '../../../../../utilities/formatDocTitle/index.js';
+import { getEffectiveHierarchyCollections, getHierarchyCollectionRestrictions } from '../../../../../utilities/hierarchyCollectionRestrictions.js';
+import { getHierarchyListURL } from '../../../../../views/HierarchyList/getHierarchyListURL.js';
 import { Button } from '../../../../Button/index.js';
+import { HierarchyActionsMenu } from '../../../../Hierarchy/ActionsMenu/index.js';
 import { useHierarchyModal } from '../../../../Hierarchy/Modal/useHierarchyModal.js';
 import { useListRelationships } from '../../../RelationshipProvider/index.js';
 import './index.css';
@@ -46,7 +51,30 @@ export const HierarchyCell = ({
     collectionSlug: hierarchyCollectionSlug
   }) : undefined;
   // Use pre-rendered icon from server if available, otherwise determine on client
-  const hierarchyConfig = hierarchyCollectionConfig?.hierarchy && typeof hierarchyCollectionConfig.hierarchy === 'object' ? hierarchyCollectionConfig.hierarchy : undefined;
+  const {
+    hierarchyConfig,
+    relatedCollectionSlugs,
+    typeFieldName
+  } = useMemo(() => getHierarchyCollectionRestrictions({
+    collectionConfig: hierarchyCollectionConfig
+  }), [hierarchyCollectionConfig]);
+  const filterByCollection = useMemo(() => {
+    if (!hierarchyCollectionSlug) {
+      return undefined;
+    }
+    if (collectionSlug !== hierarchyCollectionSlug) {
+      return [collectionSlug];
+    }
+    if (!typeFieldName) {
+      return undefined;
+    }
+    const allowedCollections = rowData[typeFieldName];
+    return getEffectiveHierarchyCollections({
+      allowedCollections: Array.isArray(allowedCollections) ? allowedCollections : undefined,
+      relatedCollectionSlugs
+    });
+  }, [collectionSlug, hierarchyCollectionSlug, relatedCollectionSlugs, rowData, typeFieldName]);
+  const disabledIds = useMemo(() => collectionSlug === hierarchyCollectionSlug && rowData.id !== undefined ? new Set([rowData.id]) : undefined, [collectionSlug, hierarchyCollectionSlug, rowData.id]);
   // Pre-rendered icons from server (supports custom icons)
   const preRenderedIcon = customCellProps?.hierarchyIcon;
   const preRenderedSmallIcon = customCellProps?.hierarchySmallIcon;
@@ -68,6 +96,8 @@ export const HierarchyCell = ({
   const [HierarchyModal,, {
     openModal
   }] = useHierarchyModal({
+    disabledIds,
+    filterByCollection,
     hierarchyCollectionSlug: hierarchyCollectionSlug || '',
     Icon: drawerIcon
   });
@@ -116,32 +146,15 @@ export const HierarchyCell = ({
       setValues(formattedValues);
     }
   }, [cellDataFromProps, relationTo, isAboveViewport, getRelationships]);
-  // Get current selection IDs for the modal
-  const initialSelections = useMemo(() => {
-    if (!cellDataFromProps) {
-      return [];
-    }
-    const data = Array.isArray(cellDataFromProps) ? cellDataFromProps : [cellDataFromProps];
-    return data.map(item => {
-      if (typeof item === 'object' && 'value' in item) {
-        return item.value;
-      }
-      return item;
-    });
-  }, [cellDataFromProps]);
-  // Handle save from modal
-  const handleSave = useCallback(async ({
-    closeModal,
-    selections
-  }) => {
-    // Get selected IDs
-    const selectedIds = Array.from(selections.keys());
-    const newValue = hasMany ? selectedIds : selectedIds[0] ?? null;
-    // Update the document via API
+  // Read from local state so the picker reflects in-place moves and removes
+  const initialSelections = useMemo(() => values.map(({
+    value
+  }) => value), [values]);
+  const saveIds = useCallback(async selectedIds => {
     try {
       const response = await fetch(`${config.serverURL}${config.routes.api}/${collectionSlug}/${rowData.id}`, {
         body: JSON.stringify({
-          [field.name]: newValue
+          [field.name]: hasMany ? selectedIds : selectedIds[0] ?? null
         }),
         credentials: 'include',
         headers: {
@@ -149,7 +162,13 @@ export const HierarchyCell = ({
         },
         method: 'PATCH'
       });
-      if (response.ok && typeof relationTo === 'string') {
+      if (!response.ok) {
+        const responseData = await response.json().catch(() => null);
+        const errorMessage = responseData?.errors?.[0]?.message || responseData?.error || responseData?.message || t('error:unknown');
+        toast.error(errorMessage);
+        return false;
+      }
+      if (typeof relationTo === 'string') {
         // Update local state with new selection to avoid page reload
         const newValues = selectedIds.map(id => ({
           relationTo,
@@ -161,18 +180,27 @@ export const HierarchyCell = ({
           getRelationships(newValues);
         }
       }
-    } catch (_error) {
-      // swallow error and close modal anyway, user can try again
+    } catch {
+      toast.error(t('error:unknown'));
+      return false;
+    }
+    return true;
+  }, [collectionSlug, config, field.name, hasMany, rowData, relationTo, getRelationships, t]);
+  const handleSave = useCallback(async ({
+    closeModal,
+    selections
+  }) => {
+    if (await saveIds(Array.from(selections.keys()))) {
+      closeModal();
     }
-    closeModal();
-  }, [collectionSlug, config, field.name, hasMany, rowData, relationTo, getRelationships]);
+  }, [saveIds]);
   // Build display labels
   const labels = useMemo(() => {
     return values.map(({
       relationTo: rel,
-      value
+      value: value_0
     }) => {
-      const document = documents[rel]?.[value];
+      const document = documents[rel]?.[value_0];
       const relatedCollection = getEntityConfig({
         collectionSlug: rel
       });
@@ -180,7 +208,7 @@ export const HierarchyCell = ({
         collectionConfig: relatedCollection,
         data: document || null,
         dateFormat: config.admin.dateFormat,
-        fallback: `${t('general:untitled')} - ID: ${value}`,
+        fallback: `${t('general:untitled')} - ID: ${value_0}`,
         i18n
       });
     });
@@ -188,21 +216,50 @@ export const HierarchyCell = ({
   const displayText = labels.length > 0 ? labels.join(', ') : t('general:none');
   const isLoading = values.length > 0 && values.some(({
     relationTo: rel_0,
-    value: value_0
-  }) => documents[rel_0]?.[value_0] === null);
+    value: value_1
+  }) => documents[rel_0]?.[value_1] === null);
+  const currentId = !hasMany && values.length === 1 ? values[0].value : undefined;
+  const hasSingleSelection = typeof currentId === 'number' || typeof currentId === 'string';
+  const hierarchyLabel = getTranslation(hierarchyCollectionConfig?.labels?.singular || hierarchyCollectionSlug || '', i18n) || hierarchyCollectionSlug;
+  const handleRemove = useCallback(() => saveIds([]), [saveIds]);
+  const goTo = useMemo(() => hasSingleSelection && hierarchyCollectionSlug ? {
+    name: displayText,
+    href: getHierarchyListURL({
+      adminRoute: config.routes.admin,
+      collectionSlug: hierarchyCollectionSlug,
+      parentFieldName: hierarchyConfig?.parentFieldName,
+      parentID: currentId
+    })
+  } : undefined, [config.routes.admin, currentId, displayText, hasSingleSelection, hierarchyCollectionSlug, hierarchyConfig?.parentFieldName]);
+  const label = isLoading ? `${t('general:loading')}...` : displayText;
   return /*#__PURE__*/_jsxs("div", {
     className: baseClass,
     ref: intersectionRef,
-    children: [/*#__PURE__*/_jsx(Button, {
-      buttonStyle: "secondary",
-      className: `${baseClass}__button`,
-      icon: displayIcon,
-      iconPosition: "left",
-      margin: false,
-      onClick: handleOpenModal,
-      size: "medium",
-      children: isLoading ? `${t('general:loading')}...` : displayText
+    children: [/*#__PURE__*/_jsx(HierarchyActionsMenu, {
+      goTo: goTo,
+      hasActions: hasSingleSelection,
+      hierarchyLabel: hierarchyLabel,
+      onMove: handleOpenModal,
+      onRemove: handleRemove,
+      renderTrigger: triggerProps => /*#__PURE__*/_jsx(Button, {
+        "aria-label": triggerProps ? label : undefined,
+        buttonStyle: "secondary",
+        className: `${baseClass}__button`,
+        extraButtonProps: triggerProps?.extraButtonProps,
+        icon: displayIcon,
+        iconPosition: "left",
+        margin: false,
+        onClick: triggerProps?.onClick ?? handleOpenModal,
+        selected: triggerProps?.selected,
+        size: "medium",
+        tooltip: triggerProps ? displayText : undefined,
+        children: triggerProps ? /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__truncate`,
+          children: label
+        }) : label
+      })
     }), hierarchyCollectionSlug && hasMountedModal && /*#__PURE__*/_jsx(HierarchyModal, {
+      confirmLabel: t('general:confirm'),
       hasMany: hasMany,
       initialSelections: initialSelections,
       onSave: handleSave

package/dist/elements/Table/DefaultCell/fields/Hierarchy/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useIntersect","FolderIcon","TagIcon","useConfig","useTranslation","canUseDOM","formatDocTitle","Button","useHierarchyModal","useListRelationships","baseClass","HierarchyCell","cellData","cellDataFromProps","collectionSlug","customCellProps","field","rowData","relationTo","undefined","hasMany","config","getEntityConfig","intersectionRef","entry","values","setValues","documents","getRelationships","hasRequestedRef","prevCellDataRef","i18n","t","isAboveViewport","boundingClientRect","top","window","innerHeight","hierarchyCollectionSlug","hierarchyCollectionConfig","hierarchyConfig","hierarchy","preRenderedIcon","hierarchyIcon","preRenderedSmallIcon","hierarchySmallIcon","fallbackIcon","IconComponent","allowHasMany","_jsx","drawerIcon","displayIcon","HierarchyModal","openModal","Icon","hasMountedModal","setHasMountedModal","shouldOpenAfterMountRef","handleOpenModal","current","formattedValues","arrayCellData","Array","isArray","forEach","cell","push","value","initialSelections","data","map","item","handleSave","closeModal","selections","selectedIds","from","keys","newValue","response","fetch","serverURL","routes","api","id","body","JSON","stringify","name","credentials","headers","method","ok","newValues","length","_error","labels","rel","document","relatedCollection","collectionConfig","dateFormat","admin","fallback","displayText","join","isLoading","some","_jsxs","className","ref","buttonStyle","icon","iconPosition","margin","onClick","size","onSave"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Hierarchy/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, RelationshipFieldClient } from 'payload'\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { SelectionWithPath } from '../../../../Hierarchy/Modal/types.js'\n\nimport { useIntersect } from '../../../../../hooks/useIntersect.js'\nimport { FolderIcon } from '../../../../../icons/Folder/index.js'\nimport { TagIcon } from '../../../../../icons/Tag/index.js'\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport { canUseDOM } from '../../../../../utilities/canUseDOM.js'\nimport { formatDocTitle } from '../../../../../utilities/formatDocTitle/index.js'\nimport { Button } from '../../../../Button/index.js'\nimport { useHierarchyModal } from '../../../../Hierarchy/Modal/useHierarchyModal.js'\nimport { useListRelationships } from '../../../RelationshipProvider/index.js'\nimport './index.css'\n\ntype Value = { relationTo: string; value: number | string }\nconst baseClass = 'hierarchy-cell'\n\nexport type HierarchyCellProps = DefaultCellComponentProps<RelationshipFieldClient>\n\nexport const HierarchyCell: React.FC<HierarchyCellProps> = ({\n  cellData: cellDataFromProps,\n  collectionSlug,\n  customCellProps,\n  field,\n  rowData,\n}) => {\n  const relationTo = 'relationTo' in field ? field.relationTo : undefined\n  const hasMany = field.hasMany ?? false\n\n  const { config, getEntityConfig } = useConfig()\n  const [intersectionRef, entry] = useIntersect()\n  const [values, setValues] = useState<Value[]>([])\n  const { documents, getRelationships } = useListRelationships()\n  const hasRequestedRef = useRef(false)\n  const prevCellDataRef = useRef<typeof cellDataFromProps>(undefined)\n  const { i18n, t } = useTranslation()\n\n  const isAboveViewport = canUseDOM ? entry?.boundingClientRect?.top < window.innerHeight : false\n\n  // Get the hierarchy collection config\n  const hierarchyCollectionSlug = typeof relationTo === 'string' ? relationTo : undefined\n  const hierarchyCollectionConfig = hierarchyCollectionSlug\n    ? getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n    : undefined\n\n  // Use pre-rendered icon from server if available, otherwise determine on client\n  const hierarchyConfig =\n    hierarchyCollectionConfig?.hierarchy && typeof hierarchyCollectionConfig.hierarchy === 'object'\n      ? hierarchyCollectionConfig.hierarchy\n      : undefined\n\n  // Pre-rendered icons from server (supports custom icons)\n  const preRenderedIcon = customCellProps?.hierarchyIcon as React.ReactNode | undefined\n  const preRenderedSmallIcon = customCellProps?.hierarchySmallIcon as React.ReactNode | undefined\n\n  // Fallback icon for client-side rendering\n  const fallbackIcon = useMemo(() => {\n    if (preRenderedIcon) {\n      return null // Don't need fallback if we have pre-rendered icon\n    }\n    // Default based on allowHasMany: false = folder-like, true = tag-like\n    const IconComponent = hierarchyConfig?.allowHasMany === false ? FolderIcon : TagIcon\n    return <IconComponent />\n  }, [hierarchyConfig, preRenderedIcon])\n\n  // Full icon for modal subheader\n  const drawerIcon = preRenderedIcon || fallbackIcon\n  // Small icon for compact display\n  const displayIcon = preRenderedSmallIcon ?? drawerIcon\n\n  // Set up the hierarchy modal\n  const [HierarchyModal, , { openModal }] = useHierarchyModal({\n    hierarchyCollectionSlug: hierarchyCollectionSlug || '',\n    Icon: drawerIcon,\n  })\n\n  // Lazy-mount the modal so its column browser doesn't eagerly fetch root items\n  // for every cell in the list view. Only mount once the user opens it.\n  const [hasMountedModal, setHasMountedModal] = useState(false)\n  const shouldOpenAfterMountRef = useRef(false)\n\n  const handleOpenModal = useCallback(() => {\n    if (hasMountedModal) {\n      openModal()\n      return\n    }\n    shouldOpenAfterMountRef.current = true\n    setHasMountedModal(true)\n  }, [hasMountedModal, openModal])\n\n  // Open the modal once it has mounted (state update from handleOpenModal).\n  useEffect(() => {\n    if (hasMountedModal && shouldOpenAfterMountRef.current) {\n      shouldOpenAfterMountRef.current = false\n      openModal()\n    }\n  }, [hasMountedModal, openModal])\n\n  // Fetch relationship data when visible\n  useEffect(() => {\n    // Reset tracking if data changed\n    if (prevCellDataRef.current !== cellDataFromProps) {\n      prevCellDataRef.current = cellDataFromProps\n      hasRequestedRef.current = false\n    }\n\n    if (\n      (cellDataFromProps || typeof cellDataFromProps === 'number') &&\n      isAboveViewport &&\n      !hasRequestedRef.current &&\n      typeof relationTo === 'string'\n    ) {\n      const formattedValues: Value[] = []\n      const arrayCellData = Array.isArray(cellDataFromProps)\n        ? cellDataFromProps\n        : [cellDataFromProps]\n\n      arrayCellData.forEach((cell) => {\n        if (typeof cell === 'object' && 'relationTo' in cell && 'value' in cell) {\n          formattedValues.push(cell)\n        }\n        if (typeof cell === 'number' || typeof cell === 'string') {\n          formattedValues.push({\n            relationTo,\n            value: cell,\n          })\n        }\n      })\n\n      getRelationships(formattedValues)\n      hasRequestedRef.current = true\n      setValues(formattedValues)\n    }\n  }, [cellDataFromProps, relationTo, isAboveViewport, getRelationships])\n\n  // Get current selection IDs for the modal\n  const initialSelections = useMemo(() => {\n    if (!cellDataFromProps) {\n      return []\n    }\n    const data = Array.isArray(cellDataFromProps) ? cellDataFromProps : [cellDataFromProps]\n    return data.map((item) => {\n      if (typeof item === 'object' && 'value' in item) {\n        return item.value\n      }\n      return item\n    }) as (number | string)[]\n  }, [cellDataFromProps])\n\n  // Handle save from modal\n  const handleSave = useCallback(\n    async ({\n      closeModal,\n      selections,\n    }: {\n      closeModal: () => void\n      selections: Map<number | string, SelectionWithPath>\n    }) => {\n      // Get selected IDs\n      const selectedIds = Array.from(selections.keys())\n      const newValue = hasMany ? selectedIds : (selectedIds[0] ?? null)\n\n      // Update the document via API\n      try {\n        const response = await fetch(\n          `${config.serverURL}${config.routes.api}/${collectionSlug}/${rowData.id}`,\n          {\n            body: JSON.stringify({\n              [field.name]: newValue,\n            }),\n            credentials: 'include',\n            headers: {\n              'Content-Type': 'application/json',\n            },\n            method: 'PATCH',\n          },\n        )\n\n        if (response.ok && typeof relationTo === 'string') {\n          // Update local state with new selection to avoid page reload\n          const newValues: Value[] = selectedIds.map((id) => ({\n            relationTo,\n            value: id,\n          }))\n          setValues(newValues)\n\n          // Request the new relationship docs to update the display\n          if (newValues.length > 0) {\n            getRelationships(newValues)\n          }\n        }\n      } catch (_error) {\n        // swallow error and close modal anyway, user can try again\n      }\n\n      closeModal()\n    },\n    [collectionSlug, config, field.name, hasMany, rowData, relationTo, getRelationships],\n  )\n\n  // Build display labels\n  const labels = useMemo(() => {\n    return values.map(({ relationTo: rel, value }) => {\n      const document = documents[rel]?.[value]\n      const relatedCollection = getEntityConfig({ collectionSlug: rel })\n\n      return formatDocTitle({\n        collectionConfig: relatedCollection,\n        data: document || null,\n        dateFormat: config.admin.dateFormat,\n        fallback: `${t('general:untitled')} - ID: ${value}`,\n        i18n,\n      })\n    })\n  }, [values, documents, getEntityConfig, config.admin.dateFormat, t, i18n])\n\n  const displayText = labels.length > 0 ? labels.join(', ') : t('general:none')\n  const isLoading =\n    values.length > 0 &&\n    values.some(({ relationTo: rel, value }) => documents[rel]?.[value] === null)\n\n  return (\n    <div className={baseClass} ref={intersectionRef}>\n      <Button\n        buttonStyle=\"secondary\"\n        className={`${baseClass}__button`}\n        icon={displayIcon}\n        iconPosition=\"left\"\n        margin={false}\n        onClick={handleOpenModal}\n        size=\"medium\"\n      >\n        {isLoading ? `${t('general:loading')}...` : displayText}\n      </Button>\n      {hierarchyCollectionSlug && hasMountedModal && (\n        <HierarchyModal\n          hasMany={hasMany}\n          initialSelections={initialSelections}\n          onSave={handleSave}\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useEffect","useMemo","useRef","useState","toast","useIntersect","FolderIcon","TagIcon","useConfig","useTranslation","canUseDOM","formatDocTitle","getEffectiveHierarchyCollections","getHierarchyCollectionRestrictions","getHierarchyListURL","Button","HierarchyActionsMenu","useHierarchyModal","useListRelationships","baseClass","HierarchyCell","cellData","cellDataFromProps","collectionSlug","customCellProps","field","rowData","relationTo","undefined","hasMany","config","getEntityConfig","intersectionRef","entry","values","setValues","documents","getRelationships","hasRequestedRef","prevCellDataRef","i18n","t","isAboveViewport","boundingClientRect","top","window","innerHeight","hierarchyCollectionSlug","hierarchyCollectionConfig","hierarchyConfig","relatedCollectionSlugs","typeFieldName","collectionConfig","filterByCollection","allowedCollections","Array","isArray","disabledIds","id","Set","preRenderedIcon","hierarchyIcon","preRenderedSmallIcon","hierarchySmallIcon","fallbackIcon","IconComponent","allowHasMany","_jsx","drawerIcon","displayIcon","HierarchyModal","openModal","Icon","hasMountedModal","setHasMountedModal","shouldOpenAfterMountRef","handleOpenModal","current","formattedValues","arrayCellData","forEach","cell","push","value","initialSelections","map","saveIds","selectedIds","response","fetch","serverURL","routes","api","body","JSON","stringify","name","credentials","headers","method","ok","responseData","json","catch","errorMessage","errors","message","error","newValues","length","handleSave","closeModal","selections","from","keys","labels","rel","document","relatedCollection","data","dateFormat","admin","fallback","displayText","join","isLoading","some","currentId","hasSingleSelection","hierarchyLabel","singular","handleRemove","goTo","href","adminRoute","parentFieldName","parentID","label","_jsxs","className","ref","hasActions","onMove","onRemove","renderTrigger","triggerProps","buttonStyle","extraButtonProps","icon","iconPosition","margin","onClick","selected","size","tooltip","confirmLabel","onSave"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Hierarchy/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, RelationshipFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport type { SelectionWithPath } from '../../../../Hierarchy/Modal/types.js'\n\nimport { useIntersect } from '../../../../../hooks/useIntersect.js'\nimport { FolderIcon } from '../../../../../icons/Folder/index.js'\nimport { TagIcon } from '../../../../../icons/Tag/index.js'\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport { canUseDOM } from '../../../../../utilities/canUseDOM.js'\nimport { formatDocTitle } from '../../../../../utilities/formatDocTitle/index.js'\nimport {\n  getEffectiveHierarchyCollections,\n  getHierarchyCollectionRestrictions,\n} from '../../../../../utilities/hierarchyCollectionRestrictions.js'\nimport { getHierarchyListURL } from '../../../../../views/HierarchyList/getHierarchyListURL.js'\nimport { Button } from '../../../../Button/index.js'\nimport { HierarchyActionsMenu } from '../../../../Hierarchy/ActionsMenu/index.js'\nimport { useHierarchyModal } from '../../../../Hierarchy/Modal/useHierarchyModal.js'\nimport { useListRelationships } from '../../../RelationshipProvider/index.js'\nimport './index.css'\n\ntype Value = { relationTo: string; value: number | string }\nconst baseClass = 'hierarchy-cell'\n\nexport type HierarchyCellProps = DefaultCellComponentProps<RelationshipFieldClient>\n\nexport const HierarchyCell: React.FC<HierarchyCellProps> = ({\n  cellData: cellDataFromProps,\n  collectionSlug,\n  customCellProps,\n  field,\n  rowData,\n}) => {\n  const relationTo = 'relationTo' in field ? field.relationTo : undefined\n  const hasMany = field.hasMany ?? false\n\n  const { config, getEntityConfig } = useConfig()\n  const [intersectionRef, entry] = useIntersect()\n  const [values, setValues] = useState<Value[]>([])\n  const { documents, getRelationships } = useListRelationships()\n  const hasRequestedRef = useRef(false)\n  const prevCellDataRef = useRef<typeof cellDataFromProps>(undefined)\n  const { i18n, t } = useTranslation()\n\n  const isAboveViewport = canUseDOM ? entry?.boundingClientRect?.top < window.innerHeight : false\n\n  // Get the hierarchy collection config\n  const hierarchyCollectionSlug = typeof relationTo === 'string' ? relationTo : undefined\n  const hierarchyCollectionConfig = hierarchyCollectionSlug\n    ? getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n    : undefined\n\n  // Use pre-rendered icon from server if available, otherwise determine on client\n  const { hierarchyConfig, relatedCollectionSlugs, typeFieldName } = useMemo(\n    () => getHierarchyCollectionRestrictions({ collectionConfig: hierarchyCollectionConfig }),\n    [hierarchyCollectionConfig],\n  )\n\n  const filterByCollection = useMemo(() => {\n    if (!hierarchyCollectionSlug) {\n      return undefined\n    }\n    if (collectionSlug !== hierarchyCollectionSlug) {\n      return [collectionSlug]\n    }\n    if (!typeFieldName) {\n      return undefined\n    }\n    const allowedCollections = rowData[typeFieldName]\n\n    return getEffectiveHierarchyCollections({\n      allowedCollections: Array.isArray(allowedCollections)\n        ? (allowedCollections as string[])\n        : undefined,\n      relatedCollectionSlugs,\n    })\n  }, [collectionSlug, hierarchyCollectionSlug, relatedCollectionSlugs, rowData, typeFieldName])\n\n  const disabledIds = useMemo(\n    () =>\n      collectionSlug === hierarchyCollectionSlug && rowData.id !== undefined\n        ? new Set([rowData.id])\n        : undefined,\n    [collectionSlug, hierarchyCollectionSlug, rowData.id],\n  )\n\n  // Pre-rendered icons from server (supports custom icons)\n  const preRenderedIcon = customCellProps?.hierarchyIcon as React.ReactNode | undefined\n  const preRenderedSmallIcon = customCellProps?.hierarchySmallIcon as React.ReactNode | undefined\n\n  // Fallback icon for client-side rendering\n  const fallbackIcon = useMemo(() => {\n    if (preRenderedIcon) {\n      return null // Don't need fallback if we have pre-rendered icon\n    }\n    // Default based on allowHasMany: false = folder-like, true = tag-like\n    const IconComponent = hierarchyConfig?.allowHasMany === false ? FolderIcon : TagIcon\n    return <IconComponent />\n  }, [hierarchyConfig, preRenderedIcon])\n\n  // Full icon for modal subheader\n  const drawerIcon = preRenderedIcon || fallbackIcon\n  // Small icon for compact display\n  const displayIcon = preRenderedSmallIcon ?? drawerIcon\n\n  // Set up the hierarchy modal\n  const [HierarchyModal, , { openModal }] = useHierarchyModal({\n    disabledIds,\n    filterByCollection,\n    hierarchyCollectionSlug: hierarchyCollectionSlug || '',\n    Icon: drawerIcon,\n  })\n\n  // Lazy-mount the modal so its column browser doesn't eagerly fetch root items\n  // for every cell in the list view. Only mount once the user opens it.\n  const [hasMountedModal, setHasMountedModal] = useState(false)\n  const shouldOpenAfterMountRef = useRef(false)\n\n  const handleOpenModal = useCallback(() => {\n    if (hasMountedModal) {\n      openModal()\n      return\n    }\n    shouldOpenAfterMountRef.current = true\n    setHasMountedModal(true)\n  }, [hasMountedModal, openModal])\n\n  // Open the modal once it has mounted (state update from handleOpenModal).\n  useEffect(() => {\n    if (hasMountedModal && shouldOpenAfterMountRef.current) {\n      shouldOpenAfterMountRef.current = false\n      openModal()\n    }\n  }, [hasMountedModal, openModal])\n\n  // Fetch relationship data when visible\n  useEffect(() => {\n    // Reset tracking if data changed\n    if (prevCellDataRef.current !== cellDataFromProps) {\n      prevCellDataRef.current = cellDataFromProps\n      hasRequestedRef.current = false\n    }\n\n    if (\n      (cellDataFromProps || typeof cellDataFromProps === 'number') &&\n      isAboveViewport &&\n      !hasRequestedRef.current &&\n      typeof relationTo === 'string'\n    ) {\n      const formattedValues: Value[] = []\n      const arrayCellData = Array.isArray(cellDataFromProps)\n        ? cellDataFromProps\n        : [cellDataFromProps]\n\n      arrayCellData.forEach((cell) => {\n        if (typeof cell === 'object' && 'relationTo' in cell && 'value' in cell) {\n          formattedValues.push(cell)\n        }\n        if (typeof cell === 'number' || typeof cell === 'string') {\n          formattedValues.push({\n            relationTo,\n            value: cell,\n          })\n        }\n      })\n\n      getRelationships(formattedValues)\n      hasRequestedRef.current = true\n      setValues(formattedValues)\n    }\n  }, [cellDataFromProps, relationTo, isAboveViewport, getRelationships])\n\n  // Read from local state so the picker reflects in-place moves and removes\n  const initialSelections = useMemo(() => values.map(({ value }) => value), [values])\n\n  const saveIds = useCallback(\n    async (selectedIds: (number | string)[]) => {\n      try {\n        const response = await fetch(\n          `${config.serverURL}${config.routes.api}/${collectionSlug}/${rowData.id}`,\n          {\n            body: JSON.stringify({\n              [field.name]: hasMany ? selectedIds : (selectedIds[0] ?? null),\n            }),\n            credentials: 'include',\n            headers: {\n              'Content-Type': 'application/json',\n            },\n            method: 'PATCH',\n          },\n        )\n\n        if (!response.ok) {\n          const responseData = await response.json().catch(() => null)\n          const errorMessage =\n            responseData?.errors?.[0]?.message ||\n            responseData?.error ||\n            responseData?.message ||\n            t('error:unknown')\n\n          toast.error(errorMessage)\n          return false\n        }\n\n        if (typeof relationTo === 'string') {\n          // Update local state with new selection to avoid page reload\n          const newValues: Value[] = selectedIds.map((id) => ({\n            relationTo,\n            value: id,\n          }))\n          setValues(newValues)\n\n          // Request the new relationship docs to update the display\n          if (newValues.length > 0) {\n            getRelationships(newValues)\n          }\n        }\n      } catch {\n        toast.error(t('error:unknown'))\n        return false\n      }\n\n      return true\n    },\n    [collectionSlug, config, field.name, hasMany, rowData, relationTo, getRelationships, t],\n  )\n\n  const handleSave = useCallback(\n    async ({\n      closeModal,\n      selections,\n    }: {\n      closeModal: () => void\n      selections: Map<number | string, SelectionWithPath>\n    }) => {\n      if (await saveIds(Array.from(selections.keys()))) {\n        closeModal()\n      }\n    },\n    [saveIds],\n  )\n\n  // Build display labels\n  const labels = useMemo(() => {\n    return values.map(({ relationTo: rel, value }) => {\n      const document = documents[rel]?.[value]\n      const relatedCollection = getEntityConfig({ collectionSlug: rel })\n\n      return formatDocTitle({\n        collectionConfig: relatedCollection,\n        data: document || null,\n        dateFormat: config.admin.dateFormat,\n        fallback: `${t('general:untitled')} - ID: ${value}`,\n        i18n,\n      })\n    })\n  }, [values, documents, getEntityConfig, config.admin.dateFormat, t, i18n])\n\n  const displayText = labels.length > 0 ? labels.join(', ') : t('general:none')\n  const isLoading =\n    values.length > 0 &&\n    values.some(({ relationTo: rel, value }) => documents[rel]?.[value] === null)\n  const currentId = !hasMany && values.length === 1 ? values[0].value : undefined\n  const hasSingleSelection = typeof currentId === 'number' || typeof currentId === 'string'\n  const hierarchyLabel =\n    getTranslation(\n      hierarchyCollectionConfig?.labels?.singular || hierarchyCollectionSlug || '',\n      i18n,\n    ) || hierarchyCollectionSlug\n\n  const handleRemove = useCallback(() => saveIds([]), [saveIds])\n\n  const goTo = useMemo(\n    () =>\n      hasSingleSelection && hierarchyCollectionSlug\n        ? {\n            name: displayText,\n            href: getHierarchyListURL({\n              adminRoute: config.routes.admin,\n              collectionSlug: hierarchyCollectionSlug,\n              parentFieldName: hierarchyConfig?.parentFieldName,\n              parentID: currentId,\n            }),\n          }\n        : undefined,\n    [\n      config.routes.admin,\n      currentId,\n      displayText,\n      hasSingleSelection,\n      hierarchyCollectionSlug,\n      hierarchyConfig?.parentFieldName,\n    ],\n  )\n\n  const label = isLoading ? `${t('general:loading')}...` : displayText\n\n  return (\n    <div className={baseClass} ref={intersectionRef}>\n      <HierarchyActionsMenu\n        goTo={goTo}\n        hasActions={hasSingleSelection}\n        hierarchyLabel={hierarchyLabel}\n        onMove={handleOpenModal}\n        onRemove={handleRemove}\n        renderTrigger={(triggerProps) => (\n          <Button\n            aria-label={triggerProps ? label : undefined}\n            buttonStyle=\"secondary\"\n            className={`${baseClass}__button`}\n            extraButtonProps={triggerProps?.extraButtonProps}\n            icon={displayIcon}\n            iconPosition=\"left\"\n            margin={false}\n            onClick={triggerProps?.onClick ?? handleOpenModal}\n            selected={triggerProps?.selected}\n            size=\"medium\"\n            tooltip={triggerProps ? displayText : undefined}\n          >\n            {triggerProps ? <span className={`${baseClass}__truncate`}>{label}</span> : label}\n          </Button>\n        )}\n      />\n      {hierarchyCollectionSlug && hasMountedModal && (\n        <HierarchyModal\n          confirmLabel={t('general:confirm')}\n          hasMany={hasMany}\n          initialSelections={initialSelections}\n          onSave={handleSave}\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Table/DefaultCell/fields/JSON/index.css

@@ -1,6 +1,5 @@
 @layer payload-default {
   .json-cell {
-    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/Table/DefaultCell/fields/Status/index.css

@@ -5,7 +5,6 @@
     justify-content: center;
     padding: 0 var(--spacer-1);
     border-radius: var(--radius-medium);
-    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/Table/index.css

@@ -77,7 +77,7 @@
 
     td.cell--linked > :is(a, button),
     .cell-link {
-      font-weight: var(--text-body-medium-strong-font-weight);
+      font-weight: var(--text-body-medium-bold-font-weight);
       text-decoration-line: underline;
       text-decoration-style: solid;
       text-decoration-skip-ink: none;

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 {

package/dist/elements/Tabs/index.css

@@ -9,6 +9,7 @@
 
   .tabs__tabs {
     display: inline-flex;
+    gap: var(--spacer-3);
     min-width: 100%;
     vertical-align: bottom;
     position: relative;
@@ -24,14 +25,13 @@
     align-items: center;
     justify-content: center;
     gap: var(--spacer-1);
-    padding: var(--spacer-1) var(--spacer-2);
+    padding: var(--spacer-1) 0;
     margin: 0;
     margin-bottom: var(--spacer-2);
     cursor: pointer;
     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);
@@ -42,8 +42,8 @@
   .tabs__tab-button:after {
     content: '';
     position: absolute;
-    left: var(--spacer-2);
-    right: var(--spacer-2);
+    left: 0;
+    right: 0;
     bottom: calc(-1 * var(--spacer-2) - 1px);
     height: 3px;
     background: var(--color-icon-brand);
@@ -66,7 +66,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);
   }
 

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

@@ -3,7 +3,9 @@ import './index.css';
 export type TabsTab<TValue extends string = string> = {
     disabled?: boolean;
     hidden?: boolean;
+    id?: string;
     label: React.ReactNode;
+    panelID?: string;
     value: TValue;
 };
 export type TabsProps<TValue extends string = string> = {
@@ -25,8 +27,10 @@ export declare const TabButton: React.FC<{
     disabled?: boolean;
     hasError?: boolean;
     hidden?: boolean;
+    id?: string;
     isActive?: boolean;
     modifierClassName?: string;
     onClick: () => void;
+    panelID?: string;
 }>;
 //# sourceMappingURL=index.d.ts.map

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,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"}
+{"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,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,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,sBAkBnB,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,CA6CA,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,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAyCA,CAAA"}

package/dist/elements/Tabs/index.js

@@ -15,8 +15,10 @@ export const Tabs = ({
     children: tabs.map(tab => /*#__PURE__*/_jsx(TabButton, {
       disabled: tab.disabled,
       hidden: tab.hidden,
+      id: tab.id,
       isActive: tab.value === value,
       onClick: () => onChange(tab.value),
+      panelID: tab.panelID,
       children: tab.label
     }, tab.value))
   });
@@ -33,13 +35,30 @@ export const TabsList = ({
       className: [`${baseClass}__tabs-wrap`, tabsWrapClassName].filter(Boolean).join(' '),
       children: /*#__PURE__*/_jsx("div", {
         className: [`${baseClass}__tabs`, tabsClassName].filter(Boolean).join(' '),
+        onKeyDown: event => {
+          if (event.altKey || event.ctrlKey || event.metaKey || !['ArrowLeft', 'ArrowRight', 'End', 'Home'].includes(event.key)) {
+            return;
+          }
+          const tabs = Array.from(event.currentTarget.querySelectorAll('[role="tab"]')).filter(tab => !tab.disabled && tab.getClientRects().length > 0);
+          const index = tabs.indexOf(event.target);
+          if (index === -1) {
+            return;
+          }
+          event.preventDefault();
+          const isRTL = getComputedStyle(event.currentTarget).direction === 'rtl';
+          const direction = (event.key === 'ArrowRight' ? 1 : -1) * (isRTL ? -1 : 1);
+          const nextIndex = event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1 : (index + direction + tabs.length) % tabs.length;
+          tabs[nextIndex]?.focus();
+        },
         role: "tablist",
+        tabIndex: -1,
         children: children
       })
     })
   });
 };
 export const TabButton = ({
+  id,
   children,
   className,
   disabled,
@@ -47,14 +66,24 @@ export const TabButton = ({
   hidden,
   isActive,
   modifierClassName,
-  onClick
+  onClick,
+  panelID
 }) => {
   return /*#__PURE__*/_jsx("button", {
+    "aria-controls": panelID,
     "aria-selected": isActive,
     className: [`${baseClass}__tab-button`, className, hasError && `${baseClass}__tab-button--has-error`, hasError && modifierClassName && `${modifierClassName}--has-error`, isActive && `${baseClass}__tab-button--active`, isActive && modifierClassName && `${modifierClassName}--active`, hidden && `${baseClass}__tab-button--hidden`, hidden && modifierClassName && `${modifierClassName}--hidden`].filter(Boolean).join(' '),
     disabled: disabled,
+    id: id,
     onClick: onClick,
+    onFocus: event => {
+      event.currentTarget.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    },
     role: "tab",
+    tabIndex: isActive && !hidden ? 0 : -1,
     type: "button",
     children: children
   });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","Tabs","className","onChange","tabs","value","_jsx","TabsList","map","tab","TabButton","disabled","hidden","isActive","onClick","label","children","tabsClassName","tabsWrapClassName","filter","Boolean","join","role","hasError","modifierClassName","type"],"sources":["../../../src/elements/Tabs/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'tabs'\n\nexport type TabsTab<TValue extends string = string> = {\n  disabled?: boolean\n  hidden?: boolean\n  label: React.ReactNode\n  value: TValue\n}\n\nexport type TabsProps<TValue extends string = string> = {\n  className?: string\n  onChange: (value: TValue) => void\n  tabs: TabsTab<TValue>[]\n  value: TValue\n}\n\nexport const Tabs = <TValue extends string = string>({\n  className,\n  onChange,\n  tabs,\n  value,\n}: TabsProps<TValue>) => {\n  return (\n    <TabsList className={className}>\n      {tabs.map((tab) => (\n        <TabButton\n          disabled={tab.disabled}\n          hidden={tab.hidden}\n          isActive={tab.value === value}\n          key={tab.value}\n          onClick={() => onChange(tab.value)}\n        >\n          {tab.label}\n        </TabButton>\n      ))}\n    </TabsList>\n  )\n}\n\nexport const TabsList: React.FC<{\n  children: React.ReactNode\n  className?: string\n  tabsClassName?: string\n  tabsWrapClassName?: string\n}> = ({ children, className, tabsClassName, tabsWrapClassName }) => {\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <div className={[`${baseClass}__tabs-wrap`, tabsWrapClassName].filter(Boolean).join(' ')}>\n        <div\n          className={[`${baseClass}__tabs`, tabsClassName].filter(Boolean).join(' ')}\n          role=\"tablist\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const TabButton: React.FC<{\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  hasError?: boolean\n  hidden?: boolean\n  isActive?: boolean\n  modifierClassName?: string\n  onClick: () => void\n}> = ({\n  children,\n  className,\n  disabled,\n  hasError,\n  hidden,\n  isActive,\n  modifierClassName,\n  onClick,\n}) => {\n  return (\n    <button\n      aria-selected={isActive}\n      className={[\n        `${baseClass}__tab-button`,\n        className,\n        hasError && `${baseClass}__tab-button--has-error`,\n        hasError && modifierClassName && `${modifierClassName}--has-error`,\n        isActive && `${baseClass}__tab-button--active`,\n        isActive && modifierClassName && `${modifierClassName}--active`,\n        hidden && `${baseClass}__tab-button--hidden`,\n        hidden && modifierClassName && `${modifierClassName}--hidden`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={disabled}\n      onClick={onClick}\n      role=\"tab\"\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAgBlB,OAAO,MAAMC,IAAA,GAAOA,CAAiC;EACnDC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC;AAAK,CACa;EAClB,oBACEC,IAAA,CAACC,QAAA;IAASL,SAAA,EAAWA,SAAA;cAClBE,IAAA,CAAKI,GAAG,CAAEC,GAAA,iBACTH,IAAA,CAACI,SAAA;MACCC,QAAA,EAAUF,GAAA,CAAIE,QAAQ;MACtBC,MAAA,EAAQH,GAAA,CAAIG,MAAM;MAClBC,QAAA,EAAUJ,GAAA,CAAIJ,KAAK,KAAKA,KAAA;MAExBS,OAAA,EAASA,CAAA,KAAMX,QAAA,CAASM,GAAA,CAAIJ,KAAK;gBAEhCI,GAAA,CAAIM;OAHAN,GAAA,CAAIJ,KAAK;;AAQxB;AAEA,OAAO,MAAME,QAAA,GAKRA,CAAC;EAAES,QAAQ;EAAEd,SAAS;EAAEe,aAAa;EAAEC;AAAiB,CAAE;EAC7D,oBACEZ,IAAA,CAAC;IAAIJ,SAAA,EAAW,CAACF,SAAA,EAAWE,SAAA,CAAU,CAACiB,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAC1D,aAAAf,IAAA,CAAC;MAAIJ,SAAA,EAAW,CAAC,GAAGF,SAAA,aAAsB,EAAEkB,iBAAA,CAAkB,CAACC,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;gBAClF,aAAAf,IAAA,CAAC;QACCJ,SAAA,EAAW,CAAC,GAAGF,SAAA,QAAiB,EAAEiB,aAAA,CAAc,CAACE,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;QACtEC,IAAA,EAAK;kBAEJN;;;;AAKX;AAEA,OAAO,MAAMN,SAAA,GASRA,CAAC;EACJM,QAAQ;EACRd,SAAS;EACTS,QAAQ;EACRY,QAAQ;EACRX,MAAM;EACNC,QAAQ;EACRW,iBAAiB;EACjBV;AAAO,CACR;EACC,oBACER,IAAA,CAAC;IACC,iBAAeO,QAAA;IACfX,SAAA,EAAW,CACT,GAAGF,SAAA,cAAuB,EAC1BE,SAAA,EACAqB,QAAA,IAAY,GAAGvB,SAAA,yBAAkC,EACjDuB,QAAA,IAAYC,iBAAA,IAAqB,GAAGA,iBAAA,aAA8B,EAClEX,QAAA,IAAY,GAAGb,SAAA,sBAA+B,EAC9Ca,QAAA,IAAYW,iBAAA,IAAqB,GAAGA,iBAAA,UAA2B,EAC/DZ,MAAA,IAAU,GAAGZ,SAAA,sBAA+B,EAC5CY,MAAA,IAAUY,iBAAA,IAAqB,GAAGA,iBAAA,UAA2B,CAC9D,CACEL,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRV,QAAA,EAAUA,QAAA;IACVG,OAAA,EAASA,OAAA;IACTQ,IAAA,EAAK;IACLG,IAAA,EAAK;cAEJT;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","Tabs","className","onChange","tabs","value","_jsx","TabsList","map","tab","TabButton","disabled","hidden","id","isActive","onClick","panelID","label","children","tabsClassName","tabsWrapClassName","filter","Boolean","join","onKeyDown","event","altKey","ctrlKey","metaKey","includes","key","Array","from","currentTarget","querySelectorAll","getClientRects","length","index","indexOf","target","preventDefault","isRTL","getComputedStyle","direction","nextIndex","focus","role","tabIndex","hasError","modifierClassName","onFocus","scrollIntoView","block","inline","type"],"sources":["../../../src/elements/Tabs/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'tabs'\n\nexport type TabsTab<TValue extends string = string> = {\n  disabled?: boolean\n  hidden?: boolean\n  id?: string\n  label: React.ReactNode\n  panelID?: string\n  value: TValue\n}\n\nexport type TabsProps<TValue extends string = string> = {\n  className?: string\n  onChange: (value: TValue) => void\n  tabs: TabsTab<TValue>[]\n  value: TValue\n}\n\nexport const Tabs = <TValue extends string = string>({\n  className,\n  onChange,\n  tabs,\n  value,\n}: TabsProps<TValue>) => {\n  return (\n    <TabsList className={className}>\n      {tabs.map((tab) => (\n        <TabButton\n          disabled={tab.disabled}\n          hidden={tab.hidden}\n          id={tab.id}\n          isActive={tab.value === value}\n          key={tab.value}\n          onClick={() => onChange(tab.value)}\n          panelID={tab.panelID}\n        >\n          {tab.label}\n        </TabButton>\n      ))}\n    </TabsList>\n  )\n}\n\nexport const TabsList: React.FC<{\n  children: React.ReactNode\n  className?: string\n  tabsClassName?: string\n  tabsWrapClassName?: string\n}> = ({ children, className, tabsClassName, tabsWrapClassName }) => {\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <div className={[`${baseClass}__tabs-wrap`, tabsWrapClassName].filter(Boolean).join(' ')}>\n        <div\n          className={[`${baseClass}__tabs`, tabsClassName].filter(Boolean).join(' ')}\n          onKeyDown={(event) => {\n            if (\n              event.altKey ||\n              event.ctrlKey ||\n              event.metaKey ||\n              !['ArrowLeft', 'ArrowRight', 'End', 'Home'].includes(event.key)\n            ) {\n              return\n            }\n\n            const tabs = Array.from(\n              event.currentTarget.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]'),\n            ).filter((tab) => !tab.disabled && tab.getClientRects().length > 0)\n            const index = tabs.indexOf(event.target as HTMLButtonElement)\n\n            if (index === -1) {\n              return\n            }\n\n            event.preventDefault()\n            const isRTL = getComputedStyle(event.currentTarget).direction === 'rtl'\n            const direction = (event.key === 'ArrowRight' ? 1 : -1) * (isRTL ? -1 : 1)\n            const nextIndex =\n              event.key === 'Home'\n                ? 0\n                : event.key === 'End'\n                  ? tabs.length - 1\n                  : (index + direction + tabs.length) % tabs.length\n\n            tabs[nextIndex]?.focus()\n          }}\n          role=\"tablist\"\n          tabIndex={-1}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const TabButton: React.FC<{\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  hasError?: boolean\n  hidden?: boolean\n  id?: string\n  isActive?: boolean\n  modifierClassName?: string\n  onClick: () => void\n  panelID?: string\n}> = ({\n  id,\n  children,\n  className,\n  disabled,\n  hasError,\n  hidden,\n  isActive,\n  modifierClassName,\n  onClick,\n  panelID,\n}) => {\n  return (\n    <button\n      aria-controls={panelID}\n      aria-selected={isActive}\n      className={[\n        `${baseClass}__tab-button`,\n        className,\n        hasError && `${baseClass}__tab-button--has-error`,\n        hasError && modifierClassName && `${modifierClassName}--has-error`,\n        isActive && `${baseClass}__tab-button--active`,\n        isActive && modifierClassName && `${modifierClassName}--active`,\n        hidden && `${baseClass}__tab-button--hidden`,\n        hidden && modifierClassName && `${modifierClassName}--hidden`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={disabled}\n      id={id}\n      onClick={onClick}\n      onFocus={(event) => {\n        event.currentTarget.scrollIntoView({ block: 'nearest', inline: 'nearest' })\n      }}\n      role=\"tab\"\n      tabIndex={isActive && !hidden ? 0 : -1}\n      type=\"button\"\n    >\n      {children}\n    </button>\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/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);
@@ -95,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);
@@ -106,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/Tooltip/index.css

@@ -20,7 +20,6 @@
     padding-block: var(--spacer-1);
     padding-inline: var(--spacer-2);
     color: var(--color-text-ontooltip);
-    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/Tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoE,MAAM,OAAO,CAAA;AAGxF,OAAO,aAAa,CAAA;AAOpB,KAAK,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;AAE/C,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAuCD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAoPnC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoE,MAAM,OAAO,CAAA;AAGxF,OAAO,aAAa,CAAA;AAOpB,KAAK,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;AAE/C,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAuCD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsPnC,CAAA"}

package/dist/elements/Tooltip/index.js

@@ -157,6 +157,7 @@ export const Tooltip = props => {
       return;
     }
     const hidden = isTriggerHidden(trigger) || Boolean(middlewareData.hide?.referenceHidden);
+    floatingElement.style.setProperty('--tooltip-x', `${x}px`);
     Object.assign(floatingElement.style, {
       left: `${x}px`,
       top: `${y}px`,