chore: prohibit barrels (#7362)

* chore: prohibit barrels

* lint

* lint

* more lint

* add motivation to eslint message

.eslintrc.js

@@ -70,6 +70,13 @@ module.exports = {
             ],
           },
         ],
+        'no-restricted-syntax': [
+          'error',
+          {
+            selector: ':matches(ExportAllDeclaration)',
+            message: 'Barrel exports bloat the bundle size by preventing tree-shaking.',
+          },
+        ],
       },
     },
     {

src/components/About/AboutFooter.tsx

@@ -2,7 +2,8 @@ import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/an
 import { TraceEvent } from 'analytics'
 import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import styled from 'styled-components'
-import { BREAKPOINTS, ExternalLink, StyledRouterLink } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ExternalLink, StyledRouterLink } from 'theme/components'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
 
 import { DiscordIcon, GithubIcon, TwitterIcon } from './Icons'

src/components/AccountDrawer/AuthenticatedHeader.tsx

@@ -23,7 +23,7 @@ import { useNavigate } from 'react-router-dom'
 import { useAppDispatch } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
 import styled from 'styled-components'
-import { CopyHelper, ExternalLink, ThemedText } from 'theme'
+import { CopyHelper, ExternalLink, ThemedText } from 'theme/components'
 import { shortenAddress } from 'utils'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 

src/components/AccountDrawer/DownloadButton.tsx

@@ -1,7 +1,7 @@
 import { InterfaceElementName } from '@uniswap/analytics-events'
 import { PropsWithChildren, useCallback } from 'react'
 import styled from 'styled-components'
-import { ClickableStyle } from 'theme'
+import { ClickableStyle } from 'theme/components'
 import { openDownloadApp } from 'utils/openDownloadApp'
 
 const StyledButton = styled.button<{ padded?: boolean; branded?: boolean }>`

src/components/AccountDrawer/GitVersionRow.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import Tooltip from 'components/Tooltip'
 import useCopyClipboard from 'hooks/useCopyClipboard'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const Container = styled.div`
   width: 100%;

src/components/AccountDrawer/MiniPortfolio/Activity/ActivityRow.tsx

@@ -8,7 +8,7 @@ import { TransactionStatus } from 'graphql/data/__generated__/types-and-hooks'
 import useENSName from 'hooks/useENSName'
 import { useCallback } from 'react'
 import styled from 'styled-components'
-import { EllipsisStyle, ThemedText } from 'theme'
+import { EllipsisStyle, ThemedText } from 'theme/components'
 import { shortenAddress } from 'utils'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 

src/components/AccountDrawer/MiniPortfolio/Activity/OffchainActivityModal.tsx

@@ -17,7 +17,7 @@ import { InterfaceTrade } from 'state/routing/types'
 import { useOrder } from 'state/signatures/hooks'
 import { UniswapXOrderDetails } from 'state/signatures/types'
 import styled from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 type SelectedOrderInfo = {

src/components/AccountDrawer/MiniPortfolio/Activity/index.tsx

@@ -6,7 +6,7 @@ import { atom, useAtom } from 'jotai'
 import { EmptyWalletModule } from 'nft/components/profile/view/EmptyWalletContent'
 import { useEffect, useMemo } from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { PortfolioSkeleton, PortfolioTabWrapper } from '../PortfolioRow'
 import { ActivityRow } from './ActivityRow'

src/components/AccountDrawer/MiniPortfolio/ExpandoRow.tsx

@@ -4,7 +4,7 @@ import Row from 'components/Row'
 import { PropsWithChildren } from 'react'
 import { ChevronDown } from 'react-feather'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const ExpandIcon = styled(ChevronDown)<{ $expanded: boolean }>`
   color: ${({ theme }) => theme.neutral2};

src/components/AccountDrawer/MiniPortfolio/NFTs/NFTItem.tsx

@@ -11,7 +11,7 @@ import { WalletAsset } from 'nft/types'
 import { floorFormatter } from 'nft/utils'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const FloorPrice = styled(Row)`
   opacity: 0;

src/components/AccountDrawer/MiniPortfolio/Pools/index.tsx

@@ -12,7 +12,7 @@ import { EmptyWalletModule } from 'nft/components/profile/view/EmptyWalletConten
 import { useCallback, useMemo, useReducer } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 import { ExpandoRow } from '../ExpandoRow'

src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx

@@ -10,7 +10,7 @@ import { EmptyWalletModule } from 'nft/components/profile/view/EmptyWalletConten
 import { useCallback, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
-import { EllipsisStyle, ThemedText } from 'theme'
+import { EllipsisStyle, ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 import { splitHiddenTokens } from 'utils/splitHiddenTokens'
 

src/components/AccountDrawer/MiniPortfolio/index.tsx

@@ -8,7 +8,8 @@ import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { useEffect, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
-import { BREAKPOINTS, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { ActivityTab } from './Activity'
 import { usePendingActivity } from './Activity/hooks'

src/components/AccountDrawer/SettingsMenu.tsx

@@ -8,7 +8,7 @@ import { useActiveLocale } from 'hooks/useActiveLocale'
 import { ReactNode } from 'react'
 import { ChevronRight } from 'react-feather'
 import styled from 'styled-components'
-import { ClickableStyle, ThemedText } from 'theme'
+import { ClickableStyle, ThemedText } from 'theme/components'
 import ThemeToggle from 'theme/components/ThemeToggle'
 
 import { AnalyticsToggle } from './AnalyticsToggle'

src/components/AccountDrawer/SettingsToggle.tsx

@@ -2,7 +2,7 @@ import Column from 'components/Column'
 import Row from 'components/Row'
 import Toggle from 'components/Toggle'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const StyledColumn = styled(Column)`
   width: 100%;

src/components/AccountDrawer/SlideOutMenu.tsx

@@ -2,7 +2,7 @@ import Column from 'components/Column'
 import { ScrollBarStyles } from 'components/Common'
 import { ArrowLeft } from 'react-feather'
 import styled from 'styled-components'
-import { ClickableStyle, ThemedText } from 'theme'
+import { ClickableStyle, ThemedText } from 'theme/components'
 
 const Menu = styled(Column)`
   width: 100%;

src/components/AccountDrawer/UniwalletModal.tsx

@@ -12,7 +12,7 @@ import { UniwalletConnect as UniwalletConnectV2 } from 'connection/WalletConnect
 import { QRCodeSVG } from 'qrcode.react'
 import { useEffect, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
-import { CloseIcon, ThemedText } from 'theme'
+import { CloseIcon, ThemedText } from 'theme/components'
 import { isIOS } from 'utils/userAgent'
 
 import uniPng from '../../assets/images/uniwallet_modal_icon.png'

src/components/AccountDrawer/index.tsx

@@ -10,7 +10,8 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { ChevronsRight } from 'react-feather'
 import { useGesture } from 'react-use-gesture'
 import styled from 'styled-components'
-import { BREAKPOINTS, ClickableStyle } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ClickableStyle } from 'theme/components'
 import { Z_INDEX } from 'theme/zIndex'
 import { isMobile } from 'utils/userAgent'
 

src/components/AccountDrawer/shared.tsx

@@ -5,7 +5,8 @@ import { Check } from 'react-feather'
 import type { To } from 'react-router-dom'
 import { Link } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
-import { BREAKPOINTS, ClickableStyle, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ClickableStyle, ThemedText } from 'theme/components'
 
 const InternalLinkMenuItem = styled(Link)`
   ${ClickableStyle}

src/components/AddressInputPanel/index.tsx

@@ -4,10 +4,10 @@ import { t } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { ChangeEvent, ReactNode, useCallback } from 'react'
 import styled, { useTheme } from 'styled-components'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { flexColumnNoWrap } from 'theme/styles'
 
 import useENS from '../../hooks/useENS'
-import { ExternalLink, ThemedText } from '../../theme'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { AutoColumn } from '../Column'
 import { RowBetween } from '../Row'

src/components/AirdropModal/index.tsx

@@ -10,14 +10,14 @@ import Loader from 'components/Icons/LoadingSpinner'
 import { useContract } from 'hooks/useContract'
 import { ChevronRightIcon } from 'nft/components/icons'
 import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable'
-import { CollectionRewardsFetcher } from 'nft/queries/genie/GetAirdorpMerkle'
+import { CollectionRewardsFetcher } from 'nft/queries/genie'
 import { Airdrop, Rewards } from 'nft/types/airdrop'
 import { useEffect, useState } from 'react'
 import { AlertTriangle } from 'react-feather'
 import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled from 'styled-components'
-import { CloseIcon, ThemedText } from 'theme'
+import { CloseIcon, ThemedText } from 'theme/components'
 
 import Modal from '../Modal'
 

src/components/Banner/BaseAnnouncementBanner/index.tsx

@@ -7,7 +7,7 @@ import baseLogoUrl from 'assets/svg/base_background_icon.svg'
 import { useScreenSize } from 'hooks/useScreenSize'
 import { useLocation } from 'react-router-dom'
 import { useHideBaseWalletBanner } from 'state/user/hooks'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { openDownloadApp, openWalletMicrosite } from 'utils/openDownloadApp'
 import { isIOS, isMobileSafari } from 'utils/userAgent'
 

src/components/Button/LoadingButtonSpinner.tsx

@@ -1,4 +1,4 @@
-import { SpinnerSVG } from 'theme'
+import { SpinnerSVG } from 'theme/components'
 
 const ButtonLoadingSpinner = (props: React.ComponentPropsWithoutRef<'svg'>) => (
   <SpinnerSVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>

src/components/Charts/PriceChart/index.tsx

@@ -16,7 +16,7 @@ import { useActiveLocale } from 'hooks/useActiveLocale'
 import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { Info } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { textFadeIn } from 'theme/styles'
 import { useFormatter } from 'utils/formatNumbers'
 

src/components/ConnectedAccountBlocked/index.tsx

@@ -2,9 +2,9 @@ import { Trans } from '@lingui/macro'
 import Column from 'components/Column'
 import { BlockedIcon } from 'components/TokenSafety/TokenSafetyIcon'
 import styled, { useTheme } from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
+import { CopyHelper } from 'theme/components'
 
-import { CopyHelper } from '../../theme'
 import Modal from '../Modal'
 
 const ContentWrapper = styled(Column)`

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -5,7 +5,7 @@ import { LoadingBubble } from 'components/Tokens/loading'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { useMemo } from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 import { warningSeverity } from 'utils/prices'
 

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -15,12 +15,12 @@ import { darken } from 'polished'
 import { forwardRef, ReactNode, useCallback, useEffect, useState } from 'react'
 import { Lock } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
+import { ThemedText } from 'theme/components'
 import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
 import { useCurrencyBalance } from '../../state/connection/hooks'
-import { ThemedText } from '../../theme'
 import { ButtonGray } from '../Button'
 import DoubleCurrencyLogo from '../DoubleLogo'
 import { Input as NumericalInput } from '../NumericalInput'

src/components/CurrencyInputPanel/index.tsx

@@ -10,12 +10,12 @@ import { isSupportedChain } from 'constants/chains'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
+import { ThemedText } from 'theme/components'
 import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
 import { useCurrencyBalance } from '../../state/connection/hooks'
-import { ThemedText } from '../../theme'
 import { ButtonGray } from '../Button'
 import DoubleCurrencyLogo from '../DoubleLogo'
 import CurrencyLogo from '../Logo/CurrencyLogo'

src/components/ErrorBoundary/index.tsx

@@ -7,9 +7,9 @@ import { useIsMobile } from 'nft/hooks'
 import React, { PropsWithChildren, useState } from 'react'
 import { Copy } from 'react-feather'
 import styled from 'styled-components'
+import { CopyToClipboard, ExternalLink, ThemedText } from 'theme/components'
 import { isSentryEnabled } from 'utils/env'
 
-import { CopyToClipboard, ExternalLink, ThemedText } from '../../theme'
 import { Column } from '../Column'
 
 const FallbackWrapper = styled.div`

src/components/FeeSelector/FeeOption.tsx

@@ -6,7 +6,7 @@ import { useFeeTierDistribution } from 'hooks/useFeeTierDistribution'
 import { PoolState } from 'hooks/usePools'
 import React from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { FeeTierPercentageBadge } from './FeeTierPercentageBadge'
 import { FEE_AMOUNT_DETAIL } from './shared'

src/components/FeeSelector/FeeTierPercentageBadge.tsx

@@ -4,7 +4,7 @@ import Badge from 'components/Badge'
 import { useFeeTierDistribution } from 'hooks/useFeeTierDistribution'
 import { PoolState } from 'hooks/usePools'
 import React from 'react'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 export function FeeTierPercentageBadge({
   feeAmount,

src/components/FeeSelector/index.tsx

@@ -15,7 +15,7 @@ import { DynamicSection } from 'pages/AddLiquidity/styled'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Box } from 'rebass'
 import styled, { keyframes } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { FeeOption } from './FeeOption'
 import { FeeTierPercentageBadge } from './FeeTierPercentageBadge'

src/components/FiatOnrampModal/index.tsx

@@ -5,7 +5,7 @@ import { useHref } from 'react-router-dom'
 import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled, { useTheme } from 'styled-components'
-import { CustomLightSpinner, ThemedText } from 'theme'
+import { CustomLightSpinner, ThemedText } from 'theme/components'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
 
 import Circle from '../../assets/images/blue-loader.svg'

src/components/InputStepCounter/InputStepCounter.tsx

@@ -6,7 +6,7 @@ import { AutoColumn } from 'components/Column'
 import { ReactNode, useCallback, useEffect, useState } from 'react'
 import { Minus, Plus } from 'react-feather'
 import styled, { keyframes } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { Input as NumericalInput } from '../NumericalInput'
 

src/components/LiquidityChartRangeInput/index.tsx

@@ -11,8 +11,8 @@ import { BarChart2, CloudOff, Inbox } from 'react-feather'
 import { batch } from 'react-redux'
 import { Bound } from 'state/mint/v3/actions'
 import styled, { useTheme } from 'styled-components'
+import { ThemedText } from 'theme/components'
 
-import { ThemedText } from '../../theme'
 import { Chart } from './Chart'
 import { useDensityChartData } from './hooks'
 import { ZoomLevels } from './types'

src/components/Logo/UniswapXBrandMark.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import UniswapXRouterLabel, { UnswapXRouterLabelProps } from '../RouterLabel/UniswapXRouterLabel'
 

src/components/Menu/index.tsx

@@ -1,12 +1,12 @@
 import { FunctionComponent, PropsWithChildren, useRef } from 'react'
 import { Link } from 'react-router-dom'
 import styled, { css } from 'styled-components'
+import { ExternalLink } from 'theme/components'
 
 import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { useModalIsOpen, useToggleModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
-import { ExternalLink } from '../../theme'
 
 export enum FlyoutAlignment {
   LEFT = 'LEFT',

src/components/ModalViews/index.tsx

@@ -2,9 +2,9 @@ import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { ArrowUpCircle } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
+import { CloseIcon, CustomLightSpinner, ThemedText } from 'theme/components'
 
 import Circle from '../../assets/images/blue-loader.svg'
-import { CloseIcon, CustomLightSpinner, ThemedText } from '../../theme'
 import { ExternalLink } from '../../theme/components'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { AutoColumn, ColumnCenter } from '../Column'

src/components/NavBar/SearchBarDropdown.tsx

@@ -20,7 +20,7 @@ import { GenieCollection, TrendingCollection } from 'nft/types'
 import { useEffect, useMemo, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { ClockIcon, TrendingArrow } from '../../nft/components/icons'
 import { SuspendConditionally } from '../Suspense/SuspendConditionally'

src/components/NavBar/SuggestionRow.tsx

@@ -17,7 +17,7 @@ import { putCommas } from 'nft/utils/putCommas'
 import { useCallback, useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { useFormatter } from 'utils/formatNumbers'
 
 import { DeltaArrow, DeltaText } from '../Tokens/TokenDetails/Delta'

src/components/NavigationTabs/index.tsx

@@ -7,7 +7,7 @@ import { useAppDispatch } from 'state/hooks'
 import { resetMintState } from 'state/mint/actions'
 import { resetMintState as resetMintV3State } from 'state/mint/v3/actions'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { flexRowNoWrap } from 'theme/styles'
 
 import { RowBetween } from '../Row'

src/components/NetworkAlert/NetworkAlert.tsx

@@ -4,8 +4,8 @@ import { useWeb3React } from '@web3-react/core'
 import { getChainInfo } from 'constants/chainInfo'
 import { ArrowUpRight } from 'react-feather'
 import styled from 'styled-components'
-import { ExternalLink, HideSmall } from 'theme'
 import { colors } from 'theme/colors'
+import { ExternalLink, HideSmall } from 'theme/components'
 import { useDarkModeManager } from 'theme/components/ThemeToggle'
 
 import Column from '../Column'

src/components/Polling/ChainConnectivityWarning.tsx

@@ -4,7 +4,8 @@ import { useWeb3React } from '@web3-react/core'
 import { getChainInfoOrDefault, L2ChainInfo } from 'constants/chainInfo'
 import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components'
-import { ExternalLink, MEDIA_WIDTHS } from 'theme'
+import { MEDIA_WIDTHS } from 'theme'
+import { ExternalLink } from 'theme/components'
 
 const BodyRow = styled.div`
   color: ${({ theme }) => theme.neutral1};

src/components/Polling/index.tsx

@@ -10,7 +10,7 @@ import useBlockNumber from 'lib/hooks/useBlockNumber'
 import ms from 'ms'
 import { useEffect, useMemo, useState } from 'react'
 import styled, { keyframes } from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 import { MouseoverTooltip } from '../Tooltip'

src/components/Popups/ClaimPopup.tsx

@@ -4,6 +4,7 @@ import { useWeb3React } from '@web3-react/core'
 import { useCallback, useEffect } from 'react'
 import { Heart, X } from 'react-feather'
 import styled, { keyframes } from 'styled-components'
+import { ThemedText } from 'theme/components'
 
 import tokenLogo from '../../assets/images/token-logo.png'
 import {
@@ -14,7 +15,6 @@ import {
 } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { useUserHasAvailableClaim, useUserUnclaimedAmount } from '../../state/claim/hooks'
-import { ThemedText } from '../../theme'
 import { ButtonPrimary } from '../Button'
 import { AutoColumn } from '../Column'
 import { CardBGImage, CardNoise } from '../earn/styled'

src/components/Popups/PopupContent.tsx

@@ -16,7 +16,7 @@ import { X } from 'react-feather'
 import { useOrder } from 'state/signatures/hooks'
 import { useTransaction } from 'state/transactions/hooks'
 import styled from 'styled-components'
-import { EllipsisStyle, ThemedText } from 'theme'
+import { EllipsisStyle, ThemedText } from 'theme/components'
 import { useFormatter } from 'utils/formatNumbers'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 

src/components/PositionCard/index.tsx

@@ -9,12 +9,12 @@ import { ChevronDown, ChevronUp } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components'
+import { ExternalLink, ThemedText } from 'theme/components'
 
 import { BIG_INT_ZERO } from '../../constants/misc'
 import { useColor } from '../../hooks/useColor'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
 import { useTokenBalance } from '../../state/connection/hooks'
-import { ExternalLink, ThemedText } from '../../theme'
 import { currencyId } from '../../utils/currencyId'
 import { unwrappedToken } from '../../utils/unwrappedToken'
 import { ButtonEmpty, ButtonPrimary, ButtonSecondary } from '../Button'

src/components/PositionListItem/index.tsx

@@ -14,7 +14,8 @@ import { useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import { Bound } from 'state/mint/v3/actions'
 import styled from 'styled-components'
-import { HideSmall, MEDIA_WIDTHS, SmallOnly, ThemedText } from 'theme'
+import { MEDIA_WIDTHS } from 'theme'
+import { HideSmall, SmallOnly, ThemedText } from 'theme/components'
 import { useFormatter } from 'utils/formatNumbers'
 import { unwrappedToken } from 'utils/unwrappedToken'
 

src/components/PositionPreview/index.tsx

@@ -13,7 +13,7 @@ import JSBI from 'jsbi'
 import { ReactNode, useCallback, useState } from 'react'
 import { Bound } from 'state/mint/v3/actions'
 import { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { useFormatter } from 'utils/formatNumbers'
 import { unwrappedToken } from 'utils/unwrappedToken'
 

src/components/PrivacyPolicy/index.tsx

@@ -6,7 +6,7 @@ import Row, { AutoRow, RowBetween } from 'components/Row'
 import { useEffect, useRef } from 'react'
 import { ArrowDown, Info, X } from 'react-feather'
 import styled from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { isMobile } from 'utils/userAgent'
 
 import { useModalIsOpen, useTogglePrivacyPolicy } from '../../state/application/hooks'

src/components/RangeSelector/PresetsButtons.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { ButtonOutlined } from 'components/Button'
 import { AutoRow } from 'components/Row'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const Button = styled(ButtonOutlined).attrs(() => ({
   padding: '6px',

src/components/RouterLabel/index.tsx

@@ -1,6 +1,6 @@
 import { InterfaceTrade, QuoteMethod } from 'state/routing/types'
 import { isUniswapXTrade } from 'state/routing/utils'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import UniswapXRouterLabel from './UniswapXRouterLabel'
 

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -9,7 +9,7 @@ import Row, { AutoRow } from 'components/Row'
 import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
 import { Box } from 'rebass'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { Z_INDEX } from 'theme/zIndex'
 import { RoutingDiagramEntry } from 'utils/getRoutingDiagramEntries'
 

src/components/SearchModal/CurrencyList/index.tsx

@@ -12,10 +12,10 @@ import { Check } from 'react-feather'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
 import styled from 'styled-components'
+import { ThemedText } from 'theme/components'
 
 import { useIsUserAddedToken } from '../../../hooks/Tokens'
 import { WrappedTokenInfo } from '../../../state/lists/wrappedTokenInfo'
-import { ThemedText } from '../../../theme'
 import Column, { AutoColumn } from '../../Column'
 import CurrencyLogo from '../../Logo/CurrencyLogo'
 import Row, { RowFixed } from '../../Row'

src/components/SearchModal/CurrencySearch.tsx

@@ -17,10 +17,10 @@ import AutoSizer from 'react-virtualized-auto-sizer'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
 import styled, { useTheme } from 'styled-components'
+import { CloseIcon, ThemedText } from 'theme/components'
 import { UserAddedToken } from 'types/tokens'
 
 import { useDefaultActiveTokens, useIsUserAddedToken, useSearchInactiveTokenLists, useToken } from '../../hooks/Tokens'
-import { CloseIcon, ThemedText } from '../../theme'
 import { isAddress } from '../../utils'
 import Column from '../Column'
 import Row, { RowBetween } from '../Row'

src/components/Settings/MaxSlippageSettings/index.tsx

@@ -7,7 +7,7 @@ import React, { useState } from 'react'
 import { useUserSlippageTolerance } from 'state/user/hooks'
 import { SlippageTolerance } from 'state/user/types'
 import styled from 'styled-components'
-import { CautionTriangle, ThemedText } from 'theme'
+import { CautionTriangle, ThemedText } from 'theme/components'
 
 import { Input, InputContainer } from '../Input'
 

src/components/Settings/MenuButton/index.tsx

@@ -4,7 +4,7 @@ import Row from 'components/Row'
 import { useUserSlippageTolerance } from 'state/user/hooks'
 import { SlippageTolerance } from 'state/user/types'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import validateUserSlippageTolerance, { SlippageValidationResult } from 'utils/validateUserSlippageTolerance'
 
 const Icon = styled(Settings)`

src/components/Settings/RouterPreferenceSettings/index.tsx

@@ -11,7 +11,7 @@ import { RouterPreference } from 'state/routing/types'
 import { useRouterPreference, useUserDisabledUniswapX } from 'state/user/hooks'
 import { updateDisabledUniswapX } from 'state/user/reducer'
 import styled from 'styled-components'
-import { Divider, ExternalLink, ThemedText } from 'theme'
+import { Divider, ExternalLink, ThemedText } from 'theme/components'
 
 const InlineLink = styled(ThemedText.BodySmall)`
   color: ${({ theme }) => theme.accent1};

src/components/Settings/TransactionDeadlineSettings/index.tsx

@@ -7,7 +7,7 @@ import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
 import ms from 'ms'
 import React, { useState } from 'react'
 import { useUserTransactionTTL } from 'state/user/hooks'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 enum DeadlineError {
   InvalidInput = 'InvalidInput',

src/components/Settings/index.tsx

@@ -17,7 +17,7 @@ import { ApplicationModal } from 'state/application/reducer'
 import { InterfaceTrade } from 'state/routing/types'
 import { isUniswapXTrade } from 'state/routing/utils'
 import styled from 'styled-components'
-import { Divider, ThemedText } from 'theme'
+import { Divider, ThemedText } from 'theme/components'
 import { Z_INDEX } from 'theme/zIndex'
 
 import MaxSlippageSettings from './MaxSlippageSettings'

src/components/SwitchLocaleLink/index.tsx

@@ -2,10 +2,10 @@ import { Trans } from '@lingui/macro'
 import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
 import { useMemo } from 'react'
 import styled from 'styled-components'
+import { StyledInternalLink, ThemedText } from 'theme/components'
 
 import { DEFAULT_LOCALE, LOCALE_LABEL, SupportedLocale } from '../../constants/locales'
 import { navigatorLocale, useActiveLocale } from '../../hooks/useActiveLocale'
-import { StyledInternalLink, ThemedText } from '../../theme'
 
 const Container = styled(ThemedText.DeprecatedSmall)`
   opacity: ${({ theme }) => theme.opacity.hover};

src/components/TokenSafety/TokenSafetyMessage.tsx

@@ -4,7 +4,7 @@ import { useTokenWarningColor, useTokenWarningTextColor } from 'hooks/useTokenWa
 import { AlertTriangle, Slash } from 'react-feather'
 import { Text } from 'rebass'
 import styled from 'styled-components'
-import { ExternalLink } from 'theme'
+import { ExternalLink } from 'theme/components'
 
 const Label = styled.div<{ color: string; backgroundColor: string }>`
   width: 100%;

src/components/TokenSafety/index.tsx

@@ -17,7 +17,7 @@ import { ExternalLink as LinkIconFeather } from 'react-feather'
 import { Text } from 'rebass'
 import { useAddUserToken } from 'state/user/hooks'
 import styled from 'styled-components'
-import { ButtonText, CopyLinkIcon, ExternalLink } from 'theme'
+import { ButtonText, CopyLinkIcon, ExternalLink } from 'theme/components'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 const Wrapper = styled.div`

src/components/Tokens/TokenDetails/About.tsx

@@ -4,7 +4,7 @@ import { getChainInfo } from 'constants/chainInfo'
 import { darken } from 'polished'
 import { useState } from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { textFadeIn } from 'theme/styles'
 
 import Resource from './Resource'

src/components/Tokens/TokenDetails/AddressSection.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import styled from 'styled-components'
-import { CopyContractAddress, ThemedText } from 'theme'
+import { CopyContractAddress, ThemedText } from 'theme/components'
 
 const ContractAddressSection = styled.div`
   display: flex;

src/components/Tokens/TokenDetails/BalanceSummary.tsx

@@ -7,7 +7,7 @@ import { asSupportedChain } from 'constants/chains'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 const BalancesCard = styled.div`

src/components/Tokens/TokenDetails/InvalidTokenDetails.tsx

@@ -6,7 +6,7 @@ import { getChainInfo } from 'constants/chainInfo'
 import useSelectChain from 'hooks/useSelectChain'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { ReactComponent as EyeIcon } from '../../../assets/svg/eye.svg'
 

src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx

@@ -6,7 +6,7 @@ import { CHAIN_ID_TO_BACKEND_NAME } from 'graphql/data/util'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
 import styled from 'styled-components'
-import { StyledInternalLink } from 'theme'
+import { StyledInternalLink } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 const Wrapper = styled.div`

src/components/Tokens/TokenDetails/Resource.tsx

@@ -1,6 +1,6 @@
 import { darken } from 'polished'
 import styled from 'styled-components'
-import { ExternalLink } from 'theme'
+import { ExternalLink } from 'theme/components'
 
 const ResourceLink = styled(ExternalLink)`
   display: flex;

src/components/Tokens/TokenDetails/ShareButton.tsx

@@ -10,13 +10,12 @@ import { Link, Twitter } from 'react-feather'
 import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled, { useTheme } from 'styled-components'
-import { ClickableStyle, CopyHelperRefType } from 'theme'
 import { colors } from 'theme/colors'
+import { ClickableStyle, CopyHelperRefType } from 'theme/components'
+import { CopyHelper } from 'theme/components'
 import { opacify } from 'theme/utils'
 import { Z_INDEX } from 'theme/zIndex'
 
-import { CopyHelper } from '../../../theme'
-
 const TWITTER_WIDTH = 560
 const TWITTER_HEIGHT = 480
 

src/components/Tokens/TokenDetails/Skeleton.tsx

@@ -2,7 +2,7 @@ import { SwapSkeleton } from 'components/swap/SwapSkeleton'
 import { ArrowLeft } from 'react-feather'
 import { useParams } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { textFadeIn } from 'theme/styles'
 
 import { LoadingBubble } from '../loading'

src/components/Tokens/TokenDetails/StatsSection.tsx

@@ -4,7 +4,7 @@ import { MouseoverTooltip } from 'components/Tooltip'
 import { getChainInfo } from 'constants/chainInfo'
 import { ReactNode } from 'react'
 import styled from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { textFadeIn } from 'theme/styles'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 

src/components/Tokens/TokenTable/NetworkFilter.tsx

@@ -13,7 +13,7 @@ import { useNavigate, useParams } from 'react-router-dom'
 import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled, { css, useTheme } from 'styled-components'
-import { EllipsisStyle } from 'theme'
+import { EllipsisStyle } from 'theme/components'
 
 import FilterOption from './FilterOption'
 

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -15,7 +15,8 @@ import { ForwardedRef, forwardRef } from 'react'
 import { CSSProperties, ReactNode } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import styled, { css, useTheme } from 'styled-components'
-import { BREAKPOINTS, ClickableStyle } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ClickableStyle } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 import {

src/components/TransactionConfirmationModal/index.tsx

@@ -9,12 +9,12 @@ import { ReactNode, useCallback, useState } from 'react'
 import { AlertCircle, ArrowUpCircle, CheckCircle } from 'react-feather'
 import { useIsTransactionConfirmed, useTransaction } from 'state/transactions/hooks'
 import styled, { useTheme } from 'styled-components'
+import { ExternalLink, ThemedText } from 'theme/components'
+import { CloseIcon, CustomLightSpinner } from 'theme/components'
 import { isL2ChainId } from 'utils/chains'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 import Circle from '../../assets/images/blue-loader.svg'
-import { ExternalLink, ThemedText } from '../../theme'
-import { CloseIcon, CustomLightSpinner } from '../../theme'
 import { TransactionSummary } from '../AccountDetails/TransactionSummary'
 import { ButtonLight, ButtonPrimary } from '../Button'
 import { AutoColumn, ColumnCenter } from '../Column'

src/components/V2Unsupported/index.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 import { AutoColumn } from 'components/Column'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const TextWrapper = styled.div`
   border: 1px solid ${({ theme }) => theme.neutral3};

src/components/WalletModal/ConnectionErrorView.tsx

@@ -4,7 +4,7 @@ import { ButtonEmpty, ButtonPrimary } from 'components/Button'
 import { ActivationStatus, useActivationState } from 'connection/activate'
 import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { flexColumnNoWrap } from 'theme/styles'
 
 const Wrapper = styled.div`

src/components/WalletModal/PrivacyPolicyNotice.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import styled from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 
 const StyledLink = styled(ExternalLink)`
   font-weight: 535;

src/components/WalletModal/index.tsx

@@ -8,7 +8,7 @@ import { ActivationStatus, useActivationState } from 'connection/activate'
 import { isSupportedChain } from 'constants/chains'
 import { useEffect } from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { flexColumnNoWrap } from 'theme/styles'
 
 import ConnectionErrorView from './ConnectionErrorView'

src/components/addLiquidity/OwnershipWarning.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const ExplainerText = styled.div`
   color: ${({ theme }) => theme.neutral2};

src/components/claim/AddressClaimModal.tsx

@@ -5,6 +5,7 @@ import { useWeb3React } from '@web3-react/core'
 import { useState } from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components'
+import { CloseIcon, CustomLightSpinner, ExternalLink, ThemedText, UniTokenAnimated } from 'theme/components'
 import { shortenAddress } from 'utils'
 
 import Circle from '../../assets/images/blue-loader.svg'
@@ -12,7 +13,6 @@ import tokenLogo from '../../assets/images/token-logo.png'
 import useENS from '../../hooks/useENS'
 import { useClaimCallback, useUserHasAvailableClaim, useUserUnclaimedAmount } from '../../state/claim/hooks'
 import { useIsTransactionPending } from '../../state/transactions/hooks'
-import { CloseIcon, CustomLightSpinner, ExternalLink, ThemedText, UniTokenAnimated } from '../../theme'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import AddressInputPanel from '../AddressInputPanel'
 import { ButtonPrimary } from '../Button'

src/components/swap/AdvancedSwapDetails.tsx

@@ -9,9 +9,9 @@ import { ZERO_PERCENT } from 'constants/misc'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { ClassicTrade, InterfaceTrade } from 'state/routing/types'
 import { getTransactionCount, isClassicTrade } from 'state/routing/utils'
+import { ExternalLink, Separator, ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
-import { ExternalLink, Separator, ThemedText } from '../../theme'
 import Column from '../Column'
 import RouterLabel from '../RouterLabel'
 import { RowBetween, RowFixed } from '../Row'

src/components/swap/ConfirmSwapModal.tsx

@@ -25,7 +25,7 @@ import { InterfaceTrade, TradeFillType } from 'state/routing/types'
 import { Field } from 'state/swap/actions'
 import { useIsTransactionConfirmed, useSwapTransactionStatus } from 'state/transactions/hooks'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import invariant from 'tiny-invariant'
 import { isL2ChainId } from 'utils/chains'
 import { NumberType, useFormatter } from 'utils/formatNumbers'

src/components/swap/GasBreakdownTooltip.tsx

@@ -6,7 +6,7 @@ import { ReactNode } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
 import { isClassicTrade, isUniswapXTrade } from 'state/routing/utils'
 import styled from 'styled-components'
-import { Divider, ExternalLink, ThemedText } from 'theme'
+import { Divider, ExternalLink, ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 const Container = styled(AutoColumn)`

src/components/swap/GasEstimateTooltip.tsx

@@ -10,7 +10,7 @@ import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
 import { InterfaceTrade } from 'state/routing/types'
 import { isUniswapXTrade } from 'state/routing/utils'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 import { GasBreakdownTooltip } from './GasBreakdownTooltip'

src/components/swap/PendingModalContent/ErrorModalContent.tsx

@@ -5,7 +5,7 @@ import QuestionHelper from 'components/QuestionHelper'
 import Row from 'components/Row'
 import { AlertTriangle } from 'react-feather'
 import { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { PendingModalContainer } from '.'
 

src/components/swap/PendingModalContent/TradeSummary.tsx

@@ -3,7 +3,7 @@ import Row from 'components/Row'
 import { ArrowRight } from 'react-feather'
 import { InterfaceTrade } from 'state/routing/types'
 import { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { useFormatter } from 'utils/formatNumbers'
 
 export function TradeSummary({ trade }: { trade: Pick<InterfaceTrade, 'inputAmount' | 'postTaxOutputAmount'> }) {

src/components/swap/PendingModalContent/index.tsx

@@ -15,7 +15,7 @@ import { useOrder } from 'state/signatures/hooks'
 import { UniswapXOrderDetails } from 'state/signatures/types'
 import { useIsTransactionConfirmed, useSwapTransactionStatus } from 'state/transactions/hooks'
 import styled, { css, keyframes } from 'styled-components'
-import { ExternalLink } from 'theme'
+import { ExternalLink } from 'theme/components'
 import { ThemedText } from 'theme/components/text'
 import { getExplorerLink } from 'utils/getExplorerLink'
 import { ExplorerDataType } from 'utils/getExplorerLink'

src/components/swap/PriceImpactModal.tsx

@@ -5,7 +5,7 @@ import { ColumnCenter } from 'components/Column'
 import Row from 'components/Row'
 import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components'
-import { CloseIcon, ThemedText } from 'theme'
+import { CloseIcon, ThemedText } from 'theme/components'
 import { useFormatter } from 'utils/formatNumbers'
 
 import Modal from '../Modal'

src/components/swap/PriceImpactWarning.tsx

@@ -2,10 +2,10 @@ import { Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
 import { OutlineCard } from 'components/Card'
 import styled, { useTheme } from 'styled-components'
+import { ThemedText } from 'theme/components'
 import { opacify } from 'theme/utils'
 import { useFormatter } from 'utils/formatNumbers'
 
-import { ThemedText } from '../../theme'
 import { AutoColumn } from '../Column'
 import { RowBetween, RowFixed } from '../Row'
 import { MouseoverTooltip } from '../Tooltip'

src/components/swap/SwapBuyFiatButton.tsx

@@ -7,7 +7,7 @@ import { ButtonText } from 'components/Button'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components'
-import { ExternalLink } from 'theme'
+import { ExternalLink } from 'theme/components'
 
 import { useFiatOnrampAvailability, useOpenModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'

src/components/swap/SwapDetailsDropdown.tsx

@@ -11,7 +11,7 @@ import { useState } from 'react'
 import { ChevronDown } from 'react-feather'
 import { InterfaceTrade } from 'state/routing/types'
 import styled, { keyframes, useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { AdvancedSwapDetails } from './AdvancedSwapDetails'
 import GasEstimateTooltip from './GasEstimateTooltip'

src/components/swap/SwapHeader.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
 import { InterfaceTrade } from 'state/routing/types'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { RowBetween, RowFixed } from '../Row'
 import SettingsTab from '../Settings'

src/components/swap/SwapModalFooter.tsx

@@ -15,7 +15,7 @@ import { ClassicTrade, InterfaceTrade, RouterPreference } from 'state/routing/ty
 import { getTransactionCount, isClassicTrade } from 'state/routing/utils'
 import { useRouterPreference, useUserSlippageTolerance } from 'state/user/hooks'
 import styled, { DefaultTheme, useTheme } from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { FormatterRule, NumberType, SIX_SIG_FIGS_NO_COMMAS, useFormatter } from 'utils/formatNumbers'
 import getRoutingDiagramEntries from 'utils/getRoutingDiagramEntries'
 import { formatSwapButtonClickEventProperties } from 'utils/loggingFormatters'

src/components/swap/SwapModalHeader.tsx

@@ -5,7 +5,7 @@ import { useUSDPrice } from 'hooks/useUSDPrice'
 import { InterfaceTrade } from 'state/routing/types'
 import { Field } from 'state/swap/actions'
 import styled from 'styled-components'
-import { Divider, ThemedText } from 'theme'
+import { Divider, ThemedText } from 'theme/components'
 
 import { SwapModalHeaderAmount } from './SwapModalHeaderAmount'
 

src/components/swap/SwapModalHeaderAmount.tsx

@@ -8,7 +8,8 @@ import { PropsWithChildren, ReactNode } from 'react'
 import { TextProps } from 'rebass'
 import { Field } from 'state/swap/actions'
 import styled from 'styled-components'
-import { BREAKPOINTS, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 export const Label = styled(ThemedText.BodySmall)<{ cursor?: string }>`

src/components/swap/SwapRoute.tsx

@@ -6,7 +6,7 @@ import RoutingDiagram from 'components/RoutingDiagram/RoutingDiagram'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
 import useAutoRouterSupported from 'hooks/useAutoRouterSupported'
 import { ClassicTrade } from 'state/routing/types'
-import { Separator, ThemedText } from 'theme'
+import { Separator, ThemedText } from 'theme/components'
 import getRoutingDiagramEntries from 'utils/getRoutingDiagramEntries'
 
 import RouterLabel from '../RouterLabel'

src/components/swap/SwapSkeleton.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { ArrowContainer } from 'pages/Swap'
 import { ArrowDown } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { ArrowWrapper } from './styled'
 

src/components/swap/TradePrice.tsx

@@ -4,7 +4,7 @@ import { useUSDPrice } from 'hooks/useUSDPrice'
 import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
 import { useCallback, useMemo, useState } from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 interface TradePriceProps {

src/components/swap/UnsupportedCurrencyFooter.tsx

@@ -9,7 +9,7 @@ import Modal from 'components/Modal'
 import { AutoRow, RowBetween } from 'components/Row'
 import { useState } from 'react'
 import styled from 'styled-components'
-import { CloseIcon, ExternalLink, ThemedText } from 'theme'
+import { CloseIcon, ExternalLink, ThemedText } from 'theme/components'
 import { Z_INDEX } from 'theme/zIndex'
 
 import { useUnsupportedTokens } from '../../hooks/Tokens'