From a629568d7b896aecf6bbf3be0adbd175424c3b96 Mon Sep 17 00:00:00 2001
From: Carlos Cortizas <97907068+CarlosCortizasCT@users.noreply.github.com>
Date: Thu, 19 Dec 2024 09:29:09 +0100
Subject: [PATCH] Migrate components default props usage (#3027)

* refactor(design-system): migrate design system components

* refactor(design-system): migrate vrt utility components

* refactor(design-system): migrate calendar-utils components

* refactor(design-system): migrate butons components

* refactor(design-system): migrate collapsible components

* refactor(design-system): migrate data table components

* refactor(design-system): migrate spacings components

* refactor(design-system): migrate input components

* refactor(inputs): adjust missing parts

* refactor: adjust the rest of the components

* refactor: adjust default props on pending components

* chore: remove files

* chore: remove files
---
 .editorconfig                                 |  2 +-
 design-system/src/theme-provider.tsx          | 24 +++---
 .../src/calendar-body/calendar-body.tsx       | 36 +++++---
 packages/components/avatar/src/avatar.tsx     | 54 +++++++-----
 .../src/accessible-button.tsx                 | 32 ++++---
 .../buttons/flat-button/src/flat-button.tsx   | 73 +++++++++-------
 .../buttons/icon-button/src/icon-button.tsx   | 67 ++++++++-------
 .../buttons/link-button/src/link-button.tsx   | 34 ++++----
 .../primary-button/src/primary-button.tsx     | 54 ++++++------
 .../secondary-button/src/secondary-button.tsx | 84 +++++++++++--------
 .../src/secondary-icon-button.tsx             | 55 +++++++-----
 packages/components/card/src/card.tsx         | 39 +++++----
 .../src/collapsible-motion.tsx                | 15 ++--
 .../src/collapsible-panel.tsx                 | 61 +++++++-------
 .../collapsible-panel/src/header-icon.tsx     |  9 +-
 .../collapsible/src/collapsible.tsx           | 14 ++--
 .../column-settings-manager.tsx               | 18 ++--
 .../display-settings-manager.tsx              | 19 ++---
 .../settings-container/settings-container.tsx | 12 ++-
 packages/components/data-table/src/cell.tsx   | 30 +++----
 .../components/data-table/src/data-row.tsx    | 44 +++++-----
 .../data-table/src/data-table.stories.tsx     |  8 +-
 .../components/data-table/src/data-table.tsx  | 78 ++++++++---------
 .../components/data-table/src/header-cell.tsx | 27 +++---
 .../dropdown-menu/src/dropdown-menu.tsx       | 31 ++++---
 .../field-label/src/field-label.tsx           | 12 ++-
 .../password-field/src/password-field.tsx     | 25 +++---
 .../src/search-select-field.tsx               | 18 ++--
 packages/components/grid/src/grid.tsx         | 10 +--
 .../icons/src/custom-icon/custom-icon.tsx     | 30 ++++---
 .../icons/src/leading-icon/leading-icon.tsx   | 23 +++--
 .../src/async-creatable-select-input.tsx      | 40 ++++-----
 .../src/async-select-input.tsx                | 77 ++++++++---------
 .../checkbox-input/src/checkbox-input.tsx     | 43 +++++-----
 .../src/creatable-select-input.tsx            | 36 ++++----
 .../localized-input-toggle.tsx                | 21 ++---
 .../src/multiline-input/multiline-input.tsx   | 20 +++--
 .../src/localized-money-input.tsx             | 19 +++--
 .../src/localized-multiline-text-input.tsx    | 26 +++---
 .../src/translation-input.tsx                 | 15 ++--
 .../src/localized-rich-text-input.tsx         | 27 +++---
 .../src/localized-text-input.tsx              | 19 +++--
 .../inputs/money-input/src/money-input.tsx    | 50 ++++++-----
 .../src/multiline-text-input.tsx              | 27 +++---
 .../inputs/number-input/src/number-input.tsx  | 17 ++--
 .../password-input/src/password-input.tsx     | 39 +++++----
 .../inputs/radio-input/src/radio-group.tsx    | 51 ++++++-----
 .../inputs/radio-input/src/radio-option.tsx   | 14 ++--
 .../src/rich-text-body/dropdown.tsx           | 31 ++++---
 .../src/rich-text-body/rich-text-body.tsx     | 10 +--
 .../src/search-select-input.tsx               | 53 ++++++------
 .../src/search-text-input.tsx                 | 22 +++--
 .../inputs/select-input/src/select-input.tsx  | 72 ++++++++--------
 .../src/selectable-search-input.spec.tsx      | 66 +++++++++------
 .../src/selectable-search-input.tsx           | 55 ++++++------
 .../inputs/text-input/src/text-input.tsx      | 17 ++--
 .../inputs/time-input/src/time-input.tsx      | 10 +--
 .../toggle-input/src/toggle-input.spec.tsx    |  3 +-
 .../toggle-input/src/toggle-input.styles.ts   | 15 +++-
 .../inputs/toggle-input/src/toggle-input.tsx  | 49 ++++++-----
 packages/components/link/src/link.tsx         | 31 ++++---
 .../loading-spinner/src/loading-spinner.tsx   | 20 ++---
 .../page-size-selector/page-size-selector.tsx | 23 ++---
 .../components/pagination/src/pagination.tsx  | 22 +++--
 .../primary-action-dropdown/src/option.tsx    |  9 +-
 .../src/primary-action-dropdown.tsx           |  6 +-
 .../progress-bar/src/progress-bar.styles.tsx  | 15 ++--
 .../progress-bar/src/progress-bar.tsx         | 52 ++++++------
 .../spacings/spacings-inline/src/inline.tsx   | 37 ++++----
 .../src/inset-squish.tsx                      | 25 +++---
 .../spacings/spacings-inset/src/inset.tsx     | 25 +++---
 .../spacings/spacings-stack/src/stack.tsx     | 28 +++++--
 packages/components/stamp/src/stamp.tsx       | 33 ++++----
 packages/components/tag/src/tag-body.tsx      | 26 +++---
 packages/components/tag/src/tag.styles.ts     |  6 +-
 packages/components/tag/src/tag.tsx           | 43 +++++-----
 packages/components/tooltip/src/tooltip.tsx   | 38 ++++-----
 test/percy/spec.jsx                           | 15 ++--
 78 files changed, 1264 insertions(+), 1172 deletions(-)

diff --git a/.editorconfig b/.editorconfig
index 3ce9044524..409a2dd74a 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -8,4 +8,4 @@ end_of_line = lf
 indent_size = 2
 indent_style = space
 insert_final_newline = true
-trim_trailing_whitespace = true
+trim_trailing_whitespace = true
\ No newline at end of file
diff --git a/design-system/src/theme-provider.tsx b/design-system/src/theme-provider.tsx
index 7b1b608584..1a3fb96261 100644
--- a/design-system/src/theme-provider.tsx
+++ b/design-system/src/theme-provider.tsx
@@ -65,13 +65,17 @@ const applyTheme = ({
 };
 
 type ThemeProviderProps = {
-  parentSelector: typeof defaultParentSelector;
-  theme: string;
+  parentSelector?: typeof defaultParentSelector;
+  theme?: string;
   themeOverrides?: Record<string, string>;
 };
 
-const ThemeProvider = (props: ThemeProviderProps) => {
-  const parentSelectorRef = useRef(props.parentSelector);
+const ThemeProvider = ({
+  parentSelector = defaultParentSelector,
+  theme = 'default',
+  ...props
+}: ThemeProviderProps) => {
+  const parentSelectorRef = useRef(parentSelector);
   const themeNameRef = useRef<string>();
   const themeOverridesRef = useRef<Record<string, string>>();
 
@@ -80,26 +84,22 @@ const ThemeProvider = (props: ThemeProviderProps) => {
     // provided include a new object with the same theme overrides
     // (eg: users providing an inline object as prop to the ThemeProvider)
     if (
-      themeNameRef.current !== props.theme ||
+      themeNameRef.current !== theme ||
       !isEqual(themeOverridesRef.current, props.themeOverrides)
     ) {
-      themeNameRef.current = props.theme;
+      themeNameRef.current = theme;
       themeOverridesRef.current = props.themeOverrides;
 
       applyTheme({
-        newTheme: props.theme,
+        newTheme: theme,
         parentSelector: parentSelectorRef.current,
         themeOverrides: props.themeOverrides,
       });
     }
-  }, [props.theme, props.themeOverrides]);
+  }, [theme, props.themeOverrides]);
 
   return null;
 };
-ThemeProvider.defaultProps = {
-  parentSelector: defaultParentSelector,
-  theme: 'default',
-};
 
 type TUseThemeResult = {
   theme: ThemeName;
diff --git a/packages/calendar-utils/src/calendar-body/calendar-body.tsx b/packages/calendar-utils/src/calendar-body/calendar-body.tsx
index 47592f159f..81807ed55f 100644
--- a/packages/calendar-utils/src/calendar-body/calendar-body.tsx
+++ b/packages/calendar-utils/src/calendar-body/calendar-body.tsx
@@ -79,11 +79,10 @@ export type TCalendarBody = {
   theme?: Theme;
 };
 
-const defaultProps: Pick<TCalendarBody, 'isClearable'> = {
-  isClearable: true,
-};
-
-export const CalendarBody = (props: TCalendarBody) => {
+export const CalendarBody = ({
+  isClearable = true,
+  ...props
+}: TCalendarBody) => {
   const [isFocused, toggleIsFocused] = useToggleState(false);
 
   const onInputFocus = props.inputProps?.onFocus;
@@ -130,18 +129,29 @@ export const CalendarBody = (props: TCalendarBody) => {
 
   return (
     <Inline alignItems="center">
-      <div css={getInputContainerStyles(props, { isFocused })}>
+      <div
+        css={getInputContainerStyles(
+          {
+            isClearable,
+            ...props,
+          },
+          { isFocused }
+        )}
+      >
         <input
           ref={props.inputRef}
           {...props.inputProps}
           disabled={props.isDisabled}
           readOnly={props.isReadOnly}
-          css={getDateTimeInputStyles(props)}
+          css={getDateTimeInputStyles({
+            isClearable,
+            ...props,
+          })}
           onFocus={handleInputFocus}
           onBlur={handleInputBlur}
           aria-readonly={props.isReadOnly}
         />
-        {!disabledOrReadOnly && props.hasSelection && props.isClearable && (
+        {!disabledOrReadOnly && props.hasSelection && isClearable && (
           <ClearSection
             isCondensed={props.isCondensed}
             hasError={props.hasError}
@@ -153,7 +163,13 @@ export const CalendarBody = (props: TCalendarBody) => {
         )}
         <button
           type="button"
-          css={getCalendarIconContainerStyles(props, { isFocused })}
+          css={getCalendarIconContainerStyles(
+            {
+              isClearable,
+              ...props,
+            },
+            { isFocused }
+          )}
           {...props.toggleButtonProps}
           onFocus={handleToggleFocus}
           onBlur={handleToggleBlur}
@@ -178,6 +194,4 @@ export const CalendarBody = (props: TCalendarBody) => {
 
 CalendarBody.displayName = 'CalendarBody';
 
-CalendarBody.defaultProps = defaultProps;
-
 export default CalendarBody;
diff --git a/packages/components/avatar/src/avatar.tsx b/packages/components/avatar/src/avatar.tsx
index cab91b4f12..82b7f15a90 100644
--- a/packages/components/avatar/src/avatar.tsx
+++ b/packages/components/avatar/src/avatar.tsx
@@ -48,17 +48,6 @@ export type TInitialsProps = Pick<
   'firstName' | 'lastName' | 'size'
 >;
 
-const defaultProps: Pick<
-  TAvatarProps,
-  'firstName' | 'lastName' | 'isHighlighted' | 'size' | 'color'
-> = {
-  firstName: '',
-  lastName: '',
-  isHighlighted: false,
-  size: 's',
-  color: 'accent',
-};
-
 const getFirstChar = (str: string) =>
   typeof str === 'string' ? str.trim().slice(0, 1).toUpperCase() : '';
 
@@ -127,11 +116,35 @@ const Initials = (props: TInitialsProps) => {
 };
 Initials.displayName = 'Initials';
 
-const Avatar = (props: TAvatarProps) => {
-  const avatarSize = getWidthSize(props.size);
-  const foregroundColor = getForegroundColor(props.color);
+const Avatar = ({
+  firstName = '',
+  lastName = '',
+  isHighlighted = false,
+  size = 's',
+  color = 'accent',
+  ...props
+}: TAvatarProps) => {
+  const avatarSize = getWidthSize(size);
+  const foregroundColor = getForegroundColor(color);
   return (
-    <div css={getAvatarStyles(props)} {...filterDataAttributes(props)}>
+    <div
+      css={getAvatarStyles({
+        firstName,
+        lastName,
+        isHighlighted,
+        size,
+        color,
+        ...props,
+      })}
+      {...filterDataAttributes({
+        firstName,
+        lastName,
+        isHighlighted,
+        size,
+        color,
+        ...props,
+      })}
+    >
       {props?.icon ? (
         <div
           css={css`
@@ -149,20 +162,15 @@ const Avatar = (props: TAvatarProps) => {
         <>
           <GravatarImg
             gravatarHash={props.gravatarHash}
-            size={props.size}
-            isHighlighted={props.isHighlighted}
-          />
-          <Initials
-            size={props.size}
-            firstName={props.firstName}
-            lastName={props.lastName}
+            size={size}
+            isHighlighted={isHighlighted}
           />
+          <Initials size={size} firstName={firstName} lastName={lastName} />
         </>
       )}
     </div>
   );
 };
 Avatar.displayName = 'Avatar';
-Avatar.defaultProps = defaultProps;
 
 export default Avatar;
diff --git a/packages/components/buttons/accessible-button/src/accessible-button.tsx b/packages/components/buttons/accessible-button/src/accessible-button.tsx
index 1e0697ad47..6a267d9e2c 100644
--- a/packages/components/buttons/accessible-button/src/accessible-button.tsx
+++ b/packages/components/buttons/accessible-button/src/accessible-button.tsx
@@ -84,30 +84,29 @@ export type TAccessibleButtonProps = {
   buttonAttributes?: Record<string, unknown>;
 };
 
-const defaultProps: Pick<
-  TAccessibleButtonProps,
-  'type' | 'buttonAttributes' | 'isToggleButton' | 'isToggled'
-> = {
-  type: 'button',
-  buttonAttributes: {},
-  isToggleButton: false,
-  isToggled: false,
-};
-
 const AccessibleButton = forwardRef<HTMLButtonElement, TAccessibleButtonProps>(
-  (props: TAccessibleButtonProps, ref) => {
+  (
+    {
+      type = 'button',
+      buttonAttributes = {},
+      isToggleButton = false,
+      isToggled = false,
+      ...props
+    }: TAccessibleButtonProps,
+    ref
+  ) => {
     warning(
       props.as ? isValidElementType(props.as) : true,
       `ui-kit/AccessibleButton: "as" must be a valid element type.`
     );
 
     warning(
-      !(props.as && props.type !== 'button'),
+      !(props.as && type !== 'button'),
       `ui-kit/AccessibleButton: "type" does not have any effect when "as" is set.`
     );
 
     warning(
-      !(props.isToggleButton && props.isToggled === undefined),
+      !(isToggleButton && isToggled === undefined),
       `ui-kit/AccessibleButton: "isToggled" is required if "isToggleButton" is "true"`
     );
 
@@ -144,7 +143,7 @@ const AccessibleButton = forwardRef<HTMLButtonElement, TAccessibleButtonProps>(
     let buttonProps = {};
     if (isButton) {
       buttonProps = {
-        type: props.type,
+        type: type,
       };
     } else {
       buttonProps = {
@@ -177,8 +176,8 @@ const AccessibleButton = forwardRef<HTMLButtonElement, TAccessibleButtonProps>(
         className={props.className}
         disabled={props.isDisabled}
         aria-disabled={props.isDisabled}
-        {...(props.isToggleButton ? { 'aria-pressed': props.isToggled } : {})}
-        {...omit(props.buttonAttributes, propsToOmit)}
+        {...(isToggleButton ? { 'aria-pressed': isToggled } : {})}
+        {...omit(buttonAttributes, propsToOmit)}
         {...buttonProps}
         {...filterAriaAttributes(props)}
         {...filterDataAttributes(props)}
@@ -189,6 +188,5 @@ const AccessibleButton = forwardRef<HTMLButtonElement, TAccessibleButtonProps>(
   }
 );
 AccessibleButton.displayName = 'AccessibleButton';
-AccessibleButton.defaultProps = defaultProps;
 
 export default AccessibleButton;
diff --git a/packages/components/buttons/flat-button/src/flat-button.tsx b/packages/components/buttons/flat-button/src/flat-button.tsx
index e97f914668..003d998016 100644
--- a/packages/components/buttons/flat-button/src/flat-button.tsx
+++ b/packages/components/buttons/flat-button/src/flat-button.tsx
@@ -63,16 +63,6 @@ export type TFlatButtonProps<
  * passed to `<FlatButton>`: <FlatButton as={Link} to="/foo" label="Foo" />.
  */ ComponentPropsWithRef<TStringOrComponent>;
 
-const defaultProps: Pick<
-  TFlatButtonProps,
-  'tone' | 'isDisabled' | 'type' | 'iconPosition'
-> = {
-  tone: 'primary',
-  type: 'button',
-  iconPosition: 'left',
-  isDisabled: false,
-};
-
 const ButtonIcon = <TStringOrComponent extends ElementType = 'button'>(
   props: TFlatButtonProps<TStringOrComponent>
 ) => {
@@ -95,25 +85,47 @@ const ButtonIcon = <TStringOrComponent extends ElementType = 'button'>(
 };
 ButtonIcon.displayName = 'ButtonIcon';
 
-const FlatButton = <TStringOrComponent extends ElementType = 'button'>(
-  props: TFlatButtonProps<TStringOrComponent>
-) => {
+const FlatButton = <TStringOrComponent extends ElementType = 'button'>({
+  tone = 'primary',
+  type = 'button',
+  iconPosition = 'left',
+  isDisabled = false,
+  ...props
+}: TFlatButtonProps<TStringOrComponent>) => {
   const buttonAttributes = {
     'data-track-component': 'FlatButton',
     // Forward valid attributes to the `<AccessibleButton>`.
-    ...filterInvalidAttributes(omit(props, propsToOmit)),
+    ...filterInvalidAttributes(
+      omit(
+        {
+          tone,
+          type,
+          iconPosition,
+          isDisabled,
+          ...props,
+        },
+        propsToOmit
+      )
+    ),
     // if there is a divergence between `isDisabled` and `disabled`,
     // we fall back to `isDisabled`
-    disabled: props.isDisabled,
+    disabled: isDisabled,
   };
+  const buttonIconProps = {
+    tone,
+    type,
+    iconPosition,
+    isDisabled,
+    ...props,
+  } as TFlatButtonProps<TStringOrComponent>;
 
   return (
     <AccessibleButton
       as={props.as}
-      type={props.type}
+      type={type}
       label={props.label}
       onClick={props.onClick}
-      isDisabled={props.isDisabled}
+      isDisabled={isDisabled}
       css={css`
         min-height: initial;
         align-items: center;
@@ -124,14 +136,14 @@ const FlatButton = <TStringOrComponent extends ElementType = 'button'>(
 
         span {
           color: ${getTextColor({
-            tone: props.tone,
-            isDisabled: props.isDisabled,
+            tone: tone,
+            isDisabled: isDisabled,
           })};
         }
 
         fill: ${getTextColor({
-          tone: props.tone,
-          isDisabled: props.isDisabled,
+          tone: tone,
+          isDisabled: isDisabled,
           isIcon: true,
         })};
 
@@ -140,22 +152,22 @@ const FlatButton = <TStringOrComponent extends ElementType = 'button'>(
           margin-left: ${designTokens.spacing10};
         }
 
-        ${!props.isDisabled
+        ${!isDisabled
           ? `
             &:hover,
             &:focus {
               span {
                 color: ${getTextColor({
-                  tone: props.tone,
+                  tone: tone,
                   isHover: true,
-                  isDisabled: props.isDisabled,
+                  isDisabled: isDisabled,
                 })};
               }
               svg * {
                 fill: ${getTextColor({
-                  tone: props.tone,
+                  tone: tone,
                   isHover: true,
-                  isDisabled: props.isDisabled,
+                  isDisabled: isDisabled,
                   isIcon: true,
                 })};
               }
@@ -164,18 +176,17 @@ const FlatButton = <TStringOrComponent extends ElementType = 'button'>(
       `}
       buttonAttributes={buttonAttributes}
     >
-      {props.icon && props.iconPosition === 'left' && (
-        <ButtonIcon<TStringOrComponent> {...props} />
+      {props.icon && iconPosition === 'left' && (
+        <ButtonIcon<TStringOrComponent> {...buttonIconProps} />
       )}
       <span>{props.label}</span>
-      {props.icon && props.iconPosition === 'right' && (
-        <ButtonIcon<TStringOrComponent> {...props} />
+      {props.icon && iconPosition === 'right' && (
+        <ButtonIcon<TStringOrComponent> {...buttonIconProps} />
       )}
     </AccessibleButton>
   );
 };
 
 FlatButton.displayName = 'FlatButton';
-FlatButton.defaultProps = defaultProps;
 
 export default FlatButton;
diff --git a/packages/components/buttons/icon-button/src/icon-button.tsx b/packages/components/buttons/icon-button/src/icon-button.tsx
index 6f398e536c..7cedc4ea14 100644
--- a/packages/components/buttons/icon-button/src/icon-button.tsx
+++ b/packages/components/buttons/icon-button/src/icon-button.tsx
@@ -99,48 +99,47 @@ export type TIconButtonProps<
  * passed to `<IconButton>`: <IconButton as={Link} to="/foo" label="Foo" />.
  */ ComponentPropsWithRef<TStringOrComponent>;
 
-const defaultProps: Pick<
-  TIconButtonProps,
-  'type' | 'theme' | 'size' | 'shape' | 'isToggleButton'
-> = {
-  type: 'button',
-  theme: 'default',
-  size: '40',
-  shape: 'round',
-  isToggleButton: false,
-};
-
-const IconButton = <TStringOrComponent extends ElementType = 'button'>(
-  props: TIconButtonProps<TStringOrComponent>
-) => {
+const IconButton = <TStringOrComponent extends ElementType = 'button'>({
+  type = 'button',
+  theme = 'default',
+  size = '40',
+  shape = 'round',
+  isToggleButton = false,
+  ...props
+}: TIconButtonProps<TStringOrComponent>) => {
   warning(
-    !(props.theme !== 'default' && !props.isToggleButton),
+    !(theme !== 'default' && !isToggleButton),
     `Invalid prop \`theme\` supplied to \`IconButton\`. Only toggle buttons may have a theme.`
   );
 
   useWarning(
-    !Boolean(Object.keys(sizeMapping).indexOf(props.size) > -1),
-    `IconButton '${
-      props.size
-    }' value for 'size' property has been deprecated in favor of '${
-      sizeMapping[props.size as TLegacySizes]
+    !Boolean(Object.keys(sizeMapping).indexOf(size) > -1),
+    `IconButton '${size}' value for 'size' property has been deprecated in favor of '${
+      sizeMapping[size as TLegacySizes]
     }' Please update that value when using this component`
   );
 
   const buttonAttributes = {
     'data-track-component': 'IconButton',
-    ...filterInvalidAttributes(props),
+    ...filterInvalidAttributes({
+      type,
+      theme,
+      size,
+      shape,
+      isToggleButton,
+      ...props,
+    }),
   };
-  const isActive = Boolean(props.isToggleButton && props.isToggled);
+  const isActive = Boolean(isToggleButton && props.isToggled);
 
   return (
     <AccessibleButton
       as={props.as}
       buttonAttributes={buttonAttributes}
-      type={props.type}
+      type={type}
       label={props.label}
       onClick={props.onClick}
-      isToggleButton={props.isToggleButton}
+      isToggleButton={isToggleButton}
       isToggled={props.isToggled}
       isDisabled={props.isDisabled}
       css={[
@@ -160,22 +159,28 @@ const IconButton = <TStringOrComponent extends ElementType = 'button'>(
           transition: background-color ${designTokens.transitionLinear80Ms},
             box-shadow 150ms ease-in-out;
         `,
-        getBaseStyles(props.theme, props.isDisabled, isActive),
-        getShapeStyles('square', props.size),
-        getSizeStyles(props.size),
-        getHoverStyles(props.isDisabled, props.theme),
+        getBaseStyles(theme, props.isDisabled, isActive),
+        getShapeStyles('square', size),
+        getSizeStyles(size),
+        getHoverStyles(props.isDisabled, theme),
       ]}
     >
       {props.icon &&
         cloneElement(props.icon, {
-          size: props.size,
-          color: getIconThemeColor(props),
+          size: size,
+          color: getIconThemeColor({
+            type,
+            theme,
+            size,
+            shape,
+            isToggleButton,
+            ...props,
+          }),
         })}
     </AccessibleButton>
   );
 };
 
-IconButton.defaultProps = defaultProps;
 IconButton.displayName = 'IconButton';
 
 export default IconButton;
diff --git a/packages/components/buttons/link-button/src/link-button.tsx b/packages/components/buttons/link-button/src/link-button.tsx
index ea75bb1177..182f7b4b5e 100644
--- a/packages/components/buttons/link-button/src/link-button.tsx
+++ b/packages/components/buttons/link-button/src/link-button.tsx
@@ -41,11 +41,6 @@ export type TLinkButtonProps = {
   isExternal?: boolean;
 };
 
-const defaultProps: Pick<TLinkButtonProps, 'isDisabled' | 'isExternal'> = {
-  isDisabled: false,
-  isExternal: false,
-};
-
 const hoverStyles = css`
   &:hover,
   &:focus,
@@ -98,11 +93,19 @@ const LinkBody = (
 
 LinkBody.displayName = 'LinkBody';
 
-const LinkButton = (props: TLinkButtonProps) => {
+const LinkButton = ({
+  isDisabled = false,
+  isExternal = false,
+  ...props
+}: TLinkButtonProps) => {
   useWarnDeprecatedComponent('LinkButton');
-  const remainingProps = filterInvalidAttributes(props);
+  const remainingProps = filterInvalidAttributes({
+    isDisabled,
+    isExternal,
+    ...props,
+  });
 
-  if (props.isExternal) {
+  if (isExternal) {
     if (typeof props.to !== 'string') {
       throw new Error('`to` must be a `string` when `isExternal` is provided.');
     }
@@ -112,17 +115,15 @@ const LinkButton = (props: TLinkButtonProps) => {
       // to be provided, instead the `href` is.
       <StyledExternalLink
         href={props.to}
-        onClick={
-          props.isDisabled ? (event) => event.preventDefault() : undefined
-        }
-        disabled={props.isDisabled}
+        onClick={isDisabled ? (event) => event.preventDefault() : undefined}
+        disabled={isDisabled}
         data-track-component="LinkButton"
         aria-label={props.label}
         {...remainingProps}
       >
         <LinkBody
           iconLeft={props.iconLeft}
-          disabled={props.isDisabled}
+          disabled={isDisabled}
           label={props.label}
         />
       </StyledExternalLink>
@@ -133,15 +134,15 @@ const LinkButton = (props: TLinkButtonProps) => {
     <StyledExternalLink
       as={ReactRouterLink}
       to={props.to}
-      disabled={props.isDisabled}
-      onClick={props.isDisabled ? (event) => event.preventDefault() : undefined}
+      disabled={isDisabled}
+      onClick={isDisabled ? (event) => event.preventDefault() : undefined}
       data-track-component="LinkButton"
       aria-label={props.label}
       {...remainingProps}
     >
       <LinkBody
         iconLeft={props.iconLeft}
-        disabled={props.isDisabled}
+        disabled={isDisabled}
         label={props.label}
       />
     </StyledExternalLink>
@@ -149,6 +150,5 @@ const LinkButton = (props: TLinkButtonProps) => {
 };
 
 LinkButton.displayName = 'LinkButton';
-LinkButton.defaultProps = defaultProps;
 
 export default LinkButton;
diff --git a/packages/components/buttons/primary-button/src/primary-button.tsx b/packages/components/buttons/primary-button/src/primary-button.tsx
index dfd4bd95c7..9cc6a2618d 100644
--- a/packages/components/buttons/primary-button/src/primary-button.tsx
+++ b/packages/components/buttons/primary-button/src/primary-button.tsx
@@ -125,56 +125,59 @@ export type TPrimaryButtonProps<
  * passed to `<PrimaryButton>`: <PrimaryButton as={Link} to="/foo" label="Foo" />.
  */ ComponentPropsWithRef<TStringOrComponent>;
 
-const defaultProps: Pick<
-  TPrimaryButtonProps,
-  'type' | 'tone' | 'size' | 'isToggleButton'
-> = {
-  type: 'button',
-  size: '20',
-  isToggleButton: false,
-  tone: 'primary',
-};
-
-const PrimaryButton = <TStringOrComponent extends ElementType = 'button'>(
-  props: TPrimaryButtonProps<TStringOrComponent>
-) => {
+const PrimaryButton = <TStringOrComponent extends ElementType = 'button'>({
+  type = 'button',
+  size = '20',
+  isToggleButton = false,
+  tone = 'primary',
+  ...props
+}: TPrimaryButtonProps<TStringOrComponent>) => {
   const buttonAttributes = {
     'data-track-component': 'PrimaryButton',
-    ...filterInvalidAttributes(omit(props, propsToOmit)),
+    ...filterInvalidAttributes(
+      omit(
+        {
+          type,
+          size,
+          isToggleButton,
+          tone,
+          ...props,
+        },
+        propsToOmit
+      )
+    ),
     // if there is a divergence between `isDisabled` and `disabled`,
     // we fall back to `isDisabled`
     disabled: props.isDisabled,
   };
 
   useWarning(
-    !Boolean(Object.keys(sizeMapping).indexOf(props.size) > -1),
-    `PrimaryButton '${
-      props.size
-    }' value for 'size' property has been deprecated in favor of '${
-      sizeMapping[props.size as TLegacySizes]
+    !Boolean(Object.keys(sizeMapping).indexOf(size) > -1),
+    `PrimaryButton '${size}' value for 'size' property has been deprecated in favor of '${
+      sizeMapping[size as TLegacySizes]
     }' Please update that value when using this component`
   );
 
-  const isActive = Boolean(props.isToggleButton && props.isToggled);
+  const isActive = Boolean(isToggleButton && props.isToggled);
 
   return (
     <AccessibleButton
       as={props.as}
-      type={props.type}
+      type={type}
       buttonAttributes={buttonAttributes}
       label={props.label}
       onClick={props.onClick}
-      isToggleButton={props.isToggleButton}
+      isToggleButton={isToggleButton}
       isToggled={props.isToggled}
       isDisabled={props.isDisabled}
-      css={getButtonStyles(props.isDisabled, isActive, props.tone, props.size)}
+      css={getButtonStyles(props.isDisabled, isActive, tone, size)}
     >
       <Inline alignItems="center" scale="s">
         {props.iconLeft && (
           <PositionedIcon
             icon={props.iconLeft}
             isDisabled={props.isDisabled}
-            size={props.size}
+            size={size}
           />
         )}
         <span>{props.label}</span>
@@ -182,7 +185,7 @@ const PrimaryButton = <TStringOrComponent extends ElementType = 'button'>(
           <PositionedIcon
             icon={props.iconRight}
             isDisabled={props.isDisabled}
-            size={props.size}
+            size={size}
           />
         )}
       </Inline>
@@ -190,7 +193,6 @@ const PrimaryButton = <TStringOrComponent extends ElementType = 'button'>(
   );
 };
 
-PrimaryButton.defaultProps = defaultProps;
 PrimaryButton.displayName = 'PrimaryButton';
 
 export default PrimaryButton;
diff --git a/packages/components/buttons/secondary-button/src/secondary-button.tsx b/packages/components/buttons/secondary-button/src/secondary-button.tsx
index 0b7f779958..b91b615cef 100644
--- a/packages/components/buttons/secondary-button/src/secondary-button.tsx
+++ b/packages/components/buttons/secondary-button/src/secondary-button.tsx
@@ -127,17 +127,6 @@ export const getIconColor = (
   return icon?.props.color;
 };
 
-const defaultProps: Pick<
-  TSecondaryButtonProps,
-  'type' | 'theme' | 'size' | 'isToggleButton' | 'tone'
-> = {
-  type: 'button',
-  theme: 'default',
-  tone: 'secondary',
-  size: '20',
-  isToggleButton: false,
-};
-
 const PositionedIcon = ({
   size,
   icon,
@@ -165,28 +154,38 @@ const PositionedIcon = ({
 
 export const SecondaryButton = <
   TStringOrComponent extends ElementType = 'button'
->(
-  props: TSecondaryButtonProps<TStringOrComponent>
-) => {
-  const isActive = Boolean(props.isToggleButton && props.isToggled);
+>({
+  type = 'button',
+  theme = 'default',
+  tone = 'secondary',
+  size = '20',
+  isToggleButton = false,
+  ...props
+}: TSecondaryButtonProps<TStringOrComponent>) => {
+  const isActive = Boolean(isToggleButton && props.isToggled);
   const shouldUseLinkTag = !props.isDisabled && Boolean(props.to);
   const buttonAttributes = {
     'data-track-component': 'SecondaryButton',
-    ...filterInvalidAttributes(props),
+    ...filterInvalidAttributes({
+      type,
+      theme,
+      tone,
+      size,
+      isToggleButton,
+      ...props,
+    }),
     ...(shouldUseLinkTag ? { to: props.to } : {}),
   };
 
   warning(
-    !(props.theme !== 'default' && !props.isToggleButton),
+    !(theme !== 'default' && !isToggleButton),
     `Invalid prop \`theme\` supplied to \`SecondaryButton\`. Only toggle buttons may have a theme.`
   );
 
   useWarning(
-    !Boolean(Object.keys(sizeMapping).indexOf(props.size) > -1),
-    `SecondaryButton '${
-      props.size
-    }' value for 'size' property has been deprecated in favor of '${
-      sizeMapping[props.size as TLegacySizes]
+    !Boolean(Object.keys(sizeMapping).indexOf(size) > -1),
+    `SecondaryButton '${size}' value for 'size' property has been deprecated in favor of '${
+      sizeMapping[size as TLegacySizes]
     }' Please update that value when using this component`
   );
 
@@ -207,20 +206,20 @@ export const SecondaryButton = <
       transition: background-color ${designTokens.transitionLinear80Ms},
         box-shadow ${designTokens.transitionEaseinout150Ms};
     `,
-    getThemeStyles(props.theme),
-    getStateStyles(props.isDisabled, isActive, props.tone),
-    getSizeStyles(props.size),
-    getToneStyles(props.tone, props.isDisabled, isActive),
+    getThemeStyles(theme),
+    getStateStyles(props.isDisabled, isActive, tone),
+    getSizeStyles(size),
+    getToneStyles(tone, props.isDisabled, isActive),
   ];
 
   return (
     <AccessibleButton
       as={(shouldUseLinkTag ? Link : props.as) as ComponentType}
-      type={props.type}
+      type={type}
       buttonAttributes={buttonAttributes}
       label={props.label}
       onClick={props.onClick}
-      isToggleButton={props.isToggleButton}
+      isToggleButton={isToggleButton}
       isToggled={props.isToggled}
       isDisabled={props.isDisabled}
       css={containerStyles}
@@ -229,16 +228,36 @@ export const SecondaryButton = <
         {props.iconLeft && (
           <PositionedIcon
             icon={props.iconLeft}
-            size={props.size}
-            color={getIconColor(props, props.iconLeft)}
+            size={size}
+            color={getIconColor(
+              {
+                type,
+                theme,
+                tone,
+                size,
+                isToggleButton,
+                ...props,
+              },
+              props.iconLeft
+            )}
           />
         )}
         <span>{props.label}</span>
         {props.iconRight && (
           <PositionedIcon
             icon={props.iconRight}
-            size={props.size}
-            color={getIconColor(props, props.iconRight)}
+            size={size}
+            color={getIconColor(
+              {
+                type,
+                theme,
+                tone,
+                size,
+                isToggleButton,
+                ...props,
+              },
+              props.iconRight
+            )}
           />
         )}
       </Inline>
@@ -247,6 +266,5 @@ export const SecondaryButton = <
 };
 
 SecondaryButton.displayName = 'SecondaryButton';
-SecondaryButton.defaultProps = defaultProps;
 
 export default SecondaryButton;
diff --git a/packages/components/buttons/secondary-icon-button/src/secondary-icon-button.tsx b/packages/components/buttons/secondary-icon-button/src/secondary-icon-button.tsx
index 3f18ff0548..a7086f2630 100644
--- a/packages/components/buttons/secondary-icon-button/src/secondary-icon-button.tsx
+++ b/packages/components/buttons/secondary-icon-button/src/secondary-icon-button.tsx
@@ -81,50 +81,65 @@ export type TSecondaryButtonIconProps<
  * passed to `<SecondaryIconButton>`: <SecondaryIconButton as={Link} to="/foo" label="Foo" />.
  */ ComponentPropsWithRef<TStringOrComponent>;
 
-const SecondaryIconButton = <TStringOrComponent extends ElementType = 'button'>(
-  props: TSecondaryButtonIconProps<TStringOrComponent>
-) => {
+const SecondaryIconButton = <
+  TStringOrComponent extends ElementType = 'button'
+>({
+  color = 'solid',
+  type = 'button',
+  size = '40',
+  isDisabled = false,
+  ...props
+}: TSecondaryButtonIconProps<TStringOrComponent>) => {
   const buttonAttributes = {
-    ...filterInvalidAttributes(omit(props, propsToOmit)),
+    ...filterInvalidAttributes(
+      omit(
+        {
+          color,
+          type,
+          size,
+          isDisabled,
+          ...props,
+        },
+        propsToOmit
+      )
+    ),
     'data-track-component': 'SecondaryIconButton',
     // if there is a divergence between `isDisabled` and `disabled`,
     // we fall back to `isDisabled`
-    disabled: props.isDisabled,
+    disabled: isDisabled,
   };
 
   useWarning(
-    !Boolean(Object.keys(sizeMapping).indexOf(props.size) > -1),
-    `SecondaryIconButton '${
-      props.size
-    }' value for 'size' property has been deprecated in favor of '${
-      sizeMapping[props.size as TLegacySizes]
+    !Boolean(Object.keys(sizeMapping).indexOf(size) > -1),
+    `SecondaryIconButton '${size}' value for 'size' property has been deprecated in favor of '${
+      sizeMapping[size as TLegacySizes]
     }' Please update that value when using this component`
   );
 
   return (
     <AccessibleButton
       as={props.as}
-      type={props.type}
+      type={type}
       buttonAttributes={buttonAttributes}
       label={props.label}
       onClick={props.onClick}
-      isDisabled={props.isDisabled}
-      css={getBaseStyles(props)}
+      isDisabled={isDisabled}
+      css={getBaseStyles({
+        color,
+        type,
+        size,
+        isDisabled,
+        ...props,
+      } as TSecondaryButtonIconProps<TStringOrComponent>)}
     >
       {props.icon &&
         cloneElement(props.icon, {
-          size: props.size,
+          size: size,
         })}
     </AccessibleButton>
   );
 };
 
 SecondaryIconButton.displayName = 'SecondaryIconButton';
-SecondaryIconButton.defaultProps = {
-  color: 'solid',
-  type: 'button',
-  size: '40',
-  isDisabled: false,
-};
 
 export default SecondaryIconButton;
diff --git a/packages/components/card/src/card.tsx b/packages/components/card/src/card.tsx
index 0e7eef0347..62e31ea6cb 100644
--- a/packages/components/card/src/card.tsx
+++ b/packages/components/card/src/card.tsx
@@ -10,15 +10,15 @@ export type TCardProps = {
   /**
    * Determines the visual effect of the card. A raised card has a box shadow while a flat card has just a border.
    */
-  type: 'raised' | 'flat';
+  type?: 'raised' | 'flat';
   /**
    * Determines the spacing (padding) that the content should have from the card borders. In case there is no space needed, you can pass `none`.
    */
-  insetScale: 'none' | 's' | 'm' | 'l' | 'xl';
+  insetScale?: 'none' | 's' | 'm' | 'l' | 'xl';
   /**
    * Determines the background color of the card.
    */
-  theme: 'light' | 'dark';
+  theme?: 'light' | 'dark';
   /**
    * Pass a custom CSS class, useful to override the styles.
    * <br>
@@ -45,25 +45,35 @@ export type TCardProps = {
   isDisabled?: boolean;
 };
 
-const Card = (props: TCardProps) => {
+const Card = ({
+  type = 'raised',
+  theme = 'light',
+  insetScale = 'm',
+  ...props
+}: TCardProps) => {
   const isClickable = Boolean(!props.isDisabled && (props.onClick || props.to));
   // Only disable styling if the card is not clickable
   const shouldBeDisabled = props.isDisabled && (props.onClick || props.to);
 
   const commonProps = {
-    ...filterDataAttributes(props),
+    ...filterDataAttributes({
+      type,
+      theme,
+      insetScale,
+      ...props,
+    }),
     onClick: isClickable ? props.onClick : undefined,
     'aria-disabled': props.isDisabled ? true : undefined,
     css: css`
       box-sizing: border-box;
       width: 100%;
       font-size: 1rem;
-      box-shadow: ${props.type === 'raised' ? designTokens.shadow17 : 'none'};
+      box-shadow: ${type === 'raised' ? designTokens.shadow17 : 'none'};
       border-radius: ${designTokens.borderRadius4};
-      border: ${props.type === 'raised'
+      border: ${type === 'raised'
         ? `1px solid ${designTokens.colorNeutral90}`
         : 'none'};
-      background: ${props.theme === 'dark'
+      background: ${theme === 'dark'
         ? designTokens.colorNeutral95
         : designTokens.colorSurface};
       cursor: ${shouldBeDisabled
@@ -72,7 +82,7 @@ const Card = (props: TCardProps) => {
         ? 'pointer'
         : 'default'};
       :hover {
-        background: ${props.theme === 'dark'
+        background: ${theme === 'dark'
           ? isClickable
             ? designTokens.colorNeutral90
             : undefined
@@ -93,10 +103,10 @@ const Card = (props: TCardProps) => {
   };
 
   const content =
-    props.insetScale === 'none' ? (
+    insetScale === 'none' ? (
       <div>{props.children}</div>
     ) : (
-      <Inset scale={props.insetScale} height="expanded">
+      <Inset scale={insetScale} height="expanded">
         {props.children}
       </Inset>
     );
@@ -146,13 +156,6 @@ const Card = (props: TCardProps) => {
   );
 };
 
-const defaultProps: Pick<TCardProps, 'type' | 'theme' | 'insetScale'> = {
-  type: 'raised',
-  theme: 'light',
-  insetScale: 'm',
-};
-
 Card.displayName = 'Card';
-Card.defaultProps = defaultProps;
 
 export default Card;
diff --git a/packages/components/collapsible-motion/src/collapsible-motion.tsx b/packages/components/collapsible-motion/src/collapsible-motion.tsx
index 5a5b4b6171..a5e69a372d 100644
--- a/packages/components/collapsible-motion/src/collapsible-motion.tsx
+++ b/packages/components/collapsible-motion/src/collapsible-motion.tsx
@@ -53,10 +53,6 @@ export type TCollapsibleMotionProps = {
   isDefaultClosed?: boolean;
 };
 
-const defaultProps: Pick<TCollapsibleMotionProps, 'minHeight'> = {
-  minHeight: 0,
-};
-
 const getMinHeight = (minHeight: number) =>
   minHeight !== 0 ? `${minHeight}px` : minHeight;
 
@@ -174,11 +170,14 @@ const ControlledCollapsibleMotion = (props: TCollapsibleMotionProps) => {
 };
 ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
 
-const UncontrolledCollapsibleMotion = (props: TCollapsibleMotionProps) => {
+const UncontrolledCollapsibleMotion = ({
+  minHeight = 0,
+  ...props
+}: TCollapsibleMotionProps) => {
   const [isOpen, toggle] = useToggleState(!props.isDefaultClosed);
 
   const [animation, containerStyles, animationToggle, registerContentNode] =
-    useToggleAnimation(isOpen, toggle, props.minHeight);
+    useToggleAnimation(isOpen, toggle, minHeight);
 
   return (
     <ClassNames>
@@ -213,9 +212,8 @@ const UncontrolledCollapsibleMotion = (props: TCollapsibleMotionProps) => {
   );
 };
 UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
-UncontrolledCollapsibleMotion.defaultProps = defaultProps;
 
-const CollapsibleMotion = (props: TCollapsibleMotionProps) => {
+const CollapsibleMotion = ({ ...props }: TCollapsibleMotionProps) => {
   const isControlledComponent = !isNil(props.isClosed);
 
   if (isControlledComponent) {
@@ -225,6 +223,5 @@ const CollapsibleMotion = (props: TCollapsibleMotionProps) => {
   return <UncontrolledCollapsibleMotion {...props} />;
 };
 CollapsibleMotion.displayName = 'CollapsibleMotion';
-CollapsibleMotion.defaultProps = defaultProps;
 
 export default CollapsibleMotion;
diff --git a/packages/components/collapsible-panel/src/collapsible-panel.tsx b/packages/components/collapsible-panel/src/collapsible-panel.tsx
index fc71bf1225..38db5f3fef 100644
--- a/packages/components/collapsible-panel/src/collapsible-panel.tsx
+++ b/packages/components/collapsible-panel/src/collapsible-panel.tsx
@@ -130,21 +130,6 @@ export type TCollapsiblePanel = {
     | 'auto';
 };
 
-const defaultProps: Pick<
-  TCollapsiblePanel,
-  | 'theme'
-  | 'condensed'
-  | 'isDisabled'
-  | 'headerControlsAlignment'
-  | 'horizontalConstraint'
-> = {
-  theme: 'dark',
-  condensed: false,
-  isDisabled: false,
-  headerControlsAlignment: 'right',
-  horizontalConstraint: 'scale',
-};
-
 const HeadLineText = (
   props: Pick<TCollapsiblePanel, 'condensed' | 'header'>
 ) => {
@@ -166,12 +151,26 @@ const HeadLineText = (
 
 // When `isClosed` is provided the component behaves as a controlled component,
 // otherwise it will behave like an uncontrolled component.
-const CollapsiblePanel = (props: TCollapsiblePanel) => {
+const CollapsiblePanel = ({
+  theme = 'dark',
+  condensed = false,
+  isDisabled = false,
+  headerControlsAlignment = 'right',
+  horizontalConstraint = 'scale',
+  ...props
+}: TCollapsiblePanel) => {
   const panelButtonId = useFieldId(props.id, panelButtonSequentialId);
   const panelContentId = useFieldId(undefined, panelContentSequentialId);
   // Pass only `data-*` props
-  const dataProps = filterDataAttributes(props);
-  const scale = props.condensed ? 's' : 'm';
+  const dataProps = filterDataAttributes({
+    theme,
+    condensed,
+    isDisabled,
+    headerControlsAlignment,
+    horizontalConstraint,
+    ...props,
+  });
+  const scale = condensed ? 's' : 'm';
 
   const isClosedAndIsDefaultClosed =
     !isNil(props.isClosed) && !isNil(props.isDefaultClosed);
@@ -206,7 +205,7 @@ const CollapsiblePanel = (props: TCollapsiblePanel) => {
       isDefaultClosed={props.isDefaultClosed}
     >
       {({ isOpen, toggle, containerStyles, registerContentNode }) => (
-        <Constraints.Horizontal max={props.horizontalConstraint}>
+        <Constraints.Horizontal max={horizontalConstraint}>
           <div
             css={[baseContainerStyles, getThemeStyle('light')]}
             // Allow to override the styles by passing a `className` prop.
@@ -217,13 +216,21 @@ const CollapsiblePanel = (props: TCollapsiblePanel) => {
             <HeaderContainer
               as="div"
               css={[
-                getHeaderContainerStyles(props, isOpen),
+                getHeaderContainerStyles(
+                  {
+                    condensed,
+                    isDisabled,
+                    headerControlsAlignment,
+                    ...props,
+                  },
+                  isOpen
+                ),
                 getThemeStyle('light'),
               ]}
               id={panelButtonId}
               label=""
-              onClick={props.isDisabled ? undefined : toggle}
-              isDisabled={props.isDisabled}
+              onClick={isDisabled ? undefined : toggle}
+              isDisabled={isDisabled}
               buttonAttributes={dataProps}
               aria-controls={panelContentId}
               aria-expanded={isOpen ? 'true' : 'false'}
@@ -232,16 +239,13 @@ const CollapsiblePanel = (props: TCollapsiblePanel) => {
                 {!props.hideExpansionControls && (
                   <HeaderIcon
                     isClosed={!isOpen}
-                    isDisabled={props.isDisabled || false}
+                    isDisabled={isDisabled || false}
                     tone={props.tone}
                     size={'medium'}
                   />
                 )}
                 <Spacings.Inline alignItems="baseline" scale={scale}>
-                  <HeadLineText
-                    header={props.header}
-                    condensed={props.condensed}
-                  />
+                  <HeadLineText header={props.header} condensed={condensed} />
                   {props.secondaryHeader && (
                     <Text.Detail tone="secondary" truncate={true}>
                       {props.secondaryHeader}
@@ -261,7 +265,7 @@ const CollapsiblePanel = (props: TCollapsiblePanel) => {
               <SectionWrapper
                 // @ts-ignore
                 ref={registerContentNode}
-                condensed={props.condensed}
+                condensed={condensed}
                 isExpandControlHidden={props.hideExpansionControls}
               >
                 {props.description && (
@@ -295,7 +299,6 @@ const CollapsiblePanel = (props: TCollapsiblePanel) => {
  */
 CollapsiblePanel.getPanelContentId = () => '';
 CollapsiblePanel.displayName = 'CollapsiblePanel';
-CollapsiblePanel.defaultProps = defaultProps;
 CollapsiblePanel.Header = CollapsiblePanelHeader;
 
 export default CollapsiblePanel;
diff --git a/packages/components/collapsible-panel/src/header-icon.tsx b/packages/components/collapsible-panel/src/header-icon.tsx
index dfe76e5790..e7c755ca25 100644
--- a/packages/components/collapsible-panel/src/header-icon.tsx
+++ b/packages/components/collapsible-panel/src/header-icon.tsx
@@ -19,7 +19,7 @@ type THeaderIcon = {
   size: 'small' | 'medium' | 'big' | 'scale';
 };
 
-const HeaderIcon = (props: THeaderIcon) => {
+const HeaderIcon = ({ tone = 'primary', ...props }: THeaderIcon) => {
   return (
     <div
       css={[
@@ -39,7 +39,7 @@ const HeaderIcon = (props: THeaderIcon) => {
       {props.isClosed ? (
         <AngleRightIcon
           color={getArrowColor({
-            tone: props.tone,
+            tone: tone,
             isDisabled: props.isDisabled,
           })}
           size={props.size}
@@ -47,7 +47,7 @@ const HeaderIcon = (props: THeaderIcon) => {
       ) : (
         <AngleDownIcon
           color={getArrowColor({
-            tone: props.tone,
+            tone: tone,
             isDisabled: props.isDisabled,
           })}
           size={props.size}
@@ -58,8 +58,5 @@ const HeaderIcon = (props: THeaderIcon) => {
 };
 
 HeaderIcon.displayName = 'HeaderIcon';
-HeaderIcon.defaultProps = {
-  tone: 'primary',
-};
 
 export default HeaderIcon;
diff --git a/packages/components/collapsible/src/collapsible.tsx b/packages/components/collapsible/src/collapsible.tsx
index 1af6b6cbd2..4efa1f7bfb 100644
--- a/packages/components/collapsible/src/collapsible.tsx
+++ b/packages/components/collapsible/src/collapsible.tsx
@@ -61,7 +61,10 @@ const UncontrolledCollapsible = (
 };
 UncontrolledCollapsible.displayName = 'UncontrolledCollapsible';
 
-const Collapsible = (props: TCollapsibleProps) => {
+const Collapsible = ({
+  isDefaultClosed = false,
+  ...props
+}: TCollapsibleProps) => {
   const isControlledComponent = !isNil(props.isClosed);
   const hasOnToggle = !isNil(props.onToggle);
 
@@ -77,14 +80,11 @@ const Collapsible = (props: TCollapsibleProps) => {
     !hasOnToggle,
     `ui-kit/Collapsible: the prop "onToggle" does not have any effect (uncontrolled component). Please remove it.`
   );
-  return <UncontrolledCollapsible {...props} />;
+  return (
+    <UncontrolledCollapsible isDefaultClosed={isDefaultClosed} {...props} />
+  );
 };
 
 Collapsible.displayName = 'Collapsible';
 
-const collapsibleDefaultProps: Pick<TCollapsibleProps, 'isDefaultClosed'> = {
-  isDefaultClosed: false,
-};
-Collapsible.defaultProps = collapsibleDefaultProps;
-
 export default Collapsible;
diff --git a/packages/components/data-table-manager/src/column-settings-manager/column-settings-manager.tsx b/packages/components/data-table-manager/src/column-settings-manager/column-settings-manager.tsx
index cd6311aaec..f008e084bf 100644
--- a/packages/components/data-table-manager/src/column-settings-manager/column-settings-manager.tsx
+++ b/packages/components/data-table-manager/src/column-settings-manager/column-settings-manager.tsx
@@ -130,7 +130,10 @@ const selectInputComponents = {
   DropdownIndicator,
 };
 
-export const ColumnSettingsManager = (props: TColumnSettingsManagerProps) => {
+export const ColumnSettingsManager = ({
+  availableColumns = [],
+  ...props
+}: TColumnSettingsManagerProps) => {
   if (props.areHiddenColumnsSearchable) {
     warning(
       typeof props.searchHiddenColumns !== 'undefined',
@@ -149,11 +152,11 @@ export const ColumnSettingsManager = (props: TColumnSettingsManagerProps) => {
   const hiddenColumns = useMemo(
     () =>
       differenceWith(
-        props.availableColumns,
+        availableColumns,
         props.selectedColumns,
         (a, b) => a.key === b.key
       ),
-    [props.availableColumns, props.selectedColumns]
+    [availableColumns, props.selectedColumns]
   );
 
   const handleDragEnd = useCallback<(dragResult: DropResult) => void>(
@@ -162,10 +165,10 @@ export const ColumnSettingsManager = (props: TColumnSettingsManagerProps) => {
         dragResult,
         props.onUpdateColumns,
         props.selectedColumns,
-        props.availableColumns,
+        availableColumns,
         setIsDragging
       ),
-    [props.onUpdateColumns, props.selectedColumns, props.availableColumns]
+    [props.onUpdateColumns, props.selectedColumns, availableColumns]
   );
 
   const debouncedSearchHiddenColumns = useMemo(
@@ -256,9 +259,4 @@ export const ColumnSettingsManager = (props: TColumnSettingsManagerProps) => {
 
 ColumnSettingsManager.displayName = 'ColumnSettingsManager';
 
-const defaultProps: Pick<TColumnSettingsManagerProps, 'availableColumns'> = {
-  availableColumns: [],
-};
-ColumnSettingsManager.defaultProps = defaultProps;
-
 export default ColumnSettingsManager;
diff --git a/packages/components/data-table-manager/src/display-settings-manager/display-settings-manager.tsx b/packages/components/data-table-manager/src/display-settings-manager/display-settings-manager.tsx
index a72fe9a729..35a432ceb1 100644
--- a/packages/components/data-table-manager/src/display-settings-manager/display-settings-manager.tsx
+++ b/packages/components/data-table-manager/src/display-settings-manager/display-settings-manager.tsx
@@ -34,12 +34,16 @@ export type TDensityManagerProps = {
   managerTheme?: 'light' | 'dark';
 };
 
-const DensityManager = (props: TDensityManagerProps) => {
+const DensityManager = ({
+  isCondensed = true,
+  isWrappingText = false,
+  ...props
+}: TDensityManagerProps) => {
   const intl = useIntl();
-  const textWrappingOption = props.isWrappingText
+  const textWrappingOption = isWrappingText
     ? SHOW_HIDE_ON_DEMAND
     : WRAPPED_TEXT_VISIBLE;
-  const densityDisplayOption = props.isCondensed
+  const densityDisplayOption = isCondensed
     ? DENSITY_COMPACT
     : DENSITY_COMFORTABLE;
 
@@ -122,13 +126,4 @@ const DensityManager = (props: TDensityManagerProps) => {
 
 DensityManager.displayName = 'DensityManager';
 
-const defaultProps: Pick<
-  TDensityManagerProps,
-  'isCondensed' | 'isWrappingText'
-> = {
-  isCondensed: true,
-  isWrappingText: false,
-};
-DensityManager.defaultProps = defaultProps;
-
 export default DensityManager;
diff --git a/packages/components/data-table-manager/src/settings-container/settings-container.tsx b/packages/components/data-table-manager/src/settings-container/settings-container.tsx
index 88b67ff3cc..5f2dfde159 100644
--- a/packages/components/data-table-manager/src/settings-container/settings-container.tsx
+++ b/packages/components/data-table-manager/src/settings-container/settings-container.tsx
@@ -38,13 +38,16 @@ const CardContentWrapper = styled.div`
   padding: ${designTokens.spacing40} ${designTokens.spacing50};
 `;
 
-const SettingsContainer = (props: TSettingsContainerProps) => {
+const SettingsContainer = ({
+  containerTheme = 'dark',
+  ...props
+}: TSettingsContainerProps) => {
   const intl = useIntl();
 
   return (
     <CollapsibleMotion isDefaultClosed={false}>
       {({ registerContentNode, containerStyles }) => (
-        <Card type="raised" insetScale="none" theme={props.containerTheme}>
+        <Card type="raised" insetScale="none" theme={containerTheme}>
           <CardContentWrapper>
             <Spacings.Stack scale="xl">
               <HeaderContainer>
@@ -85,9 +88,4 @@ const SettingsContainer = (props: TSettingsContainerProps) => {
 
 SettingsContainer.displayName = 'SettingsContainer';
 
-const defaultProps: Pick<TSettingsContainerProps, 'containerTheme'> = {
-  containerTheme: 'dark',
-};
-SettingsContainer.defaultProps = defaultProps;
-
 export default SettingsContainer;
diff --git a/packages/components/data-table/src/cell.tsx b/packages/components/data-table/src/cell.tsx
index 54c514f78e..a1a57a1523 100644
--- a/packages/components/data-table/src/cell.tsx
+++ b/packages/components/data-table/src/cell.tsx
@@ -23,15 +23,11 @@ export type TDataCell = {
   isRowCollapsed?: boolean;
 };
 
-const defaultProps: Pick<
-  TDataCell,
-  'isTruncated' | 'shouldRenderBottomBorder'
-> = {
-  isTruncated: false,
-  shouldRenderBottomBorder: true,
-};
-
-const DataCell = (props: TDataCell) => {
+const DataCell = ({
+  isTruncated = false,
+  shouldRenderBottomBorder = true,
+  ...props
+}: TDataCell) => {
   if (props.shouldRenderCollapseButton) {
     warning(
       typeof props.handleRowCollapseClick === 'function',
@@ -51,17 +47,19 @@ const DataCell = (props: TDataCell) => {
     <BaseCell
       onClick={props.onCellClick}
       shouldIgnoreRowClick={props.shouldIgnoreRowClick}
-      shouldClipContent={
-        props.isTruncated && !props.shouldRenderResizingIndicator
-      }
-      shouldRenderBottomBorder={props.shouldRenderBottomBorder}
+      shouldClipContent={isTruncated && !props.shouldRenderResizingIndicator}
+      shouldRenderBottomBorder={shouldRenderBottomBorder}
     >
       <CellInner
         isCondensed={props.isCondensed}
-        isTruncated={props.isTruncated}
+        isTruncated={isTruncated}
         verticalCellAlignment={props.verticalCellAlignment}
         horizontalCellAlignment={props.horizontalCellAlignment}
-        {...filterDataAttributes(props)}
+        {...filterDataAttributes({
+          isTruncated,
+          shouldRenderBottomBorder,
+          ...props,
+        })}
       >
         {props.children}
       </CellInner>
@@ -83,6 +81,4 @@ const DataCell = (props: TDataCell) => {
 };
 DataCell.displayName = 'DataCell';
 
-DataCell.defaultProps = defaultProps;
-
 export default DataCell;
diff --git a/packages/components/data-table/src/data-row.tsx b/packages/components/data-table/src/data-row.tsx
index 0b1c0bb67b..3b5517c062 100644
--- a/packages/components/data-table/src/data-row.tsx
+++ b/packages/components/data-table/src/data-row.tsx
@@ -21,33 +21,28 @@ export type TDataRow<Row extends TRow = TRow> = {
   | 'itemRenderer'
 >;
 
-const defaultItemRenderer = (row: TRow, column: TColumn): ReactNode => {
+const defaultItemRenderer = <Row extends TRow = TRow>(
+  row: TRow,
+  column: TColumn<Row>,
+  _isRowCollapsed: boolean
+): ReactNode => {
   // @ts-ignore
   return row[column.key];
 };
 
-const defaultProps: Pick<
-  TDataRow,
-  | 'isCondensed'
-  | 'shouldClipContent'
-  | 'verticalCellAlignment'
-  | 'horizontalCellAlignment'
-  | 'shouldRenderBottomBorder'
-  | 'itemRenderer'
-> = {
-  isCondensed: true,
-  shouldClipContent: false,
-  verticalCellAlignment: 'top',
-  horizontalCellAlignment: 'left',
-  shouldRenderBottomBorder: true,
-  itemRenderer: defaultItemRenderer,
-};
-
 type TColumnResizingContext = {
   getIsColumnBeingResized: (columnIndex: number) => boolean;
 };
 
-const DataRow = <Row extends TRow = TRow>(props: TDataRow<Row>) => {
+const DataRow = <Row extends TRow = TRow>({
+  isCondensed = true,
+  shouldClipContent = false,
+  verticalCellAlignment = 'top',
+  horizontalCellAlignment = 'left',
+  shouldRenderBottomBorder = true,
+  itemRenderer = defaultItemRenderer,
+  ...props
+}: TDataRow<Row>) => {
   const { getIsColumnBeingResized } = useContext(
     ColumnResizingContext
   ) as TColumnResizingContext;
@@ -81,11 +76,11 @@ const DataRow = <Row extends TRow = TRow>(props: TDataRow<Row>) => {
           key={`${props.row.id}-${column.key}`}
           data-testid={`cell-${props.rowIndex}-${column.key}`}
           isTruncated={column.isTruncated && isRowCollapsed}
-          isCondensed={props.isCondensed}
+          isCondensed={isCondensed}
           isRowCollapsed={isRowCollapsed}
-          verticalCellAlignment={props.verticalCellAlignment}
+          verticalCellAlignment={verticalCellAlignment}
           horizontalCellAlignment={
-            column.align ? column.align : props.horizontalCellAlignment
+            column.align ? column.align : horizontalCellAlignment
           }
           shouldIgnoreRowClick={column.shouldIgnoreRowClick}
           handleRowCollapseClick={handleRowCollapseClick}
@@ -98,19 +93,18 @@ const DataRow = <Row extends TRow = TRow>(props: TDataRow<Row>) => {
               ? () => props.onRowClick?.(props.row, props.rowIndex, column.key)
               : undefined
           }
-          shouldRenderBottomBorder={props.shouldRenderBottomBorder}
+          shouldRenderBottomBorder={shouldRenderBottomBorder}
           shouldRenderResizingIndicator={getIsColumnBeingResized(columnIndex)}
         >
           {column.renderItem
             ? column.renderItem(props.row, isRowCollapsed)
-            : props.itemRenderer(props.row, column, isRowCollapsed)}
+            : itemRenderer(props.row, column, isRowCollapsed)}
         </DataCell>
       ))}
     </TableRow>
   );
 };
 
-DataRow.defaultProps = defaultProps;
 DataRow.displayName = 'DataRow';
 
 export default DataRow;
diff --git a/packages/components/data-table/src/data-table.stories.tsx b/packages/components/data-table/src/data-table.stories.tsx
index e48988d221..58c85a9dc6 100644
--- a/packages/components/data-table/src/data-table.stories.tsx
+++ b/packages/components/data-table/src/data-table.stories.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
-import DataTable from './data-table';
+import DataTable, { type TColumn } from './data-table';
 
 import CheckboxInput from '../../inputs/checkbox-input';
 
@@ -172,7 +172,6 @@ export const BasicExample: Story = (args) => {
         // label: <CheckboxInput onChange={() => {}} />,
         shouldIgnoreRowClick: true,
         align: 'center',
-        // @ts-expect-error
         renderItem: (row) => (
           <CheckboxInput
             isChecked={checkedRowsState[row.id]}
@@ -186,8 +185,8 @@ export const BasicExample: Story = (args) => {
         ),
         disableResizing: true,
       },
-      ...columns,
-    ];
+      ...(columns || []),
+    ] as TColumn[];
   }, [columns, checkedRowsState]);
 
   const onSortRequest = (key: SortState['key'], dir: SortState['dir']) => {
@@ -200,7 +199,6 @@ export const BasicExample: Story = (args) => {
         <DataTable
           {...args}
           rows={rows}
-          // @ts-expect-error
           columns={tableColumns}
           sortedBy={sort.key}
           sortDirection={sort.dir}
diff --git a/packages/components/data-table/src/data-table.tsx b/packages/components/data-table/src/data-table.tsx
index 1de1b8cb6c..7bad3b924e 100644
--- a/packages/components/data-table/src/data-table.tsx
+++ b/packages/components/data-table/src/data-table.tsx
@@ -47,26 +47,6 @@ const shouldRenderRowBottomBorder = (
   return false;
 };
 
-const defaultProps: Pick<
-  TDataTableProps,
-  | 'columns'
-  | 'isCondensed'
-  | 'wrapHeaderLabels'
-  | 'horizontalCellAlignment'
-  | 'verticalCellAlignment'
-  | 'disableSelfContainment'
-  | 'itemRenderer'
-> = {
-  columns: [],
-  isCondensed: true,
-  wrapHeaderLabels: true,
-  verticalCellAlignment: 'top',
-  horizontalCellAlignment: 'left',
-  disableSelfContainment: false,
-  // @ts-ignore
-  itemRenderer: (row, column) => row[column.key],
-};
-
 export type TColumn<Row extends TRow = TRow> = {
   /**
    * The unique key of the column that is used to identify your data type.
@@ -176,7 +156,7 @@ export type TDataTableProps<Row extends TRow = TRow> = {
    *
    * [Colum signatures with description](/?path=/docs/components-datatable-readme--props#signatures)
    */
-  columns: TColumn<Row>[];
+  columns?: TColumn<Row>[];
   /**
    * The columns of the nested items to be rendered in the table. Just like the columns, Each object requires a unique `key` which should correspond to property key of
    * the items of `rows` that you want to render under this column, and a `label`
@@ -231,7 +211,7 @@ export type TDataTableProps<Row extends TRow = TRow> = {
    * The default function used to render the content of each item in a cell.
    * In case a column has its own `renderItem` render function, it will take precedence over this function.
    */
-  itemRenderer: (
+  itemRenderer?: (
     item: Row,
     column: TColumn<Row>,
     isRowCollapsed: boolean
@@ -274,14 +254,27 @@ export type TDataTableProps<Row extends TRow = TRow> = {
   maxExpandableHeight?: number;
 };
 
-const DataTable = <Row extends TRow = TRow>(props: TDataTableProps<Row>) => {
-  const { columns, isCondensed } = useDataTableManagerContext();
-  const isValueFromProvider = Boolean(columns && columns.length !== 0);
-  const columnsData = isValueFromProvider ? columns : props.columns;
+const DataTable = <Row extends TRow = TRow>({
+  columns = [],
+  isCondensed = true,
+  wrapHeaderLabels = true,
+  verticalCellAlignment = 'top',
+  horizontalCellAlignment = 'left',
+  disableSelfContainment = false,
+  // @ts-ignore
+  itemRenderer = (row, column) => row[column.key],
+  ...props
+}: TDataTableProps<Row>) => {
+  const { columns: contextColumns, isCondensed: contextIsCondensed } =
+    useDataTableManagerContext();
+  const isValueFromProvider = Boolean(
+    contextColumns && contextColumns.length !== 0
+  );
+  const columnsData = isValueFromProvider ? contextColumns : columns;
   const condensedValue =
-    isValueFromProvider && isCondensed !== undefined
-      ? isCondensed
-      : props.isCondensed;
+    isValueFromProvider && contextIsCondensed !== undefined
+      ? contextIsCondensed
+      : isCondensed;
 
   //  TODO - initial poc for the nested rows
   // const [openedItemIds, setOpenedItemIds] = useState<string[]>([]);
@@ -332,14 +325,21 @@ const DataTable = <Row extends TRow = TRow>(props: TDataTableProps<Row>) => {
       maxWidth={props.maxWidth}
       maxHeight={props.maxHeight}
       isBeingResized={columnResizingReducer.getIsAnyColumnBeingResized()}
-      disableSelfContainment={!!props.disableSelfContainment}
+      disableSelfContainment={!!disableSelfContainment}
     >
       <TableGrid
         ref={tableRef as LegacyRef<HTMLTableElement>}
-        {...filterDataAttributes(props)}
+        {...filterDataAttributes({
+          isCondensed,
+          wrapHeaderLabels,
+          verticalCellAlignment,
+          horizontalCellAlignment,
+          disableSelfContainment,
+          ...props,
+        })}
         columns={columnsData as TColumn<TRow>[]}
         maxHeight={props.maxHeight}
-        disableSelfContainment={!!props.disableSelfContainment}
+        disableSelfContainment={!!disableSelfContainment}
         resizedTotalWidth={resizedTotalWidth}
       >
         <ColumnResizingContext.Provider value={columnResizingReducer}>
@@ -348,15 +348,17 @@ const DataTable = <Row extends TRow = TRow>(props: TDataTableProps<Row>) => {
               {columnsData.map((column) => (
                 <HeaderCell
                   key={column.key}
-                  shouldWrap={props.wrapHeaderLabels}
+                  shouldWrap={wrapHeaderLabels}
                   isCondensed={condensedValue}
                   iconComponent={column.headerIcon}
                   onColumnResized={props.onColumnResized}
                   disableResizing={column.disableResizing}
                   horizontalCellAlignment={
-                    column.align ? column.align : props.horizontalCellAlignment
+                    column.align ? column.align : horizontalCellAlignment
                   }
-                  disableHeaderStickiness={props.disableHeaderStickiness}
+                  disableHeaderStickiness={Boolean(
+                    props.disableHeaderStickiness
+                  )}
                   columnWidth={column.width}
                   /* Sorting Props */
                   onClick={props.onSortChange && props.onSortChange}
@@ -404,6 +406,7 @@ const DataTable = <Row extends TRow = TRow>(props: TDataTableProps<Row>) => {
             {props.rows.map((row, rowIndex) => (
               <DataRow<Row>
                 {...props}
+                itemRenderer={itemRenderer}
                 isCondensed={condensedValue}
                 columns={columnsData}
                 row={row}
@@ -411,7 +414,7 @@ const DataTable = <Row extends TRow = TRow>(props: TDataTableProps<Row>) => {
                 rowIndex={rowIndex}
                 shouldClipContent={
                   columnResizingReducer.getIsAnyColumnBeingResized() ||
-                  hasTableBeenResized
+                  Boolean(hasTableBeenResized)
                 }
                 shouldRenderBottomBorder={shouldRenderRowBottomBorder(
                   rowIndex,
@@ -427,7 +430,7 @@ const DataTable = <Row extends TRow = TRow>(props: TDataTableProps<Row>) => {
         <Footer
           data-testid="footer"
           isCondensed={condensedValue}
-          horizontalCellAlignment={props.horizontalCellAlignment}
+          horizontalCellAlignment={horizontalCellAlignment}
           resizedTotalWidth={resizedTotalWidth}
         >
           {props.footer}
@@ -437,7 +440,6 @@ const DataTable = <Row extends TRow = TRow>(props: TDataTableProps<Row>) => {
   );
 };
 
-DataTable.defaultProps = defaultProps;
 DataTable.displayName = 'DataTable';
 
 export default DataTable;
diff --git a/packages/components/data-table/src/header-cell.tsx b/packages/components/data-table/src/header-cell.tsx
index 0e15eddee5..fbc141cd37 100644
--- a/packages/components/data-table/src/header-cell.tsx
+++ b/packages/components/data-table/src/header-cell.tsx
@@ -119,28 +119,24 @@ export type THeaderCell = {
   iconComponent?: ReactNode;
 };
 
-const defaultProps: Pick<
-  THeaderCell,
-  'sortDirection' | 'disableHeaderStickiness' | 'horizontalCellAlignment'
-> = {
-  sortDirection: 'desc',
-  disableHeaderStickiness: false,
-  horizontalCellAlignment: 'left',
-};
-
-const HeaderCell = (props: THeaderCell) => {
+const HeaderCell = ({
+  sortDirection = 'desc',
+  disableHeaderStickiness = false,
+  horizontalCellAlignment = 'left',
+  ...props
+}: THeaderCell) => {
   let sortableHeaderProps = {};
   let SortingIcon!: typeof ArrowDownIcon;
 
   if (props.isSortable) {
     const isActive = props.sortedBy === props.columnKey;
     const nextSortDirection =
-      !isActive || props.sortDirection === 'desc' ? 'asc' : 'desc';
-    SortingIcon = props.sortDirection === 'desc' ? ArrowDownIcon : ArrowUpIcon;
+      !isActive || sortDirection === 'desc' ? 'asc' : 'desc';
+    SortingIcon = sortDirection === 'desc' ? ArrowDownIcon : ArrowUpIcon;
 
     sortableHeaderProps = {
       as: 'button',
-      label: props.sortDirection,
+      label: sortDirection,
       onClick: () =>
         props.onClick && props.onClick(props.columnKey, nextSortDirection),
       isActive,
@@ -159,12 +155,12 @@ const HeaderCell = (props: THeaderCell) => {
       columnKey={props.columnKey}
       onColumnResized={props.onColumnResized}
       disableResizing={props.disableResizing}
-      disableHeaderStickiness={props.disableHeaderStickiness}
+      disableHeaderStickiness={disableHeaderStickiness}
     >
       <HeaderCellInner
         shouldWrap={props.shouldWrap}
         isCondensed={props.isCondensed}
-        horizontalCellAlignment={props.horizontalCellAlignment}
+        horizontalCellAlignment={horizontalCellAlignment}
         {...sortableHeaderProps}
       >
         <HeaderLabelWrapper>
@@ -198,6 +194,5 @@ const HeaderCell = (props: THeaderCell) => {
   );
 };
 HeaderCell.displayName = 'HeaderCell';
-HeaderCell.defaultProps = defaultProps;
 
 export default HeaderCell;
diff --git a/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.tsx b/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.tsx
index a74744fbf9..25ca20d938 100644
--- a/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.tsx
+++ b/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.tsx
@@ -90,21 +90,17 @@ function useScrollBlock(isOpen: boolean, triggerRef: RefObject<HTMLElement>) {
   }, [isOpen, scrollableParentRef, triggerRef]);
 }
 
-const defaultProps: Pick<
-  TDropdownMenuProps,
-  'menuPosition' | 'menuType' | 'menuHorizontalConstraint'
-> = {
-  menuHorizontalConstraint: 'auto',
-  menuPosition: 'left',
-  menuType: 'default',
-};
-
 const Container = styled.div`
   position: relative;
   display: inline-block;
 `;
 
-function DropdownMenu(props: TDropdownMenuProps) {
+function DropdownMenu({
+  menuHorizontalConstraint = 'auto',
+  menuPosition = 'left',
+  menuType = 'default',
+  ...props
+}: TDropdownMenuProps) {
   const [isOpen, toggle] = useToggleState(false);
   const triggerRef = useRef<HTMLDivElement>(null);
 
@@ -116,8 +112,7 @@ function DropdownMenu(props: TDropdownMenuProps) {
     }),
     [isOpen, toggle]
   );
-  const Menu =
-    props.menuType === 'default' ? DropdownContentMenu : DropdownListMenu;
+  const Menu = menuType === 'default' ? DropdownContentMenu : DropdownListMenu;
 
   // Close the dropdown when clicking outside of it
   const handleGlobalClick = useCallback(
@@ -154,12 +149,17 @@ function DropdownMenu(props: TDropdownMenuProps) {
         </DropdownTrigger>
 
         <Menu
-          horizontalConstraint={props.menuHorizontalConstraint!}
+          horizontalConstraint={menuHorizontalConstraint!}
           isOpen={isOpen}
-          menuPosition={props.menuPosition!}
+          menuPosition={menuPosition!}
           menuMaxHeight={props.menuMaxHeight}
           triggerElementRef={triggerRef}
-          {...filterDataAttributes(props)}
+          {...filterDataAttributes({
+            menuHorizontalConstraint,
+            menuPosition,
+            menuType,
+            ...props,
+          })}
         >
           {props.children}
         </Menu>
@@ -167,7 +167,6 @@ function DropdownMenu(props: TDropdownMenuProps) {
     </DropdownMenuContext.Provider>
   );
 }
-DropdownMenu.defaultProps = defaultProps;
 
 DropdownMenu.ListMenuItem = DropdownListMenuItem;
 
diff --git a/packages/components/field-label/src/field-label.tsx b/packages/components/field-label/src/field-label.tsx
index a5133a4b4f..0be0d5fbce 100644
--- a/packages/components/field-label/src/field-label.tsx
+++ b/packages/components/field-label/src/field-label.tsx
@@ -103,7 +103,10 @@ const LabelRowWrapper = styled.div`
   }
 `;
 
-const FieldLabel = (props: TFieldLabelProps) => {
+const FieldLabel = ({
+  horizontalConstraint = 'scale',
+  ...props
+}: TFieldLabelProps) => {
   if (props.hintIcon) {
     warning(
       props.hintIcon.props.size === undefined,
@@ -117,7 +120,7 @@ const FieldLabel = (props: TFieldLabelProps) => {
   }
 
   return (
-    <Constraints.Horizontal max={props.horizontalConstraint}>
+    <Constraints.Horizontal max={horizontalConstraint}>
       <Inline alignItems={'center'} scale="xs">
         <Text.Wrap>
           <Label
@@ -139,7 +142,6 @@ const FieldLabel = (props: TFieldLabelProps) => {
           />
         )}
       </Inline>
-
       {props.hint && (
         <LabelRowWrapper>
           <Inline alignItems={'center'} scale="xs">
@@ -172,7 +174,6 @@ const FieldLabel = (props: TFieldLabelProps) => {
           </Text.Wrap>
         </LabelRowWrapper>
       )}
-
       {props.badge && (
         <div
           css={css`
@@ -188,8 +189,5 @@ const FieldLabel = (props: TFieldLabelProps) => {
 };
 
 FieldLabel.displayName = 'FieldLabel';
-FieldLabel.defaultProps = {
-  horizontalConstraint: 'scale',
-};
 
 export default FieldLabel;
diff --git a/packages/components/fields/password-field/src/password-field.tsx b/packages/components/fields/password-field/src/password-field.tsx
index 94a3c34462..51562a1d9b 100644
--- a/packages/components/fields/password-field/src/password-field.tsx
+++ b/packages/components/fields/password-field/src/password-field.tsx
@@ -187,15 +187,11 @@ type TTogglePasswordVisibilityHandler = (
     | KeyboardEvent<HTMLButtonElement>
 ) => void;
 
-const defaultProps: Pick<
-  TPasswordField,
-  'horizontalConstraint' | 'renderShowHideButton'
-> = {
-  horizontalConstraint: 'scale',
-  renderShowHideButton: true,
-};
-
-const PasswordField = (props: TPasswordField) => {
+const PasswordField = ({
+  horizontalConstraint = 'scale',
+  renderShowHideButton = true,
+  ...props
+}: TPasswordField) => {
   const intl = useIntl();
   const [isPasswordVisible, togglePasswordVisibility] = useToggleState(false);
   const id = useFieldId(props.id, sequentialId);
@@ -204,7 +200,7 @@ const PasswordField = (props: TPasswordField) => {
   const hasError = props.touched && hasErrors(props.errors);
   const hasWarning = props.touched && hasWarnings(props.warnings);
   const canInteract =
-    !props.isDisabled && !props.isReadOnly && props.renderShowHideButton;
+    !props.isDisabled && !props.isReadOnly && renderShowHideButton;
 
   if (!props.isReadOnly) {
     warning(
@@ -221,7 +217,7 @@ const PasswordField = (props: TPasswordField) => {
   }
 
   return (
-    <Constraints.Horizontal max={props.horizontalConstraint}>
+    <Constraints.Horizontal max={horizontalConstraint}>
       <Stack scale="xs">
         <Inline alignItems="flex-end" justifyContent="space-between">
           <FieldLabel
@@ -265,7 +261,11 @@ const PasswordField = (props: TPasswordField) => {
           placeholder={props.placeholder}
           autoComplete={props.autoComplete}
           horizontalConstraint="scale"
-          {...filterDataAttributes(props)}
+          {...filterDataAttributes({
+            horizontalConstraint,
+            renderShowHideButton,
+            ...props,
+          })}
           /* ARIA */
           aria-invalid={hasError}
           aria-errormessage={errorsContainerId}
@@ -288,7 +288,6 @@ const PasswordField = (props: TPasswordField) => {
 };
 
 PasswordField.displayName = 'PasswordField';
-PasswordField.defaultProps = defaultProps;
 /**
  * Use this function to convert the Formik `errors` object type to
  * our custom field errors type.
diff --git a/packages/components/fields/search-select-field/src/search-select-field.tsx b/packages/components/fields/search-select-field/src/search-select-field.tsx
index 059fad6ac3..53afe574c3 100644
--- a/packages/components/fields/search-select-field/src/search-select-field.tsx
+++ b/packages/components/fields/search-select-field/src/search-select-field.tsx
@@ -328,12 +328,10 @@ export type TSearchSelectFieldProps = {
   iconLeft?: ReactNode;
 };
 
-const defaultProps: Pick<TSearchSelectFieldProps, 'controlShouldRenderValue'> =
-  {
-    controlShouldRenderValue: true,
-  };
-
-const SearchSelectField = (props: TSearchSelectFieldProps) => {
+const SearchSelectField = ({
+  controlShouldRenderValue = true,
+  ...props
+}: TSearchSelectFieldProps) => {
   const hasError = Boolean(props.touched) && hasErrors(props.errors);
   const hasWarning =
     props.hasWarning || (Boolean(props.touched) && hasWarnings(props.warnings));
@@ -381,7 +379,10 @@ const SearchSelectField = (props: TSearchSelectFieldProps) => {
           htmlFor={id}
         />
         <SearchSelectInput
-          {...filterDataAttributes(props)}
+          {...filterDataAttributes({
+            controlShouldRenderValue,
+            ...props,
+          })}
           horizontalConstraint="scale"
           hasError={hasError}
           aria-label={props['aria-label']}
@@ -421,7 +422,7 @@ const SearchSelectField = (props: TSearchSelectFieldProps) => {
           cacheOptions={props.cacheOptions}
           showOptionGroupDivider={props.showOptionGroupDivider}
           optionType={props.optionType}
-          controlShouldRenderValue={props.controlShouldRenderValue}
+          controlShouldRenderValue={controlShouldRenderValue}
           iconLeft={props.iconLeft}
         />
         <FieldErrors
@@ -440,7 +441,6 @@ const SearchSelectField = (props: TSearchSelectFieldProps) => {
     </Constraints.Horizontal>
   );
 };
-SearchSelectField.defaultProps = defaultProps;
 SearchSelectField.displayName = 'SearchSelectField';
 /**
  * Use this function to convert the Formik `errors` object type to
diff --git a/packages/components/grid/src/grid.tsx b/packages/components/grid/src/grid.tsx
index d38ad8e515..bc0b64c906 100644
--- a/packages/components/grid/src/grid.tsx
+++ b/packages/components/grid/src/grid.tsx
@@ -18,7 +18,7 @@ export type TGridItemProps = {
 export type TGridProps = {
   children: ReactNode;
   // List based on https://css-tricks.com/snippets/css/complete-guide-grid
-  display: 'grid' | 'inline-grid';
+  display?: 'grid' | 'inline-grid';
   gridTemplateColumns?: string;
   gridTemplateRows?: string;
   gridTemplateAreas?: string;
@@ -99,12 +99,10 @@ const GridContainer = styled.div<TGridProps>((props) => ({
   gridAutoRows: props.gridAutoRows,
   gridAutoFlow: props.gridAutoFlow,
 }));
-const defaultProps: Pick<TGridProps, 'display'> = {
-  display: 'grid',
-};
-const Grid = (props: TGridProps) => <GridContainer {...props} />;
+const Grid = ({ display = 'grid', ...props }: TGridProps) => (
+  <GridContainer display={display} {...props} />
+);
 Grid.displayName = 'Grid';
-Grid.defaultProps = defaultProps;
 // Assign GridItem as a static property of Grid
 Grid.Item = GridItem;
 
diff --git a/packages/components/icons/src/custom-icon/custom-icon.tsx b/packages/components/icons/src/custom-icon/custom-icon.tsx
index 22772ab9e9..8fa5ea812f 100644
--- a/packages/components/icons/src/custom-icon/custom-icon.tsx
+++ b/packages/components/icons/src/custom-icon/custom-icon.tsx
@@ -21,17 +21,28 @@ export type TCustomIconProps = {
   icon: ReactElement | string;
 };
 
-const defaultProps: Required<Pick<TCustomIconProps, 'size' | 'hasBorder'>> = {
-  size: '20',
-  hasBorder: true,
-};
-
-const CustomIcon = (props: TCustomIconProps) => (
+const CustomIcon = ({
+  size = '20',
+  hasBorder = true,
+  ...props
+}: TCustomIconProps) => (
   <div
     role="img"
-    css={getCustomIconStyles(props)}
-    {...filterDataAttributes(props)}
-    {...filterAriaAttributes(props)}
+    css={getCustomIconStyles({
+      size,
+      hasBorder,
+      ...props,
+    })}
+    {...filterDataAttributes({
+      size,
+      hasBorder,
+      ...props,
+    })}
+    {...filterAriaAttributes({
+      size,
+      hasBorder,
+      ...props,
+    })}
   >
     {typeof props.icon === 'string' ? (
       <InlineSvg data={props.icon} size={'scale'} />
@@ -42,6 +53,5 @@ const CustomIcon = (props: TCustomIconProps) => (
 );
 
 CustomIcon.displayName = 'CustomIcon';
-CustomIcon.defaultProps = defaultProps;
 
 export default CustomIcon;
diff --git a/packages/components/icons/src/leading-icon/leading-icon.tsx b/packages/components/icons/src/leading-icon/leading-icon.tsx
index bf05b6c506..2fe675bf71 100644
--- a/packages/components/icons/src/leading-icon/leading-icon.tsx
+++ b/packages/components/icons/src/leading-icon/leading-icon.tsx
@@ -30,15 +30,13 @@ export type TLeadingIconProps = {
   svg?: string;
 };
 
-const defaultProps: Required<
-  Pick<TLeadingIconProps, 'color' | 'size' | 'isInverted'>
-> = {
-  color: 'neutral',
-  size: '20',
-  isInverted: false,
-};
-
-const LeadingIcon = (props: TLeadingIconProps) => {
+const LeadingIcon = ({
+  color = 'neutral',
+  size = '20',
+  isInverted = false,
+  ...props
+}: TLeadingIconProps) => {
+  const allProps = { color, size, isInverted, ...props };
   if (!props.svg && !props.icon) {
     warning(
       false,
@@ -50,9 +48,9 @@ const LeadingIcon = (props: TLeadingIconProps) => {
   return (
     <div
       role="img"
-      css={getLeadingIconStyles(props)}
-      {...filterDataAttributes(props)}
-      {...filterAriaAttributes(props)}
+      css={getLeadingIconStyles(allProps)}
+      {...filterDataAttributes(allProps)}
+      {...filterAriaAttributes(allProps)}
     >
       {props.svg ? (
         <InlineSvg data={props.svg} size={'scale'} />
@@ -67,6 +65,5 @@ const LeadingIcon = (props: TLeadingIconProps) => {
 };
 
 LeadingIcon.displayName = 'LeadingIcon';
-LeadingIcon.defaultProps = defaultProps;
 
 export default LeadingIcon;
diff --git a/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.tsx b/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.tsx
index 3ad412eeef..3a81b52cb0 100644
--- a/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.tsx
+++ b/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.tsx
@@ -210,7 +210,7 @@ export type TAsyncCreatableSelectInputProps = {
    * <br>
    * Use in conjunction with `menuPortalTarget`
    */
-  menuPortalZIndex: number;
+  menuPortalZIndex?: number;
   /**
    * whether the menu should block scroll while open
    * <br>
@@ -342,18 +342,14 @@ export type TAsyncCreatableSelectInputProps = {
   showOptionGroupDivider?: boolean;
 };
 
-const defaultProps: Pick<
-  TAsyncCreatableSelectInputProps,
-  'value' | 'isSearchable' | 'menuPortalZIndex'
-> = {
+const AsyncCreatableSelectInput = ({
   // Using "null" will ensure that the currently selected value disappears in
   // case "undefined" gets passed as the next value
-  value: null,
-  isSearchable: true,
-  menuPortalZIndex: 1,
-};
-
-const AsyncCreatableSelectInput = (props: TAsyncCreatableSelectInputProps) => {
+  value = null,
+  isSearchable = true,
+  menuPortalZIndex = 1,
+  ...props
+}: TAsyncCreatableSelectInputProps) => {
   const intl = useIntl();
 
   const placeholder =
@@ -368,20 +364,27 @@ const AsyncCreatableSelectInput = (props: TAsyncCreatableSelectInputProps) => {
 
   if (props.isMulti) {
     warning(
-      Array.isArray(props.value),
+      Array.isArray(value),
       'AsyncCreatableSelectInput: `value` is expected to be an array when isMulti is true'
     );
   }
 
   warnIfMenuPortalPropsAreMissing({
-    menuPortalZIndex: props.menuPortalZIndex,
+    menuPortalZIndex: menuPortalZIndex,
     menuPortalTarget: props.menuPortalTarget,
     componentName: 'AsyncCreatableSelectInput',
   });
 
   return (
     <Constraints.Horizontal max={props.horizontalConstraint}>
-      <div {...filterDataAttributes(props)}>
+      <div
+        {...filterDataAttributes({
+          value,
+          isSearchable,
+          menuPortalZIndex,
+          ...props,
+        })}
+      >
         <AsyncCreatableSelect
           aria-label={props['aria-label']}
           aria-labelledby={props['aria-labelledby']}
@@ -414,13 +417,13 @@ const AsyncCreatableSelectInput = (props: TAsyncCreatableSelectInputProps) => {
               hasWarning: props.hasWarning,
               hasError: props.hasError,
               showOptionGroupDivider: props.showOptionGroupDivider,
-              menuPortalZIndex: props.menuPortalZIndex,
+              menuPortalZIndex: menuPortalZIndex,
               isCondensed: props.isCondensed,
               isDisabled: props.isDisabled,
               isReadOnly: props.isReadOnly,
               iconLeft: props.iconLeft,
               isMulti: props.isMulti,
-              hasValue: !isEmpty(props.value),
+              hasValue: !isEmpty(value),
               horizontalConstraint: props.horizontalConstraint,
             }) as ReactSelectAsyncCreatableProps['styles']
           }
@@ -436,7 +439,7 @@ const AsyncCreatableSelectInput = (props: TAsyncCreatableSelectInputProps) => {
           isDisabled={props.isDisabled}
           isOptionDisabled={props.isOptionDisabled}
           isMulti={props.isMulti}
-          isSearchable={props.isSearchable}
+          isSearchable={isSearchable}
           maxMenuHeight={props.maxMenuHeight}
           menuPortalTarget={props.menuPortalTarget}
           menuShouldBlockScroll={props.menuShouldBlockScroll}
@@ -493,7 +496,7 @@ const AsyncCreatableSelectInput = (props: TAsyncCreatableSelectInputProps) => {
           placeholder={placeholder}
           tabIndex={props.tabIndex}
           tabSelectsValue={props.tabSelectsValue}
-          value={props.value}
+          value={value}
           // Async react-select props
           defaultOptions={props.defaultOptions}
           loadOptions={props.loadOptions}
@@ -520,7 +523,6 @@ const AsyncCreatableSelectInput = (props: TAsyncCreatableSelectInputProps) => {
   );
 };
 AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
-AsyncCreatableSelectInput.defaultProps = defaultProps;
 
 /**
  * Expose static helper methods.
diff --git a/packages/components/inputs/async-select-input/src/async-select-input.tsx b/packages/components/inputs/async-select-input/src/async-select-input.tsx
index 373bb76b59..be5bbe2fd9 100644
--- a/packages/components/inputs/async-select-input/src/async-select-input.tsx
+++ b/packages/components/inputs/async-select-input/src/async-select-input.tsx
@@ -223,7 +223,7 @@ export type TAsyncSelectInputProps = {
    * <br>
    * Use in conjunction with `menuPortalTarget`
    */
-  menuPortalZIndex: number;
+  menuPortalZIndex?: number;
   /**
    * whether the menu should block scroll while open
    * <br>
@@ -321,7 +321,7 @@ export type TAsyncSelectInputProps = {
    */
   iconLeft?: ReactNode;
   /** defines how options are rendered */
-  optionStyle: 'list' | 'checkbox';
+  optionStyle?: 'list' | 'checkbox';
   /**
    * Indicates the appearance of the input.
    * Filter appearance is meant to be used when the async-select is used as a filter.
@@ -333,26 +333,17 @@ export type TAsyncSelectInputProps = {
   count?: number;
 };
 
-const defaultProps: Pick<
-  TAsyncSelectInputProps,
-  | 'value'
-  | 'isSearchable'
-  | 'menuPortalZIndex'
-  | 'controlShouldRenderValue'
-  | 'appearance'
-  | 'optionStyle'
-> = {
+const AsyncSelectInput = ({
   // Using "null" will ensure that the currently selected value disappears in
   // case "undefined" gets passed as the next value
-  value: null,
-  isSearchable: true,
-  menuPortalZIndex: 1,
-  controlShouldRenderValue: true,
-  appearance: 'default',
-  optionStyle: 'list',
-};
-
-const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
+  value = null,
+  isSearchable = true,
+  menuPortalZIndex = 1,
+  controlShouldRenderValue = true,
+  appearance = 'default',
+  optionStyle = 'list',
+  ...props
+}: TAsyncSelectInputProps) => {
   const intl = useIntl();
 
   if (!props.isReadOnly) {
@@ -363,7 +354,7 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
   }
 
   warnIfMenuPortalPropsAreMissing({
-    menuPortalZIndex: props.menuPortalZIndex,
+    menuPortalZIndex: menuPortalZIndex,
     menuPortalTarget: props.menuPortalTarget,
     componentName: 'AsyncSelectInput',
   });
@@ -371,7 +362,7 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
   const placeholder =
     props.placeholder ||
     intl.formatMessage(
-      props.appearance === 'filter'
+      appearance === 'filter'
         ? messages.selectInputAsFilterPlaceholder
         : messages.placeholder
     );
@@ -385,7 +376,17 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
 
   return (
     <Constraints.Horizontal max={props.horizontalConstraint}>
-      <div {...filterDataAttributes(props)}>
+      <div
+        {...filterDataAttributes({
+          value,
+          isSearchable,
+          menuPortalZIndex,
+          controlShouldRenderValue,
+          appearance,
+          optionStyle,
+          ...props,
+        })}
+      >
         <AsyncSelect
           aria-label={props['aria-label']}
           aria-labelledby={props['aria-labelledby']}
@@ -409,12 +410,12 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
                     ),
                   }
                 : {}),
-              ...(props.appearance === 'filter' && {
+              ...(appearance === 'filter' && {
                 DropdownIndicator: () => <SearchIcon color="neutral60" />,
                 ClearIndicator: null,
               }),
-              ...(props.optionStyle === 'checkbox'
-                ? optionStyleCheckboxComponents(props.appearance)
+              ...(optionStyle === 'checkbox'
+                ? optionStyleCheckboxComponents(appearance)
                 : {}),
               ...props.components,
             } as ReactSelectAsyncProps['components']
@@ -422,25 +423,24 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
           menuIsOpen={
             props.isReadOnly
               ? false
-              : props.appearance === 'filter'
+              : appearance === 'filter'
               ? true
               : props.menuIsOpen
           }
           styles={
             createSelectStyles({
               hasWarning: props.hasWarning,
-              appearance: props.appearance,
+              appearance: appearance,
               hasError: props.hasError,
               showOptionGroupDivider: props.showOptionGroupDivider,
-              menuPortalZIndex: props.menuPortalZIndex,
-              isCondensed:
-                props.appearance === 'filter' ? true : props.isCondensed,
+              menuPortalZIndex: menuPortalZIndex,
+              isCondensed: appearance === 'filter' ? true : props.isCondensed,
               isDisabled: props.isDisabled,
               isReadOnly: props.isReadOnly,
               iconLeft: props.iconLeft,
               isMulti: props.isMulti,
-              hasValue: !isEmpty(props.value),
-              controlShouldRenderValue: props.controlShouldRenderValue,
+              hasValue: !isEmpty(value),
+              controlShouldRenderValue: controlShouldRenderValue,
               horizontalConstraint: props.horizontalConstraint,
             }) as ReactSelectAsyncProps['styles']
           }
@@ -455,11 +455,11 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
           isClearable={props.isReadOnly ? false : props.isClearable}
           isDisabled={props.isDisabled}
           isOptionDisabled={props.isOptionDisabled}
-          {...(props.optionStyle === 'checkbox'
+          {...(optionStyle === 'checkbox'
             ? optionsStyleCheckboxSelectProps()
             : { hideSelectedOptions: props.hideSelectedOptions })}
           isMulti={props.isMulti}
-          isSearchable={props.isSearchable}
+          isSearchable={isSearchable}
           maxMenuHeight={props.maxMenuHeight}
           menuPortalTarget={props.menuPortalTarget}
           menuShouldBlockScroll={props.menuShouldBlockScroll}
@@ -519,7 +519,7 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
           placeholder={placeholder}
           tabIndex={props.tabIndex}
           tabSelectsValue={props.tabSelectsValue}
-          value={props.value}
+          value={value}
           // Async react-select props
           defaultOptions={props.defaultOptions}
           loadOptions={props.loadOptions}
@@ -529,9 +529,7 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
           isCondensed={props.isCondensed}
           iconLeft={props.iconLeft}
           controlShouldRenderValue={
-            props.appearance === 'filter'
-              ? false
-              : props.controlShouldRenderValue
+            appearance === 'filter' ? false : controlShouldRenderValue
           }
         />
       </div>
@@ -539,7 +537,6 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
   );
 };
 AsyncSelectInput.displayName = 'AsyncSelectInput';
-AsyncSelectInput.defaultProps = defaultProps;
 
 /**
  * Expose static helper methods.
diff --git a/packages/components/inputs/checkbox-input/src/checkbox-input.tsx b/packages/components/inputs/checkbox-input/src/checkbox-input.tsx
index e825d6e78a..c0565e6947 100644
--- a/packages/components/inputs/checkbox-input/src/checkbox-input.tsx
+++ b/packages/components/inputs/checkbox-input/src/checkbox-input.tsx
@@ -69,15 +69,6 @@ type TLabelProps = Pick<
   | 'isHovered'
 >;
 
-const defaultProps: Pick<
-  TCheckboxProps,
-  'isChecked' | 'isDisabled' | 'hasError'
-> = {
-  isChecked: false,
-  isDisabled: false,
-  hasError: false,
-};
-
 const getBorderColor = (props: TLabelProps) => {
   if (props.hasError) {
     return designTokens.colorError;
@@ -222,35 +213,46 @@ const Label = styled.label<TLabelProps>`
   }
 `;
 
-const CheckboxInput = (props: TCheckboxProps) => {
+const CheckboxInput = ({
+  isChecked = false,
+  isDisabled = false,
+  hasError = false,
+  ...props
+}: TCheckboxProps) => {
   // We generate an id in case no id is provided by the parent to attach the
   // label to the input component.
   const id = props.id || sequentialId();
   return (
     <Label
       htmlFor={id}
-      hasError={props.hasError}
-      isDisabled={props.isDisabled}
+      hasError={hasError}
+      isDisabled={isDisabled}
       isReadOnly={props.isReadOnly}
-      isChecked={props.isChecked}
+      isChecked={isChecked}
       isHovered={props.isHovered}
       isIndeterminate={props.isIndeterminate}
     >
-      <Checkbox {...props} id={id} />
+      <Checkbox
+        {...props}
+        id={id}
+        isChecked={isChecked}
+        isDisabled={isDisabled}
+        hasError={hasError}
+      />
       <CheckboxIcon
-        hasError={props.hasError}
-        isDisabled={props.isDisabled}
+        hasError={hasError}
+        isDisabled={isDisabled}
         isReadOnly={props.isReadOnly}
-        isChecked={props.isChecked}
+        isChecked={isChecked}
         isHovered={props.isHovered}
         isIndeterminate={props.isIndeterminate}
       />
       {props.children && (
         <LabelTextWrapper
-          hasError={props.hasError}
-          isDisabled={props.isDisabled}
+          hasError={hasError}
+          isDisabled={isDisabled}
           isReadOnly={props.isReadOnly}
-          isChecked={props.isChecked}
+          isChecked={isChecked}
           isHovered={props.isHovered}
           isIndeterminate={props.isIndeterminate}
           // To allow focusing the Label in readOnly mode, because the checkbox gets disabled and therefore unfocusable
@@ -264,6 +266,5 @@ const CheckboxInput = (props: TCheckboxProps) => {
 };
 
 CheckboxInput.displayName = 'CheckboxInput';
-CheckboxInput.defaultProps = defaultProps;
 
 export default CheckboxInput;
diff --git a/packages/components/inputs/creatable-select-input/src/creatable-select-input.tsx b/packages/components/inputs/creatable-select-input/src/creatable-select-input.tsx
index 4dda8d15dd..1358857dd0 100644
--- a/packages/components/inputs/creatable-select-input/src/creatable-select-input.tsx
+++ b/packages/components/inputs/creatable-select-input/src/creatable-select-input.tsx
@@ -205,7 +205,7 @@ export type TCreatableSelectInputProps = {
    * <br>
    * Use in conjunction with `menuPortalTarget`
    */
-  menuPortalZIndex: number;
+  menuPortalZIndex?: number;
   /**
    * whether the menu should block scroll while open
    * <br>
@@ -326,24 +326,20 @@ export type TCreatableSelectInputProps = {
   createOptionPosition?: ReactSelectCreatableProps['createOptionPosition'];
 };
 
-const defaultProps: Pick<
-  TCreatableSelectInputProps,
-  'value' | 'isSearchable' | 'menuPortalZIndex'
-> = {
+const CreatableSelectInput = ({
   // Using "null" will ensure that the currently selected value disappears in
   // case "undefined" gets passed as the next value
-  value: null,
+  value = null,
   // The input needs to be searchable, otherwise it's not possible to create
   // new options.
   // We still allow consumers to pass isSearchable={false} so that they can
   // use CreatableSelectInput as an alternative to SelectInput, which does
   // not do the option/value mapping going on there and therefore provides
   // the default API of react-select.
-  isSearchable: true,
-  menuPortalZIndex: 1,
-};
-
-const CreatableSelectInput = (props: TCreatableSelectInputProps) => {
+  isSearchable = true,
+  menuPortalZIndex = 1,
+  ...props
+}: TCreatableSelectInputProps) => {
   const intl = useIntl();
 
   if (!props.isReadOnly) {
@@ -358,7 +354,14 @@ const CreatableSelectInput = (props: TCreatableSelectInputProps) => {
 
   return (
     <Constraints.Horizontal max={props.horizontalConstraint}>
-      <div {...filterDataAttributes(props)}>
+      <div
+        {...filterDataAttributes({
+          value,
+          isSearchable,
+          menuPortalZIndex,
+          ...props,
+        })}
+      >
         <CreatableSelect
           aria-label={props['aria-label']}
           aria-labelledby={props['aria-labelledby']}
@@ -392,13 +395,13 @@ const CreatableSelectInput = (props: TCreatableSelectInputProps) => {
               hasWarning: props.hasWarning,
               hasError: props.hasError,
               showOptionGroupDivider: props.showOptionGroupDivider,
-              menuPortalZIndex: props.menuPortalZIndex,
+              menuPortalZIndex: menuPortalZIndex,
               isCondensed: props.isCondensed,
               isDisabled: props.isDisabled,
               isReadOnly: props.isReadOnly,
               iconLeft: props.iconLeft,
               isMulti: props.isMulti,
-              hasValue: !isEmpty(props.value),
+              hasValue: !isEmpty(value),
               horizontalConstraint: props.horizontalConstraint,
             }) as ReactSelectCreatableProps['styles']
           }
@@ -414,7 +417,7 @@ const CreatableSelectInput = (props: TCreatableSelectInputProps) => {
           isDisabled={props.isDisabled}
           isOptionDisabled={props.isOptionDisabled}
           isMulti={props.isMulti}
-          isSearchable={props.isSearchable}
+          isSearchable={isSearchable}
           maxMenuHeight={props.maxMenuHeight}
           menuPortalTarget={props.menuPortalTarget}
           menuShouldBlockScroll={props.menuShouldBlockScroll}
@@ -474,7 +477,7 @@ const CreatableSelectInput = (props: TCreatableSelectInputProps) => {
           placeholder={placeholder}
           tabIndex={props.tabIndex}
           tabSelectsValue={props.tabSelectsValue}
-          value={props.value}
+          value={value}
           // Creatable props
           allowCreateWhileLoading={props.allowCreateWhileLoading}
           formatCreateLabel={
@@ -497,7 +500,6 @@ const CreatableSelectInput = (props: TCreatableSelectInputProps) => {
   );
 };
 CreatableSelectInput.displayName = 'CreatableSelectInput';
-CreatableSelectInput.defaultProps = defaultProps;
 
 /**
  * Expose static helper methods.
diff --git a/packages/components/inputs/input-utils/src/localized-input-toggle/localized-input-toggle.tsx b/packages/components/inputs/input-utils/src/localized-input-toggle/localized-input-toggle.tsx
index fdb1396aa8..496aba11b4 100644
--- a/packages/components/inputs/input-utils/src/localized-input-toggle/localized-input-toggle.tsx
+++ b/packages/components/inputs/input-utils/src/localized-input-toggle/localized-input-toggle.tsx
@@ -16,22 +16,18 @@ export type TLocalizedInputToggleProps = {
       | boolean
   ) => void;
   isDisabled?: boolean;
-  showMessage: string | MessageDescriptor;
-  hideMessage: string | MessageDescriptor;
+  showMessage?: string | MessageDescriptor;
+  hideMessage?: string | MessageDescriptor;
   remainingLocalizations?: number;
 };
 
-const defaultProps: Pick<
-  TLocalizedInputToggleProps,
-  'showMessage' | 'hideMessage'
-> = {
-  hideMessage: messages.hide,
-  showMessage: messages.show,
-};
-
-const LocalizedInputToggle = (props: TLocalizedInputToggleProps) => {
+const LocalizedInputToggle = ({
+  hideMessage = messages.hide,
+  showMessage = messages.show,
+  ...props
+}: TLocalizedInputToggleProps) => {
   const intl = useIntl();
-  const labelMessage = props.isOpen ? props.hideMessage : props.showMessage;
+  const labelMessage = props.isOpen ? hideMessage : showMessage;
   const label =
     typeof labelMessage === 'string'
       ? labelMessage
@@ -54,6 +50,5 @@ const LocalizedInputToggle = (props: TLocalizedInputToggleProps) => {
   );
 };
 
-LocalizedInputToggle.defaultProps = defaultProps;
 LocalizedInputToggle.displayName = 'LocalizedInputToggle';
 export default LocalizedInputToggle;
diff --git a/packages/components/inputs/input-utils/src/multiline-input/multiline-input.tsx b/packages/components/inputs/input-utils/src/multiline-input/multiline-input.tsx
index 9bcc8b8c71..d591ff6563 100644
--- a/packages/components/inputs/input-utils/src/multiline-input/multiline-input.tsx
+++ b/packages/components/inputs/input-utils/src/multiline-input/multiline-input.tsx
@@ -51,7 +51,10 @@ const getElementVerticalPadding = (element: Element) => {
   return _elementVerticalPadding;
 };
 
-const MultilineInput = (props: TMultiLineInputProps) => {
+const MultilineInput = ({
+  cacheMeasurements = true,
+  ...props
+}: TMultiLineInputProps) => {
   const { onHeightChange } = props;
   const ref = useRef<HTMLTextAreaElement | null>(null);
 
@@ -93,7 +96,10 @@ const MultilineInput = (props: TMultiLineInputProps) => {
       placeholder={props.placeholder}
       readOnly={props.isReadOnly}
       autoFocus={props.isAutofocussed}
-      css={getTextareaStyles(props)}
+      css={getTextareaStyles({
+        cacheMeasurements,
+        ...props,
+      })}
       // Allow to override the styles by passing a `className` prop.
       // Custom styles can also be passed using the `css` prop from emotion.
       // https://emotion.sh/docs/css-prop#style-precedence
@@ -106,15 +112,15 @@ const MultilineInput = (props: TMultiLineInputProps) => {
       role="textbox"
       minRows={MIN_ROW_COUNT}
       maxRows={props.isOpen ? props.maxRows : MIN_ROW_COUNT}
-      cacheMeasurements={props.cacheMeasurements}
-      {...filterDataAttributes(props)}
+      cacheMeasurements={cacheMeasurements}
+      {...filterDataAttributes({
+        cacheMeasurements,
+        ...props,
+      })}
     />
   );
 };
 
 MultilineInput.displayName = 'MultilineInput';
-MultilineInput.defaultProps = {
-  cacheMeasurements: true,
-};
 
 export default MultilineInput;
diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.tsx b/packages/components/inputs/localized-money-input/src/localized-money-input.tsx
index cedd3408a2..242adc6b34 100644
--- a/packages/components/inputs/localized-money-input/src/localized-money-input.tsx
+++ b/packages/components/inputs/localized-money-input/src/localized-money-input.tsx
@@ -272,7 +272,10 @@ const LocalizedInput = (props: TLocalizedInputProps) => {
 
 LocalizedInput.displayName = 'LocalizedInput';
 
-const LocalizedMoneyInput = (props: TLocalizedMoneyInputProps) => {
+const LocalizedMoneyInput = ({
+  horizontalConstraint = 'scale',
+  ...props
+}: TLocalizedMoneyInputProps) => {
   const intl = useIntl();
 
   const defaultExpansionState =
@@ -324,7 +327,7 @@ const LocalizedMoneyInput = (props: TLocalizedMoneyInputProps) => {
   }
 
   return (
-    <Constraints.Horizontal max={props.horizontalConstraint}>
+    <Constraints.Horizontal max={horizontalConstraint}>
       <Stack scale="xs">
         <Stack scale="s">
           {currencies.map((currency, index) => {
@@ -356,7 +359,13 @@ const LocalizedMoneyInput = (props: TLocalizedMoneyInputProps) => {
                 )}
                 warning={props.warnings && props.warnings[currency]}
                 error={props.errors && props.errors[currency]}
-                {...createLocalizedDataAttributes(props, currency)}
+                {...createLocalizedDataAttributes(
+                  {
+                    horizontalConstraint,
+                    ...props,
+                  },
+                  currency
+                )}
                 hasHighPrecisionBadge={props.hasHighPrecisionBadge}
               />
             );
@@ -392,10 +401,6 @@ LocalizedMoneyInput.getId = getId;
 
 LocalizedMoneyInput.getName = getName;
 
-LocalizedMoneyInput.defaultProps = {
-  horizontalConstraint: 'scale',
-};
-
 LocalizedMoneyInput.convertToMoneyValues = (
   values: TValue[],
   locale: string
diff --git a/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.tsx b/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.tsx
index 591c8cb523..e1b97e7c08 100644
--- a/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.tsx
+++ b/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.tsx
@@ -209,9 +209,11 @@ const expandedTranslationsReducer = (
 // can get quite confusing. We try to stick to expand/collapse for the
 // multiline inputs, while we use show/hide/open/close for the remaining
 // languages.
-const LocalizedMultilineTextInput = (
-  props: TLocalizedMultilineTextInputProps
-) => {
+const LocalizedMultilineTextInput = ({
+  horizontalConstraint = 'scale',
+  cacheMeasurements = true,
+  ...props
+}: TLocalizedMultilineTextInputProps) => {
   const intl = useIntl();
 
   const initialExpandedTranslationsState = Object.keys(props.value).reduce(
@@ -289,7 +291,7 @@ const LocalizedMultilineTextInput = (
   }
 
   return (
-    <Constraints.Horizontal max={props.horizontalConstraint}>
+    <Constraints.Horizontal max={horizontalConstraint}>
       <Stack scale="xs">
         <Stack scale="s">
           {languages.map((language, index) => {
@@ -317,7 +319,7 @@ const LocalizedMultilineTextInput = (
                 onBlur={props.onBlur}
                 onFocus={props.onFocus}
                 isAutofocussed={index === 0 && props.isAutofocussed}
-                cacheMeasurements={props.cacheMeasurements}
+                cacheMeasurements={cacheMeasurements}
                 isCondensed={props.isCondensed}
                 isDisabled={props.isDisabled}
                 isReadOnly={props.isReadOnly}
@@ -335,7 +337,14 @@ const LocalizedMultilineTextInput = (
                   props.additionalInfo && props.additionalInfo[language]
                 }
                 hasLanguagesControl={hasLanguagesControl}
-                {...createLocalizedDataAttributes(props, language)}
+                {...createLocalizedDataAttributes(
+                  {
+                    horizontalConstraint,
+                    cacheMeasurements,
+                    ...props,
+                  },
+                  language
+                )}
                 /* ARIA */
                 aria-invalid={props['aria-invalid']}
                 aria-errormessage={props['aria-errormessage']}
@@ -370,11 +379,6 @@ LocalizedMultilineTextInput.getId = getId;
 
 LocalizedMultilineTextInput.getName = getName;
 
-LocalizedMultilineTextInput.defaultProps = {
-  horizontalConstraint: 'scale',
-  cacheMeasurements: true,
-};
-
 LocalizedMultilineTextInput.createLocalizedString = createLocalizedString;
 
 LocalizedMultilineTextInput.isEmpty = isEmpty;
diff --git a/packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx b/packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx
index 4fb819692f..4f51394813 100644
--- a/packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx
+++ b/packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx
@@ -95,7 +95,10 @@ const Row = styled.div`
   justify-content: flex-end;
 `;
 
-const TranslationInput = (props: TranslationInputProps) => {
+const TranslationInput = ({
+  cacheMeasurements = true,
+  ...props
+}: TranslationInputProps) => {
   const [inputHasSeveralRows, setInputHasSeveralRows] = useState(false);
 
   const handleHeightChange = useCallback(
@@ -187,9 +190,12 @@ const TranslationInput = (props: TranslationInputProps) => {
           isCondensed={props.isCondensed}
           isReadOnly={props.isReadOnly}
           isAutofocussed={props.isAutofocussed}
-          cacheMeasurements={props.cacheMeasurements}
+          cacheMeasurements={cacheMeasurements}
           isOpen={!props.isCollapsed}
-          {...filterDataAttributes(props)}
+          {...filterDataAttributes({
+            cacheMeasurements,
+            ...props,
+          })}
           /* ARIA */
           aria-invalid={props['aria-invalid']}
           aria-errormessage={props['aria-errormessage']}
@@ -264,8 +270,5 @@ const TranslationInput = (props: TranslationInputProps) => {
 };
 
 TranslationInput.displayName = 'TranslationInput';
-TranslationInput.defaultProps = {
-  cacheMeasurements: true,
-};
 
 export default TranslationInput;
diff --git a/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.tsx b/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.tsx
index b19dd8adee..0fd7b41ace 100644
--- a/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.tsx
+++ b/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.tsx
@@ -149,7 +149,7 @@ export type TLocalizedRichTextInputProps = {
   /**
    * Shows an `expand` icon in the toolbar
    */
-  showExpandIcon: boolean;
+  showExpandIcon?: boolean;
   /**
    * Called when the `expand` button is clicked
    */
@@ -176,14 +176,6 @@ type RefWithImperativeResetHandler = MutableRefObject<unknown> & {
   resetValue: (newValue: string | Record<string, string>) => void;
 };
 
-const defaultProps: Pick<
-  TLocalizedRichTextInputProps,
-  'horizontalConstraint' | 'showExpandIcon'
-> = {
-  horizontalConstraint: 'scale',
-  showExpandIcon: false,
-};
-
 const expandedTranslationsReducer = (
   state: TReducerState,
   action: TReducerAction
@@ -219,7 +211,14 @@ const LocalizedRichTextInput: ForwardRefExoticComponent<
   TLocalizedRichTextInputProps & RefAttributes<unknown>
 > &
   Partial<StaticProps> = forwardRef(
-  (props: TLocalizedRichTextInputProps, ref) => {
+  (
+    {
+      horizontalConstraint = 'scale',
+      showExpandIcon = false,
+      ...props
+    }: TLocalizedRichTextInputProps,
+    ref
+  ) => {
     if (!props.isReadOnly) {
       warning(
         typeof props.onChange === 'function',
@@ -227,7 +226,7 @@ const LocalizedRichTextInput: ForwardRefExoticComponent<
       );
     }
 
-    if (props.showExpandIcon) {
+    if (showExpandIcon) {
       warning(
         typeof props.onClickExpand === 'function',
         'LocalizedRichTextInput: "onClickExpand" is required when showExpandIcon is true'
@@ -328,7 +327,7 @@ const LocalizedRichTextInput: ForwardRefExoticComponent<
       languages.length > 1 && !props.hideLanguageExpansionControls;
 
     return (
-      <Constraints.Horizontal max={props.horizontalConstraint}>
+      <Constraints.Horizontal max={horizontalConstraint}>
         <Stack scale="xs">
           <Stack>
             {languages.map((language, index) => {
@@ -369,7 +368,7 @@ const LocalizedRichTextInput: ForwardRefExoticComponent<
                   additionalInfo={
                     props.additionalInfo && props.additionalInfo[language]
                   }
-                  showExpandIcon={props.showExpandIcon}
+                  showExpandIcon={showExpandIcon}
                   onClickExpand={props.onClickExpand}
                   hasLanguagesControl={hasLanguagesControl}
                   defaultExpandMultilineText={Boolean(
@@ -417,8 +416,6 @@ LocalizedRichTextInput.getId = getId;
 
 LocalizedRichTextInput.getName = getName;
 
-LocalizedRichTextInput.defaultProps = defaultProps;
-
 LocalizedRichTextInput.createLocalizedString = localized.createLocalizedString;
 
 LocalizedRichTextInput.isEmpty = localized.isEmpty;
diff --git a/packages/components/inputs/localized-text-input/src/localized-text-input.tsx b/packages/components/inputs/localized-text-input/src/localized-text-input.tsx
index 9854ab90b9..d05c94c010 100644
--- a/packages/components/inputs/localized-text-input/src/localized-text-input.tsx
+++ b/packages/components/inputs/localized-text-input/src/localized-text-input.tsx
@@ -254,7 +254,10 @@ const RequiredValueErrorMessage = () => (
 
 RequiredValueErrorMessage.displayName = 'RequiredValueErrorMessage';
 
-const LocalizedTextInput = (props: TLocalizedTextInputProps) => {
+const LocalizedTextInput = ({
+  horizontalConstraint = 'scale',
+  ...props
+}: TLocalizedTextInputProps) => {
   const defaultExpansionState =
     props.hideLanguageExpansionControls ||
     props.defaultExpandLanguages || // default to `false`, because useToggleState defaults to `true`
@@ -310,7 +313,7 @@ const LocalizedTextInput = (props: TLocalizedTextInputProps) => {
   }
 
   return (
-    <Constraints.Horizontal max={props.horizontalConstraint}>
+    <Constraints.Horizontal max={horizontalConstraint}>
       <Stack scale="xs">
         <Stack>
           {languages.map((language, index) => {
@@ -346,7 +349,13 @@ const LocalizedTextInput = (props: TLocalizedTextInputProps) => {
                         (props.warnings && props.warnings[language])
                     )}
                     warning={props.warnings && props.warnings[language]}
-                    {...createLocalizedDataAttributes(props, language)}
+                    {...createLocalizedDataAttributes(
+                      {
+                        horizontalConstraint,
+                        ...props,
+                      },
+                      language
+                    )}
                     /* ARIA */
                     aria-invalid={props['aria-invalid']}
                     aria-errormessage={props['aria-errormessage']}
@@ -389,10 +398,6 @@ LocalizedTextInput.displayName = 'LocalizedTextInput';
 
 LocalizedTextInput.RequiredValueErrorMessage = RequiredValueErrorMessage;
 
-LocalizedTextInput.defaultProps = {
-  horizontalConstraint: 'scale',
-};
-
 LocalizedTextInput.getId = getId;
 
 LocalizedTextInput.getName = getName;
diff --git a/packages/components/inputs/money-input/src/money-input.tsx b/packages/components/inputs/money-input/src/money-input.tsx
index 021b706c03..a57cca5eba 100644
--- a/packages/components/inputs/money-input/src/money-input.tsx
+++ b/packages/components/inputs/money-input/src/money-input.tsx
@@ -25,7 +25,7 @@ import {
 import { FractionDigitsIcon } from '@commercetools-uikit/icons';
 import Constraints from '@commercetools-uikit/constraints';
 import { useFieldId, useToggleState } from '@commercetools-uikit/hooks';
-import currencies from './currencies';
+import allCurrencies from './currencies';
 import {
   getHighPrecisionWrapperStyles,
   getCurrencyLabelStyles,
@@ -177,7 +177,7 @@ const createCurrencySelectStyles: TCreateCurrencySelectStyles = ({
   };
 };
 
-export type TCurrencyCode = keyof typeof currencies;
+export type TCurrencyCode = keyof typeof allCurrencies;
 
 type TMoneyConditionalProps =
   | { type: 'highPrecision'; preciseAmount: number }
@@ -303,7 +303,7 @@ export const createMoneyValue = (
 ): TMoneyValue | null => {
   if (!currencyCode) return null;
 
-  const currency = currencies[currencyCode];
+  const currency = allCurrencies[currencyCode];
   if (!currency) return null;
 
   if (rawAmount.length === 0 || !isNumberish(rawAmount)) return null;
@@ -380,7 +380,7 @@ const getAmountAsNumberFromMoneyValue = (moneyValue: TMoneyValue) =>
   moneyValue.type === 'highPrecision'
     ? moneyValue.preciseAmount / 10 ** moneyValue.fractionDigits
     : moneyValue.centAmount /
-      10 ** currencies[moneyValue.currencyCode].fractionDigits;
+      10 ** allCurrencies[moneyValue.currencyCode].fractionDigits;
 
 // gets called with a string and should return a formatted string
 const formatAmount = (
@@ -397,7 +397,7 @@ const formatAmount = (
 
   const fractionDigits = moneyValue.preciseAmount
     ? moneyValue.fractionDigits
-    : currencies[moneyValue.currencyCode].fractionDigits;
+    : allCurrencies[moneyValue.currencyCode].fractionDigits;
 
   return isNaN(amount)
     ? ''
@@ -451,7 +451,7 @@ type TMoneyInputProps = {
   /**
    * List of possible currencies. When not provided or empty, the component renders a label with the value's currency instead of a dropdown.
    */
-  currencies: string[];
+  currencies?: string[];
   /**
    * Placeholder text for the input
    */
@@ -540,16 +540,12 @@ type TMoneyInputProps = {
   isCurrencyInputDisabled?: boolean;
 };
 
-const defaultProps: Pick<
-  TMoneyInputProps,
-  'currencies' | 'horizontalConstraint' | 'menuPortalZIndex'
-> = {
-  currencies: [],
-  horizontalConstraint: 'scale',
-  menuPortalZIndex: 1,
-};
-
-const MoneyInput = (props: TMoneyInputProps) => {
+const MoneyInput = ({
+  currencies = [],
+  horizontalConstraint = 'scale',
+  menuPortalZIndex = 1,
+  ...props
+}: TMoneyInputProps) => {
   const intl = useIntl();
   const [currencyHasFocus, toggleCurrencyHasFocus] = useToggleState(false);
   const [amountHasFocus, toggleAmountHasFocus] = useToggleState(false);
@@ -567,7 +563,7 @@ const MoneyInput = (props: TMoneyInputProps) => {
   }
 
   warnIfMenuPortalPropsAreMissing({
-    menuPortalZIndex: props.menuPortalZIndex,
+    menuPortalZIndex: menuPortalZIndex,
     menuPortalTarget: props.menuPortalTarget,
     componentName: 'MoneyInput',
   });
@@ -593,7 +589,7 @@ const MoneyInput = (props: TMoneyInputProps) => {
     if (
       amount.length > 0 &&
       props.value.currencyCode &&
-      currencies[props.value.currencyCode]
+      allCurrencies[props.value.currencyCode]
     ) {
       const formattedAmount = formatAmount(
         amount,
@@ -716,7 +712,7 @@ const MoneyInput = (props: TMoneyInputProps) => {
     toggleCurrencyHasFocus(false);
   }, [toggleCurrencyHasFocus]);
 
-  const hasNoCurrencies = props.currencies.length === 0;
+  const hasNoCurrencies = currencies.length === 0;
   const hasFocus = currencyHasFocus || amountHasFocus;
   const currencySelectStyles = createCurrencySelectStyles({
     hasWarning: props.hasWarning,
@@ -724,10 +720,10 @@ const MoneyInput = (props: TMoneyInputProps) => {
     isCondensed: props.isCondensed,
     isDisabled: props.isDisabled,
     isReadOnly: props.isReadOnly,
-    menuPortalZIndex: props.menuPortalZIndex,
+    menuPortalZIndex: menuPortalZIndex,
     currencyHasFocus,
   });
-  const options = props.currencies.map((currencyCode) => ({
+  const options = currencies.map((currencyCode) => ({
     label: currencyCode,
     value: currencyCode,
   }));
@@ -783,7 +779,7 @@ const MoneyInput = (props: TMoneyInputProps) => {
   );
 
   return (
-    <Constraints.Horizontal max={props.horizontalConstraint}>
+    <Constraints.Horizontal max={horizontalConstraint}>
       <div
         ref={containerRef}
         css={css`
@@ -874,7 +870,11 @@ const MoneyInput = (props: TMoneyInputProps) => {
             disabled={props.isDisabled}
             readOnly={props.isReadOnly}
             autoFocus={props.isAutofocussed}
-            {...filterDataAttributes(props)}
+            {...filterDataAttributes({
+              horizontalConstraint,
+              menuPortalZIndex,
+              ...props,
+            })}
             /* ARIA */
             aria-invalid={props['aria-invalid']}
             aria-errormessage={props['aria-errormessage']}
@@ -953,7 +953,7 @@ MoneyInput.parseMoneyValue = (
   );
 
   warning(
-    has(currencies, moneyValue.currencyCode),
+    has(allCurrencies, moneyValue.currencyCode),
     'MoneyInput.parseMoneyValue: Value must use known currency code'
   );
 
@@ -998,6 +998,4 @@ type TTouched = {
 MoneyInput.isTouched = (touched?: TTouched) =>
   Boolean(touched && touched.currencyCode && touched.amount);
 
-MoneyInput.defaultProps = defaultProps;
-
 export default MoneyInput;
diff --git a/packages/components/inputs/multiline-text-input/src/multiline-text-input.tsx b/packages/components/inputs/multiline-text-input/src/multiline-text-input.tsx
index f9ebaaf738..2c06778c50 100644
--- a/packages/components/inputs/multiline-text-input/src/multiline-text-input.tsx
+++ b/packages/components/inputs/multiline-text-input/src/multiline-text-input.tsx
@@ -132,19 +132,15 @@ export type TMultilineTextInputProps = {
   maxRows?: number;
 };
 
-const defaultProps: Pick<
-  TMultilineTextInputProps,
-  'defaultExpandMultilineText'
-> = {
-  defaultExpandMultilineText: false,
-};
-
-const MultilineTextInput = (props: TMultilineTextInputProps) => {
+const MultilineTextInput = ({
+  defaultExpandMultilineText = false,
+  ...props
+}: TMultilineTextInputProps) => {
   const intl = useIntl();
   const [shouldRenderToggleButton, setShouldRenderToggleButton] =
     useState(false);
 
-  const [isOpen, toggle] = useToggleState(props.defaultExpandMultilineText);
+  const [isOpen, toggle] = useToggleState(defaultExpandMultilineText);
 
   const { onFocus } = props;
   const handleFocus = useCallback<FocusEventHandler<HTMLTextAreaElement>>(
@@ -201,13 +197,21 @@ const MultilineTextInput = (props: TMultilineTextInputProps) => {
             `}
             isCondensed={props.isCondensed}
             maxRows={props.maxRows}
-            {...filterDataAttributes(props)}
+            {...filterDataAttributes({
+              defaultExpandMultilineText,
+              ...props,
+            })}
             /* ARIA */
             aria-invalid={props['aria-invalid']}
             aria-errormessage={props['aria-errormessage']}
           />
           {props.rightActionIcon && props.rightActionProps && (
-            <div css={getMultilineTextInputActionIconStyles(props)}>
+            <div
+              css={getMultilineTextInputActionIconStyles({
+                defaultExpandMultilineText,
+                ...props,
+              })}
+            >
               <SecondaryIconButton
                 color="info"
                 isDisabled={props.isDisabled || props.isReadOnly}
@@ -252,6 +256,5 @@ MultilineTextInput.displayName = 'MultilineTextInput';
 
 MultilineTextInput.isEmpty = (value: TMultilineTextInputProps['value']) =>
   !value || value.trim().length === 0;
-MultilineTextInput.defaultProps = defaultProps;
 
 export default MultilineTextInput;
diff --git a/packages/components/inputs/number-input/src/number-input.tsx b/packages/components/inputs/number-input/src/number-input.tsx
index cfd81027d5..6f800aa2e4 100644
--- a/packages/components/inputs/number-input/src/number-input.tsx
+++ b/packages/components/inputs/number-input/src/number-input.tsx
@@ -102,11 +102,10 @@ export type TNumberInputProps = {
     | 'auto';
 };
 
-const defaultProps: Pick<TNumberInputProps, 'horizontalConstraint'> = {
-  horizontalConstraint: 'scale',
-};
-
-const NumberInput = (props: TNumberInputProps) => {
+const NumberInput = ({
+  horizontalConstraint = 'scale',
+  ...props
+}: TNumberInputProps) => {
   if (!props.isReadOnly) {
     warning(
       Boolean(props.onChange),
@@ -114,7 +113,7 @@ const NumberInput = (props: TNumberInputProps) => {
     );
   }
   return (
-    <Constraints.Horizontal max={props.horizontalConstraint}>
+    <Constraints.Horizontal max={horizontalConstraint}>
       <input
         id={props.id}
         name={props.name}
@@ -132,7 +131,10 @@ const NumberInput = (props: TNumberInputProps) => {
         css={getInputStyles(props)}
         readOnly={props.isReadOnly}
         autoFocus={props.isAutofocussed}
-        {...filterDataAttributes(props)}
+        {...filterDataAttributes({
+          horizontalConstraint,
+          ...props,
+        })}
         /* ARIA */
         aria-readonly={props.isReadOnly}
         contentEditable={!props.isReadOnly}
@@ -145,7 +147,6 @@ const NumberInput = (props: TNumberInputProps) => {
 };
 
 NumberInput.displayName = 'NumberInput';
-NumberInput.defaultProps = defaultProps;
 
 NumberInput.toFormValue = (numberOrString: number | string) => {
   if (
diff --git a/packages/components/inputs/password-input/src/password-input.tsx b/packages/components/inputs/password-input/src/password-input.tsx
index 23a8afa17e..3382022384 100644
--- a/packages/components/inputs/password-input/src/password-input.tsx
+++ b/packages/components/inputs/password-input/src/password-input.tsx
@@ -91,43 +91,43 @@ export type TPasswordInputProps = {
   autoComplete?: 'on' | 'off' | 'current-password' | 'new-password';
 };
 
-const defaultProps: Pick<
-  TPasswordInputProps,
-  'horizontalConstraint' | 'isDisabled' | 'isReadOnly' | 'isPasswordVisible'
-> = {
-  horizontalConstraint: 'scale',
-  isDisabled: false,
-  isReadOnly: false,
-  isPasswordVisible: false,
-};
-
-const PasswordInput = (props: TPasswordInputProps) => {
-  if (!props.isReadOnly) {
+const PasswordInput = ({
+  horizontalConstraint = 'scale',
+  isDisabled = false,
+  isReadOnly = false,
+  isPasswordVisible = false,
+  ...props
+}: TPasswordInputProps) => {
+  if (!isReadOnly) {
     warning(
       Boolean(props.onChange),
       'PasswordInput: `onChange` is required when is not read only.'
     );
   }
   return (
-    <Constraints.Horizontal max={props.horizontalConstraint}>
+    <Constraints.Horizontal max={horizontalConstraint}>
       <input
         id={props.id}
         name={props.name}
-        type={props.isPasswordVisible ? 'text' : 'password'}
+        type={isPasswordVisible ? 'text' : 'password'}
         value={props.value}
         onChange={props.onChange}
         onBlur={props.onBlur}
         onFocus={props.onFocus}
-        disabled={props.isDisabled}
+        disabled={isDisabled}
         placeholder={props.placeholder}
         autoComplete={props.autoComplete}
-        css={getInputStyles(props)}
-        readOnly={props.isReadOnly}
+        css={getInputStyles({
+          isDisabled,
+          isReadOnly,
+          ...props,
+        })}
+        readOnly={isReadOnly}
         autoFocus={props.isAutofocussed}
         {...filterDataAttributes(props)}
         /* ARIA */
-        aria-readonly={props.isReadOnly}
-        contentEditable={!props.isReadOnly}
+        aria-readonly={isReadOnly}
+        contentEditable={!isReadOnly}
         aria-invalid={props['aria-invalid']}
         aria-errormessage={props['aria-errormessage']}
       />
@@ -136,7 +136,6 @@ const PasswordInput = (props: TPasswordInputProps) => {
 };
 
 PasswordInput.displayName = 'PasswordInput';
-PasswordInput.defaultProps = defaultProps;
 PasswordInput.isEmpty = (value: TPasswordInputProps['value']) =>
   !value || value.trim().length === 0;
 
diff --git a/packages/components/inputs/radio-input/src/radio-group.tsx b/packages/components/inputs/radio-input/src/radio-group.tsx
index 75ddcd9d68..5594f77c3b 100644
--- a/packages/components/inputs/radio-input/src/radio-group.tsx
+++ b/packages/components/inputs/radio-input/src/radio-group.tsx
@@ -27,7 +27,7 @@ export type TGroupProps = {
   isReadOnly?: boolean;
   hasError?: boolean;
   hasWarning?: boolean;
-  horizontalConstraint:
+  horizontalConstraint?:
     | 7
     | 8
     | 9
@@ -42,9 +42,9 @@ export type TGroupProps = {
     | 'auto';
   /** Pick the desired layout. Possible values are `stack` or `inline`, (= Radio.Option items will be
    * wrapped with the `Spacing.Stack` or `Spacing.Inline` component)*/
-  direction: 'stack' | 'inline';
+  direction?: 'stack' | 'inline';
   /** Props uesed to configue the selected layout component that was picked via the `direction` property */
-  directionProps: {
+  directionProps?: {
     scale?: TInlineProps['scale'];
     alignItems?: TInlineProps['alignItems'];
     justifyContent?: TInlineProps['justifyContent'];
@@ -60,22 +60,18 @@ export type TGroupProps = {
   'aria-errormessage'?: string;
 };
 
-const defaultProps: Pick<
-  TGroupProps,
-  'horizontalConstraint' | 'direction' | 'directionProps'
-> = {
-  horizontalConstraint: 'scale',
-  direction: 'stack',
-  directionProps: {
-    scale: 'm',
-  },
-};
-
 type TReactChild = {
   type?: { displayName: string };
 } & ReactElement;
 
-const Group = (props: TGroupProps) => {
+const Group = ({
+  horizontalConstraint = 'scale',
+  direction = 'stack',
+  directionProps = {
+    scale: 'm',
+  },
+  ...props
+}: TGroupProps) => {
   useEffect(() => {
     // NOTE: We allow mixed children rendered as (e.g. spacers)
     // as a result we need to filter out children of the correct type.
@@ -109,19 +105,26 @@ const Group = (props: TGroupProps) => {
         onFocus: props.onFocus,
         onBlur: props.onBlur,
       });
-      const { wrapper } = child.props.components;
+      const { wrapper } = child.props.components || {};
       return wrapper ? wrapper(clonedChild) : clonedChild;
     }
     return child;
   });
-  if (props.direction === 'inline') {
+  if (direction === 'inline') {
     return (
       <div
         aria-labelledby={props.id}
         aria-invalid={props['aria-invalid']}
         aria-errormessage={props['aria-errormessage']}
       >
-        <Inline {...props.directionProps} {...filterDataAttributes(props)}>
+        <Inline
+          {...directionProps}
+          {...filterDataAttributes({
+            horizontalConstraint,
+            direction,
+            ...props,
+          })}
+        >
           {optionElements}
         </Inline>
       </div>
@@ -133,8 +136,15 @@ const Group = (props: TGroupProps) => {
       aria-invalid={props['aria-invalid']}
       aria-errormessage={props['aria-errormessage']}
     >
-      <Constraints.Horizontal max={props.horizontalConstraint}>
-        <Stack {...props.directionProps} {...filterDataAttributes(props)}>
+      <Constraints.Horizontal max={horizontalConstraint}>
+        <Stack
+          {...directionProps}
+          {...filterDataAttributes({
+            horizontalConstraint,
+            direction,
+            ...props,
+          })}
+        >
           {optionElements}
         </Stack>
       </Constraints.Horizontal>
@@ -143,6 +153,5 @@ const Group = (props: TGroupProps) => {
 };
 
 Group.displayName = 'RadioGroup';
-Group.defaultProps = defaultProps;
 
 export default Group;
diff --git a/packages/components/inputs/radio-input/src/radio-option.tsx b/packages/components/inputs/radio-input/src/radio-option.tsx
index dc08b112b2..ee9f78be2d 100644
--- a/packages/components/inputs/radio-input/src/radio-option.tsx
+++ b/packages/components/inputs/radio-input/src/radio-option.tsx
@@ -62,7 +62,7 @@ export type TStylesProps = Pick<
   | 'isChecked'
 >;
 
-const Option = (props: TOptionProps) => {
+const Option = ({ components = {}, ...props }: TOptionProps) => {
   const labelProps = props.id ? { htmlFor: props.id } : {};
 
   if (!props.isReadOnly) {
@@ -72,17 +72,17 @@ const Option = (props: TOptionProps) => {
     );
   }
 
-  if (props.components?.wrapper) {
+  if (components.wrapper) {
     warning(
-      typeof props.components?.wrapper === 'function',
+      typeof components.wrapper === 'function',
       `Invalid prop 'components.wrapper' supplied to 'RadioInput.Option': the prop is not a function`
     );
     warning(
-      props.components?.wrapper.length === 1,
+      components.wrapper.length === 1,
       `Invalid prop 'components.wrapper' supplied to 'RadioInput.Option': the supplied function should expect one argument`
     );
     warning(
-      isValidElement(props.components?.wrapper(<></>)),
+      isValidElement(components.wrapper(<></>)),
       `Invalid prop 'components.wrapper' supplied to 'RadioInput.Option': the function supplied should return a valid react element`
     );
   }
@@ -141,8 +141,4 @@ const Option = (props: TOptionProps) => {
 };
 Option.displayName = 'RadioOption';
 
-Option.defaultProps = {
-  components: {},
-};
-
 export default Option;
diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/dropdown.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/dropdown.tsx
index 25094a86f6..19eda898d2 100644
--- a/packages/components/inputs/rich-text-utils/src/rich-text-body/dropdown.tsx
+++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/dropdown.tsx
@@ -18,11 +18,11 @@ export type TDropdownLabel = {
 
 export type TDropdownProps = {
   label: string;
-  isMulti: boolean;
+  isMulti?: boolean;
   isDisabled?: boolean;
   isReadOnly?: boolean;
   onChange?: ({ value }: TItem) => void;
-  components: {
+  components?: {
     Item: FunctionComponent<unknown>;
     Label: FunctionComponent<TDropdownLabel>;
   };
@@ -39,17 +39,24 @@ type THeadings = {
   label?: string;
 };
 
-const Label = styled.div;
+const Label = styled.div<TDropdownLabel>``;
 
-const Dropdown = (props: TDropdownProps) => {
+const Dropdown = ({
+  components = {
+    Item: StyledDropdownItem,
+    Label,
+  },
+  isMulti = false,
+  ...props
+}: TDropdownProps) => {
   const DropdownItem: FunctionComponent<{
     value: string;
     isSelected: boolean;
-  }> = props.components.Item;
-  const DropdownLabel = props.components.Label;
+  }> = components.Item;
+  const DropdownLabel = components.Label;
 
   const isIndeterminate =
-    props.isMulti &&
+    isMulti &&
     props.options.some((item) => props.getIsItemSelected(item) === true);
 
   const Downshift = DownshiftUntyped as ElementType;
@@ -80,7 +87,7 @@ const Dropdown = (props: TDropdownProps) => {
                 css={getButtonStyles({
                   isOpen,
                   isIndeterminate,
-                  isStyleButton: !props.isMulti,
+                  isStyleButton: !isMulti,
                   isDisabled: props.isDisabled,
                   isReadOnly: props.isReadOnly,
                 })}
@@ -127,12 +134,4 @@ const Dropdown = (props: TDropdownProps) => {
 
 Dropdown.displayName = 'Dropdown';
 
-Dropdown.defaultProps = {
-  components: {
-    Item: StyledDropdownItem,
-    Label,
-  },
-  isMulti: false,
-};
-
 export default Dropdown;
diff --git a/packages/components/inputs/rich-text-utils/src/rich-text-body/rich-text-body.tsx b/packages/components/inputs/rich-text-utils/src/rich-text-body/rich-text-body.tsx
index dea35f1c85..99350f86c6 100644
--- a/packages/components/inputs/rich-text-utils/src/rich-text-body/rich-text-body.tsx
+++ b/packages/components/inputs/rich-text-utils/src/rich-text-body/rich-text-body.tsx
@@ -216,7 +216,7 @@ const createMoreStylesDropdownOptions = (intl: TStyleDropdownOptions) => {
 const RichTextEditorBody = forwardRef<
   TRichtTextEditorBodyRef,
   TRichTextEditorBody
->((props, ref) => {
+>(({ styles = {}, ...props }, ref) => {
   // NOTE: the forwarded ref is an object of refs, thus making it a bit trickier to type.
   const { registerContentNode, containerRef } =
     ref as unknown as TRichtTextEditorBodyRef;
@@ -267,7 +267,7 @@ const RichTextEditorBody = forwardRef<
 
   return (
     <Container
-      css={props.styles?.container}
+      css={styles?.container}
       hasError={props.hasError}
       hasWarning={props.hasWarning}
       isReadOnly={props.isReadOnly}
@@ -458,12 +458,6 @@ const RichTextEditorBody = forwardRef<
   );
 });
 
-const defaultProps: Pick<TRichTextEditorBody, 'styles'> = {
-  styles: {},
-};
-
 RichTextEditorBody.displayName = 'RichTextEditorBody';
 
-RichTextEditorBody.defaultProps = defaultProps;
-
 export default RichTextEditorBody;
diff --git a/packages/components/inputs/search-select-input/src/search-select-input.tsx b/packages/components/inputs/search-select-input/src/search-select-input.tsx
index bf2a46075c..952cccccab 100644
--- a/packages/components/inputs/search-select-input/src/search-select-input.tsx
+++ b/packages/components/inputs/search-select-input/src/search-select-input.tsx
@@ -193,7 +193,7 @@ export type TSearchSelectInputProps = {
    * <br>
    * Use in conjunction with `menuPortalTarget`
    */
-  menuPortalZIndex: number;
+  menuPortalZIndex?: number;
   /**
    * whether the menu should block scroll while open
    * <br>
@@ -275,7 +275,7 @@ export type TSearchSelectInputProps = {
    */
   iconLeft?: ReactNode;
   /** defines how options are rendered */
-  optionStyle: 'list' | 'checkbox';
+  optionStyle?: 'list' | 'checkbox';
   /**
    * Indicates the appearance of the input.
    * Filter appearance is meant to be used when the async-select is used as a filter.
@@ -297,24 +297,15 @@ type TOptionInnerProps = {
   data?: TOptionInnerPropsData;
 } & OptionProps;
 
-const defaultProps: Pick<
-  TSearchSelectInputProps,
-  | 'value'
-  | 'menuPortalZIndex'
-  | 'maxMenuHeight'
-  | 'controlShouldRenderValue'
-  | 'appearance'
-  | 'optionStyle'
-> = {
-  value: null,
-  menuPortalZIndex: 1,
-  maxMenuHeight: 220,
-  controlShouldRenderValue: true,
-  appearance: 'default',
-  optionStyle: 'list',
-};
-
-const SearchSelectInput = (props: TSearchSelectInputProps) => {
+const SearchSelectInput = ({
+  value = null,
+  menuPortalZIndex = 1,
+  maxMenuHeight = 220,
+  controlShouldRenderValue = true,
+  appearance = 'default',
+  optionStyle = 'list',
+  ...props
+}: TSearchSelectInputProps) => {
   const intl = useIntl();
 
   if (!props.isReadOnly) {
@@ -325,7 +316,7 @@ const SearchSelectInput = (props: TSearchSelectInputProps) => {
   }
 
   warnIfMenuPortalPropsAreMissing({
-    menuPortalZIndex: props.menuPortalZIndex,
+    menuPortalZIndex: menuPortalZIndex,
     menuPortalTarget: props.menuPortalTarget,
     componentName: 'SearchSelectInput',
   });
@@ -338,7 +329,7 @@ const SearchSelectInput = (props: TSearchSelectInputProps) => {
     props.loadingMessage || intl.formatMessage(messages.loadingOptionsMessage);
 
   const placeholder =
-    props.appearance === 'filter' && !props.placeholder
+    appearance === 'filter' && !props.placeholder
       ? intl.formatMessage(messages.searchSelectInputAsFilterPlaceholder)
       : props.placeholder || intl.formatMessage(messages.placeholderMessage);
 
@@ -353,23 +344,28 @@ const SearchSelectInput = (props: TSearchSelectInputProps) => {
           optionInnerProps={optionInnerProps}
         />
       ),
-      ...(props.optionStyle === 'checkbox'
-        ? optionStyleCheckboxComponents(props.appearance)
+      ...(optionStyle === 'checkbox'
+        ? optionStyleCheckboxComponents(appearance)
         : {}),
       ...props.components,
       DropdownIndicator: SearchIconDropdownIndicator,
     }),
-    [props.optionStyle, props.appearance, props.components, optionType]
+    [optionStyle, appearance, props.components, optionType]
   );
 
   return (
     <SearchSelectInputWrapper
       isDisabled={props.isDisabled}
       isReadOnly={props.isReadOnly}
-      isCondensed={props.appearance === 'filter' ? true : props.isCondensed}
+      isCondensed={appearance === 'filter' ? true : props.isCondensed}
     >
       <AsyncSelectInput
         {...props}
+        value={value}
+        menuPortalZIndex={menuPortalZIndex}
+        maxMenuHeight={maxMenuHeight}
+        appearance={appearance}
+        optionStyle={optionStyle}
         components={components as ReactSelectAsyncProps['components']}
         placeholder={placeholder}
         iconLeft={props.iconLeft}
@@ -378,18 +374,17 @@ const SearchSelectInput = (props: TSearchSelectInputProps) => {
         isSearchable={true}
         // @ts-expect-error
         closeMenuOnSelect={props.closeMenuOnSelect}
-        {...(props.optionStyle === 'checkbox'
+        {...(optionStyle === 'checkbox'
           ? optionsStyleCheckboxSelectProps()
           : {})}
         controlShouldRenderValue={
-          props.appearance === 'filter' ? false : props.controlShouldRenderValue
+          appearance === 'filter' ? false : controlShouldRenderValue
         }
       />
     </SearchSelectInputWrapper>
   );
 };
 
-SearchSelectInput.defaultProps = defaultProps;
 SearchSelectInput.displayName = 'SearchSelectInput';
 
 export default SearchSelectInput;
diff --git a/packages/components/inputs/search-text-input/src/search-text-input.tsx b/packages/components/inputs/search-text-input/src/search-text-input.tsx
index f3e3a5b8b4..867e3c7373 100644
--- a/packages/components/inputs/search-text-input/src/search-text-input.tsx
+++ b/packages/components/inputs/search-text-input/src/search-text-input.tsx
@@ -125,19 +125,18 @@ type StaticProps = {
   isEmpty: typeof isEmpty;
 };
 
-const defaultProps: Pick<
-  TSearchTextInputProps,
-  'horizontalConstraint' | 'isClearable'
-> = {
-  horizontalConstraint: 'scale',
-  isClearable: true,
-};
-
 const SearchTextInput: ForwardRefExoticComponent<
   TSearchTextInputProps & RefAttributes<HTMLInputElement>
 > &
   Partial<StaticProps> = forwardRef(
-  (props: TSearchTextInputProps, forwardedRef) => {
+  (
+    {
+      horizontalConstraint = 'scale',
+      isClearable = true,
+      ...props
+    }: TSearchTextInputProps,
+    forwardedRef
+  ) => {
     if (!props.isReadOnly) {
       warning(
         typeof props.onChange === 'function',
@@ -174,7 +173,7 @@ const SearchTextInput: ForwardRefExoticComponent<
     };
 
     return (
-      <Constraints.Horizontal max={props.horizontalConstraint}>
+      <Constraints.Horizontal max={horizontalConstraint}>
         <div css={getSearchTextInputContainerStyles(props)}>
           <input
             id={props.id}
@@ -202,7 +201,7 @@ const SearchTextInput: ForwardRefExoticComponent<
               }
             }}
           />
-          {props.isClearable &&
+          {isClearable &&
             searchValue &&
             !props.isDisabled &&
             !props.isReadOnly && (
@@ -229,7 +228,6 @@ const SearchTextInput: ForwardRefExoticComponent<
 );
 
 SearchTextInput.displayName = 'SearchTextInput';
-SearchTextInput.defaultProps = defaultProps;
 
 const isEmpty = (value: TSearchTextInputProps['value']) =>
   !value || value.trim().length === 0;
diff --git a/packages/components/inputs/select-input/src/select-input.tsx b/packages/components/inputs/select-input/src/select-input.tsx
index 19b82cd62e..50744b0a5c 100644
--- a/packages/components/inputs/select-input/src/select-input.tsx
+++ b/packages/components/inputs/select-input/src/select-input.tsx
@@ -312,9 +312,9 @@ export type TSelectInputProps = {
   /**
    * Array of options that populate the select menu
    */
-  options: TOptions;
+  options?: TOptions;
   /** defines how options are rendered */
-  optionStyle: 'list' | 'checkbox';
+  optionStyle?: 'list' | 'checkbox';
   showOptionGroupDivider?: boolean;
   // pageSize: PropTypes.number,
   /**
@@ -392,36 +392,28 @@ export type TSelectInputProps = {
   count?: number;
 };
 
-const defaultProps: Pick<
-  TSelectInputProps,
-  | 'appearance'
-  | 'maxMenuHeight'
-  | 'menuPortalZIndex'
-  | 'options'
-  | 'optionStyle'
-> = {
-  appearance: 'default',
-  maxMenuHeight: 220,
-  menuPortalZIndex: 1,
-  options: [],
-  optionStyle: 'list',
-};
-
 const isOptionObject = (
   option: TOption | TOptionObject
 ): option is TOptionObject => (option as TOptionObject).options !== undefined;
 
-const SelectInput = (props: TSelectInputProps) => {
+const SelectInput = ({
+  appearance = 'default',
+  maxMenuHeight = 220,
+  menuPortalZIndex = 1,
+  options = [],
+  optionStyle = 'list',
+  ...props
+}: TSelectInputProps) => {
   const intl = useIntl();
 
   warnIfMenuPortalPropsAreMissing({
-    menuPortalZIndex: props.menuPortalZIndex,
+    menuPortalZIndex: menuPortalZIndex,
     menuPortalTarget: props.menuPortalTarget,
     componentName: 'SelectInput',
   });
 
   const placeholder =
-    props.appearance === 'filter' && !props.placeholder
+    appearance === 'filter' && !props.placeholder
       ? intl.formatMessage(messages.selectInputAsFilterPlaceholder)
       : props.placeholder || intl.formatMessage(messages.placeholder);
   // Options can be grouped as
@@ -432,7 +424,7 @@ const SelectInput = (props: TSelectInputProps) => {
   //     { label: 'Flavours', options: flavourOptions },
   //   ];
   // So we "ungroup" the options by merging them all into one list first.
-  const optionsWithoutGroups = props.options.flatMap((option) => {
+  const optionsWithoutGroups = options.flatMap((option) => {
     if (isOptionObject(option)) {
       return option.options;
     }
@@ -456,7 +448,15 @@ const SelectInput = (props: TSelectInputProps) => {
 
   return (
     <Constraints.Horizontal max={props.horizontalConstraint}>
-      <div {...filterDataAttributes(props)}>
+      <div
+        {...filterDataAttributes({
+          appearance,
+          maxMenuHeight,
+          menuPortalZIndex,
+          optionStyle,
+          ...props,
+        })}
+      >
         <Select
           aria-label={props['aria-label']}
           aria-labelledby={props['aria-labelledby']}
@@ -480,12 +480,12 @@ const SelectInput = (props: TSelectInputProps) => {
                     ),
                   }
                 : {}),
-              ...(props.appearance === 'filter' && {
+              ...(appearance === 'filter' && {
                 DropdownIndicator: () => <SearchIcon color="neutral60" />,
                 ClearIndicator: null,
               }),
-              ...(props.optionStyle === 'checkbox'
-                ? optionStyleCheckboxComponents(props.appearance)
+              ...(optionStyle === 'checkbox'
+                ? optionStyleCheckboxComponents(appearance)
                 : {}),
               ...props.components,
             } as ReactSelectProps['components']
@@ -493,7 +493,7 @@ const SelectInput = (props: TSelectInputProps) => {
           menuIsOpen={
             props.isReadOnly
               ? false
-              : props.appearance === 'filter'
+              : appearance === 'filter'
               ? true
               : props.menuIsOpen
           }
@@ -502,12 +502,11 @@ const SelectInput = (props: TSelectInputProps) => {
               hasWarning: props.hasWarning,
               hasError: props.hasError,
               showOptionGroupDivider: props.showOptionGroupDivider,
-              menuPortalZIndex: props.menuPortalZIndex,
-              appearance: props.appearance,
+              menuPortalZIndex: menuPortalZIndex,
+              appearance: appearance,
               isDisabled: props.isDisabled,
               isReadOnly: props.isReadOnly,
-              isCondensed:
-                props.appearance === 'filter' ? true : props.isCondensed,
+              isCondensed: appearance === 'filter' ? true : props.isCondensed,
               iconLeft: props.iconLeft,
               isMulti: props.isMulti,
               hasValue: !isEmpty(selectedOptions),
@@ -528,7 +527,7 @@ const SelectInput = (props: TSelectInputProps) => {
           isClearable={props.isReadOnly ? false : props.isClearable}
           isDisabled={props.isDisabled}
           isOptionDisabled={props.isOptionDisabled}
-          {...(props.optionStyle === 'checkbox'
+          {...(optionStyle === 'checkbox'
             ? optionsStyleCheckboxSelectProps()
             : { hideSelectedOptions: props.hideSelectedOptions })}
           // @ts-ignore
@@ -536,7 +535,7 @@ const SelectInput = (props: TSelectInputProps) => {
           isMulti={props.isMulti}
           isSearchable={props.isSearchable}
           isCondensed={props.isCondensed}
-          maxMenuHeight={props.maxMenuHeight}
+          maxMenuHeight={maxMenuHeight}
           menuPortalTarget={props.menuPortalTarget}
           menuShouldBlockScroll={props.menuShouldBlockScroll}
           // @ts-expect-error: optionStyle 'checkbox' will override this property (if set)
@@ -601,19 +600,17 @@ const SelectInput = (props: TSelectInputProps) => {
           }}
           onFocus={props.onFocus}
           onInputChange={props.onInputChange}
-          options={props.options}
+          options={options}
           placeholder={placeholder}
           tabIndex={props.tabIndex}
           tabSelectsValue={props.tabSelectsValue}
           value={selectedOptions}
           iconLeft={props.iconLeft}
           controlShouldRenderValue={
-            props.appearance === 'filter'
-              ? false
-              : props.controlShouldRenderValue
+            appearance === 'filter' ? false : props.controlShouldRenderValue
           }
           menuPlacement="auto"
-          {...(props.optionStyle === 'checkbox'
+          {...(optionStyle === 'checkbox'
             ? optionsStyleCheckboxSelectProps()
             : {})}
         />
@@ -623,7 +620,6 @@ const SelectInput = (props: TSelectInputProps) => {
 };
 
 SelectInput.displayName = 'SelectInput';
-SelectInput.defaultProps = defaultProps;
 
 /**
  * Expose static helper methods.
diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx b/packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx
index 913fe1d353..411c9fb07e 100644
--- a/packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx
+++ b/packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx
@@ -2,17 +2,43 @@ import { useState } from 'react';
 import SelectableSearchInput, {
   type TSelectableSearchInputProps,
   type TCustomEvent,
+  TValue,
+  TOptions,
 } from './selectable-search-input';
 import { screen, render, fireEvent } from '../../../../../test/test-utils';
 import { components, OptionProps } from 'react-select';
 
+type TTestComponentProps = Omit<
+  TSelectableSearchInputProps,
+  'value' | 'options' | 'onSubmit'
+> & {
+  value?: TValue;
+  options?: TOptions;
+  onSubmit?: (value: TValue) => void;
+};
+
 // We use this component to simulate the whole flow of
 // changing a value and submitting.
-const TestComponent = (props: TSelectableSearchInputProps) => {
-  const [dropdownValue, setDropdownValue] = useState(props.value.option);
-  const [textInputValue, setTextInputValue] = useState(props.value.text);
-
-  const value = {
+const TestComponent = ({
+  id = 'test-id',
+  name = 'test-name',
+  value = {
+    text: 'test-value',
+    option: 'foo',
+  },
+  options = [
+    { value: 'foo', label: 'Foo' },
+    { value: 'bar', label: 'Bar' },
+    { value: 'baz', label: 'Baz' },
+  ],
+  onChange = () => {},
+  onSubmit = () => {},
+  ...props
+}: TTestComponentProps) => {
+  const [dropdownValue, setDropdownValue] = useState(value.option);
+  const [textInputValue, setTextInputValue] = useState(value.text);
+
+  const _value = {
     text: textInputValue,
     option: dropdownValue,
   };
@@ -24,35 +50,27 @@ const TestComponent = (props: TSelectableSearchInputProps) => {
     if (event.target.name && event.target.name.endsWith('.dropdown')) {
       setDropdownValue(event.target.value as string);
     }
-    props.onChange && props.onChange(event);
+    onChange && onChange(event);
   };
 
   return (
     <div>
-      <label htmlFor={SelectableSearchInput.getTextInputId(props.id)}>
+      <label htmlFor={SelectableSearchInput.getTextInputId(id)}>
         test-label
       </label>
-      <SelectableSearchInput {...props} value={value} onChange={handleChange} />
+      <SelectableSearchInput
+        {...props}
+        id={id}
+        name={name}
+        options={options}
+        value={_value}
+        onSubmit={onSubmit}
+        onChange={handleChange}
+      />
     </div>
   );
 };
 
-TestComponent.defaultProps = {
-  id: 'test-id',
-  name: 'test-name',
-  value: {
-    text: 'test-value',
-    option: 'foo',
-  },
-  options: [
-    { value: 'foo', label: 'Foo' },
-    { value: 'bar', label: 'Bar' },
-    { value: 'baz', label: 'Baz' },
-  ],
-  onChange: () => {},
-  onSubmit: () => {},
-};
-
 describe('SelectableSearchInput.getTextInputId', () => {
   describe('when an id is passed', () => {
     it('should return the created it', () => {
diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx b/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx
index dfa6105f93..71caf24de9 100644
--- a/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx
+++ b/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx
@@ -243,23 +243,6 @@ export type TSelectableSearchInputProps = {
   rightActionProps?: TIconButtonProps;
 };
 
-const defaultProps: Pick<
-  TSelectableSearchInputProps,
-  | 'horizontalConstraint'
-  | 'isClearable'
-  | 'menuHorizontalConstraint'
-  | 'showSubmitButton'
-  | 'menuPortalZIndex'
-  | 'options'
-> = {
-  horizontalConstraint: 'scale',
-  isClearable: true,
-  menuHorizontalConstraint: 3,
-  showSubmitButton: true,
-  menuPortalZIndex: 1,
-  options: [],
-};
-
 const selectableSearchInputSequentialId = createSequentialId(
   'selectable-search-input-'
 );
@@ -276,13 +259,28 @@ const transformDataProps = (dataProps?: Record<string, string>) =>
     ])
   );
 
-const SelectableSearchInput = (props: TSelectableSearchInputProps) => {
+const SelectableSearchInput = ({
+  horizontalConstraint = 'scale',
+  isClearable = true,
+  menuHorizontalConstraint = 3,
+  showSubmitButton = true,
+  menuPortalZIndex = 1,
+  ...props
+}: TSelectableSearchInputProps) => {
   const [dropdownHasFocus, toggleDropdownHasFocus] = useToggleState(false);
   const [searchValue, setSearchValue] = useState(props.value.text || '');
   const [searchOption, setSearchOption] = useState(props.value.option || '');
   const containerRef = useRef<HTMLDivElement>(null);
   const textInputRef = useRef<HTMLInputElement>(null);
 
+  const allProps = {
+    horizontalConstraint,
+    isClearable,
+    menuHorizontalConstraint,
+    showSubmitButton,
+    menuPortalZIndex,
+    ...props,
+  };
   const legacyDataProps = filterDataAttributes(props);
   const transformedSelectDataProps = transformDataProps(props.selectDataProps);
   const transformedInputDataProps = transformDataProps(props.inputDataProps);
@@ -319,7 +317,7 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => {
   }
 
   warnIfMenuPortalPropsAreMissing({
-    menuPortalZIndex: props.menuPortalZIndex,
+    menuPortalZIndex: menuPortalZIndex,
     menuPortalTarget: props.menuPortalTarget,
     componentName: 'SelectableSearchInput',
   });
@@ -454,15 +452,15 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => {
   );
 
   return (
-    <Constraints.Horizontal max={props.horizontalConstraint}>
+    <Constraints.Horizontal max={horizontalConstraint}>
       <Container
         ref={containerRef}
         onBlur={handleContainerBlur}
         data-testid="selectable-search-input-container"
       >
-        <Constraints.Horizontal max={props.menuHorizontalConstraint}>
+        <Constraints.Horizontal max={menuHorizontalConstraint}>
           <SelectableSelect
-            {...props}
+            {...allProps}
             id={SelectableSearchInput.getDropdownId(selectablSearchInputId)}
             name={getDropdownName(props.name)}
             dropdownHasFocus={dropdownHasFocus}
@@ -478,7 +476,7 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => {
         </Constraints.Horizontal>
         <div
           css={[
-            getSelectableSearchInputContainerStyles(props),
+            getSelectableSearchInputContainerStyles(allProps),
             dropdownHasFocus &&
               !props.isReadOnly &&
               css`
@@ -505,7 +503,7 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => {
             autoComplete={props.autoComplete}
             aria-readonly={props.isReadOnly}
             contentEditable={!props.isReadOnly}
-            css={getSelectableSearchInputStyles(props)}
+            css={getSelectableSearchInputStyles(allProps)}
             {...transformedInputDataProps}
             {...legacyDataProps}
             /* ARIA */
@@ -518,7 +516,7 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => {
               }
             }}
           />
-          {props.isClearable &&
+          {isClearable &&
             searchInputValue &&
             !props.isDisabled &&
             !props.isReadOnly && (
@@ -527,16 +525,16 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => {
                 size={props.isCondensed ? '10' : '20'}
                 label={'clear-button'}
                 onClick={handleClear}
-                css={getClearIconButtonStyles(props)}
+                css={getClearIconButtonStyles(allProps)}
               />
             )}
-          {props.showSubmitButton && (
+          {showSubmitButton && (
             <SecondaryIconButton
               icon={<SearchIcon />}
               size={props.isCondensed ? '20' : '40'}
               label={'search-button'}
               onClick={handleSubmit}
-              css={getSearchIconButtonStyles(props)}
+              css={getSearchIconButtonStyles(allProps)}
               isDisabled={props.isDisabled}
             />
           )}
@@ -564,7 +562,6 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => {
 };
 
 SelectableSearchInput.displayName = 'SelectableSearchInput';
-SelectableSearchInput.defaultProps = defaultProps;
 SelectableSearchInput.isEmpty = (
   formValue: TSelectableSearchInputProps['value']
 ) => !formValue || formValue.text.trim() === '';
diff --git a/packages/components/inputs/text-input/src/text-input.tsx b/packages/components/inputs/text-input/src/text-input.tsx
index b8b2dd3c67..3ac831cee4 100644
--- a/packages/components/inputs/text-input/src/text-input.tsx
+++ b/packages/components/inputs/text-input/src/text-input.tsx
@@ -95,11 +95,10 @@ export type TTextInputProps = {
   maxLength?: number;
 };
 
-const defaultProps: Pick<TTextInputProps, 'horizontalConstraint'> = {
-  horizontalConstraint: 'scale',
-};
-
-const TextInput = (props: TTextInputProps) => {
+const TextInput = ({
+  horizontalConstraint = 'scale',
+  ...props
+}: TTextInputProps) => {
   if (!props.isReadOnly) {
     warning(
       typeof props.onChange === 'function',
@@ -107,7 +106,7 @@ const TextInput = (props: TTextInputProps) => {
     );
   }
   return (
-    <Constraints.Horizontal max={props.horizontalConstraint}>
+    <Constraints.Horizontal max={horizontalConstraint}>
       <input
         id={props.id}
         name={props.name}
@@ -127,7 +126,10 @@ const TextInput = (props: TTextInputProps) => {
         // Custom styles can also be passed using the `css` prop from emotion.
         // https://emotion.sh/docs/css-prop#style-precedence
         className={props.className}
-        {...filterDataAttributes(props)}
+        {...filterDataAttributes({
+          horizontalConstraint,
+          ...props,
+        })}
         /* ARIA */
         aria-readonly={props.isReadOnly}
         contentEditable={!props.isReadOnly}
@@ -139,7 +141,6 @@ const TextInput = (props: TTextInputProps) => {
 };
 
 TextInput.displayName = 'TextInput';
-TextInput.defaultProps = defaultProps;
 TextInput.isEmpty = (value: TTextInputProps['value']) =>
   !value || value.trim().length === 0;
 
diff --git a/packages/components/inputs/time-input/src/time-input.tsx b/packages/components/inputs/time-input/src/time-input.tsx
index 1ae37e3527..7550c79222 100644
--- a/packages/components/inputs/time-input/src/time-input.tsx
+++ b/packages/components/inputs/time-input/src/time-input.tsx
@@ -149,7 +149,7 @@ const dispatchReactChangeEvent = (node: HTMLInputElement, value?: string) => {
   node.dispatchEvent(new Event('change', { bubbles: true }));
 };
 
-const TimeInput = (props: TTimeInputProps) => {
+const TimeInput = ({ ...props }: TTimeInputProps) => {
   const id = useFieldId(props.id, sequentialId);
   const intl = useIntl();
   const element = useRef<HTMLInputElement>(null);
@@ -212,7 +212,9 @@ const TimeInput = (props: TTimeInputProps) => {
             ? props.placeholder
             : intl.formatMessage(messages.placeholder)
         }
-        {...filterDataAttributes(props)}
+        {...filterDataAttributes({
+          ...props,
+        })}
         /* ARIA */
         aria-invalid={props['aria-invalid']}
         aria-errormessage={props['aria-errormessage']}
@@ -230,10 +232,6 @@ TimeInput.to24h = (time: string) => {
   return parsedTime ? format24hr(parsedTime) : '';
 };
 
-TimeInput.defaultProps = {
-  horizontalConstraint: 'scale',
-} as Pick<TTimeInputProps, 'horizontalConstraint'>;
-
 // Converts any value to either a formatted value or an empty string
 // The resulting format might use 12h or 24h, unless the time contains
 // milliseconds. If milliseconds are contained, the
diff --git a/packages/components/inputs/toggle-input/src/toggle-input.spec.tsx b/packages/components/inputs/toggle-input/src/toggle-input.spec.tsx
index a012ab9ff3..f070b85105 100644
--- a/packages/components/inputs/toggle-input/src/toggle-input.spec.tsx
+++ b/packages/components/inputs/toggle-input/src/toggle-input.spec.tsx
@@ -2,7 +2,7 @@ import type { TToggleInputProps } from './toggle-input';
 
 import { useState } from 'react';
 import { screen, render } from '../../../../../test/test-utils';
-import ToggleInput, { defaultProps } from './toggle-input';
+import ToggleInput from './toggle-input';
 
 const TestComponent = (props: TToggleInputProps) => {
   const [isChecked, setIsChecked] = useState(false);
@@ -24,7 +24,6 @@ const TestComponent = (props: TToggleInputProps) => {
     </div>
   );
 };
-TestComponent.defaultProps = defaultProps;
 
 it('should render children', () => {
   const onChange = jest.fn();
diff --git a/packages/components/inputs/toggle-input/src/toggle-input.styles.ts b/packages/components/inputs/toggle-input/src/toggle-input.styles.ts
index 8e283ae2c7..16c8f09125 100644
--- a/packages/components/inputs/toggle-input/src/toggle-input.styles.ts
+++ b/packages/components/inputs/toggle-input/src/toggle-input.styles.ts
@@ -8,9 +8,16 @@ type SizesProps = {
   thumbSizes: typeof thumbSizes;
 };
 
-type TStyledLabelProps = Pick<TToggleInputProps, 'isDisabled' | 'size'> &
-  SizesProps;
-type TStyledSpanProps = Pick<TToggleInputProps, 'size'> & SizesProps;
+type TStyledLabelProps = {
+  isDisabled: NonNullable<TToggleInputProps['isDisabled']>;
+  size: NonNullable<TToggleInputProps['size']>;
+} & SizesProps;
+type TStyledSpanProps = {
+  size: NonNullable<TToggleInputProps['size']>;
+} & SizesProps;
+type TInputStylesProps = {
+  size: NonNullable<TToggleInputProps['size']>;
+} & SizesProps;
 
 const trackSizes = {
   small: {
@@ -136,7 +143,7 @@ const Span = styled.span<TStyledSpanProps>`
   }
 `;
 
-const getInputStyles = (props: TToggleInputProps & SizesProps) => css`
+const getInputStyles = (props: TInputStylesProps) => css`
   /* when checked */
   &:checked {
     + span::before {
diff --git a/packages/components/inputs/toggle-input/src/toggle-input.tsx b/packages/components/inputs/toggle-input/src/toggle-input.tsx
index c8cabedab0..21bafe23f6 100644
--- a/packages/components/inputs/toggle-input/src/toggle-input.tsx
+++ b/packages/components/inputs/toggle-input/src/toggle-input.tsx
@@ -24,15 +24,15 @@ export type TToggleInputProps = {
   /**
    * The size of the ToggleInput component.
    */
-  size: 'small' | 'big';
+  size?: 'small' | 'big';
   /**
    * Disables the ToggleInput
    */
-  isDisabled: boolean;
+  isDisabled?: boolean;
   /**
    * Checks the ToggleInput
    */
-  isChecked: boolean;
+  isChecked?: boolean;
   /**
    * Determines the toggle state.
    */
@@ -44,21 +44,19 @@ export type TToggleInputProps = {
   onChange: ChangeEventHandler<HTMLInputElement>;
 };
 
-export const defaultProps: Pick<
-  TToggleInputProps,
-  'isDisabled' | 'isChecked' | 'size'
-> = {
-  isDisabled: false,
-  isChecked: false,
-  size: 'big',
-};
+export {};
 
-const ToggleInput = (props: TToggleInputProps) => {
+const ToggleInput = ({
+  isDisabled = false,
+  isChecked = false,
+  size = 'big',
+  ...props
+}: TToggleInputProps) => {
   return (
     <Label
       htmlFor={props.id}
-      size={props.size}
-      isDisabled={props.isDisabled}
+      size={size}
+      isDisabled={isDisabled}
       trackSizes={trackSizes}
       thumbSizes={thumbSizes}
     >
@@ -66,20 +64,30 @@ const ToggleInput = (props: TToggleInputProps) => {
         type="checkbox"
         css={[
           accessibleHiddenInputStyles,
-          getInputStyles({ ...props, trackSizes, thumbSizes }),
+          getInputStyles({ trackSizes, thumbSizes, size, ...props }),
         ]}
         id={props.id}
         name={props.name}
         onChange={props.onChange}
-        disabled={props.isDisabled}
-        checked={props.isChecked}
+        disabled={isDisabled}
+        checked={isChecked}
         value={props.value}
-        {...filterDataAttributes(props)}
-        {...filterAriaAttributes(props)}
+        {...filterDataAttributes({
+          isDisabled,
+          isChecked,
+          size,
+          ...props,
+        })}
+        {...filterAriaAttributes({
+          isDisabled,
+          isChecked,
+          size,
+          ...props,
+        })}
       />
       <Span
         aria-hidden="true"
-        size={props.size}
+        size={size}
         trackSizes={trackSizes}
         thumbSizes={thumbSizes}
       />
@@ -88,6 +96,5 @@ const ToggleInput = (props: TToggleInputProps) => {
 };
 
 ToggleInput.displayName = 'Toggle';
-ToggleInput.defaultProps = defaultProps;
 
 export default ToggleInput;
diff --git a/packages/components/link/src/link.tsx b/packages/components/link/src/link.tsx
index 540739440b..12375e16e0 100644
--- a/packages/components/link/src/link.tsx
+++ b/packages/components/link/src/link.tsx
@@ -34,7 +34,7 @@ export type TLinkProps = {
    * <bt />
    * If `true`, a regular `<a>` is rendered instead of the default `react-router`s `<Link />`
    */
-  isExternal: boolean;
+  isExternal?: boolean;
   /**
    * The URL that the Link should point to.
    */
@@ -74,11 +74,6 @@ const warnIfMissingContent = (props: TLinkProps) => {
   );
 };
 
-const defaultProps: Pick<TLinkProps, 'tone' | 'isExternal'> = {
-  tone: 'primary',
-  isExternal: false,
-};
-
 const getTextColorValue = (tone: TLinkProps['tone'] = 'primary') => {
   if (tone === 'primary') {
     return designTokens.colorPrimary30;
@@ -123,17 +118,22 @@ const Wrapper = styled.span`
   }
 `;
 
-const Link = (props: TLinkProps) => {
-  const remainingProps = filterInvalidAttributes(props);
+const Link = ({
+  tone = 'primary',
+  isExternal = false,
+  ...props
+}: TLinkProps) => {
+  const allProps = { tone, isExternal, ...props };
+  const remainingProps = filterInvalidAttributes(allProps);
 
-  const color = getTextColorValue(props.tone);
-  const hoverColor = getActiveColorValue(props.tone);
+  const color = getTextColorValue(tone);
+  const hoverColor = getActiveColorValue(tone);
 
   // `filterInvalidAttributes` strips off `intlMessage` and `children`
   // so we pass in the "raw" props instead.
-  warnIfMissingContent(props);
+  warnIfMissingContent(allProps);
 
-  if (props.isExternal) {
+  if (isExternal) {
     if (typeof props.to !== 'string') {
       throw new Error('`to` must be a `string` when `isExternal` is provided.');
     }
@@ -148,7 +148,7 @@ const Link = (props: TLinkProps) => {
         `}
       >
         <a
-          css={getLinkStyles(props)}
+          css={getLinkStyles(allProps)}
           href={props.to}
           target="_blank"
           rel="noopener noreferrer"
@@ -160,14 +160,14 @@ const Link = (props: TLinkProps) => {
             props.children
           )}
         </a>
-        {props.isExternal && <ExternalLinkIcon size="medium" />}
+        {isExternal && <ExternalLinkIcon size="medium" />}
       </Wrapper>
     );
   }
 
   return (
     <ReactRouterLink
-      css={getLinkStyles(props)}
+      css={getLinkStyles(allProps)}
       to={props.to}
       {...remainingProps}
     >
@@ -181,6 +181,5 @@ const Link = (props: TLinkProps) => {
 };
 
 Link.displayName = 'Link';
-Link.defaultProps = defaultProps;
 
 export default Link;
diff --git a/packages/components/loading-spinner/src/loading-spinner.tsx b/packages/components/loading-spinner/src/loading-spinner.tsx
index ca9cb195de..917a0bebc7 100644
--- a/packages/components/loading-spinner/src/loading-spinner.tsx
+++ b/packages/components/loading-spinner/src/loading-spinner.tsx
@@ -42,24 +42,23 @@ export type TLoadingSpinnerProps = {
   children?: ReactNode;
 };
 
-const defaultProps: Pick<TLoadingSpinnerProps, 'scale' | 'maxDelayDuration'> = {
-  scale: 'l',
-  maxDelayDuration: 1000,
-};
-
-const LoadingSpinner = (props: TLoadingSpinnerProps) => {
+const LoadingSpinner = ({
+  scale = 'l',
+  maxDelayDuration = 1000,
+  ...props
+}: TLoadingSpinnerProps) => {
   const [showSpinner, setShowSpinner] = useState(false);
-  const size = sizePerScale[props.scale];
+  const size = sizePerScale[scale];
   useEffect(() => {
     const delaySpinnerTimeout = setTimeout(
       () => setShowSpinner(true),
-      props.maxDelayDuration
+      maxDelayDuration
     );
 
     return () => clearTimeout(delaySpinnerTimeout);
-  }, [props.maxDelayDuration]);
+  }, [maxDelayDuration]);
 
-  if (!showSpinner && (props.maxDelayDuration ?? 0) > 0) return null;
+  if (!showSpinner && (maxDelayDuration ?? 0) > 0) return null;
 
   return (
     <Inline alignItems="center">
@@ -100,6 +99,5 @@ const LoadingSpinner = (props: TLoadingSpinnerProps) => {
   );
 };
 LoadingSpinner.displayName = 'LoadingSpinner';
-LoadingSpinner.defaultProps = defaultProps;
 
 export default LoadingSpinner;
diff --git a/packages/components/pagination/src/page-size-selector/page-size-selector.tsx b/packages/components/pagination/src/page-size-selector/page-size-selector.tsx
index 2f50e54b34..fde8c58b24 100644
--- a/packages/components/pagination/src/page-size-selector/page-size-selector.tsx
+++ b/packages/components/pagination/src/page-size-selector/page-size-selector.tsx
@@ -52,16 +52,18 @@ const mapRangeToListOfOptions = (perPageRange: TPageRangeSize) => {
   }
 };
 
-const PageSizeSelector = (props: TPageSizeSelectorProps) => {
+const PageSizeSelector = ({
+  perPage = 20,
+  perPageRange = 's',
+  ...props
+}: TPageSizeSelectorProps) => {
   const [perPageSelectorId] = useState(uniqueId('per-page-selector-'));
-  const options = mapRangeToListOfOptions(props.perPageRange);
-  const hasValidPerPageOption = options.includes(props.perPage);
+  const options = mapRangeToListOfOptions(perPageRange);
+  const hasValidPerPageOption = options.includes(perPage);
 
   warning(
     hasValidPerPageOption,
-    `@commercetools-uikit/pagination: invalid page size ${
-      props.perPage
-    }. It must be one of the values of the selected range in "${options.toString()}".`
+    `@commercetools-uikit/pagination: invalid page size ${perPage}. It must be one of the values of the selected range in "${options.toString()}".`
   );
 
   const { onPerPageChange } = props;
@@ -79,7 +81,7 @@ const PageSizeSelector = (props: TPageSizeSelectorProps) => {
           id={perPageSelectorId}
           isSearchable={false}
           name="per-page-selector"
-          value={props.perPage.toString()}
+          value={perPage.toString()}
           options={options.map((option) => ({
             value: option.toString(),
             label: option.toString(),
@@ -102,11 +104,4 @@ const PageSizeSelector = (props: TPageSizeSelectorProps) => {
 
 PageSizeSelector.displayName = 'PageSizeSelector';
 
-const defaultProps: Pick<TPageSizeSelectorProps, 'perPage' | 'perPageRange'> = {
-  perPage: 20,
-  perPageRange: 's',
-};
-
-PageSizeSelector.defaultProps = defaultProps;
-
 export default PageSizeSelector;
diff --git a/packages/components/pagination/src/pagination.tsx b/packages/components/pagination/src/pagination.tsx
index 7e745f9a4e..e56650b608 100644
--- a/packages/components/pagination/src/pagination.tsx
+++ b/packages/components/pagination/src/pagination.tsx
@@ -41,13 +41,17 @@ export type TPaginationProps = {
   onPerPageChange: (newPerPage: number) => void;
 };
 
-const Pagination = (props: TPaginationProps) => {
-  const totalPages = Math.ceil(props.totalItems / props.perPage);
+const Pagination = ({
+  perPage = 20,
+  perPageRange = 's',
+  ...props
+}: TPaginationProps) => {
+  const totalPages = Math.ceil(props.totalItems / perPage);
 
   const pageItems =
     props.page === totalPages
-      ? props.totalItems - props.perPage * (props.page - 1)
-      : props.perPage;
+      ? props.totalItems - perPage * (props.page - 1)
+      : perPage;
 
   return (
     <Spacings.Inline justifyContent="space-between">
@@ -58,8 +62,8 @@ const Pagination = (props: TPaginationProps) => {
       >
         <PageSizeSelector
           pageItems={pageItems}
-          perPage={props.perPage}
-          perPageRange={props.perPageRange}
+          perPage={perPage}
+          perPageRange={perPageRange}
           onPerPageChange={props.onPerPageChange}
         />
       </div>
@@ -74,12 +78,6 @@ const Pagination = (props: TPaginationProps) => {
 
 Pagination.displayName = 'Pagination';
 
-const defaultProps: Pick<TPaginationProps, 'perPage' | 'perPageRange'> = {
-  perPage: 20,
-  perPageRange: 's',
-};
-Pagination.defaultProps = defaultProps;
-
 export type { TPageRangeSize };
 
 export default Pagination;
diff --git a/packages/components/primary-action-dropdown/src/option.tsx b/packages/components/primary-action-dropdown/src/option.tsx
index 3a8ec2dadb..9b4e7b5e03 100644
--- a/packages/components/primary-action-dropdown/src/option.tsx
+++ b/packages/components/primary-action-dropdown/src/option.tsx
@@ -22,11 +22,11 @@ type TOption = {
   iconLeft?: ReactNode;
 };
 
-const Option = (props: TOption) => (
+const Option = ({ isDisabled = false, ...props }: TOption) => (
   <AccessibleButton
     label={props.children}
     onClick={props.onClick}
-    isDisabled={props.isDisabled}
+    isDisabled={isDisabled}
     css={[
       css`
         display: block;
@@ -46,7 +46,7 @@ const Option = (props: TOption) => (
           background-color: ${designTokens.colorNeutral95};
         }
       `,
-      props.isDisabled &&
+      isDisabled &&
         css`
           color: ${designTokens.colorNeutral};
         `,
@@ -56,8 +56,5 @@ const Option = (props: TOption) => (
   </AccessibleButton>
 );
 Option.displayName = 'Option';
-Option.defaultProps = {
-  isDisabled: false,
-};
 
 export default Option;
diff --git a/packages/components/primary-action-dropdown/src/primary-action-dropdown.tsx b/packages/components/primary-action-dropdown/src/primary-action-dropdown.tsx
index 1be40cda25..b89d84d9e9 100644
--- a/packages/components/primary-action-dropdown/src/primary-action-dropdown.tsx
+++ b/packages/components/primary-action-dropdown/src/primary-action-dropdown.tsx
@@ -288,20 +288,20 @@ const PrimaryActionDropdown = (props: TPrimaryActionDropdown) => {
     >
       <DropdownHead
         iconLeft={primaryOption.props.iconLeft}
-        isDisabled={primaryOption.props.isDisabled}
+        isDisabled={Boolean(primaryOption.props.isDisabled)}
         onClick={handleClickOnHead}
         chevron={
           <DropdownChevron
             ref={ref as ForwardedRef<HTMLButtonElement>}
             onClick={handleClickOnChevron}
-            isDisabled={primaryOption.props.isDisabled}
+            isDisabled={Boolean(primaryOption.props.isDisabled)}
             isOpen={isOpen}
           />
         }
       >
         {primaryOption.props.children}
       </DropdownHead>
-      {isOpen && !primaryOption.props.isDisabled && (
+      {isOpen && !Boolean(primaryOption.props.isDisabled) && (
         <Options>{childrenAsArray}</Options>
       )}
     </div>
diff --git a/packages/components/progress-bar/src/progress-bar.styles.tsx b/packages/components/progress-bar/src/progress-bar.styles.tsx
index c6e6f7870c..27b70e23ff 100644
--- a/packages/components/progress-bar/src/progress-bar.styles.tsx
+++ b/packages/components/progress-bar/src/progress-bar.styles.tsx
@@ -1,7 +1,12 @@
 import { css, keyframes } from '@emotion/react';
 import { designTokens } from '@commercetools-uikit/design-system';
 import Constraints from '@commercetools-uikit/constraints';
-import { defaultProps, type TProgressBarProps } from './progress-bar';
+import { type TProgressBarProps } from './progress-bar';
+
+export const defaultStyles = {
+  height: '20',
+  labelWidth: 'scale',
+} as const;
 
 export const heightPerScale = {
   '10': designTokens.spacing25,
@@ -20,9 +25,9 @@ const progressPulse = keyframes`
 export const getLabelStyles = (
   props: TProgressBarProps & { textAlignment: string }
 ) => css`
-  min-height: ${heightPerScale[props.height ?? defaultProps.height!]};
+  min-height: ${heightPerScale[props.height ?? defaultStyles.height]};
   max-width: ${Constraints.getMaxPropTokenValue(
-    props.labelWidth || defaultProps.labelWidth!
+    props.labelWidth || defaultStyles.labelWidth
   )};
 `;
 
@@ -32,7 +37,7 @@ export const getBackgroundBarStyles = (props: TProgressBarProps) => css`
     ? 'rgba(255, 255, 255, 0.4)'
     : designTokens.colorNeutral90};
   border-radius: ${designTokens.spacingL};
-  height: ${heightPerScale[props.height ?? defaultProps.height!]};
+  height: ${heightPerScale[props.height ?? defaultStyles.height]};
   overflow: hidden;
 `;
 
@@ -40,7 +45,7 @@ export const getForegroundBarStyles = (props: TProgressBarProps) => css`
   width: ${props.progress}%;
   transition: width 500ms ease-in-out;
   display: block;
-  height: ${heightPerScale[props.height ?? defaultProps.height!]};
+  height: ${heightPerScale[props.height ?? defaultStyles.height]};
   background: ${props.isInverted
     ? designTokens.colorSurface
     : `linear-gradient(
diff --git a/packages/components/progress-bar/src/progress-bar.tsx b/packages/components/progress-bar/src/progress-bar.tsx
index e60a3c711a..11e5727edf 100644
--- a/packages/components/progress-bar/src/progress-bar.tsx
+++ b/packages/components/progress-bar/src/progress-bar.tsx
@@ -7,6 +7,7 @@ import SpacingsStack from '@commercetools-uikit/spacings-stack';
 import Text from '@commercetools-uikit/text';
 import isNil from 'lodash/isNil';
 import {
+  defaultStyles,
   getLabelStyles,
   getBackgroundBarStyles,
   getForegroundBarStyles,
@@ -132,26 +133,35 @@ const layoutConfigMapping = {
   },
 } as const;
 
-const ProgressBar = (props: TProgressBarProps) => {
-  const layoutConfig = layoutConfigMapping[props.labelPosition || 'top'];
+const ProgressBar = ({
+  progress = 0,
+  label = null,
+  labelPosition = 'top',
+  labelWidth = defaultStyles.labelWidth,
+  isInverted = false,
+  isAnimated = true,
+  height = defaultStyles.height,
+  barWidth = 6,
+}: TProgressBarProps) => {
+  const layoutConfig = layoutConfigMapping[labelPosition || 'top'];
 
   const BarWithProps = (
     <Bar
-      progress={props.progress}
-      barWidth={props.barWidth}
-      isInverted={props.isInverted}
-      height={props.height}
-      isAnimated={props.isAnimated}
+      progress={progress}
+      barWidth={barWidth}
+      isInverted={isInverted}
+      height={height}
+      isAnimated={isAnimated}
     />
   );
 
   const LabelWithProps = (
     <ProgressBarLabel
-      label={props.label}
-      labelWidth={props.labelWidth}
-      labelPosition={props.labelPosition}
-      isInverted={props.isInverted}
-      height={props.height}
+      label={label}
+      labelWidth={labelWidth}
+      labelPosition={labelPosition}
+      isInverted={isInverted}
+      height={height}
       textAlignment={layoutConfig.textAlignment}
     />
   );
@@ -160,33 +170,19 @@ const ProgressBar = (props: TProgressBarProps) => {
   let firstComponent = LabelWithProps;
   let secondComponent = BarWithProps;
 
-  if (props.labelPosition === 'right' || props.labelPosition === 'bottom') {
+  if (labelPosition === 'right' || labelPosition === 'bottom') {
     firstComponent = BarWithProps;
     secondComponent = LabelWithProps;
   }
 
   return (
-    <WrappingComponent
-      scale={props.height === '20' ? 'm' : 's'}
-      alignItems="center"
-    >
+    <WrappingComponent scale={height === '20' ? 'm' : 's'} alignItems="center">
       {firstComponent}
       {secondComponent}
     </WrappingComponent>
   );
 };
 
-export const defaultProps: TProgressBarProps = {
-  progress: 0,
-  label: null,
-  labelPosition: 'top',
-  labelWidth: 'scale',
-  isInverted: false,
-  isAnimated: true,
-  height: '20',
-  barWidth: 6,
-};
 ProgressBar.displayName = 'ProgressBar';
-ProgressBar.defaultProps = defaultProps;
 
 export default ProgressBar;
diff --git a/packages/components/spacings/spacings-inline/src/inline.tsx b/packages/components/spacings/spacings-inline/src/inline.tsx
index b55fceafa2..25cbd2f86f 100644
--- a/packages/components/spacings/spacings-inline/src/inline.tsx
+++ b/packages/components/spacings/spacings-inline/src/inline.tsx
@@ -29,32 +29,41 @@ export type TScale = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 
 export type TInlineProps = {
   /** sets the amount of spacing between individual items */
-  scale: TScale;
+  scale?: TScale;
   /**
    * sets the `align-self` value on all direct children.
    * https://developer.mozilla.org/en-US/docs/Web/CSS/align-items */
-  alignItems: TAlignItem;
+  alignItems?: TAlignItem;
   /**
    * defines how the browser distributes space between and around content items along the main-axis.
    * https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content */
-  justifyContent: TJustifyContent;
+  justifyContent?: TJustifyContent;
   children: ReactNode;
 };
 
-const Inline = (props: TInlineProps) => (
-  <span css={getStyles(props)} {...filterDataAttributes(props)}>
+const Inline = ({
+  scale = 's',
+  alignItems = 'flex-start',
+  justifyContent = 'flex-start',
+  ...props
+}: TInlineProps) => (
+  <span
+    css={getStyles({
+      scale,
+      alignItems,
+      justifyContent,
+      ...props,
+    })}
+    {...filterDataAttributes({
+      scale,
+      alignItems,
+      justifyContent,
+      ...props,
+    })}
+  >
     {props.children}
   </span>
 );
-const defaultProps: Pick<
-  TInlineProps,
-  'scale' | 'alignItems' | 'justifyContent'
-> = {
-  scale: 's',
-  alignItems: 'flex-start',
-  justifyContent: 'flex-start',
-};
-Inline.defaultProps = defaultProps;
 Inline.displayName = 'Inline';
 
 export default Inline;
diff --git a/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx b/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx
index daa110bcc3..b38de95bd7 100644
--- a/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx
+++ b/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx
@@ -6,9 +6,9 @@ import { filterDataAttributes } from '@commercetools-uikit/utils';
 export type TScale = 's' | 'm' | 'l';
 export type TInsetSquishProps = {
   /** sets the amount of `padding` applied around the children */
-  scale: TScale;
+  scale?: TScale;
   /** sets the height of the component to 100% of the available width ('expanded') or 'auto' */
-  height: 'collapsed' | 'expanded';
+  height?: 'collapsed' | 'expanded';
   children: ReactNode;
 };
 
@@ -25,22 +25,25 @@ const getPadding = (scale?: TScale) => {
   }
 };
 
-const InsetSquish = (props: TInsetSquishProps) => (
+const InsetSquish = ({
+  scale = 'm',
+  height = 'collapsed',
+  ...props
+}: TInsetSquishProps) => (
   <div
     css={css`
-      padding: ${getPadding(props.scale)};
-      height: ${props.height === 'expanded' ? '100%' : 'auto'};
+      padding: ${getPadding(scale)};
+      height: ${height === 'expanded' ? '100%' : 'auto'};
     `}
-    {...filterDataAttributes(props)}
+    {...filterDataAttributes({
+      scale,
+      height,
+      ...props,
+    })}
   >
     {props.children}
   </div>
 );
-const defaultProps: Pick<TInsetSquishProps, 'scale' | 'height'> = {
-  scale: 'm',
-  height: 'collapsed',
-};
 InsetSquish.displayName = 'InsetSquish';
-InsetSquish.defaultProps = defaultProps;
 
 export default InsetSquish;
diff --git a/packages/components/spacings/spacings-inset/src/inset.tsx b/packages/components/spacings/spacings-inset/src/inset.tsx
index 9350c59f6e..42b26c9597 100644
--- a/packages/components/spacings/spacings-inset/src/inset.tsx
+++ b/packages/components/spacings/spacings-inset/src/inset.tsx
@@ -24,28 +24,31 @@ const getPadding = (scale?: TScale) => {
 
 export type TInsetProps = {
   /** sets the amount of `padding` applied around the children */
-  scale: TScale;
+  scale?: TScale;
   /** sets the height of the component to 100% of the available width ('expanded') or 'auto' */
-  height: 'collapsed' | 'expanded';
+  height?: 'collapsed' | 'expanded';
   children?: ReactNode;
 };
 
-const Inset = (props: TInsetProps) => (
+const Inset = ({
+  scale = 'm',
+  height = 'collapsed',
+  ...props
+}: TInsetProps) => (
   <div
     css={css`
-      padding: ${getPadding(props.scale)};
-      height: ${props.height === 'expanded' ? '100%' : 'auto'};
+      padding: ${getPadding(scale)};
+      height: ${height === 'expanded' ? '100%' : 'auto'};
     `}
-    {...filterDataAttributes(props)}
+    {...filterDataAttributes({
+      scale,
+      height,
+      ...props,
+    })}
   >
     {props.children}
   </div>
 );
-const defaultProps: Pick<TInsetProps, 'scale' | 'height'> = {
-  scale: 'm',
-  height: 'collapsed',
-};
 Inset.displayName = 'Inset';
-Inset.defaultProps = defaultProps;
 
 export default Inset;
diff --git a/packages/components/spacings/spacings-stack/src/stack.tsx b/packages/components/spacings/spacings-stack/src/stack.tsx
index fb85297ed6..083767afdb 100644
--- a/packages/components/spacings/spacings-stack/src/stack.tsx
+++ b/packages/components/spacings/spacings-stack/src/stack.tsx
@@ -21,24 +21,34 @@ export type TScale = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 
 export type TStackProps = {
   /** specifies the spacing between individual items */
-  scale: TScale;
+  scale?: TScale;
   /**
    * sets the `align-self` value on all direct children.
    * https://developer.mozilla.org/en-US/docs/Web/CSS/align-items */
-  alignItems: TAlignItem;
+  alignItems?: TAlignItem;
   children: ReactNode;
 };
 
-const Stack = (props: TStackProps) => (
-  <div css={getStyles(props)} {...filterDataAttributes(props)}>
+const Stack = ({
+  scale = 's',
+  alignItems = 'stretch',
+  ...props
+}: TStackProps) => (
+  <div
+    css={getStyles({
+      scale,
+      alignItems,
+      ...props,
+    })}
+    {...filterDataAttributes({
+      scale,
+      alignItems,
+      ...props,
+    })}
+  >
     {props.children}
   </div>
 );
-const defaultProps: Pick<TStackProps, 'scale' | 'alignItems'> = {
-  scale: 's',
-  alignItems: 'stretch',
-};
 Stack.displayName = 'Stack';
-Stack.defaultProps = defaultProps;
 
 export default Stack;
diff --git a/packages/components/stamp/src/stamp.tsx b/packages/components/stamp/src/stamp.tsx
index aa42687370..acb14e56de 100644
--- a/packages/components/stamp/src/stamp.tsx
+++ b/packages/components/stamp/src/stamp.tsx
@@ -21,7 +21,7 @@ export type TStampProps = {
   /**
    * If `true`, renders a condensed version of the stamp.
    */
-  isCondensed: boolean;
+  isCondensed?: boolean;
   /**
    * Content to render within the stamp.
    * @deprecated in favor of `label`.
@@ -155,12 +155,17 @@ const getStampStyles = (props: StylesFunctionParams) => {
   `;
 };
 
-const Stamp = (props: TStampProps) => {
+const Stamp = ({
+  isCondensed = false,
+  tone = 'information',
+  ...props
+}: TStampProps) => {
+  const allProps = { isCondensed, tone, ...props };
   const Icon =
     props.icon &&
     cloneElement(props.icon, {
       size: 'medium',
-      color: getIconColor(props, true),
+      color: getIconColor(allProps, true),
     });
 
   useWarnDeprecatedProp(
@@ -171,7 +176,7 @@ const Stamp = (props: TStampProps) => {
   );
 
   const StampLabel = ({ children }: { children: string }): ReactElement =>
-    props.isCondensed ? (
+    isCondensed ? (
       <Text.Caption tone="inherit" fontWeight="medium">
         {children}
       </Text.Caption>
@@ -184,26 +189,22 @@ const Stamp = (props: TStampProps) => {
   return (
     <div
       css={[
-        getStampStyles({ ...props, overrideTextColor: true }),
-        getToneStyles({ ...props, overrideTextColor: true }),
-        getPaddingStyle(props),
+        getStampStyles({ ...allProps, overrideTextColor: true }),
+        getToneStyles({ ...allProps, overrideTextColor: true }),
+        getPaddingStyle({
+          isCondensed,
+          tone,
+          ...props,
+        }),
       ]}
     >
-      <SpacingsInline
-        alignItems="center"
-        scale={props.isCondensed ? 'xs' : 's'}
-      >
+      <SpacingsInline alignItems="center" scale={isCondensed ? 'xs' : 's'}>
         {Icon}
         {props.label ? <StampLabel>{props.label}</StampLabel> : props.children}
       </SpacingsInline>
     </div>
   );
 };
-const defaultProps: Pick<TStampProps, 'isCondensed' | 'tone'> = {
-  isCondensed: false,
-  tone: 'information',
-};
 Stamp.displayName = 'Stamp';
-Stamp.defaultProps = defaultProps;
 
 export default Stamp;
diff --git a/packages/components/tag/src/tag-body.tsx b/packages/components/tag/src/tag-body.tsx
index 40b40d8eb7..8954571cda 100644
--- a/packages/components/tag/src/tag-body.tsx
+++ b/packages/components/tag/src/tag-body.tsx
@@ -18,11 +18,6 @@ export type TTagBodyProps = {
   styles?: TTagProps['styles'];
 };
 
-const defaultProps: Pick<TTagProps, 'isDisabled' | 'isDraggable'> = {
-  isDisabled: false,
-  isDraggable: false,
-};
-
 type TBody = Pick<TTagBodyProps, 'to' | 'as'>;
 const Body = styled.div<TBody>``;
 
@@ -68,16 +63,24 @@ const getContentWrapperStyles = (props: TTagBodyProps) => {
   `;
 };
 
-const TagBody = (props: TTagBodyProps) => {
-  const textTone = props.isDisabled ? 'secondary' : 'inherit';
+const TagBody = ({
+  isDisabled = false,
+  isDraggable = false,
+  ...props
+}: TTagBodyProps) => {
+  const textTone = isDisabled ? 'secondary' : 'inherit';
 
   return (
     <Body
       to={props.to}
       as={props.as}
       css={[
-        getContentWrapperStyles(props),
-        !props.isDisabled &&
+        getContentWrapperStyles({
+          isDisabled,
+          isDraggable,
+          ...props,
+        }),
+        !isDisabled &&
           Boolean(props.onClick) &&
           css`
             &:hover {
@@ -86,9 +89,9 @@ const TagBody = (props: TTagBodyProps) => {
           `,
         props.styles?.body,
       ]}
-      onClick={props.isDisabled ? undefined : props.onClick}
+      onClick={isDisabled ? undefined : props.onClick}
     >
-      {props.isDraggable && !props.isDisabled ? (
+      {isDraggable && !isDisabled ? (
         <DragIcon data-testid="drag-icon" size="medium" />
       ) : null}
       <Text.Detail tone={textTone} as="span">
@@ -98,7 +101,6 @@ const TagBody = (props: TTagBodyProps) => {
   );
 };
 
-TagBody.defaultProps = defaultProps;
 TagBody.displayName = 'TagBody';
 
 export default TagBody;
diff --git a/packages/components/tag/src/tag.styles.ts b/packages/components/tag/src/tag.styles.ts
index 39e8cfee50..a2e8a80f28 100644
--- a/packages/components/tag/src/tag.styles.ts
+++ b/packages/components/tag/src/tag.styles.ts
@@ -7,6 +7,10 @@ type visualVariantType = Exclude<
   undefined
 >;
 
+type TToneStylesProps = Omit<TTagProps, 'tone'> & {
+  tone: NonNullable<TTagProps['tone']>;
+};
+
 /**
  * Returns the required tone styles for the tag based on the props.
  */
@@ -15,7 +19,7 @@ export const getToneStyles = ({
   type,
   tone,
   onClick,
-}: TTagProps) => {
+}: TToneStylesProps) => {
   let variant: visualVariantType = isDisabled ? 'disabled' : type || tone;
 
   // map deprecated 'normal' type to 'primary' tone
diff --git a/packages/components/tag/src/tag.tsx b/packages/components/tag/src/tag.tsx
index 68ab30f95a..84ea47822b 100644
--- a/packages/components/tag/src/tag.tsx
+++ b/packages/components/tag/src/tag.tsx
@@ -70,24 +70,20 @@ export type TTagProps = {
   /**
    * Indicates the color scheme of the tag.
    */
-  tone: 'primary' | 'warning' | 'surface';
+  tone?: 'primary' | 'warning' | 'surface';
 };
 
-const defaultProps: Pick<
-  TTagProps,
-  'tone' | 'isDisabled' | 'isDraggable' | 'horizontalConstraint'
-> = {
-  tone: 'primary',
-  isDisabled: false,
-  isDraggable: false,
-  horizontalConstraint: 'scale',
-};
-
-const Tag = (props: TTagProps) => {
+const Tag = ({
+  tone = 'primary',
+  isDisabled = false,
+  isDraggable = false,
+  horizontalConstraint = 'scale',
+  ...props
+}: TTagProps) => {
   let tagBodyProps;
 
   switch (true) {
-    case props.isDisabled:
+    case isDisabled:
       tagBodyProps = {};
       break;
     case Boolean(props.to):
@@ -101,17 +97,17 @@ const Tag = (props: TTagProps) => {
   }
 
   const isInteractive =
-    !props.isDisabled && (Boolean(props.onClick) || Boolean(props.to));
+    !isDisabled && (Boolean(props.onClick) || Boolean(props.to));
 
   return (
-    <Constraints.Horizontal max={props.horizontalConstraint}>
+    <Constraints.Horizontal max={horizontalConstraint}>
       <div
         css={css`
           a {
             text-decoration: none;
           }
           box-sizing: border-box;
-          cursor: ${props.isDisabled
+          cursor: ${isDisabled
             ? 'not-allowed'
             : isInteractive
             ? 'pointer'
@@ -122,7 +118,11 @@ const Tag = (props: TTagProps) => {
           border-style: solid;
           border-width: 1px;
           user-select: none;
-          ${getToneStyles(props)};
+          ${getToneStyles({
+            isDisabled,
+            tone,
+            ...props,
+          })};
 
           &:focus-within {
             outline: ${designTokens.borderWidth2} solid
@@ -135,16 +135,16 @@ const Tag = (props: TTagProps) => {
           styles={props.styles}
           onClick={props.onClick}
           onRemove={props.onRemove}
-          isDisabled={props.isDisabled}
-          isDraggable={props.isDraggable}
+          isDisabled={isDisabled}
+          isDraggable={isDraggable}
         >
           {props.children}
         </TagBody>
 
-        {Boolean(props.onRemove) && !props.isDisabled && (
+        {Boolean(props.onRemove) && !isDisabled && (
           <AccessibleButton
             label="Remove"
-            isDisabled={props.isDisabled}
+            isDisabled={isDisabled}
             onClick={props.onRemove}
             css={[
               css`
@@ -174,7 +174,6 @@ const Tag = (props: TTagProps) => {
   );
 };
 
-Tag.defaultProps = defaultProps;
 Tag.displayName = 'Tag';
 
 export default Tag;
diff --git a/packages/components/tooltip/src/tooltip.tsx b/packages/components/tooltip/src/tooltip.tsx
index b56f33074a..249c097ad2 100644
--- a/packages/components/tooltip/src/tooltip.tsx
+++ b/packages/components/tooltip/src/tooltip.tsx
@@ -61,7 +61,7 @@ export type TTooltipProps = {
   /**
    * Determines if the tooltip should not appear.
    */
-  off: boolean;
+  off?: boolean;
   /**
    * An identifier for the tooltip, used for `aria-describedby`.
    */
@@ -134,18 +134,14 @@ const TooltipWrapper = (props: Pick<TTooltipProps, 'children'>) => (
 );
 TooltipWrapper.displayName = 'TooltipWrapperComponent';
 
-const tooltipDefaultProps: Pick<
-  TTooltipProps,
-  'showAfter' | 'closeAfter' | 'horizontalConstraint' | 'off' | 'placement'
-> = {
-  showAfter: 300,
-  closeAfter: 200,
-  horizontalConstraint: 'scale',
-  off: false,
-  placement: 'top',
-};
-
-const Tooltip = (props: TTooltipProps) => {
+const Tooltip = ({
+  showAfter = 300,
+  closeAfter = 200,
+  horizontalConstraint = 'scale',
+  off = false,
+  placement = 'top',
+  ...props
+}: TTooltipProps) => {
   const enterTimer = useRef<ReturnType<typeof setTimeout>>();
   const leaveTimer = useRef<ReturnType<typeof setTimeout>>();
 
@@ -180,7 +176,7 @@ const Tooltip = (props: TTooltipProps) => {
   }, []);
 
   const { reference, popper, popperInstance } = usePopper({
-    placement: props.placement,
+    placement: placement,
     modifiers: props.modifiers,
   });
   const [state, setState] = useState<TTooltipState>('closed');
@@ -205,7 +201,7 @@ const Tooltip = (props: TTooltipProps) => {
   );
 
   const { onFocus, onMouseOver } = props.children.props;
-  const { showAfter, onOpen } = props;
+  const { onOpen } = props;
   const handleEnter = useCallback(
     (event?: ChangeEvent | FocusEvent) => {
       if (event) {
@@ -236,7 +232,6 @@ const Tooltip = (props: TTooltipProps) => {
   );
 
   const { onBlur, onMouseLeave } = props.children.props;
-  const { closeAfter } = props;
 
   const handleLeave = useCallback(
     (event) => {
@@ -277,7 +272,7 @@ const Tooltip = (props: TTooltipProps) => {
   useEffect(() => {
     // if tooltip was open, and then component
     // updated to be off, we should close the tooltip
-    if (state === 'opened' && props.off) {
+    if (state === 'opened' && off) {
       if (closeAfter) {
         leaveTimer.current = setTimeout(() => {
           handleClose();
@@ -286,7 +281,7 @@ const Tooltip = (props: TTooltipProps) => {
         handleClose();
       }
     }
-  }, [props.off, closeAfter, handleClose, state]);
+  }, [off, closeAfter, handleClose, state]);
 
   const childrenProps = {
     // don't pass event listeners to children
@@ -296,7 +291,7 @@ const Tooltip = (props: TTooltipProps) => {
     onBlur: null,
   };
 
-  const tooltipProps = !props.off
+  const tooltipProps = !off
     ? {
         'aria-describedby': tooltipIsOpen ? id : null,
         // for seo and accessibility, we add the tooltip's title
@@ -310,7 +305,7 @@ const Tooltip = (props: TTooltipProps) => {
       }
     : {};
 
-  const eventListeners = !props.off
+  const eventListeners = !off
     ? {
         onMouseEnter: handleEnter,
         onMouseLeave: handleLeave,
@@ -345,7 +340,7 @@ const Tooltip = (props: TTooltipProps) => {
             css={css({
               ...popper.styles,
               ...getBodyStyles({
-                constraint: props.horizontalConstraint,
+                constraint: horizontalConstraint,
                 placement: popper.placement,
                 customStyles: props.styles?.body,
               }),
@@ -368,6 +363,5 @@ const Tooltip = (props: TTooltipProps) => {
 };
 
 Tooltip.displayName = 'ToolTip';
-Tooltip.defaultProps = tooltipDefaultProps;
 
 export default Tooltip;
diff --git a/test/percy/spec.jsx b/test/percy/spec.jsx
index c0007d3b4e..8239346581 100644
--- a/test/percy/spec.jsx
+++ b/test/percy/spec.jsx
@@ -109,14 +109,18 @@ Props.propTypes = {
   propsToList: PropTypes.arrayOf(PropTypes.string),
 };
 
-const Spec = (props) => {
+const Spec = ({
+  omitPropsList = false,
+  listPropsOfNestedChild = false,
+  ...props
+}) => {
   return (
     <SpecContainer>
       <Label>{props.label}</Label>
-      {!props.omitPropsList && (
+      {!omitPropsList && (
         <Props
           propsToList={props.propsToList}
-          listPropsOfNestedChild={props.listPropsOfNestedChild}
+          listPropsOfNestedChild={listPropsOfNestedChild}
         >
           {props.children}
         </Props>
@@ -135,11 +139,6 @@ Spec.propTypes = {
   backgroundColor: PropTypes.string,
 };
 
-Spec.defaultProps = {
-  omitPropsList: false,
-  listPropsOfNestedChild: false,
-};
-
 Spec.displayName = 'Spec';
 
 export default Spec;