From 4d01937f1b451995225c4dee20f80e54db7e7aba Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 20 Apr 2024 02:35:48 +0900
Subject: [PATCH 01/11] View: Fix TypeScript types

---
 packages/components/src/view/component.tsx | 26 +++++++++++++---------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/view/component.tsx b/packages/components/src/view/component.tsx
index a970c5c757431..e692bed8a81c3 100644
--- a/packages/components/src/view/component.tsx
+++ b/packages/components/src/view/component.tsx
@@ -2,14 +2,27 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-import type { RefAttributes } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import type { WordPressComponent } from '../context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
 import type { ViewProps } from './types';
 
+const PolymorphicDiv = styled.div``;
+
+function UnforwardedView(
+	props: WordPressComponentProps< ViewProps, 'div', true >,
+	ref: React.ForwardedRef< any >
+) {
+	return <PolymorphicDiv ref={ ref } { ...props } />;
+}
+
 /**
  * `View` is a core component that renders everything in the library.
  * It is the principle component in the entire library.
@@ -26,13 +39,6 @@ import type { ViewProps } from './types';
  * }
  * ```
  */
-export const View: WordPressComponent<
-	'div',
-	ViewProps & RefAttributes< any >,
-	true
-> = styled.div``;
-
-View.selector = '.components-view';
-View.displayName = 'View';
+export const View = forwardRef( UnforwardedView );
 
 export default View;

From b19f87324dadcfb569ae8386b57164aa5f7dfc37 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 20 Apr 2024 02:36:41 +0900
Subject: [PATCH 02/11] ItemGroup: Remove unneeded typecasting

---
 packages/components/src/item-group/item/hook.ts | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/packages/components/src/item-group/item/hook.ts b/packages/components/src/item-group/item/hook.ts
index 188b575e072c8..be817a24dcbb1 100644
--- a/packages/components/src/item-group/item/hook.ts
+++ b/packages/components/src/item-group/item/hook.ts
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import type { ElementType } from 'react';
-
 /**
  * WordPress dependencies
  */
@@ -32,11 +27,7 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 
 	const size = sizeProp || contextSize;
 
-	const as =
-		asProp ||
-		( ( typeof onClick !== 'undefined'
-			? 'button'
-			: 'div' ) as ElementType );
+	const as = asProp || ( typeof onClick !== 'undefined' ? 'button' : 'div' );
 
 	const cx = useCx();
 

From ee09e5d28c5b3a90434afb415ac35adeda6fc668 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 20 Apr 2024 02:36:48 +0900
Subject: [PATCH 03/11] Navigator: Fix View-related types

---
 .../src/navigator/navigator-back-button/component.tsx         | 4 ++--
 .../components/src/navigator/navigator-back-button/hook.ts    | 3 ---
 .../components/src/navigator/navigator-button/component.tsx   | 4 ++--
 packages/components/src/navigator/navigator-button/hook.ts    | 3 ---
 .../src/navigator/navigator-to-parent-button/component.tsx    | 4 ++--
 5 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/navigator/navigator-back-button/component.tsx b/packages/components/src/navigator/navigator-back-button/component.tsx
index 71c5ac14cd00d..66f9a539a5bcd 100644
--- a/packages/components/src/navigator/navigator-back-button/component.tsx
+++ b/packages/components/src/navigator/navigator-back-button/component.tsx
@@ -8,9 +8,9 @@ import type { ForwardedRef } from 'react';
  */
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
-import { View } from '../../view';
 import { useNavigatorBackButton } from './hook';
 import type { NavigatorBackButtonProps } from '../types';
+import Button from '../../button';
 
 function UnconnectedNavigatorBackButton(
 	props: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,
@@ -18,7 +18,7 @@ function UnconnectedNavigatorBackButton(
 ) {
 	const navigatorBackButtonProps = useNavigatorBackButton( props );
 
-	return <View ref={ forwardedRef } { ...navigatorBackButtonProps } />;
+	return <Button ref={ forwardedRef } { ...navigatorBackButtonProps } />;
 }
 
 /**
diff --git a/packages/components/src/navigator/navigator-back-button/hook.ts b/packages/components/src/navigator/navigator-back-button/hook.ts
index edf55be0f15f5..f78e86dd8f700 100644
--- a/packages/components/src/navigator/navigator-back-button/hook.ts
+++ b/packages/components/src/navigator/navigator-back-button/hook.ts
@@ -8,7 +8,6 @@ import { useCallback } from '@wordpress/element';
  */
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import Button from '../../button';
 import useNavigator from '../use-navigator';
 import type { NavigatorBackButtonHookProps } from '../types';
 
@@ -17,7 +16,6 @@ export function useNavigatorBackButton(
 ) {
 	const {
 		onClick,
-		as = Button,
 		goToParent: goToParentProp = false,
 		...otherProps
 	} = useContextSystem( props, 'NavigatorBackButton' );
@@ -38,7 +36,6 @@ export function useNavigatorBackButton(
 		);
 
 	return {
-		as,
 		onClick: handleClick,
 		...otherProps,
 	};
diff --git a/packages/components/src/navigator/navigator-button/component.tsx b/packages/components/src/navigator/navigator-button/component.tsx
index 1b84a2315c04d..f7f487a15a4a9 100644
--- a/packages/components/src/navigator/navigator-button/component.tsx
+++ b/packages/components/src/navigator/navigator-button/component.tsx
@@ -8,9 +8,9 @@ import type { ForwardedRef } from 'react';
  */
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
-import { View } from '../../view';
 import { useNavigatorButton } from './hook';
 import type { NavigatorButtonProps } from '../types';
+import Button from '../../button';
 
 function UnconnectedNavigatorButton(
 	props: WordPressComponentProps< NavigatorButtonProps, 'button' >,
@@ -18,7 +18,7 @@ function UnconnectedNavigatorButton(
 ) {
 	const navigatorButtonProps = useNavigatorButton( props );
 
-	return <View ref={ forwardedRef } { ...navigatorButtonProps } />;
+	return <Button ref={ forwardedRef } { ...navigatorButtonProps } />;
 }
 
 /**
diff --git a/packages/components/src/navigator/navigator-button/hook.ts b/packages/components/src/navigator/navigator-button/hook.ts
index 3952dc3fd56ba..7c879e62f1a8b 100644
--- a/packages/components/src/navigator/navigator-button/hook.ts
+++ b/packages/components/src/navigator/navigator-button/hook.ts
@@ -9,7 +9,6 @@ import { escapeAttribute } from '@wordpress/escape-html';
  */
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import Button from '../../button';
 import useNavigator from '../use-navigator';
 import type { NavigatorButtonProps } from '../types';
 
@@ -22,7 +21,6 @@ export function useNavigatorButton(
 	const {
 		path,
 		onClick,
-		as = Button,
 		attributeName = 'id',
 		...otherProps
 	} = useContextSystem( props, 'NavigatorButton' );
@@ -46,7 +44,6 @@ export function useNavigatorButton(
 		);
 
 	return {
-		as,
 		onClick: handleClick,
 		...otherProps,
 		[ attributeName ]: escapedPath,
diff --git a/packages/components/src/navigator/navigator-to-parent-button/component.tsx b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
index e73a3619f3d49..4b22a5e359a4a 100644
--- a/packages/components/src/navigator/navigator-to-parent-button/component.tsx
+++ b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
@@ -8,9 +8,9 @@ import type { ForwardedRef } from 'react';
  */
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
-import { View } from '../../view';
 import { useNavigatorBackButton } from '../navigator-back-button/hook';
 import type { NavigatorToParentButtonProps } from '../types';
+import Button from '../../button';
 
 function UnconnectedNavigatorToParentButton(
 	props: WordPressComponentProps< NavigatorToParentButtonProps, 'button' >,
@@ -21,7 +21,7 @@ function UnconnectedNavigatorToParentButton(
 		goToParent: true,
 	} );
 
-	return <View ref={ forwardedRef } { ...navigatorToParentButtonProps } />;
+	return <Button ref={ forwardedRef } { ...navigatorToParentButtonProps } />;
 }
 
 /*

From cc9e53caade4778d8c3c8d7c43fcee0d2599fa30 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 20 Apr 2024 02:39:55 +0900
Subject: [PATCH 04/11] Update snapshots

---
 .../card/test/__snapshots__/index.tsx.snap    | 70 +++++++++----------
 .../flex/test/__snapshots__/index.tsx.snap    |  8 +--
 .../test/__snapshots__/index.js.snap          | 32 ++++-----
 .../surface/test/__snapshots__/index.tsx.snap | 20 +++---
 4 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/packages/components/src/card/test/__snapshots__/index.tsx.snap b/packages/components/src/card/test/__snapshots__/index.tsx.snap
index 0b723732e3dba..60dcd306f3f52 100644
--- a/packages/components/src/card/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/card/test/__snapshots__/index.tsx.snap
@@ -8,8 +8,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
-+     class="components-scrollable components-card__body components-card-body css-1w878rm-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium e19lxcc00"
+-     class="components-card__body components-card-body css-d0qyo2-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
++     class="components-scrollable components-card__body components-card-body css-vpf7zs-PolymorphicDiv-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -25,8 +25,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
-+     class="components-card__body components-card-body css-2oh82v-View-Body-borderRadius-medium-shady e19lxcc00"
+-     class="components-card__body components-card-body css-d0qyo2-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
++     class="components-card__body components-card-body css-4zm8r0-PolymorphicDiv-Body-borderRadius-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -42,8 +42,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__footer components-card-footer css-120suhd-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__footer components-card-footer css-opd7jt-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium-shady e19lxcc00"
+-     class="components-flex components-card__footer components-card-footer css-1l4bmbt-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__footer components-card-footer css-8pv7rj-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -59,8 +59,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__footer components-card-footer css-120suhd-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__footer components-card-footer css-ys33kb-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
+-     class="components-flex components-card__footer components-card-footer css-1l4bmbt-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__footer components-card-footer css-1hguscv-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -76,8 +76,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__header components-card-header css-tedm3i-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium-shady e19lxcc00"
+-     class="components-flex components-card__header components-card-header css-1tfuk0d-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__header components-card-header css-10qs2ur-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardHeader"
     >
@@ -93,19 +93,19 @@ Snapshot Diff:
 @@ -6,18 +6,18 @@
     >
       <div
-        class="css-mgwsf4-View-Content e19lxcc00"
+        class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-2feznw-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
+-         class="components-flex components-card__header components-card-header css-1tfuk0d-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++         class="components-flex components-card__header components-card-header css-d1c2bv-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
-+         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
+-         class="components-card__body components-card-body css-d0qyo2-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
++         class="components-card__body components-card-body css-kub9fa-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
@@ -138,27 +138,27 @@ Snapshot Diff:
 @@ -6,25 +6,25 @@
     >
       <div
-        class="css-mgwsf4-View-Content e19lxcc00"
+        class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-ed5e1x-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-1f9ii60-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
+-         class="components-flex components-card__header components-card-header css-1xfrxuu-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__header components-card-header css-1mitrbv-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
-+         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
+-         class="components-card__body components-card-body css-kub9fa-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
++         class="components-card__body components-card-body css-d0qyo2-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="components-flex components-card__footer components-card-footer css-ide17g-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__footer components-card-footer css-jsws2e-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding e19lxcc00"
+-         class="components-flex components-card__footer components-card-footer css-8o7z5w-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__footer components-card-footer css-1umuqb4-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -174,33 +174,33 @@ Snapshot Diff:
 @@ -1,30 +1,30 @@
   <div>
     <div
--     class="components-surface components-card css-hkvggq-View-Surface-getBorders-primary-Card-boxShadowless-rounded e19lxcc00"
-+     class="components-surface components-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded e19lxcc00"
+-     class="components-surface components-card css-5ubhkm-PolymorphicDiv-Surface-getBorders-primary-Card-boxShadowless-rounded e19lxcc00"
++     class="components-surface components-card css-1lc0qq8-PolymorphicDiv-Surface-getBorders-primary-Card-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Card"
     >
       <div
-        class="css-mgwsf4-View-Content e19lxcc00"
+        class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-ed5e1x-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-1f9ii60-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
+-         class="components-flex components-card__header components-card-header css-1xfrxuu-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__header components-card-header css-1mitrbv-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
-+         class="components-card__body components-card-body css-5spj1a-View-Body-borderRadius-small e19lxcc00"
+-         class="components-card__body components-card-body css-kub9fa-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
++         class="components-card__body components-card-body css-1djcdvu-PolymorphicDiv-Body-borderRadius-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="components-flex components-card__footer components-card-footer css-ide17g-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__footer components-card-footer css-1ih54yp-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-small e19lxcc00"
+-         class="components-flex components-card__footer components-card-footer css-8o7z5w-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__footer components-card-footer css-1awxp6o-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -470,15 +470,15 @@ Snapshot Diff:
       </div>
       <div
         aria-hidden="true"
--       class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-+       class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+-       class="components-elevation css-1ilbefw-PolymorphicDiv-Elevation-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-10h9eji-PolymorphicDiv-Elevation-sx-Base-elevationClassName e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
       <div
         aria-hidden="true"
--       class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-+       class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+-       class="components-elevation css-7he0ow-PolymorphicDiv-Elevation-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-10h9eji-PolymorphicDiv-Elevation-sx-Base-elevationClassName e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
diff --git a/packages/components/src/flex/test/__snapshots__/index.tsx.snap b/packages/components/src/flex/test/__snapshots__/index.tsx.snap
index 072b70ff9cb80..f963bf0fd7167 100644
--- a/packages/components/src/flex/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/flex/test/__snapshots__/index.tsx.snap
@@ -7,25 +7,25 @@ Snapshot Diff:
 
 @@ -1,22 +1,18 @@
   <div
-    class="components-flex css-j6raph-View-Flex-base-ItemsRow e19lxcc00"
+    class="components-flex css-1hwd9hm-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
 -   data-testid="flex"
 +   data-testid="base-flex"
     data-wp-c16t="true"
     data-wp-component="Flex"
   >
     <div
-      class="components-flex-item css-mw3lhz-View-Item-sx-Base e19lxcc00"
+      class="components-flex-item css-eno349-PolymorphicDiv-Item-sx-Base e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="FlexItem"
     >
       Item
     </div>
 -   <div
--     class="css-1mm2cvy-View e19lxcc00"
+-     class="css-161q9d5-PolymorphicDiv e19lxcc00"
 -   />
 -   <div />
     <div
-      class="components-flex-item components-flex-block css-14wzr73-View-Item-sx-Base-block e19lxcc00"
+      class="components-flex-item components-flex-block css-10m3u8l-PolymorphicDiv-Item-sx-Base-block e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="FlexBlock"
     >
diff --git a/packages/components/src/item-group/test/__snapshots__/index.js.snap b/packages/components/src/item-group/test/__snapshots__/index.js.snap
index f5211b7b1683f..24ecd27f68c49 100644
--- a/packages/components/src/item-group/test/__snapshots__/index.js.snap
+++ b/packages/components/src/item-group/test/__snapshots__/index.js.snap
@@ -11,8 +11,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-gg7ygh-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -24,8 +24,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-gg7ygh-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -44,8 +44,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
-+       class="components-item css-1vv4aem-View-large-item e19lxcc00"
+-       class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
++       class="components-item css-vss65r-PolymorphicDiv-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -114,8 +114,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-zgfros-PolymorphicDiv-separated-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -125,8 +125,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -142,8 +142,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-1ibn92o-PolymorphicDiv-bordered-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -153,8 +153,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -170,8 +170,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-1mm2cvy-View e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-161q9d5-PolymorphicDiv e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
diff --git a/packages/components/src/surface/test/__snapshots__/index.tsx.snap b/packages/components/src/surface/test/__snapshots__/index.tsx.snap
index 200382f04ae5b..520649a54d295 100644
--- a/packages/components/src/surface/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/surface/test/__snapshots__/index.tsx.snap
@@ -8,8 +8,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-pt58n0-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-1bmtyqd-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -25,8 +25,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-1vckp4o-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-iin9ud-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -42,8 +42,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-sw9dzi-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-4j30ez-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -59,8 +59,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-123k66h-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-1v7smm4-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -94,8 +94,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-1m2pafr-View-Surface-getBorders-secondary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-1afnk4j-PolymorphicDiv-Surface-getBorders-secondary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >

From 9ce82971b3d6bf8d7977b657d79220e50de23d4b Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Mon, 22 Apr 2024 23:08:29 +0900
Subject: [PATCH 05/11] Navigator: Remove polymorphism

---
 .../src/navigator/navigator-back-button/component.tsx       | 2 +-
 .../components/src/navigator/navigator-back-button/hook.ts  | 6 +++++-
 .../components/src/navigator/navigator-button/component.tsx | 2 +-
 packages/components/src/navigator/navigator-button/hook.ts  | 2 +-
 .../src/navigator/navigator-to-parent-button/component.tsx  | 6 +++++-
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/navigator/navigator-back-button/component.tsx b/packages/components/src/navigator/navigator-back-button/component.tsx
index 66f9a539a5bcd..08aa88abcb0e2 100644
--- a/packages/components/src/navigator/navigator-back-button/component.tsx
+++ b/packages/components/src/navigator/navigator-back-button/component.tsx
@@ -13,7 +13,7 @@ import type { NavigatorBackButtonProps } from '../types';
 import Button from '../../button';
 
 function UnconnectedNavigatorBackButton(
-	props: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,
+	props: WordPressComponentProps< NavigatorBackButtonProps, 'button', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const navigatorBackButtonProps = useNavigatorBackButton( props );
diff --git a/packages/components/src/navigator/navigator-back-button/hook.ts b/packages/components/src/navigator/navigator-back-button/hook.ts
index f78e86dd8f700..40f059859effe 100644
--- a/packages/components/src/navigator/navigator-back-button/hook.ts
+++ b/packages/components/src/navigator/navigator-back-button/hook.ts
@@ -12,7 +12,11 @@ import useNavigator from '../use-navigator';
 import type { NavigatorBackButtonHookProps } from '../types';
 
 export function useNavigatorBackButton(
-	props: WordPressComponentProps< NavigatorBackButtonHookProps, 'button' >
+	props: WordPressComponentProps<
+		NavigatorBackButtonHookProps,
+		'button',
+		false
+	>
 ) {
 	const {
 		onClick,
diff --git a/packages/components/src/navigator/navigator-button/component.tsx b/packages/components/src/navigator/navigator-button/component.tsx
index f7f487a15a4a9..2bd881334a662 100644
--- a/packages/components/src/navigator/navigator-button/component.tsx
+++ b/packages/components/src/navigator/navigator-button/component.tsx
@@ -13,7 +13,7 @@ import type { NavigatorButtonProps } from '../types';
 import Button from '../../button';
 
 function UnconnectedNavigatorButton(
-	props: WordPressComponentProps< NavigatorButtonProps, 'button' >,
+	props: WordPressComponentProps< NavigatorButtonProps, 'button', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const navigatorButtonProps = useNavigatorButton( props );
diff --git a/packages/components/src/navigator/navigator-button/hook.ts b/packages/components/src/navigator/navigator-button/hook.ts
index 7c879e62f1a8b..b7ff94aa96d7b 100644
--- a/packages/components/src/navigator/navigator-button/hook.ts
+++ b/packages/components/src/navigator/navigator-button/hook.ts
@@ -16,7 +16,7 @@ const cssSelectorForAttribute = ( attrName: string, attrValue: string ) =>
 	`[${ attrName }="${ attrValue }"]`;
 
 export function useNavigatorButton(
-	props: WordPressComponentProps< NavigatorButtonProps, 'button' >
+	props: WordPressComponentProps< NavigatorButtonProps, 'button', false >
 ) {
 	const {
 		path,
diff --git a/packages/components/src/navigator/navigator-to-parent-button/component.tsx b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
index 4b22a5e359a4a..2240d75cf7b68 100644
--- a/packages/components/src/navigator/navigator-to-parent-button/component.tsx
+++ b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
@@ -13,7 +13,11 @@ import type { NavigatorToParentButtonProps } from '../types';
 import Button from '../../button';
 
 function UnconnectedNavigatorToParentButton(
-	props: WordPressComponentProps< NavigatorToParentButtonProps, 'button' >,
+	props: WordPressComponentProps<
+		NavigatorToParentButtonProps,
+		'button',
+		false
+	>,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const navigatorToParentButtonProps = useNavigatorBackButton( {

From c3c9e3b73a0280d68960b225bc02466694567c21 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 23 Apr 2024 01:50:39 +0900
Subject: [PATCH 06/11] View: Widen types

---
 packages/components/src/view/component.tsx | 6 +-----
 packages/components/src/view/types.ts      | 6 +++++-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/view/component.tsx b/packages/components/src/view/component.tsx
index e692bed8a81c3..9f08b56614c5d 100644
--- a/packages/components/src/view/component.tsx
+++ b/packages/components/src/view/component.tsx
@@ -11,15 +11,11 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../context/wordpress-component';
 import type { ViewProps } from './types';
 
 const PolymorphicDiv = styled.div``;
 
-function UnforwardedView(
-	props: WordPressComponentProps< ViewProps, 'div', true >,
-	ref: React.ForwardedRef< any >
-) {
+function UnforwardedView( props: ViewProps, ref: React.ForwardedRef< any > ) {
 	return <PolymorphicDiv ref={ ref } { ...props } />;
 }
 
diff --git a/packages/components/src/view/types.ts b/packages/components/src/view/types.ts
index 6c7e1508812c8..1deb2447d5e61 100644
--- a/packages/components/src/view/types.ts
+++ b/packages/components/src/view/types.ts
@@ -3,4 +3,8 @@
  */
 import type { ReactNode } from 'react';
 
-export type ViewProps = { children?: ReactNode };
+export type ViewProps = {
+	/** The HTML element or React component to render the component as. */
+	as?: React.ElementType | keyof JSX.IntrinsicElements;
+	children?: ReactNode;
+} & Omit< Record< string, unknown >, 'as' | 'children' >;

From c128a8697b5960d664e65e14e1e6468845ddaf84 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 23 Apr 2024 01:50:57 +0900
Subject: [PATCH 07/11] Navigator: Revert changes

---
 .../src/navigator/navigator-back-button/component.tsx  |  6 +++---
 .../src/navigator/navigator-back-button/hook.ts        |  9 ++++-----
 .../src/navigator/navigator-button/component.tsx       |  6 +++---
 .../components/src/navigator/navigator-button/hook.ts  |  5 ++++-
 .../navigator/navigator-to-parent-button/component.tsx | 10 +++-------
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/navigator/navigator-back-button/component.tsx b/packages/components/src/navigator/navigator-back-button/component.tsx
index 08aa88abcb0e2..71c5ac14cd00d 100644
--- a/packages/components/src/navigator/navigator-back-button/component.tsx
+++ b/packages/components/src/navigator/navigator-back-button/component.tsx
@@ -8,17 +8,17 @@ import type { ForwardedRef } from 'react';
  */
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
+import { View } from '../../view';
 import { useNavigatorBackButton } from './hook';
 import type { NavigatorBackButtonProps } from '../types';
-import Button from '../../button';
 
 function UnconnectedNavigatorBackButton(
-	props: WordPressComponentProps< NavigatorBackButtonProps, 'button', false >,
+	props: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const navigatorBackButtonProps = useNavigatorBackButton( props );
 
-	return <Button ref={ forwardedRef } { ...navigatorBackButtonProps } />;
+	return <View ref={ forwardedRef } { ...navigatorBackButtonProps } />;
 }
 
 /**
diff --git a/packages/components/src/navigator/navigator-back-button/hook.ts b/packages/components/src/navigator/navigator-back-button/hook.ts
index 40f059859effe..edf55be0f15f5 100644
--- a/packages/components/src/navigator/navigator-back-button/hook.ts
+++ b/packages/components/src/navigator/navigator-back-button/hook.ts
@@ -8,18 +8,16 @@ import { useCallback } from '@wordpress/element';
  */
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
+import Button from '../../button';
 import useNavigator from '../use-navigator';
 import type { NavigatorBackButtonHookProps } from '../types';
 
 export function useNavigatorBackButton(
-	props: WordPressComponentProps<
-		NavigatorBackButtonHookProps,
-		'button',
-		false
-	>
+	props: WordPressComponentProps< NavigatorBackButtonHookProps, 'button' >
 ) {
 	const {
 		onClick,
+		as = Button,
 		goToParent: goToParentProp = false,
 		...otherProps
 	} = useContextSystem( props, 'NavigatorBackButton' );
@@ -40,6 +38,7 @@ export function useNavigatorBackButton(
 		);
 
 	return {
+		as,
 		onClick: handleClick,
 		...otherProps,
 	};
diff --git a/packages/components/src/navigator/navigator-button/component.tsx b/packages/components/src/navigator/navigator-button/component.tsx
index 2bd881334a662..300182c254ab9 100644
--- a/packages/components/src/navigator/navigator-button/component.tsx
+++ b/packages/components/src/navigator/navigator-button/component.tsx
@@ -10,15 +10,15 @@ import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
 import { useNavigatorButton } from './hook';
 import type { NavigatorButtonProps } from '../types';
-import Button from '../../button';
+import { View } from '../../view';
 
 function UnconnectedNavigatorButton(
-	props: WordPressComponentProps< NavigatorButtonProps, 'button', false >,
+	props: WordPressComponentProps< NavigatorButtonProps, 'button' >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const navigatorButtonProps = useNavigatorButton( props );
 
-	return <Button ref={ forwardedRef } { ...navigatorButtonProps } />;
+	return <View ref={ forwardedRef } { ...navigatorButtonProps } />;
 }
 
 /**
diff --git a/packages/components/src/navigator/navigator-button/hook.ts b/packages/components/src/navigator/navigator-button/hook.ts
index b7ff94aa96d7b..3952dc3fd56ba 100644
--- a/packages/components/src/navigator/navigator-button/hook.ts
+++ b/packages/components/src/navigator/navigator-button/hook.ts
@@ -9,6 +9,7 @@ import { escapeAttribute } from '@wordpress/escape-html';
  */
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
+import Button from '../../button';
 import useNavigator from '../use-navigator';
 import type { NavigatorButtonProps } from '../types';
 
@@ -16,11 +17,12 @@ const cssSelectorForAttribute = ( attrName: string, attrValue: string ) =>
 	`[${ attrName }="${ attrValue }"]`;
 
 export function useNavigatorButton(
-	props: WordPressComponentProps< NavigatorButtonProps, 'button', false >
+	props: WordPressComponentProps< NavigatorButtonProps, 'button' >
 ) {
 	const {
 		path,
 		onClick,
+		as = Button,
 		attributeName = 'id',
 		...otherProps
 	} = useContextSystem( props, 'NavigatorButton' );
@@ -44,6 +46,7 @@ export function useNavigatorButton(
 		);
 
 	return {
+		as,
 		onClick: handleClick,
 		...otherProps,
 		[ attributeName ]: escapedPath,
diff --git a/packages/components/src/navigator/navigator-to-parent-button/component.tsx b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
index 2240d75cf7b68..e73a3619f3d49 100644
--- a/packages/components/src/navigator/navigator-to-parent-button/component.tsx
+++ b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
@@ -8,16 +8,12 @@ import type { ForwardedRef } from 'react';
  */
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
+import { View } from '../../view';
 import { useNavigatorBackButton } from '../navigator-back-button/hook';
 import type { NavigatorToParentButtonProps } from '../types';
-import Button from '../../button';
 
 function UnconnectedNavigatorToParentButton(
-	props: WordPressComponentProps<
-		NavigatorToParentButtonProps,
-		'button',
-		false
-	>,
+	props: WordPressComponentProps< NavigatorToParentButtonProps, 'button' >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const navigatorToParentButtonProps = useNavigatorBackButton( {
@@ -25,7 +21,7 @@ function UnconnectedNavigatorToParentButton(
 		goToParent: true,
 	} );
 
-	return <Button ref={ forwardedRef } { ...navigatorToParentButtonProps } />;
+	return <View ref={ forwardedRef } { ...navigatorToParentButtonProps } />;
 }
 
 /*

From 2b40db5d5991055098acd391f0ec09aaad4a856b Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 23 Apr 2024 01:57:14 +0900
Subject: [PATCH 08/11] Fixup

---
 .../components/src/navigator/navigator-button/component.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/navigator/navigator-button/component.tsx b/packages/components/src/navigator/navigator-button/component.tsx
index 300182c254ab9..1b84a2315c04d 100644
--- a/packages/components/src/navigator/navigator-button/component.tsx
+++ b/packages/components/src/navigator/navigator-button/component.tsx
@@ -8,9 +8,9 @@ import type { ForwardedRef } from 'react';
  */
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
+import { View } from '../../view';
 import { useNavigatorButton } from './hook';
 import type { NavigatorButtonProps } from '../types';
-import { View } from '../../view';
 
 function UnconnectedNavigatorButton(
 	props: WordPressComponentProps< NavigatorButtonProps, 'button' >,

From b2060631153bd7fc26099ba8dc0883cf68292759 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 23 Apr 2024 02:09:49 +0900
Subject: [PATCH 09/11] View: Make generic

---
 packages/components/src/view/component.tsx |  9 ++++++---
 packages/components/src/view/types.ts      | 10 ----------
 2 files changed, 6 insertions(+), 13 deletions(-)
 delete mode 100644 packages/components/src/view/types.ts

diff --git a/packages/components/src/view/component.tsx b/packages/components/src/view/component.tsx
index 9f08b56614c5d..e0bd96a1cf96e 100644
--- a/packages/components/src/view/component.tsx
+++ b/packages/components/src/view/component.tsx
@@ -11,12 +11,15 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { ViewProps } from './types';
+import type { WordPressComponentProps } from '../context';
 
 const PolymorphicDiv = styled.div``;
 
-function UnforwardedView( props: ViewProps, ref: React.ForwardedRef< any > ) {
-	return <PolymorphicDiv ref={ ref } { ...props } />;
+function UnforwardedView< T extends React.ElementType = 'div' >(
+	{ as, ...restProps }: WordPressComponentProps< {}, T >,
+	ref: React.ForwardedRef< any >
+) {
+	return <PolymorphicDiv as={ as } ref={ ref } { ...restProps } />;
 }
 
 /**
diff --git a/packages/components/src/view/types.ts b/packages/components/src/view/types.ts
deleted file mode 100644
index 1deb2447d5e61..0000000000000
--- a/packages/components/src/view/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * External dependencies
- */
-import type { ReactNode } from 'react';
-
-export type ViewProps = {
-	/** The HTML element or React component to render the component as. */
-	as?: React.ElementType | keyof JSX.IntrinsicElements;
-	children?: ReactNode;
-} & Omit< Record< string, unknown >, 'as' | 'children' >;

From 38d02d6d0295ed11eff74eb9714037190a667d34 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 23 Apr 2024 02:26:26 +0900
Subject: [PATCH 10/11] View: Add back selector

---
 packages/components/src/view/component.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/view/component.tsx b/packages/components/src/view/component.tsx
index e0bd96a1cf96e..6742bd9f52e51 100644
--- a/packages/components/src/view/component.tsx
+++ b/packages/components/src/view/component.tsx
@@ -38,6 +38,8 @@ function UnforwardedView< T extends React.ElementType = 'div' >(
  * }
  * ```
  */
-export const View = forwardRef( UnforwardedView );
+export const View = Object.assign( forwardRef( UnforwardedView ), {
+	selector: '.components-view',
+} );
 
 export default View;

From f5391f211aac424a2d3a8fc7eb84e108e4a4661b Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 23 Apr 2024 02:32:01 +0900
Subject: [PATCH 11/11] Add changelog

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index be8d36763e41d..472d32415758d 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -15,6 +15,7 @@
 -   `Navigator`: Navigation to the active path doesn't create a new location history ([#60561](https://github.com/WordPress/gutenberg/pull/60561))
 -   `FormToggle`: Forwards ref to input ([#60234](https://github.com/WordPress/gutenberg/pull/60234)).
 -   `ToggleControl`: Forwards ref to FormToggle ([#60234](https://github.com/WordPress/gutenberg/pull/60234)).
+-   `View`: Fix prop types ([#60919](https://github.com/WordPress/gutenberg/pull/60919)).
 
 ### Bug Fix