diff --git a/babel.config.js b/babel.config.js
index 8cb5e62e1..5e958941f 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,4 +1,4 @@
-module.exports = api => {
+module.exports = (api) => {
   api.cache(true);
   return {
     presets: ["@babel/preset-react"],
diff --git a/packages/alert/src/Alert.story.js b/packages/alert/src/Alert.story.js
index 7a74d6f17..7d1016a5f 100644
--- a/packages/alert/src/Alert.story.js
+++ b/packages/alert/src/Alert.story.js
@@ -10,10 +10,10 @@ const StyledAlert = styled(Alert)`
   transform: rotate(5deg);
 `;
 
-const ExtendedAlert = props => <StyledAlert {...props} />;
+const ExtendedAlert = (props) => <StyledAlert {...props} />;
 
 storiesOf("Alert", module)
-  .addDecorator(storyFn => (
+  .addDecorator((storyFn) => (
     <div style={{ transform: "scale(1)", height: 200 }}>{storyFn()}</div>
   ))
   .add("default", () => (
diff --git a/packages/alert/src/styledComponents/Alert.js b/packages/alert/src/styledComponents/Alert.js
index ca1cc00ac..ab62ba92c 100644
--- a/packages/alert/src/styledComponents/Alert.js
+++ b/packages/alert/src/styledComponents/Alert.js
@@ -7,7 +7,7 @@ import { ATTENTION } from "../constants/alertTypes";
 const Container = styled.div`
   position: fixed;
 
-  ${props => (props.bottomAligned ? "bottom: 0" : "top: 0")};
+  ${(props) => (props.bottomAligned ? "bottom: 0" : "top: 0")};
   left: 0;
   right: 0;
 
@@ -15,12 +15,12 @@ const Container = styled.div`
   justify-content: center;
   align-items: center;
 
-  background-color: ${props => bgColors[props.type]};
+  background-color: ${(props) => bgColors[props.type]};
   box-shadow: 0 2px 2px 0 rgba(46, 204, 113, 0.16);
   border: solid 1px rgba(0, 0, 0, 0.16);
   min-height: ${2 * 20 + 32}px;
 
-  z-index: ${props => props.zIndex};
+  z-index: ${(props) => props.zIndex};
 
   > p {
     font-family: Lato, sans-serif;
@@ -28,7 +28,7 @@ const Container = styled.div`
     font-weight: 600;
     line-height: 1.33;
     text-align: center;
-    color: ${props => (props.type === ATTENTION ? colors.CARBON : "#ffffff")};
+    color: ${(props) => (props.type === ATTENTION ? colors.CARBON : "#ffffff")};
     margin: 0;
   }
 
diff --git a/packages/amount-selectors/src/components/AmountSelectors.js b/packages/amount-selectors/src/components/AmountSelectors.js
index f3e848bd4..fcf359d47 100644
--- a/packages/amount-selectors/src/components/AmountSelectors.js
+++ b/packages/amount-selectors/src/components/AmountSelectors.js
@@ -37,7 +37,7 @@ class AmountSelectors extends React.Component {
     const validValue = parseFloat(value);
 
     this.setState(
-      state => ({
+      (state) => ({
         value: validValue,
         displayValue: validValue || state.displayValue,
       }),
@@ -64,7 +64,7 @@ class AmountSelectors extends React.Component {
     return this.props.onChange(validValue);
   };
 
-  getValidValue = value => {
+  getValidValue = (value) => {
     const parsedValue = parseFloat(value) || 0;
     const validValue = Math.min(
       this.props.max,
@@ -74,7 +74,7 @@ class AmountSelectors extends React.Component {
     return Number(validValue.toFixed(2));
   };
 
-  updateStateWithNewValue = value => {
+  updateStateWithNewValue = (value) => {
     const validValue = this.getValidValue(value);
     this.setState({
       value: validValue,
diff --git a/packages/button/src/Button.js b/packages/button/src/Button.js
index f4cbc2782..a8a9942bc 100644
--- a/packages/button/src/Button.js
+++ b/packages/button/src/Button.js
@@ -98,21 +98,21 @@ Button.defaultProps = {
 
 export default Button;
 
-export const PrimaryButton = props => (
+export const PrimaryButton = (props) => (
   <Button {...props} variant={buttonVariants.PRIMARY} />
 );
-export const NeutralButton = props => (
+export const NeutralButton = (props) => (
   <Button {...props} variant={buttonVariants.NEUTRAL} />
 );
-export const SecondaryButton = props => (
+export const SecondaryButton = (props) => (
   <Button {...props} variant={buttonVariants.SECONDARY} />
 );
-export const PositiveButton = props => (
+export const PositiveButton = (props) => (
   <Button {...props} variant={buttonVariants.POSITIVE} />
 );
-export const NegativeButton = props => (
+export const NegativeButton = (props) => (
   <Button {...props} variant={buttonVariants.NEGATIVE} />
 );
-export const GhostButton = props => (
+export const GhostButton = (props) => (
   <Button {...props} variant={buttonVariants.GHOST} />
 );
diff --git a/packages/button/src/Button.story.js b/packages/button/src/Button.story.js
index dfb0a74ee..2adab4221 100644
--- a/packages/button/src/Button.story.js
+++ b/packages/button/src/Button.story.js
@@ -78,7 +78,7 @@ const getStories = ({ title, ...props }) => (
   </GridContainer>
 );
 
-const CommonStory = props => (
+const CommonStory = (props) => (
   <FlexContainer>
     <RowTitles />
     {getStories({ ...props, title: "Default" })}
diff --git a/packages/button/src/styledComponents/Button.js b/packages/button/src/styledComponents/Button.js
index 84a859aaa..72a6f9b2b 100644
--- a/packages/button/src/styledComponents/Button.js
+++ b/packages/button/src/styledComponents/Button.js
@@ -7,7 +7,7 @@ import buttonVariants from "../constants/buttonVariants";
 
 const buttonHeight = ({ small }) => (small ? 32 : 40);
 
-const calcPadding = borderWidth => ({ paddingX, paddingY }) =>
+const calcPadding = (borderWidth) => ({ paddingX, paddingY }) =>
   `${paddingY - borderWidth + 1}px ${paddingX - borderWidth + 1}px`;
 
 function themeStyle(props) {
@@ -90,7 +90,7 @@ const Button = styled.button`
   line-height: 1.5;
   height: ${buttonHeight}px;
   min-width: ${buttonHeight}px;
-  width: ${props => {
+  width: ${(props) => {
     if (props.fluid) return "100%";
     if (props.iconOnly) return `${buttonHeight(props)}px`;
     return null;
diff --git a/packages/card/src/Card.js b/packages/card/src/Card.js
index 202b79f53..61621acb6 100644
--- a/packages/card/src/Card.js
+++ b/packages/card/src/Card.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import StyledCard from "./styledComponents/Card";
 import { cardTypes } from "./constants/cardTypes";
 
-const Card = props => <StyledCard {...props} />;
+const Card = (props) => <StyledCard {...props} />;
 
 Card.defaultProps = {
   width: "100%",
diff --git a/packages/card/src/styledComponents/Card.js b/packages/card/src/styledComponents/Card.js
index c80d8b0c5..c37c77910 100644
--- a/packages/card/src/styledComponents/Card.js
+++ b/packages/card/src/styledComponents/Card.js
@@ -4,7 +4,7 @@ import { colors } from "@crave/farmblocks-theme";
 
 import { cardTypes, cardTypeColors } from "../constants/cardTypes";
 
-const boxShadow = props => {
+const boxShadow = (props) => {
   if (props.boxShadow) {
     return props.boxShadow;
   }
@@ -14,20 +14,19 @@ const boxShadow = props => {
     : `0 1px 1px 0 ${colors.GREY_08}`;
 };
 
-const backgroundColor = props => {
-  return Object.keys(cardTypeColors).includes(props.type)
+const backgroundColor = (props) =>
+  Object.keys(cardTypeColors).includes(props.type)
     ? cardTypeColors[props.type]
     : cardTypeColors[cardTypes.DEFAULT];
-};
 
 const Card = styled.div`
   background-color: ${backgroundColor};
   box-shadow: ${boxShadow};
   border: solid 1px ${colors.GREY_08};
-  width: ${props => props.width};
+  width: ${(props) => props.width};
   box-sizing: border-box;
   border-radius: 4px;
-  overflow: ${props => props.overflow};
+  overflow: ${(props) => props.overflow};
   ${space}
 `;
 
diff --git a/packages/carousel/src/styledComponents/Carousel.js b/packages/carousel/src/styledComponents/Carousel.js
index 4d302634e..50a5879f0 100644
--- a/packages/carousel/src/styledComponents/Carousel.js
+++ b/packages/carousel/src/styledComponents/Carousel.js
@@ -1,12 +1,13 @@
 import styled from "styled-components";
 import { colors } from "@crave/farmblocks-theme";
 
-const scale = props => (props.shouldScale ? 1.219 : 1);
-const activeItemWidth = props => props.itemConfig.width * scale(props);
-const activeItemHeight = props => props.itemConfig.height * scale(props);
-const spaceBetweenItems = props => props.itemConfig.margin * 2;
-const stepDistance = props => props.itemConfig.width + spaceBetweenItems(props);
-const activeItemMargin = props => {
+const scale = (props) => (props.shouldScale ? 1.219 : 1);
+const activeItemWidth = (props) => props.itemConfig.width * scale(props);
+const activeItemHeight = (props) => props.itemConfig.height * scale(props);
+const spaceBetweenItems = (props) => props.itemConfig.margin * 2;
+const stepDistance = (props) =>
+  props.itemConfig.width + spaceBetweenItems(props);
+const activeItemMargin = (props) => {
   const { itemConfig } = props;
   const scaledWidth = itemConfig.width * scale(props);
 
@@ -24,26 +25,26 @@ const Container = styled.div`
   ul {
     position: relative;
     left: 50%;
-    margin-left: ${props => -(activeItemWidth(props) / 2)}px;
-    height: ${props => activeItemHeight(props) + spaceBetweenItems(props)}px;
+    margin-left: ${(props) => -(activeItemWidth(props) / 2)}px;
+    height: ${(props) => activeItemHeight(props) + spaceBetweenItems(props)}px;
     list-style: none;
     padding: 0;
     display: inline-flex;
     align-items: center;
 
     transform: translateX(
-      ${props => -(props.activeItem * stepDistance(props))}px
+      ${(props) => -(props.activeItem * stepDistance(props))}px
     );
-    transition: transform ${props => props.itemConfig.transitionTime}s;
+    transition: transform ${(props) => props.itemConfig.transitionTime}s;
     will-change: transform;
 
     li {
-      margin: ${props => props.itemConfig.margin}px;
-      min-width: ${props => props.itemConfig.width}px;
-      width: ${props => props.itemConfig.width}px;
-      height: ${props => props.itemConfig.height}px;
+      margin: ${(props) => props.itemConfig.margin}px;
+      min-width: ${(props) => props.itemConfig.width}px;
+      width: ${(props) => props.itemConfig.width}px;
+      height: ${(props) => props.itemConfig.height}px;
 
-      transition: all ${props => props.itemConfig.transitionTime}s;
+      transition: all ${(props) => props.itemConfig.transitionTime}s;
       will-change: transform;
 
       .image {
diff --git a/packages/dropdown/src/components/Dropdown.js b/packages/dropdown/src/components/Dropdown.js
index c848a2cc1..e451626f0 100644
--- a/packages/dropdown/src/components/Dropdown.js
+++ b/packages/dropdown/src/components/Dropdown.js
@@ -11,7 +11,7 @@ import { SmChevronDown } from "@crave/farmblocks-icon";
 import DropdownWrapper from "../styledComponents/DropdownWrapper";
 import DropdownMenuWrapper from "../styledComponents/DropdownMenuWrapper";
 
-const Dropdown = props => {
+const Dropdown = (props) => {
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
 
   return (
diff --git a/packages/dropdown/src/components/DropdownItem.js b/packages/dropdown/src/components/DropdownItem.js
index 98c5c5b40..e377bc492 100644
--- a/packages/dropdown/src/components/DropdownItem.js
+++ b/packages/dropdown/src/components/DropdownItem.js
@@ -4,7 +4,7 @@ import { MenuItem } from "react-aria-menubutton";
 
 import DropdownItemWrapper from "../styledComponents/DropdownItemWrapper";
 
-const DropdownItem = props => {
+const DropdownItem = (props) => {
   const { value, text, children, ...rest } = props;
   return (
     <DropdownItemWrapper {...rest}>
diff --git a/packages/dropdown/src/components/DropdownItem.story.js b/packages/dropdown/src/components/DropdownItem.story.js
index c90ae8c07..81e87707d 100644
--- a/packages/dropdown/src/components/DropdownItem.story.js
+++ b/packages/dropdown/src/components/DropdownItem.story.js
@@ -4,9 +4,9 @@ import { storiesOf } from "@storybook/react";
 import StyledDropdownItemWrapper from "../styledComponents/DropdownItemWrapper";
 import StyledDropdownMenuWrapper from "../styledComponents/DropdownMenuWrapper";
 
-const DropdownItemWrapper = props => <StyledDropdownItemWrapper {...props} />;
+const DropdownItemWrapper = (props) => <StyledDropdownItemWrapper {...props} />;
 
-const DropdownMenuWrapper = props => <StyledDropdownMenuWrapper {...props} />;
+const DropdownMenuWrapper = (props) => <StyledDropdownMenuWrapper {...props} />;
 
 storiesOf("Dropdown/Styled components/Menu and item", module)
   .add("Default", () => (
diff --git a/packages/dropdown/src/styledComponents/DropdownItemWrapper.js b/packages/dropdown/src/styledComponents/DropdownItemWrapper.js
index cb17c53bb..3250ab698 100644
--- a/packages/dropdown/src/styledComponents/DropdownItemWrapper.js
+++ b/packages/dropdown/src/styledComponents/DropdownItemWrapper.js
@@ -4,7 +4,7 @@ import { colors as colorConstants } from "@crave/farmblocks-theme";
 
 const borderRadius = "3px";
 
-const hoverColors = props => {
+const hoverColors = (props) => {
   if (props.footer) {
     return "";
   }
@@ -14,7 +14,7 @@ const hoverColors = props => {
   `;
 };
 
-const fontColor = props => {
+const fontColor = (props) => {
   if (props.selected && !props.highlighted) {
     return colorConstants.INDIGO_MILK_CAP;
   }
@@ -22,7 +22,7 @@ const fontColor = props => {
   return colorConstants.OYSTER;
 };
 
-const cursor = props => (props.footer ? "auto" : "pointer");
+const cursor = (props) => (props.footer ? "auto" : "pointer");
 
 const DropdownItemWrapper = styled.li`
   cursor: ${cursor};
@@ -36,7 +36,7 @@ const DropdownItemWrapper = styled.li`
   :hover {
     ${hoverColors};
   }
-  ${props => props.highlighted && hoverColors};
+  ${(props) => props.highlighted && hoverColors};
 
   border-bottom: solid 1px ${colorConstants.GREY_16};
 
diff --git a/packages/dropdown/src/styledComponents/DropdownMenuWrapper.js b/packages/dropdown/src/styledComponents/DropdownMenuWrapper.js
index bf05fef14..601d39c67 100644
--- a/packages/dropdown/src/styledComponents/DropdownMenuWrapper.js
+++ b/packages/dropdown/src/styledComponents/DropdownMenuWrapper.js
@@ -5,9 +5,9 @@ import { colors as colorConstants } from "@crave/farmblocks-theme";
 const DropdownMenuWrapper = styled.div`
   margin-top: 16px;
   min-width: 100%;
-  width: ${props => props.width};
+  width: ${(props) => props.width};
   whitespace: no-wrap;
-  max-height: ${props => props.maxHeight};
+  max-height: ${(props) => props.maxHeight};
   overflow-y: auto;
   scroll-behavior: smooth;
 
@@ -18,9 +18,9 @@ const DropdownMenuWrapper = styled.div`
   background: white;
 
   position: absolute;
-  right: ${props => props.align === "right" && 0};
+  right: ${(props) => props.align === "right" && 0};
 
-  z-index: ${props => props.zIndex};
+  z-index: ${(props) => props.zIndex};
 
   > ul {
     list-style: none;
diff --git a/packages/empty-state/src/Buttons.js b/packages/empty-state/src/Buttons.js
index c631c42df..8c7093050 100644
--- a/packages/empty-state/src/Buttons.js
+++ b/packages/empty-state/src/Buttons.js
@@ -31,7 +31,7 @@ const Buttons = ({ actions }) => {
       mt={2}
       justifyContent="center"
     >
-      {actions.map(buttonProps => (
+      {actions.map((buttonProps) => (
         <Button
           key={`empty-state-button-${buttonProps.text}`}
           data-testid={`empty-state-button-${buttonProps.text}`}
diff --git a/packages/filter-popover/src/FilterPopover.js b/packages/filter-popover/src/FilterPopover.js
index d538753ed..a5e366d93 100644
--- a/packages/filter-popover/src/FilterPopover.js
+++ b/packages/filter-popover/src/FilterPopover.js
@@ -5,65 +5,63 @@ import Popover from "@crave/farmblocks-popover";
 import FormWrapper from "@crave/farmblocks-form-wrapper";
 import { SmChevronDown, SmCheckFilled } from "@crave/farmblocks-icon";
 
-const FilterPopover = props => {
-  return (
-    <Popover
-      className={props.className}
-      tooltipProps={{
-        padding: "0px",
-        ...props.tooltipProps,
-      }}
-      onOutsideClick={props.onOutsideClick}
-      trigger={isVisible => (
-        <Button
-          className="trigger"
-          rightIcon={<SmChevronDown />}
-          css={`
-            box-shadow: none;
-            span {
-              display: flex;
-              align-items: center;
-            }
-          `}
-          small
-          active={isVisible || props.hasValue}
-        >
-          {props.triggerLabel}
+const FilterPopover = (props) => (
+  <Popover
+    className={props.className}
+    tooltipProps={{
+      padding: "0px",
+      ...props.tooltipProps,
+    }}
+    onOutsideClick={props.onOutsideClick}
+    trigger={(isVisible) => (
+      <Button
+        className="trigger"
+        rightIcon={<SmChevronDown />}
+        css={`
+          box-shadow: none;
+          span {
+            display: flex;
+            align-items: center;
+          }
+        `}
+        small
+        active={isVisible || props.hasValue}
+      >
+        {props.triggerLabel}
 
-          {props.hasValue && (
-            <div className="icon" style={{ marginLeft: 8 }}>
-              <SmCheckFilled />
-            </div>
-          )}
-        </Button>
-      )}
-      content={dismiss => (
-        <FormWrapper
-          className="formWrapper"
-          onCancel={e => {
+        {props.hasValue && (
+          <div className="icon" style={{ marginLeft: 8 }}>
+            <SmCheckFilled />
+          </div>
+        )}
+      </Button>
+    )}
+    content={(dismiss) => (
+      <FormWrapper
+        className="formWrapper"
+        onCancel={(e) => {
+          dismiss();
+          props.onFormCancelClick?.(e);
+        }}
+        onSave={(e) => {
+          if (props.dismissOnSave) {
             dismiss();
-            props.onFormCancelClick?.(e);
-          }}
-          onSave={e => {
-            if (props.dismissOnSave) {
-              dismiss();
-            }
-            props.onFormSaveClick(e, dismiss);
-          }}
-          saveLabel={props.formSaveLabel}
-          cancelLabel={props.formCancelLabel}
-          title={props.formTitle}
-          loading={props.formLoading}
-          saveButtonProps={{ small: true }}
-        >
-          {typeof props.formContent === "function"
-            ? props.formContent(dismiss)
-            : props.formContent}
-        </FormWrapper>
-      )}
-    />
-  );
-};
+          }
+          props.onFormSaveClick(e, dismiss);
+        }}
+        saveLabel={props.formSaveLabel}
+        cancelLabel={props.formCancelLabel}
+        title={props.formTitle}
+        loading={props.formLoading}
+        saveButtonProps={{ small: true }}
+      >
+        {typeof props.formContent === "function"
+          ? props.formContent(dismiss)
+          : props.formContent}
+      </FormWrapper>
+    )}
+  />
+);
 
 FilterPopover.defaultProps = {
   formSaveLabel: "Filter",
diff --git a/packages/filter-popover/src/FilterPopover.story.js b/packages/filter-popover/src/FilterPopover.story.js
index 8c3d2bffa..640e06a95 100644
--- a/packages/filter-popover/src/FilterPopover.story.js
+++ b/packages/filter-popover/src/FilterPopover.story.js
@@ -90,7 +90,7 @@ storiesOf("Filter Popover", module)
     <FilterPopover
       triggerLabel="Filter"
       formTitle="Form Title"
-      formContent={dismiss => (
+      formContent={(dismiss) => (
         <button onClick={() => dismiss()}>Click to dismiss</button>
       )}
     />
diff --git a/packages/footer/src/components/Footer.js b/packages/footer/src/components/Footer.js
index 60a9c1df3..200f920dd 100644
--- a/packages/footer/src/components/Footer.js
+++ b/packages/footer/src/components/Footer.js
@@ -29,25 +29,23 @@ const ActionsContainer = styled.div`
   }
 `;
 
-const Footer = props => {
-  return (
-    <Container className={props.className}>
-      <HelperContent
-        className="helperContent"
-        text={props.helpText}
-        linkText={props.helpLinkText}
-        linkHref={props.helpLinkHref}
-        imageSrc={props.helpImageSrc}
-        linkOnClick={props.onHelpLinkClick}
-        size={props.helpFontSize}
-      />
-
-      <ActionsContainer className="actionsContainer">
-        {props.actions}
-      </ActionsContainer>
-    </Container>
-  );
-};
+const Footer = (props) => (
+  <Container className={props.className}>
+    <HelperContent
+      className="helperContent"
+      text={props.helpText}
+      linkText={props.helpLinkText}
+      linkHref={props.helpLinkHref}
+      imageSrc={props.helpImageSrc}
+      linkOnClick={props.onHelpLinkClick}
+      size={props.helpFontSize}
+    />
+
+    <ActionsContainer className="actionsContainer">
+      {props.actions}
+    </ActionsContainer>
+  </Container>
+);
 
 Footer.propTypes = {
   helpImageSrc: PropTypes.string,
diff --git a/packages/footer/src/components/HelperContent.js b/packages/footer/src/components/HelperContent.js
index f11aa9b0d..bba577dac 100644
--- a/packages/footer/src/components/HelperContent.js
+++ b/packages/footer/src/components/HelperContent.js
@@ -14,7 +14,7 @@ const Container = styled.div`
   align-items: center;
 
   .text {
-    margin-bottom: ${props => props.size === fontSizes.MEDIUM && "8px"};
+    margin-bottom: ${(props) => props.size === fontSizes.MEDIUM && "8px"};
   }
 
   > .image {
@@ -24,7 +24,7 @@ const Container = styled.div`
 
 Container.displayName = "HelperContentContainer";
 
-const HelperContent = props => {
+const HelperContent = (props) => {
   const renderLink = props.linkText && (props.linkHref || props.linkOnClick);
 
   return (
diff --git a/packages/form-wrapper/src/FormWrapper.js b/packages/form-wrapper/src/FormWrapper.js
index 3090f9b0b..8a7214f46 100644
--- a/packages/form-wrapper/src/FormWrapper.js
+++ b/packages/form-wrapper/src/FormWrapper.js
@@ -8,7 +8,7 @@ export const Body = styled.div`
   padding: 16px 16px 0 16px;
 `;
 
-const FormWrapper = props => {
+const FormWrapper = (props) => {
   const {
     title,
     extraContent,
diff --git a/packages/hoc-input/src/formInput.js b/packages/hoc-input/src/formInput.js
index afad922ef..20eb90f3e 100644
--- a/packages/hoc-input/src/formInput.js
+++ b/packages/hoc-input/src/formInput.js
@@ -42,8 +42,8 @@ export const formInputProps = {
 
 const getValueFromProps = ({ input, value }) => (input ? input.value : value);
 
-const formInput = WrappedComponent => {
-  return class Input extends React.Component {
+const formInput = (WrappedComponent) =>
+  class Input extends React.Component {
     static displayName = wrapDisplayName(WrappedComponent, "formInput");
 
     static propTypes = {
@@ -71,7 +71,7 @@ const formInput = WrappedComponent => {
       }
     }
 
-    componentDidUpdate = prevProps => {
+    componentDidUpdate = (prevProps) => {
       if (this.props.focused && !prevProps.focused) {
         this.setInputFocus();
       }
@@ -109,7 +109,7 @@ const formInput = WrappedComponent => {
       this.inputRef?.focus();
     };
 
-    onChange = event => {
+    onChange = (event) => {
       this.setState({
         value: event.value || event.target.value,
       });
@@ -118,7 +118,7 @@ const formInput = WrappedComponent => {
       this.props.onChange?.(event);
     };
 
-    onFocus = event => {
+    onFocus = (event) => {
       this.props.onFocus?.(event);
 
       if (!this.props.autoControlFocusedStyle) {
@@ -127,7 +127,7 @@ const formInput = WrappedComponent => {
       this.setState({ focused: true });
     };
 
-    onBlur = event => {
+    onBlur = (event) => {
       this.props.onBlur?.(event);
 
       if (!this.props.autoControlFocusedStyle) {
@@ -174,7 +174,7 @@ const formInput = WrappedComponent => {
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         <div
           className={`input ${isDropdown ? "dropdown" : ""}`}
-          ref={element => {
+          ref={(element) => {
             this.inputRef = element && element.querySelector("input, textarea");
           }}
         >
@@ -257,7 +257,7 @@ const formInput = WrappedComponent => {
             </Label>
           )}
 
-          {validationMessages?.map(text => (
+          {validationMessages?.map((text) => (
             <Text
               className="error-message-text"
               size={fontSizes.SMALL}
@@ -272,6 +272,5 @@ const formInput = WrappedComponent => {
       );
     }
   };
-};
 
 export default formInput;
diff --git a/packages/hoc-input/src/formInput.story.utils.js b/packages/hoc-input/src/formInput.story.utils.js
index 38af7e6ed..8c470ca42 100644
--- a/packages/hoc-input/src/formInput.story.utils.js
+++ b/packages/hoc-input/src/formInput.story.utils.js
@@ -4,9 +4,11 @@ import { space, layout } from "styled-system";
 
 import formInput from "./index";
 
-export const FbInput = formInput(props => React.createElement("input", props));
+export const FbInput = formInput((props) =>
+  React.createElement("input", props),
+);
 
-export const Container = styled.div.attrs(props => ({
+export const Container = styled.div.attrs((props) => ({
   width: props.width || [1, 1, 1, 1 / 3],
 }))`
   ${layout};
@@ -21,11 +23,7 @@ export const WithValue = ({ children }) => {
       <input
         type="button"
         onClick={() => {
-          setValue(
-            Math.random()
-              .toString(36)
-              .substr(2, 9),
-          );
+          setValue(Math.random().toString(36).substr(2, 9));
         }}
         value="Click me to change input value"
       />
@@ -43,7 +41,7 @@ export const FocusContainer = ({ children }) => {
       <input
         type="button"
         onClick={() => {
-          setFocused(value => !value);
+          setFocused((value) => !value);
         }}
         value="Click me to toggle focused style"
       />
diff --git a/packages/hoc-input/src/styledComponents/Wrapper.js b/packages/hoc-input/src/styledComponents/Wrapper.js
index 48de2fe67..2f7460dfc 100644
--- a/packages/hoc-input/src/styledComponents/Wrapper.js
+++ b/packages/hoc-input/src/styledComponents/Wrapper.js
@@ -15,7 +15,7 @@ const getColorByStatus = ({ fallbackColor }) => ({
   return fallbackColor;
 };
 
-const customCursor = props => (props.disabled ? "default" : "pointer");
+const customCursor = (props) => (props.disabled ? "default" : "pointer");
 
 const fontStyles = css`
   font-family: Lato, sans-serif;
@@ -42,7 +42,8 @@ const Wrapper = styled.div`
     border: solid 1px;
     border-radius: ${({ borderRadius }) => borderRadius};
     border-color: ${getColorByStatus({ fallbackColor: colors.GREY_16 })};
-    background-color: ${props => (props.disabled ? colors.GREY_16 : "#ffffff")};
+    background-color: ${(props) =>
+      props.disabled ? colors.GREY_16 : "#ffffff"};
 
     ${focusedStyle};
 
@@ -80,7 +81,7 @@ const Wrapper = styled.div`
       border: 0;
       flex: 1;
       outline: none;
-      color: ${props => (props.disabled ? colors.GREY_32 : colors.CARBON)};
+      color: ${(props) => (props.disabled ? colors.GREY_32 : colors.CARBON)};
       background: none;
       &::placeholder {
         color: ${colors.GREY_32};
diff --git a/packages/icon/buildJSX.js b/packages/icon/buildJSX.js
index 6a138814e..f3fa23500 100644
--- a/packages/icon/buildJSX.js
+++ b/packages/icon/buildJSX.js
@@ -18,8 +18,8 @@ if (!fs.existsSync(jsxSourcePath)) {
   fs.mkdirSync(jsxSourcePath);
 }
 
-const isDir = name => fs.lstatSync(`${svgSourcePath}/${name}`).isDirectory();
-const isSvg = file => path.extname(file).toLowerCase() === ".svg";
+const isDir = (name) => fs.lstatSync(`${svgSourcePath}/${name}`).isDirectory();
+const isSvg = (file) => path.extname(file).toLowerCase() === ".svg";
 
 const groups = fs
   .readdirSync(svgSourcePath)
@@ -147,7 +147,7 @@ async function buildIndex(components) {
       "./src/jsx/index.js",
       components
         .map(
-          component =>
+          (component) =>
             `export { default as ${component} } from "./${component}";`,
         )
         .sort()
@@ -164,6 +164,4 @@ async function buildIndex(components) {
   }
 }
 
-buildJSX()
-  .then(buildIndex)
-  .then(lintFiles);
+buildJSX().then(buildIndex).then(lintFiles);
diff --git a/packages/icon/src/Icon.js b/packages/icon/src/Icon.js
index f146892b8..55aad6158 100644
--- a/packages/icon/src/Icon.js
+++ b/packages/icon/src/Icon.js
@@ -34,7 +34,7 @@ IconWrapper.defaultProps = {
   size: "1em",
 };
 
-export const withWrapper = Icon =>
+export const withWrapper = (Icon) =>
   // eslint-disable-next-line react/prop-types
   React.forwardRef(({ className = "", ...props }, ref) => (
     <IconWrapper>
diff --git a/packages/icon/src/IconsBrowser.js b/packages/icon/src/IconsBrowser.js
index f07e0b574..61cadd796 100644
--- a/packages/icon/src/IconsBrowser.js
+++ b/packages/icon/src/IconsBrowser.js
@@ -83,7 +83,7 @@ export default () => (
     </Text>
     <hr />
     <Grid>
-      {groupNames.map(groupName => (
+      {groupNames.map((groupName) => (
         <>
           <GroupHeader size={fontSizes.X_LARGE} key={groupName}>
             {groupName}
diff --git a/packages/image/src/Image.js b/packages/image/src/Image.js
index 54d53c2e1..1b8c38ed2 100644
--- a/packages/image/src/Image.js
+++ b/packages/image/src/Image.js
@@ -5,9 +5,7 @@ import StyledImage from "./styledComponents/Image";
 import { MEDIUM } from "./constants/thumbnailSizes";
 import { COVER } from "./constants/fitModes";
 
-const Image = props => {
-  return <StyledImage {...props} />;
-};
+const Image = (props) => <StyledImage {...props} />;
 
 Image.propTypes = {
   src: PropTypes.string.isRequired,
diff --git a/packages/image/src/Image.story.js b/packages/image/src/Image.story.js
index 9760f6e56..73eaf4935 100644
--- a/packages/image/src/Image.story.js
+++ b/packages/image/src/Image.story.js
@@ -19,7 +19,7 @@ const RenderImage = ({
   ...props
 }) => <Image src={src} size={size} {...props} />;
 
-const Group = props => (
+const Group = (props) => (
   <div
     style={{
       display: "flex",
@@ -39,7 +39,7 @@ storiesOf("Image", module)
       <div style={{ display: "flex" }}>
         {Object.keys(badgeSizes)
           .reverse()
-          .map(size => (
+          .map((size) => (
             <div style={{ marginRight: "36px" }}>
               <div>{`${size} - ${badgeSizes[size]}px`}</div>
               <RenderImage size={badgeSizes[size]} badge />
@@ -52,7 +52,7 @@ storiesOf("Image", module)
       <div style={{ display: "flex" }}>
         {Object.keys(thumbnailSizes)
           .reverse()
-          .map(size => (
+          .map((size) => (
             <div style={{ marginRight: "36px" }}>
               <div>{`${size} - ${thumbnailSizes[size]}px`}</div>
               <RenderImage size={thumbnailSizes[size]} />
@@ -69,7 +69,7 @@ storiesOf("Image", module)
       <div style={{ display: "flex" }}>
         {Object.keys(badgeSizes)
           .reverse()
-          .map(size => (
+          .map((size) => (
             <div style={{ marginRight: "36px" }}>
               <div>{`${size} - ${badgeSizes[size]}px`}</div>
               <RenderImage size={badgeSizes[size]} badge withBoxShadow />
@@ -82,7 +82,7 @@ storiesOf("Image", module)
       <div style={{ display: "flex" }}>
         {Object.keys(thumbnailSizes)
           .reverse()
-          .map(size => (
+          .map((size) => (
             <div style={{ marginRight: "36px" }}>
               <div>{`${size} - ${thumbnailSizes[size]}px`}</div>
               <RenderImage size={thumbnailSizes[size]} withBoxShadow />
@@ -93,13 +93,13 @@ storiesOf("Image", module)
   ))
   .add("image fit values", () => (
     <Group>
-      {Object.keys(imgSrcs).map(src => (
+      {Object.keys(imgSrcs).map((src) => (
         <>
           <div style={{ padding: "16px 0 16px 0", fontWeight: "bold" }}>
             {src} image
           </div>
           <div style={{ display: "flex" }}>
-            {Object.keys(fitModes).map(mode => (
+            {Object.keys(fitModes).map((mode) => (
               <div style={{ paddingRight: "28px" }}>
                 <div>{`${fitModes[mode]}`}</div>
                 <RenderImage fit={fitModes[mode]} src={imgSrcs[src]} />
diff --git a/packages/image/src/styledComponents/Image.js b/packages/image/src/styledComponents/Image.js
index 8ba3a865d..918793bbd 100644
--- a/packages/image/src/styledComponents/Image.js
+++ b/packages/image/src/styledComponents/Image.js
@@ -3,7 +3,7 @@ import styled from "styled-components";
 const getBorderRadius = ({ borderRadius, badge }) =>
   badge ? "100%" : borderRadius;
 
-const StyledImage = styled.img.attrs(props => ({
+const StyledImage = styled.img.attrs((props) => ({
   width: props.width || props.size,
   height: props.height || props.size,
 }))`
@@ -12,6 +12,6 @@ const StyledImage = styled.img.attrs(props => ({
   object-fit: ${({ fit }) => fit};
   box-shadow: ${({ withBoxShadow }) =>
     withBoxShadow && "0px 4px 4px 0px rgba(0, 0, 0, 0.16);"};
-  ${props => props.css};
+  ${(props) => props.css};
 `;
 export default StyledImage;
diff --git a/packages/input-checkbox/src/Checkbox.js b/packages/input-checkbox/src/Checkbox.js
index bdebe7b61..f0a7c6970 100644
--- a/packages/input-checkbox/src/Checkbox.js
+++ b/packages/input-checkbox/src/Checkbox.js
@@ -28,7 +28,7 @@ const createCheckbox = ({ isSwitch }) =>
       clicked: false,
     };
 
-    onMouseUp = event => {
+    onMouseUp = (event) => {
       if (isSwitch) {
         // we use a clicked state to flag that the
         // switch change started from a pointer click and not the spacebar
@@ -37,7 +37,7 @@ const createCheckbox = ({ isSwitch }) =>
       return this.props.onMouseUp(event);
     };
 
-    onChange = event => {
+    onChange = (event) => {
       if (this.state.clicked) {
         // we only want to show the focus outline for when
         // the focus was gained with a tab keypress and not a click
diff --git a/packages/input-checkbox/src/Checkbox.story.js b/packages/input-checkbox/src/Checkbox.story.js
index 4aa3fc638..b986c476c 100644
--- a/packages/input-checkbox/src/Checkbox.story.js
+++ b/packages/input-checkbox/src/Checkbox.story.js
@@ -16,7 +16,7 @@ const checkboxStories = (moduleTitle, Checkbox) =>
         return (
           <Checkbox
             checked={checked}
-            onChange={e => {
+            onChange={(e) => {
               setChecked(e.target.checked);
               action("onChange")(e);
             }}
@@ -77,7 +77,7 @@ const checkboxStories = (moduleTitle, Checkbox) =>
           <Checkbox
             checked={checked}
             loading={loading}
-            onChange={e => {
+            onChange={(e) => {
               setLoading(true);
               setChecked(e.target.checked);
               setTimeout(() => {
diff --git a/packages/input-checkbox/src/styledComponents/Checkbox.js b/packages/input-checkbox/src/styledComponents/Checkbox.js
index 5389569ce..68d230875 100644
--- a/packages/input-checkbox/src/styledComponents/Checkbox.js
+++ b/packages/input-checkbox/src/styledComponents/Checkbox.js
@@ -5,7 +5,7 @@ const checkboxSize = "16px";
 const toggleSize = "24px";
 const margin = "8px";
 
-const checkboxColors = props => {
+const checkboxColors = (props) => {
   if (props.disabled) {
     return css`
       color: ${colors.GREY_16};
@@ -20,7 +20,7 @@ const checkboxColors = props => {
   `;
 };
 
-const checkboxStyles = props =>
+const checkboxStyles = (props) =>
   !props.switch &&
   css`
     max-width: ${checkboxSize};
@@ -53,7 +53,7 @@ export const Loading = styled.div`
   }
 `;
 
-const switchBackground = props => {
+const switchBackground = (props) => {
   if (props.disabled) {
     return colors.GREY_32;
   }
@@ -63,7 +63,7 @@ const switchBackground = props => {
   return colors.SUGAR;
 };
 
-const switchStyles = props =>
+const switchStyles = (props) =>
   props.switch &&
   css`
     width: 56px;
@@ -89,7 +89,7 @@ const switchStyles = props =>
     background: ${switchBackground};
   `;
 
-const hoverStyles = props => {
+const hoverStyles = (props) => {
   /* eslint-disable consistent-return */
 
   if (props.disabled) {
@@ -135,7 +135,7 @@ const hoverStyles = props => {
 
 const Label = styled.label`
   display: inline-flex;
-  cursor: ${props => (props.disabled ? "default" : "pointer")};
+  cursor: ${(props) => (props.disabled ? "default" : "pointer")};
   padding-left: ${margin};
 
   .centerVisibleCheckbox {
@@ -161,16 +161,17 @@ const Label = styled.label`
   }
 
   .label {
-    margin-left: ${props => (props.hasText ? margin : "0")};
+    margin-left: ${(props) => (props.hasText ? margin : "0")};
   }
 
   :hover .visibleCheckbox {
     ${hoverStyles};
-    border-width: ${props => (props.disabled || props.switch ? "1px" : "2px")};
+    border-width: ${(props) =>
+      props.disabled || props.switch ? "1px" : "2px"};
   }
 
   .hiddenCheckbox:focus + div .visibleCheckbox {
-    ${props =>
+    ${(props) =>
       props.switch
         ? css`
             outline: auto 2px Highlight;
diff --git a/packages/input-phone/src/ChevronDown.js b/packages/input-phone/src/ChevronDown.js
index be88ed390..2dde2b0a3 100644
--- a/packages/input-phone/src/ChevronDown.js
+++ b/packages/input-phone/src/ChevronDown.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-const ChevronDown = props => (
+const ChevronDown = (props) => (
   <svg
     height="24"
     viewBox="0 0 24 24"
diff --git a/packages/input-phone/src/CountryList.js b/packages/input-phone/src/CountryList.js
index 78518404f..fa4244d84 100644
--- a/packages/input-phone/src/CountryList.js
+++ b/packages/input-phone/src/CountryList.js
@@ -14,7 +14,7 @@ const CountryList = React.forwardRef(({ data }, ref) => (
           height={height}
           itemCount={data.items.length}
           itemData={data}
-          itemKey={index => data.items[index].code}
+          itemKey={(index) => data.items[index].code}
           itemSize={54}
           width={width}
           ref={ref}
diff --git a/packages/input-phone/src/CountrySelectorTrigger.js b/packages/input-phone/src/CountrySelectorTrigger.js
index f2aec9d00..607f42d28 100644
--- a/packages/input-phone/src/CountrySelectorTrigger.js
+++ b/packages/input-phone/src/CountrySelectorTrigger.js
@@ -13,14 +13,12 @@ const Trigger = styled.div`
 `;
 
 const CountrySelectorTrigger = React.memo(
-  ({ callingCode, flag, code, ...props }) => {
-    return (
-      <Trigger {...props}>
-        {emojiSupport() ? flag : code} +{callingCode}
-        <ChevronDown />
-      </Trigger>
-    );
-  },
+  ({ callingCode, flag, code, ...props }) => (
+    <Trigger {...props}>
+      {emojiSupport() ? flag : code} +{callingCode}
+      <ChevronDown />
+    </Trigger>
+  ),
 );
 
 CountrySelectorTrigger.propTypes = {
diff --git a/packages/input-phone/src/PhoneInput.hooks.js b/packages/input-phone/src/PhoneInput.hooks.js
index cf601fbf9..e0dc0684d 100644
--- a/packages/input-phone/src/PhoneInput.hooks.js
+++ b/packages/input-phone/src/PhoneInput.hooks.js
@@ -13,7 +13,7 @@ export const useCountrySearch = (data, query, priority) => {
     try {
       const codes = priority?.split(",");
 
-      const topCountries = data?.filter(country =>
+      const topCountries = data?.filter((country) =>
         codes?.includes(country.code),
       );
 
@@ -23,7 +23,7 @@ export const useCountrySearch = (data, query, priority) => {
       );
 
       const orderedTopCountries =
-        codes?.map(code => indexedTopCountries[code]) || [];
+        codes?.map((code) => indexedTopCountries[code]) || [];
 
       return [...orderedTopCountries, ...data];
     } catch (_error) {
@@ -43,15 +43,15 @@ export const useCountrySearch = (data, query, priority) => {
     return allCountries;
   }
 
-  return fuse.current.search(query).map(result => result.item);
+  return fuse.current.search(query).map((result) => result.item);
 };
 
 export const useHighlight = ({ items, listRef, selectFn, cancelFnRef }) => {
   const [highlightIndex, setHighlightIndex] = useState(-1);
 
   const changeHighlight = useCallback(
-    modifier => {
-      setHighlightIndex(index => {
+    (modifier) => {
+      setHighlightIndex((index) => {
         if (!items.length) {
           return -1;
         }
@@ -75,7 +75,7 @@ export const useHighlight = ({ items, listRef, selectFn, cancelFnRef }) => {
   }, [highlightIndex, listRef]);
 
   const handleKeyDown = useCallback(
-    event => {
+    (event) => {
       const { key } = event;
       if (key === "Enter") {
         if (highlightIndex === -1) {
diff --git a/packages/input-phone/src/PhoneInput.js b/packages/input-phone/src/PhoneInput.js
index e2b1f449c..a82039fc3 100644
--- a/packages/input-phone/src/PhoneInput.js
+++ b/packages/input-phone/src/PhoneInput.js
@@ -90,7 +90,7 @@ const PhoneInput = ({
     [country],
   );
 
-  const handleCountrySelection = useCallback(code => {
+  const handleCountrySelection = useCallback((code) => {
     setSelectedCountry(code);
     setCountryQuery("");
     triggerChange("", code);
@@ -104,7 +104,7 @@ const PhoneInput = ({
     cancelFnRef: dismissRef,
   });
 
-  const handleSearchChange = useCallback(event => {
+  const handleSearchChange = useCallback((event) => {
     setCountryQuery(event.target.value);
     resetIndex();
     listRef.current?.scrollTo(0);
@@ -154,11 +154,11 @@ const PhoneInput = ({
               code={country}
             />
           }
-          content={dismiss => {
+          content={(dismiss) => {
             dismissRef.current = dismiss;
             return (
               <PopoverWrapper
-                onClick={event => {
+                onClick={(event) => {
                   // We stop propagation to avoid giving focus to the main input
                   // This happens because the popover is inside the input wrapper
                   event.stopPropagation();
diff --git a/packages/input-phone/src/PhoneInput.story.js b/packages/input-phone/src/PhoneInput.story.js
index 31ff850d1..04acf8009 100644
--- a/packages/input-phone/src/PhoneInput.story.js
+++ b/packages/input-phone/src/PhoneInput.story.js
@@ -6,7 +6,7 @@ import PhoneInput from ".";
 export default {
   title: "Form|Phone Input",
   component: PhoneInput,
-  decorators: [story => <div style={{ height: 400 }}>{story()}</div>],
+  decorators: [(story) => <div style={{ height: 400 }}>{story()}</div>],
   parameters: {
     componentSubtitle: "An Input component for international phone numbers",
   },
@@ -23,7 +23,7 @@ export const withState = () => {
     const [value, setValue] = useState("");
     return (
       <PhoneInput
-        onChange={newValue => {
+        onChange={(newValue) => {
           action("onChange")(newValue);
           setValue(newValue);
         }}
@@ -47,7 +47,7 @@ export const changingDefaultCountry = () => {
     return (
       <>
         <PhoneInput
-          onChange={newValue => {
+          onChange={(newValue) => {
             action("onChange")(newValue);
             setValue(newValue);
           }}
diff --git a/packages/input-phone/src/PhoneInput.styled.js b/packages/input-phone/src/PhoneInput.styled.js
index e8980ef89..053da4724 100644
--- a/packages/input-phone/src/PhoneInput.styled.js
+++ b/packages/input-phone/src/PhoneInput.styled.js
@@ -8,7 +8,7 @@ export const PopoverWrapper = styled.div`
   height: 100%;
   min-height: 340px;
   min-width: 280px;
-  @media only screen and (max-width: ${props => props.fullScreenBreakpoint}) {
+  @media only screen and (max-width: ${(props) => props.fullScreenBreakpoint}) {
     min-height: calc(100vh - 32px);
   }
 `;
@@ -24,7 +24,7 @@ export const CountryListWrapper = styled.ul`
 export const NationalNumberInput = styled(TextInput)`
   .input {
     overflow: unset;
-    @media only screen and (max-width: ${props =>
+    @media only screen and (max-width: ${(props) =>
         props.tooltipProps?.fullScreenBreakpoint ||
         props.fullScreenBreakpoint}) {
       input {
diff --git a/packages/input-phone/updateCountryList.js b/packages/input-phone/updateCountryList.js
index 50cf179a8..292abb73f 100644
--- a/packages/input-phone/updateCountryList.js
+++ b/packages/input-phone/updateCountryList.js
@@ -5,16 +5,16 @@ const { getCountryCallingCode } = require("libphonenumber-js");
 
 const getNativeNames = (names, englishName) => {
   const nativeNames = Array.from(
-    new Set(Object.keys(names).map(lang => names[lang].common)),
+    new Set(Object.keys(names).map((lang) => names[lang].common)),
   )
-    .filter(nativeName => nativeName !== englishName)
+    .filter((nativeName) => nativeName !== englishName)
     .join("; ");
 
   return nativeNames;
 };
 
 const trimmedList = countries
-  .map(country => {
+  .map((country) => {
     let callingCode;
     try {
       callingCode = getCountryCallingCode(country.cca2);
@@ -32,7 +32,7 @@ const trimmedList = countries
       altSpellings: country.altSpellings,
     };
   })
-  .filter(country => country !== null)
+  .filter((country) => country !== null)
   .sort((a, b) => a.name.localeCompare(b.name, "en"));
 
 const flags = trimmedList.reduce((acc, country) => {
diff --git a/packages/input-radio/src/Radio.js b/packages/input-radio/src/Radio.js
index b6f01713d..93e97bacc 100644
--- a/packages/input-radio/src/Radio.js
+++ b/packages/input-radio/src/Radio.js
@@ -17,7 +17,7 @@ class Radio extends React.Component {
     }
   }
 
-  handleClick = event => {
+  handleClick = (event) => {
     const { disabled, value } = this.props;
     const { checked } = this.state;
     if (!disabled) {
diff --git a/packages/input-radio/src/RadioGroup.js b/packages/input-radio/src/RadioGroup.js
index de61032ea..10e735d92 100644
--- a/packages/input-radio/src/RadioGroup.js
+++ b/packages/input-radio/src/RadioGroup.js
@@ -8,14 +8,14 @@ class RadioGroup extends React.Component {
     value: this.props.defaultValue,
   };
 
-  componentDidUpdate = prevProps => {
+  componentDidUpdate = (prevProps) => {
     const { defaultValue } = this.props;
     if (prevProps.defaultValue !== defaultValue) {
       this.setState({ value: defaultValue });
     }
   };
 
-  handleChange = value => {
+  handleChange = (value) => {
     this.setState({
       value,
     });
@@ -29,7 +29,7 @@ class RadioGroup extends React.Component {
     const allChildrenProps = { name, onChange: this.handleChange };
     return (
       <Group className={this.props.className}>
-        {React.Children.map(children, child => {
+        {React.Children.map(children, (child) => {
           const checked = child.props.value === value;
           const childProps = {
             checked,
diff --git a/packages/input-radio/src/styledComponents/Label.js b/packages/input-radio/src/styledComponents/Label.js
index 27781b841..16e946520 100644
--- a/packages/input-radio/src/styledComponents/Label.js
+++ b/packages/input-radio/src/styledComponents/Label.js
@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { colors } from "@crave/farmblocks-theme";
 
-const enabledStyles = props =>
+const enabledStyles = (props) =>
   (props.disabled &&
     css`
       .visibleInput {
@@ -18,7 +18,7 @@ const enabledStyles = props =>
     }
   `;
 
-const checkedStyles = props =>
+const checkedStyles = (props) =>
   props.checked &&
   css`
     .checkedIndicator {
diff --git a/packages/input-select/src/Select.js b/packages/input-select/src/Select.js
index d3ac2bd5d..4eb99219d 100644
--- a/packages/input-select/src/Select.js
+++ b/packages/input-select/src/Select.js
@@ -41,7 +41,7 @@ class Select extends React.Component {
     };
   }
 
-  componentDidUpdate = prevProps => {
+  componentDidUpdate = (prevProps) => {
     const { value } = this.props;
     if (
       ((value || value === 0) &&
@@ -56,7 +56,7 @@ class Select extends React.Component {
     }
   };
 
-  onMenuVisibilityChange = isMenuOpen => {
+  onMenuVisibilityChange = (isMenuOpen) => {
     if (!this.props.disableSearch && isMenuOpen && this.input) {
       this.input.select();
     }
@@ -64,7 +64,7 @@ class Select extends React.Component {
     this.props.onMenuVisibilityChange?.(isMenuOpen);
   };
 
-  onFilter = event => {
+  onFilter = (event) => {
     if (!this.state.isSearching && !this.props.multi) {
       this.props.onChange("");
     }
@@ -82,9 +82,9 @@ class Select extends React.Component {
     onChange(item.value);
   };
 
-  onRemoveTag = value => this.onSelect("", { value });
+  onRemoveTag = (value) => this.onSelect("", { value });
 
-  onKeyDown = autoCompleteOnKeyDown => event => {
+  onKeyDown = (autoCompleteOnKeyDown) => (event) => {
     const { value } = this.props;
     if (
       this.props.multi &&
@@ -98,21 +98,21 @@ class Select extends React.Component {
   };
 
   // eslint-disable-next-line consistent-return
-  getSelectedLabel = props => {
+  getSelectedLabel = (props) => {
     const item =
       (props.value || props.value === 0) &&
-      props.items.find(x => x.value === props.value);
+      props.items.find((x) => x.value === props.value);
 
     if (item) {
       return item.label;
     }
   };
 
-  normalizeItems = memoize(items => groupBy(items, "value"));
+  normalizeItems = memoize((items) => groupBy(items, "value"));
 
   renderTags = () => {
     const items = this.normalizeItems(this.props.items);
-    return getValues(this.props)?.map(value => {
+    return getValues(this.props)?.map((value) => {
       const item = items[value]?.[0];
       if (!item) return null;
 
@@ -129,7 +129,7 @@ class Select extends React.Component {
     });
   };
 
-  renderInput = autoCompleteProps => {
+  renderInput = (autoCompleteProps) => {
     const { ref, ...rest } = autoCompleteProps;
 
     const {
@@ -150,7 +150,7 @@ class Select extends React.Component {
       : this.props.validationMessages;
 
     const selectedItem = items.find(
-      item => item.label === autoCompleteProps.value,
+      (item) => item.label === autoCompleteProps.value,
     );
     const image = selectedItem && selectedItem.image;
 
@@ -172,7 +172,7 @@ class Select extends React.Component {
     );
   };
 
-  renderMenu = items => {
+  renderMenu = (items) => {
     const { noResultsMessage, maxHeight } = this.props;
 
     if (!items?.length) {
@@ -215,7 +215,7 @@ class Select extends React.Component {
     );
   };
 
-  shouldItemRender = item => {
+  shouldItemRender = (item) => {
     const { selectedLabel } = this.state;
     if (this.state.isSearching) {
       return (
@@ -236,7 +236,7 @@ class Select extends React.Component {
         <ReactAutocomplete
           items={items}
           shouldItemRender={this.shouldItemRender}
-          getItemValue={item => item.label}
+          getItemValue={(item) => item.label}
           value={this.state.selectedLabel}
           onChange={this.onFilter}
           onSelect={this.onSelect}
@@ -246,7 +246,7 @@ class Select extends React.Component {
           autoHighlight={false}
           onMenuVisibilityChange={this.onMenuVisibilityChange}
           wrapperStyle={{}}
-          ref={ref => {
+          ref={(ref) => {
             this.input = ref;
           }}
         />
diff --git a/packages/input-select/src/Select.story.js b/packages/input-select/src/Select.story.js
index e69467dc6..bfc029350 100644
--- a/packages/input-select/src/Select.story.js
+++ b/packages/input-select/src/Select.story.js
@@ -65,7 +65,7 @@ storiesOf("Select Input", module)
     <Select
       placeholder="Select fruit"
       label="Fruit"
-      items={items.map(item => ({ ...item, image: imgSrc }))}
+      items={items.map((item) => ({ ...item, image: imgSrc }))}
       onChange={action("onChange")}
       renderItem={(item, selected) => (
         <div
@@ -223,7 +223,7 @@ storiesOf("Select Input", module)
         });
       };
 
-      onSelectChange = value => {
+      onSelectChange = (value) => {
         this.setState({
           itemValue: value,
         });
@@ -271,7 +271,7 @@ storiesOf("Select Input", module)
 
 const ValueState = ({ children }) => {
   const [value, setValue] = useState([]);
-  return React.Children.map(children, child =>
+  return React.Children.map(children, (child) =>
     React.cloneElement(child, { value, onChange: setValue }),
   );
 };
diff --git a/packages/input-select/src/components/Item.story.js b/packages/input-select/src/components/Item.story.js
index 7b5a09d3a..7cbae8a87 100644
--- a/packages/input-select/src/components/Item.story.js
+++ b/packages/input-select/src/components/Item.story.js
@@ -9,10 +9,10 @@ const StyledWrapper = styled.div`
   width: 300px;
 `;
 
-const Wrapper = props => <StyledWrapper {...props} />;
+const Wrapper = (props) => <StyledWrapper {...props} />;
 
 storiesOf("Select Input/Item", module)
-  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
+  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
   .add("text only", () => <Item label="Hello" />)
   .add("withID", () => <Item label="Hello" id="Select-item-withId" />)
   .add("with image", () => <Item label="Hello" image={imgSrc} />)
diff --git a/packages/input-select/src/components/withImage.js b/packages/input-select/src/components/withImage.js
index 8a6db47b2..3c9a4c0bf 100644
--- a/packages/input-select/src/components/withImage.js
+++ b/packages/input-select/src/components/withImage.js
@@ -12,7 +12,7 @@ const ItemImage = styled(Image)`
 
 export const refName = "inputRef";
 
-export default Input =>
+export default (Input) =>
   class InputWithImage extends React.Component {
     static propTypes = {
       image: PropTypes.string,
diff --git a/packages/input-select/src/styledComponents/DropdownWrapper.js b/packages/input-select/src/styledComponents/DropdownWrapper.js
index 9cf467da5..a91f0dcd4 100644
--- a/packages/input-select/src/styledComponents/DropdownWrapper.js
+++ b/packages/input-select/src/styledComponents/DropdownWrapper.js
@@ -2,6 +2,6 @@ import styled from "styled-components";
 import { DropdownWrapper } from "@crave/farmblocks-dropdown";
 
 export default styled(DropdownWrapper)`
-  width: ${props => props.width};
-  z-index: ${props => props.zIndex};
+  width: ${(props) => props.width};
+  z-index: ${(props) => props.zIndex};
 `;
diff --git a/packages/input-text/src/ProtectedCover.js b/packages/input-text/src/ProtectedCover.js
index 7c0e48e14..bb44033de 100644
--- a/packages/input-text/src/ProtectedCover.js
+++ b/packages/input-text/src/ProtectedCover.js
@@ -47,32 +47,30 @@ const ProtectedCover = ({
   label,
   validationMessages,
   invalid,
-}) => {
-  return (
-    <Cover
-      label={label}
-      validationMessages={validationMessages}
-      invalid={invalid || validationMessages?.length}
-      className="protected-input-cover"
-      data-testid="protected-input-cover"
-    >
-      <div className="input">
-        {prefix && <div className="prefix">{prefix}</div>}
-        {protectedValue || value}
-        {!disabled && (
-          <Link
-            className="clear"
-            onClick={handleEditClick}
-            onKeyDown={handleEditClick}
-            data-testid="edit-link"
-          >
-            <SmEdit />
-          </Link>
-        )}
-      </div>
-    </Cover>
-  );
-};
+}) => (
+  <Cover
+    label={label}
+    validationMessages={validationMessages}
+    invalid={invalid || validationMessages?.length}
+    className="protected-input-cover"
+    data-testid="protected-input-cover"
+  >
+    <div className="input">
+      {prefix && <div className="prefix">{prefix}</div>}
+      {protectedValue || value}
+      {!disabled && (
+        <Link
+          className="clear"
+          onClick={handleEditClick}
+          onKeyDown={handleEditClick}
+          data-testid="edit-link"
+        >
+          <SmEdit />
+        </Link>
+      )}
+    </div>
+  </Cover>
+);
 
 ProtectedCover.propTypes = {
   value: PropTypes.node,
diff --git a/packages/input-text/src/protectedValue.js b/packages/input-text/src/protectedValue.js
index fa48d72c0..0b3f90602 100644
--- a/packages/input-text/src/protectedValue.js
+++ b/packages/input-text/src/protectedValue.js
@@ -23,8 +23,8 @@ export const protectedValueProps = {
 
 // HOC that covers a component with a dummy text field
 // until the edit button is clicked
-export default WrappedComponent => {
-  return class ProtectedInput extends React.Component {
+export default (WrappedComponent) =>
+  class ProtectedInput extends React.Component {
     static propTypes = {
       ...protectedValueProps,
       ...formInputProps,
@@ -36,7 +36,7 @@ export default WrappedComponent => {
       editedValue: "",
     };
 
-    componentDidUpdate = prevProps => {
+    componentDidUpdate = (prevProps) => {
       if (this.props.value !== prevProps.value) {
         this.setState({
           value: this.props.value,
@@ -53,12 +53,12 @@ export default WrappedComponent => {
       this.setState({ isEditing: false, editedValue: "" });
     };
 
-    onReplace = value => {
+    onReplace = (value) => {
       this.setState({ value, isEditing: false, editedValue: "" });
     };
 
     // protected fields will listen to Enter key as an OK and Esc key as Cancel
-    onKeyDown = evt => {
+    onKeyDown = (evt) => {
       if (evt.key === "Enter") {
         const { value } = evt.target;
         this.onReplace(value);
@@ -90,11 +90,11 @@ export default WrappedComponent => {
             focused={covered ? this.state.isEditing : focused}
             value={isEditing ? this.state.editedValue : this.state.value}
             onKeyDown={this.onKeyDown}
-            onChange={event => {
+            onChange={(event) => {
               this.setState({ editedValue: event.target.value });
               this.props.onChange?.(event);
             }}
-            onBlur={event => {
+            onBlur={(event) => {
               if (covered && isEditing) {
                 this.onCancel();
               }
@@ -118,4 +118,3 @@ export default WrappedComponent => {
       );
     }
   };
-};
diff --git a/packages/label/src/Label.js b/packages/label/src/Label.js
index e8cf9906b..0a3472d6a 100644
--- a/packages/label/src/Label.js
+++ b/packages/label/src/Label.js
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { colors } from "@crave/farmblocks-theme";
 
-const labelColor = props => {
+const labelColor = (props) => {
   if (props.focused) {
     return colors.INDIGO_MILK_CAP;
   }
diff --git a/packages/link/src/components/Link.js b/packages/link/src/components/Link.js
index 37f0d6514..d7fc3f560 100644
--- a/packages/link/src/components/Link.js
+++ b/packages/link/src/components/Link.js
@@ -6,7 +6,7 @@ import { MdLinkExternal } from "@crave/farmblocks-icon";
 import linkTypes from "../constants/linkTypes";
 import StyledLink from "../styledComponents/Link";
 
-const Link = props => {
+const Link = (props) => {
   const {
     size,
     lineHeight,
diff --git a/packages/link/src/styledComponents/Link.js b/packages/link/src/styledComponents/Link.js
index f5457e6c0..22914b43b 100644
--- a/packages/link/src/styledComponents/Link.js
+++ b/packages/link/src/styledComponents/Link.js
@@ -58,13 +58,13 @@ const LinkContainer = styled.div`
     margin-right: 4px;
   }
 
-  font-size: ${props => props.size}px;
+  font-size: ${(props) => props.size}px;
   font-weight: ${({ fontWeight }) => fontWeight};
 
-  line-height: ${props => props.lineHeight};
+  line-height: ${(props) => props.lineHeight};
 
   transition: all 0.3s ease;
-  cursor: ${props => (props.disabled ? "default" : "pointer")};
+  cursor: ${(props) => (props.disabled ? "default" : "pointer")};
 
   ${textDecoration};
 
diff --git a/packages/map-balloon/src/MapBalloon.js b/packages/map-balloon/src/MapBalloon.js
index 4145553ed..0be1d5f23 100644
--- a/packages/map-balloon/src/MapBalloon.js
+++ b/packages/map-balloon/src/MapBalloon.js
@@ -60,7 +60,7 @@ const MapBalloon = ({
             pinSize={pinSize}
             interactive={interactivePin}
             animated={animated}
-            onClick={onPinClick && (event => onPinClick(value, event))}
+            onClick={onPinClick && ((event) => onPinClick(value, event))}
           >
             {pinIcon}
           </Pin>
@@ -79,7 +79,7 @@ const MapBalloon = ({
               pinSize={pinSize}
               interactive={interactiveBalloon}
               onClick={
-                onBalloonClick && (event => onBalloonClick(value, event))
+                onBalloonClick && ((event) => onBalloonClick(value, event))
               }
               balloonSize={balloonSize}
             >
@@ -115,7 +115,7 @@ const MapBalloon = ({
   );
 };
 
-export const requiredIfNoSingleImage = propType => (...args) => {
+export const requiredIfNoSingleImage = (propType) => (...args) => {
   const [props] = args;
   return props.singleImage ? propType(...args) : propType.isRequired(...args);
 };
diff --git a/packages/map-balloon/src/MapBalloon.story.js b/packages/map-balloon/src/MapBalloon.story.js
index 6a1bb4a5d..f8f9c91fd 100644
--- a/packages/map-balloon/src/MapBalloon.story.js
+++ b/packages/map-balloon/src/MapBalloon.story.js
@@ -17,7 +17,7 @@ const StyledDemoGrid = styled.div`
   background: #ccc url(${bgImage});
 `;
 
-const DemoGrid = props => <StyledDemoGrid {...props} />;
+const DemoGrid = (props) => <StyledDemoGrid {...props} />;
 
 const imageSet = [
   {
@@ -54,7 +54,7 @@ storiesOf("Map Balloon", module)
 
       componentDidMount() {
         this.interval = window.setInterval(
-          () => this.setState(prevState => ({ open: !prevState.open })),
+          () => this.setState((prevState) => ({ open: !prevState.open })),
           2000,
         );
       }
@@ -202,7 +202,7 @@ storiesOf("Map Balloon", module)
         state = { open: false };
 
         handlePinClick = () =>
-          this.setState(prevState => ({ open: !prevState.open }));
+          this.setState((prevState) => ({ open: !prevState.open }));
 
         render() {
           return (
diff --git a/packages/map-balloon/src/styledComponents/Balloon.js b/packages/map-balloon/src/styledComponents/Balloon.js
index 673324082..030a73dde 100644
--- a/packages/map-balloon/src/styledComponents/Balloon.js
+++ b/packages/map-balloon/src/styledComponents/Balloon.js
@@ -34,7 +34,7 @@ const animation = css`
 const interactiveStyle = css`
   cursor: pointer;
 
-  bottom: ${props => props.pinSize / 2 + 8}px;
+  bottom: ${(props) => props.pinSize / 2 + 8}px;
 
   color: ${colors.GREY_16};
 
@@ -44,16 +44,16 @@ const interactiveStyle = css`
   }
 `;
 const Balloon = styled(Card).attrs({ overflow: "hidden", p: 0 })`
-  ${props => props.animated && animation};
+  ${(props) => props.animated && animation};
   position: absolute;
-  bottom: ${props => props.pinSize + 8}px;
+  bottom: ${(props) => props.pinSize + 8}px;
 
-  ${props => alignStyles[props.align]};
+  ${(props) => alignStyles[props.align]};
 
-  height: ${props => props.balloonSize}px;
-  width: ${props => props.balloonSize}px;
+  height: ${(props) => props.balloonSize}px;
+  width: ${(props) => props.balloonSize}px;
   padding: 0;
-  border-radius: ${props => props.borderRadius};
+  border-radius: ${(props) => props.borderRadius};
   border: none;
   box-shadow: 0 2px 16px 0 ${colors.GREY_16};
 
@@ -66,7 +66,7 @@ const Balloon = styled(Card).attrs({ overflow: "hidden", p: 0 })`
     margin: 16px 8px;
   }
 
-  ${props => (props.interactive ? interactiveStyle : "")};
+  ${(props) => (props.interactive ? interactiveStyle : "")};
 `;
 
 export const Caption = styled(Text)`
diff --git a/packages/map-balloon/src/styledComponents/PhotoBox.js b/packages/map-balloon/src/styledComponents/PhotoBox.js
index e80556b14..bd40e581c 100644
--- a/packages/map-balloon/src/styledComponents/PhotoBox.js
+++ b/packages/map-balloon/src/styledComponents/PhotoBox.js
@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 export default styled.div`
   flex: 1;
-  background-image: url(${props => props.image});
+  background-image: url(${(props) => props.image});
   background-size: cover;
   background-position: center;
   display: flex;
diff --git a/packages/map-balloon/src/styledComponents/Pin.js b/packages/map-balloon/src/styledComponents/Pin.js
index d9daae47b..02d24d587 100644
--- a/packages/map-balloon/src/styledComponents/Pin.js
+++ b/packages/map-balloon/src/styledComponents/Pin.js
@@ -2,15 +2,15 @@ import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 import { colors } from "@crave/farmblocks-theme";
 
-const pinSize = props => props.pinSize;
-const offset = props => pinSize(props) / 2;
+const pinSize = (props) => props.pinSize;
+const offset = (props) => pinSize(props) / 2;
 
 const interactiveStyle = css`
-  ${props =>
+  ${(props) =>
     props.animated
       ? "transition: transform 0.3s, color 0.3s, background-color 0.3s"
       : ""};
-  font-size: ${props => props.pinSize - 10}px;
+  font-size: ${(props) => props.pinSize - 10}px;
   height: ${pinSize}px;
   box-sizing: border-box;
   cursor: pointer;
@@ -18,7 +18,7 @@ const interactiveStyle = css`
   bottom: -${offset}px;
   text-shadow: none;
 
-  color: ${props => props.pinColor};
+  color: ${(props) => props.pinColor};
   background-color: white;
 
   border-radius: 50%;
@@ -32,7 +32,7 @@ const interactiveStyle = css`
 
   &.open {
     color: white;
-    background-color: ${props => props.pinHighlightColor || props.pinColor};
+    background-color: ${(props) => props.pinHighlightColor || props.pinColor};
   }
 `;
 
@@ -48,11 +48,11 @@ const Pin = styled.div`
   bottom: 0;
   left: -${offset}px;
 
-  color: ${props => props.pinColor};
+  color: ${(props) => props.pinColor};
 
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.24));
 
-  ${props => (props.interactive ? interactiveStyle : "")};
+  ${(props) => (props.interactive ? interactiveStyle : "")};
 `;
 
 Pin.propTypes = {
diff --git a/packages/map-balloon/src/styledComponents/SingleImage.js b/packages/map-balloon/src/styledComponents/SingleImage.js
index f4d6aac36..a8f396814 100644
--- a/packages/map-balloon/src/styledComponents/SingleImage.js
+++ b/packages/map-balloon/src/styledComponents/SingleImage.js
@@ -9,7 +9,7 @@ const EnhancedImage = styled(Image)`
   position: absolute;
   bottom: 16px;
   left: -92px;
-  border-radius: ${props => props.borderRadius};
+  border-radius: ${(props) => props.borderRadius};
   box-shadow: 0 2px 16px 0 ${colors.GREY_16};
 `;
 
@@ -21,10 +21,10 @@ const Pin = styled.div`
   position: absolute;
   bottom: -8px;
   left: -8px;
-  background-color: ${props => props.pinColor};
+  background-color: ${(props) => props.pinColor};
 `;
 
-const SingleImage = props => (
+const SingleImage = (props) => (
   <div>
     <Pin {...props} />
     <EnhancedImage {...props} size={184} />
diff --git a/packages/map-balloon/src/styledComponents/Wrapper.js b/packages/map-balloon/src/styledComponents/Wrapper.js
index f9aee201b..37d0c6fed 100644
--- a/packages/map-balloon/src/styledComponents/Wrapper.js
+++ b/packages/map-balloon/src/styledComponents/Wrapper.js
@@ -3,10 +3,10 @@ import styled from "styled-components";
 
 const Wrapper = styled.div`
   position: absolute;
-  top: ${props => props.y}px;
-  left: ${props => props.x}px;
+  top: ${(props) => props.y}px;
+  left: ${(props) => props.x}px;
 
-  opacity: ${props => props.opacity};
+  opacity: ${(props) => props.opacity};
 `;
 Wrapper.propTypes = {
   x: PropTypes.number.isRequired,
diff --git a/packages/modal/src/DialogModal.js b/packages/modal/src/DialogModal.js
index e5b4c98c4..ef6bd82eb 100644
--- a/packages/modal/src/DialogModal.js
+++ b/packages/modal/src/DialogModal.js
@@ -7,7 +7,7 @@ import Modal from "./Modal";
 
 const modalPropKeys = [...Object.keys(Modal.propTypes), "className"];
 
-const DialogModal = props => (
+const DialogModal = (props) => (
   <Modal
     showCloseButton={false}
     {...pick(props, modalPropKeys)}
diff --git a/packages/modal/src/Modal.hooks.js b/packages/modal/src/Modal.hooks.js
index 139985ca4..ade6af77d 100644
--- a/packages/modal/src/Modal.hooks.js
+++ b/packages/modal/src/Modal.hooks.js
@@ -7,7 +7,7 @@ import { getScrollWidth } from "./utils";
 export const useESCKey = ({ condition, element, listener }) =>
   useEffect(() => {
     if (condition) {
-      const handleKeyDown = event => {
+      const handleKeyDown = (event) => {
         if (event.key === "Escape") listener?.(event);
       };
 
diff --git a/packages/modal/src/Modal.js b/packages/modal/src/Modal.js
index 58c72c9ed..5be443083 100644
--- a/packages/modal/src/Modal.js
+++ b/packages/modal/src/Modal.js
@@ -166,6 +166,6 @@ Modal.propTypes = {
   zIndex: PropTypes.number,
 };
 
-export const ModalTitle = props => <Text fontWeight="title" {...props} />;
+export const ModalTitle = (props) => <Text fontWeight="title" {...props} />;
 
 export default Modal;
diff --git a/packages/modal/src/Modal.story.js b/packages/modal/src/Modal.story.js
index 30370b015..455d13cc1 100644
--- a/packages/modal/src/Modal.story.js
+++ b/packages/modal/src/Modal.story.js
@@ -84,43 +84,35 @@ storiesOf("Modal", module)
       <PreLine>{lipsum}</PreLine>
     </Modal>
   ))
-  .add("With cardProps and custom header", () => {
-    return (
-      <Modal
-        isOpen
-        header={<Header>HEADER</Header>}
-        cardProps={{ width: "400px", floating: false }}
-      >
-        <PreLine>{lipsum}</PreLine>
-      </Modal>
-    );
-  })
-  .add("With cardProps, header and footer", () => {
-    return (
-      <Modal
-        isOpen
-        header={<ModalTitle>HEADER</ModalTitle>}
-        footer={
-          <div
-            style={{
-              width: "100%",
-              justifyContent: "flex-end",
-              display: "flex",
-            }}
-          >
-            <Button
-              text="Action Button"
-              variant={buttonVariants.PRIMARY}
-              small
-            />
-          </div>
-        }
-        cardProps={{ width: "400px", floating: false }}
-      >
-        <PreLine>{lipsum}</PreLine>
-      </Modal>
-    );
-  })
+  .add("With cardProps and custom header", () => (
+    <Modal
+      isOpen
+      header={<Header>HEADER</Header>}
+      cardProps={{ width: "400px", floating: false }}
+    >
+      <PreLine>{lipsum}</PreLine>
+    </Modal>
+  ))
+  .add("With cardProps, header and footer", () => (
+    <Modal
+      isOpen
+      header={<ModalTitle>HEADER</ModalTitle>}
+      footer={
+        <div
+          style={{
+            width: "100%",
+            justifyContent: "flex-end",
+            display: "flex",
+          }}
+        >
+          <Button text="Action Button" variant={buttonVariants.PRIMARY} small />
+        </div>
+      }
+      cardProps={{ width: "400px", floating: false }}
+    >
+      <PreLine>{lipsum}</PreLine>
+    </Modal>
+  ))
   .add("With custom close button props", () => (
     <Modal
       isOpen
diff --git a/packages/modal/src/helpers.js b/packages/modal/src/helpers.js
index ac025fe42..0c371cac1 100644
--- a/packages/modal/src/helpers.js
+++ b/packages/modal/src/helpers.js
@@ -7,7 +7,7 @@ export const useModal = ({ openAtMount = false } = {}) => {
     () => ({
       open: () => setOpen(true),
       close: () => setOpen(false),
-      toggle: () => setOpen(val => !val),
+      toggle: () => setOpen((val) => !val),
     }),
 
     [setOpen],
diff --git a/packages/popover/src/Popover.js b/packages/popover/src/Popover.js
index b9d8805d7..2e130a459 100644
--- a/packages/popover/src/Popover.js
+++ b/packages/popover/src/Popover.js
@@ -6,7 +6,7 @@ import { TooltipContent } from "@crave/farmblocks-tooltip";
 
 const Container = styled.div`
   display: inline-block;
-  width: ${props => props.width};
+  width: ${(props) => props.width};
 
   .appear-enter {
     opacity: 0;
@@ -44,7 +44,7 @@ class Popover extends React.Component {
     });
   }
 
-  handleOuterClick = event => {
+  handleOuterClick = (event) => {
     if (this.popover?.contains(event.target)) {
       return;
     }
@@ -55,7 +55,7 @@ class Popover extends React.Component {
     }
   };
 
-  toggle = async event => {
+  toggle = async (event) => {
     event?.stopPropagation?.();
     const { onOpen, onClose, disabled } = this.props;
 
@@ -89,7 +89,7 @@ class Popover extends React.Component {
     return (
       <Container
         className={this.props.className}
-        ref={popover => {
+        ref={(popover) => {
           this.popover = popover;
         }}
         width={this.props.triggerWidth}
diff --git a/packages/popover/src/Popover.story.js b/packages/popover/src/Popover.story.js
index f6a556f41..1e01a2c0b 100644
--- a/packages/popover/src/Popover.story.js
+++ b/packages/popover/src/Popover.story.js
@@ -47,7 +47,7 @@ storiesOf("Popover", module)
     <Popover
       trigger={<Link>Trigger</Link>}
       onOutsideClick={action("onOutsideClick")}
-      content={dismiss => (
+      content={(dismiss) => (
         <div>
           <Text>Popover content</Text>
           <button onClick={dismiss}>Dismiss</button>
@@ -61,7 +61,7 @@ storiesOf("Popover", module)
       onOutsideClick={action("onOutsideClick")}
       onOpen={action("onOpen")}
       onClose={action("onClose")}
-      content={dismiss => (
+      content={(dismiss) => (
         <div>
           <Text>Popover content</Text>
           <button onClick={dismiss}>Dismiss</button>
@@ -73,7 +73,7 @@ storiesOf("Popover", module)
     <Popover
       trigger={<button>Trigger</button>}
       onOutsideClick={action("onOutsideClick")}
-      content={dismiss => (
+      content={(dismiss) => (
         <div>
           <Text>Popover content</Text>
           <button onClick={dismiss}>Dismiss</button>
@@ -86,12 +86,12 @@ storiesOf("Popover", module)
     <Popover
       trigger={<button>hit me</button>}
       onOutsideClick={action("onOutsideClick")}
-      content={dismiss => (
+      content={(dismiss) => (
         <div style={{ display: "flex" }}>
           <button onClick={dismiss}>dismiss foo</button>
           <Popover
             trigger={<button>other popover</button>}
-            content={dismissSecond => (
+            content={(dismissSecond) => (
               <button onClick={dismissSecond}>dismiss bar</button>
             )}
           />
@@ -101,7 +101,7 @@ storiesOf("Popover", module)
   ))
   .add("trigger as function", () => (
     <Popover
-      trigger={isVisible => (
+      trigger={(isVisible) => (
         <Link>{`This Popover is ${isVisible ? "open" : "closed"}`}</Link>
       )}
       content={() => <Text>Popover content</Text>}
@@ -141,7 +141,7 @@ storiesOf("Popover", module)
       content={() => <Text>Popover content</Text>}
       onBeforeOpen={() => {
         action("onBeforeOpen")();
-        return new Promise(resolve => setTimeout(resolve, 2000));
+        return new Promise((resolve) => setTimeout(resolve, 2000));
       }}
       onOpen={action("onOpen")}
       onOutsideClick={action("onOutsideClick")}
diff --git a/packages/scaffold/src/create-component.js b/packages/scaffold/src/create-component.js
index 66e4c18ac..a53e14b0d 100755
--- a/packages/scaffold/src/create-component.js
+++ b/packages/scaffold/src/create-component.js
@@ -33,7 +33,7 @@ const questions = [
     type: "input",
     name: "keywords",
     default: "farmblocks, react",
-    filter: value => value.split(",").map(v => v.trim()),
+    filter: (value) => value.split(",").map((v) => v.trim()),
     message: "Keywords",
   },
   {
@@ -44,7 +44,7 @@ const questions = [
 ];
 
 prompt(questions)
-  .then(answers => {
+  .then((answers) => {
     const packageJSON = packageContents(answers);
     const readme = readmeContents(answers);
     const { fullName, shortName } = answers;
diff --git a/packages/scaffold/src/templates/component.js b/packages/scaffold/src/templates/component.js
index d4e78c604..37f428f20 100644
--- a/packages/scaffold/src/templates/component.js
+++ b/packages/scaffold/src/templates/component.js
@@ -1,6 +1,6 @@
 const { format } = require("prettier");
 
-const componentTemplate = componentName =>
+const componentTemplate = (componentName) =>
   format(
     `
 import * as React from "react"; 
diff --git a/packages/scaffold/src/templates/index.js b/packages/scaffold/src/templates/index.js
index 3afadba89..71bdb3bfe 100644
--- a/packages/scaffold/src/templates/index.js
+++ b/packages/scaffold/src/templates/index.js
@@ -1,4 +1,4 @@
-const indexTemplate = componentName =>
+const indexTemplate = (componentName) =>
   `export { default } from "./${componentName}";`;
 
 module.exports = indexTemplate;
diff --git a/packages/search-field/src/SearchField.js b/packages/search-field/src/SearchField.js
index fc7b90cb6..78891497a 100644
--- a/packages/search-field/src/SearchField.js
+++ b/packages/search-field/src/SearchField.js
@@ -32,7 +32,7 @@ class SearchField extends React.Component {
     }
   };
 
-  componentDidUpdate = prevProps => {
+  componentDidUpdate = (prevProps) => {
     if (
       prevProps.debounceDelay !== this.props.debounceDelay ||
       prevProps.onSearchChange !== this.props.onSearchChange
@@ -72,7 +72,7 @@ class SearchField extends React.Component {
       return this.setState(emptyState);
     }
 
-    const selectedItem = items?.find(item => item[valueKey] === value);
+    const selectedItem = items?.find((item) => item[valueKey] === value);
     if (selectedItem) {
       return this.setState({
         inputValue: selectedItem[labelKey],
@@ -83,8 +83,8 @@ class SearchField extends React.Component {
     return this.setState(emptyState);
   };
 
-  changeHighlight = modifier => {
-    this.setState(prevState => {
+  changeHighlight = (modifier) => {
+    this.setState((prevState) => {
       const { items } = this.props;
       const highlightedIndex = items
         ? Math.max(
@@ -101,7 +101,7 @@ class SearchField extends React.Component {
     });
   };
 
-  handleKeyDown = event => {
+  handleKeyDown = (event) => {
     const { key, target } = event;
     switch (key) {
       case "Enter":
@@ -131,12 +131,12 @@ class SearchField extends React.Component {
     this.setState({ focused: true, highlightedIndex: -1 });
   };
 
-  handleSearchChangeEvent = event => {
+  handleSearchChangeEvent = (event) => {
     const { value } = event.target;
     this.handleSearchChangeValue(value);
   };
 
-  handleSearchChangeValue = value => {
+  handleSearchChangeValue = (value) => {
     this.debouncedOnSearchChange(value);
     if (!value) {
       this.debouncedOnSearchChange.flush();
@@ -196,14 +196,14 @@ class SearchField extends React.Component {
     this.selectResult(selectedIndex);
   };
 
-  renderMenu = props => {
+  renderMenu = (props) => {
     const { highlightedIndex } = this.state;
 
     return (
       <Menu
         {...props}
         className="menu"
-        innerRef={node => {
+        innerRef={(node) => {
           this.scroller = node;
         }}
         onItemClick={this.handleItemClick}
diff --git a/packages/search-field/src/SearchField.story.js b/packages/search-field/src/SearchField.story.js
index f3c848c1c..48ad78e15 100644
--- a/packages/search-field/src/SearchField.story.js
+++ b/packages/search-field/src/SearchField.story.js
@@ -66,7 +66,7 @@ const StyledLoading = styled.div`
   }
 `;
 
-const Loading = props => <StyledLoading {...props} />;
+const Loading = (props) => <StyledLoading {...props} />;
 
 storiesOf("Search Field", module)
   .add("Default", () => <SearchField label="Fruits" />)
@@ -102,7 +102,7 @@ storiesOf("Search Field", module)
   ))
   .add("onBeforeChange proceeding", () => (
     <SearchField
-      onBeforeChange={args => {
+      onBeforeChange={(args) => {
         action("onBeforeChange")(args);
         args.proceed();
       }}
@@ -113,7 +113,7 @@ storiesOf("Search Field", module)
   ))
   .add("onBeforeChange halting", () => (
     <SearchField
-      onBeforeChange={args => {
+      onBeforeChange={(args) => {
         action("onBeforeChange")(args);
       }}
       onChange={action("onChange")}
@@ -150,7 +150,7 @@ storiesOf("Search Field", module)
     <SearchField
       onSearchChange={action("onSearchChange")}
       onChange={action("onChange")}
-      items={items.map(x => ({
+      items={items.map((x) => ({
         code: x.value,
         name: x.label,
         photo: x.image,
diff --git a/packages/search-field/src/components/Menu.story.js b/packages/search-field/src/components/Menu.story.js
index 20b45eaf3..3821e271f 100644
--- a/packages/search-field/src/components/Menu.story.js
+++ b/packages/search-field/src/components/Menu.story.js
@@ -41,9 +41,9 @@ const StyledFooterWrapper = styled.div`
   }
 `;
 
-const Wrapper = props => <StyledWrapper {...props} />;
+const Wrapper = (props) => <StyledWrapper {...props} />;
 
-const FooterWrapper = props => <StyledFooterWrapper {...props} />;
+const FooterWrapper = (props) => <StyledFooterWrapper {...props} />;
 
 const Footer = () => (
   <FooterWrapper>
@@ -60,7 +60,7 @@ const Footer = () => (
 );
 
 storiesOf("Search Field/Menu (Private)", module)
-  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
+  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
   .add("Default", () => <Menu items={items} />)
   .add("onItemClick", () => (
     <Menu onItemClick={action("onItemClick")} items={items} />
@@ -68,7 +68,7 @@ storiesOf("Search Field/Menu (Private)", module)
   .add("with key names", () => (
     <Menu
       onItemClick={action("onItemClick")}
-      items={items.map(x => ({
+      items={items.map((x) => ({
         code: x.value,
         name: x.label,
         photo: x.image,
diff --git a/packages/search-field/src/components/ScrollBox.js b/packages/search-field/src/components/ScrollBox.js
index 137a2558a..65070002a 100644
--- a/packages/search-field/src/components/ScrollBox.js
+++ b/packages/search-field/src/components/ScrollBox.js
@@ -19,7 +19,7 @@ export default class ScrollBox extends React.Component {
     this.wrapper?.removeEventListener("scroll", this.onScroll);
   };
 
-  centerChildByIndex = index => {
+  centerChildByIndex = (index) => {
     const element = this.wrapper.childNodes[index];
     if (!element) return;
     const elementCenter = element.offsetTop + element.clientHeight / 2;
@@ -54,7 +54,7 @@ export default class ScrollBox extends React.Component {
     const reachEnd = remainingContent < halfPage;
 
     if (reachEnd) {
-      this.setState(prevState => {
+      this.setState((prevState) => {
         if (!prevState.atEnd) this.props.onReachEnd();
         return { atEnd: true };
       });
@@ -70,7 +70,7 @@ export default class ScrollBox extends React.Component {
     return (
       <ScrollWrapper
         style={{ maxHeight }}
-        ref={node => {
+        ref={(node) => {
           this.wrapper = node;
         }}
         {...remainingProps}
diff --git a/packages/search-field/src/components/ScrollBox.story.js b/packages/search-field/src/components/ScrollBox.story.js
index b0f20ca9d..dc174d9f4 100644
--- a/packages/search-field/src/components/ScrollBox.story.js
+++ b/packages/search-field/src/components/ScrollBox.story.js
@@ -21,12 +21,12 @@ const StyledContent = styled.div`
   );
 `;
 
-const Wrapper = props => <StyledWrapper {...props} />;
+const Wrapper = (props) => <StyledWrapper {...props} />;
 
-const Content = props => <StyledContent {...props} />;
+const Content = (props) => <StyledContent {...props} />;
 
 storiesOf("Search Field/ScrollBox (Private)", module)
-  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
+  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
   .add("Default", () => (
     <ScrollBox>
       <Content />
diff --git a/packages/search-field/src/styledComponents/ScrollWrapper.js b/packages/search-field/src/styledComponents/ScrollWrapper.js
index 650ccfdfa..f59b6692e 100644
--- a/packages/search-field/src/styledComponents/ScrollWrapper.js
+++ b/packages/search-field/src/styledComponents/ScrollWrapper.js
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export default styled.ul`
-  max-height: ${props => props.maxHeight};
+  max-height: ${(props) => props.maxHeight};
   overflow-y: auto;
   scroll-behavior: smooth;
 `;
diff --git a/packages/sidenav/src/SideNav.story.js b/packages/sidenav/src/SideNav.story.js
index 9e45c6ed6..516ffaec4 100644
--- a/packages/sidenav/src/SideNav.story.js
+++ b/packages/sidenav/src/SideNav.story.js
@@ -33,7 +33,7 @@ export default {
   title: "SideNav/SideNav",
   component: SideNav,
   decorators: [
-    storyFn => (
+    (storyFn) => (
       <div style={{ transform: "scale(1)", minHeight: "500px" }}>
         {storyFn()}
       </div>
@@ -48,7 +48,7 @@ export const SideNavSimple = () => (
 export const CompleteSideNavSimple = () => (
   <>
     <SideNav
-      render={props => (
+      render={(props) => (
         <>
           <NavItem active {...props}>
             Item 1 (active)
@@ -118,10 +118,10 @@ export const SideNavPush = () => {
           expanded={expanded}
           onToggle={toggle}
           onClose={collapse}
-          render={props => (
+          render={(props) => (
             <>
               <NavHeader />
-              {tabs.map(tab => (
+              {tabs.map((tab) => (
                 <NavItem
                   key={tab}
                   onClick={() => setSelected(tab)}
@@ -150,7 +150,7 @@ export const SideNavOverlay = () => {
   const SideNavOverlayComp = () => {
     const [expanded, { toggle, collapse }] = useToggle(false);
     const [selected, setSelected] = useState(tabs[0]);
-    const handleClick = tab => {
+    const handleClick = (tab) => {
       if (expanded) {
         collapse();
       }
@@ -164,10 +164,10 @@ export const SideNavOverlay = () => {
           onToggle={toggle}
           onClose={collapse}
           variant={OVERLAY}
-          render={props => (
+          render={(props) => (
             <>
               <NavHeader />
-              {tabs.map(tab => (
+              {tabs.map((tab) => (
                 <NavItem
                   key={tab}
                   icon={icons[tab]}
@@ -200,7 +200,7 @@ export const SideNavFullScreen = () => {
   const SideNavFullScreenComp = () => {
     const [expanded, { toggle, collapse }] = useToggle(false);
     const [selected, setSelected] = useState(tabs[0]);
-    const handleClick = tab => {
+    const handleClick = (tab) => {
       if (expanded) {
         collapse();
       }
@@ -214,10 +214,10 @@ export const SideNavFullScreen = () => {
           onToggle={toggle}
           onClose={collapse}
           variant={FULLSCREEN}
-          render={props => (
+          render={(props) => (
             <>
               <NavHeader />
-              {tabs.map(tab => (
+              {tabs.map((tab) => (
                 <NavItem
                   key={tab}
                   icon={icons[tab]}
@@ -251,7 +251,7 @@ export const SideNavPushWithRouter = withRouter(({ location }) => {
         expanded={expanded}
         onToggle={toggle}
         onClose={collapse}
-        render={props => (
+        render={(props) => (
           <>
             <NavHeader />
             <NavLinkItems tabs={tabs} location={location} {...props} />
@@ -283,7 +283,7 @@ export const SideNavOverlayWithRouter = withRouter(({ location }) => {
         onToggle={toggle}
         onClose={collapse}
         highlightColor={highlightColor}
-        render={props => (
+        render={(props) => (
           <>
             <NavHeader />
             <NavLinkItems
@@ -316,7 +316,7 @@ export const SideNavFullScreenWithRouter = withRouter(({ location }) => {
         variant={FULLSCREEN}
         onToggle={toggle}
         onClose={collapse}
-        render={props => (
+        render={(props) => (
           <NavLinkItems
             tabs={tabs}
             location={location}
@@ -354,7 +354,7 @@ export const NavWithJsMediaQuery = withRouter(({ location }) => {
         backgroundColor={sidebarColor}
         onClose={collapse}
         offsetTop="56px"
-        render={props => (
+        render={(props) => (
           <NavLinkItems
             tabs={tabs}
             location={location}
@@ -376,7 +376,7 @@ NavWithJsMediaQuery.story = {
 /* eslint-disable */
 const NavLinkItems = ({ tabs, location, onClick, ...props }) => (
   <>
-    {tabs.map(tab => (
+    {tabs.map((tab) => (
       <NavLink to={`/${tab}`} key={tab} style={{ textDecoration: "none" }}>
         <NavItem
           active={location.pathname === `/${tab}`}
@@ -413,7 +413,7 @@ const NavRoutes = ({ tabs }) => (
     }}
   >
     <Switch>
-      {[...tabs, "account"].map(tab => (
+      {[...tabs, "account"].map((tab) => (
         <Route path={`/${tab}`} key={tab}>
           <Text upper fontWeight="title" size={32}>
             {tab}
diff --git a/packages/sidenav/src/components/NavButton/CloseButton.js b/packages/sidenav/src/components/NavButton/CloseButton.js
index 8a0ead502..231dae218 100644
--- a/packages/sidenav/src/components/NavButton/CloseButton.js
+++ b/packages/sidenav/src/components/NavButton/CloseButton.js
@@ -16,7 +16,7 @@ export const CloseButton = styled(NavButtonStyled)`
   ${({ variant }) => variant === PUSH && "display: none;"}
 `;
 
-export default props => (
+export default (props) => (
   <NavButton component={CloseButton} {...props}>
     <MdRemove />
   </NavButton>
diff --git a/packages/sidenav/src/components/NavButton/ToggleButton.js b/packages/sidenav/src/components/NavButton/ToggleButton.js
index 53e563013..5287f545d 100644
--- a/packages/sidenav/src/components/NavButton/ToggleButton.js
+++ b/packages/sidenav/src/components/NavButton/ToggleButton.js
@@ -14,7 +14,7 @@ export const ToggleButton = styled(NavButtonStyled)`
     variant === PUSH ? zIndex + 10 : zIndex - 10};
 `;
 
-export default props => (
+export default (props) => (
   <NavButton component={ToggleButton} {...props}>
     <MdViewList />
   </NavButton>
diff --git a/packages/sidenav/src/components/NavItem/NavItem.story.js b/packages/sidenav/src/components/NavItem/NavItem.story.js
index fc982ddbd..bc177996c 100644
--- a/packages/sidenav/src/components/NavItem/NavItem.story.js
+++ b/packages/sidenav/src/components/NavItem/NavItem.story.js
@@ -8,7 +8,7 @@ import NavItem from "./NavItem";
 export default { title: "SideNav/NavItem", component: NavItem };
 
 export const NavItems = () => {
-  const NavItemWithToggle = props => {
+  const NavItemWithToggle = (props) => {
     const [active, { toggle }] = useToggle(false);
     return <NavItem active={active} onClick={toggle} {...props} />;
   };
diff --git a/packages/sidenav/src/components/NavItem/NavItem.styled.js b/packages/sidenav/src/components/NavItem/NavItem.styled.js
index 504e8cf04..ff89c6d55 100644
--- a/packages/sidenav/src/components/NavItem/NavItem.styled.js
+++ b/packages/sidenav/src/components/NavItem/NavItem.styled.js
@@ -4,7 +4,7 @@ import { transparentize } from "polished";
 
 import { FULLSCREEN } from "../../constants/variants";
 
-const isFullScreen = variant => variant === FULLSCREEN;
+const isFullScreen = (variant) => variant === FULLSCREEN;
 const GREY_48 = "rgba(0, 0, 0, 0.48)";
 
 const fullScreenStyle = css`
diff --git a/packages/sidenav/src/helpers/PageWrapper/PageWrapper.story.js b/packages/sidenav/src/helpers/PageWrapper/PageWrapper.story.js
index a21bbe78e..13b2fe20e 100644
--- a/packages/sidenav/src/helpers/PageWrapper/PageWrapper.story.js
+++ b/packages/sidenav/src/helpers/PageWrapper/PageWrapper.story.js
@@ -32,7 +32,7 @@ export const PageWrapperDefault = () => {
               {Object.keys(variants)
                 .slice()
                 .reverse()
-                .map(variant => (
+                .map((variant) => (
                   <Radio
                     key={variant}
                     value={variants[variant]}
diff --git a/packages/sidenav/src/utils/useToggle.js b/packages/sidenav/src/utils/useToggle.js
index a479e93e2..ee2dab03b 100644
--- a/packages/sidenav/src/utils/useToggle.js
+++ b/packages/sidenav/src/utils/useToggle.js
@@ -1,8 +1,8 @@
 import { useState, useCallback } from "react";
 
-export default initialState => {
+export default (initialState) => {
   const [expanded, setExpanded] = useState(initialState);
-  const toggle = useCallback(() => setExpanded(e => !e), []);
+  const toggle = useCallback(() => setExpanded((e) => !e), []);
   const collapse = useCallback(() => setExpanded(false), []);
   const expand = useCallback(() => setExpanded(true), []);
 
diff --git a/packages/stepper/src/components/Step.js b/packages/stepper/src/components/Step.js
index 98fcc6215..d6373493c 100644
--- a/packages/stepper/src/components/Step.js
+++ b/packages/stepper/src/components/Step.js
@@ -13,7 +13,7 @@ export default class Step extends React.Component {
     className: PropTypes.string,
   };
 
-  renderIcon = IconName => <IconName size={20} className="icon" />;
+  renderIcon = (IconName) => <IconName size={20} className="icon" />;
 
   render() {
     const { status } = this.props;
diff --git a/packages/stepper/src/styledComponents/Step.js b/packages/stepper/src/styledComponents/Step.js
index d575c30e0..cb00c759f 100644
--- a/packages/stepper/src/styledComponents/Step.js
+++ b/packages/stepper/src/styledComponents/Step.js
@@ -43,7 +43,7 @@ const StepContainer = styled.div`
     line-height: 1.33;
   }
 
-  cursor: ${props => props.status === statusTypes.CURRENT && "pointer"};
+  cursor: ${(props) => props.status === statusTypes.CURRENT && "pointer"};
 
   color: ${colorConstants.CARBON};
 
diff --git a/packages/table/src/components.styled.js b/packages/table/src/components.styled.js
index d940c2797..dd97e7c96 100644
--- a/packages/table/src/components.styled.js
+++ b/packages/table/src/components.styled.js
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { colors, fontSizes, fontWeights } from "@crave/farmblocks-theme";
 import Text from "@crave/farmblocks-text";
 
-export const Table = styled.table.attrs(props => ({
+export const Table = styled.table.attrs((props) => ({
   className: `${props.className || ""} ${
     props.$columnsTemplate ? "__asGrid" : ""
   }`,
@@ -57,7 +57,7 @@ TH.defaultProps = {
   fontWeight: fontWeights.SEMIBOLD,
 };
 
-export const TD = styled(Text).attrs(props => ({
+export const TD = styled(Text).attrs((props) => ({
   type: props.color,
 }))`
   border-bottom: 1px solid ${colors.GREY_08};
diff --git a/packages/table/src/hooks/useTableMap.js b/packages/table/src/hooks/useTableMap.js
index cf429bb8d..fbf6cf2af 100644
--- a/packages/table/src/hooks/useTableMap.js
+++ b/packages/table/src/hooks/useTableMap.js
@@ -11,8 +11,8 @@ export default ({
   rowComponent: Row = TR,
   cellComponents = defaultCellComponents,
   placeholders = defaultPlaceholders,
-} = {}) => {
-  return useCallback(
+} = {}) =>
+  useCallback(
     (row, index) => (
       <Row key={row[keyProp] || index} $rowData={row} $rowIndex={index}>
         {columns.map((columnName, columnIndex) => {
@@ -40,4 +40,3 @@ export default ({
     ),
     [columns, keyProp, Row, cellComponents, placeholders],
   );
-};
diff --git a/packages/tag/src/components/Tag.js b/packages/tag/src/components/Tag.js
index 95447b7e4..d9c33c6ea 100644
--- a/packages/tag/src/components/Tag.js
+++ b/packages/tag/src/components/Tag.js
@@ -14,29 +14,27 @@ const Tag = ({
   disabled,
   children,
   ...wrapperProps
-}) => {
-  return (
-    <StyledTag disabled={disabled} removable={!!onRemove} {...wrapperProps}>
-      {icon && <div className="icon">{icon}</div>}
-      {text || children}
-      {onRemove && !disabled && (
-        <div
-          role="button"
-          tabIndex="0"
-          className="close-icon"
-          onClick={() => onRemove(value)}
-          onKeyDown={event => {
-            if (event.key === "Enter" || event.key === " ") {
-              onRemove(value);
-            }
-          }}
-        >
-          <MdRemove />
-        </div>
-      )}
-    </StyledTag>
-  );
-};
+}) => (
+  <StyledTag disabled={disabled} removable={!!onRemove} {...wrapperProps}>
+    {icon && <div className="icon">{icon}</div>}
+    {text || children}
+    {onRemove && !disabled && (
+      <div
+        role="button"
+        tabIndex="0"
+        className="close-icon"
+        onClick={() => onRemove(value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            onRemove(value);
+          }
+        }}
+      >
+        <MdRemove />
+      </div>
+    )}
+  </StyledTag>
+);
 
 Tag.defaultProps = {
   type: tagTypes.SECONDARY,
diff --git a/packages/tag/src/components/styledComponent/StyledTag.js b/packages/tag/src/components/styledComponent/StyledTag.js
index 0d3c8ea23..54725ec23 100644
--- a/packages/tag/src/components/styledComponent/StyledTag.js
+++ b/packages/tag/src/components/styledComponent/StyledTag.js
@@ -3,7 +3,7 @@ import { colors as colorConstants } from "@crave/farmblocks-theme";
 
 import tagTypes from "../../constants/tagTypes";
 
-const rightPadding = props => (props.removable ? "1px" : "8px");
+const rightPadding = (props) => (props.removable ? "1px" : "8px");
 
 const typeStyles = {
   [tagTypes.SECONDARY]: css`
@@ -80,8 +80,8 @@ const StyledTag = styled.div`
     cursor: pointer;
   }
 
-  ${props => typeStyles[props.type]};
-  ${props => (props.disabled && disabledStyles[props.type]) || ""};
+  ${(props) => typeStyles[props.type]};
+  ${(props) => (props.disabled && disabledStyles[props.type]) || ""};
 `;
 
 export default StyledTag;
diff --git a/packages/text/src/components/Text.js b/packages/text/src/components/Text.js
index 80b7baf87..778f1f043 100644
--- a/packages/text/src/components/Text.js
+++ b/packages/text/src/components/Text.js
@@ -6,24 +6,21 @@ import { fontSizes, fontTypes } from "@crave/farmblocks-theme";
 
 import paragraphLineHeights from "../constants/paragraphLineHeights";
 
-const paragraphStyle = props => {
-  return (
-    props.paragraph &&
-    css`
-      line-height: ${paragraphLineHeights[props.size]};
-    `
-  );
-};
+const paragraphStyle = (props) =>
+  props.paragraph &&
+  css`
+    line-height: ${paragraphLineHeights[props.size]};
+  `;
 
 const Text = styled.div`
   font-family: Lato, sans-serif;
-  font-size: ${props => `${props.size}px`};
+  font-size: ${(props) => `${props.size}px`};
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  color: ${props => props.type};
+  color: ${(props) => props.type};
 
-  text-align: ${props => props.align};
+  text-align: ${(props) => props.align};
 
   ${paragraphStyle};
   ${typography};
diff --git a/packages/tooltip/src/Tooltip.js b/packages/tooltip/src/Tooltip.js
index 94ff1d31b..f4d82145b 100644
--- a/packages/tooltip/src/Tooltip.js
+++ b/packages/tooltip/src/Tooltip.js
@@ -6,7 +6,7 @@ import { CSSTransition } from "react-transition-group";
 import TooltipContent from "./TooltipContent";
 import Container from "./Tooltip.styled";
 
-const Tooltip = props => {
+const Tooltip = (props) => {
   const {
     className,
     disableTooltip,
@@ -25,7 +25,7 @@ const Tooltip = props => {
     setIsVisible(false);
   };
 
-  const handleOuterClick = event => {
+  const handleOuterClick = (event) => {
     if (tooltip.current?.contains(event.target)) {
       return;
     }
@@ -51,7 +51,7 @@ const Tooltip = props => {
       ref={tooltip}
       className={className}
       displayBlock={displayBlock}
-      onMouseLeave={event => {
+      onMouseLeave={(event) => {
         hide();
         onMouseLeave?.(event);
       }}
@@ -59,7 +59,7 @@ const Tooltip = props => {
       {!disableTooltip && (
         <div
           className="hit-area"
-          onMouseOver={e => {
+          onMouseOver={(e) => {
             setIsVisible(true);
             onMouseOver?.(e);
           }}
diff --git a/packages/tooltip/src/Tooltip.styled.js b/packages/tooltip/src/Tooltip.styled.js
index 8e171bbcc..9c46ce8cb 100644
--- a/packages/tooltip/src/Tooltip.styled.js
+++ b/packages/tooltip/src/Tooltip.styled.js
@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 export default styled.div`
   position: relative;
-  display: ${props => (props.displayBlock ? "block" : "inline-block")};
+  display: ${(props) => (props.displayBlock ? "block" : "inline-block")};
 
   .hit-area {
     position: absolute;
diff --git a/packages/tooltip/src/TooltipContent.js b/packages/tooltip/src/TooltipContent.js
index 20f45f18e..979df2b01 100644
--- a/packages/tooltip/src/TooltipContent.js
+++ b/packages/tooltip/src/TooltipContent.js
@@ -36,7 +36,7 @@ const Tooltip = ({
 
   const overlayRef = useRef(null);
 
-  const handleClose = e => {
+  const handleClose = (e) => {
     if (e.target === overlayRef.current) {
       onHideButtonClick();
     }
diff --git a/packages/tooltip/src/TooltipContent.styled.js b/packages/tooltip/src/TooltipContent.styled.js
index 2ebdcf9de..3700d7346 100644
--- a/packages/tooltip/src/TooltipContent.styled.js
+++ b/packages/tooltip/src/TooltipContent.styled.js
@@ -4,9 +4,9 @@ import { TOP, CENTER } from "./constants/positions";
 
 const Container = styled.div`
   position: relative;
-  z-index: ${props => props.zIndex};
+  z-index: ${(props) => props.zIndex};
 
-  @media only screen and (max-width: ${props => props.fullScreenBreakpoint}) {
+  @media only screen and (max-width: ${(props) => props.fullScreenBreakpoint}) {
     top: 0;
     right: 0;
     bottom: 0;
@@ -21,7 +21,7 @@ const centerAlignment = css`
   transform: translateX(-50%);
 `;
 
-const positionXStyle = coordinate => ({ positionX }) => {
+const positionXStyle = (coordinate) => ({ positionX }) => {
   if (positionX === CENTER) {
     return centerAlignment;
   }
@@ -86,7 +86,7 @@ const StyledTooltip = styled.div`
   visibility: ${({ isVisible }) => (isVisible ? "visible" : "hidden")};
 
   position: absolute;
-  padding: ${props => props.padding || "8px"};
+  padding: ${(props) => props.padding || "8px"};
   background-color: #ffffff;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16);
   border: solid 1px rgba(0, 0, 0, 0.16);
@@ -106,9 +106,9 @@ const StyledTooltip = styled.div`
   ${arrow};
   ${positionYStyle};
 
-  overflow: ${props => props.overflow};
+  overflow: ${(props) => props.overflow};
 
-  @media only screen and (max-width: ${props => props.fullScreenBreakpoint}) {
+  @media only screen and (max-width: ${(props) => props.fullScreenBreakpoint}) {
     right: 16px;
     left: 16px;
     white-space: pre-wrap;