diff --git a/.eslintrc.js b/.eslintrc.js
index 126cc22188..541cdc8ef9 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -18,6 +18,7 @@ module.exports = {
     'import/extensions': 0,
     'react/jsx-props-no-spreading': 'off',
     'react/prop-types': [2, { ignore: ['theme'] }],
+    'react/require-default-props': 'off',
     'import/no-extraneous-dependencies': 0,
     'no-plusplus': 0,
     'no-restricted-globals': 0,
diff --git a/packages/doc/src/components/Clipboard/index.jsx b/packages/doc/src/components/Clipboard/index.jsx
index 19c9221586..016190f37b 100644
--- a/packages/doc/src/components/Clipboard/index.jsx
+++ b/packages/doc/src/components/Clipboard/index.jsx
@@ -40,8 +40,4 @@ Clipboard.propTypes = {
   copyText: string,
 };
 
-Clipboard.defaultProps = {
-  copyText: undefined,
-};
-
 export default Clipboard;
diff --git a/packages/yoga/src/Accordion/web/Accordion.jsx b/packages/yoga/src/Accordion/web/Accordion.jsx
index ac1943f0a6..b3d53bd8c6 100644
--- a/packages/yoga/src/Accordion/web/Accordion.jsx
+++ b/packages/yoga/src/Accordion/web/Accordion.jsx
@@ -202,10 +202,10 @@ const Accordion = ({
   title,
   subtitle,
   children,
-  disabled,
-  expanded,
-  small,
-  hasHorizontalPadding,
+  disabled = false,
+  expanded = false,
+  small = false,
+  hasHorizontalPadding = true,
   ...props
 }) => {
   const [open, setOpen] = useState(expanded);
@@ -272,13 +272,4 @@ Accordion.propTypes = {
   hasHorizontalPadding: bool,
 };
 
-Accordion.defaultProps = {
-  title: undefined,
-  subtitle: undefined,
-  disabled: false,
-  expanded: false,
-  small: false,
-  hasHorizontalPadding: true,
-};
-
 export default Accordion;
diff --git a/packages/yoga/src/Accordion/web/Small.jsx b/packages/yoga/src/Accordion/web/Small.jsx
index ca8247923f..35bd58ac13 100644
--- a/packages/yoga/src/Accordion/web/Small.jsx
+++ b/packages/yoga/src/Accordion/web/Small.jsx
@@ -8,6 +8,4 @@ function AccordionSmall(props) {
 
 AccordionSmall.propTypes = Accordion.propTypes;
 
-AccordionSmall.defaultProps = Accordion.defaultProps;
-
 export default AccordionSmall;
diff --git a/packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx b/packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx
index 9e4836bca7..3bb7b712c9 100644
--- a/packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx
+++ b/packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx
@@ -57,7 +57,7 @@ function ActionRequirement(props) {
     checkable,
     illustration,
     list,
-    titleAsTextDisplay,
+    titleAsTextDisplay = false,
   } = props;
 
   let primaryButton;
@@ -106,12 +106,4 @@ ActionRequirement.propTypes = {
   titleAsTextDisplay: bool,
 };
 
-ActionRequirement.defaultProps = {
-  children: undefined,
-  checkable: undefined,
-  illustration: undefined,
-  list: undefined,
-  titleAsTextDisplay: false,
-};
-
 export default ActionRequirement;
diff --git a/packages/yoga/src/AutoComplete/web/AutoComplete.jsx b/packages/yoga/src/AutoComplete/web/AutoComplete.jsx
index cd823648a9..94f0b963be 100644
--- a/packages/yoga/src/AutoComplete/web/AutoComplete.jsx
+++ b/packages/yoga/src/AutoComplete/web/AutoComplete.jsx
@@ -147,22 +147,25 @@ const Match = styled.mark`
   `}
 `;
 
+const noop = () => {};
+const emptyArr = [];
+
 /** The autocomplete is a normal input field enhanced by a panel of suggested options. */
 const AutoComplete = React.forwardRef(
   (
     {
       className,
       style,
-      full,
-      options,
-      onChange,
-      onClean,
-      onSelect,
+      full = false,
+      options = emptyArr,
+      onChange = noop,
+      onClean = noop,
+      onSelect = noop,
       value,
       error,
-      openSuggestionsAriaLabel,
-      closeSuggestionsAriaLabel,
-      shouldFilterOptions,
+      openSuggestionsAriaLabel = 'Open suggestions',
+      closeSuggestionsAriaLabel = 'Close suggestions',
+      shouldFilterOptions = true,
       ...props
     },
     ref,
@@ -333,19 +336,4 @@ AutoComplete.propTypes = {
   shouldFilterOptions: bool,
 };
 
-AutoComplete.defaultProps = {
-  className: undefined,
-  full: false,
-  options: [],
-  style: undefined,
-  onSelect: () => {},
-  onChange: () => {},
-  onClean: () => {},
-  value: undefined,
-  error: undefined,
-  openSuggestionsAriaLabel: 'Open suggestions',
-  closeSuggestionsAriaLabel: 'Close suggestions',
-  shouldFilterOptions: true,
-};
-
 export default AutoComplete;
diff --git a/packages/yoga/src/Avatar/web/Avatar.jsx b/packages/yoga/src/Avatar/web/Avatar.jsx
index 5bc639a675..5e990efd78 100644
--- a/packages/yoga/src/Avatar/web/Avatar.jsx
+++ b/packages/yoga/src/Avatar/web/Avatar.jsx
@@ -30,7 +30,15 @@ const Content = ({ icon, alt, src, fill, content, stroke }) => {
  */
 const Avatar = forwardRef(
   (
-    { src, alt, fill, stroke, icon = BuildingFilled, children, ...otherProps },
+    {
+      src,
+      alt,
+      fill = 'white',
+      stroke,
+      icon = BuildingFilled,
+      children,
+      ...otherProps
+    },
     ref,
   ) => {
     return (
@@ -68,13 +76,6 @@ Content.propTypes = {
   ...Box.propTypes,
 };
 
-Content.defaultProps = {
-  src: undefined,
-  fill: 'white',
-  alt: undefined,
-  icon: undefined,
-};
-
 Avatar.propTypes = {
   src: string,
   /**  Required if src is true */
@@ -111,14 +112,6 @@ Avatar.propTypes = {
   ...Box.propTypes,
 };
 
-Avatar.defaultProps = {
-  src: undefined,
-  alt: undefined,
-  icon: undefined,
-  fill: 'white',
-  stroke: undefined,
-  ...Box.defaultProps,
-};
 Avatar.displayName = 'Avatar';
 
 export default Avatar;
diff --git a/packages/yoga/src/Avatar/web/AvatarCircle.jsx b/packages/yoga/src/Avatar/web/AvatarCircle.jsx
index aa7eb2d6ec..d1074fd86d 100644
--- a/packages/yoga/src/Avatar/web/AvatarCircle.jsx
+++ b/packages/yoga/src/Avatar/web/AvatarCircle.jsx
@@ -16,8 +16,6 @@ const AvatarCircle = forwardRef(({ src, alt = '', ...props }, ref) => (
 
 AvatarCircle.propTypes = Avatar.propTypes;
 
-AvatarCircle.defaultProps = Avatar.defaultProps;
-
 AvatarCircle.displayName = 'Avatar.Circle';
 
 export default AvatarCircle;
diff --git a/packages/yoga/src/Banner/web/Banner.jsx b/packages/yoga/src/Banner/web/Banner.jsx
index 0bd20dfd7e..74495ead5b 100644
--- a/packages/yoga/src/Banner/web/Banner.jsx
+++ b/packages/yoga/src/Banner/web/Banner.jsx
@@ -68,8 +68,14 @@ BannerActionButton.propTypes = {
 
 /** A banner is a component that displays a prominent message. It can have related action buttons on it or not. */
 const Banner = forwardRef((props, ref) => {
-  const { icon, variant, message, primaryButton, secondaryButton, ...rest } =
-    props;
+  const {
+    icon,
+    variant = 'informative',
+    message,
+    primaryButton,
+    secondaryButton,
+    ...rest
+  } = props;
 
   return (
     <StyledBanner ref={ref} variant={variant} {...rest}>
@@ -137,11 +143,4 @@ Banner.propTypes = {
   },
 };
 
-Banner.defaultProps = {
-  icon: undefined,
-  variant: 'informative',
-  primaryButton: undefined,
-  secondaryButton: undefined,
-};
-
 export default Banner;
diff --git a/packages/yoga/src/BottomSheet/web/__snapshots__/BottomSheet.test.jsx.snap b/packages/yoga/src/BottomSheet/web/__snapshots__/BottomSheet.test.jsx.snap
index 238bd92b26..8978849a06 100644
--- a/packages/yoga/src/BottomSheet/web/__snapshots__/BottomSheet.test.jsx.snap
+++ b/packages/yoga/src/BottomSheet/web/__snapshots__/BottomSheet.test.jsx.snap
@@ -100,7 +100,7 @@ exports[`<BottomSheet /> should match snapshot 1`] = `
 }
 
 .c1 {
-  padding: 16px  16px 16px  16px;
+  padding: 16px 16px 16px 16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
   border-radius: 8px;
   background-color: #FFFFFF;
diff --git a/packages/yoga/src/Button/web/Button.jsx b/packages/yoga/src/Button/web/Button.jsx
index 14a84457cd..63b0b9b747 100644
--- a/packages/yoga/src/Button/web/Button.jsx
+++ b/packages/yoga/src/Button/web/Button.jsx
@@ -11,19 +11,21 @@ const SpinnerContainer = styled.div`
   transform: translate(-50%, -50%);
 `;
 
+const noop = () => {};
+
 /** Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them. */
 const Button = forwardRef(
   (
     {
-      children,
-      onClick,
-      full,
-      disabled,
-      inverted,
-      small,
-      secondary,
+      children = 'Button',
+      onClick = noop,
+      full = false,
+      disabled = undefined,
+      inverted = false,
+      small = false,
+      secondary = false,
       icon: Icon,
-      isLoading,
+      isLoading = false,
       ...props
     },
     ref,
@@ -77,20 +79,6 @@ Button.propTypes = {
   href: string,
 };
 
-Button.defaultProps = {
-  ariaLabel: undefined,
-  children: 'Button',
-  disabled: undefined,
-  full: false,
-  inverted: false,
-  isLoading: false,
-  onClick: () => {},
-  small: false,
-  secondary: false,
-  icon: undefined,
-  href: undefined,
-};
-
 Button.displayName = 'Button';
 
 export default Button;
diff --git a/packages/yoga/src/Button/web/Icon.jsx b/packages/yoga/src/Button/web/Icon.jsx
index 4724766b78..b09db437ca 100644
--- a/packages/yoga/src/Button/web/Icon.jsx
+++ b/packages/yoga/src/Button/web/Icon.jsx
@@ -38,9 +38,11 @@ const ButtonIcon = forwardRef(
           components: { button },
         },
       },
-      small,
+      small = false,
       disabled,
-      isLoading,
+      isLoading = false,
+      secondary = false,
+      inverted = false,
       ...props
     },
     ref,
@@ -48,6 +50,8 @@ const ButtonIcon = forwardRef(
     return (
       <IconStyled
         {...props}
+        secondary={secondary}
+        inverted={inverted}
         ref={ref}
         small={small}
         disabled={disabled || isLoading}
@@ -76,15 +80,6 @@ ButtonIcon.propTypes = {
   isLoading: bool,
 };
 
-ButtonIcon.defaultProps = {
-  small: false,
-  disabled: undefined,
-  secondary: false,
-  inverted: false,
-  icon: undefined,
-  isLoading: false,
-};
-
 ButtonIcon.displayName = 'Button.Icon';
 
 export default withTheme(ButtonIcon);
diff --git a/packages/yoga/src/Button/web/Link.jsx b/packages/yoga/src/Button/web/Link.jsx
index db8986f0ad..d6eade68f3 100644
--- a/packages/yoga/src/Button/web/Link.jsx
+++ b/packages/yoga/src/Button/web/Link.jsx
@@ -87,7 +87,7 @@ const Link = styled(Button)`
   }}
 `;
 
-const ButtonLink = forwardRef(({ ...rest }, ref) => {
+const ButtonLink = forwardRef(({ secondary = false, ...rest }, ref) => {
   const props = Object.fromEntries(
     Object.entries(rest).filter(([key]) => key !== 'isLoading'),
   );
@@ -95,7 +95,13 @@ const ButtonLink = forwardRef(({ ...rest }, ref) => {
   const { disabled } = props;
 
   return (
-    <Link {...props} disabled={disabled} aria-disabled={disabled} ref={ref} />
+    <Link
+      {...props}
+      secondary={secondary}
+      disabled={disabled}
+      aria-disabled={disabled}
+      ref={ref}
+    />
   );
 });
 
@@ -107,13 +113,6 @@ ButtonLink.propTypes = {
   icon: oneOfType([node, func]),
 };
 
-ButtonLink.defaultProps = {
-  disabled: undefined,
-  secondary: false,
-  href: undefined,
-  icon: undefined,
-};
-
 ButtonLink.displayName = 'Button.Link';
 
 export default ButtonLink;
diff --git a/packages/yoga/src/Button/web/Text.jsx b/packages/yoga/src/Button/web/Text.jsx
index 1a9b50edeb..04f8e60c93 100644
--- a/packages/yoga/src/Button/web/Text.jsx
+++ b/packages/yoga/src/Button/web/Text.jsx
@@ -113,7 +113,7 @@ const ButtonText = forwardRef(({ ...rest }, ref) => {
     Object.entries(rest).filter(([key]) => key !== 'isLoading'),
   );
 
-  const { secondary, inverted } = props;
+  const { secondary = false, inverted = false } = props;
 
   return (
     <StyledButton
@@ -130,11 +130,6 @@ ButtonText.propTypes = {
   secondary: bool,
 };
 
-ButtonText.defaultProps = {
-  inverted: false,
-  secondary: false,
-};
-
 ButtonText.displayName = 'Button.Text';
 
 export default ButtonText;
diff --git a/packages/yoga/src/Card/web/Card/Card.jsx b/packages/yoga/src/Card/web/Card/Card.jsx
index e4a5b4cbcc..3f37ea1abc 100644
--- a/packages/yoga/src/Card/web/Card/Card.jsx
+++ b/packages/yoga/src/Card/web/Card/Card.jsx
@@ -19,10 +19,10 @@ const CardStyled = styled.section`
   ${
     hasShadow
       ? `
-          padding: 
-            ${card.padding.top}px 
+          padding:
+            ${card.padding.top}px
             ${card.padding.right}px
-            ${card.padding.bottom}px 
+            ${card.padding.bottom}px
             ${card.padding.left}px;
           box-shadow: ${card.elevation};
         `
@@ -54,12 +54,12 @@ const Ribbon = styled(Text.Tiny)`
   margin-left: -${card.padding.left}px;
   margin-bottom: ${card.padding.bottom}px;
 
-  padding: 
+  padding:
     ${spacing.xxxsmall}px
     ${spacing.xsmall}px
     ${spacing.xxxsmall}px
     ${spacing.small}px;
-  
+
   border-top-right-radius: ${card.ribbon.radius}px;
   border-bottom-right-radius: ${card.ribbon.radius}px;
 
@@ -69,16 +69,20 @@ const Ribbon = styled(Text.Tiny)`
   `}
 `;
 
-const Card = React.forwardRef(({ ribbon, children, ...rest }, ref) => (
-  <CardStyled ref={ref} {...rest}>
-    {Object.keys(ribbon).length > 0 && (
-      <Ribbon variant={ribbon.variant} as="span">
-        {ribbon.text}
-      </Ribbon>
-    )}
-    {children}
-  </CardStyled>
-));
+const emptyObj = {};
+
+const Card = React.forwardRef(
+  ({ ribbon = emptyObj, children = null, hasShadow = true, ...rest }, ref) => (
+    <CardStyled ref={ref} hasShadow={hasShadow} {...rest}>
+      {Object.keys(ribbon).length > 0 && (
+        <Ribbon variant={ribbon.variant} as="span">
+          {ribbon.text}
+        </Ribbon>
+      )}
+      {children}
+    </CardStyled>
+  ),
+);
 
 Card.propTypes = {
   /** text: the content inside the Card Ribbon.
@@ -113,12 +117,6 @@ Card.propTypes = {
   hasShadow: bool,
 };
 
-Card.defaultProps = {
-  ribbon: {},
-  children: null,
-  hasShadow: true,
-};
-
 Card.displayName = 'Card';
 
 export default Card;
diff --git a/packages/yoga/src/Card/web/Card/__snapshots__/Card.test.jsx.snap b/packages/yoga/src/Card/web/Card/__snapshots__/Card.test.jsx.snap
index 14051fdbc1..e53f82a306 100644
--- a/packages/yoga/src/Card/web/Card/__snapshots__/Card.test.jsx.snap
+++ b/packages/yoga/src/Card/web/Card/__snapshots__/Card.test.jsx.snap
@@ -64,7 +64,7 @@ exports[`<Card /> Snapshots should match snapshot with default Card 1`] = `
 }
 
 .c0 {
-  padding: 16px  16px 16px  16px;
+  padding: 16px 16px 16px 16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
   border-radius: 8px;
   background-color: #FFFFFF;
diff --git a/packages/yoga/src/Card/web/PlanCard/Content.jsx b/packages/yoga/src/Card/web/PlanCard/Content.jsx
index d54e0a673c..4a299e84ce 100644
--- a/packages/yoga/src/Card/web/PlanCard/Content.jsx
+++ b/packages/yoga/src/Card/web/PlanCard/Content.jsx
@@ -77,15 +77,15 @@ const EnhancePrice = styled(Text.Medium)`
 
 const PlanCardContent = ({
   title,
-  badgeColor,
-  subtitle,
-  description,
-  currency,
-  suffix,
-  price,
-  period,
-  extra,
-  children,
+  badgeColor = null,
+  subtitle = null,
+  description = null,
+  currency = null,
+  suffix = null,
+  price = null,
+  period = null,
+  extra = null,
+  children = null,
   ...rest
 }) => (
   <Wrapper {...rest}>
@@ -128,18 +128,6 @@ PlanCardContent.propTypes = {
   badgeColor: string,
 };
 
-PlanCardContent.defaultProps = {
-  children: null,
-  description: null,
-  subtitle: null,
-  currency: null,
-  suffix: null,
-  price: null,
-  period: null,
-  extra: null,
-  badgeColor: null,
-};
-
 PlanCardContent.displayName = 'PlanCard.Content';
 
 export default PlanCardContent;
diff --git a/packages/yoga/src/Card/web/PlanCard/List.jsx b/packages/yoga/src/Card/web/PlanCard/List.jsx
index 1c29426e10..96b6f378e1 100644
--- a/packages/yoga/src/Card/web/PlanCard/List.jsx
+++ b/packages/yoga/src/Card/web/PlanCard/List.jsx
@@ -89,12 +89,14 @@ const Button = styled.button`
   ${truncateStyle}
 `;
 
+const emptyObj = {};
+
 const ListItem = withTheme(props => {
   const {
     text,
-    truncate,
+    truncate = true,
     icon: Icon,
-    buttonProps,
+    buttonProps = emptyObj,
     theme: yogaTheme,
     children,
     onClick,
@@ -146,12 +148,4 @@ ListItem.propTypes = {
   truncate: bool,
 };
 
-ListItem.defaultProps = {
-  truncate: true,
-  icon: undefined,
-  buttonProps: {},
-  onClick: undefined,
-  children: undefined,
-};
-
 export { List, ListItem };
diff --git a/packages/yoga/src/Card/web/PlanCard/PlanCard.jsx b/packages/yoga/src/Card/web/PlanCard/PlanCard.jsx
index dd6fe7dc5e..7737d7769d 100644
--- a/packages/yoga/src/Card/web/PlanCard/PlanCard.jsx
+++ b/packages/yoga/src/Card/web/PlanCard/PlanCard.jsx
@@ -111,7 +111,7 @@ const DiscountWrapper = styled(Box).attrs({
   }}
 `;
 
-function PlanCard({ children, discount, variant, ...rest }) {
+function PlanCard({ children, discount, variant = 'deepPurple', ...rest }) {
   const hasDiscount = !!discount;
 
   return (
@@ -135,12 +135,6 @@ PlanCard.propTypes = {
   variant: string,
 };
 
-PlanCard.defaultProps = {
-  children: undefined,
-  discount: undefined,
-  variant: 'deepPurple',
-};
-
 PlanCard.displayName = 'PlanCard';
 
 export default PlanCard;
diff --git a/packages/yoga/src/Checkbox/web/Checkbox.jsx b/packages/yoga/src/Checkbox/web/Checkbox.jsx
index dd1331f4c7..e9ad833b5b 100644
--- a/packages/yoga/src/Checkbox/web/Checkbox.jsx
+++ b/packages/yoga/src/Checkbox/web/Checkbox.jsx
@@ -240,13 +240,13 @@ const Checkbox = ({
   value,
   label,
   helper,
-  disabled,
-  checked,
+  disabled = false,
+  checked = false,
   error,
   style,
   className,
-  inverted,
-  indeterminate,
+  inverted = false,
+  indeterminate = false,
   ariaLabel,
   theme: {
     yoga: {
@@ -340,20 +340,6 @@ Checkbox.propTypes = {
   ariaLabel: string,
 };
 
-Checkbox.defaultProps = {
-  label: undefined,
-  value: undefined,
-  helper: undefined,
-  checked: false,
-  disabled: false,
-  inverted: false,
-  indeterminate: false,
-  error: undefined,
-  style: undefined,
-  className: undefined,
-  ariaLabel: undefined,
-};
-
 Checkbox.displayName = 'Checkbox';
 
 export default withTheme(Checkbox);
diff --git a/packages/yoga/src/Checkbox/web/Switch.jsx b/packages/yoga/src/Checkbox/web/Switch.jsx
index 0d6c737b32..ed628934fd 100644
--- a/packages/yoga/src/Checkbox/web/Switch.jsx
+++ b/packages/yoga/src/Checkbox/web/Switch.jsx
@@ -123,21 +123,30 @@ const SwitchThumb = styled.span`
     `};
 `;
 
+const noop = () => {};
+
 /** Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting. */
-const CheckboxSwitch = ({ checked, disabled, onChange, ...rest }) => (
-  <SwitchTrack checked={checked} disabled={disabled} {...rest}>
-    <SwitchInput
-      type="checkbox"
-      role="switch"
-      disabled={disabled}
-      aria-hidden
-      aria-checked={checked}
-      aria-readonly={disabled}
-      onChange={onChange}
-    />
-    <SwitchThumb role="button" checked={checked} disabled={disabled} />
-  </SwitchTrack>
-);
+function CheckboxSwitch({
+  checked = false,
+  disabled = false,
+  onChange = noop,
+  ...rest
+}) {
+  return (
+    <SwitchTrack checked={checked} disabled={disabled} {...rest}>
+      <SwitchInput
+        type="checkbox"
+        role="switch"
+        disabled={disabled}
+        aria-hidden
+        aria-checked={checked}
+        aria-readonly={disabled}
+        onChange={onChange}
+      />
+      <SwitchThumb role="button" checked={checked} disabled={disabled} />
+    </SwitchTrack>
+  );
+}
 
 CheckboxSwitch.propTypes = {
   checked: bool,
@@ -145,12 +154,6 @@ CheckboxSwitch.propTypes = {
   onChange: func,
 };
 
-CheckboxSwitch.defaultProps = {
-  checked: false,
-  disabled: false,
-  onChange: () => {},
-};
-
 CheckboxSwitch.displayName = 'Checkbox.Switch';
 
 export default CheckboxSwitch;
diff --git a/packages/yoga/src/Chips/web/Chips.jsx b/packages/yoga/src/Chips/web/Chips.jsx
index de7e4ef019..7c25f8b3ea 100644
--- a/packages/yoga/src/Chips/web/Chips.jsx
+++ b/packages/yoga/src/Chips/web/Chips.jsx
@@ -68,9 +68,9 @@ const Wrapper = styled.button`
         p {
           color: ${colors.white};
         }
-        
+
         background-color: ${colors.secondary};
-        
+
 
         border-color: transparent;
 
@@ -115,14 +115,16 @@ const Wrapper = styled.button`
   }}
 `;
 
+const emptyArr = [];
+
 const Chips = React.forwardRef(
   (
     {
       children,
-      selected,
+      selected = false,
       counter,
-      icons,
-      disabled,
+      icons = emptyArr,
+      disabled = false,
       onToggle,
       onClick = onToggle,
       theme: {
@@ -193,14 +195,4 @@ Chips.propTypes = {
   onClick: func,
 };
 
-Chips.defaultProps = {
-  children: undefined,
-  selected: false,
-  disabled: false,
-  counter: undefined,
-  icons: [],
-  onToggle: undefined,
-  onClick: undefined,
-};
-
 export default withTheme(Chips);
diff --git a/packages/yoga/src/Datepicker/web/Calendar.jsx b/packages/yoga/src/Datepicker/web/Calendar.jsx
index a6204dcdb8..62fd604425 100644
--- a/packages/yoga/src/Datepicker/web/Calendar.jsx
+++ b/packages/yoga/src/Datepicker/web/Calendar.jsx
@@ -183,10 +183,10 @@ function Calendar({
   type,
   startDate,
   endDate,
-  onSelectSingle,
-  onSelectRange,
-  disablePastDates,
-  disableFutureDates,
+  onSelectSingle = null,
+  onSelectRange = null,
+  disablePastDates = false,
+  disableFutureDates = false,
   disablePastFrom,
   disableFutureFrom,
 }) {
@@ -433,15 +433,4 @@ Calendar.propTypes = {
   disableFutureFrom: instanceOf(Date),
 };
 
-Calendar.defaultProps = {
-  startDate: undefined,
-  endDate: undefined,
-  onSelectSingle: null,
-  onSelectRange: null,
-  disablePastDates: false,
-  disableFutureDates: false,
-  disablePastFrom: undefined,
-  disableFutureFrom: undefined,
-};
-
 export default Calendar;
diff --git a/packages/yoga/src/Datepicker/web/Datepicker.jsx b/packages/yoga/src/Datepicker/web/Datepicker.jsx
index 51e7c7229f..11c1dec747 100644
--- a/packages/yoga/src/Datepicker/web/Datepicker.jsx
+++ b/packages/yoga/src/Datepicker/web/Datepicker.jsx
@@ -165,23 +165,24 @@ const ErrorWrapper = styled(Text.Small)`
 export const toUTC = date => {
   return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
 };
+
 function Datepicker({
-  fullWidth,
+  fullWidth = false,
   type,
   placeholder,
   startDate,
   endDate,
   onSelectSingle,
-  disabled,
+  disabled = false,
   onSelectRange,
   customOnSelectRange,
-  disablePastDates,
-  disableFutureDates,
+  disablePastDates = false,
+  disableFutureDates = false,
   disablePastFrom,
   disableFutureFrom,
   error,
   onOpen,
-  displayEndDateOnly,
+  displayEndDateOnly = false,
   ...props
 }) {
   const [open, setOpen] = useState();
@@ -351,22 +352,4 @@ Datepicker.propTypes = {
   displayEndDateOnly: bool,
 };
 
-Datepicker.defaultProps = {
-  fullWidth: false,
-  placeholder: undefined,
-  startDate: undefined,
-  endDate: undefined,
-  disabled: false,
-  onSelectSingle: undefined,
-  onSelectRange: undefined,
-  customOnSelectRange: undefined,
-  disablePastDates: false,
-  disableFutureDates: false,
-  disablePastFrom: undefined,
-  disableFutureFrom: undefined,
-  error: undefined,
-  onOpen: undefined,
-  displayEndDateOnly: false,
-};
-
 export default Datepicker;
diff --git a/packages/yoga/src/Dialog/web/Dialog.jsx b/packages/yoga/src/Dialog/web/Dialog.jsx
index eec0645c8f..f413e24bee 100644
--- a/packages/yoga/src/Dialog/web/Dialog.jsx
+++ b/packages/yoga/src/Dialog/web/Dialog.jsx
@@ -81,12 +81,12 @@ const CloseButton = styled(Button.Icon)`
 const Dialog = React.forwardRef(
   (
     {
-      isOpen,
-      hideCloseButton,
+      isOpen = false,
+      hideCloseButton = false,
       children,
       dialogId,
       onClose,
-      zIndex,
+      zIndex = 3,
       closeLabel,
       className,
       ...props
@@ -182,16 +182,6 @@ Dialog.propTypes = {
   children: node.isRequired,
 };
 
-Dialog.defaultProps = {
-  isOpen: false,
-  hideCloseButton: false,
-  onClose: undefined,
-  closeLabel: undefined,
-  className: undefined,
-  zIndex: 3,
-  dialogId: undefined,
-};
-
 Dialog.displayName = 'Dialog';
 
 export default Dialog;
diff --git a/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap b/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap
index 261d3fbd3a..6ab7002e91 100644
--- a/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap
+++ b/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap
@@ -100,7 +100,7 @@ exports[`<Dialog /> should match snapshot 1`] = `
 }
 
 .c1 {
-  padding: 16px  16px 16px  16px;
+  padding: 16px 16px 16px 16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
   border-radius: 8px;
   background-color: #FFFFFF;
@@ -410,7 +410,7 @@ exports[`<Dialog /> should match snapshot with close button 1`] = `
 }
 
 .c1 {
-  padding: 16px  16px 16px  16px;
+  padding: 16px 16px 16px 16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
   border-radius: 8px;
   background-color: #FFFFFF;
diff --git a/packages/yoga/src/Divider/web/Divider.jsx b/packages/yoga/src/Divider/web/Divider.jsx
index 0a2b80cacd..81ed9c118b 100644
--- a/packages/yoga/src/Divider/web/Divider.jsx
+++ b/packages/yoga/src/Divider/web/Divider.jsx
@@ -20,11 +20,13 @@ const StyledDivider = styled.hr`
   }}
 `;
 
-const Divider = React.forwardRef(({ vertical, style, ...props }, ref) => {
-  return (
-    <StyledDivider vertical={vertical} ref={ref} style={style} {...props} />
-  );
-});
+const Divider = React.forwardRef(
+  ({ vertical = false, style, ...props }, ref) => {
+    return (
+      <StyledDivider vertical={vertical} ref={ref} style={style} {...props} />
+    );
+  },
+);
 
 Divider.propTypes = {
   /** If this value is defined, the divider will be in vertical if the flexDirection is row type */
@@ -32,9 +34,4 @@ Divider.propTypes = {
   style: shape({}),
 };
 
-Divider.defaultProps = {
-  vertical: false,
-  style: undefined,
-};
-
 export default withTheme(Divider);
diff --git a/packages/yoga/src/Drawer/web/Drawer.jsx b/packages/yoga/src/Drawer/web/Drawer.jsx
index 5895e55b89..2ac629a125 100644
--- a/packages/yoga/src/Drawer/web/Drawer.jsx
+++ b/packages/yoga/src/Drawer/web/Drawer.jsx
@@ -30,8 +30,8 @@ const StyledDrawer = styled(Dialog)`
   }
 `;
 
-const Drawer = React.forwardRef((props, forwardedRef) => (
-  <StyledDrawer {...props} ref={forwardedRef} />
+const Drawer = React.forwardRef(({ zIndex = 3, ...rest }, forwardedRef) => (
+  <StyledDrawer {...rest} zIndex={zIndex} ref={forwardedRef} />
 ));
 
 Drawer.propTypes = {
@@ -39,8 +39,4 @@ Drawer.propTypes = {
   zIndex: number,
 };
 
-Drawer.defaultProps = {
-  zIndex: 3,
-};
-
 export default Drawer;
diff --git a/packages/yoga/src/Drawer/web/__snapshots__/Drawer.test.jsx.snap b/packages/yoga/src/Drawer/web/__snapshots__/Drawer.test.jsx.snap
index 6d114e07ba..b9a688f4b4 100644
--- a/packages/yoga/src/Drawer/web/__snapshots__/Drawer.test.jsx.snap
+++ b/packages/yoga/src/Drawer/web/__snapshots__/Drawer.test.jsx.snap
@@ -89,7 +89,7 @@ exports[`<Drawer /> should match snapshot 1`] = `
 }
 
 .c1 {
-  padding: 16px  16px 16px  16px;
+  padding: 16px 16px 16px 16px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
   border-radius: 8px;
   background-color: #FFFFFF;
diff --git a/packages/yoga/src/Dropdown/web/Dropdown.jsx b/packages/yoga/src/Dropdown/web/Dropdown.jsx
index 82ccca5879..8a6054dee4 100644
--- a/packages/yoga/src/Dropdown/web/Dropdown.jsx
+++ b/packages/yoga/src/Dropdown/web/Dropdown.jsx
@@ -28,7 +28,7 @@ const Wrapper = styled.div`
     position: relative;
     display: inline-block;
     vertical-align: top;
-    
+
     width: ${full ? '100%' : `${dropdown.width}px`};
   `}
 `;
@@ -267,10 +267,21 @@ const ArrowIcon = styled(({ isOpen, selected, ...props }) => (
   `}
 `;
 
+const noop = () => {};
+
 /** Gympass Dropdown is a multiple choice type of menu. */
 const Dropdown = React.forwardRef(
   (
-    { error, label, disabled, full, options, onChange, isMaxHeight, ...rest },
+    {
+      error,
+      label = '',
+      disabled = false,
+      full = false,
+      options,
+      onChange = noop,
+      isMaxHeight = true,
+      ...rest
+    },
     ref,
   ) => {
     const inputRef = ref || React.useRef(null);
@@ -382,13 +393,4 @@ Dropdown.propTypes = {
   isMaxHeight: bool,
 };
 
-Dropdown.defaultProps = {
-  label: '',
-  error: undefined,
-  full: false,
-  disabled: false,
-  onChange: () => {},
-  isMaxHeight: true,
-};
-
 export default Dropdown;
diff --git a/packages/yoga/src/Feedback/web/Feedback.jsx b/packages/yoga/src/Feedback/web/Feedback.jsx
index 2d6e607b09..07f476d5b8 100644
--- a/packages/yoga/src/Feedback/web/Feedback.jsx
+++ b/packages/yoga/src/Feedback/web/Feedback.jsx
@@ -35,7 +35,14 @@ function isChildFromComponent(child, component) {
   return child.type.displayName === component.displayName;
 }
 
-function Feedback({ variant, title, description, children, center, ...props }) {
+function Feedback({
+  variant,
+  title,
+  description,
+  children,
+  center = true,
+  ...props
+}) {
   const iconProps = VARIANT_ICONS[variant];
   let primaryButton;
   let secondaryButton;
@@ -99,10 +106,4 @@ Feedback.propTypes = {
   center: bool,
 };
 
-Feedback.defaultProps = {
-  title: undefined,
-  children: undefined,
-  center: true,
-};
-
 export default Feedback;
diff --git a/packages/yoga/src/Grid/web/Col.jsx b/packages/yoga/src/Grid/web/Col.jsx
index 1399b76d9b..6d76d6b9de 100644
--- a/packages/yoga/src/Grid/web/Col.jsx
+++ b/packages/yoga/src/Grid/web/Col.jsx
@@ -60,24 +60,4 @@ Col.propTypes = {
   'xxxl-start': number,
 };
 
-Col.defaultProps = {
-  hide: undefined,
-  xxs: undefined,
-  xs: undefined,
-  sm: undefined,
-  md: undefined,
-  lg: undefined,
-  xl: undefined,
-  xxl: undefined,
-  xxxl: undefined,
-  'xxs-start': undefined,
-  'xs-start': undefined,
-  'sm-start': undefined,
-  'md-start': undefined,
-  'lg-start': undefined,
-  'xl-start': undefined,
-  'xxl-start': undefined,
-  'xxxl-start': undefined,
-};
-
 export default Col;
diff --git a/packages/yoga/src/Grid/web/Hide.jsx b/packages/yoga/src/Grid/web/Hide.jsx
index f8a5cb3d15..8cbefc6429 100644
--- a/packages/yoga/src/Grid/web/Hide.jsx
+++ b/packages/yoga/src/Grid/web/Hide.jsx
@@ -5,8 +5,27 @@ import { media } from '@gympass/yoga-helpers';
 
 const { breakpoints } = tokens;
 
+const defaultProps = {
+  xxs: undefined,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined,
+  xxl: undefined,
+  xxxl: undefined,
+  'xxs-start': undefined,
+  'xs-start': undefined,
+  'sm-start': undefined,
+  'md-start': undefined,
+  'lg-start': undefined,
+  'xl-start': undefined,
+  'xxl-start': undefined,
+  'xxxl-start': undefined,
+};
+
 const Hide = styled.div`
-  ${props =>
+  ${(props = defaultProps) =>
     Object.keys(props)
       .filter(prop => props[prop] && Object.keys(breakpoints).includes(prop))
       .map(breakpoint => media.hide[breakpoint])}
diff --git a/packages/yoga/src/Header/web/Header.jsx b/packages/yoga/src/Header/web/Header.jsx
index 9c40a2063d..a2babb6934 100644
--- a/packages/yoga/src/Header/web/Header.jsx
+++ b/packages/yoga/src/Header/web/Header.jsx
@@ -26,7 +26,7 @@ const StyledHeader = styled(Box)`
   `}
 `;
 
-const Header = ({ link, logo, children, ...props }) => {
+const Header = ({ link = null, logo = null, children = null, ...props }) => {
   return (
     <StyledHeader
       as="header"
@@ -58,10 +58,4 @@ Header.propTypes = {
   logo: elementType,
 };
 
-Header.defaultProps = {
-  link: null,
-  children: null,
-  logo: null,
-};
-
 export default Header;
diff --git a/packages/yoga/src/Header/web/Logo.jsx b/packages/yoga/src/Header/web/Logo.jsx
index 88e6228751..28e138bf73 100644
--- a/packages/yoga/src/Header/web/Logo.jsx
+++ b/packages/yoga/src/Header/web/Logo.jsx
@@ -3,15 +3,11 @@ import { elementType } from 'prop-types';
 
 import GympassLogo from './GympassLogo';
 
-const Logo = ({ customLogo: CustomLogo }) =>
+const Logo = ({ customLogo: CustomLogo = null }) =>
   CustomLogo ? <CustomLogo /> : <GympassLogo />;
 
 Logo.propTypes = {
   customLogo: elementType,
 };
 
-Logo.defaultProps = {
-  customLogo: null,
-};
-
 export default Logo;
diff --git a/packages/yoga/src/Heading/web/Heading.jsx b/packages/yoga/src/Heading/web/Heading.jsx
index e67ad86b09..6802f7f9c8 100644
--- a/packages/yoga/src/Heading/web/Heading.jsx
+++ b/packages/yoga/src/Heading/web/Heading.jsx
@@ -6,7 +6,7 @@ import Title from './Title';
 import BackButton from './BackButton';
 import RightButton from './RightButton';
 
-const Heading = ({ children, noPadding, ...props }) => {
+const Heading = ({ children, noPadding = false, ...props }) => {
   let backButton = null;
   let title = null;
   const rightButtons = [];
@@ -46,10 +46,4 @@ Heading.propTypes = {
   bg: PropTypes.string,
 };
 
-Heading.defaultProps = {
-  children: undefined,
-  noPadding: false,
-  bg: undefined,
-};
-
 export default Heading;
diff --git a/packages/yoga/src/Icon/Icon.jsx b/packages/yoga/src/Icon/Icon.jsx
index 9bdd610fb2..381c910a41 100644
--- a/packages/yoga/src/Icon/Icon.jsx
+++ b/packages/yoga/src/Icon/Icon.jsx
@@ -14,7 +14,7 @@ import Box from '../Box';
 
 const Icon = ({
   as: Component,
-  size,
+  size = 12,
   width = size,
   height = size,
   fill,
@@ -139,15 +139,4 @@ Icon.propTypes = {
   size: oneOfType([oneOf(commonSizes), string, number]),
 };
 
-Icon.defaultProps = {
-  fill: undefined,
-  stroke: undefined,
-  title: undefined,
-  description: undefined,
-  ariaLabel: undefined,
-  width: undefined,
-  height: undefined,
-  size: 12,
-};
-
 export default withTheme(Icon);
diff --git a/packages/yoga/src/Input/web/Helper.jsx b/packages/yoga/src/Input/web/Helper.jsx
index 4a504e9deb..5754c1b9f6 100644
--- a/packages/yoga/src/Input/web/Helper.jsx
+++ b/packages/yoga/src/Input/web/Helper.jsx
@@ -71,14 +71,4 @@ Helper.propTypes = {
   a11yId: string,
 };
 
-Helper.defaultProps = {
-  disabled: undefined,
-  error: undefined,
-  helper: undefined,
-  maxLength: undefined,
-  length: undefined,
-  hideMaxLength: undefined,
-  a11yId: undefined,
-};
-
 export default Helper;
diff --git a/packages/yoga/src/Input/web/Input.jsx b/packages/yoga/src/Input/web/Input.jsx
index 15096169bf..5565172c6f 100644
--- a/packages/yoga/src/Input/web/Input.jsx
+++ b/packages/yoga/src/Input/web/Input.jsx
@@ -91,28 +91,30 @@ const LeftElementWrapper = styled.div`
   `}
 `;
 
+const noop = () => {};
+
 const Input = React.forwardRef(
   (
     {
-      cleanable,
+      cleanable = true,
       children,
-      disabled,
+      disabled = false,
       error,
-      full,
+      full = false,
       helper,
       label,
       ariaLabel,
       maxLength,
-      readOnly,
+      readOnly = false,
       style,
-      value,
-      onChange,
-      onClean,
-      hideMaxLength,
+      value = '',
+      onChange = noop,
+      onClean = noop,
+      hideMaxLength = false,
       rightIcon,
       a11yId,
-      closeAriaLabel,
-      includeAriaAttributes,
+      closeAriaLabel = 'Clear',
+      includeAriaAttributes = true,
       leftElement,
       ...props
     },
@@ -286,29 +288,4 @@ Input.propTypes = {
   leftElement: node,
 };
 
-Input.defaultProps = {
-  className: undefined,
-  children: undefined,
-  cleanable: true,
-  disabled: false,
-  error: undefined,
-  full: false,
-  helper: undefined,
-  label: undefined,
-  ariaLabel: undefined,
-  maxLength: undefined,
-  readOnly: false,
-  style: undefined,
-  value: '',
-  onChange: () => {},
-  onClean: () => {},
-  hideMaxLength: false,
-  placeholder: undefined,
-  rightIcon: undefined,
-  a11yId: undefined,
-  closeAriaLabel: 'Clear',
-  includeAriaAttributes: true,
-  leftElement: undefined,
-};
-
 export default Input;
diff --git a/packages/yoga/src/Input/web/Password.jsx b/packages/yoga/src/Input/web/Password.jsx
index 1fd6facfcc..4a6aac1c1e 100644
--- a/packages/yoga/src/Input/web/Password.jsx
+++ b/packages/yoga/src/Input/web/Password.jsx
@@ -81,10 +81,10 @@ const IconWrapper = styled.div`
 `;
 
 const Password = ({
-  disabled,
+  disabled = false,
   style,
   className,
-  full,
+  full = false,
   showPasswordAriaLabel,
   hidePasswordAriaLabel,
   ...props
@@ -151,13 +151,4 @@ Password.propTypes = {
   style: shape({}),
 };
 
-Password.defaultProps = {
-  className: undefined,
-  disabled: false,
-  full: false,
-  style: undefined,
-  showPasswordAriaLabel: undefined,
-  hidePasswordAriaLabel: undefined,
-};
-
 export default Password;
diff --git a/packages/yoga/src/Input/web/Phone.jsx b/packages/yoga/src/Input/web/Phone.jsx
index d14cc99d86..8db0affa5c 100644
--- a/packages/yoga/src/Input/web/Phone.jsx
+++ b/packages/yoga/src/Input/web/Phone.jsx
@@ -22,19 +22,22 @@ const phoneBaseSettings = {
   ],
 };
 
+const noop = () => {};
+
 const Phone = React.forwardRef(
   (
     {
-      defaultCountry,
-      disabled,
-      readOnly,
+      defaultCountry = 'br',
+      disabled = false,
+      readOnly = false,
       error,
-      full,
+      full = false,
       helper,
-      label,
-      placeholder,
-      value,
-      onChange,
+      label = '',
+      placeholder = '+55 (11) 999999999',
+      value = '',
+      onChange = noop,
+      cleanable = true,
       ...rest
     },
     forwardedRef,
@@ -57,6 +60,7 @@ const Phone = React.forwardRef(
           full,
           helper,
           value,
+          cleanable,
           ...rest,
         }}
         ref={inputRef}
@@ -113,19 +117,4 @@ Phone.propTypes = {
   placeholder: string,
 };
 
-Phone.defaultProps = {
-  className: undefined,
-  cleanable: true,
-  defaultCountry: 'br',
-  disabled: false,
-  error: undefined,
-  full: false,
-  helper: undefined,
-  label: '',
-  readOnly: false,
-  value: '',
-  onChange: () => {},
-  placeholder: '+55 (11) 999999999',
-};
-
 export default Phone;
diff --git a/packages/yoga/src/List/web/List.jsx b/packages/yoga/src/List/web/List.jsx
index 87af789d63..0857270c2f 100644
--- a/packages/yoga/src/List/web/List.jsx
+++ b/packages/yoga/src/List/web/List.jsx
@@ -42,20 +42,18 @@ const StyledList = styled.ul`
 /** Lists are a continuous group of text or images. They are composed of items
 containing primary and supplemental actions, which are represented by icons and
 text. */
-const List = React.forwardRef(({ horizontal, divided, ...rest }, ref) => (
-  <StyledList horizontal={horizontal} divided={divided} ref={ref} {...rest} />
-));
+
+const List = React.forwardRef(
+  ({ horizontal = false, divided = true, ...rest }, ref) => (
+    <StyledList horizontal={horizontal} divided={divided} ref={ref} {...rest} />
+  ),
+);
 
 List.propTypes = {
   horizontal: PropTypes.bool,
   divided: PropTypes.bool,
 };
 
-List.defaultProps = {
-  horizontal: false,
-  divided: true,
-};
-
 List.displayName = 'List';
 
 export default List;
diff --git a/packages/yoga/src/Menu/web/Menu.jsx b/packages/yoga/src/Menu/web/Menu.jsx
index 35cffc9387..345773a0d7 100644
--- a/packages/yoga/src/Menu/web/Menu.jsx
+++ b/packages/yoga/src/Menu/web/Menu.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Root as MenuRoot } from '@radix-ui/react-dropdown-menu';
 import { bool, node } from 'prop-types';
 
-const Menu = ({ children, onMouseHover }) => {
+const Menu = ({ children, onMouseHover = true }) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   function handleOpenMenu() {
@@ -32,10 +32,6 @@ Menu.propTypes = {
   onMouseHover: bool,
 };
 
-Menu.defaultProps = {
-  onMouseHover: true,
-};
-
 Menu.displayName = 'Menu';
 
 export default Menu;
diff --git a/packages/yoga/src/Menu/web/MenuItem.jsx b/packages/yoga/src/Menu/web/MenuItem.jsx
index c234063880..0da941274b 100644
--- a/packages/yoga/src/Menu/web/MenuItem.jsx
+++ b/packages/yoga/src/Menu/web/MenuItem.jsx
@@ -77,8 +77,8 @@ const MenuItem = forwardRef(
     {
       icon: Icon,
       href,
-      active,
-      disabled,
+      active = false,
+      disabled = false,
       iconColor,
       iconSize,
       children,
@@ -126,15 +126,6 @@ MenuItem.propTypes = {
   iconSize: string,
 };
 
-MenuItem.defaultProps = {
-  icon: undefined,
-  href: undefined,
-  disabled: false,
-  active: false,
-  iconColor: undefined,
-  iconSize: undefined,
-};
-
 MenuItem.displayName = 'Menu.Item';
 
 export default withTheme(MenuItem);
diff --git a/packages/yoga/src/Menu/web/MenuList.jsx b/packages/yoga/src/Menu/web/MenuList.jsx
index 0862903037..db810ff9e0 100644
--- a/packages/yoga/src/Menu/web/MenuList.jsx
+++ b/packages/yoga/src/Menu/web/MenuList.jsx
@@ -32,7 +32,17 @@ const StyledMenuList = styled(MenuListRoot)`
 `;
 
 const MenuList = forwardRef(
-  ({ children, align, alignOffset, side, sideOffset, zIndex }, ref) => {
+  (
+    {
+      children,
+      align = 'start',
+      alignOffset = 0,
+      side = 'bottom',
+      sideOffset = 4,
+      zIndex = 'auto',
+    },
+    ref,
+  ) => {
     return (
       <Portal>
         <StyledMenuList
@@ -72,14 +82,6 @@ MenuList.propTypes = {
   zIndex: string || number,
 };
 
-MenuList.defaultProps = {
-  align: 'start',
-  alignOffset: 0,
-  side: 'bottom',
-  sideOffset: 4,
-  zIndex: 'auto',
-};
-
 MenuList.displayName = 'Menu.List';
 
 export default MenuList;
diff --git a/packages/yoga/src/Menu/web/__snapshots__/Menu.test.jsx.snap b/packages/yoga/src/Menu/web/__snapshots__/Menu.test.jsx.snap
index cd26b14b8c..290a16d2dd 100644
--- a/packages/yoga/src/Menu/web/__snapshots__/Menu.test.jsx.snap
+++ b/packages/yoga/src/Menu/web/__snapshots__/Menu.test.jsx.snap
@@ -80,6 +80,7 @@ exports[`<Menu /> should match snapshot Menu with a onMouseHover props false 1`]
 
 <div>
   <button
+    aria-disabled="false"
     aria-expanded="false"
     aria-haspopup="menu"
     class="c0"
@@ -179,6 +180,7 @@ exports[`<Menu /> should match snapshot Menu with an align props end 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -279,6 +281,7 @@ exports[`<Menu /> should match snapshot Menu with an align props start 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -379,6 +382,7 @@ exports[`<Menu /> should match snapshot Menu.Item with active 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -479,6 +483,7 @@ exports[`<Menu /> should match snapshot Menu.Item with disabled 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -579,6 +584,7 @@ exports[`<Menu /> should match snapshot Menu.Item with disabled and icon 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -679,6 +685,7 @@ exports[`<Menu /> should match snapshot Menu.Item with icon 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -779,6 +786,7 @@ exports[`<Menu /> should match snapshot Menu.Item with link 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -879,6 +887,7 @@ exports[`<Menu /> should match snapshot in default Menu 1`] = `
 <div>
   <div>
     <button
+      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
diff --git a/packages/yoga/src/Popover/web/Popover.jsx b/packages/yoga/src/Popover/web/Popover.jsx
index bde10332f6..370e9e97a1 100644
--- a/packages/yoga/src/Popover/web/Popover.jsx
+++ b/packages/yoga/src/Popover/web/Popover.jsx
@@ -12,12 +12,12 @@ const Popover = React.forwardRef(
       children,
       title,
       description,
-      position,
-      width,
-      height,
-      zIndex,
+      position = 'bottom-center',
+      width = 265,
+      height = 200,
+      zIndex = 1,
       a11yId,
-      hover,
+      hover = false,
       ...props
     },
     forwardedRef,
@@ -114,14 +114,4 @@ Popover.propTypes = {
   hover: bool,
 };
 
-Popover.defaultProps = {
-  a11yId: undefined,
-  title: undefined,
-  position: 'bottom-center',
-  width: 265,
-  height: 200,
-  zIndex: 1,
-  hover: false,
-};
-
 export default Popover;
diff --git a/packages/yoga/src/Progress/web/Progress.jsx b/packages/yoga/src/Progress/web/Progress.jsx
index 27c29ed41c..b9ae30da37 100644
--- a/packages/yoga/src/Progress/web/Progress.jsx
+++ b/packages/yoga/src/Progress/web/Progress.jsx
@@ -80,8 +80,8 @@ const Wrapper = styled.div`
   width: 100%;
 
   ${({
-    isNumber,
-    align,
+    isNumber = false,
+    align = 'left',
     theme: {
       yoga: { spacing },
     },
@@ -131,16 +131,19 @@ Wrapper.propTypes = {
   isNumber: bool,
 };
 
-Wrapper.defaultProps = {
-  align: 'left',
-  isNumber: false,
+const defaultLabel = {
+  value: undefined,
+  placement: 'left',
 };
 
 /** The Progress is a component used to indicate a progress of an indicator
  * of quantity. The use of labels numeric or alphabetic can increase the user
  * understanding. */
 const Progress = React.forwardRef(
-  ({ label, max, value, variant, ...props }, ref) => {
+  (
+    { label = defaultLabel, max = 1, value, variant = 'verve', ...props },
+    ref,
+  ) => {
     const isNumber = !/[a-zA-Z]/g.test(label.value);
 
     return (
@@ -195,14 +198,4 @@ Progress.propTypes = {
   ]),
 };
 
-Progress.defaultProps = {
-  label: {
-    value: undefined,
-    placement: 'left',
-  },
-  max: 1,
-  value: undefined,
-  variant: 'verve',
-};
-
 export default Progress;
diff --git a/packages/yoga/src/RadioGroup/web/Button/RadioButton.jsx b/packages/yoga/src/RadioGroup/web/Button/RadioButton.jsx
index d1536957c6..5ce73f86cb 100644
--- a/packages/yoga/src/RadioGroup/web/Button/RadioButton.jsx
+++ b/packages/yoga/src/RadioGroup/web/Button/RadioButton.jsx
@@ -68,10 +68,10 @@ const ButtonWrapper = styled.div`
     border-color: ${radiogroup.button.border.color};
     border-top-width: ${radiogroup.button.border.width}px;
     border-bottom-width: ${radiogroup.button.border.width}px;
-    
+
     border-left: none;
     border-right: none;
-    
+
     &:first-child {
       border-right-width: 0;
       border-left-width: ${radiogroup.button.border.width}px;
@@ -81,7 +81,7 @@ const ButtonWrapper = styled.div`
       border-top-left-radius: ${radiogroup.button.border.radius}px;
       border-bottom-left-radius: ${radiogroup.button.border.radius}px;
     }
-  
+
     &:last-child {
       border-left-width: 0;
 
@@ -98,7 +98,7 @@ const ButtonWrapper = styled.div`
 /** Radio group allows user to select one option from a set of options. Use
 value on group to set the selected option. */
 const RadioGroupButton = React.forwardRef(
-  ({ children, value, ...rest }, ref) => {
+  ({ children, value = '', ...rest }, ref) => {
     const { name, onChange, small, selectedValue, ...context } =
       useContext(RadioGroupContext);
 
@@ -132,8 +132,4 @@ RadioGroupButton.propTypes = {
   value: oneOfType([string, number]),
 };
 
-RadioGroupButton.defaultProps = {
-  value: '',
-};
-
 export default RadioGroupButton;
diff --git a/packages/yoga/src/RadioGroup/web/Radio/Radio.jsx b/packages/yoga/src/RadioGroup/web/Radio/Radio.jsx
index a9a764f4e0..e37d22830b 100644
--- a/packages/yoga/src/RadioGroup/web/Radio/Radio.jsx
+++ b/packages/yoga/src/RadioGroup/web/Radio/Radio.jsx
@@ -25,7 +25,7 @@ const Radio = styled.span`
       width: ${radio.size}px;
       height: ${radio.size}px;
 
-      border-width: ${radio.size * 0.1}px; 
+      border-width: ${radio.size * 0.1}px;
       border-style: solid;
       border-color: ${radio.backgroundColor};
       border-radius: ${radio.border.radius}px;
@@ -89,28 +89,28 @@ const Wrapper = styled.div`
     ${
       checked
         ? `
-    
+
       &:hover {
         ${Radio} {
           background-color: ${stateColors.hover};
-          box-shadow: 0 0 0 ${radiogroup.radio.size * 0.4}px 
+          box-shadow: 0 0 0 ${radiogroup.radio.size * 0.4}px
             ${stateColors.hover};
         }
       }
-    
+
       &:focus-within {
         ${Radio} {
           z-index: 1;
           background-color: ${stateColors.focusWithin};
-          box-shadow: 0 0 0 ${radiogroup.radio.size * 0.4}px 
+          box-shadow: 0 0 0 ${radiogroup.radio.size * 0.4}px
             ${stateColors.focusWithin};
         }
       }
-    
+
       &:active {
         ${Radio} {
           background-color: ${stateColors.active};
-          box-shadow: 0 0 0 ${radiogroup.radio.size * 0.4}px 
+          box-shadow: 0 0 0 ${radiogroup.radio.size * 0.4}px
             ${stateColors.active};
         }
       }
@@ -125,12 +125,12 @@ const Wrapper = styled.div`
 
           width: ${radiogroup.radio.size * 0.5}px;
           height: ${radiogroup.radio.size * 0.5}px;
-          
+
           border-radius: 100%;
           background-color: ${radiogroup.checked.backgroundColor};
-          
+
           transform: translate(-50%, -50%);
-          
+
           content: '';
         }
       }
@@ -170,10 +170,15 @@ const Wrapper = styled.div`
   }}
 `;
 
+const emptyObj = {};
+
 /** The Radio is a type of selection control that allows the user to select a
  * single option from a list. */
 const RadioGroupRadio = React.forwardRef(
-  ({ value, disabled, style, className, ...rest }, ref) => {
+  (
+    { value = '', disabled = false, style = emptyObj, className, ...rest },
+    ref,
+  ) => {
     const { name, onChange, selectedValue, ...context } =
       useContext(RadioGroupContext);
 
@@ -217,11 +222,4 @@ RadioGroupRadio.propTypes = {
   value: oneOfType([string, number]),
 };
 
-RadioGroupRadio.defaultProps = {
-  className: undefined,
-  disabled: false,
-  style: {},
-  value: '',
-};
-
 export default RadioGroupRadio;
diff --git a/packages/yoga/src/RadioGroup/web/RadioGroup.jsx b/packages/yoga/src/RadioGroup/web/RadioGroup.jsx
index 44dc77039e..e7b46aa818 100644
--- a/packages/yoga/src/RadioGroup/web/RadioGroup.jsx
+++ b/packages/yoga/src/RadioGroup/web/RadioGroup.jsx
@@ -16,14 +16,17 @@ const Group = styled.div.attrs({
   `}
 `;
 
+const noop = () => {};
+const emptyObj = {};
+
 const RadioGroup = ({
-  name,
-  onChange,
-  selectedValue,
-  small,
-  full,
-  children,
-  style,
+  name = '',
+  onChange = noop,
+  selectedValue = '',
+  small = false,
+  full = false,
+  children = null,
+  style = emptyObj,
   ...rest
 }) => (
   <RadioGroupContext.Provider
@@ -51,14 +54,4 @@ RadioGroup.propTypes = {
   style: shape({}),
 };
 
-RadioGroup.defaultProps = {
-  name: '',
-  onChange: () => {},
-  selectedValue: '',
-  small: false,
-  full: false,
-  children: null,
-  style: {},
-};
-
 export default RadioGroup;
diff --git a/packages/yoga/src/Rating/web/Rating.jsx b/packages/yoga/src/Rating/web/Rating.jsx
index 0de9c47bc5..8da56973ba 100644
--- a/packages/yoga/src/Rating/web/Rating.jsx
+++ b/packages/yoga/src/Rating/web/Rating.jsx
@@ -25,22 +25,32 @@ const RatingWrapper = styled.div`
   `}
 `;
 
+const noop = () => {};
+
+const defaultIcon = {
+  type: StarFilled,
+  size: 12,
+};
+
 /** Use the Rating component to view other people's opinions and experiences. */
 const Rating = ({
   value,
-  max,
-  readOnly,
-  onRate,
-  onMouseOver,
-  onMouseMove,
-  onMouseLeave,
+  max = 5,
+  readOnly = true,
+  onRate = noop,
+  onMouseOver = noop,
+  onMouseMove = noop,
+  onMouseLeave = noop,
   theme: {
     yoga: {
       colors,
       components: { rating },
     },
   },
-  icon: { type: Icon = StarFilled, size: iconSize = rating.icon.size },
+  icon: {
+    type: Icon = StarFilled,
+    size: iconSize = rating.icon.size,
+  } = defaultIcon,
   ...rest
 }) => {
   const wrapperRef = useRef(null);
@@ -153,18 +163,4 @@ Rating.propTypes = {
   onMouseLeave: func,
 };
 
-Rating.defaultProps = {
-  value: undefined,
-  icon: {
-    type: StarFilled,
-    size: 12,
-  },
-  max: 5,
-  readOnly: true,
-  onRate: rating => {}, // eslint-disable-line no-unused-vars
-  onMouseOver: () => {},
-  onMouseMove: () => {},
-  onMouseLeave: () => {},
-};
-
 export default withTheme(Rating);
diff --git a/packages/yoga/src/Skeleton/web/Skeleton.jsx b/packages/yoga/src/Skeleton/web/Skeleton.jsx
index 1a0c07a9ca..c7dc194c8e 100644
--- a/packages/yoga/src/Skeleton/web/Skeleton.jsx
+++ b/packages/yoga/src/Skeleton/web/Skeleton.jsx
@@ -53,8 +53,8 @@ const StyledSkeleton = styled.div`
   `}
 `;
 
-function Skeleton(props) {
-  return <StyledSkeleton {...props} />;
+function Skeleton({ animation = 'pulse', color = 'primary', ...rest }) {
+  return <StyledSkeleton {...rest} animation={animation} color={color} />;
 }
 
 Skeleton.propTypes = {
@@ -110,10 +110,4 @@ Skeleton.propTypes = {
   animation: oneOf(['pulse', false]),
 };
 
-Skeleton.defaultProps = {
-  variant: undefined,
-  animation: 'pulse',
-  color: 'primary',
-};
-
 export default Skeleton;
diff --git a/packages/yoga/src/Slider/web/Marker.jsx b/packages/yoga/src/Slider/web/Marker.jsx
index 2757d703e6..29ecc6f77b 100644
--- a/packages/yoga/src/Slider/web/Marker.jsx
+++ b/packages/yoga/src/Slider/web/Marker.jsx
@@ -33,7 +33,15 @@ const Circle = styled(RCHandle)`
   `}
 `;
 
-const Marker = ({ values, dragging, index, tooltip, ...props }) => {
+const defaultValues = [0];
+
+function Marker({
+  values = defaultValues,
+  dragging = false,
+  index = 0,
+  tooltip,
+  ...props
+}) {
   const renderTooltip = () => {
     if (!dragging) {
       return false;
@@ -53,7 +61,7 @@ const Marker = ({ values, dragging, index, tooltip, ...props }) => {
       {dragging && <Tooltip data={renderTooltip()} />}
     </Circle>
   );
-};
+}
 
 Marker.propTypes = {
   values: arrayOf(number),
@@ -70,11 +78,4 @@ Marker.propTypes = {
   ),
 };
 
-Marker.defaultProps = {
-  values: [0],
-  dragging: false,
-  index: 0,
-  tooltip: undefined,
-};
-
 export default Marker;
diff --git a/packages/yoga/src/Slider/web/Slider.jsx b/packages/yoga/src/Slider/web/Slider.jsx
index 17c0101a06..0724f13c14 100644
--- a/packages/yoga/src/Slider/web/Slider.jsx
+++ b/packages/yoga/src/Slider/web/Slider.jsx
@@ -31,17 +31,20 @@ const StyledRange = styled(RCRange)`
   }
 `;
 
+const emptyArr = [];
+const defaultValues = [0];
+
 /** Sliders allow users to make selections from a range of values. Sliders
 reflect a range of values along a bar, from which users may select a single
 value. They are ideal for adjusting settings such as volume, brightness, or
 applying image filters. */
 const Slider = ({
-  snapped,
-  tooltip,
-  values,
-  max,
+  snapped = false,
+  tooltip = emptyArr,
+  values = defaultValues,
+  max = 10,
   maxLabel,
-  min,
+  min = 0,
   minLabel,
   theme: {
     yoga: {
@@ -223,16 +226,6 @@ Slider.propTypes = {
   values: arrayOf(number),
 };
 
-Slider.defaultProps = {
-  max: 10,
-  maxLabel: undefined,
-  min: 0,
-  minLabel: undefined,
-  snapped: false,
-  tooltip: [],
-  values: [0],
-};
-
 Slider.displayName = 'Slider';
 
 export default withTheme(Slider);
diff --git a/packages/yoga/src/Slider/web/Tooltip.jsx b/packages/yoga/src/Slider/web/Tooltip.jsx
index b52ccf6371..f1c76e6f5c 100644
--- a/packages/yoga/src/Slider/web/Tooltip.jsx
+++ b/packages/yoga/src/Slider/web/Tooltip.jsx
@@ -12,7 +12,7 @@ const Wrapper = styled.div`
   transform: translateX(-50%);
 
   ${({
-    hasRibbon,
+    hasRibbon = false,
     theme: {
       yoga: {
         components: { slider },
@@ -33,10 +33,6 @@ Wrapper.propTypes = {
   hasRibbon: bool,
 };
 
-Wrapper.defaultProps = {
-  hasRibbon: false,
-};
-
 const Tip = styled.div`
   position: relative;
   z-index: 3;
@@ -139,8 +135,10 @@ const Description = styled(Text.Body2)`
   `}
 `;
 
-const Tooltip = ({ data, ...props }) =>
-  Object.keys(data).length ? (
+const emptyObj = {};
+
+function Tooltip({ data = emptyObj, ...props }) {
+  return Object.keys(data).length ? (
     <Wrapper hasRibbon={Boolean(data.ribbon)} {...props}>
       {data.ribbon && <Ribbon as="span">{data.ribbon}</Ribbon>}
       {(data.title || data.description) && (
@@ -154,6 +152,7 @@ const Tooltip = ({ data, ...props }) =>
       <Arrow />
     </Wrapper>
   ) : null;
+}
 
 Tooltip.propTypes = {
   data: shape({
@@ -163,8 +162,4 @@ Tooltip.propTypes = {
   }),
 };
 
-Tooltip.defaultProps = {
-  data: {},
-};
-
 export default Tooltip;
diff --git a/packages/yoga/src/Snackbar/web/Snackbar.jsx b/packages/yoga/src/Snackbar/web/Snackbar.jsx
index 87d9ba51a4..c4d69885bd 100644
--- a/packages/yoga/src/Snackbar/web/Snackbar.jsx
+++ b/packages/yoga/src/Snackbar/web/Snackbar.jsx
@@ -64,22 +64,22 @@ const StyledSnackbar = styled.div`
       align-items: center;
       justify-content: space-between;
       box-sizing: border-box;
-  
+
       position: fixed;
       bottom: ${snackbar.position.mobile.bottom}px;
       right: ${snackbar.position.mobile.right}px;
       left: ${snackbar.position.mobile.left}px;
-  
+
       min-width: ${snackbar.minWidth.mobile}px;
       max-width: ${snackbar.maxWidth.default}px;
-  
+
       min-height: ${snackbar.height.min}px;
       max-height: ${snackbar.height.max}px;
-  
+
       padding: ${snackbar.padding.default}px;
-      
+
       border-radius: ${snackbar.border.radius}px;
-  
+
       box-shadow: ${snackbar.shadow.default};
 
       background-color: ${snackbar.variant.color[variant]};
@@ -112,17 +112,17 @@ const AnimatedSnackbar = styled(StyledSnackbar)`
 const Snackbar = React.forwardRef(
   (
     {
-      open,
+      open = false,
       duration,
-      variant,
-      hideIcon,
+      variant = 'success',
+      hideIcon = false,
       message,
       actionLabel,
       onAction,
       onClose,
-      hideCloseButton,
+      hideCloseButton = false,
       ariaLabelClose,
-      dataTestId,
+      dataTestId = 'snackbar',
       theme: {
         yoga: {
           components: { snackbar },
@@ -227,16 +227,4 @@ Snackbar.propTypes = {
   dataTestId: string,
 };
 
-Snackbar.defaultProps = {
-  open: false,
-  duration: undefined,
-  actionLabel: undefined,
-  hideIcon: false,
-  onAction: undefined,
-  variant: 'success',
-  hideCloseButton: false,
-  ariaLabelClose: undefined,
-  dataTestId: 'snackbar',
-};
-
 export default memo(withTheme(Snackbar));
diff --git a/packages/yoga/src/Spinner/web/Spinner.jsx b/packages/yoga/src/Spinner/web/Spinner.jsx
index 957d8a7002..9cdd915526 100644
--- a/packages/yoga/src/Spinner/web/Spinner.jsx
+++ b/packages/yoga/src/Spinner/web/Spinner.jsx
@@ -50,29 +50,31 @@ const StyledSpinner = styled.span`
   `}
 `;
 
-const Spinner = React.forwardRef(({ size, color, theme }, ref) => {
-  return (
-    <StyledSpinner
-      color={get(theme.yoga.colors, color, color)}
-      size={get(theme.yoga.spacing, size, size)}
-      ref={ref}
-      aria-label="loading-icon"
-    >
-      <span className="spinner">
-        <svg className="circular" viewBox="22 22 44 44">
-          <circle
-            className="path"
-            fill="none"
-            strokeWidth="3.6"
-            cx="44"
-            cy="44"
-            r="20.2"
-          />
-        </svg>
-      </span>
-    </StyledSpinner>
-  );
-});
+const Spinner = React.forwardRef(
+  ({ size = 'medium', color = 'primary', theme }, ref) => {
+    return (
+      <StyledSpinner
+        color={get(theme.yoga.colors, color, color)}
+        size={get(theme.yoga.spacing, size, size)}
+        ref={ref}
+        aria-label="loading-icon"
+      >
+        <span className="spinner">
+          <svg className="circular" viewBox="22 22 44 44">
+            <circle
+              className="path"
+              fill="none"
+              strokeWidth="3.6"
+              cx="44"
+              cy="44"
+              r="20.2"
+            />
+          </svg>
+        </span>
+      </StyledSpinner>
+    );
+  },
+);
 
 const commonSizes = [
   'xxxsmall',
@@ -93,9 +95,4 @@ Spinner.propTypes = {
   color: string,
 };
 
-Spinner.defaultProps = {
-  size: 'medium',
-  color: 'primary',
-};
-
 export default withTheme(Spinner);
diff --git a/packages/yoga/src/Stepper/web/Dots.jsx b/packages/yoga/src/Stepper/web/Dots.jsx
index 0472731e14..9db891ac98 100644
--- a/packages/yoga/src/Stepper/web/Dots.jsx
+++ b/packages/yoga/src/Stepper/web/Dots.jsx
@@ -71,7 +71,9 @@ const Wrapper = styled.div`
   justify-content: space-between;
 `;
 
-function Dots({ activeStep, labels, secondary }) {
+const emptyArr = [];
+
+function Dots({ activeStep = 0, labels = emptyArr, secondary = false }) {
   return (
     <Wrapper>
       {labels.map((label, index) => (
@@ -94,10 +96,4 @@ Dots.propTypes = {
   secondary: bool,
 };
 
-Dots.defaultProps = {
-  activeStep: 0,
-  labels: [],
-  secondary: false,
-};
-
 export default Dots;
diff --git a/packages/yoga/src/Stepper/web/Line.jsx b/packages/yoga/src/Stepper/web/Line.jsx
index 573480af88..ba8566162b 100644
--- a/packages/yoga/src/Stepper/web/Line.jsx
+++ b/packages/yoga/src/Stepper/web/Line.jsx
@@ -35,9 +35,4 @@ Line.propTypes = {
   totalSteps: number,
 };
 
-Line.defaultProps = {
-  activeStep: 0,
-  totalSteps: 0,
-};
-
 export default Line;
diff --git a/packages/yoga/src/Stepper/web/Stepper.jsx b/packages/yoga/src/Stepper/web/Stepper.jsx
index 9efabb30af..e9f4b8cfc4 100644
--- a/packages/yoga/src/Stepper/web/Stepper.jsx
+++ b/packages/yoga/src/Stepper/web/Stepper.jsx
@@ -32,7 +32,7 @@ const LineWrapper = styled.div`
 
 /** Stepper is responsible for the logic that drives a stepped workflow, it
 provides a wizard-like workflow by dividing content into logical steps. */
-function Stepper({ children, activeStep, secondary, ...rest }) {
+function Stepper({ children, activeStep = 0, secondary = false, ...rest }) {
   return (
     <Root {...rest}>
       <LineWrapper>
@@ -65,11 +65,4 @@ Stepper.propTypes = {
   activeStep: limitChildren,
   secondary: bool,
 };
-
-Stepper.defaultProps = {
-  children: undefined,
-  activeStep: 0,
-  secondary: false,
-};
-
 export default Stepper;
diff --git a/packages/yoga/src/Tag/web/Informative.jsx b/packages/yoga/src/Tag/web/Informative.jsx
index e165bd67b5..e8835462c0 100644
--- a/packages/yoga/src/Tag/web/Informative.jsx
+++ b/packages/yoga/src/Tag/web/Informative.jsx
@@ -29,15 +29,15 @@ const Informative = styled(StyledTag)`
 const TagInformative = ({
   children,
   icon,
-  variant,
+  variant = 'neutral',
   theme: {
     yoga: {
       colors: { text },
       components: { tag },
     },
   },
-  small,
-  ellipsis,
+  small = false,
+  ellipsis = false,
   ...rest
 }) => (
   <Informative variant={variant} small={small} {...rest}>
@@ -66,13 +66,6 @@ TagInformative.propTypes = {
   ellipsis: bool,
 };
 
-TagInformative.defaultProps = {
-  icon: undefined,
-  small: false,
-  variant: 'neutral',
-  ellipsis: false,
-};
-
 TagInformative.displayName = 'Tag.Informative';
 
 export default withTheme(TagInformative);
diff --git a/packages/yoga/src/Tag/web/Tag.jsx b/packages/yoga/src/Tag/web/Tag.jsx
index f4d39bfd99..94d8ee562b 100644
--- a/packages/yoga/src/Tag/web/Tag.jsx
+++ b/packages/yoga/src/Tag/web/Tag.jsx
@@ -69,7 +69,13 @@ export const StyledText = styled(Text.Overline)`
 `;
 
 /** Tags should be keywords to categorize or organize an item. */
-const Tag = ({ children, variant, small, ellipsis, ...rest }) => (
+const Tag = ({
+  children,
+  variant = '',
+  small = false,
+  ellipsis = false,
+  ...rest
+}) => (
   <StyledTag variant={variant} small={small} {...rest}>
     <StyledText numberOfLines={ellipsis ? 1 : undefined}>{children}</StyledText>
   </StyledTag>
@@ -85,10 +91,4 @@ Tag.propTypes = {
   ellipsis: bool,
 };
 
-Tag.defaultProps = {
-  variant: '',
-  small: false,
-  ellipsis: false,
-};
-
 export default Tag;
diff --git a/packages/yoga/src/Text/web/Text.jsx b/packages/yoga/src/Text/web/Text.jsx
index a3515ed836..0e02b526a8 100644
--- a/packages/yoga/src/Text/web/Text.jsx
+++ b/packages/yoga/src/Text/web/Text.jsx
@@ -110,7 +110,21 @@ Black.displayName = 'Text.Black';
 
 const TextRenderer = styledText('p');
 
-const Text = props => <TextRenderer {...props} />;
+const Text = ({
+  inverted = false,
+  fontSize = 'medium',
+  light = false,
+  bold = false,
+  ...rest
+}) => (
+  <TextRenderer
+    {...rest}
+    inverted={inverted}
+    fontSize={fontSize}
+    light={light}
+    bold={bold}
+  />
+);
 
 Text.displayName = 'Text';
 
@@ -184,16 +198,6 @@ Text.propTypes = {
   fontSize: fontSizes,
 };
 
-Text.defaultProps = {
-  inverted: false,
-  variant: undefined,
-  size: undefined,
-  fontSize: 'medium',
-  numberOfLines: undefined,
-  light: false,
-  bold: false,
-};
-
 export {
   TextRenderer,
   Display1,
diff --git a/packages/yoga/src/TextArea/web/TextArea.jsx b/packages/yoga/src/TextArea/web/TextArea.jsx
index 07d0aef57d..488a536a89 100644
--- a/packages/yoga/src/TextArea/web/TextArea.jsx
+++ b/packages/yoga/src/TextArea/web/TextArea.jsx
@@ -28,6 +28,8 @@ const StyledField = styled(Field)`
   height: 100%;
 `;
 
+const noop = () => {};
+
 /**
  * TextArea is a type of text field which has a larger initiation size to
  * encourage a bigger user input. This component has a fixed height and the text
@@ -37,16 +39,17 @@ const StyledField = styled(Field)`
 const TextArea = React.forwardRef(
   (
     {
-      disabled,
+      disabled = false,
       error,
-      full,
+      full = false,
       helper,
-      label,
+      label = '',
       maxLength,
       className,
       style,
-      value,
-      onChange,
+      value = '',
+      onChange = noop,
+      readOnly = false,
       ...props
     },
     ref,
@@ -76,6 +79,7 @@ const TextArea = React.forwardRef(
         >
           <StyledField
             {...props}
+            readOnly={readOnly}
             disabled={disabled}
             full={full}
             label={label}
@@ -129,19 +133,4 @@ TextArea.propTypes = {
   onChange: func,
 };
 
-TextArea.defaultProps = {
-  className: undefined,
-  disabled: false,
-  error: undefined,
-  full: false,
-  helper: undefined,
-  label: '',
-  maxLength: undefined,
-  placeholder: undefined,
-  readOnly: false,
-  style: undefined,
-  value: '',
-  onChange: () => {},
-};
-
 export default TextArea;
diff --git a/packages/yoga/src/Theme/Provider/Provider.jsx b/packages/yoga/src/Theme/Provider/Provider.jsx
index 7e2d3e5b9e..aebb66a177 100644
--- a/packages/yoga/src/Theme/Provider/Provider.jsx
+++ b/packages/yoga/src/Theme/Provider/Provider.jsx
@@ -54,7 +54,7 @@ const getTheme = ({ locale, theme }) => {
 };
 
 /** This component provides a theme to all React components underneath itself via the context API. */
-const Provider = ({ locale, theme, ...rest }) => (
+const Provider = ({ locale = 'pt-BR', theme, ...rest }) => (
   <ThemeProvider theme={{ yoga: getTheme({ locale, theme }) }} {...rest} />
 );
 
@@ -62,8 +62,4 @@ Provider.propTypes = {
   locale: PropTypes.string,
 };
 
-Provider.defaultProps = {
-  locale: 'pt-BR',
-};
-
 export default Provider;