From bcbb70fb0c345f573d08f0186da6ed6cef54483a Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sat, 2 Dec 2023 00:06:37 +0000
Subject: [PATCH 001/163] feat: studio facelift

Co-authored by: Pedro Bonamin <pedro@sanity.io>
Co-authored by: Nina Andal Aarvik <nina@sanity.io>
---
 .eslintrc.cjs                                 |  34 +++
 dev/design-studio/package.json                |   4 +-
 .../assetSources/imageAssetSource.tsx         |  14 +-
 dev/test-studio/components/formComponents.tsx |   7 +
 .../actions/TestCustomComponentAction.tsx     |  21 +-
 dev/test-studio/package.json                  |   4 +-
 dev/test-studio/sanity.config.ts              |   2 +
 dev/test-studio/schema/book.ts                |  12 +
 examples/ecommerce-studio/package.json        |   2 +-
 .../@sanity/portable-text-editor/package.json |   2 +-
 packages/@sanity/vision/package.json          |   4 +-
 .../src/components/VisionGui.styled.tsx       |   6 +-
 .../vision/src/components/VisionGui.tsx       |  27 +-
 packages/sanity/package.json                  |   4 +-
 .../changeIndicators/ElementWithChangeBar.tsx |  20 +-
 .../src/core/components/DefaultDocument.tsx   |  20 +-
 .../InsufficientPermissionsMessage.tsx        |   6 +-
 .../src/core/components/IntentButton.tsx      |   9 +-
 .../src/core/components/StatusButton.tsx      | 124 +++------
 .../src/core/components/TooltipOfDisabled.tsx |  25 +-
 .../components/collapseMenu/CollapseMenu.tsx  |  26 +-
 .../collapseMenu/CollapseMenuButton.tsx       |   6 +-
 .../collapseMenu/CollapseOverflowMenu.tsx     |   3 +-
 .../__workshop__/CollapseMenuStory.tsx        |  15 +-
 .../collapseTabList/CollapseTabList.tsx       | 152 +++++++++++
 .../__workshop__/CollapseTabListStory.tsx     |  42 +++
 .../collapseTabList/__workshop__/index.ts     |  14 +
 .../core/components/collapseTabList/index.ts  |   1 +
 .../__workshop__/KitchenSinkStory.tsx         |   3 +-
 .../commandList/__workshop__/PopoverStory.tsx |  17 +-
 .../popoverDialog/PopoverDialog.tsx           |  18 +-
 .../components/previewCard/PreviewCard.tsx    |   4 -
 .../__workshop__/GeneralPreviewStory.tsx      |  13 +-
 .../__workshop__/PortableTextPreviewStory.tsx |  11 +-
 .../previews/_common/Media.styled.ts          |   6 +-
 .../components/previews/_common/Media.tsx     |   2 +-
 .../src/core/components/previews/constants.ts |  51 ++--
 .../previews/general/CompactPreview.tsx       |  94 +++++++
 .../previews/general/DefaultPreview.tsx       | 113 ++++----
 .../previews/general/DetailPreview.styled.ts  |  10 +-
 .../previews/general/DetailPreview.tsx        |  69 ++---
 .../previews/general/MediaPreview.styled.ts   |   4 +-
 .../previews/general/MediaPreview.tsx         |  66 ++---
 .../src/core/components/previews/index.ts     |   1 +
 .../portableText/BlockImagePreview.styled.tsx |   6 +-
 .../portableText/BlockImagePreview.tsx        |   9 +-
 .../previews/portableText/BlockPreview.tsx    |   8 +-
 .../previews/portableText/InlinePreview.tsx   |   4 +-
 .../previews/template/TemplatePreview.tsx     |   6 +-
 .../src/core/components/previews/types.ts     |   2 +-
 .../__tests__/useRovingFocus.test.tsx         |   3 +-
 .../__workshop__/RovingFocusStory.tsx         |   5 +-
 .../core/components/userAvatar/UserAvatar.tsx |  15 +-
 .../src/core/config/createDefaultIcon.tsx     |   6 +-
 .../src/core/config/document/actions.ts       |   7 +-
 .../sanity/src/core/config/prepareConfig.ts   |   1 +
 .../sanity/src/core/config/studio/types.ts    |   1 +
 packages/sanity/src/core/config/types.ts      |   8 +
 .../__workshop__/DiffErrorBoundaryStory.tsx   |   3 +-
 .../diff/components/ChangeList.styled.tsx     |  10 -
 .../core/field/diff/components/ChangeList.tsx |  26 +-
 .../diff/components/ChangeTitleSegment.tsx    |  19 +-
 .../diff/components/DiffInspectWrapper.tsx    |   6 +-
 .../field/diff/components/DiffTooltip.tsx     |  17 +-
 .../diff/components/FieldChange.styled.tsx    |  11 +-
 .../field/diff/components/FieldChange.tsx     |  58 +++--
 .../diff/components/GroupChange.styled.tsx    |   9 -
 .../field/diff/components/GroupChange.tsx     |  39 +--
 .../core/field/diff/components/MetaInfo.tsx   |   2 +-
 .../core/field/diff/components/NoChanges.tsx  |   2 +-
 .../diff/components/RevertChangesButton.tsx   |   9 +-
 .../types/boolean/diff/BooleanFieldDiff.tsx   |   2 +-
 .../diff/components/Annotation.tsx            |   6 +-
 .../diff/components/InlineObject.tsx          |   6 +-
 .../__workshop__/_common/FilterFieldInput.tsx |   7 +-
 .../__workshop__/_common/FormDebugger.tsx     |   6 +-
 .../form/__workshop__/_common/TypeTester.tsx  |   7 +-
 .../_common/resolvePreviewComponent.tsx       |   3 +-
 .../ActivateOnFocus/ActivateOnFocus.tsx       |   2 +-
 .../sanity/src/core/form/components/Alert.tsx |   2 +-
 .../src/core/form/components/EditPortal.tsx   |   7 +-
 .../form/components/FullscreenSpinner.tsx     |  20 --
 .../core/form/components/SpinnerWithText.tsx  |  15 --
 .../formField/FormFieldBaseHeader.tsx         |   4 +-
 .../formField/FormFieldHeaderText.tsx         |   4 +-
 .../components/formField/FormFieldSet.tsx     |   2 +-
 .../formField/FormFieldSetLegend.tsx          |   2 +-
 .../formField/FormFieldValidationStatus.tsx   |  18 +-
 .../form/components/tagInput/tagInput.tsx     |  18 +-
 .../form/field/actions/FieldActionMenu.tsx    |  28 +-
 .../field/actions/FieldActionMenuGroup.tsx    |  19 +-
 .../field/actions/FieldActionMenuItem.tsx     |   6 +-
 .../CrossDatasetReferenceInput.tsx            |  24 +-
 .../CrossDatasetReferencePreview.styled.tsx   |   5 -
 .../CrossDatasetReferencePreview.tsx          |  57 ++--
 .../DisabledFeatureWarning.tsx                |  17 +-
 .../inputs/DateInputs/base/DateTimeInput.tsx  |   9 +-
 .../DateInputs/base/calendar/Calendar.tsx     |  61 +++--
 .../InvalidValueInput/InvalidValueInput.tsx   |   5 +-
 .../InvalidValueInput/UntypedValueInput.tsx   |   5 +-
 .../form/inputs/ObjectInput/ObjectInput.tsx   |   2 +-
 .../form/inputs/ObjectInput/UnknownFields.tsx |   3 +-
 .../ObjectInput/fieldGroups/GroupTab.tsx      |   3 +-
 .../core/form/inputs/PortableText/Editor.tsx  |  29 ++-
 .../form/inputs/PortableText/InvalidValue.tsx |  12 +-
 .../_common/resolvePreviewComponent.tsx       |   3 +-
 .../customSchema/blockActions.tsx             |  27 +-
 .../inputs/PortableText/object/Annotation.tsx |   8 +-
 .../object/AnnotationToolbarPopover.tsx       |  37 +--
 .../PortableText/object/BlockObject.tsx       |   9 +-
 .../object/BlockObjectActionsMenu.tsx         |  19 +-
 .../PortableText/object/InlineObject.tsx      |   8 +-
 .../object/InlineObjectToolbarPopover.tsx     |  29 +--
 .../object/modals/DialogModal.tsx             |   7 +-
 .../object/modals/PopoverModal.styles.ts      |   5 -
 .../object/modals/PopoverModal.tsx            |   7 +-
 .../inputs/PortableText/text/TextBlock.tsx    |   9 +-
 .../PortableText/toolbar/ActionMenu.tsx       |  35 ++-
 .../PortableText/toolbar/BlockStyleSelect.tsx |  22 +-
 .../PortableText/toolbar/InsertMenu.tsx       |  22 +-
 .../inputs/PortableText/toolbar/Toolbar.tsx   |  45 ++--
 .../inputs/ReferenceInput/CreateButton.tsx    |  36 ++-
 .../ReferenceInput/PreviewReferenceValue.tsx  |  42 ++-
 .../inputs/ReferenceInput/ReferenceField.tsx  |  65 ++---
 .../inputs/ReferenceInput/ReferenceInput.tsx  |   3 +-
 .../inputs/ReferenceInput/ReferenceItem.tsx   |  55 +---
 .../ReferenceInput/ReferencePreview.tsx       | 144 +++-------
 .../src/core/form/inputs/SelectInput.tsx      |   2 +-
 .../src/core/form/inputs/Slug/SlugInput.tsx   |  30 +--
 .../ArrayOfObjectsFunctions.tsx               |  34 +--
 .../ArrayOfObjectsInput/Grid/ErrorItem.tsx    |  13 +-
 .../ArrayOfObjectsInput/Grid/GridItem.tsx     |  46 +---
 .../Grid/IncompatibleItemType.tsx             |   4 +-
 .../arrays/ArrayOfObjectsInput/InsertMenu.tsx |   3 +-
 .../ArrayOfObjectsInput/List/ErrorItem.tsx    |  15 +-
 .../List/IncompatibleItemType.tsx             |   4 +-
 .../ArrayOfObjectsInput/List/PreviewItem.tsx  |  57 +---
 .../ArrayOfPrimitivesFunctions.tsx            |  24 +-
 .../arrays/ArrayOfPrimitivesInput/ItemRow.tsx |   9 +-
 .../form/inputs/arrays/common/DragHandle.tsx  |  20 +-
 .../common/uploadTarget/uploadTarget.tsx      |   2 +-
 .../form/inputs/arrays/layouts/CellLayout.tsx |   2 +-
 .../form/inputs/arrays/layouts/RowLayout.tsx  |   8 +-
 .../files/FileInput/FileActionsMenu.tsx       |  16 +-
 .../form/inputs/files/FileInput/FileInput.tsx |  13 +-
 .../inputs/files/FileInput/FileSkeleton.tsx   |   6 +-
 .../files/FileInput/InvalidFileWarning.tsx    |  17 +-
 .../files/ImageInput/ImageActionsMenu.tsx     |  60 ++---
 .../inputs/files/ImageInput/ImageInput.tsx    |  39 +--
 .../files/ImageInput/ImagePreview.styled.tsx  |   6 +-
 .../inputs/files/ImageInput/ImagePreview.tsx  |  11 +-
 .../files/ImageInput/InvalidImageWarning.tsx  |  17 +-
 .../__workshop__/UploadPlaceholderStory.tsx   |   3 +-
 .../form/inputs/files/common/ActionsMenu.tsx  |  10 +-
 .../FileInputButton/FileInputButton.tsx       |  54 +---
 .../files/common/FileInputButton/styles.ts    |   9 +-
 .../FileInputMenuItem.styled.tsx              |   2 +-
 .../FileInputMenuItem/FileInputMenuItem.tsx   |  84 ++----
 .../inputs/files/common/UploadProgress.tsx    |   8 +-
 .../inputs/files/common/UploadWarning.tsx     |  17 +-
 .../members/array/IncompatibleItemType.tsx    |   6 +-
 .../object/errors/DuplicateKeysAlert.tsx      |   3 +-
 .../object/errors/MissingKeysAlert.tsx        |   3 +-
 .../members/object/errors/MixedArrayAlert.tsx |   3 +-
 .../studio/assetSource/image/AssetThumb.tsx   |  11 +-
 .../assetSource/shared/AssetDeleteDialog.tsx  |  42 ++-
 .../assetSource/shared/AssetUsageDialog.tsx   |   7 +-
 .../assetSource/shared/DefaultSource.tsx      |   3 +-
 packages/sanity/src/core/hooks/index.ts       |   1 +
 .../core/hooks/useDocumentStatusTimeAgo.ts    |  45 ++++
 .../sanity/src/core/i18n/bundles/studio.ts    |   1 -
 .../core/i18n/components/LocaleProvider.tsx   |   4 +-
 .../core/presence/DocumentPreviewPresence.tsx |  17 +-
 .../core/presence/FieldPresence.styled.tsx    |   3 +-
 .../src/core/presence/PresenceTooltip.tsx     |  11 +-
 .../sanity/src/core/presence/constants.ts     |   2 +-
 .../SanityDefaultPreviewStory.tsx             |  15 ++
 .../src/core/preview/__workshop__/index.ts    |   5 +
 .../components/SanityDefaultPreview.tsx       |  22 +-
 .../preview/components/_previewComponents.ts  |   9 +-
 .../__workshop__/ReferenceSchemaStory.tsx     |  10 +-
 .../_legacy/__workshop__/CurrentUserStory.tsx |   5 +-
 .../__workshop__/DocumentPairStory.tsx        |   5 +-
 .../__workshop__/DocumentPermissionStory.tsx  |   2 +-
 .../_legacy/__workshop__/HistoryStory.tsx     |   2 +-
 .../__workshop__/HistoryTimelineStory.tsx     |   7 +-
 .../_legacy/__workshop__/PresenceStory.tsx    |   2 +-
 .../authStore/createLoginComponent.tsx        |  19 +-
 .../sanity/src/core/studio/AuthBoundary.tsx   |   5 +-
 .../sanity/src/core/studio/GlobalStyle.tsx    |  49 +++-
 .../sanity/src/core/studio/Studio.test.tsx    |   7 +-
 .../src/core/studio/StudioErrorBoundary.tsx   |   3 +-
 .../sanity/src/core/studio/StudioLayout.tsx   |  34 ++-
 .../sanity/src/core/studio/StudioProvider.tsx |   8 +-
 .../studio/components/navbar/LogoButton.tsx   |  27 --
 .../studio/components/navbar/NavDrawer.tsx    |  15 +-
 .../studio/components/navbar/SanityLogo.tsx   |  27 ++
 .../studio/components/navbar/StudioLogo.tsx   |   2 +-
 .../studio/components/navbar/StudioNavbar.tsx | 246 +++++++++---------
 .../configIssues/ConfigIssuesButton.tsx       |  30 +--
 .../new-document/NewDocumentButton.style.ts   |   7 +-
 .../navbar/new-document/NewDocumentButton.tsx |  57 ++--
 .../navbar/new-document/NewDocumentList.tsx   |  22 +-
 .../new-document/NewDocumentListOption.tsx    |  16 +-
 .../navbar/presence/PresenceMenu.tsx          |  92 +++----
 .../navbar/presence/PresenceMenuItem.tsx      |  48 ++--
 .../navbar/resources/ResourcesButton.tsx      |  64 ++---
 .../navbar/resources/ResourcesMenuItems.tsx   |  28 +-
 .../resources/helper-functions/types.ts       |   2 +
 .../components/navbar/search/SearchButton.tsx |  36 +++
 .../components/navbar/search/SearchField.tsx  |  71 -----
 .../__workshop__/CommonDateDirectionStory.tsx |   2 +-
 .../__workshop__/CommonDateEqualStory.tsx     |   2 +-
 .../__workshop__/CommonDateRangeStory.tsx     |   4 +-
 .../__workshop__/SearchPopoverStory.tsx       |   1 -
 .../navbar/search/components/NoResults.tsx    |   2 +-
 .../navbar/search/components/SearchError.tsx  |   2 +-
 .../navbar/search/components/SearchHeader.tsx |  18 +-
 .../search/components/SearchPopover.tsx       |  39 +--
 .../navbar/search/components/SortMenu.tsx     |  44 +---
 .../components/common/CustomTextInput.tsx     |   8 +-
 .../search/components/common/FilterLabel.tsx  |   4 +-
 .../components/common/SearchWrapper.tsx       |   2 +-
 .../search/components/filters/Filters.tsx     |   6 +-
 .../filters/addFilter/AddFilterButton.tsx     |   7 +-
 .../filters/addFilter/items/FilterTooltip.tsx |  31 +--
 .../addFilter/items/MenuItemFilter.tsx        |  30 +--
 .../addFilter/items/MenuItemHeader.tsx        |   8 +-
 .../common/FilterPopoverContentHeader.tsx     |   3 +-
 .../filters/debug/_DebugDocumentTypes.tsx     |   2 +-
 .../debug/_DebugDocumentTypesNarrowed.tsx     |   2 +-
 .../filters/debug/_DebugFilterQuery.tsx       |   2 +-
 .../filters/debug/_DebugFilterValues.tsx      |   2 +-
 .../documentTypes/DocumentTypesButton.tsx     |  24 +-
 .../DocumentTypesPopoverContent.tsx           |  11 +-
 .../items/DocumentTypeFilterItem.tsx          |   7 +-
 .../filters/filter/FilterButton.tsx           |   8 +-
 .../components/filters/filter/FilterError.tsx |   2 +-
 .../components/filters/filter/FilterForm.tsx  |   6 +-
 .../filters/filter/OperatorsMenuButton.tsx    |  43 +--
 .../filters/filter/inputs/asset/Asset.tsx     |  13 +-
 .../filter/inputs/asset/AssetSourceError.tsx  |   2 +-
 .../asset/preview/FileReferencePreview.tsx    |   9 +-
 .../asset/preview/ImageReferencePreview.tsx   |  15 +-
 .../inputs/date/ParsedDateTextInput.tsx       |  64 ++---
 .../date/datePicker/calendar/Calendar.tsx     |   6 +-
 .../datePicker/calendar/CalendarHeader.tsx    |  11 +-
 .../filter/inputs/reference/Reference.tsx     |   8 +-
 .../reference/ReferenceAutocomplete.tsx       |   3 +-
 .../filter/inputs/string/StringList.tsx       |  43 ++-
 .../recentSearches/RecentSearches.tsx         |  18 +-
 .../recentSearches/item/RecentSearchItem.tsx  |  11 +-
 .../searchResults/item/DebugOverlay.tsx       |  41 ++-
 .../searchResults/item/SearchResultItem.tsx   |   8 +-
 .../item/SearchResultItemPreview.tsx          |  15 +-
 .../components/navbar/search/constants.ts     |   2 +-
 .../search/definitions/defaultFilters.ts      |   4 +-
 .../studio/components/navbar/search/index.ts  |   2 +-
 .../navbar/tools/ToolCollapseMenu.tsx         |  38 +--
 .../navbar/tools/ToolVerticalMenu.tsx         |   7 +-
 .../components/navbar/userMenu/LocaleMenu.tsx |  11 +-
 .../components/navbar/userMenu/UserMenu.tsx   |  35 +--
 .../workspace/WorkspaceAuth/WorkspaceAuth.tsx |  11 +-
 .../navbar/workspace/WorkspaceMenuButton.tsx  | 224 ++++++++--------
 .../navbar/workspace/WorkspacePreview.tsx     |  34 ++-
 .../studio/screens/CorsOriginErrorScreen.tsx  |  39 ++-
 .../src/core/studio/screens/LoadingScreen.tsx |  23 --
 .../core/studio/screens/NoSourcesScreen.tsx   |   2 +-
 .../src/core/studio/screens/NoToolsScreen.tsx |   2 +-
 .../studio/screens/NotAuthenticatedScreen.tsx |  17 +-
 .../core/studio/screens/NotFoundScreen.tsx    |   3 +-
 .../studio/screens/ToolNotFoundScreen.tsx     |   2 +-
 .../sanity/src/core/studio/screens/index.ts   |   1 -
 .../InitialValueTemplateError.tsx             |  21 +-
 .../schemaErrors/SchemaProblemGroups.tsx      |   2 +-
 .../studio-components-hooks/componentHooks.ts |   1 +
 .../studio/workspaceLoader/ErrorMessage.tsx   |   2 +-
 .../sanity/src/core/theme/_legacy/color.ts    |  18 +-
 .../sanity/src/core/theme/_legacy/theme.ts    |   3 +-
 .../desk/__workshop__/DocumentStateStory.tsx  |   6 +-
 .../plugin/field/CommentsFieldButton.tsx      |  71 ++---
 .../CommentsInspectorFeedbackFooter.tsx       |  11 -
 .../inspector/CommentsInspectorHeader.tsx     |  32 +--
 .../src/components/CommentBreadcrumbs.tsx     |  15 +-
 .../src/components/CommentDeleteDialog.tsx    |  29 ++-
 .../comments/src/components/TextTooltip.tsx   |  32 ---
 .../src/components/avatars/SpacerAvatar.tsx   |   3 +-
 .../src/desk/comments/src/components/index.ts |   1 -
 .../components/list/CommentThreadLayout.tsx   |   8 +-
 .../src/components/list/CommentsListItem.tsx  |   8 +-
 .../list/CommentsListItemContextMenu.tsx      |  39 +--
 .../list/CommentsListItemLayout.tsx           |   2 +-
 .../components/list/CommentsListStatus.tsx    |  17 +-
 .../src/components/mentions/MentionsMenu.tsx  |   7 +-
 .../onboarding/CommentsOnboardingPopover.tsx  |   7 +-
 .../pte/blocks/MentionInlineBlock.tsx         |  13 +-
 .../CommentInputDiscardDialog.tsx             |  30 +--
 .../pte/comment-input/CommentInputInner.tsx   |  53 ++--
 .../src/desk/components/IntentButton.tsx      |   7 +-
 .../MissingDocumentTypesMessage.tsx           |  63 +++++
 .../desk/components/NotPublishedStatus.tsx    |  14 +
 .../ConfirmDeleteDialog.tsx                   |  50 ++--
 .../ConfirmDeleteDialogBody.styles.tsx        |  37 ++-
 .../ConfirmDeleteDialogBody.tsx               |  65 ++---
 .../components/confirmDeleteDialog/index.tsx  |  21 +-
 .../deskTool/NoDocumentTypesScreen.tsx        |   2 +-
 .../components/deskTool/StructureError.tsx    |  11 +-
 .../components/pane/PaneContextMenuButton.tsx |  11 +-
 .../components/pane/PaneFooter.styles.tsx     |   2 +-
 .../components/pane/PaneHeader.styles.tsx     |  35 ++-
 .../src/desk/components/pane/PaneHeader.tsx   |  28 +-
 .../pane/PaneHeaderActionButton.tsx           | 110 ++++----
 .../components/pane/PaneMenuButtonItem.tsx    |  10 +-
 .../__workshop__/ChangeConnectorsStory.tsx    |  27 +-
 .../pane/__workshop__/ExampleStory.tsx        |  52 ++--
 .../DocumentPane/DocumentActions.tsx          |  18 +-
 .../DocumentPane/DocumentViewPanel.tsx        |  13 +-
 .../DocumentPane/ReviewChangesPanel.tsx       |  12 +-
 .../SplitPanesStory/ListPane/ListPane.tsx     |  22 +-
 .../InsufficientPermissionsMessageTooltip.tsx |  10 +-
 .../PaneHeaderCreateButton.tsx                |  22 +-
 .../src/desk/components/paneItem/PaneItem.tsx |  14 +-
 .../components/paneItem/PaneItemPreview.tsx   |  28 +-
 .../DeskRenameToolMenuButtonPopover.tsx       |  14 +-
 .../desk/documentActions/PublishAction.tsx    |   6 +-
 .../document-layout/DocumentLayout.tsx        |  15 +-
 .../DocumentInspectorHeader.tsx               |  19 +-
 .../document/documentInspector/Resizer.tsx    |   1 -
 .../documentPanel/DeletedDocumentBanner.tsx   |   5 +-
 .../documentPanel/ReferenceChangedBanner.tsx  |   9 +-
 .../documentViews/FormHeader.tsx              |  66 +++++
 .../documentPanel/documentViews/FormView.tsx  |  80 +++---
 .../documentPanel/documentViews/styles.ts     |   6 +
 .../header/DocumentHeaderTabs.tsx             |  15 +-
 .../header/DocumentHeaderTitle.tsx            |   1 +
 .../header/DocumentPanelHeader.tsx            | 138 +++++-----
 .../sanity/src/desk/panes/document/index.ts   |   1 +
 .../document/inspectDialog/InspectDialog.tsx  |   9 +-
 .../inspectors/changes/ChangesInspector.tsx   |   4 +-
 .../document/statusBar/ActionMenuButton.tsx   | 101 +++----
 .../document/statusBar/ActionStateDialog.tsx  |  19 +-
 .../document/statusBar/DocumentStatusBar.tsx  |  18 +-
 .../statusBar/DocumentStatusBarActions.tsx    |  39 ++-
 .../__workshop__/DocumentStatusPulseStory.tsx |  23 ++
 .../__workshop__/ReviewChangesButtonStory.tsx |  24 --
 .../document/statusBar/__workshop__/index.ts  |   6 +-
 .../statusBar/dialogs/ConfirmDialog.tsx       |   2 +-
 .../statusBar/dialogs/ModalDialog.tsx         |  12 +-
 .../document/statusBar/dialogs/constants.ts   |   3 +-
 .../statusBar/sparkline/DocumentBadges.tsx    |  11 +-
 .../statusBar/sparkline/DocumentSparkline.tsx |  87 +++----
 .../AnimatedStatusIcon.tsx                    |  22 --
 .../DocumentStatusPulse.tsx                   |  45 ++++
 .../sparkline/DocumentStatusPulse/index.ts    |   1 +
 .../statusBar/sparkline/IconBadge.tsx         |  57 ----
 .../ReviewChangesButton.tsx                   | 100 -------
 .../sparkline/ReviewChangesButton/index.ts    |   1 -
 .../panes/document/timeline/TimelineError.tsx |   2 +-
 .../desk/panes/document/timeline/timeline.tsx |  11 +-
 .../document/timeline/timelineItem.styled.tsx |   9 +-
 .../panes/document/timeline/timelineItem.tsx  |  10 +-
 .../panes/document/timeline/timelineMenu.tsx  |   9 +-
 .../desk/panes/document/useDocumentTitle.ts   |  50 ++++
 .../panes/documentList/DocumentListPane.tsx   |  45 ++--
 .../documentList/DocumentListPaneContent.tsx  |  18 +-
 .../documentList/DocumentListPaneHeader.tsx   |  48 ++--
 .../src/desk/panes/list/ListPaneContent.tsx   |   4 +-
 .../src/desk/panes/list/ListPaneHeader.tsx    |  12 +-
 .../src/desk/panes/loading/LoadingPane.tsx    |  13 +-
 .../userComponent/UserComponentPaneHeader.tsx |  12 +-
 .../src/ui/__workshop__/MenuItemStory.tsx     | 106 ++++++++
 packages/sanity/src/ui/__workshop__/index.ts  |  14 +
 packages/sanity/src/ui/button/Button.tsx      | 100 +++++++
 packages/sanity/src/ui/button/index.ts        |   1 +
 .../conditionalWrapper/ConditionalWrapper.tsx |  17 ++
 .../sanity/src/ui/conditionalWrapper/index.ts |   1 +
 packages/sanity/src/ui/dialog/Dialog.tsx      |  94 +++++++
 packages/sanity/src/ui/dialog/index.ts        |   1 +
 .../src/ui/documentStatus/DocumentStatus.tsx  |  56 ++++
 .../sanity/src/ui/documentStatus/index.ts     |   1 +
 packages/sanity/src/ui/index.ts               |   8 +
 .../src/ui/loadingBlock/LoadingBlock.tsx      | 126 +++++++++
 packages/sanity/src/ui/loadingBlock/index.ts  |   1 +
 .../sanity/src/ui/menuGroup/MenuGroup.tsx     |  19 ++
 packages/sanity/src/ui/menuGroup/index.ts     |   1 +
 packages/sanity/src/ui/menuItem/MenuItem.tsx  | 160 ++++++++++++
 packages/sanity/src/ui/menuItem/index.ts      |   1 +
 packages/sanity/src/ui/tab/Tab.tsx            |  50 ++++
 packages/sanity/src/ui/tab/index.ts           |   1 +
 packages/sanity/src/ui/tooltip/Tooltip.tsx    |  62 +++++
 .../src/ui/tooltip/TooltipWithNodes.tsx       |  35 +++
 packages/sanity/src/ui/tooltip/constants.ts   |   3 +
 packages/sanity/src/ui/tooltip/index.ts       |   2 +
 yarn.lock                                     |  81 +++++-
 394 files changed, 4648 insertions(+), 3896 deletions(-)
 create mode 100644 packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
 create mode 100644 packages/sanity/src/core/components/collapseTabList/__workshop__/CollapseTabListStory.tsx
 create mode 100644 packages/sanity/src/core/components/collapseTabList/__workshop__/index.ts
 create mode 100644 packages/sanity/src/core/components/collapseTabList/index.ts
 create mode 100644 packages/sanity/src/core/components/previews/general/CompactPreview.tsx
 delete mode 100644 packages/sanity/src/core/form/components/FullscreenSpinner.tsx
 delete mode 100644 packages/sanity/src/core/form/components/SpinnerWithText.tsx
 create mode 100644 packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts
 create mode 100644 packages/sanity/src/core/preview/__workshop__/SanityDefaultPreviewStory.tsx
 delete mode 100644 packages/sanity/src/core/studio/components/navbar/LogoButton.tsx
 create mode 100644 packages/sanity/src/core/studio/components/navbar/SanityLogo.tsx
 create mode 100644 packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx
 delete mode 100644 packages/sanity/src/core/studio/components/navbar/search/SearchField.tsx
 delete mode 100644 packages/sanity/src/core/studio/screens/LoadingScreen.tsx
 delete mode 100644 packages/sanity/src/desk/comments/src/components/TextTooltip.tsx
 create mode 100644 packages/sanity/src/desk/components/MissingDocumentTypesMessage.tsx
 create mode 100644 packages/sanity/src/desk/components/NotPublishedStatus.tsx
 create mode 100644 packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormHeader.tsx
 create mode 100644 packages/sanity/src/desk/panes/document/documentPanel/documentViews/styles.ts
 create mode 100644 packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx
 delete mode 100644 packages/sanity/src/desk/panes/document/statusBar/__workshop__/ReviewChangesButtonStory.tsx
 rename packages/sanity/src/desk/panes/document/statusBar/sparkline/{ReviewChangesButton => DocumentStatusPulse}/AnimatedStatusIcon.tsx (87%)
 create mode 100644 packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx
 create mode 100644 packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/index.ts
 delete mode 100644 packages/sanity/src/desk/panes/document/statusBar/sparkline/IconBadge.tsx
 delete mode 100644 packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx
 delete mode 100644 packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/index.ts
 create mode 100644 packages/sanity/src/desk/panes/document/useDocumentTitle.ts
 create mode 100644 packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
 create mode 100644 packages/sanity/src/ui/__workshop__/index.ts
 create mode 100644 packages/sanity/src/ui/button/Button.tsx
 create mode 100644 packages/sanity/src/ui/button/index.ts
 create mode 100644 packages/sanity/src/ui/conditionalWrapper/ConditionalWrapper.tsx
 create mode 100644 packages/sanity/src/ui/conditionalWrapper/index.ts
 create mode 100644 packages/sanity/src/ui/dialog/Dialog.tsx
 create mode 100644 packages/sanity/src/ui/dialog/index.ts
 create mode 100644 packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
 create mode 100644 packages/sanity/src/ui/documentStatus/index.ts
 create mode 100644 packages/sanity/src/ui/index.ts
 create mode 100644 packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
 create mode 100644 packages/sanity/src/ui/loadingBlock/index.ts
 create mode 100644 packages/sanity/src/ui/menuGroup/MenuGroup.tsx
 create mode 100644 packages/sanity/src/ui/menuGroup/index.ts
 create mode 100644 packages/sanity/src/ui/menuItem/MenuItem.tsx
 create mode 100644 packages/sanity/src/ui/menuItem/index.ts
 create mode 100644 packages/sanity/src/ui/tab/Tab.tsx
 create mode 100644 packages/sanity/src/ui/tab/index.ts
 create mode 100644 packages/sanity/src/ui/tooltip/Tooltip.tsx
 create mode 100644 packages/sanity/src/ui/tooltip/TooltipWithNodes.tsx
 create mode 100644 packages/sanity/src/ui/tooltip/constants.ts
 create mode 100644 packages/sanity/src/ui/tooltip/index.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 656272a4ff1..a92c3a8b9ef 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -231,6 +231,40 @@ const config = {
         '@sanity/i18n/no-attribute-template-literals': 'off',
       },
     },
+
+    // Prefer local components vs certain @sanity/ui imports (in sanity package)
+    {
+      files: ['packages/sanity/**'],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            paths: [
+              {
+                name: '@sanity/ui',
+                importNames: [
+                  'Button',
+                  'ButtonProps',
+                  'Dialog',
+                  'DialogProps',
+                  'MenuGroup',
+                  'MenuGroupProps',
+                  'MenuItem',
+                  'MenuItemProps',
+                  'Tab',
+                  'TabProps',
+                  'Tooltip',
+                  'TooltipProps',
+                  'TooltipWithNodes',
+                ],
+                message:
+                  'Please use the (more opinionated) exported components in sanity/src/ui instead.',
+              },
+            ],
+          },
+        ],
+      },
+    },
   ],
 }
 
diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index 123d1be11fc..2180c5eacb0 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -31,8 +31,8 @@
     "start": "../.bin/sanity start --port 4000"
   },
   "dependencies": {
-    "@sanity/icons": "^2.6.0",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/icons": "^2.7.0",
+    "@sanity/ui": "2.0.0-alpha.32",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/test-studio/assetSources/imageAssetSource.tsx b/dev/test-studio/assetSources/imageAssetSource.tsx
index db3cbbbc015..b3354847f52 100644
--- a/dev/test-studio/assetSources/imageAssetSource.tsx
+++ b/dev/test-studio/assetSources/imageAssetSource.tsx
@@ -1,10 +1,10 @@
 import {ImagesIcon} from '@sanity/icons'
 import {AssetSource, AssetSourceComponentProps} from '@sanity/types'
-import {Box, Dialog, Text} from '@sanity/ui'
-import React from 'react'
+import {Text} from '@sanity/ui'
+import {Dialog} from '../../../packages/sanity/src/ui'
 
 function ImageAssetSource(props: AssetSourceComponentProps) {
-  const {dialogHeaderTitle, onClose, ...restProps} = props
+  const {dialogHeaderTitle, onClose} = props
 
   return (
     <Dialog
@@ -13,11 +13,9 @@ function ImageAssetSource(props: AssetSourceComponentProps) {
       onClose={onClose}
       width={1}
     >
-      <Box padding={4}>
-        <Text muted size={1} weight="medium">
-          (custom image asset source)
-        </Text>
-      </Box>
+      <Text muted size={1} weight="medium">
+        (custom image asset source)
+      </Text>
     </Dialog>
   )
 }
diff --git a/dev/test-studio/components/formComponents.tsx b/dev/test-studio/components/formComponents.tsx
index 00a78fce7e5..0b970318189 100644
--- a/dev/test-studio/components/formComponents.tsx
+++ b/dev/test-studio/components/formComponents.tsx
@@ -78,6 +78,13 @@ export function Preview(props: PreviewProps) {
   )
 }
 
+export function CustomBadge() {
+  return {
+    label: 'Hello world',
+    title: 'Hello I am a custom document badge',
+  }
+}
+
 export const formComponentsPlugin = definePlugin({
   name: 'form-components-plugin',
   form: {
diff --git a/dev/test-studio/documentActions/actions/TestCustomComponentAction.tsx b/dev/test-studio/documentActions/actions/TestCustomComponentAction.tsx
index 3e213c15c63..434651c9db6 100644
--- a/dev/test-studio/documentActions/actions/TestCustomComponentAction.tsx
+++ b/dev/test-studio/documentActions/actions/TestCustomComponentAction.tsx
@@ -1,6 +1,7 @@
-import {Button, Card, Dialog, Stack, Text} from '@sanity/ui'
+import {Text} from '@sanity/ui'
 import {DocumentActionComponent} from 'sanity'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
+import {Dialog} from '../../../../packages/sanity/src/ui'
 
 export const TestCustomComponentAction: DocumentActionComponent = () => {
   const [open, setOpen] = useState<boolean>(false)
@@ -19,15 +20,15 @@ export const TestCustomComponentAction: DocumentActionComponent = () => {
           onClickOutside={toggleOpen}
           onClose={toggleOpen}
           width={1}
-          footer={
-            <Stack padding={2}>
-              <Button onClick={toggleOpen} text="Close" />
-            </Stack>
-          }
+          footer={{
+            confirmButton: {
+              onClick: toggleOpen,
+              tone: 'default',
+              text: 'Close',
+            },
+          }}
         >
-          <Card padding={5}>
-            <Text>This dialog is rendered using a custom dialog component.</Text>
-          </Card>
+          <Text size={1}>This dialog is rendered using a custom dialog component.</Text>
         </Dialog>
       ),
     },
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index cd3be4a19b5..8b71271af18 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -25,7 +25,7 @@
     "@sanity/client": "^6.10.0",
     "@sanity/color": "^2.1.20",
     "@sanity/google-maps-input": "^3.0.1",
-    "@sanity/icons": "^2.6.0",
+    "@sanity/icons": "^2.7.0",
     "@sanity/image-url": "^1.0.2",
     "@sanity/locale-ko-kr": "^1.0.0",
     "@sanity/locale-nb-no": "^1.0.0",
@@ -35,7 +35,7 @@
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/ui": "2.0.0-alpha.32",
     "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
diff --git a/dev/test-studio/sanity.config.ts b/dev/test-studio/sanity.config.ts
index 7b787a31b28..306f72a1c1c 100644
--- a/dev/test-studio/sanity.config.ts
+++ b/dev/test-studio/sanity.config.ts
@@ -31,6 +31,7 @@ import {
 import {
   Annotation,
   Block,
+  CustomBadge,
   Field,
   formComponentsPlugin,
   InlineBlock,
@@ -93,6 +94,7 @@ const sharedSettings = definePlugin({
     unstable_comments: {
       enabled: true,
     },
+    badges: (prev, context) => (context.schemaType === 'author' ? [CustomBadge, ...prev] : prev),
   },
   plugins: [
     // ...localePlugins,
diff --git a/dev/test-studio/schema/book.ts b/dev/test-studio/schema/book.ts
index 738957b4c37..b9d29e24272 100644
--- a/dev/test-studio/schema/book.ts
+++ b/dev/test-studio/schema/book.ts
@@ -88,6 +88,18 @@ export default {
         },
       ],
     },
+    {
+      name: 'genre',
+      title: 'Genre',
+      type: 'string',
+      options: {
+        list: [
+          {title: 'Fiction', value: 'fiction'},
+          {title: 'Non Fiction', value: 'nonfiction'},
+          {title: 'Poetry', value: 'poetry'},
+        ],
+      },
+    },
   ],
   orderings: [
     {
diff --git a/examples/ecommerce-studio/package.json b/examples/ecommerce-studio/package.json
index 4b0cc001e2d..b46479d2f5b 100644
--- a/examples/ecommerce-studio/package.json
+++ b/examples/ecommerce-studio/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.22.1",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/ui": "2.0.0-alpha.32",
     "react": "^18.2.0",
     "react-barcode": "^1.4.1",
     "react-dom": "^18.2.0",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index ed9c87b43d5..59c3abe38c6 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/ui": "2.0.0-alpha.32",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index 69e4ef9280f..1458a7c4321 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -66,8 +66,8 @@
     "@rexxars/react-json-inspector": "^8.0.1",
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "^2.1.20",
-    "@sanity/icons": "^2.6.0",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/icons": "^2.7.0",
+    "@sanity/ui": "2.0.0-alpha.32",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/packages/@sanity/vision/src/components/VisionGui.styled.tsx b/packages/@sanity/vision/src/components/VisionGui.styled.tsx
index db48befc52a..617513c1033 100644
--- a/packages/@sanity/vision/src/components/VisionGui.styled.tsx
+++ b/packages/@sanity/vision/src/components/VisionGui.styled.tsx
@@ -1,5 +1,5 @@
 import styled, {css} from 'styled-components'
-import {Button, Card, Box, Flex, Label, Theme, rem} from '@sanity/ui'
+import {Card, Box, Flex, Label, rem} from '@sanity/ui'
 
 export const Root = styled(Flex)`
   .sidebarPanes .Pane {
@@ -154,7 +154,3 @@ export const TimingsTextContainer = styled(Flex)`
 export const ControlsContainer = styled(Box)`
   border-top: 1px solid var(--card-border-color);
 `
-
-export const ButtonFullWidth = styled(Button)`
-  width: 100%;
-`
diff --git a/packages/@sanity/vision/src/components/VisionGui.tsx b/packages/@sanity/vision/src/components/VisionGui.tsx
index cfdc1bb484f..f4b27e46ba6 100644
--- a/packages/@sanity/vision/src/components/VisionGui.tsx
+++ b/packages/@sanity/vision/src/components/VisionGui.tsx
@@ -50,7 +50,6 @@ import {
   ResultContainer,
   Result,
   ControlsContainer,
-  ButtonFullWidth,
   TimingsFooter,
   TimingsCard,
   TimingsTextContainer,
@@ -765,11 +764,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                       <TextInput readOnly type="url" ref={this._operationUrlElement} value={url} />
                     </Box>
                     <Tooltip
-                      content={
-                        <Box padding={2}>
-                          <Text>{t('action.copy-url-to-clipboard')}</Text>
-                        </Box>
-                      }
+                      content={t('action.copy-url-to-clipboard')}
                     >
                       <Button
                         aria-label={t('action.copy-url-to-clipboard')}
@@ -836,15 +831,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                       <Flex>
                         <StyledLabel muted>{t('params.label')}</StyledLabel>
                         {paramsError && (
-                          <Tooltip
-                            placement="top-end"
-                            portal
-                            content={
-                              <Box padding={2}>
-                                <Text>{paramsError}</Text>
-                              </Box>
-                            }
-                          >
+                          <Tooltip placement="top-end" portal content={paramsError}>
                             <Box padding={1} marginX={2}>
                               <Text>
                                 <ErrorOutlineIcon />
@@ -861,7 +848,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                     <Card padding={3} paddingX={3}>
                       <Tooltip
                         content={
-                          <Card padding={2} radius={4}>
+                          <Card radius={4}>
                             <Text size={1} muted>
                               {t('params.error.params-invalid-json')}
                             </Text>
@@ -875,14 +862,15 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                           <Box flex={1}>
                             <Tooltip
                               content={
-                                <Card padding={2} radius={4}>
+                                <Card radius={4}>
                                   <Hotkeys keys={['Ctrl', 'Enter']} />
                                 </Card>
                               }
                               placement="top"
                               portal
                             >
-                              <ButtonFullWidth
+                              <Button
+                                width="fill"
                                 onClick={this.handleQueryExecution}
                                 type="button"
                                 icon={queryInProgress ? StopIcon : PlayIcon}
@@ -897,7 +885,8 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                             </Tooltip>
                           </Box>
                           <Box flex={1} marginLeft={3}>
-                            <ButtonFullWidth
+                            <Button
+                              width="fill"
                               onClick={this.handleListenExecution}
                               type="button"
                               icon={listenInProgress ? StopIcon : PlayIcon}
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index 40a8fd4f4d4..12f4b1a2dd8 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -165,7 +165,7 @@
     "@sanity/eventsource": "^5.0.0",
     "@sanity/export": "3.22.1",
     "@sanity/generate-help-url": "^3.0.0",
-    "@sanity/icons": "^2.6.0",
+    "@sanity/icons": "^2.7.0",
     "@sanity/image-url": "^1.0.2",
     "@sanity/import": "3.22.1",
     "@sanity/logos": "^2.0.2",
@@ -175,7 +175,7 @@
     "@sanity/schema": "3.22.1",
     "@sanity/telemetry": "^0.7.3",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/ui": "2.0.0-alpha.32",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
diff --git a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
index c6252195abd..5d2f2579b26 100644
--- a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
+++ b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
@@ -1,5 +1,6 @@
 import {useLayer} from '@sanity/ui'
 import React, {useMemo} from 'react'
+import {Tooltip} from '../../ui'
 import {useTranslation} from '../i18n/hooks/useTranslation'
 import {ConnectorContext} from './ConnectorContext'
 import {
@@ -27,15 +28,16 @@ export function ElementWithChangeBar(props: {
       disabled || !isChanged ? null : (
         <ChangeBar data-testid="change-bar" $zIndex={zIndex}>
           <ChangeBarMarker data-testid="change-bar__marker" />
-
-          <ChangeBarButton
-            aria-label={t('changes.change-bar.aria-label')}
-            data-testid="change-bar__button"
-            onClick={isReviewChangesOpen ? undefined : onOpenReviewChanges}
-            tabIndex={-1}
-            type="button"
-            $withHoverEffect={withHoverEffect}
-          />
+          <Tooltip content="Review changes" portal>
+            <ChangeBarButton
+              aria-label={t('changes.change-bar.aria-label')}
+              data-testid="change-bar__button"
+              onClick={isReviewChangesOpen ? undefined : onOpenReviewChanges}
+              tabIndex={-1}
+              type="button"
+              $withHoverEffect={withHoverEffect}
+            />
+          </Tooltip>
         </ChangeBar>
       ),
     [disabled, isChanged, isReviewChangesOpen, onOpenReviewChanges, t, withHoverEffect, zIndex],
diff --git a/packages/sanity/src/core/components/DefaultDocument.tsx b/packages/sanity/src/core/components/DefaultDocument.tsx
index a2c6360e83d..2183feed9b7 100644
--- a/packages/sanity/src/core/components/DefaultDocument.tsx
+++ b/packages/sanity/src/core/components/DefaultDocument.tsx
@@ -4,7 +4,24 @@ import {NoJavascript} from './NoJavascript'
 import {GlobalErrorHandler} from './globalErrorHandler'
 import {Favicons} from './Favicons'
 
+// @todo: replace with fonts on our origin
 const globalStyles = `
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('https://rsms.me/inter/font-files/InterVariable.woff2?v=4.0') format('woff2');
+    font-named-instance: 'Regular';
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.0') format('woff2');
+    font-named-instance: 'Italic';
+  }
   html {
     background-color: #f1f3f6;
   }
@@ -52,7 +69,8 @@ export function DefaultDocument(props: DefaultDocumentProps): React.ReactElement
         {css.map((href) => (
           <link key={href} rel="stylesheet" href={href} />
         ))}
-        <style>{globalStyles}</style>
+        {/* eslint-disable-next-line react/no-danger */}
+        <style dangerouslySetInnerHTML={{__html: globalStyles}} />
       </head>
       <body>
         <div id="sanity" />
diff --git a/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx b/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
index e405e1995aa..0868d1be071 100644
--- a/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
+++ b/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
@@ -56,15 +56,15 @@ export function InsufficientPermissionsMessage({
   )
 
   return (
-    <Box padding={2}>
+    <Box>
       <Inline space={2}>
         <Text size={1}>
           <AccessDeniedIcon />
         </Text>
-        <Text weight="semibold">{t('insufficient-permissions-message.title')}</Text>
+        <Text weight="medium">{t('insufficient-permissions-message.title')}</Text>
       </Inline>
       <Inline marginTop={4}>
-        <Text size={1}>
+        <Text size={1} weight="medium">
           <Translate
             i18nKey="insufficient-permissions-message.not-authorized-explanation"
             t={t}
diff --git a/packages/sanity/src/core/components/IntentButton.tsx b/packages/sanity/src/core/components/IntentButton.tsx
index a4a75587daa..cd6fe52c91b 100644
--- a/packages/sanity/src/core/components/IntentButton.tsx
+++ b/packages/sanity/src/core/components/IntentButton.tsx
@@ -1,5 +1,6 @@
-import {Button, ButtonProps} from '@sanity/ui'
-import React, {HTMLProps} from 'react'
+import React from 'react'
+import {Button, ButtonProps} from '../../../src/ui'
+
 import {IntentLink, IntentLinkProps} from 'sanity/router'
 
 /**
@@ -8,7 +9,9 @@ import {IntentLink, IntentLinkProps} from 'sanity/router'
  * @beta
  */
 export function IntentButton(
-  props: IntentLinkProps & ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'as' | 'href' | 'ref'>,
+  props: IntentLinkProps &
+    ButtonProps &
+    Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'size' | 'as'>,
 ) {
   return props.disabled ? (
     <Button {...props} as="a" role="link" aria-disabled="true" />
diff --git a/packages/sanity/src/core/components/StatusButton.tsx b/packages/sanity/src/core/components/StatusButton.tsx
index 399a9d96461..e1b366cec66 100644
--- a/packages/sanity/src/core/components/StatusButton.tsx
+++ b/packages/sanity/src/core/components/StatusButton.tsx
@@ -1,117 +1,57 @@
-import {
-  Box,
-  Button,
-  ButtonMode,
-  ButtonProps,
-  Flex,
-  Text,
-  Tooltip,
-  TooltipProps,
-  useTheme,
-} from '@sanity/ui'
-import React, {
-  createElement,
-  isValidElement,
-  useMemo,
-  HTMLProps,
-  forwardRef,
-  ForwardedRef,
-  ReactNode,
-} from 'react'
-import {isValidElementType} from 'react-is'
+import {useTheme} from '@sanity/ui'
+import {useMemo, HTMLProps, forwardRef, ForwardedRef, ReactNode} from 'react'
 import styled from 'styled-components'
-import {Hotkeys} from './Hotkeys'
+import {Button, ButtonProps} from '../../ui'
 
 /** @hidden @beta */
-export interface StatusButtonProps extends Omit<ButtonProps, 'iconRight'> {
+export type StatusButtonProps = ButtonProps & {
   disabled?: boolean | {reason: ReactNode}
-  hotkey?: string[]
-  label?: string
-  mode?: ButtonMode
-  tooltip?: Omit<TooltipProps, 'content' | 'disabled' | 'portal'>
+  mode?: ButtonProps['mode']
+  iconRight?: undefined
 }
 
-const IconBox = styled(Box)({
-  position: 'relative',
-})
+const StyledButton = styled(Button)`
+  position: relative;
+  // The children in button is rendered inside a span, we need to absolutely position it.
+  & > span:nth-child(2) {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    padding: 0;
+  }
+`
 
 const Dot = styled.div({
-  position: 'absolute',
-  top: -4,
-  right: -4,
-  width: 6,
-  height: 6,
+  width: 4,
+  height: 4,
   borderRadius: 3,
   boxShadow: '0 0 0 1px var(--card-bg-color)',
 })
 
 /** @hidden @beta */
 export const StatusButton = forwardRef(function StatusButton(
-  props: StatusButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'disabled' | 'ref'>,
+  props: StatusButtonProps &
+    Omit<HTMLProps<HTMLButtonElement>, 'disabled' | 'ref' | 'size' | 'title'>,
   ref: ForwardedRef<HTMLButtonElement>,
 ) {
-  const {
-    disabled: disabledProp,
-    fontSize,
-    hotkey,
-    icon,
-    label,
-    mode = 'bleed',
-    space = 3,
-    text,
-    tone,
-    tooltip,
-    ...restProps
-  } = props
+  const {disabled: disabledProp, icon, label, mode = 'bleed', text, tone, ...restProps} = props
   const theme = useTheme()
   const toneColor = tone && theme.sanity.color.solid[tone]
   const dotStyle = useMemo(() => ({backgroundColor: toneColor?.enabled.bg}), [toneColor])
   const disabled = Boolean(disabledProp)
 
-  const tooltipContent =
-    typeof disabledProp === 'object' ? (
-      <Text size={1}>{disabledProp.reason}</Text>
-    ) : (
-      <Flex align="center" gap={2} style={{lineHeight: 0}}>
-        <Text size={1}>{label}</Text>
-        {hotkey && <Hotkeys fontSize={0} keys={hotkey} style={{margin: -4}} />}
-      </Flex>
-    )
-
   return (
-    <Tooltip
-      padding={2}
-      placement="bottom"
-      {...tooltip}
-      content={tooltipContent}
-      disabled={!label}
-      portal
+    <StyledButton
+      data-ui="StatusButton"
+      {...restProps}
+      aria-label={label}
+      disabled={disabled}
+      mode={mode}
+      ref={ref}
+      text={text}
+      icon={icon}
     >
-      <div>
-        <Button
-          data-ui="StatusButton"
-          {...restProps}
-          aria-label={label}
-          disabled={disabled}
-          mode={mode}
-          ref={ref}
-        >
-          <Flex gap={space}>
-            <IconBox>
-              <Text size={fontSize}>
-                {isValidElement(icon) && icon}
-                {isValidElementType(icon) && createElement(icon)}
-              </Text>
-              {tone && <Dot style={dotStyle} />}
-            </IconBox>
-            {text && (
-              <Box flex={1}>
-                <Text size={fontSize}>{text}</Text>
-              </Box>
-            )}
-          </Flex>
-        </Button>
-      </div>
-    </Tooltip>
+      {tone && <Dot style={dotStyle} />}
+    </StyledButton>
   )
 })
diff --git a/packages/sanity/src/core/components/TooltipOfDisabled.tsx b/packages/sanity/src/core/components/TooltipOfDisabled.tsx
index f96240900ad..7f20544464a 100644
--- a/packages/sanity/src/core/components/TooltipOfDisabled.tsx
+++ b/packages/sanity/src/core/components/TooltipOfDisabled.tsx
@@ -1,16 +1,13 @@
-import {Tooltip, TooltipProps} from '@sanity/ui'
-import React, {ForwardedRef, forwardRef} from 'react'
+import React, {forwardRef} from 'react'
+import {TooltipWithNodes, TooltipWithNodesProps} from '../../ui'
 
 /** @internal */
-export const TooltipOfDisabled = forwardRef(function DisabledTooltip(
-  props: TooltipProps,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {children, content, disabled, ...restProps} = props
-
-  return (
-    <Tooltip {...restProps} content={content} disabled={disabled || !content} padding={2} ref={ref}>
-      <div>{children}</div>
-    </Tooltip>
-  )
-})
+export const TooltipOfDisabled = forwardRef<HTMLDivElement, TooltipWithNodesProps>(
+  function DisabledTooltip({children, content, disabled, ...restProps}, ref) {
+    return (
+      <TooltipWithNodes {...restProps} content={content} disabled={disabled || !content} ref={ref}>
+        <div>{children}</div>
+      </TooltipWithNodes>
+    )
+  },
+)
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
index 261ca121422..5ac05756744 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
@@ -1,5 +1,5 @@
-import {EllipsisVerticalIcon} from '@sanity/icons'
-import {Box, Button, Flex, MenuButtonProps, Text, Tooltip} from '@sanity/ui'
+import {EllipsisHorizontalIcon} from '@sanity/icons'
+import {Flex, MenuButtonProps} from '@sanity/ui'
 import React, {
   Children,
   cloneElement,
@@ -15,6 +15,7 @@ import React, {
 } from 'react'
 import styled, {css} from 'styled-components'
 import {difference} from 'lodash'
+import {Button, Tooltip} from '../../../ui'
 import {CollapseOverflowMenu} from './CollapseOverflowMenu'
 import {ObserveElement} from './ObserveElement'
 import {CollapseMenuDivider} from './CollapseMenuDivider'
@@ -93,7 +94,10 @@ export const CollapseMenu = forwardRef(function CollapseMenu(
 
   const menuOptions = useMemo(() => Children.toArray(children).filter(_isReactElement), [children])
   const menuButton = useMemo(
-    () => menuButtonProps?.button || <Button icon={EllipsisVerticalIcon} mode="bleed" />,
+    () =>
+      menuButtonProps?.button || (
+        <Button icon={EllipsisHorizontalIcon} mode="bleed" tooltipProps={{content: 'Show more'}} />
+      ),
     [menuButtonProps],
   )
 
@@ -262,7 +266,10 @@ export const AutoCollapseMenu = forwardRef(function AutoCollapseMenu(
     : menuOptions
 
   const menuButton = useMemo(
-    () => menuButtonProps?.button || <Button icon={EllipsisVerticalIcon} mode="bleed" />,
+    () =>
+      menuButtonProps?.button || (
+        <Button icon={EllipsisHorizontalIcon} mode="bleed" tooltipProps={{content: 'Show more'}} />
+      ),
     [menuButtonProps],
   )
 
@@ -288,16 +295,7 @@ export const AutoCollapseMenu = forwardRef(function AutoCollapseMenu(
               return (
                 <Fragment key={optionElement.key}>
                   {dividerBefore && index !== 0 && <CollapseMenuDivider hidden={hidden} />}
-                  <Tooltip
-                    portal
-                    disabled={!tooltipText}
-                    content={
-                      <Box padding={2} sizing="border">
-                        <Text size={1}>{tooltipText}</Text>
-                      </Box>
-                    }
-                    {...tooltipProps}
-                  >
+                  <Tooltip portal disabled={!tooltipText} content={tooltipText} {...tooltipProps}>
                     <Flex>
                       {cloneElement(optionElement, {
                         disabled: optionElement.props.disabled || hidden,
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
index 7e0a5addc61..494755e9e76 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
@@ -1,5 +1,5 @@
-import {Button, ButtonProps, TooltipProps} from '@sanity/ui'
 import React, {forwardRef} from 'react'
+import {Button, ButtonProps, TooltipProps} from '../../../ui'
 
 /** @internal */
 export interface CommonProps extends Omit<ButtonProps, 'text' | 'iconRight'> {
@@ -14,12 +14,12 @@ export interface CommonProps extends Omit<ButtonProps, 'text' | 'iconRight'> {
 export interface CollapseMenuButtonProps extends CommonProps {
   collapsedProps?: Omit<CommonProps, 'text'>
   expandedProps?: CommonProps
-  text: ButtonProps['text']
+  text: string
 }
 
 /** @internal */
 export const CollapseMenuButton = forwardRef(function CollapseMenuButton(
-  props: CollapseMenuButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as'>,
+  props: CollapseMenuButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'size'>,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
index 77d8627eaaf..2bc6ab71d52 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
@@ -1,5 +1,6 @@
-import {Menu, MenuButton, MenuButtonProps, MenuDivider, MenuItem} from '@sanity/ui'
+import {Menu, MenuButton, MenuButtonProps, MenuDivider} from '@sanity/ui'
 import React, {ForwardedRef, forwardRef} from 'react'
+import {MenuItem} from '../../../ui'
 import {CollapseMenuProps} from './CollapseMenu'
 
 const MENU_BUTTON_POPOVER_PROPS: MenuButtonProps['popover'] = {
diff --git a/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx b/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx
index 67f23212d81..bf5cf838006 100644
--- a/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx
@@ -1,7 +1,8 @@
-import {EllipsisVerticalIcon, IceCreamIcon} from '@sanity/icons'
-import {Button, Card, Flex} from '@sanity/ui'
+import {EllipsisHorizontalIcon, IceCreamIcon} from '@sanity/icons'
+import {Card, Flex} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import React from 'react'
+import {Button} from '../../../../ui'
 import {CollapseMenu, CollapseMenuButton} from '../'
 
 const GAP_OPTIONS = {'0': 0, '1': 1, '2': 2, '3': 3, '4': 4}
@@ -19,14 +20,18 @@ export default function CollapseMenuStory() {
           collapsed={collapsed}
           collapseText={collapseText}
           menuButtonProps={{
-            button: <Button icon={EllipsisVerticalIcon} mode="bleed" padding={2} fontSize={1} />,
+            button: (
+              <Button
+                icon={EllipsisHorizontalIcon}
+                mode="bleed"
+                tooltipProps={{content: 'Show more'}}
+              />
+            ),
           }}
         >
           {[...Array(5).keys()].map((num) => (
             <CollapseMenuButton
               key={num}
-              fontSize={1}
-              padding={2}
               text={`Button ${num + 1}`}
               dividerBefore={Boolean(num % 2)}
               icon={IceCreamIcon}
diff --git a/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx b/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
new file mode 100644
index 00000000000..fb477763a6f
--- /dev/null
+++ b/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
@@ -0,0 +1,152 @@
+import React, {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
+import {Flex, MenuButtonProps} from '@sanity/ui'
+import {EllipsisHorizontalIcon} from '@sanity/icons'
+import styled from 'styled-components'
+import {Button} from '../../../ui'
+import {CollapseOverflowMenu} from '../collapseMenu/CollapseOverflowMenu'
+import {ObserveElement} from '../collapseMenu/ObserveElement'
+
+function _isReactElement(node: unknown): node is React.ReactElement {
+  return Boolean(node)
+}
+
+const OptionObserveElement = styled(ObserveElement)`
+  list-style: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+  opacity: 0;
+  visibility: hidden;
+`
+
+const HiddenRow = styled(Flex)`
+  opacity: 0;
+  height: 0.1px;
+  overflow: hidden;
+`
+
+interface CollapseTabListProps {
+  children: React.ReactNode
+  gap?: number | number[]
+  menuButtonProps?: Omit<MenuButtonProps, 'id' | 'menu' | 'button'> & {
+    id?: string
+    button?: React.ReactElement
+  }
+  onMenuClose?: () => void
+  collapsed?: boolean
+  disableRestoreFocusOnClose?: boolean
+}
+
+/**
+ * Similar to `<CollapseMenu />` but instead of collapsing the inner items by removing the text
+ * it shows the items that fit, and the rest are rendered in a menu.
+ * @internal */
+export const CollapseTabList = forwardRef(function CollapseTabList(
+  props: CollapseTabListProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    children: childrenProp,
+    gap,
+    menuButtonProps,
+    disableRestoreFocusOnClose,
+    onMenuClose,
+    collapsed,
+  } = props
+  const [rootEl, setRootEl] = useState<HTMLDivElement | null>(null)
+  const [hiddenElements, setHiddenElements] = useState<React.ReactElement[]>([])
+  const [showChildren, setShowChildren] = useState(false)
+
+  const children = useMemo(
+    () => React.Children.toArray(childrenProp).filter(_isReactElement),
+    [childrenProp],
+  )
+
+  /**
+   * Keeps track of the children that will be shown in place and not in the menu.
+   */
+  const displayChildren = useMemo(() => {
+    if (collapsed) return null // If collapsed, we don't want to show any children
+    if (!showChildren) return null // If we haven't run the intersection observer yet, we don't want to show any children
+    // eslint-disable-next-line max-nested-callbacks
+    return children.filter((c) => !hiddenElements.some((h) => h.key === c.key))
+  }, [children, collapsed, hiddenElements, showChildren])
+
+  const intersectionOptions = useMemo(
+    () => ({
+      root: rootEl,
+      threshold: 1,
+      rootMargin: '1px',
+    }),
+    [rootEl],
+  )
+
+  const menuButton = useMemo(
+    () =>
+      menuButtonProps?.button || (
+        <Button icon={EllipsisHorizontalIcon} mode="bleed" tooltipProps={{content: 'Show more'}} />
+      ),
+    [menuButtonProps],
+  )
+
+  const menuOptionsArray = useMemo(
+    () =>
+      collapsed
+        ? children
+        : // eslint-disable-next-line max-nested-callbacks
+          children.filter(({key}) => hiddenElements.find((o: React.ReactElement) => o.key === key)),
+    [children, hiddenElements, collapsed],
+  )
+
+  const handleIntersection = useCallback(
+    (e: IntersectionObserverEntry, child: React.ReactElement) => {
+      const isHidden = hiddenElements.some((el) => el.key === child.key)
+
+      if (!showChildren) setShowChildren(true)
+      const isIntersecting = e.isIntersecting
+      if (!isHidden && !isIntersecting) setHiddenElements((prev) => [...prev, child])
+      if (isHidden && isIntersecting)
+        // eslint-disable-next-line max-nested-callbacks
+        setHiddenElements((prev) => prev.filter((el) => el.key !== child.key))
+    },
+    [hiddenElements, showChildren, setShowChildren, setHiddenElements],
+  )
+
+  return (
+    <Flex direction="column" ref={ref} sizing="border" style={{position: 'relative'}}>
+      <Flex justify="center" gap={gap} flex={1}>
+        {displayChildren}
+        {(hiddenElements.length > 0 || collapsed) && (
+          <CollapseOverflowMenu
+            disableRestoreFocusOnClose={disableRestoreFocusOnClose}
+            menuButton={menuButton}
+            menuButtonProps={menuButtonProps}
+            menuOptions={menuOptionsArray}
+            onMenuClose={onMenuClose}
+          />
+        )}
+      </Flex>
+
+      {/* Element that always render all the children to keep track of their position and if the available space to render them */}
+      <HiddenRow justify="flex-start" gap={gap} ref={setRootEl} data-hidden aria-hidden="true">
+        {cloneElement(menuButton, {
+          disabled: true,
+          'aria-hidden': true,
+        })}
+        {children?.map((child) => (
+          <OptionObserveElement
+            key={`${child.key}_observer`}
+            options={intersectionOptions}
+            // eslint-disable-next-line react/jsx-no-bind
+            onIntersectionChange={(e) => handleIntersection(e[0], child)}
+          >
+            {cloneElement(child, {
+              disabled: true,
+              'aria-hidden': true,
+              tabIndex: -1,
+            })}
+          </OptionObserveElement>
+        ))}
+      </HiddenRow>
+    </Flex>
+  )
+})
diff --git a/packages/sanity/src/core/components/collapseTabList/__workshop__/CollapseTabListStory.tsx b/packages/sanity/src/core/components/collapseTabList/__workshop__/CollapseTabListStory.tsx
new file mode 100644
index 00000000000..0e565ea01b6
--- /dev/null
+++ b/packages/sanity/src/core/components/collapseTabList/__workshop__/CollapseTabListStory.tsx
@@ -0,0 +1,42 @@
+import {useState} from 'react'
+import {IceCreamIcon} from '@sanity/icons'
+import {Card, Flex} from '@sanity/ui'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+import {Button} from '../../../../ui'
+import {CollapseTabList} from '..'
+
+const GAP_OPTIONS = {'0': 0, '1': 1, '2': 2, '3': 3, '4': 4}
+
+export default function CollapseMenuStory() {
+  const collapsed = useBoolean('Collapsed', false)
+  const gap = useSelect('Gap', GAP_OPTIONS, 1)
+  const [selected, setSelected] = useState(0)
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={2}>
+      <Card
+        shadow={1}
+        radius={3}
+        padding={1}
+        style={{
+          overflow: 'hidden',
+          resize: 'horizontal',
+        }}
+      >
+        <CollapseTabList gap={gap} collapsed={collapsed}>
+          {[...Array(5).keys()].map((num) => (
+            <Button
+              key={num}
+              text={`Button ${num + 1}`}
+              icon={IceCreamIcon}
+              mode="bleed"
+              selected={selected === num}
+              // eslint-disable-next-line react/jsx-no-bind
+              onClick={() => setSelected(num)}
+            />
+          ))}
+        </CollapseTabList>
+      </Card>
+    </Flex>
+  )
+}
diff --git a/packages/sanity/src/core/components/collapseTabList/__workshop__/index.ts b/packages/sanity/src/core/components/collapseTabList/__workshop__/index.ts
new file mode 100644
index 00000000000..048950f559f
--- /dev/null
+++ b/packages/sanity/src/core/components/collapseTabList/__workshop__/index.ts
@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'core/components/collapseTabList',
+  title: 'CollapseTabList',
+  stories: [
+    {
+      name: 'collapse-tab-list',
+      title: 'Default',
+      component: lazy(() => import('./CollapseTabListStory')),
+    },
+  ],
+})
diff --git a/packages/sanity/src/core/components/collapseTabList/index.ts b/packages/sanity/src/core/components/collapseTabList/index.ts
new file mode 100644
index 00000000000..d62a399af80
--- /dev/null
+++ b/packages/sanity/src/core/components/collapseTabList/index.ts
@@ -0,0 +1 @@
+export * from './CollapseTabList'
diff --git a/packages/sanity/src/core/components/commandList/__workshop__/KitchenSinkStory.tsx b/packages/sanity/src/core/components/commandList/__workshop__/KitchenSinkStory.tsx
index 4432dde37b2..4ac00a7081c 100644
--- a/packages/sanity/src/core/components/commandList/__workshop__/KitchenSinkStory.tsx
+++ b/packages/sanity/src/core/components/commandList/__workshop__/KitchenSinkStory.tsx
@@ -1,8 +1,9 @@
 import {CheckmarkIcon, DotIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Stack, Text, TextInput} from '@sanity/ui'
+import {Box, Card, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 import React, {KeyboardEvent, useCallback, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
+import {Button} from '../../../../ui'
 import {CommandList} from '../CommandList'
 import {
   CommandListGetItemDisabledCallback,
diff --git a/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx b/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx
index cf15eebfc89..3aff2841e84 100644
--- a/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx
+++ b/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx
@@ -1,18 +1,10 @@
-import {SelectIcon} from '@sanity/icons'
-import {
-  Button,
-  Card,
-  Flex,
-  Inline,
-  Popover,
-  Stack,
-  useClickOutside,
-  useGlobalKeyDown,
-} from '@sanity/ui'
+import {ChevronDownIcon} from '@sanity/icons'
+import {Card, Flex, Inline, Popover, Stack, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import React, {useCallback, useState} from 'react'
 import {CommandList} from '../CommandList'
 import {CommandListRenderItemCallback} from '../types'
+import {Button} from '../../../../ui'
 
 const ITEMS = [...Array(50000).keys()]
 
@@ -66,7 +58,6 @@ export default function PopoverStory() {
     (item) => {
       return (
         <Button
-          fontSize={1}
           mode="bleed"
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => handleChildClick(item)}
@@ -109,7 +100,7 @@ export default function PopoverStory() {
             ref={setPopover}
           >
             <Button
-              iconRight={SelectIcon}
+              iconRight={ChevronDownIcon}
               onClick={handlePopoverButtonClick}
               ref={setButton}
               text={`Popover (open at index ${selectedIndex})`}
diff --git a/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx b/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx
index e1085352805..cc5c317e5da 100644
--- a/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx
+++ b/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx
@@ -1,7 +1,6 @@
 import {CloseIcon} from '@sanity/icons'
 import {
   Box,
-  Button,
   Flex,
   Layer,
   Popover,
@@ -14,6 +13,7 @@ import {
 import React, {useCallback} from 'react'
 import styled, {css} from 'styled-components'
 import TrapFocus from 'react-focus-lock'
+import {Button} from '../../../ui'
 import {PopoverContainer} from './PopoverContainer'
 
 const StyledPopover = styled(Popover)(() => {
@@ -60,25 +60,29 @@ export function PopoverDialog(props: PopoverDialogProps) {
     referenceElement?.focus()
   }, [onClose, referenceElement])
 
+  // @todo: these use the same styles as dialogs, can this be shared?
   const content = (
     <PopoverContainer width={width}>
       <TrapFocus autoFocus>
         <Stack ref={containerRef}>
           <StickyLayer>
-            <Box padding={2} paddingLeft={3}>
+            <Box padding={2} paddingLeft={4}>
               <Flex align="center" gap={2}>
                 <Box flex={1}>
-                  <Text textOverflow="ellipsis" weight="semibold">
+                  <Text size={1} textOverflow="ellipsis" weight="medium">
                     {header}
                   </Text>
                 </Box>
-
-                <Button icon={CloseIcon} mode="bleed" onClick={handleClose} />
+                <Button
+                  icon={CloseIcon}
+                  mode="bleed"
+                  onClick={handleClose}
+                  tooltipProps={{content: 'Close'}}
+                />
               </Flex>
             </Box>
           </StickyLayer>
-
-          {children}
+          <Box padding={4}>{children}</Box>
         </Stack>
       </TrapFocus>
     </PopoverContainer>
diff --git a/packages/sanity/src/core/components/previewCard/PreviewCard.tsx b/packages/sanity/src/core/components/previewCard/PreviewCard.tsx
index 5db4bbd1c8b..e823b606f73 100644
--- a/packages/sanity/src/core/components/previewCard/PreviewCard.tsx
+++ b/packages/sanity/src/core/components/previewCard/PreviewCard.tsx
@@ -5,10 +5,6 @@ import styled, {css} from 'styled-components'
 /** @internal */
 const StyledCard = styled(Card)(() => {
   return css`
-    /* this is a hack to avoid layout jumps while previews are loading
-    there's probably better ways of solving this */
-    min-height: 35px;
-
     /* TextWithTone uses its own logic to set color, and we therefore need */
     /* to override this logic in order to set the correct color in different states */
     &[data-selected],
diff --git a/packages/sanity/src/core/components/previews/__workshop__/GeneralPreviewStory.tsx b/packages/sanity/src/core/components/previews/__workshop__/GeneralPreviewStory.tsx
index 123e67777d9..f8705e47ea3 100644
--- a/packages/sanity/src/core/components/previews/__workshop__/GeneralPreviewStory.tsx
+++ b/packages/sanity/src/core/components/previews/__workshop__/GeneralPreviewStory.tsx
@@ -3,10 +3,11 @@ import {Card, Container, Flex, Text} from '@sanity/ui'
 import {useBoolean, useNumber, useSelect, useString, useText} from '@sanity/ui-workshop'
 import React, {createElement, useMemo} from 'react'
 import {GeneralPreviewLayoutKey, PreviewProps} from '../types'
+import {CompactPreview} from '../general/CompactPreview'
 import {DefaultPreview} from '../general/DefaultPreview'
 import {DetailPreview} from '../general/DetailPreview'
 import {MediaPreview} from '../general/MediaPreview'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 
 // Exclude deprecated layout mode
 type LayoutKey = Exclude<GeneralPreviewLayoutKey, 'card'>
@@ -19,6 +20,7 @@ const MEDIA_OPTIONS: Record<string, 'none' | 'image' | 'icon' | 'text'> = {
 }
 
 const LAYOUT_OPTIONS: Record<string, LayoutKey> = {
+  Compact: 'compact',
   Default: 'default',
   Detail: 'detail',
   Media: 'media',
@@ -27,26 +29,27 @@ const LAYOUT_OPTIONS: Record<string, LayoutKey> = {
 const previewComponents: {
   [TLayoutKey in LayoutKey]: React.ComponentType<PreviewProps<TLayoutKey>>
 } = {
+  compact: CompactPreview,
   default: DefaultPreview,
   detail: DetailPreview,
   media: MediaPreview,
 }
 
 export default function GeneralPreviewStory() {
-  const layout = useSelect('Layout', LAYOUT_OPTIONS, 'default')
+  const layout = useSelect('Layout', LAYOUT_OPTIONS, 'compact')
 
   const isPlaceholder = useBoolean('Is placeholder', false)
   const interactive = useBoolean('Interactive', false)
   const mediaKey = useSelect('Media', MEDIA_OPTIONS) || 'none'
   const title = useString('Title', 'Title', 'Props')
   const subtitle = useString('Subtitle', 'Subtitle', 'Props')
-  const description = useText('Description', undefined, 'Props')
+  const description = useText('Description', 'Description', 'Props')
   const selected = useBoolean('Selected', false, 'Props')
   const status = useBoolean('Status', false)
   const progress = useNumber('Progress (%)', 50)
 
   const media = useMemo(() => {
-    const {width, height} = layout ? PREVIEW_MEDIA_SIZE[layout] : PREVIEW_MEDIA_SIZE.default
+    const {width, height} = layout ? PREVIEW_SIZES[layout].media : PREVIEW_SIZES.default.media
 
     if (mediaKey === 'image') {
       return <img src={`https://source.unsplash.com/${width * 2}x${height * 2}/?abstract`} />
@@ -96,8 +99,6 @@ export default function GeneralPreviewStory() {
         <Container width={0}>
           <Card
             data-as={interactive ? 'button' : undefined}
-            padding={2}
-            radius={2}
             selected={interactive ? selected : undefined}
             style={{lineHeight: 0}}
           >
diff --git a/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx b/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx
index a903bfffd8f..1b75665383f 100644
--- a/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx
+++ b/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx
@@ -1,12 +1,13 @@
-import {DocumentIcon, EditIcon, EllipsisVerticalIcon} from '@sanity/icons'
-import {Button, Card, Container, Flex, Text} from '@sanity/ui'
+import {DocumentIcon, EditIcon, EllipsisHorizontalIcon} from '@sanity/icons'
+import {Card, Container, Flex, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useString} from '@sanity/ui-workshop'
 import React, {ComponentType, createElement, useMemo} from 'react'
 import {PortableTextPreviewLayoutKey, PreviewProps} from '../types'
 import {InlinePreview} from '../portableText/InlinePreview'
+import {Button} from '../../../../ui'
 import {BlockPreview} from '../portableText/BlockPreview'
 import {BlockImagePreview} from '../portableText/BlockImagePreview'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 
 const MEDIA_OPTIONS: Record<string, string> = {
   None: 'none',
@@ -52,7 +53,7 @@ export default function PortableTextPreviewStory() {
   const status = useBoolean('Status', false)
 
   const media = useMemo(() => {
-    const {width, height} = layout ? PREVIEW_MEDIA_SIZE[layout] : PREVIEW_MEDIA_SIZE.default
+    const {width, height} = layout ? PREVIEW_SIZES[layout].media : PREVIEW_SIZES.default.media
 
     if (mediaKey === 'image') {
       return <img src={`https://source.unsplash.com/${width * 2}x${height * 2}/?abstract`} />
@@ -72,7 +73,7 @@ export default function PortableTextPreviewStory() {
   const previewProps: Omit<PreviewProps, 'renderDefault'> = useMemo(
     () => ({
       actions: withActions && (
-        <Button fontSize={1} icon={EllipsisVerticalIcon} mode="bleed" paddingX={2} />
+        <Button icon={EllipsisHorizontalIcon} mode="bleed" tooltipProps={{content: 'Show more'}} />
       ),
       isPlaceholder,
       media,
diff --git a/packages/sanity/src/core/components/previews/_common/Media.styled.ts b/packages/sanity/src/core/components/previews/_common/Media.styled.ts
index a991ef8c6a9..fefa88edb3f 100644
--- a/packages/sanity/src/core/components/previews/_common/Media.styled.ts
+++ b/packages/sanity/src/core/components/previews/_common/Media.styled.ts
@@ -1,6 +1,6 @@
 import {rem} from '@sanity/ui'
 import styled, {css} from 'styled-components'
-import {PREVIEW_ICON_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 import {PreviewLayoutKey, PreviewMediaDimensions} from '../types'
 
 export const MediaWrapper = styled.span<{
@@ -12,7 +12,7 @@ export const MediaWrapper = styled.span<{
   const {$dimensions, $layout, $radius, $responsive} = props
   const width = $dimensions.width || 0
   const height = $dimensions.width || 0
-  const iconSize = PREVIEW_ICON_SIZE[$layout]
+  const iconSize = PREVIEW_SIZES[$layout].icon
 
   return css`
     position: relative;
@@ -54,7 +54,7 @@ export const MediaWrapper = styled.span<{
       This is why we use the "*:not(svg) + span" selector to target only that
       situation to render the shadow.
     */
-    & *:not(svg) + span {
+    & span {
       display: block;
       position: absolute;
       left: 0;
diff --git a/packages/sanity/src/core/components/previews/_common/Media.tsx b/packages/sanity/src/core/components/previews/_common/Media.tsx
index 6142cebff3b..60056b4f96b 100644
--- a/packages/sanity/src/core/components/previews/_common/Media.tsx
+++ b/packages/sanity/src/core/components/previews/_common/Media.tsx
@@ -18,7 +18,7 @@ export interface MediaProps {
 }
 
 export function Media(props: MediaProps) {
-  const {border = true, dimensions, layout, media, radius = 1, responsive = false, styles} = props
+  const {border = true, dimensions, layout, media, radius = 2, responsive = false, styles} = props
 
   return (
     <MediaWrapper
diff --git a/packages/sanity/src/core/components/previews/constants.ts b/packages/sanity/src/core/components/previews/constants.ts
index 1dbbf0e6482..2313d151cfe 100644
--- a/packages/sanity/src/core/components/previews/constants.ts
+++ b/packages/sanity/src/core/components/previews/constants.ts
@@ -1,19 +1,38 @@
 import {PreviewLayoutKey} from './types'
 
-export const PREVIEW_MEDIA_SIZE: Record<PreviewLayoutKey, {width: number; height: number}> = {
-  block: {width: 33, height: 33},
-  blockImage: {width: 600, height: 400},
-  default: {width: 35, height: 35},
-  detail: {width: 75, height: 75},
-  inline: {width: 15, height: 15},
-  media: {width: 160, height: 160},
-}
-
-export const PREVIEW_ICON_SIZE: Record<PreviewLayoutKey, number | undefined> = {
-  block: 31,
-  blockImage: 45,
-  default: 33,
-  detail: 45,
-  inline: 15,
-  media: 45,
+export const PREVIEW_SIZES: Record<
+  PreviewLayoutKey,
+  {
+    icon: number
+    media: {height: number; width: number}
+  }
+> = {
+  block: {
+    icon: 31,
+    media: {width: 33, height: 33},
+  },
+  blockImage: {
+    icon: 45,
+    media: {width: 600, height: 400},
+  },
+  compact: {
+    icon: 21,
+    media: {width: 25, height: 25},
+  },
+  default: {
+    icon: 25,
+    media: {width: 39, height: 39},
+  },
+  detail: {
+    icon: 45,
+    media: {width: 70, height: 70},
+  },
+  inline: {
+    icon: 15,
+    media: {width: 15, height: 15},
+  },
+  media: {
+    icon: 45,
+    media: {width: 160, height: 160},
+  },
 }
diff --git a/packages/sanity/src/core/components/previews/general/CompactPreview.tsx b/packages/sanity/src/core/components/previews/general/CompactPreview.tsx
new file mode 100644
index 00000000000..d276fce2d52
--- /dev/null
+++ b/packages/sanity/src/core/components/previews/general/CompactPreview.tsx
@@ -0,0 +1,94 @@
+import {Box, Flex, Skeleton, Stack, Text, TextSkeleton, rem} from '@sanity/ui'
+import styled from 'styled-components'
+import {getDevicePixelRatio} from 'use-device-pixel-ratio'
+import {PreviewMediaDimensions, PreviewProps} from '../types'
+import {PREVIEW_SIZES} from '../constants'
+import {renderPreviewNode} from '../helpers'
+import {Media} from '../_common/Media'
+
+/**
+ * @hidden
+ * @beta */
+export type CompactPreviewProps = Omit<PreviewProps<'compact'>, 'renderDefault'>
+
+const DEFAULT_MEDIA_DIMENSIONS: PreviewMediaDimensions = {
+  ...PREVIEW_SIZES.compact.media,
+  aspect: 1,
+  fit: 'crop',
+  dpr: getDevicePixelRatio(),
+}
+
+const Root = styled(Flex)`
+  height: ${rem(PREVIEW_SIZES.compact.media.height)};
+`
+
+const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1, size: 1})`
+  max-width: ${rem(160)};
+  width: 80%;
+`
+
+/**
+ * @hidden
+ * @beta */
+export function CompactPreview(props: CompactPreviewProps) {
+  const {children, isPlaceholder, media, status, title} = props
+
+  const statusNode = status && (
+    <Box data-testid="compact-preview__status" paddingLeft={4} paddingRight={1}>
+      {renderPreviewNode(status, 'compact')}
+    </Box>
+  )
+
+  if (isPlaceholder) {
+    return (
+      <Root
+        align="center"
+        data-testid="default-preview"
+        paddingLeft={media ? 1 : 2}
+        paddingRight={2}
+        paddingY={1}
+      >
+        <Flex align="center" flex={1} gap={2}>
+          {media && <Skeleton animated radius={2} style={PREVIEW_SIZES.compact.media} />}
+
+          <Stack data-testid="compact-preview__heading" flex={1} space={2}>
+            <TitleSkeleton />
+          </Stack>
+
+          {statusNode}
+        </Flex>
+      </Root>
+    )
+  }
+
+  return (
+    <Root
+      align="center"
+      data-testid="compact-preview"
+      paddingLeft={media ? 1 : 2}
+      paddingRight={2}
+      paddingY={1}
+    >
+      <Flex align="center" flex={1} gap={2}>
+        {media && (
+          <Media
+            border={false}
+            dimensions={DEFAULT_MEDIA_DIMENSIONS}
+            layout="compact"
+            media={media as any}
+          />
+        )}
+        <Stack data-testid="compact-preview__header" flex={1} space={2}>
+          <Text size={1} style={{color: 'inherit'}} textOverflow="ellipsis" weight="medium">
+            {title && renderPreviewNode(title, 'compact')}
+            {!title && <span style={{color: 'var(--card-muted-fg-color)'}}>Untitled</span>}
+          </Text>
+        </Stack>
+
+        {statusNode}
+      </Flex>
+
+      {children && <Box marginLeft={1}>{children}</Box>}
+    </Root>
+  )
+}
diff --git a/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx b/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx
index 5c6666aa420..326e8f3d84c 100644
--- a/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx
+++ b/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
 import {useTranslation} from '../../../i18n'
 import {Media} from '../_common/Media'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 import type {PreviewMediaDimensions, PreviewProps} from '../types'
 import {renderPreviewNode} from '../helpers'
 
@@ -28,17 +28,17 @@ export interface DefaultPreviewProps extends Omit<PreviewProps<'default'>, 'rend
 }
 
 const DEFAULT_MEDIA_DIMENSIONS: PreviewMediaDimensions = {
-  ...PREVIEW_MEDIA_SIZE.default,
+  ...PREVIEW_SIZES.default.media,
   aspect: 1,
   fit: 'crop',
   dpr: getDevicePixelRatio(),
 }
 
 const Root = styled(Flex)`
-  height: ${rem(PREVIEW_MEDIA_SIZE.default.height)};
+  height: ${rem(PREVIEW_SIZES.default.media.height)};
 `
 
-const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1})`
+const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1, size: 1})`
   max-width: ${rem(160)};
   width: 80%;
 `
@@ -60,7 +60,7 @@ export function DefaultPreview(props: DefaultPreviewProps) {
     <Box
       className={styles?.status}
       data-testid="default-preview__status"
-      paddingLeft={3}
+      paddingLeft={4}
       paddingRight={1}
     >
       {renderPreviewNode(status, 'default')}
@@ -69,65 +69,74 @@ export function DefaultPreview(props: DefaultPreviewProps) {
 
   if (isPlaceholder) {
     return (
-      <Root align="center" className={styles?.placeholder} data-testid="default-preview">
-        {media !== false && (
-          <Skeleton animated marginRight={2} radius={2} style={PREVIEW_MEDIA_SIZE.default} />
-        )}
+      <Root
+        align="center"
+        className={styles?.placeholder}
+        data-testid="default-preview"
+        paddingLeft={media ? 2 : 3}
+        paddingRight={2}
+        paddingY={1}
+      >
+        <Flex align="center" flex={1} gap={3}>
+          {media && <Skeleton animated radius={2} style={PREVIEW_SIZES.default.media} />}
 
-        <Stack
-          data-testid="default-preview__heading"
-          flex={1}
-          paddingLeft={media === false ? 1 : 2}
-          paddingRight={status ? 0 : 1}
-          space={2}
-        >
-          <TitleSkeleton />
-          <SubtitleSkeleton />
-        </Stack>
+          <Stack data-testid="default-preview__heading" flex={1} space={2}>
+            <TitleSkeleton />
+            <SubtitleSkeleton />
+          </Stack>
 
-        {statusNode}
+          {statusNode}
+        </Flex>
       </Root>
     )
   }
 
   return (
-    <Root align="center" className={rootClassName} data-testid="default-preview">
-      {media !== false && media !== undefined && (
-        <Media
-          dimensions={DEFAULT_MEDIA_DIMENSIONS}
-          layout="default"
-          media={media as any}
-          styles={styles}
-        />
-      )}
+    <Root
+      align="center"
+      className={rootClassName}
+      data-testid="default-preview"
+      paddingLeft={media ? 2 : 3}
+      paddingRight={2}
+      paddingY={1}
+    >
+      <Flex align="center" flex={1} gap={3}>
+        {media && (
+          <Media
+            dimensions={DEFAULT_MEDIA_DIMENSIONS}
+            layout="default"
+            media={media as any}
+            styles={styles}
+          />
+        )}
 
-      <Stack
-        className={styles?.heading}
-        data-testid="default-preview__header"
-        flex={1}
-        paddingLeft={media ? 2 : 1}
-        paddingRight={status ? 0 : 1}
-        space={2}
-      >
-        <Text className={styles?.title} style={{color: 'inherit'}} textOverflow="ellipsis">
-          {title && renderPreviewNode(title, 'default')}
-          {!title && (
-            <span style={{color: 'var(--card-muted-fg-color)'}}>
-              {t('preview.default.title-fallback')}
-            </span>
+        <Stack className={styles?.heading} data-testid="default-preview__header" flex={1} space={2}>
+          <Text
+            className={styles?.title}
+            size={1}
+            style={{color: 'inherit'}}
+            textOverflow="ellipsis"
+            weight="medium"
+          >
+            {title && renderPreviewNode(title, 'default')}
+            {!title && (
+              <span style={{color: 'var(--card-muted-fg-color)'}}>
+                {t('preview.default.title-fallback')}
+              </span>
+            )}
+          </Text>
+
+          {subtitle && (
+            <Text muted size={1} textOverflow="ellipsis" className={styles?.subtitle}>
+              {renderPreviewNode(subtitle, 'default')}
+            </Text>
           )}
-        </Text>
+        </Stack>
 
-        {subtitle && (
-          <Text muted size={1} textOverflow="ellipsis" className={styles?.subtitle}>
-            {renderPreviewNode(subtitle, 'default')}
-          </Text>
-        )}
+        {statusNode}
 
         {children && <div className={styles?.children}>{children}</div>}
-      </Stack>
-
-      {statusNode}
+      </Flex>
     </Root>
   )
 }
diff --git a/packages/sanity/src/core/components/previews/general/DetailPreview.styled.ts b/packages/sanity/src/core/components/previews/general/DetailPreview.styled.ts
index eb891a83eec..727d456dbda 100644
--- a/packages/sanity/src/core/components/previews/general/DetailPreview.styled.ts
+++ b/packages/sanity/src/core/components/previews/general/DetailPreview.styled.ts
@@ -1,9 +1,9 @@
 import {Box, Flex, rem, Skeleton, Text, TextSkeleton} from '@sanity/ui'
 import styled, {css} from 'styled-components'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 
 export const RootFlex = styled(Flex).attrs({align: 'center'})`
-  height: ${rem(PREVIEW_MEDIA_SIZE.detail.height)};
+  height: ${rem(PREVIEW_SIZES.detail.media.height)};
 `
 
 export const StatusBox = styled(Box)`
@@ -11,11 +11,11 @@ export const StatusBox = styled(Box)`
 `
 
 export const MediaSkeleton = styled(Skeleton).attrs({animated: true, radius: 2})`
-  width: ${rem(PREVIEW_MEDIA_SIZE.detail.width)};
-  height: ${rem(PREVIEW_MEDIA_SIZE.detail.height)};
+  width: ${rem(PREVIEW_SIZES.detail.media.width)};
+  height: ${rem(PREVIEW_SIZES.detail.media.height)};
 `
 
-export const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1})`
+export const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1, size: 1})`
   max-width: ${rem(160)}; /* 80% of 200px */
   width: 80%;
 `
diff --git a/packages/sanity/src/core/components/previews/general/DetailPreview.tsx b/packages/sanity/src/core/components/previews/general/DetailPreview.tsx
index d38bd20e313..97a9f8974ef 100644
--- a/packages/sanity/src/core/components/previews/general/DetailPreview.tsx
+++ b/packages/sanity/src/core/components/previews/general/DetailPreview.tsx
@@ -3,7 +3,7 @@ import {Box, Flex, Stack, Text} from '@sanity/ui'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
 import {useTranslation} from '../../../i18n'
 import {Media} from '../_common/Media'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 import type {PreviewMediaDimensions, PreviewProps} from '../types'
 import {renderPreviewNode} from '../helpers'
 import {
@@ -22,7 +22,7 @@ import {
 export type DetailPreviewProps = PreviewProps<'detail'>
 
 const DEFAULT_MEDIA_DIMENSIONS: PreviewMediaDimensions = {
-  ...PREVIEW_MEDIA_SIZE.detail,
+  ...PREVIEW_SIZES.detail.media,
   fit: 'crop',
   aspect: 1,
   dpr: getDevicePixelRatio(),
@@ -52,39 +52,46 @@ export function DetailPreview(props: DetailPreviewProps) {
 
   if (isPlaceholder) {
     return (
-      <RootFlex data-testid="detail-preview">
-        {media !== false && <MediaSkeleton data-testid="detail-preview__media" />}
+      <RootFlex
+        data-testid="detail-preview"
+        paddingLeft={media ? 2 : 3}
+        paddingRight={2}
+        paddingY={2}
+      >
+        <Flex align="center" flex={1} gap={3}>
+          {media && <MediaSkeleton data-testid="detail-preview__media" />}
 
-        <Box flex={1} paddingLeft={media === false ? 1 : 2}>
-          <Flex align="center" data-testid="detail-preview__header">
+          <Flex align="center" data-testid="detail-preview__header" flex={1}>
             <Stack flex={1} space={2}>
               <TitleSkeleton />
               <SubtitleSkeleton />
+              {description && (
+                <Box marginTop={1}>
+                  <DescriptionSkeleton />
+                </Box>
+              )}
             </Stack>
-
-            {statusNode}
           </Flex>
 
-          {description && (
-            <Box marginTop={3}>
-              <DescriptionSkeleton />
-            </Box>
-          )}
-        </Box>
+          {statusNode}
+        </Flex>
       </RootFlex>
     )
   }
 
   return (
-    <RootFlex data-testid="detail-preview">
-      {media !== false && (
-        <Media dimensions={mediaDimensions} layout="detail" media={media as any} />
-      )}
+    <RootFlex
+      data-testid="detail-preview"
+      paddingLeft={media ? 2 : 3}
+      paddingRight={2}
+      paddingY={2}
+    >
+      <Flex align="center" flex={1} gap={3}>
+        {media && <Media dimensions={mediaDimensions} layout="detail" media={media as any} />}
 
-      <Box flex={1} paddingLeft={media === false ? 1 : 2}>
-        <Flex align="center" data-testid="detail-preview__header">
+        <Flex align="center" data-testid="detail-preview__header" flex={1}>
           <Stack flex={1} space={2}>
-            <Text textOverflow="ellipsis" style={{color: 'inherit'}}>
+            <Text textOverflow="ellipsis" size={1} style={{color: 'inherit'}} weight="medium">
               {title && renderPreviewNode(title, 'detail')}
               {!title && <>{t('preview.default.title-fallback')}</>}
             </Text>
@@ -94,21 +101,21 @@ export function DetailPreview(props: DetailPreviewProps) {
                 {renderPreviewNode(subtitle, 'detail')}
               </Text>
             )}
+
+            {description && (
+              <Box marginTop={1}>
+                <DescriptionText muted size={1}>
+                  {renderPreviewNode(description, 'detail')}
+                </DescriptionText>
+              </Box>
+            )}
           </Stack>
 
           {statusNode}
         </Flex>
 
-        {description && (
-          <Box marginTop={3}>
-            <DescriptionText muted size={1}>
-              {renderPreviewNode(description, 'detail')}
-            </DescriptionText>
-          </Box>
-        )}
-      </Box>
-
-      {children}
+        {children}
+      </Flex>
     </RootFlex>
   )
 }
diff --git a/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts b/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts
index a2bc2d44c8e..a37b38cf1e3 100644
--- a/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts
+++ b/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts
@@ -1,4 +1,4 @@
-import {Box, Flex, rem, Skeleton, Stack} from '@sanity/ui'
+import {Box, Card, Flex, rem, Skeleton, Stack} from '@sanity/ui'
 import styled from 'styled-components'
 
 export const RootBox = styled(Box)`
@@ -43,6 +43,6 @@ export const ProgressFlex = styled(Flex).attrs({align: 'center', justify: 'cente
   }
 `
 
-export const TooltipContentStack = styled(Stack).attrs({padding: 2, space: 2})`
+export const TooltipContentStack = styled(Stack).attrs({space: 2})`
   max-width: ${rem(200)};
 `
diff --git a/packages/sanity/src/core/components/previews/general/MediaPreview.tsx b/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
index 53929b31d18..4546d3c5c4c 100644
--- a/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
+++ b/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
@@ -1,9 +1,10 @@
 import React, {useMemo} from 'react'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
-import {Text, Tooltip} from '@sanity/ui'
+import {Box, Text} from '@sanity/ui'
+import {TooltipWithNodes} from '../../../../ui'
 import {CircularProgress} from '../../progress'
 import {Media} from '../_common/Media'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 import {PreviewMediaDimensions, PreviewProps} from '../types'
 import {renderPreviewNode} from '../helpers'
 import {
@@ -20,7 +21,7 @@ import {
 export type MediaPreviewProps = Omit<PreviewProps<'media'>, 'renderDefault'>
 
 const DEFAULT_MEDIA_DIMENSIONS: PreviewMediaDimensions = {
-  ...PREVIEW_MEDIA_SIZE.media,
+  ...PREVIEW_SIZES.media.media,
   aspect: 1,
   fit: 'crop',
   dpr: getDevicePixelRatio(),
@@ -54,7 +55,7 @@ export function MediaPreview(props: MediaPreviewProps) {
     return (
       <TooltipContentStack>
         {title && (
-          <Text align="center" size={1} weight="semibold">
+          <Text align="center" size={1} weight="medium">
             {renderPreviewNode(title, 'media')}
           </Text>
         )}
@@ -69,33 +70,40 @@ export function MediaPreview(props: MediaPreviewProps) {
   }, [subtitle, title])
 
   return (
-    <RootBox data-testid="media-preview" overflow="hidden" flex={1}>
-      <div style={STYLES_PADDER} />
+    <Box padding={2}>
+      <RootBox data-testid="media-preview" flex={1} overflow="hidden">
+        <div style={STYLES_PADDER} />
 
-      <Tooltip content={tooltipContent} disabled={!tooltipContent} placement="top" portal>
-        <MediaFlex>
-          {isPlaceholder ? (
-            <MediaSkeleton />
-          ) : (
-            <Media
-              border={withBorder}
-              dimensions={mediaDimensions}
-              layout="media"
-              media={media as any}
-              radius={withRadius ? 1 : 0}
-              responsive
-            />
-          )}
+        <TooltipWithNodes
+          content={tooltipContent}
+          disabled={!tooltipContent}
+          placement="top"
+          portal
+        >
+          <MediaFlex>
+            {isPlaceholder ? (
+              <MediaSkeleton />
+            ) : (
+              <Media
+                border={withBorder}
+                dimensions={mediaDimensions}
+                layout="media"
+                media={media as any}
+                radius={withRadius ? 1 : 0}
+                responsive
+              />
+            )}
 
-          {typeof progress === 'number' && progress > -1 && (
-            <ProgressFlex>
-              <CircularProgress value={progress} />
-            </ProgressFlex>
-          )}
-        </MediaFlex>
-      </Tooltip>
+            {typeof progress === 'number' && progress > -1 && (
+              <ProgressFlex>
+                <CircularProgress value={progress} />
+              </ProgressFlex>
+            )}
+          </MediaFlex>
+        </TooltipWithNodes>
 
-      {children}
-    </RootBox>
+        {children}
+      </RootBox>
+    </Box>
   )
 }
diff --git a/packages/sanity/src/core/components/previews/index.ts b/packages/sanity/src/core/components/previews/index.ts
index b47c0e4bfdd..bb8f11ac431 100644
--- a/packages/sanity/src/core/components/previews/index.ts
+++ b/packages/sanity/src/core/components/previews/index.ts
@@ -1,6 +1,7 @@
 export * from './types'
 
 // General previews
+export * from './general/CompactPreview'
 export * from './general/DefaultPreview'
 export * from './general/DetailPreview'
 export * from './general/MediaPreview'
diff --git a/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.styled.tsx b/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.styled.tsx
index d5bbb167efe..c8debd7ca63 100644
--- a/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.styled.tsx
+++ b/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.styled.tsx
@@ -1,16 +1,16 @@
 import {Box, Card, Flex, rem} from '@sanity/ui'
 import styled from 'styled-components'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 
 export const HeaderFlex = styled(Flex).attrs({align: 'center'})`
-  box-shadow: 0 0 0 1px var(--card-border-color);
-  height: ${rem(PREVIEW_MEDIA_SIZE.block.height)};
+  height: ${rem(PREVIEW_SIZES.block.media.height)};
   white-space: nowrap;
   position: relative;
   z-index: 1;
 `
 
 export const MediaCard = styled(Card)<{$ratio: number}>`
+  overflow: hidden;
   position: relative;
   padding-bottom: ${({$ratio}) => $ratio}%;
 
diff --git a/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.tsx b/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.tsx
index 48841bdd5c6..1a1c785bf0f 100644
--- a/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.tsx
+++ b/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.tsx
@@ -2,7 +2,7 @@ import {Box, Flex, Stack, Text} from '@sanity/ui'
 import React from 'react'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
 import {Media} from '../_common/Media'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 import {PreviewMediaDimensions, PreviewProps} from '../types'
 import {renderPreviewNode} from '../helpers'
 import {HeaderFlex, MediaCard, RootBox} from './BlockImagePreview.styled'
@@ -13,7 +13,7 @@ import {HeaderFlex, MediaCard, RootBox} from './BlockImagePreview.styled'
 export type BlockImagePreviewProps = Omit<PreviewProps<'blockImage'>, 'renderDefault'>
 
 const DEFAULT_MEDIA_DIMENSIONS: PreviewMediaDimensions = {
-  ...PREVIEW_MEDIA_SIZE.blockImage,
+  ...PREVIEW_SIZES.blockImage.media,
   fit: 'fillmax',
   dpr: getDevicePixelRatio(),
 }
@@ -47,10 +47,10 @@ export function BlockImagePreview(props: BlockImagePreviewProps) {
   return (
     <RootBox>
       <Stack>
-        <HeaderFlex paddingLeft={2} paddingRight={1} paddingY={1}>
+        <HeaderFlex paddingBottom={3} paddingLeft={2} paddingRight={1} paddingTop={1}>
           <Stack flex={1} space={2}>
             {(title || fallbackTitle) && (
-              <Text size={1} textOverflow="ellipsis" weight="semibold">
+              <Text size={1} textOverflow="ellipsis" weight="medium">
                 {title ? renderPreviewNode(title as any, 'block') : fallbackTitle}
               </Text>
             )}
@@ -78,6 +78,7 @@ export function BlockImagePreview(props: BlockImagePreviewProps) {
           __unstable_checkered
           display="flex"
           sizing="border"
+          radius={2}
           tone="inherit"
         >
           <Media
diff --git a/packages/sanity/src/core/components/previews/portableText/BlockPreview.tsx b/packages/sanity/src/core/components/previews/portableText/BlockPreview.tsx
index b8475c9f0e5..4420da9b659 100644
--- a/packages/sanity/src/core/components/previews/portableText/BlockPreview.tsx
+++ b/packages/sanity/src/core/components/previews/portableText/BlockPreview.tsx
@@ -3,19 +3,19 @@ import React from 'react'
 import styled from 'styled-components'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
 import {Media} from '../_common/Media'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 import {PreviewMediaDimensions, PreviewProps} from '../types'
 import {renderPreviewNode} from '../helpers'
 
 const DEFAULT_MEDIA_DIMENSIONS: PreviewMediaDimensions = {
-  ...PREVIEW_MEDIA_SIZE.block,
+  ...PREVIEW_SIZES.block.media,
   aspect: 1,
   fit: 'crop',
   dpr: getDevicePixelRatio(),
 }
 
 const HeaderFlex = styled(Flex).attrs({align: 'center'})`
-  min-height: ${rem(PREVIEW_MEDIA_SIZE.block.height)};
+  min-height: ${rem(PREVIEW_SIZES.block.media.height)};
 `
 
 /**
@@ -39,7 +39,7 @@ export function BlockPreview(props: Omit<PreviewProps<'block'>, 'renderDefault'>
         {media && <Media dimensions={mediaDimensions} layout="block" media={media as any} />}
 
         <Box flex={1} paddingLeft={media ? 2 : 1}>
-          <Text size={1} textOverflow="ellipsis" weight="semibold">
+          <Text size={1} textOverflow="ellipsis" weight="medium">
             {title ? renderPreviewNode(title, 'block') : 'Untitled'}
           </Text>
 
diff --git a/packages/sanity/src/core/components/previews/portableText/InlinePreview.tsx b/packages/sanity/src/core/components/previews/portableText/InlinePreview.tsx
index 58c431ff8a4..2e082f0dafa 100644
--- a/packages/sanity/src/core/components/previews/portableText/InlinePreview.tsx
+++ b/packages/sanity/src/core/components/previews/portableText/InlinePreview.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 import {renderPreviewMedia, renderPreviewNode} from '../helpers'
 import {PreviewMediaDimensions, PreviewProps} from '../types'
 import {RootSpan, MediaSpan, TextSpan} from './InlinePreview.styled'
@@ -11,7 +11,7 @@ import {RootSpan, MediaSpan, TextSpan} from './InlinePreview.styled'
 export type InlinePreviewProps = Omit<PreviewProps<'inline'>, 'renderDefault'>
 
 const DEFAULT_MEDIA_DIMENSIONS: PreviewMediaDimensions = {
-  ...PREVIEW_MEDIA_SIZE.inline,
+  ...PREVIEW_SIZES.inline.media,
   fit: 'crop',
   aspect: 1,
   dpr: getDevicePixelRatio(),
diff --git a/packages/sanity/src/core/components/previews/template/TemplatePreview.tsx b/packages/sanity/src/core/components/previews/template/TemplatePreview.tsx
index 6c7bebebc9a..9153d69da25 100644
--- a/packages/sanity/src/core/components/previews/template/TemplatePreview.tsx
+++ b/packages/sanity/src/core/components/previews/template/TemplatePreview.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
 import {PreviewMediaDimensions} from '../types'
 import {Media, MediaProps} from '../_common/Media'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 
 /**
  * @hidden
@@ -20,7 +20,7 @@ export interface TemplatePreviewProps {
 }
 
 const DEFAULT_MEDIA_DIMENSION: PreviewMediaDimensions = {
-  ...PREVIEW_MEDIA_SIZE.default,
+  ...PREVIEW_SIZES.default.media,
   aspect: 1,
   fit: 'crop',
   dpr: getDevicePixelRatio(),
@@ -40,7 +40,7 @@ const Root = styled(Box)`
 `
 
 const HeaderFlex = styled(Flex).attrs({align: 'center'})`
-  height: ${rem(PREVIEW_MEDIA_SIZE.default.height)};
+  height: ${rem(PREVIEW_SIZES.default.media.height)};
 `
 
 const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1})`
diff --git a/packages/sanity/src/core/components/previews/types.ts b/packages/sanity/src/core/components/previews/types.ts
index 105b360e3db..09c6c18d1f2 100644
--- a/packages/sanity/src/core/components/previews/types.ts
+++ b/packages/sanity/src/core/components/previews/types.ts
@@ -13,7 +13,7 @@ export type PortableTextPreviewLayoutKey = 'block' | 'blockImage' | 'inline'
  *
  * @public
  */
-export type GeneralPreviewLayoutKey = 'default' | 'media' | 'detail'
+export type GeneralPreviewLayoutKey = 'compact' | 'default' | 'media' | 'detail'
 
 /**
  * Preview layout key. See also {@link GeneralPreviewLayoutKey} and {@link PortableTextPreviewLayoutKey}
diff --git a/packages/sanity/src/core/components/rovingFocus/__tests__/useRovingFocus.test.tsx b/packages/sanity/src/core/components/rovingFocus/__tests__/useRovingFocus.test.tsx
index 56484a2f9b0..8f0b09cd953 100644
--- a/packages/sanity/src/core/components/rovingFocus/__tests__/useRovingFocus.test.tsx
+++ b/packages/sanity/src/core/components/rovingFocus/__tests__/useRovingFocus.test.tsx
@@ -3,8 +3,9 @@ import '@testing-library/jest-dom/extend-expect'
 import {render, fireEvent} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React, {useState} from 'react'
-import {Button, Card, studioTheme, ThemeProvider} from '@sanity/ui'
+import {Card, studioTheme, ThemeProvider} from '@sanity/ui'
 import {RovingFocusProps} from '../types'
+import {Button} from '../../../../ui'
 import {useRovingFocus} from '../useRovingFocus'
 
 interface TestProps extends Pick<RovingFocusProps, 'direction' | 'initialFocus' | 'loop'> {
diff --git a/packages/sanity/src/core/components/rovingFocus/__workshop__/RovingFocusStory.tsx b/packages/sanity/src/core/components/rovingFocus/__workshop__/RovingFocusStory.tsx
index af2ea21e98d..081eee99cf0 100644
--- a/packages/sanity/src/core/components/rovingFocus/__workshop__/RovingFocusStory.tsx
+++ b/packages/sanity/src/core/components/rovingFocus/__workshop__/RovingFocusStory.tsx
@@ -1,7 +1,8 @@
-import {Button, Card, Flex} from '@sanity/ui'
+import {Card, Flex} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import React, {useState} from 'react'
 import {useRovingFocus} from '../useRovingFocus'
+import {Button} from '../../../../ui'
 
 const DIRECTION_OPTIONS: Record<string, 'horizontal' | 'vertical'> = {
   horizontal: 'horizontal',
@@ -48,8 +49,6 @@ export default function RovingFocusStory() {
               disabled={Boolean(withDisabled && num % 2)}
               key={num}
               mode="ghost"
-              padding={2}
-              fontSize={1}
             />
           ))}
         </Flex>
diff --git a/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx b/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
index 1ed0aefd150..48730df5bdd 100644
--- a/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
+++ b/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
@@ -1,14 +1,16 @@
-import {Avatar, AvatarPosition, AvatarSize, AvatarStatus, Box, Text, Tooltip} from '@sanity/ui'
+import {Avatar, AvatarPosition, AvatarProps, AvatarSize, AvatarStatus} from '@sanity/ui'
 import React, {forwardRef, useState} from 'react'
 import type {User} from '@sanity/types'
 import {useUser} from '../../store'
 import {isRecord} from '../../util'
 import {useUserColor} from '../../user-color'
+import {Tooltip} from '../../../ui'
 
 /**
  * @hidden
  * @beta */
 export interface UserAvatarProps {
+  __unstable_hideInnerStroke?: AvatarProps['__unstable_hideInnerStroke']
   animateArrowFrom?: AvatarPosition
   position?: AvatarPosition
   size?: AvatarSize
@@ -60,15 +62,7 @@ function TooltipUserAvatar(props: Omit<UserAvatarProps, 'user'> & {user: User})
   } = props
 
   return (
-    <Tooltip
-      content={
-        <Box padding={2}>
-          <Text size={1}>{displayName}</Text>
-        </Box>
-      }
-      placement="top"
-      portal
-    >
+    <Tooltip content={displayName} placement="top" portal>
       <div style={{display: 'inline-block'}}>
         <StaticUserAvatar {...props} />
       </div>
@@ -87,6 +81,7 @@ const StaticUserAvatar = forwardRef(function StaticUserAvatar(
 
   return (
     <Avatar
+      __unstable_hideInnerStroke
       animateArrowFrom={animateArrowFrom}
       arrowPosition={position}
       color={userColor.name}
diff --git a/packages/sanity/src/core/config/createDefaultIcon.tsx b/packages/sanity/src/core/config/createDefaultIcon.tsx
index 2c5a9efa0fe..eb61b68c7ee 100644
--- a/packages/sanity/src/core/config/createDefaultIcon.tsx
+++ b/packages/sanity/src/core/config/createDefaultIcon.tsx
@@ -12,9 +12,9 @@ function pseudoRandomNumber(seed: string) {
 }
 
 const SvgText = styled.text`
-  font-family: ${({theme}) => theme.sanity.fonts.heading.family};
-  font-weight: ${({theme}) => theme.sanity.fonts.heading.weights.bold};
-  font-size: 16px;
+  font-family: ${({theme}) => theme.sanity.fonts.text.family};
+  font-weight: ${({theme}) => theme.sanity.fonts.text.weights.medium};
+  font-size: ${({theme}) => theme.sanity.fonts.text.sizes[1].fontSize}px;
   transform: translateY(1px);
 `
 
diff --git a/packages/sanity/src/core/config/document/actions.ts b/packages/sanity/src/core/config/document/actions.ts
index f5785606a8a..ebc5eb16730 100644
--- a/packages/sanity/src/core/config/document/actions.ts
+++ b/packages/sanity/src/core/config/document/actions.ts
@@ -1,6 +1,7 @@
 import {type ButtonTone} from '@sanity/ui'
 import type React from 'react'
 import {type EditStateFor} from '../../store/_legacy'
+import {DialogProps} from '../../../ui'
 
 /**
  * @hidden
@@ -52,9 +53,9 @@ export interface DocumentActionConfirmDialogProps {
   onConfirm: () => void
   onCancel: () => void
   cancelButtonIcon?: React.ComponentType | React.ReactNode
-  cancelButtonText?: React.ReactNode
+  cancelButtonText?: string
   confirmButtonIcon?: React.ComponentType | React.ReactNode
-  confirmButtonText?: React.ReactNode
+  confirmButtonText?: string
 }
 
 /**
@@ -68,7 +69,7 @@ export interface DocumentActionModalDialogProps {
    * @hidden
    * @beta
    */
-  footer?: React.ReactNode
+  footer?: DialogProps['footer']
   /**
    *
    * @hidden
diff --git a/packages/sanity/src/core/config/prepareConfig.ts b/packages/sanity/src/core/config/prepareConfig.ts
index efb756ce18d..8ce1dad46d9 100644
--- a/packages/sanity/src/core/config/prepareConfig.ts
+++ b/packages/sanity/src/core/config/prepareConfig.ts
@@ -185,6 +185,7 @@ export function prepareConfig(
       dataset: rootSource.dataset,
       schema: resolvedSources[0].schema,
       i18n: resolvedSources[0].i18n,
+      customIcon: !!rootSource.icon,
       icon: normalizeIcon(rootSource.icon, title, `${rootSource.projectId} ${rootSource.dataset}`),
       name: rootSource.name || 'default',
       projectId: rootSource.projectId,
diff --git a/packages/sanity/src/core/config/studio/types.ts b/packages/sanity/src/core/config/studio/types.ts
index fb68030c958..cd043ee4013 100644
--- a/packages/sanity/src/core/config/studio/types.ts
+++ b/packages/sanity/src/core/config/studio/types.ts
@@ -52,6 +52,7 @@ export interface StudioComponents {
  * @beta */
 export interface StudioComponentsPluginOptions {
   layout?: React.ComponentType<LayoutProps>
+  /** @deprecated Use logoMark instead */
   logo?: React.ComponentType<LogoProps>
   navbar?: React.ComponentType<NavbarProps>
   toolMenu?: React.ComponentType<ToolMenuProps>
diff --git a/packages/sanity/src/core/config/types.ts b/packages/sanity/src/core/config/types.ts
index b520d0fb48e..7f9c866bfea 100644
--- a/packages/sanity/src/core/config/types.ts
+++ b/packages/sanity/src/core/config/types.ts
@@ -107,6 +107,8 @@ export interface Tool<Options = any> {
 
   /**
    * React component for the icon representing the tool.
+   *
+   * @deprecated Tool icons are no longer displayed.
    */
   icon?: ComponentType
 
@@ -716,7 +718,13 @@ export interface WorkspaceSummary {
   type: 'workspace-summary'
   name: string
   title: string
+  /**
+   * User supplied component if provided, otherwise falls back to
+   * an automatically generated default icon.
+   */
   icon: ReactNode
+  /** Returns true if a custom icon has been provided in studio config */
+  customIcon: boolean
   subtitle?: string
   basePath: string
   auth: AuthStore
diff --git a/packages/sanity/src/core/field/__workshop__/DiffErrorBoundaryStory.tsx b/packages/sanity/src/core/field/__workshop__/DiffErrorBoundaryStory.tsx
index 2b0ed01319c..be0b6825266 100644
--- a/packages/sanity/src/core/field/__workshop__/DiffErrorBoundaryStory.tsx
+++ b/packages/sanity/src/core/field/__workshop__/DiffErrorBoundaryStory.tsx
@@ -1,6 +1,7 @@
-import {Box, Button} from '@sanity/ui'
+import {Box} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {DiffErrorBoundary} from '../diff/components/DiffErrorBoundary'
+import {Button} from '../../../ui'
 import {useTranslation} from '../../i18n'
 
 export default function DiffErrorBoundaryStory() {
diff --git a/packages/sanity/src/core/field/diff/components/ChangeList.styled.tsx b/packages/sanity/src/core/field/diff/components/ChangeList.styled.tsx
index 93a37cb7903..23de881415e 100644
--- a/packages/sanity/src/core/field/diff/components/ChangeList.styled.tsx
+++ b/packages/sanity/src/core/field/diff/components/ChangeList.styled.tsx
@@ -1,16 +1,6 @@
-import {Popover} from '@sanity/ui'
 import styled from 'styled-components'
 
 export const ChangeListWrapper = styled.div`
   display: grid;
   grid-template-columns: minmax(0, 1fr);
 `
-
-export const PopoverWrapper = styled(Popover)`
-  /* hides the popover when the target of it has left the visible part of the window.
-   without it, the popover will be on top of the headers (document title & changes)
-   and footers (changed notifications, publish button etc)*/
-  &[data-popper-reference-hidden='true'] {
-    display: none;
-  }
-`
diff --git a/packages/sanity/src/core/field/diff/components/ChangeList.tsx b/packages/sanity/src/core/field/diff/components/ChangeList.tsx
index cacc649bb20..f3b70d04255 100644
--- a/packages/sanity/src/core/field/diff/components/ChangeList.tsx
+++ b/packages/sanity/src/core/field/diff/components/ChangeList.tsx
@@ -1,4 +1,4 @@
-import {Button, Box, Card, Grid, Stack, useClickOutside} from '@sanity/ui'
+import {Box, Card, Grid, Popover, Stack, Text, useClickOutside} from '@sanity/ui'
 import {RevertIcon} from '@sanity/icons'
 import React, {useCallback, useContext, useMemo, useState} from 'react'
 import {SanityDocument} from '@sanity/client'
@@ -11,10 +11,11 @@ import {undoChange} from '../changes/undoChange'
 import {useDocumentChange} from '../hooks/useDocumentChange'
 import {useDocumentPairPermissions} from '../../../store'
 import {useDocumentOperation} from '../../../hooks'
+import {Button} from '../../../../ui'
 import {useTranslation} from '../../../i18n'
 import {ChangeResolver} from './ChangeResolver'
 import {NoChanges} from './NoChanges'
-import {ChangeListWrapper, PopoverWrapper} from './ChangeList.styled'
+import {ChangeListWrapper} from './ChangeList.styled'
 
 /** @internal */
 export interface ChangeListProps {
@@ -115,12 +116,16 @@ export function ChangeList({diff, fields, schemaType}: ChangeListProps): React.R
         </Stack>
 
         {showFooter && isComparingCurrent && !isPermissionsLoading && permissions?.granted && (
-          <PopoverWrapper
+          <Popover
             content={
-              <Box>
-                {t('changes.action.revert-all-description', {
-                  count: changes.length,
-                })}
+              <Stack space={1}>
+                <Box padding={1}>
+                  <Text size={1}>
+                    {t('changes.action.revert-all-description', {
+                      count: changes.length,
+                    })}
+                  </Text>
+                </Box>
                 <Grid columns={2} gap={2} marginTop={2}>
                   <Button
                     mode="ghost"
@@ -133,10 +138,10 @@ export function ChangeList({diff, fields, schemaType}: ChangeListProps): React.R
                     onClick={revertAllChanges}
                   />
                 </Grid>
-              </Box>
+              </Stack>
             }
             open={confirmRevertAllOpen}
-            padding={4}
+            padding={3}
             placement={'left'}
             portal
             ref={setRevertAllContainerElement}
@@ -151,9 +156,10 @@ export function ChangeList({diff, fields, schemaType}: ChangeListProps): React.R
                 onMouseEnter={handleRevertAllChangesMouseEnter}
                 onMouseLeave={handleRevertAllChangesMouseLeave}
                 disabled={isReadOnly}
+                size="large"
               />
             </Stack>
-          </PopoverWrapper>
+          </Popover>
         )}
       </Stack>
     </Card>
diff --git a/packages/sanity/src/core/field/diff/components/ChangeTitleSegment.tsx b/packages/sanity/src/core/field/diff/components/ChangeTitleSegment.tsx
index 7046efcd8d1..e53e349f478 100644
--- a/packages/sanity/src/core/field/diff/components/ChangeTitleSegment.tsx
+++ b/packages/sanity/src/core/field/diff/components/ChangeTitleSegment.tsx
@@ -27,7 +27,7 @@ export function ChangeTitleSegment(props: {
   if (typeof segment === 'string') {
     return (
       <Box>
-        <Text title={segment} size={1} weight="semibold" textOverflow="ellipsis">
+        <Text title={segment} size={1} weight="medium" textOverflow="ellipsis">
           {segment}
         </Text>
       </Box>
@@ -56,7 +56,7 @@ export function ChangeTitleSegment(props: {
   const readableIndex = (toIndex || 0) + 1
   return (
     <Box padding={1}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         #{readableIndex}
       </Text>
     </Box>
@@ -79,12 +79,7 @@ function CreatedTitleSegment(props: {
   if (annotation) {
     return (
       <DiffCard annotation={annotation} tooltip={{description}} as={RoundedCard}>
-        <AnnotationText
-          size={1}
-          weight="semibold"
-          forwardedAs="ins"
-          style={{textDecoration: 'none'}}
-        >
+        <AnnotationText size={1} weight="medium" forwardedAs="ins" style={{textDecoration: 'none'}}>
           {content}
         </AnnotationText>
       </DiffCard>
@@ -92,7 +87,7 @@ function CreatedTitleSegment(props: {
   }
 
   return (
-    <Text size={1} weight="semibold">
+    <Text size={1} weight="medium">
       {content}
     </Text>
   )
@@ -105,7 +100,7 @@ function DeletedTitleSegment(props: {annotation: Annotation | undefined; fromInd
   const description = t('changes.array.item-removed-from-position', {position: readableIndex})
   return (
     <DiffCard annotation={annotation || null} as={RoundedCard} tooltip={{description}}>
-      <AnnotationText size={1} weight="semibold" forwardedAs="del">
+      <AnnotationText size={1} weight="medium" forwardedAs="del">
         #{readableIndex}
       </AnnotationText>
     </DiffCard>
@@ -131,12 +126,12 @@ function MovedTitleSegment(props: {
   return (
     <>
       <Box padding={1}>
-        <AnnotationText size={1} weight="semibold">
+        <AnnotationText size={1} weight="medium">
           #{toIndex + 1}
         </AnnotationText>
       </Box>
       <DiffCard annotation={annotation} as={RoundedCard} tooltip={{description}}>
-        <AnnotationText size={1} weight="semibold">
+        <AnnotationText size={1} weight="medium">
           {indexSymbol}
           {Math.abs(indexDiff)}
         </AnnotationText>
diff --git a/packages/sanity/src/core/field/diff/components/DiffInspectWrapper.tsx b/packages/sanity/src/core/field/diff/components/DiffInspectWrapper.tsx
index 0ab95f613de..c467b81aaa0 100644
--- a/packages/sanity/src/core/field/diff/components/DiffInspectWrapper.tsx
+++ b/packages/sanity/src/core/field/diff/components/DiffInspectWrapper.tsx
@@ -1,4 +1,4 @@
-import {Box, BoxProps, Card, Code, Label, Stack} from '@sanity/ui'
+import {Box, BoxProps, Card, Code, Stack, Text} from '@sanity/ui'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import styled, {type ExecutionProps} from 'styled-components'
 import {useTranslation} from '../../../i18n'
@@ -55,9 +55,9 @@ export function DiffInspectWrapper(props: DiffInspectWrapperProps & BoxProps): R
 
 const MetaLabel = ({title}: {title: string}) => (
   <Box padding={3} display="inline-block" as={Meta}>
-    <Label size={1} muted>
+    <Text muted size={1} weight="medium">
       {title}
-    </Label>
+    </Text>
   </Box>
 )
 
diff --git a/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx b/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
index eed329615d4..40e8f21ca03 100644
--- a/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
+++ b/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
@@ -1,6 +1,7 @@
 import type {Path} from '@sanity/types'
-import {Tooltip, TooltipProps, Text, Stack, Flex, Inline, Label} from '@sanity/ui'
+import {Text, Stack, Flex, Inline} from '@sanity/ui'
 import React from 'react'
+import {TooltipWithNodes, TooltipWithNodesProps} from '../../../../ui'
 import {LegacyLayerProvider, UserAvatar} from '../../../components'
 import {useRelativeTime} from '../../../hooks'
 import {useUser} from '../../../store'
@@ -9,7 +10,7 @@ import type {AnnotationDetails, Diff} from '../../types'
 import {getAnnotationAtPath, useAnnotationColor} from '../annotations'
 
 /** @internal */
-export interface DiffTooltipProps extends TooltipProps {
+export interface DiffTooltipProps extends TooltipWithNodesProps {
   children: React.ReactElement
   description?: React.ReactNode
   diff: Diff
@@ -17,7 +18,7 @@ export interface DiffTooltipProps extends TooltipProps {
 }
 
 /** @internal */
-export interface DiffTooltipWithAnnotationsProps extends TooltipProps {
+export interface DiffTooltipWithAnnotationsProps extends TooltipWithNodesProps {
   annotations: AnnotationDetails[]
   children: React.ReactElement
   description?: React.ReactNode
@@ -44,10 +45,10 @@ function DiffTooltipWithAnnotation(props: DiffTooltipWithAnnotationsProps) {
   }
 
   const content = (
-    <Stack padding={3} space={2}>
-      <Label size={1} style={{textTransform: 'uppercase'}}>
+    <Stack space={2}>
+      <Text muted size={1} weight="medium">
         {description || t('changes.changed-label')}
-      </Label>
+      </Text>
       <Stack space={2}>
         {annotations.map((annotation, idx) => (
           <AnnotationItem annotation={annotation} key={idx} />
@@ -58,9 +59,9 @@ function DiffTooltipWithAnnotation(props: DiffTooltipWithAnnotationsProps) {
 
   return (
     <LegacyLayerProvider zOffset="paneFooter">
-      <Tooltip content={content} portal {...restProps}>
+      <TooltipWithNodes content={content} portal {...restProps}>
         {children}
-      </Tooltip>
+      </TooltipWithNodes>
     </LegacyLayerProvider>
   )
 }
diff --git a/packages/sanity/src/core/field/diff/components/FieldChange.styled.tsx b/packages/sanity/src/core/field/diff/components/FieldChange.styled.tsx
index ff39305f8c7..4e28f11ba55 100644
--- a/packages/sanity/src/core/field/diff/components/FieldChange.styled.tsx
+++ b/packages/sanity/src/core/field/diff/components/FieldChange.styled.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import {rem, Popover} from '@sanity/ui'
+import {rem} from '@sanity/ui'
 
 export const FieldChangeContainer = styled.div`
   --field-change-error: ${({theme}) => theme.sanity.color.solid.critical.enabled.bg};
@@ -32,12 +32,3 @@ export const DiffBorder = styled.div`
     border-left: 2px solid var(--field-change-error);
   }
 `
-
-export const PopoverWrapper = styled(Popover)`
-  /* hides the popover when the target of it has left the visible part of the window.
-   without it, the popover will be on top of the headers (document title & changes)
-   and footers (changed notifications, publish button etc)*/
-  &[data-popper-reference-hidden='true'] {
-    display: none;
-  }
-`
diff --git a/packages/sanity/src/core/field/diff/components/FieldChange.tsx b/packages/sanity/src/core/field/diff/components/FieldChange.tsx
index 650bb2b24a3..c8465b8605d 100644
--- a/packages/sanity/src/core/field/diff/components/FieldChange.tsx
+++ b/packages/sanity/src/core/field/diff/components/FieldChange.tsx
@@ -1,7 +1,8 @@
 import React, {useCallback, useMemo, useState} from 'react'
-import {Stack, Box, Button, Text, Grid, useClickOutside} from '@sanity/ui'
+import {Box, Grid, Popover, Stack, Text, useClickOutside} from '@sanity/ui'
 import {ObjectSchemaType} from '@sanity/types'
 import {useDocumentOperation} from '../../../hooks'
+import {Button} from '../../../../ui'
 import {FieldChangeNode, FieldOperationsAPI} from '../../types'
 import {undoChange} from '../changes/undoChange'
 import {DiffContext} from '../contexts/DiffContext'
@@ -14,7 +15,7 @@ import {DiffInspectWrapper} from './DiffInspectWrapper'
 import {FallbackDiff} from './FallbackDiff'
 import {RevertChangesButton} from './RevertChangesButton'
 import {ValueError} from './ValueError'
-import {FieldChangeContainer, DiffBorder, PopoverWrapper} from './FieldChange.styled'
+import {FieldChangeContainer, DiffBorder} from './FieldChange.styled'
 
 /** @internal */
 export function FieldChange(
@@ -106,39 +107,44 @@ export function FieldChange(
               )}
 
               {isComparingCurrent && !isPermissionsLoading && permissions?.granted && (
-                <PopoverWrapper
+                <Popover
                   content={
-                    <Box padding={3} sizing="border">
-                      {t('changes.action.revert-changes-description', {count: 1})}
+                    <Stack space={1}>
+                      <Box padding={1}>
+                        <Text size={1}>
+                          {t('changes.action.revert-changes-description', {count: 1})}
+                        </Text>
+                      </Box>
                       <Grid columns={2} gap={2} marginTop={2}>
-                        <Button mode="ghost" onClick={closeRevertChangesConfirmDialog}>
-                          <Text align="center">{t('changes.action.revert-all-cancel')}</Text>
-                        </Button>
-                        <Button tone="critical" onClick={handleRevertChanges}>
-                          <Text align="center">
-                            {t('changes.action.revert-changes-confirm-change', {count: 1})}
-                          </Text>
-                        </Button>
+                        <Button
+                          mode="ghost"
+                          onClick={closeRevertChangesConfirmDialog}
+                          text={t('changes.action.revert-all-cancel')}
+                        />
+                        <Button
+                          tone="critical"
+                          onClick={handleRevertChanges}
+                          text={t('changes.action.revert-changes-confirm-change', {count: 1})}
+                        />
                       </Grid>
-                    </Box>
+                    </Stack>
                   }
                   open={confirmRevertOpen}
+                  padding={3}
                   portal
                   placement="left"
                   ref={setRevertButtonElement}
                 >
-                  <Box flex={1}>
-                    <RevertChangesButton
-                      changeCount={1}
-                      onClick={handleRevertChangesConfirm}
-                      onMouseEnter={handleRevertButtonMouseEnter}
-                      onMouseLeave={handleRevertButtonMouseLeave}
-                      selected={confirmRevertOpen}
-                      disabled={readOnly}
-                      data-testid={`single-change-revert-button-${change?.key}`}
-                    />
-                  </Box>
-                </PopoverWrapper>
+                  <RevertChangesButton
+                    changeCount={1}
+                    onClick={handleRevertChangesConfirm}
+                    onMouseEnter={handleRevertButtonMouseEnter}
+                    onMouseLeave={handleRevertButtonMouseLeave}
+                    selected={confirmRevertOpen}
+                    disabled={readOnly}
+                    data-testid={`single-change-revert-button-${change?.key}`}
+                  />
+                </Popover>
               )}
             </DiffInspectWrapper>
           </FieldWrapper>
diff --git a/packages/sanity/src/core/field/diff/components/GroupChange.styled.tsx b/packages/sanity/src/core/field/diff/components/GroupChange.styled.tsx
index c01f71e7186..74bf8fba15d 100644
--- a/packages/sanity/src/core/field/diff/components/GroupChange.styled.tsx
+++ b/packages/sanity/src/core/field/diff/components/GroupChange.styled.tsx
@@ -30,12 +30,3 @@ export const GroupChangeContainer = styled.div`
     border-left: 2px solid var(--field-change-error);
   }
 `
-
-export const PopoverWrapper = styled(Popover)`
-  /* hides the popover when the target of it has left the visible part of the window.
-   without it, the popover will be on top of the headers (document title & changes)
-   and footers (changed notifications, publish button etc)*/
-  &[data-popper-reference-hidden='true'] {
-    display: none;
-  }
-`
diff --git a/packages/sanity/src/core/field/diff/components/GroupChange.tsx b/packages/sanity/src/core/field/diff/components/GroupChange.tsx
index a53f8d5fe9d..9927c23196e 100644
--- a/packages/sanity/src/core/field/diff/components/GroupChange.tsx
+++ b/packages/sanity/src/core/field/diff/components/GroupChange.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useContext, useMemo, useState} from 'react'
-import {Box, Stack, Button, Grid, Text, useClickOutside} from '@sanity/ui'
+import {Box, Grid, Popover, Stack, Text, useClickOutside} from '@sanity/ui'
+import {Button} from '../../../../ui'
 import {useDocumentOperation} from '../../../hooks'
 import {undoChange} from '../changes/undoChange'
 import {isFieldChange} from '../helpers'
@@ -14,7 +15,7 @@ import {useTranslation} from '../../../i18n'
 import {ChangeBreadcrumb} from './ChangeBreadcrumb'
 import {ChangeResolver} from './ChangeResolver'
 import {RevertChangesButton} from './RevertChangesButton'
-import {ChangeListWrapper, GroupChangeContainer, PopoverWrapper} from './GroupChange.styled'
+import {ChangeListWrapper, GroupChangeContainer} from './GroupChange.styled'
 
 /** @internal */
 export function GroupChange(
@@ -82,24 +83,30 @@ export function GroupChange(
             ))}
           </Stack>
           {isComparingCurrent && !isPermissionsLoading && permissions?.granted && (
-            <PopoverWrapper
+            <Popover
               content={
-                <Box>
-                  {t('changes.action.revert-changes-description', {count: changes.length})}
+                <Stack space={1}>
+                  <Box padding={1}>
+                    <Text size={1}>
+                      {t('changes.action.revert-changes-description', {count: changes.length})}
+                    </Text>
+                  </Box>
                   <Grid columns={2} gap={2} marginTop={2}>
-                    <Button mode="ghost" onClick={closeRevertChangesConfirmDialog}>
-                      <Text align="center"> {t('changes.action.revert-all-cancel')}</Text>
-                    </Button>
-                    <Button tone="critical" onClick={handleRevertChanges}>
-                      <Text align="center">
-                        {t('changes.action.revert-changes-confirm-change', {count: 1})}
-                      </Text>
-                    </Button>
+                    <Button
+                      mode="ghost"
+                      onClick={closeRevertChangesConfirmDialog}
+                      text={t('changes.action.revert-all-cancel')}
+                    />
+                    <Button
+                      tone="critical"
+                      onClick={handleRevertChanges}
+                      text={t('changes.action.revert-changes-confirm-change', {count: 1})}
+                    />
                   </Grid>
-                </Box>
+                </Stack>
               }
+              padding={3}
               portal
-              padding={4}
               placement="left"
               open={confirmRevertOpen}
               ref={setRevertPopoverElement}
@@ -114,7 +121,7 @@ export function GroupChange(
                   data-testid={`group-change-revert-button-${group.fieldsetName}`}
                 />
               </Box>
-            </PopoverWrapper>
+            </Popover>
           )}
         </Stack>
       ),
diff --git a/packages/sanity/src/core/field/diff/components/MetaInfo.tsx b/packages/sanity/src/core/field/diff/components/MetaInfo.tsx
index 0fb38e0dbe3..5ba31906e77 100644
--- a/packages/sanity/src/core/field/diff/components/MetaInfo.tsx
+++ b/packages/sanity/src/core/field/diff/components/MetaInfo.tsx
@@ -32,7 +32,7 @@ export function MetaInfo(props: MetaInfoProps) {
       <Stack space={2} paddingLeft={2}>
         <MetaText
           size={1}
-          weight="semibold"
+          weight="medium"
           forwardedAs={markRemoved ? 'del' : 'h3'}
           textOverflow="ellipsis"
         >
diff --git a/packages/sanity/src/core/field/diff/components/NoChanges.tsx b/packages/sanity/src/core/field/diff/components/NoChanges.tsx
index b3348816988..3732a136d3c 100644
--- a/packages/sanity/src/core/field/diff/components/NoChanges.tsx
+++ b/packages/sanity/src/core/field/diff/components/NoChanges.tsx
@@ -7,7 +7,7 @@ export function NoChanges() {
   const {t} = useTranslation()
   return (
     <Stack space={3}>
-      <Text size={1} weight="semibold" as="h3">
+      <Text size={1} weight="medium" as="h3">
         {t('changes.no-changes-title')}
       </Text>
       <Text as="p" size={1} muted>
diff --git a/packages/sanity/src/core/field/diff/components/RevertChangesButton.tsx b/packages/sanity/src/core/field/diff/components/RevertChangesButton.tsx
index 3b4cf41d8d1..3e7c2977c29 100644
--- a/packages/sanity/src/core/field/diff/components/RevertChangesButton.tsx
+++ b/packages/sanity/src/core/field/diff/components/RevertChangesButton.tsx
@@ -1,7 +1,7 @@
 import {RevertIcon} from '@sanity/icons'
-import {Button, ButtonProps} from '@sanity/ui'
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {Button, ButtonProps} from '../../../../ui'
 import {useTranslation} from '../../../i18n'
 
 const Root = styled(Button)`
@@ -27,7 +27,8 @@ const Root = styled(Button)`
 
 /** @internal */
 export const RevertChangesButton = forwardRef(function RevertChangesButton(
-  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'ref'> & {changeCount: number},
+  props: Omit<ButtonProps, 'tooltipProps'> &
+    Omit<React.HTMLProps<HTMLButtonElement>, 'ref'> & {changeCount: number},
   ref: React.ForwardedRef<HTMLButtonElement>,
 ): React.ReactElement {
   const {selected, changeCount, ...restProps} = props
@@ -39,10 +40,8 @@ export const RevertChangesButton = forwardRef(function RevertChangesButton(
       selected={selected}
       text={t('changes.action.revert-changes-confirm-change', {count: changeCount})}
       mode="bleed"
-      padding={1}
-      fontSize={1}
-      space={2}
       ref={ref}
+      tooltipProps={null}
       {...restProps}
     />
   )
diff --git a/packages/sanity/src/core/field/types/boolean/diff/BooleanFieldDiff.tsx b/packages/sanity/src/core/field/types/boolean/diff/BooleanFieldDiff.tsx
index 8c728d740e2..f1c3449cbb8 100644
--- a/packages/sanity/src/core/field/types/boolean/diff/BooleanFieldDiff.tsx
+++ b/packages/sanity/src/core/field/types/boolean/diff/BooleanFieldDiff.tsx
@@ -31,7 +31,7 @@ export const BooleanFieldDiff: DiffComponent<BooleanDiff> = ({diff, schemaType})
 
       {showToValue && title && (
         <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             {title}
           </Text>
         </Box>
diff --git a/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx b/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx
index 7f55a3f02c4..d26be6e8855 100644
--- a/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx
+++ b/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx
@@ -1,5 +1,5 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {useClickOutside, Label, Popover, Flex} from '@sanity/ui'
+import {useClickOutside, Popover, Flex, Text} from '@sanity/ui'
 import {toString} from '@sanity/util/paths'
 import {isKeySegment, type ObjectSchemaType, type Path, type PortableTextChild} from '@sanity/types'
 import React, {useCallback, useContext, useEffect, useMemo, useState, type ReactNode} from 'react'
@@ -161,11 +161,11 @@ function AnnnotationWithDiff({
       <PopoverContainer padding={3}>
         <div>
           {emptyObject && (
-            <Label size={1} muted>
+            <Text muted size={1} weight="medium">
               {t('changes.portable-text.empty-object-annotation', {
                 annotationType: schemaType.title || schemaType.name,
               })}
-            </Label>
+            </Text>
           )}
           {!emptyObject && <ChangeList diff={diff} schemaType={schemaType} />}
         </div>
diff --git a/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx b/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx
index 3b4546f78ac..633b0151a99 100644
--- a/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx
+++ b/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx
@@ -6,7 +6,7 @@ import {
   type PortableTextChild,
   type PortableTextObject,
 } from '@sanity/types'
-import {Card, Flex, Label, Popover, useClickOutside} from '@sanity/ui'
+import {Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
 import {FOCUS_TERMINATOR, toString} from '@sanity/util/paths'
 import React, {useCallback, useContext, useState, useEffect, useMemo} from 'react'
 import styled from 'styled-components'
@@ -188,11 +188,11 @@ function PopoverContent({
   return (
     <PopoverContainer ref={setPopoverElement} padding={3}>
       {emptyObject && (
-        <Label size={1} muted>
+        <Text muted size={1} weight="medium">
           {t('changes.portable-text.empty-inline-object', {
             inlineObjectType: schemaType.title || schemaType.name,
           })}
-        </Label>
+        </Text>
       )}
       {!emptyObject && <ChangeList diff={diff} schemaType={schemaType} />}
     </PopoverContainer>
diff --git a/packages/sanity/src/core/form/__workshop__/_common/FilterFieldInput.tsx b/packages/sanity/src/core/form/__workshop__/_common/FilterFieldInput.tsx
index f69b7f745cc..a8231b2b592 100644
--- a/packages/sanity/src/core/form/__workshop__/_common/FilterFieldInput.tsx
+++ b/packages/sanity/src/core/form/__workshop__/_common/FilterFieldInput.tsx
@@ -1,6 +1,7 @@
 import React, {useCallback, useMemo} from 'react'
-import {Box, Button, Card, Code, Flex, Grid, Label, Stack, TextArea} from '@sanity/ui'
+import {Card, Code, Grid, Stack, TextArea, Text} from '@sanity/ui'
 import styled from 'styled-components'
+import {Button} from '../../../../ui'
 
 const ExampleCode = styled(Code)`
   cursor: pointer;
@@ -46,7 +47,9 @@ export const FilterFieldInput = React.forwardRef(function FilterFieldInput(
   return (
     <Card padding={4} tone="default" border>
       <Stack space={4}>
-        <Label size={0}>Function value</Label>
+        <Text size={1} weight="medium">
+          Function value
+        </Text>
         <TextArea rows={4} ref={ref} onChange={handleChange} value={value || ''} />
         <ExampleCode
           title="Use example code"
diff --git a/packages/sanity/src/core/form/__workshop__/_common/FormDebugger.tsx b/packages/sanity/src/core/form/__workshop__/_common/FormDebugger.tsx
index 3ff447af7df..63493740e1e 100644
--- a/packages/sanity/src/core/form/__workshop__/_common/FormDebugger.tsx
+++ b/packages/sanity/src/core/form/__workshop__/_common/FormDebugger.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Box, Card, Code, Label, Stack} from '@sanity/ui'
+import {Box, Card, Code, Stack, Text} from '@sanity/ui'
 import type {Path} from '@sanity/types'
 
 export interface FormDebuggerOptions {
@@ -12,7 +12,9 @@ export function FormDebugger(props: FormDebuggerOptions) {
   return (
     <Card padding={4} tone="default" border>
       <Stack space={4}>
-        <Label size={0}>Debug output</Label>
+        <Text size={1} weight="medium">
+          Debug output
+        </Text>
         <Box overflow="auto">
           <Code>{JSON.stringify({focusPath, value}, null, 2)}</Code>
         </Box>
diff --git a/packages/sanity/src/core/form/__workshop__/_common/TypeTester.tsx b/packages/sanity/src/core/form/__workshop__/_common/TypeTester.tsx
index a1d4a562368..f76fe925df0 100644
--- a/packages/sanity/src/core/form/__workshop__/_common/TypeTester.tsx
+++ b/packages/sanity/src/core/form/__workshop__/_common/TypeTester.tsx
@@ -1,6 +1,7 @@
 import React, {useCallback, useEffect, useRef, useState, useMemo} from 'react'
-import {Button, Card, Label, Stack, Text, TextArea} from '@sanity/ui'
+import {Card, Stack, Text, TextArea} from '@sanity/ui'
 import styled, {createGlobalStyle} from 'styled-components'
+import {Button} from '../../../../ui'
 import {runTest} from './typer'
 
 const HIGHLIGHT_CLASSNAME = 'js-highlight-selected-input'
@@ -109,7 +110,9 @@ export function TypeTester({readOnly}: TypeTesterProps) {
     <Sticky>
       <Card padding={4} tone="default" border>
         <Stack space={4}>
-          <Label size={0}>Type Performance Tester</Label>
+          <Text size={1} weight="medium">
+            Type Performance Tester
+          </Text>
           <Text
             title={isDisabled ? undefined : `Click to focus input`}
             size={1}
diff --git a/packages/sanity/src/core/form/__workshop__/_common/resolvePreviewComponent.tsx b/packages/sanity/src/core/form/__workshop__/_common/resolvePreviewComponent.tsx
index 482ef5133be..c8a4b65c24d 100644
--- a/packages/sanity/src/core/form/__workshop__/_common/resolvePreviewComponent.tsx
+++ b/packages/sanity/src/core/form/__workshop__/_common/resolvePreviewComponent.tsx
@@ -1,6 +1,7 @@
-import {Button, Card, Code, ErrorBoundary, Stack} from '@sanity/ui'
+import {Card, Code, ErrorBoundary, Stack} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {PreviewLoader} from '../../../preview'
+import {Button} from '../../../../ui'
 
 export const resolvePreviewComponent = () => TestPreview
 
diff --git a/packages/sanity/src/core/form/components/ActivateOnFocus/ActivateOnFocus.tsx b/packages/sanity/src/core/form/components/ActivateOnFocus/ActivateOnFocus.tsx
index fa9c97e5ea2..da452ea9a36 100644
--- a/packages/sanity/src/core/form/components/ActivateOnFocus/ActivateOnFocus.tsx
+++ b/packages/sanity/src/core/form/components/ActivateOnFocus/ActivateOnFocus.tsx
@@ -76,7 +76,7 @@ export function ActivateOnFocus(props: ActivateOnFocusProps) {
       t('inputs.portable-text.activate-on-focus-message', {
         context: messageContext,
       })
-    return <Text weight="semibold">{text}</Text>
+    return <Text weight="medium">{text}</Text>
   }, [focused, message, t])
 
   return (
diff --git a/packages/sanity/src/core/form/components/Alert.tsx b/packages/sanity/src/core/form/components/Alert.tsx
index f28af1f6389..4361b7e0745 100644
--- a/packages/sanity/src/core/form/components/Alert.tsx
+++ b/packages/sanity/src/core/form/components/Alert.tsx
@@ -32,7 +32,7 @@ export function Alert(props: AlertProps) {
         </Box>
 
         <Box flex={1} marginLeft={3}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             {title}
           </Text>
 
diff --git a/packages/sanity/src/core/form/components/EditPortal.tsx b/packages/sanity/src/core/form/components/EditPortal.tsx
index 73d74606e92..84b1582835b 100644
--- a/packages/sanity/src/core/form/components/EditPortal.tsx
+++ b/packages/sanity/src/core/form/components/EditPortal.tsx
@@ -1,5 +1,6 @@
 import React, {type ReactNode, useState, useRef} from 'react'
-import {Box, Dialog, ResponsiveWidthProps} from '@sanity/ui'
+import {Box, ResponsiveWidthProps} from '@sanity/ui'
+import {Dialog} from '../../../ui'
 import {PresenceOverlay} from '../../presence'
 import {PopoverDialog} from '../../components'
 import {VirtualizerScrollInstanceProvider} from '../inputs/arrays/ArrayOfObjectsInput/List/VirtualizerScrollInstanceProvider'
@@ -38,9 +39,7 @@ export function EditPortal(props: Props): React.ReactElement {
 
   const contents = (
     <PresenceOverlay margins={PRESENCE_MARGINS}>
-      <Box ref={containerElement} padding={4}>
-        {children}
-      </Box>
+      <Box ref={containerElement}>{children}</Box>
     </PresenceOverlay>
   )
 
diff --git a/packages/sanity/src/core/form/components/FullscreenSpinner.tsx b/packages/sanity/src/core/form/components/FullscreenSpinner.tsx
deleted file mode 100644
index 6ba2654118f..00000000000
--- a/packages/sanity/src/core/form/components/FullscreenSpinner.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Flex, Layer, Spinner} from '@sanity/ui'
-import React from 'react'
-import styled from 'styled-components'
-
-const FullscreenLayer = styled(Layer)`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-`
-
-export function FullscreenSpinner() {
-  return (
-    <FullscreenLayer>
-      <Flex height="fill" align="center" justify="center">
-        <Spinner />
-      </Flex>
-    </FullscreenLayer>
-  )
-}
diff --git a/packages/sanity/src/core/form/components/SpinnerWithText.tsx b/packages/sanity/src/core/form/components/SpinnerWithText.tsx
deleted file mode 100644
index 57b57a44294..00000000000
--- a/packages/sanity/src/core/form/components/SpinnerWithText.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import {Box, Flex, Spinner, Text} from '@sanity/ui'
-import React from 'react'
-
-export function SpinnerWithText(props: {text: string}) {
-  const {text} = props
-
-  return (
-    <Flex direction="row" justify="center" align="center">
-      <Spinner />
-      <Box marginLeft={2}>
-        <Text>{text}</Text>
-      </Box>
-    </Flex>
-  )
-}
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx b/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx
index 49a56408997..a7808b2abf3 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx
@@ -65,6 +65,7 @@ const FieldActionsFloatingCard = styled(Card)(({theme}: {theme: Theme}) => {
     padding: ${space}px;
     position: absolute;
     right: 0;
+    transition: opacity 150ms ease;
 
     @media (hover: hover) {
       // If hover is supported, we hide the floating card by default
@@ -125,6 +126,7 @@ const FieldActionsFloatingCard = styled(Card)(({theme}: {theme: Theme}) => {
 
 const FieldActionsFlex = styled(Flex)`
   gap: inherit;
+  transition: opacity 150ms ease;
 `
 
 const MAX_AVATARS = 4
@@ -250,9 +252,7 @@ export function FormFieldBaseHeader(props: FormFieldBaseHeaderProps) {
             display="flex"
             onBlurCapture={handleBlurCapture}
             onFocusCapture={handleFocusCapture}
-            radius={2}
             ref={setFloatingCardElement}
-            shadow={2}
             sizing="border"
           >
             {hasActions && (
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldHeaderText.tsx b/packages/sanity/src/core/form/components/formField/FormFieldHeaderText.tsx
index d77fe560249..5233c711078 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldHeaderText.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldHeaderText.tsx
@@ -34,7 +34,7 @@ export const FormFieldHeaderText = memo(function FormFieldHeaderText(
   return (
     <Stack space={2}>
       <Flex>
-        <Text as="label" htmlFor={inputId} weight="semibold" size={1}>
+        <Text as="label" htmlFor={inputId} weight="medium" size={1}>
           {title || (
             <span style={{color: 'var(--card-muted-fg-color)'}}>
               {t('form.field.untitled-field-label')}
@@ -44,7 +44,7 @@ export const FormFieldHeaderText = memo(function FormFieldHeaderText(
 
         {hasValidations && (
           <Box marginLeft={2}>
-            <FormFieldValidationStatus fontSize={1} validation={validation} />
+            <FormFieldValidationStatus fontSize={1} placement="top" validation={validation} />
           </Box>
         )}
       </Flex>
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx b/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx
index 1ab5372ce6d..0f93820d244 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx
@@ -172,7 +172,7 @@ export const FormFieldSet = forwardRef(function FormFieldSet(
 
               {hasValidationMarkers && (
                 <Box marginLeft={2}>
-                  <FormFieldValidationStatus fontSize={1} validation={validation} />
+                  <FormFieldValidationStatus fontSize={1} placement="top" validation={validation} />
                 </Box>
               )}
             </Flex>
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldSetLegend.tsx b/packages/sanity/src/core/form/components/formField/FormFieldSetLegend.tsx
index 6b8ef134838..4ad1dfee69c 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldSetLegend.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldSetLegend.tsx
@@ -73,7 +73,7 @@ export const FormFieldSetLegend = memo(function FormFieldSetLegend(props: FormFi
   const {t} = useTranslation()
 
   const text = (
-    <Text weight="semibold" size={1}>
+    <Text weight="medium" size={1}>
       {title || (
         <span style={{color: 'var(--card-muted-fg-color)'}}>
           {t('form.field.untitled-fieldset-label')}
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
index c7e6bb29b8d..85ae383e69a 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
@@ -2,10 +2,11 @@ import React from 'react'
 import {hues} from '@sanity/color'
 import {ErrorOutlineIcon, InfoOutlineIcon, WarningOutlineIcon} from '@sanity/icons'
 import type {FormNodeValidation} from '@sanity/types'
-import {Box, Flex, Placement, Stack, Text, Tooltip} from '@sanity/ui'
+import {Box, Flex, Placement, Stack, Text} from '@sanity/ui'
 import styled from 'styled-components'
 import {useTranslation} from '../../../i18n'
 import {useListFormat} from '../../../hooks'
+import {TooltipWithNodes} from '../../../../ui'
 
 /** @internal */
 export interface FormFieldValidationStatusProps {
@@ -45,12 +46,7 @@ const StyledStack = styled(Stack)`
 
 /** @internal */
 export function FormFieldValidationStatus(props: FormFieldValidationStatusProps) {
-  const {
-    validation = EMPTY_ARRAY,
-    __unstable_showSummary: showSummary,
-    fontSize,
-    placement = 'top',
-  } = props
+  const {validation = EMPTY_ARRAY, __unstable_showSummary: showSummary, fontSize, placement} = props
 
   const hasErrors = validation.some((v) => v.level === 'error')
   const hasWarnings = validation.some((v) => v.level === 'warning')
@@ -71,9 +67,9 @@ export function FormFieldValidationStatus(props: FormFieldValidationStatusProps)
   })()
 
   return (
-    <Tooltip
+    <TooltipWithNodes
       content={
-        <StyledStack padding={3} space={3}>
+        <StyledStack space={3}>
           {showSummary && <FormFieldValidationSummary validation={validation} />}
 
           {!showSummary && (
@@ -91,11 +87,11 @@ export function FormFieldValidationStatus(props: FormFieldValidationStatusProps)
       fallbackPlacements={['bottom', 'right', 'left']}
     >
       <div>
-        <Text muted size={fontSize} weight="semibold" style={statusStyle}>
+        <Text muted size={fontSize} weight="medium" style={statusStyle}>
           {StatusIcon && <StatusIcon />}
         </Text>
       </div>
-    </Tooltip>
+    </TooltipWithNodes>
   )
 }
 
diff --git a/packages/sanity/src/core/form/components/tagInput/tagInput.tsx b/packages/sanity/src/core/form/components/tagInput/tagInput.tsx
index ed4a8c60401..b04b8e87e74 100644
--- a/packages/sanity/src/core/form/components/tagInput/tagInput.tsx
+++ b/packages/sanity/src/core/form/components/tagInput/tagInput.tsx
@@ -1,7 +1,6 @@
 import {CloseIcon} from '@sanity/icons'
 import {
   Box,
-  Button,
   Card,
   Flex,
   isHTMLElement,
@@ -15,6 +14,7 @@ import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react
 import styled, {css} from 'styled-components'
 import {useTranslation} from '../../../i18n'
 import {studioLocaleNamespace} from '../../../i18n/localeNamespaces'
+import {Button} from '../../../../ui'
 import {focusRingBorderStyle, focusRingStyle} from './styles'
 
 const Root = styled(Card)((props: {theme: Theme}): CSSObject => {
@@ -309,18 +309,20 @@ function Tag(props: {
   }, [index, onRemove])
 
   return (
-    <Card data-ui="Tag" padding={1} radius={2} tone="transparent">
-      <Flex align="center">
-        <Box flex={1} padding={1}>
+    <Card data-ui="Tag" radius={2} tone="transparent">
+      <Flex align="center" gap={1}>
+        <Box flex={1} paddingY={2} paddingLeft={2}>
           <Text muted={muted} textOverflow="ellipsis">
             {tag.value}
           </Text>
         </Box>
-
         {enabled && (
-          <Box marginLeft={1}>
-            <Button icon={CloseIcon} mode="bleed" onClick={handleRemoveClick} padding={1} />
-          </Box>
+          <Button
+            icon={CloseIcon}
+            mode="bleed"
+            onClick={handleRemoveClick}
+            tooltipProps={{content: 'Remove'}}
+          />
         )}
       </Flex>
     </Card>
diff --git a/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx b/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx
index 8733c9553c1..c728e7d07c4 100644
--- a/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx
+++ b/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable react/jsx-handler-names */
 
-import {EllipsisVerticalIcon} from '@sanity/icons'
+import {EllipsisHorizontalIcon} from '@sanity/icons'
 import {Card, Menu, MenuButton, MenuButtonProps} from '@sanity/ui'
 import React, {memo, useCallback, useId, useMemo, useState} from 'react'
-import {StatusButton, StatusButtonProps} from '../../../components'
+import {Button, ButtonProps} from '../../../../ui'
 import {DocumentFieldActionGroup, DocumentFieldActionNode} from '../../../config'
 import {useI18nText} from '../../../i18n'
 import {FieldActionMenuNode} from './FieldActionMenuNode'
@@ -14,7 +14,7 @@ export interface FieldActionMenuProps {
   onMenuOpenChange: (open: boolean) => void
 }
 
-const STATUS_BUTTON_TOOLTIP_PROPS: StatusButtonProps['tooltip'] = {
+const STATUS_BUTTON_TOOLTIP_PROPS: ButtonProps['tooltipProps'] = {
   placement: 'top',
 }
 
@@ -61,7 +61,7 @@ export const FieldActionMenu = memo(function FieldActionMenu(props: FieldActionM
             {
               type: 'group',
               children: menuNodes,
-              icon: EllipsisVerticalIcon,
+              icon: EllipsisHorizontalIcon,
               title: 'Field actions',
             },
           ] satisfies DocumentFieldActionNode[])
@@ -101,15 +101,14 @@ const RootFieldActionMenuNode = memo(function RootFieldActionMenuNode(props: {
 
   if (node.type === 'action') {
     return (
-      <StatusButton
-        fontSize={1}
+      <Button
         icon={node.icon}
-        // Do not show tooltip if menu is open
-        label={open ? undefined : node.title}
         mode="bleed"
         onClick={node.onAction}
-        padding={2}
-        tooltip={STATUS_BUTTON_TOOLTIP_PROPS}
+        tooltipProps={{
+          ...STATUS_BUTTON_TOOLTIP_PROPS,
+          content: node.title,
+        }}
       />
     )
   }
@@ -136,13 +135,14 @@ function RootFieldActionMenuGroup(props: {
   return (
     <MenuButton
       button={
-        <StatusButton
-          fontSize={1}
+        <Button
           icon={node.icon}
           label={open ? undefined : title}
           mode="bleed"
-          padding={2}
-          tooltip={STATUS_BUTTON_TOOLTIP_PROPS}
+          tooltipProps={{
+            ...STATUS_BUTTON_TOOLTIP_PROPS,
+            content: node.title,
+          }}
         />
       }
       id={useId()}
diff --git a/packages/sanity/src/core/form/field/actions/FieldActionMenuGroup.tsx b/packages/sanity/src/core/form/field/actions/FieldActionMenuGroup.tsx
index 4705888f2f9..fa9c68bab95 100644
--- a/packages/sanity/src/core/form/field/actions/FieldActionMenuGroup.tsx
+++ b/packages/sanity/src/core/form/field/actions/FieldActionMenuGroup.tsx
@@ -1,5 +1,6 @@
-import {Box, Label, MenuGroup, MenuGroupProps} from '@sanity/ui'
+import {Box, Text} from '@sanity/ui'
 import React from 'react'
+import {MenuGroup, MenuGroupProps} from '../../../../ui'
 import {DocumentFieldActionGroup} from '../../../config'
 import {useI18nText} from '../../../i18n'
 import {FieldActionMenuNode} from './FieldActionMenuNode'
@@ -16,10 +17,10 @@ export function FieldActionMenuGroup(props: {group: DocumentFieldActionGroup}) {
   if (group.expanded) {
     return (
       <>
-        <Box padding={2} paddingBottom={1}>
-          <Label muted size={0}>
+        <Box padding={2} paddingTop={3}>
+          <Text muted size={1} weight="medium">
             {title}
-          </Label>
+          </Text>
         </Box>
 
         {group.children.map((item, idx) => (
@@ -36,15 +37,7 @@ export function FieldActionMenuGroup(props: {group: DocumentFieldActionGroup}) {
   }
 
   return (
-    <MenuGroup
-      fontSize={1}
-      icon={group.icon}
-      padding={3}
-      popover={POPOVER_PROPS}
-      space={3}
-      text={title}
-      tone={group.tone}
-    >
+    <MenuGroup icon={group.icon} popover={POPOVER_PROPS} text={title} tone={group.tone}>
       {group.children.map((item, idx) => (
         <FieldActionMenuNode
           action={item}
diff --git a/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx b/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx
index 8f8b743f34a..2a922bd6f87 100644
--- a/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx
+++ b/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx
@@ -1,9 +1,10 @@
-import {MenuItem, Text} from '@sanity/ui'
+import {Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {CheckmarkIcon} from '@sanity/icons'
 import {TooltipOfDisabled} from '../../../components'
 import {DocumentFieldActionItem} from '../../../config'
 import {useI18nText} from '../../../i18n'
+import {MenuItem} from '../../../../ui'
 
 export function FieldActionMenuItem(props: {action: DocumentFieldActionItem}) {
   const {action} = props
@@ -22,13 +23,10 @@ export function FieldActionMenuItem(props: {action: DocumentFieldActionItem}) {
     <TooltipOfDisabled content={disabledTooltipContent} placement="left">
       <MenuItem
         disabled={Boolean(action.disabled)}
-        fontSize={1}
         icon={action.icon}
         iconRight={action.iconRight || (action.selected ? CheckmarkIcon : undefined)}
         onClick={handleClick}
-        padding={3}
         pressed={action.selected}
-        space={3}
         text={title}
         tone={action.tone}
       />
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
index d38b9271124..78b80476751 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
@@ -1,21 +1,14 @@
 /* eslint-disable complexity, max-nested-callbacks, no-nested-ternary */
 import React, {useCallback, useMemo, useRef, useState, useId} from 'react'
 import type {CrossDatasetReferenceValue, CrossDatasetReferenceSchemaType} from '@sanity/types'
-import {EllipsisVerticalIcon, ResetIcon as ClearIcon, SyncIcon as ReplaceIcon} from '@sanity/icons'
+import {
+  EllipsisHorizontalIcon,
+  ResetIcon as ClearIcon,
+  SyncIcon as ReplaceIcon,
+} from '@sanity/icons'
 import {concat, of, type Observable} from 'rxjs'
 import {catchError, distinctUntilChanged, filter, map, scan, switchMap, tap} from 'rxjs/operators'
-import {
-  Box,
-  Button,
-  Card,
-  Flex,
-  Inline,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Stack,
-  useToast,
-} from '@sanity/ui'
+import {Box, Card, Flex, Inline, Menu, MenuButton, Stack, useToast} from '@sanity/ui'
 import {useObservableCallback} from 'react-rx'
 import {FOCUS_TERMINATOR} from '@sanity/util/paths'
 import type {ObjectInputProps} from '../../types'
@@ -23,6 +16,7 @@ import {set, unset} from '../../patch'
 import {useOnClickOutside} from '../../hooks/useOnClickOutside'
 import {getPublishedId, isNonNullable} from '../../../util'
 import {FIXME} from '../../../FIXME'
+import {Button, MenuItem} from '../../../../ui'
 import {ChangeIndicator} from '../../../changeIndicators'
 import {PreviewCard} from '../../../components'
 import {useDidUpdate} from '../../hooks/useDidUpdate'
@@ -384,10 +378,10 @@ export function CrossDatasetReferenceInput(props: CrossDatasetReferenceInputProp
                     <MenuButton
                       button={
                         <Button
-                          padding={2}
                           mode="bleed"
-                          icon={EllipsisVerticalIcon}
+                          icon={EllipsisHorizontalIcon}
                           data-testid="menu-button"
+                          tooltipProps={{content: 'Show more'}}
                         />
                       }
                       id={`${inputId}-menuButton`}
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.styled.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.styled.tsx
index 28aa8d8ffa2..788d82b3739 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.styled.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.styled.tsx
@@ -7,8 +7,3 @@ export const StyledPreviewFlex = styled(Flex)`
   there's probably better ways of solving this */
   min-height: 36px;
 `
-
-export const TooltipContent = styled(Flex)`
-  /* This limits the width of the tooltip content */
-  max-width: 250px;
-`
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
index 730464d6b1d..534a7f63b4b 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
@@ -1,28 +1,15 @@
-import React, {createElement, ReactNode, useMemo} from 'react'
+import React, {createElement, useMemo} from 'react'
 import type {CrossDatasetType, PreviewValue} from '@sanity/types'
-import {Box, Flex, Inline, Label, Text, Tooltip} from '@sanity/ui'
+import {Badge, Box, Flex, Inline, Text} from '@sanity/ui'
 import {AccessDeniedIcon, HelpCircleIcon, LaunchIcon} from '@sanity/icons'
 import imageUrlBuilder from '@sanity/image-url'
 import {isImageSource} from '@sanity/asset-utils'
+import {Tooltip} from '../../../../ui'
 import {useTranslation} from '../../../i18n'
 import type {DocumentAvailability} from '../../../preview'
 import {DefaultPreview, TextWithTone, type PreviewMediaDimensions} from '../../../components'
 import {FIXME} from '../../../FIXME'
-import {StyledPreviewFlex, TooltipContent} from './CrossDatasetReferencePreview.styled'
-
-function UnavailableMessage(props: {children: ReactNode}) {
-  return (
-    <TooltipContent padding={3}>
-      <Box flex={1}>
-        <Box>
-          <Text as="p" size={1}>
-            {props.children}
-          </Text>
-        </Box>
-      </Box>
-    </TooltipContent>
-  )
-}
+import {StyledPreviewFlex} from './CrossDatasetReferencePreview.styled'
 
 /**
  * Used to preview a referenced type
@@ -109,25 +96,19 @@ export function CrossDatasetReferencePreview(props: {
       <Box paddingLeft={3}>
         <Inline space={4}>
           {refType && showTypeLabel && (
-            <Label size={1} muted>
-              {refType.title || refType.type}
-            </Label>
+            <Badge mode="outline">{refType.title || refType.type}</Badge>
           )}
 
           {(insufficientPermissions || notFound) && (
             <Box>
               <Tooltip
                 portal
-                content={
-                  <UnavailableMessage>
-                    {t(
-                      notFound
-                        ? 'inputs.reference.referenced-document-does-not-exist'
-                        : 'inputs.reference.referenced-document-insufficient-permissions',
-                      {documentId: id},
-                    )}
-                  </UnavailableMessage>
-                }
+                content={t(
+                  notFound
+                    ? 'inputs.reference.referenced-document-does-not-exist'
+                    : 'inputs.reference.referenced-document-insufficient-permissions',
+                  {documentId: id},
+                )}
               >
                 <TextWithTone tone="default">
                   {insufficientPermissions ? <AccessDeniedIcon /> : <HelpCircleIcon />}
@@ -140,17 +121,11 @@ export function CrossDatasetReferencePreview(props: {
             <Box>
               <Tooltip
                 portal
-                content={
-                  <TooltipContent padding={2}>
-                    <Text size={1}>
-                      {t(
-                        hasStudioUrl
-                          ? 'inputs.reference.document-opens-in-new-tab'
-                          : 'input.reference.document-cannot-be-opened.failed-to-resolve-url',
-                      )}
-                    </Text>
-                  </TooltipContent>
-                }
+                content={t(
+                  hasStudioUrl
+                    ? 'inputs.reference.document-opens-in-new-tab'
+                    : 'input.reference.document-cannot-be-opened.failed-to-resolve-url',
+                )}
               >
                 <TextWithTone size={1} tone="default" muted={!hasStudioUrl}>
                   <LaunchIcon />
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/DisabledFeatureWarning.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/DisabledFeatureWarning.tsx
index 60b12cd0c23..451d67d420b 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/DisabledFeatureWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/DisabledFeatureWarning.tsx
@@ -1,8 +1,8 @@
 import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
-import {Card, Flex, Box, Text, Stack, Button} from '@sanity/ui'
+import {Card, Flex, Box, Text, Stack} from '@sanity/ui'
 import type {CrossDatasetReferenceValue} from '@sanity/types'
 import React, {useMemo} from 'react'
-import styled from 'styled-components'
+import {Button} from '../../../../ui'
 import {Translate, useTranslation} from '../../../i18n'
 
 type Props = {
@@ -10,10 +10,6 @@ type Props = {
   onClearValue?: () => void
 }
 
-const ButtonWrapper = styled(Button)`
-  width: 100%;
-`
-
 export function DisabledFeatureWarning({value, onClearValue}: Props) {
   const hasRef = useMemo(() => Boolean(value?._ref), [value?._ref])
   const {t} = useTranslation()
@@ -51,7 +47,7 @@ export function DisabledFeatureWarning({value, onClearValue}: Props) {
           </Text>
         </Box>
         <Stack space={3}>
-          <Text as="h2" size={1} weight="semibold">
+          <Text as="h2" size={1} weight="medium">
             {t('inputs.reference.cross-dataset.feature-unavailable-title')}
           </Text>
           {hasRef && (
@@ -72,11 +68,12 @@ export function DisabledFeatureWarning({value, onClearValue}: Props) {
         </Stack>
       </Flex>
       {onClearValue && hasRef && (
-        <ButtonWrapper
+        <Button
           icon={ResetIcon}
-          text={t('inputs.reference.action.clear')}
-          onClick={onClearValue}
           mode="ghost"
+          onClick={onClearValue}
+          text={t('inputs.reference.action.clear')}
+          width="fill"
         />
       )}
     </Card>
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
index 6c997e6d3a2..cb4a2a93d88 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
@@ -1,7 +1,8 @@
 import React, {forwardRef, useCallback, useRef, useState} from 'react'
 import FocusLock from 'react-focus-lock'
-import {Box, Button, LayerProvider, Popover, useClickOutside, useForwardedRef} from '@sanity/ui'
+import {Box, Flex, LayerProvider, Popover, useClickOutside, useForwardedRef} from '@sanity/ui'
 import {CalendarIcon} from '@sanity/icons'
+import {Button} from '../../../../../ui'
 import {DatePicker} from './DatePicker'
 import {LazyTextInput} from './LazyTextInput'
 import {CalendarLabels, MonthNames} from './calendar/types'
@@ -56,17 +57,17 @@ export const DateTimeInput = forwardRef(function DateTimeInput(
   const handleClick = useCallback(() => setPickerOpen(true), [])
 
   const suffix = (
-    <Box padding={1}>
+    <Flex style={{padding: '5px'}}>
       <Button
         ref={buttonRef}
         icon={CalendarIcon}
         mode="bleed"
-        padding={2}
         onClick={handleClick}
         style={{display: 'block'}}
         data-testid="select-date-button"
+        tooltipProps={{content: 'Select date'}}
       />
-    </Box>
+    </Flex>
   )
 
   return (
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx
index 47d1c208dce..0a69d2f864c 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx
@@ -1,8 +1,9 @@
-import {Box, Button, Flex, Grid, Select, Text, useForwardedRef} from '@sanity/ui'
+import {Box, Flex, Grid, Select, Text, useForwardedRef} from '@sanity/ui'
 import {ChevronLeftIcon, ChevronRightIcon} from '@sanity/icons'
 import {addDays, addMonths, setDate, setHours, setMinutes, setMonth, setYear} from 'date-fns'
 import {range} from 'lodash'
 import React, {forwardRef, useCallback, useEffect} from 'react'
+import {Button} from '../../../../../../ui'
 import {CalendarMonth} from './CalendarMonth'
 import {ARROW_KEYS, DEFAULT_TIME_PRESETS, HOURS_24} from './constants'
 import {features} from './features'
@@ -35,6 +36,13 @@ const PRESERVE_FOCUS_ELEMENT = (
   />
 )
 
+// This buttons use a specific styling, given they are intended to be aligned with the select elements.
+const CALENDAR_ICON_BUTTON_PROPS = {
+  fontSize: 2,
+  radius: 0,
+  paddingX: 2,
+}
+
 export const Calendar = forwardRef(function Calendar(
   props: CalendarProps,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
@@ -176,19 +184,9 @@ export const Calendar = forwardRef(function Calendar(
         {/* Day presets */}
         {features.dayPresets && (
           <Grid columns={3} data-ui="CalendaryDayPresets" gap={1}>
-            <Button
-              text={labels.goToYesterday}
-              mode="bleed"
-              fontSize={1}
-              onClick={handleYesterdayClick}
-            />
-            <Button text={labels.goToToday} mode="bleed" fontSize={1} onClick={handleTodayClick} />
-            <Button
-              text={labels.goToTomorrow}
-              mode="bleed"
-              fontSize={1}
-              onClick={handleTomorrowClick}
-            />
+            <Button text={labels.goToYesterday} mode="bleed" onClick={handleYesterdayClick} />
+            <Button text={labels.goToToday} mode="bleed" onClick={handleTodayClick} />
+            <Button text={labels.goToTomorrow} mode="bleed" onClick={handleTomorrowClick} />
           </Grid>
         )}
 
@@ -317,15 +315,7 @@ function CalendarTimePresetButton(props: {
     onTimeChange(hours, minutes)
   }, [hours, minutes, onTimeChange])
 
-  return (
-    <Button
-      text={text}
-      aria-label={props['aria-label']}
-      mode="bleed"
-      fontSize={1}
-      onClick={handleClick}
-    />
-  )
+  return <Button text={text} aria-label={props['aria-label']} mode="bleed" onClick={handleClick} />
 }
 
 function CalendarMonthSelect(props: {
@@ -351,9 +341,12 @@ function CalendarMonthSelect(props: {
         onClick={handlePrevMonthClick}
         mode="bleed"
         icon={ChevronLeftIcon}
-        paddingX={2}
-        radius={0}
+        tooltipProps={{content: 'Previous month'}}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - Button with specific styling requirements
+        {...CALENDAR_ICON_BUTTON_PROPS}
       />
+
       <Box flex={1}>
         <Select radius={0} value={value} onChange={onChange}>
           {monthNames.map((monthName, i) => (
@@ -369,8 +362,10 @@ function CalendarMonthSelect(props: {
         mode="bleed"
         icon={ChevronRightIcon}
         onClick={handleNextMonthClick}
-        paddingX={2}
-        radius={0}
+        tooltipProps={{content: 'Next month'}}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - Button with specific styling requirements
+        {...CALENDAR_ICON_BUTTON_PROPS}
       />
     </Flex>
   )
@@ -395,8 +390,10 @@ function CalendarYearSelect(props: {
         onClick={handlePrevYearClick}
         mode="bleed"
         icon={ChevronLeftIcon}
-        paddingX={2}
-        radius={0}
+        tooltipProps={{content: 'Previous year'}}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - Button with specific styling requirements
+        {...CALENDAR_ICON_BUTTON_PROPS}
       />
       <YearInput value={value} onChange={onChange} radius={0} style={{width: 65}} />
       <Button
@@ -404,8 +401,10 @@ function CalendarYearSelect(props: {
         onClick={handleNextYearClick}
         mode="bleed"
         icon={ChevronRightIcon}
-        paddingX={2}
-        radius={0}
+        tooltipProps={{content: 'Next year'}}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - Button with specific styling requirements
+        {...CALENDAR_ICON_BUTTON_PROPS}
       />
     </Flex>
   )
diff --git a/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx b/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx
index b9ba2447dbe..fe53f1e4957 100644
--- a/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx
+++ b/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx
@@ -1,9 +1,10 @@
-import {Button, Card, Code, Stack, Text} from '@sanity/ui'
+import {Card, Code, Stack, Text} from '@sanity/ui'
 import React, {forwardRef, useCallback, useImperativeHandle, useMemo} from 'react'
 import {PatchEvent, set, unset} from '../../patch'
 import {Alert} from '../../components/Alert'
 import {Details} from '../../components/Details'
 import {isDev} from '../../../environment'
+import {Button} from '../../../../ui'
 import {converters as CONVERTERS, ValueConverter} from './converters'
 import {UntypedValueInput} from './UntypedValueInput'
 import {isPlainObject} from 'lodash'
@@ -126,7 +127,7 @@ export const InvalidValueInput = forwardRef(
             )}
 
             <Stack marginTop={2} space={2}>
-              <Text size={1} weight="semibold">
+              <Text size={1} weight="medium">
                 <Translate
                   t={t}
                   i18nKey="inputs.invalid-value.current-type"
diff --git a/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx b/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx
index cc85af158bb..1c9ec513296 100644
--- a/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx
+++ b/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx
@@ -1,6 +1,7 @@
 import React, {useCallback, useMemo} from 'react'
-import {Button, Card, Code, Grid, Stack, Text} from '@sanity/ui'
+import {Card, Code, Grid, Stack, Text} from '@sanity/ui'
 import {PatchEvent, setIfMissing, unset} from '../../patch'
+import {Button} from '../../../../ui'
 import {Alert} from '../../components/Alert'
 import {Details} from '../../components/Details'
 import {useSchema} from '../../../hooks'
@@ -126,7 +127,7 @@ export function UntypedValueInput({validTypes, value, onChange}: UntypedValueInp
           )}
 
           <Stack space={2}>
-            <Text as="h4" weight="semibold" size={1}>
+            <Text as="h4" weight="medium" size={1}>
               {t('inputs.untyped-value.details.json-dump-prefix')}
             </Text>
 
diff --git a/packages/sanity/src/core/form/inputs/ObjectInput/ObjectInput.tsx b/packages/sanity/src/core/form/inputs/ObjectInput/ObjectInput.tsx
index 2c0e33b9536..84b05d1ada5 100644
--- a/packages/sanity/src/core/form/inputs/ObjectInput/ObjectInput.tsx
+++ b/packages/sanity/src/core/form/inputs/ObjectInput/ObjectInput.tsx
@@ -78,7 +78,7 @@ export const ObjectInput = memo(function ObjectInput(props: ObjectInputProps) {
     return null
   }
   return (
-    <Stack space={5}>
+    <Stack space={6}>
       {groups.length > 0 ? (
         <FieldGroupTabsWrapper $level={level} data-testid="field-groups">
           <FieldGroupTabs
diff --git a/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx b/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
index dc68e8273d4..2f10270c545 100644
--- a/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
+++ b/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
@@ -1,7 +1,8 @@
 import React, {useCallback} from 'react'
-import {Box, Button, Card, Code, Stack, Text} from '@sanity/ui'
+import {Box, Card, Code, Stack, Text} from '@sanity/ui'
 import {TrashIcon} from '@sanity/icons'
 import {FormPatch, PatchEvent, unset} from '../../patch'
+import {Button} from '../../../../ui'
 import {Details} from '../../components/Details'
 import {Alert} from '../../components/Alert'
 import {isDev} from '../../../environment'
diff --git a/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/GroupTab.tsx b/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/GroupTab.tsx
index e41799d74e2..48bc6695331 100644
--- a/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/GroupTab.tsx
+++ b/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/GroupTab.tsx
@@ -1,5 +1,5 @@
 import React, {forwardRef} from 'react'
-import {Tab} from '@sanity/ui'
+import {Tab} from '../../../../../ui'
 
 interface GroupType {
   'aria-controls': string
@@ -27,7 +27,6 @@ export const GroupTab = forwardRef(function GroupTab(
   return (
     <Tab
       data-testid={`group-tab-${props.name}`}
-      size={1}
       id={`${props.name}-tab`}
       label={props.title}
       ref={ref}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx b/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx
index 45228590b4d..590a6e1cd2a 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx
@@ -12,8 +12,15 @@ import {
   type RenderStyleFunction,
 } from '@sanity/portable-text-editor'
 import type {Path} from '@sanity/types'
-import {BoundaryElementProvider, useBoundaryElement, useGlobalKeyDown, useLayer} from '@sanity/ui'
+import {
+  BoundaryElementProvider,
+  TooltipDelayGroupProvider,
+  useBoundaryElement,
+  useGlobalKeyDown,
+  useLayer,
+} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
+import {TOOLTIP_DELAY_PROPS} from '../../../../ui/tooltip/constants'
 import {useTranslation} from '../../../i18n'
 import {Toolbar} from './toolbar'
 import {Decorator} from './text'
@@ -163,15 +170,17 @@ export function Editor(props: EditorProps) {
   return (
     <Root $fullscreen={isFullscreen} data-testid="pt-editor">
       {isActive && (
-        <ToolbarCard data-testid="pt-editor__toolbar-card" shadow={1}>
-          <Toolbar
-            hotkeys={hotkeys}
-            isFullscreen={isFullscreen}
-            onMemberOpen={handleToolBarOnMemberOpen}
-            onToggleFullscreen={onToggleFullscreen}
-            readOnly={readOnly}
-          />
-        </ToolbarCard>
+        <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+          <ToolbarCard data-testid="pt-editor__toolbar-card" shadow={1}>
+            <Toolbar
+              hotkeys={hotkeys}
+              isFullscreen={isFullscreen}
+              onMemberOpen={handleToolBarOnMemberOpen}
+              onToggleFullscreen={onToggleFullscreen}
+              readOnly={readOnly}
+            />
+          </ToolbarCard>
+        </TooltipDelayGroupProvider>
       )}
 
       <EditableCard flex={1} tone={readOnly ? 'transparent' : 'default'}>
diff --git a/packages/sanity/src/core/form/inputs/PortableText/InvalidValue.tsx b/packages/sanity/src/core/form/inputs/PortableText/InvalidValue.tsx
index 68ed5fc3eb2..36fc8892f66 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/InvalidValue.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/InvalidValue.tsx
@@ -1,5 +1,14 @@
 import type {InvalidValueResolution} from '@sanity/portable-text-editor'
-import {Box, Button, Card, Code, Grid, Stack, Text} from '@sanity/ui'
+import {
+  Box,
+  // eslint-disable-next-line no-restricted-imports
+  Button,
+  Card,
+  Code,
+  Grid,
+  Stack,
+  Text,
+} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {Translate, useTranslation} from '../../../i18n'
 import {Alert} from '../../components/Alert'
@@ -35,6 +44,7 @@ export function InvalidValue(props: InvalidValueProps) {
                 onClick={onIgnore}
                 text={t('inputs.portable-text.invalid-value.ignore-button.text')}
               />
+              {/* @todo: use plain string */}
               {!readOnly && (
                 <Button
                   onClick={handleAction}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/_common/resolvePreviewComponent.tsx b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/_common/resolvePreviewComponent.tsx
index e2e28d1c459..ac3848da076 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/_common/resolvePreviewComponent.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/_common/resolvePreviewComponent.tsx
@@ -1,5 +1,6 @@
-import {Button, Card, Code, ErrorBoundary, Stack} from '@sanity/ui'
+import {Card, Code, ErrorBoundary, Stack} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
+import {Button} from '../../../../../../ui'
 import {SanityDefaultPreview, PreviewLoader} from '../../../../../preview'
 
 export const resolvePreviewComponent = () => TestPreview
diff --git a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
index b54872d59e9..1c5cdd7369e 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
@@ -1,9 +1,9 @@
-import {Box, Button, Text, Tooltip} from '@sanity/ui'
 import React, {memo, useCallback} from 'react'
 import {CopyIcon} from '@sanity/icons'
 import {keyGenerator} from '@sanity/portable-text-editor'
 import {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
 import {RenderBlockActionsCallback} from '../../../../types/_transitional'
+import {Button} from '../../../../../../ui'
 
 const BlockActions = memo(function BlockActions(props: {
   block: PortableTextBlock
@@ -28,24 +28,13 @@ const BlockActions = memo(function BlockActions(props: {
   }, [block, insert])
 
   return (
-    <Tooltip
-      content={
-        <Box padding={2}>
-          <Text size={1}>Duplicate</Text>
-        </Box>
-      }
-      placement="right"
-      portal="default"
-    >
-      <Button
-        aria-label="Duplicate"
-        fontSize={1}
-        icon={CopyIcon}
-        onClick={handleDuplicate}
-        padding={2}
-        mode="bleed"
-      />
-    </Tooltip>
+    <Button
+      aria-label="Duplicate"
+      icon={CopyIcon}
+      onClick={handleDuplicate}
+      tooltipProps={{content: 'Duplicate', placement: 'right', portal: 'default'}}
+      mode="bleed"
+    />
   )
 })
 
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
index 7e8179f6fc6..5b194f21b01 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
@@ -1,8 +1,8 @@
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
 import type {ObjectSchemaType, Path, PortableTextObject} from '@sanity/types'
-import {Tooltip} from '@sanity/ui'
 import React, {ComponentType, useCallback, useMemo, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
+import {TooltipWithNodes} from '../../../../../ui'
 import {pathToString} from '../../../../field'
 import type {
   BlockAnnotationProps,
@@ -119,11 +119,11 @@ export function Annotation(props: AnnotationProps) {
   const markersToolTip = useMemo(
     () =>
       validation.length > 0 || markers.length > 0 ? (
-        <Tooltip
+        <TooltipWithNodes
           placement="bottom"
           portal="default"
           content={
-            <TooltipBox padding={2}>
+            <TooltipBox>
               <Markers
                 markers={markers}
                 renderCustomMarkers={renderCustomMarkers}
@@ -133,7 +133,7 @@ export function Annotation(props: AnnotationProps) {
           }
         >
           {text}
-        </Tooltip>
+        </TooltipWithNodes>
       ) : undefined,
     [Markers, markers, renderCustomMarkers, text, validation],
   )
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx
index 74791a63bf1..586dfdedc5a 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx
@@ -1,23 +1,8 @@
 import React, {useState, useRef, useMemo, useEffect, useCallback, startTransition} from 'react'
-import {
-  Box,
-  Button,
-  Inline,
-  Popover,
-  PopoverProps,
-  Text,
-  useGlobalKeyDown,
-  useTheme,
-} from '@sanity/ui'
-import styled from 'styled-components'
+import {Box, Flex, Popover, PopoverProps, Text, useGlobalKeyDown, useTheme} from '@sanity/ui'
 import {EditIcon, TrashIcon} from '@sanity/icons'
 import {useTranslation} from '../../../../i18n'
-
-const ToolbarPopover = styled(Popover)`
-  &[data-popper-reference-hidden='true'] {
-    display: none !important;
-  }
-`
+import {Button} from '../../../../../ui'
 
 const POPOVER_FALLBACK_PLACEMENTS: PopoverProps['fallbackPlacements'] = ['top', 'bottom']
 
@@ -170,36 +155,36 @@ export function AnnotationToolbarPopover(props: AnnotationToolbarPopoverProps) {
   }
 
   return (
-    <ToolbarPopover
+    <Popover
       open={popoverOpen}
       floatingBoundary={floatingBoundary}
       constrainSize
       content={
         <Box padding={1} data-testid="annotation-toolbar-popover">
-          <Inline space={1}>
+          <Flex gap={1}>
             <Box padding={2}>
-              <Text weight="semibold" size={1}>
+              <Text weight="medium" size={1}>
                 {title}
               </Text>
             </Box>
             <Button
+              aria-label={t('inputs.portable-text.action.edit-annotation')}
               icon={EditIcon}
               mode="bleed"
               onClick={handleEditButtonClicked}
-              padding={2}
-              alt={t('inputs.portable-text.action.edit-annotation')}
               tabIndex={0}
+              tooltipProps={null}
             />
             <Button
+              aria-label={t('inputs.portable-text.action.remove-annotation')}
               icon={TrashIcon}
               mode="bleed"
-              padding={2}
               onClick={handleRemoveButtonClicked}
-              tone="critical"
-              alt={t('inputs.portable-text.action.remove-annotation')}
               tabIndex={0}
+              tone="critical"
+              tooltipProps={null}
             />
-          </Inline>
+          </Flex>
         </Box>
       }
       fallbackPlacements={POPOVER_FALLBACK_PLACEMENTS}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
index 15e89f01eff..bef2ee1d06e 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
@@ -5,9 +5,10 @@ import {
   usePortableTextEditor,
 } from '@sanity/portable-text-editor'
 import {ObjectSchemaType, Path, PortableTextBlock, isImage} from '@sanity/types'
-import {Tooltip, Flex, ResponsivePaddingProps, Box} from '@sanity/ui'
+import {Box, Flex, ResponsivePaddingProps} from '@sanity/ui'
 import React, {PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
+import {TooltipWithNodes} from '../../../../../ui'
 import {
   BlockProps,
   RenderAnnotationCallback,
@@ -187,7 +188,7 @@ export function BlockObject(props: BlockObjectProps) {
   const toolTipContent = useMemo(
     () =>
       (tooltipEnabled && (
-        <TooltipBox padding={2}>
+        <TooltipBox>
           <Markers
             markers={markers}
             validation={validation}
@@ -272,7 +273,7 @@ export function BlockObject(props: BlockObjectProps) {
       >
         <Flex paddingBottom={1} marginY={3} style={debugRender()}>
           <InnerFlex flex={1}>
-            <Tooltip
+            <TooltipWithNodes
               placement="top"
               portal="editor"
               disabled={!tooltipEnabled}
@@ -281,7 +282,7 @@ export function BlockObject(props: BlockObjectProps) {
               <PreviewContainer {...innerPaddingProps}>
                 {renderBlock && renderBlock(componentProps)}
               </PreviewContainer>
-            </Tooltip>
+            </TooltipWithNodes>
             <BlockActionsOuter marginRight={1}>
               <BlockActionsInner>
                 {renderBlockActions && value && focused && !readOnly && (
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
index 8c071e09632..12e482ae76c 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
@@ -1,14 +1,5 @@
-import {EditIcon, LinkIcon, TrashIcon, EyeOpenIcon, EllipsisVerticalIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuButtonProps,
-  MenuItem,
-  useGlobalKeyDown,
-} from '@sanity/ui'
+import {EditIcon, LinkIcon, TrashIcon, EyeOpenIcon, EllipsisHorizontalIcon} from '@sanity/icons'
+import {Box, Flex, Menu, MenuButton, MenuButtonProps, useGlobalKeyDown} from '@sanity/ui'
 import React, {
   type PropsWithChildren,
   type ReactElement,
@@ -20,6 +11,7 @@ import React, {
   useRef,
 } from 'react'
 import {type PortableTextBlock, isReference} from '@sanity/types'
+import {Button, MenuItem} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 import {IntentLink} from 'sanity/router'
 
@@ -102,11 +94,10 @@ export function BlockObjectActionsMenu(props: BlockObjectActionsMenuProps): Reac
           button={
             <Button
               aria-label={t('inputs.portable-text.block.open-menu-aria-label')}
-              fontSize={1}
-              iconRight={EllipsisVerticalIcon}
+              icon={EllipsisHorizontalIcon}
               mode="bleed"
-              paddingX={2}
               tabIndex={focused ? 0 : 1}
+              tooltipProps={{content: 'Open menu'}}
             />
           }
           ref={menuButton}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
index f886216daa6..b7829697f16 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
@@ -5,8 +5,8 @@ import {
 } from '@sanity/portable-text-editor'
 import {ObjectSchemaType, Path, PortableTextBlock, PortableTextChild} from '@sanity/types'
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
-import {Tooltip} from '@sanity/ui'
 import {isEqual} from '@sanity/util/paths'
+import {TooltipWithNodes} from '../../../../../ui'
 import {
   BlockProps,
   RenderAnnotationCallback,
@@ -186,7 +186,7 @@ export const InlineObject = (props: InlineObjectProps) => {
   const toolTipContent = useMemo(
     () =>
       (tooltipEnabled && (
-        <TooltipBox padding={2}>
+        <TooltipBox>
           <Markers
             markers={markers}
             validation={validation}
@@ -201,7 +201,7 @@ export const InlineObject = (props: InlineObjectProps) => {
   return useMemo(
     () => (
       <span ref={memberItem?.elementRef} contentEditable={false}>
-        <Tooltip
+        <TooltipWithNodes
           placement="bottom"
           portal="editor"
           disabled={!tooltipEnabled}
@@ -211,7 +211,7 @@ export const InlineObject = (props: InlineObjectProps) => {
           {renderInlineBlock && (
             <span style={{position: 'relative'}}>{renderInlineBlock(componentProps)}</span>
           )}
-        </Tooltip>
+        </TooltipWithNodes>
       </span>
     ),
     [componentProps, memberItem?.elementRef, renderInlineBlock, toolTipContent, tooltipEnabled],
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx
index 2298a594c36..034e93f2db9 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx
@@ -1,23 +1,8 @@
 import React, {useRef, useCallback, useMemo} from 'react'
-import {
-  Box,
-  Button,
-  Inline,
-  Popover,
-  PopoverProps,
-  Text,
-  useGlobalKeyDown,
-  useTheme,
-} from '@sanity/ui'
-import styled from 'styled-components'
+import {Box, Inline, Popover, PopoverProps, Text, useGlobalKeyDown, useTheme} from '@sanity/ui'
 import {EditIcon, TrashIcon} from '@sanity/icons'
 import {useTranslation} from '../../../../i18n'
-
-const ToolbarPopover = styled(Popover)`
-  &[data-popper-reference-hidden='true'] {
-    display: none !important;
-  }
-`
+import {Button} from '../../../../../ui'
 
 const POPOVER_FALLBACK_PLACEMENTS: PopoverProps['fallbackPlacements'] = ['top', 'bottom']
 
@@ -89,7 +74,7 @@ export function InlineObjectToolbarPopover(props: InlineObjectToolbarPopoverProp
       <Box padding={1}>
         <Inline space={1}>
           <Box padding={2}>
-            <Text weight="semibold" size={1}>
+            <Text weight="medium" size={1}>
               {title}
             </Text>
           </Box>
@@ -97,18 +82,16 @@ export function InlineObjectToolbarPopover(props: InlineObjectToolbarPopoverProp
             icon={EditIcon}
             mode="bleed"
             onClick={onEdit}
-            padding={2}
             ref={editButtonRef}
-            alt={t('inputs.portable-text.inline-object.edit')}
+            tooltipProps={{content: t('inputs.portable-text.inline-object.edit')}}
           />
           <Button
             ref={deleteButtonRef}
             icon={TrashIcon}
             mode="bleed"
-            padding={2}
             onClick={handleDelete}
             tone="critical"
-            alt={t('inputs.portable-text.inline-object.remove')}
+            tooltipProps={{content: t('inputs.portable-text.inline-object.remove')}}
           />
         </Inline>
       </Box>
@@ -117,7 +100,7 @@ export function InlineObjectToolbarPopover(props: InlineObjectToolbarPopoverProp
   )
 
   return (
-    <ToolbarPopover
+    <Popover
       constrainSize
       content={popoverContent}
       fallbackPlacements={POPOVER_FALLBACK_PLACEMENTS}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/modals/DialogModal.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/modals/DialogModal.tsx
index 66d2cd5a7f7..0e02a506be5 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/modals/DialogModal.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/modals/DialogModal.tsx
@@ -1,7 +1,8 @@
 import React, {useId, useRef, useState} from 'react'
-import {Box, Dialog} from '@sanity/ui'
+import {Box} from '@sanity/ui'
 import {PresenceOverlay} from '../../../../../presence'
 import {VirtualizerScrollInstanceProvider} from '../../../arrays/ArrayOfObjectsInput/List/VirtualizerScrollInstanceProvider'
+import {Dialog} from '../../../../../../ui'
 import {ModalWidth} from './types'
 
 interface DefaultEditDialogProps {
@@ -36,9 +37,7 @@ export function DefaultEditDialog(props: DefaultEditDialogProps) {
           scrollElement={contentElement}
           containerElement={containerElement}
         >
-          <Box padding={4} ref={containerElement}>
-            {children}
-          </Box>
+          <Box ref={containerElement}>{children}</Box>
         </VirtualizerScrollInstanceProvider>
       </PresenceOverlay>
     </Dialog>
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts
index 3dcf515d99c..066cd68f246 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts
@@ -2,11 +2,6 @@ import {Box, Popover} from '@sanity/ui'
 import styled from 'styled-components'
 
 export const RootPopover = styled(Popover)`
-  &[data-popper-reference-hidden='true'] {
-    visibility: hidden;
-    pointer-events: none;
-  }
-
   & > div {
     overflow: hidden;
     overflow: clip;
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx
index 8dc81cad6c6..fdc709226c7 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable react/no-unused-prop-types */
 
 import {CloseIcon} from '@sanity/icons'
-import {Box, Button, Flex, PopoverProps, Text, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
+import {Box, Flex, PopoverProps, Text, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
+import {Button} from '../../../../../../ui'
 import {PresenceOverlay} from '../../../../../presence'
 import {PortableTextEditorElement} from '../../Compositor'
 import {VirtualizerScrollInstanceProvider} from '../../../arrays/ArrayOfObjectsInput/List/VirtualizerScrollInstanceProvider'
@@ -82,7 +83,7 @@ function Content(props: PopoverEditDialogProps) {
         <ContentHeaderBox flex="none" padding={1}>
           <Flex align="center">
             <Box flex={1} padding={2}>
-              <Text weight="semibold">{title}</Text>
+              <Text weight="medium">{title}</Text>
             </Box>
 
             <Button
@@ -90,7 +91,7 @@ function Content(props: PopoverEditDialogProps) {
               icon={CloseIcon}
               mode="bleed"
               onClick={onClose}
-              padding={2}
+              tooltipProps={{content: 'Close'}}
             />
           </Flex>
         </ContentHeaderBox>
diff --git a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
index e8cf732dc34..eae90d5b1f1 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
@@ -1,4 +1,4 @@
-import {Box, Flex, ResponsivePaddingProps, Tooltip, Text} from '@sanity/ui'
+import {Box, Flex, ResponsivePaddingProps, Text} from '@sanity/ui'
 import React, {RefObject, useCallback, useMemo, useState} from 'react'
 import {ObjectSchemaType, Path, PortableTextTextBlock} from '@sanity/types'
 import {
@@ -7,6 +7,7 @@ import {
   usePortableTextEditor,
 } from '@sanity/portable-text-editor'
 import {isEqual} from '@sanity/util/paths'
+import {TooltipWithNodes} from '../../../../../ui'
 import {
   BlockProps,
   RenderAnnotationCallback,
@@ -249,7 +250,7 @@ export function TextBlock(props: TextBlockProps) {
   const toolTipContent = useMemo(
     () =>
       (tooltipEnabled && (
-        <TooltipBox padding={2}>
+        <TooltipBox>
           <Markers
             markers={markers}
             renderCustomMarkers={renderCustomMarkers}
@@ -272,7 +273,7 @@ export function TextBlock(props: TextBlockProps) {
         <TextBlockFlexWrapper data-testid="text-block__wrapper">
           <Flex flex={1} {...innerPaddingProps}>
             <Box flex={1}>
-              <Tooltip
+              <TooltipWithNodes
                 content={toolTipContent}
                 disabled={!tooltipEnabled}
                 placement="top"
@@ -290,7 +291,7 @@ export function TextBlock(props: TextBlockProps) {
                 >
                   {renderBlock && renderBlock(componentProps)}
                 </TextRoot>
-              </Tooltip>
+              </TooltipWithNodes>
             </Box>
 
             <BlockExtrasContainer contentEditable={false}>
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
index c0a6f7ff388..7cfef2b5ee9 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
@@ -1,6 +1,5 @@
 import React, {memo, useCallback, useMemo} from 'react'
-import {Button, ButtonProps, PopoverProps} from '@sanity/ui'
-import {EllipsisVerticalIcon} from '@sanity/icons'
+import {PopoverProps} from '@sanity/ui'
 import {useTranslation} from 'react-i18next'
 import {
   PortableTextEditor,
@@ -8,7 +7,9 @@ import {
   usePortableTextEditorSelection,
 } from '@sanity/portable-text-editor'
 import {isKeySegment} from '@sanity/types'
+import {EllipsisHorizontalIcon} from '@sanity/icons'
 import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
+import {Button} from '../../../../../ui'
 import {PTEToolbarAction, PTEToolbarActionGroup} from './types'
 import {useActiveActionKeys, useFocusBlock} from './hooks'
 import {getActionIcon} from './helpers'
@@ -16,7 +17,6 @@ import {getActionIcon} from './helpers'
 const CollapseMenuMemo = memo(CollapseMenu)
 
 const MENU_POPOVER_PROPS: PopoverProps = {constrainSize: true, portal: true}
-const COLLAPSE_BUTTON_PROPS: ButtonProps = {padding: 2, mode: 'bleed'}
 
 interface ActionMenuProps {
   disabled: boolean
@@ -71,6 +71,9 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
     PortableTextEditor.focus(editor)
   }, [editor])
 
+  const {t} = useTranslation()
+  const tooltipPlacement = isFullscreen ? 'bottom' : 'top'
+
   const children = useMemo(
     () =>
       actions.map((action) => {
@@ -89,7 +92,7 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
           <CollapseMenuButton
             data-testid={`action-button-${action.key}`}
             disabled={disabled || annotationDisabled}
-            {...COLLAPSE_BUTTON_PROPS}
+            mode="bleed"
             dividerBefore={action.firstInGroup}
             icon={getActionIcon(action, active)}
             key={action.key}
@@ -100,22 +103,36 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
             tooltipText={annotationDisabled ? annotationDisabledText : action.title || action.key}
             tooltipProps={{
               disabled: disabled,
-              placement: isFullscreen ? 'bottom' : 'top',
+              placement: tooltipPlacement,
               portal: 'default',
             }}
           />
         )
       }),
-    [actions, activeKeys, disabled, isEmptyTextBlock, isFullscreen, isSelectingMultipleBlocks, t],
+    [
+      actions,
+      activeKeys,
+      disabled,
+      isEmptyTextBlock,
+      isSelectingMultipleBlocks,
+      t,
+      tooltipPlacement,
+    ],
   )
 
   const menuButtonProps = useMemo(
     () => ({
-      button: <Button icon={EllipsisVerticalIcon} mode="bleed" padding={2} disabled={disabled} />,
+      button: (
+        <Button
+          icon={EllipsisHorizontalIcon}
+          mode="bleed"
+          disabled={disabled}
+          tooltipProps={{content: 'Show more', placement: tooltipPlacement}}
+        />
+      ),
       popover: MENU_POPOVER_PROPS,
     }),
-
-    [disabled],
+    [disabled, tooltipPlacement],
   )
 
   return (
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
index 0f68c736cb5..17c521a2f24 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
@@ -1,7 +1,14 @@
 import React, {memo, useCallback, useMemo} from 'react'
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
-import {Button, Menu, MenuButton, MenuButtonProps, MenuItem, Text} from '@sanity/ui'
-import {SelectIcon} from '@sanity/icons'
+import {
+  Menu,
+  MenuButton,
+  MenuButtonProps,
+  // eslint-disable-next-line no-restricted-imports
+  MenuItem,
+  Text,
+} from '@sanity/ui'
+import {ChevronDownIcon} from '@sanity/icons'
 import styled from 'styled-components'
 import {useTranslation} from '../../../../i18n'
 import {
@@ -14,6 +21,7 @@ import {
   BlockQuote,
   Normal,
 } from '../text/textStyles'
+import {Button} from '../../../../../ui'
 import {useActiveStyleKeys, useFocusBlock} from './hooks'
 import {BlockStyleItem} from './types'
 
@@ -34,10 +42,6 @@ const StyledMenuItem = styled(MenuItem)`
   }
 `
 
-const StyledButton = styled(Button)`
-  width: 100%;
-`
-
 const MENU_POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
   placement: 'bottom-start',
@@ -128,13 +132,13 @@ export const BlockStyleSelect = memo(function BlockStyleSelect(
 
   const button = useMemo(
     () => (
-      <StyledButton
+      <Button
         disabled={_disabled}
-        iconRight={SelectIcon}
+        iconRight={ChevronDownIcon}
         mode="bleed"
         onClick={preventDefault}
-        padding={2}
         text={menuButtonText}
+        width="fill"
       />
     ),
     [_disabled, menuButtonText],
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
index b3832d8b44a..2e0a63d39a4 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
@@ -1,10 +1,11 @@
 import React, {memo, useCallback, useMemo} from 'react'
 import {AddIcon} from '@sanity/icons'
-import {Button, PopoverProps} from '@sanity/ui'
+import {PopoverProps} from '@sanity/ui'
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
 import {upperFirst} from 'lodash'
 import {useTranslation} from '../../../../i18n'
 import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
+import {Button} from '../../../../../ui'
 import {BlockItem} from './types'
 import {useFocusBlock} from './hooks'
 
@@ -31,6 +32,8 @@ export const InsertMenu = memo(function InsertMenu(props: InsertMenuProps) {
     PortableTextEditor.focus(editor)
   }, [editor])
 
+  const tooltipPlacement = isFullscreen ? 'bottom' : 'top'
+
   const children = useMemo(() => {
     return items.map((item) => {
       const title = item.type.title || upperFirst(item.type.name)
@@ -43,7 +46,6 @@ export const InsertMenu = memo(function InsertMenu(props: InsertMenuProps) {
               : 'inputs.portable-text.action.insert-block-aria-label',
             {typeName: title},
           )}
-          padding={2}
           mode="bleed"
           disabled={disabled || (isVoidFocus && item.inline === true)}
           icon={item.icon}
@@ -59,21 +61,27 @@ export const InsertMenu = memo(function InsertMenu(props: InsertMenuProps) {
           )}
           tooltipProps={{
             disabled,
-            placement: isFullscreen ? 'bottom' : 'top',
+            placement: tooltipPlacement,
             portal: 'default',
           }}
         />
       )
     })
-  }, [disabled, isFullscreen, isVoidFocus, items, t])
+  }, [disabled, isVoidFocus, items, t, tooltipPlacement])
 
   const menuButtonProps = useMemo(
     () => ({
-      button: <Button icon={AddIcon} mode="bleed" padding={2} disabled={disabled} />,
+      button: (
+        <Button
+          icon={AddIcon}
+          mode="bleed"
+          disabled={disabled}
+          tooltipProps={{content: 'Show more', placement: tooltipPlacement}}
+        />
+      ),
       popover: MENU_POPOVER_PROPS,
     }),
-
-    [disabled],
+    [disabled, tooltipPlacement],
   )
 
   return (
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
index 50a2be4b25f..9e7333e3e29 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
@@ -6,11 +6,12 @@ import {
 } from '@sanity/portable-text-editor'
 import React, {memo, useCallback, useMemo, useState} from 'react'
 import {ObjectSchemaType, Path, SchemaType} from '@sanity/types'
-import {Box, Button, Flex, Hotkeys, Text, Tooltip, useElementRect, useToast} from '@sanity/ui'
+import {Box, Flex, useElementRect, useToast} from '@sanity/ui'
 import {CollapseIcon, ExpandIcon} from '@sanity/icons'
 import styled, {css} from 'styled-components'
 import {useRovingFocus} from '../../../../components'
 import {useResolveInitialValueForType} from '../../../../store'
+import {Button} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 import {ActionMenu} from './ActionMenu'
 import {BlockStyleSelect} from './BlockStyleSelect'
@@ -128,33 +129,21 @@ const InnerToolbar = memo(function InnerToolbar({
         )}
       </Flex>
       <FullscreenButtonBox padding={isFullscreen ? 2 : 1}>
-        <Tooltip
-          content={
-            <Flex align="center" padding={1}>
-              <Box flex={1} paddingX={1}>
-                <Text size={1}>
-                  {t(
-                    isFullscreen
-                      ? 'inputs.portable-text.action.collapse-editor'
-                      : 'inputs.portable-text.action.expand-editor',
-                  )}
-                </Text>
-              </Box>
-              <Box marginLeft={1}>
-                <Hotkeys keys={[`${IS_MAC ? 'Cmd' : 'Ctrl'}`, 'Enter']} />
-              </Box>
-            </Flex>
-          }
-          placement={isFullscreen ? 'bottom' : 'top'}
-          portal="default"
-        >
-          <Button
-            padding={2}
-            icon={isFullscreen ? CollapseIcon : ExpandIcon}
-            mode="bleed"
-            onClick={onToggleFullscreen}
-          />
-        </Tooltip>
+        <Button
+          icon={isFullscreen ? CollapseIcon : ExpandIcon}
+          mode="bleed"
+          onClick={onToggleFullscreen}
+          tooltipProps={{
+            content: t(
+              isFullscreen
+                ? 'inputs.portable-text.action.collapse-editor'
+                : 'inputs.portable-text.action.expand-editor',
+            ),
+            hotkeys: [`${IS_MAC ? 'Cmd' : 'Ctrl'}`, 'Enter'],
+            placement: isFullscreen ? 'bottom' : 'top',
+            portal: 'default',
+          }}
+        />
       </FullscreenButtonBox>
     </RootFlex>
   )
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
index f32c5129073..c000c117c06 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
@@ -1,12 +1,14 @@
-import React, {ComponentProps} from 'react'
+import React from 'react'
 import {AddIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, type MenuButtonProps, MenuItem, Tooltip} from '@sanity/ui'
+import {Menu, MenuButton, type MenuButtonProps} from '@sanity/ui'
 import {useGetI18nText, useTranslation} from '../../../i18n'
 import {InsufficientPermissionsMessage} from '../../../components'
+import {Button, MenuItem, TooltipWithNodes} from '../../../../ui'
 import {useCurrentUser} from '../../../store'
 import type {CreateReferenceOption} from './types'
 
-interface Props extends ComponentProps<typeof Button> {
+interface Props
+  extends Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'size' | 'width' | 'type' | 'ref'> {
   id: string
   createOptions: CreateReferenceOption[]
   menuRef?: React.RefObject<HTMLDivElement>
@@ -36,14 +38,12 @@ export function CreateButton(props: Props) {
   const canCreateAny = createOptions.some((option) => option.permission.granted)
   if (!canCreateAny) {
     return (
-      <Tooltip
+      <TooltipWithNodes
         content={
-          <Box padding={2}>
-            <InsufficientPermissionsMessage
-              currentUser={currentUser}
-              context="create-new-reference"
-            />
-          </Box>
+          <InsufficientPermissionsMessage
+            currentUser={currentUser}
+            context="create-new-reference"
+          />
         }
       >
         {/* this wrapper div is needed because disabled button doesn't trigger mouse events */}
@@ -56,7 +56,7 @@ export function CreateButton(props: Props) {
             style={FULL_WIDTH}
           />
         </div>
-      </Tooltip>
+      </TooltipWithNodes>
     )
   }
 
@@ -75,16 +75,14 @@ export function CreateButton(props: Props) {
       menu={
         <Menu ref={menuRef}>
           {createOptions.map((createOption) => (
-            <Tooltip
+            <TooltipWithNodes
               disabled={createOption.permission.granted}
               key={createOption.id}
               content={
-                <Box padding={2}>
-                  <InsufficientPermissionsMessage
-                    currentUser={currentUser}
-                    context="create-document-type"
-                  />
-                </Box>
+                <InsufficientPermissionsMessage
+                  currentUser={currentUser}
+                  context="create-document-type"
+                />
               }
               portal
             >
@@ -98,7 +96,7 @@ export function CreateButton(props: Props) {
                   onClick={() => onCreate(createOption)}
                 />
               </div>
-            </Tooltip>
+            </TooltipWithNodes>
           ))}
         </Menu>
       }
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
index 72fe875a794..45c7ff5ad5e 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
@@ -1,28 +1,30 @@
 import React, {ComponentType, ReactNode, Fragment} from 'react'
 import type {Reference, ReferenceSchemaType} from '@sanity/types'
-import {Box, Flex, Inline, Label, Stack, Text, Tooltip} from '@sanity/ui'
+import {Badge, Box, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {AccessDeniedIcon, HelpCircleIcon} from '@sanity/icons'
+import {TooltipWithNodes} from '../../../../ui'
 import type {RenderPreviewCallback} from '../../types'
 import {SanityDefaultPreview} from '../../../preview'
 import {Translate, useTranslation} from '../../../i18n'
 import {useListFormat} from '../../../hooks'
-import {TextWithTone} from '../../../components'
+import {PreviewLayoutKey, TextWithTone} from '../../../components'
 import {ReferencePreview} from './ReferencePreview'
 import {Loadable} from './useReferenceInfo'
 import type {ReferenceInfo} from './types'
 
 export function PreviewReferenceValue(props: {
+  layout?: PreviewLayoutKey
   referenceInfo: Loadable<ReferenceInfo>
   renderPreview: RenderPreviewCallback
   type: ReferenceSchemaType
   value: Reference
   showTypeLabel?: boolean
 }) {
-  const {referenceInfo, renderPreview, type, value, showTypeLabel} = props
+  const {layout = 'default', referenceInfo, renderPreview, type, value, showTypeLabel} = props
   const {t} = useTranslation()
 
   if (referenceInfo.isLoading || referenceInfo.error) {
-    return <SanityDefaultPreview isPlaceholder />
+    return <SanityDefaultPreview isPlaceholder layout={layout} />
   }
 
   // Special handling for "create refs in place"
@@ -54,7 +56,7 @@ export function PreviewReferenceValue(props: {
       <Flex align="center">
         <Box flex={1}>
           {renderPreview({
-            layout: 'default',
+            layout,
             schemaType: refType,
             value: stub,
             skipVisibilityCheck: true,
@@ -62,11 +64,7 @@ export function PreviewReferenceValue(props: {
         </Box>
         <Box>
           <Inline space={4}>
-            {showTypeLabel && (
-              <Label size={1} muted>
-                {refType.title}
-              </Label>
-            )}
+            {showTypeLabel && <Badge mode="outline">{refType.title}</Badge>}
           </Inline>
         </Box>
       </Flex>
@@ -89,7 +87,7 @@ export function PreviewReferenceValue(props: {
         </Box>
         {insufficientPermissions || notFound ? (
           <Box>
-            <Tooltip
+            <TooltipWithNodes
               portal
               content={
                 notFound ? (
@@ -116,7 +114,7 @@ export function PreviewReferenceValue(props: {
               <TextWithTone tone="default">
                 <HelpCircleIcon />
               </TextWithTone>
-            </Tooltip>
+            </TooltipWithNodes>
           </Box>
         ) : null}
       </Inline>
@@ -142,7 +140,7 @@ export function PreviewReferenceValue(props: {
   return (
     <ReferencePreview
       id={value._ref}
-      layout="default"
+      layout={layout}
       preview={referenceInfo.result?.preview}
       refType={refType}
       renderPreview={renderPreview}
@@ -154,14 +152,12 @@ export function PreviewReferenceValue(props: {
 function UnavailableMessage(props: {icon: ComponentType; children: ReactNode; title: ReactNode}) {
   const Icon = props.icon
   return (
-    <Flex padding={3}>
-      <Box>
-        <Text size={1}>
-          <Icon />
-        </Text>
-      </Box>
+    <Flex>
+      <Text size={1}>
+        <Icon />
+      </Text>
       <Box flex={1} marginLeft={3}>
-        <Text size={1} weight="semibold">
+        <Text size={1} weight="medium">
           {props.title}
         </Text>
 
@@ -196,10 +192,10 @@ function InvalidType({
         </Flex>
       </Box>
       <Box>
-        <Tooltip
+        <TooltipWithNodes
           portal
           content={
-            <Stack space={3} padding={3}>
+            <Stack space={3}>
               <Text size={1}>
                 <Translate
                   t={t}
@@ -218,7 +214,7 @@ function InvalidType({
               <HelpCircleIcon />
             </TextWithTone>
           </Box>
-        </Tooltip>
+        </TooltipWithNodes>
       </Box>
     </Flex>
   )
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
index 91b2b28bc1f..0d976ad658c 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
@@ -10,18 +10,17 @@ import React, {
 import type {Reference, ReferenceSchemaType} from '@sanity/types'
 import {
   Box,
-  Button,
   Card,
   CardTone,
   Flex,
   Menu,
   MenuButton,
   MenuDivider,
-  MenuItem,
   Stack,
+  TooltipDelayGroupProvider,
 } from '@sanity/ui'
 import {
-  EllipsisVerticalIcon,
+  EllipsisHorizontalIcon,
   LaunchIcon as OpenInNewTabIcon,
   SyncIcon as ReplaceIcon,
   TrashIcon,
@@ -35,6 +34,8 @@ import {FieldActionsProvider, FieldActionsResolver} from '../../field'
 import {DocumentFieldActionNode} from '../../../config'
 import {usePublishedId} from '../../contexts/DocumentIdProvider'
 import {useTranslation} from '../../../i18n'
+import {Button, MenuItem} from '../../../../ui'
+import {TOOLTIP_DELAY_PROPS} from '../../../../ui/tooltip/constants'
 import {useReferenceInput} from './useReferenceInput'
 import {useReferenceInfo} from './useReferenceInfo'
 import {PreviewReferenceValue} from './PreviewReferenceValue'
@@ -197,7 +198,13 @@ export function ReferenceField(props: ReferenceFieldProps) {
       readOnly ? null : (
         <Box marginLeft={1}>
           <MenuButton
-            button={<Button paddingY={3} paddingX={2} mode="bleed" icon={EllipsisVerticalIcon} />}
+            button={
+              <Button
+                mode="bleed"
+                icon={EllipsisHorizontalIcon}
+                tooltipProps={{content: 'Show more'}}
+              />
+            }
             id={`${inputId}-menuButton`}
             menu={
               <Menu>
@@ -268,31 +275,31 @@ export function ReferenceField(props: ReferenceFieldProps) {
           ) : (
             <Card shadow={1} radius={1} padding={1} tone={tone}>
               <Stack space={1}>
-                <Flex gap={1} align="center">
-                  <ReferenceLinkCard
-                    __unstable_focusRing
-                    as={EditReferenceLink}
-                    data-pressed={pressed ? true : undefined}
-                    data-selected={selected ? true : undefined}
-                    documentId={value?._ref}
-                    documentType={refType?.name}
-                    flex={1}
-                    paddingX={2}
-                    paddingY={1}
-                    pressed={pressed}
-                    radius={2}
-                    ref={elementRef}
-                    selected={selected}
-                    tone="inherit"
-                  >
-                    <PreviewReferenceValue
-                      value={value}
-                      referenceInfo={loadableReferenceInfo}
-                      renderPreview={renderPreview}
-                      type={schemaType}
-                    />
-                  </ReferenceLinkCard>
-                  <Box>{menu}</Box>
+                <Flex gap={1} align="center" style={{lineHeight: 0}}>
+                  <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+                    <ReferenceLinkCard
+                      __unstable_focusRing
+                      as={EditReferenceLink}
+                      data-pressed={pressed ? true : undefined}
+                      data-selected={selected ? true : undefined}
+                      documentId={value?._ref}
+                      documentType={refType?.name}
+                      flex={1}
+                      pressed={pressed}
+                      radius={2}
+                      ref={elementRef}
+                      selected={selected}
+                      tone="inherit"
+                    >
+                      <PreviewReferenceValue
+                        value={value}
+                        referenceInfo={loadableReferenceInfo}
+                        renderPreview={renderPreview}
+                        type={schemaType}
+                      />
+                    </ReferenceLinkCard>
+                    <Box>{menu}</Box>
+                  </TooltipDelayGroupProvider>
                 </Flex>
                 {footer}
               </Stack>
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx
index 4cd11f2301e..4779634d767 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx
@@ -8,7 +8,7 @@ import React, {
 } from 'react'
 import {concat, Observable, of} from 'rxjs'
 import {catchError, filter, map, scan, switchMap, tap} from 'rxjs/operators'
-import {Box, Button, Stack, Text, useToast} from '@sanity/ui'
+import {Box, Stack, Text, useToast} from '@sanity/ui'
 import {useObservableCallback} from 'react-rx'
 import {uuid} from '@sanity/uuid'
 import styled from 'styled-components'
@@ -18,6 +18,7 @@ import {PreviewCard} from '../../../components'
 import {getPublishedId, isNonNullable} from '../../../util'
 import {useDidUpdate} from '../../hooks/useDidUpdate'
 import {useOnClickOutside} from '../../hooks/useOnClickOutside'
+import {Button} from '../../../../ui'
 import {Translate, useTranslation} from '../../../i18n'
 import {useReferenceInput} from './useReferenceInput'
 import type {
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
index 5f2a585e0b8..52cefc1b898 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
@@ -1,32 +1,22 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardTone,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  Spinner,
-  Text,
-} from '@sanity/ui'
+import {Box, CardTone, Menu, MenuButton, MenuDivider} from '@sanity/ui'
 import React, {ComponentProps, ForwardedRef, forwardRef, useCallback, useMemo, useRef} from 'react'
 import {
   CloseIcon,
   CopyIcon as DuplicateIcon,
-  EllipsisVerticalIcon,
+  EllipsisHorizontalIcon,
   LaunchIcon as OpenInNewTabIcon,
   SyncIcon as ReplaceIcon,
   TrashIcon,
 } from '@sanity/icons'
 import type {Reference, ReferenceSchemaType, SchemaType} from '@sanity/types'
+import {LoadingBlock} from '../../../../ui/loadingBlock'
 import type {ObjectItem, ObjectItemProps} from '../../types'
 import {useScrollIntoViewOnFocusWithin} from '../../hooks/useScrollIntoViewOnFocusWithin'
 import {useDidUpdate} from '../../hooks/useDidUpdate'
 import {randomKey} from '../../utils/randomKey'
 import {FormFieldSet, FormFieldValidationStatus} from '../../components/formField'
 import {FieldPresence} from '../../../presence'
+import {Button, MenuItem} from '../../../../ui'
 import {useTranslation} from '../../../i18n'
 import {ChangeIndicator} from '../../../changeIndicators'
 import {RowLayout} from '../arrays/layouts/RowLayout'
@@ -69,14 +59,6 @@ function getTone({
   return hasWarnings ? 'caution' : 'default'
 }
 const MENU_POPOVER_PROPS = {portal: true, tone: 'default'} as const
-const INITIAL_VALUE_CARD_STYLE = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  opacity: 0.6,
-} as const
 
 export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemValue>(
   props: ReferenceItemProps<Item>,
@@ -201,7 +183,13 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
       readOnly ? null : (
         <Box marginLeft={1}>
           <MenuButton
-            button={<Button paddingY={3} paddingX={2} mode="bleed" icon={EllipsisVerticalIcon} />}
+            button={
+              <Button
+                mode="bleed"
+                icon={EllipsisHorizontalIcon}
+                tooltipProps={{content: 'Show more'}}
+              />
+            }
             id={`${inputId}-menuButton`}
             menu={
               <Menu ref={menuRef}>
@@ -340,8 +328,6 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
             documentId={value?._ref}
             documentType={refType?.name}
             disabled={resolvingInitialValue}
-            paddingX={2}
-            paddingY={1}
             __unstable_focusRing
             selected={selected}
             pressed={pressed}
@@ -350,28 +336,13 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
             {...elementProps}
           >
             <PreviewReferenceValue
+              layout="compact"
               value={value}
               referenceInfo={loadableReferenceInfo}
               renderPreview={renderPreview}
               type={schemaType}
             />
-            {resolvingInitialValue && (
-              <Card
-                style={INITIAL_VALUE_CARD_STYLE}
-                tone="transparent"
-                radius={2}
-                as={Flex}
-                // @ts-expect-error composed from as={Flex}
-                justify="center"
-              >
-                <Flex align="center" justify="center" padding={3}>
-                  <Box marginX={3}>
-                    <Spinner muted />
-                  </Box>
-                  <Text>{t('inputs.reference.resolving-initial-value')}</Text>
-                </Flex>
-              </Card>
-            )}
+            {resolvingInitialValue && <LoadingBlock fill hideText />}
           </ReferenceLinkCard>
         )}
       </RowLayout>
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
index b204e9abee4..103f1848c2e 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
@@ -1,13 +1,12 @@
 import React, {useMemo} from 'react'
 import {ObjectSchemaType} from '@sanity/types'
-import {Box, Flex, Inline, Label, Text, Tooltip, useRootTheme} from '@sanity/ui'
-import {EditIcon, PublishIcon} from '@sanity/icons'
-import {RelativeTime} from '../../../components/RelativeTime'
-import {Translate, useTranslation} from '../../../i18n'
+import {Badge, Box, Inline} from '@sanity/ui'
+import {DocumentStatus} from '../../../../ui/documentStatus'
+import {PreviewLayoutKey} from '../../../components'
 import {RenderPreviewCallback} from '../../types'
-import {PreviewLayoutKey, TextWithTone} from '../../../components'
 import {useDocumentPresence} from '../../../store'
 import {DocumentPreviewPresence} from '../../../presence'
+import {useDocumentStatusTimeAgo} from '../../../hooks'
 import {ReferenceInfo} from './types'
 
 /**
@@ -24,8 +23,6 @@ export function ReferencePreview(props: {
 }) {
   const {id, layout, preview, refType, renderPreview, showTypeLabel} = props
 
-  const {t} = useTranslation()
-  const theme = useRootTheme()
   const documentPresence = useDocumentPresence(id)
 
   const previewId =
@@ -46,117 +43,40 @@ export function ReferencePreview(props: {
     [previewId, refType.name],
   )
 
+  const {draft, published} = preview
+  const tooltipLabel = useDocumentStatusTimeAgo({draft, published})
+
   const previewProps = useMemo(
     () => ({
+      children: (
+        <Box paddingLeft={3}>
+          <Inline space={3}>
+            {showTypeLabel && <Badge mode="outline">{refType.title}</Badge>}
+
+            {documentPresence && documentPresence.length > 0 && (
+              <DocumentPreviewPresence presence={documentPresence} />
+            )}
+
+            <DocumentStatus draft={preview.draft} published={preview.published} />
+          </Inline>
+        </Box>
+      ),
       layout,
       schemaType: refType,
+      tooltipLabel,
       value: previewStub,
     }),
-    [layout, previewStub, refType],
+    [
+      documentPresence,
+      layout,
+      preview.draft,
+      preview.published,
+      previewStub,
+      refType,
+      showTypeLabel,
+      tooltipLabel,
+    ],
   )
 
-  const publishedAt = preview.published?._updatedAt
-  const draftEditedAt = preview.draft?._updatedAt
-
-  return (
-    <Flex align="center">
-      <Box flex={1}>{renderPreview(previewProps)}</Box>
-
-      <Box paddingLeft={3}>
-        <Inline space={3}>
-          {showTypeLabel && (
-            <Label size={1} muted>
-              {refType.title}
-            </Label>
-          )}
-
-          {documentPresence && documentPresence.length > 0 && (
-            <DocumentPreviewPresence presence={documentPresence} />
-          )}
-
-          <Inline space={4}>
-            <Box>
-              <Tooltip
-                portal
-                content={
-                  <Box padding={2}>
-                    <Text size={1}>
-                      {publishedAt ? (
-                        <Translate
-                          t={t}
-                          i18nKey="inputs.reference.preview.published-at-time"
-                          components={{
-                            RelativeTime: () => (
-                              <RelativeTime time={publishedAt} useTemporalPhrase />
-                            ),
-                          }}
-                        />
-                      ) : (
-                        <>{t('inputs.reference.preview.not-published')}</>
-                      )}
-                    </Text>
-                  </Box>
-                }
-              >
-                <TextWithTone
-                  tone={theme.tone === 'default' ? 'positive' : 'default'}
-                  size={1}
-                  dimmed={!preview.published}
-                  muted={!preview.published}
-                >
-                  <PublishIcon
-                    aria-label={
-                      preview.published
-                        ? t('inputs.reference.preview.is-published-aria-label')
-                        : t('inputs.reference.preview.is-not-published-aria-label')
-                    }
-                  />
-                </TextWithTone>
-              </Tooltip>
-            </Box>
-
-            <Box>
-              <Tooltip
-                portal
-                content={
-                  <Box padding={2}>
-                    <Text size={1}>
-                      {draftEditedAt ? (
-                        <Translate
-                          t={t}
-                          i18nKey="inputs.reference.preview.edited-at-time"
-                          components={{
-                            RelativeTime: () => (
-                              <RelativeTime time={draftEditedAt} useTemporalPhrase />
-                            ),
-                          }}
-                        />
-                      ) : (
-                        <>{t('inputs.reference.preview.no-unpublished-edits')}</>
-                      )}
-                    </Text>
-                  </Box>
-                }
-              >
-                <TextWithTone
-                  tone={theme.tone === 'default' ? 'caution' : 'default'}
-                  size={1}
-                  dimmed={!preview.draft}
-                  muted={!preview.draft}
-                >
-                  <EditIcon
-                    aria-label={
-                      preview.draft
-                        ? t('inputs.reference.preview.has-unpublished-changes-aria-label')
-                        : t('inputs.reference.preview.has-no-unpublished-changes-aria-label')
-                    }
-                  />
-                </TextWithTone>
-              </Tooltip>
-            </Box>
-          </Inline>
-        </Inline>
-      </Box>
-    </Flex>
-  )
+  return renderPreview(previewProps)
 }
diff --git a/packages/sanity/src/core/form/inputs/SelectInput.tsx b/packages/sanity/src/core/form/inputs/SelectInput.tsx
index c88e8552f78..c9313a7802b 100644
--- a/packages/sanity/src/core/form/inputs/SelectInput.tsx
+++ b/packages/sanity/src/core/form/inputs/SelectInput.tsx
@@ -182,7 +182,7 @@ const RadioSelectItem = forwardRef(function RadioSelectItem(
       />
 
       <Box marginLeft={2}>
-        <Text size={1} weight="semibold">
+        <Text size={1} weight="medium">
           {item.title}
         </Text>
       </Box>
diff --git a/packages/sanity/src/core/form/inputs/Slug/SlugInput.tsx b/packages/sanity/src/core/form/inputs/Slug/SlugInput.tsx
index 20e2775e56a..10887ed1e59 100644
--- a/packages/sanity/src/core/form/inputs/Slug/SlugInput.tsx
+++ b/packages/sanity/src/core/form/inputs/Slug/SlugInput.tsx
@@ -9,7 +9,8 @@ import type {
   SlugValue,
 } from '@sanity/types'
 import * as PathUtils from '@sanity/util/paths'
-import {Box, Button, Card, Flex, Stack, TextInput} from '@sanity/ui'
+import {Box, Card, Flex, Stack, TextInput} from '@sanity/ui'
+import {Button} from '../../../../ui'
 import {PatchEvent, set, setIfMissing, unset} from '../../patch'
 import type {ObjectInputProps} from '../../types'
 import {useGetFormValue} from '../../contexts/GetFormValue'
@@ -98,7 +99,7 @@ export function SlugInput(props: SlugInputProps) {
 
   return (
     <Stack space={3}>
-      <Flex>
+      <Flex gap={1}>
         <Box flex={1}>
           <TextInput
             customValidity={errors.length > 0 ? errors[0].message : ''}
@@ -116,19 +117,18 @@ export function SlugInput(props: SlugInputProps) {
           )}
         </Box>
         {sourceField && (
-          <Box marginLeft={1}>
-            <Button
-              mode="ghost"
-              type="button"
-              disabled={readOnly || isUpdating}
-              onClick={handleGenerateSlug}
-              text={
-                generateState?.status === 'pending'
-                  ? t('inputs.slug.action.generating')
-                  : t('inputs.slug.action.generate')
-              }
-            />
-          </Box>
+          <Button
+            mode="ghost"
+            type="button"
+            disabled={readOnly || isUpdating}
+            onClick={handleGenerateSlug}
+            size="large"
+            text={
+              generateState?.status === 'pending'
+                ? t('inputs.slug.action.generating')
+                : t('inputs.slug.action.generate')
+            }
+          />
         )}
       </Flex>
     </Stack>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
index 6c4f80d6252..c21ee1a9b71 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
@@ -1,18 +1,9 @@
 import {ArraySchemaType, isReferenceSchemaType} from '@sanity/types'
 import {AddIcon} from '@sanity/icons'
 import React, {useId, useCallback} from 'react'
-import {
-  Box,
-  Button,
-  Grid,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Tooltip,
-  Text,
-  MenuButtonProps,
-} from '@sanity/ui'
+import {Grid, Menu, MenuButton, MenuButtonProps} from '@sanity/ui'
 import {ArrayInputFunctionsProps, ObjectItem} from '../../../types'
+import {Tooltip, Button, MenuItem} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
@@ -54,16 +45,9 @@ export function ArrayOfObjectsFunctions<
 
   if (readOnly) {
     return (
-      <Tooltip
-        portal
-        content={
-          <Box padding={2} sizing="border">
-            <Text size={1}>{t('inputs.array.read-only-label')}</Text>
-          </Box>
-        }
-      >
+      <Tooltip portal content={t('inputs.array.read-only-label')}>
         <Grid>
-          <Button icon={AddIcon} mode="ghost" disabled text={t(addItemI18nKey)} />
+          <Button icon={AddIcon} mode="ghost" disabled size="large" text={t(addItemI18nKey)} />
         </Grid>
       </Tooltip>
     )
@@ -72,10 +56,16 @@ export function ArrayOfObjectsFunctions<
   return (
     <Grid gap={1} style={{gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))'}}>
       {schemaType.of.length === 1 ? (
-        <Button icon={AddIcon} mode="ghost" onClick={handleAddBtnClick} text={t(addItemI18nKey)} />
+        <Button
+          icon={AddIcon}
+          mode="ghost"
+          onClick={handleAddBtnClick}
+          size="large"
+          text={t(addItemI18nKey)}
+        />
       ) : (
         <MenuButton
-          button={<Button icon={AddIcon} mode="ghost" text={t(addItemI18nKey)} />}
+          button={<Button icon={AddIcon} mode="ghost" size="large" text={t(addItemI18nKey)} />}
           id={menuButtonId || ''}
           menu={
             <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
index cf37b9bb14e..0361be2c362 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
@@ -1,10 +1,11 @@
 import React, {useCallback, useId} from 'react'
-import {EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
-import {Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {EllipsisHorizontalIcon, TrashIcon} from '@sanity/icons'
+import {Menu, MenuButton} from '@sanity/ui'
 import {ArrayItemError} from '../../../../store'
 import {useFormCallbacks} from '../../../../studio/contexts/FormCallbacks'
 import {PatchEvent, unset} from '../../../../patch'
 import {CellLayout} from '../../layouts/CellLayout'
+import {MenuItem, Button} from '../../../../../../ui'
 import {useTranslation} from '../../../../../i18n'
 import {IncompatibleItemType} from './IncompatibleItemType'
 
@@ -27,7 +28,13 @@ export function ErrorItem(props: {member: ArrayItemError; sortable?: boolean}) {
       style={{height: '100%'}}
       menu={
         <MenuButton
-          button={<Button padding={2} mode="bleed" icon={EllipsisVerticalIcon} />}
+          button={
+            <Button
+              mode="bleed"
+              icon={EllipsisHorizontalIcon}
+              tooltipProps={{content: 'Show more'}}
+            />
+          }
           id={`${id}-menuButton`}
           menu={
             <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
index cabb0fa068d..ea2d0a5a07d 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
@@ -1,20 +1,10 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardTone,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Spinner,
-  Text,
-} from '@sanity/ui'
+import {Box, Card, CardTone, Menu, MenuButton} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import {SchemaType} from '@sanity/types'
-import {CopyIcon as DuplicateIcon, EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
+import {CopyIcon as DuplicateIcon, EllipsisHorizontalIcon, TrashIcon} from '@sanity/icons'
 import styled from 'styled-components'
 import {getSchemaTypeTitle} from '../../../../../schema'
+import {Button, MenuItem} from '../../../../../../ui'
 import {ObjectItem, ObjectItemProps} from '../../../../types'
 import {useScrollIntoViewOnFocusWithin} from '../../../../hooks/useScrollIntoViewOnFocusWithin'
 import {useDidUpdate} from '../../../../hooks/useDidUpdate'
@@ -29,6 +19,7 @@ import {createProtoArrayValue} from '../createProtoArrayValue'
 import {InsertMenu} from '../InsertMenu'
 import {FIXME} from '../../../../../FIXME'
 import {EditPortal} from '../../../../components/EditPortal'
+import {LoadingBlock} from '../../../../../../ui/loadingBlock'
 import {useTranslation} from '../../../../../i18n'
 
 type GridItemProps<Item extends ObjectItem> = Omit<ObjectItemProps<Item>, 'renderDefault'>
@@ -68,13 +59,6 @@ function getTone({
   return hasWarnings ? 'caution' : 'default'
 }
 const MENU_POPOVER_PROPS = {portal: true, tone: 'default'} as const
-const INITIAL_VALUE_CARD_STYLE = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-} as const
 
 export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemProps<Item>) {
   const {
@@ -153,7 +137,13 @@ export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemPr
     () =>
       readOnly ? null : (
         <MenuButton
-          button={<Button padding={2} mode="bleed" icon={EllipsisVerticalIcon} />}
+          button={
+            <Button
+              mode="bleed"
+              icon={EllipsisHorizontalIcon}
+              tooltipProps={{content: 'Show more'}}
+            />
+          }
           id={`${props.inputId}-menuButton`}
           menu={
             <Menu>
@@ -213,18 +203,8 @@ export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemPr
           withBorder: false,
           withShadow: false,
         })}
-        {resolvingInitialValue && (
-          <Card as={Flex} style={INITIAL_VALUE_CARD_STYLE}>
-            <Flex align="center" justify="center" gap={1} padding={1}>
-              <Box padding={3}>
-                <Spinner muted />
-              </Box>
-              <Text muted size={1}>
-                {t('inputs.array.resolving-initial-value')}
-              </Text>
-            </Flex>
-          </Card>
-        )}
+
+        {resolvingInitialValue && <LoadingBlock fill />}
       </PreviewCard>
     </CellLayout>
   )
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx
index 4aec8be9a95..86ef660eaec 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx
@@ -47,7 +47,7 @@ export function IncompatibleItemType(props: Props) {
         <PopoverCard margin={1} padding={3} onKeyDown={handleKeyDown} tabIndex={0} overflow="auto">
           <Stack space={4}>
             <Box>
-              <Text weight="semibold">{t('inputs.array.error.type-is-incompatible-title')}</Text>
+              <Text weight="medium">{t('inputs.array.error.type-is-incompatible-title')}</Text>
             </Box>
             <Text size={1}>
               <Translate
@@ -62,7 +62,7 @@ export function IncompatibleItemType(props: Props) {
               </Text>
             </Box>
             <Stack space={2}>
-              <Text size={1} weight="semibold">
+              <Text size={1} weight="medium">
                 {t('inputs.array.error.json-representation-description')}
               </Text>
               <Card padding={2} overflow="auto" border>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
index 461b4cd5e7b..480ca76b25d 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable react/jsx-no-bind */
 import {SchemaType} from '@sanity/types'
 import React, {ComponentProps, memo} from 'react'
-import {MenuGroup, MenuItem, PopoverProps} from '@sanity/ui'
+import {PopoverProps} from '@sanity/ui'
 import {InsertAboveIcon, InsertBelowIcon} from '@sanity/icons'
+import {MenuGroup, MenuItem} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 
 interface Props {
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
index c04dbf9948a..ec308e7478c 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
@@ -1,8 +1,9 @@
-import React, {useCallback, useId} from 'react'
-import {EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import React, {useId} from 'react'
+import {EllipsisHorizontalIcon, TrashIcon} from '@sanity/icons'
+import {Box, Menu, MenuButton} from '@sanity/ui'
 import {ArrayItemError} from '../../../../store'
 import {RowLayout} from '../../layouts/RowLayout'
+import {Button, MenuItem} from '../../../../../../ui'
 import {useTranslation} from '../../../../../i18n'
 import {IncompatibleItemType} from './IncompatibleItemType'
 
@@ -25,7 +26,13 @@ export function ErrorItem(props: {
         tone="caution"
         menu={
           <MenuButton
-            button={<Button padding={2} mode="bleed" icon={EllipsisVerticalIcon} />}
+            button={
+              <Button
+                mode="bleed"
+                icon={EllipsisHorizontalIcon}
+                tooltipProps={{content: 'Show more'}}
+              />
+            }
             id={`${id}-menuButton`}
             menu={
               <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx
index 8fc7ea30fb8..848faf719da 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx
@@ -47,7 +47,7 @@ export function IncompatibleItemType(props: Props) {
         <PopoverCard margin={1} padding={3} onKeyDown={handleKeyDown} tabIndex={0} overflow="auto">
           <Stack space={4}>
             <Box>
-              <Text weight="semibold">{t('inputs.array.error.type-is-incompatible-title')}</Text>
+              <Text weight="medium">{t('inputs.array.error.type-is-incompatible-title')}</Text>
             </Box>
             <Text size={1}>
               <Translate
@@ -62,7 +62,7 @@ export function IncompatibleItemType(props: Props) {
               </Text>
             </Box>
             <Stack space={2}>
-              <Text size={1} weight="semibold">
+              <Text size={1} weight="medium">
                 {t('inputs.array.error.json-representation-description')}
               </Text>
               <Card padding={2} overflow="auto" border>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
index f5dff7e3161..b03503f8a9a 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
@@ -1,18 +1,8 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardTone,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Spinner,
-  Text,
-} from '@sanity/ui'
+import {Box, Card, CardTone, Menu, MenuButton} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import {SchemaType} from '@sanity/types'
-import {CopyIcon as DuplicateIcon, EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
+import {CopyIcon as DuplicateIcon, EllipsisHorizontalIcon, TrashIcon} from '@sanity/icons'
+import {Button, MenuItem} from '../../../../../../ui'
 import {getSchemaTypeTitle} from '../../../../../schema'
 import {ObjectItem, ObjectItemProps} from '../../../../types'
 import {useScrollIntoViewOnFocusWithin} from '../../../../hooks/useScrollIntoViewOnFocusWithin'
@@ -27,6 +17,7 @@ import {RowLayout} from '../../layouts/RowLayout'
 import {createProtoArrayValue} from '../createProtoArrayValue'
 import {InsertMenu} from '../InsertMenu'
 import {EditPortal} from '../../../../components/EditPortal'
+import {LoadingBlock} from '../../../../../../ui/loadingBlock'
 import {useTranslation} from '../../../../../i18n'
 
 type PreviewItemProps<Item extends ObjectItem> = Omit<ObjectItemProps<Item>, 'renderDefault'>
@@ -49,14 +40,6 @@ function getTone({
   return hasWarnings ? 'caution' : 'default'
 }
 const MENU_POPOVER_PROPS = {portal: true, tone: 'default'} as const
-const INITIAL_VALUE_CARD_STYLE = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  opacity: 0.6,
-} as const
 
 const BUTTON_CARD_STYLE = {position: 'relative'} as const
 
@@ -137,7 +120,13 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
     () =>
       readOnly ? null : (
         <MenuButton
-          button={<Button padding={2} mode="bleed" icon={EllipsisVerticalIcon} />}
+          button={
+            <Button
+              mode="bleed"
+              icon={EllipsisHorizontalIcon}
+              tooltipProps={{content: 'Show more'}}
+            />
+          }
           id={`${props.inputId}-menuButton`}
           menu={
             <Menu>
@@ -178,7 +167,6 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
         tone="inherit"
         radius={2}
         disabled={resolvingInitialValue}
-        padding={1}
         onClick={onOpen}
         ref={previewCardRef}
         onFocus={onFocus}
@@ -188,29 +176,12 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
         {renderPreview({
           schemaType: props.schemaType,
           value: props.value,
-          layout: 'default',
+          layout: 'compact',
           // Don't do visibility check for virtualized items as the calculation will be incorrect causing it to scroll
           skipVisibilityCheck: true,
         })}
-        {resolvingInitialValue && (
-          <Card
-            style={INITIAL_VALUE_CARD_STYLE}
-            tone="transparent"
-            radius={2}
-            as={Flex}
-            // @ts-expect-error composed from as={Flex}
-            justify="center"
-          >
-            <Flex align="center" justify="center" padding={3}>
-              <Box marginX={3}>
-                <Spinner muted />
-              </Box>
-              <Text size={1} muted>
-                {t('inputs.array.resolving-initial-value')}
-              </Text>
-            </Flex>
-          </Card>
-        )}
+
+        {resolvingInitialValue && <LoadingBlock fill hideText />}
       </Card>
     </RowLayout>
   )
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
index f420137b1ec..25aada6e397 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
@@ -2,8 +2,9 @@
 import {ArraySchemaType, isReferenceSchemaType} from '@sanity/types'
 import {AddIcon} from '@sanity/icons'
 import React, {useMemo, useId} from 'react'
-import {Box, Button, Grid, Menu, MenuButton, MenuItem, Tooltip, Text} from '@sanity/ui'
+import {Grid, Menu, MenuButton} from '@sanity/ui'
 import {ArrayInputFunctionsProps} from '../../../types'
+import {Tooltip, Button, MenuItem} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 
 /**
@@ -39,16 +40,9 @@ export function ArrayOfPrimitivesFunctions<
 
   if (readOnly) {
     return (
-      <Tooltip
-        portal
-        content={
-          <Box padding={2} sizing="border">
-            <Text size={1}>{t('inputs.array.read-only-label')}</Text>
-          </Box>
-        }
-      >
+      <Tooltip portal content={t('inputs.array.read-only-label')}>
         <Grid>
-          <Button icon={AddIcon} mode="ghost" disabled text={t(addItemI18nKey)} />
+          <Button icon={AddIcon} mode="ghost" disabled size="large" text={t(addItemI18nKey)} />
         </Grid>
       </Tooltip>
     )
@@ -57,10 +51,16 @@ export function ArrayOfPrimitivesFunctions<
   return (
     <Grid gap={1} style={{gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))'}}>
       {schemaType.of.length === 1 ? (
-        <Button icon={AddIcon} mode="ghost" onClick={handleAddBtnClick} text={t(addItemI18nKey)} />
+        <Button
+          icon={AddIcon}
+          mode="ghost"
+          onClick={handleAddBtnClick}
+          size="large"
+          text={t(addItemI18nKey)}
+        />
       ) : (
         <MenuButton
-          button={<Button icon={AddIcon} mode="ghost" text={t(addItemI18nKey)} />}
+          button={<Button icon={AddIcon} mode="ghost" size="large" text={t(addItemI18nKey)} />}
           id={menuButtonId || ''}
           menu={
             <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
index 9cd8522a556..c06eabc586d 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
@@ -1,13 +1,14 @@
 import React, {useCallback, useMemo} from 'react'
-import {Box, Button, Flex, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {Box, Flex, Menu, MenuButton} from '@sanity/ui'
 import {SchemaType} from '@sanity/types'
-import {CopyIcon as DuplicateIcon, EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
+import {CopyIcon as DuplicateIcon, EllipsisHorizontalIcon, TrashIcon} from '@sanity/icons'
 import {FormFieldValidationStatus} from '../../../components/formField'
 import {InsertMenu} from '../ArrayOfObjectsInput/InsertMenu'
 import {useTranslation} from '../../../../i18n'
 import {PrimitiveItemProps} from '../../../types/itemProps'
 import {RowLayout} from '../layouts/RowLayout'
 import {FieldPresence} from '../../../../presence'
+import {Button, MenuItem} from '../../../../../ui'
 import {getEmptyValue} from './getEmptyValue'
 
 export type DefaultItemProps = Omit<PrimitiveItemProps, 'renderDefault'> & {
@@ -64,7 +65,9 @@ export const ItemRow = React.forwardRef(function ItemRow(
 
   const menu = (
     <MenuButton
-      button={<Button padding={2} mode="bleed" icon={EllipsisVerticalIcon} />}
+      button={
+        <Button mode="bleed" icon={EllipsisHorizontalIcon} tooltipProps={{content: 'Show more'}} />
+      }
       id={`${inputId}-menuButton`}
       popover={MENU_BUTTON_POPOVER_PROPS}
       menu={
diff --git a/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx b/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
index cac8edb267d..92e7bd56756 100644
--- a/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components'
-import {Button, ButtonProps} from '@sanity/ui'
 import React, {useContext} from 'react'
 import {DragHandleIcon} from '@sanity/icons'
 import {useSortable} from '@dnd-kit/sortable'
+import {Button, ButtonProps} from '../../../../../ui'
 
 const DragHandleButton = styled(Button)<{grid?: boolean}>`
   cursor: ${(props) => (props.grid ? 'move' : 'ns-resize')};
@@ -10,21 +10,25 @@ const DragHandleButton = styled(Button)<{grid?: boolean}>`
 
 export const SortableItemIdContext = React.createContext<string | null>(null)
 
-export const DragHandle = function DragHandle(
-  props: {
-    grid?: boolean
-  } & ButtonProps,
-) {
+interface DragHandleProps {
+  grid?: boolean
+  size?: ButtonProps['size']
+  mode?: ButtonProps['mode']
+}
+
+export const DragHandle = function DragHandle(props: DragHandleProps) {
   const id = useContext(SortableItemIdContext)!
   const {listeners, attributes} = useSortable({id})
+  const {mode = 'bleed', ...rest} = props
 
   return (
     <DragHandleButton
       icon={DragHandleIcon}
-      mode="bleed"
+      tooltipProps={{content: 'Drag to reorder', delay: 1000}}
+      mode={mode}
       data-ui="DragHandleButton"
       {...attributes}
-      {...props}
+      {...rest}
       {...listeners}
     />
   )
diff --git a/packages/sanity/src/core/form/inputs/arrays/common/uploadTarget/uploadTarget.tsx b/packages/sanity/src/core/form/inputs/arrays/common/uploadTarget/uploadTarget.tsx
index ee101b42164..0abcfbd16c5 100644
--- a/packages/sanity/src/core/form/inputs/arrays/common/uploadTarget/uploadTarget.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/common/uploadTarget/uploadTarget.tsx
@@ -81,7 +81,7 @@ export function uploadTarget<Props>(Component: React.ComponentType<Props>) {
             description: rejected.map((task, i) => (
               <Flex key={i} padding={2}>
                 <Box marginLeft={1}>
-                  <Text weight="semibold">{task.file.name}</Text>
+                  <Text weight="medium">{task.file.name}</Text>
                 </Box>
                 <Box paddingLeft={2}>
                   <Text size={1}>({task.file.type})</Text>
diff --git a/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx b/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx
index 38ca9e01cc3..ffabf36f5c2 100644
--- a/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx
@@ -89,7 +89,7 @@ export function CellLayout(props: RowLayoutProps & ComponentProps<typeof Root>)
           tone="inherit"
           data-ui="DragHandleCard"
         >
-          <DragHandle grid padding={2} mode="ghost" />
+          <DragHandle grid mode="ghost" />
         </DragHandleCard>
       )}
 
diff --git a/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx b/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx
index 309d3c017b1..4d027e31664 100644
--- a/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx
@@ -62,16 +62,12 @@ export function RowLayout(props: RowLayoutProps) {
     >
       <Stack space={1}>
         <Flex align="center">
-          {dragHandle && (
-            <Box marginRight={1} paddingY={1}>
-              <DragHandle paddingX={1} paddingY={3} />
-            </Box>
-          )}
+          {dragHandle && <DragHandle />}
 
           <Box flex={1}>{children}</Box>
 
           {(presence || validation || menu) && (
-            <Flex align="center" marginLeft={1}>
+            <Flex align="center" gap={2} marginLeft={1} style={{lineHeight: 0}}>
               {presence && <Box marginLeft={1}>{presence}</Box>}
               {validation && <Box marginLeft={1}>{validation}</Box>}
               {menu}
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
index c39e149fdfe..c140543a735 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
@@ -1,8 +1,7 @@
-import {BinaryDocumentIcon, EllipsisVerticalIcon} from '@sanity/icons'
+import {BinaryDocumentIcon, EllipsisHorizontalIcon} from '@sanity/icons'
 import React, {ReactNode, useCallback, useEffect, useState} from 'react'
 import {
   Box,
-  Button,
   Card,
   Flex,
   Menu,
@@ -12,6 +11,7 @@ import {
   useClickOutside,
   useGlobalKeyDown,
 } from '@sanity/ui'
+import {Button} from '../../../../../ui'
 import {formatBytes} from '../../common/helper'
 import {useTranslation} from '../../../../i18n'
 
@@ -100,6 +100,7 @@ export function FileActionsMenu(props: Props) {
         onClick={onClick}
         flex={1}
       >
+        {/* todo: consider replacing with <SanityDefaultPreview> */}
         <Flex wrap="nowrap" align="center">
           <Card padding={3} tone="transparent" shadow={1} radius={1}>
             <Text muted={muted}>
@@ -107,7 +108,13 @@ export function FileActionsMenu(props: Props) {
             </Text>
           </Card>
           <Stack flex={1} space={2} marginLeft={3}>
-            <Text size={2} textOverflow="ellipsis" muted={muted} data-testid="file-name">
+            <Text
+              size={1}
+              textOverflow="ellipsis"
+              muted={muted}
+              data-testid="file-name"
+              weight="medium"
+            >
               {originalFilename}
             </Text>
             <Text size={1} muted data-testid="file-size">
@@ -131,10 +138,11 @@ export function FileActionsMenu(props: Props) {
             <Button
               aria-label={t('inputs.file.actions-menu.file-options.aria-label')}
               data-testid="options-menu-button"
-              icon={EllipsisVerticalIcon}
+              icon={EllipsisHorizontalIcon}
               mode="bleed"
               onClick={handleClick}
               ref={setOptionsButtonRef}
+              tooltipProps={{content: 'Show more'}}
             />
           </Popover>
         </Flex>
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
index fa9f5d4ebe1..90020cc52be 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
@@ -13,19 +13,11 @@ import {
   UploadState,
 } from '@sanity/types'
 import {ImageIcon, SearchIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Menu,
-  MenuButton,
-  MenuItem,
-  ThemeColorToneKey,
-  ToastParams,
-} from '@sanity/ui'
+import {Box, Card, Menu, MenuButton, ThemeColorToneKey, ToastParams} from '@sanity/ui'
 import {SanityClient} from '@sanity/client'
 import {isFileSource} from '@sanity/asset-utils'
 import {WithReferencedAsset} from '../../../utils/WithReferencedAsset'
+import {Button, MenuItem} from '../../../../../ui'
 import {Uploader, UploaderResolver, UploadOptions} from '../../../studio/uploads/types'
 import {FileInfo, FileTarget} from '../common/styles'
 import {UploadProgress} from '../common/UploadProgress'
@@ -534,7 +526,6 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
 
     return (
       <Button
-        fontSize={2}
         text={t('inputs.file.browse-button.text')}
         icon={SearchIcon}
         mode="ghost"
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileSkeleton.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileSkeleton.tsx
index 4be2937e4f1..ba5a5fe9198 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileSkeleton.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileSkeleton.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import {Skeleton, Flex, Stack, LabelSkeleton} from '@sanity/ui'
+import {Skeleton, Flex, Stack, TextSkeleton} from '@sanity/ui'
 
 export function FileSkeleton() {
   return (
     <Flex align="center" justify="flex-start" padding={2}>
       <Skeleton padding={3} radius={1} animated />
       <Stack flex={1} space={2} marginLeft={3}>
-        <LabelSkeleton style={{width: '100%'}} radius={1} animated />
-        <LabelSkeleton style={{width: '100%'}} radius={1} animated />
+        <TextSkeleton style={{width: '100%'}} radius={1} animated />
+        <TextSkeleton style={{width: '100%'}} radius={1} animated />
       </Stack>
     </Flex>
   )
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx
index e7ba5211aa6..f2f2c999d9d 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx
@@ -1,17 +1,13 @@
 import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
-import {Card, Flex, Box, Text, Stack, Button} from '@sanity/ui'
+import {Card, Flex, Box, Text, Stack} from '@sanity/ui'
 import React from 'react'
-import styled from 'styled-components'
+import {Button} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 
 type Props = {
   onClearValue?: () => void
 }
 
-const ButtonWrapper = styled(Button)`
-  width: 100%;
-`
-
 export function InvalidFileWarning({onClearValue}: Props) {
   const {t} = useTranslation()
   return (
@@ -23,17 +19,18 @@ export function InvalidFileWarning({onClearValue}: Props) {
           </Text>
         </Box>
         <Stack space={3}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             {t('inputs.file.invalid-file-warning.title')}
           </Text>
           <Text size={1}>{t('inputs.file.invalid-file-warning.description')}</Text>
         </Stack>
       </Flex>
-      <ButtonWrapper
+      <Button
         icon={ResetIcon}
-        text={t('inputs.file.invalid-file-warning.reset-button.text')}
-        onClick={onClearValue}
         mode="ghost"
+        onClick={onClearValue}
+        text={t('inputs.file.invalid-file-warning.reset-button.text')}
+        width="fill"
       />
     </Card>
   )
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
index 7f58b90a553..6704b932a9a 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
@@ -1,16 +1,16 @@
 import React, {MouseEventHandler, ReactNode, useCallback, useEffect, useState} from 'react'
-import {EllipsisVerticalIcon, CropIcon} from '@sanity/icons'
+import {EllipsisHorizontalIcon, CropIcon} from '@sanity/icons'
 import {
-  Button,
   Inline,
   Menu,
   Popover,
-  Text,
-  Tooltip,
+  TooltipDelayGroupProvider,
   useClickOutside,
   useGlobalKeyDown,
 } from '@sanity/ui'
 import styled from 'styled-components'
+import {Button} from '../../../../../ui'
+import {TOOLTIP_DELAY_PROPS} from '../../../../../ui/tooltip/constants'
 import {useTranslation} from '../../../../i18n'
 
 export const MenuActionsWrapper = styled(Inline)`
@@ -91,12 +91,9 @@ export function ImageActionsMenu(props: ImageActionsMenuProps) {
 
   const {t} = useTranslation()
   return (
-    <MenuActionsWrapper data-buttons space={1} padding={2}>
-      {showEdit && (
-        <Tooltip
-          content={<Text size={1}>{t('inputs.image.actions-menu.crop-image-tooltip')}</Text>}
-          padding={2}
-        >
+    <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+      <MenuActionsWrapper data-buttons space={1} padding={2}>
+        {showEdit && (
           <Button
             aria-label={t('inputs.image.actions-menu.edit-details.aria-label')}
             data-testid="options-menu-edit-details"
@@ -104,27 +101,30 @@ export function ImageActionsMenu(props: ImageActionsMenuProps) {
             mode="ghost"
             onClick={onEdit}
             ref={setHotspotButtonElement}
+            tooltipProps={{content: t('inputs.image.actions-menu.crop-image-tooltip')}}
           />
-        </Tooltip>
-      )}
-      {/* Using a customized Popover instead of MenuButton because a MenuButton will close on click
+        )}
+        {/* Using a customized Popover instead of MenuButton because a MenuButton will close on click
      and break replacing an uploaded file. */}
-      <Popover
-        id="image-actions-menu"
-        content={<Menu ref={setMenuElement}>{children}</Menu>}
-        portal
-        open={isMenuOpen}
-        constrainSize
-      >
-        <Button
-          aria-label={t('inputs.image.actions-menu.options.aria-label')}
-          data-testid="options-menu-button"
-          icon={EllipsisVerticalIcon}
-          mode="ghost"
-          onClick={handleClick}
-          ref={setOptionsButtonRef}
-        />
-      </Popover>
-    </MenuActionsWrapper>
+        <Popover
+          id="image-actions-menu"
+          content={<Menu ref={setMenuElement}>{children}</Menu>}
+          portal
+          open={isMenuOpen}
+          constrainSize
+        >
+          <Button
+            aria-label={t('inputs.image.actions-menu.options.aria-label')}
+            data-testid="options-menu-button"
+            icon={EllipsisHorizontalIcon}
+            mode="ghost"
+            onClick={handleClick}
+            ref={setOptionsButtonRef}
+            // TODO: localize
+            tooltipProps={{content: 'Show more'}}
+          />
+        </Popover>
+      </MenuActionsWrapper>
+    </TooltipDelayGroupProvider>
   )
 }
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
index dc3b9770163..9e1e6871fec 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
@@ -1,18 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable import/no-unresolved,react/jsx-handler-names, react/display-name, react/no-this-in-sfc */
 
-import {
-  Box,
-  Button,
-  Card,
-  Dialog,
-  Menu,
-  MenuButton,
-  MenuButtonProps,
-  MenuItem,
-  Stack,
-  ToastParams,
-} from '@sanity/ui'
+import {Box, Card, Menu, MenuButton, MenuButtonProps, Stack, ToastParams} from '@sanity/ui'
 import {get, startCase} from 'lodash'
 import {Observable, Subscription} from 'rxjs'
 import {ChevronDownIcon, ImageIcon, SearchIcon} from '@sanity/icons'
@@ -28,6 +17,7 @@ import {
 import React, {ReactNode} from 'react'
 import {SanityClient} from '@sanity/client'
 import {isImageSource} from '@sanity/asset-utils'
+import {Button, Dialog, MenuItem} from '../../../../../ui'
 import {PatchEvent, setIfMissing, unset} from '../../../patch'
 import {FieldMember} from '../../../store'
 import {InputProps, ObjectInputProps} from '../../../types'
@@ -408,19 +398,17 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
         width={1}
       >
         <PresenceOverlay>
-          <Box padding={4}>
-            <Stack space={5}>
-              {withImageTool && value?.asset && (
-                <ImageToolInput
-                  {...this.props}
-                  imageUrl={imageUrlBuilder.image(value.asset).url()}
-                  value={value as FIXME}
-                  presence={hotspotInputProps.presence}
-                  changed={changed}
-                />
-              )}
-            </Stack>
-          </Box>
+          <Stack space={5}>
+            {withImageTool && value?.asset && (
+              <ImageToolInput
+                {...this.props}
+                imageUrl={imageUrlBuilder.image(value.asset).url()}
+                value={value as FIXME}
+                presence={hotspotInputProps.presence}
+                changed={changed}
+              />
+            )}
+          </Stack>
         </PresenceOverlay>
       </Dialog>
     )
@@ -600,7 +588,6 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
 
     return (
       <Button
-        fontSize={2}
         text={t('inputs.image.browse-menu.text')}
         icon={SearchIcon}
         mode="ghost"
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
index 271d5b718cd..fc950b2c98e 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
@@ -1,4 +1,4 @@
-import {studioTheme, rgba, Card, Flex, CardTone, Spinner} from '@sanity/ui'
+import {studioTheme, rgba, Card, Flex, CardTone} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 
 export const MAX_DEFAULT_HEIGHT = 30
@@ -27,10 +27,6 @@ export const RatioBox = styled(Card)`
   }
 `
 
-export const SpinnerWrapper = styled(Spinner)`
-  position: absolute;
-`
-
 export const Overlay = styled(Flex)<{
   $drag: boolean
   $tone: Exclude<CardTone, 'inherit'>
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
index e31e8f7b844..de67d53a236 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
@@ -2,14 +2,9 @@ import React, {ComponentProps, useCallback, useEffect, useState} from 'react'
 
 import {AccessDeniedIcon, ImageIcon, ReadOnlyIcon} from '@sanity/icons'
 import {Box, Card, CardTone, Heading, Text, useElementRect} from '@sanity/ui'
+import {LoadingBlock} from '../../../../../ui/loadingBlock'
 import {useTranslation} from '../../../../i18n'
-import {
-  MAX_DEFAULT_HEIGHT,
-  RatioBox,
-  Overlay,
-  FlexOverlay,
-  SpinnerWrapper,
-} from './ImagePreview.styled'
+import {MAX_DEFAULT_HEIGHT, RatioBox, Overlay, FlexOverlay} from './ImagePreview.styled'
 
 interface Props {
   readOnly?: boolean | null
@@ -72,7 +67,7 @@ export function ImagePreview(props: ComponentProps<typeof Card> & Props) {
   return (
     <RatioBox {...rest} ref={setRootElement} style={{height: rootHeight}} tone="transparent">
       <Card data-container tone="inherit">
-        {!isLoaded && <OverlayComponent cardTone="transparent" drag content={<SpinnerWrapper />} />}
+        {!isLoaded && <OverlayComponent cardTone="transparent" drag content={<LoadingBlock />} />}
         <img
           src={src}
           data-testid="hotspot-image-input"
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
index 56def8de7ec..1587f937be3 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
@@ -1,17 +1,13 @@
 import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
-import {Card, Flex, Box, Text, Stack, Button} from '@sanity/ui'
+import {Card, Flex, Box, Text, Stack} from '@sanity/ui'
 import React from 'react'
-import styled from 'styled-components'
+import {Button} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 
 type Props = {
   onClearValue?: () => void
 }
 
-const ButtonWrapper = styled(Button)`
-  width: 100%;
-`
-
 export function InvalidImageWarning({onClearValue}: Props) {
   const {t} = useTranslation()
   return (
@@ -23,17 +19,18 @@ export function InvalidImageWarning({onClearValue}: Props) {
           </Text>
         </Box>
         <Stack space={3}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             {t('inputs.image.invalid-image-warning.title')}
           </Text>
           <Text size={1}>{t('inputs.image.invalid-image-warning.description')}</Text>
         </Stack>
       </Flex>
-      <ButtonWrapper
+      <Button
         icon={ResetIcon}
-        text={t('inputs.image.invalid-image-warning.reset-button.text')}
-        onClick={onClearValue}
         mode="ghost"
+        onClick={onClearValue}
+        text={t('inputs.image.invalid-image-warning.reset-button.text')}
+        width="fill"
       />
     </Card>
   )
diff --git a/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx b/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx
index 500eca730a8..42f9b689ee5 100644
--- a/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx
+++ b/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx
@@ -1,6 +1,7 @@
-import {Button, Card, Container, Flex} from '@sanity/ui'
+import {Card, Container, Flex} from '@sanity/ui'
 import React from 'react'
 import {UploadPlaceholder} from '../common/UploadPlaceholder'
+import {Button} from '../../../../../ui'
 
 export default function UploadPlaceholderStory() {
   return (
diff --git a/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
index 208173e9399..aba4f97ea46 100644
--- a/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
@@ -1,7 +1,8 @@
 import React, {MouseEventHandler, useCallback} from 'react'
 
 import {UploadIcon, CopyIcon, ResetIcon, DownloadIcon} from '@sanity/icons'
-import {Box, MenuItem, MenuDivider, Label, useToast} from '@sanity/ui'
+import {MenuDivider, useToast} from '@sanity/ui'
+import {MenuItem} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 import {FileInputMenuItem} from './FileInputMenuItem/FileInputMenuItem'
 
@@ -33,20 +34,13 @@ export function ActionsMenu(props: Props) {
 
   return (
     <>
-      <Box padding={2}>
-        <Label muted size={1}>
-          {t('inputs.files.common.actions-menu.replace.label')}
-        </Label>
-      </Box>
       <FileInputMenuItem
         icon={UploadIcon}
-        mode="bleed"
         onSelect={onUpload}
         accept={accept}
         text={t('inputs.files.common.actions-menu.upload.label')}
         data-testid="file-input-upload-button"
         disabled={readOnly || !directUploads}
-        fontSize={2}
       />
       {browse}
 
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputButton/FileInputButton.tsx b/packages/sanity/src/core/form/inputs/files/common/FileInputButton/FileInputButton.tsx
index 3166f3075e3..82dd0914b8f 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputButton/FileInputButton.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputButton/FileInputButton.tsx
@@ -1,9 +1,8 @@
-import React, {createElement, isValidElement, useId} from 'react'
-import {isValidElementType} from 'react-is'
-import {Box, ButtonProps, Flex, Text, useTheme} from '@sanity/ui'
+import React, {useId} from 'react'
+import {ButtonProps} from '../../../../../../ui'
 import {FileButton} from './styles'
 
-export interface FileInputButtonProps extends ButtonProps {
+export type FileInputButtonProps = ButtonProps & {
   accept?: string
   capture?: 'user' | 'environment'
   multiple?: boolean
@@ -16,23 +15,8 @@ export const FileInputButton = React.forwardRef(function FileInputButton(
     Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref' | 'type' | 'value' | 'onSelect'>,
   forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
-  const {
-    icon,
-    id: idProp,
-    accept,
-    capture,
-    fontSize,
-    multiple,
-    onSelect,
-    padding = 3,
-    space = 3,
-    textAlign,
-    text,
-    disabled,
-    ...rest
-  } = props
+  const {icon, id: idProp, accept, capture, multiple, onSelect, text, disabled, ...rest} = props
   const id = `${idProp || ''}-${useId()}`
-  const theme = useTheme()
 
   const handleChange = React.useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -43,36 +27,8 @@ export const FileInputButton = React.forwardRef(function FileInputButton(
     [onSelect],
   )
 
-  const content = (
-    <Flex align="center" justify="center" padding={padding}>
-      {/* Icon */}
-      {icon && (
-        <Box marginRight={text ? space : undefined}>
-          <Text size={fontSize}>
-            {isValidElement(icon) && icon}
-            {isValidElementType(icon) && createElement(icon)}
-          </Text>
-        </Box>
-      )}
-
-      {/* Text */}
-      {text && (
-        <Text
-          align={textAlign}
-          size={fontSize}
-          textOverflow="ellipsis"
-          weight={theme.sanity.button.textWeight}
-        >
-          {text}
-        </Text>
-      )}
-    </Flex>
-  )
-
   return (
-    <FileButton {...rest} htmlFor={id} padding={0} fontSize={2} disabled={disabled}>
-      {content}
-
+    <FileButton {...rest} icon={icon} text={text} htmlFor={id} disabled={disabled}>
       {/* Visibly hidden input */}
       <input
         data-testid="file-button-input"
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts b/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts
index fc8719e40f8..a1b4eed64e8 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts
@@ -1,5 +1,6 @@
-import {Button, Theme} from '@sanity/ui'
+import {Theme} from '@sanity/ui'
 import styled, {css} from 'styled-components'
+import {Button} from '../../../../../../ui'
 import {focusRingStyle} from '../../../../components/withFocusRing/helpers'
 
 export const FileButton = styled(Button).attrs({forwardedAs: 'label'})(
@@ -15,7 +16,11 @@ export const FileButton = styled(Button).attrs({forwardedAs: 'label'})(
         }
       }
 
-      & input {
+      // The underyling file input is rendered as children within a Sanity UI <Button> component.
+      // The below visibly hides it by targeting the input's parent <span> element, which is
+      // added by the <Button> component.
+      // TODO: refactor, avoid nth-child selector usage
+      & > span:nth-child(2) {
         overflow: hidden;
         overflow: clip;
         top: 0;
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx
index a6b29dd6acd..45a574b13b2 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx
@@ -1,5 +1,5 @@
-import {MenuItem} from '@sanity/ui'
 import styled from 'styled-components'
+import {MenuItem} from '../../../../../../ui'
 
 export const FileMenuItem = styled(MenuItem)`
   position: relative;
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx
index de864737015..2e99f0ef208 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx
@@ -1,9 +1,8 @@
-import React, {createElement, isValidElement, useId} from 'react'
-import {isValidElementType} from 'react-is'
-import {Box, ButtonProps, Flex, Text} from '@sanity/ui'
+import React, {useCallback, useId} from 'react'
+import {MenuItemProps} from '../../../../../../ui'
 import {FileMenuItem} from './FileInputMenuItem.styled'
 
-export interface FileInputMenuItemProps extends ButtonProps {
+export interface FileInputMenuItemProps extends Omit<MenuItemProps, 'onSelect'> {
   accept?: string
   capture?: 'user' | 'environment'
   multiple?: boolean
@@ -16,21 +15,7 @@ export const FileInputMenuItem = React.forwardRef(function FileInputMenuItem(
     Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref' | 'type' | 'value' | 'onSelect'>,
   forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
-  const {
-    icon,
-    id: idProp,
-    accept,
-    capture,
-    fontSize,
-    multiple,
-    onSelect,
-    padding = 3,
-    space = 3,
-    textAlign,
-    text,
-    disabled,
-    ...rest
-  } = props
+  const {icon, id: idProp, accept, capture, multiple, onSelect, text, disabled, ...rest} = props
   const id = `${idProp || ''}-${useId()}`
 
   const handleChange = React.useCallback(
@@ -42,50 +27,35 @@ export const FileInputMenuItem = React.forwardRef(function FileInputMenuItem(
     [onSelect],
   )
 
-  const content = (
-    <Flex align="center" justify="flex-start" padding={padding}>
-      {/* Icon */}
-      {icon && (
-        <Box marginRight={text ? space : undefined}>
-          <Text size={fontSize}>
-            {isValidElement(icon) && icon}
-            {isValidElementType(icon) && createElement(icon)}
-          </Text>
-        </Box>
-      )}
-
-      {/* Text */}
-      {text && (
-        <Text align={textAlign} size={fontSize} textOverflow="ellipsis">
-          {text}
-        </Text>
-      )}
-    </Flex>
+  const renderMenuItem = useCallback(
+    (item: React.JSX.Element) => (
+      <div>
+        {item}
+        {/* Visibly hidden input */}
+        <input
+          data-testid="file-menuitem-input"
+          accept={accept}
+          capture={capture}
+          id={id}
+          multiple={multiple}
+          onChange={handleChange}
+          type="file"
+          value=""
+          disabled={disabled}
+        />
+      </div>
+    ),
+    [accept, capture, disabled, handleChange, id, multiple],
   )
-
   return (
     <FileMenuItem
       {...rest}
       htmlFor={id}
-      padding={0}
-      fontSize={2}
       disabled={disabled}
       ref={forwardedRef}
-    >
-      {content}
-
-      {/* Visibly hidden input */}
-      <input
-        data-testid="file-menuitem-input"
-        accept={accept}
-        capture={capture}
-        id={id}
-        multiple={multiple}
-        onChange={handleChange}
-        type="file"
-        value=""
-        disabled={disabled}
-      />
-    </FileMenuItem>
+      icon={icon}
+      text={text}
+      renderMenuItem={renderMenuItem}
+    />
   )
 })
diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
index 132b1eb5e8e..57dab21e5ab 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
@@ -1,7 +1,8 @@
 import React, {useEffect} from 'react'
-import {Flex, Text, Button, Inline, Card} from '@sanity/ui'
+import {Flex, Text, Inline, Card} from '@sanity/ui'
 import {UploadState} from '@sanity/types'
 import {LinearProgress} from '../../../../components'
+import {Button} from '../../../../../ui'
 import {Translate, useTranslation} from '../../../../i18n'
 import {STALE_UPLOAD_MS} from '../constants'
 import {CardWrapper, FlexWrapper, LeftSection, CodeWrapper} from './UploadProgress.styled'
@@ -49,11 +50,10 @@ export function UploadProgress({uploadState, onCancel, onStale, height}: Props)
 
         {onCancel ? (
           <Button
-            fontSize={2}
-            text={t('input.files.common.cancel-upload')}
             mode="ghost"
-            tone="critical"
             onClick={onCancel}
+            text={t('input.files.common.cancel-upload')}
+            tone="critical"
           />
         ) : null}
       </FlexWrapper>
diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx
index a2f551497ac..1fa842f15e6 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx
@@ -1,7 +1,7 @@
 import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
-import {Card, Flex, Box, Text, Stack, Button} from '@sanity/ui'
+import {Card, Flex, Box, Text, Stack} from '@sanity/ui'
 import React from 'react'
-import styled from 'styled-components'
+import {Button} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 import {STALE_UPLOAD_MS} from '../constants'
 
@@ -9,10 +9,6 @@ type Props = {
   onClearStale?: () => void
 }
 
-const ButtonWrapper = styled(Button)`
-  width: 100%;
-`
-
 export function UploadWarning({onClearStale}: Props) {
   const {t} = useTranslation()
 
@@ -25,7 +21,7 @@ export function UploadWarning({onClearStale}: Props) {
           </Text>
         </Box>
         <Stack space={3}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             {t('inputs.files.common.stale-upload-warning.title')}
           </Text>
           <Text size={1}>
@@ -35,11 +31,12 @@ export function UploadWarning({onClearStale}: Props) {
           </Text>
         </Stack>
       </Flex>
-      <ButtonWrapper
+      <Button
         icon={ResetIcon}
-        text={t('inputs.files.common.stale-upload-warning.clear')}
-        onClick={onClearStale}
         mode="ghost"
+        onClick={onClearStale}
+        text={t('inputs.files.common.stale-upload-warning.clear')}
+        width="fill"
       />
     </Card>
   )
diff --git a/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx b/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx
index d3527a6917e..a5480bd7a64 100644
--- a/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx
+++ b/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx
@@ -46,14 +46,14 @@ export function IncompatibleItemType(props: Props) {
       content={
         <PopoverCard margin={1} padding={3} onKeyDown={handleKeyDown} tabIndex={0} overflow="auto">
           <Stack space={4}>
-            <Text weight="semibold">
+            <Text weight="medium">
               <Translate
                 t={t}
                 i18nKey="inputs.array.error.type-is-incompatible-prompt"
                 values={{typeName}}
               />
             </Text>
-            <Text size={1} weight="semibold">
+            <Text size={1} weight="medium">
               {t('inputs.array.error.type-is-incompatible-title')}
             </Text>
             <Text size={1}>
@@ -69,7 +69,7 @@ export function IncompatibleItemType(props: Props) {
               </Text>
             </Box>
             <Stack space={2}>
-              <Text size={1} weight="semibold">
+              <Text size={1} weight="medium">
                 {t('inputs.array.error.json-representation-description')}
               </Text>
               <Card padding={2} overflow="auto" border>
diff --git a/packages/sanity/src/core/form/members/object/errors/DuplicateKeysAlert.tsx b/packages/sanity/src/core/form/members/object/errors/DuplicateKeysAlert.tsx
index fd8fa9d0485..8753f3d5b96 100644
--- a/packages/sanity/src/core/form/members/object/errors/DuplicateKeysAlert.tsx
+++ b/packages/sanity/src/core/form/members/object/errors/DuplicateKeysAlert.tsx
@@ -1,6 +1,7 @@
-import {Button, Stack, Text} from '@sanity/ui'
+import {Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {FormField} from '../../../components/formField'
+import {Button} from '../../../../../ui'
 import {Alert} from '../../../components/Alert'
 import {DuplicateKeysError} from '../../../store/types/memberErrors'
 import {PatchEvent, set} from '../../../patch'
diff --git a/packages/sanity/src/core/form/members/object/errors/MissingKeysAlert.tsx b/packages/sanity/src/core/form/members/object/errors/MissingKeysAlert.tsx
index b9f472884a0..554764957e6 100644
--- a/packages/sanity/src/core/form/members/object/errors/MissingKeysAlert.tsx
+++ b/packages/sanity/src/core/form/members/object/errors/MissingKeysAlert.tsx
@@ -1,6 +1,7 @@
-import {Button, Stack, Text} from '@sanity/ui'
+import {Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {randomKey} from '@sanity/util/content'
+import {Button} from '../../../../../ui'
 import {MissingKeysError} from '../../../store/types/memberErrors'
 import {Details} from '../../../components/Details'
 import {Alert} from '../../../components/Alert'
diff --git a/packages/sanity/src/core/form/members/object/errors/MixedArrayAlert.tsx b/packages/sanity/src/core/form/members/object/errors/MixedArrayAlert.tsx
index d08ebf7e015..1c54fce2b1f 100644
--- a/packages/sanity/src/core/form/members/object/errors/MixedArrayAlert.tsx
+++ b/packages/sanity/src/core/form/members/object/errors/MixedArrayAlert.tsx
@@ -1,6 +1,7 @@
-import {Button, Stack, Text} from '@sanity/ui'
+import {Stack, Text} from '@sanity/ui'
 import React from 'react'
 import {isPlainObject} from 'lodash'
+import {Button} from '../../../../../ui'
 import {Alert} from '../../../components/Alert'
 import {Details} from '../../../components/Details'
 import {isDev} from '../../../../environment'
diff --git a/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx b/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
index bb6aa9f8a61..5f212691f74 100644
--- a/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
@@ -1,11 +1,16 @@
 import type {Subscription} from 'rxjs'
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
-import {Button, Card, useToast} from '@sanity/ui'
+import {
+  // eslint-disable-next-line no-restricted-imports
+  Button,
+  Card,
+  useToast,
+} from '@sanity/ui'
 import {Asset} from '@sanity/types'
+import {LoadingBlock} from '../../../../../ui/loadingBlock'
 import {useClient} from '../../../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../studioClient'
-import {FullscreenSpinner} from '../../../components/FullscreenSpinner'
 import {AssetMenu} from '../shared/AssetMenu'
 import {AssetUsageDialog} from '../shared/AssetUsageDialog'
 import {AssetDeleteDialog} from '../shared/AssetDeleteDialog'
@@ -213,7 +218,7 @@ export const AssetThumb = React.memo(function AssetThumb(props: AssetProps) {
       >
         <Container __unstable_checkered>
           <Image alt={originalFilename} src={imageUrl} onClick={onClick} data-id={_id} />
-          {isDeleting && <FullscreenSpinner />}
+          {isDeleting && <LoadingBlock hideText />}
         </Container>
       </Button>
       <MenuContainer>
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
index badc5bfa1c9..2f7bb529c48 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
@@ -1,8 +1,9 @@
 import React, {useMemo} from 'react'
 import {TrashIcon} from '@sanity/icons'
-import {Box, Button, Dialog, Grid, Stack} from '@sanity/ui'
+import {Box, Stack} from '@sanity/ui'
 import {Asset as AssetType} from '@sanity/types'
-import {SpinnerWithText} from '../../../components/SpinnerWithText'
+import {Dialog} from '../../../../../ui'
+import {LoadingBlock} from '../../../../../ui/loadingBlock'
 import {useReferringDocuments} from '../../../../hooks/useReferringDocuments'
 import {useTranslation} from '../../../../i18n'
 import {AssetUsageList} from './AssetUsageList'
@@ -38,31 +39,22 @@ export function AssetDeleteDialog({
 
   const {t} = useTranslation()
 
-  const footer = useMemo(
-    () => (
-      <Grid padding={2} gap={2} columns={2}>
-        <Button
-          mode="bleed"
-          text={t('asset-source.delete-dialog.action.cancel')}
-          onClick={onClose}
-        />
-        <Button
-          text={t('asset-source.delete-dialog.action.delete')}
-          tone="critical"
-          icon={TrashIcon}
-          onClick={onDelete}
-          loading={isDeleting}
-          disabled={hasResults}
-        />
-      </Grid>
-    ),
-    [hasResults, isDeleting, onClose, onDelete, t],
-  )
-
   return (
     <Dialog
       __unstable_autoFocus={isLoading}
-      footer={footer}
+      footer={{
+        cancelButton: {
+          onClick: onClose,
+          text: t('asset-source.delete-dialog.action.cancel'),
+        },
+        confirmButton: {
+          disabled: hasResults,
+          icon: TrashIcon,
+          loading: isDeleting,
+          onClick: onDelete,
+          text: t('asset-source.delete-dialog.action.delete'),
+        },
+      }}
       header={t('asset-source.delete-dialog.header', {context: assetType})}
       id="asset-dialog"
       onClickOutside={onClose}
@@ -71,7 +63,7 @@ export function AssetDeleteDialog({
     >
       {isLoading ? (
         <Box padding={4}>
-          <SpinnerWithText text={t('asset-source.delete-dialog.loading')} />
+          <LoadingBlock title={t('asset-source.delete-dialog.loading')} />
         </Box>
       ) : (
         <Stack
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
index aa60180d13e..b02bbb8ff77 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
@@ -1,8 +1,9 @@
 import React, {useMemo} from 'react'
-import {Box, Dialog, Stack} from '@sanity/ui'
+import {Box, Stack} from '@sanity/ui'
 import {Asset as AssetType} from '@sanity/types'
+import {Dialog} from '../../../../../ui'
+import {LoadingBlock} from '../../../../../ui/loadingBlock'
 import {useReferringDocuments} from '../../../../hooks/useReferringDocuments'
-import {SpinnerWithText} from '../../../components/SpinnerWithText'
 import {useTranslation} from '../../../../i18n'
 import {AssetUsageList} from './AssetUsageList'
 
@@ -37,7 +38,7 @@ export function AssetUsageDialog({asset, assetType, onClose}: UsageDialogProps)
     >
       {isLoading ? (
         <Box padding={4}>
-          <SpinnerWithText text={t('asset-source.asset-usage-dialog.loading')} />
+          <LoadingBlock title={t('asset-source.asset-usage-dialog.loading')} />
         </Box>
       ) : (
         <Stack paddingX={[2, 3, 4]} paddingY={[3, 3, 3, 4]} space={1}>
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
index cb73776d4ce..63ed18917bb 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
@@ -1,7 +1,7 @@
 import type {Subscription} from 'rxjs'
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {DownloadIcon, InfoOutlineIcon} from '@sanity/icons'
-import {Button, Card, Dialog, Flex, Text} from '@sanity/ui'
+import {Card, Flex, Text} from '@sanity/ui'
 import {Asset, AssetFromSource, AssetSourceComponentProps} from '@sanity/types'
 import {uniqueId} from 'lodash'
 import styled from 'styled-components'
@@ -10,6 +10,7 @@ import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../studioClient'
 import {Translate, useTranslation} from '../../../../i18n'
 import {FileListView} from '../file/FileListView'
 import {ImageListView} from '../image/ImageListView'
+import {Button, Dialog} from '../../../../../ui'
 
 const PER_PAGE = 200
 const ASSET_TYPE_IMAGE = 'sanity.imageAsset'
diff --git a/packages/sanity/src/core/hooks/index.ts b/packages/sanity/src/core/hooks/index.ts
index 19f61d28234..fca4f3b548c 100644
--- a/packages/sanity/src/core/hooks/index.ts
+++ b/packages/sanity/src/core/hooks/index.ts
@@ -4,6 +4,7 @@ export * from './useDataset'
 export * from './useDateTimeFormat'
 export * from './useDocumentOperation'
 export * from './useDocumentOperationEvent'
+export * from './useDocumentStatusTimeAgo'
 export * from './useEditState'
 export * from './useFeatureEnabled'
 export * from './useFormattedDuration'
diff --git a/packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts b/packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts
new file mode 100644
index 00000000000..8efbea1dfb7
--- /dev/null
+++ b/packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts
@@ -0,0 +1,45 @@
+import {PreviewValue, SanityDocument} from '@sanity/types'
+import {useTimeAgo} from './useTimeAgo'
+
+/**
+ * React hook which returns a human readable string of the provided document's status.
+ *
+ * @internal
+ * @hidden
+ */
+export function useDocumentStatusTimeAgo({
+  draft,
+  hidePublishedDate,
+  published,
+}: {
+  draft?: PreviewValue | Partial<SanityDocument> | null
+  hidePublishedDate?: boolean
+  published?: PreviewValue | Partial<SanityDocument> | null
+}): string | undefined {
+  const draftUpdatedAt = draft && '_updatedAt' in draft ? draft._updatedAt : ''
+  const publishedUpdatedAt = published && '_updatedAt' in published ? published._updatedAt : ''
+
+  const updatedDateTimeAgo = useTimeAgo(draftUpdatedAt || '', {minimal: true, agoSuffix: true})
+  const publishedTimeAgo = useTimeAgo(publishedUpdatedAt || '', {minimal: true, agoSuffix: true})
+
+  let label
+
+  // Published with no changes
+  if (!draftUpdatedAt && publishedTimeAgo) {
+    label = `Published${hidePublishedDate ? '' : ` ${publishedTimeAgo}`}`
+  }
+  // Draft, but no published document
+  if (draftUpdatedAt && !publishedTimeAgo) {
+    label = `Not published`
+  }
+  // Published with draft changes
+  if (draftUpdatedAt && publishedTimeAgo) {
+    label = `Published${hidePublishedDate ? '' : ` ${publishedTimeAgo}`}`
+  }
+  // Append draft last updated date
+  if (label && updatedDateTimeAgo) {
+    label += ` (Updated ${updatedDateTimeAgo})`
+  }
+
+  return label
+}
diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index 3431baad49f..5c87c3db489 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -1573,7 +1573,6 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'user-menu.locale-title': 'Language',
   /** Label for tooltip to show which provider the currently logged in user is using */
   'user-menu.login-provider': 'Signed in with {{providerTitle}}',
-
   /**
    * Label for action to add a workspace (currently a developer-oriented action, as this will
    * lead to the documentation on workspace configuration)
diff --git a/packages/sanity/src/core/i18n/components/LocaleProvider.tsx b/packages/sanity/src/core/i18n/components/LocaleProvider.tsx
index 42a8df662b4..544fbac17f9 100644
--- a/packages/sanity/src/core/i18n/components/LocaleProvider.tsx
+++ b/packages/sanity/src/core/i18n/components/LocaleProvider.tsx
@@ -1,8 +1,8 @@
 import {I18nextProvider} from 'react-i18next'
 import React, {PropsWithChildren, Suspense, useCallback, useMemo, useSyncExternalStore} from 'react'
 import type {i18n} from 'i18next'
+import {LoadingBlock} from '../../../ui/loadingBlock'
 import {useSource} from '../../studio'
-import {LoadingScreen} from '../../studio/screens'
 import {storePreferredLocale} from '../localeStore'
 import {LocaleContext, type LocaleContextValue} from '../LocaleContext'
 import type {Locale} from '../types'
@@ -74,7 +74,7 @@ export function LocaleProviderBase({
   )
 
   return (
-    <Suspense fallback={<LoadingScreen />}>
+    <Suspense fallback={<LoadingBlock />}>
       <I18nextProvider i18n={i18next}>
         {/* Use locale as key to force re-render, updating non-reactive parts */}
         <LocaleContext.Provider value={context} key={currentLocale.id}>
diff --git a/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx b/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
index 06b69b53bed..7a22fbf322b 100644
--- a/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
+++ b/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
@@ -1,9 +1,10 @@
-import {AvatarStack, Box, Card, Text, Tooltip, TooltipProps} from '@sanity/ui'
+import {AvatarStack, Box, Card, Text} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import styled, {css, useTheme} from 'styled-components'
 import {usePreviewCard, UserAvatar} from '../components'
 import {DocumentPresence} from '../store'
 import {isNonNullable} from '../util'
+import {Tooltip, TooltipProps} from '../../ui'
 
 /** @internal */
 export interface DocumentPreviewPresenceProps {
@@ -24,10 +25,6 @@ const AvatarStackCard = styled(Card)<{$selected?: boolean}>(({theme, $selected})
   `
 })
 
-const TooltipContentBox = styled(Box)`
-  max-width: 150px;
-`
-
 const getTooltipText = (presence: Omit<DocumentPresence, 'path'>[]) => {
   if (presence.length === 1) {
     return `${presence[0].user.displayName} is editing this document`
@@ -57,15 +54,7 @@ export function DocumentPreviewPresence(props: DocumentPreviewPresenceProps) {
     [presence],
   )
 
-  const tooltipContent = useMemo(() => {
-    return (
-      <TooltipContentBox padding={2}>
-        <Text align="center" size={1}>
-          {getTooltipText(uniqueUsers)}
-        </Text>
-      </TooltipContentBox>
-    )
-  }, [uniqueUsers])
+  const tooltipContent = useMemo(() => getTooltipText(uniqueUsers), [uniqueUsers])
 
   return (
     <Tooltip content={tooltipContent} {...PRESENCE_MENU_POPOVER_PROPS}>
diff --git a/packages/sanity/src/core/presence/FieldPresence.styled.tsx b/packages/sanity/src/core/presence/FieldPresence.styled.tsx
index 776ea5dfd3a..4bdc1831091 100644
--- a/packages/sanity/src/core/presence/FieldPresence.styled.tsx
+++ b/packages/sanity/src/core/presence/FieldPresence.styled.tsx
@@ -1,5 +1,6 @@
 import styled from 'styled-components'
 import {Flex} from '@sanity/ui'
+import {AVATAR_SIZE} from './constants'
 
 export const FlexWrapper = styled(Flex)`
   & > div:first-child {
@@ -9,7 +10,7 @@ export const FlexWrapper = styled(Flex)`
 `
 
 export const InnerBox = styled(Flex)`
-  height: 23px;
+  height: ${AVATAR_SIZE}px;
   min-width: 23px;
   vertical-align: top;
 `
diff --git a/packages/sanity/src/core/presence/PresenceTooltip.tsx b/packages/sanity/src/core/presence/PresenceTooltip.tsx
index 7e1045bc08c..e7359f8a15d 100644
--- a/packages/sanity/src/core/presence/PresenceTooltip.tsx
+++ b/packages/sanity/src/core/presence/PresenceTooltip.tsx
@@ -1,5 +1,6 @@
 import React, {useMemo} from 'react'
-import {Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import {Flex, Stack, Text} from '@sanity/ui'
+import {TooltipWithNodes} from '../../ui'
 import {UserAvatar} from '../components/userAvatar'
 import {FormNodePresence} from './types'
 
@@ -19,9 +20,9 @@ export function PresenceTooltip(props: PresenceTooltipProps) {
 
   const content = useMemo(
     () => (
-      <Stack padding={1} sizing="border">
+      <Stack sizing="border">
         {items.map((item) => (
-          <Flex align="center" gap={2} padding={1} key={item.user.id}>
+          <Flex align="center" gap={2} key={item.user.id}>
             <div>
               <UserAvatar user={item.user} status="online" />
             </div>
@@ -35,8 +36,8 @@ export function PresenceTooltip(props: PresenceTooltipProps) {
   )
 
   return (
-    <Tooltip content={content} placement="top" portal="documentScrollElement">
+    <TooltipWithNodes content={content} placement="top" portal="documentScrollElement">
       {children}
-    </Tooltip>
+    </TooltipWithNodes>
   )
 }
diff --git a/packages/sanity/src/core/presence/constants.ts b/packages/sanity/src/core/presence/constants.ts
index 4442ee569bf..c60d107e01d 100644
--- a/packages/sanity/src/core/presence/constants.ts
+++ b/packages/sanity/src/core/presence/constants.ts
@@ -10,7 +10,7 @@ export const DEFAULT_MAX_AVATARS_FIELDS = 3
 export const AVATAR_DISTANCE = -4
 
 // height/width of the avatars in pixels
-export const AVATAR_SIZE = 23
+export const AVATAR_SIZE = 19
 
 export const AVATAR_ARROW_HEIGHT = 4
 
diff --git a/packages/sanity/src/core/preview/__workshop__/SanityDefaultPreviewStory.tsx b/packages/sanity/src/core/preview/__workshop__/SanityDefaultPreviewStory.tsx
new file mode 100644
index 00000000000..3d78a09054c
--- /dev/null
+++ b/packages/sanity/src/core/preview/__workshop__/SanityDefaultPreviewStory.tsx
@@ -0,0 +1,15 @@
+import {Box, Card, Container} from '@sanity/ui'
+import React from 'react'
+import {SanityDefaultPreview} from '../components/SanityDefaultPreview'
+
+export default function SanityDefaultPreviewStory() {
+  return (
+    <Box padding={4}>
+      <Container width={1}>
+        <Card border>
+          <SanityDefaultPreview title="Hello" />
+        </Card>
+      </Container>
+    </Box>
+  )
+}
diff --git a/packages/sanity/src/core/preview/__workshop__/index.ts b/packages/sanity/src/core/preview/__workshop__/index.ts
index 93cc55df5a6..08ade6154d3 100644
--- a/packages/sanity/src/core/preview/__workshop__/index.ts
+++ b/packages/sanity/src/core/preview/__workshop__/index.ts
@@ -10,5 +10,10 @@ export default defineScope({
       title: 'SanityPreview',
       component: lazy(() => import('./SanityPreviewStory')),
     },
+    {
+      name: 'sanity-default-preview',
+      title: 'SanityDefaultPreview',
+      component: lazy(() => import('./SanityDefaultPreviewStory')),
+    },
   ],
 })
diff --git a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
index 23e564e01cf..423497f6dd7 100644
--- a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
+++ b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
@@ -13,6 +13,7 @@ import React, {
 import {isValidElementType} from 'react-is'
 import {SanityImageSource} from '@sanity/image-url/lib/types/types'
 import {isImageSource} from '@sanity/asset-utils'
+import {Tooltip} from '../../../ui'
 import {PreviewProps} from '../../components/previews'
 import {useClient} from '../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../studioClient'
@@ -27,6 +28,7 @@ function FallbackIcon() {
 export interface SanityDefaultPreviewProps extends Omit<PreviewProps, 'renderDefault'> {
   error?: Error | null
   icon?: ElementType | false
+  tooltipLabel?: string
 }
 
 /**
@@ -34,7 +36,7 @@ export interface SanityDefaultPreviewProps extends Omit<PreviewProps, 'renderDef
  * @internal
  * */
 export function SanityDefaultPreview(props: SanityDefaultPreviewProps): ReactElement {
-  const {icon, layout, media: mediaProp, imageUrl, title, ...restProps} = props
+  const {icon, layout, media: mediaProp, imageUrl, title, tooltipLabel, ...restProps} = props
 
   const client = useClient(DEFAULT_STUDIO_CLIENT_OPTIONS)
   const imageBuilder = useMemo(() => imageUrlBuilder(client), [client])
@@ -118,8 +120,24 @@ export function SanityDefaultPreview(props: SanityDefaultPreviewProps): ReactEle
 
   const layoutComponent = _previewComponents[layout || 'default']
 
-  return createElement(
+  const children = createElement(
     layoutComponent as ComponentType<Omit<PreviewProps, 'renderDefault'>>,
     previewProps,
   )
+
+  if (tooltipLabel) {
+    return (
+      <Tooltip
+        content={tooltipLabel}
+        disabled={!tooltipLabel}
+        fallbackPlacements={['top-end']}
+        placement="bottom-end"
+      >
+        {/* Currently tooltips won't trigger without a wrapping element */}
+        <div>{children}</div>
+      </Tooltip>
+    )
+  }
+
+  return children
 }
diff --git a/packages/sanity/src/core/preview/components/_previewComponents.ts b/packages/sanity/src/core/preview/components/_previewComponents.ts
index 1e4a249cb80..ec878b3f305 100644
--- a/packages/sanity/src/core/preview/components/_previewComponents.ts
+++ b/packages/sanity/src/core/preview/components/_previewComponents.ts
@@ -1,7 +1,7 @@
-import {ComponentType} from 'react'
 import {
   BlockImagePreview,
   BlockPreview,
+  CompactPreview,
   DefaultPreview,
   DetailPreview,
   InlinePreview,
@@ -9,10 +9,11 @@ import {
 } from '../../components'
 
 export const _previewComponents = {
+  block: BlockPreview,
+  blockImage: BlockImagePreview,
+  compact: CompactPreview,
   default: DefaultPreview,
-  media: MediaPreview,
   detail: DetailPreview,
   inline: InlinePreview,
-  block: BlockPreview,
-  blockImage: BlockImagePreview,
+  media: MediaPreview,
 } as const
diff --git a/packages/sanity/src/core/schema/__workshop__/ReferenceSchemaStory.tsx b/packages/sanity/src/core/schema/__workshop__/ReferenceSchemaStory.tsx
index d3ca23c0e71..d04ad5ce9a2 100644
--- a/packages/sanity/src/core/schema/__workshop__/ReferenceSchemaStory.tsx
+++ b/packages/sanity/src/core/schema/__workshop__/ReferenceSchemaStory.tsx
@@ -1,5 +1,5 @@
 import {SchemaType} from '@sanity/types'
-import {Box, Card, Code, Flex, Label} from '@sanity/ui'
+import {Box, Card, Code, Flex, Text} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import {createSchema} from '../createSchema'
 
@@ -35,7 +35,9 @@ export default function ReferenceSchemaStory() {
     <Card height="fill">
       <Flex height="fill">
         <Card flex={1} overflow="auto" padding={4}>
-          <Label size={1}>Schema definitions</Label>
+          <Text muted size={1} weight="medium">
+            Schema definitions
+          </Text>
 
           <Box paddingTop={4} />
 
@@ -44,7 +46,9 @@ export default function ReferenceSchemaStory() {
           </Code>
         </Card>
         <Card borderLeft flex={1} overflow="auto" padding={4}>
-          <Label size={1}>Schema types</Label>
+          <Text muted size={1} weight="medium">
+            Schema types
+          </Text>
 
           <Box paddingTop={4} />
 
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/CurrentUserStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/CurrentUserStory.tsx
index f83e750cffe..04ed73226c1 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/CurrentUserStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/CurrentUserStory.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import {Box, Button, Code, Text} from '@sanity/ui'
+import {Box, Code, Text} from '@sanity/ui'
+import {Button} from '../../../../ui'
 import {useSource} from '../../../studio'
 
 export default function CurrentUserStory() {
@@ -7,7 +8,7 @@ export default function CurrentUserStory() {
 
   return (
     <Box padding={4}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         <code>{`userStore.me`}</code>
       </Text>
 
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPairStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPairStory.tsx
index cd5af242552..cea1a148dc4 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPairStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPairStory.tsx
@@ -1,5 +1,6 @@
-import {Box, Button, Code, Text} from '@sanity/ui'
+import {Box, Code, Text} from '@sanity/ui'
 import React, {useEffect, useState} from 'react'
+import {Button} from '../../../../ui'
 import {useDocumentStore} from '../datastores'
 import {RemoteSnapshotVersionEvent} from '../document/document-pair/checkoutPair'
 
@@ -27,7 +28,7 @@ export default function DocumentPairStory() {
 
   return (
     <Box padding={4}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         <code>{`documentStore.checkoutPair({draftId: string, publishedId: string})`}</code>
       </Text>
 
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPermissionStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPermissionStory.tsx
index 5026f734dcf..2f49e7a5422 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPermissionStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPermissionStory.tsx
@@ -18,7 +18,7 @@ export default function DocumentPermissionStory() {
 
   return (
     <Box padding={4}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         <code>{`grantsStore.checkDocumentPermission(permissionName: DocumentValuePermission, document: SanityDocument)`}</code>
       </Text>
 
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/HistoryStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/HistoryStory.tsx
index 546cb93524f..015a73ea274 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/HistoryStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/HistoryStory.tsx
@@ -21,7 +21,7 @@ export default function HistoryStory() {
 
   return (
     <Box padding={4}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         <code>{`historyStore.getHistory`}</code>
       </Text>
 
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/HistoryTimelineStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/HistoryTimelineStory.tsx
index 56767f3ba85..be1dc22ec8b 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/HistoryTimelineStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/HistoryTimelineStory.tsx
@@ -1,9 +1,10 @@
 import {RestoreIcon} from '@sanity/icons'
 import {SanityDocument} from '@sanity/types'
-import {Box, Button, Card, Code, Flex, Inline, Stack, Text} from '@sanity/ui'
+import {Box, Card, Code, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {format} from 'date-fns'
 import {omit} from 'lodash'
 import React, {useCallback, useMemo, useState} from 'react'
+import {Button} from '../../../../ui'
 import {ChangeFieldWrapper} from '../../../changeIndicators'
 import {
   ChangeList,
@@ -130,7 +131,7 @@ export default function HistoryTimelineStory() {
           <Flex gap={1}>
             <Stack flex={1} space={1}>
               <Box padding={3}>
-                <Text size={1} weight="semibold">
+                <Text size={1} weight="medium">
                   Revision
                 </Text>
               </Box>
@@ -156,7 +157,7 @@ export default function HistoryTimelineStory() {
             {changesOpen && (
               <Stack flex={1} space={1}>
                 <Box padding={3}>
-                  <Text size={1} weight="semibold">
+                  <Text size={1} weight="medium">
                     Changes since
                   </Text>
                 </Box>
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/PresenceStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/PresenceStory.tsx
index 5783a6a5389..285f5b3bf1b 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/PresenceStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/PresenceStory.tsx
@@ -15,7 +15,7 @@ export default function PresenceStory() {
 
   return (
     <Box padding={4}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         <code>{`presenceStore.globalPresence$`}</code>
       </Text>
 
diff --git a/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx b/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx
index 45d1e34ce91..4e21846c8a2 100644
--- a/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx
+++ b/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx
@@ -1,10 +1,12 @@
 /* eslint-disable i18next/no-literal-string */
 import type {AuthProvider, AuthProviderResponse, SanityClient} from '@sanity/client'
-import {Button, Flex, Heading, Spinner, Stack, Text} from '@sanity/ui'
+import {Heading, Stack} from '@sanity/ui'
 import React, {useEffect, useState} from 'react'
 import type {Observable} from 'rxjs'
 import type {AuthConfig} from '../../../config'
 import {createHookFromObservableFactory} from '../../../util'
+import {Button} from '../../../../ui'
+import {LoadingBlock} from '../../../../ui/loadingBlock'
 import {CustomLogo, providerLogos} from './providerLogos'
 import type {LoginComponentProps} from './types'
 
@@ -130,19 +132,7 @@ export function createLoginComponent({
     }, [redirectUrl])
 
     if (loading) {
-      return (
-        <Flex
-          align="center"
-          direction="column"
-          gap={4}
-          justify="center"
-          padding={6}
-          sizing="border"
-        >
-          <Text muted>Loading…</Text>
-          <Spinner muted />
-        </Flex>
-      )
+      return <LoadingBlock />
     }
 
     return (
@@ -165,6 +155,7 @@ export function createLoginComponent({
                 basePath,
               })}
               mode="ghost"
+              size="large"
               text={provider.title}
             />
           ))}
diff --git a/packages/sanity/src/core/studio/AuthBoundary.tsx b/packages/sanity/src/core/studio/AuthBoundary.tsx
index 7b138c1e740..12fc40525f8 100644
--- a/packages/sanity/src/core/studio/AuthBoundary.tsx
+++ b/packages/sanity/src/core/studio/AuthBoundary.tsx
@@ -1,5 +1,6 @@
 import React, {useEffect, useState} from 'react'
-import {LoadingScreen, AuthenticateScreen, NotAuthenticatedScreen} from './screens'
+import {LoadingBlock} from '../../ui/loadingBlock'
+import {AuthenticateScreen, NotAuthenticatedScreen} from './screens'
 import {useActiveWorkspace} from './activeWorkspaceMatcher'
 
 interface AuthBoundaryProps {
@@ -12,7 +13,7 @@ interface AuthBoundaryProps {
 export function AuthBoundary({
   children,
   AuthenticateComponent = AuthenticateScreen,
-  LoadingComponent = LoadingScreen,
+  LoadingComponent = LoadingBlock,
   NotAuthenticatedComponent = NotAuthenticatedScreen,
 }: AuthBoundaryProps) {
   const [error, handleError] = useState<unknown>(null)
diff --git a/packages/sanity/src/core/studio/GlobalStyle.tsx b/packages/sanity/src/core/studio/GlobalStyle.tsx
index 6bbc3a776aa..ef5a5616234 100644
--- a/packages/sanity/src/core/studio/GlobalStyle.tsx
+++ b/packages/sanity/src/core/studio/GlobalStyle.tsx
@@ -1,15 +1,46 @@
-import {createGlobalStyle} from 'styled-components'
+import {createGlobalStyle, css} from 'styled-components'
+
+const SCROLLBAR_SIZE = 14 // px
+const SCROLLBAR_BORDER_SIZE = 4 // px
 
 export const GlobalStyle = createGlobalStyle(({theme}) => {
   const {color, fonts} = theme.sanity
 
-  return {
-    html: {
-      backgroundColor: color.base.bg,
-    },
+  return css`
+    ::-webkit-scrollbar {
+      width: ${SCROLLBAR_SIZE}px;
+      height: ${SCROLLBAR_SIZE}px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-clip: content-box;
+      background-color: ${color.muted.transparent.disabled.fg};
+      border-radius: ${SCROLLBAR_SIZE}px;
+      border: ${SCROLLBAR_BORDER_SIZE}px solid transparent;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: ${color.muted.transparent.enabled.fg};
+    }
+
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    html {
+      background-color: ${color.base.bg};
+    }
+
+    #sanity {
+      font-family: ${fonts.text.family};
+    }
+
+    b {
+      font-weight: ${fonts.text.weights.medium};
+    }
 
-    '#sanity': {
-      fontFamily: fonts.text.family,
-    },
-  }
+    strong {
+      font-weight: ${fonts.text.weights.medium};
+    }
+  `
 })
diff --git a/packages/sanity/src/core/studio/Studio.test.tsx b/packages/sanity/src/core/studio/Studio.test.tsx
index d1710a6817b..29184d34a7a 100644
--- a/packages/sanity/src/core/studio/Studio.test.tsx
+++ b/packages/sanity/src/core/studio/Studio.test.tsx
@@ -43,8 +43,9 @@ describe('Studio', () => {
     const sheet = new ServerStyleSheet()
     try {
       const html = renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))
+
       expect(html).toMatchInlineSnapshot(
-        `"<div data-as=\\"div\\" data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-pGaPU iDvIQX sc-hBEZvw cXzyYZ sc-pGaPU dcGziJ sc-crrtmM fLXKCO\\"><div data-ui=\\"Text\\" class=\\"sc-bdfCDU eQziRi\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-bdfCDU eQziRi sc-dQpIV gAtGZm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-fHuKJW itgnHu\\"><div data-ui=\\"Spinner\\" class=\\"sc-bdfCDU hfXQlG sc-crrtmM buOrjb sc-dtTHgf iZjVSi\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div><div data-ui=\\"Text\\" class=\\"sc-bdfCDU eqNesd sc-dkIYMQ kgdgeT\\"><span>Loading</span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -61,7 +62,7 @@ describe('Studio', () => {
     try {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       expect(html).toMatchInlineSnapshot(
-        `"<div data-as=\\"div\\" data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-pGaPU iDvIQX sc-hBEZvw cXzyYZ sc-pGaPU dcGziJ sc-crrtmM fLXKCO\\"><div data-ui=\\"Text\\" class=\\"sc-bdfCDU eQziRi\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-bdfCDU eQziRi sc-dQpIV gAtGZm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-fHuKJW itgnHu\\"><div data-ui=\\"Spinner\\" class=\\"sc-bdfCDU hfXQlG sc-crrtmM buOrjb sc-dtTHgf iZjVSi\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div><div data-ui=\\"Text\\" class=\\"sc-bdfCDU eqNesd sc-dkIYMQ kgdgeT\\"><span>Loading</span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -81,7 +82,7 @@ describe('Studio', () => {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       node.innerHTML = html
       expect(html).toMatchInlineSnapshot(
-        `"<div data-as=\\"div\\" data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-pGaPU iDvIQX sc-hBEZvw cXzyYZ sc-pGaPU dcGziJ sc-crrtmM fLXKCO\\"><div data-ui=\\"Text\\" class=\\"sc-bdfCDU eQziRi\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-bdfCDU eQziRi sc-dQpIV gAtGZm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-fHuKJW itgnHu\\"><div data-ui=\\"Spinner\\" class=\\"sc-bdfCDU hfXQlG sc-crrtmM buOrjb sc-dtTHgf iZjVSi\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div><div data-ui=\\"Text\\" class=\\"sc-bdfCDU eqNesd sc-dkIYMQ kgdgeT\\"><span>Loading</span></div></div>"`,
       )
       document.head.innerHTML += sheet.getStyleTags()
 
diff --git a/packages/sanity/src/core/studio/StudioErrorBoundary.tsx b/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
index a0d63e191a9..a768f05a6e5 100644
--- a/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
+++ b/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable i18next/no-literal-string */
 /* eslint-disable @sanity/i18n/no-attribute-string-literals */
 import React, {useCallback, useState} from 'react'
-import {Button, Card, Code, Container, ErrorBoundary, Heading, Stack} from '@sanity/ui'
+import {Card, Code, Container, ErrorBoundary, Heading, Stack} from '@sanity/ui'
 import {useHotModuleReload} from 'use-hot-module-reload'
+import {Button} from '../../ui'
 import {SchemaError} from '../config'
 import {isRecord} from '../util'
 import {CorsOriginError} from '../store'
diff --git a/packages/sanity/src/core/studio/StudioLayout.tsx b/packages/sanity/src/core/studio/StudioLayout.tsx
index a233720e122..09b36f8d73c 100644
--- a/packages/sanity/src/core/studio/StudioLayout.tsx
+++ b/packages/sanity/src/core/studio/StudioLayout.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable i18next/no-literal-string, @sanity/i18n/no-attribute-template-literals */
-import {Card, Flex, Spinner, Text} from '@sanity/ui'
+import {Card, Flex} from '@sanity/ui'
 import {startCase} from 'lodash'
 import React, {
   createContext,
@@ -11,6 +11,7 @@ import React, {
   useState,
 } from 'react'
 import styled from 'styled-components'
+import {LoadingBlock} from '../../ui/loadingBlock'
 import {NoToolsScreen} from './screens/NoToolsScreen'
 import {RedirectingScreen} from './screens/RedirectingScreen'
 import {ToolNotFoundScreen} from './screens/ToolNotFoundScreen'
@@ -33,15 +34,19 @@ const SearchFullscreenPortalCard = styled(Card)`
 /** @internal */
 export interface NavbarContextValue {
   onSearchFullscreenOpenChange: (open: boolean) => void
+  onSearchOpenChange: (open: boolean) => void
   searchFullscreenOpen: boolean
   searchFullscreenPortalEl: HTMLElement | null
+  searchOpen: boolean
 }
 
 /** @internal */
 export const NavbarContext = createContext<NavbarContextValue>({
   onSearchFullscreenOpenChange: () => '',
+  onSearchOpenChange: () => '',
   searchFullscreenOpen: false,
   searchFullscreenPortalEl: null,
+  searchOpen: false,
 })
 
 /**
@@ -94,6 +99,7 @@ export function StudioLayoutComponent() {
   const [searchFullscreenPortalEl, setSearchFullscreenPortalEl] = useState<HTMLDivElement | null>(
     null,
   )
+  const [searchOpen, setSearchOpen] = useState<boolean>(false)
 
   const documentTitle = useMemo(() => {
     const mainTitle = title || startCase(name)
@@ -117,13 +123,25 @@ export function StudioLayoutComponent() {
     setSearchFullscreenOpen(open)
   }, [])
 
+  const handleSearchOpenChange = useCallback((open: boolean) => {
+    setSearchOpen(open)
+  }, [])
+
   const navbarContextValue = useMemo(
     () => ({
       searchFullscreenOpen,
       searchFullscreenPortalEl,
+      searchOpen,
       onSearchFullscreenOpenChange: handleSearchFullscreenOpenChange,
+      onSearchOpenChange: handleSearchOpenChange,
     }),
-    [searchFullscreenOpen, searchFullscreenPortalEl, handleSearchFullscreenOpenChange],
+    [
+      searchFullscreenOpen,
+      searchFullscreenPortalEl,
+      searchOpen,
+      handleSearchFullscreenOpenChange,
+      handleSearchOpenChange,
+    ],
   )
 
   const Navbar = useNavbarComponent()
@@ -173,7 +191,7 @@ export function StudioLayoutComponent() {
                 activeTool.router?.__unsafe_disableScopedSearchParams
               }
             >
-              <Suspense fallback={<LoadingTool />}>
+              <Suspense fallback={<LoadingBlock />}>
                 {createElement(activeTool.component, {tool: activeTool})}
               </Suspense>
             </RouteScope>
@@ -183,13 +201,3 @@ export function StudioLayoutComponent() {
     </Flex>
   )
 }
-
-// @TODO re-use `LoadingComponent`, which is `LoadingScreen` by default, to reduce "popping" during initial load
-function LoadingTool() {
-  return (
-    <Flex justify="center" align="center" height="fill" direction="column" gap={4}>
-      <Text muted>Loading…</Text>
-      <Spinner muted />
-    </Flex>
-  )
-}
diff --git a/packages/sanity/src/core/studio/StudioProvider.tsx b/packages/sanity/src/core/studio/StudioProvider.tsx
index 7d181c2a089..9fa94b94063 100644
--- a/packages/sanity/src/core/studio/StudioProvider.tsx
+++ b/packages/sanity/src/core/studio/StudioProvider.tsx
@@ -6,6 +6,7 @@ import javascript from 'refractor/lang/javascript'
 import json from 'refractor/lang/json'
 import jsx from 'refractor/lang/jsx'
 import typescript from 'refractor/lang/typescript'
+import {LoadingBlock} from '../../ui/loadingBlock'
 import {UserColorManagerProvider} from '../user-color'
 import {ErrorLogger} from '../error/ErrorLogger'
 import {ResourceCacheProvider} from '../store'
@@ -19,7 +20,6 @@ import {ColorSchemeProvider} from './colorScheme'
 import {Z_OFFSET} from './constants'
 import {
   ConfigErrorsScreen,
-  LoadingScreen,
   AuthenticateScreen,
   NotFoundScreen,
   NotAuthenticatedScreen,
@@ -53,7 +53,7 @@ export function StudioProvider({
   unstable_noAuthBoundary: noAuthBoundary,
 }: StudioProviderProps) {
   const _children = (
-    <WorkspaceLoader LoadingComponent={LoadingScreen} ConfigErrorsComponent={ConfigErrorsScreen}>
+    <WorkspaceLoader LoadingComponent={LoadingBlock} ConfigErrorsComponent={ConfigErrorsScreen}>
       <LocaleProvider>
         <ResourceCacheProvider>{children}</ResourceCacheProvider>
       </LocaleProvider>
@@ -69,7 +69,7 @@ export function StudioProvider({
             <ActiveWorkspaceMatcher
               unstable_history={history}
               NotFoundComponent={NotFoundScreen}
-              LoadingComponent={LoadingScreen}
+              LoadingComponent={LoadingBlock}
             >
               <StudioThemeProvider>
                 <UserColorManagerProvider>
@@ -77,7 +77,7 @@ export function StudioProvider({
                     _children
                   ) : (
                     <AuthBoundary
-                      LoadingComponent={LoadingScreen}
+                      LoadingComponent={LoadingBlock}
                       AuthenticateComponent={AuthenticateScreen}
                       NotAuthenticatedComponent={NotAuthenticatedScreen}
                     >
diff --git a/packages/sanity/src/core/studio/components/navbar/LogoButton.tsx b/packages/sanity/src/core/studio/components/navbar/LogoButton.tsx
deleted file mode 100644
index 368a505ae5c..00000000000
--- a/packages/sanity/src/core/studio/components/navbar/LogoButton.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import {Button} from '@sanity/ui'
-
-interface LogoButtonProps {
-  onClick: React.MouseEventHandler<HTMLElement>
-  children: React.ReactNode
-  href: string
-  title: string
-}
-
-export function LogoButton(props: LogoButtonProps) {
-  const {title, children, href, onClick} = props
-
-  return (
-    <Button
-      aria-label={title}
-      as="a"
-      data-testid="logo"
-      href={href}
-      mode="bleed"
-      onClick={onClick}
-      padding={0}
-    >
-      {children}
-    </Button>
-  )
-}
diff --git a/packages/sanity/src/core/studio/components/navbar/NavDrawer.tsx b/packages/sanity/src/core/studio/components/navbar/NavDrawer.tsx
index 89ab515e367..7e4ef4d53ce 100644
--- a/packages/sanity/src/core/studio/components/navbar/NavDrawer.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/NavDrawer.tsx
@@ -1,9 +1,10 @@
-import {Layer, Card, Flex, Text, Box, Button, Stack, Label} from '@sanity/ui'
+import {Layer, Card, Flex, Text, Box, Stack} from '@sanity/ui'
 import {CheckmarkIcon, CloseIcon, CogIcon, LeaveIcon, UsersIcon} from '@sanity/icons'
 import React, {memo, useCallback} from 'react'
 import styled from 'styled-components'
 import TrapFocus from 'react-focus-lock'
 import {AnimatePresence, motion, Transition, Variants} from 'framer-motion'
+import {Button} from '../../../../ui'
 import {useWorkspace} from '../../workspace'
 import {Tool} from '../../../config'
 import {useToolMenuComponent} from '../../studio-components-hooks'
@@ -73,13 +74,7 @@ function AppearanceMenu({setScheme}: {setScheme: (nextScheme: StudioThemeColorSc
   return (
     <>
       <Card borderTop flex="none" padding={3} overflow="auto">
-        <Box padding={2}>
-          <Label size={1} muted>
-            {t('user-menu.appearance-title')}
-          </Label>
-        </Box>
-
-        <Stack as="ul" marginTop={1} space={1}>
+        <Stack as="ul" space={1}>
           {options.map(({icon, label, name, onSelect, selected, title}) => (
             <Stack as="li" key={name}>
               <Button
@@ -166,7 +161,7 @@ export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
                           marginLeft={2}
                           title={currentUser?.name || currentUser?.email}
                         >
-                          <Text textOverflow="ellipsis">
+                          <Text size={1} textOverflow="ellipsis" weight="medium">
                             {currentUser?.name || currentUser?.email}
                           </Text>
                         </Box>
@@ -178,7 +173,7 @@ export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
                         icon={CloseIcon}
                         mode="bleed"
                         onClick={onClose}
-                        title={t('user-menu.close-menu')}
+                        tooltipProps={{content: t('user-menu.close-menu')}}
                       />
                     </Box>
                   </Flex>
diff --git a/packages/sanity/src/core/studio/components/navbar/SanityLogo.tsx b/packages/sanity/src/core/studio/components/navbar/SanityLogo.tsx
new file mode 100644
index 00000000000..d6771de00b9
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/SanityLogo.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+export function SanityLogo() {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 33 33"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="100%" height="100%" fill="#EC5446" />
+      <path
+        d="M10.1637 8.5498C10.1637 11.3854 11.9461 13.0725 15.5143 13.9622L19.2955 14.8235C22.6725 15.5855 24.729 17.4783 24.729 20.5619C24.7553 21.9053 24.3107 23.2168 23.4698 24.2765C23.4698 21.1999 21.8499 19.5376 17.9425 18.538L14.2299 17.7086C11.257 17.0423 8.9623 15.4863 8.9623 12.1368C8.94666 10.8433 9.36932 9.58143 10.1637 8.5498Z"
+        fill="white"
+      />
+      <path
+        d="M21.1463 19.8069C22.7591 20.8206 23.4662 22.2384 23.4662 24.2729C22.1313 25.953 19.7861 26.8958 17.0297 26.8958C12.3899 26.8958 9.1427 24.6521 8.42111 20.7533H12.8769C13.4506 22.5432 14.9695 23.3726 16.9972 23.3726C19.4722 23.3726 21.1175 22.0753 21.1499 19.7998"
+        fill="#F8B1AA"
+      />
+      <path
+        d="M12.4801 12.7536C11.7436 12.3236 11.1394 11.7057 10.7316 10.9656C10.3238 10.2255 10.1276 9.3907 10.1638 8.54984C11.4518 6.88396 13.6923 5.8667 16.4235 5.8667C21.1499 5.8667 23.8848 8.31945 24.5595 11.7717H20.2732C19.8006 10.4107 18.6172 9.35089 16.4596 9.35089C14.1541 9.35089 12.5811 10.6694 12.4909 12.7536"
+        fill="#F8B1AA"
+      />
+    </svg>
+  )
+}
diff --git a/packages/sanity/src/core/studio/components/navbar/StudioLogo.tsx b/packages/sanity/src/core/studio/components/navbar/StudioLogo.tsx
index e9822631a1a..6299ad89f55 100644
--- a/packages/sanity/src/core/studio/components/navbar/StudioLogo.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/StudioLogo.tsx
@@ -10,7 +10,7 @@ export function StudioLogo(props: LogoProps) {
 
   return (
     <Box padding={3} data-testid="studio-logo">
-      <Text weight="bold">{title}</Text>
+      <Text weight="medium">{title}</Text>
     </Box>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
index 83e3cbf5aee..91f459ad5fc 100644
--- a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
@@ -1,40 +1,36 @@
-import {MenuIcon, SearchIcon} from '@sanity/icons'
+import {MenuIcon} from '@sanity/icons'
 import {
   BoundaryElementProvider,
-  Box,
-  Button,
   Card,
   Flex,
   Layer,
   LayerProvider,
   PortalProvider,
   useMediaIndex,
-  useRootTheme,
+  TooltipDelayGroupProvider,
+  Box,
 } from '@sanity/ui'
 import React, {useCallback, useState, useMemo, useEffect, useRef, useContext} from 'react'
-import {startCase} from 'lodash'
 import styled from 'styled-components'
 import {isDev} from '../../../environment'
 import {useWorkspace} from '../../workspace'
-import {useColorScheme} from '../../colorScheme'
-import {useWorkspaces} from '../../workspaces'
+import {Button} from '../../../../ui'
+import {TOOLTIP_DELAY_PROPS} from '../../../../ui/tooltip/constants'
 import {NavbarContext} from '../../StudioLayout'
-import {useLogoComponent, useToolMenuComponent} from '../../studio-components-hooks'
-import {StudioTheme} from '../../../theme'
-import {useTranslation} from '../../../i18n'
+import {useToolMenuComponent} from '../../studio-components-hooks'
 import {UserMenu} from './userMenu'
 import {NewDocumentButton, useNewDocumentOptions} from './new-document'
 import {PresenceMenu} from './presence'
 import {NavDrawer} from './NavDrawer'
 import {WorkspaceMenuButton} from './workspace'
 import {ConfigIssuesButton} from './configIssues/ConfigIssuesButton'
-import {LogoButton} from './LogoButton'
-import {SearchDialog, SearchField} from './search'
+import {SearchButton, SearchDialog} from './search'
 import {SearchProvider} from './search/contexts/search/SearchProvider'
 import {ResourcesButton} from './resources/ResourcesButton'
 import {FreeTrial} from './free-trial'
 import {FreeTrialProvider} from './free-trial/FreeTrialProvider'
-import {RouterState, useRouterState, useStateLink} from 'sanity/router'
+import {SearchPopover} from './search/components/SearchPopover'
+import {RouterState, useRouterState} from 'sanity/router'
 
 const RootLayer = styled(Layer)`
   min-height: auto;
@@ -50,29 +46,33 @@ const RootCard = styled(Card)`
   line-height: 0;
 `
 
-const LeftFlex = styled(Flex)`
-  width: max-content;
+// Grid container which renders our navbar in a 3-column grid.
+// Where possible, we try and ensure the center column is always centered, regardless of the
+// amount of content in both LHS and RHS columns.
+const NavGrid = styled.div`
+  display: grid;
+  grid-template-columns: minmax(max-content, 1fr) 3fr minmax(max-content, 1fr);
 `
 
 /**
  * @hidden
  * @beta */
 export function StudioNavbar() {
-  const {name, tools, ...workspace} = useWorkspace()
-  const theme = useRootTheme().theme as StudioTheme
-  const workspaces = useWorkspaces()
+  const {name, tools} = useWorkspace()
   const routerState = useRouterState()
-  const {scheme} = useColorScheme()
-  const {href: rootHref, onClick: handleRootClick} = useStateLink({state: {}})
   const mediaIndex = useMediaIndex()
   const activeToolName = typeof routerState.tool === 'string' ? routerState.tool : undefined
 
   const newDocumentOptions = useNewDocumentOptions()
 
-  const {onSearchFullscreenOpenChange, searchFullscreenOpen, searchFullscreenPortalEl} =
-    useContext(NavbarContext)
+  const {
+    onSearchFullscreenOpenChange,
+    onSearchOpenChange,
+    searchFullscreenOpen,
+    searchFullscreenPortalEl,
+    searchOpen,
+  } = useContext(NavbarContext)
 
-  const Logo = useLogoComponent()
   const ToolMenu = useToolMenuComponent()
 
   const [drawerOpen, setDrawerOpen] = useState<boolean>(false)
@@ -80,8 +80,6 @@ export function StudioNavbar() {
   const routerStateRef = useRef<RouterState>(routerState)
   const workspaceNameRef = useRef<string>(name)
 
-  const {t} = useTranslation()
-
   // Close the NavDrawer when changing tool or workspace
   useEffect(() => {
     if (routerStateRef.current.tool !== routerState.tool || name !== workspaceNameRef.current) {
@@ -97,35 +95,45 @@ export function StudioNavbar() {
 
   const shouldRender = useMemo(
     () => ({
-      brandingCenter: mediaIndex <= 1,
       resources: mediaIndex > 1,
       collapsedPresenceMenu: mediaIndex <= 1,
       loginStatus: mediaIndex > 1,
       searchFullscreen: mediaIndex <= 1,
       configIssues: mediaIndex > 1 && isDev,
-      workspaces: mediaIndex >= 3 && workspaces.length > 1,
+      newDocumentFullscreen: mediaIndex <= 1,
       tools: mediaIndex >= 3,
     }),
-    [mediaIndex, workspaces.length],
+    [mediaIndex],
   )
-  const formattedName = typeof name === 'string' && name !== 'root' ? startCase(name) : null
-  const title = workspace.title || formattedName || 'Studio'
 
   useEffect(() => {
     onSearchFullscreenOpenChange(searchFullscreenOpen)
   }, [searchFullscreenOpen, onSearchFullscreenOpenChange])
 
-  // Disable fullscreen search on media query change (if already open)
+  // On desktop: force search dialog to be hidden
+  // On mobile: force search popover to be hidden
+  // This is a bit of a micro optimisation to prevent search surfaces from remaining open
+  // when jumping between both mobile / desktop breakpoints.
   useEffect(() => {
-    if (onSearchFullscreenOpenChange && !shouldRender.searchFullscreen) {
+    if (shouldRender.searchFullscreen) {
+      onSearchOpenChange(false)
+    } else {
       onSearchFullscreenOpenChange(false)
     }
-  }, [onSearchFullscreenOpenChange, shouldRender.searchFullscreen])
+  }, [onSearchFullscreenOpenChange, onSearchOpenChange, shouldRender.searchFullscreen])
+
+  const handleOpenSearch = useCallback(() => {
+    onSearchOpenChange(true)
+  }, [onSearchOpenChange])
 
   const handleOpenSearchFullscreen = useCallback(() => {
     onSearchFullscreenOpenChange(true)
   }, [onSearchFullscreenOpenChange])
 
+  const handleCloseSearch = useCallback(() => {
+    onSearchOpenChange(false)
+  }, [onSearchOpenChange])
+
   const handleCloseSearchFullscreen = useCallback(() => {
     onSearchFullscreenOpenChange(false)
     searchOpenButtonEl?.focus()
@@ -144,112 +152,104 @@ export function StudioNavbar() {
     <FreeTrialProvider>
       <RootLayer zOffset={100} data-search-open={searchFullscreenOpen}>
         <RootCard
+          borderBottom
           data-testid="studio-navbar"
           data-ui="Navbar"
-          padding={2}
-          scheme="dark"
-          shadow={theme.__legacy || scheme === 'dark' ? 1 : undefined}
+          padding={3}
           sizing="border"
         >
-          <Flex align="center" justify="space-between">
-            <LeftFlex align="center" flex={shouldRender.brandingCenter ? undefined : 1}>
-              {!shouldRender.tools && (
-                <Box marginRight={1}>
-                  <Button
-                    mode="bleed"
-                    icon={MenuIcon}
-                    onClick={handleOpenDrawer}
-                    ref={setDrawerButtonEl}
-                  />
-                </Box>
-              )}
-
-              {!shouldRender.brandingCenter && (
-                <Box marginRight={1}>
-                  <LogoButton href={rootHref} onClick={handleRootClick} title={title}>
-                    <Logo title={title} />
-                  </LogoButton>
-                </Box>
-              )}
+          <NavGrid>
+            {/** Left flex */}
+            <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+              <Flex align="center" gap={2} justify="flex-start">
+                <Flex align="center" gap={2}>
+                  {/* Menu button */}
+                  {!shouldRender.tools && (
+                    <Button
+                      mode="bleed"
+                      icon={MenuIcon}
+                      onClick={handleOpenDrawer}
+                      ref={setDrawerButtonEl}
+                      tooltipProps={{content: 'Open drawer', placement: 'right'}}
+                    />
+                  )}
 
-              {shouldRender.workspaces && (
-                <Box marginRight={2}>
-                  <WorkspaceMenuButton collapsed />
-                </Box>
-              )}
-
-              <Box marginRight={shouldRender.brandingCenter ? undefined : 2}>
+                  {/* Workspace menu button */}
+                  <WorkspaceMenuButton />
+                </Flex>
+                {/* New document button */}
                 <NewDocumentButton
                   {...newDocumentOptions}
-                  modal={shouldRender.brandingCenter ? 'dialog' : 'popover'}
+                  modal={shouldRender.newDocumentFullscreen ? 'dialog' : 'popover'}
                 />
-              </Box>
-
-              {/* Search */}
-              <LayerProvider>
-                <SearchProvider fullscreen={shouldRender.searchFullscreen}>
-                  <BoundaryElementProvider element={document.body}>
-                    <PortalProvider element={searchFullscreenPortalEl}>
-                      {shouldRender.searchFullscreen && (
-                        <SearchDialog
-                          onClose={handleCloseSearchFullscreen}
-                          onOpen={handleOpenSearchFullscreen}
-                          open={searchFullscreenOpen}
-                        />
-                      )}
-                    </PortalProvider>
-                    {!shouldRender.searchFullscreen && <SearchField />}
-                  </BoundaryElementProvider>
-                </SearchProvider>
-              </LayerProvider>
+              </Flex>
+            </TooltipDelayGroupProvider>
 
+            {/** Center flex */}
+            <Flex align="center" justify="center">
               {shouldRender.tools && (
-                <Card flex={1} marginX={2} overflow="visible" paddingRight={1}>
-                  <ToolMenu
-                    activeToolName={activeToolName}
-                    closeSidebar={handleCloseDrawer}
-                    context="topbar"
-                    isSidebarOpen={false}
-                    tools={tools}
-                  />
-                </Card>
+                <ToolMenu
+                  activeToolName={activeToolName}
+                  closeSidebar={handleCloseDrawer}
+                  context="topbar"
+                  isSidebarOpen={false}
+                  tools={tools}
+                />
               )}
-            </LeftFlex>
+            </Flex>
 
-            {shouldRender.brandingCenter && (
-              <Box marginX={1}>
-                <LogoButton href={rootHref} onClick={handleRootClick} title={title}>
-                  <Logo title={title} />
-                </LogoButton>
-              </Box>
-            )}
+            {/** Right flex */}
+            <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+              <Flex align="center" gap={1} justify="flex-end">
+                <Flex gap={1}>
+                  {/* Search */}
+                  <LayerProvider>
+                    <SearchProvider fullscreen={shouldRender.searchFullscreen}>
+                      <BoundaryElementProvider element={document.body}>
+                        {shouldRender.searchFullscreen ? (
+                          <PortalProvider element={searchFullscreenPortalEl}>
+                            <SearchDialog
+                              onClose={handleCloseSearchFullscreen}
+                              onOpen={handleOpenSearchFullscreen}
+                              open={searchFullscreenOpen}
+                            />
+                          </PortalProvider>
+                        ) : (
+                          <SearchPopover
+                            onClose={handleCloseSearch}
+                            onOpen={handleOpenSearch}
+                            open={searchOpen}
+                          />
+                        )}
+                      </BoundaryElementProvider>
+                    </SearchProvider>
+                  </LayerProvider>
 
-            <Flex gap={2}>
-              {(shouldRender.configIssues || shouldRender.resources || shouldRender.tools) && (
-                <Card borderRight>
-                  <Flex gap={1} paddingX={2}>
-                    {shouldRender.tools && <FreeTrial type="topbar" />}
-                    {shouldRender.configIssues && <ConfigIssuesButton />}
-                    {shouldRender.resources && <ResourcesButton />}
-                  </Flex>
-                </Card>
-              )}
+                  {/* Search button (desktop) */}
+                  {!shouldRender.searchFullscreen && (
+                    <SearchButton onClick={handleOpenSearch} ref={setSearchOpenButtonEl} />
+                  )}
 
-              <Flex align="center" gap={1}>
-                <PresenceMenu collapse={shouldRender.collapsedPresenceMenu} />
-                {shouldRender.tools && <UserMenu />}
-                {shouldRender.searchFullscreen && (
-                  <Button
-                    aria-label={t('search.action-open-aria-label')}
-                    icon={SearchIcon}
-                    mode="bleed"
-                    onClick={handleOpenSearchFullscreen}
-                    ref={setSearchOpenButtonEl}
-                  />
+                  {shouldRender.tools && <FreeTrial type="topbar" />}
+                  {shouldRender.configIssues && <ConfigIssuesButton />}
+                  {shouldRender.resources && <ResourcesButton />}
+                  <PresenceMenu />
+                  {/* Search button (mobile) */}
+                  {shouldRender.searchFullscreen && (
+                    <SearchButton
+                      onClick={handleOpenSearchFullscreen}
+                      ref={setSearchOpenButtonEl}
+                    />
+                  )}
+                </Flex>
+                {shouldRender.tools && (
+                  <Box flex="none" marginLeft={1}>
+                    <UserMenu />
+                  </Box>
                 )}
               </Flex>
-            </Flex>
-          </Flex>
+            </TooltipDelayGroupProvider>
+          </NavGrid>
         </RootCard>
 
         {!shouldRender.tools && (
diff --git a/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx b/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
index a0b07655281..007d722765f 100644
--- a/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable i18next/no-literal-string,@sanity/i18n/no-attribute-string-literals */
 import React, {useCallback, useState, useId} from 'react'
-import {Dialog, Heading, Stack, Text} from '@sanity/ui'
+import {Stack, Text} from '@sanity/ui'
 import {WarningOutlineIcon} from '@sanity/icons'
+import {Dialog} from '../../../../../ui'
 import {useSchema} from '../../../../hooks'
 import {SchemaProblemGroups} from '../../../screens/schemaErrors/SchemaProblemGroups'
 import {useColorScheme} from '../../../colorScheme'
@@ -41,26 +42,17 @@ export function ConfigIssuesButton() {
     <>
       <StatusButton
         icon={WarningOutlineIcon}
-        label="Found configuration issues"
         mode="bleed"
         onClick={handleOpen}
         ref={setButtonElement}
         selected={isDialogOpen}
         tone="caution"
-        tooltip={{scheme}}
+        tooltipProps={{scheme, content: 'Found configuration issues'}}
       />
 
       {isDialogOpen && (
         <Dialog
-          header={
-            <Stack space={3}>
-              <Text weight="semibold">Configuration issues</Text>
-              <Text muted size={1}>
-                Configuration checks are only performed during development and will not be visible
-                in production builds
-              </Text>
-            </Stack>
-          }
+          header="Configuration issues"
           width={2}
           onClickOutside={handleClose}
           onClose={handleClose}
@@ -68,10 +60,16 @@ export function ConfigIssuesButton() {
           scheme={scheme}
           id={dialogId}
         >
-          <Stack space={4} padding={4}>
-            <Heading as="h2" size={1}>
-              Found {groupsWithWarnings.length} schema warnings
-            </Heading>
+          <Stack space={4}>
+            <Stack space={3}>
+              <Text as="h2" size={2} weight="medium">
+                Found {groupsWithWarnings.length} schema warnings
+              </Text>{' '}
+              <Text muted size={1}>
+                Configuration checks are only performed during development and will not be visible
+                in production builds
+              </Text>
+            </Stack>
             <SchemaProblemGroups problemGroups={groupsWithWarnings} />
           </Stack>
         </Dialog>
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts
index c07e29d8967..73ff3de7587 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts
@@ -1,5 +1,6 @@
-import {Box, Popover, Dialog, Flex, Card} from '@sanity/ui'
+import {Popover, Flex, Card} from '@sanity/ui'
 import styled, {css} from 'styled-components'
+import {Dialog} from '../../../../../ui'
 
 export const StyledPopover = styled(Popover)(() => {
   return css`
@@ -26,10 +27,6 @@ export const StyledDialog = styled(Dialog)(() => {
   `
 })
 
-export const TooltipContentBox = styled(Box)`
-  max-width: 300px;
-`
-
 export const RootFlex = styled(Flex)``
 
 export const PopoverHeaderCard = styled(Card)`
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
index 8130b228e28..70cead73317 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
@@ -1,25 +1,12 @@
 import React, {useCallback, useMemo, useState} from 'react'
-import {
-  Box,
-  Tooltip,
-  Text,
-  useClickOutside,
-  Stack,
-  TextInput,
-  ButtonProps,
-  TooltipProps,
-  TextInputProps,
-  Label,
-  Card,
-  Flex,
-  Button,
-} from '@sanity/ui'
-import {AddIcon, SearchIcon} from '@sanity/icons'
+import {Text, useClickOutside, Stack, TextInput, TextInputProps, Card, Flex} from '@sanity/ui'
+import {AddIcon, ChevronDownIcon, SearchIcon} from '@sanity/icons'
 import ReactFocusLock from 'react-focus-lock'
 import {useGetI18nText, useTranslation} from '../../../../i18n'
 import {InsufficientPermissionsMessage} from '../../../../components'
 import {useCurrentUser} from '../../../../store'
 import {useColorScheme} from '../../../colorScheme'
+import {Button, ButtonProps, TooltipWithNodes, TooltipWithNodesProps} from '../../../../../ui'
 import {NewDocumentList, NewDocumentListProps} from './NewDocumentList'
 import {ModalType, NewDocumentOption} from './types'
 import {filterOptions} from './filter'
@@ -29,7 +16,6 @@ import {
   RootFlex,
   StyledDialog,
   StyledPopover,
-  TooltipContentBox,
   PopoverListFlex,
 } from './NewDocumentButton.style'
 import {INLINE_PREVIEW_HEIGHT} from './NewDocumentListOption'
@@ -136,6 +122,7 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
   // Shared text input props for the popover and dialog
   const sharedTextInputProps: TextInputProps = useMemo(
     () => ({
+      __unstable_disableFocusRing: true,
       border: false,
       defaultValue: searchQuery,
       disabled: loading,
@@ -154,7 +141,9 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
       'data-testid': 'new-document-button',
       disabled: disabled || loading,
       icon: AddIcon,
-      mode: 'bleed',
+      // @todo: localize text
+      text: 'Create',
+      mode: 'ghost',
       onClick: handleToggleOpen,
       ref: setButtonElement,
       selected: open,
@@ -163,7 +152,7 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
   )
 
   // Tooltip content for the open button
-  const tooltipContent: TooltipProps['content'] = useMemo(() => {
+  const tooltipContent: TooltipWithNodesProps['content'] = useMemo(() => {
     if (!hasNewDocumentOptions) {
       return <Text size={1}>{t('new-document.no-document-types-label')}</Text>
     }
@@ -178,12 +167,10 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
   }, [canCreateDocument, currentUser, hasNewDocumentOptions, t])
 
   // Shared tooltip props for the popover and dialog
-  const sharedTooltipProps: TooltipProps = useMemo(
+  const sharedTooltipProps: TooltipWithNodesProps = useMemo(
     () => ({
-      content: <TooltipContentBox padding={2}>{tooltipContent}</TooltipContentBox>,
+      content: tooltipContent,
       disabled: loading || open,
-      placement: 'bottom',
-      portal: true,
       scheme: scheme,
     }),
     [loading, open, scheme, tooltipContent],
@@ -193,11 +180,11 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
   if (modal === 'dialog') {
     return (
       <>
-        <Tooltip {...sharedTooltipProps}>
+        <TooltipWithNodes {...sharedTooltipProps}>
           <div>
             <Button {...sharedOpenButtonProps} />
           </div>
-        </Tooltip>
+        </TooltipWithNodes>
 
         {open && (
           <StyledDialog
@@ -247,20 +234,8 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
         >
           <PopoverHeaderCard sizing="border">
             <Stack>
-              <Box paddingX={3} paddingY={3}>
-                <Box paddingY={1}>
-                  <Label size={1} muted>
-                    {title}
-                  </Label>
-                </Box>
-              </Box>
-              <Card borderTop borderBottom padding={1}>
-                <TextInput
-                  data-testid="new-document-button-search-input"
-                  {...sharedTextInputProps}
-                  fontSize={1}
-                  radius={1}
-                />
+              <Card borderBottom padding={1}>
+                <TextInput {...sharedTextInputProps} fontSize={1} radius={1} />
               </Card>
             </Stack>
           </PopoverHeaderCard>
@@ -277,7 +252,7 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
       }
     >
       <div>
-        <Tooltip {...sharedTooltipProps}>
+        <TooltipWithNodes {...sharedTooltipProps}>
           <div>
             <Button
               {...sharedOpenButtonProps}
@@ -286,7 +261,7 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
               onKeyDown={handleOpenButtonKeyDown}
             />
           </div>
-        </Tooltip>
+        </TooltipWithNodes>
       </div>
     </StyledPopover>
   )
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx
index 1c9861e140e..e720573fa5e 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx
@@ -1,9 +1,10 @@
-import {Flex, Inline, Spinner, Text} from '@sanity/ui'
+import {Flex, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {CurrentUser} from '@sanity/types'
 import styled from 'styled-components'
 import {CommandList} from '../../../../components'
 import {supportsTouch} from '../../../../util'
+import {LoadingBlock} from '../../../../../ui/loadingBlock'
 import {Translate, useTranslation} from '../../../../i18n'
 import {NewDocumentOption, PreviewLayout} from './types'
 import {INLINE_PREVIEW_HEIGHT, NewDocumentListOption} from './NewDocumentListOption'
@@ -58,24 +59,7 @@ export function NewDocumentList(props: NewDocumentListProps) {
 
   // Render loading state
   if (loading) {
-    return (
-      <ContentFlex
-        align="center"
-        flex={1}
-        height="fill"
-        justify="center"
-        padding={4}
-        sizing="border"
-      >
-        <Inline space={2}>
-          <Spinner muted size={1} />
-
-          <Text muted size={1}>
-            {t('new-document.loading')}
-          </Text>
-        </Inline>
-      </ContentFlex>
-    )
+    return <LoadingBlock />
   }
 
   // Render no search results state
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
index cae7996fde8..33e4b61abaf 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
@@ -1,16 +1,12 @@
 import {CurrentUser} from '@sanity/types'
-import {Tooltip, Box, Card, Text} from '@sanity/ui'
+import {Card, Text} from '@sanity/ui'
 import React, {useCallback, useMemo} from 'react'
-import styled from 'styled-components'
+import {TooltipWithNodes} from '../../../../../ui'
 import {InsufficientPermissionsMessage} from '../../../../components'
 import {useI18nText} from '../../../../i18n'
 import {NewDocumentOption, PreviewLayout} from './types'
 import {useIntentLink} from 'sanity/router'
 
-const TooltipContentBox = styled(Box)`
-  max-width: 300px;
-`
-
 // This value is used to calculate the max-height of the popover and for the virtual list item size.
 // This value is not used anywhere in this file, but it is exported
 // from here to make it easier to maintain the value in the future
@@ -46,14 +42,12 @@ export function NewDocumentListOption(props: NewDocumentListOptionProps) {
   const {title} = useI18nText(option)
 
   return (
-    <Tooltip
+    <TooltipWithNodes
       disabled={option.hasPermission}
       key={option.id}
       portal
       content={
-        <TooltipContentBox padding={2}>
-          <InsufficientPermissionsMessage currentUser={currentUser} context="create-document" />
-        </TooltipContentBox>
+        <InsufficientPermissionsMessage currentUser={currentUser} context="create-document" />
       }
     >
       <div>
@@ -69,6 +63,6 @@ export function NewDocumentListOption(props: NewDocumentListOptionProps) {
           <Text size={preview === 'inline' ? 1 : undefined}>{title}</Text>
         </Card>
       </div>
-    </Tooltip>
+    </TooltipWithNodes>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
index c51d5a2db2b..3350259e31d 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
@@ -1,31 +1,14 @@
 import {CogIcon, UsersIcon} from '@sanity/icons'
-import {
-  AvatarStack,
-  Box,
-  Button,
-  Card,
-  Menu,
-  MenuButton,
-  MenuButtonProps,
-  MenuDivider,
-  MenuItem,
-  Stack,
-  Text,
-} from '@sanity/ui'
+import {Box, Menu, MenuButton, MenuButtonProps, MenuDivider, Stack, Text} from '@sanity/ui'
 import React, {useCallback, useMemo, useState} from 'react'
 import styled from 'styled-components'
-import {StatusButton, UserAvatar} from '../../../../components'
+import {StatusButton} from '../../../../components'
 import {useGlobalPresence} from '../../../../store'
 import {useColorScheme} from '../../../colorScheme'
+import {MenuItem} from '../../../../../ui'
+import {useTranslation} from '../../../../i18n'
 import {useWorkspace} from '../../../workspace'
 import {PresenceMenuItem} from './PresenceMenuItem'
-import {useTranslation} from '../../../../i18n'
-
-const MAX_AVATARS = 4
-
-const AvatarStackCard = styled(Card)`
-  background: transparent;
-`
 
 const StyledMenu = styled(Menu)`
   max-width: 350px;
@@ -38,12 +21,7 @@ const FooterStack = styled(Stack)`
   background-color: var(--card-bg-color);
 `
 
-interface PresenceMenuProps {
-  collapse?: boolean
-}
-
-export function PresenceMenu(props: PresenceMenuProps) {
-  const {collapse} = props
+export function PresenceMenu() {
   const presence = useGlobalPresence()
   const {projectId} = useWorkspace()
   const {scheme} = useColorScheme()
@@ -64,25 +42,23 @@ export function PresenceMenu(props: PresenceMenuProps) {
     setFocusedId('')
   }, [])
 
-  const button = useMemo(() => {
-    if (collapse) {
-      return (
-        <StatusButton icon={UsersIcon} mode="bleed" tone={hasPresence ? 'positive' : undefined} />
-      )
-    }
+  const handleClose = useCallback(() => {
+    setFocusedId('')
+  }, [])
 
+  const button = useMemo(() => {
     return (
-      <Button mode="bleed" padding={1}>
-        <AvatarStackCard>
-          <AvatarStack maxLength={MAX_AVATARS} aria-label={t('presence.aria-label')}>
-            {presence.map((item) => (
-              <UserAvatar key={item.user.id} user={item.user} />
-            ))}
-          </AvatarStack>
-        </AvatarStackCard>
-      </Button>
+      <StatusButton
+        icon={UsersIcon}
+        mode="bleed"
+        tone={hasPresence ? 'positive' : undefined}
+        tooltipProps={{
+          // @todo: rename, as its no longer an aria-label
+          content: t('presence.aria-label'),
+        }}
+      />
     )
-  }, [collapse, hasPresence, presence, t])
+  }, [hasPresence, t])
 
   const popoverProps = useMemo(
     (): MenuButtonProps['popover'] => ({
@@ -99,26 +75,22 @@ export function PresenceMenu(props: PresenceMenuProps) {
     <MenuButton
       button={button}
       id="global-presence-menu"
-      onClose={handleClearFocusedItem}
       menu={
-        <StyledMenu padding={1} paddingBottom={0}>
-          {hasPresence && (
-            <Stack>
-              {presence.map((item) => (
-                <PresenceMenuItem
-                  focused={focusedId === item.user.id}
-                  key={item.user.id}
-                  onFocus={handleItemFocus}
-                  presence={item}
-                />
-              ))}
-            </Stack>
-          )}
+        <StyledMenu>
+          {hasPresence &&
+            presence.map((item) => (
+              <PresenceMenuItem
+                focused={focusedId === item.user.id}
+                key={item.user.id}
+                onFocus={handleItemFocus}
+                presence={item}
+              />
+            ))}
 
           {!hasPresence && (
-            <Box paddingX={3} paddingY={4}>
+            <Box padding={3}>
               <Stack space={3}>
-                <Text weight="semibold" size={2}>
+                <Text weight="medium" size={1}>
                   {t('presence.no-one-else-title')}
                 </Text>
 
@@ -137,7 +109,6 @@ export function PresenceMenu(props: PresenceMenuProps) {
               href={`https://sanity.io/manage/project/${projectId}`}
               iconRight={CogIcon}
               onFocus={handleClearFocusedItem}
-              paddingY={4}
               rel="noopener noreferrer"
               target="_blank"
               text={t('presence.action.manage-members')}
@@ -145,6 +116,7 @@ export function PresenceMenu(props: PresenceMenuProps) {
           </FooterStack>
         </StyledMenu>
       }
+      onClose={handleClose}
       popover={popoverProps}
     />
   )
diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
index 686c700b8fb..17554597339 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
@@ -1,17 +1,11 @@
 import React, {forwardRef, memo, useCallback, useEffect, useMemo, useState} from 'react'
 import {orderBy} from 'lodash'
 import * as PathUtils from '@sanity/util/paths'
-import {Card, Flex, MenuItem, Stack, Text} from '@sanity/ui'
-import styled from 'styled-components'
 import {GlobalPresence} from '../../../../store'
 import {UserAvatar} from '../../../../components'
-import {IntentLink} from 'sanity/router'
+import {MenuItem} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
-
-const AvatarCard = styled(Card)`
-  background: transparent;
-  margin: calc((-35px + 11px) / 2);
-`
+import {IntentLink} from 'sanity/router'
 
 interface PresenceListRowProps {
   focused: boolean
@@ -72,32 +66,20 @@ export const PresenceMenuItem = memo(function PresenceMenuItem(props: PresenceLi
   return (
     <MenuItem
       as={lastActiveLocation ? LinkComponent : 'div'}
-      data-as={lastActiveLocation ? 'a' : 'div'}
+      data-as="a"
+      disabled={!hasLink}
       onFocus={handleFocus}
-      paddingY={hasLink ? 4 : 3}
-      paddingLeft={4}
-      paddingRight={3}
+      preview={
+        <UserAvatar
+          key={presence.user.id}
+          size={0}
+          user={presence.user}
+          status={hasLink ? 'editing' : 'inactive'}
+        />
+      }
       ref={setMenuItemElement}
-    >
-      <Flex align="center">
-        <AvatarCard>
-          <UserAvatar
-            size={1}
-            key={presence.user.id}
-            user={presence.user}
-            status={hasLink ? 'editing' : 'inactive'}
-          />
-        </AvatarCard>
-
-        <Stack space={2} marginLeft={4}>
-          <Text textOverflow="ellipsis">{presence.user.displayName}</Text>
-          {!hasLink && (
-            <Text size={0} muted textOverflow="ellipsis">
-              {t('presence.not-in-a-document')}
-            </Text>
-          )}
-        </Stack>
-      </Flex>
-    </MenuItem>
+      text={presence.user.displayName}
+      tooltipProps={hasLink ? undefined : {content: t('presence.not-in-a-document')}}
+    />
   )
 })
diff --git a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
index 66652f07b8e..3445021bede 100644
--- a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
@@ -1,8 +1,8 @@
-import {HelpCircleIcon} from '@sanity/icons'
-import {Box, Button, Flex, Menu, MenuButton, Text, Tooltip} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
+import {InfoOutlineIcon} from '@sanity/icons'
+import {Menu, MenuButton} from '@sanity/ui'
+import React from 'react'
 import styled from 'styled-components'
-import {useColorScheme} from '../../../colorScheme'
+import {Button} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 import {useGetHelpResources} from './helper-functions/hooks'
 import {ResourcesMenuItems} from './ResourcesMenuItems'
@@ -13,50 +13,26 @@ const StyledMenu = styled(Menu)`
 `
 
 export function ResourcesButton() {
-  const {scheme} = useColorScheme()
-  const [menuOpen, setMenuOpen] = useState(false)
   const {t} = useTranslation()
 
   const {value, error, isLoading} = useGetHelpResources()
 
-  const handleOnOpen = useCallback(() => setMenuOpen(true), [])
-  const handleOnClose = useCallback(() => setMenuOpen(false), [])
-
   return (
-    <Flex>
-      <Tooltip
-        content={
-          <Box padding={2}>
-            <Text size={1}>{t('help-resources.title')}</Text>
-          </Box>
-        }
-        scheme={scheme}
-        placement="bottom"
-        portal
-        disabled={menuOpen}
-      >
-        <div>
-          <MenuButton
-            button={
-              <Button
-                aria-label={t('help-resources.title')}
-                icon={HelpCircleIcon}
-                mode="bleed"
-                fontSize={2}
-              />
-            }
-            id="menu-button-resources"
-            menu={
-              <StyledMenu>
-                <ResourcesMenuItems error={error} isLoading={isLoading} value={value} />
-              </StyledMenu>
-            }
-            popover={{constrainSize: true, placement: 'bottom', portal: true, scheme}}
-            onClose={handleOnClose}
-            onOpen={handleOnOpen}
-          />
-        </div>
-      </Tooltip>
-    </Flex>
+    <MenuButton
+      button={
+        <Button
+          icon={InfoOutlineIcon}
+          mode="bleed"
+          tooltipProps={{content: t('help-resources.title')}}
+        />
+      }
+      id="menu-button-resources"
+      menu={
+        <StyledMenu>
+          <ResourcesMenuItems error={error} isLoading={isLoading} value={value} />
+        </StyledMenu>
+      }
+      popover={{constrainSize: true}}
+    />
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
index 8a5294cc48b..4677cae9bb9 100644
--- a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
@@ -1,6 +1,8 @@
-import {Box, Card, Flex, Label, MenuDivider, MenuItem, Spinner, Text} from '@sanity/ui'
+import {Box, MenuDivider, Text} from '@sanity/ui'
 import React from 'react'
 import {SANITY_VERSION} from '../../../../version'
+import {MenuItem} from '../../../../../ui'
+import {LoadingBlock} from '../../../../../ui/loadingBlock'
 import {useTranslation} from '../../../../i18n'
 import {ResourcesResponse, Section} from './helper-functions/types'
 
@@ -16,11 +18,7 @@ export function ResourcesMenuItems({error, isLoading, value}: ResourcesMenuItemP
   const {t} = useTranslation()
 
   if (isLoading) {
-    return (
-      <Flex align="center" justify="center" padding={3}>
-        <Spinner />
-      </Flex>
-    )
+    return <LoadingBlock />
   }
 
   const fallbackLinks = (
@@ -28,26 +26,20 @@ export function ResourcesMenuItems({error, isLoading, value}: ResourcesMenuItemP
       <MenuItem
         as="a"
         text={t('help-resources.action.join-our-community')}
-        size={0}
         href="https://www.sanity.io/exchange/community"
         target="_blank"
-        muted={false}
       />
       <MenuItem
         as="a"
         text={t('help-resources.action.help-and-support')}
-        size={0}
         href="https://www.sanity.io/contact/support"
         target="_blank"
-        muted={false}
       />
       <MenuItem
         as="a"
         text={t('help-resources.action.contact-sales')}
-        size={0}
         href="https://www.sanity.io/contact/sales?ref=studio"
         target="_blank"
-        muted={false}
       />
       <MenuDivider />
     </>
@@ -86,13 +78,6 @@ export function ResourcesMenuItems({error, isLoading, value}: ResourcesMenuItemP
 function SubSection({subSection}: {subSection: Section}) {
   return (
     <>
-      {subSection.sectionTitle && (
-        <Card padding={2} paddingTop={3} marginLeft={1}>
-          <Label muted size={1}>
-            {subSection.sectionTitle}
-          </Label>
-        </Card>
-      )}
       {subSection?.items?.map((item) => {
         if (!item || !item.title) return null
         switch (item._type) {
@@ -104,7 +89,6 @@ function SubSection({subSection}: {subSection: Section}) {
                 tone="default"
                 key={item._key}
                 text={item.title}
-                size={0}
                 href={item.url}
                 target="_blank"
               />
@@ -112,9 +96,7 @@ function SubSection({subSection}: {subSection: Section}) {
           case 'internalAction': // TODO: Add support for internal actions (MVI-2)
             if (!item.type) return null
             return (
-              item.type === 'show-welcome-modal' && (
-                <MenuItem key={item._key} text={item.title} size={0} />
-              )
+              item.type === 'show-welcome-modal' && <MenuItem key={item._key} text={item.title} />
             )
 
           default:
diff --git a/packages/sanity/src/core/studio/components/navbar/resources/helper-functions/types.ts b/packages/sanity/src/core/studio/components/navbar/resources/helper-functions/types.ts
index 5562774acdf..e56e7c99da0 100644
--- a/packages/sanity/src/core/studio/components/navbar/resources/helper-functions/types.ts
+++ b/packages/sanity/src/core/studio/components/navbar/resources/helper-functions/types.ts
@@ -30,6 +30,8 @@ interface Resource {
 
 export interface Section {
   _key: string
+  /* @todo Update with the correct version when released  */
+  /** @deprecated No longer displayed in Sanity Studio 3.xx.x */
   sectionTitle?: string
   items?: (InternalAction | ExternalLink)[]
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx
new file mode 100644
index 00000000000..4bb6c6d7b68
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx
@@ -0,0 +1,36 @@
+import {SearchIcon} from '@sanity/icons'
+import React, {forwardRef} from 'react'
+import {useTranslation} from 'react-i18next'
+import {Button} from '../../../../../ui'
+import {GLOBAL_SEARCH_KEY, GLOBAL_SEARCH_KEY_MODIFIER} from './constants'
+
+interface SearchButtonProps {
+  onClick: () => void
+}
+
+/**
+ * @internal
+ */
+export const SearchButton = forwardRef(function SearchButton(
+  {onClick}: SearchButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const {t} = useTranslation()
+
+  return (
+    <Button
+      aria-label={t('search.action-open-aria-label')}
+      data-testid="studio-search"
+      icon={SearchIcon}
+      tooltipProps={{
+        // @todo: localize
+        content: 'Search',
+        hotkeys: [GLOBAL_SEARCH_KEY_MODIFIER, GLOBAL_SEARCH_KEY.toUpperCase()],
+        portal: true,
+      }}
+      onClick={onClick}
+      mode="bleed"
+      ref={ref}
+    />
+  )
+})
diff --git a/packages/sanity/src/core/studio/components/navbar/search/SearchField.tsx b/packages/sanity/src/core/studio/components/navbar/search/SearchField.tsx
deleted file mode 100644
index b999b016062..00000000000
--- a/packages/sanity/src/core/studio/components/navbar/search/SearchField.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, {useCallback, useEffect, useState} from 'react'
-import {PlaceholderSearchInput} from './components/PlaceholderSearchInput'
-import {PopoverPosition, SearchPopover} from './components/SearchPopover'
-import {POPOVER_INPUT_PADDING, POPOVER_MAX_WIDTH} from './constants'
-
-/**
- * @internal
- */
-export function SearchField() {
-  const [placeholderElement, setPlaceholderElement] = useState<HTMLInputElement | null>(null)
-  const [open, setOpen] = useState(false)
-
-  const handleClose = useCallback(() => setOpen(false), [])
-  const handleOpen = useCallback(() => setOpen(true), [])
-
-  const popoverPosition = usePopoverPosition(placeholderElement)
-
-  return (
-    <>
-      <PlaceholderSearchInput onOpen={handleOpen} ref={setPlaceholderElement} />
-      {popoverPosition && (
-        <SearchPopover
-          onClose={handleClose}
-          onOpen={handleOpen}
-          open={open}
-          position={popoverPosition}
-        />
-      )}
-    </>
-  )
-}
-
-function calcDialogPosition(element: HTMLElement): PopoverPosition {
-  const placeholderRect = element.getBoundingClientRect()
-
-  // Offset positioning to account for dialog padding. This should ensure that our popover search input
-  // sits directly over the top of the existing placeholder input.
-  return {
-    x:
-      window.innerWidth - placeholderRect.x > POPOVER_MAX_WIDTH
-        ? placeholderRect.x - POPOVER_INPUT_PADDING
-        : null,
-    y: placeholderRect.y - POPOVER_INPUT_PADDING,
-  }
-}
-
-function usePopoverPosition(element: HTMLElement | null) {
-  const [popoverPosition, setPopoverPosition] = useState<PopoverPosition | null>(null)
-
-  /**
-   * Update popover position on window resize based off current placeholder input
-   */
-  const handleWindowResize = useCallback(() => {
-    if (element) {
-      setPopoverPosition(calcDialogPosition(element))
-    }
-  }, [element])
-
-  useEffect(() => {
-    if (element) {
-      setPopoverPosition(calcDialogPosition(element))
-    }
-  }, [element])
-
-  useEffect(() => {
-    window.addEventListener('resize', handleWindowResize)
-    return () => window.removeEventListener('resize', handleWindowResize)
-  }, [handleWindowResize])
-
-  return popoverPosition
-}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateDirectionStory.tsx b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateDirectionStory.tsx
index 06ad176f3ce..7c9bf99c2d3 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateDirectionStory.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateDirectionStory.tsx
@@ -36,7 +36,7 @@ export default function CommonDateDirectionStory() {
       </Card>
       <Card margin={3} padding={3} shadow={1} tone="primary">
         <Inline space={1}>
-          <Text muted size={1} weight="semibold">
+          <Text muted size={1} weight="medium">
             Value:
           </Text>
           <Text muted size={1}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateEqualStory.tsx b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateEqualStory.tsx
index 1704a2efe47..eb5685fd73f 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateEqualStory.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateEqualStory.tsx
@@ -21,7 +21,7 @@ export default function CommonDateEqualStory() {
       </Card>
       <Card margin={3} padding={3} shadow={1} tone="primary">
         <Inline space={1}>
-          <Text muted size={1} weight="semibold">
+          <Text muted size={1} weight="medium">
             Value:
           </Text>
           <Text muted size={1}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateRangeStory.tsx b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateRangeStory.tsx
index f6a6c7ff13e..c5ca3f39a51 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateRangeStory.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateRangeStory.tsx
@@ -22,7 +22,7 @@ export default function CommonDateRangeStory() {
       <Card margin={3} padding={3} shadow={1} tone="primary">
         <Stack space={3}>
           <Inline space={1}>
-            <Text muted size={1} weight="semibold">
+            <Text muted size={1} weight="medium">
               Start:
             </Text>
             <Text muted size={1}>
@@ -30,7 +30,7 @@ export default function CommonDateRangeStory() {
             </Text>
           </Inline>
           <Inline space={1}>
-            <Text muted size={1} weight="semibold">
+            <Text muted size={1} weight="medium">
               End:
             </Text>
             <Text muted size={1}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/SearchPopoverStory.tsx b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/SearchPopoverStory.tsx
index 086f14a1a46..93ff5434de8 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/SearchPopoverStory.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/SearchPopoverStory.tsx
@@ -14,7 +14,6 @@ export default function SearchFieldStory() {
           onClose={noop}
           onOpen={noop}
           open
-          position={{x: 0, y: 0}}
         />
       </SearchProvider>
     </LayerProvider>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/NoResults.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/NoResults.tsx
index 1edd708f1a6..3bac0bd996e 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/NoResults.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/NoResults.tsx
@@ -8,7 +8,7 @@ export function NoResults() {
   return (
     <Container width={0}>
       <Stack aria-live="assertive" space={4} paddingX={4} paddingY={5}>
-        <Text align="center" muted weight="semibold">
+        <Text align="center" muted weight="medium">
           {t('search.no-results-title')}
         </Text>
         <Text align="center" muted size={1}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchError.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchError.tsx
index 1dc8b8784c1..8914145924c 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchError.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchError.tsx
@@ -22,7 +22,7 @@ export function SearchError() {
           <WarningOutlineIcon />
         </TextWithTone>
       </Box>
-      <TextWithTone size={2} tone="critical" weight="semibold">
+      <TextWithTone size={2} tone="critical" weight="medium">
         {t('search.error.unspecified-error-title')}
       </TextWithTone>
       <TextWithTone size={1} tone="critical">
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
index 150b33ae9c9..5f3d3add8cf 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
@@ -1,10 +1,11 @@
 import {ArrowLeftIcon, ControlsIcon, SearchIcon, SpinnerIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Theme} from '@sanity/ui'
+import {Box, Card, Flex, Theme} from '@sanity/ui'
 import React, {forwardRef, useCallback, useEffect, useRef} from 'react'
 import styled, {keyframes} from 'styled-components'
+import {Button} from '../../../../../../ui'
+import {useTranslation} from '../../../../../i18n'
 import {useSearchState} from '../contexts/search/useSearchState'
 import {CustomTextInput} from './common/CustomTextInput'
-import {useTranslation} from '../../../../../i18n'
 
 const rotate = keyframes`
   from {
@@ -95,6 +96,7 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
               icon={ArrowLeftIcon}
               mode="bleed"
               onClick={onClose}
+              tooltipProps={{content: t('search.action.close-search-aria-label')}}
             />
           </Card>
         )}
@@ -102,19 +104,21 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
         {/* Search field */}
         <Box flex={1}>
           <CustomTextInput
+            __unstable_disableFocusRing
+            $background={fullscreen}
+            $smallClearButton={fullscreen}
             aria-label={ariaInputLabel}
+            autoFocus
             autoComplete="off"
-            background={fullscreen}
             border={false}
             clearButton={!!query}
-            fontSize={2}
+            fontSize={1}
             icon={loading ? AnimatedSpinnerIcon : SearchIcon}
             onChange={handleQueryChange}
             onClear={handleQueryClear}
             placeholder={t('search.placeholder')}
-            radius={fullscreen ? 2 : 1}
+            radius={2}
             ref={ref}
-            smallClearButton={fullscreen}
             spellCheck={false}
             value={query}
           />
@@ -132,9 +136,9 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
               icon={ControlsIcon}
               mode="bleed"
               onClick={handleFiltersToggle}
-              padding={3}
               selected={filtersVisible}
               tone="default"
+              tooltipProps={{content: filtersVisible ? 'Hide filters' : 'Show filters'}}
             />
             {notificationBadgeVisible && <NotificationBadge />}
           </FilterBox>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
index b296bdfa565..80c4bd61651 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
@@ -1,7 +1,7 @@
 import {Card, Portal, Theme, useClickOutside, useLayer} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import FocusLock from 'react-focus-lock'
-import styled, {css} from 'styled-components'
+import styled from 'styled-components'
 import {supportsTouch} from '../../../../../util'
 import {useColorScheme} from '../../../../colorScheme'
 import {
@@ -19,18 +19,15 @@ import {RecentSearches} from './recentSearches/RecentSearches'
 import {SearchHeader} from './SearchHeader'
 import {SearchResults} from './searchResults/SearchResults'
 
-export type PopoverPosition = {
-  x: number | null
-  y: number
-}
 export interface SearchPopoverProps {
   disableFocusLock?: boolean
   onClose: () => void
   onOpen: () => void
   open: boolean
-  position: PopoverPosition
 }
 
+const Y_POSITION = 8 // px
+
 const Overlay = styled.div`
   background-color: ${({theme}: {theme: Theme}) => theme.sanity.color.base.shadow.ambient};
   bottom: 0;
@@ -40,32 +37,21 @@ const Overlay = styled.div`
   top: 0;
 `
 
-const SearchPopoverCard = styled(Card)<{$position: PopoverPosition}>`
-  ${({$position}) =>
-    $position.x
-      ? css`
-          left: ${$position.x}px;
-        `
-      : css`
-          left: 50%;
-          transform: translateX(-50%);
-        `}
+const SearchPopoverCard = styled(Card)`
   display: flex !important;
   flex-direction: column;
-  max-height: ${({$position}) =>
-    `min(calc(100vh - ${$position.y}px - ${POPOVER_INPUT_PADDING}px), ${POPOVER_MAX_HEIGHT}px)`};
+  left: 50%;
+  max-height: min(
+    calc(100vh - ${Y_POSITION}px - ${POPOVER_INPUT_PADDING}px),
+    ${POPOVER_MAX_HEIGHT}px
+  );
   position: absolute;
-  top: ${({$position}) => $position.y}px;
+  top: ${Y_POSITION}px;
+  transform: translateX(-50%);
   width: min(calc(100vw - ${POPOVER_INPUT_PADDING * 2}px), ${POPOVER_MAX_WIDTH}px);
 `
 
-export function SearchPopover({
-  disableFocusLock,
-  onClose,
-  onOpen,
-  open,
-  position,
-}: SearchPopoverProps) {
+export function SearchPopover({disableFocusLock, onClose, onOpen, open}: SearchPopoverProps) {
   const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
   const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
 
@@ -98,7 +84,6 @@ export function SearchPopover({
           <Overlay style={{zIndex}} />
 
           <SearchPopoverCard
-            $position={position}
             overflow="hidden"
             radius={POPOVER_RADIUS}
             ref={setPopoverElement}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
index eb4f431d3cd..2b067afc346 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
@@ -1,21 +1,11 @@
 import {SortIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Flex,
-  Inline,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  Text,
-} from '@sanity/ui'
+import {Card, Flex, Menu, MenuButton, MenuDivider} from '@sanity/ui'
 import isEqual from 'lodash/isEqual'
 import React, {useCallback, useId, useMemo} from 'react'
 import styled from 'styled-components'
 import {useTranslation} from '../../../../../i18n'
 import {ORDERINGS} from '../definitions/orderings'
+import {Button, MenuItem} from '../../../../../../ui'
 import {useSearchState} from '../contexts/search/useSearchState'
 import type {SearchOrdering} from '../types'
 
@@ -55,13 +45,12 @@ function CustomMenuItem({ordering}: {ordering: SearchOrdering}) {
   const isSelected = useMemo(() => isEqual(currentOrdering, ordering), [currentOrdering, ordering])
 
   return (
-    <MenuItem onClick={handleClick} padding={3} pressed={isSelected} tone="default">
-      <Flex align="center" justify="space-between" paddingRight={2}>
-        <Text size={1} weight="medium">
-          {t(ordering.titleKey)}
-        </Text>
-      </Flex>
-    </MenuItem>
+    <MenuItem
+      onClick={handleClick}
+      pressed={isSelected}
+      tone="default"
+      text={t(ordering.titleKey)}
+    />
   )
 }
 
@@ -85,22 +74,7 @@ export function SortMenu() {
     <Card borderBottom>
       <SortMenuContentFlex align="center" flex={1} padding={2}>
         <MenuButton
-          button={
-            <Button mode="bleed" padding={2}>
-              <Flex align="center" gap={1} justify="space-between">
-                <Box marginRight={1}>
-                  <Text size={1}>
-                    <SortIcon />
-                  </Text>
-                </Box>
-                <Inline space={2}>
-                  <Text size={1} weight="medium">
-                    {t(currentMenuItem.titleKey)}
-                  </Text>
-                </Inline>
-              </Flex>
-            </Button>
-          }
+          button={<Button mode="bleed" icon={SortIcon} text={t(currentMenuItem.titleKey)} />}
           id={menuButtonId || ''}
           menu={
             <Menu>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/common/CustomTextInput.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/common/CustomTextInput.tsx
index 85dd8ce7daf..73c4c384af9 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/common/CustomTextInput.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/common/CustomTextInput.tsx
@@ -3,16 +3,16 @@ import React, {ComponentProps, forwardRef} from 'react'
 import {CustomTextInputBox} from './CustomTextInputBox'
 
 interface CustomTextInputProps extends ComponentProps<typeof TextInput> {
-  background?: boolean
-  smallClearButton?: boolean
+  $background?: boolean
+  $smallClearButton?: boolean
 }
 
 export const CustomTextInput = forwardRef<HTMLInputElement, CustomTextInputProps>(
   function CustomTextInput(props, ref) {
-    const {background, smallClearButton, ...rest} = props
+    const {$background, $smallClearButton, ...rest} = props
 
     return (
-      <CustomTextInputBox $background={background} $smallClearButton={smallClearButton}>
+      <CustomTextInputBox $background={$background} $smallClearButton={$smallClearButton}>
         <TextInput {...rest} ref={ref} />
       </CustomTextInputBox>
     )
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/common/FilterLabel.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/common/FilterLabel.tsx
index 621fbf6f7b2..8f37d6449cf 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/common/FilterLabel.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/common/FilterLabel.tsx
@@ -35,7 +35,7 @@ export function FilterLabel({filter, fontSize = 1, showContent = true}: FilterLa
     () => ({
       Field: () => (
         <CustomBox $flexShrink={fullscreen ? 1 : 0}>
-          <TextWithTone tone="default" size={fontSize} textOverflow="ellipsis" weight="semibold">
+          <TextWithTone tone="default" size={fontSize} textOverflow="ellipsis" weight="medium">
             <FilterTitle filter={filter} maxLength={fullscreen ? 25 : 40} />
           </TextWithTone>
         </CustomBox>
@@ -51,7 +51,7 @@ export function FilterLabel({filter, fontSize = 1, showContent = true}: FilterLa
       Value: ({children}) =>
         showContent ? (
           <CustomBox $flexShrink={1}>
-            <TextWithTone tone="default" size={fontSize} textOverflow="ellipsis" weight="semibold">
+            <TextWithTone tone="default" size={fontSize} textOverflow="ellipsis" weight="medium">
               {ButtonValue ? <ButtonValue value={filterValue} /> : children}
             </TextWithTone>
           </CustomBox>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/common/SearchWrapper.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/common/SearchWrapper.tsx
index 2a4e930d70a..59c00a609e6 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/common/SearchWrapper.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/common/SearchWrapper.tsx
@@ -78,5 +78,5 @@ export function SearchWrapper({
     return null
   }
 
-  return <div>{children}</div>
+  return children
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/Filters.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/Filters.tsx
index 59c29f9230e..706404ee3d6 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/Filters.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/Filters.tsx
@@ -1,8 +1,9 @@
-import {Button, Flex} from '@sanity/ui'
+import {Flex} from '@sanity/ui'
 import React, {useCallback, useEffect, useRef} from 'react'
 import {DEBUG_MODE} from '../../constants'
 import {useSearchState} from '../../contexts/search/useSearchState'
 import {getFilterKey} from '../../utils/filterUtils'
+import {Button} from '../../../../../../../ui'
 import {useTranslation} from '../../../../../../i18n'
 import {AddFilterButton} from './addFilter/AddFilterButton'
 import {DebugDocumentTypesNarrowed} from './debug/_DebugDocumentTypesNarrowed'
@@ -39,10 +40,9 @@ export function Filters() {
 
   const ClearFiltersButton = () => (
     <Button
-      fontSize={1}
       mode="bleed"
       onClick={handleClear}
-      padding={fullscreen ? 3 : 2}
+      size={fullscreen ? 'large' : 'default'}
       text={t('search.action.clear-filters')}
       tone="critical"
     />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx
index 0041bdf79ab..7278eb910b3 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx
@@ -1,9 +1,10 @@
 import {AddIcon} from '@sanity/icons'
-import {Button, Popover} from '@sanity/ui'
+import {Popover} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {POPOVER_RADIUS, POPOVER_VERTICAL_MARGIN} from '../../../constants'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import {FilterPopoverWrapper} from '../common/FilterPopoverWrapper'
+import {Button} from '../../../../../../../../ui'
 import {useTranslation} from '../../../../../../../i18n'
 import {AddFilterPopoverContent} from './AddFilterPopoverContent'
 
@@ -33,14 +34,12 @@ export function AddFilterButton() {
       portal
     >
       <Button
-        fontSize={1}
         icon={AddIcon}
         mode="bleed"
         onClick={handleOpen}
-        padding={fullscreen ? 3 : 2}
+        size={fullscreen ? 'large' : 'default'}
         ref={setButtonElement}
         selected={open}
-        space={2}
         text={t('search.action.add-filter')}
       />
     </Popover>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
index 40b2a764ad2..1a0221672fe 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
@@ -1,6 +1,7 @@
-import {Card, Code, Flex, Inline, Label, Stack, Text, Tooltip} from '@sanity/ui'
+import {Card, Code, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {startCase, uniq} from 'lodash'
 import React, {ReactElement, useMemo} from 'react'
+import {TooltipWithNodes} from '../../../../../../../../../ui'
 import {useSchema} from '../../../../../../../../hooks'
 import {isNonNullable, truncateString} from '../../../../../../../../util'
 import {useSearchState} from '../../../../contexts/search/useSearchState'
@@ -74,19 +75,19 @@ export function FilterTooltip({
   }, [fieldDefinition?.documentTypes, fieldDefinition?.fieldPath, schema])
 
   return (
-    <Tooltip
+    <TooltipWithNodes
       content={
         <Card tone="default" radius={2} style={{maxWidth: '250px'}}>
-          <Stack padding={3} space={4}>
+          <Stack space={4}>
             {/* Field name */}
             {fieldDefinition && (
               <Stack space={2}>
-                <Label muted size={0}>
+                <Text muted size={1} weight="medium">
                   {t('search.filter-field-tooltip-name')}
-                </Label>
+                </Text>
                 <Inline>
                   <Card tone="caution" padding={1} radius={2}>
-                    <Code size={0}>{fieldDefinition?.name}</Code>
+                    <Code size={1}>{fieldDefinition?.name}</Code>
                   </Card>
                 </Inline>
               </Stack>
@@ -95,10 +96,10 @@ export function FilterTooltip({
             {/* Field description */}
             {fieldDefinitionDescription && (
               <Stack space={3}>
-                <Label muted size={0}>
+                <Text muted size={1} weight="medium">
                   {t('search.filter-field-tooltip-description')}
-                </Label>
-                <Text muted size={0}>
+                </Text>
+                <Text muted size={1}>
                   {truncateString(fieldDefinitionDescription, 256)}
                 </Text>
               </Stack>
@@ -106,7 +107,7 @@ export function FilterTooltip({
 
             {/* Filter description */}
             {filterDefinition?.description && (
-              <Text muted size={0}>
+              <Text muted size={1}>
                 {truncateString(filterDefinition.description, 256)}
               </Text>
             )}
@@ -115,16 +116,16 @@ export function FilterTooltip({
             {!documentTypesNarrowed.length && fieldDefinitionDocumentTypeTitles.length > 0 && (
               <Stack space={2}>
                 <Flex align="center" gap={1}>
-                  <Label muted size={0}>
+                  <Text muted size={1} weight="medium">
                     {t('search.filter-field-tooltip-used-in-document-types')}
-                  </Label>
+                  </Text>
                   <Card padding={1} radius={2} tone="transparent">
-                    <Text size={0} muted>
+                    <Text size={1} muted>
                       {fieldDefinitionDocumentTypeTitles.length}
                     </Text>
                   </Card>
                 </Flex>
-                <Text size={0} weight="regular" muted>
+                <Text size={1} weight="regular" muted>
                   {fieldDefinitionDocumentTypeTitles.slice(0, MAX_VISIBLE_TYPES).join(', ')}
                   {fieldDefinitionDocumentTypeTitles?.length > MAX_VISIBLE_TYPES
                     ? ` +${fieldDefinitionDocumentTypeTitles.length - MAX_VISIBLE_TYPES} more`
@@ -141,6 +142,6 @@ export function FilterTooltip({
       portal
     >
       {children}
-    </Tooltip>
+    </TooltipWithNodes>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx
index dea885d2502..b2a4294c0c7 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx
@@ -1,5 +1,11 @@
-import {Box, Button, ResponsiveMarginProps, ResponsivePaddingProps} from '@sanity/ui'
-import React, {useCallback, useEffect, useRef, useState} from 'react'
+import {
+  Box,
+  ResponsiveMarginProps,
+  ResponsivePaddingProps,
+  // eslint-disable-next-line no-restricted-imports
+  Button, // Button with specific styling and children.
+} from '@sanity/ui'
+import React, {useCallback} from 'react'
 import {useSearchState} from '../../../../contexts/search/useSearchState'
 import type {FilterMenuItemFilter} from '../../../../types'
 import {getFilterKey} from '../../../../utils/filterUtils'
@@ -16,8 +22,6 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
   onClose,
   ...rest
 }: FilterMenuItemProps) {
-  const [tooltipVisible, setTooltipVisible] = useState(false)
-
   const {
     dispatch,
     state: {filters},
@@ -30,20 +34,6 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
 
   const isAlreadyActive = !!filters.find((f) => getFilterKey(f) === getFilterKey(item.filter))
 
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>()
-
-  const handleMouseEnter = useCallback(() => {
-    timeoutRef.current = setTimeout(() => setTooltipVisible(true), 500)
-  }, [])
-  const handleMouseLeave = useCallback(() => {
-    setTooltipVisible(false)
-    clearTimeout(timeoutRef.current)
-  }, [])
-
-  useEffect(() => {
-    return () => clearTimeout(timeoutRef.current)
-  }, [])
-
   // Only enable tooltips if an associated field definition exists, or the filter has a valid description
   const tooltipEnabled = !!(item.fieldDefinition || item.filterDefinition.description)
 
@@ -55,8 +45,6 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
         justify="flex-start"
         mode="bleed"
         onClick={isAlreadyActive ? undefined : handleClick}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
         padding={0}
         style={{position: 'relative', whiteSpace: 'normal', width: '100%'}}
         tabIndex={-1}
@@ -65,7 +53,7 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
         <FilterTooltip
           fieldDefinition={item.fieldDefinition}
           filterDefinition={item.filterDefinition}
-          visible={tooltipEnabled && tooltipVisible}
+          visible={tooltipEnabled}
         >
           <Box padding={3}>
             <FilterDetails filter={item.filter} />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemHeader.tsx
index c341ab678ab..6bcda11fdd1 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemHeader.tsx
@@ -1,4 +1,4 @@
-import {Box, Card, Label} from '@sanity/ui'
+import {Box, Card, Text} from '@sanity/ui'
 import React from 'react'
 import type {FilterMenuItemHeader} from '../../../../types'
 
@@ -9,10 +9,10 @@ interface MenuItemHeaderFields {
 export const MenuItemHeader = React.memo(function MenuItemHeader({item}: MenuItemHeaderFields) {
   return (
     <Box paddingTop={1}>
-      <Card borderBottom padding={3} tone={item?.tone}>
-        <Label muted size={0} textOverflow="ellipsis">
+      <Card borderBottom paddingX={2} paddingY={3} tone={item?.tone}>
+        <Text muted size={1} textOverflow="ellipsis" weight="medium">
           {item.title}
-        </Label>
+        </Text>
       </Card>
     </Box>
   )
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterPopoverContentHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterPopoverContentHeader.tsx
index e972239d6e9..f5dcf36981b 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterPopoverContentHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterPopoverContentHeader.tsx
@@ -35,6 +35,8 @@ export const FilterPopoverContentHeader = forwardRef<
     <SearchHeaderBox>
       <SearchHeaderContentFlex align="center" flex={1} padding={1}>
         <CustomTextInput
+          __unstable_disableFocusRing
+          $smallClearButton
           aria-label={ariaInputLabel}
           autoComplete="off"
           border={false}
@@ -46,7 +48,6 @@ export const FilterPopoverContentHeader = forwardRef<
           onClear={onClear}
           placeholder={t('search.filter-placeholder')}
           ref={ref}
-          smallClearButton
           spellCheck={false}
           radius={2}
           value={typeFilter}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypes.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypes.tsx
index 3b3bde4a6e6..f405242a677 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypes.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypes.tsx
@@ -19,7 +19,7 @@ export function DebugDocumentTypes({filter}: DebugDocumentTypesProps) {
   return (
     <Card borderTop padding={3} tone="transparent">
       <Stack space={2}>
-        <Code size={0} weight="semibold">
+        <Code size={0} weight="medium">
           Document types
         </Code>
         <Code muted size={0} style={{whiteSpace: 'normal'}}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypesNarrowed.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypesNarrowed.tsx
index 197c6f4fc8a..9d9fdd36774 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypesNarrowed.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypesNarrowed.tsx
@@ -10,7 +10,7 @@ export function DebugDocumentTypesNarrowed() {
   return (
     <Card borderTop padding={4} tone="transparent">
       <Stack space={3}>
-        <Code size={1} weight="semibold">
+        <Code size={1} weight="medium">
           Document types (narrowed)
         </Code>
         <Code muted size={1} style={{whiteSpace: 'normal'}}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterQuery.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterQuery.tsx
index 3f3b9fbf7e9..a0c4fd7fe3f 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterQuery.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterQuery.tsx
@@ -16,7 +16,7 @@ export function DebugFilterQuery() {
   return (
     <Card padding={4} tone="transparent">
       <Stack space={3}>
-        <Code size={1} weight="semibold">
+        <Code size={1} weight="medium">
           Filter
         </Code>
         {filter && (
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterValues.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterValues.tsx
index 2586ca69bf9..e832d1895e8 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterValues.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterValues.tsx
@@ -17,7 +17,7 @@ export function DebugFilterValues({filter}: DebugFilterValuesProps) {
   return (
     <Card borderTop padding={3} tone="transparent">
       <Stack space={2}>
-        <Code size={0} weight="semibold">
+        <Code size={0} weight="medium">
           Filter
         </Code>
         {fieldDefinition?.fieldPath && <Code size={0}>fieldPath: {fieldDefinition.fieldPath}</Code>}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx
index 551d759d1cd..900a4f7c364 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx
@@ -1,24 +1,14 @@
-import {SelectIcon} from '@sanity/icons'
-import {Button, Placement, Popover, Theme, useClickOutside} from '@sanity/ui'
+import {ChevronDownIcon} from '@sanity/icons'
+import {Placement, Popover, useClickOutside} from '@sanity/ui'
 import React, {useCallback, useMemo, useState} from 'react'
-import styled, {css} from 'styled-components'
 import {POPOVER_RADIUS, POPOVER_VERTICAL_MARGIN} from '../../../constants'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import {documentTypesTruncated} from '../../../utils/documentTypesTruncated'
 import {FilterPopoverWrapper} from '../common/FilterPopoverWrapper'
+import {Button} from '../../../../../../../../ui'
 import {useTranslation} from '../../../../../../../i18n'
 import {DocumentTypesPopoverContent} from './DocumentTypesPopoverContent'
 
-const StyledButton = styled(Button)(({theme}: {theme: Theme}) => {
-  const {regular} = theme.sanity.fonts.text.weights
-
-  return css`
-    [data-ui='Text'] {
-      font-weight: ${regular};
-    }
-  `
-})
-
 const FALLBACK_PLACEMENTS: Placement[] = ['top-start', 'bottom-start']
 
 export function DocumentTypesButton() {
@@ -56,15 +46,13 @@ export function DocumentTypesButton() {
       radius={POPOVER_RADIUS}
       ref={setPopoverElement}
     >
-      <StyledButton
-        fontSize={1}
-        iconRight={SelectIcon}
+      <Button
+        iconRight={ChevronDownIcon}
         mode="ghost"
         onClick={handleOpen}
-        padding={fullscreen ? 3 : 2}
+        size={fullscreen ? 'large' : 'default'}
         ref={setButtonElement}
         selected={open}
-        style={{maxWidth: '100%'}}
         text={title}
         tone="default"
       />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesPopoverContent.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesPopoverContent.tsx
index 3b436340d2d..990bc853bb1 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesPopoverContent.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesPopoverContent.tsx
@@ -1,5 +1,5 @@
 import {Schema} from '@sanity/types'
-import {Box, Button, Flex, Label, MenuDivider, Stack, Text} from '@sanity/ui'
+import {Box, Flex, MenuDivider, Stack, Text} from '@sanity/ui'
 import {partition} from 'lodash'
 import React, {useCallback, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
@@ -14,6 +14,7 @@ import type {SearchableType} from '../../../../../../../search'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import type {DocumentTypeMenuItem} from '../../../types'
 import {getSelectableOmnisearchTypes} from '../../../utils/selectors'
+import {Button} from '../../../../../../../../ui'
 import {FilterPopoverContentHeader} from '../common/FilterPopoverContentHeader'
 import {useTranslation} from '../../../../../../../i18n'
 import {DocumentTypeFilterItem} from './items/DocumentTypeFilterItem'
@@ -92,10 +93,10 @@ export function DocumentTypesPopoverContent() {
     }
     if (item.type === 'header') {
       return (
-        <Box margin={1} paddingBottom={2} paddingTop={3}>
-          <Label muted size={0}>
+        <Box margin={2} padding={1}>
+          <Text muted size={1} weight="medium">
             {item.title}
-          </Label>
+          </Text>
         </Box>
       )
     }
@@ -187,10 +188,8 @@ function ClearButton({
           aria-label={t('search.action.clear-type-filters-aria-label')}
           data-name="type-filter-button"
           disabled={selectedTypes.length === 0}
-          fontSize={1}
           mode="bleed"
           onClick={onClick}
-          padding={3}
           text={t('search.action.clear-type-filters-label')}
           tone="primary"
         />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/items/DocumentTypeFilterItem.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/items/DocumentTypeFilterItem.tsx
index c14e6c0ddef..2b950c21868 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/items/DocumentTypeFilterItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/items/DocumentTypeFilterItem.tsx
@@ -1,8 +1,9 @@
 import {CheckmarkIcon} from '@sanity/icons'
-import {Box, Button, ResponsiveMarginProps, ResponsivePaddingProps} from '@sanity/ui'
+import {Box, ResponsiveMarginProps, ResponsivePaddingProps} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import type {SearchableType} from '../../../../../../../../search'
 import {useSearchState} from '../../../../contexts/search/useSearchState'
+import {Button} from '../../../../../../../../../ui'
 
 interface DocumentTypeFilterItemProps extends ResponsiveMarginProps, ResponsivePaddingProps {
   selected: boolean
@@ -35,13 +36,13 @@ export const DocumentTypeFilterItem = React.memo(function TypeFilterItem({
   return (
     <Box {...rest}>
       <Button
-        fontSize={1}
         iconRight={selected && CheckmarkIcon}
         justify="flex-start"
         key={type.title ?? type.name}
         mode="bleed"
         onClick={handleClick}
-        style={{width: '100%'}}
+        width="fill"
+        size="large"
         tabIndex={-1}
         text={type.title ?? type.name}
         tone={selected ? 'primary' : 'default'}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx
index 217b974e361..b2b923c6dae 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx
@@ -1,5 +1,11 @@
 import {CloseIcon} from '@sanity/icons'
-import {Button, Card, Popover, rem} from '@sanity/ui'
+import {
+  // eslint-disable-next-line no-restricted-imports
+  Button, // Button with specific styling and children behavior.
+  Card,
+  Popover,
+  rem,
+} from '@sanity/ui'
 import React, {KeyboardEvent, useCallback, useState} from 'react'
 import styled from 'styled-components'
 import {POPOVER_RADIUS, POPOVER_VERTICAL_MARGIN} from '../../../constants'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterError.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterError.tsx
index 22f3d227630..064a25bc875 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterError.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterError.tsx
@@ -14,7 +14,7 @@ export function FilterError(props: ResponsivePaddingProps) {
           <ErrorOutlineIcon />
         </TextWithTone>
         <Stack space={4}>
-          <TextWithTone size={1} tone="critical" weight="semibold">
+          <TextWithTone size={1} tone="critical" weight="medium">
             {t('search.error.display-filter-title')}
           </TextWithTone>
           <TextWithTone size={1} tone="critical">
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx
index 1f4138a1665..60aafc1c394 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx
@@ -1,7 +1,8 @@
 import {TrashIcon} from '@sanity/icons'
-import {Box, Button, Card, ErrorBoundary, Flex, Stack, Text} from '@sanity/ui'
+import {Box, Card, ErrorBoundary, Flex, Stack, Text} from '@sanity/ui'
 import React, {ErrorInfo, useCallback, useState} from 'react'
 import FocusLock from 'react-focus-lock'
+import {Button} from '../../../../../../../../ui'
 import {supportsTouch} from '../../../../../../../util'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import {getFilterDefinition} from '../../../definitions/filters'
@@ -94,12 +95,11 @@ export function FilterForm({filter}: FilterFormProps) {
 
                 {fullscreen && (
                   <Button
-                    fontSize={2}
                     icon={TrashIcon}
                     mode="bleed"
                     onClick={handleClose}
-                    padding={2}
                     tone="critical"
+                    tooltipProps={{content: 'Remove filter'}}
                   />
                 )}
               </Flex>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
index 29258c30fb4..0832b7844fd 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
@@ -1,7 +1,8 @@
-import {SelectIcon} from '@sanity/icons'
-import {Box, Button, Flex, Inline, Menu, MenuButton, MenuDivider, MenuItem, Text} from '@sanity/ui'
-import React, {createElement, useCallback, useId} from 'react'
+import {ChevronDownIcon} from '@sanity/icons'
+import {Inline, Menu, MenuButton, MenuDivider} from '@sanity/ui'
+import React, {useCallback, useId} from 'react'
 import {useSearchState} from '../../../contexts/search/useSearchState'
+import {Button, MenuItem} from '../../../../../../../../ui'
 import {getFilterDefinition} from '../../../definitions/filters'
 import {getOperatorDefinition, SearchOperatorDefinition} from '../../../definitions/operators'
 import type {SearchFilter} from '../../../types'
@@ -26,20 +27,13 @@ function CustomMenuItem({
   const {t} = useTranslation()
 
   return (
-    <MenuItem onClick={handleClick} padding={3} pressed={selected} tone="default">
-      <Flex align="center" justify="space-between" gap={3}>
-        <Box paddingRight={2}>
-          <Text size={1} weight="regular">
-            {t(operator.nameKey)}
-          </Text>
-        </Box>
-        {operator?.icon && (
-          <Text muted size={1}>
-            {createElement(operator.icon)}
-          </Text>
-        )}
-      </Flex>
-    </MenuItem>
+    <MenuItem
+      onClick={handleClick}
+      pressed={selected}
+      tone="default"
+      text={t(operator.nameKey)}
+      iconRight={operator?.icon}
+    />
   )
 }
 
@@ -68,20 +62,7 @@ export function OperatorsMenuButton({filter, operator}: OperatorsMenuButtonProps
   return (
     <Inline>
       <MenuButton
-        button={
-          <Button mode="ghost" padding={3}>
-            <Flex align="center" gap={2} justify="space-between">
-              <Text size={state.fullscreen ? 2 : 1} weight="regular">
-                {t(operator.nameKey)}
-              </Text>
-              <Box marginLeft={1}>
-                <Text size={1}>
-                  <SelectIcon />
-                </Text>
-              </Box>
-            </Flex>
-          </Button>
-        }
+        button={<Button mode="ghost" iconRight={ChevronDownIcon} text={t(operator.nameKey)} />}
         id={menuButtonId || ''}
         menu={
           <Menu>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
index 5d5f43ac176..a26a8d4bf4c 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
@@ -1,10 +1,11 @@
 import {ChevronDownIcon, ImageIcon, SearchIcon, UndoIcon} from '@sanity/icons'
 import type {AssetFromSource, AssetSource, ReferenceValue} from '@sanity/types'
-import {Box, Button, Flex, Menu, MenuButton, MenuItem, Portal, Stack} from '@sanity/ui'
+import {Box, Flex, Menu, MenuButton, Portal, Stack} from '@sanity/ui'
 import {get, startCase} from 'lodash'
 import React, {useCallback, useEffect, useId, useMemo, useState} from 'react'
 import styled from 'styled-components'
 import {Source} from '../../../../../../../../../config'
+import {Button, MenuItem} from '../../../../../../../../../../ui'
 import {FileSource, ImageSource} from '../../../../../../../../../form/studio/assetSource'
 import {useClient} from '../../../../../../../../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../../../../../../studioClient'
@@ -140,11 +141,10 @@ export function SearchFilterAssetInput(type?: AssetType) {
                   <MenuButton
                     button={
                       <Button
-                        fontSize={fontSize}
                         icon={value ? UndoIcon : SearchIcon}
                         iconRight={ChevronDownIcon}
                         mode="ghost"
-                        style={{flex: value ? 1 : 0}}
+                        width={value ? 'fill' : undefined}
                         text={buttonText}
                       />
                     }
@@ -153,7 +153,6 @@ export function SearchFilterAssetInput(type?: AssetType) {
                       <Menu>
                         {assetSources.map((source) => (
                           <MenuItem
-                            fontSize={fontSize}
                             icon={source.icon || ImageIcon}
                             key={source.name}
                             // eslint-disable-next-line react/jsx-no-bind
@@ -174,12 +173,11 @@ export function SearchFilterAssetInput(type?: AssetType) {
                   />
                 ) : (
                   <Button
-                    fontSize={fontSize}
                     icon={value ? UndoIcon : SearchIcon}
                     mode="ghost"
                     // eslint-disable-next-line react/jsx-no-bind
                     onClick={() => handleSelectAssetSource(assetSources[0])}
-                    style={{flex: value ? 1 : 0}}
+                    width={value ? 'fill' : undefined}
                     text={buttonText}
                   />
                 )}
@@ -189,10 +187,9 @@ export function SearchFilterAssetInput(type?: AssetType) {
             {/* Clear selected asset */}
             {value && (
               <Button
-                fontSize={fullscreen ? 2 : 1}
                 mode="ghost"
                 onClick={handleClear}
-                style={{flex: 1}}
+                width="fill"
                 text={t('search.filter-asset-clear')}
                 tone="critical"
               />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/AssetSourceError.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/AssetSourceError.tsx
index eeeda93998c..3a2f5298cf2 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/AssetSourceError.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/AssetSourceError.tsx
@@ -14,7 +14,7 @@ export function AssetSourceError(props: ResponsivePaddingProps) {
           <WarningOutlineIcon />
         </TextWithTone>
         <Stack space={4}>
-          <TextWithTone size={1} tone="caution" weight="semibold">
+          <TextWithTone size={1} tone="caution" weight="medium">
             {t('search.error.no-valid-asset-source-title')}
           </TextWithTone>
           <TextWithTone size={1} tone="caution">
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/FileReferencePreview.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/FileReferencePreview.tsx
index c6e97e9d678..a56f31d05f5 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/FileReferencePreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/FileReferencePreview.tsx
@@ -1,6 +1,6 @@
 import {BinaryDocumentIcon} from '@sanity/icons'
 import type {FileAsset, ReferenceValue} from '@sanity/types'
-import {Card, Flex, LabelSkeleton, Stack, Text} from '@sanity/ui'
+import {Card, Flex, Stack, Text, TextSkeleton} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {formatBytes} from '../../../../../../../../../../form/inputs/common/helper'
 import {observeFileAsset} from '../../../../../../../../../../form/studio/inputs/client-adapters/assets'
@@ -29,6 +29,7 @@ export function FileReferencePreview({reference}: FileReferencePreviewProps) {
 }
 
 function FilePreview({asset}: {asset: FileAsset}) {
+  // todo: consider replacing with <SanityDefaultPreview>
   return (
     <Card padding={2} shadow={1}>
       <Flex align="center" justify="space-between" wrap="nowrap">
@@ -38,7 +39,7 @@ function FilePreview({asset}: {asset: FileAsset}) {
           </Text>
         </Card>
         <Stack flex={1} space={2} marginLeft={3}>
-          <Text size={2} textOverflow="ellipsis" muted>
+          <Text muted size={1} textOverflow="ellipsis" weight="medium">
             {asset?.originalFilename || asset._id}
           </Text>
           <Text size={1} muted>
@@ -60,8 +61,8 @@ function FileSkeleton() {
           </Text>
         </Card>
         <Stack flex={1} space={2} marginLeft={3}>
-          <LabelSkeleton animated style={{width: '100%'}} radius={1} />
-          <LabelSkeleton animated style={{width: '100%'}} radius={1} />
+          <TextSkeleton animated style={{width: '100%'}} radius={1} />
+          <TextSkeleton animated style={{width: '100%'}} radius={1} />
         </Stack>
       </Flex>
     </Card>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx
index 3aa792f8f6f..ea29990a974 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx
@@ -1,10 +1,11 @@
 import type {ImageAsset, ReferenceValue} from '@sanity/types'
-import {Card, Flex, Spinner} from '@sanity/ui'
+import {Card} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import styled from 'styled-components'
 import {observeImageAsset} from '../../../../../../../../../../form/studio/inputs/client-adapters/assets'
 import {WithReferencedAsset} from '../../../../../../../../../../form/utils/WithReferencedAsset'
 import {useDocumentPreviewStore} from '../../../../../../../../../../store'
+import {LoadingBlock} from '../../../../../../../../../../../ui/loadingBlock'
 
 interface ImageReferencePreviewProps {
   reference: ReferenceValue
@@ -25,12 +26,6 @@ const Image = styled.img`
   object-fit: contain;
 `
 
-const SpinnerFlex = styled(Flex)`
-  height: 100%;
-  position: absolute;
-  width: 100%;
-`
-
 export function ImageReferencePreview({reference}: ImageReferencePreviewProps) {
   const documentPreviewStore = useDocumentPreviewStore()
   const observeAsset = useCallback(
@@ -51,11 +46,7 @@ function ImagePreview({asset}: {asset: ImageAsset}) {
 
   return (
     <Container __unstable_checkered border>
-      {!loaded && (
-        <SpinnerFlex align="center" justify="center">
-          <Spinner />
-        </SpinnerFlex>
-      )}
+      {!loaded && <LoadingBlock fill />}
       <Image onLoad={handleLoad} src={imageUrl} />
     </Container>
   )
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
index 4dc0a529d51..4a7c745a468 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
@@ -1,6 +1,4 @@
-import {hues} from '@sanity/color'
-import {ErrorOutlineIcon} from '@sanity/icons'
-import {Flex, Text, Theme, Tooltip} from '@sanity/ui'
+import {Theme} from '@sanity/ui'
 import {format, isValid, parse} from 'date-fns'
 import React, {
   ChangeEvent,
@@ -12,6 +10,7 @@ import React, {
   useState,
 } from 'react'
 import styled, {css} from 'styled-components'
+import {Tooltip, TooltipWithNodes} from '../../../../../../../../../../ui'
 import {Translate, useTranslation} from '../../../../../../../../../i18n'
 import {CustomTextInput} from '../../../../common/CustomTextInput'
 import {getDateISOString} from './utils/getDateISOString'
@@ -51,16 +50,13 @@ const FORMAT: Record<
   },
 }
 
+// @todo: remove usage
 const Emphasis = styled.span(({theme}: {theme: Theme}) => {
   return css`
     font-weight: ${theme.sanity.fonts.text.weights.medium};
   `
 })
 
-const IconTextCritical = styled(Text)`
-  color: ${hues.red[500].hex};
-`
-
 export function ParsedDateTextInput({
   isDateTime,
   onChange,
@@ -160,45 +156,33 @@ export function ParsedDateTextInput({
   }, [dateFormat, processInputString, isDateTimeFormat, value])
 
   return (
-    <Tooltip
+    <TooltipWithNodes
       content={
-        <Flex gap={2}>
-          <IconTextCritical size={1}>
-            <ErrorOutlineIcon />
-          </IconTextCritical>
-          <Text muted size={1}>
-            <Translate
-              t={t}
-              i18nKey="calendar.error.must-be-in-format"
-              components={{Emphasis}}
-              values={{
-                exampleDate: isDateTimeFormat
-                  ? FORMAT.datetime.exampleDate
-                  : FORMAT.date.exampleDate,
-              }}
-            />
-          </Text>
-        </Flex>
+        <Translate
+          t={t}
+          i18nKey="calendar.error.must-be-in-format"
+          components={{Emphasis}}
+          values={{
+            exampleDate: isDateTimeFormat ? FORMAT.datetime.exampleDate : FORMAT.date.exampleDate,
+          }}
+        />
       }
       disabled={!customValidity}
-      padding={3}
       placement="top"
       portal
     >
       {/* HACK: Wrapping element required for <Tooltip> to function */}
-      <div>
-        <CustomTextInput
-          {...rest}
-          clearButton={!!inputValue}
-          customValidity={customValidity}
-          onBlur={handleTextInputBlur}
-          onChange={handleTextInputChange}
-          onClear={handleTextInputClear}
-          onKeyDown={handleTextInputKeyDown}
-          placeholder={formattedPlaceholder}
-          value={inputValue}
-        />
-      </div>
-    </Tooltip>
+      <CustomTextInput
+        {...rest}
+        clearButton={!!inputValue}
+        customValidity={customValidity}
+        onBlur={handleTextInputBlur}
+        onChange={handleTextInputChange}
+        onClear={handleTextInputClear}
+        onKeyDown={handleTextInputKeyDown}
+        placeholder={formattedPlaceholder}
+        value={inputValue}
+      />
+    </TooltipWithNodes>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/Calendar.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/Calendar.tsx
index fe973982f4f..81d2f9971aa 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/Calendar.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/Calendar.tsx
@@ -194,11 +194,7 @@ export function Calendar(props: CalendarProps) {
         {/* Select month and year */}
         <Flex>
           <Box flex={1}>
-            <CalendarHeader
-              fontSize={fontSize}
-              moveFocusedDate={moveFocusedDate}
-              onNowClick={handleNowClick}
-            />
+            <CalendarHeader moveFocusedDate={moveFocusedDate} onNowClick={handleNowClick} />
           </Box>
         </Flex>
 
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx
index 325468615d3..9670cba238f 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx
@@ -1,13 +1,13 @@
 import {upperFirst} from 'lodash'
 import {ChevronLeftIcon, ChevronRightIcon} from '@sanity/icons'
-import {Box, Button, Flex, Inline, Text} from '@sanity/ui'
+import {Box, Flex, Inline, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
+import {Button} from '../../../../../../../../../../../../ui'
 import {useTranslation} from '../../../../../../../../../../../i18n'
 import {useDateTimeFormat} from '../../../../../../../../../../../hooks/useDateTimeFormat'
 import {useCalendar} from './contexts/useDatePicker'
 
 export function CalendarHeader(props: {
-  fontSize?: number
   moveFocusedDate: (by: number) => void
   onNowClick: () => void
 }) {
@@ -15,7 +15,7 @@ export function CalendarHeader(props: {
   const monthFormatter = useDateTimeFormat({month: 'long', year: 'numeric'})
   const {focusedDate} = useCalendar()
 
-  const {fontSize, moveFocusedDate, onNowClick} = props
+  const {moveFocusedDate, onNowClick} = props
 
   const handlePrevMonthClick = useCallback(() => moveFocusedDate(-1), [moveFocusedDate])
 
@@ -30,22 +30,21 @@ export function CalendarHeader(props: {
       <Box>
         <Button
           aria-label={t('calendar.action.go-to-today-aria-label')}
-          fontSize={fontSize}
           mode="bleed"
           onClick={onNowClick}
           text={t('calendar.action.go-to-today')}
         />
         <Button
-          aria-label={t('calendar.action.go-to-previous-month')}
           icon={ChevronLeftIcon}
           mode="bleed"
           onClick={handlePrevMonthClick}
+          tooltipProps={{content: t('calendar.action.go-to-previous-month')}}
         />
         <Button
-          aria-label={t('calendar.action.go-to-next-month')}
           icon={ChevronRightIcon}
           mode="bleed"
           onClick={handleNextMonthClick}
+          tooltipProps={{content: t('calendar.action.go-to-next-month')}}
         />
       </Box>
     </Flex>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/Reference.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/Reference.tsx
index 154c552b6bc..6e87bb558c4 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/Reference.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/Reference.tsx
@@ -1,6 +1,7 @@
 import {isArraySchemaType, isReferenceSchemaType, ReferenceValue} from '@sanity/types'
-import {Box, Button, Card, Stack} from '@sanity/ui'
+import {Box, Card, Stack} from '@sanity/ui'
 import React, {useCallback, useMemo} from 'react'
+import {Button} from '../../../../../../../../../../ui'
 import {useSchema} from '../../../../../../../../../hooks'
 import {SearchableType} from '../../../../../../../../../search'
 import {useSearchState} from '../../../../../contexts/search/useSearchState'
@@ -17,7 +18,7 @@ export function SearchFilterReferenceInput({
 }: OperatorInputComponentProps<ReferenceValue>) {
   const {
     onClose,
-    state: {documentTypesNarrowed, fullscreen},
+    state: {documentTypesNarrowed},
   } = useSearchState()
   const schema = useSchema()
   const {t} = useTranslation()
@@ -68,14 +69,13 @@ export function SearchFilterReferenceInput({
         <Stack space={3}>
           <Card padding={1} radius={1} shadow={1}>
             <SearchResultItem
-              compact
               documentId={value._ref}
               documentType={value._type}
+              layout="compact"
               onClick={handleClick}
             />
           </Card>
           <Button
-            fontSize={fullscreen ? 2 : 1}
             mode="ghost"
             onClick={handleClear}
             text={t('search.filter-reference-clear')}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx
index b3a8df8ba0c..16d8a2fcd5d 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx
@@ -142,10 +142,10 @@ export const ReferenceAutocomplete = forwardRef(function ReferenceAutocomplete(
     const documentType = option.hit.hit._type
     return (
       <SearchResultItem
-        compact
         disableIntentLink
         documentId={option.value}
         documentType={documentType}
+        layout="compact"
       />
     )
   }, [])
@@ -177,6 +177,7 @@ export const ReferenceAutocomplete = forwardRef(function ReferenceAutocomplete(
                   )}
             </div>
           }
+          fallbackPlacements={['bottom', 'bottom-end']}
           matchReferenceWidth
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
index d40305c413a..6f41f6dc7b4 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
@@ -1,6 +1,6 @@
-import {SelectIcon} from '@sanity/icons'
+import {ChevronDownIcon} from '@sanity/icons'
 import {isTitledListValue, StringOptions, TitledListValue} from '@sanity/types'
-import {Box, Button, Code, Flex, Menu, MenuButton, MenuItem, Stack, Text} from '@sanity/ui'
+import {Menu, MenuButton} from '@sanity/ui'
 import {capitalize, uniq} from 'lodash'
 import React, {useCallback, useId, useMemo} from 'react'
 import {useSchema} from '../../../../../../../../../hooks'
@@ -8,6 +8,7 @@ import {isNonNullable} from '../../../../../../../../../util'
 import {useSearchState} from '../../../../../contexts/search/useSearchState'
 import {OperatorInputComponentProps} from '../../../../../definitions/operators/operatorTypes'
 import {getSchemaField} from '../../../../../utils/getSchemaField'
+import {Button, MenuItem} from '../../../../../../../../../../ui'
 import {useTranslation} from '../../../../../../../../../i18n'
 
 interface TitledListValueGroup extends Omit<TitledListValue<number | string>, 'title'> {
@@ -28,20 +29,13 @@ function CustomMenuItem({
   const handleClick = useCallback(() => onClick(value), [onClick, value])
 
   return (
-    <MenuItem onClick={handleClick} padding={3} pressed={selected} tone="default">
-      <Flex align="center" justify="space-between" gap={3}>
-        <Stack paddingRight={2} space={2}>
-          <Text size={1} weight="regular">
-            {title}
-          </Text>
-          {value && (
-            <Code muted size={0}>
-              {value}
-            </Code>
-          )}
-        </Stack>
-      </Flex>
-    </MenuItem>
+    <MenuItem
+      onClick={handleClick}
+      pressed={selected}
+      tone="default"
+      text={title}
+      subtitle={value ? `${value}` : undefined}
+    />
   )
 }
 
@@ -110,18 +104,11 @@ export function SearchFilterStringListInput({
   return (
     <MenuButton
       button={
-        <Button mode="ghost" padding={3}>
-          <Flex align="center" gap={2} justify="space-between">
-            <Text size={1} weight="regular">
-              {value ? value : t('search.filter-string-value-select-predefined-value')}
-            </Text>
-            <Box marginLeft={1}>
-              <Text size={1}>
-                <SelectIcon />
-              </Text>
-            </Box>
-          </Flex>
-        </Button>
+        <Button
+          mode="ghost"
+          iconRight={ChevronDownIcon}
+          text={value ? String(value) : t('search.filter-string-value-select-predefined-value')}
+        />
       }
       id={menuButtonId || ''}
       menu={
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/RecentSearches.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/RecentSearches.tsx
index ca32c20face..db0a202e589 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/RecentSearches.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/RecentSearches.tsx
@@ -1,4 +1,4 @@
-import {Box, Button, Card, Label, Text, useMediaIndex} from '@sanity/ui'
+import {Box, Card, Text, useMediaIndex} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import styled from 'styled-components'
 import {
@@ -6,6 +6,7 @@ import {
   CommandListHandle,
   CommandListRenderItemCallback,
 } from '../../../../../../components'
+import {Button} from '../../../../../../../ui'
 import {useSearchState} from '../../contexts/search/useSearchState'
 import {RecentSearch} from '../../datastores/recentSearches'
 import {Instructions} from '../Instructions'
@@ -80,9 +81,9 @@ export function RecentSearches({inputElement}: RecentSearchesProps) {
       {recentSearches.length > 0 ? (
         <>
           <Box paddingBottom={2} paddingTop={4} paddingX={3}>
-            <Label muted size={1}>
+            <Text muted size={1} weight="medium">
               {t('search.recent-searches-label')}
-            </Label>
+            </Text>
           </Box>
           <Box>
             <CommandList
@@ -99,17 +100,12 @@ export function RecentSearches({inputElement}: RecentSearchesProps) {
           </Box>
           <Box paddingBottom={2} paddingTop={1} paddingX={2}>
             <Button
-              fontSize={1}
-              justify="flex-start"
               mode="bleed"
               onClick={handleClearRecentSearchesClick}
-              padding={2}
               tone="default"
-            >
-              <Text muted size={1}>
-                {t('search.action.clear-recent-searches')}
-              </Text>
-            </Button>
+              text={t('search.action.clear-recent-searches')}
+              muted
+            />
           </Box>
         </>
       ) : (
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/item/RecentSearchItem.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/item/RecentSearchItem.tsx
index 1768cdc5c83..17511be4ede 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/item/RecentSearchItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/item/RecentSearchItem.tsx
@@ -1,13 +1,14 @@
 import {ClockIcon, CloseIcon} from '@sanity/icons'
 import {
   Box,
-  Button,
   Flex,
   Inline,
   rem,
   ResponsiveMarginProps,
   ResponsivePaddingProps,
   Text,
+  // eslint-disable-next-line no-restricted-imports
+  Button, // Button with specific styling and children behavior.
 } from '@sanity/ui'
 import React, {MouseEvent, useCallback} from 'react'
 import styled from 'styled-components'
@@ -34,7 +35,7 @@ const SearchItemPillsBox = styled(Box)`
   flex-shrink: 3;
 `
 
-const SearchItemQueryBox = styled(Box)`
+const SearchItemQueryFlex = styled(Flex)`
   flex-shrink: 2;
 `
 
@@ -107,11 +108,11 @@ export function RecentSearchItem({
           <Flex align="stretch" flex={1} gap={2} justify="flex-start" marginLeft={3} wrap="wrap">
             {/* Text query */}
             {value.query && (
-              <SearchItemQueryBox paddingY={2}>
-                <Text muted textOverflow="ellipsis">
+              <SearchItemQueryFlex align="center" paddingY={2}>
+                <Text muted size={1} textOverflow="ellipsis" weight="medium">
                   {value.query}
                 </Text>
-              </SearchItemQueryBox>
+              </SearchItemQueryFlex>
             )}
             {/* Document type */}
             {value.types.length > 0 && (
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
index cbcbe2ac0dc..2b6df455729 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable i18next/no-literal-string,@sanity/i18n/no-attribute-string-literals */
-import {Box, Card, CardTone, Code, Inline, Stack, Tooltip} from '@sanity/ui'
+import {Card, CardTone, Code, Inline, Stack} from '@sanity/ui'
 import React from 'react'
 import styled from 'styled-components'
+import {TooltipWithNodes} from '../../../../../../../../ui'
 import type {WeightedHit} from '../../../../../../../search'
 
 interface DebugScoreProps {
@@ -29,26 +30,24 @@ export function DebugOverlay({data}: DebugScoreProps) {
 
   return (
     <>
-      <Tooltip
+      <TooltipWithNodes
         content={
-          <Box padding={2}>
-            <Stack space={2}>
-              {matchingStories.length ? (
-                <>
-                  {matchingStories.map((story) => (
-                    <Inline key={story.path} space={3}>
-                      <Code size={0} weight="semibold">
-                        {story.path}
-                      </Code>
-                      <Code size={0}>{story.why}</Code>
-                    </Inline>
-                  ))}
-                </>
-              ) : (
-                <Code size={0}>No matches</Code>
-              )}
-            </Stack>
-          </Box>
+          <Stack space={2}>
+            {matchingStories.length ? (
+              <>
+                {matchingStories.map((story) => (
+                  <Inline key={story.path} space={3}>
+                    <Code size={0} weight="medium">
+                      {story.path}
+                    </Code>
+                    <Code size={0}>{story.why}</Code>
+                  </Inline>
+                ))}
+              </>
+            ) : (
+              <Code size={0}>No matches</Code>
+            )}
+          </Stack>
         }
         placement="bottom-start"
         portal
@@ -56,7 +55,7 @@ export function DebugOverlay({data}: DebugScoreProps) {
         <DebugScoreCard padding={1} shadow={1} tone={tone}>
           <Code size={0}>score: {score}</Code>
         </DebugScoreCard>
-      </Tooltip>
+      </TooltipWithNodes>
     </>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx
index 33f941e196f..3b309311a69 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx
@@ -1,24 +1,24 @@
 import {Box, ResponsiveMarginProps, ResponsivePaddingProps} from '@sanity/ui'
 import React, {MouseEvent, useCallback, useMemo} from 'react'
-import {PreviewCard} from '../../../../../../../components'
+import {GeneralPreviewLayoutKey, PreviewCard} from '../../../../../../../components'
 import {useSchema} from '../../../../../../../hooks'
 import {useDocumentPresence} from '../../../../../../../store'
 import SearchResultItemPreview from './SearchResultItemPreview'
 import {useIntentLink} from 'sanity/router'
 
 interface SearchResultItemProps extends ResponsiveMarginProps, ResponsivePaddingProps {
-  compact?: boolean
   disableIntentLink?: boolean
   documentId: string
   documentType: string
+  layout?: GeneralPreviewLayoutKey
   onClick?: () => void
 }
 
 export function SearchResultItem({
-  compact,
   disableIntentLink,
   documentId,
   documentType,
+  layout,
   onClick,
   ...rest
 }: SearchResultItemProps) {
@@ -52,12 +52,12 @@ export function SearchResultItem({
         flex={1}
         href={disableIntentLink ? undefined : href}
         onClick={handleClick}
-        padding={compact ? 1 : 2}
         radius={2}
         tabIndex={-1}
       >
         <SearchResultItemPreview
           documentId={documentId}
+          layout={layout}
           presence={documentPresence}
           schemaType={type}
         />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
index 800af68c3d9..828f9aac4e9 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
@@ -1,6 +1,6 @@
 import type {SanityDocument} from '@sanity/client'
 import type {SchemaType} from '@sanity/types'
-import {Box, Inline, Label} from '@sanity/ui'
+import {Badge, Box, Inline} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import {useMemoObservable} from 'react-rx'
 import styled from 'styled-components'
@@ -11,9 +11,11 @@ import {
   SanityDefaultPreview,
 } from '../../../../../../../preview'
 import {DocumentPresence, useDocumentPreviewStore} from '../../../../../../../store'
+import {GeneralPreviewLayoutKey} from '../../../../../../../components'
 
 interface SearchResultItemPreviewProps {
   documentId: string
+  layout?: GeneralPreviewLayoutKey
   presence?: DocumentPresence[]
   schemaType: SchemaType
 }
@@ -30,12 +32,9 @@ const SearchResultItemPreviewBox = styled(Box)`
   }
 `
 
-const TypeLabel = styled(Label)`
-  max-width: 150px;
-`
-
 export default function SearchResultItemPreview({
   documentId,
+  layout,
   presence,
   schemaType,
 }: SearchResultItemPreviewProps) {
@@ -60,9 +59,7 @@ export default function SearchResultItemPreview({
     return (
       <Inline space={3}>
         {presence && presence.length > 0 && <DocumentPreviewPresence presence={presence} />}
-        <TypeLabel size={0} muted textOverflow="ellipsis">
-          {schemaType.title}
-        </TypeLabel>
+        <Badge mode="outline">{schemaType.title}</Badge>
       </Inline>
     )
   }, [isLoading, presence, schemaType.title])
@@ -76,7 +73,7 @@ export default function SearchResultItemPreview({
           value: sanityDocument,
         })}
         isPlaceholder={isLoading ?? true}
-        layout="default"
+        layout={layout || 'default'}
         icon={schemaType.icon}
         status={status}
       />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/constants.ts b/packages/sanity/src/core/studio/components/navbar/search/constants.ts
index 29f91bd9e6a..2c1482c45de 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/constants.ts
+++ b/packages/sanity/src/core/studio/components/navbar/search/constants.ts
@@ -24,4 +24,4 @@ export const POPOVER_MAX_WIDTH = 800 // px
 // Custom space between buttons and popover content
 export const POPOVER_VERTICAL_MARGIN = 5 // px
 
-export const POPOVER_RADIUS = 2
+export const POPOVER_RADIUS = 3
diff --git a/packages/sanity/src/core/studio/components/navbar/search/definitions/defaultFilters.ts b/packages/sanity/src/core/studio/components/navbar/search/definitions/defaultFilters.ts
index a5001650b35..656617c008e 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/definitions/defaultFilters.ts
+++ b/packages/sanity/src/core/studio/components/navbar/search/definitions/defaultFilters.ts
@@ -2,11 +2,11 @@ import {
   BlockContentIcon,
   CalendarIcon,
   CheckmarkCircleIcon,
+  ChevronDownIcon,
   DocumentIcon,
   ImageIcon,
   LinkIcon,
   NumberIcon,
-  SelectIcon,
   StringIcon,
   UlistIcon,
 } from '@sanity/icons'
@@ -301,7 +301,7 @@ export const filterDefinitions: SearchFilterDefinition[] = [
   }),
   defineSearchFilter<SearchOperatorType>({
     fieldType: 'string',
-    icon: SelectIcon,
+    icon: ChevronDownIcon,
     name: 'stringList',
     operators: [
       {name: 'stringListEqual', type: 'item'},
diff --git a/packages/sanity/src/core/studio/components/navbar/search/index.ts b/packages/sanity/src/core/studio/components/navbar/search/index.ts
index 9d0a75928c1..3d1415b6d07 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/index.ts
+++ b/packages/sanity/src/core/studio/components/navbar/search/index.ts
@@ -1,5 +1,5 @@
+export * from './SearchButton'
 export * from './SearchDialog'
-export * from './SearchField'
 
 export {
   type SearchFilterDefinition,
diff --git a/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx b/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx
index ae4cf0a518f..1ca51db2084 100644
--- a/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx
@@ -1,10 +1,12 @@
-import {UnknownIcon} from '@sanity/icons'
 import React, {forwardRef, useMemo, useState} from 'react'
 import {startCase} from 'lodash'
-import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
+import {Flex} from '@sanity/ui'
+import styled from 'styled-components'
+import {CollapseTabList} from '../../../../components/collapseTabList/CollapseTabList'
 import {useRovingFocus} from '../../../../components'
 import {useColorScheme} from '../../../colorScheme'
 import {Tool} from '../../../../config'
+import {Button} from '../../../../../ui'
 import {ToolLink, ToolLinkProps} from './ToolLink'
 import {getToolButtonWrapperElement} from './getToolButtonWrapperElement'
 
@@ -13,6 +15,10 @@ interface ToolCollapseMenuProps {
   tools: Tool[]
 }
 
+const CollapseTabListWrapper = styled(Flex)`
+  margin: 0 80px;
+`
+
 export function ToolCollapseMenu(props: ToolCollapseMenuProps) {
   const {activeToolName, tools} = props
   const {scheme} = useColorScheme()
@@ -33,11 +39,10 @@ export function ToolCollapseMenu(props: ToolCollapseMenuProps) {
     }),
     [scheme],
   )
-
   const children = useMemo(
     () =>
       tools.map((tool, index) => {
-        const title = tool?.title || startCase(tool.name) || undefined
+        const title = tool?.title || startCase(tool.name)
 
         const Link = forwardRef(function Link(
           linkProps: ToolLinkProps,
@@ -53,31 +58,30 @@ export function ToolCollapseMenu(props: ToolCollapseMenuProps) {
         })
 
         return (
-          <CollapseMenuButton
+          <Button
             as={Link}
-            collapsedProps={{tooltipText: tool.title}}
             data-as="a"
-            icon={tool.icon || UnknownIcon}
             // eslint-disable-next-line react/no-array-index-key
             key={`${tool.name}-${index}`}
             mode="bleed"
             selected={activeToolName === tool.name}
             text={title}
-            tooltipProps={{scheme: scheme}}
           />
         )
       }),
-    [activeToolName, scheme, tools],
+    [activeToolName, tools],
   )
 
   return (
-    <CollapseMenu
-      data-testid="tool-collapse-menu"
-      gap={1}
-      menuButtonProps={menuButtonProps}
-      ref={setCollapseMenuEl}
-    >
-      {children}
-    </CollapseMenu>
+    <CollapseTabListWrapper justify="center">
+      <CollapseTabList
+        data-testid="tool-collapse-menu"
+        gap={1}
+        menuButtonProps={menuButtonProps}
+        ref={setCollapseMenuEl}
+      >
+        {children}
+      </CollapseTabList>
+    </CollapseTabListWrapper>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx b/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx
index 7667ab48db8..752ea319866 100644
--- a/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx
@@ -1,7 +1,7 @@
-import {PlugIcon} from '@sanity/icons'
-import {Button, Stack} from '@sanity/ui'
+import {Stack} from '@sanity/ui'
 import {startCase} from 'lodash'
 import React, {forwardRef, useMemo} from 'react'
+import {Button} from '../../../../../ui'
 import {Tool} from '../../../../config'
 import {ToolLink, ToolLinkProps} from './ToolLink'
 import {getToolButtonWrapperElement} from './getToolButtonWrapperElement'
@@ -19,7 +19,7 @@ export function ToolVerticalMenu(props: ToolVerticalMenuProps) {
     () => (
       <Stack as="ul" space={1}>
         {tools.map((tool) => {
-          const title = tool?.title || startCase(tool.name) || undefined
+          const title = tool?.title || startCase(tool.name)
 
           const Link = forwardRef(function Link(
             linkProps: ToolLinkProps,
@@ -38,7 +38,6 @@ export function ToolVerticalMenu(props: ToolVerticalMenuProps) {
             <Stack as="li" key={tool.name}>
               <Button
                 as={Link}
-                icon={tool.icon || PlugIcon}
                 justify="flex-start"
                 mode="bleed"
                 selected={activeToolName === tool.name}
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx
index 453d0c50942..593f2a4de35 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx
@@ -1,13 +1,12 @@
-import {Box, Label, MenuDivider, MenuItem} from '@sanity/ui'
+import {MenuDivider} from '@sanity/ui'
 import React, {useCallback} from 'react'
-import {useTranslation} from '../../../../i18n'
 import {useLocale} from '../../../../i18n/hooks/useLocale'
+import {MenuItem} from '../../../../../ui'
 
 const LOCALE_SELECTION_DISABLED = true
 
 export function LocaleMenu() {
   const {changeLocale, currentLocale, locales} = useLocale()
-  const {t} = useTranslation()
 
   if (LOCALE_SELECTION_DISABLED) {
     return null
@@ -21,12 +20,6 @@ export function LocaleMenu() {
     <>
       <MenuDivider />
 
-      <Box padding={2}>
-        <Label size={1} muted>
-          {t('user-menu.locale-title')}
-        </Label>
-      </Box>
-
       {locales.map((item) => (
         <LocaleItem
           key={item.id}
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
index 0a41206af2a..670ff43e7f7 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -1,18 +1,16 @@
-import {CheckmarkIcon, ChevronDownIcon, CogIcon, LeaveIcon, UsersIcon} from '@sanity/icons'
+import {CheckmarkIcon, CogIcon, LeaveIcon, UsersIcon} from '@sanity/icons'
 import {
   Box,
-  Button,
   Card,
   Flex,
-  Label,
   Menu,
   MenuButton,
   MenuButtonProps,
   MenuDivider,
-  MenuItem,
   Stack,
   Text,
-  Tooltip,
+  // eslint-disable-next-line no-restricted-imports
+  Button, // Button with specific styling, user avatar .
 } from '@sanity/ui'
 import React, {useMemo} from 'react'
 import styled from 'styled-components'
@@ -26,6 +24,7 @@ import {
 } from '../../../colorScheme'
 import {useWorkspace} from '../../../workspace'
 import {userHasRole} from '../../../../util/userHasRole'
+import {MenuItem, Tooltip} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 import {LoginProviderLogo} from './LoginProviderLogo'
 import {LocaleMenu} from './LocaleMenu'
@@ -52,12 +51,6 @@ function AppearanceMenu({setScheme}: {setScheme: (nextScheme: StudioThemeColorSc
     <>
       <MenuDivider />
 
-      <Box padding={2}>
-        <Label size={1} muted>
-          {t('user-menu.appearance-title')}
-        </Label>
-      </Box>
-
       {options.map(({icon, label, name, onSelect, selected, title}) => (
         <MenuItem
           key={name}
@@ -97,30 +90,22 @@ export function UserMenu() {
   return (
     <MenuButton
       button={
-        <Button mode="bleed" padding={0} paddingX={1}>
+        <Button mode="bleed" padding={0} paddingLeft={2} paddingRight={1}>
           <Flex align="center" gap={1}>
-            <UserAvatar user="me" size={1} />
-            <Text size={AVATAR_SIZE} muted>
-              <ChevronDownIcon />
-            </Text>
+            <UserAvatar size={1} user="me" />
+            <Text size={AVATAR_SIZE} muted />
           </Flex>
         </Button>
       }
       id="user-menu"
       menu={
         <StyledMenu>
-          <Card padding={2}>
+          <Card padding={3}>
             <Flex align="center">
               <Tooltip
                 disabled={!providerTitle}
                 portal
-                content={
-                  providerTitle && (
-                    <Box padding={2}>
-                      <Text size={1}>{t('user-menu.login-provider', {providerTitle})}</Text>
-                    </Box>
-                  )
-                }
+                content={t('user-menu.login-provider', {providerTitle})}
               >
                 <AvatarBox marginRight={3}>
                   <UserAvatar size={AVATAR_SIZE} user="me" />
@@ -129,7 +114,7 @@ export function UserMenu() {
               </Tooltip>
 
               <Stack space={2} flex={1}>
-                <Text size={2} weight="medium" textOverflow="ellipsis">
+                <Text size={1} weight="medium" textOverflow="ellipsis">
                   {currentUser?.name}
                 </Text>
 
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx
index 9a75b1aaeb4..4582c54fe10 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx
@@ -1,12 +1,13 @@
-import {Box, Button, Card, Flex, Stack} from '@sanity/ui'
+import {Box, Card, Flex, Stack} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {omit} from 'lodash'
 import {AddIcon, ArrowLeftIcon, ChevronRightIcon} from '@sanity/icons'
+import {Button} from '../../../../../../ui'
+import {LoadingBlock} from '../../../../../../ui/loadingBlock'
 import {useActiveWorkspace} from '../../../../activeWorkspaceMatcher'
 import {useWorkspaces} from '../../../../workspaces'
 import {WorkspacePreview} from '../WorkspacePreview'
 import {useWorkspaceAuthStates} from '../hooks'
-import {LoadingScreen} from '../../../../screens'
 import {WORKSPACES_DOCS_URL} from '../constants'
 import {useTranslation} from '../../../../../i18n'
 import {Layout} from './Layout'
@@ -27,7 +28,7 @@ export function WorkspaceAuth() {
   const handleBack = useCallback(() => setSelectedWorkspaceName(null), [])
   const {t} = useTranslation()
 
-  if (!authStates) return <LoadingScreen />
+  if (!authStates) return <LoadingBlock />
 
   if (LoginComponent && selectedWorkspace) {
     return (
@@ -35,11 +36,9 @@ export function WorkspaceAuth() {
         {workspaces.length > 1 && (
           <Flex>
             <Button
-              fontSize={1}
               icon={ArrowLeftIcon}
               mode="bleed"
               onClick={handleBack}
-              padding={2}
               text={t('workspaces.action.choose-another-workspace')}
             />
           </Flex>
@@ -76,9 +75,9 @@ export function WorkspaceAuth() {
             as="a"
             href={WORKSPACES_DOCS_URL}
             icon={AddIcon}
-            justify="flex-start"
             mode="bleed"
             rel="noopener noreferrer"
+            size="large"
             target="__blank"
             text={t('workspaces.action.add-workspace')}
           />
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
index 7d7ea845275..87bf885fb04 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
@@ -1,137 +1,157 @@
-import {SelectIcon} from '@sanity/icons'
+import {CheckmarkIcon, ChevronDownIcon} from '@sanity/icons'
 import {
+  Box,
+  // eslint-disable-next-line no-restricted-imports
   Button,
   MenuButton,
-  MenuItem,
   Menu,
   MenuButtonProps,
-  Box,
-  Label,
-  Tooltip,
+  Flex,
+  Card,
   Text,
-  Stack,
 } from '@sanity/ui'
-import React, {useCallback, useMemo, useState} from 'react'
+import React, {useMemo} from 'react'
 import styled from 'styled-components'
 import {useTranslation} from '../../../../i18n'
 import {useActiveWorkspace} from '../../../activeWorkspaceMatcher'
-import {useColorScheme} from '../../../colorScheme'
 import {useWorkspaces} from '../../../workspaces'
+import {MenuItem} from '../../../../../ui'
+import {SanityLogo} from '../SanityLogo'
 import {useWorkspaceAuthStates} from './hooks'
-import {WorkspacePreview} from './WorkspacePreview'
-import {useRouter} from 'sanity/router'
+import {STATE_TITLES, WorkspacePreviewIcon} from './WorkspacePreview'
+import {useRouter, useStateLink} from 'sanity/router'
 
 const StyledMenu = styled(Menu)`
   max-width: 350px;
   min-width: 250px;
 `
 
-interface WorkspaceMenuButtonProps {
-  collapsed?: boolean
-}
+const LOGO_MARK_SIZE = 25 // width and height, px
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {constrainSize: true}
+
+const LogoMarkContainer = styled(Card).attrs({
+  overflow: 'hidden',
+  radius: 2,
+})`
+  height: ${LOGO_MARK_SIZE}px;
+  width: ${LOGO_MARK_SIZE}px;
+`
 
-export function WorkspaceMenuButton(props: WorkspaceMenuButtonProps) {
-  const {collapsed = false} = props
-  const [menuOpen, setMenuOpen] = useState<boolean>(false)
-  const {scheme} = useColorScheme()
+export function WorkspaceMenuButton() {
   const workspaces = useWorkspaces()
   const {activeWorkspace, setActiveWorkspace} = useActiveWorkspace()
   const [authStates] = useWorkspaceAuthStates(workspaces)
   const {navigateUrl} = useRouter()
   const {t} = useTranslation()
 
-  const handleOnOpen = useCallback(() => setMenuOpen(true), [])
-  const handleOnClose = useCallback(() => setMenuOpen(false), [])
+  const multipleWorkspaces = workspaces.length > 1
 
-  const popoverProps: MenuButtonProps['popover'] = useMemo(
-    () => ({constrainSize: true, scheme, portal: true}),
-    [scheme],
-  )
-  // Tooltip should be disabled in the Navdrawer
-  const tooltipDisabled = menuOpen || !collapsed
-  const ariaLabel = collapsed ? t('workspaces.select-workspace-aria-label') : undefined
-  const buttonText = collapsed ? undefined : t('workspaces.select-workspace-label')
+  const {href: rootHref, onClick: handleRootClick} = useStateLink({state: {}})
 
-  return (
-    <Tooltip
-      content={
-        <Box padding={2}>
-          <Text size={1}>{t('workspaces.title')}</Text>
-        </Box>
-      }
-      disabled={tooltipDisabled}
-      placement="bottom"
-      portal
-      scheme={scheme}
-    >
-      <Stack>
-        <MenuButton
-          button={
-            <Button
-              icon={SelectIcon}
-              mode="bleed"
-              text={buttonText}
-              disabled={!authStates}
-              aria-label={ariaLabel}
-              justify={collapsed ? undefined : 'flex-start'}
-            />
-          }
-          id="workspaces"
-          menu={
-            <StyledMenu>
-              <Box paddingX={3} paddingY={3}>
-                <Label size={1} muted>
-                  {t('workspaces.title')}
-                </Label>
-              </Box>
+  // TODO: add conditional tooltip
+  const button = useMemo(() => {
+    return (
+      <Button
+        aria-label={
+          multipleWorkspaces ? t('workspaces.select-workspace-aria-label') : activeWorkspace.title
+        }
+        disabled={!authStates}
+        href={multipleWorkspaces ? undefined : rootHref}
+        onClick={multipleWorkspaces ? undefined : handleRootClick}
+        mode="bleed"
+        padding={0}
+        paddingRight={2}
+      >
+        <Flex align="center" gap={2}>
+          <LogoMarkContainer>
+            <Flex align="center" height="fill" justify="center">
+              {/* Display the Sanity logo only if one workspace is active and no custom icon is defined */}
+              {multipleWorkspaces || activeWorkspace.customIcon ? (
+                <WorkspacePreviewIcon icon={activeWorkspace.icon} size="small" />
+              ) : (
+                <SanityLogo />
+              )}
+            </Flex>
+          </LogoMarkContainer>
+          <Box>
+            <Text size={1} weight="medium">
+              {activeWorkspace.title}
+            </Text>
+          </Box>
+          {multipleWorkspaces && (
+            <Text size={1}>
+              <ChevronDownIcon />
+            </Text>
+          )}
+        </Flex>
+      </Button>
+    )
+  }, [
+    activeWorkspace.customIcon,
+    activeWorkspace.icon,
+    activeWorkspace.title,
+    authStates,
+    handleRootClick,
+    multipleWorkspaces,
+    rootHref,
+    t,
+  ])
 
-              {authStates &&
-                workspaces.map((workspace) => {
-                  const authState = authStates[workspace.name]
+  if (!multipleWorkspaces) {
+    return button
+  }
 
-                  // eslint-disable-next-line no-nested-ternary
-                  const state = authState.authenticated
-                    ? 'logged-in'
-                    : workspace.auth.LoginComponent
-                      ? 'logged-out'
-                      : 'no-access'
+  // @todo: fix an issue in Sanity UI <MenuButton> components where, when open with a selected item,
+  // clicking the menu button causes the menu to close and immediately re-open.
+  return (
+    <>
+      <MenuButton
+        button={button}
+        id="workspace-menu"
+        menu={
+          <StyledMenu>
+            {authStates &&
+              workspaces.map((workspace) => {
+                const authState = authStates[workspace.name]
 
-                  const handleSelectWorkspace = () => {
-                    if (state === 'logged-in' && workspace.name !== activeWorkspace.name) {
-                      setActiveWorkspace(workspace.name)
-                    }
+                // eslint-disable-next-line no-nested-ternary
+                const state = authState.authenticated
+                  ? 'logged-in'
+                  : workspace.auth.LoginComponent
+                    ? 'logged-out'
+                    : 'no-access'
 
-                    // Navigate to the base path of the workspace to authenticate
-                    if (state === 'logged-out') {
-                      navigateUrl({path: workspace.basePath})
-                    }
+                const handleSelectWorkspace = () => {
+                  if (state === 'logged-in' && workspace.name !== activeWorkspace.name) {
+                    setActiveWorkspace(workspace.name)
                   }
 
-                  return (
-                    <MenuItem
-                      key={workspace.name}
-                      // eslint-disable-next-line react/jsx-no-bind
-                      onClick={handleSelectWorkspace}
-                      padding={2}
-                      pressed={workspace.name === activeWorkspace.name}
-                    >
-                      <WorkspacePreview
-                        icon={workspace?.icon}
-                        selected={workspace.name === activeWorkspace.name}
-                        state={state}
-                        subtitle={workspace?.subtitle}
-                        title={workspace?.title || workspace.name}
-                      />
-                    </MenuItem>
-                  )
-                })}
-            </StyledMenu>
-          }
-          onClose={handleOnClose}
-          onOpen={handleOnOpen}
-          popover={popoverProps}
-        />
-      </Stack>
-    </Tooltip>
+                  // Navigate to the base path of the workspace to authenticate
+                  if (state === 'logged-out') {
+                    navigateUrl({path: workspace.basePath})
+                  }
+                }
+                const isSelected = workspace.name === activeWorkspace.name
+                return (
+                  <MenuItem
+                    badgeText={STATE_TITLES[state]}
+                    iconRight={isSelected ? CheckmarkIcon : undefined}
+                    key={workspace.name}
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onClick={handleSelectWorkspace}
+                    pressed={isSelected}
+                    preview={<WorkspacePreviewIcon icon={workspace.icon} size="small" />}
+                    selected={isSelected}
+                    text={workspace?.title || workspace.name}
+                    tooltipProps={workspace?.subtitle ? {content: workspace.subtitle} : undefined}
+                  />
+                )
+              })}
+          </StyledMenu>
+        }
+        popover={POPOVER_PROPS}
+      />
+    </>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx
index 8ea2e464a53..ad553937b43 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx
@@ -1,18 +1,23 @@
 import {CheckmarkIcon} from '@sanity/icons'
-import {Flex, Stack, Box, Text, Card} from '@sanity/ui'
+import {Flex, Stack, Box, Text} from '@sanity/ui'
 import React, {createElement, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
 
-const STATE_TITLES = {
+export const STATE_TITLES = {
   'logged-in': '',
   'logged-out': 'Signed out',
   'no-access': '',
 }
 
-export const MediaCard = styled(Card)`
-  width: 35px;
-  height: 35px;
+type PreviewIconSize = 'small' | 'large'
+interface MediaProps {
+  $size: PreviewIconSize
+}
+
+export const Media = styled.div<MediaProps>`
+  width: ${(props) => (props.$size === 'small' ? '25px' : '41px')};
+  height: ${(props) => (props.$size === 'small' ? '25px' : '41px')};
 
   svg {
     width: 100%;
@@ -20,6 +25,18 @@ export const MediaCard = styled(Card)`
   }
 `
 
+export const WorkspacePreviewIcon = ({
+  icon,
+  size = 'small',
+}: {
+  icon: React.ComponentType | React.ReactNode
+  size: PreviewIconSize
+}) => {
+  const iconComponent = useMemo(() => createIcon(icon), [icon])
+
+  return <Media $size={size}>{iconComponent}</Media>
+}
+
 const createIcon = (icon: React.ComponentType | React.ReactNode) => {
   if (isValidElementType(icon)) return createElement(icon)
   if (isValidElement(icon)) return icon
@@ -38,17 +55,14 @@ export interface WorkspacePreviewProps {
 export function WorkspacePreview(props: WorkspacePreviewProps) {
   const {state, subtitle, selected, title, icon, iconRight} = props
 
-  const iconComponent = useMemo(() => createIcon(icon), [icon])
   const iconRightComponent = useMemo(() => createIcon(iconRight), [iconRight])
 
   return (
     <Flex align="center" flex="none" gap={3}>
-      <MediaCard radius={2} tone="transparent">
-        {iconComponent}
-      </MediaCard>
+      <WorkspacePreviewIcon icon={icon} size="small" />
 
       <Stack flex={1} space={2}>
-        <Text textOverflow="ellipsis" weight="medium">
+        <Text size={1} textOverflow="ellipsis" weight="medium">
           {title}
         </Text>
 
diff --git a/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx b/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx
index 6234c40935c..d5468911f20 100644
--- a/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable i18next/no-literal-string,@sanity/i18n/no-attribute-string-literals */
-import {Card, Dialog, Stack, Button, Text, TextInput, Flex} from '@sanity/ui'
+import {Card, Stack, Text, TextInput, Flex} from '@sanity/ui'
 import React, {useEffect, useMemo} from 'react'
 import {LaunchIcon} from '@sanity/icons'
 import styled from 'styled-components'
+import {Button, Dialog} from '../../../ui'
 
 interface CorsOriginErrorScreenProps {
   projectId?: string
@@ -44,8 +45,23 @@ export function CorsOriginErrorScreen(props: CorsOriginErrorScreenProps) {
 
   return (
     <Card height="fill">
-      <Dialog id="cors-error-dialog" header="Before you continue..." width={1}>
-        <Stack paddingX={4} paddingY={5} space={4}>
+      <Dialog
+        id="cors-error-dialog"
+        header="Before you continue..."
+        width={1}
+        footer={{
+          confirmButton: {
+            text: 'Continue',
+            iconRight: LaunchIcon,
+            as: 'a',
+            href: corsUrl,
+            target: '_blank',
+            rel: 'noopener noreferrer',
+            tone: 'primary',
+          },
+        }}
+      >
+        <Stack space={4}>
           <Text>
             To access your content, you need to <b>add the following URL as a CORS origin</b> to
             your Sanity project.
@@ -55,14 +71,15 @@ export function CorsOriginErrorScreen(props: CorsOriginErrorScreenProps) {
           <ScreenReaderLabel aria-hidden="true">CORS URL to be added</ScreenReaderLabel>
           <TextInput value={origin} readOnly />
 
-          <Button as="a" href={corsUrl} target="_blank" rel="noopener noreferrer" tone="primary">
-            <Flex align="center" justify="center" gap={3}>
-              <Text weight="medium">Continue</Text>
-              <Text weight="medium">
-                <LaunchIcon />
-              </Text>
-            </Flex>
-          </Button>
+          <Button
+            as="a"
+            href={corsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            tone="primary"
+            text="Continue"
+            iconRight={LaunchIcon}
+          />
         </Stack>
       </Dialog>
     </Card>
diff --git a/packages/sanity/src/core/studio/screens/LoadingScreen.tsx b/packages/sanity/src/core/studio/screens/LoadingScreen.tsx
deleted file mode 100644
index 185ed1f4707..00000000000
--- a/packages/sanity/src/core/studio/screens/LoadingScreen.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/* eslint-disable i18next/no-literal-string */
-import React from 'react'
-import {Flex, Spinner, Card, Text} from '@sanity/ui'
-
-export function LoadingScreen() {
-  return (
-    // TODO: improve the design of this
-    // think about having it load in the `_document` too
-    <Flex
-      // TODO: currently this card is here to accommodate dark mode vs light
-      // mode backgrounds, however that logic should probably exist globally
-      as={Card}
-      justify="center"
-      align="center"
-      height="fill"
-      direction="column"
-      gap={4}
-    >
-      <Text muted>Loading…</Text>
-      <Spinner muted />
-    </Flex>
-  )
-}
diff --git a/packages/sanity/src/core/studio/screens/NoSourcesScreen.tsx b/packages/sanity/src/core/studio/screens/NoSourcesScreen.tsx
index 6b867e80d40..d8040a5f45c 100644
--- a/packages/sanity/src/core/studio/screens/NoSourcesScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/NoSourcesScreen.tsx
@@ -16,7 +16,7 @@ export function NoSourcesScreen() {
                 </Text>
               </Box>
               <Stack flex={1} marginLeft={3} space={3}>
-                <Text as="h1" size={1} weight="bold">
+                <Text as="h1" size={1} weight="medium">
                   No configured sources!
                 </Text>
                 <Text as="p" muted size={1}>
diff --git a/packages/sanity/src/core/studio/screens/NoToolsScreen.tsx b/packages/sanity/src/core/studio/screens/NoToolsScreen.tsx
index 43249ffb066..016c6c80a3b 100644
--- a/packages/sanity/src/core/studio/screens/NoToolsScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/NoToolsScreen.tsx
@@ -16,7 +16,7 @@ export function NoToolsScreen() {
                 </Text>
               </Box>
               <Stack flex={1} marginLeft={3} space={3}>
-                <Text as="h1" size={1} weight="bold">
+                <Text as="h1" size={1} weight="medium">
                   No configured tools
                 </Text>
                 <Text as="p" muted size={1}>
diff --git a/packages/sanity/src/core/studio/screens/NotAuthenticatedScreen.tsx b/packages/sanity/src/core/studio/screens/NotAuthenticatedScreen.tsx
index 06b3cce657e..ab6e45a3206 100644
--- a/packages/sanity/src/core/studio/screens/NotAuthenticatedScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/NotAuthenticatedScreen.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable i18next/no-literal-string,@sanity/i18n/no-attribute-string-literals */
 import {CurrentUser} from '@sanity/types'
-import {Button, Card, Dialog, Stack, Text} from '@sanity/ui'
+import {Card, Stack, Text} from '@sanity/ui'
 import React, {useCallback, useEffect, useState} from 'react'
+import {Dialog} from '../../../ui'
 import {getProviderTitle} from '../../store'
 import {useActiveWorkspace} from '../activeWorkspaceMatcher'
 
@@ -39,13 +40,15 @@ export function NotAuthenticatedScreen() {
         id="not-authorized-dialog"
         header="Not authorized"
         width={1}
-        footer={
-          <Stack paddingX={3} paddingY={2}>
-            <Button text="Sign out" onClick={handleLogout} />
-          </Stack>
-        }
+        footer={{
+          confirmButton: {
+            text: 'Sign out',
+            onClick: handleLogout,
+            tone: 'default',
+          },
+        }}
       >
-        <Stack paddingX={4} paddingY={5} space={4}>
+        <Stack space={4}>
           <Text>
             You are not authorized to access this studio. Maybe you could ask someone to invite you
             to collaborate on this project?
diff --git a/packages/sanity/src/core/studio/screens/NotFoundScreen.tsx b/packages/sanity/src/core/studio/screens/NotFoundScreen.tsx
index df0f16b884f..b75024a4356 100644
--- a/packages/sanity/src/core/studio/screens/NotFoundScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/NotFoundScreen.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable i18next/no-literal-string,@sanity/i18n/no-attribute-string-literals */
-import {Button, Card, Flex, Heading, Inline, Stack} from '@sanity/ui'
+import {Card, Flex, Heading, Inline, Stack} from '@sanity/ui'
 import React from 'react'
+import {Button} from '../../../ui'
 
 export function NotFoundScreen(props: {onNavigateToDefaultWorkspace: () => void}) {
   return (
diff --git a/packages/sanity/src/core/studio/screens/ToolNotFoundScreen.tsx b/packages/sanity/src/core/studio/screens/ToolNotFoundScreen.tsx
index 030714489bc..de531a6d04d 100644
--- a/packages/sanity/src/core/studio/screens/ToolNotFoundScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/ToolNotFoundScreen.tsx
@@ -18,7 +18,7 @@ export function ToolNotFoundScreen(props: {toolName: string}) {
                 </Text>
               </Box>
               <Stack flex={1} marginLeft={3} space={3}>
-                <Text as="h1" size={1} weight="bold">
+                <Text as="h1" size={1} weight="medium">
                   Tool not found: <code>{toolName}</code>
                 </Text>
               </Stack>
diff --git a/packages/sanity/src/core/studio/screens/index.ts b/packages/sanity/src/core/studio/screens/index.ts
index 33c7a64b54a..0241b8cc7d5 100644
--- a/packages/sanity/src/core/studio/screens/index.ts
+++ b/packages/sanity/src/core/studio/screens/index.ts
@@ -1,4 +1,3 @@
-export * from './LoadingScreen'
 export * from './schemaErrors'
 export * from './NotFoundScreen'
 export * from './AuthenticateScreen'
diff --git a/packages/sanity/src/core/studio/screens/schemaErrors/InitialValueTemplateError.tsx b/packages/sanity/src/core/studio/screens/schemaErrors/InitialValueTemplateError.tsx
index 3913ab255fe..f0e16df1bd6 100644
--- a/packages/sanity/src/core/studio/screens/schemaErrors/InitialValueTemplateError.tsx
+++ b/packages/sanity/src/core/studio/screens/schemaErrors/InitialValueTemplateError.tsx
@@ -1,20 +1,19 @@
 /* eslint-disable i18next/no-literal-string,@sanity/i18n/no-attribute-string-literals */
-import {Box, Dialog, Stack, Text} from '@sanity/ui'
+import {Box, Stack, Text} from '@sanity/ui'
 import React from 'react'
+import {Dialog} from '../../../../ui'
 
 export function InitialValueTemplateError({errors}: {errors: Error[]}) {
   return (
     <Dialog header="Initial value template error" id="initial-value-error-dialog" width={1}>
-      <Box padding={4}>
-        <Stack space={4}>
-          <Text>Failed to load initial value templates:</Text>
-          {errors.map((error: Error) => (
-            <Text key={error.message}>
-              <code>{error.message}</code>
-            </Text>
-          ))}
-        </Stack>
-      </Box>
+      <Stack space={4}>
+        <Text>Failed to load initial value templates:</Text>
+        {errors.map((error: Error) => (
+          <Text key={error.message}>
+            <code>{error.message}</code>
+          </Text>
+        ))}
+      </Stack>
     </Dialog>
   )
 }
diff --git a/packages/sanity/src/core/studio/screens/schemaErrors/SchemaProblemGroups.tsx b/packages/sanity/src/core/studio/screens/schemaErrors/SchemaProblemGroups.tsx
index c3fbcf10d89..4f4796dc568 100644
--- a/packages/sanity/src/core/studio/screens/schemaErrors/SchemaProblemGroups.tsx
+++ b/packages/sanity/src/core/studio/screens/schemaErrors/SchemaProblemGroups.tsx
@@ -57,7 +57,7 @@ export function SchemaProblemGroups(props: {problemGroups: SchemaValidationProbl
               </Box>
 
               <Box flex={1}>
-                <Text size={1} weight="semibold">
+                <Text size={1} weight="medium">
                   {schemaType ? (
                     <>
                       {capitalize(schemaType.type)} type "{schemaType.name}"
diff --git a/packages/sanity/src/core/studio/studio-components-hooks/componentHooks.ts b/packages/sanity/src/core/studio/studio-components-hooks/componentHooks.ts
index b4e3236370f..2edb8d9de9f 100644
--- a/packages/sanity/src/core/studio/studio-components-hooks/componentHooks.ts
+++ b/packages/sanity/src/core/studio/studio-components-hooks/componentHooks.ts
@@ -32,6 +32,7 @@ export function useNavbarComponent(): ComponentType<Omit<NavbarProps, 'renderDef
 
 /**
  * @internal
+ * @deprecated Use `useLogoMarkComponent` instead.
  */
 export function useLogoComponent(): ComponentType<Omit<LogoProps, 'renderDefault'>> {
   return useMiddlewareComponents({
diff --git a/packages/sanity/src/core/studio/workspaceLoader/ErrorMessage.tsx b/packages/sanity/src/core/studio/workspaceLoader/ErrorMessage.tsx
index 4053f22a103..39574bd4772 100644
--- a/packages/sanity/src/core/studio/workspaceLoader/ErrorMessage.tsx
+++ b/packages/sanity/src/core/studio/workspaceLoader/ErrorMessage.tsx
@@ -25,7 +25,7 @@ export function ErrorMessage({error, message, path, stack}: ErrorMessageProps) {
   return (
     <ErrorMessageRoot forwardedAs={Flex} direction="column" gap={4}>
       <Flex direction="column" gap={2}>
-        <Text weight="semibold" size={3}>
+        <Text weight="medium" size={3}>
           {startCase(last.type)} Error
         </Text>
       </Flex>
diff --git a/packages/sanity/src/core/theme/_legacy/color.ts b/packages/sanity/src/core/theme/_legacy/color.ts
index bf8882e9929..34e7853873e 100644
--- a/packages/sanity/src/core/theme/_legacy/color.ts
+++ b/packages/sanity/src/core/theme/_legacy/color.ts
@@ -1,5 +1,5 @@
 import {hues} from '@sanity/color'
-import {createColorTheme, rgba, ThemeColorSchemes} from '@sanity/ui'
+import {createColorTheme, rgba, ThemeColorSchemes} from '@sanity/ui/theme'
 import {_multiply, _screen, _isDark} from './helpers'
 import {LegacyPalette} from './palette'
 import {LegacyTones} from './tones'
@@ -101,6 +101,7 @@ export function buildColor(
           bg,
           border: blend(base.bg, tints[200]),
           fg: blend(base.bg, buttonTones.bg),
+          icon: blend(base.bg, buttonTones.bg),
           muted: {
             fg: blend(base.bg, tints[50]),
           },
@@ -129,6 +130,7 @@ export function buildColor(
           bg,
           border: blend(base.bg, tints[600]),
           fg: blend(base.bg, buttonTones.bg),
+          icon: blend(base.bg, buttonTones.bg),
           muted: {
             fg: blend(base.bg, tints[200]),
           },
@@ -157,6 +159,7 @@ export function buildColor(
           bg,
           border: blend(base.bg, tints[800]),
           fg: blend(base.bg, buttonTones.bg),
+          icon: blend(base.bg, buttonTones.bg),
           muted: {
             fg: blend(base.bg, tints[200]),
           },
@@ -189,6 +192,7 @@ export function buildColor(
           bg,
           border: blend(base.bg, tints[800]),
           fg: blend(base.bg, buttonTones.bg),
+          icon: blend(base.bg, buttonTones.bg),
           muted: {
             fg: blend(base.bg, tints[200]),
           },
@@ -216,6 +220,7 @@ export function buildColor(
         bg,
         border: blend(base.bg, tints[500]),
         fg: blend(base.bg, buttonTones.bg),
+        icon: blend(base.bg, buttonTones.bg),
         muted: {
           fg: blend(base.bg, tints[100]),
         },
@@ -255,6 +260,7 @@ export function buildColor(
           bg,
           border: blend(base.bg, tints[50]),
           fg: blend(base.bg, tints[200]),
+          icon: blend(base.bg, tints[200]),
           muted: {
             fg: blend(bg, tints[100]),
           },
@@ -283,6 +289,7 @@ export function buildColor(
           bg,
           border: blend(bg, tints[100]),
           fg: blend(base.bg, tints[900]),
+          icon: blend(base.bg, tints[900]),
           muted: {
             fg: blend(base.bg, tints[600]),
           },
@@ -315,6 +322,7 @@ export function buildColor(
           bg,
           border: blend(bg, tints[100]),
           fg: blend(base.bg, tints[800]),
+          icon: blend(base.bg, tints[800]),
           muted: {
             fg: blend(base.bg, tints[600]),
           },
@@ -347,6 +355,7 @@ export function buildColor(
           bg,
           border: blend(bg, tints[100]),
           fg: blend(bg, tints[800]),
+          icon: blend(bg, tints[800]),
           muted: {
             fg: blend(bg, tints[600]),
           },
@@ -374,6 +383,7 @@ export function buildColor(
         bg,
         border: blend(bg, tints[100]),
         fg: blend(bg, tints[700]),
+        icon: blend(bg, tints[700]),
         muted: {
           fg: blend(bg, tints[600]),
         },
@@ -472,6 +482,7 @@ export function buildColor(
       return {
         bg,
         fg: base.fg,
+        icon: base.fg,
         border: base.border,
         muted: {
           fg: blend(base.bg, tints[dark ? 400 : 600]),
@@ -503,6 +514,7 @@ export function buildColor(
 
         return {
           bg: blend(base.bg, tints[50]),
+          bg2: blend(base.bg, tints[50]),
           fg: blend(base.bg, tints[700]),
           border: blend(base.bg, tints[200]),
           placeholder: blend(base.bg, tints[400]),
@@ -512,6 +524,7 @@ export function buildColor(
       if (state === 'hovered') {
         return {
           bg: base.bg,
+          bg2: base.bg,
           fg: base.fg,
           border: blend(base.bg, hues.gray[300].hex),
           placeholder: blend(base.bg, hues.gray[400].hex),
@@ -521,6 +534,7 @@ export function buildColor(
       if (state === 'disabled') {
         return {
           bg: blend(base.bg, hues.gray[50].hex),
+          bg2: blend(base.bg, hues.gray[50].hex),
           fg: blend(base.bg, hues.gray[200].hex),
           border: blend(base.bg, hues.gray[100].hex),
           placeholder: blend(base.bg, hues.gray[100].hex),
@@ -530,6 +544,7 @@ export function buildColor(
       if (state === 'readOnly') {
         return {
           bg: blend(base.bg, hues.gray[50].hex),
+          bg2: blend(base.bg, hues.gray[50].hex),
           fg: blend(base.bg, hues.gray[800].hex),
           border: blend(base.bg, hues.gray[200].hex),
           placeholder: blend(base.bg, hues.gray[400].hex),
@@ -538,6 +553,7 @@ export function buildColor(
 
       return {
         bg: base.bg,
+        bg2: base.bg,
         fg: base.fg,
         border: base.border,
         placeholder: blend(base.bg, hues.gray[700].hex),
diff --git a/packages/sanity/src/core/theme/_legacy/theme.ts b/packages/sanity/src/core/theme/_legacy/theme.ts
index 18473eac0cd..549c01807b2 100644
--- a/packages/sanity/src/core/theme/_legacy/theme.ts
+++ b/packages/sanity/src/core/theme/_legacy/theme.ts
@@ -28,10 +28,11 @@ import {LegacyThemeProps} from './types'
  * ```
  *
  * @param partialLegacyTheme - Properties to override the theme with. See {@link LegacyThemeProps}
- *
  * @public
+ * @deprecated Use `@sanity/ui studioTheme` instead
  */
 export function buildLegacyTheme(partialLegacyTheme: Partial<LegacyThemeProps>): StudioTheme {
+  return defaults
   const legacyTheme = resolveLegacyTheme(partialLegacyTheme)
   const legacyPalette = buildLegacyPalette(legacyTheme)
   const legacyTones = buildLegacyTones(legacyPalette)
diff --git a/packages/sanity/src/desk/__workshop__/DocumentStateStory.tsx b/packages/sanity/src/desk/__workshop__/DocumentStateStory.tsx
index 85d5edd61a7..b657e7aa591 100644
--- a/packages/sanity/src/desk/__workshop__/DocumentStateStory.tsx
+++ b/packages/sanity/src/desk/__workshop__/DocumentStateStory.tsx
@@ -1,8 +1,10 @@
-import {Box, Code, Stack, Button, Dialog} from '@sanity/ui'
+import {Box, Code, Stack} from '@sanity/ui'
 import React, {useMemo, useState, useCallback, useEffect} from 'react'
+import {Button, Dialog} from '../../ui'
 import {DeskToolProvider} from '../DeskToolProvider'
 import {DocumentPaneProvider} from '../panes'
 import {DocumentPaneNode} from '../types'
+
 import {
   DocumentActionComponent,
   DocumentActionDescription,
@@ -114,7 +116,7 @@ function Debug(props: {documentId: string; documentType: string}) {
                   // eslint-disable-next-line react/jsx-handler-names
                   onClose={actionItem.dialog.onClose}
                 >
-                  <Box padding={4}>{actionItem.dialog.content}</Box>
+                  {actionItem.dialog.content}
                 </Dialog>
               )
             }
diff --git a/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx b/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx
index 8d3b3f0782f..873297b9145 100644
--- a/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx
+++ b/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx
@@ -1,14 +1,12 @@
 import React, {useCallback, useMemo, useRef, useState} from 'react'
 import {
-  Box,
-  Button,
   Flex,
   Popover,
   Stack,
   Text,
-  Tooltip,
-  TooltipProps,
   useClickOutside,
+  // eslint-disable-next-line no-restricted-imports
+  Button as SanityUIButton, // Button with specific styling for the children
 } from '@sanity/ui'
 import styled from 'styled-components'
 import {
@@ -20,14 +18,9 @@ import {
   CommentIcon,
   MentionOptionsHookValue,
 } from '../../src'
+import {Button, Tooltip} from '../../../../ui'
 import {CurrentUser, PortableTextBlock} from 'sanity'
 
-const TOOLTIP_DELAY: TooltipProps['delay'] = {open: 500}
-
-const TooltipText = styled(Text)`
-  width: max-content;
-`
-
 const ContentStack = styled(Stack)`
   width: 320px;
 `
@@ -174,54 +167,40 @@ export function CommentsFieldButton(props: CommentsFieldButtonProps) {
         onKeyDown={handlePopoverKeyDown}
       >
         <div>
-          <Tooltip
-            delay={TOOLTIP_DELAY}
-            disabled={open}
-            portal
-            placement="top"
-            content={
-              <Box padding={2}>
-                <Text size={1}>Add comment</Text>
-              </Box>
-            }
-          >
-            <Button
-              aria-label="Add comment"
-              disabled={isRunningSetup}
-              fontSize={1}
-              icon={AddCommentIcon}
-              mode="bleed"
-              onClick={onClick}
-              padding={2}
-              ref={setAddCommentButtonElement}
-              selected={open}
-            />
-          </Tooltip>
+          <Button
+            aria-label="Add comment"
+            disabled={isRunningSetup}
+            icon={AddCommentIcon}
+            mode="bleed"
+            onClick={onClick}
+            ref={setAddCommentButtonElement}
+            selected={open}
+            tooltipProps={{
+              content: 'Add comment',
+              placement: 'top',
+            }}
+          />
         </div>
       </Popover>
     )
   }
 
   return (
-    <Tooltip
-      portal
-      placement="top"
-      content={
-        <Box padding={2} sizing="border">
-          <TooltipText size={1}>View comment{count > 1 ? 's' : ''}</TooltipText>
-        </Box>
-      }
-      delay={TOOLTIP_DELAY}
-      fallbackPlacements={['bottom']}
-    >
-      <Button aria-label="Open comments" mode="bleed" onClick={onClick} padding={2}>
+    <Tooltip portal placement="top" content={`View comment${count > 1 ? 's' : ''}`}>
+      <SanityUIButton
+        aria-label="Open comments"
+        mode="bleed"
+        onClick={onClick}
+        padding={2}
+        space={2}
+      >
         <Flex align="center" gap={2}>
           <Text size={1}>
             <CommentIcon />
           </Text>
           <Text size={0}>{count > 9 ? '9+' : count}</Text>
         </Flex>
-      </Button>
+      </SanityUIButton>
     </Tooltip>
   )
 }
diff --git a/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorFeedbackFooter.tsx b/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorFeedbackFooter.tsx
index ff8f5235135..94a5d0b4473 100644
--- a/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorFeedbackFooter.tsx
+++ b/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorFeedbackFooter.tsx
@@ -16,17 +16,6 @@ const Link = styled.a`
 const FooterCard = styled(Card)({
   position: 'relative',
   zIndex: 1,
-
-  '&:after': {
-    content: '""',
-    display: 'block',
-    position: 'absolute',
-    left: 0,
-    top: -1,
-    right: 0,
-    borderBottom: '1px solid var(--card-border-color)',
-    opacity: 0.5,
-  },
 })
 
 export function CommentsInspectorFeedbackFooter() {
diff --git a/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx b/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx
index 1fad1c1f61d..886763f406c 100644
--- a/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx
+++ b/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx
@@ -1,8 +1,9 @@
 import {CheckmarkIcon, ChevronDownIcon, DoubleChevronRightIcon} from '@sanity/icons'
-import {Button, Card, Flex, Menu, MenuButton, MenuItem, Text} from '@sanity/ui'
+import {Card, Flex, Menu, MenuButton, Text} from '@sanity/ui'
 import {startCase} from 'lodash'
 import React, {forwardRef, useCallback} from 'react'
 import styled from 'styled-components'
+import {MenuItem, Button} from '../../../../ui'
 import {CommentStatus} from '../../src'
 import {BetaBadge} from 'sanity'
 
@@ -10,17 +11,6 @@ const Root = styled(Card)({
   position: 'relative',
   zIndex: 1,
   lineHeight: 0,
-
-  '&:after': {
-    content: '""',
-    display: 'block',
-    position: 'absolute',
-    left: 0,
-    bottom: -1,
-    right: 0,
-    borderBottom: '1px solid var(--card-border-color)',
-    opacity: 0.5,
-  },
 })
 
 interface CommentsInspectorHeaderProps {
@@ -42,7 +32,7 @@ export const CommentsInspectorHeader = forwardRef(function CommentsInspectorHead
     <Root ref={ref}>
       <Flex padding={2}>
         <Flex align="center" flex={1} gap={2} paddingY={2} padding={3}>
-          <Text as="h1" size={1} weight="semibold">
+          <Text as="h1" size={1} weight="medium">
             Comments
           </Text>
 
@@ -52,26 +42,15 @@ export const CommentsInspectorHeader = forwardRef(function CommentsInspectorHead
         <Flex flex="none" padding={1} gap={2}>
           <MenuButton
             id="comment-status-menu-button"
-            button={
-              <Button
-                text={startCase(view)}
-                fontSize={1}
-                padding={2}
-                mode="bleed"
-                iconRight={ChevronDownIcon}
-                space={2}
-              />
-            }
+            button={<Button text={startCase(view)} mode="bleed" iconRight={ChevronDownIcon} />}
             menu={
               <Menu style={{width: '180px'}}>
                 <MenuItem
-                  fontSize={1}
                   iconRight={view === 'open' ? CheckmarkIcon : undefined}
                   onClick={handleSetOpenView}
                   text="Open comments"
                 />
                 <MenuItem
-                  fontSize={1}
                   iconRight={view === 'resolved' ? CheckmarkIcon : undefined}
                   onClick={handleSetResolvedView}
                   text="Resolved comments"
@@ -83,11 +62,10 @@ export const CommentsInspectorHeader = forwardRef(function CommentsInspectorHead
 
           <Button
             aria-label="Close comments"
-            fontSize={1}
             icon={DoubleChevronRightIcon}
             mode="bleed"
             onClick={onClose}
-            padding={2}
+            tooltipProps={{content: 'Close comments'}}
           />
         </Flex>
       </Flex>
diff --git a/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx b/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx
index aa02014770d..b7390264f66 100644
--- a/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx
+++ b/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx
@@ -1,6 +1,7 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {Box, Flex, Stack, Text, Tooltip, TooltipProps} from '@sanity/ui'
+import {Box, Flex, Stack, Text} from '@sanity/ui'
 import React, {Fragment, useMemo} from 'react'
+import {TooltipWithNodes} from '../../../../ui'
 
 export interface CommentBreadcrumbsProps {
   titlePath: string[]
@@ -9,11 +10,6 @@ export interface CommentBreadcrumbsProps {
 
 type Item = string | string[]
 
-const TOOLTIP_DELAY: TooltipProps['delay'] = {
-  close: 0,
-  open: 500,
-}
-
 const separator = (
   <Text muted>
     <ChevronRightIcon />
@@ -23,7 +19,7 @@ const separator = (
 const renderItem = (item: string, index: number) => {
   return (
     <Box as="li" key={`${item}-${index}`}>
-      <Text textOverflow="ellipsis" size={1} weight="semibold">
+      <Text textOverflow="ellipsis" size={1} weight="medium">
         {item}
       </Text>
     </Box>
@@ -57,8 +53,7 @@ export function CommentBreadcrumbs(props: CommentBreadcrumbsProps) {
       if (Array.isArray(item)) {
         return (
           <Fragment key={key}>
-            <Tooltip
-              delay={TOOLTIP_DELAY}
+            <TooltipWithNodes
               content={
                 <Stack space={2} padding={2}>
                   {item.map(renderItem)}
@@ -66,7 +61,7 @@ export function CommentBreadcrumbs(props: CommentBreadcrumbsProps) {
               }
             >
               <Box>{renderItem('...', index)}</Box>
-            </Tooltip>
+            </TooltipWithNodes>
 
             {showSeparator && separator}
           </Fragment>
diff --git a/packages/sanity/src/desk/comments/src/components/CommentDeleteDialog.tsx b/packages/sanity/src/desk/comments/src/components/CommentDeleteDialog.tsx
index 51ddd7db798..de444bbd99a 100644
--- a/packages/sanity/src/desk/comments/src/components/CommentDeleteDialog.tsx
+++ b/packages/sanity/src/desk/comments/src/components/CommentDeleteDialog.tsx
@@ -1,5 +1,6 @@
-import {Dialog, Grid, Button, Stack, Text} from '@sanity/ui'
+import {Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
+import {Dialog} from '../../../../ui'
 import {TextWithTone} from 'sanity'
 
 const DIALOG_COPY: Record<
@@ -45,24 +46,24 @@ export function CommentDeleteDialog(props: CommentDeleteDialogProps) {
 
   return (
     <Dialog
+      footer={{
+        cancelButton: {
+          onClick: onClose,
+        },
+        confirmButton: {
+          loading,
+          onClick: handleDelete,
+          text: confirmButtonText,
+          tone: 'critical',
+        },
+      }}
       header={title}
       id="delete-comment-dialog"
       onClose={onClose}
       width={0}
-      footer={
-        <Grid columns={2} padding={2} gap={2}>
-          <Button text="Cancel" mode="ghost" onClick={onClose} />
-          <Button
-            loading={loading}
-            onClick={handleDelete}
-            text={confirmButtonText}
-            tone="critical"
-          />
-        </Grid>
-      }
     >
-      <Stack padding={4} space={4}>
-        <Text>{body}</Text>
+      <Stack space={4}>
+        <Text size={1}>{body}</Text>
 
         {error && (
           <TextWithTone tone="critical">
diff --git a/packages/sanity/src/desk/comments/src/components/TextTooltip.tsx b/packages/sanity/src/desk/comments/src/components/TextTooltip.tsx
deleted file mode 100644
index d91ffbd3cf1..00000000000
--- a/packages/sanity/src/desk/comments/src/components/TextTooltip.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import {Flex, Text, Tooltip, TooltipProps} from '@sanity/ui'
-import styled from 'styled-components'
-
-const TOOLTIP_DELAY: TooltipProps['delay'] = {open: 500}
-
-const ContextText = styled(Text)`
-  min-width: max-content;
-`
-
-interface TextTooltipProps {
-  children: React.ReactNode
-  text?: string
-}
-
-export function TextTooltip(props: TextTooltipProps) {
-  const {children, text} = props
-
-  return (
-    <Tooltip
-      delay={TOOLTIP_DELAY}
-      portal
-      placement="top"
-      // @todo: there appears to be an issue with `fallbackPlacements` and tooltips in sanity UI `1.8.2`
-      // fallbackPlacements={['bottom']}
-      content={<ContextText size={1}>{text}</ContextText>}
-      padding={2}
-    >
-      <Flex>{children}</Flex>
-    </Tooltip>
-  )
-}
diff --git a/packages/sanity/src/desk/comments/src/components/avatars/SpacerAvatar.tsx b/packages/sanity/src/desk/comments/src/components/avatars/SpacerAvatar.tsx
index 232080e8dd9..4defa0f3e9d 100644
--- a/packages/sanity/src/desk/comments/src/components/avatars/SpacerAvatar.tsx
+++ b/packages/sanity/src/desk/comments/src/components/avatars/SpacerAvatar.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
+import {studioTheme} from '@sanity/ui'
 
-export const AVATAR_HEIGHT = 25
+export const AVATAR_HEIGHT = studioTheme.avatar.sizes[0].size
 
 const INLINE_STYLE: React.CSSProperties = {
   minWidth: AVATAR_HEIGHT,
diff --git a/packages/sanity/src/desk/comments/src/components/index.ts b/packages/sanity/src/desk/comments/src/components/index.ts
index f85552492f5..e7053a2396a 100644
--- a/packages/sanity/src/desk/comments/src/components/index.ts
+++ b/packages/sanity/src/desk/comments/src/components/index.ts
@@ -1,7 +1,6 @@
 export * from './pte'
 export * from './list'
 export * from './CommentDeleteDialog'
-export * from './TextTooltip'
 export * from './CommentBreadcrumbs'
 export * from './icons'
 export * from './onboarding'
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentThreadLayout.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentThreadLayout.tsx
index 00fac50c135..c7a78e84950 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentThreadLayout.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentThreadLayout.tsx
@@ -1,5 +1,10 @@
 import {CurrentUser} from '@sanity/types'
-import {Button, Flex, Stack} from '@sanity/ui'
+import {
+  Flex,
+  Stack,
+  // eslint-disable-next-line no-restricted-imports
+  Button, // Button with specific styling and children behavior.
+} from '@sanity/ui'
 import React, {useCallback, useMemo} from 'react'
 import {uuid} from '@sanity/uuid'
 import styled, {css} from 'styled-components'
@@ -115,6 +120,7 @@ export function CommentThreadLayout(props: CommentThreadLayoutProps) {
               mode="bleed"
               onClick={handleBreadcrumbsClick}
               padding={2}
+              space={2}
             >
               <CommentBreadcrumbs maxLength={3} titlePath={crumbsTitlePath} />
             </BreadcrumbsButton>
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListItem.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListItem.tsx
index 656bfc35b7f..1710dc86943 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListItem.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListItem.tsx
@@ -1,5 +1,5 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {Button, Flex, Stack} from '@sanity/ui'
+import {Flex, Stack} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 import {CurrentUser} from '@sanity/types'
 import {ChevronDownIcon} from '@sanity/icons'
@@ -15,6 +15,7 @@ import {
 import {SpacerAvatar} from '../avatars'
 import {hasCommentMessageValue} from '../../helpers'
 import {CommentsSelectedPath} from '../../context'
+import {Button} from '../../../../../ui'
 import {CommentsListItemLayout} from './CommentsListItemLayout'
 import {ThreadCard} from './styles'
 
@@ -64,7 +65,7 @@ const ExpandButton = styled(Button)(({theme}) => {
   `
 })
 
-const GhostButton = styled(Button)`
+const GhostButton = styled.button`
   opacity: 0;
   position: absolute;
   right: 0;
@@ -296,12 +297,9 @@ export const CommentsListItem = React.memo(function CommentsListItem(props: Comm
               <SpacerAvatar />
 
               <ExpandButton
-                fontSize={1}
                 iconRight={ChevronDownIcon}
                 mode="bleed"
                 onClick={handleExpand}
-                padding={2}
-                space={2}
                 text={expandButtonText}
               />
             </Flex>
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
index 9a1e9e413f7..3d4171acf18 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
@@ -2,28 +2,24 @@ import React from 'react'
 import {
   CheckmarkCircleIcon,
   UndoIcon,
-  EllipsisVerticalIcon,
+  EllipsisHorizontalIcon,
   EditIcon,
   TrashIcon,
   LinkIcon,
 } from '@sanity/icons'
 import {
-  TooltipDelayGroupProviderProps,
   MenuButtonProps,
   TooltipDelayGroupProvider,
-  Button,
   MenuButton,
   Menu,
-  MenuItem,
   MenuDivider,
   Card,
   Flex,
 } from '@sanity/ui'
 import styled, {css} from 'styled-components'
+import {Button, MenuItem} from '../../../../../ui'
 import {CommentStatus} from '../../types'
-import {TextTooltip} from '../TextTooltip'
-
-const TOOLTIP_GROUP_DELAY: TooltipDelayGroupProviderProps['delay'] = {open: 500}
+import {TOOLTIP_DELAY_PROPS} from '../../../../../ui/tooltip/constants'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
   placement: 'bottom-end',
@@ -74,21 +70,18 @@ export function CommentsListItemContextMenu(props: CommentsListItemContextMenuPr
   const showMenuButton = Boolean(onCopyLink || onDeleteStart || onEditStart)
 
   return (
-    <TooltipDelayGroupProvider delay={TOOLTIP_GROUP_DELAY}>
+    <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
       <Flex>
         <FloatingCard display="flex" shadow={2} padding={1} radius={2} sizing="border">
           {isParent && (
-            <TextTooltip text={status === 'open' ? 'Mark as resolved' : 'Re-open'}>
-              <Button
-                aria-label="Mark comment as resolved"
-                disabled={readOnly}
-                fontSize={1}
-                icon={status === 'open' ? CheckmarkCircleIcon : UndoIcon}
-                mode="bleed"
-                onClick={onStatusChange}
-                padding={2}
-              />
-            </TextTooltip>
+            <Button
+              aria-label={status === 'open' ? 'Mark comment as resolved' : 'Re-open'}
+              disabled={readOnly}
+              icon={status === 'open' ? CheckmarkCircleIcon : UndoIcon}
+              mode="bleed"
+              onClick={onStatusChange}
+              tooltipProps={{content: status === 'open' ? 'Mark as resolved' : 'Re-open'}}
+            />
           )}
 
           <MenuButton
@@ -97,11 +90,10 @@ export function CommentsListItemContextMenu(props: CommentsListItemContextMenuPr
               <Button
                 aria-label="Open comment actions menu"
                 disabled={readOnly}
-                fontSize={1}
                 hidden={!showMenuButton}
-                icon={EllipsisVerticalIcon}
+                icon={EllipsisHorizontalIcon}
                 mode="bleed"
-                padding={2}
+                tooltipProps={{content: 'Show more'}}
               />
             }
             onOpen={onMenuOpen}
@@ -109,7 +101,6 @@ export function CommentsListItemContextMenu(props: CommentsListItemContextMenuPr
             menu={
               <Menu>
                 <MenuItem
-                  fontSize={1}
                   hidden={!canEdit}
                   icon={EditIcon}
                   onClick={onEditStart}
@@ -117,7 +108,6 @@ export function CommentsListItemContextMenu(props: CommentsListItemContextMenuPr
                 />
 
                 <MenuItem
-                  fontSize={1}
                   hidden={!canDelete}
                   icon={TrashIcon}
                   onClick={onDeleteStart}
@@ -128,7 +118,6 @@ export function CommentsListItemContextMenu(props: CommentsListItemContextMenuPr
                 <MenuDivider hidden={!canDelete && !canEdit} />
 
                 <MenuItem
-                  fontSize={1}
                   hidden={!onCopyLink}
                   icon={LinkIcon}
                   onClick={onCopyLink}
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemLayout.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemLayout.tsx
index edb37bb91f2..77172f80092 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemLayout.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemLayout.tsx
@@ -252,7 +252,7 @@ export function CommentsListItemLayout(props: CommentsListItemLayoutProps) {
   useClickOutside(handleClickOutside, [rootElement])
 
   const name = user?.displayName ? (
-    <Text size={1} weight="semibold" textOverflow="ellipsis" title={user.displayName}>
+    <Text size={1} weight="medium" textOverflow="ellipsis" title={user.displayName}>
       {user.displayName}
     </Text>
   ) : (
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx
index 6de29a1a092..e4a48569d1f 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx
@@ -1,6 +1,7 @@
-import {Flex, Container, Stack, Spinner, Text} from '@sanity/ui'
+import {Flex, Container, Stack, Text} from '@sanity/ui'
 import React from 'react'
 import {CommentStatus} from '../../types'
+import {LoadingBlock} from '../../../../../ui/loadingBlock'
 
 interface EmptyStateMessage {
   title: string
@@ -51,17 +52,7 @@ export function CommentsListStatus(props: CommentsListStatusProps) {
   }
 
   if (loading) {
-    return (
-      <Flex align="center" justify="center" flex={1} padding={4}>
-        <Flex align="center" gap={2}>
-          <Spinner muted size={1} />
-
-          <Text size={1} muted>
-            Loading comments...
-          </Text>
-        </Flex>
-      </Flex>
-    )
+    return <LoadingBlock title="Loading comments" />
   }
 
   if (hasNoComments) {
@@ -69,7 +60,7 @@ export function CommentsListStatus(props: CommentsListStatusProps) {
       <Flex align="center" justify="center" flex={1} sizing="border">
         <Container width={0} padding={4}>
           <Stack space={3}>
-            <Text align="center" size={1} muted weight="semibold">
+            <Text align="center" size={1} muted weight="medium">
               {EMPTY_STATE_MESSAGES[status].title}
             </Text>
 
diff --git a/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx b/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx
index 74856526c7a..2774aa5112d 100644
--- a/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx
+++ b/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx
@@ -1,7 +1,8 @@
-import {Box, Flex, Spinner, Stack, Text} from '@sanity/ui'
+import {Box, Flex, Stack, Text} from '@sanity/ui'
 import styled from 'styled-components'
 import React, {useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react'
 import {deburr} from 'lodash'
+import {LoadingBlock} from '../../../../../ui/loadingBlock'
 import {MentionOptionUser} from '../../types'
 import {MentionsMenuItem} from './MentionsMenuItem'
 import {CommandList, CommandListHandle} from 'sanity'
@@ -97,9 +98,7 @@ export const MentionsMenu = React.forwardRef(function MentionsMenu(
   if (loading) {
     return (
       <Root>
-        <Flex align="center" justify="center" padding={4}>
-          <Spinner muted size={1} />
-        </Flex>
+        <LoadingBlock />
       </Root>
     )
   }
diff --git a/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx b/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx
index bb127c24d32..d6ac7bdccd2 100644
--- a/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx
+++ b/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx
@@ -1,6 +1,7 @@
-import {Box, Button, Flex, Popover, PopoverProps, Stack, Text} from '@sanity/ui'
+import {Box, Flex, Popover, PopoverProps, Stack, Text} from '@sanity/ui'
 import React from 'react'
 import styled, {keyframes} from 'styled-components'
+import {Button} from '../../../../../ui'
 
 const Root = styled(Box)`
   max-width: 280px;
@@ -34,7 +35,7 @@ export function CommentsOnboardingPopover(props: CommentsOnboardingPopoverProps)
       content={
         <Root padding={4}>
           <Stack space={3}>
-            <Text weight="semibold" size={1}>
+            <Text weight="medium" size={1}>
               Document fields now have comments
             </Text>
 
@@ -44,7 +45,7 @@ export function CommentsOnboardingPopover(props: CommentsOnboardingPopoverProps)
             </Text>
 
             <Flex justify="flex-end" marginTop={2}>
-              <Button fontSize={1} padding={2} text="Got it" tone="primary" onClick={onDismiss} />
+              <Button text="Got it" tone="primary" onClick={onDismiss} />
             </Flex>
           </Stack>
         </Root>
diff --git a/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx b/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx
index 11a51e9c4aa..b9829c928f4 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx
@@ -1,11 +1,10 @@
 import React from 'react'
-import {Tooltip, Flex, Text, TooltipProps} from '@sanity/ui'
+import {Flex, Text} from '@sanity/ui'
 import styled, {css} from 'styled-components'
+import {TooltipWithNodes} from '../../../../../../ui'
 import {CommentsAvatar} from '../../avatars'
 import {useCurrentUser, useUser} from 'sanity'
 
-const TOOLTIP_DELAY: TooltipProps['delay'] = {open: 500, close: 0}
-
 const Span = styled.span(({theme}) => {
   const {regular} = theme.sanity.fonts?.text.weights
   const {hovered} = theme.sanity.color?.card
@@ -38,12 +37,10 @@ export function MentionInlineBlock(props: MentionInlineBlockProps) {
   if (!user || loading) return <Span>@Loading</Span> // todo: improve
 
   return (
-    <Tooltip
+    <TooltipWithNodes
       portal
-      open={selected}
-      delay={TOOLTIP_DELAY}
       content={
-        <Flex align="center" padding={2} gap={2}>
+        <Flex align="center" gap={2}>
           <Flex>
             <CommentsAvatar user={user} />
           </Flex>
@@ -55,6 +52,6 @@ export function MentionInlineBlock(props: MentionInlineBlockProps) {
       <Span data-selected={selected} data-active={currentUser?.id === userId}>
         @{user.displayName}
       </Span>
-    </Tooltip>
+    </TooltipWithNodes>
   )
 }
diff --git a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx
index d45b1e2ffaf..05ac2185122 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx
@@ -1,16 +1,6 @@
-import {
-  Dialog,
-  Grid,
-  Button,
-  Stack,
-  Text,
-  ThemeColorProvider,
-  PortalProvider,
-  DialogProvider,
-  usePortal,
-  useLayer,
-} from '@sanity/ui'
+import {DialogProvider, Stack, Text, ThemeColorProvider} from '@sanity/ui'
 import React, {useCallback} from 'react'
+import {Dialog} from '../../../../../../ui'
 
 const Z_OFFSET = 9999999 // Change to appropriate z-offset
 
@@ -59,12 +49,16 @@ export function CommentInputDiscardDialog(props: CommentInputDiscardDialogProps)
           onClose={onClose}
           width={0}
           onClickOutside={onClose}
-          footer={
-            <Grid columns={2} padding={2} gap={2}>
-              <Button text="Cancel" mode="ghost" onClick={handleCancelClick} />
-              <Button onClick={handleConfirmClick} text="Discard" tone="critical" />
-            </Grid>
-          }
+          footer={{
+            cancelButton: {
+              onClick: handleCancelClick,
+            },
+            confirmButton: {
+              onClick: handleConfirmClick,
+              text: 'Discard',
+              tone: 'critical',
+            },
+          }}
         >
           <Stack padding={4}>
             <Text>Do you want to discard the comment?</Text>
diff --git a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx
index eca8aa6dcfe..1b3b1385e6c 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx
@@ -1,9 +1,11 @@
 import React, {useCallback} from 'react'
-import {Flex, Button, MenuDivider, Box, Card, Stack} from '@sanity/ui'
+import {Flex, MenuDivider, Box, Card, Stack, TooltipDelayGroupProvider} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 import {CurrentUser} from '@sanity/types'
 import {MentionIcon, SendIcon} from '../../icons'
 import {CommentsAvatar} from '../../avatars/CommentsAvatar'
+import {Button} from '../../../../../../ui'
+import {TOOLTIP_DELAY_PROPS} from '../../../../../../ui/tooltip/constants'
 import {useCommentInput} from './useCommentInput'
 import {Editable} from './Editable'
 import {useUser} from 'sanity'
@@ -18,13 +20,6 @@ const ButtonDivider = styled(MenuDivider)({
   width: 1,
 })
 
-const ActionButton = styled(Button).attrs({
-  fontSize: 1,
-  padding: 2,
-})`
-  /* border-radius: 50%; */
-`
-
 const RootCard = styled(Card)(({theme}) => {
   const radii = theme.sanity.radius[2]
 
@@ -128,25 +123,29 @@ export function CommentInputInner(props: CommentInputInnerProps) {
           </EditableWrap>
 
           <Flex align="center" data-ui="CommentInputActions" gap={1} justify="flex-end" padding={1}>
-            <ActionButton
-              aria-label="Mention user"
-              data-testid="comment-mention-button"
-              disabled={readOnly}
-              icon={MentionIcon}
-              mode="bleed"
-              onClick={handleMentionButtonClicked}
-            />
-
-            <ButtonDivider />
-
-            <ActionButton
-              aria-label="Send comment"
-              disabled={!canSubmit || !hasChanges || readOnly}
-              icon={SendIcon}
-              mode={hasChanges && canSubmit ? 'default' : 'bleed'}
-              onClick={onSubmit}
-              tone={hasChanges && canSubmit ? 'primary' : 'default'}
-            />
+            <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+              <Button
+                aria-label="Mention user"
+                data-testid="comment-mention-button"
+                disabled={readOnly}
+                icon={MentionIcon}
+                mode="bleed"
+                onClick={handleMentionButtonClicked}
+                tooltipProps={{content: 'Mention user'}}
+              />
+
+              <ButtonDivider />
+
+              <Button
+                aria-label="Send comment"
+                disabled={!canSubmit || !hasChanges || readOnly}
+                icon={SendIcon}
+                mode={hasChanges && canSubmit ? 'default' : 'bleed'}
+                onClick={onSubmit}
+                tone={hasChanges && canSubmit ? 'primary' : 'default'}
+                tooltipProps={{content: 'Send comment'}}
+              />
+            </TooltipDelayGroupProvider>
           </Flex>
         </Stack>
       </RootCard>
diff --git a/packages/sanity/src/desk/components/IntentButton.tsx b/packages/sanity/src/desk/components/IntentButton.tsx
index 160cdc6651e..44fcb9ae2fd 100644
--- a/packages/sanity/src/desk/components/IntentButton.tsx
+++ b/packages/sanity/src/desk/components/IntentButton.tsx
@@ -1,12 +1,15 @@
-import {Button} from '@sanity/ui'
 import React, {forwardRef, useMemo} from 'react'
 import {PaneMenuItem} from '../types'
+import {Button, ButtonProps} from '../../ui'
 import {IntentLink} from 'sanity/router'
 
 type RouterIntent = NonNullable<PaneMenuItem['intent']>
 
 export const IntentButton = forwardRef(function IntentButton(
-  props: {intent: RouterIntent} & Omit<React.ComponentProps<typeof Button>, 'as' | 'href' | 'type'>,
+  props: {
+    intent: RouterIntent
+  } & ButtonProps &
+    Omit<React.ComponentProps<typeof Button>, 'as' | 'href' | 'type'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
 ) {
   const {intent, ...restProps} = props
diff --git a/packages/sanity/src/desk/components/MissingDocumentTypesMessage.tsx b/packages/sanity/src/desk/components/MissingDocumentTypesMessage.tsx
new file mode 100644
index 00000000000..3cc1c153f3a
--- /dev/null
+++ b/packages/sanity/src/desk/components/MissingDocumentTypesMessage.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import {Box, Card, Container, Flex, Stack, Text} from '@sanity/ui'
+import {WarningOutlineIcon} from '@sanity/icons'
+import {useSource} from 'sanity'
+
+export function MissingDocumentTypesMessage() {
+  const {name: sourceName} = useSource()
+
+  return (
+    <Card height="fill">
+      <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+        <Container width={0}>
+          <Card padding={4} radius={2} shadow={1} tone="caution">
+            <Flex>
+              <Box>
+                <Text size={1}>
+                  <WarningOutlineIcon />
+                </Text>
+              </Box>
+              <Stack flex={1} marginLeft={3} space={3}>
+                <Text as="h1" size={1} weight="medium">
+                  No schema types in the <em>{sourceName}</em> source!
+                </Text>
+                <Text as="p" muted size={1}>
+                  Please add schema types in your source configuration.
+                </Text>
+                <Text as="p" muted size={1}>
+                  <a
+                    href="https://beta.sanity.io/docs/platform/studio/config"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Learn how to add a schema types &rarr;
+                  </a>
+                </Text>
+              </Stack>
+            </Flex>
+          </Card>
+        </Container>
+      </Flex>
+
+      {/* <Container>
+        <Stack space={5}>
+          <Heading as="h1">Empty schema</Heading>
+
+          <Text as="p">
+            Your schema does not contain any document types. If it did, those types would be listed
+            here.{' '}
+            <a
+              title="Schema documentation"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://www.sanity.io/docs/content-studio/the-schema"
+            >
+              Read more about how to add schema types
+            </a>
+            .
+          </Text>
+        </Stack>
+      </Container> */}
+    </Card>
+  )
+}
diff --git a/packages/sanity/src/desk/components/NotPublishedStatus.tsx b/packages/sanity/src/desk/components/NotPublishedStatus.tsx
new file mode 100644
index 00000000000..cca0705e201
--- /dev/null
+++ b/packages/sanity/src/desk/components/NotPublishedStatus.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import {UnpublishIcon} from '@sanity/icons'
+import {Text} from '@sanity/ui'
+import {Tooltip} from '../../ui'
+
+export function NotPublishedStatus() {
+  return (
+    <Tooltip content="Not published">
+      <Text muted>
+        <UnpublishIcon aria-label="Not published" />
+      </Text>
+    </Tooltip>
+  )
+}
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx
index fad7031ef03..a28eb62f65e 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx
@@ -1,6 +1,8 @@
 import React, {useMemo, useId} from 'react'
 import styled from 'styled-components'
-import {Box, Dialog, Button, Text, Spinner, Grid, Flex} from '@sanity/ui'
+import {Box, Flex} from '@sanity/ui'
+import {LoadingBlock} from '../../../ui/loadingBlock'
+import {Dialog} from '../../../ui'
 import {DocTitle} from '../DocTitle'
 import {structureLocaleNamespace} from '../../i18n'
 import {useReferringDocuments} from './useReferringDocuments'
@@ -8,9 +10,7 @@ import {ConfirmDeleteDialogBody} from './ConfirmDeleteDialogBody'
 import {useTranslation} from 'sanity'
 
 /** @internal */
-export const DialogBody = styled(Box).attrs({
-  padding: 4,
-})`
+export const DialogBody = styled(Box)`
   box-sizing: border-box;
 `
 
@@ -20,7 +20,7 @@ export const LoadingContainer = styled(Flex).attrs({
   direction: 'column',
   justify: 'center',
 })`
-  height: 300px;
+  height: 110px;
 `
 
 /** @internal */
@@ -77,28 +77,21 @@ export function ConfirmDeleteDialog({
       width={1}
       id={dialogId}
       header={t('confirm-delete-dialog.header.text', {context: action})}
-      footer={
-        <Grid columns={showConfirmButton ? 2 : 1} gap={2} paddingX={4} paddingY={3}>
-          <Button
-            mode="ghost"
-            onClick={onCancel}
-            text={t('confirm-delete-dialog.cancel-button.text')}
-          />
-
-          {showConfirmButton && (
-            <Button
-              data-testid="confirm-delete-button"
-              text={
+      footer={{
+        cancelButton: {
+          onClick: onCancel,
+          text: t('confirm-delete-dialog.cancel-button.text'),
+        },
+        confirmButton: showConfirmButton
+          ? {
+              text:
                 totalCount > 0
                   ? t('confirm-delete-dialog.confirm-anyway-button.text', {context: action})
-                  : t('confirm-delete-dialog.confirm-button.text', {context: action})
-              }
-              tone="critical"
-              onClick={onConfirm}
-            />
-          )}
-        </Grid>
-      }
+                  : t('confirm-delete-dialog.confirm-button.text', {context: action}),
+              onClick: onConfirm,
+            }
+          : undefined,
+      }}
       onClose={onCancel}
       onClickOutside={onCancel}
     >
@@ -118,12 +111,7 @@ export function ConfirmDeleteDialog({
           />
         ) : (
           <LoadingContainer data-testid="loading-container">
-            <Spinner muted />
-            <Box marginTop={3}>
-              <Text align="center" muted size={1}>
-                {t('confirm-delete-dialog.loading.text')}
-              </Text>
-            </Box>
+            <LoadingBlock title={t('confirm-delete-dialog.loading.text')} />
           </LoadingContainer>
         )}
       </DialogBody>
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
index c6429912018..3161c6cf58d 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
-import {rem, Flex, Text, Box, Tooltip, Container, Inline} from '@sanity/ui'
+import {rem, Flex, Text, Box, Inline} from '@sanity/ui'
 import {InfoOutlineIcon} from '@sanity/icons'
+import {Tooltip} from '../../../ui'
 import {structureLocaleNamespace} from '../../i18n'
 import {useTranslation} from 'sanity'
 
@@ -55,26 +56,22 @@ export const OtherReferenceCount = (props: {totalCount: number; references: unkn
   if (!difference) return null
 
   return (
-    <Inline space={2}>
-      <Text size={1} muted>
-        {t('confirm-delete-dialog.other-reference-count.title', {count: difference})}
-      </Text>
-
-      <Tooltip
-        portal
-        placement="top"
-        content={
-          <Container width={0}>
-            <Box padding={2}>
-              <Text size={1}>{t('confirm-delete-dialog.other-reference-count.tooltip')}</Text>
-            </Box>
-          </Container>
-        }
-      >
+    <Box padding={2}>
+      <Inline space={2}>
         <Text size={1} muted>
-          <InfoOutlineIcon />
+          {t('confirm-delete-dialog.other-reference-count.title', {count: difference})}
         </Text>
-      </Tooltip>
-    </Inline>
+
+        <Tooltip
+          portal
+          placement="top"
+          content={t('confirm-delete-dialog.other-reference-count.tooltip')}
+        >
+          <Text size={1} muted>
+            <InfoOutlineIcon />
+          </Text>
+        </Tooltip>
+      </Inline>
+    </Box>
   )
 }
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx
index 219d0f45351..d07c95bd260 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx
@@ -1,13 +1,14 @@
 import React, {useCallback} from 'react'
 import {
-  WarningOutlineIcon,
   DocumentsIcon,
   CopyIcon,
   UnknownIcon,
   ChevronDownIcon,
+  WarningOutlineIcon,
 } from '@sanity/icons'
-import {useToast, Text, Box, Button, Flex, Label, Card, Stack} from '@sanity/ui'
+import {useToast, Text, Box, Flex, Card, Stack} from '@sanity/ui'
 import CopyToClipboard from 'react-copy-to-clipboard'
+import {Button} from '../../../ui'
 import {structureLocaleNamespace} from '../../i18n'
 import {ReferencePreviewLink} from './ReferencePreviewLink'
 import {ReferringDocuments} from './useReferringDocuments'
@@ -71,7 +72,7 @@ export function ConfirmDeleteDialogBody({
 
   if (internalReferences?.totalCount === 0 && crossDatasetReferences?.totalCount === 0) {
     return (
-      <Text as="p">
+      <Text as="p" size={1}>
         <Translate
           t={t}
           i18nKey="confirm-delete-dialog.confirmation.text"
@@ -98,8 +99,8 @@ export function ConfirmDeleteDialogBody({
   })
 
   return (
-    <Card>
-      <Card padding={3} radius={2} tone="caution" marginBottom={4} flex="none">
+    <Flex direction="column" gap={4}>
+      <Card padding={3} radius={2} tone="caution" flex="none">
         <Flex>
           <Text aria-hidden="true" size={1}>
             <WarningOutlineIcon />
@@ -116,9 +117,8 @@ export function ConfirmDeleteDialogBody({
           </Box>
         </Flex>
       </Card>
-
-      <Box flex="none" marginBottom={4}>
-        <Text>
+      <Box flex="none">
+        <Text size={1}>
           <Translate
             i18nKey="confirm-delete-dialog.referring-documents-descriptor.text"
             t={t}
@@ -127,11 +127,10 @@ export function ConfirmDeleteDialogBody({
           />
         </Text>
       </Box>
-
-      <Card radius={2} shadow={1} marginBottom={4} flex="auto">
+      <Card radius={2} shadow={1} flex="auto" padding={2}>
         <Flex direction="column">
           {internalReferences.totalCount > 0 && (
-            <Stack as="ul" padding={2} space={3} data-testid="internal-references">
+            <Stack as="ul" marginBottom={2} space={2} data-testid="internal-references">
               {internalReferences?.references.map((item) => (
                 <Box as="li" key={item._id}>
                   {renderPreviewItem(item)}
@@ -158,9 +157,15 @@ export function ConfirmDeleteDialogBody({
               }}
             >
               <CrossDatasetReferencesSummary>
-                <Card as="a" margin={2} radius={2} shadow={1} paddingY={1}>
-                  <Flex align="center" margin={2}>
-                    <Box marginLeft={3} marginRight={4}>
+                <Card
+                  as="a"
+                  marginTop={internalReferences.totalCount > 0 ? 2 : 0}
+                  radius={2}
+                  shadow={1}
+                  paddingY={1}
+                >
+                  <Flex align="center" margin={2} marginRight={3}>
+                    <Box marginLeft={3} marginRight={3}>
                       <Text size={3}>
                         <DocumentsIcon />
                       </Text>
@@ -191,24 +196,24 @@ export function ConfirmDeleteDialogBody({
                 </Card>
               </CrossDatasetReferencesSummary>
 
-              <Box overflow="auto" paddingBottom={2} paddingX={2}>
+              <Box overflow="auto" paddingTop={2}>
                 <Table>
                   <thead>
                     <tr>
                       <th>
-                        <Label muted size={0} style={{minWidth: '5rem'}}>
+                        <Text muted size={1} style={{minWidth: '5rem'}} weight="medium">
                           {t('confirm-delete-dialog.cdr-table.project-id.label')}
-                        </Label>
+                        </Text>
                       </th>
                       <th>
-                        <Label muted size={0}>
+                        <Text muted size={1} weight="medium">
                           {t('confirm-delete-dialog.cdr-table.dataset.label')}
-                        </Label>
+                        </Text>
                       </th>
                       <th>
-                        <Label muted size={0}>
+                        <Text muted size={1} weight="medium">
                           {t('confirm-delete-dialog.cdr-table.document-id.label')}
-                        </Label>
+                        </Text>
                       </th>
                     </tr>
                   </thead>
@@ -245,12 +250,13 @@ export function ConfirmDeleteDialogBody({
                                   }}
                                 >
                                   <Button
-                                    title={t(
-                                      'confirm-delete-dialog.cdr-table.copy-id-button.tooltip',
-                                    )}
                                     mode="bleed"
                                     icon={CopyIcon}
-                                    fontSize={0}
+                                    tooltipProps={{
+                                      content: t(
+                                        'confirm-delete-dialog.cdr-table.copy-id-button.tooltip',
+                                      ),
+                                    }}
                                   />
                                 </CopyToClipboard>
                               )}
@@ -261,17 +267,14 @@ export function ConfirmDeleteDialogBody({
                   </tbody>
                 </Table>
 
-                <Box padding={2}>
-                  <OtherReferenceCount {...crossDatasetReferences} />
-                </Box>
+                <OtherReferenceCount {...crossDatasetReferences} />
               </Box>
             </CrossDatasetReferencesDetails>
           )}
         </Flex>
       </Card>
-
       <Box flex="none">
-        <Text>
+        <Text size={1}>
           <Translate
             i18nKey="confirm-delete-dialog.referential-integrity-disclaimer.text"
             t={t}
@@ -280,6 +283,6 @@ export function ConfirmDeleteDialogBody({
           />
         </Text>
       </Box>
-    </Card>
+    </Flex>
   )
 }
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/index.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/index.tsx
index 3212479379a..6181826960a 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/index.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/index.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useState, useId} from 'react'
-import {Box, Flex, Button, Dialog, Text, ErrorBoundary} from '@sanity/ui'
+import {Box, ErrorBoundary, Text} from '@sanity/ui'
+import {Dialog} from '../../../ui'
 import {structureLocaleNamespace} from '../../i18n'
 import {ConfirmDeleteDialog, ConfirmDeleteDialogProps} from './ConfirmDeleteDialog'
 import {useTranslation} from 'sanity'
@@ -21,19 +22,17 @@ function ConfirmDeleteDialogContainer(props: ConfirmDeleteDialogProps) {
       id={`dialog-error-${id}`}
       data-testid="confirm-delete-error-dialog"
       header={t('confirm-delete-dialog.error.title.text')}
-      footer={
-        <Flex paddingX={4} paddingY={3} direction="column">
-          <Button
-            mode="ghost"
-            text={t('confirm-delete-dialog.error.retry-button.text')}
-            onClick={handleRetry}
-          />
-        </Flex>
-      }
+      footer={{
+        confirmButton: {
+          text: t('confirm-delete-dialog.error.retry-button.text'),
+          onClick: handleRetry,
+          tone: 'default',
+        },
+      }}
       onClose={props.onCancel}
     >
       <Box padding={4}>
-        <Text>{t('confirm-delete-dialog.error.message.text')}</Text>
+        <Text size={1}>{t('confirm-delete-dialog.error.message.text')}</Text>
       </Box>
     </Dialog>
   ) : (
diff --git a/packages/sanity/src/desk/components/deskTool/NoDocumentTypesScreen.tsx b/packages/sanity/src/desk/components/deskTool/NoDocumentTypesScreen.tsx
index aeb2fcfcfd0..4a5b8def7d6 100644
--- a/packages/sanity/src/desk/components/deskTool/NoDocumentTypesScreen.tsx
+++ b/packages/sanity/src/desk/components/deskTool/NoDocumentTypesScreen.tsx
@@ -19,7 +19,7 @@ export function NoDocumentTypesScreen() {
                 </Text>
               </Box>
               <Stack flex={1} marginLeft={3} space={3}>
-                <Text as="h1" size={1} weight="bold">
+                <Text as="h1" size={1} weight="medium">
                   {t('no-document-types-screen.title')}
                 </Text>
                 <Text as="p" muted size={1}>
diff --git a/packages/sanity/src/desk/components/deskTool/StructureError.tsx b/packages/sanity/src/desk/components/deskTool/StructureError.tsx
index f59e9eea206..3d4d9e36885 100644
--- a/packages/sanity/src/desk/components/deskTool/StructureError.tsx
+++ b/packages/sanity/src/desk/components/deskTool/StructureError.tsx
@@ -1,8 +1,9 @@
 import {generateHelpUrl} from '@sanity/generate-help-url'
-import {Box, Button, Card, Code, Container, Heading, Label, Stack, Text} from '@sanity/ui'
+import {Box, Card, Code, Container, Heading, Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import styled from 'styled-components'
 import {SyncIcon} from '@sanity/icons'
+import {Button} from '../../../ui'
 import {SerializeError} from '../../structureBuilder'
 import {PaneResolutionError} from '../../structureResolvers'
 import {structureLocaleNamespace} from '../../i18n'
@@ -62,7 +63,9 @@ export function StructureError({error}: StructureErrorProps) {
         <Card marginTop={4} padding={4} radius={2} overflow="auto" shadow={1} tone="inherit">
           {path.length > 0 && (
             <Stack space={2}>
-              <Label>{t('structure-error.structure-path.label')}</Label>
+              <Text size={1} weight="medium">
+                {t('structure-error.structure-path.label')}
+              </Text>
               <Code>
                 {/* TODO: it seems like the path is off by one and includes */}
                 {/* `root` twice  */}
@@ -75,7 +78,9 @@ export function StructureError({error}: StructureErrorProps) {
           )}
 
           <Stack marginTop={4} space={2}>
-            <Label>{t('structure-error.error.label')}</Label>
+            <Text size={1} weight="medium">
+              {t('structure-error.error.label')}
+            </Text>
             <Code>{showStack ? formatStack(stack) : error.message}</Code>
           </Stack>
 
diff --git a/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx b/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
index f2953dd4b72..b64f7a56483 100644
--- a/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
@@ -1,4 +1,4 @@
-import {EllipsisVerticalIcon} from '@sanity/icons'
+import {EllipsisHorizontalIcon} from '@sanity/icons'
 import {Menu, MenuButton, PopoverProps} from '@sanity/ui'
 import React, {useId} from 'react'
 import {structureLocaleNamespace} from '../../i18n'
@@ -42,11 +42,16 @@ export function PaneContextMenuButton(props: PaneContextMenuButtonProps) {
     <MenuButton
       button={
         <StatusButton
-          icon={EllipsisVerticalIcon}
+          icon={EllipsisHorizontalIcon}
           mode="bleed"
-          title={t('pane-header.context-menu-button.tooltip')}
           // eslint-disable-next-line no-nested-ternary
           tone={hasCritical ? 'critical' : hasCaution ? 'caution' : undefined}
+          tooltipProps={{
+            // @todo: replace with localized text
+            content: 'Show more',
+            placement: 'bottom',
+            portal: true,
+          }}
         />
       }
       id={id}
diff --git a/packages/sanity/src/desk/components/pane/PaneFooter.styles.tsx b/packages/sanity/src/desk/components/pane/PaneFooter.styles.tsx
index 31bf4a4f4ca..93a3fcf3923 100644
--- a/packages/sanity/src/desk/components/pane/PaneFooter.styles.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneFooter.styles.tsx
@@ -12,7 +12,7 @@ export const Root = styled(Layer)`
     left: 0;
     right: 0;
     top: -1px;
-    border-bottom: 1px solid var(--card-shadow-outline-color);
+    border-bottom: 1px solid var(--card-border-color);
   }
 `
 
diff --git a/packages/sanity/src/desk/components/pane/PaneHeader.styles.tsx b/packages/sanity/src/desk/components/pane/PaneHeader.styles.tsx
index 4e33a3810d8..241b6282bb9 100644
--- a/packages/sanity/src/desk/components/pane/PaneHeader.styles.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneHeader.styles.tsx
@@ -1,21 +1,28 @@
 import {Box, Flex, Layer, rgba, TextSkeleton, Text, Theme, Card} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 
-export const Root = styled(Layer)`
-  line-height: 0;
-  position: sticky;
-  top: 0;
+interface RootProps {
+  $border?: boolean
+}
 
-  &:not([data-collapsed]):after {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -1px;
-    border-bottom: 1px solid var(--card-shadow-outline-color);
-  }
-`
+export const Root = styled(Layer)<RootProps>(({$border}) => {
+  return css`
+    line-height: 0;
+    position: sticky;
+    top: 0;
+
+    &:not([data-collapsed]):after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: -1px;
+      border-bottom: 1px solid ${$border ? 'var(--card-border-color)' : 'transparent'};
+      opacity: 1;
+    }
+  `
+})
 
 export const Layout = styled(Flex)`
   transform-origin: calc(51px / 2);
diff --git a/packages/sanity/src/desk/components/pane/PaneHeader.tsx b/packages/sanity/src/desk/components/pane/PaneHeader.tsx
index e6bd36e39be..5b5f984eb6e 100644
--- a/packages/sanity/src/desk/components/pane/PaneHeader.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneHeader.tsx
@@ -10,6 +10,7 @@ import {LegacyLayerProvider} from 'sanity'
 export interface PaneHeaderProps {
   actions?: React.ReactNode
   backButton?: React.ReactNode
+  border?: boolean
   contentAfter?: React.ReactNode
   loading?: boolean
   subActions?: React.ReactNode
@@ -27,7 +28,8 @@ export const PaneHeader = forwardRef(function PaneHeader(
   props: PaneHeaderProps,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {actions, backButton, contentAfter, loading, subActions, tabs, tabIndex, title} = props
+  const {actions, backButton, border, contentAfter, loading, subActions, tabs, tabIndex, title} =
+    props
   const {collapse, collapsed, expand, rootElement: paneElement} = usePane()
   const paneRect = useElementRect(paneElement || null)
 
@@ -52,10 +54,23 @@ export const PaneHeader = forwardRef(function PaneHeader(
 
   return (
     <LayerProvider zOffset={100}>
-      <Root data-collapsed={collapsed ? '' : undefined} data-testid="pane-header" ref={ref}>
+      <Root
+        $border={border}
+        data-collapsed={collapsed ? '' : undefined}
+        data-testid="pane-header"
+        ref={ref}
+      >
         <LegacyLayerProvider zOffset="paneHeader">
           <Card data-collapsed={collapsed ? '' : undefined} tone="inherit">
-            <Layout onClick={handleLayoutClick} padding={2} sizing="border" style={layoutStyle}>
+            <Layout
+              onClick={handleLayoutClick}
+              paddingBottom={1}
+              paddingTop={collapsed ? 1 : 2}
+              paddingX={3}
+              marginY={collapsed ? 1 : 0}
+              sizing="border"
+              style={layoutStyle}
+            >
               {backButton && (
                 <Box flex="none" padding={1}>
                   {backButton}
@@ -68,13 +83,13 @@ export const PaneHeader = forwardRef(function PaneHeader(
                 forwardedAs="button"
                 marginRight={actions ? 1 : 0}
                 onClick={handleTitleClick}
-                paddingLeft={backButton ? 1 : 3}
+                paddingLeft={backButton ? 1 : 2}
                 paddingY={3}
                 tabIndex={tabIndex}
               >
-                {loading && <TitleTextSkeleton animated radius={1} />}
+                {loading && <TitleTextSkeleton animated radius={1} size={1} />}
                 {!loading && (
-                  <TitleText textOverflow="ellipsis" weight="semibold">
+                  <TitleText size={1} textOverflow="ellipsis" weight="semibold">
                     {title}
                   </TitleText>
                 )}
@@ -94,7 +109,6 @@ export const PaneHeader = forwardRef(function PaneHeader(
                 overflow="auto"
                 paddingBottom={3}
                 paddingX={3}
-                paddingTop={1}
               >
                 <TabsBox flex={1} marginRight={subActions ? 3 : 0}>
                   {tabs}
diff --git a/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx b/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx
index fb2a210430d..1966d421123 100644
--- a/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx
@@ -1,26 +1,41 @@
 import React, {MouseEvent, useCallback, useId} from 'react'
-import {ButtonProps, Menu, MenuButton, Text} from '@sanity/ui'
+import {Menu, MenuButton} from '@sanity/ui'
 import {UnknownIcon} from '@sanity/icons'
 import {Intent} from '../../structureBuilder'
+import {Button} from '../../../ui'
 import {_PaneMenuGroup, _PaneMenuItem} from './types'
 import {PaneMenuButtonItem} from './PaneMenuButtonItem'
 import {TooltipOfDisabled, StatusButton, useI18nText} from 'sanity'
 import {useIntentLink} from 'sanity/router'
 
+function getDisabledReason(node: _PaneMenuItem) {
+  /**
+   * This component supports receiving a `reason: string | react.ReactNode`.
+   * We are casting it as string, to avoid the ts error, as content will be rendered into the tooltip which only accepts string, but it won't crash if it's a ReactNode.
+   * For the aria label, we want to check if it's actually a string, to avoid generating an aria-label with the value `[object Object]`.
+   */
+  const disabledReason =
+    typeof node.disabled === 'object' ? (node.disabled.reason as string) : undefined
+  const ariaLabel =
+    typeof node.disabled === 'object' && typeof node.disabled?.reason === 'string'
+      ? node.disabled.reason
+      : 'This is disabled'
+
+  return {disabledReason, ariaLabel, isDisabled: Boolean(node.disabled)}
+}
 export interface PaneHeaderActionButtonProps {
   node: _PaneMenuItem | _PaneMenuGroup
-  padding?: ButtonProps['padding']
 }
 
 export function PaneHeaderActionButton(props: PaneHeaderActionButtonProps) {
-  const {node, padding} = props
+  const {node} = props
 
   if (node.type === 'item') {
-    return <PaneHeaderMenuItemActionButton node={node} padding={padding} />
+    return <PaneHeaderMenuItemActionButton node={node} />
   }
 
   if (node.type === 'group') {
-    return <PaneHeaderMenuGroupActionButton node={node} padding={padding} />
+    return <PaneHeaderMenuGroupActionButton node={node} />
   }
 
   console.warn('unknown menu node (expected `type: "item" | "group"`):', node)
@@ -30,47 +45,37 @@ export function PaneHeaderActionButton(props: PaneHeaderActionButtonProps) {
 
 export interface PaneHeaderMenuItemActionButtonProps {
   node: _PaneMenuItem
-  padding?: ButtonProps['padding']
 }
 
 export function PaneHeaderMenuItemActionButton(props: PaneHeaderMenuItemActionButtonProps) {
-  const {node, padding} = props
+  const {node} = props
   const {title} = useI18nText(node)
 
   if (node.intent) {
     return <PaneHeaderActionIntentButton {...props} intent={node.intent} />
   }
 
-  const disabledTooltipContent = typeof node.disabled === 'object' && (
-    <Text size={1}>{node.disabled.reason}</Text>
-  )
+  const {disabledReason, ariaLabel, isDisabled} = getDisabledReason(node)
 
   return (
-    <TooltipOfDisabled content={disabledTooltipContent} placement="bottom">
-      <StatusButton
-        disabled={Boolean(node.disabled)}
-        hotkey={node.hotkey?.split('+')}
-        icon={node.icon}
-        label={disabledTooltipContent ? undefined : title}
-        // eslint-disable-next-line react/jsx-handler-names
-        onClick={node.onAction}
-        padding={padding}
-        selected={node.selected}
-        tone={node.tone}
-      />
-    </TooltipOfDisabled>
+    <StatusButton
+      disabled={Boolean(node.disabled)}
+      icon={node.icon}
+      // eslint-disable-next-line react/jsx-handler-names
+      onClick={node.onAction}
+      selected={node.selected}
+      tone={node.tone}
+      aria-label={ariaLabel}
+      tooltipProps={{
+        hotkeys: !isDisabled && node.hotkey ? node.hotkey.split('+') : undefined,
+        content: isDisabled ? disabledReason : title,
+      }}
+    />
   )
 }
 
-function PaneHeaderActionIntentButton(props: {
-  intent: Intent
-  node: _PaneMenuItem
-  padding?: ButtonProps['padding']
-}) {
-  const {intent, node, padding} = props
-  const disabledTooltipContent = typeof node.disabled === 'object' && (
-    <Text size={1}>{node.disabled.reason}</Text>
-  )
+function PaneHeaderActionIntentButton(props: {intent: Intent; node: _PaneMenuItem}) {
+  const {intent, node} = props
   const intentLink = useIntentLink({intent: intent.type, params: intent.params})
 
   const handleClick = useCallback(
@@ -81,41 +86,44 @@ function PaneHeaderActionIntentButton(props: {
     [intentLink, node],
   )
 
+  const {disabledReason, ariaLabel, isDisabled} = getDisabledReason(node)
+
   return (
-    <TooltipOfDisabled content={disabledTooltipContent} placement="bottom">
-      <StatusButton
-        as="a"
-        disabled={Boolean(node.disabled)}
-        hotkey={node.hotkey?.split('+')}
-        href={intentLink.href}
-        icon={node.icon}
-        label={disabledTooltipContent ? undefined : node.title}
-        onClick={handleClick}
-        padding={padding}
-        selected={node.selected}
-        tone={node.tone}
-      />
-    </TooltipOfDisabled>
+    <StatusButton
+      as="a"
+      disabled={isDisabled}
+      href={intentLink.href}
+      icon={node.icon}
+      onClick={handleClick}
+      selected={node.selected}
+      tone={node.tone}
+      aria-label={ariaLabel}
+      tooltipProps={{
+        hotkeys: !isDisabled && node.hotkey ? node.hotkey.split('+') : undefined,
+        content: isDisabled ? disabledReason : node.title,
+        placement: 'bottom',
+        portal: true,
+      }}
+    />
   )
 }
 
 export interface PaneHeaderMenuGroupActionButtonProps {
   node: _PaneMenuGroup
-  padding?: ButtonProps['padding']
 }
 
 function PaneHeaderMenuGroupActionButton(props: PaneHeaderMenuGroupActionButtonProps) {
-  const {node, padding} = props
+  const {node} = props
   const {title} = useI18nText(node)
 
   return (
     <MenuButton
       button={
-        <StatusButton
-          disabled={node.disabled}
+        <Button
+          disabled={!!node.disabled}
           icon={node.icon ?? UnknownIcon}
           label={title}
-          padding={padding}
+          tooltipProps={{content: node.title, portal: true}}
         />
       }
       id={useId()}
diff --git a/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx b/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx
index 92e9b16d4be..d3ab184a261 100644
--- a/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx
@@ -1,7 +1,8 @@
 import {CheckmarkIcon} from '@sanity/icons'
-import {Box, Label, MenuDivider, MenuGroup, MenuItem, PopoverProps, Text} from '@sanity/ui'
+import {MenuDivider, PopoverProps, Text} from '@sanity/ui'
 import React, {useCallback, MouseEvent} from 'react'
 import {Intent} from '../../structureBuilder'
+import {MenuGroup, MenuItem} from '../../../ui'
 import {_PaneMenuItem, _PaneMenuNode} from './types'
 import {TooltipOfDisabled, useGetI18nText, useI18nText} from 'sanity'
 import {useIntentLink} from 'sanity/router'
@@ -35,13 +36,6 @@ export function PaneMenuButtonItem(props: {
       return (
         <>
           {isAfterGroup && <MenuDivider />}
-          {title && (
-            <Box padding={2} paddingBottom={1}>
-              <Label muted size={0}>
-                {title}
-              </Label>
-            </Box>
-          )}
           {node.children.map((child, childIndex) => (
             <PaneMenuButtonItem
               disabled={disabled || Boolean(node.disabled)}
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx b/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx
index 7cc4e7d9446..5b1605f7e86 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx
@@ -2,11 +2,8 @@ import {AddIcon, CloseIcon, RestoreIcon} from '@sanity/icons'
 import {Path} from '@sanity/types'
 import {
   BoundaryElementProvider,
-  Box,
-  Button,
   Card,
   Container,
-  Dialog,
   DialogProvider,
   Flex,
   LayerProvider,
@@ -19,6 +16,7 @@ import {
 import {useAction} from '@sanity/ui-workshop'
 import React, {useCallback, useState} from 'react'
 import styled from 'styled-components'
+import {Button, Dialog} from '../../../../ui'
 import {Pane} from '../Pane'
 import {PaneContent} from '../PaneContent'
 import {PaneFooter} from '../PaneFooter'
@@ -157,6 +155,7 @@ export default function ChangeConnectorsStory() {
                       mode="bleed"
                       onClick={toggleReviewChanges}
                       selected={reviewChanges}
+                      tooltipProps={{content: 'Review changes'}}
                     />
                   </PaneFooter>
                 </Pane>
@@ -165,7 +164,12 @@ export default function ChangeConnectorsStory() {
                   <Pane id="review-changes-panel">
                     <PaneHeader
                       actions={
-                        <Button icon={CloseIcon} mode="bleed" onClick={closeReviewChanges} />
+                        <Button
+                          icon={CloseIcon}
+                          mode="bleed"
+                          onClick={closeReviewChanges}
+                          tooltipProps={{content: 'Close'}}
+                        />
                       }
                       title="Changes"
                     />
@@ -212,7 +216,7 @@ function StringField(props: {
 
   return (
     <Stack space={2}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         String
       </Text>
       <DebugFormField path={path} focusPath={focusPath} value={value} compareValue={compareValue}>
@@ -220,15 +224,18 @@ function StringField(props: {
       </DebugFormField>
 
       <div>
-        <Button icon={<AddIcon />} mode="ghost" onClick={handleOpen} />
+        <Button
+          icon={<AddIcon />}
+          mode="ghost"
+          onClick={handleOpen}
+          tooltipProps={{content: 'Add'}}
+        />
       </div>
 
       {open && (
         <DialogProvider position="absolute">
           <Dialog id={`${path.join('-')}-dialog`} onClickOutside={handleClose}>
-            <Box padding={4}>
-              <Text>Dialog</Text>
-            </Box>
+            <Text size={1}>Dialog</Text>
           </Dialog>
         </DialogProvider>
       )}
@@ -265,7 +272,7 @@ function DebugDiffField(props: {children?: React.ReactNode; path: Path}) {
 
   return (
     <Stack space={2}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         String
       </Text>
       <ChangeFieldWrapper hasHover={hovered} path={path}>
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx b/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx
index 9425be50d07..686222f1b12 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx
@@ -1,7 +1,8 @@
-import {EllipsisVerticalIcon, SelectIcon} from '@sanity/icons'
-import {Button, Container, Stack, Tab, TabList, Text} from '@sanity/ui'
+import {ChevronDownIcon, EllipsisHorizontalIcon} from '@sanity/icons'
+import {Container, Stack, TabList, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import React, {useMemo} from 'react'
+import {Button, Tab} from '../../../../ui'
 import {Pane} from '../Pane'
 import {PaneContent} from '../PaneContent'
 import {PaneFooter} from '../PaneFooter'
@@ -21,38 +22,31 @@ export default function ExampleStory() {
   const manyTabs = useBoolean('Many tabs', false, 'Props')
   const tone = useSelect('Tone', PANE_TONE_OPTIONS, 'default', 'Props')
 
-  const actions = useMemo(() => <Button icon={EllipsisVerticalIcon} mode="bleed" />, [])
+  const actions = useMemo(
+    () => (
+      <Button icon={EllipsisHorizontalIcon} mode="bleed" tooltipProps={{content: 'Show more'}} />
+    ),
+    [],
+  )
   const tabs = useMemo(
     () =>
       manyTabs ? (
         <TabList space={1}>
-          <Tab
-            aria-controls="content-panel"
-            fontSize={1}
-            id="content-tab"
-            label="Content"
-            selected
-          />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
+          <Tab aria-controls="content-panel" id="content-tab" label="Content" selected />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
         </TabList>
       ) : (
         <TabList space={1}>
-          <Tab
-            aria-controls="content-panel"
-            fontSize={1}
-            id="content-tab"
-            label="Content"
-            selected
-          />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
+          <Tab aria-controls="content-panel" id="content-tab" label="Content" selected />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
         </TabList>
       ),
     [manyTabs],
@@ -63,9 +57,7 @@ export default function ExampleStory() {
       <Pane id="example-pane" minWidth={320} tone={tone}>
         <PaneHeader
           actions={actions}
-          subActions={
-            <Button fontSize={1} iconRight={SelectIcon} mode="bleed" padding={2} text="Latest" />
-          }
+          subActions={<Button iconRight={ChevronDownIcon} mode="bleed" text="Latest" />}
           tabs={tabs}
           title={<>Header</>}
         />
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
index a89ebc4bd73..790350b3e13 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
@@ -1,15 +1,7 @@
 import {ChevronDownIcon, PublishIcon} from '@sanity/icons'
-import {
-  Button,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuButtonProps,
-  MenuItem,
-  Stack,
-  useToast,
-} from '@sanity/ui'
+import {Flex, Menu, MenuButton, MenuButtonProps, Stack, useToast} from '@sanity/ui'
 import React, {useCallback} from 'react'
+import {Button, MenuItem} from '../../../../../../ui'
 
 const MENU_BUTTON_POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
@@ -27,10 +19,12 @@ export function DocumentActions() {
   return (
     <Flex gap={1}>
       <Stack flex={1}>
-        <Button icon={PublishIcon} onClick={publish} text="Publish" tone="positive" />
+        <Button icon={PublishIcon} onClick={publish} text="Publish" tone="default" />
       </Stack>
       <MenuButton
-        button={<Button icon={ChevronDownIcon} mode="ghost" />}
+        button={
+          <Button icon={ChevronDownIcon} mode="ghost" tooltipProps={{content: 'Show more'}} />
+        }
         id="actions"
         menu={
           <Menu>
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentViewPanel.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentViewPanel.tsx
index d986f7bf34a..3e5b0c4f7ea 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentViewPanel.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentViewPanel.tsx
@@ -1,6 +1,7 @@
 import {ArrowLeftIcon, RestoreIcon} from '@sanity/icons'
-import {Box, Button, Flex, Text, Stack, Container} from '@sanity/ui'
+import {Box, Flex, Text, Stack, Container} from '@sanity/ui'
 import React from 'react'
+import {Button} from '../../../../../../ui'
 import {PaneContent} from '../../../PaneContent'
 import {PaneFooter} from '../../../PaneFooter'
 import {PaneHeader} from '../../../PaneHeader'
@@ -25,7 +26,14 @@ export function DocumentViewPanel(props: {
     >
       <PaneHeader
         backButton={
-          layoutCollapsed && <Button icon={ArrowLeftIcon} mode="bleed" onClick={onBackClick} />
+          layoutCollapsed && (
+            <Button
+              icon={ArrowLeftIcon}
+              mode="bleed"
+              onClick={onBackClick}
+              tooltipProps={{content: 'Back'}}
+            />
+          )
         }
         title={title}
       />
@@ -96,6 +104,7 @@ export function DocumentViewPanel(props: {
               mode="bleed"
               onClick={toggleReviewChanges}
               selected={reviewChanges}
+              tooltipProps={{content: "Review document's history"}}
             />
           </Box>
           <Box flex={1} style={{maxWidth: '260px'}}>
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/ReviewChangesPanel.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/ReviewChangesPanel.tsx
index e3854eecef8..1cc5ec08f59 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/ReviewChangesPanel.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/ReviewChangesPanel.tsx
@@ -1,6 +1,7 @@
 import {CloseIcon} from '@sanity/icons'
-import {Button, Flex} from '@sanity/ui'
+import {Flex} from '@sanity/ui'
 import React from 'react'
+import {Button} from '../../../../../../ui'
 import {PaneHeader} from '../../../PaneHeader'
 import {usePane} from '../../../usePane'
 
@@ -19,7 +20,14 @@ export function ReviewChangesPanel(props: {onClose: () => void}) {
       }}
     >
       <PaneHeader
-        actions={<Button icon={CloseIcon} mode="bleed" onClick={props.onClose} />}
+        actions={
+          <Button
+            icon={CloseIcon}
+            mode="bleed"
+            onClick={props.onClose}
+            tooltipProps={{content: 'Close'}}
+          />
+        }
         title="Review changes"
       />
     </Flex>
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx
index be32ac3651c..39b7e918247 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx
@@ -1,6 +1,7 @@
-import {ArrowLeftIcon, ChevronRightIcon, EllipsisVerticalIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Stack, Text} from '@sanity/ui'
+import {ArrowLeftIcon, ChevronRightIcon, EllipsisHorizontalIcon} from '@sanity/icons'
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
+import {Button} from '../../../../../../ui'
 import {usePaneLayout} from '../../../usePaneLayout'
 import {Pane} from '../../../Pane'
 import {PaneContent} from '../../../PaneContent'
@@ -24,10 +25,23 @@ export function ListPane(props: {
   return (
     <Pane currentMaxWidth={350} flex={1} id={String(index)} minWidth={320} maxWidth={640}>
       <PaneHeader
-        actions={<Button icon={EllipsisVerticalIcon} mode="bleed" />}
+        actions={
+          <Button
+            icon={EllipsisHorizontalIcon}
+            mode="bleed"
+            tooltipProps={{content: 'Show more'}}
+          />
+        }
         backButton={
           index > 0 &&
-          layoutCollapsed && <Button icon={ArrowLeftIcon} mode="bleed" onClick={handleBackClick} />
+          layoutCollapsed && (
+            <Button
+              icon={ArrowLeftIcon}
+              mode="bleed"
+              onClick={handleBackClick}
+              tooltipProps={{content: 'Back'}}
+            />
+          )
         }
         title={node.title}
       />
diff --git a/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx b/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
index 2d1001b0f80..20a79e47687 100644
--- a/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
+++ b/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
@@ -1,5 +1,5 @@
-import {Tooltip, Text, Box} from '@sanity/ui'
 import React from 'react'
+import {TooltipWithNodes} from '../../../ui'
 import {structureLocaleNamespace} from '../../i18n'
 import {useCurrentUser, InsufficientPermissionsMessage, useTranslation} from 'sanity'
 
@@ -28,12 +28,10 @@ export function InsufficientPermissionsMessageTooltip({
   }
 
   return (
-    <Tooltip
+    <TooltipWithNodes
       content={
         loading ? (
-          <Box padding={2}>
-            <Text>{t('insufficient-permissions-message-tooltip.loading-text')}</Text>
-          </Box>
+          t('insufficient-permissions-message-tooltip.loading-text')
         ) : (
           <InsufficientPermissionsMessage context={context} currentUser={currentUser} />
         )
@@ -43,6 +41,6 @@ export function InsufficientPermissionsMessageTooltip({
       {/* this wrapping div is to allow mouse events */}
       {/* while the child element is disabled */}
       <div>{children}</div>
-    </Tooltip>
+    </TooltipWithNodes>
   )
 }
diff --git a/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx b/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
index df83b5806ad..5c5584127de 100644
--- a/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
+++ b/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
@@ -1,7 +1,8 @@
 import {AddIcon} from '@sanity/icons'
 import React, {useMemo, forwardRef} from 'react'
-import {Box, Button, Label, Menu, MenuButton, MenuItem, PopoverProps} from '@sanity/ui'
+import {Menu, MenuButton, PopoverProps} from '@sanity/ui'
 import {Schema} from '@sanity/types'
+import {Button, MenuItem} from '../../../ui'
 import {IntentButton} from '../IntentButton'
 import {structureLocaleNamespace} from '../../i18n'
 import {InsufficientPermissionsMessageTooltip} from './InsufficientPermissionsMessageTooltip'
@@ -87,10 +88,12 @@ export function PaneHeaderCreateButton({templateItems}: PaneHeaderCreateButtonPr
       >
         <Button
           aria-label={t('pane-header.disabled-created-button.aria-label')}
+          icon={AddIcon}
           data-testid="action-intent-button"
           disabled
-          icon={AddIcon}
           mode="bleed"
+          // This button handles the tooltip in a special way, won't reuse the forced tooltip.
+          tooltipProps={null}
         />
       </InsufficientPermissionsMessageTooltip>
     )
@@ -116,6 +119,7 @@ export function PaneHeaderCreateButton({templateItems}: PaneHeaderCreateButtonPr
           mode="bleed"
           disabled={disabled}
           data-testid="action-intent-button"
+          tooltipProps={disabled ? null : {content: 'Create new document'}}
         />
       </InsufficientPermissionsMessageTooltip>
     )
@@ -123,14 +127,18 @@ export function PaneHeaderCreateButton({templateItems}: PaneHeaderCreateButtonPr
 
   return (
     <MenuButton
-      button={<Button icon={AddIcon} mode="bleed" data-testid="multi-action-intent-button" />}
+      button={
+        <Button
+          icon={AddIcon}
+          mode="bleed"
+          data-testid="multi-action-intent-button"
+          // @todo: localize
+          tooltipProps={{content: 'Create new document'}}
+        />
+      }
       id="create-menu"
       menu={
         <Menu>
-          <Box paddingX={3} paddingTop={3} paddingBottom={2}>
-            <Label muted>{t('pane-header.create-menu.label')}</Label>
-          </Box>
-
           {templateItems.map((item, itemIndex) => {
             const permissions = permissionsById[item.id]
             const disabled = !permissions?.granted
diff --git a/packages/sanity/src/desk/components/paneItem/PaneItem.tsx b/packages/sanity/src/desk/components/paneItem/PaneItem.tsx
index 802b8118e4a..93f20618a93 100644
--- a/packages/sanity/src/desk/components/paneItem/PaneItem.tsx
+++ b/packages/sanity/src/desk/components/paneItem/PaneItem.tsx
@@ -1,6 +1,6 @@
 import {FolderIcon, ChevronRightIcon, DocumentIcon} from '@sanity/icons'
 import {isSanityDocument, PreviewValue, SanityDocument, SchemaType} from '@sanity/types'
-import {CardProps, Text} from '@sanity/ui'
+import {Box, CardProps, Text} from '@sanity/ui'
 import React, {ReactNode, useCallback, useEffect, useMemo, useState} from 'react'
 import {MissingSchemaType} from '../MissingSchemaType'
 import {usePaneRouter} from '../paneRouter'
@@ -84,15 +84,18 @@ export function PaneItem(props: PaneItemProps) {
       )
     }
 
+    // Always render non-document values as compact previews
     return (
       <SanityDefaultPreview
         status={
-          <Text muted>
-            <ChevronRightIcon />
-          </Text>
+          <Box style={{opacity: 0.5}}>
+            <Text muted size={0}>
+              <ChevronRightIcon />
+            </Text>
+          </Box>
         }
         icon={getIconWithFallback(icon, schemaType, FolderIcon)}
-        layout={layout}
+        layout="compact"
         title={title}
       />
     )
@@ -137,7 +140,6 @@ export function PaneItem(props: PaneItemProps) {
       marginBottom={marginBottom}
       marginTop={marginTop}
       onClick={handleClick}
-      padding={2}
       pressed={pressed}
       radius={2}
       selected={selected || clicked}
diff --git a/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx b/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
index 721759be9da..63fb9adcf97 100644
--- a/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
+++ b/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
@@ -1,10 +1,10 @@
 import type {SanityDocument, SchemaType} from '@sanity/types'
 import React, {isValidElement} from 'react'
 import {isNumber, isString} from 'lodash'
-import {Inline} from '@sanity/ui'
+import {Inline, TooltipDelayGroupProvider} from '@sanity/ui'
 import {useMemoObservable} from 'react-rx'
-import {PublishedStatus} from '../PublishedStatus'
-import {DraftStatus} from '../DraftStatus'
+import {DocumentStatus} from '../../../ui/documentStatus'
+import {TOOLTIP_DELAY_PROPS} from '../../../ui/tooltip/constants'
 import type {PaneItemPreviewState} from './types'
 import {
   DocumentPresence,
@@ -15,6 +15,7 @@ import {
   getPreviewValueWithFallback,
   SanityDefaultPreview,
   isRecord,
+  useDocumentStatusTimeAgo,
 } from 'sanity'
 
 export interface PaneItemPreviewProps {
@@ -26,6 +27,13 @@ export interface PaneItemPreviewProps {
   value: SanityDocument
 }
 
+/**
+ * Preview component for _documents_ rendered in desk/structure panes.
+ *
+ * Note that non-document previews are not handled by this component,
+ * despite being pane items! Non-document previews bypass this entirely
+ * and are rendered by `<SanityDefaultPreview>`.
+ */
 export function PaneItemPreview(props: PaneItemPreviewProps) {
   const {icon, layout, presence, schemaType, value} = props
   const title =
@@ -43,13 +51,16 @@ export function PaneItemPreview(props: PaneItemPreviewProps) {
   )!
 
   const status = isLoading ? null : (
-    <Inline space={4}>
-      {presence && presence.length > 0 && <DocumentPreviewPresence presence={presence} />}
-      <PublishedStatus document={published} />
-      <DraftStatus document={draft} />
-    </Inline>
+    <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+      <Inline space={4}>
+        {presence && presence.length > 0 && <DocumentPreviewPresence presence={presence} />}
+        <DocumentStatus draft={draft} published={published} />
+      </Inline>
+    </TooltipDelayGroupProvider>
   )
 
+  const tooltipLabel = useDocumentStatusTimeAgo({draft, published})
+
   return (
     <SanityDefaultPreview
       {...getPreviewValueWithFallback({value, draft, published})}
@@ -57,6 +68,7 @@ export function PaneItemPreview(props: PaneItemPreviewProps) {
       icon={icon}
       layout={layout}
       status={status}
+      tooltipLabel={tooltipLabel}
     />
   )
 }
diff --git a/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx b/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
index 0e4e43d891c..c08cb4a3a4f 100644
--- a/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
+++ b/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
@@ -2,8 +2,9 @@
 /* eslint-disable i18next/no-literal-string */
 import React, {useCallback, useState} from 'react'
 import {CheckmarkIcon, LaunchIcon} from '@sanity/icons'
-import {Button, Flex, Grid, Popover, Stack, Text} from '@sanity/ui'
+import {Flex, Grid, Popover, Stack, Text} from '@sanity/ui'
 import {generateHelpUrl} from '@sanity/generate-help-url'
+import {Button} from '../../ui'
 import {useDeskRenameOnboarding} from './onboardingStore'
 
 const RENAME_ANNOUNCEMENT_URL = generateHelpUrl('desk-is-now-structure')
@@ -81,19 +82,10 @@ function DeskRenamedCard(props: {onDismiss: () => void}) {
           icon={LaunchIcon}
           target="_blank"
           rel="noreferrer"
-          fontSize={1}
-          padding={3}
           text="Learn more"
           mode="ghost"
         />
-        <Button
-          fontSize={1}
-          icon={CheckmarkIcon}
-          onClick={props.onDismiss}
-          padding={3}
-          text="Got it"
-          tone="primary"
-        />
+        <Button icon={CheckmarkIcon} onClick={props.onDismiss} text="Got it" tone="primary" />
       </Grid>
     </Stack>
   )
diff --git a/packages/sanity/src/desk/documentActions/PublishAction.tsx b/packages/sanity/src/desk/documentActions/PublishAction.tsx
index 45bc08acd47..1b5d8105d02 100644
--- a/packages/sanity/src/desk/documentActions/PublishAction.tsx
+++ b/packages/sanity/src/desk/documentActions/PublishAction.tsx
@@ -142,7 +142,7 @@ export const PublishAction: DocumentActionComponent = (props) => {
 
   if (liveEdit) {
     return {
-      tone: 'positive',
+      tone: 'default',
       label: t('action.publish.live-edit.label'),
       title: t('action.publish.live-edit.tooltip'),
       disabled: true,
@@ -151,7 +151,7 @@ export const PublishAction: DocumentActionComponent = (props) => {
 
   if (!isPermissionsLoading && !permissions?.granted) {
     return {
-      tone: 'positive',
+      tone: 'default',
       label: 'Publish',
       title: (
         <InsufficientPermissionsMessage context="publish-document" currentUser={currentUser} />
@@ -171,7 +171,7 @@ export const PublishAction: DocumentActionComponent = (props) => {
 
   return {
     disabled: disabled || isPermissionsLoading,
-    tone: 'positive',
+    tone: 'default',
     label:
       // eslint-disable-next-line no-nested-ternary
       publishState === 'published'
diff --git a/packages/sanity/src/desk/panes/document/document-layout/DocumentLayout.tsx b/packages/sanity/src/desk/panes/document/document-layout/DocumentLayout.tsx
index 5a47189f9a1..9263a8c061b 100644
--- a/packages/sanity/src/desk/panes/document/document-layout/DocumentLayout.tsx
+++ b/packages/sanity/src/desk/panes/document/document-layout/DocumentLayout.tsx
@@ -1,4 +1,11 @@
-import {useElementRect, DialogProvider, Flex, PortalProvider, DialogProviderProps} from '@sanity/ui'
+import {
+  useElementRect,
+  DialogProvider,
+  Flex,
+  PortalProvider,
+  DialogProviderProps,
+  TooltipDelayGroupProvider,
+} from '@sanity/ui'
 import {useState, useCallback, useMemo} from 'react'
 import {useTranslation} from 'react-i18next'
 import {Path} from 'sanity-diff-patch'
@@ -21,10 +28,10 @@ import {useDocumentPane} from '../useDocumentPane'
 import {DocumentPanelHeader} from '../documentPanel/header'
 import {DocumentInspectorMenuItemsResolver} from '../DocumentInspectorMenuItemsResolver'
 import {usePreviewUrl} from '../usePreviewUrl'
+import {TOOLTIP_DELAY_PROPS} from '../../../../ui/tooltip/constants'
 import {getMenuItems} from '../menuItems'
 import {DocumentLayoutError} from './DocumentLayoutError'
 import {
-  DocumentLayoutProps,
   useZIndex,
   ChangeConnectorRoot,
   DocumentInspectorMenuItem,
@@ -214,7 +221,9 @@ export function DocumentLayout() {
           >
             <DialogProvider position={DIALOG_PROVIDER_POSITION} zOffset={zOffsets.portal}>
               <PaneFooter ref={setFooterElement}>
-                <DocumentStatusBar actionsBoxRef={setActionsBoxElement} />
+                <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+                  <DocumentStatusBar actionsBoxRef={setActionsBoxElement} />
+                </TooltipDelayGroupProvider>
               </PaneFooter>
             </DialogProvider>
           </PortalProvider>
diff --git a/packages/sanity/src/desk/panes/document/documentInspector/DocumentInspectorHeader.tsx b/packages/sanity/src/desk/panes/document/documentInspector/DocumentInspectorHeader.tsx
index 09ecf69b43e..e490fb3f712 100644
--- a/packages/sanity/src/desk/panes/document/documentInspector/DocumentInspectorHeader.tsx
+++ b/packages/sanity/src/desk/panes/document/documentInspector/DocumentInspectorHeader.tsx
@@ -1,7 +1,8 @@
 import {CloseIcon} from '@sanity/icons'
-import {Box, Button, Card, CardProps, Flex, Text} from '@sanity/ui'
+import {Box, Card, CardProps, Flex, Text} from '@sanity/ui'
 import React, {HTMLProps, ReactNode} from 'react'
 import styled from 'styled-components'
+import {Button} from '../../../../ui'
 
 export interface DocumentInspectorHeaderProps {
   as?: CardProps['as']
@@ -15,17 +16,6 @@ const Root = styled(Card)({
   position: 'relative',
   zIndex: 1,
   lineHeight: 0,
-
-  '&:after': {
-    content: '""',
-    display: 'block',
-    position: 'absolute',
-    left: 0,
-    bottom: -1,
-    right: 0,
-    borderBottom: '1px solid var(--card-border-color)',
-    opacity: 0.5,
-  },
 })
 
 /** @internal */
@@ -38,18 +28,17 @@ export function DocumentInspectorHeader(
     <Root {...restProps} as={forwardedAs}>
       <Flex padding={2}>
         <Box flex={1} padding={3}>
-          <Text as="h1" size={1} weight="semibold">
+          <Text as="h1" size={1} weight="medium">
             {title}
           </Text>
         </Box>
         <Box flex="none" padding={1}>
           <Button
             aria-label={closeButtonLabel}
-            fontSize={1}
             icon={CloseIcon}
             mode="bleed"
             onClick={onClose}
-            padding={2}
+            tooltipProps={{content: 'Close'}}
           />
         </Box>
       </Flex>
diff --git a/packages/sanity/src/desk/panes/document/documentInspector/Resizer.tsx b/packages/sanity/src/desk/panes/document/documentInspector/Resizer.tsx
index cd7412f6af2..45ee67ca6cd 100644
--- a/packages/sanity/src/desk/panes/document/documentInspector/Resizer.tsx
+++ b/packages/sanity/src/desk/panes/document/documentInspector/Resizer.tsx
@@ -19,7 +19,6 @@ const Root = styled.div`
     left: 4px;
     bottom: 0;
     transition: opacity 200ms;
-    opacity: 0.5;
   }
 
   /* Hover effect */
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx
index 54031ec0481..082182a9245 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx
@@ -1,8 +1,9 @@
 import React, {useCallback} from 'react'
-import {Button, Card, Container, Flex, Text} from '@sanity/ui'
+import {Card, Container, Flex, Text} from '@sanity/ui'
 import {ReadOnlyIcon} from '@sanity/icons'
 import styled from 'styled-components'
 import {useDocumentPane} from '../useDocumentPane'
+import {Button} from '../../../../ui'
 import {useDocumentOperation, useTranslation} from 'sanity'
 import {useRouter} from 'sanity/router'
 import {structureLocaleNamespace} from '../../../i18n'
@@ -40,8 +41,6 @@ export function DeletedDocumentBanner({revisionId}: DeletedDocumentBannerProps)
             <Text size={1}>{t('banners.deleted-document-banner.text')}</Text>
             {revisionId && (
               <Button
-                fontSize={1}
-                padding={2}
                 mode="bleed"
                 tone="primary"
                 onClick={handleRestore}
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/ReferenceChangedBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/ReferenceChangedBanner.tsx
index ea98e33243b..def3618af5f 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/ReferenceChangedBanner.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/ReferenceChangedBanner.tsx
@@ -1,4 +1,4 @@
-import {Box, Button, Card, Container, Flex, Text} from '@sanity/ui'
+import {Box, Card, Container, Flex, Text} from '@sanity/ui'
 import {WarningOutlineIcon, SyncIcon, CloseIcon} from '@sanity/icons'
 import React, {memo, useCallback, useMemo} from 'react'
 import styled from 'styled-components'
@@ -9,6 +9,7 @@ import {concat, Observable, of} from 'rxjs'
 import {useMemoObservable} from 'react-rx'
 import {RouterPaneGroup} from '../../../types'
 import {usePaneRouter} from '../../../components'
+import {Button} from '../../../../ui'
 import {structureLocaleNamespace} from '../../../i18n'
 import {DocumentAvailability, useDocumentPreviewStore, getPublishedId, useTranslation} from 'sanity'
 
@@ -161,10 +162,7 @@ export const ReferenceChangedBanner = memo(() => {
                 <Button
                   onClick={handleReloadReference}
                   icon={SyncIcon}
-                  fontSize={1}
                   mode="ghost"
-                  padding={2}
-                  space={2}
                   text={t('banners.reference-changed-banner.reason-changed.reload-button.text')}
                 />
               </Box>
@@ -183,10 +181,7 @@ export const ReferenceChangedBanner = memo(() => {
                 <Button
                   as={BackLink}
                   icon={CloseIcon}
-                  fontSize={1}
                   mode="ghost"
-                  padding={2}
-                  space={2}
                   text={t('banners.reference-changed-banner.reason-removed.close-button.text')}
                 />
               </Box>
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormHeader.tsx b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormHeader.tsx
new file mode 100644
index 00000000000..9e84113cddc
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormHeader.tsx
@@ -0,0 +1,66 @@
+import {SchemaType} from '@sanity/types'
+import {Heading, Stack, Text} from '@sanity/ui'
+import styled, {css} from 'styled-components'
+
+interface DocumentHeaderProps {
+  documentId: string
+  schemaType: SchemaType
+  title?: string
+}
+
+// Use CSS container queries to conditionally render headings at different sizes.
+// Hide if container queries are not supported.
+export const TitleContainer = styled(Stack)`
+  ${({theme}) => {
+    return css`
+      @supports not (container-type: inline-size) {
+        display: none !important;
+      }
+
+      container-type: inline-size;
+
+      [data-heading] {
+        font-size: ${theme.sanity.fonts.heading.sizes[2].fontSize}px;
+        line-height: ${theme.sanity.fonts.heading.sizes[2].lineHeight}px;
+        overflow-wrap: break-word;
+      }
+
+      @container (min-width: 420px) {
+        [data-heading] {
+          font-size: ${theme.sanity.fonts.heading.sizes[3].fontSize}px;
+          line-height: ${theme.sanity.fonts.heading.sizes[3].lineHeight}px;
+        }
+      }
+
+      @container (min-width: 560px) {
+        [data-heading] {
+          font-size: ${theme.sanity.fonts.heading.sizes[4].fontSize}px;
+          line-height: ${theme.sanity.fonts.heading.sizes[4].lineHeight}px;
+        }
+      }
+    `
+  }}
+`
+
+/**
+ * Header containing current document title and type.
+ * Document type is hidden if the document `_id` matches the current document `_type`.
+ * The entire header is hidden if container queries are not supported.
+ */
+export const FormHeader = ({documentId, schemaType, title}: DocumentHeaderProps) => {
+  const isSingleton = documentId === schemaType.name
+
+  return (
+    <TitleContainer marginBottom={6} space={4}>
+      {!isSingleton && (
+        <Text muted size={1}>
+          {schemaType.title ?? schemaType.name}
+        </Text>
+      )}
+
+      <Heading as="h2" data-heading muted={!title}>
+        {title ?? 'Untitled'}
+      </Heading>
+    </TitleContainer>
+  )
+}
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx
index fe32026522f..95948e93bb1 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx
@@ -1,12 +1,13 @@
 /* eslint-disable no-nested-ternary */
-
 import {Box, Container, Flex, Spinner, Text, focusFirstDescendant} from '@sanity/ui'
-import React, {forwardRef, useEffect, useMemo, useRef, type Ref, useCallback, useState} from 'react'
+import React, {forwardRef, useEffect, useMemo, useCallback, useState} from 'react'
 import {tap} from 'rxjs/operators'
+import {LoadingBlock} from '../../../../../ui/loadingBlock'
+import {structureLocaleNamespace} from '../../../../i18n'
+import {useDocumentTitle} from '../../useDocumentTitle'
 import {useDocumentPane} from '../../useDocumentPane'
-import {Delay} from '../../../../components/Delay'
 import {useConditionalToast} from './useConditionalToast'
-import {structureLocaleNamespace} from '../../../../i18n'
+import {FormHeader} from './FormHeader'
 import {
   FormDocumentValue,
   DocumentMutationEvent,
@@ -20,6 +21,7 @@ import {
   useDocumentStore,
   useTranslation,
 } from 'sanity'
+import {Delay} from '../../../../components'
 
 interface FormViewProps {
   hidden: boolean
@@ -52,6 +54,7 @@ export const FormView = forwardRef<HTMLDivElement, FormViewProps>(function FormV
   } = useDocumentPane()
   const documentStore = useDocumentStore()
   const presence = useDocumentPresence(documentId)
+  const {title} = useDocumentTitle()
 
   // The `patchChannel` is an INTERNAL publish/subscribe channel that we use to notify form-builder
   // nodes about both remote and local patches.
@@ -142,6 +145,11 @@ export const FormView = forwardRef<HTMLDivElement, FormViewProps>(function FormV
   //     ),
   //   [documentId]
   // )
+
+  if (!ready) {
+    return <LoadingBlock />
+  }
+
   return (
     <Container
       hidden={hidden}
@@ -159,37 +167,45 @@ export const FormView = forwardRef<HTMLDivElement, FormViewProps>(function FormV
                 <Text>{t('document-view.form-view.form-hidden')}</Text>
               </Box>
             ) : (
-              <FormBuilder
-                __internal_fieldActions={fieldActions}
-                __internal_patchChannel={patchChannel}
-                collapsedFieldSets={collapsedFieldSets}
-                collapsedPaths={collapsedPaths}
-                focusPath={formState.focusPath}
-                changed={formState.changed}
-                focused={formState.focused}
-                groups={formState.groups}
-                id="root"
-                members={formState.members}
-                onChange={onChange}
-                onFieldGroupSelect={onSetActiveFieldGroup}
-                onPathBlur={onBlur}
-                onPathFocus={onFocus}
-                onPathOpen={onPathOpen}
-                onSetFieldSetCollapsed={onSetCollapsedFieldSet}
-                onSetPathCollapsed={onSetCollapsedPath}
-                presence={presence}
-                readOnly={formState.readOnly}
-                schemaType={formState.schemaType}
-                validation={validation}
-                value={
-                  // note: the form state doesn't have a typed concept of a "document" value
-                  // but these should be compatible
-                  formState.value as FormDocumentValue
-                }
-              />
+              <>
+                <FormHeader
+                  documentId={documentId}
+                  schemaType={formState.schemaType}
+                  title={title}
+                />
+                <FormBuilder
+                  __internal_fieldActions={fieldActions}
+                  __internal_patchChannel={patchChannel}
+                  collapsedFieldSets={collapsedFieldSets}
+                  collapsedPaths={collapsedPaths}
+                  focusPath={formState.focusPath}
+                  changed={formState.changed}
+                  focused={formState.focused}
+                  groups={formState.groups}
+                  id="root"
+                  members={formState.members}
+                  onChange={onChange}
+                  onFieldGroupSelect={onSetActiveFieldGroup}
+                  onPathBlur={onBlur}
+                  onPathFocus={onFocus}
+                  onPathOpen={onPathOpen}
+                  onSetFieldSetCollapsed={onSetCollapsedFieldSet}
+                  onSetPathCollapsed={onSetCollapsedPath}
+                  presence={presence}
+                  readOnly={formState.readOnly}
+                  schemaType={formState.schemaType}
+                  validation={validation}
+                  value={
+                    // note: the form state doesn't have a typed concept of a "document" value
+                    // but these should be compatible
+                    formState.value as FormDocumentValue
+                  }
+                />
+              </>
             )
           ) : (
             <Delay ms={300}>
+              {/* TODO: replace with loading block */}
               <Flex align="center" direction="column" height="fill" justify="center">
                 <Spinner muted />
                 <Box marginTop={3}>
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/documentViews/styles.ts b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/styles.ts
new file mode 100644
index 00000000000..6020d4c1f16
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/styles.ts
@@ -0,0 +1,6 @@
+import {Box} from '@sanity/ui'
+import styled from 'styled-components'
+
+export const Root = styled(Box)`
+  position: relative;
+`
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx
index 4d8ecdd0598..c938dcf6649 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx
@@ -1,7 +1,8 @@
 import React, {useCallback} from 'react'
-import {Tab, TabList} from '@sanity/ui'
+import {TabList} from '@sanity/ui'
 import {useDocumentPane} from '../../useDocumentPane'
 import {usePaneRouter} from '../../../../components'
+import {Tab} from '../../../../../ui'
 
 export function DocumentHeaderTabs() {
   const {activeViewId, paneKey, views} = useDocumentPane()
@@ -15,7 +16,7 @@ export function DocumentHeaderTabs() {
           id={`${paneKey}tab-${view.id}`}
           isActive={activeViewId === view.id}
           key={view.id}
-          label={<>{view.title}</>}
+          label={view.title}
           tabPanelId={tabPanelId}
           viewId={index === 0 ? null : view.id ?? null}
         />
@@ -28,11 +29,11 @@ function DocumentHeaderTab(props: {
   icon?: React.ComponentType | React.ReactNode
   id: string
   isActive: boolean
-  label: React.ReactNode
+  label: string
   tabPanelId: string
   viewId: string | null
 }) {
-  const {isActive, tabPanelId, viewId, ...rest} = props
+  const {icon, id, isActive, label, tabPanelId, viewId, ...rest} = props
   const {ready} = useDocumentPane()
   const {setView} = usePaneRouter()
   const handleClick = useCallback(() => setView(viewId), [setView, viewId])
@@ -42,9 +43,11 @@ function DocumentHeaderTab(props: {
       {...rest} // required to enable <TabList> keyboard navigation
       aria-controls={tabPanelId}
       disabled={!ready}
-      fontSize={1}
-      selected={isActive}
+      icon={icon}
+      id={id}
+      label={label}
       onClick={handleClick}
+      selected={isActive}
     />
   )
 }
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTitle.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTitle.tsx
index 211645443c3..e4371a3ef4b 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTitle.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTitle.tsx
@@ -1,4 +1,5 @@
 import React, {ReactElement} from 'react'
+import {useDocumentTitle} from '../../useDocumentTitle'
 import {useDocumentPane} from '../../useDocumentPane'
 import {structureLocaleNamespace} from '../../../../i18n'
 import {unstable_useValuePreview as useValuePreview, useTranslation} from 'sanity'
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
index f3f959a3ae9..805ccc0b1e5 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
@@ -1,5 +1,5 @@
 import {ArrowLeftIcon, CloseIcon, SplitVerticalIcon} from '@sanity/icons'
-import {Button, Flex, Text, Tooltip} from '@sanity/ui'
+import {Flex, TooltipDelayGroupProvider} from '@sanity/ui'
 import React, {createElement, memo, forwardRef, useMemo} from 'react'
 import {
   PaneContextMenuButton,
@@ -14,6 +14,8 @@ import {isMenuNodeButton, isNotMenuNodeButton, resolveMenuNodes} from '../../../
 import {useDeskTool} from '../../../../useDeskTool'
 import {structureLocaleNamespace} from '../../../../i18n'
 import {PaneMenuItem} from '../../../../types'
+import {Button} from '../../../../../ui'
+import {TOOLTIP_DELAY_PROPS} from '../../../../../ui/tooltip/constants'
 import {DocumentHeaderTabs} from './DocumentHeaderTabs'
 import {DocumentHeaderTitle} from './DocumentHeaderTitle'
 import {useFieldActions, useTimelineSelector, useTranslation} from 'sanity'
@@ -83,82 +85,82 @@ export const DocumentPanelHeader = memo(
     const {t} = useTranslation(structureLocaleNamespace)
 
     return (
-      <PaneHeader
-        ref={ref}
-        loading={!ready}
-        title={<DocumentHeaderTitle />}
-        tabs={showTabs && <DocumentHeaderTabs />}
-        tabIndex={tabIndex}
-        backButton={
-          features.backButton &&
-          index > 0 && (
-            <Button as={BackLink} data-as="a" icon={ArrowLeftIcon} mode="bleed" padding={2} />
-          )
-        }
-        subActions={<TimelineMenu chunk={rev} mode="rev" placement="bottom-end" />}
-        actions={
-          <Flex align="center" gap={1}>
-            {unstable_languageFilter.length > 0 && (
-              <>
-                {unstable_languageFilter.map((languageFilterComponent, idx) => {
-                  return createElement(languageFilterComponent, {
-                    // eslint-disable-next-line react/no-array-index-key
-                    key: `language-filter-${idx}`,
-                    schemaType,
-                  })
-                })}
-              </>
-            )}
-
-            {menuButtonNodes.map((item) => (
-              <PaneHeaderActionButton key={item.key} node={item} />
-            ))}
-
-            <PaneContextMenuButton nodes={contextMenuNodes} key="context-menu" />
-
-            {showSplitPaneButton && (
-              <Tooltip
-                content={
-                  <Text size={1} style={{whiteSpace: 'nowrap'}}>
-                    {t('buttons.split-pane-button.tooltip')}
-                  </Text>
-                }
-                padding={2}
-                placement="bottom"
-                portal
-              >
+      <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+        <PaneHeader
+          border
+          ref={ref}
+          loading={!ready}
+          title={<DocumentHeaderTitle />}
+          tabs={showTabs && <DocumentHeaderTabs />}
+          tabIndex={tabIndex}
+          backButton={
+            features.backButton &&
+            index > 0 && (
+              <Button
+                as={BackLink}
+                data-as="a"
+                icon={ArrowLeftIcon}
+                mode="bleed"
+                // @todo: localize
+                tooltipProps={{content: 'Back'}}
+              />
+            )
+          }
+          subActions={<TimelineMenu chunk={rev} mode="rev" placement="bottom-end" />}
+          actions={
+            <Flex align="center" gap={1}>
+              {unstable_languageFilter.length > 0 && (
+                <>
+                  {unstable_languageFilter.map((languageFilterComponent, idx) => {
+                    return createElement(languageFilterComponent, {
+                      // eslint-disable-next-line react/no-array-index-key
+                      key: `language-filter-${idx}`,
+                      schemaType,
+                    })
+                  })}
+                </>
+              )}
+
+              {menuButtonNodes.map((item) => (
+                <PaneHeaderActionButton key={item.key} node={item} />
+              ))}
+
+              <PaneContextMenuButton nodes={contextMenuNodes} key="context-menu" />
+
+              {showSplitPaneButton && (
                 <Button
                   aria-label={t('buttons.split-pane-button.aria-label')}
                   icon={SplitVerticalIcon}
                   key="split-pane-button"
                   mode="bleed"
                   onClick={onPaneSplit}
+                  tooltipProps={{content: t('buttons.split-pane-button.tooltip')}}
                 />
-              </Tooltip>
-            )}
+              )}
 
-            {showSplitPaneCloseButton && (
-              <Button
-                icon={CloseIcon}
-                key="close-view-button"
-                mode="bleed"
-                onClick={onPaneClose}
-                title={t('buttons.split-pane-close-button.title')}
-              />
-            )}
+              {showSplitPaneCloseButton && (
+                <Button
+                  icon={CloseIcon}
+                  key="close-view-button"
+                  mode="bleed"
+                  onClick={onPaneClose}
+                  tooltipProps={{content: t('buttons.split-pane-close-button.title')}}
+                />
+              )}
 
-            {showPaneGroupCloseButton && (
-              <Button
-                icon={CloseIcon}
-                key="close-view-button"
-                mode="bleed"
-                title={t('buttons.split-pane-close-group-button.title')}
-                as={BackLink}
-              />
-            )}
-          </Flex>
-        }
-      />
+              {showPaneGroupCloseButton && (
+                <Button
+                  icon={CloseIcon}
+                  key="close-view-button"
+                  mode="bleed"
+                  tooltipProps={{content: t('buttons.split-pane-close-group-button.title')}}
+                  as={BackLink}
+                />
+              )}
+            </Flex>
+          }
+        />
+      </TooltipDelayGroupProvider>
     )
   }),
 )
diff --git a/packages/sanity/src/desk/panes/document/index.ts b/packages/sanity/src/desk/panes/document/index.ts
index 640b88fa9f3..18799e65716 100644
--- a/packages/sanity/src/desk/panes/document/index.ts
+++ b/packages/sanity/src/desk/panes/document/index.ts
@@ -1,2 +1,3 @@
 export * from './DocumentPane'
 export * from './DocumentPaneProvider'
+export * from './useDocumentTitle'
diff --git a/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx b/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx
index 341c6a0a84a..b702b19c9a2 100644
--- a/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx
@@ -1,7 +1,8 @@
 import {SanityDocument} from '@sanity/types'
-import {Card, Code, Dialog, Flex, Tab, TabList, TabPanel} from '@sanity/ui'
+import {Card, Code, Flex, TabList, TabPanel} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import JSONInspector from '@rexxars/react-json-inspector'
+import {Dialog, Tab} from '../../../../ui'
 import {DocTitle} from '../../../components'
 import {useDeskToolSetting} from '../../../useDeskToolSetting'
 import {structureLocaleNamespace} from '../../../i18n'
@@ -45,6 +46,7 @@ export function InspectDialog(props: InspectDialogProps) {
 
   return (
     <Dialog
+      bodyHeight="fill"
       id={`${dialogIdPrefix}dialog`}
       header={
         isDocumentLike(value) ? (
@@ -65,14 +67,14 @@ export function InspectDialog(props: InspectDialogProps) {
       }
       onClose={onInspectClose}
       onClickOutside={onInspectClose}
+      padding={false}
       width={3}
     >
       <Flex direction="column" height="fill">
-        <Card padding={3} shadow={1} style={{position: 'sticky', bottom: 0, zIndex: 3}}>
+        <Card borderBottom padding={3} style={{position: 'sticky', bottom: 0, zIndex: 3}}>
           <TabList space={1}>
             <Tab
               aria-controls={`${dialogIdPrefix}tabpanel`}
-              fontSize={1}
               id={`${dialogIdPrefix}tab-${VIEW_MODE_PARSED.id}`}
               label={t(VIEW_MODE_PARSED.title)}
               onClick={setParsedViewMode}
@@ -80,7 +82,6 @@ export function InspectDialog(props: InspectDialogProps) {
             />
             <Tab
               aria-controls={`${dialogIdPrefix}tabpanel`}
-              fontSize={1}
               id={`${dialogIdPrefix}tab-${VIEW_MODE_RAW.id}`}
               label={t(VIEW_MODE_RAW.title)}
               onClick={setRawViewMode}
diff --git a/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx b/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx
index 0015066293e..b4655b5d671 100644
--- a/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx
+++ b/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx
@@ -2,10 +2,10 @@ import {ObjectDiff} from '@sanity/diff'
 import {AvatarStack, BoundaryElementProvider, Box, Card, Flex} from '@sanity/ui'
 import React, {ReactElement, useRef} from 'react'
 import styled from 'styled-components'
+import {LoadingBlock} from '../../../../../ui/loadingBlock'
 import {TimelineMenu} from '../../timeline'
 import {useDocumentPane} from '../../useDocumentPane'
 import {DocumentInspectorHeader} from '../../documentInspector'
-import {LoadingContent} from './LoadingContent'
 import {collectLatestAuthorAnnotations} from './helpers'
 import {
   ChangeFieldWrapper,
@@ -130,7 +130,7 @@ function Content({
   }
 
   if (loading) {
-    return <LoadingContent />
+    return <LoadingBlock />
   }
 
   if (!diff) {
diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
index e26f1721ada..3c7092e4d9b 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
@@ -1,28 +1,10 @@
-import {ChevronDownIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  PopoverProps,
-  Text,
-  Tooltip,
-} from '@sanity/ui'
-import React, {
-  createElement,
-  isValidElement,
-  useCallback,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import {isValidElementType} from 'react-is'
-import {ActionStateDialog} from './ActionStateDialog'
-import {DocumentActionDescription, Hotkeys, LegacyLayerProvider, useTranslation} from 'sanity'
+import {EllipsisHorizontalIcon} from '@sanity/icons'
+import {Menu, MenuButton, PopoverProps, Text} from '@sanity/ui'
+import React, {useCallback, useRef, useState, useMemo, useId} from 'react'
+import {Button, MenuItem, TooltipWithNodes} from '../../../../ui'
 import {structureLocaleNamespace} from '../../../i18n'
+import {ActionStateDialog} from './ActionStateDialog'
+import {DocumentActionDescription, LegacyLayerProvider, useTranslation} from 'sanity'
 
 export interface ActionMenuButtonProps {
   actionStates: DocumentActionDescription[]
@@ -61,9 +43,11 @@ export function ActionMenuButton(props: ActionMenuButtonProps) {
             data-testid="action-menu-button"
             aria-label={t('buttons.action-menu-button.aria-label')}
             disabled={disabled}
-            icon={ChevronDownIcon}
-            mode="ghost"
+            icon={EllipsisHorizontalIcon}
+            mode="bleed"
             ref={buttonRef}
+            size="large"
+            tooltipProps={{content: 'Document actions'}}
           />
         }
         menu={
@@ -109,52 +93,37 @@ function ActionMenuListItem(props: ActionMenuListItemProps) {
     if (onHandle) onHandle()
   }, [index, onAction, onHandle])
 
-  const tooltipContent = actionState.title && (
-    <Box padding={2}>
-      <Text size={1}>{actionState.title}</Text>
-    </Box>
+  const menuItemContent = useCallback(
+    (item: React.JSX.Element) => {
+      return (
+        <TooltipWithNodes
+          content={<Text size={1}>{actionState.title}</Text>}
+          disabled={!actionState.title}
+          placement="top"
+          portal
+        >
+          {item}
+        </TooltipWithNodes>
+      )
+    },
+    [actionState.title],
   )
-
   return (
     <MenuItem
       data-testid={`action-${actionState.label.replace(' ', '')}`}
       disabled={disabled || Boolean(actionState.disabled)}
       onClick={handleClick}
-      padding={0}
       tone={actionState.tone}
-    >
-      <Tooltip
-        content={tooltipContent}
-        disabled={!tooltipContent}
-        fallbackPlacements={['left', 'bottom']}
-        placement="top"
-        portal
-      >
-        <Flex align="center" paddingX={3}>
-          <Flex flex={1} paddingY={3}>
-            {actionState.icon && (
-              <Box marginRight={3}>
-                <Text>
-                  {isValidElement(actionState.icon) && actionState.icon}
-                  {isValidElementType(actionState.icon) && createElement(actionState.icon)}
-                </Text>
-              </Box>
-            )}
-
-            <Text>{actionState.label}</Text>
-          </Flex>
-
-          {actionState.shortcut && (
-            <Box marginLeft={3}>
-              <Hotkeys
-                keys={String(actionState.shortcut)
-                  .split('+')
-                  .map((s) => s.slice(0, 1).toUpperCase() + s.slice(1))}
-              />
-            </Box>
-          )}
-        </Flex>
-      </Tooltip>
-    </MenuItem>
+      icon={actionState.icon}
+      text={actionState.label}
+      hotkeys={
+        actionState.shortcut
+          ? String(actionState.shortcut)
+              .split('+')
+              .map((s) => s.slice(0, 1).toUpperCase() + s.slice(1))
+          : undefined
+      }
+      renderMenuItem={menuItemContent}
+    />
   )
 }
diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionStateDialog.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionStateDialog.tsx
index eb8f0c0b748..0ddd928f2b6 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionStateDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionStateDialog.tsx
@@ -1,5 +1,6 @@
-import {Box, Dialog, usePortal, PortalProvider} from '@sanity/ui'
+import {usePortal, PortalProvider, Text} from '@sanity/ui'
 import React, {useId} from 'react'
+import {Dialog} from '../../../../ui'
 import {DOCUMENT_PANEL_PORTAL_ELEMENT} from '../../../constants'
 import {ConfirmDialog} from './dialogs/ConfirmDialog'
 import {ModalDialog} from './dialogs/ModalDialog'
@@ -58,16 +59,14 @@ export function ActionStateDialog(props: ActionStateDialogProps) {
       onClose={unknownModal.onClose}
       // eslint-disable-next-line react/jsx-handler-names
       onClickOutside={unknownModal.onClose}
-      width={2}
+      width={1}
     >
-      <Box padding={4}>
-        {unknownModal.content || (
-          // eslint-disable-next-line i18next/no-literal-string
-          <>
-            Unexpected modal type (<code>{unknownModal.type}</code>)
-          </>
-        )}
-      </Box>
+      {unknownModal.content || (
+        // eslint-disable-next-line i18next/no-literal-string
+        <Text size={1}>
+          Unexpected modal type (<code>{unknownModal.type}</code>)
+        </Text>
+      )}
     </Dialog>
   )
 }
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
index 1c0ce351dbf..ef21e308559 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
@@ -5,16 +5,24 @@ import {useDocumentPane} from '../useDocumentPane'
 import {DocumentStatusBarActions, HistoryStatusBarActions} from './DocumentStatusBarActions'
 import {DocumentSparkline} from './sparkline/DocumentSparkline'
 import {useTimelineSelector} from 'sanity'
+import {Button} from '../../../../ui'
 
 export interface DocumentStatusBarProps {
   actionsBoxRef?: React.Ref<HTMLDivElement>
 }
 
-const DocumentActionsBox = styled(Box)`
+const DocumentActionsFlex = styled(Flex)`
   min-width: 10em;
   max-width: 16em;
 `
 
+// This Hidden button prevents this status bar from shifting in height as both
+// <HistoryStatusBarActions /> and <DocumentStatusBarActions /> can return null.
+const SpacerButton = styled(Button)`
+  pointer-events: none;
+  visibility: hidden;
+`
+
 export function DocumentStatusBar(props: DocumentStatusBarProps) {
   const {actionsBoxRef} = props
   const {badges, timelineStore} = useDocumentPane()
@@ -24,13 +32,15 @@ export function DocumentStatusBar(props: DocumentStatusBarProps) {
 
   return useMemo(
     () => (
-      <Box paddingLeft={2} paddingRight={[2, 3]} paddingY={2}>
+      <Box padding={2}>
         <Flex align="center">
           <Box flex={[1, 2]}>{badges && <DocumentSparkline />}</Box>
 
-          <DocumentActionsBox flex={1} marginLeft={[1, 3]} ref={actionsBoxRef}>
+          <DocumentActionsFlex flex={1} justify="flex-end" marginLeft={[1, 3]} ref={actionsBoxRef}>
+            <SpacerButton aria-hidden disabled size="large" text="-" />
+
             {showingRevision ? <HistoryStatusBarActions /> : <DocumentStatusBarActions />}
-          </DocumentActionsBox>
+          </DocumentActionsFlex>
         </Flex>
       </Box>
     ),
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
index ac9afbcbe85..7df62cd37b9 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
@@ -1,11 +1,12 @@
-import {Box, Flex, Tooltip, Stack, Button, LayerProvider, Text} from '@sanity/ui'
+import {Flex, Hotkeys, LayerProvider, Stack, Text} from '@sanity/ui'
 import React, {memo, useMemo, useState} from 'react'
 import {RenderActionCollectionState} from '../../../components'
 import {HistoryRestoreAction} from '../../../documentActions'
+import {Button, TooltipWithNodes} from '../../../../ui'
 import {useDocumentPane} from '../useDocumentPane'
 import {ActionMenuButton} from './ActionMenuButton'
 import {ActionStateDialog} from './ActionStateDialog'
-import {DocumentActionDescription, Hotkeys, useTimelineSelector} from 'sanity'
+import {DocumentActionDescription, useTimelineSelector} from 'sanity'
 
 interface DocumentStatusBarActionsInnerProps {
   disabled: boolean
@@ -18,31 +19,32 @@ function DocumentStatusBarActionsInner(props: DocumentStatusBarActionsInnerProps
   const [firstActionState, ...menuActionStates] = states
   const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
 
+  // TODO: This could be refactored to use the tooltip from the button if the firstAction.title was updated to a string.
   const tooltipContent = useMemo(() => {
     if (!firstActionState || (!firstActionState.title && !firstActionState.shortcut)) return null
 
     return (
-      <Flex padding={2} style={{maxWidth: 300}} align="center">
-        <Text size={1}>{firstActionState.title}</Text>
+      <Flex style={{maxWidth: 300}} align="center" gap={3}>
+        {firstActionState.title && <Text size={1}>{firstActionState.title}</Text>}
         {firstActionState.shortcut && (
-          <Box marginLeft={firstActionState.title ? 2 : 0}>
-            <Hotkeys
-              keys={String(firstActionState.shortcut)
-                .split('+')
-                .map((s) => s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase())}
-            />
-          </Box>
+          <Hotkeys
+            fontSize={1}
+            style={{marginTop: -4, marginBottom: -4}}
+            keys={String(firstActionState.shortcut)
+              .split('+')
+              .map((s) => s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase())}
+          />
         )}
       </Flex>
     )
   }, [firstActionState])
 
   return (
-    <Flex>
+    <Flex gap={1}>
       {firstActionState && (
         <LayerProvider zOffset={200}>
-          <Tooltip disabled={!tooltipContent} content={tooltipContent} portal placement="top">
-            <Stack flex={1}>
+          <TooltipWithNodes disabled={!tooltipContent} content={tooltipContent} placement="top">
+            <Stack>
               <Button
                 data-testid={`action-${firstActionState.label}`}
                 disabled={disabled || Boolean(firstActionState.disabled)}
@@ -50,20 +52,17 @@ function DocumentStatusBarActionsInner(props: DocumentStatusBarActionsInnerProps
                 // eslint-disable-next-line react/jsx-handler-names
                 onClick={firstActionState.onHandle}
                 ref={setButtonElement}
+                size="large"
                 text={firstActionState.label}
                 tone={firstActionState.tone || 'primary'}
               />
             </Stack>
-          </Tooltip>
+          </TooltipWithNodes>
         </LayerProvider>
       )}
-
       {showMenu && menuActionStates.length > 0 && (
-        <Box marginLeft={1}>
-          <ActionMenuButton actionStates={menuActionStates} disabled={disabled} />
-        </Box>
+        <ActionMenuButton actionStates={menuActionStates} disabled={disabled} />
       )}
-
       {firstActionState && firstActionState.dialog && (
         <ActionStateDialog dialog={firstActionState.dialog} referenceElement={buttonElement} />
       )}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx
new file mode 100644
index 00000000000..d0be4a9dc55
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx
@@ -0,0 +1,23 @@
+import {Card, Flex} from '@sanity/ui'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+import React from 'react'
+
+import {DocumentStatusPulse} from '../sparkline/DocumentStatusPulse'
+
+const STATUS_OPTIONS: Record<string, 'saved' | 'syncing'> = {
+  saved: 'saved',
+  syncing: 'syncing',
+}
+
+export default function DocumentStatusPulseStory() {
+  const collapsed = useBoolean('Collapsed', false)
+  const status = useSelect('Status', STATUS_OPTIONS) || 'saved'
+
+  return (
+    <Card height="fill">
+      <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+        <DocumentStatusPulse status={status} collapsed={collapsed} />
+      </Flex>
+    </Card>
+  )
+}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/ReviewChangesButtonStory.tsx b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/ReviewChangesButtonStory.tsx
deleted file mode 100644
index f8f7a4d8272..00000000000
--- a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/ReviewChangesButtonStory.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {Card, Flex} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
-
-import {ReviewChangesButton} from '../sparkline/ReviewChangesButton'
-
-const STATUS_OPTIONS: Record<string, 'changes' | 'saved' | 'syncing'> = {
-  changes: 'changes',
-  saved: 'saved',
-  syncing: 'syncing',
-}
-
-export default function ReviewChangesButtonStory() {
-  const collapsed = useBoolean('Collapsed', false)
-  const status = useSelect('Status', STATUS_OPTIONS) || 'changes'
-
-  return (
-    <Card height="fill">
-      <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-        <ReviewChangesButton status={status} lastUpdated="just now" collapsed={collapsed} />
-      </Flex>
-    </Card>
-  )
-}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/index.ts b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/index.ts
index c1133056388..d033a4e21ee 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/index.ts
+++ b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/index.ts
@@ -16,9 +16,9 @@ export default defineScope({
       component: lazy(() => import('./DocumentBadgesStory')),
     },
     {
-      name: 'review-changes-button',
-      title: 'ReviewChangesButton',
-      component: lazy(() => import('./ReviewChangesButtonStory')),
+      name: 'document-status-pulse',
+      title: 'DocumentStatusPulse',
+      component: lazy(() => import('./DocumentStatusPulseStory')),
     },
   ],
 })
diff --git a/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx b/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx
index 9c8de145539..e1f4b00995c 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx
@@ -1,6 +1,5 @@
 import {
   Box,
-  Button,
   Flex,
   Grid,
   Popover,
@@ -11,6 +10,7 @@ import {
 } from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {structureLocaleNamespace} from '../../../../i18n'
+import {Button} from '../../../../../ui'
 import {POPOVER_FALLBACK_PLACEMENTS} from './constants'
 import {DocumentActionConfirmDialogProps, useTranslation} from 'sanity'
 
diff --git a/packages/sanity/src/desk/panes/document/statusBar/dialogs/ModalDialog.tsx b/packages/sanity/src/desk/panes/document/statusBar/dialogs/ModalDialog.tsx
index 4c2c46ecaa5..fede91e79fc 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/dialogs/ModalDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/dialogs/ModalDialog.tsx
@@ -1,5 +1,5 @@
-import {Box, Dialog} from '@sanity/ui'
 import React, {useId} from 'react'
+import {Dialog} from '../../../../../ui'
 import {DIALOG_WIDTH_TO_UI_WIDTH} from './constants'
 import {DocumentActionModalDialogProps, LegacyLayerProvider} from 'sanity'
 
@@ -7,17 +7,11 @@ export function ModalDialog(props: {dialog: DocumentActionModalDialogProps}) {
   const {dialog} = props
   const dialogId = useId()
 
-  const footer = dialog.footer && (
-    <Box paddingX={4} paddingY={3}>
-      {dialog.footer}
-    </Box>
-  )
-
   return (
     <LegacyLayerProvider zOffset="fullscreen">
       <Dialog
         __unstable_hideCloseButton={dialog.showCloseButton === false}
-        footer={footer}
+        footer={dialog.footer}
         header={dialog.header}
         id={dialogId}
         // eslint-disable-next-line react/jsx-handler-names
@@ -26,7 +20,7 @@ export function ModalDialog(props: {dialog: DocumentActionModalDialogProps}) {
         onClickOutside={dialog.onClose}
         width={dialog.width === undefined ? 1 : DIALOG_WIDTH_TO_UI_WIDTH[dialog.width]}
       >
-        <Box padding={4}>{dialog.content}</Box>
+        {dialog.content}
       </Dialog>
     </LegacyLayerProvider>
   )
diff --git a/packages/sanity/src/desk/panes/document/statusBar/dialogs/constants.ts b/packages/sanity/src/desk/panes/document/statusBar/dialogs/constants.ts
index 712800d0a7d..13a6b72dd46 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/dialogs/constants.ts
+++ b/packages/sanity/src/desk/panes/document/statusBar/dialogs/constants.ts
@@ -1,4 +1,5 @@
-import {DialogProps, Placement} from '@sanity/ui'
+import {Placement} from '@sanity/ui'
+import {DialogProps} from '../../../../../ui'
 
 export const POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['left', 'bottom']
 
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx
index afa55d9262f..ffe3907b29e 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx
@@ -1,7 +1,8 @@
-import {Badge, BadgeTone, Box, Inline, Text, Tooltip} from '@sanity/ui'
+import {Badge, BadgeTone, Inline, Text} from '@sanity/ui'
 import React from 'react'
 import {RenderBadgeCollectionState} from '../../../../components'
 import {useDocumentPane} from '../../useDocumentPane'
+import {Tooltip} from '../../../../../ui'
 import {DocumentBadgeDescription} from 'sanity'
 
 interface DocumentBadgesInnerProps {
@@ -20,13 +21,7 @@ function DocumentBadgesInner({states}: DocumentBadgesInnerProps) {
     <Inline space={1}>
       {states.map((badge, index) => (
         <Tooltip
-          content={
-            badge.title && (
-              <Box padding={2}>
-                <Text size={1}>{badge.title}</Text>
-              </Box>
-            )
-          }
+          content={badge.title}
           disabled={!badge.title}
           key={String(index)}
           placement="top"
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
index d1aed702d99..15de9ce0a31 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
@@ -1,10 +1,10 @@
-import {Box, Flex, useElementRect} from '@sanity/ui'
-import React, {useEffect, useMemo, useState, memo, useLayoutEffect} from 'react'
+import {Box, Flex, Text, useElementRect} from '@sanity/ui'
+import React, {useEffect, useState, memo, useLayoutEffect} from 'react'
+import {DocumentStatus} from '../../../../../ui/documentStatus'
 import {useDocumentPane} from '../../useDocumentPane'
 import {DocumentBadges} from './DocumentBadges'
-import {PublishStatus} from './PublishStatus'
-import {ReviewChangesButton} from './ReviewChangesButton'
-import {useSyncState, useTimelineSelector} from 'sanity'
+import {DocumentStatusPulse} from './DocumentStatusPulse'
+import {useDocumentStatusTimeAgo, useSyncState, useTimelineSelector} from 'sanity'
 
 const SYNCING_TIMEOUT = 1000
 const SAVED_TIMEOUT = 3000
@@ -23,10 +23,6 @@ export const DocumentSparkline = memo(function DocumentSparkline() {
   const syncState = useSyncState(documentId, documentType)
 
   const lastUpdated = value?._updatedAt
-  const lastPublished = editState?.published?._updatedAt
-  const liveEdit = Boolean(editState?.liveEdit)
-  const published = Boolean(editState?.published)
-  const changed = Boolean(editState?.draft)
 
   const [rootFlexElement, setRootFlexElement] = useState<HTMLDivElement | null>(null)
   const rootFlexRect = useElementRect(rootFlexElement)
@@ -64,56 +60,37 @@ export const DocumentSparkline = memo(function DocumentSparkline() {
     }
   }, [syncState.isSyncing, lastUpdated])
 
-  const reviewButton = useMemo(
-    () => (
-      <ReviewChangesButton
-        lastUpdated={lastUpdated}
-        status={status || (changed ? 'changes' : undefined)}
-        onClick={changesOpen ? onHistoryClose : onHistoryOpen}
-        disabled={showingRevision}
-        selected={changesOpen}
-        collapsed={collapsed}
-      />
-    ),
-    [
-      changed,
-      changesOpen,
-      onHistoryClose,
-      onHistoryOpen,
-      lastUpdated,
-      showingRevision,
-      status,
-      collapsed,
-    ],
-  )
-
-  const publishStatus = useMemo(
-    () =>
-      (liveEdit || published) && (
-        <Box marginRight={1}>
-          <PublishStatus
-            disabled={showingRevision}
-            lastPublished={lastPublished}
-            lastUpdated={lastUpdated}
-            liveEdit={liveEdit}
-            collapsed={collapsed}
-          />
-        </Box>
-      ),
-    [collapsed, lastPublished, lastUpdated, liveEdit, published, showingRevision],
-  )
+  const statusTimeAgo = useDocumentStatusTimeAgo({
+    draft: editState?.draft,
+    hidePublishedDate: true,
+    published: editState?.published,
+  })
 
   return (
     <Flex align="center" data-ui="DocumentSparkline" ref={setRootFlexElement}>
-      {publishStatus}
-
-      <Flex align="center" flex={1}>
-        {reviewButton}
-        {!collapsed && (
-          <Box marginLeft={3}>
-            <DocumentBadges />
+      <Flex align="center" flex={1} gap={3} marginLeft={3}>
+        <Flex align="center" gap={2}>
+          <DocumentStatus
+            draft={editState?.draft}
+            published={editState?.published}
+            showPublishedIcon
+          />
+          <Box flex={1}>
+            <Text muted textOverflow="ellipsis" size={1} weight="medium">
+              {statusTimeAgo}
+            </Text>
           </Box>
-        )}
+        </Flex>
+
+        <DocumentStatusPulse
+          status={status || undefined}
+          onClick={changesOpen ? onHistoryClose : onHistoryOpen}
+          disabled={showingRevision}
+          selected={changesOpen}
+          collapsed={collapsed}
+        />
+
+        {!collapsed && <DocumentBadges />}
       </Flex>
     </Flex>
   )
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/AnimatedStatusIcon.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/AnimatedStatusIcon.tsx
similarity index 87%
rename from packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/AnimatedStatusIcon.tsx
rename to packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/AnimatedStatusIcon.tsx
index c92b4e3ed96..a1b363f4708 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/AnimatedStatusIcon.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/AnimatedStatusIcon.tsx
@@ -22,9 +22,6 @@ const Arrows = (props: MotionPathProps) => (
 const Checkmark = (props: MotionPathProps) => (
   <motion.path d="M9.5 12.1316L11.7414 14.5L16 10" {...props} />
 )
-const Edit = (props: MotionPathProps) => (
-  <motion.path d="M15 7L18 10M6 19L7 15L17 5L20 8L10 18L6 19Z" {...props} />
-)
 
 const rotateAnimation = keyframes`
   0% {
@@ -124,24 +121,6 @@ const checkmark = {
   },
 }
 
-const edit = {
-  syncing: {
-    pathLength: 0,
-    transition: {duration: 0},
-  },
-  saved: {
-    pathLength: 0,
-    transition: {duration: 0},
-  },
-  changes: {
-    pathLength: 1,
-    transition: {
-      duration: 0.4,
-      delay: 0.5,
-    },
-  },
-}
-
 interface AnimatedStatusIconProps {
   status?: 'changes' | 'saved' | 'syncing'
 }
@@ -169,7 +148,6 @@ export function AnimatedStatusIcon(props: AnimatedStatusIconProps) {
           <Circle variants={circle} initial={status} animate={status} />
         </RotateGroup>
         <Checkmark variants={checkmark} initial={status} animate={status} />
-        <Edit variants={edit} initial={status} animate={status} />
       </motion.g>
     </svg>
   )
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx
new file mode 100644
index 00000000000..19e276f7214
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx
@@ -0,0 +1,45 @@
+import {ButtonTone, Flex, Inline} from '@sanity/ui'
+import React from 'react'
+import {AnimatedStatusIcon} from './AnimatedStatusIcon'
+import {TextWithTone} from 'sanity'
+
+type StatusType = 'saved' | 'syncing'
+interface ReviewChangesButtonProps
+  extends Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'width' | 'as' | 'type'> {
+  status?: StatusType
+  collapsed?: boolean
+}
+
+const STATUS_DICTIONARY: Record<StatusType, {text: string; tone: ButtonTone}> = {
+  saved: {
+    text: 'Saved!',
+    tone: 'positive',
+  },
+  syncing: {
+    text: 'Saving...',
+    tone: 'default',
+  },
+}
+
+export const DocumentStatusPulse = (props: ReviewChangesButtonProps) => {
+  const {collapsed, status} = props
+
+  if (status !== 'saved' && status !== 'syncing') {
+    return null
+  }
+
+  const currentStatus = STATUS_DICTIONARY[status]
+
+  return (
+    <Flex align="center" gap={3} marginLeft={1}>
+      <TextWithTone size={1} tone={currentStatus.tone}>
+        <AnimatedStatusIcon status={status} />
+      </TextWithTone>
+      {!collapsed && (
+        <TextWithTone size={1} tone={currentStatus.tone}>
+          {currentStatus.text}
+        </TextWithTone>
+      )}
+    </Flex>
+  )
+}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/index.ts b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/index.ts
new file mode 100644
index 00000000000..c68bf80b01e
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/index.ts
@@ -0,0 +1 @@
+export * from './DocumentStatusPulse'
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/IconBadge.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/IconBadge.tsx
deleted file mode 100644
index 7f16545a079..00000000000
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/IconBadge.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import {IconComponent} from '@sanity/icons'
-import styled, {css} from 'styled-components'
-import React, {createElement, memo} from 'react'
-import {Text, Theme} from '@sanity/ui'
-
-export type IconBadgeTone = 'positive' | 'caution' | 'critical'
-
-interface IconBadgeRootStyleProps {
-  $disabled: boolean
-  $muted: boolean
-  $tone: IconBadgeTone
-}
-
-const Root = styled.div<IconBadgeRootStyleProps>(
-  ({$disabled, $muted, $tone, theme}: IconBadgeRootStyleProps & {theme: Theme}) => {
-    const {color} = theme.sanity
-    const tone = $muted ? color.muted[$tone] : color.solid[$tone]
-    const state = $disabled ? tone.disabled : tone.enabled
-
-    return css`
-      --icon-badge-size: 27px;
-      --card-bg-color: ${state.bg};
-      --card-fg-color: ${state.fg};
-      --card-border-color: ${state.border};
-
-      width: var(--icon-badge-size);
-      height: var(--icon-badge-size);
-      border-radius: calc(var(--icon-badge-size) / 2);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: var(--card-bg-color);
-      color: var(--card-fg-color);
-      box-shadow: inset 0 0 0 1px var(--card-border-color);
-      margin: -3px;
-
-      & > span {
-        color: inherit;
-      }
-    `
-  },
-)
-
-export const IconBadge = memo(function IconBadge(props: {
-  disabled?: boolean
-  icon: IconComponent
-  muted?: boolean
-  tone: IconBadgeTone
-}) {
-  const {disabled = false, icon, muted = false, tone} = props
-
-  return (
-    <Root $disabled={disabled} $muted={muted} $tone={tone} aria-hidden>
-      <Text as="span">{createElement(icon)}</Text>
-    </Root>
-  )
-})
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx
deleted file mode 100644
index 002b4f7a681..00000000000
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, {useMemo} from 'react'
-import {Box, Button, ButtonProps, Flex, Stack, Text, Tooltip} from '@sanity/ui'
-import {structureLocaleNamespace} from '../../../../../i18n'
-import {AnimatedStatusIcon} from './AnimatedStatusIcon'
-import {useRelativeTime, useTranslation} from 'sanity'
-
-interface ReviewChangesButtonProps extends React.HTMLProps<HTMLButtonElement> {
-  status?: 'changes' | 'saved' | 'syncing'
-  lastUpdated?: string
-  collapsed?: boolean
-}
-
-const ReviewButton = React.forwardRef(function ReviewButton(
-  props: ReviewChangesButtonProps & ButtonProps,
-  ref: React.ForwardedRef<HTMLButtonElement>,
-) {
-  const {collapsed, status, lastUpdated, ...rest} = props
-  const lastUpdatedTime = useRelativeTime(lastUpdated || '', {minimal: true})
-  const lastUpdatedTimeAgo = useRelativeTime(lastUpdated || '', {
-    minimal: true,
-    useTemporalPhrase: true,
-  })
-  const a11yUpdatedAgo = useRelativeTime(lastUpdated || '', {
-    minimal: false,
-    useTemporalPhrase: true,
-  })
-
-  const {t} = useTranslation(structureLocaleNamespace)
-
-  const buttonProps: ButtonProps = useMemo(() => {
-    if (status === 'syncing') {
-      return {
-        text: t('status-bar.review-changes-button.status.syncing.text'),
-        tone: undefined,
-      }
-    }
-    if (status === 'changes') {
-      return {
-        text: lastUpdatedTime,
-        tone: 'caution',
-      }
-    }
-    if (status === 'saved') {
-      return {
-        text: t('status-bar.review-changes-button.status.saved.text'),
-        tone: 'positive',
-      }
-    }
-
-    return {}
-  }, [status, lastUpdatedTime, t])
-
-  if (!status) {
-    return null
-  }
-
-  return (
-    <Tooltip
-      placement="top"
-      portal
-      disabled={status !== 'changes'}
-      content={
-        <Stack padding={3} space={3}>
-          <Text size={1} weight="semibold">
-            {t('status-bar.review-changes-button.tooltip.text')}
-          </Text>
-          <Text size={1} muted>
-            {t('status-bar.review-changes-button.tooltip.changes-saved')}{' '}
-            <abbr aria-label={a11yUpdatedAgo}>{lastUpdatedTimeAgo}</abbr>
-          </Text>
-        </Stack>
-      }
-    >
-      <Button
-        mode="bleed"
-        justify="flex-start"
-        tone={buttonProps?.tone}
-        {...rest}
-        data-testid="review-changes-button"
-        ref={ref}
-        aria-label={t('status-bar.review-changes-button.aria-label')}
-      >
-        <Flex align="center">
-          <Box marginRight={collapsed ? 0 : 3} aria-hidden="true">
-            <Text>
-              <AnimatedStatusIcon status={status} />
-            </Text>
-          </Box>
-          {!collapsed && (
-            <Text size={1} weight="medium">
-              {buttonProps?.text}
-            </Text>
-          )}
-        </Flex>
-      </Button>
-    </Tooltip>
-  )
-})
-
-export const ReviewChangesButton = React.memo(ReviewButton)
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/index.ts b/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/index.ts
deleted file mode 100644
index 9beeee9b18a..00000000000
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ReviewChangesButton'
diff --git a/packages/sanity/src/desk/panes/document/timeline/TimelineError.tsx b/packages/sanity/src/desk/panes/document/timeline/TimelineError.tsx
index 3c931d07ae4..bdba80fe448 100644
--- a/packages/sanity/src/desk/panes/document/timeline/TimelineError.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/TimelineError.tsx
@@ -12,7 +12,7 @@ export function TimelineError() {
         <ErrorOutlineIcon />
       </TextWithTone>
       <Stack space={4}>
-        <TextWithTone size={1} tone="critical" weight="semibold">
+        <TextWithTone size={1} tone="critical" weight="medium">
           {t('timeline.error.load-document-changes-title')}
         </TextWithTone>
         <TextWithTone size={1} tone="critical">
diff --git a/packages/sanity/src/desk/panes/document/timeline/timeline.tsx b/packages/sanity/src/desk/panes/document/timeline/timeline.tsx
index 78f05fb9dd4..9be3b0cbc88 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timeline.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timeline.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
-import {Box, Flex, Spinner, Text} from '@sanity/ui'
+import {Box, Text} from '@sanity/ui'
+import {LoadingBlock} from '../../../../ui/loadingBlock'
 import {TimelineItem} from './timelineItem'
 import {ListWrapper, Root, StackWrapper} from './timeline.styled'
 import {Chunk, CommandList, CommandListRenderItemCallback, useTranslation} from 'sanity'
@@ -56,11 +57,7 @@ export const Timeline = ({
             timestamp={chunk.endTimestamp}
             type={chunk.type}
           />
-          {activeIndex === filteredChunks.length - 1 && hasMoreChunks && (
-            <Flex align="center" justify="center" padding={4}>
-              <Spinner muted />
-            </Flex>
-          )}
+          {activeIndex === filteredChunks.length - 1 && hasMoreChunks && <LoadingBlock hideText />}
         </Box>
       )
     },
@@ -84,7 +81,7 @@ export const Timeline = ({
     >
       {filteredChunks.length === 0 && (
         <StackWrapper padding={3} space={3}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             {t('timeline.error.no-document-history-title')}
           </Text>
           <Text muted size={1}>
diff --git a/packages/sanity/src/desk/panes/document/timeline/timelineItem.styled.tsx b/packages/sanity/src/desk/panes/document/timeline/timelineItem.styled.tsx
index d29ccb82d42..433094449b9 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timelineItem.styled.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timelineItem.styled.tsx
@@ -1,4 +1,11 @@
-import {Box, Button, Flex, rem} from '@sanity/ui'
+import {
+  Text,
+  Box,
+  Flex,
+  rem,
+  // eslint-disable-next-line no-restricted-imports
+  Button, // Button with specific styling and children behavior.
+} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 
 export const IconWrapper = styled(Flex)(({theme}) => {
diff --git a/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx b/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx
index 415e3b83e2a..71181766eaf 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx
@@ -1,12 +1,14 @@
 import React, {useCallback, createElement, useMemo} from 'react'
-import {Box, ButtonTone, Card, Flex, Label, Stack, Text} from '@sanity/ui'
+
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+import {ButtonProps} from '../../../../ui'
 import {getTimelineEventIconComponent} from './helpers'
 import {UserAvatarStack} from './userAvatarStack'
 import {IconBox, IconWrapper, Root, TimestampBox} from './timelineItem.styled'
 import {TIMELINE_ITEM_I18N_KEY_MAPPING} from './timelineI18n'
 import {type ChunkType, type Chunk, useTranslation, useDateTimeFormat} from 'sanity'
 
-const TIMELINE_ITEM_EVENT_TONE: Record<ChunkType | 'withinSelection', ButtonTone> = {
+const TIMELINE_ITEM_EVENT_TONE: Record<ChunkType | 'withinSelection', ButtonProps['tone']> = {
   initial: 'primary',
   create: 'primary',
   publish: 'positive',
@@ -95,9 +97,9 @@ export function TimelineItem({
                   shadow={1}
                   tone={isSelected ? 'primary' : TIMELINE_ITEM_EVENT_TONE[chunk.type]}
                 >
-                  <Label muted size={0}>
+                  <Text muted size={0} weight="medium">
                     {t('timeline.latest')}
-                  </Label>
+                  </Text>
                 </Card>
               </Flex>
             )}
diff --git a/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx b/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx
index 84f0c0e6db7..da8fc77d78d 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx
@@ -1,8 +1,9 @@
-import {SelectIcon} from '@sanity/icons'
-import {Button, Placement, Popover, useClickOutside, useGlobalKeyDown, useToast} from '@sanity/ui'
+import {ChevronDownIcon} from '@sanity/icons'
+import {Placement, Popover, useClickOutside, useGlobalKeyDown, useToast} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import styled from 'styled-components'
 import {useDocumentPane} from '../useDocumentPane'
+import {Button} from '../../../../ui'
 import {TimelineError} from './TimelineError'
 import {Timeline} from './timeline'
 import {TIMELINE_ITEM_I18N_KEY_MAPPING} from './timelineI18n'
@@ -167,9 +168,7 @@ export function TimelineMenu({chunk, mode, placement}: TimelineMenuProps) {
       <Button
         disabled={!ready}
         mode="bleed"
-        fontSize={1}
-        padding={2}
-        iconRight={SelectIcon}
+        iconRight={ChevronDownIcon}
         onClick={open ? handleClose : handleOpen}
         ref={setButton}
         selected={open}
diff --git a/packages/sanity/src/desk/panes/document/useDocumentTitle.ts b/packages/sanity/src/desk/panes/document/useDocumentTitle.ts
new file mode 100644
index 00000000000..123b3638859
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/useDocumentTitle.ts
@@ -0,0 +1,50 @@
+import {useDocumentPane} from './useDocumentPane'
+import {unstable_useValuePreview as useValuePreview} from 'sanity'
+
+/**
+ * useDocumentTitle hook return type.
+ *
+ * @beta
+ * @hidden
+ */
+interface UseDocumentTitle {
+  error?: string
+  title?: string
+}
+
+/**
+ * React hook that returns the document title for the current document in the document pane.
+ *
+ * @beta
+ * @hidden
+ *
+ * @returns The document title or error. See {@link UseDocumentTitle}
+ */
+export function useDocumentTitle(): UseDocumentTitle {
+  const {connectionState, schemaType, title, value: documentValue} = useDocumentPane()
+  const subscribed = Boolean(documentValue) && connectionState === 'connected'
+
+  const {error, value} = useValuePreview({
+    enabled: subscribed,
+    schemaType,
+    value: documentValue,
+  })
+
+  if (connectionState !== 'connected') {
+    return {error: undefined, title: undefined}
+  }
+
+  if (title) {
+    return {error: undefined, title}
+  }
+
+  if (!documentValue) {
+    return {error: undefined, title: `New ${schemaType?.title || schemaType?.name}`}
+  }
+
+  if (error) {
+    return {error: `Error: ${error.message}`, title: undefined}
+  }
+
+  return {error: undefined, title: value?.title}
+}
diff --git a/packages/sanity/src/desk/panes/documentList/DocumentListPane.tsx b/packages/sanity/src/desk/panes/documentList/DocumentListPane.tsx
index a15b8e94454..93a4d759aa8 100644
--- a/packages/sanity/src/desk/panes/documentList/DocumentListPane.tsx
+++ b/packages/sanity/src/desk/panes/documentList/DocumentListPane.tsx
@@ -52,12 +52,6 @@ const AnimatedSpinnerIcon = styled(SpinnerIcon)`
   animation: ${rotate} 500ms linear infinite;
 `
 
-const SearchCard = styled(Card)`
-  [data-ui='TextInput'] {
-    border-radius: inherit;
-  }
-`
-
 function useShallowUnique<ValueType>(value: ValueType): ValueType {
   const valueRef = useRef<ValueType>(value)
   if (!shallowEquals(valueRef.current, value)) {
@@ -229,26 +223,25 @@ export const DocumentListPane = memo(function DocumentListPane(props: DocumentLi
   }, [isLoading, items.length])
 
   const searchInput = (
-    <Box paddingX={2} paddingBottom={2}>
-      <SearchCard radius={4} tone="transparent">
-        <TextInput
-          aria-label={t('panes.document-list-pane.search-input.aria-label')}
-          autoComplete="off"
-          border={false}
-          clearButton={Boolean(searchQuery)}
-          disabled={!isSearchReady}
-          fontSize={[2, 2, 1]}
-          icon={loadingVariant === 'spinner' ? AnimatedSpinnerIcon : SearchIcon}
-          onChange={handleQueryChange}
-          onClear={handleClearSearch}
-          onKeyDown={handleSearchKeyDown}
-          placeholder={t('panes.document-list-pane.search-input.placeholder')}
-          radius={2}
-          ref={setSearchInputElement}
-          spellCheck={false}
-          value={searchInputValue}
-        />
-      </SearchCard>
+    <Box paddingX={3} paddingBottom={3}>
+      <TextInput
+        aria-label={t('panes.document-list-pane.search-input.aria-label')}
+        autoComplete="off"
+        border={false}
+        clearButton={Boolean(searchQuery)}
+        disabled={!isSearchReady}
+        fontSize={[2, 2, 1]}
+        icon={loadingVariant === 'spinner' ? AnimatedSpinnerIcon : SearchIcon}
+        onChange={handleQueryChange}
+        onClear={handleClearSearch}
+        onKeyDown={handleSearchKeyDown}
+        padding={2}
+        placeholder={t('panes.document-list-pane.search-input.placeholder')}
+        radius={2}
+        ref={setSearchInputElement}
+        spellCheck={false}
+        value={searchInputValue}
+      />
     </Box>
   )
 
diff --git a/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx b/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
index 912b1fcfe47..463cbb6a7d8 100644
--- a/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
+++ b/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
@@ -1,8 +1,10 @@
 import {SyncIcon} from '@sanity/icons'
-import {Box, Button, Card, Container, Flex, Heading, Spinner, Stack, Text} from '@sanity/ui'
+import {Box, Card, Container, Flex, Heading, Stack, Text} from '@sanity/ui'
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
 import {SanityDocument} from '@sanity/types'
 import styled from 'styled-components'
+import {Button} from '../../../ui'
+import {LoadingBlock} from '../../../ui/loadingBlock'
 import {Delay, PaneContent, usePane, usePaneLayout, PaneItem} from '../../components'
 import {DocumentListPaneItem, LoadingVariant} from './types'
 import {FULL_LIST_LIMIT} from './constants'
@@ -55,11 +57,9 @@ function LoadingView(props: {layout?: GeneralPreviewLayoutKey}) {
   const {layout} = props
 
   return (
-    <Stack padding={2} space={1}>
+    <Stack paddingX={3} paddingY={2} paddingTop={0} space={1}>
       {SKELETON_ITEMS.map((num) => (
-        <Card padding={2} key={num}>
-          <SanityDefaultPreview isPlaceholder layout={layout} />
-        </Card>
+        <SanityDefaultPreview isPlaceholder layout={layout} key={num} />
       ))}
     </Stack>
   )
@@ -133,11 +133,7 @@ export function DocumentListPaneContent(props: DocumentListPaneContentProps) {
             value={item}
           />
 
-          {showSpinner && (
-            <Flex align="center" justify="center" padding={4}>
-              <Spinner muted />
-            </Flex>
-          )}
+          {showSpinner && <LoadingBlock hideText />}
 
           {showMaxItemsMessage && (
             <Box marginY={1} paddingX={3} paddingY={4}>
@@ -251,8 +247,8 @@ export function DocumentListPaneContent(props: DocumentListPaneContentProps) {
             onEndReached={handleEndReached}
             onlyShowSelectionWhenActive
             overscan={10}
-            padding={2}
             paddingBottom={1}
+            paddingX={3}
             renderItem={renderItem}
             wrapAround={false}
           />
diff --git a/packages/sanity/src/desk/panes/documentList/DocumentListPaneHeader.tsx b/packages/sanity/src/desk/panes/documentList/DocumentListPaneHeader.tsx
index 6ad34b9b8ee..dc5da53c6a8 100644
--- a/packages/sanity/src/desk/panes/documentList/DocumentListPaneHeader.tsx
+++ b/packages/sanity/src/desk/panes/documentList/DocumentListPaneHeader.tsx
@@ -1,8 +1,10 @@
 import {ArrowLeftIcon} from '@sanity/icons'
-import {Button} from '@sanity/ui'
 import React, {memo, useMemo} from 'react'
+import {TooltipDelayGroupProvider} from '@sanity/ui'
 import {PaneMenuItem, PaneMenuItemGroup, DeskToolPaneActionHandler} from '../../types'
 import {BackLink, PaneHeader, PaneHeaderActions, usePane} from '../../components'
+import {Button} from '../../../ui'
+import {TOOLTIP_DELAY_PROPS} from '../../../ui/tooltip/constants'
 import {useDeskTool} from '../../useDeskTool'
 import {SortOrder} from './types'
 import {GeneralPreviewLayoutKey, InitialValueTemplateItem} from 'sanity'
@@ -46,23 +48,33 @@ export const DocumentListPaneHeader = memo(
     }, [setLayout, setSortOrder])
 
     return (
-      <PaneHeader
-        actions={
-          <PaneHeaderActions
-            initialValueTemplateItems={initialValueTemplates}
-            actionHandlers={actionHandlers}
-            menuItemGroups={menuItemGroups}
-            menuItems={menuItems}
-          />
-        }
-        backButton={
-          features.backButton &&
-          index > 0 && <Button as={BackLink} data-as="a" icon={ArrowLeftIcon} mode="bleed" />
-        }
-        contentAfter={contentAfter}
-        tabIndex={tabIndex}
-        title={title}
-      />
+      <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+        <PaneHeader
+          actions={
+            <PaneHeaderActions
+              initialValueTemplateItems={initialValueTemplates}
+              actionHandlers={actionHandlers}
+              menuItemGroups={menuItemGroups}
+              menuItems={menuItems}
+            />
+          }
+          backButton={
+            features.backButton &&
+            index > 0 && (
+              <Button
+                as={BackLink}
+                data-as="a"
+                icon={ArrowLeftIcon}
+                mode="bleed"
+                tooltipProps={{content: 'Back'}}
+              />
+            )
+          }
+          contentAfter={contentAfter}
+          tabIndex={tabIndex}
+          title={title}
+        />
+      </TooltipDelayGroupProvider>
     )
   },
 )
diff --git a/packages/sanity/src/desk/panes/list/ListPaneContent.tsx b/packages/sanity/src/desk/panes/list/ListPaneContent.tsx
index fc2e3cb28a3..c7e0c291500 100644
--- a/packages/sanity/src/desk/panes/list/ListPaneContent.tsx
+++ b/packages/sanity/src/desk/panes/list/ListPaneContent.tsx
@@ -62,7 +62,7 @@ export function ListPaneContent(props: ListPaneContentProps) {
       if (item.type === 'divider') {
         return (
           // eslint-disable-next-line react/no-array-index-key
-          <Box key={`divider-${itemIndex}`} marginTop={1} marginBottom={2}>
+          <Box key={`divider-${itemIndex}`} marginBottom={1}>
             <Divider />
           </Box>
         )
@@ -107,8 +107,8 @@ export function ListPaneContent(props: ListPaneContentProps) {
           itemHeight={51}
           items={items}
           onlyShowSelectionWhenActive
-          padding={2}
           paddingBottom={1}
+          paddingX={3}
           renderItem={renderItem}
           wrapAround={false}
         />
diff --git a/packages/sanity/src/desk/panes/list/ListPaneHeader.tsx b/packages/sanity/src/desk/panes/list/ListPaneHeader.tsx
index eb3d9fc2f31..a5517177143 100644
--- a/packages/sanity/src/desk/panes/list/ListPaneHeader.tsx
+++ b/packages/sanity/src/desk/panes/list/ListPaneHeader.tsx
@@ -1,7 +1,7 @@
 import {ArrowLeftIcon} from '@sanity/icons'
-import {Button} from '@sanity/ui'
 import React from 'react'
 import {BackLink, PaneHeader, PaneHeaderActions, usePane} from '../../components'
+import {Button} from '../../../ui'
 import {PaneMenuItem, PaneMenuItemGroup} from '../../types'
 import {useDeskTool} from '../../useDeskTool'
 
@@ -23,7 +23,15 @@ export const ListPaneHeader = ({index, menuItems, menuItemGroups, title}: ListPa
       actions={<PaneHeaderActions menuItems={menuItems} menuItemGroups={menuItemGroups} />}
       backButton={
         features.backButton &&
-        index > 0 && <Button as={BackLink} data-as="a" icon={ArrowLeftIcon} mode="bleed" />
+        index > 0 && (
+          <Button
+            as={BackLink}
+            data-as="a"
+            icon={ArrowLeftIcon}
+            mode="bleed"
+            tooltipProps={{content: 'Back'}}
+          />
+        )
       }
       tabIndex={tabIndex}
       title={title}
diff --git a/packages/sanity/src/desk/panes/loading/LoadingPane.tsx b/packages/sanity/src/desk/panes/loading/LoadingPane.tsx
index f88c24922e9..25c1acab15d 100644
--- a/packages/sanity/src/desk/panes/loading/LoadingPane.tsx
+++ b/packages/sanity/src/desk/panes/loading/LoadingPane.tsx
@@ -1,8 +1,9 @@
-import {Box, type CardTone, Flex, Spinner, Text, _raf2} from '@sanity/ui'
+import {type CardTone, Flex, _raf2} from '@sanity/ui'
 import React, {memo, useMemo, useState, useEffect} from 'react'
 import {Observable} from 'rxjs'
 import styled from 'styled-components'
 import {structureLocaleNamespace} from '../../i18n'
+import {LoadingBlock} from '../../../ui/loadingBlock'
 import {Delay} from '../../components/Delay'
 import {Pane, PaneContent} from '../../components/pane'
 import {WaitMessage, getWaitMessages} from './getWaitMessages'
@@ -91,15 +92,7 @@ export const LoadingPane = memo((props: LoadingPaneProps) => {
       justify="center"
       ref={setContentElement}
     >
-      <Spinner muted />
-
-      {(title || currentMessage) && (
-        <Box marginTop={3}>
-          <Text align="center" muted size={1}>
-            {title || currentMessage}
-          </Text>
-        </Box>
-      )}
+      <LoadingBlock title={title || currentMessage} />
     </Content>
   )
 
diff --git a/packages/sanity/src/desk/panes/userComponent/UserComponentPaneHeader.tsx b/packages/sanity/src/desk/panes/userComponent/UserComponentPaneHeader.tsx
index 44bc4ed2ae7..01600ea1631 100644
--- a/packages/sanity/src/desk/panes/userComponent/UserComponentPaneHeader.tsx
+++ b/packages/sanity/src/desk/panes/userComponent/UserComponentPaneHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {ArrowLeftIcon} from '@sanity/icons'
-import {Button} from '@sanity/ui'
+import {Button} from '../../../ui'
 import {PaneMenuItem, PaneMenuItemGroup, DeskToolPaneActionHandler} from '../../types'
 import {BackLink, PaneHeader, PaneHeaderActions} from '../../components'
 import {useDeskTool} from '../../useDeskTool'
@@ -32,7 +32,15 @@ export function UserComponentPaneHeader(props: UserComponentPaneHeaderProps) {
       }
       backButton={
         features.backButton &&
-        index > 0 && <Button as={BackLink} data-as="a" icon={ArrowLeftIcon} mode="bleed" />
+        index > 0 && (
+          <Button
+            as={BackLink}
+            data-as="a"
+            icon={ArrowLeftIcon}
+            mode="bleed"
+            tooltipProps={{content: 'Back'}}
+          />
+        )
       }
       title={title}
     />
diff --git a/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx b/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
new file mode 100644
index 00000000000..b8f8d00e2ac
--- /dev/null
+++ b/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
@@ -0,0 +1,106 @@
+import {hues} from '@sanity/color'
+import {CheckmarkIcon, CircleIcon} from '@sanity/icons'
+import {Avatar, Box, Card, Container, Menu, MenuDivider, Text} from '@sanity/ui'
+import {useString} from '@sanity/ui-workshop'
+import React from 'react'
+import {MenuItem} from '../menuItem'
+
+const HOTKEYS = ['Ctrl', 'Alt', 'P']
+const AVATAR_INITIALS = 'A.W.'
+
+export default function MenuItemStory() {
+  const subtitle = useString('Subtitle', 'Subtitle', 'Props') || ''
+  const text = useString('Text', 'Text', 'Props') || ''
+
+  return (
+    <Container width={0} padding={4}>
+      <Card border>
+        <Menu>
+          <MenuItem text={text} />
+          <MenuItem icon={CircleIcon} text={text} />
+          <MenuItem iconRight={CheckmarkIcon} text={text} />
+          <MenuItem hotkeys={HOTKEYS} text={text} />
+          <MenuItem
+            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+            text={text}
+            subtitle={subtitle}
+          />
+          <MenuItem
+            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+            text={text}
+            subtitle={subtitle}
+            iconRight={CheckmarkIcon}
+          />
+          <MenuItem
+            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+            text={text}
+            subtitle={subtitle}
+            badgeText="badge"
+          />
+          <MenuDivider />
+          <Box padding={2}>
+            <Text size={1}>Not recommended</Text>
+          </Box>
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}> Don&apos;t use left icons in large menu items</Text>
+          </Box>
+
+          <MenuItem icon={CircleIcon} text={text} subtitle={subtitle} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don&apos;t use keyboard shortcuts with large menu items</Text>
+          </Box>
+          <MenuItem text={text} hotkeys={HOTKEYS} subtitle={subtitle} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don&apos;t use badges in small menu items</Text>
+          </Box>
+          <MenuItem text={text} badgeText={'badge'} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don&apos;t use icons and previews in the same item</Text>
+          </Box>
+          <MenuItem
+            icon={CircleIcon}
+            preview={
+              <Card
+                radius={2}
+                style={{width: '41px', height: '41px', background: hues.cyan[500].hex}}
+              />
+            }
+            text={text}
+            subtitle={subtitle}
+          />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don&apos;t use icon right and hotkeys in the same item</Text>
+          </Box>
+          <MenuItem icon={CircleIcon} text={text} iconRight={CheckmarkIcon} hotkeys={HOTKEYS} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don&apos;t use icon right and badge in the same item</Text>
+          </Box>
+          <MenuItem icon={CircleIcon} text={text} iconRight={CheckmarkIcon} badgeText={'badge'} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don&apos;t use hotkeys and badge in the same item</Text>
+          </Box>
+          <MenuItem icon={CircleIcon} text={text} hotkeys={HOTKEYS} badgeText={'badge'} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don&apos;t use everything at once</Text>
+          </Box>
+          <MenuItem
+            icon={CircleIcon}
+            text={text}
+            hotkeys={HOTKEYS}
+            badgeText={'badge'}
+            iconRight={CheckmarkIcon}
+          />
+          <MenuItem
+            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+            subtitle={subtitle}
+            icon={CircleIcon}
+            text={text}
+            hotkeys={HOTKEYS}
+            badgeText={'badge'}
+            iconRight={CheckmarkIcon}
+          />
+        </Menu>
+      </Card>
+    </Container>
+  )
+}
diff --git a/packages/sanity/src/ui/__workshop__/index.ts b/packages/sanity/src/ui/__workshop__/index.ts
new file mode 100644
index 00000000000..37dc3793fec
--- /dev/null
+++ b/packages/sanity/src/ui/__workshop__/index.ts
@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'studio-ui',
+  title: 'Studio UI',
+  stories: [
+    {
+      name: 'menu-item',
+      title: 'MenuItem',
+      component: lazy(() => import('./MenuItemStory')),
+    },
+  ],
+})
diff --git a/packages/sanity/src/ui/button/Button.tsx b/packages/sanity/src/ui/button/Button.tsx
new file mode 100644
index 00000000000..b4be0b4aa4e
--- /dev/null
+++ b/packages/sanity/src/ui/button/Button.tsx
@@ -0,0 +1,100 @@
+/* eslint-disable no-restricted-imports */
+import {Button as UIButton, ButtonProps as UIButtonProps} from '@sanity/ui'
+import React, {forwardRef, useCallback} from 'react'
+import styled from 'styled-components'
+import {Tooltip, TooltipProps} from '..'
+import {ConditionalWrapper, ConditionalWrapperRenderWrapperCallback} from '../conditionalWrapper'
+
+type BaseButtonProps = Pick<
+  UIButtonProps,
+  | 'as'
+  | 'icon'
+  | 'iconRight'
+  | 'justify'
+  | 'loading'
+  | 'mode'
+  | 'selected'
+  | 'tone'
+  | 'type'
+  | 'width'
+> & {
+  size?: 'default' | 'large'
+}
+
+type ButtonWithText = {
+  text: string
+  tooltipProps?: TooltipProps | null
+  icon?: UIButtonProps['icon']
+}
+
+type IconButton = {
+  text?: undefined
+  icon?: UIButtonProps['icon']
+  /**
+   * When using a button with an icon, tooltipProps are required to enforce consistency in UI.
+   */
+  tooltipProps: TooltipProps | null
+}
+
+/** @internal */
+export type ButtonProps = BaseButtonProps & (ButtonWithText | IconButton)
+
+const LARGE_BUTTON_PROPS = {
+  space: 3,
+  padding: 3,
+}
+const DEFAULT_BUTTON_PROPS = {
+  space: 2,
+  padding: 2,
+}
+
+const TooltipButtonWrapper = styled.span`
+  display: inline-flex;
+`
+/**
+ * Studio UI <Button>.
+ *
+ * Studio UI components are opinionated `@sanity/ui` components meant for internal use only.
+ * Props and options are intentionally limited to ensure consistency and ease of use.
+ *
+ * @internal
+ */
+export const Button = forwardRef(function Button(
+  {
+    size = 'default',
+    mode = 'default',
+    tone = 'default',
+    tooltipProps,
+    ...props
+  }: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'size' | 'title'>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const renderWrapper = useCallback<ConditionalWrapperRenderWrapperCallback>(
+    (children) => {
+      return (
+        <Tooltip content={tooltipProps?.content} portal {...tooltipProps}>
+          {/* This span is needed to make the tooltip work in disabled buttons */}
+          <TooltipButtonWrapper>{children}</TooltipButtonWrapper>
+        </Tooltip>
+      )
+    },
+    [tooltipProps],
+  )
+
+  const ariaLabel = props.text ?? tooltipProps?.content
+
+  return (
+    <ConditionalWrapper condition={!!tooltipProps} wrapper={renderWrapper}>
+      <UIButton
+        // aria-label is enforced in buttons without text.
+        // Could be overridden by passing aria-label directly.
+        {...(ariaLabel ? {'aria-label': ariaLabel} : {})}
+        {...props}
+        {...(size === 'default' ? DEFAULT_BUTTON_PROPS : LARGE_BUTTON_PROPS)}
+        ref={ref}
+        mode={mode}
+        tone={tone}
+      />
+    </ConditionalWrapper>
+  )
+})
diff --git a/packages/sanity/src/ui/button/index.ts b/packages/sanity/src/ui/button/index.ts
new file mode 100644
index 00000000000..8486fd6d62d
--- /dev/null
+++ b/packages/sanity/src/ui/button/index.ts
@@ -0,0 +1 @@
+export * from './Button'
diff --git a/packages/sanity/src/ui/conditionalWrapper/ConditionalWrapper.tsx b/packages/sanity/src/ui/conditionalWrapper/ConditionalWrapper.tsx
new file mode 100644
index 00000000000..05f1ec6f82a
--- /dev/null
+++ b/packages/sanity/src/ui/conditionalWrapper/ConditionalWrapper.tsx
@@ -0,0 +1,17 @@
+export type ConditionalWrapperRenderWrapperCallback = (children: React.ReactNode) => React.ReactNode
+
+export function ConditionalWrapper({
+  children,
+  condition,
+  wrapper,
+}: {
+  children: React.ReactNode
+  condition: boolean
+  wrapper: ConditionalWrapperRenderWrapperCallback
+}): React.ReactNode {
+  if (!condition) {
+    return children
+  }
+
+  return wrapper(children)
+}
diff --git a/packages/sanity/src/ui/conditionalWrapper/index.ts b/packages/sanity/src/ui/conditionalWrapper/index.ts
new file mode 100644
index 00000000000..adb6113e237
--- /dev/null
+++ b/packages/sanity/src/ui/conditionalWrapper/index.ts
@@ -0,0 +1 @@
+export * from './ConditionalWrapper'
diff --git a/packages/sanity/src/ui/dialog/Dialog.tsx b/packages/sanity/src/ui/dialog/Dialog.tsx
new file mode 100644
index 00000000000..dc2833281cd
--- /dev/null
+++ b/packages/sanity/src/ui/dialog/Dialog.tsx
@@ -0,0 +1,94 @@
+/* eslint-disable no-restricted-imports */
+import {
+  Button,
+  Flex,
+  Dialog as UIDialog,
+  DialogProps as UIDialogProps,
+  Box,
+  BoxHeight,
+} from '@sanity/ui'
+import React, {ComponentProps, forwardRef} from 'react'
+
+/** @internal */
+export interface DialogProps
+  extends Pick<
+      UIDialogProps,
+      | '__unstable_autoFocus'
+      | '__unstable_hideCloseButton'
+      | 'contentRef'
+      | 'header'
+      | 'id'
+      | 'onActivate'
+      | 'onClickOutside'
+      | 'onClose'
+      | 'portal'
+      | 'position'
+      | 'scheme'
+      | 'width'
+    >,
+    Pick<React.HTMLProps<HTMLDivElement>, 'onDragEnter'> {
+  /**
+   * Dialog body height.
+   * Set this to 'fill' (i.e. 100%) if you want overflow body content to be contained
+   * and not trigger dynamic border visibility.
+   */
+  bodyHeight?: BoxHeight
+  children?: React.ReactNode
+  footer?: {
+    // TODO: When `@sanity/ui` has `Button` component, use those props instead.
+    // TODO: Omit style-specific props, e.g. fontSize, padding etc
+    cancelButton?: ComponentProps<typeof Button>
+    confirmButton?: ComponentProps<typeof Button>
+  }
+  padding?: boolean
+}
+
+/**
+ * Studio UI <Dialog>.
+ *
+ * Studio UI components are opinionated `@sanity/ui` components meant for internal use only.
+ * Props and options are intentionally limited to ensure consistency and ease of use.
+ *
+ * @internal
+ */
+export const Dialog = forwardRef(function Dialog(
+  {bodyHeight, children, footer, padding = true, ...props}: DialogProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  return (
+    <UIDialog
+      {...props}
+      animate
+      ref={ref}
+      footer={
+        (footer?.confirmButton || footer?.cancelButton) && (
+          <Flex width="full" gap={3} justify="flex-end" padding={3}>
+            {props.onClose && (
+              <Button
+                mode="bleed"
+                padding={2}
+                text="Cancel"
+                tone="default"
+                onClick={props.onClose}
+                {...footer.cancelButton}
+              />
+            )}
+            {footer.confirmButton && (
+              <Button
+                mode="default"
+                padding={2}
+                text="Confirm"
+                tone="critical"
+                {...footer.confirmButton}
+              />
+            )}
+          </Flex>
+        )
+      }
+    >
+      <Box height={bodyHeight} padding={padding ? 4 : 0}>
+        {children}
+      </Box>
+    </UIDialog>
+  )
+})
diff --git a/packages/sanity/src/ui/dialog/index.ts b/packages/sanity/src/ui/dialog/index.ts
new file mode 100644
index 00000000000..8390808a2a1
--- /dev/null
+++ b/packages/sanity/src/ui/dialog/index.ts
@@ -0,0 +1 @@
+export * from './Dialog'
diff --git a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
new file mode 100644
index 00000000000..a8b11cd8008
--- /dev/null
+++ b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
@@ -0,0 +1,56 @@
+import {CheckmarkIcon} from '@sanity/icons'
+import {PreviewValue, SanityDocument} from '@sanity/types'
+import {Box, ButtonTone, Flex} from '@sanity/ui'
+import React from 'react'
+import styled, {css} from 'styled-components'
+import {TextWithTone, useDocumentStatusTimeAgo} from 'sanity'
+
+export interface DocumentStatusProps {
+  draft?: PreviewValue | Partial<SanityDocument> | null
+  published?: PreviewValue | Partial<SanityDocument> | null
+  showPublishedIcon?: boolean
+}
+
+const SIZE = 5 // px
+
+const Dot = styled(Box)<{$draft?: boolean; $published: boolean}>(({theme, $draft, $published}) => {
+  let tone: ButtonTone = 'default'
+  if ($published) {
+    tone = $draft ? 'caution' : 'positive'
+  }
+
+  return css`
+    background: ${$published
+      ? theme.sanity.color.solid[tone].enabled.bg
+      : 'var(--card-muted-fg-color)'};
+    border-radius: ${SIZE}px;
+    height: ${SIZE}px;
+    opacity: ${$published ? 1 : 0.25};
+    width: ${SIZE}px;
+  `
+})
+
+export function DocumentStatus({draft, published, showPublishedIcon}: DocumentStatusProps) {
+  const statusTimeAgo = useDocumentStatusTimeAgo({draft, published})
+
+  if (!draft && !published) {
+    return null
+  }
+
+  if (!draft && published) {
+    if (showPublishedIcon) {
+      return (
+        <TextWithTone size={1} tone="positive">
+          <CheckmarkIcon aria-label={statusTimeAgo} />
+        </TextWithTone>
+      )
+    }
+    return null
+  }
+
+  return (
+    <Flex align="center" height="fill" justify="center" style={{flexShrink: 0}}>
+      <Dot aria-label={statusTimeAgo} $draft={!!draft} $published={!!published} />
+    </Flex>
+  )
+}
diff --git a/packages/sanity/src/ui/documentStatus/index.ts b/packages/sanity/src/ui/documentStatus/index.ts
new file mode 100644
index 00000000000..84b9a16b3a9
--- /dev/null
+++ b/packages/sanity/src/ui/documentStatus/index.ts
@@ -0,0 +1 @@
+export * from './DocumentStatus'
diff --git a/packages/sanity/src/ui/index.ts b/packages/sanity/src/ui/index.ts
new file mode 100644
index 00000000000..fb7b4385ea6
--- /dev/null
+++ b/packages/sanity/src/ui/index.ts
@@ -0,0 +1,8 @@
+export * from './button'
+export * from './dialog'
+export * from './menuGroup'
+export * from './menuItem'
+export * from './tab'
+export * from './tooltip'
+
+// @todo: consider an alternative pattern for non studio ui components, avoiding circular dependencies
diff --git a/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx b/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
new file mode 100644
index 00000000000..e9fb5574303
--- /dev/null
+++ b/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
@@ -0,0 +1,126 @@
+/* eslint-disable no-restricted-imports */
+import {Card, Layer, Spinner, Text} from '@sanity/ui'
+import React from 'react'
+import styled, {css} from 'styled-components'
+
+// Enable to force debug background
+const DEBUG_MODE = false
+
+interface LoadingTestProps {
+  /** Absolutely positions this component when `true`. */
+  fill?: boolean
+  /** Optionally hide loading title. If `true`, the spinner will remain centered. */
+  hideText?: boolean
+  /**
+   * Text to display underneath the spinner.  If omitted, will default to `'Loading'`.
+   * If providing a value, avoid using trailing ellipses.
+   *
+   * @defaultValue `'Loading'`
+   */
+  title?: string | null
+}
+
+const StyledCard = styled(Card)<{$fill?: boolean}>(({$fill}) => {
+  return css`
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    ${$fill
+      ? css`
+          bottom: 0;
+          height: 100%;
+          left: 0;
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 100%;
+        `
+      : css`
+          min-height: 75px;
+          height: stretch;
+          height: -webkit-fill-available;
+          width: stretch;
+          width: -webkit-fill-available;
+        `}
+
+    ${DEBUG_MODE &&
+    css`
+      background: linear-gradient(#5555ca, #daf9f9);
+      border: 2px solid black;
+      > * {
+        mix-blend-mode: multiply;
+      }
+    `}
+
+    > * {
+      position: absolute;
+    }
+  `
+})
+
+const StyledSpinner = styled(Spinner)<{$animatePosition: boolean}>(({$animatePosition = true}) => {
+  return css`
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+    @keyframes slideUp {
+      from {
+        transform: translateY(0);
+      }
+      to {
+        transform: translateY(-15px);
+      }
+    }
+    animation: ${$animatePosition
+      ? '500ms ease-out 500ms 1 normal both running fadeIn, 750ms ease-out 2000ms 1 normal both running slideUp'
+      : '500ms ease-out 500ms 1 normal both running fadeIn'};
+  `
+})
+
+const StyledText = styled(Text)`
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes slideDown {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(15px);
+    }
+  }
+  animation:
+    1500ms ease-out 2000ms 1 normal both running fadeIn,
+    750ms ease-out 2000ms 1 normal both running slideDown;
+`
+
+/**
+ * A generic loading container which displays a spinner and text.
+ * The spinner won't initially be visible and fades in after a short delay.
+ */
+// @todo: ensure this works in dark mode
+export function LoadingBlock({fill, hideText, title = 'Loading'}: LoadingTestProps) {
+  return (
+    <StyledCard $fill={fill} as={fill ? Layer : 'div'}>
+      <StyledSpinner $animatePosition={!hideText} muted />
+      {!hideText && (
+        <StyledText muted size={1}>
+          {title}
+        </StyledText>
+      )}
+    </StyledCard>
+  )
+}
diff --git a/packages/sanity/src/ui/loadingBlock/index.ts b/packages/sanity/src/ui/loadingBlock/index.ts
new file mode 100644
index 00000000000..5ec61af63a5
--- /dev/null
+++ b/packages/sanity/src/ui/loadingBlock/index.ts
@@ -0,0 +1 @@
+export * from './LoadingBlock'
diff --git a/packages/sanity/src/ui/menuGroup/MenuGroup.tsx b/packages/sanity/src/ui/menuGroup/MenuGroup.tsx
new file mode 100644
index 00000000000..c16b62f33b2
--- /dev/null
+++ b/packages/sanity/src/ui/menuGroup/MenuGroup.tsx
@@ -0,0 +1,19 @@
+/* eslint-disable no-restricted-imports */
+import {MenuGroup as UIMenuGroup, MenuGroupProps as UIMenuGroupProps} from '@sanity/ui'
+import React from 'react'
+
+/** @internal */
+export type MenuGroupProps = Pick<UIMenuGroupProps, 'icon' | 'popover' | 'text' | 'tone'> &
+  Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'tabIndex'>
+
+/**
+ * Studio UI <MenuGroup>.
+ *
+ * Studio UI components are opinionated `@sanity/ui` components meant for internal use only.
+ * Props and options are intentionally limited to ensure consistency and ease of use.
+ *
+ * @internal
+ */
+export const MenuGroup = (props: MenuGroupProps) => {
+  return <UIMenuGroup {...props} fontSize={1} padding={3} />
+}
diff --git a/packages/sanity/src/ui/menuGroup/index.ts b/packages/sanity/src/ui/menuGroup/index.ts
new file mode 100644
index 00000000000..94f4595e8ff
--- /dev/null
+++ b/packages/sanity/src/ui/menuGroup/index.ts
@@ -0,0 +1 @@
+export * from './MenuGroup'
diff --git a/packages/sanity/src/ui/menuItem/MenuItem.tsx b/packages/sanity/src/ui/menuItem/MenuItem.tsx
new file mode 100644
index 00000000000..cebabf436f2
--- /dev/null
+++ b/packages/sanity/src/ui/menuItem/MenuItem.tsx
@@ -0,0 +1,160 @@
+/* eslint-disable no-restricted-imports */
+import {
+  Flex,
+  MenuItem as UIMenuItem,
+  MenuItemProps as UIMenuItemProps,
+  Text,
+  Badge,
+  Stack,
+  Hotkeys,
+} from '@sanity/ui'
+import React, {createElement, forwardRef, isValidElement, useCallback, useMemo} from 'react'
+import {isValidElementType} from 'react-is'
+import styled from 'styled-components'
+import {ConditionalWrapper, ConditionalWrapperRenderWrapperCallback} from '../conditionalWrapper'
+import {Tooltip, TooltipProps} from '..'
+
+const FONT_SIZE = 1
+
+/** @internal */
+export type MenuItemProps = Pick<
+  UIMenuItemProps,
+  'as' | 'icon' | 'iconRight' | 'pressed' | 'selected' | 'text' | 'tone' | 'hotkeys'
+> &
+  Omit<
+    React.HTMLProps<HTMLDivElement>,
+    'as' | 'height' | 'ref' | 'selected' | 'tabIndex' | 'size'
+  > & {
+    badgeText?: string
+    /**
+     * Usage of `children` is not supported, import `MenuItem` from `@sanity/ui` instead.
+     */
+    children?: undefined
+    /**
+     * Previews should be 25x25.
+     */
+    preview?: React.ReactNode
+    /**
+     * Allows to add wrappers to the menu item, e.g. `Tooltip`.
+     */
+    renderMenuItem?: (menuItem: React.JSX.Element) => React.ReactNode
+    subtitle?: string
+    tooltipProps?: TooltipProps | null
+  }
+
+const PreviewWrapper = styled.div`
+  height: 25px;
+  width: 25px;
+  overflow: hidden;
+`
+
+/**
+ * Studio UI <MenuItem>.
+ *
+ * Studio UI components are opinionated `@sanity/ui` components meant for internal use only.
+ * Props and options are intentionally limited to ensure consistency and ease of use.
+ *
+ * @internal
+ */
+export const MenuItem = forwardRef(function MenuItem(
+  {
+    badgeText,
+    children: childrenProp,
+    hotkeys,
+    icon,
+    iconRight,
+    preview = null,
+    renderMenuItem,
+    subtitle,
+    text,
+    tooltipProps,
+    ...rest
+  }: MenuItemProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const menuItemContent = useMemo(() => {
+    return (
+      <Flex gap={preview ? 2 : 3} align="center">
+        {icon && (
+          <Text size={FONT_SIZE}>
+            {isValidElement(icon) && icon}
+            {isValidElementType(icon) && createElement(icon)}
+          </Text>
+        )}
+        {preview && (
+          <PreviewWrapper>
+            <Flex align="center" height="fill" justify="center">
+              {preview}
+            </Flex>
+          </PreviewWrapper>
+        )}
+        {(text || subtitle) && (
+          <Stack flex={1} space={2}>
+            {text && (
+              <Text size={FONT_SIZE} textOverflow="ellipsis" weight="medium">
+                {text}
+              </Text>
+            )}
+            {subtitle && (
+              <Text size={FONT_SIZE} textOverflow="ellipsis" weight={'regular'} muted>
+                {subtitle}
+              </Text>
+            )}
+          </Stack>
+        )}
+        {(badgeText || hotkeys || iconRight) && (
+          <Flex gap={3} marginLeft={3}>
+            {hotkeys && (
+              <Hotkeys
+                fontSize={FONT_SIZE}
+                keys={hotkeys}
+                style={{marginTop: -4, marginBottom: -4}}
+              />
+            )}
+
+            {badgeText && (
+              <Badge fontSize={FONT_SIZE} mode="outline">
+                {badgeText}
+              </Badge>
+            )}
+
+            {iconRight && (
+              <Text size={FONT_SIZE}>
+                {isValidElement(iconRight) && iconRight}
+                {isValidElementType(iconRight) && createElement(iconRight)}
+              </Text>
+            )}
+          </Flex>
+        )}
+      </Flex>
+    )
+  }, [badgeText, hotkeys, icon, iconRight, preview, subtitle, text])
+
+  const renderWrapper = useCallback<ConditionalWrapperRenderWrapperCallback>(
+    (children) => {
+      return (
+        <Tooltip content={tooltipProps?.content} portal {...tooltipProps}>
+          {/* This div is needed to make the tooltip work in disabled menu items */}
+          <div>{children}</div>
+        </Tooltip>
+      )
+    },
+    [tooltipProps],
+  )
+
+  return (
+    <ConditionalWrapper condition={!!tooltipProps} wrapper={renderWrapper}>
+      <UIMenuItem
+        paddingLeft={preview ? 1 : 3}
+        paddingRight={3}
+        paddingY={preview ? 1 : 3}
+        ref={ref}
+        {...rest}
+      >
+        {typeof childrenProp === 'undefined' && typeof renderMenuItem === 'function'
+          ? renderMenuItem(menuItemContent)
+          : menuItemContent}
+      </UIMenuItem>
+    </ConditionalWrapper>
+  )
+})
diff --git a/packages/sanity/src/ui/menuItem/index.ts b/packages/sanity/src/ui/menuItem/index.ts
new file mode 100644
index 00000000000..7f0d25e4824
--- /dev/null
+++ b/packages/sanity/src/ui/menuItem/index.ts
@@ -0,0 +1 @@
+export * from './MenuItem'
diff --git a/packages/sanity/src/ui/tab/Tab.tsx b/packages/sanity/src/ui/tab/Tab.tsx
new file mode 100644
index 00000000000..917f9fe83d1
--- /dev/null
+++ b/packages/sanity/src/ui/tab/Tab.tsx
@@ -0,0 +1,50 @@
+/* eslint-disable no-restricted-imports */
+import {Tab as UITab, TabProps as UITabProps} from '@sanity/ui'
+import React, {forwardRef} from 'react'
+
+/**
+ * @internal
+ *
+ * Padding and font sizes are fixed in Studio UI <Tab> components.
+ */
+export type TabProps = Pick<
+  UITabProps,
+  'aria-controls' | 'focused' | 'icon' | 'id' | 'label' | 'selected' | 'tone'
+> & {
+  size?: 'default' | 'small'
+}
+
+const SMALL_TAB_PROPS = {
+  padding: 2,
+}
+
+const DEFAULT_TAB_PROPS = {
+  padding: 3,
+}
+
+/**
+ * Studio UI <Tab>.
+ *
+ * Studio UI components are opinionated `@sanity/ui` components meant for internal use only.
+ * Props and options are intentionally limited to ensure consistency and ease of use.
+ *
+ * @internal
+ */
+export const Tab = forwardRef(function Tab(
+  {
+    size = 'small',
+    tone = 'default',
+    ...props
+  }: TabProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'size'>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  return (
+    <UITab
+      {...props}
+      {...(size === 'default' ? DEFAULT_TAB_PROPS : SMALL_TAB_PROPS)}
+      muted
+      ref={ref}
+      tone={tone}
+    />
+  )
+})
diff --git a/packages/sanity/src/ui/tab/index.ts b/packages/sanity/src/ui/tab/index.ts
new file mode 100644
index 00000000000..b113ad44db7
--- /dev/null
+++ b/packages/sanity/src/ui/tab/index.ts
@@ -0,0 +1 @@
+export * from './Tab'
diff --git a/packages/sanity/src/ui/tooltip/Tooltip.tsx b/packages/sanity/src/ui/tooltip/Tooltip.tsx
new file mode 100644
index 00000000000..69943ae889b
--- /dev/null
+++ b/packages/sanity/src/ui/tooltip/Tooltip.tsx
@@ -0,0 +1,62 @@
+/* eslint-disable no-restricted-imports */
+import {
+  Flex,
+  Hotkeys,
+  HotkeysProps,
+  Placement,
+  Text,
+  Tooltip as UITooltip,
+  TooltipProps as UITooltipProps,
+} from '@sanity/ui'
+import React, {forwardRef} from 'react'
+import {TOOLTIP_DELAY_PROPS} from './constants'
+
+/** @internal */
+export type TooltipProps = Omit<UITooltipProps, 'content' | 'padding'> & {
+  content?: string | null
+  hotkeys?: HotkeysProps['keys']
+}
+
+const TOOLTIP_FALLBACK_PLACEMENTS: Placement[] = [
+  'bottom-start',
+  'bottom-end',
+  'top-start',
+  'top-end',
+]
+
+/**
+ * Studio UI <Tooltip>.
+ *
+ * Studio UI components are opinionated `@sanity/ui` components meant for internal use only.
+ * Props and options are intentionally limited to ensure consistency and ease of use.
+ *
+ * @internal
+ */
+export const Tooltip = forwardRef(function Tooltip(
+  props: TooltipProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {content, hotkeys, placement = 'bottom', portal = true, ...rest} = props
+
+  return (
+    <UITooltip
+      animate
+      arrow={false}
+      boundaryElement={null}
+      content={
+        <Flex align="center" gap={3}>
+          {content && <Text size={1}>{content}</Text>}
+          {hotkeys && (
+            <Hotkeys fontSize={1} keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />
+          )}
+        </Flex>
+      }
+      delay={TOOLTIP_DELAY_PROPS}
+      fallbackPlacements={TOOLTIP_FALLBACK_PLACEMENTS}
+      portal={portal}
+      ref={ref}
+      placement={placement}
+      {...rest}
+    />
+  )
+})
diff --git a/packages/sanity/src/ui/tooltip/TooltipWithNodes.tsx b/packages/sanity/src/ui/tooltip/TooltipWithNodes.tsx
new file mode 100644
index 00000000000..ebbad946260
--- /dev/null
+++ b/packages/sanity/src/ui/tooltip/TooltipWithNodes.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable no-restricted-imports */
+import {Tooltip as UITooltip, TooltipProps as UITooltipProps} from '@sanity/ui'
+import React, {forwardRef} from 'react'
+import {TOOLTIP_DELAY_PROPS} from './constants'
+
+/** @internal */
+export type TooltipWithNodesProps = UITooltipProps
+
+/**
+ * Studio UI <TooltipWithNodes>.
+ *
+ * This is a just a regular 'full fat' Sanity UI <Tooltip> component with default
+ * open delay applied.
+ *
+ * This may be deprecated in future as we look to simplify studio tooltip usage in general.
+ *
+ * @internal
+ */
+export const TooltipWithNodes = forwardRef(function Tooltip(
+  props: TooltipWithNodesProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {placement, ...rest} = props
+  return (
+    <UITooltip
+      animate
+      arrow={false}
+      boundaryElement={null}
+      delay={TOOLTIP_DELAY_PROPS}
+      placement={placement || 'bottom'}
+      ref={ref}
+      {...rest}
+    />
+  )
+})
diff --git a/packages/sanity/src/ui/tooltip/constants.ts b/packages/sanity/src/ui/tooltip/constants.ts
new file mode 100644
index 00000000000..a65bb9c3548
--- /dev/null
+++ b/packages/sanity/src/ui/tooltip/constants.ts
@@ -0,0 +1,3 @@
+export const TOOLTIP_DELAY_PROPS = {
+  open: 400,
+}
diff --git a/packages/sanity/src/ui/tooltip/index.ts b/packages/sanity/src/ui/tooltip/index.ts
new file mode 100644
index 00000000000..2eb5ba2286a
--- /dev/null
+++ b/packages/sanity/src/ui/tooltip/index.ts
@@ -0,0 +1,2 @@
+export * from './Tooltip'
+export * from './TooltipWithNodes'
diff --git a/yarn.lock b/yarn.lock
index 3e5163c3350..57fa8976f4b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1507,6 +1507,13 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.1.tgz#4d795b649cc3b1cbb760d191c80dcb4353c9a366"
   integrity sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==
 
+"@floating-ui/core@^1.4.2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
+  integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
+  dependencies:
+    "@floating-ui/utils" "^0.1.3"
+
 "@floating-ui/dom@^1.2.7":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.4.1.tgz#3dff8b1b429e60d36ce03281a1cc3cd923a8e7fa"
@@ -1514,6 +1521,14 @@
   dependencies:
     "@floating-ui/core" "^1.3.1"
 
+"@floating-ui/dom@^1.5.1":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
+  integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
+  dependencies:
+    "@floating-ui/core" "^1.4.2"
+    "@floating-ui/utils" "^0.1.3"
+
 "@floating-ui/react-dom@2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.0.tgz#7514baac526c818892bbcc84e1c3115008c029f9"
@@ -1521,6 +1536,18 @@
   dependencies:
     "@floating-ui/dom" "^1.2.7"
 
+"@floating-ui/react-dom@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.4.tgz#b076fafbdfeb881e1d86ae748b7ff95150e9f3ec"
+  integrity sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==
+  dependencies:
+    "@floating-ui/dom" "^1.5.1"
+
+"@floating-ui/utils@^0.1.3":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
+  integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
+
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -3564,6 +3591,11 @@
     get-it "^8.4.4"
     rxjs "^7.0.0"
 
+"@sanity/color@3.0.0-beta.7":
+  version "3.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/@sanity/color/-/color-3.0.0-beta.7.tgz#396f4cf44d6bbb1af136e344e499640fe7ca9880"
+  integrity sha512-cLC0qcFWCe5ClQZ+iGorz2iKMIzAE728L4ZRgZuRKp+Hzsm4/Vl6qMwV2Xa0RipjKuSysSaLUyx2b1oAOG33SA==
+
 "@sanity/color@^2.1.20", "@sanity/color@^2.2.5":
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/@sanity/color/-/color-2.2.5.tgz#6b28578573859495ed1ffd5491322cb8e90b3e07"
@@ -3643,7 +3675,17 @@
   resolved "https://registry.yarnpkg.com/@sanity/icons/-/icons-1.3.10.tgz#df934a94ae6669fe6b15515d800afb221cba0498"
   integrity sha512-5wVG/vIiGuGrSmq+Bl3PY7XDgQrGv0fyHdJI64FSulnr2wH3NMqZ6C59UFxnrZ93sr7kOt0zQFoNv2lkPBi0Cg==
 
-"@sanity/icons@^2", "@sanity/icons@^2.0.0", "@sanity/icons@^2.3.1", "@sanity/icons@^2.4.0", "@sanity/icons@^2.4.1", "@sanity/icons@^2.6.0", "@sanity/icons@^2.8.0":
+"@sanity/icons@^2", "@sanity/icons@^2.0.0", "@sanity/icons@^2.3.1", "@sanity/icons@^2.4.0", "@sanity/icons@^2.4.1":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@sanity/icons/-/icons-2.6.0.tgz#48e0aa2bcc39c018911cdf7a3d66647b6f87675f"
+  integrity sha512-l4yBs2z2nEsgtasPuBQ5muowxJBXNfw0bqty2uG1tFsEyCYSPHGUROQSLLvIseYC3Onees+r5E9ijMadJQNc/Q==
+
+"@sanity/icons@^2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@sanity/icons/-/icons-2.7.0.tgz#f3099bf12045bfd777e96f4b3bad568e6da2f61f"
+  integrity sha512-vW/G8CB3+R1gww8C8ZjNchhpXrXSDLIJ0KnWy9iDlSWaFEnUrbi18yzCCrHRMFzXTPl2QtqZhjtE+A5Gyhf2QA==
+
+"@sanity/icons@^2.8.0":
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/@sanity/icons/-/icons-2.8.0.tgz#030d48c10347bf0c5b131d981574550059f11f29"
   integrity sha512-Q8aKg+KPJPDLDR+beYZhtB3gYdq7zIyZQZ6HjaB/63KuidHzkIFuhVv8JS/rJNwWOn5lTuzmd+L/+U/Pv3klWw==
@@ -3834,7 +3876,7 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@1.9.3", "@sanity/ui@^1", "@sanity/ui@^1.0.0", "@sanity/ui@^1.6.0", "@sanity/ui@^1.7.2", "@sanity/ui@^1.9.3":
+"@sanity/ui@1.9.3", "@sanity/ui@^1.9.3":
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-1.9.3.tgz#4af45902ac95801aa5ea57f377beaf3e3cb36339"
   integrity sha512-AdWEVFaK0Snk6xxP0lGPVP3QQYKwzkfGFpFZnL9d6UtWt8yeuS8BMLVAzmXzg14hrqH50ex9nvNl3eq6a0MWiw==
@@ -3846,6 +3888,30 @@
     framer-motion "^10.16.2"
     react-refractor "^2.1.7"
 
+"@sanity/ui@2.0.0-alpha.32":
+  version "2.0.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-alpha.32.tgz#d30fd605f9c89168d6625faaf925c4e580d53972"
+  integrity sha512-s7aTaCc78x7HC1nu7HrXElyU0sMXchHdd5a0vcl+up6q7Te26P8XLM5NOYURy2Ny9KLAvMBFeVLpbix5v+V09Q==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.4"
+    "@sanity/color" "3.0.0-beta.7"
+    "@sanity/icons" "^2.4.1"
+    csstype "^3.1.2"
+    framer-motion "^10.16.2"
+    react-refractor "^2.1.7"
+
+"@sanity/ui@^1", "@sanity/ui@^1.0.0", "@sanity/ui@^1.6.0", "@sanity/ui@^1.7.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-1.8.2.tgz#70f0c55e3bdd04b662d3cd84af168d4e27adfc2c"
+  integrity sha512-XWtVdIG1PWBEiNPcObRfXsX/EPhiPCHMmfdn+frPIVLTLnoQnNju3W9UQAWec+BwjXBCpPtfc36AoiQSDUkxzw==
+  dependencies:
+    "@floating-ui/react-dom" "2.0.0"
+    "@sanity/color" "^2.2.5"
+    "@sanity/icons" "^2.4.1"
+    csstype "^3.1.2"
+    framer-motion "^10.16.1"
+    react-refractor "^2.1.7"
+
 "@sanity/uuid@3.0.2", "@sanity/uuid@^3", "@sanity/uuid@^3.0.1", "@sanity/uuid@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@sanity/uuid/-/uuid-3.0.2.tgz#e022c37f1d94df3cd876a823e9a83c1d55c99e05"
@@ -8390,7 +8456,16 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-framer-motion@^10.0.0, framer-motion@^10.16.16, framer-motion@^10.16.2:
+framer-motion@^10.0.0, framer-motion@^10.16.1, framer-motion@^10.16.2:
+  version "10.16.4"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.4.tgz#30279ef5499b8d85db3a298ee25c83429933e9f8"
+  integrity sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+framer-motion@^10.16.16:
   version "10.16.16"
   resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.16.tgz#a10a03e1190a717109163cfff212a84c8ad11b0c"
   integrity sha512-je6j91rd7NmUX7L1XHouwJ4v3R+SO4umso2LUcgOct3rHZ0PajZ80ETYZTajzEXEl9DlKyzjyt4AvGQ+lrebOw==

From b9038e281f045b21ece530705d4f35babcd2c865 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 14:57:33 +0000
Subject: [PATCH 002/163] core(test-studio): remove custom branding and
 localised text

---
 dev/test-studio/components/Branding.tsx       | 12 ------------
 dev/test-studio/locales/index.ts              |  2 --
 dev/test-studio/sanity.config.ts              |  6 ------
 dev/test-studio/structure/resolveStructure.ts |  1 +
 4 files changed, 1 insertion(+), 20 deletions(-)
 delete mode 100644 dev/test-studio/components/Branding.tsx

diff --git a/dev/test-studio/components/Branding.tsx b/dev/test-studio/components/Branding.tsx
deleted file mode 100644
index 5180a5ba5e5..00000000000
--- a/dev/test-studio/components/Branding.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Box, Text} from '@sanity/ui'
-import React from 'react'
-import {useTranslation} from 'sanity'
-
-export function Branding() {
-  const {t} = useTranslation('testStudio')
-  return (
-    <Box padding={3}>
-      <Text weight="bold">{t('studio.logo.title')}&trade;</Text>
-    </Box>
-  )
-}
diff --git a/dev/test-studio/locales/index.ts b/dev/test-studio/locales/index.ts
index b3e0a2e3fa4..5d36073f428 100644
--- a/dev/test-studio/locales/index.ts
+++ b/dev/test-studio/locales/index.ts
@@ -3,7 +3,6 @@ import {defineLocaleResourceBundle} from 'sanity'
 export const testStudioLocaleNamespace = 'testStudio' as const
 
 const enUSStrings = {
-  'studio.logo.title': 'English logo',
   'structure.root.title': 'Content 🇺🇸',
   'translate.example':
     '<Icon/> Your search for "<Red>{{keyword}}</Red>" took <Bold>{{duration}}ms</Bold>',
@@ -20,7 +19,6 @@ const nbNO = defineLocaleResourceBundle({
   locale: 'nb-NO',
   namespace: testStudioLocaleNamespace,
   resources: {
-    'studio.logo.title': 'Norsk logo',
     'structure.root.title': 'Innhold 🇳🇴',
     'translate.example':
       '<Icon/> Ditt søk på "<Red>{{keyword}}</Red>" tok <Bold>{{duration}}</Bold> millisekunder',
diff --git a/dev/test-studio/sanity.config.ts b/dev/test-studio/sanity.config.ts
index 306f72a1c1c..8c1db07b483 100644
--- a/dev/test-studio/sanity.config.ts
+++ b/dev/test-studio/sanity.config.ts
@@ -13,7 +13,6 @@ import {ptPTLocale} from '@sanity/locale-pt-pt'
 import {svSELocale} from '@sanity/locale-sv-se'
 import {theme as tailwindTheme} from './sanity.theme.mjs'
 import {imageAssetSource} from './assetSources'
-import {Branding} from './components/Branding'
 import {resolveDocumentActions as documentActions} from './documentActions'
 import {resolveInitialValueTemplates} from './initialValueTemplates'
 import {languageFilter} from './plugins/language-filter'
@@ -63,11 +62,6 @@ const sharedSettings = definePlugin({
       assetSources: [imageAssetSource],
     },
   },
-  studio: {
-    components: {
-      logo: Branding,
-    },
-  },
 
   i18n: {
     bundles: testStudioLocaleBundles,
diff --git a/dev/test-studio/structure/resolveStructure.ts b/dev/test-studio/structure/resolveStructure.ts
index 4c68ff08443..432da5fd56e 100644
--- a/dev/test-studio/structure/resolveStructure.ts
+++ b/dev/test-studio/structure/resolveStructure.ts
@@ -33,6 +33,7 @@ import {delayValue} from './_helpers'
 import {typesInOptionGroup} from './groupByOption'
 
 export const structure: StructureResolver = (S, {schema, documentStore, i18n}) => {
+  i18n.loadNamespaces(['testStudio']) // @todo: confirm – is this idiomatic usage?
   const {t} = i18n
   return S.list()
     .title(t('testStudio:structure.root.title' as const) || 'Content')

From 1f09c1c1291bc60093e85eb55b7b21cd49e1ca69 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 15:04:41 +0000
Subject: [PATCH 003/163] fix: add localized text for shared dialog component

---
 packages/sanity/src/core/i18n/bundles/studio.ts | 7 +++++++
 packages/sanity/src/ui/dialog/Dialog.tsx        | 7 +++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index 5c87c3db489..4abcdb753ec 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -317,6 +317,13 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'default-orderings.name': 'Sort by Name',
   /** Title for the default ordering/SortOrder if no orderings are provided and the title field is found */
   'default-orderings.title': 'Sort by Title',
+  /** --- Default dialogs --- */
+
+  /** Default text for dialog cancel button */
+  'dialog.cancel-button.text': 'Cancel',
+
+  /** Defualt text for dialog confirm button */
+  'dialog.confirm-button.text': 'Confirm',
 
   /** The value of the <code>_key</code> property must be a unique string. */
   'form.error.duplicate-keys-alert.details.additional-description':
diff --git a/packages/sanity/src/ui/dialog/Dialog.tsx b/packages/sanity/src/ui/dialog/Dialog.tsx
index dc2833281cd..188f52a6da4 100644
--- a/packages/sanity/src/ui/dialog/Dialog.tsx
+++ b/packages/sanity/src/ui/dialog/Dialog.tsx
@@ -8,6 +8,7 @@ import {
   BoxHeight,
 } from '@sanity/ui'
 import React, {ComponentProps, forwardRef} from 'react'
+import {useTranslation} from 'react-i18next'
 
 /** @internal */
 export interface DialogProps
@@ -55,6 +56,8 @@ export const Dialog = forwardRef(function Dialog(
   {bodyHeight, children, footer, padding = true, ...props}: DialogProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
+  const {t} = useTranslation()
+
   return (
     <UIDialog
       {...props}
@@ -67,7 +70,7 @@ export const Dialog = forwardRef(function Dialog(
               <Button
                 mode="bleed"
                 padding={2}
-                text="Cancel"
+                text={t('dialog.cancel-button.text')}
                 tone="default"
                 onClick={props.onClose}
                 {...footer.cancelButton}
@@ -77,7 +80,7 @@ export const Dialog = forwardRef(function Dialog(
               <Button
                 mode="default"
                 padding={2}
-                text="Confirm"
+                text={t('dialog.confirm-button.text')}
                 tone="critical"
                 {...footer.confirmButton}
               />

From 8c6c144d89a19f605e1dddeaf520b30800fc8c2f Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 15:21:15 +0000
Subject: [PATCH 004/163] fix: localize pane header back button tooltip

---
 packages/sanity/src/desk/i18n/resources.ts                    | 2 ++
 .../document/documentPanel/header/DocumentPanelHeader.tsx     | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/sanity/src/desk/i18n/resources.ts b/packages/sanity/src/desk/i18n/resources.ts
index 458fd52773a..625444283cd 100644
--- a/packages/sanity/src/desk/i18n/resources.ts
+++ b/packages/sanity/src/desk/i18n/resources.ts
@@ -278,6 +278,8 @@ const structureLocaleStrings = defineLocalesResources('structure', {
   /** The title of the no document type screen */
   'no-document-types-screen.title': 'No document types',
 
+  /** Text shown on back button visible on smaller breakpoints */
+  'pane-header.back-button.text': 'Back',
   /** tooltip text (via `title` attribute) for the menu button */
   'pane-header.context-menu-button.tooltip': 'Show menu',
   /** Appears in a document list pane header if there are more than one option for create. This is the label for that menu */
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
index 805ccc0b1e5..d1427d0d0c7 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
@@ -16,6 +16,7 @@ import {structureLocaleNamespace} from '../../../../i18n'
 import {PaneMenuItem} from '../../../../types'
 import {Button} from '../../../../../ui'
 import {TOOLTIP_DELAY_PROPS} from '../../../../../ui/tooltip/constants'
+import {structureLocaleNamespace} from '../../../../i18n'
 import {DocumentHeaderTabs} from './DocumentHeaderTabs'
 import {DocumentHeaderTitle} from './DocumentHeaderTitle'
 import {useFieldActions, useTimelineSelector, useTranslation} from 'sanity'
@@ -101,8 +102,7 @@ export const DocumentPanelHeader = memo(
                 data-as="a"
                 icon={ArrowLeftIcon}
                 mode="bleed"
-                // @todo: localize
-                tooltipProps={{content: 'Back'}}
+                tooltipProps={{content: t('pane-header.back-button.text')}}
               />
             )
           }

From 7cd0a56a683e1482a6d5b7283064cbb4d2d3f96a Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 15:25:16 +0000
Subject: [PATCH 005/163] refactor: render plain text buttons in invalid and
 untyped value inputs

---
 .../InvalidValueInput/InvalidValueInput.tsx      | 16 +++-------------
 .../InvalidValueInput/UntypedValueInput.tsx      | 14 +++-----------
 packages/sanity/src/core/i18n/bundles/studio.ts  |  8 ++++----
 3 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx b/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx
index fe53f1e4957..04218ea280e 100644
--- a/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx
+++ b/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx
@@ -1,5 +1,7 @@
 import {Card, Code, Stack, Text} from '@sanity/ui'
 import React, {forwardRef, useCallback, useImperativeHandle, useMemo} from 'react'
+import {isPlainObject} from 'lodash'
+import {useTranslation, Translate} from '../../../i18n'
 import {PatchEvent, set, unset} from '../../patch'
 import {Alert} from '../../components/Alert'
 import {Details} from '../../components/Details'
@@ -7,8 +9,6 @@ import {isDev} from '../../../environment'
 import {Button} from '../../../../ui'
 import {converters as CONVERTERS, ValueConverter} from './converters'
 import {UntypedValueInput} from './UntypedValueInput'
-import {isPlainObject} from 'lodash'
-import {useTranslation, Translate} from '../../../i18n'
 
 interface Converter extends ValueConverter {
   from: string
@@ -184,17 +184,7 @@ function ConvertButton({
   return (
     <Button
       onClick={handleClick}
-      text={
-        <>
-          <Translate
-            t={t}
-            i18nKey="inputs.invalid-value.convert-button.text"
-            values={{
-              targetType: converter.to,
-            }}
-          />
-        </>
-      }
+      text={t('inputs.invalid-value.convert-button.text', {targetType: converter.to})}
     />
   )
 }
diff --git a/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx b/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx
index 1c9ec513296..001b524c3e7 100644
--- a/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx
+++ b/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx
@@ -35,17 +35,9 @@ function SetMissingTypeButton({
   return (
     <Button
       onClick={handleClick}
-      text={
-        <>
-          <Translate
-            t={t}
-            i18nKey="inputs.untyped-value.convert-button.text"
-            values={{
-              targetType: targetType,
-            }}
-          />
-        </>
-      }
+      text={t('inputs.untyped-value.convert-button.text', {
+        targetType: targetType,
+      })}
     />
   )
 }
diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index 4abcdb753ec..7f171d129fc 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -590,8 +590,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.imagetool.loading': 'Loading image…',
   /** Hotspot & Crop */
   'inputs.imagetool.title': 'Hotspot & Crop',
-  /** Convert to <code>`{{targetType}}`</code> */
-  'inputs.invalid-value.convert-button.text': 'Convert to <code>{{targetType}}</code>',
+  /** Convert to `{{targetType}}` */
+  'inputs.invalid-value.convert-button.text': 'Convert to {{targetType}}',
   /** The current value (<code>`{{actualType}}`</code>) */
   'inputs.invalid-value.current-type': 'The current value (<code>{{actualType}}</code>)',
   /** The property value is stored as a value type that does not match the expected type. */
@@ -932,8 +932,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.tags.placeholder': 'Enter tag and press ENTER…',
   /** Placeholder for an empty tag input on touch devices */
   'inputs.tags.placeholder_touch': 'Enter tag…',
-  /** Convert to <code>`{{targetType}}`</code> */
-  'inputs.untyped-value.convert-button.text': 'Convert to <code>{{targetType}}</code>',
+  /** Convert to `{{targetType}}` */
+  'inputs.untyped-value.convert-button.text': 'Convert to {{targetType}}',
   /** Encountered an object value without a <code>_type</code> property. */
   'inputs.untyped-value.description':
     'Encountered an object value without a <code>_type</code> property.',

From 38d1c3743505f1f6e940a0c2ba3065ce9dacdcf8 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 17:39:42 +0000
Subject: [PATCH 006/163] feat: add common localized context menu button
 component

---
 .../components/collapseMenu/CollapseMenu.tsx  | 14 +++-----
 .../__workshop__/CollapseMenuStory.tsx        | 12 ++-----
 .../collapseTabList/CollapseTabList.tsx       |  8 ++---
 .../__workshop__/PortableTextPreviewStory.tsx |  8 ++---
 .../CrossDatasetReferenceInput.tsx            | 18 +++-------
 .../PortableText/toolbar/ActionMenu.tsx       | 12 ++-----
 .../PortableText/toolbar/InsertMenu.tsx       | 10 ++----
 .../inputs/ReferenceInput/ReferenceField.tsx  | 18 +++-------
 .../inputs/ReferenceInput/ReferenceItem.tsx   | 12 ++-----
 .../ArrayOfObjectsInput/Grid/ErrorItem.tsx    | 13 +++----
 .../ArrayOfObjectsInput/Grid/GridItem.tsx     | 13 +++----
 .../ArrayOfObjectsInput/List/ErrorItem.tsx    | 13 +++----
 .../ArrayOfObjectsInput/List/PreviewItem.tsx  | 13 +++----
 .../arrays/ArrayOfPrimitivesInput/ItemRow.tsx |  9 +++--
 .../files/FileInput/FileActionsMenu.tsx       |  9 ++---
 .../files/ImageInput/ImageActionsMenu.tsx     |  8 ++---
 .../studio/assetSource/shared/AssetMenu.tsx   | 14 ++++----
 .../sanity/src/core/i18n/bundles/studio.ts    |  5 +++
 .../list/CommentsListItemContextMenu.tsx      |  6 ++--
 .../components/pane/PaneContextMenuButton.tsx | 15 ++------
 .../pane/__workshop__/ExampleStory.tsx        | 10 ++----
 .../DocumentPane/DocumentActions.tsx          |  7 ++--
 .../SplitPanesStory/ListPane/ListPane.tsx     | 11 ++----
 .../contextMenuButton/ContextMenuButton.tsx   | 35 +++++++++++++++++++
 .../sanity/src/ui/contextMenuButton/index.ts  |  1 +
 25 files changed, 114 insertions(+), 180 deletions(-)
 create mode 100644 packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
 create mode 100644 packages/sanity/src/ui/contextMenuButton/index.ts

diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
index 5ac05756744..ac3b9e01b7b 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
@@ -1,4 +1,3 @@
-import {EllipsisHorizontalIcon} from '@sanity/icons'
 import {Flex, MenuButtonProps} from '@sanity/ui'
 import React, {
   Children,
@@ -15,7 +14,8 @@ import React, {
 } from 'react'
 import styled, {css} from 'styled-components'
 import {difference} from 'lodash'
-import {Button, Tooltip} from '../../../ui'
+import {Tooltip} from '../../../ui'
+import {ContextMenuButton} from '../../../ui/contextMenuButton'
 import {CollapseOverflowMenu} from './CollapseOverflowMenu'
 import {ObserveElement} from './ObserveElement'
 import {CollapseMenuDivider} from './CollapseMenuDivider'
@@ -94,10 +94,7 @@ export const CollapseMenu = forwardRef(function CollapseMenu(
 
   const menuOptions = useMemo(() => Children.toArray(children).filter(_isReactElement), [children])
   const menuButton = useMemo(
-    () =>
-      menuButtonProps?.button || (
-        <Button icon={EllipsisHorizontalIcon} mode="bleed" tooltipProps={{content: 'Show more'}} />
-      ),
+    () => menuButtonProps?.button || <ContextMenuButton />,
     [menuButtonProps],
   )
 
@@ -266,10 +263,7 @@ export const AutoCollapseMenu = forwardRef(function AutoCollapseMenu(
     : menuOptions
 
   const menuButton = useMemo(
-    () =>
-      menuButtonProps?.button || (
-        <Button icon={EllipsisHorizontalIcon} mode="bleed" tooltipProps={{content: 'Show more'}} />
-      ),
+    () => menuButtonProps?.button || <ContextMenuButton />,
     [menuButtonProps],
   )
 
diff --git a/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx b/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx
index bf5cf838006..08f834f6190 100644
--- a/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx
@@ -1,8 +1,8 @@
-import {EllipsisHorizontalIcon, IceCreamIcon} from '@sanity/icons'
+import {IceCreamIcon} from '@sanity/icons'
 import {Card, Flex} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import React from 'react'
-import {Button} from '../../../../ui'
+import {ContextMenuButton} from '../../../../ui/contextMenuButton'
 import {CollapseMenu, CollapseMenuButton} from '../'
 
 const GAP_OPTIONS = {'0': 0, '1': 1, '2': 2, '3': 3, '4': 4}
@@ -20,13 +20,7 @@ export default function CollapseMenuStory() {
           collapsed={collapsed}
           collapseText={collapseText}
           menuButtonProps={{
-            button: (
-              <Button
-                icon={EllipsisHorizontalIcon}
-                mode="bleed"
-                tooltipProps={{content: 'Show more'}}
-              />
-            ),
+            button: <ContextMenuButton />,
           }}
         >
           {[...Array(5).keys()].map((num) => (
diff --git a/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx b/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
index fb477763a6f..45dafec043e 100644
--- a/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
+++ b/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
@@ -1,8 +1,7 @@
 import React, {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
 import {Flex, MenuButtonProps} from '@sanity/ui'
-import {EllipsisHorizontalIcon} from '@sanity/icons'
 import styled from 'styled-components'
-import {Button} from '../../../ui'
+import {ContextMenuButton} from '../../../ui/contextMenuButton'
 import {CollapseOverflowMenu} from '../collapseMenu/CollapseOverflowMenu'
 import {ObserveElement} from '../collapseMenu/ObserveElement'
 
@@ -81,10 +80,7 @@ export const CollapseTabList = forwardRef(function CollapseTabList(
   )
 
   const menuButton = useMemo(
-    () =>
-      menuButtonProps?.button || (
-        <Button icon={EllipsisHorizontalIcon} mode="bleed" tooltipProps={{content: 'Show more'}} />
-      ),
+    () => menuButtonProps?.button || <ContextMenuButton />,
     [menuButtonProps],
   )
 
diff --git a/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx b/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx
index 1b75665383f..d4189770e1d 100644
--- a/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx
+++ b/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx
@@ -1,10 +1,10 @@
-import {DocumentIcon, EditIcon, EllipsisHorizontalIcon} from '@sanity/icons'
+import {DocumentIcon, EditIcon} from '@sanity/icons'
 import {Card, Container, Flex, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useString} from '@sanity/ui-workshop'
 import React, {ComponentType, createElement, useMemo} from 'react'
+import {ContextMenuButton} from '../../../../ui/contextMenuButton'
 import {PortableTextPreviewLayoutKey, PreviewProps} from '../types'
 import {InlinePreview} from '../portableText/InlinePreview'
-import {Button} from '../../../../ui'
 import {BlockPreview} from '../portableText/BlockPreview'
 import {BlockImagePreview} from '../portableText/BlockImagePreview'
 import {PREVIEW_SIZES} from '../constants'
@@ -72,9 +72,7 @@ export default function PortableTextPreviewStory() {
 
   const previewProps: Omit<PreviewProps, 'renderDefault'> = useMemo(
     () => ({
-      actions: withActions && (
-        <Button icon={EllipsisHorizontalIcon} mode="bleed" tooltipProps={{content: 'Show more'}} />
-      ),
+      actions: withActions && <ContextMenuButton />,
       isPlaceholder,
       media,
       status: status && (
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
index 78b80476751..4a3c9da6541 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
@@ -1,11 +1,7 @@
 /* eslint-disable complexity, max-nested-callbacks, no-nested-ternary */
 import React, {useCallback, useMemo, useRef, useState, useId} from 'react'
 import type {CrossDatasetReferenceValue, CrossDatasetReferenceSchemaType} from '@sanity/types'
-import {
-  EllipsisHorizontalIcon,
-  ResetIcon as ClearIcon,
-  SyncIcon as ReplaceIcon,
-} from '@sanity/icons'
+import {ResetIcon as ClearIcon, SyncIcon as ReplaceIcon} from '@sanity/icons'
 import {concat, of, type Observable} from 'rxjs'
 import {catchError, distinctUntilChanged, filter, map, scan, switchMap, tap} from 'rxjs/operators'
 import {Box, Card, Flex, Inline, Menu, MenuButton, Stack, useToast} from '@sanity/ui'
@@ -16,7 +12,8 @@ import {set, unset} from '../../patch'
 import {useOnClickOutside} from '../../hooks/useOnClickOutside'
 import {getPublishedId, isNonNullable} from '../../../util'
 import {FIXME} from '../../../FIXME'
-import {Button, MenuItem} from '../../../../ui'
+import {MenuItem} from '../../../../ui'
+import {ContextMenuButton} from '../../../../ui/contextMenuButton'
 import {ChangeIndicator} from '../../../changeIndicators'
 import {PreviewCard} from '../../../components'
 import {useDidUpdate} from '../../hooks/useDidUpdate'
@@ -376,14 +373,7 @@ export function CrossDatasetReferenceInput(props: CrossDatasetReferenceInputProp
 
                   <Inline paddingX={1}>
                     <MenuButton
-                      button={
-                        <Button
-                          mode="bleed"
-                          icon={EllipsisHorizontalIcon}
-                          data-testid="menu-button"
-                          tooltipProps={{content: 'Show more'}}
-                        />
-                      }
+                      button={<ContextMenuButton data-testid="menu-button" />}
                       id={`${inputId}-menuButton`}
                       menu={
                         <Menu>
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
index 7cfef2b5ee9..2761435d16e 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
@@ -7,9 +7,8 @@ import {
   usePortableTextEditorSelection,
 } from '@sanity/portable-text-editor'
 import {isKeySegment} from '@sanity/types'
-import {EllipsisHorizontalIcon} from '@sanity/icons'
 import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
-import {Button} from '../../../../../ui'
+import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 import {PTEToolbarAction, PTEToolbarActionGroup} from './types'
 import {useActiveActionKeys, useFocusBlock} from './hooks'
 import {getActionIcon} from './helpers'
@@ -122,14 +121,7 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
 
   const menuButtonProps = useMemo(
     () => ({
-      button: (
-        <Button
-          icon={EllipsisHorizontalIcon}
-          mode="bleed"
-          disabled={disabled}
-          tooltipProps={{content: 'Show more', placement: tooltipPlacement}}
-        />
-      ),
+      button: <ContextMenuButton disabled={disabled} tooltipPlacement={tooltipPlacement} />,
       popover: MENU_POPOVER_PROPS,
     }),
     [disabled, tooltipPlacement],
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
index 2e0a63d39a4..a97f804dbe6 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
@@ -8,6 +8,7 @@ import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseM
 import {Button} from '../../../../../ui'
 import {BlockItem} from './types'
 import {useFocusBlock} from './hooks'
+import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 
 const CollapseMenuMemo = memo(CollapseMenu)
 
@@ -71,14 +72,7 @@ export const InsertMenu = memo(function InsertMenu(props: InsertMenuProps) {
 
   const menuButtonProps = useMemo(
     () => ({
-      button: (
-        <Button
-          icon={AddIcon}
-          mode="bleed"
-          disabled={disabled}
-          tooltipProps={{content: 'Show more', placement: tooltipPlacement}}
-        />
-      ),
+      button: <ContextMenuButton disabled={disabled} tooltipPlacement={tooltipPlacement} />,
       popover: MENU_POPOVER_PROPS,
     }),
     [disabled, tooltipPlacement],
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
index 0d976ad658c..bc880ac321a 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
@@ -19,12 +19,7 @@ import {
   Stack,
   TooltipDelayGroupProvider,
 } from '@sanity/ui'
-import {
-  EllipsisHorizontalIcon,
-  LaunchIcon as OpenInNewTabIcon,
-  SyncIcon as ReplaceIcon,
-  TrashIcon,
-} from '@sanity/icons'
+import {LaunchIcon as OpenInNewTabIcon, SyncIcon as ReplaceIcon, TrashIcon} from '@sanity/icons'
 import type {ObjectFieldProps, RenderPreviewCallback} from '../../types'
 import {FormField} from '../../components'
 import {useScrollIntoViewOnFocusWithin} from '../../hooks/useScrollIntoViewOnFocusWithin'
@@ -34,7 +29,8 @@ import {FieldActionsProvider, FieldActionsResolver} from '../../field'
 import {DocumentFieldActionNode} from '../../../config'
 import {usePublishedId} from '../../contexts/DocumentIdProvider'
 import {useTranslation} from '../../../i18n'
-import {Button, MenuItem} from '../../../../ui'
+import {MenuItem} from '../../../../ui'
+import {ContextMenuButton} from '../../../../ui/contextMenuButton'
 import {TOOLTIP_DELAY_PROPS} from '../../../../ui/tooltip/constants'
 import {useReferenceInput} from './useReferenceInput'
 import {useReferenceInfo} from './useReferenceInfo'
@@ -198,13 +194,7 @@ export function ReferenceField(props: ReferenceFieldProps) {
       readOnly ? null : (
         <Box marginLeft={1}>
           <MenuButton
-            button={
-              <Button
-                mode="bleed"
-                icon={EllipsisHorizontalIcon}
-                tooltipProps={{content: 'Show more'}}
-              />
-            }
+            button={<ContextMenuButton />}
             id={`${inputId}-menuButton`}
             menu={
               <Menu>
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
index 52cefc1b898..b2ace53270d 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
@@ -3,7 +3,6 @@ import React, {ComponentProps, ForwardedRef, forwardRef, useCallback, useMemo, u
 import {
   CloseIcon,
   CopyIcon as DuplicateIcon,
-  EllipsisHorizontalIcon,
   LaunchIcon as OpenInNewTabIcon,
   SyncIcon as ReplaceIcon,
   TrashIcon,
@@ -16,7 +15,8 @@ import {useDidUpdate} from '../../hooks/useDidUpdate'
 import {randomKey} from '../../utils/randomKey'
 import {FormFieldSet, FormFieldValidationStatus} from '../../components/formField'
 import {FieldPresence} from '../../../presence'
-import {Button, MenuItem} from '../../../../ui'
+import {MenuItem} from '../../../../ui'
+import {ContextMenuButton} from '../../../../ui/contextMenuButton'
 import {useTranslation} from '../../../i18n'
 import {ChangeIndicator} from '../../../changeIndicators'
 import {RowLayout} from '../arrays/layouts/RowLayout'
@@ -183,13 +183,7 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
       readOnly ? null : (
         <Box marginLeft={1}>
           <MenuButton
-            button={
-              <Button
-                mode="bleed"
-                icon={EllipsisHorizontalIcon}
-                tooltipProps={{content: 'Show more'}}
-              />
-            }
+            button={<ContextMenuButton />}
             id={`${inputId}-menuButton`}
             menu={
               <Menu ref={menuRef}>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
index 0361be2c362..3b42e694a82 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
@@ -1,11 +1,12 @@
 import React, {useCallback, useId} from 'react'
-import {EllipsisHorizontalIcon, TrashIcon} from '@sanity/icons'
+import {TrashIcon} from '@sanity/icons'
 import {Menu, MenuButton} from '@sanity/ui'
+import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
 import {ArrayItemError} from '../../../../store'
 import {useFormCallbacks} from '../../../../studio/contexts/FormCallbacks'
 import {PatchEvent, unset} from '../../../../patch'
 import {CellLayout} from '../../layouts/CellLayout'
-import {MenuItem, Button} from '../../../../../../ui'
+import {MenuItem} from '../../../../../../ui'
 import {useTranslation} from '../../../../../i18n'
 import {IncompatibleItemType} from './IncompatibleItemType'
 
@@ -28,13 +29,7 @@ export function ErrorItem(props: {member: ArrayItemError; sortable?: boolean}) {
       style={{height: '100%'}}
       menu={
         <MenuButton
-          button={
-            <Button
-              mode="bleed"
-              icon={EllipsisHorizontalIcon}
-              tooltipProps={{content: 'Show more'}}
-            />
-          }
+          button={<ContextMenuButton />}
           id={`${id}-menuButton`}
           menu={
             <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
index ea2d0a5a07d..82366263be5 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
@@ -1,10 +1,11 @@
 import {Box, Card, CardTone, Menu, MenuButton} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import {SchemaType} from '@sanity/types'
-import {CopyIcon as DuplicateIcon, EllipsisHorizontalIcon, TrashIcon} from '@sanity/icons'
+import {CopyIcon as DuplicateIcon, TrashIcon} from '@sanity/icons'
 import styled from 'styled-components'
 import {getSchemaTypeTitle} from '../../../../../schema'
-import {Button, MenuItem} from '../../../../../../ui'
+import {MenuItem} from '../../../../../../ui'
+import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
 import {ObjectItem, ObjectItemProps} from '../../../../types'
 import {useScrollIntoViewOnFocusWithin} from '../../../../hooks/useScrollIntoViewOnFocusWithin'
 import {useDidUpdate} from '../../../../hooks/useDidUpdate'
@@ -137,13 +138,7 @@ export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemPr
     () =>
       readOnly ? null : (
         <MenuButton
-          button={
-            <Button
-              mode="bleed"
-              icon={EllipsisHorizontalIcon}
-              tooltipProps={{content: 'Show more'}}
-            />
-          }
+          button={<ContextMenuButton />}
           id={`${props.inputId}-menuButton`}
           menu={
             <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
index ec308e7478c..962f8aff857 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
@@ -1,9 +1,10 @@
 import React, {useId} from 'react'
-import {EllipsisHorizontalIcon, TrashIcon} from '@sanity/icons'
+import {TrashIcon} from '@sanity/icons'
 import {Box, Menu, MenuButton} from '@sanity/ui'
 import {ArrayItemError} from '../../../../store'
 import {RowLayout} from '../../layouts/RowLayout'
-import {Button, MenuItem} from '../../../../../../ui'
+import {MenuItem} from '../../../../../../ui'
+import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
 import {useTranslation} from '../../../../../i18n'
 import {IncompatibleItemType} from './IncompatibleItemType'
 
@@ -26,13 +27,7 @@ export function ErrorItem(props: {
         tone="caution"
         menu={
           <MenuButton
-            button={
-              <Button
-                mode="bleed"
-                icon={EllipsisHorizontalIcon}
-                tooltipProps={{content: 'Show more'}}
-              />
-            }
+            button={<ContextMenuButton />}
             id={`${id}-menuButton`}
             menu={
               <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
index b03503f8a9a..c486253910c 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
@@ -1,8 +1,9 @@
 import {Box, Card, CardTone, Menu, MenuButton} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import {SchemaType} from '@sanity/types'
-import {CopyIcon as DuplicateIcon, EllipsisHorizontalIcon, TrashIcon} from '@sanity/icons'
-import {Button, MenuItem} from '../../../../../../ui'
+import {CopyIcon as DuplicateIcon, TrashIcon} from '@sanity/icons'
+import {MenuItem} from '../../../../../../ui'
+import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
 import {getSchemaTypeTitle} from '../../../../../schema'
 import {ObjectItem, ObjectItemProps} from '../../../../types'
 import {useScrollIntoViewOnFocusWithin} from '../../../../hooks/useScrollIntoViewOnFocusWithin'
@@ -120,13 +121,7 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
     () =>
       readOnly ? null : (
         <MenuButton
-          button={
-            <Button
-              mode="bleed"
-              icon={EllipsisHorizontalIcon}
-              tooltipProps={{content: 'Show more'}}
-            />
-          }
+          button={<ContextMenuButton />}
           id={`${props.inputId}-menuButton`}
           menu={
             <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
index c06eabc586d..a19af569f02 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
@@ -1,14 +1,15 @@
 import React, {useCallback, useMemo} from 'react'
 import {Box, Flex, Menu, MenuButton} from '@sanity/ui'
 import {SchemaType} from '@sanity/types'
-import {CopyIcon as DuplicateIcon, EllipsisHorizontalIcon, TrashIcon} from '@sanity/icons'
+import {CopyIcon as DuplicateIcon, TrashIcon} from '@sanity/icons'
 import {FormFieldValidationStatus} from '../../../components/formField'
 import {InsertMenu} from '../ArrayOfObjectsInput/InsertMenu'
 import {useTranslation} from '../../../../i18n'
 import {PrimitiveItemProps} from '../../../types/itemProps'
 import {RowLayout} from '../layouts/RowLayout'
 import {FieldPresence} from '../../../../presence'
-import {Button, MenuItem} from '../../../../../ui'
+import {MenuItem} from '../../../../../ui'
+import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 import {getEmptyValue} from './getEmptyValue'
 
 export type DefaultItemProps = Omit<PrimitiveItemProps, 'renderDefault'> & {
@@ -65,9 +66,7 @@ export const ItemRow = React.forwardRef(function ItemRow(
 
   const menu = (
     <MenuButton
-      button={
-        <Button mode="bleed" icon={EllipsisHorizontalIcon} tooltipProps={{content: 'Show more'}} />
-      }
+      button={<ContextMenuButton />}
       id={`${inputId}-menuButton`}
       popover={MENU_BUTTON_POPOVER_PROPS}
       menu={
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
index c140543a735..7f8de775014 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
@@ -1,4 +1,4 @@
-import {BinaryDocumentIcon, EllipsisHorizontalIcon} from '@sanity/icons'
+import {BinaryDocumentIcon} from '@sanity/icons'
 import React, {ReactNode, useCallback, useEffect, useState} from 'react'
 import {
   Box,
@@ -11,9 +11,9 @@ import {
   useClickOutside,
   useGlobalKeyDown,
 } from '@sanity/ui'
-import {Button} from '../../../../../ui'
 import {formatBytes} from '../../common/helper'
 import {useTranslation} from '../../../../i18n'
+import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 
 type Props = {
   children: ReactNode
@@ -135,14 +135,11 @@ export function FileActionsMenu(props: Props) {
             open={isMenuOpen}
             constrainSize
           >
-            <Button
+            <ContextMenuButton
               aria-label={t('inputs.file.actions-menu.file-options.aria-label')}
               data-testid="options-menu-button"
-              icon={EllipsisHorizontalIcon}
-              mode="bleed"
               onClick={handleClick}
               ref={setOptionsButtonRef}
-              tooltipProps={{content: 'Show more'}}
             />
           </Popover>
         </Flex>
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
index 6704b932a9a..178114ca729 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
@@ -1,5 +1,5 @@
 import React, {MouseEventHandler, ReactNode, useCallback, useEffect, useState} from 'react'
-import {EllipsisHorizontalIcon, CropIcon} from '@sanity/icons'
+import {CropIcon} from '@sanity/icons'
 import {
   Inline,
   Menu,
@@ -12,6 +12,7 @@ import styled from 'styled-components'
 import {Button} from '../../../../../ui'
 import {TOOLTIP_DELAY_PROPS} from '../../../../../ui/tooltip/constants'
 import {useTranslation} from '../../../../i18n'
+import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 
 export const MenuActionsWrapper = styled(Inline)`
   position: absolute;
@@ -113,15 +114,12 @@ export function ImageActionsMenu(props: ImageActionsMenuProps) {
           open={isMenuOpen}
           constrainSize
         >
-          <Button
+          <ContextMenuButton
             aria-label={t('inputs.image.actions-menu.options.aria-label')}
             data-testid="options-menu-button"
-            icon={EllipsisHorizontalIcon}
             mode="ghost"
             onClick={handleClick}
             ref={setOptionsButtonRef}
-            // TODO: localize
-            tooltipProps={{content: 'Show more'}}
           />
         </Popover>
       </MenuActionsWrapper>
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx
index 1dae799fc2f..89ea1ff6466 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx
@@ -1,8 +1,10 @@
-import {EllipsisVerticalIcon, LinkIcon, TrashIcon} from '@sanity/icons'
-import {Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
-import {AssetMenuAction} from '../types'
-import {useTranslation} from '../../../../i18n'
+import {LinkIcon, TrashIcon} from '@sanity/icons'
+import {Menu, MenuButton} from '@sanity/ui'
 import React from 'react'
+import {MenuItem} from '../../../../../ui'
+import {useTranslation} from '../../../../i18n'
+import {AssetMenuAction} from '../types'
+import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 
 const MENU_POPOVER_PROPS = {portal: true, placement: 'right'} as const
 
@@ -22,10 +24,8 @@ export function AssetMenu({
   return (
     <MenuButton
       button={
-        <Button
-          padding={2}
+        <ContextMenuButton
           mode={border ? 'ghost' : triggerButtonMode}
-          icon={EllipsisVerticalIcon}
           tone={border ? 'default' : triggerButtonTone}
         />
       }
diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index 7f171d129fc..baf2099ca0a 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -317,6 +317,11 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'default-orderings.name': 'Sort by Name',
   /** Title for the default ordering/SortOrder if no orderings are provided and the title field is found */
   'default-orderings.title': 'Sort by Title',
+  /** --- Common components --- */
+
+  /** Tooltip text for context menu buttons */
+  'common.context-menu-button.tooltip': 'Show more',
+
   /** --- Default dialogs --- */
 
   /** Default text for dialog cancel button */
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
index 3d4171acf18..92ba06a45a8 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
@@ -20,6 +20,7 @@ import styled, {css} from 'styled-components'
 import {Button, MenuItem} from '../../../../../ui'
 import {CommentStatus} from '../../types'
 import {TOOLTIP_DELAY_PROPS} from '../../../../../ui/tooltip/constants'
+import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
   placement: 'bottom-end',
@@ -87,13 +88,10 @@ export function CommentsListItemContextMenu(props: CommentsListItemContextMenuPr
           <MenuButton
             id="comment-actions-menu"
             button={
-              <Button
+              <ContextMenuButton
                 aria-label="Open comment actions menu"
                 disabled={readOnly}
                 hidden={!showMenuButton}
-                icon={EllipsisHorizontalIcon}
-                mode="bleed"
-                tooltipProps={{content: 'Show more'}}
               />
             }
             onOpen={onMenuOpen}
diff --git a/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx b/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
index b64f7a56483..5f78ea22327 100644
--- a/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
@@ -1,10 +1,8 @@
-import {EllipsisHorizontalIcon} from '@sanity/icons'
 import {Menu, MenuButton, PopoverProps} from '@sanity/ui'
 import React, {useId} from 'react'
-import {structureLocaleNamespace} from '../../i18n'
+import {ContextMenuButton} from '../../../ui/contextMenuButton'
 import {_PaneMenuItem, _PaneMenuNode} from './types'
 import {PaneMenuButtonItem} from './PaneMenuButtonItem'
-import {StatusButton, useTranslation} from 'sanity'
 
 interface PaneContextMenuButtonProps {
   nodes: _PaneMenuNode[]
@@ -33,7 +31,6 @@ function nodesHasTone(nodes: _PaneMenuNode[], tone: NonNullable<_PaneMenuItem['t
 export function PaneContextMenuButton(props: PaneContextMenuButtonProps) {
   const {nodes} = props
   const id = useId()
-  const {t} = useTranslation(structureLocaleNamespace)
 
   const hasCritical = nodesHasTone(nodes, 'critical')
   const hasCaution = nodesHasTone(nodes, 'caution')
@@ -41,17 +38,9 @@ export function PaneContextMenuButton(props: PaneContextMenuButtonProps) {
   return (
     <MenuButton
       button={
-        <StatusButton
-          icon={EllipsisHorizontalIcon}
-          mode="bleed"
+        <ContextMenuButton
           // eslint-disable-next-line no-nested-ternary
           tone={hasCritical ? 'critical' : hasCaution ? 'caution' : undefined}
-          tooltipProps={{
-            // @todo: replace with localized text
-            content: 'Show more',
-            placement: 'bottom',
-            portal: true,
-          }}
         />
       }
       id={id}
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx b/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx
index 686222f1b12..1443ca98c65 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx
@@ -1,8 +1,9 @@
-import {ChevronDownIcon, EllipsisHorizontalIcon} from '@sanity/icons'
+import {ChevronDownIcon} from '@sanity/icons'
 import {Container, Stack, TabList, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import React, {useMemo} from 'react'
 import {Button, Tab} from '../../../../ui'
+import {ContextMenuButton} from '../../../../ui/contextMenuButton'
 import {Pane} from '../Pane'
 import {PaneContent} from '../PaneContent'
 import {PaneFooter} from '../PaneFooter'
@@ -22,12 +23,7 @@ export default function ExampleStory() {
   const manyTabs = useBoolean('Many tabs', false, 'Props')
   const tone = useSelect('Tone', PANE_TONE_OPTIONS, 'default', 'Props')
 
-  const actions = useMemo(
-    () => (
-      <Button icon={EllipsisHorizontalIcon} mode="bleed" tooltipProps={{content: 'Show more'}} />
-    ),
-    [],
-  )
+  const actions = useMemo(() => <ContextMenuButton />, [])
   const tabs = useMemo(
     () =>
       manyTabs ? (
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
index 790350b3e13..87a44aea1c0 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
@@ -1,7 +1,8 @@
-import {ChevronDownIcon, PublishIcon} from '@sanity/icons'
+import {PublishIcon} from '@sanity/icons'
 import {Flex, Menu, MenuButton, MenuButtonProps, Stack, useToast} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {Button, MenuItem} from '../../../../../../ui'
+import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
 
 const MENU_BUTTON_POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
@@ -22,9 +23,7 @@ export function DocumentActions() {
         <Button icon={PublishIcon} onClick={publish} text="Publish" tone="default" />
       </Stack>
       <MenuButton
-        button={
-          <Button icon={ChevronDownIcon} mode="ghost" tooltipProps={{content: 'Show more'}} />
-        }
+        button={<ContextMenuButton />}
         id="actions"
         menu={
           <Menu>
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx
index 39b7e918247..3bf78d4265d 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx
@@ -1,7 +1,8 @@
-import {ArrowLeftIcon, ChevronRightIcon, EllipsisHorizontalIcon} from '@sanity/icons'
+import {ArrowLeftIcon, ChevronRightIcon} from '@sanity/icons'
 import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {Button} from '../../../../../../ui'
+import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
 import {usePaneLayout} from '../../../usePaneLayout'
 import {Pane} from '../../../Pane'
 import {PaneContent} from '../../../PaneContent'
@@ -25,13 +26,7 @@ export function ListPane(props: {
   return (
     <Pane currentMaxWidth={350} flex={1} id={String(index)} minWidth={320} maxWidth={640}>
       <PaneHeader
-        actions={
-          <Button
-            icon={EllipsisHorizontalIcon}
-            mode="bleed"
-            tooltipProps={{content: 'Show more'}}
-          />
-        }
+        actions={<ContextMenuButton />}
         backButton={
           index > 0 &&
           layoutCollapsed && (
diff --git a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
new file mode 100644
index 00000000000..d9c4d9427c7
--- /dev/null
+++ b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable no-restricted-imports */
+import {EllipsisHorizontalIcon} from '@sanity/icons'
+import {Placement} from '@sanity/ui'
+import React, {HTMLProps, forwardRef} from 'react'
+import {Button, ButtonProps} from '../button'
+import {useTranslation} from 'sanity'
+
+interface ContextMenuButtonProps
+  extends Pick<ButtonProps, 'mode' | 'tone'>,
+    Pick<HTMLProps<HTMLButtonElement>, 'disabled' | 'hidden' | 'onClick'> {
+  tooltipPlacement?: Placement
+}
+
+export const ContextMenuButton = forwardRef(function ContextMenuButton(
+  props: ContextMenuButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const {mode = 'bleed', tooltipPlacement, tone, ...rest} = props
+
+  const {t} = useTranslation()
+
+  return (
+    <Button
+      {...rest}
+      icon={EllipsisHorizontalIcon}
+      mode={mode}
+      ref={ref}
+      tone={tone}
+      tooltipProps={{
+        content: t('common.context-menu-button.tooltip'),
+        placement: tooltipPlacement,
+      }}
+    />
+  )
+})
diff --git a/packages/sanity/src/ui/contextMenuButton/index.ts b/packages/sanity/src/ui/contextMenuButton/index.ts
new file mode 100644
index 00000000000..d27a8d565e9
--- /dev/null
+++ b/packages/sanity/src/ui/contextMenuButton/index.ts
@@ -0,0 +1 @@
+export * from './ContextMenuButton'

From b67597243775ba57a569c1892b9d014dfe254879 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 17:42:13 +0000
Subject: [PATCH 007/163] refactor: change dialog i18n key

---
 packages/sanity/src/core/i18n/bundles/studio.ts | 6 ++----
 packages/sanity/src/ui/dialog/Dialog.tsx        | 4 ++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index baf2099ca0a..db3a8ea3f40 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -322,13 +322,11 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /** Tooltip text for context menu buttons */
   'common.context-menu-button.tooltip': 'Show more',
 
-  /** --- Default dialogs --- */
-
   /** Default text for dialog cancel button */
-  'dialog.cancel-button.text': 'Cancel',
+  'common.dialog.cancel-button.text': 'Cancel',
 
   /** Defualt text for dialog confirm button */
-  'dialog.confirm-button.text': 'Confirm',
+  'common.dialog.confirm-button.text': 'Confirm',
 
   /** The value of the <code>_key</code> property must be a unique string. */
   'form.error.duplicate-keys-alert.details.additional-description':
diff --git a/packages/sanity/src/ui/dialog/Dialog.tsx b/packages/sanity/src/ui/dialog/Dialog.tsx
index 188f52a6da4..9e2d9518319 100644
--- a/packages/sanity/src/ui/dialog/Dialog.tsx
+++ b/packages/sanity/src/ui/dialog/Dialog.tsx
@@ -70,7 +70,7 @@ export const Dialog = forwardRef(function Dialog(
               <Button
                 mode="bleed"
                 padding={2}
-                text={t('dialog.cancel-button.text')}
+                text={t('common.dialog.cancel-button.text')}
                 tone="default"
                 onClick={props.onClose}
                 {...footer.cancelButton}
@@ -80,7 +80,7 @@ export const Dialog = forwardRef(function Dialog(
               <Button
                 mode="default"
                 padding={2}
-                text={t('dialog.confirm-button.text')}
+                text={t('common.dialog.confirm-button.text')}
                 tone="critical"
                 {...footer.confirmButton}
               />

From f770183c73d71c7d94473c320d8dff43b44113c8 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 18:03:17 +0000
Subject: [PATCH 008/163] refactor: remove unused components and i18n strings

---
 .../sanity/src/core/i18n/bundles/studio.ts    |  32 -----
 .../src/desk/components/DraftStatus.tsx       |  41 ------
 .../src/desk/components/PublishedStatus.tsx   |  42 ------
 packages/sanity/src/desk/i18n/resources.ts    |  30 ----
 .../inspectors/changes/LoadingContent.tsx     |  21 ---
 .../statusBar/sparkline/PublishStatus.tsx     | 128 ------------------
 6 files changed, 294 deletions(-)
 delete mode 100644 packages/sanity/src/desk/components/DraftStatus.tsx
 delete mode 100644 packages/sanity/src/desk/components/PublishedStatus.tsx
 delete mode 100644 packages/sanity/src/desk/panes/document/inspectors/changes/LoadingContent.tsx
 delete mode 100644 packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index db3a8ea3f40..200f85f736b 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -249,8 +249,6 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'changes.inspector.to-label': 'To',
   /** Loading author of change in the differences tooltip in the review changes pane */
   'changes.loading-author': 'Loading…',
-  /** Loading changes in Review Changes Pane */
-  'changes.loading-changes': 'Loading changes…',
   /** No Changes description in the Review Changes pane */
   'changes.no-changes-description':
     'Edit the document or select an older version in the timeline to see a list of changes appear in this panel.',
@@ -476,8 +474,6 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.array.no-items-label': 'No items',
   /** Label for read only array fields */
   'inputs.array.read-only-label': 'This field is read-only',
-  /** Label for when the array input is resolving the initial value for the item */
-  'inputs.array.resolving-initial-value': 'Resolving initial value…',
   /** Placeholder value for datetime input */
   'inputs.datetime.placeholder': 'e.g. {{example}}',
   /** Acessibility label for button to open file options menu */
@@ -509,8 +505,6 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.files.common.actions-menu.download.label': 'Download',
   /** The URL is copied to the clipboard */
   'inputs.files.common.actions-menu.notification.url-copied': 'The URL is copied to the clipboard',
-  /** Replace */
-  'inputs.files.common.actions-menu.replace.label': 'Replace',
   /** Upload */
   'inputs.files.common.actions-menu.upload.label': 'Upload',
   /** Drop to upload */
@@ -880,30 +874,12 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.reference.metadata-error.title': 'Unable to load reference metadata',
   /** Message shown when no documents were found that matched the given search string */
   'inputs.reference.no-results-for-query': 'No results for <strong>“{{searchTerm}}”</strong>',
-  /** Text for tooltip showing when a document was edited, using relative time (eg "how long ago was it edited?") */
-  'inputs.reference.preview.edited-at-time': 'Edited <RelativeTime/>',
-  /** Accessibility label for icon indicating that document does _not_ have any unpublished changes */
-  'inputs.reference.preview.has-no-unpublished-changes-aria-label': 'No unpublished edits',
-  /** Accessibility label for icon indicating that document has unpublished changes */
-  'inputs.reference.preview.has-unpublished-changes-aria-label': 'Edited',
-  /** Accessibility label for icon indicating that document does _not_ have a published version */
-  'inputs.reference.preview.is-not-published-aria-label': 'Not published',
-  /** Accessibility label for icon indicating that document has a published version */
-  'inputs.reference.preview.is-published-aria-label': 'Published',
-  /** Text for tooltip indicating that a document has no unpublished edits */
-  'inputs.reference.preview.no-unpublished-edits': 'No unpublished edits',
-  /** Text for tooltip indicating that a document has not yet been published */
-  'inputs.reference.preview.not-published': 'Not published',
-  /** Text for tooltip showing when a document was published, using relative time (eg "how long ago was it published?") */
-  'inputs.reference.preview.published-at-time': 'Published <RelativeTime/>',
   /** The referenced document no longer exist and might have been deleted (for weak references) */
   'inputs.reference.referenced-document-does-not-exist':
     'The referenced document no longer exist and might have been deleted (document ID: <code>{{documentId}}</code>).',
   /** The referenced document could not be displayed to the user because of insufficient permissions */
   'inputs.reference.referenced-document-insufficient-permissions':
     'The referenced document could not be accessed due to insufficient permissions',
-  /** Label for when the reference input is resolving the initial value for an item */
-  'inputs.reference.resolving-initial-value': 'Resolving initial value…',
   /** Placeholder shown in a reference input with no current value */
   'inputs.reference.search-placeholder': 'Type to search',
   /** Explanation of the consequences of leaving the reference as strong instead of weak */
@@ -1000,8 +976,6 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'new-document.create-new-document-label': 'New document…',
   /** Placeholder for the "filter" input within the new document menu */
   'new-document.filter-placeholder': 'Filter',
-  /** Loading indicator text within the new document menu */
-  'new-document.loading': 'Loading…',
   /** Accessibility label for the list displaying options in the new document menu */
   'new-document.new-document-aria-label': 'New document',
   /** Message for when there are no document type options in the new document menu */
@@ -1563,8 +1537,6 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
     'Cannot apply {{name}} to multiple blocks',
   /** Label for action to sign out of the current sanity project */
   'user-menu.action.sign-out': 'Sign out',
-  /** Title for appearance section for the current studio (dark / light / system scheme) */
-  'user-menu.appearance-title': 'Appearance',
   /** Label for close menu button for user menu */
   'user-menu.close-menu': 'Close menu',
   /** Description for using the "dark theme" in the appearance user menu */
@@ -1579,8 +1551,6 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'user-menu.color-scheme.system-description': 'Use system appearance',
   /** Title for using system apparence in the appearance user menu */
   'user-menu.color-scheme.system-title': 'System',
-  /** Title for locale section for the current studio */
-  'user-menu.locale-title': 'Language',
   /** Label for tooltip to show which provider the currently logged in user is using */
   'user-menu.login-provider': 'Signed in with {{providerTitle}}',
   /**
@@ -1601,8 +1571,6 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'workspaces.select-workspace-aria-label': 'Select workspace',
   /** Button label for opening the workspace switcher */
   'workspaces.select-workspace-label': 'Select workspace',
-  /** Title for Workplaces dropdown menu */
-  'workspaces.title': 'Workspaces',
 })
 
 /**
diff --git a/packages/sanity/src/desk/components/DraftStatus.tsx b/packages/sanity/src/desk/components/DraftStatus.tsx
deleted file mode 100644
index 4bd54b9ae97..00000000000
--- a/packages/sanity/src/desk/components/DraftStatus.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react'
-import {EditIcon} from '@sanity/icons'
-import {PreviewValue, SanityDocument} from '@sanity/types'
-import {Box, Text, Tooltip} from '@sanity/ui'
-import {structureLocaleNamespace} from '../i18n'
-import {TextWithTone, Translate, useTranslation, RelativeTime} from 'sanity'
-
-export function DraftStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
-  const {document} = props
-  const updatedAt = document && '_updatedAt' in document && document._updatedAt
-  const {t} = useTranslation(structureLocaleNamespace)
-
-  return (
-    <Tooltip
-      portal
-      content={
-        <Box padding={2}>
-          <Text size={1}>
-            {document ? (
-              <Translate
-                i18nKey="pane-item.draft-status.has-draft.tooltip"
-                t={t}
-                components={{
-                  RelativeTime: () => (
-                    <>{updatedAt && <RelativeTime time={updatedAt} useTemporalPhrase />}</>
-                  ),
-                }}
-              />
-            ) : (
-              t('pane-item.draft-status.no-draft.tooltip')
-            )}
-          </Text>
-        </Box>
-      }
-    >
-      <TextWithTone tone="caution" dimmed={!document} muted={!document} size={1}>
-        <EditIcon />
-      </TextWithTone>
-    </Tooltip>
-  )
-}
diff --git a/packages/sanity/src/desk/components/PublishedStatus.tsx b/packages/sanity/src/desk/components/PublishedStatus.tsx
deleted file mode 100644
index 12e11606015..00000000000
--- a/packages/sanity/src/desk/components/PublishedStatus.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-import {PublishIcon} from '@sanity/icons'
-import {PreviewValue, SanityDocument} from '@sanity/types'
-import {Box, Text, Tooltip} from '@sanity/ui'
-import {structureLocaleNamespace} from '../i18n'
-import {RelativeTime, TextWithTone, Translate, useTranslation} from 'sanity'
-
-export function PublishedStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
-  const {document} = props
-  const updatedAt = document && '_updatedAt' in document && document._updatedAt
-  const statusLabel = document ? 'Published' : 'Not published'
-  const {t} = useTranslation(structureLocaleNamespace)
-
-  return (
-    <Tooltip
-      portal
-      content={
-        <Box padding={2}>
-          <Text size={1}>
-            {document ? (
-              <Translate
-                t={t}
-                i18nKey="pane-item.published-status.has-published.tooltip"
-                components={{
-                  RelativeTime: () => (
-                    <>{updatedAt && <RelativeTime time={updatedAt} useTemporalPhrase />}</>
-                  ),
-                }}
-              />
-            ) : (
-              t('pane-item.published-status.no-published.tooltip')
-            )}
-          </Text>
-        </Box>
-      }
-    >
-      <TextWithTone tone="positive" dimmed={!document} muted={!document} size={1}>
-        <PublishIcon aria-label={statusLabel} />
-      </TextWithTone>
-    </Tooltip>
-  )
-}
diff --git a/packages/sanity/src/desk/i18n/resources.ts b/packages/sanity/src/desk/i18n/resources.ts
index 625444283cd..42d9f80df33 100644
--- a/packages/sanity/src/desk/i18n/resources.ts
+++ b/packages/sanity/src/desk/i18n/resources.ts
@@ -280,25 +280,15 @@ const structureLocaleStrings = defineLocalesResources('structure', {
 
   /** Text shown on back button visible on smaller breakpoints */
   'pane-header.back-button.text': 'Back',
-  /** tooltip text (via `title` attribute) for the menu button */
-  'pane-header.context-menu-button.tooltip': 'Show menu',
-  /** Appears in a document list pane header if there are more than one option for create. This is the label for that menu */
-  'pane-header.create-menu.label': 'Create',
   /** The `aria-label` for the disabled button in the pane header if create permissions are granted */
   'pane-header.disabled-created-button.aria-label': 'Insufficient permissions',
 
-  /** The text shown in the tooltip of pane item previews of documents if there are unpublished edits */
-  'pane-item.draft-status.has-draft.tooltip': 'Edited <RelativeTime/>',
   /** The text shown in the tooltip of pane item previews of documents if there are no unpublished edits */
   'pane-item.draft-status.no-draft.tooltip': 'No unpublished edits',
   /** The subtitle tor pane item previews if there isn't a matching schema type found */
   'pane-item.missing-schema-type.subtitle': 'Document: <Code>{{documentId}}</Code>',
   /** The title tor pane item previews if there isn't a matching schema type found */
   'pane-item.missing-schema-type.title': 'No schema found for type <Code>{{documentType}}</Code>',
-  /** The text shown in the tooltip of pane item previews of documents if there are unpublished edits */
-  'pane-item.published-status.has-published.tooltip': 'Published <RelativeTime/>',
-  /** The text shown in the tooltip of pane item previews of documents if there are no unpublished edits */
-  'pane-item.published-status.no-published.tooltip': 'No unpublished edits',
 
   /** The text used in the document header title if there is an error */
   'panes.document-header-title.error.text': 'Error: {{error}}',
@@ -382,26 +372,6 @@ const structureLocaleStrings = defineLocalesResources('structure', {
   /** The text for the "Open preview" action for a document */
   'production-preview.menu-item.title': 'Open preview',
 
-  /** Accessibility label indicating when the document was last published, in relative time, eg "3 weeks ago" */
-  'status-bar.publish-status-button.last-published-time.aria-label':
-    'Last published {{relativeTime}}',
-  /** Text for tooltip showing explanation of timestamp/relative time, eg "Last published <RelativeTime/>" */
-  'status-bar.publish-status-button.last-published-time.tooltip': 'Last published <RelativeTime/>',
-  /** Accessibility label indicating when the document was last updated, in relative time, eg "2 hours ago" */
-  'status-bar.publish-status-button.last-updated-time.aria-label': 'Last updated {{relativeTime}}',
-  /** Text for tooltip showing explanation of timestamp/relative time, eg "Last updated <RelativeTime/>" */
-  'status-bar.publish-status-button.last-updated-time.tooltip': 'Last updated <RelativeTime/>',
-  /** Aria label for the button */
-  'status-bar.review-changes-button.aria-label': 'Review changes',
-  /** Label for button when status is saved */
-  'status-bar.review-changes-button.status.saved.text': 'Saved!',
-  /** Label for button when status is syncing */
-  'status-bar.review-changes-button.status.syncing.text': 'Saving...',
-  /** Text for the secondary text for tooltip for the button */
-  'status-bar.review-changes-button.tooltip.changes-saved': 'Changes saved',
-  /** Primary text for tooltip for the button */
-  'status-bar.review-changes-button.tooltip.text': 'Review changes',
-
   /** The text that appears in side the documentation link */
   'structure-error.docs-link.text': 'View documentation',
   /** Labels the error message or error stack of the structure error screen */
diff --git a/packages/sanity/src/desk/panes/document/inspectors/changes/LoadingContent.tsx b/packages/sanity/src/desk/panes/document/inspectors/changes/LoadingContent.tsx
deleted file mode 100644
index a90e0d79d5a..00000000000
--- a/packages/sanity/src/desk/panes/document/inspectors/changes/LoadingContent.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import {Box, Flex, Spinner, Text} from '@sanity/ui'
-import {Delay} from '../../../../components'
-import {useTranslation} from 'sanity'
-
-export function LoadingContent() {
-  const {t} = useTranslation('studio')
-
-  return (
-    <Delay ms={300}>
-      <Flex align="center" direction="column" height="fill" justify="center" paddingTop={3}>
-        <Spinner muted />
-        <Box marginTop={3}>
-          <Text align="center" muted size={1}>
-            {t('changes.loading-changes')}
-          </Text>
-        </Box>
-      </Flex>
-    </Delay>
-  )
-}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx
deleted file mode 100644
index f0ee38f38ea..00000000000
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import {Box, Button, Flex, Stack, Text, Tooltip} from '@sanity/ui'
-import {PlayIcon, PublishIcon} from '@sanity/icons'
-import React from 'react'
-import styled from 'styled-components'
-import {structureLocaleNamespace} from '../../../../i18n'
-import {Translate, useRelativeTime, useTranslation} from 'sanity'
-
-interface PublishStatusProps {
-  collapsed?: boolean
-  disabled: boolean
-  lastPublished?: string
-  lastUpdated?: string
-  liveEdit: boolean
-}
-
-const Root = styled(Flex)`
-  cursor: default;
-`
-
-export function PublishStatus(props: PublishStatusProps) {
-  const {collapsed, disabled, lastPublished, lastUpdated, liveEdit} = props
-  const {t} = useTranslation(structureLocaleNamespace)
-
-  // Label with abbreviations and suffix
-  const lastPublishedTimeAgo = useRelativeTime(lastPublished || '', {
-    minimal: true,
-    useTemporalPhrase: true,
-  })
-  // Label with abbreviation and no suffix
-  const lastPublishedTime = useRelativeTime(lastPublished || '', {minimal: true})
-
-  // Label with abbreviations and suffix
-  const lastUpdatedTimeAgo = useRelativeTime(lastUpdated || '', {
-    minimal: true,
-    useTemporalPhrase: true,
-  })
-  // Label with abbreviation and no suffix
-  const lastUpdatedTime = useRelativeTime(lastUpdated || '', {minimal: true})
-
-  // Accessible labels without abbreviations or suffixes
-  const a11yUpdatedAgo = useRelativeTime(lastUpdated || '', {
-    minimal: false,
-    useTemporalPhrase: true,
-  })
-  const a11yPublishedAgo = useRelativeTime(lastPublished || '', {
-    minimal: false,
-    useTemporalPhrase: true,
-  })
-  const a11yLabel = liveEdit
-    ? t('status-bar.publish-status-button.last-updated-time.aria-label', {
-        relativeTime: a11yUpdatedAgo,
-      })
-    : t('status-bar.publish-status-button.last-published-time.aria-label', {
-        relativeTime: a11yPublishedAgo,
-      })
-
-  return (
-    <Root align="center" data-ui="PublishStatus" sizing="border">
-      <Tooltip
-        placement="top"
-        portal
-        content={
-          <Stack padding={3} space={3}>
-            <Text size={1}>
-              {liveEdit ? (
-                <Translate
-                  t={t}
-                  i18nKey="status-bar.publish-status-button.last-updated-time.tooltip"
-                  components={{
-                    RelativeTime: () => (
-                      <time
-                        dateTime={lastUpdated}
-                        aria-label={lastUpdated ? a11yUpdatedAgo : a11yPublishedAgo}
-                      >
-                        {lastUpdated ? lastUpdatedTimeAgo : lastPublishedTimeAgo}
-                      </time>
-                    ),
-                  }}
-                />
-              ) : (
-                <Translate
-                  t={t}
-                  i18nKey="status-bar.publish-status-button.last-published-time.tooltip"
-                  components={{
-                    RelativeTime: () => (
-                      <time dateTime={lastPublished} aria-label={a11yPublishedAgo}>
-                        {lastPublishedTimeAgo}
-                      </time>
-                    ),
-                  }}
-                />
-              )}
-            </Text>
-          </Stack>
-        }
-      >
-        <Button
-          mode="bleed"
-          tone={liveEdit ? 'critical' : 'positive'}
-          tabIndex={-1}
-          disabled={disabled}
-          aria-label={a11yLabel}
-        >
-          <Flex align="center">
-            <Box marginRight={collapsed ? 0 : 3}>
-              <Text size={2} aria-hidden="true">
-                {liveEdit ? <PlayIcon /> : <PublishIcon />}
-              </Text>
-            </Box>
-            {!collapsed && (
-              <Text size={1} weight="medium">
-                {liveEdit ? (
-                  <time dateTime={lastUpdated || lastPublished} aria-label={a11yLabel}>
-                    {lastUpdated ? lastUpdatedTime : lastPublishedTime}
-                  </time>
-                ) : (
-                  <time dateTime={lastPublished} aria-label={a11yLabel}>
-                    {lastPublishedTime}
-                  </time>
-                )}
-              </Text>
-            )}
-          </Flex>
-        </Button>
-      </Tooltip>
-    </Root>
-  )
-}

From e146215ca8b251c1b359f5345f49812c3f06e6b3 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 19:12:11 +0000
Subject: [PATCH 009/163] fix: localize search button tooltip text

---
 packages/sanity/src/core/i18n/bundles/studio.ts               | 4 ++++
 .../src/core/studio/components/navbar/search/SearchButton.tsx | 3 +--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index 200f85f736b..ca1a045b8a8 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -1057,6 +1057,10 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'search.action.toggle-filters-aria-label_hide': 'Hide filters',
   /** Accessibility label for when the search is full screen (on narrow screens) and you want to show filters */
   'search.action.toggle-filters-aria-label_show': 'Show filters',
+
+  /** Tooltip text for the global search button */
+  'search.button.tooltip': 'Search',
+
   /**
    * A list of provided types (use `list` formatter preferably).
    */
diff --git a/packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx
index 4bb6c6d7b68..10a92b9c86a 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx
@@ -23,8 +23,7 @@ export const SearchButton = forwardRef(function SearchButton(
       data-testid="studio-search"
       icon={SearchIcon}
       tooltipProps={{
-        // @todo: localize
-        content: 'Search',
+        content: t('search.button.tooltip'),
         hotkeys: [GLOBAL_SEARCH_KEY_MODIFIER, GLOBAL_SEARCH_KEY.toUpperCase()],
         portal: true,
       }}

From 6da45afec5e7598db6377f7ab484cefa8902bdbf Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 19:18:52 +0000
Subject: [PATCH 010/163] fix: localize create new button tooltip in document
 pane headers

---
 .../components/paneHeaderActions/PaneHeaderCreateButton.tsx  | 5 ++---
 packages/sanity/src/desk/i18n/resources.ts                   | 2 ++
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx b/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
index 5c5584127de..c108b6fd1d5 100644
--- a/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
+++ b/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
@@ -119,7 +119,7 @@ export function PaneHeaderCreateButton({templateItems}: PaneHeaderCreateButtonPr
           mode="bleed"
           disabled={disabled}
           data-testid="action-intent-button"
-          tooltipProps={disabled ? null : {content: 'Create new document'}}
+          tooltipProps={disabled ? null : {content: t('pane-header.create-new-button.tooltip')}}
         />
       </InsufficientPermissionsMessageTooltip>
     )
@@ -132,8 +132,7 @@ export function PaneHeaderCreateButton({templateItems}: PaneHeaderCreateButtonPr
           icon={AddIcon}
           mode="bleed"
           data-testid="multi-action-intent-button"
-          // @todo: localize
-          tooltipProps={{content: 'Create new document'}}
+          tooltipProps={{content: t('pane-header.create-new-button.tooltip')}}
         />
       }
       id="create-menu"
diff --git a/packages/sanity/src/desk/i18n/resources.ts b/packages/sanity/src/desk/i18n/resources.ts
index 42d9f80df33..af1866124ee 100644
--- a/packages/sanity/src/desk/i18n/resources.ts
+++ b/packages/sanity/src/desk/i18n/resources.ts
@@ -280,6 +280,8 @@ const structureLocaleStrings = defineLocalesResources('structure', {
 
   /** Text shown on back button visible on smaller breakpoints */
   'pane-header.back-button.text': 'Back',
+  /** Tooltip displayed on the create new button in document lists */
+  'pane-header.create-new-button.tooltip': 'Create new document',
   /** The `aria-label` for the disabled button in the pane header if create permissions are granted */
   'pane-header.disabled-created-button.aria-label': 'Insufficient permissions',
 

From 77f1bb64caa42f6f0a63815991d2dcc4f6a5d934 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 19:24:48 +0000
Subject: [PATCH 011/163] fix: localize create new document button

---
 packages/sanity/src/core/i18n/bundles/studio.ts              | 2 ++
 .../components/navbar/new-document/NewDocumentButton.tsx     | 5 ++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index ca1a045b8a8..1329ba35eb1 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -969,6 +969,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /** Unexpected error: `{{error}}` */
   'member-field-error.unexpected-error': 'Unexpected error: {{error}}',
 
+  /** Button label for "Create new document" button */
+  'new-document.button': 'Create new',
   /**
    * Tooltip message displayed when hovering/activating the "Create new document" action,
    * when there are templates/types available for creation
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
index 70cead73317..55cdf8bb48e 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
@@ -141,14 +141,13 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
       'data-testid': 'new-document-button',
       disabled: disabled || loading,
       icon: AddIcon,
-      // @todo: localize text
-      text: 'Create',
+      text: t('new-document.button'),
       mode: 'ghost',
       onClick: handleToggleOpen,
       ref: setButtonElement,
       selected: open,
     }),
-    [disabled, handleToggleOpen, loading, open, openDialogAriaLabel],
+    [disabled, handleToggleOpen, loading, open, openDialogAriaLabel, t],
   )
 
   // Tooltip content for the open button

From f83e37f082075e154394faf2113ba7abaefb66b9 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 19:44:44 +0000
Subject: [PATCH 012/163] fix: add localized text for common loader component

---
 .../form/inputs/files/ImageToolInput/ImageToolInput.tsx  | 4 ++--
 .../inputs/files/ImageToolInput/imagetool/ImageTool.tsx  | 3 ++-
 .../form/studio/assetSource/shared/AssetDeleteDialog.tsx | 2 +-
 .../form/studio/assetSource/shared/AssetUsageDialog.tsx  | 2 +-
 packages/sanity/src/core/i18n/bundles/studio.ts          | 9 +++------
 packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx     | 8 +++++---
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
index 3a2b3fd4a2a..74b3cfd915c 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
@@ -12,6 +12,7 @@ import {EMPTY_ARRAY} from '../../../../util'
 import {useTranslation} from '../../../../i18n'
 import {ImageTool, HotspotImage, DEFAULT_CROP, DEFAULT_HOTSPOT} from './imagetool'
 import {useLoadImage} from './useLoadImage'
+import {LoadingBlock} from '../../../../../ui/loadingBlock'
 
 export interface ImageToolInputProps
   extends Omit<ObjectInputProps<Image, ImageSchemaType>, 'markers' | 'renderDefault'> {
@@ -142,11 +143,10 @@ export function ImageToolInput(props: ImageToolInputProps) {
                       </Text>
                     </Card>
                   ) : (
-                    <Text muted>{t('inputs.imagetool.loading')}</Text>
+                    <LoadingBlock />
                   )}
                 </LoadStatus>
               )}
-
               {!isImageLoading && image && (
                 <Box margin={1}>
                   <ImageTool
diff --git a/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx b/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx
index 3e1d4710341..736559996fd 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import {LoadingBlock} from '../../../../../../ui/loadingBlock'
 import {ImageLoader} from './ImageLoader'
 import {ToolCanvas} from './ToolCanvas'
 import {Resize} from './Resize'
@@ -14,7 +15,7 @@ export function ImageTool(props: ImageToolProps) {
     <ImageLoader src={props.src}>
       {({isLoading, image, error}) => {
         if (isLoading) {
-          return <div>Loading...</div>
+          return <LoadingBlock />
         }
         if (error) {
           return <div>{error.message}</div>
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
index 2f7bb529c48..10ee60bfb0a 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
@@ -63,7 +63,7 @@ export function AssetDeleteDialog({
     >
       {isLoading ? (
         <Box padding={4}>
-          <LoadingBlock title={t('asset-source.delete-dialog.loading')} />
+          <LoadingBlock />
         </Box>
       ) : (
         <Stack
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
index b02bbb8ff77..10e5255c2e6 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
@@ -38,7 +38,7 @@ export function AssetUsageDialog({asset, assetType, onClose}: UsageDialogProps)
     >
       {isLoading ? (
         <Box padding={4}>
-          <LoadingBlock title={t('asset-source.asset-usage-dialog.loading')} />
+          <LoadingBlock />
         </Box>
       ) : (
         <Stack paddingX={[2, 3, 4]} paddingY={[3, 3, 3, 4]} space={1}>
diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index 1329ba35eb1..81fedc9a67f 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -17,8 +17,6 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'asset-source.asset-usage-dialog.header_file': 'Documents using file',
   /** Header in usage dialog for image assets */
   'asset-source.asset-usage-dialog.header_image': 'Documents using image',
-  /** Text shown in usage dialog when loading documents using the selected asset */
-  'asset-source.asset-usage-dialog.loading': 'Loading…',
   /** Text for cancel action in delete-asset dialog */
   'asset-source.delete-dialog.action.cancel': 'Cancel',
   /** Text for "confirm delete" action in delete-asset dialog */
@@ -27,8 +25,6 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'asset-source.delete-dialog.header_file': 'Delete file',
   /** Dialog header for delete-asset dialog when deleting an image */
   'asset-source.delete-dialog.header_image': 'Delete image',
-  /** Text shown in delete dialog when loading documents using the selected asset */
-  'asset-source.delete-dialog.loading': 'Loading…',
   /** Message confirming to delete *named* file */
   'asset-source.delete-dialog.usage-list.confirm-delete-file_named':
     'You are about to delete the file <strong>{{filename}}}</strong> and its metadata. Are you sure?',
@@ -326,6 +322,9 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /** Defualt text for dialog confirm button */
   'common.dialog.confirm-button.text': 'Confirm',
 
+  /** Default text in shared loader text / spinner lockup */
+  'common.loading': 'Loading',
+
   /** The value of the <code>_key</code> property must be a unique string. */
   'form.error.duplicate-keys-alert.details.additional-description':
     'The value of the <code>_key</code> property must be a unique string.',
@@ -583,8 +582,6 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
     'Adjust the rectangle to crop image. Adjust the circle to specify the area that should always be visible.',
   /** Error: `{{errorMessage}}` */
   'inputs.imagetool.load-error': 'Error: {{errorMessage}}',
-  /** Loading image… */
-  'inputs.imagetool.loading': 'Loading image…',
   /** Hotspot & Crop */
   'inputs.imagetool.title': 'Hotspot & Crop',
   /** Convert to `{{targetType}}` */
diff --git a/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx b/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
index e9fb5574303..5280244f958 100644
--- a/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
+++ b/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
@@ -2,6 +2,7 @@
 import {Card, Layer, Spinner, Text} from '@sanity/ui'
 import React from 'react'
 import styled, {css} from 'styled-components'
+import {useTranslation} from 'sanity'
 
 // Enable to force debug background
 const DEBUG_MODE = false
@@ -111,14 +112,15 @@ const StyledText = styled(Text)`
  * A generic loading container which displays a spinner and text.
  * The spinner won't initially be visible and fades in after a short delay.
  */
-// @todo: ensure this works in dark mode
-export function LoadingBlock({fill, hideText, title = 'Loading'}: LoadingTestProps) {
+export function LoadingBlock({fill, hideText, title}: LoadingTestProps) {
+  const {t} = useTranslation()
+
   return (
     <StyledCard $fill={fill} as={fill ? Layer : 'div'}>
       <StyledSpinner $animatePosition={!hideText} muted />
       {!hideText && (
         <StyledText muted size={1}>
-          {title}
+          {title || t('common.loading')}
         </StyledText>
       )}
     </StyledCard>

From d4d960dcc1f453a10497e25b19cebb627efb3612 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 19:49:44 +0000
Subject: [PATCH 013/163] fix: add localized text for review change button
 tooltips

---
 .../sanity/src/core/changeIndicators/ElementWithChangeBar.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
index 5d2f2579b26..76098fd2cab 100644
--- a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
+++ b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
@@ -28,7 +28,7 @@ export function ElementWithChangeBar(props: {
       disabled || !isChanged ? null : (
         <ChangeBar data-testid="change-bar" $zIndex={zIndex}>
           <ChangeBarMarker data-testid="change-bar__marker" />
-          <Tooltip content="Review changes" portal>
+          <Tooltip content={t('changes.change-bar.aria-label')} portal>
             <ChangeBarButton
               aria-label={t('changes.change-bar.aria-label')}
               data-testid="change-bar__button"

From 329b953a28de4095d540b403b9f4b8c8158bf989 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 19:55:49 +0000
Subject: [PATCH 014/163] fix: localize untitled text in compact preview

---
 .../core/components/previews/general/CompactPreview.tsx  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/components/previews/general/CompactPreview.tsx b/packages/sanity/src/core/components/previews/general/CompactPreview.tsx
index d276fce2d52..e48532b30df 100644
--- a/packages/sanity/src/core/components/previews/general/CompactPreview.tsx
+++ b/packages/sanity/src/core/components/previews/general/CompactPreview.tsx
@@ -1,6 +1,7 @@
 import {Box, Flex, Skeleton, Stack, Text, TextSkeleton, rem} from '@sanity/ui'
 import styled from 'styled-components'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
+import {useTranslation} from '../../../i18n'
 import {PreviewMediaDimensions, PreviewProps} from '../types'
 import {PREVIEW_SIZES} from '../constants'
 import {renderPreviewNode} from '../helpers'
@@ -33,6 +34,8 @@ const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1, siz
 export function CompactPreview(props: CompactPreviewProps) {
   const {children, isPlaceholder, media, status, title} = props
 
+  const {t} = useTranslation()
+
   const statusNode = status && (
     <Box data-testid="compact-preview__status" paddingLeft={4} paddingRight={1}>
       {renderPreviewNode(status, 'compact')}
@@ -81,7 +84,11 @@ export function CompactPreview(props: CompactPreviewProps) {
         <Stack data-testid="compact-preview__header" flex={1} space={2}>
           <Text size={1} style={{color: 'inherit'}} textOverflow="ellipsis" weight="medium">
             {title && renderPreviewNode(title, 'compact')}
-            {!title && <span style={{color: 'var(--card-muted-fg-color)'}}>Untitled</span>}
+            {!title && (
+              <span style={{color: 'var(--card-muted-fg-color)'}}>
+                {t('preview.default.title-fallback')}
+              </span>
+            )}
           </Text>
         </Stack>
 

From ffa4f8ee2b85a79979e1a110e5ae163b7ee716f0 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 21:37:35 +0000
Subject: [PATCH 015/163] feat: update file and image input + placeholder
 styles

---
 .../src/core/form/inputs/files/FileInput/FileInput.tsx     | 7 ++++---
 .../src/core/form/inputs/files/ImageInput/ImageInput.tsx   | 7 ++++---
 .../src/core/form/inputs/files/common/PlaceholderText.tsx  | 6 ++++--
 .../core/form/inputs/files/common/UploadPlaceholder.tsx    | 6 +++---
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
index 90020cc52be..3d6b6d347b5 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
@@ -494,7 +494,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
           ref={this.setBrowseButtonElement}
           button={
             <Button
-              mode="ghost"
+              mode="bleed"
               text={t('inputs.file.multi-browse-button.text')}
               data-testid="file-input-multi-browse-button"
               icon={SearchIcon}
@@ -528,7 +528,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
       <Button
         text={t('inputs.file.browse-button.text')}
         icon={SearchIcon}
-        mode="ghost"
+        mode="bleed"
         onClick={() => {
           this.setState({isMenuOpen: false})
           this.handleSelectFileFromAssetSource(assetSources[0])
@@ -554,7 +554,8 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
         <Card
           tone={readOnly ? 'transparent' : 'inherit'}
           border
-          padding={3}
+          paddingX={3}
+          paddingY={2}
           style={
             hoveringFiles.length === 0
               ? {borderStyle: 'dashed'}
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
index 9e1e6871fec..80a0e17a275 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
@@ -555,7 +555,7 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
               data-testid="file-input-multi-browse-button"
               icon={SearchIcon}
               iconRight={ChevronDownIcon}
-              mode="ghost"
+              mode="bleed"
               text={t('inputs.image.browse-menu.text')}
             />
           }
@@ -590,7 +590,7 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
       <Button
         text={t('inputs.image.browse-menu.text')}
         icon={SearchIcon}
-        mode="ghost"
+        mode="bleed"
         onClick={() => {
           this.setState({isMenuOpen: false})
           this.handleSelectImageFromAssetSource(assetSources[0])
@@ -616,7 +616,8 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
         <Card
           tone={readOnly ? 'transparent' : 'inherit'}
           border
-          padding={3}
+          paddingX={3}
+          paddingY={2}
           style={
             hoveringFiles.length === 0
               ? {borderStyle: 'dashed'}
diff --git a/packages/sanity/src/core/form/inputs/files/common/PlaceholderText.tsx b/packages/sanity/src/core/form/inputs/files/common/PlaceholderText.tsx
index 2468e9f85be..6c0bfcaae25 100644
--- a/packages/sanity/src/core/form/inputs/files/common/PlaceholderText.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/PlaceholderText.tsx
@@ -60,8 +60,10 @@ export function PlaceholderText(props: Props) {
   }, [acceptedFiles.length, directUploads, hoveringFiles, readOnly, rejectedFilesCount, t, type])
 
   return (
-    <RootFlex align="center" gap={2} justify="center">
-      <Text muted>{messageIcon}</Text>
+    <RootFlex align="center" gap={3} justify="center" paddingLeft={1}>
+      <Text muted size={1}>
+        {messageIcon}
+      </Text>
 
       <Text size={1} muted>
         {messageText}
diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx
index 304fd3c300c..e6d102a0b3f 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx
@@ -47,7 +47,7 @@ function UploadPlaceholderComponent(props: UploadPlaceholderProps) {
       paddingY={collapsed ? 1 : undefined}
       ref={setRootElement}
     >
-      <Flex flex={1} justify="center">
+      <Flex flex={1}>
         <PlaceholderText
           acceptedFiles={acceptedFiles}
           directUploads={directUploads}
@@ -58,13 +58,13 @@ function UploadPlaceholderComponent(props: UploadPlaceholderProps) {
         />
       </Flex>
 
-      <Flex align="center" gap={2} justify="center" wrap="wrap">
+      <Flex align="center" gap={1} justify="center" wrap="wrap">
         <FileInputButton
           accept={accept}
           data-testid="file-input-upload-button"
           disabled={readOnly || !directUploads}
           icon={UploadIcon}
-          mode="ghost"
+          mode="bleed"
           onSelect={onUpload}
           text={t('input.files.common.upload-placeholder.file-input-button.text')}
         />

From 3f8e400844fc130462b41c363b85a16a2e784bf1 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sun, 3 Dec 2023 21:55:12 +0000
Subject: [PATCH 016/163] feat: update delete confirm dialog styles, use
 compact cards

---
 .../ConfirmDeleteDialogBody.tsx               | 40 ++++++++-----------
 .../ReferencePreviewLink.tsx                  | 11 +----
 2 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx
index d07c95bd260..7bae0a9b4fe 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx
@@ -164,31 +164,25 @@ export function ConfirmDeleteDialogBody({
                   shadow={1}
                   paddingY={1}
                 >
-                  <Flex align="center" margin={2} marginRight={3}>
-                    <Box marginLeft={3} marginRight={3}>
-                      <Text size={3}>
-                        <DocumentsIcon />
+                  <Flex align="center" gap={3} paddingX={3} paddingY={1}>
+                    <Text size={1}>
+                      <DocumentsIcon />
+                    </Text>
+                    <Stack space={2}>
+                      <Text textOverflow="ellipsis" size={1}>
+                        {t('confirm-delete-dialog.cdr-summary.title', {
+                          count: normalizedDatasetNames.length,
+                          documentCount: t('confirm-delete-dialog.cdr-summary.document-count', {
+                            count: crossDatasetReferences.totalCount,
+                          }),
+                        })}
                       </Text>
-                    </Box>
-                    <Flex marginRight={4} direction="column">
-                      <Box marginBottom={2}>
-                        <Text>
-                          {t('confirm-delete-dialog.cdr-summary.title', {
-                            count: normalizedDatasetNames.length,
-                            documentCount: t('confirm-delete-dialog.cdr-summary.document-count', {
-                              count: crossDatasetReferences.totalCount,
-                            }),
-                          })}
-                        </Text>
-                      </Box>
-                      <Box>
-                        <Text title={datasetSubtitle} textOverflow="ellipsis" size={1} muted>
-                          {datasetSubtitle}
-                        </Text>
-                      </Box>
-                    </Flex>
+                      <Text title={datasetSubtitle} textOverflow="ellipsis" size={1} muted>
+                        {datasetSubtitle}
+                      </Text>
+                    </Stack>
                     <ChevronWrapper>
-                      <Text muted>
+                      <Text muted size={1}>
                         <ChevronDownIcon />
                       </Text>
                     </ChevronWrapper>
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ReferencePreviewLink.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ReferencePreviewLink.tsx
index b7d3413f199..3bb5d4f5ba6 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ReferencePreviewLink.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ReferencePreviewLink.tsx
@@ -40,18 +40,11 @@ export function ReferencePreviewLink(props: ReferencePreviewLinkProps) {
   )
 
   return (
-    <PreviewCard
-      __unstable_focusRing
-      as={Link as FIXME}
-      data-as="a"
-      onClick={onClick}
-      padding={2}
-      radius={2}
-    >
+    <PreviewCard __unstable_focusRing as={Link as FIXME} data-as="a" onClick={onClick} radius={2}>
       <PaneItemPreview
         documentPreviewStore={documentPreviewStore}
         icon={type?.icon}
-        layout="default"
+        layout="compact"
         presence={documentPresence?.length > 0 ? documentPresence : EMPTY_ARRAY}
         schemaType={type}
         value={value}

From 68e9abe9077a2d0491f3b6eed589858dea7c883e Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Mon, 4 Dec 2023 00:48:26 +0000
Subject: [PATCH 017/163] fix: show checkmark on selected locale in locale menu

---
 .../core/studio/components/navbar/userMenu/LocaleMenu.tsx   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx
index 593f2a4de35..b0ff618f229 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx
@@ -1,3 +1,4 @@
+import {CheckmarkIcon} from '@sanity/icons'
 import {MenuDivider} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {useLocale} from '../../../../i18n/hooks/useLocale'
@@ -40,10 +41,13 @@ function LocaleItem(props: {
   const {locale, changeLocale, selectedLocale: selectedLang} = props
   const localeId = locale.id
   const onClick = useCallback(() => changeLocale(localeId), [localeId, changeLocale])
+  const selected = selectedLang == localeId
+
   return (
     <MenuItem
       aria-label={locale.title}
-      pressed={selectedLang == localeId}
+      pressed={selected}
+      iconRight={selected && <CheckmarkIcon />}
       onClick={onClick}
       text={locale.title}
     />

From 4d2f5e3ebbce7421bc6e8f0df0eb48aa8a4df7a7 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Mon, 4 Dec 2023 18:24:44 +0000
Subject: [PATCH 018/163] fix: ensure media border styles are only applied on
 the targeted element only

---
 .../src/core/components/previews/_common/Media.styled.ts | 9 +--------
 .../src/core/components/previews/_common/Media.tsx       | 2 +-
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/sanity/src/core/components/previews/_common/Media.styled.ts b/packages/sanity/src/core/components/previews/_common/Media.styled.ts
index fefa88edb3f..ee9e98bf06c 100644
--- a/packages/sanity/src/core/components/previews/_common/Media.styled.ts
+++ b/packages/sanity/src/core/components/previews/_common/Media.styled.ts
@@ -47,14 +47,7 @@ export const MediaWrapper = styled.span<{
       font-size: calc(${iconSize} / 16 * 1em);
     }
 
-    /*
-      NOTE on why we can’t use the ":after" pseudo-element:
-      The thing is we only want the shadow when then <MediaWrapper> contains
-      something else than <svg> – icons should not have the shadow.
-      This is why we use the "*:not(svg) + span" selector to target only that
-      situation to render the shadow.
-    */
-    & span {
+    span[data-border] {
       display: block;
       position: absolute;
       left: 0;
diff --git a/packages/sanity/src/core/components/previews/_common/Media.tsx b/packages/sanity/src/core/components/previews/_common/Media.tsx
index 60056b4f96b..dfa7eaf6456 100644
--- a/packages/sanity/src/core/components/previews/_common/Media.tsx
+++ b/packages/sanity/src/core/components/previews/_common/Media.tsx
@@ -30,7 +30,7 @@ export function Media(props: MediaProps) {
       data-testid="Media"
     >
       {renderMedia({dimensions, layout, media})}
-      {border && <span />}
+      {border && <span data-border />}
     </MediaWrapper>
   )
 }

From d4793fe4e17a835985aa1e223f8dadb1affbdf37 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Mon, 4 Dec 2023 18:30:08 +0000
Subject: [PATCH 019/163] fix: update create new button localized text

---
 packages/sanity/src/core/i18n/bundles/studio.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index 81fedc9a67f..a703a742139 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -967,7 +967,7 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'member-field-error.unexpected-error': 'Unexpected error: {{error}}',
 
   /** Button label for "Create new document" button */
-  'new-document.button': 'Create new',
+  'new-document.button': 'Create',
   /**
    * Tooltip message displayed when hovering/activating the "Create new document" action,
    * when there are templates/types available for creation

From db18b80a3a6e34978d92c523cc87620c37551fd1 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Mon, 4 Dec 2023 23:58:48 +0000
Subject: [PATCH 020/163] fix: add clarifying comments on container query
 support, reverse header font size selection (fixes edx-860)

---
 .../documentViews/FormHeader.tsx              | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormHeader.tsx b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormHeader.tsx
index 9e84113cddc..0475871a4aa 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormHeader.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormHeader.tsx
@@ -8,8 +8,16 @@ interface DocumentHeaderProps {
   title?: string
 }
 
-// Use CSS container queries to conditionally render headings at different sizes.
-// Hide if container queries are not supported.
+/**
+ * Use CSS container queries to conditionally render headings at different sizes.
+ * We hide this entire container (including the document type) if container queries
+ * not supported in the current browser.
+ *
+ * Note that usage of container queries in `styled-components` is only supported in `6.x`.
+ * As such, studios that include `"styled-components": "<6"` as a dependency will only see
+ * the largest heading size here, even if their browser supports it!
+ */
+
 export const TitleContainer = styled(Stack)`
   ${({theme}) => {
     return css`
@@ -20,22 +28,22 @@ export const TitleContainer = styled(Stack)`
       container-type: inline-size;
 
       [data-heading] {
-        font-size: ${theme.sanity.fonts.heading.sizes[2].fontSize}px;
-        line-height: ${theme.sanity.fonts.heading.sizes[2].lineHeight}px;
+        font-size: ${theme.sanity.fonts.heading.sizes[4].fontSize}px;
+        line-height: ${theme.sanity.fonts.heading.sizes[4].lineHeight}px;
         overflow-wrap: break-word;
       }
 
-      @container (min-width: 420px) {
+      @container (max-width: 560px) {
         [data-heading] {
           font-size: ${theme.sanity.fonts.heading.sizes[3].fontSize}px;
           line-height: ${theme.sanity.fonts.heading.sizes[3].lineHeight}px;
         }
       }
 
-      @container (min-width: 560px) {
+      @container (max-width: 420px) {
         [data-heading] {
-          font-size: ${theme.sanity.fonts.heading.sizes[4].fontSize}px;
-          line-height: ${theme.sanity.fonts.heading.sizes[4].lineHeight}px;
+          font-size: ${theme.sanity.fonts.heading.sizes[2].fontSize}px;
+          line-height: ${theme.sanity.fonts.heading.sizes[2].lineHeight}px;
         }
       }
     `

From cc29ad54ef404f96bce86f9eef5b3497e92406cc Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Tue, 5 Dec 2023 00:45:21 +0000
Subject: [PATCH 021/163] chore(deps): bump @sanity/ui

---
 dev/design-studio/package.json                     | 2 +-
 dev/test-studio/package.json                       | 2 +-
 examples/ecommerce-studio/package.json             | 2 +-
 packages/@sanity/portable-text-editor/package.json | 2 +-
 packages/@sanity/vision/package.json               | 2 +-
 packages/sanity/package.json                       | 2 +-
 yarn.lock                                          | 8 ++++----
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index 2180c5eacb0..6c7259cb334 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.7.0",
-    "@sanity/ui": "2.0.0-alpha.32",
+    "@sanity/ui": "2.0.0-alpha.33",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index 8b71271af18..fd71edd9a0f 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -35,8 +35,8 @@
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-alpha.32",
     "@sanity/ui-workshop": "^1.0.0",
+    "@sanity/ui": "2.0.0-alpha.33",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@sanity/vision": "3.22.1",
diff --git a/examples/ecommerce-studio/package.json b/examples/ecommerce-studio/package.json
index b46479d2f5b..4030f518bad 100644
--- a/examples/ecommerce-studio/package.json
+++ b/examples/ecommerce-studio/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.22.1",
-    "@sanity/ui": "2.0.0-alpha.32",
+    "@sanity/ui": "2.0.0-alpha.33",
     "react": "^18.2.0",
     "react-barcode": "^1.4.1",
     "react-dom": "^18.2.0",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index 59c3abe38c6..e3218498959 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "2.0.0-alpha.32",
+    "@sanity/ui": "2.0.0-alpha.33",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index 1458a7c4321..5516fcadc8f 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -67,7 +67,7 @@
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "^2.1.20",
     "@sanity/icons": "^2.7.0",
-    "@sanity/ui": "2.0.0-alpha.32",
+    "@sanity/ui": "2.0.0-alpha.33",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index 12f4b1a2dd8..8107f058da4 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -175,7 +175,7 @@
     "@sanity/schema": "3.22.1",
     "@sanity/telemetry": "^0.7.3",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-alpha.32",
+    "@sanity/ui": "2.0.0-alpha.33",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
diff --git a/yarn.lock b/yarn.lock
index 57fa8976f4b..aee00b63201 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3888,10 +3888,10 @@
     framer-motion "^10.16.2"
     react-refractor "^2.1.7"
 
-"@sanity/ui@2.0.0-alpha.32":
-  version "2.0.0-alpha.32"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-alpha.32.tgz#d30fd605f9c89168d6625faaf925c4e580d53972"
-  integrity sha512-s7aTaCc78x7HC1nu7HrXElyU0sMXchHdd5a0vcl+up6q7Te26P8XLM5NOYURy2Ny9KLAvMBFeVLpbix5v+V09Q==
+"@sanity/ui@2.0.0-alpha.33":
+  version "2.0.0-alpha.33"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-alpha.33.tgz#418996fcb2c122a5a8dbd2c7b4350d792fd4dc02"
+  integrity sha512-6IAvMtjnry7yckWOwkMBxvuntTPVSxGib/lYkVpHsLHzWQhe7l8MnD66Fo+WSAvrIaC00wr3oniVyXCGkmzYlQ==
   dependencies:
     "@floating-ui/react-dom" "^2.0.4"
     "@sanity/color" "3.0.0-beta.7"

From a9d2618f4b871066aca03f3e2fbc4dae8dcb04b9 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Tue, 5 Dec 2023 00:54:09 +0000
Subject: [PATCH 022/163] feat: update user menu and presence menu items with
 new avatar sizes

---
 .../components/navbar/presence/PresenceMenuItem.tsx  |  2 +-
 .../studio/components/navbar/userMenu/UserMenu.tsx   | 12 +++++-------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
index 17554597339..0210dc571bc 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
@@ -72,7 +72,7 @@ export const PresenceMenuItem = memo(function PresenceMenuItem(props: PresenceLi
       preview={
         <UserAvatar
           key={presence.user.id}
-          size={0}
+          size={1}
           user={presence.user}
           status={hasLink ? 'editing' : 'inactive'}
         />
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
index 670ff43e7f7..6cc71d816cb 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -29,8 +29,6 @@ import {useTranslation} from '../../../../i18n'
 import {LoginProviderLogo} from './LoginProviderLogo'
 import {LocaleMenu} from './LocaleMenu'
 
-const AVATAR_SIZE = 1
-
 const StyledMenu = styled(Menu)`
   min-width: 200px;
   max-width: 300px;
@@ -38,8 +36,8 @@ const StyledMenu = styled(Menu)`
 
 const AvatarBox = styled(Box)`
   position: relative;
-  min-width: ${({theme}) => theme.sanity.avatar.sizes[AVATAR_SIZE].size}px;
-  min-height: ${({theme}) => theme.sanity.avatar.sizes[AVATAR_SIZE].size}px;
+  min-width: ${({theme}) => theme.sanity.avatar.sizes[2].size}px;
+  min-height: ${({theme}) => theme.sanity.avatar.sizes[2].size}px;
 `
 
 function AppearanceMenu({setScheme}: {setScheme: (nextScheme: StudioThemeColorSchemeKey) => void}) {
@@ -93,14 +91,14 @@ export function UserMenu() {
         <Button mode="bleed" padding={0} paddingLeft={2} paddingRight={1}>
           <Flex align="center" gap={1}>
             <UserAvatar size={1} user="me" />
-            <Text size={AVATAR_SIZE} muted />
+            <Text size={1} muted />
           </Flex>
         </Button>
       }
       id="user-menu"
       menu={
         <StyledMenu>
-          <Card padding={3}>
+          <Card padding={2}>
             <Flex align="center">
               <Tooltip
                 disabled={!providerTitle}
@@ -108,7 +106,7 @@ export function UserMenu() {
                 content={t('user-menu.login-provider', {providerTitle})}
               >
                 <AvatarBox marginRight={3}>
-                  <UserAvatar size={AVATAR_SIZE} user="me" />
+                  <UserAvatar size={2} user="me" />
                   {currentUser?.provider && <LoginProviderLogo provider={currentUser.provider} />}
                 </AvatarBox>
               </Tooltip>

From 833de2e6bff9b2565df26adacb74fbe49e633bc6 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Tue, 5 Dec 2023 01:20:09 +0000
Subject: [PATCH 023/163] fix: add localized text for config issue tooltip
 button (fixes edx-859)

---
 packages/sanity/src/core/i18n/bundles/studio.ts              | 5 +++++
 .../components/navbar/configIssues/ConfigIssuesButton.tsx    | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index a703a742139..e732d72bcad 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -325,6 +325,11 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /** Default text in shared loader text / spinner lockup */
   'common.loading': 'Loading',
 
+  /** --- Configuration issues --- */
+
+  /** Tooltip displayed on configuration issues button */
+  'configuration-issues.button.tooltip': 'Found configuration issues',
+
   /** The value of the <code>_key</code> property must be a unique string. */
   'form.error.duplicate-keys-alert.details.additional-description':
     'The value of the <code>_key</code> property must be a unique string.',
diff --git a/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx b/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
index 007d722765f..9f8314375cf 100644
--- a/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
@@ -47,7 +47,7 @@ export function ConfigIssuesButton() {
         ref={setButtonElement}
         selected={isDialogOpen}
         tone="caution"
-        tooltipProps={{scheme, content: 'Found configuration issues'}}
+        tooltipProps={{scheme, content: t('configuration-issues.button.tooltip')}}
       />
 
       {isDialogOpen && (

From accf58089578db5de11d0e9a4ce08f0ba5c1304a Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Tue, 5 Dec 2023 01:20:51 +0000
Subject: [PATCH 024/163] chore: fix typos

---
 packages/sanity/src/core/i18n/bundles/studio.ts | 2 +-
 packages/sanity/src/core/i18n/i18nConfig.ts     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index e732d72bcad..2a1b2e5bcdb 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -319,7 +319,7 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /** Default text for dialog cancel button */
   'common.dialog.cancel-button.text': 'Cancel',
 
-  /** Defualt text for dialog confirm button */
+  /** Default text for dialog confirm button */
   'common.dialog.confirm-button.text': 'Confirm',
 
   /** Default text in shared loader text / spinner lockup */
diff --git a/packages/sanity/src/core/i18n/i18nConfig.ts b/packages/sanity/src/core/i18n/i18nConfig.ts
index 53c9d956648..6298fc1acca 100644
--- a/packages/sanity/src/core/i18n/i18nConfig.ts
+++ b/packages/sanity/src/core/i18n/i18nConfig.ts
@@ -133,7 +133,7 @@ const defaultOptions: InitOptions = {
   fallbackLng: defaultLocale.id,
 
   // This will be overriden with the users detected/preferred locale before initing,
-  // but to satisfy the init options and prevent mistakes, we include a defualt here.
+  // but to satisfy the init options and prevent mistakes, we include a default here.
   lng: defaultLocale.id,
 
   // In rare cases we'll want to be able to debug i18next - there is a `debug` option

From ecb6056a45b99aeb8fe947fa8d8f7603fa166a4a Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Tue, 5 Dec 2023 01:37:01 +0000
Subject: [PATCH 025/163] feat: update image + file asset source styling

---
 .../form/studio/assetSource/file/AssetRow.tsx |  36 +++---
 .../studio/assetSource/file/FileListView.tsx  |  24 ++--
 .../studio/assetSource/image/AssetThumb.tsx   |   1 -
 .../assetSource/shared/AssetUsageDialog.tsx   |  16 +--
 .../assetSource/shared/AssetUsageList.tsx     |  14 +--
 .../assetSource/shared/DefaultSource.tsx      | 108 +++++++++---------
 6 files changed, 96 insertions(+), 103 deletions(-)

diff --git a/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx b/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx
index 302179726cb..3691da4c556 100644
--- a/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx
@@ -1,9 +1,20 @@
 import type {Subscription} from 'rxjs'
 import React, {useCallback, useMemo, useRef, useState} from 'react'
 import styled, {css} from 'styled-components'
-import {Box, Button, Card, Flex, Grid, Label, Stack, Text, Tooltip, useToast} from '@sanity/ui'
+import {
+  Box,
+  // eslint-disable-next-line no-restricted-imports
+  Button,
+  Card,
+  Flex,
+  Grid,
+  Stack,
+  Text,
+  useToast,
+} from '@sanity/ui'
 import {ChevronDownIcon, ChevronUpIcon, DocumentIcon, LinkIcon, TrashIcon} from '@sanity/icons'
 import {Asset as AssetType} from '@sanity/types'
+import {Tooltip} from '../../../../../ui'
 import {useClient, useRelativeTime, useUnitFormatter} from '../../../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../studioClient'
 import {AssetDeleteDialog} from '../shared/AssetDeleteDialog'
@@ -273,25 +284,25 @@ export const AssetRow = (props: RowProps) => {
           <>
             <Grid marginTop={3} columns={3} gap={1}>
               <Stack space={2}>
-                <Label size={1} muted>
+                <Text size={1} muted weight="medium">
                   {t('asset-source.file.asset-list.header.size')}
-                </Label>
+                </Text>
                 <Text size={1} muted>
                   {formattedSize}
                 </Text>
               </Stack>
               <Stack space={2}>
-                <Label size={1} muted>
+                <Text size={1} muted weight="medium">
                   {t('asset-source.file.asset-list.header.type')}
-                </Label>
+                </Text>
                 <Text size={1} muted>
                   {formattedMimeType}
                 </Text>
               </Stack>
               <Stack space={2}>
-                <Label size={1} muted>
+                <Text size={1} muted weight="medium">
                   {t('asset-source.file.asset-list.header.date-added')}
-                </Label>
+                </Text>
                 <Text size={1} muted>
                   {formattedTime}
                 </Text>
@@ -383,16 +394,7 @@ export const AssetRow = (props: RowProps) => {
               </Text>
             </Card>
             {showTooltip && (
-              <Tooltip
-                content={
-                  <Box padding={2}>
-                    <Text size={1}>{originalFilename}</Text>
-                  </Box>
-                }
-                fallbackPlacements={['right', 'left']}
-                placement="top"
-                portal
-              >
+              <Tooltip content={originalFilename}>
                 <Text size={1} align="left" textOverflow="ellipsis" style={STYLES_BUTTON_TEXT}>
                   {originalFilename}
                 </Text>
diff --git a/packages/sanity/src/core/form/studio/assetSource/file/FileListView.tsx b/packages/sanity/src/core/form/studio/assetSource/file/FileListView.tsx
index a05887410df..7a5bc445336 100644
--- a/packages/sanity/src/core/form/studio/assetSource/file/FileListView.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/file/FileListView.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Box, Card, Flex, Grid, Label, Spinner, Stack, useMediaIndex} from '@sanity/ui'
+import {Box, Card, Flex, Grid, Spinner, Stack, Text, useMediaIndex} from '@sanity/ui'
 import {Asset} from '@sanity/types'
 import {useTranslation} from '../../../../i18n'
 import {AssetRow} from './AssetRow'
@@ -23,37 +23,37 @@ export function FileListView(props: Props) {
 
   const {t} = useTranslation()
   return (
-    <Box padding={4}>
+    <Box>
       <Card borderBottom paddingBottom={2} marginBottom={1}>
         {isMobile ? (
           <Grid style={STYLES_GRID}>
             <Box flex={2} paddingLeft={5}>
-              <Label muted size={1}>
+              <Text muted size={1} weight="medium">
                 {t('asset-source.file.asset-list.header.filename')}
-              </Label>
+              </Text>
             </Box>
           </Grid>
         ) : (
           <Grid gap={1} style={STYLES_GRID}>
             <Box flex={2} style={STYLES_FILENAME}>
-              <Label muted size={1}>
+              <Text muted size={1} weight="medium">
                 {t('asset-source.file.asset-list.header.filename')}
-              </Label>
+              </Text>
             </Box>
             <Box flex={1}>
-              <Label muted size={1}>
+              <Text muted size={1} weight="medium">
                 {t('asset-source.file.asset-list.header.size')}
-              </Label>
+              </Text>
             </Box>
             <Box flex={1}>
-              <Label muted size={1}>
+              <Text muted size={1} weight="medium">
                 {t('asset-source.file.asset-list.header.type')}
-              </Label>
+              </Text>
             </Box>
             <Box flex={1}>
-              <Label muted size={1}>
+              <Text muted size={1} weight="medium">
                 {t('asset-source.file.asset-list.header.date-added')}
-              </Label>
+              </Text>
             </Box>
           </Grid>
         )}
diff --git a/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx b/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
index 5f212691f74..b35cafd86d8 100644
--- a/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
@@ -207,7 +207,6 @@ export const AssetThumb = React.memo(function AssetThumb(props: AssetProps) {
   return (
     <Root>
       <Button
-        tone="primary"
         selected={isSelected}
         tabIndex={0}
         data-id={_id}
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
index 10e5255c2e6..dd93ecf6bfa 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
@@ -37,17 +37,13 @@ export function AssetUsageDialog({asset, assetType, onClose}: UsageDialogProps)
       width={1}
     >
       {isLoading ? (
-        <Box padding={4}>
-          <LoadingBlock />
-        </Box>
+        <LoadingBlock />
       ) : (
-        <Stack paddingX={[2, 3, 4]} paddingY={[3, 3, 3, 4]} space={1}>
-          <AssetUsageList
-            asset={asset}
-            referringDocuments={publishedDocuments}
-            assetType={assetType}
-          />
-        </Stack>
+        <AssetUsageList
+          asset={asset}
+          referringDocuments={publishedDocuments}
+          assetType={assetType}
+        />
       )}
     </Dialog>
   )
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageList.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageList.tsx
index 106594045e0..292b5d04815 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageList.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageList.tsx
@@ -19,8 +19,8 @@ export const AssetUsageList = ({
   const count = referringDocuments.length
   return (
     <>
-      <Card borderBottom marginTop={2} paddingBottom={2} marginBottom={1}>
-        <Text size={[1, 1, 2, 2]} as="h2" weight="regular">
+      <Card borderBottom={count > 0} marginTop={2} paddingBottom={2} marginBottom={1}>
+        <Text size={1} as="h2" weight="medium">
           <Translate
             t={t}
             i18nKey={`asset-source.usage-list.documents-using-${assetType}`}
@@ -48,15 +48,7 @@ const DocumentLink = ({document}: {document: SanityDocument}) => {
   )
 
   return (
-    <Card
-      as={LinkComponent}
-      paddingY={2}
-      paddingX={1}
-      radius={2}
-      key={document._id}
-      data-as="a"
-      tabIndex={0}
-    >
+    <Card as={LinkComponent} radius={2} key={document._id} data-as="a" tabIndex={0}>
       <Flex align="center" gap={2}>
         <Preview
           layout="default"
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
index 63ed18917bb..1ec6bd9d8e5 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
@@ -1,7 +1,7 @@
 import type {Subscription} from 'rxjs'
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {DownloadIcon, InfoOutlineIcon} from '@sanity/icons'
-import {Card, Flex, Text} from '@sanity/ui'
+import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {Asset, AssetFromSource, AssetSourceComponentProps} from '@sanity/types'
 import {uniqueId} from 'lodash'
 import styled from 'styled-components'
@@ -223,58 +223,62 @@ const DefaultAssetSource = function DefaultAssetSource(
       ref={ref}
       width={2}
     >
-      {!isImageOnlyWildCard && !isLoading && accept?.length > 0 && (
-        <Card tone="primary" marginTop={4} marginX={4} padding={[3, 3, 4]} border radius={2}>
-          <Flex gap={[3, 4]} align="center">
-            <Text>
-              <InfoOutlineIcon />
-            </Text>
-            <Text size={1}>
-              <Translate
-                t={t}
-                i18nKey="asset-source.dialog.accept-message"
-                values={{
-                  acceptTypes: listFormat.format(accept.split(',').map((type) => type.trim())),
-                }}
+      <Stack space={5}>
+        {!isImageOnlyWildCard && !isLoading && accept?.length > 0 && (
+          <Card tone="primary" padding={3} border radius={2}>
+            <Flex gap={3} align="center">
+              <Text size={1}>
+                <InfoOutlineIcon />
+              </Text>
+              <Text size={1}>
+                <Translate
+                  t={t}
+                  i18nKey="asset-source.dialog.accept-message"
+                  values={{
+                    acceptTypes: listFormat.format(accept.split(',').map((type) => type.trim())),
+                  }}
+                />
+              </Text>
+            </Flex>
+          </Card>
+        )}
+        {assetType === 'file' && (
+          <FileListView
+            assets={assets}
+            onDeleteFinished={handleDeleteFinished}
+            onClick={handleItemClick}
+            onKeyPress={handleItemKeyPress}
+            isLoading={isLoading}
+            selectedAssets={selectedAssets}
+          />
+        )}
+        {assetType === 'image' && (
+          <ImageListView
+            assets={assets}
+            onDeleteFinished={handleDeleteFinished}
+            onItemClick={handleItemClick}
+            onItemKeyPress={handleItemKeyPress}
+            isLoading={isLoading}
+            selectedAssets={selectedAssets}
+          />
+        )}
+        {assets.length > 0 && !isLastPage && (
+          <CardLoadMore tone="default" padding={4}>
+            <Flex direction="column">
+              <Button
+                type="button"
+                icon={DownloadIcon}
+                loading={isLoading}
+                onClick={handleFetchNextPage}
+                // eslint-disable-next-line no-attribute-string-literals/no-attribute-string-literals
+                size="large"
+                text={t('asset-source.dialog.load-more')}
+                tone="primary"
               />
-            </Text>
-          </Flex>
-        </Card>
-      )}
-      {assetType === 'file' && (
-        <FileListView
-          assets={assets}
-          onDeleteFinished={handleDeleteFinished}
-          onClick={handleItemClick}
-          onKeyPress={handleItemKeyPress}
-          isLoading={isLoading}
-          selectedAssets={selectedAssets}
-        />
-      )}
-      {assetType === 'image' && (
-        <ImageListView
-          assets={assets}
-          onDeleteFinished={handleDeleteFinished}
-          onItemClick={handleItemClick}
-          onItemKeyPress={handleItemKeyPress}
-          isLoading={isLoading}
-          selectedAssets={selectedAssets}
-        />
-      )}
-      {assets.length > 0 && !isLastPage && (
-        <CardLoadMore tone="default" padding={4}>
-          <Flex direction="column">
-            <Button
-              type="button"
-              icon={DownloadIcon}
-              loading={isLoading}
-              onClick={handleFetchNextPage}
-              text={t('asset-source.dialog.load-more')}
-              tone="primary"
-            />
-          </Flex>
-        </CardLoadMore>
-      )}
+            </Flex>
+          </CardLoadMore>
+        )}
+      </Stack>
     </Dialog>
   )
 }

From 0e701bb08f1ed527070c64e8f38b3daad96c7a7a Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Tue, 5 Dec 2023 09:46:05 +0000
Subject: [PATCH 026/163] fix: re-enable buildLegacyTheme (fixes edx-857)

---
 packages/sanity/src/core/theme/_legacy/theme.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/sanity/src/core/theme/_legacy/theme.ts b/packages/sanity/src/core/theme/_legacy/theme.ts
index 549c01807b2..a8c44618c42 100644
--- a/packages/sanity/src/core/theme/_legacy/theme.ts
+++ b/packages/sanity/src/core/theme/_legacy/theme.ts
@@ -29,10 +29,9 @@ import {LegacyThemeProps} from './types'
  *
  * @param partialLegacyTheme - Properties to override the theme with. See {@link LegacyThemeProps}
  * @public
- * @deprecated Use `@sanity/ui studioTheme` instead
+ * @deprecated Legacy theming will be deprecated in a future version of Sanity Studio
  */
 export function buildLegacyTheme(partialLegacyTheme: Partial<LegacyThemeProps>): StudioTheme {
-  return defaults
   const legacyTheme = resolveLegacyTheme(partialLegacyTheme)
   const legacyPalette = buildLegacyPalette(legacyTheme)
   const legacyTones = buildLegacyTones(legacyPalette)

From ec2e3ad12aff02975c378f3ff8310f8b8414e6be Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Tue, 5 Dec 2023 10:11:16 +0000
Subject: [PATCH 027/163] fix: tweak navbar padding, minor cleanup

---
 .../src/core/studio/components/navbar/userMenu/UserMenu.tsx    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
index 6cc71d816cb..719ba6ba137 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -88,10 +88,9 @@ export function UserMenu() {
   return (
     <MenuButton
       button={
-        <Button mode="bleed" padding={0} paddingLeft={2} paddingRight={1}>
+        <Button mode="bleed" paddingX={1} paddingY={0}>
           <Flex align="center" gap={1}>
             <UserAvatar size={1} user="me" />
-            <Text size={1} muted />
           </Flex>
         </Button>
       }

From 35a8be004fefcfe949a98cce89ef7899647dce98 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Tue, 5 Dec 2023 10:20:59 +0000
Subject: [PATCH 028/163] fix: fix back button alignment on smaller
 breakpoints, tweak search styles

---
 .../navbar/search/components/SearchHeader.tsx | 25 +++++++++----------
 .../src/desk/components/pane/PaneHeader.tsx   |  2 +-
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
index 5f3d3add8cf..4a272a82dde 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
@@ -20,7 +20,8 @@ const AnimatedSpinnerIcon = styled(SpinnerIcon)`
   animation: ${rotate} 500ms linear infinite;
 `
 
-const FilterBox = styled(Box)`
+const FilterDiv = styled.div`
+  line-height: 0;
   position: relative;
 `
 
@@ -90,15 +91,13 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
       <Flex align="center" flex={1} gap={fullscreen ? 2 : 1} padding={fullscreen ? 2 : 1}>
         {/* (Fullscreen) Close button */}
         {fullscreen && (
-          <Card>
-            <Button
-              aria-label={t('search.action.close-search-aria-label')}
-              icon={ArrowLeftIcon}
-              mode="bleed"
-              onClick={onClose}
-              tooltipProps={{content: t('search.action.close-search-aria-label')}}
-            />
-          </Card>
+          <Button
+            aria-label={t('search.action.close-search-aria-label')}
+            icon={ArrowLeftIcon}
+            mode="bleed"
+            onClick={onClose}
+            tooltipProps={{content: t('search.action.close-search-aria-label')}}
+          />
         )}
 
         {/* Search field */}
@@ -112,7 +111,7 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
             autoComplete="off"
             border={false}
             clearButton={!!query}
-            fontSize={1}
+            fontSize={[2, 2, 1]}
             icon={loading ? AnimatedSpinnerIcon : SearchIcon}
             onChange={handleQueryChange}
             onClear={handleQueryClear}
@@ -126,7 +125,7 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
 
         {/* Filter toggle */}
         {fullscreen && (
-          <FilterBox>
+          <FilterDiv>
             <Button
               aria-expanded={filtersVisible}
               aria-label={t('search.action.toggle-filters-aria-label', {
@@ -141,7 +140,7 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
               tooltipProps={{content: filtersVisible ? 'Hide filters' : 'Show filters'}}
             />
             {notificationBadgeVisible && <NotificationBadge />}
-          </FilterBox>
+          </FilterDiv>
         )}
       </Flex>
     </Card>
diff --git a/packages/sanity/src/desk/components/pane/PaneHeader.tsx b/packages/sanity/src/desk/components/pane/PaneHeader.tsx
index 5b5f984eb6e..4428751b4ce 100644
--- a/packages/sanity/src/desk/components/pane/PaneHeader.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneHeader.tsx
@@ -72,7 +72,7 @@ export const PaneHeader = forwardRef(function PaneHeader(
               style={layoutStyle}
             >
               {backButton && (
-                <Box flex="none" padding={1}>
+                <Box flex="none" padding={1} paddingLeft={0}>
                   {backButton}
                 </Box>
               )}

From 5c424fff294401b64a9649019bbcb9c3c2bbbcc8 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Tue, 5 Dec 2023 11:34:41 +0000
Subject: [PATCH 029/163] fix: localize document actions button tooltip, update
 ContextMenuButton signature

---
 .../inputs/PortableText/toolbar/ActionMenu.tsx  |  4 +++-
 .../inputs/PortableText/toolbar/InsertMenu.tsx  |  4 +++-
 packages/sanity/src/desk/i18n/resources.ts      |  2 ++
 .../document/statusBar/ActionMenuButton.tsx     | 17 ++++++-----------
 .../document/statusBar/DocumentStatusBar.tsx    | 12 +++++++++---
 .../statusBar/DocumentStatusBarActions.tsx      |  2 +-
 .../ui/contextMenuButton/ContextMenuButton.tsx  | 13 +++++--------
 7 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
index 2761435d16e..f8b5d4a08e1 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
@@ -121,7 +121,9 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
 
   const menuButtonProps = useMemo(
     () => ({
-      button: <ContextMenuButton disabled={disabled} tooltipPlacement={tooltipPlacement} />,
+      button: (
+        <ContextMenuButton disabled={disabled} tooltipProps={{placement: tooltipPlacement}} />
+      ),
       popover: MENU_POPOVER_PROPS,
     }),
     [disabled, tooltipPlacement],
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
index a97f804dbe6..f0faafc3ae0 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
@@ -72,7 +72,9 @@ export const InsertMenu = memo(function InsertMenu(props: InsertMenuProps) {
 
   const menuButtonProps = useMemo(
     () => ({
-      button: <ContextMenuButton disabled={disabled} tooltipPlacement={tooltipPlacement} />,
+      button: (
+        <ContextMenuButton disabled={disabled} tooltipProps={{placement: tooltipPlacement}} />
+      ),
       popover: MENU_POPOVER_PROPS,
     }),
     [disabled, tooltipPlacement],
diff --git a/packages/sanity/src/desk/i18n/resources.ts b/packages/sanity/src/desk/i18n/resources.ts
index af1866124ee..ef9e58fea5c 100644
--- a/packages/sanity/src/desk/i18n/resources.ts
+++ b/packages/sanity/src/desk/i18n/resources.ts
@@ -117,6 +117,8 @@ const structureLocaleStrings = defineLocalesResources('structure', {
 
   /** The action menu button aria-label */
   'buttons.action-menu-button.aria-label': 'Open document actions',
+  /** The action menu button tooltip */
+  'buttons.action-menu-button.tooltip': 'Document actions',
 
   /** The aria-label for the split pane button on the document panel header */
   'buttons.split-pane-button.aria-label': 'Split pane right',
diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
index 3c7092e4d9b..273873d717e 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
@@ -1,7 +1,7 @@
-import {EllipsisHorizontalIcon} from '@sanity/icons'
 import {Menu, MenuButton, PopoverProps, Text} from '@sanity/ui'
-import React, {useCallback, useRef, useState, useMemo, useId} from 'react'
-import {Button, MenuItem, TooltipWithNodes} from '../../../../ui'
+import React, {useCallback, useState, useMemo, useId} from 'react'
+import {MenuItem, TooltipWithNodes} from '../../../../ui'
+import {ContextMenuButton} from '../../../../ui/contextMenuButton'
 import {structureLocaleNamespace} from '../../../i18n'
 import {ActionStateDialog} from './ActionStateDialog'
 import {DocumentActionDescription, LegacyLayerProvider, useTranslation} from 'sanity'
@@ -14,7 +14,6 @@ export interface ActionMenuButtonProps {
 export function ActionMenuButton(props: ActionMenuButtonProps) {
   const {actionStates, disabled} = props
   const idPrefix = useId()
-  const buttonRef = useRef<HTMLButtonElement | null>(null)
   const [actionIndex, setActionIndex] = useState(-1)
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null)
 
@@ -39,15 +38,11 @@ export function ActionMenuButton(props: ActionMenuButtonProps) {
       <MenuButton
         id={`${idPrefix}-action-menu`}
         button={
-          <Button
-            data-testid="action-menu-button"
+          <ContextMenuButton
             aria-label={t('buttons.action-menu-button.aria-label')}
             disabled={disabled}
-            icon={EllipsisHorizontalIcon}
-            mode="bleed"
-            ref={buttonRef}
-            size="large"
-            tooltipProps={{content: 'Document actions'}}
+            data-testid="action-menu-button"
+            tooltipProps={{content: t('buttons.action-menu-button.tooltip')}}
           />
         }
         menu={
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
index ef21e308559..5811a20b805 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
@@ -1,11 +1,11 @@
 import React, {useMemo} from 'react'
 import styled from 'styled-components'
 import {Box, Flex} from '@sanity/ui'
+import {Button} from '../../../../ui'
 import {useDocumentPane} from '../useDocumentPane'
 import {DocumentStatusBarActions, HistoryStatusBarActions} from './DocumentStatusBarActions'
 import {DocumentSparkline} from './sparkline/DocumentSparkline'
 import {useTimelineSelector} from 'sanity'
-import {Button} from '../../../../ui'
 
 export interface DocumentStatusBarProps {
   actionsBoxRef?: React.Ref<HTMLDivElement>
@@ -18,6 +18,7 @@ const DocumentActionsFlex = styled(Flex)`
 
 // This Hidden button prevents this status bar from shifting in height as both
 // <HistoryStatusBarActions /> and <DocumentStatusBarActions /> can return null.
+// @todo: find a more elegant solve to this layout shift problem
 const SpacerButton = styled(Button)`
   pointer-events: none;
   visibility: hidden;
@@ -37,8 +38,13 @@ export function DocumentStatusBar(props: DocumentStatusBarProps) {
           <Box flex={[1, 2]}>{badges && <DocumentSparkline />}</Box>
 
           <DocumentActionsFlex flex={1} justify="flex-end" marginLeft={[1, 3]} ref={actionsBoxRef}>
-            <SpacerButton aria-hidden disabled size="large" text="-" />
-
+            <SpacerButton
+              aria-hidden
+              disabled
+              size="large"
+              // eslint-disable-next-line no-attribute-string-literals/no-attribute-string-literals
+              text="-"
+            />
             {showingRevision ? <HistoryStatusBarActions /> : <DocumentStatusBarActions />}
           </DocumentActionsFlex>
         </Flex>
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
index 7df62cd37b9..c3379248945 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
@@ -40,7 +40,7 @@ function DocumentStatusBarActionsInner(props: DocumentStatusBarActionsInnerProps
   }, [firstActionState])
 
   return (
-    <Flex gap={1}>
+    <Flex align="center" gap={2}>
       {firstActionState && (
         <LayerProvider zOffset={200}>
           <TooltipWithNodes disabled={!tooltipContent} content={tooltipContent} placement="top">
diff --git a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
index d9c4d9427c7..a7a25c95de5 100644
--- a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
+++ b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
@@ -1,21 +1,18 @@
 /* eslint-disable no-restricted-imports */
 import {EllipsisHorizontalIcon} from '@sanity/icons'
-import {Placement} from '@sanity/ui'
 import React, {HTMLProps, forwardRef} from 'react'
 import {Button, ButtonProps} from '../button'
 import {useTranslation} from 'sanity'
 
 interface ContextMenuButtonProps
-  extends Pick<ButtonProps, 'mode' | 'tone'>,
-    Pick<HTMLProps<HTMLButtonElement>, 'disabled' | 'hidden' | 'onClick'> {
-  tooltipPlacement?: Placement
-}
+  extends Pick<ButtonProps, 'mode' | 'tone' | 'tooltipProps'>,
+    Pick<HTMLProps<HTMLButtonElement>, 'disabled' | 'hidden' | 'onClick'> {}
 
 export const ContextMenuButton = forwardRef(function ContextMenuButton(
   props: ContextMenuButtonProps,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
-  const {mode = 'bleed', tooltipPlacement, tone, ...rest} = props
+  const {mode = 'bleed', tooltipProps, tone, ...rest} = props
 
   const {t} = useTranslation()
 
@@ -27,8 +24,8 @@ export const ContextMenuButton = forwardRef(function ContextMenuButton(
       ref={ref}
       tone={tone}
       tooltipProps={{
-        content: t('common.context-menu-button.tooltip'),
-        placement: tooltipPlacement,
+        ...tooltipProps,
+        content: tooltipProps?.content || t('common.context-menu-button.tooltip'),
       }}
     />
   )

From 80fadcac0572a2500b7a45377b89ca87cc3b21d1 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Tue, 5 Dec 2023 13:08:07 +0000
Subject: [PATCH 030/163] fix: remove subtitle support from studio UI menu
 items, update layout, update search string list inputs

---
 .../filter/inputs/string/StringList.tsx       | 15 +++----
 packages/sanity/src/ui/menuItem/MenuItem.tsx  | 42 ++++++++-----------
 2 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
index 6f41f6dc7b4..357833be439 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
@@ -28,15 +28,12 @@ function CustomMenuItem({
 }) {
   const handleClick = useCallback(() => onClick(value), [onClick, value])
 
-  return (
-    <MenuItem
-      onClick={handleClick}
-      pressed={selected}
-      tone="default"
-      text={title}
-      subtitle={value ? `${value}` : undefined}
-    />
-  )
+  let menuItemText = `${title}`
+  if (typeof value !== 'undefined' && title !== value) {
+    menuItemText += ` (${value})`
+  }
+
+  return <MenuItem onClick={handleClick} pressed={selected} tone="default" text={menuItemText} />
 }
 
 export function SearchFilterStringListInput({
diff --git a/packages/sanity/src/ui/menuItem/MenuItem.tsx b/packages/sanity/src/ui/menuItem/MenuItem.tsx
index cebabf436f2..6db2ffba860 100644
--- a/packages/sanity/src/ui/menuItem/MenuItem.tsx
+++ b/packages/sanity/src/ui/menuItem/MenuItem.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable no-restricted-imports */
 import {
+  Box,
   Flex,
   MenuItem as UIMenuItem,
   MenuItemProps as UIMenuItemProps,
@@ -38,11 +39,10 @@ export type MenuItemProps = Pick<
      * Allows to add wrappers to the menu item, e.g. `Tooltip`.
      */
     renderMenuItem?: (menuItem: React.JSX.Element) => React.ReactNode
-    subtitle?: string
     tooltipProps?: TooltipProps | null
   }
 
-const PreviewWrapper = styled.div`
+const PreviewWrapper = styled(Box)`
   height: 25px;
   width: 25px;
   overflow: hidden;
@@ -65,7 +65,6 @@ export const MenuItem = forwardRef(function MenuItem(
     iconRight,
     preview = null,
     renderMenuItem,
-    subtitle,
     text,
     tooltipProps,
     ...rest
@@ -74,36 +73,29 @@ export const MenuItem = forwardRef(function MenuItem(
 ) {
   const menuItemContent = useMemo(() => {
     return (
-      <Flex gap={preview ? 2 : 3} align="center">
-        {icon && (
-          <Text size={FONT_SIZE}>
-            {isValidElement(icon) && icon}
-            {isValidElementType(icon) && createElement(icon)}
-          </Text>
-        )}
+      <Flex align="center" gap={2}>
         {preview && (
-          <PreviewWrapper>
+          <PreviewWrapper paddingX={1}>
             <Flex align="center" height="fill" justify="center">
               {preview}
             </Flex>
           </PreviewWrapper>
         )}
-        {(text || subtitle) && (
+        {icon && (
+          <Text size={FONT_SIZE}>
+            {isValidElement(icon) && icon}
+            {isValidElementType(icon) && createElement(icon)}
+          </Text>
+        )}
+        {text && (
           <Stack flex={1} space={2}>
-            {text && (
-              <Text size={FONT_SIZE} textOverflow="ellipsis" weight="medium">
-                {text}
-              </Text>
-            )}
-            {subtitle && (
-              <Text size={FONT_SIZE} textOverflow="ellipsis" weight={'regular'} muted>
-                {subtitle}
-              </Text>
-            )}
+            <Text size={FONT_SIZE} textOverflow="ellipsis" weight="medium">
+              {text}
+            </Text>
           </Stack>
         )}
         {(badgeText || hotkeys || iconRight) && (
-          <Flex gap={3} marginLeft={3}>
+          <Flex align="center" gap={3} marginLeft={3}>
             {hotkeys && (
               <Hotkeys
                 fontSize={FONT_SIZE}
@@ -113,7 +105,7 @@ export const MenuItem = forwardRef(function MenuItem(
             )}
 
             {badgeText && (
-              <Badge fontSize={FONT_SIZE} mode="outline">
+              <Badge fontSize={FONT_SIZE} style={{marginTop: -4, marginBottom: -4}}>
                 {badgeText}
               </Badge>
             )}
@@ -128,7 +120,7 @@ export const MenuItem = forwardRef(function MenuItem(
         )}
       </Flex>
     )
-  }, [badgeText, hotkeys, icon, iconRight, preview, subtitle, text])
+  }, [badgeText, hotkeys, icon, iconRight, preview, text])
 
   const renderWrapper = useCallback<ConditionalWrapperRenderWrapperCallback>(
     (children) => {

From 20412c7ef5d5b391596e710708200c610970c811 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 6 Dec 2023 10:40:06 +0000
Subject: [PATCH 031/163] chore(deps): bump @sanity/ui in other studios

---
 dev/embedded-studio/package.json    |  2 +-
 dev/studio-e2e-testing/package.json |  2 +-
 yarn.lock                           | 24 ++++++++++++------------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/dev/embedded-studio/package.json b/dev/embedded-studio/package.json
index d467a011742..eb00d28619a 100644
--- a/dev/embedded-studio/package.json
+++ b/dev/embedded-studio/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "1.9.3",
+    "@sanity/ui": "2.0.0-alpha.33",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/studio-e2e-testing/package.json b/dev/studio-e2e-testing/package.json
index d0b5995ea38..11f0e4e5fff 100644
--- a/dev/studio-e2e-testing/package.json
+++ b/dev/studio-e2e-testing/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@sanity/google-maps-input": "^3.0.1",
     "@sanity/icons": "^2.4.0",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/ui": "2.0.0-alpha.33",
     "@sanity/vision": "3.22.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/yarn.lock b/yarn.lock
index aee00b63201..75b34a14573 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3876,18 +3876,6 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@1.9.3", "@sanity/ui@^1.9.3":
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-1.9.3.tgz#4af45902ac95801aa5ea57f377beaf3e3cb36339"
-  integrity sha512-AdWEVFaK0Snk6xxP0lGPVP3QQYKwzkfGFpFZnL9d6UtWt8yeuS8BMLVAzmXzg14hrqH50ex9nvNl3eq6a0MWiw==
-  dependencies:
-    "@floating-ui/react-dom" "2.0.0"
-    "@sanity/color" "^2.2.5"
-    "@sanity/icons" "^2.4.1"
-    csstype "^3.1.2"
-    framer-motion "^10.16.2"
-    react-refractor "^2.1.7"
-
 "@sanity/ui@2.0.0-alpha.33":
   version "2.0.0-alpha.33"
   resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-alpha.33.tgz#418996fcb2c122a5a8dbd2c7b4350d792fd4dc02"
@@ -3912,6 +3900,18 @@
     framer-motion "^10.16.1"
     react-refractor "^2.1.7"
 
+"@sanity/ui@^1.9.3":
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-1.9.3.tgz#4af45902ac95801aa5ea57f377beaf3e3cb36339"
+  integrity sha512-AdWEVFaK0Snk6xxP0lGPVP3QQYKwzkfGFpFZnL9d6UtWt8yeuS8BMLVAzmXzg14hrqH50ex9nvNl3eq6a0MWiw==
+  dependencies:
+    "@floating-ui/react-dom" "2.0.0"
+    "@sanity/color" "^2.2.5"
+    "@sanity/icons" "^2.4.1"
+    csstype "^3.1.2"
+    framer-motion "^10.16.2"
+    react-refractor "^2.1.7"
+
 "@sanity/uuid@3.0.2", "@sanity/uuid@^3", "@sanity/uuid@^3.0.1", "@sanity/uuid@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@sanity/uuid/-/uuid-3.0.2.tgz#e022c37f1d94df3cd876a823e9a83c1d55c99e05"

From 0742e84b7a1ea7e131b49d57f7386c6b5fcb5968 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 6 Dec 2023 10:47:54 +0000
Subject: [PATCH 032/163] fixup! fix: remove subtitle support from studio UI
 menu items, update layout, update search string list inputs

---
 .../src/ui/__workshop__/MenuItemStory.tsx     | 174 +++++++++---------
 1 file changed, 87 insertions(+), 87 deletions(-)

diff --git a/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx b/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
index b8f8d00e2ac..25e9984f21a 100644
--- a/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
+++ b/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
@@ -1,6 +1,6 @@
 import {hues} from '@sanity/color'
 import {CheckmarkIcon, CircleIcon} from '@sanity/icons'
-import {Avatar, Box, Card, Container, Menu, MenuDivider, Text} from '@sanity/ui'
+import {Avatar, Box, Card, Container, Menu, Stack, Text} from '@sanity/ui'
 import {useString} from '@sanity/ui-workshop'
 import React from 'react'
 import {MenuItem} from '../menuItem'
@@ -9,98 +9,98 @@ const HOTKEYS = ['Ctrl', 'Alt', 'P']
 const AVATAR_INITIALS = 'A.W.'
 
 export default function MenuItemStory() {
-  const subtitle = useString('Subtitle', 'Subtitle', 'Props') || ''
   const text = useString('Text', 'Text', 'Props') || ''
 
   return (
     <Container width={0} padding={4}>
-      <Card border>
-        <Menu>
-          <MenuItem text={text} />
-          <MenuItem icon={CircleIcon} text={text} />
-          <MenuItem iconRight={CheckmarkIcon} text={text} />
-          <MenuItem hotkeys={HOTKEYS} text={text} />
-          <MenuItem
-            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
-            text={text}
-            subtitle={subtitle}
-          />
-          <MenuItem
-            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
-            text={text}
-            subtitle={subtitle}
-            iconRight={CheckmarkIcon}
-          />
-          <MenuItem
-            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
-            text={text}
-            subtitle={subtitle}
-            badgeText="badge"
-          />
-          <MenuDivider />
-          <Box padding={2}>
-            <Text size={1}>Not recommended</Text>
+      <Stack space={2}>
+        <Card border radius={2}>
+          <Box marginBottom={3} padding={3}>
+            <Text size={2} weight="medium">
+              Recommended usage
+            </Text>
           </Box>
-          <Box paddingX={2} paddingTop={2}>
-            <Text size={0}> Don&apos;t use left icons in large menu items</Text>
+          <Menu>
+            <MenuItem text={text} />
+            <MenuItem icon={CircleIcon} text={text} />
+            <MenuItem iconRight={CheckmarkIcon} text={text} />
+            <MenuItem hotkeys={HOTKEYS} text={text} />
+            <MenuItem preview={<Avatar initials={AVATAR_INITIALS} size={1} />} text={text} />
+            <MenuItem
+              preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+              text={text}
+              iconRight={CheckmarkIcon}
+            />
+            <MenuItem
+              preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+              text={text}
+              badgeText="badge"
+            />
+          </Menu>
+        </Card>
+        <Card border radius={2} tone="critical">
+          <Box marginBottom={3} padding={3}>
+            <Text size={2} weight="medium">
+              Invalid usage
+            </Text>
           </Box>
-
-          <MenuItem icon={CircleIcon} text={text} subtitle={subtitle} />
-          <Box paddingX={2} paddingTop={2}>
-            <Text size={0}>Don&apos;t use keyboard shortcuts with large menu items</Text>
-          </Box>
-          <MenuItem text={text} hotkeys={HOTKEYS} subtitle={subtitle} />
-          <Box paddingX={2} paddingTop={2}>
-            <Text size={0}>Don&apos;t use badges in small menu items</Text>
-          </Box>
-          <MenuItem text={text} badgeText={'badge'} />
-          <Box paddingX={2} paddingTop={2}>
-            <Text size={0}>Don&apos;t use icons and previews in the same item</Text>
-          </Box>
-          <MenuItem
-            icon={CircleIcon}
-            preview={
-              <Card
-                radius={2}
-                style={{width: '41px', height: '41px', background: hues.cyan[500].hex}}
-              />
-            }
-            text={text}
-            subtitle={subtitle}
-          />
-          <Box paddingX={2} paddingTop={2}>
-            <Text size={0}>Don&apos;t use icon right and hotkeys in the same item</Text>
-          </Box>
-          <MenuItem icon={CircleIcon} text={text} iconRight={CheckmarkIcon} hotkeys={HOTKEYS} />
-          <Box paddingX={2} paddingTop={2}>
-            <Text size={0}>Don&apos;t use icon right and badge in the same item</Text>
-          </Box>
-          <MenuItem icon={CircleIcon} text={text} iconRight={CheckmarkIcon} badgeText={'badge'} />
-          <Box paddingX={2} paddingTop={2}>
-            <Text size={0}>Don&apos;t use hotkeys and badge in the same item</Text>
-          </Box>
-          <MenuItem icon={CircleIcon} text={text} hotkeys={HOTKEYS} badgeText={'badge'} />
-          <Box paddingX={2} paddingTop={2}>
-            <Text size={0}>Don&apos;t use everything at once</Text>
-          </Box>
-          <MenuItem
-            icon={CircleIcon}
-            text={text}
-            hotkeys={HOTKEYS}
-            badgeText={'badge'}
-            iconRight={CheckmarkIcon}
-          />
-          <MenuItem
-            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
-            subtitle={subtitle}
-            icon={CircleIcon}
-            text={text}
-            hotkeys={HOTKEYS}
-            badgeText={'badge'}
-            iconRight={CheckmarkIcon}
-          />
-        </Menu>
-      </Card>
+          <Menu>
+            <Box paddingX={2} paddingTop={2}>
+              <Text muted size={1}>
+                Don&apos;t use icons and previews in the same item
+              </Text>
+            </Box>
+            <MenuItem
+              icon={CircleIcon}
+              preview={
+                <Card
+                  radius={2}
+                  style={{width: '41px', height: '41px', background: hues.cyan[500].hex}}
+                />
+              }
+              text={text}
+            />
+            <Box paddingX={2} paddingTop={2}>
+              <Text muted size={1}>
+                Don't use icon right and hotkeys in the same item
+              </Text>
+            </Box>
+            <MenuItem icon={CircleIcon} text={text} iconRight={CheckmarkIcon} hotkeys={HOTKEYS} />
+            <Box paddingX={2} paddingTop={2}>
+              <Text muted size={1}>
+                Don't use icon right and badge in the same item
+              </Text>
+            </Box>
+            <MenuItem icon={CircleIcon} text={text} iconRight={CheckmarkIcon} badgeText={'badge'} />
+            <Box paddingX={2} paddingTop={2}>
+              <Text muted size={1}>
+                Don't use hotkeys and badge in the same item
+              </Text>
+            </Box>
+            <MenuItem icon={CircleIcon} text={text} hotkeys={HOTKEYS} badgeText={'badge'} />
+            <Box paddingX={2} paddingTop={2}>
+              <Text muted size={1}>
+                Don't use everything at once
+              </Text>
+            </Box>
+            <MenuItem
+              icon={CircleIcon}
+              text={text}
+              hotkeys={HOTKEYS}
+              badgeText={'badge'}
+              iconRight={CheckmarkIcon}
+            />
+            <MenuItem
+              preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+              icon={CircleIcon}
+              text={text}
+              hotkeys={HOTKEYS}
+              badgeText={'badge'}
+              iconRight={CheckmarkIcon}
+            />
+          </Menu>
+        </Card>
+      </Stack>
     </Container>
   )
 }

From f7755c4b8861c5477d92a51f23c5a0ea2b0ad9cc Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 6 Dec 2023 13:34:10 +0000
Subject: [PATCH 033/163] chore(deps): bump @sanity/ui

---
 dev/design-studio/package.json                     | 2 +-
 dev/embedded-studio/package.json                   | 2 +-
 dev/studio-e2e-testing/package.json                | 2 +-
 dev/test-studio/package.json                       | 2 +-
 examples/ecommerce-studio/package.json             | 2 +-
 packages/@sanity/portable-text-editor/package.json | 2 +-
 packages/@sanity/vision/package.json               | 2 +-
 packages/sanity/package.json                       | 2 +-
 yarn.lock                                          | 8 ++++----
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index 6c7259cb334..c421498c66e 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.7.0",
-    "@sanity/ui": "2.0.0-alpha.33",
+    "@sanity/ui": "2.0.0-alpha.34",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/embedded-studio/package.json b/dev/embedded-studio/package.json
index eb00d28619a..1a872531043 100644
--- a/dev/embedded-studio/package.json
+++ b/dev/embedded-studio/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "2.0.0-alpha.33",
+    "@sanity/ui": "2.0.0-alpha.34",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/studio-e2e-testing/package.json b/dev/studio-e2e-testing/package.json
index 11f0e4e5fff..cbcba358e9e 100644
--- a/dev/studio-e2e-testing/package.json
+++ b/dev/studio-e2e-testing/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@sanity/google-maps-input": "^3.0.1",
     "@sanity/icons": "^2.4.0",
-    "@sanity/ui": "2.0.0-alpha.33",
+    "@sanity/ui": "2.0.0-alpha.34",
     "@sanity/vision": "3.22.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index fd71edd9a0f..3efa0a40a3d 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -35,8 +35,8 @@
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
-    "@sanity/ui-workshop": "^1.0.0",
     "@sanity/ui": "2.0.0-alpha.33",
+    "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@sanity/vision": "3.22.1",
diff --git a/examples/ecommerce-studio/package.json b/examples/ecommerce-studio/package.json
index 4030f518bad..aae832962fa 100644
--- a/examples/ecommerce-studio/package.json
+++ b/examples/ecommerce-studio/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.22.1",
-    "@sanity/ui": "2.0.0-alpha.33",
+    "@sanity/ui": "2.0.0-alpha.34",
     "react": "^18.2.0",
     "react-barcode": "^1.4.1",
     "react-dom": "^18.2.0",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index e3218498959..e9de783bf39 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "2.0.0-alpha.33",
+    "@sanity/ui": "2.0.0-alpha.34",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index 5516fcadc8f..d5ebc5fc2dd 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -67,7 +67,7 @@
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "^2.1.20",
     "@sanity/icons": "^2.7.0",
-    "@sanity/ui": "2.0.0-alpha.33",
+    "@sanity/ui": "2.0.0-alpha.34",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index 8107f058da4..42ca4112aa6 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -175,7 +175,7 @@
     "@sanity/schema": "3.22.1",
     "@sanity/telemetry": "^0.7.3",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-alpha.33",
+    "@sanity/ui": "2.0.0-alpha.34",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
diff --git a/yarn.lock b/yarn.lock
index 75b34a14573..a6d637681fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3876,10 +3876,10 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@2.0.0-alpha.33":
-  version "2.0.0-alpha.33"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-alpha.33.tgz#418996fcb2c122a5a8dbd2c7b4350d792fd4dc02"
-  integrity sha512-6IAvMtjnry7yckWOwkMBxvuntTPVSxGib/lYkVpHsLHzWQhe7l8MnD66Fo+WSAvrIaC00wr3oniVyXCGkmzYlQ==
+"@sanity/ui@2.0.0-alpha.34":
+  version "2.0.0-alpha.34"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-alpha.34.tgz#3866766c4facbad9477fd3be25b4f63936ed8e34"
+  integrity sha512-Tx0zVmPuq8ab+EO/KfDP33Pn8ssedbC7/ntfhmZ1OyCHt384/G1gCjhVUJAMtjhJnBcFE6d6CurzI+uXghvJmA==
   dependencies:
     "@floating-ui/react-dom" "^2.0.4"
     "@sanity/color" "3.0.0-beta.7"

From 4b6a0a3dc85404c4d31cd08f0fe460325c66026f Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 6 Dec 2023 13:42:22 +0000
Subject: [PATCH 034/163] feat: use smaller font size for hotkey + badge text
 in menu items and tooltips

---
 packages/sanity/src/ui/menuItem/MenuItem.tsx | 10 ++--------
 packages/sanity/src/ui/tooltip/Tooltip.tsx   |  4 +---
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/sanity/src/ui/menuItem/MenuItem.tsx b/packages/sanity/src/ui/menuItem/MenuItem.tsx
index 6db2ffba860..2a706b45c67 100644
--- a/packages/sanity/src/ui/menuItem/MenuItem.tsx
+++ b/packages/sanity/src/ui/menuItem/MenuItem.tsx
@@ -96,16 +96,10 @@ export const MenuItem = forwardRef(function MenuItem(
         )}
         {(badgeText || hotkeys || iconRight) && (
           <Flex align="center" gap={3} marginLeft={3}>
-            {hotkeys && (
-              <Hotkeys
-                fontSize={FONT_SIZE}
-                keys={hotkeys}
-                style={{marginTop: -4, marginBottom: -4}}
-              />
-            )}
+            {hotkeys && <Hotkeys keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />}
 
             {badgeText && (
-              <Badge fontSize={FONT_SIZE} style={{marginTop: -4, marginBottom: -4}}>
+              <Badge fontSize={0} style={{marginTop: -4, marginBottom: -4}}>
                 {badgeText}
               </Badge>
             )}
diff --git a/packages/sanity/src/ui/tooltip/Tooltip.tsx b/packages/sanity/src/ui/tooltip/Tooltip.tsx
index 69943ae889b..c466dd3a9db 100644
--- a/packages/sanity/src/ui/tooltip/Tooltip.tsx
+++ b/packages/sanity/src/ui/tooltip/Tooltip.tsx
@@ -46,9 +46,7 @@ export const Tooltip = forwardRef(function Tooltip(
       content={
         <Flex align="center" gap={3}>
           {content && <Text size={1}>{content}</Text>}
-          {hotkeys && (
-            <Hotkeys fontSize={1} keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />
-          )}
+          {hotkeys && <Hotkeys keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />}
         </Flex>
       }
       delay={TOOLTIP_DELAY_PROPS}

From 68eda9062425c367e8d10aa043b79a89360b95fa Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 6 Dec 2023 13:43:44 +0000
Subject: [PATCH 035/163] fix: tweak placement for workspace + presence menu
 tooltips

---
 .../components/navbar/presence/PresenceMenuItem.tsx      | 4 +++-
 .../components/navbar/workspace/WorkspaceMenuButton.tsx  | 9 ++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
index 0210dc571bc..c36f18c20fe 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
@@ -79,7 +79,9 @@ export const PresenceMenuItem = memo(function PresenceMenuItem(props: PresenceLi
       }
       ref={setMenuItemElement}
       text={presence.user.displayName}
-      tooltipProps={hasLink ? undefined : {content: t('presence.not-in-a-document')}}
+      tooltipProps={
+        hasLink ? undefined : {content: t('presence.not-in-a-document'), placement: 'left'}
+      }
     />
   )
 })
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
index 87bf885fb04..6f8dadb5f2c 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
@@ -144,7 +144,14 @@ export function WorkspaceMenuButton() {
                     preview={<WorkspacePreviewIcon icon={workspace.icon} size="small" />}
                     selected={isSelected}
                     text={workspace?.title || workspace.name}
-                    tooltipProps={workspace?.subtitle ? {content: workspace.subtitle} : undefined}
+                    tooltipProps={
+                      workspace?.subtitle
+                        ? {
+                            content: workspace.subtitle,
+                            placement: 'right',
+                          }
+                        : undefined
+                    }
                   />
                 )
               })}

From 66d81a743aa30ebfad35dfe6fb24df8bdd21a1c0 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 6 Dec 2023 14:30:01 +0000
Subject: [PATCH 036/163] refactor: use studio UI buttons, remove unused
 components

---
 .../ReferenceFinalizeAlertStrip.tsx           |  6 +-
 .../ReferenceMetadataLoadFailure.tsx          |  7 ++-
 .../ReferenceStrengthMismatchAlertStrip.tsx   |  9 ++-
 .../MissingDocumentTypesMessage.tsx           | 63 -------------------
 .../desk/components/NotPublishedStatus.tsx    | 14 -----
 5 files changed, 15 insertions(+), 84 deletions(-)
 delete mode 100644 packages/sanity/src/desk/components/MissingDocumentTypesMessage.tsx
 delete mode 100644 packages/sanity/src/desk/components/NotPublishedStatus.tsx

diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceFinalizeAlertStrip.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceFinalizeAlertStrip.tsx
index 5482f17c33d..dfdb56a098e 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceFinalizeAlertStrip.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceFinalizeAlertStrip.tsx
@@ -1,8 +1,8 @@
 import type {ReferenceSchemaType} from '@sanity/types'
-import {Button, Stack, Text} from '@sanity/ui'
+import {Stack, Text} from '@sanity/ui'
 import {AlertStrip} from '../../components/AlertStrip'
+import {Button} from '../../../../ui'
 import {Translate, useTranslation} from '../../../i18n'
-import React from 'react'
 
 /**
  * Alert strip that shows an explanation and action prompting the user to finalize a reference,
@@ -41,7 +41,9 @@ export function ReferenceFinalizeAlertStrip({
           />
         </Text>
         <Button
+          mode="ghost"
           onClick={handleRemoveStrengthenOnPublish}
+          size="large"
           text={t('inputs.reference.incomplete-reference.strengthen-button-label')}
           tone="positive"
         />
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceMetadataLoadFailure.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceMetadataLoadFailure.tsx
index a1119cee9f5..116c35175d9 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceMetadataLoadFailure.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceMetadataLoadFailure.tsx
@@ -1,7 +1,8 @@
-import {Button, Stack, Text} from '@sanity/ui'
+import {Stack, Text} from '@sanity/ui'
+import React from 'react'
+import {Button} from '../../../../ui'
 import {useTranslation} from '../../../i18n'
 import {AlertStrip} from '../../components/AlertStrip'
-import React from 'react'
 
 /**
  * Alert strip that shows error encountered while fetching reference metadata, and allowing user
@@ -29,7 +30,9 @@ export function ReferenceMetadataLoadErrorAlertStrip({
           {errorMessage}
         </Text>
         <Button
+          mode="ghost"
           onClick={onHandleRetry}
+          size="large"
           text={t('inputs.reference.metadata-error.retry-button-label')}
           tone="primary"
         />
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceStrengthMismatchAlertStrip.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceStrengthMismatchAlertStrip.tsx
index f574512a6af..4ad98b0a692 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceStrengthMismatchAlertStrip.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceStrengthMismatchAlertStrip.tsx
@@ -1,7 +1,8 @@
-import {Button, Stack, Text} from '@sanity/ui'
-import {AlertStrip} from '../../components/AlertStrip'
-import {Translate, useTranslation} from '../../../i18n'
+import {Stack, Text} from '@sanity/ui'
 import React from 'react'
+import {Button} from '../../../../ui'
+import {Translate, useTranslation} from '../../../i18n'
+import {AlertStrip} from '../../components/AlertStrip'
 
 /**
  * Alert strip that shows an explanation and action prompting the user to fix a mismatch in
@@ -46,7 +47,9 @@ export function ReferenceStrengthMismatchAlertStrip({
           )}
         </Text>
         <Button
+          mode="ghost"
           onClick={handleFixStrengthMismatch}
+          size="large"
           text={t(
             shouldBe === 'weak'
               ? 'inputs.reference.strength-mismatch.weaken-button-label'
diff --git a/packages/sanity/src/desk/components/MissingDocumentTypesMessage.tsx b/packages/sanity/src/desk/components/MissingDocumentTypesMessage.tsx
deleted file mode 100644
index 3cc1c153f3a..00000000000
--- a/packages/sanity/src/desk/components/MissingDocumentTypesMessage.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react'
-import {Box, Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {WarningOutlineIcon} from '@sanity/icons'
-import {useSource} from 'sanity'
-
-export function MissingDocumentTypesMessage() {
-  const {name: sourceName} = useSource()
-
-  return (
-    <Card height="fill">
-      <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-        <Container width={0}>
-          <Card padding={4} radius={2} shadow={1} tone="caution">
-            <Flex>
-              <Box>
-                <Text size={1}>
-                  <WarningOutlineIcon />
-                </Text>
-              </Box>
-              <Stack flex={1} marginLeft={3} space={3}>
-                <Text as="h1" size={1} weight="medium">
-                  No schema types in the <em>{sourceName}</em> source!
-                </Text>
-                <Text as="p" muted size={1}>
-                  Please add schema types in your source configuration.
-                </Text>
-                <Text as="p" muted size={1}>
-                  <a
-                    href="https://beta.sanity.io/docs/platform/studio/config"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Learn how to add a schema types &rarr;
-                  </a>
-                </Text>
-              </Stack>
-            </Flex>
-          </Card>
-        </Container>
-      </Flex>
-
-      {/* <Container>
-        <Stack space={5}>
-          <Heading as="h1">Empty schema</Heading>
-
-          <Text as="p">
-            Your schema does not contain any document types. If it did, those types would be listed
-            here.{' '}
-            <a
-              title="Schema documentation"
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://www.sanity.io/docs/content-studio/the-schema"
-            >
-              Read more about how to add schema types
-            </a>
-            .
-          </Text>
-        </Stack>
-      </Container> */}
-    </Card>
-  )
-}
diff --git a/packages/sanity/src/desk/components/NotPublishedStatus.tsx b/packages/sanity/src/desk/components/NotPublishedStatus.tsx
deleted file mode 100644
index cca0705e201..00000000000
--- a/packages/sanity/src/desk/components/NotPublishedStatus.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import {UnpublishIcon} from '@sanity/icons'
-import {Text} from '@sanity/ui'
-import {Tooltip} from '../../ui'
-
-export function NotPublishedStatus() {
-  return (
-    <Tooltip content="Not published">
-      <Text muted>
-        <UnpublishIcon aria-label="Not published" />
-      </Text>
-    </Tooltip>
-  )
-}

From 21ddb41e8f2147bc5fa468304e4d99fdd38b5b84 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 6 Dec 2023 16:16:43 +0000
Subject: [PATCH 037/163] test: add test ids to PTE toolbar component, fix
 failing ct test

---
 .../formBuilder/inputs/PortableText/Toolbar.spec.tsx   |  6 ++----
 .../form/inputs/PortableText/toolbar/ActionMenu.tsx    |  8 +++++++-
 .../form/inputs/PortableText/toolbar/InsertMenu.tsx    | 10 ++++++----
 .../components/list/CommentsListItemContextMenu.tsx    |  9 +--------
 .../src/ui/contextMenuButton/ContextMenuButton.tsx     |  1 -
 5 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Toolbar.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Toolbar.spec.tsx
index 324e9c47958..df85b85f903 100644
--- a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Toolbar.spec.tsx
+++ b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Toolbar.spec.tsx
@@ -17,11 +17,9 @@ test.describe('Portable Text Input', () => {
         // Adjust the viewport size to make the Inline Object button hidden
         await page.setViewportSize({width: 800, height: 1000})
 
-        const $contextMenuButton = $portableTextInput
-          .getByRole('button')
-          .locator('[data-sanity-icon="add"]')
+        const $contextMenuButton = $portableTextInput.getByTestId('insert-menu-button')
 
-        // Assertion: Check if the Add + button is showing
+        // Assertion: Check if the context menu button is showing
         await expect($contextMenuButton).toBeVisible()
 
         // Assertion: Check if the Inline Object button is now hidden
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
index f8b5d4a08e1..74aa31d05a9 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
@@ -7,6 +7,8 @@ import {
   usePortableTextEditorSelection,
 } from '@sanity/portable-text-editor'
 import {isKeySegment} from '@sanity/types'
+import {useTranslation} from 'react-i18next'
+import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
 import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 import {PTEToolbarAction, PTEToolbarActionGroup} from './types'
@@ -122,7 +124,11 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
   const menuButtonProps = useMemo(
     () => ({
       button: (
-        <ContextMenuButton disabled={disabled} tooltipProps={{placement: tooltipPlacement}} />
+        <ContextMenuButton
+          data-testid="action-menu-button"
+          disabled={disabled}
+          tooltipProps={{placement: tooltipPlacement}}
+        />
       ),
       popover: MENU_POPOVER_PROPS,
     }),
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
index f0faafc3ae0..ae2857a7e57 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
@@ -1,14 +1,12 @@
 import React, {memo, useCallback, useMemo} from 'react'
-import {AddIcon} from '@sanity/icons'
 import {PopoverProps} from '@sanity/ui'
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
 import {upperFirst} from 'lodash'
+import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 import {useTranslation} from '../../../../i18n'
 import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
-import {Button} from '../../../../../ui'
 import {BlockItem} from './types'
 import {useFocusBlock} from './hooks'
-import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 
 const CollapseMenuMemo = memo(CollapseMenu)
 
@@ -73,7 +71,11 @@ export const InsertMenu = memo(function InsertMenu(props: InsertMenuProps) {
   const menuButtonProps = useMemo(
     () => ({
       button: (
-        <ContextMenuButton disabled={disabled} tooltipProps={{placement: tooltipPlacement}} />
+        <ContextMenuButton
+          data-testid="insert-menu-button"
+          disabled={disabled}
+          tooltipProps={{placement: tooltipPlacement}}
+        />
       ),
       popover: MENU_POPOVER_PROPS,
     }),
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
index 92ba06a45a8..99b8bb47059 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
@@ -1,12 +1,5 @@
 import React from 'react'
-import {
-  CheckmarkCircleIcon,
-  UndoIcon,
-  EllipsisHorizontalIcon,
-  EditIcon,
-  TrashIcon,
-  LinkIcon,
-} from '@sanity/icons'
+import {CheckmarkCircleIcon, UndoIcon, EditIcon, TrashIcon, LinkIcon} from '@sanity/icons'
 import {
   MenuButtonProps,
   TooltipDelayGroupProvider,
diff --git a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
index a7a25c95de5..11b2e83309e 100644
--- a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
+++ b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-restricted-imports */
 import {EllipsisHorizontalIcon} from '@sanity/icons'
 import React, {HTMLProps, forwardRef} from 'react'
 import {Button, ButtonProps} from '../button'

From 8d65beafc2e5427e89d5ba55cf3cc9fa1555140d Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 6 Dec 2023 16:31:40 +0000
Subject: [PATCH 038/163] fix: use relative paths for core imports

---
 packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx | 2 +-
 packages/sanity/src/ui/documentStatus/DocumentStatus.tsx       | 2 +-
 packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
index 11b2e83309e..f118a96343d 100644
--- a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
+++ b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
@@ -1,7 +1,7 @@
 import {EllipsisHorizontalIcon} from '@sanity/icons'
 import React, {HTMLProps, forwardRef} from 'react'
+import {useTranslation} from '../../core'
 import {Button, ButtonProps} from '../button'
-import {useTranslation} from 'sanity'
 
 interface ContextMenuButtonProps
   extends Pick<ButtonProps, 'mode' | 'tone' | 'tooltipProps'>,
diff --git a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
index a8b11cd8008..7029c83fc3a 100644
--- a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
+++ b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
@@ -3,7 +3,7 @@ import {PreviewValue, SanityDocument} from '@sanity/types'
 import {Box, ButtonTone, Flex} from '@sanity/ui'
 import React from 'react'
 import styled, {css} from 'styled-components'
-import {TextWithTone, useDocumentStatusTimeAgo} from 'sanity'
+import {TextWithTone, useDocumentStatusTimeAgo} from '../../core'
 
 export interface DocumentStatusProps {
   draft?: PreviewValue | Partial<SanityDocument> | null
diff --git a/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx b/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
index 5280244f958..24a4b32cdb6 100644
--- a/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
+++ b/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
@@ -2,7 +2,7 @@
 import {Card, Layer, Spinner, Text} from '@sanity/ui'
 import React from 'react'
 import styled, {css} from 'styled-components'
-import {useTranslation} from 'sanity'
+import {useTranslation} from '../../core'
 
 // Enable to force debug background
 const DEBUG_MODE = false

From 3d25aa637114846c3cbd893c0cb4d184f445c523 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 6 Dec 2023 17:18:42 +0000
Subject: [PATCH 039/163] fix: hide loading text in generic loader by default,
 tweak timings, update test snapshots

---
 .../inputs/ReferenceInput/ReferenceItem.tsx   |  2 +-
 .../ArrayOfObjectsInput/List/PreviewItem.tsx  |  2 +-
 .../inputs/files/ImageInput/ImagePreview.tsx  |  4 +-
 .../files/ImageToolInput/ImageToolInput.tsx   |  2 +-
 .../ImageToolInput/imagetool/ImageTool.tsx    |  2 +-
 .../studio/assetSource/image/AssetThumb.tsx   |  2 +-
 .../assetSource/shared/AssetDeleteDialog.tsx  |  2 +-
 .../assetSource/shared/AssetUsageDialog.tsx   |  2 +-
 .../authStore/createLoginComponent.tsx        |  2 +-
 .../sanity/src/core/studio/Studio.test.tsx    |  6 +--
 .../sanity/src/core/studio/StudioLayout.tsx   |  2 +-
 .../navbar/new-document/NewDocumentList.tsx   |  2 +-
 .../navbar/resources/ResourcesMenuItems.tsx   |  2 +-
 .../asset/preview/ImageReferencePreview.tsx   |  2 +-
 .../workspace/WorkspaceAuth/WorkspaceAuth.tsx |  2 +-
 .../components/list/CommentsListStatus.tsx    |  3 +-
 .../src/components/mentions/MentionsMenu.tsx  |  2 +-
 .../ConfirmDeleteDialog.tsx                   |  2 +-
 .../documentPanel/documentViews/FormView.tsx  |  2 +-
 .../inspectors/changes/ChangesInspector.tsx   |  2 +-
 .../desk/panes/document/timeline/timeline.tsx |  2 +-
 .../documentList/DocumentListPaneContent.tsx  |  2 +-
 .../src/desk/panes/loading/LoadingPane.tsx    |  2 +-
 .../src/ui/loadingBlock/LoadingBlock.tsx      | 40 ++++++++++++-------
 24 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
index b2ace53270d..25bc863d850 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
@@ -336,7 +336,7 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
               renderPreview={renderPreview}
               type={schemaType}
             />
-            {resolvingInitialValue && <LoadingBlock fill hideText />}
+            {resolvingInitialValue && <LoadingBlock fill />}
           </ReferenceLinkCard>
         )}
       </RowLayout>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
index c486253910c..967a6f9673e 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
@@ -176,7 +176,7 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
           skipVisibilityCheck: true,
         })}
 
-        {resolvingInitialValue && <LoadingBlock fill hideText />}
+        {resolvingInitialValue && <LoadingBlock fill />}
       </Card>
     </RowLayout>
   )
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
index de67d53a236..a0738c89849 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
@@ -67,7 +67,9 @@ export function ImagePreview(props: ComponentProps<typeof Card> & Props) {
   return (
     <RatioBox {...rest} ref={setRootElement} style={{height: rootHeight}} tone="transparent">
       <Card data-container tone="inherit">
-        {!isLoaded && <OverlayComponent cardTone="transparent" drag content={<LoadingBlock />} />}
+        {!isLoaded && (
+          <OverlayComponent cardTone="transparent" drag content={<LoadingBlock showText />} />
+        )}
         <img
           src={src}
           data-testid="hotspot-image-input"
diff --git a/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
index 74b3cfd915c..3b19cb273d4 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
@@ -143,7 +143,7 @@ export function ImageToolInput(props: ImageToolInputProps) {
                       </Text>
                     </Card>
                   ) : (
-                    <LoadingBlock />
+                    <LoadingBlock showText />
                   )}
                 </LoadStatus>
               )}
diff --git a/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx b/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx
index 736559996fd..009d32e45a3 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx
@@ -15,7 +15,7 @@ export function ImageTool(props: ImageToolProps) {
     <ImageLoader src={props.src}>
       {({isLoading, image, error}) => {
         if (isLoading) {
-          return <LoadingBlock />
+          return <LoadingBlock showText />
         }
         if (error) {
           return <div>{error.message}</div>
diff --git a/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx b/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
index b35cafd86d8..ffe7928c744 100644
--- a/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
@@ -217,7 +217,7 @@ export const AssetThumb = React.memo(function AssetThumb(props: AssetProps) {
       >
         <Container __unstable_checkered>
           <Image alt={originalFilename} src={imageUrl} onClick={onClick} data-id={_id} />
-          {isDeleting && <LoadingBlock hideText />}
+          {isDeleting && <LoadingBlock />}
         </Container>
       </Button>
       <MenuContainer>
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
index 10ee60bfb0a..d4ce2192e01 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
@@ -63,7 +63,7 @@ export function AssetDeleteDialog({
     >
       {isLoading ? (
         <Box padding={4}>
-          <LoadingBlock />
+          <LoadingBlock showText />
         </Box>
       ) : (
         <Stack
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
index dd93ecf6bfa..ebca73e4f3d 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
@@ -37,7 +37,7 @@ export function AssetUsageDialog({asset, assetType, onClose}: UsageDialogProps)
       width={1}
     >
       {isLoading ? (
-        <LoadingBlock />
+        <LoadingBlock showText />
       ) : (
         <AssetUsageList
           asset={asset}
diff --git a/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx b/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx
index 4e21846c8a2..caed5bbaf71 100644
--- a/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx
+++ b/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx
@@ -132,7 +132,7 @@ export function createLoginComponent({
     }, [redirectUrl])
 
     if (loading) {
-      return <LoadingBlock />
+      return <LoadingBlock showText />
     }
 
     return (
diff --git a/packages/sanity/src/core/studio/Studio.test.tsx b/packages/sanity/src/core/studio/Studio.test.tsx
index 29184d34a7a..edbac43ef86 100644
--- a/packages/sanity/src/core/studio/Studio.test.tsx
+++ b/packages/sanity/src/core/studio/Studio.test.tsx
@@ -45,7 +45,7 @@ describe('Studio', () => {
       const html = renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))
 
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-fHuKJW itgnHu\\"><div data-ui=\\"Spinner\\" class=\\"sc-bdfCDU hfXQlG sc-crrtmM buOrjb sc-dtTHgf iZjVSi\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div><div data-ui=\\"Text\\" class=\\"sc-bdfCDU eqNesd sc-dkIYMQ kgdgeT\\"><span>Loading</span></div></div>"`,
+        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-pGaPU brzEDu sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -62,7 +62,7 @@ describe('Studio', () => {
     try {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-fHuKJW itgnHu\\"><div data-ui=\\"Spinner\\" class=\\"sc-bdfCDU hfXQlG sc-crrtmM buOrjb sc-dtTHgf iZjVSi\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div><div data-ui=\\"Text\\" class=\\"sc-bdfCDU eqNesd sc-dkIYMQ kgdgeT\\"><span>Loading</span></div></div>"`,
+        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-pGaPU brzEDu sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -82,7 +82,7 @@ describe('Studio', () => {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       node.innerHTML = html
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-fHuKJW itgnHu\\"><div data-ui=\\"Spinner\\" class=\\"sc-bdfCDU hfXQlG sc-crrtmM buOrjb sc-dtTHgf iZjVSi\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div><div data-ui=\\"Text\\" class=\\"sc-bdfCDU eqNesd sc-dkIYMQ kgdgeT\\"><span>Loading</span></div></div>"`,
+        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-pGaPU brzEDu sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
       document.head.innerHTML += sheet.getStyleTags()
 
diff --git a/packages/sanity/src/core/studio/StudioLayout.tsx b/packages/sanity/src/core/studio/StudioLayout.tsx
index 09b36f8d73c..cf655d0f548 100644
--- a/packages/sanity/src/core/studio/StudioLayout.tsx
+++ b/packages/sanity/src/core/studio/StudioLayout.tsx
@@ -191,7 +191,7 @@ export function StudioLayoutComponent() {
                 activeTool.router?.__unsafe_disableScopedSearchParams
               }
             >
-              <Suspense fallback={<LoadingBlock />}>
+              <Suspense fallback={<LoadingBlock showText />}>
                 {createElement(activeTool.component, {tool: activeTool})}
               </Suspense>
             </RouteScope>
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx
index e720573fa5e..e18d6c2bbdb 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx
@@ -59,7 +59,7 @@ export function NewDocumentList(props: NewDocumentListProps) {
 
   // Render loading state
   if (loading) {
-    return <LoadingBlock />
+    return <LoadingBlock showText />
   }
 
   // Render no search results state
diff --git a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
index 4677cae9bb9..1c5483da26f 100644
--- a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
@@ -18,7 +18,7 @@ export function ResourcesMenuItems({error, isLoading, value}: ResourcesMenuItemP
   const {t} = useTranslation()
 
   if (isLoading) {
-    return <LoadingBlock />
+    return <LoadingBlock showText />
   }
 
   const fallbackLinks = (
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx
index ea29990a974..4c507e405da 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx
@@ -46,7 +46,7 @@ function ImagePreview({asset}: {asset: ImageAsset}) {
 
   return (
     <Container __unstable_checkered border>
-      {!loaded && <LoadingBlock fill />}
+      {!loaded && <LoadingBlock fill showText />}
       <Image onLoad={handleLoad} src={imageUrl} />
     </Container>
   )
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx
index 4582c54fe10..de49763a31f 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx
@@ -28,7 +28,7 @@ export function WorkspaceAuth() {
   const handleBack = useCallback(() => setSelectedWorkspaceName(null), [])
   const {t} = useTranslation()
 
-  if (!authStates) return <LoadingBlock />
+  if (!authStates) return <LoadingBlock showText />
 
   if (LoginComponent && selectedWorkspace) {
     return (
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx
index e4a48569d1f..a519924f441 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx
@@ -52,7 +52,8 @@ export function CommentsListStatus(props: CommentsListStatusProps) {
   }
 
   if (loading) {
-    return <LoadingBlock title="Loading comments" />
+    // @todo: localize
+    return <LoadingBlock showText title="Loading comments" />
   }
 
   if (hasNoComments) {
diff --git a/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx b/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx
index 2774aa5112d..869c7a346cf 100644
--- a/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx
+++ b/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx
@@ -98,7 +98,7 @@ export const MentionsMenu = React.forwardRef(function MentionsMenu(
   if (loading) {
     return (
       <Root>
-        <LoadingBlock />
+        <LoadingBlock showText />
       </Root>
     )
   }
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx
index a28eb62f65e..0db77200947 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx
@@ -111,7 +111,7 @@ export function ConfirmDeleteDialog({
           />
         ) : (
           <LoadingContainer data-testid="loading-container">
-            <LoadingBlock title={t('confirm-delete-dialog.loading.text')} />
+            <LoadingBlock showText title={t('confirm-delete-dialog.loading.text')} />
           </LoadingContainer>
         )}
       </DialogBody>
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx
index 95948e93bb1..aec8d7154e1 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx
@@ -147,7 +147,7 @@ export const FormView = forwardRef<HTMLDivElement, FormViewProps>(function FormV
   // )
 
   if (!ready) {
-    return <LoadingBlock />
+    return <LoadingBlock showText />
   }
 
   return (
diff --git a/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx b/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx
index b4655b5d671..fa206f52bea 100644
--- a/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx
+++ b/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx
@@ -130,7 +130,7 @@ function Content({
   }
 
   if (loading) {
-    return <LoadingBlock />
+    return <LoadingBlock showText />
   }
 
   if (!diff) {
diff --git a/packages/sanity/src/desk/panes/document/timeline/timeline.tsx b/packages/sanity/src/desk/panes/document/timeline/timeline.tsx
index 9be3b0cbc88..478042343cb 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timeline.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timeline.tsx
@@ -57,7 +57,7 @@ export const Timeline = ({
             timestamp={chunk.endTimestamp}
             type={chunk.type}
           />
-          {activeIndex === filteredChunks.length - 1 && hasMoreChunks && <LoadingBlock hideText />}
+          {activeIndex === filteredChunks.length - 1 && hasMoreChunks && <LoadingBlock />}
         </Box>
       )
     },
diff --git a/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx b/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
index 463cbb6a7d8..0b6e7daadaf 100644
--- a/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
+++ b/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
@@ -133,7 +133,7 @@ export function DocumentListPaneContent(props: DocumentListPaneContentProps) {
             value={item}
           />
 
-          {showSpinner && <LoadingBlock hideText />}
+          {showSpinner && <LoadingBlock />}
 
           {showMaxItemsMessage && (
             <Box marginY={1} paddingX={3} paddingY={4}>
diff --git a/packages/sanity/src/desk/panes/loading/LoadingPane.tsx b/packages/sanity/src/desk/panes/loading/LoadingPane.tsx
index 25c1acab15d..5d3160df9a5 100644
--- a/packages/sanity/src/desk/panes/loading/LoadingPane.tsx
+++ b/packages/sanity/src/desk/panes/loading/LoadingPane.tsx
@@ -92,7 +92,7 @@ export const LoadingPane = memo((props: LoadingPaneProps) => {
       justify="center"
       ref={setContentElement}
     >
-      <LoadingBlock title={title || currentMessage} />
+      <LoadingBlock showText title={title || currentMessage} />
     </Content>
   )
 
diff --git a/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx b/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
index 24a4b32cdb6..adf111ea661 100644
--- a/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
+++ b/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
@@ -7,11 +7,17 @@ import {useTranslation} from '../../core'
 // Enable to force debug background
 const DEBUG_MODE = false
 
+// Duration to wait before initial spinner appears
+const SPINNER_DELAY = 750 // ms
+
+// Duration to wait before text appears (if enabled)
+const TEXT_DELAY = 2000 // ms
+
 interface LoadingTestProps {
   /** Absolutely positions this component when `true`. */
   fill?: boolean
-  /** Optionally hide loading title. If `true`, the spinner will remain centered. */
-  hideText?: boolean
+  /** Optionally show loading title. If `true`, both text and spinner will appear and animate after an initial delay */
+  showText?: boolean
   /**
    * Text to display underneath the spinner.  If omitted, will default to `'Loading'`.
    * If providing a value, avoid using trailing ellipses.
@@ -81,8 +87,8 @@ const StyledSpinner = styled(Spinner)<{$animatePosition: boolean}>(({$animatePos
       }
     }
     animation: ${$animatePosition
-      ? '500ms ease-out 500ms 1 normal both running fadeIn, 750ms ease-out 2000ms 1 normal both running slideUp'
-      : '500ms ease-out 500ms 1 normal both running fadeIn'};
+      ? `500ms ease-out ${SPINNER_DELAY}ms 1 normal both running fadeIn, 750ms ease-out ${TEXT_DELAY}ms 1 normal both running slideUp`
+      : `500ms ease-out ${SPINNER_DELAY}ms 1 normal both running fadeIn`};
   `
 })
 
@@ -104,25 +110,29 @@ const StyledText = styled(Text)`
     }
   }
   animation:
-    1500ms ease-out 2000ms 1 normal both running fadeIn,
-    750ms ease-out 2000ms 1 normal both running slideDown;
+    1500ms ease-out ${TEXT_DELAY}ms 1 normal both running fadeIn,
+    750ms ease-out ${TEXT_DELAY}ms 1 normal both running slideDown;
 `
 
 /**
  * A generic loading container which displays a spinner and text.
  * The spinner won't initially be visible and fades in after a short delay.
  */
-export function LoadingBlock({fill, hideText, title}: LoadingTestProps) {
-  const {t} = useTranslation()
-
+export function LoadingBlock({fill, showText, title}: LoadingTestProps) {
   return (
     <StyledCard $fill={fill} as={fill ? Layer : 'div'}>
-      <StyledSpinner $animatePosition={!hideText} muted />
-      {!hideText && (
-        <StyledText muted size={1}>
-          {title || t('common.loading')}
-        </StyledText>
-      )}
+      <StyledSpinner $animatePosition={!!showText} muted />
+      {showText && <LoadingText title={title} />}
     </StyledCard>
   )
 }
+
+function LoadingText({title}: {title?: string | null}) {
+  const {t} = useTranslation()
+
+  return (
+    <StyledText muted size={1}>
+      {title || t('common.loading')}
+    </StyledText>
+  )
+}

From 349748e1392c3520da63cc640641167d594eb9f1 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 6 Dec 2023 17:31:16 +0000
Subject: [PATCH 040/163] fix: minor regression with menu item spacing

---
 .../sanity/src/ui/__workshop__/MenuItemStory.tsx     |  2 +-
 packages/sanity/src/ui/menuItem/MenuItem.tsx         | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx b/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
index 25e9984f21a..df4f134c2cf 100644
--- a/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
+++ b/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 import {MenuItem} from '../menuItem'
 
 const HOTKEYS = ['Ctrl', 'Alt', 'P']
-const AVATAR_INITIALS = 'A.W.'
+const AVATAR_INITIALS = 'AW'
 
 export default function MenuItemStory() {
   const text = useString('Text', 'Text', 'Props') || ''
diff --git a/packages/sanity/src/ui/menuItem/MenuItem.tsx b/packages/sanity/src/ui/menuItem/MenuItem.tsx
index 2a706b45c67..f28f33a671c 100644
--- a/packages/sanity/src/ui/menuItem/MenuItem.tsx
+++ b/packages/sanity/src/ui/menuItem/MenuItem.tsx
@@ -75,17 +75,19 @@ export const MenuItem = forwardRef(function MenuItem(
     return (
       <Flex align="center" gap={2}>
         {preview && (
-          <PreviewWrapper paddingX={1}>
+          <PreviewWrapper>
             <Flex align="center" height="fill" justify="center">
               {preview}
             </Flex>
           </PreviewWrapper>
         )}
         {icon && (
-          <Text size={FONT_SIZE}>
-            {isValidElement(icon) && icon}
-            {isValidElementType(icon) && createElement(icon)}
-          </Text>
+          <Box paddingRight={1}>
+            <Text size={FONT_SIZE}>
+              {isValidElement(icon) && icon}
+              {isValidElementType(icon) && createElement(icon)}
+            </Text>
+          </Box>
         )}
         {text && (
           <Stack flex={1} space={2}>

From 60cb5895c038a93d72146ddcf0a853a9b9d38106 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 6 Dec 2023 17:41:54 +0000
Subject: [PATCH 041/163] fix: remove extraneous padding on manage members menu
 item

---
 .../src/core/studio/components/navbar/presence/PresenceMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
index 3350259e31d..177ad98d4be 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
@@ -101,7 +101,7 @@ export function PresenceMenu() {
             </Box>
           )}
 
-          <FooterStack space={1} paddingBottom={1}>
+          <FooterStack space={1}>
             <MenuDivider />
 
             <MenuItem

From bfd18b34b670d0614888d8f3435cf295f5cd2c92 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 6 Dec 2023 17:57:52 +0000
Subject: [PATCH 042/163] fix: use localized relative time hook

---
 .../src/core/hooks/useDocumentStatusTimeAgo.ts      | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts b/packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts
index 8efbea1dfb7..7493d47119c 100644
--- a/packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts
+++ b/packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts
@@ -1,5 +1,5 @@
 import {PreviewValue, SanityDocument} from '@sanity/types'
-import {useTimeAgo} from './useTimeAgo'
+import {useRelativeTime} from './useRelativeTime'
 
 /**
  * React hook which returns a human readable string of the provided document's status.
@@ -19,12 +19,19 @@ export function useDocumentStatusTimeAgo({
   const draftUpdatedAt = draft && '_updatedAt' in draft ? draft._updatedAt : ''
   const publishedUpdatedAt = published && '_updatedAt' in published ? published._updatedAt : ''
 
-  const updatedDateTimeAgo = useTimeAgo(draftUpdatedAt || '', {minimal: true, agoSuffix: true})
-  const publishedTimeAgo = useTimeAgo(publishedUpdatedAt || '', {minimal: true, agoSuffix: true})
+  const updatedDateTimeAgo = useRelativeTime(draftUpdatedAt || '', {
+    minimal: true,
+    useTemporalPhrase: true,
+  })
+  const publishedTimeAgo = useRelativeTime(publishedUpdatedAt || '', {
+    minimal: true,
+    useTemporalPhrase: true,
+  })
 
   let label
 
   // Published with no changes
+  // @todo: localize correctly
   if (!draftUpdatedAt && publishedTimeAgo) {
     label = `Published${hidePublishedDate ? '' : ` ${publishedTimeAgo}`}`
   }

From 54afefb12f22fc7c06e45b302977402b8d625ef8 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 6 Dec 2023 23:22:28 +0000
Subject: [PATCH 043/163] feat: align search popover overlay background with
 dialog

---
 .../components/navbar/search/components/SearchPopover.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
index 80c4bd61651..ec9dc3b104d 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
@@ -29,7 +29,7 @@ export interface SearchPopoverProps {
 const Y_POSITION = 8 // px
 
 const Overlay = styled.div`
-  background-color: ${({theme}: {theme: Theme}) => theme.sanity.color.base.shadow.ambient};
+  background-color: ${({theme}: {theme: Theme}) => theme.sanity.color.base.shadow.umbra};
   bottom: 0;
   left: 0;
   position: absolute;

From e559fa6f00650ce821f255f1e37bab72ab9618fc Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 6 Dec 2023 23:52:23 +0000
Subject: [PATCH 044/163] fix: ensure field names correctly truncate in search
 filter tooltips

---
 .../filters/addFilter/items/FilterTooltip.tsx  | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
index 1a0221672fe..858decfc8b8 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
@@ -1,7 +1,8 @@
-import {Card, Code, Flex, Inline, Stack, Text} from '@sanity/ui'
+import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {startCase, uniq} from 'lodash'
 import React, {ReactElement, useMemo} from 'react'
 import {TooltipWithNodes} from '../../../../../../../../../ui'
+import {TextWithTone} from '../../../../../../../../components'
 import {useSchema} from '../../../../../../../../hooks'
 import {isNonNullable, truncateString} from '../../../../../../../../util'
 import {useSearchState} from '../../../../contexts/search/useSearchState'
@@ -81,15 +82,18 @@ export function FilterTooltip({
           <Stack space={4}>
             {/* Field name */}
             {fieldDefinition && (
-              <Stack space={2}>
+              <Stack space={3}>
                 <Text muted size={1} weight="medium">
                   {t('search.filter-field-tooltip-name')}
                 </Text>
-                <Inline>
-                  <Card tone="caution" padding={1} radius={2}>
-                    <Code size={1}>{fieldDefinition?.name}</Code>
-                  </Card>
-                </Inline>
+                <TextWithTone
+                  size={1}
+                  style={{fontFamily: 'monospace'}}
+                  tone="primary"
+                  textOverflow="ellipsis"
+                >
+                  {fieldDefinition?.name}
+                </TextWithTone>
               </Stack>
             )}
 

From 0393b49a5cb0148e41a5e304faab39c68a0b143a Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 7 Dec 2023 00:19:43 +0000
Subject: [PATCH 045/163] fix: use correct focus ring offset + width for list
 panes + comment pte input

---
 .../src/components/pte/comment-input/CommentInputInner.tsx   | 5 +----
 .../src/desk/panes/documentList/DocumentListPaneContent.tsx  | 1 -
 packages/sanity/src/desk/panes/list/ListPaneContent.tsx      | 1 -
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx
index 1b3b1385e6c..5d960507234 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx
@@ -36,10 +36,7 @@ const RootCard = styled(Card)(({theme}) => {
         min-height: 1em;
       }
 
-      box-shadow:
-        inset 0 0 0 1px var(--card-border-color),
-        0 0 0 1px var(--card-bg-color),
-        0 0 0 3px var(--card-focus-ring-color);
+      box-shadow: inset 0 0 0 1px var(--card-focus-ring-color);
     }
 
     &:focus-within {
diff --git a/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx b/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
index 0b6e7daadaf..6bc17b7638f 100644
--- a/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
+++ b/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
@@ -239,7 +239,6 @@ export function DocumentListPaneContent(props: DocumentListPaneContentProps) {
             activeItemDataAttr="data-hovered"
             ariaLabel={paneTitle}
             canReceiveFocus
-            focusRingOffset={-3}
             inputElement={searchInputElement}
             itemHeight={51}
             items={items}
diff --git a/packages/sanity/src/desk/panes/list/ListPaneContent.tsx b/packages/sanity/src/desk/panes/list/ListPaneContent.tsx
index c7e0c291500..6b6383e4468 100644
--- a/packages/sanity/src/desk/panes/list/ListPaneContent.tsx
+++ b/packages/sanity/src/desk/panes/list/ListPaneContent.tsx
@@ -102,7 +102,6 @@ export function ListPaneContent(props: ListPaneContentProps) {
           activeItemDataAttr="data-hovered"
           ariaLabel={title}
           canReceiveFocus
-          focusRingOffset={-3}
           getItemDisabled={getItemDisabled}
           itemHeight={51}
           items={items}

From 17d06a20531144d098a83cebfb12fe40404c3edc Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 7 Dec 2023 00:25:56 +0000
Subject: [PATCH 046/163] fix: use single pixel border for document banners

---
 .../panes/document/documentPanel/DeletedDocumentBanner.tsx    | 4 ++--
 .../panes/document/documentPanel/PermissionCheckBanner.tsx    | 2 +-
 .../panes/document/documentPanel/ReferenceChangedBanner.tsx   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx
index 082182a9245..4b209fdbaed 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx
@@ -4,9 +4,9 @@ import {ReadOnlyIcon} from '@sanity/icons'
 import styled from 'styled-components'
 import {useDocumentPane} from '../useDocumentPane'
 import {Button} from '../../../../ui'
+import {structureLocaleNamespace} from '../../../i18n'
 import {useDocumentOperation, useTranslation} from 'sanity'
 import {useRouter} from 'sanity/router'
-import {structureLocaleNamespace} from '../../../i18n'
 
 const Root = styled(Card)`
   position: relative;
@@ -30,7 +30,7 @@ export function DeletedDocumentBanner({revisionId}: DeletedDocumentBannerProps)
   const {t} = useTranslation(structureLocaleNamespace)
 
   return (
-    <Root data-testid="deleted-document-banner" shadow={1} tone="transparent">
+    <Root borderBottom data-testid="deleted-document-banner" tone="transparent">
       <Container paddingX={4} paddingY={revisionId ? 2 : 3} sizing="border" width={1}>
         <Flex align="center">
           <Text size={1}>
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/PermissionCheckBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/PermissionCheckBanner.tsx
index e46c8bd2d0e..51cdbfa0863 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/PermissionCheckBanner.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/PermissionCheckBanner.tsx
@@ -30,7 +30,7 @@ export function PermissionCheckBanner({granted, requiredPermission}: PermissionC
     )
 
   return (
-    <Root data-testid="permission-check-banner" shadow={1} tone="transparent">
+    <Root borderBottom data-testid="permission-check-banner" tone="transparent">
       <Container paddingX={4} paddingY={3} sizing="border" width={1}>
         <Flex align="flex-start">
           <Text size={1}>
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/ReferenceChangedBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/ReferenceChangedBanner.tsx
index def3618af5f..2469a2aff8e 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/ReferenceChangedBanner.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/ReferenceChangedBanner.tsx
@@ -141,7 +141,7 @@ export const ReferenceChangedBanner = memo(() => {
   if (shouldHide) return null
 
   return (
-    <Root shadow={1} tone="caution" data-testid="reference-changed-banner">
+    <Root borderBottom data-testid="reference-changed-banner" tone="caution">
       <Container paddingX={4} paddingY={2} sizing="border" width={1}>
         <Flex align="center">
           <Text size={1}>

From d88bf76e8a6b2fd562659cf9c4e1c75ff24ad93f Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 7 Dec 2023 00:46:19 +0000
Subject: [PATCH 047/163] feat: update font styles for no search results +
 insufficient permissions messages

---
 .../core/components/InsufficientPermissionsMessage.tsx    | 8 +++++---
 .../components/navbar/search/components/NoResults.tsx     | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx b/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
index 0868d1be071..04ba173bdc2 100644
--- a/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
+++ b/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
@@ -58,13 +58,15 @@ export function InsufficientPermissionsMessage({
   return (
     <Box>
       <Inline space={2}>
-        <Text size={1}>
+        <Text size={0}>
           <AccessDeniedIcon />
         </Text>
-        <Text weight="medium">{t('insufficient-permissions-message.title')}</Text>
+        <Text size={1} weight="medium">
+          {t('insufficient-permissions-message.title')}
+        </Text>
       </Inline>
       <Inline marginTop={4}>
-        <Text size={1} weight="medium">
+        <Text size={1}>
           <Translate
             i18nKey="insufficient-permissions-message.not-authorized-explanation"
             t={t}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/NoResults.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/NoResults.tsx
index 3bac0bd996e..bf1baa9f39e 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/NoResults.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/NoResults.tsx
@@ -8,7 +8,7 @@ export function NoResults() {
   return (
     <Container width={0}>
       <Stack aria-live="assertive" space={4} paddingX={4} paddingY={5}>
-        <Text align="center" muted weight="medium">
+        <Text align="center" muted size={1} weight="medium">
           {t('search.no-results-title')}
         </Text>
         <Text align="center" muted size={1}>

From c106d1eebd1d2074f862b744a62098a6a6fe6e37 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 7 Dec 2023 02:08:48 +0000
Subject: [PATCH 048/163] feat: DRY document banners and update styles, create
 dedicated spacer button

---
 .../documentPanel/DeletedDocumentBanner.tsx   | 55 -----------
 .../document/documentPanel/DocumentPanel.tsx  |  4 +-
 .../documentPanel/PermissionCheckBanner.tsx   | 55 -----------
 .../document/documentPanel/banners/Banner.tsx | 49 +++++++++
 .../banners/DeletedDocumentBanner.tsx         | 45 +++++++++
 .../banners/PermissionCheckBanner.tsx         | 44 +++++++++
 .../{ => banners}/ReferenceChangedBanner.tsx  | 99 ++++++-------------
 .../document/documentPanel/banners/index.ts   |  3 +
 .../document/statusBar/DocumentStatusBar.tsx  | 18 +---
 .../src/ui/spacerButton/SpacerButton.tsx      | 30 ++++++
 packages/sanity/src/ui/spacerButton/index.ts  |  1 +
 11 files changed, 205 insertions(+), 198 deletions(-)
 delete mode 100644 packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx
 delete mode 100644 packages/sanity/src/desk/panes/document/documentPanel/PermissionCheckBanner.tsx
 create mode 100644 packages/sanity/src/desk/panes/document/documentPanel/banners/Banner.tsx
 create mode 100644 packages/sanity/src/desk/panes/document/documentPanel/banners/DeletedDocumentBanner.tsx
 create mode 100644 packages/sanity/src/desk/panes/document/documentPanel/banners/PermissionCheckBanner.tsx
 rename packages/sanity/src/desk/panes/document/documentPanel/{ => banners}/ReferenceChangedBanner.tsx (69%)
 create mode 100644 packages/sanity/src/desk/panes/document/documentPanel/banners/index.ts
 create mode 100644 packages/sanity/src/ui/spacerButton/SpacerButton.tsx
 create mode 100644 packages/sanity/src/ui/spacerButton/index.ts

diff --git a/packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx
deleted file mode 100644
index 4b209fdbaed..00000000000
--- a/packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, {useCallback} from 'react'
-import {Card, Container, Flex, Text} from '@sanity/ui'
-import {ReadOnlyIcon} from '@sanity/icons'
-import styled from 'styled-components'
-import {useDocumentPane} from '../useDocumentPane'
-import {Button} from '../../../../ui'
-import {structureLocaleNamespace} from '../../../i18n'
-import {useDocumentOperation, useTranslation} from 'sanity'
-import {useRouter} from 'sanity/router'
-
-const Root = styled(Card)`
-  position: relative;
-  z-index: 50;
-`
-
-interface DeletedDocumentBannerProps {
-  revisionId?: string | null
-}
-
-export function DeletedDocumentBanner({revisionId}: DeletedDocumentBannerProps) {
-  const {documentId, documentType} = useDocumentPane()
-  const {restore} = useDocumentOperation(documentId, documentType)
-  const {navigateIntent} = useRouter()
-  const handleRestore = useCallback(() => {
-    if (revisionId) {
-      restore.execute(revisionId)
-      navigateIntent('edit', {id: documentId, type: documentType})
-    }
-  }, [documentId, documentType, navigateIntent, restore, revisionId])
-  const {t} = useTranslation(structureLocaleNamespace)
-
-  return (
-    <Root borderBottom data-testid="deleted-document-banner" tone="transparent">
-      <Container paddingX={4} paddingY={revisionId ? 2 : 3} sizing="border" width={1}>
-        <Flex align="center">
-          <Text size={1}>
-            <ReadOnlyIcon />
-          </Text>
-
-          <Flex align="center" gap={2} flex={1} marginLeft={3}>
-            <Text size={1}>{t('banners.deleted-document-banner.text')}</Text>
-            {revisionId && (
-              <Button
-                mode="bleed"
-                tone="primary"
-                onClick={handleRestore}
-                text={t('banners.deleted-document-banner.restore-button.text')}
-              />
-            )}
-          </Flex>
-        </Flex>
-      </Container>
-    </Root>
-  )
-}
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/DocumentPanel.tsx b/packages/sanity/src/desk/panes/document/documentPanel/DocumentPanel.tsx
index f77cf107bd4..89eeee05c5f 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/DocumentPanel.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/DocumentPanel.tsx
@@ -6,9 +6,7 @@ import {useDocumentPane} from '../useDocumentPane'
 import {useDeskTool} from '../../../useDeskTool'
 import {DocumentInspectorPanel} from '../documentInspector'
 import {InspectDialog} from '../inspectDialog'
-import {DeletedDocumentBanner} from './DeletedDocumentBanner'
-import {ReferenceChangedBanner} from './ReferenceChangedBanner'
-import {PermissionCheckBanner} from './PermissionCheckBanner'
+import {DeletedDocumentBanner, PermissionCheckBanner, ReferenceChangedBanner} from './banners'
 import {FormView} from './documentViews'
 import {ScrollContainer, useTimelineSelector, VirtualizerScrollInstanceProvider} from 'sanity'
 
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/PermissionCheckBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/PermissionCheckBanner.tsx
deleted file mode 100644
index 51cdbfa0863..00000000000
--- a/packages/sanity/src/desk/panes/document/documentPanel/PermissionCheckBanner.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react'
-import {Box, Card, Container, Flex, Text} from '@sanity/ui'
-import {ReadOnlyIcon} from '@sanity/icons'
-import styled from 'styled-components'
-import {structureLocaleNamespace} from '../../../i18n'
-import {Translate, useCurrentUser, useListFormat, useTranslation} from 'sanity'
-
-const Root = styled(Card)`
-  position: relative;
-  z-index: 50;
-`
-
-interface PermissionCheckBannerProps {
-  granted: boolean
-  requiredPermission: 'update' | 'create'
-}
-
-export function PermissionCheckBanner({granted, requiredPermission}: PermissionCheckBannerProps) {
-  const currentUser = useCurrentUser()
-  const listFormat = useListFormat({style: 'short'})
-  const {t} = useTranslation(structureLocaleNamespace)
-
-  if (granted) return null
-
-  const roleTitles = (currentUser?.roles || []).map((role) => role.title)
-  const roles = listFormat
-    .formatToParts(roleTitles)
-    .map((part) =>
-      part.type === 'element' ? <code key={part.value}>{part.value}</code> : part.value,
-    )
-
-  return (
-    <Root borderBottom data-testid="permission-check-banner" tone="transparent">
-      <Container paddingX={4} paddingY={3} sizing="border" width={1}>
-        <Flex align="flex-start">
-          <Text size={1}>
-            <ReadOnlyIcon />
-          </Text>
-
-          <Box flex={1} marginLeft={3}>
-            <Text size={1}>
-              <Translate
-                t={t}
-                i18nKey="banners.permission-check-banner.missing-permission"
-                components={{Roles: () => <>{roles}</>}}
-                values={{count: roles.length, roles: roleTitles}}
-                context={requiredPermission}
-              />
-            </Text>
-          </Box>
-        </Flex>
-      </Container>
-    </Root>
-  )
-}
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/banners/Banner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/banners/Banner.tsx
new file mode 100644
index 00000000000..1b8bbb194ed
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/documentPanel/banners/Banner.tsx
@@ -0,0 +1,49 @@
+import {ButtonTone, Card, CardTone, Container, Flex, Text} from '@sanity/ui'
+import React from 'react'
+import {Button} from '../../../../../ui'
+import {SpacerButton} from '../../../../../ui/spacerButton'
+
+interface BannerProps {
+  action?: {
+    as?: React.ElementType | keyof JSX.IntrinsicElements
+    icon?: React.ComponentType
+    onClick?: () => void
+    text: string
+    tone?: ButtonTone
+  }
+  content: React.ReactNode
+  icon?: React.ComponentType
+  tone?: CardTone
+}
+
+export function Banner(props: BannerProps) {
+  const {action, content, icon: Icon, tone = 'transparent', ...rest} = props
+
+  return (
+    <Card borderBottom paddingX={4} paddingY={2} tone={tone} {...rest}>
+      <Flex align="center" gap={3}>
+        {Icon && (
+          <Text size={0}>
+            <Icon />
+          </Text>
+        )}
+
+        <Flex align="center" flex={1} gap={2} paddingY={3}>
+          {content}
+        </Flex>
+
+        <SpacerButton />
+
+        {action && (
+          <Button
+            as={action?.as}
+            mode="ghost"
+            onClick={action?.onClick}
+            text={action.text}
+            tone={action.tone || 'default'}
+          />
+        )}
+      </Flex>
+    </Card>
+  )
+}
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/banners/DeletedDocumentBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/banners/DeletedDocumentBanner.tsx
new file mode 100644
index 00000000000..a9c3972ba34
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/documentPanel/banners/DeletedDocumentBanner.tsx
@@ -0,0 +1,45 @@
+import {ReadOnlyIcon} from '@sanity/icons'
+import {Text} from '@sanity/ui'
+import {useCallback} from 'react'
+import {structureLocaleNamespace} from '../../../../i18n'
+import {useDocumentPane} from '../../useDocumentPane'
+import {Banner} from './Banner'
+import {useDocumentOperation, useTranslation} from 'sanity'
+import {useRouter} from 'sanity/router'
+
+interface DeletedDocumentBannerProps {
+  revisionId?: string | null
+}
+
+export function DeletedDocumentBanner({revisionId}: DeletedDocumentBannerProps) {
+  const {documentId, documentType} = useDocumentPane()
+  const {restore} = useDocumentOperation(documentId, documentType)
+  const {navigateIntent} = useRouter()
+  const handleRestore = useCallback(() => {
+    if (revisionId) {
+      restore.execute(revisionId)
+      navigateIntent('edit', {id: documentId, type: documentType})
+    }
+  }, [documentId, documentType, navigateIntent, restore, revisionId])
+  const {t} = useTranslation(structureLocaleNamespace)
+
+  return (
+    <Banner
+      action={
+        revisionId
+          ? {
+              onClick: handleRestore,
+              text: t('banners.deleted-document-banner.restore-button.text'),
+            }
+          : undefined
+      }
+      content={
+        <Text size={1} weight="medium">
+          {t('banners.deleted-document-banner.text')}
+        </Text>
+      }
+      data-testid="deleted-document-banner"
+      icon={ReadOnlyIcon}
+    />
+  )
+}
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/banners/PermissionCheckBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/banners/PermissionCheckBanner.tsx
new file mode 100644
index 00000000000..5ce4d48bc94
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/documentPanel/banners/PermissionCheckBanner.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import {Text} from '@sanity/ui'
+import {ReadOnlyIcon} from '@sanity/icons'
+import {structureLocaleNamespace} from '../../../../i18n'
+import {Banner} from './Banner'
+import {Translate, useCurrentUser, useIntlListFormat, useTranslation} from 'sanity'
+
+interface PermissionCheckBannerProps {
+  granted: boolean
+  requiredPermission: 'update' | 'create'
+}
+
+export function PermissionCheckBanner({granted, requiredPermission}: PermissionCheckBannerProps) {
+  const currentUser = useCurrentUser()
+  const listFormat = useIntlListFormat({style: 'short'})
+  const {t} = useTranslation(structureLocaleNamespace)
+
+  if (granted) return null
+
+  const roleTitles = (currentUser?.roles || []).map((role) => role.title)
+  const roles = listFormat
+    .formatToParts(roleTitles)
+    .map((part) =>
+      part.type === 'element' ? <code key={part.value}>{part.value}</code> : part.value,
+    )
+
+  return (
+    <Banner
+      content={
+        <Text size={1} weight="medium">
+          <Translate
+            t={t}
+            i18nKey="banners.permission-check-banner.missing-permission"
+            components={{Roles: () => <>{roles}</>}}
+            values={{count: roles.length, roles: roleTitles}}
+            context={requiredPermission}
+          />
+        </Text>
+      }
+      data-testid="permission-check-banner"
+      icon={ReadOnlyIcon}
+    />
+  )
+}
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/ReferenceChangedBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/banners/ReferenceChangedBanner.tsx
similarity index 69%
rename from packages/sanity/src/desk/panes/document/documentPanel/ReferenceChangedBanner.tsx
rename to packages/sanity/src/desk/panes/document/documentPanel/banners/ReferenceChangedBanner.tsx
index 2469a2aff8e..9dc55bcd156 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/ReferenceChangedBanner.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/banners/ReferenceChangedBanner.tsx
@@ -1,32 +1,17 @@
-import {Box, Card, Container, Flex, Text} from '@sanity/ui'
+import {Text} from '@sanity/ui'
 import {WarningOutlineIcon, SyncIcon, CloseIcon} from '@sanity/icons'
 import React, {memo, useCallback, useMemo} from 'react'
-import styled from 'styled-components'
 import {fromString as pathFromString, get as pathGet} from '@sanity/util/paths'
 import {KeyedSegment, Reference} from '@sanity/types'
 import {debounceTime, map} from 'rxjs/operators'
 import {concat, Observable, of} from 'rxjs'
 import {useMemoObservable} from 'react-rx'
-import {RouterPaneGroup} from '../../../types'
-import {usePaneRouter} from '../../../components'
-import {Button} from '../../../../ui'
-import {structureLocaleNamespace} from '../../../i18n'
+import {RouterPaneGroup} from '../../../../types'
+import {usePaneRouter} from '../../../../components'
+import {structureLocaleNamespace} from '../../../../i18n'
+import {Banner} from './Banner'
 import {DocumentAvailability, useDocumentPreviewStore, getPublishedId, useTranslation} from 'sanity'
 
-const Root = styled(Card)`
-  position: relative;
-  z-index: 50;
-`
-
-const TextOneLine = styled(Text)`
-  & > * {
-    overflow: hidden;
-    overflow: clip;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-`
-
 interface ParentReferenceInfo {
   loading: boolean
   result?: {
@@ -141,55 +126,31 @@ export const ReferenceChangedBanner = memo(() => {
   if (shouldHide) return null
 
   return (
-    <Root borderBottom data-testid="reference-changed-banner" tone="caution">
-      <Container paddingX={4} paddingY={2} sizing="border" width={1}>
-        <Flex align="center">
-          <Text size={1}>
-            <WarningOutlineIcon />
-          </Text>
-
-          {referenceInfo.result?.refValue ? (
-            <>
-              <Box flex={1} marginLeft={3}>
-                <TextOneLine
-                  title={t('banners.reference-changed-banner.reason-changed.text')}
-                  size={1}
-                >
-                  {t('banners.reference-changed-banner.reason-changed.text')}
-                </TextOneLine>
-              </Box>
-              <Box marginLeft={3}>
-                <Button
-                  onClick={handleReloadReference}
-                  icon={SyncIcon}
-                  mode="ghost"
-                  text={t('banners.reference-changed-banner.reason-changed.reload-button.text')}
-                />
-              </Box>
-            </>
-          ) : (
-            <>
-              <Box flex={1} marginLeft={3}>
-                <TextOneLine
-                  title={t('banners.reference-changed-banner.reason-removed.text')}
-                  size={1}
-                >
-                  {t('banners.reference-changed-banner.reason-removed.text')}
-                </TextOneLine>
-              </Box>
-              <Box marginLeft={3}>
-                <Button
-                  as={BackLink}
-                  icon={CloseIcon}
-                  mode="ghost"
-                  text={t('banners.reference-changed-banner.reason-removed.close-button.text')}
-                />
-              </Box>
-            </>
-          )}
-        </Flex>
-      </Container>
-    </Root>
+    <Banner
+      action={
+        referenceInfo.result?.refValue
+          ? {
+              onClick: handleReloadReference,
+              icon: SyncIcon,
+              text: t('banners.reference-changed-banner.reason-changed.reload-button.text'),
+            }
+          : {
+              as: BackLink,
+              icon: CloseIcon,
+              text: t('banners.reference-changed-banner.reason-removed.close-button.text'),
+            }
+      }
+      data-testid="reference-changed-banner"
+      content={
+        <Text size={1} weight="medium">
+          {referenceInfo.result?.refValue
+            ? t('banners.reference-changed-banner.reason-changed.text')
+            : t('banners.reference-changed-banner.reason-removed.text')}
+        </Text>
+      }
+      icon={WarningOutlineIcon}
+      tone="caution"
+    />
   )
 })
 
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/banners/index.ts b/packages/sanity/src/desk/panes/document/documentPanel/banners/index.ts
new file mode 100644
index 00000000000..209d96f6784
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/documentPanel/banners/index.ts
@@ -0,0 +1,3 @@
+export * from './DeletedDocumentBanner'
+export * from './PermissionCheckBanner'
+export * from './ReferenceChangedBanner'
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
index 5811a20b805..bea60b79d87 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react'
 import styled from 'styled-components'
 import {Box, Flex} from '@sanity/ui'
-import {Button} from '../../../../ui'
+import {SpacerButton} from '../../../../ui/spacerButton'
 import {useDocumentPane} from '../useDocumentPane'
 import {DocumentStatusBarActions, HistoryStatusBarActions} from './DocumentStatusBarActions'
 import {DocumentSparkline} from './sparkline/DocumentSparkline'
@@ -16,14 +16,6 @@ const DocumentActionsFlex = styled(Flex)`
   max-width: 16em;
 `
 
-// This Hidden button prevents this status bar from shifting in height as both
-// <HistoryStatusBarActions /> and <DocumentStatusBarActions /> can return null.
-// @todo: find a more elegant solve to this layout shift problem
-const SpacerButton = styled(Button)`
-  pointer-events: none;
-  visibility: hidden;
-`
-
 export function DocumentStatusBar(props: DocumentStatusBarProps) {
   const {actionsBoxRef} = props
   const {badges, timelineStore} = useDocumentPane()
@@ -38,13 +30,7 @@ export function DocumentStatusBar(props: DocumentStatusBarProps) {
           <Box flex={[1, 2]}>{badges && <DocumentSparkline />}</Box>
 
           <DocumentActionsFlex flex={1} justify="flex-end" marginLeft={[1, 3]} ref={actionsBoxRef}>
-            <SpacerButton
-              aria-hidden
-              disabled
-              size="large"
-              // eslint-disable-next-line no-attribute-string-literals/no-attribute-string-literals
-              text="-"
-            />
+            <SpacerButton size="large" />
             {showingRevision ? <HistoryStatusBarActions /> : <DocumentStatusBarActions />}
           </DocumentActionsFlex>
         </Flex>
diff --git a/packages/sanity/src/ui/spacerButton/SpacerButton.tsx b/packages/sanity/src/ui/spacerButton/SpacerButton.tsx
new file mode 100644
index 00000000000..aa5c1dd3af9
--- /dev/null
+++ b/packages/sanity/src/ui/spacerButton/SpacerButton.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import {Button, ButtonProps} from '..'
+
+interface SpacerButtonProps {
+  size?: ButtonProps['size']
+}
+
+/**
+ * A temporary component used to simplify spacing in components with
+ * conditional buttons.
+ * TODO: find a more elegant solve to this layout shift problem
+ *
+ * @internal
+ */
+export function SpacerButton({size}: SpacerButtonProps) {
+  return (
+    <Button
+      aria-hidden
+      disabled
+      size={size}
+      style={{
+        pointerEvents: 'none',
+        visibility: 'hidden',
+        width: 0,
+      }}
+      // eslint-disable-next-line no-attribute-string-literals/no-attribute-string-literals
+      text="-"
+    />
+  )
+}
diff --git a/packages/sanity/src/ui/spacerButton/index.ts b/packages/sanity/src/ui/spacerButton/index.ts
new file mode 100644
index 00000000000..7e2b29a6fe2
--- /dev/null
+++ b/packages/sanity/src/ui/spacerButton/index.ts
@@ -0,0 +1 @@
+export * from './SpacerButton'

From d1ce8fdca0a2c051364464d5218adb67cef7c762 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 7 Dec 2023 03:04:26 +0000
Subject: [PATCH 049/163] fix: large button size for remove field button

---
 .../sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx b/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
index 2f10270c545..abab8e63a0f 100644
--- a/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
+++ b/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
@@ -106,7 +106,9 @@ function UnknownField({
         {!readOnly && (
           <Button
             icon={TrashIcon}
+            mode="ghost"
             onClick={handleUnsetClick}
+            size="large"
             tone="critical"
             text={t('inputs.object.unknown-fields.remove-field-button.text')}
           />

From 68c0545151dbcadebbc532f63cd915eb4502f3a8 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 7 Dec 2023 03:10:51 +0000
Subject: [PATCH 050/163] feat: update comments discard dialog styles

---
 .../pte/comment-input/CommentInputDiscardDialog.tsx         | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx
index 05ac2185122..7f3932bca41 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx
@@ -1,4 +1,4 @@
-import {DialogProvider, Stack, Text, ThemeColorProvider} from '@sanity/ui'
+import {DialogProvider, Text, ThemeColorProvider} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {Dialog} from '../../../../../../ui'
 
@@ -60,9 +60,7 @@ export function CommentInputDiscardDialog(props: CommentInputDiscardDialogProps)
             },
           }}
         >
-          <Stack padding={4}>
-            <Text>Do you want to discard the comment?</Text>
-          </Stack>
+          <Text size={1}>Do you want to discard the comment?</Text>
         </Dialog>
       </DialogProvider>
     </ThemeColorProvider>

From 4f3e84525dc1e1714f49c87e9f95c4c4bdad0cf9 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 7 Dec 2023 11:23:28 +0000
Subject: [PATCH 051/163] refactor: simplify useDocumentStatusTimeAgo

---
 .../core/hooks/useDocumentStatusTimeAgo.ts    | 29 +++++++------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts b/packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts
index 7493d47119c..5b951d74b57 100644
--- a/packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts
+++ b/packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts
@@ -28,25 +28,16 @@ export function useDocumentStatusTimeAgo({
     useTemporalPhrase: true,
   })
 
-  let label
-
-  // Published with no changes
   // @todo: localize correctly
-  if (!draftUpdatedAt && publishedTimeAgo) {
-    label = `Published${hidePublishedDate ? '' : ` ${publishedTimeAgo}`}`
-  }
-  // Draft, but no published document
-  if (draftUpdatedAt && !publishedTimeAgo) {
-    label = `Not published`
-  }
-  // Published with draft changes
-  if (draftUpdatedAt && publishedTimeAgo) {
-    label = `Published${hidePublishedDate ? '' : ` ${publishedTimeAgo}`}`
-  }
-  // Append draft last updated date
-  if (label && updatedDateTimeAgo) {
-    label += ` (Updated ${updatedDateTimeAgo})`
-  }
 
-  return label
+  const documentStatus = [
+    // Published status
+    publishedTimeAgo
+      ? `Published${hidePublishedDate ? '' : ` ${publishedTimeAgo}`}`
+      : `Not published`,
+    // Last updated (draft) status
+    ...(updatedDateTimeAgo ? [`(Updated ${updatedDateTimeAgo})`] : []),
+  ]
+
+  return documentStatus.join(' ')
 }

From 2020648573c89c61f9e6753edcb8362fbf40ab2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 7 Dec 2023 12:44:09 +0100
Subject: [PATCH 052/163] fix(deps): upgrade `@sanity/color`

---
 dev/test-studio/package.json         | 2 +-
 packages/@sanity/vision/package.json | 2 +-
 packages/sanity/package.json         | 2 +-
 yarn.lock                            | 7 ++++++-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index 3efa0a40a3d..3ccc245ed95 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -23,7 +23,7 @@
     "@sanity/assist": "^1.0.8",
     "@sanity/block-tools": "3.22.1",
     "@sanity/client": "^6.10.0",
-    "@sanity/color": "^2.1.20",
+    "@sanity/color": "3.0.0-beta.8",
     "@sanity/google-maps-input": "^3.0.1",
     "@sanity/icons": "^2.7.0",
     "@sanity/image-url": "^1.0.2",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index d5ebc5fc2dd..6a9d39b540b 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -65,7 +65,7 @@
     "@lezer/highlight": "^1.0.0",
     "@rexxars/react-json-inspector": "^8.0.1",
     "@rexxars/react-split-pane": "^0.1.93",
-    "@sanity/color": "^2.1.20",
+    "@sanity/color": "3.0.0-beta.8",
     "@sanity/icons": "^2.7.0",
     "@sanity/ui": "2.0.0-alpha.34",
     "@uiw/react-codemirror": "^4.11.4",
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index 42ca4112aa6..1cf0f8ddb16 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -159,7 +159,7 @@
     "@sanity/block-tools": "3.22.1",
     "@sanity/cli": "3.22.1",
     "@sanity/client": "^6.10.0",
-    "@sanity/color": "^2.1.20",
+    "@sanity/color": "3.0.0-beta.8",
     "@sanity/diff": "3.22.1",
     "@sanity/diff-match-patch": "^3.1.1",
     "@sanity/eventsource": "^5.0.0",
diff --git a/yarn.lock b/yarn.lock
index a6d637681fb..dbe0e9a1e24 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3596,7 +3596,12 @@
   resolved "https://registry.yarnpkg.com/@sanity/color/-/color-3.0.0-beta.7.tgz#396f4cf44d6bbb1af136e344e499640fe7ca9880"
   integrity sha512-cLC0qcFWCe5ClQZ+iGorz2iKMIzAE728L4ZRgZuRKp+Hzsm4/Vl6qMwV2Xa0RipjKuSysSaLUyx2b1oAOG33SA==
 
-"@sanity/color@^2.1.20", "@sanity/color@^2.2.5":
+"@sanity/color@3.0.0-beta.8":
+  version "3.0.0-beta.8"
+  resolved "https://registry.yarnpkg.com/@sanity/color/-/color-3.0.0-beta.8.tgz#33ee87b7cb59e308c5b5fe2ff4bb074223529acd"
+  integrity sha512-jsbef6oey7PlCHmU0/0MABtumcF8eqvxCtMxzkqBNobbSTHqGN+DpZjYX5wBCWF8SvAvSzdf/6tQiX3BSd8Q1Q==
+
+"@sanity/color@^2.2.5":
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/@sanity/color/-/color-2.2.5.tgz#6b28578573859495ed1ffd5491322cb8e90b3e07"
   integrity sha512-tTi22KoKuER3sldXYl4c1Dq2zU7tMLDkljFiaUKVkBbu4PBvRGCFw75kXZnD2b4Bsp6vin+7sI+AKdCKRhfRuw==

From 4de182490ec7ad8e1c3f495f9d72fba2ee49bd3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 7 Dec 2023 12:44:52 +0100
Subject: [PATCH 053/163] fix(deps): update `@sanity/ui`

---
 dev/design-studio/package.json                    |  2 +-
 dev/embedded-studio/package.json                  |  2 +-
 dev/studio-e2e-testing/package.json               |  2 +-
 dev/test-studio/package.json                      |  2 +-
 examples/ecommerce-studio/package.json            |  2 +-
 .../@sanity/portable-text-editor/package.json     |  2 +-
 packages/@sanity/vision/package.json              |  2 +-
 packages/sanity/package.json                      |  2 +-
 yarn.lock                                         | 15 +++++----------
 9 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index c421498c66e..5ffa4b21246 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.7.0",
-    "@sanity/ui": "2.0.0-alpha.34",
+    "@sanity/ui": "2.0.0-alpha.37",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/embedded-studio/package.json b/dev/embedded-studio/package.json
index 1a872531043..5199791550a 100644
--- a/dev/embedded-studio/package.json
+++ b/dev/embedded-studio/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "2.0.0-alpha.34",
+    "@sanity/ui": "2.0.0-alpha.37",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/studio-e2e-testing/package.json b/dev/studio-e2e-testing/package.json
index cbcba358e9e..19c2cdd405c 100644
--- a/dev/studio-e2e-testing/package.json
+++ b/dev/studio-e2e-testing/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@sanity/google-maps-input": "^3.0.1",
     "@sanity/icons": "^2.4.0",
-    "@sanity/ui": "2.0.0-alpha.34",
+    "@sanity/ui": "2.0.0-alpha.37",
     "@sanity/vision": "3.22.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index 3ccc245ed95..d49c6910686 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -35,7 +35,7 @@
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-alpha.33",
+    "@sanity/ui": "2.0.0-alpha.37",
     "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
diff --git a/examples/ecommerce-studio/package.json b/examples/ecommerce-studio/package.json
index aae832962fa..58d91f426c0 100644
--- a/examples/ecommerce-studio/package.json
+++ b/examples/ecommerce-studio/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.22.1",
-    "@sanity/ui": "2.0.0-alpha.34",
+    "@sanity/ui": "2.0.0-alpha.37",
     "react": "^18.2.0",
     "react-barcode": "^1.4.1",
     "react-dom": "^18.2.0",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index e9de783bf39..35d49b1cea3 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "2.0.0-alpha.34",
+    "@sanity/ui": "2.0.0-alpha.37",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index 6a9d39b540b..5470b52cef8 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -67,7 +67,7 @@
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "3.0.0-beta.8",
     "@sanity/icons": "^2.7.0",
-    "@sanity/ui": "2.0.0-alpha.34",
+    "@sanity/ui": "2.0.0-alpha.37",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index 1cf0f8ddb16..8c182b54ef7 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -175,7 +175,7 @@
     "@sanity/schema": "3.22.1",
     "@sanity/telemetry": "^0.7.3",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-alpha.34",
+    "@sanity/ui": "2.0.0-alpha.37",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
diff --git a/yarn.lock b/yarn.lock
index dbe0e9a1e24..688e5d7c840 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3591,11 +3591,6 @@
     get-it "^8.4.4"
     rxjs "^7.0.0"
 
-"@sanity/color@3.0.0-beta.7":
-  version "3.0.0-beta.7"
-  resolved "https://registry.yarnpkg.com/@sanity/color/-/color-3.0.0-beta.7.tgz#396f4cf44d6bbb1af136e344e499640fe7ca9880"
-  integrity sha512-cLC0qcFWCe5ClQZ+iGorz2iKMIzAE728L4ZRgZuRKp+Hzsm4/Vl6qMwV2Xa0RipjKuSysSaLUyx2b1oAOG33SA==
-
 "@sanity/color@3.0.0-beta.8":
   version "3.0.0-beta.8"
   resolved "https://registry.yarnpkg.com/@sanity/color/-/color-3.0.0-beta.8.tgz#33ee87b7cb59e308c5b5fe2ff4bb074223529acd"
@@ -3881,13 +3876,13 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@2.0.0-alpha.34":
-  version "2.0.0-alpha.34"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-alpha.34.tgz#3866766c4facbad9477fd3be25b4f63936ed8e34"
-  integrity sha512-Tx0zVmPuq8ab+EO/KfDP33Pn8ssedbC7/ntfhmZ1OyCHt384/G1gCjhVUJAMtjhJnBcFE6d6CurzI+uXghvJmA==
+"@sanity/ui@2.0.0-alpha.37":
+  version "2.0.0-alpha.37"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-alpha.37.tgz#ee6b4e46f0d2a17fead6e9fbfb3e126559b3952f"
+  integrity sha512-3hXIZUJfE6/+PvnG7f49fKBN+qkCSpNL20W8dwlwalv6i7Go/YVIsyGNvt1h6DWNNMYVmKiBA8ilWpzvJuHoyg==
   dependencies:
     "@floating-ui/react-dom" "^2.0.4"
-    "@sanity/color" "3.0.0-beta.7"
+    "@sanity/color" "3.0.0-beta.8"
     "@sanity/icons" "^2.4.1"
     csstype "^3.1.2"
     framer-motion "^10.16.2"

From 1b72e5f65f3544ae4d52be0f821d5c469d7d3703 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 7 Dec 2023 12:48:24 +0100
Subject: [PATCH 054/163] fix(studio): update navbar spacing

---
 .../src/core/studio/components/navbar/userMenu/UserMenu.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
index 719ba6ba137..e00c0f87dc3 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -88,10 +88,8 @@ export function UserMenu() {
   return (
     <MenuButton
       button={
-        <Button mode="bleed" paddingX={1} paddingY={0}>
-          <Flex align="center" gap={1}>
-            <UserAvatar size={1} user="me" />
-          </Flex>
+        <Button mode="bleed" padding={0} radius="full">
+          <UserAvatar size={0} user="me" />
         </Button>
       }
       id="user-menu"

From 99d189ecdb598772eef8c06e10403aeacfa0cf94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 7 Dec 2023 15:16:53 +0100
Subject: [PATCH 055/163] fix(deps): update `@sanity/ui`

---
 dev/design-studio/package.json                |  2 +-
 dev/embedded-studio/package.json              |  2 +-
 dev/studio-e2e-testing/package.json           |  2 +-
 dev/test-studio/package.json                  |  2 +-
 examples/ecommerce-studio/package.json        |  2 +-
 .../@sanity/portable-text-editor/package.json |  2 +-
 packages/@sanity/vision/package.json          |  2 +-
 packages/sanity/package.json                  |  2 +-
 yarn.lock                                     | 21 +++++++++++++------
 9 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index 5ffa4b21246..21062a628a0 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.7.0",
-    "@sanity/ui": "2.0.0-alpha.37",
+    "@sanity/ui": "2.0.0-beta.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/embedded-studio/package.json b/dev/embedded-studio/package.json
index 5199791550a..cf80049ff7d 100644
--- a/dev/embedded-studio/package.json
+++ b/dev/embedded-studio/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "2.0.0-alpha.37",
+    "@sanity/ui": "2.0.0-beta.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/studio-e2e-testing/package.json b/dev/studio-e2e-testing/package.json
index 19c2cdd405c..b296a832893 100644
--- a/dev/studio-e2e-testing/package.json
+++ b/dev/studio-e2e-testing/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@sanity/google-maps-input": "^3.0.1",
     "@sanity/icons": "^2.4.0",
-    "@sanity/ui": "2.0.0-alpha.37",
+    "@sanity/ui": "2.0.0-beta.1",
     "@sanity/vision": "3.22.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index d49c6910686..bc0d3e87bb4 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -35,7 +35,7 @@
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-alpha.37",
+    "@sanity/ui": "2.0.0-beta.1",
     "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
diff --git a/examples/ecommerce-studio/package.json b/examples/ecommerce-studio/package.json
index 58d91f426c0..3f1be49971f 100644
--- a/examples/ecommerce-studio/package.json
+++ b/examples/ecommerce-studio/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.22.1",
-    "@sanity/ui": "2.0.0-alpha.37",
+    "@sanity/ui": "2.0.0-beta.1",
     "react": "^18.2.0",
     "react-barcode": "^1.4.1",
     "react-dom": "^18.2.0",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index 35d49b1cea3..4fbfc619fd3 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "2.0.0-alpha.37",
+    "@sanity/ui": "2.0.0-beta.1",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index 5470b52cef8..957a67ecf9f 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -67,7 +67,7 @@
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "3.0.0-beta.8",
     "@sanity/icons": "^2.7.0",
-    "@sanity/ui": "2.0.0-alpha.37",
+    "@sanity/ui": "2.0.0-beta.1",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index 8c182b54ef7..608654294f2 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -175,7 +175,7 @@
     "@sanity/schema": "3.22.1",
     "@sanity/telemetry": "^0.7.3",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-alpha.37",
+    "@sanity/ui": "2.0.0-beta.1",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
diff --git a/yarn.lock b/yarn.lock
index 688e5d7c840..027443e97e8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3876,16 +3876,16 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@2.0.0-alpha.37":
-  version "2.0.0-alpha.37"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-alpha.37.tgz#ee6b4e46f0d2a17fead6e9fbfb3e126559b3952f"
-  integrity sha512-3hXIZUJfE6/+PvnG7f49fKBN+qkCSpNL20W8dwlwalv6i7Go/YVIsyGNvt1h6DWNNMYVmKiBA8ilWpzvJuHoyg==
+"@sanity/ui@2.0.0-beta.1":
+  version "2.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.1.tgz#a41d11bdd59ea7c252b29211638de15ebb42382a"
+  integrity sha512-WKNzZFNaId6fuoQhcS4eD0cxgrbwCrGvgWm6kzy9YM3FqNloYO9kPIHt3gfE8yvIUzcn/a/jYSXvQEmekwKTZQ==
   dependencies:
     "@floating-ui/react-dom" "^2.0.4"
     "@sanity/color" "3.0.0-beta.8"
-    "@sanity/icons" "^2.4.1"
+    "@sanity/icons" "^2.7.0"
     csstype "^3.1.2"
-    framer-motion "^10.16.2"
+    framer-motion "^10.16.5"
     react-refractor "^2.1.7"
 
 "@sanity/ui@^1", "@sanity/ui@^1.0.0", "@sanity/ui@^1.6.0", "@sanity/ui@^1.7.2":
@@ -8474,6 +8474,15 @@ framer-motion@^10.16.16:
   optionalDependencies:
     "@emotion/is-prop-valid" "^0.8.2"
 
+framer-motion@^10.16.5:
+  version "10.16.15"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.15.tgz#efddf7ffdfbe81f21849e9466da155d96b9cd89e"
+  integrity sha512-BapW1EKc/Sgph1rKEwL9bFt2B79z7bu7jN4Up1jGUaTE78WBsVO+6eCmoUZsQH0hHtRUDnnTqjjBbM7dk9Kp8A==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"

From 7f23c6e5888623467dbc225a270096981db38b3c Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 7 Dec 2023 17:31:14 +0000
Subject: [PATCH 056/163] fix: localize drag handle button, use correct delay
 values

---
 .../src/core/form/inputs/arrays/common/DragHandle.tsx      | 7 ++++++-
 packages/sanity/src/core/i18n/bundles/studio.ts            | 2 ++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx b/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
index 92e7bd56756..f296f52189d 100644
--- a/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
@@ -3,6 +3,7 @@ import React, {useContext} from 'react'
 import {DragHandleIcon} from '@sanity/icons'
 import {useSortable} from '@dnd-kit/sortable'
 import {Button, ButtonProps} from '../../../../../ui'
+import {useTranslation} from '../../../../i18n'
 
 const DragHandleButton = styled(Button)<{grid?: boolean}>`
   cursor: ${(props) => (props.grid ? 'move' : 'ns-resize')};
@@ -19,12 +20,16 @@ interface DragHandleProps {
 export const DragHandle = function DragHandle(props: DragHandleProps) {
   const id = useContext(SortableItemIdContext)!
   const {listeners, attributes} = useSortable({id})
+  const {t} = useTranslation()
   const {mode = 'bleed', ...rest} = props
 
   return (
     <DragHandleButton
       icon={DragHandleIcon}
-      tooltipProps={{content: 'Drag to reorder', delay: 1000}}
+      tooltipProps={{
+        content: t('inputs.array.action.drag.tooltip'),
+        delay: {open: 1000},
+      }}
       mode={mode}
       data-ui="DragHandleButton"
       {...attributes}
diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index 2a1b2e5bcdb..c873ca64e0e 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -440,6 +440,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
    * eg. will prompt the user to select a type once triggered
    */
   'inputs.array.action.add-item-select-type': 'Add item...',
+  /** Array drag handle button tooltip */
+  'inputs.array.action.drag.tooltip': 'Drag to re-order',
   /** Label for duplicating an array item  */
   'inputs.array.action.duplicate': 'Duplicate',
   /** Label for editing the item of a specific type, eg "Edit Person" */

From fab3c8804afad2bedb6124de35d1346f3b2a830d Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 7 Dec 2023 20:13:01 +0000
Subject: [PATCH 057/163] fix: add padding to workspace auth page, tweak mobile
 nav drawer

---
 .../studio/components/navbar/NavDrawer.tsx    | 25 +++++++++----------
 .../studio/screens/AuthenticateScreen.tsx     |  2 +-
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/NavDrawer.tsx b/packages/sanity/src/core/studio/components/navbar/NavDrawer.tsx
index 7e4ef4d53ce..a25e4d627ce 100644
--- a/packages/sanity/src/core/studio/components/navbar/NavDrawer.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/NavDrawer.tsx
@@ -152,10 +152,7 @@ export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
                   <Flex align="center">
                     <Flex flex={1} align="center" paddingRight={2}>
                       <Flex flex={1} align="center">
-                        <Box>
-                          <UserAvatar size={1} user="me" />
-                        </Box>
-
+                        <UserAvatar size={0} user="me" />
                         <Box
                           flex={1}
                           marginLeft={2}
@@ -168,17 +165,19 @@ export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
                       </Flex>
                     </Flex>
 
-                    <Box>
-                      <Button
-                        icon={CloseIcon}
-                        mode="bleed"
-                        onClick={onClose}
-                        tooltipProps={{content: t('user-menu.close-menu')}}
-                      />
-                    </Box>
+                    <Button
+                      icon={CloseIcon}
+                      mode="bleed"
+                      onClick={onClose}
+                      tooltipProps={{content: t('user-menu.close-menu')}}
+                    />
                   </Flex>
 
-                  {workspaces.length > 1 && <WorkspaceMenuButton />}
+                  {workspaces.length > 1 && (
+                    <Flex>
+                      <WorkspaceMenuButton />
+                    </Flex>
+                  )}
                 </Stack>
               </Card>
 
diff --git a/packages/sanity/src/core/studio/screens/AuthenticateScreen.tsx b/packages/sanity/src/core/studio/screens/AuthenticateScreen.tsx
index e322892f36d..488ff4648fb 100644
--- a/packages/sanity/src/core/studio/screens/AuthenticateScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/AuthenticateScreen.tsx
@@ -4,7 +4,7 @@ import {WorkspaceAuth} from '../components/navbar/workspace'
 
 export function AuthenticateScreen() {
   return (
-    <Card height="fill" overflow="auto">
+    <Card height="fill" overflow="auto" paddingX={4}>
       <Flex height="fill" direction="column" align="center" justify="center" paddingTop={4}>
         <Container width={0}>
           <WorkspaceAuth />

From d768e5d4d04c43433ef0a75f97376c0bcfcc7b12 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 7 Dec 2023 20:32:08 +0000
Subject: [PATCH 058/163] fix: new presence menu item avatar sizes

---
 .../core/studio/components/navbar/presence/PresenceMenuItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
index c36f18c20fe..d6a307758b3 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
@@ -72,7 +72,7 @@ export const PresenceMenuItem = memo(function PresenceMenuItem(props: PresenceLi
       preview={
         <UserAvatar
           key={presence.user.id}
-          size={1}
+          size={0}
           user={presence.user}
           status={hasLink ? 'editing' : 'inactive'}
         />

From 7d8ab451b98fd47a8a842575f2bc96c261d9841c Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Fri, 8 Dec 2023 03:59:30 +0000
Subject: [PATCH 059/163] feat: add absolute tooltip dates to document
 statusbar, don't render statusbar until ready, minor cleanup

---
 .../ReferenceInput/ReferencePreview.tsx       |  4 +-
 packages/sanity/src/core/hooks/index.ts       |  2 +-
 .../src/core/hooks/useDocumentStatus.ts       | 58 ++++++++++++++++++
 .../core/hooks/useDocumentStatusTimeAgo.ts    | 43 -------------
 .../components/paneItem/PaneItemPreview.tsx   |  4 +-
 .../document/statusBar/DocumentStatusBar.tsx  | 22 +++----
 .../statusBar/sparkline/DocumentSparkline.tsx | 61 +++++--------------
 .../sparkline/DocumentStatusLine.tsx          | 45 ++++++++++++++
 .../DocumentStatusPulse.tsx                   |  9 ++-
 .../src/ui/documentStatus/DocumentStatus.tsx  |  4 +-
 10 files changed, 139 insertions(+), 113 deletions(-)
 create mode 100644 packages/sanity/src/core/hooks/useDocumentStatus.ts
 delete mode 100644 packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts
 create mode 100644 packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusLine.tsx

diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
index 103f1848c2e..5aeb4d3efe6 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
@@ -6,7 +6,7 @@ import {PreviewLayoutKey} from '../../../components'
 import {RenderPreviewCallback} from '../../types'
 import {useDocumentPresence} from '../../../store'
 import {DocumentPreviewPresence} from '../../../presence'
-import {useDocumentStatusTimeAgo} from '../../../hooks'
+import {useDocumentStatus} from '../../../hooks'
 import {ReferenceInfo} from './types'
 
 /**
@@ -44,7 +44,7 @@ export function ReferencePreview(props: {
   )
 
   const {draft, published} = preview
-  const tooltipLabel = useDocumentStatusTimeAgo({draft, published})
+  const tooltipLabel = useDocumentStatus({draft, published})
 
   const previewProps = useMemo(
     () => ({
diff --git a/packages/sanity/src/core/hooks/index.ts b/packages/sanity/src/core/hooks/index.ts
index fca4f3b548c..2d855c9822c 100644
--- a/packages/sanity/src/core/hooks/index.ts
+++ b/packages/sanity/src/core/hooks/index.ts
@@ -4,7 +4,7 @@ export * from './useDataset'
 export * from './useDateTimeFormat'
 export * from './useDocumentOperation'
 export * from './useDocumentOperationEvent'
-export * from './useDocumentStatusTimeAgo'
+export * from './useDocumentStatus'
 export * from './useEditState'
 export * from './useFeatureEnabled'
 export * from './useFormattedDuration'
diff --git a/packages/sanity/src/core/hooks/useDocumentStatus.ts b/packages/sanity/src/core/hooks/useDocumentStatus.ts
new file mode 100644
index 00000000000..356bfaebee9
--- /dev/null
+++ b/packages/sanity/src/core/hooks/useDocumentStatus.ts
@@ -0,0 +1,58 @@
+import {PreviewValue, SanityDocument} from '@sanity/types'
+import {useIntlDateTimeFormat} from '../i18n'
+import {useRelativeTime} from './useRelativeTime'
+
+interface DocumentStatusTimeAgoOptions {
+  draft?: PreviewValue | Partial<SanityDocument> | null
+  hidePublishedDate?: boolean
+  published?: PreviewValue | Partial<SanityDocument> | null
+  absoluteDate?: boolean
+}
+
+/**
+ * React hook which returns a human readable string of the provided document's status.
+ *
+ * @internal
+ * @hidden
+ */
+export function useDocumentStatus({
+  absoluteDate,
+  draft,
+  hidePublishedDate,
+  published,
+}: DocumentStatusTimeAgoOptions): string | undefined {
+  const draftUpdatedAt = draft && '_updatedAt' in draft ? draft._updatedAt : ''
+  const publishedUpdatedAt = published && '_updatedAt' in published ? published._updatedAt : ''
+
+  const intlDateFormat = useIntlDateTimeFormat({
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  })
+
+  const draftDateAbsolute = draftUpdatedAt && intlDateFormat.format(new Date(draftUpdatedAt))
+  const publishedDateAbsolute =
+    publishedUpdatedAt && intlDateFormat.format(new Date(publishedUpdatedAt))
+
+  const draftUpdatedTimeAgo = useRelativeTime(draftUpdatedAt || '', {
+    minimal: true,
+    useTemporalPhrase: true,
+  })
+  const publishedUpdatedTimeAgo = useRelativeTime(publishedUpdatedAt || '', {
+    minimal: true,
+    useTemporalPhrase: true,
+  })
+
+  const publishedDate = absoluteDate ? publishedDateAbsolute : publishedUpdatedTimeAgo
+  const updatedDate = absoluteDate ? draftDateAbsolute : draftUpdatedTimeAgo
+
+  const documentStatus = [
+    // Published status
+    publishedUpdatedTimeAgo
+      ? `Published${hidePublishedDate ? '' : ` ${publishedDate}`}`
+      : `Not published`,
+    // Last updated (draft) status
+    ...(draftUpdatedTimeAgo ? [`(Updated ${updatedDate})`] : []),
+  ]
+
+  return documentStatus.join(' ')
+}
diff --git a/packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts b/packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts
deleted file mode 100644
index 5b951d74b57..00000000000
--- a/packages/sanity/src/core/hooks/useDocumentStatusTimeAgo.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {PreviewValue, SanityDocument} from '@sanity/types'
-import {useRelativeTime} from './useRelativeTime'
-
-/**
- * React hook which returns a human readable string of the provided document's status.
- *
- * @internal
- * @hidden
- */
-export function useDocumentStatusTimeAgo({
-  draft,
-  hidePublishedDate,
-  published,
-}: {
-  draft?: PreviewValue | Partial<SanityDocument> | null
-  hidePublishedDate?: boolean
-  published?: PreviewValue | Partial<SanityDocument> | null
-}): string | undefined {
-  const draftUpdatedAt = draft && '_updatedAt' in draft ? draft._updatedAt : ''
-  const publishedUpdatedAt = published && '_updatedAt' in published ? published._updatedAt : ''
-
-  const updatedDateTimeAgo = useRelativeTime(draftUpdatedAt || '', {
-    minimal: true,
-    useTemporalPhrase: true,
-  })
-  const publishedTimeAgo = useRelativeTime(publishedUpdatedAt || '', {
-    minimal: true,
-    useTemporalPhrase: true,
-  })
-
-  // @todo: localize correctly
-
-  const documentStatus = [
-    // Published status
-    publishedTimeAgo
-      ? `Published${hidePublishedDate ? '' : ` ${publishedTimeAgo}`}`
-      : `Not published`,
-    // Last updated (draft) status
-    ...(updatedDateTimeAgo ? [`(Updated ${updatedDateTimeAgo})`] : []),
-  ]
-
-  return documentStatus.join(' ')
-}
diff --git a/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx b/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
index 63fb9adcf97..796d508032b 100644
--- a/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
+++ b/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
@@ -15,7 +15,7 @@ import {
   getPreviewValueWithFallback,
   SanityDefaultPreview,
   isRecord,
-  useDocumentStatusTimeAgo,
+  useDocumentStatus,
 } from 'sanity'
 
 export interface PaneItemPreviewProps {
@@ -59,7 +59,7 @@ export function PaneItemPreview(props: PaneItemPreviewProps) {
     </TooltipDelayGroupProvider>
   )
 
-  const tooltipLabel = useDocumentStatusTimeAgo({draft, published})
+  const tooltipLabel = useDocumentStatus({draft, published})
 
   return (
     <SanityDefaultPreview
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
index bea60b79d87..46b2731a45c 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
@@ -18,24 +18,24 @@ const DocumentActionsFlex = styled(Flex)`
 
 export function DocumentStatusBar(props: DocumentStatusBarProps) {
   const {actionsBoxRef} = props
-  const {badges, timelineStore} = useDocumentPane()
+  const {timelineStore} = useDocumentPane()
 
   // Subscribe to external timeline state changes
   const showingRevision = useTimelineSelector(timelineStore, (state) => state.onOlderRevision)
 
   return useMemo(
     () => (
-      <Box padding={2}>
-        <Flex align="center">
-          <Box flex={[1, 2]}>{badges && <DocumentSparkline />}</Box>
+      <Flex align="center" gap={1} padding={2} paddingLeft={3}>
+        <Box flex={[1, 2]}>
+          <DocumentSparkline />
+        </Box>
 
-          <DocumentActionsFlex flex={1} justify="flex-end" marginLeft={[1, 3]} ref={actionsBoxRef}>
-            <SpacerButton size="large" />
-            {showingRevision ? <HistoryStatusBarActions /> : <DocumentStatusBarActions />}
-          </DocumentActionsFlex>
-        </Flex>
-      </Box>
+        <DocumentActionsFlex flex={1} justify="flex-end" ref={actionsBoxRef}>
+          <SpacerButton size="large" />
+          {showingRevision ? <HistoryStatusBarActions /> : <DocumentStatusBarActions />}
+        </DocumentActionsFlex>
+      </Flex>
     ),
-    [actionsBoxRef, badges, showingRevision],
+    [actionsBoxRef, showingRevision],
   )
 }
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
index 15de9ce0a31..de0bf3b593b 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
@@ -1,38 +1,26 @@
-import {Box, Flex, Text, useElementRect} from '@sanity/ui'
-import React, {useEffect, useState, memo, useLayoutEffect} from 'react'
-import {DocumentStatus} from '../../../../../ui/documentStatus'
+import {Flex, useElementSize} from '@sanity/ui'
+import React, {useState, memo, useLayoutEffect, useEffect} from 'react'
 import {useDocumentPane} from '../../useDocumentPane'
 import {DocumentBadges} from './DocumentBadges'
+import {DocumentStatusLine} from './DocumentStatusLine'
 import {DocumentStatusPulse} from './DocumentStatusPulse'
-import {useDocumentStatusTimeAgo, useSyncState, useTimelineSelector} from 'sanity'
+import {useSyncState} from 'sanity'
 
 const SYNCING_TIMEOUT = 1000
 const SAVED_TIMEOUT = 3000
 
 export const DocumentSparkline = memo(function DocumentSparkline() {
-  const {
-    changesOpen,
-    documentId,
-    documentType,
-    editState,
-    onHistoryClose,
-    onHistoryOpen,
-    timelineStore,
-    value,
-  } = useDocumentPane()
+  const {badges, documentId, documentType, editState, value} = useDocumentPane()
   const syncState = useSyncState(documentId, documentType)
 
   const lastUpdated = value?._updatedAt
 
   const [rootFlexElement, setRootFlexElement] = useState<HTMLDivElement | null>(null)
-  const rootFlexRect = useElementRect(rootFlexElement)
-  const collapsed = !rootFlexRect || rootFlexRect?.width < 300
+  const rootFlexRect = useElementSize(rootFlexElement)
+  const collapsed = !rootFlexRect || rootFlexRect?.content.width < 380
 
   const [status, setStatus] = useState<'saved' | 'syncing' | null>(null)
 
-  // Subscribe to TimelineController changes and store internal state.
-  const showingRevision = useTimelineSelector(timelineStore, (state) => state.onOlderRevision)
-
   // eslint-disable-next-line consistent-return
   useEffect(() => {
     // Schedule an update to set the status to 'saved' when status changed to 'syncing.
@@ -60,37 +48,16 @@ export const DocumentSparkline = memo(function DocumentSparkline() {
     }
   }, [syncState.isSyncing, lastUpdated])
 
-  const statusTimeAgo = useDocumentStatusTimeAgo({
-    draft: editState?.draft,
-    hidePublishedDate: true,
-    published: editState?.published,
-  })
+  if (!editState?.ready) {
+    return null
+  }
 
   return (
     <Flex align="center" data-ui="DocumentSparkline" ref={setRootFlexElement}>
-      <Flex align="center" flex={1} gap={3} marginLeft={3}>
-        <Flex align="center" gap={2}>
-          <DocumentStatus
-            draft={editState?.draft}
-            published={editState?.published}
-            showPublishedIcon
-          />
-          <Box flex={1}>
-            <Text muted textOverflow="ellipsis" size={1} weight="medium">
-              {statusTimeAgo}
-            </Text>
-          </Box>
-        </Flex>
-
-        <DocumentStatusPulse
-          status={status || undefined}
-          onClick={changesOpen ? onHistoryClose : onHistoryOpen}
-          disabled={showingRevision}
-          selected={changesOpen}
-          collapsed={collapsed}
-        />
-
-        {!collapsed && <DocumentBadges />}
+      <Flex align="center" flex={1} gap={3}>
+        <DocumentStatusLine collapsed={collapsed} editState={editState} />
+        <DocumentStatusPulse collapsed={collapsed} status={status || undefined} />
+        {badges && <DocumentBadges />}
       </Flex>
     </Flex>
   )
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusLine.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusLine.tsx
new file mode 100644
index 00000000000..cb5f78a75a4
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusLine.tsx
@@ -0,0 +1,45 @@
+import {Box, Flex, Text} from '@sanity/ui'
+import React from 'react'
+import {Tooltip} from '../../../../../ui'
+import {DocumentStatus} from '../../../../../ui/documentStatus'
+import {EditStateFor, useDocumentStatus} from 'sanity'
+
+interface DocumentStatusLineProps {
+  collapsed?: boolean
+  editState: EditStateFor | null
+}
+
+export function DocumentStatusLine({collapsed, editState}: DocumentStatusLineProps) {
+  const statusTimeAgo = useDocumentStatus({
+    draft: editState?.draft,
+    hidePublishedDate: collapsed,
+    published: editState?.published,
+  })
+
+  const statusAbsolute = useDocumentStatus({
+    absoluteDate: true,
+    draft: editState?.draft,
+    published: editState?.published,
+  })
+
+  if (!editState) {
+    return null
+  }
+
+  return (
+    <Tooltip content={statusAbsolute}>
+      <Flex align="center" gap={3} paddingLeft={1} paddingY={2}>
+        <DocumentStatus
+          draft={editState?.draft}
+          published={editState?.published}
+          showPublishedIcon
+        />
+        <Box flex={1}>
+          <Text muted textOverflow="ellipsis" size={1} weight="medium">
+            {statusTimeAgo}
+          </Text>
+        </Box>
+      </Flex>
+    </Tooltip>
+  )
+}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx
index 19e276f7214..80c6e57f28d 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx
@@ -1,13 +1,12 @@
-import {ButtonTone, Flex, Inline} from '@sanity/ui'
+import {ButtonTone, Flex} from '@sanity/ui'
 import React from 'react'
 import {AnimatedStatusIcon} from './AnimatedStatusIcon'
 import {TextWithTone} from 'sanity'
 
 type StatusType = 'saved' | 'syncing'
-interface ReviewChangesButtonProps
-  extends Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'width' | 'as' | 'type'> {
-  status?: StatusType
+interface ReviewChangesButtonProps {
   collapsed?: boolean
+  status?: StatusType
 }
 
 const STATUS_DICTIONARY: Record<StatusType, {text: string; tone: ButtonTone}> = {
@@ -31,7 +30,7 @@ export const DocumentStatusPulse = (props: ReviewChangesButtonProps) => {
   const currentStatus = STATUS_DICTIONARY[status]
 
   return (
-    <Flex align="center" gap={3} marginLeft={1}>
+    <Flex align="center" gap={3}>
       <TextWithTone size={1} tone={currentStatus.tone}>
         <AnimatedStatusIcon status={status} />
       </TextWithTone>
diff --git a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
index 7029c83fc3a..ba260d7596e 100644
--- a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
+++ b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
@@ -3,7 +3,7 @@ import {PreviewValue, SanityDocument} from '@sanity/types'
 import {Box, ButtonTone, Flex} from '@sanity/ui'
 import React from 'react'
 import styled, {css} from 'styled-components'
-import {TextWithTone, useDocumentStatusTimeAgo} from '../../core'
+import {TextWithTone, useDocumentStatus} from '../../core'
 
 export interface DocumentStatusProps {
   draft?: PreviewValue | Partial<SanityDocument> | null
@@ -31,7 +31,7 @@ const Dot = styled(Box)<{$draft?: boolean; $published: boolean}>(({theme, $draft
 })
 
 export function DocumentStatus({draft, published, showPublishedIcon}: DocumentStatusProps) {
-  const statusTimeAgo = useDocumentStatusTimeAgo({draft, published})
+  const statusTimeAgo = useDocumentStatus({draft, published})
 
   if (!draft && !published) {
     return null

From a9ae5c6872fe091ab64c88d23694c30a92fed634 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Fri, 8 Dec 2023 04:33:26 +0000
Subject: [PATCH 060/163] chore: update snapshots

---
 packages/sanity/src/core/studio/Studio.test.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/core/studio/Studio.test.tsx b/packages/sanity/src/core/studio/Studio.test.tsx
index edbac43ef86..47ec351045f 100644
--- a/packages/sanity/src/core/studio/Studio.test.tsx
+++ b/packages/sanity/src/core/studio/Studio.test.tsx
@@ -45,7 +45,7 @@ describe('Studio', () => {
       const html = renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))
 
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-pGaPU brzEDu sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-pGaPU gWleq sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -62,7 +62,7 @@ describe('Studio', () => {
     try {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-pGaPU brzEDu sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-pGaPU gWleq sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -82,7 +82,7 @@ describe('Studio', () => {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       node.innerHTML = html
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-pGaPU brzEDu sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-pGaPU gWleq sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
       document.head.innerHTML += sheet.getStyleTags()
 

From 19e247c9957c5202f9e81f427db6c152bfb8170c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Fri, 8 Dec 2023 11:46:05 +0100
Subject: [PATCH 061/163] fix(deps): update `@sanity/ui`

---
 dev/design-studio/package.json                     | 2 +-
 dev/embedded-studio/package.json                   | 2 +-
 dev/studio-e2e-testing/package.json                | 2 +-
 dev/test-studio/package.json                       | 2 +-
 examples/ecommerce-studio/package.json             | 2 +-
 packages/@sanity/portable-text-editor/package.json | 2 +-
 packages/@sanity/vision/package.json               | 2 +-
 packages/sanity/package.json                       | 2 +-
 yarn.lock                                          | 8 ++++----
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index 21062a628a0..a6d4ab68f3e 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.7.0",
-    "@sanity/ui": "2.0.0-beta.1",
+    "@sanity/ui": "2.0.0-beta.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/embedded-studio/package.json b/dev/embedded-studio/package.json
index cf80049ff7d..69ff6fe7bb0 100644
--- a/dev/embedded-studio/package.json
+++ b/dev/embedded-studio/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "2.0.0-beta.1",
+    "@sanity/ui": "2.0.0-beta.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/studio-e2e-testing/package.json b/dev/studio-e2e-testing/package.json
index b296a832893..31199f3deef 100644
--- a/dev/studio-e2e-testing/package.json
+++ b/dev/studio-e2e-testing/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@sanity/google-maps-input": "^3.0.1",
     "@sanity/icons": "^2.4.0",
-    "@sanity/ui": "2.0.0-beta.1",
+    "@sanity/ui": "2.0.0-beta.2",
     "@sanity/vision": "3.22.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index bc0d3e87bb4..eec4677c46a 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -35,7 +35,7 @@
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.1",
+    "@sanity/ui": "2.0.0-beta.2",
     "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
diff --git a/examples/ecommerce-studio/package.json b/examples/ecommerce-studio/package.json
index 3f1be49971f..32a8fe660dc 100644
--- a/examples/ecommerce-studio/package.json
+++ b/examples/ecommerce-studio/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.1",
+    "@sanity/ui": "2.0.0-beta.2",
     "react": "^18.2.0",
     "react-barcode": "^1.4.1",
     "react-dom": "^18.2.0",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index 4fbfc619fd3..290176bc6a7 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "2.0.0-beta.1",
+    "@sanity/ui": "2.0.0-beta.2",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index 957a67ecf9f..5342847cf24 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -67,7 +67,7 @@
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "3.0.0-beta.8",
     "@sanity/icons": "^2.7.0",
-    "@sanity/ui": "2.0.0-beta.1",
+    "@sanity/ui": "2.0.0-beta.2",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index 608654294f2..1c696443fb8 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -175,7 +175,7 @@
     "@sanity/schema": "3.22.1",
     "@sanity/telemetry": "^0.7.3",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.1",
+    "@sanity/ui": "2.0.0-beta.2",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
diff --git a/yarn.lock b/yarn.lock
index 027443e97e8..d774fd7490e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3876,10 +3876,10 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@2.0.0-beta.1":
-  version "2.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.1.tgz#a41d11bdd59ea7c252b29211638de15ebb42382a"
-  integrity sha512-WKNzZFNaId6fuoQhcS4eD0cxgrbwCrGvgWm6kzy9YM3FqNloYO9kPIHt3gfE8yvIUzcn/a/jYSXvQEmekwKTZQ==
+"@sanity/ui@2.0.0-beta.2":
+  version "2.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.2.tgz#6a1e699a2d14589eb5bfc6ab36be614128db1799"
+  integrity sha512-1FDE26tr7A8hGaygudQQo/8DbKg9F/LuAt/vnp5iWm3dVVR4opOZd//ZpiXPuZIvGPgDv6T5V/4iXovsAQLUzw==
   dependencies:
     "@floating-ui/react-dom" "^2.0.4"
     "@sanity/color" "3.0.0-beta.8"

From 198745079dd4509f48b9366bf3d8409ce256691a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Fri, 8 Dec 2023 11:33:48 +0100
Subject: [PATCH 062/163] fix(ui): fade preview when menu item is disabled

---
 packages/sanity/src/ui/menuItem/MenuItem.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/sanity/src/ui/menuItem/MenuItem.tsx b/packages/sanity/src/ui/menuItem/MenuItem.tsx
index f28f33a671c..a161ade5e2d 100644
--- a/packages/sanity/src/ui/menuItem/MenuItem.tsx
+++ b/packages/sanity/src/ui/menuItem/MenuItem.tsx
@@ -60,6 +60,7 @@ export const MenuItem = forwardRef(function MenuItem(
   {
     badgeText,
     children: childrenProp,
+    disabled,
     hotkeys,
     icon,
     iconRight,
@@ -75,7 +76,7 @@ export const MenuItem = forwardRef(function MenuItem(
     return (
       <Flex align="center" gap={2}>
         {preview && (
-          <PreviewWrapper>
+          <PreviewWrapper style={{opacity: disabled ? 0.25 : undefined}}>
             <Flex align="center" height="fill" justify="center">
               {preview}
             </Flex>
@@ -116,7 +117,7 @@ export const MenuItem = forwardRef(function MenuItem(
         )}
       </Flex>
     )
-  }, [badgeText, hotkeys, icon, iconRight, preview, text])
+  }, [badgeText, disabled, hotkeys, icon, iconRight, preview, text])
 
   const renderWrapper = useCallback<ConditionalWrapperRenderWrapperCallback>(
     (children) => {
@@ -133,6 +134,7 @@ export const MenuItem = forwardRef(function MenuItem(
   return (
     <ConditionalWrapper condition={!!tooltipProps} wrapper={renderWrapper}>
       <UIMenuItem
+        disabled={disabled}
         paddingLeft={preview ? 1 : 3}
         paddingRight={3}
         paddingY={preview ? 1 : 3}

From 2e2d83a478459a399fcd8f970c9e4775bf8ee82e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Fri, 8 Dec 2023 11:34:43 +0100
Subject: [PATCH 063/163] fix(studio): do not use experimental avatar status

---
 .../components/navbar/presence/PresenceMenuItem.tsx      | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
index d6a307758b3..8fb3470acb1 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
@@ -69,14 +69,7 @@ export const PresenceMenuItem = memo(function PresenceMenuItem(props: PresenceLi
       data-as="a"
       disabled={!hasLink}
       onFocus={handleFocus}
-      preview={
-        <UserAvatar
-          key={presence.user.id}
-          size={0}
-          user={presence.user}
-          status={hasLink ? 'editing' : 'inactive'}
-        />
-      }
+      preview={<UserAvatar key={presence.user.id} size={0} user={presence.user} />}
       ref={setMenuItemElement}
       text={presence.user.displayName}
       tooltipProps={

From 327628954a0dd3e540c8b3cf73452f46deef99b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Fri, 8 Dec 2023 11:35:51 +0100
Subject: [PATCH 064/163] fix(studio): adjust avatar size in user menu

---
 .../src/core/studio/components/navbar/userMenu/UserMenu.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
index e00c0f87dc3..1c925fe3931 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -89,7 +89,7 @@ export function UserMenu() {
     <MenuButton
       button={
         <Button mode="bleed" padding={0} radius="full">
-          <UserAvatar size={0} user="me" />
+          <UserAvatar size={1} user="me" />
         </Button>
       }
       id="user-menu"

From 6cf47e60e138aaaa798a5100f5e6125231b8f542 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Fri, 8 Dec 2023 11:39:18 +0100
Subject: [PATCH 065/163] fix(form): align form field header

---
 .../form/components/formField/FormField.tsx   |  2 +-
 .../formField/FormFieldBaseHeader.tsx         | 96 +++++++++----------
 .../formField/FormFieldHeaderText.tsx         |  2 +-
 .../components/formField/FormFieldSet.tsx     | 13 ++-
 .../sanity/src/core/presence/constants.ts     |  2 +-
 .../list/CommentsListItemContextMenu.tsx      | 19 ++--
 6 files changed, 63 insertions(+), 71 deletions(-)

diff --git a/packages/sanity/src/core/form/components/formField/FormField.tsx b/packages/sanity/src/core/form/components/formField/FormField.tsx
index 6639318339b..0ec7f9dfacd 100644
--- a/packages/sanity/src/core/form/components/formField/FormField.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormField.tsx
@@ -68,7 +68,7 @@ export const FormField = memo(function FormField(
       data-level={level}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      space={1}
+      space={2}
     >
       {/*
         NOTE: It’s not ideal to hide validation, presence and description when there's no `title`.
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx b/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx
index a7808b2abf3..72c457e82cb 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx
@@ -4,7 +4,6 @@ import {
   Box,
   Card,
   Flex,
-  Theme,
   TooltipDelayGroupProvider,
   TooltipDelayGroupProviderProps,
 } from '@sanity/ui'
@@ -55,74 +54,69 @@ const SlotBox = styled(Box)<{
   `
 })
 
-const FieldActionsFloatingCard = styled(Card)(({theme}: {theme: Theme}) => {
-  const space = theme.sanity.space[1] / 2
+const FieldActionsFloatingCard = styled(Card)`
+  align-items: center;
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  transition: opacity 150ms ease;
+  line-height: 1;
 
-  return css`
-    align-items: center;
-    bottom: 0;
-    gap: ${space}px;
-    padding: ${space}px;
-    position: absolute;
-    right: 0;
-    transition: opacity 150ms ease;
+  @media (hover: hover) {
+    // If hover is supported, we hide the floating card by default
+    // and only show it when it has focus within or when the field is hovered or focused.
+    opacity: 0;
+    pointer-events: none;
+    width: 0;
 
-    @media (hover: hover) {
-      // If hover is supported, we hide the floating card by default
-      // and only show it when it has focus within or when the field is hovered or focused.
+    [data-ui='FieldActionsFlex'] {
       opacity: 0;
-      pointer-events: none;
       width: 0;
+    }
 
-      [data-ui='FieldActionsFlex'] {
-        opacity: 0;
-        width: 0;
-      }
-
-      &[data-actions-visible='false']:not(:focus-within) {
-        // Remove the shadow when the field actions are not visible
-        box-shadow: none;
-
-        // Since the field actions always will be present in the DOM (to make them focusable) –
-        // they will always affect the width of the floating card, even when they are not visible.
-        // Therefore, we remove the background of the floating card when the field actions are not visible.
-        background: transparent;
-      }
-
-      // Remove the shadow when the field has comments but no actions
-      &[data-has-comments='true']:not([data-has-actions='true']) {
-        box-shadow: none;
-      }
+    &[data-actions-visible='false']:not(:focus-within) {
+      // Remove the shadow when the field actions are not visible
+      box-shadow: none;
 
-      // Show the floating card when it has focus within (ie when field actions are focused).
-      &:focus-within {
-        opacity: 1;
-        pointer-events: auto;
-        width: max-content;
+      // Since the field actions always will be present in the DOM (to make them focusable) –
+      // they will always affect the width of the floating card, even when they are not visible.
+      // Therefore, we remove the background of the floating card when the field actions are not visible.
+      background: transparent;
+    }
 
-        [data-ui='FieldActionsFlex'] {
-          opacity: 1;
-          pointer-events: auto;
-          width: max-content;
-        }
-      }
+    // Remove the shadow when the field has comments but no actions
+    &[data-has-comments='true']:not([data-has-actions='true']) {
+      box-shadow: none;
     }
 
-    &[data-visible='true'] {
+    // Show the floating card when it has focus within (ie when field actions are focused).
+    &:focus-within {
       opacity: 1;
       pointer-events: auto;
       width: max-content;
-    }
 
-    &[data-actions-visible='true'] {
       [data-ui='FieldActionsFlex'] {
         opacity: 1;
         pointer-events: auto;
         width: max-content;
       }
     }
-  `
-})
+  }
+
+  &[data-visible='true'] {
+    opacity: 1;
+    pointer-events: auto;
+    width: max-content;
+  }
+
+  &[data-actions-visible='true'] {
+    [data-ui='FieldActionsFlex'] {
+      opacity: 1;
+      pointer-events: auto;
+      width: max-content;
+    }
+  }
+`
 
 const FieldActionsFlex = styled(Flex)`
   gap: inherit;
@@ -235,7 +229,7 @@ export function FormFieldBaseHeader(props: FormFieldBaseHeaderProps) {
       </ContentBox>
 
       {presence && presence.length > 0 && (
-        <PresenceBox flex="none" paddingBottom={1} $right={floatingCardWidth + slotWidth}>
+        <PresenceBox data-ui="PresenceBox" flex="none" $right={floatingCardWidth + slotWidth}>
           <FieldPresence maxAvatars={MAX_AVATARS} presence={presence} />
         </PresenceBox>
       )}
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldHeaderText.tsx b/packages/sanity/src/core/form/components/formField/FormFieldHeaderText.tsx
index 5233c711078..6dfbdac602f 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldHeaderText.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldHeaderText.tsx
@@ -32,7 +32,7 @@ export const FormFieldHeaderText = memo(function FormFieldHeaderText(
   const hasValidations = validation.length > 0
 
   return (
-    <Stack space={2}>
+    <Stack space={3}>
       <Flex>
         <Text as="label" htmlFor={inputId} weight="medium" size={1}>
           {title || (
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx b/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx
index 0f93820d244..36940955742 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx
@@ -54,7 +54,7 @@ function getChildren(children: React.ReactNode | (() => React.ReactNode)): React
   return typeof children === 'function' ? children() : children
 }
 
-const Root = styled(Box).attrs({forwardedAs: 'fieldset'})`
+const Root = styled(Stack).attrs({forwardedAs: 'fieldset'})`
   border: none;
 
   /* See: https://thatemil.com/blog/2015/01/03/reset-your-fieldset/ */
@@ -152,7 +152,13 @@ export const FormFieldSet = forwardRef(function FormFieldSet(
   }, [children, collapsed, columns])
 
   return (
-    <Root data-level={level} {...restProps} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+    <Root
+      data-level={level}
+      {...restProps}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      space={2}
+    >
       <FormFieldBaseHeader
         __internal_comments={comments}
         __internal_slot={slot}
@@ -161,7 +167,7 @@ export const FormFieldSet = forwardRef(function FormFieldSet(
         fieldHovered={hovered}
         presence={presence}
         content={
-          <Stack space={2}>
+          <Stack space={3}>
             <Flex>
               <FormFieldSetLegend
                 collapsed={Boolean(collapsed)}
@@ -189,7 +195,6 @@ export const FormFieldSet = forwardRef(function FormFieldSet(
       <Content
         $borderLeft={level > 0}
         hidden={collapsed}
-        marginTop={1}
         paddingLeft={level === 0 ? 0 : 3}
         onFocus={typeof tabIndex === 'number' && tabIndex > -1 ? handleFocus : undefined}
         ref={forwardedRef}
diff --git a/packages/sanity/src/core/presence/constants.ts b/packages/sanity/src/core/presence/constants.ts
index c60d107e01d..514dc24b0b3 100644
--- a/packages/sanity/src/core/presence/constants.ts
+++ b/packages/sanity/src/core/presence/constants.ts
@@ -10,7 +10,7 @@ export const DEFAULT_MAX_AVATARS_FIELDS = 3
 export const AVATAR_DISTANCE = -4
 
 // height/width of the avatars in pixels
-export const AVATAR_SIZE = 19
+export const AVATAR_SIZE = 25
 
 export const AVATAR_ARROW_HEIGHT = 4
 
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
index 99b8bb47059..dfdb69f7d1a 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
@@ -9,7 +9,7 @@ import {
   Card,
   Flex,
 } from '@sanity/ui'
-import styled, {css} from 'styled-components'
+import styled from 'styled-components'
 import {Button, MenuItem} from '../../../../../ui'
 import {CommentStatus} from '../../types'
 import {TOOLTIP_DELAY_PROPS} from '../../../../../ui/tooltip/constants'
@@ -19,18 +19,11 @@ const POPOVER_PROPS: MenuButtonProps['popover'] = {
   placement: 'bottom-end',
 }
 
-const FloatingCard = styled(Card)(({theme}) => {
-  const {space} = theme.sanity
-
-  return css`
-    gap: ${space[1] / 2}px;
-    padding: ${space[1] / 2}px;
-
-    &:empty {
-      display: none;
-    }
-  `
-})
+const FloatingCard = styled(Card)`
+  &:empty {
+    display: none;
+  }
+`
 
 interface CommentsListItemContextMenuProps {
   canDelete: boolean | undefined

From 8c27193189fd445a67468c7de710d93c03a29c04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Fri, 8 Dec 2023 11:40:05 +0100
Subject: [PATCH 066/163] fix(form): simplify and set status color using theme
 v2

---
 .../formField/FormFieldValidationStatus.tsx   | 66 ++++++++-----------
 1 file changed, 26 insertions(+), 40 deletions(-)

diff --git a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
index 85ae383e69a..d12c5356c27 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-import {hues} from '@sanity/color'
 import {ErrorOutlineIcon, InfoOutlineIcon, WarningOutlineIcon} from '@sanity/icons'
 import type {FormNodeValidation} from '@sanity/types'
 import {Box, Flex, Placement, Stack, Text} from '@sanity/ui'
@@ -28,12 +26,6 @@ export interface FormFieldValidationStatusProps {
 
 const EMPTY_ARRAY: never[] = []
 
-const VALIDATION_STYLES: Record<'error' | 'warning' | 'info', {color: string}> = {
-  error: {color: hues.red[500].hex},
-  warning: {color: hues.yellow[500].hex},
-  info: {color: hues.blue[500].hex},
-}
-
 const VALIDATION_ICONS = {
   error: ValidationErrorIcon,
   warning: ValidationWarningIcon,
@@ -44,27 +36,33 @@ const StyledStack = styled(Stack)`
   max-width: 200px;
 `
 
+const StatusText = styled(Text)<{$status: 'error' | 'warning' | 'info'}>(({$status}) => {
+  if ($status === 'error') {
+    return {'--card-icon-color': 'var(--card-badge-critical-icon-color)'}
+  }
+
+  if ($status === 'warning') {
+    return {'--card-icon-color': 'var(--card-badge-caution-icon-color)'}
+  }
+
+  if ($status === 'info') {
+    return {'--card-icon-color': 'var(--card-badge-primary-icon-color)'}
+  }
+
+  return {}
+})
+
 /** @internal */
 export function FormFieldValidationStatus(props: FormFieldValidationStatusProps) {
   const {validation = EMPTY_ARRAY, __unstable_showSummary: showSummary, fontSize, placement} = props
 
   const hasErrors = validation.some((v) => v.level === 'error')
   const hasWarnings = validation.some((v) => v.level === 'warning')
-  const hasInfo = validation.some((v) => v.level === 'info')
-
-  const StatusIcon = (() => {
-    if (hasErrors) return VALIDATION_ICONS.error
-    if (hasWarnings) return VALIDATION_ICONS.warning
-    if (hasInfo) return VALIDATION_ICONS.info
-    return undefined
-  })()
-
-  const statusStyle = (() => {
-    if (hasErrors) return VALIDATION_STYLES.error
-    if (hasWarnings) return VALIDATION_STYLES.warning
-    if (hasInfo) return VALIDATION_STYLES.info
-    return undefined
-  })()
+  // const hasInfo = validation.some((v) => v.level === 'info')
+
+  // eslint-disable-next-line no-nested-ternary
+  const status = hasErrors ? 'error' : hasWarnings ? 'warning' : 'info'
+  const StatusIcon = VALIDATION_ICONS[status]
 
   return (
     <TooltipWithNodes
@@ -87,9 +85,9 @@ export function FormFieldValidationStatus(props: FormFieldValidationStatusProps)
       fallbackPlacements={['bottom', 'right', 'left']}
     >
       <div>
-        <Text muted size={fontSize} weight="medium" style={statusStyle}>
+        <StatusText $status={status} size={fontSize} weight="medium">
           {StatusIcon && <StatusIcon />}
-        </Text>
+        </StatusText>
       </div>
     </TooltipWithNodes>
   )
@@ -98,26 +96,14 @@ export function FormFieldValidationStatus(props: FormFieldValidationStatusProps)
 function FormFieldValidationStatusItem(props: {validation: FormNodeValidation}) {
   const {validation} = props
 
-  const StatusIcon = (() => {
-    if (validation.level === 'error') return VALIDATION_ICONS.error
-    if (validation.level === 'warning') return VALIDATION_ICONS.warning
-    if (validation.level === 'info') return VALIDATION_ICONS.info
-    return undefined
-  })()
-
-  const statusStyle = (() => {
-    if (validation.level === 'error') return VALIDATION_STYLES.error
-    if (validation.level === 'warning') return VALIDATION_STYLES.warning
-    if (validation.level === 'info') return VALIDATION_STYLES.info
-    return undefined
-  })()
+  const StatusIcon = VALIDATION_ICONS[validation.level]
 
   return (
     <Flex>
       <Box marginRight={2}>
-        <Text size={1} style={statusStyle}>
+        <StatusText $status={validation.level} size={1}>
           {StatusIcon && <StatusIcon />}
-        </Text>
+        </StatusText>
       </Box>
       <Box flex={1}>
         <Text size={1}>{validation.message}</Text>

From 8e06418f27eb0c6c36ba990f3a463d808837e055 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Fri, 8 Dec 2023 11:40:44 +0100
Subject: [PATCH 067/163] fix(ui): align tooltip

---
 packages/sanity/src/ui/tooltip/Tooltip.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/ui/tooltip/Tooltip.tsx b/packages/sanity/src/ui/tooltip/Tooltip.tsx
index c466dd3a9db..334ead36112 100644
--- a/packages/sanity/src/ui/tooltip/Tooltip.tsx
+++ b/packages/sanity/src/ui/tooltip/Tooltip.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable no-restricted-imports */
 import {
+  Box,
   Flex,
   Hotkeys,
   HotkeysProps,
@@ -44,13 +45,24 @@ export const Tooltip = forwardRef(function Tooltip(
       arrow={false}
       boundaryElement={null}
       content={
-        <Flex align="center" gap={3}>
-          {content && <Text size={1}>{content}</Text>}
-          {hotkeys && <Hotkeys keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />}
+        <Flex align="center">
+          {content && (
+            <Box flex={1} padding={1}>
+              <Text size={1} weight="medium">
+                {content}
+              </Text>
+            </Box>
+          )}
+          {hotkeys && (
+            <Box flex="none">
+              <Hotkeys keys={hotkeys} />
+            </Box>
+          )}
         </Flex>
       }
       delay={TOOLTIP_DELAY_PROPS}
       fallbackPlacements={TOOLTIP_FALLBACK_PLACEMENTS}
+      padding={1}
       portal={portal}
       ref={ref}
       placement={placement}

From 8a9936bad172681300b5cf9fc93c80bff4f0dc79 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Fri, 8 Dec 2023 16:07:21 +0000
Subject: [PATCH 068/163] feat: new document status indicator, lockup and
 tooltips

---
 .../ReferenceInput/ReferenceLinkCard.tsx      |   1 +
 .../ReferenceInput/ReferencePreview.tsx       |  14 ++-
 packages/sanity/src/core/hooks/index.ts       |   1 -
 .../src/core/hooks/useDocumentStatus.ts       |  58 ----------
 .../components/SanityDefaultPreview.tsx       |  17 +--
 .../src/desk/components/paneItem/PaneItem.tsx |   1 -
 .../components/paneItem/PaneItemPreview.tsx   |   8 +-
 .../document/statusBar/DocumentStatusBar.tsx  |  18 +--
 .../statusBar/sparkline/DocumentSparkline.tsx |  44 ++++++--
 .../sparkline/DocumentStatusLine.tsx          |  45 --------
 .../DocumentStatusPulse.tsx                   |  17 ++-
 .../src/ui/documentStatus/DocumentStatus.tsx  | 103 ++++++++++--------
 .../DocumentStatusIndicator.tsx               |  61 +++++++++++
 .../src/ui/documentStatusIndicator/index.ts   |   1 +
 .../src/ui/tooltip/TooltipWithNodes.tsx       |   3 +-
 15 files changed, 193 insertions(+), 199 deletions(-)
 delete mode 100644 packages/sanity/src/core/hooks/useDocumentStatus.ts
 delete mode 100644 packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusLine.tsx
 create mode 100644 packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
 create mode 100644 packages/sanity/src/ui/documentStatusIndicator/index.ts

diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx
index 7f0f076ba75..a28e3c590ec 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx
@@ -48,6 +48,7 @@ export const ReferenceLinkCard = forwardRef(function ReferenceLinkCard(
     <StyledCard
       {...cardProps}
       {...linkProps}
+      data-ui="ReferenceLinkCard"
       ref={ref as unknown as React.ForwardedRef<HTMLDivElement>}
     />
   )
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
index 5aeb4d3efe6..38d240a042f 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
@@ -2,11 +2,11 @@ import React, {useMemo} from 'react'
 import {ObjectSchemaType} from '@sanity/types'
 import {Badge, Box, Inline} from '@sanity/ui'
 import {DocumentStatus} from '../../../../ui/documentStatus'
+import {DocumentStatusIndicator} from '../../../../ui/documentStatusIndicator'
 import {PreviewLayoutKey} from '../../../components'
 import {RenderPreviewCallback} from '../../types'
 import {useDocumentPresence} from '../../../store'
 import {DocumentPreviewPresence} from '../../../presence'
-import {useDocumentStatus} from '../../../hooks'
 import {ReferenceInfo} from './types'
 
 /**
@@ -44,7 +44,6 @@ export function ReferencePreview(props: {
   )
 
   const {draft, published} = preview
-  const tooltipLabel = useDocumentStatus({draft, published})
 
   const previewProps = useMemo(
     () => ({
@@ -57,24 +56,29 @@ export function ReferencePreview(props: {
               <DocumentPreviewPresence presence={documentPresence} />
             )}
 
-            <DocumentStatus draft={preview.draft} published={preview.published} />
+            <DocumentStatusIndicator
+              draft={preview.draft}
+              hidePublishedStatus
+              published={preview.published}
+            />
           </Inline>
         </Box>
       ),
       layout,
       schemaType: refType,
-      tooltipLabel,
+      tooltip: <DocumentStatus draft={draft} published={published} />,
       value: previewStub,
     }),
     [
       documentPresence,
+      draft,
       layout,
       preview.draft,
       preview.published,
       previewStub,
+      published,
       refType,
       showTypeLabel,
-      tooltipLabel,
     ],
   )
 
diff --git a/packages/sanity/src/core/hooks/index.ts b/packages/sanity/src/core/hooks/index.ts
index 2d855c9822c..19f61d28234 100644
--- a/packages/sanity/src/core/hooks/index.ts
+++ b/packages/sanity/src/core/hooks/index.ts
@@ -4,7 +4,6 @@ export * from './useDataset'
 export * from './useDateTimeFormat'
 export * from './useDocumentOperation'
 export * from './useDocumentOperationEvent'
-export * from './useDocumentStatus'
 export * from './useEditState'
 export * from './useFeatureEnabled'
 export * from './useFormattedDuration'
diff --git a/packages/sanity/src/core/hooks/useDocumentStatus.ts b/packages/sanity/src/core/hooks/useDocumentStatus.ts
deleted file mode 100644
index 356bfaebee9..00000000000
--- a/packages/sanity/src/core/hooks/useDocumentStatus.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import {PreviewValue, SanityDocument} from '@sanity/types'
-import {useIntlDateTimeFormat} from '../i18n'
-import {useRelativeTime} from './useRelativeTime'
-
-interface DocumentStatusTimeAgoOptions {
-  draft?: PreviewValue | Partial<SanityDocument> | null
-  hidePublishedDate?: boolean
-  published?: PreviewValue | Partial<SanityDocument> | null
-  absoluteDate?: boolean
-}
-
-/**
- * React hook which returns a human readable string of the provided document's status.
- *
- * @internal
- * @hidden
- */
-export function useDocumentStatus({
-  absoluteDate,
-  draft,
-  hidePublishedDate,
-  published,
-}: DocumentStatusTimeAgoOptions): string | undefined {
-  const draftUpdatedAt = draft && '_updatedAt' in draft ? draft._updatedAt : ''
-  const publishedUpdatedAt = published && '_updatedAt' in published ? published._updatedAt : ''
-
-  const intlDateFormat = useIntlDateTimeFormat({
-    dateStyle: 'medium',
-    timeStyle: 'short',
-  })
-
-  const draftDateAbsolute = draftUpdatedAt && intlDateFormat.format(new Date(draftUpdatedAt))
-  const publishedDateAbsolute =
-    publishedUpdatedAt && intlDateFormat.format(new Date(publishedUpdatedAt))
-
-  const draftUpdatedTimeAgo = useRelativeTime(draftUpdatedAt || '', {
-    minimal: true,
-    useTemporalPhrase: true,
-  })
-  const publishedUpdatedTimeAgo = useRelativeTime(publishedUpdatedAt || '', {
-    minimal: true,
-    useTemporalPhrase: true,
-  })
-
-  const publishedDate = absoluteDate ? publishedDateAbsolute : publishedUpdatedTimeAgo
-  const updatedDate = absoluteDate ? draftDateAbsolute : draftUpdatedTimeAgo
-
-  const documentStatus = [
-    // Published status
-    publishedUpdatedTimeAgo
-      ? `Published${hidePublishedDate ? '' : ` ${publishedDate}`}`
-      : `Not published`,
-    // Last updated (draft) status
-    ...(draftUpdatedTimeAgo ? [`(Updated ${updatedDate})`] : []),
-  ]
-
-  return documentStatus.join(' ')
-}
diff --git a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
index 423497f6dd7..623e28e826f 100644
--- a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
+++ b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
@@ -7,13 +7,14 @@ import React, {
   ElementType,
   isValidElement,
   ReactElement,
+  ReactNode,
   useCallback,
   useMemo,
 } from 'react'
 import {isValidElementType} from 'react-is'
 import {SanityImageSource} from '@sanity/image-url/lib/types/types'
 import {isImageSource} from '@sanity/asset-utils'
-import {Tooltip} from '../../../ui'
+import {TooltipWithNodes} from '../../../ui'
 import {PreviewProps} from '../../components/previews'
 import {useClient} from '../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../studioClient'
@@ -28,7 +29,7 @@ function FallbackIcon() {
 export interface SanityDefaultPreviewProps extends Omit<PreviewProps, 'renderDefault'> {
   error?: Error | null
   icon?: ElementType | false
-  tooltipLabel?: string
+  tooltip?: ReactNode
 }
 
 /**
@@ -36,7 +37,7 @@ export interface SanityDefaultPreviewProps extends Omit<PreviewProps, 'renderDef
  * @internal
  * */
 export function SanityDefaultPreview(props: SanityDefaultPreviewProps): ReactElement {
-  const {icon, layout, media: mediaProp, imageUrl, title, tooltipLabel, ...restProps} = props
+  const {icon, layout, media: mediaProp, imageUrl, title, tooltip, ...restProps} = props
 
   const client = useClient(DEFAULT_STUDIO_CLIENT_OPTIONS)
   const imageBuilder = useMemo(() => imageUrlBuilder(client), [client])
@@ -125,17 +126,17 @@ export function SanityDefaultPreview(props: SanityDefaultPreviewProps): ReactEle
     previewProps,
   )
 
-  if (tooltipLabel) {
+  if (tooltip) {
     return (
-      <Tooltip
-        content={tooltipLabel}
-        disabled={!tooltipLabel}
+      <TooltipWithNodes
+        content={tooltip}
+        disabled={!tooltip}
         fallbackPlacements={['top-end']}
         placement="bottom-end"
       >
         {/* Currently tooltips won't trigger without a wrapping element */}
         <div>{children}</div>
-      </Tooltip>
+      </TooltipWithNodes>
     )
   }
 
diff --git a/packages/sanity/src/desk/components/paneItem/PaneItem.tsx b/packages/sanity/src/desk/components/paneItem/PaneItem.tsx
index 93f20618a93..187e219440d 100644
--- a/packages/sanity/src/desk/components/paneItem/PaneItem.tsx
+++ b/packages/sanity/src/desk/components/paneItem/PaneItem.tsx
@@ -135,7 +135,6 @@ export function PaneItem(props: PaneItemProps) {
       __unstable_focusRing
       as={Link as FIXME}
       data-as="a"
-      data-ui="PaneItem"
       margin={margin}
       marginBottom={marginBottom}
       marginTop={marginTop}
diff --git a/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx b/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
index 796d508032b..43fd11a2618 100644
--- a/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
+++ b/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
@@ -4,6 +4,7 @@ import {isNumber, isString} from 'lodash'
 import {Inline, TooltipDelayGroupProvider} from '@sanity/ui'
 import {useMemoObservable} from 'react-rx'
 import {DocumentStatus} from '../../../ui/documentStatus'
+import {DocumentStatusIndicator} from '../../../ui/documentStatusIndicator'
 import {TOOLTIP_DELAY_PROPS} from '../../../ui/tooltip/constants'
 import type {PaneItemPreviewState} from './types'
 import {
@@ -15,7 +16,6 @@ import {
   getPreviewValueWithFallback,
   SanityDefaultPreview,
   isRecord,
-  useDocumentStatus,
 } from 'sanity'
 
 export interface PaneItemPreviewProps {
@@ -54,12 +54,12 @@ export function PaneItemPreview(props: PaneItemPreviewProps) {
     <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
       <Inline space={4}>
         {presence && presence.length > 0 && <DocumentPreviewPresence presence={presence} />}
-        <DocumentStatus draft={draft} published={published} />
+        <DocumentStatusIndicator draft={draft} hidePublishedStatus published={published} />
       </Inline>
     </TooltipDelayGroupProvider>
   )
 
-  const tooltipLabel = useDocumentStatus({draft, published})
+  const tooltip = <DocumentStatus draft={draft} published={published} />
 
   return (
     <SanityDefaultPreview
@@ -68,7 +68,7 @@ export function PaneItemPreview(props: PaneItemPreviewProps) {
       icon={icon}
       layout={layout}
       status={status}
-      tooltipLabel={tooltipLabel}
+      tooltip={tooltip}
     />
   )
 }
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
index 46b2731a45c..b8744c27d02 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
@@ -1,6 +1,5 @@
 import React, {useMemo} from 'react'
-import styled from 'styled-components'
-import {Box, Flex} from '@sanity/ui'
+import {Flex} from '@sanity/ui'
 import {SpacerButton} from '../../../../ui/spacerButton'
 import {useDocumentPane} from '../useDocumentPane'
 import {DocumentStatusBarActions, HistoryStatusBarActions} from './DocumentStatusBarActions'
@@ -11,11 +10,6 @@ export interface DocumentStatusBarProps {
   actionsBoxRef?: React.Ref<HTMLDivElement>
 }
 
-const DocumentActionsFlex = styled(Flex)`
-  min-width: 10em;
-  max-width: 16em;
-`
-
 export function DocumentStatusBar(props: DocumentStatusBarProps) {
   const {actionsBoxRef} = props
   const {timelineStore} = useDocumentPane()
@@ -25,15 +19,13 @@ export function DocumentStatusBar(props: DocumentStatusBarProps) {
 
   return useMemo(
     () => (
-      <Flex align="center" gap={1} padding={2} paddingLeft={3}>
-        <Box flex={[1, 2]}>
-          <DocumentSparkline />
-        </Box>
+      <Flex align="center" gap={1} justify="space-between" padding={2} paddingLeft={3}>
+        <DocumentSparkline />
 
-        <DocumentActionsFlex flex={1} justify="flex-end" ref={actionsBoxRef}>
+        <Flex justify="flex-end" ref={actionsBoxRef} style={{flexShrink: 0, marginLeft: 'auto'}}>
           <SpacerButton size="large" />
           {showingRevision ? <HistoryStatusBarActions /> : <DocumentStatusBarActions />}
-        </DocumentActionsFlex>
+        </Flex>
       </Flex>
     ),
     [actionsBoxRef, showingRevision],
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
index de0bf3b593b..952fb06132d 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
@@ -1,8 +1,10 @@
-import {Flex, useElementSize} from '@sanity/ui'
+import {Flex} from '@sanity/ui'
 import React, {useState, memo, useLayoutEffect, useEffect} from 'react'
+import {DocumentStatusIndicator} from '../../../../../ui/documentStatusIndicator'
+import {DocumentStatus} from '../../../../../ui/documentStatus'
+import {TooltipWithNodes} from '../../../../../ui'
 import {useDocumentPane} from '../../useDocumentPane'
 import {DocumentBadges} from './DocumentBadges'
-import {DocumentStatusLine} from './DocumentStatusLine'
 import {DocumentStatusPulse} from './DocumentStatusPulse'
 import {useSyncState} from 'sanity'
 
@@ -15,10 +17,6 @@ export const DocumentSparkline = memo(function DocumentSparkline() {
 
   const lastUpdated = value?._updatedAt
 
-  const [rootFlexElement, setRootFlexElement] = useState<HTMLDivElement | null>(null)
-  const rootFlexRect = useElementSize(rootFlexElement)
-  const collapsed = !rootFlexRect || rootFlexRect?.content.width < 380
-
   const [status, setStatus] = useState<'saved' | 'syncing' | null>(null)
 
   // eslint-disable-next-line consistent-return
@@ -53,10 +51,36 @@ export const DocumentSparkline = memo(function DocumentSparkline() {
   }
 
   return (
-    <Flex align="center" data-ui="DocumentSparkline" ref={setRootFlexElement}>
-      <Flex align="center" flex={1} gap={3}>
-        <DocumentStatusLine collapsed={collapsed} editState={editState} />
-        <DocumentStatusPulse collapsed={collapsed} status={status || undefined} />
+    <Flex align="center" data-ui="DocumentSparkline">
+      <Flex align="center" flex={1} gap={3} paddingY={1} wrap="wrap">
+        {!status && (
+          <TooltipWithNodes
+            content={
+              <DocumentStatus
+                absoluteDate
+                draft={editState?.draft}
+                published={editState?.published}
+              />
+            }
+            placement="top"
+          >
+            <Flex align="center" gap={2} paddingY={1}>
+              <Flex align="center" justify="center" style={{width: '1em'}}>
+                <DocumentStatusIndicator
+                  draft={editState?.draft}
+                  published={editState?.published}
+                />
+              </Flex>
+              <DocumentStatus
+                draft={editState?.draft}
+                published={editState?.published}
+                singleLine
+              />
+            </Flex>
+          </TooltipWithNodes>
+        )}
+
+        <DocumentStatusPulse status={status || undefined} />
         {badges && <DocumentBadges />}
       </Flex>
     </Flex>
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusLine.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusLine.tsx
deleted file mode 100644
index cb5f78a75a4..00000000000
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusLine.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import {Box, Flex, Text} from '@sanity/ui'
-import React from 'react'
-import {Tooltip} from '../../../../../ui'
-import {DocumentStatus} from '../../../../../ui/documentStatus'
-import {EditStateFor, useDocumentStatus} from 'sanity'
-
-interface DocumentStatusLineProps {
-  collapsed?: boolean
-  editState: EditStateFor | null
-}
-
-export function DocumentStatusLine({collapsed, editState}: DocumentStatusLineProps) {
-  const statusTimeAgo = useDocumentStatus({
-    draft: editState?.draft,
-    hidePublishedDate: collapsed,
-    published: editState?.published,
-  })
-
-  const statusAbsolute = useDocumentStatus({
-    absoluteDate: true,
-    draft: editState?.draft,
-    published: editState?.published,
-  })
-
-  if (!editState) {
-    return null
-  }
-
-  return (
-    <Tooltip content={statusAbsolute}>
-      <Flex align="center" gap={3} paddingLeft={1} paddingY={2}>
-        <DocumentStatus
-          draft={editState?.draft}
-          published={editState?.published}
-          showPublishedIcon
-        />
-        <Box flex={1}>
-          <Text muted textOverflow="ellipsis" size={1} weight="medium">
-            {statusTimeAgo}
-          </Text>
-        </Box>
-      </Flex>
-    </Tooltip>
-  )
-}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx
index 80c6e57f28d..7b925ac61c7 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx
@@ -5,7 +5,6 @@ import {TextWithTone} from 'sanity'
 
 type StatusType = 'saved' | 'syncing'
 interface ReviewChangesButtonProps {
-  collapsed?: boolean
   status?: StatusType
 }
 
@@ -21,7 +20,7 @@ const STATUS_DICTIONARY: Record<StatusType, {text: string; tone: ButtonTone}> =
 }
 
 export const DocumentStatusPulse = (props: ReviewChangesButtonProps) => {
-  const {collapsed, status} = props
+  const {status} = props
 
   if (status !== 'saved' && status !== 'syncing') {
     return null
@@ -30,15 +29,15 @@ export const DocumentStatusPulse = (props: ReviewChangesButtonProps) => {
   const currentStatus = STATUS_DICTIONARY[status]
 
   return (
-    <Flex align="center" gap={3}>
-      <TextWithTone size={1} tone={currentStatus.tone}>
-        <AnimatedStatusIcon status={status} />
-      </TextWithTone>
-      {!collapsed && (
+    <Flex align="center" gap={2}>
+      <Flex align="center" justify="center" style={{width: '1em'}}>
         <TextWithTone size={1} tone={currentStatus.tone}>
-          {currentStatus.text}
+          <AnimatedStatusIcon status={status} />
         </TextWithTone>
-      )}
+      </Flex>
+      <TextWithTone size={1} tone={currentStatus.tone}>
+        {currentStatus.text}
+      </TextWithTone>
     </Flex>
   )
 }
diff --git a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
index ba260d7596e..4a3ccaba184 100644
--- a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
+++ b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
@@ -1,56 +1,71 @@
-import {CheckmarkIcon} from '@sanity/icons'
 import {PreviewValue, SanityDocument} from '@sanity/types'
-import {Box, ButtonTone, Flex} from '@sanity/ui'
+import {Flex, Text} from '@sanity/ui'
 import React from 'react'
-import styled, {css} from 'styled-components'
-import {TextWithTone, useDocumentStatus} from '../../core'
+import styled from 'styled-components'
+import {useIntlDateTimeFormat, useRelativeTime} from '../../core'
 
-export interface DocumentStatusProps {
+interface DocumentStatusProps {
+  absoluteDate?: boolean
   draft?: PreviewValue | Partial<SanityDocument> | null
   published?: PreviewValue | Partial<SanityDocument> | null
-  showPublishedIcon?: boolean
+  singleLine?: boolean
 }
 
-const SIZE = 5 // px
-
-const Dot = styled(Box)<{$draft?: boolean; $published: boolean}>(({theme, $draft, $published}) => {
-  let tone: ButtonTone = 'default'
-  if ($published) {
-    tone = $draft ? 'caution' : 'positive'
-  }
-
-  return css`
-    background: ${$published
-      ? theme.sanity.color.solid[tone].enabled.bg
-      : 'var(--card-muted-fg-color)'};
-    border-radius: ${SIZE}px;
-    height: ${SIZE}px;
-    opacity: ${$published ? 1 : 0.25};
-    width: ${SIZE}px;
-  `
-})
-
-export function DocumentStatus({draft, published, showPublishedIcon}: DocumentStatusProps) {
-  const statusTimeAgo = useDocumentStatus({draft, published})
-
-  if (!draft && !published) {
-    return null
-  }
-
-  if (!draft && published) {
-    if (showPublishedIcon) {
-      return (
-        <TextWithTone size={1} tone="positive">
-          <CheckmarkIcon aria-label={statusTimeAgo} />
-        </TextWithTone>
-      )
-    }
-    return null
-  }
+const StyledText = styled(Text)`
+  white-space: nowrap;
+`
 
+export function DocumentStatus({absoluteDate, draft, published, singleLine}: DocumentStatusProps) {
+  const draftUpdatedAt = draft && '_updatedAt' in draft ? draft._updatedAt : ''
+  const publishedUpdatedAt = published && '_updatedAt' in published ? published._updatedAt : ''
+
+  const intlDateFormat = useIntlDateTimeFormat({
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  })
+
+  const draftDateAbsolute = draftUpdatedAt && intlDateFormat.format(new Date(draftUpdatedAt))
+  const publishedDateAbsolute =
+    publishedUpdatedAt && intlDateFormat.format(new Date(publishedUpdatedAt))
+
+  const draftUpdatedTimeAgo = useRelativeTime(draftUpdatedAt || '', {
+    minimal: true,
+    useTemporalPhrase: true,
+  })
+  const publishedUpdatedTimeAgo = useRelativeTime(publishedUpdatedAt || '', {
+    minimal: true,
+    useTemporalPhrase: true,
+  })
+
+  const publishedDate = absoluteDate ? publishedDateAbsolute : publishedUpdatedTimeAgo
+  const updatedDate = absoluteDate ? draftDateAbsolute : draftUpdatedTimeAgo
+
+  // @todo: localize
   return (
-    <Flex align="center" height="fill" justify="center" style={{flexShrink: 0}}>
-      <Dot aria-label={statusTimeAgo} $draft={!!draft} $published={!!published} />
+    <Flex
+      align={singleLine ? 'center' : 'flex-start'}
+      direction={singleLine ? 'row' : 'column'}
+      gap={2}
+      wrap="nowrap"
+    >
+      {!publishedDate && (
+        // eslint-disable-next-line i18next/no-literal-string
+        <StyledText size={1} weight="medium">
+          Not published
+        </StyledText>
+      )}
+      {publishedDate && (
+        // eslint-disable-next-line i18next/no-literal-string
+        <StyledText size={1} weight="medium">
+          Published {publishedDate}
+        </StyledText>
+      )}
+      {updatedDate && (
+        // eslint-disable-next-line i18next/no-literal-string
+        <StyledText muted size={1} wrap="nowrap">
+          Updated {updatedDate}
+        </StyledText>
+      )}
     </Flex>
   )
 }
diff --git a/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx b/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
new file mode 100644
index 00000000000..6263d08dbfe
--- /dev/null
+++ b/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
@@ -0,0 +1,61 @@
+import {PreviewValue, SanityDocument} from '@sanity/types'
+import {Box, ButtonTone, Flex} from '@sanity/ui'
+import React from 'react'
+import styled, {css} from 'styled-components'
+
+export interface DocumentStatusProps {
+  draft?: PreviewValue | Partial<SanityDocument> | null
+  hidePublishedStatus?: boolean
+  published?: PreviewValue | Partial<SanityDocument> | null
+}
+
+const SIZE = 5 // px
+
+const Dot = styled(Box)<{$draft?: boolean; $hidePublishedStatus: boolean; $published: boolean}>(({
+  theme,
+  $draft,
+  $hidePublishedStatus,
+  $published,
+}) => {
+  let tone: ButtonTone = 'default'
+  if ($published) {
+    tone = $draft ? 'caution' : 'positive'
+  }
+
+  return css`
+    background: ${$published
+      ? theme.sanity.v2?.color.selectable[tone].enabled.badge[tone].dot
+      : theme.sanity.v2?.color.selectable[tone].disabled.badge[tone].dot};
+    border-radius: ${SIZE}px;
+    display: ${$hidePublishedStatus && $published && !$draft ? 'none' : 'block'};
+    height: ${SIZE}px;
+    opacity: ${$hidePublishedStatus && $published && !$draft ? 0 : 1};
+    width: ${SIZE}px;
+
+    [data-ui='PreviewCard']:hover & {
+      opacity: 1;
+    }
+    [data-ui='PreviewCard'][data-selected] & {
+      opacity: 1;
+    }
+    [data-ui='ReferenceLinkCard']:hover & {
+      opacity: 1;
+    }
+  `
+})
+
+export function DocumentStatusIndicator({
+  draft,
+  hidePublishedStatus,
+  published,
+}: DocumentStatusProps) {
+  if (!draft && !published) {
+    return null
+  }
+
+  return (
+    <Flex align="center" height="fill" justify="center" style={{flexShrink: 0}}>
+      <Dot $draft={!!draft} $hidePublishedStatus={!!hidePublishedStatus} $published={!!published} />
+    </Flex>
+  )
+}
diff --git a/packages/sanity/src/ui/documentStatusIndicator/index.ts b/packages/sanity/src/ui/documentStatusIndicator/index.ts
new file mode 100644
index 00000000000..a4cd2a614fe
--- /dev/null
+++ b/packages/sanity/src/ui/documentStatusIndicator/index.ts
@@ -0,0 +1 @@
+export * from './DocumentStatusIndicator'
diff --git a/packages/sanity/src/ui/tooltip/TooltipWithNodes.tsx b/packages/sanity/src/ui/tooltip/TooltipWithNodes.tsx
index ebbad946260..94ebce06a42 100644
--- a/packages/sanity/src/ui/tooltip/TooltipWithNodes.tsx
+++ b/packages/sanity/src/ui/tooltip/TooltipWithNodes.tsx
@@ -20,7 +20,7 @@ export const TooltipWithNodes = forwardRef(function Tooltip(
   props: TooltipWithNodesProps,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {placement, ...rest} = props
+  const {placement, portal = true, ...rest} = props
   return (
     <UITooltip
       animate
@@ -28,6 +28,7 @@ export const TooltipWithNodes = forwardRef(function Tooltip(
       boundaryElement={null}
       delay={TOOLTIP_DELAY_PROPS}
       placement={placement || 'bottom'}
+      portal={portal}
       ref={ref}
       {...rest}
     />

From 5e1a1f5d9bf47565e6ab9c51c67852ef1658a8cf Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Fri, 8 Dec 2023 17:19:35 +0000
Subject: [PATCH 069/163] fix: force useRelativeTime to always render idiomatic
 dates with weeks in full

---
 packages/sanity/src/core/hooks/useRelativeTime.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/hooks/useRelativeTime.ts b/packages/sanity/src/core/hooks/useRelativeTime.ts
index 3d938fd6e58..6fddce0f6c3 100644
--- a/packages/sanity/src/core/hooks/useRelativeTime.ts
+++ b/packages/sanity/src/core/hooks/useRelativeTime.ts
@@ -93,9 +93,17 @@ function useFormatRelativeTime(date: Date | string, opts: RelativeTimeOptions =
   const format = useCallback(
     function formatWithUnit(count: number, unit: Intl.RelativeTimeFormatUnit): string {
       const isNextOrPrevDay = unit === 'day' && Math.abs(count) === 1
+      const isNextOrPrevWeek = unit === 'week' && Math.abs(count) === 1
+
       if (useTemporalPhrase || isNextOrPrevDay) {
         return intlCache
-          .relativeTimeFormat(currentLocale, {style: minimal ? 'narrow' : 'long', numeric: 'auto'})
+          .relativeTimeFormat(currentLocale, {
+            // Force 'long' formatting for dates within the next/previous week as `Intl.RelativeTimeFormat`
+            // will display these as `next wk.` or `last wk.` – which we don't want!
+            // Idiomatic dates should always be displayed in full. There may be a more elegant way to handle this.
+            style: minimal && !isNextOrPrevWeek ? 'narrow' : 'long',
+            numeric: 'auto',
+          })
           .format(count, unit)
       }
 

From f79922bd3b61f10590637f9acca7fe1b7b0fca1c Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Fri, 8 Dec 2023 17:36:09 +0000
Subject: [PATCH 070/163] fix: use correct document status indicator colors,
 update document status tooltip spacing

---
 packages/sanity/src/ui/documentStatus/DocumentStatus.tsx        | 2 +-
 .../src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
index 4a3ccaba184..26f61ae2f05 100644
--- a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
+++ b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
@@ -45,7 +45,7 @@ export function DocumentStatus({absoluteDate, draft, published, singleLine}: Doc
     <Flex
       align={singleLine ? 'center' : 'flex-start'}
       direction={singleLine ? 'row' : 'column'}
-      gap={2}
+      gap={singleLine ? 2 : 3}
       wrap="nowrap"
     >
       {!publishedDate && (
diff --git a/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx b/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
index 6263d08dbfe..c5099118871 100644
--- a/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
+++ b/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
@@ -24,7 +24,7 @@ const Dot = styled(Box)<{$draft?: boolean; $hidePublishedStatus: boolean; $publi
 
   return css`
     background: ${$published
-      ? theme.sanity.v2?.color.selectable[tone].enabled.badge[tone].dot
+      ? theme.sanity.v2?.color.selectable[tone].disabled.badge[tone].icon
       : theme.sanity.v2?.color.selectable[tone].disabled.badge[tone].dot};
     border-radius: ${SIZE}px;
     display: ${$hidePublishedStatus && $published && !$draft ? 'none' : 'block'};

From 09fbadc8dcebd0f6b65f5885a21a3fb78705e629 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Fri, 8 Dec 2023 17:43:13 +0000
Subject: [PATCH 071/163] chore: update workshop story

---
 .../statusBar/__workshop__/DocumentStatusPulseStory.tsx      | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx
index d0be4a9dc55..91267e55f9f 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx
@@ -1,5 +1,5 @@
 import {Card, Flex} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
+import {useSelect} from '@sanity/ui-workshop'
 import React from 'react'
 
 import {DocumentStatusPulse} from '../sparkline/DocumentStatusPulse'
@@ -10,13 +10,12 @@ const STATUS_OPTIONS: Record<string, 'saved' | 'syncing'> = {
 }
 
 export default function DocumentStatusPulseStory() {
-  const collapsed = useBoolean('Collapsed', false)
   const status = useSelect('Status', STATUS_OPTIONS) || 'saved'
 
   return (
     <Card height="fill">
       <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-        <DocumentStatusPulse status={status} collapsed={collapsed} />
+        <DocumentStatusPulse status={status} />
       </Flex>
     </Card>
   )

From 8dc43450bf49147e501b3dab5253a56dcfcd6b3b Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sat, 9 Dec 2023 01:05:56 +0000
Subject: [PATCH 072/163] chore: update snapshots

---
 packages/sanity/src/core/studio/Studio.test.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/core/studio/Studio.test.tsx b/packages/sanity/src/core/studio/Studio.test.tsx
index 47ec351045f..94d5a40d824 100644
--- a/packages/sanity/src/core/studio/Studio.test.tsx
+++ b/packages/sanity/src/core/studio/Studio.test.tsx
@@ -45,7 +45,7 @@ describe('Studio', () => {
       const html = renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))
 
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-pGaPU gWleq sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-ddDelH izztwi\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-jbiuYu fJnfJf\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -62,7 +62,7 @@ describe('Studio', () => {
     try {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-pGaPU gWleq sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-ddDelH izztwi\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-jbiuYu fJnfJf\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -82,7 +82,7 @@ describe('Studio', () => {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       node.innerHTML = html
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-pGaPU gWleq sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-ddDelH izztwi\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-jbiuYu fJnfJf\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
       document.head.innerHTML += sheet.getStyleTags()
 

From 277d96c7d710bc22fd09db6567b029c89a846b43 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Mon, 11 Dec 2023 02:55:06 +0000
Subject: [PATCH 073/163] refactor: remove TooltipWithNodes component, no
 longer infer aria-label in buttons

---
 .eslintrc.cjs                                 |  1 -
 .../src/core/components/TooltipOfDisabled.tsx | 21 ++---
 .../previews/general/MediaPreview.tsx         | 11 +--
 .../field/diff/components/DiffTooltip.tsx     | 10 +--
 .../formField/FormFieldValidationStatus.tsx   |  6 +-
 .../inputs/PortableText/object/Annotation.tsx |  6 +-
 .../PortableText/object/BlockObject.tsx       |  6 +-
 .../PortableText/object/InlineObject.tsx      |  6 +-
 .../inputs/PortableText/text/TextBlock.tsx    |  6 +-
 .../inputs/ReferenceInput/CreateButton.tsx    | 10 +--
 .../ReferenceInput/PreviewReferenceValue.tsx  | 10 +--
 .../src/core/presence/PresenceTooltip.tsx     |  6 +-
 .../components/SanityDefaultPreview.tsx       |  6 +-
 .../navbar/new-document/NewDocumentButton.tsx | 16 ++--
 .../new-document/NewDocumentListOption.tsx    |  6 +-
 .../filters/addFilter/items/FilterTooltip.tsx |  6 +-
 .../inputs/date/ParsedDateTextInput.tsx       |  6 +-
 .../searchResults/item/DebugOverlay.tsx       |  6 +-
 .../src/components/CommentBreadcrumbs.tsx     |  6 +-
 .../pte/blocks/MentionInlineBlock.tsx         |  6 +-
 .../InsufficientPermissionsMessageTooltip.tsx |  6 +-
 .../document/statusBar/ActionMenuButton.tsx   |  6 +-
 .../statusBar/DocumentStatusBarActions.tsx    |  6 +-
 .../statusBar/sparkline/DocumentSparkline.tsx |  6 +-
 packages/sanity/src/ui/button/Button.tsx      |  9 +--
 packages/sanity/src/ui/tooltip/Tooltip.tsx    | 79 +++++++++----------
 .../src/ui/tooltip/TooltipWithNodes.tsx       | 36 ---------
 packages/sanity/src/ui/tooltip/index.ts       |  1 -
 28 files changed, 129 insertions(+), 177 deletions(-)
 delete mode 100644 packages/sanity/src/ui/tooltip/TooltipWithNodes.tsx

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index a92c3a8b9ef..865400d8a75 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -255,7 +255,6 @@ const config = {
                   'TabProps',
                   'Tooltip',
                   'TooltipProps',
-                  'TooltipWithNodes',
                 ],
                 message:
                   'Please use the (more opinionated) exported components in sanity/src/ui instead.',
diff --git a/packages/sanity/src/core/components/TooltipOfDisabled.tsx b/packages/sanity/src/core/components/TooltipOfDisabled.tsx
index 7f20544464a..1a58473a39f 100644
--- a/packages/sanity/src/core/components/TooltipOfDisabled.tsx
+++ b/packages/sanity/src/core/components/TooltipOfDisabled.tsx
@@ -1,13 +1,14 @@
 import React, {forwardRef} from 'react'
-import {TooltipWithNodes, TooltipWithNodesProps} from '../../ui'
+import {Tooltip, TooltipProps} from '../../ui'
 
 /** @internal */
-export const TooltipOfDisabled = forwardRef<HTMLDivElement, TooltipWithNodesProps>(
-  function DisabledTooltip({children, content, disabled, ...restProps}, ref) {
-    return (
-      <TooltipWithNodes {...restProps} content={content} disabled={disabled || !content} ref={ref}>
-        <div>{children}</div>
-      </TooltipWithNodes>
-    )
-  },
-)
+export const TooltipOfDisabled = forwardRef<HTMLDivElement, TooltipProps>(function DisabledTooltip(
+  {children, content, disabled, ...restProps},
+  ref,
+) {
+  return (
+    <Tooltip {...restProps} content={content} disabled={disabled || !content} ref={ref}>
+      <div>{children}</div>
+    </Tooltip>
+  )
+})
diff --git a/packages/sanity/src/core/components/previews/general/MediaPreview.tsx b/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
index 4546d3c5c4c..5501d398ae8 100644
--- a/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
+++ b/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
 import {Box, Text} from '@sanity/ui'
-import {TooltipWithNodes} from '../../../../ui'
+import {Tooltip} from '../../../../ui'
 import {CircularProgress} from '../../progress'
 import {Media} from '../_common/Media'
 import {PREVIEW_SIZES} from '../constants'
@@ -74,12 +74,7 @@ export function MediaPreview(props: MediaPreviewProps) {
       <RootBox data-testid="media-preview" flex={1} overflow="hidden">
         <div style={STYLES_PADDER} />
 
-        <TooltipWithNodes
-          content={tooltipContent}
-          disabled={!tooltipContent}
-          placement="top"
-          portal
-        >
+        <Tooltip content={tooltipContent} disabled={!tooltipContent} placement="top" portal>
           <MediaFlex>
             {isPlaceholder ? (
               <MediaSkeleton />
@@ -100,7 +95,7 @@ export function MediaPreview(props: MediaPreviewProps) {
               </ProgressFlex>
             )}
           </MediaFlex>
-        </TooltipWithNodes>
+        </Tooltip>
 
         {children}
       </RootBox>
diff --git a/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx b/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
index 40e8f21ca03..329acd1e06d 100644
--- a/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
+++ b/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
@@ -1,7 +1,7 @@
 import type {Path} from '@sanity/types'
 import {Text, Stack, Flex, Inline} from '@sanity/ui'
 import React from 'react'
-import {TooltipWithNodes, TooltipWithNodesProps} from '../../../../ui'
+import {Tooltip, TooltipProps} from '../../../../ui'
 import {LegacyLayerProvider, UserAvatar} from '../../../components'
 import {useRelativeTime} from '../../../hooks'
 import {useUser} from '../../../store'
@@ -10,7 +10,7 @@ import type {AnnotationDetails, Diff} from '../../types'
 import {getAnnotationAtPath, useAnnotationColor} from '../annotations'
 
 /** @internal */
-export interface DiffTooltipProps extends TooltipWithNodesProps {
+export interface DiffTooltipProps extends TooltipProps {
   children: React.ReactElement
   description?: React.ReactNode
   diff: Diff
@@ -18,7 +18,7 @@ export interface DiffTooltipProps extends TooltipWithNodesProps {
 }
 
 /** @internal */
-export interface DiffTooltipWithAnnotationsProps extends TooltipWithNodesProps {
+export interface DiffTooltipWithAnnotationsProps extends TooltipProps {
   annotations: AnnotationDetails[]
   children: React.ReactElement
   description?: React.ReactNode
@@ -59,9 +59,9 @@ function DiffTooltipWithAnnotation(props: DiffTooltipWithAnnotationsProps) {
 
   return (
     <LegacyLayerProvider zOffset="paneFooter">
-      <TooltipWithNodes content={content} portal {...restProps}>
+      <Tooltip content={content} portal {...restProps}>
         {children}
-      </TooltipWithNodes>
+      </Tooltip>
     </LegacyLayerProvider>
   )
 }
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
index d12c5356c27..3dff87aa0ff 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
@@ -4,7 +4,7 @@ import {Box, Flex, Placement, Stack, Text} from '@sanity/ui'
 import styled from 'styled-components'
 import {useTranslation} from '../../../i18n'
 import {useListFormat} from '../../../hooks'
-import {TooltipWithNodes} from '../../../../ui'
+import {Tooltip} from '../../../../ui'
 
 /** @internal */
 export interface FormFieldValidationStatusProps {
@@ -65,7 +65,7 @@ export function FormFieldValidationStatus(props: FormFieldValidationStatusProps)
   const StatusIcon = VALIDATION_ICONS[status]
 
   return (
-    <TooltipWithNodes
+    <Tooltip
       content={
         <StyledStack space={3}>
           {showSummary && <FormFieldValidationSummary validation={validation} />}
@@ -89,7 +89,7 @@ export function FormFieldValidationStatus(props: FormFieldValidationStatusProps)
           {StatusIcon && <StatusIcon />}
         </StatusText>
       </div>
-    </TooltipWithNodes>
+    </Tooltip>
   )
 }
 
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
index 5b194f21b01..4e9baa839a2 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
@@ -2,7 +2,7 @@ import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-e
 import type {ObjectSchemaType, Path, PortableTextObject} from '@sanity/types'
 import React, {ComponentType, useCallback, useMemo, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
-import {TooltipWithNodes} from '../../../../../ui'
+import {Tooltip} from '../../../../../ui'
 import {pathToString} from '../../../../field'
 import type {
   BlockAnnotationProps,
@@ -119,7 +119,7 @@ export function Annotation(props: AnnotationProps) {
   const markersToolTip = useMemo(
     () =>
       validation.length > 0 || markers.length > 0 ? (
-        <TooltipWithNodes
+        <Tooltip
           placement="bottom"
           portal="default"
           content={
@@ -133,7 +133,7 @@ export function Annotation(props: AnnotationProps) {
           }
         >
           {text}
-        </TooltipWithNodes>
+        </Tooltip>
       ) : undefined,
     [Markers, markers, renderCustomMarkers, text, validation],
   )
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
index bef2ee1d06e..4d622171db5 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
@@ -8,7 +8,7 @@ import {ObjectSchemaType, Path, PortableTextBlock, isImage} from '@sanity/types'
 import {Box, Flex, ResponsivePaddingProps} from '@sanity/ui'
 import React, {PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
-import {TooltipWithNodes} from '../../../../../ui'
+import {Tooltip} from '../../../../../ui'
 import {
   BlockProps,
   RenderAnnotationCallback,
@@ -273,7 +273,7 @@ export function BlockObject(props: BlockObjectProps) {
       >
         <Flex paddingBottom={1} marginY={3} style={debugRender()}>
           <InnerFlex flex={1}>
-            <TooltipWithNodes
+            <Tooltip
               placement="top"
               portal="editor"
               disabled={!tooltipEnabled}
@@ -282,7 +282,7 @@ export function BlockObject(props: BlockObjectProps) {
               <PreviewContainer {...innerPaddingProps}>
                 {renderBlock && renderBlock(componentProps)}
               </PreviewContainer>
-            </TooltipWithNodes>
+            </Tooltip>
             <BlockActionsOuter marginRight={1}>
               <BlockActionsInner>
                 {renderBlockActions && value && focused && !readOnly && (
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
index b7829697f16..5946ca65304 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
@@ -6,7 +6,7 @@ import {
 import {ObjectSchemaType, Path, PortableTextBlock, PortableTextChild} from '@sanity/types'
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
-import {TooltipWithNodes} from '../../../../../ui'
+import {Tooltip} from '../../../../../ui'
 import {
   BlockProps,
   RenderAnnotationCallback,
@@ -201,7 +201,7 @@ export const InlineObject = (props: InlineObjectProps) => {
   return useMemo(
     () => (
       <span ref={memberItem?.elementRef} contentEditable={false}>
-        <TooltipWithNodes
+        <Tooltip
           placement="bottom"
           portal="editor"
           disabled={!tooltipEnabled}
@@ -211,7 +211,7 @@ export const InlineObject = (props: InlineObjectProps) => {
           {renderInlineBlock && (
             <span style={{position: 'relative'}}>{renderInlineBlock(componentProps)}</span>
           )}
-        </TooltipWithNodes>
+        </Tooltip>
       </span>
     ),
     [componentProps, memberItem?.elementRef, renderInlineBlock, toolTipContent, tooltipEnabled],
diff --git a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
index eae90d5b1f1..409f5449526 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
@@ -7,7 +7,7 @@ import {
   usePortableTextEditor,
 } from '@sanity/portable-text-editor'
 import {isEqual} from '@sanity/util/paths'
-import {TooltipWithNodes} from '../../../../../ui'
+import {Tooltip} from '../../../../../ui'
 import {
   BlockProps,
   RenderAnnotationCallback,
@@ -273,7 +273,7 @@ export function TextBlock(props: TextBlockProps) {
         <TextBlockFlexWrapper data-testid="text-block__wrapper">
           <Flex flex={1} {...innerPaddingProps}>
             <Box flex={1}>
-              <TooltipWithNodes
+              <Tooltip
                 content={toolTipContent}
                 disabled={!tooltipEnabled}
                 placement="top"
@@ -291,7 +291,7 @@ export function TextBlock(props: TextBlockProps) {
                 >
                   {renderBlock && renderBlock(componentProps)}
                 </TextRoot>
-              </TooltipWithNodes>
+              </Tooltip>
             </Box>
 
             <BlockExtrasContainer contentEditable={false}>
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
index c000c117c06..754232798f9 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
@@ -3,7 +3,7 @@ import {AddIcon} from '@sanity/icons'
 import {Menu, MenuButton, type MenuButtonProps} from '@sanity/ui'
 import {useGetI18nText, useTranslation} from '../../../i18n'
 import {InsufficientPermissionsMessage} from '../../../components'
-import {Button, MenuItem, TooltipWithNodes} from '../../../../ui'
+import {Button, MenuItem, Tooltip} from '../../../../ui'
 import {useCurrentUser} from '../../../store'
 import type {CreateReferenceOption} from './types'
 
@@ -38,7 +38,7 @@ export function CreateButton(props: Props) {
   const canCreateAny = createOptions.some((option) => option.permission.granted)
   if (!canCreateAny) {
     return (
-      <TooltipWithNodes
+      <Tooltip
         content={
           <InsufficientPermissionsMessage
             currentUser={currentUser}
@@ -56,7 +56,7 @@ export function CreateButton(props: Props) {
             style={FULL_WIDTH}
           />
         </div>
-      </TooltipWithNodes>
+      </Tooltip>
     )
   }
 
@@ -75,7 +75,7 @@ export function CreateButton(props: Props) {
       menu={
         <Menu ref={menuRef}>
           {createOptions.map((createOption) => (
-            <TooltipWithNodes
+            <Tooltip
               disabled={createOption.permission.granted}
               key={createOption.id}
               content={
@@ -96,7 +96,7 @@ export function CreateButton(props: Props) {
                   onClick={() => onCreate(createOption)}
                 />
               </div>
-            </TooltipWithNodes>
+            </Tooltip>
           ))}
         </Menu>
       }
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
index 45c7ff5ad5e..3912f703155 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
@@ -2,7 +2,7 @@ import React, {ComponentType, ReactNode, Fragment} from 'react'
 import type {Reference, ReferenceSchemaType} from '@sanity/types'
 import {Badge, Box, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {AccessDeniedIcon, HelpCircleIcon} from '@sanity/icons'
-import {TooltipWithNodes} from '../../../../ui'
+import {Tooltip} from '../../../../ui'
 import type {RenderPreviewCallback} from '../../types'
 import {SanityDefaultPreview} from '../../../preview'
 import {Translate, useTranslation} from '../../../i18n'
@@ -87,7 +87,7 @@ export function PreviewReferenceValue(props: {
         </Box>
         {insufficientPermissions || notFound ? (
           <Box>
-            <TooltipWithNodes
+            <Tooltip
               portal
               content={
                 notFound ? (
@@ -114,7 +114,7 @@ export function PreviewReferenceValue(props: {
               <TextWithTone tone="default">
                 <HelpCircleIcon />
               </TextWithTone>
-            </TooltipWithNodes>
+            </Tooltip>
           </Box>
         ) : null}
       </Inline>
@@ -192,7 +192,7 @@ function InvalidType({
         </Flex>
       </Box>
       <Box>
-        <TooltipWithNodes
+        <Tooltip
           portal
           content={
             <Stack space={3}>
@@ -214,7 +214,7 @@ function InvalidType({
               <HelpCircleIcon />
             </TextWithTone>
           </Box>
-        </TooltipWithNodes>
+        </Tooltip>
       </Box>
     </Flex>
   )
diff --git a/packages/sanity/src/core/presence/PresenceTooltip.tsx b/packages/sanity/src/core/presence/PresenceTooltip.tsx
index e7359f8a15d..9e98236df35 100644
--- a/packages/sanity/src/core/presence/PresenceTooltip.tsx
+++ b/packages/sanity/src/core/presence/PresenceTooltip.tsx
@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react'
 import {Flex, Stack, Text} from '@sanity/ui'
-import {TooltipWithNodes} from '../../ui'
+import {Tooltip} from '../../ui'
 import {UserAvatar} from '../components/userAvatar'
 import {FormNodePresence} from './types'
 
@@ -36,8 +36,8 @@ export function PresenceTooltip(props: PresenceTooltipProps) {
   )
 
   return (
-    <TooltipWithNodes content={content} placement="top" portal="documentScrollElement">
+    <Tooltip content={content} placement="top" portal="documentScrollElement">
       {children}
-    </TooltipWithNodes>
+    </Tooltip>
   )
 }
diff --git a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
index 623e28e826f..9824c3300f8 100644
--- a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
+++ b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
@@ -14,7 +14,7 @@ import React, {
 import {isValidElementType} from 'react-is'
 import {SanityImageSource} from '@sanity/image-url/lib/types/types'
 import {isImageSource} from '@sanity/asset-utils'
-import {TooltipWithNodes} from '../../../ui'
+import {Tooltip} from '../../../ui'
 import {PreviewProps} from '../../components/previews'
 import {useClient} from '../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../studioClient'
@@ -128,7 +128,7 @@ export function SanityDefaultPreview(props: SanityDefaultPreviewProps): ReactEle
 
   if (tooltip) {
     return (
-      <TooltipWithNodes
+      <Tooltip
         content={tooltip}
         disabled={!tooltip}
         fallbackPlacements={['top-end']}
@@ -136,7 +136,7 @@ export function SanityDefaultPreview(props: SanityDefaultPreviewProps): ReactEle
       >
         {/* Currently tooltips won't trigger without a wrapping element */}
         <div>{children}</div>
-      </TooltipWithNodes>
+      </Tooltip>
     )
   }
 
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
index 55cdf8bb48e..ffcc432eba0 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
@@ -1,12 +1,12 @@
 import React, {useCallback, useMemo, useState} from 'react'
 import {Text, useClickOutside, Stack, TextInput, TextInputProps, Card, Flex} from '@sanity/ui'
-import {AddIcon, ChevronDownIcon, SearchIcon} from '@sanity/icons'
+import {AddIcon, SearchIcon} from '@sanity/icons'
 import ReactFocusLock from 'react-focus-lock'
 import {useGetI18nText, useTranslation} from '../../../../i18n'
 import {InsufficientPermissionsMessage} from '../../../../components'
 import {useCurrentUser} from '../../../../store'
 import {useColorScheme} from '../../../colorScheme'
-import {Button, ButtonProps, TooltipWithNodes, TooltipWithNodesProps} from '../../../../../ui'
+import {Button, ButtonProps, Tooltip, TooltipProps} from '../../../../../ui'
 import {NewDocumentList, NewDocumentListProps} from './NewDocumentList'
 import {ModalType, NewDocumentOption} from './types'
 import {filterOptions} from './filter'
@@ -151,7 +151,7 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
   )
 
   // Tooltip content for the open button
-  const tooltipContent: TooltipWithNodesProps['content'] = useMemo(() => {
+  const tooltipContent: TooltipProps['content'] = useMemo(() => {
     if (!hasNewDocumentOptions) {
       return <Text size={1}>{t('new-document.no-document-types-label')}</Text>
     }
@@ -166,7 +166,7 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
   }, [canCreateDocument, currentUser, hasNewDocumentOptions, t])
 
   // Shared tooltip props for the popover and dialog
-  const sharedTooltipProps: TooltipWithNodesProps = useMemo(
+  const sharedTooltipProps: TooltipProps = useMemo(
     () => ({
       content: tooltipContent,
       disabled: loading || open,
@@ -179,11 +179,11 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
   if (modal === 'dialog') {
     return (
       <>
-        <TooltipWithNodes {...sharedTooltipProps}>
+        <Tooltip {...sharedTooltipProps}>
           <div>
             <Button {...sharedOpenButtonProps} />
           </div>
-        </TooltipWithNodes>
+        </Tooltip>
 
         {open && (
           <StyledDialog
@@ -251,7 +251,7 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
       }
     >
       <div>
-        <TooltipWithNodes {...sharedTooltipProps}>
+        <Tooltip {...sharedTooltipProps}>
           <div>
             <Button
               {...sharedOpenButtonProps}
@@ -260,7 +260,7 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
               onKeyDown={handleOpenButtonKeyDown}
             />
           </div>
-        </TooltipWithNodes>
+        </Tooltip>
       </div>
     </StyledPopover>
   )
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
index 33e4b61abaf..7e9d52b0162 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
@@ -1,7 +1,7 @@
 import {CurrentUser} from '@sanity/types'
 import {Card, Text} from '@sanity/ui'
 import React, {useCallback, useMemo} from 'react'
-import {TooltipWithNodes} from '../../../../../ui'
+import {Tooltip} from '../../../../../ui'
 import {InsufficientPermissionsMessage} from '../../../../components'
 import {useI18nText} from '../../../../i18n'
 import {NewDocumentOption, PreviewLayout} from './types'
@@ -42,7 +42,7 @@ export function NewDocumentListOption(props: NewDocumentListOptionProps) {
   const {title} = useI18nText(option)
 
   return (
-    <TooltipWithNodes
+    <Tooltip
       disabled={option.hasPermission}
       key={option.id}
       portal
@@ -63,6 +63,6 @@ export function NewDocumentListOption(props: NewDocumentListOptionProps) {
           <Text size={preview === 'inline' ? 1 : undefined}>{title}</Text>
         </Card>
       </div>
-    </TooltipWithNodes>
+    </Tooltip>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
index 858decfc8b8..0c5cbbad74e 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
@@ -1,7 +1,7 @@
 import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {startCase, uniq} from 'lodash'
 import React, {ReactElement, useMemo} from 'react'
-import {TooltipWithNodes} from '../../../../../../../../../ui'
+import {Tooltip} from '../../../../../../../../../ui'
 import {TextWithTone} from '../../../../../../../../components'
 import {useSchema} from '../../../../../../../../hooks'
 import {isNonNullable, truncateString} from '../../../../../../../../util'
@@ -76,7 +76,7 @@ export function FilterTooltip({
   }, [fieldDefinition?.documentTypes, fieldDefinition?.fieldPath, schema])
 
   return (
-    <TooltipWithNodes
+    <Tooltip
       content={
         <Card tone="default" radius={2} style={{maxWidth: '250px'}}>
           <Stack space={4}>
@@ -146,6 +146,6 @@ export function FilterTooltip({
       portal
     >
       {children}
-    </TooltipWithNodes>
+    </Tooltip>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
index 4a7c745a468..4cddb7f67b1 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
@@ -10,7 +10,7 @@ import React, {
   useState,
 } from 'react'
 import styled, {css} from 'styled-components'
-import {Tooltip, TooltipWithNodes} from '../../../../../../../../../../ui'
+import {Tooltip} from '../../../../../../../../../../ui'
 import {Translate, useTranslation} from '../../../../../../../../../i18n'
 import {CustomTextInput} from '../../../../common/CustomTextInput'
 import {getDateISOString} from './utils/getDateISOString'
@@ -156,7 +156,7 @@ export function ParsedDateTextInput({
   }, [dateFormat, processInputString, isDateTimeFormat, value])
 
   return (
-    <TooltipWithNodes
+    <Tooltip
       content={
         <Translate
           t={t}
@@ -183,6 +183,6 @@ export function ParsedDateTextInput({
         placeholder={formattedPlaceholder}
         value={inputValue}
       />
-    </TooltipWithNodes>
+    </Tooltip>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
index 2b6df455729..a1c520f2ce9 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
@@ -2,7 +2,7 @@
 import {Card, CardTone, Code, Inline, Stack} from '@sanity/ui'
 import React from 'react'
 import styled from 'styled-components'
-import {TooltipWithNodes} from '../../../../../../../../ui'
+import {Tooltip} from '../../../../../../../../ui'
 import type {WeightedHit} from '../../../../../../../search'
 
 interface DebugScoreProps {
@@ -30,7 +30,7 @@ export function DebugOverlay({data}: DebugScoreProps) {
 
   return (
     <>
-      <TooltipWithNodes
+      <Tooltip
         content={
           <Stack space={2}>
             {matchingStories.length ? (
@@ -55,7 +55,7 @@ export function DebugOverlay({data}: DebugScoreProps) {
         <DebugScoreCard padding={1} shadow={1} tone={tone}>
           <Code size={0}>score: {score}</Code>
         </DebugScoreCard>
-      </TooltipWithNodes>
+      </Tooltip>
     </>
   )
 }
diff --git a/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx b/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx
index b7390264f66..76dd8c36760 100644
--- a/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx
+++ b/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx
@@ -1,7 +1,7 @@
 import {ChevronRightIcon} from '@sanity/icons'
 import {Box, Flex, Stack, Text} from '@sanity/ui'
 import React, {Fragment, useMemo} from 'react'
-import {TooltipWithNodes} from '../../../../ui'
+import {Tooltip} from '../../../../ui'
 
 export interface CommentBreadcrumbsProps {
   titlePath: string[]
@@ -53,7 +53,7 @@ export function CommentBreadcrumbs(props: CommentBreadcrumbsProps) {
       if (Array.isArray(item)) {
         return (
           <Fragment key={key}>
-            <TooltipWithNodes
+            <Tooltip
               content={
                 <Stack space={2} padding={2}>
                   {item.map(renderItem)}
@@ -61,7 +61,7 @@ export function CommentBreadcrumbs(props: CommentBreadcrumbsProps) {
               }
             >
               <Box>{renderItem('...', index)}</Box>
-            </TooltipWithNodes>
+            </Tooltip>
 
             {showSeparator && separator}
           </Fragment>
diff --git a/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx b/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx
index b9829c928f4..aa28bdce6fe 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {Flex, Text} from '@sanity/ui'
 import styled, {css} from 'styled-components'
-import {TooltipWithNodes} from '../../../../../../ui'
+import {Tooltip} from '../../../../../../ui'
 import {CommentsAvatar} from '../../avatars'
 import {useCurrentUser, useUser} from 'sanity'
 
@@ -37,7 +37,7 @@ export function MentionInlineBlock(props: MentionInlineBlockProps) {
   if (!user || loading) return <Span>@Loading</Span> // todo: improve
 
   return (
-    <TooltipWithNodes
+    <Tooltip
       portal
       content={
         <Flex align="center" gap={2}>
@@ -52,6 +52,6 @@ export function MentionInlineBlock(props: MentionInlineBlockProps) {
       <Span data-selected={selected} data-active={currentUser?.id === userId}>
         @{user.displayName}
       </Span>
-    </TooltipWithNodes>
+    </Tooltip>
   )
 }
diff --git a/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx b/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
index 20a79e47687..dc6238e5c4b 100644
--- a/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
+++ b/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {TooltipWithNodes} from '../../../ui'
+import {Tooltip} from '../../../ui'
 import {structureLocaleNamespace} from '../../i18n'
 import {useCurrentUser, InsufficientPermissionsMessage, useTranslation} from 'sanity'
 
@@ -28,7 +28,7 @@ export function InsufficientPermissionsMessageTooltip({
   }
 
   return (
-    <TooltipWithNodes
+    <Tooltip
       content={
         loading ? (
           t('insufficient-permissions-message-tooltip.loading-text')
@@ -41,6 +41,6 @@ export function InsufficientPermissionsMessageTooltip({
       {/* this wrapping div is to allow mouse events */}
       {/* while the child element is disabled */}
       <div>{children}</div>
-    </TooltipWithNodes>
+    </Tooltip>
   )
 }
diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
index 273873d717e..3b174832c3d 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
@@ -1,6 +1,6 @@
 import {Menu, MenuButton, PopoverProps, Text} from '@sanity/ui'
 import React, {useCallback, useState, useMemo, useId} from 'react'
-import {MenuItem, TooltipWithNodes} from '../../../../ui'
+import {MenuItem, Tooltip} from '../../../../ui'
 import {ContextMenuButton} from '../../../../ui/contextMenuButton'
 import {structureLocaleNamespace} from '../../../i18n'
 import {ActionStateDialog} from './ActionStateDialog'
@@ -91,14 +91,14 @@ function ActionMenuListItem(props: ActionMenuListItemProps) {
   const menuItemContent = useCallback(
     (item: React.JSX.Element) => {
       return (
-        <TooltipWithNodes
+        <Tooltip
           content={<Text size={1}>{actionState.title}</Text>}
           disabled={!actionState.title}
           placement="top"
           portal
         >
           {item}
-        </TooltipWithNodes>
+        </Tooltip>
       )
     },
     [actionState.title],
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
index c3379248945..0cc11bb7f20 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
@@ -2,7 +2,7 @@ import {Flex, Hotkeys, LayerProvider, Stack, Text} from '@sanity/ui'
 import React, {memo, useMemo, useState} from 'react'
 import {RenderActionCollectionState} from '../../../components'
 import {HistoryRestoreAction} from '../../../documentActions'
-import {Button, TooltipWithNodes} from '../../../../ui'
+import {Button, Tooltip} from '../../../../ui'
 import {useDocumentPane} from '../useDocumentPane'
 import {ActionMenuButton} from './ActionMenuButton'
 import {ActionStateDialog} from './ActionStateDialog'
@@ -43,7 +43,7 @@ function DocumentStatusBarActionsInner(props: DocumentStatusBarActionsInnerProps
     <Flex align="center" gap={2}>
       {firstActionState && (
         <LayerProvider zOffset={200}>
-          <TooltipWithNodes disabled={!tooltipContent} content={tooltipContent} placement="top">
+          <Tooltip disabled={!tooltipContent} content={tooltipContent} placement="top">
             <Stack>
               <Button
                 data-testid={`action-${firstActionState.label}`}
@@ -57,7 +57,7 @@ function DocumentStatusBarActionsInner(props: DocumentStatusBarActionsInnerProps
                 tone={firstActionState.tone || 'primary'}
               />
             </Stack>
-          </TooltipWithNodes>
+          </Tooltip>
         </LayerProvider>
       )}
       {showMenu && menuActionStates.length > 0 && (
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
index 952fb06132d..82b3192cafa 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
@@ -2,7 +2,7 @@ import {Flex} from '@sanity/ui'
 import React, {useState, memo, useLayoutEffect, useEffect} from 'react'
 import {DocumentStatusIndicator} from '../../../../../ui/documentStatusIndicator'
 import {DocumentStatus} from '../../../../../ui/documentStatus'
-import {TooltipWithNodes} from '../../../../../ui'
+import {Tooltip} from '../../../../../ui'
 import {useDocumentPane} from '../../useDocumentPane'
 import {DocumentBadges} from './DocumentBadges'
 import {DocumentStatusPulse} from './DocumentStatusPulse'
@@ -54,7 +54,7 @@ export const DocumentSparkline = memo(function DocumentSparkline() {
     <Flex align="center" data-ui="DocumentSparkline">
       <Flex align="center" flex={1} gap={3} paddingY={1} wrap="wrap">
         {!status && (
-          <TooltipWithNodes
+          <Tooltip
             content={
               <DocumentStatus
                 absoluteDate
@@ -77,7 +77,7 @@ export const DocumentSparkline = memo(function DocumentSparkline() {
                 singleLine
               />
             </Flex>
-          </TooltipWithNodes>
+          </Tooltip>
         )}
 
         <DocumentStatusPulse status={status || undefined} />
diff --git a/packages/sanity/src/ui/button/Button.tsx b/packages/sanity/src/ui/button/Button.tsx
index b4be0b4aa4e..898b7e0cf10 100644
--- a/packages/sanity/src/ui/button/Button.tsx
+++ b/packages/sanity/src/ui/button/Button.tsx
@@ -65,7 +65,7 @@ export const Button = forwardRef(function Button(
     mode = 'default',
     tone = 'default',
     tooltipProps,
-    ...props
+    ...rest
   }: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'size' | 'title'>,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
@@ -81,15 +81,10 @@ export const Button = forwardRef(function Button(
     [tooltipProps],
   )
 
-  const ariaLabel = props.text ?? tooltipProps?.content
-
   return (
     <ConditionalWrapper condition={!!tooltipProps} wrapper={renderWrapper}>
       <UIButton
-        // aria-label is enforced in buttons without text.
-        // Could be overridden by passing aria-label directly.
-        {...(ariaLabel ? {'aria-label': ariaLabel} : {})}
-        {...props}
+        {...rest}
         {...(size === 'default' ? DEFAULT_BUTTON_PROPS : LARGE_BUTTON_PROPS)}
         ref={ref}
         mode={mode}
diff --git a/packages/sanity/src/ui/tooltip/Tooltip.tsx b/packages/sanity/src/ui/tooltip/Tooltip.tsx
index 334ead36112..7227948a9f7 100644
--- a/packages/sanity/src/ui/tooltip/Tooltip.tsx
+++ b/packages/sanity/src/ui/tooltip/Tooltip.tsx
@@ -4,7 +4,6 @@ import {
   Flex,
   Hotkeys,
   HotkeysProps,
-  Placement,
   Text,
   Tooltip as UITooltip,
   TooltipProps as UITooltipProps,
@@ -13,17 +12,19 @@ import React, {forwardRef} from 'react'
 import {TOOLTIP_DELAY_PROPS} from './constants'
 
 /** @internal */
-export type TooltipProps = Omit<UITooltipProps, 'content' | 'padding'> & {
-  content?: string | null
+export type TooltipProps = Omit<UITooltipProps, 'arrow' | 'padding' | 'shadow'> & {
   hotkeys?: HotkeysProps['keys']
 }
 
-const TOOLTIP_FALLBACK_PLACEMENTS: Placement[] = [
-  'bottom-start',
-  'bottom-end',
-  'top-start',
-  'top-end',
-]
+const TOOLTIP_SHARED_PROPS: UITooltipProps = {
+  animate: true,
+  arrow: false,
+  boundaryElement: null,
+  delay: TOOLTIP_DELAY_PROPS,
+  fallbackPlacements: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+  placement: 'bottom',
+  portal: true,
+}
 
 /**
  * Studio UI <Tooltip>.
@@ -37,36 +38,34 @@ export const Tooltip = forwardRef(function Tooltip(
   props: TooltipProps,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {content, hotkeys, placement = 'bottom', portal = true, ...rest} = props
+  const {content, hotkeys, ...rest} = props
+
+  if (typeof content === 'string') {
+    return (
+      <UITooltip
+        {...TOOLTIP_SHARED_PROPS}
+        content={
+          <Flex align="center">
+            {content && (
+              <Box flex={1} padding={1}>
+                <Text size={1} weight="medium">
+                  {content}
+                </Text>
+              </Box>
+            )}
+            {hotkeys && (
+              <Box flex="none">
+                <Hotkeys keys={hotkeys} />
+              </Box>
+            )}
+          </Flex>
+        }
+        padding={1}
+        ref={ref}
+        {...rest}
+      />
+    )
+  }
 
-  return (
-    <UITooltip
-      animate
-      arrow={false}
-      boundaryElement={null}
-      content={
-        <Flex align="center">
-          {content && (
-            <Box flex={1} padding={1}>
-              <Text size={1} weight="medium">
-                {content}
-              </Text>
-            </Box>
-          )}
-          {hotkeys && (
-            <Box flex="none">
-              <Hotkeys keys={hotkeys} />
-            </Box>
-          )}
-        </Flex>
-      }
-      delay={TOOLTIP_DELAY_PROPS}
-      fallbackPlacements={TOOLTIP_FALLBACK_PLACEMENTS}
-      padding={1}
-      portal={portal}
-      ref={ref}
-      placement={placement}
-      {...rest}
-    />
-  )
+  return <UITooltip {...TOOLTIP_SHARED_PROPS} content={content} ref={ref} {...rest} />
 })
diff --git a/packages/sanity/src/ui/tooltip/TooltipWithNodes.tsx b/packages/sanity/src/ui/tooltip/TooltipWithNodes.tsx
deleted file mode 100644
index 94ebce06a42..00000000000
--- a/packages/sanity/src/ui/tooltip/TooltipWithNodes.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/* eslint-disable no-restricted-imports */
-import {Tooltip as UITooltip, TooltipProps as UITooltipProps} from '@sanity/ui'
-import React, {forwardRef} from 'react'
-import {TOOLTIP_DELAY_PROPS} from './constants'
-
-/** @internal */
-export type TooltipWithNodesProps = UITooltipProps
-
-/**
- * Studio UI <TooltipWithNodes>.
- *
- * This is a just a regular 'full fat' Sanity UI <Tooltip> component with default
- * open delay applied.
- *
- * This may be deprecated in future as we look to simplify studio tooltip usage in general.
- *
- * @internal
- */
-export const TooltipWithNodes = forwardRef(function Tooltip(
-  props: TooltipWithNodesProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {placement, portal = true, ...rest} = props
-  return (
-    <UITooltip
-      animate
-      arrow={false}
-      boundaryElement={null}
-      delay={TOOLTIP_DELAY_PROPS}
-      placement={placement || 'bottom'}
-      portal={portal}
-      ref={ref}
-      {...rest}
-    />
-  )
-})
diff --git a/packages/sanity/src/ui/tooltip/index.ts b/packages/sanity/src/ui/tooltip/index.ts
index 2eb5ba2286a..ba15f407377 100644
--- a/packages/sanity/src/ui/tooltip/index.ts
+++ b/packages/sanity/src/ui/tooltip/index.ts
@@ -1,2 +1 @@
 export * from './Tooltip'
-export * from './TooltipWithNodes'

From b80d1632a80ba0698a5b01545b16095e16f4c07c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Mon, 11 Dec 2023 12:14:42 +0100
Subject: [PATCH 074/163] fix(deps): update `@sanity/ui`

---
 dev/design-studio/package.json                     | 2 +-
 dev/embedded-studio/package.json                   | 2 +-
 dev/studio-e2e-testing/package.json                | 2 +-
 dev/test-studio/package.json                       | 2 +-
 examples/ecommerce-studio/package.json             | 2 +-
 packages/@sanity/portable-text-editor/package.json | 2 +-
 packages/@sanity/vision/package.json               | 2 +-
 packages/sanity/package.json                       | 2 +-
 yarn.lock                                          | 8 ++++----
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index a6d4ab68f3e..790dd8e5cd0 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.7.0",
-    "@sanity/ui": "2.0.0-beta.2",
+    "@sanity/ui": "2.0.0-beta.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/embedded-studio/package.json b/dev/embedded-studio/package.json
index 69ff6fe7bb0..f8f9d057ed0 100644
--- a/dev/embedded-studio/package.json
+++ b/dev/embedded-studio/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "2.0.0-beta.2",
+    "@sanity/ui": "2.0.0-beta.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/studio-e2e-testing/package.json b/dev/studio-e2e-testing/package.json
index 31199f3deef..b9d546acc43 100644
--- a/dev/studio-e2e-testing/package.json
+++ b/dev/studio-e2e-testing/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@sanity/google-maps-input": "^3.0.1",
     "@sanity/icons": "^2.4.0",
-    "@sanity/ui": "2.0.0-beta.2",
+    "@sanity/ui": "2.0.0-beta.3",
     "@sanity/vision": "3.22.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index eec4677c46a..1b7078187b5 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -35,7 +35,7 @@
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.2",
+    "@sanity/ui": "2.0.0-beta.3",
     "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
diff --git a/examples/ecommerce-studio/package.json b/examples/ecommerce-studio/package.json
index 32a8fe660dc..5e141c9cd9b 100644
--- a/examples/ecommerce-studio/package.json
+++ b/examples/ecommerce-studio/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.2",
+    "@sanity/ui": "2.0.0-beta.3",
     "react": "^18.2.0",
     "react-barcode": "^1.4.1",
     "react-dom": "^18.2.0",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index 290176bc6a7..de735b3bbed 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "2.0.0-beta.2",
+    "@sanity/ui": "2.0.0-beta.3",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index 5342847cf24..3f98cd83818 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -67,7 +67,7 @@
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "3.0.0-beta.8",
     "@sanity/icons": "^2.7.0",
-    "@sanity/ui": "2.0.0-beta.2",
+    "@sanity/ui": "2.0.0-beta.3",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index 1c696443fb8..80c006f0bcd 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -175,7 +175,7 @@
     "@sanity/schema": "3.22.1",
     "@sanity/telemetry": "^0.7.3",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.2",
+    "@sanity/ui": "2.0.0-beta.3",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
diff --git a/yarn.lock b/yarn.lock
index d774fd7490e..5d1241ec246 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3876,10 +3876,10 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@2.0.0-beta.2":
-  version "2.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.2.tgz#6a1e699a2d14589eb5bfc6ab36be614128db1799"
-  integrity sha512-1FDE26tr7A8hGaygudQQo/8DbKg9F/LuAt/vnp5iWm3dVVR4opOZd//ZpiXPuZIvGPgDv6T5V/4iXovsAQLUzw==
+"@sanity/ui@2.0.0-beta.3":
+  version "2.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.3.tgz#a1d761595e3a639e7e1df8e196355b04428c5be7"
+  integrity sha512-XQoWwb8uSLIr6zkwO3MeS0l6tpGMx4CWrfqerhDJgQgVZqXJBrKAh9kpkX87/A6ngjNcALRuMYgTPRmRhso26g==
   dependencies:
     "@floating-ui/react-dom" "^2.0.4"
     "@sanity/color" "3.0.0-beta.8"

From d7e5df653eddc122f6fff72caf5576bb19535e9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Tue, 12 Dec 2023 11:26:52 +0100
Subject: [PATCH 075/163] fix(sanity): set `maximum-scale` viewport property

- This prevents Safari from zooming in on input fields when they are focused.
---
 packages/sanity/src/core/components/DefaultDocument.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/components/DefaultDocument.tsx b/packages/sanity/src/core/components/DefaultDocument.tsx
index 2183feed9b7..22f27b3a056 100644
--- a/packages/sanity/src/core/components/DefaultDocument.tsx
+++ b/packages/sanity/src/core/components/DefaultDocument.tsx
@@ -56,7 +56,10 @@ export function DefaultDocument(props: DefaultDocumentProps): React.ReactElement
     <html lang="en">
       <head>
         <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
+        />
         <meta name="robots" content="noindex" />
         <meta name="referrer" content="same-origin" />
 

From 360596392174abbb64aa35f94f710856c5dc759d Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Tue, 12 Dec 2023 16:21:54 +0100
Subject: [PATCH 076/163] fix(facelift): update i18n imports after rebase

---
 .../components/paneHeaderActions/PaneHeaderCreateButton.tsx  | 2 +-
 .../document/documentPanel/banners/PermissionCheckBanner.tsx | 4 ++--
 packages/sanity/src/ui/documentStatus/DocumentStatus.tsx     | 5 ++---
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx b/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
index c108b6fd1d5..df3ccca31bf 100644
--- a/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
+++ b/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
@@ -113,7 +113,7 @@ export function PaneHeaderCreateButton({templateItems}: PaneHeaderCreateButtonPr
         context="create-document-type"
       >
         <IntentButton
-          title={getI18nText(firstItem).title}
+          aria-label={getI18nText(firstItem).title}
           icon={firstItem.icon || AddIcon}
           intent={intent}
           mode="bleed"
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/banners/PermissionCheckBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/banners/PermissionCheckBanner.tsx
index 5ce4d48bc94..529b759ba70 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/banners/PermissionCheckBanner.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/banners/PermissionCheckBanner.tsx
@@ -3,7 +3,7 @@ import {Text} from '@sanity/ui'
 import {ReadOnlyIcon} from '@sanity/icons'
 import {structureLocaleNamespace} from '../../../../i18n'
 import {Banner} from './Banner'
-import {Translate, useCurrentUser, useIntlListFormat, useTranslation} from 'sanity'
+import {Translate, useCurrentUser, useListFormat, useTranslation} from 'sanity'
 
 interface PermissionCheckBannerProps {
   granted: boolean
@@ -12,7 +12,7 @@ interface PermissionCheckBannerProps {
 
 export function PermissionCheckBanner({granted, requiredPermission}: PermissionCheckBannerProps) {
   const currentUser = useCurrentUser()
-  const listFormat = useIntlListFormat({style: 'short'})
+  const listFormat = useListFormat({style: 'short'})
   const {t} = useTranslation(structureLocaleNamespace)
 
   if (granted) return null
diff --git a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
index 26f61ae2f05..3a161ca7c8e 100644
--- a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
+++ b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
@@ -1,8 +1,7 @@
 import {PreviewValue, SanityDocument} from '@sanity/types'
 import {Flex, Text} from '@sanity/ui'
-import React from 'react'
 import styled from 'styled-components'
-import {useIntlDateTimeFormat, useRelativeTime} from '../../core'
+import {useDateTimeFormat, useRelativeTime} from '../../core'
 
 interface DocumentStatusProps {
   absoluteDate?: boolean
@@ -19,7 +18,7 @@ export function DocumentStatus({absoluteDate, draft, published, singleLine}: Doc
   const draftUpdatedAt = draft && '_updatedAt' in draft ? draft._updatedAt : ''
   const publishedUpdatedAt = published && '_updatedAt' in published ? published._updatedAt : ''
 
-  const intlDateFormat = useIntlDateTimeFormat({
+  const intlDateFormat = useDateTimeFormat({
     dateStyle: 'medium',
     timeStyle: 'short',
   })

From 7c453c330b682eb2048e4d40493ff4c76c4eb28a Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Wed, 13 Dec 2023 10:51:23 +0100
Subject: [PATCH 077/163] fix(facelift): update i18n ignore rules

---
 .eslintrc.cjs                                 |  1 +
 .../assetSource/shared/DefaultSource.tsx      |  1 -
 .../sanity/src/core/i18n/bundles/studio.ts    | 36 +++++++++----------
 .../src/ui/spacerButton/SpacerButton.tsx      |  1 -
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 865400d8a75..2bca9098648 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -65,6 +65,7 @@ const config = {
       {
         ignores: {
           componentPatterns: ['motion$'],
+          attributes: ['size', 'fill', 'full'],
         },
       },
     ],
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
index 1ec6bd9d8e5..b37e925418c 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
@@ -270,7 +270,6 @@ const DefaultAssetSource = function DefaultAssetSource(
                 icon={DownloadIcon}
                 loading={isLoading}
                 onClick={handleFetchNextPage}
-                // eslint-disable-next-line no-attribute-string-literals/no-attribute-string-literals
                 size="large"
                 text={t('asset-source.dialog.load-more')}
                 tone="primary"
diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index c873ca64e0e..f40f2bc3153 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -294,25 +294,7 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /** Title for the Review Changes pane */
   'changes.title': 'Review changes',
 
-  /** The fallback title for an ordering menu item if no localized titles are provided. */
-  'default-menu-item.fallback-title': 'Sort by {{title}}',
-
-  /** Title for the default ordering/SortOrder if no orderings are provided and the caption field is found */
-  'default-orderings.caption': 'Sort by Caption',
-  /** Title for the default ordering/SortOrder if no orderings are provided and the description field is found */
-  'default-orderings.description': 'Sort by Description',
-  /** Title for the default ordering/SortOrder if no orderings are provided and the header field is found */
-  'default-orderings.header': 'Sort by Header',
-  /** Title for the default ordering/SortOrder if no orderings are provided and the heading field is found */
-  'default-orderings.heading': 'Sort by Heading',
-  /** Title for the default ordering/SortOrder if no orderings are provided and the label field is found */
-  'default-orderings.label': 'Sort by Label',
-  /** Title for the default ordering/SortOrder if no orderings are provided and the name field is found */
-  'default-orderings.name': 'Sort by Name',
-  /** Title for the default ordering/SortOrder if no orderings are provided and the title field is found */
-  'default-orderings.title': 'Sort by Title',
   /** --- Common components --- */
-
   /** Tooltip text for context menu buttons */
   'common.context-menu-button.tooltip': 'Show more',
 
@@ -330,6 +312,24 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /** Tooltip displayed on configuration issues button */
   'configuration-issues.button.tooltip': 'Found configuration issues',
 
+  /** The fallback title for an ordering menu item if no localized titles are provided. */
+  'default-menu-item.fallback-title': 'Sort by {{title}}',
+
+  /** Title for the default ordering/SortOrder if no orderings are provided and the caption field is found */
+  'default-orderings.caption': 'Sort by Caption',
+  /** Title for the default ordering/SortOrder if no orderings are provided and the description field is found */
+  'default-orderings.description': 'Sort by Description',
+  /** Title for the default ordering/SortOrder if no orderings are provided and the header field is found */
+  'default-orderings.header': 'Sort by Header',
+  /** Title for the default ordering/SortOrder if no orderings are provided and the heading field is found */
+  'default-orderings.heading': 'Sort by Heading',
+  /** Title for the default ordering/SortOrder if no orderings are provided and the label field is found */
+  'default-orderings.label': 'Sort by Label',
+  /** Title for the default ordering/SortOrder if no orderings are provided and the name field is found */
+  'default-orderings.name': 'Sort by Name',
+  /** Title for the default ordering/SortOrder if no orderings are provided and the title field is found */
+  'default-orderings.title': 'Sort by Title',
+
   /** The value of the <code>_key</code> property must be a unique string. */
   'form.error.duplicate-keys-alert.details.additional-description':
     'The value of the <code>_key</code> property must be a unique string.',
diff --git a/packages/sanity/src/ui/spacerButton/SpacerButton.tsx b/packages/sanity/src/ui/spacerButton/SpacerButton.tsx
index aa5c1dd3af9..8382746ef46 100644
--- a/packages/sanity/src/ui/spacerButton/SpacerButton.tsx
+++ b/packages/sanity/src/ui/spacerButton/SpacerButton.tsx
@@ -23,7 +23,6 @@ export function SpacerButton({size}: SpacerButtonProps) {
         visibility: 'hidden',
         width: 0,
       }}
-      // eslint-disable-next-line no-attribute-string-literals/no-attribute-string-literals
       text="-"
     />
   )

From b44f50f99fc6dbd27f0678bb7627a83047bd4783 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:31:37 +0100
Subject: [PATCH 078/163] fix(studio): update change indicator

---
 .../core/changeIndicators/ChangeIndicator.tsx |   1 +
 .../ElementWithChangeBar.styled.tsx           | 142 +++++++++---------
 .../changeIndicators/ElementWithChangeBar.tsx |   4 +-
 .../src/core/changeIndicators/constants.ts    |   2 +-
 .../overlay/Connector.styled.tsx              |  71 ++++-----
 .../changeIndicators/overlay/Connector.tsx    |   3 +-
 .../overlay/ConnectorsOverlay.tsx             |  14 +-
 7 files changed, 117 insertions(+), 120 deletions(-)

diff --git a/packages/sanity/src/core/changeIndicators/ChangeIndicator.tsx b/packages/sanity/src/core/changeIndicators/ChangeIndicator.tsx
index 1d23c7f6099..608375325ab 100644
--- a/packages/sanity/src/core/changeIndicators/ChangeIndicator.tsx
+++ b/packages/sanity/src/core/changeIndicators/ChangeIndicator.tsx
@@ -68,6 +68,7 @@ const ChangeBarWrapper = memo(function ChangeBarWrapper(
   return (
     <div {...restProps} ref={ref} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
       <ElementWithChangeBar
+        hasFocus={hasFocus}
         isChanged={isChanged}
         disabled={disabled}
         withHoverEffect={withHoverEffect}
diff --git a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.styled.tsx b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.styled.tsx
index 06a16baeb7a..3057252f7ca 100644
--- a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.styled.tsx
+++ b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.styled.tsx
@@ -1,13 +1,12 @@
-import styled, {css} from 'styled-components'
-import {Theme} from '@sanity/ui'
+/* eslint-disable camelcase */
 
-interface ThemeContext {
-  theme: Theme
-}
+import styled, {css} from 'styled-components'
+import {getTheme_v2} from '@sanity/ui/theme'
 
 interface RootProps {
   $changed?: boolean
   $disabled?: boolean
+  $hasFocus?: boolean
   $isReviewChangeOpen: boolean
   $withHoverEffect?: boolean
 }
@@ -15,30 +14,45 @@ interface RootProps {
 const animationSpeed = 250
 
 export const ChangeBarWrapper = styled.div<RootProps>(
-  ({$changed, $disabled, $isReviewChangeOpen}) => {
+  ({$changed, $disabled, $hasFocus, $isReviewChangeOpen}) => {
     if ($disabled)
       return css`
-        ${ChangeBar} {
+        ${ChangeBarMarker}:after {
           display: none;
         }
       `
 
     return css`
-      --change-bar-offset: 2px;
+      --change-bar-offset: 4px;
 
       display: flex;
       position: relative;
 
+      ${ChangeBarMarker}:after {
+        opacity: 0.5;
+      }
+
       @media (hover: hover) {
         &:hover {
           z-index: 10;
+          ${ChangeBarMarker}:after {
+            opacity: 1;
+          }
         }
       }
 
+      /* hide when field is not changed */
+      ${$hasFocus &&
+      css`
+        ${ChangeBarMarker}:after {
+          opacity: 1;
+        }
+      `}
+
       /* hide when field is not changed */
       ${!$changed &&
       css`
-        ${ChangeBar} {
+        ${ChangeBarMarker}:after {
           opacity: 0;
           pointer-events: none;
         }
@@ -67,77 +81,71 @@ export const ChangeBar = styled.div<{$zIndex: number}>`
   z-index: ${({$zIndex}) => $zIndex};
 `
 
-export const ChangeBarMarker = styled.div(({theme}: ThemeContext) => {
-  /* these colours aren't freely available on the current theme */
-  const notSelectedColor = theme.sanity.color.spot.yellow
-  const screenMedium = theme.sanity.media[0]
+export const ChangeBarMarker = styled.div((props) => {
+  const {media} = getTheme_v2(props.theme)
 
   return css`
     position: absolute;
-    top: 0;
+    top: -1px;
     left: var(--change-bar-offset);
-    width: 2px;
-    bottom: 0;
-    background-color: ${notSelectedColor};
-    border-radius: 1px;
+    width: 1px;
+    bottom: -1px;
+    background-color: var(--card-bg-color);
 
-    @media (min-width: ${screenMedium}px) {
+    @media (min-width: ${media[0]}px) {
       display: unset;
     }
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 1px;
+      left: 0;
+      width: 1px;
+      bottom: 1px;
+      background-color: var(--card-badge-caution-dot-color);
+      border-radius: 0.5px;
+    }
   `
 })
 
-export const ChangeBarButton = styled.button<{$withHoverEffect?: boolean}>(
-  ({theme, $withHoverEffect}) => {
-    /* these colours aren't freely available on the current theme */
-    const notSelectedColor = theme.sanity.color.spot.yellow
+export const ChangeBarButton = styled.button<{$withHoverEffect?: boolean}>((props) => {
+  const {$withHoverEffect} = props
 
-    return css`
-      appearance: none;
+  return css`
+    appearance: none;
+    border: 0;
+    outline: 0;
+    display: block;
+    padding: 0;
+    background: transparent;
+    opacity: 0;
+    position: absolute;
+    height: 100%;
+    cursor: pointer;
+    pointer-events: all;
+    left: calc(-0.25rem + var(--change-bar-offset));
+    width: calc(1rem - 1px);
+    transition: opacity ${animationSpeed}ms;
+
+    &:focus {
       border: 0;
       outline: 0;
-      display: block;
-      padding: 0;
-      background: transparent;
-      opacity: 0;
-      position: absolute;
-      height: 100%;
-      cursor: pointer;
-      pointer-events: all;
-      left: calc(-0.25rem + var(--change-bar-offset));
-      width: 1rem;
-      transition: opacity ${animationSpeed}ms;
-
-      &:focus {
-        border: 0;
-        outline: 0;
-      }
-
-      &:after {
-        content: '';
-        width: 16px;
-        height: calc(100% + 14px);
-        display: block;
-        position: absolute;
-        top: -7px;
-        left: -3px;
-        border-radius: 8px;
-        background: ${notSelectedColor};
-      }
+    }
 
-      &:focus {
-        border: 0;
-        outline: 0;
-      }
+    &:focus {
+      border: 0;
+      outline: 0;
+    }
 
-      ${$withHoverEffect &&
-      css`
-        @media (hover: hover) {
-          &:hover {
-            opacity: 0.2;
-          }
+    ${$withHoverEffect &&
+    css`
+      @media (hover: hover) {
+        &:hover {
+          opacity: 0.2;
         }
-      `}
-    `
-  },
-)
+      }
+    `}
+  `
+})
diff --git a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
index 76098fd2cab..6154090df95 100644
--- a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
+++ b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
@@ -14,10 +14,11 @@ import {
 export function ElementWithChangeBar(props: {
   children: React.ReactNode
   disabled?: boolean
+  hasFocus?: boolean
   isChanged?: boolean
   withHoverEffect?: boolean
 }) {
-  const {children, disabled, isChanged, withHoverEffect = true} = props
+  const {children, disabled, hasFocus, isChanged, withHoverEffect = true} = props
 
   const {onOpenReviewChanges, isReviewChangesOpen} = React.useContext(ConnectorContext)
   const {zIndex} = useLayer()
@@ -48,6 +49,7 @@ export function ElementWithChangeBar(props: {
       data-testid="change-bar-wrapper"
       $changed={isChanged}
       $disabled={disabled}
+      $hasFocus={hasFocus}
       $isReviewChangeOpen={isReviewChangesOpen}
     >
       <FieldWrapper data-testid="change-bar__field-wrapper">{children}</FieldWrapper>
diff --git a/packages/sanity/src/core/changeIndicators/constants.ts b/packages/sanity/src/core/changeIndicators/constants.ts
index 97675affa87..2b80ca9ba41 100644
--- a/packages/sanity/src/core/changeIndicators/constants.ts
+++ b/packages/sanity/src/core/changeIndicators/constants.ts
@@ -10,7 +10,7 @@ export const ARROW_MARGIN_X = 8
 export const ARROW_MARGIN_Y = 2
 export const ARROW_SIZE = 4
 export const ARROW_THRESHOLD = 12
-export const STROKE_WIDTH = 2
+export const STROKE_WIDTH = 1
 
 export const DEBUG = false
 export const DEBUG_LAYER_BOUNDS = DEBUG || false
diff --git a/packages/sanity/src/core/changeIndicators/overlay/Connector.styled.tsx b/packages/sanity/src/core/changeIndicators/overlay/Connector.styled.tsx
index 58f0bae5949..c57b775298c 100644
--- a/packages/sanity/src/core/changeIndicators/overlay/Connector.styled.tsx
+++ b/packages/sanity/src/core/changeIndicators/overlay/Connector.styled.tsx
@@ -1,10 +1,7 @@
-import {Theme} from '@sanity/ui'
-import styled, {css} from 'styled-components'
-import {ClampedRect} from './ClampedRect'
+/* eslint-disable camelcase */
 
-interface PathProps {
-  theme: Theme
-}
+import styled from 'styled-components'
+import {ClampedRect} from './ClampedRect'
 
 export const DebugRect = styled.rect`
   stroke: #ccc;
@@ -13,45 +10,29 @@ export const DebugRect = styled.rect`
   stroke-linecap: round;
 `
 
-export const ConnectorPath = styled.path(({theme}: PathProps) => {
-  /* these colours aren't freely available on the current theme */
-  const strokeColor = theme.sanity.color.spot.yellow
-
-  return css`
-    fill: none;
-    pointer-events: none;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke: ${strokeColor};
-  `
-})
-
-export const InteractivePath = styled.path(({theme}: PathProps) => {
-  /* these colours aren't freely available on the current theme */
-  const strokeColor = theme.sanity.color.spot.yellow
-
-  return css`
-    fill: none;
-    pointer-events: stroke;
-    stroke: ${strokeColor};
-    cursor: pointer;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    opacity: 0;
+export const ConnectorPath = styled.path`
+  fill: none;
+  pointer-events: none;
+  stroke-linejoin: round;
+  stroke: var(--card-badge-caution-dot-color);
+`
 
-    &:hover {
-      opacity: 0.2;
-    }
-  `
-})
+export const InteractivePath = styled.path`
+  fill: none;
+  pointer-events: stroke;
+  stroke: transparent;
+  cursor: pointer;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0;
 
-export const RightBarWrapper = styled(ClampedRect)(({theme}: PathProps) => {
-  /* these colours aren't freely available on the current theme */
-  const strokeColor = theme.sanity.color.spot.yellow
+  &:hover {
+    opacity: 0.2;
+  }
+`
 
-  return css`
-    stroke: none;
-    pointer-events: none;
-    fill: ${strokeColor};
-  `
-})
+export const RightBarWrapper = styled(ClampedRect)`
+  stroke: none;
+  pointer-events: none;
+  fill: var(--card-badge-caution-dot-color);
+`
diff --git a/packages/sanity/src/core/changeIndicators/overlay/Connector.tsx b/packages/sanity/src/core/changeIndicators/overlay/Connector.tsx
index 9fceb78dd34..71738902f9b 100644
--- a/packages/sanity/src/core/changeIndicators/overlay/Connector.tsx
+++ b/packages/sanity/src/core/changeIndicators/overlay/Connector.tsx
@@ -32,9 +32,10 @@ export const Connector = memo(function Connector({from, to}: Props) {
       <InteractivePath d={linePathDescription} strokeWidth={INTERACTIVE_STROKE_WIDTH} />
 
       <ConnectorPath d={linePathDescription} strokeWidth={STROKE_WIDTH} />
+
       <RightBarWrapper
         top={to.rect.top}
-        left={to.rect.left}
+        left={to.rect.left - 0.5}
         height={to.rect.height}
         width={STROKE_WIDTH}
         bounds={to.bounds}
diff --git a/packages/sanity/src/core/changeIndicators/overlay/ConnectorsOverlay.tsx b/packages/sanity/src/core/changeIndicators/overlay/ConnectorsOverlay.tsx
index 7d087a843be..75940936ce2 100644
--- a/packages/sanity/src/core/changeIndicators/overlay/ConnectorsOverlay.tsx
+++ b/packages/sanity/src/core/changeIndicators/overlay/ConnectorsOverlay.tsx
@@ -165,10 +165,8 @@ function ConnectorGroup(props: ConnectorGroupProps) {
   const from = useMemo(
     () => ({
       rect: {
-        left: field.rect.left + 2,
-        top: field.rect.top,
-        height: field.rect.height,
-        width: field.rect.width,
+        ...field.rect,
+        left: field.rect.left + 3,
       },
       bounds: field.bounds,
     }),
@@ -176,7 +174,13 @@ function ConnectorGroup(props: ConnectorGroupProps) {
   )
 
   const to = useMemo(
-    () => ({rect: change.rect, bounds: change.bounds}),
+    () => ({
+      rect: {
+        ...change.rect,
+        left: change.rect.left + 1,
+      },
+      bounds: change.bounds,
+    }),
     [change.bounds, change.rect],
   )
 

From 9251f5ff560331d16cab9f8ce0624e7e8c1959be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:32:07 +0100
Subject: [PATCH 079/163] fix(studio): update beta badge

---
 .../sanity/src/core/components/BetaBadge.tsx  | 23 ++++---------------
 1 file changed, 4 insertions(+), 19 deletions(-)

diff --git a/packages/sanity/src/core/components/BetaBadge.tsx b/packages/sanity/src/core/components/BetaBadge.tsx
index 06a96feca32..7a1678966fd 100644
--- a/packages/sanity/src/core/components/BetaBadge.tsx
+++ b/packages/sanity/src/core/components/BetaBadge.tsx
@@ -1,31 +1,16 @@
-import React, {PropsWithChildren} from 'react'
-import {hues} from '@sanity/color'
+import {HTMLProps} from 'react'
 import {Badge, BadgeProps} from '@sanity/ui'
-import styled, {css} from 'styled-components'
-
-const StyledBadge = styled(Badge)(({theme}) => {
-  const fgTint = theme.sanity.color.dark ? 50 : 700
-  const bgTint = theme.sanity.color.dark ? 700 : 100
-  const bg = hues.purple[bgTint].hex
-  const fg = hues.purple[fgTint].hex
-
-  return css`
-    background-color: ${bg};
-    box-shadow: inset 0 0 0 1px ${bg};
-    color: ${fg};
-  `
-})
 
 /** @internal */
 export type BetaBadgeProps = Omit<BadgeProps, 'mode' | 'tone'>
 
 /** @internal */
-export function BetaBadge(props: PropsWithChildren<BetaBadgeProps>) {
+export function BetaBadge(props: BetaBadgeProps & Omit<HTMLProps<HTMLDivElement>, 'ref'>) {
   const {fontSize = 1, children = 'Beta', ...rest} = props
 
   return (
-    <StyledBadge {...rest} fontSize={fontSize}>
+    <Badge {...rest} fontSize={fontSize} radius={2} tone="primary">
       {children}
-    </StyledBadge>
+    </Badge>
   )
 }

From 559518417df659265d2eb377821be9a872240520 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:33:07 +0100
Subject: [PATCH 080/163] fix(studio): update preview components

---
 .../previews/_common/Media.styled.ts          | 19 ++------
 .../components/previews/_common/Media.tsx     |  4 +-
 .../src/core/components/previews/constants.ts |  2 +-
 .../previews/general/DefaultPreview.tsx       | 45 ++++++++++---------
 .../components/SanityDefaultPreview.tsx       |  7 ++-
 .../src/desk/components/paneItem/PaneItem.tsx |  2 +-
 .../components/paneItem/PaneItemPreview.tsx   |  6 +--
 7 files changed, 41 insertions(+), 44 deletions(-)

diff --git a/packages/sanity/src/core/components/previews/_common/Media.styled.ts b/packages/sanity/src/core/components/previews/_common/Media.styled.ts
index ee9e98bf06c..9b348234d00 100644
--- a/packages/sanity/src/core/components/previews/_common/Media.styled.ts
+++ b/packages/sanity/src/core/components/previews/_common/Media.styled.ts
@@ -1,6 +1,5 @@
 import {rem} from '@sanity/ui'
 import styled, {css} from 'styled-components'
-import {PREVIEW_SIZES} from '../constants'
 import {PreviewLayoutKey, PreviewMediaDimensions} from '../types'
 
 export const MediaWrapper = styled.span<{
@@ -9,10 +8,9 @@ export const MediaWrapper = styled.span<{
   $radius: number
   $responsive: boolean
 }>((props) => {
-  const {$dimensions, $layout, $radius, $responsive} = props
+  const {$dimensions, $radius, $responsive} = props
   const width = $dimensions.width || 0
   const height = $dimensions.width || 0
-  const iconSize = PREVIEW_SIZES[$layout].icon
 
   return css`
     position: relative;
@@ -34,20 +32,10 @@ export const MediaWrapper = styled.span<{
       height: 100%;
       object-fit: contain;
       border-radius: inherit;
-    }
-
-    & svg {
-      display: block;
-      flex: 1;
-      font-size: calc(21 / 16 * 1em);
-    }
-
-    & [data-sanity-icon] {
       display: block;
-      font-size: calc(${iconSize} / 16 * 1em);
     }
 
-    span[data-border] {
+    & > span[data-border] {
       display: block;
       position: absolute;
       left: 0;
@@ -55,8 +43,9 @@ export const MediaWrapper = styled.span<{
       right: 0;
       bottom: 0;
       box-shadow: inset 0 0 0 1px var(--card-fg-color);
-      opacity: 0.2;
+      opacity: 0.1;
       border-radius: inherit;
+      pointer-events: none;
     }
   `
 })
diff --git a/packages/sanity/src/core/components/previews/_common/Media.tsx b/packages/sanity/src/core/components/previews/_common/Media.tsx
index dfa7eaf6456..e7fc1e203ca 100644
--- a/packages/sanity/src/core/components/previews/_common/Media.tsx
+++ b/packages/sanity/src/core/components/previews/_common/Media.tsx
@@ -18,7 +18,7 @@ export interface MediaProps {
 }
 
 export function Media(props: MediaProps) {
-  const {border = true, dimensions, layout, media, radius = 2, responsive = false, styles} = props
+  const {border = true, dimensions, layout, media, radius = 1, responsive = false, styles} = props
 
   return (
     <MediaWrapper
@@ -52,7 +52,7 @@ function renderMedia(props: {
 
   if (typeof media === 'string') {
     return (
-      <Text as="span" className={styles?.mediaString}>
+      <Text as="span" className={styles?.mediaString} size={1}>
         {media}
       </Text>
     )
diff --git a/packages/sanity/src/core/components/previews/constants.ts b/packages/sanity/src/core/components/previews/constants.ts
index 2313d151cfe..2d926e93d71 100644
--- a/packages/sanity/src/core/components/previews/constants.ts
+++ b/packages/sanity/src/core/components/previews/constants.ts
@@ -21,7 +21,7 @@ export const PREVIEW_SIZES: Record<
   },
   default: {
     icon: 25,
-    media: {width: 39, height: 39},
+    media: {width: 33, height: 33},
   },
   detail: {
     icon: 45,
diff --git a/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx b/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx
index 326e8f3d84c..e45e113baa6 100644
--- a/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx
+++ b/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx
@@ -57,12 +57,7 @@ export function DefaultPreview(props: DefaultPreviewProps) {
   const rootClassName = classNames(styles?.root, Boolean(subtitle) && styles?.hasSubtitle)
 
   const statusNode = status && (
-    <Box
-      className={styles?.status}
-      data-testid="default-preview__status"
-      paddingLeft={4}
-      paddingRight={1}
-    >
+    <Box className={styles?.status} data-testid="default-preview__status">
       {renderPreviewNode(status, 'default')}
     </Box>
   )
@@ -73,19 +68,24 @@ export function DefaultPreview(props: DefaultPreviewProps) {
         align="center"
         className={styles?.placeholder}
         data-testid="default-preview"
+        padding={2}
         paddingLeft={media ? 2 : 3}
-        paddingRight={2}
-        paddingY={1}
       >
-        <Flex align="center" flex={1} gap={3}>
-          {media && <Skeleton animated radius={2} style={PREVIEW_SIZES.default.media} />}
+        <Flex align="center" flex={1} gap={2}>
+          {media && (
+            <Box flex="none">
+              <Skeleton animated radius={1} style={PREVIEW_SIZES.default.media} />
+            </Box>
+          )}
 
           <Stack data-testid="default-preview__heading" flex={1} space={2}>
             <TitleSkeleton />
             <SubtitleSkeleton />
           </Stack>
 
-          {statusNode}
+          <Box flex="none" padding={1}>
+            {statusNode}
+          </Box>
         </Flex>
       </Root>
     )
@@ -96,18 +96,19 @@ export function DefaultPreview(props: DefaultPreviewProps) {
       align="center"
       className={rootClassName}
       data-testid="default-preview"
+      padding={2}
       paddingLeft={media ? 2 : 3}
-      paddingRight={2}
-      paddingY={1}
     >
-      <Flex align="center" flex={1} gap={3}>
+      <Flex align="center" flex={1} gap={2}>
         {media && (
-          <Media
-            dimensions={DEFAULT_MEDIA_DIMENSIONS}
-            layout="default"
-            media={media as any}
-            styles={styles}
-          />
+          <Box flex="none">
+            <Media
+              dimensions={DEFAULT_MEDIA_DIMENSIONS}
+              layout="default"
+              media={media as any}
+              styles={styles}
+            />
+          </Box>
         )}
 
         <Stack className={styles?.heading} data-testid="default-preview__header" flex={1} space={2}>
@@ -133,7 +134,9 @@ export function DefaultPreview(props: DefaultPreviewProps) {
           )}
         </Stack>
 
-        {statusNode}
+        <Box flex="none" padding={1}>
+          {statusNode}
+        </Box>
 
         {children && <div className={styles?.children}>{children}</div>}
       </Flex>
diff --git a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
index 9824c3300f8..6977377ce42 100644
--- a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
+++ b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
@@ -14,6 +14,7 @@ import React, {
 import {isValidElementType} from 'react-is'
 import {SanityImageSource} from '@sanity/image-url/lib/types/types'
 import {isImageSource} from '@sanity/asset-utils'
+import {Text} from '@sanity/ui'
 import {Tooltip} from '../../../ui'
 import {PreviewProps} from '../../components/previews'
 import {useClient} from '../../hooks'
@@ -106,7 +107,11 @@ export function SanityDefaultPreview(props: SanityDefaultPreviewProps): ReactEle
     }
 
     // Render fallback icon
-    return renderIcon
+    return (
+      <Text as="span" size={1}>
+        {renderIcon()}
+      </Text>
+    )
   }, [icon, imageUrl, mediaProp, renderIcon, renderMedia, title])
 
   const previewProps: Omit<PreviewProps, 'renderDefault'> = useMemo(
diff --git a/packages/sanity/src/desk/components/paneItem/PaneItem.tsx b/packages/sanity/src/desk/components/paneItem/PaneItem.tsx
index 187e219440d..2b0ba490199 100644
--- a/packages/sanity/src/desk/components/paneItem/PaneItem.tsx
+++ b/packages/sanity/src/desk/components/paneItem/PaneItem.tsx
@@ -89,7 +89,7 @@ export function PaneItem(props: PaneItemProps) {
       <SanityDefaultPreview
         status={
           <Box style={{opacity: 0.5}}>
-            <Text muted size={0}>
+            <Text muted size={1}>
               <ChevronRightIcon />
             </Text>
           </Box>
diff --git a/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx b/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
index 43fd11a2618..b3ab9a9b0cb 100644
--- a/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
+++ b/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
@@ -1,7 +1,7 @@
 import type {SanityDocument, SchemaType} from '@sanity/types'
 import React, {isValidElement} from 'react'
 import {isNumber, isString} from 'lodash'
-import {Inline, TooltipDelayGroupProvider} from '@sanity/ui'
+import {Flex, TooltipDelayGroupProvider} from '@sanity/ui'
 import {useMemoObservable} from 'react-rx'
 import {DocumentStatus} from '../../../ui/documentStatus'
 import {DocumentStatusIndicator} from '../../../ui/documentStatusIndicator'
@@ -52,10 +52,10 @@ export function PaneItemPreview(props: PaneItemPreviewProps) {
 
   const status = isLoading ? null : (
     <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
-      <Inline space={4}>
+      <Flex align="center" gap={3}>
         {presence && presence.length > 0 && <DocumentPreviewPresence presence={presence} />}
         <DocumentStatusIndicator draft={draft} hidePublishedStatus published={published} />
-      </Inline>
+      </Flex>
     </TooltipDelayGroupProvider>
   )
 

From 59a377f5b1777eeca9ad8c35d58800293bc422f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:33:37 +0100
Subject: [PATCH 081/163] fix(form): update date input and picker

---
 .../inputs/DateInputs/CommonDateTimeInput.tsx |  4 +--
 .../inputs/DateInputs/base/DatePicker.tsx     |  2 +-
 .../inputs/DateInputs/base/DateTimeInput.tsx  |  7 +++--
 .../inputs/DateInputs/base/LazyTextInput.tsx  | 24 +++++------------
 .../DateInputs/base/calendar/Calendar.tsx     | 27 +++++++++++--------
 .../DateInputs/base/calendar/CalendarDay.tsx  |  3 ++-
 .../base/calendar/CalendarMonth.tsx           |  1 -
 .../DateInputs/base/calendar/YearInput.tsx    | 27 ++++++++++++-------
 8 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/DateInputs/CommonDateTimeInput.tsx b/packages/sanity/src/core/form/inputs/DateInputs/CommonDateTimeInput.tsx
index 855c0261fc8..6ca4f679651 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/CommonDateTimeInput.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/CommonDateTimeInput.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
 
-import React, {useEffect} from 'react'
+import React, {FocusEvent, useEffect} from 'react'
 
 import {TextInput, useForwardedRef} from '@sanity/ui'
 import {useTranslation} from '../../../i18n/hooks/useTranslation'
@@ -53,7 +53,7 @@ export const CommonDateTimeInput = React.forwardRef(function CommonDateTimeInput
   }, [value])
 
   const handleDatePickerInputChange = React.useCallback(
-    (event: any) => {
+    (event: FocusEvent<HTMLInputElement>) => {
       const nextInputValue = event.currentTarget.value
       const result = nextInputValue === '' ? null : parseInputValue(nextInputValue)
 
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/DatePicker.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/DatePicker.tsx
index 90c2d432655..0688b3a3058 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/DatePicker.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/DatePicker.tsx
@@ -16,7 +16,7 @@ export const DatePicker = React.forwardRef(function DatePicker(
   const [focusedDate, setFocusedDay] = React.useState<Date>()
 
   const handleSelect = React.useCallback(
-    (nextDate: any) => {
+    (nextDate: Date) => {
       onChange(nextDate)
       setFocusedDay(undefined)
     },
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
index cb4a2a93d88..ac95da50399 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
@@ -1,11 +1,11 @@
-import React, {forwardRef, useCallback, useRef, useState} from 'react'
+import React, {KeyboardEvent, forwardRef, useCallback, useRef, useState} from 'react'
 import FocusLock from 'react-focus-lock'
 import {Box, Flex, LayerProvider, Popover, useClickOutside, useForwardedRef} from '@sanity/ui'
 import {CalendarIcon} from '@sanity/icons'
 import {Button} from '../../../../../ui'
 import {DatePicker} from './DatePicker'
 import {LazyTextInput} from './LazyTextInput'
-import {CalendarLabels, MonthNames} from './calendar/types'
+import {CalendarLabels} from './calendar/types'
 
 export interface DateTimeInputProps {
   customValidity?: string
@@ -48,7 +48,7 @@ export const DateTimeInput = forwardRef(function DateTimeInput(
     forwardedRef.current?.select()
   }, [forwardedRef])
 
-  const handleKeyUp = useCallback((e: any) => {
+  const handleKeyUp = useCallback((e: KeyboardEvent<HTMLDivElement>) => {
     if (e.key === 'Escape') {
       setPickerOpen(false)
     }
@@ -103,7 +103,6 @@ export const DateTimeInput = forwardRef(function DateTimeInput(
               open
               placement="bottom"
               ref={setPopoverRef}
-              radius={2}
             >
               {suffix}
             </Popover>
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/LazyTextInput.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/LazyTextInput.tsx
index 03aa13571fb..0bb5af07ad0 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/LazyTextInput.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/LazyTextInput.tsx
@@ -1,17 +1,5 @@
-import React from 'react'
-import {TextInput} from '@sanity/ui'
-
-type TextInputProps = React.ComponentProps<typeof TextInput>
-
-// todo: delete this when v0.34 of @sanity/ui is out
-type Workaround = any
-
-type Props = Workaround &
-  Omit<TextInputProps, 'onChange'> & {
-    onChange?: (
-      event: React.FocusEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>,
-    ) => void
-  }
+import React, {ChangeEvent, FocusEvent, HTMLProps, SyntheticEvent} from 'react'
+import {TextInput, TextInputProps} from '@sanity/ui'
 
 /**
  * A TextInput that only emit onChange when it has to
@@ -19,17 +7,17 @@ type Props = Workaround &
  * field (e.g. onBlur) and the input value at this time is different from the given `value` prop
  */
 export const LazyTextInput = React.forwardRef(function LazyTextInput(
-  {onChange, onBlur, onKeyPress, value, ...rest}: Props,
+  {onChange, onBlur, onKeyPress, value, ...rest}: TextInputProps & HTMLProps<HTMLInputElement>,
   forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
   const [inputValue, setInputValue] = React.useState<string>()
 
-  const handleChange = React.useCallback((event: any) => {
+  const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
     setInputValue(event.currentTarget.value)
   }, [])
 
   const checkEvent = React.useCallback(
-    (event: any) => {
+    (event: SyntheticEvent<HTMLInputElement>) => {
       const currentValue = event.currentTarget.value
       if (currentValue !== `${value}`) {
         if (onChange) {
@@ -42,7 +30,7 @@ export const LazyTextInput = React.forwardRef(function LazyTextInput(
   )
 
   const handleBlur = React.useCallback(
-    (e: any) => {
+    (e: FocusEvent<HTMLInputElement>) => {
       checkEvent(e)
       if (onBlur) {
         onBlur(e)
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx
index 0a69d2f864c..ecd63f025ea 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx
@@ -2,7 +2,7 @@ import {Box, Flex, Grid, Select, Text, useForwardedRef} from '@sanity/ui'
 import {ChevronLeftIcon, ChevronRightIcon} from '@sanity/icons'
 import {addDays, addMonths, setDate, setHours, setMinutes, setMonth, setYear} from 'date-fns'
 import {range} from 'lodash'
-import React, {forwardRef, useCallback, useEffect} from 'react'
+import React, {KeyboardEvent, forwardRef, useCallback, useEffect} from 'react'
 import {Button} from '../../../../../../ui'
 import {CalendarMonth} from './CalendarMonth'
 import {ARROW_KEYS, DEFAULT_TIME_PRESETS, HOURS_24} from './constants'
@@ -38,9 +38,7 @@ const PRESERVE_FOCUS_ELEMENT = (
 
 // This buttons use a specific styling, given they are intended to be aligned with the select elements.
 const CALENDAR_ICON_BUTTON_PROPS = {
-  fontSize: 2,
-  radius: 0,
-  paddingX: 2,
+  padding: 2,
 }
 
 export const Calendar = forwardRef(function Calendar(
@@ -120,12 +118,13 @@ export const Calendar = forwardRef(function Calendar(
   }, [ref])
 
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+    (event: KeyboardEvent<HTMLDivElement>) => {
       if (!ARROW_KEYS.includes(event.key)) {
         return
       }
+      const target = event.currentTarget
       event.preventDefault()
-      if (event.target instanceof HTMLElement && event.target.hasAttribute('data-calendar-grid')) {
+      if (target.hasAttribute('data-calendar-grid')) {
         focusCurrentWeekDay()
         return
       }
@@ -244,6 +243,9 @@ export const Calendar = forwardRef(function Calendar(
               <Box>
                 <Select
                   aria-label={labels.selectHour}
+                  fontSize={1}
+                  padding={2}
+                  radius={2}
                   value={selectedDate?.getHours()}
                   onChange={handleHoursChange}
                 >
@@ -256,12 +258,15 @@ export const Calendar = forwardRef(function Calendar(
               </Box>
 
               <Box paddingX={1}>
-                <Text>:</Text>
+                <Text size={1}>:</Text>
               </Box>
 
               <Box>
                 <Select
                   aria-label={labels.selectMinute}
+                  fontSize={1}
+                  padding={2}
+                  radius={2}
                   value={selectedDate?.getMinutes()}
                   onChange={handleMinutesChange}
                 >
@@ -335,7 +340,7 @@ function CalendarMonthSelect(props: {
   const handleNextMonthClick = useCallback(() => moveFocusedDate(1), [moveFocusedDate])
 
   return (
-    <Flex flex={1}>
+    <Flex flex={1} gap={1}>
       <Button
         aria-label={labels.goToPreviousMonth}
         onClick={handlePrevMonthClick}
@@ -348,7 +353,7 @@ function CalendarMonthSelect(props: {
       />
 
       <Box flex={1}>
-        <Select radius={0} value={value} onChange={onChange}>
+        <Select fontSize={1} radius={2} value={value} onChange={onChange} padding={2}>
           {monthNames.map((monthName, i) => (
             // eslint-disable-next-line react/no-array-index-key
             <option key={i} value={i}>
@@ -384,7 +389,7 @@ function CalendarYearSelect(props: {
   const handleNextYearClick = useCallback(() => moveFocusedDate(12), [moveFocusedDate])
 
   return (
-    <Flex>
+    <Flex gap={1}>
       <Button
         aria-label={labels.goToPreviousYear}
         onClick={handlePrevYearClick}
@@ -395,7 +400,7 @@ function CalendarYearSelect(props: {
         // @ts-ignore - Button with specific styling requirements
         {...CALENDAR_ICON_BUTTON_PROPS}
       />
-      <YearInput value={value} onChange={onChange} radius={0} style={{width: 65}} />
+      <YearInput value={value} onChange={onChange} radius={0} style={{width: 48}} />
       <Button
         aria-label={labels.goToNextYear}
         onClick={handleNextYearClick}
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarDay.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarDay.tsx
index 5d1588f62fd..9f3af7c3e2d 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarDay.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarDay.tsx
@@ -29,13 +29,14 @@ export function CalendarDay(props: CalendarDayProps) {
         role="button"
         tabIndex={-1}
         onClick={handleClick}
-        padding={3}
+        padding={2}
         radius={2}
         selected={selected}
         tone={isToday || selected ? 'primary' : 'default'}
       >
         <Text
           muted={!selected && !isCurrentMonth}
+          size={1}
           style={{textAlign: 'center'}}
           weight={isCurrentMonth ? 'medium' : 'regular'}
         >
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarMonth.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarMonth.tsx
index 3e8f64730d9..98882e10a18 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarMonth.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarMonth.tsx
@@ -1,6 +1,5 @@
 import {Box, Grid, Text} from '@sanity/ui'
 import {isSameDay, isSameMonth} from 'date-fns'
-import React from 'react'
 import {useCurrentLocale} from '../../../../../i18n/hooks/useLocale'
 import {CalendarDay} from './CalendarDay'
 import {useWeeksOfMonth} from './utils'
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/YearInput.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/YearInput.tsx
index dd48b782306..e39b78362b5 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/YearInput.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/YearInput.tsx
@@ -1,15 +1,15 @@
-import React from 'react'
-import {TextInput} from '@sanity/ui'
+import React, {ChangeEvent, HTMLProps} from 'react'
+import {TextInputProps} from '@sanity/ui'
 import {LazyTextInput} from '../LazyTextInput'
 
-type Props = Omit<React.ComponentProps<typeof TextInput>, 'onChange' | 'value'> & {
-  value?: number
-  onChange: (year: number) => void
-}
+export const YearInput = (
+  props: {onChange: (year: number) => void} & TextInputProps &
+    Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'ref'>,
+) => {
+  const {onChange, ...restProps} = props
 
-export const YearInput = ({onChange, ...props}: Props) => {
   const handleChange = React.useCallback(
-    (event: React.FocusEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>) => {
+    (event: ChangeEvent<HTMLInputElement>) => {
       const numericValue = parseInt(event.currentTarget.value, 10)
       if (!isNaN(numericValue)) {
         onChange(numericValue)
@@ -18,5 +18,14 @@ export const YearInput = ({onChange, ...props}: Props) => {
     [onChange],
   )
 
-  return <LazyTextInput {...props} onChange={handleChange} inputMode="numeric" />
+  return (
+    <LazyTextInput
+      {...restProps}
+      fontSize={1}
+      onChange={handleChange}
+      inputMode="numeric"
+      padding={2}
+      radius={2}
+    />
+  )
 }

From 7c9b8a4ec2a4e5920595aee3671a21ca948b88a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:33:57 +0100
Subject: [PATCH 082/163] fix(form): use border instead of shadow for reference
 input

---
 .../src/core/form/inputs/ReferenceInput/ReferenceField.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
index bc880ac321a..e7682dcd7f1 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
@@ -263,7 +263,7 @@ export function ReferenceField(props: ReferenceFieldProps) {
           {isEditing ? (
             <Box>{children}</Box>
           ) : (
-            <Card shadow={1} radius={1} padding={1} tone={tone}>
+            <Card border radius={1} padding={1} tone={tone}>
               <Stack space={1}>
                 <Flex gap={1} align="center" style={{lineHeight: 0}}>
                   <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>

From 1b1a978f49ae0cb414b01f663349b59794e063c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:34:10 +0100
Subject: [PATCH 083/163] fix(form): use border instead of shadow for file
 input

---
 .../sanity/src/core/form/inputs/files/common/UploadProgress.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
index 57dab21e5ab..3d2c23ecbcf 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
@@ -43,7 +43,7 @@ export function UploadProgress({uploadState, onCancel, onStale, height}: Props)
             </Text>
           </Flex>
 
-          <Card marginTop={3} radius={5} shadow={1}>
+          <Card border marginTop={3} radius={5}>
             <LinearProgress value={uploadState.progress} />
           </Card>
         </LeftSection>

From c48d6142a628c1029bacef6e444821167519cbc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:34:39 +0100
Subject: [PATCH 084/163] fix(studio): update global styles

---
 .../sanity/src/core/studio/GlobalStyle.tsx    | 19 +++++++++++--------
 .../src/core/studio/StudioThemeProvider.tsx   |  4 ++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/sanity/src/core/studio/GlobalStyle.tsx b/packages/sanity/src/core/studio/GlobalStyle.tsx
index ef5a5616234..182b4df1828 100644
--- a/packages/sanity/src/core/studio/GlobalStyle.tsx
+++ b/packages/sanity/src/core/studio/GlobalStyle.tsx
@@ -1,10 +1,13 @@
+/* eslint-disable camelcase */
+
+import {getTheme_v2} from '@sanity/ui/theme'
 import {createGlobalStyle, css} from 'styled-components'
 
 const SCROLLBAR_SIZE = 14 // px
 const SCROLLBAR_BORDER_SIZE = 4 // px
 
-export const GlobalStyle = createGlobalStyle(({theme}) => {
-  const {color, fonts} = theme.sanity
+export const GlobalStyle = createGlobalStyle((props) => {
+  const {color, font} = getTheme_v2(props.theme)
 
   return css`
     ::-webkit-scrollbar {
@@ -14,13 +17,13 @@ export const GlobalStyle = createGlobalStyle(({theme}) => {
 
     ::-webkit-scrollbar-thumb {
       background-clip: content-box;
-      background-color: ${color.muted.transparent.disabled.fg};
+      background-color: ${color.bg};
       border-radius: ${SCROLLBAR_SIZE}px;
       border: ${SCROLLBAR_BORDER_SIZE}px solid transparent;
     }
 
     ::-webkit-scrollbar-thumb:hover {
-      background-color: ${color.muted.transparent.enabled.fg};
+      background-color: ${color.muted.fg};
     }
 
     ::-webkit-scrollbar-track {
@@ -28,19 +31,19 @@ export const GlobalStyle = createGlobalStyle(({theme}) => {
     }
 
     html {
-      background-color: ${color.base.bg};
+      background-color: ${color.bg};
     }
 
     #sanity {
-      font-family: ${fonts.text.family};
+      font-family: ${font.text.family};
     }
 
     b {
-      font-weight: ${fonts.text.weights.medium};
+      font-weight: ${font.text.weights.medium};
     }
 
     strong {
-      font-weight: ${fonts.text.weights.medium};
+      font-weight: ${font.text.weights.medium};
     }
   `
 })
diff --git a/packages/sanity/src/core/studio/StudioThemeProvider.tsx b/packages/sanity/src/core/studio/StudioThemeProvider.tsx
index a2ec9d23256..dc1924866e5 100644
--- a/packages/sanity/src/core/studio/StudioThemeProvider.tsx
+++ b/packages/sanity/src/core/studio/StudioThemeProvider.tsx
@@ -18,7 +18,7 @@ export function StudioThemeProvider({children}: StudioThemeProviderProps) {
     return (
       <ColorSchemeSetValueContext.Provider value={false}>
         <ColorSchemeValueContext.Provider value={scheme}>
-          <ThemeProvider scheme={scheme} theme={theme} tone="transparent">
+          <ThemeProvider scheme={scheme} theme={theme}>
             <LayerProvider>{children}</LayerProvider>
           </ThemeProvider>
         </ColorSchemeValueContext.Provider>
@@ -27,7 +27,7 @@ export function StudioThemeProvider({children}: StudioThemeProviderProps) {
   }
 
   return (
-    <ThemeProvider theme={theme} tone="transparent">
+    <ThemeProvider theme={theme}>
       <LayerProvider>{children}</LayerProvider>
     </ThemeProvider>
   )

From 6021f935cb38d6892f77355b32367f6f3837dd49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:35:02 +0100
Subject: [PATCH 085/163] fix(studio): decrease heading size in config issues
 dialog

---
 .../components/navbar/configIssues/ConfigIssuesButton.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx b/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
index 9f8314375cf..1ad9c8c9b98 100644
--- a/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
@@ -62,7 +62,7 @@ export function ConfigIssuesButton() {
         >
           <Stack space={4}>
             <Stack space={3}>
-              <Text as="h2" size={2} weight="medium">
+              <Text as="h2" size={1} weight="medium">
                 Found {groupsWithWarnings.length} schema warnings
               </Text>{' '}
               <Text muted size={1}>

From 4eb480e43e22240d8715301d04941107143063c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:36:34 +0100
Subject: [PATCH 086/163] fix(ui): change copy from 'Updated' to 'Edited'

---
 .../components/navbar/search/definitions/defaultFilters.ts      | 2 +-
 packages/sanity/src/ui/documentStatus/DocumentStatus.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/search/definitions/defaultFilters.ts b/packages/sanity/src/core/studio/components/navbar/search/definitions/defaultFilters.ts
index 656617c008e..53f451a9882 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/definitions/defaultFilters.ts
+++ b/packages/sanity/src/core/studio/components/navbar/search/definitions/defaultFilters.ts
@@ -28,7 +28,7 @@ export const filterDefinitions: SearchFilterDefinition[] = [
       {name: 'dateTimeEqual', type: 'item'},
       {name: 'dateTimeNotEqual', type: 'item'},
     ],
-    title: 'Updated at',
+    title: 'Edited at',
     name: 'updatedAt',
     type: 'pinned',
   }),
diff --git a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
index 3a161ca7c8e..5ec9f1a9d30 100644
--- a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
+++ b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
@@ -62,7 +62,7 @@ export function DocumentStatus({absoluteDate, draft, published, singleLine}: Doc
       {updatedDate && (
         // eslint-disable-next-line i18next/no-literal-string
         <StyledText muted size={1} wrap="nowrap">
-          Updated {updatedDate}
+          Edited {updatedDate}
         </StyledText>
       )}
     </Flex>

From 9b8a6ee861997d42dba054747798ab902054f11a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:37:26 +0100
Subject: [PATCH 087/163] fix(desk): always use icon for publish action

---
 packages/sanity/src/desk/documentActions/PublishAction.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/sanity/src/desk/documentActions/PublishAction.tsx b/packages/sanity/src/desk/documentActions/PublishAction.tsx
index 1b5d8105d02..cd2111aefe9 100644
--- a/packages/sanity/src/desk/documentActions/PublishAction.tsx
+++ b/packages/sanity/src/desk/documentActions/PublishAction.tsx
@@ -143,6 +143,7 @@ export const PublishAction: DocumentActionComponent = (props) => {
   if (liveEdit) {
     return {
       tone: 'default',
+      icon: PublishIcon,
       label: t('action.publish.live-edit.label'),
       title: t('action.publish.live-edit.tooltip'),
       disabled: true,
@@ -152,6 +153,7 @@ export const PublishAction: DocumentActionComponent = (props) => {
   if (!isPermissionsLoading && !permissions?.granted) {
     return {
       tone: 'default',
+      icon: PublishIcon,
       label: 'Publish',
       title: (
         <InsufficientPermissionsMessage context="publish-document" currentUser={currentUser} />
@@ -181,7 +183,7 @@ export const PublishAction: DocumentActionComponent = (props) => {
           : t('action.publish.draft.label'),
     // @todo: Implement loading state, to show a `<Button loading />` state
     // loading: publishScheduled || publishState === 'publishing',
-    icon: publishState === 'published' ? CheckmarkIcon : PublishIcon,
+    icon: PublishIcon,
     // eslint-disable-next-line no-nested-ternary
     title: publishScheduled
       ? t('action.publish.waiting')

From 6e20b260af6d351a5c7c5acbd46d80473bbcb215 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:37:45 +0100
Subject: [PATCH 088/163] fix(desk): update inspect dialog

---
 .../document/inspectDialog/InspectDialog.styles.tsx  | 12 ++++++------
 .../panes/document/inspectDialog/InspectDialog.tsx   | 10 ++++++++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.styles.tsx b/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.styles.tsx
index 93e7a428f9a..db8a6a9838f 100644
--- a/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.styles.tsx
+++ b/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.styles.tsx
@@ -8,8 +8,8 @@ export const JSONInspectorWrapper = styled.div(({theme}: {theme: Theme}) => {
     & .json-inspector,
     & .json-inspector .json-inspector__selection {
       font-family: ${fonts.code.family};
-      font-size: ${fonts.code.sizes[2].fontSize}px;
-      line-height: ${fonts.code.sizes[2].lineHeight}px;
+      font-size: ${fonts.code.sizes[1].fontSize}px;
+      line-height: ${fonts.code.sizes[1].lineHeight}px;
       color: var(--card-code-fg-color);
     }
 
@@ -54,8 +54,8 @@ export const JSONInspectorWrapper = styled.div(({theme}: {theme: Theme}) => {
     & .json-inspector .json-inspector__leaf_composite > .json-inspector__line::before {
       content: '▸ ';
       margin-left: calc(0 - ${rem(space[4])} + 3px);
-      font-size: ${fonts.code.sizes[2].fontSize}px;
-      line-height: ${fonts.code.sizes[2].lineHeight}px;
+      font-size: ${fonts.code.sizes[1].fontSize}px;
+      line-height: ${fonts.code.sizes[1].lineHeight}px;
     }
 
     &
@@ -63,8 +63,8 @@ export const JSONInspectorWrapper = styled.div(({theme}: {theme: Theme}) => {
       .json-inspector__leaf_expanded.json-inspector__leaf_composite
       > .json-inspector__line::before {
       content: '▾ ';
-      font-size: ${fonts.code.sizes[2].fontSize}px;
-      line-height: ${fonts.code.sizes[2].lineHeight}px;
+      font-size: ${fonts.code.sizes[1].fontSize}px;
+      line-height: ${fonts.code.sizes[1].lineHeight}px;
     }
 
     & .json-inspector .json-inspector__radio,
diff --git a/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx b/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx
index b702b19c9a2..ad2d3d5cb72 100644
--- a/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx
@@ -68,10 +68,15 @@ export function InspectDialog(props: InspectDialogProps) {
       onClose={onInspectClose}
       onClickOutside={onInspectClose}
       padding={false}
-      width={3}
+      width={2}
     >
       <Flex direction="column" height="fill">
-        <Card borderBottom padding={3} style={{position: 'sticky', bottom: 0, zIndex: 3}}>
+        <Card
+          padding={3}
+          paddingTop={0}
+          shadow={1}
+          style={{position: 'sticky', bottom: 0, zIndex: 3}}
+        >
           <TabList space={1}>
             <Tab
               aria-controls={`${dialogIdPrefix}tabpanel`}
@@ -116,6 +121,7 @@ export function InspectDialog(props: InspectDialogProps) {
               onKeyDown={maybeSelectAll}
               onDoubleClick={select}
               onFocus={select}
+              size={1}
             >
               {JSON.stringify(value, null, 2)}
             </Code>

From ab72c03320d79d0ae25620227d880a6ba7f7ee9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:38:23 +0100
Subject: [PATCH 089/163] fix(desk): align pane header

---
 .../src/desk/components/pane/PaneHeader.tsx      | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/sanity/src/desk/components/pane/PaneHeader.tsx b/packages/sanity/src/desk/components/pane/PaneHeader.tsx
index 4428751b4ce..c3ba79b04cc 100644
--- a/packages/sanity/src/desk/components/pane/PaneHeader.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneHeader.tsx
@@ -63,28 +63,22 @@ export const PaneHeader = forwardRef(function PaneHeader(
         <LegacyLayerProvider zOffset="paneHeader">
           <Card data-collapsed={collapsed ? '' : undefined} tone="inherit">
             <Layout
+              gap={1}
               onClick={handleLayoutClick}
-              paddingBottom={1}
-              paddingTop={collapsed ? 1 : 2}
-              paddingX={3}
-              marginY={collapsed ? 1 : 0}
+              padding={3}
+              paddingBottom={collapsed ? 3 : 2}
               sizing="border"
               style={layoutStyle}
             >
-              {backButton && (
-                <Box flex="none" padding={1} paddingLeft={0}>
-                  {backButton}
-                </Box>
-              )}
+              {backButton && <Box flex="none">{backButton}</Box>}
 
               <TitleCard
                 __unstable_focusRing
                 flex={1}
                 forwardedAs="button"
-                marginRight={actions ? 1 : 0}
                 onClick={handleTitleClick}
                 paddingLeft={backButton ? 1 : 2}
-                paddingY={3}
+                padding={2}
                 tabIndex={tabIndex}
               >
                 {loading && <TitleTextSkeleton animated radius={1} size={1} />}

From 3072162873722686e90c3ef6bb5418a0f659c9bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:38:39 +0100
Subject: [PATCH 090/163] fix(desk): use json icon

---
 packages/sanity/src/desk/panes/document/menuItems.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sanity/src/desk/panes/document/menuItems.ts b/packages/sanity/src/desk/panes/document/menuItems.ts
index cdedd7ac364..74f250afce5 100644
--- a/packages/sanity/src/desk/panes/document/menuItems.ts
+++ b/packages/sanity/src/desk/panes/document/menuItems.ts
@@ -1,4 +1,4 @@
-import {BinaryDocumentIcon, EarthAmericasIcon} from '@sanity/icons'
+import {JsonIcon, EarthAmericasIcon} from '@sanity/icons'
 import type {DeskToolFeatures, PaneMenuItem} from '../../types'
 import {INSPECT_ACTION_PREFIX} from './constants'
 import type {DocumentInspector, DocumentInspectorMenuItem, TFunction} from 'sanity'
@@ -45,7 +45,7 @@ function getInspectItem({hasValue, t}: GetMenuItemsParams): PaneMenuItem {
     action: 'inspect',
     group: 'inspectors',
     title: t('document-inspector.menu-item.title'),
-    icon: BinaryDocumentIcon,
+    icon: JsonIcon,
     isDisabled: !hasValue,
     shortcut: 'Ctrl+Alt+I',
   }

From b765938327fd93b63969f2e14d82271c93129db1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:39:31 +0100
Subject: [PATCH 091/163] fix(desk): align document actions

---
 .../src/desk/panes/document/statusBar/ActionMenuButton.tsx      | 1 +
 .../desk/panes/document/statusBar/DocumentStatusBarActions.tsx  | 2 +-
 packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx  | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
index 3b174832c3d..be9609f39d8 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
@@ -42,6 +42,7 @@ export function ActionMenuButton(props: ActionMenuButtonProps) {
             aria-label={t('buttons.action-menu-button.aria-label')}
             disabled={disabled}
             data-testid="action-menu-button"
+            size="large"
             tooltipProps={{content: t('buttons.action-menu-button.tooltip')}}
           />
         }
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
index 0cc11bb7f20..6d448c420c9 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
@@ -40,7 +40,7 @@ function DocumentStatusBarActionsInner(props: DocumentStatusBarActionsInnerProps
   }, [firstActionState])
 
   return (
-    <Flex align="center" gap={2}>
+    <Flex align="center" gap={1}>
       {firstActionState && (
         <LayerProvider zOffset={200}>
           <Tooltip disabled={!tooltipContent} content={tooltipContent} placement="top">
diff --git a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
index f118a96343d..701fbb31b92 100644
--- a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
+++ b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
@@ -4,7 +4,7 @@ import {useTranslation} from '../../core'
 import {Button, ButtonProps} from '../button'
 
 interface ContextMenuButtonProps
-  extends Pick<ButtonProps, 'mode' | 'tone' | 'tooltipProps'>,
+  extends Pick<ButtonProps, 'mode' | 'size' | 'tone' | 'tooltipProps'>,
     Pick<HTMLProps<HTMLButtonElement>, 'disabled' | 'hidden' | 'onClick'> {}
 
 export const ContextMenuButton = forwardRef(function ContextMenuButton(

From 9e5f1866f28bdf24eb5bb9ee40a52c2e81258e0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:39:50 +0100
Subject: [PATCH 092/163] fix(ui): update document status components

---
 .../src/ui/documentStatus/DocumentStatus.tsx  |  2 +-
 .../DocumentStatusIndicator.tsx               | 64 ++++++++++++-------
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
index 5ec9f1a9d30..72214a962e2 100644
--- a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
+++ b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
@@ -44,7 +44,7 @@ export function DocumentStatus({absoluteDate, draft, published, singleLine}: Doc
     <Flex
       align={singleLine ? 'center' : 'flex-start'}
       direction={singleLine ? 'row' : 'column'}
-      gap={singleLine ? 2 : 3}
+      gap={2}
       wrap="nowrap"
     >
       {!publishedDate && (
diff --git a/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx b/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
index c5099118871..3cc26d7f759 100644
--- a/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
+++ b/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
@@ -1,6 +1,7 @@
+import {DotIcon} from '@sanity/icons'
 import {PreviewValue, SanityDocument} from '@sanity/types'
-import {Box, ButtonTone, Flex} from '@sanity/ui'
-import React from 'react'
+import {Text} from '@sanity/ui'
+import {useMemo} from 'react'
 import styled, {css} from 'styled-components'
 
 export interface DocumentStatusProps {
@@ -9,28 +10,27 @@ export interface DocumentStatusProps {
   published?: PreviewValue | Partial<SanityDocument> | null
 }
 
-const SIZE = 5 // px
-
-const Dot = styled(Box)<{$draft?: boolean; $hidePublishedStatus: boolean; $published: boolean}>(({
-  theme,
-  $draft,
-  $hidePublishedStatus,
-  $published,
-}) => {
-  let tone: ButtonTone = 'default'
-  if ($published) {
-    tone = $draft ? 'caution' : 'positive'
-  }
+const Root = styled(Text)<{
+  $draft: boolean
+  $hidePublishedStatus: boolean
+  $published: boolean
+}>((props) => {
+  const {$draft, $hidePublishedStatus, $published} = props
 
   return css`
-    background: ${$published
-      ? theme.sanity.v2?.color.selectable[tone].disabled.badge[tone].icon
-      : theme.sanity.v2?.color.selectable[tone].disabled.badge[tone].dot};
-    border-radius: ${SIZE}px;
     display: ${$hidePublishedStatus && $published && !$draft ? 'none' : 'block'};
-    height: ${SIZE}px;
     opacity: ${$hidePublishedStatus && $published && !$draft ? 0 : 1};
-    width: ${SIZE}px;
+
+    &[data-status='published'] {
+      --card-icon-color: var(--card-badge-positive-dot-color);
+    }
+    &[data-status='edited'] {
+      --card-icon-color: var(--card-badge-caution-dot-color);
+    }
+    &[data-status='unpublished'] {
+      --card-icon-color: var(--card-badge-default-dot-color);
+      opacity: 0.5 !important;
+    }
 
     [data-ui='PreviewCard']:hover & {
       opacity: 1;
@@ -49,13 +49,29 @@ export function DocumentStatusIndicator({
   hidePublishedStatus,
   published,
 }: DocumentStatusProps) {
-  if (!draft && !published) {
+  const $draft = !!draft
+  const $published = !!published
+  const $hidePublishedStatus = !!hidePublishedStatus
+
+  const status = useMemo(() => {
+    if (!$draft && $published) return 'published'
+    if ($draft && !$published) return 'unpublished'
+    return 'edited'
+  }, [$draft, $published])
+
+  if (!$draft && !$published) {
     return null
   }
 
   return (
-    <Flex align="center" height="fill" justify="center" style={{flexShrink: 0}}>
-      <Dot $draft={!!draft} $hidePublishedStatus={!!hidePublishedStatus} $published={!!published} />
-    </Flex>
+    <Root
+      $draft={$draft}
+      $hidePublishedStatus={$hidePublishedStatus}
+      $published={$published}
+      data-status={status}
+      size={1}
+    >
+      <DotIcon />
+    </Root>
   )
 }

From e2fab2a5f30518ee849b77ab3224ed303776a47f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:40:50 +0100
Subject: [PATCH 093/163] fix(desk): align comment feature feedback

---
 .../plugin/inspector/CommentsInspectorFeedbackFooter.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorFeedbackFooter.tsx b/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorFeedbackFooter.tsx
index 94a5d0b4473..cc56c55fae2 100644
--- a/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorFeedbackFooter.tsx
+++ b/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorFeedbackFooter.tsx
@@ -20,7 +20,7 @@ const FooterCard = styled(Card)({
 
 export function CommentsInspectorFeedbackFooter() {
   return (
-    <FooterCard padding={3}>
+    <FooterCard padding={4}>
       <Text muted size={1}>
         Help improve comments.{' '}
         <Link href={FEEDBACK_FORM_LINK} target="_blank" rel="noreferrer">

From 5fc023a1de3c02ac594851cfb8e29a24614dd6f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:41:47 +0100
Subject: [PATCH 094/163] fix(deps): update `@sanity/icons`

---
 dev/design-studio/package.json       | 2 +-
 dev/test-studio/package.json         | 2 +-
 packages/@sanity/vision/package.json | 2 +-
 packages/sanity/package.json         | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index 790dd8e5cd0..3d93dc39488 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -31,7 +31,7 @@
     "start": "../.bin/sanity start --port 4000"
   },
   "dependencies": {
-    "@sanity/icons": "^2.7.0",
+    "@sanity/icons": "^2.8.0",
     "@sanity/ui": "2.0.0-beta.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index 1b7078187b5..33b2f5244ca 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -25,7 +25,7 @@
     "@sanity/client": "^6.10.0",
     "@sanity/color": "3.0.0-beta.8",
     "@sanity/google-maps-input": "^3.0.1",
-    "@sanity/icons": "^2.7.0",
+    "@sanity/icons": "^2.8.0",
     "@sanity/image-url": "^1.0.2",
     "@sanity/locale-ko-kr": "^1.0.0",
     "@sanity/locale-nb-no": "^1.0.0",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index 3f98cd83818..8529cbdd97b 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -66,7 +66,7 @@
     "@rexxars/react-json-inspector": "^8.0.1",
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "3.0.0-beta.8",
-    "@sanity/icons": "^2.7.0",
+    "@sanity/icons": "^2.8.0",
     "@sanity/ui": "2.0.0-beta.3",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index 80c006f0bcd..e57390c711e 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -165,7 +165,7 @@
     "@sanity/eventsource": "^5.0.0",
     "@sanity/export": "3.22.1",
     "@sanity/generate-help-url": "^3.0.0",
-    "@sanity/icons": "^2.7.0",
+    "@sanity/icons": "^2.8.0",
     "@sanity/image-url": "^1.0.2",
     "@sanity/import": "3.22.1",
     "@sanity/logos": "^2.0.2",

From 936395d48b3de1bdd5dfd7c01fe28877cf1f0060 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 10:42:26 +0100
Subject: [PATCH 095/163] test(test-studio): update config

---
 .../components/documentViews/jsonPreview.tsx  | 10 +++++---
 .../components/panes/debug/DebugPane.tsx      | 24 +++++++++++--------
 dev/test-studio/package.json                  |  1 +
 dev/test-studio/sanity.config.ts              |  2 ++
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/dev/test-studio/components/documentViews/jsonPreview.tsx b/dev/test-studio/components/documentViews/jsonPreview.tsx
index 48497f0bbc3..5edc24dc6f3 100644
--- a/dev/test-studio/components/documentViews/jsonPreview.tsx
+++ b/dev/test-studio/components/documentViews/jsonPreview.tsx
@@ -1,10 +1,14 @@
-import {Card, Code} from '@sanity/ui'
+import {Box, Card, Code} from '@sanity/ui'
 import React from 'react'
 
 export function JSONPreviewDocumentView(props: any) {
   return (
-    <Card padding={4} sizing="border" style={{minHeight: '100%'}} tone="transparent">
-      <Code language="json">{JSON.stringify(props.document.displayed, null, 2)}</Code>
+    <Card overflow="auto" style={{minHeight: '100%'}} tone="transparent">
+      <Box padding={4}>
+        <Code language="json" size={1}>
+          {JSON.stringify(props.document.displayed, null, 2)}
+        </Code>
+      </Box>
     </Card>
   )
 }
diff --git a/dev/test-studio/components/panes/debug/DebugPane.tsx b/dev/test-studio/components/panes/debug/DebugPane.tsx
index f25884a3302..769e894a506 100644
--- a/dev/test-studio/components/panes/debug/DebugPane.tsx
+++ b/dev/test-studio/components/panes/debug/DebugPane.tsx
@@ -51,16 +51,16 @@ export const DebugPane: UserComponent = function DebugPane(props) {
 
   return (
     <Box height="fill">
-      <Card padding={3} tone="transparent">
-        <Stack space={2}>
-          <Text textOverflow="ellipsis">
+      <Box padding={4} paddingTop={0}>
+        <Stack space={3}>
+          <Text muted size={1} textOverflow="ellipsis">
             Random ID: <code>{randomId}</code>
           </Text>
           <Text textOverflow="ellipsis" size={1} muted>
             Assigned on pane component mount
           </Text>
         </Stack>
-      </Card>
+      </Box>
 
       <Card borderBottom padding={2}>
         <Stack space={1}>
@@ -74,15 +74,17 @@ export const DebugPane: UserComponent = function DebugPane(props) {
           >
             <Flex>
               <Box>
-                <Text>
+                <Text size={1}>
                   <LinkIcon />
                 </Text>
               </Box>
               <Box flex={1} marginLeft={3}>
-                <Text textOverflow="ellipsis">ChildLink</Text>
+                <Text size={1} textOverflow="ellipsis">
+                  ChildLink
+                </Text>
               </Box>
               <Box>
-                <Text>
+                <Text size={1}>
                   <ChevronRightIcon />
                 </Text>
               </Box>
@@ -98,15 +100,17 @@ export const DebugPane: UserComponent = function DebugPane(props) {
           >
             <Flex>
               <Box>
-                <Text>
+                <Text size={1}>
                   <ControlsIcon />
                 </Text>
               </Box>
               <Box flex={1} marginLeft={3}>
-                <Text textOverflow="ellipsis">ParameterizedLink</Text>
+                <Text size={1} textOverflow="ellipsis">
+                  ParameterizedLink
+                </Text>
               </Box>
               <Box>
-                <Text>
+                <Text size={1}>
                   <ChevronDownIcon />
                 </Text>
               </Box>
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index 33b2f5244ca..b1289d1b4bf 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -32,6 +32,7 @@
     "@sanity/locale-nn-no": "^1.0.0",
     "@sanity/locale-pt-pt": "^1.0.0",
     "@sanity/locale-sv-se": "^1.0.0",
+    "@sanity/logos": "^2.0.2",
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
diff --git a/dev/test-studio/sanity.config.ts b/dev/test-studio/sanity.config.ts
index 8c1db07b483..935e9e49b22 100644
--- a/dev/test-studio/sanity.config.ts
+++ b/dev/test-studio/sanity.config.ts
@@ -1,4 +1,5 @@
 import {BookIcon} from '@sanity/icons'
+import {SanityMonogram} from '@sanity/logos'
 import {visionTool} from '@sanity/vision'
 import {defineConfig, definePlugin} from 'sanity'
 import {deskTool} from 'sanity/desk'
@@ -144,6 +145,7 @@ export default defineConfig([
     dataset: 'test',
     plugins: [sharedSettings()],
     basePath: '/test',
+    icon: SanityMonogram,
   },
   {
     name: 'tsdoc',

From b31ff9db16b820eaf34d72dd86f7c613d81619ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 12:21:02 +0100
Subject: [PATCH 096/163] test(studio): update snapshot

---
 packages/sanity/src/core/studio/Studio.test.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/core/studio/Studio.test.tsx b/packages/sanity/src/core/studio/Studio.test.tsx
index 94d5a40d824..7f46d880322 100644
--- a/packages/sanity/src/core/studio/Studio.test.tsx
+++ b/packages/sanity/src/core/studio/Studio.test.tsx
@@ -45,7 +45,7 @@ describe('Studio', () => {
       const html = renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))
 
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-ddDelH izztwi\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-jbiuYu fJnfJf\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-jWETjw Oogqe\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-ddDelH dNjWse\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -62,7 +62,7 @@ describe('Studio', () => {
     try {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-ddDelH izztwi\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-jbiuYu fJnfJf\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-jWETjw Oogqe\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-ddDelH dNjWse\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -82,7 +82,7 @@ describe('Studio', () => {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       node.innerHTML = html
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-ddDelH izztwi\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-jbiuYu fJnfJf\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-jWETjw Oogqe\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-ddDelH dNjWse\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
       document.head.innerHTML += sheet.getStyleTags()
 

From 9916fac6bbef14f01cc3d7e8af08b153fcd44ffa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 16:28:24 +0100
Subject: [PATCH 097/163] fix(form): align elements

---
 .../CrossDatasetReferenceInput.tsx            |  2 +-
 .../form/inputs/ObjectInput/UnknownFields.tsx | 33 +++----
 .../PortableText/object/BlockObject.styles.ts |  2 +-
 .../object/BlockObjectActionsMenu.tsx         |  1 +
 .../inputs/ReferenceInput/CreateButton.tsx    |  2 +
 .../inputs/ReferenceInput/ReferenceField.tsx  |  6 +-
 .../inputs/ReferenceInput/ReferenceInput.tsx  | 16 ++--
 .../inputs/ReferenceInput/ReferenceItem.tsx   | 86 +++++++++----------
 .../ReferenceInput/ReferenceLinkCard.tsx      |  2 +-
 .../ArrayOfObjectsInput/Grid/ErrorItem.tsx    |  2 +-
 .../Grid/GridArrayInput.tsx                   |  6 +-
 .../ArrayOfObjectsInput/Grid/GridItem.tsx     |  4 +-
 .../ArrayOfObjectsInput/List/ErrorItem.tsx    |  2 +-
 .../List/ListArrayInput.tsx                   |  9 +-
 .../ArrayOfObjectsInput/List/PreviewItem.tsx  |  6 +-
 .../ArrayOfPrimitivesInput.tsx                |  2 +-
 .../arrays/ArrayOfPrimitivesInput/ItemRow.tsx |  4 +-
 .../NoItemsPlaceholder.tsx                    |  6 +-
 .../form/inputs/arrays/common/DragHandle.tsx  |  1 +
 .../common/uploadTarget/uploadTarget.tsx      |  6 +-
 .../form/inputs/arrays/layouts/CellLayout.tsx |  6 +-
 .../form/inputs/arrays/layouts/RowLayout.tsx  | 12 +--
 .../files/FileInput/FileActionsMenu.tsx       |  1 +
 23 files changed, 109 insertions(+), 108 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
index 4a3c9da6541..bea91ae6606 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
@@ -294,7 +294,7 @@ export function CrossDatasetReferenceInput(props: CrossDatasetReferenceInputProp
                       hit: hit,
                     }))}
                     onFocus={handleAutocompleteFocus}
-                    radius={1}
+                    radius={2}
                     placeholder={t('inputs.reference.search-placeholder')}
                     onKeyDown={handleAutocompleteKeyDown}
                     readOnly={readOnly}
diff --git a/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx b/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
index abab8e63a0f..6d736eac214 100644
--- a/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
+++ b/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
@@ -86,24 +86,27 @@ function UnknownField({
   const {t} = useTranslation()
 
   return (
-    <Card as="li" padding={3} radius={2} shadow={1} tone="caution">
-      <Stack space={2}>
-        <Card border radius={1}>
-          <Card borderBottom padding={3}>
-            <Code weight="medium">{fieldName}</Code>
-          </Card>
-          <Box overflow="auto" padding={3}>
-            <Code language="json">{JSON.stringify(value, null, 2)}</Code>
-          </Box>
-        </Card>
+    <Card as="li" overflow="hidden" radius={2} shadow={1} tone="caution">
+      <Card padding={3} shadow={1} tone="inherit">
+        <Code size={1}>{fieldName}</Code>
+      </Card>
+
+      <Box overflow="auto" padding={3}>
+        <Code language="json" size={1}>
+          {JSON.stringify(value, null, 2)}
+        </Code>
+      </Box>
 
-        {readOnly && (
+      {readOnly && (
+        <Box padding={3}>
           <Text as="p" muted size={1}>
             <Translate t={t} i18nKey="inputs.object.unknown-fields.read-only.description" />
           </Text>
-        )}
+        </Box>
+      )}
 
-        {!readOnly && (
+      {!readOnly && (
+        <Card padding={3} shadow={1} tone="inherit">
           <Button
             icon={TrashIcon}
             mode="ghost"
@@ -112,8 +115,8 @@ function UnknownField({
             tone="critical"
             text={t('inputs.object.unknown-fields.remove-field-button.text')}
           />
-        )}
-      </Stack>
+        </Card>
+      )}
     </Card>
   )
 }
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.styles.ts b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.styles.ts
index 0ed9d8046ae..a83e4de5f91 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.styles.ts
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.styles.ts
@@ -24,7 +24,7 @@ export const Root = styled(Card)((props: {theme: Theme}) => {
     position: relative;
 
     &[data-focused] {
-      box-shadow: 0 0 0 1px ${color.selectable?.primary.selected.border};
+      --card-border-color: var(--card-focus-ring-color);
     }
 
     &:not([data-focused]):not([data-selected]) {
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
index 12e482ae76c..af7dd24271f 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
@@ -96,6 +96,7 @@ export function BlockObjectActionsMenu(props: BlockObjectActionsMenuProps): Reac
               aria-label={t('inputs.portable-text.block.open-menu-aria-label')}
               icon={EllipsisHorizontalIcon}
               mode="bleed"
+              paddingY={3}
               tabIndex={focused ? 0 : 1}
               tooltipProps={{content: 'Open menu'}}
             />
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
index 754232798f9..1bf03d7a26c 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
@@ -69,6 +69,7 @@ export function CreateButton(props: Props) {
           text={t('inputs.reference.action.create-new-document-select')}
           mode="ghost"
           icon={AddIcon}
+          size="large"
         />
       }
       id={id}
@@ -111,6 +112,7 @@ export function CreateButton(props: Props) {
       // eslint-disable-next-line react/jsx-no-bind
       onClick={() => onCreate(createOptions[0])}
       icon={AddIcon}
+      size="large"
     />
   )
 }
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
index e7682dcd7f1..9b137bd5a6e 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
@@ -192,9 +192,9 @@ export function ReferenceField(props: ReferenceFieldProps) {
   const menu = useMemo(
     () =>
       readOnly ? null : (
-        <Box marginLeft={1}>
+        <Box flex="none">
           <MenuButton
-            button={<ContextMenuButton />}
+            button={<ContextMenuButton paddingY={3} />}
             id={`${inputId}-menuButton`}
             menu={
               <Menu>
@@ -263,7 +263,7 @@ export function ReferenceField(props: ReferenceFieldProps) {
           {isEditing ? (
             <Box>{children}</Box>
           ) : (
-            <Card border radius={1} padding={1} tone={tone}>
+            <Card border radius={2} padding={1} tone={tone}>
               <Stack space={1}>
                 <Flex gap={1} align="center" style={{lineHeight: 0}}>
                   <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx
index 4779634d767..ab73bd52841 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx
@@ -214,14 +214,12 @@ export function ReferenceInput(props: ReferenceInputProps) {
 
       return (
         <StyledPreviewCard forwardedAs="button" type="button" radius={2} tone="inherit">
-          <Box paddingX={3} paddingY={1}>
-            <OptionPreview
-              getReferenceInfo={getReferenceInfo}
-              id={documentId}
-              renderPreview={renderPreview}
-              type={schemaType}
-            />
-          </Box>
+          <OptionPreview
+            getReferenceInfo={getReferenceInfo}
+            id={documentId}
+            renderPreview={renderPreview}
+            type={schemaType}
+          />
         </StyledPreviewCard>
       )
     },
@@ -324,7 +322,7 @@ export function ReferenceInput(props: ReferenceInputProps) {
             loading={searchState.isLoading}
             referenceElement={autocompletePopoverReferenceElementRef.current}
             options={hits}
-            radius={1}
+            radius={2}
             placeholder={t('inputs.reference.search-placeholder')}
             onKeyDown={handleAutocompleteKeyDown}
             readOnly={loadableReferenceInfo.isLoading || readOnly}
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
index 25bc863d850..73734e6863c 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
@@ -181,52 +181,50 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
   const menu = useMemo(
     () =>
       readOnly ? null : (
-        <Box marginLeft={1}>
-          <MenuButton
-            button={<ContextMenuButton />}
-            id={`${inputId}-menuButton`}
-            menu={
-              <Menu ref={menuRef}>
-                {!readOnly && (
-                  <>
-                    <MenuItem
-                      text={t('inputs.reference.action.remove')}
-                      tone="critical"
-                      icon={TrashIcon}
-                      onClick={onRemove}
-                    />
-                    <MenuItem
-                      text={t(
-                        hasRef && isEditing
-                          ? 'inputs.reference.action.replace-cancel'
-                          : 'inputs.reference.action.replace',
-                      )}
-                      icon={hasRef && isEditing ? CloseIcon : ReplaceIcon}
-                      onClick={handleReplace}
-                    />
-                    <MenuItem
-                      text={t('inputs.reference.action.duplicate')}
-                      icon={DuplicateIcon}
-                      onClick={handleDuplicate}
-                    />
-                    <InsertMenu onInsert={handleInsert} types={insertableTypes} />
-                  </>
-                )}
-
-                {!readOnly && !isEditing && hasRef && <MenuDivider />}
-                {!isEditing && hasRef && (
+        <MenuButton
+          button={<ContextMenuButton paddingY={3} />}
+          id={`${inputId}-menuButton`}
+          menu={
+            <Menu ref={menuRef}>
+              {!readOnly && (
+                <>
                   <MenuItem
-                    as={OpenLink}
-                    data-as="a"
-                    text={t('inputs.reference.action.open-in-new-tab')}
-                    icon={OpenInNewTabIcon}
+                    text={t('inputs.reference.action.remove')}
+                    tone="critical"
+                    icon={TrashIcon}
+                    onClick={onRemove}
                   />
-                )}
-              </Menu>
-            }
-            popover={MENU_POPOVER_PROPS}
-          />
-        </Box>
+                  <MenuItem
+                    text={t(
+                      hasRef && isEditing
+                        ? 'inputs.reference.action.replace-cancel'
+                        : 'inputs.reference.action.replace',
+                    )}
+                    icon={hasRef && isEditing ? CloseIcon : ReplaceIcon}
+                    onClick={handleReplace}
+                  />
+                  <MenuItem
+                    text={t('inputs.reference.action.duplicate')}
+                    icon={DuplicateIcon}
+                    onClick={handleDuplicate}
+                  />
+                  <InsertMenu onInsert={handleInsert} types={insertableTypes} />
+                </>
+              )}
+
+              {!readOnly && !isEditing && hasRef && <MenuDivider />}
+              {!isEditing && hasRef && (
+                <MenuItem
+                  as={OpenLink}
+                  data-as="a"
+                  text={t('inputs.reference.action.open-in-new-tab')}
+                  icon={OpenInNewTabIcon}
+                />
+              )}
+            </Menu>
+          }
+          popover={MENU_POPOVER_PROPS}
+        />
       ),
     [
       handleDuplicate,
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx
index a28e3c590ec..f096b210a2c 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx
@@ -5,7 +5,7 @@ import {Card, CardProps} from '@sanity/ui'
 export const StyledCard = styled(Card)`
   /* this is a hack to avoid layout jumps while previews are loading
      there's probably better ways of solving this */
-  min-height: 35px;
+  min-height: 33px;
   position: relative;
 
   /* TextWithTone uses its own logic to set color, and we therefore need */
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
index 3b42e694a82..bc0ea92be16 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
@@ -29,7 +29,7 @@ export function ErrorItem(props: {member: ArrayItemError; sortable?: boolean}) {
       style={{height: '100%'}}
       menu={
         <MenuButton
-          button={<ContextMenuButton />}
+          button={<ContextMenuButton paddingY={3} />}
           id={`${id}-menuButton`}
           menu={
             <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridArrayInput.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridArrayInput.tsx
index b916aa8563b..a9c7006eea0 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridArrayInput.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridArrayInput.tsx
@@ -59,7 +59,7 @@ export function GridArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
   const memberKeys = useMemo(() => members.map((member) => member.key), [members])
 
   return (
-    <Stack space={3}>
+    <Stack space={2}>
       <UploadTargetCard
         types={schemaType.of}
         resolveUploader={resolveUploader}
@@ -67,9 +67,9 @@ export function GridArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
         {...elementProps}
         tabIndex={0}
       >
-        <Stack data-ui="ArrayInput__content" space={3}>
+        <Stack data-ui="ArrayInput__content" space={2}>
           {members?.length === 0 && (
-            <Card padding={3} border style={{borderStyle: 'dashed'}} radius={2}>
+            <Card padding={3} border radius={2}>
               <Text align="center" muted size={1}>
                 {schemaType.placeholder || <>{t('inputs.array.no-items-label')}</>}
               </Text>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
index 82366263be5..22515c206a2 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
@@ -125,7 +125,7 @@ export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemPr
   const childValidation = useChildValidation(path, true)
   const validation = useMemo(() => {
     return childValidation.length === 0 ? null : (
-      <Box marginLeft={1} paddingX={1} paddingY={3}>
+      <Box paddingX={1} paddingY={3}>
         <FormFieldValidationStatus validation={childValidation} __unstable_showSummary />
       </Box>
     )
@@ -138,7 +138,7 @@ export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemPr
     () =>
       readOnly ? null : (
         <MenuButton
-          button={<ContextMenuButton />}
+          button={<ContextMenuButton paddingY={3} />}
           id={`${props.inputId}-menuButton`}
           menu={
             <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
index 962f8aff857..93235810bd7 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
@@ -27,7 +27,7 @@ export function ErrorItem(props: {
         tone="caution"
         menu={
           <MenuButton
-            button={<ContextMenuButton />}
+            button={<ContextMenuButton paddingY={3} />}
             id={`${id}-menuButton`}
             menu={
               <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ListArrayInput.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ListArrayInput.tsx
index 47ba6bf7de5..3e96b4d93fb 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ListArrayInput.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ListArrayInput.tsx
@@ -187,7 +187,7 @@ export function ListArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
   const paddingY = 1
 
   return (
-    <Stack space={3} ref={parentRef}>
+    <Stack space={2} ref={parentRef}>
       <UploadTargetCard
         types={schemaType.of}
         resolveUploader={resolveUploader}
@@ -195,9 +195,9 @@ export function ListArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
         {...elementProps}
         tabIndex={0}
       >
-        <Stack data-ui="ArrayInput__content" space={3}>
+        <Stack data-ui="ArrayInput__content" space={2}>
           {members.length === 0 ? (
-            <Card padding={3} border style={{borderStyle: 'dashed'}} radius={2}>
+            <Card padding={3} border radius={2}>
               <Text align="center" muted size={1}>
                 {schemaType.placeholder || <>{t('inputs.array.no-items-label')}</>}
               </Text>
@@ -205,7 +205,7 @@ export function ListArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
           ) : (
             <Card
               border
-              radius={1}
+              radius={2}
               style={{
                 // This is not memoized since it changes on scroll so it will change anyways making memo useless
                 // Account for grid gap
@@ -271,7 +271,6 @@ export function ListArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
           )}
         </Stack>
       </UploadTargetCard>
-
       <ArrayFunctions
         onChange={onChange}
         onItemAppend={handleAppend}
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
index 967a6f9673e..0c79d3fee9c 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
@@ -108,7 +108,7 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
   const childValidation = useChildValidation(path, true)
   const validation = useMemo(() => {
     return childValidation.length === 0 ? null : (
-      <Box marginLeft={1} paddingX={1} paddingY={3}>
+      <Box paddingX={1} paddingY={3}>
         <FormFieldValidationStatus validation={childValidation} __unstable_showSummary />
       </Box>
     )
@@ -121,7 +121,7 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
     () =>
       readOnly ? null : (
         <MenuButton
-          button={<ContextMenuButton />}
+          button={<ContextMenuButton paddingY={3} />}
           id={`${props.inputId}-menuButton`}
           menu={
             <Menu>
@@ -160,7 +160,7 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
         as="button"
         type="button"
         tone="inherit"
-        radius={2}
+        radius={1}
         disabled={resolvingInitialValue}
         onClick={onOpen}
         ref={previewCardRef}
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx
index d3233ed2962..71ad2f62325 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx
@@ -170,7 +170,7 @@ export class ArrayOfPrimitivesInput extends React.PureComponent<
     }))
 
     return (
-      <Stack space={3} data-testid="array-primitives-input">
+      <Stack space={2} data-testid="array-primitives-input">
         <UploadTargetCard
           types={schemaType.of}
           resolveUploader={resolveUploader}
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
index a19af569f02..79e360d6b4a 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
@@ -66,7 +66,7 @@ export const ItemRow = React.forwardRef(function ItemRow(
 
   const menu = (
     <MenuButton
-      button={<ContextMenuButton />}
+      button={<ContextMenuButton paddingY={3} />}
       id={`${inputId}-menuButton`}
       popover={MENU_BUTTON_POPOVER_PROPS}
       menu={
@@ -96,7 +96,7 @@ export const ItemRow = React.forwardRef(function ItemRow(
       presence={presence.length === 0 ? null : <FieldPresence presence={presence} maxAvatars={1} />}
       validation={
         validation.length > 0 ? (
-          <Box marginLeft={1} paddingX={1} paddingY={3}>
+          <Box paddingX={1} paddingY={3}>
             <FormFieldValidationStatus validation={validation} />
           </Box>
         ) : null
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/NoItemsPlaceholder.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/NoItemsPlaceholder.tsx
index d5706a47012..2c801e7929f 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/NoItemsPlaceholder.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/NoItemsPlaceholder.tsx
@@ -1,9 +1,7 @@
 import type {ArraySchemaType} from '@sanity/types'
 import {Card, Text} from '@sanity/ui'
-import {useTranslation} from '../../../../i18n'
 import React from 'react'
-
-const CARD_STYLE = {borderStyle: 'dashed'} as const
+import {useTranslation} from '../../../../i18n'
 
 /**
  * Shows a placeholder for an empty array of primitives.
@@ -13,7 +11,7 @@ const CARD_STYLE = {borderStyle: 'dashed'} as const
 export function NoItemsPlaceholder({schemaType}: {schemaType: ArraySchemaType}) {
   const {t} = useTranslation()
   return (
-    <Card padding={3} border style={CARD_STYLE} radius={2}>
+    <Card padding={3} border radius={2}>
       <Text align="center" muted size={1}>
         {schemaType.placeholder || t('inputs.array.no-items-label')}
       </Text>
diff --git a/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx b/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
index f296f52189d..20dcc0f74c7 100644
--- a/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
@@ -15,6 +15,7 @@ interface DragHandleProps {
   grid?: boolean
   size?: ButtonProps['size']
   mode?: ButtonProps['mode']
+  paddingY?: ButtonProps['paddingY']
 }
 
 export const DragHandle = function DragHandle(props: DragHandleProps) {
diff --git a/packages/sanity/src/core/form/inputs/arrays/common/uploadTarget/uploadTarget.tsx b/packages/sanity/src/core/form/inputs/arrays/common/uploadTarget/uploadTarget.tsx
index 0abcfbd16c5..33bfc8445fb 100644
--- a/packages/sanity/src/core/form/inputs/arrays/common/uploadTarget/uploadTarget.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/common/uploadTarget/uploadTarget.tsx
@@ -79,11 +79,11 @@ export function uploadTarget<Props>(Component: React.ComponentType<Props>) {
               count: rejected.length,
             }),
             description: rejected.map((task, i) => (
-              <Flex key={i} padding={2}>
-                <Box marginLeft={1}>
+              <Flex key={i} gap={2} padding={2}>
+                <Box>
                   <Text weight="medium">{task.file.name}</Text>
                 </Box>
-                <Box paddingLeft={2}>
+                <Box>
                   <Text size={1}>({task.file.type})</Text>
                 </Box>
               </Flex>
diff --git a/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx b/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx
index ffabf36f5c2..34522e4b184 100644
--- a/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx
@@ -17,13 +17,13 @@ interface RowLayoutProps {
 }
 
 const FooterFlex = styled(Flex)`
-  min-height: 35px;
+  min-height: 33px;
 `
 const PresenceFlex = styled(Flex)`
   position: absolute;
   top: 0;
   right: 0;
-  height: 35px;
+  height: 33px;
 `
 
 const DragHandleCard = styled(Card)`
@@ -75,7 +75,7 @@ export function CellLayout(props: RowLayoutProps & ComponentProps<typeof Root>)
       border
       selected={selected}
       aria-selected={selected}
-      radius={2}
+      radius={1}
       tone={tone}
       {...rest}
     >
diff --git a/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx b/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx
index 4d027e31664..2f4b69016ed 100644
--- a/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx
@@ -56,20 +56,20 @@ export function RowLayout(props: RowLayoutProps) {
       ref={elementRef}
       selected={selected}
       aria-selected={selected}
-      radius={2}
+      radius={1}
       padding={1}
       tone={tone}
     >
       <Stack space={1}>
-        <Flex align="center">
-          {dragHandle && <DragHandle />}
+        <Flex align="center" gap={1}>
+          {dragHandle && <DragHandle paddingY={3} />}
 
           <Box flex={1}>{children}</Box>
 
           {(presence || validation || menu) && (
-            <Flex align="center" gap={2} marginLeft={1} style={{lineHeight: 0}}>
-              {presence && <Box marginLeft={1}>{presence}</Box>}
-              {validation && <Box marginLeft={1}>{validation}</Box>}
+            <Flex align="center" flex="none" gap={2} style={{lineHeight: 0}}>
+              {presence && <Box flex="none">{presence}</Box>}
+              {validation && <Box flex="none">{validation}</Box>}
               {menu}
             </Flex>
           )}
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
index 7f8de775014..0deea319ea7 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
@@ -139,6 +139,7 @@ export function FileActionsMenu(props: Props) {
               aria-label={t('inputs.file.actions-menu.file-options.aria-label')}
               data-testid="options-menu-button"
               onClick={handleClick}
+              paddingY={3}
               ref={setOptionsButtonRef}
             />
           </Popover>

From 606cfb444f6dc1294cd6ce96a6d60ebb7e7cafc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 16:28:45 +0100
Subject: [PATCH 098/163] fix(i18n): simplify copy

---
 packages/sanity/src/core/i18n/bundles/studio.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index f40f2bc3153..e226378dfa4 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -802,12 +802,12 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.portable-text.style.normal': 'Normal',
   /** Title of the "quote" block style */
   'inputs.portable-text.style.quote': 'Quote',
+  /** Label for action to create a new document from the reference input, when there are multiple templates or document types to choose from */
+  'inputs.reference.action-create-new-document-select': 'Create…',
   /** Label for action to clear the current value of the reference field */
   'inputs.reference.action.clear': 'Clear',
   /** Label for action to create a new document from the reference input */
-  'inputs.reference.action.create-new-document': 'Create new',
-  /** Label for action to create a new document from the reference input, when there are multiple templates or document types to choose from */
-  'inputs.reference.action.create-new-document-select': 'Create new…',
+  'inputs.reference.action.create-new-document': 'Create',
   /** Label for action to duplicate the current item to a new item (used within arrays) */
   'inputs.reference.action.duplicate': 'Duplicate',
   /** Label for action that opens the referenced document in a new tab */

From d2a0507c55cab0b3441d198fc2b2fd8354d84daf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 16:31:28 +0100
Subject: [PATCH 099/163] fix(desk): align id container

---
 .../confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
index 3161c6cf58d..f959bbc5158 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
@@ -46,7 +46,7 @@ export const Table = styled.table`
 `
 
 export const DocumentIdFlex = styled(Flex)`
-  min-height: 35px;
+  min-height: 33px;
 `
 
 export const OtherReferenceCount = (props: {totalCount: number; references: unknown[]}) => {

From f69a3e8bc25453be86ec96fb0ee771c4922eb8ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 16:32:46 +0100
Subject: [PATCH 100/163] fix(ui): include `paddingY` property

---
 packages/sanity/src/ui/button/Button.tsx            | 13 ++++++-------
 .../src/ui/contextMenuButton/ContextMenuButton.tsx  |  2 +-
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/sanity/src/ui/button/Button.tsx b/packages/sanity/src/ui/button/Button.tsx
index 898b7e0cf10..9e5a65cef53 100644
--- a/packages/sanity/src/ui/button/Button.tsx
+++ b/packages/sanity/src/ui/button/Button.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable no-restricted-imports */
+
 import {Button as UIButton, ButtonProps as UIButtonProps} from '@sanity/ui'
 import React, {forwardRef, useCallback} from 'react'
 import styled from 'styled-components'
@@ -13,6 +14,7 @@ type BaseButtonProps = Pick<
   | 'justify'
   | 'loading'
   | 'mode'
+  | 'paddingY'
   | 'selected'
   | 'tone'
   | 'type'
@@ -63,6 +65,7 @@ export const Button = forwardRef(function Button(
   {
     size = 'default',
     mode = 'default',
+    paddingY,
     tone = 'default',
     tooltipProps,
     ...rest
@@ -81,15 +84,11 @@ export const Button = forwardRef(function Button(
     [tooltipProps],
   )
 
+  const sizeProps = size === 'default' ? DEFAULT_BUTTON_PROPS : LARGE_BUTTON_PROPS
+
   return (
     <ConditionalWrapper condition={!!tooltipProps} wrapper={renderWrapper}>
-      <UIButton
-        {...rest}
-        {...(size === 'default' ? DEFAULT_BUTTON_PROPS : LARGE_BUTTON_PROPS)}
-        ref={ref}
-        mode={mode}
-        tone={tone}
-      />
+      <UIButton {...rest} {...sizeProps} paddingY={paddingY} ref={ref} mode={mode} tone={tone} />
     </ConditionalWrapper>
   )
 })
diff --git a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
index 701fbb31b92..b96acb91cb1 100644
--- a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
+++ b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
@@ -4,7 +4,7 @@ import {useTranslation} from '../../core'
 import {Button, ButtonProps} from '../button'
 
 interface ContextMenuButtonProps
-  extends Pick<ButtonProps, 'mode' | 'size' | 'tone' | 'tooltipProps'>,
+  extends Pick<ButtonProps, 'mode' | 'paddingY' | 'size' | 'tone' | 'tooltipProps'>,
     Pick<HTMLProps<HTMLButtonElement>, 'disabled' | 'hidden' | 'onClick'> {}
 
 export const ContextMenuButton = forwardRef(function ContextMenuButton(

From e56afcec147587663f8e1dfbde81503896da6bc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 16:33:05 +0100
Subject: [PATCH 101/163] fix(desk): simplify copy

---
 .../src/desk/structureBuilder/InitialValueTemplateItem.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/desk/structureBuilder/InitialValueTemplateItem.ts b/packages/sanity/src/desk/structureBuilder/InitialValueTemplateItem.ts
index 332ab67e04f..ddb2a30cea1 100644
--- a/packages/sanity/src/desk/structureBuilder/InitialValueTemplateItem.ts
+++ b/packages/sanity/src/desk/structureBuilder/InitialValueTemplateItem.ts
@@ -202,7 +202,7 @@ export function menuItemsFromInitialValueTemplateItems(
   const {schema, templates} = context
   return templateItems.map((item) => {
     const template = templates.find((t) => t.id === item.templateId)
-    const title = item.title || template?.title || 'Create new'
+    const title = item.title || template?.title || 'Create'
 
     const params: BaseIntentParams = {}
     if (template && template.schemaType) {

From 0bd6326ebfe4f7c43f2fab41726db752887f66ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 16:49:30 +0100
Subject: [PATCH 102/163] fix(ui): align document status

---
 packages/sanity/src/ui/documentStatus/DocumentStatus.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
index 72214a962e2..409e1482f77 100644
--- a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
+++ b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
@@ -44,7 +44,7 @@ export function DocumentStatus({absoluteDate, draft, published, singleLine}: Doc
     <Flex
       align={singleLine ? 'center' : 'flex-start'}
       direction={singleLine ? 'row' : 'column'}
-      gap={2}
+      gap={singleLine ? 1 : 2}
       wrap="nowrap"
     >
       {!publishedDate && (

From f343b5ebd1bb1b039913fe7e61437bc57317cc06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 16:49:55 +0100
Subject: [PATCH 103/163] fix(studio): simplify `TextWithTone` component

---
 .../components/textWithTone/TextWithTone.tsx  | 36 ++++++++++++-------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/sanity/src/core/components/textWithTone/TextWithTone.tsx b/packages/sanity/src/core/components/textWithTone/TextWithTone.tsx
index 79d5bbc9d86..3db6fb9611a 100644
--- a/packages/sanity/src/core/components/textWithTone/TextWithTone.tsx
+++ b/packages/sanity/src/core/components/textWithTone/TextWithTone.tsx
@@ -1,4 +1,4 @@
-import styled, {css} from 'styled-components'
+import styled from 'styled-components'
 import {ButtonTone, Text} from '@sanity/ui'
 import React, {ComponentProps} from 'react'
 
@@ -9,19 +9,29 @@ export interface TextWithToneProps extends ComponentProps<typeof Text> {
 }
 
 /** @internal */
-const TextWithToneStyle = styled(Text)<{$tone: ButtonTone}>(({$tone, theme}) => {
-  const tone = theme.sanity.color.muted[$tone]
-
-  return css`
-    &:not([data-muted]) {
-      --card-fg-color: ${tone ? tone.enabled.fg : undefined};
+const TextWithToneStyle = styled(Text)`
+  &:not([data-muted]) {
+    &[data-tone='default'] {
+      --card-fg-color: var(--card-badge-default-fg-color);
     }
-
-    &[data-dimmed] {
-      opacity: 0.3;
+    &[data-tone='primary'] {
+      --card-fg-color: var(--card-badge-primary-fg-color);
     }
-  `
-})
+    &[data-tone='positive'] {
+      --card-fg-color: var(--card-badge-positive-fg-color);
+    }
+    &[data-tone='caution'] {
+      --card-fg-color: var(--card-badge-caution-fg-color);
+    }
+    &[data-tone='critical'] {
+      --card-fg-color: var(--card-badge-critical-fg-color);
+    }
+  }
+
+  &[data-dimmed] {
+    opacity: 0.3;
+  }
+`
 
 /** @internal */
 export const TextWithTone = React.forwardRef(function TextWithTone(
@@ -35,7 +45,7 @@ export const TextWithTone = React.forwardRef(function TextWithTone(
       data-ui="TextWithTone"
       data-dimmed={dimmed ? '' : undefined}
       data-muted={muted ? '' : undefined}
-      $tone={tone}
+      data-tone={tone}
       muted={muted}
       ref={ref}
       {...rest}

From 6c4b92857dc7d8c953a94166c10cf1ad3c871e71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 16:50:11 +0100
Subject: [PATCH 104/163] fix(desk): align document status bar

---
 .../document/statusBar/DocumentStatusBar.tsx  |  2 +-
 .../statusBar/sparkline/DocumentSparkline.tsx | 52 ++++++++-----------
 .../AnimatedStatusIcon.tsx                    |  2 +-
 .../DocumentStatusPulse.tsx                   | 15 +++---
 4 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
index b8744c27d02..ff1f67f1134 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
@@ -19,7 +19,7 @@ export function DocumentStatusBar(props: DocumentStatusBarProps) {
 
   return useMemo(
     () => (
-      <Flex align="center" gap={1} justify="space-between" padding={2} paddingLeft={3}>
+      <Flex align="center" gap={1} justify="space-between" padding={2}>
         <DocumentSparkline />
 
         <Flex justify="flex-end" ref={actionsBoxRef} style={{flexShrink: 0, marginLeft: 'auto'}}>
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
index 82b3192cafa..fd9d881d13e 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
@@ -51,38 +51,30 @@ export const DocumentSparkline = memo(function DocumentSparkline() {
   }
 
   return (
-    <Flex align="center" data-ui="DocumentSparkline">
-      <Flex align="center" flex={1} gap={3} paddingY={1} wrap="wrap">
-        {!status && (
-          <Tooltip
-            content={
-              <DocumentStatus
-                absoluteDate
-                draft={editState?.draft}
-                published={editState?.published}
-              />
-            }
-            placement="top"
-          >
-            <Flex align="center" gap={2} paddingY={1}>
-              <Flex align="center" justify="center" style={{width: '1em'}}>
-                <DocumentStatusIndicator
-                  draft={editState?.draft}
-                  published={editState?.published}
-                />
-              </Flex>
-              <DocumentStatus
-                draft={editState?.draft}
-                published={editState?.published}
-                singleLine
-              />
+    <Flex align="center" data-ui="DocumentSparkline" flex={1} gap={3} padding={2} wrap="wrap">
+      {!status && (
+        <Tooltip
+          content={
+            <DocumentStatus
+              absoluteDate
+              draft={editState?.draft}
+              published={editState?.published}
+            />
+          }
+          placement="top"
+        >
+          <Flex align="center" gap={2}>
+            <Flex align="center" justify="center">
+              <DocumentStatusIndicator draft={editState?.draft} published={editState?.published} />
             </Flex>
-          </Tooltip>
-        )}
+            <DocumentStatus draft={editState?.draft} published={editState?.published} singleLine />
+          </Flex>
+        </Tooltip>
+      )}
 
-        <DocumentStatusPulse status={status || undefined} />
-        {badges && <DocumentBadges />}
-      </Flex>
+      <DocumentStatusPulse status={status || undefined} />
+
+      {badges && <DocumentBadges />}
     </Flex>
   )
 })
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/AnimatedStatusIcon.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/AnimatedStatusIcon.tsx
index a1b363f4708..cd4d575292c 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/AnimatedStatusIcon.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/AnimatedStatusIcon.tsx
@@ -140,7 +140,7 @@ export function AnimatedStatusIcon(props: AnimatedStatusIconProps) {
       fill="none"
       stroke="currentColor"
       strokeWidth="1.2"
-      data-sanity-icon=""
+      data-sanity-icon="animated-status-icon"
     >
       <motion.g variants={root} initial={status} animate={status}>
         <RotateGroup data-rotate={status === 'changes' ? undefined : ''}>
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx
index 7b925ac61c7..c8b6e7c8a4c 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx
@@ -1,4 +1,4 @@
-import {ButtonTone, Flex} from '@sanity/ui'
+import {ButtonTone, Flex, Text} from '@sanity/ui'
 import React from 'react'
 import {AnimatedStatusIcon} from './AnimatedStatusIcon'
 import {TextWithTone} from 'sanity'
@@ -10,7 +10,7 @@ interface ReviewChangesButtonProps {
 
 const STATUS_DICTIONARY: Record<StatusType, {text: string; tone: ButtonTone}> = {
   saved: {
-    text: 'Saved!',
+    text: 'Saved',
     tone: 'positive',
   },
   syncing: {
@@ -30,14 +30,13 @@ export const DocumentStatusPulse = (props: ReviewChangesButtonProps) => {
 
   return (
     <Flex align="center" gap={2}>
-      <Flex align="center" justify="center" style={{width: '1em'}}>
-        <TextWithTone size={1} tone={currentStatus.tone}>
-          <AnimatedStatusIcon status={status} />
-        </TextWithTone>
-      </Flex>
       <TextWithTone size={1} tone={currentStatus.tone}>
-        {currentStatus.text}
+        <AnimatedStatusIcon status={status} />
       </TextWithTone>
+
+      <Text muted size={1}>
+        {currentStatus.text}
+      </Text>
     </Flex>
   )
 }

From a49759ea183d08e21a5dd33ade3535b8f97fab44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 17:17:56 +0100
Subject: [PATCH 105/163] fix(studio): update scrollbar style

---
 packages/sanity/src/core/studio/GlobalStyle.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/sanity/src/core/studio/GlobalStyle.tsx b/packages/sanity/src/core/studio/GlobalStyle.tsx
index 182b4df1828..228028a8485 100644
--- a/packages/sanity/src/core/studio/GlobalStyle.tsx
+++ b/packages/sanity/src/core/studio/GlobalStyle.tsx
@@ -3,7 +3,7 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {createGlobalStyle, css} from 'styled-components'
 
-const SCROLLBAR_SIZE = 14 // px
+const SCROLLBAR_SIZE = 8 // px
 const SCROLLBAR_BORDER_SIZE = 4 // px
 
 export const GlobalStyle = createGlobalStyle((props) => {
@@ -17,23 +17,26 @@ export const GlobalStyle = createGlobalStyle((props) => {
 
     ::-webkit-scrollbar-thumb {
       background-clip: content-box;
-      background-color: ${color.bg};
-      border-radius: ${SCROLLBAR_SIZE}px;
-      border: ${SCROLLBAR_BORDER_SIZE}px solid transparent;
+      background-color: var(--card-border-color, ${color.border});
+      border-right: ${SCROLLBAR_BORDER_SIZE}px solid transparent;
     }
 
     ::-webkit-scrollbar-thumb:hover {
-      background-color: ${color.muted.fg};
+      background-color: var(--card-muted-fg-color, ${color.muted.fg});
     }
 
     ::-webkit-scrollbar-track {
-      background: transparent;
+      background: var(--card-bg-color, transparent);
     }
 
     html {
       background-color: ${color.bg};
     }
 
+    body {
+      scrollbar-gutter: stable;
+    }
+
     #sanity {
       font-family: ${font.text.family};
     }

From 2fce521e016df4c2b91882582f467038624152ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Wed, 13 Dec 2023 17:26:23 +0100
Subject: [PATCH 106/163] fixup! fix(studio): update scrollbar style

---
 packages/sanity/src/core/studio/GlobalStyle.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sanity/src/core/studio/GlobalStyle.tsx b/packages/sanity/src/core/studio/GlobalStyle.tsx
index 228028a8485..500fe7d632c 100644
--- a/packages/sanity/src/core/studio/GlobalStyle.tsx
+++ b/packages/sanity/src/core/studio/GlobalStyle.tsx
@@ -3,7 +3,7 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {createGlobalStyle, css} from 'styled-components'
 
-const SCROLLBAR_SIZE = 8 // px
+const SCROLLBAR_SIZE = 12 // px
 const SCROLLBAR_BORDER_SIZE = 4 // px
 
 export const GlobalStyle = createGlobalStyle((props) => {
@@ -18,7 +18,7 @@ export const GlobalStyle = createGlobalStyle((props) => {
     ::-webkit-scrollbar-thumb {
       background-clip: content-box;
       background-color: var(--card-border-color, ${color.border});
-      border-right: ${SCROLLBAR_BORDER_SIZE}px solid transparent;
+      border: ${SCROLLBAR_BORDER_SIZE}px solid transparent;
     }
 
     ::-webkit-scrollbar-thumb:hover {

From 19a9b22f4f0f4a22f09e5b8bb24a2f762e7e7b41 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 13 Dec 2023 16:38:22 +0000
Subject: [PATCH 107/163] fix(deps): update `@sanity/ui`

---
 dev/design-studio/package.json                     | 2 +-
 dev/embedded-studio/package.json                   | 2 +-
 dev/studio-e2e-testing/package.json                | 2 +-
 dev/test-studio/package.json                       | 2 +-
 examples/ecommerce-studio/package.json             | 2 +-
 packages/@sanity/portable-text-editor/package.json | 2 +-
 packages/@sanity/vision/package.json               | 2 +-
 packages/sanity/package.json                       | 2 +-
 yarn.lock                                          | 8 ++++----
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index 3d93dc39488..18d576b466b 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.3",
+    "@sanity/ui": "2.0.0-beta.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/embedded-studio/package.json b/dev/embedded-studio/package.json
index f8f9d057ed0..218c99b19ba 100644
--- a/dev/embedded-studio/package.json
+++ b/dev/embedded-studio/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "2.0.0-beta.3",
+    "@sanity/ui": "2.0.0-beta.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/studio-e2e-testing/package.json b/dev/studio-e2e-testing/package.json
index b9d546acc43..f4ca6d20bb0 100644
--- a/dev/studio-e2e-testing/package.json
+++ b/dev/studio-e2e-testing/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@sanity/google-maps-input": "^3.0.1",
     "@sanity/icons": "^2.4.0",
-    "@sanity/ui": "2.0.0-beta.3",
+    "@sanity/ui": "2.0.0-beta.5",
     "@sanity/vision": "3.22.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index b1289d1b4bf..e3dc06e8ead 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -36,7 +36,7 @@
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.3",
+    "@sanity/ui": "2.0.0-beta.5",
     "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
diff --git a/examples/ecommerce-studio/package.json b/examples/ecommerce-studio/package.json
index 5e141c9cd9b..8b2b8ff631e 100644
--- a/examples/ecommerce-studio/package.json
+++ b/examples/ecommerce-studio/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.3",
+    "@sanity/ui": "2.0.0-beta.5",
     "react": "^18.2.0",
     "react-barcode": "^1.4.1",
     "react-dom": "^18.2.0",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index de735b3bbed..c51b2ecca32 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "2.0.0-beta.3",
+    "@sanity/ui": "2.0.0-beta.5",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index 8529cbdd97b..faa10e59edb 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -67,7 +67,7 @@
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "3.0.0-beta.8",
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.3",
+    "@sanity/ui": "2.0.0-beta.5",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index e57390c711e..90ff3d43d60 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -175,7 +175,7 @@
     "@sanity/schema": "3.22.1",
     "@sanity/telemetry": "^0.7.3",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.3",
+    "@sanity/ui": "2.0.0-beta.5",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
diff --git a/yarn.lock b/yarn.lock
index 5d1241ec246..e0b90633e71 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3876,10 +3876,10 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@2.0.0-beta.3":
-  version "2.0.0-beta.3"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.3.tgz#a1d761595e3a639e7e1df8e196355b04428c5be7"
-  integrity sha512-XQoWwb8uSLIr6zkwO3MeS0l6tpGMx4CWrfqerhDJgQgVZqXJBrKAh9kpkX87/A6ngjNcALRuMYgTPRmRhso26g==
+"@sanity/ui@2.0.0-beta.5":
+  version "2.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.5.tgz#c4b11d76a1ff230516ed1a3dd9d9f2421cd8007f"
+  integrity sha512-PrhjUpexxRT8kbb3Ct/YQEalOPRKXEEvfTP2PQ9TDa1XxK4GbJEEhvsSBqBR1lV8hXuJATWuUNNxZZBpHBpSXg==
   dependencies:
     "@floating-ui/react-dom" "^2.0.4"
     "@sanity/color" "3.0.0-beta.8"

From cf03f7ca746b799238ec931c63e8527b1c4bbd56 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 13 Dec 2023 12:44:12 +0000
Subject: [PATCH 108/163] fix: update global search date picker styles, remove
 unused LazyTextInput component

---
 .../inputs/date/datePicker/DatePicker.tsx     |  6 --
 .../inputs/date/datePicker/LazyTextInput.tsx  | 77 -------------------
 .../date/datePicker/calendar/Calendar.tsx     |  4 +-
 .../date/datePicker/calendar/CalendarDay.tsx  | 15 ++--
 .../datePicker/calendar/CalendarHeader.tsx    | 10 ++-
 .../datePicker/calendar/CalendarMonth.tsx     |  6 +-
 .../calendar/contexts/CalendarContext.ts      |  1 -
 7 files changed, 15 insertions(+), 104 deletions(-)
 delete mode 100644 packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/LazyTextInput.tsx

diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/DatePicker.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/DatePicker.tsx
index c2e7bc48006..674a0570b01 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/DatePicker.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/DatePicker.tsx
@@ -1,5 +1,4 @@
 import React, {useCallback} from 'react'
-import {useSearchState} from '../../../../../../contexts/search/useSearchState'
 import {Calendar} from './calendar/Calendar'
 
 interface DatePickerProps {
@@ -11,10 +10,6 @@ interface DatePickerProps {
 }
 
 export function DatePicker({date, endDate, onChange, selectRange, selectTime}: DatePickerProps) {
-  const {
-    state: {fullscreen},
-  } = useSearchState()
-
   const handleSelect = useCallback(
     (dates: {date: Date | null; endDate?: Date | null}) => {
       onChange(dates)
@@ -26,7 +21,6 @@ export function DatePicker({date, endDate, onChange, selectRange, selectTime}: D
     <Calendar
       date={date}
       endDate={endDate}
-      fontSize={fullscreen ? 2 : 1}
       onSelect={handleSelect}
       selectRange={selectRange}
       selectTime={selectTime}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/LazyTextInput.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/LazyTextInput.tsx
deleted file mode 100644
index 1ef64f330d0..00000000000
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/LazyTextInput.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react'
-import {TextInput} from '@sanity/ui'
-import {useCalendar} from './calendar/contexts/useDatePicker'
-
-type TextInputProps = React.ComponentProps<typeof TextInput>
-
-type Props = Omit<TextInputProps, 'onChange'> & {
-  onChange?: (
-    event: React.FocusEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>,
-  ) => void
-}
-
-/**
- * A TextInput that only emit onChange when it has to
- * By default it will only emit onChange when: 1) user hits enter or 2) user leaves the
- * field (e.g. onBlur) and the input value at this time is different from the given `value` prop
- */
-export const LazyTextInput = React.forwardRef(function LazyTextInput(
-  {onChange, onBlur, onKeyPress, value, ...rest}: Props,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
-) {
-  const [inputValue, setInputValue] = React.useState<string>()
-
-  const {fontSize} = useCalendar()
-
-  const handleChange = React.useCallback((event: any) => {
-    setInputValue(event.currentTarget.value)
-  }, [])
-
-  const checkEvent = React.useCallback(
-    (event: any) => {
-      const currentValue = event.currentTarget.value
-      if (currentValue !== `${value}`) {
-        if (onChange) {
-          onChange(event)
-        }
-      }
-      setInputValue(undefined)
-    },
-    [onChange, value],
-  )
-
-  const handleBlur = React.useCallback(
-    (e: any) => {
-      checkEvent(e)
-      if (onBlur) {
-        onBlur(e)
-      }
-    },
-    [checkEvent, onBlur],
-  )
-
-  const handleKeyPress = React.useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') {
-        checkEvent(e)
-      }
-      if (onKeyPress) {
-        onKeyPress(e)
-      }
-    },
-    [checkEvent, onKeyPress],
-  )
-
-  return (
-    <TextInput
-      {...rest}
-      data-testid="date-input"
-      fontSize={fontSize}
-      ref={forwardedRef}
-      value={inputValue === undefined ? value : inputValue}
-      onChange={handleChange}
-      onBlur={handleBlur}
-      onKeyPress={handleKeyPress}
-    />
-  )
-})
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/Calendar.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/Calendar.tsx
index 81d2f9971aa..e79f6fcc6b1 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/Calendar.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/Calendar.tsx
@@ -10,7 +10,6 @@ import {ARROW_KEYS} from './constants'
 type CalendarProps = Omit<React.ComponentProps<'div'>, 'onSelect'> & {
   date?: Date
   endDate?: Date
-  fontSize: number
   onSelect: ({date, endDate}: {date: Date | null; endDate?: Date | null}) => void
   selectRange?: boolean
   selectTime?: boolean
@@ -32,7 +31,7 @@ const PRESERVE_FOCUS_ELEMENT = (
 )
 
 export function Calendar(props: CalendarProps) {
-  const {date, endDate, fontSize, onSelect, selectRange, selectTime} = props
+  const {date, endDate, onSelect, selectRange, selectTime} = props
 
   const [calendarElement, setCalendarElement] = useState<HTMLElement | null>(null)
   const [selectEndValue, setSelectEndValue] = useState(false)
@@ -184,7 +183,6 @@ export function Calendar(props: CalendarProps) {
         date,
         endDate,
         focusedDate,
-        fontSize,
         selectRange,
         selectTime,
         firstWeekDay,
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarDay.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarDay.tsx
index c28309fec19..c9d65ce63f8 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarDay.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarDay.tsx
@@ -52,13 +52,7 @@ export function CalendarDay({date, onSelect}: CalendarDayProps) {
     onSelect(date)
   }, [date, onSelect])
 
-  const {
-    date: selectedDate,
-    endDate: selectedEndDate,
-    focusedDate,
-    fontSize,
-    selectRange,
-  } = useCalendar()
+  const {date: selectedDate, endDate: selectedEndDate, focusedDate, selectRange} = useCalendar()
 
   const isSelected = selectedDate && isSameDay(date, selectedDate)
   const isStartDate = selectRange && selectedDate && isSameDay(date, selectedDate)
@@ -89,7 +83,8 @@ export function CalendarDay({date, onSelect}: CalendarDayProps) {
       data-within-range={isWithinRange ? true : undefined}
       forwardedAs="button"
       onClick={handleClick}
-      padding={3}
+      paddingX={3}
+      paddingY={2}
       radius={2}
       role="button"
       selected={isSelected || isStartDate || isEndDate}
@@ -110,8 +105,8 @@ export function CalendarDay({date, onSelect}: CalendarDayProps) {
       <Text
         align="center"
         muted={!isSelected && !isCurrentMonth}
-        size={fontSize}
-        weight={isToday ? 'medium' : 'regular'}
+        size={1}
+        weight={isCurrentMonth ? 'medium' : 'regular'}
       >
         {date.getDate()}
       </Text>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx
index 9670cba238f..1dd4ce1c5bf 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx
@@ -1,6 +1,6 @@
 import {upperFirst} from 'lodash'
 import {ChevronLeftIcon, ChevronRightIcon} from '@sanity/icons'
-import {Box, Flex, Inline, Text} from '@sanity/ui'
+import {Flex, Inline, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {Button} from '../../../../../../../../../../../../ui'
 import {useTranslation} from '../../../../../../../../../../../i18n'
@@ -25,9 +25,11 @@ export function CalendarHeader(props: {
     <Flex align="center" flex={1} justify="space-between">
       <Inline paddingLeft={2} space={1}>
         {/* Technically not correct to simply uppercase first here, but simplifying for now */}
-        <Text weight="medium">{upperFirst(monthFormatter.format(focusedDate))}</Text>
+        <Text size={1} weight="medium">
+          {upperFirst(monthFormatter.format(focusedDate))}
+        </Text>
       </Inline>
-      <Box>
+      <Flex align="center">
         <Button
           aria-label={t('calendar.action.go-to-today-aria-label')}
           mode="bleed"
@@ -46,7 +48,7 @@ export function CalendarHeader(props: {
           onClick={handleNextMonthClick}
           tooltipProps={{content: t('calendar.action.go-to-next-month')}}
         />
-      </Box>
+      </Flex>
     </Flex>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarMonth.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarMonth.tsx
index 34301ad4f16..f1364c2cb5e 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarMonth.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarMonth.tsx
@@ -25,15 +25,15 @@ const CustomGrid = styled(Grid)`
 `
 
 export function CalendarMonth({hidden, onSelect}: CalendarMonthProps) {
-  const {focusedDate, fontSize, firstWeekDay} = useCalendar()
+  const {focusedDate, firstWeekDay} = useCalendar()
   const {t} = useTranslation()
 
   return (
     <Box aria-hidden={hidden || false} data-ui="CalendarMonth">
-      <CustomGrid>
+      <CustomGrid gapY={1}>
         {WEEK_DAY_NAME_KEYS[firstWeekDay].map((weekdayDay) => (
           <Box key={weekdayDay} paddingBottom={3} paddingTop={2}>
-            <Text align="center" size={fontSize} weight="medium">
+            <Text align="center" size={1} weight="medium">
               {t(weekdayDay)}
             </Text>
           </Box>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/contexts/CalendarContext.ts b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/contexts/CalendarContext.ts
index cc12173baf7..ba8a02ab403 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/contexts/CalendarContext.ts
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/contexts/CalendarContext.ts
@@ -4,7 +4,6 @@ export interface CalendarContextValue {
   date?: Date
   endDate?: Date
   focusedDate: Date
-  fontSize: number
   selectRange?: boolean
   selectTime?: boolean
 

From 73a628e9ae046648e06645967373387fa0a6e63c Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 13 Dec 2023 12:50:48 +0000
Subject: [PATCH 109/163] fix: use correct tooltip styling for search datetime
 errors, simplify + remove Translate usage

---
 .../sanity/src/core/i18n/bundles/studio.ts    |  2 +-
 .../inputs/date/ParsedDateTextInput.tsx       | 24 ++++---------------
 2 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index e226378dfa4..e39cd4aa490 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -137,7 +137,7 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /** Label for selecting an hour preset. Receives a `time` param as a string on hh:mm format and a `date` param as a Date instance denoting the preset date */
   'calendar.action.set-to-time-preset': '{{time}} on {{date, datetime}}',
   /** Error message displayed in calendar when entered date is not the correct format */
-  'calendar.error.must-be-in-format': 'Must be in the format <Emphasis>{{exampleDate}}</Emphasis>',
+  'calendar.error.must-be-in-format': 'Must be in the format: {{exampleDate}}',
   /** Month name for April */
   'calendar.month-names.april': 'April',
   /** Month name for August */
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
index 4cddb7f67b1..7e9dd17676f 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
@@ -1,4 +1,3 @@
-import {Theme} from '@sanity/ui'
 import {format, isValid, parse} from 'date-fns'
 import React, {
   ChangeEvent,
@@ -9,9 +8,8 @@ import React, {
   useMemo,
   useState,
 } from 'react'
-import styled, {css} from 'styled-components'
 import {Tooltip} from '../../../../../../../../../../ui'
-import {Translate, useTranslation} from '../../../../../../../../../i18n'
+import {useTranslation} from '../../../../../../../../../i18n'
 import {CustomTextInput} from '../../../../common/CustomTextInput'
 import {getDateISOString} from './utils/getDateISOString'
 
@@ -50,13 +48,6 @@ const FORMAT: Record<
   },
 }
 
-// @todo: remove usage
-const Emphasis = styled.span(({theme}: {theme: Theme}) => {
-  return css`
-    font-weight: ${theme.sanity.fonts.text.weights.medium};
-  `
-})
-
 export function ParsedDateTextInput({
   isDateTime,
   onChange,
@@ -157,16 +148,9 @@ export function ParsedDateTextInput({
 
   return (
     <Tooltip
-      content={
-        <Translate
-          t={t}
-          i18nKey="calendar.error.must-be-in-format"
-          components={{Emphasis}}
-          values={{
-            exampleDate: isDateTimeFormat ? FORMAT.datetime.exampleDate : FORMAT.date.exampleDate,
-          }}
-        />
-      }
+      content={t('calendar.error.must-be-in-format', {
+        exampleDate: isDateTimeFormat ? FORMAT.datetime.exampleDate : FORMAT.date.exampleDate,
+      })}
       disabled={!customValidity}
       placement="top"
       portal

From 7c98fef20973b8ccb3f2cb2550305bd4d0082bd5 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 13 Dec 2023 14:15:11 +0000
Subject: [PATCH 110/163] fix: expose document status indicator and tooltip in
 global search results

---
 .../item/SearchResultItemPreview.tsx             | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
index 828f9aac4e9..8a32f558461 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
@@ -1,9 +1,11 @@
 import type {SanityDocument} from '@sanity/client'
 import type {SchemaType} from '@sanity/types'
-import {Badge, Box, Inline} from '@sanity/ui'
+import {Badge, Box, Flex} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import {useMemoObservable} from 'react-rx'
 import styled from 'styled-components'
+import {DocumentStatus} from '../../../../../../../../ui/documentStatus'
+import {DocumentStatusIndicator} from '../../../../../../../../ui/documentStatusIndicator'
 import {DocumentPreviewPresence} from '../../../../../../../presence'
 import {
   getPreviewStateObservable,
@@ -57,12 +59,15 @@ export default function SearchResultItemPreview({
   const status = useMemo(() => {
     if (isLoading) return null
     return (
-      <Inline space={3}>
+      <Flex align="center" gap={3}>
         {presence && presence.length > 0 && <DocumentPreviewPresence presence={presence} />}
-        <Badge mode="outline">{schemaType.title}</Badge>
-      </Inline>
+        <Badge>{schemaType.title}</Badge>
+        <DocumentStatusIndicator draft={draft} hidePublishedStatus published={published} />
+      </Flex>
     )
-  }, [isLoading, presence, schemaType.title])
+  }, [draft, isLoading, presence, published, schemaType.title])
+
+  const tooltip = <DocumentStatus draft={draft} published={published} />
 
   return (
     <SearchResultItemPreviewBox>
@@ -76,6 +81,7 @@ export default function SearchResultItemPreview({
         layout={layout || 'default'}
         icon={schemaType.icon}
         status={status}
+        tooltip={tooltip}
       />
     </SearchResultItemPreviewBox>
   )

From 717612a4db75da0bf0b3c3b4b9af2c17fe21323b Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 13 Dec 2023 15:44:38 +0000
Subject: [PATCH 111/163] fix: update global search result item padding

---
 .../search/components/searchResults/SearchResults.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx
index 265eb6af11f..8bc68f4d29e 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx
@@ -12,7 +12,7 @@ import {useTranslation} from '../../../../../../i18n'
 import {DebugOverlay} from './item/DebugOverlay'
 import {SearchResultItem} from './item/SearchResultItem'
 
-const VIRTUAL_LIST_SEARCH_RESULT_ITEM_HEIGHT = 59 // px
+const VIRTUAL_LIST_SEARCH_RESULT_ITEM_HEIGHT = 57 // px
 const VIRTUAL_LIST_OVERSCAN = 4
 
 const SearchResultsInnerFlex = styled(Flex)<{$loading: boolean}>`
@@ -61,7 +61,7 @@ export function SearchResults({inputElement}: SearchResultsProps) {
             documentId={getPublishedId(item.hit._id) || ''}
             documentType={item.hit._type}
             onClick={handleSearchResultClick}
-            paddingBottom={2}
+            paddingY={1}
           />
           {debug && <DebugOverlay data={item} />}
         </>
@@ -96,8 +96,8 @@ export function SearchResults({inputElement}: SearchResultsProps) {
                     itemHeight={VIRTUAL_LIST_SEARCH_RESULT_ITEM_HEIGHT}
                     items={result.hits}
                     overscan={VIRTUAL_LIST_OVERSCAN}
-                    padding={2}
-                    paddingBottom={0}
+                    paddingX={2}
+                    paddingY={1}
                     ref={setSearchCommandList}
                     renderItem={renderItem}
                   />

From a7019e1b05fe72726e1c0d9b212255c22a86fa96 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 13 Dec 2023 17:34:54 +0000
Subject: [PATCH 112/163] fix: re-use StatusButton component in mobile search
 header, localize tooltip text

---
 .../sanity/src/core/i18n/bundles/studio.ts    |  4 +++
 .../navbar/search/components/SearchHeader.tsx | 25 +++++++------------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index e39cd4aa490..35fa9f218ad 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -1063,6 +1063,10 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'search.action.toggle-filters-aria-label_hide': 'Hide filters',
   /** Accessibility label for when the search is full screen (on narrow screens) and you want to show filters */
   'search.action.toggle-filters-aria-label_show': 'Show filters',
+  /** Label for when the search is full screen (on narrow screens) and you want to hide filters */
+  'search.action.toggle-filters-label_hide': 'Hide filters',
+  /** Label for when the search is full screen (on narrow screens) and you want to show filters */
+  'search.action.toggle-filters-label_show': 'Show filters',
 
   /** Tooltip text for the global search button */
   'search.button.tooltip': 'Search',
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
index 4a272a82dde..bad3f8e3efe 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
@@ -1,8 +1,9 @@
 import {ArrowLeftIcon, ControlsIcon, SearchIcon, SpinnerIcon} from '@sanity/icons'
-import {Box, Card, Flex, Theme} from '@sanity/ui'
+import {Box, Card, Flex} from '@sanity/ui'
 import React, {forwardRef, useCallback, useEffect, useRef} from 'react'
 import styled, {keyframes} from 'styled-components'
 import {Button} from '../../../../../../ui'
+import {StatusButton} from '../../../../../components'
 import {useTranslation} from '../../../../../i18n'
 import {useSearchState} from '../contexts/search/useSearchState'
 import {CustomTextInput} from './common/CustomTextInput'
@@ -25,16 +26,6 @@ const FilterDiv = styled.div`
   position: relative;
 `
 
-const NotificationBadge = styled.div`
-  background: ${({theme}: {theme: Theme}) => theme.sanity.color.selectable?.primary.enabled.fg};
-  border-radius: 100%;
-  height: 6px;
-  position: absolute;
-  right: 2px;
-  top: 2px;
-  width: 6px;
-`
-
 interface SearchHeaderProps {
   ariaInputLabel: string
   onClose?: () => void
@@ -126,20 +117,22 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
         {/* Filter toggle */}
         {fullscreen && (
           <FilterDiv>
-            <Button
+            <StatusButton
               aria-expanded={filtersVisible}
               aria-label={t('search.action.toggle-filters-aria-label', {
                 context: filtersVisible ? 'hide' : 'show',
               })}
-              height="fill"
               icon={ControlsIcon}
               mode="bleed"
               onClick={handleFiltersToggle}
               selected={filtersVisible}
-              tone="default"
-              tooltipProps={{content: filtersVisible ? 'Hide filters' : 'Show filters'}}
+              tone={notificationBadgeVisible ? 'primary' : undefined}
+              tooltipProps={{
+                content: t('search.action.toggle-filters-label', {
+                  context: filtersVisible ? 'hide' : 'show',
+                }),
+              }}
             />
-            {notificationBadgeVisible && <NotificationBadge />}
           </FilterDiv>
         )}
       </Flex>

From fba6800d44361aed352256379b77cf6235c2dfd3 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 13 Dec 2023 17:35:52 +0000
Subject: [PATCH 113/163] fix: ensure focus is returned when closing search
 (defer focus handling to `<FocusLock>`)

---
 .../studio/components/navbar/search/components/SearchHeader.tsx  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
index bad3f8e3efe..542f22ed3de 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
@@ -98,7 +98,6 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
             $background={fullscreen}
             $smallClearButton={fullscreen}
             aria-label={ariaInputLabel}
-            autoFocus
             autoComplete="off"
             border={false}
             clearButton={!!query}

From af055d007ca342c9e9b6bdda171e92abe1ca2495 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 13 Dec 2023 17:42:33 +0000
Subject: [PATCH 114/163] fix: remove responsive styles from global search
 filters

---
 .../components/filters/common/FilterDetails.tsx       | 11 +++++------
 .../search/components/filters/filter/FilterForm.tsx   |  9 ++-------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterDetails.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterDetails.tsx
index 43aa5e50e09..b438253c315 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterDetails.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterDetails.tsx
@@ -9,21 +9,20 @@ import {FilterIcon} from './FilterIcon'
 
 interface FilterDetailsProps {
   filter: SearchFilter
-  small?: boolean
 }
 
-export function FilterDetails({filter, small = true}: FilterDetailsProps) {
+export function FilterDetails({filter}: FilterDetailsProps) {
   const {
     state: {definitions},
   } = useSearchState()
   const fieldDefinition = getFieldFromFilter(definitions.fields, filter)
 
   return (
-    <Stack space={small ? 2 : 3}>
+    <Stack space={2}>
       {/* Path */}
       {fieldDefinition?.titlePath && fieldDefinition.titlePath?.length > 1 && (
         <Box marginLeft={4}>
-          <Text muted size={small ? 0 : 1}>
+          <Text muted size={0}>
             {fieldDefinition.titlePath.slice(0, -1).map((pathTitle, index) => {
               return (
                 <React.Fragment
@@ -51,11 +50,11 @@ export function FilterDetails({filter, small = true}: FilterDetailsProps) {
 
       <Flex align="flex-start" gap={3}>
         <Box style={{flexShrink: 0}}>
-          <Text size={small ? 1 : 2}>
+          <Text size={1}>
             <FilterIcon filter={filter} />
           </Text>
         </Box>
-        <Text size={small ? 1 : 2} weight="medium">
+        <Text size={1} weight="medium">
           <FilterTitle filter={filter} />
         </Text>
       </Flex>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx
index 60aafc1c394..cf70150994a 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx
@@ -84,13 +84,8 @@ export function FilterForm({filter}: FilterFormProps) {
           <Card padding={3}>
             <Stack space={3}>
               <Flex align="flex-start" gap={3} justify="space-between">
-                <Box
-                  paddingBottom={1}
-                  paddingLeft={1}
-                  paddingRight={2}
-                  paddingTop={fullscreen ? 2 : 1}
-                >
-                  <FilterDetails filter={filter} small={!fullscreen} />
+                <Box paddingLeft={1} paddingRight={2} paddingY={1}>
+                  <FilterDetails filter={filter} />
                 </Box>
 
                 {fullscreen && (

From ec8b15c03dc5440ded7e86785d5671519c8af31d Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 13 Dec 2023 17:54:41 +0000
Subject: [PATCH 115/163] chore: update snapshots

---
 packages/sanity/src/core/studio/Studio.test.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/core/studio/Studio.test.tsx b/packages/sanity/src/core/studio/Studio.test.tsx
index 7f46d880322..e8d7cd3a9c2 100644
--- a/packages/sanity/src/core/studio/Studio.test.tsx
+++ b/packages/sanity/src/core/studio/Studio.test.tsx
@@ -45,7 +45,7 @@ describe('Studio', () => {
       const html = renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))
 
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-jWETjw Oogqe\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-ddDelH dNjWse\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -62,7 +62,7 @@ describe('Studio', () => {
     try {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-jWETjw Oogqe\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-ddDelH dNjWse\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -82,7 +82,7 @@ describe('Studio', () => {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       node.innerHTML = html
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-jWETjw Oogqe\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-ddDelH dNjWse\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
       document.head.innerHTML += sheet.getStyleTags()
 

From 66741c9add9f80a3da6663ae1e6d8ee0d42dbc12 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 13 Dec 2023 15:29:30 +0000
Subject: [PATCH 116/163] feat: animate search popover

---
 .eslintrc.cjs                                 |   2 +-
 .../components/navbar/search/SearchDialog.tsx |  56 ++++-----
 .../search/components/SearchPopover.tsx       | 113 +++++++++++-------
 .../components/common/SearchWrapper.tsx       |   4 -
 4 files changed, 101 insertions(+), 74 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 2bca9098648..2254330b3bc 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -65,7 +65,7 @@ const config = {
       {
         ignores: {
           componentPatterns: ['motion$'],
-          attributes: ['size', 'fill', 'full'],
+          attributes: ['animate', 'closed', 'exit', 'fill', 'full', 'initial', 'size'],
         },
       },
     ],
diff --git a/packages/sanity/src/core/studio/components/navbar/search/SearchDialog.tsx b/packages/sanity/src/core/studio/components/navbar/search/SearchDialog.tsx
index 93fabe9d9a7..ed29468d15f 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/SearchDialog.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/SearchDialog.tsx
@@ -55,33 +55,35 @@ export function SearchDialog({onClose, onOpen, open}: SearchDialogProps) {
 
   return (
     <SearchWrapper hasValidTerms={hasValidTerms} onClose={onClose} onOpen={onOpen} open={open}>
-      <Portal>
-        <FocusLock autoFocus={!supportsTouch} returnFocus>
-          <SearchDialogBox>
-            <InnerCard display="flex" height="fill" scheme={scheme} tone="default">
-              <SearchHeader
-                ariaInputLabel={
-                  hasValidTerms
-                    ? t('search.search-results-aria-label')
-                    : t('search.recent-searches-aria-label')
-                }
-                onClose={onClose}
-                ref={setInputElement}
-              />
-              {filtersVisible && (
-                <Card borderTop flex="none">
-                  <Filters />
-                </Card>
-              )}
-              {hasValidTerms ? (
-                <SearchResults inputElement={inputElement} />
-              ) : (
-                <RecentSearches inputElement={inputElement} />
-              )}
-            </InnerCard>
-          </SearchDialogBox>
-        </FocusLock>
-      </Portal>
+      {open && (
+        <Portal>
+          <FocusLock autoFocus={!supportsTouch} returnFocus>
+            <SearchDialogBox>
+              <InnerCard display="flex" height="fill" scheme={scheme} tone="default">
+                <SearchHeader
+                  ariaInputLabel={
+                    hasValidTerms
+                      ? t('search.search-results-aria-label')
+                      : t('search.recent-searches-aria-label')
+                  }
+                  onClose={onClose}
+                  ref={setInputElement}
+                />
+                {filtersVisible && (
+                  <Card borderTop flex="none">
+                    <Filters />
+                  </Card>
+                )}
+                {hasValidTerms ? (
+                  <SearchResults inputElement={inputElement} />
+                ) : (
+                  <RecentSearches inputElement={inputElement} />
+                )}
+              </InnerCard>
+            </SearchDialogBox>
+          </FocusLock>
+        </Portal>
+      )}
     </SearchWrapper>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
index ec9dc3b104d..4574fade5e0 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
@@ -1,9 +1,9 @@
 import {Card, Portal, Theme, useClickOutside, useLayer} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
+import {AnimatePresence, motion, Transition, Variants} from 'framer-motion'
+import React, {useCallback, useRef, useState} from 'react'
 import FocusLock from 'react-focus-lock'
 import styled from 'styled-components'
 import {supportsTouch} from '../../../../../util'
-import {useColorScheme} from '../../../../colorScheme'
 import {
   POPOVER_INPUT_PADDING,
   POPOVER_MAX_HEIGHT,
@@ -26,9 +26,24 @@ export interface SearchPopoverProps {
   open: boolean
 }
 
+const ANIMATION_TRANSITION: Transition = {
+  duration: 0.4,
+  type: 'spring',
+}
+
+const CARD_VARIANTS: Variants = {
+  open: {opacity: 1, scale: 1, x: '-50%'},
+  closed: {opacity: 0, scale: 0.99, x: '-50%'},
+}
+
+const OVERLAY_VARIANTS: Variants = {
+  open: {opacity: 1},
+  closed: {opacity: 0},
+}
+
 const Y_POSITION = 8 // px
 
-const Overlay = styled.div`
+const MotionOverlay = styled(motion.div)`
   background-color: ${({theme}: {theme: Theme}) => theme.sanity.color.base.shadow.umbra};
   bottom: 0;
   left: 0;
@@ -37,7 +52,7 @@ const Overlay = styled.div`
   top: 0;
 `
 
-const SearchPopoverCard = styled(Card)`
+const SearchMotionCard = styled(motion(Card))`
   display: flex !important;
   flex-direction: column;
   left: 50%;
@@ -47,16 +62,15 @@ const SearchPopoverCard = styled(Card)`
   );
   position: absolute;
   top: ${Y_POSITION}px;
-  transform: translateX(-50%);
   width: min(calc(100vw - ${POPOVER_INPUT_PADDING * 2}px), ${POPOVER_MAX_WIDTH}px);
 `
 
 export function SearchPopover({disableFocusLock, onClose, onOpen, open}: SearchPopoverProps) {
-  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
   const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
 
+  const popoverElement = useRef<HTMLElement | null>(null)
+
   const {isTopLayer, zIndex} = useLayer()
-  const {scheme} = useColorScheme()
   const {t} = useTranslation()
 
   const {
@@ -75,44 +89,59 @@ export function SearchPopover({disableFocusLock, onClose, onOpen, open}: SearchP
     }
   }, [isTopLayer, onSearchClose, open])
 
-  useClickOutside(handleClickOutside, [popoverElement])
+  useClickOutside(handleClickOutside, [popoverElement.current])
 
   return (
     <SearchWrapper hasValidTerms={hasValidTerms} onClose={onClose} onOpen={onOpen} open={open}>
-      <Portal>
-        <FocusLock autoFocus={!supportsTouch} disabled={disableFocusLock} returnFocus>
-          <Overlay style={{zIndex}} />
-
-          <SearchPopoverCard
-            overflow="hidden"
-            radius={POPOVER_RADIUS}
-            ref={setPopoverElement}
-            scheme={scheme}
-            shadow={2}
-            style={{zIndex}}
-          >
-            <SearchHeader
-              ariaInputLabel={
-                hasValidTerms
-                  ? t('search.search-results-aria-label')
-                  : t('search.recent-searches-aria-label')
-              }
-              onClose={onClose}
-              ref={setInputElement}
-            />
-            {filtersVisible && (
-              <Card borderTop flex="none">
-                <Filters />
-              </Card>
-            )}
-            {hasValidTerms ? (
-              <SearchResults inputElement={inputElement} />
-            ) : (
-              <RecentSearches inputElement={inputElement} />
-            )}
-          </SearchPopoverCard>
-        </FocusLock>
-      </Portal>
+      <AnimatePresence>
+        {open && (
+          <Portal>
+            <FocusLock autoFocus={!supportsTouch} disabled={disableFocusLock} returnFocus>
+              <MotionOverlay
+                animate="open"
+                exit="closed"
+                initial="closed"
+                style={{zIndex}}
+                transition={ANIMATION_TRANSITION}
+                variants={OVERLAY_VARIANTS}
+              />
+
+              <SearchMotionCard
+                animate="open"
+                exit="closed"
+                initial="closed"
+                overflow="hidden"
+                radius={POPOVER_RADIUS}
+                ref={popoverElement}
+                shadow={2}
+                style={{zIndex}}
+                transition={ANIMATION_TRANSITION}
+                variants={CARD_VARIANTS}
+              >
+                <SearchHeader
+                  ariaInputLabel={
+                    hasValidTerms
+                      ? t('search.search-results-aria-label')
+                      : t('search.recent-searches-aria-label')
+                  }
+                  onClose={onClose}
+                  ref={setInputElement}
+                />
+                {filtersVisible && (
+                  <Card borderTop flex="none">
+                    <Filters />
+                  </Card>
+                )}
+                {hasValidTerms ? (
+                  <SearchResults inputElement={inputElement} />
+                ) : (
+                  <RecentSearches inputElement={inputElement} />
+                )}
+              </SearchMotionCard>
+            </FocusLock>
+          </Portal>
+        )}
+      </AnimatePresence>
     </SearchWrapper>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/common/SearchWrapper.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/common/SearchWrapper.tsx
index 59c00a609e6..c15251f84ef 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/common/SearchWrapper.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/common/SearchWrapper.tsx
@@ -74,9 +74,5 @@ export function SearchWrapper({
     }
   }, [])
 
-  if (!open) {
-    return null
-  }
-
   return children
 }

From ca2d0b96f00540c77e4180c8882cc059fda94973 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 14 Dec 2023 01:19:14 +0000
Subject: [PATCH 117/163] feat: add customized Popover and MenuItem components
 and enable animation, update comments

---
 .eslintrc.cjs                                 |  4 ++
 .../components/collapseMenu/CollapseMenu.tsx  |  4 +-
 .../collapseMenu/CollapseOverflowMenu.tsx     |  4 +-
 .../collapseTabList/CollapseTabList.tsx       |  3 +-
 .../commandList/__workshop__/PopoverStory.tsx |  4 +-
 .../popoverDialog/PopoverDialog.tsx           | 14 +----
 .../core/field/diff/components/ChangeList.tsx |  4 +-
 .../field/diff/components/FieldChange.tsx     |  4 +-
 .../diff/components/GroupChange.styled.tsx    |  2 +-
 .../field/diff/components/GroupChange.tsx     |  4 +-
 .../diff/components/Annotation.tsx            |  3 +-
 .../diff/components/InlineObject.tsx          |  3 +-
 .../form/field/actions/FieldActionMenu.tsx    |  4 +-
 .../CrossDatasetReferenceInput.tsx            |  4 +-
 .../ReferenceAutocomplete.tsx                 |  3 +-
 .../inputs/DateInputs/base/DateTimeInput.tsx  |  4 +-
 .../object/AnnotationToolbarPopover.tsx       |  4 +-
 .../object/BlockObjectActionsMenu.tsx         |  4 +-
 .../object/InlineObjectToolbarPopover.tsx     |  4 +-
 .../object/modals/PopoverModal.styles.ts      |  3 +-
 .../object/modals/PopoverModal.tsx            |  4 +-
 .../PortableText/toolbar/ActionMenu.tsx       |  4 +-
 .../PortableText/toolbar/BlockStyleSelect.tsx |  4 +-
 .../PortableText/toolbar/InsertMenu.tsx       |  2 +-
 .../inputs/ReferenceInput/CreateButton.tsx    |  4 +-
 .../ReferenceInput/ReferenceAutocomplete.tsx  |  3 +-
 .../inputs/ReferenceInput/ReferenceField.tsx  |  3 +-
 .../inputs/ReferenceInput/ReferenceItem.tsx   |  4 +-
 .../ArrayOfObjectsFunctions.tsx               |  4 +-
 .../ArrayOfObjectsInput/Grid/ErrorItem.tsx    |  4 +-
 .../ArrayOfObjectsInput/Grid/GridItem.tsx     |  4 +-
 .../Grid/IncompatibleItemType.tsx             |  3 +-
 .../arrays/ArrayOfObjectsInput/InsertMenu.tsx |  3 +-
 .../ArrayOfObjectsInput/List/ErrorItem.tsx    |  4 +-
 .../List/IncompatibleItemType.tsx             |  3 +-
 .../ArrayOfObjectsInput/List/PreviewItem.tsx  |  4 +-
 .../ArrayOfPrimitivesFunctions.tsx            |  4 +-
 .../arrays/ArrayOfPrimitivesInput/ItemRow.tsx |  4 +-
 .../files/FileInput/FileActionsMenu.tsx       | 13 +---
 .../form/inputs/files/FileInput/FileInput.tsx |  4 +-
 .../files/ImageInput/ImageActionsMenu.tsx     |  3 +-
 .../inputs/files/ImageInput/ImageInput.tsx    |  4 +-
 .../members/array/IncompatibleItemType.tsx    |  3 +-
 .../studio/assetSource/shared/AssetMenu.tsx   |  4 +-
 .../new-document/NewDocumentButton.style.ts   |  4 +-
 .../navbar/presence/PresenceMenu.tsx          |  4 +-
 .../navbar/resources/ResourcesButton.tsx      |  4 +-
 .../navbar/search/components/SortMenu.tsx     |  4 +-
 .../filters/addFilter/AddFilterButton.tsx     |  3 +-
 .../documentTypes/DocumentTypesButton.tsx     |  4 +-
 .../filters/filter/FilterButton.tsx           |  2 +-
 .../filters/filter/OperatorsMenuButton.tsx    |  4 +-
 .../filters/filter/inputs/asset/Asset.tsx     |  4 +-
 .../reference/ReferenceAutocomplete.tsx       |  4 +-
 .../filter/inputs/string/StringList.tsx       |  4 +-
 .../components/navbar/userMenu/UserMenu.tsx   |  4 +-
 .../navbar/workspace/WorkspaceMenuButton.tsx  |  4 +-
 .../plugin/field/CommentsFieldButton.tsx      |  3 +-
 .../inspector/CommentsInspectorHeader.tsx     |  4 +-
 .../list/CommentsListItemContextMenu.tsx      | 12 +---
 .../onboarding/CommentsOnboardingPopover.tsx  |  4 +-
 .../components/pte/comment-input/Editable.tsx |  3 +-
 .../components/pane/PaneContextMenuButton.tsx |  3 +-
 .../pane/PaneHeaderActionButton.tsx           |  6 +-
 .../components/pane/PaneMenuButtonItem.tsx    |  4 +-
 .../DocumentPane/DocumentActions.tsx          |  4 +-
 .../PaneHeaderCreateButton.tsx                |  4 +-
 .../DeskRenameToolMenuButtonPopover.tsx       |  4 +-
 .../document/statusBar/ActionMenuButton.tsx   |  4 +-
 .../statusBar/dialogs/ConfirmDialog.tsx       | 13 +---
 .../statusBar/dialogs/PopoverDialog.tsx       |  3 +-
 .../panes/document/timeline/timelineMenu.tsx  |  4 +-
 packages/sanity/src/ui/button/Button.tsx      |  5 +-
 .../conditionalWrapper/ConditionalWrapper.tsx |  5 ++
 .../contextMenuButton/ContextMenuButton.tsx   | 15 +++--
 packages/sanity/src/ui/dialog/Dialog.tsx      | 60 ++++++++++---------
 .../src/ui/documentStatus/DocumentStatus.tsx  | 10 ++++
 .../DocumentStatusIndicator.tsx               |  9 +++
 packages/sanity/src/ui/index.ts               |  2 +
 .../src/ui/loadingBlock/LoadingBlock.tsx      |  2 +
 .../sanity/src/ui/menuButton/MenuButton.tsx   | 33 ++++++++++
 packages/sanity/src/ui/menuButton/index.ts    |  1 +
 .../sanity/src/ui/menuGroup/MenuGroup.tsx     | 13 ++--
 packages/sanity/src/ui/menuItem/MenuItem.tsx  | 48 +++++++--------
 packages/sanity/src/ui/popover/Popover.tsx    | 21 +++++++
 packages/sanity/src/ui/popover/index.ts       |  1 +
 .../src/ui/spacerButton/SpacerButton.tsx      | 10 +++-
 packages/sanity/src/ui/tab/Tab.tsx            |  5 +-
 packages/sanity/src/ui/tooltip/Tooltip.tsx    |  8 ++-
 89 files changed, 305 insertions(+), 246 deletions(-)
 create mode 100644 packages/sanity/src/ui/menuButton/MenuButton.tsx
 create mode 100644 packages/sanity/src/ui/menuButton/index.ts
 create mode 100644 packages/sanity/src/ui/popover/Popover.tsx
 create mode 100644 packages/sanity/src/ui/popover/index.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 2254330b3bc..9350a7e452a 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -248,10 +248,14 @@ const config = {
                   'ButtonProps',
                   'Dialog',
                   'DialogProps',
+                  'MenuButton',
+                  'MenuButtonProps',
                   'MenuGroup',
                   'MenuGroupProps',
                   'MenuItem',
                   'MenuItemProps',
+                  'Popover',
+                  'PopoverProps',
                   'Tab',
                   'TabProps',
                   'Tooltip',
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
index ac3b9e01b7b..11c30c6166c 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
@@ -1,4 +1,4 @@
-import {Flex, MenuButtonProps} from '@sanity/ui'
+import {Flex} from '@sanity/ui'
 import React, {
   Children,
   cloneElement,
@@ -14,7 +14,7 @@ import React, {
 } from 'react'
 import styled, {css} from 'styled-components'
 import {difference} from 'lodash'
-import {Tooltip} from '../../../ui'
+import {MenuButtonProps, Tooltip} from '../../../ui'
 import {ContextMenuButton} from '../../../ui/contextMenuButton'
 import {CollapseOverflowMenu} from './CollapseOverflowMenu'
 import {ObserveElement} from './ObserveElement'
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
index 2bc6ab71d52..bc52dcf0ff5 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
@@ -1,6 +1,6 @@
-import {Menu, MenuButton, MenuButtonProps, MenuDivider} from '@sanity/ui'
+import {Menu, MenuDivider} from '@sanity/ui'
 import React, {ForwardedRef, forwardRef} from 'react'
-import {MenuItem} from '../../../ui'
+import {MenuButton, MenuButtonProps, MenuItem} from '../../../ui'
 import {CollapseMenuProps} from './CollapseMenu'
 
 const MENU_BUTTON_POPOVER_PROPS: MenuButtonProps['popover'] = {
diff --git a/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx b/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
index 45dafec043e..6fcfb26b4a8 100644
--- a/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
+++ b/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
@@ -1,6 +1,7 @@
 import React, {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
-import {Flex, MenuButtonProps} from '@sanity/ui'
+import {Flex} from '@sanity/ui'
 import styled from 'styled-components'
+import {MenuButtonProps} from '../../../ui'
 import {ContextMenuButton} from '../../../ui/contextMenuButton'
 import {CollapseOverflowMenu} from '../collapseMenu/CollapseOverflowMenu'
 import {ObserveElement} from '../collapseMenu/ObserveElement'
diff --git a/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx b/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx
index 3aff2841e84..dd4733ac8f0 100644
--- a/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx
+++ b/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx
@@ -1,10 +1,10 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {Card, Flex, Inline, Popover, Stack, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
+import {Card, Flex, Inline, Stack, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import React, {useCallback, useState} from 'react'
 import {CommandList} from '../CommandList'
 import {CommandListRenderItemCallback} from '../types'
-import {Button} from '../../../../ui'
+import {Button, Popover} from '../../../../ui'
 
 const ITEMS = [...Array(50000).keys()]
 
diff --git a/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx b/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx
index cc5c317e5da..9bc8b19926e 100644
--- a/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx
+++ b/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx
@@ -1,19 +1,9 @@
 import {CloseIcon} from '@sanity/icons'
-import {
-  Box,
-  Flex,
-  Layer,
-  Popover,
-  PopoverProps,
-  ResponsiveWidthProps,
-  Stack,
-  Text,
-  Theme,
-} from '@sanity/ui'
+import {Box, Flex, Layer, ResponsiveWidthProps, Stack, Text, Theme} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import styled, {css} from 'styled-components'
 import TrapFocus from 'react-focus-lock'
-import {Button} from '../../../ui'
+import {Button, Popover, PopoverProps} from '../../../ui'
 import {PopoverContainer} from './PopoverContainer'
 
 const StyledPopover = styled(Popover)(() => {
diff --git a/packages/sanity/src/core/field/diff/components/ChangeList.tsx b/packages/sanity/src/core/field/diff/components/ChangeList.tsx
index f3b70d04255..af8248f4bf5 100644
--- a/packages/sanity/src/core/field/diff/components/ChangeList.tsx
+++ b/packages/sanity/src/core/field/diff/components/ChangeList.tsx
@@ -1,4 +1,4 @@
-import {Box, Card, Grid, Popover, Stack, Text, useClickOutside} from '@sanity/ui'
+import {Box, Card, Grid, Stack, Text, useClickOutside} from '@sanity/ui'
 import {RevertIcon} from '@sanity/icons'
 import React, {useCallback, useContext, useMemo, useState} from 'react'
 import {SanityDocument} from '@sanity/client'
@@ -11,7 +11,7 @@ import {undoChange} from '../changes/undoChange'
 import {useDocumentChange} from '../hooks/useDocumentChange'
 import {useDocumentPairPermissions} from '../../../store'
 import {useDocumentOperation} from '../../../hooks'
-import {Button} from '../../../../ui'
+import {Button, Popover} from '../../../../ui'
 import {useTranslation} from '../../../i18n'
 import {ChangeResolver} from './ChangeResolver'
 import {NoChanges} from './NoChanges'
diff --git a/packages/sanity/src/core/field/diff/components/FieldChange.tsx b/packages/sanity/src/core/field/diff/components/FieldChange.tsx
index c8465b8605d..4fe9025226f 100644
--- a/packages/sanity/src/core/field/diff/components/FieldChange.tsx
+++ b/packages/sanity/src/core/field/diff/components/FieldChange.tsx
@@ -1,8 +1,8 @@
 import React, {useCallback, useMemo, useState} from 'react'
-import {Box, Grid, Popover, Stack, Text, useClickOutside} from '@sanity/ui'
+import {Box, Grid, Stack, Text, useClickOutside} from '@sanity/ui'
 import {ObjectSchemaType} from '@sanity/types'
 import {useDocumentOperation} from '../../../hooks'
-import {Button} from '../../../../ui'
+import {Button, Popover} from '../../../../ui'
 import {FieldChangeNode, FieldOperationsAPI} from '../../types'
 import {undoChange} from '../changes/undoChange'
 import {DiffContext} from '../contexts/DiffContext'
diff --git a/packages/sanity/src/core/field/diff/components/GroupChange.styled.tsx b/packages/sanity/src/core/field/diff/components/GroupChange.styled.tsx
index 74bf8fba15d..36a699b82a7 100644
--- a/packages/sanity/src/core/field/diff/components/GroupChange.styled.tsx
+++ b/packages/sanity/src/core/field/diff/components/GroupChange.styled.tsx
@@ -1,4 +1,4 @@
-import {rem, Popover} from '@sanity/ui'
+import {rem} from '@sanity/ui'
 import styled from 'styled-components'
 
 export const ChangeListWrapper = styled.div`
diff --git a/packages/sanity/src/core/field/diff/components/GroupChange.tsx b/packages/sanity/src/core/field/diff/components/GroupChange.tsx
index 9927c23196e..f83ecd4d048 100644
--- a/packages/sanity/src/core/field/diff/components/GroupChange.tsx
+++ b/packages/sanity/src/core/field/diff/components/GroupChange.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useContext, useMemo, useState} from 'react'
-import {Box, Grid, Popover, Stack, Text, useClickOutside} from '@sanity/ui'
-import {Button} from '../../../../ui'
+import {Box, Grid, Stack, Text, useClickOutside} from '@sanity/ui'
+import {Button, Popover} from '../../../../ui'
 import {useDocumentOperation} from '../../../hooks'
 import {undoChange} from '../changes/undoChange'
 import {isFieldChange} from '../helpers'
diff --git a/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx b/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx
index d26be6e8855..3ba9f3f1908 100644
--- a/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx
+++ b/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx
@@ -1,9 +1,10 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {useClickOutside, Popover, Flex, Text} from '@sanity/ui'
+import {useClickOutside, Flex, Text} from '@sanity/ui'
 import {toString} from '@sanity/util/paths'
 import {isKeySegment, type ObjectSchemaType, type Path, type PortableTextChild} from '@sanity/types'
 import React, {useCallback, useContext, useEffect, useMemo, useState, type ReactNode} from 'react'
 import styled from 'styled-components'
+import {Popover} from '../../../../../../ui'
 import {useTranslation} from '../../../../../i18n'
 import {ChangeList, DiffContext, DiffTooltip, useDiffAnnotationColor} from '../../../../diff'
 import type {ObjectDiff} from '../../../../types'
diff --git a/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx b/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx
index 633b0151a99..b097015d959 100644
--- a/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx
+++ b/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx
@@ -6,10 +6,11 @@ import {
   type PortableTextChild,
   type PortableTextObject,
 } from '@sanity/types'
-import {Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
+import {Card, Flex, Text, useClickOutside} from '@sanity/ui'
 import {FOCUS_TERMINATOR, toString} from '@sanity/util/paths'
 import React, {useCallback, useContext, useState, useEffect, useMemo} from 'react'
 import styled from 'styled-components'
+import {Popover} from '../../../../../../ui'
 import {useTranslation} from '../../../../../i18n'
 import {ChangeList, DiffContext, DiffTooltip, useDiffAnnotationColor} from '../../../../diff'
 import type {ObjectDiff} from '../../../../types'
diff --git a/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx b/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx
index c728e7d07c4..4fb0d661555 100644
--- a/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx
+++ b/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable react/jsx-handler-names */
 
 import {EllipsisHorizontalIcon} from '@sanity/icons'
-import {Card, Menu, MenuButton, MenuButtonProps} from '@sanity/ui'
+import {Card, Menu} from '@sanity/ui'
 import React, {memo, useCallback, useId, useMemo, useState} from 'react'
-import {Button, ButtonProps} from '../../../../ui'
+import {Button, ButtonProps, MenuButton, MenuButtonProps} from '../../../../ui'
 import {DocumentFieldActionGroup, DocumentFieldActionNode} from '../../../config'
 import {useI18nText} from '../../../i18n'
 import {FieldActionMenuNode} from './FieldActionMenuNode'
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
index bea91ae6606..8d2b49f166f 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
@@ -4,7 +4,7 @@ import type {CrossDatasetReferenceValue, CrossDatasetReferenceSchemaType} from '
 import {ResetIcon as ClearIcon, SyncIcon as ReplaceIcon} from '@sanity/icons'
 import {concat, of, type Observable} from 'rxjs'
 import {catchError, distinctUntilChanged, filter, map, scan, switchMap, tap} from 'rxjs/operators'
-import {Box, Card, Flex, Inline, Menu, MenuButton, Stack, useToast} from '@sanity/ui'
+import {Box, Card, Flex, Inline, Menu, Stack, useToast} from '@sanity/ui'
 import {useObservableCallback} from 'react-rx'
 import {FOCUS_TERMINATOR} from '@sanity/util/paths'
 import type {ObjectInputProps} from '../../types'
@@ -12,7 +12,7 @@ import {set, unset} from '../../patch'
 import {useOnClickOutside} from '../../hooks/useOnClickOutside'
 import {getPublishedId, isNonNullable} from '../../../util'
 import {FIXME} from '../../../FIXME'
-import {MenuItem} from '../../../../ui'
+import {MenuButton, MenuItem} from '../../../../ui'
 import {ContextMenuButton} from '../../../../ui/contextMenuButton'
 import {ChangeIndicator} from '../../../changeIndicators'
 import {PreviewCard} from '../../../components'
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/ReferenceAutocomplete.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/ReferenceAutocomplete.tsx
index 074f97e7f79..45e8acabc24 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/ReferenceAutocomplete.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/ReferenceAutocomplete.tsx
@@ -1,6 +1,7 @@
 import React, {forwardRef, useCallback} from 'react'
-import {Autocomplete, Box, Flex, Placement, Popover, Text} from '@sanity/ui'
+import {Autocomplete, Box, Flex, Placement, Text} from '@sanity/ui'
 import styled from 'styled-components'
+import {Popover} from '../../../../ui'
 import {Translate, useTranslation} from '../../../i18n'
 
 const StyledPopover = styled(Popover)`
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
index ac95da50399..8cd203a253c 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
@@ -1,8 +1,8 @@
 import React, {KeyboardEvent, forwardRef, useCallback, useRef, useState} from 'react'
 import FocusLock from 'react-focus-lock'
-import {Box, Flex, LayerProvider, Popover, useClickOutside, useForwardedRef} from '@sanity/ui'
+import {Box, Flex, LayerProvider, useClickOutside, useForwardedRef} from '@sanity/ui'
 import {CalendarIcon} from '@sanity/icons'
-import {Button} from '../../../../../ui'
+import {Button, Popover} from '../../../../../ui'
 import {DatePicker} from './DatePicker'
 import {LazyTextInput} from './LazyTextInput'
 import {CalendarLabels} from './calendar/types'
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx
index 586dfdedc5a..d7e437d1efc 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx
@@ -1,8 +1,8 @@
 import React, {useState, useRef, useMemo, useEffect, useCallback, startTransition} from 'react'
-import {Box, Flex, Popover, PopoverProps, Text, useGlobalKeyDown, useTheme} from '@sanity/ui'
+import {Box, Flex, Text, useGlobalKeyDown, useTheme} from '@sanity/ui'
 import {EditIcon, TrashIcon} from '@sanity/icons'
 import {useTranslation} from '../../../../i18n'
-import {Button} from '../../../../../ui'
+import {Button, Popover, PopoverProps} from '../../../../../ui'
 
 const POPOVER_FALLBACK_PLACEMENTS: PopoverProps['fallbackPlacements'] = ['top', 'bottom']
 
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
index af7dd24271f..fb413cee074 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
@@ -1,5 +1,5 @@
 import {EditIcon, LinkIcon, TrashIcon, EyeOpenIcon, EllipsisHorizontalIcon} from '@sanity/icons'
-import {Box, Flex, Menu, MenuButton, MenuButtonProps, useGlobalKeyDown} from '@sanity/ui'
+import {Box, Flex, Menu, useGlobalKeyDown} from '@sanity/ui'
 import React, {
   type PropsWithChildren,
   type ReactElement,
@@ -11,7 +11,7 @@ import React, {
   useRef,
 } from 'react'
 import {type PortableTextBlock, isReference} from '@sanity/types'
-import {Button, MenuItem} from '../../../../../ui'
+import {Button, MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 import {IntentLink} from 'sanity/router'
 
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx
index 034e93f2db9..6ee872a1486 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx
@@ -1,8 +1,8 @@
 import React, {useRef, useCallback, useMemo} from 'react'
-import {Box, Inline, Popover, PopoverProps, Text, useGlobalKeyDown, useTheme} from '@sanity/ui'
+import {Box, Inline, Text, useGlobalKeyDown, useTheme} from '@sanity/ui'
 import {EditIcon, TrashIcon} from '@sanity/icons'
 import {useTranslation} from '../../../../i18n'
-import {Button} from '../../../../../ui'
+import {Button, Popover, PopoverProps} from '../../../../../ui'
 
 const POPOVER_FALLBACK_PLACEMENTS: PopoverProps['fallbackPlacements'] = ['top', 'bottom']
 
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts
index 066cd68f246..cb56ef6c8e8 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts
@@ -1,5 +1,6 @@
-import {Box, Popover} from '@sanity/ui'
+import {Box} from '@sanity/ui'
 import styled from 'styled-components'
+import {Popover} from '../../../../../../ui'
 
 export const RootPopover = styled(Popover)`
   & > div {
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx
index fdc709226c7..0e873556fbd 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable react/no-unused-prop-types */
 
 import {CloseIcon} from '@sanity/icons'
-import {Box, Flex, PopoverProps, Text, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
+import {Box, Flex, Text, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
-import {Button} from '../../../../../../ui'
+import {Button, PopoverProps} from '../../../../../../ui'
 import {PresenceOverlay} from '../../../../../presence'
 import {PortableTextEditorElement} from '../../Compositor'
 import {VirtualizerScrollInstanceProvider} from '../../../arrays/ArrayOfObjectsInput/List/VirtualizerScrollInstanceProvider'
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
index 74aa31d05a9..a6c3b3f1011 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
@@ -1,5 +1,4 @@
 import React, {memo, useCallback, useMemo} from 'react'
-import {PopoverProps} from '@sanity/ui'
 import {useTranslation} from 'react-i18next'
 import {
   PortableTextEditor,
@@ -7,8 +6,7 @@ import {
   usePortableTextEditorSelection,
 } from '@sanity/portable-text-editor'
 import {isKeySegment} from '@sanity/types'
-import {useTranslation} from 'react-i18next'
-import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
+import {PopoverProps} from '../../../../../ui'
 import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
 import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 import {PTEToolbarAction, PTEToolbarActionGroup} from './types'
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
index 17c521a2f24..3ef42f8f947 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
@@ -2,8 +2,6 @@ import React, {memo, useCallback, useMemo} from 'react'
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
 import {
   Menu,
-  MenuButton,
-  MenuButtonProps,
   // eslint-disable-next-line no-restricted-imports
   MenuItem,
   Text,
@@ -21,7 +19,7 @@ import {
   BlockQuote,
   Normal,
 } from '../text/textStyles'
-import {Button} from '../../../../../ui'
+import {Button, MenuButton, MenuButtonProps} from '../../../../../ui'
 import {useActiveStyleKeys, useFocusBlock} from './hooks'
 import {BlockStyleItem} from './types'
 
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
index ae2857a7e57..424e64214a1 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
@@ -1,7 +1,7 @@
 import React, {memo, useCallback, useMemo} from 'react'
-import {PopoverProps} from '@sanity/ui'
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
 import {upperFirst} from 'lodash'
+import {PopoverProps} from '../../../../../ui'
 import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 import {useTranslation} from '../../../../i18n'
 import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
index 1bf03d7a26c..3d8c2d5aa51 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import {AddIcon} from '@sanity/icons'
-import {Menu, MenuButton, type MenuButtonProps} from '@sanity/ui'
+import {Menu} from '@sanity/ui'
 import {useGetI18nText, useTranslation} from '../../../i18n'
 import {InsufficientPermissionsMessage} from '../../../components'
-import {Button, MenuItem, Tooltip} from '../../../../ui'
+import {Button, MenuButton, type MenuButtonProps, MenuItem, Tooltip} from '../../../../ui'
 import {useCurrentUser} from '../../../store'
 import type {CreateReferenceOption} from './types'
 
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceAutocomplete.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceAutocomplete.tsx
index 973aa9a0058..f58a46b4c89 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceAutocomplete.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceAutocomplete.tsx
@@ -1,6 +1,7 @@
 import React, {forwardRef, useCallback} from 'react'
-import {Autocomplete, Box, Flex, Placement, Popover, Text} from '@sanity/ui'
+import {Autocomplete, Box, Flex, Placement, Text} from '@sanity/ui'
 import styled from 'styled-components'
+import {Popover} from '../../../../ui'
 import {Translate, useTranslation} from '../../../i18n'
 
 const StyledPopover = styled(Popover)`
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
index 9b137bd5a6e..3daee468516 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
@@ -14,7 +14,6 @@ import {
   CardTone,
   Flex,
   Menu,
-  MenuButton,
   MenuDivider,
   Stack,
   TooltipDelayGroupProvider,
@@ -29,7 +28,7 @@ import {FieldActionsProvider, FieldActionsResolver} from '../../field'
 import {DocumentFieldActionNode} from '../../../config'
 import {usePublishedId} from '../../contexts/DocumentIdProvider'
 import {useTranslation} from '../../../i18n'
-import {MenuItem} from '../../../../ui'
+import {MenuButton, MenuItem} from '../../../../ui'
 import {ContextMenuButton} from '../../../../ui/contextMenuButton'
 import {TOOLTIP_DELAY_PROPS} from '../../../../ui/tooltip/constants'
 import {useReferenceInput} from './useReferenceInput'
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
index 73734e6863c..b3d371bb075 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
@@ -1,4 +1,4 @@
-import {Box, CardTone, Menu, MenuButton, MenuDivider} from '@sanity/ui'
+import {Box, CardTone, Menu, MenuDivider} from '@sanity/ui'
 import React, {ComponentProps, ForwardedRef, forwardRef, useCallback, useMemo, useRef} from 'react'
 import {
   CloseIcon,
@@ -15,7 +15,7 @@ import {useDidUpdate} from '../../hooks/useDidUpdate'
 import {randomKey} from '../../utils/randomKey'
 import {FormFieldSet, FormFieldValidationStatus} from '../../components/formField'
 import {FieldPresence} from '../../../presence'
-import {MenuItem} from '../../../../ui'
+import {MenuButton, MenuItem} from '../../../../ui'
 import {ContextMenuButton} from '../../../../ui/contextMenuButton'
 import {useTranslation} from '../../../i18n'
 import {ChangeIndicator} from '../../../changeIndicators'
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
index c21ee1a9b71..a543b17c1d7 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
@@ -1,9 +1,9 @@
 import {ArraySchemaType, isReferenceSchemaType} from '@sanity/types'
 import {AddIcon} from '@sanity/icons'
 import React, {useId, useCallback} from 'react'
-import {Grid, Menu, MenuButton, MenuButtonProps} from '@sanity/ui'
+import {Grid, Menu} from '@sanity/ui'
 import {ArrayInputFunctionsProps, ObjectItem} from '../../../types'
-import {Tooltip, Button, MenuItem} from '../../../../../ui'
+import {Button, MenuButton, MenuButtonProps, MenuItem, Tooltip} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
index bc0ea92be16..e9c93fa621e 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
@@ -1,12 +1,12 @@
 import React, {useCallback, useId} from 'react'
 import {TrashIcon} from '@sanity/icons'
-import {Menu, MenuButton} from '@sanity/ui'
+import {Menu} from '@sanity/ui'
 import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
 import {ArrayItemError} from '../../../../store'
 import {useFormCallbacks} from '../../../../studio/contexts/FormCallbacks'
 import {PatchEvent, unset} from '../../../../patch'
 import {CellLayout} from '../../layouts/CellLayout'
-import {MenuItem} from '../../../../../../ui'
+import {MenuButton, MenuItem} from '../../../../../../ui'
 import {useTranslation} from '../../../../../i18n'
 import {IncompatibleItemType} from './IncompatibleItemType'
 
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
index 22515c206a2..96a3200161e 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
@@ -1,10 +1,10 @@
-import {Box, Card, CardTone, Menu, MenuButton} from '@sanity/ui'
+import {Box, Card, CardTone, Menu} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import {SchemaType} from '@sanity/types'
 import {CopyIcon as DuplicateIcon, TrashIcon} from '@sanity/icons'
 import styled from 'styled-components'
 import {getSchemaTypeTitle} from '../../../../../schema'
-import {MenuItem} from '../../../../../../ui'
+import {MenuButton, MenuItem} from '../../../../../../ui'
 import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
 import {ObjectItem, ObjectItemProps} from '../../../../types'
 import {useScrollIntoViewOnFocusWithin} from '../../../../hooks/useScrollIntoViewOnFocusWithin'
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx
index 86ef660eaec..179144de0a1 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx
@@ -1,8 +1,9 @@
-import {Box, Card, Code, Popover, Stack, Text, Theme, useClickOutside} from '@sanity/ui'
+import {Box, Card, Code, Stack, Text, Theme, useClickOutside} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {BulbOutlineIcon, UnknownIcon} from '@sanity/icons'
 import {resolveTypeName} from '@sanity/util/content'
 import styled from 'styled-components'
+import {Popover} from '../../../../../../ui'
 import {Translate, useTranslation} from '../../../../../i18n'
 
 const PopoverCard = styled(Card)`
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
index 480ca76b25d..686ff42bf84 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
@@ -1,9 +1,8 @@
 /* eslint-disable react/jsx-no-bind */
 import {SchemaType} from '@sanity/types'
 import React, {ComponentProps, memo} from 'react'
-import {PopoverProps} from '@sanity/ui'
 import {InsertAboveIcon, InsertBelowIcon} from '@sanity/icons'
-import {MenuGroup, MenuItem} from '../../../../../ui'
+import {MenuGroup, MenuItem, PopoverProps} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 
 interface Props {
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
index 93235810bd7..d17d9a41d53 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
@@ -1,9 +1,9 @@
 import React, {useId} from 'react'
 import {TrashIcon} from '@sanity/icons'
-import {Box, Menu, MenuButton} from '@sanity/ui'
+import {Box, Menu} from '@sanity/ui'
 import {ArrayItemError} from '../../../../store'
 import {RowLayout} from '../../layouts/RowLayout'
-import {MenuItem} from '../../../../../../ui'
+import {MenuButton, MenuItem} from '../../../../../../ui'
 import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
 import {useTranslation} from '../../../../../i18n'
 import {IncompatibleItemType} from './IncompatibleItemType'
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx
index 848faf719da..37e0facfe70 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx
@@ -1,8 +1,9 @@
-import {Box, Card, Code, Flex, Popover, Stack, Text, Theme, useClickOutside} from '@sanity/ui'
+import {Box, Card, Code, Flex, Stack, Text, Theme, useClickOutside} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {BulbOutlineIcon, UnknownIcon} from '@sanity/icons'
 import {resolveTypeName} from '@sanity/util/content'
 import styled from 'styled-components'
+import {Popover} from '../../../../../../ui'
 import {Translate, useTranslation} from '../../../../../i18n'
 
 const PopoverCard = styled(Card)`
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
index 0c79d3fee9c..4fba924862d 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
@@ -1,8 +1,8 @@
-import {Box, Card, CardTone, Menu, MenuButton} from '@sanity/ui'
+import {Box, Card, CardTone, Menu} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import {SchemaType} from '@sanity/types'
 import {CopyIcon as DuplicateIcon, TrashIcon} from '@sanity/icons'
-import {MenuItem} from '../../../../../../ui'
+import {MenuButton, MenuItem} from '../../../../../../ui'
 import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
 import {getSchemaTypeTitle} from '../../../../../schema'
 import {ObjectItem, ObjectItemProps} from '../../../../types'
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
index 25aada6e397..7ac40640a79 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
@@ -2,9 +2,9 @@
 import {ArraySchemaType, isReferenceSchemaType} from '@sanity/types'
 import {AddIcon} from '@sanity/icons'
 import React, {useMemo, useId} from 'react'
-import {Grid, Menu, MenuButton} from '@sanity/ui'
+import {Grid, Menu} from '@sanity/ui'
 import {ArrayInputFunctionsProps} from '../../../types'
-import {Tooltip, Button, MenuItem} from '../../../../../ui'
+import {Tooltip, Button, MenuButton, MenuItem} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 
 /**
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
index 79e360d6b4a..10de1d68f18 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
@@ -1,5 +1,5 @@
 import React, {useCallback, useMemo} from 'react'
-import {Box, Flex, Menu, MenuButton} from '@sanity/ui'
+import {Box, Flex, Menu} from '@sanity/ui'
 import {SchemaType} from '@sanity/types'
 import {CopyIcon as DuplicateIcon, TrashIcon} from '@sanity/icons'
 import {FormFieldValidationStatus} from '../../../components/formField'
@@ -8,7 +8,7 @@ import {useTranslation} from '../../../../i18n'
 import {PrimitiveItemProps} from '../../../types/itemProps'
 import {RowLayout} from '../layouts/RowLayout'
 import {FieldPresence} from '../../../../presence'
-import {MenuItem} from '../../../../../ui'
+import {MenuButton, MenuItem} from '../../../../../ui'
 import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 import {getEmptyValue} from './getEmptyValue'
 
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
index 0deea319ea7..33f8d553d2c 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
@@ -1,18 +1,9 @@
 import {BinaryDocumentIcon} from '@sanity/icons'
 import React, {ReactNode, useCallback, useEffect, useState} from 'react'
-import {
-  Box,
-  Card,
-  Flex,
-  Menu,
-  Popover,
-  Stack,
-  Text,
-  useClickOutside,
-  useGlobalKeyDown,
-} from '@sanity/ui'
+import {Box, Card, Flex, Menu, Stack, Text, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
 import {formatBytes} from '../../common/helper'
 import {useTranslation} from '../../../../i18n'
+import {Popover} from '../../../../../ui'
 import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 
 type Props = {
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
index 3d6b6d347b5..82bb1a34447 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
@@ -13,11 +13,11 @@ import {
   UploadState,
 } from '@sanity/types'
 import {ImageIcon, SearchIcon} from '@sanity/icons'
-import {Box, Card, Menu, MenuButton, ThemeColorToneKey, ToastParams} from '@sanity/ui'
+import {Box, Card, Menu, ThemeColorToneKey, ToastParams} from '@sanity/ui'
 import {SanityClient} from '@sanity/client'
 import {isFileSource} from '@sanity/asset-utils'
 import {WithReferencedAsset} from '../../../utils/WithReferencedAsset'
-import {Button, MenuItem} from '../../../../../ui'
+import {Button, MenuButton, MenuItem} from '../../../../../ui'
 import {Uploader, UploaderResolver, UploadOptions} from '../../../studio/uploads/types'
 import {FileInfo, FileTarget} from '../common/styles'
 import {UploadProgress} from '../common/UploadProgress'
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
index 178114ca729..ff88335e3b8 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
@@ -3,13 +3,12 @@ import {CropIcon} from '@sanity/icons'
 import {
   Inline,
   Menu,
-  Popover,
   TooltipDelayGroupProvider,
   useClickOutside,
   useGlobalKeyDown,
 } from '@sanity/ui'
 import styled from 'styled-components'
-import {Button} from '../../../../../ui'
+import {Button, Popover} from '../../../../../ui'
 import {TOOLTIP_DELAY_PROPS} from '../../../../../ui/tooltip/constants'
 import {useTranslation} from '../../../../i18n'
 import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
index 80a0e17a275..4f4bd13e324 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable import/no-unresolved,react/jsx-handler-names, react/display-name, react/no-this-in-sfc */
 
-import {Box, Card, Menu, MenuButton, MenuButtonProps, Stack, ToastParams} from '@sanity/ui'
+import {Box, Card, Menu, Stack, ToastParams} from '@sanity/ui'
 import {get, startCase} from 'lodash'
 import {Observable, Subscription} from 'rxjs'
 import {ChevronDownIcon, ImageIcon, SearchIcon} from '@sanity/icons'
@@ -17,7 +17,7 @@ import {
 import React, {ReactNode} from 'react'
 import {SanityClient} from '@sanity/client'
 import {isImageSource} from '@sanity/asset-utils'
-import {Button, Dialog, MenuItem} from '../../../../../ui'
+import {Button, Dialog, MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui'
 import {PatchEvent, setIfMissing, unset} from '../../../patch'
 import {FieldMember} from '../../../store'
 import {InputProps, ObjectInputProps} from '../../../types'
diff --git a/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx b/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx
index a5480bd7a64..305727db11a 100644
--- a/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx
+++ b/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx
@@ -1,8 +1,9 @@
-import {Box, Card, Code, Flex, Popover, Stack, Text, Theme, useClickOutside} from '@sanity/ui'
+import {Box, Card, Code, Flex, Stack, Text, Theme, useClickOutside} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {BulbOutlineIcon, UnknownIcon} from '@sanity/icons'
 import {resolveTypeName} from '@sanity/util/content'
 import styled from 'styled-components'
+import {Popover} from '../../../../ui'
 import {Translate, useTranslation} from '../../../i18n'
 
 const PopoverCard = styled(Card)`
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx
index 89ea1ff6466..af469b5f833 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx
@@ -1,7 +1,7 @@
 import {LinkIcon, TrashIcon} from '@sanity/icons'
-import {Menu, MenuButton} from '@sanity/ui'
+import {Menu} from '@sanity/ui'
 import React from 'react'
-import {MenuItem} from '../../../../../ui'
+import {MenuButton, MenuItem} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 import {AssetMenuAction} from '../types'
 import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts
index 73ff3de7587..5954603a7a0 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts
@@ -1,6 +1,6 @@
-import {Popover, Flex, Card} from '@sanity/ui'
+import {Flex, Card} from '@sanity/ui'
 import styled, {css} from 'styled-components'
-import {Dialog} from '../../../../../ui'
+import {Dialog, Popover} from '../../../../../ui'
 
 export const StyledPopover = styled(Popover)(() => {
   return css`
diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
index 177ad98d4be..0c4ef958bd5 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
@@ -1,11 +1,11 @@
 import {CogIcon, UsersIcon} from '@sanity/icons'
-import {Box, Menu, MenuButton, MenuButtonProps, MenuDivider, Stack, Text} from '@sanity/ui'
+import {Box, Menu, MenuDivider, Stack, Text} from '@sanity/ui'
 import React, {useCallback, useMemo, useState} from 'react'
 import styled from 'styled-components'
 import {StatusButton} from '../../../../components'
 import {useGlobalPresence} from '../../../../store'
 import {useColorScheme} from '../../../colorScheme'
-import {MenuItem} from '../../../../../ui'
+import {MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 import {useWorkspace} from '../../../workspace'
 import {PresenceMenuItem} from './PresenceMenuItem'
diff --git a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
index 3445021bede..68a3de12584 100644
--- a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
@@ -1,8 +1,8 @@
 import {InfoOutlineIcon} from '@sanity/icons'
-import {Menu, MenuButton} from '@sanity/ui'
+import {Menu} from '@sanity/ui'
 import React from 'react'
 import styled from 'styled-components'
-import {Button} from '../../../../../ui'
+import {Button, MenuButton} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 import {useGetHelpResources} from './helper-functions/hooks'
 import {ResourcesMenuItems} from './ResourcesMenuItems'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
index 2b067afc346..dff95633283 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
@@ -1,11 +1,11 @@
 import {SortIcon} from '@sanity/icons'
-import {Card, Flex, Menu, MenuButton, MenuDivider} from '@sanity/ui'
+import {Card, Flex, Menu, MenuDivider} from '@sanity/ui'
 import isEqual from 'lodash/isEqual'
 import React, {useCallback, useId, useMemo} from 'react'
 import styled from 'styled-components'
 import {useTranslation} from '../../../../../i18n'
 import {ORDERINGS} from '../definitions/orderings'
-import {Button, MenuItem} from '../../../../../../ui'
+import {Button, MenuButton, MenuItem} from '../../../../../../ui'
 import {useSearchState} from '../contexts/search/useSearchState'
 import type {SearchOrdering} from '../types'
 
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx
index 7278eb910b3..e8632c8e34b 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx
@@ -1,10 +1,9 @@
 import {AddIcon} from '@sanity/icons'
-import {Popover} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {POPOVER_RADIUS, POPOVER_VERTICAL_MARGIN} from '../../../constants'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import {FilterPopoverWrapper} from '../common/FilterPopoverWrapper'
-import {Button} from '../../../../../../../../ui'
+import {Button, Popover} from '../../../../../../../../ui'
 import {useTranslation} from '../../../../../../../i18n'
 import {AddFilterPopoverContent} from './AddFilterPopoverContent'
 
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx
index 900a4f7c364..95b69422984 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx
@@ -1,11 +1,11 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {Placement, Popover, useClickOutside} from '@sanity/ui'
+import {Placement, useClickOutside} from '@sanity/ui'
 import React, {useCallback, useMemo, useState} from 'react'
 import {POPOVER_RADIUS, POPOVER_VERTICAL_MARGIN} from '../../../constants'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import {documentTypesTruncated} from '../../../utils/documentTypesTruncated'
 import {FilterPopoverWrapper} from '../common/FilterPopoverWrapper'
-import {Button} from '../../../../../../../../ui'
+import {Button, Popover} from '../../../../../../../../ui'
 import {useTranslation} from '../../../../../../../i18n'
 import {DocumentTypesPopoverContent} from './DocumentTypesPopoverContent'
 
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx
index b2b923c6dae..3481873baf3 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx
@@ -3,11 +3,11 @@ import {
   // eslint-disable-next-line no-restricted-imports
   Button, // Button with specific styling and children behavior.
   Card,
-  Popover,
   rem,
 } from '@sanity/ui'
 import React, {KeyboardEvent, useCallback, useState} from 'react'
 import styled from 'styled-components'
+import {Popover} from '../../../../../../../../ui'
 import {POPOVER_RADIUS, POPOVER_VERTICAL_MARGIN} from '../../../constants'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import type {SearchFilter} from '../../../types'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
index 0832b7844fd..6ffec1017c5 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
@@ -1,8 +1,8 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {Inline, Menu, MenuButton, MenuDivider} from '@sanity/ui'
+import {Inline, Menu, MenuDivider} from '@sanity/ui'
 import React, {useCallback, useId} from 'react'
 import {useSearchState} from '../../../contexts/search/useSearchState'
-import {Button, MenuItem} from '../../../../../../../../ui'
+import {Button, MenuButton, MenuItem} from '../../../../../../../../ui'
 import {getFilterDefinition} from '../../../definitions/filters'
 import {getOperatorDefinition, SearchOperatorDefinition} from '../../../definitions/operators'
 import type {SearchFilter} from '../../../types'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
index a26a8d4bf4c..ab0c34641bc 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
@@ -1,11 +1,11 @@
 import {ChevronDownIcon, ImageIcon, SearchIcon, UndoIcon} from '@sanity/icons'
 import type {AssetFromSource, AssetSource, ReferenceValue} from '@sanity/types'
-import {Box, Flex, Menu, MenuButton, Portal, Stack} from '@sanity/ui'
+import {Box, Flex, Menu, Portal, Stack} from '@sanity/ui'
 import {get, startCase} from 'lodash'
 import React, {useCallback, useEffect, useId, useMemo, useState} from 'react'
 import styled from 'styled-components'
 import {Source} from '../../../../../../../../../config'
-import {Button, MenuItem} from '../../../../../../../../../../ui'
+import {Button, MenuButton, MenuItem} from '../../../../../../../../../../ui'
 import {FileSource, ImageSource} from '../../../../../../../../../form/studio/assetSource'
 import {useClient} from '../../../../../../../../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../../../../../../studioClient'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx
index 16d8a2fcd5d..172952545e1 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx
@@ -1,7 +1,8 @@
 import type {ReferenceValue} from '@sanity/types'
-import {Autocomplete, Box, Flex, Popover, Text} from '@sanity/ui'
+import {Autocomplete, Box, Flex, Text} from '@sanity/ui'
 import React, {forwardRef, ReactElement, useCallback, useId, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
+import {Popover} from '../../../../../../../../../../ui'
 import {useSchema} from '../../../../../../../../../hooks'
 import type {SearchableType, WeightedHit} from '../../../../../../../../../search'
 import {getPublishedId} from '../../../../../../../../../util'
@@ -156,7 +157,6 @@ export const ReferenceAutocomplete = forwardRef(function ReferenceAutocomplete(
       const hasResults = hits && hits.length > 0
       return (
         <Popover
-          arrow={false}
           constrainSize
           content={
             <div ref={contentRef}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
index 357833be439..21046748589 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
@@ -1,6 +1,6 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {isTitledListValue, StringOptions, TitledListValue} from '@sanity/types'
-import {Menu, MenuButton} from '@sanity/ui'
+import {Menu} from '@sanity/ui'
 import {capitalize, uniq} from 'lodash'
 import React, {useCallback, useId, useMemo} from 'react'
 import {useSchema} from '../../../../../../../../../hooks'
@@ -8,7 +8,7 @@ import {isNonNullable} from '../../../../../../../../../util'
 import {useSearchState} from '../../../../../contexts/search/useSearchState'
 import {OperatorInputComponentProps} from '../../../../../definitions/operators/operatorTypes'
 import {getSchemaField} from '../../../../../utils/getSchemaField'
-import {Button, MenuItem} from '../../../../../../../../../../ui'
+import {Button, MenuButton, MenuItem} from '../../../../../../../../../../ui'
 import {useTranslation} from '../../../../../../../../../i18n'
 
 interface TitledListValueGroup extends Omit<TitledListValue<number | string>, 'title'> {
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
index 1c925fe3931..13a45ba364e 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -4,8 +4,6 @@ import {
   Card,
   Flex,
   Menu,
-  MenuButton,
-  MenuButtonProps,
   MenuDivider,
   Stack,
   Text,
@@ -24,7 +22,7 @@ import {
 } from '../../../colorScheme'
 import {useWorkspace} from '../../../workspace'
 import {userHasRole} from '../../../../util/userHasRole'
-import {MenuItem, Tooltip} from '../../../../../ui'
+import {MenuButton, MenuButtonProps, MenuItem, Tooltip} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 import {LoginProviderLogo} from './LoginProviderLogo'
 import {LocaleMenu} from './LocaleMenu'
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
index 6f8dadb5f2c..1882e7182aa 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
@@ -3,9 +3,7 @@ import {
   Box,
   // eslint-disable-next-line no-restricted-imports
   Button,
-  MenuButton,
   Menu,
-  MenuButtonProps,
   Flex,
   Card,
   Text,
@@ -15,7 +13,7 @@ import styled from 'styled-components'
 import {useTranslation} from '../../../../i18n'
 import {useActiveWorkspace} from '../../../activeWorkspaceMatcher'
 import {useWorkspaces} from '../../../workspaces'
-import {MenuItem} from '../../../../../ui'
+import {MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui'
 import {SanityLogo} from '../SanityLogo'
 import {useWorkspaceAuthStates} from './hooks'
 import {STATE_TITLES, WorkspacePreviewIcon} from './WorkspacePreview'
diff --git a/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx b/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx
index 873297b9145..9431ca0c3d7 100644
--- a/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx
+++ b/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx
@@ -1,7 +1,6 @@
 import React, {useCallback, useMemo, useRef, useState} from 'react'
 import {
   Flex,
-  Popover,
   Stack,
   Text,
   useClickOutside,
@@ -18,7 +17,7 @@ import {
   CommentIcon,
   MentionOptionsHookValue,
 } from '../../src'
-import {Button, Tooltip} from '../../../../ui'
+import {Button, Popover, Tooltip} from '../../../../ui'
 import {CurrentUser, PortableTextBlock} from 'sanity'
 
 const ContentStack = styled(Stack)`
diff --git a/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx b/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx
index 886763f406c..4e35b5e1c38 100644
--- a/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx
+++ b/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx
@@ -1,9 +1,9 @@
 import {CheckmarkIcon, ChevronDownIcon, DoubleChevronRightIcon} from '@sanity/icons'
-import {Card, Flex, Menu, MenuButton, Text} from '@sanity/ui'
+import {Card, Flex, Menu, Text} from '@sanity/ui'
 import {startCase} from 'lodash'
 import React, {forwardRef, useCallback} from 'react'
 import styled from 'styled-components'
-import {MenuItem, Button} from '../../../../ui'
+import {Button, MenuButton, MenuItem} from '../../../../ui'
 import {CommentStatus} from '../../src'
 import {BetaBadge} from 'sanity'
 
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
index dfdb69f7d1a..61d7e033cea 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
@@ -1,16 +1,8 @@
 import React from 'react'
 import {CheckmarkCircleIcon, UndoIcon, EditIcon, TrashIcon, LinkIcon} from '@sanity/icons'
-import {
-  MenuButtonProps,
-  TooltipDelayGroupProvider,
-  MenuButton,
-  Menu,
-  MenuDivider,
-  Card,
-  Flex,
-} from '@sanity/ui'
+import {Card, Flex, Menu, MenuDivider, TooltipDelayGroupProvider} from '@sanity/ui'
 import styled from 'styled-components'
-import {Button, MenuItem} from '../../../../../ui'
+import {Button, MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui'
 import {CommentStatus} from '../../types'
 import {TOOLTIP_DELAY_PROPS} from '../../../../../ui/tooltip/constants'
 import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
diff --git a/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx b/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx
index d6ac7bdccd2..cc127c87825 100644
--- a/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx
+++ b/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx
@@ -1,7 +1,7 @@
-import {Box, Flex, Popover, PopoverProps, Stack, Text} from '@sanity/ui'
+import {Box, Flex, Stack, Text} from '@sanity/ui'
 import React from 'react'
 import styled, {keyframes} from 'styled-components'
-import {Button} from '../../../../../ui'
+import {Button, Popover, PopoverProps} from '../../../../../ui'
 
 const Root = styled(Box)`
   max-width: 280px;
diff --git a/packages/sanity/src/desk/comments/src/components/pte/comment-input/Editable.tsx b/packages/sanity/src/desk/comments/src/components/pte/comment-input/Editable.tsx
index 0bc59720ea2..777e0bc38b9 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/comment-input/Editable.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/comment-input/Editable.tsx
@@ -1,5 +1,5 @@
 import React, {KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {Popover, PopoverProps, useClickOutside} from '@sanity/ui'
+import {useClickOutside} from '@sanity/ui'
 import {
   EditorSelection,
   PortableTextEditable,
@@ -8,6 +8,7 @@ import {
 import styled, {css} from 'styled-components'
 import {isEqual} from 'lodash'
 import {isPortableTextSpan, isPortableTextTextBlock} from '@sanity/types'
+import {Popover, PopoverProps} from '../../../../../../ui'
 import {MentionsMenu, MentionsMenuHandle} from '../../mentions'
 import {renderBlock, renderChild} from '../render'
 import {useCommentInput} from './useCommentInput'
diff --git a/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx b/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
index 5f78ea22327..aedec2d2709 100644
--- a/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
@@ -1,5 +1,6 @@
-import {Menu, MenuButton, PopoverProps} from '@sanity/ui'
+import {Menu} from '@sanity/ui'
 import React, {useId} from 'react'
+import {MenuButton, PopoverProps} from '../../../ui'
 import {ContextMenuButton} from '../../../ui/contextMenuButton'
 import {_PaneMenuItem, _PaneMenuNode} from './types'
 import {PaneMenuButtonItem} from './PaneMenuButtonItem'
diff --git a/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx b/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx
index 1966d421123..4cd054e7320 100644
--- a/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx
@@ -1,11 +1,11 @@
 import React, {MouseEvent, useCallback, useId} from 'react'
-import {Menu, MenuButton} from '@sanity/ui'
+import {Menu} from '@sanity/ui'
 import {UnknownIcon} from '@sanity/icons'
 import {Intent} from '../../structureBuilder'
-import {Button} from '../../../ui'
+import {Button, MenuButton} from '../../../ui'
 import {_PaneMenuGroup, _PaneMenuItem} from './types'
 import {PaneMenuButtonItem} from './PaneMenuButtonItem'
-import {TooltipOfDisabled, StatusButton, useI18nText} from 'sanity'
+import {StatusButton, useI18nText} from 'sanity'
 import {useIntentLink} from 'sanity/router'
 
 function getDisabledReason(node: _PaneMenuItem) {
diff --git a/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx b/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx
index d3ab184a261..5ced84c3983 100644
--- a/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx
@@ -1,8 +1,8 @@
 import {CheckmarkIcon} from '@sanity/icons'
-import {MenuDivider, PopoverProps, Text} from '@sanity/ui'
+import {MenuDivider, Text} from '@sanity/ui'
 import React, {useCallback, MouseEvent} from 'react'
 import {Intent} from '../../structureBuilder'
-import {MenuGroup, MenuItem} from '../../../ui'
+import {MenuGroup, MenuItem, PopoverProps} from '../../../ui'
 import {_PaneMenuItem, _PaneMenuNode} from './types'
 import {TooltipOfDisabled, useGetI18nText, useI18nText} from 'sanity'
 import {useIntentLink} from 'sanity/router'
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
index 87a44aea1c0..88ad93a58be 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
@@ -1,7 +1,7 @@
 import {PublishIcon} from '@sanity/icons'
-import {Flex, Menu, MenuButton, MenuButtonProps, Stack, useToast} from '@sanity/ui'
+import {Flex, Menu, Stack, useToast} from '@sanity/ui'
 import React, {useCallback} from 'react'
-import {Button, MenuItem} from '../../../../../../ui'
+import {Button, MenuButton, MenuButtonProps, MenuItem} from '../../../../../../ui'
 import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
 
 const MENU_BUTTON_POPOVER_PROPS: MenuButtonProps['popover'] = {
diff --git a/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx b/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
index df3ccca31bf..a47be6dcf81 100644
--- a/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
+++ b/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
@@ -1,8 +1,8 @@
 import {AddIcon} from '@sanity/icons'
 import React, {useMemo, forwardRef} from 'react'
-import {Menu, MenuButton, PopoverProps} from '@sanity/ui'
+import {Menu} from '@sanity/ui'
 import {Schema} from '@sanity/types'
-import {Button, MenuItem} from '../../../ui'
+import {Button, MenuButton, PopoverProps, MenuItem} from '../../../ui'
 import {IntentButton} from '../IntentButton'
 import {structureLocaleNamespace} from '../../i18n'
 import {InsufficientPermissionsMessageTooltip} from './InsufficientPermissionsMessageTooltip'
diff --git a/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx b/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
index c08cb4a3a4f..e7b523c72b5 100644
--- a/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
+++ b/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
@@ -2,9 +2,9 @@
 /* eslint-disable i18next/no-literal-string */
 import React, {useCallback, useState} from 'react'
 import {CheckmarkIcon, LaunchIcon} from '@sanity/icons'
-import {Flex, Grid, Popover, Stack, Text} from '@sanity/ui'
+import {Flex, Grid, Stack, Text} from '@sanity/ui'
 import {generateHelpUrl} from '@sanity/generate-help-url'
-import {Button} from '../../ui'
+import {Button, Popover} from '../../ui'
 import {useDeskRenameOnboarding} from './onboardingStore'
 
 const RENAME_ANNOUNCEMENT_URL = generateHelpUrl('desk-is-now-structure')
diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
index be9609f39d8..f5f760f14ae 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
@@ -1,6 +1,6 @@
-import {Menu, MenuButton, PopoverProps, Text} from '@sanity/ui'
+import {Menu, Text} from '@sanity/ui'
 import React, {useCallback, useState, useMemo, useId} from 'react'
-import {MenuItem, Tooltip} from '../../../../ui'
+import {MenuButton, MenuItem, PopoverProps, Tooltip} from '../../../../ui'
 import {ContextMenuButton} from '../../../../ui/contextMenuButton'
 import {structureLocaleNamespace} from '../../../i18n'
 import {ActionStateDialog} from './ActionStateDialog'
diff --git a/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx b/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx
index e1f4b00995c..b7b9bd28f62 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx
@@ -1,16 +1,7 @@
-import {
-  Box,
-  Flex,
-  Grid,
-  Popover,
-  Text,
-  useClickOutside,
-  useGlobalKeyDown,
-  useLayer,
-} from '@sanity/ui'
+import {Box, Flex, Grid, Text, useClickOutside, useGlobalKeyDown, useLayer} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {structureLocaleNamespace} from '../../../../i18n'
-import {Button} from '../../../../../ui'
+import {Button, Popover} from '../../../../../ui'
 import {POPOVER_FALLBACK_PLACEMENTS} from './constants'
 import {DocumentActionConfirmDialogProps, useTranslation} from 'sanity'
 
diff --git a/packages/sanity/src/desk/panes/document/statusBar/dialogs/PopoverDialog.tsx b/packages/sanity/src/desk/panes/document/statusBar/dialogs/PopoverDialog.tsx
index bae3a9faf4a..e6aba90aeed 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/dialogs/PopoverDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/dialogs/PopoverDialog.tsx
@@ -1,5 +1,6 @@
-import {Popover, useClickOutside, useGlobalKeyDown, useLayer} from '@sanity/ui'
+import {useClickOutside, useGlobalKeyDown, useLayer} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
+import {Popover} from '../../../../../ui'
 import {POPOVER_FALLBACK_PLACEMENTS} from './constants'
 import {DocumentActionPopoverDialogProps} from 'sanity'
 
diff --git a/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx b/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx
index da8fc77d78d..a8b9735a57f 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx
@@ -1,9 +1,9 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {Placement, Popover, useClickOutside, useGlobalKeyDown, useToast} from '@sanity/ui'
+import {Placement, useClickOutside, useGlobalKeyDown, useToast} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import styled from 'styled-components'
 import {useDocumentPane} from '../useDocumentPane'
-import {Button} from '../../../../ui'
+import {Button, Popover} from '../../../../ui'
 import {TimelineError} from './TimelineError'
 import {Timeline} from './timeline'
 import {TIMELINE_ITEM_I18N_KEY_MAPPING} from './timelineI18n'
diff --git a/packages/sanity/src/ui/button/Button.tsx b/packages/sanity/src/ui/button/Button.tsx
index 9e5a65cef53..bffa05a73a5 100644
--- a/packages/sanity/src/ui/button/Button.tsx
+++ b/packages/sanity/src/ui/button/Button.tsx
@@ -54,10 +54,7 @@ const TooltipButtonWrapper = styled.span`
   display: inline-flex;
 `
 /**
- * Studio UI <Button>.
- *
- * Studio UI components are opinionated `@sanity/ui` components meant for internal use only.
- * Props and options are intentionally limited to ensure consistency and ease of use.
+ * Customized Sanity UI <Button> with pre-defined layout options.
  *
  * @internal
  */
diff --git a/packages/sanity/src/ui/conditionalWrapper/ConditionalWrapper.tsx b/packages/sanity/src/ui/conditionalWrapper/ConditionalWrapper.tsx
index 05f1ec6f82a..23d04fda7de 100644
--- a/packages/sanity/src/ui/conditionalWrapper/ConditionalWrapper.tsx
+++ b/packages/sanity/src/ui/conditionalWrapper/ConditionalWrapper.tsx
@@ -1,5 +1,10 @@
 export type ConditionalWrapperRenderWrapperCallback = (children: React.ReactNode) => React.ReactNode
 
+/**
+ * A helper component that conditionally wraps its children in a wrapper component.
+ *
+ * @internal
+ */
 export function ConditionalWrapper({
   children,
   condition,
diff --git a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
index b96acb91cb1..564f3e7e956 100644
--- a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
+++ b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
@@ -3,12 +3,19 @@ import React, {HTMLProps, forwardRef} from 'react'
 import {useTranslation} from '../../core'
 import {Button, ButtonProps} from '../button'
 
-interface ContextMenuButtonProps
-  extends Pick<ButtonProps, 'mode' | 'paddingY' | 'size' | 'tone' | 'tooltipProps'>,
-    Pick<HTMLProps<HTMLButtonElement>, 'disabled' | 'hidden' | 'onClick'> {}
+type ContextMenuButtonProps = Pick<
+  ButtonProps,
+  'mode' | 'paddingY' | 'size' | 'tone' | 'tooltipProps'
+>
 
+/**
+ * Simple context menu button (with horizontal ellipsis icon) with shared localization.
+ *
+ * @internal
+ */
 export const ContextMenuButton = forwardRef(function ContextMenuButton(
-  props: ContextMenuButtonProps,
+  props: ContextMenuButtonProps &
+    Pick<HTMLProps<HTMLButtonElement>, 'disabled' | 'hidden' | 'onClick'>,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {mode = 'bleed', tooltipProps, tone, ...rest} = props
diff --git a/packages/sanity/src/ui/dialog/Dialog.tsx b/packages/sanity/src/ui/dialog/Dialog.tsx
index 9e2d9518319..91386a9a5d1 100644
--- a/packages/sanity/src/ui/dialog/Dialog.tsx
+++ b/packages/sanity/src/ui/dialog/Dialog.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-imports */
 import {
-  Button,
+  Button as UIButton,
   Flex,
   Dialog as UIDialog,
   DialogProps as UIDialogProps,
@@ -11,23 +11,21 @@ import React, {ComponentProps, forwardRef} from 'react'
 import {useTranslation} from 'react-i18next'
 
 /** @internal */
-export interface DialogProps
-  extends Pick<
-      UIDialogProps,
-      | '__unstable_autoFocus'
-      | '__unstable_hideCloseButton'
-      | 'contentRef'
-      | 'header'
-      | 'id'
-      | 'onActivate'
-      | 'onClickOutside'
-      | 'onClose'
-      | 'portal'
-      | 'position'
-      | 'scheme'
-      | 'width'
-    >,
-    Pick<React.HTMLProps<HTMLDivElement>, 'onDragEnter'> {
+export type DialogProps = Pick<
+  UIDialogProps,
+  | '__unstable_autoFocus'
+  | '__unstable_hideCloseButton'
+  | 'contentRef'
+  | 'header'
+  | 'id'
+  | 'onActivate'
+  | 'onClickOutside'
+  | 'onClose'
+  | 'portal'
+  | 'position'
+  | 'scheme'
+  | 'width'
+> & {
   /**
    * Dialog body height.
    * Set this to 'fill' (i.e. 100%) if you want overflow body content to be contained
@@ -36,24 +34,28 @@ export interface DialogProps
   bodyHeight?: BoxHeight
   children?: React.ReactNode
   footer?: {
-    // TODO: When `@sanity/ui` has `Button` component, use those props instead.
-    // TODO: Omit style-specific props, e.g. fontSize, padding etc
-    cancelButton?: ComponentProps<typeof Button>
-    confirmButton?: ComponentProps<typeof Button>
+    cancelButton?: Omit<ComponentProps<typeof UIButton>, 'fontSize' | 'padding'>
+    confirmButton?: Omit<ComponentProps<typeof UIButton>, 'fontSize' | 'padding'>
   }
+  /**
+   * If enabled, removes all default padding from dialog content.
+   */
   padding?: boolean
 }
 
 /**
- * Studio UI <Dialog>.
- *
- * Studio UI components are opinionated `@sanity/ui` components meant for internal use only.
- * Props and options are intentionally limited to ensure consistency and ease of use.
+ * Customized Sanity UI <Dialog> that enforces an opinionated footer layout with a max of two buttons (confirm and cancel).
  *
  * @internal
  */
 export const Dialog = forwardRef(function Dialog(
-  {bodyHeight, children, footer, padding = true, ...props}: DialogProps,
+  {
+    bodyHeight,
+    children,
+    footer,
+    padding = true,
+    ...props
+  }: DialogProps & Pick<React.HTMLProps<HTMLDivElement>, 'onDragEnter'>,
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {t} = useTranslation()
@@ -67,7 +69,7 @@ export const Dialog = forwardRef(function Dialog(
         (footer?.confirmButton || footer?.cancelButton) && (
           <Flex width="full" gap={3} justify="flex-end" padding={3}>
             {props.onClose && (
-              <Button
+              <UIButton
                 mode="bleed"
                 padding={2}
                 text={t('common.dialog.cancel-button.text')}
@@ -77,7 +79,7 @@ export const Dialog = forwardRef(function Dialog(
               />
             )}
             {footer.confirmButton && (
-              <Button
+              <UIButton
                 mode="default"
                 padding={2}
                 text={t('common.dialog.confirm-button.text')}
diff --git a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
index 409e1482f77..126e6027e8c 100644
--- a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
+++ b/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
@@ -14,6 +14,16 @@ const StyledText = styled(Text)`
   white-space: nowrap;
 `
 
+/**
+ * Displays document status indicating both last published and edited dates in either relative (the default)
+ * or absolute formats.
+ *
+ * These can be displayed in a single or multi-line (the default) lockups.
+ *
+ * Example: `**Published Oct 16 2023** Edited 8m ago`
+ *
+ * @internal
+ */
 export function DocumentStatus({absoluteDate, draft, published, singleLine}: DocumentStatusProps) {
   const draftUpdatedAt = draft && '_updatedAt' in draft ? draft._updatedAt : ''
   const publishedUpdatedAt = published && '_updatedAt' in published ? published._updatedAt : ''
diff --git a/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx b/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
index 3cc26d7f759..2a11e08c166 100644
--- a/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
+++ b/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
@@ -44,6 +44,15 @@ const Root = styled(Text)<{
   `
 })
 
+/**
+ * Renders a dot indicating the current document status.
+ *
+ * - Green (primary) for published documents with no edits
+ * - Yellow (caution) for published documents with edits
+ * - Gray (default) for unpublished documents (with or without edits)
+ *
+ * @internal
+ */
 export function DocumentStatusIndicator({
   draft,
   hidePublishedStatus,
diff --git a/packages/sanity/src/ui/index.ts b/packages/sanity/src/ui/index.ts
index fb7b4385ea6..e4688eff1dc 100644
--- a/packages/sanity/src/ui/index.ts
+++ b/packages/sanity/src/ui/index.ts
@@ -1,7 +1,9 @@
 export * from './button'
 export * from './dialog'
+export * from './menuButton'
 export * from './menuGroup'
 export * from './menuItem'
+export * from './popover'
 export * from './tab'
 export * from './tooltip'
 
diff --git a/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx b/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
index adf111ea661..9554755bb5b 100644
--- a/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
+++ b/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
@@ -117,6 +117,8 @@ const StyledText = styled(Text)`
 /**
  * A generic loading container which displays a spinner and text.
  * The spinner won't initially be visible and fades in after a short delay.
+ *
+ * @internal
  */
 export function LoadingBlock({fill, showText, title}: LoadingTestProps) {
   return (
diff --git a/packages/sanity/src/ui/menuButton/MenuButton.tsx b/packages/sanity/src/ui/menuButton/MenuButton.tsx
new file mode 100644
index 00000000000..90f87f68e66
--- /dev/null
+++ b/packages/sanity/src/ui/menuButton/MenuButton.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable no-restricted-imports */
+import {
+  PopoverProps,
+  MenuButton as UIMenuButton,
+  MenuButtonProps as UIMenuButtonProps,
+} from '@sanity/ui'
+import React, {forwardRef} from 'react'
+
+/** @internal */
+export type MenuButtonProps = Omit<UIMenuButtonProps, 'popover'> & {
+  popover?: Omit<PopoverProps, 'animate' | 'content' | 'open'>
+}
+
+/**
+ * Customized Sanity UI <MenuButton> that enforces popover animation.
+ *
+ * @internal
+ */
+export const MenuButton = forwardRef(function MenuButton(
+  props: MenuButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  return (
+    <UIMenuButton
+      {...props}
+      ref={ref}
+      popover={{
+        ...props.popover,
+        animate: true,
+      }}
+    />
+  )
+})
diff --git a/packages/sanity/src/ui/menuButton/index.ts b/packages/sanity/src/ui/menuButton/index.ts
new file mode 100644
index 00000000000..6ddeec49b29
--- /dev/null
+++ b/packages/sanity/src/ui/menuButton/index.ts
@@ -0,0 +1 @@
+export * from './MenuButton'
diff --git a/packages/sanity/src/ui/menuGroup/MenuGroup.tsx b/packages/sanity/src/ui/menuGroup/MenuGroup.tsx
index c16b62f33b2..6bb5a975407 100644
--- a/packages/sanity/src/ui/menuGroup/MenuGroup.tsx
+++ b/packages/sanity/src/ui/menuGroup/MenuGroup.tsx
@@ -3,17 +3,16 @@ import {MenuGroup as UIMenuGroup, MenuGroupProps as UIMenuGroupProps} from '@san
 import React from 'react'
 
 /** @internal */
-export type MenuGroupProps = Pick<UIMenuGroupProps, 'icon' | 'popover' | 'text' | 'tone'> &
-  Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'tabIndex'>
+export type MenuGroupProps = Pick<UIMenuGroupProps, 'icon' | 'popover' | 'text' | 'tone'>
 
 /**
- * Studio UI <MenuGroup>.
- *
- * Studio UI components are opinionated `@sanity/ui` components meant for internal use only.
- * Props and options are intentionally limited to ensure consistency and ease of use.
+ * Customized Sanity UI <MenuGroup> component with pre-defined layout options.
  *
  * @internal
  */
-export const MenuGroup = (props: MenuGroupProps) => {
+export const MenuGroup = (
+  props: MenuGroupProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'tabIndex'>,
+) => {
   return <UIMenuGroup {...props} fontSize={1} padding={3} />
 }
diff --git a/packages/sanity/src/ui/menuItem/MenuItem.tsx b/packages/sanity/src/ui/menuItem/MenuItem.tsx
index a161ade5e2d..c3e6351ca9d 100644
--- a/packages/sanity/src/ui/menuItem/MenuItem.tsx
+++ b/packages/sanity/src/ui/menuItem/MenuItem.tsx
@@ -21,26 +21,22 @@ const FONT_SIZE = 1
 export type MenuItemProps = Pick<
   UIMenuItemProps,
   'as' | 'icon' | 'iconRight' | 'pressed' | 'selected' | 'text' | 'tone' | 'hotkeys'
-> &
-  Omit<
-    React.HTMLProps<HTMLDivElement>,
-    'as' | 'height' | 'ref' | 'selected' | 'tabIndex' | 'size'
-  > & {
-    badgeText?: string
-    /**
-     * Usage of `children` is not supported, import `MenuItem` from `@sanity/ui` instead.
-     */
-    children?: undefined
-    /**
-     * Previews should be 25x25.
-     */
-    preview?: React.ReactNode
-    /**
-     * Allows to add wrappers to the menu item, e.g. `Tooltip`.
-     */
-    renderMenuItem?: (menuItem: React.JSX.Element) => React.ReactNode
-    tooltipProps?: TooltipProps | null
-  }
+> & {
+  badgeText?: string
+  /**
+   * Usage of `children` is not supported, import `MenuItem` from `@sanity/ui` instead.
+   */
+  children?: undefined
+  /**
+   * Previews should be 25x25.
+   */
+  preview?: React.ReactNode
+  /**
+   * Allows to add wrappers to the menu item, e.g. `Tooltip`.
+   */
+  renderMenuItem?: (menuItem: React.JSX.Element) => React.ReactNode
+  tooltipProps?: TooltipProps | null
+}
 
 const PreviewWrapper = styled(Box)`
   height: 25px;
@@ -49,10 +45,10 @@ const PreviewWrapper = styled(Box)`
 `
 
 /**
- * Studio UI <MenuItem>.
+ * Customized Sanity UI <MenuItem> that restricts usage of `children` to encourage simple,
+ * single line menu items.
  *
- * Studio UI components are opinionated `@sanity/ui` components meant for internal use only.
- * Props and options are intentionally limited to ensure consistency and ease of use.
+ * It also accepts a prop to attach tooltips as well as custom badges too.
  *
  * @internal
  */
@@ -69,7 +65,11 @@ export const MenuItem = forwardRef(function MenuItem(
     text,
     tooltipProps,
     ...rest
-  }: MenuItemProps,
+  }: MenuItemProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'ref' | 'selected' | 'tabIndex' | 'size'
+    >,
   ref: React.Ref<HTMLDivElement>,
 ) {
   const menuItemContent = useMemo(() => {
diff --git a/packages/sanity/src/ui/popover/Popover.tsx b/packages/sanity/src/ui/popover/Popover.tsx
new file mode 100644
index 00000000000..496dc634bb9
--- /dev/null
+++ b/packages/sanity/src/ui/popover/Popover.tsx
@@ -0,0 +1,21 @@
+/* eslint-disable no-restricted-imports */
+import {Popover as UIPopover, PopoverProps as UIPopoverProps} from '@sanity/ui'
+import React, {forwardRef} from 'react'
+
+/** @internal */
+export type PopoverProps = Omit<UIPopoverProps, 'animate'>
+
+/**
+ * Customized Sanity UI <Popover> that forces `animate=true`
+ *
+ * All Popovers in the studio should be animated.
+ *
+ * @internal
+ */
+export const Popover = forwardRef(function Popover(
+  props: PopoverProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return <UIPopover {...props} animate ref={ref} />
+})
diff --git a/packages/sanity/src/ui/popover/index.ts b/packages/sanity/src/ui/popover/index.ts
new file mode 100644
index 00000000000..b2f899f9197
--- /dev/null
+++ b/packages/sanity/src/ui/popover/index.ts
@@ -0,0 +1 @@
+export * from './Popover'
diff --git a/packages/sanity/src/ui/spacerButton/SpacerButton.tsx b/packages/sanity/src/ui/spacerButton/SpacerButton.tsx
index 8382746ef46..ff06ae40c3e 100644
--- a/packages/sanity/src/ui/spacerButton/SpacerButton.tsx
+++ b/packages/sanity/src/ui/spacerButton/SpacerButton.tsx
@@ -6,9 +6,13 @@ interface SpacerButtonProps {
 }
 
 /**
- * A temporary component used to simplify spacing in components with
- * conditional buttons.
- * TODO: find a more elegant solve to this layout shift problem
+ * This renders a visually hidden <Button> component that is still contributes
+ * to document layout.
+ *
+ * It's used to simplify padding in Sanity UI components that contain buttons which
+ * may not always be rendered.
+ *
+ * TODO: let's find a more elegant solve to this layout shift problem
  *
  * @internal
  */
diff --git a/packages/sanity/src/ui/tab/Tab.tsx b/packages/sanity/src/ui/tab/Tab.tsx
index 917f9fe83d1..36dc4f39db0 100644
--- a/packages/sanity/src/ui/tab/Tab.tsx
+++ b/packages/sanity/src/ui/tab/Tab.tsx
@@ -23,10 +23,7 @@ const DEFAULT_TAB_PROPS = {
 }
 
 /**
- * Studio UI <Tab>.
- *
- * Studio UI components are opinionated `@sanity/ui` components meant for internal use only.
- * Props and options are intentionally limited to ensure consistency and ease of use.
+ * Customized Sanity UI <Tab> with limited layout options.
  *
  * @internal
  */
diff --git a/packages/sanity/src/ui/tooltip/Tooltip.tsx b/packages/sanity/src/ui/tooltip/Tooltip.tsx
index 7227948a9f7..c0cb5897b48 100644
--- a/packages/sanity/src/ui/tooltip/Tooltip.tsx
+++ b/packages/sanity/src/ui/tooltip/Tooltip.tsx
@@ -27,10 +27,12 @@ const TOOLTIP_SHARED_PROPS: UITooltipProps = {
 }
 
 /**
- * Studio UI <Tooltip>.
+ * Customized Sanity UI <Tooltip> with limited layout options and support for showing hotkeys.
  *
- * Studio UI components are opinionated `@sanity/ui` components meant for internal use only.
- * Props and options are intentionally limited to ensure consistency and ease of use.
+ * In just about all cases, its strongly recommended that you pass a string to the `content` prop.
+ * This helps simplify i18n and encourages short and concise.
+ *
+ * Passing ReactNode values to `content` is supported, but discouraged.
  *
  * @internal
  */

From 8b84b09fb570a5626bc353c7b6e975c1174133d6 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 14 Dec 2023 02:36:57 +0000
Subject: [PATCH 118/163] refactor: simplify tooltip usage in ActionMenuButton

---
 .../document/statusBar/ActionMenuButton.tsx   | 43 +++++++------------
 packages/sanity/src/ui/menuItem/MenuItem.tsx  |  4 +-
 2 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
index f5f760f14ae..364b65892e7 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
@@ -1,6 +1,6 @@
-import {Menu, Text} from '@sanity/ui'
+import {Menu} from '@sanity/ui'
 import React, {useCallback, useState, useMemo, useId} from 'react'
-import {MenuButton, MenuItem, PopoverProps, Tooltip} from '../../../../ui'
+import {MenuButton, MenuItem, PopoverProps} from '../../../../ui'
 import {ContextMenuButton} from '../../../../ui/contextMenuButton'
 import {structureLocaleNamespace} from '../../../i18n'
 import {ActionStateDialog} from './ActionStateDialog'
@@ -89,37 +89,26 @@ function ActionMenuListItem(props: ActionMenuListItemProps) {
     if (onHandle) onHandle()
   }, [index, onAction, onHandle])
 
-  const menuItemContent = useCallback(
-    (item: React.JSX.Element) => {
-      return (
-        <Tooltip
-          content={<Text size={1}>{actionState.title}</Text>}
-          disabled={!actionState.title}
-          placement="top"
-          portal
-        >
-          {item}
-        </Tooltip>
-      )
-    },
-    [actionState.title],
-  )
+  const hotkeys = useMemo(() => {
+    return actionState.shortcut
+      ? String(actionState.shortcut)
+          .split('+')
+          .map((s) => s.slice(0, 1).toUpperCase() + s.slice(1))
+      : undefined
+  }, [actionState.shortcut])
+
   return (
     <MenuItem
       data-testid={`action-${actionState.label.replace(' ', '')}`}
       disabled={disabled || Boolean(actionState.disabled)}
-      onClick={handleClick}
-      tone={actionState.tone}
+      hotkeys={hotkeys}
       icon={actionState.icon}
+      onClick={handleClick}
       text={actionState.label}
-      hotkeys={
-        actionState.shortcut
-          ? String(actionState.shortcut)
-              .split('+')
-              .map((s) => s.slice(0, 1).toUpperCase() + s.slice(1))
-          : undefined
-      }
-      renderMenuItem={menuItemContent}
+      tone={actionState.tone}
+      tooltipProps={{
+        content: actionState.title,
+      }}
     />
   )
 }
diff --git a/packages/sanity/src/ui/menuItem/MenuItem.tsx b/packages/sanity/src/ui/menuItem/MenuItem.tsx
index c3e6351ca9d..fa52274f390 100644
--- a/packages/sanity/src/ui/menuItem/MenuItem.tsx
+++ b/packages/sanity/src/ui/menuItem/MenuItem.tsx
@@ -32,9 +32,9 @@ export type MenuItemProps = Pick<
    */
   preview?: React.ReactNode
   /**
-   * Allows to add wrappers to the menu item, e.g. `Tooltip`.
+   * Optional render callback which receives menu item content.
    */
-  renderMenuItem?: (menuItem: React.JSX.Element) => React.ReactNode
+  renderMenuItem?: (menuItemContent: React.JSX.Element) => React.ReactNode
   tooltipProps?: TooltipProps | null
 }
 

From 6aa5a573bfe08907dfb66ab3fa836deb31e8ebe7 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 14 Dec 2023 02:46:24 +0000
Subject: [PATCH 119/163] feat: detach global search position from header

---
 .../components/navbar/search/components/SearchPopover.tsx   | 6 +++---
 .../src/core/studio/components/navbar/search/constants.ts   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
index 4574fade5e0..d781ca04f3a 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
@@ -41,7 +41,7 @@ const OVERLAY_VARIANTS: Variants = {
   closed: {opacity: 0},
 }
 
-const Y_POSITION = 8 // px
+const Y_POSITION = 12 // vh
 
 const MotionOverlay = styled(motion.div)`
   background-color: ${({theme}: {theme: Theme}) => theme.sanity.color.base.shadow.umbra};
@@ -57,11 +57,11 @@ const SearchMotionCard = styled(motion(Card))`
   flex-direction: column;
   left: 50%;
   max-height: min(
-    calc(100vh - ${Y_POSITION}px - ${POPOVER_INPUT_PADDING}px),
+    calc(100vh - ${Y_POSITION}vh - ${POPOVER_INPUT_PADDING}px),
     ${POPOVER_MAX_HEIGHT}px
   );
   position: absolute;
-  top: ${Y_POSITION}px;
+  top: ${Y_POSITION}vh;
   width: min(calc(100vw - ${POPOVER_INPUT_PADDING * 2}px), ${POPOVER_MAX_WIDTH}px);
 `
 
diff --git a/packages/sanity/src/core/studio/components/navbar/search/constants.ts b/packages/sanity/src/core/studio/components/navbar/search/constants.ts
index 2c1482c45de..ded8295067d 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/constants.ts
+++ b/packages/sanity/src/core/studio/components/navbar/search/constants.ts
@@ -17,7 +17,7 @@ export const SEARCH_LIMIT = 1000
 export const GLOBAL_SEARCH_KEY = 'k'
 export const GLOBAL_SEARCH_KEY_MODIFIER = IS_MAC ? 'Cmd' : 'Ctrl'
 
-export const POPOVER_INPUT_PADDING = studioTheme.space[1] // px
+export const POPOVER_INPUT_PADDING = studioTheme.space[4] // px
 export const POPOVER_MAX_HEIGHT = 735 // px
 export const POPOVER_MAX_WIDTH = 800 // px
 

From 6c3415f7f7b95f75c86509e6558560dd9e4ef35a Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Thu, 14 Dec 2023 09:08:15 +0100
Subject: [PATCH 120/163] fix(facelift): update focus ring offset in
 WithFocusRing cards

---
 .../form/components/withFocusRing/withFocusRing.ts  | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/sanity/src/core/form/components/withFocusRing/withFocusRing.ts b/packages/sanity/src/core/form/components/withFocusRing/withFocusRing.ts
index 4ed5ef53e3b..296032ab125 100644
--- a/packages/sanity/src/core/form/components/withFocusRing/withFocusRing.ts
+++ b/packages/sanity/src/core/form/components/withFocusRing/withFocusRing.ts
@@ -7,19 +7,24 @@ export function withFocusRing<Props>(component: ComponentType<Props>) {
   return styled(component)<Props & {$border?: boolean}>(
     (props: {theme: Theme; $border?: boolean}) => {
       const border = {width: props.$border ? 1 : 0, color: 'var(--card-border-color)'}
-
       return css`
         --card-focus-box-shadow: ${focusRingBorderStyle(border)};
 
-        border-radius: ${rem(props.theme.sanity.radius[1])};
+        border-radius: ${rem(props.theme.sanity.v2?.radius[1] ?? props.theme.sanity.radius[1])};
         outline: none;
         box-shadow: var(--card-focus-box-shadow);
 
         &:focus {
           --card-focus-box-shadow: ${focusRingStyle({
-            base: props.theme.sanity.color.base,
             border,
-            focusRing: props.theme.sanity.focusRing,
+            base: {bg: props.theme.sanity.v2?.color.bg ?? props.theme.sanity.color.base.bg},
+            focusRing: {
+              // An offset of 0 is needed to avoid the focus ring overlap the border of the inner items, the theme has an offset of -1
+              // Detected in empty array items.
+              offset: 0,
+              width:
+                props.theme.sanity.v2?.card.focusRing.width ?? props.theme.sanity.focusRing.width,
+            },
           })};
         }
       `

From 3ac9c8d72ac7ee2a1afd521130cbc76ccc2b8613 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 14 Dec 2023 10:36:55 +0100
Subject: [PATCH 121/163] fixup! fix(studio): update preview components

---
 .../components/previews/_common/Media.styled.ts    | 14 +++++++++++++-
 .../src/core/components/previews/constants.ts      | 12 ++++++------
 .../preview/components/SanityDefaultPreview.tsx    |  7 +------
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/sanity/src/core/components/previews/_common/Media.styled.ts b/packages/sanity/src/core/components/previews/_common/Media.styled.ts
index 9b348234d00..868a261a9c0 100644
--- a/packages/sanity/src/core/components/previews/_common/Media.styled.ts
+++ b/packages/sanity/src/core/components/previews/_common/Media.styled.ts
@@ -1,5 +1,6 @@
 import {rem} from '@sanity/ui'
 import styled, {css} from 'styled-components'
+import {PREVIEW_SIZES} from '../constants'
 import {PreviewLayoutKey, PreviewMediaDimensions} from '../types'
 
 export const MediaWrapper = styled.span<{
@@ -8,9 +9,10 @@ export const MediaWrapper = styled.span<{
   $radius: number
   $responsive: boolean
 }>((props) => {
-  const {$dimensions, $radius, $responsive} = props
+  const {$dimensions, $layout, $radius, $responsive} = props
   const width = $dimensions.width || 0
   const height = $dimensions.width || 0
+  const iconSize = PREVIEW_SIZES[$layout].icon
 
   return css`
     position: relative;
@@ -32,7 +34,17 @@ export const MediaWrapper = styled.span<{
       height: 100%;
       object-fit: contain;
       border-radius: inherit;
+    }
+
+    & svg {
+      display: block;
+      flex: 1;
+      font-size: calc(21 / 16 * 1em);
+    }
+
+    & [data-sanity-icon] {
       display: block;
+      font-size: calc(${iconSize} / 16 * 1em);
     }
 
     & > span[data-border] {
diff --git a/packages/sanity/src/core/components/previews/constants.ts b/packages/sanity/src/core/components/previews/constants.ts
index 2d926e93d71..3f362e3e7ba 100644
--- a/packages/sanity/src/core/components/previews/constants.ts
+++ b/packages/sanity/src/core/components/previews/constants.ts
@@ -8,11 +8,11 @@ export const PREVIEW_SIZES: Record<
   }
 > = {
   block: {
-    icon: 31,
+    icon: 25,
     media: {width: 33, height: 33},
   },
   blockImage: {
-    icon: 45,
+    icon: 25,
     media: {width: 600, height: 400},
   },
   compact: {
@@ -20,19 +20,19 @@ export const PREVIEW_SIZES: Record<
     media: {width: 25, height: 25},
   },
   default: {
-    icon: 25,
+    icon: 21,
     media: {width: 33, height: 33},
   },
   detail: {
-    icon: 45,
-    media: {width: 70, height: 70},
+    icon: 25,
+    media: {width: 73, height: 73},
   },
   inline: {
     icon: 15,
     media: {width: 15, height: 15},
   },
   media: {
-    icon: 45,
+    icon: 25,
     media: {width: 160, height: 160},
   },
 }
diff --git a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
index 6977377ce42..9824c3300f8 100644
--- a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
+++ b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
@@ -14,7 +14,6 @@ import React, {
 import {isValidElementType} from 'react-is'
 import {SanityImageSource} from '@sanity/image-url/lib/types/types'
 import {isImageSource} from '@sanity/asset-utils'
-import {Text} from '@sanity/ui'
 import {Tooltip} from '../../../ui'
 import {PreviewProps} from '../../components/previews'
 import {useClient} from '../../hooks'
@@ -107,11 +106,7 @@ export function SanityDefaultPreview(props: SanityDefaultPreviewProps): ReactEle
     }
 
     // Render fallback icon
-    return (
-      <Text as="span" size={1}>
-        {renderIcon()}
-      </Text>
-    )
+    return renderIcon
   }, [icon, imageUrl, mediaProp, renderIcon, renderMedia, title])
 
   const previewProps: Omit<PreviewProps, 'renderDefault'> = useMemo(

From c8c8844833c8a71b3207dc4dcd6f819e1b685102 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 14 Dec 2023 10:47:40 +0100
Subject: [PATCH 122/163] fix(form): update pte styles

---
 .../inputs/PortableText/Compositor.styles.tsx | 18 +++++++-------
 .../inputs/PortableText/Editor.styles.tsx     |  5 +++-
 .../PortableText/text/TextBlock.styles.ts     | 24 +++++++++++--------
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/PortableText/Compositor.styles.tsx b/packages/sanity/src/core/form/inputs/PortableText/Compositor.styles.tsx
index 2e9f11bdca7..80f776d19e7 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/Compositor.styles.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/Compositor.styles.tsx
@@ -1,13 +1,15 @@
+/* eslint-disable camelcase */
+
 import {Layer} from '@sanity/ui'
 import styled, {css} from 'styled-components'
+import {getTheme_v2} from '@sanity/ui/theme'
 import {focusRingBorderStyle, focusRingStyle} from '../../components/withFocusRing/helpers'
 
-export const Root = styled.div(({theme}) => {
-  const {focusRing, input} = theme.sanity
-  const base = theme.sanity.color.base
-  const color = theme.sanity.color.input
+export const Root = styled.div((props) => {
+  const {color, input, radius} = getTheme_v2(props.theme)
+
   const border = {
-    color: color.default.enabled.border,
+    color: color.input.default.enabled.border,
     width: input.border.width,
   }
 
@@ -32,15 +34,15 @@ export const Root = styled.div(({theme}) => {
       bottom: 0;
       box-shadow: var(--input-box-shadow);
       z-index: 2;
-      border-radius: 1px;
+      border-radius: ${radius[2]}px;
       pointer-events: none;
     }
 
     &:not([data-read-only])[data-focused] [data-border] {
       --input-box-shadow: ${focusRingStyle({
-        base,
+        base: color,
         border,
-        focusRing,
+        focusRing: input.text.focusRing,
       })};
     }
   `
diff --git a/packages/sanity/src/core/form/inputs/PortableText/Editor.styles.tsx b/packages/sanity/src/core/form/inputs/PortableText/Editor.styles.tsx
index 2481642795a..5ca92d3a478 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/Editor.styles.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/Editor.styles.tsx
@@ -1,5 +1,8 @@
+/* eslint-disable camelcase */
+
 import {Card, Container, rem} from '@sanity/ui'
 import styled, {css} from 'styled-components'
+import {getTheme_v2} from '@sanity/ui/theme'
 import {ScrollContainer} from '../../../components/scroll'
 import {createListName, TEXT_LEVELS} from './text'
 
@@ -128,7 +131,7 @@ export const EditableWrapper = styled(Card)<{$isFullscreen: boolean; $readOnly?:
       pointer-events: none;
       border: 1px solid var(--card-focus-ring-color) !important;
       height: 0px !important;
-      border-radius: 1px;
+      border-radius: ${(props) => getTheme_v2(props.theme).radius[2]}px;
       margin-top: -3px;
       left: calc(
         ${({$isFullscreen, theme}) =>
diff --git a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.styles.ts b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.styles.ts
index 5dbb949da47..031f0d4afeb 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.styles.ts
+++ b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.styles.ts
@@ -1,6 +1,9 @@
+/* eslint-disable camelcase */
+
 import {hues} from '@sanity/color'
 import {Box, Flex, Theme} from '@sanity/ui'
 import styled, {css} from 'styled-components'
+import {getTheme_v2, rgba} from '@sanity/ui/theme'
 import {TEXT_BULLET_MARKERS, TEXT_NUMBER_FORMATS} from './constants'
 import {createListName} from './helpers'
 
@@ -9,15 +12,16 @@ interface TextBlockStyleProps {
 }
 
 function textBlockStyle(props: TextBlockStyleProps & {theme: Theme}) {
-  const {$level, theme} = props
-  const {color, fonts, radius, space} = theme.sanity
+  const {$level} = props
+  const {color, font, radius, space} = getTheme_v2(props.theme)
+
   const numberMarker = TEXT_NUMBER_FORMATS[($level - 1) % TEXT_NUMBER_FORMATS.length]
   const bulletMarker = TEXT_BULLET_MARKERS[($level - 1) % TEXT_BULLET_MARKERS.length]
 
   return css`
     --marker-bg-color: transparent;
 
-    mix-blend-mode: ${color.dark ? 'screen' : 'multiply'};
+    mix-blend-mode: ${color._dark ? 'screen' : 'multiply'};
     position: relative;
 
     & > [data-ui='TextBlock_inner'] {
@@ -39,17 +43,17 @@ function textBlockStyle(props: TextBlockStyleProps & {theme: Theme}) {
     }
 
     &[data-markers] {
-      --marker-bg-color: ${color.dark ? hues.purple[950].hex : hues.purple[50].hex};
+      --marker-bg-color: ${color._dark ? hues.purple[950].hex : hues.purple[50].hex};
     }
 
     &[data-warning] {
-      --card-border-color: ${color.muted.caution.enabled.border};
-      --marker-bg-color: ${color.muted.caution.hovered.bg};
+      --card-border-color: ${color.button.ghost.caution.enabled.border};
+      --marker-bg-color: ${color.button.ghost.caution.hovered.bg};
     }
 
     &[data-error] {
-      --card-border-color: ${color.muted.critical.enabled.border};
-      --marker-bg-color: ${color.muted.critical.hovered.bg};
+      --card-border-color: ${color.button.ghost.critical.enabled.border};
+      --marker-bg-color: ${color.button.ghost.critical.hovered.bg};
     }
 
     & [data-list-prefix] {
@@ -85,11 +89,11 @@ function textBlockStyle(props: TextBlockStyleProps & {theme: Theme}) {
       overflow-wrap: anywhere;
       text-transform: none;
       white-space: pre-wrap;
-      font-family: ${fonts.text.family};
+      font-family: ${font.text.family};
       flex: 1;
 
       *::selection {
-        background-color: ${color.selectable?.primary.pressed.bg};
+        background-color: ${rgba(color.focusRing, 0.3)};
       }
     }
   `

From 7779bf8e254e864aa32c140054064cb5eca3b6fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 14 Dec 2023 10:52:13 +0100
Subject: [PATCH 123/163] fix(form): update border radius

---
 .../form/components/ActivateOnFocus/ActivateOnFocus.tsx   | 2 +-
 .../src/core/form/components/formField/FormFieldSet.tsx   | 2 +-
 .../core/form/components/formField/FormFieldSetLegend.tsx | 2 +-
 packages/sanity/src/core/form/inputs/BooleanInput.tsx     | 2 +-
 packages/sanity/src/core/form/inputs/SelectInput.tsx      | 2 +-
 .../src/core/form/inputs/files/FileInput/FileInput.tsx    | 7 ++++---
 .../src/core/form/inputs/files/ImageInput/ImageInput.tsx  | 8 ++------
 .../src/core/form/studio/assetSource/file/AssetRow.tsx    | 4 +++-
 8 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/sanity/src/core/form/components/ActivateOnFocus/ActivateOnFocus.tsx b/packages/sanity/src/core/form/components/ActivateOnFocus/ActivateOnFocus.tsx
index da452ea9a36..32dac5b8ffa 100644
--- a/packages/sanity/src/core/form/components/ActivateOnFocus/ActivateOnFocus.tsx
+++ b/packages/sanity/src/core/form/components/ActivateOnFocus/ActivateOnFocus.tsx
@@ -92,7 +92,7 @@ export function ActivateOnFocus(props: ActivateOnFocusProps) {
             // Almost all input elements have radius=1, and this component is
             // typically used for overlaying input elements.
             // @todo Consider making `radius` a component property of `ActivateOnFocus`.
-            radius={1}
+            radius={2}
           />
           <ContentContainer>{msg}</ContentContainer>
         </FlexContainer>
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx b/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx
index 36940955742..e736c75f0aa 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx
@@ -79,7 +79,7 @@ const Content = styled(Box)<{
   return css`
     outline: none;
     border-left: ${$borderLeft ? '1px solid var(--card-border-color)' : undefined};
-    border-radius: ${rem(radius[1])};
+    border-radius: ${rem(radius[2])};
 
     &:focus {
       box-shadow: ${focusRingStyle({base, focusRing: {...focusRing, offset: 2}})};
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldSetLegend.tsx b/packages/sanity/src/core/form/components/formField/FormFieldSetLegend.tsx
index 4ad1dfee69c..e2ebf4fbaac 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldSetLegend.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldSetLegend.tsx
@@ -31,7 +31,7 @@ const ToggleButton = styled(Flex).attrs({forwardedAs: 'button'})((props: {theme:
     -webkit-font-smoothing: inherit;
     font: inherit;
     outline: none;
-    border-radius: ${rem(radius[1])};
+    border-radius: ${rem(radius[2])};
     position: relative;
 
     &:not([hidden]) {
diff --git a/packages/sanity/src/core/form/inputs/BooleanInput.tsx b/packages/sanity/src/core/form/inputs/BooleanInput.tsx
index dd2546c8ec5..d3e6bd2f6a3 100644
--- a/packages/sanity/src/core/form/inputs/BooleanInput.tsx
+++ b/packages/sanity/src/core/form/inputs/BooleanInput.tsx
@@ -30,7 +30,7 @@ export function BooleanInput(props: BooleanInputProps) {
   const tone: CardTone | undefined = readOnly ? 'transparent' : undefined
 
   return (
-    <Card border data-testid="boolean-input" radius={1} tone={tone}>
+    <Card border data-testid="boolean-input" radius={2} tone={tone}>
       <Flex>
         <ZeroLineHeightBox padding={3}>
           <LayoutSpecificInput
diff --git a/packages/sanity/src/core/form/inputs/SelectInput.tsx b/packages/sanity/src/core/form/inputs/SelectInput.tsx
index c9313a7802b..09f8ee2f426 100644
--- a/packages/sanity/src/core/form/inputs/SelectInput.tsx
+++ b/packages/sanity/src/core/form/inputs/SelectInput.tsx
@@ -130,7 +130,7 @@ const RadioSelect = forwardRef(function RadioSelect(
 
   const Layout = direction === 'horizontal' ? Inline : Stack
   return (
-    <Card border padding={3} radius={1}>
+    <Card border padding={3} radius={2}>
       <Layout space={3} role="group">
         {items.map((item, index) => (
           <RadioSelectItem
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
index 82bb1a34447..8cd458ca12e 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
@@ -467,7 +467,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
     const rejectedFilesCount = hoveringFiles.length - acceptedFiles.length
 
     return (
-      <CardOverlay tone={tone}>
+      <CardOverlay radius={2} tone={tone}>
         <FlexContainer align="center" justify="center" gap={2} flex={1}>
           <PlaceholderText
             readOnly={readOnly}
@@ -550,12 +550,13 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
     const accept = get(schemaType, 'options.accept', '')
 
     return (
-      <div style={{padding: 1}}>
+      <>
         <Card
           tone={readOnly ? 'transparent' : 'inherit'}
           border
           paddingX={3}
           paddingY={2}
+          radius={2}
           style={
             hoveringFiles.length === 0
               ? {borderStyle: 'dashed'}
@@ -574,7 +575,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
             directUploads={directUploads}
           />
         </Card>
-      </div>
+      </>
     )
   }
 
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
index 4f4bd13e324..60b4ea0e2d5 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
@@ -618,11 +618,8 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
           border
           paddingX={3}
           paddingY={2}
-          style={
-            hoveringFiles.length === 0
-              ? {borderStyle: 'dashed'}
-              : {borderStyle: 'dashed', borderColor: 'transparent'}
-          }
+          radius={2}
+          style={hoveringFiles.length === 0 ? {} : {borderColor: 'transparent'}}
         >
           <UploadPlaceholder
             browse={this.renderBrowser()}
@@ -761,7 +758,6 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
               onFilesOut={this.handleFilesOut}
               tone={this.getFileTone()}
               $border={hasValueOrUpload || hoveringFiles.length > 0}
-              style={{padding: 1}}
               sizing="border"
               radius={2}
             >
diff --git a/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx b/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx
index 3691da4c556..7f51247f4b9 100644
--- a/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx
@@ -71,7 +71,7 @@ const RowButton = styled(Button)<RowProps>`
   &:before {
     z-index: 0;
     pointer-events: none;
-    border-radius: 0.1875rem;
+    border-radius: inherit;
   }
 
   ${(props) =>
@@ -258,6 +258,7 @@ export const AssetRow = (props: RowProps) => {
             data-id={_id}
             onClick={onClick}
             paddingY={1}
+            radius={2}
           >
             <Flex gap={2} flex={2} align="center">
               <Card as={CardIconWrapper} padding={2} tone="transparent" radius={2}>
@@ -372,6 +373,7 @@ export const AssetRow = (props: RowProps) => {
             filename: originalFilename,
           })}
           isSelected={isSelected}
+          radius={2}
         >
           <CustomFlex
             gap={2}

From 28d28fdfb53a340235ebab0621b8f23e604374bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 14 Dec 2023 10:52:28 +0100
Subject: [PATCH 124/163] refactor(form): use theme v2

---
 .../components/withFocusRing/withFocusRing.ts    | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/sanity/src/core/form/components/withFocusRing/withFocusRing.ts b/packages/sanity/src/core/form/components/withFocusRing/withFocusRing.ts
index 296032ab125..055921b9792 100644
--- a/packages/sanity/src/core/form/components/withFocusRing/withFocusRing.ts
+++ b/packages/sanity/src/core/form/components/withFocusRing/withFocusRing.ts
@@ -1,29 +1,35 @@
+/* eslint-disable camelcase */
+
 import styled, {css} from 'styled-components'
 import {rem, Theme} from '@sanity/ui'
 import {ComponentType} from 'react'
+import {getTheme_v2} from '@sanity/ui/theme'
 import {focusRingBorderStyle, focusRingStyle} from './helpers'
 
 export function withFocusRing<Props>(component: ComponentType<Props>) {
   return styled(component)<Props & {$border?: boolean}>(
     (props: {theme: Theme; $border?: boolean}) => {
-      const border = {width: props.$border ? 1 : 0, color: 'var(--card-border-color)'}
+      const {$border} = props
+      const {card, color, radius} = getTheme_v2(props.theme)
+
+      const border = {width: $border ? 1 : 0, color: 'var(--card-border-color)'}
+
       return css`
         --card-focus-box-shadow: ${focusRingBorderStyle(border)};
 
-        border-radius: ${rem(props.theme.sanity.v2?.radius[1] ?? props.theme.sanity.radius[1])};
+        border-radius: ${rem(radius[1])};
         outline: none;
         box-shadow: var(--card-focus-box-shadow);
 
         &:focus {
           --card-focus-box-shadow: ${focusRingStyle({
             border,
-            base: {bg: props.theme.sanity.v2?.color.bg ?? props.theme.sanity.color.base.bg},
+            base: color,
             focusRing: {
+              ...card.focusRing,
               // An offset of 0 is needed to avoid the focus ring overlap the border of the inner items, the theme has an offset of -1
               // Detected in empty array items.
               offset: 0,
-              width:
-                props.theme.sanity.v2?.card.focusRing.width ?? props.theme.sanity.focusRing.width,
             },
           })};
         }

From 36311bd343209f17e619972e2fb94f0068518211 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 14 Dec 2023 10:53:39 +0100
Subject: [PATCH 125/163] fix(studio): render smaller avatars in document
 previews

---
 .../core/presence/DocumentPreviewPresence.tsx | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx b/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
index 7a22fbf322b..a0fd1efc666 100644
--- a/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
+++ b/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
@@ -1,7 +1,10 @@
-import {AvatarStack, Box, Card, Text} from '@sanity/ui'
+/* eslint-disable camelcase */
+
+import {AvatarStack} from '@sanity/ui'
 import React, {useMemo} from 'react'
-import styled, {css, useTheme} from 'styled-components'
-import {usePreviewCard, UserAvatar} from '../components'
+import styled, {css} from 'styled-components'
+import {getTheme_v2} from '@sanity/ui/theme'
+import {UserAvatar} from '../components'
 import {DocumentPresence} from '../store'
 import {isNonNullable} from '../util'
 import {Tooltip, TooltipProps} from '../../ui'
@@ -15,13 +18,11 @@ const PRESENCE_MENU_POPOVER_PROPS: TooltipProps = {
   portal: true,
 }
 
-const AvatarStackCard = styled(Card)<{$selected?: boolean}>(({theme, $selected}) => {
-  const {color} = theme.sanity
+const AvatarStackBox = styled.div((props) => {
+  const {space} = getTheme_v2(props.theme)
 
   return css`
-    --card-bg-color: inherit;
-    --card-fg-color: inherit;
-    --card-hairline-hard-color: ${$selected ? color.selectable?.default.pressed.border : undefined};
+    margin: ${0 - space[1]}px;
   `
 })
 
@@ -40,9 +41,6 @@ const getTooltipText = (presence: Omit<DocumentPresence, 'path'>[]) => {
 /** @internal */
 export function DocumentPreviewPresence(props: DocumentPreviewPresenceProps) {
   const {presence} = props
-  const {color} = useTheme().sanity
-  const invertedScheme = color.dark ? 'light' : 'dark'
-  const {selected} = usePreviewCard()
 
   const uniqueUsers = useMemo(
     () =>
@@ -58,13 +56,13 @@ export function DocumentPreviewPresence(props: DocumentPreviewPresenceProps) {
 
   return (
     <Tooltip content={tooltipContent} {...PRESENCE_MENU_POPOVER_PROPS}>
-      <AvatarStackCard scheme={selected ? invertedScheme : undefined} $selected={selected}>
-        <AvatarStack maxLength={2} aria-label={getTooltipText(uniqueUsers)}>
+      <AvatarStackBox>
+        <AvatarStack maxLength={2} aria-label={getTooltipText(uniqueUsers)} size={0}>
           {uniqueUsers.map((item) => (
-            <UserAvatar key={item.user.id} user={item.user} />
+            <UserAvatar key={item.user.id} size={0} user={item.user} />
           ))}
         </AvatarStack>
-      </AvatarStackCard>
+      </AvatarStackBox>
     </Tooltip>
   )
 }

From ca0f791a95de6260eb70aa3544a9e6da01b44a5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 14 Dec 2023 10:54:00 +0100
Subject: [PATCH 126/163] fix(studio): set global selection color

---
 packages/sanity/src/core/studio/GlobalStyle.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/studio/GlobalStyle.tsx b/packages/sanity/src/core/studio/GlobalStyle.tsx
index 500fe7d632c..a2b8122dd18 100644
--- a/packages/sanity/src/core/studio/GlobalStyle.tsx
+++ b/packages/sanity/src/core/studio/GlobalStyle.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 
-import {getTheme_v2} from '@sanity/ui/theme'
+import {getTheme_v2, rgba} from '@sanity/ui/theme'
 import {createGlobalStyle, css} from 'styled-components'
 
 const SCROLLBAR_SIZE = 12 // px
@@ -29,6 +29,10 @@ export const GlobalStyle = createGlobalStyle((props) => {
       background: var(--card-bg-color, transparent);
     }
 
+    *::selection {
+      background-color: ${rgba(color.focusRing, 0.3)};
+    }
+
     html {
       background-color: ${color.bg};
     }

From 83fe9f8d7a35b5fb9b4fbbc6913a15e99a9139eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 14 Dec 2023 11:49:47 +0100
Subject: [PATCH 127/163] fix(studio): increase button size in mobile search
 overlay

---
 .../studio/components/navbar/search/components/SearchHeader.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
index 542f22ed3de..f312e5c0a21 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
@@ -87,6 +87,7 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
             icon={ArrowLeftIcon}
             mode="bleed"
             onClick={onClose}
+            size="large"
             tooltipProps={{content: t('search.action.close-search-aria-label')}}
           />
         )}
@@ -125,6 +126,7 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
               mode="bleed"
               onClick={handleFiltersToggle}
               selected={filtersVisible}
+              size="large"
               tone={notificationBadgeVisible ? 'primary' : undefined}
               tooltipProps={{
                 content: t('search.action.toggle-filters-label', {

From d85f6fa840de85801ce60e304a41787ffd845461 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 14 Dec 2023 12:13:46 +0100
Subject: [PATCH 128/163] fix(deps): update `@sanity/ui`

---
 dev/design-studio/package.json                     | 2 +-
 dev/embedded-studio/package.json                   | 2 +-
 dev/studio-e2e-testing/package.json                | 2 +-
 dev/test-studio/package.json                       | 2 +-
 examples/ecommerce-studio/package.json             | 2 +-
 packages/@sanity/portable-text-editor/package.json | 2 +-
 packages/@sanity/vision/package.json               | 2 +-
 packages/sanity/package.json                       | 2 +-
 yarn.lock                                          | 8 ++++----
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index 18d576b466b..ca2213fc97e 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.5",
+    "@sanity/ui": "2.0.0-beta.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/embedded-studio/package.json b/dev/embedded-studio/package.json
index 218c99b19ba..889ff2c0791 100644
--- a/dev/embedded-studio/package.json
+++ b/dev/embedded-studio/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "2.0.0-beta.5",
+    "@sanity/ui": "2.0.0-beta.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/studio-e2e-testing/package.json b/dev/studio-e2e-testing/package.json
index f4ca6d20bb0..bb8bdf86d40 100644
--- a/dev/studio-e2e-testing/package.json
+++ b/dev/studio-e2e-testing/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@sanity/google-maps-input": "^3.0.1",
     "@sanity/icons": "^2.4.0",
-    "@sanity/ui": "2.0.0-beta.5",
+    "@sanity/ui": "2.0.0-beta.6",
     "@sanity/vision": "3.22.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index e3dc06e8ead..1f57bc5e8b9 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -36,7 +36,7 @@
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.5",
+    "@sanity/ui": "2.0.0-beta.6",
     "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
diff --git a/examples/ecommerce-studio/package.json b/examples/ecommerce-studio/package.json
index 8b2b8ff631e..ead00b1b0b2 100644
--- a/examples/ecommerce-studio/package.json
+++ b/examples/ecommerce-studio/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.5",
+    "@sanity/ui": "2.0.0-beta.6",
     "react": "^18.2.0",
     "react-barcode": "^1.4.1",
     "react-dom": "^18.2.0",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index c51b2ecca32..4e8cf690af2 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "2.0.0-beta.5",
+    "@sanity/ui": "2.0.0-beta.6",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index faa10e59edb..85e83cd43a3 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -67,7 +67,7 @@
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "3.0.0-beta.8",
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.5",
+    "@sanity/ui": "2.0.0-beta.6",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index 90ff3d43d60..c967e1b0826 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -175,7 +175,7 @@
     "@sanity/schema": "3.22.1",
     "@sanity/telemetry": "^0.7.3",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.5",
+    "@sanity/ui": "2.0.0-beta.6",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
diff --git a/yarn.lock b/yarn.lock
index e0b90633e71..d20c55ab82f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3876,10 +3876,10 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@2.0.0-beta.5":
-  version "2.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.5.tgz#c4b11d76a1ff230516ed1a3dd9d9f2421cd8007f"
-  integrity sha512-PrhjUpexxRT8kbb3Ct/YQEalOPRKXEEvfTP2PQ9TDa1XxK4GbJEEhvsSBqBR1lV8hXuJATWuUNNxZZBpHBpSXg==
+"@sanity/ui@2.0.0-beta.6":
+  version "2.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.6.tgz#baa80daab75a357b68e270d69cfadc4f17c90bfd"
+  integrity sha512-dmgEaGEwzmFoLg/kqEBClxNPEwKXoKjSwIGkeZ/e06EhtL53YtqIbSgtnUZ+1hcvHHoUe/Ek0DJx9r41UkurZw==
   dependencies:
     "@floating-ui/react-dom" "^2.0.4"
     "@sanity/color" "3.0.0-beta.8"

From 15e626cf3fe1ed6769f0a32af54421f3143981ea Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 14 Dec 2023 11:21:28 +0000
Subject: [PATCH 129/163] fix: use updated background color for global search
 popover

---
 .../components/navbar/search/components/SearchPopover.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
index d781ca04f3a..861bd141e38 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
@@ -1,4 +1,4 @@
-import {Card, Portal, Theme, useClickOutside, useLayer} from '@sanity/ui'
+import {Card, Portal, useClickOutside, useLayer} from '@sanity/ui'
 import {AnimatePresence, motion, Transition, Variants} from 'framer-motion'
 import React, {useCallback, useRef, useState} from 'react'
 import FocusLock from 'react-focus-lock'
@@ -43,8 +43,8 @@ const OVERLAY_VARIANTS: Variants = {
 
 const Y_POSITION = 12 // vh
 
-const MotionOverlay = styled(motion.div)`
-  background-color: ${({theme}: {theme: Theme}) => theme.sanity.color.base.shadow.umbra};
+const MotionOverlay = styled(motion(Card))`
+  background-color: var(--card-backdrop-color);
   bottom: 0;
   left: 0;
   position: absolute;

From cff87b2710e642b3fea3594730b1881c37d4a9d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 14 Dec 2023 12:24:40 +0100
Subject: [PATCH 130/163] fix(studio): update default studio theme

---
 packages/sanity/src/core/theme/_legacy/helpers.ts | 2 +-
 packages/sanity/src/core/theme/index.ts           | 9 ++++-----
 packages/sanity/src/core/theme/types.ts           | 2 +-
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/sanity/src/core/theme/_legacy/helpers.ts b/packages/sanity/src/core/theme/_legacy/helpers.ts
index 9998ddd2070..28ba6219207 100644
--- a/packages/sanity/src/core/theme/_legacy/helpers.ts
+++ b/packages/sanity/src/core/theme/_legacy/helpers.ts
@@ -1,4 +1,4 @@
-import {parseColor, rgbToHex, screen, multiply} from '@sanity/ui'
+import {parseColor, rgbToHex, screen, multiply} from '@sanity/ui/theme'
 import {getLuminance, mix, parseToRgb, rgb} from 'polished'
 import {LegacyThemeTints} from './types'
 
diff --git a/packages/sanity/src/core/theme/index.ts b/packages/sanity/src/core/theme/index.ts
index c363e171c00..930df348e45 100644
--- a/packages/sanity/src/core/theme/index.ts
+++ b/packages/sanity/src/core/theme/index.ts
@@ -1,11 +1,10 @@
-import {studioTheme} from '@sanity/ui'
+import {buildTheme} from '@sanity/ui/theme'
 import {StudioTheme} from './types'
 
 export * from './_legacy'
 export * from './types'
 
 /** @internal */
-export const defaultTheme: StudioTheme = {
-  ...studioTheme,
-  focusRing: {offset: -1, width: 2},
-}
+export const defaultTheme: StudioTheme = buildTheme({
+  container: [320, 640, 960, 1280, 1600, 1920],
+})
diff --git a/packages/sanity/src/core/theme/types.ts b/packages/sanity/src/core/theme/types.ts
index b9aa11442ed..993f167185b 100644
--- a/packages/sanity/src/core/theme/types.ts
+++ b/packages/sanity/src/core/theme/types.ts
@@ -1,4 +1,4 @@
-import type {RootTheme, ThemeColorSchemeKey} from '@sanity/ui'
+import type {RootTheme, ThemeColorSchemeKey} from '@sanity/ui/theme'
 
 /** @public */
 export interface StudioTheme extends RootTheme {

From 22b37d428441d0034076aa1fd1e27434c69fbca8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 14 Dec 2023 12:25:01 +0100
Subject: [PATCH 131/163] fix(studio): align navbar menus

---
 .../core/studio/components/navbar/presence/PresenceMenu.tsx    | 3 +--
 .../studio/components/navbar/presence/PresenceMenuItem.tsx     | 2 +-
 .../src/core/studio/components/navbar/userMenu/UserMenu.tsx    | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
index 0c4ef958bd5..8e24de7676b 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
@@ -11,8 +11,7 @@ import {useWorkspace} from '../../../workspace'
 import {PresenceMenuItem} from './PresenceMenuItem'
 
 const StyledMenu = styled(Menu)`
-  max-width: 350px;
-  min-width: 250px;
+  max-width: 260px;
 `
 
 const FooterStack = styled(Stack)`
diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
index 8fb3470acb1..13ebee42efa 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
@@ -69,7 +69,7 @@ export const PresenceMenuItem = memo(function PresenceMenuItem(props: PresenceLi
       data-as="a"
       disabled={!hasLink}
       onFocus={handleFocus}
-      preview={<UserAvatar key={presence.user.id} size={0} user={presence.user} />}
+      preview={<UserAvatar key={presence.user.id} size={1} user={presence.user} />}
       ref={setMenuItemElement}
       text={presence.user.displayName}
       tooltipProps={
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
index 13a45ba364e..4437c5d9b9e 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -74,7 +74,7 @@ export function UserMenu() {
 
   const popoverProps: MenuButtonProps['popover'] = useMemo(
     () => ({
-      placement: 'bottom-end',
+      placement: 'bottom',
       portal: true,
       preventOverflow: true,
       scheme: scheme,

From 55cdb10dc1db31c18e103a2c07bb39f92f807e53 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Thu, 14 Dec 2023 14:33:51 +0100
Subject: [PATCH 132/163] fix(deps): update @sanity/ui

---
 dev/design-studio/package.json                     | 2 +-
 dev/embedded-studio/package.json                   | 2 +-
 dev/studio-e2e-testing/package.json                | 2 +-
 dev/test-studio/package.json                       | 2 +-
 examples/ecommerce-studio/package.json             | 2 +-
 packages/@sanity/portable-text-editor/package.json | 2 +-
 packages/@sanity/vision/package.json               | 2 +-
 packages/sanity/package.json                       | 2 +-
 yarn.lock                                          | 8 ++++----
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index ca2213fc97e..b22ea1fc7bb 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.6",
+    "@sanity/ui": "2.0.0-beta.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/embedded-studio/package.json b/dev/embedded-studio/package.json
index 889ff2c0791..0849a9820c3 100644
--- a/dev/embedded-studio/package.json
+++ b/dev/embedded-studio/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "2.0.0-beta.6",
+    "@sanity/ui": "2.0.0-beta.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/studio-e2e-testing/package.json b/dev/studio-e2e-testing/package.json
index bb8bdf86d40..d8f05a5b0ab 100644
--- a/dev/studio-e2e-testing/package.json
+++ b/dev/studio-e2e-testing/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@sanity/google-maps-input": "^3.0.1",
     "@sanity/icons": "^2.4.0",
-    "@sanity/ui": "2.0.0-beta.6",
+    "@sanity/ui": "2.0.0-beta.7",
     "@sanity/vision": "3.22.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index 1f57bc5e8b9..36def88bbee 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -36,7 +36,7 @@
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.6",
+    "@sanity/ui": "2.0.0-beta.7",
     "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
diff --git a/examples/ecommerce-studio/package.json b/examples/ecommerce-studio/package.json
index ead00b1b0b2..4e8c6315608 100644
--- a/examples/ecommerce-studio/package.json
+++ b/examples/ecommerce-studio/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.6",
+    "@sanity/ui": "2.0.0-beta.7",
     "react": "^18.2.0",
     "react-barcode": "^1.4.1",
     "react-dom": "^18.2.0",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index 4e8cf690af2..0f6d02e8648 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "2.0.0-beta.6",
+    "@sanity/ui": "2.0.0-beta.7",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index 85e83cd43a3..132e1bbd010 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -67,7 +67,7 @@
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "3.0.0-beta.8",
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.6",
+    "@sanity/ui": "2.0.0-beta.7",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index c967e1b0826..117d07d8b99 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -175,7 +175,7 @@
     "@sanity/schema": "3.22.1",
     "@sanity/telemetry": "^0.7.3",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.6",
+    "@sanity/ui": "2.0.0-beta.7",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
diff --git a/yarn.lock b/yarn.lock
index d20c55ab82f..b8744e88933 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3876,10 +3876,10 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@2.0.0-beta.6":
-  version "2.0.0-beta.6"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.6.tgz#baa80daab75a357b68e270d69cfadc4f17c90bfd"
-  integrity sha512-dmgEaGEwzmFoLg/kqEBClxNPEwKXoKjSwIGkeZ/e06EhtL53YtqIbSgtnUZ+1hcvHHoUe/Ek0DJx9r41UkurZw==
+"@sanity/ui@2.0.0-beta.7":
+  version "2.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.7.tgz#4de128f7a3a9484d875b079d3ca97988c7f4fd56"
+  integrity sha512-Gdi3unougOqzwTXGO46eQ6N//F1z1uAWumtNPxBa4sRE5q5KAYm7umVjxGMRWmTT5pCZ8mHGAMtoZRuyS4MYdA==
   dependencies:
     "@floating-ui/react-dom" "^2.0.4"
     "@sanity/color" "3.0.0-beta.8"

From 447f32bf904c77a4552dde5749f4de8c6f7be9bf Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Thu, 14 Dec 2023 14:59:11 +0100
Subject: [PATCH 133/163] fix(facelift): remove duplicated const after rebase

---
 .../src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
index a6c3b3f1011..a697bee72fb 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
@@ -70,7 +70,6 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
     PortableTextEditor.focus(editor)
   }, [editor])
 
-  const {t} = useTranslation()
   const tooltipPlacement = isFullscreen ? 'bottom' : 'top'
 
   const children = useMemo(

From 3c1004a2bf446a6918e812a74e13874e71e49cd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Thu, 14 Dec 2023 21:39:50 +0100
Subject: [PATCH 134/163] fix(deps): update dependencies

---
 dev/design-studio/package.json                 |  2 +-
 dev/embedded-studio/package.json               |  2 +-
 dev/studio-e2e-testing/package.json            |  2 +-
 dev/test-studio/package.json                   |  4 ++--
 examples/ecommerce-studio/package.json         |  2 +-
 .../@sanity/portable-text-editor/package.json  |  2 +-
 packages/@sanity/vision/package.json           |  4 ++--
 packages/sanity/package.json                   |  4 ++--
 yarn.lock                                      | 18 +++++++++---------
 9 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index b22ea1fc7bb..c6a3203b78e 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.7",
+    "@sanity/ui": "2.0.0-beta.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/embedded-studio/package.json b/dev/embedded-studio/package.json
index 0849a9820c3..b4a9123c09f 100644
--- a/dev/embedded-studio/package.json
+++ b/dev/embedded-studio/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "2.0.0-beta.7",
+    "@sanity/ui": "2.0.0-beta.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/studio-e2e-testing/package.json b/dev/studio-e2e-testing/package.json
index d8f05a5b0ab..cebe7bfc365 100644
--- a/dev/studio-e2e-testing/package.json
+++ b/dev/studio-e2e-testing/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@sanity/google-maps-input": "^3.0.1",
     "@sanity/icons": "^2.4.0",
-    "@sanity/ui": "2.0.0-beta.7",
+    "@sanity/ui": "2.0.0-beta.8",
     "@sanity/vision": "3.22.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index 36def88bbee..489b9130170 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -23,7 +23,7 @@
     "@sanity/assist": "^1.0.8",
     "@sanity/block-tools": "3.22.1",
     "@sanity/client": "^6.10.0",
-    "@sanity/color": "3.0.0-beta.8",
+    "@sanity/color": "3.0.0-beta.9",
     "@sanity/google-maps-input": "^3.0.1",
     "@sanity/icons": "^2.8.0",
     "@sanity/image-url": "^1.0.2",
@@ -36,7 +36,7 @@
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.7",
+    "@sanity/ui": "2.0.0-beta.8",
     "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
diff --git a/examples/ecommerce-studio/package.json b/examples/ecommerce-studio/package.json
index 4e8c6315608..598f5751883 100644
--- a/examples/ecommerce-studio/package.json
+++ b/examples/ecommerce-studio/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.7",
+    "@sanity/ui": "2.0.0-beta.8",
     "react": "^18.2.0",
     "react-barcode": "^1.4.1",
     "react-dom": "^18.2.0",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index 0f6d02e8648..99825d77ad8 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "2.0.0-beta.7",
+    "@sanity/ui": "2.0.0-beta.8",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index 132e1bbd010..5ed9391c20c 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -65,9 +65,9 @@
     "@lezer/highlight": "^1.0.0",
     "@rexxars/react-json-inspector": "^8.0.1",
     "@rexxars/react-split-pane": "^0.1.93",
-    "@sanity/color": "3.0.0-beta.8",
+    "@sanity/color": "3.0.0-beta.9",
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.7",
+    "@sanity/ui": "2.0.0-beta.8",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index 117d07d8b99..313b90d933f 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -159,7 +159,7 @@
     "@sanity/block-tools": "3.22.1",
     "@sanity/cli": "3.22.1",
     "@sanity/client": "^6.10.0",
-    "@sanity/color": "3.0.0-beta.8",
+    "@sanity/color": "3.0.0-beta.9",
     "@sanity/diff": "3.22.1",
     "@sanity/diff-match-patch": "^3.1.1",
     "@sanity/eventsource": "^5.0.0",
@@ -175,7 +175,7 @@
     "@sanity/schema": "3.22.1",
     "@sanity/telemetry": "^0.7.3",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.7",
+    "@sanity/ui": "2.0.0-beta.8",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
diff --git a/yarn.lock b/yarn.lock
index b8744e88933..54e17b38294 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3591,10 +3591,10 @@
     get-it "^8.4.4"
     rxjs "^7.0.0"
 
-"@sanity/color@3.0.0-beta.8":
-  version "3.0.0-beta.8"
-  resolved "https://registry.yarnpkg.com/@sanity/color/-/color-3.0.0-beta.8.tgz#33ee87b7cb59e308c5b5fe2ff4bb074223529acd"
-  integrity sha512-jsbef6oey7PlCHmU0/0MABtumcF8eqvxCtMxzkqBNobbSTHqGN+DpZjYX5wBCWF8SvAvSzdf/6tQiX3BSd8Q1Q==
+"@sanity/color@3.0.0-beta.9":
+  version "3.0.0-beta.9"
+  resolved "https://registry.yarnpkg.com/@sanity/color/-/color-3.0.0-beta.9.tgz#e33a2138f71ca8cec2c264fb9ac44c680be50a9c"
+  integrity sha512-Mk7FRDtxz/U2SRlRM0BvUI62jU26W62aYsipaKFt/dk0rOyYa9yzfaojSM/QmW0E4W/nOw74RBA/HrapXUw+2Q==
 
 "@sanity/color@^2.2.5":
   version "2.2.5"
@@ -3876,13 +3876,13 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@2.0.0-beta.7":
-  version "2.0.0-beta.7"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.7.tgz#4de128f7a3a9484d875b079d3ca97988c7f4fd56"
-  integrity sha512-Gdi3unougOqzwTXGO46eQ6N//F1z1uAWumtNPxBa4sRE5q5KAYm7umVjxGMRWmTT5pCZ8mHGAMtoZRuyS4MYdA==
+"@sanity/ui@2.0.0-beta.8":
+  version "2.0.0-beta.8"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.8.tgz#8ff9c9099d34dc972aa2610fb15050a9d9a7dd96"
+  integrity sha512-igEuPhP0Lq03CEdA1EIg/SZh2BfOuJST7sfwR1t5CYZcszMJnd111prddvT7KW++7CDPT5+mWj/M8AVddqSEwg==
   dependencies:
     "@floating-ui/react-dom" "^2.0.4"
-    "@sanity/color" "3.0.0-beta.8"
+    "@sanity/color" "3.0.0-beta.9"
     "@sanity/icons" "^2.7.0"
     csstype "^3.1.2"
     framer-motion "^10.16.5"

From c111071828f1ceca78a185e820a486822340e1d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Fri, 15 Dec 2023 06:17:11 +0100
Subject: [PATCH 135/163] fix(preview): use icon color

---
 .../sanity/src/core/components/previews/_common/Media.styled.ts  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/sanity/src/core/components/previews/_common/Media.styled.ts b/packages/sanity/src/core/components/previews/_common/Media.styled.ts
index 868a261a9c0..7e22c7608fb 100644
--- a/packages/sanity/src/core/components/previews/_common/Media.styled.ts
+++ b/packages/sanity/src/core/components/previews/_common/Media.styled.ts
@@ -37,6 +37,7 @@ export const MediaWrapper = styled.span<{
     }
 
     & svg {
+      color: var(--card-icon-color);
       display: block;
       flex: 1;
       font-size: calc(21 / 16 * 1em);

From c17aba174bdf4213887de37000257c47a7fc3bcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Fri, 15 Dec 2023 06:17:34 +0100
Subject: [PATCH 136/163] fix(tooltip): use regular font weight

---
 packages/sanity/src/ui/tooltip/Tooltip.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/sanity/src/ui/tooltip/Tooltip.tsx b/packages/sanity/src/ui/tooltip/Tooltip.tsx
index c0cb5897b48..90667470d15 100644
--- a/packages/sanity/src/ui/tooltip/Tooltip.tsx
+++ b/packages/sanity/src/ui/tooltip/Tooltip.tsx
@@ -50,9 +50,7 @@ export const Tooltip = forwardRef(function Tooltip(
           <Flex align="center">
             {content && (
               <Box flex={1} padding={1}>
-                <Text size={1} weight="medium">
-                  {content}
-                </Text>
+                <Text size={1}>{content}</Text>
               </Box>
             )}
             {hotkeys && (

From 34fb020cab48ec34e8ed3d40ffbb7b6be03292e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Fri, 15 Dec 2023 06:24:08 +0100
Subject: [PATCH 137/163] fix(deps): update `@sanity/ui`

---
 dev/design-studio/package.json                     | 2 +-
 dev/embedded-studio/package.json                   | 2 +-
 packages/@sanity/portable-text-editor/package.json | 2 +-
 packages/@sanity/vision/package.json               | 2 +-
 yarn.lock                                          | 8 ++++----
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index c6a3203b78e..7ef28f968fa 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.8",
+    "@sanity/ui": "2.0.0-beta.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/embedded-studio/package.json b/dev/embedded-studio/package.json
index b4a9123c09f..c2b637e2d55 100644
--- a/dev/embedded-studio/package.json
+++ b/dev/embedded-studio/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "2.0.0-beta.8",
+    "@sanity/ui": "2.0.0-beta.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index 99825d77ad8..03dde1bd631 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "2.0.0-beta.8",
+    "@sanity/ui": "2.0.0-beta.11",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index 5ed9391c20c..c4aaa6e3b4a 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -67,7 +67,7 @@
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "3.0.0-beta.9",
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.8",
+    "@sanity/ui": "2.0.0-beta.11",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/yarn.lock b/yarn.lock
index 54e17b38294..94b1be9aea2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3876,10 +3876,10 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@2.0.0-beta.8":
-  version "2.0.0-beta.8"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.8.tgz#8ff9c9099d34dc972aa2610fb15050a9d9a7dd96"
-  integrity sha512-igEuPhP0Lq03CEdA1EIg/SZh2BfOuJST7sfwR1t5CYZcszMJnd111prddvT7KW++7CDPT5+mWj/M8AVddqSEwg==
+"@sanity/ui@2.0.0-beta.11":
+  version "2.0.0-beta.11"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.11.tgz#d448881e2b8018b6431c48b12400d242f4d81068"
+  integrity sha512-VzZ8RZOsE2W0aUmWVM4EH84h8R10VaWu+aKW4zKQqJ4mq/1f4nyp7mETF4zMR/DT2w8Oi5XStcxihedfeU1W3A==
   dependencies:
     "@floating-ui/react-dom" "^2.0.4"
     "@sanity/color" "3.0.0-beta.9"

From 8572585a0214df5070562590ebda413f2b2f71f8 Mon Sep 17 00:00:00 2001
From: Nina Andal Aarvik <nina@sanity.io>
Date: Fri, 15 Dec 2023 13:19:54 +0300
Subject: [PATCH 138/163] fix(desk): add tooltip on menuitem when disabled only
 (#5375)

---
 .../src/desk/panes/document/statusBar/ActionMenuButton.tsx    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
index 364b65892e7..392553a9d23 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
@@ -106,9 +106,7 @@ function ActionMenuListItem(props: ActionMenuListItemProps) {
       onClick={handleClick}
       text={actionState.label}
       tone={actionState.tone}
-      tooltipProps={{
-        content: actionState.title,
-      }}
+      {...(actionState.disabled && {tooltipProps: {content: actionState.title}})}
     />
   )
 }

From 5ce60aa02722b72ea722b1d749164f209dab81b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Fri, 15 Dec 2023 16:08:05 +0100
Subject: [PATCH 139/163] fix(ui): do not show dot on hover

---
 .../DocumentStatusIndicator.tsx                   | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx b/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
index 2a11e08c166..f3c8667055f 100644
--- a/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
+++ b/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
@@ -18,8 +18,9 @@ const Root = styled(Text)<{
   const {$draft, $hidePublishedStatus, $published} = props
 
   return css`
-    display: ${$hidePublishedStatus && $published && !$draft ? 'none' : 'block'};
-    opacity: ${$hidePublishedStatus && $published && !$draft ? 0 : 1};
+    &&:not([hidden]) {
+      display: ${$hidePublishedStatus && $published && !$draft ? 'none' : 'block'};
+    }
 
     &[data-status='published'] {
       --card-icon-color: var(--card-badge-positive-dot-color);
@@ -31,16 +32,6 @@ const Root = styled(Text)<{
       --card-icon-color: var(--card-badge-default-dot-color);
       opacity: 0.5 !important;
     }
-
-    [data-ui='PreviewCard']:hover & {
-      opacity: 1;
-    }
-    [data-ui='PreviewCard'][data-selected] & {
-      opacity: 1;
-    }
-    [data-ui='ReferenceLinkCard']:hover & {
-      opacity: 1;
-    }
   `
 })
 

From 001414a5819daf2f40e887f44503937640dded81 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <46196328+pedrobonamin@users.noreply.github.com>
Date: Fri, 15 Dec 2023 18:00:23 +0100
Subject: [PATCH 140/163] fix(core): fields actions position shift (#5348)

* fix(core): fields actions position shift

* fix(core): push the presence box when focus on fieldActions and in touch devices
---
 .../formField/FormFieldBaseHeader.tsx         | 69 ++++++++++++-------
 .../sanity/src/core/studio/Studio.test.tsx    |  6 +-
 2 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx b/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx
index 72c457e82cb..c35578feb65 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx
@@ -15,19 +15,32 @@ import {FieldCommentsProps} from '../../types'
 
 const TOOLTIP_GROUP_DELAY: TooltipDelayGroupProviderProps['delay'] = {open: 500}
 
-const Root = styled(Flex)`
-  /* Prevent buttons from taking up extra vertical space */
-  line-height: 1;
-  /* For floating actions menu */
-  position: relative;
-`
-
-const PresenceBox = styled(Box)<{$right: number}>(({theme, $right}) => {
+const Root = styled(Flex)<{
+  $floatingCardWidth: number
+  $slotWidth: number
+  $floatingCardVisible: boolean
+}>(({theme, $floatingCardWidth, $slotWidth, $floatingCardVisible}) => {
   const {space} = theme.sanity
   return css`
-    position: absolute;
-    bottom: 0;
-    right: ${$right + space[1]}px;
+    /* Prevent buttons from taking up extra vertical space */
+    line-height: 1;
+    width: 100%;
+    /* For floating actions menu */
+    position: relative;
+
+    [data-ui='PresenceBox'] {
+      position: absolute;
+      bottom: 0;
+      right: ${$slotWidth + $floatingCardWidth + space[1]}px;
+    }
+    @media (hover: hover) {
+      // If hover is supported, we hide the floating card by default, so only add space for it when it's visible.
+      [data-ui='PresenceBox'] {
+        position: absolute;
+        bottom: 0;
+        right: ${$slotWidth + ($floatingCardVisible ? $floatingCardWidth : 0) + space[1]}px;
+      }
+    }
   `
 })
 
@@ -67,11 +80,9 @@ const FieldActionsFloatingCard = styled(Card)`
     // and only show it when it has focus within or when the field is hovered or focused.
     opacity: 0;
     pointer-events: none;
-    width: 0;
 
     [data-ui='FieldActionsFlex'] {
       opacity: 0;
-      width: 0;
     }
 
     &[data-actions-visible='false']:not(:focus-within) {
@@ -145,7 +156,7 @@ export function FormFieldBaseHeader(props: FormFieldBaseHeaderProps) {
     fieldHovered,
     presence,
   } = props
-
+  const [focused, setFocused] = useState<boolean>(false)
   // State for if an actions menu is open
   const [menuOpen, setMenuOpen] = useState<boolean>(false)
 
@@ -163,7 +174,6 @@ export function FormFieldBaseHeader(props: FormFieldBaseHeaderProps) {
     button: commentButton = null,
     isAddingComment = false,
   } = comments || {}
-
   // Determine if actions exist and if field actions should be shown
   const hasActions = actions && actions.length > 0
   const showFieldActions = fieldFocused || fieldHovered || menuOpen || isAddingComment
@@ -174,7 +184,7 @@ export function FormFieldBaseHeader(props: FormFieldBaseHeaderProps) {
   const hasCommentsButtonOrActions = comments?.button || hasActions
 
   // Determine if floating card with actions should be shown
-  const shouldShowFloatingCard = showFieldActions || hasComments
+  const shouldShowFloatingCard = focused || showFieldActions || hasComments
 
   const handleSetFloatingCardElementWidth = useCallback(() => {
     if (floatingCardElement) {
@@ -187,12 +197,15 @@ export function FormFieldBaseHeader(props: FormFieldBaseHeaderProps) {
   // This is because presence should be positioned relative to the floating card.
   // We need this because we don't conditionally render the floating card and rely on CSS to
   // show/hide it, and therefore the width calculation won't be triggered when the card is shown or hidden.
-  const handleFocusCapture = useCallback(handleSetFloatingCardElementWidth, [
-    handleSetFloatingCardElementWidth,
-  ])
-  const handleBlurCapture = useCallback(handleSetFloatingCardElementWidth, [
-    handleSetFloatingCardElementWidth,
-  ])
+  const handleFocusCapture = useCallback(() => {
+    handleSetFloatingCardElementWidth()
+    setFocused(true)
+  }, [handleSetFloatingCardElementWidth])
+
+  const handleBlurCapture = useCallback(() => {
+    handleSetFloatingCardElementWidth()
+    setFocused(false)
+  }, [handleSetFloatingCardElementWidth])
 
   // Calculate floating card's width
   useEffect(() => {
@@ -223,15 +236,21 @@ export function FormFieldBaseHeader(props: FormFieldBaseHeaderProps) {
   }, [floatingCardWidth, showFieldActions, slot])
 
   return (
-    <Root align="flex-end">
+    <Root
+      align="flex-end"
+      justify="space-between"
+      $floatingCardVisible={shouldShowFloatingCard}
+      $floatingCardWidth={floatingCardWidth}
+      $slotWidth={slotWidth}
+    >
       <ContentBox flex={1} paddingY={2} $presenceMaxWidth={calcAvatarStackWidth(MAX_AVATARS)}>
         {content}
       </ContentBox>
 
       {presence && presence.length > 0 && (
-        <PresenceBox data-ui="PresenceBox" flex="none" $right={floatingCardWidth + slotWidth}>
+        <Box data-ui="PresenceBox" flex="none">
           <FieldPresence maxAvatars={MAX_AVATARS} presence={presence} />
-        </PresenceBox>
+        </Box>
       )}
 
       {slotEl}
diff --git a/packages/sanity/src/core/studio/Studio.test.tsx b/packages/sanity/src/core/studio/Studio.test.tsx
index e8d7cd3a9c2..f5e6abceb38 100644
--- a/packages/sanity/src/core/studio/Studio.test.tsx
+++ b/packages/sanity/src/core/studio/Studio.test.tsx
@@ -45,7 +45,7 @@ describe('Studio', () => {
       const html = renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))
 
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-jMliHe bmMQoc\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-dYZCwJ VAhrS\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -62,7 +62,7 @@ describe('Studio', () => {
     try {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-jMliHe bmMQoc\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-dYZCwJ VAhrS\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -82,7 +82,7 @@ describe('Studio', () => {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       node.innerHTML = html
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-dYZCwJ bKLSYK\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-jWETjw fAjdm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-jMliHe bmMQoc\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-dYZCwJ VAhrS\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
       document.head.innerHTML += sheet.getStyleTags()
 

From 3dc29ae6cbf61dce73e5fa817d4165e0fc14b2a8 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <46196328+pedrobonamin@users.noreply.github.com>
Date: Fri, 15 Dec 2023 20:53:54 +0100
Subject: [PATCH 141/163] fix(facelift): self serve Inter font (#5374)

---
 packages/sanity/src/core/components/DefaultDocument.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/core/components/DefaultDocument.tsx b/packages/sanity/src/core/components/DefaultDocument.tsx
index 22f27b3a056..49cb93baf32 100644
--- a/packages/sanity/src/core/components/DefaultDocument.tsx
+++ b/packages/sanity/src/core/components/DefaultDocument.tsx
@@ -4,14 +4,13 @@ import {NoJavascript} from './NoJavascript'
 import {GlobalErrorHandler} from './globalErrorHandler'
 import {Favicons} from './Favicons'
 
-// @todo: replace with fonts on our origin
 const globalStyles = `
   @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
-    src: url('https://rsms.me/inter/font-files/InterVariable.woff2?v=4.0') format('woff2');
+    src: url('https://studio-static.sanity.io/InterVariable.ttf');
     font-named-instance: 'Regular';
   }
   @font-face {
@@ -19,7 +18,7 @@ const globalStyles = `
     font-style: italic;
     font-weight: 100 900;
     font-display: swap;
-    src: url('https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.0') format('woff2');
+    src: url('https://studio-static.sanity.io/InterVariable-Italic.ttf');
     font-named-instance: 'Italic';
   }
   html {

From ebb0f17efb7eb574cc33e11076da135dbaf0d83d Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sat, 16 Dec 2023 00:20:15 +0000
Subject: [PATCH 142/163] feat(desk): add responsive layout to document status
 bar

---
 .../sanity/src/core/util/resizeObserver.ts    |  2 +
 .../{sparkline => }/DocumentBadges.tsx        | 11 +--
 .../document/statusBar/DocumentStatusBar.tsx  | 61 ++++++++++++----
 ...ntSparkline.tsx => DocumentStatusLine.tsx} | 70 +++++++++----------
 .../AnimatedStatusIcon.tsx                    |  0
 .../DocumentStatusPulse.tsx                   |  0
 .../DocumentStatusPulse/index.ts              |  0
 .../__workshop__/DocumentBadgesStory.tsx      |  2 +-
 .../__workshop__/DocumentStatusPulseStory.tsx |  2 +-
 .../document/statusBar/useResizeObserver.ts   | 22 ++++++
 10 files changed, 113 insertions(+), 57 deletions(-)
 rename packages/sanity/src/desk/panes/document/statusBar/{sparkline => }/DocumentBadges.tsx (83%)
 rename packages/sanity/src/desk/panes/document/statusBar/{sparkline/DocumentSparkline.tsx => DocumentStatusLine.tsx} (52%)
 rename packages/sanity/src/desk/panes/document/statusBar/{sparkline => }/DocumentStatusPulse/AnimatedStatusIcon.tsx (100%)
 rename packages/sanity/src/desk/panes/document/statusBar/{sparkline => }/DocumentStatusPulse/DocumentStatusPulse.tsx (100%)
 rename packages/sanity/src/desk/panes/document/statusBar/{sparkline => }/DocumentStatusPulse/index.ts (100%)
 create mode 100644 packages/sanity/src/desk/panes/document/statusBar/useResizeObserver.ts

diff --git a/packages/sanity/src/core/util/resizeObserver.ts b/packages/sanity/src/core/util/resizeObserver.ts
index 801f6716c39..aeefef2bc9a 100644
--- a/packages/sanity/src/core/util/resizeObserver.ts
+++ b/packages/sanity/src/core/util/resizeObserver.ts
@@ -13,6 +13,7 @@ export interface SharedResizeObserver {
     observer: Subscriber<ResizeObserverEntry>,
     options?: ResizeObserverOptions,
   ) => () => void
+  unobserve: (element: Element) => void
 }
 
 /** @internal */
@@ -43,6 +44,7 @@ export const createSharedResizeObserver = (): SharedResizeObserver => {
         resizeObserver.unobserve(element)
       }
     },
+    unobserve: (element: Element) => resizeObserver.unobserve(element),
   }
 }
 
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentBadges.tsx
similarity index 83%
rename from packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx
rename to packages/sanity/src/desk/panes/document/statusBar/DocumentBadges.tsx
index ffe3907b29e..83dc7ec183f 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentBadges.tsx
@@ -1,8 +1,8 @@
-import {Badge, BadgeTone, Inline, Text} from '@sanity/ui'
+import {Badge, BadgeTone, Inline} from '@sanity/ui'
 import React from 'react'
-import {RenderBadgeCollectionState} from '../../../../components'
-import {useDocumentPane} from '../../useDocumentPane'
-import {Tooltip} from '../../../../../ui'
+import {Tooltip} from '../../../../ui'
+import {RenderBadgeCollectionState} from '../../../components'
+import {useDocumentPane} from '../useDocumentPane'
 import {DocumentBadgeDescription} from 'sanity'
 
 interface DocumentBadgesInnerProps {
@@ -17,6 +17,9 @@ const BADGE_TONES: Record<string, BadgeTone | undefined> = {
 }
 
 function DocumentBadgesInner({states}: DocumentBadgesInnerProps) {
+  if (states.length === 0) {
+    return null
+  }
   return (
     <Inline space={1}>
       {states.map((badge, index) => (
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
index ff1f67f1134..e6d99ee1980 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
@@ -1,33 +1,68 @@
-import React, {useMemo} from 'react'
+import React, {useCallback, useState} from 'react'
 import {Flex} from '@sanity/ui'
 import {SpacerButton} from '../../../../ui/spacerButton'
 import {useDocumentPane} from '../useDocumentPane'
 import {DocumentStatusBarActions, HistoryStatusBarActions} from './DocumentStatusBarActions'
-import {DocumentSparkline} from './sparkline/DocumentSparkline'
+import {useResizeObserver} from './useResizeObserver'
+import {DocumentBadges} from './DocumentBadges'
+import {DocumentStatusLine} from './DocumentStatusLine'
 import {useTimelineSelector} from 'sanity'
 
 export interface DocumentStatusBarProps {
   actionsBoxRef?: React.Ref<HTMLDivElement>
 }
 
+const CONTAINER_BREAKPOINT = 480 // px
+
 export function DocumentStatusBar(props: DocumentStatusBarProps) {
   const {actionsBoxRef} = props
-  const {timelineStore} = useDocumentPane()
+  const {editState, timelineStore} = useDocumentPane()
 
   // Subscribe to external timeline state changes
   const showingRevision = useTimelineSelector(timelineStore, (state) => state.onOlderRevision)
 
-  return useMemo(
-    () => (
-      <Flex align="center" gap={1} justify="space-between" padding={2}>
-        <DocumentSparkline />
+  const [collapsed, setCollapsed] = useState<boolean | null>(null)
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+
+  const handleResize = useCallback((event: ResizeObserverEntry) => {
+    setCollapsed(event.contentRect.width < CONTAINER_BREAKPOINT)
+  }, [])
+
+  useResizeObserver({element: rootElement, onResize: handleResize})
+
+  const shouldRender = editState?.ready && typeof collapsed === 'boolean'
+
+  return (
+    <Flex direction="column" ref={setRootElement} sizing="border">
+      {shouldRender && (
+        <Flex align="stretch" gap={1} justify="space-between">
+          <Flex
+            align="center"
+            flex={1}
+            gap={collapsed ? 2 : 3}
+            paddingX={3}
+            paddingY={2}
+            wrap="wrap"
+          >
+            <Flex align="center">
+              <DocumentStatusLine singleLine={!collapsed} />
+              <SpacerButton size="large" />
+            </Flex>
+            <DocumentBadges />
+          </Flex>
 
-        <Flex justify="flex-end" ref={actionsBoxRef} style={{flexShrink: 0, marginLeft: 'auto'}}>
-          <SpacerButton size="large" />
-          {showingRevision ? <HistoryStatusBarActions /> : <DocumentStatusBarActions />}
+          <Flex
+            align="flex-start"
+            justify="flex-end"
+            paddingY={2}
+            ref={actionsBoxRef}
+            style={{flexShrink: 0, marginLeft: 'auto'}}
+          >
+            <SpacerButton size="large" />
+            {showingRevision ? <HistoryStatusBarActions /> : <DocumentStatusBarActions />}
+          </Flex>
         </Flex>
-      </Flex>
-    ),
-    [actionsBoxRef, showingRevision],
+      )}
+    </Flex>
   )
 }
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusLine.tsx
similarity index 52%
rename from packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
rename to packages/sanity/src/desk/panes/document/statusBar/DocumentStatusLine.tsx
index fd9d881d13e..0a995a097f9 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusLine.tsx
@@ -1,24 +1,28 @@
 import {Flex} from '@sanity/ui'
-import React, {useState, memo, useLayoutEffect, useEffect} from 'react'
-import {DocumentStatusIndicator} from '../../../../../ui/documentStatusIndicator'
-import {DocumentStatus} from '../../../../../ui/documentStatus'
-import {Tooltip} from '../../../../../ui'
-import {useDocumentPane} from '../../useDocumentPane'
-import {DocumentBadges} from './DocumentBadges'
+import React, {useEffect, useLayoutEffect, useState} from 'react'
+import {Tooltip} from '../../../../ui'
+import {DocumentStatus} from '../../../../ui/documentStatus'
+import {DocumentStatusIndicator} from '../../../../ui/documentStatusIndicator'
+import {useDocumentPane} from '../useDocumentPane'
 import {DocumentStatusPulse} from './DocumentStatusPulse'
 import {useSyncState} from 'sanity'
 
 const SYNCING_TIMEOUT = 1000
 const SAVED_TIMEOUT = 3000
 
-export const DocumentSparkline = memo(function DocumentSparkline() {
-  const {badges, documentId, documentType, editState, value} = useDocumentPane()
-  const syncState = useSyncState(documentId, documentType)
+interface DocumentStatusLineProps {
+  singleLine?: boolean
+}
 
-  const lastUpdated = value?._updatedAt
+export function DocumentStatusLine({singleLine}: DocumentStatusLineProps) {
+  const {documentId, documentType, editState, value} = useDocumentPane()
 
   const [status, setStatus] = useState<'saved' | 'syncing' | null>(null)
 
+  const syncState = useSyncState(documentId, documentType)
+
+  const lastUpdated = value?._updatedAt
+
   // eslint-disable-next-line consistent-return
   useEffect(() => {
     // Schedule an update to set the status to 'saved' when status changed to 'syncing.
@@ -46,35 +50,25 @@ export const DocumentSparkline = memo(function DocumentSparkline() {
     }
   }, [syncState.isSyncing, lastUpdated])
 
-  if (!editState?.ready) {
-    return null
+  if (status) {
+    return <DocumentStatusPulse status={status || undefined} />
   }
 
   return (
-    <Flex align="center" data-ui="DocumentSparkline" flex={1} gap={3} padding={2} wrap="wrap">
-      {!status && (
-        <Tooltip
-          content={
-            <DocumentStatus
-              absoluteDate
-              draft={editState?.draft}
-              published={editState?.published}
-            />
-          }
-          placement="top"
-        >
-          <Flex align="center" gap={2}>
-            <Flex align="center" justify="center">
-              <DocumentStatusIndicator draft={editState?.draft} published={editState?.published} />
-            </Flex>
-            <DocumentStatus draft={editState?.draft} published={editState?.published} singleLine />
-          </Flex>
-        </Tooltip>
-      )}
-
-      <DocumentStatusPulse status={status || undefined} />
-
-      {badges && <DocumentBadges />}
-    </Flex>
+    <Tooltip
+      content={
+        <DocumentStatus absoluteDate draft={editState?.draft} published={editState?.published} />
+      }
+      placement="top"
+    >
+      <Flex align="center" gap={2}>
+        <DocumentStatusIndicator draft={editState?.draft} published={editState?.published} />
+        <DocumentStatus
+          draft={editState?.draft}
+          published={editState?.published}
+          singleLine={singleLine}
+        />
+      </Flex>
+    </Tooltip>
   )
-})
+}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/AnimatedStatusIcon.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/AnimatedStatusIcon.tsx
similarity index 100%
rename from packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/AnimatedStatusIcon.tsx
rename to packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/AnimatedStatusIcon.tsx
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/DocumentStatusPulse.tsx
similarity index 100%
rename from packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/DocumentStatusPulse.tsx
rename to packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/DocumentStatusPulse.tsx
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/index.ts b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/index.ts
similarity index 100%
rename from packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentStatusPulse/index.ts
rename to packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/index.ts
diff --git a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentBadgesStory.tsx b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentBadgesStory.tsx
index 8d5b8d690b1..6611ed8b9aa 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentBadgesStory.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentBadgesStory.tsx
@@ -3,7 +3,7 @@ import React, {useMemo} from 'react'
 import {DeskToolProvider} from '../../../../DeskToolProvider'
 import {DocumentPaneNode} from '../../../../types'
 import {DocumentPaneProvider} from '../../DocumentPaneProvider'
-import {DocumentBadges} from '../sparkline/DocumentBadges'
+import {DocumentBadges} from '../DocumentBadges'
 
 export default function DocumentBadgesStory() {
   const pane: DocumentPaneNode = useMemo(
diff --git a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx
index 91267e55f9f..c7cdd884d42 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx
@@ -2,7 +2,7 @@ import {Card, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import React from 'react'
 
-import {DocumentStatusPulse} from '../sparkline/DocumentStatusPulse'
+import {DocumentStatusPulse} from '../DocumentStatusPulse'
 
 const STATUS_OPTIONS: Record<string, 'saved' | 'syncing'> = {
   saved: 'saved',
diff --git a/packages/sanity/src/desk/panes/document/statusBar/useResizeObserver.ts b/packages/sanity/src/desk/panes/document/statusBar/useResizeObserver.ts
new file mode 100644
index 00000000000..118c4a57de1
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/statusBar/useResizeObserver.ts
@@ -0,0 +1,22 @@
+import {useLayoutEffect} from 'react'
+import {resizeObserver} from 'sanity'
+
+export function useResizeObserver({
+  element,
+  onResize,
+}: {
+  element?: HTMLDivElement | null
+  onResize: (event: ResizeObserverEntry) => void
+}): void {
+  useLayoutEffect(() => {
+    if (element) {
+      resizeObserver.observe(element, onResize)
+    }
+
+    return () => {
+      if (element) {
+        resizeObserver.unobserve(element)
+      }
+    }
+  }, [element, onResize])
+}

From ac242ac958836ee6c0cb835103d13c853aae8555 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Sat, 16 Dec 2023 02:58:32 +0000
Subject: [PATCH 143/163] feat(core): add locale switcher in navdrawer, update
 layout

---
 .../navbar/navDrawer/ApperaranceMenu.tsx      |  38 ++++++
 .../navbar/navDrawer/LocaleMenu.tsx           |  52 +++++++++
 .../navbar/navDrawer/ManageMenu.tsx           |  51 +++++++++
 .../navbar/{ => navDrawer}/NavDrawer.tsx      | 108 +++++-------------
 .../components/navbar/navDrawer/index.ts      |   1 +
 .../navbar/tools/ToolVerticalMenu.tsx         |   1 +
 .../navbar/userMenu/ApperanceMenu.tsx         |  34 ++++++
 .../components/navbar/userMenu/ManageMenu.tsx |  37 ++++++
 .../components/navbar/userMenu/UserMenu.tsx   |  61 +---------
 9 files changed, 246 insertions(+), 137 deletions(-)
 create mode 100644 packages/sanity/src/core/studio/components/navbar/navDrawer/ApperaranceMenu.tsx
 create mode 100644 packages/sanity/src/core/studio/components/navbar/navDrawer/LocaleMenu.tsx
 create mode 100644 packages/sanity/src/core/studio/components/navbar/navDrawer/ManageMenu.tsx
 rename packages/sanity/src/core/studio/components/navbar/{ => navDrawer}/NavDrawer.tsx (57%)
 create mode 100644 packages/sanity/src/core/studio/components/navbar/navDrawer/index.ts
 create mode 100644 packages/sanity/src/core/studio/components/navbar/userMenu/ApperanceMenu.tsx
 create mode 100644 packages/sanity/src/core/studio/components/navbar/userMenu/ManageMenu.tsx

diff --git a/packages/sanity/src/core/studio/components/navbar/navDrawer/ApperaranceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/navDrawer/ApperaranceMenu.tsx
new file mode 100644
index 00000000000..0456f14aa66
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/navDrawer/ApperaranceMenu.tsx
@@ -0,0 +1,38 @@
+import {CheckmarkIcon} from '@sanity/icons'
+import {Card, Stack} from '@sanity/ui'
+import {Button} from '../../../../../ui'
+import {type StudioThemeColorSchemeKey} from '../../../../theme'
+import {useTranslation} from '../../../../i18n'
+import {useColorSchemeOptions} from '../../../colorScheme'
+
+export function AppearanceMenu({
+  setScheme,
+}: {
+  setScheme: (nextScheme: StudioThemeColorSchemeKey) => void
+}) {
+  const {t} = useTranslation()
+  // Subscribe to just what we need, if the menu isn't shown then we're not subscribed to these contexts
+  const options = useColorSchemeOptions(setScheme, t)
+
+  return (
+    <Card borderTop flex="none" padding={2} overflow="auto">
+      <Stack as="ul" space={1}>
+        {options.map(({icon, label, name, onSelect, selected, title}) => (
+          <Stack as="li" key={name}>
+            <Button
+              aria-label={label}
+              icon={icon}
+              iconRight={selected && <CheckmarkIcon />}
+              justify="flex-start"
+              mode="bleed"
+              onClick={onSelect}
+              selected={selected}
+              size="large"
+              text={title}
+            />
+          </Stack>
+        ))}
+      </Stack>
+    </Card>
+  )
+}
diff --git a/packages/sanity/src/core/studio/components/navbar/navDrawer/LocaleMenu.tsx b/packages/sanity/src/core/studio/components/navbar/navDrawer/LocaleMenu.tsx
new file mode 100644
index 00000000000..223820c8062
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/navDrawer/LocaleMenu.tsx
@@ -0,0 +1,52 @@
+import {CheckmarkIcon} from '@sanity/icons'
+import {Card, Stack} from '@sanity/ui'
+import React, {useCallback} from 'react'
+import {useLocale} from '../../../../i18n/hooks/useLocale'
+import {Button} from '../../../../../ui'
+
+export function LocaleMenu() {
+  const {changeLocale, currentLocale, locales} = useLocale()
+
+  if (!locales || locales.length < 2) {
+    return null
+  }
+
+  return (
+    <Card borderTop flex="none" padding={2} overflow="auto">
+      <Stack as="ul" space={1}>
+        {locales.map((item) => (
+          <LocaleItem
+            key={item.id}
+            locale={item}
+            changeLocale={changeLocale}
+            selectedLocale={currentLocale.id}
+          />
+        ))}
+      </Stack>
+    </Card>
+  )
+}
+
+function LocaleItem(props: {
+  locale: {id: string; title: string}
+  changeLocale: (lang: string) => void
+  selectedLocale: string
+}) {
+  const {locale, changeLocale, selectedLocale: selectedLang} = props
+  const localeId = locale.id
+  const onClick = useCallback(() => changeLocale(localeId), [localeId, changeLocale])
+  const selected = selectedLang == localeId
+
+  return (
+    <Button
+      aria-label={locale.title}
+      iconRight={selected && <CheckmarkIcon />}
+      justify="flex-start"
+      mode="bleed"
+      onClick={onClick}
+      selected={selected}
+      size="large"
+      text={locale.title}
+    />
+  )
+}
diff --git a/packages/sanity/src/core/studio/components/navbar/navDrawer/ManageMenu.tsx b/packages/sanity/src/core/studio/components/navbar/navDrawer/ManageMenu.tsx
new file mode 100644
index 00000000000..7445e465239
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/navDrawer/ManageMenu.tsx
@@ -0,0 +1,51 @@
+import {CogIcon, UsersIcon} from '@sanity/icons'
+import {Card, Stack} from '@sanity/ui'
+import {Button} from '../../../../../ui'
+import {useTranslation} from '../../../../i18n'
+import {userHasRole} from '../../../../util'
+import {useWorkspace} from '../../../workspace'
+import {FreeTrial} from '../free-trial'
+
+export function ManageMenu() {
+  const {currentUser, projectId} = useWorkspace()
+  const isAdmin = Boolean(currentUser && userHasRole(currentUser, 'administrator'))
+
+  const {t} = useTranslation()
+
+  return (
+    <Card borderTop flex="none" padding={2}>
+      <Stack as="ul" space={1}>
+        <Stack as="li">
+          <FreeTrial type="sidebar" />
+          <Button
+            aria-label={t('user-menu.action.manage-project-aria-label')}
+            as="a"
+            href={`https://sanity.io/manage/project/${projectId}`}
+            icon={CogIcon}
+            justify="flex-start"
+            mode="bleed"
+            size="large"
+            target="_blank"
+            text={t('user-menu.action.manage-project')}
+          />
+        </Stack>
+
+        {isAdmin && (
+          <Stack as="li">
+            <Button
+              aria-label={t('user-menu.action.invite-members-aria-label')}
+              as="a"
+              href={`https://sanity.io/manage/project/${projectId}/members`}
+              icon={UsersIcon}
+              justify="flex-start"
+              mode="bleed"
+              size="large"
+              target="_blank"
+              text={t('user-menu.action.invite-members')}
+            />
+          </Stack>
+        )}
+      </Stack>
+    </Card>
+  )
+}
diff --git a/packages/sanity/src/core/studio/components/navbar/NavDrawer.tsx b/packages/sanity/src/core/studio/components/navbar/navDrawer/NavDrawer.tsx
similarity index 57%
rename from packages/sanity/src/core/studio/components/navbar/NavDrawer.tsx
rename to packages/sanity/src/core/studio/components/navbar/navDrawer/NavDrawer.tsx
index a25e4d627ce..82b797b462d 100644
--- a/packages/sanity/src/core/studio/components/navbar/NavDrawer.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/navDrawer/NavDrawer.tsx
@@ -1,24 +1,28 @@
 import {Layer, Card, Flex, Text, Box, Stack} from '@sanity/ui'
-import {CheckmarkIcon, CloseIcon, CogIcon, LeaveIcon, UsersIcon} from '@sanity/icons'
+import {CloseIcon, LeaveIcon} from '@sanity/icons'
 import React, {memo, useCallback} from 'react'
 import styled from 'styled-components'
 import TrapFocus from 'react-focus-lock'
 import {AnimatePresence, motion, Transition, Variants} from 'framer-motion'
-import {Button} from '../../../../ui'
-import {useWorkspace} from '../../workspace'
-import {Tool} from '../../../config'
-import {useToolMenuComponent} from '../../studio-components-hooks'
-import {UserAvatar} from '../../../components'
-import {useWorkspaces} from '../../workspaces'
-import {useColorSchemeOptions, useColorSchemeSetValue} from '../../colorScheme'
-import {StudioThemeColorSchemeKey} from '../../../theme'
-import {userHasRole} from '../../../util/userHasRole'
-import {useTranslation} from '../../../i18n'
-import {WorkspaceMenuButton} from './workspace'
-import {FreeTrial} from './free-trial'
+import {Button} from '../../../../../ui'
+import {useWorkspace} from '../../../workspace'
+import {Tool} from '../../../../config'
+import {useToolMenuComponent} from '../../../studio-components-hooks'
+import {UserAvatar} from '../../../../components'
+import {useWorkspaces} from '../../../workspaces'
+import {useColorSchemeSetValue} from '../../../colorScheme'
+import {useTranslation} from '../../../../i18n'
+import {WorkspaceMenuButton} from '../workspace'
+import {AppearanceMenu} from './ApperaranceMenu'
+import {LocaleMenu} from './LocaleMenu'
+import {ManageMenu} from './ManageMenu'
 
 const ANIMATION_TRANSITION: Transition = {
-  duration: 0.2,
+  bounce: 0,
+  damping: 20,
+  mass: 0.5,
+  stiffness: 200,
+  type: 'spring',
 }
 
 const BACKDROP_VARIANTS: Variants = {
@@ -66,35 +70,6 @@ const InnerCardMotion = styled(motion(Card))`
   overflow: auto;
 `
 
-function AppearanceMenu({setScheme}: {setScheme: (nextScheme: StudioThemeColorSchemeKey) => void}) {
-  const {t} = useTranslation()
-  // Subscribe to just what we need, if the menu isn't shown then we're not subscribed to these contexts
-  const options = useColorSchemeOptions(setScheme, t)
-
-  return (
-    <>
-      <Card borderTop flex="none" padding={3} overflow="auto">
-        <Stack as="ul" space={1}>
-          {options.map(({icon, label, name, onSelect, selected, title}) => (
-            <Stack as="li" key={name}>
-              <Button
-                aria-label={label}
-                icon={icon}
-                iconRight={selected && <CheckmarkIcon />}
-                justify="flex-start"
-                mode="bleed"
-                onClick={onSelect}
-                selected={selected}
-                text={title}
-              />
-            </Stack>
-          ))}
-        </Stack>
-      </Card>
-    </>
-  )
-}
-
 interface NavDrawerProps {
   activeToolName?: string
   isOpen: boolean
@@ -106,11 +81,10 @@ export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
   const {activeToolName, isOpen, onClose, tools} = props
 
   const setScheme = useColorSchemeSetValue()
-  const {auth, currentUser, projectId} = useWorkspace()
+  const {auth, currentUser} = useWorkspace()
   const workspaces = useWorkspaces()
   const ToolMenu = useToolMenuComponent()
 
-  const isAdmin = Boolean(currentUser && userHasRole(currentUser, 'administrator'))
   const {t} = useTranslation()
 
   const handleKeyDown = useCallback(
@@ -125,7 +99,7 @@ export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
   return (
     <AnimatePresence>
       {isOpen && (
-        <TrapFocus autoFocus returnFocus>
+        <TrapFocus returnFocus>
           <Root onKeyDown={handleKeyDown}>
             <BackdropMotion
               animate="open"
@@ -152,7 +126,7 @@ export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
                   <Flex align="center">
                     <Flex flex={1} align="center" paddingRight={2}>
                       <Flex flex={1} align="center">
-                        <UserAvatar size={0} user="me" />
+                        <UserAvatar size={1} user="me" />
                         <Box
                           flex={1}
                           marginLeft={2}
@@ -183,7 +157,7 @@ export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
 
               <Flex direction="column" flex={1} justify="space-between" overflow="auto">
                 {/* Tools */}
-                <Card flex="none" padding={3}>
+                <Card flex="none" padding={2}>
                   <ToolMenu
                     activeToolName={activeToolName}
                     closeSidebar={onClose}
@@ -193,46 +167,15 @@ export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
                   />
                 </Card>
 
-                {/* Theme picker and Manage */}
                 <Flex direction="column">
                   {setScheme && <AppearanceMenu setScheme={setScheme} />}
-                  <Card borderTop flex="none" padding={3}>
-                    <Stack as="ul" space={1}>
-                      <FreeTrial type="sidebar" />
-                      <Stack as="li">
-                        <Button
-                          aria-label={t('user-menu.action.manage-project-aria-label')}
-                          as="a"
-                          href={`https://sanity.io/manage/project/${projectId}`}
-                          icon={CogIcon}
-                          justify="flex-start"
-                          mode="bleed"
-                          target="_blank"
-                          text={t('user-menu.action.manage-project')}
-                        />
-                      </Stack>
-
-                      {isAdmin && (
-                        <Stack as="li">
-                          <Button
-                            aria-label={t('user-menu.action.invite-members-aria-label')}
-                            as="a"
-                            href={`https://sanity.io/manage/project/${projectId}/members`}
-                            icon={UsersIcon}
-                            justify="flex-start"
-                            mode="bleed"
-                            target="_blank"
-                            text={t('user-menu.action.invite-members')}
-                          />
-                        </Stack>
-                      )}
-                    </Stack>
-                  </Card>
+                  <LocaleMenu />
+                  <ManageMenu />
                 </Flex>
               </Flex>
 
               {auth.logout && (
-                <Card flex="none" padding={3} borderTop>
+                <Card flex="none" padding={2} borderTop>
                   <Stack>
                     <Button
                       iconRight={LeaveIcon}
@@ -240,6 +183,7 @@ export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
                       mode="bleed"
                       // eslint-disable-next-line react/jsx-handler-names
                       onClick={auth.logout}
+                      size="large"
                       text={t('user-menu.action.sign-out')}
                     />
                   </Stack>
diff --git a/packages/sanity/src/core/studio/components/navbar/navDrawer/index.ts b/packages/sanity/src/core/studio/components/navbar/navDrawer/index.ts
new file mode 100644
index 00000000000..528817c2d40
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/navDrawer/index.ts
@@ -0,0 +1 @@
+export * from './NavDrawer'
diff --git a/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx b/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx
index 752ea319866..ba76697bde1 100644
--- a/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx
@@ -41,6 +41,7 @@ export function ToolVerticalMenu(props: ToolVerticalMenuProps) {
                 justify="flex-start"
                 mode="bleed"
                 selected={activeToolName === tool.name}
+                size="large"
                 tabIndex={isVisible ? 0 : -1}
                 text={title}
               />
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/ApperanceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/ApperanceMenu.tsx
new file mode 100644
index 00000000000..17439b3e542
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/ApperanceMenu.tsx
@@ -0,0 +1,34 @@
+import {CheckmarkIcon} from '@sanity/icons'
+import {MenuDivider} from '@sanity/ui'
+import {MenuItem} from '../../../../../ui'
+import {type StudioThemeColorSchemeKey} from '../../../../theme'
+import {useTranslation} from '../../../../i18n'
+import {useColorSchemeOptions} from '../../../colorScheme'
+
+export function AppearanceMenu({
+  setScheme,
+}: {
+  setScheme: (nextScheme: StudioThemeColorSchemeKey) => void
+}) {
+  const {t} = useTranslation()
+  // Subscribe to just what we need, if the menu isn't shown then we're not subscribed to these contexts
+  const options = useColorSchemeOptions(setScheme, t)
+
+  return (
+    <>
+      <MenuDivider />
+
+      {options.map(({icon, label, name, onSelect, selected, title}) => (
+        <MenuItem
+          key={name}
+          aria-label={label}
+          icon={icon}
+          onClick={onSelect}
+          pressed={selected}
+          text={title}
+          iconRight={selected && <CheckmarkIcon />}
+        />
+      ))}
+    </>
+  )
+}
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/ManageMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/ManageMenu.tsx
new file mode 100644
index 00000000000..9f90b81e23e
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/ManageMenu.tsx
@@ -0,0 +1,37 @@
+import {CogIcon, UsersIcon} from '@sanity/icons'
+import {MenuDivider} from '@sanity/ui'
+import {MenuItem} from '../../../../../ui'
+import {useTranslation} from '../../../../i18n'
+import {userHasRole} from '../../../../util'
+import {useWorkspace} from '../../../workspace'
+
+export function ManageMenu() {
+  const {currentUser, projectId} = useWorkspace()
+  const isAdmin = Boolean(currentUser && userHasRole(currentUser, 'administrator'))
+
+  const {t} = useTranslation()
+
+  return (
+    <>
+      <MenuDivider />
+      <MenuItem
+        as="a"
+        aria-label={t('user-menu.action.manage-project-aria-label')}
+        href={`https://sanity.io/manage/project/${projectId}`}
+        target="_blank"
+        text={t('user-menu.action.manage-project')}
+        icon={CogIcon}
+      />
+      {isAdmin && (
+        <MenuItem
+          as="a"
+          aria-label={t('user-menu.action.invite-members-aria-label')}
+          href={`https://sanity.io/manage/project/${projectId}/members`}
+          target="_blank"
+          text={t('user-menu.action.invite-members')}
+          icon={UsersIcon}
+        />
+      )}
+    </>
+  )
+}
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
index 4437c5d9b9e..b26e02530ec 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -1,4 +1,4 @@
-import {CheckmarkIcon, CogIcon, LeaveIcon, UsersIcon} from '@sanity/icons'
+import {LeaveIcon} from '@sanity/icons'
 import {
   Box,
   Card,
@@ -14,18 +14,14 @@ import React, {useMemo} from 'react'
 import styled from 'styled-components'
 import {UserAvatar} from '../../../../components'
 import {getProviderTitle} from '../../../../store'
-import {type StudioThemeColorSchemeKey} from '../../../../theme'
-import {
-  useColorSchemeOptions,
-  useColorSchemeSetValue,
-  useColorSchemeValue,
-} from '../../../colorScheme'
+import {useColorSchemeSetValue, useColorSchemeValue} from '../../../colorScheme'
 import {useWorkspace} from '../../../workspace'
-import {userHasRole} from '../../../../util/userHasRole'
 import {MenuButton, MenuButtonProps, MenuItem, Tooltip} from '../../../../../ui'
 import {useTranslation} from '../../../../i18n'
 import {LoginProviderLogo} from './LoginProviderLogo'
 import {LocaleMenu} from './LocaleMenu'
+import {AppearanceMenu} from './ApperanceMenu'
+import {ManageMenu} from './ManageMenu'
 
 const StyledMenu = styled(Menu)`
   min-width: 200px;
@@ -38,36 +34,11 @@ const AvatarBox = styled(Box)`
   min-height: ${({theme}) => theme.sanity.avatar.sizes[2].size}px;
 `
 
-function AppearanceMenu({setScheme}: {setScheme: (nextScheme: StudioThemeColorSchemeKey) => void}) {
-  const {t} = useTranslation()
-  // Subscribe to just what we need, if the menu isn't shown then we're not subscribed to these contexts
-  const options = useColorSchemeOptions(setScheme, t)
-
-  return (
-    <>
-      <MenuDivider />
-
-      {options.map(({icon, label, name, onSelect, selected, title}) => (
-        <MenuItem
-          key={name}
-          aria-label={label}
-          icon={icon}
-          onClick={onSelect}
-          pressed={selected}
-          text={title}
-          iconRight={selected && <CheckmarkIcon />}
-        />
-      ))}
-    </>
-  )
-}
-
 export function UserMenu() {
-  const {currentUser, projectId, auth} = useWorkspace()
+  const {currentUser, auth} = useWorkspace()
   const scheme = useColorSchemeValue()
   const setScheme = useColorSchemeSetValue()
 
-  const isAdmin = Boolean(currentUser && userHasRole(currentUser, 'administrator'))
   const providerTitle = getProviderTitle(currentUser?.provider)
 
   const {t} = useTranslation()
@@ -119,28 +90,8 @@ export function UserMenu() {
           </Card>
 
           {setScheme && <AppearanceMenu setScheme={setScheme} />}
-
           <LocaleMenu />
-          <MenuDivider />
-
-          <MenuItem
-            as="a"
-            aria-label={t('user-menu.action.manage-project-aria-label')}
-            href={`https://sanity.io/manage/project/${projectId}`}
-            target="_blank"
-            text={t('user-menu.action.manage-project')}
-            icon={CogIcon}
-          />
-          {isAdmin && (
-            <MenuItem
-              as="a"
-              aria-label={t('user-menu.action.invite-members-aria-label')}
-              href={`https://sanity.io/manage/project/${projectId}/members`}
-              target="_blank"
-              text={t('user-menu.action.invite-members')}
-              icon={UsersIcon}
-            />
-          )}
+          <ManageMenu />
 
           {auth.logout && (
             <>

From 5eac967bc3177342d80690d3f137ddce8d9ed0d3 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Sat, 16 Dec 2023 12:05:26 +0100
Subject: [PATCH 144/163] chore(deps): update @sanity/ui

---
 dev/design-studio/package.json                     | 2 +-
 dev/embedded-studio/package.json                   | 2 +-
 packages/@sanity/portable-text-editor/package.json | 2 +-
 packages/@sanity/vision/package.json               | 2 +-
 yarn.lock                                          | 8 ++++----
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index 7ef28f968fa..a90fb91923c 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.11",
+    "@sanity/ui": "2.0.0-beta.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/embedded-studio/package.json b/dev/embedded-studio/package.json
index c2b637e2d55..876ed93e892 100644
--- a/dev/embedded-studio/package.json
+++ b/dev/embedded-studio/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "2.0.0-beta.11",
+    "@sanity/ui": "2.0.0-beta.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index 03dde1bd631..29ff53153aa 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "2.0.0-beta.11",
+    "@sanity/ui": "2.0.0-beta.12",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index c4aaa6e3b4a..4772f2860f3 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -67,7 +67,7 @@
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "3.0.0-beta.9",
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.11",
+    "@sanity/ui": "2.0.0-beta.12",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/yarn.lock b/yarn.lock
index 94b1be9aea2..572cb437244 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3876,10 +3876,10 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@2.0.0-beta.11":
-  version "2.0.0-beta.11"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.11.tgz#d448881e2b8018b6431c48b12400d242f4d81068"
-  integrity sha512-VzZ8RZOsE2W0aUmWVM4EH84h8R10VaWu+aKW4zKQqJ4mq/1f4nyp7mETF4zMR/DT2w8Oi5XStcxihedfeU1W3A==
+"@sanity/ui@2.0.0-beta.12":
+  version "2.0.0-beta.12"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.12.tgz#84027ce8a839cc14bcd7d9ea977b184a7f083cef"
+  integrity sha512-18z4VCO8qTTrub9THPCWW9TLxQ6k+RRU4dmBQG4XSxJYFKmaCkVz4lpxRWLyMaOqEBAsQAvTCmEpyQVjLAF1rA==
   dependencies:
     "@floating-ui/react-dom" "^2.0.4"
     "@sanity/color" "3.0.0-beta.9"

From 03ce88b349dd2e41b8b71a5d436ab3a498d15374 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Sat, 16 Dec 2023 12:33:01 +0100
Subject: [PATCH 145/163] fix(facelift): update free trial to match facelift

---
 .../studio/components/navbar/StudioNavbar.tsx |  2 +-
 .../navbar/free-trial/DialogContent.tsx       | 65 +++++++++----------
 .../navbar/free-trial/FreeTrial.tsx           |  4 +-
 .../navbar/free-trial/FreeTrialButton.tsx     | 64 ++++++++++--------
 .../navbar/free-trial/PopoverContent.tsx      | 13 ++--
 5 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
index 91f459ad5fc..b5a6dcf932b 100644
--- a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
@@ -225,12 +225,12 @@ export function StudioNavbar() {
                     </SearchProvider>
                   </LayerProvider>
 
+                  {shouldRender.tools && <FreeTrial type="topbar" />}
                   {/* Search button (desktop) */}
                   {!shouldRender.searchFullscreen && (
                     <SearchButton onClick={handleOpenSearch} ref={setSearchOpenButtonEl} />
                   )}
 
-                  {shouldRender.tools && <FreeTrial type="topbar" />}
                   {shouldRender.configIssues && <ConfigIssuesButton />}
                   {shouldRender.resources && <ResourcesButton />}
                   <PresenceMenu />
diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/DialogContent.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/DialogContent.tsx
index 2a9728972ae..7f09b6f7caa 100644
--- a/packages/sanity/src/core/studio/components/navbar/free-trial/DialogContent.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/free-trial/DialogContent.tsx
@@ -1,7 +1,8 @@
-import {Box, Button, Dialog, Flex, Heading} from '@sanity/ui'
+import {Box, Flex, Heading} from '@sanity/ui'
 import styled from 'styled-components'
 import {CloseIcon} from '@sanity/icons'
 import {useColorSchemeValue} from '../../../colorScheme'
+import {Button, Dialog} from '../../../../../ui'
 import {FreeTrialDialog} from './types'
 import {DescriptionSerializer} from './DescriptionSerializer'
 
@@ -50,50 +51,42 @@ export function DialogContent({handleClose, handleOpenNext, content, open}: Moda
       id="free-trial-modal"
       onClose={handleClose}
       onClickOutside={handleClose}
+      padding={false}
       __unstable_hideCloseButton
       scheme={schemeValue}
-      cardRadius={3}
-      footer={
-        <Flex width="full" gap={3} justify="flex-end" padding={3}>
-          {content.secondaryButton?.text && (
-            <Button
-              mode="bleed"
-              padding={2}
-              fontSize={1}
-              text={content.secondaryButton?.text}
-              tone="default"
-              onClick={handleClose}
-            />
-          )}
-          <Button
-            mode="default"
-            padding={2}
-            fontSize={1}
-            text={content.ctaButton?.text}
-            autoFocus
-            tone="primary"
-            {...(content.ctaButton?.action === 'openUrl'
-              ? {
-                  href: content.ctaButton.url,
-                  target: '_blank',
-                  rel: 'noopener noreferrer',
-                  as: 'a',
-                }
-              : {
-                  onClick: content.ctaButton?.action === 'openNext' ? handleOpenNext : handleClose,
-                })}
-          />
-        </Flex>
-      }
+      footer={{
+        cancelButton: content.secondaryButton?.text
+          ? {
+              text: content.secondaryButton.text,
+              mode: 'bleed',
+              tone: 'default',
+              onClick: handleClose,
+            }
+          : undefined,
+        confirmButton: {
+          text: content.ctaButton?.text,
+          mode: 'default',
+          tone: 'primary',
+          ...(content.ctaButton?.action === 'openUrl'
+            ? {
+                href: content.ctaButton.url,
+                target: '_blank',
+                rel: 'noopener noreferrer',
+                as: 'a',
+              }
+            : {
+                onClick: content.ctaButton?.action === 'openNext' ? handleOpenNext : handleClose,
+              }),
+        },
+      }}
     >
       <StyledButton
         icon={CloseIcon}
-        fontSize={1}
-        padding={2}
         mode="bleed"
         tone="default"
         onClick={handleClose}
         tabIndex={-1}
+        tooltipProps={null}
       />
       {content.image && (
         <Image src={content.image.asset.url} alt={content.image.asset.altText ?? ''} />
diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx
index 1cdbe94827c..14e964c7ff0 100644
--- a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx
@@ -1,5 +1,5 @@
 import {useCallback, useEffect, useRef, useState} from 'react'
-import {Popover} from '@sanity/ui'
+import {Popover} from '../../../../../ui'
 import {useColorSchemeValue} from '../../../colorScheme'
 import {PopoverContent} from './PopoverContent'
 import {DialogContent} from './DialogContent'
@@ -59,7 +59,7 @@ export function FreeTrial({type}: FreeTrialProps) {
         open={showDialog && showPopover}
         size={0}
         scheme={scheme}
-        radius={2}
+        radius={3}
         portal
         placement={type === 'sidebar' ? 'top' : 'bottom-end'}
         content={
diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialButton.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialButton.tsx
index 333aae3a3eb..dce802f40db 100644
--- a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialButton.tsx
@@ -1,12 +1,20 @@
 import styled from 'styled-components'
-import {Button, Text, Card, Stack} from '@sanity/ui'
+
+import {
+  // eslint-disable-next-line no-restricted-imports
+  Button as UIButton, // Button with necessary custom styles.
+  Text,
+  Card,
+} from '@sanity/ui'
 import {BoltIcon} from '@sanity/icons'
 import {purple, yellow} from '@sanity/color'
 import {useTranslation} from 'react-i18next'
 import {forwardRef} from 'react'
+import {Button} from '../../../../../ui'
 
-const StyledButton = styled(Button)<{smallIcon: boolean}>`
-  padding: ${(props) => (props.smallIcon ? '1px' : 0)};
+const StyledButton = styled(UIButton)`
+  padding: 2px;
+  margin: -2px;
   position: relative;
 `
 
@@ -74,16 +82,21 @@ export const FreeTrialButtonTopbar = forwardRef(function FreeTrialButtonTopbar(
   {toggleShowContent, daysLeft, totalDays}: FreeTrialButtonProps,
   ref: React.Ref<HTMLButtonElement>,
 ) {
+  if (!daysLeft) {
+    return (
+      <Button
+        size="default"
+        ref={ref}
+        icon={BoltIcon}
+        mode="bleed"
+        onClick={toggleShowContent}
+        tooltipProps={{content: 'Upgrade your project'}}
+      />
+    )
+  }
   return (
-    <StyledButton
-      ref={ref}
-      padding={3}
-      fontSize={1}
-      mode="bleed"
-      onClick={toggleShowContent}
-      smallIcon={!!daysLeft}
-    >
-      <Text size={daysLeft ? 1 : 2}>
+    <StyledButton ref={ref} padding={2} mode="bleed" onClick={toggleShowContent}>
+      <Text size={1}>
         <BoltIcon />
       </Text>
       {daysLeft > 0 && <SvgFilledOutline daysLeft={daysLeft} totalDays={totalDays} />}
@@ -98,19 +111,18 @@ export const FreeTrialButtonSidebar = forwardRef(function FreeTrialButtonSidebar
   const {t} = useTranslation()
 
   return (
-    <Stack as="li">
-      <Button
-        ref={ref}
-        icon={BoltIcon}
-        justify="flex-start"
-        mode="bleed"
-        onClick={toggleShowContent}
-        text={
-          daysLeft
-            ? t('user-menu.action.free-trial', {count: daysLeft})
-            : t('user-menu.action.free-trial-finished')
-        }
-      />
-    </Stack>
+    <Button
+      ref={ref}
+      icon={BoltIcon}
+      justify="flex-start"
+      mode="bleed"
+      size="large"
+      onClick={toggleShowContent}
+      text={
+        daysLeft
+          ? t('user-menu.action.free-trial', {count: daysLeft})
+          : t('user-menu.action.free-trial-finished')
+      }
+    />
   )
 })
diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/PopoverContent.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/PopoverContent.tsx
index 9bcccbbed19..71294ef10ba 100644
--- a/packages/sanity/src/core/studio/components/navbar/free-trial/PopoverContent.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/free-trial/PopoverContent.tsx
@@ -1,6 +1,6 @@
-import {Card, Heading, Flex, Button, Box, Container} from '@sanity/ui'
+import {Card, Heading, Flex, Box, Container} from '@sanity/ui'
 import styled from 'styled-components'
-import {useColorSchemeValue} from '../../../colorScheme'
+import {Button} from '../../../../../ui'
 import {FreeTrialDialog} from './types'
 import {DescriptionSerializer} from './DescriptionSerializer'
 
@@ -18,10 +18,8 @@ interface PopoverContentProps {
 }
 
 export function PopoverContent({content, handleClose, handleOpenNext}: PopoverContentProps) {
-  const schemeValue = useColorSchemeValue()
-
   return (
-    <Card scheme={schemeValue} radius={3}>
+    <Card radius={3} overflow={'hidden'} width={0}>
       <Container width={0}>
         {content.image && (
           <Image src={content.image.asset.url} alt={content.image.asset.altText ?? ''} />
@@ -38,8 +36,6 @@ export function PopoverContent({content, handleClose, handleOpenNext}: PopoverCo
           {content.secondaryButton?.text && (
             <Button
               mode="bleed"
-              padding={2}
-              fontSize={1}
               text={content.secondaryButton.text}
               tone="default"
               onClick={handleClose}
@@ -47,8 +43,7 @@ export function PopoverContent({content, handleClose, handleOpenNext}: PopoverCo
           )}
           <Button
             mode="default"
-            padding={2}
-            fontSize={1}
+            tooltipProps={null}
             text={content.ctaButton?.text}
             autoFocus
             tone="primary"

From ed6c5215a290f7ecadb4e9d500872100bb138d13 Mon Sep 17 00:00:00 2001
From: Nina Andal Aarvik <nina@sanity.io>
Date: Sat, 16 Dec 2023 18:20:40 +0300
Subject: [PATCH 146/163] fix(core/tests): fix failed tests (#5376)

* fix(core/tests): fix failing tests

* fix(tests): wait until settled in pte test

* fix(tests): update snapshot

---------

Co-authored-by: Pedro Bonamin <pedrobonamin@gmail.com>
---
 .../formBuilder/inputs/PortableText/ObjectBlock.spec.tsx    | 5 +++++
 packages/sanity/src/core/studio/Studio.test.tsx             | 6 +++---
 .../components/navbar/new-document/NewDocumentButton.tsx    | 6 ++----
 .../navbar/new-document/NewDocumentListOption.tsx           | 1 +
 .../studio/components/navbar/resources/ResourcesButton.tsx  | 1 +
 test/e2e/tests/navbar/createNewDocumentNav.spec.ts          | 6 +++---
 6 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx
index 25c3860d164..81b8389d1f4 100644
--- a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx
+++ b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx
@@ -82,6 +82,7 @@ test.describe('Portable Text Input', () => {
 
       // Tab to the context menu, press enter once to open it, then enter again to press 'edit'
       await page.keyboard.press('Tab')
+      await expect(page.getByRole('button', {name: 'Open menu'})).toBeFocused()
       await page.keyboard.press('Enter')
 
       // Assertion: Context menu should be open
@@ -95,9 +96,13 @@ test.describe('Portable Text Input', () => {
 
       // Close dialog
       await page.keyboard.press('Escape')
+      await page.waitForTimeout(200) // Confirm with @skogsmaskin if there is a better way
+      await expect(page.getByTestId('default-edit-object-dialog')).not.toBeVisible()
 
       // Tab to the context menu, press enter once to open it
       await page.keyboard.press('Tab')
+      await expect(page.getByRole('button', {name: 'Open menu'})).toBeFocused()
+      await page.waitForTimeout(200) // Confirm with @skogsmaskin if there is a better way
       await page.keyboard.press('Enter')
       await expect($locatorContextMenu).toBeVisible()
       await expect($locatorContextMenu.locator('*:focus', {hasText: 'Edit'})).toBeFocused()
diff --git a/packages/sanity/src/core/studio/Studio.test.tsx b/packages/sanity/src/core/studio/Studio.test.tsx
index f5e6abceb38..a46a7d691ce 100644
--- a/packages/sanity/src/core/studio/Studio.test.tsx
+++ b/packages/sanity/src/core/studio/Studio.test.tsx
@@ -45,7 +45,7 @@ describe('Studio', () => {
       const html = renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))
 
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-jMliHe bmMQoc\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-dYZCwJ VAhrS\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-LwRDc bWjezh\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-hPCzDb hyezHQ\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -62,7 +62,7 @@ describe('Studio', () => {
     try {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-jMliHe bmMQoc\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-dYZCwJ VAhrS\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-LwRDc bWjezh\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-hPCzDb hyezHQ\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -82,7 +82,7 @@ describe('Studio', () => {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       node.innerHTML = html
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-jMliHe bmMQoc\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-dYZCwJ VAhrS\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-LwRDc bWjezh\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-hPCzDb hyezHQ\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
       document.head.innerHTML += sheet.getStyleTags()
 
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
index ffcc432eba0..7a19f0ebec1 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
@@ -124,6 +124,7 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
     () => ({
       __unstable_disableFocusRing: true,
       border: false,
+      'data-testid': 'new-document-button-search-input',
       defaultValue: searchQuery,
       disabled: loading,
       icon: SearchIcon,
@@ -197,10 +198,7 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
           >
             <RootFlex direction="column" flex={1} height="fill">
               <DialogHeaderCard padding={2} borderBottom>
-                <TextInput
-                  data-testid="new-document-button-search-input"
-                  {...sharedTextInputProps}
-                />
+                <TextInput data-testid="new-document-button-search-input" />
               </DialogHeaderCard>
 
               <Flex direction="column" overflow="hidden">
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
index 7e9d52b0162..0ea58fa80b8 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
@@ -53,6 +53,7 @@ export function NewDocumentListOption(props: NewDocumentListOptionProps) {
       <div>
         <Card
           as={option.hasPermission ? 'a' : 'button'}
+          data-testid={`create-new-${option.templateId}`}
           disabled={!option.hasPermission}
           href={href}
           marginBottom={1}
diff --git a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
index 68a3de12584..71b59632c05 100644
--- a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
@@ -21,6 +21,7 @@ export function ResourcesButton() {
     <MenuButton
       button={
         <Button
+          aria-label={t('help-resources.title')}
           icon={InfoOutlineIcon}
           mode="bleed"
           tooltipProps={{content: t('help-resources.title')}}
diff --git a/test/e2e/tests/navbar/createNewDocumentNav.spec.ts b/test/e2e/tests/navbar/createNewDocumentNav.spec.ts
index 99765819889..b109e5b8c42 100644
--- a/test/e2e/tests/navbar/createNewDocumentNav.spec.ts
+++ b/test/e2e/tests/navbar/createNewDocumentNav.spec.ts
@@ -3,15 +3,15 @@ import {test} from '@sanity/test'
 
 test('create new document from menu button', async ({page, baseURL}) => {
   await page.goto(baseURL ?? '/test/content')
-  await page.getByTestId('new-document-button').click()
+  await page.getByLabel('Create new document').click()
   await page.getByTestId('new-document-button-search-input').fill('Author')
-  const authorLink = await page.getByRole('link', {name: 'Author', exact: true})
+  const authorLink = await page.getByTestId('create-new-author')
 
   expect(authorLink).toBeVisible()
 
   // Forcing due to aria-hidden=true
   // https://github.com/sanity-io/sanity/blob/6d5b4e88c4cb0fbd41fcebbaebabd88e9fac16b5/packages/sanity/src/core/components/commandList/CommandList.tsx#L596
-  await page.getByRole('link', {name: 'Author', exact: true}).click({force: true})
+  await page.getByTestId('create-new-author').click({force: true})
 
   await page.waitForSelector('data-testid=document-pane')
 

From b83bf78b3fe8c3d708df3681abc68577e12f8df7 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <46196328+pedrobonamin@users.noreply.github.com>
Date: Mon, 18 Dec 2023 13:06:48 +0100
Subject: [PATCH 147/163] chore(colocation): update location of the new
 components (#5383)

* chore(colocation): move SpacerButton to desk/components

* chore(colocation): move DocumentStatusIndicator to core/components

* chore(colocation): move LoadingBlock  to core/components

* chore(colocation): move DocumentStatus to core/components

* chore(colocation): move ContextMenuButton to core/components

* chore(colocation): move ui-components to core, reexport as sanity/ui-components

* chore(colocation): rename sanity/src/ui  to sanity/src/ui-components

* chore(colocation): update imports for TOOLTIP_DELAY_PROPS

* fix(tests): update breaking test
---
 .eslintrc.cjs                                 |  2 +-
 .../assetSources/imageAssetSource.tsx         | 14 +++++++------
 .../actions/TestCustomComponentAction.tsx     | 21 +++++++++----------
 .../changeIndicators/ElementWithChangeBar.tsx |  2 +-
 .../src/core/components/IntentButton.tsx      |  2 +-
 .../src/core/components/StatusButton.tsx      |  2 +-
 .../src/core/components/TooltipOfDisabled.tsx |  2 +-
 .../components/collapseMenu/CollapseMenu.tsx  |  4 ++--
 .../collapseMenu/CollapseMenuButton.tsx       |  2 +-
 .../collapseMenu/CollapseOverflowMenu.tsx     |  2 +-
 .../__workshop__/CollapseMenuStory.tsx        |  2 +-
 .../collapseTabList/CollapseTabList.tsx       |  4 ++--
 .../__workshop__/CollapseTabListStory.tsx     |  2 +-
 .../__workshop__/KitchenSinkStory.tsx         |  2 +-
 .../commandList/__workshop__/PopoverStory.tsx |  2 +-
 .../contextMenuButton/ContextMenuButton.tsx   |  4 ++--
 .../components}/contextMenuButton/index.ts    |  0
 .../documentStatus/DocumentStatus.tsx         |  2 +-
 .../components}/documentStatus/index.ts       |  0
 .../DocumentStatusIndicator.tsx               |  2 +-
 .../documentStatusIndicator/index.ts          |  0
 packages/sanity/src/core/components/index.ts  |  4 ++++
 .../components}/loadingBlock/LoadingBlock.tsx |  5 ++---
 .../components}/loadingBlock/index.ts         |  0
 .../popoverDialog/PopoverDialog.tsx           |  2 +-
 .../__workshop__/PortableTextPreviewStory.tsx |  2 +-
 .../previews/general/MediaPreview.tsx         |  2 +-
 .../__tests__/useRovingFocus.test.tsx         |  2 +-
 .../__workshop__/RovingFocusStory.tsx         |  2 +-
 .../core/components/userAvatar/UserAvatar.tsx |  2 +-
 .../src/core/config/document/actions.ts       |  2 +-
 .../__workshop__/DiffErrorBoundaryStory.tsx   |  2 +-
 .../core/field/diff/components/ChangeList.tsx |  2 +-
 .../field/diff/components/DiffTooltip.tsx     |  2 +-
 .../field/diff/components/FieldChange.tsx     |  2 +-
 .../field/diff/components/GroupChange.tsx     |  2 +-
 .../diff/components/RevertChangesButton.tsx   |  2 +-
 .../diff/components/Annotation.tsx            |  2 +-
 .../diff/components/InlineObject.tsx          |  2 +-
 .../__workshop__/_common/FilterFieldInput.tsx |  2 +-
 .../form/__workshop__/_common/TypeTester.tsx  |  2 +-
 .../_common/resolvePreviewComponent.tsx       |  2 +-
 .../src/core/form/components/EditPortal.tsx   |  2 +-
 .../formField/FormFieldValidationStatus.tsx   |  2 +-
 .../form/components/tagInput/tagInput.tsx     |  2 +-
 .../form/field/actions/FieldActionMenu.tsx    |  2 +-
 .../field/actions/FieldActionMenuGroup.tsx    |  2 +-
 .../field/actions/FieldActionMenuItem.tsx     |  2 +-
 .../CrossDatasetReferenceInput.tsx            |  4 ++--
 .../CrossDatasetReferencePreview.tsx          |  2 +-
 .../DisabledFeatureWarning.tsx                |  2 +-
 .../ReferenceAutocomplete.tsx                 |  2 +-
 .../inputs/DateInputs/base/DateTimeInput.tsx  |  2 +-
 .../DateInputs/base/calendar/Calendar.tsx     |  2 +-
 .../InvalidValueInput/InvalidValueInput.tsx   |  2 +-
 .../InvalidValueInput/UntypedValueInput.tsx   |  2 +-
 .../form/inputs/ObjectInput/UnknownFields.tsx |  2 +-
 .../ObjectInput/fieldGroups/GroupTab.tsx      |  2 +-
 .../core/form/inputs/PortableText/Editor.tsx  |  2 +-
 .../_common/resolvePreviewComponent.tsx       |  2 +-
 .../customSchema/blockActions.tsx             |  2 +-
 .../inputs/PortableText/object/Annotation.tsx |  2 +-
 .../object/AnnotationToolbarPopover.tsx       |  2 +-
 .../PortableText/object/BlockObject.tsx       |  2 +-
 .../object/BlockObjectActionsMenu.tsx         |  2 +-
 .../PortableText/object/InlineObject.tsx      |  2 +-
 .../object/InlineObjectToolbarPopover.tsx     |  2 +-
 .../object/modals/DialogModal.tsx             |  2 +-
 .../object/modals/PopoverModal.styles.ts      |  2 +-
 .../object/modals/PopoverModal.tsx            |  2 +-
 .../inputs/PortableText/text/TextBlock.tsx    |  2 +-
 .../PortableText/toolbar/ActionMenu.tsx       |  4 ++--
 .../PortableText/toolbar/BlockStyleSelect.tsx |  2 +-
 .../PortableText/toolbar/InsertMenu.tsx       |  4 ++--
 .../inputs/PortableText/toolbar/Toolbar.tsx   |  2 +-
 .../inputs/ReferenceInput/CreateButton.tsx    |  8 ++++++-
 .../ReferenceInput/PreviewReferenceValue.tsx  |  2 +-
 .../ReferenceInput/ReferenceAutocomplete.tsx  |  2 +-
 .../inputs/ReferenceInput/ReferenceField.tsx  |  5 ++---
 .../ReferenceFinalizeAlertStrip.tsx           |  2 +-
 .../inputs/ReferenceInput/ReferenceInput.tsx  |  2 +-
 .../inputs/ReferenceInput/ReferenceItem.tsx   |  6 +++---
 .../ReferenceMetadataLoadFailure.tsx          |  2 +-
 .../ReferenceInput/ReferencePreview.tsx       |  4 ++--
 .../ReferenceStrengthMismatchAlertStrip.tsx   |  2 +-
 .../src/core/form/inputs/Slug/SlugInput.tsx   |  2 +-
 .../ArrayOfObjectsFunctions.tsx               |  2 +-
 .../ArrayOfObjectsInput/Grid/ErrorItem.tsx    |  4 ++--
 .../ArrayOfObjectsInput/Grid/GridItem.tsx     |  6 +++---
 .../Grid/IncompatibleItemType.tsx             |  2 +-
 .../arrays/ArrayOfObjectsInput/InsertMenu.tsx |  2 +-
 .../ArrayOfObjectsInput/List/ErrorItem.tsx    |  4 ++--
 .../List/IncompatibleItemType.tsx             |  2 +-
 .../ArrayOfObjectsInput/List/PreviewItem.tsx  |  6 +++---
 .../ArrayOfPrimitivesFunctions.tsx            |  2 +-
 .../arrays/ArrayOfPrimitivesInput/ItemRow.tsx |  4 ++--
 .../form/inputs/arrays/common/DragHandle.tsx  |  2 +-
 .../files/FileInput/FileActionsMenu.tsx       |  4 ++--
 .../form/inputs/files/FileInput/FileInput.tsx |  2 +-
 .../files/FileInput/InvalidFileWarning.tsx    |  2 +-
 .../files/ImageInput/ImageActionsMenu.tsx     |  5 ++---
 .../inputs/files/ImageInput/ImageInput.tsx    |  2 +-
 .../inputs/files/ImageInput/ImagePreview.tsx  |  2 +-
 .../files/ImageInput/InvalidImageWarning.tsx  |  2 +-
 .../files/ImageToolInput/ImageToolInput.tsx   |  2 +-
 .../ImageToolInput/imagetool/ImageTool.tsx    |  2 +-
 .../__workshop__/UploadPlaceholderStory.tsx   |  2 +-
 .../form/inputs/files/common/ActionsMenu.tsx  |  2 +-
 .../FileInputButton/FileInputButton.tsx       |  2 +-
 .../files/common/FileInputButton/styles.ts    |  2 +-
 .../FileInputMenuItem.styled.tsx              |  2 +-
 .../FileInputMenuItem/FileInputMenuItem.tsx   |  2 +-
 .../inputs/files/common/UploadProgress.tsx    |  2 +-
 .../inputs/files/common/UploadWarning.tsx     |  2 +-
 .../members/array/IncompatibleItemType.tsx    |  2 +-
 .../object/errors/DuplicateKeysAlert.tsx      |  2 +-
 .../object/errors/MissingKeysAlert.tsx        |  2 +-
 .../members/object/errors/MixedArrayAlert.tsx |  2 +-
 .../form/studio/assetSource/file/AssetRow.tsx |  2 +-
 .../studio/assetSource/image/AssetThumb.tsx   |  2 +-
 .../assetSource/shared/AssetDeleteDialog.tsx  |  4 ++--
 .../studio/assetSource/shared/AssetMenu.tsx   |  4 ++--
 .../assetSource/shared/AssetUsageDialog.tsx   |  5 ++---
 .../assetSource/shared/DefaultSource.tsx      |  2 +-
 .../core/i18n/components/LocaleProvider.tsx   |  2 +-
 .../core/presence/DocumentPreviewPresence.tsx |  2 +-
 .../src/core/presence/PresenceTooltip.tsx     |  2 +-
 .../components/SanityDefaultPreview.tsx       |  2 +-
 .../_legacy/__workshop__/CurrentUserStory.tsx |  2 +-
 .../__workshop__/DocumentPairStory.tsx        |  2 +-
 .../__workshop__/HistoryTimelineStory.tsx     |  2 +-
 .../authStore/createLoginComponent.tsx        |  4 ++--
 .../sanity/src/core/studio/AuthBoundary.tsx   |  2 +-
 .../src/core/studio/StudioErrorBoundary.tsx   |  2 +-
 .../sanity/src/core/studio/StudioLayout.tsx   |  2 +-
 .../sanity/src/core/studio/StudioProvider.tsx |  2 +-
 .../studio/components/navbar/StudioNavbar.tsx |  3 +--
 .../configIssues/ConfigIssuesButton.tsx       |  2 +-
 .../navbar/free-trial/DialogContent.tsx       |  2 +-
 .../navbar/free-trial/FreeTrial.tsx           |  2 +-
 .../navbar/free-trial/FreeTrialButton.tsx     |  2 +-
 .../navbar/free-trial/PopoverContent.tsx      |  2 +-
 .../navbar/navDrawer/ApperaranceMenu.tsx      |  2 +-
 .../navbar/navDrawer/LocaleMenu.tsx           |  2 +-
 .../navbar/navDrawer/ManageMenu.tsx           |  2 +-
 .../components/navbar/navDrawer/NavDrawer.tsx |  2 +-
 .../new-document/NewDocumentButton.style.ts   |  2 +-
 .../navbar/new-document/NewDocumentButton.tsx |  2 +-
 .../navbar/new-document/NewDocumentList.tsx   |  6 +-----
 .../new-document/NewDocumentListOption.tsx    |  2 +-
 .../navbar/presence/PresenceMenu.tsx          |  2 +-
 .../navbar/presence/PresenceMenuItem.tsx      |  2 +-
 .../navbar/resources/ResourcesButton.tsx      |  2 +-
 .../navbar/resources/ResourcesMenuItems.tsx   |  4 ++--
 .../components/navbar/search/SearchButton.tsx |  2 +-
 .../navbar/search/components/SearchHeader.tsx |  2 +-
 .../navbar/search/components/SortMenu.tsx     |  2 +-
 .../search/components/filters/Filters.tsx     |  2 +-
 .../filters/addFilter/AddFilterButton.tsx     |  2 +-
 .../filters/addFilter/items/FilterTooltip.tsx |  2 +-
 .../documentTypes/DocumentTypesButton.tsx     |  2 +-
 .../DocumentTypesPopoverContent.tsx           |  2 +-
 .../items/DocumentTypeFilterItem.tsx          |  2 +-
 .../filters/filter/FilterButton.tsx           |  2 +-
 .../components/filters/filter/FilterForm.tsx  |  2 +-
 .../filters/filter/OperatorsMenuButton.tsx    |  2 +-
 .../filters/filter/inputs/asset/Asset.tsx     |  2 +-
 .../asset/preview/ImageReferencePreview.tsx   |  2 +-
 .../inputs/date/ParsedDateTextInput.tsx       |  2 +-
 .../datePicker/calendar/CalendarHeader.tsx    |  2 +-
 .../filter/inputs/reference/Reference.tsx     |  2 +-
 .../reference/ReferenceAutocomplete.tsx       |  2 +-
 .../filter/inputs/string/StringList.tsx       |  2 +-
 .../recentSearches/RecentSearches.tsx         |  2 +-
 .../searchResults/item/DebugOverlay.tsx       |  2 +-
 .../item/SearchResultItemPreview.tsx          |  4 ++--
 .../navbar/tools/ToolCollapseMenu.tsx         |  2 +-
 .../navbar/tools/ToolVerticalMenu.tsx         |  2 +-
 .../navbar/userMenu/ApperanceMenu.tsx         |  2 +-
 .../components/navbar/userMenu/LocaleMenu.tsx |  2 +-
 .../components/navbar/userMenu/ManageMenu.tsx |  2 +-
 .../components/navbar/userMenu/UserMenu.tsx   |  2 +-
 .../workspace/WorkspaceAuth/WorkspaceAuth.tsx |  4 ++--
 .../navbar/workspace/WorkspaceMenuButton.tsx  |  2 +-
 .../studio/screens/CorsOriginErrorScreen.tsx  |  2 +-
 .../studio/screens/NotAuthenticatedScreen.tsx |  2 +-
 .../core/studio/screens/NotFoundScreen.tsx    |  2 +-
 .../InitialValueTemplateError.tsx             |  2 +-
 .../desk/__workshop__/DocumentStateStory.tsx  |  2 +-
 .../plugin/field/CommentsFieldButton.tsx      |  2 +-
 .../inspector/CommentsInspectorHeader.tsx     |  2 +-
 .../src/components/CommentBreadcrumbs.tsx     |  2 +-
 .../src/components/CommentDeleteDialog.tsx    |  2 +-
 .../src/components/list/CommentsListItem.tsx  |  2 +-
 .../list/CommentsListItemContextMenu.tsx      | 11 +++++++---
 .../components/list/CommentsListStatus.tsx    |  2 +-
 .../src/components/mentions/MentionsMenu.tsx  |  3 +--
 .../onboarding/CommentsOnboardingPopover.tsx  |  2 +-
 .../pte/blocks/MentionInlineBlock.tsx         |  2 +-
 .../CommentInputDiscardDialog.tsx             |  2 +-
 .../pte/comment-input/CommentInputInner.tsx   |  3 +--
 .../components/pte/comment-input/Editable.tsx |  2 +-
 .../src/desk/components/IntentButton.tsx      |  2 +-
 .../ConfirmDeleteDialog.tsx                   |  5 ++---
 .../ConfirmDeleteDialogBody.styles.tsx        |  2 +-
 .../ConfirmDeleteDialogBody.tsx               |  2 +-
 .../components/confirmDeleteDialog/index.tsx  |  2 +-
 .../components/deskTool/StructureError.tsx    |  2 +-
 .../components/pane/PaneContextMenuButton.tsx |  4 ++--
 .../pane/PaneHeaderActionButton.tsx           |  2 +-
 .../components/pane/PaneMenuButtonItem.tsx    |  2 +-
 .../__workshop__/ChangeConnectorsStory.tsx    |  2 +-
 .../pane/__workshop__/ExampleStory.tsx        |  4 ++--
 .../DocumentPane/DocumentActions.tsx          |  4 ++--
 .../DocumentPane/DocumentViewPanel.tsx        |  2 +-
 .../DocumentPane/ReviewChangesPanel.tsx       |  2 +-
 .../SplitPanesStory/ListPane/ListPane.tsx     |  4 ++--
 .../InsufficientPermissionsMessageTooltip.tsx |  2 +-
 .../PaneHeaderCreateButton.tsx                |  2 +-
 .../components/paneItem/PaneItemPreview.tsx   |  6 +++---
 .../components}/spacerButton/SpacerButton.tsx |  2 +-
 .../components}/spacerButton/index.ts         |  0
 .../DeskRenameToolMenuButtonPopover.tsx       |  2 +-
 .../document-layout/DocumentLayout.tsx        |  2 +-
 .../DocumentInspectorHeader.tsx               |  2 +-
 .../document/documentPanel/banners/Banner.tsx |  6 +++---
 .../documentPanel/documentViews/FormView.tsx  |  4 ++--
 .../header/DocumentHeaderTabs.tsx             |  2 +-
 .../header/DocumentPanelHeader.tsx            |  4 +---
 .../document/inspectDialog/InspectDialog.tsx  |  2 +-
 .../inspectors/changes/ChangesInspector.tsx   |  2 +-
 .../document/statusBar/ActionMenuButton.tsx   | 10 ++++++---
 .../document/statusBar/ActionStateDialog.tsx  |  2 +-
 .../document/statusBar/DocumentBadges.tsx     |  2 +-
 .../document/statusBar/DocumentStatusBar.tsx  |  2 +-
 .../statusBar/DocumentStatusBarActions.tsx    |  2 +-
 .../document/statusBar/DocumentStatusLine.tsx |  6 ++----
 .../statusBar/dialogs/ConfirmDialog.tsx       |  2 +-
 .../statusBar/dialogs/ModalDialog.tsx         |  2 +-
 .../statusBar/dialogs/PopoverDialog.tsx       |  2 +-
 .../document/statusBar/dialogs/constants.ts   |  2 +-
 .../desk/panes/document/timeline/timeline.tsx | 10 +++++++--
 .../panes/document/timeline/timelineItem.tsx  |  2 +-
 .../panes/document/timeline/timelineMenu.tsx  |  2 +-
 .../documentList/DocumentListPaneContent.tsx  |  6 +++---
 .../documentList/DocumentListPaneHeader.tsx   |  3 +--
 .../src/desk/panes/list/ListPaneHeader.tsx    |  2 +-
 .../src/desk/panes/loading/LoadingPane.tsx    |  3 +--
 .../userComponent/UserComponentPaneHeader.tsx |  2 +-
 .../__workshop__/MenuItemStory.tsx            |  0
 .../__workshop__/index.ts                     |  0
 .../{ui => ui-components}/button/Button.tsx   |  0
 .../src/{ui => ui-components}/button/index.ts |  0
 .../conditionalWrapper/ConditionalWrapper.tsx |  0
 .../conditionalWrapper/index.ts               |  0
 .../{ui => ui-components}/dialog/Dialog.tsx   |  0
 .../src/{ui => ui-components}/dialog/index.ts |  0
 .../sanity/src/{ui => ui-components}/index.ts |  0
 .../menuButton/MenuButton.tsx                 |  0
 .../{ui => ui-components}/menuButton/index.ts |  0
 .../menuGroup/MenuGroup.tsx                   |  0
 .../{ui => ui-components}/menuGroup/index.ts  |  0
 .../menuItem/MenuItem.tsx                     |  0
 .../{ui => ui-components}/menuItem/index.ts   |  0
 .../{ui => ui-components}/popover/Popover.tsx |  0
 .../{ui => ui-components}/popover/index.ts    |  0
 .../src/{ui => ui-components}/tab/Tab.tsx     |  0
 .../src/{ui => ui-components}/tab/index.ts    |  0
 .../{ui => ui-components}/tooltip/Tooltip.tsx |  0
 .../tooltip/constants.ts                      |  0
 .../sanity/src/ui-components/tooltip/index.ts |  2 ++
 packages/sanity/src/ui/tooltip/index.ts       |  1 -
 272 files changed, 331 insertions(+), 322 deletions(-)
 rename packages/sanity/src/{ui => core/components}/contextMenuButton/ContextMenuButton.tsx (90%)
 rename packages/sanity/src/{ui => core/components}/contextMenuButton/index.ts (100%)
 rename packages/sanity/src/{ui => core/components}/documentStatus/DocumentStatus.tsx (97%)
 rename packages/sanity/src/{ui => core/components}/documentStatus/index.ts (100%)
 rename packages/sanity/src/{ui => core/components}/documentStatusIndicator/DocumentStatusIndicator.tsx (98%)
 rename packages/sanity/src/{ui => core/components}/documentStatusIndicator/index.ts (100%)
 rename packages/sanity/src/{ui => core/components}/loadingBlock/LoadingBlock.tsx (97%)
 rename packages/sanity/src/{ui => core/components}/loadingBlock/index.ts (100%)
 rename packages/sanity/src/{ui => desk/components}/spacerButton/SpacerButton.tsx (91%)
 rename packages/sanity/src/{ui => desk/components}/spacerButton/index.ts (100%)
 rename packages/sanity/src/{ui => ui-components}/__workshop__/MenuItemStory.tsx (100%)
 rename packages/sanity/src/{ui => ui-components}/__workshop__/index.ts (100%)
 rename packages/sanity/src/{ui => ui-components}/button/Button.tsx (100%)
 rename packages/sanity/src/{ui => ui-components}/button/index.ts (100%)
 rename packages/sanity/src/{ui => ui-components}/conditionalWrapper/ConditionalWrapper.tsx (100%)
 rename packages/sanity/src/{ui => ui-components}/conditionalWrapper/index.ts (100%)
 rename packages/sanity/src/{ui => ui-components}/dialog/Dialog.tsx (100%)
 rename packages/sanity/src/{ui => ui-components}/dialog/index.ts (100%)
 rename packages/sanity/src/{ui => ui-components}/index.ts (100%)
 rename packages/sanity/src/{ui => ui-components}/menuButton/MenuButton.tsx (100%)
 rename packages/sanity/src/{ui => ui-components}/menuButton/index.ts (100%)
 rename packages/sanity/src/{ui => ui-components}/menuGroup/MenuGroup.tsx (100%)
 rename packages/sanity/src/{ui => ui-components}/menuGroup/index.ts (100%)
 rename packages/sanity/src/{ui => ui-components}/menuItem/MenuItem.tsx (100%)
 rename packages/sanity/src/{ui => ui-components}/menuItem/index.ts (100%)
 rename packages/sanity/src/{ui => ui-components}/popover/Popover.tsx (100%)
 rename packages/sanity/src/{ui => ui-components}/popover/index.ts (100%)
 rename packages/sanity/src/{ui => ui-components}/tab/Tab.tsx (100%)
 rename packages/sanity/src/{ui => ui-components}/tab/index.ts (100%)
 rename packages/sanity/src/{ui => ui-components}/tooltip/Tooltip.tsx (100%)
 rename packages/sanity/src/{ui => ui-components}/tooltip/constants.ts (100%)
 create mode 100644 packages/sanity/src/ui-components/tooltip/index.ts
 delete mode 100644 packages/sanity/src/ui/tooltip/index.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 9350a7e452a..e934853352d 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -262,7 +262,7 @@ const config = {
                   'TooltipProps',
                 ],
                 message:
-                  'Please use the (more opinionated) exported components in sanity/src/ui instead.',
+                  'Please use the (more opinionated) exported components in sanity/src/ui-components instead.',
               },
             ],
           },
diff --git a/dev/test-studio/assetSources/imageAssetSource.tsx b/dev/test-studio/assetSources/imageAssetSource.tsx
index b3354847f52..db3cbbbc015 100644
--- a/dev/test-studio/assetSources/imageAssetSource.tsx
+++ b/dev/test-studio/assetSources/imageAssetSource.tsx
@@ -1,10 +1,10 @@
 import {ImagesIcon} from '@sanity/icons'
 import {AssetSource, AssetSourceComponentProps} from '@sanity/types'
-import {Text} from '@sanity/ui'
-import {Dialog} from '../../../packages/sanity/src/ui'
+import {Box, Dialog, Text} from '@sanity/ui'
+import React from 'react'
 
 function ImageAssetSource(props: AssetSourceComponentProps) {
-  const {dialogHeaderTitle, onClose} = props
+  const {dialogHeaderTitle, onClose, ...restProps} = props
 
   return (
     <Dialog
@@ -13,9 +13,11 @@ function ImageAssetSource(props: AssetSourceComponentProps) {
       onClose={onClose}
       width={1}
     >
-      <Text muted size={1} weight="medium">
-        (custom image asset source)
-      </Text>
+      <Box padding={4}>
+        <Text muted size={1} weight="medium">
+          (custom image asset source)
+        </Text>
+      </Box>
     </Dialog>
   )
 }
diff --git a/dev/test-studio/documentActions/actions/TestCustomComponentAction.tsx b/dev/test-studio/documentActions/actions/TestCustomComponentAction.tsx
index 434651c9db6..3e213c15c63 100644
--- a/dev/test-studio/documentActions/actions/TestCustomComponentAction.tsx
+++ b/dev/test-studio/documentActions/actions/TestCustomComponentAction.tsx
@@ -1,7 +1,6 @@
-import {Text} from '@sanity/ui'
+import {Button, Card, Dialog, Stack, Text} from '@sanity/ui'
 import {DocumentActionComponent} from 'sanity'
-import {useCallback, useState} from 'react'
-import {Dialog} from '../../../../packages/sanity/src/ui'
+import React, {useCallback, useState} from 'react'
 
 export const TestCustomComponentAction: DocumentActionComponent = () => {
   const [open, setOpen] = useState<boolean>(false)
@@ -20,15 +19,15 @@ export const TestCustomComponentAction: DocumentActionComponent = () => {
           onClickOutside={toggleOpen}
           onClose={toggleOpen}
           width={1}
-          footer={{
-            confirmButton: {
-              onClick: toggleOpen,
-              tone: 'default',
-              text: 'Close',
-            },
-          }}
+          footer={
+            <Stack padding={2}>
+              <Button onClick={toggleOpen} text="Close" />
+            </Stack>
+          }
         >
-          <Text size={1}>This dialog is rendered using a custom dialog component.</Text>
+          <Card padding={5}>
+            <Text>This dialog is rendered using a custom dialog component.</Text>
+          </Card>
         </Dialog>
       ),
     },
diff --git a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
index 6154090df95..0e4f9ad03fb 100644
--- a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
+++ b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
@@ -1,6 +1,6 @@
 import {useLayer} from '@sanity/ui'
 import React, {useMemo} from 'react'
-import {Tooltip} from '../../ui'
+import {Tooltip} from '../../ui-components'
 import {useTranslation} from '../i18n/hooks/useTranslation'
 import {ConnectorContext} from './ConnectorContext'
 import {
diff --git a/packages/sanity/src/core/components/IntentButton.tsx b/packages/sanity/src/core/components/IntentButton.tsx
index cd6fe52c91b..c989672e5f2 100644
--- a/packages/sanity/src/core/components/IntentButton.tsx
+++ b/packages/sanity/src/core/components/IntentButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Button, ButtonProps} from '../../../src/ui'
+import {Button, ButtonProps} from '../../ui-components'
 
 import {IntentLink, IntentLinkProps} from 'sanity/router'
 
diff --git a/packages/sanity/src/core/components/StatusButton.tsx b/packages/sanity/src/core/components/StatusButton.tsx
index e1b366cec66..997860b615b 100644
--- a/packages/sanity/src/core/components/StatusButton.tsx
+++ b/packages/sanity/src/core/components/StatusButton.tsx
@@ -1,7 +1,7 @@
 import {useTheme} from '@sanity/ui'
 import {useMemo, HTMLProps, forwardRef, ForwardedRef, ReactNode} from 'react'
 import styled from 'styled-components'
-import {Button, ButtonProps} from '../../ui'
+import {Button, ButtonProps} from '../../ui-components'
 
 /** @hidden @beta */
 export type StatusButtonProps = ButtonProps & {
diff --git a/packages/sanity/src/core/components/TooltipOfDisabled.tsx b/packages/sanity/src/core/components/TooltipOfDisabled.tsx
index 1a58473a39f..612879e8494 100644
--- a/packages/sanity/src/core/components/TooltipOfDisabled.tsx
+++ b/packages/sanity/src/core/components/TooltipOfDisabled.tsx
@@ -1,5 +1,5 @@
 import React, {forwardRef} from 'react'
-import {Tooltip, TooltipProps} from '../../ui'
+import {Tooltip, TooltipProps} from '../../ui-components'
 
 /** @internal */
 export const TooltipOfDisabled = forwardRef<HTMLDivElement, TooltipProps>(function DisabledTooltip(
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
index 11c30c6166c..b754bd37ae8 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
@@ -14,8 +14,8 @@ import React, {
 } from 'react'
 import styled, {css} from 'styled-components'
 import {difference} from 'lodash'
-import {MenuButtonProps, Tooltip} from '../../../ui'
-import {ContextMenuButton} from '../../../ui/contextMenuButton'
+import {MenuButtonProps, Tooltip} from '../../../ui-components'
+import {ContextMenuButton} from '../contextMenuButton'
 import {CollapseOverflowMenu} from './CollapseOverflowMenu'
 import {ObserveElement} from './ObserveElement'
 import {CollapseMenuDivider} from './CollapseMenuDivider'
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
index 494755e9e76..09dd5a78d94 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
@@ -1,5 +1,5 @@
 import React, {forwardRef} from 'react'
-import {Button, ButtonProps, TooltipProps} from '../../../ui'
+import {Button, ButtonProps, TooltipProps} from '../../../ui-components'
 
 /** @internal */
 export interface CommonProps extends Omit<ButtonProps, 'text' | 'iconRight'> {
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
index bc52dcf0ff5..8127deeb380 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
@@ -1,6 +1,6 @@
 import {Menu, MenuDivider} from '@sanity/ui'
 import React, {ForwardedRef, forwardRef} from 'react'
-import {MenuButton, MenuButtonProps, MenuItem} from '../../../ui'
+import {MenuButton, MenuButtonProps, MenuItem} from '../../../ui-components'
 import {CollapseMenuProps} from './CollapseMenu'
 
 const MENU_BUTTON_POPOVER_PROPS: MenuButtonProps['popover'] = {
diff --git a/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx b/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx
index 08f834f6190..64e4972b066 100644
--- a/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx
@@ -2,7 +2,7 @@ import {IceCreamIcon} from '@sanity/icons'
 import {Card, Flex} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import React from 'react'
-import {ContextMenuButton} from '../../../../ui/contextMenuButton'
+import {ContextMenuButton} from '../../contextMenuButton'
 import {CollapseMenu, CollapseMenuButton} from '../'
 
 const GAP_OPTIONS = {'0': 0, '1': 1, '2': 2, '3': 3, '4': 4}
diff --git a/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx b/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
index 6fcfb26b4a8..62d0ae61dca 100644
--- a/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
+++ b/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
@@ -1,8 +1,8 @@
 import React, {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
 import {Flex} from '@sanity/ui'
 import styled from 'styled-components'
-import {MenuButtonProps} from '../../../ui'
-import {ContextMenuButton} from '../../../ui/contextMenuButton'
+import {MenuButtonProps} from '../../../ui-components'
+import {ContextMenuButton} from '../contextMenuButton'
 import {CollapseOverflowMenu} from '../collapseMenu/CollapseOverflowMenu'
 import {ObserveElement} from '../collapseMenu/ObserveElement'
 
diff --git a/packages/sanity/src/core/components/collapseTabList/__workshop__/CollapseTabListStory.tsx b/packages/sanity/src/core/components/collapseTabList/__workshop__/CollapseTabListStory.tsx
index 0e565ea01b6..60c6e217669 100644
--- a/packages/sanity/src/core/components/collapseTabList/__workshop__/CollapseTabListStory.tsx
+++ b/packages/sanity/src/core/components/collapseTabList/__workshop__/CollapseTabListStory.tsx
@@ -2,7 +2,7 @@ import {useState} from 'react'
 import {IceCreamIcon} from '@sanity/icons'
 import {Card, Flex} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {CollapseTabList} from '..'
 
 const GAP_OPTIONS = {'0': 0, '1': 1, '2': 2, '3': 3, '4': 4}
diff --git a/packages/sanity/src/core/components/commandList/__workshop__/KitchenSinkStory.tsx b/packages/sanity/src/core/components/commandList/__workshop__/KitchenSinkStory.tsx
index 4ac00a7081c..ac5cf1459b9 100644
--- a/packages/sanity/src/core/components/commandList/__workshop__/KitchenSinkStory.tsx
+++ b/packages/sanity/src/core/components/commandList/__workshop__/KitchenSinkStory.tsx
@@ -3,7 +3,7 @@ import {Box, Card, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 import React, {KeyboardEvent, useCallback, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {CommandList} from '../CommandList'
 import {
   CommandListGetItemDisabledCallback,
diff --git a/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx b/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx
index dd4733ac8f0..855a4405102 100644
--- a/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx
+++ b/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx
@@ -4,7 +4,7 @@ import {useSelect} from '@sanity/ui-workshop'
 import React, {useCallback, useState} from 'react'
 import {CommandList} from '../CommandList'
 import {CommandListRenderItemCallback} from '../types'
-import {Button, Popover} from '../../../../ui'
+import {Button, Popover} from '../../../../ui-components'
 
 const ITEMS = [...Array(50000).keys()]
 
diff --git a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx b/packages/sanity/src/core/components/contextMenuButton/ContextMenuButton.tsx
similarity index 90%
rename from packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
rename to packages/sanity/src/core/components/contextMenuButton/ContextMenuButton.tsx
index 564f3e7e956..4e31b28d39e 100644
--- a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
+++ b/packages/sanity/src/core/components/contextMenuButton/ContextMenuButton.tsx
@@ -1,7 +1,7 @@
 import {EllipsisHorizontalIcon} from '@sanity/icons'
 import React, {HTMLProps, forwardRef} from 'react'
-import {useTranslation} from '../../core'
-import {Button, ButtonProps} from '../button'
+import {useTranslation} from '../..'
+import {Button, ButtonProps} from '../../../ui-components'
 
 type ContextMenuButtonProps = Pick<
   ButtonProps,
diff --git a/packages/sanity/src/ui/contextMenuButton/index.ts b/packages/sanity/src/core/components/contextMenuButton/index.ts
similarity index 100%
rename from packages/sanity/src/ui/contextMenuButton/index.ts
rename to packages/sanity/src/core/components/contextMenuButton/index.ts
diff --git a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx b/packages/sanity/src/core/components/documentStatus/DocumentStatus.tsx
similarity index 97%
rename from packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
rename to packages/sanity/src/core/components/documentStatus/DocumentStatus.tsx
index 126e6027e8c..75e439d07ed 100644
--- a/packages/sanity/src/ui/documentStatus/DocumentStatus.tsx
+++ b/packages/sanity/src/core/components/documentStatus/DocumentStatus.tsx
@@ -1,7 +1,7 @@
 import {PreviewValue, SanityDocument} from '@sanity/types'
 import {Flex, Text} from '@sanity/ui'
 import styled from 'styled-components'
-import {useDateTimeFormat, useRelativeTime} from '../../core'
+import {useDateTimeFormat, useRelativeTime} from '../..'
 
 interface DocumentStatusProps {
   absoluteDate?: boolean
diff --git a/packages/sanity/src/ui/documentStatus/index.ts b/packages/sanity/src/core/components/documentStatus/index.ts
similarity index 100%
rename from packages/sanity/src/ui/documentStatus/index.ts
rename to packages/sanity/src/core/components/documentStatus/index.ts
diff --git a/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx b/packages/sanity/src/core/components/documentStatusIndicator/DocumentStatusIndicator.tsx
similarity index 98%
rename from packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
rename to packages/sanity/src/core/components/documentStatusIndicator/DocumentStatusIndicator.tsx
index f3c8667055f..459ca5d5089 100644
--- a/packages/sanity/src/ui/documentStatusIndicator/DocumentStatusIndicator.tsx
+++ b/packages/sanity/src/core/components/documentStatusIndicator/DocumentStatusIndicator.tsx
@@ -4,7 +4,7 @@ import {Text} from '@sanity/ui'
 import {useMemo} from 'react'
 import styled, {css} from 'styled-components'
 
-export interface DocumentStatusProps {
+interface DocumentStatusProps {
   draft?: PreviewValue | Partial<SanityDocument> | null
   hidePublishedStatus?: boolean
   published?: PreviewValue | Partial<SanityDocument> | null
diff --git a/packages/sanity/src/ui/documentStatusIndicator/index.ts b/packages/sanity/src/core/components/documentStatusIndicator/index.ts
similarity index 100%
rename from packages/sanity/src/ui/documentStatusIndicator/index.ts
rename to packages/sanity/src/core/components/documentStatusIndicator/index.ts
diff --git a/packages/sanity/src/core/components/index.ts b/packages/sanity/src/core/components/index.ts
index bf5040d0bb0..9b8a6a9df2f 100644
--- a/packages/sanity/src/core/components/index.ts
+++ b/packages/sanity/src/core/components/index.ts
@@ -26,3 +26,7 @@ export * from './WithReferringDocuments'
 export * from './zOffsets'
 export * from './BetaBadge'
 export * from './RelativeTime'
+export * from './documentStatusIndicator'
+export * from './loadingBlock'
+export * from './documentStatus'
+export * from './contextMenuButton'
diff --git a/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx b/packages/sanity/src/core/components/loadingBlock/LoadingBlock.tsx
similarity index 97%
rename from packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
rename to packages/sanity/src/core/components/loadingBlock/LoadingBlock.tsx
index 9554755bb5b..3cbb2112b10 100644
--- a/packages/sanity/src/ui/loadingBlock/LoadingBlock.tsx
+++ b/packages/sanity/src/core/components/loadingBlock/LoadingBlock.tsx
@@ -1,8 +1,7 @@
-/* eslint-disable no-restricted-imports */
-import {Card, Layer, Spinner, Text} from '@sanity/ui'
 import React from 'react'
+import {Card, Layer, Spinner, Text} from '@sanity/ui'
 import styled, {css} from 'styled-components'
-import {useTranslation} from '../../core'
+import {useTranslation} from '../..'
 
 // Enable to force debug background
 const DEBUG_MODE = false
diff --git a/packages/sanity/src/ui/loadingBlock/index.ts b/packages/sanity/src/core/components/loadingBlock/index.ts
similarity index 100%
rename from packages/sanity/src/ui/loadingBlock/index.ts
rename to packages/sanity/src/core/components/loadingBlock/index.ts
diff --git a/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx b/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx
index 9bc8b19926e..9a734495a4e 100644
--- a/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx
+++ b/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx
@@ -3,7 +3,7 @@ import {Box, Flex, Layer, ResponsiveWidthProps, Stack, Text, Theme} from '@sanit
 import React, {useCallback} from 'react'
 import styled, {css} from 'styled-components'
 import TrapFocus from 'react-focus-lock'
-import {Button, Popover, PopoverProps} from '../../../ui'
+import {Button, Popover, PopoverProps} from '../../../ui-components'
 import {PopoverContainer} from './PopoverContainer'
 
 const StyledPopover = styled(Popover)(() => {
diff --git a/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx b/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx
index d4189770e1d..b2ddf8e1712 100644
--- a/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx
+++ b/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx
@@ -2,7 +2,7 @@ import {DocumentIcon, EditIcon} from '@sanity/icons'
 import {Card, Container, Flex, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useString} from '@sanity/ui-workshop'
 import React, {ComponentType, createElement, useMemo} from 'react'
-import {ContextMenuButton} from '../../../../ui/contextMenuButton'
+import {ContextMenuButton} from '../../contextMenuButton'
 import {PortableTextPreviewLayoutKey, PreviewProps} from '../types'
 import {InlinePreview} from '../portableText/InlinePreview'
 import {BlockPreview} from '../portableText/BlockPreview'
diff --git a/packages/sanity/src/core/components/previews/general/MediaPreview.tsx b/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
index 5501d398ae8..eca79d4c1b3 100644
--- a/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
+++ b/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
 import {Box, Text} from '@sanity/ui'
-import {Tooltip} from '../../../../ui'
+import {Tooltip} from '../../../../ui-components'
 import {CircularProgress} from '../../progress'
 import {Media} from '../_common/Media'
 import {PREVIEW_SIZES} from '../constants'
diff --git a/packages/sanity/src/core/components/rovingFocus/__tests__/useRovingFocus.test.tsx b/packages/sanity/src/core/components/rovingFocus/__tests__/useRovingFocus.test.tsx
index 8f0b09cd953..125c30a0dd1 100644
--- a/packages/sanity/src/core/components/rovingFocus/__tests__/useRovingFocus.test.tsx
+++ b/packages/sanity/src/core/components/rovingFocus/__tests__/useRovingFocus.test.tsx
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event'
 import React, {useState} from 'react'
 import {Card, studioTheme, ThemeProvider} from '@sanity/ui'
 import {RovingFocusProps} from '../types'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {useRovingFocus} from '../useRovingFocus'
 
 interface TestProps extends Pick<RovingFocusProps, 'direction' | 'initialFocus' | 'loop'> {
diff --git a/packages/sanity/src/core/components/rovingFocus/__workshop__/RovingFocusStory.tsx b/packages/sanity/src/core/components/rovingFocus/__workshop__/RovingFocusStory.tsx
index 081eee99cf0..6ee6c0be84f 100644
--- a/packages/sanity/src/core/components/rovingFocus/__workshop__/RovingFocusStory.tsx
+++ b/packages/sanity/src/core/components/rovingFocus/__workshop__/RovingFocusStory.tsx
@@ -2,7 +2,7 @@ import {Card, Flex} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import React, {useState} from 'react'
 import {useRovingFocus} from '../useRovingFocus'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 
 const DIRECTION_OPTIONS: Record<string, 'horizontal' | 'vertical'> = {
   horizontal: 'horizontal',
diff --git a/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx b/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
index 48730df5bdd..f160d9e99ed 100644
--- a/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
+++ b/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
@@ -4,7 +4,7 @@ import type {User} from '@sanity/types'
 import {useUser} from '../../store'
 import {isRecord} from '../../util'
 import {useUserColor} from '../../user-color'
-import {Tooltip} from '../../../ui'
+import {Tooltip} from '../../../ui-components'
 
 /**
  * @hidden
diff --git a/packages/sanity/src/core/config/document/actions.ts b/packages/sanity/src/core/config/document/actions.ts
index ebc5eb16730..8dd19dc45fb 100644
--- a/packages/sanity/src/core/config/document/actions.ts
+++ b/packages/sanity/src/core/config/document/actions.ts
@@ -1,7 +1,7 @@
 import {type ButtonTone} from '@sanity/ui'
 import type React from 'react'
 import {type EditStateFor} from '../../store/_legacy'
-import {DialogProps} from '../../../ui'
+import {DialogProps} from '../../../ui-components'
 
 /**
  * @hidden
diff --git a/packages/sanity/src/core/field/__workshop__/DiffErrorBoundaryStory.tsx b/packages/sanity/src/core/field/__workshop__/DiffErrorBoundaryStory.tsx
index be0b6825266..b75a1e10652 100644
--- a/packages/sanity/src/core/field/__workshop__/DiffErrorBoundaryStory.tsx
+++ b/packages/sanity/src/core/field/__workshop__/DiffErrorBoundaryStory.tsx
@@ -1,7 +1,7 @@
 import {Box} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {DiffErrorBoundary} from '../diff/components/DiffErrorBoundary'
-import {Button} from '../../../ui'
+import {Button} from '../../../ui-components'
 import {useTranslation} from '../../i18n'
 
 export default function DiffErrorBoundaryStory() {
diff --git a/packages/sanity/src/core/field/diff/components/ChangeList.tsx b/packages/sanity/src/core/field/diff/components/ChangeList.tsx
index af8248f4bf5..95d13d0fdc9 100644
--- a/packages/sanity/src/core/field/diff/components/ChangeList.tsx
+++ b/packages/sanity/src/core/field/diff/components/ChangeList.tsx
@@ -11,7 +11,7 @@ import {undoChange} from '../changes/undoChange'
 import {useDocumentChange} from '../hooks/useDocumentChange'
 import {useDocumentPairPermissions} from '../../../store'
 import {useDocumentOperation} from '../../../hooks'
-import {Button, Popover} from '../../../../ui'
+import {Button, Popover} from '../../../../ui-components'
 import {useTranslation} from '../../../i18n'
 import {ChangeResolver} from './ChangeResolver'
 import {NoChanges} from './NoChanges'
diff --git a/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx b/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
index 329acd1e06d..45958adf4df 100644
--- a/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
+++ b/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
@@ -1,7 +1,7 @@
 import type {Path} from '@sanity/types'
 import {Text, Stack, Flex, Inline} from '@sanity/ui'
 import React from 'react'
-import {Tooltip, TooltipProps} from '../../../../ui'
+import {Tooltip, TooltipProps} from '../../../../ui-components'
 import {LegacyLayerProvider, UserAvatar} from '../../../components'
 import {useRelativeTime} from '../../../hooks'
 import {useUser} from '../../../store'
diff --git a/packages/sanity/src/core/field/diff/components/FieldChange.tsx b/packages/sanity/src/core/field/diff/components/FieldChange.tsx
index 4fe9025226f..bab7c4ab061 100644
--- a/packages/sanity/src/core/field/diff/components/FieldChange.tsx
+++ b/packages/sanity/src/core/field/diff/components/FieldChange.tsx
@@ -2,7 +2,7 @@ import React, {useCallback, useMemo, useState} from 'react'
 import {Box, Grid, Stack, Text, useClickOutside} from '@sanity/ui'
 import {ObjectSchemaType} from '@sanity/types'
 import {useDocumentOperation} from '../../../hooks'
-import {Button, Popover} from '../../../../ui'
+import {Button, Popover} from '../../../../ui-components'
 import {FieldChangeNode, FieldOperationsAPI} from '../../types'
 import {undoChange} from '../changes/undoChange'
 import {DiffContext} from '../contexts/DiffContext'
diff --git a/packages/sanity/src/core/field/diff/components/GroupChange.tsx b/packages/sanity/src/core/field/diff/components/GroupChange.tsx
index f83ecd4d048..c11d8273cb8 100644
--- a/packages/sanity/src/core/field/diff/components/GroupChange.tsx
+++ b/packages/sanity/src/core/field/diff/components/GroupChange.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useContext, useMemo, useState} from 'react'
 import {Box, Grid, Stack, Text, useClickOutside} from '@sanity/ui'
-import {Button, Popover} from '../../../../ui'
+import {Button, Popover} from '../../../../ui-components'
 import {useDocumentOperation} from '../../../hooks'
 import {undoChange} from '../changes/undoChange'
 import {isFieldChange} from '../helpers'
diff --git a/packages/sanity/src/core/field/diff/components/RevertChangesButton.tsx b/packages/sanity/src/core/field/diff/components/RevertChangesButton.tsx
index 3e7c2977c29..12d3880c771 100644
--- a/packages/sanity/src/core/field/diff/components/RevertChangesButton.tsx
+++ b/packages/sanity/src/core/field/diff/components/RevertChangesButton.tsx
@@ -1,7 +1,7 @@
 import {RevertIcon} from '@sanity/icons'
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {Button, ButtonProps} from '../../../../ui'
+import {Button, ButtonProps} from '../../../../ui-components'
 import {useTranslation} from '../../../i18n'
 
 const Root = styled(Button)`
diff --git a/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx b/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx
index 3ba9f3f1908..76a42a99029 100644
--- a/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx
+++ b/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx
@@ -4,7 +4,7 @@ import {toString} from '@sanity/util/paths'
 import {isKeySegment, type ObjectSchemaType, type Path, type PortableTextChild} from '@sanity/types'
 import React, {useCallback, useContext, useEffect, useMemo, useState, type ReactNode} from 'react'
 import styled from 'styled-components'
-import {Popover} from '../../../../../../ui'
+import {Popover} from '../../../../../../ui-components'
 import {useTranslation} from '../../../../../i18n'
 import {ChangeList, DiffContext, DiffTooltip, useDiffAnnotationColor} from '../../../../diff'
 import type {ObjectDiff} from '../../../../types'
diff --git a/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx b/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx
index b097015d959..76636dfe3de 100644
--- a/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx
+++ b/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx
@@ -10,7 +10,7 @@ import {Card, Flex, Text, useClickOutside} from '@sanity/ui'
 import {FOCUS_TERMINATOR, toString} from '@sanity/util/paths'
 import React, {useCallback, useContext, useState, useEffect, useMemo} from 'react'
 import styled from 'styled-components'
-import {Popover} from '../../../../../../ui'
+import {Popover} from '../../../../../../ui-components'
 import {useTranslation} from '../../../../../i18n'
 import {ChangeList, DiffContext, DiffTooltip, useDiffAnnotationColor} from '../../../../diff'
 import type {ObjectDiff} from '../../../../types'
diff --git a/packages/sanity/src/core/form/__workshop__/_common/FilterFieldInput.tsx b/packages/sanity/src/core/form/__workshop__/_common/FilterFieldInput.tsx
index a8231b2b592..abd3b9a4608 100644
--- a/packages/sanity/src/core/form/__workshop__/_common/FilterFieldInput.tsx
+++ b/packages/sanity/src/core/form/__workshop__/_common/FilterFieldInput.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback, useMemo} from 'react'
 import {Card, Code, Grid, Stack, TextArea, Text} from '@sanity/ui'
 import styled from 'styled-components'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 
 const ExampleCode = styled(Code)`
   cursor: pointer;
diff --git a/packages/sanity/src/core/form/__workshop__/_common/TypeTester.tsx b/packages/sanity/src/core/form/__workshop__/_common/TypeTester.tsx
index f76fe925df0..c6f61c561da 100644
--- a/packages/sanity/src/core/form/__workshop__/_common/TypeTester.tsx
+++ b/packages/sanity/src/core/form/__workshop__/_common/TypeTester.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, useRef, useState, useMemo} from 'react'
 import {Card, Stack, Text, TextArea} from '@sanity/ui'
 import styled, {createGlobalStyle} from 'styled-components'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {runTest} from './typer'
 
 const HIGHLIGHT_CLASSNAME = 'js-highlight-selected-input'
diff --git a/packages/sanity/src/core/form/__workshop__/_common/resolvePreviewComponent.tsx b/packages/sanity/src/core/form/__workshop__/_common/resolvePreviewComponent.tsx
index c8a4b65c24d..111efbec032 100644
--- a/packages/sanity/src/core/form/__workshop__/_common/resolvePreviewComponent.tsx
+++ b/packages/sanity/src/core/form/__workshop__/_common/resolvePreviewComponent.tsx
@@ -1,7 +1,7 @@
 import {Card, Code, ErrorBoundary, Stack} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {PreviewLoader} from '../../../preview'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 
 export const resolvePreviewComponent = () => TestPreview
 
diff --git a/packages/sanity/src/core/form/components/EditPortal.tsx b/packages/sanity/src/core/form/components/EditPortal.tsx
index 84b1582835b..eb649a6b91f 100644
--- a/packages/sanity/src/core/form/components/EditPortal.tsx
+++ b/packages/sanity/src/core/form/components/EditPortal.tsx
@@ -1,6 +1,6 @@
 import React, {type ReactNode, useState, useRef} from 'react'
 import {Box, ResponsiveWidthProps} from '@sanity/ui'
-import {Dialog} from '../../../ui'
+import {Dialog} from '../../../ui-components'
 import {PresenceOverlay} from '../../presence'
 import {PopoverDialog} from '../../components'
 import {VirtualizerScrollInstanceProvider} from '../inputs/arrays/ArrayOfObjectsInput/List/VirtualizerScrollInstanceProvider'
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
index 3dff87aa0ff..4daed69aa8b 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
@@ -4,7 +4,7 @@ import {Box, Flex, Placement, Stack, Text} from '@sanity/ui'
 import styled from 'styled-components'
 import {useTranslation} from '../../../i18n'
 import {useListFormat} from '../../../hooks'
-import {Tooltip} from '../../../../ui'
+import {Tooltip} from '../../../../ui-components'
 
 /** @internal */
 export interface FormFieldValidationStatusProps {
diff --git a/packages/sanity/src/core/form/components/tagInput/tagInput.tsx b/packages/sanity/src/core/form/components/tagInput/tagInput.tsx
index b04b8e87e74..74579da2e91 100644
--- a/packages/sanity/src/core/form/components/tagInput/tagInput.tsx
+++ b/packages/sanity/src/core/form/components/tagInput/tagInput.tsx
@@ -14,7 +14,7 @@ import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react
 import styled, {css} from 'styled-components'
 import {useTranslation} from '../../../i18n'
 import {studioLocaleNamespace} from '../../../i18n/localeNamespaces'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {focusRingBorderStyle, focusRingStyle} from './styles'
 
 const Root = styled(Card)((props: {theme: Theme}): CSSObject => {
diff --git a/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx b/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx
index 4fb0d661555..c8275b63830 100644
--- a/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx
+++ b/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx
@@ -3,7 +3,7 @@
 import {EllipsisHorizontalIcon} from '@sanity/icons'
 import {Card, Menu} from '@sanity/ui'
 import React, {memo, useCallback, useId, useMemo, useState} from 'react'
-import {Button, ButtonProps, MenuButton, MenuButtonProps} from '../../../../ui'
+import {Button, ButtonProps, MenuButton, MenuButtonProps} from '../../../../ui-components'
 import {DocumentFieldActionGroup, DocumentFieldActionNode} from '../../../config'
 import {useI18nText} from '../../../i18n'
 import {FieldActionMenuNode} from './FieldActionMenuNode'
diff --git a/packages/sanity/src/core/form/field/actions/FieldActionMenuGroup.tsx b/packages/sanity/src/core/form/field/actions/FieldActionMenuGroup.tsx
index fa9c68bab95..9e9ca5fadc4 100644
--- a/packages/sanity/src/core/form/field/actions/FieldActionMenuGroup.tsx
+++ b/packages/sanity/src/core/form/field/actions/FieldActionMenuGroup.tsx
@@ -1,6 +1,6 @@
 import {Box, Text} from '@sanity/ui'
 import React from 'react'
-import {MenuGroup, MenuGroupProps} from '../../../../ui'
+import {MenuGroup, MenuGroupProps} from '../../../../ui-components'
 import {DocumentFieldActionGroup} from '../../../config'
 import {useI18nText} from '../../../i18n'
 import {FieldActionMenuNode} from './FieldActionMenuNode'
diff --git a/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx b/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx
index 2a922bd6f87..43bada7c0ce 100644
--- a/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx
+++ b/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx
@@ -4,7 +4,7 @@ import {CheckmarkIcon} from '@sanity/icons'
 import {TooltipOfDisabled} from '../../../components'
 import {DocumentFieldActionItem} from '../../../config'
 import {useI18nText} from '../../../i18n'
-import {MenuItem} from '../../../../ui'
+import {MenuItem} from '../../../../ui-components'
 
 export function FieldActionMenuItem(props: {action: DocumentFieldActionItem}) {
   const {action} = props
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
index 8d2b49f166f..dd96e7da695 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
@@ -12,8 +12,8 @@ import {set, unset} from '../../patch'
 import {useOnClickOutside} from '../../hooks/useOnClickOutside'
 import {getPublishedId, isNonNullable} from '../../../util'
 import {FIXME} from '../../../FIXME'
-import {MenuButton, MenuItem} from '../../../../ui'
-import {ContextMenuButton} from '../../../../ui/contextMenuButton'
+import {MenuButton, MenuItem} from '../../../../ui-components'
+import {ContextMenuButton} from '../../../components/contextMenuButton'
 import {ChangeIndicator} from '../../../changeIndicators'
 import {PreviewCard} from '../../../components'
 import {useDidUpdate} from '../../hooks/useDidUpdate'
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
index 534a7f63b4b..981213598cb 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
@@ -4,7 +4,7 @@ import {Badge, Box, Flex, Inline, Text} from '@sanity/ui'
 import {AccessDeniedIcon, HelpCircleIcon, LaunchIcon} from '@sanity/icons'
 import imageUrlBuilder from '@sanity/image-url'
 import {isImageSource} from '@sanity/asset-utils'
-import {Tooltip} from '../../../../ui'
+import {Tooltip} from '../../../../ui-components'
 import {useTranslation} from '../../../i18n'
 import type {DocumentAvailability} from '../../../preview'
 import {DefaultPreview, TextWithTone, type PreviewMediaDimensions} from '../../../components'
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/DisabledFeatureWarning.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/DisabledFeatureWarning.tsx
index 451d67d420b..b12d2c26bc7 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/DisabledFeatureWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/DisabledFeatureWarning.tsx
@@ -2,7 +2,7 @@ import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
 import {Card, Flex, Box, Text, Stack} from '@sanity/ui'
 import type {CrossDatasetReferenceValue} from '@sanity/types'
 import React, {useMemo} from 'react'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {Translate, useTranslation} from '../../../i18n'
 
 type Props = {
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/ReferenceAutocomplete.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/ReferenceAutocomplete.tsx
index 45e8acabc24..d40b023a4a2 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/ReferenceAutocomplete.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/ReferenceAutocomplete.tsx
@@ -1,7 +1,7 @@
 import React, {forwardRef, useCallback} from 'react'
 import {Autocomplete, Box, Flex, Placement, Text} from '@sanity/ui'
 import styled from 'styled-components'
-import {Popover} from '../../../../ui'
+import {Popover} from '../../../../ui-components'
 import {Translate, useTranslation} from '../../../i18n'
 
 const StyledPopover = styled(Popover)`
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
index 8cd203a253c..16058b35121 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
@@ -2,7 +2,7 @@ import React, {KeyboardEvent, forwardRef, useCallback, useRef, useState} from 'r
 import FocusLock from 'react-focus-lock'
 import {Box, Flex, LayerProvider, useClickOutside, useForwardedRef} from '@sanity/ui'
 import {CalendarIcon} from '@sanity/icons'
-import {Button, Popover} from '../../../../../ui'
+import {Button, Popover} from '../../../../../ui-components'
 import {DatePicker} from './DatePicker'
 import {LazyTextInput} from './LazyTextInput'
 import {CalendarLabels} from './calendar/types'
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx
index ecd63f025ea..dbd604062e0 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx
@@ -3,7 +3,7 @@ import {ChevronLeftIcon, ChevronRightIcon} from '@sanity/icons'
 import {addDays, addMonths, setDate, setHours, setMinutes, setMonth, setYear} from 'date-fns'
 import {range} from 'lodash'
 import React, {KeyboardEvent, forwardRef, useCallback, useEffect} from 'react'
-import {Button} from '../../../../../../ui'
+import {Button} from '../../../../../../ui-components'
 import {CalendarMonth} from './CalendarMonth'
 import {ARROW_KEYS, DEFAULT_TIME_PRESETS, HOURS_24} from './constants'
 import {features} from './features'
diff --git a/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx b/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx
index 04218ea280e..ef3c0f929f9 100644
--- a/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx
+++ b/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx
@@ -6,7 +6,7 @@ import {PatchEvent, set, unset} from '../../patch'
 import {Alert} from '../../components/Alert'
 import {Details} from '../../components/Details'
 import {isDev} from '../../../environment'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {converters as CONVERTERS, ValueConverter} from './converters'
 import {UntypedValueInput} from './UntypedValueInput'
 
diff --git a/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx b/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx
index 001b524c3e7..78f45e4e141 100644
--- a/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx
+++ b/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback, useMemo} from 'react'
 import {Card, Code, Grid, Stack, Text} from '@sanity/ui'
 import {PatchEvent, setIfMissing, unset} from '../../patch'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {Alert} from '../../components/Alert'
 import {Details} from '../../components/Details'
 import {useSchema} from '../../../hooks'
diff --git a/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx b/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
index 6d736eac214..bd735242135 100644
--- a/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
+++ b/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
@@ -2,7 +2,7 @@ import React, {useCallback} from 'react'
 import {Box, Card, Code, Stack, Text} from '@sanity/ui'
 import {TrashIcon} from '@sanity/icons'
 import {FormPatch, PatchEvent, unset} from '../../patch'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {Details} from '../../components/Details'
 import {Alert} from '../../components/Alert'
 import {isDev} from '../../../environment'
diff --git a/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/GroupTab.tsx b/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/GroupTab.tsx
index 48bc6695331..a1df77cd192 100644
--- a/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/GroupTab.tsx
+++ b/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/GroupTab.tsx
@@ -1,5 +1,5 @@
 import React, {forwardRef} from 'react'
-import {Tab} from '../../../../../ui'
+import {Tab} from '../../../../../ui-components'
 
 interface GroupType {
   'aria-controls': string
diff --git a/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx b/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx
index 590a6e1cd2a..f48a9cf35db 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx
@@ -20,7 +20,7 @@ import {
   useLayer,
 } from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
-import {TOOLTIP_DELAY_PROPS} from '../../../../ui/tooltip/constants'
+import {TOOLTIP_DELAY_PROPS} from '../../../../ui-components'
 import {useTranslation} from '../../../i18n'
 import {Toolbar} from './toolbar'
 import {Decorator} from './text'
diff --git a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/_common/resolvePreviewComponent.tsx b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/_common/resolvePreviewComponent.tsx
index ac3848da076..b08094ee6c4 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/_common/resolvePreviewComponent.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/_common/resolvePreviewComponent.tsx
@@ -1,6 +1,6 @@
 import {Card, Code, ErrorBoundary, Stack} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
-import {Button} from '../../../../../../ui'
+import {Button} from '../../../../../../ui-components'
 import {SanityDefaultPreview, PreviewLoader} from '../../../../../preview'
 
 export const resolvePreviewComponent = () => TestPreview
diff --git a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
index 1c5cdd7369e..17a15bf6045 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
@@ -3,7 +3,7 @@ import {CopyIcon} from '@sanity/icons'
 import {keyGenerator} from '@sanity/portable-text-editor'
 import {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
 import {RenderBlockActionsCallback} from '../../../../types/_transitional'
-import {Button} from '../../../../../../ui'
+import {Button} from '../../../../../../ui-components'
 
 const BlockActions = memo(function BlockActions(props: {
   block: PortableTextBlock
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
index 4e9baa839a2..1dcdb2f7d16 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
@@ -2,7 +2,7 @@ import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-e
 import type {ObjectSchemaType, Path, PortableTextObject} from '@sanity/types'
 import React, {ComponentType, useCallback, useMemo, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
-import {Tooltip} from '../../../../../ui'
+import {Tooltip} from '../../../../../ui-components'
 import {pathToString} from '../../../../field'
 import type {
   BlockAnnotationProps,
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx
index d7e437d1efc..1ef8028bce4 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx
@@ -2,7 +2,7 @@ import React, {useState, useRef, useMemo, useEffect, useCallback, startTransitio
 import {Box, Flex, Text, useGlobalKeyDown, useTheme} from '@sanity/ui'
 import {EditIcon, TrashIcon} from '@sanity/icons'
 import {useTranslation} from '../../../../i18n'
-import {Button, Popover, PopoverProps} from '../../../../../ui'
+import {Button, Popover, PopoverProps} from '../../../../../ui-components'
 
 const POPOVER_FALLBACK_PLACEMENTS: PopoverProps['fallbackPlacements'] = ['top', 'bottom']
 
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
index 4d622171db5..d4955b726fd 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
@@ -8,7 +8,7 @@ import {ObjectSchemaType, Path, PortableTextBlock, isImage} from '@sanity/types'
 import {Box, Flex, ResponsivePaddingProps} from '@sanity/ui'
 import React, {PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
-import {Tooltip} from '../../../../../ui'
+import {Tooltip} from '../../../../../ui-components'
 import {
   BlockProps,
   RenderAnnotationCallback,
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
index fb413cee074..2eea2bef726 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
@@ -11,7 +11,7 @@ import React, {
   useRef,
 } from 'react'
 import {type PortableTextBlock, isReference} from '@sanity/types'
-import {Button, MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui'
+import {Button, MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {IntentLink} from 'sanity/router'
 
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
index 5946ca65304..06affe1822c 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
@@ -6,7 +6,7 @@ import {
 import {ObjectSchemaType, Path, PortableTextBlock, PortableTextChild} from '@sanity/types'
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
-import {Tooltip} from '../../../../../ui'
+import {Tooltip} from '../../../../../ui-components'
 import {
   BlockProps,
   RenderAnnotationCallback,
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx
index 6ee872a1486..6c21ce5d07d 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx
@@ -2,7 +2,7 @@ import React, {useRef, useCallback, useMemo} from 'react'
 import {Box, Inline, Text, useGlobalKeyDown, useTheme} from '@sanity/ui'
 import {EditIcon, TrashIcon} from '@sanity/icons'
 import {useTranslation} from '../../../../i18n'
-import {Button, Popover, PopoverProps} from '../../../../../ui'
+import {Button, Popover, PopoverProps} from '../../../../../ui-components'
 
 const POPOVER_FALLBACK_PLACEMENTS: PopoverProps['fallbackPlacements'] = ['top', 'bottom']
 
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/modals/DialogModal.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/modals/DialogModal.tsx
index 0e02a506be5..3b633317c0b 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/modals/DialogModal.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/modals/DialogModal.tsx
@@ -2,7 +2,7 @@ import React, {useId, useRef, useState} from 'react'
 import {Box} from '@sanity/ui'
 import {PresenceOverlay} from '../../../../../presence'
 import {VirtualizerScrollInstanceProvider} from '../../../arrays/ArrayOfObjectsInput/List/VirtualizerScrollInstanceProvider'
-import {Dialog} from '../../../../../../ui'
+import {Dialog} from '../../../../../../ui-components'
 import {ModalWidth} from './types'
 
 interface DefaultEditDialogProps {
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts
index cb56ef6c8e8..46af15cc7db 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts
@@ -1,6 +1,6 @@
 import {Box} from '@sanity/ui'
 import styled from 'styled-components'
-import {Popover} from '../../../../../../ui'
+import {Popover} from '../../../../../../ui-components'
 
 export const RootPopover = styled(Popover)`
   & > div {
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx
index 0e873556fbd..4c8c2920c99 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx
@@ -3,7 +3,7 @@
 import {CloseIcon} from '@sanity/icons'
 import {Box, Flex, Text, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
-import {Button, PopoverProps} from '../../../../../../ui'
+import {Button, PopoverProps} from '../../../../../../ui-components'
 import {PresenceOverlay} from '../../../../../presence'
 import {PortableTextEditorElement} from '../../Compositor'
 import {VirtualizerScrollInstanceProvider} from '../../../arrays/ArrayOfObjectsInput/List/VirtualizerScrollInstanceProvider'
diff --git a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
index 409f5449526..2bb08e9b35d 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
@@ -7,7 +7,7 @@ import {
   usePortableTextEditor,
 } from '@sanity/portable-text-editor'
 import {isEqual} from '@sanity/util/paths'
-import {Tooltip} from '../../../../../ui'
+import {Tooltip} from '../../../../../ui-components'
 import {
   BlockProps,
   RenderAnnotationCallback,
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
index a697bee72fb..98937965904 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
@@ -6,9 +6,9 @@ import {
   usePortableTextEditorSelection,
 } from '@sanity/portable-text-editor'
 import {isKeySegment} from '@sanity/types'
-import {PopoverProps} from '../../../../../ui'
+import {PopoverProps} from '../../../../../ui-components'
 import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
-import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
+import {ContextMenuButton} from '../../../../components/contextMenuButton'
 import {PTEToolbarAction, PTEToolbarActionGroup} from './types'
 import {useActiveActionKeys, useFocusBlock} from './hooks'
 import {getActionIcon} from './helpers'
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
index 3ef42f8f947..25314d77488 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
@@ -19,7 +19,7 @@ import {
   BlockQuote,
   Normal,
 } from '../text/textStyles'
-import {Button, MenuButton, MenuButtonProps} from '../../../../../ui'
+import {Button, MenuButton, MenuButtonProps} from '../../../../../ui-components'
 import {useActiveStyleKeys, useFocusBlock} from './hooks'
 import {BlockStyleItem} from './types'
 
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
index 424e64214a1..25907618abe 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
@@ -1,8 +1,8 @@
 import React, {memo, useCallback, useMemo} from 'react'
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
 import {upperFirst} from 'lodash'
-import {PopoverProps} from '../../../../../ui'
-import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
+import {PopoverProps} from '../../../../../ui-components'
+import {ContextMenuButton} from '../../../../components/contextMenuButton'
 import {useTranslation} from '../../../../i18n'
 import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
 import {BlockItem} from './types'
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
index 9e7333e3e29..d3c2d405b18 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
@@ -11,7 +11,7 @@ import {CollapseIcon, ExpandIcon} from '@sanity/icons'
 import styled, {css} from 'styled-components'
 import {useRovingFocus} from '../../../../components'
 import {useResolveInitialValueForType} from '../../../../store'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {ActionMenu} from './ActionMenu'
 import {BlockStyleSelect} from './BlockStyleSelect'
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
index 3d8c2d5aa51..5c784d55e2d 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
@@ -3,7 +3,13 @@ import {AddIcon} from '@sanity/icons'
 import {Menu} from '@sanity/ui'
 import {useGetI18nText, useTranslation} from '../../../i18n'
 import {InsufficientPermissionsMessage} from '../../../components'
-import {Button, MenuButton, type MenuButtonProps, MenuItem, Tooltip} from '../../../../ui'
+import {
+  Button,
+  MenuButton,
+  type MenuButtonProps,
+  MenuItem,
+  Tooltip,
+} from '../../../../ui-components'
 import {useCurrentUser} from '../../../store'
 import type {CreateReferenceOption} from './types'
 
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
index 3912f703155..f88973a4499 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
@@ -2,7 +2,7 @@ import React, {ComponentType, ReactNode, Fragment} from 'react'
 import type {Reference, ReferenceSchemaType} from '@sanity/types'
 import {Badge, Box, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {AccessDeniedIcon, HelpCircleIcon} from '@sanity/icons'
-import {Tooltip} from '../../../../ui'
+import {Tooltip} from '../../../../ui-components'
 import type {RenderPreviewCallback} from '../../types'
 import {SanityDefaultPreview} from '../../../preview'
 import {Translate, useTranslation} from '../../../i18n'
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceAutocomplete.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceAutocomplete.tsx
index f58a46b4c89..04097dd9c0c 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceAutocomplete.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceAutocomplete.tsx
@@ -1,7 +1,7 @@
 import React, {forwardRef, useCallback} from 'react'
 import {Autocomplete, Box, Flex, Placement, Text} from '@sanity/ui'
 import styled from 'styled-components'
-import {Popover} from '../../../../ui'
+import {Popover} from '../../../../ui-components'
 import {Translate, useTranslation} from '../../../i18n'
 
 const StyledPopover = styled(Popover)`
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
index 3daee468516..f1f11a62660 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
@@ -28,9 +28,8 @@ import {FieldActionsProvider, FieldActionsResolver} from '../../field'
 import {DocumentFieldActionNode} from '../../../config'
 import {usePublishedId} from '../../contexts/DocumentIdProvider'
 import {useTranslation} from '../../../i18n'
-import {MenuButton, MenuItem} from '../../../../ui'
-import {ContextMenuButton} from '../../../../ui/contextMenuButton'
-import {TOOLTIP_DELAY_PROPS} from '../../../../ui/tooltip/constants'
+import {MenuButton, MenuItem, TOOLTIP_DELAY_PROPS} from '../../../../ui-components'
+import {ContextMenuButton} from '../../../components/contextMenuButton'
 import {useReferenceInput} from './useReferenceInput'
 import {useReferenceInfo} from './useReferenceInfo'
 import {PreviewReferenceValue} from './PreviewReferenceValue'
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceFinalizeAlertStrip.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceFinalizeAlertStrip.tsx
index dfdb56a098e..211f7c401d7 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceFinalizeAlertStrip.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceFinalizeAlertStrip.tsx
@@ -1,7 +1,7 @@
 import type {ReferenceSchemaType} from '@sanity/types'
 import {Stack, Text} from '@sanity/ui'
 import {AlertStrip} from '../../components/AlertStrip'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {Translate, useTranslation} from '../../../i18n'
 
 /**
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx
index ab73bd52841..321a4fd2c79 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx
@@ -18,7 +18,7 @@ import {PreviewCard} from '../../../components'
 import {getPublishedId, isNonNullable} from '../../../util'
 import {useDidUpdate} from '../../hooks/useDidUpdate'
 import {useOnClickOutside} from '../../hooks/useOnClickOutside'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {Translate, useTranslation} from '../../../i18n'
 import {useReferenceInput} from './useReferenceInput'
 import type {
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
index b3d371bb075..e0db6e05192 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
@@ -8,15 +8,15 @@ import {
   TrashIcon,
 } from '@sanity/icons'
 import type {Reference, ReferenceSchemaType, SchemaType} from '@sanity/types'
-import {LoadingBlock} from '../../../../ui/loadingBlock'
+import {LoadingBlock} from '../../../components/loadingBlock'
 import type {ObjectItem, ObjectItemProps} from '../../types'
 import {useScrollIntoViewOnFocusWithin} from '../../hooks/useScrollIntoViewOnFocusWithin'
 import {useDidUpdate} from '../../hooks/useDidUpdate'
 import {randomKey} from '../../utils/randomKey'
 import {FormFieldSet, FormFieldValidationStatus} from '../../components/formField'
 import {FieldPresence} from '../../../presence'
-import {MenuButton, MenuItem} from '../../../../ui'
-import {ContextMenuButton} from '../../../../ui/contextMenuButton'
+import {MenuButton, MenuItem} from '../../../../ui-components'
+import {ContextMenuButton} from '../../../components/contextMenuButton'
 import {useTranslation} from '../../../i18n'
 import {ChangeIndicator} from '../../../changeIndicators'
 import {RowLayout} from '../arrays/layouts/RowLayout'
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceMetadataLoadFailure.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceMetadataLoadFailure.tsx
index 116c35175d9..e26470e0cad 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceMetadataLoadFailure.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceMetadataLoadFailure.tsx
@@ -1,6 +1,6 @@
 import {Stack, Text} from '@sanity/ui'
 import React from 'react'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {useTranslation} from '../../../i18n'
 import {AlertStrip} from '../../components/AlertStrip'
 
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
index 38d240a042f..23d80259daa 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
@@ -1,8 +1,8 @@
 import React, {useMemo} from 'react'
 import {ObjectSchemaType} from '@sanity/types'
 import {Badge, Box, Inline} from '@sanity/ui'
-import {DocumentStatus} from '../../../../ui/documentStatus'
-import {DocumentStatusIndicator} from '../../../../ui/documentStatusIndicator'
+import {DocumentStatus} from '../../../components/documentStatus'
+import {DocumentStatusIndicator} from '../../../components/documentStatusIndicator'
 import {PreviewLayoutKey} from '../../../components'
 import {RenderPreviewCallback} from '../../types'
 import {useDocumentPresence} from '../../../store'
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceStrengthMismatchAlertStrip.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceStrengthMismatchAlertStrip.tsx
index 4ad98b0a692..68bed43a45f 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceStrengthMismatchAlertStrip.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceStrengthMismatchAlertStrip.tsx
@@ -1,6 +1,6 @@
 import {Stack, Text} from '@sanity/ui'
 import React from 'react'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {Translate, useTranslation} from '../../../i18n'
 import {AlertStrip} from '../../components/AlertStrip'
 
diff --git a/packages/sanity/src/core/form/inputs/Slug/SlugInput.tsx b/packages/sanity/src/core/form/inputs/Slug/SlugInput.tsx
index 10887ed1e59..4e7712d04fb 100644
--- a/packages/sanity/src/core/form/inputs/Slug/SlugInput.tsx
+++ b/packages/sanity/src/core/form/inputs/Slug/SlugInput.tsx
@@ -10,7 +10,7 @@ import type {
 } from '@sanity/types'
 import * as PathUtils from '@sanity/util/paths'
 import {Box, Card, Flex, Stack, TextInput} from '@sanity/ui'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {PatchEvent, set, setIfMissing, unset} from '../../patch'
 import type {ObjectInputProps} from '../../types'
 import {useGetFormValue} from '../../contexts/GetFormValue'
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
index a543b17c1d7..dd8195125e1 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
@@ -3,7 +3,7 @@ import {AddIcon} from '@sanity/icons'
 import React, {useId, useCallback} from 'react'
 import {Grid, Menu} from '@sanity/ui'
 import {ArrayInputFunctionsProps, ObjectItem} from '../../../types'
-import {Button, MenuButton, MenuButtonProps, MenuItem, Tooltip} from '../../../../../ui'
+import {Button, MenuButton, MenuButtonProps, MenuItem, Tooltip} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
index e9c93fa621e..ab8b8d274c7 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
@@ -1,12 +1,12 @@
 import React, {useCallback, useId} from 'react'
 import {TrashIcon} from '@sanity/icons'
 import {Menu} from '@sanity/ui'
-import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
+import {ContextMenuButton} from '../../../../../components/contextMenuButton'
 import {ArrayItemError} from '../../../../store'
 import {useFormCallbacks} from '../../../../studio/contexts/FormCallbacks'
 import {PatchEvent, unset} from '../../../../patch'
 import {CellLayout} from '../../layouts/CellLayout'
-import {MenuButton, MenuItem} from '../../../../../../ui'
+import {MenuButton, MenuItem} from '../../../../../../ui-components'
 import {useTranslation} from '../../../../../i18n'
 import {IncompatibleItemType} from './IncompatibleItemType'
 
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
index 96a3200161e..6571e76ab9b 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
@@ -4,8 +4,8 @@ import {SchemaType} from '@sanity/types'
 import {CopyIcon as DuplicateIcon, TrashIcon} from '@sanity/icons'
 import styled from 'styled-components'
 import {getSchemaTypeTitle} from '../../../../../schema'
-import {MenuButton, MenuItem} from '../../../../../../ui'
-import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
+import {MenuButton, MenuItem} from '../../../../../../ui-components'
+import {ContextMenuButton} from '../../../../../components/contextMenuButton'
 import {ObjectItem, ObjectItemProps} from '../../../../types'
 import {useScrollIntoViewOnFocusWithin} from '../../../../hooks/useScrollIntoViewOnFocusWithin'
 import {useDidUpdate} from '../../../../hooks/useDidUpdate'
@@ -20,7 +20,7 @@ import {createProtoArrayValue} from '../createProtoArrayValue'
 import {InsertMenu} from '../InsertMenu'
 import {FIXME} from '../../../../../FIXME'
 import {EditPortal} from '../../../../components/EditPortal'
-import {LoadingBlock} from '../../../../../../ui/loadingBlock'
+import {LoadingBlock} from '../../../../../components/loadingBlock'
 import {useTranslation} from '../../../../../i18n'
 
 type GridItemProps<Item extends ObjectItem> = Omit<ObjectItemProps<Item>, 'renderDefault'>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx
index 179144de0a1..a460159fd2f 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx
@@ -3,7 +3,7 @@ import React, {useCallback} from 'react'
 import {BulbOutlineIcon, UnknownIcon} from '@sanity/icons'
 import {resolveTypeName} from '@sanity/util/content'
 import styled from 'styled-components'
-import {Popover} from '../../../../../../ui'
+import {Popover} from '../../../../../../ui-components'
 import {Translate, useTranslation} from '../../../../../i18n'
 
 const PopoverCard = styled(Card)`
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
index 686ff42bf84..59acbee52a4 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
@@ -2,7 +2,7 @@
 import {SchemaType} from '@sanity/types'
 import React, {ComponentProps, memo} from 'react'
 import {InsertAboveIcon, InsertBelowIcon} from '@sanity/icons'
-import {MenuGroup, MenuItem, PopoverProps} from '../../../../../ui'
+import {MenuGroup, MenuItem, PopoverProps} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 
 interface Props {
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
index d17d9a41d53..97ee129b6f8 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
@@ -3,8 +3,8 @@ import {TrashIcon} from '@sanity/icons'
 import {Box, Menu} from '@sanity/ui'
 import {ArrayItemError} from '../../../../store'
 import {RowLayout} from '../../layouts/RowLayout'
-import {MenuButton, MenuItem} from '../../../../../../ui'
-import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
+import {MenuButton, MenuItem} from '../../../../../../ui-components'
+import {ContextMenuButton} from '../../../../../components/contextMenuButton'
 import {useTranslation} from '../../../../../i18n'
 import {IncompatibleItemType} from './IncompatibleItemType'
 
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx
index 37e0facfe70..671cd6935a9 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx
@@ -3,7 +3,7 @@ import React, {useCallback} from 'react'
 import {BulbOutlineIcon, UnknownIcon} from '@sanity/icons'
 import {resolveTypeName} from '@sanity/util/content'
 import styled from 'styled-components'
-import {Popover} from '../../../../../../ui'
+import {Popover} from '../../../../../../ui-components'
 import {Translate, useTranslation} from '../../../../../i18n'
 
 const PopoverCard = styled(Card)`
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
index 4fba924862d..d3bfef2aa78 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
@@ -2,8 +2,8 @@ import {Box, Card, CardTone, Menu} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import {SchemaType} from '@sanity/types'
 import {CopyIcon as DuplicateIcon, TrashIcon} from '@sanity/icons'
-import {MenuButton, MenuItem} from '../../../../../../ui'
-import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
+import {MenuButton, MenuItem} from '../../../../../../ui-components'
+import {ContextMenuButton} from '../../../../../components/contextMenuButton'
 import {getSchemaTypeTitle} from '../../../../../schema'
 import {ObjectItem, ObjectItemProps} from '../../../../types'
 import {useScrollIntoViewOnFocusWithin} from '../../../../hooks/useScrollIntoViewOnFocusWithin'
@@ -18,7 +18,7 @@ import {RowLayout} from '../../layouts/RowLayout'
 import {createProtoArrayValue} from '../createProtoArrayValue'
 import {InsertMenu} from '../InsertMenu'
 import {EditPortal} from '../../../../components/EditPortal'
-import {LoadingBlock} from '../../../../../../ui/loadingBlock'
+import {LoadingBlock} from '../../../../../components/loadingBlock'
 import {useTranslation} from '../../../../../i18n'
 
 type PreviewItemProps<Item extends ObjectItem> = Omit<ObjectItemProps<Item>, 'renderDefault'>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
index 7ac40640a79..77ad03ddebf 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
@@ -4,7 +4,7 @@ import {AddIcon} from '@sanity/icons'
 import React, {useMemo, useId} from 'react'
 import {Grid, Menu} from '@sanity/ui'
 import {ArrayInputFunctionsProps} from '../../../types'
-import {Tooltip, Button, MenuButton, MenuItem} from '../../../../../ui'
+import {Tooltip, Button, MenuButton, MenuItem} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 
 /**
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
index 10de1d68f18..e831f8ef1eb 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
@@ -8,8 +8,8 @@ import {useTranslation} from '../../../../i18n'
 import {PrimitiveItemProps} from '../../../types/itemProps'
 import {RowLayout} from '../layouts/RowLayout'
 import {FieldPresence} from '../../../../presence'
-import {MenuButton, MenuItem} from '../../../../../ui'
-import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
+import {MenuButton, MenuItem} from '../../../../../ui-components'
+import {ContextMenuButton} from '../../../../components/contextMenuButton'
 import {getEmptyValue} from './getEmptyValue'
 
 export type DefaultItemProps = Omit<PrimitiveItemProps, 'renderDefault'> & {
diff --git a/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx b/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
index 20dcc0f74c7..0ae588b4b93 100644
--- a/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import React, {useContext} from 'react'
 import {DragHandleIcon} from '@sanity/icons'
 import {useSortable} from '@dnd-kit/sortable'
-import {Button, ButtonProps} from '../../../../../ui'
+import {Button, ButtonProps} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 
 const DragHandleButton = styled(Button)<{grid?: boolean}>`
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
index 33f8d553d2c..e5aebe0ca97 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
@@ -3,8 +3,8 @@ import React, {ReactNode, useCallback, useEffect, useState} from 'react'
 import {Box, Card, Flex, Menu, Stack, Text, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
 import {formatBytes} from '../../common/helper'
 import {useTranslation} from '../../../../i18n'
-import {Popover} from '../../../../../ui'
-import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
+import {Popover} from '../../../../../ui-components'
+import {ContextMenuButton} from '../../../../components/contextMenuButton'
 
 type Props = {
   children: ReactNode
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
index 8cd458ca12e..af7cc17ad9e 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
@@ -17,7 +17,7 @@ import {Box, Card, Menu, ThemeColorToneKey, ToastParams} from '@sanity/ui'
 import {SanityClient} from '@sanity/client'
 import {isFileSource} from '@sanity/asset-utils'
 import {WithReferencedAsset} from '../../../utils/WithReferencedAsset'
-import {Button, MenuButton, MenuItem} from '../../../../../ui'
+import {Button, MenuButton, MenuItem} from '../../../../../ui-components'
 import {Uploader, UploaderResolver, UploadOptions} from '../../../studio/uploads/types'
 import {FileInfo, FileTarget} from '../common/styles'
 import {UploadProgress} from '../common/UploadProgress'
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx
index f2f2c999d9d..a1e8f81cd56 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx
@@ -1,7 +1,7 @@
 import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
 import {Card, Flex, Box, Text, Stack} from '@sanity/ui'
 import React from 'react'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 
 type Props = {
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
index ff88335e3b8..6d5bbc84d78 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
@@ -8,10 +8,9 @@ import {
   useGlobalKeyDown,
 } from '@sanity/ui'
 import styled from 'styled-components'
-import {Button, Popover} from '../../../../../ui'
-import {TOOLTIP_DELAY_PROPS} from '../../../../../ui/tooltip/constants'
+import {Button, Popover, TOOLTIP_DELAY_PROPS} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
-import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
+import {ContextMenuButton} from '../../../../components/contextMenuButton'
 
 export const MenuActionsWrapper = styled(Inline)`
   position: absolute;
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
index 60b4ea0e2d5..a39d67b9339 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
@@ -17,7 +17,7 @@ import {
 import React, {ReactNode} from 'react'
 import {SanityClient} from '@sanity/client'
 import {isImageSource} from '@sanity/asset-utils'
-import {Button, Dialog, MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui'
+import {Button, Dialog, MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui-components'
 import {PatchEvent, setIfMissing, unset} from '../../../patch'
 import {FieldMember} from '../../../store'
 import {InputProps, ObjectInputProps} from '../../../types'
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
index a0738c89849..805cd3fdd89 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
@@ -2,7 +2,7 @@ import React, {ComponentProps, useCallback, useEffect, useState} from 'react'
 
 import {AccessDeniedIcon, ImageIcon, ReadOnlyIcon} from '@sanity/icons'
 import {Box, Card, CardTone, Heading, Text, useElementRect} from '@sanity/ui'
-import {LoadingBlock} from '../../../../../ui/loadingBlock'
+import {LoadingBlock} from '../../../../components/loadingBlock'
 import {useTranslation} from '../../../../i18n'
 import {MAX_DEFAULT_HEIGHT, RatioBox, Overlay, FlexOverlay} from './ImagePreview.styled'
 
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
index 1587f937be3..0d6a7ee645b 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
@@ -1,7 +1,7 @@
 import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
 import {Card, Flex, Box, Text, Stack} from '@sanity/ui'
 import React from 'react'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 
 type Props = {
diff --git a/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
index 3b19cb273d4..627c5afe983 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
@@ -10,9 +10,9 @@ import {useDidUpdate} from '../../../hooks/useDidUpdate'
 import {ChangeIndicator} from '../../../../changeIndicators'
 import {EMPTY_ARRAY} from '../../../../util'
 import {useTranslation} from '../../../../i18n'
+import {LoadingBlock} from '../../../../components/loadingBlock'
 import {ImageTool, HotspotImage, DEFAULT_CROP, DEFAULT_HOTSPOT} from './imagetool'
 import {useLoadImage} from './useLoadImage'
-import {LoadingBlock} from '../../../../../ui/loadingBlock'
 
 export interface ImageToolInputProps
   extends Omit<ObjectInputProps<Image, ImageSchemaType>, 'markers' | 'renderDefault'> {
diff --git a/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx b/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx
index 009d32e45a3..acfb871ca5a 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {LoadingBlock} from '../../../../../../ui/loadingBlock'
+import {LoadingBlock} from '../../../../../components/loadingBlock'
 import {ImageLoader} from './ImageLoader'
 import {ToolCanvas} from './ToolCanvas'
 import {Resize} from './Resize'
diff --git a/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx b/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx
index 42f9b689ee5..78ec425cee2 100644
--- a/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx
+++ b/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx
@@ -1,7 +1,7 @@
 import {Card, Container, Flex} from '@sanity/ui'
 import React from 'react'
 import {UploadPlaceholder} from '../common/UploadPlaceholder'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 
 export default function UploadPlaceholderStory() {
   return (
diff --git a/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
index aba4f97ea46..5b94b3b078d 100644
--- a/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
@@ -2,7 +2,7 @@ import React, {MouseEventHandler, useCallback} from 'react'
 
 import {UploadIcon, CopyIcon, ResetIcon, DownloadIcon} from '@sanity/icons'
 import {MenuDivider, useToast} from '@sanity/ui'
-import {MenuItem} from '../../../../../ui'
+import {MenuItem} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {FileInputMenuItem} from './FileInputMenuItem/FileInputMenuItem'
 
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputButton/FileInputButton.tsx b/packages/sanity/src/core/form/inputs/files/common/FileInputButton/FileInputButton.tsx
index 82dd0914b8f..9115a6940a0 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputButton/FileInputButton.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputButton/FileInputButton.tsx
@@ -1,5 +1,5 @@
 import React, {useId} from 'react'
-import {ButtonProps} from '../../../../../../ui'
+import {ButtonProps} from '../../../../../../ui-components'
 import {FileButton} from './styles'
 
 export type FileInputButtonProps = ButtonProps & {
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts b/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts
index a1b4eed64e8..87a10783ac3 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts
@@ -1,6 +1,6 @@
 import {Theme} from '@sanity/ui'
 import styled, {css} from 'styled-components'
-import {Button} from '../../../../../../ui'
+import {Button} from '../../../../../../ui-components'
 import {focusRingStyle} from '../../../../components/withFocusRing/helpers'
 
 export const FileButton = styled(Button).attrs({forwardedAs: 'label'})(
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx
index 45a574b13b2..09ec9e154ae 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import {MenuItem} from '../../../../../../ui'
+import {MenuItem} from '../../../../../../ui-components'
 
 export const FileMenuItem = styled(MenuItem)`
   position: relative;
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx
index 2e99f0ef208..26edab1d5c3 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx
@@ -1,5 +1,5 @@
 import React, {useCallback, useId} from 'react'
-import {MenuItemProps} from '../../../../../../ui'
+import {MenuItemProps} from '../../../../../../ui-components'
 import {FileMenuItem} from './FileInputMenuItem.styled'
 
 export interface FileInputMenuItemProps extends Omit<MenuItemProps, 'onSelect'> {
diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
index 3d2c23ecbcf..6cc3bd18eb6 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
@@ -2,7 +2,7 @@ import React, {useEffect} from 'react'
 import {Flex, Text, Inline, Card} from '@sanity/ui'
 import {UploadState} from '@sanity/types'
 import {LinearProgress} from '../../../../components'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {Translate, useTranslation} from '../../../../i18n'
 import {STALE_UPLOAD_MS} from '../constants'
 import {CardWrapper, FlexWrapper, LeftSection, CodeWrapper} from './UploadProgress.styled'
diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx
index 1fa842f15e6..4bf92fb61ff 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx
@@ -1,7 +1,7 @@
 import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
 import {Card, Flex, Box, Text, Stack} from '@sanity/ui'
 import React from 'react'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {STALE_UPLOAD_MS} from '../constants'
 
diff --git a/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx b/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx
index 305727db11a..60944d0a566 100644
--- a/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx
+++ b/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx
@@ -3,7 +3,7 @@ import React, {useCallback} from 'react'
 import {BulbOutlineIcon, UnknownIcon} from '@sanity/icons'
 import {resolveTypeName} from '@sanity/util/content'
 import styled from 'styled-components'
-import {Popover} from '../../../../ui'
+import {Popover} from '../../../../ui-components'
 import {Translate, useTranslation} from '../../../i18n'
 
 const PopoverCard = styled(Card)`
diff --git a/packages/sanity/src/core/form/members/object/errors/DuplicateKeysAlert.tsx b/packages/sanity/src/core/form/members/object/errors/DuplicateKeysAlert.tsx
index 8753f3d5b96..52215bb4748 100644
--- a/packages/sanity/src/core/form/members/object/errors/DuplicateKeysAlert.tsx
+++ b/packages/sanity/src/core/form/members/object/errors/DuplicateKeysAlert.tsx
@@ -1,7 +1,7 @@
 import {Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {FormField} from '../../../components/formField'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {Alert} from '../../../components/Alert'
 import {DuplicateKeysError} from '../../../store/types/memberErrors'
 import {PatchEvent, set} from '../../../patch'
diff --git a/packages/sanity/src/core/form/members/object/errors/MissingKeysAlert.tsx b/packages/sanity/src/core/form/members/object/errors/MissingKeysAlert.tsx
index 554764957e6..4f9764ddfb7 100644
--- a/packages/sanity/src/core/form/members/object/errors/MissingKeysAlert.tsx
+++ b/packages/sanity/src/core/form/members/object/errors/MissingKeysAlert.tsx
@@ -1,7 +1,7 @@
 import {Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {randomKey} from '@sanity/util/content'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {MissingKeysError} from '../../../store/types/memberErrors'
 import {Details} from '../../../components/Details'
 import {Alert} from '../../../components/Alert'
diff --git a/packages/sanity/src/core/form/members/object/errors/MixedArrayAlert.tsx b/packages/sanity/src/core/form/members/object/errors/MixedArrayAlert.tsx
index 1c54fce2b1f..ba403e14ebd 100644
--- a/packages/sanity/src/core/form/members/object/errors/MixedArrayAlert.tsx
+++ b/packages/sanity/src/core/form/members/object/errors/MixedArrayAlert.tsx
@@ -1,7 +1,7 @@
 import {Stack, Text} from '@sanity/ui'
 import React from 'react'
 import {isPlainObject} from 'lodash'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {Alert} from '../../../components/Alert'
 import {Details} from '../../../components/Details'
 import {isDev} from '../../../../environment'
diff --git a/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx b/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx
index 7f51247f4b9..56c2df2ba6f 100644
--- a/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx
@@ -14,7 +14,7 @@ import {
 } from '@sanity/ui'
 import {ChevronDownIcon, ChevronUpIcon, DocumentIcon, LinkIcon, TrashIcon} from '@sanity/icons'
 import {Asset as AssetType} from '@sanity/types'
-import {Tooltip} from '../../../../../ui'
+import {Tooltip} from '../../../../../ui-components'
 import {useClient, useRelativeTime, useUnitFormatter} from '../../../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../studioClient'
 import {AssetDeleteDialog} from '../shared/AssetDeleteDialog'
diff --git a/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx b/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
index ffe7928c744..0fbfdedceee 100644
--- a/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
@@ -8,7 +8,7 @@ import {
   useToast,
 } from '@sanity/ui'
 import {Asset} from '@sanity/types'
-import {LoadingBlock} from '../../../../../ui/loadingBlock'
+import {LoadingBlock} from '../../../../components/loadingBlock'
 import {useClient} from '../../../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../studioClient'
 import {AssetMenu} from '../shared/AssetMenu'
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
index d4ce2192e01..c8ff7f7f8a8 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
@@ -2,8 +2,8 @@ import React, {useMemo} from 'react'
 import {TrashIcon} from '@sanity/icons'
 import {Box, Stack} from '@sanity/ui'
 import {Asset as AssetType} from '@sanity/types'
-import {Dialog} from '../../../../../ui'
-import {LoadingBlock} from '../../../../../ui/loadingBlock'
+import {Dialog} from '../../../../../ui-components'
+import {LoadingBlock} from '../../../../components/loadingBlock'
 import {useReferringDocuments} from '../../../../hooks/useReferringDocuments'
 import {useTranslation} from '../../../../i18n'
 import {AssetUsageList} from './AssetUsageList'
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx
index af469b5f833..b713f6d9fe1 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx
@@ -1,10 +1,10 @@
 import {LinkIcon, TrashIcon} from '@sanity/icons'
 import {Menu} from '@sanity/ui'
 import React from 'react'
-import {MenuButton, MenuItem} from '../../../../../ui'
+import {MenuButton, MenuItem} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {AssetMenuAction} from '../types'
-import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
+import {ContextMenuButton} from '../../../../components/contextMenuButton'
 
 const MENU_POPOVER_PROPS = {portal: true, placement: 'right'} as const
 
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
index ebca73e4f3d..6a3f9ea9c17 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
@@ -1,8 +1,7 @@
 import React, {useMemo} from 'react'
-import {Box, Stack} from '@sanity/ui'
 import {Asset as AssetType} from '@sanity/types'
-import {Dialog} from '../../../../../ui'
-import {LoadingBlock} from '../../../../../ui/loadingBlock'
+import {Dialog} from '../../../../../ui-components'
+import {LoadingBlock} from '../../../../components/loadingBlock'
 import {useReferringDocuments} from '../../../../hooks/useReferringDocuments'
 import {useTranslation} from '../../../../i18n'
 import {AssetUsageList} from './AssetUsageList'
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
index b37e925418c..b327003dcfa 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
@@ -10,7 +10,7 @@ import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../studioClient'
 import {Translate, useTranslation} from '../../../../i18n'
 import {FileListView} from '../file/FileListView'
 import {ImageListView} from '../image/ImageListView'
-import {Button, Dialog} from '../../../../../ui'
+import {Button, Dialog} from '../../../../../ui-components'
 
 const PER_PAGE = 200
 const ASSET_TYPE_IMAGE = 'sanity.imageAsset'
diff --git a/packages/sanity/src/core/i18n/components/LocaleProvider.tsx b/packages/sanity/src/core/i18n/components/LocaleProvider.tsx
index 544fbac17f9..4f74d6b42b3 100644
--- a/packages/sanity/src/core/i18n/components/LocaleProvider.tsx
+++ b/packages/sanity/src/core/i18n/components/LocaleProvider.tsx
@@ -1,7 +1,7 @@
 import {I18nextProvider} from 'react-i18next'
 import React, {PropsWithChildren, Suspense, useCallback, useMemo, useSyncExternalStore} from 'react'
 import type {i18n} from 'i18next'
-import {LoadingBlock} from '../../../ui/loadingBlock'
+import {LoadingBlock} from '../../components/loadingBlock'
 import {useSource} from '../../studio'
 import {storePreferredLocale} from '../localeStore'
 import {LocaleContext, type LocaleContextValue} from '../LocaleContext'
diff --git a/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx b/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
index a0fd1efc666..2c3acc4a3a3 100644
--- a/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
+++ b/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
@@ -7,7 +7,7 @@ import {getTheme_v2} from '@sanity/ui/theme'
 import {UserAvatar} from '../components'
 import {DocumentPresence} from '../store'
 import {isNonNullable} from '../util'
-import {Tooltip, TooltipProps} from '../../ui'
+import {Tooltip, TooltipProps} from '../../ui-components'
 
 /** @internal */
 export interface DocumentPreviewPresenceProps {
diff --git a/packages/sanity/src/core/presence/PresenceTooltip.tsx b/packages/sanity/src/core/presence/PresenceTooltip.tsx
index 9e98236df35..292aaa6976d 100644
--- a/packages/sanity/src/core/presence/PresenceTooltip.tsx
+++ b/packages/sanity/src/core/presence/PresenceTooltip.tsx
@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react'
 import {Flex, Stack, Text} from '@sanity/ui'
-import {Tooltip} from '../../ui'
+import {Tooltip} from '../../ui-components'
 import {UserAvatar} from '../components/userAvatar'
 import {FormNodePresence} from './types'
 
diff --git a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
index 9824c3300f8..88471ba410c 100644
--- a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
+++ b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
@@ -14,7 +14,7 @@ import React, {
 import {isValidElementType} from 'react-is'
 import {SanityImageSource} from '@sanity/image-url/lib/types/types'
 import {isImageSource} from '@sanity/asset-utils'
-import {Tooltip} from '../../../ui'
+import {Tooltip} from '../../../ui-components'
 import {PreviewProps} from '../../components/previews'
 import {useClient} from '../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../studioClient'
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/CurrentUserStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/CurrentUserStory.tsx
index 04ed73226c1..cee3186b5c4 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/CurrentUserStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/CurrentUserStory.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {Box, Code, Text} from '@sanity/ui'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {useSource} from '../../../studio'
 
 export default function CurrentUserStory() {
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPairStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPairStory.tsx
index cea1a148dc4..bdfbc09b3e7 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPairStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPairStory.tsx
@@ -1,6 +1,6 @@
 import {Box, Code, Text} from '@sanity/ui'
 import React, {useEffect, useState} from 'react'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {useDocumentStore} from '../datastores'
 import {RemoteSnapshotVersionEvent} from '../document/document-pair/checkoutPair'
 
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/HistoryTimelineStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/HistoryTimelineStory.tsx
index be1dc22ec8b..26c998ed3ab 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/HistoryTimelineStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/HistoryTimelineStory.tsx
@@ -4,7 +4,7 @@ import {Box, Card, Code, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {format} from 'date-fns'
 import {omit} from 'lodash'
 import React, {useCallback, useMemo, useState} from 'react'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 import {ChangeFieldWrapper} from '../../../changeIndicators'
 import {
   ChangeList,
diff --git a/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx b/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx
index caed5bbaf71..1aeed183afb 100644
--- a/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx
+++ b/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx
@@ -5,8 +5,8 @@ import React, {useEffect, useState} from 'react'
 import type {Observable} from 'rxjs'
 import type {AuthConfig} from '../../../config'
 import {createHookFromObservableFactory} from '../../../util'
-import {Button} from '../../../../ui'
-import {LoadingBlock} from '../../../../ui/loadingBlock'
+import {Button} from '../../../../ui-components'
+import {LoadingBlock} from '../../../components/loadingBlock'
 import {CustomLogo, providerLogos} from './providerLogos'
 import type {LoginComponentProps} from './types'
 
diff --git a/packages/sanity/src/core/studio/AuthBoundary.tsx b/packages/sanity/src/core/studio/AuthBoundary.tsx
index 12fc40525f8..665c56877b3 100644
--- a/packages/sanity/src/core/studio/AuthBoundary.tsx
+++ b/packages/sanity/src/core/studio/AuthBoundary.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react'
-import {LoadingBlock} from '../../ui/loadingBlock'
+import {LoadingBlock} from '../components/loadingBlock'
 import {AuthenticateScreen, NotAuthenticatedScreen} from './screens'
 import {useActiveWorkspace} from './activeWorkspaceMatcher'
 
diff --git a/packages/sanity/src/core/studio/StudioErrorBoundary.tsx b/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
index a768f05a6e5..a3690a200e6 100644
--- a/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
+++ b/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
@@ -3,7 +3,7 @@
 import React, {useCallback, useState} from 'react'
 import {Card, Code, Container, ErrorBoundary, Heading, Stack} from '@sanity/ui'
 import {useHotModuleReload} from 'use-hot-module-reload'
-import {Button} from '../../ui'
+import {Button} from '../../ui-components'
 import {SchemaError} from '../config'
 import {isRecord} from '../util'
 import {CorsOriginError} from '../store'
diff --git a/packages/sanity/src/core/studio/StudioLayout.tsx b/packages/sanity/src/core/studio/StudioLayout.tsx
index cf655d0f548..9b186e525b3 100644
--- a/packages/sanity/src/core/studio/StudioLayout.tsx
+++ b/packages/sanity/src/core/studio/StudioLayout.tsx
@@ -11,7 +11,7 @@ import React, {
   useState,
 } from 'react'
 import styled from 'styled-components'
-import {LoadingBlock} from '../../ui/loadingBlock'
+import {LoadingBlock} from '../components/loadingBlock'
 import {NoToolsScreen} from './screens/NoToolsScreen'
 import {RedirectingScreen} from './screens/RedirectingScreen'
 import {ToolNotFoundScreen} from './screens/ToolNotFoundScreen'
diff --git a/packages/sanity/src/core/studio/StudioProvider.tsx b/packages/sanity/src/core/studio/StudioProvider.tsx
index 9fa94b94063..781fa32b71f 100644
--- a/packages/sanity/src/core/studio/StudioProvider.tsx
+++ b/packages/sanity/src/core/studio/StudioProvider.tsx
@@ -6,7 +6,7 @@ import javascript from 'refractor/lang/javascript'
 import json from 'refractor/lang/json'
 import jsx from 'refractor/lang/jsx'
 import typescript from 'refractor/lang/typescript'
-import {LoadingBlock} from '../../ui/loadingBlock'
+import {LoadingBlock} from '../components/loadingBlock'
 import {UserColorManagerProvider} from '../user-color'
 import {ErrorLogger} from '../error/ErrorLogger'
 import {ResourceCacheProvider} from '../store'
diff --git a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
index b5a6dcf932b..0b6f9787d6e 100644
--- a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
@@ -14,8 +14,7 @@ import React, {useCallback, useState, useMemo, useEffect, useRef, useContext} fr
 import styled from 'styled-components'
 import {isDev} from '../../../environment'
 import {useWorkspace} from '../../workspace'
-import {Button} from '../../../../ui'
-import {TOOLTIP_DELAY_PROPS} from '../../../../ui/tooltip/constants'
+import {Button, TOOLTIP_DELAY_PROPS} from '../../../../ui-components'
 import {NavbarContext} from '../../StudioLayout'
 import {useToolMenuComponent} from '../../studio-components-hooks'
 import {UserMenu} from './userMenu'
diff --git a/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx b/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
index 1ad9c8c9b98..04c434152d9 100644
--- a/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
@@ -2,7 +2,7 @@
 import React, {useCallback, useState, useId} from 'react'
 import {Stack, Text} from '@sanity/ui'
 import {WarningOutlineIcon} from '@sanity/icons'
-import {Dialog} from '../../../../../ui'
+import {Dialog} from '../../../../../ui-components'
 import {useSchema} from '../../../../hooks'
 import {SchemaProblemGroups} from '../../../screens/schemaErrors/SchemaProblemGroups'
 import {useColorScheme} from '../../../colorScheme'
diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/DialogContent.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/DialogContent.tsx
index 7f09b6f7caa..4efb17b88eb 100644
--- a/packages/sanity/src/core/studio/components/navbar/free-trial/DialogContent.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/free-trial/DialogContent.tsx
@@ -2,7 +2,7 @@ import {Box, Flex, Heading} from '@sanity/ui'
 import styled from 'styled-components'
 import {CloseIcon} from '@sanity/icons'
 import {useColorSchemeValue} from '../../../colorScheme'
-import {Button, Dialog} from '../../../../../ui'
+import {Button, Dialog} from '../../../../../ui-components'
 import {FreeTrialDialog} from './types'
 import {DescriptionSerializer} from './DescriptionSerializer'
 
diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx
index 14e964c7ff0..c89119782dc 100644
--- a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx
@@ -1,5 +1,5 @@
 import {useCallback, useEffect, useRef, useState} from 'react'
-import {Popover} from '../../../../../ui'
+import {Popover} from '../../../../../ui-components'
 import {useColorSchemeValue} from '../../../colorScheme'
 import {PopoverContent} from './PopoverContent'
 import {DialogContent} from './DialogContent'
diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialButton.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialButton.tsx
index dce802f40db..9fd6d2bbc01 100644
--- a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialButton.tsx
@@ -10,7 +10,7 @@ import {BoltIcon} from '@sanity/icons'
 import {purple, yellow} from '@sanity/color'
 import {useTranslation} from 'react-i18next'
 import {forwardRef} from 'react'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 
 const StyledButton = styled(UIButton)`
   padding: 2px;
diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/PopoverContent.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/PopoverContent.tsx
index 71294ef10ba..fb65c73f22e 100644
--- a/packages/sanity/src/core/studio/components/navbar/free-trial/PopoverContent.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/free-trial/PopoverContent.tsx
@@ -1,6 +1,6 @@
 import {Card, Heading, Flex, Box, Container} from '@sanity/ui'
 import styled from 'styled-components'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {FreeTrialDialog} from './types'
 import {DescriptionSerializer} from './DescriptionSerializer'
 
diff --git a/packages/sanity/src/core/studio/components/navbar/navDrawer/ApperaranceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/navDrawer/ApperaranceMenu.tsx
index 0456f14aa66..5be956c163c 100644
--- a/packages/sanity/src/core/studio/components/navbar/navDrawer/ApperaranceMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/navDrawer/ApperaranceMenu.tsx
@@ -1,6 +1,6 @@
 import {CheckmarkIcon} from '@sanity/icons'
 import {Card, Stack} from '@sanity/ui'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {type StudioThemeColorSchemeKey} from '../../../../theme'
 import {useTranslation} from '../../../../i18n'
 import {useColorSchemeOptions} from '../../../colorScheme'
diff --git a/packages/sanity/src/core/studio/components/navbar/navDrawer/LocaleMenu.tsx b/packages/sanity/src/core/studio/components/navbar/navDrawer/LocaleMenu.tsx
index 223820c8062..a58d64d66fc 100644
--- a/packages/sanity/src/core/studio/components/navbar/navDrawer/LocaleMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/navDrawer/LocaleMenu.tsx
@@ -2,7 +2,7 @@ import {CheckmarkIcon} from '@sanity/icons'
 import {Card, Stack} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {useLocale} from '../../../../i18n/hooks/useLocale'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 
 export function LocaleMenu() {
   const {changeLocale, currentLocale, locales} = useLocale()
diff --git a/packages/sanity/src/core/studio/components/navbar/navDrawer/ManageMenu.tsx b/packages/sanity/src/core/studio/components/navbar/navDrawer/ManageMenu.tsx
index 7445e465239..16625323bc2 100644
--- a/packages/sanity/src/core/studio/components/navbar/navDrawer/ManageMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/navDrawer/ManageMenu.tsx
@@ -1,6 +1,6 @@
 import {CogIcon, UsersIcon} from '@sanity/icons'
 import {Card, Stack} from '@sanity/ui'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {userHasRole} from '../../../../util'
 import {useWorkspace} from '../../../workspace'
diff --git a/packages/sanity/src/core/studio/components/navbar/navDrawer/NavDrawer.tsx b/packages/sanity/src/core/studio/components/navbar/navDrawer/NavDrawer.tsx
index 82b797b462d..57b254b5cfa 100644
--- a/packages/sanity/src/core/studio/components/navbar/navDrawer/NavDrawer.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/navDrawer/NavDrawer.tsx
@@ -4,7 +4,7 @@ import React, {memo, useCallback} from 'react'
 import styled from 'styled-components'
 import TrapFocus from 'react-focus-lock'
 import {AnimatePresence, motion, Transition, Variants} from 'framer-motion'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {useWorkspace} from '../../../workspace'
 import {Tool} from '../../../../config'
 import {useToolMenuComponent} from '../../../studio-components-hooks'
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts
index 5954603a7a0..88027bf500b 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts
@@ -1,6 +1,6 @@
 import {Flex, Card} from '@sanity/ui'
 import styled, {css} from 'styled-components'
-import {Dialog, Popover} from '../../../../../ui'
+import {Dialog, Popover} from '../../../../../ui-components'
 
 export const StyledPopover = styled(Popover)(() => {
   return css`
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
index 7a19f0ebec1..31ddaff84b7 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
@@ -6,7 +6,7 @@ import {useGetI18nText, useTranslation} from '../../../../i18n'
 import {InsufficientPermissionsMessage} from '../../../../components'
 import {useCurrentUser} from '../../../../store'
 import {useColorScheme} from '../../../colorScheme'
-import {Button, ButtonProps, Tooltip, TooltipProps} from '../../../../../ui'
+import {Button, ButtonProps, Tooltip, TooltipProps} from '../../../../../ui-components'
 import {NewDocumentList, NewDocumentListProps} from './NewDocumentList'
 import {ModalType, NewDocumentOption} from './types'
 import {filterOptions} from './filter'
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx
index e18d6c2bbdb..e4b52f2ecc6 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx
@@ -4,7 +4,7 @@ import {CurrentUser} from '@sanity/types'
 import styled from 'styled-components'
 import {CommandList} from '../../../../components'
 import {supportsTouch} from '../../../../util'
-import {LoadingBlock} from '../../../../../ui/loadingBlock'
+import {LoadingBlock} from '../../../../components/loadingBlock'
 import {Translate, useTranslation} from '../../../../i18n'
 import {NewDocumentOption, PreviewLayout} from './types'
 import {INLINE_PREVIEW_HEIGHT, NewDocumentListOption} from './NewDocumentListOption'
@@ -13,10 +13,6 @@ const ContentFlex = styled(Flex)`
   min-height: 100px;
 `
 
-const QueryString = styled.strong`
-  word-break: break-all;
-`
-
 export interface NewDocumentListProps {
   currentUser: CurrentUser | null
   loading: boolean
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
index 0ea58fa80b8..17aef8de80e 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
@@ -1,7 +1,7 @@
 import {CurrentUser} from '@sanity/types'
 import {Card, Text} from '@sanity/ui'
 import React, {useCallback, useMemo} from 'react'
-import {Tooltip} from '../../../../../ui'
+import {Tooltip} from '../../../../../ui-components'
 import {InsufficientPermissionsMessage} from '../../../../components'
 import {useI18nText} from '../../../../i18n'
 import {NewDocumentOption, PreviewLayout} from './types'
diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
index 8e24de7676b..346c5c5ea25 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import {StatusButton} from '../../../../components'
 import {useGlobalPresence} from '../../../../store'
 import {useColorScheme} from '../../../colorScheme'
-import {MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui'
+import {MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {useWorkspace} from '../../../workspace'
 import {PresenceMenuItem} from './PresenceMenuItem'
diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
index 13ebee42efa..6c5fa002145 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
@@ -3,7 +3,7 @@ import {orderBy} from 'lodash'
 import * as PathUtils from '@sanity/util/paths'
 import {GlobalPresence} from '../../../../store'
 import {UserAvatar} from '../../../../components'
-import {MenuItem} from '../../../../../ui'
+import {MenuItem} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {IntentLink} from 'sanity/router'
 
diff --git a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
index 71b59632c05..7e29ea2ae21 100644
--- a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
@@ -2,7 +2,7 @@ import {InfoOutlineIcon} from '@sanity/icons'
 import {Menu} from '@sanity/ui'
 import React from 'react'
 import styled from 'styled-components'
-import {Button, MenuButton} from '../../../../../ui'
+import {Button, MenuButton} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {useGetHelpResources} from './helper-functions/hooks'
 import {ResourcesMenuItems} from './ResourcesMenuItems'
diff --git a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
index 1c5483da26f..85d0f4b4254 100644
--- a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
@@ -1,8 +1,8 @@
 import {Box, MenuDivider, Text} from '@sanity/ui'
 import React from 'react'
 import {SANITY_VERSION} from '../../../../version'
-import {MenuItem} from '../../../../../ui'
-import {LoadingBlock} from '../../../../../ui/loadingBlock'
+import {MenuItem} from '../../../../../ui-components'
+import {LoadingBlock} from '../../../../components/loadingBlock'
 import {useTranslation} from '../../../../i18n'
 import {ResourcesResponse, Section} from './helper-functions/types'
 
diff --git a/packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx
index 10a92b9c86a..e96bd596923 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx
@@ -1,7 +1,7 @@
 import {SearchIcon} from '@sanity/icons'
 import React, {forwardRef} from 'react'
 import {useTranslation} from 'react-i18next'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {GLOBAL_SEARCH_KEY, GLOBAL_SEARCH_KEY_MODIFIER} from './constants'
 
 interface SearchButtonProps {
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
index f312e5c0a21..f5c9bc80a7a 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
@@ -2,7 +2,7 @@ import {ArrowLeftIcon, ControlsIcon, SearchIcon, SpinnerIcon} from '@sanity/icon
 import {Box, Card, Flex} from '@sanity/ui'
 import React, {forwardRef, useCallback, useEffect, useRef} from 'react'
 import styled, {keyframes} from 'styled-components'
-import {Button} from '../../../../../../ui'
+import {Button} from '../../../../../../ui-components'
 import {StatusButton} from '../../../../../components'
 import {useTranslation} from '../../../../../i18n'
 import {useSearchState} from '../contexts/search/useSearchState'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
index dff95633283..482655b5ba4 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
@@ -5,7 +5,7 @@ import React, {useCallback, useId, useMemo} from 'react'
 import styled from 'styled-components'
 import {useTranslation} from '../../../../../i18n'
 import {ORDERINGS} from '../definitions/orderings'
-import {Button, MenuButton, MenuItem} from '../../../../../../ui'
+import {Button, MenuButton, MenuItem} from '../../../../../../ui-components'
 import {useSearchState} from '../contexts/search/useSearchState'
 import type {SearchOrdering} from '../types'
 
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/Filters.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/Filters.tsx
index 706404ee3d6..1eec4b5dd56 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/Filters.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/Filters.tsx
@@ -3,7 +3,7 @@ import React, {useCallback, useEffect, useRef} from 'react'
 import {DEBUG_MODE} from '../../constants'
 import {useSearchState} from '../../contexts/search/useSearchState'
 import {getFilterKey} from '../../utils/filterUtils'
-import {Button} from '../../../../../../../ui'
+import {Button} from '../../../../../../../ui-components'
 import {useTranslation} from '../../../../../../i18n'
 import {AddFilterButton} from './addFilter/AddFilterButton'
 import {DebugDocumentTypesNarrowed} from './debug/_DebugDocumentTypesNarrowed'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx
index e8632c8e34b..81ef7d180cd 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx
@@ -3,7 +3,7 @@ import React, {useCallback, useState} from 'react'
 import {POPOVER_RADIUS, POPOVER_VERTICAL_MARGIN} from '../../../constants'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import {FilterPopoverWrapper} from '../common/FilterPopoverWrapper'
-import {Button, Popover} from '../../../../../../../../ui'
+import {Button, Popover} from '../../../../../../../../ui-components'
 import {useTranslation} from '../../../../../../../i18n'
 import {AddFilterPopoverContent} from './AddFilterPopoverContent'
 
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
index 0c5cbbad74e..b484a0ffac4 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
@@ -1,7 +1,7 @@
 import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {startCase, uniq} from 'lodash'
 import React, {ReactElement, useMemo} from 'react'
-import {Tooltip} from '../../../../../../../../../ui'
+import {Tooltip} from '../../../../../../../../../ui-components'
 import {TextWithTone} from '../../../../../../../../components'
 import {useSchema} from '../../../../../../../../hooks'
 import {isNonNullable, truncateString} from '../../../../../../../../util'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx
index 95b69422984..9f5997368a5 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx
@@ -5,7 +5,7 @@ import {POPOVER_RADIUS, POPOVER_VERTICAL_MARGIN} from '../../../constants'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import {documentTypesTruncated} from '../../../utils/documentTypesTruncated'
 import {FilterPopoverWrapper} from '../common/FilterPopoverWrapper'
-import {Button, Popover} from '../../../../../../../../ui'
+import {Button, Popover} from '../../../../../../../../ui-components'
 import {useTranslation} from '../../../../../../../i18n'
 import {DocumentTypesPopoverContent} from './DocumentTypesPopoverContent'
 
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesPopoverContent.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesPopoverContent.tsx
index 990bc853bb1..10dca521ad2 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesPopoverContent.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesPopoverContent.tsx
@@ -14,7 +14,7 @@ import type {SearchableType} from '../../../../../../../search'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import type {DocumentTypeMenuItem} from '../../../types'
 import {getSelectableOmnisearchTypes} from '../../../utils/selectors'
-import {Button} from '../../../../../../../../ui'
+import {Button} from '../../../../../../../../ui-components'
 import {FilterPopoverContentHeader} from '../common/FilterPopoverContentHeader'
 import {useTranslation} from '../../../../../../../i18n'
 import {DocumentTypeFilterItem} from './items/DocumentTypeFilterItem'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/items/DocumentTypeFilterItem.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/items/DocumentTypeFilterItem.tsx
index 2b950c21868..d91892b2f79 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/items/DocumentTypeFilterItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/items/DocumentTypeFilterItem.tsx
@@ -3,7 +3,7 @@ import {Box, ResponsiveMarginProps, ResponsivePaddingProps} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import type {SearchableType} from '../../../../../../../../search'
 import {useSearchState} from '../../../../contexts/search/useSearchState'
-import {Button} from '../../../../../../../../../ui'
+import {Button} from '../../../../../../../../../ui-components'
 
 interface DocumentTypeFilterItemProps extends ResponsiveMarginProps, ResponsivePaddingProps {
   selected: boolean
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx
index 3481873baf3..be07c410b34 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx
@@ -7,7 +7,7 @@ import {
 } from '@sanity/ui'
 import React, {KeyboardEvent, useCallback, useState} from 'react'
 import styled from 'styled-components'
-import {Popover} from '../../../../../../../../ui'
+import {Popover} from '../../../../../../../../ui-components'
 import {POPOVER_RADIUS, POPOVER_VERTICAL_MARGIN} from '../../../constants'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import type {SearchFilter} from '../../../types'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx
index cf70150994a..920a4a78175 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx
@@ -2,7 +2,7 @@ import {TrashIcon} from '@sanity/icons'
 import {Box, Card, ErrorBoundary, Flex, Stack, Text} from '@sanity/ui'
 import React, {ErrorInfo, useCallback, useState} from 'react'
 import FocusLock from 'react-focus-lock'
-import {Button} from '../../../../../../../../ui'
+import {Button} from '../../../../../../../../ui-components'
 import {supportsTouch} from '../../../../../../../util'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import {getFilterDefinition} from '../../../definitions/filters'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
index 6ffec1017c5..5684ce65d1b 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
@@ -2,7 +2,7 @@ import {ChevronDownIcon} from '@sanity/icons'
 import {Inline, Menu, MenuDivider} from '@sanity/ui'
 import React, {useCallback, useId} from 'react'
 import {useSearchState} from '../../../contexts/search/useSearchState'
-import {Button, MenuButton, MenuItem} from '../../../../../../../../ui'
+import {Button, MenuButton, MenuItem} from '../../../../../../../../ui-components'
 import {getFilterDefinition} from '../../../definitions/filters'
 import {getOperatorDefinition, SearchOperatorDefinition} from '../../../definitions/operators'
 import type {SearchFilter} from '../../../types'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
index ab0c34641bc..d4849561556 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
@@ -5,7 +5,7 @@ import {get, startCase} from 'lodash'
 import React, {useCallback, useEffect, useId, useMemo, useState} from 'react'
 import styled from 'styled-components'
 import {Source} from '../../../../../../../../../config'
-import {Button, MenuButton, MenuItem} from '../../../../../../../../../../ui'
+import {Button, MenuButton, MenuItem} from '../../../../../../../../../../ui-components'
 import {FileSource, ImageSource} from '../../../../../../../../../form/studio/assetSource'
 import {useClient} from '../../../../../../../../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../../../../../../studioClient'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx
index 4c507e405da..afdcffb55bc 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import {observeImageAsset} from '../../../../../../../../../../form/studio/inputs/client-adapters/assets'
 import {WithReferencedAsset} from '../../../../../../../../../../form/utils/WithReferencedAsset'
 import {useDocumentPreviewStore} from '../../../../../../../../../../store'
-import {LoadingBlock} from '../../../../../../../../../../../ui/loadingBlock'
+import {LoadingBlock} from '../../../../../../../../../../components/loadingBlock'
 
 interface ImageReferencePreviewProps {
   reference: ReferenceValue
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
index 7e9dd17676f..540f76af11e 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
@@ -8,7 +8,7 @@ import React, {
   useMemo,
   useState,
 } from 'react'
-import {Tooltip} from '../../../../../../../../../../ui'
+import {Tooltip} from '../../../../../../../../../../ui-components'
 import {useTranslation} from '../../../../../../../../../i18n'
 import {CustomTextInput} from '../../../../common/CustomTextInput'
 import {getDateISOString} from './utils/getDateISOString'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx
index 1dd4ce1c5bf..d495cb4b841 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx
@@ -2,7 +2,7 @@ import {upperFirst} from 'lodash'
 import {ChevronLeftIcon, ChevronRightIcon} from '@sanity/icons'
 import {Flex, Inline, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
-import {Button} from '../../../../../../../../../../../../ui'
+import {Button} from '../../../../../../../../../../../../ui-components'
 import {useTranslation} from '../../../../../../../../../../../i18n'
 import {useDateTimeFormat} from '../../../../../../../../../../../hooks/useDateTimeFormat'
 import {useCalendar} from './contexts/useDatePicker'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/Reference.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/Reference.tsx
index 6e87bb558c4..bd336269da1 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/Reference.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/Reference.tsx
@@ -1,7 +1,7 @@
 import {isArraySchemaType, isReferenceSchemaType, ReferenceValue} from '@sanity/types'
 import {Box, Card, Stack} from '@sanity/ui'
 import React, {useCallback, useMemo} from 'react'
-import {Button} from '../../../../../../../../../../ui'
+import {Button} from '../../../../../../../../../../ui-components'
 import {useSchema} from '../../../../../../../../../hooks'
 import {SearchableType} from '../../../../../../../../../search'
 import {useSearchState} from '../../../../../contexts/search/useSearchState'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx
index 172952545e1..c69fb75a2bd 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx
@@ -2,7 +2,7 @@ import type {ReferenceValue} from '@sanity/types'
 import {Autocomplete, Box, Flex, Text} from '@sanity/ui'
 import React, {forwardRef, ReactElement, useCallback, useId, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
-import {Popover} from '../../../../../../../../../../ui'
+import {Popover} from '../../../../../../../../../../ui-components'
 import {useSchema} from '../../../../../../../../../hooks'
 import type {SearchableType, WeightedHit} from '../../../../../../../../../search'
 import {getPublishedId} from '../../../../../../../../../util'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
index 21046748589..45a573ab7ed 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
@@ -8,7 +8,7 @@ import {isNonNullable} from '../../../../../../../../../util'
 import {useSearchState} from '../../../../../contexts/search/useSearchState'
 import {OperatorInputComponentProps} from '../../../../../definitions/operators/operatorTypes'
 import {getSchemaField} from '../../../../../utils/getSchemaField'
-import {Button, MenuButton, MenuItem} from '../../../../../../../../../../ui'
+import {Button, MenuButton, MenuItem} from '../../../../../../../../../../ui-components'
 import {useTranslation} from '../../../../../../../../../i18n'
 
 interface TitledListValueGroup extends Omit<TitledListValue<number | string>, 'title'> {
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/RecentSearches.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/RecentSearches.tsx
index db0a202e589..5559e94b53f 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/RecentSearches.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/RecentSearches.tsx
@@ -6,7 +6,7 @@ import {
   CommandListHandle,
   CommandListRenderItemCallback,
 } from '../../../../../../components'
-import {Button} from '../../../../../../../ui'
+import {Button} from '../../../../../../../ui-components'
 import {useSearchState} from '../../contexts/search/useSearchState'
 import {RecentSearch} from '../../datastores/recentSearches'
 import {Instructions} from '../Instructions'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
index a1c520f2ce9..efe9e7bfa54 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
@@ -2,7 +2,7 @@
 import {Card, CardTone, Code, Inline, Stack} from '@sanity/ui'
 import React from 'react'
 import styled from 'styled-components'
-import {Tooltip} from '../../../../../../../../ui'
+import {Tooltip} from '../../../../../../../../ui-components'
 import type {WeightedHit} from '../../../../../../../search'
 
 interface DebugScoreProps {
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
index 8a32f558461..4ad0a766287 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
@@ -4,8 +4,8 @@ import {Badge, Box, Flex} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import {useMemoObservable} from 'react-rx'
 import styled from 'styled-components'
-import {DocumentStatus} from '../../../../../../../../ui/documentStatus'
-import {DocumentStatusIndicator} from '../../../../../../../../ui/documentStatusIndicator'
+import {DocumentStatus} from '../../../../../../../components/documentStatus'
+import {DocumentStatusIndicator} from '../../../../../../../components/documentStatusIndicator'
 import {DocumentPreviewPresence} from '../../../../../../../presence'
 import {
   getPreviewStateObservable,
diff --git a/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx b/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx
index 1ca51db2084..aa053f30391 100644
--- a/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx
@@ -6,7 +6,7 @@ import {CollapseTabList} from '../../../../components/collapseTabList/CollapseTa
 import {useRovingFocus} from '../../../../components'
 import {useColorScheme} from '../../../colorScheme'
 import {Tool} from '../../../../config'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {ToolLink, ToolLinkProps} from './ToolLink'
 import {getToolButtonWrapperElement} from './getToolButtonWrapperElement'
 
diff --git a/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx b/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx
index ba76697bde1..a30f5cba02a 100644
--- a/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx
@@ -1,7 +1,7 @@
 import {Stack} from '@sanity/ui'
 import {startCase} from 'lodash'
 import React, {forwardRef, useMemo} from 'react'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {Tool} from '../../../../config'
 import {ToolLink, ToolLinkProps} from './ToolLink'
 import {getToolButtonWrapperElement} from './getToolButtonWrapperElement'
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/ApperanceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/ApperanceMenu.tsx
index 17439b3e542..98008e36e3a 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/ApperanceMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/ApperanceMenu.tsx
@@ -1,6 +1,6 @@
 import {CheckmarkIcon} from '@sanity/icons'
 import {MenuDivider} from '@sanity/ui'
-import {MenuItem} from '../../../../../ui'
+import {MenuItem} from '../../../../../ui-components'
 import {type StudioThemeColorSchemeKey} from '../../../../theme'
 import {useTranslation} from '../../../../i18n'
 import {useColorSchemeOptions} from '../../../colorScheme'
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx
index b0ff618f229..3c9061411d4 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx
@@ -2,7 +2,7 @@ import {CheckmarkIcon} from '@sanity/icons'
 import {MenuDivider} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {useLocale} from '../../../../i18n/hooks/useLocale'
-import {MenuItem} from '../../../../../ui'
+import {MenuItem} from '../../../../../ui-components'
 
 const LOCALE_SELECTION_DISABLED = true
 
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/ManageMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/ManageMenu.tsx
index 9f90b81e23e..1afb364dbd9 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/ManageMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/ManageMenu.tsx
@@ -1,6 +1,6 @@
 import {CogIcon, UsersIcon} from '@sanity/icons'
 import {MenuDivider} from '@sanity/ui'
-import {MenuItem} from '../../../../../ui'
+import {MenuItem} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {userHasRole} from '../../../../util'
 import {useWorkspace} from '../../../workspace'
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
index b26e02530ec..81b1b39be12 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -16,7 +16,7 @@ import {UserAvatar} from '../../../../components'
 import {getProviderTitle} from '../../../../store'
 import {useColorSchemeSetValue, useColorSchemeValue} from '../../../colorScheme'
 import {useWorkspace} from '../../../workspace'
-import {MenuButton, MenuButtonProps, MenuItem, Tooltip} from '../../../../../ui'
+import {MenuButton, MenuButtonProps, MenuItem, Tooltip} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {LoginProviderLogo} from './LoginProviderLogo'
 import {LocaleMenu} from './LocaleMenu'
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx
index de49763a31f..ade94d1d135 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx
@@ -2,8 +2,8 @@ import {Box, Card, Flex, Stack} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {omit} from 'lodash'
 import {AddIcon, ArrowLeftIcon, ChevronRightIcon} from '@sanity/icons'
-import {Button} from '../../../../../../ui'
-import {LoadingBlock} from '../../../../../../ui/loadingBlock'
+import {Button} from '../../../../../../ui-components'
+import {LoadingBlock} from '../../../../../components/loadingBlock'
 import {useActiveWorkspace} from '../../../../activeWorkspaceMatcher'
 import {useWorkspaces} from '../../../../workspaces'
 import {WorkspacePreview} from '../WorkspacePreview'
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
index 1882e7182aa..5fbfff2dd55 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
@@ -13,7 +13,7 @@ import styled from 'styled-components'
 import {useTranslation} from '../../../../i18n'
 import {useActiveWorkspace} from '../../../activeWorkspaceMatcher'
 import {useWorkspaces} from '../../../workspaces'
-import {MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui'
+import {MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui-components'
 import {SanityLogo} from '../SanityLogo'
 import {useWorkspaceAuthStates} from './hooks'
 import {STATE_TITLES, WorkspacePreviewIcon} from './WorkspacePreview'
diff --git a/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx b/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx
index d5468911f20..8b31a715afc 100644
--- a/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx
@@ -3,7 +3,7 @@ import {Card, Stack, Text, TextInput, Flex} from '@sanity/ui'
 import React, {useEffect, useMemo} from 'react'
 import {LaunchIcon} from '@sanity/icons'
 import styled from 'styled-components'
-import {Button, Dialog} from '../../../ui'
+import {Button, Dialog} from '../../../ui-components'
 
 interface CorsOriginErrorScreenProps {
   projectId?: string
diff --git a/packages/sanity/src/core/studio/screens/NotAuthenticatedScreen.tsx b/packages/sanity/src/core/studio/screens/NotAuthenticatedScreen.tsx
index ab6e45a3206..b3d42aeccc2 100644
--- a/packages/sanity/src/core/studio/screens/NotAuthenticatedScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/NotAuthenticatedScreen.tsx
@@ -2,7 +2,7 @@
 import {CurrentUser} from '@sanity/types'
 import {Card, Stack, Text} from '@sanity/ui'
 import React, {useCallback, useEffect, useState} from 'react'
-import {Dialog} from '../../../ui'
+import {Dialog} from '../../../ui-components'
 import {getProviderTitle} from '../../store'
 import {useActiveWorkspace} from '../activeWorkspaceMatcher'
 
diff --git a/packages/sanity/src/core/studio/screens/NotFoundScreen.tsx b/packages/sanity/src/core/studio/screens/NotFoundScreen.tsx
index b75024a4356..0b28f843075 100644
--- a/packages/sanity/src/core/studio/screens/NotFoundScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/NotFoundScreen.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable i18next/no-literal-string,@sanity/i18n/no-attribute-string-literals */
 import {Card, Flex, Heading, Inline, Stack} from '@sanity/ui'
 import React from 'react'
-import {Button} from '../../../ui'
+import {Button} from '../../../ui-components'
 
 export function NotFoundScreen(props: {onNavigateToDefaultWorkspace: () => void}) {
   return (
diff --git a/packages/sanity/src/core/studio/screens/schemaErrors/InitialValueTemplateError.tsx b/packages/sanity/src/core/studio/screens/schemaErrors/InitialValueTemplateError.tsx
index f0e16df1bd6..62c8ed7992c 100644
--- a/packages/sanity/src/core/studio/screens/schemaErrors/InitialValueTemplateError.tsx
+++ b/packages/sanity/src/core/studio/screens/schemaErrors/InitialValueTemplateError.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable i18next/no-literal-string,@sanity/i18n/no-attribute-string-literals */
 import {Box, Stack, Text} from '@sanity/ui'
 import React from 'react'
-import {Dialog} from '../../../../ui'
+import {Dialog} from '../../../../ui-components'
 
 export function InitialValueTemplateError({errors}: {errors: Error[]}) {
   return (
diff --git a/packages/sanity/src/desk/__workshop__/DocumentStateStory.tsx b/packages/sanity/src/desk/__workshop__/DocumentStateStory.tsx
index b657e7aa591..72fe65db783 100644
--- a/packages/sanity/src/desk/__workshop__/DocumentStateStory.tsx
+++ b/packages/sanity/src/desk/__workshop__/DocumentStateStory.tsx
@@ -1,6 +1,6 @@
 import {Box, Code, Stack} from '@sanity/ui'
 import React, {useMemo, useState, useCallback, useEffect} from 'react'
-import {Button, Dialog} from '../../ui'
+import {Button, Dialog} from '../../ui-components'
 import {DeskToolProvider} from '../DeskToolProvider'
 import {DocumentPaneProvider} from '../panes'
 import {DocumentPaneNode} from '../types'
diff --git a/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx b/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx
index 9431ca0c3d7..e7d5a43af85 100644
--- a/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx
+++ b/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx
@@ -17,7 +17,7 @@ import {
   CommentIcon,
   MentionOptionsHookValue,
 } from '../../src'
-import {Button, Popover, Tooltip} from '../../../../ui'
+import {Button, Popover, Tooltip} from '../../../../ui-components'
 import {CurrentUser, PortableTextBlock} from 'sanity'
 
 const ContentStack = styled(Stack)`
diff --git a/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx b/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx
index 4e35b5e1c38..ad4f6e1eea3 100644
--- a/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx
+++ b/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx
@@ -3,7 +3,7 @@ import {Card, Flex, Menu, Text} from '@sanity/ui'
 import {startCase} from 'lodash'
 import React, {forwardRef, useCallback} from 'react'
 import styled from 'styled-components'
-import {Button, MenuButton, MenuItem} from '../../../../ui'
+import {Button, MenuButton, MenuItem} from '../../../../ui-components'
 import {CommentStatus} from '../../src'
 import {BetaBadge} from 'sanity'
 
diff --git a/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx b/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx
index 76dd8c36760..dd663d8a8de 100644
--- a/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx
+++ b/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx
@@ -1,7 +1,7 @@
 import {ChevronRightIcon} from '@sanity/icons'
 import {Box, Flex, Stack, Text} from '@sanity/ui'
 import React, {Fragment, useMemo} from 'react'
-import {Tooltip} from '../../../../ui'
+import {Tooltip} from '../../../../ui-components'
 
 export interface CommentBreadcrumbsProps {
   titlePath: string[]
diff --git a/packages/sanity/src/desk/comments/src/components/CommentDeleteDialog.tsx b/packages/sanity/src/desk/comments/src/components/CommentDeleteDialog.tsx
index de444bbd99a..82d44053ae7 100644
--- a/packages/sanity/src/desk/comments/src/components/CommentDeleteDialog.tsx
+++ b/packages/sanity/src/desk/comments/src/components/CommentDeleteDialog.tsx
@@ -1,6 +1,6 @@
 import {Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
-import {Dialog} from '../../../../ui'
+import {Dialog} from '../../../../ui-components'
 import {TextWithTone} from 'sanity'
 
 const DIALOG_COPY: Record<
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListItem.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListItem.tsx
index 1710dc86943..3e9ef7ffecb 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListItem.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListItem.tsx
@@ -15,7 +15,7 @@ import {
 import {SpacerAvatar} from '../avatars'
 import {hasCommentMessageValue} from '../../helpers'
 import {CommentsSelectedPath} from '../../context'
-import {Button} from '../../../../../ui'
+import {Button} from '../../../../../ui-components'
 import {CommentsListItemLayout} from './CommentsListItemLayout'
 import {ThreadCard} from './styles'
 
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
index 61d7e033cea..6bcdd4cfb4b 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
@@ -2,10 +2,15 @@ import React from 'react'
 import {CheckmarkCircleIcon, UndoIcon, EditIcon, TrashIcon, LinkIcon} from '@sanity/icons'
 import {Card, Flex, Menu, MenuDivider, TooltipDelayGroupProvider} from '@sanity/ui'
 import styled from 'styled-components'
-import {Button, MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui'
+import {
+  Button,
+  MenuButton,
+  MenuButtonProps,
+  MenuItem,
+  TOOLTIP_DELAY_PROPS,
+} from '../../../../../ui-components'
 import {CommentStatus} from '../../types'
-import {TOOLTIP_DELAY_PROPS} from '../../../../../ui/tooltip/constants'
-import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
+import {ContextMenuButton} from 'sanity'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
   placement: 'bottom-end',
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx
index a519924f441..ae60a8bccde 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx
@@ -1,7 +1,7 @@
 import {Flex, Container, Stack, Text} from '@sanity/ui'
 import React from 'react'
 import {CommentStatus} from '../../types'
-import {LoadingBlock} from '../../../../../ui/loadingBlock'
+import {LoadingBlock} from 'sanity'
 
 interface EmptyStateMessage {
   title: string
diff --git a/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx b/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx
index 869c7a346cf..fa43a236c35 100644
--- a/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx
+++ b/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx
@@ -2,10 +2,9 @@ import {Box, Flex, Stack, Text} from '@sanity/ui'
 import styled from 'styled-components'
 import React, {useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react'
 import {deburr} from 'lodash'
-import {LoadingBlock} from '../../../../../ui/loadingBlock'
 import {MentionOptionUser} from '../../types'
 import {MentionsMenuItem} from './MentionsMenuItem'
-import {CommandList, CommandListHandle} from 'sanity'
+import {CommandList, CommandListHandle, LoadingBlock} from 'sanity'
 
 const EMPTY_ARRAY: MentionOptionUser[] = []
 
diff --git a/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx b/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx
index cc127c87825..c81a400278e 100644
--- a/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx
+++ b/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx
@@ -1,7 +1,7 @@
 import {Box, Flex, Stack, Text} from '@sanity/ui'
 import React from 'react'
 import styled, {keyframes} from 'styled-components'
-import {Button, Popover, PopoverProps} from '../../../../../ui'
+import {Button, Popover, PopoverProps} from '../../../../../ui-components'
 
 const Root = styled(Box)`
   max-width: 280px;
diff --git a/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx b/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx
index aa28bdce6fe..e48e54e18a4 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {Flex, Text} from '@sanity/ui'
 import styled, {css} from 'styled-components'
-import {Tooltip} from '../../../../../../ui'
+import {Tooltip} from '../../../../../../ui-components'
 import {CommentsAvatar} from '../../avatars'
 import {useCurrentUser, useUser} from 'sanity'
 
diff --git a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx
index 7f3932bca41..0de79b90e2b 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx
@@ -1,6 +1,6 @@
 import {DialogProvider, Text, ThemeColorProvider} from '@sanity/ui'
 import React, {useCallback} from 'react'
-import {Dialog} from '../../../../../../ui'
+import {Dialog} from '../../../../../../ui-components'
 
 const Z_OFFSET = 9999999 // Change to appropriate z-offset
 
diff --git a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx
index 5d960507234..51bd58ffc65 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx
@@ -4,8 +4,7 @@ import styled, {css} from 'styled-components'
 import {CurrentUser} from '@sanity/types'
 import {MentionIcon, SendIcon} from '../../icons'
 import {CommentsAvatar} from '../../avatars/CommentsAvatar'
-import {Button} from '../../../../../../ui'
-import {TOOLTIP_DELAY_PROPS} from '../../../../../../ui/tooltip/constants'
+import {Button, TOOLTIP_DELAY_PROPS} from '../../../../../../ui-components'
 import {useCommentInput} from './useCommentInput'
 import {Editable} from './Editable'
 import {useUser} from 'sanity'
diff --git a/packages/sanity/src/desk/comments/src/components/pte/comment-input/Editable.tsx b/packages/sanity/src/desk/comments/src/components/pte/comment-input/Editable.tsx
index 777e0bc38b9..4046a1e91de 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/comment-input/Editable.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/comment-input/Editable.tsx
@@ -8,7 +8,7 @@ import {
 import styled, {css} from 'styled-components'
 import {isEqual} from 'lodash'
 import {isPortableTextSpan, isPortableTextTextBlock} from '@sanity/types'
-import {Popover, PopoverProps} from '../../../../../../ui'
+import {Popover, PopoverProps} from '../../../../../../ui-components'
 import {MentionsMenu, MentionsMenuHandle} from '../../mentions'
 import {renderBlock, renderChild} from '../render'
 import {useCommentInput} from './useCommentInput'
diff --git a/packages/sanity/src/desk/components/IntentButton.tsx b/packages/sanity/src/desk/components/IntentButton.tsx
index 44fcb9ae2fd..a3c54ae80ab 100644
--- a/packages/sanity/src/desk/components/IntentButton.tsx
+++ b/packages/sanity/src/desk/components/IntentButton.tsx
@@ -1,6 +1,6 @@
 import React, {forwardRef, useMemo} from 'react'
 import {PaneMenuItem} from '../types'
-import {Button, ButtonProps} from '../../ui'
+import {Button, ButtonProps} from '../../ui-components'
 import {IntentLink} from 'sanity/router'
 
 type RouterIntent = NonNullable<PaneMenuItem['intent']>
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx
index 0db77200947..2694fe6c54e 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx
@@ -1,13 +1,12 @@
 import React, {useMemo, useId} from 'react'
 import styled from 'styled-components'
 import {Box, Flex} from '@sanity/ui'
-import {LoadingBlock} from '../../../ui/loadingBlock'
-import {Dialog} from '../../../ui'
+import {Dialog} from '../../../ui-components'
 import {DocTitle} from '../DocTitle'
 import {structureLocaleNamespace} from '../../i18n'
 import {useReferringDocuments} from './useReferringDocuments'
 import {ConfirmDeleteDialogBody} from './ConfirmDeleteDialogBody'
-import {useTranslation} from 'sanity'
+import {useTranslation, LoadingBlock} from 'sanity'
 
 /** @internal */
 export const DialogBody = styled(Box)`
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
index f959bbc5158..348b7b797df 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import {rem, Flex, Text, Box, Inline} from '@sanity/ui'
 import {InfoOutlineIcon} from '@sanity/icons'
-import {Tooltip} from '../../../ui'
+import {Tooltip} from '../../../ui-components'
 import {structureLocaleNamespace} from '../../i18n'
 import {useTranslation} from 'sanity'
 
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx
index 7bae0a9b4fe..aa3d5cf519a 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx
@@ -8,7 +8,7 @@ import {
 } from '@sanity/icons'
 import {useToast, Text, Box, Flex, Card, Stack} from '@sanity/ui'
 import CopyToClipboard from 'react-copy-to-clipboard'
-import {Button} from '../../../ui'
+import {Button} from '../../../ui-components'
 import {structureLocaleNamespace} from '../../i18n'
 import {ReferencePreviewLink} from './ReferencePreviewLink'
 import {ReferringDocuments} from './useReferringDocuments'
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/index.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/index.tsx
index 6181826960a..7ac995360f3 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/index.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/index.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useState, useId} from 'react'
 import {Box, ErrorBoundary, Text} from '@sanity/ui'
-import {Dialog} from '../../../ui'
+import {Dialog} from '../../../ui-components'
 import {structureLocaleNamespace} from '../../i18n'
 import {ConfirmDeleteDialog, ConfirmDeleteDialogProps} from './ConfirmDeleteDialog'
 import {useTranslation} from 'sanity'
diff --git a/packages/sanity/src/desk/components/deskTool/StructureError.tsx b/packages/sanity/src/desk/components/deskTool/StructureError.tsx
index 3d4d9e36885..e1016647e0c 100644
--- a/packages/sanity/src/desk/components/deskTool/StructureError.tsx
+++ b/packages/sanity/src/desk/components/deskTool/StructureError.tsx
@@ -3,7 +3,7 @@ import {Box, Card, Code, Container, Heading, Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import styled from 'styled-components'
 import {SyncIcon} from '@sanity/icons'
-import {Button} from '../../../ui'
+import {Button} from '../../../ui-components'
 import {SerializeError} from '../../structureBuilder'
 import {PaneResolutionError} from '../../structureResolvers'
 import {structureLocaleNamespace} from '../../i18n'
diff --git a/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx b/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
index aedec2d2709..5687c8b7824 100644
--- a/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
@@ -1,9 +1,9 @@
 import {Menu} from '@sanity/ui'
 import React, {useId} from 'react'
-import {MenuButton, PopoverProps} from '../../../ui'
-import {ContextMenuButton} from '../../../ui/contextMenuButton'
+import {MenuButton, PopoverProps} from '../../../ui-components'
 import {_PaneMenuItem, _PaneMenuNode} from './types'
 import {PaneMenuButtonItem} from './PaneMenuButtonItem'
+import {ContextMenuButton} from 'sanity'
 
 interface PaneContextMenuButtonProps {
   nodes: _PaneMenuNode[]
diff --git a/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx b/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx
index 4cd054e7320..ca66f8e2bd3 100644
--- a/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx
@@ -2,7 +2,7 @@ import React, {MouseEvent, useCallback, useId} from 'react'
 import {Menu} from '@sanity/ui'
 import {UnknownIcon} from '@sanity/icons'
 import {Intent} from '../../structureBuilder'
-import {Button, MenuButton} from '../../../ui'
+import {Button, MenuButton} from '../../../ui-components'
 import {_PaneMenuGroup, _PaneMenuItem} from './types'
 import {PaneMenuButtonItem} from './PaneMenuButtonItem'
 import {StatusButton, useI18nText} from 'sanity'
diff --git a/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx b/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx
index 5ced84c3983..b584bd91776 100644
--- a/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx
@@ -2,7 +2,7 @@ import {CheckmarkIcon} from '@sanity/icons'
 import {MenuDivider, Text} from '@sanity/ui'
 import React, {useCallback, MouseEvent} from 'react'
 import {Intent} from '../../structureBuilder'
-import {MenuGroup, MenuItem, PopoverProps} from '../../../ui'
+import {MenuGroup, MenuItem, PopoverProps} from '../../../ui-components'
 import {_PaneMenuItem, _PaneMenuNode} from './types'
 import {TooltipOfDisabled, useGetI18nText, useI18nText} from 'sanity'
 import {useIntentLink} from 'sanity/router'
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx b/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx
index 5b1605f7e86..aca44366864 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx
@@ -16,7 +16,7 @@ import {
 import {useAction} from '@sanity/ui-workshop'
 import React, {useCallback, useState} from 'react'
 import styled from 'styled-components'
-import {Button, Dialog} from '../../../../ui'
+import {Button, Dialog} from '../../../../ui-components'
 import {Pane} from '../Pane'
 import {PaneContent} from '../PaneContent'
 import {PaneFooter} from '../PaneFooter'
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx b/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx
index 1443ca98c65..c1ba387c1e4 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx
@@ -2,13 +2,13 @@ import {ChevronDownIcon} from '@sanity/icons'
 import {Container, Stack, TabList, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import React, {useMemo} from 'react'
-import {Button, Tab} from '../../../../ui'
-import {ContextMenuButton} from '../../../../ui/contextMenuButton'
+import {Button, Tab} from '../../../../ui-components'
 import {Pane} from '../Pane'
 import {PaneContent} from '../PaneContent'
 import {PaneFooter} from '../PaneFooter'
 import {PaneHeader} from '../PaneHeader'
 import {PaneLayout} from '../PaneLayout'
+import {ContextMenuButton} from 'sanity'
 
 const PANE_TONE_OPTIONS = {
   Default: 'default',
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
index 88ad93a58be..3ba1cf81773 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
@@ -1,8 +1,8 @@
 import {PublishIcon} from '@sanity/icons'
 import {Flex, Menu, Stack, useToast} from '@sanity/ui'
 import React, {useCallback} from 'react'
-import {Button, MenuButton, MenuButtonProps, MenuItem} from '../../../../../../ui'
-import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
+import {Button, MenuButton, MenuButtonProps, MenuItem} from '../../../../../../ui-components'
+import {ContextMenuButton} from 'sanity'
 
 const MENU_BUTTON_POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentViewPanel.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentViewPanel.tsx
index 3e5b0c4f7ea..518df46ad67 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentViewPanel.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentViewPanel.tsx
@@ -1,7 +1,7 @@
 import {ArrowLeftIcon, RestoreIcon} from '@sanity/icons'
 import {Box, Flex, Text, Stack, Container} from '@sanity/ui'
 import React from 'react'
-import {Button} from '../../../../../../ui'
+import {Button} from '../../../../../../ui-components'
 import {PaneContent} from '../../../PaneContent'
 import {PaneFooter} from '../../../PaneFooter'
 import {PaneHeader} from '../../../PaneHeader'
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/ReviewChangesPanel.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/ReviewChangesPanel.tsx
index 1cc5ec08f59..6188768dc40 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/ReviewChangesPanel.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/ReviewChangesPanel.tsx
@@ -1,7 +1,7 @@
 import {CloseIcon} from '@sanity/icons'
 import {Flex} from '@sanity/ui'
 import React from 'react'
-import {Button} from '../../../../../../ui'
+import {Button} from '../../../../../../ui-components'
 import {PaneHeader} from '../../../PaneHeader'
 import {usePane} from '../../../usePane'
 
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx
index 3bf78d4265d..e3093620149 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx
@@ -1,13 +1,13 @@
 import {ArrowLeftIcon, ChevronRightIcon} from '@sanity/icons'
 import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
-import {Button} from '../../../../../../ui'
-import {ContextMenuButton} from '../../../../../../ui/contextMenuButton'
+import {Button} from '../../../../../../ui-components'
 import {usePaneLayout} from '../../../usePaneLayout'
 import {Pane} from '../../../Pane'
 import {PaneContent} from '../../../PaneContent'
 import {PaneHeader} from '../../../PaneHeader'
 import {ListPaneNode} from '../types'
+import {ContextMenuButton} from 'sanity'
 
 export function ListPane(props: {
   active: boolean
diff --git a/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx b/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
index dc6238e5c4b..8447df45884 100644
--- a/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
+++ b/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Tooltip} from '../../../ui'
+import {Tooltip} from '../../../ui-components'
 import {structureLocaleNamespace} from '../../i18n'
 import {useCurrentUser, InsufficientPermissionsMessage, useTranslation} from 'sanity'
 
diff --git a/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx b/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
index a47be6dcf81..ac6e54c1ad1 100644
--- a/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
+++ b/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
@@ -2,7 +2,7 @@ import {AddIcon} from '@sanity/icons'
 import React, {useMemo, forwardRef} from 'react'
 import {Menu} from '@sanity/ui'
 import {Schema} from '@sanity/types'
-import {Button, MenuButton, PopoverProps, MenuItem} from '../../../ui'
+import {Button, MenuButton, PopoverProps, MenuItem} from '../../../ui-components'
 import {IntentButton} from '../IntentButton'
 import {structureLocaleNamespace} from '../../i18n'
 import {InsufficientPermissionsMessageTooltip} from './InsufficientPermissionsMessageTooltip'
diff --git a/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx b/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
index b3ab9a9b0cb..8bb580a7409 100644
--- a/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
+++ b/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
@@ -3,9 +3,7 @@ import React, {isValidElement} from 'react'
 import {isNumber, isString} from 'lodash'
 import {Flex, TooltipDelayGroupProvider} from '@sanity/ui'
 import {useMemoObservable} from 'react-rx'
-import {DocumentStatus} from '../../../ui/documentStatus'
-import {DocumentStatusIndicator} from '../../../ui/documentStatusIndicator'
-import {TOOLTIP_DELAY_PROPS} from '../../../ui/tooltip/constants'
+import {TOOLTIP_DELAY_PROPS} from '../../../ui-components'
 import type {PaneItemPreviewState} from './types'
 import {
   DocumentPresence,
@@ -16,6 +14,8 @@ import {
   getPreviewValueWithFallback,
   SanityDefaultPreview,
   isRecord,
+  DocumentStatusIndicator,
+  DocumentStatus,
 } from 'sanity'
 
 export interface PaneItemPreviewProps {
diff --git a/packages/sanity/src/ui/spacerButton/SpacerButton.tsx b/packages/sanity/src/desk/components/spacerButton/SpacerButton.tsx
similarity index 91%
rename from packages/sanity/src/ui/spacerButton/SpacerButton.tsx
rename to packages/sanity/src/desk/components/spacerButton/SpacerButton.tsx
index ff06ae40c3e..629e66c07f4 100644
--- a/packages/sanity/src/ui/spacerButton/SpacerButton.tsx
+++ b/packages/sanity/src/desk/components/spacerButton/SpacerButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Button, ButtonProps} from '..'
+import {Button, ButtonProps} from '../../../ui-components'
 
 interface SpacerButtonProps {
   size?: ButtonProps['size']
diff --git a/packages/sanity/src/ui/spacerButton/index.ts b/packages/sanity/src/desk/components/spacerButton/index.ts
similarity index 100%
rename from packages/sanity/src/ui/spacerButton/index.ts
rename to packages/sanity/src/desk/components/spacerButton/index.ts
diff --git a/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx b/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
index e7b523c72b5..c159b066720 100644
--- a/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
+++ b/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
@@ -4,7 +4,7 @@ import React, {useCallback, useState} from 'react'
 import {CheckmarkIcon, LaunchIcon} from '@sanity/icons'
 import {Flex, Grid, Stack, Text} from '@sanity/ui'
 import {generateHelpUrl} from '@sanity/generate-help-url'
-import {Button, Popover} from '../../ui'
+import {Button, Popover} from '../../ui-components'
 import {useDeskRenameOnboarding} from './onboardingStore'
 
 const RENAME_ANNOUNCEMENT_URL = generateHelpUrl('desk-is-now-structure')
diff --git a/packages/sanity/src/desk/panes/document/document-layout/DocumentLayout.tsx b/packages/sanity/src/desk/panes/document/document-layout/DocumentLayout.tsx
index 9263a8c061b..3200cc827db 100644
--- a/packages/sanity/src/desk/panes/document/document-layout/DocumentLayout.tsx
+++ b/packages/sanity/src/desk/panes/document/document-layout/DocumentLayout.tsx
@@ -28,7 +28,7 @@ import {useDocumentPane} from '../useDocumentPane'
 import {DocumentPanelHeader} from '../documentPanel/header'
 import {DocumentInspectorMenuItemsResolver} from '../DocumentInspectorMenuItemsResolver'
 import {usePreviewUrl} from '../usePreviewUrl'
-import {TOOLTIP_DELAY_PROPS} from '../../../../ui/tooltip/constants'
+import {TOOLTIP_DELAY_PROPS} from '../../../../ui-components'
 import {getMenuItems} from '../menuItems'
 import {DocumentLayoutError} from './DocumentLayoutError'
 import {
diff --git a/packages/sanity/src/desk/panes/document/documentInspector/DocumentInspectorHeader.tsx b/packages/sanity/src/desk/panes/document/documentInspector/DocumentInspectorHeader.tsx
index e490fb3f712..fca61129d72 100644
--- a/packages/sanity/src/desk/panes/document/documentInspector/DocumentInspectorHeader.tsx
+++ b/packages/sanity/src/desk/panes/document/documentInspector/DocumentInspectorHeader.tsx
@@ -2,7 +2,7 @@ import {CloseIcon} from '@sanity/icons'
 import {Box, Card, CardProps, Flex, Text} from '@sanity/ui'
 import React, {HTMLProps, ReactNode} from 'react'
 import styled from 'styled-components'
-import {Button} from '../../../../ui'
+import {Button} from '../../../../ui-components'
 
 export interface DocumentInspectorHeaderProps {
   as?: CardProps['as']
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/banners/Banner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/banners/Banner.tsx
index 1b8bbb194ed..8962b9bdad6 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/banners/Banner.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/banners/Banner.tsx
@@ -1,7 +1,7 @@
-import {ButtonTone, Card, CardTone, Container, Flex, Text} from '@sanity/ui'
+import {ButtonTone, Card, CardTone, Flex, Text} from '@sanity/ui'
 import React from 'react'
-import {Button} from '../../../../../ui'
-import {SpacerButton} from '../../../../../ui/spacerButton'
+import {Button} from '../../../../../ui-components'
+import {SpacerButton} from '../../../../components/spacerButton'
 
 interface BannerProps {
   action?: {
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx
index aec8d7154e1..093274d4a19 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx
@@ -2,10 +2,10 @@
 import {Box, Container, Flex, Spinner, Text, focusFirstDescendant} from '@sanity/ui'
 import React, {forwardRef, useEffect, useMemo, useCallback, useState} from 'react'
 import {tap} from 'rxjs/operators'
-import {LoadingBlock} from '../../../../../ui/loadingBlock'
 import {structureLocaleNamespace} from '../../../../i18n'
 import {useDocumentTitle} from '../../useDocumentTitle'
 import {useDocumentPane} from '../../useDocumentPane'
+import {Delay} from '../../../../components'
 import {useConditionalToast} from './useConditionalToast'
 import {FormHeader} from './FormHeader'
 import {
@@ -20,8 +20,8 @@ import {
   useDocumentPresence,
   useDocumentStore,
   useTranslation,
+  LoadingBlock,
 } from 'sanity'
-import {Delay} from '../../../../components'
 
 interface FormViewProps {
   hidden: boolean
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx
index c938dcf6649..0bc86113334 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx
@@ -2,7 +2,7 @@ import React, {useCallback} from 'react'
 import {TabList} from '@sanity/ui'
 import {useDocumentPane} from '../../useDocumentPane'
 import {usePaneRouter} from '../../../../components'
-import {Tab} from '../../../../../ui'
+import {Tab} from '../../../../../ui-components'
 
 export function DocumentHeaderTabs() {
   const {activeViewId, paneKey, views} = useDocumentPane()
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
index d1427d0d0c7..215b1104dd6 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
@@ -12,10 +12,8 @@ import {TimelineMenu} from '../../timeline'
 import {useDocumentPane} from '../../useDocumentPane'
 import {isMenuNodeButton, isNotMenuNodeButton, resolveMenuNodes} from '../../../../menuNodes'
 import {useDeskTool} from '../../../../useDeskTool'
-import {structureLocaleNamespace} from '../../../../i18n'
 import {PaneMenuItem} from '../../../../types'
-import {Button} from '../../../../../ui'
-import {TOOLTIP_DELAY_PROPS} from '../../../../../ui/tooltip/constants'
+import {Button, TOOLTIP_DELAY_PROPS} from '../../../../../ui-components'
 import {structureLocaleNamespace} from '../../../../i18n'
 import {DocumentHeaderTabs} from './DocumentHeaderTabs'
 import {DocumentHeaderTitle} from './DocumentHeaderTitle'
diff --git a/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx b/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx
index ad2d3d5cb72..bf6f2f29eb0 100644
--- a/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx
@@ -2,7 +2,7 @@ import {SanityDocument} from '@sanity/types'
 import {Card, Code, Flex, TabList, TabPanel} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import JSONInspector from '@rexxars/react-json-inspector'
-import {Dialog, Tab} from '../../../../ui'
+import {Dialog, Tab} from '../../../../ui-components'
 import {DocTitle} from '../../../components'
 import {useDeskToolSetting} from '../../../useDeskToolSetting'
 import {structureLocaleNamespace} from '../../../i18n'
diff --git a/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx b/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx
index fa206f52bea..7851257d88d 100644
--- a/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx
+++ b/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx
@@ -2,7 +2,6 @@ import {ObjectDiff} from '@sanity/diff'
 import {AvatarStack, BoundaryElementProvider, Box, Card, Flex} from '@sanity/ui'
 import React, {ReactElement, useRef} from 'react'
 import styled from 'styled-components'
-import {LoadingBlock} from '../../../../../ui/loadingBlock'
 import {TimelineMenu} from '../../timeline'
 import {useDocumentPane} from '../../useDocumentPane'
 import {DocumentInspectorHeader} from '../../documentInspector'
@@ -20,6 +19,7 @@ import {
   UserAvatar,
   useTimelineSelector,
   useTranslation,
+  LoadingBlock,
 } from 'sanity'
 
 const Scroller = styled(ScrollContainer)`
diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
index 392553a9d23..8761aef6eda 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
@@ -1,10 +1,14 @@
 import {Menu} from '@sanity/ui'
 import React, {useCallback, useState, useMemo, useId} from 'react'
-import {MenuButton, MenuItem, PopoverProps} from '../../../../ui'
-import {ContextMenuButton} from '../../../../ui/contextMenuButton'
+import {MenuButton, MenuItem, PopoverProps} from '../../../../ui-components'
 import {structureLocaleNamespace} from '../../../i18n'
 import {ActionStateDialog} from './ActionStateDialog'
-import {DocumentActionDescription, LegacyLayerProvider, useTranslation} from 'sanity'
+import {
+  DocumentActionDescription,
+  LegacyLayerProvider,
+  useTranslation,
+  ContextMenuButton,
+} from 'sanity'
 
 export interface ActionMenuButtonProps {
   actionStates: DocumentActionDescription[]
diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionStateDialog.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionStateDialog.tsx
index 0ddd928f2b6..83a12be98a0 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionStateDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionStateDialog.tsx
@@ -1,6 +1,6 @@
 import {usePortal, PortalProvider, Text} from '@sanity/ui'
 import React, {useId} from 'react'
-import {Dialog} from '../../../../ui'
+import {Dialog} from '../../../../ui-components'
 import {DOCUMENT_PANEL_PORTAL_ELEMENT} from '../../../constants'
 import {ConfirmDialog} from './dialogs/ConfirmDialog'
 import {ModalDialog} from './dialogs/ModalDialog'
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentBadges.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentBadges.tsx
index 83dc7ec183f..0ff94c72b10 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentBadges.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentBadges.tsx
@@ -1,6 +1,6 @@
 import {Badge, BadgeTone, Inline} from '@sanity/ui'
 import React from 'react'
-import {Tooltip} from '../../../../ui'
+import {Tooltip} from '../../../../ui-components'
 import {RenderBadgeCollectionState} from '../../../components'
 import {useDocumentPane} from '../useDocumentPane'
 import {DocumentBadgeDescription} from 'sanity'
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
index e6d99ee1980..9d193d208e9 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useState} from 'react'
 import {Flex} from '@sanity/ui'
-import {SpacerButton} from '../../../../ui/spacerButton'
+import {SpacerButton} from '../../../components/spacerButton'
 import {useDocumentPane} from '../useDocumentPane'
 import {DocumentStatusBarActions, HistoryStatusBarActions} from './DocumentStatusBarActions'
 import {useResizeObserver} from './useResizeObserver'
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
index 6d448c420c9..bdc707ef4c0 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
@@ -2,7 +2,7 @@ import {Flex, Hotkeys, LayerProvider, Stack, Text} from '@sanity/ui'
 import React, {memo, useMemo, useState} from 'react'
 import {RenderActionCollectionState} from '../../../components'
 import {HistoryRestoreAction} from '../../../documentActions'
-import {Button, Tooltip} from '../../../../ui'
+import {Button, Tooltip} from '../../../../ui-components'
 import {useDocumentPane} from '../useDocumentPane'
 import {ActionMenuButton} from './ActionMenuButton'
 import {ActionStateDialog} from './ActionStateDialog'
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusLine.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusLine.tsx
index 0a995a097f9..48e00059fab 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusLine.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusLine.tsx
@@ -1,11 +1,9 @@
 import {Flex} from '@sanity/ui'
 import React, {useEffect, useLayoutEffect, useState} from 'react'
-import {Tooltip} from '../../../../ui'
-import {DocumentStatus} from '../../../../ui/documentStatus'
-import {DocumentStatusIndicator} from '../../../../ui/documentStatusIndicator'
+import {Tooltip} from '../../../../ui-components'
 import {useDocumentPane} from '../useDocumentPane'
 import {DocumentStatusPulse} from './DocumentStatusPulse'
-import {useSyncState} from 'sanity'
+import {useSyncState, DocumentStatusIndicator, DocumentStatus} from 'sanity'
 
 const SYNCING_TIMEOUT = 1000
 const SAVED_TIMEOUT = 3000
diff --git a/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx b/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx
index b7b9bd28f62..3d88f338e61 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx
@@ -1,7 +1,7 @@
 import {Box, Flex, Grid, Text, useClickOutside, useGlobalKeyDown, useLayer} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {structureLocaleNamespace} from '../../../../i18n'
-import {Button, Popover} from '../../../../../ui'
+import {Button, Popover} from '../../../../../ui-components'
 import {POPOVER_FALLBACK_PLACEMENTS} from './constants'
 import {DocumentActionConfirmDialogProps, useTranslation} from 'sanity'
 
diff --git a/packages/sanity/src/desk/panes/document/statusBar/dialogs/ModalDialog.tsx b/packages/sanity/src/desk/panes/document/statusBar/dialogs/ModalDialog.tsx
index fede91e79fc..1b332d9fa03 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/dialogs/ModalDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/dialogs/ModalDialog.tsx
@@ -1,5 +1,5 @@
 import React, {useId} from 'react'
-import {Dialog} from '../../../../../ui'
+import {Dialog} from '../../../../../ui-components'
 import {DIALOG_WIDTH_TO_UI_WIDTH} from './constants'
 import {DocumentActionModalDialogProps, LegacyLayerProvider} from 'sanity'
 
diff --git a/packages/sanity/src/desk/panes/document/statusBar/dialogs/PopoverDialog.tsx b/packages/sanity/src/desk/panes/document/statusBar/dialogs/PopoverDialog.tsx
index e6aba90aeed..c1561eb1f82 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/dialogs/PopoverDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/dialogs/PopoverDialog.tsx
@@ -1,6 +1,6 @@
 import {useClickOutside, useGlobalKeyDown, useLayer} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
-import {Popover} from '../../../../../ui'
+import {Popover} from '../../../../../ui-components'
 import {POPOVER_FALLBACK_PLACEMENTS} from './constants'
 import {DocumentActionPopoverDialogProps} from 'sanity'
 
diff --git a/packages/sanity/src/desk/panes/document/statusBar/dialogs/constants.ts b/packages/sanity/src/desk/panes/document/statusBar/dialogs/constants.ts
index 13a6b72dd46..a7cb387e433 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/dialogs/constants.ts
+++ b/packages/sanity/src/desk/panes/document/statusBar/dialogs/constants.ts
@@ -1,5 +1,5 @@
 import {Placement} from '@sanity/ui'
-import {DialogProps} from '../../../../../ui'
+import {DialogProps} from '../../../../../ui-components'
 
 export const POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['left', 'bottom']
 
diff --git a/packages/sanity/src/desk/panes/document/timeline/timeline.tsx b/packages/sanity/src/desk/panes/document/timeline/timeline.tsx
index 478042343cb..ad6f8820513 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timeline.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timeline.tsx
@@ -1,9 +1,15 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
 import {Box, Text} from '@sanity/ui'
-import {LoadingBlock} from '../../../../ui/loadingBlock'
+
 import {TimelineItem} from './timelineItem'
 import {ListWrapper, Root, StackWrapper} from './timeline.styled'
-import {Chunk, CommandList, CommandListRenderItemCallback, useTranslation} from 'sanity'
+import {
+  Chunk,
+  CommandList,
+  CommandListRenderItemCallback,
+  useTranslation,
+  LoadingBlock,
+} from 'sanity'
 
 interface TimelineProps {
   chunks: Chunk[]
diff --git a/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx b/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx
index 71181766eaf..d3ca4bca091 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback, createElement, useMemo} from 'react'
 
 import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
-import {ButtonProps} from '../../../../ui'
+import {ButtonProps} from '../../../../ui-components'
 import {getTimelineEventIconComponent} from './helpers'
 import {UserAvatarStack} from './userAvatarStack'
 import {IconBox, IconWrapper, Root, TimestampBox} from './timelineItem.styled'
diff --git a/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx b/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx
index a8b9735a57f..7e4ba7e9f8e 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx
@@ -3,7 +3,7 @@ import {Placement, useClickOutside, useGlobalKeyDown, useToast} from '@sanity/ui
 import React, {useCallback, useState} from 'react'
 import styled from 'styled-components'
 import {useDocumentPane} from '../useDocumentPane'
-import {Button, Popover} from '../../../../ui'
+import {Button, Popover} from '../../../../ui-components'
 import {TimelineError} from './TimelineError'
 import {Timeline} from './timeline'
 import {TIMELINE_ITEM_I18N_KEY_MAPPING} from './timelineI18n'
diff --git a/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx b/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
index 6bc17b7638f..72ebefcdc6f 100644
--- a/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
+++ b/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
@@ -1,10 +1,9 @@
 import {SyncIcon} from '@sanity/icons'
-import {Box, Card, Container, Flex, Heading, Stack, Text} from '@sanity/ui'
+import {Box, Container, Flex, Heading, Stack, Text} from '@sanity/ui'
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
 import {SanityDocument} from '@sanity/types'
 import styled from 'styled-components'
-import {Button} from '../../../ui'
-import {LoadingBlock} from '../../../ui/loadingBlock'
+import {Button} from '../../../ui-components'
 import {Delay, PaneContent, usePane, usePaneLayout, PaneItem} from '../../components'
 import {DocumentListPaneItem, LoadingVariant} from './types'
 import {FULL_LIST_LIMIT} from './constants'
@@ -18,6 +17,7 @@ import {
   useSchema,
   useTranslation,
   Translate,
+  LoadingBlock,
 } from 'sanity'
 
 const RootBox = styled(Box)`
diff --git a/packages/sanity/src/desk/panes/documentList/DocumentListPaneHeader.tsx b/packages/sanity/src/desk/panes/documentList/DocumentListPaneHeader.tsx
index dc5da53c6a8..2fc44f71b8c 100644
--- a/packages/sanity/src/desk/panes/documentList/DocumentListPaneHeader.tsx
+++ b/packages/sanity/src/desk/panes/documentList/DocumentListPaneHeader.tsx
@@ -3,8 +3,7 @@ import React, {memo, useMemo} from 'react'
 import {TooltipDelayGroupProvider} from '@sanity/ui'
 import {PaneMenuItem, PaneMenuItemGroup, DeskToolPaneActionHandler} from '../../types'
 import {BackLink, PaneHeader, PaneHeaderActions, usePane} from '../../components'
-import {Button} from '../../../ui'
-import {TOOLTIP_DELAY_PROPS} from '../../../ui/tooltip/constants'
+import {Button, TOOLTIP_DELAY_PROPS} from '../../../ui-components'
 import {useDeskTool} from '../../useDeskTool'
 import {SortOrder} from './types'
 import {GeneralPreviewLayoutKey, InitialValueTemplateItem} from 'sanity'
diff --git a/packages/sanity/src/desk/panes/list/ListPaneHeader.tsx b/packages/sanity/src/desk/panes/list/ListPaneHeader.tsx
index a5517177143..210b7a6de2c 100644
--- a/packages/sanity/src/desk/panes/list/ListPaneHeader.tsx
+++ b/packages/sanity/src/desk/panes/list/ListPaneHeader.tsx
@@ -1,7 +1,7 @@
 import {ArrowLeftIcon} from '@sanity/icons'
 import React from 'react'
 import {BackLink, PaneHeader, PaneHeaderActions, usePane} from '../../components'
-import {Button} from '../../../ui'
+import {Button} from '../../../ui-components'
 import {PaneMenuItem, PaneMenuItemGroup} from '../../types'
 import {useDeskTool} from '../../useDeskTool'
 
diff --git a/packages/sanity/src/desk/panes/loading/LoadingPane.tsx b/packages/sanity/src/desk/panes/loading/LoadingPane.tsx
index 5d3160df9a5..511e3589ff6 100644
--- a/packages/sanity/src/desk/panes/loading/LoadingPane.tsx
+++ b/packages/sanity/src/desk/panes/loading/LoadingPane.tsx
@@ -3,11 +3,10 @@ import React, {memo, useMemo, useState, useEffect} from 'react'
 import {Observable} from 'rxjs'
 import styled from 'styled-components'
 import {structureLocaleNamespace} from '../../i18n'
-import {LoadingBlock} from '../../../ui/loadingBlock'
 import {Delay} from '../../components/Delay'
 import {Pane, PaneContent} from '../../components/pane'
 import {WaitMessage, getWaitMessages} from './getWaitMessages'
-import {useTranslation} from 'sanity'
+import {LoadingBlock, useTranslation} from 'sanity'
 
 interface LoadingPaneProps {
   delay?: number
diff --git a/packages/sanity/src/desk/panes/userComponent/UserComponentPaneHeader.tsx b/packages/sanity/src/desk/panes/userComponent/UserComponentPaneHeader.tsx
index 01600ea1631..a336c127ca5 100644
--- a/packages/sanity/src/desk/panes/userComponent/UserComponentPaneHeader.tsx
+++ b/packages/sanity/src/desk/panes/userComponent/UserComponentPaneHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {ArrowLeftIcon} from '@sanity/icons'
-import {Button} from '../../../ui'
+import {Button} from '../../../ui-components'
 import {PaneMenuItem, PaneMenuItemGroup, DeskToolPaneActionHandler} from '../../types'
 import {BackLink, PaneHeader, PaneHeaderActions} from '../../components'
 import {useDeskTool} from '../../useDeskTool'
diff --git a/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx b/packages/sanity/src/ui-components/__workshop__/MenuItemStory.tsx
similarity index 100%
rename from packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
rename to packages/sanity/src/ui-components/__workshop__/MenuItemStory.tsx
diff --git a/packages/sanity/src/ui/__workshop__/index.ts b/packages/sanity/src/ui-components/__workshop__/index.ts
similarity index 100%
rename from packages/sanity/src/ui/__workshop__/index.ts
rename to packages/sanity/src/ui-components/__workshop__/index.ts
diff --git a/packages/sanity/src/ui/button/Button.tsx b/packages/sanity/src/ui-components/button/Button.tsx
similarity index 100%
rename from packages/sanity/src/ui/button/Button.tsx
rename to packages/sanity/src/ui-components/button/Button.tsx
diff --git a/packages/sanity/src/ui/button/index.ts b/packages/sanity/src/ui-components/button/index.ts
similarity index 100%
rename from packages/sanity/src/ui/button/index.ts
rename to packages/sanity/src/ui-components/button/index.ts
diff --git a/packages/sanity/src/ui/conditionalWrapper/ConditionalWrapper.tsx b/packages/sanity/src/ui-components/conditionalWrapper/ConditionalWrapper.tsx
similarity index 100%
rename from packages/sanity/src/ui/conditionalWrapper/ConditionalWrapper.tsx
rename to packages/sanity/src/ui-components/conditionalWrapper/ConditionalWrapper.tsx
diff --git a/packages/sanity/src/ui/conditionalWrapper/index.ts b/packages/sanity/src/ui-components/conditionalWrapper/index.ts
similarity index 100%
rename from packages/sanity/src/ui/conditionalWrapper/index.ts
rename to packages/sanity/src/ui-components/conditionalWrapper/index.ts
diff --git a/packages/sanity/src/ui/dialog/Dialog.tsx b/packages/sanity/src/ui-components/dialog/Dialog.tsx
similarity index 100%
rename from packages/sanity/src/ui/dialog/Dialog.tsx
rename to packages/sanity/src/ui-components/dialog/Dialog.tsx
diff --git a/packages/sanity/src/ui/dialog/index.ts b/packages/sanity/src/ui-components/dialog/index.ts
similarity index 100%
rename from packages/sanity/src/ui/dialog/index.ts
rename to packages/sanity/src/ui-components/dialog/index.ts
diff --git a/packages/sanity/src/ui/index.ts b/packages/sanity/src/ui-components/index.ts
similarity index 100%
rename from packages/sanity/src/ui/index.ts
rename to packages/sanity/src/ui-components/index.ts
diff --git a/packages/sanity/src/ui/menuButton/MenuButton.tsx b/packages/sanity/src/ui-components/menuButton/MenuButton.tsx
similarity index 100%
rename from packages/sanity/src/ui/menuButton/MenuButton.tsx
rename to packages/sanity/src/ui-components/menuButton/MenuButton.tsx
diff --git a/packages/sanity/src/ui/menuButton/index.ts b/packages/sanity/src/ui-components/menuButton/index.ts
similarity index 100%
rename from packages/sanity/src/ui/menuButton/index.ts
rename to packages/sanity/src/ui-components/menuButton/index.ts
diff --git a/packages/sanity/src/ui/menuGroup/MenuGroup.tsx b/packages/sanity/src/ui-components/menuGroup/MenuGroup.tsx
similarity index 100%
rename from packages/sanity/src/ui/menuGroup/MenuGroup.tsx
rename to packages/sanity/src/ui-components/menuGroup/MenuGroup.tsx
diff --git a/packages/sanity/src/ui/menuGroup/index.ts b/packages/sanity/src/ui-components/menuGroup/index.ts
similarity index 100%
rename from packages/sanity/src/ui/menuGroup/index.ts
rename to packages/sanity/src/ui-components/menuGroup/index.ts
diff --git a/packages/sanity/src/ui/menuItem/MenuItem.tsx b/packages/sanity/src/ui-components/menuItem/MenuItem.tsx
similarity index 100%
rename from packages/sanity/src/ui/menuItem/MenuItem.tsx
rename to packages/sanity/src/ui-components/menuItem/MenuItem.tsx
diff --git a/packages/sanity/src/ui/menuItem/index.ts b/packages/sanity/src/ui-components/menuItem/index.ts
similarity index 100%
rename from packages/sanity/src/ui/menuItem/index.ts
rename to packages/sanity/src/ui-components/menuItem/index.ts
diff --git a/packages/sanity/src/ui/popover/Popover.tsx b/packages/sanity/src/ui-components/popover/Popover.tsx
similarity index 100%
rename from packages/sanity/src/ui/popover/Popover.tsx
rename to packages/sanity/src/ui-components/popover/Popover.tsx
diff --git a/packages/sanity/src/ui/popover/index.ts b/packages/sanity/src/ui-components/popover/index.ts
similarity index 100%
rename from packages/sanity/src/ui/popover/index.ts
rename to packages/sanity/src/ui-components/popover/index.ts
diff --git a/packages/sanity/src/ui/tab/Tab.tsx b/packages/sanity/src/ui-components/tab/Tab.tsx
similarity index 100%
rename from packages/sanity/src/ui/tab/Tab.tsx
rename to packages/sanity/src/ui-components/tab/Tab.tsx
diff --git a/packages/sanity/src/ui/tab/index.ts b/packages/sanity/src/ui-components/tab/index.ts
similarity index 100%
rename from packages/sanity/src/ui/tab/index.ts
rename to packages/sanity/src/ui-components/tab/index.ts
diff --git a/packages/sanity/src/ui/tooltip/Tooltip.tsx b/packages/sanity/src/ui-components/tooltip/Tooltip.tsx
similarity index 100%
rename from packages/sanity/src/ui/tooltip/Tooltip.tsx
rename to packages/sanity/src/ui-components/tooltip/Tooltip.tsx
diff --git a/packages/sanity/src/ui/tooltip/constants.ts b/packages/sanity/src/ui-components/tooltip/constants.ts
similarity index 100%
rename from packages/sanity/src/ui/tooltip/constants.ts
rename to packages/sanity/src/ui-components/tooltip/constants.ts
diff --git a/packages/sanity/src/ui-components/tooltip/index.ts b/packages/sanity/src/ui-components/tooltip/index.ts
new file mode 100644
index 00000000000..a9d0c8cef5e
--- /dev/null
+++ b/packages/sanity/src/ui-components/tooltip/index.ts
@@ -0,0 +1,2 @@
+export * from './Tooltip'
+export * from './constants'
diff --git a/packages/sanity/src/ui/tooltip/index.ts b/packages/sanity/src/ui/tooltip/index.ts
deleted file mode 100644
index ba15f407377..00000000000
--- a/packages/sanity/src/ui/tooltip/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Tooltip'

From 68621df02069dbc368ab3ef192e5767f2fc6da57 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Mon, 18 Dec 2023 13:11:40 +0100
Subject: [PATCH 148/163] fix(desk): update DeskRename popover

---
 .../DeskRenameToolMenuButtonPopover.tsx          | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx b/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
index c159b066720..f001d803d55 100644
--- a/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
+++ b/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
@@ -1,8 +1,7 @@
 /* eslint-disable @sanity/i18n/no-attribute-string-literals */
 /* eslint-disable i18next/no-literal-string */
 import React, {useCallback, useState} from 'react'
-import {CheckmarkIcon, LaunchIcon} from '@sanity/icons'
-import {Flex, Grid, Stack, Text} from '@sanity/ui'
+import {Flex, Heading, Stack, Text} from '@sanity/ui'
 import {generateHelpUrl} from '@sanity/generate-help-url'
 import {Button, Popover} from '../../ui-components'
 import {useDeskRenameOnboarding} from './onboardingStore'
@@ -61,9 +60,7 @@ function DeskRenamedCard(props: {onDismiss: () => void}) {
     <Stack as="section" padding={3} space={3} onClick={handleClick}>
       <Stack padding={2} space={4}>
         <Flex gap={2} align="center">
-          <Text as="h1" size={1} weight="semibold">
-            <strong>Desk</strong> is now <strong>Structure</strong>
-          </Text>
+          <Heading size={1}>Desk is now structure</Heading>
         </Flex>
 
         <Stack space={3}>
@@ -74,19 +71,18 @@ function DeskRenamedCard(props: {onDismiss: () => void}) {
         </Stack>
       </Stack>
 
-      <Grid columns={2} gap={3}>
+      <Flex width="full" gap={3} justify="flex-end">
         <Button
           as="a"
           data-as="a"
           href={RENAME_ANNOUNCEMENT_URL}
-          icon={LaunchIcon}
           target="_blank"
           rel="noreferrer"
           text="Learn more"
-          mode="ghost"
+          mode="bleed"
         />
-        <Button icon={CheckmarkIcon} onClick={props.onDismiss} text="Got it" tone="primary" />
-      </Grid>
+        <Button onClick={props.onDismiss} text="Got it" tone="primary" />
+      </Flex>
     </Stack>
   )
 }

From be7d84a1dca7f3dd85803cf82ab4ff1ffe06cc98 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Mon, 18 Dec 2023 13:13:52 +0100
Subject: [PATCH 149/163] chore(deps): update @sanity/ui

---
 dev/design-studio/package.json                     | 2 +-
 dev/embedded-studio/package.json                   | 2 +-
 packages/@sanity/portable-text-editor/package.json | 2 +-
 packages/@sanity/vision/package.json               | 2 +-
 yarn.lock                                          | 8 ++++----
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index a90fb91923c..c354ba2326a 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.12",
+    "@sanity/ui": "2.0.0-beta.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/embedded-studio/package.json b/dev/embedded-studio/package.json
index 876ed93e892..9e3ec765075 100644
--- a/dev/embedded-studio/package.json
+++ b/dev/embedded-studio/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "2.0.0-beta.12",
+    "@sanity/ui": "2.0.0-beta.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index 29ff53153aa..cdc6045fda3 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "2.0.0-beta.12",
+    "@sanity/ui": "2.0.0-beta.13",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index 4772f2860f3..f972dcaf905 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -67,7 +67,7 @@
     "@rexxars/react-split-pane": "^0.1.93",
     "@sanity/color": "3.0.0-beta.9",
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.12",
+    "@sanity/ui": "2.0.0-beta.13",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/yarn.lock b/yarn.lock
index 572cb437244..c1da3ef5612 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3876,10 +3876,10 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@2.0.0-beta.12":
-  version "2.0.0-beta.12"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.12.tgz#84027ce8a839cc14bcd7d9ea977b184a7f083cef"
-  integrity sha512-18z4VCO8qTTrub9THPCWW9TLxQ6k+RRU4dmBQG4XSxJYFKmaCkVz4lpxRWLyMaOqEBAsQAvTCmEpyQVjLAF1rA==
+"@sanity/ui@2.0.0-beta.13":
+  version "2.0.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.13.tgz#e3276374d28fcad30b41c3f867ac5a6ac1577482"
+  integrity sha512-neMMdrcUtcfLnzmRRrqLgdVOHpBqmFeN8wM2tu9fVOEDexXyL/CHFrOYlGG+A7JL6BJbOQxaryeFvmFKskZ2cA==
   dependencies:
     "@floating-ui/react-dom" "^2.0.4"
     "@sanity/color" "3.0.0-beta.9"

From e21cfdff1d4a84984dda198edbf2e23bafd48830 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Mon, 18 Dec 2023 16:08:13 +0000
Subject: [PATCH 150/163] fix: hide document status dot for published documents
 with no edits

---
 .../DocumentStatusIndicator.tsx               | 60 ++++++-------------
 .../ReferenceInput/ReferencePreview.tsx       |  6 +-
 .../item/SearchResultItemPreview.tsx          |  2 +-
 .../components/paneItem/PaneItemPreview.tsx   |  2 +-
 .../document/statusBar/DocumentStatusBar.tsx  |  3 +-
 .../document/statusBar/DocumentStatusLine.tsx |  2 +-
 6 files changed, 24 insertions(+), 51 deletions(-)

diff --git a/packages/sanity/src/core/components/documentStatusIndicator/DocumentStatusIndicator.tsx b/packages/sanity/src/core/components/documentStatusIndicator/DocumentStatusIndicator.tsx
index 459ca5d5089..b63389d0113 100644
--- a/packages/sanity/src/core/components/documentStatusIndicator/DocumentStatusIndicator.tsx
+++ b/packages/sanity/src/core/components/documentStatusIndicator/DocumentStatusIndicator.tsx
@@ -2,75 +2,51 @@ import {DotIcon} from '@sanity/icons'
 import {PreviewValue, SanityDocument} from '@sanity/types'
 import {Text} from '@sanity/ui'
 import {useMemo} from 'react'
-import styled, {css} from 'styled-components'
+import styled from 'styled-components'
 
 interface DocumentStatusProps {
   draft?: PreviewValue | Partial<SanityDocument> | null
-  hidePublishedStatus?: boolean
   published?: PreviewValue | Partial<SanityDocument> | null
 }
 
-const Root = styled(Text)<{
-  $draft: boolean
-  $hidePublishedStatus: boolean
-  $published: boolean
-}>((props) => {
-  const {$draft, $hidePublishedStatus, $published} = props
-
-  return css`
-    &&:not([hidden]) {
-      display: ${$hidePublishedStatus && $published && !$draft ? 'none' : 'block'};
-    }
-
-    &[data-status='published'] {
-      --card-icon-color: var(--card-badge-positive-dot-color);
-    }
-    &[data-status='edited'] {
-      --card-icon-color: var(--card-badge-caution-dot-color);
-    }
-    &[data-status='unpublished'] {
-      --card-icon-color: var(--card-badge-default-dot-color);
-      opacity: 0.5 !important;
-    }
-  `
-})
+const Root = styled(Text)`
+  &[data-status='edited'] {
+    --card-icon-color: var(--card-badge-caution-dot-color);
+  }
+  &[data-status='unpublished'] {
+    --card-icon-color: var(--card-badge-default-dot-color);
+    opacity: 0.5 !important;
+  }
+`
 
 /**
  * Renders a dot indicating the current document status.
  *
- * - Green (primary) for published documents with no edits
  * - Yellow (caution) for published documents with edits
  * - Gray (default) for unpublished documents (with or without edits)
  *
+ * No dot will be displayed for published documents without edits.
+ *
  * @internal
  */
-export function DocumentStatusIndicator({
-  draft,
-  hidePublishedStatus,
-  published,
-}: DocumentStatusProps) {
+export function DocumentStatusIndicator({draft, published}: DocumentStatusProps) {
   const $draft = !!draft
   const $published = !!published
-  const $hidePublishedStatus = !!hidePublishedStatus
 
   const status = useMemo(() => {
-    if (!$draft && $published) return 'published'
     if ($draft && !$published) return 'unpublished'
     return 'edited'
   }, [$draft, $published])
 
-  if (!$draft && !$published) {
+  // Return null if the document is:
+  // - Published without edits
+  // - Neither published or without edits (this shouldn't be possible)
+  if ((!$draft && !$published) || (!$draft && $published)) {
     return null
   }
 
   return (
-    <Root
-      $draft={$draft}
-      $hidePublishedStatus={$hidePublishedStatus}
-      $published={$published}
-      data-status={status}
-      size={1}
-    >
+    <Root data-status={status} size={1}>
       <DotIcon />
     </Root>
   )
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
index 23d80259daa..390089cc8de 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
@@ -56,11 +56,7 @@ export function ReferencePreview(props: {
               <DocumentPreviewPresence presence={documentPresence} />
             )}
 
-            <DocumentStatusIndicator
-              draft={preview.draft}
-              hidePublishedStatus
-              published={preview.published}
-            />
+            <DocumentStatusIndicator draft={preview.draft} published={preview.published} />
           </Inline>
         </Box>
       ),
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
index 4ad0a766287..4add24c9ec6 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
@@ -62,7 +62,7 @@ export default function SearchResultItemPreview({
       <Flex align="center" gap={3}>
         {presence && presence.length > 0 && <DocumentPreviewPresence presence={presence} />}
         <Badge>{schemaType.title}</Badge>
-        <DocumentStatusIndicator draft={draft} hidePublishedStatus published={published} />
+        <DocumentStatusIndicator draft={draft} published={published} />
       </Flex>
     )
   }, [draft, isLoading, presence, published, schemaType.title])
diff --git a/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx b/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
index 8bb580a7409..824187721e4 100644
--- a/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
+++ b/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
@@ -54,7 +54,7 @@ export function PaneItemPreview(props: PaneItemPreviewProps) {
     <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
       <Flex align="center" gap={3}>
         {presence && presence.length > 0 && <DocumentPreviewPresence presence={presence} />}
-        <DocumentStatusIndicator draft={draft} hidePublishedStatus published={published} />
+        <DocumentStatusIndicator draft={draft} published={published} />
       </Flex>
     </TooltipDelayGroupProvider>
   )
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
index 9d193d208e9..3c76bc763e2 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
@@ -40,7 +40,8 @@ export function DocumentStatusBar(props: DocumentStatusBarProps) {
             align="center"
             flex={1}
             gap={collapsed ? 2 : 3}
-            paddingX={3}
+            paddingLeft={4}
+            paddingRight={3}
             paddingY={2}
             wrap="wrap"
           >
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusLine.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusLine.tsx
index 48e00059fab..64f3f56db30 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusLine.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusLine.tsx
@@ -59,7 +59,7 @@ export function DocumentStatusLine({singleLine}: DocumentStatusLineProps) {
       }
       placement="top"
     >
-      <Flex align="center" gap={2}>
+      <Flex align="center" gap={3}>
         <DocumentStatusIndicator draft={editState?.draft} published={editState?.published} />
         <DocumentStatus
           draft={editState?.draft}

From 4b995c88803e4fa62de1701701c21ad252839473 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Tue, 19 Dec 2023 09:28:01 +0100
Subject: [PATCH 151/163] fix(core): updates after rebase

---
 .../src/core/form/components/tagInput/tagInput.tsx | 14 ++------------
 .../core/studio/components/navbar/StudioNavbar.tsx |  2 +-
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/sanity/src/core/form/components/tagInput/tagInput.tsx b/packages/sanity/src/core/form/components/tagInput/tagInput.tsx
index 74579da2e91..0b1727e44a8 100644
--- a/packages/sanity/src/core/form/components/tagInput/tagInput.tsx
+++ b/packages/sanity/src/core/form/components/tagInput/tagInput.tsx
@@ -1,17 +1,7 @@
 import {CloseIcon} from '@sanity/icons'
-import {
-  Box,
-  Card,
-  Flex,
-  isHTMLElement,
-  rem,
-  Text,
-  type CSSObject,
-  type Theme,
-  useForwardedRef,
-} from '@sanity/ui'
+import {Box, Card, Flex, isHTMLElement, rem, Text, type Theme, useForwardedRef} from '@sanity/ui'
 import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
-import styled, {css} from 'styled-components'
+import styled, {css, type CSSObject} from 'styled-components'
 import {useTranslation} from '../../../i18n'
 import {studioLocaleNamespace} from '../../../i18n/localeNamespaces'
 import {Button} from '../../../../ui-components'
diff --git a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
index 0b6f9787d6e..e5015d084a2 100644
--- a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
@@ -20,7 +20,7 @@ import {useToolMenuComponent} from '../../studio-components-hooks'
 import {UserMenu} from './userMenu'
 import {NewDocumentButton, useNewDocumentOptions} from './new-document'
 import {PresenceMenu} from './presence'
-import {NavDrawer} from './NavDrawer'
+import {NavDrawer} from './navDrawer'
 import {WorkspaceMenuButton} from './workspace'
 import {ConfigIssuesButton} from './configIssues/ConfigIssuesButton'
 import {SearchButton, SearchDialog} from './search'

From 8d07a9c26324e8a3d3881b8793f61102c529a5f0 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Tue, 19 Dec 2023 10:28:00 +0100
Subject: [PATCH 152/163] fix(tests): fix studio.spec test

---
 dev/studio-e2e-testing/package.json                            | 2 +-
 .../src/core/components/collapseTabList/CollapseTabList.tsx    | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/dev/studio-e2e-testing/package.json b/dev/studio-e2e-testing/package.json
index cebe7bfc365..0b9a7f1351c 100644
--- a/dev/studio-e2e-testing/package.json
+++ b/dev/studio-e2e-testing/package.json
@@ -15,7 +15,7 @@
   ],
   "dependencies": {
     "@sanity/google-maps-input": "^3.0.1",
-    "@sanity/icons": "^2.4.0",
+    "@sanity/icons": "^2.8.0",
     "@sanity/ui": "2.0.0-beta.8",
     "@sanity/vision": "3.22.1",
     "react": "^18.2.0",
diff --git a/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx b/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
index 62d0ae61dca..b5d2efa1c3e 100644
--- a/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
+++ b/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
@@ -51,6 +51,7 @@ export const CollapseTabList = forwardRef(function CollapseTabList(
     disableRestoreFocusOnClose,
     onMenuClose,
     collapsed,
+    ...rest
   } = props
   const [rootEl, setRootEl] = useState<HTMLDivElement | null>(null)
   const [hiddenElements, setHiddenElements] = useState<React.ReactElement[]>([])
@@ -109,7 +110,7 @@ export const CollapseTabList = forwardRef(function CollapseTabList(
   )
 
   return (
-    <Flex direction="column" ref={ref} sizing="border" style={{position: 'relative'}}>
+    <Flex direction="column" ref={ref} sizing="border" style={{position: 'relative'}} {...rest}>
       <Flex justify="center" gap={gap} flex={1}>
         {displayChildren}
         {(hiddenElements.length > 0 || collapsed) && (

From cf7e133a942278dd7d17954e427f7a45a99e8920 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Tue, 19 Dec 2023 10:28:24 +0100
Subject: [PATCH 153/163] fix(comments): update spacing for SpacerAvatar

---
 .../src/desk/comments/src/components/avatars/SpacerAvatar.tsx  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/sanity/src/desk/comments/src/components/avatars/SpacerAvatar.tsx b/packages/sanity/src/desk/comments/src/components/avatars/SpacerAvatar.tsx
index 4defa0f3e9d..232080e8dd9 100644
--- a/packages/sanity/src/desk/comments/src/components/avatars/SpacerAvatar.tsx
+++ b/packages/sanity/src/desk/comments/src/components/avatars/SpacerAvatar.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
-import {studioTheme} from '@sanity/ui'
 
-export const AVATAR_HEIGHT = studioTheme.avatar.sizes[0].size
+export const AVATAR_HEIGHT = 25
 
 const INLINE_STYLE: React.CSSProperties = {
   minWidth: AVATAR_HEIGHT,

From cc14d7d41689a55d950cfa96a6ee5de5eef354b1 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Tue, 19 Dec 2023 10:42:08 +0100
Subject: [PATCH 154/163] fix(tests): remove studio.components.logo test

---
 dev/studio-e2e-testing/components-api/index.tsx |  2 --
 test/e2e/tests/components-api/studio.spec.ts    | 10 ----------
 2 files changed, 12 deletions(-)

diff --git a/dev/studio-e2e-testing/components-api/index.tsx b/dev/studio-e2e-testing/components-api/index.tsx
index ac797358e66..9eb2a9b4082 100644
--- a/dev/studio-e2e-testing/components-api/index.tsx
+++ b/dev/studio-e2e-testing/components-api/index.tsx
@@ -28,7 +28,6 @@ const childComponents = definePlugin({
   studio: {
     components: {
       layout: (props) => <StudioLayout {...props} testId="child-parent-config-studio-layout" />,
-      logo: (props) => <StudioLogo {...props} testId="child-parent-config-studio-logo" />,
       navbar: (props) => <StudioNavbar {...props} testId="child-parent-config-studio-navbar" />,
       toolMenu: (props) => (
         <StudioToolMenu {...props} testId="child-parent-config-studio-tool-menu" />
@@ -58,7 +57,6 @@ export const customComponents = definePlugin({
   studio: {
     components: {
       layout: (props) => <StudioLayout {...props} testId="parent-config-studio-layout" />,
-      logo: (props) => <StudioLogo {...props} testId="parent-config-studio-logo" />,
       navbar: (props) => <StudioNavbar {...props} testId="parent-config-studio-navbar" />,
       toolMenu: (props) => <StudioToolMenu {...props} testId="parent-config-studio-tool-menu" />,
     },
diff --git a/test/e2e/tests/components-api/studio.spec.ts b/test/e2e/tests/components-api/studio.spec.ts
index f5052e5386b..b1cba4410ba 100644
--- a/test/e2e/tests/components-api/studio.spec.ts
+++ b/test/e2e/tests/components-api/studio.spec.ts
@@ -21,16 +21,6 @@ test.describe('Studio Components API:', () => {
     ).toBeVisible()
   })
 
-  test('studio.components.logo', async ({page}) => {
-    page.goto('/test/content')
-    await expect(
-      page
-        .getByTestId('child-parent-config-studio-logo')
-        .getByTestId('parent-config-studio-logo')
-        .getByTestId('studio-logo'),
-    ).toBeVisible()
-  })
-
   test('studio.components.toolMenu', async ({page}) => {
     page.goto('/test/content')
     await expect(

From 9865dc7a511f6b1ff29d1ba2337011d18f120691 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Tue, 19 Dec 2023 11:30:15 +0100
Subject: [PATCH 155/163] fix(test-studio): remove i18n.loadNamespaces function

---
 dev/test-studio/structure/resolveStructure.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/dev/test-studio/structure/resolveStructure.ts b/dev/test-studio/structure/resolveStructure.ts
index 432da5fd56e..4c68ff08443 100644
--- a/dev/test-studio/structure/resolveStructure.ts
+++ b/dev/test-studio/structure/resolveStructure.ts
@@ -33,7 +33,6 @@ import {delayValue} from './_helpers'
 import {typesInOptionGroup} from './groupByOption'
 
 export const structure: StructureResolver = (S, {schema, documentStore, i18n}) => {
-  i18n.loadNamespaces(['testStudio']) // @todo: confirm – is this idiomatic usage?
   const {t} = i18n
   return S.list()
     .title(t('testStudio:structure.root.title' as const) || 'Content')

From 373dd958d3826b0b10a50ba8ca65958a79ccf015 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Tue, 19 Dec 2023 15:07:11 +0100
Subject: [PATCH 156/163] fix(core): newDocumentButton filter not working in
 mobile

---
 .../form/components/formField/FormFieldValidationStatus.tsx  | 1 -
 .../src/core/form/inputs/ReferenceInput/ReferenceItem.tsx    | 2 +-
 .../core/form/inputs/files/common/FileInputButton/styles.ts  | 2 +-
 .../components/navbar/new-document/NewDocumentButton.tsx     | 5 ++++-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
index 4daed69aa8b..87baa819036 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
@@ -58,7 +58,6 @@ export function FormFieldValidationStatus(props: FormFieldValidationStatusProps)
 
   const hasErrors = validation.some((v) => v.level === 'error')
   const hasWarnings = validation.some((v) => v.level === 'warning')
-  // const hasInfo = validation.some((v) => v.level === 'info')
 
   // eslint-disable-next-line no-nested-ternary
   const status = hasErrors ? 'error' : hasWarnings ? 'warning' : 'info'
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
index e0db6e05192..8329dee58c2 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
@@ -8,7 +8,6 @@ import {
   TrashIcon,
 } from '@sanity/icons'
 import type {Reference, ReferenceSchemaType, SchemaType} from '@sanity/types'
-import {LoadingBlock} from '../../../components/loadingBlock'
 import type {ObjectItem, ObjectItemProps} from '../../types'
 import {useScrollIntoViewOnFocusWithin} from '../../hooks/useScrollIntoViewOnFocusWithin'
 import {useDidUpdate} from '../../hooks/useDidUpdate'
@@ -16,6 +15,7 @@ import {randomKey} from '../../utils/randomKey'
 import {FormFieldSet, FormFieldValidationStatus} from '../../components/formField'
 import {FieldPresence} from '../../../presence'
 import {MenuButton, MenuItem} from '../../../../ui-components'
+import {LoadingBlock} from '../../../components/loadingBlock'
 import {ContextMenuButton} from '../../../components/contextMenuButton'
 import {useTranslation} from '../../../i18n'
 import {ChangeIndicator} from '../../../changeIndicators'
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts b/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts
index 87a10783ac3..65b1c00cb2f 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts
@@ -16,7 +16,7 @@ export const FileButton = styled(Button).attrs({forwardedAs: 'label'})(
         }
       }
 
-      // The underyling file input is rendered as children within a Sanity UI <Button> component.
+      // The underlying file input is rendered as children within a Sanity UI <Button> component.
       // The below visibly hides it by targeting the input's parent <span> element, which is
       // added by the <Button> component.
       // TODO: refactor, avoid nth-child selector usage
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
index 31ddaff84b7..935aec8be30 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
@@ -198,7 +198,10 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
           >
             <RootFlex direction="column" flex={1} height="fill">
               <DialogHeaderCard padding={2} borderBottom>
-                <TextInput data-testid="new-document-button-search-input" />
+                <TextInput
+                  data-testid="new-document-button-search-input"
+                  {...sharedTextInputProps}
+                />
               </DialogHeaderCard>
 
               <Flex direction="column" overflow="hidden">

From 6f0a688a08f3f605dc95e70e92fffe6b23fa06a4 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Tue, 19 Dec 2023 15:50:09 +0100
Subject: [PATCH 157/163] fix(core): update corsOriginErroScreen

---
 .../src/core/studio/screens/CorsOriginErrorScreen.tsx  | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx b/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx
index 8b31a715afc..516a6e3fce2 100644
--- a/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx
@@ -70,16 +70,6 @@ export function CorsOriginErrorScreen(props: CorsOriginErrorScreenProps) {
           {/* added for accessibility */}
           <ScreenReaderLabel aria-hidden="true">CORS URL to be added</ScreenReaderLabel>
           <TextInput value={origin} readOnly />
-
-          <Button
-            as="a"
-            href={corsUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            tone="primary"
-            text="Continue"
-            iconRight={LaunchIcon}
-          />
         </Stack>
       </Dialog>
     </Card>

From 52e64bb7990e01c995720b8b78f0a59a722721b4 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Tue, 19 Dec 2023 16:38:17 +0100
Subject: [PATCH 158/163] chore(cleanup): clean pr changes

---
 .../panes/document/documentPanel/header/DocumentHeaderTitle.tsx  | 1 -
 .../src/desk/panes/document/timeline/timelineItem.styled.tsx     | 1 -
 .../sanity/src/desk/panes/document/timeline/timelineItem.tsx     | 1 -
 3 files changed, 3 deletions(-)

diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTitle.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTitle.tsx
index e4371a3ef4b..211645443c3 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTitle.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTitle.tsx
@@ -1,5 +1,4 @@
 import React, {ReactElement} from 'react'
-import {useDocumentTitle} from '../../useDocumentTitle'
 import {useDocumentPane} from '../../useDocumentPane'
 import {structureLocaleNamespace} from '../../../../i18n'
 import {unstable_useValuePreview as useValuePreview, useTranslation} from 'sanity'
diff --git a/packages/sanity/src/desk/panes/document/timeline/timelineItem.styled.tsx b/packages/sanity/src/desk/panes/document/timeline/timelineItem.styled.tsx
index 433094449b9..4ee8fa7c316 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timelineItem.styled.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timelineItem.styled.tsx
@@ -1,5 +1,4 @@
 import {
-  Text,
   Box,
   Flex,
   rem,
diff --git a/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx b/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx
index d3ca4bca091..f0e183bbf80 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx
@@ -1,5 +1,4 @@
 import React, {useCallback, createElement, useMemo} from 'react'
-
 import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
 import {ButtonProps} from '../../../../ui-components'
 import {getTimelineEventIconComponent} from './helpers'

From 434c23944633d005b2d22de77446cf63e0449765 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Tue, 19 Dec 2023 17:05:26 +0100
Subject: [PATCH 159/163] chore(i18n): restore removed keys

---
 .../sanity/src/core/i18n/bundles/studio.ts    | 36 +++++++++++++++++++
 packages/sanity/src/desk/i18n/resources.ts    | 32 +++++++++++++++--
 2 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index 35fa9f218ad..e06e166615f 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -17,6 +17,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'asset-source.asset-usage-dialog.header_file': 'Documents using file',
   /** Header in usage dialog for image assets */
   'asset-source.asset-usage-dialog.header_image': 'Documents using image',
+  /** Text shown in usage dialog when loading documents using the selected asset */
+  'asset-source.asset-usage-dialog.loading': 'Loading…',
   /** Text for cancel action in delete-asset dialog */
   'asset-source.delete-dialog.action.cancel': 'Cancel',
   /** Text for "confirm delete" action in delete-asset dialog */
@@ -25,6 +27,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'asset-source.delete-dialog.header_file': 'Delete file',
   /** Dialog header for delete-asset dialog when deleting an image */
   'asset-source.delete-dialog.header_image': 'Delete image',
+  /** Text shown in delete dialog when loading documents using the selected asset */
+  'asset-source.delete-dialog.loading': 'Loading…',
   /** Message confirming to delete *named* file */
   'asset-source.delete-dialog.usage-list.confirm-delete-file_named':
     'You are about to delete the file <strong>{{filename}}}</strong> and its metadata. Are you sure?',
@@ -245,6 +249,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'changes.inspector.to-label': 'To',
   /** Loading author of change in the differences tooltip in the review changes pane */
   'changes.loading-author': 'Loading…',
+  /** Loading changes in Review Changes Pane */
+  'changes.loading-changes': 'Loading changes…',
   /** No Changes description in the Review Changes pane */
   'changes.no-changes-description':
     'Edit the document or select an older version in the timeline to see a list of changes appear in this panel.',
@@ -480,6 +486,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.array.no-items-label': 'No items',
   /** Label for read only array fields */
   'inputs.array.read-only-label': 'This field is read-only',
+  /** Label for when the array input is resolving the initial value for the item */
+  'inputs.array.resolving-initial-value': 'Resolving initial value…',
   /** Placeholder value for datetime input */
   'inputs.datetime.placeholder': 'e.g. {{example}}',
   /** Acessibility label for button to open file options menu */
@@ -511,6 +519,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.files.common.actions-menu.download.label': 'Download',
   /** The URL is copied to the clipboard */
   'inputs.files.common.actions-menu.notification.url-copied': 'The URL is copied to the clipboard',
+  /** Replace */
+  'inputs.files.common.actions-menu.replace.label': 'Replace',
   /** Upload */
   'inputs.files.common.actions-menu.upload.label': 'Upload',
   /** Drop to upload */
@@ -878,12 +888,30 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.reference.metadata-error.title': 'Unable to load reference metadata',
   /** Message shown when no documents were found that matched the given search string */
   'inputs.reference.no-results-for-query': 'No results for <strong>“{{searchTerm}}”</strong>',
+  /** Text for tooltip showing when a document was edited, using relative time (eg "how long ago was it edited?") */
+  'inputs.reference.preview.edited-at-time': 'Edited <RelativeTime/>',
+  /** Accessibility label for icon indicating that document does _not_ have any unpublished changes */
+  'inputs.reference.preview.has-no-unpublished-changes-aria-label': 'No unpublished edits',
+  /** Accessibility label for icon indicating that document has unpublished changes */
+  'inputs.reference.preview.has-unpublished-changes-aria-label': 'Edited',
+  /** Accessibility label for icon indicating that document does _not_ have a published version */
+  'inputs.reference.preview.is-not-published-aria-label': 'Not published',
+  /** Accessibility label for icon indicating that document has a published version */
+  'inputs.reference.preview.is-published-aria-label': 'Published',
+  /** Text for tooltip indicating that a document has no unpublished edits */
+  'inputs.reference.preview.no-unpublished-edits': 'No unpublished edits',
+  /** Text for tooltip indicating that a document has not yet been published */
+  'inputs.reference.preview.not-published': 'Not published',
+  /** Text for tooltip showing when a document was published, using relative time (eg "how long ago was it published?") */
+  'inputs.reference.preview.published-at-time': 'Published <RelativeTime/>',
   /** The referenced document no longer exist and might have been deleted (for weak references) */
   'inputs.reference.referenced-document-does-not-exist':
     'The referenced document no longer exist and might have been deleted (document ID: <code>{{documentId}}</code>).',
   /** The referenced document could not be displayed to the user because of insufficient permissions */
   'inputs.reference.referenced-document-insufficient-permissions':
     'The referenced document could not be accessed due to insufficient permissions',
+  /** Label for when the reference input is resolving the initial value for an item */
+  'inputs.reference.resolving-initial-value': 'Resolving initial value…',
   /** Placeholder shown in a reference input with no current value */
   'inputs.reference.search-placeholder': 'Type to search',
   /** Explanation of the consequences of leaving the reference as strong instead of weak */
@@ -982,6 +1010,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'new-document.create-new-document-label': 'New document…',
   /** Placeholder for the "filter" input within the new document menu */
   'new-document.filter-placeholder': 'Filter',
+  /** Loading indicator text within the new document menu */
+  'new-document.loading': 'Loading…',
   /** Accessibility label for the list displaying options in the new document menu */
   'new-document.new-document-aria-label': 'New document',
   /** Message for when there are no document type options in the new document menu */
@@ -1551,6 +1581,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
     'Cannot apply {{name}} to multiple blocks',
   /** Label for action to sign out of the current sanity project */
   'user-menu.action.sign-out': 'Sign out',
+  /** Title for appearance section for the current studio (dark / light / system scheme) */
+  'user-menu.appearance-title': 'Appearance',
   /** Label for close menu button for user menu */
   'user-menu.close-menu': 'Close menu',
   /** Description for using the "dark theme" in the appearance user menu */
@@ -1565,6 +1597,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'user-menu.color-scheme.system-description': 'Use system appearance',
   /** Title for using system apparence in the appearance user menu */
   'user-menu.color-scheme.system-title': 'System',
+  /** Title for locale section for the current studio */
+  'user-menu.locale-title': 'Language',
   /** Label for tooltip to show which provider the currently logged in user is using */
   'user-menu.login-provider': 'Signed in with {{providerTitle}}',
   /**
@@ -1585,6 +1619,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'workspaces.select-workspace-aria-label': 'Select workspace',
   /** Button label for opening the workspace switcher */
   'workspaces.select-workspace-label': 'Select workspace',
+  /** Title for Workplaces dropdown menu */
+  'workspaces.title': 'Workspaces',
 })
 
 /**
diff --git a/packages/sanity/src/desk/i18n/resources.ts b/packages/sanity/src/desk/i18n/resources.ts
index ef9e58fea5c..9961c64a611 100644
--- a/packages/sanity/src/desk/i18n/resources.ts
+++ b/packages/sanity/src/desk/i18n/resources.ts
@@ -282,18 +282,26 @@ const structureLocaleStrings = defineLocalesResources('structure', {
 
   /** Text shown on back button visible on smaller breakpoints */
   'pane-header.back-button.text': 'Back',
+  /** tooltip text (via `title` attribute) for the menu button */
+  'pane-header.context-menu-button.tooltip': 'Show menu',
+  /** Appears in a document list pane header if there are more than one option for create. This is the label for that menu */
+  'pane-header.create-menu.label': 'Create',
   /** Tooltip displayed on the create new button in document lists */
   'pane-header.create-new-button.tooltip': 'Create new document',
   /** The `aria-label` for the disabled button in the pane header if create permissions are granted */
   'pane-header.disabled-created-button.aria-label': 'Insufficient permissions',
-
+  /** The text shown in the tooltip of pane item previews of documents if there are unpublished edits */
+  'pane-item.draft-status.has-draft.tooltip': 'Edited <RelativeTime/>',
   /** The text shown in the tooltip of pane item previews of documents if there are no unpublished edits */
   'pane-item.draft-status.no-draft.tooltip': 'No unpublished edits',
   /** The subtitle tor pane item previews if there isn't a matching schema type found */
   'pane-item.missing-schema-type.subtitle': 'Document: <Code>{{documentId}}</Code>',
   /** The title tor pane item previews if there isn't a matching schema type found */
   'pane-item.missing-schema-type.title': 'No schema found for type <Code>{{documentType}}</Code>',
-
+  /** The text shown in the tooltip of pane item previews of documents if there are unpublished edits */
+  'pane-item.published-status.has-published.tooltip': 'Published <RelativeTime/>',
+  /** The text shown in the tooltip of pane item previews of documents if there are no unpublished edits */
+  'pane-item.published-status.no-published.tooltip': 'No unpublished edits',
   /** The text used in the document header title if there is an error */
   'panes.document-header-title.error.text': 'Error: {{error}}',
   /** The text used in the document header title if creating a new item */
@@ -376,6 +384,26 @@ const structureLocaleStrings = defineLocalesResources('structure', {
   /** The text for the "Open preview" action for a document */
   'production-preview.menu-item.title': 'Open preview',
 
+  /** Accessibility label indicating when the document was last published, in relative time, eg "3 weeks ago" */
+  'status-bar.publish-status-button.last-published-time.aria-label':
+    'Last published {{relativeTime}}',
+  /** Text for tooltip showing explanation of timestamp/relative time, eg "Last published <RelativeTime/>" */
+  'status-bar.publish-status-button.last-published-time.tooltip': 'Last published <RelativeTime/>',
+  /** Accessibility label indicating when the document was last updated, in relative time, eg "2 hours ago" */
+  'status-bar.publish-status-button.last-updated-time.aria-label': 'Last updated {{relativeTime}}',
+  /** Text for tooltip showing explanation of timestamp/relative time, eg "Last updated <RelativeTime/>" */
+  'status-bar.publish-status-button.last-updated-time.tooltip': 'Last updated <RelativeTime/>',
+  /** Aria label for the button */
+  'status-bar.review-changes-button.aria-label': 'Review changes',
+  /** Label for button when status is saved */
+  'status-bar.review-changes-button.status.saved.text': 'Saved!',
+  /** Label for button when status is syncing */
+  'status-bar.review-changes-button.status.syncing.text': 'Saving...',
+  /** Text for the secondary text for tooltip for the button */
+  'status-bar.review-changes-button.tooltip.changes-saved': 'Changes saved',
+  /** Primary text for tooltip for the button */
+  'status-bar.review-changes-button.tooltip.text': 'Review changes',
+
   /** The text that appears in side the documentation link */
   'structure-error.docs-link.text': 'View documentation',
   /** Labels the error message or error stack of the structure error screen */

From e914c84cbf15d833c30bd822868777c21e490b09 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Tue, 19 Dec 2023 17:36:44 +0100
Subject: [PATCH 160/163] fix(i18n): translate DocumentStatus

---
 .../components/documentStatus/DocumentStatus.tsx     | 12 +++++-------
 packages/sanity/src/core/i18n/bundles/studio.ts      |  7 +++++++
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/sanity/src/core/components/documentStatus/DocumentStatus.tsx b/packages/sanity/src/core/components/documentStatus/DocumentStatus.tsx
index 75e439d07ed..b21c5ae1b9d 100644
--- a/packages/sanity/src/core/components/documentStatus/DocumentStatus.tsx
+++ b/packages/sanity/src/core/components/documentStatus/DocumentStatus.tsx
@@ -2,6 +2,7 @@ import {PreviewValue, SanityDocument} from '@sanity/types'
 import {Flex, Text} from '@sanity/ui'
 import styled from 'styled-components'
 import {useDateTimeFormat, useRelativeTime} from '../..'
+import {useTranslation} from '../../i18n'
 
 interface DocumentStatusProps {
   absoluteDate?: boolean
@@ -25,6 +26,7 @@ const StyledText = styled(Text)`
  * @internal
  */
 export function DocumentStatus({absoluteDate, draft, published, singleLine}: DocumentStatusProps) {
+  const {t} = useTranslation()
   const draftUpdatedAt = draft && '_updatedAt' in draft ? draft._updatedAt : ''
   const publishedUpdatedAt = published && '_updatedAt' in published ? published._updatedAt : ''
 
@@ -49,7 +51,6 @@ export function DocumentStatus({absoluteDate, draft, published, singleLine}: Doc
   const publishedDate = absoluteDate ? publishedDateAbsolute : publishedUpdatedTimeAgo
   const updatedDate = absoluteDate ? draftDateAbsolute : draftUpdatedTimeAgo
 
-  // @todo: localize
   return (
     <Flex
       align={singleLine ? 'center' : 'flex-start'}
@@ -58,21 +59,18 @@ export function DocumentStatus({absoluteDate, draft, published, singleLine}: Doc
       wrap="nowrap"
     >
       {!publishedDate && (
-        // eslint-disable-next-line i18next/no-literal-string
         <StyledText size={1} weight="medium">
-          Not published
+          {t('document-status.not-published')}
         </StyledText>
       )}
       {publishedDate && (
-        // eslint-disable-next-line i18next/no-literal-string
         <StyledText size={1} weight="medium">
-          Published {publishedDate}
+          {t('document-status.published', {date: publishedDate})}
         </StyledText>
       )}
       {updatedDate && (
-        // eslint-disable-next-line i18next/no-literal-string
         <StyledText muted size={1} wrap="nowrap">
-          Edited {updatedDate}
+          {t('document-status.edited', {date: updatedDate})}
         </StyledText>
       )}
     </Flex>
diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index e06e166615f..7a8caae766c 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -336,6 +336,13 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /** Title for the default ordering/SortOrder if no orderings are provided and the title field is found */
   'default-orderings.title': 'Sort by Title',
 
+  /** Label to show in the document footer indicating the last edited date of the document */
+  'document-status.edited': 'Edited {{date}}',
+  /** Label to show in the document footer indicating the document is not published*/
+  'document-status.not-published': 'Not published',
+  /** Label to show in the document footer indicating the published date of the document */
+  'document-status.published': 'Published {{date}}',
+
   /** The value of the <code>_key</code> property must be a unique string. */
   'form.error.duplicate-keys-alert.details.additional-description':
     'The value of the <code>_key</code> property must be a unique string.',

From eb4a24266aaa99916054ddeb1f49ac998f84064d Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Tue, 19 Dec 2023 18:02:44 +0100
Subject: [PATCH 161/163] fix(tests): add react reference to fix broken test

---
 .../studio/components/navbar/free-trial/FreeTrialProvider.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialProvider.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialProvider.tsx
index f21b1dc00b7..4ecd9bdabfb 100644
--- a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialProvider.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialProvider.tsx
@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useState} from 'react'
+import React, {useCallback, useEffect, useState} from 'react'
 import {useClient} from '../../../../hooks'
 import {SANITY_VERSION} from '../../../../version'
 import {supportsLocalStorage} from '../../../../util/supportsLocalStorage'

From a0df360c3836aeaf7361d532e253238ffcaf9330 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <46196328+pedrobonamin@users.noreply.github.com>
Date: Tue, 19 Dec 2023 18:13:51 +0100
Subject: [PATCH 162/163] fix(core): update changes inspector revert
 confirmation popovers (#5398)

---
 .../src/core/field/diff/components/ChangeList.tsx      | 10 +++++-----
 .../src/core/field/diff/components/FieldChange.tsx     | 10 +++++-----
 .../src/core/field/diff/components/GroupChange.tsx     | 10 +++++-----
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/sanity/src/core/field/diff/components/ChangeList.tsx b/packages/sanity/src/core/field/diff/components/ChangeList.tsx
index 95d13d0fdc9..ed06c1972f9 100644
--- a/packages/sanity/src/core/field/diff/components/ChangeList.tsx
+++ b/packages/sanity/src/core/field/diff/components/ChangeList.tsx
@@ -1,4 +1,4 @@
-import {Box, Card, Grid, Stack, Text, useClickOutside} from '@sanity/ui'
+import {Box, Card, Flex, Stack, Text, useClickOutside} from '@sanity/ui'
 import {RevertIcon} from '@sanity/icons'
 import React, {useCallback, useContext, useMemo, useState} from 'react'
 import {SanityDocument} from '@sanity/client'
@@ -118,15 +118,15 @@ export function ChangeList({diff, fields, schemaType}: ChangeListProps): React.R
         {showFooter && isComparingCurrent && !isPermissionsLoading && permissions?.granted && (
           <Popover
             content={
-              <Stack space={1}>
-                <Box padding={1}>
+              <Stack space={3}>
+                <Box paddingY={3}>
                   <Text size={1}>
                     {t('changes.action.revert-all-description', {
                       count: changes.length,
                     })}
                   </Text>
                 </Box>
-                <Grid columns={2} gap={2} marginTop={2}>
+                <Flex gap={3} justify="flex-end">
                   <Button
                     mode="ghost"
                     text={t('changes.action.revert-all-cancel')}
@@ -137,7 +137,7 @@ export function ChangeList({diff, fields, schemaType}: ChangeListProps): React.R
                     text={t('changes.action.revert-all-confirm')}
                     onClick={revertAllChanges}
                   />
-                </Grid>
+                </Flex>
               </Stack>
             }
             open={confirmRevertAllOpen}
diff --git a/packages/sanity/src/core/field/diff/components/FieldChange.tsx b/packages/sanity/src/core/field/diff/components/FieldChange.tsx
index bab7c4ab061..c0947540037 100644
--- a/packages/sanity/src/core/field/diff/components/FieldChange.tsx
+++ b/packages/sanity/src/core/field/diff/components/FieldChange.tsx
@@ -1,5 +1,5 @@
 import React, {useCallback, useMemo, useState} from 'react'
-import {Box, Grid, Stack, Text, useClickOutside} from '@sanity/ui'
+import {Box, Flex, Stack, Text, useClickOutside} from '@sanity/ui'
 import {ObjectSchemaType} from '@sanity/types'
 import {useDocumentOperation} from '../../../hooks'
 import {Button, Popover} from '../../../../ui-components'
@@ -109,13 +109,13 @@ export function FieldChange(
               {isComparingCurrent && !isPermissionsLoading && permissions?.granted && (
                 <Popover
                   content={
-                    <Stack space={1}>
-                      <Box padding={1}>
+                    <Stack space={3}>
+                      <Box paddingY={3}>
                         <Text size={1}>
                           {t('changes.action.revert-changes-description', {count: 1})}
                         </Text>
                       </Box>
-                      <Grid columns={2} gap={2} marginTop={2}>
+                      <Flex gap={3} justify="flex-end">
                         <Button
                           mode="ghost"
                           onClick={closeRevertChangesConfirmDialog}
@@ -126,7 +126,7 @@ export function FieldChange(
                           onClick={handleRevertChanges}
                           text={t('changes.action.revert-changes-confirm-change', {count: 1})}
                         />
-                      </Grid>
+                      </Flex>
                     </Stack>
                   }
                   open={confirmRevertOpen}
diff --git a/packages/sanity/src/core/field/diff/components/GroupChange.tsx b/packages/sanity/src/core/field/diff/components/GroupChange.tsx
index c11d8273cb8..63c485d5387 100644
--- a/packages/sanity/src/core/field/diff/components/GroupChange.tsx
+++ b/packages/sanity/src/core/field/diff/components/GroupChange.tsx
@@ -1,5 +1,5 @@
 import React, {useCallback, useContext, useMemo, useState} from 'react'
-import {Box, Grid, Stack, Text, useClickOutside} from '@sanity/ui'
+import {Box, Flex, Stack, Text, useClickOutside} from '@sanity/ui'
 import {Button, Popover} from '../../../../ui-components'
 import {useDocumentOperation} from '../../../hooks'
 import {undoChange} from '../changes/undoChange'
@@ -85,13 +85,13 @@ export function GroupChange(
           {isComparingCurrent && !isPermissionsLoading && permissions?.granted && (
             <Popover
               content={
-                <Stack space={1}>
-                  <Box padding={1}>
+                <Stack space={3}>
+                  <Box paddingY={3}>
                     <Text size={1}>
                       {t('changes.action.revert-changes-description', {count: changes.length})}
                     </Text>
                   </Box>
-                  <Grid columns={2} gap={2} marginTop={2}>
+                  <Flex gap={3} justify="flex-end">
                     <Button
                       mode="ghost"
                       onClick={closeRevertChangesConfirmDialog}
@@ -102,7 +102,7 @@ export function GroupChange(
                       onClick={handleRevertChanges}
                       text={t('changes.action.revert-changes-confirm-change', {count: 1})}
                     />
-                  </Grid>
+                  </Flex>
                 </Stack>
               }
               padding={3}

From 20e617ebc6cdcc757173a16886bfd85d753da7a0 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Tue, 19 Dec 2023 19:18:11 +0100
Subject: [PATCH 163/163] chore(deps): update sanity/presentation package

---
 dev/studio-e2e-testing/package.json    |  2 +-
 dev/test-studio/package.json           |  2 +-
 examples/ecommerce-studio/package.json |  2 +-
 packages/sanity/package.json           |  4 +-
 yarn.lock                              | 88 ++++++--------------------
 5 files changed, 23 insertions(+), 75 deletions(-)

diff --git a/dev/studio-e2e-testing/package.json b/dev/studio-e2e-testing/package.json
index 0b9a7f1351c..64340949939 100644
--- a/dev/studio-e2e-testing/package.json
+++ b/dev/studio-e2e-testing/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@sanity/google-maps-input": "^3.0.1",
     "@sanity/icons": "^2.8.0",
-    "@sanity/ui": "2.0.0-beta.8",
+    "@sanity/ui": "2.0.0-beta.13",
     "@sanity/vision": "3.22.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index 489b9130170..4d952b693a2 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -36,7 +36,7 @@
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.8",
+    "@sanity/ui": "2.0.0-beta.13",
     "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
diff --git a/examples/ecommerce-studio/package.json b/examples/ecommerce-studio/package.json
index 598f5751883..b3fa92da9a0 100644
--- a/examples/ecommerce-studio/package.json
+++ b/examples/ecommerce-studio/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.8",
+    "@sanity/ui": "2.0.0-beta.13",
     "react": "^18.2.0",
     "react-barcode": "^1.4.1",
     "react-dom": "^18.2.0",
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index 313b90d933f..c18f1f1a8a8 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -171,11 +171,11 @@
     "@sanity/logos": "^2.0.2",
     "@sanity/mutator": "3.22.1",
     "@sanity/portable-text-editor": "3.22.1",
-    "@sanity/presentation": "1.2.1",
+    "@sanity/presentation": "1.3.0",
     "@sanity/schema": "3.22.1",
     "@sanity/telemetry": "^0.7.3",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "2.0.0-beta.8",
+    "@sanity/ui": "2.0.0-beta.13",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
diff --git a/yarn.lock b/yarn.lock
index c1da3ef5612..e3032774aab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1502,11 +1502,6 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.53.0.tgz#bea56f2ed2b5baea164348ff4d5a879f6f81f20d"
   integrity sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==
 
-"@floating-ui/core@^1.3.1":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.1.tgz#4d795b649cc3b1cbb760d191c80dcb4353c9a366"
-  integrity sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==
-
 "@floating-ui/core@^1.4.2":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
@@ -1514,14 +1509,7 @@
   dependencies:
     "@floating-ui/utils" "^0.1.3"
 
-"@floating-ui/dom@^1.2.7":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.4.1.tgz#3dff8b1b429e60d36ce03281a1cc3cd923a8e7fa"
-  integrity sha512-loCXUOLzIC3jp50RFOKXZ/kQjjz26ryr/23M+FWG9jrmAv8lRf3DUfC2AiVZ3+K316GOhB08CR+Povwz8e9mDw==
-  dependencies:
-    "@floating-ui/core" "^1.3.1"
-
-"@floating-ui/dom@^1.5.1":
+"@floating-ui/dom@^1.2.7", "@floating-ui/dom@^1.5.1":
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
   integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
@@ -3663,10 +3651,10 @@
     "@sanity/ui" "^1.0.0"
     lodash "^4.17.21"
 
-"@sanity/groq-store@5.3.5":
-  version "5.3.5"
-  resolved "https://registry.yarnpkg.com/@sanity/groq-store/-/groq-store-5.3.5.tgz#e322898fd84289859eaee79bcaec6e3f5024daf5"
-  integrity sha512-djrCQvrWwK2By+/zoqPR+oR2vRT94OUptCR8zHTVjpKkSrBd3/fJAyFfB0CBj90tdz4PSGcYFnRFIslsEJLTPA==
+"@sanity/groq-store@5.3.6":
+  version "5.3.6"
+  resolved "https://registry.yarnpkg.com/@sanity/groq-store/-/groq-store-5.3.6.tgz#6c22ae0ca93c28690d2ecd45b793bb735cb3128a"
+  integrity sha512-UFg+BjdCexdgwP+yM5qpGfeeR9fHqySPcZhaOwGQczMwE2jIebtuagpgW8eZ6DcdSRDomDTS/vWSoLjuxWWGSg==
   dependencies:
     mnemonist "0.39.6"
 
@@ -3675,17 +3663,7 @@
   resolved "https://registry.yarnpkg.com/@sanity/icons/-/icons-1.3.10.tgz#df934a94ae6669fe6b15515d800afb221cba0498"
   integrity sha512-5wVG/vIiGuGrSmq+Bl3PY7XDgQrGv0fyHdJI64FSulnr2wH3NMqZ6C59UFxnrZ93sr7kOt0zQFoNv2lkPBi0Cg==
 
-"@sanity/icons@^2", "@sanity/icons@^2.0.0", "@sanity/icons@^2.3.1", "@sanity/icons@^2.4.0", "@sanity/icons@^2.4.1":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@sanity/icons/-/icons-2.6.0.tgz#48e0aa2bcc39c018911cdf7a3d66647b6f87675f"
-  integrity sha512-l4yBs2z2nEsgtasPuBQ5muowxJBXNfw0bqty2uG1tFsEyCYSPHGUROQSLLvIseYC3Onees+r5E9ijMadJQNc/Q==
-
-"@sanity/icons@^2.7.0":
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/@sanity/icons/-/icons-2.7.0.tgz#f3099bf12045bfd777e96f4b3bad568e6da2f61f"
-  integrity sha512-vW/G8CB3+R1gww8C8ZjNchhpXrXSDLIJ0KnWy9iDlSWaFEnUrbi18yzCCrHRMFzXTPl2QtqZhjtE+A5Gyhf2QA==
-
-"@sanity/icons@^2.8.0":
+"@sanity/icons@^2", "@sanity/icons@^2.0.0", "@sanity/icons@^2.3.1", "@sanity/icons@^2.4.0", "@sanity/icons@^2.4.1", "@sanity/icons@^2.7.0", "@sanity/icons@^2.8.0":
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/@sanity/icons/-/icons-2.8.0.tgz#030d48c10347bf0c5b131d981574550059f11f29"
   integrity sha512-Q8aKg+KPJPDLDR+beYZhtB3gYdq7zIyZQZ6HjaB/63KuidHzkIFuhVv8JS/rJNwWOn5lTuzmd+L/+U/Pv3klWw==
@@ -3777,14 +3755,14 @@
     uuid "^9.0.1"
     zod "^3.22.4"
 
-"@sanity/presentation@1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@sanity/presentation/-/presentation-1.2.1.tgz#965877831abd26024646af6efe0a36e588516df6"
-  integrity sha512-Bfb9rLcJu9DLBn1JDWZwkPfS8ItlJZoWPSdXnzQKPE4/RpNUX26xPhCkjxSH3Thg/ALMLNv3qZVHTPbFqqv1Tg==
+"@sanity/presentation@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@sanity/presentation/-/presentation-1.3.0.tgz#38b2c6c3ddcc91bdc55b8c4ed577cc64ab90bab4"
+  integrity sha512-G/fQzr113bbbsAmcsSYP/cQxL0ioJkYuDmAGNNesnD885rT1xhapI2GOhHccioCSojjUpiLGSvZYrxjniXQD4Q==
   dependencies:
-    "@sanity/groq-store" "5.3.5"
+    "@sanity/groq-store" "5.3.6"
     "@sanity/icons" "^2.8.0"
-    "@sanity/preview-url-secret" "^1.3.5"
+    "@sanity/preview-url-secret" "^1.3.6"
     "@sanity/ui" "^1.9.3"
     "@types/lodash.isequal" "^4.5.8"
     framer-motion "^10.16.16"
@@ -3793,10 +3771,10 @@
     rxjs "^7.8.1"
     suspend-react "0.1.3"
 
-"@sanity/preview-url-secret@^1.3.5":
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/@sanity/preview-url-secret/-/preview-url-secret-1.3.5.tgz#0831c2d9e9e430b37e8c08777bb29cabf2dd584d"
-  integrity sha512-3eXS/FxqYydl7cgJcGNlIzocT8L4UNCWGSp4q+vrhiixXqMZYNdG6aWiaOubT3bYn2ZlgtcbN60wiVdtwKlc1A==
+"@sanity/preview-url-secret@^1.3.6":
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/@sanity/preview-url-secret/-/preview-url-secret-1.3.6.tgz#195122d018cf4f556c69d57e881ae4d8455413be"
+  integrity sha512-+9StAa0cyJFBpb4MiaQrcKrETNOz5NXUl8CoHX2A4cjbEDKaJW005gp8f3cS69RAUkaAyaHmuj82opVKgkA5KA==
   dependencies:
     "@sanity/uuid" "3.0.2"
 
@@ -3888,19 +3866,7 @@
     framer-motion "^10.16.5"
     react-refractor "^2.1.7"
 
-"@sanity/ui@^1", "@sanity/ui@^1.0.0", "@sanity/ui@^1.6.0", "@sanity/ui@^1.7.2":
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-1.8.2.tgz#70f0c55e3bdd04b662d3cd84af168d4e27adfc2c"
-  integrity sha512-XWtVdIG1PWBEiNPcObRfXsX/EPhiPCHMmfdn+frPIVLTLnoQnNju3W9UQAWec+BwjXBCpPtfc36AoiQSDUkxzw==
-  dependencies:
-    "@floating-ui/react-dom" "2.0.0"
-    "@sanity/color" "^2.2.5"
-    "@sanity/icons" "^2.4.1"
-    csstype "^3.1.2"
-    framer-motion "^10.16.1"
-    react-refractor "^2.1.7"
-
-"@sanity/ui@^1.9.3":
+"@sanity/ui@^1", "@sanity/ui@^1.0.0", "@sanity/ui@^1.6.0", "@sanity/ui@^1.7.2", "@sanity/ui@^1.9.3":
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-1.9.3.tgz#4af45902ac95801aa5ea57f377beaf3e3cb36339"
   integrity sha512-AdWEVFaK0Snk6xxP0lGPVP3QQYKwzkfGFpFZnL9d6UtWt8yeuS8BMLVAzmXzg14hrqH50ex9nvNl3eq6a0MWiw==
@@ -8456,16 +8422,7 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-framer-motion@^10.0.0, framer-motion@^10.16.1, framer-motion@^10.16.2:
-  version "10.16.4"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.4.tgz#30279ef5499b8d85db3a298ee25c83429933e9f8"
-  integrity sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==
-  dependencies:
-    tslib "^2.4.0"
-  optionalDependencies:
-    "@emotion/is-prop-valid" "^0.8.2"
-
-framer-motion@^10.16.16:
+framer-motion@^10.0.0, framer-motion@^10.16.16, framer-motion@^10.16.2, framer-motion@^10.16.5:
   version "10.16.16"
   resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.16.tgz#a10a03e1190a717109163cfff212a84c8ad11b0c"
   integrity sha512-je6j91rd7NmUX7L1XHouwJ4v3R+SO4umso2LUcgOct3rHZ0PajZ80ETYZTajzEXEl9DlKyzjyt4AvGQ+lrebOw==
@@ -8474,15 +8431,6 @@ framer-motion@^10.16.16:
   optionalDependencies:
     "@emotion/is-prop-valid" "^0.8.2"
 
-framer-motion@^10.16.5:
-  version "10.16.15"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.15.tgz#efddf7ffdfbe81f21849e9466da155d96b9cd89e"
-  integrity sha512-BapW1EKc/Sgph1rKEwL9bFt2B79z7bu7jN4Up1jGUaTE78WBsVO+6eCmoUZsQH0hHtRUDnnTqjjBbM7dk9Kp8A==
-  dependencies:
-    tslib "^2.4.0"
-  optionalDependencies:
-    "@emotion/is-prop-valid" "^0.8.2"
-
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"