deps: update module imports for emotion styled

Author: jamaljsr

app/src/components/NodeStatus.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { HeaderFour, Jumbo, Small } from 'components/base';
 import { Bitcoin, Bolt } from './base';
 import Tip from './common/Tip';
 import Unit from './common/Unit';
-import { styled } from './theme';
 
 const Styled = {
   Wrapper: styled.div`

app/src/components/auth/AuthPage.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { observer } from 'mobx-react-lite';
+import styled from '@emotion/styled';
 import { ReactComponent as LogoImage } from 'assets/images/logo.svg';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { Background, Button, HeaderOne, Input } from 'components/base';
-import { styled } from 'components/theme';
 
 const Styled = {
   Wrapper: styled.div`

app/src/components/base/icons.tsx

@@ -1,10 +1,12 @@
+import styled from '@emotion/styled';
 import { ReactComponent as AlertTriangleIcon } from 'assets/icons/alert-triangle.svg';
 import { ReactComponent as ArrowDownCircleIcon } from 'assets/icons/arrow-down-circle.svg';
 import { ReactComponent as ArrowDownIcon } from 'assets/icons/arrow-down.svg';
 import { ReactComponent as ArrowLeftIcon } from 'assets/icons/arrow-left.svg';
 import { ReactComponent as ArrowRightIcon } from 'assets/icons/arrow-right.svg';
 import { ReactComponent as ArrowUpCircleIcon } from 'assets/icons/arrow-up-circle.svg';
 import { ReactComponent as ArrowUpIcon } from 'assets/icons/arrow-up.svg';
+import { ReactComponent as BarChartIcon } from 'assets/icons/bar-chart.svg';
 import { ReactComponent as BitcoinIcon } from 'assets/icons/bitcoin.svg';
 import { ReactComponent as BoltIcon } from 'assets/icons/bolt.svg';
 import { ReactComponent as CheckIcon } from 'assets/icons/check.svg';
@@ -20,16 +22,14 @@ import { ReactComponent as CopyIcon } from 'assets/icons/copy.svg';
 import { ReactComponent as DotIcon } from 'assets/icons/dot.svg';
 import { ReactComponent as DownloadIcon } from 'assets/icons/download.svg';
 import { ReactComponent as HelpCircleIcon } from 'assets/icons/help-circle.svg';
+import { ReactComponent as ListIcon } from 'assets/icons/list.svg';
 import { ReactComponent as MaximizeIcon } from 'assets/icons/maximize.svg';
 import { ReactComponent as MenuIcon } from 'assets/icons/menu.svg';
 import { ReactComponent as MinimizeIcon } from 'assets/icons/minimize.svg';
 import { ReactComponent as RefreshIcon } from 'assets/icons/refresh-cw.svg';
 import { ReactComponent as SettingsIcon } from 'assets/icons/settings.svg';
 import { ReactComponent as CancelIcon } from 'assets/icons/slash.svg';
 import { ReactComponent as UserPlusIcon } from 'assets/icons/user-plus.svg';
-import { ReactComponent as BarChartIcon } from 'assets/icons/bar-chart.svg';
-import { ReactComponent as ListIcon } from 'assets/icons/list.svg';
-import { styled } from 'components/theme';
 
 interface IconProps {
   size?: 'x-small' | 'small' | 'medium' | 'large';

app/src/components/base/shared.tsx

@@ -1,5 +1,5 @@
+import styled from '@emotion/styled';
 import Chevrons from 'assets/icons/chevrons.svg';
-import { styled } from 'components/theme';
 
 //
 // Misc

app/src/components/base/text.tsx

@@ -1,4 +1,4 @@
-import { styled } from 'components/theme';
+import styled from '@emotion/styled';
 
 interface HeaderProps {
   marginless?: boolean;

app/src/components/common/AlertContainer.tsx

@@ -3,8 +3,8 @@ import { toast, ToastContainer } from 'react-toastify';
 import { values } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { Alert } from 'types/state';
+import styled from '@emotion/styled';
 import { useStore } from 'store';
-import { styled } from 'components/theme';
 import { Close } from '../base';
 
 const Styled = {

app/src/components/common/BadgeList.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
+import styled from '@emotion/styled';
 import { Badge } from 'components/base';
-import { styled } from 'components/theme';
 
 const Styled = {
   Wrapper: styled.div<{ flex?: boolean }>`

app/src/components/common/Checkbox.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { styled } from 'components/theme';
+import styled from '@emotion/styled';
 import { Check } from '../base';
 
 const Styled = {

app/src/components/common/ExternalLink.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from 'components/theme';
+import styled from '@emotion/styled';
 
 const Styled = {
   Wrapper: styled.a`

app/src/components/common/FormField.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
+import styled from '@emotion/styled';
 import { HeaderFour, HelpCircle } from 'components/base';
-import { styled } from 'components/theme';
 import Tip from './Tip';
 
 const Styled = {