@wordpress/edit-site 6.8.5 → 6.9.0

package/build-style/style-rtl.css

@@ -30,6 +30,9 @@
 /**
  * Fonts & basic variables.
  */
+/**
+ * Typography
+ */
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -44,7 +47,10 @@
  * Dimensions.
  */
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
  */
 /**
  * Block & Editor UI.
@@ -68,6 +74,9 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoint mixins
  */
@@ -357,7 +366,6 @@
 }
 
 .dataviews-filters__search-widget-listbox {
-  max-height: 184px;
   padding: 4px;
   overflow: auto;
 }
@@ -577,11 +585,10 @@
   margin: 0;
 }
 
-.dataviews-view-config .components-popover__content {
+.dataviews-view-config {
   width: 320px;
   /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
   container-type: inline-size;
-  padding: 16px;
   font-size: 13px;
   line-height: 1.4;
 }
@@ -646,6 +653,15 @@
   top: unset;
 }
 
+.dataforms-layouts-panel__field-dropdown .dataforms-combined-edit {
+  border: none;
+  padding: 0;
+}
+
+.dataforms-combined-edit__field {
+  flex: 1 1 auto;
+}
+
 .dataviews-view-grid {
   margin-bottom: auto;
   grid-template-rows: max-content;
@@ -1170,17 +1186,6 @@ ul.dataviews-view-list {
   margin-bottom: 16px;
 }
 
-[class].dataforms-layouts-panel__dropdown-header-action {
-  height: 24px;
-}
-[class].dataforms-layouts-panel__dropdown-header-action.has-icon {
-  min-width: 24px;
-  padding: 0;
-}
-[class].dataforms-layouts-panel__dropdown-header-action:not(.has-icon) {
-  text-decoration: underline;
-}
-
 .edit-site-custom-template-modal__contents-wrapper {
   height: 100%;
   justify-content: flex-start !important;
@@ -1774,12 +1779,7 @@ ul.dataviews-view-list {
   flex-direction: column;
   min-height: 100%;
 }
-.edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-.edit-site-global-styles-sidebar__navigator-screen {
+.edit-site-global-styles-sidebar__panel {
   flex: 1;
 }
 
@@ -2369,13 +2369,16 @@ ul.dataviews-view-list {
     width: calc(100% - 16px);
   }
   .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-    transition: border-radius 0.4s;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
+    transition: border-radius, box-shadow 0.4s;
     overflow: hidden;
   }
   .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
     border-radius: 8px;
   }
+  .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
+  }
 }
 .edit-site-layout.is-full-canvas .edit-site-layout__canvas {
   top: 0;
@@ -2489,6 +2492,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   flex-grow: 1;
   margin: 0;
   overflow: hidden;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
 }
 @media (min-width: 782px) {
   .edit-site-layout__area {
@@ -2541,7 +2545,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _anvff_slide-from-right {
+@keyframes _u3rbd_slide-from-right {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2551,7 +2555,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _anvff_slide-from-left {
+@keyframes _u3rbd_slide-from-left {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2607,10 +2611,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _anvff_slide-from-left;
+  animation-name: _u3rbd_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _anvff_slide-from-right;
+  animation-name: _u3rbd_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -3022,10 +3026,15 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
 }
 
-.edit-site-style-book__tabs [role=tablist] {
+.edit-site-style-book__tablist-container {
   background: #fff;
-  color: #1e1e1e;
+  width: 100%;
+  padding-left: 56px;
+  display: flex;
+  position: absolute;
+  z-index: 1;
 }
+
 .edit-site-style-book__tabs [role=tabpanel] {
   bottom: 0;
   right: 0;
@@ -3064,8 +3073,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-editor-canvas-container__close-button {
   position: absolute;
   left: 8px;
-  top: 6px;
-  z-index: 1;
+  top: 8px;
+  z-index: 2;
   background: #fff;
 }
 
@@ -3334,7 +3343,7 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   padding-bottom: 16px;
 }
 
-.font-library-modal__tablist {
+.font-library-modal__tablist-container {
   position: sticky;
   top: 0;
   border-bottom: 1px solid #ddd;
@@ -3343,6 +3352,9 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   padding: 0 16px;
   z-index: 1;
 }
+.font-library-modal__tablist-container [role=tablist] {
+  margin-bottom: -1px;
+}
 
 .font-library-modal__upload-area {
   align-items: center;

package/build-style/style.css

@@ -30,6 +30,9 @@
 /**
  * Fonts & basic variables.
  */
+/**
+ * Typography
+ */
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -44,7 +47,10 @@
  * Dimensions.
  */
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
  */
 /**
  * Block & Editor UI.
@@ -68,6 +74,9 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoint mixins
  */
@@ -357,7 +366,6 @@
 }
 
 .dataviews-filters__search-widget-listbox {
-  max-height: 184px;
   padding: 4px;
   overflow: auto;
 }
@@ -577,11 +585,10 @@
   margin: 0;
 }
 
-.dataviews-view-config .components-popover__content {
+.dataviews-view-config {
   width: 320px;
   /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
   container-type: inline-size;
-  padding: 16px;
   font-size: 13px;
   line-height: 1.4;
 }
@@ -646,6 +653,15 @@
   top: unset;
 }
 
+.dataforms-layouts-panel__field-dropdown .dataforms-combined-edit {
+  border: none;
+  padding: 0;
+}
+
+.dataforms-combined-edit__field {
+  flex: 1 1 auto;
+}
+
 .dataviews-view-grid {
   margin-bottom: auto;
   grid-template-rows: max-content;
@@ -1170,17 +1186,6 @@ ul.dataviews-view-list {
   margin-bottom: 16px;
 }
 
-[class].dataforms-layouts-panel__dropdown-header-action {
-  height: 24px;
-}
-[class].dataforms-layouts-panel__dropdown-header-action.has-icon {
-  min-width: 24px;
-  padding: 0;
-}
-[class].dataforms-layouts-panel__dropdown-header-action:not(.has-icon) {
-  text-decoration: underline;
-}
-
 .edit-site-custom-template-modal__contents-wrapper {
   height: 100%;
   justify-content: flex-start !important;
@@ -1775,12 +1780,7 @@ ul.dataviews-view-list {
   flex-direction: column;
   min-height: 100%;
 }
-.edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-.edit-site-global-styles-sidebar__navigator-screen {
+.edit-site-global-styles-sidebar__panel {
   flex: 1;
 }
 
@@ -2370,13 +2370,16 @@ ul.dataviews-view-list {
     width: calc(100% - 16px);
   }
   .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-    transition: border-radius 0.4s;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
+    transition: border-radius, box-shadow 0.4s;
     overflow: hidden;
   }
   .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
     border-radius: 8px;
   }
+  .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
+  }
 }
 .edit-site-layout.is-full-canvas .edit-site-layout__canvas {
   top: 0;
@@ -2490,6 +2493,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   flex-grow: 1;
   margin: 0;
   overflow: hidden;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
 }
 @media (min-width: 782px) {
   .edit-site-layout__area {
@@ -2542,7 +2546,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _anvff_slide-from-right {
+@keyframes _u3rbd_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2552,7 +2556,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _anvff_slide-from-left {
+@keyframes _u3rbd_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2608,10 +2612,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _anvff_slide-from-left;
+  animation-name: _u3rbd_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _anvff_slide-from-right;
+  animation-name: _u3rbd_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -3023,10 +3027,15 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
 }
 
-.edit-site-style-book__tabs [role=tablist] {
+.edit-site-style-book__tablist-container {
   background: #fff;
-  color: #1e1e1e;
+  width: 100%;
+  padding-right: 56px;
+  display: flex;
+  position: absolute;
+  z-index: 1;
 }
+
 .edit-site-style-book__tabs [role=tabpanel] {
   bottom: 0;
   left: 0;
@@ -3065,8 +3074,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-editor-canvas-container__close-button {
   position: absolute;
   right: 8px;
-  top: 6px;
-  z-index: 1;
+  top: 8px;
+  z-index: 2;
   background: #fff;
 }
 
@@ -3335,7 +3344,7 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   padding-bottom: 16px;
 }
 
-.font-library-modal__tablist {
+.font-library-modal__tablist-container {
   position: sticky;
   top: 0;
   border-bottom: 1px solid #ddd;
@@ -3344,6 +3353,9 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   padding: 0 16px;
   z-index: 1;
 }
+.font-library-modal__tablist-container [role=tablist] {
+  margin-bottom: -1px;
+}
 
 .font-library-modal__upload-area {
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.8.5",
+	"version": "6.9.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,45 +29,45 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.8.2",
-		"@wordpress/api-fetch": "^7.8.2",
-		"@wordpress/blob": "^4.8.1",
-		"@wordpress/block-editor": "^14.3.3",
-		"@wordpress/block-library": "^9.8.4",
-		"@wordpress/blocks": "^13.8.3",
-		"@wordpress/commands": "^1.8.3",
-		"@wordpress/components": "^28.8.3",
-		"@wordpress/compose": "^7.8.3",
-		"@wordpress/core-commands": "^1.8.3",
-		"@wordpress/core-data": "^7.8.3",
-		"@wordpress/data": "^10.8.3",
-		"@wordpress/dataviews": "^4.4.3",
-		"@wordpress/date": "^5.8.2",
-		"@wordpress/deprecated": "^4.8.2",
-		"@wordpress/dom": "^4.8.2",
-		"@wordpress/editor": "^14.8.5",
-		"@wordpress/element": "^6.8.1",
-		"@wordpress/escape-html": "^3.8.1",
-		"@wordpress/hooks": "^4.8.2",
-		"@wordpress/html-entities": "^4.8.1",
-		"@wordpress/i18n": "^5.8.2",
-		"@wordpress/icons": "^10.8.2",
-		"@wordpress/keyboard-shortcuts": "^5.8.3",
-		"@wordpress/keycodes": "^4.8.2",
-		"@wordpress/notices": "^5.8.3",
-		"@wordpress/patterns": "^2.8.3",
-		"@wordpress/plugins": "^7.8.3",
-		"@wordpress/preferences": "^4.8.3",
-		"@wordpress/primitives": "^4.8.1",
-		"@wordpress/priority-queue": "^3.8.1",
-		"@wordpress/private-apis": "^1.8.1",
-		"@wordpress/reusable-blocks": "^5.8.3",
-		"@wordpress/router": "^1.8.1",
-		"@wordpress/style-engine": "^2.8.1",
-		"@wordpress/url": "^4.8.1",
-		"@wordpress/viewport": "^6.8.3",
-		"@wordpress/widgets": "^4.8.3",
-		"@wordpress/wordcount": "^4.8.1",
+		"@wordpress/a11y": "^4.9.0",
+		"@wordpress/api-fetch": "^7.9.0",
+		"@wordpress/blob": "^4.9.0",
+		"@wordpress/block-editor": "^14.4.0",
+		"@wordpress/block-library": "^9.9.0",
+		"@wordpress/blocks": "^13.9.0",
+		"@wordpress/commands": "^1.9.0",
+		"@wordpress/components": "^28.9.0",
+		"@wordpress/compose": "^7.9.0",
+		"@wordpress/core-commands": "^1.9.0",
+		"@wordpress/core-data": "^7.9.0",
+		"@wordpress/data": "^10.9.0",
+		"@wordpress/dataviews": "^4.5.0",
+		"@wordpress/date": "^5.9.0",
+		"@wordpress/deprecated": "^4.9.0",
+		"@wordpress/dom": "^4.9.0",
+		"@wordpress/editor": "^14.9.0",
+		"@wordpress/element": "^6.9.0",
+		"@wordpress/escape-html": "^3.9.0",
+		"@wordpress/hooks": "^4.9.0",
+		"@wordpress/html-entities": "^4.9.0",
+		"@wordpress/i18n": "^5.9.0",
+		"@wordpress/icons": "^10.9.0",
+		"@wordpress/keyboard-shortcuts": "^5.9.0",
+		"@wordpress/keycodes": "^4.9.0",
+		"@wordpress/notices": "^5.9.0",
+		"@wordpress/patterns": "^2.9.0",
+		"@wordpress/plugins": "^7.9.0",
+		"@wordpress/preferences": "^4.9.0",
+		"@wordpress/primitives": "^4.9.0",
+		"@wordpress/priority-queue": "^3.9.0",
+		"@wordpress/private-apis": "^1.9.0",
+		"@wordpress/reusable-blocks": "^5.9.0",
+		"@wordpress/router": "^1.9.0",
+		"@wordpress/style-engine": "^2.9.0",
+		"@wordpress/url": "^4.9.0",
+		"@wordpress/viewport": "^6.9.0",
+		"@wordpress/widgets": "^4.9.0",
+		"@wordpress/wordcount": "^4.9.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6187079697e13c3292eb098d6338523a6676c6e8"
+	"gitHead": "2e5495c635910cb34bfaca3c6258d2e989f66214"
 }

package/src/components/editor-canvas-container/index.js

@@ -125,7 +125,7 @@ function EditorCanvasContainer( {
 					>
 						{ shouldShowCloseButton && (
 							<Button
-								__next40pxDefaultSize
+								size="compact"
 								className="edit-site-editor-canvas-container__close-button"
 								icon={ closeSmall }
 								label={ closeButtonLabel || __( 'Close' ) }

package/src/components/editor-canvas-container/style.scss

@@ -29,7 +29,7 @@
 .edit-site-editor-canvas-container__close-button {
 	position: absolute;
 	right: $grid-unit-10;
-	top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
-	z-index: 1;
+	top: $grid-unit-10;
+	z-index: 2;
 	background: $white;
 }

package/src/components/global-styles/font-library-modal/font-card.js

@@ -3,7 +3,7 @@
  */
 import { _n, sprintf, isRTL } from '@wordpress/i18n';
 import {
-	__experimentalUseNavigator as useNavigator,
+	useNavigator,
 	__experimentalText as Text,
 	Button,
 	Flex,

package/src/components/global-styles/font-library-modal/font-collection.js

@@ -13,9 +13,7 @@ import {
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	Navigator,
 	__experimentalHeading as Heading,
 	Notice,
 	SelectControl,
@@ -284,11 +282,11 @@ function FontCollection( { slug } ) {
 
 			{ ! isLoading && (
 				<>
-					<NavigatorProvider
+					<Navigator
 						initialPath="/"
 						className="font-library-modal__tabpanel-layout"
 					>
-						<NavigatorScreen path="/">
+						<Navigator.Screen path="/">
 							<HStack justify="space-between">
 								<VStack>
 									<Heading level={ 2 } size={ 13 }>
@@ -378,11 +376,11 @@ function FontCollection( { slug } ) {
 								</ul>
 								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 							</div>
-						</NavigatorScreen>
+						</Navigator.Screen>
 
-						<NavigatorScreen path="/fontFamily">
+						<Navigator.Screen path="/fontFamily">
 							<Flex justify="flex-start">
-								<NavigatorBackButton
+								<Navigator.BackButton
 									icon={
 										isRTL() ? chevronRight : chevronLeft
 									}
@@ -463,8 +461,8 @@ function FontCollection( { slug } ) {
 								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 							</VStack>
 							<Spacer margin={ 16 } />
-						</NavigatorScreen>
-					</NavigatorProvider>
+						</Navigator.Screen>
+					</Navigator>
 
 					{ selectedFont && (
 						<Flex

package/src/components/global-styles/font-library-modal/index.js

@@ -67,7 +67,7 @@ function FontLibraryModal( {
 			className="font-library-modal"
 		>
 			<Tabs defaultTabId={ defaultTabId }>
-				<div className="font-library-modal__tablist">
+				<div className="font-library-modal__tablist-container">
 					<Tabs.TabList>
 						{ tabs.map( ( { id, title } ) => (
 							<Tabs.Tab key={ id } tabId={ id }>

package/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -6,10 +6,8 @@ import {
 	__experimentalConfirmDialog as ConfirmDialog,
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
-	__experimentalUseNavigator as useNavigator,
+	Navigator,
+	useNavigator,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
@@ -235,12 +233,12 @@ function InstalledFonts() {
 
 			{ ! isResolvingLibrary && (
 				<>
-					<NavigatorProvider
+					<Navigator
 						initialPath={
 							libraryFontSelected ? '/fontFamily' : '/'
 						}
 					>
-						<NavigatorScreen path="/">
+						<Navigator.Screen path="/">
 							<VStack spacing="8">
 								{ notice && (
 									<Notice
@@ -338,9 +336,9 @@ function InstalledFonts() {
 									</VStack>
 								) }
 							</VStack>
-						</NavigatorScreen>
+						</Navigator.Screen>
 
-						<NavigatorScreen path="/fontFamily">
+						<Navigator.Screen path="/fontFamily">
 							<ConfirmDeleteDialog
 								font={ libraryFontSelected }
 								isOpen={ isConfirmDeleteOpen }
@@ -353,7 +351,7 @@ function InstalledFonts() {
 							/>
 
 							<Flex justify="flex-start">
-								<NavigatorBackButton
+								<Navigator.BackButton
 									icon={
 										isRTL() ? chevronRight : chevronLeft
 									}
@@ -427,8 +425,8 @@ function InstalledFonts() {
 								</ul>
 								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 							</VStack>
-						</NavigatorScreen>
-					</NavigatorProvider>
+						</Navigator.Screen>
+					</Navigator>
 
 					<HStack
 						justify="flex-end"

package/src/components/global-styles/font-library-modal/style.scss

@@ -133,7 +133,7 @@ $footer-height: 70px;
 	padding-bottom: $grid-unit-20;
 }
 
-.font-library-modal__tablist {
+.font-library-modal__tablist-container {
 	position: sticky;
 	top: 0;
 	border-bottom: 1px solid $gray-300;
@@ -141,6 +141,10 @@ $footer-height: 70px;
 	margin: 0 #{$grid-unit-40 * -1};
 	padding: 0 $grid-unit-20;
 	z-index: 1;
+
+	[role="tablist"] {
+		margin-bottom: -1px;
+	}
 }