From 5b729f8b8c737690ae61408902fef6088a31bce5 Mon Sep 17 00:00:00 2001
From: Chris Schneider <chris.schneider@zendesk.com>
Date: Fri, 7 Feb 2025 09:51:41 -0500
Subject: [PATCH] migrate defaultProps to default assignment

---
 .../src/elements/accordion/Accordion.tsx      |   9 +-
 .../src/elements/stepper/Stepper.tsx          |   4 -
 .../src/styled/accordion/StyledPanel.ts       |  17 +-
 packages/avatars/src/elements/Avatar.tsx      |   6 +-
 .../avatars/src/elements/StatusIndicator.tsx  |   6 +-
 packages/avatars/src/styled/StyledAvatar.ts   |  12 +-
 .../styled/StyledStandaloneStatusIndicator.ts |  16 +-
 .../src/styled/StyledStatusIndicator.ts       |  18 +-
 .../src/styled/StyledStatusIndicatorBase.ts   |  11 +-
 packages/buttons/src/elements/Button.tsx      |   6 +-
 .../buttons/src/elements/ChevronButton.tsx    |  18 +-
 packages/buttons/src/elements/IconButton.tsx  |  12 +-
 .../buttons/src/elements/ToggleButton.tsx     |   8 +-
 .../buttons/src/elements/ToggleIconButton.tsx |  17 +-
 packages/chrome/src/elements/SkipNav.tsx      |   6 +-
 packages/chrome/src/elements/sheet/Sheet.tsx  |  18 +-
 .../src/elements/ColorPicker/index.tsx        |   6 +-
 .../src/elements/ColorPickerDialog/index.tsx  |  15 +-
 .../src/elements/ColorSwatchDialog/index.tsx  |  15 +-
 .../src/elements/DatePicker/DatePicker.tsx    |  26 +-
 .../DatePickerRange/DatePickerRange.tsx       |   9 +-
 .../src/elements/Menu/Menu.tsx                | 260 +++++++++---------
 .../src/elements/Multiselect/Multiselect.tsx  |   7 +-
 .../src/elements/Trigger/Trigger.tsx          |   6 +-
 .../src/elements/combobox/Combobox.tsx        |  13 +-
 packages/dropdowns/src/elements/menu/Menu.tsx |  12 +-
 .../dropdowns/src/elements/menu/MenuList.tsx  |  12 +-
 packages/forms/src/elements/Range.tsx         |   9 +-
 packages/forms/src/elements/tiles/Tiles.tsx   |   6 +-
 .../src/styled/range/StyledRangeInput.ts      |  27 +-
 packages/grid/src/elements/Grid.tsx           |   7 +-
 .../src/elements/pane/components/Splitter.tsx |   6 +-
 packages/grid/src/styled/StyledCol.ts         |  13 +-
 packages/grid/src/styled/StyledGrid.ts        |  13 +-
 packages/grid/src/styled/StyledRow.ts         |  13 +-
 packages/loaders/src/elements/Dots.tsx        |   9 +-
 packages/loaders/src/elements/Inline.tsx      |  47 ++--
 packages/loaders/src/elements/Progress.tsx    |   7 +-
 packages/loaders/src/elements/Skeleton.tsx    |   7 +-
 packages/loaders/src/elements/Spinner.tsx     |   9 +-
 .../modals/src/elements/Drawer/Drawer.tsx     |  16 +-
 .../modals/src/elements/Drawer/Header.tsx     |  50 ++--
 packages/modals/src/elements/Header.tsx       |   6 +-
 packages/modals/src/elements/Modal.tsx        |   9 +-
 .../src/elements/TooltipDialog/Title.tsx      |   6 +-
 .../elements/TooltipDialog/TooltipDialog.tsx  |  17 +-
 .../src/elements/toaster/ToastProvider.tsx    |   6 +-
 .../OffsetPagination/OffsetPagination.tsx     |   9 +-
 packages/tables/src/elements/Table.tsx        |   6 +-
 packages/tabs/src/elements/Tabs.tsx           |   6 +-
 packages/tags/src/elements/Tag.tsx            |   6 +-
 packages/tags/src/styled/StyledTag.ts         |  13 +-
 packages/tooltips/src/elements/Tooltip.tsx    |  26 +-
 .../typography/src/elements/Blockquote.tsx    |  10 +-
 packages/typography/src/elements/Code.tsx     |  13 +-
 packages/typography/src/elements/Ellipsis.tsx |   6 +-
 packages/typography/src/elements/LG.tsx       |   6 +-
 packages/typography/src/elements/MD.tsx       |   6 +-
 .../typography/src/elements/Paragraph.tsx     |  10 +-
 packages/typography/src/elements/SM.tsx       |   6 +-
 packages/typography/src/elements/XL.tsx       |  12 +-
 packages/typography/src/elements/XXL.tsx      |  12 +-
 packages/typography/src/elements/XXXL.tsx     |   6 +-
 .../src/elements/lists/OrderedList.tsx        |   7 +-
 .../src/elements/lists/UnorderedList.tsx      |   7 +-
 .../typography/src/elements/span/Span.tsx     |   6 +-
 packages/typography/src/styled/StyledCode.ts  |  15 +-
 packages/typography/src/styled/StyledFont.tsx |  11 +-
 .../typography/src/styled/StyledListItem.ts   |  38 ++-
 69 files changed, 403 insertions(+), 682 deletions(-)

diff --git a/packages/accordions/src/elements/accordion/Accordion.tsx b/packages/accordions/src/elements/accordion/Accordion.tsx
index 7d3df38e923..2b7e950afae 100644
--- a/packages/accordions/src/elements/accordion/Accordion.tsx
+++ b/packages/accordions/src/elements/accordion/Accordion.tsx
@@ -21,9 +21,9 @@ const AccordionComponent = forwardRef<HTMLDivElement, IAccordionProps>(
       children,
       isBare,
       isCompact,
-      isAnimated,
+      isAnimated = true,
       isExpandable,
-      isCollapsible,
+      isCollapsible = true,
       level,
       onChange,
       defaultExpandedSections,
@@ -103,11 +103,6 @@ const AccordionComponent = forwardRef<HTMLDivElement, IAccordionProps>(
 
 AccordionComponent.displayName = 'Accordion';
 
-AccordionComponent.defaultProps = {
-  isAnimated: true,
-  isCollapsible: true
-};
-
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
diff --git a/packages/accordions/src/elements/stepper/Stepper.tsx b/packages/accordions/src/elements/stepper/Stepper.tsx
index c26943b7011..2c9cb5805bc 100644
--- a/packages/accordions/src/elements/stepper/Stepper.tsx
+++ b/packages/accordions/src/elements/stepper/Stepper.tsx
@@ -57,10 +57,6 @@ const StepperComponent = forwardRef<HTMLOListElement, IStepperProps>(
 
 StepperComponent.displayName = 'Stepper';
 
-StepperComponent.defaultProps = {
-  activeIndex: DEFAULT_ACTIVE_INDEX
-};
-
 /**
  * @extends OlHTMLAttributes<HTMLOListElement>
  */
diff --git a/packages/accordions/src/styled/accordion/StyledPanel.ts b/packages/accordions/src/styled/accordion/StyledPanel.ts
index 23e46dc098d..74124ebc058 100644
--- a/packages/accordions/src/styled/accordion/StyledPanel.ts
+++ b/packages/accordions/src/styled/accordion/StyledPanel.ts
@@ -6,12 +6,7 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import {
-  getLineHeight,
-  componentStyles,
-  DEFAULT_THEME,
-  getColor
-} from '@zendeskgarden/react-theming';
+import { getLineHeight, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 interface IStyledPanel {
   inert?: string;
@@ -58,10 +53,11 @@ const sizeStyles = (props: IStyledPanel & ThemeProps<DefaultTheme>) => {
   `;
 };
 
-export const StyledPanel = styled.section.attrs<IStyledPanel>({
+export const StyledPanel = styled.section.attrs<IStyledPanel>(({ $isAnimated = true }) => ({
+  $isAnimated,
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})<IStyledPanel>`
+}))`
   display: grid;
   transition: ${props =>
     props.$isAnimated && 'padding 0.25s ease-in-out, grid-template-rows 0.25s ease-in-out'};
@@ -72,8 +68,3 @@ export const StyledPanel = styled.section.attrs<IStyledPanel>({
 
   ${componentStyles};
 `;
-
-StyledPanel.defaultProps = {
-  $isAnimated: true,
-  theme: DEFAULT_THEME
-};
diff --git a/packages/avatars/src/elements/Avatar.tsx b/packages/avatars/src/elements/Avatar.tsx
index 1fee83884ed..f02010b741a 100644
--- a/packages/avatars/src/elements/Avatar.tsx
+++ b/packages/avatars/src/elements/Avatar.tsx
@@ -26,7 +26,7 @@ const AvatarComponent = forwardRef<HTMLElement, IAvatarProps>(
       children,
       foregroundColor,
       isSystem,
-      size,
+      size = 'medium',
       status,
       statusLabel,
       surfaceColor,
@@ -119,10 +119,6 @@ AvatarComponent.propTypes = {
   statusLabel: PropTypes.string
 };
 
-AvatarComponent.defaultProps = {
-  size: 'medium'
-};
-
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
diff --git a/packages/avatars/src/elements/StatusIndicator.tsx b/packages/avatars/src/elements/StatusIndicator.tsx
index 20260f5ac69..f6d88938faa 100644
--- a/packages/avatars/src/elements/StatusIndicator.tsx
+++ b/packages/avatars/src/elements/StatusIndicator.tsx
@@ -31,7 +31,7 @@ import {
  * @extends HTMLAttributes<HTMLElement>
  */
 export const StatusIndicator = forwardRef<HTMLElement, IStatusIndicatorProps>(
-  ({ children, type, isCompact, 'aria-label': label, ...props }, ref) => {
+  ({ children, type = 'offline', isCompact, 'aria-label': label, ...props }, ref) => {
     let ClockIcon = ClockIcon16;
     let ArrowLeftIcon = ArrowLeftIcon16;
 
@@ -72,7 +72,3 @@ StatusIndicator.propTypes = {
   type: PropTypes.oneOf(STATUS),
   isCompact: PropTypes.bool
 };
-
-StatusIndicator.defaultProps = {
-  type: 'offline'
-};
diff --git a/packages/avatars/src/styled/StyledAvatar.ts b/packages/avatars/src/styled/StyledAvatar.ts
index 861a81f56a8..1349cd96b70 100644
--- a/packages/avatars/src/styled/StyledAvatar.ts
+++ b/packages/avatars/src/styled/StyledAvatar.ts
@@ -6,7 +6,7 @@
  */
 
 import styled, { css, ThemeProps, keyframes, DefaultTheme } from 'styled-components';
-import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 
 import { IAvatarProps, SIZE } from '../types';
@@ -180,10 +180,11 @@ export interface IStyledAvatarProps {
 /**
  * Accepts all `<figure>` props
  */
-export const StyledAvatar = styled.figure.attrs({
+export const StyledAvatar = styled.figure.attrs<IStyledAvatarProps>(({ $size = 'medium' }) => ({
+  $size,
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})<IStyledAvatarProps>`
+}))`
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -231,8 +232,3 @@ export const StyledAvatar = styled.figure.attrs({
 
   ${componentStyles};
 `;
-
-StyledAvatar.defaultProps = {
-  $size: 'medium',
-  theme: DEFAULT_THEME
-};
diff --git a/packages/avatars/src/styled/StyledStandaloneStatusIndicator.ts b/packages/avatars/src/styled/StyledStandaloneStatusIndicator.ts
index a9e62d22d63..f1f1e6a4ab5 100644
--- a/packages/avatars/src/styled/StyledStandaloneStatusIndicator.ts
+++ b/packages/avatars/src/styled/StyledStandaloneStatusIndicator.ts
@@ -6,17 +6,20 @@
  */
 
 import styled from 'styled-components';
-import { componentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 import { getStatusSize, IStyledStatusIndicatorProps } from './utility';
 import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase';
 
 const COMPONENT_ID = 'avatars.status-indicator.indicator';
 
-export const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
+export const StyledStandaloneStatusIndicator = styled(
+  StyledStatusIndicatorBase
+).attrs<IStyledStatusIndicatorProps>(({ $type = 'offline' }) => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION
-})<IStyledStatusIndicatorProps>`
+  'data-garden-version': PACKAGE_VERSION,
+  $type
+}))`
   position: relative;
   box-sizing: content-box;
   margin-top: ${props =>
@@ -24,8 +27,3 @@ export const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase)
 
   ${componentStyles};
 `;
-
-StyledStandaloneStatusIndicator.defaultProps = {
-  $type: 'offline',
-  theme: DEFAULT_THEME
-};
diff --git a/packages/avatars/src/styled/StyledStatusIndicator.ts b/packages/avatars/src/styled/StyledStatusIndicator.ts
index fde7e336c90..7bcd9fea6a9 100644
--- a/packages/avatars/src/styled/StyledStatusIndicator.ts
+++ b/packages/avatars/src/styled/StyledStatusIndicator.ts
@@ -6,7 +6,7 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 
 import { IAvatarProps, SIZE } from '../types';
@@ -90,17 +90,15 @@ const colorStyles = ({
   `;
 };
 
-export const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION
-})<IStatusIndicatorProps>`
+export const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs(
+  ({ $size = 'medium' }) => ({
+    $size,
+    'data-garden-id': COMPONENT_ID,
+    'data-garden-version': PACKAGE_VERSION
+  })
+)<IStatusIndicatorProps>`
   ${sizeStyles}
   ${colorStyles}
 
   ${componentStyles};
 `;
-
-StyledStatusIndicator.defaultProps = {
-  $size: 'medium',
-  theme: DEFAULT_THEME
-};
diff --git a/packages/avatars/src/styled/StyledStatusIndicatorBase.ts b/packages/avatars/src/styled/StyledStatusIndicatorBase.ts
index 98d2e8833f3..e91c3e479d7 100644
--- a/packages/avatars/src/styled/StyledStatusIndicatorBase.ts
+++ b/packages/avatars/src/styled/StyledStatusIndicatorBase.ts
@@ -6,7 +6,7 @@
  */
 
 import styled, { css, keyframes } from 'styled-components';
-import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 import {
   TRANSITION_DURATION,
@@ -86,10 +86,10 @@ const colorStyles = ({ theme, $type }: IStyledStatusIndicatorProps) => {
   `;
 };
 
-export const StyledStatusIndicatorBase = styled.div.attrs({
+export const StyledStatusIndicatorBase = styled.div.attrs<IStyledStatusIndicatorProps>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})<IStyledStatusIndicatorProps>`
+})`
   transition: inherit;
 
   ${sizeStyles}
@@ -97,8 +97,3 @@ export const StyledStatusIndicatorBase = styled.div.attrs({
 
   ${componentStyles};
 `;
-
-StyledStatusIndicatorBase.defaultProps = {
-  theme: DEFAULT_THEME,
-  $size: 'small'
-};
diff --git a/packages/buttons/src/elements/Button.tsx b/packages/buttons/src/elements/Button.tsx
index a5b69b6cd0f..93f80f0d83d 100644
--- a/packages/buttons/src/elements/Button.tsx
+++ b/packages/buttons/src/elements/Button.tsx
@@ -24,7 +24,7 @@ const ButtonComponent = forwardRef<HTMLButtonElement, IButtonProps>(
       isPill,
       isPrimary,
       isStretched,
-      size,
+      size = 'medium',
       ...other
     },
     ref
@@ -64,10 +64,6 @@ ButtonComponent.propTypes = {
   size: PropTypes.oneOf(SIZE)
 };
 
-ButtonComponent.defaultProps = {
-  size: 'medium'
-};
-
 /**
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
diff --git a/packages/buttons/src/elements/ChevronButton.tsx b/packages/buttons/src/elements/ChevronButton.tsx
index 4f7047e7436..f484b7b2f47 100644
--- a/packages/buttons/src/elements/ChevronButton.tsx
+++ b/packages/buttons/src/elements/ChevronButton.tsx
@@ -13,18 +13,14 @@ import { IIconButtonProps } from '../types';
 /**
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
-export const ChevronButton = forwardRef<HTMLButtonElement, IIconButtonProps>((props, ref) => (
-  <IconButton ref={ref} {...props}>
-    <ChevronDownIcon />
-  </IconButton>
-));
+export const ChevronButton = forwardRef<HTMLButtonElement, IIconButtonProps>(
+  ({ isBasic = false, isPill = false, size = 'medium', ...props }, ref) => (
+    <IconButton isBasic={isBasic} isPill={isPill} size={size} ref={ref} {...props}>
+      <ChevronDownIcon />
+    </IconButton>
+  )
+);
 
 ChevronButton.displayName = 'ChevronButton';
 
 ChevronButton.propTypes = IconButton.propTypes;
-
-ChevronButton.defaultProps = {
-  isBasic: false,
-  isPill: false,
-  size: 'medium'
-};
diff --git a/packages/buttons/src/elements/IconButton.tsx b/packages/buttons/src/elements/IconButton.tsx
index 737fd070efe..c0ad4bccd4c 100644
--- a/packages/buttons/src/elements/IconButton.tsx
+++ b/packages/buttons/src/elements/IconButton.tsx
@@ -19,13 +19,13 @@ export const IconButton = forwardRef<HTMLButtonElement, IIconButtonProps>(
     {
       children,
       focusInset,
-      isBasic,
+      isBasic = true,
       isDanger,
       isNeutral,
-      isPill,
+      isPill = true,
       isPrimary,
       isRotated,
-      size,
+      size = 'medium',
       ...other
     },
     ref
@@ -62,9 +62,3 @@ IconButton.propTypes = {
   isRotated: PropTypes.bool,
   size: PropTypes.oneOf(SIZE)
 };
-
-IconButton.defaultProps = {
-  isPill: true,
-  isBasic: true,
-  size: 'medium'
-};
diff --git a/packages/buttons/src/elements/ToggleButton.tsx b/packages/buttons/src/elements/ToggleButton.tsx
index 3bc1ef5b3f8..616566c1925 100644
--- a/packages/buttons/src/elements/ToggleButton.tsx
+++ b/packages/buttons/src/elements/ToggleButton.tsx
@@ -14,8 +14,8 @@ import { Button } from './Button';
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export const ToggleButton = forwardRef<HTMLButtonElement, IToggleButtonProps>(
-  ({ isPressed, ...otherProps }, ref) => (
-    <Button aria-pressed={isPressed} ref={ref} {...otherProps} />
+  ({ isPressed, size = 'medium', ...otherProps }, ref) => (
+    <Button aria-pressed={isPressed} ref={ref} size={size} {...otherProps} />
   )
 );
 
@@ -25,7 +25,3 @@ ToggleButton.propTypes = {
   ...Button.propTypes,
   isPressed: PropTypes.oneOf([true, false, 'mixed'])
 };
-
-ToggleButton.defaultProps = {
-  size: 'medium'
-};
diff --git a/packages/buttons/src/elements/ToggleIconButton.tsx b/packages/buttons/src/elements/ToggleIconButton.tsx
index df844b4714d..0b63f594388 100644
--- a/packages/buttons/src/elements/ToggleIconButton.tsx
+++ b/packages/buttons/src/elements/ToggleIconButton.tsx
@@ -14,8 +14,15 @@ import { IconButton } from './IconButton';
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export const ToggleIconButton = forwardRef<HTMLButtonElement, IToggleIconButtonProps>(
-  ({ isPressed, ...otherProps }, ref) => (
-    <IconButton aria-pressed={isPressed} ref={ref} {...otherProps} />
+  ({ isPill = true, isBasic = true, size = 'medium', isPressed, ...otherProps }, ref) => (
+    <IconButton
+      isPill={isPill}
+      isBasic={isBasic}
+      size={size}
+      aria-pressed={isPressed}
+      ref={ref}
+      {...otherProps}
+    />
   )
 );
 
@@ -25,9 +32,3 @@ ToggleIconButton.propTypes = {
   ...IconButton.propTypes,
   isPressed: PropTypes.oneOf([true, false, 'mixed'])
 };
-
-ToggleIconButton.defaultProps = {
-  isPill: true,
-  isBasic: true,
-  size: 'medium'
-};
diff --git a/packages/chrome/src/elements/SkipNav.tsx b/packages/chrome/src/elements/SkipNav.tsx
index 8b5ab8d01ad..4f6c5c9fa4b 100644
--- a/packages/chrome/src/elements/SkipNav.tsx
+++ b/packages/chrome/src/elements/SkipNav.tsx
@@ -14,7 +14,7 @@ import { StyledSkipNav, StyledSkipNavIcon } from '../styled';
  * @extends AnchorHTMLAttributes<HTMLAnchorElement>
  */
 export const SkipNav = React.forwardRef<HTMLAnchorElement, ISkipNavProps>(
-  ({ targetId, zIndex, children, ...props }, ref) => (
+  ({ targetId, zIndex = 1, children, ...props }, ref) => (
     <StyledSkipNav href={`#${targetId}`} $zIndex={zIndex} ref={ref} {...props}>
       <StyledSkipNavIcon />
       {children}
@@ -28,7 +28,3 @@ SkipNav.propTypes = {
   targetId: PropTypes.string.isRequired,
   zIndex: PropTypes.number
 };
-
-SkipNav.defaultProps = {
-  zIndex: 1
-};
diff --git a/packages/chrome/src/elements/sheet/Sheet.tsx b/packages/chrome/src/elements/sheet/Sheet.tsx
index b8eec7a4a7d..d4fe4cfcb36 100644
--- a/packages/chrome/src/elements/sheet/Sheet.tsx
+++ b/packages/chrome/src/elements/sheet/Sheet.tsx
@@ -25,7 +25,17 @@ import { Close } from './components/Close';
 
 const SheetComponent = React.forwardRef<HTMLElement, ISheetProps>(
   (
-    { id, isOpen, isAnimated, focusOnMount, restoreFocus, placement, size, children, ...props },
+    {
+      id,
+      isOpen,
+      isAnimated = true,
+      focusOnMount,
+      restoreFocus,
+      placement = 'end',
+      size = '380px',
+      children,
+      ...props
+    },
     ref
   ) => {
     const sheetRef = useRef<HTMLElement>(null);
@@ -87,12 +97,6 @@ SheetComponent.propTypes = {
   size: PropTypes.string
 };
 
-SheetComponent.defaultProps = {
-  isAnimated: true,
-  placement: 'end',
-  size: '380px'
-};
-
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
diff --git a/packages/colorpickers/src/elements/ColorPicker/index.tsx b/packages/colorpickers/src/elements/ColorPicker/index.tsx
index 4f291ca1761..71b25ce370f 100644
--- a/packages/colorpickers/src/elements/ColorPicker/index.tsx
+++ b/packages/colorpickers/src/elements/ColorPicker/index.tsx
@@ -29,7 +29,7 @@ import { IColor, IColorPickerProps, IHSVColor } from '../../types';
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const ColorPicker = forwardRef<HTMLDivElement, IColorPickerProps>(
-  ({ color, defaultColor, isOpaque, labels = {}, autofocus, onChange, ...props }, ref) => {
+  ({ color, defaultColor = '#fff', isOpaque, labels = {}, autofocus, onChange, ...props }, ref) => {
     const [state, dispatch] = useReducer(reducer, getInitialState(color || defaultColor));
     const previousComputedColorRef = useRef<IColor>(state.color);
     const previousStateColorRef = useRef<IColor>(state.color);
@@ -232,10 +232,6 @@ export const ColorPicker = forwardRef<HTMLDivElement, IColorPickerProps>(
   }
 );
 
-ColorPicker.defaultProps = {
-  defaultColor: '#fff'
-};
-
 ColorPicker.displayName = 'ColorPicker';
 
 ColorPicker.propTypes = {
diff --git a/packages/colorpickers/src/elements/ColorPickerDialog/index.tsx b/packages/colorpickers/src/elements/ColorPickerDialog/index.tsx
index 3b2714b30cf..66e2313a4b2 100644
--- a/packages/colorpickers/src/elements/ColorPickerDialog/index.tsx
+++ b/packages/colorpickers/src/elements/ColorPickerDialog/index.tsx
@@ -38,15 +38,15 @@ export const ColorPickerDialog = forwardRef<HTMLDivElement, IColorPickerDialogPr
     {
       color,
       defaultColor,
-      placement,
+      placement = 'bottom-start',
       onChange,
       onClose,
       labels,
-      hasArrow,
-      isAnimated,
+      hasArrow = false,
+      isAnimated = true,
       isOpaque,
       isOpen,
-      zIndex,
+      zIndex = 1000,
       focusInset,
       disabled,
       buttonProps,
@@ -171,11 +171,4 @@ ColorPickerDialog.propTypes = {
   focusInset: PropTypes.bool
 };
 
-ColorPickerDialog.defaultProps = {
-  placement: 'bottom-start',
-  isAnimated: true,
-  zIndex: 1000,
-  hasArrow: false /* TooltipDialog override */
-};
-
 ColorPickerDialog.displayName = 'ColorPickerDialog';
diff --git a/packages/colorpickers/src/elements/ColorSwatchDialog/index.tsx b/packages/colorpickers/src/elements/ColorSwatchDialog/index.tsx
index 3bc384ad65b..0d57542aa94 100644
--- a/packages/colorpickers/src/elements/ColorSwatchDialog/index.tsx
+++ b/packages/colorpickers/src/elements/ColorSwatchDialog/index.tsx
@@ -43,11 +43,11 @@ export const ColorSwatchDialog = forwardRef<HTMLDivElement, IColorSwatchDialogPr
       selectedColIndex,
       defaultSelectedRowIndex,
       defaultSelectedColIndex,
-      placement,
+      placement = 'bottom-start',
       onSelect,
-      hasArrow,
-      isAnimated,
-      zIndex,
+      hasArrow = false,
+      isAnimated = true,
+      zIndex = 1000,
       isOpen,
       focusInset,
       disabled,
@@ -200,11 +200,4 @@ ColorSwatchDialog.propTypes = {
   isOpen: PropTypes.bool
 };
 
-ColorSwatchDialog.defaultProps = {
-  placement: 'bottom-start',
-  isAnimated: true,
-  zIndex: 1000,
-  hasArrow: false /* TooltipDialog override */
-};
-
 ColorSwatchDialog.displayName = 'ColorSwatchDialog';
diff --git a/packages/datepickers/src/elements/DatePicker/DatePicker.tsx b/packages/datepickers/src/elements/DatePicker/DatePicker.tsx
index c8529ac2b74..486259160c1 100644
--- a/packages/datepickers/src/elements/DatePicker/DatePicker.tsx
+++ b/packages/datepickers/src/elements/DatePicker/DatePicker.tsx
@@ -37,17 +37,17 @@ export const DatePicker = forwardRef<HTMLDivElement, IDatePickerProps>((props, c
   const {
     appendToNode,
     children,
-    placement: _placement,
-    zIndex,
-    isAnimated,
-    refKey,
+    placement = PLACEMENT_DEFAULT,
+    zIndex = 1000,
+    isAnimated = true,
+    refKey = 'ref',
     value,
     isCompact,
     onChange,
     formatDate,
     minValue,
     maxValue,
-    locale,
+    locale = 'en-US',
     weekStartsOn,
     customParseDate,
     ...menuProps
@@ -65,12 +65,12 @@ export const DatePicker = forwardRef<HTMLDivElement, IDatePickerProps>((props, c
   const contextValue = useMemo(() => ({ state, dispatch }), [state, dispatch]);
   const [floatingPlacement] = getFloatingPlacements(
     theme,
-    _placement === 'auto' ? PLACEMENT_DEFAULT : _placement!
+    placement === 'auto' ? PLACEMENT_DEFAULT : placement!
   );
 
   const {
     refs,
-    placement,
+    placement: $placement,
     update,
     floatingStyles: { transform }
   } = useFloating({
@@ -80,7 +80,7 @@ export const DatePicker = forwardRef<HTMLDivElement, IDatePickerProps>((props, c
     },
     elements: { reference: triggerRef?.current, floating: floatingRef?.current },
     placement: floatingPlacement,
-    middleware: [_placement === 'auto' ? autoPlacement() : flip()]
+    middleware: [placement === 'auto' ? autoPlacement() : flip()]
   });
 
   const Child = React.Children.only<React.ReactElement & React.RefAttributes<HTMLInputElement>>(
@@ -131,7 +131,7 @@ export const DatePicker = forwardRef<HTMLDivElement, IDatePickerProps>((props, c
       ref={floatingRef}
       style={{ transform }}
       $isAnimated={!!isAnimated && (state.isOpen || isVisible)}
-      $placement={placement}
+      $placement={$placement}
       $zIndex={zIndex}
       aria-hidden={!state.isOpen || undefined}
       data-test-id="datepicker-menu"
@@ -188,11 +188,3 @@ DatePicker.propTypes = {
   isAnimated: PropTypes.bool,
   zIndex: PropTypes.number
 };
-
-DatePicker.defaultProps = {
-  placement: PLACEMENT_DEFAULT,
-  refKey: 'ref',
-  isAnimated: true,
-  zIndex: 1000,
-  locale: 'en-US'
-};
diff --git a/packages/datepickers/src/elements/DatePickerRange/DatePickerRange.tsx b/packages/datepickers/src/elements/DatePickerRange/DatePickerRange.tsx
index f5476fd4bac..2fc014e4437 100644
--- a/packages/datepickers/src/elements/DatePickerRange/DatePickerRange.tsx
+++ b/packages/datepickers/src/elements/DatePickerRange/DatePickerRange.tsx
@@ -24,13 +24,13 @@ import { Calendar } from './components/Calendar';
 const DatePickerRangeComponent = (props: PropsWithChildren<IDatePickerRangeProps>) => {
   const {
     startValue,
-    locale,
+    locale = 'en-US',
     weekStartsOn,
     formatDate,
     endValue,
     onChange,
     customParseDate,
-    isCompact,
+    isCompact = false,
     minValue,
     maxValue,
     children
@@ -135,11 +135,6 @@ DatePickerRangeComponent.propTypes = {
   isCompact: PropTypes.bool
 };
 
-DatePickerRangeComponent.defaultProps = {
-  locale: 'en-US',
-  isCompact: false
-};
-
 export const DatePickerRange = DatePickerRangeComponent as typeof DatePickerRangeComponent & {
   Calendar: typeof Calendar;
   End: typeof End;
diff --git a/packages/dropdowns.legacy/src/elements/Menu/Menu.tsx b/packages/dropdowns.legacy/src/elements/Menu/Menu.tsx
index 52ecb258fbd..e76816a902e 100644
--- a/packages/dropdowns.legacy/src/elements/Menu/Menu.tsx
+++ b/packages/dropdowns.legacy/src/elements/Menu/Menu.tsx
@@ -21,131 +21,135 @@ import { MenuContext } from '../../utils/useMenuContext';
  *
  * @extends HTMLAttributes<HTMLUListElement>
  */
-export const Menu = forwardRef<HTMLUListElement, IMenuProps>((props, menuRef) => {
-  const {
-    appendToNode,
-    children,
-    eventsEnabled,
-    hasArrow,
-    isAnimated,
-    isCompact,
-    maxHeight,
-    placement,
-    popperModifiers,
-    style: menuStyle,
-    zIndex,
-    ...other
-  } = props;
-  const {
-    hasMenuRef,
-    itemIndexRef,
-    previousIndexRef,
-    nextItemsHashRef,
-    popperReferenceElementRef,
-    itemSearchRegistry,
-    downshift: { isOpen, getMenuProps }
-  } = useDropdownContext();
-  const scheduleUpdateRef = useRef<(() => void) | undefined>(undefined);
-
-  useEffect(() => {
-    /**
-     * Recalculate popper placement while open to allow animations to complete.
-     * This must be ran every render to allow for the number of items to change
-     * and still be placed correctly.
-     **/
-    if (scheduleUpdateRef.current && isOpen) {
-      scheduleUpdateRef.current();
-    }
-  });
-
-  const [isVisible, setIsVisible] = useState(isOpen);
-
-  useEffect(() => {
-    let timeout: any;
-
-    if (isOpen) {
-      setIsVisible(true);
-    } else if (isAnimated) {
-      // Match the duration of the menu fade out transition.
-      timeout = setTimeout(() => setIsVisible(false), 200);
-    } else {
-      setIsVisible(false);
-    }
-
-    return () => clearTimeout(timeout);
-  }, [isOpen, isAnimated]);
-
-  const themeContext = useContext(ThemeContext);
-
-  // Reset Downshift refs on every render
-  itemIndexRef.current = 0;
-  nextItemsHashRef.current = {};
-  previousIndexRef.current = undefined;
-  itemSearchRegistry.current = [];
-
-  const popperPlacement = themeContext.rtl
-    ? getRtlPopperPlacement(placement!)
-    : getPopperPlacement(placement!);
-
-  return (
-    /* eslint-disable react/jsx-no-constructed-context-values */
-    <MenuContext.Provider value={{ itemIndexRef, isCompact }}>
-      <Popper
-        placement={popperPlacement as any}
-        modifiers={popperModifiers}
-        // Disable position updating on scroll events while menu is closed
-        eventsEnabled={!!(isOpen && eventsEnabled)}
-      >
-        {({ ref, style, scheduleUpdate, placement: currentPlacement }) => {
-          let computedStyle = menuStyle;
-
-          scheduleUpdateRef.current = scheduleUpdate;
-
-          // Calculate custom width if ref is provided from Select or Autocomplete
-          if (
-            (isOpen || isVisible) &&
-            popperReferenceElementRef.current &&
-            popperReferenceElementRef.current.getBoundingClientRect
-          ) {
-            computedStyle = {
-              width: popperReferenceElementRef.current.getBoundingClientRect().width,
-              ...menuStyle
+export const Menu = forwardRef<HTMLUListElement, IMenuProps>(
+  (
+    {
+      appendToNode,
+      children,
+      eventsEnabled = true,
+      hasArrow,
+      isAnimated = true,
+      isCompact,
+      maxHeight = '400px',
+      placement = 'bottom-start',
+      popperModifiers,
+      style: menuStyle,
+      zIndex = 1000,
+      ...other
+    },
+    menuRef
+  ) => {
+    const {
+      hasMenuRef,
+      itemIndexRef,
+      previousIndexRef,
+      nextItemsHashRef,
+      popperReferenceElementRef,
+      itemSearchRegistry,
+      downshift: { isOpen, getMenuProps }
+    } = useDropdownContext();
+    const scheduleUpdateRef = useRef<(() => void) | undefined>(undefined);
+
+    useEffect(() => {
+      /**
+       * Recalculate popper placement while open to allow animations to complete.
+       * This must be ran every render to allow for the number of items to change
+       * and still be placed correctly.
+       **/
+      if (scheduleUpdateRef.current && isOpen) {
+        scheduleUpdateRef.current();
+      }
+    });
+
+    const [isVisible, setIsVisible] = useState(isOpen);
+
+    useEffect(() => {
+      let timeout: any;
+
+      if (isOpen) {
+        setIsVisible(true);
+      } else if (isAnimated) {
+        // Match the duration of the menu fade out transition.
+        timeout = setTimeout(() => setIsVisible(false), 200);
+      } else {
+        setIsVisible(false);
+      }
+
+      return () => clearTimeout(timeout);
+    }, [isOpen, isAnimated]);
+
+    const themeContext = useContext(ThemeContext);
+
+    // Reset Downshift refs on every render
+    itemIndexRef.current = 0;
+    nextItemsHashRef.current = {};
+    previousIndexRef.current = undefined;
+    itemSearchRegistry.current = [];
+
+    const popperPlacement = themeContext.rtl
+      ? getRtlPopperPlacement(placement!)
+      : getPopperPlacement(placement!);
+
+    return (
+      /* eslint-disable react/jsx-no-constructed-context-values */
+      <MenuContext.Provider value={{ itemIndexRef, isCompact }}>
+        <Popper
+          placement={popperPlacement as any}
+          modifiers={popperModifiers}
+          // Disable position updating on scroll events while menu is closed
+          eventsEnabled={!!(isOpen && eventsEnabled)}
+        >
+          {({ ref, style, scheduleUpdate, placement: currentPlacement }) => {
+            let computedStyle = menuStyle;
+
+            scheduleUpdateRef.current = scheduleUpdate;
+
+            // Calculate custom width if ref is provided from Select or Autocomplete
+            if (
+              (isOpen || isVisible) &&
+              popperReferenceElementRef.current &&
+              popperReferenceElementRef.current.getBoundingClientRect
+            ) {
+              computedStyle = {
+                width: popperReferenceElementRef.current.getBoundingClientRect().width,
+                ...menuStyle
+              };
+            }
+
+            const menuProps = getMenuProps({
+              role: hasMenuRef.current ? 'menu' : 'listbox',
+              ...other
+            });
+
+            const sharedProps = {
+              $hasArrow: hasArrow,
+              $isAnimated: isAnimated ? isOpen || isVisible : false,
+              $isCompact: isCompact,
+              $maxHeight: maxHeight,
+              $placement: currentPlacement as PopperPlacement
             };
-          }
-
-          const menuProps = getMenuProps({
-            role: hasMenuRef.current ? 'menu' : 'listbox',
-            ...other
-          });
-
-          const sharedProps = {
-            $hasArrow: hasArrow,
-            $isAnimated: isAnimated ? isOpen || isVisible : false,
-            $isCompact: isCompact,
-            $maxHeight: maxHeight,
-            $placement: currentPlacement as PopperPlacement
-          };
-
-          const menu = (
-            <StyledMenuWrapper
-              ref={isOpen ? ref : undefined}
-              $isHidden={!isOpen}
-              $zIndex={zIndex}
-              style={style}
-              {...sharedProps}
-            >
-              <StyledMenu ref={menuRef} style={computedStyle} {...sharedProps} {...menuProps}>
-                {!!(isOpen || isVisible) && children}
-              </StyledMenu>
-            </StyledMenuWrapper>
-          );
-
-          return appendToNode ? createPortal(menu, appendToNode) : menu;
-        }}
-      </Popper>
-    </MenuContext.Provider>
-  );
-});
+
+            const menu = (
+              <StyledMenuWrapper
+                ref={isOpen ? ref : undefined}
+                $isHidden={!isOpen}
+                $zIndex={zIndex}
+                style={style}
+                {...sharedProps}
+              >
+                <StyledMenu ref={menuRef} style={computedStyle} {...sharedProps} {...menuProps}>
+                  {!!(isOpen || isVisible) && children}
+                </StyledMenu>
+              </StyledMenuWrapper>
+            );
+
+            return appendToNode ? createPortal(menu, appendToNode) : menu;
+          }}
+        </Popper>
+      </MenuContext.Provider>
+    );
+  }
+);
 
 Menu.displayName = 'Menu';
 
@@ -160,11 +164,3 @@ Menu.propTypes = {
   hasArrow: PropTypes.bool,
   maxHeight: PropTypes.string
 };
-
-Menu.defaultProps = {
-  placement: 'bottom-start',
-  isAnimated: true,
-  eventsEnabled: true,
-  maxHeight: '400px',
-  zIndex: 1000
-};
diff --git a/packages/dropdowns.legacy/src/elements/Multiselect/Multiselect.tsx b/packages/dropdowns.legacy/src/elements/Multiselect/Multiselect.tsx
index 6df7a437f41..26487723011 100644
--- a/packages/dropdowns.legacy/src/elements/Multiselect/Multiselect.tsx
+++ b/packages/dropdowns.legacy/src/elements/Multiselect/Multiselect.tsx
@@ -45,7 +45,7 @@ export const Multiselect = React.forwardRef<HTMLDivElement, IMultiselectProps>(
     {
       renderItem,
       placeholder,
-      maxItems,
+      maxItems = 4,
       renderShowMore,
       inputRef: externalInputRef = null,
       start,
@@ -407,9 +407,4 @@ Multiselect.propTypes = {
   maxItems: PropTypes.number,
   validation: PropTypes.oneOf(['success', 'warning', 'error'])
 };
-
-Multiselect.defaultProps = {
-  maxItems: 4
-};
-
 Multiselect.displayName = 'Multiselect';
diff --git a/packages/dropdowns.legacy/src/elements/Trigger/Trigger.tsx b/packages/dropdowns.legacy/src/elements/Trigger/Trigger.tsx
index bbfc60219c1..bb7a49f16ed 100644
--- a/packages/dropdowns.legacy/src/elements/Trigger/Trigger.tsx
+++ b/packages/dropdowns.legacy/src/elements/Trigger/Trigger.tsx
@@ -18,7 +18,7 @@ import { ITriggerProps } from '../../types';
  *
  * @extends HTMLAttributes<HTMLElement>
  */
-export const Trigger = ({ children, refKey, ...triggerProps }: ITriggerProps) => {
+export const Trigger = ({ children, refKey = 'ref', ...triggerProps }: ITriggerProps) => {
   const {
     hasMenuRef,
     itemSearchRegistry,
@@ -242,7 +242,3 @@ Trigger.propTypes = {
   children: PropTypes.any,
   refKey: PropTypes.string
 };
-
-Trigger.defaultProps = {
-  refKey: 'ref'
-};
diff --git a/packages/dropdowns/src/elements/combobox/Combobox.tsx b/packages/dropdowns/src/elements/combobox/Combobox.tsx
index cd1b09b14d6..3a82bdaf8d4 100644
--- a/packages/dropdowns/src/elements/combobox/Combobox.tsx
+++ b/packages/dropdowns/src/elements/combobox/Combobox.tsx
@@ -59,14 +59,14 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
       isBare,
       isCompact,
       isDisabled,
-      isEditable,
+      isEditable = true,
       isExpanded: _isExpanded,
       isMultiselectable,
       listboxAppendToNode,
       listboxAriaLabel,
-      listboxMaxHeight,
+      listboxMaxHeight = '400px',
       listboxMinHeight,
-      listboxZIndex,
+      listboxZIndex = 1000,
       maxHeight,
       maxTags = MAX_TAGS,
       onChange,
@@ -386,10 +386,3 @@ Combobox.propTypes = {
   startIcon: PropTypes.any,
   validation: PropTypes.oneOf(VALIDATION)
 };
-
-Combobox.defaultProps = {
-  isEditable: true,
-  listboxMaxHeight: '400px',
-  listboxZIndex: 1000,
-  maxTags: MAX_TAGS
-};
diff --git a/packages/dropdowns/src/elements/menu/Menu.tsx b/packages/dropdowns/src/elements/menu/Menu.tsx
index 5381ebb3f58..dfa361f0573 100644
--- a/packages/dropdowns/src/elements/menu/Menu.tsx
+++ b/packages/dropdowns/src/elements/menu/Menu.tsx
@@ -36,6 +36,9 @@ export const Menu = forwardRef<HTMLUListElement, IMenuProps>(
       selectedItems,
       onChange,
       onMouseLeave,
+      maxHeight = '400px',
+      placement = 'bottom-start',
+      zIndex = 1000,
       ...props
     },
     ref
@@ -120,6 +123,9 @@ export const Menu = forwardRef<HTMLUListElement, IMenuProps>(
           {...props}
           {...getMenuProps({ onMouseLeave })}
           ref={mergeRefs([menuRef, ref])}
+          maxHeight={maxHeight}
+          placement={placement}
+          zIndex={zIndex}
           isCompact={isCompact}
           isExpanded={isExpanded}
           triggerRef={triggerRef}
@@ -152,9 +158,3 @@ Menu.propTypes = {
   selectedItems: PropTypes.arrayOf(PropTypes.any),
   zIndex: PropTypes.number
 };
-
-Menu.defaultProps = {
-  maxHeight: '400px',
-  placement: 'bottom-start',
-  zIndex: 1000
-};
diff --git a/packages/dropdowns/src/elements/menu/MenuList.tsx b/packages/dropdowns/src/elements/menu/MenuList.tsx
index 27151c93311..b124cb37ddc 100644
--- a/packages/dropdowns/src/elements/menu/MenuList.tsx
+++ b/packages/dropdowns/src/elements/menu/MenuList.tsx
@@ -40,11 +40,11 @@ export const MenuList = forwardRef<HTMLUListElement, IMenuListProps>(
       isCompact,
       isExpanded,
       fallbackPlacements: _fallbackPlacements,
-      maxHeight,
+      maxHeight = '400px',
       minHeight,
-      placement: _placement,
+      placement: _placement = 'bottom-start',
       triggerRef,
-      zIndex,
+      zIndex = 1000,
       children,
       ...props
     },
@@ -182,9 +182,3 @@ MenuList.propTypes = {
   triggerRef: PropTypes.any,
   zIndex: PropTypes.number
 };
-
-MenuList.defaultProps = {
-  maxHeight: '400px',
-  placement: PLACEMENT_DEFAULT,
-  zIndex: 1000
-};
diff --git a/packages/forms/src/elements/Range.tsx b/packages/forms/src/elements/Range.tsx
index bc71f6211d2..675d1854a90 100644
--- a/packages/forms/src/elements/Range.tsx
+++ b/packages/forms/src/elements/Range.tsx
@@ -16,7 +16,7 @@ import { StyledRangeInput } from '../styled';
  * @extends InputHTMLAttributes<HTMLInputElement>
  */
 export const Range = React.forwardRef<HTMLInputElement, IRangeProps>(
-  ({ hasLowerTrack, min, max, step, ...other }, ref) => {
+  ({ hasLowerTrack = true, min = 0, max = 100, step = 1, ...other }, ref) => {
     const [backgroundSize, setBackgroundSize] = useState('0');
     const rangeRef = useRef<HTMLInputElement>();
     const fieldContext = useFieldContext();
@@ -69,11 +69,4 @@ export const Range = React.forwardRef<HTMLInputElement, IRangeProps>(
   }
 );
 
-Range.defaultProps = {
-  hasLowerTrack: true,
-  min: 0,
-  max: 100,
-  step: 1
-};
-
 Range.displayName = 'Range';
diff --git a/packages/forms/src/elements/tiles/Tiles.tsx b/packages/forms/src/elements/tiles/Tiles.tsx
index 884827b6f81..75c82695fb2 100644
--- a/packages/forms/src/elements/tiles/Tiles.tsx
+++ b/packages/forms/src/elements/tiles/Tiles.tsx
@@ -16,7 +16,7 @@ import { Icon } from './components/Icon';
 import { Label } from './components/Label';
 
 const TilesComponent = forwardRef<HTMLDivElement, ITilesProps>(
-  ({ onChange, value: controlledValue, name, isCentered, ...props }, ref) => {
+  ({ onChange, value: controlledValue, name, isCentered = true, ...props }, ref) => {
     const [value, setValue] = useState(controlledValue);
 
     const handleOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
@@ -53,10 +53,6 @@ TilesComponent.propTypes = {
   isCentered: PropTypes.bool
 };
 
-TilesComponent.defaultProps = {
-  isCentered: true
-};
-
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
diff --git a/packages/forms/src/styled/range/StyledRangeInput.ts b/packages/forms/src/styled/range/StyledRangeInput.ts
index 0ca9c6fde03..41193177768 100644
--- a/packages/forms/src/styled/range/StyledRangeInput.ts
+++ b/packages/forms/src/styled/range/StyledRangeInput.ts
@@ -227,14 +227,19 @@ interface IStyledRangeInputProps {
   $hasLowerTrack?: boolean;
 }
 
-export const StyledRangeInput = styled.input.attrs<IStyledRangeInputProps>(props => ({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION,
-  type: 'range',
-  style: {
-    backgroundSize: props.$hasLowerTrack ? props.$backgroundSize : undefined
-  }
-}))<IStyledRangeInputProps>`
+export const StyledRangeInput = styled.input.attrs<IStyledRangeInputProps>(
+  ({ $hasLowerTrack = true, $backgroundSize = '0%', ...props }) => ({
+    'data-garden-id': COMPONENT_ID,
+    'data-garden-version': PACKAGE_VERSION,
+    type: 'range',
+    style: {
+      backgroundSize: $hasLowerTrack ? $backgroundSize : undefined
+    },
+    $backgroundSize,
+    $hasLowerTrack,
+    theme: props.theme ?? DEFAULT_THEME
+  })
+)`
   appearance: none;
   direction: ${props => props.theme.rtl && 'rtl'};
   margin: 0; /* reset for WebKit & Firefox */
@@ -292,9 +297,3 @@ export const StyledRangeInput = styled.input.attrs<IStyledRangeInputProps>(props
 
   ${componentStyles};
 `;
-
-StyledRangeInput.defaultProps = {
-  $backgroundSize: '0%',
-  $hasLowerTrack: true,
-  theme: DEFAULT_THEME
-};
diff --git a/packages/grid/src/elements/Grid.tsx b/packages/grid/src/elements/Grid.tsx
index ff2bac6973d..24ad85e77d2 100644
--- a/packages/grid/src/elements/Grid.tsx
+++ b/packages/grid/src/elements/Grid.tsx
@@ -14,7 +14,7 @@ import { Row } from './Row';
 import { Col } from './Col';
 
 export const GridComponent = React.forwardRef<HTMLDivElement, IGridProps>(
-  ({ columns, gutters, debug, ...other }, ref) => {
+  ({ columns = 12, gutters = 'md', debug, ...other }, ref) => {
     const value = useMemo(() => ({ columns, gutters: gutters!, debug }), [columns, gutters, debug]);
 
     return (
@@ -33,11 +33,6 @@ GridComponent.propTypes = {
   debug: PropTypes.bool
 };
 
-GridComponent.defaultProps = {
-  columns: 12,
-  gutters: 'md'
-};
-
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
diff --git a/packages/grid/src/elements/pane/components/Splitter.tsx b/packages/grid/src/elements/pane/components/Splitter.tsx
index 7a48e8b766a..34fa695c8c9 100644
--- a/packages/grid/src/elements/pane/components/Splitter.tsx
+++ b/packages/grid/src/elements/pane/components/Splitter.tsx
@@ -39,7 +39,7 @@ const SplitterComponent = forwardRef<HTMLDivElement, ISplitterProps>(
       layoutKey,
       min,
       max,
-      orientation,
+      orientation = 'end',
       isFixed,
       onMouseDown,
       onTouchStart,
@@ -152,10 +152,6 @@ SplitterComponent.propTypes = {
   isFixed: PropTypes.bool
 };
 
-SplitterComponent.defaultProps = {
-  orientation: 'end'
-};
-
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
diff --git a/packages/grid/src/styled/StyledCol.ts b/packages/grid/src/styled/StyledCol.ts
index ec4ee3e89de..3b0885a8b74 100644
--- a/packages/grid/src/styled/StyledCol.ts
+++ b/packages/grid/src/styled/StyledCol.ts
@@ -150,10 +150,12 @@ const sizeStyles = ({ theme, $gutters }: IStyledColProps) => {
   `;
 };
 
-export const StyledCol = styled.div.attrs<IStyledColProps>({
+export const StyledCol = styled.div.attrs<IStyledColProps>(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION
-})<IStyledColProps>`
+  'data-garden-version': PACKAGE_VERSION,
+  $columns: props.$columns ?? 12,
+  theme: props.theme ?? DEFAULT_THEME
+}))`
   box-sizing: border-box;
   width: 100%;
 
@@ -230,8 +232,3 @@ export const StyledCol = styled.div.attrs<IStyledColProps>({
 
   ${componentStyles};
 `;
-
-StyledCol.defaultProps = {
-  $columns: 12,
-  theme: DEFAULT_THEME
-};
diff --git a/packages/grid/src/styled/StyledGrid.ts b/packages/grid/src/styled/StyledGrid.ts
index ab68953b608..e9e7483d3e5 100644
--- a/packages/grid/src/styled/StyledGrid.ts
+++ b/packages/grid/src/styled/StyledGrid.ts
@@ -48,10 +48,12 @@ interface IStyledGridProps extends ThemeProps<DefaultTheme> {
   $gutters?: IGridProps['gutters'];
 }
 
-export const StyledGrid = styled.div.attrs<IStyledGridProps>({
+export const StyledGrid = styled.div.attrs<IStyledGridProps>(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION
-})<IStyledGridProps>`
+  'data-garden-version': PACKAGE_VERSION,
+  $gutters: props.$gutters ?? 'md',
+  theme: props.theme ?? DEFAULT_THEME
+}))`
   direction: ${props => props.theme.rtl && 'rtl'};
   margin-right: auto;
   margin-left: auto;
@@ -64,8 +66,3 @@ export const StyledGrid = styled.div.attrs<IStyledGridProps>({
 
   ${componentStyles};
 `;
-
-StyledGrid.defaultProps = {
-  $gutters: 'md',
-  theme: DEFAULT_THEME
-};
diff --git a/packages/grid/src/styled/StyledRow.ts b/packages/grid/src/styled/StyledRow.ts
index d876a9fffa3..89cad3ac02b 100644
--- a/packages/grid/src/styled/StyledRow.ts
+++ b/packages/grid/src/styled/StyledRow.ts
@@ -99,10 +99,12 @@ const sizeStyles = ({ theme, $gutters }: IStyledRowProps) => {
   `;
 };
 
-export const StyledRow = styled.div.attrs<IStyledRowProps>({
+export const StyledRow = styled.div.attrs<IStyledRowProps>(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION
-})<IStyledRowProps>`
+  'data-garden-version': PACKAGE_VERSION,
+  $wrapAll: props.$wrapAll ?? 'wrap',
+  theme: props.theme ?? DEFAULT_THEME
+}))`
   display: flex;
   box-sizing: border-box;
 
@@ -154,8 +156,3 @@ export const StyledRow = styled.div.attrs<IStyledRowProps>({
 
   ${componentStyles};
 `;
-
-StyledRow.defaultProps = {
-  $wrapAll: 'wrap',
-  theme: DEFAULT_THEME
-};
diff --git a/packages/loaders/src/elements/Dots.tsx b/packages/loaders/src/elements/Dots.tsx
index bcbd644b7e8..65e5e177eec 100644
--- a/packages/loaders/src/elements/Dots.tsx
+++ b/packages/loaders/src/elements/Dots.tsx
@@ -25,7 +25,7 @@ const COMPONENT_ID = 'loaders.dots';
  * @extends SVGAttributes<SVGSVGElement>
  */
 export const Dots = forwardRef<SVGSVGElement, IDotsProps>(
-  ({ size, color, duration, delayMS, ...other }, ref) => {
+  ({ size = 'inherit', color = 'inherit', duration = 1250, delayMS = 750, ...other }, ref) => {
     const theme = useContext(ThemeContext);
     const environment = useDocument(theme);
     const canTransformSVG = useRef<boolean | null>(null);
@@ -87,10 +87,3 @@ Dots.propTypes = {
   color: PropTypes.string,
   delayMS: PropTypes.number
 };
-
-Dots.defaultProps = {
-  size: 'inherit',
-  color: 'inherit',
-  duration: 1250,
-  delayMS: 750
-};
diff --git a/packages/loaders/src/elements/Inline.tsx b/packages/loaders/src/elements/Inline.tsx
index e55fb1ce89e..2bf9a80efd8 100644
--- a/packages/loaders/src/elements/Inline.tsx
+++ b/packages/loaders/src/elements/Inline.tsx
@@ -20,26 +20,28 @@ import { StyledInline, StyledCircle } from '../styled';
 /**
  * @extends SVGAttributes<SVGSVGElement>
  */
-export const Inline = forwardRef<SVGSVGElement, IInlineProps>(({ size, color, ...other }, ref) => {
-  const ariaLabel = useText(Inline, other, 'aria-label', 'loading');
-
-  return (
-    // [1]
-    // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
-    <StyledInline
-      ref={ref}
-      $size={size!}
-      $color={color!}
-      aria-label={ariaLabel}
-      role="img"
-      {...other}
-    >
-      <StyledCircle cx="14" />
-      <StyledCircle cx="8" />
-      <StyledCircle cx="2" />
-    </StyledInline>
-  );
-});
+export const Inline = forwardRef<SVGSVGElement, IInlineProps>(
+  ({ size = 16, color = 'inherit', ...other }, ref) => {
+    const ariaLabel = useText(Inline, other, 'aria-label', 'loading');
+
+    return (
+      // [1]
+      // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
+      <StyledInline
+        ref={ref}
+        $size={size!}
+        $color={color!}
+        aria-label={ariaLabel}
+        role="img"
+        {...other}
+      >
+        <StyledCircle cx="14" />
+        <StyledCircle cx="8" />
+        <StyledCircle cx="2" />
+      </StyledInline>
+    );
+  }
+);
 
 Inline.displayName = 'Inline';
 
@@ -47,8 +49,3 @@ Inline.propTypes = {
   size: PropTypes.number,
   color: PropTypes.string
 };
-
-Inline.defaultProps = {
-  size: 16,
-  color: 'inherit'
-};
diff --git a/packages/loaders/src/elements/Progress.tsx b/packages/loaders/src/elements/Progress.tsx
index cab2c44ed71..5aa882f530f 100644
--- a/packages/loaders/src/elements/Progress.tsx
+++ b/packages/loaders/src/elements/Progress.tsx
@@ -23,7 +23,7 @@ const COMPONENT_ID = 'loaders.progress';
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const Progress = React.forwardRef<HTMLDivElement, IProgressProps>(
-  ({ color, value, size, 'aria-label': label, ...other }, ref) => {
+  ({ color, value = 0, size = 'medium', 'aria-label': label, ...other }, ref) => {
     const percentage = Math.max(0, Math.min(100, value!));
 
     const ariaLabel = useText(Progress, { 'aria-label': label }, 'aria-label', 'Progress');
@@ -57,8 +57,3 @@ Progress.propTypes = {
   value: PropTypes.number.isRequired,
   size: PropTypes.oneOf(SIZE)
 };
-
-Progress.defaultProps = {
-  value: 0,
-  size: 'medium'
-};
diff --git a/packages/loaders/src/elements/Skeleton.tsx b/packages/loaders/src/elements/Skeleton.tsx
index 010b71d02d9..1a9bec91b0e 100644
--- a/packages/loaders/src/elements/Skeleton.tsx
+++ b/packages/loaders/src/elements/Skeleton.tsx
@@ -14,7 +14,7 @@ import { StyledSkeleton } from '../styled';
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const Skeleton = forwardRef<HTMLDivElement, ISkeletonProps>(
-  ({ width, height, isLight, ...other }, ref) => {
+  ({ width = '100%', height = '100%', isLight, ...other }, ref) => {
     return (
       <StyledSkeleton ref={ref} $isLight={isLight} $width={width} $height={height} {...other}>
         &nbsp;
@@ -30,8 +30,3 @@ Skeleton.propTypes = {
   height: PropTypes.string,
   isLight: PropTypes.bool
 };
-
-Skeleton.defaultProps = {
-  width: '100%',
-  height: '100%'
-};
diff --git a/packages/loaders/src/elements/Spinner.tsx b/packages/loaders/src/elements/Spinner.tsx
index 250b84328a8..6b24acf803b 100644
--- a/packages/loaders/src/elements/Spinner.tsx
+++ b/packages/loaders/src/elements/Spinner.tsx
@@ -49,7 +49,7 @@ const computeFrames = (
  * @extends SVGAttributes<SVGSVGElement>
  */
 export const Spinner = forwardRef<SVGSVGElement, ISpinnerProps>(
-  ({ size, duration, color, delayMS, ...other }, ref) => {
+  ({ size = 'inherit', duration = 1250, color = 'inherit', delayMS = 750, ...other }, ref) => {
     const strokeWidthValues = computeFrames(STROKE_WIDTH_FRAMES, duration!);
     const rotationValues = computeFrames(ROTATION_FRAMES, duration!);
     const dasharrayValues = computeFrames(DASHARRAY_FRAMES, duration!);
@@ -102,10 +102,3 @@ Spinner.propTypes = {
   color: PropTypes.string,
   delayMS: PropTypes.number
 };
-
-Spinner.defaultProps = {
-  size: 'inherit',
-  duration: 1250,
-  color: 'inherit',
-  delayMS: 750
-};
diff --git a/packages/modals/src/elements/Drawer/Drawer.tsx b/packages/modals/src/elements/Drawer/Drawer.tsx
index a9a2f411aca..f79908c1750 100644
--- a/packages/modals/src/elements/Drawer/Drawer.tsx
+++ b/packages/modals/src/elements/Drawer/Drawer.tsx
@@ -41,7 +41,16 @@ import { FooterItem } from './FooterItem';
 
 const DrawerComponent = forwardRef<HTMLDivElement, IDrawerProps>(
   (
-    { id, isOpen, onClose, backdropProps, appendToNode, focusOnMount, restoreFocus, ...props },
+    {
+      id,
+      isOpen,
+      onClose,
+      backdropProps,
+      appendToNode,
+      focusOnMount = true,
+      restoreFocus = true,
+      ...props
+    },
     ref
   ) => {
     const modalRef = useRef<HTMLDivElement | null>(null);
@@ -189,11 +198,6 @@ DrawerComponent.propTypes = {
   isOpen: PropTypes.bool
 };
 
-DrawerComponent.defaultProps = {
-  focusOnMount: true /* [1:d] */,
-  restoreFocus: true /* [1:d] */
-};
-
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
diff --git a/packages/modals/src/elements/Drawer/Header.tsx b/packages/modals/src/elements/Drawer/Header.tsx
index 93e265b0ba4..8ba2667939d 100644
--- a/packages/modals/src/elements/Drawer/Header.tsx
+++ b/packages/modals/src/elements/Drawer/Header.tsx
@@ -11,30 +11,32 @@ import { useModalContext } from '../../utils/useModalContext';
 import { StyledDrawerHeader } from '../../styled';
 import { IDrawerHeaderProps } from '../../types';
 
-const HeaderComponent = forwardRef<HTMLDivElement, IDrawerHeaderProps>(({ tag, ...other }, ref) => {
-  const { isCloseButtonPresent, hasHeader, setHasHeader, getTitleProps } = useModalContext();
+const HeaderComponent = forwardRef<HTMLDivElement, IDrawerHeaderProps>(
+  ({ tag = 'div', ...other }, ref) => {
+    const { isCloseButtonPresent, hasHeader, setHasHeader, getTitleProps } = useModalContext();
 
-  useEffect(() => {
-    if (!hasHeader && setHasHeader) {
-      setHasHeader(true);
-    }
-
-    return () => {
-      if (hasHeader && setHasHeader) {
-        setHasHeader(false);
+    useEffect(() => {
+      if (!hasHeader && setHasHeader) {
+        setHasHeader(true);
       }
-    };
-  }, [hasHeader, setHasHeader]);
-
-  return (
-    <StyledDrawerHeader
-      {...(getTitleProps(other) as HTMLAttributes<HTMLDivElement>)}
-      as={tag}
-      $isCloseButtonPresent={isCloseButtonPresent}
-      ref={ref}
-    />
-  );
-});
+
+      return () => {
+        if (hasHeader && setHasHeader) {
+          setHasHeader(false);
+        }
+      };
+    }, [hasHeader, setHasHeader]);
+
+    return (
+      <StyledDrawerHeader
+        {...(getTitleProps(other) as HTMLAttributes<HTMLDivElement>)}
+        as={tag}
+        $isCloseButtonPresent={isCloseButtonPresent}
+        ref={ref}
+      />
+    );
+  }
+);
 
 HeaderComponent.displayName = 'Drawer.Header';
 
@@ -42,10 +44,6 @@ HeaderComponent.propTypes = {
   tag: PropTypes.any
 };
 
-HeaderComponent.defaultProps = {
-  tag: 'div'
-};
-
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
diff --git a/packages/modals/src/elements/Header.tsx b/packages/modals/src/elements/Header.tsx
index e2673e71104..62822f1d8a4 100644
--- a/packages/modals/src/elements/Header.tsx
+++ b/packages/modals/src/elements/Header.tsx
@@ -17,7 +17,7 @@ import { IHeaderProps } from '../types';
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const Header = forwardRef<HTMLDivElement, IHeaderProps>(
-  ({ children, isDanger, tag, ...other }, ref) => {
+  ({ children, isDanger, tag = 'div', ...other }, ref) => {
     const { isCloseButtonPresent, hasHeader, setHasHeader, getTitleProps } = useModalContext();
 
     useEffect(() => {
@@ -53,7 +53,3 @@ Header.propTypes = {
   isDanger: PropTypes.bool,
   tag: PropTypes.any
 };
-
-Header.defaultProps = {
-  tag: 'div'
-};
diff --git a/packages/modals/src/elements/Modal.tsx b/packages/modals/src/elements/Modal.tsx
index c0cc0997326..8e181b952c7 100644
--- a/packages/modals/src/elements/Modal.tsx
+++ b/packages/modals/src/elements/Modal.tsx
@@ -59,8 +59,8 @@ export const ModalComponent = forwardRef<HTMLDivElement, IModalProps>(
       children,
       onClose,
       isLarge,
-      isCentered,
-      isAnimated,
+      isCentered = true,
+      isAnimated = true,
       id,
       appendToNode,
       focusOnMount,
@@ -205,11 +205,6 @@ ModalComponent.propTypes = {
   appendToNode: PropTypes.any
 };
 
-ModalComponent.defaultProps = {
-  isAnimated: true,
-  isCentered: true
-};
-
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
diff --git a/packages/modals/src/elements/TooltipDialog/Title.tsx b/packages/modals/src/elements/TooltipDialog/Title.tsx
index 447bf3d3fa7..f7ebc1b5144 100644
--- a/packages/modals/src/elements/TooltipDialog/Title.tsx
+++ b/packages/modals/src/elements/TooltipDialog/Title.tsx
@@ -12,7 +12,7 @@ import { StyledTooltipDialogTitle } from '../../styled';
 import { ITooltipDialogTitleProps } from '../../types';
 
 const TitleComponent = forwardRef<HTMLDivElement, ITooltipDialogTitleProps>(
-  ({ children, tag, ...other }, ref) => {
+  ({ children, tag = 'div', ...other }, ref) => {
     const { getTitleProps, hasTitle, setHasTitle } = useTooltipDialogContext();
 
     useEffect(() => {
@@ -45,10 +45,6 @@ TitleComponent.propTypes = {
   tag: PropTypes.any
 };
 
-TitleComponent.defaultProps = {
-  tag: 'div'
-};
-
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
diff --git a/packages/modals/src/elements/TooltipDialog/TooltipDialog.tsx b/packages/modals/src/elements/TooltipDialog/TooltipDialog.tsx
index 75798817d67..0e61a7180d2 100644
--- a/packages/modals/src/elements/TooltipDialog/TooltipDialog.tsx
+++ b/packages/modals/src/elements/TooltipDialog/TooltipDialog.tsx
@@ -34,15 +34,15 @@ const TooltipDialogComponent = React.forwardRef<HTMLDivElement, ITooltipDialogPr
     {
       appendToNode,
       referenceElement,
-      placement: _placement,
+      placement: _placement = 'auto',
       offset: _offset,
       onClose,
-      hasArrow,
-      isAnimated,
+      hasArrow = true,
+      isAnimated = true,
       zIndex,
       backdropProps,
-      focusOnMount,
-      restoreFocus,
+      focusOnMount = true,
+      restoreFocus = true,
       id,
       ...props
     },
@@ -183,13 +183,6 @@ const TooltipDialogComponent = React.forwardRef<HTMLDivElement, ITooltipDialogPr
 
 TooltipDialogComponent.displayName = 'TooltipDialog';
 
-TooltipDialogComponent.defaultProps = {
-  placement: 'auto',
-  hasArrow: true,
-  focusOnMount: true,
-  restoreFocus: true
-};
-
 TooltipDialogComponent.propTypes = {
   appendToNode: PropTypes.any,
   referenceElement: PropTypes.any,
diff --git a/packages/notifications/src/elements/toaster/ToastProvider.tsx b/packages/notifications/src/elements/toaster/ToastProvider.tsx
index 283c9685f86..0478c77ddc0 100644
--- a/packages/notifications/src/elements/toaster/ToastProvider.tsx
+++ b/packages/notifications/src/elements/toaster/ToastProvider.tsx
@@ -13,7 +13,7 @@ import { ToastContext } from './ToastContext';
 import { ToastSlot } from './ToastSlot';
 
 export const ToastProvider = ({
-  limit,
+  limit = 4,
   zIndex,
   placementProps = {},
   children
@@ -58,10 +58,6 @@ export const ToastProvider = ({
 
 ToastProvider.displayName = 'ToastProvider';
 
-ToastProvider.defaultProps = {
-  limit: 4
-};
-
 ToastProvider.propTypes = {
   limit: PropTypes.number,
   zIndex: PropTypes.number,
diff --git a/packages/pagination/src/elements/OffsetPagination/OffsetPagination.tsx b/packages/pagination/src/elements/OffsetPagination/OffsetPagination.tsx
index 3d586942eaf..e26e00da80e 100644
--- a/packages/pagination/src/elements/OffsetPagination/OffsetPagination.tsx
+++ b/packages/pagination/src/elements/OffsetPagination/OffsetPagination.tsx
@@ -27,8 +27,8 @@ export const OffsetPagination = forwardRef<HTMLUListElement, IPaginationProps>(
     {
       currentPage: controlledCurrentPage,
       totalPages,
-      pagePadding,
-      pageGap,
+      pagePadding = 2,
+      pageGap = 2,
       onChange,
       'aria-label': ariaLabel,
       labels,
@@ -215,9 +215,4 @@ OffsetPagination.propTypes = {
   labels: PropTypes.any
 };
 
-OffsetPagination.defaultProps = {
-  pagePadding: 2,
-  pageGap: 2
-};
-
 OffsetPagination.displayName = 'OffsetPagination';
diff --git a/packages/tables/src/elements/Table.tsx b/packages/tables/src/elements/Table.tsx
index dd351609de3..6f9c898c38a 100644
--- a/packages/tables/src/elements/Table.tsx
+++ b/packages/tables/src/elements/Table.tsx
@@ -25,7 +25,7 @@ import { SortableCell } from './SortableCell';
  * @extends TableHTMLAttributes<HTMLTableElement>
  */
 export const TableComponent = React.forwardRef<HTMLTableElement, ITableProps>(
-  ({ isReadOnly, size, ...props }, ref) => {
+  ({ isReadOnly, size = 'medium', ...props }, ref) => {
     const tableContextValue = useMemo(
       () => ({ size: size!, isReadOnly: isReadOnly! }),
       [size, isReadOnly]
@@ -41,10 +41,6 @@ export const TableComponent = React.forwardRef<HTMLTableElement, ITableProps>(
 
 TableComponent.displayName = 'Table';
 
-TableComponent.defaultProps = {
-  size: 'medium'
-};
-
 TableComponent.propTypes = {
   size: PropTypes.oneOf(SIZE),
   isReadOnly: PropTypes.bool
diff --git a/packages/tabs/src/elements/Tabs.tsx b/packages/tabs/src/elements/Tabs.tsx
index f68a9d58091..559781910c4 100644
--- a/packages/tabs/src/elements/Tabs.tsx
+++ b/packages/tabs/src/elements/Tabs.tsx
@@ -21,7 +21,7 @@ import { TabPanel } from './TabPanel';
 
 export const TabsComponent = forwardRef<HTMLDivElement, ITabsProps>(
   (
-    { isVertical, children, onChange, selectedItem: controlledSelectedItem, ...otherProps },
+    { isVertical = false, children, onChange, selectedItem: controlledSelectedItem, ...otherProps },
     ref
   ) => {
     const theme = useContext(ThemeContext) || DEFAULT_THEME;
@@ -66,10 +66,6 @@ TabsComponent.propTypes = {
   onChange: PropTypes.func
 };
 
-TabsComponent.defaultProps = {
-  isVertical: false
-};
-
 TabsComponent.displayName = 'Tabs';
 
 /**
diff --git a/packages/tags/src/elements/Tag.tsx b/packages/tags/src/elements/Tag.tsx
index 1ab4504210c..43aae4c003e 100644
--- a/packages/tags/src/elements/Tag.tsx
+++ b/packages/tags/src/elements/Tag.tsx
@@ -13,7 +13,7 @@ import { Close } from './Close';
 import { Avatar } from './Avatar';
 
 const TagComponent = forwardRef<HTMLDivElement, ITagProps>(
-  ({ isPill, isRound, isRegular, size, hue, ...other }, ref) => (
+  ({ isPill, isRound, isRegular, size = 'medium', hue, ...other }, ref) => (
     <StyledTag
       $hue={hue}
       $isPill={isPill}
@@ -36,10 +36,6 @@ TagComponent.propTypes = {
   isRegular: PropTypes.bool
 };
 
-TagComponent.defaultProps = {
-  size: 'medium'
-};
-
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
diff --git a/packages/tags/src/styled/StyledTag.ts b/packages/tags/src/styled/StyledTag.ts
index d269e3c88ce..fa8d7a06db2 100644
--- a/packages/tags/src/styled/StyledTag.ts
+++ b/packages/tags/src/styled/StyledTag.ts
@@ -211,10 +211,12 @@ const sizeStyles = ({ $isPill, $isRound, $size, theme }: IStyledTagProps) => {
   `;
 };
 
-export const StyledTag = styled.div.attrs<IStyledTagProps>({
+export const StyledTag = styled.div.attrs<IStyledTagProps>(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION
-})<IStyledTagProps>`
+  'data-garden-version': PACKAGE_VERSION,
+  theme: props.theme ?? DEFAULT_THEME,
+  $size: props.$size ?? 'medium'
+}))<IStyledTagProps>`
   display: inline-flex;
   flex-wrap: nowrap;
   align-items: center;
@@ -273,8 +275,3 @@ export const StyledTag = styled.div.attrs<IStyledTagProps>({
 
   ${componentStyles};
 `;
-
-StyledTag.defaultProps = {
-  $size: 'medium',
-  theme: DEFAULT_THEME
-};
diff --git a/packages/tooltips/src/elements/Tooltip.tsx b/packages/tooltips/src/elements/Tooltip.tsx
index 55c166ac843..1388a307871 100644
--- a/packages/tooltips/src/elements/Tooltip.tsx
+++ b/packages/tooltips/src/elements/Tooltip.tsx
@@ -24,15 +24,15 @@ export const PLACEMENT_DEFAULT = 'top';
 
 export const TooltipComponent = ({
   id,
-  delayMS,
+  delayMS = 500,
   isInitialVisible,
   content,
-  refKey,
-  placement: _placement,
+  refKey = 'ref',
+  placement = PLACEMENT_DEFAULT,
   children,
-  hasArrow,
+  hasArrow = true,
   size,
-  type,
+  type = 'dark',
   appendToNode,
   zIndex,
   isVisible: externalIsVisible,
@@ -53,12 +53,12 @@ export const TooltipComponent = ({
   const controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
   const [floatingPlacement] = getFloatingPlacements(
     theme,
-    _placement === 'auto' ? PLACEMENT_DEFAULT : _placement!
+    placement === 'auto' ? PLACEMENT_DEFAULT : placement!
   );
 
   const {
     refs,
-    placement,
+    placement: $placement,
     update,
     floatingStyles: { transform }
   } = useFloating({
@@ -68,7 +68,7 @@ export const TooltipComponent = ({
     },
     elements: { reference: triggerRef?.current, floating: floatingRef?.current },
     placement: floatingPlacement,
-    middleware: _placement === 'auto' ? [autoPlacement()] : undefined
+    middleware: placement === 'auto' ? [autoPlacement()] : undefined
   });
 
   useEffect(() => {
@@ -99,7 +99,7 @@ export const TooltipComponent = ({
         {...(getTooltipProps({
           'aria-hidden': !controlledIsVisible,
           $hasArrow: hasArrow,
-          $placement: placement,
+          $placement,
           $size: toSize(size, type),
           $type: type,
           onBlur: composeEventHandlers(onBlur, () => closeTooltip(0)),
@@ -142,14 +142,6 @@ TooltipComponent.propTypes = {
   refKey: PropTypes.string
 };
 
-TooltipComponent.defaultProps = {
-  hasArrow: true,
-  type: 'dark',
-  placement: PLACEMENT_DEFAULT,
-  delayMS: 500,
-  refKey: 'ref'
-};
-
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
diff --git a/packages/typography/src/elements/Blockquote.tsx b/packages/typography/src/elements/Blockquote.tsx
index 0e1f45e3e64..a30380b8aab 100644
--- a/packages/typography/src/elements/Blockquote.tsx
+++ b/packages/typography/src/elements/Blockquote.tsx
@@ -13,16 +13,12 @@ import { StyledBlockquote } from '../styled';
 /**
  * @extends BlockquoteHTMLAttributes<HTMLQuoteElement>
  */
-export const Blockquote = forwardRef<HTMLQuoteElement, IBlockquoteProps>((props, ref) => (
-  <StyledBlockquote ref={ref} {...props} />
-));
+export const Blockquote = forwardRef<HTMLQuoteElement, IBlockquoteProps>(
+  ({ size = 'medium', ...props }, ref) => <StyledBlockquote ref={ref} {...props} size={size} />
+);
 
 Blockquote.displayName = 'Blockquote';
 
 Blockquote.propTypes = {
   size: PropTypes.oneOf(SIZE)
 };
-
-Blockquote.defaultProps = {
-  size: 'medium'
-};
diff --git a/packages/typography/src/elements/Code.tsx b/packages/typography/src/elements/Code.tsx
index f0237d6c7c4..733346f7a09 100644
--- a/packages/typography/src/elements/Code.tsx
+++ b/packages/typography/src/elements/Code.tsx
@@ -13,9 +13,11 @@ import { StyledCode } from '../styled';
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
-export const Code = forwardRef<HTMLElement, ICodeProps>(({ hue, size, ...other }, ref) => (
-  <StyledCode ref={ref} $hue={hue} $size={size} {...other} />
-));
+export const Code = forwardRef<HTMLElement, ICodeProps>(
+  ({ hue = 'grey', size = 'inherit', ...other }, ref) => (
+    <StyledCode ref={ref} $hue={hue} $size={size} {...other} />
+  )
+);
 
 Code.displayName = 'Code';
 
@@ -23,8 +25,3 @@ Code.propTypes = {
   hue: PropTypes.oneOf(HUE),
   size: PropTypes.oneOf(INHERIT_SIZE)
 };
-
-Code.defaultProps = {
-  hue: 'grey',
-  size: 'inherit'
-};
diff --git a/packages/typography/src/elements/Ellipsis.tsx b/packages/typography/src/elements/Ellipsis.tsx
index de87948b1a5..c62191ac51f 100644
--- a/packages/typography/src/elements/Ellipsis.tsx
+++ b/packages/typography/src/elements/Ellipsis.tsx
@@ -14,7 +14,7 @@ import { IEllipsisProps } from '../types';
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const Ellipsis = forwardRef<HTMLDivElement, IEllipsisProps>(
-  ({ children, title, tag, ...other }, ref) => {
+  ({ children, title, tag = 'div', ...other }, ref) => {
     let textContent = undefined;
 
     if (title !== undefined) {
@@ -37,7 +37,3 @@ Ellipsis.propTypes = {
   title: PropTypes.string,
   tag: PropTypes.any
 };
-
-Ellipsis.defaultProps = {
-  tag: 'div'
-};
diff --git a/packages/typography/src/elements/LG.tsx b/packages/typography/src/elements/LG.tsx
index 57f5c34cb1d..674e1b59cc7 100644
--- a/packages/typography/src/elements/LG.tsx
+++ b/packages/typography/src/elements/LG.tsx
@@ -14,7 +14,7 @@ import { ITypescaleMonospaceProps } from '../types';
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const LG = forwardRef<HTMLDivElement, ITypescaleMonospaceProps>(
-  ({ isBold, isMonospace, tag, ...other }, ref) => (
+  ({ isBold, isMonospace, tag = 'div', ...other }, ref) => (
     <StyledFont
       $isBold={isBold}
       $isMonospace={isMonospace}
@@ -33,7 +33,3 @@ LG.propTypes = {
   isBold: PropTypes.bool,
   isMonospace: PropTypes.bool
 };
-
-LG.defaultProps = {
-  tag: 'div'
-};
diff --git a/packages/typography/src/elements/MD.tsx b/packages/typography/src/elements/MD.tsx
index 288705cd534..fb4155be86f 100644
--- a/packages/typography/src/elements/MD.tsx
+++ b/packages/typography/src/elements/MD.tsx
@@ -14,7 +14,7 @@ import { StyledFont } from '../styled';
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const MD = forwardRef<HTMLDivElement, ITypescaleMonospaceProps>(
-  ({ isBold, isMonospace, tag, ...other }, ref) => (
+  ({ isBold, isMonospace, tag = 'div', ...other }, ref) => (
     <StyledFont
       $isBold={isBold}
       $isMonospace={isMonospace}
@@ -33,7 +33,3 @@ MD.propTypes = {
   isBold: PropTypes.bool,
   isMonospace: PropTypes.bool
 };
-
-MD.defaultProps = {
-  tag: 'div'
-};
diff --git a/packages/typography/src/elements/Paragraph.tsx b/packages/typography/src/elements/Paragraph.tsx
index f8596c9b9da..31a3b52f1b1 100644
--- a/packages/typography/src/elements/Paragraph.tsx
+++ b/packages/typography/src/elements/Paragraph.tsx
@@ -13,16 +13,12 @@ import { StyledParagraph } from '../styled';
 /**
  * @extends HTMLAttributes<HTMLParagraphElement>
  */
-export const Paragraph = forwardRef<HTMLParagraphElement, IParagraphProps>((props, ref) => (
-  <StyledParagraph ref={ref} {...props} />
-));
+export const Paragraph = forwardRef<HTMLParagraphElement, IParagraphProps>(
+  ({ size = 'medium', ...props }, ref) => <StyledParagraph ref={ref} size={size} {...props} />
+);
 
 Paragraph.displayName = 'Paragraph';
 
 Paragraph.propTypes = {
   size: PropTypes.oneOf(SIZE)
 };
-
-Paragraph.defaultProps = {
-  size: 'medium'
-};
diff --git a/packages/typography/src/elements/SM.tsx b/packages/typography/src/elements/SM.tsx
index 7dd978c0bee..b192aa93196 100644
--- a/packages/typography/src/elements/SM.tsx
+++ b/packages/typography/src/elements/SM.tsx
@@ -14,7 +14,7 @@ import { StyledFont } from '../styled';
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const SM = forwardRef<HTMLDivElement, ITypescaleMonospaceProps>(
-  ({ isBold, isMonospace, tag, ...other }, ref) => (
+  ({ isBold, isMonospace, tag = 'div', ...other }, ref) => (
     <StyledFont
       $isBold={isBold}
       $isMonospace={isMonospace}
@@ -33,7 +33,3 @@ SM.propTypes = {
   isBold: PropTypes.bool,
   isMonospace: PropTypes.bool
 };
-
-SM.defaultProps = {
-  tag: 'div'
-};
diff --git a/packages/typography/src/elements/XL.tsx b/packages/typography/src/elements/XL.tsx
index 83a582306d4..78af08bb9a3 100644
--- a/packages/typography/src/elements/XL.tsx
+++ b/packages/typography/src/elements/XL.tsx
@@ -13,9 +13,11 @@ import { StyledFont } from '../styled';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export const XL = forwardRef<HTMLDivElement, ITypescaleProps>(({ isBold, tag, ...other }, ref) => (
-  <StyledFont $size="extralarge" $isBold={isBold} ref={ref} as={tag} {...other} />
-));
+export const XL = forwardRef<HTMLDivElement, ITypescaleProps>(
+  ({ isBold, tag = 'div', ...other }, ref) => (
+    <StyledFont $size="extralarge" $isBold={isBold} ref={ref} as={tag} {...other} />
+  )
+);
 
 XL.displayName = 'XL';
 
@@ -23,7 +25,3 @@ XL.propTypes = {
   tag: PropTypes.any,
   isBold: PropTypes.bool
 };
-
-XL.defaultProps = {
-  tag: 'div'
-};
diff --git a/packages/typography/src/elements/XXL.tsx b/packages/typography/src/elements/XXL.tsx
index 655e9dc872d..c93d2d748da 100644
--- a/packages/typography/src/elements/XXL.tsx
+++ b/packages/typography/src/elements/XXL.tsx
@@ -13,9 +13,11 @@ import { StyledFont } from '../styled';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export const XXL = forwardRef<HTMLDivElement, ITypescaleProps>(({ isBold, tag, ...other }, ref) => (
-  <StyledFont $size="2xlarge" $isBold={isBold} ref={ref} as={tag} {...other} />
-));
+export const XXL = forwardRef<HTMLDivElement, ITypescaleProps>(
+  ({ isBold, tag = 'div', ...other }, ref) => (
+    <StyledFont $size="2xlarge" $isBold={isBold} ref={ref} as={tag} {...other} />
+  )
+);
 
 XXL.displayName = 'XXL';
 
@@ -23,7 +25,3 @@ XXL.propTypes = {
   tag: PropTypes.any,
   isBold: PropTypes.bool
 };
-
-XXL.defaultProps = {
-  tag: 'div'
-};
diff --git a/packages/typography/src/elements/XXXL.tsx b/packages/typography/src/elements/XXXL.tsx
index e9f57584af7..ff43e8605d7 100644
--- a/packages/typography/src/elements/XXXL.tsx
+++ b/packages/typography/src/elements/XXXL.tsx
@@ -14,7 +14,7 @@ import { ITypescaleProps } from '../types';
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const XXXL = forwardRef<HTMLDivElement, ITypescaleProps>(
-  ({ isBold, tag, ...other }, ref) => (
+  ({ isBold, tag = 'div', ...other }, ref) => (
     <StyledFont $isBold={isBold} $size="3xlarge" {...other} as={tag} ref={ref} />
   )
 );
@@ -25,7 +25,3 @@ XXXL.propTypes = {
   tag: PropTypes.any,
   isBold: PropTypes.bool
 };
-
-XXXL.defaultProps = {
-  tag: 'div'
-};
diff --git a/packages/typography/src/elements/lists/OrderedList.tsx b/packages/typography/src/elements/lists/OrderedList.tsx
index fe4a297ff5a..15620a1c790 100644
--- a/packages/typography/src/elements/lists/OrderedList.tsx
+++ b/packages/typography/src/elements/lists/OrderedList.tsx
@@ -13,7 +13,7 @@ import { OrderedListContext } from '../../utils/useOrderedListContext';
 import { StyledOrderedList } from '../../styled';
 
 const OrderedListComponent = React.forwardRef<HTMLOListElement, IOrderedListProps>(
-  ({ size, type, ...other }, ref) => {
+  ({ size = 'medium', type = 'decimal', ...other }, ref) => {
     const value = useMemo(() => ({ size: size! }), [size]);
 
     return (
@@ -31,11 +31,6 @@ OrderedListComponent.propTypes = {
   type: PropTypes.oneOf(TYPE_ORDERED_LIST)
 };
 
-OrderedListComponent.defaultProps = {
-  size: 'medium',
-  type: 'decimal'
-};
-
 /**
  * @extends OlHTMLAttributes<HTMLOListElement>
  */
diff --git a/packages/typography/src/elements/lists/UnorderedList.tsx b/packages/typography/src/elements/lists/UnorderedList.tsx
index fd4acf3874c..695e731fe3c 100644
--- a/packages/typography/src/elements/lists/UnorderedList.tsx
+++ b/packages/typography/src/elements/lists/UnorderedList.tsx
@@ -13,7 +13,7 @@ import { UnorderedListContext } from '../../utils/useUnorderedListContext';
 import { StyledUnorderedList } from '../../styled';
 
 const UnorderedListComponent = forwardRef<HTMLUListElement, IUnorderedListProps>(
-  ({ size, type, ...other }, ref) => {
+  ({ size = 'medium', type = 'disc', ...other }, ref) => {
     const value = useMemo(() => ({ size: size! }), [size]);
 
     return (
@@ -31,11 +31,6 @@ UnorderedListComponent.propTypes = {
   type: PropTypes.oneOf(TYPE_UNORDERED_LIST)
 };
 
-UnorderedListComponent.defaultProps = {
-  size: 'medium',
-  type: 'disc'
-};
-
 /**
  * @extends HTMLAttributes<HTMLUListElement>
  */
diff --git a/packages/typography/src/elements/span/Span.tsx b/packages/typography/src/elements/span/Span.tsx
index 39e44705b50..e0e1009d297 100644
--- a/packages/typography/src/elements/span/Span.tsx
+++ b/packages/typography/src/elements/span/Span.tsx
@@ -13,7 +13,7 @@ import { StartIcon } from './StartIcon';
 import { Icon } from './Icon';
 
 const SpanComponent = forwardRef<HTMLSpanElement, ISpanProps>(
-  ({ hue, isBold, isMonospace, tag, ...other }, ref) => (
+  ({ hue, isBold, isMonospace, tag = 'span', ...other }, ref) => (
     <StyledFont
       $hue={hue}
       $isBold={isBold}
@@ -35,10 +35,6 @@ SpanComponent.propTypes = {
   hue: PropTypes.string
 };
 
-SpanComponent.defaultProps = {
-  tag: 'span'
-};
-
 /**
  * @extends HTMLAttributes<HTMLSpanElement>
  */
diff --git a/packages/typography/src/styled/StyledCode.ts b/packages/typography/src/styled/StyledCode.ts
index f0fec6fb444..5a86d63c4d9 100644
--- a/packages/typography/src/styled/StyledCode.ts
+++ b/packages/typography/src/styled/StyledCode.ts
@@ -58,12 +58,15 @@ interface IStyledCodeProps extends Omit<IStyledFontProps, 'size'> {
   $size?: ICodeProps['size'];
 }
 
-export const StyledCode = styled(StyledFont as 'code').attrs({
+export const StyledCode = styled(StyledFont as 'code').attrs<IStyledCodeProps>(props => ({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
   as: 'code',
-  $isMonospace: true
-})<IStyledCodeProps>`
+  $isMonospace: true,
+  theme: props.theme || DEFAULT_THEME,
+  $hue: props.$hue || 'grey',
+  $size: props.$size || 'inherit'
+}))`
   border-radius: ${props => props.theme.borderRadii.sm};
   padding: 1.5px;
 
@@ -71,9 +74,3 @@ export const StyledCode = styled(StyledFont as 'code').attrs({
 
   ${componentStyles};
 `;
-
-StyledCode.defaultProps = {
-  theme: DEFAULT_THEME,
-  $hue: 'grey',
-  $size: 'inherit'
-};
diff --git a/packages/typography/src/styled/StyledFont.tsx b/packages/typography/src/styled/StyledFont.tsx
index cd63772a6fd..9f54a86a6fe 100644
--- a/packages/typography/src/styled/StyledFont.tsx
+++ b/packages/typography/src/styled/StyledFont.tsx
@@ -92,10 +92,11 @@ export interface IStyledFontProps {
   $hue?: string;
 }
 
-export const StyledFont = styled.div.attrs({
+export const StyledFont = styled.div.attrs<IStyledFontProps>(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION
-})<IStyledFontProps>`
+  'data-garden-version': PACKAGE_VERSION,
+  $size: props.$size || 'inherit'
+}))`
   ${props => !props.hidden && fontStyles(props)};
 
   &[hidden] {
@@ -105,7 +106,3 @@ export const StyledFont = styled.div.attrs({
 
   ${componentStyles};
 `;
-
-StyledFont.defaultProps = {
-  $size: 'inherit'
-};
diff --git a/packages/typography/src/styled/StyledListItem.ts b/packages/typography/src/styled/StyledListItem.ts
index 68695efe322..eee452d8d59 100644
--- a/packages/typography/src/styled/StyledListItem.ts
+++ b/packages/typography/src/styled/StyledListItem.ts
@@ -7,7 +7,7 @@
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
 import { math } from 'polished';
-import { DEFAULT_THEME, getLineHeight, componentStyles } from '@zendeskgarden/react-theming';
+import { getLineHeight, componentStyles } from '@zendeskgarden/react-theming';
 import { Size } from '../types';
 import { StyledOrderedList, StyledUnorderedList } from './StyledList';
 import { StyledFont } from './StyledFont';
@@ -51,11 +51,14 @@ const listItemStyles = (props: IStyledListItemProps & ThemeProps<DefaultTheme>)
 
 const ORDERED_ID = 'typography.ordered_list_item';
 
-export const StyledOrderedListItem = styled(StyledFont as 'li').attrs({
-  'data-garden-id': ORDERED_ID,
-  'data-garden-version': PACKAGE_VERSION,
-  as: 'li'
-})<IStyledListItemProps>`
+export const StyledOrderedListItem = styled(StyledFont as 'li').attrs<IStyledListItemProps>(
+  ({ $space = 'medium' }) => ({
+    $space,
+    'data-garden-id': ORDERED_ID,
+    'data-garden-version': PACKAGE_VERSION,
+    as: 'li'
+  })
+)`
   margin-${props => (props.theme.rtl ? 'right' : 'left')}: ${props =>
     math(`${props.theme.space.base} * -1px`)};
   padding-${props => (props.theme.rtl ? 'right' : 'left')}: ${props =>
@@ -66,24 +69,17 @@ export const StyledOrderedListItem = styled(StyledFont as 'li').attrs({
   ${componentStyles};
 `;
 
-StyledOrderedListItem.defaultProps = {
-  $space: 'medium',
-  theme: DEFAULT_THEME
-};
-
 const UNORDERED_ID = 'typography.unordered_list_item';
 
-export const StyledUnorderedListItem = styled(StyledFont as 'li').attrs({
-  'data-garden-id': UNORDERED_ID,
-  'data-garden-version': PACKAGE_VERSION,
-  as: 'li'
-})<IStyledListItemProps>`
+export const StyledUnorderedListItem = styled(StyledFont as 'li').attrs<IStyledListItemProps>(
+  ({ $space = 'medium' }) => ({
+    $space,
+    'data-garden-id': UNORDERED_ID,
+    'data-garden-version': PACKAGE_VERSION,
+    as: 'li'
+  })
+)`
   ${listItemStyles};
 
   ${componentStyles};
 `;
-
-StyledUnorderedListItem.defaultProps = {
-  $space: 'medium',
-  theme: DEFAULT_THEME
-};