From 71655121ce5dced043ddba627f900489421d78ac Mon Sep 17 00:00:00 2001
From: panagiotis vourtsis <vourtsis_pan@hotmail.com>
Date: Wed, 23 Sep 2020 10:17:44 +0300
Subject: [PATCH 1/4] fix: remove useTheme from components that was imported
 only for css functions

---
 src/components/Breadcrumb/Breadcrumb.tsx      |  6 +-
 .../BreadcrumbCollapsed.tsx                   |  8 +--
 .../BreadcrumbItem/BreadcrumbItem.tsx         |  4 +-
 .../Breadcrumb/Separator/Separator.tsx        |  4 +-
 .../Breadcrumb.stories.storyshot              | 46 ++-------------
 src/components/Button/Button.tsx              | 10 ++--
 .../__snapshots__/Button.stories.storyshot    | 52 +++--------------
 src/components/CheckBox/CheckBox.style.ts     | 10 ++--
 src/components/CheckBox/CheckBox.tsx          | 10 ++--
 .../__snapshots__/CheckBox.stories.storyshot  | 16 +----
 src/components/DatePicker/DatePicker.style.ts |  8 +--
 src/components/DatePicker/DatePicker.tsx      |  4 +-
 .../OverlayComponent/OverlayComponent.tsx     |  2 +-
 src/components/Icon/Icon.tsx                  |  5 +-
 .../Icon/__snapshots__/Icon.stories.storyshot | 24 +-------
 .../IconButton.stories.storyshot              | 58 +++----------------
 src/components/Label/Label.style.ts           |  4 +-
 src/components/Label/Label.tsx                |  5 +-
 .../Menu/__snapshots__/Menu.stories.storyshot | 14 +----
 .../Pagination.stories.storyshot              | 42 ++------------
 src/components/Radio/Radio.style.ts           | 13 ++---
 src/components/Select/Select.tsx              |  2 +-
 .../__snapshots__/Select.stories.storyshot    | 34 +++--------
 src/components/Table/Table.style.ts           |  4 +-
 src/components/Table/Table.tsx                |  4 +-
 src/components/TextField/TextField.style.ts   | 22 +++----
 src/components/TextField/TextField.tsx        | 15 ++---
 .../__snapshots__/TextField.stories.storyshot | 48 ++-------------
 src/components/storyUtils/Stack/Stack.tsx     |  2 +-
 src/theme/functions.ts                        | 18 +++---
 30 files changed, 109 insertions(+), 385 deletions(-)

diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
index c53d51ae8..6b4830d4c 100644
--- a/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -5,7 +5,6 @@ import isEmpty from 'lodash/isEmpty';
 import uniqueId from 'lodash/uniqueId';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import useTheme from '../../hooks/useTheme';
 import { breadcrumbLinkStyles, breadcrumbStyles } from './Breadcrumb.style';
 import BreadcrumbCollapsed from './BreadcrumbCollapsed/BreadcrumbCollapsed';
 import BreadcrumbItem from './BreadcrumbItem/BreadcrumbItem';
@@ -22,9 +21,8 @@ const MAX_ITEMS_TO_SHOW_BEFORE_COLLAPSE = 1;
 
 const Breadcrumb: React.FC<Props> = props => {
   const { children, data = [] } = props;
-  const theme = useTheme();
   const passDataToRouterLink = ({ to, label }: BreadcrumbItemData) => (
-    <Link css={breadcrumbLinkStyles()(theme)} key={to} to={to}>
+    <Link css={breadcrumbLinkStyles()} key={to} to={to}>
       {label}
     </Link>
   );
@@ -78,7 +76,7 @@ const Breadcrumb: React.FC<Props> = props => {
   );
 
   return (
-    <ol aria-label="Breadcrumb" css={breadcrumbStyles()(theme)}>
+    <ol aria-label="Breadcrumb" css={breadcrumbStyles()}>
       {dataItems.map(getBreadcrumbItem)}
     </ol>
   );
diff --git a/src/components/Breadcrumb/BreadcrumbCollapsed/BreadcrumbCollapsed.tsx b/src/components/Breadcrumb/BreadcrumbCollapsed/BreadcrumbCollapsed.tsx
index 31cd22eef..07af45332 100644
--- a/src/components/Breadcrumb/BreadcrumbCollapsed/BreadcrumbCollapsed.tsx
+++ b/src/components/Breadcrumb/BreadcrumbCollapsed/BreadcrumbCollapsed.tsx
@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/core';
 import uniqueId from 'lodash/uniqueId';
 import * as React from 'react';
-import useTheme from '../../../hooks/useTheme';
 import Separator from '../../Breadcrumb/Separator/Separator';
 import Icon from '../../Icon';
 import { optionsStyle } from '../../Menu/Menu.style';
@@ -23,19 +22,18 @@ type Props = {
 const BreadcrumbCollapsed: React.FC<Props> = props => {
   const [open, setOpen] = React.useState<boolean>(false);
   const { collapsedItems } = props;
-  const theme = useTheme();
   const expandHandler = () => {
     setOpen(prevState => !prevState);
   };
 
   const listItems = collapsedItems.map(item => (
-    <li key={uniqueId('collapsed_')} css={collapsedItemStyles()(theme)}>
+    <li key={uniqueId('collapsed_')} css={collapsedItemStyles()}>
       {item}
     </li>
   ));
 
   const collapsedItemsList = (
-    <ul style={inlineBreadcrumbWrapperStyles} css={optionsStyle({ menuPosition: 'left' })(theme)}>
+    <ul style={inlineBreadcrumbWrapperStyles} css={optionsStyle({ menuPosition: 'left' })}>
       {listItems}
     </ul>
   );
@@ -50,7 +48,7 @@ const BreadcrumbCollapsed: React.FC<Props> = props => {
       cssStyles={ClickAwayListenerStyle}
     >
       <div css={breadcrumbCollapsedWrapperStyles()}>
-        <span css={breadcrumbCollapsedStyles({ open })(theme)} onClick={expandHandler}>
+        <span css={breadcrumbCollapsedStyles({ open })} onClick={expandHandler}>
           <Icon name="dotsVertical" size={22} color={iconColor} />
         </span>
         <Separator />
diff --git a/src/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.tsx
index d19a1ff52..5db06edda 100644
--- a/src/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.tsx
+++ b/src/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.tsx
@@ -3,7 +3,6 @@ import { jsx } from '@emotion/core';
 import React from 'react';
 import Separator from 'components/Breadcrumb/Separator/Separator';
 import { breadcrumbItemStyles } from './BreadcrumbItem.style';
-import useTheme from 'hooks/useTheme';
 import BreadcrumbAdvancedItem from './BreadcrumbAdvancedItem';
 
 type Props = {
@@ -27,7 +26,6 @@ const BreadcrumbItem: React.FC<Props> = props => {
     onChangeHandler,
     lastItemLabel,
   } = props;
-  const theme = useTheme();
   const renderComponentBasedOnOptions = options ? (
     <BreadcrumbAdvancedItem
       onChangeHandler={onChangeHandler}
@@ -40,7 +38,7 @@ const BreadcrumbItem: React.FC<Props> = props => {
 
   return (
     <li>
-      <div css={breadcrumbItemStyles({ active: isLastItem })(theme)}>
+      <div css={breadcrumbItemStyles({ active: isLastItem })}>
         {renderComponentBasedOnOptions}
         <Separator isLastItem={isLastItem} />
       </div>
diff --git a/src/components/Breadcrumb/Separator/Separator.tsx b/src/components/Breadcrumb/Separator/Separator.tsx
index 5d1f49c0e..a84fbd100 100644
--- a/src/components/Breadcrumb/Separator/Separator.tsx
+++ b/src/components/Breadcrumb/Separator/Separator.tsx
@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import * as React from 'react';
-import useTheme from '../../../hooks/useTheme';
 import Icon from '../../Icon';
 import { separatorStyles } from './Separator.style';
 
@@ -12,11 +11,10 @@ type Props = {
 
 const Separator: React.FC<Props> = props => {
   const { isLastItem = false } = props;
-  const theme = useTheme();
   if (isLastItem) return null;
 
   return (
-    <span css={separatorStyles()(theme)}>
+    <span css={separatorStyles()}>
       <Icon name={'arrowRight'} color="lightGray700" />
     </span>
   );
diff --git a/src/components/Breadcrumb/__snapshots__/Breadcrumb.stories.storyshot b/src/components/Breadcrumb/__snapshots__/Breadcrumb.stories.storyshot
index 59d0daa67..1c12b03d1 100644
--- a/src/components/Breadcrumb/__snapshots__/Breadcrumb.stories.storyshot
+++ b/src/components/Breadcrumb/__snapshots__/Breadcrumb.stories.storyshot
@@ -33,13 +33,7 @@ exports[`Storyshots Design System/Breadcrumb Advanced Breadcrumbs with options p
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -156,12 +150,7 @@ exports[`Storyshots Design System/Breadcrumb Advanced Breadcrumbs with options p
                     className="css-1ndrhvc-Button"
                   >
                     <div
-                      style={
-                        Object {
-                          "marginLeft": "0.5rem",
-                          "marginRight": "1rem",
-                        }
-                      }
+                      className="css-1sbca9g-Button"
                     >
                       <span
                         className="css-1gnbc76-Icon"
@@ -219,13 +208,7 @@ exports[`Storyshots Design System/Breadcrumb Breadcrumb showcase 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -349,12 +332,7 @@ exports[`Storyshots Design System/Breadcrumb Breadcrumb showcase 1`] = `
                       className="css-1ndrhvc-Button"
                     >
                       <div
-                        style={
-                          Object {
-                            "marginLeft": "0.5rem",
-                            "marginRight": "1rem",
-                          }
-                        }
+                        className="css-1sbca9g-Button"
                       >
                         <span
                           className="css-1gnbc76-Icon"
@@ -413,13 +391,7 @@ exports[`Storyshots Design System/Breadcrumb Simple Breadcrumbs 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -520,13 +492,7 @@ exports[`Storyshots Design System/Breadcrumb Simple Breadcrumbs with options 1`]
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 2ed77cb6e..df361175a 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import * as React from 'react';
-import useTheme from '../../hooks/useTheme';
 import { EventProps } from '../../utils/common';
 import { generateTestDataId } from '../../utils/helpers';
 import { AcceptedColorComponentTypes } from '../../utils/themeFunctions';
@@ -40,7 +39,6 @@ const Button: React.FC<Props & TestProps & EventProps> = props => {
     onClick,
     onBlur,
   } = props;
-  const theme = useTheme();
 
   return (
     <button
@@ -53,7 +51,7 @@ const Button: React.FC<Props & TestProps & EventProps> = props => {
         disabled,
         childrenCount: React.Children.count(children),
         iconAlign,
-      })(theme)}
+      })}
       onClick={onClick}
       onBlur={onBlur}
       disabled={disabled}
@@ -67,11 +65,11 @@ const Button: React.FC<Props & TestProps & EventProps> = props => {
           disabled,
           hasChildren: Boolean(React.Children.count(children)),
           iconAlign,
-        })(theme)}
+        })}
       >
         {icon && (
           <div
-            style={iconStyle({
+            css={iconStyle({
               type,
               filled,
               size,
@@ -79,7 +77,7 @@ const Button: React.FC<Props & TestProps & EventProps> = props => {
               disabled,
               hasChildren: Boolean(React.Children.count(children)),
               iconAlign,
-            })(theme)}
+            })}
           >
             {icon}
           </div>
diff --git a/src/components/Button/__snapshots__/Button.stories.storyshot b/src/components/Button/__snapshots__/Button.stories.storyshot
index bc857d12a..9aa014322 100644
--- a/src/components/Button/__snapshots__/Button.stories.storyshot
+++ b/src/components/Button/__snapshots__/Button.stories.storyshot
@@ -33,13 +33,7 @@ exports[`Storyshots Design System/Button Button Colors 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -173,13 +167,7 @@ exports[`Storyshots Design System/Button Button Sizes 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -283,12 +271,7 @@ exports[`Storyshots Design System/Button Button with icon 1`] = `
       className="css-1yy8u54-Button"
     >
       <div
-        style={
-          Object {
-            "marginLeft": "1rem",
-            "marginRight": "0.5rem",
-          }
-        }
+        className="css-hy13us-Button"
       >
         <img
           height="16"
@@ -381,13 +364,7 @@ exports[`Storyshots Design System/Button Icon Button Sizes 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -405,12 +382,7 @@ exports[`Storyshots Design System/Button Icon Button Sizes 1`] = `
           className="css-1yy8u54-Button"
         >
           <div
-            style={
-              Object {
-                "marginLeft": "1rem",
-                "marginRight": "0.5rem",
-              }
-            }
+            className="css-hy13us-Button"
           >
             <img
               height="16"
@@ -438,12 +410,7 @@ exports[`Storyshots Design System/Button Icon Button Sizes 1`] = `
           className="css-1yy8u54-Button"
         >
           <div
-            style={
-              Object {
-                "marginLeft": "1rem",
-                "marginRight": "0.5rem",
-              }
-            }
+            className="css-hy13us-Button"
           >
             <img
               height="16"
@@ -471,12 +438,7 @@ exports[`Storyshots Design System/Button Icon Button Sizes 1`] = `
           className="css-1yy8u54-Button"
         >
           <div
-            style={
-              Object {
-                "marginLeft": "0.5rem",
-                "marginRight": "0.5rem",
-              }
-            }
+            className="css-1qy2jjj-Button"
           >
             <img
               height="16"
diff --git a/src/components/CheckBox/CheckBox.style.ts b/src/components/CheckBox/CheckBox.style.ts
index 579bf7aeb..07a45abb9 100644
--- a/src/components/CheckBox/CheckBox.style.ts
+++ b/src/components/CheckBox/CheckBox.style.ts
@@ -1,9 +1,9 @@
-import { css, SerializedStyles } from '@emotion/core';
+import { css } from '@emotion/core';
 import { rem, transparentize } from 'polished';
 import { Theme } from '../../theme';
 import { Props } from './CheckBox';
 
-export const wrapperStyle = ({ disabled }: Props) => (theme: Theme): SerializedStyles => css`
+export const wrapperStyle = ({ disabled }: Props) => (theme: Theme) => css`
   opacity: ${disabled ? 0.3 : 1};
   justify-content: center;
   align-items: center;
@@ -23,9 +23,7 @@ export const checkboxWrapperStyle = () => (theme: Theme) => css`
   }
 `;
 
-export const checkboxStyle = ({ intermediate, checked }: Props) => (
-  theme: Theme
-): SerializedStyles => css`
+export const checkboxStyle = ({ intermediate, checked }: Props) => (theme: Theme) => css`
   background: ${checked
     ? intermediate
       ? theme.palette.flat.darkGray[400]
@@ -83,7 +81,7 @@ export const checkboxStyle = ({ intermediate, checked }: Props) => (
   }
 `;
 
-export const labelStyle = () => (theme: Theme): SerializedStyles => css`
+export const labelStyle = () => (theme: Theme) => css`
   padding-left: ${rem(4)};
   font-size: ${theme.typography.fontSizes['15']};
   font-weight: ${theme.typography.weights.regular};
diff --git a/src/components/CheckBox/CheckBox.tsx b/src/components/CheckBox/CheckBox.tsx
index 334322146..5062fc41c 100644
--- a/src/components/CheckBox/CheckBox.tsx
+++ b/src/components/CheckBox/CheckBox.tsx
@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/core';
 import * as React from 'react';
 import { ChangeEvent } from 'react';
-import useTheme from '../../hooks/useTheme';
 import { generateUniqueID } from '../../utils/helpers';
 import { checkboxStyle, checkboxWrapperStyle, labelStyle, wrapperStyle } from './CheckBox.style';
 
@@ -27,7 +26,6 @@ const CheckBox: React.FC<Props> = ({
   intermediate = false,
 }) => {
   const [isChecked, setIsChecked] = React.useState(checked);
-  const theme = useTheme();
   const id = generateUniqueID();
 
   const handleInputChange = (event: ChangeEvent) => {
@@ -43,10 +41,10 @@ const CheckBox: React.FC<Props> = ({
   };
 
   return (
-    <span css={wrapperStyle({ disabled })(theme)}>
-      <span css={checkboxWrapperStyle()(theme)}>
+    <span css={wrapperStyle({ disabled })}>
+      <span css={checkboxWrapperStyle()}>
         <input
-          css={checkboxStyle({ intermediate, checked })(theme)}
+          css={checkboxStyle({ intermediate, checked })}
           id={`styled-checkbox-${id}`}
           type="checkbox"
           onChange={handleInputChange}
@@ -55,7 +53,7 @@ const CheckBox: React.FC<Props> = ({
         />
         <label htmlFor={`styled-checkbox-${id}`} />
       </span>
-      {label && <span css={labelStyle()(theme)}>{label}</span>}
+      {label && <span css={labelStyle()}>{label}</span>}
     </span>
   );
 };
diff --git a/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot b/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot
index 2b68b8d51..04e5f461f 100644
--- a/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot
+++ b/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot
@@ -33,13 +33,7 @@ exports[`Storyshots Design System/CheckBox CheckBox with Label 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -270,13 +264,7 @@ exports[`Storyshots Design System/CheckBox CheckBox without 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
diff --git a/src/components/DatePicker/DatePicker.style.ts b/src/components/DatePicker/DatePicker.style.ts
index 8c38f0634..810253ad4 100644
--- a/src/components/DatePicker/DatePicker.style.ts
+++ b/src/components/DatePicker/DatePicker.style.ts
@@ -1,11 +1,9 @@
-import { css, SerializedStyles } from '@emotion/core';
+import { css } from '@emotion/core';
 import { Theme } from '../../theme';
 import FatArrowLeft from '../Icon/assets/fat-arrow-left.svg';
 import FatArrowRight from '../Icon/assets/fat-arrow-right.svg';
 
-export const optionStyle = ({ selected }: { selected?: boolean }) => (
-  theme: Theme
-): SerializedStyles => css`
+export const optionStyle = ({ selected }: { selected?: boolean }) => (theme: Theme) => css`
   white-space: nowrap;
   padding: ${theme.spacing.md};
   font-weight: ${selected ? 'bold' : 'initial'};
@@ -14,7 +12,7 @@ export const optionStyle = ({ selected }: { selected?: boolean }) => (
 
 export const datePickerStyles = ({ isRangePicker }: { isRangePicker?: boolean }) => (
   theme: Theme
-): SerializedStyles => css`
+) => css`
   .DayPickerInput-Overlay {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
     border: 1px solid #dfdfdf;
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index d701fb6a8..814e5e514 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/core';
 import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { datePickerStyles } from './DatePicker.style';
-import useTheme from 'hooks/useTheme';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import 'react-day-picker/lib/style.css';
 import dayjs from 'dayjs';
@@ -75,7 +74,6 @@ const DatePicker: React.FC<Props> = ({
   },
   inputLabel = 'Date',
 }) => {
-  const theme = useTheme();
   const dayPickerInputRef = useRef<DayPickerInput>(null);
   const dayPickerRef = useRef<DayPicker>(null);
   const daysInitialState = { from: undefined, to: undefined };
@@ -165,7 +163,7 @@ const DatePicker: React.FC<Props> = ({
   };
 
   return (
-    <div css={datePickerStyles({ isRangePicker })(theme)}>
+    <div css={datePickerStyles({ isRangePicker })}>
       <DayPickerInput
         ref={dayPickerInputRef}
         onDayPickerShow={() => {
diff --git a/src/components/DatePicker/OverlayComponent/OverlayComponent.tsx b/src/components/DatePicker/OverlayComponent/OverlayComponent.tsx
index adb4a7777..34ae6e96c 100644
--- a/src/components/DatePicker/OverlayComponent/OverlayComponent.tsx
+++ b/src/components/DatePicker/OverlayComponent/OverlayComponent.tsx
@@ -42,7 +42,7 @@ const OverlayComponent: React.FC<Props & DayPickerInputProps> = ({
               {extraOptions.map(option => (
                 <div
                   key={option.value}
-                  css={optionStyle({ selected: selectedOption === option.value })(theme)}
+                  css={optionStyle({ selected: selectedOption === option.value })}
                   onClick={() => setSelectedOption(option.value)}
                 >
                   {option.label}
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index c25d9b1fd..70384f83f 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import * as React from 'react';
-import useTheme from '../../hooks/useTheme';
 import { AcceptedColorComponentTypes } from '../../utils/themeFunctions';
 import iconSelector from './assets/iconSelector';
 import { iconContainerStyle, iconStyle } from './Icon.style';
@@ -17,13 +16,11 @@ export type Props = {
 };
 
 const Icon: React.FC<Props> = ({ name, color = 'primary', size = 16 }) => {
-  const theme = useTheme();
-
   const Icon = iconSelector[name];
 
   return (
     <span css={iconContainerStyle()}>
-      <Icon css={iconStyle({ color, size })(theme)} />
+      <Icon css={iconStyle({ color, size })} />
     </span>
   );
 };
diff --git a/src/components/Icon/__snapshots__/Icon.stories.storyshot b/src/components/Icon/__snapshots__/Icon.stories.storyshot
index cb0fbee8b..21cc5bdbc 100644
--- a/src/components/Icon/__snapshots__/Icon.stories.storyshot
+++ b/src/components/Icon/__snapshots__/Icon.stories.storyshot
@@ -33,13 +33,7 @@ exports[`Storyshots Design System/Icon Icon with color 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -366,13 +360,7 @@ exports[`Storyshots Design System/Icon Icon with size 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -519,13 +507,7 @@ exports[`Storyshots Design System/Icon Icons Gallery 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
diff --git a/src/components/IconButton/__snapshots__/IconButton.stories.storyshot b/src/components/IconButton/__snapshots__/IconButton.stories.storyshot
index 8487e1a17..073830718 100644
--- a/src/components/IconButton/__snapshots__/IconButton.stories.storyshot
+++ b/src/components/IconButton/__snapshots__/IconButton.stories.storyshot
@@ -33,13 +33,7 @@ exports[`Storyshots Design System/IconButton IconButton Sizes 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -57,12 +51,7 @@ exports[`Storyshots Design System/IconButton IconButton Sizes 1`] = `
           className="css-1yy8u54-Button"
         >
           <div
-            style={
-              Object {
-                "marginLeft": "0.5rem",
-                "marginRight": "0.5rem",
-              }
-            }
+            className="css-1qy2jjj-Button"
           >
             <span
               className="css-1gnbc76-Icon"
@@ -91,12 +80,7 @@ exports[`Storyshots Design System/IconButton IconButton Sizes 1`] = `
           className="css-1yy8u54-Button"
         >
           <div
-            style={
-              Object {
-                "marginLeft": "1rem",
-                "marginRight": "0.5rem",
-              }
-            }
+            className="css-hy13us-Button"
           >
             <span
               className="css-1gnbc76-Icon"
@@ -125,12 +109,7 @@ exports[`Storyshots Design System/IconButton IconButton Sizes 1`] = `
           className="css-1yy8u54-Button"
         >
           <div
-            style={
-              Object {
-                "marginLeft": "1rem",
-                "marginRight": "0.5rem",
-              }
-            }
+            className="css-hy13us-Button"
           >
             <span
               className="css-1gnbc76-Icon"
@@ -180,13 +159,7 @@ exports[`Storyshots Design System/IconButton IconButton Types 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -204,12 +177,7 @@ exports[`Storyshots Design System/IconButton IconButton Types 1`] = `
           className="css-1yy8u54-Button"
         >
           <div
-            style={
-              Object {
-                "marginLeft": "0.5rem",
-                "marginRight": "0.5rem",
-              }
-            }
+            className="css-1qy2jjj-Button"
           >
             <span
               className="css-1gnbc76-Icon"
@@ -238,12 +206,7 @@ exports[`Storyshots Design System/IconButton IconButton Types 1`] = `
           className="css-1yy8u54-Button"
         >
           <div
-            style={
-              Object {
-                "marginLeft": "0.5rem",
-                "marginRight": "0.5rem",
-              }
-            }
+            className="css-1qy2jjj-Button"
           >
             <span
               className="css-1gnbc76-Icon"
@@ -272,12 +235,7 @@ exports[`Storyshots Design System/IconButton IconButton Types 1`] = `
           className="css-1yy8u54-Button"
         >
           <div
-            style={
-              Object {
-                "marginLeft": "0.5rem",
-                "marginRight": "0.5rem",
-              }
-            }
+            className="css-1qy2jjj-Button"
           >
             <span
               className="css-1gnbc76-Icon"
diff --git a/src/components/Label/Label.style.ts b/src/components/Label/Label.style.ts
index 3399a2797..aa2e5c04c 100644
--- a/src/components/Label/Label.style.ts
+++ b/src/components/Label/Label.style.ts
@@ -1,9 +1,9 @@
-import { css, SerializedStyles } from '@emotion/core';
+import { css } from '@emotion/core';
 import { Theme } from '../../theme';
 
 export const labelStyle = ({ animateToTop, error }: { animateToTop: boolean; error: boolean }) => (
   theme: Theme
-): SerializedStyles => css`
+) => css`
   transition: transform 0.25s, opacity 0.25s ease-in-out;
   transform-origin: 0 0;
   width: 100%;
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 3f102731b..c8d526400 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import * as React from 'react';
-import useTheme from '../../hooks/useTheme';
 import { labelStyle } from './Label.style';
 
 export type Props = {
@@ -23,10 +22,8 @@ const Label: React.FC<Props> = ({
   required = false,
   animateToTop = false,
 }) => {
-  const theme = useTheme();
-
   return (
-    <label htmlFor={htmlFor} css={labelStyle({ animateToTop, error })(theme)}>
+    <label htmlFor={htmlFor} css={labelStyle({ animateToTop, error })}>
       {label} {required && '*'}
     </label>
   );
diff --git a/src/components/Menu/__snapshots__/Menu.stories.storyshot b/src/components/Menu/__snapshots__/Menu.stories.storyshot
index 53e060f71..4ab91e212 100644
--- a/src/components/Menu/__snapshots__/Menu.stories.storyshot
+++ b/src/components/Menu/__snapshots__/Menu.stories.storyshot
@@ -48,12 +48,7 @@ exports[`Storyshots Design System/Menu Menu with option icon and different colou
           className="css-1ndrhvc-Button"
         >
           <div
-            style={
-              Object {
-                "marginLeft": "0.5rem",
-                "marginRight": "1rem",
-              }
-            }
+            className="css-1sbca9g-Button"
           >
             <span
               className="css-1gnbc76-Icon"
@@ -128,12 +123,7 @@ exports[`Storyshots Design System/Menu Menu with selection handler 1`] = `
             className="css-1ndrhvc-Button"
           >
             <div
-              style={
-                Object {
-                  "marginLeft": "0.5rem",
-                  "marginRight": "1rem",
-                }
-              }
+              className="css-1sbca9g-Button"
             >
               <span
                 className="css-1gnbc76-Icon"
diff --git a/src/components/Pagination/__snapshots__/Pagination.stories.storyshot b/src/components/Pagination/__snapshots__/Pagination.stories.storyshot
index 08d3e45c2..12e2eadc7 100644
--- a/src/components/Pagination/__snapshots__/Pagination.stories.storyshot
+++ b/src/components/Pagination/__snapshots__/Pagination.stories.storyshot
@@ -45,12 +45,7 @@ exports[`Storyshots Design System/Pagination Pagination 1`] = `
         className="css-1yy8u54-Button"
       >
         <div
-          style={
-            Object {
-              "marginLeft": "1rem",
-              "marginRight": "0.5rem",
-            }
-          }
+          className="css-hy13us-Button"
         >
           <span
             className="css-1gnbc76-Icon"
@@ -72,12 +67,7 @@ exports[`Storyshots Design System/Pagination Pagination 1`] = `
         className="css-1yy8u54-Button"
       >
         <div
-          style={
-            Object {
-              "marginLeft": "1rem",
-              "marginRight": "0.5rem",
-            }
-          }
+          className="css-hy13us-Button"
         >
           <span
             className="css-1gnbc76-Icon"
@@ -105,12 +95,7 @@ exports[`Storyshots Design System/Pagination Pagination 1`] = `
         className="css-1yy8u54-Button"
       >
         <div
-          style={
-            Object {
-              "marginLeft": "1rem",
-              "marginRight": "0.5rem",
-            }
-          }
+          className="css-hy13us-Button"
         >
           <span
             className="css-1gnbc76-Icon"
@@ -132,12 +117,7 @@ exports[`Storyshots Design System/Pagination Pagination 1`] = `
         className="css-1yy8u54-Button"
       >
         <div
-          style={
-            Object {
-              "marginLeft": "1rem",
-              "marginRight": "0.5rem",
-            }
-          }
+          className="css-hy13us-Button"
         >
           <span
             className="css-1gnbc76-Icon"
@@ -198,12 +178,7 @@ exports[`Storyshots Design System/Pagination Pagination without all buttons 1`]
         className="css-1yy8u54-Button"
       >
         <div
-          style={
-            Object {
-              "marginLeft": "1rem",
-              "marginRight": "0.5rem",
-            }
-          }
+          className="css-hy13us-Button"
         >
           <span
             className="css-1gnbc76-Icon"
@@ -231,12 +206,7 @@ exports[`Storyshots Design System/Pagination Pagination without all buttons 1`]
         className="css-1yy8u54-Button"
       >
         <div
-          style={
-            Object {
-              "marginLeft": "1rem",
-              "marginRight": "0.5rem",
-            }
-          }
+          className="css-hy13us-Button"
         >
           <span
             className="css-1gnbc76-Icon"
diff --git a/src/components/Radio/Radio.style.ts b/src/components/Radio/Radio.style.ts
index cc4842cb7..dd8dc4eae 100644
--- a/src/components/Radio/Radio.style.ts
+++ b/src/components/Radio/Radio.style.ts
@@ -1,4 +1,4 @@
-import { css, SerializedStyles } from '@emotion/core';
+import { css } from '@emotion/core';
 import { rem } from 'polished';
 import { Props } from './Radio';
 
@@ -6,7 +6,7 @@ const focusedRadio = css`
   box-shadow: 0 0 0 ${rem('11px')} rgba(0, 0, 0, 0.04);
 `;
 
-export const inputStyles: SerializedStyles = css`
+export const inputStyles = css`
   top: 0;
   left: 0;
   width: 100%;
@@ -23,10 +23,7 @@ export const inputStyles: SerializedStyles = css`
   }
 `;
 
-export const customRadioWrapperStyles = (
-  focused: boolean,
-  disabled: boolean
-): SerializedStyles => css`
+export const customRadioWrapperStyles = (focused: boolean, disabled: boolean) => css`
   position: relative;
   border-radius: 50%;
   width: ${rem('28px')};
@@ -35,7 +32,7 @@ export const customRadioWrapperStyles = (
   ${focused && !disabled && focusedRadio};
 `;
 
-export const customRadioStyles = (props: Pick<Props, 'checked' | 'disabled'>): SerializedStyles => {
+export const customRadioStyles = (props: Pick<Props, 'checked' | 'disabled'>) => {
   function determineBoxShadow({ checked, disabled }: Pick<Props, 'checked' | 'disabled'>) {
     if (disabled && checked) {
       return `inset 0px 0px 0px ${rem('2px')} #efefef, inset 0px 0px 0px ${rem(
@@ -67,7 +64,7 @@ export const customRadioStyles = (props: Pick<Props, 'checked' | 'disabled'>): S
   `;
 };
 
-export const wrapperStyles = (disabled: boolean): SerializedStyles => css`
+export const wrapperStyles = (disabled: boolean) => css`
   position: relative;
 
   border-radius: 50%;
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 6487d4ca0..0ff9d4231 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -150,7 +150,7 @@ const Select: React.FC<Props> = ({
   };
 
   return (
-    <div style={{ position: 'relative' }}>
+    <div css={{ position: 'relative' }}>
       <ReactSelect
         inputId={`select-${generateUniqueID()}`}
         styles={customStyles}
diff --git a/src/components/Select/__snapshots__/Select.stories.storyshot b/src/components/Select/__snapshots__/Select.stories.storyshot
index 44917cb6f..e4cf27a2a 100644
--- a/src/components/Select/__snapshots__/Select.stories.storyshot
+++ b/src/components/Select/__snapshots__/Select.stories.storyshot
@@ -33,13 +33,7 @@ exports[`Storyshots Design System/Select Disabled Select 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -49,7 +43,7 @@ exports[`Storyshots Design System/Select Disabled Select 1`] = `
       }
     >
       <div
-        style={
+        css={
           Object {
             "position": "relative",
           }
@@ -159,13 +153,7 @@ exports[`Storyshots Design System/Select Multi Tag Select 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -175,7 +163,7 @@ exports[`Storyshots Design System/Select Multi Tag Select 1`] = `
       }
     >
       <div
-        style={
+        css={
           Object {
             "position": "relative",
           }
@@ -254,7 +242,7 @@ exports[`Storyshots Design System/Select Multi Tag Select 1`] = `
       }
     >
       <div
-        style={
+        css={
           Object {
             "position": "relative",
           }
@@ -362,13 +350,7 @@ exports[`Storyshots Design System/Select Simple Select 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -378,7 +360,7 @@ exports[`Storyshots Design System/Select Simple Select 1`] = `
       }
     >
       <div
-        style={
+        css={
           Object {
             "position": "relative",
           }
@@ -523,7 +505,7 @@ exports[`Storyshots Design System/Select Simple Select 1`] = `
       }
     >
       <div
-        style={
+        css={
           Object {
             "position": "relative",
           }
diff --git a/src/components/Table/Table.style.ts b/src/components/Table/Table.style.ts
index 4c1bfc563..aa78eff71 100644
--- a/src/components/Table/Table.style.ts
+++ b/src/components/Table/Table.style.ts
@@ -1,5 +1,5 @@
-import { css, SerializedStyles } from '@emotion/core';
+import { css } from '@emotion/core';
 import { Theme } from '../../theme';
 
-export const tableStyle = () => (theme: Theme): SerializedStyles =>
+export const tableStyle = () => (theme: Theme) =>
   css({ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' });
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 4f6111efd..3694aeac4 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -124,7 +124,7 @@ function Table<T>({
 
   return (
     <React.Fragment>
-      <table css={tableStyle()(theme)}>
+      <table css={tableStyle()}>
         {(onCheck || topRightArea || type === 'normal') && (
           <thead>
             <TableRow>
@@ -165,7 +165,7 @@ function Table<T>({
           </thead>
         )}
       </table>
-      <table css={tableStyle()(theme)}>
+      <table css={tableStyle()}>
         {(onCheck || topRightArea || type === 'normal') && (
           <thead>
             {type === 'normal' && (
diff --git a/src/components/TextField/TextField.style.ts b/src/components/TextField/TextField.style.ts
index 908bb5ed2..93cfd1675 100644
--- a/src/components/TextField/TextField.style.ts
+++ b/src/components/TextField/TextField.style.ts
@@ -1,4 +1,4 @@
-import { css, SerializedStyles } from '@emotion/core';
+import { css } from '@emotion/core';
 import { rem } from 'polished';
 import { Props } from './TextField';
 import { Theme } from '../../theme';
@@ -54,9 +54,7 @@ const wrapperStyleSwitch = (theme: Theme, lean?: boolean, error?: boolean, style
  * this wrapper must remain simple and not mess with children properties as it will be used
  * in custom implementation needed eg: datepicker
  * */
-export const wrapperStyle = ({ disabled, error, lean, styleType }: Props) => (
-  theme: Theme
-): SerializedStyles => css`
+export const wrapperStyle = ({ disabled, error, lean, styleType }: Props) => (theme: Theme) => css`
   transition: background-color 0.25s, box-shadow 0.25s;
   border-radius: ${theme.spacing.xsm};
   cursor: ${disabled ? 'not-allowed' : 'auto'};
@@ -81,9 +79,7 @@ export const wrapperStyle = ({ disabled, error, lean, styleType }: Props) => (
   `}
 `;
 
-export const textFieldStyle = ({ label, leftIcon }: Props) => (
-  theme: Theme
-): SerializedStyles => css`
+export const textFieldStyle = ({ label, leftIcon }: Props) => (theme: Theme) => css`
   display: inline-flex;
   flex-direction: row;
   align-items: center;
@@ -97,17 +93,13 @@ export const textFieldStyle = ({ label, leftIcon }: Props) => (
   }
 `;
 
-export const iconWrapperStyle = ({ label, rightIcon }: Props) => (
-  theme: Theme
-): SerializedStyles => css`
+export const iconWrapperStyle = ({ label, rightIcon }: Props) => (theme: Theme) => css`
   margin-top: ${label ? '-' + theme.spacing.md : 0};
   margin-right: ${!rightIcon ? rem(5) : 0};
   margin-left: ${rightIcon ? rem(12) : 'inherit'};
 `;
 
-export const inputStyle = ({ label, placeholder }: Props) => (
-  theme: Theme
-): SerializedStyles => css`
+export const inputStyle = ({ label, placeholder }: Props) => (theme: Theme) => css`
   background: transparent;
   border: none;
   color: #232323;
@@ -143,7 +135,7 @@ export const inputStyle = ({ label, placeholder }: Props) => (
   }
 `;
 
-export const errorMsgStyle = () => (theme: Theme): SerializedStyles => css`
+export const errorMsgStyle = () => (theme: Theme) => css`
   display: flex;
   align-items: center;
   color: ${theme.palette.error[400]};
@@ -155,7 +147,7 @@ export const errorMsgStyle = () => (theme: Theme): SerializedStyles => css`
   }
 `;
 
-export const indicatorStyle = (): SerializedStyles => css`
+export const indicatorStyle = () => css`
   display: inline-flex;
   padding-left: ${rem(16)};
   position: absolute;
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index ec23fb177..66ea0776f 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -9,7 +9,6 @@ import {
   textFieldStyle,
   wrapperStyle,
 } from './TextField.style';
-import useTheme from '../../hooks/useTheme';
 import Label from '../Label';
 import Icon from '../Icon';
 import { formFieldStyles } from 'theme/palette';
@@ -71,16 +70,14 @@ const TextField: React.FC<Props> = ({
   withIndicator = false,
   ...rest
 }) => {
-  const theme = useTheme();
-
   return (
     <React.Fragment>
       <div css={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
-        <div css={wrapperStyle({ disabled, error, lean, styleType })(theme)}>
-          <div css={textFieldStyle({ label, leftIcon })(theme)}>
-            {leftIcon && <div css={iconWrapperStyle({ label, rightIcon })(theme)}>{leftIcon}</div>}
+        <div css={wrapperStyle({ disabled, error, lean, styleType })}>
+          <div css={textFieldStyle({ label, leftIcon })}>
+            {leftIcon && <div css={iconWrapperStyle({ label, rightIcon })}>{leftIcon}</div>}
             <input
-              css={inputStyle({ label, placeholder })(theme)}
+              css={inputStyle({ label, placeholder })}
               placeholder={!label && placeholder ? `${placeholder} ${required ? '*' : ''}` : label}
               required={required}
               id={id}
@@ -97,7 +94,7 @@ const TextField: React.FC<Props> = ({
               />
             )}
             {rightIcon && (
-              <div css={iconWrapperStyle({ label, rightIcon, leftIcon })(theme)}>{rightIcon}</div>
+              <div css={iconWrapperStyle({ label, rightIcon, leftIcon })}>{rightIcon}</div>
             )}
           </div>
         </div>
@@ -107,7 +104,7 @@ const TextField: React.FC<Props> = ({
           </div>
         )}
       </div>
-      {withErrorMsg && error && <div css={errorMsgStyle()(theme)}>{errorMsg}</div>}
+      {withErrorMsg && error && <div css={errorMsgStyle()}>{errorMsg}</div>}
     </React.Fragment>
   );
 };
diff --git a/src/components/TextField/__snapshots__/TextField.stories.storyshot b/src/components/TextField/__snapshots__/TextField.stories.storyshot
index a15fb8d4e..f66ed2b97 100644
--- a/src/components/TextField/__snapshots__/TextField.stories.storyshot
+++ b/src/components/TextField/__snapshots__/TextField.stories.storyshot
@@ -33,13 +33,7 @@ exports[`Storyshots Design System/TextField Text Field with Label 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -109,13 +103,7 @@ exports[`Storyshots Design System/TextField Text Field with Placeholder 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -179,13 +167,7 @@ exports[`Storyshots Design System/TextField Text Field with Placeholder and icon
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -258,13 +240,7 @@ exports[`Storyshots Design System/TextField Text Field without Label 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -327,13 +303,7 @@ exports[`Storyshots Design System/TextField TextField disabled with label 1`] =
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -404,13 +374,7 @@ exports[`Storyshots Design System/TextField TextField with label and error handl
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
diff --git a/src/components/storyUtils/Stack/Stack.tsx b/src/components/storyUtils/Stack/Stack.tsx
index 45a4a2c16..7a2fa2786 100644
--- a/src/components/storyUtils/Stack/Stack.tsx
+++ b/src/components/storyUtils/Stack/Stack.tsx
@@ -8,7 +8,7 @@ type Props = {
 
 const Stack: React.FC<Props> = ({ vertical = false, children }) => {
   return (
-    <div style={{ display: 'flex', flexDirection: vertical ? 'column' : 'row', flexWrap: 'wrap' }}>
+    <div css={{ display: 'flex', flexDirection: vertical ? 'column' : 'row', flexWrap: 'wrap' }}>
       {React.Children.toArray(children).map((item, index) => (
         // eslint-disable-next-line react/no-array-index-key
         <div key={index} style={{ margin: 5 }}>
diff --git a/src/theme/functions.ts b/src/theme/functions.ts
index 29dc1998a..fc62a758e 100644
--- a/src/theme/functions.ts
+++ b/src/theme/functions.ts
@@ -1,17 +1,17 @@
 // import theme from 'src/theme/globals';
-import { css, SerializedStyles } from '@emotion/core';
+import { css } from '@emotion/core';
 /* Declare mixins in order to further DRY our code. Any reusable and indepedent =  css code bundle
   should become a mixin. Include them using the "@include" command inside a =  css selector
  */
 /* centers a block element */
 
-export const grid: SerializedStyles = css`
+export const grid = css`
   display: grid;
 
   grid-auto-columns: 1fr;
 `;
 
-export const well: SerializedStyles = css`
+export const well = css`
   border-radius: 6px;
   box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
   background-color: white;
@@ -25,7 +25,7 @@ export const centerAbsoluteVertical = css`
 `;
 
 /* quick transition declaration */
-export const transition = (s: number, type = 'all'): SerializedStyles => css`
+export const transition = (s: number, type = 'all') => css`
   -webkit-transition: ${type} ${s}s ease-in-out;
   -moz-transition: ${type} ${s}s ease-in-out;
   -ms-transition: ${type} ${s}s ease-in-out;
@@ -34,13 +34,13 @@ export const transition = (s: number, type = 'all'): SerializedStyles => css`
 `;
 
 /* adds a "..." after the line of the text exceeds the width of the component*/
-export const lineEllipsis: SerializedStyles = css`
+export const lineEllipsis = css`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 `;
 
-export const flex: SerializedStyles = css`
+export const flex = css`
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -48,7 +48,7 @@ export const flex: SerializedStyles = css`
 `;
 
 /* centers flex content */
-export const flexCenter: SerializedStyles = css`
+export const flexCenter = css`
   ${flex};
   -webkit-align-items: center;
   -moz-box-align: center;
@@ -57,7 +57,7 @@ export const flexCenter: SerializedStyles = css`
   justify-content: center;
 `;
 
-export const flexCenterVertical: SerializedStyles = css`
+export const flexCenterVertical = css`
   ${flex};
   -webkit-align-items: center;
   -moz-box-align: center;
@@ -65,7 +65,7 @@ export const flexCenterVertical: SerializedStyles = css`
   align-items: center;
 `;
 
-export const plainTextButton: SerializedStyles = css`
+export const plainTextButton = css`
   ${transition(0.1, 'color')}
   border: none;
   background: transparent;

From 14bb92b5dd6c67162faab1263ff61a3af79e8dba Mon Sep 17 00:00:00 2001
From: panagiotis vourtsis <vourtsis_pan@hotmail.com>
Date: Wed, 23 Sep 2020 13:28:41 +0300
Subject: [PATCH 2/4] fix: remove unused jsx pragma

---
 src/components/DatePicker/DatePickInput/DatePickInput.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/DatePicker/DatePickInput/DatePickInput.tsx b/src/components/DatePicker/DatePickInput/DatePickInput.tsx
index 8d364fc2d..5a892eaff 100644
--- a/src/components/DatePicker/DatePickInput/DatePickInput.tsx
+++ b/src/components/DatePicker/DatePickInput/DatePickInput.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import dayjs from 'dayjs';
 import * as React from 'react';
 import { DayPickerInputProps } from 'react-day-picker';

From 3c360d2f7490508af1fec9abf12a1cce260ae4d1 Mon Sep 17 00:00:00 2001
From: panagiotis vourtsis <vourtsis_pan@hotmail.com>
Date: Wed, 23 Sep 2020 13:32:53 +0300
Subject: [PATCH 3/4] fix: remove unused jsx pragma

---
 .../storyUtils/BreadcrumbShowcase/BreadcrumbShowcase.tsx        | 2 --
 src/components/storyUtils/MenuShowcase/MenuShowcase.tsx         | 2 --
 src/components/storyUtils/PresentComponent/PresentComponent.tsx | 2 --
 3 files changed, 6 deletions(-)

diff --git a/src/components/storyUtils/BreadcrumbShowcase/BreadcrumbShowcase.tsx b/src/components/storyUtils/BreadcrumbShowcase/BreadcrumbShowcase.tsx
index a2c0c4c58..373a0884f 100644
--- a/src/components/storyUtils/BreadcrumbShowcase/BreadcrumbShowcase.tsx
+++ b/src/components/storyUtils/BreadcrumbShowcase/BreadcrumbShowcase.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import React, { useState, useEffect } from 'react';
 import Breadcrumb from 'components/Breadcrumb';
 import { BreadcrumbItemData } from '../../Breadcrumb/types';
diff --git a/src/components/storyUtils/MenuShowcase/MenuShowcase.tsx b/src/components/storyUtils/MenuShowcase/MenuShowcase.tsx
index 18973f482..84c2b28d9 100644
--- a/src/components/storyUtils/MenuShowcase/MenuShowcase.tsx
+++ b/src/components/storyUtils/MenuShowcase/MenuShowcase.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import React from 'react';
 import Menu from 'components/Menu';
 
diff --git a/src/components/storyUtils/PresentComponent/PresentComponent.tsx b/src/components/storyUtils/PresentComponent/PresentComponent.tsx
index a4b52d37d..2e9f01682 100644
--- a/src/components/storyUtils/PresentComponent/PresentComponent.tsx
+++ b/src/components/storyUtils/PresentComponent/PresentComponent.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import * as React from 'react';
 
 type Props = {

From cfae3b7417afef700704b81625583af657e85352 Mon Sep 17 00:00:00 2001
From: panagiotis vourtsis <vourtsis_pan@hotmail.com>
Date: Wed, 23 Sep 2020 13:47:47 +0300
Subject: [PATCH 4/4] fix: revert changes on serializestyles

---
 src/components/CheckBox/CheckBox.style.ts     | 10 +++++----
 src/components/DatePicker/DatePicker.style.ts |  8 ++++---
 src/components/Label/Label.style.ts           |  4 ++--
 src/components/Radio/Radio.style.ts           | 13 ++++++-----
 src/components/Table/Table.style.ts           |  4 ++--
 src/components/TextField/TextField.style.ts   | 22 +++++++++++++------
 6 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/components/CheckBox/CheckBox.style.ts b/src/components/CheckBox/CheckBox.style.ts
index 07a45abb9..579bf7aeb 100644
--- a/src/components/CheckBox/CheckBox.style.ts
+++ b/src/components/CheckBox/CheckBox.style.ts
@@ -1,9 +1,9 @@
-import { css } from '@emotion/core';
+import { css, SerializedStyles } from '@emotion/core';
 import { rem, transparentize } from 'polished';
 import { Theme } from '../../theme';
 import { Props } from './CheckBox';
 
-export const wrapperStyle = ({ disabled }: Props) => (theme: Theme) => css`
+export const wrapperStyle = ({ disabled }: Props) => (theme: Theme): SerializedStyles => css`
   opacity: ${disabled ? 0.3 : 1};
   justify-content: center;
   align-items: center;
@@ -23,7 +23,9 @@ export const checkboxWrapperStyle = () => (theme: Theme) => css`
   }
 `;
 
-export const checkboxStyle = ({ intermediate, checked }: Props) => (theme: Theme) => css`
+export const checkboxStyle = ({ intermediate, checked }: Props) => (
+  theme: Theme
+): SerializedStyles => css`
   background: ${checked
     ? intermediate
       ? theme.palette.flat.darkGray[400]
@@ -81,7 +83,7 @@ export const checkboxStyle = ({ intermediate, checked }: Props) => (theme: Theme
   }
 `;
 
-export const labelStyle = () => (theme: Theme) => css`
+export const labelStyle = () => (theme: Theme): SerializedStyles => css`
   padding-left: ${rem(4)};
   font-size: ${theme.typography.fontSizes['15']};
   font-weight: ${theme.typography.weights.regular};
diff --git a/src/components/DatePicker/DatePicker.style.ts b/src/components/DatePicker/DatePicker.style.ts
index 810253ad4..8c38f0634 100644
--- a/src/components/DatePicker/DatePicker.style.ts
+++ b/src/components/DatePicker/DatePicker.style.ts
@@ -1,9 +1,11 @@
-import { css } from '@emotion/core';
+import { css, SerializedStyles } from '@emotion/core';
 import { Theme } from '../../theme';
 import FatArrowLeft from '../Icon/assets/fat-arrow-left.svg';
 import FatArrowRight from '../Icon/assets/fat-arrow-right.svg';
 
-export const optionStyle = ({ selected }: { selected?: boolean }) => (theme: Theme) => css`
+export const optionStyle = ({ selected }: { selected?: boolean }) => (
+  theme: Theme
+): SerializedStyles => css`
   white-space: nowrap;
   padding: ${theme.spacing.md};
   font-weight: ${selected ? 'bold' : 'initial'};
@@ -12,7 +14,7 @@ export const optionStyle = ({ selected }: { selected?: boolean }) => (theme: The
 
 export const datePickerStyles = ({ isRangePicker }: { isRangePicker?: boolean }) => (
   theme: Theme
-) => css`
+): SerializedStyles => css`
   .DayPickerInput-Overlay {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
     border: 1px solid #dfdfdf;
diff --git a/src/components/Label/Label.style.ts b/src/components/Label/Label.style.ts
index aa2e5c04c..3399a2797 100644
--- a/src/components/Label/Label.style.ts
+++ b/src/components/Label/Label.style.ts
@@ -1,9 +1,9 @@
-import { css } from '@emotion/core';
+import { css, SerializedStyles } from '@emotion/core';
 import { Theme } from '../../theme';
 
 export const labelStyle = ({ animateToTop, error }: { animateToTop: boolean; error: boolean }) => (
   theme: Theme
-) => css`
+): SerializedStyles => css`
   transition: transform 0.25s, opacity 0.25s ease-in-out;
   transform-origin: 0 0;
   width: 100%;
diff --git a/src/components/Radio/Radio.style.ts b/src/components/Radio/Radio.style.ts
index dd8dc4eae..cc4842cb7 100644
--- a/src/components/Radio/Radio.style.ts
+++ b/src/components/Radio/Radio.style.ts
@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css, SerializedStyles } from '@emotion/core';
 import { rem } from 'polished';
 import { Props } from './Radio';
 
@@ -6,7 +6,7 @@ const focusedRadio = css`
   box-shadow: 0 0 0 ${rem('11px')} rgba(0, 0, 0, 0.04);
 `;
 
-export const inputStyles = css`
+export const inputStyles: SerializedStyles = css`
   top: 0;
   left: 0;
   width: 100%;
@@ -23,7 +23,10 @@ export const inputStyles = css`
   }
 `;
 
-export const customRadioWrapperStyles = (focused: boolean, disabled: boolean) => css`
+export const customRadioWrapperStyles = (
+  focused: boolean,
+  disabled: boolean
+): SerializedStyles => css`
   position: relative;
   border-radius: 50%;
   width: ${rem('28px')};
@@ -32,7 +35,7 @@ export const customRadioWrapperStyles = (focused: boolean, disabled: boolean) =>
   ${focused && !disabled && focusedRadio};
 `;
 
-export const customRadioStyles = (props: Pick<Props, 'checked' | 'disabled'>) => {
+export const customRadioStyles = (props: Pick<Props, 'checked' | 'disabled'>): SerializedStyles => {
   function determineBoxShadow({ checked, disabled }: Pick<Props, 'checked' | 'disabled'>) {
     if (disabled && checked) {
       return `inset 0px 0px 0px ${rem('2px')} #efefef, inset 0px 0px 0px ${rem(
@@ -64,7 +67,7 @@ export const customRadioStyles = (props: Pick<Props, 'checked' | 'disabled'>) =>
   `;
 };
 
-export const wrapperStyles = (disabled: boolean) => css`
+export const wrapperStyles = (disabled: boolean): SerializedStyles => css`
   position: relative;
 
   border-radius: 50%;
diff --git a/src/components/Table/Table.style.ts b/src/components/Table/Table.style.ts
index aa78eff71..4c1bfc563 100644
--- a/src/components/Table/Table.style.ts
+++ b/src/components/Table/Table.style.ts
@@ -1,5 +1,5 @@
-import { css } from '@emotion/core';
+import { css, SerializedStyles } from '@emotion/core';
 import { Theme } from '../../theme';
 
-export const tableStyle = () => (theme: Theme) =>
+export const tableStyle = () => (theme: Theme): SerializedStyles =>
   css({ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' });
diff --git a/src/components/TextField/TextField.style.ts b/src/components/TextField/TextField.style.ts
index 93cfd1675..908bb5ed2 100644
--- a/src/components/TextField/TextField.style.ts
+++ b/src/components/TextField/TextField.style.ts
@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css, SerializedStyles } from '@emotion/core';
 import { rem } from 'polished';
 import { Props } from './TextField';
 import { Theme } from '../../theme';
@@ -54,7 +54,9 @@ const wrapperStyleSwitch = (theme: Theme, lean?: boolean, error?: boolean, style
  * this wrapper must remain simple and not mess with children properties as it will be used
  * in custom implementation needed eg: datepicker
  * */
-export const wrapperStyle = ({ disabled, error, lean, styleType }: Props) => (theme: Theme) => css`
+export const wrapperStyle = ({ disabled, error, lean, styleType }: Props) => (
+  theme: Theme
+): SerializedStyles => css`
   transition: background-color 0.25s, box-shadow 0.25s;
   border-radius: ${theme.spacing.xsm};
   cursor: ${disabled ? 'not-allowed' : 'auto'};
@@ -79,7 +81,9 @@ export const wrapperStyle = ({ disabled, error, lean, styleType }: Props) => (th
   `}
 `;
 
-export const textFieldStyle = ({ label, leftIcon }: Props) => (theme: Theme) => css`
+export const textFieldStyle = ({ label, leftIcon }: Props) => (
+  theme: Theme
+): SerializedStyles => css`
   display: inline-flex;
   flex-direction: row;
   align-items: center;
@@ -93,13 +97,17 @@ export const textFieldStyle = ({ label, leftIcon }: Props) => (theme: Theme) =>
   }
 `;
 
-export const iconWrapperStyle = ({ label, rightIcon }: Props) => (theme: Theme) => css`
+export const iconWrapperStyle = ({ label, rightIcon }: Props) => (
+  theme: Theme
+): SerializedStyles => css`
   margin-top: ${label ? '-' + theme.spacing.md : 0};
   margin-right: ${!rightIcon ? rem(5) : 0};
   margin-left: ${rightIcon ? rem(12) : 'inherit'};
 `;
 
-export const inputStyle = ({ label, placeholder }: Props) => (theme: Theme) => css`
+export const inputStyle = ({ label, placeholder }: Props) => (
+  theme: Theme
+): SerializedStyles => css`
   background: transparent;
   border: none;
   color: #232323;
@@ -135,7 +143,7 @@ export const inputStyle = ({ label, placeholder }: Props) => (theme: Theme) => c
   }
 `;
 
-export const errorMsgStyle = () => (theme: Theme) => css`
+export const errorMsgStyle = () => (theme: Theme): SerializedStyles => css`
   display: flex;
   align-items: center;
   color: ${theme.palette.error[400]};
@@ -147,7 +155,7 @@ export const errorMsgStyle = () => (theme: Theme) => css`
   }
 `;
 
-export const indicatorStyle = () => css`
+export const indicatorStyle = (): SerializedStyles => css`
   display: inline-flex;
   padding-left: ${rem(16)};
   position: absolute;