Merge branch 'move-components-to-lib'

63 files changed, 112 insertions, 73 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/app.tsx b/desktop/packages/mullvad-vpn/src/renderer/app.tsx
index 67e7a4db33..90af0cf22f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/app.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/app.tsx
@@ -39,13 +39,13 @@ import log, { ConsoleOutput } from '../shared/logging';
 import { LogLevel } from '../shared/logging-types';
 import { Scheduler } from '../shared/scheduler';
 import AppRouter from './components/AppRouter';
-import { VariablesGlobalStyle } from './components/common/variables';
 import ErrorBoundary from './components/ErrorBoundary';
 import KeyboardNavigation from './components/KeyboardNavigation';
 import Lang from './components/Lang';
 import MacOsScrollbarDetection from './components/MacOsScrollbarDetection';
 import { ModalContainer } from './components/Modal';
 import { AppContext } from './context';
+import { Theme } from './lib/components';
 import History, { ITransitionSpecification, transitions } from './lib/history';
 import { loadTranslations } from './lib/load-translations';
 import IpcOutput from './lib/logging';
@@ -296,9 +296,9 @@ export default class AppRenderer {
                   <ErrorBoundary>
                     <ModalContainer>
                       <KeyboardNavigation>
-                        <VariablesGlobalStyle>
+                        <Theme>
                           <AppRouter />
-                        </VariablesGlobalStyle>
+                        </Theme>
                       </KeyboardNavigation>
                       {window.env.platform === 'darwin' && <MacOsScrollbarDetection />}
                     </ModalContainer>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
index f1e5a5e5ae..af194e5ea8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
@@ -7,14 +7,14 @@ import { AccessMethodSetting } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useApiAccessMethodTest } from '../lib/api-access-methods';
+import { Flex } from '../lib/components';
+import { Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { generateRoutePath } from '../lib/routeHelpers';
 import { RoutePath } from '../lib/routes';
 import { useBoolean } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
 import * as Cell from './cell';
-import { Flex } from './common/layout';
-import { Spacings } from './common/variables';
 import {
   ContextMenu,
   ContextMenuContainer,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
index b3a88688e0..264b389f84 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
@@ -5,13 +5,13 @@ import styled from 'styled-components';
 import { strings } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
+import { Flex } from '../lib/components';
+import { Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { useBoolean } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
-import { Flex } from './common/layout';
-import { Spacings } from './common/variables';
 import InfoButton from './InfoButton';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
index a1aa849b50..fee86b00cc 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
+import { Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { useBoolean } from '../lib/utility-hooks';
 import * as AppButton from './AppButton';
-import { Spacings } from './common/variables';
 import { measurements } from './common-styles';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
index 6145d902ce..62babaac38 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
-import { Flex } from './common/layout';
-import { Colors, Spacings } from './common/variables';
+import { Flex } from '../lib/components';
+import { Colors, Spacings } from '../lib/foundations';
 import { measurements } from './common-styles';
 import HeaderBar from './HeaderBar';
 import { NavigationScrollbars } from './NavigationBar';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx
index ef002c023d..c4e6293f10 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { ButtonProps } from './common/molecules';
+import { ButtonProps } from '../lib/components';
 
 const ButtonRow = styled.div({
   display: 'flex',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
index 68e2451b41..e7e16b395a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
@@ -4,12 +4,12 @@ import { sprintf } from 'sprintf-js';
 import { strings } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
+import { Flex } from '../lib/components';
 import { useRelaySettingsUpdater } from '../lib/constraint-updater';
 import { useHistory } from '../lib/history';
 import { useSelector } from '../redux/store';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
-import { Flex } from './common/layout';
 import { StyledIllustration } from './DaitaSettings';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
index a63754a691..ab9965250a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
@@ -17,6 +17,8 @@ import {
 } from '../../shared/notifications';
 import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
+import { Link } from '../lib/components';
+import { Colors } from '../lib/foundations';
 import { transitions, useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
 import {
@@ -27,8 +29,6 @@ import { RoutePath } from '../lib/routes';
 import accountActions from '../redux/account/actions';
 import { IReduxState, useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
-import { Link } from './common/text';
-import { Colors } from './common/variables';
 import { ModalAlert, ModalAlertType, ModalMessage, ModalMessageList } from './Modal';
 import {
   NotificationActions,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
index 12f9fbef6e..bdc81af686 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
@@ -4,9 +4,9 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { InAppNotificationIndicatorType } from '../../shared/notifications/notification';
+import { IconButton } from '../lib/components';
 import { useEffectEvent, useLastDefinedValue, useStyledRef } from '../lib/utility-hooks';
 import * as AppButton from './AppButton';
-import { IconButton } from './common/molecules';
 import { tinyText } from './common-styles';
 import ImageView from './ImageView';
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
index 2294d74a7d..f2c4c2760a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
@@ -3,12 +3,11 @@ import { useCallback } from 'react';
 import { strings } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
+import { Button, TitleBig } from '../lib/components';
 import { useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { useSelector } from '../redux/store';
 import * as Cell from './cell';
-import { Button } from './common/molecules';
-import { TitleBig } from './common/text';
 import { BackAction } from './KeyboardNavigation';
 import {
   ButtonStack,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
index adb8357ac8..8aa8686cb6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Flex } from './common/layout';
-import { LabelTiny, TitleBig } from './common/text';
-import { Colors, Spacings } from './common/variables';
+import { Flex, LabelTiny, TitleBig } from '../lib/components';
+import { Colors, Spacings } from '../lib/foundations';
 
 export const HeaderTitle = styled(TitleBig)({
   wordWrap: 'break-word',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
index 8da1f41e87..8b7169ab06 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
@@ -7,12 +7,12 @@ import { messages } from '../../shared/gettext';
 import { useScheduler } from '../../shared/scheduler';
 import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
+import { Flex } from '../lib/components';
 import { transitions, useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { useBoolean, useEffectEvent } from '../lib/utility-hooks';
 import settingsImportActions from '../redux/settings-import/actions';
 import { useSelector } from '../redux/store';
-import { Flex } from './common/layout/Flex';
 import { measurements, normalText, tinyText } from './common-styles';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
index 97254d5e3f..4070b7dba5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
@@ -10,6 +10,8 @@ import {
 } from '../../shared/application-types';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
+import { Flex, FootnoteMini } from '../lib/components';
+import { Colors, Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
 import { useEffectEvent, useStyledRef } from '../lib/utility-hooks';
@@ -17,9 +19,6 @@ import { IReduxState } from '../redux/store';
 import Accordion from './Accordion';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { Flex } from './common/layout/Flex';
-import { FootnoteMini } from './common/text/FootnoteMini';
-import { Colors, Spacings } from './common/variables';
 import { CustomScrollbarsRef } from './CustomScrollbars';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index 5423c8a212..0d6fba2591 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
 import { colors } from '../../config.json';
+import { Spacings } from '../lib/foundations';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { Spacings } from './common/variables';
 import { measurements, normalText } from './common-styles';
 import ImageView from './ImageView';
 import { NavigationScrollbars } from './NavigationBar';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
index 7c58f43ab0..5754ebce72 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
@@ -8,6 +8,7 @@ import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { useAppContext } from '../context';
 import { useRelaySettingsUpdater } from '../lib/constraint-updater';
+import { Colors, Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
 import { useTunnelProtocol } from '../lib/relay-settings-hooks';
@@ -19,7 +20,6 @@ import * as AppButton from './AppButton';
 import { AriaDescription, AriaDetails, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
 import Selector, { SelectorItem } from './cell/Selector';
-import { Colors, Spacings } from './common/variables';
 import CustomDnsSettings from './CustomDnsSettings';
 import InfoButton, { InfoIcon } from './InfoButton';
 import { BackAction } from './KeyboardNavigation';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
index 8f0336c13c..181b874251 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 
-import { Center } from '../common/layout';
-import { Colors, Spacings } from '../common/variables';
+import { Center } from '../../lib/components';
+import { Colors, Spacings } from '../../lib/foundations';
 import { IImageViewProps } from '../ImageView';
 import { CellDisabledContext } from './Container';
 import { Icon } from './Label';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
index 551b5d7c20..9394acf7f0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Spacings } from '../common/variables';
+import { Spacings } from '../../lib/foundations';
 import { Row } from './Row';
 
 const StyledContainer = styled(Row)({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
index 058c96db82..cd575dc9a0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
-import { LabelTiny } from '../common/text';
-import { Colors, Spacings } from '../common/variables';
+import { LabelTiny } from '../../lib/components';
+import { Colors, Spacings } from '../../lib/foundations';
 
 export const CellFooter = styled.div({
   margin: `${Spacings.spacing1} ${Spacings.spacing6} 0px`,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
index 5bce2c71af..8b5cacb82d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 
-import { Colors, Spacings } from '../common/variables';
+import { Colors, Spacings } from '../../lib/foundations';
 import { buttonText, normalText, tinyText } from '../common-styles';
 import ImageView, { IImageViewProps } from '../ImageView';
 import { CellButton } from './CellButton';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
index 002b3ac478..c73b106b88 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
@@ -2,11 +2,11 @@ import React, { useEffect } from 'react';
 import styled from 'styled-components';
 
 import { useAppContext } from '../../context';
+import { Colors, Spacings } from '../../lib/foundations';
 import { useHistory } from '../../lib/history';
 import { useBoolean, useEffectEvent } from '../../lib/utility-hooks';
 import Accordion from '../Accordion';
 import ChevronButton from '../ChevronButton';
-import { Colors, Spacings } from '../common/variables';
 import { buttonText, openSans, sourceSansPro } from '../common-styles';
 import { Container } from './Container';
 import { Row } from './Row';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
index 51ddba958f..89692c79f6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Colors, Spacings } from './common/variables';
+import { Colors, Spacings } from '../lib/foundations';
 
 export const openSans: React.CSSProperties = {
   fontFamily: 'Open Sans',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx
index 79e8ed316a..565c6bcd04 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Spacings } from '../variables';
-import { Flex, FlexProps } from './Flex';
+import { Flex, FlexProps } from '../../../lib/components';
+import { Spacings } from '../../../lib/foundations';
 
 export interface ContainerProps extends FlexProps {
   size?: '3' | '4';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx
index a0126bcd1d..63eb062f1b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx
@@ -3,8 +3,8 @@ import { useCallback } from 'react';
 import { messages } from '../../../shared/gettext';
 import log from '../../../shared/logging';
 import { useAppContext } from '../../context';
+import { Button } from '../../lib/components';
 import { useSelector } from '../../redux/store';
-import { Button } from '../common/molecules';
 
 export default function ConnectionActionButton() {
   const tunnelState = useSelector((state) => state.connection.status.state);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx
index 7a6ab7d968..07ad034e98 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx
@@ -5,11 +5,11 @@ import { ICustomList } from '../../../shared/daemon-rpc-types';
 import { messages, relayLocations } from '../../../shared/gettext';
 import log from '../../../shared/logging';
 import { useAppContext } from '../../context';
+import { Button, ButtonProps } from '../../lib/components';
 import { transitions, useHistory } from '../../lib/history';
 import { RoutePath } from '../../lib/routes';
 import { IRelayLocationCountryRedux, RelaySettingsRedux } from '../../redux/settings/reducers';
 import { useSelector } from '../../redux/store';
-import { Button, ButtonProps } from '../common/molecules';
 import ImageView from '../ImageView';
 import { MultiButton } from '../MultiButton';
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx
index 539a7e46c3..5280ec9df7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx
@@ -3,9 +3,9 @@ import { useCallback } from 'react';
 import { messages } from '../../../../../shared/gettext';
 import { getDownloadUrl } from '../../../../../shared/version';
 import { useAppContext } from '../../../../context';
+import { Colors } from '../../../../lib/foundations';
 import { useSelector } from '../../../../redux/store';
 import * as Cell from '../../../cell';
-import { Colors } from '../../../common/variables';
 import { LabelStack } from '../../../Layout';
 
 export function AppVersionListItem() {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
index df5453a68f..6bfe45b7a9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
@@ -4,13 +4,11 @@ import styled from 'styled-components';
 import { links } from '../../../../config.json';
 import { messages } from '../../../../shared/gettext';
 import { useAppContext } from '../../../context';
+import { BodySmall, Button, Flex, TitleBig, TitleLarge } from '../../../lib/components';
+import { Container } from '../../../lib/components';
+import { Colors, Spacings } from '../../../lib/foundations';
 import { useHistory } from '../../../lib/history';
 import { useSelector } from '../../../redux/store';
-import { Flex } from '../../common/layout';
-import { Container } from '../../common/layout/Container';
-import { Button } from '../../common/molecules/';
-import { BodySmall, TitleBig, TitleLarge } from '../../common/text';
-import { Colors, Spacings } from '../../common/variables';
 import ImageView from '../../ImageView';
 import { BackAction } from '../../KeyboardNavigation';
 import { Layout, SettingsContainer } from '../../Layout';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts
new file mode 100644
index 0000000000..54e8908581
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts
@@ -0,0 +1,3 @@
+export * from './layout';
+export * from './typography';
+export * from './molecules';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Center.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Center.tsx
index 3222bb9719..3222bb9719 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Center.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Center.tsx
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Container.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Container.tsx
new file mode 100644
index 0000000000..66a76c02ec
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Container.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Spacings } from '../../foundations';
+import { Flex, FlexProps } from './Flex';
+
+export interface ContainerProps extends FlexProps {
+  size?: '3' | '4';
+  children: React.ReactNode;
+}
+
+const sizes: Record<'3' | '4', string> = {
+  '3': `calc(100% - ${Spacings.spacing6} * 2)`,
+  '4': `calc(100% - ${Spacings.spacing5} * 2)`,
+};
+
+const StyledFlex = styled(Flex)<{ $size: string }>((props) => ({
+  width: props.$size,
+  margin: 'auto',
+}));
+
+export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
+  ({ size = '4', ...props }, ref) => {
+    return <StyledFlex ref={ref} $size={sizes[size]} {...props} />;
+  },
+);
+
+Container.displayName = 'Container';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Flex.tsx
index 13a4804fa9..cba52c5f9f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Flex.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Spacings } from '../variables';
+import { Spacings } from '../../foundations';
 import { Layout, LayoutProps } from './Layout';
 
 export interface FlexProps extends LayoutProps {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Layout.tsx
index 03e4d5371d..925dded272 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Layout.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Spacings } from '../variables';
+import { Spacings } from '../../foundations';
 import { margin } from './margin';
 import { padding } from './padding';
 import { LayoutSpacings } from './types';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/VariablesGlobalStyle.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Theme.tsx
index fbd7487dc5..5d0e86f30e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/VariablesGlobalStyle.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Theme.tsx
@@ -1,11 +1,25 @@
 import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 
-import { colors, fontFamilies, fontSizes, fontWeights, lineHeights, radius, spacings } from './';
+import {
+  colors,
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  radius,
+  spacings,
+} from '../../foundations/variables';
 
 type VariablesProps = React.PropsWithChildren<object>;
 
-const GlobalStyle = createGlobalStyle`
+const Reset = createGlobalStyle`
+  button {
+    all: unset;
+  }
+`;
+
+const VariablesGlobalStyle = createGlobalStyle`
   :root {
     ${Object.entries({
       ...colors,
@@ -19,10 +33,11 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-export const VariablesGlobalStyle = ({ children }: VariablesProps) => {
+export const Theme = ({ children }: VariablesProps) => {
   return (
     <>
-      <GlobalStyle />
+      <Reset />
+      <VariablesGlobalStyle />
       {children}
     </>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/index.ts
index 885ab32d4b..654de0780d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/index.ts
@@ -1,3 +1,5 @@
 export * from './Center';
+export * from './Container';
 export * from './Flex';
 export * from './Layout';
+export * from './Theme';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/margin.ts
index bcc32fcaee..266aa63e7f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/margin.ts
@@ -1,4 +1,4 @@
-import { Spacings } from '../variables';
+import { Spacings } from '../../foundations';
 import { LayoutSpacings } from './types';
 
 export const all = (margin: Spacings) => ({ margin });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/padding.ts
index 16c66f6e64..c806c73309 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/padding.ts
@@ -1,4 +1,4 @@
-import { Spacings } from '../variables';
+import { Spacings } from '../../foundations';
 import { LayoutSpacings } from './types';
 
 export const all = (padding: Spacings) => ({ padding });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/types.ts
index 1f6ff5407f..cd044bb1b9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/types.ts
@@ -1,4 +1,4 @@
-import { Spacings } from '../variables';
+import { Spacings } from '../../foundations';
 
 export interface LayoutSpacings {
   all?: 'string';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/mixins/button-reset.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/mixins/button-reset.ts
index 4ef5844150..4ef5844150 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/mixins/button-reset.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/mixins/button-reset.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/mixins/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/mixins/index.ts
index c546f737b6..c546f737b6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/mixins/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/mixins/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/Button.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/Button.tsx
index ca8ff74883..bc1979dcf6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/Button.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/Button.tsx
@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 
+import { Colors, Radius, Spacings } from '../../foundations';
 import { Flex } from '../layout';
 import { buttonReset } from '../mixins';
-import { BodySmallSemiBold } from '../text';
-import { Colors, Radius, Spacings } from '../variables';
+import { BodySmallSemiBold } from '../typography';
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'success' | 'destructive';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/IconButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/IconButton.tsx
index 6d43fef048..1e59dd6790 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/IconButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/IconButton.tsx
@@ -1,9 +1,9 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import ImageView from '../../ImageView';
+import ImageView from '../../../components/ImageView';
+import { Colors } from '../../foundations';
 import { buttonReset } from '../mixins';
-import { Colors } from '../variables';
 
 export interface IconButtonProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/index.ts
index 66f0cf90a7..66f0cf90a7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx
index 18ab10e202..18ab10e202 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx
index f70a2c7b11..f70a2c7b11 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx
index 77d563e03c..77d563e03c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx
index f7a952e67e..f7a952e67e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Link.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Link.tsx
index e1bb272120..32d18b4861 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Link.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Link.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { useHistory } from '../../../lib/history';
-import { RoutePath } from '../../../lib/routes';
+import { Colors, Radius } from '../../foundations';
+import { useHistory } from '../../history';
+import { RoutePath } from '../../routes';
 import { buttonReset } from '../mixins';
-import { Colors, Radius } from '../variables';
 import { Text, TextProps } from './Text';
 
 export interface LinkProps extends TextProps, Omit<React.HtmlHTMLAttributes<'button'>, 'color'> {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
index 33b0cdc6d9..a590fbe119 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { TransientProps } from '../../../lib/styles';
-import { Colors, Typography, typography, TypographyProperties } from '../variables';
+import { Colors, Typography, typography, TypographyProperties } from '../../foundations';
+import { TransientProps } from '../../styles';
 
 export type TextProps = React.PropsWithChildren<{
   variant?: Typography;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx
index 4b3b1d84ef..4b3b1d84ef 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx
index c80814362e..c80814362e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx
index 5e188698a4..5e188698a4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/index.ts
index 542c9d5642..542c9d5642 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/index.ts
new file mode 100644
index 0000000000..aca74a1d15
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/index.ts
@@ -0,0 +1,2 @@
+export * from './tokens';
+export * from './variables';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/color-tokens.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts
index fe42f71f4e..fe42f71f4e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/tokens/color-tokens.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/index.ts
index 3c59aa34fd..3c59aa34fd 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/radius-tokens.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/radius-tokens.ts
index 7eecb31eca..7eecb31eca 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/tokens/radius-tokens.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/radius-tokens.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/spacing-tokens.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/spacing-tokens.ts
index 4216dde90a..4216dde90a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/tokens/spacing-tokens.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/spacing-tokens.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/typography-tokens.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/typography-tokens.ts
index 9d42a89c9f..9d42a89c9f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/tokens/typography-tokens.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/typography-tokens.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/color-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts
index c048456544..679951ec67 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/color-variables.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts
@@ -1,4 +1,4 @@
-import { ColorTokens } from '../../../tokens';
+import { ColorTokens } from '../tokens';
 
 export const colors = {
   '--color-darker-blue': ColorTokens.darkBlue,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/index.ts
index 3cabd68ee7..177588fbbd 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/index.ts
@@ -2,4 +2,3 @@ export * from './color-variables';
 export * from './radius-variables';
 export * from './typography-variables';
 export * from './spacing-variables';
-export * from './VariablesGlobalStyle';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/radius-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/radius-variables.ts
index 78ea604156..8334deded7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/radius-variables.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/radius-variables.ts
@@ -1,4 +1,4 @@
-import { RadiusTokens } from '../../../tokens';
+import { RadiusTokens } from '../tokens';
 
 export const radius = {
   '--radius-4': RadiusTokens.radius4,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/spacing-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/spacing-variables.ts
index b6929f070d..add1d0315c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/spacing-variables.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/spacing-variables.ts
@@ -1,4 +1,4 @@
-import { SpacingTokens } from '../../../tokens';
+import { SpacingTokens } from '../tokens';
 
 export const spacings = {
   '--spacing-1': SpacingTokens.spacing1,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/typography-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/typography-variables.ts
index 68f6530c26..121bb2af89 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/typography-variables.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/typography-variables.ts
@@ -1,9 +1,4 @@
-import {
-  FontFamilyTokens,
-  FontSizeTokens,
-  FontWeightTokens,
-  LineHeightTokens,
-} from '../../../tokens';
+import { FontFamilyTokens, FontSizeTokens, FontWeightTokens, LineHeightTokens } from '../tokens';
 
 export const fontFamilies = {
   '--font-family-open-sans': FontFamilyTokens.openSans,
diff --git a/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts b/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
index 96754811a6..921a029a06 100644
--- a/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
@@ -1,4 +1,4 @@
-import { LinkProps } from '../../renderer/components/common/text';
+import { LinkProps } from '../../renderer/lib/components';
 
 export type NotificationAction = {
   type: 'open-url';