@wordpress/components 20.0.1-next.d6164808d3.0 → 20.0.2-next.957ca95e4c.0

package/build-types/higher-order/with-spoken-messages/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-spoken-messages/index.js"],"names":[],"mappings":";;0BAMc,OAAO,oBAAoB,EAAE,WAAW"}

package/build-types/isolated-event-container/index.d.ts

@@ -0,0 +1,3 @@
+declare var _default: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/build-types/isolated-event-container/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/isolated-event-container/index.js"],"names":[],"mappings":""}

package/build-types/mobile/inserter-button/sparkles.d.ts

@@ -0,0 +1,3 @@
+export default sparkles;
+declare const sparkles: JSX.Element;
+//# sourceMappingURL=sparkles.d.ts.map

package/build-types/mobile/inserter-button/sparkles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkles.d.ts","sourceRoot":"","sources":["../../../src/mobile/inserter-button/sparkles.js"],"names":[],"mappings":";AAKA,oCAOE"}

package/build-types/navigable-container/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/navigable-container/menu.js"],"names":[],"mappings":"AAiBA;;;;0BA2CC"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/navigable-container/menu.js"],"names":[],"mappings":"AAaA;;;;0BA2CC"}

package/build-types/popover/index.d.ts

@@ -19,7 +19,6 @@ declare const PopoverContainer: import("react").ForwardRefExoticComponent<Pick<{
     expandOnMobile: any;
     onFocusOutside: any;
     __unstableSlotName?: string | undefined;
-    __unstableObserveElement: any;
     __unstableForcePosition?: boolean | undefined;
     __unstableShift?: boolean | undefined;
 }, string | number> & import("react").RefAttributes<any>>;

package/build-types/popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.js"],"names":[],"mappings":";AAigBA;;;;;;;;;;;;;;;;;;;;;;;0DAA+C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.js"],"names":[],"mappings":";AA+eA;;;;;;;;;;;;;;;;;;;;;;0DAA+C"}

package/build-types/radio-context/index.d.ts

@@ -0,0 +1,6 @@
+export default RadioContext;
+declare const RadioContext: import("react").Context<{
+    state: null;
+    setState: () => void;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/build-types/radio-context/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/radio-context/index.js"],"names":[],"mappings":";AAKA;;;GAGI"}

package/build-types/text-highlight/index.d.ts

@@ -1,7 +1,4 @@
 /// <reference types="react" />
-/**
- * Internal dependencies
- */
 import type { TextHighlightProps } from './types';
 /**
  * Highlights occurrences of a given string within another string of text. Wraps

package/build-types/text-highlight/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/text-highlight/index.tsx"],"names":[],"mappings":";AAUA;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,UAAY,kBAAkB,gBAgBvD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/text-highlight/index.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,UAAY,kBAAkB,gBAgBvD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/component.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAsGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,kBAAkB,wFAG9B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/component.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAuGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,kBAAkB,wFAG9B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/build-types/toggle-group-control/toggle-group-control/styles.d.ts

@@ -10,4 +10,8 @@ export declare const BackdropView: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const VisualLabelWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/styles.ts"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,kBAAkB;UAGxB,YAAa,uBAAuB,CAAE,MAAM,CAAE,CAAE;+CAoBtD,CAAC;AAEF,eAAO,MAAM,MAAM,2CAMlB,CAAC;AAEF,eAAO,MAAM,sBAAsB,SAC5B,YAAa,uBAAuB,CAAE,MAAM,CAAE,CAAE,8CAUtD,CAAC;AAEF,eAAO,MAAM,KAAK,2CAGjB,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAWxB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/styles.ts"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,kBAAkB;UAGxB,YAAa,uBAAuB,CAAE,MAAM,CAAE,CAAE;+CAoBtD,CAAC;AAEF,eAAO,MAAM,MAAM,2CAMlB,CAAC;AAEF,eAAO,MAAM,sBAAsB,SAC5B,YAAa,uBAAuB,CAAE,MAAM,CAAE,CAAE,8CAUtD,CAAC;AAEF,eAAO,MAAM,KAAK,2CAGjB,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAWxB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAG9B,CAAC"}

package/build-types/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.js"],"names":[],"mappings":"AAyBA;;;;GAIG;AACH,4BAFU,MAAM,CAEiB;;AAmFjC,0CAoKC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.js"],"names":[],"mappings":"AAqBA;;;;GAIG;AACH,4BAFU,MAAM,CAEiB;;AAmFjC,0CAoKC"}

package/build-types/utils/strings.d.ts

@@ -1,2 +1,10 @@
 export declare const normalizeTextString: (value: string) => string;
+/**
+ * Escapes the RegExp special characters.
+ *
+ * @param {string} string Input string.
+ *
+ * @return {string} Regex-escaped string.
+ */
+export declare function escapeRegExp(string: string): string;
 //# sourceMappingURL=strings.d.ts.map

package/build-types/utils/strings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/utils/strings.ts"],"names":[],"mappings":"AAmEA,eAAO,MAAM,mBAAmB,UAAY,MAAM,KAAI,MAIrD,CAAC"}
+{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/utils/strings.ts"],"names":[],"mappings":"AAmEA,eAAO,MAAM,mBAAmB,UAAY,MAAM,KAAI,MAIrD,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAE,MAAM,EAAE,MAAM,GAAI,MAAM,CAErD"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "20.0.1-next.d6164808d3.0",
+	"version": "20.0.2-next.957ca95e4c.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,21 +38,21 @@
 		"@emotion/utils": "^1.0.0",
 		"@floating-ui/react-dom": "^1.0.0",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/compose": "^5.13.1-next.d6164808d3.0",
-		"@wordpress/date": "^4.15.1-next.d6164808d3.0",
-		"@wordpress/deprecated": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/dom": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/element": "^4.13.1-next.d6164808d3.0",
-		"@wordpress/escape-html": "^2.15.1-next.d6164808d3.0",
-		"@wordpress/hooks": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/i18n": "^4.15.1-next.d6164808d3.0",
-		"@wordpress/icons": "^9.6.1-next.d6164808d3.0",
-		"@wordpress/is-shallow-equal": "^4.15.1-next.d6164808d3.0",
-		"@wordpress/keycodes": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/primitives": "^3.13.1-next.d6164808d3.0",
-		"@wordpress/rich-text": "^5.13.1-next.d6164808d3.0",
-		"@wordpress/warning": "^2.15.1-next.d6164808d3.0",
+		"@wordpress/a11y": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/compose": "^5.14.1-next.957ca95e4c.0",
+		"@wordpress/date": "^4.16.1-next.957ca95e4c.0",
+		"@wordpress/deprecated": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/dom": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/element": "^4.14.1-next.957ca95e4c.0",
+		"@wordpress/escape-html": "^2.16.1-next.957ca95e4c.0",
+		"@wordpress/hooks": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/i18n": "^4.16.1-next.957ca95e4c.0",
+		"@wordpress/icons": "^9.7.1-next.957ca95e4c.0",
+		"@wordpress/is-shallow-equal": "^4.16.1-next.957ca95e4c.0",
+		"@wordpress/keycodes": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/primitives": "^3.14.1-next.957ca95e4c.0",
+		"@wordpress/rich-text": "^5.14.1-next.957ca95e4c.0",
+		"@wordpress/warning": "^2.16.1-next.957ca95e4c.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ba8a396d2f418e53a6c4c50575582f3f3eb11ff7"
+	"gitHead": "272a74bbbaab10ee24424eafe9578e705fbfbbb4"
 }

package/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js

@@ -13,6 +13,7 @@ export const rootBase = () => {
 	return css`
 		border-radius: 2px;
 		box-sizing: border-box;
+		direction: ltr;
 		display: grid;
 		grid-template-columns: repeat( 3, 1fr );
 		outline: none;

package/src/autocomplete/get-default-use-items.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { debounce, escapeRegExp } from 'lodash';
+import { debounce } from 'lodash';
 import removeAccents from 'remove-accents';
 
 /**
@@ -9,6 +9,11 @@ import removeAccents from 'remove-accents';
  */
 import { useLayoutEffect, useState } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { escapeRegExp } from '../utils/strings';
+
 function filterOptions( search, options = [], maxResults = 10 ) {
 	const filtered = [];
 	for ( let i = 0; i < options.length; i++ ) {

package/src/autocomplete/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { escapeRegExp, find } from 'lodash';
+import { find } from 'lodash';
 import removeAccents from 'remove-accents';
 
 /**
@@ -34,6 +34,7 @@ import { speak } from '@wordpress/a11y';
  * Internal dependencies
  */
 import { getAutoCompleterUI } from './autocompleter-ui';
+import { escapeRegExp } from '../utils/strings';
 
 /**
  * A raw completer option.

package/src/card/card/{component.js → component.tsx}

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { css } from '@emotion/react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -11,19 +12,23 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { contextConnect, ContextSystemProvider } from '../../ui/context';
+import {
+	contextConnect,
+	ContextSystemProvider,
+	WordPressComponentProps,
+} from '../../ui/context';
 import { Elevation } from '../../elevation';
 import { View } from '../../view';
 import * as styles from '../styles';
 import { useCard } from './hook';
 import CONFIG from '../../utils/config-values';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { Props } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                   forwardedRef
- */
-function Card( props, forwardedRef ) {
+function UnconnectedCard(
+	props: WordPressComponentProps< Props, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const {
 		children,
 		elevation,
@@ -77,7 +82,6 @@ function Card( props, forwardedRef ) {
  * `Card` also provides a convenient set of sub-components such as `CardBody`,
  * `CardHeader`, `CardFooter`, and more.
  *
- * @example
  * ```jsx
  * import {
  *   Card,
@@ -105,6 +109,6 @@ function Card( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedCard = contextConnect( Card, 'Card' );
+export const Card = contextConnect( UnconnectedCard, 'Card' );
 
-export default ConnectedCard;
+export default Card;

package/src/card/card/{hook.js → hook.ts}

@@ -7,17 +7,20 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import { useSurface } from '../../surface';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { Props } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props
- */
-function useDeprecatedProps( { elevation, isElevated, ...otherProps } ) {
-	/**@type {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} */
-	const propsToReturn = {
+type CardProps = WordPressComponentProps< Props, 'div' >;
+
+function useDeprecatedProps( {
+	elevation,
+	isElevated,
+	...otherProps
+}: CardProps ) {
+	const propsToReturn: Omit< CardProps, 'isElevated' > = {
 		...otherProps,
 	};
 	let computedElevation = elevation;
@@ -39,10 +42,7 @@ function useDeprecatedProps( { elevation, isElevated, ...otherProps } ) {
 	return propsToReturn;
 }
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props
- */
-export function useCard( props ) {
+export function useCard( props: CardProps ) {
 	const {
 		className,
 		elevation = 0,

package/src/card/card-body/{component.js → component.tsx}

@@ -1,16 +1,21 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { Scrollable } from '../../scrollable';
 import { View } from '../../view';
 import { useCardBody } from './hook';
+import type { BodyProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                       forwardedRef
- */
-function CardBody( props, forwardedRef ) {
+function UnconnectedCardBody(
+	props: WordPressComponentProps< BodyProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const { isScrollable, ...otherProps } = useCardBody( props );
 
 	if ( isScrollable ) {
@@ -24,7 +29,6 @@ function CardBody( props, forwardedRef ) {
  * `CardBody` renders an optional content area for a `Card`.
  * Multiple `CardBody` components can be used within `Card` if needed.
  *
- * @example
  * ```jsx
  * import { Card, CardBody } from `@wordpress/components`;
  *
@@ -35,6 +39,6 @@ function CardBody( props, forwardedRef ) {
  * </Card>
  * ```
  */
-const ConnectedCardBody = contextConnect( CardBody, 'CardBody' );
+export const CardBody = contextConnect( UnconnectedCardBody, 'CardBody' );
 
-export default ConnectedCardBody;
+export default CardBody;

package/src/card/card-body/{hook.js → hook.ts}

@@ -6,14 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { BodyProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props
- */
-export function useCardBody( props ) {
+export function useCardBody(
+	props: WordPressComponentProps< BodyProps, 'div' >
+) {
 	const {
 		className,
 		isScrollable = false,

package/src/card/card-divider/{component.js → component.tsx}

@@ -1,15 +1,19 @@
 /**
- * Internal dependencies
+ * External dependencies
  */
-import { contextConnect } from '../../ui/context';
-import { Divider } from '../../divider';
-import { useCardDivider } from './hook';
+import type { ForwardedRef } from 'react';
 
 /**
- * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props
- * @param {import('react').ForwardedRef<any>}                                                                     forwardedRef
+ * Internal dependencies
  */
-function CardDivider( props, forwardedRef ) {
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import { Divider, DividerProps } from '../../divider';
+import { useCardDivider } from './hook';
+
+function UnconnectedCardDivider(
+	props: WordPressComponentProps< DividerProps, 'hr', false >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const dividerProps = useCardDivider( props );
 
 	return <Divider { ...dividerProps } ref={ forwardedRef } />;
@@ -19,7 +23,6 @@ function CardDivider( props, forwardedRef ) {
  * `CardDivider` renders an optional divider within a `Card`.
  * It is typically used to divide multiple `CardBody` components from each other.
  *
- * @example
  * ```jsx
  * import { Card, CardBody, CardDivider } from `@wordpress/components`;
  *
@@ -30,6 +33,9 @@ function CardDivider( props, forwardedRef ) {
  * </Card>
  * ```
  */
-const ConnectedCardDivider = contextConnect( CardDivider, 'CardDivider' );
+export const CardDivider = contextConnect(
+	UnconnectedCardDivider,
+	'CardDivider'
+);
 
-export default ConnectedCardDivider;
+export default CardDivider;

package/src/card/card-divider/{hook.js → hook.ts}

@@ -6,14 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { DividerProps } from '../../divider';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props
- */
-export function useCardDivider( props ) {
+export function useCardDivider(
+	props: WordPressComponentProps< DividerProps, 'hr', false >
+) {
 	const { className, ...otherProps } = useContextSystem(
 		props,
 		'CardDivider'

package/src/card/card-footer/{component.js → component.tsx}

@@ -1,15 +1,20 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { Flex } from '../../flex';
 import { useCardFooter } from './hook';
+import type { FooterProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                         forwardedRef
- */
-function CardFooter( props, forwardedRef ) {
+function UnconnectedCardFooter(
+	props: WordPressComponentProps< FooterProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const footerProps = useCardFooter( props );
 
 	return <Flex { ...footerProps } ref={ forwardedRef } />;
@@ -18,7 +23,6 @@ function CardFooter( props, forwardedRef ) {
 /**
  * `CardFooter` renders an optional footer within a `Card`.
  *
- * @example
  * ```jsx
  * import { Card, CardBody, CardFooter } from `@wordpress/components`;
  *
@@ -28,6 +32,6 @@ function CardFooter( props, forwardedRef ) {
  * </Card>
  * ```
  */
-const ConnectedCardFooter = contextConnect( CardFooter, 'CardFooter' );
+export const CardFooter = contextConnect( UnconnectedCardFooter, 'CardFooter' );
 
-export default ConnectedCardFooter;
+export default CardFooter;

package/src/card/card-footer/{hook.js → hook.ts}

@@ -6,14 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { FooterProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props
- */
-export function useCardFooter( props ) {
+export function useCardFooter(
+	props: WordPressComponentProps< FooterProps, 'div' >
+) {
 	const {
 		className,
 		justify,

package/src/card/card-header/{component.js → component.tsx}

@@ -1,15 +1,20 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { Flex } from '../../flex';
 import { useCardHeader } from './hook';
+import type { HeaderProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                         forwardedRef
- */
-function CardHeader( props, forwardedRef ) {
+function UnconnectedCardHeader(
+	props: WordPressComponentProps< HeaderProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const headerProps = useCardHeader( props );
 
 	return <Flex { ...headerProps } ref={ forwardedRef } />;
@@ -18,7 +23,6 @@ function CardHeader( props, forwardedRef ) {
 /**
  * `CardHeader` renders an optional header within a `Card`.
  *
- * @example
  * ```jsx
  * import { Card, CardBody, CardHeader } from `@wordpress/components`;
  *
@@ -28,6 +32,6 @@ function CardHeader( props, forwardedRef ) {
  * </Card>
  * ```
  */
-const ConnectedCardHeader = contextConnect( CardHeader, 'CardHeader' );
+export const CardHeader = contextConnect( UnconnectedCardHeader, 'CardHeader' );
 
-export default ConnectedCardHeader;
+export default CardHeader;

package/src/card/card-header/{hook.js → hook.ts}

@@ -6,14 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { HeaderProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props
- */
-export function useCardHeader( props ) {
+export function useCardHeader(
+	props: WordPressComponentProps< HeaderProps, 'div' >
+) {
 	const {
 		className,
 		isBorderless = false,

package/src/card/card-media/{component.js → component.tsx}

@@ -1,15 +1,20 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
 import { useCardMedia } from './hook';
+import type { MediaProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                                  forwardedRef
- */
-function CardMedia( props, forwardedRef ) {
+function UnconnectedCardMedia(
+	props: WordPressComponentProps< MediaProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const cardMediaProps = useCardMedia( props );
 
 	return <View { ...cardMediaProps } ref={ forwardedRef } />;
@@ -32,6 +37,6 @@ function CardMedia( props, forwardedRef ) {
  * );
  * ```
  */
-const ConnectedCardMedia = contextConnect( CardMedia, 'CardMedia' );
+export const CardMedia = contextConnect( UnconnectedCardMedia, 'CardMedia' );
 
-export default ConnectedCardMedia;
+export default CardMedia;