Commit hard-coded import

.storybook/preview.tsx

@@ -3,7 +3,7 @@ import { addDecorator, addParameters } from '@storybook/react';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import addons from '@storybook/addons';
 import { Global, css } from '@emotion/core';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from 'src/utils/theming/emotionTheming';
 import Theme from './theme';
 import {
   resetStyles,

src/shared-components/accordion/index.tsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useState, useRef } from 'react';
 import ChevronIcon from 'src/svgs/icons/chevron-icon.svg';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from 'src/utils/theming/emotionTheming';
 
 import Thumbnails from './thumbnails';
 import {

src/shared-components/accordion/style.ts

@@ -3,7 +3,7 @@ import {
   ANIMATION, BREAKPOINTS, BOX_SHADOWS, SPACER, 
 } from 'src/constants';
 import { ThemeType } from 'src/constants/themes/types';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 
 export const Content = styled.div`
   padding: ${SPACER.medium};

src/shared-components/accordion/test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from 'src/utils/theming/emotionTheming';
 import { primaryTheme } from 'src/constants/themes';
 
 import { Accordion } from './index';

src/shared-components/accordion/thumbnails/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 import { style as TYPOGRAPHY_STYLE } from 'src/shared-components/typography';
 import { COLORS, SPACER } from 'src/constants';

src/shared-components/alert/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css, keyframes } from '@emotion/core';
 
 import {

src/shared-components/avatar/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 
 import { COLORS } from '../../constants';
 

src/shared-components/banner/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 import { buttonReset } from 'src/utils/styles/buttonReset';
 

src/shared-components/button/components/roundButton/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 import tinycolor from 'tinycolor2';
 
@@ -58,7 +58,7 @@ export const roundButtonLoader = (disabled: boolean) => css`
   margin: -3px -3px 0 0;
 
   ${disabled &&
-    `
+  `
     & span {
       background-color: ${COLORS.white};
     }

src/shared-components/button/components/textButton/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 
 import { BOX_SHADOWS, COLORS, SPACER } from '../../../../constants';
 

src/shared-components/button/shared-components/container/index.ts

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 
 import { MEDIA_QUERIES, SPACER } from '../../../../constants';

src/shared-components/button/shared-components/loader/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import tinycolor from 'tinycolor2';
 import { css, keyframes } from '@emotion/core';
 

src/shared-components/button/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 import tinycolor from 'tinycolor2';
 

src/shared-components/callout/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 
 import { COLORS, SPACER, TYPOGRAPHY_CONSTANTS } from '../../constants';
 

src/shared-components/carousel/arrow/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 
 import { COLORS, SPACER, Z_SCALE } from '../../../constants';

src/shared-components/carousel/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 
 import { SPACER, COLORS } from '../../constants';

src/shared-components/chip/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 
 import { style as TYPOGRAPHY_STYLE } from '../typography';

src/shared-components/dialogModal/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 
 import Typography from '../typography';
 import {

src/shared-components/dropdown/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 
 import {

src/shared-components/field/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 
 import { style as TYPOGRAPHY_STYLE } from '../typography';

src/shared-components/immersiveModal/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 import { buttonReset } from 'src/utils/styles/buttonReset';
 

src/shared-components/indicator/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 
 import { style as TYPOGRAPHY_STYLE } from '../typography';
 import { COLORS, SPACER, TYPOGRAPHY_CONSTANTS } from '../../constants';

src/shared-components/loadingSpinner/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { keyframes } from '@emotion/core';
 
 const appPreloader = (translateX: string) => keyframes`
@@ -18,7 +18,7 @@ export const LoadingSpinnerContainer = styled.div<{ bgColor: string }>`
   bottom: 0;
   right: 0;
 
-  background-color: ${props => props.bgColor};
+  background-color: ${(props) => props.bgColor};
 `;
 
 export const Overlay = styled.div`
@@ -36,27 +36,27 @@ export const Dot = styled.span<{
   size: string;
 }>`
   display: block;
-  height: ${props => props.size};
-  width: ${props => props.size};
+  height: ${(props) => props.size};
+  width: ${(props) => props.size};
 
-  background-color: ${props => props.color};
+  background-color: ${(props) => props.color};
   border-radius: 50%;
   opacity: 0;
 
-  animation-name: ${props => appPreloader(props.translateX)};
-  animation-duration: ${props => props.duration}s;
+  animation-name: ${(props) => appPreloader(props.translateX)};
+  animation-duration: ${(props) => props.duration}s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
 
   &:nth-of-type(1) {
-    animation-delay: ${props => (-props.duration * 3) / 4}s;
+    animation-delay: ${(props) => (-props.duration * 3) / 4}s;
   }
 
   &:nth-of-type(2) {
-    animation-delay: ${props => -props.duration / 2}s;
+    animation-delay: ${(props) => -props.duration / 2}s;
   }
 
   &:nth-of-type(3) {
-    animation-delay: ${props => -props.duration / 4}s;
+    animation-delay: ${(props) => -props.duration / 4}s;
   }
 `;

src/shared-components/optionButton/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 
 import { style as TYPOGRAPHY_STYLE } from '../typography';

src/shared-components/progressBar/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css, keyframes } from '@emotion/core';
 
 import { COLORS, ANIMATION, PROGRESS_BAR_STATUS } from '../../constants';
@@ -19,12 +19,12 @@ export const OuterContainer = styled.div<{
   top: 0;
   left: 0;
   right: 0;
-  background: ${props => props.backgroundColor};
+  background: ${(props) => props.backgroundColor};
   overflow: hidden;
   transition: opacity ${ANIMATION.defaultTiming} ease-in-out 500ms;
   width: 100%;
   z-index: 2;
-  height: ${props => `${props.height}px`};
+  height: ${(props) => `${props.height}px`};
 
   ${({ status }) =>
     (status === PROGRESS_BAR_STATUS.success ||
@@ -59,8 +59,8 @@ export const InnerBar = styled.div<{
 }>`
   position: absolute;
   width: 100%;
-  height: ${props => `${props.height}px`};
-  background-color: ${props => props.barColor};
+  height: ${(props) => `${props.height}px`};
+  background-color: ${(props) => props.barColor};
   animation: ${loadingProgression} ${({ loadingTime }) => loadingTime} ease-in;
   transform: translateX(-5%);
   transition: transform ${ANIMATION.defaultTiming} ease-in-out;

src/shared-components/selectorButton/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 
 import {

src/shared-components/tabs/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { buttonReset } from 'src/utils/styles/buttonReset';
 
 import { style as TYPOGRAPHY_STYLE } from '../typography';

src/shared-components/toggle/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 
 import { BOX_SHADOWS, COLORS, SPACER } from '../../constants';
 

src/shared-components/tooltip/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 
 import { COLORS, SPACER, TYPOGRAPHY_CONSTANTS } from '../../constants';

src/shared-components/transitions/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css, keyframes } from '@emotion/core';
 
 import { ANIMATION } from '../../constants';

src/shared-components/typography/index.ts

@@ -1,5 +1,5 @@
 import { css } from '@emotion/core';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import round from 'lodash.round';
 
 import { withDeprecationWarning } from '../../utils';

src/shared-components/verificationMessages/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 
 import { style as TYPOGRAPHY_STYLE } from '../typography';
 import { SPACER } from '../../constants';

src/utils/icons/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 
 export const Icons = styled.div`
   display: flex;

stories/accordion/subcomponents/index.stories.tsx

@@ -9,7 +9,7 @@ import {
   Canvas,
   Story,
 } from '@storybook/addon-docs/blocks';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { SPACER } from 'src/constants';
 import accountImage from 'shared/account.png';
 import personImage from 'shared/person.jpg';

stories/button/roundButton/index.stories.tsx

@@ -10,7 +10,7 @@ import {
 import { text, select, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { RoundButton } from 'src/shared-components';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { COLORS, SPACER } from 'src/constants';
 import type { Meta } from '@storybook/react';
 import {

stories/carousel/index.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import {
   ArgsTable,
   Description,

stories/chip/index.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import {
   ArgsTable,
   Description,

stories/constants/boxShadows.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { css } from '@emotion/core';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { SPACER } from 'src/constants';
 import * as BOX_SHADOWS from 'src/constants/boxShadows';
 import { Container, Typography } from 'src/shared-components';

stories/constants/color.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 
 const ColorContainer = styled.div`
   display: flex;

stories/constants/colors.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { SPACER } from 'src/constants';
 import { Typography } from 'src/shared-components';
 import * as ALL_COLORS from 'src/constants/colors';

stories/dropdown/index.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import {
   ArgsTable,
   Description,

stories/field/index.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { text, select, boolean } from '@storybook/addon-knobs';
 import { Field } from 'src/shared-components';
 import {

stories/icons/style.ts

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 
 const Icons = styled.div`
   display: flex;

stories/loadingSpinner/index.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { text, number } from '@storybook/addon-knobs';
 import { LoadingSpinner } from 'src/shared-components';
 import { BREAKPOINTS, COLORS } from 'src/constants';

stories/optionButton/index.stories.tsx

@@ -4,7 +4,7 @@ import MinusIcon from 'src/svgs/icons/minus-icon.svg';
 import AcneGlyph from 'src/svgs/glyphs/acne-glyph.svg';
 import PlusIcon from 'src/svgs/icons/plus-icon.svg';
 import { OptionButton } from 'src/shared-components';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import {
   ArgsTable,
   Description,

stories/progressBar/index.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { text, select, number, color } from '@storybook/addon-knobs';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { css } from '@emotion/core';
 import { ProgressBar } from 'src/shared-components';
 import { ANIMATION, COLORS, PROGRESS_BAR_STATUS } from 'src/constants';

stories/toggle/index.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from '@emotion/styled';
+import styled from 'src/utils/theming/styled';
 import { Toggle } from 'src/shared-components';
 import { SPACER } from 'src/constants';
 import {