From 262164b712eedb017afb4fb08eca54dc3d4ab753 Mon Sep 17 00:00:00 2001
From: Renato Massao Yonamine <massao.yonamine@contentful.com>
Date: Mon, 6 Dec 2021 16:40:11 +0100
Subject: [PATCH 1/6] feat(core): add ExpandProps helper type

---
 packages/core/src/Primitive/Primitive.tsx | 6 ++++++
 packages/core/src/Primitive/index.ts      | 1 +
 packages/core/src/index.ts                | 1 +
 3 files changed, 8 insertions(+)

diff --git a/packages/core/src/Primitive/Primitive.tsx b/packages/core/src/Primitive/Primitive.tsx
index e1e1f41e0b..5e2b6362c4 100644
--- a/packages/core/src/Primitive/Primitive.tsx
+++ b/packages/core/src/Primitive/Primitive.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
 
+export type ExpandProps<T> = T extends object
+  ? T extends infer O
+    ? { [K in keyof O]: O[K] }
+    : never
+  : T;
+
 type Overwrite<T, U> = Omit<T, keyof U> & U;
 
 type PropsWithAs<P, E extends React.ElementType> = P & { as?: E };
diff --git a/packages/core/src/Primitive/index.ts b/packages/core/src/Primitive/index.ts
index 6ce0e22195..6e6b151ac4 100644
--- a/packages/core/src/Primitive/index.ts
+++ b/packages/core/src/Primitive/index.ts
@@ -2,4 +2,5 @@ export type {
   PolymorphicComponent,
   PropsWithHTMLElement,
   PolymorphicProps,
+  ExpandProps,
 } from './Primitive';
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 3ae87c6b49..657c7eb4c8 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -3,6 +3,7 @@ export type {
   PolymorphicComponent,
   PropsWithHTMLElement,
   PolymorphicProps,
+  ExpandProps,
 } from './Primitive';
 export type {
   CommonProps,

From 184814831db94d0ca1d8c510580958e47ecd549a Mon Sep 17 00:00:00 2001
From: Renato Massao Yonamine <massao.yonamine@contentful.com>
Date: Mon, 6 Dec 2021 16:40:41 +0100
Subject: [PATCH 2/6] refactor(button): add ExpandProps type to Button package

---
 packages/components/button/src/Button.tsx                 | 3 ++-
 .../components/button/src/ButtonGroup/ButtonGroup.tsx     | 7 +++++--
 packages/components/button/src/IconButton/IconButton.tsx  | 8 ++++++--
 .../components/button/src/ToggleButton/ToggleButton.tsx   | 4 ++--
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/components/button/src/Button.tsx b/packages/components/button/src/Button.tsx
index 64a8ee3413..32fb014c45 100644
--- a/packages/components/button/src/Button.tsx
+++ b/packages/components/button/src/Button.tsx
@@ -5,6 +5,7 @@ import {
   Box,
   PolymorphicProps,
   PolymorphicComponent,
+  ExpandProps,
 } from '@contentful/f36-core';
 import { Spinner } from '@contentful/f36-spinner';
 
@@ -112,7 +113,7 @@ function _Button<E extends React.ElementType = typeof BUTTON_DEFAULT_TAG>(
  * @description: Buttons communicate the action that will occur when the user clicks it
  */
 export const Button: PolymorphicComponent<
-  ButtonInternalProps,
+  ExpandProps<ButtonInternalProps>,
   typeof BUTTON_DEFAULT_TAG,
   'disabled'
 > = React.forwardRef(_Button);
diff --git a/packages/components/button/src/ButtonGroup/ButtonGroup.tsx b/packages/components/button/src/ButtonGroup/ButtonGroup.tsx
index 1b1d551360..d5e5053717 100644
--- a/packages/components/button/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/components/button/src/ButtonGroup/ButtonGroup.tsx
@@ -1,10 +1,13 @@
 import { cx } from 'emotion';
 import React from 'react';
-import { Box } from '@contentful/f36-core';
+import { Box, ExpandProps } from '@contentful/f36-core';
 import getStyles from './ButtonGroup.styles';
 import type { ButtonGroupProps } from './types';
 
-function _ButtonGroup(props: ButtonGroupProps, ref: React.Ref<HTMLDivElement>) {
+function _ButtonGroup(
+  props: ExpandProps<ButtonGroupProps>,
+  ref: React.Ref<HTMLDivElement>,
+) {
   const {
     variant = 'collapsed',
     withDivider,
diff --git a/packages/components/button/src/IconButton/IconButton.tsx b/packages/components/button/src/IconButton/IconButton.tsx
index b02772c7b6..3fe506a4dc 100644
--- a/packages/components/button/src/IconButton/IconButton.tsx
+++ b/packages/components/button/src/IconButton/IconButton.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
-import { PolymorphicProps, PolymorphicComponent } from '@contentful/f36-core';
+import {
+  PolymorphicProps,
+  PolymorphicComponent,
+  ExpandProps,
+} from '@contentful/f36-core';
 import { Button } from '../Button';
 import type { ButtonInternalProps } from '../types';
 
@@ -51,7 +55,7 @@ function _IconButton<
 }
 
 export const IconButton: PolymorphicComponent<
-  IconButtonInternalProps,
+  ExpandProps<IconButtonInternalProps>,
   typeof ICON_BUTTON_DEFAULT_TAG,
   'disabled'
 > = React.forwardRef(_IconButton);
diff --git a/packages/components/button/src/ToggleButton/ToggleButton.tsx b/packages/components/button/src/ToggleButton/ToggleButton.tsx
index ecb7bbac90..ffbb5d8dad 100644
--- a/packages/components/button/src/ToggleButton/ToggleButton.tsx
+++ b/packages/components/button/src/ToggleButton/ToggleButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { cx } from 'emotion';
-import { CommonProps } from '@contentful/f36-core';
+import { CommonProps, ExpandProps } from '@contentful/f36-core';
 import { Button } from '../Button';
 import getStyles from './ToggleButton.styles';
 
@@ -26,7 +26,7 @@ export interface ToggleButtonProps extends CommonProps {
   children: React.ReactNode;
 }
 
-function _ToggleButton(props: ToggleButtonProps, ref) {
+function _ToggleButton(props: ExpandProps<ToggleButtonProps>, ref) {
   const {
     testId = 'cf-ui-toggle-button',
     children,

From eca0877f3c1c9bf55b6ee64f387174b1640a4d24 Mon Sep 17 00:00:00 2001
From: Renato Massao Yonamine <massao.yonamine@contentful.com>
Date: Wed, 8 Dec 2021 15:49:29 +0100
Subject: [PATCH 3/6] refactor: add ExpandProps to components

---
 .../components/accordion/src/Accordion.tsx    |   4 +-
 .../src/AccordionItem/AccordionItem.tsx       |   4 +-
 .../src/AccordionPanel/AccordionPanel.tsx     |   4 +-
 .../autocomplete/src/Autocomplete.tsx         |   6 +-
 packages/components/badge/src/Badge.tsx       |  53 ++++---
 .../badge/src/EntityStatusBadge.tsx           |   8 +-
 packages/components/card/src/card/Card.tsx    |   3 +-
 .../card/src/entry-card/EntryCard.tsx         |   3 +-
 .../components/copybutton/src/CopyButton.tsx  |   7 +-
 packages/components/datetime/src/DateTime.tsx |   8 +-
 .../datetime/src/RelativeDateTime.tsx         |   8 +-
 .../components/drag-handle/src/DragHandle.tsx |   7 +-
 .../components/entity-list/src/EntityList.tsx |   7 +-
 .../forms/src/base-checkbox/BaseCheckbox.tsx  |   4 +-
 .../src/base-checkbox/BaseCheckboxGroup.tsx   |   4 +-
 .../forms/src/base-input/BaseInput.tsx        |   3 +-
 .../forms/src/checkbox/Checkbox.tsx           |   7 +-
 .../forms/src/checkbox/CheckboxGroup.tsx      |   3 +-
 .../components/forms/src/counter/Counter.tsx  |  47 +++---
 .../forms/src/form-control/FormControl.tsx    |   3 +-
 .../forms/src/form-label/FormLabel.tsx        |   3 +-
 packages/components/forms/src/form/Form.tsx   |  13 +-
 .../forms/src/help-text/HelpText.tsx          |  36 ++---
 packages/components/forms/src/radio/Radio.tsx |   7 +-
 .../components/forms/src/select/Select.tsx    |   8 +-
 .../components/forms/src/switch/Switch.tsx    |   6 +-
 .../forms/src/text-input/TextInput.tsx        |   3 +-
 .../src/text-input/input-group/InputGroup.tsx |   4 +-
 .../forms/src/textarea/Textarea.tsx           |   3 +-
 .../validation-message/ValidationMessage.tsx  |   3 +-
 packages/components/icon/src/Icon.tsx         |   3 +-
 packages/components/list/src/List.tsx         |   3 +-
 .../menu/src/MenuDivider/MenuDivider.tsx      |   8 +-
 .../components/menu/src/MenuItem/MenuItem.tsx |   3 +-
 .../components/menu/src/MenuList/MenuList.tsx |  11 +-
 .../menu/src/MenuList/MenuListFooter.tsx      |  10 +-
 .../menu/src/MenuList/MenuListHeader.tsx      |  10 +-
 .../src/MenuSectionTitle/MenuSectionTitle.tsx |   3 +-
 .../menu/src/MenuTrigger/MenuTrigger.tsx      |   3 +-
 .../src/SubmenuTrigger/SubmenuTrigger.tsx     |   3 +-
 packages/components/note/src/Note.tsx         | 113 +++++++-------
 .../src/NotificationItem/NotificationItem.tsx |   4 +-
 packages/components/pill/src/Pill.tsx         |   8 +-
 packages/components/popover/src/Popover.tsx   |   4 +-
 .../src/PopoverContent/PopoverContent.tsx     |   8 +-
 packages/components/spinner/src/Spinner.tsx   |   8 +-
 packages/components/table/src/Table.tsx       |   4 +-
 packages/components/table/src/TableBody.tsx   |  43 +++---
 packages/components/table/src/TableCell.tsx   |  11 +-
 packages/components/table/src/TableHead.tsx   |  11 +-
 packages/components/table/src/TableRow.tsx    |  11 +-
 packages/components/tabs/src/Tabs.tsx         | 142 +++++++++---------
 .../components/text-link/src/TextLink.tsx     |   3 +-
 .../components/typography/src/DisplayText.tsx |   3 +-
 .../components/typography/src/Heading.tsx     |   3 +-
 .../components/typography/src/Paragraph.tsx   |  34 +++--
 .../typography/src/SectionHeading.tsx         |   3 +-
 .../components/typography/src/Subheading.tsx  |   3 +-
 packages/components/typography/src/Text.tsx   |   3 +-
 59 files changed, 450 insertions(+), 305 deletions(-)

diff --git a/packages/components/accordion/src/Accordion.tsx b/packages/components/accordion/src/Accordion.tsx
index b923a887ba..03e94d0772 100644
--- a/packages/components/accordion/src/Accordion.tsx
+++ b/packages/components/accordion/src/Accordion.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@contentful/f36-core';
-import type { CommonProps } from '@contentful/f36-core';
+import type { CommonProps, ExpandProps } from '@contentful/f36-core';
 
 import { getAccordionStyles } from './Accordion.styles';
 
@@ -23,7 +23,7 @@ const _Accordion = (
     className,
     testId = 'cf-ui-accordion',
     ...otherProps
-  }: AccordionProps,
+  }: ExpandProps<AccordionProps>,
   ref: React.Ref<HTMLUListElement>,
 ) => {
   const styles = getAccordionStyles({ className });
diff --git a/packages/components/accordion/src/AccordionItem/AccordionItem.tsx b/packages/components/accordion/src/AccordionItem/AccordionItem.tsx
index 30f827cd59..2c81c2b02a 100644
--- a/packages/components/accordion/src/AccordionItem/AccordionItem.tsx
+++ b/packages/components/accordion/src/AccordionItem/AccordionItem.tsx
@@ -4,7 +4,7 @@ import { useId, Box } from '@contentful/f36-core';
 
 import { AccordionHeader } from '../AccordionHeader/AccordionHeader';
 import { AccordionPanel } from '../AccordionPanel/AccordionPanel';
-import type { CommonProps } from '@contentful/f36-core';
+import type { CommonProps, ExpandProps } from '@contentful/f36-core';
 
 import { getAccordionItemStyles } from './AccordionItem.styles';
 
@@ -46,7 +46,7 @@ const _AccordionItem = (
     align = 'end',
     className,
     ...otherProps
-  }: AccordionItemProps,
+  }: ExpandProps<AccordionItemProps>,
   ref: React.Ref<HTMLLIElement>,
 ) => {
   const styles = getAccordionItemStyles({ className });
diff --git a/packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx b/packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx
index c07b7002c1..06a2e536a2 100644
--- a/packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx
+++ b/packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useLayoutEffect, useRef } from 'react';
 import tokens from '@contentful/f36-tokens';
-import type { CommonProps } from '@contentful/f36-core';
+import type { CommonProps, ExpandProps } from '@contentful/f36-core';
 import { Box } from '@contentful/f36-core';
 
 import { getAccordionPanelStyles } from './AccordionPanel.styles';
@@ -20,7 +20,7 @@ export interface AccordionPanelProps extends CommonProps {
   ariaId: string;
 }
 
-export const AccordionPanel: FC<AccordionPanelProps> = ({
+export const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({
   children,
   isExpanded = false,
   ariaId,
diff --git a/packages/components/autocomplete/src/Autocomplete.tsx b/packages/components/autocomplete/src/Autocomplete.tsx
index 63e1ec4e1d..ef60fcffd1 100644
--- a/packages/components/autocomplete/src/Autocomplete.tsx
+++ b/packages/components/autocomplete/src/Autocomplete.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { cx } from 'emotion';
 import { useCombobox } from 'downshift';
 
-import { CommonProps, mergeRefs } from '@contentful/f36-core';
+import { CommonProps, ExpandProps, mergeRefs } from '@contentful/f36-core';
 import { IconButton } from '@contentful/f36-button';
 import { TextInput, TextInputProps } from '@contentful/f36-forms';
 import { CloseIcon, ChevronDownIcon } from '@contentful/f36-icons';
@@ -355,5 +355,7 @@ function isUsingGroups<ItemType>(
  * Once one of the options is selected, that option becomes the value of the `TextInput`.
  */
 export const Autocomplete = React.forwardRef(_Autocomplete) as <T>(
-  props: AutocompleteProps<T> & { ref?: React.Ref<HTMLDivElement> },
+  props: ExpandProps<AutocompleteProps<T>> & {
+    ref?: React.Ref<HTMLDivElement>;
+  },
 ) => ReturnType<typeof _Autocomplete>;
diff --git a/packages/components/badge/src/Badge.tsx b/packages/components/badge/src/Badge.tsx
index 38fff2853b..0fc745cd0c 100644
--- a/packages/components/badge/src/Badge.tsx
+++ b/packages/components/badge/src/Badge.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { cx } from 'emotion';
 import { Box } from '@contentful/f36-core';
-import type { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import type { CommonProps, ExpandProps } from '@contentful/f36-core';
 
 import type { BadgeSize, BadgeVariant } from './types';
 import { getBadgeStyles } from './getBadgeStyles';
@@ -21,32 +21,31 @@ export interface BadgeInternalProps extends CommonProps {
   children: React.ReactNode;
 }
 
-export type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;
+export const Badge = React.forwardRef<
+  HTMLDivElement,
+  ExpandProps<BadgeInternalProps>
+>((props, ref) => {
+  const {
+    children,
+    variant = 'primary',
+    size = 'default',
+    testId = 'cf-ui-badge',
+    className,
+    ...otherProps
+  } = props;
 
-export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
-  (props, ref) => {
-    const {
-      children,
-      variant = 'primary',
-      size = 'default',
-      testId = 'cf-ui-badge',
-      className,
-      ...otherProps
-    } = props;
-
-    return (
-      <Box
-        as="div"
-        testId={testId}
-        display="inline-block"
-        className={cx(getBadgeStyles({ variant, size }), className)}
-        {...otherProps}
-        ref={ref}
-      >
-        {children}
-      </Box>
-    );
-  },
-);
+  return (
+    <Box
+      as="div"
+      testId={testId}
+      display="inline-block"
+      className={cx(getBadgeStyles({ variant, size }), className)}
+      {...otherProps}
+      ref={ref}
+    >
+      {children}
+    </Box>
+  );
+});
 
 Badge.displayName = 'Badge';
diff --git a/packages/components/badge/src/EntityStatusBadge.tsx b/packages/components/badge/src/EntityStatusBadge.tsx
index 1f5a4f3695..53f0042db0 100644
--- a/packages/components/badge/src/EntityStatusBadge.tsx
+++ b/packages/components/badge/src/EntityStatusBadge.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import type { EntityStatus } from '@contentful/f36-core';
+import type { EntityStatus, ExpandProps } from '@contentful/f36-core';
 
 import { Badge } from './Badge';
-import type { BadgeProps } from './Badge';
+import type { BadgeInternalProps } from './Badge';
 import { BadgeVariant } from './types';
 
 const statusMap: { [key in EntityStatus]: BadgeVariant } = {
@@ -15,14 +15,14 @@ const statusMap: { [key in EntityStatus]: BadgeVariant } = {
 };
 
 export type EntityStatusBadgeProps = Omit<
-  BadgeProps,
+  BadgeInternalProps,
   'variant' | 'children'
 > & {
   entityStatus: EntityStatus;
 };
 
 function EntityStatusBadge(
-  props: EntityStatusBadgeProps,
+  props: ExpandProps<EntityStatusBadgeProps>,
   ref: React.Ref<HTMLDivElement>,
 ) {
   const { entityStatus, ...otherProps } = props;
diff --git a/packages/components/card/src/card/Card.tsx b/packages/components/card/src/card/Card.tsx
index 4adad02954..a1d59b77ad 100644
--- a/packages/components/card/src/card/Card.tsx
+++ b/packages/components/card/src/card/Card.tsx
@@ -6,6 +6,7 @@ import type {
 } from '@contentful/f36-core';
 import { Heading } from '@contentful/f36-typography';
 import { Flex } from '@contentful/f36-core';
+import type { ExpandProps } from '@contentful/f36-core';
 
 import { BaseCard, BASE_CARD_DEFAULT_TAG } from '../base-card/BaseCard';
 import type { BaseCardInternalProps } from '../base-card/BaseCard.types';
@@ -77,6 +78,6 @@ function _Card<E extends React.ElementType = typeof BASE_CARD_DEFAULT_TAG>(
 }
 
 export const Card: PolymorphicComponent<
-  CardInternalProps,
+  ExpandProps<CardInternalProps>,
   typeof BASE_CARD_DEFAULT_TAG
 > = forwardRef(_Card);
diff --git a/packages/components/card/src/entry-card/EntryCard.tsx b/packages/components/card/src/entry-card/EntryCard.tsx
index 3b8d0bbf9d..272e13e5a1 100644
--- a/packages/components/card/src/entry-card/EntryCard.tsx
+++ b/packages/components/card/src/entry-card/EntryCard.tsx
@@ -3,6 +3,7 @@ import React, { forwardRef } from 'react';
 import truncate from 'truncate';
 import { cx } from 'emotion';
 import { Flex } from '@contentful/f36-core';
+import type { ExpandProps } from '@contentful/f36-core';
 import type {
   PolymorphicComponent,
   PolymorphicProps,
@@ -111,6 +112,6 @@ function _EntryCard<
 }
 
 export const EntryCard: PolymorphicComponent<
-  EntryCardInternalProps,
+  ExpandProps<EntryCardInternalProps>,
   typeof ENTRY_CARD_DEFAULT_TAG
 > = forwardRef(_EntryCard);
diff --git a/packages/components/copybutton/src/CopyButton.tsx b/packages/components/copybutton/src/CopyButton.tsx
index 9accb3d1f9..229433a654 100644
--- a/packages/components/copybutton/src/CopyButton.tsx
+++ b/packages/components/copybutton/src/CopyButton.tsx
@@ -2,7 +2,7 @@ import { cx } from 'emotion';
 import React, { useState, useCallback, useRef } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { CopyIcon } from '@contentful/f36-icons';
-import type { CommonProps } from '@contentful/f36-core';
+import type { CommonProps, ExpandProps } from '@contentful/f36-core';
 import { Tooltip } from '@contentful/f36-tooltip';
 import type { TooltipProps } from '@contentful/f36-tooltip';
 import { getStyles } from './CopyButton.styles';
@@ -47,7 +47,10 @@ export interface CopyButtonProps extends CommonProps {
   size?: 'small' | 'medium';
 }
 
-function _CopyButton(props: CopyButtonProps, ref: React.Ref<HTMLDivElement>) {
+function _CopyButton(
+  props: ExpandProps<CopyButtonProps>,
+  ref: React.Ref<HTMLDivElement>,
+) {
   const {
     onCopy,
     value,
diff --git a/packages/components/datetime/src/DateTime.tsx b/packages/components/datetime/src/DateTime.tsx
index c74d764305..51460c08b3 100644
--- a/packages/components/datetime/src/DateTime.tsx
+++ b/packages/components/datetime/src/DateTime.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
-import { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 
 import type { DateType, DateFormat } from '../types';
 import { formatDateAndTime, formatMachineReadableDateTime } from './utils';
@@ -25,7 +29,7 @@ const _DateTime = (
     format = 'full',
     testId = 'cf-ui-date-time',
     ...otherProps
-  }: DateTimeProps,
+  }: ExpandProps<DateTimeProps>,
   ref: React.Ref<HTMLTimeElement>,
 ) => {
   const machineReadableDate = formatMachineReadableDateTime(date);
diff --git a/packages/components/datetime/src/RelativeDateTime.tsx b/packages/components/datetime/src/RelativeDateTime.tsx
index 28732337dd..fc5f43b84f 100644
--- a/packages/components/datetime/src/RelativeDateTime.tsx
+++ b/packages/components/datetime/src/RelativeDateTime.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
-import { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 
 import dayjs from 'dayjs';
 import utcPlugin from 'dayjs/plugin/utc';
@@ -47,7 +51,7 @@ const _RelativeDateTime = (
     isRelativeToCurrentWeek = false,
     testId = 'cf-ui-relative-date-time',
     ...otherProps
-  }: RelativeDateTimeProps,
+  }: ExpandProps<RelativeDateTimeProps>,
   ref: React.Ref<HTMLTimeElement>,
 ) => {
   const now = new Date();
diff --git a/packages/components/drag-handle/src/DragHandle.tsx b/packages/components/drag-handle/src/DragHandle.tsx
index c087feabbd..d405fd013f 100644
--- a/packages/components/drag-handle/src/DragHandle.tsx
+++ b/packages/components/drag-handle/src/DragHandle.tsx
@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import { cx } from 'emotion';
 import type { PropsWithHTMLElement } from '@contentful/f36-core';
-import type { CommonProps } from '@contentful/f36-core';
+import type { CommonProps, ExpandProps } from '@contentful/f36-core';
 import { DragIcon } from '@contentful/f36-icons';
 import { getStyles } from './DragHandle.styles';
 
@@ -37,7 +37,10 @@ export type DragHandleProps = PropsWithHTMLElement<
   'button'
 >;
 
-export const DragHandle = forwardRef<HTMLButtonElement, DragHandleProps>(
+export const DragHandle = forwardRef<
+  HTMLButtonElement,
+  ExpandProps<DragHandleProps>
+>(
   (
     {
       className,
diff --git a/packages/components/entity-list/src/EntityList.tsx b/packages/components/entity-list/src/EntityList.tsx
index 10665338bb..f28dbeae5c 100644
--- a/packages/components/entity-list/src/EntityList.tsx
+++ b/packages/components/entity-list/src/EntityList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { cx } from 'emotion';
-import { CommonProps } from '@contentful/f36-core';
+import { CommonProps, ExpandProps } from '@contentful/f36-core';
 
 import { getEntityListStyles } from './EntityList.styles';
 
@@ -8,7 +8,10 @@ export interface EntityListProps extends CommonProps {
   children?: React.ReactNode;
 }
 
-function _EntityList(props: EntityListProps, ref: React.Ref<HTMLUListElement>) {
+function _EntityList(
+  props: ExpandProps<EntityListProps>,
+  ref: React.Ref<HTMLUListElement>,
+) {
   const styles = getEntityListStyles();
 
   return (
diff --git a/packages/components/forms/src/base-checkbox/BaseCheckbox.tsx b/packages/components/forms/src/base-checkbox/BaseCheckbox.tsx
index 72e7a144c6..0ed1afc69e 100644
--- a/packages/components/forms/src/base-checkbox/BaseCheckbox.tsx
+++ b/packages/components/forms/src/base-checkbox/BaseCheckbox.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef } from 'react';
-import { PropsWithHTMLElement } from '@contentful/f36-core';
+import { PropsWithHTMLElement, ExpandProps } from '@contentful/f36-core';
 import type { BaseCheckboxInternalProps } from './types';
 import { GhostCheckbox } from './GhostCheckbox';
 import getStyles from './BaseCheckbox.styles';
@@ -15,7 +15,7 @@ export type BaseCheckboxProps = PropsWithHTMLElement<
 >;
 
 function _BaseCheckbox(
-  props: BaseCheckboxProps,
+  props: ExpandProps<BaseCheckboxProps>,
   ref: React.RefObject<HTMLInputElement>,
 ) {
   const {
diff --git a/packages/components/forms/src/base-checkbox/BaseCheckboxGroup.tsx b/packages/components/forms/src/base-checkbox/BaseCheckboxGroup.tsx
index e42b4a0f01..ebe8e93475 100644
--- a/packages/components/forms/src/base-checkbox/BaseCheckboxGroup.tsx
+++ b/packages/components/forms/src/base-checkbox/BaseCheckboxGroup.tsx
@@ -1,6 +1,6 @@
 import React, { ChangeEventHandler, FocusEventHandler } from 'react';
 import { Stack } from '@contentful/f36-core';
-import type { CommonProps } from '@contentful/f36-core';
+import type { CommonProps, ExpandProps } from '@contentful/f36-core';
 import { BaseCheckboxGroupContext } from './BaseCheckboxGroupContext';
 
 export interface BaseCheckboxGroupProps extends CommonProps {
@@ -35,7 +35,7 @@ export interface BaseCheckboxGroupProps extends CommonProps {
 }
 
 export const _BaseCheckboxGroup = (
-  props: BaseCheckboxGroupProps,
+  props: ExpandProps<BaseCheckboxGroupProps>,
   ref: React.Ref<HTMLDivElement>,
 ) => {
   const {
diff --git a/packages/components/forms/src/base-input/BaseInput.tsx b/packages/components/forms/src/base-input/BaseInput.tsx
index 0286cd3fdc..da2ce00663 100644
--- a/packages/components/forms/src/base-input/BaseInput.tsx
+++ b/packages/components/forms/src/base-input/BaseInput.tsx
@@ -10,6 +10,7 @@ import {
   PolymorphicProps,
   PolymorphicComponent,
   Box,
+  ExpandProps,
 } from '@contentful/f36-core';
 import getInputStyles from './BaseInput.styles';
 import { BaseInputInternalProps } from './types';
@@ -147,7 +148,7 @@ function _BaseInput<E extends React.ElementType = typeof INPUT_DEFAULT_TAG>(
 }
 
 export const BaseInput: PolymorphicComponent<
-  BaseInputInternalProps,
+  ExpandProps<BaseInputInternalProps>,
   typeof INPUT_DEFAULT_TAG,
   'disabled'
 > = React.forwardRef(_BaseInput);
diff --git a/packages/components/forms/src/checkbox/Checkbox.tsx b/packages/components/forms/src/checkbox/Checkbox.tsx
index e277e2d64f..d2b58102ea 100644
--- a/packages/components/forms/src/checkbox/Checkbox.tsx
+++ b/packages/components/forms/src/checkbox/Checkbox.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
-import { useId } from '@contentful/f36-core';
+import { useId, ExpandProps } from '@contentful/f36-core';
 import { BaseCheckbox, BaseCheckboxProps } from '../base-checkbox';
 import { useFormControl } from '../form-control/FormControlContext';
 import { useBaseCheckboxGroup } from '../base-checkbox/BaseCheckboxGroupContext';
 
 export type CheckboxProps = Omit<BaseCheckboxProps, 'type' | 'size'>;
 
-const _Checkbox = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {
+const _Checkbox = (
+  props: ExpandProps<CheckboxProps>,
+  ref: React.Ref<HTMLInputElement>,
+) => {
   const {
     testId = 'cf-ui-checkbox',
     id,
diff --git a/packages/components/forms/src/checkbox/CheckboxGroup.tsx b/packages/components/forms/src/checkbox/CheckboxGroup.tsx
index 8ad9db676f..fe976cbb33 100644
--- a/packages/components/forms/src/checkbox/CheckboxGroup.tsx
+++ b/packages/components/forms/src/checkbox/CheckboxGroup.tsx
@@ -3,6 +3,7 @@ import {
   BaseCheckboxGroup,
   BaseCheckboxGroupProps,
 } from '../base-checkbox/BaseCheckboxGroup';
+import type { ExpandProps } from '@contentful/f36-core';
 
 export interface CheckboxGroupProps
   extends Omit<BaseCheckboxGroupProps, 'type'> {
@@ -17,7 +18,7 @@ export interface CheckboxGroupProps
 }
 
 export const _CheckboxGroup = (
-  props: CheckboxGroupProps,
+  props: ExpandProps<CheckboxGroupProps>,
   ref: React.Ref<HTMLDivElement>,
 ) => {
   const { children, testId = 'cf-ui-checkbox-group', ...otherProps } = props;
diff --git a/packages/components/forms/src/counter/Counter.tsx b/packages/components/forms/src/counter/Counter.tsx
index 6629fbee17..79c5ed47d5 100644
--- a/packages/components/forms/src/counter/Counter.tsx
+++ b/packages/components/forms/src/counter/Counter.tsx
@@ -1,30 +1,35 @@
 import React, { forwardRef } from 'react';
-import type { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import type {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 import { Text } from '@contentful/f36-typography';
 
 import { useFormControl } from '../form-control/FormControlContext';
 
 export type CounterProps = PropsWithHTMLElement<CommonProps, 'p'>;
 
-export const Counter = forwardRef<HTMLParagraphElement, CounterProps>(
-  ({ testId = 'cf-ui-counter', ...otherProps }, ref) => {
-    const { maxLength, inputValue } = useFormControl({});
-    return (
-      Boolean(maxLength) && (
-        <Text
-          as="p"
-          fontColor="gray700"
-          fontSize="fontSizeM"
-          testId={testId}
-          marginTop="spacingXs"
-          {...otherProps}
-          ref={ref}
-        >
-          {inputValue.length} / {maxLength}
-        </Text>
-      )
-    );
-  },
-);
+export const Counter = forwardRef<
+  HTMLParagraphElement,
+  ExpandProps<CounterProps>
+>(({ testId = 'cf-ui-counter', ...otherProps }, ref) => {
+  const { maxLength, inputValue } = useFormControl({});
+  return (
+    Boolean(maxLength) && (
+      <Text
+        as="p"
+        fontColor="gray700"
+        fontSize="fontSizeM"
+        testId={testId}
+        marginTop="spacingXs"
+        {...otherProps}
+        ref={ref}
+      >
+        {inputValue.length} / {maxLength}
+      </Text>
+    )
+  );
+});
 
 Counter.displayName = 'Counter';
diff --git a/packages/components/forms/src/form-control/FormControl.tsx b/packages/components/forms/src/form-control/FormControl.tsx
index 578561272c..d3e572ec8c 100644
--- a/packages/components/forms/src/form-control/FormControl.tsx
+++ b/packages/components/forms/src/form-control/FormControl.tsx
@@ -5,6 +5,7 @@ import type {
   MarginProps,
   PolymorphicProps,
   PolymorphicComponent,
+  ExpandProps,
 } from '@contentful/f36-core';
 import { Box } from '@contentful/f36-core';
 
@@ -77,6 +78,6 @@ function _FormControl<
 }
 
 export const FormControl: PolymorphicComponent<
-  FormControlInternalProps,
+  ExpandProps<FormControlInternalProps>,
   typeof FORM_CONTROL_DEFAULT_TAG
 > = React.forwardRef(_FormControl);
diff --git a/packages/components/forms/src/form-label/FormLabel.tsx b/packages/components/forms/src/form-label/FormLabel.tsx
index 84adf7abf2..a1218e22ea 100644
--- a/packages/components/forms/src/form-label/FormLabel.tsx
+++ b/packages/components/forms/src/form-label/FormLabel.tsx
@@ -8,6 +8,7 @@ import type {
   MarginProps,
   PolymorphicProps,
   PolymorphicComponent,
+  ExpandProps,
 } from '@contentful/f36-core';
 import { Text } from '@contentful/f36-typography';
 
@@ -91,6 +92,6 @@ function _FormLabel<
 }
 
 export const FormLabel: PolymorphicComponent<
-  FormLabelInternalProps,
+  ExpandProps<FormLabelInternalProps>,
   typeof FORM_LABEL_DEFAULT_TAG
 > = forwardRef(_FormLabel);
diff --git a/packages/components/forms/src/form/Form.tsx b/packages/components/forms/src/form/Form.tsx
index ea44def905..cbffb5a2e0 100644
--- a/packages/components/forms/src/form/Form.tsx
+++ b/packages/components/forms/src/form/Form.tsx
@@ -1,11 +1,20 @@
 import React, { forwardRef, useCallback, FormEvent } from 'react';
 
-import { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 
 export type FormProps = PropsWithHTMLElement<CommonProps, 'form'>;
 
 function _Form(
-  { children, onSubmit, testId = 'cf-ui-form-label', ...otherProps }: FormProps,
+  {
+    children,
+    onSubmit,
+    testId = 'cf-ui-form-label',
+    ...otherProps
+  }: ExpandProps<FormProps>,
   ref: React.Ref<HTMLFormElement>,
 ) {
   const handleSubmit = useCallback(
diff --git a/packages/components/forms/src/help-text/HelpText.tsx b/packages/components/forms/src/help-text/HelpText.tsx
index 9893d1f3d3..fad69e4ccc 100644
--- a/packages/components/forms/src/help-text/HelpText.tsx
+++ b/packages/components/forms/src/help-text/HelpText.tsx
@@ -3,6 +3,7 @@ import {
   CommonProps,
   MarginProps,
   PropsWithHTMLElement,
+  ExpandProps,
 } from '@contentful/f36-core';
 import { Text } from '@contentful/f36-typography';
 import { useFormControl } from '../form-control/FormControlContext';
@@ -17,22 +18,23 @@ export type HelpTextProps = PropsWithHTMLElement<HelpTextInternalProps, 'p'>;
  * `HelpText` is a styled copy block with guidance, placed in the context of form components.
  */
 
-export const HelpText = React.forwardRef<HTMLParagraphElement, HelpTextProps>(
-  ({ testId = 'cf-ui-help-text', ...otherProps }, ref) => {
-    const { id } = useFormControl({});
-    return (
-      <Text
-        as="p"
-        fontColor="gray500"
-        fontSize="fontSizeM"
-        testId={testId}
-        id={`${id}-helptext`}
-        marginTop="spacingXs"
-        {...otherProps}
-        ref={ref}
-      />
-    );
-  },
-);
+export const HelpText = React.forwardRef<
+  HTMLParagraphElement,
+  ExpandProps<HelpTextProps>
+>(({ testId = 'cf-ui-help-text', ...otherProps }, ref) => {
+  const { id } = useFormControl({});
+  return (
+    <Text
+      as="p"
+      fontColor="gray500"
+      fontSize="fontSizeM"
+      testId={testId}
+      id={`${id}-helptext`}
+      marginTop="spacingXs"
+      {...otherProps}
+      ref={ref}
+    />
+  );
+});
 
 HelpText.displayName = 'HelpText';
diff --git a/packages/components/forms/src/radio/Radio.tsx b/packages/components/forms/src/radio/Radio.tsx
index ae0883dcd4..c6092b0c96 100644
--- a/packages/components/forms/src/radio/Radio.tsx
+++ b/packages/components/forms/src/radio/Radio.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useId } from '@contentful/f36-core';
+import { useId, ExpandProps } from '@contentful/f36-core';
 import { BaseCheckbox, BaseCheckboxProps } from '../base-checkbox';
 import { useFormControl } from '../form-control/FormControlContext';
 import { useBaseCheckboxGroup } from '../base-checkbox/BaseCheckboxGroupContext';
@@ -9,7 +9,10 @@ export type RadioProps = Omit<
   'type' | 'isIndeterminate' | 'size'
 >;
 
-const _Radio = (props: RadioProps, ref: React.Ref<HTMLInputElement>) => {
+const _Radio = (
+  props: ExpandProps<RadioProps>,
+  ref: React.Ref<HTMLInputElement>,
+) => {
   const {
     testId = 'cf-ui-radio-button',
     id,
diff --git a/packages/components/forms/src/select/Select.tsx b/packages/components/forms/src/select/Select.tsx
index e762dd637d..660d4f5b76 100644
--- a/packages/components/forms/src/select/Select.tsx
+++ b/packages/components/forms/src/select/Select.tsx
@@ -7,7 +7,11 @@ import React, {
 import { cx } from 'emotion';
 import { ChevronDownIcon } from '@contentful/f36-icons';
 
-import { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 import { useFormControl } from '../form-control/FormControlContext';
 import { getSelectStyles } from './Select.styles';
 
@@ -46,7 +50,7 @@ const _Select = (
     value = undefined,
     defaultValue = undefined,
     ...otherProps
-  }: SelectProps,
+  }: ExpandProps<SelectProps>,
   ref: React.Ref<HTMLSelectElement>,
 ) => {
   const formProps = useFormControl({
diff --git a/packages/components/forms/src/switch/Switch.tsx b/packages/components/forms/src/switch/Switch.tsx
index cb3f26d7a8..d47e6a19f4 100644
--- a/packages/components/forms/src/switch/Switch.tsx
+++ b/packages/components/forms/src/switch/Switch.tsx
@@ -1,10 +1,14 @@
 import React from 'react';
 import { BaseCheckbox, BaseCheckboxProps } from '../base-checkbox';
 import { useFormControl } from '../form-control/FormControlContext';
+import { ExpandProps } from '@contentful/f36-core';
 
 export type SwitchProps = Omit<BaseCheckboxProps, 'type' | 'isIndeterminate'>;
 
-const _Switch = (props: SwitchProps, ref: React.Ref<HTMLInputElement>) => {
+const _Switch = (
+  props: ExpandProps<SwitchProps>,
+  ref: React.Ref<HTMLInputElement>,
+) => {
   const {
     testId = 'cf-ui-switch',
     id,
diff --git a/packages/components/forms/src/text-input/TextInput.tsx b/packages/components/forms/src/text-input/TextInput.tsx
index c30ea5ba26..6da29d68a9 100644
--- a/packages/components/forms/src/text-input/TextInput.tsx
+++ b/packages/components/forms/src/text-input/TextInput.tsx
@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from 'react';
 import { BaseInput } from '../base-input';
 import { TextInputProps } from './types';
 import { useFormControl } from '../form-control/FormControlContext';
+import { ExpandProps } from '@contentful/f36-core';
 
 export const _TextInput = (
   {
@@ -19,7 +20,7 @@ export const _TextInput = (
     size = 'medium',
     maxLength,
     ...otherProps
-  }: TextInputProps,
+  }: ExpandProps<TextInputProps>,
   ref: React.RefObject<HTMLInputElement>,
 ) => {
   const {
diff --git a/packages/components/forms/src/text-input/input-group/InputGroup.tsx b/packages/components/forms/src/text-input/input-group/InputGroup.tsx
index c73915bea5..7630418786 100644
--- a/packages/components/forms/src/text-input/input-group/InputGroup.tsx
+++ b/packages/components/forms/src/text-input/input-group/InputGroup.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { cx } from 'emotion';
-import { Stack } from '@contentful/f36-core';
+import { Stack, ExpandProps } from '@contentful/f36-core';
 import getStyles from './InputGroup.styles';
 import type { InputGroupProps } from './types';
 
 const _InputGroup = (
-  props: InputGroupProps,
+  props: ExpandProps<InputGroupProps>,
   ref: React.Ref<HTMLDivElement>,
 ) => {
   const { children, className, spacing = 'none', ...otherProps } = props;
diff --git a/packages/components/forms/src/textarea/Textarea.tsx b/packages/components/forms/src/textarea/Textarea.tsx
index fa1d5abc8c..f6c102d97d 100644
--- a/packages/components/forms/src/textarea/Textarea.tsx
+++ b/packages/components/forms/src/textarea/Textarea.tsx
@@ -5,6 +5,7 @@ import { BaseInput } from '../base-input';
 import type { BaseInputProps } from '../base-input';
 import { useFormControl } from '../form-control/FormControlContext';
 import { getStyles } from './Textarea.styles';
+import { ExpandProps } from '@contentful/f36-core';
 
 export type TextareaProps = Omit<
   BaseInputProps<'textarea'>,
@@ -24,7 +25,7 @@ const _Textarea = (
     resize = 'vertical',
     maxLength,
     ...otherProps
-  }: TextareaProps,
+  }: ExpandProps<TextareaProps>,
   ref: React.Ref<HTMLTextAreaElement>,
 ) => {
   const styles = getStyles();
diff --git a/packages/components/forms/src/validation-message/ValidationMessage.tsx b/packages/components/forms/src/validation-message/ValidationMessage.tsx
index 954878c026..16de17546a 100644
--- a/packages/components/forms/src/validation-message/ValidationMessage.tsx
+++ b/packages/components/forms/src/validation-message/ValidationMessage.tsx
@@ -4,6 +4,7 @@ import type {
   CommonProps,
   MarginProps,
   PropsWithHTMLElement,
+  ExpandProps,
 } from '@contentful/f36-core';
 import { ErrorCircleOutlineIcon } from '@contentful/f36-icons';
 import { Text } from '@contentful/f36-typography';
@@ -22,7 +23,7 @@ export type ValidationMessageProps = PropsWithHTMLElement<
 
 export const ValidationMessage = forwardRef<
   HTMLDivElement,
-  ValidationMessageProps
+  ExpandProps<ValidationMessageProps>
 >(({ children, testId = 'cf-ui-validation-message', ...otherProps }, ref) => {
   const { id } = useFormControl({});
   return (
diff --git a/packages/components/icon/src/Icon.tsx b/packages/components/icon/src/Icon.tsx
index fb6780fab2..d9d451cd39 100644
--- a/packages/components/icon/src/Icon.tsx
+++ b/packages/components/icon/src/Icon.tsx
@@ -6,6 +6,7 @@ import type {
   CommonProps,
   PolymorphicComponent,
   PolymorphicProps,
+  ExpandProps,
 } from '@contentful/f36-core';
 import type {
   ComponentType,
@@ -161,7 +162,7 @@ export function _Icon<E extends React.ElementType = IconComponent>(
 }
 
 export const Icon: PolymorphicComponent<
-  IconInternalProps,
+  ExpandProps<IconInternalProps>,
   typeof ICON_DEFAULT_TAG,
   'width' | 'height'
 > = forwardRef(_Icon);
diff --git a/packages/components/list/src/List.tsx b/packages/components/list/src/List.tsx
index bf01603468..e239ebba4c 100644
--- a/packages/components/list/src/List.tsx
+++ b/packages/components/list/src/List.tsx
@@ -5,6 +5,7 @@ import {
   CommonProps,
   PolymorphicProps,
   PolymorphicComponent,
+  ExpandProps,
 } from '@contentful/f36-core';
 
 const LIST_DEFAULT_TAG = 'ul';
@@ -52,6 +53,6 @@ function _List<E extends React.ElementType = typeof LIST_DEFAULT_TAG>(
 }
 
 export const List: PolymorphicComponent<
-  ListInternalProps,
+  ExpandProps<ListInternalProps>,
   typeof LIST_DEFAULT_TAG
 > = React.forwardRef(_List);
diff --git a/packages/components/menu/src/MenuDivider/MenuDivider.tsx b/packages/components/menu/src/MenuDivider/MenuDivider.tsx
index 2e0dd85cd2..6797eea41e 100644
--- a/packages/components/menu/src/MenuDivider/MenuDivider.tsx
+++ b/packages/components/menu/src/MenuDivider/MenuDivider.tsx
@@ -1,11 +1,15 @@
 import React from 'react';
-import { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 import { cx } from 'emotion';
 import { getMenuDividerStyles } from './MenuDivider.styles';
 
 export type MenuDividerProps = PropsWithHTMLElement<CommonProps, 'hr'>;
 
-export const MenuDivider = (props: MenuDividerProps) => {
+export const MenuDivider = (props: ExpandProps<MenuDividerProps>) => {
   const {
     children,
     testId = 'cf-ui-menu-divider',
diff --git a/packages/components/menu/src/MenuItem/MenuItem.tsx b/packages/components/menu/src/MenuItem/MenuItem.tsx
index a9b6f4d1cf..29556fa3d9 100644
--- a/packages/components/menu/src/MenuItem/MenuItem.tsx
+++ b/packages/components/menu/src/MenuItem/MenuItem.tsx
@@ -5,6 +5,7 @@ import {
   mergeRefs,
   PolymorphicComponent,
   PolymorphicProps,
+  ExpandProps,
 } from '@contentful/f36-core';
 import { useMenuContext } from '../MenuContext';
 import { useId } from '@contentful/f36-core';
@@ -63,6 +64,6 @@ function _MenuItem<E extends React.ElementType = typeof MENU_ITEM_DEFAULT_TAG>(
 }
 
 export const MenuItem: PolymorphicComponent<
-  MenuItemInternalProps,
+  ExpandProps<MenuItemInternalProps>,
   typeof MENU_ITEM_DEFAULT_TAG
 > = React.forwardRef(_MenuItem);
diff --git a/packages/components/menu/src/MenuList/MenuList.tsx b/packages/components/menu/src/MenuList/MenuList.tsx
index 22e2609bbf..51e085835b 100644
--- a/packages/components/menu/src/MenuList/MenuList.tsx
+++ b/packages/components/menu/src/MenuList/MenuList.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
-import { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 import { useMenuContext } from '../MenuContext';
 import { useSubmenuContext } from '../SubmenuContext';
 import { Popover } from '@contentful/f36-popover';
@@ -18,7 +22,10 @@ function assertChild(child: any): child is { type: { displayName: string } } {
 
 export type MenuListProps = PropsWithHTMLElement<MenuListInternalProps, 'div'>;
 
-const _MenuList = (props: MenuListProps, ref: React.Ref<HTMLDivElement>) => {
+const _MenuList = (
+  props: ExpandProps<MenuListProps>,
+  ref: React.Ref<HTMLDivElement>,
+) => {
   const {
     children,
     testId = 'cf-ui-menu-list',
diff --git a/packages/components/menu/src/MenuList/MenuListFooter.tsx b/packages/components/menu/src/MenuList/MenuListFooter.tsx
index 92a34940a8..18bac2a305 100644
--- a/packages/components/menu/src/MenuList/MenuListFooter.tsx
+++ b/packages/components/menu/src/MenuList/MenuListFooter.tsx
@@ -1,12 +1,18 @@
 import React from 'react';
 import { cx } from 'emotion';
-import type { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import type {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 
 import { getMenuFooterStyles } from './MenuList.styles';
 
 export type MenuListFooterProps = PropsWithHTMLElement<CommonProps, 'div'>;
 
-export const MenuListFooter: React.FC<MenuListFooterProps> = (props) => {
+export const MenuListFooter: React.FC<ExpandProps<MenuListFooterProps>> = (
+  props,
+) => {
   const {
     children,
     testId = 'cf-ui-menu-list-footer',
diff --git a/packages/components/menu/src/MenuList/MenuListHeader.tsx b/packages/components/menu/src/MenuList/MenuListHeader.tsx
index a18debd3af..d825c9dde9 100644
--- a/packages/components/menu/src/MenuList/MenuListHeader.tsx
+++ b/packages/components/menu/src/MenuList/MenuListHeader.tsx
@@ -1,12 +1,18 @@
 import React from 'react';
 import { cx } from 'emotion';
-import type { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import type {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 
 import { getMenuHeaderStyles } from './MenuList.styles';
 
 export type MenuListHeaderProps = PropsWithHTMLElement<CommonProps, 'div'>;
 
-export const MenuListHeader: React.FC<MenuListHeaderProps> = (props) => {
+export const MenuListHeader: React.FC<ExpandProps<MenuListHeaderProps>> = (
+  props,
+) => {
   const {
     children,
     testId = 'cf-ui-menu-list-header',
diff --git a/packages/components/menu/src/MenuSectionTitle/MenuSectionTitle.tsx b/packages/components/menu/src/MenuSectionTitle/MenuSectionTitle.tsx
index cb470ea83b..0dc89c945a 100644
--- a/packages/components/menu/src/MenuSectionTitle/MenuSectionTitle.tsx
+++ b/packages/components/menu/src/MenuSectionTitle/MenuSectionTitle.tsx
@@ -5,10 +5,11 @@ import {
   SectionHeading,
   SectionHeadingProps,
 } from '@contentful/f36-typography';
+import { ExpandProps } from '@contentful/f36-core';
 
 export type MenuSectionTitleProps = SectionHeadingProps;
 
-export const MenuSectionTitle = (props: MenuSectionTitleProps) => {
+export const MenuSectionTitle = (props: ExpandProps<MenuSectionTitleProps>) => {
   const {
     children,
     testId = 'cf-ui-menu-section-title',
diff --git a/packages/components/menu/src/MenuTrigger/MenuTrigger.tsx b/packages/components/menu/src/MenuTrigger/MenuTrigger.tsx
index 015cd717f5..4e4e60ff44 100644
--- a/packages/components/menu/src/MenuTrigger/MenuTrigger.tsx
+++ b/packages/components/menu/src/MenuTrigger/MenuTrigger.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { Popover } from '@contentful/f36-popover';
 import { useMenuContext } from '../MenuContext';
+import { ExpandProps } from '@contentful/f36-core';
 
 export interface MenuTriggerProps {
   children: React.ReactNode;
 }
 
-export const MenuTrigger = (props: MenuTriggerProps) => {
+export const MenuTrigger = (props: ExpandProps<MenuTriggerProps>) => {
   const child = React.Children.only(props.children) as any;
   const { getTriggerProps } = useMenuContext();
 
diff --git a/packages/components/menu/src/SubmenuTrigger/SubmenuTrigger.tsx b/packages/components/menu/src/SubmenuTrigger/SubmenuTrigger.tsx
index 1effd148e2..670555ca77 100644
--- a/packages/components/menu/src/SubmenuTrigger/SubmenuTrigger.tsx
+++ b/packages/components/menu/src/SubmenuTrigger/SubmenuTrigger.tsx
@@ -3,6 +3,7 @@ import { MenuTrigger } from '../MenuTrigger/MenuTrigger';
 import { MenuItem, MenuItemProps } from '../MenuItem/MenuItem';
 import { useSubmenuContext } from '../SubmenuContext';
 import { ChevronRightIcon } from '@contentful/f36-icons';
+import { ExpandProps } from '@contentful/f36-core';
 import { cx } from 'emotion';
 import { getSubmenuTriggerStyles } from './SubmenuTrigger.styles';
 
@@ -12,7 +13,7 @@ export type SubmenuTriggerProps = Omit<
 >;
 
 const _SubmenuTrigger = (
-  props: SubmenuTriggerProps,
+  props: ExpandProps<SubmenuTriggerProps>,
   ref: React.Ref<HTMLButtonElement>,
 ) => {
   const { className, children } = props;
diff --git a/packages/components/note/src/Note.tsx b/packages/components/note/src/Note.tsx
index d4a3af8a74..aeefe308e0 100644
--- a/packages/components/note/src/Note.tsx
+++ b/packages/components/note/src/Note.tsx
@@ -1,7 +1,11 @@
 import { cx } from 'emotion';
 import React from 'react';
 import { Flex } from '@contentful/f36-core';
-import type { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import type {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 import { Button } from '@contentful/f36-button';
 import { Heading, Text } from '@contentful/f36-typography';
 import {
@@ -52,59 +56,64 @@ export type NoteProps = PropsWithHTMLElement<NoteInternalProps, 'article'>;
 /**
  * @description: Note provides context and information about a situation or action.
  */
-export const Note = React.forwardRef<HTMLElement, NoteProps>((props, ref) => {
-  const {
-    children,
-    className,
-    withCloseButton = false,
-    variant = 'primary',
-    onClose,
-    testId = 'cf-ui-note',
-    title,
-    ...otherProps
-  } = props;
+export const Note = React.forwardRef<HTMLElement, ExpandProps<NoteProps>>(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      withCloseButton = false,
+      variant = 'primary',
+      onClose,
+      testId = 'cf-ui-note',
+      title,
+      ...otherProps
+    } = props;
 
-  const styles = getNoteStyles();
+    const styles = getNoteStyles();
 
-  return (
-    <Flex
-      {...otherProps}
-      as="article"
-      className={cx(styles.container({ variant, withCloseButton }), className)}
-      testId={testId}
-      ref={ref}
-      padding="spacingM"
-      alignItems="flex-start"
-    >
-      <Flex marginRight="spacingS">
-        <Icon
-          as={icons[variant]}
-          variant={variant}
-          size={title ? 'medium' : 'small'}
-        />
-      </Flex>
-      <div>
-        {title && (
-          <Heading as="h2" className={styles.title}>
-            {title}
-          </Heading>
+    return (
+      <Flex
+        {...otherProps}
+        as="article"
+        className={cx(
+          styles.container({ variant, withCloseButton }),
+          className,
+        )}
+        testId={testId}
+        ref={ref}
+        padding="spacingM"
+        alignItems="flex-start"
+      >
+        <Flex marginRight="spacingS">
+          <Icon
+            as={icons[variant]}
+            variant={variant}
+            size={title ? 'medium' : 'small'}
+          />
+        </Flex>
+        <div>
+          {title && (
+            <Heading as="h2" className={styles.title}>
+              {title}
+            </Heading>
+          )}
+          <Text as="p" lineHeight="lineHeightM" className={styles.description}>
+            {children}
+          </Text>
+        </div>
+        {withCloseButton && (
+          <Button
+            variant="transparent"
+            startIcon={<CloseIcon className={styles.closeIcon} />}
+            onClick={onClose}
+            testId={`${testId}-close`}
+            aria-label="Dismiss"
+            className={styles.close}
+          />
         )}
-        <Text as="p" lineHeight="lineHeightM" className={styles.description}>
-          {children}
-        </Text>
-      </div>
-      {withCloseButton && (
-        <Button
-          variant="transparent"
-          startIcon={<CloseIcon className={styles.closeIcon} />}
-          onClick={onClose}
-          testId={`${testId}-close`}
-          aria-label="Dismiss"
-          className={styles.close}
-        />
-      )}
-    </Flex>
-  );
-});
+      </Flex>
+    );
+  },
+);
 
 Note.displayName = 'Note';
diff --git a/packages/components/notification/src/NotificationItem/NotificationItem.tsx b/packages/components/notification/src/NotificationItem/NotificationItem.tsx
index 88f0676f2e..c08af46032 100644
--- a/packages/components/notification/src/NotificationItem/NotificationItem.tsx
+++ b/packages/components/notification/src/NotificationItem/NotificationItem.tsx
@@ -9,7 +9,7 @@ import {
 
 import { Button } from '@contentful/f36-button';
 import { TextLink } from '@contentful/f36-text-link';
-import { CommonProps, Flex, Box } from '@contentful/f36-core';
+import { CommonProps, Flex, Box, ExpandProps } from '@contentful/f36-core';
 import { Heading, Paragraph } from '@contentful/f36-typography';
 
 import { NotificationVariant, NotificationCta } from '../types';
@@ -44,7 +44,7 @@ export interface NotificationItemProps extends CommonProps {
   cta?: Partial<NotificationCta>;
 }
 
-const _NotificationItem = (props: NotificationItemProps, ref) => {
+const _NotificationItem = (props: ExpandProps<NotificationItemProps>, ref) => {
   const {
     className,
     children,
diff --git a/packages/components/pill/src/Pill.tsx b/packages/components/pill/src/Pill.tsx
index a2de893544..55d9cdb75f 100644
--- a/packages/components/pill/src/Pill.tsx
+++ b/packages/components/pill/src/Pill.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 import { cx } from 'emotion';
-import type { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import type {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 import { DragIcon, CloseIcon } from '@contentful/f36-icons';
 import { Button } from '@contentful/f36-button';
 import { PillVariants } from './types';
@@ -32,7 +36,7 @@ export type PillInternalProps = CommonProps & {
 
 export type PillProps = PropsWithHTMLElement<PillInternalProps, 'div'>;
 
-export const Pill = React.forwardRef<HTMLDivElement, PillProps>(
+export const Pill = React.forwardRef<HTMLDivElement, ExpandProps<PillProps>>(
   (props, ref) => {
     const {
       label,
diff --git a/packages/components/popover/src/Popover.tsx b/packages/components/popover/src/Popover.tsx
index 3f49f722fb..9175f11c97 100644
--- a/packages/components/popover/src/Popover.tsx
+++ b/packages/components/popover/src/Popover.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
-import { useId, mergeRefs } from '@contentful/f36-core';
+import { useId, mergeRefs, ExpandProps } from '@contentful/f36-core';
 import { Placement, Modifier } from '@popperjs/core';
 import { PopoverContextProvider, PopoverContextType } from './PopoverContext';
 import { usePopper } from 'react-popper';
@@ -97,7 +97,7 @@ export interface PopoverProps {
   offset?: [number, number];
 }
 
-export function Popover(props: PopoverProps) {
+export function Popover(props: ExpandProps<PopoverProps>) {
   const {
     children,
     isOpen,
diff --git a/packages/components/popover/src/PopoverContent/PopoverContent.tsx b/packages/components/popover/src/PopoverContent/PopoverContent.tsx
index a73f55ad2f..4c20dd96bc 100644
--- a/packages/components/popover/src/PopoverContent/PopoverContent.tsx
+++ b/packages/components/popover/src/PopoverContent/PopoverContent.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 import { cx } from 'emotion';
-import { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 import { usePopoverContext } from '../PopoverContext';
 import { Portal } from '@contentful/f36-utils';
 import { getPopoverContentStyles } from './PopoverContent.styles';
@@ -14,7 +18,7 @@ export type PopoverContentProps = PropsWithHTMLElement<
   'div'
 >;
 
-const _PopoverContent = (props: PopoverContentProps, ref) => {
+const _PopoverContent = (props: ExpandProps<PopoverContentProps>, ref) => {
   const {
     children,
     className,
diff --git a/packages/components/spinner/src/Spinner.tsx b/packages/components/spinner/src/Spinner.tsx
index ebbe8a4972..acd0cfe1f3 100644
--- a/packages/components/spinner/src/Spinner.tsx
+++ b/packages/components/spinner/src/Spinner.tsx
@@ -2,7 +2,11 @@ import { cx, css } from 'emotion';
 import React, { forwardRef } from 'react';
 import tokens from '@contentful/f36-tokens';
 import { Box } from '@contentful/f36-core';
-import type { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import type {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 import type { SpinnerSize, SpinnerVariant } from './types';
 import { getStyles } from './Spinner.styles';
 
@@ -32,7 +36,7 @@ export type SpinnerInternalProps = CommonProps & {
 
 export type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;
 
-export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
+export const Spinner = forwardRef<HTMLDivElement, ExpandProps<SpinnerProps>>(
   (
     {
       className,
diff --git a/packages/components/table/src/Table.tsx b/packages/components/table/src/Table.tsx
index b0bf6e9d5d..4fcba2851a 100644
--- a/packages/components/table/src/Table.tsx
+++ b/packages/components/table/src/Table.tsx
@@ -1,7 +1,7 @@
 import { cx, css } from 'emotion';
 import React, { forwardRef } from 'react';
 import { Box, CommonProps } from '@contentful/f36-core';
-import type { PropsWithHTMLElement } from '@contentful/f36-core';
+import type { PropsWithHTMLElement, ExpandProps } from '@contentful/f36-core';
 import tokens from '@contentful/f36-tokens';
 
 const getStyles = () => {
@@ -34,7 +34,7 @@ export type TableInternalProps = CommonProps & {
 
 export type TableProps = PropsWithHTMLElement<TableInternalProps, 'table'>;
 
-export const Table = forwardRef<HTMLTableElement, TableProps>(
+export const Table = forwardRef<HTMLTableElement, ExpandProps<TableProps>>(
   (
     {
       children,
diff --git a/packages/components/table/src/TableBody.tsx b/packages/components/table/src/TableBody.tsx
index 322d25bab9..fdf484dedf 100644
--- a/packages/components/table/src/TableBody.tsx
+++ b/packages/components/table/src/TableBody.tsx
@@ -1,7 +1,11 @@
 import React, { forwardRef } from 'react';
 import type { ReactElement } from 'react';
 import { Box } from '@contentful/f36-core';
-import type { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import type {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 
 export type TableBodyInternalProps = CommonProps & {
   children: ReactElement | ReactElement[];
@@ -12,21 +16,22 @@ export type TableBodyProps = PropsWithHTMLElement<
   'tbody'
 >;
 
-export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
-  function TableBody(
-    { className, children, testId = 'cf-ui-table-body', ...otherProps },
-    forwardedRef,
-  ) {
-    return (
-      <Box
-        {...otherProps}
-        as="tbody"
-        className={className}
-        ref={forwardedRef}
-        testId={testId}
-      >
-        {children}
-      </Box>
-    );
-  },
-);
+export const TableBody = forwardRef<
+  HTMLTableSectionElement,
+  ExpandProps<TableBodyProps>
+>(function TableBody(
+  { className, children, testId = 'cf-ui-table-body', ...otherProps },
+  forwardedRef,
+) {
+  return (
+    <Box
+      {...otherProps}
+      as="tbody"
+      className={className}
+      ref={forwardedRef}
+      testId={testId}
+    >
+      {children}
+    </Box>
+  );
+});
diff --git a/packages/components/table/src/TableCell.tsx b/packages/components/table/src/TableCell.tsx
index 0ca399bfa9..7d0918212f 100644
--- a/packages/components/table/src/TableCell.tsx
+++ b/packages/components/table/src/TableCell.tsx
@@ -2,7 +2,11 @@ import { css, cx } from 'emotion';
 import React, { forwardRef } from 'react';
 import tokens from '@contentful/f36-tokens';
 import { Box } from '@contentful/f36-core';
-import type { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import type {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 
 import { TableCellContext } from './tableCellContext';
 
@@ -25,7 +29,10 @@ export type TableCellProps = PropsWithHTMLElement<
   'th' | 'td'
 >;
 
-export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
+export const TableCell = forwardRef<
+  HTMLTableCellElement,
+  ExpandProps<TableCellProps>
+>(
   (
     {
       align = 'left',
diff --git a/packages/components/table/src/TableHead.tsx b/packages/components/table/src/TableHead.tsx
index 9ce2bc8004..ff97e4ed3b 100644
--- a/packages/components/table/src/TableHead.tsx
+++ b/packages/components/table/src/TableHead.tsx
@@ -1,7 +1,11 @@
 import { css, cx } from 'emotion';
 import React, { forwardRef } from 'react';
 import { Box } from '@contentful/f36-core';
-import type { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import type {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 import tokens from '@contentful/f36-tokens';
 
 import { TableCellContext, contextOptions } from './';
@@ -17,7 +21,10 @@ export type TableHeadProps = PropsWithHTMLElement<
   'thead'
 >;
 
-export const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
+export const TableHead = forwardRef<
+  HTMLTableSectionElement,
+  ExpandProps<TableHeadProps>
+>(
   (
     {
       children,
diff --git a/packages/components/table/src/TableRow.tsx b/packages/components/table/src/TableRow.tsx
index 8369a1dad9..199c1e5b59 100644
--- a/packages/components/table/src/TableRow.tsx
+++ b/packages/components/table/src/TableRow.tsx
@@ -2,7 +2,11 @@ import { css, cx } from 'emotion';
 import React, { forwardRef } from 'react';
 import tokens from '@contentful/f36-tokens';
 import { Box } from '@contentful/f36-core';
-import type { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import type {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 
 const getStyles = () => {
   return {
@@ -32,7 +36,10 @@ export type TableRowInternalProps = CommonProps & {
 
 export type TableRowProps = PropsWithHTMLElement<TableRowInternalProps, 'tr'>;
 
-export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+export const TableRow = forwardRef<
+  HTMLTableRowElement,
+  ExpandProps<TableRowProps>
+>(
   (
     {
       className,
diff --git a/packages/components/tabs/src/Tabs.tsx b/packages/components/tabs/src/Tabs.tsx
index b049d41bbc..19f09ddb6c 100644
--- a/packages/components/tabs/src/Tabs.tsx
+++ b/packages/components/tabs/src/Tabs.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CommonProps } from '@contentful/f36-core';
+import type { CommonProps, ExpandProps } from '@contentful/f36-core';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import { getTabsStyles, getTabStyles, getTabPanelStyles } from './Tabs.styles';
 
@@ -10,7 +10,7 @@ export interface TabsProps extends CommonProps {
   onTabChange?: (tab: string) => void;
 }
 
-export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
+export const Tabs = React.forwardRef<HTMLDivElement, ExpandProps<TabsProps>>(
   (props, ref) => {
     const {
       defaultTab,
@@ -50,31 +50,32 @@ export interface TabListProps extends CommonProps {
   children?: React.ReactNode;
 }
 
-export const TabList = React.forwardRef<HTMLDivElement, TabListProps>(
-  (props, ref) => {
-    const {
-      className,
-      variant,
-      children,
-      testId = 'cf-ui-tab-list',
-      ...otherProps
-    } = props;
-    const styles = getTabsStyles({
-      className,
-      variant,
-    });
-    return (
-      <RadixTabs.List
-        {...otherProps}
-        data-test-id={testId}
-        className={styles.tabList}
-        ref={ref}
-      >
-        {children}
-      </RadixTabs.List>
-    );
-  },
-);
+export const TabList = React.forwardRef<
+  HTMLDivElement,
+  ExpandProps<TabListProps>
+>((props, ref) => {
+  const {
+    className,
+    variant,
+    children,
+    testId = 'cf-ui-tab-list',
+    ...otherProps
+  } = props;
+  const styles = getTabsStyles({
+    className,
+    variant,
+  });
+  return (
+    <RadixTabs.List
+      {...otherProps}
+      data-test-id={testId}
+      className={styles.tabList}
+      ref={ref}
+    >
+      {children}
+    </RadixTabs.List>
+  );
+});
 TabList.displayName = 'TabList';
 
 export interface TabPanelProps extends CommonProps {
@@ -82,25 +83,26 @@ export interface TabPanelProps extends CommonProps {
   children: React.ReactNode;
 }
 
-export const TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(
-  (props, ref) => {
-    const {
-      children,
-      testId = 'cf-ui-tab-panel',
-      id,
-      className,
-      ...otherProps
-    } = props;
-    const styles = getTabPanelStyles({ className });
-    return (
-      <RadixTabs.Content data-test-id={testId} value={id} asChild>
-        <div {...otherProps} ref={ref} className={styles.tabPanel}>
-          {children}
-        </div>
-      </RadixTabs.Content>
-    );
-  },
-);
+export const TabPanel = React.forwardRef<
+  HTMLDivElement,
+  ExpandProps<TabPanelProps>
+>((props, ref) => {
+  const {
+    children,
+    testId = 'cf-ui-tab-panel',
+    id,
+    className,
+    ...otherProps
+  } = props;
+  const styles = getTabPanelStyles({ className });
+  return (
+    <RadixTabs.Content data-test-id={testId} value={id} asChild>
+      <div {...otherProps} ref={ref} className={styles.tabPanel}>
+        {children}
+      </div>
+    </RadixTabs.Content>
+  );
+});
 TabPanel.displayName = 'TabPanel';
 
 export interface TabProps extends CommonProps {
@@ -115,29 +117,31 @@ export interface TabProps extends CommonProps {
   children: React.ReactNode;
 }
 
-export const Tab = React.forwardRef<HTMLDivElement, TabProps>((props, ref) => {
-  const {
-    children,
-    testId = 'cf-ui-tab',
-    panelId,
-    isDisabled,
-    className,
-    ...otherProps
-  } = props;
+export const Tab = React.forwardRef<HTMLDivElement, ExpandProps<TabProps>>(
+  (props, ref) => {
+    const {
+      children,
+      testId = 'cf-ui-tab',
+      panelId,
+      isDisabled,
+      className,
+      ...otherProps
+    } = props;
 
-  const styles = getTabStyles({ className, isDisabled });
-  return (
-    <RadixTabs.Trigger
-      disabled={isDisabled}
-      value={panelId}
-      data-test-id={testId}
-      asChild
-    >
-      <div {...otherProps} className={styles.tab} ref={ref}>
-        <span>{children}</span>
-      </div>
-    </RadixTabs.Trigger>
-  );
-});
+    const styles = getTabStyles({ className, isDisabled });
+    return (
+      <RadixTabs.Trigger
+        disabled={isDisabled}
+        value={panelId}
+        data-test-id={testId}
+        asChild
+      >
+        <div {...otherProps} className={styles.tab} ref={ref}>
+          <span>{children}</span>
+        </div>
+      </RadixTabs.Trigger>
+    );
+  },
+);
 
 Tab.displayName = 'Tab';
diff --git a/packages/components/text-link/src/TextLink.tsx b/packages/components/text-link/src/TextLink.tsx
index fa35f1e4e6..a7d5e67f43 100644
--- a/packages/components/text-link/src/TextLink.tsx
+++ b/packages/components/text-link/src/TextLink.tsx
@@ -5,6 +5,7 @@ import {
   CommonProps,
   PolymorphicProps,
   PolymorphicComponent,
+  ExpandProps,
 } from '@contentful/f36-core';
 import { styles } from './TextLink.styles';
 import { TextLinkVariant } from './types';
@@ -125,7 +126,7 @@ function _TextLink<E extends React.ElementType = typeof TEX_LINK_DEFAULT_TAG>(
 }
 
 export const TextLink: PolymorphicComponent<
-  TextLinkInternalProps,
+  ExpandProps<TextLinkInternalProps>,
   typeof TEX_LINK_DEFAULT_TAG,
   'disabled'
 > = React.forwardRef(_TextLink);
diff --git a/packages/components/typography/src/DisplayText.tsx b/packages/components/typography/src/DisplayText.tsx
index 1675c72e42..00aa241a59 100644
--- a/packages/components/typography/src/DisplayText.tsx
+++ b/packages/components/typography/src/DisplayText.tsx
@@ -5,6 +5,7 @@ import {
   MarginProps,
   PolymorphicComponent,
   PolymorphicProps,
+  ExpandProps,
 } from '@contentful/f36-core';
 import { Text } from './Text';
 import type { HeadingElement } from './Heading';
@@ -61,6 +62,6 @@ function _DisplayText<
 }
 
 export const DisplayText: PolymorphicComponent<
-  DisplayTextInternalProps,
+  ExpandProps<DisplayTextInternalProps>,
   typeof DISPLAY_TEXT_DEFAULT_TAG
 > = React.forwardRef(_DisplayText);
diff --git a/packages/components/typography/src/Heading.tsx b/packages/components/typography/src/Heading.tsx
index 0b62a4bef3..d2e2885869 100644
--- a/packages/components/typography/src/Heading.tsx
+++ b/packages/components/typography/src/Heading.tsx
@@ -4,6 +4,7 @@ import {
   MarginProps,
   PolymorphicComponent,
   PolymorphicProps,
+  ExpandProps,
 } from '@contentful/f36-core';
 import { Text } from './Text';
 
@@ -43,6 +44,6 @@ function _Heading<E extends React.ElementType = typeof HEADING_DEFAULT_TAG>(
 }
 
 export const Heading: PolymorphicComponent<
-  HeadingInternalProps,
+  ExpandProps<HeadingInternalProps>,
   typeof HEADING_DEFAULT_TAG
 > = React.forwardRef(_Heading);
diff --git a/packages/components/typography/src/Paragraph.tsx b/packages/components/typography/src/Paragraph.tsx
index 068b69b917..e4f3b82549 100644
--- a/packages/components/typography/src/Paragraph.tsx
+++ b/packages/components/typography/src/Paragraph.tsx
@@ -3,6 +3,7 @@ import {
   PropsWithHTMLElement,
   CommonProps,
   MarginProps,
+  ExpandProps,
 } from '@contentful/f36-core';
 import { Text } from './Text';
 
@@ -14,21 +15,22 @@ export type ParagraphInternalProps = CommonProps &
 
 export type ParagraphProps = PropsWithHTMLElement<ParagraphInternalProps, 'p'>;
 
-export const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
-  ({ children, testId = 'cf-ui-paragraph', ...otherProps }, ref) => {
-    return (
-      <Text
-        as="p"
-        testId={testId}
-        marginBottom="spacingM"
-        lineHeight="lineHeightM"
-        {...otherProps}
-        ref={ref}
-      >
-        {children}
-      </Text>
-    );
-  },
-);
+export const Paragraph = React.forwardRef<
+  HTMLParagraphElement,
+  ExpandProps<ParagraphProps>
+>(({ children, testId = 'cf-ui-paragraph', ...otherProps }, ref) => {
+  return (
+    <Text
+      as="p"
+      testId={testId}
+      marginBottom="spacingM"
+      lineHeight="lineHeightM"
+      {...otherProps}
+      ref={ref}
+    >
+      {children}
+    </Text>
+  );
+});
 
 Paragraph.displayName = 'Paragraph';
diff --git a/packages/components/typography/src/SectionHeading.tsx b/packages/components/typography/src/SectionHeading.tsx
index 1da18146b8..784ba09337 100644
--- a/packages/components/typography/src/SectionHeading.tsx
+++ b/packages/components/typography/src/SectionHeading.tsx
@@ -6,6 +6,7 @@ import {
   MarginProps,
   PolymorphicComponent,
   PolymorphicProps,
+  ExpandProps,
 } from '@contentful/f36-core';
 import type { HeadingElement } from './Heading';
 import { Text } from './Text';
@@ -57,6 +58,6 @@ function _SectionHeading<
 }
 
 export const SectionHeading: PolymorphicComponent<
-  SectionHeadingInternalProps,
+  ExpandProps<SectionHeadingInternalProps>,
   typeof SECTION_HEADING_DEFAULT_TAG
 > = React.forwardRef(_SectionHeading);
diff --git a/packages/components/typography/src/Subheading.tsx b/packages/components/typography/src/Subheading.tsx
index f7831238b9..0906933345 100644
--- a/packages/components/typography/src/Subheading.tsx
+++ b/packages/components/typography/src/Subheading.tsx
@@ -4,6 +4,7 @@ import {
   MarginProps,
   PolymorphicComponent,
   PolymorphicProps,
+  ExpandProps,
 } from '@contentful/f36-core';
 import type { HeadingElement } from './Heading';
 import { Text } from './Text';
@@ -43,6 +44,6 @@ function _Subheading<
 }
 
 export const Subheading: PolymorphicComponent<
-  SubheadingInternalProps,
+  ExpandProps<SubheadingInternalProps>,
   typeof SUBHEADING_DEFAULT_TAG
 > = React.forwardRef(_Subheading);
diff --git a/packages/components/typography/src/Text.tsx b/packages/components/typography/src/Text.tsx
index 2948a61827..4be0297926 100644
--- a/packages/components/typography/src/Text.tsx
+++ b/packages/components/typography/src/Text.tsx
@@ -13,6 +13,7 @@ import {
   MarginProps,
   PolymorphicProps,
   Box,
+  ExpandProps,
 } from '@contentful/f36-core';
 
 export interface TextInternalProps extends CommonProps, MarginProps {
@@ -82,6 +83,6 @@ function _Text<E extends React.ElementType = typeof TEXT_DEFAULT_TAG>(
 }
 
 export const Text: PolymorphicComponent<
-  TextInternalProps,
+  ExpandProps<TextInternalProps>,
   typeof TEXT_DEFAULT_TAG
 > = React.forwardRef(_Text);

From 3aa1b94af9b9a5bd43672e87f51180a29441a535 Mon Sep 17 00:00:00 2001
From: Renato Massao Yonamine <massao.yonamine@contentful.com>
Date: Wed, 8 Dec 2021 15:55:41 +0100
Subject: [PATCH 4/6] refactor: add short description to ExpandProps

---
 packages/core/src/Primitive/Primitive.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/core/src/Primitive/Primitive.tsx b/packages/core/src/Primitive/Primitive.tsx
index 5e2b6362c4..5ab91eb30d 100644
--- a/packages/core/src/Primitive/Primitive.tsx
+++ b/packages/core/src/Primitive/Primitive.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
 
+/**
+ * Expand object types to show the contents not the name of the type.
+ * Should be used when using React.ForwardRef to show list of props
+ */
 export type ExpandProps<T> = T extends object
   ? T extends infer O
     ? { [K in keyof O]: O[K] }

From 4d0c3dcbeed8fb80102d26d2662d253d5a943dd0 Mon Sep 17 00:00:00 2001
From: Renato Massao Yonamine <massao.yonamine@contentful.com>
Date: Wed, 8 Dec 2021 16:13:48 +0100
Subject: [PATCH 5/6] refactor: revert change on code

---
 packages/components/badge/src/Badge.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/components/badge/src/Badge.tsx b/packages/components/badge/src/Badge.tsx
index 0fc745cd0c..aefdb1baf0 100644
--- a/packages/components/badge/src/Badge.tsx
+++ b/packages/components/badge/src/Badge.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import { cx } from 'emotion';
 import { Box } from '@contentful/f36-core';
-import type { CommonProps, ExpandProps } from '@contentful/f36-core';
+import type {
+  CommonProps,
+  PropsWithHTMLElement,
+  ExpandProps,
+} from '@contentful/f36-core';
 
 import type { BadgeSize, BadgeVariant } from './types';
 import { getBadgeStyles } from './getBadgeStyles';
@@ -21,6 +25,8 @@ export interface BadgeInternalProps extends CommonProps {
   children: React.ReactNode;
 }
 
+export type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;
+
 export const Badge = React.forwardRef<
   HTMLDivElement,
   ExpandProps<BadgeInternalProps>

From 751e39d3a2d2448133140914b3df8d08cf19e2dc Mon Sep 17 00:00:00 2001
From: Renato Massao Yonamine <massao.yonamine@contentful.com>
Date: Wed, 8 Dec 2021 18:25:18 +0100
Subject: [PATCH 6/6] refactor: fix issue with types when Expanded

---
 packages/components/badge/src/Badge.tsx       | 49 +++++++++----------
 .../badge/src/EntityStatusBadge.tsx           | 20 ++++----
 packages/components/forms/src/index.ts        |  2 +-
 .../src/text-input/input-group/InputGroup.tsx | 13 ++++-
 .../forms/src/text-input/input-group/types.ts | 10 ----
 5 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/packages/components/badge/src/Badge.tsx b/packages/components/badge/src/Badge.tsx
index aefdb1baf0..b92762f533 100644
--- a/packages/components/badge/src/Badge.tsx
+++ b/packages/components/badge/src/Badge.tsx
@@ -27,31 +27,30 @@ export interface BadgeInternalProps extends CommonProps {
 
 export type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;
 
-export const Badge = React.forwardRef<
-  HTMLDivElement,
-  ExpandProps<BadgeInternalProps>
->((props, ref) => {
-  const {
-    children,
-    variant = 'primary',
-    size = 'default',
-    testId = 'cf-ui-badge',
-    className,
-    ...otherProps
-  } = props;
+export const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(
+  (props, ref) => {
+    const {
+      children,
+      variant = 'primary',
+      size = 'default',
+      testId = 'cf-ui-badge',
+      className,
+      ...otherProps
+    } = props;
 
-  return (
-    <Box
-      as="div"
-      testId={testId}
-      display="inline-block"
-      className={cx(getBadgeStyles({ variant, size }), className)}
-      {...otherProps}
-      ref={ref}
-    >
-      {children}
-    </Box>
-  );
-});
+    return (
+      <Box
+        as="div"
+        testId={testId}
+        display="inline-block"
+        className={cx(getBadgeStyles({ variant, size }), className)}
+        {...otherProps}
+        ref={ref}
+      >
+        {children}
+      </Box>
+    );
+  },
+);
 
 Badge.displayName = 'Badge';
diff --git a/packages/components/badge/src/EntityStatusBadge.tsx b/packages/components/badge/src/EntityStatusBadge.tsx
index 53f0042db0..167e1394b5 100644
--- a/packages/components/badge/src/EntityStatusBadge.tsx
+++ b/packages/components/badge/src/EntityStatusBadge.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import type { EntityStatus, ExpandProps } from '@contentful/f36-core';
 
 import { Badge } from './Badge';
-import type { BadgeInternalProps } from './Badge';
-import { BadgeVariant } from './types';
+import type { BadgeProps } from './Badge';
+import type { BadgeVariant, BadgeSize } from './types';
 
 const statusMap: { [key in EntityStatus]: BadgeVariant } = {
   published: 'positive',
@@ -14,15 +14,14 @@ const statusMap: { [key in EntityStatus]: BadgeVariant } = {
   new: 'primary-filled',
 };
 
-export type EntityStatusBadgeProps = Omit<
-  BadgeInternalProps,
-  'variant' | 'children'
-> & {
+export interface EntityStatusBadgeProps
+  extends Omit<BadgeProps, 'variant' | 'children'> {
+  size?: BadgeSize;
   entityStatus: EntityStatus;
-};
+}
 
 function EntityStatusBadge(
-  props: ExpandProps<EntityStatusBadgeProps>,
+  props: EntityStatusBadgeProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
   const { entityStatus, ...otherProps } = props;
@@ -34,5 +33,8 @@ function EntityStatusBadge(
   );
 }
 
-const _EntityStatusBadge = React.forwardRef(EntityStatusBadge);
+const _EntityStatusBadge = React.forwardRef<
+  HTMLDivElement,
+  ExpandProps<EntityStatusBadgeProps>
+>(EntityStatusBadge);
 export { _EntityStatusBadge as EntityStatusBadge };
diff --git a/packages/components/forms/src/index.ts b/packages/components/forms/src/index.ts
index 883c3c34f3..11e72d2001 100644
--- a/packages/components/forms/src/index.ts
+++ b/packages/components/forms/src/index.ts
@@ -20,7 +20,7 @@ export type { RadioProps } from './radio/Radio';
 export type { RadioGroupProps } from './radio/RadioGroup';
 export { TextInput } from './text-input/CompoundTextInput';
 export type { TextInputProps } from './text-input/types';
-export type { InputGroupProps } from './text-input/input-group/types';
+export type { InputGroupProps } from './text-input/input-group/InputGroup';
 export { Switch } from './switch/Switch';
 export type { SwitchProps } from './switch/Switch';
 export { Textarea } from './textarea/Textarea';
diff --git a/packages/components/forms/src/text-input/input-group/InputGroup.tsx b/packages/components/forms/src/text-input/input-group/InputGroup.tsx
index 7630418786..dc635d9f4e 100644
--- a/packages/components/forms/src/text-input/input-group/InputGroup.tsx
+++ b/packages/components/forms/src/text-input/input-group/InputGroup.tsx
@@ -1,8 +1,17 @@
 import React from 'react';
 import { cx } from 'emotion';
-import { Stack, ExpandProps } from '@contentful/f36-core';
+import { Stack, ExpandProps, CommonProps } from '@contentful/f36-core';
 import getStyles from './InputGroup.styles';
-import type { InputGroupProps } from './types';
+import type { InputGroupSpacing } from './types';
+
+export interface InputGroupProps extends CommonProps {
+  /**
+   * Sets the spacing of the elements if variant is separate.
+   * @default spacingS
+   */
+  spacing?: InputGroupSpacing;
+  children: React.ReactNode;
+}
 
 const _InputGroup = (
   props: ExpandProps<InputGroupProps>,
diff --git a/packages/components/forms/src/text-input/input-group/types.ts b/packages/components/forms/src/text-input/input-group/types.ts
index 118d121449..f16b019fd2 100644
--- a/packages/components/forms/src/text-input/input-group/types.ts
+++ b/packages/components/forms/src/text-input/input-group/types.ts
@@ -1,17 +1,7 @@
-import { CommonProps } from '@contentful/f36-core';
 import type { SpacingTokens } from '@contentful/f36-tokens';
 
 export type InputGroupSpacing = SpacingTokens | 'none';
 
-export interface InputGroupProps extends CommonProps {
-  /**
-   * Sets the spacing of the elements if variant is separate.
-   * @default spacingS
-   */
-  spacing?: InputGroupSpacing;
-  children: React.ReactNode;
-}
-
 export type GetStyleArguments = {
   spacing: InputGroupSpacing;
 };